@charset "UTF-8";
/* ==========================================================================
   Fallblatt — Grundlagen
   Farbtoken, Typografie, Seitengeruest, Navigation, Bedienelemente, Hinweise.

   Aufbau der Farben:
     1. Die Werte stehen genau einmal, als --h-* (hell) und --d-* (dunkel).
     2. Zwei duenne Zuordnungsbloecke schalten um:
          @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
          :root[data-theme="dark"]
        Der erste bedient das Systemschema, der zweite den Umschalter im Kopf.
     3. Nur die Zuordnung ist doppelt, nie ein Farbwert. So kann hell und
        dunkel nicht auseinanderlaufen.

   Das Modul kennt keine style-Attribute und keine externen Dateien —
   die Content-Security-Policy der Seite laesst beides nicht zu.
   ========================================================================== */

/* --------------------------------------------------------------- Token -- */
:root {
  color-scheme: light;

  /* Palette hell — Papier, Blech, gedaempftes Blaugruen */
  --h-grund:        #f1eee7;
  --h-grund-tief:   #e5e0d6;
  --h-flaeche:      #fffdf9;
  --h-flaeche-hoch: #ffffff;
  --h-linie:        #d8d1c4;
  --h-linie-stark:  #b4ab9a;
  --h-text:         #1b1a17;
  --h-text-leise:   #6a6357;
  --h-akzent:       #1d5f6b;
  --h-akzent-tief:  #14454e;
  --h-akzent-zart:  #dbe9eb;
  --h-akzent-text:  #ffffff;
  --h-schatten:     rgba(52, 44, 30, .16);
  --h-schatten-tief:rgba(52, 44, 30, .24);

  /* Palette dunkel — Anzeigetafel bei Nacht */
  --d-grund:        #131519;
  --d-grund-tief:   #0c0e11;
  --d-flaeche:      #1b1e24;
  --d-flaeche-hoch: #232830;
  --d-linie:        #2f343d;
  --d-linie-stark:  #49505d;
  --d-text:         #eae7e0;
  --d-text-leise:   #9ba1ab;
  --d-akzent:       #5cb8c4;
  --d-akzent-tief:  #8ad3dd;
  --d-akzent-zart:  #17323a;
  --d-akzent-text:  #07171b;
  --d-schatten:     rgba(0, 0, 0, .48);
  --d-schatten-tief:rgba(0, 0, 0, .66);

  /* Spielzustaende. Textfarbe steht je Zustand daneben, weil Gelb und Gruen
     unterschiedlich viel Kontrast tragen. */
  --h-richtig: #2f6b45;  --h-auf-richtig: #ffffff;
  --h-fast:    #94690f;  --h-auf-fast:    #ffffff;
  --h-daneben: #6d6659;  --h-auf-daneben: #ffffff;
  --d-richtig: #35774f;  --d-auf-richtig: #f4f6f3;
  --d-fast:    #8a6717;  --d-auf-fast:    #fbf6ec;
  --d-daneben: #464c58;  --d-auf-daneben: #e6e8ec;

  /* Farbenblind-Modus: Blau/Orange statt Gruen/Gelb (Okabe-Ito).
     Die Farbe ist dort nur noch die halbe Information — die Musterebene
     in brett.css traegt die andere Haelfte. */
  --m-richtig: #0b6fa8;  --m-auf-richtig: #ffffff;
  --m-fast:    #e08a00;  --m-auf-fast:    #241601;
  --m-daneben: #5c5f66;  --m-auf-daneben: #ffffff;

  /* Signalfarben fuer Hinweise */
  --h-warnung: #9a5b09;  --d-warnung: #d79a3c;
  --h-fehler:  #a03434;  --d-fehler:  #e0736f;
  --h-erfolg:  #2f6b45;  --d-erfolg:  #63b487;

  /* Aktive Zuordnung = hell */
  --grund: var(--h-grund);
  --grund-tief: var(--h-grund-tief);
  --flaeche: var(--h-flaeche);
  --flaeche-hoch: var(--h-flaeche-hoch);
  --linie: var(--h-linie);
  --linie-stark: var(--h-linie-stark);
  --text: var(--h-text);
  --text-leise: var(--h-text-leise);
  --akzent: var(--h-akzent);
  --akzent-tief: var(--h-akzent-tief);
  --akzent-zart: var(--h-akzent-zart);
  --akzent-text: var(--h-akzent-text);
  --schatten-farbe: var(--h-schatten);
  --schatten-farbe-tief: var(--h-schatten-tief);
  --richtig: var(--h-richtig);   --auf-richtig: var(--h-auf-richtig);
  --fast:    var(--h-fast);      --auf-fast:    var(--h-auf-fast);
  --daneben: var(--h-daneben);   --auf-daneben: var(--h-auf-daneben);
  --warnung: var(--h-warnung);
  --fehler:  var(--h-fehler);
  --erfolg:  var(--h-erfolg);

  /* Flaechen, die brett.css mitbenutzt */
  --kachel-grund: var(--flaeche);
  --kachel-rand: var(--linie);
  --taste-grund: var(--grund-tief);

  /* Der Fallblatt-Look: Naht in der Mitte, leichte Woelbung.
     Nur Schwarz- und Weisswerte mit Alpha, damit ein Token fuer beide
     Schemata reicht. */
  --blatt-glanz:
    linear-gradient(to bottom,
      rgba(255,255,255,.14) 0,
      rgba(255,255,255,.02) calc(50% - 1px),
      rgba(0,0,0,.26) calc(50% - 1px),
      rgba(0,0,0,.26) calc(50% + 1px),
      rgba(255,255,255,.07) calc(50% + 1px),
      rgba(0,0,0,.12) 100%);

  /* Typografie */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --text-xs: .78rem;
  --text-s:  .875rem;
  --text-m:  1rem;
  --text-l:  1.125rem;
  --text-xl: clamp(1.3rem, 1rem + 1.6vw, 1.7rem);
  --text-xxl: clamp(1.7rem, 1.2rem + 3.4vw, 2.6rem);
  --zeile: 1.55;

  /* Abstaende */
  --raum-1: .25rem;
  --raum-2: .5rem;
  --raum-3: .75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  /* Radien, Schatten, Bewegung */
  --radius-s: 7px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-voll: 999px;
  --schatten-1: 0 1px 2px var(--schatten-farbe);
  --schatten-2: 0 6px 18px -8px var(--schatten-farbe-tief);
  --tempo: 150ms;
  --kurve: cubic-bezier(.2, .7, .3, 1);

  /* Seitenbreiten */
  --breite: 68rem;
  --breite-schmal: 34rem;
}

