:root{--akzent:#8a5a00;--akzent-hell:#f6eedf;--akzent-dunkel:#e0b25c;--akzent-hell-dunkel:#312d1e;--marke:#8a5a00}
/* Grundregeln aller Websites (UI-UX-REGELN 2.–8., 15.): Farben mit Dunkelmodus, Schrift, Kopf mit Menü, Brotkrumen,
   Seitenkopf, Fuß, Fokus, Druck. Davor setzt der Bau die --akzent*-Variablen (kern/basis/stil.mjs),
   danach folgt das Stylesheet der Website und überschreibt, was dort anders ist (z. B. --breite). */
:root {
  --text: #1c1f1d;
  --leise: #5b625d;
  --linie: #dfe3df;
  --flaeche: #ffffff;
  --grund: #f6f7f4;
  --akzent-text: #ffffff;
  --radius: 10px;
  --breite: 1240px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e8ebe8;
    --leise: #a3aba5;
    --linie: #333a35;
    --flaeche: #1b1f1c;
    --grund: #121513;
    --akzent: var(--akzent-dunkel);
    --akzent-hell: var(--akzent-hell-dunkel); /* Hauch Akzent auf dem dunklen Grund */
    --akzent-text: #0f1310;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--grund);
  /* Fuß immer am unteren Rand, auch bei wenig Inhalt */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--akzent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: 16px; top: -100px; background: var(--flaeche); padding: .5rem 1rem; border-radius: 8px; z-index: 50; }
.sprunglink:focus { top: 8px; }

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.logo-zeichen { width: 22px; height: 22px; flex: none; color: var(--akzent); }
.kopf nav a { color: var(--leise); text-decoration: none; margin-left: 1rem; font-size: .95rem; display: inline-block; padding: .6rem 0; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--akzent); }
.menue-knopf { display: none; }
/* Handy: Kopf in einer Zeile mit Menü-Knopf, Links klappen darunter auf */
@media (max-width: 699px) {
  html { scroll-padding-top: 12px; }
  .kopf .huelle { min-height: 56px; gap: 0 1rem; }
  .js .menue-knopf { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 8px; }
  .menue-knopf::before, .menue-knopf::after { content: ""; grid-area: 1 / 1; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .15s, box-shadow .15s; }
  .menue-knopf::before { box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .menue-knopf::after { transform: scaleX(0); }
  .offen .menue-knopf::before { box-shadow: none; transform: rotate(45deg); }
  .offen .menue-knopf::after { transform: rotate(-45deg); }
  .js .kopf nav { display: none; }
  .js .kopf.offen nav { display: flex; flex-direction: column; flex-basis: 100%; padding-bottom: .5rem; }
  .js .kopf nav a { margin: 0; padding: .75rem 0; font-size: 1rem; color: var(--text); border-top: 1px solid var(--linie); }
}

/* Knöpfe: gefüllt = Hauptaktion, umrandet (.zweit) = Nebenaktion (UI-UX-REGELN 9.) */
.knopf { font: inherit; font-weight: 600; padding: .65rem 1rem; border-radius: 8px; border: 1px solid var(--akzent); background: var(--akzent); color: var(--akzent-text); cursor: pointer; text-decoration: none; display: inline-block; }
.knopf.zweit { background: transparent; color: var(--akzent); }
main { flex: 1 0 auto; padding: 1.25rem 0 3rem; }
main.mit-vorspann { padding-top: 0; }
.krumen { font-size: .875rem; color: var(--leise); margin-bottom: .75rem; }
.krumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; }
.krumen li + li::before { content: "›"; margin-right: .25rem; }
.krumen a { color: var(--leise); }
/* Handy: aktuelle Seite steht ohnehin in der Überschrift */
@media (max-width: 699px) { .krumen li:nth-child(n+3)[aria-current] { display: none; } }
.einleitung { font-size: 1.05rem; color: var(--leise); max-width: 50rem; }
.seitenkopf { margin-bottom: 1rem; }
.seitenkopf h1 { margin-bottom: .3rem; }
.seitenkopf .einleitung { margin: 0; }
.prosa { max-width: 46rem; }
.prosa li { margin-bottom: .35rem; }

