/* Werkstatt — helle, freundliche Werkstattoptik.

   Frueher stand hier bewusst das Gegenteil: dunkle Industrieoptik, harte
   Kanten, "keine Pastelltoene, keine runden Freundlichkeiten". Das war
   stimmig, aber am Nutzer vorbei — fuer ein zwoelfjaehriges Kind sah es
   schlicht langweilig aus. Jetzt: warmes Papier statt Riffelblech, runde
   Ecken, farbige Signale, und jedes Fach mit eigener Farbe.

   Die Stahlskala ist dabei umgedreht worden (frueher dunkel->hell, jetzt
   hell->dunkel). Weil im ganzen Stylesheet die Variablen nach ihrer ROLLE
   benutzt werden, stimmt der Kontrast dadurch fast ueberall von selbst:
     000 = Seitengrund   100/200 = Karten   300/400 = Kanten
     500/600 = ruhige Schrift              kreide  = Haupttext          */

:root {
  --stahl-000: #edf5f1;   /* ruhiger, kühler Seitengrund */
  --stahl-100: #fffdf8;   /* Karten wie mattes Segeltuch */
  --stahl-200: #f5faf6;
  --stahl-300: #c9dfd5;   /* Nebelkante */
  --stahl-400: #7fb7aa;   /* ruhiges Seegras */
  --stahl-500: #44716d;   /* Nebentext */
  --stahl-600: #1e565c;
  --kreide:    #173b43;   /* Tiefseetinte statt Braun */

  --warn:      #df7356;   /* gedämpftes Korall: nur für Handlungen */
  --warn-tief: #f3b28d;
  --signal:    #3b9b79;   /* Erfolg: Seegras statt Ampelgrün */
  --hinweis:   #25849a;   /* klares Wasser */
  --gold:      #c69b54;   /* Messing, sparsam eingesetzt */
  --gold-hell: #f4dfad;

  /* Fachfarben — damit die Faecher auf einen Blick auseinandergehen,
     statt alles in einem Orange zu verschwimmen. */
  --fach-mathe:      #2f7fd0;
  --fach-physik:     #8b46d6;
  --fach-deutsch:    #e0397a;
  --fach-englisch:   #2fa84f;
  --fach-biologie:   #1f9c8a;
  --fach-geschichte: #c98a1c;
  --fach-erdkunde:   #1c8fb3;
  --fach-tippen:     #e8590c;
  --fach-it:         #087f8c;

  --schrift-anzeige: "Bahnschrift", "DIN Alternate", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --kante: 3px;
  --rundung: 14px;
  --rundung-klein: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--stahl-000);
  color: var(--kreide);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Drei weiche Farbfelder statt Riffelblech: gibt der Seite Waerme,
     ohne dem Inhalt die Aufmerksamkeit zu nehmen. */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(206,175,110,.25), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(49,143,160,.17), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(79,151,130,.13), transparent 55%);
  background-attachment: fixed;
}

#buehne {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.9rem, 3vw, 1.5rem) 3rem;
}

.schirm[hidden] { display: none; }
.schirm {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-height: 100svh;
  justify-content: center;
}
/* Die Schicht wird als Block mittig gesetzt. Oben ausgerichtet blieben auf
   dem Tablet zwei Drittel der Fläche leer und die Karte wirkte angeheftet. */
.schirm-schicht { justify-content: center; gap: 1rem; }

/* --- Schilder ---------------------------------------------------------- */

.schild {
  border: var(--kante) solid var(--warn);
  border-radius: var(--rundung);
  background: linear-gradient(180deg, #ffffff, var(--stahl-200));
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 0 rgba(232,89,12,.22), 0 8px 18px rgba(122,74,32,.12);
}
.schild-zeile {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warn);
}
.schild h1 {
  margin: .15rem 0 0;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  letter-spacing: .1em;
  line-height: 1;
  font-weight: 700;
}
.schild-ende { border-color: var(--stahl-500); }
.schild-ende .schild-zeile { color: var(--stahl-600); }
.schild-stoerung { border-color: #c4552e; }
.schild-stoerung .schild-zeile { color: #c4552e; }

/* --- Kennwerte --------------------------------------------------------- */

.kennwerte {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
  border-top: 1px solid var(--stahl-300);
  border-bottom: 1px solid var(--stahl-300);
  padding: .8rem 0;
}
.kennwerte dt {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stahl-600);
}
.kennwerte dd {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Knoepfe ----------------------------------------------------------- */

.knopf {
  font-family: var(--schrift-anzeige);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #fff;
  color: var(--kreide);
  border: 2px solid var(--stahl-400);
  border-radius: var(--rundung-klein);
  /* Der harte Schatten unten gibt Tiefe zum Draufdruecken — beim
     Antippen faehrt der Knopf hinein statt nur die Farbe zu wechseln. */
  box-shadow: 0 3px 0 rgba(240,168,96,.5);
  padding: .7rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--stahl-200); } }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(240,168,96,.5); }
.knopf:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: 2px;
}

.knopf-gross {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: linear-gradient(180deg, #ffb057, var(--warn));
  color: #fff;
  border: none;
  box-shadow: 0 4px 0 #b23c05;
  padding: 1.1rem;
  font-size: 1.35rem;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .knopf-gross:hover { background: linear-gradient(180deg, #ffbe72, #f5670f); } }
.knopf-gross:active { box-shadow: 0 2px 0 #b23c05; }
.knopf-neben {
  font-family: var(--schrift-zahl);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: none;
  opacity: .75;
}

.knopf-annehmen { background: var(--stahl-400); border-color: var(--stahl-600); }

/* Boss-Auftrag: eigene Farbe (Violett statt Orange), damit er auf Anhieb als
   etwas Besonderes auffaellt, nicht als zweiter "Schicht beginnen"-Knopf. */
.knopf-boss {
  background: linear-gradient(180deg, #b98aef, #8b46d6);
  box-shadow: 0 4px 0 #5b2a91;
}
@media (hover: hover) and (pointer: fine) { .knopf-boss:hover { background: linear-gradient(180deg, #c79cf5, #9a56e6); } }
.knopf-boss:active { box-shadow: 0 2px 0 #5b2a91; }
.knopf-boss[hidden] { display: none; }
.knopf-boss[disabled] {
  background: var(--stahl-300);
  box-shadow: 0 4px 0 var(--stahl-400);
  color: var(--stahl-600);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) { .knopf-boss[disabled]:hover { background: var(--stahl-300); } }

.kopf.boss .kopf-marke { color: #8b46d6; }
.kopf.boss .uhr-zeiger { stroke: #8b46d6; }
.knopf-flach {
  background: transparent;
  border-color: var(--stahl-400);
  color: var(--stahl-600);
  font-size: .85rem;
  padding: .5rem .8rem;
}
@media (hover: hover) and (pointer: fine) { .knopf-flach:hover { color: var(--kreide); } }

/* --- Kopf mit Uhr ------------------------------------------------------ */

.kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  padding: .7rem .9rem;
}
.uhr { width: 58px; height: 58px; flex: none; }
.uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.uhr circle { fill: none; stroke-width: 9; }
.uhr-bahn { stroke: var(--stahl-300); }
.uhr-zeiger {
  stroke: var(--warn);
  stroke-linecap: butt;
  stroke-dasharray: 276.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .2s linear, stroke .4s;
}
.kopf.knapp .uhr-zeiger { stroke: #e2662f; }
.kopf-text { display: flex; flex-direction: column; line-height: 1.15; }
.kopf-marke {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stahl-600);
}
.kopf-zeit {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}
.kopf-zaehler { margin-left: auto; text-align: right; }
.zaehler-zahl {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.zaehler-marke {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stahl-600);
}
.zeit-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Bewusst klein und am Rand -- soll auffindbar sein, aber nicht mit dem
   eigentlichen Auftrag um Aufmerksamkeit konkurrieren. */
.schicht-verlassen { display: flex; justify-content: flex-end; margin: .3rem 0 0; }
.schicht-verlassen .knopf-flach { font-size: .78rem; padding: .35rem .7rem; }
.schicht-verlassen-frage {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
  border: var(--kante) solid var(--warn);
  background: #fff7ef;
  padding: .7rem .9rem;
  width: 100%;
}
.schicht-verlassen-frage p { margin: 0; color: var(--kreide); font-size: .9rem; text-align: right; }
.schicht-verlassen-frage[hidden] { display: none; }

/* --- Ausbeute und Regal ------------------------------------------------ */

.symbolvorrat { display: none; }

.ausbeute {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  border-left: 3px solid var(--stahl-500);
  background: var(--stahl-100);
  padding: .45rem .7rem;
  min-height: 3.2rem;
}
.ausbeute-marke, .regal-marke, .wochenkarte-marke {
  font-family: var(--schrift-anzeige);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stahl-600);
  flex: none;
}
.ausbeute-posten, .regal-posten { display: flex; gap: .4rem; flex-wrap: wrap; }
.ausbeute-leer { color: var(--stahl-500); font-size: .85rem; }

/* Ein Posten ist ein Bild mit einer Zahl, kein Satz. */
.posten {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  background: linear-gradient(180deg, #ffffff, var(--stahl-200));
  padding: .3rem .5rem;
}
.posten-symbol { width: 1.4rem; height: 1.4rem; color: var(--warn); flex: none; }
.posten-menge {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
}
.posten-name { font-family: var(--schrift-text); font-size: .72rem; color: var(--stahl-500); }

@keyframes zugang {
  0%   { border-color: var(--warn); background: var(--warn-tief); transform: translateY(-4px); }
  100% { border-color: var(--stahl-400); background: var(--stahl-200); transform: none; }
}
.posten.frisch { animation: zugang .6s ease-out; }
/* Waehrend des Aufblitzens liegt heller Text auf dunklem Bernstein —
   sonst faellt der Name in den Hintergrund, gerade dann, wenn er zaehlt. */
@keyframes zugang-text {
  0%   { color: #ffe6b0; }
  100% { color: var(--stahl-500); }
}
@keyframes zugang-symbol {
  0%   { color: var(--warn); }
  100% { color: var(--stahl-600); }
}
.posten.frisch .posten-name { animation: zugang-text .6s ease-out; }
.posten.frisch .posten-symbol { animation: zugang-symbol .6s ease-out; }

/* Das Regal am Tor und am Schichtende: groesser, ruhiger. */
.regal {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  border-left: 3px solid var(--stahl-500);
  background: var(--stahl-100);
  padding: .6rem .8rem;
  min-height: 3.4rem;
}
.regal-gross { border-left-color: var(--warn); }
.regal-gross .posten { padding: .45rem .7rem; }
.regal-gross .posten-symbol { width: 1.9rem; height: 1.9rem; color: var(--warn); }
.regal-gross .posten-menge { font-size: 1.5rem; }

/* --- Wochenkarte -------------------------------------------------------- */

.wochenkarte {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  padding: .7rem .8rem;
}
.serie {
  margin-left: auto;
  font-size: .8rem;
  color: var(--stahl-600);
  text-align: right;
}
.serie[hidden] { display: none; }
.serie b {
  font-family: var(--schrift-zahl);
  font-size: 1.4rem;
  color: var(--kreide);
  margin-right: .3rem;
}
.serie i { display: block; font-style: normal; font-size: .75rem; color: var(--warn); }

/* --- Fund -------------------------------------------------------------- */

/* Warnstreifen wie am Baustellenband, jetzt hell. Auf dem Muster selbst
   laege Text schlecht — Marke und Meldung bekommen deshalb eine eigene
   ruhige Flaeche, statt direkt auf den Streifen zu sitzen. */
.fund {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: var(--kante) solid var(--warn);
  border-radius: var(--rundung);
  background: repeating-linear-gradient(
    45deg, #ffd9a8 0 12px, #ffc178 12px 24px);
  color: var(--kreide);
  padding: .6rem .8rem;
}
.fund[hidden] { display: none; }
.fund-marke {
  font-family: var(--schrift-anzeige);
  font-size: 1.1rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--warn);
  color: #fff;
  border-radius: 8px;
  padding: .15rem .6rem;
  flex: none;
}
.fund-text {
  font-size: .95rem;
  font-weight: 600;
  background: rgba(255,255,255,.82);
  border-radius: 8px;
  padding: .2rem .5rem;
}
.fund.schatzfund {
  border-color: #e7b334;
  background: repeating-linear-gradient(45deg, #fff3b9 0 12px, #f5c75e 12px 24px);
  box-shadow: 0 4px 0 #b97927, 0 9px 18px rgba(93,58,13,.22);
  animation: schatzfund-einzug .65s cubic-bezier(.2,.8,.25,1);
}
.fund.schatzfund .fund-marke { background: #a96021; }
@keyframes schatzfund-einzug {
  0% { transform: translateY(-.7rem) scale(.94); opacity: 0; }
  55% { transform: translateY(.08rem) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Feierabend ist eine Ankunftsszene: links das Wesen und die kurze
   Rueckschau, rechts die sichtbare Fracht. Auf kleinen Displays stapelt sich
   dieselbe Szene ruhig untereinander. */
#schirm-ende {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
  align-items: start;
  gap: .9rem;
  padding: clamp(.65rem, 2vw, 1.2rem);
  border: 4px solid #b67b3e;
  border-radius: 1.35rem;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,236,158,.58), transparent 25%),
    linear-gradient(160deg, rgba(255,250,231,.96), rgba(255,224,157,.88));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 12px 0 #704522, 0 22px 42px rgba(53,31,17,.25);
}
/* Die Grid-Regel oben ist absichtlich spezifischer als .schirm[hidden].
   Dieses Gegenstück stellt sicher, dass die Feierabendseite wirklich nur
   nach beendeSchicht() sichtbar wird. */
#schirm-ende[hidden] { display: none; }
#schirm-ende::before {
  content: "⚓  ·  ✦  ·  ⚓";
  grid-column: 1 / -1;
  justify-self: center;
  color: #a16631;
  font-size: .72rem;
  letter-spacing: .7em;
  opacity: .8;
}
#schirm-ende .schild { grid-column: 1 / -1; justify-self: stretch; margin: 0; }
#schirm-ende .schild-ende {
  padding: .8rem 1.2rem;
  border: 3px solid #d7a356;
  border-radius: 1rem;
  background: linear-gradient(110deg, #573821, #865426 58%, #5d3a22);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px #3e2518;
}
#schirm-ende .schild-ende .schild-zeile { color: #ffe19a; }
#schirm-ende .schild-ende h1 { color: #fff1bd; text-shadow: 0 3px #3c2317; }
#schirm-ende .feierabend-kopf {
  position: relative;
  min-height: 15rem;
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  align-items: center;
  gap: .7rem;
  overflow: hidden;
  border: 3px solid #22677a;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.22) 0 1.5%, transparent 1.8%),
    linear-gradient(145deg, #2b8193, #174f68);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 0 6px #173b4c;
  padding: .8rem;
}
#schirm-ende .feierabend-kopf::after {
  content: "✦";
  position: absolute;
  right: 1rem;
  top: .7rem;
  color: #ffe08b;
  font-size: 1.7rem;
  animation: ankunft-stern 2.8s ease-in-out infinite;
}
#schirm-ende .katzenplatz-klein { width: auto; padding: .2rem; z-index: 1; }
#schirm-ende .katzenplatz-klein .katze-bild { max-height: 10rem; filter: drop-shadow(0 6px 2px rgba(9,35,43,.35)); }
#schirm-ende .bilanz { z-index: 1; margin: 0; color: #fff3cb; font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.35; }
#schirm-ende .bilanz b { display: block; margin-bottom: .35rem; color: #ffe18d; font-family: var(--schrift-anzeige); font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: .95; }
#schirm-ende .meilenstein,
#schirm-ende .sammelkarte,
#schirm-ende .fakt-ende,
#schirm-ende .praemien { grid-column: 2; }
#schirm-ende .regal { grid-column: 1; }
#schirm-ende #knopf-zurueck { grid-column: 1; align-self: end; width: 100%; }
#schirm-ende .bewegungspause { grid-column: 1; align-self: end; margin: 0; padding: .55rem .7rem; border-radius: .7rem; background: rgba(255,255,255,.12); color: #fdf1cf; font-size: 1rem; text-align: center; }
@media (max-width: 700px) { #schirm-ende .bewegungspause { grid-column: 1; } }
#schirm-ende .meilenstein { border: 3px solid #d39b36; border-radius: 1rem; background: linear-gradient(135deg, #fff7d3, #f3c967); box-shadow: 0 5px #b17529; }
#schirm-ende .meilenstein-marke { color: #89511d; }
#schirm-ende .sammelkarte { border-width: 3px; box-shadow: 0 5px #9b6a31, 0 10px 18px rgba(74,43,20,.13); }
#schirm-ende .fakt-ende { border-left-width: 6px; }
#schirm-ende .regal { border: 3px solid #bb7c3a; border-radius: 1rem; background: linear-gradient(145deg, #fff7dc, #f0c97b); box-shadow: 0 5px #98602d; }
#schirm-ende .regal-marke { color: #78451f; }
#schirm-ende .knopf-gross { min-height: 56px; border-color: #e4ad4b; background: linear-gradient(180deg, #8bd34a, #4f9e2b); box-shadow: 0 5px #326c28; }
@keyframes ankunft-stern { 50% { transform: translateY(-3px) rotate(12deg); opacity: .7; } }

@media (max-width: 700px) {
  #schirm-ende { grid-template-columns: 1fr; gap: .7rem; padding: .65rem; }
  #schirm-ende .schild, #schirm-ende .feierabend-kopf, #schirm-ende .meilenstein,
  #schirm-ende .sammelkarte, #schirm-ende .fakt-ende, #schirm-ende .praemien,
  #schirm-ende .regal, #schirm-ende #knopf-zurueck { grid-column: 1; }
  #schirm-ende .feierabend-kopf { min-height: 11.5rem; grid-template-columns: 8rem 1fr; padding: .55rem; }
  #schirm-ende .katzenplatz-klein .katze-bild { max-height: 7.5rem; }
  #schirm-ende .bilanz { font-size: 1rem; }
  #schirm-ende .bilanz b { font-size: 2.4rem; }
}

/* Auf grossen, niedrigen Bildschirmen wird die ganze Ueberfahrt zur
   Cockpitansicht: dieselben Informationen, aber dichter gesetzt. So bleibt
   die Aufgabe ohne Scrollen erreichbar, waehrend Touch-Groessen sicher
   bleiben. */
@media (min-width: 1000px) and (max-height: 950px) {
  #buehne:has(.schirm-schicht:not([hidden])) { padding: .35rem .55rem; }
  .schirm-schicht { gap: .38rem; padding: .42rem; }
  .schirm-schicht .kopf { padding: .4rem .58rem; }
  .schirm-schicht .reise-route { min-height: 2.1rem; }
  .schirm-schicht .reise-instrumente { min-height: 2.1rem; }
  .schirm-schicht .ausbeute { min-height: 2.7rem; padding-block: .32rem; }

  
  .schirm-schicht .auftrag { padding: .68rem; }
  .schirm-schicht .auftrag-kopf { min-height: 2.15rem; }
  .schirm-schicht .missionsfrage { min-height: 6rem; padding: .55rem .8rem .6rem .92rem; }
  .schirm-schicht .auftrag .missionsfrage .auftrag-text { font-size: 1.22rem; line-height: 1.28; }
  .schirm-schicht .auftrag .ohm-zeile .katze-klein { width: min(100%, 5.3rem); }
  .schirm-schicht .auftrag .auswahl { gap: .46rem; }
  .schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen) { min-height: 54px; }
  .schirm-schicht .auftrag .auswahl > .knopf.frachtkarte { min-height: 58px; padding-block: .4rem; }
  .schirm-schicht .frachtkarte-siegel { flex-basis: 2.15rem; width: 2.15rem; height: 2.15rem; font-size: 1rem; }
  .schirm-schicht .frachtkarte-marke { font-size: .5rem; }
  .schirm-schicht .frachtkarte-text { font-size: .88rem; }
  .schirm-schicht .auftrag .eingabe-zeile { padding-top: 1.7rem; }
  .schirm-schicht .auftrag .eingabe-feld { min-height: 48px; }
  .schirm-schicht .auftrag .tastenfeld { gap: .3rem; padding: .45rem; }
  .schirm-schicht .auftrag .taste { min-height: 43px; font-size: 1.2rem; }
  .schirm-schicht .auftrag .rueckmeldung { min-height: 3.3rem; padding-block: .55rem; }
}

/* --- Meisterung: "Das sitzt" ---------------------------------------------
   Der einzige sichtbare Moment im ganzen Spiel, der an echtes Koennen
   gekoppelt ist statt an Menge (siehe main.js feiereMeisterung()) -- ein
   Handgriff hat gerade zum ersten Mal die Meister-Schwelle erreicht
   (engine/scheduler.js MEISTER_FACH). Bewusst selten (ein paar Mal pro
   Schicht hoechstens, siehe scheduler.js verbuche()) und deshalb eigens
   golden statt der Fund-Warnstreifen oder des Erfolgsgruens -- ein drittes,
   unverwechselbares Signal, das sich nicht abnutzt, weil es so selten ist. */
/* Der Begleiter waehrend der Ueberfahrt: das Wesen, fuer das gelernt wird,
   bleibt die ganze Zeit im Blick. Kompakt und ohne Fliesstext -- Bild, Stufe
   und ein Balken, der sich bei jeder richtigen Antwort sichtbar bewegt. */
.begleiter {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .7rem;
  border: 2px solid rgba(223, 191, 113, .55);
  border-radius: var(--rundung);
  background: linear-gradient(145deg, rgba(5, 59, 68, .96), rgba(4, 43, 55, .95));
  color: #e6f2ec;
}
.begleiter[hidden] { display: none; }
/* zeichneKatze() ueberschreibt className des Behaelters -- deshalb ueber die
   ID ansprechen, eine Klasse ueberlebt das Neuzeichnen nicht. */
#begleiter-bild { flex: none; width: 3.4rem; height: auto; }
#begleiter-bild .katze-bild { max-height: 3.4rem; display: block; }
.begleiter-daten { display: grid; gap: .16rem; min-width: 0; flex: 1 1 auto; max-width: 22rem; }
.begleiter-name { color: #f4dca4; font-family: var(--schrift-anzeige); font-size: .82rem; letter-spacing: .06em; }
.begleiter-stufe { color: #cfe2db; font-size: .78rem; }
.begleiter-balken { height: .5rem; overflow: hidden; border-radius: 999px; border: 1px solid rgba(247, 222, 158, .28); background: rgba(2, 25, 34, .55); }
.begleiter-balken span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #d69a43, #77c4b7); transition: width .6s ease; }
.begleiter-naechste { color: #a9cfc7; font-size: .68rem; }
.ruhemodus .begleiter-balken span { transition: none; }

/* Wachstumsschritt: der seltenste Moment der Ueberfahrt, deshalb ein eigenes
   Band statt nur einer Zeile im Begleiter. */
.wachstum-band {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border: var(--kante) solid #e2c16f;
  border-radius: var(--rundung);
  background: linear-gradient(145deg, rgba(9, 84, 82, .96), rgba(4, 52, 62, .96));
  color: #fff6e0;
  animation: meisterung-einzug .5s ease-out;
}
.wachstum-band[hidden] { display: none; }
.wachstum-stern { flex: none; color: #ffe8ac; font-size: 1.2rem; }
.wachstum-marke { font-family: var(--schrift-anzeige); font-size: .74rem; letter-spacing: .08em; color: #f4dca4; }
.wachstum-text { font-weight: 700; }
@media (max-width: 640px) {
  #begleiter-bild { width: 2.8rem; }
  #begleiter-bild .katze-bild { max-height: 2.8rem; }
  .begleiter-naechste { font-size: .66rem; }
}

.meisterung {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: var(--kante) solid var(--gold);
  border-radius: var(--rundung);
  background: linear-gradient(180deg, #fff6dc, var(--gold-hell));
  color: var(--kreide);
  padding: .6rem .8rem;
  animation: meisterung-einzug .5s ease-out;
}
.meisterung[hidden] { display: none; }
.meisterung-stern {
  font-size: 1.3rem;
  color: var(--gold);
  flex: none;
  animation: meisterung-funkeln 1.8s ease-in-out infinite;
}
.meisterung-marke {
  font-family: var(--schrift-anzeige);
  font-size: .95rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  flex: none;
}
.meisterung-text { font-size: .95rem; font-weight: 600; }
@keyframes meisterung-einzug {
  0%   { transform: translateY(-6px) scale(.96); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes meisterung-funkeln {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* --- Auftragskarte ----------------------------------------------------- */

.auftrag {
  border: 1px solid var(--stahl-300);
  border-top: 3px solid var(--warn-tief);
  background: var(--stahl-100);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auftrag-kopf { display: flex; gap: .5rem; flex-wrap: wrap; }
.stempel {
  font-family: var(--schrift-anzeige);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--stahl-400);
  color: var(--stahl-600);
  padding: .18rem .5rem;
}
.stempel-nr { margin-left: auto; font-family: var(--schrift-zahl); letter-spacing: .08em; }

.auftrag-text {
  margin: 0;
  font-size: clamp(1.1rem, 3.4vw, 1.3rem);
  line-height: 1.45;
}

/* --- Saeulendiagramm (Diagrammanalyse, M7 LB8) --------------------------
   Rein lesend: kein Klick-Handler, geantwortet wird ueber die
   Auswahl-Buttons darunter. */
.auftrag-diagramm {
  margin: .3rem 0 0;
  border: 1px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  background: var(--stahl-100);
  padding: .5rem .3rem .1rem;
}
.auftrag-diagramm[hidden] { display: none; }
.sd-bild { width: 100%; height: auto; display: block; }
.sd-balken { fill: var(--fach-mathe); opacity: .85; }
.sd-wert {
  text-anchor: middle;
  font-family: var(--schrift-zahl);
  font-size: 11px;
  fill: var(--kreide);
}
.sd-beschriftung {
  text-anchor: middle;
  font-family: var(--schrift-anzeige);
  font-size: 11px;
  fill: var(--stahl-600);
}
.sd-achse { stroke: var(--stahl-500); stroke-width: 1.5; }
.sd-achsenmarke {
  font-family: var(--schrift-zahl);
  font-size: 10px;
  fill: var(--stahl-500);
}

/* --- Eingabe ----------------------------------------------------------- */

.eingabe-zeile { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.eingabe-zeile[hidden] { display: none; }
.eingabe-feld {
  flex: 1 1 8rem;
  min-width: 0;
  background: var(--stahl-000);
  border: var(--kante) solid var(--stahl-500);
  color: var(--kreide);
  font-family: var(--schrift-zahl);
  font-size: 1.4rem;
  padding: .55rem .7rem;
  min-height: 48px;
}
.eingabe-feld:focus-visible { outline: 3px solid var(--warn); outline-offset: 1px; }
.eingabe-feld[disabled] { opacity: .5; }
.eingabe-einheit {
  align-self: center;
  font-family: var(--schrift-zahl);
  color: var(--stahl-600);
}

.auswahl { display: grid; gap: .5rem; }
.auswahl[hidden] { display: none; }
.auswahl .knopf { text-transform: none; font-family: var(--schrift-text); letter-spacing: 0; }

/* --- Rueckmeldung ------------------------------------------------------ */

.rueckmeldung {
  border-left: 4px solid var(--stahl-500);
  padding: .1rem 0 .1rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.rueckmeldung[hidden] { display: none; }
.rueckmeldung-marke {
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rueckmeldung-text { margin: 0; color: var(--stahl-600); }
.rueckmeldung.gut { border-left-color: var(--signal); }
.rueckmeldung.gut .rueckmeldung-marke { color: var(--signal); }
.rueckmeldung.noch { border-left-color: var(--hinweis); }
.rueckmeldung.noch .rueckmeldung-marke { color: var(--hinweis); }
.rueckmeldung:focus-visible { outline: 3px solid var(--missionsfarbe, var(--hinweis)); outline-offset: 4px; }
.knopf-weiter[hidden] { display: none; }
.knopf-weiter { align-self: flex-start; }

@media (pointer: coarse) {
  .schirm-schicht .schicht-verlassen .knopf, .schirm-hafen .hafen-werkzeuge .knopf, .schirm-hafen .hafen-kompass .knopf { min-height: 44px; }
}

/* --- Hinweise ---------------------------------------------------------- */

.hinweisleiste { border-top: 1px solid var(--stahl-300); padding-top: .8rem; }
.hinweise {
  margin: .7rem 0 0;
  padding-left: 1.2rem;
  color: var(--stahl-600);
  font-size: .95rem;
  display: grid;
  gap: .4rem;
}
.hinweise:empty { display: none; }
.hinweise li::marker { color: var(--hinweis); }
.lernanker { margin-top: .55rem; padding: .6rem; border: 2px solid color-mix(in srgb, var(--missionsfarbe, var(--hinweis)) 42%, #f0ca8c); border-radius: .8rem; background: linear-gradient(135deg, #fffdf4, color-mix(in srgb, var(--missionsfarbe, var(--hinweis)) 9%, #fff)); color: #31545b; }
.lernanker[hidden] { display: none; }
.lernanker > span { display: block; color: var(--missionsfarbe, var(--hinweis)); font: 900 .57rem/1 var(--schrift-anzeige); letter-spacing: .1em; }
.lernanker > b { display: block; margin-top: .18rem; font-size: .74rem; }
.lernanker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .22rem; margin-top: .45rem; }
.lernanker i { display: grid; gap: .16rem; align-items: center; justify-items: center; min-height: 2.8rem; padding: .25rem; border-radius: .5rem; background: rgba(255,255,255,.76); color: #4f6968; font-size: .58rem; font-style: normal; line-height: 1.1; text-align: center; }
.lernanker strong { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--missionsfarbe, var(--hinweis)); color: #fff; font-size: .58rem; }
.lernanker p { margin: .45rem 0 0; font-size: .7rem; line-height: 1.3; }
.lernanker-beispiel { display: grid; gap: .12rem; margin-top: .48rem; padding: .4rem .45rem; border-radius: .55rem; background: color-mix(in srgb, var(--missionsfarbe, var(--hinweis)) 12%, #fff); }
.lernanker-denkfalle { display: grid; gap: .12rem; margin-top: .48rem; padding: .4rem .45rem; border-left: 3px solid #d99b42; border-radius: .4rem; background: #fff6dd; color: #6b5432; }
.lernanker-denkfalle b { color: #a26b28; font: 900 .54rem/1 var(--schrift-anzeige); letter-spacing: .075em; }.lernanker-denkfalle span { font-size: .66rem; line-height: 1.3; }
.lernanker-beispiel b { color: var(--missionsfarbe, var(--hinweis)); font: 900 .56rem/1 var(--schrift-anzeige); letter-spacing: .08em; }
.lernanker-beispiel span { font-size: .67rem; line-height: 1.3; }
.lernanker-uebungsinsel { width: 100%; margin-top: .48rem; min-height: 2.15rem; border: 1px solid color-mix(in srgb, var(--missionsfarbe, var(--hinweis)) 62%, #5b826e); border-radius: .55rem; background: #eaf6e5; color: #356550; font: 800 .63rem/1.1 var(--schrift-anzeige); letter-spacing: .03em; cursor: pointer; }.lernanker-uebungsinsel:hover, .lernanker-uebungsinsel:focus-visible { background: #d8eed1; }.lernanker-uebungsinsel:disabled { opacity: .78; cursor: default; }

/* --- Sonstiges --------------------------------------------------------- */

.bilanz { margin: 0; font-size: 1.3rem; color: var(--stahl-600); }
.bilanz b {
  font-family: var(--schrift-zahl);
  font-size: 2.6rem;
  color: var(--kreide);
  margin-right: .35rem;
}
.fussnote { margin: 0; color: var(--stahl-500); font-size: .85rem; }
.fussnote.warnung {
  color: var(--warn);
  border-left: 3px solid var(--warn);
  padding-left: .6rem;
}
.stoerung-text {
  white-space: pre-wrap;
  font-family: var(--schrift-zahl);
  font-size: .9rem;
  color: var(--stahl-600);
  border: 1px solid var(--stahl-300);
  padding: .8rem;
  overflow-x: auto;
}

/* Kurzes Aufblitzen bei angenommener Antwort — der einzige Effekt hier. */
@keyframes annahme {
  0%   { box-shadow: inset 0 0 0 2px var(--signal); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
.auftrag.angenommen { animation: annahme .45s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
.hinweisleiste[hidden] { display: none; }

/* --- Meilenstein am Schichtende ------------------------------------------
   Anders als die Praemien darunter: seltener (nur sechsmal im ganzen Spiel,
   siehe MEILENSTEINE in werkstatt/katze.js) und deshalb bewusst auffaelliger
   gestaltet — ein Rahmen auf allen vier Seiten statt nur links, damit er wie
   ein kleines Ereignis wirkt, nicht wie eine weitere Zeile in einer Liste. */
.meilenstein {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  border: 2px solid var(--warn);
  border-radius: var(--rundung-klein);
  background: linear-gradient(180deg, #fffaf0, #fff3dd);
  padding: .7rem .9rem .8rem;
}
.meilenstein[hidden] { display: none; }
.meilenstein-marke {
  font-family: var(--schrift-anzeige);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warn);
  flex: none;
}
.meilenstein-satz { margin: 0; }

/* --- Sammelkarte am Schichtende ------------------------------------------
   Faerbt sich per --fachfarbe passend zum Fach der Karte (in JS gesetzt,
   siehe zeichneSammelkarte in main.js) — dieselbe Technik wie die
   Fach-Zeilen bei der Themenauswahl, hier aber pro Karte statt pro Zeile. */
.sammelkarte {
  --fachfarbe: var(--warn);
  border: 2px solid var(--fachfarbe);
  border-radius: var(--rundung);
  background: var(--stahl-100);
  box-shadow: 0 4px 14px rgba(122,74,32,.14);
  padding: .8rem 1rem 1rem;
}
.sammelkarte[hidden] { display: none; }
.sammelkarte { position: relative; }
/* Gemaltes Wesen-Portrait als kleines Avatarbild -- eins pro Wesen, nicht
   pro Karte (siehe WESEN_PORTRAIT in main.js). Fehlt es fuer ein Fach,
   bleibt einfach Platz frei statt eines Platzhalters. */
.sammelkarte-portrait {
  position: absolute;
  top: .7rem;
  right: .8rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  border: 2px solid var(--fachfarbe);
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.sammelkarte-portrait[hidden] { display: none; }
.sammelkarte-marke {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fachfarbe);
  max-width: calc(100% - 4.4rem);
}
.sammelkarte-titel { margin: .15rem 4.4rem .3rem 0; font-size: 1.15rem; color: var(--kreide); }
.sammelkarte-satz { margin: 0; }

/* --- Sammelalbum (eigener Schirm) ----------------------------------------- */
.schirm-sammlung { gap: 1rem; }
.sammlung-liste { display: grid; gap: .7rem; }
.sammlung-gruppe-marke {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fachfarbe, var(--stahl-600));
  margin: .6rem 0 -.1rem;
}
.sammlung-gruppe-portrait {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 2px solid var(--fachfarbe, var(--stahl-600));
  object-fit: cover;
}
.sammlung-karte {
  --fachfarbe: var(--stahl-500);
  border-left: 3px solid var(--fachfarbe);
  background: var(--stahl-100);
  padding: .55rem .75rem .65rem;
}
.sammlung-karte-titel { margin: 0 0 .2rem; font-size: 1rem; color: var(--kreide); }
.sammlung-karte-satz { margin: 0; font-size: .95rem; color: var(--stahl-600); }
.sammlung-leer[hidden] { display: none; }

/* Persönliche Wesen-Hütte: Detailansicht statt nüchterner Steckliste */
.schirm-wesen-detail { background: linear-gradient(155deg, #fff9e8, #e8f3ec 72%, #d2e8e1); }
.revier-boden { stroke: rgba(120, 92, 54, .35); stroke-width: 1; }
.revier-motiv { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; fill: none; color: var(--fachfarbe, #80542a); }
.revier-motiv.revier-gemeistert { fill: var(--fachfarbe, #80542a); fill-opacity: .82; }
.revier-motiv.revier-geuebt { opacity: .6; }
.revier-motiv.revier-dunkel { opacity: .28; }
.wesen-begruesst .katze-bild { animation: wesen-begruesst .65s ease-out; }
@keyframes wesen-begruesst { 35% { transform: translateY(-8px) rotate(-2deg) scale(1.04); } 70% { transform: translateY(1px) rotate(2deg); } }

/* --- Praemien am Schichtende ------------------------------------------- */

.praemien { display: grid; gap: .5rem; }
.praemien[hidden] { display: none; }

.praemie {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  border-left: 3px solid var(--stahl-500);
  background: var(--stahl-100);
  padding: .55rem .75rem;
}
.praemie-marke {
  font-family: var(--schrift-anzeige);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stahl-600);
  flex: none;
}
.praemie-zug {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: var(--warn);
  flex: none;
}
.praemie-zug .posten-symbol { width: 1.5rem; height: 1.5rem; color: var(--warn); }
/* Zahlende Praemien heben sich ab, Vermerke bleiben ruhig. */
.praemie-zahlend { border-left-color: var(--warn); }
.praemie-zahlend .praemie-marke { color: var(--warn); }

.posten-menge i { font-style: normal; font-size: .7em; color: var(--stahl-500); margin-left: .1em; }

/* --- Werkstattkatze ----------------------------------------------------- */

.katzenplatz {
  margin: 0;
  border: 1px solid var(--stahl-300);
  border-radius: var(--rundung);
  background:
    radial-gradient(75% 95% at 50% 100%, rgba(255,184,77,.45), transparent 72%),
    linear-gradient(180deg, #fffdf8, #fff2dc);
  padding: .6rem .8rem .5rem;
}
.katze {
  display: block;
  /* Etwas heller als die alte flache Fassung: der radiale Verlauf setzt
     das Licht nur punktuell, wo der lineare die ganze Oberseite aufhellte —
     mit den alten Werten verschwand Ohm auf der dunklen Karte fast zum
     blossen Umriss. --fell-glanz muss hier stehen (nicht nur in :root),
     sonst faellt der Verlauf auf ein viel zu helles Grau zurueck. */
  --fell-hell: #f7a94a;
  --fell-dunkel: #c96a1c;
  --fell-glanz: #ffd28a;
}
.katze-bild { display: block; width: 100%; height: auto; max-height: 34svh; }

.katze .fell {
  fill: var(--fell-fuellung);
  stroke: #a8541a;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
/* Kopf und Ohren bekommen ihren eigenen Lichteinfall, sonst wirken sie
   wie aus demselben flachen Stueck geschnitten wie der Koerper. */
.katze .fell-kopf { fill: var(--fell-fuellung-kopf); }
/* Wangenpolster: nur Aufhellung, keine Kontur — sie sollen woelben,
   nicht als eigene Form lesbar sein. */
.katze .wange {
  fill: var(--fell-glanz, var(--stahl-600));
  opacity: .3;
  stroke: none;
}
/* Prototyp (2026-08-27, nur Ohm): siehe katze.js gesicht(). */
.katze .wange-rosa { fill: #ff9db4; opacity: .4; stroke: none; }
.katze .pfote { fill: var(--fell-fuellung-kopf); }
.katze .brust { fill: #ffe7c2; stroke: none; opacity: .9; }
.katze .innenohr { fill: #ff9db4; stroke: none; }
.katze .schatten { fill: #7a4a20; opacity: .22; }

/* Illustrations-Feinschliff: ein heller Saum auf der Lichtseite (derselben
   Seite wie der Glanzpunkt der Farbverlaeufe), ein weicher dunkler Fleck auf
   der Schattenseite (mix-blend-mode statt reiner Deckkraft, damit er die
   Fellfarbe abdunkelt statt sie zu uebermalen), und ein paar kurze
   Fellzug-Striche am Silhouettenrand -- macht aus der reinen Verlaufsflaeche
   eine plastischere, "gemalte" Form, ohne die Technik zu wechseln. Alle drei
   Klassen sind generisch (kein .katze-Praefix noetig fuer die Farbe) und
   damit auch fuer kuenftige Wesen wiederverwendbar. */
.glanzrand {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .65;
  mix-blend-mode: screen;
}
/* Neutrale dunkle Farbe: mix-blend-mode: multiply tarbt ohnehin mit der
   Farbe darunter ein, ein neutraler Ton funktioniert deshalb fuer jede
   Wesen-Farbe (Fell, Kristall, Blatt) gleich gut, statt je Art eine eigene
   Schattenfarbe pflegen zu muessen. */
.kernschatten { fill: #2a2a2a; opacity: .35; filter: var(--weichzeichner); mix-blend-mode: multiply; }
.fellzug { fill: none; stroke: #a8541a; stroke-width: 1.3; stroke-linecap: round; opacity: .45; }
/* Glanzlicht: der weiche, glasige Streiflichtfleck, der aus einer sauberen
   Verlaufsflaeche eine "Sticker"-Politur macht -- derselbe Trick, den
   Maskottchen-Grafik in Mobile-Spielen fast durchgaengig nutzt. screen statt
   opacity, damit er sich mit der Fellfarbe darunter mischt statt sie
   milchig zu uebermalen. */
.glanzlicht { fill: #fff; opacity: .35; filter: var(--weichzeichner); mix-blend-mode: screen; }
.katze .bein { fill: none; stroke: var(--stahl-500); stroke-width: 9; stroke-linecap: round; }

.katze .strich {
  fill: none;
  stroke: var(--stahl-600);
  stroke-width: 2;
  stroke-linecap: round;
}
.katze .bank { stroke: var(--stahl-400); stroke-width: 3; }
.katze .streifen, .katze .schweifring { stroke: var(--stahl-600); stroke-width: 2.4; opacity: .5; }
.katze .bein-teiler { stroke: var(--stahl-500); stroke-width: 1.6; opacity: .6; }
.katze .zehen { stroke: var(--stahl-500); stroke-width: 1.6; }
.katze .schnurrhaar { stroke: var(--stahl-500); stroke-width: 1.4; }
.katze .maul { stroke: var(--stahl-600); stroke-width: 1.8; }
.katze .lid { stroke: var(--stahl-600); }
.katze .lid.dick { stroke-width: 2.6; }

.katze .nase { fill: #ff6b8a; }
.katze .auge { fill: var(--auge-fuellung); stroke: #2a1c00; stroke-width: 1.2; }
.katze .pupille { fill: #14100a; }
.katze .glanz { fill: #fff; opacity: .85; }
.katze .glanz-klein { opacity: .55; }

.katze .ausruestung { fill: var(--stahl-300); stroke: var(--stahl-500); stroke-width: 2; }
.katze .ausruestung .strich { stroke: var(--warn); stroke-width: 1.6; }
.katze .ausruestung circle { fill: var(--warn); stroke: none; }

.katze .beute-bild { color: var(--warn); overflow: visible; }
.katze .beute-band { stroke: var(--stahl-500); }
.katze .beute-schein { fill: var(--schein-fuellung); opacity: .7; }
.katze .fragezeichen {
  fill: var(--warn);
  font-family: var(--schrift-anzeige);
  font-size: 22px;
  font-weight: 700;
}

/* Augen offen oder zu, je nach Munterkeit. */
.katze-schlafend .auge,
.katze-schlafend .pupille,
.katze-schlafend .glanz,
.katze-doesend .auge,
.katze-doesend .pupille,
.katze-doesend .glanz { display: none; }
.katze-wach .lid, .katze-munter .lid,
.katze-stupsend .lid, .katze-achselzuckend .lid, .katze-bringend .lid { display: none; }
.katze-stupsend .auge, .katze-stupsend .pupille, .katze-stupsend .glanz,
.katze-achselzuckend .auge, .katze-achselzuckend .pupille, .katze-achselzuckend .glanz,
.katze-bringend .auge, .katze-bringend .pupille, .katze-bringend .glanz { display: inline; }
.katze-doesend { --fell-hell: #e89c46; --fell-dunkel: #b85f18; }

/* Bewegung: sparsam und langsam. */
@keyframes atmen {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.02); }
}
@keyframes schweifwedeln {
  0%, 86%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(-6deg); }
}
@keyframes ohrzucken {
  0%, 92%, 100% { transform: rotate(0deg); }
  95%           { transform: rotate(-13deg); }
}
@keyframes blinzeln {
  0%, 95%, 100% { transform: scaleY(1); }
  97.5%         { transform: scaleY(.08); }
}
@keyframes glanzpuls {
  0%, 100% { opacity: .8; }
  50%      { opacity: .4; }
}
@keyframes schlummer {
  0%   { opacity: 0; transform: translate(0, 4px); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translate(6px, -10px); }
}
@keyframes stupsen {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3px, -2px); }
}
@keyframes hereintragen {
  0%   { transform: translate(14px, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

.katze-schlafend .katze-koerper,
.katze-doesend .katze-koerper {
  animation: atmen 4.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.katze-wach .schweif, .katze-munter .schweif {
  animation: schweifwedeln 9s ease-in-out infinite;
  transform-origin: 104px 95px;
}
.katze-munter .ohr-links {
  animation: ohrzucken 11s ease-in-out infinite;
  transform-origin: 70px 40px;
}
.katze-munter .augen, .katze-wach .augen {
  animation: blinzeln 7s ease-in-out infinite;
  transform-origin: 86px 41px;
}
.katze-munter .glanz, .katze-wach .glanz {
  animation: glanzpuls 5.5s ease-in-out infinite;
}
.katze-stupsend .pfote-gehoben {
  animation: stupsen 1.4s ease-in-out infinite;
  transform-origin: 70px 80px;
}
.katze-bringend .katze-koerper { animation: hereintragen .5s ease-out; }
.katze-schlafend .zzz {
  fill: var(--stahl-500);
  font-family: var(--schrift-anzeige);
  font-size: 13px;
  opacity: 0;
  animation: schlummer 4.5s ease-out infinite;
}
.katze-schlafend .zzz-2 { animation-delay: 1.5s; }
.katze-schlafend .zzz-3 { animation-delay: 3s; }
.katze-doesend .schlummer { display: none; }

/* --- Wesen je Fach: Mathematik ("Winkler") ------------------------------ */
/* Eigener Kristall-Look statt Fell -- teilt sich mit Ohm nur die generische
   .katze-Buehne (Werkbank, Groessen-/Munterkeits-Klassen, Ausruestungs-
   Grundstil), damit beide Arten auf denselben CSS-Regeln fuer Sichtbarkeit
   (schlafend/wach) und Skalierung (Wuchs) laufen, aber optisch klar
   unterscheidbar sind. */
.art-mathematik {
  --kristall-hell: #67b9ed;
  --kristall-dunkel: #296ca9;
  --kristall-glanz: #d7f1ff;
  --kristall-kontur: #153d68;
}
.art-mathematik.katze-doesend { --kristall-hell: #4f7fab; --kristall-dunkel: #1f4f7a; }

/* Winklers Farbe wächst mit: vom fast durchsichtigen Splitter zum tiefen,
   violett-blauen Palast. Damit unterscheiden sich die Stufen schon im Dex-
   Miniaturbild und nicht erst beim Lesen ihres Namens. */
.art-mathematik.wuchs-punkt { --kristall-hell: #a7ddf7; --kristall-dunkel: #4f91c4; --kristall-glanz: #effbff; }
.art-mathematik.wuchs-strecke { --kristall-hell: #82c8f0; --kristall-dunkel: #347fb8; --kristall-glanz: #dff5ff; }
.art-mathematik.wuchs-flaeche { --kristall-hell: #69bcec; --kristall-dunkel: #2b70ad; --kristall-glanz: #d8f1ff; }
.art-mathematik.wuchs-koerper { --kristall-hell: #58afe4; --kristall-dunkel: #275f9f; --kristall-glanz: #ccecff; }
.art-mathematik.wuchs-druse { --kristall-hell: #77a9ed; --kristall-dunkel: #4b55b1; --kristall-glanz: #e0e8ff; }
.art-mathematik.wuchs-kristallgarten { --kristall-hell: #7aa7f4; --kristall-dunkel: #563ba9; --kristall-glanz: #eadfff; }
.art-mathematik.wuchs-kristallpalast { --kristall-hell: #a78cf2; --kristall-dunkel: #4a2b91; --kristall-glanz: #f4e9ff; --kristall-kontur: #30205f; }

.art-mathematik .kristall {
  fill: var(--kristall-fuellung);
  stroke: var(--kristall-kontur);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-mathematik .glanzflaeche { fill: var(--kristall-glanz-fuellung); stroke: none; opacity: .9; }
.art-mathematik .glanzpunkt { fill: #fff; stroke: none; opacity: .55; }
.art-mathematik .brustfacette { fill: var(--kristall-glanz); opacity: .34; stroke-width: 1.1; }
.art-mathematik .fuss { filter: var(--weicher-schatten); }
.art-mathematik .koerper-liegend { opacity: .92; }
.art-mathematik .schlaf-kopf { filter: var(--weicher-schatten); }
.art-mathematik .schlaf-ohr { fill: var(--kristall-hell); stroke-width: 1.4; }
.art-mathematik .schlaf-glanz { opacity: .72; }
.art-mathematik .schlaf-rueckenfacette { fill: var(--kristall-dunkel); opacity: .38; stroke-width: 1.1; }
.art-mathematik .schlaf-brustfacette { fill: var(--kristall-glanz); opacity: .3; stroke-width: 1; }
.art-mathematik .schlaf-pfote { fill: var(--kristall-hell); stroke-width: 1.25; }
.art-mathematik .schlaf-facetten { opacity: .24; }
.art-mathematik .schlaf-lid { fill: none; stroke: var(--kristall-kontur); stroke-width: 1.8; stroke-linecap: round; }
.art-mathematik .schlaf-wange { opacity: .32; }
.art-mathematik .schlaf-mund { stroke-width: 1.2; }
.art-mathematik .winkler-schlafkoerper {
  transform-origin: 82px 95px;
  animation: winkler-atmet 4.8s ease-in-out infinite;
}
.art-mathematik .facettenlinie { stroke: var(--kristall-kontur); stroke-width: 1.15; opacity: .28; }
.art-mathematik .winkler-schatten { fill: var(--kristall-kontur); opacity: .2; stroke: none; filter: var(--weichzeichner); }
.art-mathematik .auge { fill: #eaf8ff; stroke: var(--kristall-kontur); stroke-width: 1.2; }
.art-mathematik .winkler-pupille { fill: #172746; stroke: none; }
.art-mathematik .winkler-wange { fill: #f39bc1; stroke: none; opacity: .38; }
.art-mathematik .winkler-mund { fill: none; stroke: var(--kristall-kontur); stroke-width: 1.45; stroke-linecap: round; }
.art-mathematik .ohr-links, .art-mathematik .ohr-rechts { fill: var(--kristall-hell); stroke: var(--kristall-kontur); stroke-width: 1.4; }
.art-mathematik .zeiger-stab { stroke: var(--kristall-kontur); stroke-width: 2; }
.art-mathematik .zeiger-spitze { fill: #ffbd4a; stroke: var(--kristall-kontur); stroke-width: 1.2; filter: var(--weicher-schatten); }
.art-mathematik .fund-faden { stroke: var(--stahl-500); }

/* Stufenkulissen --------------------------------------------------------- */
.art-mathematik .winkler-stufe { pointer-events: none; }
.art-mathematik .stufen-aura { fill: #dff5ff; stroke: var(--kristall-hell); stroke-width: 1.5; opacity: .3; }
.art-mathematik .stufen-linie { fill: none; stroke: var(--kristall-hell); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.art-mathematik .stufen-knoten { fill: #fff; stroke: var(--kristall-dunkel); stroke-width: 1.5; filter: var(--weicher-schatten); }
.art-mathematik .stufen-knoten-haupt { animation: winkler-knoten 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-mathematik .stufen-knoten-mitte { fill: #ffbd4a; }
.art-mathematik .stufen-flaeche { fill: var(--kristall-hell); stroke: var(--kristall-dunkel); stroke-width: 1.4; opacity: .15; }
.art-mathematik .stufen-flaeche-linie { fill: none; stroke: var(--kristall-dunkel); stroke-width: .9; opacity: .23; }
.art-mathematik .stufen-koerper { fill: var(--kristall-hell); stroke: var(--kristall-dunkel); stroke-width: 1.5; opacity: .11; }
.art-mathematik .stufen-koerper-linie { fill: none; stroke: var(--kristall-dunkel); stroke-width: 1.1; opacity: .24; }
.art-mathematik .stufen-kristall,
.art-mathematik .palast-turm,
.art-mathematik .palast-bogen {
  fill: var(--kristall-fuellung);
  stroke: var(--kristall-kontur);
  stroke-width: 1.35;
  stroke-linejoin: round;
  opacity: .78;
  filter: var(--weicher-schatten);
}
.art-mathematik .stufen-kristall-2,
.art-mathematik .stufen-kristall-4 { opacity: .55; }
.art-mathematik .stufen-boden { fill: var(--kristall-dunkel); opacity: .18; }
.art-mathematik .stufen-funkeln { fill: #fff7bd; stroke: #ffbd4a; stroke-width: .7; transform-box: fill-box; transform-origin: center; animation: winkler-funkeln 3.4s ease-in-out infinite; }
.art-mathematik .funkeln-2 { animation-delay: 1.1s; }.art-mathematik .funkeln-3 { animation-delay: 2.2s; }
.art-mathematik .palast-bogen { opacity: .42; }
.art-mathematik .palast-facette { fill: none; stroke: var(--kristall-glanz); stroke-width: 1.2; opacity: .65; }
.art-mathematik .palast-krone { fill: #ffd36a; stroke: var(--kristall-kontur); stroke-width: 1.2; filter: var(--weicher-schatten); }

@keyframes winkler-knoten {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.45); opacity: 1; }
}
@keyframes winkler-funkeln {
  0%, 75%, 100% { transform: scale(.65); opacity: .25; }
  86% { transform: scale(1.35); opacity: 1; }
}
@keyframes winkler-atmet {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.025); }
}

/* Bewegung: ein schwingender Zeiger statt Schweif/Ohr, ein Facettenglanz
   statt Fellglanz -- eigenes Bewegungsvokabular, dieselbe Zurueckhaltung
   (langsam, selten) wie bei Ohm. */
@keyframes zeigerschwingen {
  0%, 84%, 100% { transform: rotate(0deg); }
  90%           { transform: rotate(-11deg); }
  95%           { transform: rotate(7deg); }
}
.art-mathematik.katze-wach .winkler-zeiger, .art-mathematik.katze-munter .winkler-zeiger {
  animation: zeigerschwingen 8s ease-in-out infinite;
}
.art-mathematik.katze-munter .glanzflaeche, .art-mathematik.katze-wach .glanzflaeche {
  animation: glanzpuls 6s ease-in-out infinite;
}
.art-mathematik.katze-munter .katze-koerper,
.art-mathematik.katze-wach .katze-koerper {
  animation: winkler-schweben 4.6s ease-in-out infinite;
  transform-origin: 86px 100px;
}
@keyframes winkler-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.7px); }
}

/* --- Wesen je Fach: Biologie ("Spross") ---------------------------------- */
/* Ein Blatt-Look statt Fell oder Kristall. Bewegung bewusst ueber Ohms/
   Winklers schon vorhandene generische Hooks gelegt (.schweif fuer die
   Ranke, .ohr-links/.ohr-rechts fuer die beiden Blaetter) -- siehe
   Kopfkommentar in wesen-biologie.js -- deshalb keine eigenen Keyframes
   fuer die Idle-Bewegung noetig, nur Farben/Formen. */
.art-biologie {
  --blatt-hell: #4fb894;
  --blatt-dunkel: var(--fach-biologie);
  --blatt-glanz: #bdf0d8;
}
.art-biologie.katze-doesend { --blatt-hell: #35896c; --blatt-dunkel: #0f5c48; }

.art-biologie .blatt {
  fill: var(--blatt-fuellung);
  stroke: #173a2e;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-biologie .topf, .art-biologie .topfrand { fill: #c98a5a; stroke: #7a4d2b; stroke-width: 1.6; }
.art-biologie .glanzflaeche { fill: var(--blatt-glanz-fuellung); stroke: none; opacity: .9; }
.art-biologie .koerper-liegend { opacity: .92; }
.art-biologie .blattadern { stroke: #173a2e; stroke-width: 1.2; opacity: .35; }
.art-biologie .spross-schatten { fill: #173a2e; opacity: .18; stroke: none; }
.art-biologie .auge { fill: var(--blatt-glanz); stroke: #173a2e; stroke-width: 1.2; }
.art-biologie .ohr-links, .art-biologie .ohr-rechts { fill: var(--blatt-hell); stroke: #173a2e; stroke-width: 1.4; }
.art-biologie .ranke { stroke: #173a2e; stroke-width: 2; fill: none; }
.art-biologie .ranke-blatt { fill: var(--blatt-hell); stroke: #173a2e; stroke-width: 1.4; }
.art-biologie .fund-faden { stroke: var(--stahl-500); }
.art-biologie.katze-munter .glanzflaeche, .art-biologie.katze-wach .glanzflaeche {
  animation: glanzpuls 5.5s ease-in-out infinite;
}

/* --- Wesen je Fach: Deutsch ("Feder") ------------------------------------- */
/* Ein Tinte-Look statt Fell/Kristall/Blatt. Wieder ueber die vorhandenen
   generischen Hooks bewegt (.schweif fuer die Federspitze, .ohr-links/
   .ohr-rechts fuer die beiden Tintenzacken) -- siehe Kopfkommentar in
   wesen-deutsch.js. */
.art-deutsch {
  --tinte-hell: #ee7fac;
  --tinte-dunkel: var(--fach-deutsch);
  --tinte-glanz: #ffd0e4;
}
.art-deutsch.katze-doesend { --tinte-hell: #b8548a; --tinte-dunkel: #7a1c4a; }

.art-deutsch .tinte {
  fill: var(--tinte-fuellung);
  stroke: #3a1730;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-deutsch .klecksbogen { fill: var(--tinte-fuellung); stroke: #3a1730; stroke-width: 1.8; }
.art-deutsch .glanzflaeche { fill: var(--tinte-glanz-fuellung); stroke: none; opacity: .9; }
.art-deutsch .koerper-liegend { opacity: .92; }
.art-deutsch .tintenspritzer { stroke: #3a1730; stroke-width: 1.2; opacity: .35; }
.art-deutsch .feder-schatten { fill: #3a1730; opacity: .18; stroke: none; }
.art-deutsch .auge { fill: var(--tinte-glanz); stroke: #3a1730; stroke-width: 1.2; }
.art-deutsch .ohr-links, .art-deutsch .ohr-rechts { fill: var(--tinte-hell); stroke: #3a1730; stroke-width: 1.4; }
.art-deutsch .tintenspur { stroke: #3a1730; stroke-width: 2; fill: none; }
.art-deutsch .feder-spitze { fill: var(--tinte-hell); stroke: #3a1730; stroke-width: 1.4; }
.art-deutsch .fund-faden { stroke: var(--stahl-500); }
.art-deutsch .tintenfass-inhalt { fill: var(--tinte-dunkel); stroke: none; opacity: .85; }
.art-deutsch.katze-munter .glanzflaeche, .art-deutsch.katze-wach .glanzflaeche {
  animation: glanzpuls 5.5s ease-in-out infinite;
}

.art-englisch {
  --feder-hell: #6fcf8e;
  --feder-dunkel: var(--fach-englisch);
  --feder-glanz: #d4f5df;
}
.art-englisch.katze-doesend { --feder-hell: #3f8f5c; --feder-dunkel: #1c5c34; }

.art-englisch .feder {
  fill: var(--feder-fuellung);
  stroke: #0d3a20;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-englisch .glanzflaeche { fill: var(--feder-glanz-fuellung); stroke: none; opacity: .9; }
.art-englisch .koerper-liegend { opacity: .92; }
.art-englisch .federstrich { stroke: #0d3a20; stroke-width: 1.2; opacity: .35; }
.art-englisch .moewe-schatten { fill: #0d3a20; opacity: .18; stroke: none; }
.art-englisch .auge { fill: var(--feder-glanz); stroke: #0d3a20; stroke-width: 1.2; }
.art-englisch .ohr-links, .art-englisch .ohr-rechts { fill: var(--feder-hell); stroke: #0d3a20; stroke-width: 1.4; }
.art-englisch .schnabel { fill: #e8a23c; stroke: #0d3a20; stroke-width: 1.2; }
.art-englisch .wimpelstange { stroke: #0d3a20; stroke-width: 2; fill: none; }
.art-englisch .wimpel-stoff { fill: var(--feder-hell); stroke: #0d3a20; stroke-width: 1.4; }
.art-englisch .fund-faden { stroke: var(--stahl-500); }
.art-englisch.katze-munter .glanzflaeche, .art-englisch.katze-wach .glanzflaeche {
  animation: glanzpuls 5.5s ease-in-out infinite;
}

.art-geschichte {
  --ton-hell: #dc9c54;
  --ton-dunkel: var(--fach-geschichte);
  --ton-glanz: #f7d9a8;
}
.art-geschichte.katze-doesend { --ton-hell: #96652c; --ton-dunkel: #6b4413; }

.art-geschichte .ton {
  fill: var(--ton-fuellung);
  stroke: #4a2c14;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-geschichte .glanzflaeche { fill: var(--ton-glanz-fuellung); stroke: none; opacity: .9; }
.art-geschichte .koerper-liegend { opacity: .92; }
.art-geschichte .scherbenriss { stroke: #4a2c14; stroke-width: 1.2; opacity: .35; fill: none; }
.art-geschichte .ton-schatten { fill: #4a2c14; opacity: .18; stroke: none; }
.art-geschichte .auge { fill: var(--ton-glanz); stroke: #4a2c14; stroke-width: 1.2; }
.art-geschichte .ohr-links, .art-geschichte .ohr-rechts { fill: var(--ton-hell); stroke: #4a2c14; stroke-width: 1.4; }
.art-geschichte .faehnchenstange { stroke: #4a2c14; stroke-width: 2; fill: none; }
.art-geschichte .faehnchen-stoff { fill: var(--ton-hell); stroke: #4a2c14; stroke-width: 1.4; }
.art-geschichte .fund-faden { stroke: var(--stahl-500); }
.art-geschichte.katze-munter .glanzflaeche, .art-geschichte.katze-wach .glanzflaeche {
  animation: glanzpuls 5.5s ease-in-out infinite;
}

.art-erdkunde {
  --fels-hell: #4fb3d9;
  --fels-dunkel: var(--fach-erdkunde);
  --fels-glanz: #bfe9f7;
}
.art-erdkunde.katze-doesend { --fels-hell: #2c7896; --fels-dunkel: #0f4d63; }

.art-erdkunde .fels {
  fill: var(--fels-fuellung);
  stroke: #0a2d3a;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.art-erdkunde .glanzflaeche { fill: var(--fels-glanz-fuellung); stroke: none; opacity: .9; }
.art-erdkunde .koerper-liegend { opacity: .92; }
.art-erdkunde .gesteinsschicht { stroke: #0a2d3a; stroke-width: 1.2; opacity: .35; fill: none; }
.art-erdkunde .fels-schatten { fill: #0a2d3a; opacity: .18; stroke: none; }
.art-erdkunde .auge { fill: var(--fels-glanz); stroke: #0a2d3a; stroke-width: 1.2; }
.art-erdkunde .ohr-links, .art-erdkunde .ohr-rechts { fill: var(--fels-hell); stroke: #0a2d3a; stroke-width: 1.4; }
.art-erdkunde .nadelstange { stroke: #0a2d3a; stroke-width: 2; fill: none; }
.art-erdkunde .nadel-spitze { fill: #e0397a; stroke: #0a2d3a; stroke-width: 1.2; }
.art-erdkunde .fund-faden { stroke: var(--stahl-500); }
.art-erdkunde.katze-munter .glanzflaeche, .art-erdkunde.katze-wach .glanzflaeche {
  animation: glanzpuls 5.5s ease-in-out infinite;
}

.feierabend-kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.feierabend-kopf .bilanz { flex: 1 1 10rem; }
.katzenplatz-klein { flex: none; width: clamp(9rem, 34vw, 13rem); padding: .3rem .4rem; }
.katzenplatz-klein .katze-bild { max-height: 8rem; }

/* Kleine Ohm neben dem Hinweisknopf und im Fundband. */
.katze-klein { width: clamp(4.5rem, 18vw, 6rem); flex: none; }
.katze-klein .katze-bild { max-height: 5rem; }
.ohm-zeile { display: flex; align-items: center; gap: .6rem; }
.unsicher-praefix {
  color: var(--stahl-500);
  font-style: italic;
}
.katze-fund { width: clamp(4rem, 16vw, 5.5rem); }
.katze-fund .katze-bild { max-height: 4.5rem; }
.fund { align-items: center; }
/* In der kleinen Ansicht stoeren Werkbanklinie und Ausruestung nur. */
.katze-klein .bank, .katze-klein .ausruestung { display: none; }

/* --- Werkbank: was er für Ohm baut -------------------------------------- */

.werkbank { display: grid; gap: .4rem; }
.werkbank[hidden] { display: none; }
.werkbank-marke { display: block; }

.vorhaben {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  border-left: 3px solid var(--stahl-500);
  background: var(--stahl-100);
  padding: .45rem .7rem;
}
.vorhaben.machbar { border-left-color: var(--warn); }
.vorhaben-name { font-size: 1rem; flex: none; }
.vorhaben.machbar .vorhaben-name { color: var(--kreide); }
.vorhaben:not(.machbar) .vorhaben-name { color: var(--stahl-600); }

.vorhaben-kosten { display: flex; gap: .4rem; flex-wrap: wrap; }
.kosten-posten {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: var(--schrift-zahl);
  color: var(--stahl-600);
}
.kosten-posten .posten-symbol { width: 1.1rem; height: 1.1rem; }
/* Fehlendes Material ist eine Ansage, kein Tadel: nur blasser. */
.kosten-posten.fehlt { color: var(--stahl-500); opacity: .55; }

.knopf-bauen { margin-left: auto; font-size: .85rem; padding: .45rem .9rem; min-height: 40px; }
.knopf-bauen[disabled] { opacity: .35; cursor: default; }
.knopf-bauen:not([disabled]) { background: var(--warn); color: #1a1200; border-color: #ffca4d; }

/* --- Bauten im Katzenbild ----------------------------------------------- */

.katze .bau-korb { fill: var(--holz-fuellung); stroke: #a8541a; stroke-width: 2; }
.katze .bau-flechtwerk { fill: none; stroke: #a8541a; stroke-width: 1.6; opacity: .8; }
.katze .bau-heizplatte { fill: var(--metall-fuellung); stroke: var(--warn); stroke-width: 1.5; }
.katze .bau-strich { fill: none; stroke: var(--stahl-500); stroke-width: 3; stroke-linecap: round; }
.katze .bau-schirm { fill: var(--metall-fuellung); stroke: var(--stahl-500); stroke-width: 2; filter: var(--weicher-schatten); }
.katze .bau-licht { fill: var(--warn); }
.katze .bau-schein { fill: var(--schein-fuellung); }
.katze .staubkorn { fill: var(--warn); r: 1; opacity: 0; }
@keyframes staubdrift {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: .3; }
  80%  { opacity: .15; }
  100% { opacity: 0; transform: translate(-5px, -20px); }
}
.katze .staubkorn-1 { animation: staubdrift 9s ease-in-out infinite; }
.katze .staubkorn-2 { animation: staubdrift 12s ease-in-out infinite 3s; }
.katze .staubkorn-3 { animation: staubdrift 7.5s ease-in-out infinite 1.5s; }
.katze .bau-feder { fill: none; stroke: var(--stahl-500); stroke-width: 2; }
.katze .bau-gewicht { fill: var(--metall-fuellung); stroke: var(--stahl-500); stroke-width: 2; }
.katze .bau-gewicht-glanz { fill: #fff; opacity: .85; }
.katze .bau-platte { fill: #fff; stroke: var(--warn); stroke-width: 1.5; filter: var(--weicher-schatten); }
.katze .bau-papier { fill: #fff; stroke: var(--stahl-500); stroke-width: 1.5; filter: var(--weicher-schatten); }
.katze .bau-papier-linie { fill: none; stroke: var(--kristall-hell, var(--stahl-300)); stroke-width: .6; opacity: .6; }
.katze .bau-name {
  fill: var(--warn);
  font-family: var(--schrift-anzeige);
  font-size: 9px;
  letter-spacing: .1em;
  text-anchor: middle;
}
/* Im Körbchen braucht sie keinen Bodenschatten. */
.katze.hat-koerbchen .schatten { display: none; }
.katze.hat-lampe { --fell-hell: #ffb75e; --fell-dunkel: #cf7523; }

@keyframes baumeln {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(9deg); }
}
.katze-munter .spielzeug, .katze-wach .spielzeug {
  animation: baumeln 3.2s ease-in-out infinite;
  transform-origin: 26px 0;
}

/* --- Tastenfeld --------------------------------------------------------- */
/* Eigene Tasten statt Systemtastatur: iOS liefert im Ziffernblock kein
   Minus, und die Systemtastatur verdeckt die halbe Aufgabe. */

.tastenfeld {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), 1fr);
  gap: .4rem;
  margin-top: .6rem;
}
.tastenfeld[hidden] { display: none; }

.taste {
  font-family: var(--schrift-zahl);
  font-size: 1.5rem;
  font-weight: 700;
  min-height: 56px;
  background: linear-gradient(180deg, #ffffff, #fff0d8);
  color: var(--kreide);
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  box-shadow: 0 3px 0 rgba(240,168,96,.5);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.taste:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(240,168,96,.5); }
.taste:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.taste[disabled] { opacity: .35; }

.taste-loeschen { color: var(--stahl-600); font-size: 1.3rem; }
.taste[data-zeichen="vorzeichen"] { color: var(--warn); font-weight: 700; }

.taste-abgeben {
  /* Teilt sich die letzte Reihe mit der Loeschtaste, statt sie allein
     stehen zu lassen. */
  grid-column: span calc(var(--spalten, 3) - 1);
  font-family: var(--schrift-anzeige);
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffb057, var(--warn));
  color: #fff;
  border: none;
  box-shadow: 0 3px 0 #b23c05;
}
@media (hover: hover) and (pointer: fine) { .taste-abgeben:hover { background: linear-gradient(180deg, #ffbe72, #f5670f); } }

/* Bei eigenem Tastenfeld braucht die Zeile keinen zweiten Abgeben-Knopf. */
.knopf-annehmen[hidden] { display: none; }
.taste-bild { width: 1.6rem; height: 1.6rem; display: block; margin: 0 auto; }

/* --- Tippübung ---------------------------------------------------------- */

.tippfeld { display: grid; gap: .9rem; }
.tippfeld[hidden] { display: none; }

.tippzeile {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: .12em;
  line-height: 1.6;
  word-break: break-word;
  background: var(--stahl-000);
  border: 1px solid var(--stahl-400);
  padding: .8rem .9rem;
}
.zeichen { color: var(--stahl-500); }
.zeichen.getippt { color: var(--signal); }
.zeichen.dran {
  color: #1a1200;
  background: var(--warn);
  box-shadow: 0 3px 0 #a06f00;
}
@keyframes zucken {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
/* Ein Vertipper zuckt nur — kein rotes Kreuz, kein Abzug. */
.zeichen.zuckt { animation: zucken .18s ease-in-out 2; }

.tippfuehrung {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--stahl-300);
  padding-top: .7rem;
}
.tippfinger {
  font-family: var(--schrift-anzeige);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warn);
}

.haende { display: flex; align-items: flex-end; gap: .5rem; margin-left: auto; }
.hand { display: flex; align-items: flex-end; gap: .18rem; }
.finger {
  display: block;
  width: .5rem;
  height: var(--hoehe, 26px);
  background: var(--stahl-400);
  border: 1px solid var(--stahl-500);
  border-radius: .25rem .25rem 0 0;
}
.daumen {
  display: block;
  width: 1.4rem;
  height: .5rem;
  background: var(--stahl-400);
  border: 1px solid var(--stahl-500);
  border-radius: .25rem;
}
.finger-aktiv { background: var(--warn); border-color: #ffca4d; }

/* --- Fachauswahl -------------------------------------------------------- */

.faecher {
  display: grid;
  gap: .5rem;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  padding: .55rem .7rem;
}
.fach-alles { margin-left: auto; }

/* Jede Insel ihre eigene Fundstueck-Farbe -- direkt per JS gesetzt
   (zeichneFaecher() in main.js), nicht mehr per :nth-of-type erraten. Die
   alte Positions-Zuordnung passte nur fuer die ersten sechs Faecher und
   faerbte Biologie/Geschichte/Erdkunde unbemerkt falsch ein. */
.fachzeile {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--fachfarbe) 10%, #fff), #fff);
  border: 2px solid color-mix(in srgb, var(--fachfarbe) 35%, var(--stahl-200));
  border-radius: var(--rundung);
  padding: .7rem .8rem;
}
.fachname {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-align: left;
  font-family: var(--schrift-anzeige);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fachfarbe);
  background: #fff;
  border: 2px solid var(--fachfarbe);
  border-radius: var(--rundung-klein);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fachfarbe) 28%, transparent);
  padding: .3rem .7rem;
  cursor: pointer;
}
.fachname-symbol { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; flex: none; }
@media (hover: hover) and (pointer: fine) { .fachname:hover { background: color-mix(in srgb, var(--fachfarbe) 10%, #fff); } }
.fachname.aktiv { background: var(--fachfarbe); color: #fff; }
.fachname.aktiv .fachname-symbol { stroke: #fff; }
.fachname:focus-visible { outline: 2px solid var(--fachfarbe); outline-offset: 2px; }
.themen { display: flex; gap: .4rem; flex-wrap: wrap; }
.faecher[hidden] { display: none; }

/* Das Sternbild einer Insel: ein Stern pro Handgriff, siehe main.js
   zeichneSternbild()/wesen.js sternbildJeFach(). Dunkler Hintergrund statt
   der hellen Fachzeile darunter -- sonst gingen die dunklen (nie
   angefassten) Sterne im hellen Kartenpapier unter, und genau die sollen ja
   einfach ruhiger Nachthimmel sein, keine Leerstelle. */
.sternbild {
  display: block;
  width: 100%;
  height: 1.5rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #1c1533, #2b2050);
}
.stern { stroke: none; }
.stern-dunkel { r: 1; fill: #6a5f96; opacity: .5; }
.stern-geuebt { r: 1.3; fill: #cfd6ff; opacity: .85; }
.stern-gemeistert {
  r: 1.7;
  fill: var(--gold);
  opacity: 1;
  animation: sternfunkeln 2.6s ease-in-out infinite;
}
/* Nicht alle im Gleichtakt -- ein Sternenhimmel, der komplett synchron
   blinkt, wirkt wie ein Fehler, nicht wie Licht. Deckt die ersten sechs
   Positionen ab, der Rest faellt auf den Basiswert zurueck. */
.stern-gemeistert:nth-of-type(6n+1) { animation-delay: .3s; }
.stern-gemeistert:nth-of-type(6n+2) { animation-delay: .9s; }
.stern-gemeistert:nth-of-type(6n+3) { animation-delay: 1.5s; }
.stern-gemeistert:nth-of-type(6n+4) { animation-delay: 2.1s; }
.stern-gemeistert:nth-of-type(6n+5) { animation-delay: 1.1s; }
@keyframes sternfunkeln {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Themenknoepfe tragen die Farbe ihres Fachs, aber ruhiger als der
   Fachknopf selbst — sonst konkurrieren sie mit ihm. */
.fach {
  font-family: var(--schrift-text);
  font-size: .9rem;
  background: #fff;
  color: var(--kreide);
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  box-shadow: 0 3px 0 rgba(240,168,96,.4);
  padding: .45rem .8rem;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.themen .fach {
  border-color: color-mix(in srgb, var(--fachfarbe) 42%, #fff);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fachfarbe) 20%, transparent);
}
@media (hover: hover) and (pointer: fine) { .fach:hover { background: var(--stahl-200); } }
.fach:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(240,168,96,.4); }
.fach:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.fach.aktiv {
  background: var(--warn);
  color: #fff;
  border-color: var(--warn);
  font-weight: 600;
}
.themen .fach.aktiv {
  background: var(--fachfarbe);
  border-color: var(--fachfarbe);
}

/* --- Eilauftrag --------------------------------------------------------- */

.eilband {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: -1rem -1rem .2rem;
  padding: .5rem .8rem;
  background: repeating-linear-gradient(
    45deg, #7a2d10 0 12px, #913a16 12px 24px);
  border-bottom: 2px solid #e2662f;
}
.eilband[hidden] { display: none; }

.eil-marke {
  font-family: var(--schrift-anzeige);
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffd9a0;
  flex: none;
}
.eil-lohn {
  font-family: var(--schrift-zahl);
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  padding: .05rem .45rem;
  flex: none;
}
.eil-bahn {
  flex: 1 1 6rem;
  height: .5rem;
  background: rgba(0, 0, 0, .4);
  min-width: 5rem;
}
.eil-balken {
  display: block;
  height: 100%;
  width: 100%;
  background: #ffb066;
  transition: width .2s linear;
}

/* Die ganze Karte zieht mit — der Alarm soll den Blick reissen. */
.auftrag.eilig {
  border-color: #e2662f;
  border-top-color: #e2662f;
  box-shadow: 0 0 0 1px #e2662f, 0 0 28px rgba(226, 102, 47, .25);
}
@keyframes alarmpuls {
  0%, 100% { box-shadow: 0 0 0 1px #e2662f, 0 0 28px rgba(226,102,47,.18); }
  50%      { box-shadow: 0 0 0 1px #ff8a4a, 0 0 34px rgba(226,102,47,.4); }
}
.auftrag.eilig { animation: alarmpuls 1.6s ease-in-out infinite; }

/* Abgelaufen: sachlich grau, keine Strafe. */
.eilband.verfallen {
  background: var(--stahl-200);
  border-bottom-color: var(--stahl-400);
}
.eilband.verfallen .eil-marke { color: var(--stahl-600); }
.eilband.verfallen .eil-lohn { color: var(--stahl-600); background: transparent; }
.eilband.verfallen .eil-bahn { display: none; }

.eilband.geschafft {
  background: repeating-linear-gradient(45deg, #2f6b40 0 12px, #38804c 12px 24px);
  border-bottom-color: var(--signal);
}
.eilband.geschafft .eil-marke { color: #cdf0d8; }
.eilband.geschafft .eil-bahn { display: none; }

/* Ohm reagiert auf jeden angenommenen Auftrag — kurz, nicht albern. */
@keyframes katzenhuepfer {
  0%   { transform: translateY(0) scaleY(1); }
  30%  { transform: translateY(-7px) scaleY(1.04); }
  60%  { transform: translateY(0) scaleY(.97); }
  100% { transform: translateY(0) scaleY(1); }
}
.katze.huepft { animation: katzenhuepfer .5s ease-out; }

/* Streichel-Reaktionen am Tor (main.js, katzeGestreichelt) -- eine von
   mehreren, zufaellig gewaehlt, damit wiederholtes Antippen sich wie ein
   echtes Tier anfuehlt statt wie derselbe Knopf-Effekt. Getrennt von den
   Idle-Animationen weiter oben (die laufen endlos leise mit), hier spielt
   jede Reaktion genau einmal pro Tap. */
@keyframes ohm-schnurren {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.018); }
  50%      { transform: scale(1); }
  75%      { transform: scale(1.018); }
}
.katze.schnurrt .katze-koerper { animation: ohm-schnurren 1.1s ease-in-out; transform-origin: 50% 100%; }

@keyframes ohm-langsam-blinzeln {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.05); }
}
.katze.blinzelt .augen { animation: ohm-langsam-blinzeln .9s ease-in-out; transform-origin: 86px 41px; }

@keyframes ohm-ohr-wackeln {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-9deg); }
  70%      { transform: rotate(7deg); }
}
.katze.ohrwackelt .ohr-links { animation: ohm-ohr-wackeln .6s ease-in-out; transform-origin: 70px 40px; }
.katze.ohrwackelt .ohr-rechts { animation: ohm-ohr-wackeln .6s ease-in-out reverse; transform-origin: 102px 40px; }

/* --- Akkord: die letzten anderthalb Minuten ----------------------------- */

.akkord {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  border: 2px solid var(--warn);
  background: linear-gradient(180deg, rgba(240,164,0,.16), rgba(240,164,0,.06));
  padding: .5rem .8rem;
}
.akkord[hidden] { display: none; }
.akkord-marke {
  font-family: var(--schrift-anzeige);
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warn);
  flex: none;
}
.akkord-text { font-size: .9rem; color: var(--kreide); }
.akkord-lohn {
  margin-left: auto;
  font-family: var(--schrift-zahl);
  font-size: 1.3rem;
  color: #1a1200;
  background: var(--warn);
  padding: .05rem .5rem;
  flex: none;
}
@keyframes akkordpuls {
  0%, 100% { border-color: var(--warn); }
  50%      { border-color: #ffd77a; }
}
.akkord { animation: akkordpuls 2s ease-in-out infinite; }

/* Der Zugang soll knallen, nicht schleichen. */
@keyframes zugang {
  0%   { border-color: var(--warn); background: var(--warn-tief);
         transform: translateY(-6px) scale(1.12); }
  60%  { transform: translateY(0) scale(1.02); }
  100% { border-color: var(--stahl-400); background: var(--stahl-200);
         transform: none; }
}

/* --- Mehrschrittige Aufgaben -------------------------------------------- */

.zwischenschritte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
  border-left: 3px solid var(--signal);
  padding-left: .7rem;
}
.zwischenschritte[hidden] { display: none; }
.zwischenschritte li { display: flex; gap: .6rem; align-items: baseline; }
.zwischen-marke {
  font-family: var(--schrift-anzeige);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stahl-600);
  min-width: 7rem;
}
.zwischen-wert {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}

.schrittkopf { display: flex; align-items: baseline; gap: .6rem; }
.schrittkopf[hidden] { display: none; }
.schritt-marke {
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warn);
}
.schritt-zaehler {
  margin-left: auto;
  font-family: var(--schrift-zahl);
  font-size: .8rem;
  color: var(--stahl-600);
}
.schritt-frage {
  margin: 0;
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
}
.schritt-frage[hidden] { display: none; }
/* Die Ausgangslage tritt zurueck, sobald ein Schritt dran ist. */
.auftrag:has(.schritt-frage:not([hidden])) .auftrag-text {
  font-size: 1rem;
  color: var(--stahl-600);
}

/* Ohm wächst mit dem Können: klein mit großem Kopf, später umgekehrt.
   Der Wuchs sitzt auf einer eigenen Gruppe — auf .katze-koerper wuerde ihn
   die Atem-Animation ueberschreiben, denn Animationen schlagen normale
   Deklarationen. Genau das war passiert: das Kaetzchen war groesser als die
   erwachsene Katze. */
.katze .katze-wuchs {
  transform: scale(var(--wuchs, 1));
  transform-origin: 86px 100px;
}
.katze .katze-kopf {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.wuchs-kaetzchen .katze-kopf,
.wuchs-jungkatze .katze-kopf { transform: scale(var(--kopfwuchs, 1)); }

/* --- Die Halle wächst mit -------------------------------------------------
   Dieselbe Woelbungstechnik wie bei Ohm: Holz- und Metallverlauf mit Licht
   oben links (siehe katze.js), statt flacher Einheitsfarbe. */

.katze .halle-brett { fill: var(--holz-fuellung); stroke: #a8541a; stroke-width: 1.5; }
.katze .halle-strebe { stroke: var(--stahl-400); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.katze .halle-kiste { fill: var(--holz-fuellung); stroke: #a8541a; stroke-width: 1.5; filter: var(--weicher-schatten); }
.katze .halle-kistenschatten { fill: #7a4a20; opacity: .18; }
.katze .halle-tafel { fill: var(--metall-fuellung); stroke: var(--stahl-500); stroke-width: 1.8; filter: var(--weicher-schatten); }
.katze .halle-haken { stroke: var(--stahl-500); stroke-width: 2; stroke-linecap: round; fill: none; }
.katze .halle-punkt { fill: var(--warn); }
.katze .halle-fenster { fill: #cfeaff; stroke: var(--stahl-500); stroke-width: 2.5; filter: var(--weicher-schatten); }
.katze .halle-sprosse { stroke: var(--stahl-400); stroke-width: 2; stroke-linecap: round; fill: none; }
.katze .halle-licht { fill: var(--fensterlicht-fuellung); }
.katze .halle-maschine { fill: var(--metall-fuellung); stroke: var(--stahl-500); stroke-width: 1.8; filter: var(--weicher-schatten); }
.katze .halle-anzeige { fill: var(--signal); }
.katze .halle-anzeige-glanz { fill: #fff; opacity: .8; }
/* Die Halle steht hinten und darf nie mit Ohm konkurrieren. */
.katze .halle { opacity: .9; }

/* --- Einführung ----------------------------------------------------------- */

.schirm-einfuehrung { gap: 1rem; }
.schild-klein { padding: .7rem 1rem; }
.schild-klein h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

.einf-bild { padding: .4rem .5rem; }
.einf-bild .katze-bild { max-height: 32svh; }

.einf-satz {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.5;
}
.einf-aktion { display: grid; justify-items: center; gap: .65rem; min-height: 2.8rem; margin-top: .15rem; }
.einf-aktionsknopf { min-width: min(100%, 18rem); }
.einf-zielwahl, .einf-probe { display: grid; width: min(100%, 29rem); gap: .55rem; }
.einf-zielwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.einf-zielwahl .knopf, .einf-probe .knopf { min-height: 3rem; text-align: left; }
.einf-probe { padding: .8rem; border: 2px solid #d8af62; border-radius: 1rem; background: linear-gradient(145deg, #fffbe8, #f4e2ad); color: #624226; }
.einf-probe b { font-size: .92rem; }
.einf-hilfe { min-height: 1.3rem; margin: .3rem auto 0; width: min(100%, 31rem); color: #725337; font-size: .84rem; font-weight: 700; line-height: 1.35; text-align: center; }
.schirm-einfuehrung .einf-weiter:disabled { opacity: .48; filter: grayscale(.25); cursor: not-allowed; transform: none; }
@media (max-width: 520px) { .einf-zielwahl { grid-template-columns: 1fr; }.einf-probe .knopf { min-height: 3.65rem; } }

.einf-steuerung {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem .8rem;
}
.einf-punkte { display: flex; gap: .4rem; }
.einf-punkte:empty { display: none; }
.einf-punkt {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--stahl-400);
}
.einf-punkt.hier { background: var(--warn); }
#einf-ueberspringen { grid-column: 2; grid-row: 1; justify-self: end; }
.einf-weiter { grid-column: 1 / -1; grid-row: 2; padding: .9rem; font-size: 1.1rem; }

/* Der Lotse (src/ui/lotse.js): geführte Ersteinführung. Die dunkle Umgebung
   ist nur Optik -- pointer-events bleiben aus, jeder echte Tap geht durch. */
.lotse { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.lotse-loch {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 14px; border: 3px solid #ffd36b;
  box-shadow: 0 0 0 9999px rgba(4, 20, 30, .74), 0 0 22px rgba(255, 211, 107, .55);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease, opacity .2s ease;
  pointer-events: none;
}
.lotse:not(.lotse-ruhig) .lotse-loch { animation: lotsePuls 1.9s ease-in-out infinite; }
@keyframes lotsePuls {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(4, 20, 30, .74), 0 0 14px rgba(255, 211, 107, .4); }
  50% { box-shadow: 0 0 0 9999px rgba(4, 20, 30, .74), 0 0 26px rgba(255, 211, 107, .8); }
}
.lotse-blase {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  width: min(23rem, 92vw); padding: .85rem 1rem;
  border: 2px solid #ffd36b; border-radius: 1rem;
  background: #0c2a33; color: #ffedbb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  pointer-events: auto;
  transition: left .28s ease, top .28s ease;
}
.lotse-text { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.4; }
.lotse-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.lotse-blase button {
  padding: .5rem .9rem; border-radius: .7rem; font: inherit; font-weight: 700; cursor: pointer;
}
.lotse-ende { border: 1px solid rgba(255, 237, 187, .4); background: transparent; color: rgba(255, 237, 187, .8); }
.lotse-weiter { border: 2px solid #e8c47b; background: linear-gradient(180deg, #e7bb6d, #c78c42); color: #16363d; }
.lotse-ende:active, .lotse-weiter:active { transform: translateY(1px); }

.knopf-erklaerung {
  justify-self: start;
  color: var(--stahl-600);
  border-color: transparent;
  padding: .3rem 0;
}
@media (hover: hover) and (pointer: fine) { .knopf-erklaerung:hover { color: var(--kreide); } }

/* --- Zugang zum Erwachsenen-Bereich -------------------------------------- */
/* Bewusst unauffaellig: kein Schloss-Symbol, keine Warnfarbe, kein eigener
   Rahmen. Ein Kind soll hier nicht hinklicken wollen, aber ein Erwachsener
   soll es ohne Suchen finden. */

.zugang-erwachsene {
  align-self: center;
  margin-top: .5rem;
  background: none;
  border: none;
  color: var(--stahl-500);
  font-size: .78rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  padding: .4rem;
}
@media (hover: hover) and (pointer: fine) { .zugang-erwachsene:hover { text-decoration-color: var(--stahl-500); } }
.zugang-erwachsene:focus-visible { outline: 2px solid var(--stahl-500); outline-offset: 2px; }

/* --- Erwachsenen-Bereich -------------------------------------------------- */
/* Bewusst nuechterner als das Kind-Interface: kein Warnfarben-Schild, keine
   Werkstatt-Optik. Hier geht es um Auswertung, nicht um Motivation. */

.schirm-erwachsene {
  justify-content: flex-start;
  gap: 1rem;
  font-size: .92rem;
}
.ew-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--stahl-300);
  padding-bottom: .8rem;
}
.ew-kopf h1 {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  letter-spacing: .04em;
  font-weight: 600;
}

.ew-reiter { display: flex; gap: .4rem; flex-wrap: wrap; }
.ew-reiter-knopf {
  background: var(--stahl-100);
  color: var(--stahl-600);
  border: 1px solid var(--stahl-300);
  padding: .5rem .8rem;
  font-size: .85rem;
  cursor: pointer;
  min-height: 40px;
}
@media (hover: hover) and (pointer: fine) { .ew-reiter-knopf:hover { color: var(--kreide); } }
.ew-reiter-knopf.aktiv { background: var(--stahl-300); color: var(--kreide); border-color: var(--stahl-500); }
.ew-reiter-knopf:focus-visible { outline: 2px solid var(--stahl-500); outline-offset: 2px; }

.ew-inhalt[hidden] { display: none; }
.ew-inhalt h2 {
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--stahl-600);
  margin: 1.2rem 0 .5rem;
}
.ew-inhalt h2:first-child { margin-top: 0; }
.ew-hinweis { margin: 0 0 .6rem; color: var(--stahl-500); font-size: .85rem; }

.ew-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ew-tabelle th, .ew-tabelle td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--stahl-300); }
.ew-tabelle th { color: var(--stahl-600); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.ew-mono { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
.ew-falsch { color: #e2662f; }
.ew-leer { color: var(--stahl-500); padding: .6rem; font-style: italic; }

.ew-katalogliste { display: grid; gap: .5rem; }
.ew-scheinliste { display: grid; gap: .4rem; }
.ew-scheinliste-erledigt { opacity: .6; }
.ew-schein {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  padding: .5rem .7rem;
}
.ew-schein-name { flex: 1 1 auto; }
.ew-schein-zeit { font-family: var(--schrift-zahl); font-size: .78rem; color: var(--stahl-500); }

.ew-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; }
.ew-import-knopf { display: inline-flex; align-items: center; cursor: pointer; }
.ew-meldung { margin: .6rem 0 0; color: var(--stahl-600); font-size: .85rem; }

.ew-vokabelliste { display: grid; gap: .4rem; margin-bottom: 1rem; }
.ew-vokabel-zeile {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  padding: .5rem .7rem;
}
.ew-vokabel-de { flex: 1 1 auto; font-weight: 600; }
.ew-vokabel-en { color: var(--stahl-600); }
.ew-vokabel-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.ew-vokabel-form .login-feld { flex: 1 1 160px; }

/* --- Dreieckskonstruktion ------------------------------------------------ */

.konstruktionsfeld { display: block; }
.konstruktionsfeld[hidden] { display: none; }
.konstr-bild {
  display: block;
  width: 100%;
  max-height: 44svh;
  background: var(--stahl-000);
  border: 1px solid var(--stahl-400);
  cursor: crosshair;
}
.konstr-basis { stroke: var(--kreide); stroke-width: .08; }
.konstr-bogen { fill: none; stroke: var(--warn); stroke-width: .06; stroke-dasharray: .3 .18; opacity: .85; }
.konstr-punkt { fill: var(--kreide); }
.konstr-marke {
  font-size: .55px;
  fill: var(--stahl-600);
  text-anchor: middle;
  font-family: var(--schrift-zahl);
}
.konstr-basismarke {
  font-size: .5px;
  fill: var(--stahl-600);
  text-anchor: middle;
  font-family: var(--schrift-zahl);
}
.konstr-radiusmarke {
  font-size: .45px;
  fill: var(--warn);
  font-family: var(--schrift-zahl);
  opacity: .8;
}
.konstr-klick { stroke-width: .06; }
.konstr-klick-gut { fill: var(--signal); stroke: #1a2f1e; }
.konstr-klick-daneben { fill: #e2662f; stroke: #2f1a10; }
.konstr-strahl { stroke: var(--hinweis); stroke-width: .05; stroke-dasharray: .2 .12; }
.konstr-winkelbogen { fill: none; stroke: var(--hinweis); stroke-width: .05; }
.konstr-winkelmarke { font-size: .48px; fill: var(--hinweis); font-family: var(--schrift-zahl); text-anchor: middle; }
/* Verhindert, dass mobile Browser den Tap als Beginn einer Zoom-Geste oder
   Doppel-Tap-Erkennung behandeln — genau das hat den Klick auf echten
   Geraeten verschluckt, obwohl er im Test am Rechner funktionierte. */
.konstr-bild { touch-action: manipulation; }

/* --- Schraegbild-Konstruktion --------------------------------------------- */

.schraeg-bild {
  display: block;
  width: 100%;
  max-height: 44svh;
  background: var(--stahl-000);
  border: 1px solid var(--stahl-400);
  cursor: crosshair;
  touch-action: manipulation;
}
.schraeg-vorn { fill: var(--stahl-200); stroke: var(--kreide); stroke-width: .08; }
.schraeg-marke {
  font-size: .5px;
  fill: var(--stahl-600);
  text-anchor: middle;
  font-family: var(--schrift-zahl);
}

/* --- Parallelverschiebung ------------------------------------------------ */

.versch-bild {
  display: block;
  width: 100%;
  max-height: 44svh;
  background: var(--stahl-000);
  border: 1px solid var(--stahl-400);
  cursor: crosshair;
  touch-action: manipulation;
}
.versch-gitter { stroke: var(--stahl-300); stroke-width: .03; }
.versch-punkt { fill: var(--kreide); }
.versch-marke {
  font-size: .5px;
  fill: var(--kreide);
  font-family: var(--schrift-zahl);
  font-weight: 700;
}
.versch-vektor { stroke: var(--hinweis); stroke-width: .09; }
.versch-vektor-spitze { fill: var(--hinweis); }
.versch-vektormarke {
  font-size: .48px;
  fill: var(--hinweis);
  font-family: var(--schrift-zahl);
  font-style: italic;
}

/* --- Freundliche Form: runde Ecken und ruhige Antwortknoepfe ------------- */
/* Sammelstelle fuer die Rundungen der Karten-Container. Sie stehen hier
   gebuendelt statt in jeder Regel einzeln, weil es reine Form ist und
   nichts an der Bedeutung der jeweiligen Flaeche aendert. */

.kopf, .ausbeute, .wochenkarte, .faecher, .auftrag-karte, .bilanz,
.eilband, .akkordband, .fundband, .regal, .lager, .ew-karte, .bau-karte {
  border-radius: var(--rundung);
}

#eingabe-feld, .eingabe-feld {
  border-radius: var(--rundung-klein);
  background: #fff;
  color: var(--kreide);
  border: 3px solid var(--stahl-400);
}

/* Antwortmoeglichkeiten duerfen NICHT wie der Hauptknopf aussehen: sonst
   wirken alle drei, als waeren sie "die richtige Aktion". Hell mit
   farbiger Kante — Farbe bekommt erst die Rueckmeldung nach dem Tippen. */
.auswahl .knopf {
  background: #fff;
  color: var(--kreide);
  border: 2px solid var(--stahl-400);
  text-align: left;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .auswahl .knopf:hover { background: var(--stahl-200); } }

/* Mehrfachauswahl: getippte Optionen bleiben ausgewaehlt (kein Sofort-
   Abgeben), deshalb ein deutlich anderer Zustand als Hover/Fokus -- ein
   Haekchen davor plus kraeftige Kante, in --hinweis statt --warn/gut, damit
   die Farbe nicht schon "richtig" oder "Aktion!" suggeriert. */
.auswahl .knopf.aktiv {
  background: #e8f2fc;
  border-color: var(--hinweis);
  border-width: 3px;
  color: var(--hinweis);
}
.auswahl .knopf.aktiv::before { content: '✓ '; font-weight: 700; }
.auswahl-mehrfach-hinweis { color: var(--stahl-600); font-size: .85rem; margin: .2rem 0 0; }

/* --- Anleitung zu einem Thema ------------------------------------------- */
/* Ein Schritt pro Seite. Die Karte darf ruhig gross wirken — sie hat die
   ganze Aufmerksamkeit, es laeuft keine Uhr mit. */

.schirm-anleitung { gap: 1rem; }

.fach-anleitung {
  font-family: var(--schrift-anzeige);
  font-size: 1rem;
  font-weight: 700;
  width: 44px;
  min-height: 44px;
  margin-left: -.15rem;
  background: #fff;
  color: var(--fachfarbe, var(--warn));
  border: 2px solid color-mix(in srgb, var(--fachfarbe, var(--warn)) 45%, #fff);
  border-radius: 50%;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fachfarbe, var(--warn)) 20%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .fach-anleitung:hover { background: color-mix(in srgb, var(--fachfarbe, var(--warn)) 12%, #fff); } }
.fach-anleitung:active { transform: translateY(2px); box-shadow: none; }
.fach-anleitung:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

.anl-karte {
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung);
  background: var(--stahl-100);
  box-shadow: 0 4px 14px rgba(122,74,32,.14);
  padding: 1rem 1.1rem 1.2rem;
}
.anl-titel {
  margin: 0 0 .4rem;
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: var(--warn);
}
.anl-text { margin: 0; font-size: 1.05rem; }

/* Das durchgerechnete Beispiel ist der Kern — es hebt sich deutlich ab. */
.anl-beispiel {
  margin-top: .9rem;
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--rundung-klein) var(--rundung-klein) 0;
  background: linear-gradient(180deg, #fffaf0, #fff3dd);
  padding: .7rem .9rem .8rem;
}
.anl-beispiel[hidden] { display: none; }
.anl-marke {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stahl-600);
}
.anl-lage { margin: .3rem 0 .5rem; font-style: italic; }
.anl-lage[hidden] { display: none; }
.anl-schritte {
  margin: 0;
  padding-left: 1.3rem;
  font-family: var(--schrift-zahl);
  font-size: 1.05rem;
  line-height: 1.9;
}
.anl-schritte li::marker { color: var(--stahl-500); font-size: .8rem; }
.anl-ergebnis {
  margin: .6rem 0 0;
  font-size: 1.05rem;
}
.anl-ergebnis b {
  font-family: var(--schrift-zahl);
  font-size: 1.25rem;
  color: var(--signal);
}

/* Der Merksatz ist das, was haengenbleiben soll. */
.anl-merksatz {
  margin: .9rem 0 0;
  border: 2px dashed var(--stahl-400);
  border-radius: var(--rundung-klein);
  background: #fff7e8;
  padding: .6rem .8rem;
  font-weight: 600;
}
.anl-merksatz[hidden] { display: none; }

/* Steuerung der Anleitung: Punkte links, die beiden flachen Knoepfe rechts
   daneben, "Weiter" darunter ueber die volle Breite. Ohne eigene Regeln
   landete "Zurueck" unter dem Weiter-Knopf in einer dritten Zeile, weil
   .einf-weiter die ganze zweite Zeile beansprucht. */
.schirm-anleitung .einf-steuerung { grid-template-columns: 1fr auto auto; }
#anl-zurueck { grid-column: 2; grid-row: 1; justify-self: end; }
#anl-schliessen { grid-column: 3; grid-row: 1; justify-self: end; }
#anl-zurueck[hidden] { display: none; }

/* --- Grafiken in den Anleitungen ---------------------------------------- */
/* Alle Bildtypen teilen sich diese Klassen, damit sie zusammen aussehen und
   sich mit der Palette mitaendern. */

.anl-bild-platz { margin: .9rem 0 0; }
.anl-bild-platz[hidden] { display: none; }
.anl-bild {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42svh;
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  background: linear-gradient(180deg, #fffdf8, #fff6e6);
  padding: .3rem;
}

/* Beschriftungen */
.anl-bild .ab-marke,
.anl-bild .ab-klein,
.anl-bild .ab-zahl,
.anl-bild .ab-eck,
.anl-bild .ab-punktmarke,
.anl-bild .ab-tastentext,
.anl-bild .ab-x,
.anl-bild .ab-plus,
.anl-bild .ab-ergebnis { text-anchor: middle; fill: var(--kreide); }
.anl-bild .ab-marke { font-size: 13px; fill: var(--stahl-600); }
.anl-bild .ab-klein { font-size: 12px; fill: var(--stahl-600); }
.anl-bild .ab-klein-quer { text-anchor: end; }
.anl-bild .ab-zahl { font-family: var(--schrift-zahl); font-size: 13px; }
.anl-bild .ab-eck { font-family: var(--schrift-anzeige); font-size: 17px; font-weight: 700; }
.anl-bild .ab-punktmarke { font-family: var(--schrift-zahl); font-size: 13px; }
.anl-bild .ab-ergebnis { font-family: var(--schrift-anzeige); font-size: 15px; fill: var(--signal); font-weight: 700; }

/* Terme: Kaesten */
.anl-bild .ab-kasten { fill: #cfe3f7; stroke: var(--fach-mathe); stroke-width: 2; }
.anl-bild .ab-kasten-zwei { fill: #ffe0bd; stroke: var(--warn); }
.anl-bild .ab-x { font-family: var(--schrift-zahl); font-size: 15px; font-weight: 700; }
.anl-bild .ab-plus { font-size: 22px; fill: var(--stahl-600); }

/* Zahlenstrahl */
.anl-bild .ab-achse { stroke: var(--stahl-500); stroke-width: 2; }
.anl-bild .ab-messpunkt { fill: var(--fach-mathe); }
.anl-bild .ab-median { fill: var(--warn); stroke: #fff; stroke-width: 2; }
.anl-bild .ab-medianmarke { fill: var(--warn); font-weight: 700; }
.anl-bild .ab-spanne { stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }

/* Tastatur */
.anl-bild .ab-taste { fill: #fff; stroke: var(--stahl-400); stroke-width: 2; }
.anl-bild .ab-tastentext { font-family: var(--schrift-zahl); font-size: 16px; font-weight: 700; }
.anl-bild .ab-f1 { fill: #d9e9fb; }
.anl-bild .ab-f2 { fill: #e2dcf7; }
.anl-bild .ab-f3 { fill: #fbe0ec; }
.anl-bild .ab-f4 { fill: #ffe6c7; }
.anl-bild .ab-leer { fill: var(--stahl-200); }
.anl-bild .ab-rille { fill: var(--warn); }

/* Stromkreis */
.anl-bild .ab-draht { stroke: var(--stahl-500); stroke-width: 2.5; fill: none; }
.anl-bild .ab-bauteil { fill: #fff; stroke: var(--warn); stroke-width: 2.5; }
.anl-bild .ab-quelle-lang { stroke: var(--kreide); stroke-width: 3; }
.anl-bild .ab-quelle-kurz { stroke: var(--kreide); stroke-width: 5; }

/* Gitter mit Vektor */
.anl-bild .ab-raster { stroke: var(--stahl-300); stroke-width: 1; }
.anl-bild .ab-pfeil { stroke: var(--warn); stroke-width: 3; stroke-linecap: round; }
.anl-bild .ab-pfeilspitze { fill: var(--warn); }
.anl-bild .ab-punkt { fill: var(--fach-mathe); }
.anl-bild .ab-punkt-ziel { fill: var(--signal); }

/* Dreieck und Ortslinien */
.anl-bild .ab-seite { stroke: var(--stahl-400); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.anl-bild .ab-gegeben { stroke: var(--fach-mathe); stroke-width: 4; stroke-dasharray: none; }
.anl-bild .ab-winkel { fill: none; stroke: var(--warn); stroke-width: 3; }
.anl-bild .ab-bogen { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 5; }
.anl-bild .ab-senkrechte { stroke: var(--signal); stroke-width: 3; }

/* Schraegbild */
.anl-bild .ab-flaeche { fill: #ffe0bd; stroke: var(--stahl-500); stroke-width: 2; }
.anl-bild .ab-flaeche-vorn { fill: #cfe3f7; stroke: var(--fach-mathe); }
.anl-bild .ab-tiefe { stroke: var(--warn); stroke-width: 4; }

/* Optik: Spiegel, Lot, Strahlen */
.anl-bild .ab-spiegel { stroke: var(--stahl-500); stroke-width: 4; }
.anl-bild .ab-lot { stroke: var(--stahl-400); stroke-width: 1.5; stroke-dasharray: 4 4; }
.anl-bild .ab-strahl { stroke: var(--warn); stroke-width: 2.5; }
.anl-bild .ab-strahlspitze { fill: var(--warn); }
.anl-bild .ab-winkelbogen { fill: none; stroke: var(--fach-mathe); stroke-width: 2; }

/* Magnetismus */
.anl-bild .ab-magnet { stroke: var(--stahl-600); stroke-width: 2; }
.anl-bild .ab-magnet-nord { fill: #e0397a; }
.anl-bild .ab-magnet-sued { fill: var(--fach-mathe); }
.anl-bild .ab-polschrift { text-anchor: middle; fill: #fff; font-family: var(--schrift-anzeige); font-size: 17px; font-weight: 700; }
.anl-bild .ab-feldlinie { fill: none; stroke: var(--stahl-500); stroke-width: 1.5; stroke-dasharray: 5 4; marker-end: none; }

/* Biologie: Zelle */
.anl-bild .ab-zellwand { fill: #eaf7e6; stroke: var(--fach-englisch); stroke-width: 3; }
.anl-bild .ab-vakuole { fill: #dff0ff; stroke: var(--fach-mathe); stroke-width: 1.5; opacity: .8; }
.anl-bild .ab-zellkern { fill: #ffd9ec; stroke: #e0397a; stroke-width: 1.5; }
.anl-bild .ab-chloroplast { fill: #8fd98a; stroke: #4a9a44; stroke-width: 1.2; }
.anl-bild .ab-mitochondrium { fill: #ffcf8a; stroke: var(--warn); stroke-width: 1.2; }

/* Geschichte: Zeitstrahl */
.anl-bild .ab-zeitstrich { stroke: var(--stahl-500); stroke-width: 2; }
.anl-bild .ab-zeitpunkt { fill: var(--stahl-500); }
.anl-bild .ab-zeitpunkt-hervor { fill: var(--warn); }

/* --- Aufgaben-Editor (Admin) ----------------------------------------------
   Drei Ansichten in derselben Sektion, siehe src/ui/adminAufgaben.js. Bleibt
   bewusst nahe an den bestehenden .ew-*/.login-feld-Klassen statt eigene
   Grundtechnik zu erfinden. */
.adm-ansicht[hidden] { display: none; }

/* Modulliste nach Fach gruppiert (Georgs Rueckmeldung: die flache Liste
   aller 37 Module war unuebersichtlich) -- eigene Ueberschrift je Fach,
   Module darunter etwas eingerueckt. */
.adm-fach-gruppe { margin-bottom: 1.1rem; }
.adm-fach-titel {
  font-family: var(--schrift-anzeige);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--stahl-600);
  margin: 0 0 .4rem;
}
.adm-modulliste { display: flex; flex-direction: column; }
.adm-aufgaben { display: grid; gap: .5rem; margin: .8rem 0; }
.adm-fach-gruppe .adm-modul-zeile { margin-bottom: .5rem; }
.adm-modul-zeile, .adm-aufgabe-zeile {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  text-align: left;
  border: 1px solid var(--stahl-300);
  background: var(--stahl-100);
  border-radius: var(--rundung-klein);
  padding: .5rem .7rem;
  cursor: pointer;
  font-family: var(--schrift-text);
  /* <button> erbt "color" NICHT automatisch von body (UA-Vorgabe), gerade
     mit <meta name="color-scheme" content="dark"> faellt das sonst auf
     Weiss zurueck -- also hier explizit setzen, statt sich pro Kind-
     Element (b/i/span/code) einzeln darum zu kuemmern. */
  color: var(--kreide);
}
.adm-modul-zeile i, .adm-aufgabe-zeile span:last-child { color: var(--stahl-500); font-size: .82rem; }
.adm-aufgabe-zeile code {
  font-family: var(--schrift-zahl);
  font-size: .78rem;
  background: var(--stahl-200);
  border-radius: 6px;
  padding: .1rem .4rem;
}
.adm-typ-chip {
  font-family: var(--schrift-anzeige);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--hinweis);
  color: #fff;
  border-radius: 6px;
  padding: .12rem .5rem;
  flex: none;
}

/* textarea/select gab es vor dem Aufgaben-Editor nirgends in dieser App --
   dieselbe "<button>/<input> erben color nicht automatisch"-Falle wie oben
   bei .adm-modul-zeile trifft auch sie, darum hier explizit statt sich auf
   .login-feld input zu verlassen (das ist auf die PIN-Eingabe zugeschnitten
   -- eigene Groesse, hier nicht passend). */
.login-feld textarea, .login-feld select, .adm-erweitert textarea, .adm-parameter-zeile input {
  background: var(--stahl-000);
  border: var(--kante) solid var(--stahl-500);
  color: var(--kreide);
  font-family: var(--schrift-text);
  font-size: .95rem;
  padding: .5rem .6rem;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 6px;
}

/* Jedes Element mit erzwungenem display braucht sein eigenes
   .klasse[hidden]{display:none} -- ein Autoren-"display: flex" schlaegt die
   UA-Regel [hidden]{display:none} immer, unabhaengig von Spezifitaet.
   Dasselbe Muster wie schon bei .eilband/.knopf-boss/.login-kacheln, siehe
   ARCHITEKTUR.md "Mehrere Kinder, eigene Accounts". #adm-formular ist
   zusaetzlich eine ID-Regel (noch hoehere Spezifitaet als jede Klasse), hier
   also besonders wichtig. */
#adm-formular { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
#adm-formular[hidden] { display: none; }

/* Formular in klar abgesetzte Abschnitte gruppiert statt einer langen
   Feldliste (Georgs Rueckmeldung) -- <fieldset> statt <div>, damit auch
   ohne CSS eine sinnvolle Struktur bestehen bliebe. */
.adm-abschnitt {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  border: 1px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  padding: .3rem 1rem 1rem;
  margin: 0;
}
.adm-abschnitt > legend {
  font-family: var(--schrift-anzeige);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--stahl-600);
  padding: 0 .4rem;
}
.adm-typfelder { display: flex; flex-direction: column; gap: .8rem; border-left: 3px solid var(--hinweis); padding-left: .8rem; }
.adm-typfelder[hidden] { display: none; }
.adm-kippschalter { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.adm-loesung-liste { display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }
.adm-loesung-option { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.adm-erweitert { font-size: .85rem; color: var(--stahl-600); }
.adm-erweitert textarea { width: 100%; margin-top: .4rem; font-family: var(--schrift-zahl); font-size: .8rem; }
.adm-parameter-zeile { display: flex; gap: .4rem; margin-bottom: .4rem; }
.adm-parameter-zeile input { flex: 1 1 0; min-width: 0; }
.adm-aktionen { display: flex; gap: .6rem; align-items: center; }
.adm-fehler { color: var(--warn); font-size: .88rem; min-height: 1.1em; }

.adm-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .7rem 0 1rem; }
.adm-dashboard > div { display: grid; gap: .1rem; padding: .7rem; border: 2px solid #e1c58c; border-radius: .8rem; background: linear-gradient(145deg, #fff8df, #f5e6bf); text-align: center; }
.adm-dashboard b { color: #81501f; font: 900 1.35rem var(--schrift-anzeige, sans-serif); }
.adm-dashboard small { color: #96785a; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.adm-filter { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: .8rem; }
.adm-filter input, .adm-filter select { min-height: 2.5rem; border: 2px solid #d7bd91; border-radius: .7rem; background: #fffdf5; padding: .35rem .65rem; color: #5e4028; }
.adm-filter input { flex: 1 1 15rem; }
.adm-filter select { flex: 0 1 12rem; }
.adm-matrix { margin: .8rem 0 1rem; padding: .8rem; border: 2px solid #dbc28f; border-radius: .8rem; background: #fffaf0; }
.adm-matrix h3 { margin: 0 0 .6rem; color: #76502c; font-size: .95rem; }
.adm-matrix-fach { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .35rem 0; font-size: .75rem; }
.adm-matrix-fach > b { width: 6rem; color: #704a27; }
.adm-matrix-mix { width: 100%; margin-left: 6rem; color: #8c745b; font-size: .68rem; }
.adm-matrix-fach span { padding: .2rem .4rem; border-radius: .45rem; }
.adm-matrix-fach .abgedeckt { background: #e4f3df; color: #327044; }
.adm-matrix-fach .fehlt { background: #f9e7d6; color: #9a5b2a; }
@media (max-width: 600px) { .adm-matrix-mix { margin-left: 0; } }
.adm-modul-zeile, .adm-aufgabe-zeile { transition: transform .15s ease, box-shadow .15s ease; }
.adm-modul-zeile small { display: block; margin-top: .18rem; color: #8e7158; font-size: .72rem; }
.adm-modul-zeile:hover, .adm-aufgabe-zeile:hover, .adm-modul-zeile:focus-visible, .adm-aufgabe-zeile:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(122,74,32,.12); }
.adm-qualitaet { padding: .55rem .7rem; border-left: 4px solid #e89b3b; border-radius: .5rem; background: #fff3d8; color: #8a551f; font-size: .85rem; }
.adm-qualitaet[hidden] { display: none; }
.adm-status { padding: .15rem .4rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.adm-status-entwurf { background: #f6e0b8; color: #8b5b21; }
.adm-status-pruefung { background: #dce9fa; color: #35679a; }
.adm-status-veroeffentlicht { background: #dff3df; color: #347346; }
.adm-vorschau { margin-top: 1rem; padding: 1rem; border: 3px solid #8bb9ce; border-radius: 1rem; background: linear-gradient(145deg, #f3fbff, #fffdf5); box-shadow: 0 5px 0 rgba(60,111,137,.14); }
.adm-vorschau[hidden] { display: none; }
.kind-vorschau-kopf { display: flex; justify-content: space-between; gap: .6rem; color: #397794; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.kind-vorschau-frage { margin: 1rem 0; color: #493722; font-size: 1.15rem; font-weight: 800; line-height: 1.4; }
.kind-vorschau-optionen { display: grid; gap: .5rem; }
.kind-vorschau-optionen button { min-height: 2.6rem; border: 2px solid #9bc4d4; border-radius: .7rem; background: #fff; color: #315d70; text-align: left; padding: .5rem .7rem; cursor: pointer; }
.kind-vorschau-optionen button:hover { background: #e8f6fb; }
.kind-vorschau-hinweis { color: #7e6954; font-size: .9rem; }
.adm-vorschau-gut, .adm-vorschau-falsch { margin: .8rem 0 0; padding: .55rem .7rem; border-radius: .6rem; font-weight: 700; }
.adm-vorschau-gut { background: #e4f5e4; color: #2f7742; }
.adm-vorschau-falsch { background: #fff0df; color: #9a5b25; }
.adm-verlauf { margin-top: .8rem; padding: .55rem .7rem; border: 1px solid #dfc79c; border-radius: .6rem; background: #fffaf0; }
.adm-verlauf summary { cursor: pointer; color: #79522d; font-weight: 700; }
.adm-verlauf #adm-verlauf-liste { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
@media (max-width: 600px) {
  #adm-formular { gap: .7rem; }
  .adm-abschnitt { padding: .7rem; }
  .adm-parameter-zeile { display: grid; grid-template-columns: 1fr 1fr; }
  .adm-parameter-zeile .adm-p-name { grid-column: 1 / -1; }
  .adm-aktionen { display: grid; grid-template-columns: 1fr 1fr; }
  .adm-aktionen .knopf-gross { grid-column: 1 / -1; }
}
.adm-testlauf-ergebnis[hidden] { display: none; }
.adm-testlauf-ergebnis ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.adm-testlauf-ergebnis li { margin-bottom: .2rem; }

/* --- Login/Profilwahl ---------------------------------------------------- */

.schirm-login, .schirm-familie { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.login-kacheln { display: flex; flex-wrap: wrap; gap: .7rem; }
.login-kacheln[hidden], #login-neu-knopf[hidden] { display: none; }
.login-kachel {
  flex: 1 1 auto;
  min-width: 7rem;
  font-family: var(--schrift-anzeige);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kreide);
  background: linear-gradient(180deg, #ffffff, var(--stahl-200));
  border: var(--kante) solid var(--stahl-400);
  border-radius: var(--rundung-klein);
  box-shadow: 0 3px 0 var(--stahl-400);
  padding: 1rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .login-kachel:hover { border-color: var(--warn); } }
.login-kachel:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stahl-400); }

.login-pin { display: flex; flex-direction: column; gap: .9rem; align-items: center; }
.login-pin-name {
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kreide);
}
.login-pin-anzeige { display: flex; gap: .6rem; }
.login-pin-eingabe {
  width: min(15rem, 80vw);
  min-height: 2.7rem;
  border: 2px solid var(--stahl-300);
  border-radius: .8rem;
  background: #fffdf5;
  color: var(--tinte);
  text-align: center;
  font: 900 1.35rem var(--schrift-anzeige, sans-serif);
  letter-spacing: .55em;
  padding-left: .55em;
}
.login-pin-eingabe:focus { outline: 4px solid color-mix(in srgb, var(--warn) 42%, transparent); outline-offset: 2px; }
.login-pin-punkt {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--stahl-500);
  background: transparent;
}
.login-pin-punkt.voll { background: var(--warn); border-color: var(--warn); }

.login-tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  width: 100%;
  max-width: 260px;
}
.taste-leer { visibility: hidden; }

.login-fehler { color: var(--warn); font-size: .9rem; min-height: 1.2em; text-align: center; }

.login-neu { display: flex; flex-direction: column; gap: .8rem; }
.login-feld {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stahl-600);
}
.login-feld input {
  background: var(--stahl-000);
  border: var(--kante) solid var(--stahl-500);
  color: var(--kreide);
  font-family: var(--schrift-zahl);
  font-size: 1.2rem;
  padding: .55rem .7rem;
  min-height: 48px;
  text-transform: none;
  letter-spacing: normal;
}
.login-neu[hidden], .login-pin[hidden], .login-verwaltung[hidden] { display: none; }
.login-hilfe { align-self: center; border: 0; background: transparent; color: var(--stahl-600); font: 700 .82rem var(--schrift-anzeige); text-decoration: underline; cursor: pointer; }
.login-hilfe:hover, .login-hilfe:focus-visible { color: var(--warn); }
.login-hinweis { margin: 0; color: var(--stahl-600); font-size: .9rem; line-height: 1.4; }
.login-verwaltung { display: flex; flex-direction: column; gap: .8rem; }
.login-verwaltung h2 { margin: 0; color: var(--kreide); }
.login-verwaltung select { min-height: 48px; border: var(--kante) solid var(--stahl-500); background: var(--stahl-000); color: var(--kreide); padding: .5rem; font: 1rem var(--schrift-zahl); }
.login-gefahr { padding: .7rem; border: 2px solid color-mix(in srgb, var(--warn) 55%, var(--stahl-300)); border-radius: .75rem; background: #fff8f0; color: var(--stahl-600); }
.login-verwaltung-passwort { padding: .7rem; border: 2px solid var(--stahl-300); border-radius: .75rem; background: #f6faf8; color: var(--stahl-600); }
.login-verwaltung-passwort summary { cursor: pointer; color: var(--kreide); font-weight: 800; }
.login-verwaltung-passwort .login-feld { margin: .6rem 0; }
.login-gefahr summary { cursor: pointer; color: #9a3d23; font-weight: 800; }
.login-gefahr p { font-size: .85rem; line-height: 1.4; }
.login-gefahr .login-feld { margin: .6rem 0; }
.knopf-gefahr { border-color: #a33b27; background: linear-gradient(#e97752, #b6432d); color: #fff; box-shadow: 0 3px #7d2c20; }
.adm-konten-liste { display: grid; gap: .8rem; }
.adm-konto { display: grid; gap: .55rem; padding: .85rem; border: 2px solid #c9b89e; border-radius: .8rem; background: #fffaf1; }
.adm-konto h3 { margin: 0; color: #563b27; font-size: 1rem; overflow-wrap: anywhere; }
.adm-konto-kind { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, .65fr) auto auto; align-items: center; gap: .45rem; padding: .55rem; border-radius: .6rem; background: #f1f6f5; }
.adm-konto-kind input, .adm-konto .login-feld input { min-width: 0; }
@media (max-width: 700px) { .adm-konto-kind { grid-template-columns: 1fr 1fr; }.adm-konto-kind b { grid-column: 1 / -1; }.adm-konto-kind .knopf { width: 100%; } }

/* --- Schaltungs-Sandbox --------------------------------------------------- */

.schirm-sandbox { max-width: 620px; margin: 0 auto; }

.knopf-sandbox {
  background: linear-gradient(180deg, #ffffff, var(--stahl-200));
  color: #0f766e;
  border-color: #0f9b8e;
}
.schirm-hafen .hafen-nebenwege .knopf-sandbox.ist-gesperrt {
  display: grid;
  gap: .08rem;
  min-height: 3.75rem;
  padding: .45rem .8rem;
  border: 2px dashed rgba(218, 194, 145, .72);
  background: rgba(45, 41, 35, .76);
  box-shadow: none;
  color: #d9d0bd;
  cursor: not-allowed;
  opacity: 1;
  filter: saturate(.45);
}
.knopf-sandbox.ist-gesperrt span { font-weight: 800; }
.knopf-sandbox.ist-gesperrt small { color: #bdb4a2; font-size: .67rem; font-weight: 600; }
.hafen-ort.ist-gesperrt { border-style: dashed; background: linear-gradient(135deg, #eee7d8, #d7cfc0); box-shadow: none; color: #7a7165; cursor: not-allowed; filter: grayscale(.55); opacity: .78; }
.hafen-ort.ist-gesperrt i { background: #8b857b; }.hafen-ort.ist-gesperrt small { color: #80786d; }
@media (hover: hover) and (pointer: fine) { .knopf-sandbox:hover { color: #0b5c54; border-color: #0b5c54; } }

.sandbox-wrapper { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }

.sandbox-status {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 2px solid #0f9b8e;
  border-radius: var(--rundung-klein);
  background: linear-gradient(180deg, #ffffff, #e6fbf8);
  padding: .6rem .9rem;
  font-family: var(--schrift-anzeige);
  font-size: .9rem;
  color: var(--kreide);
  transition: border-color .2s, background .2s;
}
.sandbox-status > span:not(.sandbox-status-symbol) { display: flex; align-items: center; gap: 1.2rem; }
.sandbox-status-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.sandbox-status-erfolg { border-color: #0f9b8e; background: linear-gradient(180deg, #ffffff, #e6fbf8); }
.sandbox-status-erfolg .sandbox-status-symbol { background: #0f9b8e; color: #fff; }
.sandbox-status-wert { font-family: var(--schrift-zahl); font-weight: 700; }

.sandbox-status-leer { color: var(--stahl-600); font-style: italic; border-color: var(--stahl-400); background: linear-gradient(180deg, #ffffff, var(--stahl-100)); }
.sandbox-status-leer .sandbox-status-symbol { background: var(--stahl-300); color: var(--stahl-600); }

.sandbox-status-fehler { color: var(--warn); border-color: var(--warn); background: linear-gradient(180deg, #ffffff, #fff1e6); font-weight: 700; }
.sandbox-status-fehler .sandbox-status-symbol { background: var(--warn); color: #fff; }

.sandbox-jubel-schutz { border-color: #2f7bd1; background: #e8f1fc; color: #1c4e8c; }

/* Nur beim Uebergang aus->an bzw. heil->durchgebrannt zu sehen (siehe
   uiZustand.warAn/warDurchgebrannt in sandbox.js) -- der Dauerzustand einer
   schon fertigen Schaltung zeigt diese Zeile nicht. */
.sandbox-jubel {
  border: var(--kante) solid #0f9b8e;
  border-radius: var(--rundung-klein);
  background: #e6fbf8;
  padding: .5rem .9rem;
  font-weight: 700;
  color: #0b5c54;
  animation: sandbox-jubel-ein .4s ease-out;
}
.sandbox-jubel-warnung { border-color: var(--warn); background: #fff1e6; color: var(--warn); }
@keyframes sandbox-jubel-ein {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.sandbox-svg {
  width: 100%;
  height: auto;
  background: var(--stahl-000);
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  touch-action: manipulation;
  transition: border-color .2s, box-shadow .2s;
}
.sandbox-svg-erfolg { border-color: #0f9b8e; box-shadow: 0 0 0 3px #e6fbf8; }
.sandbox-svg-fehler { border-color: var(--warn); box-shadow: 0 0 0 3px #fff1e6; }
.sandbox-gitterlinie { stroke: var(--stahl-200); stroke-width: 1; }

/* Der sichtbare Punkt reagiert selbst nicht auf Zeigerereignisse -- das
   uebernimmt der groessere, unsichtbare .sandbox-punkt-treffer darunter
   (siehe sandbox.js), damit ein Tap am Handy nicht mehrfach danebengeht. */
.sandbox-punkt {
  fill: var(--stahl-300);
  stroke: var(--stahl-400);
  stroke-width: 1.5;
  pointer-events: none;
}
.sandbox-punkt-gewaehlt { fill: #0f9b8e; stroke: #0b5c54; }

.sandbox-punkt-treffer { fill: transparent; pointer-events: all; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .sandbox-punkt-treffer:hover + .sandbox-punkt { fill: #0f9b8e; }
}

.sandbox-kabel { stroke: var(--stahl-600); stroke-width: 2.5; stroke-linecap: round; }

.sandbox-widerstand { stroke: var(--kreide); stroke-width: 2.5; stroke-linejoin: round; cursor: pointer; }
.sandbox-beschriftung {
  font-family: var(--schrift-zahl);
  font-size: 11px;
  fill: var(--stahl-600);
  text-anchor: middle;
}

.sandbox-led-glow { fill: #fff3b0; opacity: .85; filter: blur(1px); }
.sandbox-led-glow-neu { animation: sandbox-led-blitz .6s ease-out; transform-origin: center; transform-box: fill-box; }
.sandbox-led-an { fill: #ffb000; stroke: #b97a00; stroke-width: 1.5; cursor: pointer; }
.sandbox-led-aus { fill: var(--stahl-300); stroke: var(--stahl-500); stroke-width: 1.5; cursor: pointer; }
.sandbox-led-tot { fill: var(--stahl-400); stroke: var(--stahl-600); stroke-width: 1.5; }
.sandbox-led-strich { stroke: var(--kreide); stroke-width: 2.5; }
.sandbox-led-kreuz { stroke: var(--warn); stroke-width: 2.5; stroke-linecap: round; }
.sandbox-led-knall { animation: sandbox-led-schuetteln .4s ease-in-out; transform-origin: center; transform-box: fill-box; }

@keyframes sandbox-led-blitz {
  0%   { transform: scale(2.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1); opacity: .85; }
}
@keyframes sandbox-led-schuetteln {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

.sandbox-schalter-zu, .sandbox-schalter-auf {
  stroke: var(--kreide);
  stroke-width: 2.5;
  stroke-linecap: round;
  cursor: pointer;
}
.sandbox-schalter-auf { stroke: var(--stahl-500); }
.sandbox-schalter-kontakt { fill: var(--kreide); }

.sandbox-batterie-plus, .sandbox-batterie-minus { stroke: var(--kreide); stroke-width: 3; cursor: pointer; }
.sandbox-batterie-minus { stroke-width: 5; opacity: .55; }

/* Gemeinsamer kurzer "gerade aktiv geworden"-Ringblitz fuer Motor und
   Summer -- dieselbe Idee wie der LED-Glow-Blitz, nur bauteilneutral, weil
   beide Formen (Kreis) sich den Effekt teilen koennen. */
.sandbox-anlauf-ring {
  fill: none;
  stroke: #0f9b8e;
  stroke-width: 2.5;
  animation: sandbox-anlauf-ring .5s ease-out forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sandbox-anlauf-ring {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.sandbox-motor-gehaeuse { fill: var(--stahl-000); stroke: var(--stahl-600); stroke-width: 2; cursor: pointer; }
.sandbox-motor-fluegel { stroke: var(--stahl-600); stroke-width: 2; stroke-linecap: round; fill: none; }
.sandbox-motor-dreht { animation: sandbox-motor-dreht 1.1s linear infinite; }
.sandbox-motor-nabe { fill: var(--stahl-600); }
@keyframes sandbox-motor-dreht { to { transform: rotate(360deg); } }

.sandbox-summer-gehaeuse { fill: var(--stahl-300); stroke: var(--stahl-600); stroke-width: 2; cursor: pointer; }
.sandbox-summer-an { fill: #ffd166; stroke: #b97a00; animation: sandbox-summer-bibbern .15s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sandbox-summer-loch { fill: var(--stahl-600); }
.sandbox-summer-wellen path { stroke: #b97a00; stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
@keyframes sandbox-summer-bibbern {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(.8px); }
}

.sandbox-sicherung-gehaeuse { fill: var(--stahl-000); stroke: var(--stahl-600); stroke-width: 2; cursor: pointer; }
.sandbox-sicherung-tot { fill: #fff1e6; stroke: var(--warn); stroke-width: 2; }
.sandbox-sicherung-draht { stroke: var(--kreide); stroke-width: 2; }

.sandbox-palette { display: flex; flex-wrap: wrap; gap: .5rem; }
.sandbox-taste {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #ffffff, var(--stahl-200));
  color: var(--kreide);
  border: 2px solid var(--stahl-400);
  border-radius: var(--rundung-klein);
  padding: .5rem .8rem .5rem .6rem;
  cursor: pointer;
}
.sandbox-taste-symbol { width: 1.7rem; height: 1.25rem; stroke: currentColor; fill: none; }
.sandbox-taste.aktiv { background: #0f9b8e; border-color: #0b5c54; color: #fff; }

.sandbox-werte { display: flex; flex-wrap: wrap; gap: .4rem; }
.sandbox-wert-taste {
  font-family: var(--schrift-zahl);
  font-size: .85rem;
  background: var(--stahl-100);
  color: var(--kreide);
  border: 2px solid var(--stahl-300);
  border-radius: var(--rundung-klein);
  padding: .4rem .7rem;
  cursor: pointer;
}
.sandbox-wert-taste.aktiv { background: #e6fbf8; border-color: #0f9b8e; }

.sandbox-hinweis { color: var(--stahl-600); font-size: .85rem; margin: 0; }

/* --- Besserwisser-Fakten -------------------------------------------------- */

.fakt {
  border-left: 3px solid var(--hinweis);
  background: #eef6fd;
  border-radius: var(--rundung-klein);
  padding: .55rem .75rem;
  margin-top: .6rem;
}
.fakt[hidden] { display: none; }
.fakt-marke {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hinweis);
}
.fakt-text { margin: .2rem 0 0; color: var(--kreide); }

.fakt-ende {
  border: 2px solid var(--hinweis);
  border-left-width: 2px;
  background: var(--stahl-100);
  box-shadow: 0 4px 14px rgba(122,74,32,.14);
  padding: .8rem 1rem;
  margin-top: 0;
}

/* --- Hafenbucht: die Spielwelt vor der ruhigen Lernansicht ------------- */

/* Nur der Hafen darf breit werden. Die eigentliche Aufgabe bleibt bewusst
   in ihrer bekannten, konzentrierten Lesebreite. */
#buehne:has(.schirm-hafen:not([hidden])) { max-width: 78rem; }

.schirm-hafen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(15rem, .78fr) minmax(19rem, 1.22fr);
  grid-template-areas:
    "kopf kopf"
    "kompass kompass"
    "entdecken entdecken"
    "wesen status"
    "route route"
    "aktion aktion"
    "wege wege";
  align-content: start;
  justify-content: stretch;
  gap: .85rem;
  padding: clamp(.7rem, 2vw, 1.4rem);
  overflow: hidden;
  border: 3px solid #176584;
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(180deg, #70d6f0 0 35%, #1a9bc1 35% 100%);
  box-shadow: 0 9px 0 #0d5573, 0 18px 36px rgba(34, 88, 103, .25);
}
.hafen-logo small { display: block; margin-top: .25rem; color: #ffeab0; font-size: .68rem; letter-spacing: .03em; }
@keyframes hafen-segeln { 50% { transform: translateX(2.2rem) translateY(-.25rem) rotate(-2deg); } }

.hafen-kopf { grid-area: kopf; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.hafen-logo { color: #fff7d5; text-shadow: 0 2px 0 #12506b; }
.hafen-logo span, .hafen-wesen-marke, .hafen-route-kopf span { display: block; font-family: var(--schrift-anzeige); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.hafen-logo h1 { margin: .05rem 0 0; font-family: var(--schrift-anzeige); font-size: clamp(1.75rem, 5vw, 3rem); letter-spacing: .1em; line-height: .95; }
.hafen-werkzeuge { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.schirm-hafen .hafen-werkzeuge .knopf-flach { border-color: #b98247; background: linear-gradient(#8f6036, #5a351f); color: #fff4d2; box-shadow: 0 3px #392111; }

.hafen-wesen { grid-area: wesen; align-self: start; padding: .5rem; border: 3px solid #a8753d; border-radius: 1.1rem; background: rgba(57, 36, 22, .86); box-shadow: 0 5px 0 #382112; color: #ffedbb; }
.hafen-wesen-marke { padding: .28rem .45rem; border-radius: .45rem; background: #286d90; text-align: center; color: #fff; }
.schirm-hafen .katzenplatz { margin-top: .45rem; border: 0; background: radial-gradient(70% 75% at 50% 100%, rgba(255, 213, 119, .5), transparent 68%); padding: .15rem .2rem 0; }
.schirm-hafen .katze-bild { max-height: min(27svh, 14rem); filter: drop-shadow(0 7px 3px rgba(0,0,0,.25)); }

/* "Seit du weg warst": ruhige Notiz direkt beim Wesen, tippen schliesst sie.
   Kein Dauerzustand -- erscheint nur beim ersten Besuch nach einer Pause. */
.hafenschau { display: grid; gap: .25rem; width: 100%; margin-top: .5rem; padding: .5rem .6rem; border: 2px solid rgba(255, 213, 119, .5); border-radius: .8rem; background: rgba(255, 226, 112, .12); color: #ffedbb; font: inherit; text-align: left; cursor: pointer; }
.hafenschau:active { background: rgba(255, 226, 112, .2); }
.schirm-hafen .wochenkarte, .schirm-hafen .regal { border: 3px solid #a8753d; border-left-width: 3px; border-radius: .9rem; background: rgba(64, 42, 27, .9); box-shadow: 0 4px 0 #382112; color: #fff1c8; }
.schirm-hafen .wochenkarte-marke, .schirm-hafen .regal-marke { color: #ffe3a0; }
.schirm-hafen .serie, .schirm-hafen .serie b { color: #fff1c8; }
.schirm-hafen .posten { border-color: #bd8a4b; background: #fff1c8; color: #392313; }

.hafen-aktion { grid-area: aktion; display: grid; gap: .65rem; align-content: start; }
.hafen-kompass { grid-area: kompass; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 3px solid #d8b45e; border-radius: 1rem; background: linear-gradient(120deg, rgba(255,249,216,.97), rgba(222,245,222,.94)); box-shadow: 0 4px 0 rgba(77,103,62,.22); color: #315342; }
.hafen-kompass-zeichen { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #236d80; box-shadow: 0 3px #174b59; color: #fff2bd; font-size: 1.35rem; }
.hafen-kompass span, .hafen-kompass b, .hafen-kompass small { display: block; }.hafen-kompass span { font-family: var(--schrift-anzeige); color: #5f7b4d; font-size: .55rem; font-weight: 900; letter-spacing: .1em; }.hafen-kompass b { margin: .08rem 0; font-size: .98rem; }.hafen-kompass small { color: #547061; font-size: .76rem; line-height: 1.3; }.hafen-kompass .knopf { min-width: 9.5rem; padding: .5rem .7rem; font-size: .78rem; }
.hafen-kompass-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .42rem; }
.hafen-kompass .hafen-kompass-aktionen .knopf { min-width: 0; }
.schirm-hafen[data-anfang="true"] .hafen-wesen { max-width: 23rem; justify-self: center; }
/* Die erste Ansicht ist eine Abfahrt, kein Armaturenbrett. Alles, was
   ablenken kann, bleibt hinter „Hafen erkunden“ – ohne dass es verloren ist. */
.schirm-hafen[data-anfang="true"] > .hafen-spuren,
.schirm-hafen[data-anfang="true"] .hafen-entdecken,
.schirm-hafen[data-anfang="true"] .hafen-nebenwege { display: none; }
.schirm-hafen .werkbank { border-radius: .8rem; }
.schirm-hafen #knopf-start { border: 3px solid #3f8c23; background: linear-gradient(#a9ee59, #64b82d); box-shadow: 0 5px 0 #39731d; text-shadow: 0 1px rgba(0,0,0,.18); }
.schirm-hafen #knopf-start:active { box-shadow: 0 2px 0 #39731d; }
.schirm-hafen .fussnote { color: #fff3cc; text-shadow: 0 1px #12506b; }

.hafen-route { grid-area: route; border: 4px solid #68401f; border-radius: 1.15rem; background: linear-gradient(135deg, #fff3ce, #e9d19a); box-shadow: 0 6px 0 #392313; padding: .75rem; }
.hafen-route-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin: 0 .2rem .55rem; color: #6b4020; }
.hafen-route-kopf span { font-size: .85rem; }
.hafen-route-kopf small { color: #81562e; }
.schirm-hafen .faecher { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border: 0; background: transparent; padding: 0; gap: .55rem; }
.schirm-hafen .fachzeile { gap: .4rem; border-color: color-mix(in srgb, var(--fachfarbe) 50%, #92673b); box-shadow: 0 3px 0 color-mix(in srgb, var(--fachfarbe) 28%, #92673b); padding: .55rem; }
.schirm-hafen .fachname { width: 100%; justify-content: center; font-size: .72rem; }
.schirm-hafen .themen { gap: .3rem; }
.schirm-hafen .sternbild { height: 1rem; }

.hafen-nebenwege { grid-area: wege; display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; }
.schirm-hafen .hafen-nebenwege .knopf-flach { border-color: #b98247; background: rgba(57, 36, 22, .88); color: #fff1c8; box-shadow: 0 3px #382112; }
.schirm-hafen .zugang-erwachsene { color: #e9d5a7; }

@media (max-width: 640px) {
  #buehne:has(.schirm-hafen:not([hidden])) { padding: .45rem; }
  .schirm-hafen { grid-template-columns: 1fr; grid-template-areas: "kopf" "kompass" "wesen" "status" "entdecken" "route" "aktion" "wege"; gap: .65rem; border-radius: 1.1rem; }
  .hafen-kompass { grid-template-columns: 2.45rem minmax(0, 1fr); padding: .55rem; }.hafen-kompass-zeichen { width: 2.35rem; height: 2.35rem; }.hafen-kompass-aktionen { grid-column: 1 / -1; justify-content: stretch; }.hafen-kompass .hafen-kompass-aktionen .knopf { flex: 1 1 9rem; min-height: 3rem; }
  .hafen-logo h1 { font-size: 1.7rem; }
  .hafen-werkzeuge .knopf { min-height: 38px; padding: .38rem .55rem; }
  .schirm-hafen .katze-bild { max-height: 11rem; }
  .schirm-hafen .faecher { grid-template-columns: 1fr 1fr; }
  .hafen-route-kopf { display: block; }
  .hafen-route-kopf small { display: block; margin-top: .15rem; }
}

@media (min-width: 900px) {
  #buehne:has(.schirm-hafen:not([hidden])) { max-width: 94rem; }
  .schirm-hafen {
    min-height: calc(100svh - 1.4rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf"
      "entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken"
      "wesen wesen wesen wesen wesen wesen status status status status status status"
      "route route route route route route route route route route route route"
      "aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion"
      "wege wege wege wege wege wege wege wege wege wege wege wege";
    align-content: start;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.65rem);
    background-position: center center;
  }
  /* Vier gleich große Inselkarten statt einer sechsseitigen Kartenwolke
     mit einem einzelnen Nachzügler in der zweiten Reihe. */
  .hafen-entdecken { width: min(100%, 61rem); justify-self: center; }
  #buehne .schirm-hafen .hafen-route { width: min(100%, 66rem); justify-self: center; padding: .85rem 1rem 1rem; }
  .hafen-entdecken { padding: .8rem; }
  #buehne .schirm-hafen .faecher { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .72rem; padding: .1rem; }
  #buehne .schirm-hafen .fachzeile { min-height: 7rem; padding: .62rem; }
  #buehne .schirm-hafen .fachname { min-height: 2.65rem; font-size: .72rem; }
  .hafen-wesen { width: min(100%, 29rem); max-width: none; justify-self: end; align-self: start; }
  #buehne .schirm-hafen .hafen-aktion {
    width: min(100%, 39rem); max-width: none; justify-self: center; align-self: start;
    gap: .72rem; padding: .75rem; border: 3px solid rgba(203, 151, 76, .86); border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(59, 38, 24, .91), rgba(31, 48, 48, .86));
    box-shadow: inset 0 1px rgba(255,255,255,.13), 0 6px #2b1a10, 0 14px 26px rgba(4,35,42,.26);
  }
  #buehne .schirm-hafen .hafen-aktion .werkbank { margin: 0; }
  #buehne .schirm-hafen .lernmodus {
    margin: 0; padding: .5rem .6rem; border: 1px solid rgba(255,226,163,.35); border-radius: .85rem;
    background: rgba(255,248,221,.11); color: #fff0c5;
  }
  #buehne .schirm-hafen .lernmodus-label { color: #ffe3a2; }
  #buehne .schirm-hafen .hafen-aktion .fussnote { margin: -.1rem .1rem 0; text-align: center; }
  #buehne .schirm-hafen .hafen-nebenwege {
    justify-self: center; align-self: start; gap: .65rem; padding: .5rem .7rem;
    border: 2px solid rgba(201,151,79,.55); border-radius: 999px; background: rgba(41,29,19,.72);
  }
}

/* Erwachsenenseite: ruhiges Arbeitsdeck statt einer langen, gleichwertigen
   Buttonleiste. Navigation und Inhalt haben klar getrennte Aufgaben. */
.schirm-erwachsene {
  display: grid;
  grid-template-columns: minmax(11.5rem, 13.5rem) minmax(0, 1fr);
  grid-template-areas: "kopf kopf" "navigation inhalt";
  align-items: start;
  max-width: 76rem;
  gap: 1rem 1.25rem;
  padding: clamp(.8rem, 2.2vw, 1.6rem);
  border: 1px solid rgba(91, 145, 142, .42);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(252,254,249,.96), rgba(231,243,238,.94));
  box-shadow: 0 14px 36px rgba(8, 59, 66, .16);
}
.schirm-erwachsene .ew-kopf { grid-area: kopf; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0; padding: 0 0 1rem; border-bottom: 1px solid rgba(52, 111, 108, .22); }
.schirm-erwachsene .ew-titel > span { display: block; color: #28736f; font: 800 .63rem/1 var(--schrift-anzeige); letter-spacing: .14em; }
.schirm-erwachsene .ew-titel h1 { margin: .24rem 0 .18rem; color: #173f49; font-size: clamp(1.35rem, 3vw, 2rem); }
.schirm-erwachsene .ew-titel p { margin: 0; color: #55736e; font-size: .82rem; }
.schirm-erwachsene .ew-kopf-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; max-width: 31rem; }
.schirm-erwachsene .ew-kopf-aktionen .knopf { min-height: 2.35rem; padding: .42rem .6rem; border-color: #75aaa2; background: #f9fcf8; color: #245d61; box-shadow: 0 2px 0 rgba(44,112,105,.2); font-size: .72rem; }
.schirm-erwachsene .ew-kopf-aktionen #ew-familie-verwalten { border-color: #d3a854; background: #fff6dd; color: #684c22; }
.schirm-erwachsene .ew-kopf-aktionen #ew-familie-abmelden { border-color: #cf8b72; color: #8a4639; }
.schirm-erwachsene .ew-reiter { grid-area: navigation; display: grid; align-content: start; gap: .32rem; padding: .75rem; border: 1px solid rgba(79,135,129,.26); border-radius: .95rem; background: linear-gradient(155deg, #0b5360, #063d4b); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 4px 0 rgba(3,42,51,.55); }
.schirm-erwachsene .ew-nav-gruppe { display: block; margin: .45rem .3rem .1rem; color: #e7c978; font: 800 .56rem/1 var(--schrift-anzeige); letter-spacing: .14em; }
.schirm-erwachsene .ew-nav-gruppe:first-child { margin-top: .15rem; }
.schirm-erwachsene .ew-reiter-knopf { display: flex; align-items: center; gap: .48rem; width: 100%; min-height: 2.55rem; padding: .45rem .52rem; border: 1px solid transparent; border-radius: .62rem; background: transparent; color: #d5e8e1; text-align: left; box-shadow: none; }
.schirm-erwachsene .ew-reiter-knopf i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .45rem; background: rgba(255,255,255,.1); color: #f2d993; font-style: normal; }
.schirm-erwachsene .ew-reiter-knopf:hover, .schirm-erwachsene .ew-reiter-knopf:focus-visible { background: rgba(255,255,255,.1); color: #fff7df; }
.schirm-erwachsene .ew-reiter-knopf.aktiv { border-color: rgba(232,204,126,.72); background: #f8f5e9; color: #194c55; box-shadow: 0 2px 0 rgba(1,33,43,.46); }
.schirm-erwachsene .ew-reiter-knopf.aktiv i { background: #147b7e; color: #fff2c6; }
.schirm-erwachsene .ew-inhalt { grid-area: inhalt; min-width: 0; padding: clamp(.85rem, 2vw, 1.35rem); border: 1px solid rgba(100,157,150,.35); border-radius: 1rem; background: rgba(255,255,252,.9); box-shadow: 0 6px 18px rgba(10,61,67,.09); }
.schirm-erwachsene .ew-inhalt h2 { color: #205d60; font-size: 1rem; }
.schirm-erwachsene .ew-hinweis { color: #617975; }
@media (max-width: 760px) {
  .schirm-erwachsene { grid-template-columns: 1fr; grid-template-areas: "kopf" "navigation" "inhalt"; border-radius: 0; }
  .schirm-erwachsene .ew-kopf { display: grid; }
  .schirm-erwachsene .ew-kopf-aktionen { justify-content: start; max-width: none; }
  .schirm-erwachsene .ew-reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schirm-erwachsene .ew-nav-gruppe { grid-column: 1 / -1; }
  .schirm-erwachsene .ew-reiter-knopf { min-height: 2.8rem; }
}

@media (min-width: 900px) {
  .schirm-hafen[data-anfang="true"] {
    grid-template-areas:
      "kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf"
      "kompass kompass kompass kompass kompass kompass kompass kompass kompass kompass kompass kompass"
      "wesen wesen wesen wesen wesen wesen wesen wesen wesen wesen wesen wesen";
    grid-template-rows: auto auto 1fr;
  }
  .schirm-hafen[data-anfang="true"] .hafen-wesen { width: min(100%, 25rem); justify-self: center; }
}

@media (max-width: 899px) {
  .schirm-hafen[data-anfang="true"] {
    grid-template-areas: "kopf" "kompass" "wesen";
  }
}

/* Handy zuerst: Viele der älteren Hafen-Kacheln waren mit .5–.7rem für
   große Bildschirme entworfen. Auf einem Telefon sind das kaum 10–12 px.
   Diese abschließende Ebene macht Informationen lesbar, ohne die großen
   Überschriften künstlich weiter aufzublasen. */
@media (max-width: 640px) {
  html, body { font-size: 18px; }
  .schirm-hafen .hafen-entdecken-kopf span,
  .schirm-hafen .hafen-route-kopf span,
  .schirm-hafen .hafen-kompass-marke,
  .schirm-hafen .lernmodus-label { font-size: .68rem; }
  .schirm-hafen .hafen-entdecken-kopf small,
  .schirm-hafen .hafen-route-kopf small,
  .schirm-hafen .hafen-moment,
  .schirm-hafen .lernmodus-hilfe { font-size: .78rem; line-height: 1.35; }
  .schirm-hafen .hafen-ort b { font-size: .84rem; }
  .schirm-hafen .hafen-ort small { font-size: .73rem; line-height: 1.25; }
  .schirm-hafen .fachname { font-size: .78rem; line-height: 1.22; }
  .schirm-hafen .fachname small,
  .schirm-hafen .inselkarte-status { font-size: .68rem; }
  .schirm-hafen .fach-aufklappen { min-height: 36px; padding: .38rem .62rem; font-size: .71rem; }
  .lernmodus-fokus, .lernmodus-dauer { min-height: 2.65rem; font-size: .78rem; }
  .stromwerk-experiment small { font-size: .71rem; line-height: 1.3; }
  .stromwerk-experiment b { font-size: .82rem; }
  .stromwerk-experiment button strong { font-size: .63rem; }
}

/* Fachübersicht: Die Fachfarbe ist ein Wegweiser, keine zweite Farbwelt.
   Alle Inselkarten teilen sich deshalb eine ruhige Meeresoberfläche; nur
   Rand, Symbol und Status tragen die jeweilige Fachfarbe. */
#buehne #schirm-tor .fachzeile,
.schirm-hafen .fachzeile {
  background: linear-gradient(145deg, #fcfefb, #eaf4f0);
  border-color: color-mix(in srgb, var(--fachfarbe) 48%, #5b918b);
  box-shadow: inset 0 1px rgba(255,255,255,.95), 0 4px 0 rgba(37,101,102,.26), 0 10px 18px rgba(10,59,66,.12);
}
#buehne #schirm-tor .fachzeile::before,
.schirm-hafen .fachzeile::before { background: var(--fachfarbe); opacity: .08; }
#buehne #schirm-tor .fachname,
.schirm-hafen .fachname { background: rgba(255,255,255,.88); color: #174c57; box-shadow: inset 0 1px #fff, 0 2px 0 rgba(52,116,113,.24); }
#buehne #schirm-tor .fachname small,
.schirm-hafen .fachname small { color: #477078; }
#buehne #schirm-tor .fach-aufklappen,
.schirm-hafen .fach-aufklappen { border-color: #78aaa2; background: #f7fbf7; color: #1f686c; box-shadow: none; }
#buehne #schirm-tor .fach-aufklappen:hover,
#buehne #schirm-tor .fach-aufklappen:focus-visible,
.schirm-hafen .fach-aufklappen:hover,
.schirm-hafen .fach-aufklappen:focus-visible { border-color: var(--fachfarbe); background: #fff; color: #174c57; }

/* Aufgeklappte Themen bleiben Teil derselben Inselkarte. Die alte
   Pergamentfläche wirkte wie ein Fremdfenster und wird hier bewusst durch
   kühles Kartenpapier ersetzt. */
#buehne #schirm-tor .themen:not([hidden]),
.schirm-hafen .themen:not([hidden]) { border-color: color-mix(in srgb, var(--fachfarbe) 42%, #72a69d); background: linear-gradient(145deg, #f8fcf9, #e7f2ee); box-shadow: inset 0 1px #fff, 0 5px 14px rgba(10,62,68,.14); }
#buehne #schirm-tor .themen-kopf,
.schirm-hafen .themen-kopf { color: #315f65; }

#buehne #schirm-tor .themen .fach,
.schirm-hafen .themen .fach { border-color: color-mix(in srgb, var(--fachfarbe) 43%, #77a59f); background: linear-gradient(145deg, #fffefb, #edf6f2); color: #214e57; box-shadow: 0 3px 0 rgba(43,108,105,.2); }
#buehne #schirm-tor .themen .fach.aktiv,
.schirm-hafen .themen .fach.aktiv { background: linear-gradient(145deg, color-mix(in srgb, var(--fachfarbe) 24%, #fff), color-mix(in srgb, var(--fachfarbe) 10%, #e6f3ef)); color: #173f49; box-shadow: 0 4px 0 color-mix(in srgb, var(--fachfarbe) 34%, #427b78); }
#buehne #schirm-tor .thema-option .fach-anleitung,
.schirm-hafen .thema-option .fach-anleitung { border-color: #7ba9a2; background: #f5faf7; color: #24686c; box-shadow: none; }
#buehne #schirm-tor .themen-finale { background: rgba(255,255,255,.66); border-color: color-mix(in srgb, var(--fachfarbe) 34%, #9ebeb7); }

/* Symbole gehören zur Navigation, nicht zu einer zweiten Regenbogenebene. */
#buehne #schirm-tor .fachname-symbol,
.schirm-hafen .fachname-symbol,
#buehne #schirm-tor .inselkarte-insel::after,
.schirm-hafen .inselkarte-insel::after { color: #1f7e84; }

/* Drei klare Hafenorte statt eines zweiten Menüs: die Inselkarte lebt in
   „Häfen entdecken“, im eigenen Hafen bleiben Wesen, Funde und Rucksack. */
.schirm-hafen .hafen-orte { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.schirm-hafen .hafen-ort-rucksack { border-color: #63a5a0; background: linear-gradient(145deg, #f7fcf8, #dff0ea); }
.schirm-hafen .hafen-ort-rucksack i { background: #247b7e; }

/* Einheitliche Wunderhafen-Palette -------------------------------------------------
   Diese Schlussregeln räumen historische Werkstatt-/Pfirsichfarben auf. Die
   Fachfarben bleiben als feine Navigationssignale, Flächen und Handlungen
   folgen jedoch überall derselben maritimen Hierarchie: Tiefseeblau, Petrol,
   Segeltuch, Messing und ein einziger gedämpfter Korall-Akzent. */
.schild { border-color: #2a7d7b; background: linear-gradient(145deg, #fffdf8, #edf6f0); box-shadow: 0 4px 0 rgba(32,100,101,.2), 0 10px 24px rgba(14,57,65,.12); }
.schild-zeile { color: #36837d; }.schild h1 { color: #183f47; }.schild-stoerung { border-color: #c76851; }.schild-stoerung .schild-zeile { color: #b65b49; }

#buehne #schirm-tor .hafen-logo { border-color: rgba(132,201,190,.7); background: linear-gradient(130deg, rgba(255,255,255,.08), transparent 35%), linear-gradient(#0b4b5a, #063846); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 5px #042a35, 0 10px 20px rgba(9,45,54,.28); }
#buehne #schirm-tor .hafen-logo span { color: #a9ded2; }#buehne #schirm-tor .hafen-logo h1 { color: #fff3ce; text-shadow: 0 2px #06303c; }
#buehne #schirm-tor .hafen-wesen,
#buehne #schirm-tor .wochenkarte,
#buehne #schirm-tor .regal { border-color: rgba(143,205,193,.42); background: linear-gradient(150deg, rgba(7,62,72,.96), rgba(9,83,82,.92)); box-shadow: 0 7px 18px rgba(2,34,43,.25); }
#buehne #schirm-tor .hafen-wesen-marke { background: rgba(40,133,132,.72); }
#buehne #schirm-tor .hafen-route,
#buehne #schirm-tor .hafen-entdecken { border-color: #78aaa2; background: linear-gradient(145deg, rgba(255,253,246,.98), rgba(235,245,239,.98)); box-shadow: 0 6px 0 #336b6d, 0 14px 28px rgba(8,48,57,.18); }
#buehne #schirm-tor .hafen-route-kopf { border-bottom-color: rgba(42,111,108,.2); }#buehne #schirm-tor .hafen-route-kopf span { color: #1d676b; }#buehne #schirm-tor .hafen-route-kopf small { color: #55756f; }
#buehne #schirm-tor .fachzeile { background: linear-gradient(145deg, #fffef9, color-mix(in srgb, var(--fachfarbe) 7%, #eef7f2)); box-shadow: inset 0 1px #fff, 0 4px 0 color-mix(in srgb, var(--fachfarbe) 36%, #407875), 0 9px 16px rgba(16,68,71,.12); }
#buehne #schirm-tor .fachname { background: rgba(255,255,255,.72); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 2px 0 color-mix(in srgb, var(--fachfarbe) 30%, #487875); }
#buehne #schirm-tor .fach-aufklappen { background: #f7fbf6; }

#buehne #schirm-tor .hafen-kompass { border-color: rgba(129,203,190,.52); background: radial-gradient(circle at 10% 0, rgba(77,170,157,.24), transparent 34%), linear-gradient(135deg, #073f4d, #075e61); }
#buehne #schirm-tor .hafen-kompass-haupt,
#buehne #schirm-tor #knopf-start { border-color: #f1b18a; background: linear-gradient(180deg, #e98768, #cc654e); box-shadow: 0 5px 0 #984536, 0 10px 20px rgba(73,35,29,.22); }
#buehne #schirm-tor .hafen-kompass-haupt:hover,
#buehne #schirm-tor #knopf-start:hover { filter: brightness(1.04) saturate(.95); }

.schirm-schicht .kopf { border-color: #78aaa2; background: linear-gradient(145deg, #073f4d, #075d61); }
.schirm-schicht .auftrag { border-color: color-mix(in srgb, var(--missionsfarbe) 48%, #4c817d); box-shadow: inset 0 1px #fff, 0 7px #35696c, 0 17px 34px rgba(10,56,63,.26); }
.schirm-schicht .auftrag .missionsfrage { background: linear-gradient(155deg, #fffef9, color-mix(in srgb, var(--missionsfarbe) 8%, #eff7f1)); }
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte { background: linear-gradient(145deg, #fffef9, color-mix(in srgb, var(--missionsfarbe) 6%, #edf7f1)); box-shadow: inset 0 1px #fff, 0 5px 0 color-mix(in srgb, var(--missionsfarbe) 18%, #50817c); }
.schirm-schicht .auftrag .eingabe-feld { border-color: color-mix(in srgb, var(--missionsfarbe) 62%, #5a8580); background: #fffef9; }
.schirm-schicht .auftrag .taste { border-color: #8bb8ae; background: linear-gradient(#fffef9, #e6f1eb); box-shadow: 0 4px #6c9c91; color: #21484d; }
@keyframes rucksackWerkbank { 50% { transform: translateY(-.15rem); box-shadow: 0 0 0 4px rgba(255,214,126,.55), 0 7px #382313; } }
.inselkarte-status { display: block; margin-top: .28rem; color: color-mix(in srgb, var(--fachfarbe) 78%, #173f4a); font: 900 .52rem/1.15 var(--schrift-anzeige); font-style: normal; letter-spacing: .075em; }
#buehne #schirm-tor .inselkarte-insel .fachname { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .42rem; row-gap: .12rem; }.inselkarte-insel .fachname .inselkarte-status { grid-column: 2 / -1; width: 100%; margin: 0; }.inselkarte-insel .fachname small { min-width: 0; }
@keyframes hafenFinaleLeuchten { 50% { filter: brightness(1.18) drop-shadow(0 0 .7rem #fff0a0); } }
@keyframes hafenBauBenutzt { 38% { transform: translateY(-.8rem) rotate(7deg) scale(1.14); } 100% { transform: translateY(0) rotate(-3deg); } }
@media (max-width: 640px) {.inselkarte-status { font-size: .49rem; } }

/* Kursweg und Erwachsenen-Begleitung: Orientierung vor Zahlen, kurze
   Auswahlmöglichkeiten statt versteckter Einstellungen. */

.themen-finale { display: grid; gap: .25rem; margin: .48rem 0; padding: .6rem .65rem; border: 2px solid color-mix(in srgb, var(--fachfarbe) 44%, #d8ab63); border-radius: .75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--fachfarbe) 10%, #fffdf4), #fff7dc); }.themen-finale > span { color: color-mix(in srgb, var(--fachfarbe) 80%, #7b5422); font: 900 .55rem/1 var(--schrift-anzeige); letter-spacing: .1em; }.themen-finale b { color: #315753; font-size: .74rem; }.themen-finale small { color: #647773; font-size: .64rem; line-height: 1.25; }.themen-finale button { justify-self: start; min-height: 2rem; padding: .35rem .55rem; border: 1px solid var(--fachfarbe); border-radius: .5rem; background: #fffdf4; color: color-mix(in srgb, var(--fachfarbe) 84%, #345650); font: 800 .62rem/1 var(--schrift-anzeige); letter-spacing: .04em; cursor: pointer; }.themen-finale button:hover, .themen-finale button:focus-visible { background: color-mix(in srgb, var(--fachfarbe) 14%, #fff); }

/* In Mathe ist der Reiseplan die Hauptsache: Die drei Orientierungskarten
   erhalten darunter bewusst die volle Breite statt als kaum lesbare Spalten
   zwischen Themenkacheln zu verschwinden. */
.themen > .themen-finale { grid-column: 1 / -1; }

/* Einstieg in die freie Schaltungs-Sandbox, nur im Physik-Hafen. Die Farbe
   kommt wie überall von der Fachinsel, damit es kein fremdes Minispiel wird. */

.stromwerk-experiment { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .62rem .68rem; border: 1px solid color-mix(in srgb, var(--fachfarbe) 42%, #79a9a2); border-radius: .72rem; background: linear-gradient(125deg, rgba(14,77,87,.08), rgba(255,253,247,.88)); }.stromwerk-experiment > div { display: grid; gap: .12rem; }.stromwerk-experiment span { color: color-mix(in srgb, var(--fachfarbe) 80%, #23666c); font: 900 .53rem/1 var(--schrift-anzeige); letter-spacing: .11em; }.stromwerk-experiment b { color: #24565a; font-size: .73rem; }.stromwerk-experiment small { color: #5c7772; font-size: .61rem; line-height: 1.25; }.stromwerk-experiment button { display: grid; justify-items: center; gap: .12rem; min-width: 8.3rem; min-height: 3.25rem; padding: .42rem .55rem; border: 1px solid #2f8882; border-radius: .62rem; background: linear-gradient(180deg, #147d7c, #0b6268); box-shadow: 0 3px 0 #064850; color: #fff9e8; cursor: pointer; }.stromwerk-experiment button strong { font: 900 .6rem/1 var(--schrift-anzeige); letter-spacing: .07em; text-transform: uppercase; }.stromwerk-experiment button small { color: #d7f0e8; font-size: .54rem; }.stromwerk-experiment button:not(:disabled):hover, .stromwerk-experiment button:not(:disabled):focus-visible { transform: translateY(-1px); filter: brightness(1.08); }.stromwerk-experiment.gesperrt { border-style: dashed; border-color: #92aaa4; background: rgba(238,245,240,.72); }.stromwerk-experiment.gesperrt button, .stromwerk-experiment button:disabled { border-color: #a7bbb5; background: #dce7e1; box-shadow: none; color: #607873; cursor: not-allowed; opacity: 1; }.stromwerk-experiment.gesperrt button small, .stromwerk-experiment button:disabled small { color: #728a84; }

@media (max-width: 600px) { .stromwerk-experiment { grid-template-columns: 1fr; }.stromwerk-experiment button { width: 100%; min-height: 2.85rem; } }
.ew-begleitung { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .7rem 1rem; margin: 0 0 1.1rem; padding: .85rem .95rem; border: 2px solid #7db6a8; border-radius: .9rem; background: linear-gradient(135deg, #eff9f0, #eef7f4); color: #28574f; }.ew-begleitung > div:first-child > span { color: #478779; font: 900 .6rem/1 var(--schrift-anzeige); letter-spacing: .12em; }.ew-begleitung h2 { margin: .2rem 0 !important; color: #28574f; font-size: .96rem; }.ew-begleitung p { margin: 0; font-size: .78rem; line-height: 1.35; }.ew-dauerwahl { display: flex; align-items: center; gap: .35rem; }.ew-dauerwahl button { min-height: 2.25rem; padding: .38rem .52rem; border: 1px solid #8abbb0; border-radius: .55rem; background: #fff; color: #2a625b; font-weight: 800; cursor: pointer; }.ew-dauerwahl button.aktiv { border-color: #276f62; background: #276f62; color: #fff7df; box-shadow: 0 2px 0 #1c4f4a; }.ew-begleitung-hinweis { grid-column: 1 / -1; padding-top: .55rem; border-top: 1px solid rgba(61,120,108,.2); color: #54736d; }
.ew-wochenblick { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .6rem; margin: 0 0 1.1rem; padding: .8rem .9rem; border: 2px solid #d0aa72; border-radius: .9rem; background: linear-gradient(135deg, #fffaf0, #f5ead2); color: #5a4935; }.ew-wochenblick > div { display: grid; gap: .2rem; padding: .15rem .4rem; }.ew-wochenblick > div + div { border-left: 1px solid rgba(132,97,52,.22); }.ew-wochenblick span { color: #9a6a36; font: 900 .55rem/1 var(--schrift-anzeige); letter-spacing: .1em; }.ew-wochenblick b { font-size: .8rem; }.ew-wochenblick small { font-size: .69rem; line-height: 1.32; }
@media (max-width: 600px) {.ew-begleitung, .ew-wochenblick { grid-template-columns: 1fr; }.ew-wochenblick > div + div { border-top: 1px solid rgba(132,97,52,.22); border-left: 0; padding-top: .5rem; }.ew-dauerwahl { justify-content: stretch; }.ew-dauerwahl button { flex: 1; }.ew-begleitung-hinweis { font-size: .72rem !important; } }

/* VERBINDLICHER HAFENABSCHLUSS
   Muss die letzte Hafenregel bleiben. Er neutralisiert die alten
   Panorama-Experimente und verhindert schmale Randspalten. */
#buehne:has(#schirm-tor:not([hidden])) {
  width: 100%;
  max-width: 96rem;
  padding: clamp(.45rem, 1.2vw, .85rem);
}
#buehne #schirm-tor {
  width: 100%;
  min-width: 0;
  min-height: calc(100svh - 1rem);
  align-content: start;
  align-items: start;
  gap: clamp(.75rem, 1.35vw, 1.15rem);
  padding: clamp(.8rem, 1.7vw, 1.3rem);
  overflow: clip;
  border: 1px solid rgba(166, 219, 218, .48);
  border-radius: 1.4rem;
  box-shadow: 0 18px 45px rgba(3, 29, 43, .24);
}

#buehne #schirm-tor .hafen-kopf {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem;
  border: 1px solid rgba(188, 225, 220, .28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(5, 42, 58, .94), rgba(8, 61, 70, .88));
  box-shadow: 0 8px 24px rgba(2, 24, 37, .2), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
#buehne #schirm-tor .hafen-logo { min-width: 0; padding: .2rem .35rem; border: 0; background: transparent; box-shadow: none; text-shadow: none; }
#buehne #schirm-tor .hafen-logo span { color: #9cd9d1; font-size: .6rem; }
#buehne #schirm-tor .hafen-logo h1 { color: #fff4d2; font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: .085em; text-shadow: none; }
#buehne #schirm-tor .hafen-logo small { color: #bfd8d5; }
#buehne #schirm-tor .hafen-werkzeuge { align-items: center; gap: .38rem; }
#buehne #schirm-tor .hafen-werkzeuge .knopf-flach,
#buehne #schirm-tor .hafen-nebenwege .knopf-flach { min-height: 38px; border: 1px solid rgba(190,224,219,.34); background: rgba(255,255,255,.08); color: #eff9f5; box-shadow: none; }

#buehne #schirm-tor .hafen-route {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
  padding: clamp(.8rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(133, 96, 50, .36);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(255,252,239,.98), rgba(239,231,204,.97));
  box-shadow: 0 12px 28px rgba(3,31,43,.2), inset 0 1px #fff;
}
#buehne #schirm-tor .hafen-route-kopf { margin: 0 0 .7rem; padding: 0 0 .6rem; border-bottom: 1px solid rgba(81,63,40,.16); }
#buehne #schirm-tor .hafen-route-kopf span { color: #67442c; font-size: .76rem; }
#buehne #schirm-tor .hafen-route-kopf small { color: #765c47; }

#buehne #schirm-tor .faecher { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 0; border: 0; background: transparent; }
#buehne #schirm-tor .fachzeile { width: 100%; min-width: 0; min-height: 6.2rem; gap: .5rem; padding: .6rem; border-width: 1px; border-radius: .9rem; box-shadow: 0 4px 12px rgba(52,36,24,.11); }
#buehne #schirm-tor .fachzeile::before { opacity: .14; }
#buehne #schirm-tor .fachzeile.offen { grid-column: 1 / -1; padding: .75rem; }
#buehne #schirm-tor .fachname { width: 100%; min-width: 0; min-height: 2.65rem; justify-content: flex-start; padding: .45rem .55rem; border-width: 1px; font-size: clamp(.68rem,.9vw,.78rem); line-height: 1.25; letter-spacing: .075em; white-space: normal; overflow-wrap: normal; word-break: normal; box-shadow: none; }
#buehne #schirm-tor .fachname small { margin-left: auto; text-align: right; }
#buehne #schirm-tor .fach-aufklappen { align-self: flex-start; min-height: 34px; padding: .38rem .62rem; border-width: 1px; background: rgba(255,255,255,.78); box-shadow: none; }

#buehne #schirm-tor .hafen-wesen,
#buehne #schirm-tor .hafen-status,
#buehne #schirm-tor .hafen-aktion,
#buehne #schirm-tor .hafen-entdecken { width: 100%; max-width: none; justify-self: stretch; margin: 0; }
#buehne #schirm-tor .hafen-wesen,
#buehne #schirm-tor .wochenkarte,
#buehne #schirm-tor .regal,
#buehne #schirm-tor .hafen-aktion { border: 1px solid rgba(184,217,211,.3); background: linear-gradient(145deg, rgba(5,43,56,.93), rgba(8,61,65,.88)); box-shadow: 0 10px 24px rgba(2,28,39,.2), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(10px); }
#buehne #schirm-tor .hafen-wesen { padding: .65rem; border-radius: 1rem; }
#buehne #schirm-tor .hafen-wesen-marke { background: rgba(102,190,180,.18); color: #d9f5eb; box-shadow: none; }
#buehne #schirm-tor .katzenplatz { margin-top: .3rem; }
#buehne #schirm-tor .katze-bild { max-height: 9.5rem; }
#buehne #schirm-tor .wochenkarte, #buehne #schirm-tor .regal { border-radius: .9rem; }
#buehne #schirm-tor .hafen-aktion { gap: .65rem; padding: .7rem; border-radius: 1rem; }
#buehne #schirm-tor .lernmodus { margin: 0; border-color: rgba(210,233,226,.25); background: rgba(255,255,255,.07); color: #ecf5ef; }
#buehne #schirm-tor .lernmodus-label { color: #bde5da; }
#buehne #schirm-tor .lernmodus-fokus, #buehne #schirm-tor .lernmodus-dauer { border-color: rgba(174,210,201,.42); background: #f7faf4; color: #33545a; }
#buehne #schirm-tor #knopf-start { min-height: 4.4rem; border: 1px solid #ffb184; background: linear-gradient(180deg,#ff9b5d,#e86538); color: #fff; box-shadow: 0 5px 0 #a43c24, 0 10px 20px rgba(62,27,22,.22); text-shadow: none; }
#buehne #schirm-tor .fussnote { margin: 0; color: #cfdfda; text-shadow: none; }

#buehne #schirm-tor .hafen-entdecken { padding: .8rem; border: 1px solid rgba(188,220,213,.32); border-radius: 1rem; background: linear-gradient(145deg,rgba(5,43,56,.9),rgba(8,62,68,.84)); box-shadow: 0 10px 24px rgba(2,28,39,.18); }
#buehne #schirm-tor .hafen-entdecken-kopf span { color: #d7eee5; }
#buehne #schirm-tor .hafen-entdecken-kopf small { color: #b9d3ce; }
#buehne #schirm-tor .hafen-orte { grid-template-columns: repeat(4,minmax(0,1fr)); }
#buehne #schirm-tor .hafen-ort { min-height: 4.8rem; grid-template-columns: 2.2rem minmax(0,1fr); border: 1px solid rgba(196,224,214,.35); background: rgba(250,249,237,.94); box-shadow: none; }
#buehne #schirm-tor .hafen-ort i { width: 2rem; height: 2rem; font-size: 1rem; }
#buehne #schirm-tor .hafen-nebenwege { width: 100%; justify-content: center; padding: .45rem; border: 0; border-radius: .9rem; background: rgba(4,35,47,.72); }
#buehne #schirm-tor .hafen-kompass { width: 100%; padding: .55rem .7rem; border: 1px solid rgba(128,159,143,.28); border-radius: .9rem; background: rgba(249,250,237,.96); box-shadow: 0 7px 18px rgba(3,31,43,.15); }

/* Gemeinsame Farbwelt: Fachfarben sind Wegweiser, keine vollflächigen
   Tapeten. Kartenpapier, Petrol und Koralle bilden die eigentliche UI. */
#buehne #schirm-tor .hafen-route {
  border-color: rgba(129, 161, 151, .38);
  background: linear-gradient(145deg, rgba(250,249,240,.985), rgba(226,239,234,.975));
}
#buehne #schirm-tor .hafen-route-kopf span { color: #234f57; }
#buehne #schirm-tor .hafen-route-kopf small { color: #607773; }

#buehne #schirm-tor .fachzeile {
  border-color: #b7cbc6;
  background:
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--fachfarbe) 10%, transparent), transparent 56%),
    linear-gradient(145deg, rgba(255,255,250,.98), rgba(232,241,238,.97));
  box-shadow: 0 4px 12px rgba(22,65,70,.1);
}
#buehne #schirm-tor .fachzeile::before { background: var(--fachfarbe); opacity: .09; }
#buehne #schirm-tor .fachname {
  border: 0;
  border-left: 4px solid var(--fachfarbe);
  border-radius: .55rem;
  background: rgba(255,255,255,.76);
  color: #174c57;
}
#buehne #schirm-tor .fachname-symbol { color: var(--fachfarbe); }
#buehne #schirm-tor .fachname small { color: #477078; }
#buehne #schirm-tor .fach-aufklappen {
  border-color: #9ebeb8;
  background: rgba(255,255,255,.7);
  color: #245c64;
}
#buehne #schirm-tor .fach-aufklappen:hover,
#buehne #schirm-tor .fach-aufklappen:focus-visible { border-color: var(--fachfarbe); color: color-mix(in srgb, var(--fachfarbe) 48%, #174c57); background: #fff; }
#buehne #schirm-tor .fachzeile.offen { border-color: color-mix(in srgb, var(--fachfarbe) 40%, #9ebeb8); }
#buehne #schirm-tor .themen:not([hidden]) { border-color: color-mix(in srgb, var(--fachfarbe) 42%, #86aaa4); background: #f8faf4; }

#buehne #schirm-tor .hafen-wesen,
#buehne #schirm-tor .wochenkarte,
#buehne #schirm-tor .regal,
#buehne #schirm-tor .hafen-aktion {
  border-color: rgba(137, 194, 184, .4);
  background: linear-gradient(145deg, rgba(3,48,61,.96), rgba(7,76,77,.93));
}
#buehne #schirm-tor .hafen-wesen-marke { background: rgba(111,194,180,.2); color: #e2f6ef; }

#buehne #schirm-tor .wochenkarte-marke,
#buehne #schirm-tor .regal-marke { color: #c4e7df; }
#buehne #schirm-tor .posten { border-color: rgba(144,198,188,.48); background: rgba(255,255,255,.1); color: #e5f2ed; }
#buehne #schirm-tor .posten-symbol { color: #ffb26e; }

#buehne #schirm-tor .lernmodus { border-color: rgba(145,200,190,.34); background: rgba(255,255,255,.055); }
#buehne #schirm-tor .lernmodus-label { color: #c4e8df; }
#buehne #schirm-tor .lernmodus-fokus,
#buehne #schirm-tor .lernmodus-dauer { border-color: #a8c8c1; background: #f4f8f2; color: #294f56; box-shadow: none; }
#buehne #schirm-tor .lernmodus-fokus.aktiv { border-color: #ffad68; background: #fff4e8; color: #7a472d; }
#buehne #schirm-tor #knopf-start { border-color: #ffbd91; background: linear-gradient(180deg,#ff965b,#f0663c); }

#buehne #schirm-tor .hafen-kompass { border-color: #bfd4ce; background: rgba(247,249,240,.97); color: #315f5e; }
#buehne #schirm-tor .hafen-kompass-zeichen { background: #0b7882; color: #eafff7; box-shadow: none; }
#buehne #schirm-tor .hafen-kompass span { color: #5b8079; }
#buehne #schirm-tor .hafen-kompass b { color: #275b59; }
#buehne #schirm-tor .hafen-kompass small { color: #58736f; }

/* Seekarten-Fassung: Der große Auswahlbereich gehört als dunkler
   Navigationstisch in die Hafenwelt. Die Fächer liegen darauf wie helle,
   warme Inselkarten – so verschwindet der klinische Mintblock. */
#buehne #schirm-tor .hafen-route {
  border-color: rgba(198, 169, 105, .58);
  background:
    radial-gradient(circle at 50% 0, rgba(80, 139, 139, .2), transparent 42%),
    linear-gradient(145deg, rgba(3, 39, 55, .97), rgba(7, 67, 70, .95));
  box-shadow: 0 12px 30px rgba(1,24,36,.3), inset 0 1px rgba(255,255,255,.08);
}
#buehne #schirm-tor .hafen-route-kopf { border-bottom-color: rgba(217, 193, 139, .25); }
#buehne #schirm-tor .hafen-route-kopf span { color: #f4ddb0; }
#buehne #schirm-tor .hafen-route-kopf small { color: #bcd4cf; }

#buehne #schirm-tor .fachzeile {
  border-color: rgba(207, 187, 143, .74);
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--fachfarbe) 7%, transparent), transparent 57%),
    linear-gradient(145deg, #fffaf0, #eee5d0);
  box-shadow: 0 4px 12px rgba(0,24,32,.2), inset 0 1px #fff;
}
#buehne #schirm-tor .fachzeile::before { opacity: .065; }
#buehne #schirm-tor .fachname { background: rgba(255,253,245,.72); color: #204d55; }
#buehne #schirm-tor .fachname small { color: #547178; }
#buehne #schirm-tor .fach-aufklappen { border-color: #aabeb6; background: rgba(255,250,236,.78); color: #2c5b61; }
#buehne #schirm-tor .themen:not([hidden]) { border-color: color-mix(in srgb, var(--fachfarbe) 34%, #bca576); background: #fff7e5; }

#buehne #schirm-tor .posten-symbol { color: #e0bd75; }
#buehne #schirm-tor .lernmodus-fokus.aktiv { border-color: #d2b578; background: #fff5df; color: #624d32; }

/* Der obere Wegweiser bekommt denselben warmen Kartencharakter und wirkt
   dadurch nicht mehr wie ein fremdes mintfarbenes Dashboard. */
#buehne #schirm-tor .hafen-kompass {
  border-color: rgba(193,166,108,.48);
  background: linear-gradient(120deg, rgba(255,250,232,.98), rgba(239,232,207,.97));
  color: #315c59;
}
#buehne #schirm-tor .hafen-kompass span { color: #7c7355; }
#buehne #schirm-tor .hafen-kompass small { color: #63756d; }

/* Der nächste Schritt ist Teil des Hafen-HUDs, nicht noch eine Papierkarte. */
#buehne #schirm-tor .hafen-kompass {
  border-color: rgba(130, 194, 184, .42);
  background:
    radial-gradient(circle at 15% 0, rgba(91, 174, 165, .2), transparent 32%),
    linear-gradient(135deg, rgba(3, 45, 59, .97), rgba(5, 72, 74, .95));
  box-shadow: 0 9px 22px rgba(1, 25, 37, .24), inset 0 1px rgba(255,255,255,.08);
  color: #edf7f1;
}
#buehne #schirm-tor .hafen-kompass-zeichen { border: 1px solid rgba(239, 211, 150, .45); background: rgba(216, 182, 108, .16); color: #f0d79e; }
#buehne #schirm-tor .hafen-kompass span { color: #9dd2c8; }
#buehne #schirm-tor .hafen-kompass b { color: #fff0cb; }
#buehne #schirm-tor .hafen-kompass small { color: #c0d7d1; }

@media (min-width: 1100px) {
  #buehne #schirm-tor,
  #buehne #schirm-tor[data-anfang="true"] {
    grid-template-columns: minmax(14rem,16rem) minmax(34rem,1fr) minmax(16rem,19rem);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: "kopf kopf kopf" "kompass kompass kompass" "wesen route aktion" "status route aktion" "entdecken entdecken entdecken" "wege wege wege" !important;
  }
  #buehne #schirm-tor .hafen-kopf { grid-area: kopf; }
  #buehne #schirm-tor .hafen-kompass { grid-area: kompass; }
  #buehne #schirm-tor .hafen-wesen { grid-area: wesen; }
  #buehne #schirm-tor .hafen-route { grid-area: route; }
  #buehne #schirm-tor .hafen-aktion { grid-area: aktion; }
  #buehne #schirm-tor .hafen-entdecken { grid-area: entdecken; }
  #buehne #schirm-tor .hafen-nebenwege { grid-area: wege; }
}

@media (min-width: 720px) and (max-width: 1099px) {
  #buehne #schirm-tor,
  #buehne #schirm-tor[data-anfang="true"] { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "kopf kopf" "kompass kompass" "route route" "wesen aktion" "status status" "entdecken entdecken" "wege wege"; }
  #buehne #schirm-tor .hafen-kopf { grid-area: kopf; }
  #buehne #schirm-tor .hafen-kompass { grid-area: kompass; }
  #buehne #schirm-tor .hafen-route { grid-area: route; }
  #buehne #schirm-tor .hafen-wesen { grid-area: wesen; }
  #buehne #schirm-tor .hafen-aktion { grid-area: aktion; }
  #buehne #schirm-tor .hafen-entdecken { grid-area: entdecken; }
  #buehne #schirm-tor .hafen-nebenwege { grid-area: wege; }
}

@media (max-width: 719px) {
  #buehne:has(#schirm-tor:not([hidden])) { padding: 0; }
  #buehne #schirm-tor,
  #buehne #schirm-tor[data-anfang="true"] { grid-template-columns: minmax(0,1fr); grid-template-areas: "kopf" "kompass" "route" "aktion" "wesen" "status" "entdecken" "wege"; min-height: 100svh; padding: .65rem; border: 0; border-radius: 0; }
  #buehne #schirm-tor .hafen-kopf { grid-area: kopf; position: static; grid-template-columns: 1fr; }
  #buehne #schirm-tor .hafen-werkzeuge { justify-content: flex-start; }
  #buehne #schirm-tor .hafen-kompass { grid-area: kompass; grid-template-columns: 2.3rem minmax(0,1fr); }
  #buehne #schirm-tor .hafen-kompass-aktionen { grid-column: 1 / -1; justify-content: stretch; }
  #buehne #schirm-tor .hafen-kompass-aktionen .knopf { flex: 1 1 8rem; }
  #buehne #schirm-tor .hafen-route { grid-area: route; }
  #buehne #schirm-tor .hafen-aktion { grid-area: aktion; }
  #buehne #schirm-tor .hafen-wesen { grid-area: wesen; }
  #buehne #schirm-tor .hafen-entdecken { grid-area: entdecken; }
  #buehne #schirm-tor .hafen-nebenwege { grid-area: wege; }
  #buehne #schirm-tor .faecher { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
  #buehne #schirm-tor .fachzeile { min-height: 6rem; padding: .48rem; }
  #buehne #schirm-tor .fachname { font-size: .66rem; letter-spacing: .05em; }
  #buehne #schirm-tor .hafen-orte { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  #buehne #schirm-tor .faecher { grid-template-columns: 1fr; }
  #buehne #schirm-tor .fachzeile { min-height: 5.3rem; }
}

/* --- Hafen 2026: eine verbindliche, ruhige Komposition -----------------
   Frühere Ausbaustufen liegen aus historischen Gründen weiter oben. Diese
   letzte Schicht definiert bewusst EIN Raster je Gerätegröße. Dadurch kann
   keine alte Randpositionierung die Inselkarte wieder schmal drücken. */
#buehne:has(.schirm-hafen:not([hidden])) {
  width: 100%;
  max-width: 96rem;
  padding: clamp(.45rem, 1.2vw, .85rem);
}

.schirm-hafen {
  width: 100%;
  min-width: 0;
  min-height: calc(100svh - 1rem);
  align-content: start;
  align-items: start;
  gap: clamp(.75rem, 1.35vw, 1.15rem);
  padding: clamp(.8rem, 1.7vw, 1.3rem);
  overflow: clip;
  border: 1px solid rgba(166, 219, 218, .48);
  border-radius: 1.4rem;
  box-shadow: 0 18px 45px rgba(3, 29, 43, .24);
}

/* Kopfzeile: ein ruhiges Navigationsband statt mehrerer Holzschilder. */
.schirm-hafen .hafen-kopf {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem;
  border: 1px solid rgba(188, 225, 220, .28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(5, 42, 58, .94), rgba(8, 61, 70, .88));
  box-shadow: 0 8px 24px rgba(2, 24, 37, .2), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.schirm-hafen .hafen-logo {
  min-width: 0;
  padding: .2rem .35rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.schirm-hafen .hafen-logo span { color: #9cd9d1; font-size: .6rem; }
.schirm-hafen .hafen-logo h1 { color: #fff4d2; font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: .085em; text-shadow: none; }
.schirm-hafen .hafen-logo small { color: #bfd8d5; }
.schirm-hafen .hafen-werkzeuge { align-items: center; gap: .38rem; }
.schirm-hafen .hafen-werkzeuge .knopf-flach,
.schirm-hafen .hafen-nebenwege .knopf-flach {
  min-height: 38px;
  border: 1px solid rgba(190, 224, 219, .34);
  background: rgba(255,255,255,.08);
  color: #eff9f5;
  box-shadow: none;
}

/* Hauptkarte: warmes, gut lesbares Kartenpapier mit klarer Typografie. */
.schirm-hafen .hafen-route {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-self: stretch !important;
  padding: clamp(.8rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(133, 96, 50, .36);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(255, 252, 239, .98), rgba(239, 231, 204, .97));
  box-shadow: 0 12px 28px rgba(3, 31, 43, .2), inset 0 1px #fff;
  backdrop-filter: blur(8px);
}
.schirm-hafen .hafen-route-kopf { margin: 0 0 .7rem; padding: 0 0 .6rem; border-bottom: 1px solid rgba(81, 63, 40, .16); }
.schirm-hafen .hafen-route-kopf span { color: #67442c; font-size: .76rem; }
.schirm-hafen .hafen-route-kopf small { color: #765c47; }

.schirm-hafen .faecher {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.schirm-hafen .fachzeile {
  width: 100%;
  min-width: 0;
  min-height: 6.4rem;
  gap: .5rem;
  padding: .6rem;
  border-width: 1px;
  border-radius: .9rem;
  box-shadow: 0 4px 12px rgba(52, 36, 24, .11);
}
.schirm-hafen .fachzeile::before { opacity: .14; }
.schirm-hafen .fachzeile.offen { grid-column: 1 / -1; padding: .75rem; }
.schirm-hafen .fachname {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  justify-content: flex-start;
  padding: .45rem .55rem;
  border-width: 1px;
  font-size: clamp(.68rem, .9vw, .78rem);
  line-height: 1.25;
  letter-spacing: .075em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  box-shadow: none;
}
.schirm-hafen .fachname small { margin-left: auto; text-align: right; }
.schirm-hafen .fach-aufklappen { align-self: flex-start; min-height: 34px; padding: .38rem .62rem; border-width: 1px; background: rgba(255,255,255,.78); box-shadow: none; }

/* Nebeninformationen gehören sichtbar zusammen und konkurrieren nicht mit
   der Inselkarte. Petrolglas verbindet sie mit der Kulisse. */
.schirm-hafen .hafen-wesen,
.schirm-hafen .hafen-status,
.schirm-hafen .hafen-aktion,
.schirm-hafen .hafen-entdecken {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  margin: 0;
}
.schirm-hafen .hafen-wesen,
.schirm-hafen .wochenkarte,
.schirm-hafen .regal,
.schirm-hafen .hafen-aktion {
  border: 1px solid rgba(184, 217, 211, .3);
  background: linear-gradient(145deg, rgba(5, 43, 56, .93), rgba(8, 61, 65, .88));
  box-shadow: 0 10px 24px rgba(2, 28, 39, .2), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.schirm-hafen .hafen-wesen { padding: .65rem; border-radius: 1rem; }
.schirm-hafen .hafen-wesen-marke { background: rgba(102, 190, 180, .18); color: #d9f5eb; box-shadow: none; }
.schirm-hafen .katzenplatz { margin-top: .3rem; }
.schirm-hafen .katze-bild { max-height: 9.5rem; }
.schirm-hafen .wochenkarte, .schirm-hafen .regal { border-radius: .9rem; }
.schirm-hafen .hafen-aktion { gap: .65rem; padding: .7rem; border-radius: 1rem; }
.schirm-hafen .lernmodus { margin: 0; border-color: rgba(210, 233, 226, .25); background: rgba(255,255,255,.07); color: #ecf5ef; }
.schirm-hafen .lernmodus-label { color: #bde5da; }
.schirm-hafen .lernmodus-fokus, .schirm-hafen .lernmodus-dauer { border-color: rgba(174, 210, 201, .42); background: #f7faf4; color: #33545a; }
.schirm-hafen #knopf-start {
  min-height: 4.4rem;
  border: 1px solid #ffb184;
  background: linear-gradient(180deg, #ff9b5d, #e86538);
  color: #fff;
  box-shadow: 0 5px 0 #a43c24, 0 10px 20px rgba(62, 27, 22, .22);
  text-shadow: none;
}
.schirm-hafen .fussnote { margin: 0; color: #cfdfda; text-shadow: none; }

.schirm-hafen .hafen-entdecken {
  padding: .8rem;
  border: 1px solid rgba(188, 220, 213, .32);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(5, 43, 56, .9), rgba(8, 62, 68, .84));
  box-shadow: 0 10px 24px rgba(2, 28, 39, .18);
  backdrop-filter: blur(9px);
}
.schirm-hafen .hafen-entdecken-kopf span { color: #d7eee5; }
.schirm-hafen .hafen-entdecken-kopf small { color: #b9d3ce; }
.schirm-hafen .hafen-orte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schirm-hafen .hafen-ort { min-height: 4.8rem; grid-template-columns: 2.2rem minmax(0, 1fr); border: 1px solid rgba(196, 224, 214, .35); background: rgba(250, 249, 237, .94); box-shadow: none; }
.schirm-hafen .hafen-ort i { width: 2rem; height: 2rem; font-size: 1rem; }
.schirm-hafen .hafen-nebenwege { width: 100%; justify-content: center; padding: .45rem; border: 0; border-radius: .9rem; background: rgba(4, 35, 47, .72); }

.schirm-hafen .hafen-kompass {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid rgba(128, 159, 143, .28);
  border-radius: .9rem;
  background: rgba(249, 250, 237, .96);
  box-shadow: 0 7px 18px rgba(3, 31, 43, .15);
}

/* Desktop: Begleiter | große Inselkarte | Abfahrt. */
@media (min-width: 1100px) {
  .schirm-hafen,
  .schirm-hafen[data-anfang="true"] {
    grid-template-columns: minmax(14rem, 16rem) minmax(34rem, 1fr) minmax(16rem, 19rem);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "kopf kopf kopf"
      "kompass kompass kompass"
      "wesen route aktion"
      "status route aktion"
      "entdecken entdecken entdecken"
      "wege wege wege";
  }
  .schirm-hafen .hafen-route { grid-area: route; }
  .schirm-hafen .hafen-wesen { grid-area: wesen; }
  .schirm-hafen .hafen-aktion { grid-area: aktion; }
  .schirm-hafen .hafen-entdecken { grid-area: entdecken; }
  .schirm-hafen .hafen-kompass { grid-area: kompass; }
  .schirm-hafen .hafen-kopf { grid-area: kopf; }
  .schirm-hafen .hafen-nebenwege { grid-area: wege; }
}

/* Tablet: erst die Karte, darunter zwei gleichwertige Nebenbereiche. */
@media (min-width: 720px) and (max-width: 1099px) {
  .schirm-hafen,
  .schirm-hafen[data-anfang="true"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "kopf kopf"
      "kompass kompass"
      "route route"
      "wesen aktion"
      "status status"
      "entdecken entdecken"
      "wege wege";
  }
  .schirm-hafen .hafen-route { grid-area: route; }
  .schirm-hafen .hafen-wesen { grid-area: wesen; }
  .schirm-hafen .hafen-aktion { grid-area: aktion; }
  .schirm-hafen .hafen-entdecken { grid-area: entdecken; }
  .schirm-hafen .hafen-kompass { grid-area: kompass; }
  .schirm-hafen .hafen-kopf { grid-area: kopf; }
  .schirm-hafen .hafen-nebenwege { grid-area: wege; }
}

/* Handy: eine klare Leserichtung ohne seitliche oder horizontale Fluchten. */
@media (max-width: 719px) {
  #buehne:has(.schirm-hafen:not([hidden])) { padding: 0; }
  .schirm-hafen,
  .schirm-hafen[data-anfang="true"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "kompass" "route" "aktion" "wesen" "status" "entdecken" "wege";
    min-height: 100svh;
    padding: .65rem;
    border: 0;
    border-radius: 0;
  }
  .schirm-hafen .hafen-kopf { grid-area: kopf; position: static; grid-template-columns: 1fr; }
  .schirm-hafen .hafen-werkzeuge { justify-content: flex-start; }
  .schirm-hafen .hafen-kompass { grid-area: kompass; grid-template-columns: 2.3rem minmax(0, 1fr); }
  .schirm-hafen .hafen-kompass-aktionen { grid-column: 1 / -1; justify-content: stretch; }
  .schirm-hafen .hafen-kompass-aktionen .knopf { flex: 1 1 8rem; }
  .schirm-hafen .hafen-route { grid-area: route; }
  .schirm-hafen .hafen-aktion { grid-area: aktion; }
  .schirm-hafen .hafen-wesen { grid-area: wesen; }
  .schirm-hafen .hafen-entdecken { grid-area: entdecken; }
  .schirm-hafen .hafen-nebenwege { grid-area: wege; }
  .schirm-hafen .faecher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .schirm-hafen .fachzeile { min-height: 6rem; padding: .48rem; }
  .schirm-hafen .fachname { font-size: .66rem; letter-spacing: .05em; }
  .schirm-hafen .hafen-orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .schirm-hafen .faecher { grid-template-columns: 1fr; }
  .schirm-hafen .fachzeile { min-height: 5.3rem; }
  .schirm-hafen .hafen-route-kopf { display: grid; gap: .2rem; }
  .schirm-hafen .hafen-route-kopf small { margin: 0; }
}

/* Finale Farbklammer für die Einführung: Nachtblau trägt die Seite, Messing
   markiert den Weg, Papier erscheint nur dort, wo wirklich gelesen wird. */
body:has(.schirm-einfuehrung:not([hidden])) { background: radial-gradient(circle at 50% 10%, #275665 0, #102f3d 46%, #092330 100%); }
.schirm-einfuehrung {
  background: linear-gradient(180deg, rgba(5, 31, 43, .66), rgba(7, 42, 51, .9)), url('../img/hafen/hafenwelt-v1.webp') center / cover !important;
  border-color: rgba(217, 177, 96, .56) !important;
  box-shadow: 0 18px 38px rgba(1, 17, 25, .36) !important;
}
.schirm-einfuehrung .schild { border-color: #d8ad62 !important; background: linear-gradient(145deg, #163f4d, #0a2b39) !important; box-shadow: 0 5px 0 #051b25, inset 0 1px rgba(255,255,255,.12) !important; }.schirm-einfuehrung .schild h1 { color: #f5dc9d !important; }.schirm-einfuehrung .schild-zeile { color: #d9b164 !important; }
.schirm-einfuehrung .einf-bild { border-color: #d8ad62 !important; background: radial-gradient(circle at 50% 31%, rgba(255, 220, 133, .48), transparent 20%), linear-gradient(180deg, rgba(8, 57, 74, .25), rgba(3, 29, 39, .24)), url('../img/hafen/funkenkai-v1.webp') center / cover !important; }
.schirm-einfuehrung .einf-satz { border-color: #e1c587 !important; border-left-color: #c68e48 !important; background: linear-gradient(135deg, #fff9e9, #f0dfb9) !important; color: #3d3429 !important; box-shadow: 0 6px 14px rgba(1, 18, 26, .2) !important; }
.schirm-einfuehrung .einf-zielwahl .knopf, .schirm-einfuehrung .einf-probe { border-color: #d6aa60 !important; background: linear-gradient(180deg, #fff4d5, #ead2a0) !important; color: #523b25 !important; box-shadow: 0 4px 0 #9b7040 !important; }
.schirm-einfuehrung .einf-hilfe { color: #f0d9a4 !important; text-shadow: 0 1px rgba(0,0,0,.4) !important; }
.schirm-einfuehrung .einf-steuerung { border-color: rgba(216, 173, 98, .58) !important; background: #123a47 !important; }.schirm-einfuehrung #einf-ueberspringen { border-color: #d8b46f !important; background: transparent !important; color: #f5dfaa !important; }.schirm-einfuehrung #einf-weiter { border-color: #e4c071 !important; background: linear-gradient(180deg, #dfb15f, #bd8038) !important; color: #122f38 !important; box-shadow: 0 4px 0 #704727 !important; }.schirm-einfuehrung .einf-weiter:disabled { border-color: #5d7780 !important; background: #36535c !important; color: #c6d2ce !important; box-shadow: 0 4px 0 #213940 !important; opacity: 1 !important; filter: none !important; }

/* Die Hilfen sprechen jetzt aus, was sie verändern. Die Schalter sind eine
   kleine, zusammengehörige Reiseleiste statt vier ähnlich aussehender Knöpfe. */
.lernmodus { flex-direction: column; gap: .35rem; padding: .55rem .65rem; border: 1px solid rgba(219, 191, 126, .45); border-radius: .85rem; background: rgba(255, 248, 226, .12); }
.lernmodus-label { color: #f7dfab; font-size: .67rem; text-transform: uppercase; }.lernmodus-werkzeuge { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; }
.lernmodus-hilfe { max-width: 42rem; margin: 0; color: #e7e7d3; font-size: .68rem; line-height: 1.35; text-align: center; }
.lernmodus-fokus, .lernmodus-dauer { min-height: 2.4rem; border-color: rgba(222, 197, 143, .62); background: rgba(255,255,255,.9); color: #284e57; box-shadow: 0 2px 0 rgba(29, 54, 53, .28); }.lernmodus-fokus.aktiv { border-color: #e1aa52; background: #fff0c7; color: #704719; }

/* Fachkarten: lange Fächer sind echte Namen, keine abgeschnittenen Etiketten.
   Der Umbruch liegt in der Karte statt über den Kartenrand zu ragen. */
.schirm-hafen .fachname { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.15; letter-spacing: .09em; }
.schirm-hafen .fachname-symbol { align-self: flex-start; margin-top: .05rem; }
@media (max-width: 640px) { .lernmodus-werkzeuge { width: 100%; }.lernmodus-fokus, .lernmodus-dauer { min-height: 2.55rem; padding-inline: .55rem; font-size: .72rem; }.lernmodus-hilfe { font-size: .66rem; } }

/* Die erste Reise ist die erste Hafenpostkarte: nicht mehr Werkstattpapier,
   sondern eine freundliche Ankunft am Meer mit Ohm als Reisegefährten. */
.schirm-einfuehrung {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: clamp(.7rem, 1.6vw, 1rem);
  padding: clamp(.8rem, 2vw, 1.35rem);
  border: 1px solid rgba(218, 184, 112, .58);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(8, 40, 58, .42), rgba(6, 43, 52, .79)), url('../img/hafen/hafenwelt-v1.webp') center / cover;
  box-shadow: 0 16px 35px rgba(3, 28, 38, .31);
}
.schirm-einfuehrung::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2, 21, 32, .28), transparent 34%, transparent 66%, rgba(2, 21, 32, .33)); pointer-events: none; }
.schirm-einfuehrung .schild { width: fit-content; max-width: 100%; margin: 0 auto; border: 2px solid rgba(231, 199, 125, .82); border-radius: .85rem; background: linear-gradient(145deg, rgba(17, 67, 80, .97), rgba(8, 38, 51, .97)); box-shadow: 0 5px 0 rgba(2, 19, 28, .65), inset 0 1px rgba(255,255,255,.13); }
.schirm-einfuehrung .schild h1 { color: #f8e5b8; text-shadow: none; }.schirm-einfuehrung .schild-zeile { color: #dfb86d; }
.schirm-einfuehrung .einf-bild { position: relative; width: min(100%, 43rem); min-height: clamp(13rem, 29vw, 18rem); margin: 0 auto; display: grid; place-items: end center; overflow: hidden; border: 2px solid rgba(228, 193, 111, .74); border-radius: 1.05rem; background: radial-gradient(circle at 50% 31%, rgba(255, 224, 145, .56), transparent 21%), linear-gradient(180deg, rgba(9, 65, 82, .25), rgba(5, 33, 45, .1)), url('../img/hafen/funkenkai-v1.webp') center / cover; box-shadow: inset 0 -2.4rem 2.3rem rgba(2, 24, 32, .23), 0 8px 17px rgba(1, 20, 28, .24); }
.schirm-einfuehrung .einf-bild::after { content: 'DEIN REISEGEFÄHRTE'; position: absolute; left: .7rem; top: .65rem; padding: .22rem .5rem; border: 1px solid rgba(249, 219, 151, .72); border-radius: 999px; background: rgba(4, 39, 51, .7); color: #f5d99a; font-family: var(--schrift-anzeige); font-size: .58rem; font-weight: 800; letter-spacing: .11em; }.schirm-einfuehrung .einf-bild .katze-bild { position: relative; z-index: 1; width: min(100%, 19rem); max-height: 16rem; filter: drop-shadow(0 10px 9px rgba(0, 14, 20, .36)); }
.schirm-einfuehrung .einf-satz { width: min(100%, 43rem); margin: 0 auto; border: 1px solid rgba(232, 207, 154, .78); border-left: 5px solid #c48d42; border-radius: .8rem; background: linear-gradient(135deg, rgba(255, 252, 239, .96), rgba(238, 224, 189, .94)); box-shadow: 0 6px 14px rgba(0, 16, 24, .18); color: #493d2d; }
.schirm-einfuehrung .einf-aktion, .schirm-einfuehrung .einf-hilfe { width: min(100%, 43rem); margin-inline: auto; }.schirm-einfuehrung .einf-zielwahl .knopf, .schirm-einfuehrung .einf-probe { border-color: rgba(225, 190, 111, .8); background: linear-gradient(145deg, rgba(255, 249, 228, .97), rgba(235, 216, 173, .96)); box-shadow: 0 4px 0 rgba(119, 81, 42, .25); }.schirm-einfuehrung .einf-hilfe { color: #f6e2b7; text-shadow: 0 1px rgba(0,0,0,.26); }
.schirm-einfuehrung .einf-steuerung { width: min(100%, 43rem); margin: 0 auto; padding: .6rem; border: 1px solid rgba(224, 194, 128, .52); border-radius: .9rem; background: rgba(5, 35, 47, .82); box-shadow: inset 0 1px rgba(255,255,255,.1); }.schirm-einfuehrung .einf-punkt { background: rgba(241, 218, 165, .42); }.schirm-einfuehrung .einf-punkt.hier { background: #e7b965; box-shadow: 0 0 0 3px rgba(231,185,101,.18); }.schirm-einfuehrung #einf-ueberspringen { border-color: rgba(228, 200, 139, .64); background: rgba(255,255,255,.09); color: #f5e8ca; box-shadow: none; }.schirm-einfuehrung #einf-weiter { border-color: #e8c47b; background: linear-gradient(180deg, #e7bb6d, #c78c42); box-shadow: 0 4px 0 #74522f; color: #17373f; text-shadow: none; }
.einf-reiseplan { display: flex; align-items: center; justify-content: center; gap: .45rem; width: min(100%, 43rem); padding: .7rem; border: 1px solid rgba(231, 198, 126, .48); border-radius: .9rem; background: rgba(4, 38, 50, .78); color: #f6e6bf; font-size: .82rem; font-weight: 700; text-align: center; }.einf-reiseplan span { display: grid; gap: .25rem; justify-items: center; min-width: 0; }.einf-reiseplan b { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid #e9c578; border-radius: 50%; color: #163944; background: #f2d18a; font-family: var(--schrift-anzeige); }.einf-reiseplan i { color: #e6bd6c; font-style: normal; font-size: 1.25rem; }.einf-hafenblick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: min(100%, 43rem); }.einf-hafen { min-height: 3.1rem; display: grid; align-content: center; padding: .45rem .65rem; border: 1px solid rgba(243, 222, 168, .58); border-left: 4px solid currentColor; border-radius: .75rem; background: rgba(5, 39, 51, .83); box-shadow: inset 0 1px rgba(255,255,255,.12); color: #e9d4a4; font-family: var(--schrift-anzeige); font-size: clamp(.68rem, 2.6vw, .85rem); letter-spacing: .06em; text-align: left; }.einf-hafen.physik { color: #f2cc72; }.einf-hafen.mathe { color: #9ed8ff; }.einf-hafen.deutsch { color: #f4a7b7; }.einf-hafen.englisch { color: #9cdfa8; }
@media (max-width: 520px) { .einf-reiseplan { gap: .2rem; font-size: .7rem; }.einf-reiseplan i { font-size: .95rem; }.einf-hafenblick { gap: .4rem; }.einf-hafen { min-height: 2.8rem; padding: .35rem .45rem; font-size: .64rem; } }
@media (max-width: 640px) { .schirm-einfuehrung { padding: .65rem; border-radius: 1rem; }.schirm-einfuehrung .einf-bild { min-height: 12rem; }.schirm-einfuehrung .einf-bild .katze-bild { max-height: 12rem; }.schirm-einfuehrung .einf-satz { font-size: 1rem; }.schirm-einfuehrung #einf-ueberspringen { font-size: .72rem; padding-inline: .45rem; } }

/* Desktop-Sicherung: Die Inselkarte und der Startbereich sind zwei eigene
   Zeilen. Das verhindert, dass ältere Hafen-Regeln den Startbereich wieder
   über die Karten schieben können. */
@media (min-width: 900px) {
  .schirm-hafen {
    grid-template-rows: auto auto auto auto auto auto !important;
    grid-template-areas:
      "kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf"
      "entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken"
      "wesen wesen wesen wesen wesen wesen status status status status status status"
      "route route route route route route route route route route route route"
      "aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion"
      "wege wege wege wege wege wege wege wege wege wege wege wege" !important;
    align-content: start !important;
  }
  .schirm-hafen .hafen-route { grid-area: route; align-self: stretch; }
  .schirm-hafen .hafen-aktion { grid-area: aktion; align-self: start; position: relative; inset: auto; transform: none; margin: 0; }
}

/* Anleitung und Wesen-Hütte gehören zur selben Hafenwelt. Der Lesebereich
   bleibt als ruhige Seekarte hell, die Kulisse gibt aber wieder ein Gefühl
   für Ort und Reise statt einer losgelösten Standardseite. */
.schirm-anleitung, .schirm-wesen-detail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(.85rem, 2vw, 1.35rem);
  border: 1px solid rgba(211, 176, 105, .52);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(6, 32, 44, .78), rgba(7, 45, 55, .89)), url('../img/hafen/funkenkai-v1.webp') center / cover;
  box-shadow: 0 15px 34px rgba(2, 24, 33, .32);
}
.schirm-anleitung::before, .schirm-wesen-detail::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2, 22, 31, .3), transparent 36%, transparent 66%, rgba(2, 22, 31, .35)); pointer-events: none; }
.schirm-anleitung[data-fach="mathematik"] { background-image: linear-gradient(180deg, rgba(8, 38, 62, .78), rgba(11, 48, 62, .88)), url('../img/hafen/zahlenbucht-v1.webp'); }
.schirm-anleitung[data-fach="deutsch"] { background-image: linear-gradient(180deg, rgba(55, 37, 35, .76), rgba(39, 48, 55, .89)), url('../img/hafen/buecherkai-v1.webp'); }
.schirm-anleitung[data-fach="englisch"] { background-image: linear-gradient(180deg, rgba(5, 38, 62, .76), rgba(6, 47, 67, .88)), url('../img/hafen/sprachkai-v1.webp'); }
.schirm-anleitung[data-fach="biologie"] { background-image: linear-gradient(180deg, rgba(10, 56, 40, .76), rgba(6, 47, 45, .89)), url('../img/hafen/forscherhafen-v1.webp'); }
.schirm-anleitung[data-fach="geschichte"] { background-image: linear-gradient(180deg, rgba(70, 43, 24, .76), rgba(50, 43, 32, .89)), url('../img/hafen/entdeckerhafen-v1.webp'); }
.schirm-anleitung[data-fach="erdkunde"] { background-image: linear-gradient(180deg, rgba(7, 48, 54, .76), rgba(6, 43, 52, .89)), url('../img/hafen/kartenbucht-v1.webp'); }
.schirm-anleitung .schild, .schirm-wesen-detail .schild { width: fit-content; max-width: 100%; margin: 0 auto; border: 2px solid rgba(224, 190, 115, .78); border-radius: .82rem; background: linear-gradient(145deg, rgba(20, 66, 78, .97), rgba(8, 37, 50, .97)); box-shadow: 0 5px 0 rgba(1, 17, 26, .65), inset 0 1px rgba(255,255,255,.13); }
.schirm-anleitung .schild h1, .schirm-wesen-detail .schild h1 { color: #f7e5bb; text-shadow: none; }.schirm-anleitung .schild-zeile, .schirm-wesen-detail .schild-zeile { color: #dfba71; }
/* Dieselbe Nachtkarte wie Themen-Panel und Hafen-Kompass -- die Anleitung
   war als einziger Schirm noch cremefarben und stach unpassend heraus. */
.schirm-anleitung .anl-karte { width: min(100%, 46rem); margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.5rem); border: 2px solid rgba(223, 191, 113, .82); border-radius: 1.05rem; background: linear-gradient(145deg, rgba(5, 59, 68, .98), rgba(4, 43, 55, .97)); box-shadow: 0 10px 22px rgba(0, 16, 24, .3), inset 0 1px rgba(255,255,255,.08); color: #e6f2ec; }
.schirm-anleitung .anl-titel { padding-bottom: .55rem; border-bottom: 2px solid rgba(210, 234, 222, .2); color: #f4f4dc; }.schirm-anleitung .anl-text { color: #cfe2db; line-height: 1.5; }
.schirm-anleitung .anl-bild-platz { padding: .6rem; border: 1px solid rgba(226, 195, 113, .5); border-radius: .85rem; background: rgba(247, 251, 250, .93); }.schirm-anleitung .anl-beispiel { border: 1px solid rgba(128, 205, 193, .5); border-left: 5px solid #e2c16f; border-radius: .78rem; background: rgba(7, 92, 96, .42); }.schirm-anleitung .anl-marke { color: #e9d39a; }.schirm-anleitung .anl-lage { color: #d7e8e2; }.schirm-anleitung .anl-schritte { color: #eaf4ef; }.schirm-anleitung .anl-schritte li::marker { color: #93cdc2; }.schirm-anleitung .anl-ergebnis b { color: #8fe3bd; }
.schirm-anleitung .anl-merksatz { position: relative; padding-left: 2.7rem; border: 1px dashed rgba(232, 203, 124, .7); background: rgba(231, 190, 91, .14); color: #f2e6cd; }.schirm-anleitung .anl-merksatz::before { content: '⚓'; position: absolute; left: .75rem; top: .48rem; color: #ffe8ac; font-size: 1.15rem; }
.schirm-anleitung .einf-steuerung { width: min(100%, 46rem); margin: 0 auto; padding: .6rem; border: 1px solid rgba(225, 197, 135, .55); border-radius: .9rem; background: rgba(6, 35, 47, .82); box-shadow: inset 0 1px rgba(255,255,255,.1); }.schirm-anleitung .einf-punkte { align-self: center; }.schirm-anleitung .einf-punkt { background: rgba(237, 216, 166, .45); }.schirm-anleitung .einf-punkt.hier { background: #e6bb69; box-shadow: 0 0 0 3px rgba(230,187,105,.18); }.schirm-anleitung #anl-weiter { background: linear-gradient(180deg, #e4ba6c, #c88d43); border-color: #ebca87; box-shadow: 0 4px 0 #72502d; color: #183740; text-shadow: none; }.schirm-anleitung #anl-schliessen, .schirm-anleitung #anl-zurueck { border-color: rgba(224, 196, 135, .64); background: rgba(255,255,255,.1); color: #f3e6c8; box-shadow: none; }

.schirm-wesen-detail { gap: 1rem; background-image: linear-gradient(180deg, rgba(5, 30, 47, .72), rgba(5, 43, 54, .9)), url('../img/hafen/funkenkai-v1.webp'); }.schirm-wesen-detail[data-fach="mathematik"] { background-image: linear-gradient(180deg, rgba(12, 40, 69, .74), rgba(10, 49, 62, .91)), url('../img/hafen/zahlenbucht-v1.webp'); }.schirm-wesen-detail .revier-boden { stroke: rgba(247, 222, 158, .3); }
@media (max-width: 680px) { .schirm-anleitung, .schirm-wesen-detail { padding: .65rem; border-radius: 1rem; }.schirm-anleitung .einf-steuerung { padding: .45rem; }.schirm-anleitung #anl-schliessen, .schirm-anleitung #anl-zurueck { font-size: .72rem; padding-inline: .45rem; } }

/* Erwachsene: eine überschaubare, freiwillige Kurssetzung statt weiterer Kennzahlen. */
.ew-zielwahl { display: grid; gap: .7rem; margin: 0 0 1.1rem; padding: .95rem; border: 2px solid #9bbeb5; border-radius: .9rem; background: linear-gradient(135deg, #edf8f3, #fff9ed); color: #264f51; }.ew-zielwahl-kopf span { color: #36867d; font: 900 .58rem/1 var(--schrift-anzeige); letter-spacing: .11em; }.ew-zielwahl h2 { margin: .18rem 0; font-size: 1rem; }.ew-zielwahl p { margin: 0; font-size: .78rem; line-height: 1.4; }.ew-zielwahl-liste { display: flex; flex-wrap: wrap; gap: .5rem; }.ew-ziel { display: grid; min-width: 10rem; flex: 1 1 11rem; gap: .12rem; padding: .65rem .7rem; border: 1px solid #a6cbc0; border-radius: .7rem; background: #fffdf7; color: #285a5a; text-align: left; cursor: pointer; }.ew-ziel:hover, .ew-ziel:focus-visible, .ew-ziel.aktiv { border-color: #197f78; box-shadow: 0 3px 0 rgba(25,127,120,.18); transform: translateY(-1px); }.ew-ziel.aktiv { background: #dff2e8; }.ew-ziel span { color: #3c8b7d; font: 900 .54rem/1 var(--schrift-anzeige); letter-spacing: .09em; }.ew-ziel b { font-size: .82rem; }.ew-ziel small { font-size: .69rem; line-height: 1.25; }.ew-ziel-frei { display: block; flex: 0 1 auto; min-width: auto; align-self: center; text-align: center; }.ew-zielwahl-status { min-height: 1.25em; color: #3e7068; font-weight: 700; }
@media (max-width: 600px) { .ew-zielwahl-liste { display: grid; }.ew-ziel { min-width: 0; } }

.schirm-schicht .rechenweg-ziel, .schirm-schicht .rechenweg-vorrat { display: grid; gap: .45rem; padding: .65rem; border-radius: .8rem; }.schirm-schicht .rechenweg-ziel { margin-top: .6rem; border: 1px dashed rgba(212,178,104,.78); background: rgba(255,247,219,.72); }.schirm-schicht .rechenweg-vorrat { margin-top: .55rem; background: rgba(9,77,86,.08); }.schirm-schicht .rechenweg-ziel > span, .schirm-schicht .rechenweg-vorrat > span { color: #926135; font: 900 .58rem/1 var(--schrift-anzeige); letter-spacing: .1em; }.schirm-schicht .rechenweg-ziel > div, .schirm-schicht .rechenweg-vorrat > div { display: grid; gap: .4rem; }.schirm-schicht .rechenweg-vorrat .frachtkarte { justify-content: flex-start; min-height: 2.7rem; text-align: left; }.schirm-schicht .rechenweg-schritt { border-color: #5c9d92; background: #e2f1e9; color: #174e50; text-align: left; }
.art-it .byte-panzer { fill: var(--wesen-fuellung); stroke: #123c52; stroke-width: 2.2; }
.art-it .byte-feld { fill: #082f45; stroke: #b9fff2; stroke-width: 1.6; }
.art-it .byte-code, .art-it .byte-schere, .art-it .byte-fuehler { fill: none; stroke: #abfff0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-it .byte-led { fill: #fff4a4; stroke: #176070; stroke-width: 1.2; filter: drop-shadow(0 0 .24rem #fff1a2); }
.hafen-wesen .katze.art-it::before { background: radial-gradient(circle at 50% 30%, rgba(119,255,236,.35), transparent 62%); }
.hafen-wesen .katze.art-it::after { content: "⌘  ◫"; color: #b7fff3; }

/* Der Hintergrund wächst mit: erst ein leiser Bauplatz, dann Licht,
   Verbindung und schließlich ein weithin sichtbares Wahrzeichen. */
.schirm-hafen::before { content: ""; position: absolute; z-index: 1; right: 4%; bottom: 7%; width: 7rem; height: 3.4rem; opacity: .22; pointer-events: none; transition: opacity .35s ease, transform .35s ease; background: linear-gradient(#6b4426 0 34%, #d5a658 35% 49%, #57412d 50%); clip-path: polygon(0 100%, 8% 57%, 23% 70%, 37% 27%, 50% 63%, 67% 15%, 78% 58%, 100% 42%, 100% 100%); }
.schirm-hafen[data-ausbau="1"]::before { opacity: .46; transform: scale(1.15); }.schirm-hafen[data-ausbau="2"]::before { opacity: .68; transform: scale(1.42); filter: drop-shadow(0 0 .65rem rgba(255,232,124,.7)); }.schirm-hafen[data-ausbau="3"]::before { opacity: .92; transform: scale(1.75); filter: drop-shadow(0 0 1rem rgba(255,234,120,.95)); }
@media (max-width: 640px) { .schirm-hafen::before { right: 2%; bottom: 3%; transform-origin: right bottom; } }
.hafen-grossauftrag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; margin-top: .65rem; padding: .7rem; border: 2px solid #4a7f73; border-radius: .85rem; background: linear-gradient(135deg, #eaf7df, #fff6cf); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 3px 0 rgba(43,99,83,.18); color: #234c43; }
.hafen-grossauftrag-kopf { display: grid; place-items: center; gap: .18rem; min-width: 3.05rem; }
.hafen-grossauftrag-kopf i { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border: 2px solid #dfb95c; border-radius: 50%; background: #286d80; box-shadow: 0 2px #1b4e5b; color: #fff4c7; font-style: normal; font-size: 1.2rem; }
.hafen-grossauftrag-kopf span { font-family: var(--schrift-anzeige); font-size: .48rem; font-weight: 900; letter-spacing: .07em; }
.hafen-grossauftrag b, .hafen-grossauftrag small { display: block; }.hafen-grossauftrag > div:last-child > b { font-size: .94rem; }.hafen-grossauftrag > div:last-child > small { margin-top: .15rem; font-size: .73rem; line-height: 1.3; }
.hafen-grossauftrag-spuren { display: flex; gap: .32rem; margin: .48rem 0 .3rem; }.hafen-grossauftrag-spuren i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 2px dashed #8db7a4; border-radius: 50%; color: #668d7e; font-style: normal; font-size: .68rem; font-weight: 900; }.hafen-grossauftrag-spuren i.aktiv { border-style: solid; border-color: #deae42; background: #fff3b1; color: #7c5521; }.hafen-grossauftrag-spuren i.fertig { border-style: solid; border-color: #4c9a5d; background: #d9f2bd; color: #276b41; }
.schirm-hafen .faecher { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; padding: .7rem; border: 2px solid rgba(120,83,42,.28); border-radius: 1rem; background: linear-gradient(145deg, rgba(255,250,224,.92), rgba(218,239,232,.84)); }
.inselkarte-insel { position: relative; min-height: 9.4rem; overflow: hidden; border-width: 2px; box-shadow: 0 4px 0 color-mix(in srgb, var(--fachfarbe) 25%, #8b6137), 0 9px 15px rgba(47,35,22,.1); }
.inselkarte-insel::before { content: ""; position: absolute; z-index: 0; right: -1rem; bottom: -1.2rem; width: 7rem; height: 4.5rem; border-radius: 55% 45% 50% 50%; background: color-mix(in srgb, var(--fachfarbe) 25%, #68a35a); box-shadow: inset 0 -1rem color-mix(in srgb, var(--fachfarbe) 45%, #326b49); opacity: .65; transform: rotate(-10deg); }
.inselkarte-insel > * { position: relative; z-index: 1; }
.inselkarte-insel .fachname { width: 100%; justify-content: flex-start; padding: .45rem .55rem; }
.inselkarte-insel .fachname small { margin-left: auto; color: inherit; font-family: var(--schrift-text); font-size: .66rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.inselkarte-insel .fach-aufklappen { align-self: flex-start; margin-top: auto; }
.inselkarte-insel.offen { grid-column: span 2; background: linear-gradient(145deg, color-mix(in srgb, var(--fachfarbe) 16%, #fffdf2), #fff); }
.inselkarte-insel[data-fach="physik"]::after, .inselkarte-insel[data-fach="mathematik"]::after, .inselkarte-insel[data-fach="biologie"]::after, .inselkarte-insel[data-fach="deutsch"]::after, .inselkarte-insel[data-fach="englisch"]::after, .inselkarte-insel[data-fach="geschichte"]::after, .inselkarte-insel[data-fach="erdkunde"]::after, .inselkarte-insel[data-fach="tastschreiben"]::after { position: absolute; right: .5rem; top: .45rem; z-index: 1; color: color-mix(in srgb, var(--fachfarbe) 76%, #345); font-size: 1.5rem; opacity: .78; }
.inselkarte-insel[data-fach="physik"]::after { content: "⚡"; }.inselkarte-insel[data-fach="mathematik"]::after { content: "◇"; }.inselkarte-insel[data-fach="biologie"]::after { content: "☘"; }.inselkarte-insel[data-fach="deutsch"]::after { content: "✎"; }.inselkarte-insel[data-fach="englisch"]::after { content: "⚑"; }.inselkarte-insel[data-fach="geschichte"]::after { content: "⚜"; }.inselkarte-insel[data-fach="erdkunde"]::after { content: "⌖"; }.inselkarte-insel[data-fach="tastschreiben"]::after { content: "⌨"; }
@media (max-width: 640px) { .schirm-hafen .faecher { grid-template-columns: 1fr; }.inselkarte-insel { min-height: 7.8rem; }.inselkarte-insel.offen { grid-column: auto; }.inselkarte-insel .fachname small { max-width: 9rem; text-align: right; } }

/* Ein geschlossenes Einstellungsmenü darf nie als durchscheinende Karte über
   der Karte liegen. Die allgemeine Grid-Regel hatte das native [hidden]
   überschrieben. */
.einstellungen-panel[hidden] { display: none; }

@media (max-width: 640px) {
  /* Erst der Ortsname, dann die Werkzeuge: so bleibt der Hafenname auch auf
     schmalen Handys ein prägnanter, ruhiger Anker statt einer Worttreppe. */
  .schirm-hafen .hafen-kopf { grid-template-columns: 1fr; gap: .42rem; }
  .schirm-hafen .hafen-logo { width: min(100%, 23rem); }
  .schirm-hafen .hafen-logo h1 { font-size: clamp(1.42rem, 8vw, 1.75rem); white-space: nowrap; }
  .schirm-hafen .hafen-werkzeuge { justify-content: flex-end; }
  .schirm-hafen .hafen-werkzeuge .knopf { min-height: 36px; padding-inline: .5rem; }
}

/* Die Überfahrt gehört sichtbar zum gerade besuchten Hafen. Die Farbe wird
   beim Laden einer Mission gesetzt und verbindet Route, Fracht und Logbuch,
   ohne den ruhigen Aufgabenbogen zu übermalen. */
.schirm-schicht .kopf {
  border-color: color-mix(in srgb, var(--missionsfarbe, var(--warn)) 58%, #6c482a);
  background:
    linear-gradient(110deg, rgba(255,255,255,.2), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--missionsfarbe, var(--warn)) 12%, #fffaf0), #ffe7bd);
}
.schirm-schicht .reise-route { color: color-mix(in srgb, var(--missionsfarbe, var(--warn)) 80%, #302015); }
.schirm-schicht .reise-bahn { border-color: color-mix(in srgb, var(--missionsfarbe, var(--warn)) 50%, #87603a); }
.schirm-schicht .reise-spur { background: linear-gradient(90deg, color-mix(in srgb, var(--missionsfarbe, var(--warn)) 60%, #fff5bd), var(--missionsfarbe, var(--warn))); }
.schirm-schicht .ausbeute { border-left-color: var(--missionsfarbe, var(--warn)); background: linear-gradient(100deg, color-mix(in srgb, var(--missionsfarbe, var(--warn)) 8%, #fff9eb), #fffdf6); }

/* Vier echte Anker in der Kulisse: Sie geben der Landschaft etwas zu tun,
   ohne eine weitere Aufgabenliste zu eröffnen. Auf Touch-Geräten bleiben die
   großen Ortskarten die eindeutigere und deshalb alleinige Bedienung. */
.schirm-hafen > .hafen-spuren { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hafen-spur {
  position: absolute;
  display: grid;
  grid-template-columns: 2rem auto;
  align-items: center;
  gap: .38rem;
  min-height: 2.55rem;
  padding: .28rem .58rem .28rem .3rem;
  border: 2px solid #f2c66e;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(81, 50, 26, .96), rgba(43, 30, 21, .96));
  box-shadow: 0 3px #24150d, 0 8px 15px rgba(7, 34, 45, .28);
  color: #fff0be;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--schrift-anzeige);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .16s ease, filter .16s ease;
}
.hafen-spur i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #2a8295; color: #fff5c7; font-style: normal; font-size: 1rem; }
.hafen-spur:hover, .hafen-spur:focus-visible { transform: translateY(-.18rem) scale(1.03); filter: brightness(1.08); }
.hafen-spur:focus-visible { outline: 3px solid #fff5b0; outline-offset: 3px; }
@media (max-width: 1100px) { .hafen-spuren { display: none; } }

/* Fundstücke sind kleine Erinnerungen, kein zweites Punktesystem. Drei
   Plätze genügen: sichtbar genug für Vorfreude, ohne als To-do-Liste zu
   wirken. */
.hafen-fundreihe { display: flex; align-items: center; gap: .38rem; min-height: 2.25rem; padding: .5rem .15rem .05rem; }
.hafen-fundreihe::before { content: "DEINE FUNDE"; margin-right: .16rem; color: #81562e; font-family: var(--schrift-anzeige); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }
.hafen-fundmarke { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 2px dashed #bd8a4d; border-radius: 50%; background: rgba(255,253,244,.6); color: #ae7a41; font-size: .85rem; }
.hafen-fundmarke.gefunden { border-style: solid; border-color: #c77d36; background: radial-gradient(circle at 35% 28%, #fff9c7, #f4d58a); box-shadow: 0 2px 0 #b06c2e, 0 3px 7px rgba(97,57,23,.18); color: #6c4323; transform: rotate(-5deg); }
.hafen-fundmarke.gefunden:nth-child(3) { transform: rotate(5deg); }.hafen-fundmarke.gefunden:nth-child(4) { transform: rotate(-2deg); }
#buehne #schirm-tor .hafen-grossauftrag { grid-template-columns: auto minmax(0, 1fr); margin-top: .5rem; padding: .55rem .65rem; }
#buehne #schirm-tor .hafen-grossauftrag-kopf { min-width: 2.5rem; }
#buehne #schirm-tor .hafen-grossauftrag-kopf i { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
#buehne #schirm-tor .hafen-grossauftrag > div:last-child > b { font-size: .86rem; }
#buehne #schirm-tor .hafen-grossauftrag > div:last-child > small { margin-top: .05rem; font-size: .67rem; }
#buehne #schirm-tor .hafen-grossauftrag-spuren { margin: .3rem 0 0; }

/* Erwachsenenansicht: Erst die verständliche Richtung, dann die Details.
   Zahlen bleiben verfügbar, bestimmen aber nicht den ersten Eindruck. */
.ew-lernueberblick { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-bottom: 1.1rem; padding: .9rem 1rem; border: 2px solid #b77a39; border-radius: .9rem; background: linear-gradient(135deg, #fff9e9, #f2dfb0); box-shadow: 0 4px 0 rgba(109,68,33,.12); color: #56371f; }
.ew-blick-zeichen { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #397a86; color: #fff1b8; font-size: 1.45rem; box-shadow: 0 3px #285863; }
.ew-lernueberblick span, .ew-lernueberblick b, .ew-lernueberblick small { display: block; }.ew-lernueberblick > div:nth-child(2) > span { color: #8b5a2f; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }.ew-lernueberblick > div:nth-child(2) > b { margin: .12rem 0; font-size: 1rem; }.ew-lernueberblick small { font-size: .78rem; line-height: 1.35; }
.ew-blick-zahl { min-width: 5.3rem; padding-left: .8rem; border-left: 1px solid rgba(118,73,34,.25); text-align: center; }.ew-blick-zahl b { font-family: var(--schrift-zahl); font-size: 1.45rem; }.ew-blick-zahl span { color: #805633; font-size: .62rem; font-weight: 750; }
@media (max-width: 560px) { .ew-lernueberblick { grid-template-columns: 2.8rem 1fr; padding: .7rem; }.ew-blick-zeichen { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }.ew-blick-zahl { grid-column: 1 / -1; padding: .45rem 0 0; border-top: 1px solid rgba(118,73,34,.25); border-left: 0; text-align: left; }.ew-blick-zahl b, .ew-blick-zahl span { display: inline; }.ew-blick-zahl span { margin-left: .35rem; } }

/* Eigenstaendige Fachwesen: klare Silhouetten, Material und kleine erzählerische Details */
.wesen-neu .wesen-buehne { transform-box: fill-box; transform-origin: center bottom; scale: var(--wuchs, 1); }
.wesen-neu .wesen-koerper { stroke-linejoin: round; stroke-linecap: round; }
.wesen-neu .kristall-flaeche { fill: var(--wesen-fuellung); stroke: #183e69; stroke-width: 2.2; }
.wesen-neu .kristall-hell { filter: brightness(1.18); }
.wesen-neu .kristall-dunkel { filter: brightness(.76); }
.wesen-neu .kristall-kante { fill: none; stroke: #baf2ff; stroke-width: 2; opacity: .85; }
.wesen-neu .wesen-glanz { fill: #fff; opacity: .6; }
.wesen-neu .pflanzen-stamm { fill: none; stroke: #255e3c; stroke-width: 8; }
.wesen-neu .blatt { fill: var(--wesen-fuellung); stroke: #255e3c; stroke-width: 2.2; }
.wesen-neu .blattader { fill: none; stroke: #b8e889; stroke-width: 1.8; opacity: .9; }
.wesen-neu .pflanzen-topf { fill: #b96843; stroke: #6d382b; stroke-width: 2; }
.wesen-neu .pflanzen-rand { fill: #df9262; stroke: #6d382b; stroke-width: 2; }
.wesen-neu .feder-flaeche { fill: var(--wesen-fuellung); stroke: #6a2861; stroke-width: 2.2; }
.wesen-neu .feder-kiel { fill: none; stroke: #fff5d1; stroke-width: 3; }
.wesen-neu .feder-strich { fill: none; stroke: #8a3e80; stroke-width: 2; }
.wesen-neu .feder-auge { fill: #fff8d4; stroke: #6a2861; stroke-width: 2; }
.wesen-neu .feder-laecheln { fill: none; stroke: #6a2861; stroke-width: 2; }
.wesen-neu .tinten-tropfen { fill: #3d468f; stroke: #252c64; stroke-width: 2; }
.wesen-neu .moewe-fluegel, .wesen-neu .moewe-brust, .wesen-neu .moewe-kopf { fill: var(--wesen-fuellung); stroke: #245776; stroke-width: 2.2; }
.wesen-neu .moewe-brust { filter: brightness(1.08); }
.wesen-neu .moewe-schnabel { fill: #f0ad3d; stroke: #8a4a20; stroke-width: 2; }
.wesen-neu .moewe-muetze { fill: #d24d54; stroke: #732d3d; stroke-width: 2; }
.wesen-neu .muetzenband { fill: none; stroke: #ffd66d; stroke-width: 3; }
.wesen-neu .moewe-feder { fill: #ffd66d; stroke: #8a4a20; stroke-width: 2; }
.wesen-neu .amphore { fill: var(--wesen-fuellung); stroke: #71351e; stroke-width: 2.4; }
.wesen-neu .amphore-hals { fill: #d99157; stroke: #71351e; stroke-width: 2; }
.wesen-neu .amphore-henkel { fill: none; stroke: #71351e; stroke-width: 6; }
.wesen-neu .amphore-muster { fill: none; stroke: #f4d28b; stroke-width: 2.5; }
.wesen-neu .berg { fill: var(--wesen-fuellung); stroke: #28556d; stroke-width: 2.4; }
.wesen-neu .berg-schnee { fill: #fff; stroke: #b5dce9; stroke-width: 1.6; }
.wesen-neu .berg-fels, .wesen-neu .hoehenlinie { fill: none; stroke: #28556d; stroke-width: 2; opacity: .8; }
.wesen-neu .wesen-auge { fill: #fff8d4; stroke: #172a39; stroke-width: 1.8; }
.wesen-neu .wesen-pupille { fill: #172a39; }
.wesen-neu .wesen-mund { fill: none; stroke: #172a39; stroke-width: 2; stroke-linecap: round; }
.wesen-neu .wesen-schatten { fill: #172a39; opacity: .18; }
.wesen-neu .wesen-zubehoer { fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .62; stroke-linecap: round; stroke-linejoin: round; }
.wesen-neu.katze-schlafend .wesen-auge, .wesen-neu.katze-schlafend .wesen-pupille { opacity: .22; }
/* Lebensstufen: jung = klein mit grossen Augen und Wangen, spaeter Dekor, Aura, Sterne */
.wesen-neu.wesen-jung .wesen-auge { transform-box: fill-box; transform-origin: center; scale: 1.55; }
.wesen-neu.wesen-jung .wesen-pupille, .wesen-neu.wesen-jung .pip-auge, .wesen-neu.wesen-jung .pip-pupille { transform-box: fill-box; transform-origin: center; scale: 1.4; }
.wesen-neu .wesen-wange { fill: #ff8fa3; opacity: .55; }
.wesen-neu .dekor { fill: var(--wesen-mittel); stroke: var(--wesen-dunkel); stroke-width: 1.8; opacity: .95; }
.wesen-neu .dekor-bluete circle { fill: #ffd1e4; stroke: #a8456f; stroke-width: 1.4; }
.wesen-neu .dekor-bluete .bluetenmitte { fill: #ffd66d; stroke: #8a4a20; }
.wesen-neu .dekor-frucht { fill: #e5584f; stroke: #7a2630; stroke-width: 1.6; }
.wesen-neu .dekor-knospe { fill: #ffb7d2; stroke: #a8456f; stroke-width: 1.6; }
.wesen-neu .dekor-ast, .wesen-neu .dekor-wimpel, .wesen-neu .dekor-welle, .wesen-neu .dekor-lorbeer, .wesen-neu .dekor-signal, .wesen-neu .dekor-platine, .wesen-neu .dekor-ring, .wesen-neu .dekor-fahne, .wesen-neu .dekor-mustergurt { fill: none; }
.wesen-neu .dekor-wimpel { fill: #ffd66d; stroke: #8a4a20; }
.wesen-neu .dekor-fahne { fill: #e5584f; stroke: #7a2630; }
.wesen-neu .dekor-lorbeer { stroke: #4f8a3c; stroke-width: 3; }
.wesen-neu .dekor-mustergurt { stroke: #f4d28b; stroke-width: 2.5; }
.wesen-neu .dekor-krone { fill: #ffd66d; stroke: #8a4a20; }
.wesen-neu .dekor-welle { stroke: #8fd4e8; stroke-width: 2.4; }
.wesen-neu .dekor-hintergrund { fill: none; stroke: #7fb2c7; stroke-width: 3; opacity: .55; }
.wesen-neu .dekor-baum { fill: #4f8a3c; stroke: #2c5a2a; }
.wesen-neu .dekor-wolke { fill: #fff; stroke: #b5dce9; stroke-width: 1.4; opacity: .9; }
.wesen-neu .dekor-saeule { fill: #f1c581; stroke: #71351e; }
.wesen-neu .dekor-scherbe { fill: #d99157; stroke: #71351e; }
.wesen-neu .dekor-tinte { fill: #3d468f; stroke: #252c64; }
.wesen-neu .dekor-blatt { fill: #fff8d4; stroke: #6a2861; }
.wesen-neu .dekor-feder { fill: #f0a6d4; stroke: #6a2861; }
.wesen-neu .dekor-kristall { fill: #9fe3f7; stroke: #183e69; }
.wesen-neu .dekor-signal, .wesen-neu .dekor-platine, .wesen-neu .dekor-ring { stroke: #5fe3d0; stroke-width: 2.2; }
.wesen-neu .dekor-led { fill: #ffe46b; stroke: #8a6a1a; stroke-width: 1.2; }
.wesen-neu .dekor-funke, .wesen-neu .wesen-sterne path { fill: #fff3a6; stroke: #c69a2b; stroke-width: 1; }
.wesen-neu .dekor-knopf { fill: #ffd66d; stroke: #8a4a20; stroke-width: 1; }
.wesen-neu .keim-ei { fill: var(--wesen-fuellung); stroke: var(--wesen-dunkel); stroke-width: 2.4; }
.wesen-neu .keim-glanz { fill: none; stroke: #fff; stroke-width: 3; opacity: .7; }
.wesen-neu .keim-zeichen { fill: #fff8; stroke: var(--wesen-dunkel); stroke-width: 2; }
.wesen-neu .keim-riss { fill: none; stroke: var(--wesen-dunkel); stroke-width: 1.8; opacity: .55; }
.wesen-neu .dekor-schale { fill: var(--wesen-hell); stroke: var(--wesen-dunkel); stroke-width: 1.8; }
body:not(.ruhemodus) .wesen-neu.lebensstufe-0 .wesen-buehne { animation: keim-wackelt 3.2s ease-in-out infinite; transform-origin: center bottom; }
@keyframes keim-wackelt { 0%, 80%, 100% { rotate: 0deg; } 86% { rotate: -4deg; } 92% { rotate: 4deg; } }
.wesen-neu .wesen-aura { fill: var(--wesen-hell); opacity: .28; }
.wesen-neu .wesen-aura.aura-2 { opacity: .36; }
.wesen-neu .wesen-aura.aura-3 { opacity: .45; }
body:not(.ruhemodus) .wesen-neu .wesen-aura { animation: wesen-aura 4.5s ease-in-out infinite; }
body:not(.ruhemodus) .wesen-neu .wesen-sterne { animation: wesen-aura 3s ease-in-out infinite; }
@keyframes wesen-aura { 50% { opacity: .5; } }
.wesen-neu .wesen-frage { fill: #fff5b2; stroke: #714a21; stroke-width: 1; font: 900 24px var(--schrift-anzeige, sans-serif); }

/* Der Rucksack braucht im Hafen eine sichtbare Anschlussaktion. Die
   Werkbank wird deshalb als kleine Bau-Station eingeblendet statt als
   versteckte Erwachsenenfunktion. */
.schirm-hafen .werkbank {
  display: grid;
  gap: .38rem;
  padding: .55rem;
  border: 3px solid #b98043;
  border-radius: .9rem;
  background: linear-gradient(145deg, rgba(74,45,25,.96), rgba(53,32,20,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px #382313;
}
.schirm-hafen .werkbank-marke {
  color: #ffe19a;
  font-family: var(--schrift-anzeige);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.schirm-hafen .vorhaben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem .5rem;
  align-items: center;
  padding: .38rem .48rem;
  border: 2px solid #d2a05a;
  border-left: 5px solid var(--warn);
  border-radius: .65rem;
  background: #fff1c9;
  box-shadow: 0 3px #8b572c;
}
.schirm-hafen .vorhaben-name { color: #4b2c18; font-size: .78rem; font-weight: 800; }
.schirm-hafen .vorhaben-kosten { grid-column: 1; gap: .25rem; }
.schirm-hafen .kosten-posten { color: #704522; font-size: .68rem; }
.schirm-hafen .kosten-posten .posten-symbol { width: .85rem; height: .85rem; }
.schirm-hafen .knopf-bauen { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; padding: .28rem .55rem; font-size: .62rem; }
.schirm-hafen .vorhaben:not(.machbar) .knopf-bauen { background: #d8c19a; color: #795c3c; border-color: #b99a6e; }
.schirm-hafen .werkbank:empty { display: none; }
@keyframes wesen-objekt-benutzt { 50% { transform: translateY(-3px) scale(1.06); filter: brightness(1.22); } }

/* Fachwelten fuer die Wesen: keine identische Karte mit anderem Namen,
   sondern je Insel ein eigenes Material, Muster und Licht. Die SVG-Figur
   bleibt der Mittelpunkt; das Motiv liegt bewusst dahinter und ist auf
   kleinen Flaechen weniger kontrastreich. */
.hafen-wesen .katze {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
  padding: .2rem .35rem;
}
.hafen-wesen .katze::before,
.hafen-wesen .katze::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
}
.hafen-wesen .katze::before { content: ""; inset: 0; }
.hafen-wesen .katze::after { right: .55rem; top: .35rem; color: #fff; font-size: 1.4rem; }
.hafen-wesen .katze-bild { position: relative; z-index: 1; }
.hafen-wesen .katze.art-physik::before {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(106,210,234,.24) 18% 19%, transparent 19% 100%),
    linear-gradient(0deg, transparent 0 32%, rgba(106,210,234,.22) 32% 33%, transparent 33% 100%),
    radial-gradient(circle at 76% 30%, rgba(102,220,244,.55) 0 .17rem, transparent .2rem),
    #163e56;
}
.hafen-wesen .katze.art-physik::after { content: "⌁  ⚡"; color: #a9ebf2; }
.hafen-wesen .katze.art-mathematik::before {
  background:
    linear-gradient(30deg, transparent 45%, rgba(143,226,255,.32) 46% 48%, transparent 49%),
    linear-gradient(150deg, transparent 45%, rgba(143,226,255,.28) 46% 48%, transparent 49%),
    radial-gradient(circle at 50% 50%, rgba(143,226,255,.3) 0 .18rem, transparent .2rem),
    #243d72;
  background-size: 3.2rem 3.2rem;
}
.hafen-wesen .katze.art-mathematik::after { content: "◇  △"; color: #c8eaff; }
.hafen-wesen .katze.art-biologie::before {
  background:
    radial-gradient(ellipse at 24% 28%, rgba(190,240,146,.5) 0 1rem, transparent 1.1rem),
    radial-gradient(ellipse at 77% 64%, rgba(190,240,146,.4) 0 .75rem, transparent .85rem),
    repeating-linear-gradient(65deg, transparent 0 1.25rem, rgba(142,222,124,.25) 1.28rem 1.34rem),
    #1d5a4e;
}
.hafen-wesen .katze.art-biologie::after { content: "☘  ✿"; color: #c9f3a7; }
.hafen-wesen .katze.art-deutsch::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 1.05rem, rgba(255,183,218,.3) 1.08rem 1.12rem),
    linear-gradient(90deg, rgba(239,102,169,.2) 0 1.1rem, transparent 1.1rem),
    #63375b;
}
.hafen-wesen .katze.art-deutsch::after { content: "✎  ❖"; color: #ffd0e6; }
.hafen-wesen .katze.art-englisch::before {
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 1.1rem, rgba(179,232,255,.25) 1.15rem 1.22rem, transparent 1.28rem 2.1rem),
    linear-gradient(155deg, #1f6685, #244568);
}
.hafen-wesen .katze.art-englisch::after { content: "⚑  ✦"; color: #c4efff; }
.hafen-wesen .katze.art-geschichte::before {
  background:
    repeating-linear-gradient(135deg, transparent 0 1rem, rgba(255,214,142,.22) 1.02rem 1.08rem),
    radial-gradient(circle at 68% 28%, rgba(255,210,123,.3) 0 .7rem, transparent .75rem),
    #6d462b;
}
.hafen-wesen .katze.art-geschichte::after { content: "⚜  ◈"; color: #ffe0a4; }
.hafen-wesen .katze.art-erdkunde::before {
  background:
    repeating-radial-gradient(ellipse at 45% 65%, transparent 0 1.05rem, rgba(152,226,235,.25) 1.08rem 1.14rem, transparent 1.18rem 2rem),
    linear-gradient(145deg, #164e67, #276f75);
}
.hafen-wesen .katze.art-erdkunde::after { content: "⌖  ⛰"; color: #b9edf0; }
.hafen-wesen .katze.art-physik .katze-bild,
.hafen-wesen .katze.art-mathematik .katze-bild,
.hafen-wesen .katze.art-biologie .katze-bild,
.hafen-wesen .katze.art-deutsch .katze-bild,
.hafen-wesen .katze.art-englisch .katze-bild,
.hafen-wesen .katze.art-geschichte .katze-bild,
.hafen-wesen .katze.art-erdkunde .katze-bild { filter: drop-shadow(0 5px 2px rgba(0,0,0,.28)); }

/* Der Boss bleibt eine optionale Sonderroute und konkurriert nicht mit dem
   grossen Einstieg in die normale Ueberfahrt. */
.schirm-hafen .knopf-boss {
  min-height: 3.25rem;
  padding: .55rem .8rem;
  border-width: 2px;
  border-color: #9d6fca;
  background: linear-gradient(180deg, #b89ad8, #8061a9);
  box-shadow: 0 3px #584078;
  opacity: .9;
}
.schirm-hafen .knopf-boss .knopf-haupt { font-size: .92rem; }
.schirm-hafen .knopf-boss .knopf-neben { font-size: .66rem; }

@media (max-width: 760px) {
  .schirm-hafen .werkbank { padding: .45rem; }
  .schirm-hafen .vorhaben-name { font-size: .75rem; }
}

/* --- Gemeinsame Spieloberfläche ----------------------------------------- */

/* Die hellen Ansichten bekommen einen gemeinsamen Rahmen und eine leichte
   Papierstruktur. So fühlt sich ein Wechsel der Ansicht wie ein Ortswechsel
   im selben Spiel an, nicht wie ein Sprung in ein anderes Formular. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(rgba(122, 74, 32, .18) .6px, transparent .7px);
  background-size: 12px 12px;
}

.schirm:not(.schirm-hafen) > .schild {
  position: relative;
  overflow: hidden;
  border-width: 3px;
  background: linear-gradient(135deg, #fffdf7, #fff1d2);
}
.schirm:not(.schirm-hafen) > .schild::after {
  content: "✦";
  position: absolute;
  right: .7rem;
  bottom: -.4rem;
  color: rgba(232, 89, 12, .13);
  font-size: 4.3rem;
  line-height: 1;
}
.schirm:not(.schirm-hafen) > .schild h1 { position: relative; z-index: 1; }

/* Alle unmittelbar antippbaren Spielaktionen teilen sich eine spürbare,
   aber nicht hektische Tiefe. Die Mindesthöhe ist auf Kinderfinger statt
   auf Mauszeiger ausgelegt. */
.knopf, .fach, .fachname, .taste, .login-kachel, .sandbox-taste, .sandbox-wert-taste {
  touch-action: manipulation;
}
.knopf-gross { min-height: 62px; }

/* --- Ankommen: Familien- und Profilwahl -------------------------------- */

.schirm-login, .schirm-familie {
  position: relative;
  padding: clamp(.8rem, 3vw, 1.4rem);
  border: 2px solid rgba(240, 168, 96, .55);
  border-radius: 1.5rem;
  background: rgba(255, 250, 240, .78);
  box-shadow: 0 12px 30px rgba(122, 74, 32, .13);
}
.schirm-login::before, .schirm-familie::before {
  content: "⚓  ✦  ⚓";
  align-self: center;
  color: var(--warn);
  font-size: 1.15rem;
  letter-spacing: .8rem;
  text-indent: .8rem;
  opacity: .75;
}
.schirm-login .schild, .schirm-familie .schild { box-shadow: 0 5px 0 rgba(232, 89, 12, .18), 0 10px 20px rgba(122, 74, 32, .1); }
.login-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.login-kachel {
  min-height: 5.4rem;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(145deg, #fff, #fff0d8);
  box-shadow: 0 4px 0 var(--stahl-400), 0 9px 15px rgba(122, 74, 32, .1);
}
.login-feld input {
  border-radius: var(--rundung-klein);
  box-shadow: inset 0 2px 0 rgba(122, 74, 32, .06);
}
.login-tasten { max-width: 300px; }
.login-tasten .taste { min-height: 62px; background: linear-gradient(180deg, #fff, #ffe6bd); }

/* --- Einführung, Rückkehr, Album und Dex ------------------------------- */

.schirm-einfuehrung, #schirm-ende, .schirm-sammlung, .schirm-dex {
  position: relative;
  padding: clamp(.4rem, 2vw, 1rem);
  border-radius: 1.5rem;
  background: linear-gradient(165deg, rgba(255,255,255,.72), rgba(255,236,199,.68));
  box-shadow: 0 12px 30px rgba(122, 74, 32, .11);
}
.einf-bild {
  border: 3px solid #f0b46d;
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 18% 15%, #fff 0 1.5%, transparent 1.7%),
    radial-gradient(circle at 77% 22%, #fff 0 1%, transparent 1.2%),
    linear-gradient(180deg, #cceeff 0 52%, #86cf8a 52% 100%);
  box-shadow: 0 5px 0 rgba(232, 89, 12, .18);
}
.einf-satz {
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--rundung-klein) var(--rundung-klein) 0;
  background: rgba(255,255,255,.76);
  padding: .75rem .9rem;
  box-shadow: 0 3px 10px rgba(122, 74, 32, .07);
}
.einf-punkt { width: .7rem; height: .7rem; box-shadow: inset 0 -1px rgba(0,0,0,.15); }
.einf-punkt.hier { box-shadow: 0 0 0 3px #ffe0b1, inset 0 -1px rgba(0,0,0,.15); }

#schirm-ende .feierabend-kopf {
  border: 3px solid #d9b260;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #fff4c8, #f6d77f);
  box-shadow: 0 5px 0 rgba(170, 111, 37, .2);
  padding: .55rem;
}
#schirm-ende .katzenplatz { border: 0; background: transparent; }
#schirm-ende .bilanz { color: #704016; }
#schirm-ende .bilanz b { color: #b66a16; }
.sammlung-liste, .dex-liste { gap: .9rem; }
.sammlung-karte, .dex-wesen {
  border: 2px solid color-mix(in srgb, var(--fachfarbe) 40%, #fff);
  border-left: 6px solid var(--fachfarbe);
  border-radius: var(--rundung);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--fachfarbe) 15%, transparent), 0 8px 14px rgba(122, 74, 32, .07);
}
.schirm-dex { background: linear-gradient(160deg, #fffaf0 0%, #f3e3c2 100%); }
.schirm-dex .schild { margin-bottom: .6rem; }
.schirm-dex .schild::after { content: 'Deine Reisegefährten – jeder mit eigener Kraft'; display: block; margin-top: .2rem; color: #8b5a35; font-size: .85rem; letter-spacing: .04em; }

/* Das Album ist ein eigenes Deck am Hafen: die Illustration bleibt Kulisse,
   die Karten sind darauf wie wassergeschuetzte Logbuchseiten lesbar. */
.schirm-dex {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(5, 30, 46, .76), rgba(8, 48, 61, .84)), url('../img/wesen/wesen-album-hafen-v1.png') center / cover;
  box-shadow: 0 18px 42px rgba(3, 23, 34, .35);
}
.schirm-dex::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3, 20, 31, .36), transparent 32%, transparent 68%, rgba(3, 20, 31, .4)); pointer-events: none; }
.schirm-dex .schild { width: fit-content; margin: .2rem auto .75rem; border: 2px solid rgba(255, 225, 157, .72); border-radius: .8rem; background: linear-gradient(145deg, rgba(17, 67, 80, .96), rgba(7, 38, 54, .96)); box-shadow: 0 5px 0 rgba(2, 20, 30, .6), inset 0 1px rgba(255,255,255,.16); color: #fff0c5; }
.schirm-dex .schild h1 { color: #fff2c8; text-shadow: 0 2px #0b3443; }
.schirm-dex .schild::after { color: #d4edf0; }
@media (max-width: 560px) {.schirm-dex .schild::after { display: none; } }

/* Album-Farbklima: ein reduzierter Nacht-Hafen statt vieler konkurrierender
   Akzentfarben. Messing markiert nur wichtige Wege, Petrol traegt die Tiefe. */
body:has(.schirm-dex:not([hidden])) {
  background: radial-gradient(circle at 50% 14%, #244c59 0, #102c39 38%, #091d29 100%);
}
#buehne:has(.schirm-dex:not([hidden])) { max-width: 54rem; }
.schirm-dex {
  gap: clamp(.7rem, 1.6vw, 1rem);
  padding: clamp(.7rem, 2vw, 1.25rem);
  background: linear-gradient(180deg, rgba(5, 25, 36, .68), rgba(8, 36, 46, .82)), url('../img/wesen/wesen-album-hafen-v1.png') center / cover;
}
.schirm-dex .schild { border-color: rgba(215, 177, 105, .72); background: linear-gradient(150deg, rgba(19, 56, 69, .98), rgba(9, 34, 47, .98)); box-shadow: 0 4px 0 rgba(2, 17, 25, .62), inset 0 1px rgba(255,255,255,.1); }
.schirm-dex .schild-zeile { color: #e6be75; }.schirm-dex .schild h1 { color: #f7e3b8; text-shadow: none; }.schirm-dex .schild::after { color: #b8d4d8; }

/* --- Die Lernreise: Auftrag, Antworten und Werkzeuge -------------------- */

.schirm-schicht {
  position: relative;
  padding: clamp(.4rem, 2vw, 1rem);
  border: 2px solid rgba(240, 168, 96, .42);
  border-radius: 1.5rem;
  background: rgba(255, 252, 245, .75);
  box-shadow: 0 12px 30px rgba(122, 74, 32, .1);
}
.schirm-schicht .kopf {
  border: 3px solid #d6934f;
  border-radius: 1rem;
  background: linear-gradient(135deg, #fffdf8, #ffe7bd);
  box-shadow: 0 4px 0 rgba(190, 113, 42, .2);
}
.schirm-schicht .ausbeute {
  border: 2px solid #e5bc83;
  border-left: 6px solid var(--warn);
  border-radius: 1rem;
  box-shadow: 0 3px 0 rgba(122, 74, 32, .08);
}
.auftrag {
  position: relative;
  overflow: hidden;
  border: 3px solid #e2b26d;
  border-top: 8px solid var(--warn);
  border-radius: 1.2rem;
  background:
    radial-gradient(rgba(154, 103, 49, .1) .6px, transparent .7px),
    linear-gradient(135deg, #fffef9, #fff4df);
  background-size: 12px 12px, auto;
  box-shadow: 0 7px 0 rgba(190, 113, 42, .18), 0 12px 22px rgba(122, 74, 32, .1);
  padding: clamp(1rem, 3vw, 1.45rem);
}
.auftrag::after {
  content: "✦";
  position: absolute;
  top: .5rem;
  right: .7rem;
  color: rgba(232, 89, 12, .12);
  font-size: 3.2rem;
  pointer-events: none;
}
.auftrag-kopf, .auftrag-text, .eingabe, .tippfeld, .konstruktionsfeld, .rueckmeldung, .hinweisleiste { position: relative; z-index: 1; }
.stempel { border: 2px solid var(--stahl-400); border-radius: 999px; background: #fff; box-shadow: 0 2px 0 rgba(240, 168, 96, .38); }
.auftrag-text { font-size: clamp(1.2rem, 3.5vw, 1.55rem); font-weight: 650; line-height: 1.4; }
.eingabe-feld { min-height: 58px; font-size: 1.55rem; box-shadow: inset 0 2px 0 rgba(122, 74, 32, .08); }
.knopf-annehmen { border-radius: var(--rundung-klein); background: linear-gradient(180deg, #ffb967, var(--warn)); color: #fff; border-color: #b84a10; box-shadow: 0 4px 0 #b23c05; font-weight: 700; }
.auswahl { gap: .65rem; }
.auswahl .knopf { min-height: 58px; border-width: 3px; border-radius: 1rem; box-shadow: 0 3px 0 rgba(240,168,96,.3); padding: .8rem 1rem; }
.auswahl .knopf:hover { transform: translateY(-1px); }
.auftrag-diagramm, .anl-bild, .konstr-bild, .schraeg-bild, .versch-bild {
  border-width: 3px;
  border-radius: 1rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.65), 0 4px 0 rgba(122, 74, 32, .1);
}
.hinweisleiste { border-top: 2px dashed #e5bc83; padding-top: 1rem; }
.ohm-zeile { border-radius: 1rem; background: #fff7e8; padding: .4rem .55rem; }
.tippzeile { border: 3px solid #e2b26d; border-radius: 1rem; box-shadow: inset 0 2px 0 rgba(122, 74, 32, .07); }
.tastenfeld { gap: .55rem; }
.taste { min-height: 62px; border-width: 3px; box-shadow: 0 4px 0 rgba(240,168,96,.44); }

/* --- Freies Entdecken und Erwachsenenbereich ---------------------------- */

.schirm-sandbox { padding: clamp(.4rem, 2vw, 1rem); border-radius: 1.5rem; background: rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(122, 74, 32, .1); }
.sandbox-wrapper { border: 3px solid #64bdb3; border-radius: 1.2rem; background: linear-gradient(180deg, #f4fffd, #ddf7f2); padding: clamp(.65rem, 2vw, 1rem); box-shadow: 0 5px 0 rgba(15, 155, 142, .16); }
.sandbox-svg { border-width: 3px; background: linear-gradient(135deg, #f8ffff, #e3f8f5); box-shadow: inset 0 0 0 2px #fff; }
.sandbox-palette { gap: .6rem; }
.sandbox-taste { min-height: 48px; border-width: 2px; border-radius: .85rem; box-shadow: 0 3px 0 rgba(15, 155, 142, .18); }

.schirm-erwachsene { max-width: 60rem; margin: 0 auto; padding: clamp(.4rem, 2vw, 1rem); border: 1px solid var(--stahl-300); border-radius: 1rem; background: rgba(255,255,255,.76); box-shadow: 0 10px 24px rgba(122, 74, 32, .08); }
.ew-kopf { border-bottom-width: 2px; }
.ew-reiter-knopf { border-radius: .65rem; }
.ew-karte, .ew-schein, .ew-vokabel-zeile, .adm-modul-zeile, .adm-aufgabe-zeile { border-radius: .75rem; box-shadow: 0 2px 0 rgba(122, 74, 32, .06); }

/* --- Kleine Displays: Inhalt nie unter den Daumen verstecken ------------ */
@media (max-width: 640px) {
  html, body { font-size: 16px; }
  #buehne { padding: .7rem .65rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .schirm { gap: 1rem; }
  .schirm-login, .schirm-familie, .schirm-einfuehrung, #schirm-ende, .schirm-sammlung, .schirm-dex, .schirm-schicht, .schirm-sandbox { border-radius: 1.05rem; }
  .schirm-login::before, .schirm-familie::before { font-size: .9rem; }
  .schild h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .auftrag { border-top-width: 6px; padding: .9rem; }
  .auftrag-text { font-size: 1.18rem; }
  .eingabe-zeile { display: grid; grid-template-columns: 1fr auto; }
  .eingabe-feld { grid-column: 1 / -1; width: 100%; }
  .knopf-annehmen { min-height: 54px; }
  .auswahl .knopf { min-height: 56px; }
  .schicht-verlassen { margin-top: 0; }
  .schicht-verlassen .knopf-flach { min-height: 38px; }
  .sammlung-karte, .dex-wesen { padding: .65rem; }
  .ew-tabelle { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (min-width: 900px) {
  #buehne { max-width: 52rem; }
  #buehne:has(.schirm-hafen:not([hidden])) { max-width: 78rem; }
  .schirm-schicht { max-width: 52rem; margin-inline: auto; }
  .schirm-sandbox { max-width: 48rem; }
}

/* --- Missionsbühne: der eigentliche Kind-Bildschirm --------------------- */

/* Der Hafen darf groß und offen sein. Während der Lernzeit wird daraus eine
   kurze, eindeutig lesbare Mission: Fachfarbe, Gefährte und genau eine
   nächste Handlung. Das verhindert die "Arbeitsblatt in hübsch"-Wirkung,
   ohne den Bildschirm mit Statuswerten zu überladen. */
.auftrag {
  --missionsfarbe: var(--warn);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(.7rem, 2vw, 1.1rem);
  row-gap: .85rem;
  border-color: color-mix(in srgb, var(--missionsfarbe) 48%, #f0b56c);
  border-top-color: var(--missionsfarbe);
  background:
    radial-gradient(circle at 88% 9%, color-mix(in srgb, var(--missionsfarbe) 16%, transparent) 0 3.2rem, transparent 3.3rem),
    radial-gradient(rgba(154, 103, 49, .08) .6px, transparent .7px),
    linear-gradient(145deg, #fffefb, #fff3da);
  background-size: auto, 12px 12px, auto;
}
.auftrag::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  opacity: .14;
  background: var(--missionsfarbe);
  clip-path: polygon(0 72%, 13% 47%, 27% 70%, 42% 33%, 58% 65%, 71% 39%, 86% 62%, 100% 36%, 100% 100%, 0 100%);
  pointer-events: none;
}
.auftrag::after { color: color-mix(in srgb, var(--missionsfarbe) 20%, transparent); }
.auftrag > * { min-width: 0; }
.auftrag > .eilband { grid-column: 1 / -1; }
.auftrag-kopf { grid-column: 1 / -1; align-items: center; }
.auftrag-kopf::before {
  content: "MISSION";
  display: inline-flex;
  align-items: center;
  height: 1.8rem;
  padding: 0 .55rem;
  border-radius: .55rem;
  background: var(--missionsfarbe);
  color: #fff;
  font-family: var(--schrift-anzeige);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--missionsfarbe) 55%, #442414);
}
.auftrag .stempel:first-of-type { border-color: var(--missionsfarbe); color: var(--missionsfarbe); }
.auftrag .auftrag-text {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  padding: .3rem 0 .45rem;
  font-size: clamp(1.28rem, 3.6vw, 1.65rem);
  letter-spacing: -.012em;
}
.auftrag-diagramm, .zwischenschritte, .schrittkopf, .schritt-frage,
.eingabe, .tippfeld, .konstruktionsfeld, .rueckmeldung {
  grid-column: 1 / -1;
}

/* Das Wesen steht neben dem Auftrag, nicht nur als nachträglicher Tipp am
   unteren Rand. Sein Button bleibt die einzige Hilfsaktion und wird bei
   Bedarf ausgeblendet wie bisher. */
.auftrag .hinweisleiste {
  grid-column: 1 / -1;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 2px solid color-mix(in srgb, var(--missionsfarbe) 38%, #f3cb91);
  border-top: 5px solid var(--missionsfarbe);
  border-radius: 1rem;
  background: linear-gradient(160deg, #fffdf4, color-mix(in srgb, var(--missionsfarbe) 10%, #fff5e1));
  padding: .35rem;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--missionsfarbe) 16%, transparent);
}
.auftrag .ohm-zeile {
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  padding: 0;
  background: transparent;
}
.auftrag .ohm-zeile .katze-klein { width: min(100%, 7rem); margin: 0 auto; }
.auftrag .ohm-zeile .katze-bild { max-height: 6rem; filter: drop-shadow(0 4px 2px rgba(0,0,0,.16)); }
.auftrag .ohm-zeile .knopf { width: 100%; min-height: 38px; padding: .35rem; border-color: var(--missionsfarbe); color: var(--missionsfarbe); font-size: .68rem; letter-spacing: .07em; }
.auftrag .hinweise { margin: .15rem 0 0; padding: .25rem .2rem .2rem 1rem; font-size: .75rem; line-height: 1.35; }

/* Antwortoptionen werden zu großen Spielkarten. Der Buchstabenmarker gibt
   eine visuelle Reihenfolge, ohne Farbe schon als "richtig" zu verwenden. */
.auftrag .auswahl { counter-reset: antwort; gap: .7rem; }
.auftrag .auswahl > .knopf:not(.knopf-annehmen) {
  counter-increment: antwort;
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  border-color: color-mix(in srgb, var(--missionsfarbe) 58%, #f5d19a);
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--missionsfarbe) 5%, #fff));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--missionsfarbe) 18%, #d68b42);
}
.auftrag .auswahl > .knopf:not(.knopf-annehmen)::before {
  content: counter(antwort, upper-alpha);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--missionsfarbe);
  color: #fff;
  font-family: var(--schrift-anzeige);
  font-weight: 800;
  box-shadow: inset 0 -2px rgba(0,0,0,.13);
}
.auftrag .auswahl > .knopf:not(.knopf-annehmen):hover { border-color: var(--missionsfarbe); transform: translateY(-2px); }
.auftrag .auswahl > .knopf.aktiv { background: color-mix(in srgb, var(--missionsfarbe) 13%, #fff); border-color: var(--missionsfarbe); color: var(--kreide); }
.auftrag .auswahl > .knopf.aktiv::before { content: "✓"; background: var(--missionsfarbe); }

.auftrag .eingabe-zeile { padding: .65rem; border: 2px solid color-mix(in srgb, var(--missionsfarbe) 32%, #f4d19c); border-radius: 1rem; background: rgba(255,255,255,.6); }
.auftrag .eingabe-feld { border-color: var(--missionsfarbe); }
.auftrag .knopf-annehmen { background: linear-gradient(180deg, color-mix(in srgb, var(--missionsfarbe) 68%, #fff), var(--missionsfarbe)); border-color: color-mix(in srgb, var(--missionsfarbe) 72%, #513017); box-shadow: 0 4px 0 color-mix(in srgb, var(--missionsfarbe) 55%, #513017); }
.auftrag .tastenfeld { padding: .65rem; border-radius: 1rem; background: color-mix(in srgb, var(--missionsfarbe) 8%, #fff); }
.auftrag .taste-abgeben { background: linear-gradient(180deg, color-mix(in srgb, var(--missionsfarbe) 68%, #fff), var(--missionsfarbe)); }
.auftrag .rueckmeldung { border: 3px solid var(--missionsfarbe); border-left-width: 7px; border-radius: 1rem; background: color-mix(in srgb, var(--missionsfarbe) 7%, #fff); padding: .8rem 1rem; }

@media (max-width: 640px) {
  .auftrag { display: flex; flex-direction: column; gap: .8rem; }
  .auftrag .auftrag-text { width: 100%; font-size: 1.26rem; }
  .auftrag .hinweisleiste { padding: .45rem .55rem; }
  .auftrag .hinweisleiste::before { width: 100%; text-align: left; }
  .auftrag .ohm-zeile { flex: 1 1 8rem; flex-direction: row; align-items: center; justify-content: flex-start; }
  .auftrag .ohm-zeile .katze-klein { width: 4.2rem; margin: 0; }
  .auftrag .ohm-zeile .katze-bild { max-height: 4.4rem; }
  .auftrag .ohm-zeile .knopf { width: auto; flex: 1; }
  .auftrag .hinweise { flex: 1 1 100%; }
  .auftrag .auswahl > .knopf:not(.knopf-annehmen) { min-height: 60px; padding: .7rem .75rem; }
}

/* --- Hafenbucht 2: eine Welt statt eines farbigen Hintergrunds ---------- */

/* Der alte Hafen war eine gute Karte auf blauem Grund. Hier wird der ganze
   Bildschirm zur Bucht: Himmel, ferne Insel, Stadt, Steg und Boot liegen
   hinter der Spieloberfläche. Die Inhalte sind bewusst schwebende Teile der
   Welt und keine gleichwertigen Kacheln untereinander. */
.schirm-hafen {
  min-height: max(100svh, 47rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf"
    "wesen wesen wesen wesen . . . . status status status status"
    "wesen wesen wesen wesen . . . . aktion aktion aktion aktion"
    "route route route route route route route route route route route route"
    "wege wege wege wege wege wege wege wege wege wege wege wege";
  align-content: space-between;
  gap: .75rem;
  padding: clamp(.9rem, 2.2vw, 1.5rem);
  border: 0;
  border-radius: 0;
  background: linear-gradient(#72d8f1 0 47%, #1a9dc6 47% 100%);
  box-shadow: none;
}

/* HUD: Holz, Messing und Papier wie bei einer Spielwelt, aber nur mit den
   Informationen, die im Moment gebraucht werden. */
.hafen-kopf { position: relative; grid-area: kopf; }
.hafen-logo { padding: .55rem .9rem .65rem; border: 3px solid #bd8a4b; border-radius: .9rem; background: linear-gradient(#946337, #58351d); box-shadow: 0 5px #382112; }
.hafen-logo span { color: #ffe5a0; }.hafen-logo h1 { color: #fff7d5; font-size: clamp(1.65rem, 4.2vw, 2.65rem); }
.einstellungen-panel { position: absolute; z-index: 8; top: calc(100% + .4rem); right: 0; display: grid; gap: .38rem; width: min(17rem, calc(100vw - 2rem)); padding: .65rem .7rem; border: 3px solid #bd8a4b; border-radius: .85rem; background: #fff4d5; box-shadow: 0 7px 16px rgba(33,20,10,.25); color: #593821; font-size: .72rem; }.einstellungen-panel label { display: flex; align-items: center; gap: .4rem; font-weight: 750; }
.hafen-wesen { grid-area: wesen; max-width: 19rem; border-color: #b98043; background: rgba(60, 38, 23, .93); box-shadow: 0 6px #342012, 0 12px 20px rgba(2, 45, 58, .28); }

.schirm-hafen .katzenplatz { background: radial-gradient(70% 70% at 50% 100%, rgba(255, 218, 118, .55), transparent 70%); }
.hafen-entdecken { grid-area: entdecken; align-self: start; padding: .65rem; border: 4px solid #68401f; border-radius: 1.15rem; background: rgba(255, 240, 194, .95); box-shadow: 0 7px #392313, 0 12px 24px rgba(2, 45, 58, .25); }.hafen-entdecken-kopf { display: flex; justify-content: space-between; gap: .6rem; margin: 0 .2rem .55rem; }.hafen-entdecken-kopf span { color: #6c3f21; font-family: var(--schrift-anzeige); font-size: .66rem; font-weight: 800; letter-spacing: .13em; }.hafen-entdecken-kopf small { color: #81562e; text-align: right; font-size: .67rem; }
.hafen-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.hafen-ort { min-height: 6.1rem; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-content: center; gap: .1rem .45rem; padding: .5rem; border: 3px solid #c88e48; border-radius: .9rem; background: linear-gradient(135deg, #fffdf3, #f4dfad); color: #593821; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #a96e32; transition: transform .16s ease, box-shadow .16s ease; }.hafen-ort:hover, .hafen-ort:focus-visible { transform: translateY(-.16rem); box-shadow: 0 5px 0 #a96e32, 0 8px 16px rgba(67,43,21,.16); }.hafen-ort i { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 50%; background: #2d7c8e; color: #fff3ba; font-style: normal; font-size: 1.25rem; }.hafen-ort b { font-size: .8rem; }.hafen-ort small { font-size: .64rem; color: #805838; }.hafen-ort-werkstatt i { background: #5e6caf; }.hafen-ort-wesen i { background: #4d8b59; }.hafen-ort-fund i { background: #a36a40; }
.schirm-hafen .wochenkarte, .schirm-hafen .regal { padding: .5rem .65rem; border-color: #b98043; background: rgba(63, 39, 22, .93); box-shadow: 0 4px #392313; }
.hafen-aktion { grid-area: aktion; max-width: 22rem; justify-self: end; width: 100%; }
.schirm-hafen .werkbank { display: grid; }
.schirm-hafen .werkbank[hidden] { display: none; }
.schirm-hafen #knopf-start { min-height: 5rem; border-color: #4b9122; box-shadow: 0 6px #3b741d, 0 9px 18px rgba(4, 58, 38, .22); }

/* Die Reiseziele liegen wie Inselkarten am unteren Rand. Die geöffnete Insel
   wird selbst zur großen Themenkarte. Es gibt bewusst keinen zweiten,
   verschachtelten Scrollbereich: Kinder sehen die Reaktion auf ihren Klick
   sofort und bewegen nur die normale Seite. */
.hafen-route { grid-area: route; border: 4px solid #68401f; border-radius: 1.15rem; background: rgba(255, 240, 194, .95); box-shadow: 0 7px #392313, 0 12px 24px rgba(2, 45, 58, .25); padding: .6rem; }
.hafen-route-kopf { margin: 0 .2rem .45rem; }.hafen-route-kopf span { color: #6c3f21; }.hafen-route-kopf small { color: #81562e; }
.schirm-hafen .faecher { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); align-items: stretch; gap: .55rem; overflow: visible; padding: 0 .05rem .3rem; }
.schirm-hafen .fachzeile { position: relative; min-width: 0; min-height: 6.2rem; justify-content: space-between; border-width: 3px; border-radius: 1rem; padding: .45rem; background: linear-gradient(150deg, color-mix(in srgb, var(--fachfarbe) 16%, #fff), #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--fachfarbe) 40%, #694120); }
.schirm-hafen .fachzeile.offen { grid-column: 1 / -1; min-height: 0; padding: .65rem; }
.schirm-hafen .fachzeile::before { content: ""; position: absolute; inset: auto .6rem .35rem; height: 1.2rem; opacity: .28; border-radius: 50% 50% 35% 35%; background: var(--fachfarbe); clip-path: polygon(0 100%, 12% 55%, 28% 75%, 46% 20%, 62% 68%, 78% 42%, 100% 100%); }
.schirm-hafen .fachzeile.offen::before { display: none; }
.schirm-hafen .fachname { position: relative; z-index: 1; min-height: 2.3rem; font-size: .66rem; padding: .3rem; }
.fach-aufklappen { position: relative; z-index: 1; align-self: center; background: rgba(255,255,255,.82); color: var(--fachfarbe); border: 1px solid var(--fachfarbe); border-radius: 999px; padding: .3rem .5rem; font-family: var(--schrift-anzeige); font-size: .6rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.fach-aufklappen:focus-visible { outline: 3px solid var(--fachfarbe); outline-offset: 2px; }
.schirm-hafen .themen[hidden], .schirm-hafen .sternbild, .schirm-hafen .fach-fortschritt { display: none; }
.schirm-hafen .themen:not([hidden]) { position: static; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .5rem; width: 100%; max-height: none; overflow: visible; scroll-margin-top: 5rem; border: 3px solid var(--fachfarbe); border-radius: 1rem; background: #fff9e9; box-shadow: inset 0 1px #fff, 0 5px 12px rgba(48, 29, 16, .18); padding: .65rem; }
.schirm-hafen .themen-kopf { grid-column: 1 / -1; margin: 0 0 .05rem; color: #d6ece5; font-size: .88rem; font-weight: 700; }
.schirm-hafen .thema-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: .3rem; min-width: 0; }
.schirm-hafen .themen .fach { display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; min-height: 46px; padding: .4rem .6rem; font-size: .95rem; text-align: left; }
.schirm-hafen .themen .fach > span { min-width: 0; white-space: normal; overflow-wrap: break-word; hyphens: auto; line-height: 1.15; }
.schirm-hafen .themen .fach.aktiv { box-shadow: inset 0 1px rgba(255,255,255,.3), 0 4px 0 color-mix(in srgb, var(--fachfarbe) 55%, #49301c); }
.schirm-hafen .thema-option .fach-anleitung { position: static; align-self: stretch; min-width: 42px; min-height: 42px; }
.themen-finale { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hafen-nebenwege { grid-area: wege; justify-content: flex-start; }

@media (max-width: 760px) {
  .schirm-hafen { min-height: 100svh; grid-template-columns: 1fr; grid-template-areas: "kopf" "wesen" "status" "entdecken" "route" "aktion" "wege"; align-content: start; background: linear-gradient(#72d8f1 0 38%, #1a9dc6 38% 100%); }
  .hafen-wesen, .hafen-status, .hafen-entdecken, .hafen-aktion { max-width: none; justify-self: stretch; }.hafen-wesen { display: grid; grid-template-columns: 1fr; }.schirm-hafen .katze-bild { max-height: 8.5rem; }.schirm-hafen .wochenkarte, .schirm-hafen .regal { min-height: 4.2rem; align-content: center; }
  .hafen-route { margin-top: 4.5rem; }.schirm-hafen .faecher { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hafen-route-kopf small { display: block; }
}

@media (max-width: 440px) {
  .schirm-hafen { padding: .65rem; }.hafen-logo h1 { font-size: 1.55rem; }.hafen-werkzeuge .knopf { font-size: .7rem; }.hafen-route { margin-top: 3.3rem; }
}

/* --- Illustrierte Hafenwelt ---------------------------------------------
   Die Kulisse ist ein eigenes, komprimiertes Spiel-Asset. UI, Texte und
   Interaktionen bleiben HTML: dadurch sind sie scharf, barrierearm und auf
   jedem Format neu anordenbar, während die Welt wie aus einem Guss wirkt. */

.schirm-hafen {
  min-height: max(100svh, 49rem);
  overflow: hidden;
  border: 3px solid #315b69;
  border-radius: clamp(1rem, 2.5vw, 2rem);
  background-image:
    linear-gradient(180deg, rgba(4, 42, 56, .06) 0 52%, rgba(3, 40, 55, .13) 100%),
    url('../img/hafen/hafenwelt-v1.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 9px 0 #244b58, 0 20px 42px rgba(21, 63, 74, .3);
}

.hafen-kopf { align-self: start; }
.hafen-logo {
  border-color: #d3a35f;
  background:
    linear-gradient(110deg, rgba(255,255,255,.13), transparent 32%),
    linear-gradient(#875a34, #4b2e1c);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px #2d1b11, 0 10px 20px rgba(18, 47, 52, .28);
}
.hafen-logo span { color: #ffe7a3; }
.hafen-logo h1 { text-shadow: 0 2px #2b1b13; }

.schirm-hafen .hafen-werkzeuge .knopf-flach,
.schirm-hafen .hafen-nebenwege .knopf-flach {
  border: 2px solid #c99855;
  background:
    linear-gradient(120deg, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(#74502f, #412819);
  color: #fff2c7;
  box-shadow: 0 4px #291910, 0 7px 14px rgba(14, 43, 49, .22);
}

.hafen-wesen {
  border-color: #c89552;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 219, 124, .18), transparent 52%),
    linear-gradient(145deg, rgba(76, 48, 28, .96), rgba(45, 29, 19, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 6px #291a11, 0 15px 30px rgba(8, 39, 47, .3);
  backdrop-filter: blur(3px);
}
.hafen-wesen-marke { background: linear-gradient(#3484a7, #205b77); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.schirm-hafen .katzenplatz { background: radial-gradient(70% 72% at 50% 100%, rgba(255, 213, 106, .44), transparent 72%); }

.schirm-hafen .wochenkarte,
.schirm-hafen .regal {
  border-color: #c89552;
  background:
    linear-gradient(110deg, rgba(255,255,255,.08), transparent 35%),
    rgba(49, 31, 20, .92);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 4px #291a11, 0 9px 18px rgba(9, 43, 50, .23);
  backdrop-filter: blur(4px);
}

.schirm-hafen #knopf-start {
  border-color: #477d25;
  background:
    linear-gradient(110deg, rgba(255,255,255,.25), transparent 38%),
    linear-gradient(#a8e95a, #58a923);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 6px #356c1a, 0 12px 24px rgba(22, 70, 35, .3);
}
.schirm-hafen #knopf-start:hover { filter: saturate(1.08) brightness(1.04); }

.hafen-route {
  border-color: #77502e;
  background:
    linear-gradient(110deg, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, rgba(255, 244, 205, .97), rgba(225, 191, 126, .96));
  box-shadow: inset 0 1px #fff8df, 0 7px #382315, 0 15px 30px rgba(9, 42, 49, .28);
  backdrop-filter: blur(4px);
}
.hafen-route-kopf { border-bottom: 1px solid rgba(111, 70, 34, .24); padding-bottom: .42rem; }
.schirm-hafen .fachzeile {
  border-color: color-mix(in srgb, var(--fachfarbe) 58%, #604025);
  background:
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--fachfarbe) 22%, transparent), transparent 58%),
    linear-gradient(145deg, #fffdf5, color-mix(in srgb, var(--fachfarbe) 9%, #fff));
  box-shadow: inset 0 1px #fff, 0 4px 0 color-mix(in srgb, var(--fachfarbe) 45%, #644326), 0 8px 14px rgba(64, 39, 22, .12);
  transition: transform .18s ease, filter .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .schirm-hafen .fachzeile:hover { transform: translateY(-3px); filter: saturate(1.08); }
}
.schirm-hafen .fachname { box-shadow: inset 0 1px rgba(255,255,255,.75), 0 3px 0 color-mix(in srgb, var(--fachfarbe) 36%, #5e3c23); }
.fach-aufklappen { min-height: 31px; background: rgba(255, 252, 240, .9); }

/* Querformat/PC: Die Illustration bleibt ein Panorama und die Bedienung
   rahmt sie ein. In der Mitte bleibt bewusst freie, sichtbare Spielwelt. */
@media (min-width: 900px) {
  #buehne:has(.schirm-hafen:not([hidden])) { max-width: 96rem; padding-top: .7rem; }
  .schirm-hafen {
    min-height: calc(100svh - 1.4rem);
    grid-template-rows: auto minmax(8rem, 1fr) auto auto auto;
    background-position: center 48%;
  }
  .hafen-wesen { align-self: start; }
  .hafen-aktion { align-self: end; }
}

/* Tablet: etwas engerer Bildausschnitt; Bedienfelder bleiben an den
   Bildrändern und lassen das zentrale Wasser sichtbar. */
@media (min-width: 641px) and (max-width: 899px) {
  #buehne:has(.schirm-hafen:not([hidden])) { max-width: none; padding: .55rem; }
  .schirm-hafen { min-height: calc(100svh - 1.1rem); background-position: center center; }
  .hafen-wesen { max-width: 17rem; }
  .hafen-status, .hafen-aktion { max-width: 19rem; }
}

/* Handy: ein eigener Hochformat-Ausschnitt. Das Bild bleibt Bühne hinter
   kompakten Panels; die Inselziele lassen sich mit dem Daumen wischen. */
@media (max-width: 640px) {
  #buehne:has(.schirm-hafen:not([hidden])) { padding: 0; }
  .schirm-hafen {
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image:
      linear-gradient(180deg, rgba(5, 42, 54, .03) 0 42%, rgba(3, 34, 46, .28) 100%),
      url('../img/hafen/hafenwelt-v1.webp');
    background-size: auto 100%;
    background-position: 58% center;
  }
  .hafen-kopf {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .hafen-logo { min-width: 0; padding: .42rem .55rem .5rem; }
  .hafen-logo span { font-size: .55rem; }
  .hafen-logo h1 { font-size: clamp(1.3rem, 7vw, 1.6rem); letter-spacing: .055em; white-space: nowrap; }
  .hafen-werkzeuge { min-width: 0; gap: .25rem; }
  .schirm-hafen .hafen-werkzeuge .knopf-flach { min-width: 0; min-height: 38px; padding: .35rem .45rem; font-size: .62rem; letter-spacing: .055em; }
  .schirm-hafen .hafen-werkzeuge .knopf-erklaerung { width: 34px; flex: none; }
  .hafen-wesen { width: 100%; max-width: 100%; background: rgba(48, 30, 19, .9); }
  .hafen-wesen .katzenplatz {
    display: grid;
    grid-template-columns: 6.8rem minmax(0, 1fr);
    align-items: center;
    gap: .35rem;
    margin-top: .2rem;
  }
  .schirm-hafen .katze-bild { max-height: 6.8rem; }
  .schirm-hafen .wochenkarte, .schirm-hafen .regal { min-width: 0; padding: .45rem; }
  .hafen-aktion, .schirm-hafen #knopf-start { width: 100%; min-width: 0; }
  .schirm-hafen #knopf-start { min-height: 4.4rem; padding: .7rem .5rem; font-size: clamp(1rem, 6vw, 1.3rem); line-height: 1.05; }
  .schirm-hafen #knopf-start .knopf-haupt { white-space: normal; overflow-wrap: anywhere; }
  .hafen-route { margin-top: clamp(2rem, 11vh, 5.5rem); }
  .hafen-route-kopf small { font-size: .72rem; }
  .hafen-nebenwege { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 420px) {
  .hafen-wesen { padding: .4rem; }
  .hafen-wesen .katzenplatz { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .schirm-hafen .katze-bild { max-height: 5.9rem; }
  .hafen-route-kopf span { font-size: .72rem; }
}

/* --- Überfahrt auf See --------------------------------------------------
   Die Lernzeit bleibt ruhig und eindeutig, spielt jetzt aber sichtbar in
   derselben Welt wie der Hafen. Die Illustration ist nur Bühne; Route,
   Fracht, Aufgabe und Begleiter bleiben echtes, scharfes HTML/SVG. */
#buehne:has(.schirm-schicht:not([hidden])) {
  width: 100%;
  max-width: 96rem;
  padding: clamp(.35rem, 1.2vw, .85rem);
}

.schirm-schicht {
  --missionsfarbe: var(--warn);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-content: stretch;
  gap: .8rem;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: calc(100svh - clamp(.7rem, 2.4vw, 1.7rem));
  overflow: visible;
  padding: clamp(.65rem, 1.7vw, 1.25rem);
  border: 3px solid #315b69;
  border-radius: clamp(1rem, 2.3vw, 1.8rem);
  background-image:
    linear-gradient(180deg, rgba(4, 39, 54, .05), rgba(4, 38, 49, .24)),
    url('../img/schicht/ueberfahrt-deck-v1.webp');
  background-position: center center;
  background-size: cover;
  box-shadow: 0 8px 0 #244b58, 0 18px 38px rgba(21, 63, 74, .28);
}

.schirm-schicht > .kopf,
.schirm-schicht > .ausbeute,
.schirm-schicht > .akkord,
.schirm-schicht > .fund,
.schirm-schicht > .meisterung {
  width: min(100%, 72rem);
  margin-inline: auto;
}

.schirm-schicht > .auftrag {
  width: min(100%, 59rem);
  margin-inline: auto;
}

/* Reise-HUD: Weg zuerst, Zahlen darunter. So beantwortet der Kopf auf einen
   Blick die kindlichen Fragen „Wo bin ich?“ und „Wie weit noch?“. */
.schirm-schicht .kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .8rem;
  padding: .65rem .8rem;
  border: 3px solid #d2a05a;
  border-radius: 1rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(#724a2b, #42291a);
  color: #fff1c5;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px #291910, 0 10px 20px rgba(15, 43, 49, .28);
}

.reise-route {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  align-items: center;
  gap: .65rem;
}
.reise-ort {
  font-family: var(--schrift-anzeige);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffe6a2;
}
.reise-bahn {
  position: relative;
  display: block;
  height: .62rem;
  border: 2px solid #241b18;
  border-radius: 999px;
  background: #193f52;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 1px rgba(255,255,255,.15);
}
.reise-bahn::before {
  content: "";
  position: absolute;
  inset: 2px .45rem;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 3px, transparent 3px 12.5%);
}
.reise-spur {
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  min-width: 3%;
  border-radius: 999px;
  background: linear-gradient(90deg, #58c5da, #ffda71);
  transition: width .8s linear;
}
.reise-boot {
  position: absolute;
  right: -1rem;
  top: 50%;
  font-size: 1.35rem;
  line-height: 1;
  transform: translateY(-58%);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.45));
  animation: reise-schaukeln 3.8s ease-in-out infinite;
}
@keyframes reise-schaukeln {
  0%, 100% { transform: translateY(-58%) rotate(-2deg); }
  50% { transform: translateY(-68%) rotate(2deg); }
}

.reise-instrumente {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.schirm-schicht .uhr { width: 43px; height: 43px; }
.schirm-schicht .uhr-bahn { stroke: rgba(255,255,255,.2); }
.schirm-schicht .uhr-zeiger { stroke: #ffd469; }
.schirm-schicht .kopf-text { min-width: 5.2rem; }
.schirm-schicht .kopf-marke { color: #ffe5aa; font-size: .58rem; }
.schirm-schicht .kopf-zeit { color: #fff8dc; font-size: 1.35rem; }
.schirm-schicht .kopf-zaehler {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: 0 0 0 .35rem;
  padding-left: .7rem;
  border-left: 1px solid rgba(255,226,157,.3);
  text-align: left;
}
.schirm-schicht .zaehler-zahl { color: #ffe072; font-size: 1.2rem; }
.schirm-schicht .zaehler-marke { color: #ffe5aa; font-size: .58rem; }

/* ADHD-Fokusmodus: eine ruhige Bühne, ein nächster Schritt. Alles bleibt
   erreichbar, aber Nebenkarten treten visuell in den Hintergrund. */
.lernmodus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin: .25rem auto .65rem;
  color: var(--tinte-600, #52656b);
  font-size: .78rem;
}
.lernmodus-label { font-weight: 800; letter-spacing: .04em; }
.lernmodus-zeitdruck { display: flex; align-items: center; gap: .4rem; font-weight: 750; }
.lernmodus-fokus, .lernmodus-dauer {
  border: 2px solid #c9d9d5;
  border-radius: 999px;
  background: #fffdf7;
  color: #31545b;
  padding: .42rem .72rem;
  font: inherit;
  font-weight: 750;
}
.lernmodus-fokus { cursor: pointer; }
.lernmodus-fokus.aktiv { border-color: #e1a84a; background: #fff1c8; color: #704b1c; }
.lernmodus-dauer select { border: 0; background: transparent; font: inherit; font-weight: 800; color: inherit; }
.fokus-schalter { grid-column: 2; justify-self: end; align-self: center; }
.adhs-fokus .ausbeute { opacity: .72; transform: scale(.985); transform-origin: center top; }
/* Fokus: keine tickende Zahl. Das Boot auf der Reise-Spur zeigt den Fortschritt
   ruhig genug; der harte Stopp kommt trotzdem. */
.adhs-fokus .kopf-zeit, .adhs-fokus .zeit-lesbar, .adhs-fokus .kopf-marke { display: none; }
.adhs-fokus .auftrag { box-shadow: 0 14px 0 rgba(37, 76, 86, .18), 0 22px 45px rgba(18, 53, 65, .24); }
.adhs-fokus .hinweisleiste { padding-top: .55rem; }
.adhs-fokus .hinweise:not(:empty) { background: #fff9e9; border-radius: .8rem; padding: .5rem .7rem; }
.rueckmeldung-aktionen { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.adhs-fokus .rueckmeldung-aktionen { justify-content: center; }

/* Eigenständige Szenenfarben für die Missionen statt eines einheitlichen
   Aufgabenkastens mit anderem Etikett. */

.stromwerk-mini { margin: .65rem 0; border: 3px solid #d39d43; border-radius: 1rem; overflow: hidden; background: linear-gradient(145deg, #183d53, #245e70); box-shadow: 0 5px 0 #123446; color: #fff3c4; }
.stromwerk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding: .55rem .75rem; background: rgba(0,0,0,.17); }
.stromwerk-kopf span { font-weight: 900; letter-spacing: .04em; }.stromwerk-kopf small { color: #cce9ed; text-align: right; }
.stromwerk-kreis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .75rem; }
.stromwerk-teil { min-height: 4.8rem; border: 2px solid #4f8290; border-radius: .75rem; background: #f7f0d5; color: #214b59; font: 750 .7rem/1.1 var(--schrift, sans-serif); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.stromwerk-teil b, .stromwerk-teil span { display: block; }.stromwerk-teil b { font-size: 1.55rem; margin-bottom: .25rem; }.stromwerk-teil.erwartet { border-color: #ffdd66; background: #fff8d8; box-shadow: 0 0 0 3px rgba(255,221,102,.2), 0 3px 0 #bd8a36; transform: translateY(-.1rem); }.stromwerk-kreis.leuchtet .stromwerk-teil.lampe { background: #fff39b; box-shadow: 0 0 1.4rem #fff08a; }
@media (max-width: 520px) { .stromwerk-kopf { display: block; }.stromwerk-kopf small { display: block; margin-top: .2rem; text-align: left; }.stromwerk-kreis { gap: .28rem; padding: .5rem; }.stromwerk-teil { min-height: 4.25rem; font-size: .61rem; }.stromwerk-teil b { font-size: 1.3rem; } }
.kristallbruecke-mini { margin: .65rem 0; border: 3px solid #8063ba; border-radius: 1rem; overflow: hidden; background: linear-gradient(145deg, #40356f, #665ba0); box-shadow: 0 5px 0 #332a5b; color: #faf0ff; }
.kristallbruecke-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding: .55rem .75rem; background: rgba(0,0,0,.15); }.kristallbruecke-kopf span { font-weight: 900; letter-spacing: .04em; }.kristallbruecke-kopf small { color: #e8defd; text-align: right; }
.kristallbruecke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .75rem; }.kristallteil { min-height: 4.8rem; border: 2px solid #a895dc; border-radius: .75rem; background: #f7f2ff; color: #493d71; font: 750 .7rem/1.1 var(--schrift, sans-serif); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }.kristallteil b, .kristallteil span { display: block; }.kristallteil b { font-size: 1.55rem; margin-bottom: .25rem; }.kristallteil.erwartet { border-color: #f8db7d; background: #fff8dc; box-shadow: 0 0 0 3px rgba(248,219,125,.2), 0 3px 0 #8f73c6; transform: translateY(-.1rem); }.kristallbruecke.fertig .kristallteil.kristall { background: #dffcff; box-shadow: 0 0 1.4rem #a5f3ff; }
@media (max-width: 520px) { .kristallbruecke-kopf { display: block; }.kristallbruecke-kopf small { display: block; margin-top: .2rem; text-align: left; }.kristallbruecke { gap: .28rem; padding: .5rem; }.kristallteil { min-height: 4.25rem; font-size: .61rem; }.kristallteil b { font-size: 1.3rem; } }
.fachaktion-mini { --aktion-dunkel: #34634a; --aktion-mittel: #629469; --aktion-akzent: #d9c95d; margin: .65rem 0; border: 3px solid var(--aktion-akzent); border-radius: 1rem; overflow: hidden; background: linear-gradient(145deg, var(--aktion-dunkel), var(--aktion-mittel)); box-shadow: 0 5px 0 color-mix(in srgb, var(--aktion-dunkel) 80%, #111); color: #fff9dd; }
.fachaktion-physik { --aktion-dunkel: #404b76; --aktion-mittel: #6875a5; --aktion-akzent: #f4d674; }.fachaktion-mathe { --aktion-dunkel: #375d82; --aktion-mittel: #5490af; --aktion-akzent: #b8e7ef; }.fachaktion-wort { --aktion-dunkel: #804947; --aktion-mittel: #b56e54; --aktion-akzent: #f1c574; }.fachaktion-funk { --aktion-dunkel: #245984; --aktion-mittel: #4d9ac1; --aktion-akzent: #f4e68a; }.fachaktion-zeit { --aktion-dunkel: #6e4c31; --aktion-mittel: #a7794b; --aktion-akzent: #f1d28a; }.fachaktion-berg { --aktion-dunkel: #2d6872; --aktion-mittel: #55949a; --aktion-akzent: #d5efac; }.fachaktion-code { --aktion-dunkel: #254c78; --aktion-mittel: #3e7da0; --aktion-akzent: #8fe4dc; }
.fachaktion-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding: .55rem .75rem; background: rgba(0,0,0,.15); }.fachaktion-kopf span { font-weight: 900; letter-spacing: .04em; }.fachaktion-kopf small { color: rgba(255,255,255,.86); text-align: right; }
.fachaktion-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .75rem; }.fachaktion-teil { min-height: 4.8rem; border: 2px solid color-mix(in srgb, var(--aktion-akzent) 62%, #fff); border-radius: .75rem; background: #fffdf2; color: var(--aktion-dunkel); font: 750 .7rem/1.1 var(--schrift, sans-serif); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }.fachaktion-teil b, .fachaktion-teil span { display: block; }.fachaktion-teil b { font-size: 1.45rem; margin-bottom: .25rem; }.fachaktion-teil.erwartet { border-color: #fff2a1; background: #fff9d8; box-shadow: 0 0 0 3px rgba(255,242,161,.2), 0 3px 0 var(--aktion-dunkel); transform: translateY(-.1rem); }.fachaktion-reihe.fertig .fachaktion-teil:last-child { background: color-mix(in srgb, var(--aktion-akzent) 45%, #fff); box-shadow: 0 0 1.4rem var(--aktion-akzent); }
.miniaktion-weiter { display: block; width: calc(100% - 1.5rem); min-height: 2.45rem; margin: 0 .75rem .75rem; border: 1px solid rgba(255,248,210,.72); border-radius: .65rem; background: rgba(255,255,255,.14); color: #fff9dc; font: 900 .62rem/1 var(--schrift-anzeige); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.miniaktion-weiter:hover, .miniaktion-weiter:focus-visible { background: rgba(255,255,255,.25); outline: 2px solid #fff1ae; outline-offset: 2px; }
@media (max-width: 520px) { .fachaktion-kopf { display: block; }.fachaktion-kopf small { display: block; margin-top: .2rem; text-align: left; }.fachaktion-reihe { gap: .28rem; padding: .5rem; }.fachaktion-teil { min-height: 4.25rem; font-size: .61rem; }.fachaktion-teil b { font-size: 1.2rem; } }
.ist-pausiert::after {
  content: 'PAUSE – du kannst jederzeit weitermachen';
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(16, 44, 55, .74); color: #fff5cf;
  font: 900 clamp(1.2rem, 3vw, 2rem)/1.2 var(--schrift-anzeige, sans-serif);
  letter-spacing: .05em; text-align: center; pointer-events: none;
}
/* Individuelle Reiz- und Lesbarkeitshilfe: kein harter Reset, nur die
   bewegten Dekorationen werden still und die zentrale Aufgabe wächst. */
.ruhemodus *, .ruhemodus *::before, .ruhemodus *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
.schrift-gross .auftrag .auftrag-text,
.schrift-gross .missionsfrage .auftrag-text { font-size: clamp(1.3rem, 2.7vw, 2rem); line-height: 1.38; }
.schrift-gross .rueckmeldung-text,
.schrift-gross .schritt-frage { font-size: 1.08rem; line-height: 1.5; }
/* Große Schrift ist eine echte Lesemodus-Änderung, nicht nur eine kaum
   wahrnehmbare Anpassung innerhalb der Aufgabenkarte. Rem-basierte Texte
   wachsen gemeinsam; enge Hafenbeschriftungen erhalten zusätzlich Luft. */
html:has(body.schrift-gross) { font-size: 18px; }
.schrift-gross #schirm-tor .fachname { font-size: .84rem !important; line-height: 1.28; }
.schrift-gross #schirm-tor .fach-aufklappen { font-size: .74rem; }
.schrift-gross #schirm-tor .hafen-route-kopf span { font-size: .86rem; }
.schrift-gross #schirm-tor .hafen-route-kopf small { font-size: .88rem; }
.schrift-gross #schirm-tor .hafen-kompass b { font-size: 1.12rem; }
.schrift-gross #schirm-tor .hafen-kompass small { font-size: .86rem; }
@media (max-width: 640px) {
  html:has(body.schrift-gross) { font-size: 17px; }
  .schrift-gross #schirm-tor .faecher { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fokus-schalter { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .lernmodus { font-size: .72rem; }
  .lernmodus-dauer { padding: .36rem .58rem; }
}

.schirm-schicht .schicht-verlassen { position: relative; justify-content: flex-end; margin: 0; }
.schirm-schicht .schicht-verlassen .knopf-flach {
  min-height: 42px;
  border: 2px solid #c99855;
  background: linear-gradient(#76502f, #442a1a);
  color: #fff1c5;
  box-shadow: 0 3px #281910;
  padding: .4rem .65rem;
  font-size: .66rem;
}
.schirm-schicht .schicht-verlassen-frage {
  position: absolute;
  z-index: 30;
  top: calc(100% + .55rem);
  right: 0;
  width: min(25rem, calc(100vw - 2rem));
  align-items: stretch;
  border: 3px solid #c99855;
  border-radius: 1rem;
  background: #fff5d9;
  box-shadow: 0 8px 20px rgba(29,19,13,.3);
}
.schirm-schicht .schicht-verlassen-frage p { text-align: left; }

/* Die Beute ist jetzt Fracht auf dem Schiff, nicht eine losgelöste
   Tabellenzeile. */
.schirm-schicht .ausbeute {
  position: relative;
  min-height: 3.3rem;
  gap: .65rem;
  padding: .5rem .75rem .5rem 3.25rem;
  border: 3px solid #c99855;
  border-left-width: 3px;
  border-radius: 1rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.1), transparent 32%),
    rgba(58, 37, 23, .94);
  color: #fff0c5;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px #291910, 0 9px 18px rgba(15,43,49,.23);
}
.schirm-schicht .ausbeute::before {
  content: "";
  position: absolute;
  left: .65rem;
  width: 1.9rem;
  height: 1.45rem;
  border: 2px solid #5a331c;
  border-radius: .35rem;
  background: linear-gradient(#ffc85b 0 34%, #a65b24 35% 100%);
  box-shadow: inset 0 0 0 2px #d99137, 0 2px 0 rgba(0,0,0,.28);
}
.schirm-schicht .ausbeute::after {
  content: "";
  position: absolute;
  left: 1.37rem;
  width: .42rem;
  height: .56rem;
  border-radius: .1rem;
  background: #ffe07a;
  box-shadow: 0 1px #603719;
}
.schirm-schicht .ausbeute-marke { color: #ffe092; font-size: .62rem; }
.schirm-schicht .ausbeute-leer { color: #d8bd91; font-style: italic; }
.schirm-schicht .posten { border-color: #d6a25b; background: #fff2c9; color: #44291a; }

/* Die Seekarte ist keine Fortschrittsstatistik. Sie zeigt nur die naechste
   kleine Reise: wenige, greifbare Stationen und eine Truhe als Ziel. */

@keyframes kompass-warten { 50% { transform: translateY(-3px) scale(1.1); filter: brightness(1.16); } }
@keyframes schatz-aufgehen {
  0% { transform: scale(.96); filter: brightness(1); }
  38% { transform: scale(1.025); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Missionskarte: ein ruhiges Logbuchblatt auf dem Deck. Fachfarbe lenkt,
   die Welt bleibt am Rand sichtbar und konkurriert nicht mit der Frage. */
.schirm-schicht .auftrag {
  border: 4px solid color-mix(in srgb, var(--missionsfarbe) 62%, #76502f);
  border-top-width: 9px;
  border-radius: 1.25rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.7), transparent 30%),
    linear-gradient(145deg, rgba(255,254,247,.98), rgba(255,240,205,.97));
  box-shadow: inset 0 1px #fff, 0 7px #49301e, 0 17px 34px rgba(10,37,44,.3);
  backdrop-filter: blur(4px);
}
.schirm-schicht .auftrag::before {
  height: 18%;
  opacity: .09;
}
.schirm-schicht .auftrag::after {
  content: "⚓";
  color: color-mix(in srgb, var(--missionsfarbe) 18%, transparent);
  font-size: 3.6rem;
}
.schirm-schicht .auftrag-kopf::before { content: "DECK-MISSION"; }
.schirm-schicht .auftrag-text { text-wrap: balance; }
.schirm-schicht .auftrag .hinweisleiste {
  position: relative;
  border-color: color-mix(in srgb, var(--missionsfarbe) 62%, #76502f);
  background: linear-gradient(155deg, #fffbea, color-mix(in srgb, var(--missionsfarbe) 10%, #fff1cf));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--missionsfarbe) 20%, #8a6036);
}

@media (min-width: 1000px) {
  .schirm-schicht .auftrag .auswahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schirm-schicht .auftrag .auswahl-mehrfach-hinweis,
  .schirm-schicht .auftrag .auswahl > .knopf-annehmen { grid-column: 1 / -1; }
}

@media (min-width: 641px) and (max-width: 999px) {
  #buehne:has(.schirm-schicht:not([hidden])) { padding: .5rem; }
  .schirm-schicht { background-position: 54% center; }
  .schirm-schicht > .auftrag { width: min(100%, 46rem); }
}

@media (max-width: 640px) {
  #buehne:has(.schirm-schicht:not([hidden])) { padding: 0; }
  .schirm-schicht {
    min-height: 100svh;
    gap: .65rem;
    overflow: hidden;
    padding: .55rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image:
      linear-gradient(180deg, rgba(5,39,51,.06), rgba(4,35,43,.3)),
      url('../img/schicht/ueberfahrt-deck-v1.webp');
    background-position: 57% center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #159fc4;
  }
  .schirm-schicht .kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .42rem;
    padding: .48rem .55rem;
  }
  .reise-route { gap: .38rem; }
  .reise-ort { font-size: .52rem; letter-spacing: .07em; }
  .reise-ziel { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; }
  .reise-bahn { height: .52rem; }
  .reise-boot { right: -.75rem; font-size: 1.05rem; }
  .schirm-schicht .uhr { display: none; }
  .schirm-schicht .kopf-text { min-width: 4.5rem; }
  .schirm-schicht .kopf-marke { font-size: .51rem; }
  .schirm-schicht .kopf-zeit { font-size: 1.12rem; }
  .schirm-schicht .kopf-zaehler { padding-left: .45rem; }
  .schirm-schicht .zaehler-marke { display: none; }
  .schirm-schicht .schicht-verlassen .knopf-flach { min-height: 38px; padding: .32rem .46rem; font-size: .56rem; }
  .schirm-schicht .ausbeute { padding-left: 2.85rem; }
  .schirm-schicht .ausbeute::before { left: .5rem; }
  .schirm-schicht .ausbeute::after { left: 1.22rem; }
  .schirm-schicht .ausbeute-marke { width: 100%; }

  
  
  .schirm-schicht .auftrag {
    border-width: 3px;
    border-top-width: 7px;
    border-radius: 1rem;
    padding: .8rem;
    box-shadow: 0 5px #49301e, 0 12px 24px rgba(10,37,44,.28);
  }
  .schirm-schicht .auftrag-kopf::before { content: "MISSION"; }
  .schirm-schicht .auftrag .hinweisleiste::after { display: none; }
  .schirm-schicht .auftrag .hinweisleiste { order: 6; }
}

/* --- Kapitäns-Logbuch ---------------------------------------------------
   Zweite Ebene der Missionsbühne: Die Aufgabe ist kein weißes Formular
   mehr, sondern ein klar gegliedertes Logbuch mit genau einem Blickpfad:
   Missionsband -> Auftrag -> Werkzeug/Antwort -> Rückmeldung. */
.schirm-schicht .auftrag {
  padding: clamp(.8rem, 2.1vw, 1.25rem);
  border-color: #6b4528;
  border-top-color: var(--missionsfarbe);
  background:
    linear-gradient(90deg, transparent 0 2.1rem, rgba(168, 81, 51, .13) 2.1rem 2.18rem, transparent 2.18rem),
    repeating-linear-gradient(0deg, transparent 0 2.05rem, rgba(96, 133, 145, .08) 2.05rem 2.1rem),
    linear-gradient(145deg, rgba(255,254,246,.985), rgba(255,238,197,.98));
  box-shadow:
    inset 0 0 0 2px #e1bd79,
    inset 0 0 0 5px rgba(255,255,255,.55),
    0 7px #49301e,
    0 18px 36px rgba(10,37,44,.32);
}

/* Ein einziges Missionsband ersetzt drei voneinander getrennte Aufkleber. */
.schirm-schicht .auftrag-kopf {
  display: flex;
  flex-wrap: nowrap;
  min-height: 2.55rem;
  gap: .35rem;
  padding: .32rem .42rem;
  border: 2px solid #d2a05a;
  border-radius: .8rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(#684329, #3e281a);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 4px #2d1c13;
  color: #fff2c8;
}
.schirm-schicht .auftrag-kopf::before {
  content: "MISSION";
  align-self: stretch;
  height: auto;
  min-width: 5.1rem;
  justify-content: center;
  border-radius: .48rem;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 2px color-mix(in srgb, var(--missionsfarbe) 55%, #2b1a12);
}
.schirm-schicht .auftrag-kopf .stempel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  box-shadow: none;
  color: #fff3cd;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schirm-schicht .auftrag-kopf .stempel:first-of-type {
  color: #fff3cd;
  border: 0;
  flex: 1;
}
.schirm-schicht .auftrag-kopf .stempel-nr {
  flex: none;
  margin-left: auto;
  border: 1px solid rgba(255,224,147,.55);
  background: rgba(255,244,208,.11);
  color: #ffe08b;
}

/* Die Frage ist der helle Mittelpunkt im Logbuch, nicht einfach ein Absatz
   zwischen Metadaten und Formular. */
.missionsfrage .knopf-vorlesen { align-self: flex-start; }
.missionsfrage {
  position: relative;
  z-index: 1;
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  min-height: 9.2rem;
  padding: .75rem 1rem .85rem 1.15rem;
  border: 2px solid color-mix(in srgb, var(--missionsfarbe) 35%, #d9b471);
  border-left: 7px solid var(--missionsfarbe);
  border-radius: .95rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--missionsfarbe) 7%, #fffdf6), #fffdf6 58%, #fff3d5);
  box-shadow: inset 0 1px #fff, 0 4px 0 rgba(111,72,35,.14);
}

.schirm-schicht .auftrag .missionsfrage .auftrag-text {
  width: 100%;
  max-width: 42rem;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  line-height: 1.38;
  text-wrap: pretty;
}

/* Begleiterfigur am Kartenrand; der eigentliche Hinweis ist die Blase. */
.schirm-schicht .auftrag .hinweisleiste {
  min-height: 9.2rem;
  border: 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
  padding: .2rem 0 .2rem .15rem;
}
.schirm-schicht .auftrag .hinweisleiste::after { display: none; }
.schirm-schicht .auftrag .hinweisleiste::before {
  align-self: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--missionsfarbe) 10%, #fff8e5);
}
.schirm-schicht .auftrag .ohm-zeile .katze-klein { width: min(100%, 6.8rem); }
.schirm-schicht .auftrag .ohm-zeile .knopf {
  position: relative;
  min-height: 43px;
  border: 2px solid var(--missionsfarbe);
  border-radius: 999px;
  background: #fff9e8;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--missionsfarbe) 25%, #8e6237);
}
.schirm-schicht .auftrag .ohm-zeile .knopf::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: -.38rem;
  width: .65rem;
  height: .65rem;
  border-left: 2px solid var(--missionsfarbe);
  border-top: 2px solid var(--missionsfarbe);
  background: #fff9e8;
  transform: rotate(45deg);
}
.schirm-schicht .auftrag .hinweise {
  margin: .35rem 0 0;
  padding: .6rem .7rem .6rem 1.7rem;
  border: 2px solid color-mix(in srgb, var(--missionsfarbe) 40%, #d9b471);
  border-radius: .8rem;
  background: #fff9e8;
  box-shadow: 0 3px 0 rgba(111,72,35,.12);
  color: #704524;
}

/* Antwortkarten: leichte Pergamentoberfläche, fester Holzschatten und klare
   Zustände. Die Fachfarbe führt, ohne richtig/falsch vorwegzunehmen. */
.schirm-schicht .auftrag .auswahl { gap: .72rem; }
.schirm-schicht .auftrag .auswahl.fracht-sortieren {
  position: relative;
  padding: .72rem;
  border: 2px dashed color-mix(in srgb, var(--missionsfarbe) 45%, #c89854);
  border-radius: 1rem;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--missionsfarbe) 7%, transparent), transparent 45%),
    rgba(255,250,232,.63);
}
.fracht-spielkopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .42rem .55rem;
  border-radius: .7rem;
  background: linear-gradient(100deg, #245566, #347484);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px #193945;
  color: #fff3c7;
}
.fracht-spielkopf-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: 2px solid #edc263;
  border-radius: 50%;
  background: #2f7981;
  color: #fff2ae;
}
.fracht-spielkopf b { display: block; font-family: var(--schrift-anzeige); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.fracht-spielkopf small { display: block; margin-top: .12rem; color: #d6eddf; font-size: .78rem; font-weight: 600; }
.schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen) {
  min-height: 68px;
  border-width: 2px;
  border-left-width: 6px;
  border-radius: .85rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.8), transparent 38%),
    linear-gradient(145deg, #fffdf6, color-mix(in srgb, var(--missionsfarbe) 7%, #fff1d4));
  box-shadow:
    inset 0 1px #fff,
    0 5px 0 color-mix(in srgb, var(--missionsfarbe) 22%, #9b6c3d);
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 78px;
  padding: .6rem .75rem;
  overflow: hidden;
}
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte::before,
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte.aktiv::before { display: none; }
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte::after {
  content: "";
  position: absolute;
  right: -1.2rem;
  bottom: -1.2rem;
  width: 4rem;
  height: 4rem;
  border: 2px solid color-mix(in srgb, var(--missionsfarbe) 22%, transparent);
  border-radius: 50%;
}
.frachtkarte-siegel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 2.7rem;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid color-mix(in srgb, var(--missionsfarbe) 65%, #8d572f);
  border-radius: .7rem;
  background: linear-gradient(145deg, #f7cb70, #d9863d);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 2px #9a572d;
  color: #54321d;
  font-size: 1.28rem;
  transform: rotate(-3deg);
}
.frachtkarte-inhalt { position: relative; z-index: 1; display: grid; gap: .15rem; min-width: 0; }
.frachtkarte-marke { color: color-mix(in srgb, var(--missionsfarbe) 72%, #704526); font-family: var(--schrift-anzeige); font-size: .55rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.frachtkarte-text { color: #49301e; font-size: 1rem; font-weight: 750; line-height: 1.25; text-wrap: pretty; }
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte.aktiv .frachtkarte-siegel { background: var(--missionsfarbe); color: #fff; transform: rotate(3deg) scale(1.06); }
.schirm-schicht .auftrag .auswahl > .knopf.frachtkarte.aktiv::after { border-color: var(--missionsfarbe); }
.schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen)::before {
  border-radius: .55rem;
  transform: rotate(-2deg);
}
@media (hover: hover) and (pointer: fine) {
  .schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen):hover {
    transform: translateY(-3px) rotate(-.15deg);
    box-shadow: inset 0 1px #fff, 0 8px 0 color-mix(in srgb, var(--missionsfarbe) 28%, #8a5a32);
  }
}
.schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen):active {
  transform: translateY(3px);
  box-shadow: inset 0 1px #fff, 0 2px 0 color-mix(in srgb, var(--missionsfarbe) 22%, #9b6c3d);
}
.schirm-schicht .auftrag .auswahl > .knopf.aktiv {
  background: linear-gradient(145deg, color-mix(in srgb, var(--missionsfarbe) 17%, #fff), #fff4d9);
  box-shadow: inset 0 0 0 2px var(--missionsfarbe), 0 5px 0 color-mix(in srgb, var(--missionsfarbe) 42%, #80512e);
}
.schirm-schicht .auswahl-mehrfach-hinweis {
  grid-column: 1 / -1;
  margin: .15rem 0 0;
  border-left: 4px solid var(--missionsfarbe);
  border-radius: .45rem;
  background: color-mix(in srgb, var(--missionsfarbe) 8%, #fff8e8);
  padding: .5rem .7rem;
  color: #684326;
  font-weight: 650;
}

/* Bordwerkzeuge für Texteingabe, Terme und Zahlen. */
.schirm-schicht .auftrag .eingabe-zeile {
  position: relative;
  padding: 2rem .65rem .65rem;
  border: 3px solid #b68142;
  border-radius: 1rem;
  background:
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(#62412a, #3e291c);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 5px #2c1b12;
}
.schirm-schicht .auftrag .eingabe-zeile::before {
  content: "ANTWORT INS LOGBUCH";
  position: absolute;
  left: .8rem;
  top: .38rem;
  color: #ffe09a;
  font-family: var(--schrift-anzeige);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.schirm-schicht .auftrag .eingabe-feld {
  min-height: 62px;
  border: 3px solid color-mix(in srgb, var(--missionsfarbe) 70%, #88552f);
  border-radius: .75rem;
  background: #fffdf5;
  box-shadow: inset 0 3px 0 rgba(111,72,35,.1);
}
.schirm-schicht .auftrag .tastenfeld {
  gap: .45rem;
  border: 3px solid #b68142;
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%),
    #244959;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 5px #17323d;
}
.schirm-schicht .auftrag .taste {
  border: 2px solid #d8a45f;
  border-radius: .7rem;
  background: linear-gradient(#fff9e9, #edcf96);
  box-shadow: 0 4px #936333;
  color: #3d281a;
}
.schirm-schicht .auftrag .taste:active { transform: translateY(3px); box-shadow: 0 1px #936333; }
.schirm-schicht .auftrag .taste-abgeben {
  border-color: color-mix(in srgb, var(--missionsfarbe) 70%, #5c391f);
  background: linear-gradient(color-mix(in srgb, var(--missionsfarbe) 65%, #fff), var(--missionsfarbe));
  color: #fff;
}

/* Konstruktionsaufgaben werden zur Blaupause auf dem Kartentisch. */
.auftrag[data-eingabeart="punkt"] .konstruktionsfeld,
.auftrag[data-eingabeart="bereich"] .konstruktionsfeld,
.auftrag[data-antworttyp="mehrschritt"] .konstruktionsfeld,
.auftrag .auftrag-diagramm {
  border: 3px solid #397998;
  background-color: #eaf8fb;
  background-image:
    linear-gradient(rgba(47,127,160,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,127,160,.12) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 5px #23536b;
}

/* Erfolg wird gestempelt, ein Fehler ist nur eine Kurskorrektur. */
.schirm-schicht .auftrag .rueckmeldung {
  position: relative;
  min-height: 4.3rem;
  border-width: 3px;
  border-left-width: 8px;
  border-radius: .9rem;
  box-shadow: inset 0 1px #fff, 0 4px 0 rgba(65,91,68,.14);
}
.schirm-schicht .auftrag .rueckmeldung.gut {
  border-color: #2f9a51;
  background: linear-gradient(135deg, #f5fff4, #dff4d7);
}
.schirm-schicht .auftrag .rueckmeldung.noch {
  border-color: #327dab;
  background: linear-gradient(135deg, #f7fcff, #dceef8);
}
.schirm-schicht .auftrag .rueckmeldung-marke {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 850;
}
.schirm-schicht .auftrag .rueckmeldung-marke::before {
  content: "↗";
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #327dab;
  color: #fff;
  font-size: 1rem;
}
.schirm-schicht .auftrag .rueckmeldung.gut .rueckmeldung-marke::before { content: "✓"; background: #2f9a51; }

.schirm-schicht .auftrag.mission-geschafft::after,
.schirm-schicht .auftrag.kurskorrektur::after {
  z-index: 15;
  left: 50%;
  right: auto;
  top: 46%;
  bottom: auto;
  width: auto;
  height: auto;
  opacity: 1;
  padding: .5rem .8rem;
  border: 4px double currentColor;
  border-radius: .45rem;
  background: rgba(255,253,240,.96);
  font-family: var(--schrift-anzeige);
  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-5deg);
  box-shadow: 0 5px 16px rgba(37,25,17,.22);
  animation: logbuch-stempel .62s ease-out both;
}
.schirm-schicht .auftrag.mission-geschafft::after { content: "✓ MISSION GESCHAFFT"; color: #268b49; }
.schirm-schicht .auftrag.kurskorrektur::after { content: "↗ KURS KORRIGIEREN"; color: #327dab; transform: translate(-50%, -50%) rotate(3deg); }
@keyframes logbuch-stempel {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-8deg); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-4deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
}
.schirm-schicht.mission-erfolg .reise-boot { animation: boot-erfolg .8s ease-out; }
.schirm-schicht.mission-erfolg .ausbeute { animation: fracht-erfolg .8s ease-out; }
.schirm-schicht.mission-korrektur .reise-bahn { animation: kurs-puls .6s ease-out; }
@keyframes boot-erfolg {
  0%, 100% { transform: translateY(-58%) rotate(-2deg) scale(1); }
  45% { transform: translate(9px, -92%) rotate(5deg) scale(1.22); }
}
@keyframes fracht-erfolg { 50% { filter: brightness(1.22); transform: scale(1.008); } }
@keyframes kurs-puls { 50% { box-shadow: 0 0 0 4px rgba(65,153,202,.35), inset 0 2px 3px rgba(0,0,0,.35); } }

@media (max-width: 640px) {
  .schirm-schicht .auftrag-kopf { min-height: 2.35rem; padding: .27rem .3rem; }
  .schirm-schicht .auftrag-kopf::before { min-width: 0; padding-inline: .42rem; font-size: .57rem; }
  .schirm-schicht .auftrag-kopf .stempel { padding-inline: .25rem; font-size: .61rem; letter-spacing: .085em; }
  .schirm-schicht .auftrag-kopf .stempel-nr { max-width: 6rem; }
  .missionsfrage {
    min-height: 0;
    padding: .65rem .72rem .72rem .82rem;
    border-left-width: 5px;
  }
  .schirm-schicht .auftrag .missionsfrage .auftrag-text { font-size: 1.18rem; line-height: 1.4; }

  .schirm-schicht .auftrag .auswahl > .knopf:not(.knopf-annehmen) { min-height: 60px; }
  .schirm-schicht .auftrag .auswahl.fracht-sortieren { padding: .55rem; }
  .fracht-spielkopf { gap: .48rem; padding: .38rem .45rem; }
  .fracht-spielkopf-icon { flex-basis: 1.7rem; width: 1.7rem; height: 1.7rem; font-size: .8rem; }
  .fracht-spielkopf b { font-size: .61rem; }
  .fracht-spielkopf small { font-size: .68rem; }
  .schirm-schicht .auftrag .auswahl > .knopf.frachtkarte { min-height: 68px; gap: .55rem; padding: .5rem .6rem; }
  .frachtkarte-siegel { flex-basis: 2.3rem; width: 2.3rem; height: 2.3rem; font-size: 1.08rem; }
  .frachtkarte-text { font-size: .92rem; }
  .schirm-schicht .auftrag .eingabe-zeile { padding: 1.85rem .5rem .5rem; }
  .schirm-schicht .auftrag .eingabe-feld { min-height: 58px; }
  .schirm-schicht .auftrag .tastenfeld { gap: .34rem; padding: .5rem; }
  .schirm-schicht .auftrag .taste { min-height: 52px; }
  .schirm-schicht .auftrag .hinweisleiste {
    padding: .35rem .4rem;
    border: 2px solid color-mix(in srgb, var(--missionsfarbe) 42%, #d9b471);
    border-radius: .9rem;
    background: linear-gradient(145deg, #fffbed, color-mix(in srgb, var(--missionsfarbe) 7%, #fff4d9));
  }
  .schirm-schicht .auftrag .hinweisleiste::before { align-self: flex-start; }
  .schirm-schicht .auftrag .ohm-zeile .knopf::before { left: -.35rem; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .schirm-schicht .auftrag.mission-geschafft::after,
  .schirm-schicht .auftrag.kurskorrektur::after { font-size: .84rem; letter-spacing: .07em; }
}

@media (min-width: 900px) {
  #buehne:has(.schirm-hafen:not([hidden])) { max-width: 94rem; }
  .schirm-hafen {
    min-height: calc(100svh - 1.4rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf kopf"
      "entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken entdecken"
      "wesen wesen wesen wesen wesen wesen status status status status status status"
      "route route route route route route route route route route route route"
      "aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion aktion"
      "wege wege wege wege wege wege wege wege wege wege wege wege";
    align-content: start;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.65rem);
    background-position: center center;
  }
  .hafen-entdecken, .hafen-route { width: min(100%, 61rem); justify-self: center; }
  .hafen-entdecken { padding: .8rem; }
  .hafen-wesen { width: min(100%, 29rem); max-width: none; justify-self: end; align-self: start; }
  .hafen-aktion { width: min(100%, 34rem); max-width: none; justify-self: center; align-self: start; }
  .hafen-nebenwege { justify-self: center; align-self: start; }
}

/* Arbeitsdeck: Auf PC stehen die vier Hafen-Orte zentral und direkt erreichbar.
   So bleibt die Kulisse Bühne, statt leere Fläche zwischen Bedienfeldern zu lassen. */
#buehne #schirm-tor .hafen-ort[hidden] { display: none !important; }
#buehne #schirm-tor .hafen-entdecken {
  border-color: rgba(139, 206, 193, .72);
  background:
    radial-gradient(circle at 10% 0, rgba(91, 174, 165, .18), transparent 42%),
    linear-gradient(145deg, rgba(4, 54, 65, .97), rgba(5, 76, 77, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 7px 0 rgba(2, 39, 49, .74), 0 16px 28px rgba(2, 27, 38, .25);
}
#buehne #schirm-tor .hafen-entdecken-kopf { border-bottom: 1px solid rgba(205, 235, 224, .2); padding-bottom: .45rem; }
#buehne #schirm-tor .hafen-entdecken-kopf span { color: #e9d39a; }
#buehne #schirm-tor .hafen-entdecken-kopf small { color: #a9d6cd; }
#buehne #schirm-tor .hafen-ort {
  min-height: 5.35rem;
  border-color: rgba(137, 208, 195, .6);
  background: linear-gradient(135deg, rgba(255,255,255,.1), transparent 42%), rgba(3, 47, 58, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 3px 0 rgba(1, 38, 47, .8);
  color: #f0f7ee;
}
#buehne #schirm-tor .hafen-ort:hover,
#buehne #schirm-tor .hafen-ort:focus-visible { box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 0 rgba(1, 38, 47, .8), 0 9px 16px rgba(0, 21, 31, .3); }
#buehne #schirm-tor .hafen-ort small { color: #b9d9d3; }
#buehne #schirm-tor .hafen-ort i { background: #087d86; color: #fff0c5; }
#buehne #schirm-tor .hafen-ort-werkstatt i { background: #5776a8; }
#buehne #schirm-tor .hafen-ort-wesen i { background: #0e987c; }
#buehne #schirm-tor .hafen-ort-rucksack i { background: #bf6842; }
#buehne #schirm-tor .hafen-ort-fund i { background: #177e95; }

@media (min-width: 900px) {
  #buehne #schirm-tor {
    grid-template-columns: minmax(13rem, 16rem) minmax(28rem, 1fr) minmax(16rem, 19rem);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "kopf kopf kopf"
      "kompass kompass kompass"
      "wesen entdecken aktion"
      "status entdecken aktion"
      "route route route"
      "wege wege wege" !important;
    align-content: start;
    align-items: start;
  }
  #buehne #schirm-tor .hafen-entdecken { width: 100%; max-width: none; justify-self: stretch; align-self: start; }
  #buehne #schirm-tor .hafen-route { width: min(100%, 64rem); justify-self: center; }
#buehne #schirm-tor .hafen-aktion { align-self: start; }
}

/* Der Erstlauf-Kompass (.hafen-hilfe) teilt sich das "entdecken"-Rasterfeld
   mit dem Orte-Panel. In Rastern, in denen "entdecken" nur eine schmale
   Mittelspalte ist, brach seine Schritt-Liste sonst zeichenweise um -- er
   bekommt darum immer die volle Breite. */
#buehne #schirm-tor .hafen-hilfe { grid-column: 1 / -1; grid-row: auto; }

/* Muss nach den historischen Erwachsenenregeln stehen, damit die neue
   Arbeitsdeck-Struktur auf allen Bildschirmgrößen gewinnt. */
#buehne .schirm-erwachsene {
  display: grid;
  grid-template-columns: minmax(11.5rem, 13.5rem) minmax(0, 1fr);
  grid-template-areas: "kopf kopf" "navigation inhalt";
  align-items: start;
  max-width: 76rem;
  gap: 1rem 1.25rem;
  padding: clamp(.8rem, 2.2vw, 1.6rem);
  border: 1px solid rgba(91, 145, 142, .42);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(252,254,249,.96), rgba(231,243,238,.94));
  box-shadow: 0 14px 36px rgba(8, 59, 66, .16);
}
#buehne .schirm-erwachsene[hidden] { display: none; }
@media (max-width: 760px) {
  #buehne .schirm-erwachsene { grid-template-columns: 1fr; grid-template-areas: "kopf" "navigation" "inhalt"; border-radius: 0; }
}

/* Pip ist keine generische blaue Möwe mehr: Sie ist die Funklotsin des
   Möwenkais. Cremefarbenes Gefieder, ein tiefes Seepetrol und Messing machen
   ihre Silhouette auch klein sofort lesbar; Kompass, Schal und Fernrohr
   erzählen ihre eigene Englisch-Reise. */
.wesen-neu.art-englisch .pip-moewe { filter: drop-shadow(0 6px 4px rgba(1, 31, 43, .3)); }
.wesen-neu.art-englisch .pip-tail,
.wesen-neu.art-englisch .pip-fluegel,
.wesen-neu.art-englisch .pip-koerper,
.wesen-neu.art-englisch .pip-kopf { fill: var(--wesen-fuellung); stroke: #063e4c; stroke-width: 2.4; }
.wesen-neu.art-englisch .pip-fluegel { fill: #258d9b; }
.wesen-neu.art-englisch .pip-fluegel-links { filter: brightness(1.1); }
.wesen-neu.art-englisch .pip-fluegel-rechts { filter: brightness(.84); }
.wesen-neu.art-englisch .pip-tail { fill: #0b6372; }
.wesen-neu.art-englisch .pip-bauch,
.wesen-neu.art-englisch .pip-gesicht { fill: #f4f5df; stroke: #0a5863; stroke-width: 1.8; }
.wesen-neu.art-englisch .pip-bauchlinie,
.wesen-neu.art-englisch .pip-federlinien { fill: none; stroke: #79c4be; stroke-width: 1.6; opacity: .9; }
.wesen-neu.art-englisch .pip-kamm { fill: #c6e9dc; stroke: #0a5863; stroke-width: 1.8; }
.wesen-neu.art-englisch .pip-muetze { fill: #0d5361; stroke: #042f3e; stroke-width: 2.1; }
.wesen-neu.art-englisch .pip-muetzenband { fill: none; stroke: #f0c975; stroke-width: 3.2; }
.wesen-neu.art-englisch .pip-auge { fill: #fff8d9; stroke: #063e4c; stroke-width: 1.7; }
.wesen-neu.art-englisch .pip-pupille { fill: #073542; }
.wesen-neu.art-englisch .pip-glanz { fill: #fff; }
.wesen-neu.art-englisch .pip-schnabel { fill: #e5ae52; stroke: #7c4c20; stroke-width: 2; }
.wesen-neu.art-englisch .pip-schnabelstrich { fill: none; stroke: #9a6027; stroke-width: 1.5; }
.wesen-neu.art-englisch .pip-schal,
.wesen-neu.art-englisch .pip-schalende { fill: #e8bd61; stroke: #704a23; stroke-width: 1.8; }
.wesen-neu.art-englisch .pip-kompass { fill: #f9e8b3; stroke: #315f62; stroke-width: 1.7; }
.wesen-neu.art-englisch .pip-kompassnadel { fill: #d27b50; stroke: #315f62; stroke-width: 1; }
.wesen-neu.art-englisch .pip-fuss { fill: none; stroke: #d39a43; stroke-width: 2.5; stroke-linecap: round; }
.wesen-neu.art-englisch .pip-ausruestung { color: #e9d49a; stroke: #e9d49a; opacity: .92; }
.wesen-neu.art-englisch .pip-schlafschatten { fill: #032f3e; opacity: .24; }
.wesen-neu.art-englisch .pip-schlaftail,
.wesen-neu.art-englisch .pip-schlafkoerper,
.wesen-neu.art-englisch .pip-schlafkopf { fill: #0d6975; stroke: #063e4c; stroke-width: 2.3; }
.wesen-neu.art-englisch .pip-schlaffluegel { fill: #1f8c98; stroke: #063e4c; stroke-width: 2; }
.wesen-neu.art-englisch .pip-schlafbauch { fill: #edf3df; stroke: #0a5863; stroke-width: 1.6; }
.wesen-neu.art-englisch .pip-schlafmuetze { fill: #0c4d5b; stroke: #042f3e; stroke-width: 2; }
.wesen-neu.art-englisch .pip-schlafband { fill: none; stroke: #edc66c; stroke-width: 3; }
.wesen-neu.art-englisch .pip-schlafauge { fill: none; stroke: #f6f0ca; stroke-width: 2.1; stroke-linecap: round; }
.wesen-neu.art-englisch .pip-schlafschnabel { fill: #e3ac52; stroke: #7c4c20; stroke-width: 1.8; }
.wesen-neu.art-englisch .pip-schlafschal { fill: #dfb45e; stroke: #704a23; stroke-width: 1.6; }
.wesen-neu.art-englisch .pip-zzz { fill: #f4d889; stroke: #164955; stroke-width: .45; font: 800 15px var(--schrift-anzeige, sans-serif); }
.wesen-neu.art-englisch .pip-zzz-zwei { font-size: 12px; opacity: .84; }
.wesen-neu.art-englisch .pip-zzz-drei { font-size: 10px; opacity: .65; }

/* Erwachsenenbereich, finale Ruheebene: oben nur noch Rückweg und ein
   zusammengefasstes Kontomenü. Admin-Familien werden einzeln aufgeklappt. */
.schirm-erwachsene .ew-konto-menue { position: relative; }
.schirm-erwachsene .ew-konto-menue > summary {
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  padding: .42rem .7rem;
  border: 1px solid #75aaa2;
  border-radius: .62rem;
  background: #f9fcf8;
  box-shadow: 0 2px 0 rgba(44,112,105,.2);
  color: #245d61;
  cursor: pointer;
  font: 800 .72rem var(--schrift-anzeige);
  list-style: none;
}
.schirm-erwachsene .ew-konto-menue > summary::-webkit-details-marker { display: none; }
.schirm-erwachsene .ew-konto-menue > summary::after { content: '⌄'; margin-left: .45rem; }
.schirm-erwachsene .ew-konto-menue[open] > summary::after { content: '⌃'; }
.schirm-erwachsene .ew-konto-menue > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + .4rem);
  right: 0;
  display: grid;
  width: min(17rem, calc(100vw - 2rem));
  gap: .45rem;
  padding: .65rem;
  border: 1px solid rgba(220,190,113,.72);
  border-radius: .75rem;
  background: #073f4d;
  box-shadow: 0 10px 24px rgba(2,34,43,.28);
}
.schirm-erwachsene .ew-konto-menue > div .knopf { width: 100%; justify-content: flex-start; }
.schirm-erwachsene .adm-konten-liste { gap: .6rem; }
.schirm-erwachsene .adm-konto {
  padding: 0;
  overflow: hidden;
  border: 1px solid #8db8af;
  border-radius: .8rem;
  background: #f8fbf7;
  box-shadow: 0 3px 0 rgba(39,105,103,.12);
}
.schirm-erwachsene .adm-konto > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 4.1rem;
  padding: .7rem .85rem;
  cursor: pointer;
  list-style: none;
}
.schirm-erwachsene .adm-konto > summary::-webkit-details-marker { display: none; }
.schirm-erwachsene .adm-konto > summary span,
.schirm-erwachsene .adm-konto > summary b,
.schirm-erwachsene .adm-konto > summary small { display: block; }
.schirm-erwachsene .adm-konto > summary b { color: #214f56; overflow-wrap: anywhere; }
.schirm-erwachsene .adm-konto > summary small { margin-top: .15rem; color: #687f7a; font-size: .72rem; }
.schirm-erwachsene .adm-konto > summary i { color: #2c7471; font-size: .72rem; font-style: normal; }
.schirm-erwachsene .adm-konto[open] > summary { border-bottom: 1px solid #c4dcd6; background: #eaf4f0; }
.schirm-erwachsene .adm-konto[open] > summary i { font-size: 0; }
.schirm-erwachsene .adm-konto[open] > summary i::after { content: 'Schließen'; font-size: .72rem; }
.schirm-erwachsene .adm-konto-inhalt { display: grid; gap: .85rem; padding: .85rem; }
.schirm-erwachsene .adm-konto-inhalt section { padding: .75rem; border: 1px solid #d3e2dd; border-radius: .7rem; background: #fff; }
.schirm-erwachsene .adm-konto-inhalt h3 { margin: 0 0 .15rem; color: #235d60; font-size: .84rem; }
.schirm-erwachsene .adm-konto-inhalt p { margin: 0 0 .55rem; color: #687d79; font-size: .74rem; }
.schirm-erwachsene .adm-konto-kind { grid-template-columns: minmax(7rem,1fr) minmax(7rem,.7fr) auto auto; margin-top: .5rem; background: #eef6f3; }
.schirm-erwachsene .adm-konto-kind .knopf-gefahr { border-color: #c79080; background: #fff5f1; box-shadow: none; color: #9b4437; }
.schirm-erwachsene .adm-konto-gefahr { padding: .65rem; border: 1px solid #dfb7aa; border-radius: .65rem; background: #fff9f6; }
.schirm-erwachsene .adm-konto-gefahr > summary { color: #934a3d; cursor: pointer; font-weight: 800; }
.schirm-erwachsene .adm-konto-gefahr .knopf-gefahr { margin-top: .35rem; }
@media (max-width: 700px) {
  .schirm-erwachsene .ew-konto-menue > div { left: 0; right: auto; }
  .schirm-erwachsene .adm-konto-kind { grid-template-columns: 1fr; }
}

/* Ohm: Lebensstufen (siehe lebenOhm in katze.js) */
.art-physik .ohm-wange { fill: #ff8fa3; opacity: .55; }
.art-physik .ohm-halsband { fill: none; stroke: #d24d54; stroke-width: 3; stroke-linecap: round; }
.art-physik .ohm-glocke { fill: #ffd66d; stroke: #8a4a20; stroke-width: 1.2; }
.art-physik .ohm-schuerze { fill: #4d7fb5; stroke: #274a73; stroke-width: 1.6; }
.art-physik .ohm-schuerzenband { fill: none; stroke: #274a73; stroke-width: 1.4; }
.art-physik .ohm-tasche { fill: #6a9bd0; stroke: #274a73; stroke-width: 1.2; }
.art-physik .ohm-schraubenzieher { stroke: #d24d54; stroke-width: 2.2; stroke-linecap: round; }
.art-physik .ohm-schal { fill: #e8903a; stroke: #8a4a20; stroke-width: 1.4; }
.art-physik .ohm-schalende { fill: #e8903a; stroke: #8a4a20; stroke-width: 1.4; }
.art-physik .ohm-umhang { fill: #b4413f; stroke: #732d3d; stroke-width: 1.6; }
.art-physik .ohm-aura { fill: #ffe9a8; opacity: .4; }
.art-physik .ohm-aura.aura-2 { opacity: .5; }
.art-physik .ohm-aura.aura-3 { opacity: .6; }
.art-physik .ohm-sterne path { fill: #fff3a6; stroke: #c69a2b; stroke-width: 1; }
body:not(.ruhemodus) .art-physik .ohm-aura, body:not(.ruhemodus) .art-physik .ohm-sterne { animation: wesen-aura 4s ease-in-out infinite; }