/* Systemschema dunkel — greift, solange nicht ausdruecklich hell gewaehlt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: var(--d-grund);
    --grund-tief: var(--d-grund-tief);
    --flaeche: var(--d-flaeche);
    --flaeche-hoch: var(--d-flaeche-hoch);
    --linie: var(--d-linie);
    --linie-stark: var(--d-linie-stark);
    --text: var(--d-text);
    --text-leise: var(--d-text-leise);
    --akzent: var(--d-akzent);
    --akzent-tief: var(--d-akzent-tief);
    --akzent-zart: var(--d-akzent-zart);
    --akzent-text: var(--d-akzent-text);
    --schatten-farbe: var(--d-schatten);
    --schatten-farbe-tief: var(--d-schatten-tief);
    --richtig: var(--d-richtig);   --auf-richtig: var(--d-auf-richtig);
    --fast:    var(--d-fast);      --auf-fast:    var(--d-auf-fast);
    --daneben: var(--d-daneben);   --auf-daneben: var(--d-auf-daneben);
    --warnung: var(--d-warnung);
    --fehler:  var(--d-fehler);
    --erfolg:  var(--d-erfolg);
    --taste-grund: var(--d-flaeche-hoch);
  }
}

/* Ausdrueckliche Wahl im Kopf */
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: var(--d-grund);
  --grund-tief: var(--d-grund-tief);
  --flaeche: var(--d-flaeche);
  --flaeche-hoch: var(--d-flaeche-hoch);
  --linie: var(--d-linie);
  --linie-stark: var(--d-linie-stark);
  --text: var(--d-text);
  --text-leise: var(--d-text-leise);
  --akzent: var(--d-akzent);
  --akzent-tief: var(--d-akzent-tief);
  --akzent-zart: var(--d-akzent-zart);
  --akzent-text: var(--d-akzent-text);
  --schatten-farbe: var(--d-schatten);
  --schatten-farbe-tief: var(--d-schatten-tief);
  --richtig: var(--d-richtig);   --auf-richtig: var(--d-auf-richtig);
  --fast:    var(--d-fast);      --auf-fast:    var(--d-auf-fast);
  --daneben: var(--d-daneben);   --auf-daneben: var(--d-auf-daneben);
  --warnung: var(--d-warnung);
  --fehler:  var(--d-fehler);
  --erfolg:  var(--d-erfolg);
  --taste-grund: var(--d-flaeche-hoch);
}
:root[data-theme="light"] { color-scheme: light; }

