/* =====================================================================
   Entwicklung & Nachwuchs — die zwei Katalogseiten (11.09.2026)

   Zwei Seiten, ein Stil: Auf beiden klickt man kurze Aussagen an,
   beide zeigen daneben eine Zahl, die etwas über UNS sagt (wie alt die
   Einschätzung ist, wie lange eine Karte liegt).

   ---------------------------------------------------------------------
   DIE WICHTIGSTE ENTSCHEIDUNG IST EINE FARBE, DIE NICHT VORKOMMT

   Es gibt hier kein Rot. „Da hakt es" ist eine Beobachtung, kein Alarm;
   ein Warnzeichen an einem Kandidaten ist ein Grund hinzusehen, kein
   Nein. Rot würde in beiden Fällen mehr sagen als die Sache — und aus
   einem Gesprächsanlass ein Urteil machen.

   Stattdessen: warm (Bernstein) für „hakt" und für Warnzeichen, kühl
   für „läuft", babyblau für „wächst", grau für „kann ich nicht sagen".
   Vier unterscheidbare Töne, keiner davon laut. Das ist auch die
   Hausregel — augenschonend, gedeckt, dunkles Schema.

   ---------------------------------------------------------------------
   UND EINE, DIE MAN NICHT SIEHT: ES GIBT KEINEN BALKEN

   Kein Fortschrittsbalken je Person, kein Prozentwert, keine Punktzahl.
   Eine Zahl über einem Menschen wird gelesen, verglichen und
   weitererzählt. Was hier gebraucht wird, ist ein Gesprächsanlass.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Gemeinsam
   ------------------------------------------------------------------- */

.e-abschnitt {
  margin: 26px 0 12px;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-still);
}

/* ---------------------------------------------------------------------
   Die Ampel

   Sie steht ganz oben und ist absichtlich die einzige Fläche auf der
   Seite, die eine Farbe trägt. Unter 34 Beobachtungen hätte sie
   niemand je gelesen.
   ------------------------------------------------------------------- */
.e-ampel {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand-hell);
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.e-ampel[data-lage="jemand"] { border-left-color: #cc9451; }
.e-ampel[data-lage="mehrere"] { border-left-color: #cc7a51; }
.e-ampel[data-lage="ruhig"] { border-left-color: #668e6e; }
.e-ampel__satz { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text); }
.e-ampel__zusatz {
  margin: 7px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-still);
}

/* ---------------------------------------------------------------------
   Die Personenreihe
   ------------------------------------------------------------------- */
.e-personen { display: flex; flex-wrap: wrap; gap: 10px; }

.e-person {
  display: flex; flex-direction: column; gap: 3px;
  /* Seit die drei Bilanz-Kaesten darin stehen, braucht die Kachel
     mehr Grundbreite -- bei 210px wurde jeder Kasten einzeilig
     gequetscht und die Ziffer rutschte unter ihr Wort. */
  min-width: 260px; flex: 1 1 300px;
  padding: 13px 15px; text-align: left; cursor: pointer;
  font: inherit;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  transition: border-color .16s ease;
}
.e-person:hover, .e-person:focus-visible {
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
}
.e-person__name { font-size: .98rem; font-weight: 640; color: var(--text); }
.e-person__rolle { font-size: .78rem; color: var(--text-still); }
.e-person__zahlen { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; }
.e-person__zahl { font-size: .77rem; color: var(--text-leise); }
/* Die Abweichung ist das Ergebnis dieser Seite — sie darf als Einzige
   auffallen. */
.e-person__zahl--wichtig { color: var(--text); font-weight: 620; }
.e-person__zahl--alt { color: var(--text-still); margin-top: 8px; }

/* ---------------------------------------------------------------------
   DIE DREI ZAHLEN AUF DER KACHEL (17.09.2026)

   Filipe, mit zwei Bildschirmfotos nebeneinander: „wieso ist diese seite
   noch nicht im stil und perfektioniert wie die auf screen2". Der
   Unterschied lag an den Zahlen: hier graue Textzeilen, drüben die
   abgesetzten Kästen mit großer Ziffer.

   `.bilanz-zahl` kommt aus start.css und wird hier nur gesetzt — nicht
   nachgebaut. Ein zweites Aussehen für dieselbe Sache läuft auseinander,
   sobald jemand eins davon anfasst.

   AUTO-FIT STATT DREI SPALTEN: Auf dem Handy ist eine Kachel schmal,
   am Rechner breit. `minmax` bricht genau dann um, wenn der Platz nicht
   reicht — eine feste Spaltenzahl wäre wieder eine Rechnung von gestern.
   ------------------------------------------------------------------- */
.e-person__bilanz {
  display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
/* Die Kästen sitzen in einem Knopf und dürfen ihn nicht abfangen —
   sonst trifft ein Tippen auf die Zahl die Kachel nicht. */
.e-person__bilanz .bilanz-zahl { pointer-events: none; padding: 9px 11px; }
.e-person__bilanz .bilanz-zahl__n { font-size: 1.35rem; }
.e-person__bilanz .bilanz-zahl__text { font-size: .74rem; }

/* WEN HABE ICH GERADE OFFEN? Vorher sah die Kachel nach dem Klick aus
   wie vorher; wer scrollte, verlor den Faden. Gedämpft hell statt
   grell — die Karte darunter ist die Hauptsache, die Kachel sagt nur,
   wozu sie gehört. */
.e-person[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--akzent) 11%, transparent), transparent 62%),
    color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
}

/* ---------------------------------------------------------------------
   Die Karte
   ------------------------------------------------------------------- */
/* DIE KARTE BEKOMMT EINE EIGENE FLÄCHE (15.09.2026).

   Bis heute hatte sie keine: Name, Rolle und der Weg zum Notizbrett
   standen direkt auf der Bühne — also auf einem Foto. Im Bildschirmfoto
   lag die Kopfzeile der Karte quer über dem Spicy-Media-
   Schriftzug, und der Knopf darunter über einer Chilischote.

   Das ist genau der Fall, für den die Kontrastmessung ihren dritten
   Ausgang hat („konnte nicht nachsehen"): Über einem Foto lässt sich
   Lesbarkeit nicht ausrechnen, weil das Dahinter von Bild zu Bild
   wechselt. Die Antwort darauf ist keine hellere Schrift, sondern eine
   deckende Fläche. */
.e-karte {
  margin: 26px 0 0; padding: 18px 20px;
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  border: 1px solid var(--rand);
}
.e-karte__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rand-hell);
}
.e-karte__name { margin: 0; font-size: 1.22rem; font-weight: 660; color: var(--text); }
.e-karte__rolle { font-size: .82rem; color: var(--text-still); }
.e-karte__stand { font-size: .8rem; color: var(--text-leise); margin-left: auto; }
.e-karte__brett { text-decoration: none; }

/* Die Abweichungen. Sie stehen oben und bekommen als Einzige einen
   Rahmen, der auffällt — sie sind der Grund, warum zwei Leute getrennt
   klicken. */
.e-abweichung {
  margin: 0 0 22px; padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--akzent) 32%, transparent);
  background: color-mix(in srgb, var(--akzent) 7%, var(--tinte));
}
.e-abweichung__titel { margin: 0 0 5px; font-size: 1rem; font-weight: 650; color: var(--text); }
.e-abweichung__satz { margin: 0 0 10px; font-size: .85rem; color: var(--text-leise); }
.e-abweichung__liste { margin: 0; padding-left: 1.1em; }
.e-abweichung__liste li { margin-bottom: 6px; }
.e-abweichung__punkt { display: block; font-size: .88rem; color: var(--text); }
.e-abweichung__gegen { display: block; font-size: .8rem; color: var(--text-leise); }

/* ---------------------------------------------------------------------
   Ein Block und seine Punkte
   ------------------------------------------------------------------- */
/* =====================================================================
   DIE KATEGORIEN LASSEN SICH AUF- UND ZUKLAPPEN (15.09.2026)

   Filipe: „ich will auch dass man die kategorien von den fragen, also
   die liste auf und zu drücken kann mit einem button."

   Achtundzwanzig Punkte offen sind rund zwei Meter Seite. Man scrollt,
   verliert die Stelle und macht es beim nächsten Mal gar nicht mehr.

   DER KOPF MUSS ZUGEKLAPPT ETWAS SAGEN, sonst klappt man einmal auf und
   danach nie wieder zu. Er trägt deshalb drei Dinge: den Namen, wie
   weit die Kategorie ist (3 / 7) und ob darin etwas hakt.
   ===================================================================== */
.e-bloecke__leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.e-bloecke__alle {
  font: inherit; font-size: .81rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: background .16s ease, color .16s ease;
}
.e-bloecke__alle:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.e-bloecke__alle:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   DIE STUFENLEITER (17.09.2026)

   Filipe: „wieso ist da immer noch nicht perfektionniert wie bei den
   anderen mit fortgeschritten und so."

   GEDECKT UND OHNE AMPEL, aus demselben Grund, aus dem die Stufe am
   einzelnen Punkt gedeckt ist (siehe .e-punkt__erwartung weiter
   unten): Sie sagt, ab WANN etwas erwartet wird -- nicht, wie gut
   jemand ist. Ein Farbverlauf von grün nach rot würde daraus eine
   Note machen, und keine Note über einem Menschen ist der wichtigste
   Einzelentscheid dieses ganzen Bereichs.

   Die gewählte Stufe bekommt deshalb mehr GEWICHT, nicht mehr Farbe.
   ------------------------------------------------------------------- */
.e-stufen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  /* Umgebrochen wird, wenn der Platz nicht reicht -- keine feste
     Schwelle. Genau daran ist die Kopfleiste am 06.09.2026 zweimal
     gescheitert: Eine Zahl, die zum sechsten Element nicht mehr
     passte, und niemand hat sie nachgerechnet. */
  margin-inline-start: auto;
}
.e-stufen__knopf {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-still);
  background: transparent;
  border: 1px solid var(--rand);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.e-stufen__knopf:hover {
  color: var(--text-leise);
  background: rgba(255, 255, 255, .04);
  border-color: var(--rand-hell);
}
.e-stufen__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Die gewählte Stufe: heller Text, kräftigerer Rand -- kein Farbwechsel. */
.e-stufen__knopf[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--text-still);
  background: rgba(255, 255, 255, .06);
}
.e-stufen__zahl {
  /* .72rem = 11,5 px -- die Grenze, die pruef-css-klassen bewacht.
     Darunter liest man Ziffern auf einem Handy nicht mehr, man ahnt
     sie. Und diese Zahl ist der Grund, warum man überhaupt klickt:
     Ein Filter, der auf eine leere Liste führt, sieht aus wie ein
     Fehler. */
  font-size: .72rem; font-weight: 700;
  min-width: 1.6em; padding: 1px 6px;
  border-radius: 999px; text-align: center;
  color: var(--text-still);
  background: rgba(255, 255, 255, .06);
}
.e-stufen__knopf[aria-pressed="true"] .e-stufen__zahl {
  color: var(--text-leise);
  background: rgba(255, 255, 255, .1);
}

