/*
  wortweltwanderungen.css — das gesamte Aussehen des Spiels.
  ───────────────────────────────────────────────────────────────────────────
  Gestaltungssprache: ein Spieltisch aus grünem „Filz" (felt); darauf
  cremefarbene Spielkarten und ein „Sternenfeld" (Wortfeld) aus Pergament.
  Essays erscheinen als aufgerollte Pergamentrolle (scroll-overlay). Zwei
  Serifenschriften: Fraunces (Display/Überschriften) und Spectral (Fließtext).

  Gliederung (per Banner-Kommentaren): Reset/Variablen → Tisch/Schiene/Beutel
  → Karte + Optionen → Stern/Graph/Pusteblume → Pergamentrolle → Animationen
  → Slot-Picker → Responsive/Print.
  Namensschema lose BEM-artig; alle Farben/Maße zentral als CSS-Variablen.
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Zentrale Palette & Maße — überall via var(--…) referenziert. Gruppen:
   Tinte (Text) · Papier (Karten) · Gold (Akzent) · Aufgaben-Modi
   (choice/subjective/conversation) · richtig/falsch · Linien/Schatten ·
   Filz (Tisch) · Pergament (Rolle) · Roller (Walzen der Rolle) · Maße. */
:root{
  --ink:#2b2118;--ink-soft:#5b4d3d;--ink-faint:#8c7c69;
  --paper:#f5eddf;--paper-deep:#ebe0cd;--paper-card:#faf6ee;
  --gold:#b08218;--gold-soft:#d9b86a;
  --choice:#a14a28;--subjective:#6a5079;--conversation:#4a6b5c;
  --correct:#2a6e3f;--wrong:#a14a28;
  --line:#d8c9ad;--shadow:rgba(43,33,24,.12);
  --felt-mid:#5b4631;--felt-edge:#241a10;
  --parch:#f1e3c4;--parch-deep:#e7d5ad;--parch-ink:#3a2c1a;
  --roller-light:#7a5a32;--roller-dark:#3a2812;
  --radius:12px;
  /* FESTE Design-Bühne (Landscape): Schiene, Nav-Spalte, Karte haben feste
     Design-Maße; die ganze Bühne wird per JS als EIN Block FORMTREU skaliert
     (transform:scale --s). So bleiben die Proportionen exakt, nichts wird je
     abgeschnitten. Im Portrait per Media-Query zurückgesetzt (kein scale). */
  --rail-w:264px;--nav-col:176px;
  /* --flank: symmetrische Spacer links/rechts der Karte. Im Landscape so bemessen, dass
     Schiene + Spacer + Karte + Spacer + Buttonleiste die 16:9-Bühne füllen:
     (Bühnenbreite − Schiene − Buttonleiste − Kartenbreite) / 2. */
  --flank:calc((var(--stage-h) * 16 / 9 - var(--rail-w) * 2 - var(--card-h) * var(--card-ar)) / 2);
  --card-ar:0.71;   /* einheitliches Spielkarten-Format (Breite/Höhe) für ALLE Karten, jedes Gerät */
  --card-h:940px;   /* Design-Höhe der Spielkarte (Landscape-Referenz vor Skalierung) */
  --stage-h:1020px; /* FESTE Design-Höhe der ganzen Bühne (uf-unabhängig!) — so bleibt der Skalierfaktor --s konstant, wenn der Nutzer die Schrift ändert; größere Schrift wächst dann ECHT (Karte/Schiene scrollen bei Überlänge intern) */
  --uf:1;           /* Nutzer-Schriftgrößen-Multiplikator (Stufe 2 schaltet die A−/A/A+-Bedienung dazu) */
  --s:1;            /* Landscape-Skalierfaktor (JS: passt die Bühne in die Fensterhöhe — Ziel 86 %, Deckel 90 %) */
}
/* Grund-Schriftgröße: feste DESIGN-Größe. Im Landscape skaliert die JS die ganze
   Bühne uniform (transform:scale --s) → die Schrift skaliert formtreu mit. ×
   Nutzer-Multiplikator --uf. Portrait (s. Media-Query) setzt eine eigene,
   breiten-taugliche Größe. */
html{font-size:calc(18px * var(--uf));}
body{
  font-family:'Inter','Spectral',system-ui,sans-serif;color:var(--ink);
  background:#241a10;min-height:100vh;line-height:1.6;overflow:hidden;
}
h1,h2,h3,.heading{font-family:'Fraunces',serif;line-height:1.3;}
button{font-family:inherit;color:inherit;}
/* Aktivierungs-/Fokusfarben warm statt Browser-Blau:
   · kein blauer Tap-Blitz auf Touch (-webkit-tap-highlight-color)
   · Maus-Klick zeigt keinen Fokus-Ring; Tastatur-Fokus bekommt eine GOLDene Kontur
     (:focus-visible — bleibt barrierefrei sichtbar)
   · Textauswahl und native Steuerelemente in der warmen Palette */
*{-webkit-tap-highlight-color:transparent;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
::selection{background:var(--gold-soft);color:var(--ink);}
/* Wortwolke/Splash: Ziehen darf keine goldenen Auswahl-Kästen hinterlassen */
.cloud-word::selection,.wolke-sphere ::selection,.splash-sphere ::selection{background:transparent;}
html{accent-color:var(--gold);}
/* Die App ist eine interaktive Oberfläche, kein Textdokument: das Chrome (Schiene,
   Buttons, Beschriftungen, Karten) ist NICHT markierbar — kein versehentliches
   „Auswählen", das wie selektierter Text aussieht. Ausgenommen: Eingabefelder +
   Lektor-Editor (Tippen/Markieren nötig). Die Pergament-Essays liegen außerhalb
   von .app und bleiben lesbar/kopierbar. */
.app{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
input, textarea, [contenteditable="true"]{user-select:text;-webkit-user-select:text;}
.noscroll{scrollbar-width:none;-ms-overflow-style:none;}
.noscroll::-webkit-scrollbar{display:none;width:0;height:0;}

/* ── Table (felt) ──
   Landscape im Kartenmodus (body.nav-rail): der Filz ist ein INHALTSBREITES Panel
   (Schiene + Spacer + Karte + Spacer), höhen-getrieben, in beiden Achsen zentriert;
   außen bleibt der dunkle Tisch (body) als Rahmen sichtbar. Welcome/Vollformat
   (ohne .nav-rail) behält die volle Fläche; Portrait überschreibt unten (gestapelt). */
.app{position:relative;height:100vh;height:100dvh;overflow:hidden;}
/* Welcome/Vollformat (ohne .nav-rail): Filz füllt die ganze Fläche. */
.table{
  display:flex;align-items:stretch;height:100%;width:100%;position:relative;   /* Bezug für den Hamburger oben rechts IN der Bühne */
  background:radial-gradient(ellipse at 50% 32%, var(--felt-mid), var(--felt-edge) 78%);
}
/* Kartenmodus, Landscape: die Bühne hat eine feste Design-Größe und wird als EIN
   Block FORMTREU skaliert (--s) und zentriert; außen bleibt der dunkle Tisch als
   Rahmen. Portrait setzt das unten zurück (position:static, kein transform). */
body.nav-rail .table{
  position:absolute;top:50%;left:50%;width:calc(var(--stage-h) * 16 / 9);height:var(--stage-h);
  transform:translate(-50%,-50%) scale(var(--s));transform-origin:center center;
  border-radius:16px;overflow:hidden;box-shadow:0 12px 50px rgba(0,0,0,.55);
}

/* ── Schiene links (Steuerpanel): Logo · Wippe · Modi · Wortliste · Beutel ── */
.rail{
  width:var(--rail-w);flex-shrink:0;display:none;flex-direction:column;
  background:linear-gradient(#5a4836,#473628);   /* dunkles Panel — heller als der Filz, deutlich dunkler als zuvor */
  border-right:1px solid rgba(0,0,0,.3);
  box-shadow:6px 0 24px rgba(0,0,0,.35);z-index:5;overflow:hidden;border-radius:0 16px 16px 0;
}
body.nav-rail .rail{display:flex;}   /* Rail erscheint, sobald ein Modus aktiv ist (statt Inline-Style) */
.rail-head{padding:1rem 1.2rem .4rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;position:relative;}
.logo{font-family:'Fraunces',serif;font-size:.92rem;font-weight:600;letter-spacing:.005em;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:#f0e6d2;}
/* Hamburger (rechts in der Kopfleiste) + Einstellungs-Panel (Schriftgröße + Sprachstil) */
.rail-menu{flex:0 0 auto;font-size:1.05rem;line-height:1;cursor:pointer;border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);border-radius:7px;padding:.18rem .42rem;transition:all .15s;}
.rail-menu:hover{border-color:var(--ink-soft);color:var(--ink);}
.rail-menu[aria-expanded="true"]{background:var(--gold);border-color:var(--gold);color:var(--paper-deep);}
/* Hamburger oben rechts IN der Spielfläche (Bühne .table) — auf allen Seiten/Modi sichtbar, skaliert
   im Landscape mit der Bühne mit (über Kugel/Karte, z-index > Wolken-Wörter ~500); beim offenen
   Pergament-Overlay ausgeblendet. */
.hamburger-corner{position:absolute;top:calc(.45rem + env(safe-area-inset-top));right:calc(.55rem + env(safe-area-inset-right));z-index:600;}
body:has(.scroll-overlay.open) .hamburger-corner{display:none;}
.menu-panel{position:absolute;top:100%;right:0;z-index:50;margin-top:.35rem;display:flex;flex-direction:column;gap:.7rem;padding:.75rem .85rem;background:#43331f;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.45);}
.menu-panel[hidden]{display:none;}
.menu-row{display:flex;flex-direction:column;gap:.35rem;}
.menu-row-label{font-family:'Fraunces',serif;font-size:.7rem;color:var(--ink-faint);}
.menu-panel .fontctl,.menu-panel .stilctl{padding:0;justify-content:flex-start;}
/* Nutzer-Schriftgröße A−/A/A+ (skaliert nur --uf, nicht das Layout) */
.fontctl{display:flex;gap:.3rem;flex:0 0 auto;justify-content:center;padding:.6rem 1rem .4rem;}
.fontctl button{
  font-family:'Fraunces',serif;font-weight:600;line-height:1;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);
  border-radius:7px;padding:.18rem .4rem;transition:all .15s;
}
.fontctl button[data-uf="down"]{font-size:.72rem;}
.fontctl button[data-uf="reset"]{font-size:.86rem;}
.fontctl button[data-uf="up"]{font-size:1.0rem;}
.fontctl button:hover{border-color:var(--ink-soft);color:var(--ink);}
.fontctl button:active{transform:translateY(1px);}
/* Sprachstil-Schalter (Doppelstil): kleines Label + zwei Knöpfe; der aktive trägt .on (Gold). */
.stilctl{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;justify-content:center;flex-wrap:wrap;padding:.1rem 1rem .5rem;}
.stilctl-label{font-family:'Fraunces',serif;font-size:.72rem;color:var(--ink-faint);margin-right:.15rem;}
.stilctl button{
  font-family:'Fraunces',serif;font-weight:600;font-size:.74rem;line-height:1;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);
  border-radius:7px;padding:.18rem .5rem;transition:all .15s;
}
.stilctl button:hover{border-color:var(--ink-soft);color:var(--ink);}
.stilctl button:active{transform:translateY(1px);}
.stilctl button.on{background:var(--gold);border-color:var(--gold);color:var(--paper-deep);}
/* Allgemeine Nav-Links im Hamburger-Menü (Eingang/Anleitung) — links bündig, volle Breite */
.menu-nav{display:flex;flex-direction:column;gap:.35rem;padding:0;}
.menu-nav button{font-family:'Fraunces',serif;font-size:.8rem;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);
  border-radius:7px;padding:.4rem .6rem;transition:all .15s;}
.menu-nav button:hover{border-color:var(--ink-soft);color:var(--ink);}
.rail-modes{display:flex;flex-direction:column;gap:.4rem;padding:.5rem 1rem 1rem;}
/* Auswahlmöglichkeiten wie die Buttons der rechten Seite (.ctrl-btn): erhabene
   Papier-Knöpfe; der aktive Modus golden (analog .ctrl-btn.primary). */
.rail-mode{
  font-family:'Fraunces',serif;font-size:.92rem;text-align:center;
  padding:.55rem .9rem;border:1px solid rgba(216,201,173,.4);
  background:linear-gradient(var(--paper-card),var(--paper));
  color:var(--ink);border-radius:var(--radius);cursor:pointer;transition:all .15s;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.rail-mode:hover:not(.active){transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4);}
.rail-mode.active{background:linear-gradient(var(--gold-soft),var(--gold));color:#2b2012;border-color:var(--gold);font-weight:600;}
/* Nr.2 Grundmodus-Zeile → zurück zur Stöbern-Landung (kein Aufklappmenü) */
.rail-grund{display:block;width:calc(100% - 2rem);margin:.4rem 1rem .2rem;text-align:center;
  font-family:'Fraunces',serif;font-size:.84rem;color:var(--ink);
  background:linear-gradient(var(--paper-card),var(--paper));border:1px solid rgba(216,201,173,.4);
  border-radius:var(--radius);padding:.45rem .8rem;cursor:pointer;transition:all .15s;box-shadow:0 3px 10px rgba(0,0,0,.3);}
.rail-grund:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4);}
/* Nr.3 aktive Modus-Zeile + Spezial-Hilfe */
.rail-active{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem 1.1rem .8rem;}
.ra-name{font-family:'Fraunces',serif;font-size:1.08rem;font-weight:600;color:#f4e9d3;}
.ra-help{flex:0 0 auto;font-family:'Inter',sans-serif;font-size:.74rem;color:#e6c878;background:none;
  border:1px solid var(--gold-soft);border-radius:99px;padding:.18rem .6rem;cursor:pointer;transition:all .15s;}
.ra-help:hover{background:rgba(217,184,106,.16);color:#fff;}
/* Nr.3 (Wort-/Feld-Modus): Suchfeld + Zufallswort in der Rail */
.rail-ctl{display:flex;flex-direction:column;gap:.45rem;padding:.4rem 1rem .3rem;}
.rail-search{background:var(--paper-card);border:1px solid var(--line);border-radius:99px;padding:.45rem .9rem;font:inherit;font-size:.9rem;color:var(--ink);text-align:center;}
.rail-search::placeholder{color:var(--ink-faint);}
.rail-zufall{font-family:'Fraunces',serif;font-size:.85rem;color:#2b2012;background:linear-gradient(var(--gold-soft),var(--gold));border:1px solid var(--gold);border-radius:99px;padding:.45rem;cursor:pointer;transition:filter .15s;font-weight:600;}
.rail-zufall:hover{filter:brightness(1.06);}
/* Wolken-Wähler in der Restfläche (Rail bleibt sichtbar, Spacer/Buttonspalte aus) */
body.word-pick .felt{flex:1;padding:1rem 0;}
body.word-pick .felt-spacer,body.word-pick .actions{display:none;}
body.word-pick .felt-center{flex:1;width:100%;height:100%;min-height:0;}
.word-picker{display:flex;flex-direction:column;width:100%;height:100%;}
.wp-head{flex:0 0 auto;text-align:center;font-family:'Fraunces',serif;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);color:#f4e9d3;padding:.5rem;}
.wp-sphere{position:relative;flex:1;min-height:0;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none;}
.wp-cap{flex:0 0 auto;text-align:center;color:#c4a978;font-style:italic;font-size:.85rem;min-height:1.2em;padding-bottom:.4rem;}
/* Start (zum Eingangstor) · Hilfe (Anleitung) — ersetzt die Wippe */
.rail-nav{display:flex;gap:.4rem;margin:.5rem 1rem .1rem;}
.rail-nav-btn{flex:1;font-family:'Fraunces',serif;font-size:.85rem;color:var(--ink-soft);background:var(--paper-card);border:1px solid var(--line);border-radius:99px;padding:.45rem .5rem;cursor:pointer;transition:all .15s;}
.rail-nav-btn:hover{background:var(--paper-deep);color:var(--ink);border-color:var(--ink-soft);}
/* Wippe Spielen/Stöbern (entfällt; Stile bleiben ungenutzt) */
.rail-wippe{position:relative;display:flex;margin:.5rem 1rem .1rem;background:var(--paper-deep);border:1px solid var(--line);border-radius:99px;padding:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);}
.rail-wippe button{position:relative;z-index:2;flex:1;font-family:'Fraunces',serif;font-size:.9rem;font-weight:600;color:var(--ink-soft);padding:.5rem;border:none;background:none;border-radius:99px;cursor:pointer;transition:color .2s;}
.rail-wippe button.on{color:var(--paper);}
.rail-wippe .rw-knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--ink);border-radius:99px;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .26s cubic-bezier(.34,1.4,.5,1);}
.rail-wippe.browse .rw-knob{transform:translateX(100%);}
.rail-browse-hint{display:none;padding:.5rem 1.1rem 1rem;border-bottom:1px solid var(--line);font-style:italic;font-size:.9rem;line-height:1.5;color:var(--ink-soft);text-align:center;}
.rail.browsing .rail-modes{display:none;}
.rail.browsing .rail-browse-hint{display:block;}
.rail-list{flex:1;overflow-y:auto;}
.rail-list::-webkit-scrollbar{width:6px;}
.rail-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

.sidebar-section{
  font-family:'Fraunces',serif;font-size:.68rem;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.12em;
  padding:.7rem 1.2rem .25rem;
}
.word-list{list-style:none;padding:.1rem 0 .4rem;}
.word-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1.2rem;cursor:pointer;
  border-left:3px solid transparent;transition:all .15s;font-size:.92rem;
}
.word-item:hover{background:var(--paper-card);}
.word-item.active{background:var(--paper-card);border-left-color:var(--gold);}
.word-item .name{font-family:'Fraunces',serif;font-weight:400;}
.word-item .pips{display:flex;gap:3px;margin-left:auto;flex-shrink:0;}
.pip{width:6px;height:6px;border-radius:50%;background:var(--line);}
.pip.done{background:var(--gold);}
.pip.current{box-shadow:0 0 0 2px var(--gold-soft);}
/* Klickbare Pips (Fortschrittsleiste der Karte/Tafeln): Erledigtes erneut ansehen.
   Etwas größer als die rein dekorativen Punkte, mit Hover-Vergrößerung. */