/* Farbenblind-Modus. Gilt in beiden Schemata und ersetzt nur die drei
   Zustandsfarben; die Muster kommen in brett.css dazu. */
:root[data-farbmodus="muster"] {
  --richtig: var(--m-richtig);   --auf-richtig: var(--m-auf-richtig);
  --fast:    var(--m-fast);      --auf-fast:    var(--m-auf-fast);
  --daneben: var(--m-daneben);   --auf-daneben: var(--m-auf-daneben);
}

/* -------------------------------------------- Zustandsfarben (geteilt) --
   Die Wertung eines Buchstabens steht ueberall als Ziffer im Markup, so wie
   sie aus der Schnittstelle kommt:
       0 = kommt nicht vor, 1 = falsche Stelle, 2 = richtige Stelle
   Das Spiel schreibt sie als data-muster (Kachel, Taste), die Regelseite als
   data-zustand (Beispielkacheln). Beide Schreibweisen setzen hier dieselben
   drei Variablen; gezeichnet wird damit in brett.css.

   --zustand-muster ist die Musterebene fuer den Farbenblind-Modus. Drei klar
   verschiedene Formen, nicht drei Abstufungen derselben:
       richtig  gefuelltes Eck-Dreieck
       fast     Punkt in der Ecke
       daneben  duenner Strich quer ueber die Kachel
   currentColor bindet sie an die Schriftfarbe der Kachel, damit sie auf
   jedem Grund sichtbar bleibt. */
[data-muster="2"],
[data-zustand="2"],
.ist-richtig {
  --zustand-grund: var(--richtig);
  --zustand-text: var(--auf-richtig);
  --zustand-muster: linear-gradient(to bottom right,
                      currentColor 0 50%, transparent 50% 100%);
  --zustand-muster-groesse: 30% 30%;
  --zustand-muster-lage: 7% 7%;
}
[data-muster="1"],
[data-zustand="1"],
.ist-fast {
  --zustand-grund: var(--fast);
  --zustand-text: var(--auf-fast);
  --zustand-muster: radial-gradient(circle at 50% 50%,
                      currentColor 0 42%, transparent 44% 100%);
  --zustand-muster-groesse: 34% 34%;
  --zustand-muster-lage: 7% 7%;
}
[data-muster="0"],
[data-zustand="0"],
.ist-daneben {
  --zustand-grund: var(--daneben);
  --zustand-text: var(--auf-daneben);
  --zustand-muster: linear-gradient(to bottom right,
                      transparent calc(50% - 1px), currentColor calc(50% - 1px),
                      currentColor calc(50% + 1px), transparent calc(50% + 1px));
  --zustand-muster-groesse: 100% 100%;
  --zustand-muster-lage: center;
}