.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); font-size: .875rem; color: var(--leise); padding: 1.5rem 0; }
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.fuss p { margin: 0; }
.fuss a { color: var(--leise); }
.fuss nav a { margin-right: 1rem; }
.fuss .link-knopf { font: inherit; color: var(--leise); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* Tastatur-Fokus überall sichtbar (UI-UX-REGELN 15.). :root davor, damit spätere Regeln wie „all: unset“ ihn nicht entfernen. */
:root :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Kleine Textlinks mindestens 24 px hoch (UI-UX-REGELN 2.) */
.fuss a, .fuss .link-knopf, .krumen a { display: inline-block; padding-block: 3px; }
/* Finger: Logo und Fußzeilen-Links 44 px hoch (UI-UX-REGELN 2.) */
@media (pointer: coarse) {
  .logo { min-height: 44px; }
  .fuss nav a, .fuss .link-knopf { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .kopf, .fuss, .krumen, .sprunglink { display: none; }
  body { background: #fff; color: #000; }
}
/* Questhelper: oben die Kartenwahl, gewählte Karte mit Leaflet, Quests, Items, Code,
   Dialog mit dem Questgraphen, Dialog für Rückmeldungen.
   Mobil zuerst (360 px), ab 920 px zwei Spalten.
   Farben aus kern/basis/basis.css, Dunkelmodus kommt von dort. */
.app { margin-bottom: 2rem; }
/* Erledigt ist überall grün (Timo, 11.10.2026): Haken, Ziele, erledigte Linien und Fortschritt. Gold bleibt „aktiv“ und „annehmbar“,
   grau gestrichelt mit Schloss „später“. Kontrast: Grün auf Grund 4,7 : 1 hell, 7,2 : 1 dunkel. */
:root { --ok: #1a7f37; --ok-text: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --ok: #3fb950; --ok-text: #0f1310; }
}
.laedt { color: var(--leise); }
.block { margin-top: 1.5rem; }
.block > h2 { margin-top: 0; }
.hinweis { background: var(--akzent-hell); border-radius: 8px; padding: .6rem .8rem; }
.klein { font-size: .875rem; color: var(--leise); }
.anzahl { font-size: .8em; color: var(--leise); font-weight: 400; }
input, select { font: inherit; font-size: 16px; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .6rem; min-height: 44px; }
input[type="checkbox"] { min-height: 0; width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--akzent); }
.knopf.klein-knopf { padding: .35rem .7rem; font-size: .9rem; white-space: nowrap; }
.link-knopf { font: inherit; color: var(--akzent); background: none; border: 0; padding: .5rem 0; text-decoration: underline; cursor: pointer; }

/* Kartenwahl im Feld: Mit und ohne gewählte Karte bleibt sie an derselben Stelle (Timo, 11.10.2026) */
.schritt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; }
.schritt > h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; margin-bottom: .75rem; }
@media (max-width: 699px) { .schritt { padding: .75rem; } }
.leiste { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
/* Level: sichtbar als Eingabefeld (eingesenkt, Stift), nicht wie die Knöpfe daneben (Timo, 11.10.2026) */
.lvl-feld { display: inline-flex; align-items: center; gap: .3rem; padding-right: .6rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--grund); color: var(--akzent); cursor: text; }
.lvl-feld:hover, .lvl-feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.lvl-feld .lvl-kurz { padding-left: .6rem; font-size: .85em; opacity: .75; }
.lvl-feld .lvl { width: 2.6rem; border: 0; background: none; outline: none; font-weight: 600; }
.lvl-feld .lvl { text-align: center; }
.lvl-feld.mit-schritt { padding-right: 0; cursor: default; }
.lvl-feld label.lvl-kurz { cursor: text; }
.lvl-schritt { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 7px; }
.lvl-schritt:hover:not(:disabled) { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.lvl-schritt:disabled { opacity: .35; cursor: default; }
.lvl-feld .lvl::-webkit-inner-spin-button, .lvl-feld .lvl::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lvl-feld .lvl { -moz-appearance: textfield; appearance: textfield; }
/* Modus ist das Profil: Trennlinie vor Fraktion und Level */
.trenner { align-self: stretch; width: 1px; margin-block: .35rem; background: var(--linie); }
@media (max-width: 699px) { .baum-stand { gap: .5rem; } .baum-stand .segment button { padding-inline: .6rem; } .lvl-feld .lvl { width: 2.4rem; } }
/* Kopfzeile: PvP/PvE klein neben dem Logo; die Fläche zum Tippen bleibt 44 px hoch */
.kopf-modus { margin-right: auto; margin-left: .25rem; }
/* .kopf davor, sonst gewinnt das spätere .segment button (44px hoch) */
.kopf .kopf-modus button { position: relative; min-height: 30px; padding: .15rem .55rem; font-size: .8rem; }
.kopf-modus button::after { content: ""; position: absolute; inset: -7px 0; }
.kopf .kopf-modus { overflow: visible; }
/* Handy: Logo, Modus und Menü in einer Zeile */
@media (max-width: 699px) { .kopf .huelle { column-gap: .5rem; } .kopf .kopf-modus { margin-left: 0; } .kopf .kopf-modus button { padding-inline: .45rem; } }
.kopf-modus button:first-child { border-radius: 7px 0 0 7px; }
.kopf-modus button:last-child { border-radius: 0 7px 7px 0; }
/* Unter Kappa/Lightkeeper rechts „Aktive Quests wählen“; gefüllt mit Hinweis, solange nur die Startquests eingetragen sind */
/* Erster Schritt für Neulinge: groß unter dem Titel, pulsiert dreimal */
.start-knopf { margin: 0 0 1rem; }
.start-knopf .knopf { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.2rem; padding: .9rem 1.6rem; border-radius: 10px; animation: start-puls 1.6s ease-out 3; }
.start-knopf .knopf span { transition: transform .15s; }
.start-knopf .knopf:hover span, .start-knopf .knopf:focus-visible span { transform: translateX(3px); }
@keyframes start-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .start-knopf .knopf { animation: none; } }
@media (max-width: 699px) { .start-knopf .knopf { width: 100%; justify-content: center; } }
.zielzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .75rem; }
.zielzeile .zielwahl { margin: 0; }
.zielwahl .auswahl summary .hbild, .auswahl .mehr-liste .hbild { margin-right: .1rem; }
@media (max-width: 699px) { .zielzeile .knopf { flex: 1 1 100%; } }
/* Fußzeile schmaler (Timo, 11.10.2026: etwa 60 %) */
.fuss { padding: .55rem 0; }
/* Handy: Links in einer Zeile statt zwei, Abstand verteilt (Tippfläche bleibt 44px hoch) */
@media (max-width: 699px) { .fuss { padding: .5rem 0; font-size: .8rem; } .fuss nav { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .5rem; width: 100%; } .fuss nav a { margin-right: 0; } }
/* Fragezeichen neben der Überschrift: Kurztext beim Zeigen, Klick führt zur Erklärung */
.seitenkopf h1 { position: relative; display: flex; align-items: center; gap: .15rem; }
.hilfe-knopf { position: static; margin: -4px 0; color: var(--leise); text-decoration: none; cursor: pointer; }
.hilfe-knopf:hover, .hilfe-knopf:focus-visible { color: var(--akzent); }
/* Umschalter (Kappa, Lightkeeper) und Kartenfilter: Pillen, gedrückt in Akzentfarbe */
.zielwahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.umschalter, .filterleiste button { font: inherit; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); cursor: pointer; }
.umschalter[aria-pressed="true"], .filterleiste button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.umschalter[aria-pressed="true"] .anzahl, .filterleiste button[aria-pressed="true"] .anzahl { color: inherit; }
.filterleiste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.filterleiste:empty { display: none; }
.feld { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.feld input { width: 5rem; }
.segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.segment button { font: inherit; font-size: .95rem; background: var(--flaeche); color: var(--text); border: 0; border-left: 1px solid var(--linie); padding: .5rem .8rem; min-height: 44px; cursor: pointer; }
.segment button:first-child { border-left: 0; }
.segment button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); font-weight: 600; }