.progress button.pip{width:11px;height:11px;border:none;padding:0;cursor:pointer;transition:transform .12s;}
.progress button.pip:hover:not(:disabled){transform:scale(1.4);}
.pip.locked{opacity:.35;cursor:not-allowed;}            /* offen+blockiert → kein Spoiler-Öffnen */
.pip-hint{font-size:.78rem;color:var(--ink-faint);font-style:italic;margin:.3rem 0 0;}
.reset-link{background:none;border:none;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit;padding:0;}
.reset-link:hover{color:var(--ink);}

/* ── Beutel ── */
/* Nr.5 — unten fixierter Fuß: Schriftregler + Beutel (die Leerfläche davor ist flex:1) */
.rail-foot{margin-top:auto;flex:0 0 auto;border-top:1px solid rgba(245,237,223,.14);}
.beutel{padding:.5rem 1.1rem .9rem;background:transparent;}
.beutel-title{
  font-family:'Fraunces',serif;font-size:.68rem;color:#bba684;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem;
}
.beutel-items{display:flex;flex-wrap:wrap;gap:.3rem;}
.beutel-item{font-size:.78rem;padding:.1rem .55rem;background:rgba(217,184,106,.22);color:#f0e6d2;border-radius:99px;}
.beutel-empty{font-size:.78rem;color:#9a8a70;font-style:italic;}
.beutel-btn{
  display:block;width:100%;margin-top:.6rem;padding:.45rem;
  font-family:'Fraunces',serif;font-size:.8rem;
  border:1px solid var(--gold-soft);background:transparent;
  color:#e6c878;border-radius:var(--radius);cursor:pointer;transition:all .15s;
}
.beutel-btn:hover{background:rgba(217,184,106,.16);}

/* ── Felt center ── */
/* Landscape/Desktop (>960px): die Karte zentriert im Raum RECHTS der Schiene; die
   schmale, vertikale Nav-Spalte liegt ABSOLUT nahezu rechtsbündig am rechten Rand
   (stiehlt der Karte keine Höhe und verschiebt sie nicht). Die Breiten-Deckelung der
   Karte (s. .flipcard) hält 2×--nav-col Abstand frei → kein Überlapp.
   Hochformat/iPhone überschreibt das unten wieder zur gestapelten Spalte. */
/* Drei Spalten: linker Spacer (Balance) · Karte · rechte Aktions-Spalte — beide
   Flanken --nav-col breit, die Karte mittig dazwischen. So ist der Filz nur so
   breit wie der Inhalt (kein Überlapp, kein Leerraum bis zum Fensterrand). */
.felt{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:0;padding:1.5rem 0;position:relative;min-width:0;
}
.felt-center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;min-width:0;}
.felt-spacer{display:block;width:var(--flank);flex:0 0 auto;}
/* Welcome/Splash (ohne Rail): volle Fläche, feltCenter füllt sie definit aus
   (sonst kollabiert die Kugel mangels definierter Höhe). */
body:not(.nav-rail) .felt{flex:1;align-items:stretch;justify-content:stretch;overflow:hidden;}
body:not(.nav-rail) .felt-center{flex:1;width:100%;height:100%;min-height:0;}
body:not(.nav-rail) .felt-spacer{display:none;}

/* ── Flip Card: die antippbare Spielkarte mit 3D-Dreh-Auflösung ──
   Der Dreh entsteht aus drei Zutaten: perspective (Tiefenwirkung) +
   transform-style:preserve-3d (Kinder leben im 3D-Raum) + backface-visibility
   :hidden (die abgewandte Seite ist unsichtbar). .flipped dreht die Innenkarte
   um 180°; Vorder- und Rückseite liegen deckungsgleich (inset:0), die Rückseite
   ist um 180° vor-rotiert, sodass sie nach dem Dreh lesbar erscheint. */
.flipcard{
  /* Einheitliches Format (--card-ar), größtmöglich eingepasst: Höhe vom Schirm
     begrenzt, sonst von der verfügbaren Breite (Viewport minus Rail) abgeleitet. */
  aspect-ratio:var(--card-ar);
  /* Höhe vom Schirm gedeckelt; Breiten-Schranke lässt Platz für Schiene + beide Flanken
     (linker Spacer + rechte Nav-Spalte = 2×--nav-col) + Polster/Abstände. */
  height:var(--card-h);
  width:auto;flex-shrink:0;perspective:1900px;
}
.flipcard-inner{
  position:relative;width:100%;height:100%;
  transition:transform .85s cubic-bezier(.2,.75,.25,1);
  transform-style:preserve-3d;
}
.flipcard.flipped .flipcard-inner{transform:rotateY(180deg);}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;border-radius:16px;
  padding:1.5rem 1.6rem 1.2rem;
  background:
    radial-gradient(120% 80% at 50% 0%, #fffaf2, var(--paper-card) 60%);
  box-shadow:0 20px 45px rgba(0,0,0,.5),inset 0 0 0 1px rgba(176,130,24,.18),inset 0 0 0 6px rgba(255,255,255,.5);
}
.face-back{
  transform:rotateY(180deg);
  background:radial-gradient(120% 90% at 50% 100%, #fffaf2, var(--paper-card) 62%);
}
/* Eigene Compositing-Schicht auch für die Vorderseite: ein ECHTER Rotations-Transform
   (visuell identisch zu 0°, aber non-identity → iOS legt eine Schicht an wie bei der
   Rückseite mit rotateY(180)). translateZ(0) reicht iOS nicht (wird wegoptimiert).
   Ohne diese verschluckt iOS das Overflow-Scrollen der Vorderseite im 3D-Kontext. */
.face-front{transform:translateZ(0.6px);}
.face-front.tappable{cursor:pointer;}
/* iOS-Scroll-Fix, Endstufe: Im RUHEZUSTAND (.settled, von der JS nach jedem Flip-Ende
   gesetzt) wird die 3D-Bühne KOMPLETT stillgelegt — keine Transforms, kein preserve-3d,
   die abgewandte Seite per display:none. Die sichtbare Seite ist dann gewöhnliches DOM,
   dessen Overflow-Scroll iOS zuverlässig annimmt (die Schicht-Tricks oben reichten auf
   der Vorderseite nicht). Während der Drehung fehlt .settled → volle 3D-Animation. */
.flipcard.settled .flipcard-inner{transform:none;transition:none;transform-style:flat;}
.flipcard.settled .face{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;}
.flipcard.settled:not(.flipped) .face-back{display:none;}
.flipcard.settled.flipped .face-front{display:none;}
.card-head{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
.suit{
  font-size:1.05rem;width:30px;height:30px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
}
.suit.choice{color:var(--choice);background:rgba(161,74,40,.12);}
.suit.subjective{color:var(--subjective);background:rgba(106,80,121,.12);}
.suit.conversation{color:var(--conversation);background:rgba(74,107,92,.12);}
.card-type-label{
  font-family:'Fraunces',serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-soft);
}
/* „schon gelöst" — Kennzeichnung der Wiederholung (Lernspiel; Karte bleibt in Rotation) */
.card-repeat{margin-left:auto;flex-shrink:0;font-size:.68rem;font-style:italic;color:var(--gold);
  background:rgba(176,130,24,.12);border-radius:99px;padding:.12rem .55rem;}
.card-title{flex-shrink:0;margin:.7rem 0 .4rem;}
.card-word{font-family:'Fraunces',serif;font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);font-weight:700;line-height:1.1;}
.card-meta{color:var(--ink-soft);font-size:.9rem;font-style:italic;margin-top:.1rem;}
/* Meta-Text der Aufgaben-Karte erst NACH dem Lösen einblenden (kein Spoiler/Ballast
   im Spiel; an .solved gekoppelt → resettet automatisch mit dem Fortschritt). */
.flipcard .card-meta{display:none;}
.flipcard.solved .card-meta{display:block;}
.card-scroll{flex:1;overflow-y:auto;min-height:0;padding-right:.2rem;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  transform:translateZ(0);}   /* eigene Schicht: behebt iOS-Scrollbug im 3D-Flip-Kontext (Vorderseite) */
.shoot-context{
  font-size:.76rem;color:var(--ink-faint);margin-bottom:.5rem;
  padding-bottom:.4rem;border-bottom:1px dashed var(--line);
}
.shoot-context strong{color:var(--ink-soft);}
.card-q{font-size:clamp(1.08rem,.95rem + .5vw,1.3rem);line-height:1.6;margin-bottom:.4rem;}
.card-sub{color:var(--ink-soft);font-size:.95rem;font-style:italic;margin-bottom:1rem;}

/* ── Antwort-Optionen (choice: correct/wrong · subjektiv: chosen) ── */
.opts{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;}
.opt{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.6rem .85rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:1rem;
  cursor:pointer;text-align:left;line-height:1.5;transition:all .15s;
  touch-action:pan-y;   /* vertikaler Swipe auf einer Option scrollt den Karteninhalt, statt zu blockieren */
}
.opt:hover:not(:disabled){border-color:var(--ink-soft);background:var(--paper-deep);}
.opt:disabled{cursor:default;opacity:.9;}
.opt .marker{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--ink-soft);
  font-size:.7rem;font-weight:600;flex-shrink:0;margin-top:1px;
}
.opt.correct{border-color:var(--correct);background:rgba(42,110,63,.1);}
.opt.correct .marker{background:var(--correct);color:#fff;}
.opt.wrong{border-color:var(--wrong);background:rgba(161,74,40,.1);}
.opt.wrong .marker{background:var(--wrong);color:#fff;}
.opt.chosen{border-color:var(--gold);background:rgba(176,130,24,.1);}
.opt.chosen .marker{background:var(--gold);color:#fff;}

.think-hint{
  margin-top:.6rem;padding:.7rem 1rem;text-align:center;
  border:1px dashed var(--conversation);border-radius:var(--radius);
  color:var(--conversation);font-style:italic;font-size:.92rem;
  background:rgba(74,107,92,.05);
}

/* ── Zuordnungs-Aufgabe (Sortieren, Spur B): Einträge → Körbe ── */
.sort{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem;}
/* Legende: die Körbe einmal mit ihrer Nummer (statt in jeder Zeile zu wiederholen),
   horizontal umbrechend → spart Höhe bei 4 Körben */
.sort-legend{display:flex;flex-flow:row wrap;column-gap:.9rem;row-gap:.25rem;padding:.45rem .6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);}
.sort-legend-item{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--ink-soft);}
.sort-num{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;flex-shrink:0;border-radius:99px;background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:600;}
/* Zeilen: Eintrag links, kompakte Zahl-Buttons rechts — passt in eine Zeile */
.sort-rows{display:flex;flex-direction:column;gap:.3rem;}
.sort-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.35rem .55rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);}
.sort-item{flex:1;min-width:0;font-family:'Fraunces',serif;font-weight:600;font-size:.92rem;}
.sort-picks{display:flex;gap:.3rem;flex-shrink:0;}
.sbucket{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;flex-shrink:0;font-size:.9rem;border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);border-radius:99px;cursor:pointer;transition:all .12s;touch-action:pan-y;}
.sbucket:hover:not(:disabled){border-color:var(--ink-soft);}
.sbucket.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.sbucket.sright{background:rgba(42,110,63,.15);border-color:var(--correct);color:var(--correct);}
.sbucket.swrong{background:rgba(161,74,40,.12);border-color:var(--wrong);color:var(--wrong);}
.sbucket:disabled{cursor:default;}
.sort-check{margin:0;}

/* ── Card foot ── */
.card-foot{flex-shrink:0;padding-top:.7rem;margin-top:.5rem;border-top:1px solid var(--line);min-height:1.4rem;}
.foot-hint{font-size:.78rem;color:var(--ink-faint);font-style:italic;text-align:center;}
.progress{display:flex;align-items:center;gap:4px;justify-content:center;}
.progress .ptext{font-size:.72rem;color:var(--ink-faint);margin-left:.5rem;}