/* Die Variablen faerben nichts von selbst — das tut das jeweilige Bauteil.
   Fuer Kachel und Taste steht das in brett.css; hier die beiden Faelle
   ausserhalb des Bretts. */
.ist-richtig, .ist-fast, .ist-daneben,
.regel-kachel[data-zustand] {
  background-color: var(--zustand-grund);
  color: var(--zustand-text);
}
.regel-kachel {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border: 2px solid var(--zustand-grund, var(--linie));
  border-radius: var(--radius-m);
  background-color: var(--kachel-grund);
  font-weight: 700;
  overflow: hidden;
}
.regel-kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blatt-glanz);
}
.regel-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
:root[data-farbmodus="muster"] .regel-kachel::after {
  background-image: var(--zustand-muster, none);
  background-size: var(--zustand-muster-groesse, 30% 30%);
  background-position: var(--zustand-muster-lage, 7% 7%);
}

/* --------------------------------------------------------- Grundlegend -- */
*, *::before, *::after { box-sizing: border-box; }

/* Mehrere Vorlagen blenden ganze Abschnitte ueber das hidden-Attribut aus.
   Jede display-Regel weiter unten wuerde das aushebeln, deshalb hier
   ein Mal verbindlich. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--text-m);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--raum-3);
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: -.01em;
}
h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); }

p { margin: 0 0 var(--raum-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--raum-4); padding-left: 1.3em; }
li { margin-bottom: var(--raum-1); }

a {
  color: var(--akzent);
  text-decoration-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; }
img { height: auto; }

hr {
  height: 1px;
  border: 0;
  margin: var(--raum-6) 0;
  background: var(--linie);
}

small, .leise { color: var(--text-leise); font-size: var(--text-s); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.nur-fuer-leser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: var(--raum-3);
  top: -4rem;
  z-index: 80;
  padding: var(--raum-2) var(--raum-4);
  background: var(--akzent);
  color: var(--akzent-text);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: top var(--tempo) var(--kurve);
}
.sprungmarke:focus { top: var(--raum-3); }

/* ------------------------------------------------------------- Kopf ---- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten-1);
}

/* Schmal: Wortmarke und Schalter oben, darunter die Navigation und rechts
   davon der Kontobereich. Vier Blöcke in einer Zeile brechen bei 320 Pixeln
   sonst in drei Stufen um. */
.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: var(--raum-2) var(--raum-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marke werkzeuge"
    "navi  kopfkonto";
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
}

.marke {
  grid-area: marke;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--raum-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
}
.marke__wort {
  font-size: clamp(1.05rem, .9rem + 1vw, 1.3rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marke__blatt {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  font-size: clamp(.95rem, .85rem + .6vw, 1.1rem);
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  border: 1px solid var(--linie);
  color: var(--text);
  overflow: hidden;
}
.marke__blatt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blatt-glanz);
}
.marke:hover .marke__blatt { border-color: var(--linie-stark); }

/* --------------------------------------------------------- Navigation -- */
.navi { grid-area: navi; min-width: 0; }
.navi__liste {
  list-style: none;
  display: flex;
  gap: var(--raum-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.navi__link {
  display: block;
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius-m);
  color: var(--text-leise);
  text-decoration: none;
  font-size: var(--text-s);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.navi__link:hover { background: var(--grund-tief); color: var(--text); }
.navi__link[aria-current="page"] {
  background: var(--akzent-zart);
  color: var(--akzent-tief);
}

/* ----------------------------------------------------------- Werkzeuge - */
.werkzeuge {
  grid-area: werkzeuge;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--raum-2);
}

.segment {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--grund-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius-voll);
}
.segment__knopf {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-voll);
  background: transparent;
  color: var(--text-leise);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.segment__knopf:hover { color: var(--text); }