/* Auf dem Handy gehört die Leiste unter den Knopf, nicht neben ihn --
   sonst quetschen sich fünf Knöpfe auf 40 % der Breite. */
@media (max-width: 640px) {
  .e-stufen { margin-inline-start: 0; width: 100%; }
}

.e-block {
  margin: 0 0 10px;
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
}
/* Offen bekommt der Kasten etwas mehr Gewicht -- man soll auf einen
   Blick sehen, welcher gerade aufgeschlagen ist. */
.e-block[data-offen="ja"] { border-color: var(--rand-hell); }

.e-block__zeile { margin: 0; }
.e-block__schalter {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  font: inherit;
  padding: 13px 15px; cursor: pointer;
  background: transparent; border: 0;
  color: var(--text);
}
.e-block__schalter:hover { background: rgba(255, 255, 255, .04); }
.e-block__schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

.e-block__pfeil {
  flex: 0 0 auto; width: 18px; height: 18px;
  fill: none; stroke: var(--text-still); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.e-block[data-offen="ja"] .e-block__pfeil { transform: rotate(90deg); stroke: var(--text-leise); }

.e-block__name {
  flex: 1 1 auto; font-size: 1rem; font-weight: 650; color: var(--text);
}
/* Der Stand. Zahlen in Tabellenbreite, damit 3 / 7 und 10 / 12
   untereinander nicht wackeln. */
.e-block__stand {
  flex: 0 0 auto; font-size: .82rem; color: var(--text-still);
  font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rand);
}
.e-block__stand[data-fertig="ja"] {
  color: #7fb08a; border-color: color-mix(in srgb, #668e6e 50%, transparent);
}
/* „2 × hakt" -- die einzige Stelle im Kopf, die eine Farbe bekommt.
   Sie ist auch der einzige Grund, eine zugeklappte Kategorie zu
   oeffnen, ohne dass man sie durchgehen will. */
.e-block__hakt {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 4px;
  font-size: .78rem; color: #d8a76a;
  font-variant-numeric: tabular-nums;
}
.e-block__hakt-wort { font-size: .78rem; }
/* Die Zahl steht in einem eigenen Feld, damit sie nachgezogen
   werden kann, ohne den ganzen Kopf neu zu bauen -- ein neu
   gebauter Kopf waere wieder eine Bewegung auf der Seite. */
.e-block__hakt-zahl { font-size: .78rem; font-variant-numeric: tabular-nums; }

.e-block__koerper { padding: 0 15px 13px; }
.e-block__titel { margin: 0 0 4px; font-size: 1.02rem; font-weight: 650; color: var(--text); }
.e-block__satz {
  margin: 0 0 12px; max-width: 64ch;
  font-size: .85rem; line-height: 1.6; color: var(--text-leise);
}