/* ── Back face content ── */
.back-scroll{flex:1;overflow-y:auto;min-height:0;padding-right:.2rem;margin-top:.4rem;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;}
.verdict{font-family:'Fraunces',serif;font-weight:600;font-size:1rem;margin-bottom:.6rem;line-height:1.5;}
.verdict.hit{color:var(--correct);}
.verdict.miss{color:var(--wrong);}
.verdict.neutral{color:var(--subjective);font-weight:400;font-style:italic;}
.correct-line{font-family:'Fraunces',serif;font-size:1rem;color:var(--correct);margin-bottom:.6rem;line-height:1.5;}
.correct-line strong{color:var(--correct);font-weight:600;}
.praise{font-family:'Fraunces',serif;font-weight:600;font-size:1rem;color:var(--correct);margin-bottom:.6rem;line-height:1.5;}
.reveal-text{color:var(--ink-soft);font-size:.95rem;line-height:1.75;white-space:pre-line;}
.done-note{color:var(--gold);font-size:.8rem;margin-bottom:.5rem;}

/* ── Actions (neben der Karte) ── */
/* Landscape/Desktop: schmale, VERTIKALE Knopf-Spalte, ABSOLUT nahezu rechtsbündig am
   rechten Rand des Felts (--nav-col breit). Im Hochformat/iPhone (Media Query unten)
   wird daraus wieder eine statische, zentrierte Reihe UNTER der Karte. */
.actions{
  position:static;transform:none;flex:0 0 auto;align-self:center;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:.55rem;width:var(--rail-w);margin-left:var(--flank);padding:0 .9rem 0 0;
}
/* Kartenmodus: leere Aktions-Spalte bleibt --nav-col breit (balanciert die Karte
   gegen den linken Spacer). Nur im Welcome/Vollformat wird sie ausgeblendet. */
body:not(.nav-rail) .actions:empty{display:none;}

/* ── Wortwolke / Sternenwirbel — VOLLFORMAT: volle Canvas-Breite, Schiene AUS,
   schwebende Mini-Leiste. Muss NACH »body.nav-rail .table« stehen (überschreibt). */