.segment__knopf[aria-pressed="true"] {
  background: var(--flaeche-hoch);
  color: var(--akzent);
  box-shadow: var(--schatten-1);
}
.symbol {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 24rem) {
  .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.muster-probe {
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 1px solid var(--linie-stark);
  background-image:
    repeating-linear-gradient(45deg,
      currentColor 0 2px, transparent 2px 4px);
  opacity: .75;
}
[aria-pressed="true"] .muster-probe { opacity: 1; }

/* -------------------------------------------------------------- Konto -- */
.kopf__konto {
  grid-area: kopfkonto;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.kopf__konto-link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--radius-voll);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-s);
  font-weight: 600;
  max-width: 11rem;
}
.kopf__konto-link:hover { background: var(--grund-tief); }
.kopf__konto-name {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf__stufe {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .3rem;
  border-radius: var(--radius-voll);
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ------------------------------------------------------------ Knoepfe -- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  padding: .55rem 1rem;
  min-height: 2.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--flaeche-hoch);
  color: var(--text);
  font: 600 var(--text-s)/1.2 var(--schrift);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.knopf:hover { background: var(--grund-tief); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.knopf--haupt,
.knopf--primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
.knopf--haupt:hover,
.knopf--primaer:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

.knopf--leise {
  background: transparent;
  border-color: var(--linie);
  color: var(--text-leise);
}
.knopf--leise:hover { color: var(--text); background: var(--grund-tief); }

.knopf--klein { padding: .35rem .7rem; min-height: 2rem; font-size: var(--text-xs); }
.knopf--breit { width: 100%; }

/* ---------------------------------------------------------- Formulare -- */
.feld { display: block; margin-bottom: var(--raum-4); }
.feld__marke {
  display: block;
  margin-bottom: var(--raum-1);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-leise);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-m);
  background: var(--flaeche-hoch);
  color: var(--text);
  font: 400 var(--text-m)/1.4 var(--schrift);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}
/* Drei Vorlagen, drei Schreibweisen fuer dieselbe Beschriftung. */
.feld > label, .feld__marke, .feld__name, .feld legend {
  display: block;
  margin-bottom: var(--raum-1);
  padding: 0;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-leise);
}
.feld fieldset, .feld--wahl { border: 0; margin: 0; padding: 0; }
.wahl, .ankreuz-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-2);
  margin-bottom: var(--raum-2);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--text);
}
.wahl input, .ankreuz-zeile input { width: auto; margin-top: .2em; }

.feld__notiz, .feld-hinweis {
  margin: var(--raum-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-leise);
}
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--fehler); }
.feld__fehler, .feld-fehler, .formular-fehler {
  margin: var(--raum-1) 0 0;
  font-size: var(--text-xs);
  color: var(--fehler);
}
.formular-fehler {
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius-s);
  background: var(--grund-tief);
  font-size: var(--text-s);
}

/* Honigtopf gegen Formularroboter. Muss aus dem Blickfeld, darf aber nicht
   display:none sein — sonst fuellen ihn manche Roboter gar nicht erst aus. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------- Inhalt -- */
.inhalt {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: var(--raum-5) var(--raum-3) var(--raum-7);
}
.behaelter { max-width: var(--breite); margin-inline: auto; }
.behaelter--schmal { max-width: var(--breite-schmal); margin-inline: auto; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-2);
  padding: var(--raum-5);
}

/* Tafel — schlichte Mitteilungsseiten (Fehler, Hinweis) */
.tafel {
  max-width: var(--breite-schmal);
  margin: var(--raum-6) auto;
  text-align: center;
}
.tafel__code {
  display: flex;
  justify-content: center;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-5);
}
.tafel__blatt {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.9rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--linie);
  background: var(--grund-tief);
  font-size: 2rem;
  font-weight: 700;
  overflow: hidden;
}
.tafel__blatt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blatt-glanz);
}
.tafel__text { color: var(--text-leise); }
.tafel__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  margin-top: var(--raum-5);
}