.e-punkt {
  margin: 0 0 9px; padding: 12px 15px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  /* Der linke Balken trägt die Antwort. Er ist die einzige Stelle, an
     der man beim Überfliegen sieht, wie eine Zeile steht — ohne dass
     die ganze Karte einfärbt. */
  border-left: 3px solid transparent;
}
.e-punkt[data-stufe="laeuft"]  { border-left-color: #668e6e; }
.e-punkt[data-stufe="waechst"] { border-left-color: #8ec9ff; }
.e-punkt[data-stufe="hakt"]    { border-left-color: #cc9451; }
.e-punkt[data-stufe="unklar"]  { border-left-color: var(--rand-hell); }
/* Verblasst: die Zeile tritt zurück, verschwindet aber nicht. Eine
   Akte, die heimlich vergisst, wäre schlimmer als eine, die alles
   behält. */
.e-punkt[data-verblasst="ja"] { opacity: .68; }

/* ---------------------------------------------------------------------
   KERN UND ROTATION auf der Seite „Wie geht's dir?" (19.09.2026)

   Zwei neue Zustaende, und beide sagen etwas Wahres statt etwas
   Huebsches:

     [data-alt="ja"]   Die Antwort steht noch vom letzten Mal. Sie
                       bleibt sichtbar -- sie ist ja nicht falsch, nur
                       alt -- zaehlt aber erst wieder, wenn man sie
                       bestaetigt. Ohne diese Kennzeichnung saehe eine
                       unbeantwortete Frage genauso aus wie eine
                       beantwortete, und genau daran ist die zweite
                       Runde bisher gescheitert.

     .e-punkt__marke   „jede Runde" an den fuenf festen Fragen. Wer
                       sieht, dass eine Frage immer kommt, liest sie
                       anders.

   KEINE SIGNALFARBE fuer „alt". Auf dieser Seite bedeutet Bernstein
   „da hakt es" -- wenn es daneben auch „noch nicht bestaetigt"
   bedeutete, bedeutete es bald gar nichts mehr. Es wird deshalb ueber
   einen gestrichelten Rand und eine ruhige Zeile gesagt, nicht ueber
   Farbe.
   ------------------------------------------------------------------- */
.e-punkt[data-alt="ja"] { border-left-style: dashed; }
.e-punkt__alt {
  margin: 8px 0 0; max-width: 62ch;
  font-size: .78rem; line-height: 1.55; color: var(--text-still);
  font-style: italic;
}
.e-punkt__marke {
  display: inline-block; margin: 2px 0 0;
  /* .72rem statt .68rem (19.09.2026): 10,88 px sind auch fuer ein
     Schild zu klein -- Grossbuchstaben und Sperrung machen es nicht
     lesbarer, nur breiter. .72rem ist die Groesse, die das Haus an
     seinen uebrigen Marken benutzt (b-verlauf__datum). */
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still);
  border: 1px solid var(--rand); border-radius: 999px;
  padding: 1px 8px;
}

.e-punkt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.e-punkt__titel { margin: 0; font-size: .95rem; font-weight: 620; color: var(--text); }
.e-punkt__erwartung {
  /* .75rem = 12 px und nicht .7rem = 11,2 px.

     pruef-css-klassen zaehlt die Stellen unter 11,5 px gegen eine
     Grundlinie und meldet JEDE neue -- hier war es eine. Elf Pixel in
     Grossbuchstaben mit Sperrung liest man auf einem Handy nicht mehr,
     man erkennt sie hoechstens wieder. Und das hier ist keine Zierde,
     sondern die Angabe, ab wann etwas ueberhaupt erwartet wird. */
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--rand-hell); border-radius: 999px;
  color: var(--text-still);
}
/* Die Erwartungsstufe ist KEINE Note — deshalb drei fast gleiche Töne
   und kein Ampelverlauf. Sie sagt, ab wann etwas erwartet wird, nicht
   wie gut jemand ist. */
.e-punkt__erwartung[data-erwartung="senior"] { color: var(--text-leise); }
.e-punkt__text {
  margin: 5px 0 10px; max-width: 66ch;
  font-size: .83rem; line-height: 1.6; color: var(--text-leise);
}

.e-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.e-wahl__knopf {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.e-wahl__zeichen { font-size: .9rem; line-height: 1; }
.e-wahl__knopf:hover:not(:disabled) { color: var(--text); }
.e-wahl__knopf[aria-pressed="true"] { color: var(--text); }
.e-wahl__knopf[data-stufe="laeuft"][aria-pressed="true"] {
  background: color-mix(in srgb, #668e6e 22%, transparent);
  border-color: color-mix(in srgb, #668e6e 55%, transparent);
}
.e-wahl__knopf[data-stufe="waechst"][aria-pressed="true"] {
  background: color-mix(in srgb, #8ec9ff 18%, transparent);
  border-color: color-mix(in srgb, #8ec9ff 50%, transparent);
}
.e-wahl__knopf[data-stufe="hakt"][aria-pressed="true"] {
  background: color-mix(in srgb, #cc9451 20%, transparent);
  border-color: color-mix(in srgb, #cc9451 55%, transparent);
}
.e-wahl__knopf[data-stufe="unklar"][aria-pressed="true"] {
  background: rgba(255, 255, 255, .06);
  border-color: var(--rand-hell);
}

.e-punkt__anlass {
  display: block; width: 100%; margin: 9px 0 0;
  font: inherit; font-size: .84rem; line-height: 1.5;
  padding: 8px 10px; resize: vertical;
  color: var(--text);
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--rand);
  transition: border-color .16s ease, background .16s ease;
}
.e-punkt__anlass::placeholder { color: var(--text-still); }
/* ES BLEIBT SICHTBAR, AUCH WENN ES NICHT GEBRAUCHT WIRD -- ein Feld,
   das erst aufklappt, kostet einen zweiten Blick, und genau an der
   Stelle hört man auf zu schreiben. Aber es tritt zurück. */
.e-punkt__anlass[data-noetig="nein"] {
  background: rgba(0, 0, 0, .18);
  border-color: color-mix(in srgb, var(--rand) 70%, transparent);
}
/* Und es meldet sich, sobald es gebraucht wird. */
.e-punkt__anlass[data-noetig="ja"] {
  border-color: color-mix(in srgb, #cc9451 55%, transparent);
  background: rgba(0, 0, 0, .3);
}
.e-punkt__anlass[data-noetig="ja"]::placeholder { color: #c99a62; }

.e-punkt__andere, .e-punkt__verdeckt, .e-punkt__wann {
  margin: 8px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-still);
}
.e-punkt__andere { color: var(--text-leise); }
/* Der verdeckte Stand: sichtbar, dass es ihn gibt — unsichtbar, was er
   ist. Ohne diese Zeile sähen „noch niemand" und „du darfst es noch
   nicht sehen" gleich aus, und das erste ist eine Auskunft, das zweite
   eine Täuschung. */
.e-punkt__verdeckt { font-style: italic; }

/* Die eigenen sechs Fragen. Sie stehen ganz unten und tragen als
   Einzige eine eigene Umrandung — sie gehören nicht in dieselbe Liste
   wie das, was über andere gesagt wird. */
.e-meins {
  margin: 34px 0 0; padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.e-meins__satz {
  margin: 0 0 16px; max-width: 62ch;
  font-size: .88rem; line-height: 1.65; color: var(--text-leise);
}
.e-punkt--meins { background: rgba(0, 0, 0, .2); }

/* ---------------------------------------------------------------------
   Talente — der Trichter
   ------------------------------------------------------------------- */
.t-trichter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.t-stufe {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 130px; padding: 11px 14px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  /* Der Trichter wird nach hinten leiser — nicht bunter. Fünf Farben
     für fünf Stufen wären fünf Bedeutungen, die keine sind. */
  border-top: 2px solid color-mix(in srgb, var(--akzent) 40%, transparent);
}
.t-stufe[data-stufe="probe"]  { border-top-color: color-mix(in srgb, var(--akzent) 65%, transparent); }
.t-stufe[data-stufe="imteam"] { border-top-color: #668e6e; }
.t-stufe__zahl { font-size: 1.5rem; font-weight: 660; color: var(--text); line-height: 1.1; }
.t-stufe__name { font-size: .79rem; color: var(--text-leise); }
.t-stufe__liegt { font-size: .74rem; color: #cc9451; margin-top: 3px; }

.t-liste { display: block; }
.t-karte {
  margin: 0 0 14px; padding: 16px 18px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-left: 3px solid transparent;
}
.t-karte[data-liegt="ja"] { border-left-color: #cc9451; }
.t-karte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.t-karte__titel { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--text); }
.t-karte__stufe {
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  color: var(--text-leise);
}
.t-karte__zeit { font-size: .78rem; color: var(--text-still); }
.t-karte__warn {
  font-size: .76rem; color: #cc9451; margin-left: auto;
}
.t-karte__wo, .t-karte__text {
  margin: 8px 0 0; max-width: 66ch;
  font-size: .85rem; line-height: 1.6; color: var(--text-leise);
}
.t-karte__wo { color: var(--text-still); font-size: .8rem; }

.t-schritt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 13px 0 0; padding: 11px 13px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--rand);
}
.t-schritt__satz { margin: 0; flex: 1 1 220px; font-size: .86rem; color: var(--text); }
.t-schritt__liegt { margin: 0; flex: 1 1 100%; font-size: .79rem; color: #cc9451; }

.t-karte__auf {
  margin: 12px 0 0; font: inherit; font-size: .8rem;
  padding: 5px 0; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--rand-hell);
  color: var(--text-leise);
}
.t-karte__auf:hover { color: var(--text); }

.t-gruppe { margin: 16px 0 0; }
.t-gruppe__titel { margin: 0 0 3px; font-size: .9rem; font-weight: 640; color: var(--text); }
.t-gruppe__satz {
  margin: 0 0 8px; max-width: 64ch;
  font-size: .8rem; line-height: 1.55; color: var(--text-still);
}
.t-merkmale { display: flex; flex-wrap: wrap; gap: 6px; }

.t-merkmal {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .8rem; text-align: left;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand-hell);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.t-merkmal__haken { font-size: .85rem; line-height: 1; color: var(--text-still); }
.t-merkmal:hover:not(:disabled) { color: var(--text); }
.t-merkmal[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  border-color: color-mix(in srgb, var(--akzent) 42%, transparent);
}
.t-merkmal[aria-pressed="true"] .t-merkmal__haken { color: var(--akzent); }
/* Warnzeichen: warm, nicht rot. Keines davon ist ein Nein. */
.t-merkmal[data-warnung="ja"][aria-pressed="true"] {
  background: color-mix(in srgb, #cc9451 20%, transparent);
  border-color: color-mix(in srgb, #cc9451 55%, transparent);
}
.t-merkmal[data-warnung="ja"][aria-pressed="true"] .t-merkmal__haken { color: #cc9451; }

.t-gruppe--warn .t-gruppe__titel { color: #cc9451; }

.t-leer {
  padding: 22px; text-align: center;
  border: 1px dashed var(--rand-hell);
  color: var(--text-leise);
}
.t-leer p { margin: 0 0 12px; max-width: 54ch; margin-inline: auto; font-size: .88rem; line-height: 1.6; }
.t-leer .schritt { text-decoration: none; }

/* ---------------------------------------------------------------------
   DER LEERE ZUSTAND ARBEITET (17.09.2026)

   Filipe: „mach dass da fertige sachen sind, aber nicht basich sonder
   hochwertig, profissionel bis zum letzten punkt verbunden."

   LINKSBÜNDIG STATT ZENTRIERT, sobald etwas zu lesen da ist: Eine
   zentrierte Liste liest sich schlecht -- das Auge sucht bei jeder
   Zeile den Anfang neu. Zentriert war richtig, solange dort ein
   einziger Satz stand; jetzt steht dort eine Aufzählung.
   ------------------------------------------------------------------- */
.t-leer:has(.t-leer__merkmale) {
  text-align: start;
  /* UND ER BRAUCHT EINEN GRUND. Gesehen im Bildschirmfoto, nicht in
     einer Zahl: Der Kasten hatte nur einen gestrichelten Rand, und das
     Spicy-Media-Motiv -- Chilischoten, Neonlicht, helle Stellen --
     schien voll durch den Text. Lesbar war das nicht, augenschonend
     erst recht nicht.

     SOLANGE DORT EIN SATZ STAND, ging es. Jetzt stehen dort drei
     Absätze, fünf Merkmale und zwei Knöpfe.

     DIE WARNUNG STAND 70 ZEILEN WEITER UNTEN, bei .t-fuss, und sie
     beschreibt exakt diesen Fehler ("Sie stand als einziger Text der
     Seite direkt auf der Bühne"). Ich habe sie gelesen und bin
     trotzdem hineingelaufen -- ein Kommentar, der vor einem Fehler
     warnt, verhindert ihn nicht. Gefunden hat es erst das Bild.

     Derselbe Wert wie bei .t-fuss, damit auf dieser Seite nicht zwei
     verschiedene Grautöne nebeneinander liegen. */
  padding: 20px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border-style: solid;
  border-color: var(--rand);
}
.t-leer:has(.t-leer__merkmale) p { margin-inline: 0; }

.t-leer__titel {
  margin: 0 0 8px;
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  color: var(--text);
}

.t-leer__merkmale {
  list-style: none; margin: 14px 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.t-leer__merkmal {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--rand-hell);
  background: rgba(255, 255, 255, .03);
}
.t-leer__merkmal-name {
  font-size: .84rem; font-weight: 600; color: var(--text-leise);
}
.t-leer__merkmal-zahl {
  /* .72rem = 11,5 px, die Grenze, die pruef-css-klassen bewacht.
     Darunter erkennt man Ziffern nur noch wieder, statt sie zu
     lesen. */
  font-size: .72rem; color: var(--text-still);
}

.t-leer__weg {
  /* Etwas abgesetzt: Das hier ist der Weg, nicht die Aufzählung. */
  padding-top: 12px; border-top: 1px solid var(--rand);
}

.t-leer__knoepfe {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
/* Der zweite Weg ist der leisere -- „Im Treff umsehen" ist ein
   Angebot, „Jemanden eintragen" der Schritt. Zwei gleich laute Knöpfe
   nebeneinander stellen eine Frage, statt einen Weg zu zeigen. */
.schritt--leise {
  color: var(--text-still);
  border-color: var(--rand);
  background: transparent;
}
.schritt--leise:hover { color: var(--text-leise); border-color: var(--rand-hell); }

/* DIE FUSSZEILE BRAUCHT DENSELBEN GRUND WIE ALLES ANDERE.

   Sie stand als einziger Text der Seite direkt auf der Bühne — dem
   Spicy-Media-Motiv mit Neonlicht und Chilischoten. Lesbar war es
   knapp; gemessen war es gar nicht, weil die Kontrastprüfung
   Elemente mit Kindern überspringt und hier ein Link darin steht.

   Das ist derselbe Befund wie am Nachmittag bei der Rechtetafel, nur
   eine Ecke weiter — und der Grund, warum in diesem Haus jede Fläche
   mit Text eine deckende Unterlage bekommt statt einer
   halbdurchsichtigen. */
.t-fuss {
  margin: 18px 0 0; padding: 11px 14px;
  font-size: .8rem; line-height: 1.55; color: var(--text-still);
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
}
.t-fuss a { color: var(--text-leise); }

@media (prefers-reduced-motion: reduce) {
  .e-person, .e-wahl__knopf, .t-merkmal,
  .e-bloecke__alle, .e-punkt__anlass { transition: none; }
  /* Der Pfeil DREHT SICH weiterhin -- er ist keine Verzierung,
     sondern die Auskunft "offen oder zu". Nur der Weg dorthin
     faellt weg. */
  .e-block__pfeil { transition: none; }
}

@media (max-width: 620px) {
  .e-karte__stand { margin-left: 0; }
  .t-karte__warn { margin-left: 0; }
  .e-punkt__text, .e-block__satz { font-size: .88rem; }
}

/* =====================================================================
   DER VORLAGENTEXT UND DIE EIGENE KARTE (11.09.2026)
   ===================================================================== */

.t-text {
  margin: 14px 0 0; padding: 15px 17px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--rand-hell);
}
.t-text__titel { margin: 0 0 5px; font-size: .95rem; font-weight: 640; color: var(--text); }
.t-text__satz {
  margin: 0 0 11px; max-width: 62ch;
  font-size: .82rem; line-height: 1.6; color: var(--text-leise);
}
.t-text__feld {
  display: block; width: 100%;
  font: inherit; font-size: .86rem; line-height: 1.65;
  padding: 11px 13px; resize: vertical;
  color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--rand);
}
.t-text__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

/* Zwei, die seit dem Bau der Seite ohne eigene Regel dastanden: der
   Knopf am naechsten Schritt und die Beschriftung eines Merkmals. Sie
   sahen richtig aus, weil .schritt und .t-merkmal sie getragen haben --
   aber wer eines davon umbaut, merkt es hier nicht. */
.t-schritt__knopf { margin-top: 2px; }
.t-schritt__text { margin-top: 2px; }
.t-merkmal__titel { text-align: left; line-height: 1.35; }

/* DIE EIGENE KARTE HAT KEINE KNOEPFE. Hier wird nichts gesetzt, hier
   wird gelesen -- deshalb ein anderer Grund als auf der Karte, auf der
   man klickt, und kein einziges anklickbares Feld darin. */
.e-meine {
  margin: 30px 0 0; padding: 20px 22px;
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.e-meine__satz {
  margin: 0 0 16px; max-width: 64ch;
  font-size: .88rem; line-height: 1.65; color: var(--text-leise);
}
.e-punkt--meine { background: rgba(0, 0, 0, .2); }
.e-meine__antworten { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.e-meine__antwort {
  font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  color: var(--text-leise);
  border: 1px solid var(--rand-hell);
}
.e-meine__antwort[data-stufe="laeuft"] {
  color: var(--text); border-color: color-mix(in srgb, #668e6e 55%, transparent);
}
.e-meine__antwort[data-stufe="waechst"] {
  color: var(--text); border-color: color-mix(in srgb, #8ec9ff 50%, transparent);
}
.e-meine__antwort[data-stufe="hakt"] {
  color: var(--text); border-color: color-mix(in srgb, #cc9451 55%, transparent);
}
/* „Darüber seid ihr euch nicht einig“ ist keine Warnung, sondern eine
   Einladung zu fragen – deshalb leise und ohne Farbe. */
.e-meine__uneinig { font-size: .78rem; color: var(--text-still); font-style: italic; }

/* =====================================================================
   WIE GEHT'S DIR? -- die eigene Seite (15.09.2026)
   ===================================================================== */

/* Der Takt steht ueber den Fragen: Wer hereinkommt, soll zuerst
   wissen, ob gerade etwas von ihm erwartet wird. */
.b-takt {
  margin: 0 0 22px; padding: 14px 17px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand-hell);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
/* Faellig heisst: es ist Zeit. Kein Alarm -- eine Einladung. */
.b-takt[data-lage="faellig"] { border-left-color: color-mix(in srgb, #8ec9ff 60%, transparent); }
.b-takt[data-lage="bereit"]  { border-left-color: color-mix(in srgb, #668e6e 60%, transparent); }
.b-takt__satz {
  margin: 0; flex: 1 1 24ch; max-width: 70ch;
  font-size: .86rem; line-height: 1.6; color: var(--text-leise);
}

.b-verlauf { margin: 34px 0 0; }
.b-verlauf__satz {
  margin: 0 0 14px; max-width: 68ch;
  font-size: .85rem; line-height: 1.6; color: var(--text-leise);
}
.b-verlauf__gitter {
  display: grid; gap: 4px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  overflow-x: auto;
}
.b-verlauf__zeile {
  display: grid;
  grid-template-columns: minmax(12ch, 1fr) repeat(auto-fit, minmax(2.4rem, 2.4rem));
  align-items: center; gap: 6px;
}
.b-verlauf__frage {
  font-size: .8rem; line-height: 1.35; color: var(--text-leise);
  padding-right: 8px;
}
.b-verlauf__datum {
  font-size: .72rem; color: var(--text-still); text-align: center;
  font-variant-numeric: tabular-nums;
}
.b-verlauf__zeile--kopf { margin-bottom: 4px; }
/* Das Zeichen sagt die Antwort, die Farbe verstaerkt sie nur -- wer
   Farben schlecht sieht, liest dasselbe Zeichen. */
.b-verlauf__punkt {
  display: grid; place-items: center;
  width: 2.2rem; height: 1.9rem;
  font-size: .9rem; font-weight: 700;
  border-radius: var(--radius);
  color: var(--text-still);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--rand);
}
.b-verlauf__punkt[data-stufe="laeuft"]  { color: #7fb08a; border-color: color-mix(in srgb, #668e6e 55%, transparent); }
.b-verlauf__punkt[data-stufe="waechst"] { color: #8ec9ff; border-color: color-mix(in srgb, #8ec9ff 45%, transparent); }
.b-verlauf__punkt[data-stufe="hakt"]    { color: #d8a76a; border-color: color-mix(in srgb, #cc9451 55%, transparent); }
.b-verlauf__punkt[data-stufe="leer"]    { opacity: .4; }

/* Der Verweis auf der Entwicklungsseite -- ruhig, er ist kein Angebot,
   sondern ein Hinweis. */
.e-meins--verweis { margin-top: 30px; }

@media (max-width: 560px) {
  .b-verlauf__zeile { grid-template-columns: minmax(9ch, 1fr) repeat(auto-fit, minmax(2rem, 2rem)); }
  .b-verlauf__punkt { width: 1.9rem; }
}

/* =====================================================================
   DER ÜBERGANG — Buddy und erste Schicht (15.09.2026)

   Er steht unter dem nächsten Schritt und sieht anders aus als der
   Rest der Karte: ein durchgehender linker Rand statt eines Kastens.
   Während einer Probe ist er die Karte, nicht eine Angabe darauf.

   Augenschonend heißt hier vor allem: keine zweite Signalfarbe. Das
   Orange auf dieser Seite bedeutet „liegt zu lange" — wenn der
   Übergang es auch benutzt, bedeutet es bald gar nichts mehr.
   ===================================================================== */
.t-uebergang {
  margin: 11px 0 0; padding: 12px 14px;
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  border: 1px solid var(--rand);
  border-left: 3px solid color-mix(in srgb, #668e6e 55%, transparent);
}
/* Kein Buddy mehr: die einzige Lage, die eine Farbe verdient. */
.t-uebergang[data-weg="ja"] { border-left-color: #cc9451; }

.t-uebergang__titel {
  margin: 0 0 5px; font-size: .95rem; font-weight: 640; color: var(--text);
}
.t-uebergang__zeile {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.t-uebergang__was {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
}
.t-uebergang__wer { font-size: .9rem; font-weight: 620; color: var(--text); }
.t-uebergang[data-weg="ja"] .t-uebergang__wer { color: #d8a76a; font-weight: 500; }

.t-uebergang__satz {
  margin: 7px 0 0; max-width: 66ch;
  font-size: .82rem; line-height: 1.6; color: var(--text-leise);
}
.t-uebergang__hinweis {
  margin: 8px 0 0; max-width: 66ch;
  font-size: .8rem; line-height: 1.55; color: #d8a76a;
}

.t-uebergang__tag { margin: 6px 0 0; padding-left: 18px; }
.t-uebergang__punkt {
  margin: 3px 0; max-width: 66ch;
  font-size: .81rem; line-height: 1.55; color: var(--text-leise);
}
.t-uebergang__punkt strong { color: var(--text); font-weight: 620; }

/* ---- Das Fragefeld ----------------------------------------------------
   Zwei Felder untereinander, nicht nebeneinander: Auf einem Handy
   werden aus zwei Spalten zwei zu schmale Spalten, und ein Datumsfeld,
   das nicht vollständig hineinpasst, öffnet den Gerätekalender an der
   falschen Stelle. */
.t-uebergang--frage { border-left-color: color-mix(in srgb, #8ec9ff 50%, transparent); }
.t-uebergang__feld {
  display: grid; gap: 4px;
  margin: 10px 0 0; max-width: 34ch;
}
.t-uebergang__wahl {
  font: inherit; font-size: .88rem;
  padding: 8px 10px;
  color: var(--text);
  background: var(--tinte);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  /* Der eigene Kalenderknopf des Browsers ist auf Dunkel hell gezeichnet.
     `color-scheme` sagt ihm, dass er dunkel zeichnen soll — sonst sitzt
     ein weißes Kästchen im dunklen Feld. */
  color-scheme: dark;
}
.t-uebergang__wahl:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
.t-uebergang__knoepfe {
  display: flex; flex-wrap: wrap; gap: 9px; margin: 13px 0 0;
}
.t-uebergang__aendern { margin: 11px 0 0; }

/* =====================================================================
   AUS DER BEOBACHTUNG WIRD EIN SCHRITT (15.09.2026)

   Die Zeile steht ganz unten an einem Punkt und ist absichtlich leise:
   Sie ist kein zweites Ergebnis neben den vier Knöpfen, sondern das,
   was aus einem von ihnen folgt. Bei einem Punkt, der läuft, ist sie
   gar nicht da — leer und ohne Rand, nicht als leerer Kasten.
   ===================================================================== */
.e-schritt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  margin: 9px 0 0;
}
.e-schritt:not([data-lage]) { display: none; }
.e-schritt[data-lage] {
  padding: 8px 11px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--rand);
  border-left: 2px solid var(--rand-hell);
}
.e-schritt[data-lage="laeuft"] { border-left-color: color-mix(in srgb, #8ec9ff 50%, transparent); }
.e-schritt[data-lage="durch"]  { border-left-color: color-mix(in srgb, #668e6e 60%, transparent); }

.e-schritt__was {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
}
.e-schritt__hin { font-size: .84rem; color: var(--text); }
.e-schritt__frist, .e-schritt__satz {
  font-size: .79rem; color: var(--text-leise);
}
.e-schritt__knopf { margin: 0; }

/* =====================================================================
   HIER STAND "WAS DEIN VERLAUF SAGT" (15.09.2026 bis 22.09.2026)
   ---------------------------------------------------------------------
   Zwanzig Regeln fuer den Block, der je FRAGE ein Resuemee zeigte.
   Filipe: „das resume unten auf jeder frage ... muss weg ich will ein
   ganzes gesamtresume."

   Am 22.09. wurde das Skript dazu entfernt -- die Gestaltung blieb
   stehen. Das ist nicht nur Ballast auf jeder Seite, sondern eine
   Falle: Wer spaeter `.b-analyse` im CSS findet, haelt den Block fuer
   lebendig und baut darauf auf. Gefunden hat es pruef-struktur
   ("NEUES totes CSS"), nicht der Blick.

   Das Gesamtresuemee steht jetzt unter `.b-fazit` weiter unten.
   ===================================================================== */

/* =====================================================================
   DIE PROBEZEIT (17.09.2026)

   Filipe: „wie talente bewertet werden, aufgaben bekommen, analysiert
   werden von vanvan und mir."

   EIGENER KLASSENNAME `t-pschritt` UND NICHT `t-schritt`.

   `.t-schritt` gibt es auf dieser Seite schon -- es ist die Zeile mit
   dem naechsten Schritt der Trichterstufe, gestaltet 550 Zeilen weiter
   oben. Meine Regeln standen SPAETER in derselben Datei und haetten
   sie schlicht ueberschrieben: aus einer Zeile mit Rahmen und
   Hintergrund waere eine ohne geworden.

   Gefunden hat das keine Ueberlegung, sondern das Nachzaehlen im
   Browser: 13 Elemente mit `.t-schritt`, obwohl der Probeplan zwoelf
   hat. Die dreizehnte war die fremde.

   RUHIG, OBWOHL ES EINE CHECKLISTE IST. Hier steht jemand auf dem
   Pruefstand; eine Wand aus roten und gruenen Haken macht aus einer
   Beobachtung ein Zeugnis. Es gibt genau EINE Farbe, und die kommt
   erst, wenn man entscheiden kann.
   ===================================================================== */

.t-probe {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  /* Deckend, nicht durchsichtig -- hinter der Seite liegt ein Motiv.
     `color-mix(..., transparent)` hat mich heute schon einmal
     erwischt. */
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.t-probe[data-reif="ja"] { border-color: color-mix(in srgb, var(--gut) 55%, var(--rand)); }

.t-probe__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.t-probe__titel { margin: 0; font-size: .95rem; font-weight: 700; }
.t-probe__stand { font-size: .82rem; opacity: .7; }

.t-probe__reif {
  margin: 0 0 12px; padding: 8px 10px;
  font-size: .88rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gut) 12%, transparent);
}
/* „Noch nicht entscheidbar" ist KEINE Warnung -- es ist eine Auskunft
   ueber uns. Deshalb grau und nicht bernstein. */
.t-probe__offen { margin: 0 0 12px; font-size: .84rem; opacity: .7; line-height: 1.5; }

.t-phase { margin: 0 0 14px; }
.t-phase:last-of-type { margin-bottom: 0; }
.t-phase__kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--rand);
  padding-top: 10px;
}
.t-phase__titel { margin: 0; font-size: .84rem; font-weight: 700; }
.t-phase__zeit { font-size: .78rem; opacity: .6; }
.t-phase__satz { margin: 3px 0 8px; font-size: .82rem; opacity: .72; line-height: 1.5; }

.t-pschritt { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }

.t-pschritt__haken {
  flex: none;
  width: 26px; height: 26px; margin-top: 2px;
  font: inherit; font-size: .84rem; line-height: 1;
  color: inherit;
  border: 1px solid var(--rand); border-radius: 7px;
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
  cursor: pointer;
}
.t-pschritt__haken:hover { border-color: color-mix(in srgb, var(--akzent) 60%, var(--rand)); }
.t-pschritt__haken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-pschritt[data-fertig="ja"] .t-pschritt__haken {
  border-color: color-mix(in srgb, var(--gut) 60%, var(--rand));
  background: color-mix(in srgb, var(--gut) 18%, transparent);
}

.t-pschritt__text { min-width: 0; }
.t-pschritt__titel {
  margin: 0; font-size: .88rem; font-weight: 600;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* WER IHN TUT. Klein, aber da -- ohne diese Angabe wandern in jeder
   Probezeit dieselben drei Schritte an niemanden. */
.t-pschritt__wer {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .03em;
  padding: 1px 7px; border-radius: 999px;
  opacity: .8;
  background: color-mix(in srgb, var(--rand) 45%, transparent);
}
.t-pschritt__satz { margin: 2px 0 0; font-size: .82rem; opacity: .78; line-height: 1.5; }
.t-pschritt__wofuer { margin: 2px 0 0; font-size: .78rem; opacity: .58; line-height: 1.45; }
.t-pschritt__von { margin: 3px 0 0; font-size: .76rem; opacity: .6; }

.t-probe__fragen {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gut) 40%, var(--rand));
}
.t-frage { margin: 0 0 10px; }
.t-frage__frage { margin: 0; font-size: .9rem; font-weight: 600; }
.t-frage__satz { margin: 2px 0 0; font-size: .8rem; opacity: .68; }
.t-probe__schluss { margin: 10px 0 0; font-size: .82rem; opacity: .75; line-height: 1.55; }

/* Wer ein Merkmal gesehen hat. Steht am Knopf, klein -- 27 Knoepfe
   nebeneinander vertragen keine zweite Zeile in Normalgroesse. */
.t-merkmal__wer { font-size: .72rem; opacity: .6; margin-inline-start: 6px; }

/* =====================================================================
   DER AUSGANG AUS DEM TRICHTER (17.09.2026)

   LEISE, UNTEN, OHNE ROT. Ein "Beenden" in Warnfarbe waere eine
   Drohung -- gemeint ist das Gegenteil: Eine Absage ist ein normaler,
   ordentlicher Ausgang, kein Schaden. Rot gehoert an Dinge, die
   schiefgehen, nicht an Entscheidungen, die getroffen werden.

   Erst der Satz als Knopf, dann das Feld. Zugeklappt nimmt der ganze
   Block eine Zeile.
   ===================================================================== */
.t-ausgang {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
}

.t-ausgang__auf {
  background: none; border: 0; padding: 2px 0;
  color: var(--text-still);
  font: inherit; font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-still) 45%, transparent);
}
.t-ausgang__auf:hover { color: var(--text-leise); }
.t-ausgang__auf:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px;
}

.t-ausgang__form { margin-top: 10px; }

/* Der Hinweis anstelle des Ausgangs -- an Karten, die schon im Team
   sind. Gleiche Groesse wie der leise Knopf daneben, damit er nicht
   wie eine Warnung wirkt. */
.t-ausgang__anderswo {
  margin: 0; font-size: .82rem; line-height: 1.55;
  color: var(--text-still);
}
.t-ausgang__anderswo a { color: var(--text-leise); }

.t-ausgang__satz {
  margin: 0 0 8px; font-size: .82rem; line-height: 1.55;
  color: var(--text-leise);
}

.t-ausgang__schild {
  display: block; margin-bottom: 4px;
  font-size: .82rem; font-weight: 600;
}

.t-ausgang__feld {
  width: 100%; box-sizing: border-box;
  /* Undurchsichtig gemischt, nicht mit `transparent` (17.09.2026):
     `color-mix(..., transparent)` laesst den Hintergrund durch -- auf
     einer Seite mit Wasserzeichen steht er dann im Text. */
  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
  color: var(--text);
  border: 1px solid var(--rand-hell);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit; font-size: .88rem; line-height: 1.5;
  resize: vertical;
}
.t-ausgang__feld:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
  border-color: var(--akzent);
}

.t-ausgang__knopf { margin-top: 8px; }

/* =====================================================================
   WAS BEENDET WURDE

   Eine eigene Sammlung unter der Arbeitsliste. Zugeklappt eine Zeile
   mit einer Zahl; aufgeklappt Karten, die deutlich stiller sind als
   die oben -- sie sind Gedaechtnis, keine Arbeit.
   ===================================================================== */
.t-beendet { margin-top: 26px; }

.t-beendet__auf {
  width: 100%;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-leise);
  font: inherit; font-size: .86rem;
  text-align: start;
  cursor: pointer;
}
.t-beendet__auf:hover { border-color: var(--rand-hell); color: var(--text); }
.t-beendet__auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.t-beendet__karte {
  margin-top: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  border-radius: 10px;
}

.t-beendet__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
}
.t-beendet__titel {
  margin: 0; font-size: .96rem; font-weight: 600;
  /* Nicht per `opacity` gedaempft -- das macht den Kasten durchsichtig
     und laesst den Hintergrund durch den Text. Eine leisere FARBE tut
     dasselbe, ohne die Flaeche anzufassen. */
  color: var(--text-leise);
}
.t-beendet__stufe { font-size: .8rem; color: var(--text-still); }
.t-beendet__zeit { font-size: .78rem; color: var(--text-still); margin-inline-start: auto; }

.t-beendet__grund {
  margin: 6px 0 0; font-size: .86rem; line-height: 1.55;
  color: var(--text);
}
.t-beendet__wer { margin: 4px 0 0; font-size: .76rem; color: var(--text-still); }

.t-beendet__wieder {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--rand-hell);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--text-leise);
  font: inherit; font-size: .8rem;
  cursor: pointer;
}
.t-beendet__wieder:hover { color: var(--text); border-color: var(--akzent); }
.t-beendet__wieder:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-beendet__wieder[disabled] { opacity: .5; cursor: default; }

/* =====================================================================
   WER AUS DEM TALENT GEWORDEN IST (17.09.2026)

   Der letzte Schritt des Trichters legt einen Zugang an. Bis heute war
   das eine Einbahnstrasse -- die Karte wusste hinterher nicht, wer
   daraus wurde. Jetzt steht es da, mit dem Weg zu den Zugaengen.
   ===================================================================== */
.t-person {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-top: 12px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 30%, var(--rand));
  border-radius: 10px;
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
}
.t-person__schild {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-still);
}
.t-person__name {
  font-size: .95rem; font-weight: 700;
  color: color-mix(in srgb, var(--gut, #79d1a2) 32%, #ffffff);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.t-person__name:hover { border-bottom-color: currentColor; }
.t-person__name:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.t-person__schon { font-size: .78rem; color: var(--text-leise); margin-inline-start: auto; }

/* Ein abgeschalteter Zugang sieht anders aus als ein laufender -- die
   Karte bleibt trotzdem stehen, sie erzaehlt ja, wie jemand gekommen
   ist. Gedaempft wird ueber die FARBE, nicht ueber `opacity`: Das
   macht den Kasten durchsichtig, und das Wasserzeichen der Seite
   scheint hindurch. */
.t-person[data-still="ja"] { border-color: var(--rand); }
.t-person[data-still="ja"] .t-person__name { color: var(--text-still); }
.t-person__still {
  font-size: .74rem;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--rand);
  color: var(--text-still);
}

/* =====================================================================
   WOMIT ER ANFAENGT

   Ein Angebot, keine Automatik: Was ungefragt Dinge anlegt, ist schwer
   wieder loszuwerden (Filipes Entscheidung bei der Live-Checkliste,
   und sie gilt hier genauso).
   ===================================================================== */
.t-start { margin-top: 10px; }

.t-start__auf {
  background: none; border: 0; padding: 2px 0;
  color: var(--text-leise);
  font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-leise) 45%, transparent);
}
.t-start__auf:hover { color: var(--text); }
.t-start__auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

.t-start__satz {
  margin: 8px 0 10px; font-size: .84rem; line-height: 1.55;
  color: var(--text-leise);
}

.t-start__reihe { display: flex; flex-wrap: wrap; gap: 8px; }

.t-start__kat {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid var(--rand-hell);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s ease;
}
.t-start__kat:hover { border-color: var(--akzent); }
.t-start__kat:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-start__kat[disabled] { opacity: .5; cursor: default; }
.t-start__kat-name { font-size: .86rem; font-weight: 600; }
.t-start__kat-zahl { font-size: .74rem; color: var(--text-still); }

.t-start__fertig {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 40%, var(--rand));
  border-radius: 10px;
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  font-size: .88rem;
}

/* Der Weg von der Talentkarte zur Entwicklungskarte. Die Stufe sagt
   zweimal „ab hier zaehlt die Entwicklungskarte" -- bis heute ohne
   einen Weg dorthin. */
.t-person__weiter {
  font-size: .8rem; font-weight: 600;
  color: var(--text-leise);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-leise) 40%, transparent);
}
.t-person__weiter:hover { color: var(--text); }
.t-person__weiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* =====================================================================
   WIE DIESER MENSCH GEKOMMEN IST (17.09.2026)

   Die Gegenrichtung: Wer eine Entwicklungskarte aufschlaegt, sieht
   Namen und Punkte -- aber nicht, dass derselbe Mensch vier Wochen
   beobachtet wurde. Beim ersten Beurteilen ist genau das die Frage.

   Eine Zeile, kein Kasten: Es ist Herkunft, nicht Inhalt.
   ===================================================================== */
.e-herkunft {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  font-size: .82rem;
}
.e-herkunft__schild {
  /* 11,52 px -- die Hausgrenze liegt bei 11,5. Der erste Anlauf stand
     auf .7rem (11,2) und wurde von pruef-css-klassen gefunden: eine
     Stelle mehr als die Grundlinie. Zurueckhaltend wird die Zeile ueber
     FARBE, nicht ueber Groesse. */
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-still);
}
.e-herkunft__weg {
  font-weight: 600;
  color: var(--text-leise);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-leise) 40%, transparent);
}
.e-herkunft__weg:hover { color: var(--text); }
.e-herkunft__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.e-herkunft__buddy { color: var(--text-still); }

/* =====================================================================
   WER SICH UM DIESEN KANDIDATEN KÜMMERT (17.09.2026)

   Die Standzeit oben sagt, DASS etwas liegt -- nicht, wer es aufheben
   sollte. Diese Zeile beantwortet die zweite Hälfte.

   Sie steht weit oben an der Karte, direkt unter dem Kopf: Wer die
   Liste überfliegt, sucht genau danach.
   ===================================================================== */
.t-kuemmern {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 10px 0 2px;
}

.t-kuemmern__knopf {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: color-mix(in srgb, var(--akzent) 30%, #ffffff);
  font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.t-kuemmern__knopf:hover { border-color: var(--akzent); color: #ffffff; }
.t-kuemmern__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.t-kuemmern[data-wer="ich"] .t-kuemmern__knopf {
  border-color: color-mix(in srgb, var(--gut, #79d1a2) 45%, var(--rand));
  color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
}
.t-kuemmern[data-wer="anderer"] .t-kuemmern__knopf {
  border-style: dashed;
  border-color: var(--rand);
  background: none;
  color: var(--text-still);
  cursor: default;
}
.t-kuemmern__seit { font-size: .78rem; color: var(--text-still); }



/* =====================================================================
   DIE FELDER DER BEFINDENSFRAGEN (20.09.2026)

   Filipe: „bei der frage wie geht es dir will ich viel mehr fragen aber
   kategorisiert und so. psychologisch hochprofessionell … es soll
   extrem übersichtlich sein und sich speziell anfühlen."

   ÜBERSICHTLICH HEISST HIER: RUHIG. Eine Seite, auf der jemand über
   sein Befinden nachdenkt, ist der falsche Ort für kräftige Farben und
   Kästen. Die Feldüberschrift ist deshalb kein Kasten, sondern eine
   Linie mit einem Zeichen davor — sie gliedert, ohne sich
   dazwischenzustellen. Augenschonend ist hier nicht nur eine
   Hausregel, sondern Teil der Sache.
   ===================================================================== */
.e-feld {
  margin: 30px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rand);
}
/* Das erste Feld braucht oben keinen Abstand -- sonst klafft zwischen
   der Taktzeile und der ersten Frage ein Loch, das wie ein Ladefehler
   aussieht.

   HIER STAND `#fragen > .e-feld:first-child` (entfernt 23.09.2026).
   Seit die Gruppen ihren eigenen Abschnitt haben, ist ein `.e-feld`
   kein direktes Kind von `#fragen` mehr -- die Regel konnte nicht mehr
   greifen. Nachgesehen: `.e-feld` wird im ganzen Haus nur an einer
   Stelle gebaut (befinden.js), und zwar immer in eine `.b-gruppe`.

   Dasselbe Missverstaendnis hat drei Zeilen weiter unten den
   Spaltenumbruch verursacht: `break-inside: avoid` galt fuer
   `#fragen > .e-punkt` und lief ebenfalls ins Leere. Eine Regel, die
   nichts mehr trifft, faellt nicht auf -- sie hoert einfach auf zu
   wirken. Deshalb weg statt stehengelassen.

   Den Abstand macht jetzt `.b-gruppe:first-of-type` (padding-top: 0)
   zusammen mit `.b-flaeche .e-feld` (margin: 0). */

.e-feld__wort {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0;
  font-size: .96rem; font-weight: 650;
  color: var(--text);
  letter-spacing: .01em;
}
.e-feld__zeichen {
  flex: 0 0 auto;
  font-size: .8rem;
  color: var(--akzent);
  /* Es ist ein Gliederungszeichen, kein Symbol mit Bedeutung -- im
     Markup steht deshalb aria-hidden, und hier bekommt es nur so viel
     Gewicht, dass das Auge die Überschrift findet. */
  opacity: .85;
}
.e-feld__text {
  margin: 4px 0 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--text-leise);
}

/* =====================================================================
   DIE EINE ZUSAMMENFASSUNG

   SIE DARF ANDERS AUSSEHEN ALS ALLES DARÜBER — sie ist das Einzige auf
   der Seite, das jemand FÜR die Person geschrieben hat, statt sie zu
   fragen. Das ist der eine Ort, an dem „speziell" nicht Dekoration
   ist, sondern Bedeutung trägt.

   Gemacht wird das mit einem sehr weichen Verlauf und einer Kante
   links — nicht mit Leuchten oder Farbe. Hausregel: augenschonend,
   gedeckt statt Neon. Wer hier gerade liest, dass fünf von acht Sachen
   haken, braucht keine fröhlichen Farben dazu.
   ===================================================================== */
.b-fazit {
  margin: 34px 0 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--akzent) 26%, var(--rand));
  border-left: 3px solid var(--akzent);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--akzent) 9%, transparent) 0%,
      transparent 62%),
    color-mix(in srgb, var(--flaeche) 80%, transparent);
}
.b-fazit .e-abschnitt { margin-top: 0; }

/* DER KOPFSATZ IST DER GRÖSSTE TEXT DER SEITE. Wer nur ihn liest, soll
   richtig informiert sein -- dieselbe Regel wie beim Satz über der
   Musteranalyse. */
.b-fazit__kopf {
  margin: 6px 0 0;
  font-size: 1.04rem; line-height: 1.6;
  color: var(--text);
}

.b-fazit__traegt { margin-top: 16px; }
.b-fazit__schild {
  margin: 0 0 6px;
  font-size: .74rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-leise);
}
.b-fazit__liste { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px; }
.b-fazit__punkt {
  position: relative;
  padding-left: 20px;
  font-size: .9rem; line-height: 1.5;
  color: var(--text);
}
/* Ein Haken, kein Aufzählungspunkt: Was trägt, ist etwas Erledigtes,
   und das sieht man an der Form schneller als am Wort. */
.b-fazit__punkt::before {
  content: "¹3";
  position: absolute; left: 0; top: 0;
  color: var(--gut, #5fc08a);
  font-weight: 700;
}

.b-fazit__thema {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--warn, #e0a355) 10%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--warn, #e0a355) 55%, transparent);
  font-size: .9rem; line-height: 1.55;
  color: var(--text);
}
.b-fazit__themafragen {
  display: inline-block; margin-top: 5px;
  font-size: .82rem; color: var(--text-leise);
}

.b-fazit__schluss {
  margin: 16px 0 0;
  font-size: .92rem; line-height: 1.6;
  color: var(--text);
}
.b-fazit__zahlen {
  margin: 12px 0 0;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
  .b-fazit { border: 2px solid CanvasText; }
  .e-feld { border-bottom: 1px solid CanvasText; }
}

/* =====================================================================
   VERTEILEN GEHOERT AUF DIESE SEITE (22.09.2026)
   =====================================================================

   Filipe: "ich will immer noch ... dass man bei aufgaben nur die
   aufgaben sieht und bei eure aufgaben die aufgaben verteilt."

   Ein Band, kein zweites Formular: Der Knopf fuehrt auf das
   Aufgabenbrett und bringt die gewaehlte Person mit. Zwei Formulare
   fuer dieselbe Sache waeren zwei Gelegenheiten, eines zu vergessen.
   ===================================================================== */
.e-verteilen {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein, 12px);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
}

.e-verteilen__titel {
  margin: 0;
  font-size: 1rem;
}

.e-verteilen__satz {
  margin: 3px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------
   DAS FORMULAR IM BAND (22.09.2026)
   ---------------------------------------------------------------------
   Filipe: „dieser buttion da soll nicht einen zu der seite aufgaben
   fuehren sondern da in dieser seite die aufgaben erstellen und
   vergeben koennen."

   ES LIEGT IM BAND UND NICHT DARUNTER. Das Band ist eine Flex-Reihe
   (Text links, Knopf rechts); `flex-basis: 100%` setzt das Formular
   als ganze Zeile darunter, ohne einen zweiten Kasten aufzumachen.
   Zwei Kaesten untereinander saehen aus wie zwei Sachen -- es ist
   aber eine: der Knopf und das, was er oeffnet.
   --------------------------------------------------------------------- */
.e-neu {
  flex: 1 1 100%;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 80%, transparent);
}

.e-neu__zeile { margin-bottom: 12px; }

.e-neu input[type="text"],
.e-neu input[type="date"],
.e-neu textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-klein, 10px);
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  line-height: 1.5;
}
.e-neu textarea { resize: vertical; }

/* Das Kalendersymbol kommt vom Browser und ist dunkel -- auf dunklem
   Grund unsichtbar. */
.e-neu input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .62;
  cursor: pointer;
}

.e-neu__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* ---------------------------------------------------------------------
   DIE AUFGABEN DER PERSON
   ---------------------------------------------------------------------
   „plus man soll die aufgaben hier in dieser seite auch sehen."

   EINE ZEILE JE AUFGABE, keine Karte. Karten haben auf dieser Seite
   schon die Menschen; noch eine Kartensorte daneben macht aus einer
   Uebersicht ein Mosaik. Eine Zeile liest sich von links nach rechts:
   was, wie weit, bis wann.
   --------------------------------------------------------------------- */
/* Eine Bestaetigung ist gruen, eine Absage rot. Ohne diese Regel
   stand „steht jetzt bei Rieke" in Warnrot -- und wer Bestaetigungen
   in Rot liest, ueberliest irgendwann die echte Warnung. */
.fehler[data-gut="ja"] { color: color-mix(in srgb, var(--k-gut) 85%, var(--text)); }

.e-aufgaben { margin: 0 0 22px; }

.e-aufgaben__satz {
  margin: 0 0 10px;
  font-size: .86rem;
  color: var(--text-leise);
}

.e-aufgaben__liste { display: flex; flex-direction: column; gap: 6px; }

.e-aufgaben__leer {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-leise);
}

.e-aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--e-stand, var(--rand-hell));
  border-radius: var(--radius-klein, 10px);
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--tempo, .18s) ease;
}
.e-aufgabe:hover { border-color: var(--rand-hell); }
.e-aufgabe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* DER STAND TRAEGT DIE FARBE AM LINKEN RAND -- aber nie NUR die
   Farbe: Das Wort steht daneben. Ein Zustand, der allein an der Farbe
   haengt, ist fuer jeden verloren, der Farben anders sieht. */
.e-aufgabe[data-status="offen"]       { --e-stand: var(--k-mittel); }
.e-aufgabe[data-status="arbeit"]      { --e-stand: var(--akzent); }
.e-aufgabe[data-status="review"]      { --e-stand: var(--violett); }
.e-aufgabe[data-status="erledigt"]    { --e-stand: var(--k-gut); }
.e-aufgabe[data-status="abgebrochen"] { --e-stand: var(--k-neutral); }

.e-aufgabe__titel { flex: 1 1 14rem; min-width: 0; font-size: .9rem; font-weight: 600; }
.e-aufgabe__stand {
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--e-stand) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--e-stand) 12%, transparent);
  color: var(--e-stand);
  font-size: .72rem; font-weight: 600;
}
.e-aufgabe__frist { font-size: .78rem; color: var(--text-leise); }