body.mode-wolke .rail{display:none;}
body.mode-wolke .table{position:static;transform:none;width:100%;height:100%;border-radius:0;box-shadow:none;}
body.mode-wolke .felt{flex:1;padding:0;}
body.mode-wolke .felt-spacer,body.mode-wolke .actions{display:none;}
body.mode-wolke .felt-center{flex:1;width:100%;height:100%;}
.wolke-wrap{display:flex;flex-direction:column;width:100%;height:100%;}
.wolke-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;padding:.7rem 1rem .4rem;}
.wolke-btn{font-family:'Fraunces',serif;font-size:.85rem;color:#e8dcc4;background:rgba(245,237,223,.06);border:1px solid rgba(217,184,106,.4);border-radius:99px;padding:.4rem .9rem;cursor:pointer;transition:all .15s;}
.wolke-btn:hover{background:rgba(217,184,106,.18);border-color:var(--gold-soft);color:#fff;}
.wolke-btn.on{background:rgba(217,184,106,.28);border-color:var(--gold,#e6c878);color:#fff;}
.wolke-search-input{background:var(--paper-card);border:1px solid var(--line);border-radius:99px;padding:.4rem 1rem;font:inherit;font-size:.9rem;color:var(--ink);width:min(280px,46vw);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.wolke-search-input::placeholder{color:var(--ink-faint);}
.wolke-sphere{position:relative;flex:1;min-height:0;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none;}
/* Lupe: das aufgezogene Auswahlrechteck über dem Sternenwirbel */
.wolke-sel{position:absolute;border:1.5px dashed var(--gold,#e6c878);background:rgba(230,200,120,.10);box-shadow:0 0 0 100vmax rgba(8,10,14,.28);pointer-events:none;z-index:9999;border-radius:3px;}
/* Kugel-/Wirbel-Wörter (Wolke + Splash): Position/Transform setzt die JS inline */
.cloud-word{transition:color .15s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.wp-sphere,.wolke-sphere,.splash-sphere{-webkit-touch-callout:none;}   /* iOS: kein Long-Tap-Kopier-Callout auf der Kugel */
.cloud-word:hover{color:#ffe49c !important;}
/* Beim Ziehen die Wörter durchlässig schalten → keine Hover-/mouseenter-Ereignisse
   mehr (sonst flackert die Kugel, während die Maus über die Wörter fährt). */
.cloud-drag .cloud-word{pointer-events:none;}
.wolke-cap{flex:0 0 auto;text-align:center;color:#c4a978;font-style:italic;font-size:.85rem;min-height:1.2em;padding-bottom:.4rem;}
.actions .ahead{display:none;}
.ctrl-btn{
  padding:.7rem 1.15rem;font-family:'Fraunces',serif;font-size:.92rem;text-align:center;
  border:1px solid rgba(216,201,173,.4);
  background:linear-gradient(var(--paper-card),var(--paper));
  color:var(--ink);border-radius:var(--radius);cursor:pointer;
  transition:all .15s;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.ctrl-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4);}
.ctrl-btn:disabled{opacity:.55;cursor:default;}
.ctrl-btn.primary{background:linear-gradient(var(--gold-soft),var(--gold));color:#2b2012;border-color:var(--gold);font-weight:600;}

/* ── Welcome ── */
.welcome{
  max-width:600px;text-align:center;padding:2.5rem 2.2rem;
  background:radial-gradient(120% 90% at 50% 0%, #fffaf2, var(--paper-card) 65%);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(176,130,24,.18);
}
.welcome .deco{color:var(--gold);font-size:1.8rem;margin-bottom:1rem;}
/* „WortWeltWanderungen" ist EIN langes Wort → Obergrenze so, dass es in die Karte passt;
   overflow-wrap als Sicherheitsnetz, damit es selbst auf schmalen Schirmen nie überläuft. */
.welcome h1{font-size:clamp(1.7rem, 1.1rem + 1.5vw, 2.2rem);font-weight:600;margin-bottom:.5rem;line-height:1.15;overflow-wrap:break-word;}
.welcome .intro{color:var(--ink-soft);font-size:clamp(1.02rem,.9rem + .5vw,1.2rem);line-height:1.7;margin-bottom:1.8rem;}
.welcome-modes{display:flex;flex-direction:column;gap:.7rem;text-align:left;}
.welcome-mode{
  display:block;padding:1rem 1.3rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;transition:all .2s;text-align:left;width:100%;
}
.welcome-mode:hover{border-color:var(--gold);box-shadow:0 3px 10px var(--shadow);transform:translateY(-1px);}
.welcome-mode .wm-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;margin-bottom:.2rem;}
.welcome-mode .wm-desc{color:var(--ink-soft);font-size:.95rem;line-height:1.55;}
.welcome-mode .wm-fort{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--ink-faint);margin-top:.4rem;letter-spacing:.02em;}
.welcome .resume{margin-top:1.4rem;font-size:.84rem;color:var(--gold);}

/* ── Splash-Startseite: dunkler Filz, Titel + kuratierte Dreh-Kugel + Modus-Chips ── */
.welcome.splash{background:none;box-shadow:none;border-radius:0;max-width:none;width:100%;height:100%;padding:clamp(.8rem,2.2vh,1.8rem) 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;}
.welcome.splash h1{color:#f4e9d3;margin:0;font-size:clamp(1.8rem, 1rem + 2vw, 2.7rem);}
.splash-head{flex:0 0 auto;}
.splash-tag{color:#bba684;font-style:italic;margin:.3rem 0 0;font-size:clamp(.85rem, .7rem + .4vw, 1.05rem);}
.splash-sphere{position:relative;flex:1;width:100%;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none;}
.splash-cap{flex:0 0 auto;color:#c4a978;font-style:italic;font-size:.85rem;min-height:1.2em;}
.splash-modes{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:760px;}
.splash-mode{font-family:'Fraunces',serif;font-size:.86rem;color:#e8dcc4;background:rgba(245,237,223,.06);border:1px solid rgba(217,184,106,.4);border-radius:99px;padding:.4rem .9rem;cursor:pointer;transition:all .15s;}
.splash-mode:hover{background:rgba(217,184,106,.18);border-color:var(--gold-soft);color:#fff;}
.splash-foot{flex:0 0 auto;margin:.1rem 0 0;font-size:.84rem;color:var(--gold-soft);}
.splash-foot .reset-link{color:var(--gold-soft);}
/* ── Eingangstor: die zwei Grund-Modi als große Türen ── */
.gateway{justify-content:center;gap:1.4rem;}
.gate-doors{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:840px;}
.gate-door{flex:1 1 300px;max-width:400px;display:flex;flex-direction:column;gap:.55rem;text-align:left;background:rgba(245,237,223,.05);border:1px solid rgba(217,184,106,.4);border-radius:16px;padding:1.4rem 1.5rem;cursor:pointer;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;}
.gate-door:hover{background:rgba(217,184,106,.14);border-color:var(--gold-soft);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4);}
.gate-title{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;color:#f4e9d3;}
.gate-sub{font-size:.92rem;line-height:1.5;color:#bba684;}
.gate-door em{color:#c4a978;}
.sf-note{max-width:520px;text-align:center;color:#cabb96;line-height:1.6;}
.sf-note strong{color:#f4e9d3;font-weight:600;}
.sf-soon{color:var(--gold-soft);font-style:italic;margin-top:1.2rem;}

/* ── Panel (done / blocked / empty states) ── */
.panel{
  width:min(440px,88vw);text-align:center;padding:2.2rem 2rem;
  background:radial-gradient(120% 90% at 50% 0%, #fffaf2, var(--paper-card) 65%);
  border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(176,130,24,.18);
}
.panel .card-word{margin-bottom:.1rem;}
.panel p{margin:1.1rem 0;color:var(--ink-soft);}
.panel-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;}

/* ── Sternenfeld (Wortfeld) ──
   Die POSITIONEN der Triebe/Türen rechnet die JS per Trigonometrie
   (renderStar/renderConceptView); CSS gestaltet nur Nabe (.star-hub), Triebe
   (.star-shoot) und die SVG-Strahlen. .dense (>6 Elemente) → kompaktere
   Triebe + größerer Radius, damit nichts überlappt. */
.board{
  position:relative;
  background:radial-gradient(circle at 50% 45%, #fffaf2, var(--parch-deep) 80%);
  border-radius:20px;padding:1.6rem;
  box-shadow:0 22px 55px rgba(0,0,0,.5),inset 0 0 0 1px rgba(176,130,24,.25);
}
.star-container{position:relative;width:min(460px,80vw);aspect-ratio:1;}
.star-container.dense{width:min(580px,86vw);}
.star-container.dense .star-shoot{max-width:118px;min-width:72px;padding:.4rem .55rem;}
.star-container.dense .shoot-word{font-size:.82rem;}
.star-container.dense .shoot-angle{font-size:.6rem;margin-top:.05rem;}
.star-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.star-svg line{stroke:var(--gold-soft);stroke-width:.5;opacity:.6;}
.star-svg circle{fill:var(--gold-soft);opacity:.4;}
.star-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:3;}
.hub-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .15s;padding:.4rem .8rem;}
.hub-btn:hover{transform:translate(-50%,-50%) scale(1.06);}
.dande-hub.hub-btn:hover{transform:translate(-50%,-50%) scale(1.06);}
.hub-hint{font-family:'Fraunces',serif;font-size:.66rem;letter-spacing:.08em;color:var(--gold);opacity:0;margin-top:.3rem;transition:opacity .15s;text-transform:uppercase;}
.hub-btn:hover .hub-hint{opacity:1;}
.star-hub-word{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;display:block;color:var(--ink);}
.star-hub-label{font-size:.78rem;color:var(--ink-soft);font-style:italic;display:block;}
.star-shoot{
  position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;
  padding:.55rem .8rem;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:all .2s;z-index:1;max-width:150px;min-width:88px;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.star-shoot:hover{border-color:var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(1.06);}
.star-shoot.explored{border-color:var(--correct);}
.star-shoot.explored::after{content:'✓';position:absolute;top:-.35rem;right:-.35rem;background:var(--correct);color:#fff;width:16px;height:16px;border-radius:50%;font-size:.6rem;display:flex;align-items:center;justify-content:center;}
.shoot-word{font-family:'Fraunces',serif;font-weight:600;font-size:.9rem;display:block;}
.shoot-angle{font-size:.68rem;color:var(--ink-soft);font-style:italic;display:block;margin-top:.1rem;}
.shoot-jump{font-size:.63rem;color:var(--gold);display:block;margin-top:.2rem;}

/* ── Graph: Türen, Breadcrumb, Konzept-Knoten (Phase B) ── */
.star-shoot.door{border-style:dashed;border-color:var(--gold-soft);background:linear-gradient(180deg,#fffdf8,#f6eede);}
.star-shoot.door:hover{border-style:solid;border-color:var(--gold);}
.door-ic{display:block;font-size:1.05rem;color:var(--gold);line-height:1;margin-bottom:.1rem;}
.door-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem;}
.door-chip{display:inline-flex;align-items:center;gap:.35rem;background:#fffdf8;border:1px dashed var(--gold-soft);border-radius:999px;padding:.4rem .8rem;cursor:pointer;font-family:'Fraunces',serif;font-size:.85rem;color:var(--ink);transition:all .15s;}
.door-chip:hover{border-style:solid;border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.15);}
.door-chip .door-ic{display:inline;margin:0;font-size:.95rem;}
.door-btn{border-style:dashed !important;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem;justify-content:center;margin-bottom:.7rem;}
.crumb{background:none;border:none;cursor:pointer;color:var(--gold);font-family:'Fraunces',serif;font-size:.82rem;padding:.15rem .35rem;border-radius:6px;display:inline-flex;align-items:center;gap:.25rem;transition:background .12s;}
.crumb:hover:not(.current){background:rgba(180,140,40,.12);}
.crumb.current{color:var(--ink);font-weight:600;cursor:default;}
.crumb-ic{font-size:.58rem;opacity:.7;}
.crumb-sep{color:var(--ink-faint);font-size:.8rem;margin:0 .1rem;}
.concept-hub{background:radial-gradient(circle,#f1ecfb 55%,rgba(241,236,251,0) 78%) !important;}
.concept-kind{display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#7a5cc0;margin-bottom:.2rem;}
.concept-board .star-hub-word{color:#4b3b86;}
.concept-board .star-svg line{stroke:#b9a4e8;}
.concept-intro{max-width:560px;margin:1rem auto 0;text-align:center;font-size:.9rem;line-height:1.55;color:var(--ink-soft);font-style:italic;padding:0 1rem;}
/* Pfad-Geschenk-Siegel unter dem Konzept-Stern */
.pfad-seal{display:flex;align-items:center;gap:.7rem;max-width:420px;margin:1.1rem auto 0;padding:.7rem 1.1rem;
  border-radius:14px;text-align:left;font-family:inherit;cursor:pointer;
  border:1px solid rgba(184,146,72,.55);background:linear-gradient(180deg,rgba(255,247,225,.9),rgba(244,228,190,.85));
  box-shadow:0 0 6px 1px rgba(212,170,80,.25);transition:box-shadow .5s,transform .15s;animation:sealGlow 2.6s ease-in-out infinite;}
.pfad-seal:hover{transform:translateY(-1px);}
.pfad-seal .seal-ic{font-size:1.5rem;line-height:1;}
.pfad-seal .seal-txt{font-size:.86rem;line-height:1.35;color:#6b4d18;}
.pfad-seal .seal-txt b{color:#7a3e12;font-size:.92rem;}
.pfad-seal.locked{cursor:default;animation:none;opacity:.85;
  border-style:dashed;border-color:rgba(120,120,130,.45);background:rgba(120,120,130,.07);box-shadow:none;}
.pfad-seal.locked .seal-txt,.pfad-seal.locked .seal-txt b{color:var(--ink-soft);}
@keyframes sealGlow{0%,100%{box-shadow:0 0 6px 1px rgba(212,170,80,.25);}50%{box-shadow:0 0 16px 3px rgba(212,170,80,.55);}}
@media (prefers-reduced-motion: reduce){.pfad-seal{animation:none;}}
/* Dezente Vorab-Spur ⟿: Aufgabe/Trieb/Pip liegt auf einem verborgenen Pfad */
.pfad-spur{color:#b8923f;opacity:.85;font-size:.82em;margin-left:.28em;vertical-align:.04em;}
.card-pfad{margin-left:.55rem;font-size:.7rem;color:#b8923f;letter-spacing:.03em;white-space:nowrap;}
.pip.station{position:relative;}
.pip.station::after{content:'⟿';position:absolute;left:50%;top:-1em;transform:translateX(-50%);
  font-size:.72rem;line-height:1;color:#b8923f;opacity:.85;pointer-events:none;}

/* ── Pusteblume (Vorsilben-Wolke der Verben) ──
   Das ganze Feld dreht sich langsam (80s/Umdrehung). Damit die Samen-Beschriftung
   trotzdem aufrecht bleibt, dreht sich .dande-seed-inner mit derselben Dauer
   GEGENLÄUFIG (reverse) zurück. .blown (beim Wegpusten eines Samens) pausiert
   beide Animationen, damit das Wegfliegen ruhig wirkt. */
.dandelion{position:relative;width:min(520px,82vw);aspect-ratio:1;}
.dandelion-spin{position:absolute;inset:0;animation:dandeSpin 80s linear infinite;}
.dandelion.blown .dandelion-spin,.dandelion.blown .dande-seed-inner{animation-play-state:paused;}
@keyframes dandeSpin{to{transform:rotate(360deg);}}
.dande-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.dande-svg line{stroke:var(--gold-soft);stroke-width:.3;opacity:.45;}
.dande-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;z-index:4;pointer-events:auto;cursor:pointer;
  background:radial-gradient(circle,#fffaf2 55%,rgba(255,250,242,0) 75%);
  width:170px;height:170px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.dande-hub-word{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:700;color:var(--ink);}
.dande-hub-label{font-size:.72rem;color:var(--ink-soft);font-style:italic;max-width:140px;margin-top:.25rem;}
.dande-seed{position:absolute;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;z-index:2;}
.dande-seed-inner{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  font-family:'Fraunces',serif;font-size:.82rem;color:var(--ink);
  background:radial-gradient(circle at 50% 32%, #ffffff, #efe6d1);
  border:1px solid var(--gold-soft);box-shadow:0 2px 7px rgba(0,0,0,.22);
  animation:dandeSpin 80s linear infinite reverse;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.dande-seed:hover .dande-seed-inner{transform:scale(1.18);box-shadow:0 5px 14px rgba(0,0,0,.32);border-color:var(--gold);}
.dande-seed.done .dande-seed-inner{border-color:var(--correct);color:var(--correct);}
/* Wegfliegender Samen: skaliert auf, steigt nach oben und verblasst (680ms,
   passend zur setTimeout-Dauer in renderDandelion's draw()). */
.dande-seed.flyoff{transition:transform .65s ease-out, opacity .65s;transform:translate(-50%,-50%) scale(2.1) translateY(-70px);opacity:0;}
.dande-blow{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);z-index:6;
  font-family:'Fraunces',serif;font-size:.9rem;padding:.55rem 1.4rem;cursor:pointer;
  background:linear-gradient(var(--gold-soft),var(--gold));color:#2b2012;
  border:none;border-radius:99px;box-shadow:0 5px 14px rgba(0,0,0,.4);transition:transform .15s;
}
.dande-blow:hover{transform:translateX(-50%) translateY(-2px);}
.field-pair{position:absolute;top:.6rem;right:.6rem;z-index:7;font-family:'Fraunces',serif;font-size:.78rem;padding:.35rem .85rem;cursor:pointer;background:rgba(176,130,24,.16);border:1px solid var(--gold-soft);color:var(--gold);border-radius:99px;transition:all .15s;}
.field-pair:hover{background:rgba(176,130,24,.28);transform:translateY(-1px);}

/* ── Parchment Scroll Overlay (essays) ── */
.scroll-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(20,13,6,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.scroll-overlay.open{display:flex;animation:fadeIn .3s ease-out;}
.scroll{
  width:66.666vw;height:86vh;position:relative;
  display:flex;flex-direction:column;
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.6));
  animation:scrollIn .45s cubic-bezier(.2,.8,.3,1);
}
.scroll-cap{
  height:26px;flex-shrink:0;border-radius:13px;position:relative;z-index:2;
  background:linear-gradient(var(--roller-light),var(--roller-dark));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.4);
}
/* Die zwei „Walzenknäufe" an den Enden jeder Roller-Stange (links/rechts). */
.scroll-cap::before,.scroll-cap::after{
  content:'';position:absolute;top:50%;transform:translateY(-50%);
  width:13px;height:36px;border-radius:7px;
  background:linear-gradient(var(--roller-light),var(--roller-dark));
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.scroll-cap::before{left:-7px;} .scroll-cap::after{right:-7px;}
.scroll-cap.top{margin-bottom:-7px;}
.scroll-cap.bottom{margin-top:-7px;}
.scroll-body{
  flex:1;overflow-y:auto;min-height:0;
  padding:2.6rem 3.2rem;
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(255,250,235,.7), transparent 60%),
    linear-gradient(var(--parch),var(--parch-deep));
  box-shadow:inset 0 0 70px rgba(120,85,30,.28),inset 0 0 0 1px rgba(120,85,30,.15);
}
.scroll-x{
  position:absolute;top:34px;right:-14px;z-index:5;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:linear-gradient(var(--roller-light),var(--roller-dark));
  color:var(--parch);border:none;font-size:1.3rem;line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.45);transition:transform .15s;
}
.scroll-x:hover{transform:scale(1.1);}

/* ── Parchment essay typography ── */
.parchment-essay{font-family:'Spectral',serif;color:var(--parch-ink);max-width:62ch;margin:0 auto;}
.p-eyebrow{
  font-family:'Fraunces',serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:#8a6a30;text-align:center;margin-bottom:.2rem;
}
.p-title{font-family:'Fraunces',serif;font-weight:700;font-size:2.1rem;text-align:center;margin:.2rem 0 .4rem;}
.p-rule{width:48px;height:2px;background:#b89248;margin:.9rem auto 1.6rem;opacity:.6;}
.parchment-essay p{margin-bottom:1rem;line-height:1.85;font-size:1.08rem;text-align:justify;hyphens:auto;}
.parchment-essay .lead p:first-of-type::first-letter{
  font-family:'Fraunces',serif;font-size:3.3rem;float:left;line-height:.78;
  padding:.1rem .45rem 0 0;color:#9a6a1a;
}
.p-book-cover{text-align:center;margin-bottom:2.4rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(120,85,30,.3);}
.p-book-cover .deco{color:#b89248;font-size:1.2rem;letter-spacing:.5em;margin-bottom:.7rem;}
.p-book-cover h2{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;margin-bottom:.5rem;}
.p-book-cover .sub{color:#7a5e30;font-size:.88rem;}
.p-chapter{margin-bottom:2.4rem;padding-bottom:1.8rem;border-bottom:1px solid rgba(120,85,30,.25);}
.p-chapter:last-child{border-bottom:none;}
.p-actions{display:flex;gap:.7rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap;}
.p-btn{
  font-family:'Fraunces',serif;font-size:.84rem;padding:.5rem 1.2rem;cursor:pointer;
  background:transparent;border:1px solid #b89248;color:#8a6420;border-radius:var(--radius);transition:all .15s;
}
.p-btn:hover{background:rgba(184,146,72,.15);}

/* ── Keyframe-Animationen (Ein-Blenden: Overlay, Rolle, Karten/Board) ── */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scrollIn{from{opacity:0;transform:scale(.94) translateY(12px);}to{opacity:1;transform:none;}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.flipcard,.panel,.welcome,.board{animation:cardIn .35s ease-out;}

/* ── Rolodex-Wähler (Split-Flap; ersetzt den Slot-Picker in Wort-/Feld-/Typ-Modus) ──
   EIN Eintrag steht mittig auf einer horizontal geteilten Karte (.rolo-card): die
   obere Glyphen-Hälfte auf .rolo-half.top, die untere auf .rolo-half.bot — die Naht
   (.rolo-seam) läuft mittig durch die Schrift. Geblättert wird per Klappe (.rolo-flap,
   dreht rotateX 0→-180° um die Naht). Technik der zwei Hälften: jedes .rolo-word ist
   so hoch wie die ganze Karte (--rolo-h) und mittig zentriert; das obere Half zeigt
   davon die obere Hälfte (top:0 + overflow), das untere die untere (nach oben
   verschoben). Maße als lokale Variablen: --rolo-h Kartenhöhe, --fs-rolo Schriftgröße. */
.rail-list.has-rolo{overflow:hidden;display:flex;flex-direction:column;}
.rolo-pick{--rolo-h:96px;--fs-rolo:clamp(1.5rem, 1rem + 1.3vw, 2.3rem);
  display:flex;flex-direction:column;gap:.7rem;padding:.9rem .8rem 1.1rem;flex:1;justify-content:center;min-height:0;}
.rolo-pick.type{--rolo-h:120px;--fs-rolo:clamp(.92rem,.62rem + .82vw,1.3rem);}   /* etwas kleiner: lange Einzelwörter wie „Bedeutungswandel" passen bequem */

.rolo-search{display:flex;align-items:center;gap:.45rem;background:var(--paper-card);border:1px solid var(--line);border-radius:99px;padding:.45rem .8rem;}
.rolo-search .si{color:var(--gold);font-size:1rem;}
.rolo-search input{flex:1;min-width:0;border:none;background:none;font-size:.95rem;color:var(--ink);outline:none;}
.rolo-search .sclr{background:none;border:none;color:var(--ink-faint);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .1rem;}
.rolo-search.nohit{border-color:rgba(178,58,58,.65);box-shadow:0 0 0 1px rgba(178,58,58,.35);}   /* kein Treffer */

.rolo-stage{display:flex;gap:.45rem;align-items:stretch;justify-content:center;}
.rolo-az{width:18px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2px 0;touch-action:none;user-select:none;cursor:ns-resize;}
.rolo-az span{font-size:.54rem;font-weight:700;color:var(--gold-soft);opacity:.5;line-height:1;pointer-events:none;}
.rolo-az span.act{color:var(--ink);opacity:1;}

.rolo-controls{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.rolo-nav{width:100%;max-width:248px;height:26px;border:none;background:linear-gradient(var(--paper-card),var(--paper-deep));color:var(--ink-soft);border-radius:8px;cursor:pointer;font-size:.78rem;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .12s,color .12s;}
.rolo-nav:hover{color:var(--ink);transform:translateY(-1px);}
.rolo-nav:active{transform:translateY(0);}

.rolo-card{position:relative;width:100%;max-width:248px;height:var(--rolo-h);cursor:pointer;perspective:300px;perspective-origin:50% 50%;outline:none;
  border-radius:12px;overflow:hidden;background:linear-gradient(#fffdf8,var(--paper-card));
  box-shadow:0 6px 16px rgba(0,0,0,.26),inset 0 0 0 1px rgba(176,130,24,.22);
  touch-action:none;user-select:none;-webkit-user-select:none;}
.rolo-card:focus-visible{box-shadow:0 6px 16px rgba(0,0,0,.26),inset 0 0 0 2px var(--gold);}
.rolo-card.done{box-shadow:0 6px 16px rgba(0,0,0,.26),inset 0 0 0 1px var(--correct);}
.rolo-half{position:absolute;left:0;right:0;height:calc(var(--rolo-h)/2);overflow:hidden;}
.rolo-half.top{top:0;}
.rolo-half.bot{bottom:0;}
.rolo-word{position:absolute;left:0;right:0;height:var(--rolo-h);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 .5rem;
  font-family:'Fraunces',serif;font-weight:700;font-size:var(--fs-rolo);line-height:1.12;color:var(--ink);
  white-space:normal;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
  /* Lange Wörter (»Auseinandersetzung«) brechen mit Silbentrennung um statt
     die Karte zu sprengen — wie im Typ-Rolodex (Naht läuft zwischen den Zeilen). */
.rolo-half.top .rolo-word{top:0;}
.rolo-half.bot .rolo-word{top:calc(var(--rolo-h)/-2);}

/* die Klappe — nur während des Umblätterns sichtbar (.show), dreht in 3D über die
   Naht (.go → @roloFold). Dauer kommt aus --fdur (von der JS gesetzt). Die zwei
   Schatten-Overlays (::after) dunkeln die wegklappende Vorderseite ab bzw. hellen die
   ankommende Rückseite auf → das Umblättern liest sich als echte 3D-Faltung. */
.rolo-flap{position:absolute;left:0;right:0;top:0;height:calc(var(--rolo-h)/2);transform-origin:bottom center;transform-style:preserve-3d;display:none;z-index:2;}
.rolo-flap.show{display:block;}
.rolo-flap.go{animation:roloFold var(--fdur,.36s) cubic-bezier(.33,.05,.4,1) forwards;}
.rolo-flap-front,.rolo-flap-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(#fffdf8,var(--paper-card));}
.rolo-flap-back{transform:rotateX(180deg);}
.rolo-flap-front .rolo-word{top:0;}
.rolo-flap-back .rolo-word{top:calc(var(--rolo-h)/-2);}
.rolo-flap-front::after,.rolo-flap-back::after{content:'';position:absolute;inset:0;pointer-events:none;background:#241a10;opacity:0;}
.rolo-flap.go .rolo-flap-front::after{animation:roloShadeOut var(--fdur,.36s) cubic-bezier(.33,.05,.4,1) forwards;}
.rolo-flap.go .rolo-flap-back::after{animation:roloShadeIn var(--fdur,.36s) cubic-bezier(.33,.05,.4,1) forwards;}
@keyframes roloFold{from{transform:rotateX(0deg);}to{transform:rotateX(-180deg);}}
@keyframes roloShadeOut{0%{opacity:0;}50%{opacity:.5;}100%{opacity:.5;}}      /* Vorderseite dunkelt beim Wegklappen */
@keyframes roloShadeIn{0%{opacity:.5;}50%{opacity:.5;}100%{opacity:0;}}        /* Rückseite hellt beim Ankommen auf */

.rolo-seam{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:rgba(120,85,30,.26);z-index:3;pointer-events:none;}
.rolo-seam i{position:absolute;top:50%;width:6px;height:6px;transform:translateY(-50%) rotate(45deg);background:var(--gold);}
.rolo-seam i.l{left:-2px;}.rolo-seam i.r{right:-2px;}

.rolo-sub{min-height:1.3rem;text-align:center;font-size:.82rem;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:.4rem;}
.rolo-pick:not(.type) .rolo-sub{font-style:italic;}
.rolo-sub .suit{width:20px;height:20px;font-size:.8rem;}
/* Kurze Erläuterung des Aufgabentyps (nur Typ-Rolodex) */
.rolo-desc{max-width:248px;margin:.1rem auto 0;padding-top:.5rem;border-top:1px dashed var(--line);text-align:center;font-size:.8rem;line-height:1.45;color:var(--ink-soft);min-height:2.4em;}

.rolo-spin{align-self:center;font-family:'Fraunces',serif;font-weight:600;font-size:.9rem;color:var(--roller-dark);background:linear-gradient(var(--gold-soft),var(--gold));padding:.5rem 1.3rem;border-radius:99px;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.rolo-spin:active{transform:translateY(1px);}

/* ── Responsive ──
   Unter 960px (Tablet/iPhone-Hochkant): die Seiten-Schiene wird zur
   horizontalen Kopfleiste, der Filz stapelt vertikal, die Wortliste scrollt
   horizontal, die Aktions-Buttons rücken unter die Karte. Unter 520px nur
   noch kleinere Schriftgrößen. (Mac quer nutzt das Standard-Layout oben.) */
.m-back{display:none;}   /* nur in der iPhone-Karten-Ansicht sichtbar (s. Media-Query) */
.ctrl-btn.m-only{display:none;}   /* „↩ Auswahl" im Nav-Menü: nur iPhone-Karten-Ansicht */

@media(max-width:960px){
  /* Dokument fix verankern: ein Swipe darf NICHT die Seite/Karte verschieben
     (kein Rubber-Band) — er soll im Karten-Scrollbereich landen. position:fixed
     verhindert zusätzlich den iOS-Safari-Bug, bei dem die Tastatur das Root-
     Dokument hochschiebt und es nach dem Schließen nicht ganz zurückkehrt. */
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;}
  body{position:fixed;width:100%;}
  /* Portrait: KEINE Bühnen-Skalierung — normales responsives Stapel-Layout,
     breiten-taugliche Schrift (iPhone/iPad-Hochkant), ebenfalls per --uf regelbar. */
  html{font-size:calc(clamp(16px, 13.6px + 0.5vw, 20px) * var(--uf));}
  .app{height:100dvh;overflow:hidden;}
  .table,body.nav-rail .table{position:relative;left:auto;top:auto;transform:none;width:auto;height:100dvh;flex-direction:column;min-height:0;border-radius:0;box-shadow:none;}

  /* ── iPhone-Einzel-Ansicht: ENTWEDER Auswahl (Rail) ODER Karte (Felt) ── */
  body.nav-rail:not(.m-card) .felt{display:none;}   /* Auswahl: nur die Rail */
  body.nav-rail.m-card .rail{display:none;}          /* Karte: nur das Felt */
  /* Wortwolke/Sternenwirbel: Vollbild auch im Hochformat (Schiene aus, Kugel sichtbar) */
  body.mode-wolke .felt{display:flex !important;height:100dvh;padding:0;}

  /* ── Wolken-Wähler (Wort-/Feld-Modus) im Hochformat ──
     Die Auswahl-Regel oben würde .felt ausblenden; hier zeigt die Rail nur eine
     KOMPAKTE Kopfleiste (Titel + Stöbern + Suche + Zufallswort), und die Wortwolke
     (.felt) füllt den restlichen Schirm. */
  body.word-pick.nav-rail .rail{height:auto;flex:0 0 auto;padding-bottom:0;}
  body.word-pick.nav-rail .rail-list{display:none;}     /* Leerfläche raus → Platz für die Wolke */
  /* Schrift + Beutel UNTER der Wolke, an den unteren Bildschirmrand geheftet (eigene Leiste,
     absolut an der Bühne .table). */
  body.word-pick.nav-rail .rail-foot{
    position:absolute; left:0; right:0; bottom:0; margin-top:0; z-index:6;
    display:flex; flex-direction:row; align-items:center; gap:.8rem;
    background:#473628; border-top:1px solid rgba(245,237,223,.16);
    padding:.35rem .9rem calc(.35rem + env(safe-area-inset-bottom));
  }
  body.word-pick.nav-rail .rail-foot .beutel{flex:1;min-width:0;margin:0;padding:0;border-top:none;
    display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.4rem;}
  body.word-pick.nav-rail .rail-foot .beutel-title{margin:0;}
  body.word-pick.nav-rail .rail-foot .beutel-empty{margin:0;}
  body.word-pick.nav-rail .rail-foot .beutel-items{margin:0;}
  body.word-pick.nav-rail .rail-foot .beutel-btn{margin:0;}
  /* unten Platz für die geheftete Fußleiste: deren ECHTE Höhe (--foot-h, von fitStage/showPicker
     gemessen, inkl. Safe-Area) + kleiner Spalt — sonst verdeckt ein umgebrochener Fuß
     (gefüllter Beutel, schmale Breite) die unterste Wolkenzeile. */
  body.word-pick.nav-rail:not(.m-card) .felt{display:flex !important;flex:1 1 auto;height:auto;min-height:0;
    overflow:hidden;padding:.3rem 0 calc(var(--foot-h, 58px) + 8px);}
  body.word-pick.nav-rail .felt-center{width:100%;height:100%;min-height:0;}
  body.word-pick.nav-rail .wp-head{font-size:1rem;padding:.25rem;}
  /* iOS zoomt beim Fokus in ein Eingabefeld mit Schrift < 16px → ALLE Textfelder ≥16px,
     damit die Seite/Kugel beim Tippen nicht „springt" (max(16px,1rem) skaliert bei großer
     Nutzerschrift mit, bleibt aber nie unter 16px). */
  .wolke-search-input,.rail-search{font-size:max(16px,1rem);}
  input[type="text"],input[type="search"],input:not([type]),textarea{font-size:max(16px,1rem);}

  /* Auswahl-Ansicht: Rail füllt den Schirm (vertikal, Slot groß) */
  .rail{
    width:100%;height:100dvh;flex-direction:column;
    border:none;box-shadow:none;border-radius:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rail-head{padding:.6rem .9rem .2rem;}
  .logo{font-size:.95rem;}
  .rail-modes{flex-direction:row;border-bottom:1px solid var(--line);padding:.4rem .9rem;}
  .rail-mode{flex:1;font-size:.86rem;padding:.5rem .5rem;text-align:center;}
  .rail-list{flex:1;max-height:none;min-height:0;}
  /* Rolodex füllt die Auswahl-Ansicht groß aus (Karte + Schrift deutlich größer) */
  .rolo-pick{--rolo-h:128px;--fs-rolo:clamp(2rem,8.5vw,3.1rem);gap:1.1rem;padding:1.3rem 1rem;}
  .rolo-pick.type{--rolo-h:154px;--fs-rolo:clamp(1.1rem,4.6vw,1.7rem);}
  .rolo-card,.rolo-nav{max-width:min(440px,82vw);}
  .rolo-nav{height:34px;font-size:.95rem;}
  .rolo-az{width:26px;} .rolo-az span{font-size:.64rem;}
  .rolo-search input{font-size:max(16px,1rem);}   /* nie unter 16px → kein iOS-Fokus-Zoom (auch bei kleiner Nutzerschrift) */
  .rolo-sub{font-size:.95rem;}
  .beutel{padding:.5rem .9rem;border-top:1px solid var(--line);}
  .beutel-btn{width:auto;margin-top:0;padding:.3rem .7rem;}

  /* Karten-Ansicht: Felt füllt den Schirm; Karte + Nav mittig, Safe-Area */
  .felt{
    flex-direction:column;align-items:center;gap:.8rem;
    height:100dvh;overflow-y:auto;
    padding:max(1rem,env(safe-area-inset-top)) 1rem max(1.2rem,env(safe-area-inset-bottom));
  }
  body.m-card .felt{justify-content:center;overflow:hidden;}   /* Karte: gemeinsam vertikal zentriert */
  .felt-spacer{display:none;}
  /* gleiches Format wie Desktop (--card-ar), größtmöglich: hier meist breitenbegrenzt */
  .flipcard{height:min(70dvh, calc(92vw / var(--card-ar)));}
  .actions:empty{display:none;}
  .actions{position:static;transform:none;flex-direction:row;flex-wrap:wrap;align-items:stretch;width:min(440px,90vw);justify-content:center;gap:.5rem;margin-left:0;padding:0;}
  .actions .ahead{display:none;}
  .ctrl-btn{text-align:center;}

  /* „Zurück zur Auswahl" — nur iPhone-Karten-Ansicht, und NUR solange noch keine
     volle Navigation da ist (allererste Karte). Danach übernimmt „↩ Auswahl" im Menü. */
  .m-back{display:none;}
  body.m-card:not(.has-nav) .m-back{display:inline-flex;align-items:center;justify-content:center;
    font-size:.92rem;color:var(--ink-soft);
    background:var(--paper-card);border:1px solid var(--line);border-radius:99px;
    padding:.45rem 1.1rem;cursor:pointer;flex-shrink:0;}
  body.m-card:not(.has-nav) .m-back:hover{border-color:var(--ink-soft);}
  body.m-card .actions .ctrl-btn.m-only{display:inline-flex;align-items:center;justify-content:center;}

  .scroll{width:88vw;height:88dvh;}
  .scroll-body{padding:2rem 1.6rem;}
}
@media(max-width:520px){
  .card-word{font-size:1.55rem;}
  .card-q{font-size:1.06rem;}
  .star-hub-word{font-size:1.3rem;}
  .p-title{font-size:1.7rem;}
}

/* ── Druck: nur die Pergament-Rolle (Schatzkammer) als Büchlein, Tisch aus ── */
@media print{
  body{overflow:visible;background:#fff;}
  .table{display:none!important;}
  .scroll-overlay{position:static!important;display:block!important;background:none!important;backdrop-filter:none!important;}
  .scroll{width:auto!important;height:auto!important;filter:none!important;}
  .scroll-cap,.scroll-x{display:none!important;}
  .scroll-body{overflow:visible!important;box-shadow:none!important;background:#fff!important;padding:0!important;}
  .p-chapter{page-break-inside:avoid;}
  .p-actions{display:none!important;}
}

/* ── In-Browser-Lektor (Edit-Modus) ──
   Nur sichtbar, wenn body.editing gesetzt ist (über #lektorat + gültigen Schlüssel).
   Editierbare Felder bekommen eine dezente gestrichelte Kontur; geänderte (noch nicht
   gespeicherte) Felder einen Gold-Balken. Das schwebende Panel rechts unten zeigt die
   Zahl offener Änderungen, ein optionales Notizfeld und Speichern/Verwerfen. */
body.editing .ed-field{
  outline:1px dashed var(--gold-soft);outline-offset:2px;border-radius:4px;
  cursor:text;transition:background .12s,outline-color .12s;
}
body.editing .ed-field:hover{background:rgba(176,130,24,.06);}
body.editing .ed-field:focus{outline:2px solid var(--gold);background:rgba(176,130,24,.09);}
body.editing .ed-field.ed-dirty{box-shadow:-3px 0 0 var(--gold);background:rgba(176,130,24,.07);}
body.editing .opt{cursor:default;}   /* im Edit-Modus wird nicht geantwortet */

.ed-panel{
  position:fixed;right:1rem;bottom:1rem;z-index:400;width:280px;max-height:min(80vh,640px);
  display:flex;flex-direction:column;gap:.5rem;padding:.85rem .9rem 1rem;
  background:linear-gradient(var(--paper-card),var(--paper));
  border:1px solid var(--gold-soft);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:.85rem;
}
.ed-panel .ed-head{display:flex;align-items:center;justify-content:space-between;font-family:'Fraunces',serif;color:var(--ink);}
/* Liste der offenen Änderungen — je Eintrag ein eigenes „Warum"-Feld fürs KI-Review */
.ed-list{flex:1 1 auto;min-height:2.5rem;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem;}
.ed-list::-webkit-scrollbar{width:6px;}
.ed-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.ed-empty{font-size:.78rem;color:var(--ink-faint);font-style:italic;line-height:1.4;padding:.2rem 0;}
.ed-item{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:.4rem .5rem;background:#fffdf8;}
.ed-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;}
.ed-item-field{font-family:'Fraunces',serif;font-weight:600;font-size:.8rem;color:var(--ink);}
.ed-item-word{font-size:.72rem;color:var(--ink-faint);}
.ed-item-diff{font-size:.76rem;color:var(--ink-soft);line-height:1.35;margin:.15rem 0 .35rem;}
.ed-item-note{width:100%;resize:vertical;border:1px solid var(--line);border-radius:6px;padding:.3rem .4rem;font:inherit;font-size:.8rem;color:var(--ink);background:#fff;outline:none;}
.ed-item-note:focus{border-color:var(--gold-soft);}
.ed-panel .ed-count{min-width:1.4rem;height:1.4rem;padding:0 .4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;background:var(--gold);color:#2b2012;font-weight:700;font-size:.78rem;}
.ed-panel .ed-note{width:100%;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;font:inherit;font-size:.82rem;color:var(--ink);background:#fffdf8;outline:none;}
.ed-panel .ed-note:focus{border-color:var(--gold-soft);}
.ed-panel .ed-row{display:flex;gap:.4rem;}
.ed-btn{flex:1;font-family:'Fraunces',serif;font-size:.84rem;padding:.5rem .6rem;border:1px solid var(--line);background:linear-gradient(var(--paper-card),var(--paper));color:var(--ink);border-radius:8px;cursor:pointer;transition:all .12s;}
.ed-btn:hover:not(:disabled){border-color:var(--ink-soft);transform:translateY(-1px);}
.ed-btn:disabled{opacity:.5;cursor:default;}
.ed-btn.primary{background:linear-gradient(var(--gold-soft),var(--gold));color:#2b2012;border-color:var(--gold);font-weight:600;}
#edFlip{font-size:.8rem;padding:.4rem;}
.ed-status{font-size:.76rem;color:var(--ink-soft);min-height:1.1rem;line-height:1.35;}
.ed-x{position:absolute;top:.4rem;right:.5rem;width:1.5rem;height:1.5rem;border:none;background:none;color:var(--ink-faint);font-size:1rem;line-height:1;cursor:pointer;}
.ed-x:hover{color:var(--wrong);}
.ed-btn.wide{width:100%;}
/* Schwebender „EDIT"-Knopf (nur authentifiziert & nicht editierend) */
.ed-toggle{
  position:fixed;right:1rem;bottom:1rem;z-index:400;display:none;align-items:center;gap:.3rem;
  font-family:'Fraunces',serif;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  padding:.6rem 1.1rem;border:none;border-radius:99px;cursor:pointer;color:#2b2012;
  background:linear-gradient(var(--gold-soft),var(--gold));
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .12s,box-shadow .12s;
}
.ed-toggle:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.5);}
@media(max-width:960px){ .ed-panel{right:.6rem;bottom:.6rem;width:230px;} .ed-toggle{right:.7rem;bottom:.7rem;} }

/* ── Literarische Beigabe — abgesetztes Pull-Quote unter dem Essay ── */
.parchment-essay .beigabe{ margin:1.7rem 0 .3rem; padding:.65rem 0 .65rem 1.1rem;
  border-left:3px solid #c9a24b; }
.parchment-essay .beigabe blockquote{ margin:0; font-style:italic; color:#5a4420;
  line-height:1.5; }
.parchment-essay .beigabe figcaption{ margin-top:.5rem; font-size:.8rem; color:#8a6420;
  font-style:normal; letter-spacing:.01em; }
.parchment-essay .beigabe .bg-tro{ display:inline-block; margin-left:.55rem;
  padding:.04rem .42rem; border:1px solid #c9a24b; border-radius:.7rem;
  font-size:.68rem; color:#8a6420; vertical-align:.06em; }
/* Gedicht-Geschenk: ganzes Gedicht als Vers-Block. white-space:pre-line erhält die
   Zeilen-/Strophenumbrüche; nicht im Blocksatz, aufrecht statt kursiv (Lesbarkeit). */
.parchment-essay .gedicht{ margin:1.9rem 0 .3rem; }
.parchment-essay .gedicht .gedicht-label{ font-family:'Inter',sans-serif; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:#8a6420; margin-bottom:.7rem; }
.parchment-essay .gedicht blockquote{ white-space:pre-line; font-style:normal;
  text-align:left; hyphens:none; line-height:1.65; font-size:1.02rem; color:#4a3618; }

/* ── Essay-Pergament in der GALAXIE: dunkel/galaxie-nativ (Peter, 2026-06-25) — nachtblaue
   Rolle, helle Tinte, sanftes Gold als Zier. Scoped auf body.mode-galaxy → der main-Modus
   (Stöbern/Schatzkammer) behält das helle Pergament. Bulk via Variablen-Umfärbung auf .scroll
   (.parchment-essay deklariert color:var(--parch-ink) → erbt hell); Rest sind die wenigen
   hartkodierten Warmtöne (Initiale, Linie, Beigabe/Gedicht, Schließen-Knopf). ── */
body.mode-galaxy .scroll-overlay{background:rgba(4,5,12,.72);}
body.mode-galaxy .scroll{--parch:#1b1f31;--parch-deep:#141828;--parch-ink:#e9ebf4;--roller-light:#333a57;--roller-dark:#171b2c;
  /* auch die allgemeinen Tinte-Variablen hell setzen — die ANLEITUNG (scroll-title/anl-*) nutzt --ink/--ink-soft,
     nicht --parch-ink; sonst stünde sie dunkel auf dunklem Grund. */
  --ink:#e9ebf4;--ink-soft:#c4c9db;--ink-faint:#9098b0;}
body.mode-galaxy .scroll-body{
  color:var(--parch-ink);   /* Grundfarbe für erbende Elemente (scroll-title/h2 ohne eigene Farbe) */
  background:radial-gradient(130% 60% at 50% 0%, rgba(70,82,124,.40), transparent 60%),linear-gradient(var(--parch),var(--parch-deep));
  box-shadow:inset 0 0 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);}
body.mode-galaxy .scroll-x{color:#e9ebf4;}
body.mode-galaxy .p-eyebrow{color:var(--gold-soft);}
body.mode-galaxy .p-rule{background:var(--gold-soft);opacity:.65;}
body.mode-galaxy .parchment-essay .lead p:first-of-type::first-letter{color:var(--gold-soft);}
body.mode-galaxy .p-btn{border-color:rgba(255,255,255,.28);color:#d4d8e6;background:rgba(255,255,255,.04);}
body.mode-galaxy .p-btn:hover{background:rgba(255,255,255,.1);}
body.mode-galaxy .parchment-essay .beigabe{border-left-color:rgba(224,191,114,.55);}
body.mode-galaxy .parchment-essay .beigabe blockquote{color:#c4c9db;}
body.mode-galaxy .parchment-essay .beigabe figcaption,
body.mode-galaxy .parchment-essay .beigabe .bg-tro,
body.mode-galaxy .parchment-essay .gedicht .gedicht-label{color:var(--gold-soft);}
body.mode-galaxy .parchment-essay .beigabe .bg-tro{border-color:rgba(224,191,114,.5);}
body.mode-galaxy .parchment-essay .gedicht blockquote{color:#d4d8e6;}
body.mode-galaxy .p-book-cover,body.mode-galaxy .p-chapter{border-bottom-color:rgba(255,255,255,.15);}

/* ── Hamburger-Menü in der GALAXIE: dunkel (der helle ☰-Kasten + das braune Panel stören
   auf dem nachtblauen Grund). Scoped auf body.mode-galaxy → main behält sein Aussehen. ── */
/* Dunkler Hamburger — in der Galaxie UND auf der dunklen Eingangsseite (body.mode-gate, von
   renderGateway/renderSternenfahrt gesetzt). Body-Klasse statt :has(), weil Chromium/Safari den
   Hamburger im Geschwister-Zweig bei :has-Toggle nicht zuverlässig neu berechnen. */
body.mode-galaxy .rail-menu,body.mode-gate .rail-menu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85);}
body.mode-galaxy .rail-menu:hover,body.mode-gate .rail-menu:hover{border-color:rgba(255,255,255,.45);color:#fff;}
body.mode-galaxy .rail-menu[aria-expanded="true"],body.mode-gate .rail-menu[aria-expanded="true"]{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);color:#fff;}
body.mode-galaxy .menu-panel,body.mode-gate .menu-panel{background:#151a2b;border-color:rgba(255,255,255,.16);}
body.mode-galaxy .menu-row-label,body.mode-galaxy .stilctl-label,body.mode-gate .menu-row-label,body.mode-gate .stilctl-label{color:rgba(255,255,255,.5);}
body.mode-galaxy .fontctl button,
body.mode-galaxy .stilctl button,
body.mode-galaxy .menu-nav button,
body.mode-gate .fontctl button,
body.mode-gate .stilctl button,
body.mode-gate .menu-nav button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82);}
body.mode-galaxy .fontctl button:hover,
body.mode-galaxy .stilctl button:hover,
body.mode-galaxy .menu-nav button:hover,
body.mode-gate .fontctl button:hover,
body.mode-gate .stilctl button:hover,
body.mode-gate .menu-nav button:hover{border-color:rgba(255,255,255,.45);color:#fff;}
body.mode-galaxy .stilctl button.on,body.mode-gate .stilctl button.on{background:var(--gold);border-color:var(--gold);color:#2b2012;}

/* ── Eingangsseite (Gateway + »Auf Sternenfahrt«) im neuen dunklen Galaxie-Layout (Peter, 2026-06-25):
   nachtblauer Grund statt warmem Filz; helle Sterngold-Akzente (Titel/Goldränder) bleiben. body.mode-gate
   wird NUR auf diesen Seiten gesetzt → trifft NICHT die alte Wortkugel-Landung (renderWelcome). ── */
body.mode-gate .table{background:radial-gradient(ellipse at 50% 30%, #14192c, #070912 80%);}
body.mode-gate .splash-tag{color:#9aa2bb;}
body.mode-gate .gate-door{background:rgba(255,255,255,.045);border-color:rgba(224,191,114,.32);}
body.mode-gate .gate-sub{color:#aab0c4;}
body.mode-gate .sf-note{color:#aab0c4;}

/* ════════════════════════════════════════════════════════════════════════
   AUF WANDERSCHAFT — Spaziergänge & Wanderungen (Modus 'walk')
   Stationen nutzen das Stern-Layout (.star-container/.star-shoot.door);
   hier nur die Walk-spezifischen Zutaten: Perlen-Fortschritt, Funkeltüren,
   Fund-Banner, Faden-Kette, Schienen-Panel, Beta-Hinweis.
   ════════════════════════════════════════════════════════════════════════ */
.walk-wrap{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:560px;margin:0 auto;}
/* Pfad-Station: Karte mittig in der Wanderspur halten und auf deren Breite begrenzen —
   sonst sitzt sie links verschoben bzw. wird bei hohen Fenstern (Höhe→86vh→Breite) rechts
   von overflow-x:hidden abgeschnitten. */
#pfadCard{display:flex;flex-direction:column;align-items:center;width:100%;}
#pfadCard .flipcard{max-width:100%;}
.walk-kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  color:var(--paper);font-size:.85rem;letter-spacing:.02em;}
.walk-etappe{font-family:'Fraunces',serif;opacity:.85;}
.walk-perlen{display:inline-flex;gap:.28rem;align-items:center;}
.walk-perle{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold-soft);opacity:.9;}
.walk-perle.offen{background:transparent;border:1px solid var(--gold-soft);opacity:.5;}
.walk-perle.fk{background:#ffd86b;box-shadow:0 0 6px rgba(255,216,107,.8);}
.walk-perle.hier{outline:2px solid var(--paper);outline-offset:1px;}
.walk-hub .walk-hub-meta{display:block;font-size:.68rem;line-height:1.35;max-height:3.6em;overflow:hidden;}
/* Funkeltür: glitzernder Gold-Puls — die Edelkante lädt ein */
.star-shoot.walk-door.funkel{border-style:solid;border-color:var(--gold);
  box-shadow:0 0 10px rgba(217,184,106,.55);animation:funkelPulse 2.2s ease-in-out infinite;}
.star-shoot.walk-door.funkel .door-ic{color:var(--gold);}
@keyframes funkelPulse{0%,100%{box-shadow:0 0 6px rgba(217,184,106,.35);}50%{box-shadow:0 0 16px rgba(217,184,106,.85);}}
.star-shoot.walk-door.heim{border-color:var(--correct);border-style:solid;}
/* Fund-Banner (an der Station nach einer Funkeltür) + Fundliste (Finale/Rolle) */
.walk-fund{background:var(--paper-card);border:1px solid var(--gold-soft);border-radius:var(--radius);
  padding:.7rem .9rem;box-shadow:0 2px 8px var(--shadow);}
.walk-fund-kopf{font-family:'Fraunces',serif;font-weight:600;color:var(--gold);font-size:.9rem;margin-bottom:.25rem;}
.walk-fund-text{font-size:.86rem;color:var(--ink-soft);line-height:1.5;font-style:italic;}
.walk-fundliste{margin:1rem auto;max-width:34rem;display:flex;flex-direction:column;gap:.6rem;text-align:left;}
.walk-fundliste h3{color:var(--paper);font-size:1rem;text-align:center;}
.walk-fuss{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}
.walk-aufgabe{font:inherit;font-size:.82rem;padding:.4rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold-soft);background:var(--paper-card);color:var(--ink-soft);}
.walk-aufgabe:hover{border-color:var(--gold);color:var(--ink);}
.walk-abbruch{font:inherit;font-size:.78rem;background:none;border:none;cursor:pointer;
  color:var(--paper);opacity:.55;text-decoration:underline;}
.walk-abbruch:hover{opacity:.9;}
/* Finale: der Faden als Kette */
.walk-kette{display:flex;flex-wrap:wrap;gap:.3rem .45rem;justify-content:center;align-items:center;
  margin:1rem auto;max-width:36rem;}
.walk-glied{background:var(--paper-card);border:1px solid var(--line);border-radius:999px;
  padding:.18rem .7rem;font-size:.85rem;font-family:'Fraunces',serif;}
.walk-glied.start{border-color:var(--correct);font-weight:600;}
.walk-glied.fk{border-color:var(--gold);box-shadow:0 0 6px rgba(217,184,106,.5);}
.walk-pfeil{color:var(--gold-soft);font-size:.8rem;}
.walk-finale-knoepfe{margin-top:1rem;}
/* Start-Karte: Beta-Hinweis + Funkel-Akzent */
.walk-beta{margin-top:1.4rem;font-size:.74rem;color:var(--ink-faint);font-style:italic;line-height:1.5;}
.funkel-ink{color:var(--gold);white-space:nowrap;}
.wm-neu{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;border-radius:.7rem;
  background:var(--gold);color:#fff;font-size:.62rem;font-family:'Inter',sans-serif;
  font-weight:600;letter-spacing:.05em;vertical-align:.15em;}
/* ── Wanderung ohne Wegweiser (2026-06-12): Türen, Gate, Ankunft, Nachtlager ── */
/* Türen mit festen Weg-Charakter-Schildern: längere Texte, kein Zielwort */
.star-shoot.walk-door .shoot-word{font-size:.78rem;line-height:1.25;white-space:normal;}
.star-shoot.walk-door{max-width:9.5rem;}
.star-shoot.walk-door.ws-sicher{border-style:solid;border-color:var(--correct);}
.star-shoot.walk-door.ws-sicher .door-ic{color:var(--correct);}
.star-shoot.walk-door.ws-buesche{border-style:solid;border-color:#7d8a4e;}
.star-shoot.walk-door.ws-buesche .door-ic{color:#7d8a4e;}
.star-shoot.walk-door.ws-sprung{border-style:solid;border-color:#b3702a;}
.star-shoot.walk-door.ws-sprung .door-ic{color:#b3702a;}
/* Gewarnte Tür: bernsteinfarbene Mahnung — begehbar, aber der Weg wird länger */
.star-shoot.walk-door.warn{border-color:#c0392b;box-shadow:0 0 8px rgba(192,57,43,.35);}
.star-shoot.walk-door.warn .shoot-angle{color:#c0392b;font-weight:600;white-space:normal;line-height:1.3;}
/* Zugewachsene Tür: diese Sorte gibt es an dieser Verzweigung nicht */
.star-shoot.walk-door.zu{opacity:.45;border-style:dashed;cursor:default;}
/* Aufgaben-Gate: erst den Ort aneignen, dann zeigen sich die Wege */
.walk-gate{text-align:center;margin:.4rem auto 0;max-width:26rem;}
.walk-gate p{color:var(--paper);opacity:.85;font-size:.9rem;font-style:italic;margin-bottom:.6rem;}
.walk-gate-btn{font-size:.95rem;}
.walk-vertraut{align-self:center;font-size:.78rem;color:var(--paper);opacity:.7;font-style:italic;}
/* Ankunfts-Einblendung »Wie bin ich denn hierhin gekommen?« — legt sich als
   Blende über die Wortkarte (.board): die Frage füllt exakt das obere
   Drittel, die Antwort die unteren zwei Drittel. Kein Auto-Dismiss —
   geschlossen wird nur per Tipp/Klick/Wisch (Peters Vorgabe 2026-06-12). */
.walk-ankunft-pop{position:absolute;inset:0;z-index:30;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;pointer-events:none;}
.walk-ankunft-pop.weg{animation:ankunftAus .4s ease-in forwards;}
@keyframes ankunftAus{from{opacity:1;}to{opacity:0;}}
.walk-ankunft-block{pointer-events:auto;cursor:pointer;background:var(--paper-card);
  border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;text-align:center;
  padding:.7rem 1rem;overflow:auto;}
.walk-ankunft-block.frage{height:33.333%;border-radius:20px 20px 0 0;
  animation:ankunftEin .55s cubic-bezier(.2,.8,.3,1);}
.walk-ankunft-block.antwort{height:66.667%;border-radius:0 0 20px 20px;border-top:none;
  justify-content:flex-start;padding-top:1rem;animation:antwortEin .45s ease-out;}
.walk-ankunft-block.antwort[hidden]{display:none;}
.walk-ankunft-pop.funkel .walk-ankunft-block{border-color:var(--gold);
  box-shadow:0 0 16px rgba(217,184,106,.6),0 10px 34px rgba(0,0,0,.45);}
@keyframes ankunftEin{from{transform:translateY(-110%);opacity:.3;}to{transform:translateY(0);opacity:1;}}
@keyframes antwortEin{from{opacity:0;transform:translateY(.7rem);}to{opacity:1;transform:none;}}
.walk-ankunft-kopf{font-family:'Fraunces',serif;font-size:.92rem;font-weight:600;color:var(--ink);}
.walk-ankunft-weg{font-family:'Fraunces',serif;font-size:.92rem;color:var(--ink-soft);}
.walk-ankunft-weg strong{font-size:1.12em;color:var(--ink);}
.walk-ankunft-frage2{font-family:'Fraunces',serif;font-size:.95rem;color:var(--ink-soft);line-height:1.45;}
.walk-ankunft-frage2 strong{color:var(--ink);}
.walk-ankunft-text{font-size:.92rem;color:var(--ink-soft);line-height:1.55;font-style:italic;text-align:left;}
.walk-ankunft-rueck{font-size:.88rem;color:var(--ink-soft);line-height:1.5;text-align:left;}
.walk-ankunft-rueck .ank-rl{font-style:normal;font-size:.78rem;color:var(--ink-faint);display:block;margin-bottom:.15rem;}
.walk-ankunft-beleg{font-size:.84rem;color:var(--ink-soft);line-height:1.5;text-align:left;
  border-left:2px solid var(--gold-soft);padding-left:.6rem;}
.walk-ankunft-fund{font-size:.82rem;color:var(--gold);font-weight:600;}
.walk-ankunft-hint{font-size:.68rem;color:var(--ink-faint);margin-top:auto;padding-top:.3rem;}
.walk-ankunft-block.frage .walk-ankunft-hint{margin-top:0;}
/* Morgen-Banner nach dem Nachtlager */
.walk-morgen{background:var(--paper-card);border:1px solid var(--gold-soft);border-radius:var(--radius);
  padding:.55rem .9rem;font-size:.86rem;color:var(--ink-soft);text-align:center;}
/* Nachtlager-Karte erbt die Welcome-Optik (.walk-lager nur als Haken) */

/* ── Spielanleitung in der Pergamentrolle: poetisch → praktisch ── */
.anl-h{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink);margin:1.3rem 0 .5rem;}
.anl-p{font-size:.92rem;color:var(--ink-soft);line-height:1.6;}
.anl{margin:0;display:flex;flex-direction:column;gap:.55rem;}
.anl-zeile{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.2rem .9rem;
  padding:.45rem .6rem;background:rgba(0,0,0,.025);border-radius:6px;}
.anl-zeile dt{font-family:'Fraunces',serif;font-weight:600;font-size:.88rem;color:var(--ink);margin:0;}
.anl-zeile dd{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin:0;}
@media (max-width:560px){ .anl-zeile{grid-template-columns:1fr;} }

/* Schienen-Panel im Wander-Modus: der bisherige Faden */
.walk-rail{display:flex;flex-direction:column;gap:.5rem;padding:.4rem .2rem;}
.walk-rail-titel{font-family:'Fraunces',serif;font-size:.85rem;color:var(--paper);opacity:.8;}
.walk-rail-hint{font-size:.76rem;color:var(--paper);opacity:.55;line-height:1.4;}
.walk-rail-faden{display:flex;flex-direction:column;gap:.15rem;max-height:40vh;overflow:auto;}
.walk-rail-glied{font-size:.78rem;color:var(--paper);opacity:.75;padding-left:.6rem;position:relative;}
.walk-rail-glied::before{content:'·';position:absolute;left:0;color:var(--gold-soft);}
.walk-rail-glied.fk{color:#ffd86b;opacity:.95;}
.walk-rail-glied:last-child{opacity:1;font-weight:600;}
.walk-rail-weiter{margin-top:.2rem;}
@media(max-width:960px){
  .walk-wrap{max-width:100%;}
  .walk-kopf{padding:0 .4rem;}
}

/* Faden-Breadcrumb an der Station (klickbar = Zurückgehen) + Schienen-Glieder als Buttons */
.walk-faden{margin:0 0 .2rem;justify-content:center;}
.walk-rail-glied{font:inherit;background:none;border:none;cursor:pointer;text-align:left;}
.walk-rail-glied[disabled]{cursor:default;}
.walk-rail-glied:not([disabled]):hover{color:#ffd86b;opacity:1;}

/* Motto über den Wanderschaften (Frost) — stilles Epigraph auf der Start-Karte */
.walk-motto{margin:.4rem auto 1rem;max-width:26rem;padding:.55rem 0 .55rem 1rem;
  border-left:3px solid var(--gold-soft);text-align:left;}
.walk-motto p{margin:0;font-family:'Spectral',serif;font-style:italic;
  font-size:.92rem;line-height:1.55;color:var(--ink-soft);}
.walk-motto figcaption{margin-top:.4rem;font-size:.72rem;color:var(--ink-faint);
  font-style:normal;letter-spacing:.01em;}

/* Wander-Filz scrollt: Finale/Fundlisten/Start können höher als der Schirm sein.
   Nur in Walk-Screens (body.walking) — die übrigen Modi behalten ihr Zentrieren. */
body.walking .felt-center{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;
  max-height:100%;-webkit-overflow-scrolling:touch;padding:1.2rem .4rem;}

/* Deutsche Nachdichtung unter dem Machado-Original (eigene Übersetzung, leiser gesetzt) */
.walk-motto .walk-motto-de{margin-top:.45rem;font-size:.82rem;color:var(--ink-faint);}

/* ── Erkundungspfade (Konzeptpfade als geführte Wanderungen) ───────────────── */
/* Die neutrale Einladung an einem Pfad-Wort (ersetzt die benannte Pfad-Tür) */
.ctrl-btn.pfad-einladung{border-color:var(--gold-soft);color:var(--gold);
  background:linear-gradient(180deg,rgba(255,216,107,.12),rgba(255,216,107,.02));
  font-style:italic;line-height:1.3;white-space:normal;text-align:left;height:auto;padding:.55rem .7rem;}
.ctrl-btn.pfad-einladung:hover{background:rgba(255,216,107,.18);color:#ffd86b;}
/* Verbindungstext zwischen den Stationen einer geführten Wanderung */
.pfad-bruecke{text-align:center;font-family:'Spectral',serif;font-style:italic;
  color:var(--ink-faint);font-size:.9rem;margin:.1rem 0 .6rem;}
/* Der Reveal am Ende des Pfades */
.pfad-reveal-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  color:var(--gold);margin-bottom:.25rem;}
.welcome-mode.pfad-meister{border-color:var(--gold-soft);
  background:linear-gradient(180deg,rgba(255,216,107,.12),transparent);}
.welcome-mode.pfad-meister .wm-name{color:var(--gold);}
/* Erwanderte Pfade in der Schatzkammer (Pergament) */
.chamber-pfade{list-style:none;padding:0;margin:.4rem 0;}
.chamber-pfade li{margin:.35rem 0;}
.chamber-pfad{font:inherit;background:none;border:none;cursor:pointer;
  color:#6b4f1e;border-bottom:1px dotted #b89a5a;padding:.1rem 0;}
.chamber-pfad:hover{color:#3f2d0a;}
/* Capstone (»Zwei Züge«) — das tiefste Geschenk, nachdrücklicher als ein Meister */
.welcome-mode.pfad-capstone{border-color:var(--gold);
  background:linear-gradient(180deg,rgba(255,216,107,.2),rgba(255,216,107,.04));}
.welcome-mode.pfad-capstone .wm-name{color:var(--gold);}

/* ════════ Spielform 6 »Was · Wann · Warum« — Wahlfelder ════════ */
.wahl-wrap{max-width:680px;margin:0 auto;width:100%;}
.wahl-card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 2px 10px var(--shadow);padding:clamp(1rem,3vw,1.6rem);margin:.4rem auto 0;
  max-width:640px;width:100%;}
.wahl-titel{font-family:'Fraunces',serif;color:var(--ink);margin:0 0 .4rem;font-size:clamp(1.3rem,3.4vw,1.7rem);}
.wahl-intro{color:var(--ink-soft);line-height:1.55;margin:0 0 .6rem;}
.wahl-hinweis{color:var(--ink-faint);font-style:italic;line-height:1.5;margin:0 0 1rem;font-size:.92rem;}
/* Teil A — die nackte Wörterliste (KEIN Register, bewusst) */
.wahl-wortliste{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.2rem;}
.wahl-wortchip{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;}
.wahl-wortchip.erkundbar{cursor:pointer;border-color:var(--gold);text-decoration:underline;
  text-decoration-color:var(--gold-soft);text-underline-offset:3px;}
.wahl-wortchip.erkundbar:hover{background:#fff;border-color:var(--gold);}
.wahl-erk-hint{display:inline;color:var(--gold);font-style:normal;}
/* Namens-Schirm: die drei W */
.wahl-www{display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 1rem;}
.wahl-w{color:var(--ink);line-height:1.55;}
.wahl-w-k{font-family:'Fraunces',serif;font-weight:700;color:var(--gold);font-size:1.1rem;margin-right:.15rem;}
/* Wirkungs-Beispiele (dieselbe Lage, anderes Register → andere Aussage/Wirkung) */
.wahl-bsp-intro{font-style:italic;color:var(--ink-soft);line-height:1.5;margin:1.1rem 0 .7rem;
  border-top:1px solid var(--line);padding-top:.9rem;}
.wahl-bsp{margin:0 0 1.1rem;}
.wahl-bsp-lage{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:.5rem;}
.wahl-bsp-var{border-left:3px solid var(--gold-soft);padding-left:.75rem;margin:0 0 .65rem;}
.wahl-bsp-satz{font-family:'Spectral',serif;font-style:italic;color:var(--ink);font-size:1.05rem;margin:0 0 .15rem;line-height:1.45;}
.wahl-bsp-reg{font-size:.78rem;font-style:italic;color:var(--gold);margin-bottom:.1rem;}
.wahl-bsp-wirkung{color:var(--ink-soft);font-size:.92rem;line-height:1.5;}
/* Echo-Rolle (»Deine Wahl« / »Das Spiel schlägt vor«) */
.wahl-echo-rolle{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:.2rem;}
.wahl-echo-karte + .wahl-echo-karte{margin-top:.6rem;}
.wahl-echo-karte .wahl-register{display:block;margin:.05rem 0 .35rem;}
/* Teil A — die Glieder */
.wahl-glieder{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.1rem;}
.wahl-glied{border-left:3px solid var(--gold-soft);padding:.35rem 0 .35rem .7rem;}
.wahl-glied-kopf{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.wahl-wort{font-family:'Fraunces',serif;font-weight:600;color:var(--ink);font-size:1.08rem;}
.wahl-register{font-size:.78rem;color:var(--gold);font-style:italic;letter-spacing:.01em;}
.wahl-glied .wahl-echo{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin-top:.15rem;}
/* Teil B — die Setzung */
.wahl-lage{background:rgba(176,130,24,.06);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .85rem;margin:0 0 .9rem;}
.wahl-zeile{color:var(--ink);line-height:1.6;}
.wahl-marke{display:inline-block;min-width:5.4em;color:var(--ink-faint);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;}
.wahl-frage{font-family:'Fraunces',serif;color:var(--ink);font-size:1.05rem;margin:.2rem 0 .7rem;}
.wahl-optionen{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;}
.wahl-option{font:inherit;cursor:pointer;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.4rem .9rem;color:var(--ink);transition:all .15s;}
.wahl-option:hover{border-color:var(--gold);background:#fff;}
.wahl-option.gewaehlt{border-color:var(--gold);background:var(--gold-soft);color:var(--ink);font-weight:600;}
.wahl-freitext-hint{color:var(--ink-faint);font-size:.85rem;font-style:italic;margin:.5rem 0;}
.wahl-bald{display:inline-block;font-style:normal;font-size:.72rem;background:rgba(176,130,24,.12);
  color:var(--gold);border-radius:5px;padding:.05rem .4rem;margin-left:.25rem;}
/* Das Echo */
.wahl-echo-feld{margin:.7rem 0 0;}
.wahl-echo-karte{border-radius:10px;padding:.7rem .85rem;border-left:4px solid var(--ink-faint);
  background:var(--paper);animation:wahlEchoIn .25s ease;}
@keyframes wahlEchoIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.wahl-echo-karte.stimmig{border-left-color:var(--correct);background:rgba(42,110,63,.06);}
.wahl-echo-karte.unstimmig{border-left-color:var(--gold);background:rgba(176,130,24,.07);}
.wahl-echo-karte.grotesk{border-left-color:var(--wrong);background:rgba(161,74,40,.06);}
.wahl-echo-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.25rem;}
.wahl-echo-wort{font-family:'Fraunces',serif;font-weight:600;color:var(--ink);}
.wahl-passung{font-size:.78rem;font-weight:600;}
.wahl-passung.stimmig{color:var(--correct);}
.wahl-passung.unstimmig{color:var(--gold);}
.wahl-passung.grotesk{color:var(--wrong);}
.wahl-echo-text{color:var(--ink);line-height:1.55;}
.wahl-setz-fuss{margin-top:.8rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;}
.wahl-probier{color:var(--ink-faint);font-size:.85rem;font-style:italic;}
/* Möglichkeitsraum */
.wahl-loesungen{display:flex;flex-direction:column;gap:.9rem;margin:.5rem 0 1.1rem;}
.wahl-loesung{border-left:3px solid var(--gold-soft);padding-left:.8rem;}
.wahl-loesung-pos{font-size:.78rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
.wahl-satz{font-family:'Spectral',serif;font-style:italic;color:var(--ink);font-size:1.05rem;
  margin:.2rem 0;line-height:1.5;}
.wahl-loesung .wahl-echo{color:var(--ink-soft);font-size:.9rem;line-height:1.5;}
.wahl-weiter{margin-top:.4rem;}
/* Tägliches Rätsel »Wahr oder schön erfunden?« (A2) */
.daily-wrap{max-width:680px;margin:0 auto;width:100%;}
.daily-card{text-align:left;}
.daily-eyebrow{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem;}
.daily-optionen{display:flex;flex-direction:column;gap:.55rem;margin:.3rem 0;}
.daily-opt{font:inherit;text-align:left;cursor:pointer;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .8rem;color:var(--ink);line-height:1.45;transition:all .15s;}
.daily-opt:hover{border-color:var(--gold);background:#fff;}
.daily-verdikt{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;margin:.2rem 0 .6rem;}
.daily-verdikt.hit{color:var(--correct);}
.daily-verdikt.miss{color:var(--wrong);}
.daily-loesung{background:rgba(42,110,63,.06);border-left:4px solid var(--correct);border-radius:8px;
  padding:.5rem .7rem;margin:0 0 .7rem;color:var(--ink);line-height:1.5;}
.daily-loesung-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-right:.3rem;}
.daily-reveal{color:var(--ink);line-height:1.6;margin:0 0 1rem;}
.daily-aktionen{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem;}
.daily-morgen{color:var(--ink-faint);font-style:italic;font-size:.9rem;text-align:center;}
/* »alpha pilot«-Label für neue Spielmöglichkeiten */
.wm-pilot{display:inline-block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  vertical-align:middle;margin-left:.4rem;padding:.06rem .4rem;border:1px solid var(--gold);border-radius:5px;
  color:var(--gold);}
.alpha-pilot-tag{display:inline-block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.1rem .5rem;border:1px solid var(--gold-soft);border-radius:6px;color:var(--gold);
  background:rgba(176,130,24,.08);margin:.1rem 0 .2rem;}
/* Registertafel (am Ende, im Pergament-Overlay nach der Pointe) */
.wahl-tafel-intro{font-style:italic;color:var(--parch-ink);line-height:1.55;margin:1.4rem 0 .8rem;
  border-top:1px solid rgba(58,44,26,.2);padding-top:1rem;}
.wahl-tafel{display:flex;flex-direction:column;gap:.7rem;}
.rt-eintrag{border-left:3px solid var(--gold);padding-left:.75rem;}
.rt-kopf{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.rt-wort{font-family:'Fraunces',serif;font-weight:600;color:var(--parch-ink);font-size:1.05rem;}
.rt-reg{font-size:.8rem;font-style:italic;color:#7a5a1e;}
.rt-echo{color:var(--parch-ink);opacity:.85;line-height:1.5;font-size:.92rem;margin-top:.1rem;}
.wahl-schluss-hinweis{font-family:'Spectral',serif;font-style:italic;color:var(--parch-ink);
  line-height:1.6;margin:1.4rem 0 .4rem;border-top:1px solid rgba(58,44,26,.2);padding-top:1rem;}

/* ── WortWelten-Galaxie (Beta) — Vollflächen-Canvas wie der Wolke-Modus ────── */
body.mode-galaxy .rail{display:none;}
body.mode-galaxy .table{position:static;transform:none;width:100%;height:100%;border-radius:0;box-shadow:none;}
body.mode-galaxy .felt{flex:1;padding:0;display:flex;height:100dvh;}
body.mode-galaxy .felt-spacer,body.mode-galaxy .actions{display:none;}
body.mode-galaxy .felt-center{flex:1;width:100%;height:100%;min-height:0;}
.galaxy-wrap{position:relative;flex:1;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;background:#070912;}

/* ── Galaxie-Layout neu (v176): Hub-Modus / Wort-Welten-Modus via .galaxy-hub / .galaxy-welten ── */

/* Obere Titelzeile (immer sichtbar) */
.gal-top-bar{flex:0 0 auto;display:flex;flex-direction:column;padding:10px 14px 6px;z-index:2;gap:4px;}
.gal-title-btn{background:none;border:0;cursor:pointer;font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;
  color:#e8dcc4;text-align:left;padding:0;transition:color .15s;letter-spacing:.02em;}
.gal-title-btn:hover{color:#fff;}

/* Zweite Zeile (Zurück + Sterne): nur in .galaxy-welten */
.gal-welten-row{display:none;align-items:center;gap:10px;flex-wrap:wrap;}
.galaxy-wrap.galaxy-welten .gal-welten-row{display:flex;}

/* Hub-Nav (3 Modus-Knöpfe): Portrait = UNTEN (order:3), Landscape = oben (order:1, s. Media Query) */
.gal-hub-nav{display:none;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;order:3;
  padding:10px 14px;border-top:.5px solid rgba(255,255,255,.08);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
.galaxy-wrap.galaxy-hub .gal-hub-nav{display:flex;}
.gal-hub-btn{font-family:'Fraunces',serif;font-size:.88rem;color:#e8dcc4;
  background:rgba(245,237,223,.06);border:1px solid rgba(217,184,106,.4);
  border-radius:99px;padding:.45rem 1rem;cursor:pointer;transition:all .15s;}
.gal-hub-btn:hover{background:rgba(217,184,106,.18);border-color:var(--gold-soft);color:#fff;}
.gal-hub-btn.on{background:rgba(217,184,106,.28);border-color:var(--gold,#e6c878);color:#fff;}

/* Canvas-Wrap: position:relative für galaxy-fb-Overlay */
.galaxy-canvas-wrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;order:2;}
.galaxy-canvas{flex:1;width:100%;min-height:0;display:block;cursor:grab;touch-action:none;}

/* Feedback-Label: relativ zu .galaxy-canvas-wrap (nicht mehr zu .galaxy-wrap) */
/* vorläufig ausgeblendet (Nutzungshinweise + Wurzelwort-Anzeige): display:none entfernen, wenn neue Form gewünscht */
.galaxy-fb{display:none;position:absolute;top:8px;left:14px;right:14px;font-family:'Inter',sans-serif;font-size:.82rem;
  line-height:1.4;color:#e8edff;pointer-events:none;text-shadow:0 1px 4px #000;z-index:2;}

/* Untere Leiste (Wort suchen + Zoom): nur in .galaxy-welten, Portrait am unteren Rand */
.gal-bottom-bar{display:none;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;
  flex-wrap:wrap;order:4;padding:10px 14px;border-top:.5px solid rgba(255,255,255,.08);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
/* Nur Portrait + nicht im Sonnensystem + keine Karte offen */
@media (max-width:960px){.galaxy-wrap.galaxy-welten:not(.gal-diving):not(.gal-has-card) .gal-bottom-bar{display:flex;}}

/* Kontroll-Buttons (Zurück, Wort suchen) */
.gal-ctrl-btn{font-family:'Inter',sans-serif;font-size:.85rem;color:#c7cee0;
  background:rgba(245,237,223,.06);border:1px solid rgba(217,184,106,.3);
  border-radius:99px;padding:.35rem .9rem;cursor:pointer;transition:all .15s;white-space:nowrap;}
.gal-ctrl-btn:hover{background:rgba(217,184,106,.18);border-color:var(--gold-soft);color:#fff;}

/* Kontroll-Paar (− Sterne +, − Zoom +) */
.gal-ctrl-pair{display:inline-flex;align-items:center;border:.5px solid rgba(255,255,255,.18);
  border-radius:8px;overflow:hidden;}
.gal-ctrl-pair .gal-ctrl-btn{border:0;border-radius:0;padding:.35rem .7rem;
  border-right:.5px solid rgba(255,255,255,.12);}
.gal-ctrl-pair .gal-ctrl-btn:last-child{border-right:0;}
.gal-ctrl-pair-label{font-family:'Inter',sans-serif;font-size:.78rem;color:#9aa3b8;
  padding:0 .45rem;user-select:none;}

/* Suche: nur beim Toggle (.search-open auf .gal-bottom-bar) sichtbar */
.gal-bottom-bar .galaxy-search{display:none;flex:1;min-width:0;}
.gal-bottom-bar.search-open .gal-search-toggle{display:none;}
.gal-bottom-bar.search-open .galaxy-search{display:block;}
.gal-bottom-bar.search-open{justify-content:flex-start;}
/* ×-Filter-Löschen-Button: nur bei aktivem Filter sichtbar, ohne Tastatur */
.gal-bottom-bar .gal-filter-clr{display:none;padding:.35rem .6rem;color:var(--gold-soft,#d9b86a);border-color:var(--gold-soft,#d9b86a);}
.gal-bottom-bar.filter-active .gal-filter-clr{display:inline-flex;}
/* Portrait: Suchfeld immer sichtbar, volle Restbreite, kein Toggle-Button nötig */
@media (max-width:960px){
  .gal-bottom-bar{justify-content:flex-start;}
  .gal-bottom-bar .gal-search-toggle{display:none;}
  .gal-bottom-bar .galaxy-search{display:block;}
}
/* Suchfeld-Styling (bleibt kompatibel mit der alten .galaxy-search-Regel) */
.galaxy-search{font-family:'Inter',sans-serif;font-size:.85rem;color:#e8e8f0;
  background:rgba(245,237,223,.06);border:1px solid rgba(217,184,106,.35);
  border-radius:99px;padding:.35rem .8rem;outline:none;}
.galaxy-search::placeholder{color:#7c849a;}
.galaxy-search:focus{border-color:var(--gold-soft,#d9b86a);}

/* Landscape: Hub-Nav ÜBER dem Canvas (order:1 < canvas-wrap order:2) */
@media (min-width:961px){
  .gal-hub-nav{order:1;border-top:0;border-bottom:.5px solid rgba(255,255,255,.08);padding-bottom:10px;}
  .gal-top-bar{flex-direction:row;align-items:center;}
  .gal-welten-row{flex-wrap:nowrap;}
}

/* Alte Klassen (noch im DOM für gal-task-overlay etc.; galaxy-bar ohne neue HTML-Verwendung) */
.galaxy-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;flex:0 0 auto;z-index:2;}
.galaxy-up{background:none;border:0;cursor:pointer;padding:.4rem .3rem;font-family:'Inter',sans-serif;font-size:.9rem;color:#c7cee0;transition:color .15s;}
.galaxy-up:hover{color:#fff;}

/* ── WortWelten-Galaxie — Faden-Info-Overlay (showLinkInfo: Verbindungsqualität beim
   Antippen eines Sonne→Trieb-Fadens). Die Aufgaben-Karte läuft NICHT mehr hierüber,
   sondern über die echte www-card im .gal-card-host (s. u.) — die alten Optionen-/
   Reveal-/Verdikt-Regeln dieses Panels sind darum entfernt. ── */
.gal-task-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,6,14,.72);}
.gal-task-panel{background:#131628;border:1px solid rgba(255,255,255,.14);border-radius:18px 18px 0 0;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 40px rgba(0,0,0,.55);overscroll-behavior:contain;color:rgba(255,255,255,.85);}
.gal-task-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:8px;flex-wrap:wrap;}
.gal-task-from{font-size:.82rem;color:rgba(255,255,255,.5);}
.gal-task-type{font-size:.7rem;font-weight:600;color:rgba(200,180,100,.9);text-transform:uppercase;letter-spacing:.05em;}
.gal-task-q{font-size:1.02rem;line-height:1.55;margin:0 0 16px;color:rgba(255,255,255,.92);}
.gal-task-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.gal-task-close{padding:10px 16px;border-radius:9px;font-size:.88rem;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);transition:background .15s;}
.gal-task-close:hover{background:rgba(255,255,255,.15);}

/* ── Galaxie-Karten-Host: die ECHTE Aufgaben-Flip-Karte (www-card) über dem Sternsystem.
   Der Renderer ist papierhell (variablen-getrieben); hier wird er für die dunkle Galaxie
   umgefärbt, indem die Karten-Variablen auf dem Host neu gesetzt werden — fast ohne
   Einzel-Overrides. Nur die zwei hartkodierten .face-Verläufe/Schatten werden ersetzt. */
.gal-card-host{
  position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,12,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  /* Dunkles Register: helle Tinte auf nachtblauem Papier.
     color hier NEU auflösen — sonst erben .face/.card-word/.card-q den bereits
     berechneten hellen body-color (Variable allein reicht nicht, weil diese Elemente
     kein eigenes color:var(--ink) deklarieren). */
  color:var(--ink);
  --ink:#e9ebf4;--ink-soft:#aeb4c8;--ink-faint:#838aa2;
  --paper:#1a1e30;--paper-deep:#252a44;--paper-card:#161a2b;
  --line:rgba(255,255,255,.16);--shadow:rgba(0,0,0,.45);
  --gold:#e0bf72;--gold-soft:#ecd79c;
  --correct:#5bbf86;--wrong:#e08562;
  --choice:#d98a64;--subjective:#b59ad0;--conversation:#7fc4a6;
}
.gal-card-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  width:100%;height:100%;padding:1.4rem 1rem 1.2rem;box-sizing:border-box;}
/* Button-Leiste UNTER der Karte (iPhone) bzw. neben ihr (Landscape, später): die Galaxie-eigene
   Navigation (↩ WortWelt · Nächste → · ◎ Galaxie · ⌂ Start · ❦ Essay · ☼ Wort). Leer eingeklappt. */
.gal-card-foot{flex-shrink:0;display:flex;flex-flow:row wrap;align-items:stretch;justify-content:center;
  gap:.4rem;width:min(440px,92%);}
.gal-card-foot:empty{display:none;}
/* Kompakte Knöpfe: kurzer Text + Pfeil-/Symbol-Sprache, drei pro iPhone-Zeile (flex-basis ~28 %,
   wachsen zum Füllen; lange Ziel-Wörter im »→ Wort«-Knopf werden mit Ellipse beschnitten). */
.gal-fbtn{flex:1 1 28%;min-width:0;max-width:48%;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Fraunces',serif;font-size:.82rem;
  line-height:1.1;color:var(--ink);background:linear-gradient(var(--paper-card),var(--paper));
  border:1px solid var(--line);border-radius:99px;padding:.5rem .45rem;cursor:pointer;transition:all .15s;}
.gal-fbtn:hover{border-color:var(--ink-soft);transform:translateY(-1px);}
.gal-card-mount{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;}
.gal-card-mount .flipcard{height:min(var(--card-h), 100%);}
/* Hartkodierte Papier-Verläufe/Schatten der Karte → nachtblau überschreiben */
.gal-card-host .face{
  background:radial-gradient(120% 80% at 50% 0%, #20253b, var(--paper-card) 60%);
  box-shadow:0 18px 46px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 0 0 6px rgba(255,255,255,.035);}
.gal-card-host .face-back{background:radial-gradient(120% 90% at 50% 100%, #20253b, var(--paper-card) 62%);}
.gal-card-note{flex-shrink:0;font-size:.74rem;font-style:italic;color:var(--gold-soft);
  margin-top:.2rem;opacity:.85;}
@media (max-width:960px){
  /* iPhone: Karte + Fuß als EINE vertikal zentrierte Gruppe (wie body.m-card .felt),
     gap zwischen ihnen — die Karte klebt nie am Bildrand, der Fuß sitzt darunter. */
  .gal-card-panel{padding:1.4rem .7rem calc(.8rem + env(safe-area-inset-bottom));
    justify-content:center;gap:.8rem;}
  .gal-card-mount{flex:0 1 auto;}
  /* Karte auf 70dvh gedeckelt (wie Hauptapp) → Raum für die Knopfreihe darunter;
     zusätzlich über die BREITE deckeln, sonst zwingt das feste Format sie breiter als der Schirm. */
  .gal-card-mount .flipcard{height:min(var(--card-h), 70dvh, calc(92vw / var(--card-ar)));}
}