/* Fragenreich — Gestaltung der Kinder-App (strenge CSP: alle Stile hier, nie inline).
 * Abendton passend zur Welt „Dämmerung" (Zielgruppe Klasse 4–6). Kontraste ≥ 4,5 : 1,
 * Ziele ≥ 44 px, Form + Farbe an jeder Tür (Farbsehschwäche). */

@font-face {
  font-family: "Andika";
  src: url("/static/fonts/andika/andika-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("/static/fonts/andika/andika-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fr-grund: #0f1324;
  --fr-text: #eef1f8;
  --fr-gedaempft: #b4bccd;
  --fr-akzent: #5ef2e0;
  --fr-akzent-text: #06201f;
  --fr-flaeche: #171c33;
  --fr-karte: rgba(22, 26, 48, 0.94);
  --fr-linie: #33406a;
  --fr-fokus: #ffd27f;
  --fr-radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fr-grund);
  color: var(--fr-text);
  font-family: "Andika", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.fr-unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--fr-fokus); outline-offset: 2px; }

.fr-huelle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

/* ------------------------------------------------------------------ Bühne */
.fr-buehne {
  position: relative;
  height: calc(100vh - 16px);
  height: calc(100dvh - 16px);
  min-height: 320px;
  border-radius: var(--fr-radius);
  overflow: hidden;
  background: #1a1838;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Absolut, damit die alte Zeichenfläche beim Drehen die Höhe der Bühne nicht
   mitbestimmt (sonst misst das Spiel seine eigene Größe). */
.fr-buehne canvas { display: block; position: absolute; left: 0; top: 0; }
/* Die Fläche der Mini-Spiele ist kein Bühnen-Canvas: sie steht im Fluss der Karte (sonst klebt sie oben links). */
.fr-buehne canvas.fr-minispiel-flaeche { position: static; }

.fr-hud {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.fr-hud-feld {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: rgba(12, 10, 26, 0.6);
  border: 1px solid rgba(94, 242, 224, 0.35);
  font-weight: 700;
  font-size: 1.1rem;
}
.fr-hud-symbol { width: 18px; height: 26px; }
.fr-hud-pause { margin-left: auto; pointer-events: auto; }

.fr-steuerung {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100% - 24px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(12, 10, 26, 0.72);
  font-size: 0.95rem;
  text-align: center;
  pointer-events: none;
}
.fr-steuerung-tasten { color: var(--fr-gedaempft); }
/* Floß, Lore, Kletterwand (X7): Titel und Bild des Fahrzeugs, eckiger, damit drei Zeilen Platz haben */
.fr-steuerung--strecke { border-radius: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; }
.fr-steuerung-bild { width: 56px; height: auto; flex: 0 0 auto; }
.fr-steuerung-titel { flex: 1 0 100%; font-weight: 700; color: #ffcf7a; }
.fr-steuerung--strecke .fr-steuerung-bild + .fr-steuerung-titel { flex: 0 1 auto; }

/* ------------------------------------------------------------------ Schichten */
.fr-schicht {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(8, 7, 22, 0.55);
}
.fr-karte {
  width: 100%;
  max-width: 760px;
  max-height: 100%;
  overflow-y: auto;
  margin: auto;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--fr-karte);
  border: 1px solid var(--fr-linie);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.fr-start-karte { max-width: 840px; }
/* Frage oben, Hintergrund nur leicht abgedunkelt: Tor-Siegel und Steinwächter bleiben
   unter der Karte sichtbar — sie sind das, worum es geht. */
.fr-schicht--frage { align-items: flex-start; background: rgba(6, 5, 18, 0.78); }
.fr-schicht--frage .fr-karte { margin: 0 auto auto; max-width: 720px; }
/* Fokus auf die Frage (User 2026-10-29): der Hintergrund — Strecke, Tor, Anzeige — tritt zurück (abgedunkelt), die Fragenkarte
   leuchtet: türkiser Rand und Schein, dichter Grund. Bei „Starker Kontrast" gilt die eigene, deckendere Regel weiter unten. */
.fr-schicht--frage .fr-frage-karte {
  background: #181e3a;
  border: 2px solid var(--fr-akzent);
  box-shadow: 0 0 0 4px rgba(94, 242, 224, 0.2), 0 0 36px rgba(94, 242, 224, 0.4), 0 18px 54px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-schicht--frage:not([hidden]) { animation: fr-fokus-ein 200ms ease-out; }
}
@keyframes fr-fokus-ein { from { opacity: 0; } to { opacity: 1; } }
.fr-klein { max-width: 520px; text-align: center; }
.fr-marke {
  margin: 0 0 4px;
  color: var(--fr-akzent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fr-karte-titel { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; }
.fr-start-text { margin: 0 0 14px; color: var(--fr-gedaempft); line-height: 1.5; }
.fr-status { margin: 10px 0 0; color: var(--fr-fokus); min-height: 1.4em; }

.fr-wahl { margin: 12px 0; }
.fr-wahl-titel { margin: 0 0 6px; font-weight: 700; color: var(--fr-gedaempft); }
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-chip {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--fr-linie);
  background: #1d2442;
  color: var(--fr-text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.fr-chip:hover { border-color: var(--fr-akzent); }
.fr-chip[aria-checked="true"] {
  background: var(--fr-akzent);
  border-color: var(--fr-akzent);
  color: var(--fr-akzent-text);
  font-weight: 700;
}
.fr-chips--themen .fr-chip { border-radius: 12px; text-align: left; }
/* Welten und Fächer mit Symbol (fr-ui.js `symbolChip`) */
.fr-chip--stufe { position: relative; }
.fr-chip-neu { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--fr-akzent); }
.fr-stufen-wahl { margin: 0 0 10px; }
.fr-logbuch-geschichte { margin: 0 0 6px; font-weight: 600; color: var(--fr-akzent); }
.fr-chip--symbol { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; }
.fr-chip-symbol { flex: 0 0 auto; width: 26px; height: 26px; }
.fr-chip-symbol--welt { width: 32px; height: 32px; margin: -2px 0; }
.fr-chip-symbol--fach { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fr-chip-symbol--fach .fr-gefuellt { fill: currentColor; stroke: none; }
#fr-welten .fr-chip { min-height: 52px; }

.fr-start-entspannt { margin-top: 4px; }
/* Der Fuß klebt unten in der Karte (wie beim Gestalten): Starten ist immer zu sehen. */
.fr-start-fuss {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 8px -22px -20px;
  padding: 10px 22px 14px;
  background: #161a30;
  border-top: 1px solid var(--fr-linie);
}
.fr-los-hinweis { margin: 0; color: var(--fr-gedaempft); font-size: 0.95rem; }
.fr-los-hinweis[hidden] + .fr-start-knoepfe { margin-left: auto; }

/* „Weiter unten" (fr-ui.js `weiterUnten`): klebt über dem unteren Rand bzw. über dem Fuß der Karte,
   nimmt keinen Platz ein und erscheint nur, wenn darunter noch etwas kommt. */
.fr-mehr { position: sticky; bottom: 0; z-index: 3; height: 0; pointer-events: none; }
.fr-mehr-zeiger {
  position: absolute;
  left: 50%;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--fr-akzent);
  color: var(--fr-akzent-text);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 200ms ease, visibility 200ms;
}
.fr-mehr--an .fr-mehr-zeiger { opacity: 1; visibility: visible; pointer-events: auto; }
.fr-mehr-pfeil { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-mehr--an .fr-mehr-pfeil { animation: fr-mehr-wippen 1.4s ease-in-out infinite; }
}
@keyframes fr-mehr-wippen { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.fr-start-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fr-klein .fr-start-knoepfe { margin-top: 16px; }
.fr-schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.fr-schalter input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--fr-akzent); }

.fr-knopf {
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--fr-linie);
  background: transparent;
  color: var(--fr-text);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
.fr-knopf--haupt { background: var(--fr-akzent); border-color: var(--fr-akzent); color: var(--fr-akzent-text); }
.fr-knopf--leise:hover { border-color: var(--fr-akzent); }
.fr-knopf:disabled { opacity: 0.45; cursor: not-allowed; }

.fr-rund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--fr-linie);
  background: rgba(255, 255, 255, 0.08);
  color: var(--fr-text);
  cursor: pointer;
}
.fr-rund svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.fr-rund svg path[fill="none"] { fill: none; }

.fr-knopf--klein { min-height: 44px; padding: 6px 14px; font-size: 0.95rem; }
.fr-knopf--gefahr { background: #b4566b; border-color: #b4566b; color: #fff; }

/* ------------------------------------------------------------------ Profile */
/* Die Figur als Bild (SVG über data:) auf einem runden Abendhimmel; das Zeichen des
   Kindes als Plakette unten rechts. */
.fr-figurbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fr-zeichen-marke {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: #fdf6e3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-zeichen-marke svg { width: 66%; height: 66%; fill: #2a2030; }
.fr-zeichen-marke--klein { width: 42%; height: 42%; }

.fr-profil-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  margin: 6px 0 16px;
}
.fr-profil {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 2px solid var(--fr-linie);
  background: #1d2442;
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.fr-profil:hover { border-color: var(--fr-akzent); }
.fr-profil:active { transform: scale(0.97); }
.fr-profil-figur {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3566, #1a1838 70%);
}
.fr-profil-klasse { font-weight: 700; color: var(--fr-gedaempft); font-size: 0.95rem; }
/* Der freiwillige Name der Figur: über der Klasse, lange Namen umbrechen statt die Kachel zu sprengen. */
.fr-profil-name { max-width: 100%; font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.fr-name-feld { max-width: 22rem; font-size: 1.1rem; }
.fr-name-hinweis { margin: 4px 0 0; color: var(--fr-gedaempft); font-size: 0.85rem; line-height: 1.35; }
/* Link auf die Datenschutzinformationen (Befund M27, partials/oeffentlicher_fusszeilen_link.html):
   leise unter „Wer spielt?", der Code-Karte und in den Einstellungen; öffnet ein neues Fenster. */
.sdp-ds-fuss { margin: 10px 0 0; text-align: center; font-size: 0.85rem; line-height: 1.35; }
.sdp-ds-link { display: inline-block; padding: 8px 10px; color: var(--fr-gedaempft); text-decoration: underline; text-underline-offset: 2px; }
.sdp-ds-link:hover, .sdp-ds-link:focus-visible { color: var(--fr-text); }
.fr-profile-knoepfe { justify-content: flex-start; }

/* Kopf des Startbildschirms: wer gerade spielt */
.fr-wer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -4px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fr-linie);
}
.fr-wer-figur {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3566, #1a1838 70%);
}
.fr-wer-text { font-weight: 700; margin-right: auto; }

/* Startansicht (User 2026-10-17): zwei große Kacheln — „Neue Expedition" und „Meine Basis". Für Kinder
   das Erste, was ins Auge fällt: groß, mit Bild, ganze Fläche tippbar. */
.fr-heim-karte .fr-karte-titel { margin-bottom: 12px; }
.fr-heim-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fr-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 190px;
  padding: 14px 14px 16px;
  border: 2px solid var(--fr-linie);
  border-radius: 20px;
  color: var(--fr-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.fr-kachel--expedition { background: linear-gradient(160deg, #24305e 0%, #3b2c63 60%, #5a2f52 100%); }
.fr-kachel--basis { background: linear-gradient(160deg, #1f3a45 0%, #24404f 55%, #3c3a2a 100%); }
.fr-kachel:hover { border-color: var(--fr-akzent); }
.fr-kachel-bild { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; width: 100%; min-height: 90px; }
.fr-kachel-bild .fr-chip-symbol--welt { width: 96px; height: 96px; margin: 0; }
.fr-kachel-bild--basis { object-fit: contain; max-height: 120px; border-radius: 12px; }
.fr-kachel-bild--basis.fr-kachel-bild--insel { object-fit: cover; aspect-ratio: 16 / 9; background: #3b6ea5; }
.fr-kachel-titel { font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.fr-kachel-text { color: var(--fr-gedaempft); font-size: 0.95rem; line-height: 1.3; }
.fr-kachel-marke {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fr-fokus);
  color: #2a1c00;
  font-size: 0.85rem;
  font-weight: 700;
}
.fr-heim-fuss { margin-top: 14px; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-kachel { transition: transform 120ms ease-out, border-color 120ms; }
  html:not([data-fr-ruhig]) .fr-kachel:active { transform: scale(0.97); }
  html:not([data-fr-ruhig]) .fr-kachel-marke { animation: fr-marke-puls 1.8s ease-in-out infinite; }
}
@keyframes fr-marke-puls { 50% { transform: scale(1.07); } }
html[data-fr-kontrast] .fr-kachel { border-color: #c3cbe4; }
html[data-fr-kontrast] .fr-kachel-text { color: var(--fr-text); }
/* Wartet ein Kapitel der Geschichte, steht es als breite Kachel vor den beiden anderen (User 2026-11-08) —
   flach genug, dass die Startansicht auf dem Telefon quer weiter ohne Scrollen passt. */
.fr-heim-story { margin-bottom: 14px; }
.fr-kachel.fr-kachel--story {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  justify-items: start;
  width: 100%;
  min-height: 0;
  padding: 12px 16px;
  text-align: left;
  background: linear-gradient(160deg, #3a2f68 0%, #4a3a7a 55%, #6a4a6e 100%);
  border-color: var(--fr-fokus);
}
.fr-kachel--story .fr-kachel-bild { grid-row: 1 / 3; width: auto; min-height: 0; }
.fr-kachel--story .fr-kachel-bild .fr-begleiter-bild { width: 56px; height: 56px; }
.fr-kachel--story .fr-kachel-titel { align-self: end; }
.fr-kachel--story .fr-kachel-text { align-self: start; }
@media (max-width: 640px), (max-height: 520px) {
  .fr-heim-story { margin-bottom: 8px; }
  .fr-kachel.fr-kachel--story { padding: 8px 12px; column-gap: 10px; }
  .fr-kachel--story .fr-kachel-bild .fr-begleiter-bild { width: 40px; height: 40px; }
}

/* Das App-Angebot steht seit 2026-10-17 auf der Code-Seite, über den Wortfeldern */
.fr-code-karte .fr-app { margin: 0 0 14px; text-align: left; }

/* Code-Eingabe: drei große Wortfelder, darunter die Vorschläge als Kacheln */
.fr-code-karte { text-align: left; }
.fr-code-felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.fr-wort {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 2px solid var(--fr-linie);
  background: #0f1430;
  color: var(--fr-text);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
}
.fr-wort:focus { border-color: var(--fr-akzent); outline: none; }
.fr-wort--ok { border-color: var(--fr-akzent); background: #12302f; }
.fr-wort--unbekannt { border-color: #ff8fa3; }
.fr-wort-trenner { color: var(--fr-gedaempft); font-weight: 700; }
.fr-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; margin-top: 12px; }
.fr-vorschlag {
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 2px solid var(--fr-akzent);
  background: #12302f;
  color: var(--fr-text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.fr-code-karte .fr-start-knoepfe { justify-content: flex-start; align-items: center; margin-top: 8px; }
.fr-code-karte #fr-code-weiter { margin-left: auto; }

/* Ohne Code: ein eigener Weg unter der Eingabe (E5a), wie bei den Übungen; daneben „Spielstand übernehmen" (E5c) */
.fr-code-ohne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fr-linie); }

/* Ein neuer Code: groß und Wort für Wort lesbar (umgebrochen wird nur am Bindestrich) */
.fr-code-anzeige {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--fr-akzent);
  background: #12302f;
  color: var(--fr-text);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}
.fr-nc-titel2 { margin: 0 0 8px; font-size: 1.2rem; }
#fr-nc-notiert, #fr-nc-fertig { margin-left: auto; }

.fr-scan-video {
  display: block;
  width: 100%;
  max-height: 46vh;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
}

/* Figur gestalten */
.fr-gestalten-raster {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.fr-gestalten-vorschau {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3566, #1a1838 70%);
}
.fr-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-farbe {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  background: transparent;
  cursor: pointer;
}
.fr-farbe svg { width: 100%; height: 100%; display: block; }
.fr-farbe[aria-checked="true"] { border-color: var(--fr-fokus); }
.fr-farbe:disabled { opacity: 0.3; cursor: not-allowed; }
.fr-chip--ziffer { min-width: 52px; font-size: 1.3rem; font-weight: 700; text-align: center; }
/* „Los geht's" bleibt unten in der Karte stehen — auf dem Telefon ist die Wahl länger als der Schirm. */
.fr-gestalten-fuss {
  position: sticky;
  bottom: -20px;
  margin: 8px -22px -20px;
  padding: 10px 22px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: #161a30;
  border-top: 1px solid var(--fr-linie);
}
.fr-gestalten-fuss .fr-status { margin: 0 auto 0 0; min-height: 0; }
.fr-farbe--zeichen { position: relative; }
.fr-farbe--zeichen .fr-zeichen-auf-kreis {
  position: absolute;
  left: 22%;
  top: 22%;
  width: 56%;
  height: 56%;
  fill: #fdf6e3;
}

/* ------------------------------------------------------------------ Frage-Tor */
.fr-frage-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fr-frage-ort {
  color: var(--fr-akzent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.fr-frage-kopf .fr-rund { margin-left: auto; }
/* Die Stufe der Frage zum Wählen (User 2026-10-17, ersetzt die drei Punkte): Leicht · Mittel · Schwierig,
   rechts im Kopf vor dem Lautsprecher; schwierigere Stufen zeigen ihren Lohn. */
.fr-frage-kopf { flex-wrap: wrap; }
.fr-stufenwahl { gap: 6px; margin-left: auto; }
.fr-frage-kopf .fr-stufenwahl:not([hidden]) + .fr-rund { margin-left: 0; }
.fr-stufe { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 76px; padding: 4px 12px; border-radius: 12px; font-size: 0.92rem; line-height: 1.15; }
.fr-stufe:disabled { cursor: default; }
.fr-stufe:disabled:not([aria-checked="true"]) { opacity: 0.45; }
.fr-stufe-lohn { display: inline-flex; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--fr-fokus); }
.fr-stufe[aria-checked="true"] .fr-stufe-lohn { color: var(--fr-akzent-text); }
.fr-stufe-lohn .fr-menge { gap: 2px; color: inherit; }
.fr-stufe-lohn .fr-symbol { width: 14px; height: 14px; }
.fr-stufe-lohn .fr-symbol--kristall { width: 10px; }

/* „Stimmt hier etwas nicht?" — bewusst unauffällig: kleiner, gedämpfter Textlink unten links
   (volle Fingerfläche, aber kein Blickfang). Drei feste Gründe, kein Freitext. */
.fr-melden-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--fr-gedaempft);
  opacity: 0.7;
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fr-melden-link:hover, .fr-melden-link[aria-expanded="true"] { opacity: 1; }
.fr-melden-link:disabled { display: none; }
.fr-melden {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--fr-linie);
  background: rgba(255, 255, 255, 0.05);
}
.fr-melden-titel { margin: 0 0 8px; font-weight: 700; }
.fr-melden-gruende { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-melden-status { margin: 0; color: var(--fr-gedaempft); font-size: 0.85rem; align-self: center; }
.fr-melden-status:empty { display: none; }
.fr-frage-fuss .fr-melden-link, .fr-frage-fuss .fr-melden-status { margin-right: auto; }
.fr-schilde { display: inline-flex; gap: 6px; }
.fr-schild {
  width: 14px;
  height: 20px;
  background: var(--fr-akzent);
  clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
}
.fr-schild--weg { background: #3a4470; }

.fr-kontext {
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid var(--fr-akzent);
  background: #241c36;
  font-size: 1.15rem;
  line-height: 1.55;
  white-space: pre-line;
}
/* DaZ: eine Ausgangslage nur aus Emoji ist ein Bild — groß und mittig (fr-ui.js `zeichneKontext`). */
.fr-kontext.fr-bildhilfe { font-size: 2.6rem; line-height: 1.25; text-align: center; letter-spacing: .08em; padding: 6px 10px; }
.fr-luecke {
  display: inline-block;
  min-width: 3.2em;
  margin: 0 0.2em;
  border-bottom: 3px dashed var(--fr-akzent);
  color: var(--fr-akzent);
  font-weight: 700;
  text-align: center;
}
.fr-frage-text { margin: 14px 0; font-size: 1.3rem; font-weight: 700; line-height: 1.35; }

.fr-tueren {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}
.fr-tueren--lang { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.fr-tuer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 40px 40px 12px 12px;      /* ein Torbogen */
  border: 2px solid #5a4b80;
  background: linear-gradient(180deg, #3d3356, #2a2342);
  color: var(--fr-text);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.fr-tuer:hover { border-color: var(--fr-akzent); }
.fr-tuer:active { transform: scale(0.98); }
.fr-tuer-text { overflow-wrap: anywhere; }
/* DaZ: Lautsprecher neben einer Antwort bzw. in der Rückmeldung (fr-ui.js `mitLautsprecher`) — eigener Knopf, kein Knopf im Knopf */
.fr-hoer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fr-hoer[hidden] { display: none; }
.fr-hoer > .fr-hoer-ziel { flex: 1 1 auto; min-width: 0; }
.fr-hoer-knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #5a4b80;
  background: #241c36;
  color: var(--fr-text);
  cursor: pointer;
}
.fr-hoer-knopf:hover, .fr-hoer-knopf:focus-visible { border-color: var(--fr-akzent); }
.fr-hoer-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fr-rueckmeldung--hoerbar { position: relative; padding-right: 60px; }
.fr-rueckmeldung--hoerbar > .fr-hoer-knopf { position: absolute; top: 8px; right: 8px; }
/* Die richtige Tür: zusätzlich zur Farbe ein Haken (Farbsehschwäche) */
.fr-tuer-haken { margin-left: auto; padding-left: 8px; font-size: 1.4rem; font-weight: 700; color: var(--fr-akzent); }
.fr-form { flex: 0 0 auto; width: 26px; height: 26px; }
.fr-form--raute { fill: #5ef2e0; }
.fr-form--dreieck { fill: #ffcf7a; }
.fr-form--kreis { fill: #ff8fa3; }
.fr-form--quadrat { fill: #a6e36b; }
.fr-tuer--versiegelt {
  opacity: 0.45;
  border-style: dashed;
  border-color: #b4566b;
  cursor: not-allowed;
}
.fr-tuer--richtig {
  border-color: var(--fr-akzent);
  background: linear-gradient(180deg, #1f5552, #183d3d);
  box-shadow: 0 0 0 3px rgba(94, 242, 224, 0.3), 0 0 26px rgba(94, 242, 224, 0.45);
  opacity: 1;
}

/* Zuordnen und Reihenfolge (fr-aufgabe.js): echte Knöpfe statt Türen. Ein Paar trägt dieselbe
   Form UND Farbe, was stimmt, bekommt einen Haken (Farbsehschwäche). */
.fr-aufgabe-anleitung { margin: 0 0 10px; color: var(--fr-gedaempft); font-size: 0.95rem; line-height: 1.4; }
.fr-zuordnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
.fr-zuordnen-spalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fr-paar, .fr-platz, .fr-teil {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #5a4b80;
  background: linear-gradient(180deg, #3d3356, #2a2342);
  color: var(--fr-text);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.fr-paar:not(:disabled):hover, .fr-platz:not(:disabled):hover, .fr-teil:not(:disabled):hover { border-color: var(--fr-akzent); }
.fr-paar:not(:disabled):active, .fr-platz:not(:disabled):active, .fr-teil:not(:disabled):active { transform: scale(0.98); }
.fr-paar:disabled, .fr-platz:disabled, .fr-teil:disabled { cursor: default; }
/* Lange Wörter erst trennen (Silben), dann notfalls brechen — schmale Spalten am Telefon. */
.fr-paar-text, .fr-platz-text, .fr-teil-text { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.fr-paar[data-form="raute"] { border-color: #5ef2e0; }
.fr-paar[data-form="dreieck"] { border-color: #ffcf7a; }
.fr-paar[data-form="kreis"] { border-color: #ff8fa3; }
.fr-paar[data-form="quadrat"] { border-color: #a6e36b; }
.fr-paar.fr-paar--markiert { border-color: var(--fr-fokus); box-shadow: 0 0 0 3px rgba(255, 210, 127, 0.4); }
.fr-paar-marke { flex: 0 0 auto; display: inline-flex; width: 26px; height: 26px; }
.fr-paar-marke .fr-form { width: 26px; height: 26px; }
.fr-paar-marke--leer { border: 2px dashed #8a7fb0; border-radius: 50%; }
.fr-paar--richtig, .fr-platz--richtig { background: linear-gradient(180deg, #1f5552, #183d3d); }
/* Der Haken als Plakette an der Ecke: nimmt dem Text keinen Platz (zwei Spalten am Telefon). */
.fr-aufgabe-haken {
  position: absolute;
  top: -8px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fr-akzent);
  color: var(--fr-akzent-text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.fr-folge-plaetze { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fr-folge-plaetze li { min-width: 0; }
.fr-platz { width: 100%; }
.fr-platz-nummer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--fr-linie);
  background: #241c36;
  font-weight: 700;
}
.fr-platz--leer { border-style: dashed; background: var(--fr-flaeche); }
.fr-folge-vorrat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--fr-linie);
}
.fr-teil { max-width: 100%; border-radius: 26px; }

.fr-rueckmeldung {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--fr-linie);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.05rem;
  line-height: 1.5;
}
.fr-rueckmeldung p { margin: 0; }
.fr-rueckmeldung p + p { margin-top: 6px; }
.fr-rueckmeldung-zusatz { color: var(--fr-gedaempft); }
.fr-rueckmeldung-zu {
  display: block; margin: 8px 0 0 auto; min-height: 36px; padding: 4px 14px;
  border: 1px solid var(--fr-linie); border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.fr-rueckmeldung--richtig { border-left-color: #5ef2e0; background: rgba(94, 242, 224, 0.12); }
.fr-rueckmeldung--falsch { border-left-color: #ff8fa3; background: rgba(255, 143, 163, 0.12); }
.fr-rueckmeldung--aufgeloest { border-left-color: #ffcf7a; background: rgba(255, 207, 122, 0.12); }
.fr-rueckmeldung--tipp { border-left-color: #a6e36b; background: rgba(166, 227, 107, 0.12); }

.fr-frage-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ------------------------------------------------------------------ Abschluss */
.fr-bilanz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}
.fr-bilanz div { padding: 12px; border-radius: 12px; background: #1d2442; }
.fr-bilanz dt { color: var(--fr-gedaempft); font-size: 0.9rem; }
.fr-bilanz dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 700; color: var(--fr-akzent); }
.fr-bilanz-breit { grid-column: 1 / -1; }
.fr-bilanz-breit dd { font-size: 1.2rem; }

/* Ertrag und Vorrat: Symbol + Zahl (Bausteine, Kristalle) */
.fr-vorrat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.fr-menge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--fr-text); }
.fr-menge-gut { width: 22px; height: 22px; flex: 0 0 auto; }
.fr-symbol { width: 22px; height: 22px; flex: 0 0 auto; }
.fr-symbol--kristall { width: 16px; }
.fr-menge--fehlt { color: #ff8fa3; }
.fr-vorrat--klein { gap: 6px 10px; font-size: 0.95rem; }
.fr-vorrat--klein .fr-symbol { width: 18px; height: 18px; }
.fr-vorrat--klein .fr-symbol--kristall { width: 13px; }
.fr-bilanz dd.fr-vorrat { font-size: 1.3rem; }
.fr-bilanz dd.fr-vorrat .fr-menge { color: var(--fr-akzent); }
.fr-ende-bauen { margin: 12px 0 0; color: var(--fr-fokus); font-weight: 700; }

/* ------------------------------------------------------------------ Basis */
.fr-basis-karte { max-width: 1060px; }
.fr-basis-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 10px; }
.fr-basis-kopf .fr-karte-titel { margin: 0 auto 0 0; }
.fr-basis-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fr-basis-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #1b1730;
}
.fr-basis-bild > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Tippflächen über den Gebäuden (Lage per CSSOM aus fr-basis-bild.js, so groß wie die
   gezeichnete Stufe). Was ausbaubar ist, zeigt das Bild selbst mit einem Pfeil. */
.fr-bau-flaeche { position: absolute; border-radius: 14px; cursor: pointer; }
.fr-bau-flaeche:hover { background: rgba(94, 242, 224, 0.06); }
.fr-bau-flaeche--gewaehlt { box-shadow: inset 0 0 0 3px rgba(94, 242, 224, 0.75); background: rgba(94, 242, 224, 0.07); }
.fr-basis-gebaeude { margin-top: 10px; }
.fr-gebaeude-chip { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.fr-gebaeude-chip--bereit { border-color: var(--fr-akzent); }
.fr-gebaeude-text { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
.fr-gebaeude-nutzen { font-size: 0.78rem; font-weight: 400; color: var(--fr-gedaempft); }
.fr-chip[aria-checked="true"] .fr-gebaeude-nutzen { color: var(--fr-akzent-text); opacity: 0.85; }
.fr-punkte { display: inline-flex; gap: 4px; }
.fr-punkt { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--fr-gedaempft); }
.fr-punkt--voll { background: var(--fr-akzent); border-color: var(--fr-akzent); }
.fr-chip[aria-checked="true"] .fr-punkt { border-color: var(--fr-akzent-text); }
.fr-chip[aria-checked="true"] .fr-punkt--voll { background: var(--fr-akzent-text); }
.fr-basis-detail {
  padding: 14px 16px;
  border-radius: 14px;
  background: #1d2442;
  min-width: 0;
}
.fr-basis-name { margin: 0; font-size: 1.35rem; }
.fr-basis-stufe { margin: 2px 0 8px; color: var(--fr-akzent); font-weight: 700; }
.fr-basis-vorschau { margin: 0 0 10px; text-align: center; }
.fr-basis-vorschau img { display: block; width: 100%; max-width: 260px; height: 150px; margin: 0 auto; object-fit: contain; }
.fr-basis-vorschau figcaption { color: var(--fr-gedaempft); font-size: 0.9rem; }
/* Was jede Stufe bringt: erreichte abgehakt, die nächste hervorgehoben, spätere gedämpft. */
.fr-basis-stufen-titel { margin: 4px 0 4px; font-size: 0.95rem; color: var(--fr-gedaempft); font-weight: 700; }
.fr-basis-stufen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.fr-basis-stufe-nutzen { padding: 5px 8px; border-radius: 6px; line-height: 1.4; }
.fr-basis-stufe-marke { font-weight: 700; }
.fr-basis-stufe-nutzen--erreicht .fr-basis-stufe-marke { color: var(--fr-akzent); }
.fr-basis-stufe-nutzen--naechste { background: rgba(94, 242, 224, 0.1); box-shadow: inset 3px 0 0 var(--fr-akzent); }
.fr-basis-stufe-nutzen--spaeter { color: var(--fr-gedaempft); }
.fr-basis-info { margin: 0 0 12px; padding: 8px 10px; border-left: 4px solid var(--fr-akzent); background: rgba(94, 242, 224, 0.08); border-radius: 6px; line-height: 1.45; }
.fr-kosten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 6px; }
.fr-kosten-titel { color: var(--fr-gedaempft); }
.fr-basis-pruefung { margin: 0 0 6px; color: var(--fr-gedaempft); line-height: 1.4; }
.fr-basis-grund { margin: 0 0 10px; color: var(--fr-fokus); line-height: 1.4; }
.fr-basis-grund:empty { display: none; }
.fr-basis-fuss { justify-content: flex-start; margin-top: 12px; }
@media (min-width: 900px) {
  .fr-basis-inhalt { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; }
}

.fr-basis-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Werkstatt: Kostüme */
/* Schmal als Block (nicht als Raster): nur so kann die Vorschau beim Blättern oben kleben —
   ein Rasterfeld hält ein klebendes Element in seiner eigenen Zeile fest. */
.fr-kostueme-inhalt { display: block; }
.fr-kostueme-figur {
  width: 220px;
  max-width: 70%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3566, #1a1838 70%);
}
.fr-kostueme-plaetze .fr-wahl { margin: 0 0 10px; }
.fr-kostuem-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; border-radius: 14px; line-height: 1.25; }
.fr-kostuem-zusatz { font-size: 0.8rem; color: var(--fr-gedaempft); }
.fr-chip[aria-checked="true"] .fr-kostuem-zusatz { color: var(--fr-akzent-text); }
/* Anfertigen bleibt unten in der Karte stehen — sonst läge der Knopf am Telefon weit unter der Wahl. */
.fr-kostueme-aktion {
  position: sticky;
  bottom: -20px;                      /* über den Innenabstand der Karte — darunter scheint nichts durch */
  z-index: 2;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1d2442;
  box-shadow: 0 -10px 18px rgba(8, 7, 22, 0.55);
}
.fr-kostueme-aktion .fr-basis-grund { color: var(--fr-text); margin-bottom: 8px; }
.fr-kostueme-aktion .fr-status:empty { display: none; }
.fr-kostueme-aktion::after {          /* deckt den Innenabstand unter dem klebenden Bereich */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  background: #161a30;
}
@media (min-width: 760px) {
  .fr-kostueme-inhalt { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
  .fr-kostueme-figur { width: 240px; max-width: none; }
}
/* Schmal: die Vorschau bleibt oben stehen, während man durch die Plätze blättert. */
@media (max-width: 759px) {
  /* top: −Innenabstand der Karte — sonst schaut darüber ein Streifen des gescrollten Inhalts durch */
  .fr-kostueme-vorschau { position: sticky; top: -20px; z-index: 2; padding: 20px 0 8px; background: #161a30; }
  .fr-kostueme-figur { width: 128px; }
}
.fr-karte-titel[tabindex="-1"]:focus { outline: none; }

/* Sternwarte: Karte */
.fr-gebiete { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fr-gebiet { padding: 10px 12px; border-radius: 12px; background: #1d2442; border-left: 4px solid var(--fr-akzent);
  display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.fr-landkarte-unter { margin-top: 16px; }
.fr-landkarte-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 900px) {
  .fr-landkarte-inhalt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .fr-landkarte-inhalt .fr-gebiete { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
}
.fr-fahnen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fr-fahne-eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.fr-fahnen-symbol { width: 18px; height: 22px; flex: 0 0 auto; }
.fr-fahne-titel { font-weight: 700; }
.fr-fahne-fach { color: var(--fr-gedaempft); font-size: 0.9rem; margin-right: auto; }
.fr-fahne-leer { color: var(--fr-gedaempft); }

/* Begleiter: Sprechblase über der Bühne, sein Bild an Tipps und Hinweisen und in der Basis */
.fr-blase {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  max-width: min(280px, 70%);
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(14, 18, 38, 0.9);
  border: 1px solid rgba(94, 242, 224, 0.55);
  color: var(--fr-text);
  font-size: 0.98rem;
  line-height: 1.35;
  pointer-events: none;
}
.fr-begleiter-bild { width: 34px; height: 34px; flex: 0 0 auto; }
.fr-rueckmeldung--begleiter { display: flex; align-items: flex-start; gap: 10px; }
.fr-rueckmeldung--begleiter > div { min-width: 0; }
.fr-begleiter-zeile { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--fr-text); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-blase:not([hidden]) { animation: fr-blase-auf 200ms ease-out; }
}
@keyframes fr-blase-auf { from { opacity: 0; transform: translateY(-90%); } to { opacity: 1; transform: translateY(-100%); } }

/* Einstellungen: Ton | Lesen und Sehen — nebeneinander, wenn Platz ist */
.fr-einstellungen-karte { max-width: 680px; }
.fr-einstellungen-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 12px 24px;
  margin: 4px 0 12px;
  text-align: left;
}
.fr-einstellungen-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; }
.fr-einstellungen-gruppe legend { padding: 0; margin-bottom: 4px; }
.fr-einstellungen-gruppe .fr-schalter { font-size: 1.05rem; }
.fr-e-unter { margin: 2px 0 6px; color: var(--fr-text); }
.fr-e-system { margin: 6px 0 0; color: var(--fr-gedaempft); font-size: 0.9rem; }
.fr-schalter input:disabled + span { opacity: 0.8; }

/* Weiche Übergänge: jede Schicht taucht kurz auf (nicht bei „Bewegung reduzieren"). */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-schicht:not([hidden]) > .fr-karte { animation: fr-auftauchen 220ms ease-out; }
}
@keyframes fr-auftauchen {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Leben im Bild: Rauch steigt, Magie glimmt, Lichter flackern — nur ohne „Bewegung reduzieren". */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-b-rauch { animation: fr-rauch 5s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-b-glimmen { animation: fr-glimmen 2.8s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-b-flackern { animation: fr-flackern 1.9s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-b-glut { animation: fr-glimmen 1.4s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-b-funkeln { animation: fr-glimmen 3.4s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-b-hupf { animation: fr-hupf 1.3s ease-in-out infinite; }
  html:not([data-fr-ruhig]) .fr-bau-flaeche--neu { animation: fr-gebaut 1.8s ease-out 1; }
}
@keyframes fr-rauch {
  0% { transform: translateY(4px); opacity: 0.55; }
  60% { opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0.35; }
}
@keyframes fr-glimmen { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes fr-flackern { 0%, 100% { opacity: 1; } 35% { opacity: 0.78; } 55% { opacity: 0.95; } 75% { opacity: 0.7; } }
@keyframes fr-hupf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fr-gebaut {
  0% { box-shadow: inset 0 0 0 3px rgba(94, 242, 224, 0.9), 0 0 0 0 rgba(94, 242, 224, 0.75); background: rgba(94, 242, 224, 0.3); }
  100% { box-shadow: inset 0 0 0 3px rgba(94, 242, 224, 0.75), 0 0 0 28px rgba(94, 242, 224, 0); background: rgba(94, 242, 224, 0.07); }
}

/* ------------------------------------------------------------------ Kleine Bildschirme */
@media (max-height: 520px), (max-width: 560px) {
  .fr-schicht { padding: 8px; }
  .fr-karte { padding: 14px 16px; border-radius: 14px; }
  .fr-karte-titel { font-size: 1.3rem; }
  .fr-start-text { margin-bottom: 8px; }
  /* Frage und Antworten (User 2026-10-14): kleinere Schrift, weniger Luft. Antworten 46 px hoch, damit sie
     auch während des Einblendens (scale 0.985) ≥ 44 px bleiben. */
  .fr-schicht--frage { padding: 6px; }
  .fr-frage-karte { padding: 10px 14px; }
  .fr-frage-kopf { gap: 6px 10px; margin-bottom: 2px; }
  .fr-stufe { min-width: 64px; padding: 3px 9px; font-size: 0.85rem; }
  .fr-frage-ort { font-size: 0.78rem; }
  .fr-frage-text { font-size: 1.02rem; margin: 6px 0 8px; line-height: 1.3; }
  .fr-kontext { padding: 8px 12px; font-size: 0.95rem; line-height: 1.45; }
  .fr-tueren { gap: 8px; }
  .fr-tuer { min-height: 46px; gap: 10px; padding: 7px 12px; border-radius: 28px 28px 10px 10px; font-size: 0.95rem; }
  .fr-form { width: 22px; height: 22px; }
  .fr-tuer-haken { font-size: 1.2rem; }
  .fr-aufgabe-anleitung { margin-bottom: 6px; font-size: 0.85rem; }
  .fr-paar, .fr-platz, .fr-teil { min-height: 46px; padding: 6px 10px; font-size: 0.92rem; gap: 8px; }
  .fr-paar-marke, .fr-paar-marke .fr-form { width: 22px; height: 22px; }
  .fr-platz-nummer { width: 28px; height: 28px; }
  .fr-zuordnen { gap: 6px 10px; }
  .fr-zuordnen-spalte, .fr-folge-plaetze { gap: 6px; }
  .fr-folge-vorrat { gap: 8px; margin-top: 10px; padding-top: 8px; }
  .fr-rueckmeldung { margin-top: 8px; padding: 7px 12px; font-size: 0.92rem; line-height: 1.4; }
  .fr-melden { margin-top: 8px; padding: 8px 10px; }
  .fr-frage-fuss { gap: 8px; margin-top: 8px; }
  .fr-frage-fuss .fr-knopf { min-height: 44px; padding: 8px 16px; font-size: 0.98rem; }
  .fr-steuerung-tasten { display: none; }
  .fr-gestalten-raster { grid-template-columns: minmax(0, 1fr); }
  .fr-gestalten-vorschau { width: 140px; margin: 0 auto; }
  .fr-profil-liste { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .fr-profil-figur { width: 72px; height: 72px; }
  .fr-farbe { width: 44px; height: 44px; }
  .fr-gestalten-fuss { bottom: -14px; margin: 8px -16px -14px; padding: 10px 16px 12px; }
  .fr-start-fuss { bottom: -14px; margin: 8px -16px -14px; padding: 8px 16px 10px; }
  .fr-start-fuss .fr-knopf { min-height: 44px; padding: 8px 14px; }
  .fr-los-hinweis { display: none; }
  .fr-start-knoepfe { margin-left: auto; }
  .fr-basis-vorschau img { height: 110px; }
  .fr-basis-detail { padding: 12px; }
  .fr-kostueme-vorschau { top: -14px; padding-top: 14px; }
  .fr-kostueme-aktion { bottom: -14px; }
  .fr-basis-gebaeude { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-heim-kacheln { gap: 10px; }
  .fr-kachel { min-height: 150px; padding: 10px 10px 12px; border-radius: 16px; }
  .fr-kachel-bild { min-height: 64px; }
  .fr-kachel-bild .fr-chip-symbol--welt { width: 72px; height: 72px; }
  .fr-kachel-bild--basis { max-height: 84px; }
  .fr-kachel-titel { font-size: 1.2rem; }
  .fr-kachel-text { font-size: 0.85rem; }
  .fr-kachel-marke { top: 6px; right: 6px; font-size: 0.75rem; padding: 3px 8px; }
}
/* Telefon quer: die Kacheln müssen ohne Scrollen ganz zu sehen sein — Marke und Überschrift treten
   zurück (die Überschrift bleibt für Screenreader). */
@media (max-height: 520px) {
  .fr-heim-karte .fr-marke { display: none; }
  .fr-heim-karte .fr-karte-titel {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .fr-heim-karte .fr-wer { margin-bottom: 8px; padding-bottom: 8px; }
  .fr-kachel { min-height: 0; padding: 8px 10px 10px; gap: 2px; }
  .fr-kachel-bild { min-height: 0; flex: 0 0 auto; }
  .fr-kachel-bild .fr-chip-symbol--welt { width: 56px; height: 56px; }
  .fr-kachel-bild--basis { height: 64px; max-height: 64px; }
  .fr-heim-fuss { margin-top: 6px; }
  .fr-heim-karte .fr-status:empty { display: none; }
  .fr-gebaeude-chip { justify-content: space-between; padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-tuer, .fr-profil, .fr-paar, .fr-platz, .fr-teil { transition: none; }
}

/* ------------------------------------------------------------------ Lesen und Sehen (E5b)
 * Attribute an <html>, gesetzt von fr-ui.js (`darstellung`): aus den Einstellungen der Figur und
 * aus dem, was das Gerät vorgibt. Die Größen der App stehen in rem — die Schrift wächst überall mit. */
html[data-fr-schrift="1"] { font-size: 118.75%; }
html[data-fr-schrift="2"] { font-size: 137.5%; }

/* Mehr Abstand zwischen Buchstaben, Wörtern und Zeilen (Lesehilfe). Die Schrift bleibt Andika —
 * eine Schrift für Leseanfänger (eindeutige Formen von b/d, I/l). */
html[data-fr-abstand] body { letter-spacing: 0.06em; word-spacing: 0.14em; }
html[data-fr-abstand] :is(.fr-start-text, .fr-frage-text, .fr-kontext, .fr-tuer, .fr-paar, .fr-platz, .fr-teil, .fr-rueckmeldung, .fr-blase) { line-height: 1.75; }

/* Starker Kontrast: undurchsichtige Karten, helle Linien, kein gedämpfter Text */
html[data-fr-kontrast] {
  --fr-grund: #000000;
  --fr-text: #ffffff;
  --fr-gedaempft: #eef1f8;
  --fr-flaeche: #05070f;
  --fr-karte: #05070f;
  --fr-linie: #c3cbe4;
}
html[data-fr-kontrast] .fr-schicht { background: rgba(0, 0, 0, 0.82); }
html[data-fr-kontrast] .fr-karte { border-width: 2px; }
html[data-fr-kontrast] .fr-tuer { background: #10101c; border: 3px solid #eef1f8; }
html[data-fr-kontrast] .fr-tuer--richtig { background: #062b29; border-color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-tuer--versiegelt { opacity: 0.6; border-color: #ff8fa3; }
html[data-fr-kontrast] :is(.fr-paar, .fr-platz, .fr-teil) { background: #10101c; border-width: 3px; }
html[data-fr-kontrast] .fr-paar:not([data-form]), html[data-fr-kontrast] :is(.fr-platz, .fr-teil) { border-color: #eef1f8; }
html[data-fr-kontrast] :is(.fr-paar--richtig, .fr-platz--richtig) { background: #062b29; }
html[data-fr-kontrast] .fr-paar.fr-paar--markiert { border-color: var(--fr-fokus); }
html[data-fr-kontrast] .fr-stufe:disabled:not([aria-checked="true"]) { opacity: 0.7; }
html[data-fr-kontrast] :is(.fr-knopf, .fr-chip, .fr-wort, .fr-profil) { border-width: 2px; border-color: #c3cbe4; }
html[data-fr-kontrast] .fr-knopf--haupt { border-color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-melden-link { opacity: 1; color: #ffffff; text-decoration: underline; }
html[data-fr-kontrast] .fr-rueckmeldung { background: #10101c; border-left-width: 6px; }
html[data-fr-kontrast] .fr-blase { background: #000000; color: #ffffff; border: 2px solid #ffffff; }
html[data-fr-kontrast] .fr-hud-feld { background: #000000; border: 2px solid #ffffff; }

/* Weniger Bewegung — auch, wenn nur die Figur es eingestellt hat (die Animationen oben sind
 * ohnehin an `html:not([data-fr-ruhig])` gebunden). */
html[data-fr-ruhig] :is(.fr-tuer, .fr-profil, .fr-paar, .fr-platz, .fr-teil) { transition: none; }
html[data-fr-ruhig] :is(.fr-tuer, .fr-paar, .fr-platz, .fr-teil):active { transform: none; }

/* ------------------------------------------------------------------ Spielstand sichern und übernehmen (E5c) */
.fr-sichern-karte { max-width: 760px; }
.fr-sichern-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 22px;
  align-items: center;
  margin: 4px 0 14px;
}
.fr-sichern-qr { margin: 0; text-align: center; }
/* Der QR-Code auf Weiß und groß genug zum Scannen (Ruhezone im Bild selbst) */
.fr-sichern-qr img { display: block; width: min(100%, 22rem); aspect-ratio: 1; margin: 0 auto 8px; border-radius: 8px;
  background: #ffffff; image-rendering: pixelated; }
.fr-sichern-qr figcaption { color: var(--fr-gedaempft); font-size: 0.9rem; line-height: 1.4; }
.fr-sichern-wege { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.fr-sichern-wege .fr-status { margin: 0; }
@media (max-width: 640px) {
  .fr-sichern-inhalt { grid-template-columns: minmax(0, 1fr); }
}
.fr-u-figur {
  position: relative;
  width: 120px;
  aspect-ratio: 1;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a3566, #1a1838 70%);
}
.fr-u-figur .fr-figurbild { width: 100%; height: 100%; }
.fr-u-beschreibung { margin: 0 0 10px; font-weight: 700; color: var(--fr-text); }
.fr-s-code-frage { margin: 0 0 12px; }
.fr-s-code-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-s-code-zeile .fr-name-feld { flex: 1 1 12rem; min-width: 0; }
.fr-start-sichern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed var(--fr-linie);
  background: rgba(255, 255, 255, 0.05);
}
.fr-start-sichern p { margin: 0; flex: 1 1 16rem; color: var(--fr-text); }
.fr-e-sichern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--fr-linie); text-align: left; }
.fr-e-sichern > span { color: var(--fr-gedaempft); }
/* Alle Fragen aufs Gerät (Einstellungen, User 2026-10-30) */
.fr-e-vorrat { margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--fr-linie); text-align: left; }
.fr-e-vorrat[hidden] { display: none; }
.fr-e-vorrat .fr-wahl-titel { margin: 0 0 4px; }
.fr-e-vorrat-text { margin: 0 0 8px; color: var(--fr-gedaempft); line-height: 1.4; }
.fr-e-vorrat-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-e-vorrat .fr-vorrat-balken { display: block; margin-top: 8px; }
.fr-e-vorrat-status { margin: 6px 0 0; }
.fr-e-vorrat-status:empty { display: none; }
.fr-ende-pause { justify-content: center; margin-top: 4px; }

/* ------------------------------------------------------------------ Gerät: Querformat und App (fr-geraet.js)
 * „Dreh dein Gerät quer": oben in der Mitte, über den Schichten, zwischen Kristallen und Pause-Knopf.
 * „Fragenreich als App": ein Kasten oben auf der Hauptansicht (wie der Sicherungshinweis). */
.fr-drehen {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 64px;
  right: 64px;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: rgba(12, 10, 26, 0.9);
  border: 1px solid rgba(94, 242, 224, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.fr-drehen p { margin: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.fr-drehen-symbol {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--fr-akzent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-drehen-symbol { animation: fr-drehen 2.6s ease-in-out infinite; }
}
@keyframes fr-drehen {
  0%, 30% { transform: rotate(0deg); }
  50%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

.fr-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(94, 242, 224, 0.45);
  background: rgba(94, 242, 224, 0.07);
}
.fr-app-symbol { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; }
.fr-app-text { flex: 1 1 16rem; min-width: 0; }
.fr-app-text p { margin: 0 0 4px; color: var(--fr-text); line-height: 1.4; }
.fr-app-text p:last-child { margin-bottom: 0; }
.fr-app-titel { font-weight: 700; font-size: 1.05rem; }
.fr-app-klein { font-size: 0.9rem; }
.fr-app-text .fr-app-klein { color: var(--fr-gedaempft); }
.fr-app-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.fr-teilen-symbol {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-fr-kontrast] .fr-app { background: #05070f; border-width: 2px; border-color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-drehen { background: #000000; border: 2px solid #ffffff; }

/* Vorrat: Ladestatus der Fragenkataloge (Themenliste, Aktualisierung) */
/* Eigene Klasse (bis 2026-10-30 `.fr-vorrat` — das gab auch dem Ertrag im Abschluss Rahmen und Spalte). */
.fr-ladestatus { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--fr-fokus); border-radius: 12px; }
.fr-ladestatus[hidden], .fr-vorrat-balken[hidden] { display: none; }
.fr-vorrat-text { color: var(--fr-fokus); font-weight: 700; }
.fr-vorrat-balken { width: 100%; height: 10px; }

/* ------------------------------------------------------------------ Die Geschichte vom Lichtgeist (Plan FRAGENREICH_STORY_PLAN.md)
 * Erzählbühne: Hochformat Bild oben, Text darunter; Querformat (Handy) Bild links, Text rechts. Der große
 * „Weiter"-Knopf sitzt unten rechts (Daumen). Der Text scrollt, wenn die Schrift groß gestellt ist —
 * nichts wird abgeschnitten. */
.fr-kachel--logbuch {
  flex-direction: row; justify-content: center; align-items: center; gap: 12px;
  width: 100%; min-height: 0; margin-top: 12px; padding: 10px 16px;
  background: linear-gradient(160deg, #2c2a55 0%, #3b3768 100%);
}
.fr-kachel--logbuch .fr-kachel-titel { font-size: 1.15rem; }
.fr-kachel--logbuch .fr-kachel-marke { position: static; }
.fr-story-karte { max-width: 920px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.fr-story-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fr-story-kopf .fr-karte-titel { margin: 0; font-size: 1.35rem; }
.fr-story-kopf .fr-marke { margin: 0 0 2px; }
.fr-story-buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.fr-story-bild { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 34vh; object-fit: cover; border-radius: 14px; border: 1px solid var(--fr-linie); background: #2d2a5c; }
.fr-story-text {
  min-height: 7.5rem; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); font-size: 1.2rem; line-height: 1.55; text-align: left;
}
.fr-story-satz { margin: 0 0 0.4em; }
.fr-story-satz:last-child { margin-bottom: 0; }
.fr-story-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
/* Hochformat: die Seitenpunkte oben in eigener Zeile, darunter Zurück · Vorlesen · Weiter (passt auch bei großer Schrift). */
.fr-story-punkte { order: -1; flex: 1 0 100%; justify-content: center; flex-wrap: wrap; margin: 0; }
.fr-story-fuss .fr-knopf--haupt { min-width: 8.5rem; min-height: 56px; font-size: 1.15rem; margin-left: auto; }
.fr-sternbild { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.fr-stern { fill: var(--fr-gedaempft); opacity: 0.45; }
.fr-stern--hell { fill: #fff3cf; opacity: 1; filter: drop-shadow(0 0 6px #ffd27f); }
.fr-sternbild-linie { stroke: #ffd27f; stroke-width: 2; opacity: 0.6; fill: none; }
.fr-logbuch-stern { margin: 4px 0 8px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.fr-logbuch-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-logbuch-eintrag {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  min-height: 56px; padding: 10px 14px; border: 2px solid var(--fr-linie); border-radius: 14px;
  background: var(--fr-flaeche); color: var(--fr-text); font: inherit; text-align: left; cursor: pointer;
}
.fr-logbuch-eintrag:hover, .fr-logbuch-eintrag--neu { border-color: var(--fr-akzent); }
.fr-logbuch-nr { color: var(--fr-gedaempft); font-size: 0.85rem; }
.fr-logbuch-titel { font-size: 1.1rem; font-weight: 700; }
.fr-logbuch-eintrag .fr-kachel-marke { top: 10px; right: 10px; }
@media (orientation: landscape) and (max-height: 520px) {
  .fr-story-karte { padding: 10px 14px; gap: 8px; }
  .fr-story-kopf .fr-marke { display: none; }
  .fr-story-kopf .fr-karte-titel { font-size: 1.1rem; }
  .fr-story-buehne { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: stretch; }
  .fr-story-bild { max-height: none; height: 100%; aspect-ratio: auto; }
  .fr-story-rechts { max-height: calc(100vh - 150px); }
  .fr-story-text { font-size: 1.05rem; line-height: 1.45; min-height: 0; }
  .fr-story-fuss .fr-knopf--haupt { min-height: 48px; }
  .fr-story-punkte { order: 0; flex: 1 1 auto; margin: 0 auto; }
  .fr-kachel--logbuch { margin-top: 6px; padding: 6px 12px; }
}
html[data-fr-abstand] .fr-story-text { line-height: 1.85; }
html[data-fr-kontrast] .fr-story-text { background: #10101c; border: 2px solid #eef1f8; }
html[data-fr-kontrast] .fr-logbuch-eintrag { border-width: 3px; border-color: #eef1f8; }

/* ------------------------------------------------------------------ Die Karte als Reiseweg (Plan FRAGENREICH_STORY_PLAN.md, S3) */
.fr-heim-klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.fr-heim-klein .fr-kachel--logbuch { margin-top: 0; }
.fr-wahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fr-wahl-kopf .fr-wahl-titel { margin: 0; }
.fr-wahl-extras { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fr-karte-flaeche { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.fr-karte-flaeche > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fr-karte-ort {
  position: absolute; display: block; padding: 0; border: 2px solid transparent; border-radius: 18px;
  background: transparent; cursor: pointer; min-width: 48px; min-height: 48px;
}
.fr-karte-ort:hover { border-color: rgba(94, 242, 224, 0.6); }
.fr-karte-ort[aria-pressed="true"] { border-color: var(--fr-akzent); background: rgba(94, 242, 224, 0.08); }
.fr-karte-marke {
  position: absolute; width: 8%; height: auto; transform: translate(-50%, -100%); pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(94, 242, 224, 0.8));
}
html:not([data-fr-ruhig]) .fr-karte-marke { transition: left 0.6s ease-in-out, top 0.6s ease-in-out; }
.fr-karte-funke {
  position: absolute; width: 3.2%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: #fff3cf; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 5px #ffd27f);
}
html:not([data-fr-ruhig]) .fr-karte-funke { animation: fr-funke-glimmer 2s ease-in-out infinite; }
@keyframes fr-funke-glimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.fr-gebiet { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fr-gebiet--gewaehlt { background: #27305a; box-shadow: 0 0 0 2px var(--fr-akzent); }
.fr-gebiet-funke { color: #ffd27f; font-weight: 700; }
.fr-gebiet .fr-knopf { margin-top: 4px; }
@media (max-height: 520px) { .fr-heim-klein { margin-top: 6px; gap: 6px; } }
html[data-fr-kontrast] .fr-karte-ort { border-color: #c3cbe4; }
html[data-fr-kontrast] .fr-karte-ort[aria-pressed="true"] { border-color: var(--fr-akzent); border-width: 3px; }

/* Erinnerungsfunke im Abschluss (Geschichte, Etappe S4) */
.fr-ende-funke { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 210, 127, 0.12); color: #ffe7b0; line-height: 1.4; }
html[data-fr-kontrast] .fr-ende-funke { background: #10101c; border: 2px solid #ffe7b0; color: #ffffff; }

/* Mitlesen: der gerade vorgelesene Satz (Geschichte) */
.fr-story-satz--liest { background: rgba(94, 242, 224, 0.18); border-radius: 8px; box-shadow: -6px 0 0 rgba(94, 242, 224, 0.18), 6px 0 0 rgba(94, 242, 224, 0.18); }
.fr-story-fuss .fr-rund[aria-pressed="true"] { border-color: var(--fr-akzent); color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-story-satz--liest { background: #0b3d3a; outline: 2px solid #eef1f8; }

/* ------------------------------------------------------------------ Entscheidungen, Name, Aussehen (Geschichte, S5) */
.fr-story-rechts { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: 40vh; overflow-y: auto; }
.fr-story-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fr-story-wahlknopf { min-height: 56px; font-size: 1.1rem; white-space: normal; }
.fr-story-wahlknopf--gewaehlt { border-color: var(--fr-akzent); background: rgba(94, 242, 224, 0.16); }
.fr-story-wahlknopf:disabled:not(.fr-story-wahlknopf--gewaehlt) { opacity: 0.55; }
.fr-story-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fr-story-name input { flex: 1 1 10rem; min-width: 0; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--fr-linie); background: var(--fr-flaeche); color: var(--fr-text); font: inherit; }
.fr-story-name .fr-status { flex: 1 0 100%; margin: 0; }
.fr-logbuch-leitsatz { margin: 0 0 8px; color: #ffe7b0; font-weight: 700; }
.fr-aussehen { margin: 8px 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.fr-aussehen-zeile { display: flex; align-items: center; gap: 14px; }
.fr-aussehen-bild { width: 84px; height: 84px; flex: 0 0 auto; }
.fr-aussehen-wahl { flex: 1 1 auto; min-width: 0; }
.fr-chip--gewaehlt { border-color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-story-wahlknopf--gewaehlt { background: #0b3d3a; border-width: 3px; }

/* Sternengeschichten im Logbuch (Geschichte, S6) */
.fr-zusatz { margin: 14px 0 6px; }
.fr-zusatz .fr-start-text { margin: 0 0 8px; }
.fr-zusatz-eintrag:disabled { opacity: 0.6; cursor: default; border-style: dashed; }

/* Ton testen (Einstellungen) */
.fr-tontest { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.fr-tontest-status { margin: 0; white-space: pre-line; font-size: 0.9rem; line-height: 1.4; }
.fr-tontest-status:empty { display: none; }

.fr-nav { display: none; }                  /* nur auf dem Handy (unten) */
/* ------------------------------------------------------------------ Handy kompakt + feste Navigation (User 2026-10-28)
 * „Mehr Inhalt auf dem Handy": kleinere Titelleisten, minimal kleinere Schrift (alles in rem — ein Wert skaliert die App), weniger
 * Abstand. Dazu außerhalb der Expeditionen immer sichtbare Symbole für Expedition, Karte, Basis und Logbuch (fr-ui.js `zeichneNav`):
 * Hochformat unten, Querformat links. Gilt auf dem Telefon, nicht am Tablet/Schreibtisch. */
@media (max-width: 640px), (max-height: 520px) {
  html { font-size: 93.75%; }
  html[data-fr-schrift="1"] { font-size: 111.25%; }
  html[data-fr-schrift="2"] { font-size: 128.75%; }
  .fr-schicht { padding: 6px; }
  .fr-karte { padding: 8px 10px; border-radius: 12px; }
  .fr-marke { display: none; }
  .fr-story-kopf .fr-marke { display: block; }
  .fr-karte-titel { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.15; }
  .fr-start-text { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.35; }
  .fr-status { margin-top: 6px; }
  .fr-wahl { margin: 8px 0; }
  .fr-wahl-titel { margin-bottom: 4px; font-size: 0.88rem; }
  .fr-chips { gap: 6px; }
  .fr-chip { min-height: 42px; padding: 5px 12px; font-size: 0.92rem; }
  #fr-welten .fr-chip { min-height: 46px; }
  .fr-chip-symbol { width: 22px; height: 22px; }
  .fr-chip-symbol--welt { width: 28px; height: 28px; }
  .fr-knopf { min-height: 44px; padding: 6px 14px; font-size: 0.95rem; }
  .fr-schalter { min-height: 40px; }
  .fr-start-knoepfe { gap: 8px; }
  .fr-klein .fr-start-knoepfe { margin-top: 8px; }
  .fr-wer { margin: 0 0 8px; padding-bottom: 8px; gap: 8px; }
  .fr-heim-karte .fr-karte-titel { margin-bottom: 6px; }
  .fr-heim-klein { display: none; }                 /* Karte und Logbuch stehen in der Navigation */
  .fr-heim-kacheln { gap: 8px; }
  .fr-kachel { min-height: 118px; padding: 8px 8px 10px; }
  .fr-basis-kopf { gap: 6px 10px; margin-bottom: 6px; }
  .fr-basis-inhalt { gap: 8px; }
  .fr-bilanz div { padding: 8px; }
  .fr-bilanz dd { font-size: 1.3rem; }
  .fr-begleiter-zeile { margin-bottom: 6px; }
  .fr-story-karte { padding: 8px 10px; gap: 8px; }
  .fr-aussehen { margin: 6px 0 8px; padding: 8px; }
  .fr-logbuch-eintrag { min-height: 48px; padding: 6px 10px; }
  /* Die klebenden Fußleisten reichen bis an den kleineren Innenrand der Karte. */
  .fr-start-fuss, .fr-gestalten-fuss { bottom: -8px; margin: 6px -10px -8px; padding: 6px 10px 8px; }
  .fr-kostueme-aktion { bottom: -8px; }
  .fr-kostueme-vorschau { top: -8px; padding-top: 8px; }

  /* Die Navigation */
  .fr-nav:not([hidden]) { display: flex; }
  .fr-nav {
    position: fixed; z-index: 7; align-items: stretch; justify-content: space-around; gap: 2px;
    background: #161a30; border: 0 solid var(--fr-linie);
  }
  .fr-nav-knopf {
    position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 48px; min-height: 48px; padding: 3px 2px; border: 0; border-radius: 10px; background: transparent;
    color: var(--fr-gedaempft); font: inherit; font-size: 0.66rem; font-weight: 700; line-height: 1.1; cursor: pointer;
  }
  .fr-nav-knopf svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .fr-nav-knopf--aktiv { color: var(--fr-akzent); background: rgba(94, 242, 224, 0.12); }
  .fr-nav-punkt {
    position: absolute; top: 4px; right: calc(50% - 22px); width: 10px; height: 10px; border-radius: 50%;
    background: #ffd27f; box-shadow: 0 0 0 2px #161a30;
  }
  html[data-fr-kontrast] .fr-nav { background: #000000; border-color: #ffffff; }
  html[data-fr-kontrast] .fr-nav-knopf { color: #ffffff; }
  html[data-fr-kontrast] .fr-nav-knopf--aktiv { color: var(--fr-akzent); outline: 2px solid var(--fr-akzent); }
}
@media (max-width: 640px) and (orientation: portrait), (max-height: 520px) and (orientation: portrait) {
  .fr-nav { left: 0; right: 0; bottom: 0; height: calc(54px + env(safe-area-inset-bottom, 0px)); padding: 3px 6px env(safe-area-inset-bottom, 0px); border-top-width: 1px; }
  body.fr-nav-offen .fr-schicht { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  .fr-nav {
    top: 0; bottom: 0; left: 0; width: calc(56px + env(safe-area-inset-left, 0px)); flex-direction: column; justify-content: center;
    padding: 6px 3px 6px calc(3px + env(safe-area-inset-left, 0px)); border-right-width: 1px;
  }
  .fr-nav-knopf { flex: 0 0 auto; width: 100%; font-size: 0.6rem; }
  .fr-nav-punkt { right: 6px; }
  body.fr-nav-offen .fr-schicht { padding-left: calc(62px + env(safe-area-inset-left, 0px)); }
}
/* Der Hinweis „Dreh dein Gerät quer" liegt oben über den Schichten — solange er da ist, rutscht der Inhalt darunter. */
@media (max-width: 640px), (max-height: 520px) {
  body:has(#fr-drehen:not([hidden])) .fr-schicht { padding-top: 54px; }
  .fr-drehen { top: 6px; padding: 2px 2px 2px 10px; }
  .fr-drehen p { font-size: 0.82rem; }
}
@media (max-width: 640px), (max-height: 520px) {
  .fr-logbuch-stern { padding: 2px; margin: 2px 0 4px; }
  .fr-sternbild { max-width: 300px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .fr-sternbild { max-height: 100px; }
}

/* Die Kopfleiste mit Figur, Klasse, Bausteinen und Kristallen (Startansicht) und der Vorrat in den Titelzeilen: auf dem Handy flach,
   eine Zeile statt drei (User 2026-10-28: „vor allem in der Höhe reduzieren"). */
@media (max-width: 640px), (max-height: 520px) {
  .fr-wer { flex-wrap: nowrap; gap: 4px; margin: -2px 0 6px; padding-bottom: 6px; }       /* eine Zeile: der Name gibt nach, nichts bricht um */
  .fr-wer-figur { width: 30px; height: 30px; }
  #fr-wer-vorrat { padding: 0 2px; border-color: transparent; }
  .fr-wer-text { flex: 1 1 auto; min-width: 0; margin-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
  #fr-wer-vorrat, #fr-basis-vorrat, #fr-kostueme-vorrat {
    flex-direction: row; flex-wrap: nowrap; flex: 0 0 auto; align-items: center; gap: 4px 8px; margin: 0; padding: 1px 7px; border-radius: 10px; font-size: 0.82rem;
  }
  .fr-wer .fr-symbol, #fr-basis-vorrat .fr-symbol, #fr-kostueme-vorrat .fr-symbol { width: 15px; height: 15px; }
  .fr-wer .fr-symbol--kristall, #fr-basis-vorrat .fr-symbol--kristall, #fr-kostueme-vorrat .fr-symbol--kristall { width: 11px; }
  .fr-wer .fr-rund { flex: 0 0 auto; width: 30px; height: 30px; }
  .fr-wer .fr-rund svg { width: 18px; height: 18px; }
  .fr-wer .fr-knopf--klein { flex: 0 0 auto; min-height: 30px; padding: 2px 6px; font-size: 0.72rem; border-radius: 9px; }
}

/* ------------------------------------------------------------------ Stationen der Welten auf der Karte (User 2026-10-29) */
.fr-station-weg { filter: drop-shadow(0 0 3px rgba(255, 210, 127, 0.7)); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fr-ruhig]) .fr-station--jetzt { animation: fr-station-puls 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes fr-station-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.fr-stationen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.fr-stationen-punkte { display: inline-flex; gap: 5px; }
.fr-station-punkt { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #8a77b6; background: transparent; }
.fr-station-punkt--fertig { background: #ffcf7a; border-color: #ffcf7a; }
.fr-station-punkt--jetzt { border-color: var(--fr-akzent); box-shadow: 0 0 0 2px rgba(94, 242, 224, 0.25); }
.fr-stationen-text { font-size: 0.88rem; color: var(--fr-gedaempft); }
.fr-stationen--alle .fr-stationen-text { color: #ffe7b0; }
.fr-start-station { margin: 0 0 8px; color: var(--fr-gedaempft); font-size: 0.92rem; }
.fr-start-station:empty { display: none; }
.fr-start-strecke { margin: 0 0 8px; color: #ffcf7a; font-weight: 700; font-size: 0.95rem; }
.fr-welt-eintrag:disabled { opacity: 0.6; cursor: default; border-style: dashed; }
.fr-ende-station { background: rgba(94, 242, 224, 0.1); color: #c8fff8; }
html[data-fr-kontrast] .fr-station-punkt--fertig { background: #ffffff; border-color: #ffffff; }

/* ------------------------------------------------------------------ Kompakte Auswahl: Ort · Klasse · Fach (User 2026-10-29) */
.fr-auswahl { display: flex; gap: 8px; margin: 8px 0 4px; }
.fr-auswahl-knopf {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 6px 28px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  border-radius: 12px;
  border: 1px solid var(--fr-linie);
  background: #1d2442;
  color: var(--fr-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fr-auswahl-knopf[hidden] { display: none; }
.fr-auswahl-knopf:hover, .fr-auswahl-knopf--offen { border-color: var(--fr-akzent); }
.fr-auswahl-knopf--offen { background: #232c52; }
.fr-auswahl-knopf::after { content: "\25BE"; position: absolute; right: 10px; top: 50%; margin-top: -0.6em; color: var(--fr-gedaempft); }
.fr-auswahl-knopf--offen::after { content: "\25B4"; color: var(--fr-akzent); }
.fr-auswahl-label { font-size: 0.74rem; line-height: 1.2; color: var(--fr-gedaempft); }
.fr-auswahl-wert { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; line-height: 1.25; }
html[data-fr-kontrast] .fr-auswahl-knopf { border-width: 3px; border-color: #eef1f8; }
@media (max-width: 640px), (max-height: 520px) {
  .fr-auswahl { gap: 6px; margin: 4px 0 2px; }
  .fr-auswahl-knopf { min-height: 42px; padding: 4px 22px 4px 9px; border-radius: 10px; }
  .fr-auswahl-knopf::after { right: 7px; }
  .fr-auswahl-wert { font-size: 0.9rem; }
}

/* ------------------------------------------------------------------ Fundstücke und Sammlung (Erweiterungsplan X3) */
.fr-ende-fund { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(127, 245, 255, 0.1); border: 1px solid rgba(127, 245, 255, 0.35); }
.fr-ende-fund[hidden] { display: none; }
.fr-ende-fund-bild { width: 64px; height: 64px; flex: 0 0 auto; }
.fr-ende-fund-text { flex: 1 1 200px; min-width: 0; }
.fr-ende-fund-titel { margin: 0 0 2px; font-weight: 700; color: #c8fff8; }
.fr-ende-fund-fakt { margin: 0; line-height: 1.4; }
.fr-ende-fund-voll { margin: 6px 0 0; color: #ffe7b0; font-weight: 700; }
html[data-fr-kontrast] .fr-ende-fund { background: #10101c; border: 2px solid #ffffff; }
.fr-logbuch-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.fr-sammlung-welt { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 1.05rem; }
.fr-sammlung-abzeichen { width: 32px; height: 32px; }
.fr-funde-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.fr-fund { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; padding: 8px 4px; border-radius: 12px;
  border: 1px solid var(--fr-linie); background: #1d2442; color: var(--fr-text); font: inherit; cursor: pointer; }
.fr-fund img { width: 48px; height: 48px; }
.fr-fund-name { font-size: 0.8rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.fr-fund:hover:not(:disabled) { border-color: var(--fr-akzent); }
.fr-fund--offen { cursor: default; opacity: 0.75; }
.fr-fund--neu { border-color: #ffe7b0; box-shadow: 0 0 0 2px rgba(255, 231, 176, 0.35); }
.fr-sammlung-detail { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px; background: #232c52; }
.fr-sammlung-detail[hidden] { display: none; }
.fr-sammlung-bild { width: 96px; height: 96px; flex: 0 0 auto; }
.fr-sammlung-info { flex: 1 1 220px; min-width: 0; }
.fr-sammlung-art { margin: 2px 0 6px; color: var(--fr-gedaempft); font-size: 0.9rem; }
.fr-sammlung-fakt { margin: 0 0 8px; line-height: 1.45; }
html[data-fr-kontrast] .fr-fund, html[data-fr-kontrast] .fr-sammlung-detail { border: 2px solid #eef1f8; background: #10101c; }
@media (max-width: 640px), (max-height: 520px) {
  .fr-funde-raster { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .fr-fund { min-height: 80px; padding: 6px 2px; }
  .fr-fund img { width: 40px; height: 40px; }
  .fr-sammlung-bild { width: 72px; height: 72px; }
}

/* ------------------------------------------------------------------ Schatzsuche (Erweiterungsplan X4) */
.fr-schatzsuche { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 10px 0 0; padding: 12px 16px;
  border-radius: 14px; border: 2px solid #ffcf7a; background: linear-gradient(135deg, rgba(255, 207, 122, 0.22), rgba(255, 207, 122, 0.06));
  color: var(--fr-text); font: inherit; text-align: left; cursor: pointer; }
.fr-schatzsuche[hidden] { display: none; }
.fr-schatzsuche:hover { background: rgba(255, 207, 122, 0.28); }
.fr-schatzsuche-titel { font-weight: 700; font-size: 1.1rem; color: #ffe7b0; }
.fr-schatzsuche-text { font-size: 0.92rem; }
html[data-fr-kontrast] .fr-schatzsuche { background: #10101c; border-color: #ffffff; }
@media (max-width: 640px), (max-height: 520px) {
  .fr-schatzsuche { margin-top: 6px; padding: 8px 12px; }
}

/* ------------------------------------------------------------------ Geheimraum (Erweiterungsplan X5) */
.fr-raum-bild { display: block; width: 100%; max-height: 180px; object-fit: contain; margin: 0 0 8px; border-radius: 12px; }
.fr-raum-ergebnis[hidden] { display: none; }
.fr-raum-lohn { margin: 0 0 8px; font-weight: 700; color: #ffe7b0; }
/* Mini-Spiel im Geheimraum (2026-11-08, fr-minispiel-ansicht.js): Fläche 16:9, so groß es Breite und Höhe zulassen. */
.fr-raum-bild[hidden] { display: none; }
.fr-minispiel[hidden] { display: none; }
.fr-minispiel { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 4px; }
.fr-minispiel-flaeche {
  display: block;
  width: min(100%, 640px, calc((100dvh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.fr-minispiel-flaeche:focus-visible { outline: 3px solid var(--fr-fokus); outline-offset: 3px; }
.fr-minispiel-steuerung { margin: 0; color: var(--fr-gedaempft); font-size: 0.92rem; text-align: center; }
.fr-minispiel-ueberspringen[hidden] { display: none; }
.fr-karte:has(> .fr-minispiel:not([hidden])) { max-width: min(96vw, 700px); }
@media (max-width: 640px), (max-height: 520px) {
  .fr-raum-bild { max-height: 110px; }
}

/* ------------------------------------------------------------------ Bewohner und Aufträge (Erweiterungsplan X6) */
.fr-bewohner { margin: 12px 0 0; }
.fr-bewohner-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.fr-bewohner-eintrag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #1d2442; border: 1px solid var(--fr-linie); }
.fr-bewohner-eintrag--fertig { border-color: #ffcf7a; box-shadow: 0 0 0 2px rgba(255, 207, 122, 0.3); }
.fr-bewohner-bild { width: 52px; height: 52px; flex: 0 0 auto; }
.fr-bewohner-bild--klein { width: 36px; height: 36px; }
.fr-bewohner-text { flex: 1 1 auto; min-width: 0; }
.fr-bewohner-name { margin: 0; font-weight: 700; font-size: 0.92rem; }
.fr-bewohner-auftrag { margin: 2px 0; line-height: 1.35; }
.fr-bewohner-stand { margin: 0; font-size: 0.85rem; color: var(--fr-gedaempft); }
.fr-bewohner-eintrag--fertig .fr-bewohner-stand { color: #ffe7b0; font-weight: 700; }
.fr-bewohner-balken { width: 100%; height: 8px; }
.fr-bewohner-abholen { flex: 0 0 auto; }
.fr-bewohner-gruss { margin: 4px 0; }
html[data-fr-kontrast] .fr-bewohner-eintrag { border: 2px solid #eef1f8; background: #10101c; }
@media (max-width: 640px), (max-height: 520px) {
  .fr-bewohner-bild { width: 40px; height: 40px; }
  .fr-bewohner-eintrag { flex-wrap: wrap; padding: 6px 8px; }
}

/* ------------------------------------------------------------------ Basis, Karte und Abschluss kompakt (User 2026-10-30)
 * Basis: noch nicht erreichte Stufen klappt ein Knopf auf; am Handy quer stehen Bild + Gebäude links und das gewählte Gebäude
 * rechts, ohne dass die Seite scrollt (die Spalte rechts scrollt in sich, falls ein Text einmal länger wird). Karte: nur der
 * gewählte Ort wird beschrieben, quer daneben. Abschluss: die Bilanz in einer Zeile, Hinweise schmaler. */
.fr-stufen-mehr {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -6px 0 10px; padding: 4px 10px;
  border: 1px dashed var(--fr-linie); border-radius: 10px; background: transparent; color: var(--fr-akzent);
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.fr-stufen-mehr[hidden] { display: none; }
.fr-stufen-mehr::after { content: "\25BE"; }
.fr-stufen-mehr[aria-expanded="true"]::after { content: "\25B4"; }
.fr-stufen-mehr:hover { border-color: var(--fr-akzent); }
html[data-fr-kontrast] .fr-stufen-mehr { border: 2px solid #eef1f8; color: #ffffff; }
.fr-gebiet[hidden] { display: none; }
.fr-gebiet-text { color: var(--fr-gedaempft); font-size: 0.92rem; }

@media (max-width: 640px), (max-height: 520px) {
  .fr-basis-name { font-size: 1.1rem; }
  .fr-basis-stufe { margin: 0 0 4px; }
  .fr-basis-stufen-titel { font-size: 0.85rem; margin: 2px 0; }
  .fr-basis-stufe-nutzen { padding: 3px 8px; font-size: 0.88rem; line-height: 1.3; }
  .fr-basis-stufen { margin-bottom: 8px; }
  .fr-stufen-mehr { min-height: 36px; margin: -4px 0 8px; font-size: 0.85rem; }
  .fr-basis-info { margin-bottom: 8px; padding: 5px 8px; font-size: 0.88rem; line-height: 1.35; }
  .fr-basis-pruefung, .fr-basis-grund { font-size: 0.88rem; margin-bottom: 6px; }
  .fr-gebiet { padding: 8px 10px; }
  .fr-gebiet .fr-knopf { margin-top: 2px; }

  /* Abschluss */
  #fr-ende .fr-karte-titel { font-size: 1.15rem; }
  #fr-ende-thema { margin-bottom: 4px; font-size: 0.85rem; }
  #fr-ende .fr-bilanz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
  #fr-ende .fr-bilanz div { padding: 5px 8px; }
  #fr-ende .fr-bilanz dt { font-size: 0.72rem; line-height: 1.2; }
  #fr-ende .fr-bilanz dd { margin-top: 1px; font-size: 1.1rem; }
  #fr-ende .fr-bilanz-breit { grid-column: auto; }
  #fr-ende .fr-bilanz-breit dd { font-size: 0.95rem; }
  #fr-ende .fr-bilanz-breit:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px 12px; }
  #fr-ende .fr-bilanz-breit:last-child dd { margin: 0; }
  #fr-ende-ertrag { flex-direction: row; flex-wrap: nowrap; gap: 4px 14px; }
  .fr-ende-bauen { margin: 0 0 6px; font-size: 0.9rem; }
  .fr-ende-funke { margin-bottom: 6px; padding: 5px 10px; font-size: 0.88rem; line-height: 1.3; }
  .fr-ende-fund { gap: 6px 10px; margin-bottom: 6px; padding: 6px 10px; }
  .fr-ende-fund-bild { width: 44px; height: 44px; }
  .fr-ende-fund-fakt { font-size: 0.88rem; line-height: 1.3; }
  #fr-ende .fr-begleiter-zeile { margin-bottom: 4px; font-size: 0.9rem; }
  #fr-ende .fr-start-knoepfe { margin-top: 6px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  /* Basis quer: links Bild + Gebäude, rechts das gewählte Gebäude und die Bewohner in einer eigenen, in sich scrollenden
     Spalte; „Zurück" und „Neue Expedition" stehen oben rechts in der Kopfzeile — die Karte selbst scrollt nicht. Die Höhe des
     Bildes richtet sich nach dem Bildschirm (die Tippflächen liegen in Prozent des Bildes — deshalb wird die BREITE begrenzt,
     das Seitenverhältnis bleibt 16 : 9). */
  #fr-basis .fr-basis-karte {
    max-width: 1060px; height: 100%; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 10px;
  }
  #fr-basis .fr-basis-karte > * { grid-column: 1 / -1; }
  #fr-basis .fr-basis-kopf { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  #fr-basis .fr-basis-fuss { grid-column: 2; grid-row: 1; margin: 0 0 4px; align-self: center; flex-wrap: nowrap; }
  #fr-basis .fr-basis-fuss .fr-knopf { min-height: 36px; padding: 4px 12px; font-size: 0.85rem; }
  #fr-basis-begleiter { grid-row: 2; margin: 0 0 4px; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #fr-basis-begleiter[hidden] { display: none; }
  #fr-basis-begleiter .fr-begleiter-bild { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
  #fr-basis .fr-basis-inhalt { grid-row: 3; min-height: 0; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; gap: 10px; }
  #fr-basis .fr-basis-links { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  #fr-basis .fr-basis-bild { width: min(100%, calc((100dvh - 214px) * 16 / 9)); margin: 0 auto; flex: 0 0 auto; }
  #fr-basis .fr-basis-gebaeude { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 0; }
  #fr-basis .fr-gebaeude-chip { min-height: 44px; height: 44px; padding: 2px 4px; flex-direction: column; justify-content: center; gap: 2px; font-size: 0.8rem; }
  #fr-basis .fr-gebaeude-text { align-items: center; max-width: 100%; }
  #fr-basis .fr-gebaeude-text > :first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #fr-basis .fr-gebaeude-nutzen { display: none; }
  #fr-basis .fr-punkte { gap: 3px; }
  #fr-basis .fr-punkt { width: 6px; height: 6px; border-width: 1.5px; }
  #fr-basis .fr-basis-rechts { min-height: 0; overflow-y: auto; border-radius: 12px; }
  /* Im gewählten Gebäude: erst was es kostet und der Knopf, dann was die Stufen bringen; die Beschreibung tritt zurück. */
  #fr-basis .fr-basis-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 8px; padding: 8px 10px; }
  #fr-basis .fr-basis-detail > * { grid-column: 1 / -1; }
  #fr-basis-name { grid-column: 1; order: 1; }
  #fr-basis-stufe { grid-column: 2; order: 1; align-self: center; margin: 0; font-size: 0.85rem; }
  #fr-basis-kosten { order: 2; margin-top: 4px; }
  #fr-basis .fr-basis-knoepfe { order: 3; }
  #fr-basis .fr-basis-knoepfe .fr-knopf { min-height: 42px; }
  #fr-basis-grund { order: 4; margin: 4px 0 0; }
  #fr-basis-status { order: 5; }
  #fr-basis-pruefung { order: 6; margin: 4px 0 6px; }
  #fr-basis-info { order: 7; }
  #fr-basis .fr-basis-stufen-titel { order: 8; }
  #fr-basis-stufen { order: 9; }
  #fr-basis-stufen-mehr { order: 10; justify-self: start; }
  #fr-basis-text { order: 11; margin: 0; font-size: 0.82rem; line-height: 1.3; color: var(--fr-gedaempft); }
  #fr-basis .fr-basis-vorschau { display: none; }
  #fr-basis .fr-bewohner { margin-top: 8px; }
  #fr-basis .fr-bewohner .fr-basis-name { font-size: 1rem; }

  /* Karte quer: das Bild links (so hoch wie der Bildschirm erlaubt), der gewählte Ort rechts daneben. */
  .fr-landkarte-inhalt { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 10px; }
  .fr-landkarte-inhalt .fr-gebiete { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  #fr-landkarte-bild { width: min(100%, calc((100dvh - 100px) * 16 / 9)); margin: 0 auto; }
  #fr-landkarte .fr-basis-kopf { margin-bottom: 2px; }
  #fr-landkarte .fr-start-text { margin-bottom: 4px; font-size: 0.82rem; }

  /* Abschluss quer: breiter, die Bilanz in einer Zeile. */
  #fr-ende .fr-klein { max-width: 760px; }
  #fr-ende .fr-bilanz { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
  #fr-ende .fr-bilanz-breit:last-child { grid-column: auto; flex-direction: column; gap: 1px; }
}

/* ------------------------------------------------------------------ Meine Insel (Baumodus, .claude/FRAGENREICH_INSEL_PLAN.md)
   Die Schicht ist durchsichtig: die Insel zeichnet die Szene (fr-insel-szene.js) darunter. Nur die Bedienelemente nehmen
   Berührungen an — alles andere geht an die Bühne. Hochformat: Bauleiste unten; quer: rechts. */
body.fr-insel-offen .fr-hud { display: none; }
#fr-insel.fr-schicht, html[data-fr-kontrast] #fr-insel.fr-schicht {
  display: block; padding: 0; overflow: hidden; background: transparent; pointer-events: none;
}
.fr-insel > * { pointer-events: auto; }
.fr-insel > .fr-insel-laedt, .fr-insel > .fr-unsichtbar { pointer-events: none; }
.fr-insel-kopf {
  position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 8px;
}
.fr-insel-titel { margin: 0 4px; font-size: 1.15rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.fr-insel-rund {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--fr-linie);
  background: var(--fr-karte); color: var(--fr-text); font: inherit; font-weight: 700; font-size: 1.15rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fr-insel-rund svg, .fr-insel-werkzeug svg, .fr-insel-aktion svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.fr-insel-lager {
  margin-left: auto; min-height: 46px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--fr-linie);
  background: var(--fr-karte); color: var(--fr-text); font: inherit; cursor: pointer;
}
.fr-insel-vorrat { display: flex; gap: 10px; align-items: center; }
.fr-insel-gut { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-insel-gut-bild { width: 24px; height: 24px; }
.fr-insel-stufe {
  flex: 0 0 auto; position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--fr-akzent) calc(var(--fr-anteil, 0) * 360deg), var(--fr-linie) 0);
  display: inline-flex; align-items: center; justify-content: center;
}
.fr-insel-stufe::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--fr-karte);
}
.fr-insel-stufe-zahl { position: relative; font-weight: 800; font-size: 1.1rem; }
.fr-insel-stufe-balken { display: none; }
.fr-insel-werkzeuge {
  position: absolute; right: 8px; top: 64px; display: flex; flex-direction: column; gap: 6px;
}
.fr-insel-werkzeug {
  width: 66px; min-height: 56px; padding: 6px 2px; border-radius: 14px; border: 1px solid var(--fr-linie);
  background: var(--fr-karte); color: var(--fr-text); font: inherit; font-size: 0.68rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.fr-insel-werkzeug[aria-pressed="true"] { background: var(--fr-akzent); border-color: var(--fr-akzent); color: var(--fr-akzent-text); }
.fr-insel-werkzeug:disabled { opacity: 0.45; cursor: not-allowed; }
.fr-insel-zoom { display: flex; gap: 6px; }
.fr-insel-werkzeug--klein { width: 28px; min-height: 44px; flex: 1 1 0; }
.fr-insel-aktionen {
  position: absolute; left: 8px; top: 64px; display: flex; flex-direction: column; gap: 6px; max-width: 132px;
}
.fr-insel-aktion {
  min-height: 46px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--fr-linie); background: var(--fr-karte);
  color: var(--fr-text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 8px; text-align: left;
}
.fr-insel-aktion:hover, .fr-insel-werkzeug:hover, .fr-insel-rund:hover, .fr-insel-lager:hover { border-color: var(--fr-akzent); }
.fr-insel-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  background: var(--fr-karte); border-top: 1px solid var(--fr-linie); padding: 6px 8px 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.fr-insel-kategorien { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.fr-insel-kat {
  position: relative; flex: 0 0 auto; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 0;
  background: transparent; color: var(--fr-gedaempft); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.fr-insel-kat[aria-selected="true"] { color: var(--fr-text); border-bottom-color: var(--fr-akzent); }
.fr-insel-neu-punkt { position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--fr-akzent); }
.fr-insel-bausteine { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0 2px; }
.fr-insel-stein {
  position: relative; flex: 0 0 auto; width: 88px; padding: 4px 4px 6px; border-radius: 12px; border: 2px solid var(--fr-linie);
  background: var(--fr-flaeche); color: var(--fr-text); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fr-insel-stein[aria-checked="true"] { border-color: var(--fr-akzent); box-shadow: 0 0 0 2px rgba(94, 242, 224, 0.35); }
.fr-insel-stein--zu { opacity: 0.55; }
.fr-insel-stein-bild { width: 58px; height: 58px; object-fit: contain; }
.fr-insel-stein-name { font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.15; }
.fr-insel-stein-preis { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 0.75rem; color: var(--fr-gedaempft); }
.fr-insel-preis-teil { display: inline-flex; align-items: center; gap: 1px; }
.fr-insel-preis-fehlt { color: #ffb4a8; }
.fr-insel-preis-bild { width: 16px; height: 16px; }
.fr-insel-neu {
  position: absolute; top: 3px; right: 3px; padding: 0 5px; border-radius: 6px; background: var(--fr-akzent);
  color: var(--fr-akzent-text); font-size: 0.68rem; font-weight: 800; font-style: normal;
}
.fr-insel-meldung {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); max-width: min(520px, calc(100% - 160px));
  margin: 0; padding: 8px 16px; border-radius: 14px; background: rgba(10, 12, 26, 0.92); border: 1px solid var(--fr-linie);
  text-align: center; font-weight: 600;
}
.fr-insel-laedt {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; padding: 10px 18px;
  border-radius: 14px; background: var(--fr-karte); color: var(--fr-text);
}
.fr-insel-blatt {
  position: absolute; right: 8px; top: 64px; bottom: 8px; width: min(420px, calc(100% - 16px)); overflow-y: auto;
  padding: 12px 16px 16px; border-radius: 18px; background: var(--fr-karte); border: 1px solid var(--fr-linie);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); z-index: 2;
}
.fr-insel-blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fr-insel-blatt-zwischen { margin: 12px 0 4px; }
.fr-insel-lager-liste, .fr-insel-gebiete, .fr-insel-hilfe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-insel-hilfe { list-style: decimal; padding-left: 1.4em; }
.fr-insel-hilfe li { line-height: 1.45; }
.fr-insel-lager-zeile {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--fr-flaeche);
}
.fr-insel-lager-name { flex: 1 1 auto; }
.fr-insel-lager-zahl { font-weight: 800; font-variant-numeric: tabular-nums; }
.fr-insel-gebiet {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 8px 10px; border-radius: 12px; background: var(--fr-flaeche); border: 1px solid transparent;
}
.fr-insel-gebiet--gewaehlt { border-color: var(--fr-akzent); }
.fr-insel-gebiet-name { font-weight: 700; }
.fr-insel-gebiet-info { grid-column: 1; color: var(--fr-gedaempft); font-size: 0.9rem; }
.fr-insel-gebiet .fr-knopf { grid-column: 2; grid-row: 1 / span 2; }
/* Hochformat schmal: Aktionen als Reihe über der Bauleiste, nur Symbole + kurzes Wort. */
@media (max-width: 640px) and (orientation: portrait) {
  .fr-insel-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fr-insel-vorrat { gap: 6px; }
  .fr-insel-gut:nth-child(n+4) { display: none; }
  .fr-insel-aktionen { top: auto; bottom: 168px; flex-direction: row; max-width: none; right: 78px; overflow-x: auto; }
  .fr-insel-aktion { flex-direction: column; gap: 2px; font-size: 0.68rem; padding: 4px 6px; min-width: 58px; text-align: center; }
  .fr-insel-blatt { top: auto; height: 70%; left: 8px; width: auto; }
}
/* Quer (Telefon und Tablet): Bauleiste rechts als Spalte, Werkzeuge links daneben. */
@media (orientation: landscape) {
  .fr-insel-leiste {
    left: auto; top: 0; width: min(296px, 34vw); border-top: 0; border-left: 1px solid var(--fr-linie);
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .fr-insel-kategorien { flex-wrap: wrap; overflow: visible; }
  .fr-insel-bausteine { flex-wrap: wrap; overflow-y: auto; overflow-x: hidden; align-content: flex-start; flex: 1 1 auto; }
  .fr-insel-stein { width: calc(50% - 3px); }
  .fr-insel-kopf { right: calc(min(296px, 34vw) + 8px); }
  .fr-insel-werkzeuge { right: calc(min(296px, 34vw) + 8px); }
  .fr-insel-blatt { right: calc(min(296px, 34vw) + 8px); width: min(420px, calc(100% - min(296px, 34vw) - 160px)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .fr-insel-kopf { top: 4px; }
  .fr-insel-werkzeuge, .fr-insel-aktionen { top: 56px; gap: 4px; }
  .fr-insel-werkzeuge { display: grid; grid-template-columns: repeat(2, 54px); }
  .fr-insel-zoom { grid-column: 1 / span 2; }
  .fr-insel-werkzeug { min-height: 44px; width: 54px; font-size: 0.66rem; }
  .fr-insel-werkzeug--klein { width: auto; }
  .fr-insel-aktion { min-height: 44px; font-size: 0.75rem; }
  .fr-insel-stein-bild { width: 44px; height: 44px; }
  .fr-insel-titel { display: none; }
  .fr-insel-kategorien { flex-wrap: nowrap; overflow-x: auto; }
  .fr-insel-kat { min-height: 44px; padding: 4px 10px; font-size: 0.82rem; }
}
html[data-fr-kontrast] .fr-insel-leiste, html[data-fr-kontrast] .fr-insel-werkzeug, html[data-fr-kontrast] .fr-insel-aktion,
html[data-fr-kontrast] .fr-insel-blatt, html[data-fr-kontrast] .fr-insel-lager { background: #000; border-color: #fff; }
html:not([data-fr-ruhig]) .fr-insel-meldung:not([hidden]) { animation: fr-auftauchen 180ms ease-out; }
/* Werkstatt und Sammelrunde im Blatt der Insel */
.fr-insel-rezepte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-insel-rezept { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--fr-flaeche); }
.fr-insel-rezept--zu { opacity: 0.6; }
.fr-insel-rezept-formel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.fr-insel-rezept-zeichen { color: var(--fr-gedaempft); }
.fr-insel-rezept-info { color: var(--fr-gedaempft); font-size: 0.9rem; }
.fr-insel-rezept-knoepfe { display: flex; gap: 6px; }
.fr-insel-sammeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.fr-insel-sammeln-knopf {
  min-height: 96px; padding: 8px; border-radius: 14px; border: 2px solid var(--fr-linie); background: var(--fr-flaeche);
  color: var(--fr-text); font: inherit; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fr-insel-sammeln-knopf:hover { border-color: var(--fr-akzent); }
.fr-insel-sammeln-bild { width: 40px; height: 40px; }
.fr-insel-sammeln-zahl { font-weight: 500; font-size: 0.82rem; color: var(--fr-gedaempft); }
/* Bauaufträge, Fortschritt und Abzeichen */
.fr-insel-stufe { border: 0; color: var(--fr-text); font: inherit; cursor: pointer; padding: 0; }
.fr-insel-auftraege, .fr-insel-abzeichen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-insel-auftrag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--fr-flaeche); }
.fr-insel-auftrag-bild { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: #1d2442; }
.fr-insel-auftrag-rumpf { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.fr-insel-auftrag-von { font-size: 0.82rem; color: var(--fr-gedaempft); }
.fr-insel-auftrag-text { font-weight: 700; }
.fr-insel-auftrag-lohn { font-size: 0.85rem; color: var(--fr-gedaempft); }
.fr-insel-auftrag-balken {
  display: block; height: 8px; border-radius: 4px; background: var(--fr-linie); overflow: hidden; position: relative;
}
.fr-insel-auftrag-balken::after {
  content: ""; position: absolute; inset: 0; width: calc(var(--fr-anteil, 0) * 100%); background: var(--fr-akzent); border-radius: 4px;
}
.fr-insel-aktion--neu { border-color: var(--fr-akzent); box-shadow: 0 0 0 2px rgba(94, 242, 224, 0.35); }
.fr-insel-abzeichen-eintrag { display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; background: var(--fr-flaeche); opacity: 0.7; }
.fr-insel-abzeichen--hat { opacity: 1; border: 1px solid var(--fr-akzent); }
.fr-insel-abzeichen-name { font-weight: 700; }
.fr-insel-abzeichen-text { font-size: 0.88rem; color: var(--fr-gedaempft); }
/* Ein Link im Fließtext (z. B. „Zur Werkstatt" im Gebäude-Blatt): Knopf, sieht aus wie ein Link, groß genug zum Tippen. */
.fr-textlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none;
  color: var(--fr-akzent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fr-textlink:hover { color: var(--fr-text); }
.fr-insel-vorher {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: min(520px, calc(100% - 180px)); z-index: 1;
  padding: 10px 14px; border-radius: 14px; background: rgba(10, 12, 26, 0.95); border: 1px solid var(--fr-akzent);
}
.fr-insel-vorher-text { margin: 0 0 8px; }
.fr-insel-vorher-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) and (orientation: portrait) { .fr-insel-vorher { width: calc(100% - 96px); left: 8px; transform: none; } }
/* Kurze Einführung der Insel: eine Sprechblase nahe dem, worum es geht (nicht modal). */
.fr-insel-tutorial {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px)); z-index: 3;
  padding: 12px 16px; border-radius: 16px; background: #1b2242; border: 2px solid var(--fr-akzent); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.fr-insel-tutorial[data-ziel="fr-insel-leiste"] { top: auto; bottom: 200px; transform: translateX(-50%); }
.fr-insel-tutorial[data-ziel="fr-insel-werkzeuge"] { left: auto; right: 90px; top: 80px; transform: none; }
.fr-insel-tutorial[data-ziel="fr-insel-aktionen"] { left: 160px; top: 80px; transform: none; }
@media (orientation: landscape) {
  .fr-insel-tutorial[data-ziel="fr-insel-leiste"] { bottom: auto; top: 30%; left: auto; right: calc(min(296px, 34vw) + 92px); transform: none; }
  .fr-insel-tutorial[data-ziel="fr-insel-werkzeuge"] { right: calc(min(296px, 34vw) + 90px); }
}
@media (max-width: 640px) and (orientation: portrait) {
  .fr-insel-tutorial[data-ziel] { left: 8px; right: 8px; width: auto; top: 64px; bottom: auto; transform: none; }
}
.fr-insel-tutorial-schritt { margin: 0 0 4px; color: var(--fr-gedaempft); font-size: 0.85rem; }
.fr-insel-tutorial-text { margin: 0 0 10px; font-weight: 600; line-height: 1.4; }
.fr-insel-hervor { outline: 3px solid var(--fr-akzent); outline-offset: 3px; border-radius: 14px; }
html:not([data-fr-ruhig]) .fr-insel-tutorial:not([hidden]) { animation: fr-auftauchen 200ms ease-out; }