/* Was fertig ist, tritt zurueck -- es steht noch da, draengt sich aber
   nicht mehr vor das Offene. */
.e-aufgabe[data-status="erledigt"] .e-aufgabe__titel,
.e-aufgabe[data-status="abgebrochen"] .e-aufgabe__titel {
  font-weight: 400;
  color: var(--text-leise);
}

@media (forced-colors: active) {
  .e-neu { border-top: 1px solid CanvasText; }
  .e-aufgabe { border: 1px solid CanvasText; }
  .e-aufgabe__stand { border: 1px solid CanvasText; }
}

/* Der Knopf ist ein Link -- er sieht aus wie ein Knopf und muss am
   Finger auch eines sein. */
.e-verteilen .knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

@media (max-width: 560px) {
  .e-verteilen { flex-direction: column; align-items: stretch; }
  .e-verteilen .knopf { justify-content: center; }
}

/* =====================================================================
   „WIE GEHT'S DIR?" -- LESBAR UND KURZ (22.09.2026)
   =====================================================================

   Filipe: "auf der seite von der kategorie wie gehts die, sind die
   kacheln viel zu hell, man bekommt fast nichts gelesen, die sollen
   viel kraeftiger und dunkler sein. ich will dass auch alles viel
   uebersichtlicher ist, es ist alles so lang gezogen, muss ewig
   scrollen um alles zu sehen."

   BEIDES GEMESSEN, BEVOR ICH ETWAS ANGEFASST HABE:

     Kachelgrund   rgba(0, 0, 0, .2) -- also 80 % durchsichtig. Die
                   Seite traegt ein helles Buehnenbild (ein Husky, ein
                   Hase, viel Licht), und das schien mitten durch den
                   Text. Genau das heisst "man bekommt fast nichts
                   gelesen".
     Laenge        2487 px am Rechner, 3431 px am Handy -- 3,4
                   Bildschirme fuer neun Fragen.

   ZUERST DIE LESBARKEIT. Die Kacheln werden deckend. Nicht schwarz:
   Sie sollen sich vom Seitengrund abheben, sonst verschwimmt die eine
   Frage in die naechste. `--tinte` mit einem Hauch Weiss ist genau
   der Ton, den `.e-punkt` ohnehin hat -- die Variante hatte ihn nur
   wieder weggenommen.

   DANN DIE LAENGE. Gespart wird an Weissraum und Wiederholung, NICHT
   an Text: Die Erklaerung unter jeder Frage ist der Grund, warum man
   sie ehrlich beantwortet. Weg kommt die eigene Zeile fuer "JEDE
   RUNDE" -- sie steht jetzt neben der Frage, wo sie ohnehin hingehoert.
   ===================================================================== */