/* Zwei Spalten ab 920 px: Quests links, Items rechts */
@media (min-width: 920px) {
  .spalten { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
}

/* Quests */
.schalter { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; cursor: pointer; font-size: .95rem; }
.zwischen { margin-top: 1.25rem; }

/* Aktive Quests nach Händler, eingeklappt: Name, Marken, Karten; Klick klappt Ziele und Knöpfe auf (Timo, 11.10.2026) */
.haendler-kopf { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .4rem; font-size: 1rem; }
#liste > .haendler-kopf:first-child { margin-top: .25rem; }
.gruppe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.quest + .quest { border-top: 1px solid var(--linie); }
.quest-kopf { display: flex; align-items: center; gap: .25rem; padding-right: .25rem; }
.quest-kopf h4 { flex: 1; min-width: 0; margin: 0; font-size: inherit; }
.quest-auf { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 48px; padding: .45rem .25rem .45rem .9rem; font: inherit; text-align: left; color: var(--text); background: none; border: 0; cursor: pointer; }
.quest-titel { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.quest-titel .name { font-weight: 600; }
.quest-titel .marke, .quest-titel .ort { margin-left: 0; }
.quest-auf:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.quest-auf .pfeil { flex: none; color: var(--leise); transition: transform .15s; }
.quest-auf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.quest-inhalt { padding: 0 .9rem .75rem; }
.quest-inhalt .aktionen { justify-content: space-between; }
.meta { font-size: .85rem; color: var(--leise); margin: 0 0 .4rem; }
.ziele { list-style: none; padding: 0; margin: 0 0 .5rem; }
.ziel { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; cursor: pointer; line-height: 1.4; }
.ziel.erledigt > span { color: var(--leise); text-decoration: line-through; }
.ziel input[type="checkbox"] { accent-color: var(--ok); }
.ziel em { color: var(--leise); }
.ort { display: inline-block; font-size: .75rem; color: var(--leise); border: 1px solid var(--linie); border-radius: 999px; padding: 0 .45rem; margin-left: .35rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.marke { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; border-radius: 4px; padding: .05rem .35rem; vertical-align: .15em; margin-left: .2rem; }
.marke.kappa { background: #6b4f00; color: #fff; }
.marke.lk { background: #1d5a73; color: #fff; }
.marke.fir { background: var(--akzent-hell); color: var(--text); font-weight: 600; }

.zeilen { list-style: none; padding: 0; margin: 0; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--linie); }
.zeile:first-child { border-top: 0; }
.zeile .name { font-weight: 600; }
.zeile .klein { display: block; }
.bald { margin-top: 1rem; border-top: 1px dashed var(--linie); }
.bald h3 { display: flex; align-items: center; gap: .75rem; font-size: 1rem; }
.bald .link-knopf { font-size: .9rem; font-weight: 400; }
.gruppe { border-bottom: 1px solid var(--linie); }
.gruppe summary { cursor: pointer; padding: .6rem 0; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.gruppe .zeilen { padding-left: .25rem; padding-bottom: .5rem; }

/* Karten */
.kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: .4rem; }
@media (min-width: 700px) { .kartenraster { grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); } }
.kartenknopf { font: inherit; text-align: left; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 0 0 .4rem; min-height: 44px; cursor: pointer; line-height: 1.3; overflow: hidden; }
.kartenknopf img, .kartenknopf .ohne-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: .35rem; background: #1d2124; }
.kartenknopf .ohne-bild { display: grid; place-items: center; color: #8d968f; }
.kartenknopf .text { display: block; }
.kartenknopf .name, .kartenknopf .klein { display: block; padding-inline: .45rem; overflow-wrap: anywhere; }
.kartenknopf .name { font-weight: 600; font-size: .9rem; }
.kartenknopf .klein { font-size: .75rem; }
.kartenknopf.leer { opacity: .6; }
.kartenknopf .xp { white-space: nowrap; }
.kartenknopf.meiste-xp .xp { color: var(--akzent); font-weight: 600; }
.kartenknopf.gesperrt img { filter: grayscale(1) brightness(.75); }
.kartenknopf .sperre { color: var(--leise); margin-top: .15rem; }
.kartenknopf[aria-pressed="true"] { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); opacity: 1; }
#karten-zusatz { margin: .5rem 0 0; }
#karten-zusatz:empty { display: none; }

/* Gewählte Karte im selben Feld: Die Kacheln bleiben im selben Raster an ihrem Platz und verlieren nur das Bild,
   damit nichts quer springt (Timo, 11.10.2026). Darunter die Karte in voller Breite.
   Klick auf die gewählte Kachel wählt ab. */
#karten.mit-karte #karten-zusatz { display: none; }
.kartenknopf { position: relative; }
#karten.mit-karte .kartenknopf { padding-top: .4rem; }
#karten.mit-karte .kartenknopf img, #karten.mit-karte .kartenknopf .ohne-bild { display: none; }
#karten.mit-karte .kartenknopf[aria-pressed="true"] .name { padding-right: 1.6rem; }
.kartenknopf .zu { position: absolute; top: .3rem; right: .3rem; color: var(--akzent); }
#kartendetail { min-width: 0; }
#karten.mit-karte #kartendetail { margin-top: 1.25rem; }

/* Gewählte Karte: Kopf, darunter „Mitnehmen“ und „Ziele“ als Kästen, dann die Karte; ab 920 px Listen links, Karte rechts (klebt, breiter) */
#kartendetail { scroll-margin-top: 80px; }
.detail-kopf h2 { margin: 0 0 .25rem; }
.detail-kopf p { margin: 0 0 .25rem; }
.detail-kopf { margin-bottom: .75rem; }
.detail-block { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: var(--radius); padding: .75rem .9rem; margin-bottom: .75rem; }
#kartendetail .detail-block > h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.2rem; }
.detail-block > h3 svg { flex: none; color: var(--akzent); }
.detail-block > h3 .anzahl { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.detail-block > .kartenquests, .detail-block > .pack { margin-bottom: 0; }
.detail-karte { margin-top: .25rem; }
.ebenen { margin-bottom: .5rem; }
@media (max-width: 699px) { .detail-block { padding: .65rem .75rem; } }
@media (min-width: 920px) {
  .detail-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem; align-items: start; }
  /* Karte, Ebenen und „Zu besorgen“ zusammen eine Bildschirmhöhe; die Karte nimmt, was die Items übrig lassen */
  .detail-karte { position: sticky; top: 80px; margin-top: 0; display: flex; flex-direction: column; height: calc(100dvh - 96px); }
  .detail-karte .karte { flex: 1 1 0; height: auto; min-height: 300px; }
  .detail-karte > #karten-items { flex: none; max-height: 45%; overflow-y: auto; }
}
/* „Zu besorgen“ unter der Karte: kurz und nebeneinander */
#kartendetail .karten-items { margin: .6rem 0 0; padding: .55rem .7rem; }
#kartendetail .karten-items > h3 { font-size: 1rem; margin-bottom: .45rem; }
.ichips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ichips li { display: flex; align-items: center; min-height: 36px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); font-size: .85rem; line-height: 1.25; }
.ichip-text { padding: .3rem .1rem; }
.ichips li > .ichip-text:first-child { padding-left: .6rem; }
.ichips .marke { margin-left: .1rem; }
.ichips .aus-knopf { position: relative; width: 34px; height: 36px; }
.ichips .aus-knopf svg { width: 17px; height: 17px; }
/* Tippfläche 44 × 44, auch wenn der Knopf schmaler aussieht */
.ichips .aus-knopf::after { content: ''; position: absolute; inset: -4px -5px; }
.karten-items .aus-liste { margin-top: .4rem; }
/* Griff zum Verschieben */
.zieh { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--leise); cursor: grab; touch-action: none; }
.zieh::after { content: ''; position: absolute; inset: -4px -8px; }
.zieh:hover, .zieh:focus-visible { color: var(--text); background: var(--akzent-hell); }
.kq-kopf .zieh { margin-left: -.4rem; }
.kq-kopf h4 { flex: 1; min-width: 0; }
.zieht { position: relative; z-index: 5; outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 8px; background: var(--flaeche); box-shadow: 0 8px 20px rgb(0 0 0 / .35); }
.zieht, .zieht .zieh { cursor: grabbing; }
@media (max-width: 699px) { #kartendetail { scroll-margin-top: 12px; } }

.karte { position: relative; height: 60dvh; min-height: 320px; border-radius: var(--radius); overflow: hidden; background: #1d2124; border: 1px solid var(--linie); }
@media (max-width: 699px) { .karte { margin-inline: -16px; border-radius: 0; border-inline: 0; } }
@media (min-width: 920px) { .karte { height: 70vh; min-height: 420px; } }
@media (max-height: 500px) and (orientation: landscape) { .karte { min-height: 0; height: 85dvh; } }
.karte.leaflet-container { font: inherit; background: #1d2124; }
.karte-fehler { color: #e8ebe8; padding: 1rem; }
.karte .hidden-layer { display: none; }
.karte .off-level { opacity: .25; }
.map-area-label .label { position: absolute; color: #f2f2ee; font-size: calc(12px * var(--zs, 1)); font-weight: 600; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.ziel-punkt span, .nr { display: inline-grid; place-items: center; border-radius: 50%; background: var(--farbe); color: var(--schrift); font-weight: 700; font-variant-numeric: tabular-nums; }
.ziel-punkt span { width: 28px; height: 28px; font-size: 13px; border: 2px solid #111; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.ziel-punkt.klein span { width: 14px; height: 14px; border-width: 2px; }
.ziel-punkt.mit-b span { font-size: 11px; letter-spacing: -.02em; }
.ziel-punkt.klein.mit-b span { width: 18px; height: 18px; font-size: 10px; }
/* Anzahl und Stufe am Ziel; Buchstabe der Gruppe wie die kleinen Kreise auf der Karte */
.ziel-n { font-variant-numeric: tabular-nums; }
.ziel-b { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .35em; border-radius: 50%; background: var(--farbe); color: var(--schrift); font-size: .8em; font-weight: 700; vertical-align: .05em; }
.nr { width: 1.6em; height: 1.6em; font-size: .8rem; margin-right: .4rem; vertical-align: .1em; border: 1px solid rgba(0, 0, 0, .35); }
.popup strong { display: block; margin-bottom: .25rem; }
.popup p { margin: 0 0 .4rem; }
.leaflet-popup-content { font: inherit; font-size: .95rem; margin: .75rem 1rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--flaeche); color: var(--text); }
/* Sprechblase unter dem Punkt, wenn oben kein Platz ist (karte.js, einpassen) */
.leaflet-popup.unten { bottom: auto !important; top: 26px; margin-bottom: 0; }
.leaflet-popup.unten .leaflet-popup-tip-container { top: -19px; margin-top: 0; transform: rotate(180deg); }
.popup .ziel { margin: 0; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--flaeche); color: var(--text); border-bottom-color: var(--linie); }
.leaflet-control-attribution.leaflet-control { background: rgba(255, 255, 255, .85); color: #333; font-size: 11px; }
.leaflet-control-attribution a { color: #24508a; }
.karte .leaflet-bottom { bottom: calc(var(--fenster, -8px) + 8px); }
@media (pointer: coarse) { .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; } }
/* Kartenfenster unter 700 px: Karte unten auf der Karte statt Sprechblase */
.kartenfenster { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1000; background: var(--flaeche); color: var(--text); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); padding: .75rem 3rem .5rem .9rem; max-height: 60%; overflow-y: auto; }
.fenster-zu { position: absolute; top: 0; right: 0; width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; background: none; border: 0; color: var(--leise); cursor: pointer; }
.gesten-hinweis { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
.gesten-hinweis.sichtbar { opacity: 1; }

.pack, .kartenquests { list-style: none; padding: 0; margin: 0; }
.pack li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 .75rem; padding: .45rem 0; border-top: 1px solid var(--linie); }
.pack li:first-child { border-top: 0; }
.pack .art { font-weight: 600; font-size: .9rem; }
.pack .klein { grid-column: 2; }
.pack .pack-quests { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-top: .15rem; }
.pack .nr { font-size: .7rem; margin-right: .3rem; }
/* Zu besorgen: Auge rechts zum Ausblenden */
.pack.besorgen li { grid-template-columns: auto 7.5rem minmax(0, 1fr) auto; align-items: start; }
.pack.besorgen .zieh { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: -.4rem .1rem -.4rem -.4rem; }
.pack.besorgen .art { grid-column: 2; }
.pack.besorgen .was { grid-column: 3; }
.pack.besorgen .aus-knopf { grid-column: 4; grid-row: 1 / span 2; align-self: center; margin: -.4rem -.5rem -.4rem 0; }
.pack.besorgen .klein { grid-column: 3; }
@media (max-width: 600px) { .pack.besorgen li { grid-template-columns: auto 3.5rem minmax(0, 1fr) auto; } }
@media (max-width: 380px) { .pack li { grid-template-columns: 1fr; } .pack .klein { grid-column: 1; } }
.kartenquest { border-top: 1px solid var(--linie); padding: .5rem 0 .25rem; }
.kartenquest:first-child { border-top: 0; }
.kartenquest h4 { margin: 0 0 .2rem; font-size: .98rem; }
.hbild { width: 22px; height: 22px; border-radius: 4px; vertical-align: -6px; margin-right: .35rem; object-fit: cover; }
.wiki-name { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.wiki-name:hover, .wiki-name:focus-visible { text-decoration-style: solid; }
.kartenquest .ziele { margin: 0; }
/* Kartendetail: Haken rechts neben dem Namen, Unteraufgaben kleiner (Timo, 11.10.2026) */
.kq-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kq-kopf h4 { margin: 0; }
.haken-knopf { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); color: var(--ok); cursor: pointer; }
.haken-knopf:hover, .haken-knopf:focus-visible { background: var(--ok); border-color: var(--ok); color: var(--ok-text); }
.kartenquest .ziel { font-size: .85rem; padding: .15rem 0; gap: .45rem; }
/* Ausgeblendete Quests: unten im Ziele-Kasten, zugeklappt; aufgeklappt Namen mit Auge-Knopf zum Wiederzeigen (Timo, 11.10.2026: Spalte links lenkt ab) */
.aus-liste { margin-top: .5rem; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--leise); }
.aus-liste summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; list-style: none; }
.aus-liste summary::-webkit-details-marker { display: none; }
.aus-liste summary::after { content: "▸"; font-size: .75rem; transition: transform .15s; }
.aus-liste[open] summary::after { transform: rotate(90deg); }
.aus-liste summary svg { width: 18px; height: 18px; }
.aus-liste summary:hover, .aus-liste summary:focus-visible { color: var(--text); }
.aus-liste ul { list-style: none; margin: 0; padding: 0 0 .2rem; }
.aus-liste li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.kq-knoepfe { flex: none; display: flex; gap: .25rem; }
.aus-knopf { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--leise); cursor: pointer; }
.aus-knopf:hover, .aus-knopf:focus-visible { color: var(--text); border-color: var(--linie); }

/* Code */
.codewert { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.15rem; letter-spacing: .05em; }
.codeform label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
.codeform div { display: flex; gap: .5rem; max-width: 26rem; }
.codeform input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.nebenaktionen { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 1rem; }

/* Meldung mit „Rückgängig“: unten, über der sicheren Fläche */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1100; width: min(32rem, calc(100% - 24px)); display: flex; align-items: center; gap: .75rem; justify-content: space-between; background: var(--text); color: var(--grund); border-radius: var(--radius); padding: .6rem .6rem .6rem 1rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.toast .knopf.zweit { color: var(--grund); border-color: currentColor; flex: none; }

.erklaerung { margin-top: 2.5rem; }

/* Statische Seiten (seiten.mjs): Karten, Kappa, Lightkeeper, Items, Schlüssel */
ul.kartenraster { list-style: none; padding: 0; margin: 0 0 1rem; }
a.kartenknopf { display: block; height: 100%; text-decoration: none; }
a.kartenknopf .name { color: var(--akzent); text-decoration: underline; }
.liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste > li { padding: .45rem 0; border-top: 1px solid var(--linie); line-height: 1.4; }
.liste > li:first-child { border-top: 0; }
.liste .klein { display: block; }
.ziele.liste > li { padding: .2rem 0 .2rem 1rem; border: 0; position: relative; }
.ziele.liste > li::before { content: '–'; position: absolute; left: 0; color: var(--leise); }
.kartenquest { scroll-margin-top: 1rem; }
.kartenquest:target { background: var(--akzent-hell); }

/* Quests, die von selbst aktiv wurden: kurz nachfragen */
.neu-frage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; margin: .4rem 0 .5rem; padding: .4rem .6rem; border-radius: 8px; background: var(--akzent-hell); font-size: .9rem; line-height: 1.35; }
.knoepfe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
/* ⋯-Menü je Quest: Wiki, aus aktiven Quests nehmen, Fehler melden (Timo, 11.10.2026) */
.quest-kopf { display: flex; align-items: flex-start; gap: .5rem; }
.quest-kopf h3 { flex: 1; min-width: 0; }
.mehr { position: relative; flex: none; }
.quest-kopf .mehr { margin: -.45rem -.55rem 0 0; }
.mehr summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--leise); cursor: pointer; list-style: none; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary:hover, .mehr summary:focus-visible, .mehr[open] summary { color: var(--text); background: var(--grund); }
.mehr-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 14rem; padding: .3rem 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.mehr-liste a, .mehr-liste button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 .9rem; font: inherit; font-size: .95rem; text-align: left; color: var(--text); background: none; border: 0; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mehr-liste a:hover, .mehr-liste button:hover, .mehr-liste a:focus-visible, .mehr-liste button:focus-visible { background: var(--grund); }
/* Nach „Erledigt“ von selbst dazugekommen: oben in der Liste und markiert */
/* Erledigt: kurzer Balken unten füllt sich, dann verschwindet die Quest (Zeit wie ERLEDIGT_MS in app.js) */
.quest, .kartenquest { position: relative; }
.wird-fertig::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ok); transform-origin: left; animation: fuellen .8s linear forwards; }
.quest.wird-fertig::after { left: var(--radius); right: var(--radius); }
.wird-fertig [data-aktion="fertig"] { background: var(--ok); border-color: var(--ok); color: var(--ok-text); }
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.quest.ist-neu { box-shadow: inset 4px 0 0 var(--akzent); }
.neu-marke { display: inline-block; vertical-align: .1em; padding: .05rem .45rem; border-radius: 999px; background: var(--akzent); color: var(--akzent-text); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* Dialog „Aktive Quests hinzufügen“: alle Quests als Graph je Händler, jeder Graph waagerecht scrollbar; mobil bildschirmfüllend.
   Knotengröße 184 × 52 px wie KB/KH in app.js. */
.baum-dialog { padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); width: min(84rem, calc(100vw - 2rem)); max-width: none; height: calc(100dvh - 2rem); max-height: none; }
.baum-dialog[open] { display: flex; flex-direction: column; }
.baum-dialog::backdrop, .melden-dialog::backdrop { background: rgba(0, 0, 0, .55); }
/* Niedrige oder schmale Fenster: Der ganze Dialog scrollt, sonst bliebe unter dem Kopf kaum Platz für die Quests */
@media (max-height: 760px), (max-width: 699px) {
  .baum-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .baum-dialog .baum-inhalt { overflow: visible; }
  .baum-dialog .baum-fuss { position: sticky; bottom: 0; z-index: 3; }
}
@media (max-width: 699px) { .gliste .gk { width: 100%; } }
.baum-kopf { flex: none; padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--linie); }
/* Titel und Schließen oben, Modus/Fraktion/Level mittig darunter; breit alles in einer Zeile, die Leiste in der Mitte */
.baum-titel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h zu" "stand stand"; align-items: center; gap: .5rem .75rem; }
.baum-titel h2 { grid-area: h; }
.baum-zu { grid-area: zu; justify-self: end; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.baum-stand { grid-area: stand; margin: 0; justify-content: center; }
/* Suche in der ersten Zeile (Timo, 11.10.2026); schmal darunter, dann Profil, Fraktion, Level */
.baum-titel { grid-template-areas: "h zu" "suche suche" "stand stand"; }
.baum-titel .baum-suche { grid-area: suche; }
@media (max-width: 699px) { .baum-stand { justify-content: flex-start; } }
@media (min-width: 700px) { .baum-titel { grid-template-columns: auto minmax(12rem, 1fr) auto; grid-template-areas: "h suche zu" "stand stand stand"; } .baum-stand { justify-content: flex-start; } }
@media (min-width: 1100px) { .baum-titel { grid-template-columns: auto minmax(12rem, 1fr) auto auto; grid-template-areas: "h suche stand zu"; } }
.baum-titel h2 { margin: 0; font-size: 1.25rem; }
.baum-kopf p { margin: .35rem 0 .5rem; }
.baum-suche { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* halb so breit wie die Spalte (Timo, 11.10.2026) */
.baum-suche input { flex: 0 1 50%; min-width: 10rem; }
.baum-suche span:empty { display: none; }
.baum-suche span { flex: none; }
.chip { font: inherit; font-size: .85rem; flex: none; min-height: 44px; padding: .2rem .75rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--grund); color: var(--text); cursor: pointer; }
.chip .anzahl { color: var(--akzent); font-weight: 700; font-size: 1em; }
.baum-inhalt { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 1rem; }
/* Je Händler eine Karte mit fester Kopfzeile, damit man beim Scrollen weiß, wo man ist */
.gh { margin-top: .9rem; padding: 0 .75rem .75rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.gh[hidden] { display: none; }
.gh > h3 { position: sticky; top: 0; z-index: 2; margin: 0 -.75rem .6rem; padding: .55rem .75rem; border-bottom: 1px solid var(--linie); border-radius: var(--radius) var(--radius) 0 0; background: var(--grund); font-size: 1.1rem; }
.gvoll > .klein { margin: .5rem 0 .3rem; }
.flach .gvoll, .gliste:empty { display: none; }
.baum-oben { padding-top: .75rem; }
/* Hauptstory (Timo, 11.10.2026): Kapitel als Kacheln, eine aufgeklappte nimmt die ganze Breite */
.block-titel { margin: 1rem 0 .5rem; font-size: 1.05rem; }
.kapitel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; align-items: start; }
.kapitel-raster > .gh { margin: 0; }
.kapitel-raster > [open] { grid-column: 1 / -1; }
.kapitel:not([open]) { padding-bottom: 0; }
.kapitel > summary { display: flex; flex-direction: column; gap: 2px; margin: 0 -.75rem; padding: .5rem .75rem .55rem; cursor: pointer; list-style: none; }
.kapitel > summary::-webkit-details-marker { display: none; }
.kapitel[open] > summary { margin-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.kapitel-kopf { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.kapitel-kopf h3 { margin: 0; font-size: 1rem; }
.kapitel-kopf .pfeil { flex: none; color: var(--leise); transition: transform .15s; }
.kapitel[open] .kapitel-kopf .pfeil { transform: rotate(180deg); }
.kapitel-stand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leise); }
.kapitel-balken { height: 3px; margin-top: .2rem; border-radius: 2px; background: linear-gradient(var(--ok), var(--ok)) 0 0 / calc(var(--teil, 0) * 100%) 100% no-repeat, var(--linie); }
.kapitel > p { margin: 0 0 .5rem; }
.kapitel-orte { margin: -.3rem 0 .5rem; padding-left: 1.2rem; }
.kapitel .gk { width: 300px; height: auto; min-height: 52px; }
.kapitel .gk .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kapitel .gk.oder { width: 220px; border-style: dotted; }
.gk.ist-gewaehlt { border: 2px solid var(--ok); }
.gk.ist-gewaehlt .name::before { content: "✓ "; color: var(--ok); }
.tour .gk { width: 250px; }
@media (max-width: 699px) { .kapitel .gk, .kapitel .gk.oder { width: 100%; } }
.baum-oben:empty { display: none; }
.baum-oben p { margin: 0 0 .4rem; }
.baum-filter { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .5rem; }
/* Auswahl im Questgraphen (Karte, Händler): Chip mit Pfeil, gesetzt wie ein gedrückter Chip; Liste wie im ⋯-Menü */
.auswahl { position: relative; flex: none; }
.auswahl summary { display: inline-flex; align-items: center; gap: .3rem; list-style: none; }
.auswahl summary::-webkit-details-marker { display: none; }
.auswahl .pfeil { transition: transform .15s; }
.auswahl[open] .pfeil { transform: rotate(180deg); }
.auswahl .mehr-liste { left: 0; right: auto; max-height: min(60vh, 26rem); overflow-y: auto; }
.auswahl .mehr-liste.rechts { left: auto; right: 0; }
.mehr-liste .anzahl { margin-left: auto; padding-left: 1rem; color: var(--leise); font-variant-numeric: tabular-nums; }
/* aktiv / gesamt in Karten- und Händlerliste; ohne aktive nur die Gesamtzahl */
.mehr-liste .aktiv-zahl { color: var(--akzent); font-weight: 700; }
.mehr-liste .aktiv-zahl:not(:empty)::after { content: " / "; color: var(--leise); font-weight: 400; }
.mehr-liste [aria-pressed="true"] { color: var(--akzent); font-weight: 600; }
.mehr-liste .liste-titel { margin: .3rem 0 0; padding: .5rem .9rem .2rem; border-top: 1px solid var(--linie); font-size: .75rem; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.chip[aria-pressed="true"], .chip.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.chip[aria-pressed="true"] .anzahl { color: inherit; }
/* Prestige: Stufen 1 bis 6 als Chips, Bedingungen wie Ziele (Level und Quests sind nicht anklickbar, sie folgen aus dem Stand) */
/* Prestige im Graph-Kopf neben Lvl; das Feld klappt unter der Leiste auf */
.baum-stand { position: relative; }
.prestige-feld > summary { gap: .35rem; padding-block: .35rem; cursor: pointer; list-style: none; }
.prestige-feld > summary::-webkit-details-marker { display: none; }
.prestige-feld .prestige-teil { font-size: .85em; color: var(--leise); }
.prestige-feld .pfeil { color: var(--leise); transition: transform .15s; }
.prestige-feld[open] .pfeil { transform: rotate(180deg); }
.prestige-feld[open] > summary { border-color: var(--akzent); }
.prestige-feld > .prestige-inhalt { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30; width: min(30rem, 100%); max-height: min(70vh, 34rem); overflow: auto; padding: .75rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent); }
.prestige-stufen { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.prestige-stufen .chip { min-width: 44px; padding: .2rem .5rem; }
.prestige-bed input:disabled { opacity: 1; }
.prestige-bed div.ziel { cursor: default; }
.prestige-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Enden von The Ticket: Liste der Weggabelungen; was ein Ende verbaut, hervorgehoben; Knoten mit Weggabelung farbig umrandet */
.ende-liste { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.ende-liste ul { margin: .1rem 0 .3rem; padding-left: 1rem; }
.ende-liste li { margin: .15rem 0; }
.ende-aus { font-weight: 600; }
.gk.gk-gabel:not(.ist-aktiv) { border-color: var(--akzent); border-left-width: 4px; }
.prestige-bed .ziel { align-items: center; }
.gflaeche { overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 4px .6rem; margin-inline: -4px; }
.gnetz { position: relative; }
.gnetz > svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.gnetz path { fill: none; stroke: var(--leise); stroke-width: 1.5; opacity: .55; }
.gnetz path.neben { stroke-dasharray: 4 4; }
.gnetz path.fertig { stroke: var(--ok); opacity: .8; }
.geinzeln { display: flex; flex-wrap: wrap; gap: .4rem; }
.gnetz .gk { position: absolute; }
.gk { display: flex; align-items: stretch; width: 248px; height: 52px; border: 1px solid var(--linie); border-radius: 7px; background: var(--flaeche); color: var(--text); line-height: 1.25; }
.gnetz .gk { position: absolute; }
.gk-wahl { font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1 1 auto; min-width: 0; padding: .2rem .2rem .2rem .55rem; border: 0; border-radius: 6px 0 0 6px; background: none; cursor: pointer; }
.gk-info { flex: none; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: none; color: var(--leise); cursor: pointer; }
.gk-info:hover, .gk-info:focus-visible { color: var(--akzent); }
.gk-haken { flex: none; display: grid; place-items: center; width: 44px; padding: 0; border: 0; border-left: 1px solid var(--linie); border-radius: 0 6px 6px 0; background: none; color: var(--leise); cursor: pointer; }
.gk-haken span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.gk-haken:hover { color: var(--ok); }
/* Offen = leerer Ring; der Haken erscheint erst beim Zeigen, sonst sieht ein offener Schritt wie erledigt aus (Timo, 11.10.2026) */
.gk:not(.ist-fertig) .gk-haken span { -webkit-text-fill-color: transparent; }
.gk:not(.ist-fertig) .gk-haken:hover span, .gk:not(.ist-fertig) .gk-haken:focus-visible span { -webkit-text-fill-color: currentColor; }
.gk .name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk .klein { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk:hover { border-color: var(--akzent); }
.gk:focus-within { z-index: 1; }
.gk.ist-aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.gk.ist-aktiv .klein, .gk.ist-aktiv .gk-haken, .gk.ist-aktiv .gk-info { color: inherit; }
.gk.ist-aktiv .gk-haken { border-left-color: currentColor; }
.gk.ist-frei { border: 2px solid var(--akzent); }
.gk.ist-fertig { background: var(--grund); border-color: color-mix(in srgb, var(--ok) 50%, var(--linie)); }
.gk.ist-fertig .name { color: var(--leise); font-weight: 400; }
.gk.ist-fertig .gk-haken span { background: var(--ok); border-color: var(--ok); color: var(--ok-text); }
.gk.ist-zu { border-style: dashed; border-color: var(--leise); }
/* Ohne Legende verständlich (Timo, 11.10.2026): gold gefüllt = aktiv, gold Rahmen = annehmbar, grüner Haken = erledigt, Schloss = später */
.gk.ist-zu .name::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .3rem; vertical-align: -.05rem; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Infos zur Quest (aus dem Questgraphen) */
.info-dialog h3 { margin: .9rem 0 .35rem; font-size: 1rem; }
.info-dialog .meta { margin: 0 0 .6rem; }
.info-dialog .aktionen { margin-top: 1rem; }
.qi-links { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; }
.qi-link.ist-aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.qi-link.ist-frei { border: 2px solid var(--akzent); }
.qi-link.ist-fertig { color: var(--leise); }
.qi-link.ist-fertig::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.qi-link.ist-zu { border-style: dashed; }
.qi-link.ist-weg { text-decoration: line-through; opacity: .6; }
.gk.ist-weg { opacity: .55; }
.gk.ist-weg .name { text-decoration: line-through; }
.baum-fuss { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--grund); }
.baum-fuss[hidden] { display: none; }
@media (max-width: 699px) {
  .baum-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .baum-kopf, .baum-inhalt, .baum-fuss { padding-inline: 16px; }
}

/* Dialog „Stimmt etwas nicht?“ */
.melden-dialog { padding: 1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.melden-dialog h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.dialog-titel { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.dialog-titel h2 { margin: 0; }
.code-label { position: relative; display: flex; align-items: center; gap: .1rem; margin: 0; font-weight: 600; }
.code-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .1rem; }
/* Info-Symbol: Text als Blase unter der Zeile (an ihr ausgerichtet, damit nichts übersteht), bei Hover und Fokus (Antippen) */
.info { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; color: var(--leise); cursor: help; }
.info:hover, .info:focus-visible { color: var(--text); }
.info::after { content: attr(data-tipp); position: absolute; top: calc(100% + 2px); left: 0; z-index: 5; width: max-content; max-width: min(20rem, 100%); box-sizing: border-box; padding: .5rem .65rem; border-radius: 8px; background: var(--text); color: var(--grund); font-size: .85rem; font-weight: 400; line-height: 1.35; text-align: left; opacity: 0; pointer-events: none; transition: opacity .12s; }
.info:hover::after, .info:focus::after { opacity: 1; }
.melden-dialog p { margin: .25rem 0 .5rem; }
.wahlen { border: 0; padding: 0; margin: .5rem 0; display: grid; gap: .3rem; }
.wahl { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .6rem; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; line-height: 1.3; }
.wahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.wahl input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 0; accent-color: var(--akzent); }
.feld-block { display: grid; gap: .25rem; font-size: .9rem; font-weight: 600; margin: .75rem 0 .25rem; }
.feld-block textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .6rem; resize: vertical; }

/* Startseite: dezente Höhenlinien im Hintergrund (Timo, 11.10.2026, aus drei Entwürfen). Als Maske in Textfarbe, passt so zu Hell und Dunkel. */
body:has(#app) { isolation: isolate; }
body:has(#app)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--text); -webkit-mask: url(topo.svg) 0 0 / 900px 900px; mask: url(topo.svg) 0 0 / 900px 900px; opacity: .045; }