/* ------------------------------------------------- Hinweise und Toasts --
   Zwei verschiedene Dinge:
     .hinweis  steht fest im Text (etwa "SS als ß gewertet" ueber dem Brett)
     .toast    schwebt kurz ueber der Seite und geht von selbst wieder

   Der Toast wird von drei Stellen erzeugt und muss alle drei Schreibweisen
   vertragen:
     spiel.js   <p class="toast" data-art="info|hinweis|fehler">
                Abgang ueber data-zustand="geht"
     konten.js  <div class="toast toast--info|gut|fehler">
     thema.js   ueber window.fallblatt.toast()
   Behaelter: .toaster (in base.html mit id="toasts", in spiel.html mit
   id="toaster"). konten.js legt sich sonst selbst einen mit id="toasts" an. */

.hinweis {
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--hinweis-farbe, var(--akzent));
  border-radius: var(--radius-m);
  background: var(--flaeche-hoch);
  color: var(--text);
  font-size: var(--text-s);
}
.hinweis--info    { --hinweis-farbe: var(--akzent); }
.hinweis--gut,
.hinweis--erfolg  { --hinweis-farbe: var(--erfolg); }
.hinweis--warnung { --hinweis-farbe: var(--warnung); }
.hinweis--fehler  { --hinweis-farbe: var(--fehler); }

.toaster,
#toasts {
  position: fixed;
  top: var(--raum-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
  width: min(92vw, 26rem);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%;
  margin: 0;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--toast-farbe, var(--text-leise));
  border-radius: var(--radius-m);
  background: var(--flaeche-hoch);
  color: var(--text);
  font-size: var(--text-s);
  box-shadow: var(--schatten-2);
  animation: toast-auf 220ms var(--kurve) both;
}
.toast--info,    .toast[data-art="info"]    { --toast-farbe: var(--akzent); }
.toast--gut,     .toast[data-art="gut"]     { --toast-farbe: var(--erfolg); }
.toast--hinweis, .toast[data-art="hinweis"] { --toast-farbe: var(--warnung); }
.toast--fehler,  .toast[data-art="fehler"]  { --toast-farbe: var(--fehler); }
.toast[data-zustand="geht"] { animation: toast-zu 300ms var(--kurve) both; }

@keyframes toast-auf {
  from { opacity: 0; transform: translateY(-.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-zu {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-.4rem); }
}

/* --------------------------------------------------------------- Fuss -- */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text-leise);
  font-size: var(--text-s);
}
.fuss__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: var(--raum-5) var(--raum-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
}
.fuss__zeile { margin: 0; max-width: 38rem; }
.fuss__navi { display: flex; flex-wrap: wrap; gap: var(--raum-4); }
.fuss__navi a { color: var(--text-leise); }
.fuss__navi a:hover { color: var(--text); }

/* ---------------------------------------------------------- Ab Tablet -- */
@media (min-width: 46rem) {
  .inhalt { padding-inline: var(--raum-4); }
  .fuss__innen { padding-inline: var(--raum-4); }
  .kopf__innen { padding: var(--raum-3) var(--raum-4); }
}

/* Erst hier ist Platz fuer alle vier Bloecke in einer Zeile. Bei 46rem waere
   die Navigation zwischen Wortmarke und Schaltern so schmal, dass sie
   ueberlaeuft — und ein ueberlaufendes Menue verliert seine ersten
   Eintraege. */
@media (min-width: 58rem) {
  .kopf__innen {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "marke navi werkzeuge kopfkonto";
  }
}

/* ------------------------------------------------ Sichtbarkeitshelfer --
   Steht bewusst am Ende: display:none muss die display-Angaben der
   Bausteine weiter oben schlagen, ohne !important. */
.nur-weit { display: none; }
@media (min-width: 46rem) {
  .nur-weit { display: inline-flex; }
}
/* Beschriftung des Musterschalters erst ab 24rem — darunter zählt jeder
   Millimeter in der Kopfzeile. Das aria-label bleibt in jedem Fall. */
@media (max-width: 24rem) {
  .knopf__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ------------------------------------------------- Weniger Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}