/* ---- 1. DECKEND, NICHT DURCHSICHTIG ---- */
.e-punkt--meins,
.e-punkt--meine {
  /* Deckend und einen Hauch heller als die Seite -- so hebt sich jede
     Frage ab, ohne dass das Bild durchschlaegt. */
  background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
  border-color: color-mix(in srgb, var(--rand-hell) 70%, transparent);
}

/* Auch die Kaesten drumherum: Takt, Felder und das Fazit standen mit
   demselben Problem auf demselben Bild. */
.b-takt,
.b-feld,
.b-fazit,
.e-meine {
  background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
}

/* ---- 2. KOMPAKTER, OHNE TEXT WEGZUNEHMEN ---- */
.e-punkt--meins,
.e-punkt--meine {
  margin-bottom: 7px;
  padding: 11px 14px;
}

/* Die Marke neben die Frage, nicht darunter. Sie ist eine Eigenschaft
   der Frage ("kommt jede Runde"), keine eigene Zeile. */
.e-punkt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.e-punkt__marke { margin-top: 0; }

/* Die Erklaerung darf enger stehen -- sie wird gelesen, nicht
   ueberflogen, und 1.5 ist dafuer genug. */
.e-punkt--meins .e-punkt__text,
.e-punkt--meine .e-punkt__text {
  margin: 5px 0 0;
  line-height: 1.5;
}

/* Die Antwortknoepfe ruecken naeher an die Frage. 44 px bleiben sie am
   Finger -- daran wird nicht gespart, das war der Fehler vom 21.09. */
.e-punkt__wahl { margin-top: 9px; gap: 7px; }

/* Die Ueberschrift eines Feldes braucht keine 30 px Luft davor, wenn
   darunter gleich die erste Frage steht. */
.b-feld { margin-top: 18px; }
.b-feld__titel { margin-bottom: 2px; }
.b-feld__satz { margin: 0 0 10px; }

/* ---- 3. VIER KNOEPFE, EINE REIHE (22.09.2026) ----
   ---------------------------------------------------------------------
   Gemessen bei 390 px: Die vier Antworten brauchten zwei Reihen, 94
   von 214 Pixeln je Frage. Bei neun Fragen sind das 450 Pixel
   Scrollweg, die nur aus Umbruch bestehen.

   Gerechnet: 390 px minus 28 Innenabstand = 362, minus drei Luecken a
   6 = 344, geteilt durch vier = 86 px je Knopf. "Kann ich nicht
   sagen" braucht mehr; "Unklar" nicht. Deshalb die Kurzform -- und
   nur dort, wo der Platz es verlangt.

   DIE LANGE FASSUNG BLEIBT FUER DAS VORLESEPROGRAMM (aria-label am
   Knopf). Wer hoert statt sieht, bekommt weiterhin den ganzen Satz. */
.e-wahl__kurz { display: none; }

@media (max-width: 560px) {
  .e-wahl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .e-wahl__knopf {
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    font-size: .74rem;
    min-width: 0;
  }
  .e-wahl__lang { display: none; }
  .e-wahl__kurz { display: inline; }
}

/* ---- 4. DIE MARKE NEBEN DIE FRAGE, NICHT DARUNTER ----
   Sie ist eine Eigenschaft der Frage ("kommt jede Runde"), keine
   eigene Zeile. Spart 22 px je Frage, ohne ein Wort wegzunehmen. */
.e-punkt--meins,
.e-punkt--meine {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 9px;
}
.e-punkt--meins > .e-punkt__titel,
.e-punkt--meine > .e-punkt__titel { grid-column: 1; }
.e-punkt--meins > .e-punkt__marke,
.e-punkt--meine > .e-punkt__marke { grid-column: 2; justify-self: start; }
.e-punkt--meins > *:not(.e-punkt__titel):not(.e-punkt__marke),
.e-punkt--meine > *:not(.e-punkt__titel):not(.e-punkt__marke) {
  grid-column: 1 / -1;
}

/* ---- 5. ZWEI SPALTEN, WO PLATZ IST ----
   Am Rechner stehen neun Fragen untereinander und fuellen zweieinhalb
   Bildschirme -- bei 880 px Inhaltsbreite und Fragen, die keine 400
   brauchen. Zwei Spalten halbieren den Weg, ohne eine Frage zu
   verstecken.

   ENTFERNT AM 23.09.2026, UND ES WAR DIE SPALTENREGEL SELBST.
   ---------------------------------------------------------------
   Hier stand `columns: 2` auf `#fragen` — dem Behaelter um ALLES.
   Solange darin nur flache Fragen lagen, ging das auf. Seit die
   Fragen in ihren Gruppen stecken (`.b-gruppe`), reisst der
   Spaltenumbruch mitten durch eine GRUPPE: Ihr Kopf bleibt links
   unten, ihre Fragen wandern nach rechts oben — und ueber den
   Antwortknoepfen rechts steht dann die Ueberschrift der NAECHSTEN
   Gruppe. Genau das war auf Filipes Bildschirmfoto zu sehen.

   `break-inside: avoid` haette das nicht gerettet: Es galt fuer
   `#fragen > .e-punkt`, und ein `.e-punkt` ist seit dem Umbau kein
   direktes Kind von `#fragen` mehr. Die Regel lief ins Leere, und
   nichts hielt den Umbruch auf.

   Zwei Spalten gibt es weiterhin — aber INNERHALB einer Gruppe,
   ueber `.b-gruppe__fragen` (Abschnitt „Eine Flaeche" weiter unten).
   Das ist ein Raster statt eines Spaltensatzes: Es kann per
   Bauart nichts zerschneiden, weil es Kaesten verteilt und keinen
   Textfluss umbricht. Damit ist die Ursache weg und nicht nur der
   sichtbare Schaden ueberklebt.

   `.b-feld__liste` stand in derselben Regel und kommt in keiner
   Seite und keinem Skript des Hauses mehr vor — nachgesehen, nicht
   vermutet. Sie faellt deshalb mit weg, statt als toter Name
   stehenzubleiben, den beim naechsten Mal jemand fuer benutzt
   haelt. */

/* Die Marke bricht nicht um -- "JEDE RUNDE" auf zwei Zeilen macht die
   Kachel hoeher als die Frage daneben und sieht aus wie ein Fehler.
   Der Titel darf dafuer schrumpfen; er bricht ohnehin sauber. */
.e-punkt--meins > .e-punkt__marke,
.e-punkt--meine > .e-punkt__marke { white-space: nowrap; }
.e-punkt--meins > .e-punkt__titel,
.e-punkt--meine > .e-punkt__titel { min-width: 0; }

/* =====================================================================
   DER NAECHSTE SCHRITT UND DAS TEAM (22.09.2026)
   =====================================================================
   Filipe: „ich will ein ganzes gesamtresume was die leute animiert und
   pusht immer und mega geile super team lösungen findet aber auch
   individuel so dass jeder sich selber auch verbessert und steigert
   fürs team."

   WARUM DER SCHRITT EINEN EIGENEN KASTEN BEKOMMT.
   Vorher stand unter jeder der neun Fragen ein Ratschlag — neun
   gleichrangige Kästen untereinander. Genau das meint „man wird ja
   bekloppt": Wenn alles gleich wichtig aussieht, ist nichts wichtig,
   und man liest keinen davon.

   Jetzt gibt es EINEN, und er sieht auch so aus: eigener Grund,
   eigene Kante, die Überschrift als Ansage statt als Etikett. Der
   Forschungssatz steht kleiner darunter — er begründet, er belehrt
   nicht.
   --------------------------------------------------------------------- */
.b-fazit__schritt {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-klein, 12px);
  border-left: 3px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

.b-fazit__schritt-titel {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
}

.b-fazit__schritt-was {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
}

/* Der Forschungssatz: kleiner, ruhiger, mit Abstand. Er ist der Grund,
   nicht die Anweisung — und wer ihn überspringt, hat trotzdem alles
   Nötige gelesen. */
.b-fazit__schritt-welt {
  margin: 10px 0 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 62ch;
}

/* DER TEAM-SATZ steht bewusst NICHT in einem Kasten.
   Zwei Kästen hintereinander lesen sich als Liste, und dann ist der
   Team-Teil wieder eine Aufgabe unter anderen. So ist er ein Satz —
   der letzte Gedanke vor dem Schluss. */
.b-fazit__team {
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
}

.b-fazit__quelle {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-still);
}

.b-fazit__quelle-link {
  color: var(--text-leise);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.b-fazit__quelle-link:hover { color: var(--text); }

@media (forced-colors: active) {
  .b-fazit__schritt { border: 1px solid CanvasText; }
  .b-fazit__team { border-left: 2px solid CanvasText; }
}

/* =====================================================================
   DIE AUSWAHL IM VERTEIL-FORMULAR (23.09.2026)
   =====================================================================

   Filipe: „diese kachel soll viel geiler sein, also alles was drin ist
   soll viel geiler gestaltet sein, viel hochwertiger, viel
   profissineller, auch die möglichkeit alle auf einmal auszuwählen und
   so. mach es hoch krass profissionel, übersichtlich"

   Vorher: ein Kästchen und ein Name je Zeile, untereinander. Bei sechs
   Leuten sechs gleiche Zeilen — man liest alle, um eine zu finden, und
   auf dem Handy kostet das sechs Bildschirmzeilen.

   Jetzt eine Karte je Person, im Raster. Drei Dinge machen den
   Unterschied zwischen „Liste" und „Auswahl":

     1. DIE GANZE KARTE IST DAS ZIEL, nicht das Kästchen darin. Auf
        einem Handy ist ein Kästchen 20 px breit, eine Karte 200.
     2. DIE GEWÄHLTE KARTE SIEHT ANDERS AUS — Rahmen und Fläche in der
        Akzentfarbe. Ein Haken allein ist bei acht Karten zu wenig.
     3. DER ZÄHLER OBEN sagt, wie viele es sind. Ohne ihn zählt man.
   ===================================================================== */
.e-fuer__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 14px;
  margin: 0 0 8px;
}
.e-fuer__rechts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-left: auto;
}
.e-fuer__zahl {
  font-size: .78rem; font-weight: 650;
  color: color-mix(in srgb, var(--akzent) 72%, #ffffff);
}
/* Steht niemand zur Wahl, ist der Satz eine Auskunft und keine Zahl --
   dann tritt er zurück. */
.e-fuer__zahl[data-leer="ja"] { color: var(--text-still); font-weight: 600; }

/* ---- Die Schnellwahl ------------------------------------------------- */
.e-fuer__schnell { display: flex; flex-wrap: wrap; gap: 6px; }
.e-fuer__kurz {
  padding: 5px 11px; border-radius: 999px;
  font: inherit; font-size: .76rem; font-weight: 600;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand);
  cursor: pointer;
  /* 32 px hoch über die Zeilenhöhe, nicht über eine feste Höhe: So
     wächst der Knopf mit, wenn jemand die Schrift größer stellt. */
  line-height: 1.6; min-height: 32px;
  display: inline-flex; align-items: center;
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.e-fuer__kurz:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 48%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}
.e-fuer__kurz:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---- Die Karten ------------------------------------------------------ */
.e-fuer__leute {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  margin: 0 0 12px;
}
.e-fuer__karte {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-klein, 12px);
  border: 1px solid var(--rand);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  /* 44 px ist das Mindestmaß für einen Daumen (WCAG 2.5.8 verlangt
     24, das Haus nimmt 44). Über min-height, damit lange Namen die
     Karte wachsen lassen statt sie zu sprengen. */
  min-height: 52px;
  transition: border-color var(--tempo), background var(--tempo);
}
.e-fuer__karte:hover {
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  background: rgba(255, 255, 255, .06);
}
/* GEWÄHLT SIEHT ANDERS AUS. `:has()` statt einer Klasse aus dem
   Skript: Der Zustand steht schon im Kästchen -- ihn zusätzlich als
   Klasse zu führen wären zwei Wahrheiten, und eine davon läuft
   irgendwann nach. */
.e-fuer__karte:has(input:checked) {
  border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
  background: color-mix(in srgb, var(--akzent) 13%, transparent);
}
.e-fuer__karte:has(input:focus-visible) {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}
.e-fuer__karte input { width: 19px; height: 19px; flex: none; cursor: pointer; }

.e-fuer__zeichen {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  color: color-mix(in srgb, var(--akzent) 78%, #ffffff);
  background: color-mix(in srgb, var(--akzent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
}
.e-fuer__text { display: grid; gap: 1px; min-width: 0; }
.e-fuer__name {
  font-size: .9rem; font-weight: 650; color: var(--text);
  overflow-wrap: anywhere;
}
.e-fuer__rolle { font-size: .74rem; color: var(--text-still); }

@media (forced-colors: active) {
  .e-fuer__karte { border: 1px solid CanvasText; }
  .e-fuer__karte:has(input:checked) { border: 2px solid Highlight; }
  .e-fuer__kurz { border: 1px solid CanvasText; }
}

/* =====================================================================
   „WIE GEHT'S DIR?" IST EINE FLÄCHE (23.09.2026)
   =====================================================================

   Filipe: „ich will dass diese seite viel übersichtlicher aussieht,
   es soll eine riesßen kachel sein wo alles viel besser und geiler
   aussieht."

   ---------------------------------------------------------------------
   WAS AUF SEINEM BILDSCHIRMFOTO WIRKLICH SCHIEFLIEGT

   Die Fragen lagen als einzelne Kacheln in zwei Spalten, und die
   Gruppenköpfe lagen FLACH dazwischen — im selben Raster. Dadurch
   rutschte der Kopf einer Gruppe neben die Fragen einer anderen:
   „Miteinander" steht links unten neben den Fragen von „Klarheit &
   Rückhalt".

   Das ist nicht nur unruhig, es ist falsch. Eine Überschrift, die
   neben fremdem Inhalt steht, ordnet den falschen zu.

   Deshalb gehört jetzt jede Gruppe zusammen (ein `<section>` mit Kopf
   und eigenem Raster, gebaut in befinden.js), und alle Gruppen liegen
   in EINER Fläche. Getrennt wird durch eine Linie statt durch eine
   Lücke — dieselbe Entscheidung wie bei den Regeln am 22.09.
   ===================================================================== */
.b-flaeche {
  position: relative;
  margin: 0 0 18px;
  padding: 18px 22px 22px;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--akzent) 9%, transparent) 0%,
      color-mix(in srgb, var(--akzent) 3%, transparent) 18%,
      transparent 34%),
    color-mix(in srgb, var(--tinte, #0a0f18) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
}
@media (max-width: 620px) { .b-flaeche { padding: 14px 14px 16px; } }

/* ---- Der eigene Stand ------------------------------------------------ */
.b-stand { margin: 0 0 18px; }
.b-stand__bahn {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.b-stand__fuellung {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--akzent) 90%, #ffffff),
    color-mix(in srgb, var(--akzent) 55%, transparent));
  transition: width var(--tempo, .2s) ease;
}
.b-stand__wort {
  margin: 7px 0 0;
  font-size: .8rem; font-weight: 600;
  color: var(--text-leise);
}
/* Fertig ist eine gute Nachricht und darf so aussehen. */
.b-stand[data-fertig="ja"] .b-stand__wort {
  color: color-mix(in srgb, var(--scout-haupt, #8fd6a6) 76%, #ffffff);
}
@media (prefers-reduced-motion: reduce) {
  .b-stand__fuellung { transition: none; }
}

/* ---- Die Gruppen darin ----------------------------------------------- */
.b-gruppe {
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  margin-top: 20px;
}
.b-gruppe:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

/* Der Kopf bekommt einen Balken in der Farbe seiner Gruppe. Die
   Nummer setzt befinden.js als `--gruppe-nr`; die Farbe entsteht
   daraus, nicht aus einer Liste im Skript — sechs Farbnamen dort
   wären eine zweite Farbliste neben dem Haus. */
.b-flaeche .e-feld {
  display: grid; gap: 3px;
  margin: 0 0 12px; padding: 0 0 0 13px;
  position: relative;
}
.b-flaeche .e-feld::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg,
    hsl(calc(var(--gruppe-nr, 0) * 47 + 190) 70% 68%),
    hsl(calc(var(--gruppe-nr, 0) * 47 + 190) 70% 68% / .25));
}
.b-flaeche .e-feld__wort {
  margin: 0; font-size: 1.04rem; font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.b-flaeche .e-feld__text {
  margin: 0; font-size: .86rem; color: var(--text-leise); line-height: 1.55;
}

/* Die Fragen einer Gruppe nebeneinander -- aber IMMER innerhalb ihrer
   Gruppe, nie über sie hinaus. Genau das ging vorher schief. */
.b-gruppe__fragen {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  align-items: start;
}

/* Die Frage ist in der Fläche keine eigene Kachel mehr, sondern ein
   flaches Feld: ein Rahmen, kein Kasten mit Schatten und Fase. Zwölf
   Kacheln in einer Kachel sind eine Kachel zu viel. */
.b-flaeche .e-punkt {
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  box-shadow: none;
  clip-path: none;
}
/* Beantwortet sieht man an der linken Kante -- ohne die muss man die
   Knöpfe lesen, um zu wissen, ob schon etwas dasteht. */
.b-flaeche .e-punkt[data-stufe] {
  border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
}

@media (forced-colors: active) {
  .b-flaeche { border: 1px solid CanvasText; }
  .b-gruppe { border-top: 1px solid CanvasText; }
  .b-flaeche .e-feld::before { background: CanvasText; }
}