/* ===========================================================================
   BalletSports · Gestaltung
   Baustein 0

   Zwei Ansichten, beide in den Markenfarben von balletsports.de:

     .pult   Überblick. Dunkle Leiste links, Listen mit farbigem Streifen.
             Startseite. Zeigt, was offen ist.
     .saal   Lesen und Antworten. Heller Bogen, ruhig, eine Sache zur Zeit.

   Hell und dunkel laufen über data-mode am <html>. Es gibt keine zwei
   Stylesheets, nur zwei Sätze von Variablen. Eine Farbe wird nirgends
   direkt geschrieben, immer nur als Variable. Das ist der Grund, warum
   ein Umbau der Gestaltung später billig ist.
   =========================================================================== */

/* --- Markenpalette, unveränderlich ---------------------------------------- */
:root {
  --marke-navy:        #17324E;
  --marke-navy-2:      #22425F;
  --marke-navy-soft:   #63798B;
  --marke-hell:      #F5F9FB;
  --marke-creme:      #E9F2F6;
  --marke-linie:       #E3EDF1;
  --marke-tuerkis:       #008995;
  --marke-tuerkis-tief:  #00707A;
  --marke-gelb:       #FFD039;
  --marke-gelb-blass:  #FFF4D6;
  --marke-gruen:      #25D366;

  --serif:  ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", Nunito, "Avenir Next", system-ui, sans-serif;
  --sans:   ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", Nunito, "Avenir Next", system-ui, -apple-system, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 12px;
}

/* --- Ansicht „Saal": hell -------------------------------------------------- */
.saal {
  --ink:#17324E; --ink2:#63798B; --ink3:#8FA3B2;
  --paper:#F5F9FB; --sheet:#ffffff;
  --rule:rgba(23,50,78,.13); --rule2:rgba(23,50,78,.07);
  --accent:#008995; --accent-soft:#E5F7F9; --akzent:#008995;
  --ok:#1F7A6A; --ok-soft:#E2F4F0;
  --warn:#8A6200; --warn-soft:#FFF4D6;
  --alarm:#BC3B32; --alarm-soft:#FDEDEB;

  /* UND DIESELBEN FARBEN UNTER DEN NAMEN DES PULTS.
     Unten bei `.pult` steht dasselbe andersherum. Bisher ging es nur in
     eine Richtung, und deshalb hat derselbe Fehler zweimal zugeschlagen:
     ein `var(--acc-soft)` auf einer Saal-Seite war eine leere Variable —
     erst bei den Tafeln, dann bei den Formularen, wo die
     Zwischenüberschriften ihre Tönung verloren.
     Jetzt gilt in beiden Ansichten jeder der beiden Namen. */
  --fg:var(--ink); --fg2:var(--ink2); --fg3:var(--ink3);
  --bg:var(--paper);
  --line:var(--rule); --line2:var(--rule2);
  --acc:var(--accent); --acc-soft:var(--accent-soft);
  --bad:var(--alarm); --bad-soft:var(--alarm-soft);
}
[data-mode="dark"] .saal {
  --ink:#F5F9FB; --ink2:#A8BCC9; --ink3:#7C8FA0;
  --paper:#0E1C2B; --sheet:#152638;
  --rule:rgba(245,249,251,.14); --rule2:rgba(245,249,251,.07);
  --accent:#4CC7D2; --accent-soft:#10303A; --akzent:#4CC7D2;
  --ok:#6FC7B4; --ok-soft:#10302B;
  --warn:#FFD039; --warn-soft:#332A10;
  --alarm:#F08A80; --alarm-soft:#3A1C19;

  /* Im Dunkeln dieselbe Spiegelung, sonst greift sie genau da nicht,
     wo ein zu blasser Ton am meisten auffaellt. */
  --fg:var(--ink); --fg2:var(--ink2); --fg3:var(--ink3);
  --bg:var(--paper);
  --line:var(--rule); --line2:var(--rule2);
  --acc:var(--accent); --acc-soft:var(--accent-soft);
  --bad:var(--alarm); --bad-soft:var(--alarm-soft);
}

/* --- Ansicht „Pult": hell -------------------------------------------------- */
.pult {
  --bg:#F5F9FB; --sheet:#FFFFFF; --fg:#17324E; --fg2:#63798B; --fg3:#8FA3B2;
  --line:rgba(23,50,78,.13); --line2:rgba(23,50,78,.07);
  --rail:#FFFFFF; --rail-fg:#17324E; --rail-fg2:#8FA3B2; --rail-line:rgba(23,50,78,.10);
  --acc:#008995; --acc-soft:#E5F7F9; --akzent:#008995;
  --ok:#1F7A6A; --ok-soft:#E2F4F0;
  --warn:#C08A1E; --warn-soft:#FFF4D6;
  --bad:#BC3B32; --bad-soft:#FDEDEB;
  --ocker:#008995;
  /* Streifen links an jeder Zeile */
  --neu:#008995; --wartet:#E8B21E; --problem:#BC3B32;

  /* DIESELBEN FARBEN UNTER DEN NAMEN DER SAAL-ANSICHT.
     Der Saal heisst sie `ink/rule/accent/paper`, das Pult
     `fg/line/acc/bg`. Wer etwas fuer das Pult gestaltet und aus
     Gewohnheit `var(--ink2)` schreibt, bekam bisher eine leere
     Variable — und damit tiefschwarzen Text ohne Abstufung und
     unsichtbare Haarlinien. Genau das ist bei den Tafeln passiert.
     Beide Namen zeigen jetzt auf dieselbe Farbe. */
  --ink:var(--fg); --ink2:var(--fg2); --ink3:var(--fg3);
  --paper:var(--bg);
  --rule:var(--line); --rule2:var(--line2);
  --accent:var(--acc); --accent-soft:var(--acc-soft);
  --alarm:var(--bad); --alarm-soft:var(--bad-soft);
}
[data-mode="dark"] .pult {
  --bg:#0B1724; --sheet:#132235; --fg:#F5F9FB; --fg2:#A8BCC9; --fg3:#7C8FA0;
  --line:rgba(245,249,251,.13); --line2:rgba(245,249,251,.06);
  --rail:#07111B; --rail-fg:#C7D8E4; --rail-fg2:#7C8FA0; --rail-line:rgba(245,249,251,.09);
  /* Das Orange als Fläche nicht als Volltonbraun mischen, sondern
     dünn über das Navy legen. Ein deckendes #3A2A1C sieht neben
     den blauen Karten aus wie Schmutz. */
  --acc:#F5AF71; --acc-soft:rgba(245,175,113,.13); --akzent:#F5AF71;
  --ok:#6FC7B4; --ok-soft:#10302B;
  --warn:#FFD039; --warn-soft:#332A10;
  --bad:#F08A80; --bad-soft:#3A1C19;
  /* Im Dunkeln teilen sich zwei Markenfarben die Arbeit:
     Rosé zeigt, was Aufmerksamkeit braucht. Ocker trägt die ruhige
     Struktur — Überschriften und Kennzahlen. */
  --ocker:#FFD039;
  --neu:#4CC7D2; --wartet:#FFD039; --problem:#F08A80;

  /* siehe oben: beide Namen, eine Farbe. */
  --ink:var(--fg); --ink2:var(--fg2); --ink3:var(--fg3);
  --paper:var(--bg);
  --rule:var(--line); --rule2:var(--line2);
  --accent:var(--acc); --accent-soft:var(--acc-soft);
  --alarm:var(--bad); --alarm-soft:var(--bad-soft);
}

/* --- Grundlagen ----------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ===========================================================================
   PULT
   =========================================================================== */
.pult {
  background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: 192px 1fr 254px;
  min-height: 100vh;
}
@media (max-width: 1100px) { .pult { grid-template-columns: 192px 1fr; } .pult .neben { display:none; } }
@media (max-width: 760px)  { .pult { grid-template-columns: 1fr; } .pult .leiste { display:none; } }

/* Eine Seite, die die ganze Breite braucht: die Tafel. Sechs Spalten und
   eine Nebenspalte gehen nicht zusammen — zwei Spalten fielen rechts
   heraus, und eine Tafel, von der man zwei Spalten nicht sieht, ist
   keine. Die Nebenspalte faellt weg, ihr Inhalt steht ueber dem Brett. */
.pult.breit { grid-template-columns: 192px 1fr; }
.pult.breit .neben { display:none; }

/* Leiste links */
.leiste {
  background: var(--rail); color: var(--rail-fg);
  padding: 22px 0 18px; display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.marke { padding: 0 20px 20px; border-bottom:1px solid var(--rail-line); margin-bottom:16px; }
.marke .zeichen { display:flex; align-items:center; gap:9px; }
.marke .bild { width:24px; height:24px; object-fit:contain; flex:none; display:block; }
.marke .wort { font-family: var(--serif); font-size:21px; font-weight:700; color:var(--rail-fg);
               letter-spacing:.01em; line-height:1.1; }
.marke .ort  { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
               color:var(--rail-fg2); margin-top:5px; }
/* Im Dunkeln trägt auch der Standort unter dem Schriftzug den Akzent. */
[data-mode="dark"] .marke .ort { color:var(--marke-gelb); }
.leiste nav { flex:1; }
.leiste .gruppe { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
                  color:var(--rail-fg2); padding:14px 20px 5px; font-weight:700; }
.leiste a { display:flex; justify-content:space-between; align-items:center; gap:8px;
            padding:9px 12px; margin:2px 12px; text-decoration:none; color:var(--rail-fg);
            font-size:14px; border-radius:11px; }
.leiste a:hover { background:var(--acc-soft); }
.leiste a.an { color:var(--acc); background:var(--acc-soft); font-weight:650; }
.leiste a .zahl { font-family:var(--mono); font-size:11px; color:var(--rail-fg2); }
.leiste a.an .zahl { color:var(--akzent); }
.leiste .fuss { padding:14px 20px 0; border-top:1px solid var(--rail-line); margin-top:12px;
                font-size:12px; color:var(--rail-fg2); }
.leiste .fuss a { padding:4px 0; margin:0; border:0; font-size:12px; color:var(--rail-fg2); }
.leiste .fuss a:hover { background:none; color:var(--rail-fg); }

/* Mitte */
.buehne { padding: 26px 30px 60px; min-width:0; }
.kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
        padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.kopf h1 { font-family:var(--serif); font-size:34px; font-weight:700; margin:0; letter-spacing:-.02em; }
.kopf .datum { font-family:var(--mono); font-size:11.5px; color:var(--fg3); letter-spacing:.04em; }

.block { margin-bottom:30px; }
.block > h2 { font-size:15.5px; letter-spacing:-.01em; color:var(--fg);
              font-weight:700; margin:0 0 12px; }

.liste { background:var(--sheet); border:1px solid var(--line2); border-radius:16px;
         overflow:hidden; }
.zeile { display:grid; grid-template-columns:3px 204px 1fr 80px; align-items:center;
         gap:0 14px; border-bottom:1px solid var(--line2); text-decoration:none; color:inherit; }
.zeile:last-child { border-bottom:none; }
.zeile:hover { background:var(--acc-soft); }
.streifen { align-self:stretch; background:transparent; }
.zeile.neu    .streifen { background:var(--neu); }
.zeile.wartet .streifen { background:var(--wartet); }
.zeile.problem .streifen { background:var(--problem); }
.wer  { padding:11px 0 11px 14px; min-width:0; }
.wer b { font-weight:600; font-size:14.5px; display:block; white-space:nowrap;
         overflow:hidden; text-overflow:ellipsis; }
.wer span { font-size:12px; color:var(--fg3); display:block; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; }
.was { padding:11px 0; font-size:13.5px; color:var(--fg2); min-width:0;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wann { padding:11px 14px 11px 0; text-align:right; font-family:var(--mono);
        font-size:11px; color:var(--fg3); white-space:nowrap; }
.leer { padding:26px 16px; text-align:center; color:var(--fg3); font-size:13.5px; }

/* Kennzahlen */
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kachel { background:var(--sheet); border:1px solid var(--line2); border-radius:16px;
          padding:18px 20px; }
.kachel .wert { font-family:var(--serif); font-size:31px; font-weight:600; line-height:1;
                font-variant-numeric:lining-nums tabular-nums; }
/* Im Dunkeln tragen die Beschriftungen und die Kennzahlen Ocker. Das gibt
   der Seite Wärme, ohne mit dem Rosé zu konkurrieren: Ocker ordnet,
   Rosé fordert. */
[data-mode="dark"] .pult .block > h2,
[data-mode="dark"] .pult .neben h3 { color:var(--ocker); }
[data-mode="dark"] .pult .kachel .wert { color:var(--ocker); }
.kachel .bez  { font-size:12.5px; letter-spacing:0; color:var(--fg3);
                margin-top:6px; font-weight:600; }

/* Spalte rechts */
.neben { border-left:1px solid var(--line); padding:26px 22px 40px; background:var(--sheet);
         position:sticky; top:0; height:100vh; overflow-y:auto; }
.neben h3 { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
            color:var(--fg3); font-weight:700; margin:0 0 10px; }
.neben + .neben, .neben .abschnitt + .abschnitt { margin-top:26px; }
.neben .abschnitt { margin-bottom:26px; }
.eintrag { font-size:13px; padding:8px 0; border-bottom:1px solid var(--line2); }
.eintrag:last-child { border-bottom:none; }
.eintrag .zeit { font-family:var(--mono); font-size:10.5px; color:var(--fg3); }
.eintrag .txt  { color:var(--fg2); }

/* ===========================================================================
   SAAL
   =========================================================================== */
.saal { background:var(--paper); color:var(--ink); min-height:100vh; }
/* 820 Pixel waren als Lesebreite für Formulare gedacht. Auf einem
   großen Bildschirm stehen daneben aber zwei handbreite leere
   Streifen, und die Seite sieht aus wie ein Zettel in einem zu
   großen Rahmen. Bis diese Seiten auf die neue Gestaltung
   umgestellt sind, bekommen sie mehr Breite. */
.saal .bogen { max-width:1120px; margin:0 auto; padding:0 28px 80px; }

.saalkopf { display:flex; align-items:center; justify-content:space-between; gap:18px;
            padding:18px 0; border-bottom:1px solid var(--rule); margin-bottom:26px; }
.zurueck { font-size:13px; color:var(--ink2); text-decoration:none; }
.zurueck:hover { color:var(--accent); }

.person { display:flex; align-items:flex-end; justify-content:space-between;
          gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.person h1 { font-family:var(--serif); font-size:38px; font-weight:600; margin:0 0 3px;
             letter-spacing:-.01em; line-height:1.1; }
.person .rolle { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
                 color:var(--accent); font-weight:700; }
.person .meta { font-size:13px; color:var(--ink2); }

.karte { background:var(--sheet); border:1px solid var(--rule2); border-radius:16px;
         padding:22px 24px; margin-bottom:16px; }
.karte h2 { font-size:15.5px; letter-spacing:-.01em; color:var(--ink);
            font-weight:700; margin:0 0 13px; }
[data-mode="dark"] .saal .karte h2 { color:#FFD039; }
.paare { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px; }
.paare dt { color:var(--ink3); font-size:12.5px; padding-top:2px; }
.paare dd { margin:0; }

.mitglieder { display:grid; gap:1px; background:var(--rule2); border:1px solid var(--rule2); }
.mitglied { background:var(--sheet); padding:11px 14px; display:flex; justify-content:space-between;
            align-items:center; gap:12px; }
.mitglied .n { font-weight:600; }
.mitglied .r { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }

/* Verlauf */
.verlauf { margin-top:8px; }
.tag { text-align:center; font-family:var(--mono); font-size:10.5px; color:var(--ink3);
       letter-spacing:.1em; margin:22px 0 14px; position:relative; }
.tag::before { content:""; position:absolute; left:0; right:0; top:50%;
               border-top:1px solid var(--rule2); z-index:0; }
.tag span { background:var(--paper); padding:0 12px; position:relative; z-index:1; }

.msg { max-width:78%; margin-bottom:12px; }
.msg .blase { border:1px solid var(--rule); border-radius:var(--radius);
              padding:11px 15px; font-size:14.5px; background:var(--sheet); }
.msg .fuss { font-size:10.5px; color:var(--ink3); margin-top:4px;
             font-family:var(--mono); letter-spacing:.03em;
             /* Kanal, Zeit, Benutzer und Versandstand passen nicht immer in
                eine Zeile. Umbrechen statt über den Rand laufen. */
             display:flex; flex-wrap:wrap; align-items:center; gap:0 4px;
             line-height:1.7; }
.msg.raus { margin-left:auto; }
.msg.raus .blase { background:var(--accent-soft); border-color:transparent; }
.msg.raus .fuss { justify-content:flex-end; text-align:right; }
.kanal { display:inline-block; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
         font-weight:700; padding:1px 6px; border-radius:2px; margin-right:6px;
         background:var(--rule2); color:var(--ink3); }

/* Antwortfeld */
.antwort { position:sticky; bottom:0; background:var(--paper); padding:14px 0 18px;
           border-top:1px solid var(--rule); margin-top:24px; }
.antwort textarea { width:100%; min-height:76px; resize:vertical; padding:11px 13px;
                    border:1px solid var(--rule); border-radius:var(--radius);
                    background:var(--sheet); font-size:14.5px; }
.antwort .reihe { display:flex; justify-content:space-between; align-items:center;
                  margin-top:9px; gap:10px; }

/* ===========================================================================
   Gemeinsames: Knöpfe, Formulare, Hinweise
   =========================================================================== */
.knopf { display:inline-block; border:1px solid currentColor; background:transparent;
         padding:10px 18px; border-radius:999px; font-size:13px; cursor:pointer;
         text-decoration:none; letter-spacing:.02em; }
.knopf:hover { opacity:.72; }
.knopf.voll { background:var(--acc, var(--accent)); color:#FFFFFF; border-color:transparent; font-weight:600; }
[data-mode="dark"] .knopf.voll { background:var(--marke-gelb); color:var(--marke-navy);
                                 border-color:var(--marke-gelb); }
.knopf.klein { padding:5px 12px; font-size:12px; }

.feld { margin-bottom:14px; }
.feld label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
              font-weight:700; margin-bottom:5px; opacity:.6; }
.feld input, .feld select, .feld textarea {
  width:100%; padding:10px 12px; border:1px solid currentColor; border-radius:var(--radius);
  background:transparent; font-size:15px; box-sizing:border-box; }

/* Alle Bedienelemente einer Zeile gleich hoch.
   Ohne das ist ein Datumsfeld höher als ein Textfeld (es bringt sein
   eigenes Kalendersymbol mit) und eine Auswahlliste niedriger als beide.
   Die Beschriftungen stehen dann auf drei verschiedenen Höhen und die
   Zeile sieht schief aus — genau das war der Fall. */
.feld input, .feld select { height:40px; }
.feld input[type="checkbox"], .feld input[type="radio"] { height:auto; width:auto; }
/* Der Fokusrahmen folgt dem Akzent der jeweiligen Ansicht. */
.feld input:focus, .feld select:focus { outline:2px solid var(--marke-tuerkis); outline-offset:1px; }
[data-mode="dark"] .feld input:focus,
[data-mode="dark"] .feld select:focus { outline-color:var(--marke-gelb); }

.hinweis { border-left:2px solid var(--marke-tuerkis-tief); padding:11px 15px; font-size:13.5px;
           border-radius:0 var(--radius) var(--radius) 0; margin:14px 0; }
.hinweis.fehler { border-left-color:#BC3B32; }

table.tab { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tab th { text-align:left; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
               font-weight:700; opacity:.55; padding:0 12px 7px 0; border-bottom:1px solid currentColor; }
table.tab td { padding:9px 12px 9px 0; border-bottom:1px solid; border-color:inherit;
               vertical-align:top; opacity:.95; }
table.tab tbody tr { border-color:rgba(128,128,128,.18); }

/* Schalter hell/dunkel */
.modus { border:1px solid currentColor; background:transparent; border-radius:999px;
         padding:5px 13px; font-size:11.5px; cursor:pointer; letter-spacing:.05em; opacity:.6; }
.modus:hover { opacity:1; }

/* Standortwahl */
.standortwahl { border:1px solid currentColor; background:transparent; border-radius:999px;
                padding:5px 11px; font-size:12px; opacity:.75; }

/* Anmeldeseite */
.tor { min-height:100vh; display:grid; place-items:center; background:var(--marke-navy);
       color:var(--marke-hell); padding:24px; }
.tor .bogen { width:100%; max-width:380px; }
.tor .bild { width:54px; height:54px; object-fit:contain; display:block; margin:0 0 18px; }
.tor h1 { font-family:var(--serif); font-size:40px; font-weight:600; margin:0 0 4px; }
.tor .unter { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
              color:var(--marke-gelb); margin-bottom:30px; }
.tor .feld input { border-color:rgba(245,249,251,.3); color:var(--marke-hell); }
.tor .feld label { color:var(--marke-linie); }
.tor .knopf { width:100%; text-align:center; background:var(--marke-gelb);
              border-color:var(--marke-gelb); color:var(--marke-navy); font-weight:600;
              margin-top:6px; }
.tor .hinweis.fehler { background:rgba(188,59,50,.16); border-left-color:#F08A80;
                       color:#F7B3AC; }
.tor .zettel { margin-top:26px; padding-top:16px; border-top:1px solid rgba(245,249,251,.14);
               font-size:12px; color:#8FA3B2; line-height:1.7; }
.tor .zettel b { color:var(--marke-linie); font-weight:600; }

/* ===========================================================================
   Kleine Hilfsklassen

   Es gibt im ganzen System kein style="..." im HTML. Grund: die
   Content-Security-Policy erlaubt keine Inline-Styles (style-src 'self').
   Das ist gewollt — es ist eine der wirksamsten Bremsen gegen
   eingeschleusten Code. Also steht jede Gestaltung hier.
   =========================================================================== */
.werkzeuge { display:flex; gap:9px; align-items:center; }
.leise     { opacity:.7; }
.zart      { font-size:12.5px; opacity:.6; }
.fussnote  { font-size:12.5px; opacity:.6; max-width:62ch; margin-top:10px; }
.mono.klein{ font-size:11px; }

/* --- Strecken ---------------------------------------------------------------

   Eine Strecke soll man ANSEHEN koennen, nicht lesen muessen. Deshalb hier
   mehr Form als anderswo im System: Zeichen statt Woerter fuer das Grobe,
   eine sichtbare Kette statt einer Tabelle, Kacheln statt eines
   Auswahlfeldes. Das Wort steht jeweils daneben — das Zeichen ist der
   schnelle Weg, das Wort der sichere.
   --------------------------------------------------------------------- */

/* NICHT `.zeichen` nennen: so heisst in der Leiste schon das Logo. */
.sinnbild { width:18px; height:18px; flex:none; display:block; }

/* --- Die Schrittarten als Kacheln ---
   Ein Auswahlfeld mit sieben Eintraegen zwingt zum Aufklappen und Lesen.
   Sieben Kacheln nebeneinander zeigen die Moeglichkeiten auf einmal. */
.artwahl { display:grid; gap:8px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); }
.artkachel { cursor:pointer; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--sheet); padding:12px 10px; display:block; text-align:center; }
.ak-inhalt { display:flex; flex-direction:column; align-items:center; gap:7px; }
.ak-wort { font-size:12.5px; line-height:1.25; color:var(--ink2); }
.artkachel .sinnbild { width:22px; height:22px; color:var(--ink3); }
.artkachel:hover { border-color:var(--ink3); }
.artkachel:focus-within { outline:2px solid var(--accent); outline-offset:2px; }

/* Der Knopf selbst bleibt sichtbar, solange die Kachel das Gewaehlte nicht
   selbst zeigen kann. Erst wo :has() da ist, faerbt sich die Kachel und der
   Knopf darf weg — sonst saehe man nirgends, was gewaehlt ist. */
.artkachel input { display:block; margin:0 auto 6px; }
@supports selector(:has(*)) {
  .artkachel input { position:absolute; opacity:0; pointer-events:none; margin:0; }
  .artkachel:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
  .artkachel:has(input:checked) .sinnbild { color:var(--accent); }
  .artkachel:has(input:checked) .ak-wort { color:var(--ink); font-weight:600; }
}

/* --- Nur zeigen, was zur gewaehlten Art gehoert ---
   Der eigentliche Grund, warum das Formular vorher unuebersichtlich war:
   es standen immer alle Felder da, und drei Viertel davon galten nicht.
   Statt Hinweisen in den Beschriftungen („— beim Warten") verschwindet
   jetzt einfach, was nicht gilt.

   In @supports, damit ein Browser ohne :has() alles zeigt statt nichts.
   Haesslich ist besser als leer. */
.fuer { display:block; }
@supports selector(:has(*)) {
  .wennform .fuer { display:none; }
  .wennform:has(input[name="art"][value="warten"]:checked)    .fuer-warten,
  .wennform:has(input[name="art"][value="nachricht"]:checked) .fuer-nachricht,
  .wennform:has(input[name="art"][value="nachricht"]:checked) .fuer-text,
  .wennform:has(input[name="art"][value="bedingung"]:checked) .fuer-bedingung,
  .wennform:has(input[name="art"][value="etikett"]:checked)   .fuer-etikett,
  .wennform:has(input[name="art"][value="feld"]:checked)      .fuer-feld,
  .wennform:has(input[name="art"][value="melden"]:checked)    .fuer-text,
  .wennform:has(input[name="art"][value="notiz"]:checked)     .fuer-text,
  .wennform:has(select[name="ausloeser"] option[value="etikett"]:checked)
    .fuer-a-etikett,
  .wennform:has(select[name="ausloeser"] option[value="nicht_erschienen"]:checked)
    .fuer-a-fehlzeit,
  .wennform:has(select[name="ziel"] option[value="etikett"]:checked)
    .fuer-z-etikett { display:block; }
}

/* --- Die Schritte als Kette ---
   Die senkrechte Linie macht aus einer Aufzaehlung eine Reihenfolge. Das
   ist der ganze Unterschied zwischen „vier Schritte" und „erst das, dann
   das". */
.kette { list-style:none; margin:4px 0 0; padding:0; position:relative; }
.kette::before { content:""; position:absolute; left:17px; top:18px; bottom:18px;
  width:1px; background:var(--rule); }
.kettenglied { display:grid; grid-template-columns:36px 1fr auto;
  align-items:start; gap:0 14px; padding:9px 0; position:relative; }
.kg-marke { width:36px; height:36px; border-radius:50%; background:var(--sheet);
  border:1px solid var(--rule); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; position:relative;
  z-index:1; color:var(--ink2); }
.kg-nr { font-size:9px; line-height:1; color:var(--ink3); }
.kg-marke .sinnbild { width:15px; height:15px; }
.kg-text { min-width:0; padding-top:3px; }
.kg-text b { display:block; font-size:14.5px; font-weight:600; }
.kg-betreff { display:block; font-size:13px; color:var(--ink2); margin-top:2px; }
.kg-vorschau { display:block; font-size:12.5px; color:var(--ink3); margin-top:2px;
  line-height:1.5; }
.kettenglied form { padding-top:4px; }

/* Die Schranke faellt heraus: an ihr kann der Lauf enden, und das soll man
   sehen, ohne den Satz zu lesen. */
.kettenglied.art-bedingung .kg-marke { border-color:var(--warn); color:var(--warn); }
.kettenglied.art-nachricht .kg-marke { border-color:var(--accent); color:var(--accent); }

/* --- Die Streckenzeile ---
   Die allgemeine `.zeile` ist fuer Kontakte gebaut: 204 Pixel Name, Rest
   Mitte. Ein Streckenname ist laenger und wurde darin abgeschnitten,
   waehrend in der Mitte eine Luecke stand. Hier bekommt der Name den
   Platz, und was rechts steht, sagt selbst, was es ist — statt in einer
   Fussnote darunter. */
.streckenzeile { grid-template-columns:3px 1fr auto auto 76px; }
.st-zahl { padding:11px 0 11px 18px; font-size:13px; color:var(--ink2);
  white-space:nowrap; }
.st-zahl b { font-weight:600; color:var(--ink); }
.st-lampe { padding:11px 14px 11px 18px; text-align:right; font-size:12px;
  color:var(--ink3); }
.st-lampe.an { color:var(--ok); font-weight:600; }

/* Auf schmalen Schirmen faellt die Mitte weg, die Lampe bleibt. */
@media (max-width:820px) {
  .streckenzeile { grid-template-columns:3px 1fr 76px; }
  .streckenzeile .st-zahl { display:none; }
}

/* --- Was gesperrt ist, sieht gesperrt aus ---
   Vorher stand hier das volle Formular und darueber ein Satz, dass es
   nicht geht. Wer den Satz ueberliest, fuellt aus und bekommt eine
   Absage. Jetzt steht der eine Griff da, der weiterhilft. */
.sperre { border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--sheet); padding:16px 18px; margin-top:14px; }
.sperre-wort { font-weight:600; font-size:14.5px; margin-bottom:6px; }
.sperre p { margin:0 0 12px; font-size:13px; color:var(--ink2); line-height:1.55; }

.laufzeile { grid-template-columns:3px 1fr auto 76px 140px; }
.laufzeile .was { white-space:normal; }
/* Der Grund beantwortet „warum hat sie das bekommen" — und wurde vorher
   genau an der Stelle abgeschnitten, an der die Antwort steht („… gesetzt
   bei Lina"). Er darf umbrechen. */
.laufzeile .warum { white-space:normal; overflow:visible; text-overflow:clip; }
.laufzeile form { padding:8px 14px 8px 0; text-align:right; }

.zeile.statisch { cursor:default; }
.zeile.statisch:hover { background:transparent; }
.streifen.akzent { background:var(--akzent); }
.streifen.ok   { background:var(--ok); }
.streifen.bad  { background:var(--bad); }

.abschnitt-fuss { margin-top:12px; }

/* Formular in der Liste */
.liste.gepolstert { padding:18px 20px; }
.formgitter { display:grid; gap:0 14px;
              grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
              align-items:start; }

/* Der Knopf bekommt eine eigene Zeile, statt als fünftes Element in eine
   Spalte gequetscht zu werden, die dafür zu schmal ist. Er steht damit
   immer an derselben Stelle, egal wie viele Felder darüber liegen. */
.formgitter .absenden { grid-column:1 / -1; margin-top:2px; padding-bottom:14px; }
.formgitter .feld input { border-color:var(--line); }

/* Protokolltabelle */
td.zeitspalte { white-space:nowrap; font-size:12px; }
td.nebensache { font-size:12px; opacity:.75; }

/* Platzhalterseiten */
.leer.gross { padding:52px 24px; }
.baustelle-titel { font-family:var(--serif); font-size:26px; color:var(--fg); margin-bottom:8px; }
.baustelle-text  { max-width:46ch; margin:0 auto; }
.leerhinweis { opacity:.6; font-size:13.5px; padding:6px 0; }

/* ===========================================================================
   Baustein 1 · Familien
   =========================================================================== */

/* Eine Person im Haushalt, mit ihren Einwilligungen darunter */
.mitglied-block { background:var(--sheet); }
.mitglied-block + .mitglied-block { border-top:1px solid var(--rule2); }
.mitglied-rechts { display:flex; align-items:center; gap:12px; flex:none; }
.mitglied-rechts .knopf { opacity:.55; }
.mitglied-rechts .knopf:hover { opacity:1; }

.etiketten { margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.etikett { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; padding:2px 7px; border-radius:2px;
  background:var(--accent-soft); color:var(--accent); }

/* Einwilligungen als vier kleine Kacheln unter dem Kind.
   Vorher waren es vier volle Zeilen je Kind — bei zwei Kindern acht
   Zeilen, die alle gleich aussahen und die Seite auseinandergezogen
   haben. Nebeneinander gehören sie sichtbar zu diesem einen Kind. */
.einwilligungen { border-top:1px solid var(--rule2); background:var(--paper);
  padding:11px 14px 13px; }
.ew-kopf { font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; color:var(--ink3); margin-bottom:8px; }
/* --- Vier Plaketten statt vier Kaesten ---
   Vorher stand je Einwilligung ein Kasten mit Titel, Stand und Knopf.
   Bei zwei Kindern waren das acht Kaesten, meist alle grau und alle mit
   demselben Satz darin. Jetzt eine Zeile: Zeichen, Wort, Farbe.

   Die Farbe traegt nie allein — jede Plakette hat ihr Zeichen, fuer alle,
   die Rot und Gruen nicht unterscheiden. */
/* Das Kachelgitter der Rundschreiben. Es hiess frueher `ew-gitter` und
   lieh sich damit den Namen der Einwilligungen — als die zu Plaketten
   wurden, waere die Rundschreiben-Seite mit verschwunden. Geliehene
   Klassennamen sind genau diese Falle. */
.kachelgitter { display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); }

.ew-reihe { display:flex; flex-wrap:wrap; gap:6px; }
.ewp { display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  line-height:1; padding:6px 11px 6px 8px; border-radius:999px;
  border:1px solid var(--rule2); background:var(--sheet); color:var(--ink2);
  white-space:nowrap; cursor:default; }
.ewp-z { font-size:14px; font-weight:700; line-height:1; }
.ewp.ja   { border-color:var(--ok);    color:var(--ok); }
.ewp.nein { border-color:var(--alarm); color:var(--alarm);
            background:var(--alarm-soft); }
/* Erteilt, aber aelter als der laufende Vertrag. Kein Fehler, eine
   Aufgabe: noch einmal fragen. Deshalb Ocker und nicht Rot. */
.ewp.alt  { border-color:var(--warn);  color:var(--warn);
            background:var(--warn-soft); }
.ewp.offen .ewp-z { color:var(--ink3); }

/* Widerrufen bleibt einen Griff entfernt und an derselben Stelle —
   Art. 7 Abs. 3 DSGVO. Es steht nur da, wenn es etwas zu widerrufen gibt. */
.ew-mehr { margin-top:9px; }
.ew-mehr summary { cursor:pointer; font-size:12px; color:var(--ink3);
  list-style:none; }
.ew-mehr summary::-webkit-details-marker { display:none; }
.ew-mehr summary::before { content:"+ "; color:var(--accent); font-weight:700; }
.ew-mehr[open] summary::before { content:"− "; }
.ew-mehr summary:hover { color:var(--accent); }
.ew-zeile { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 0; border-bottom:1px solid var(--rule2); }
.ew-zeile:last-child { border-bottom:none; }
.ew-wo { font-size:12.5px; min-width:0; }

/* --- Der Zugang fuer die Eltern -------------------------------------------
   Der Link ist lang und wird nie abgetippt. Er steht in einem Feld, das
   sich in einem Griff markieren lässt, und der Knopf daneben legt ihn in
   die Zwischenablage. */
.zugang { display:flex; flex-direction:column; gap:7px; }
.zugang-zeile { display:flex; gap:8px; align-items:center; }
.zugang-zeile input { flex:1; min-width:0; font-size:12px;
  padding:8px 10px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper); color:var(--ink2); }
.zugang-zeile .knopf { flex:none; white-space:nowrap; }
.zugang-tun { display:flex; flex-wrap:wrap; gap:8px; margin-top:3px; }
.zugang-tun form { margin:0; }

/* Aufklappbares „Person hinzufügen" */
details.dazu { margin-top:16px; border-top:1px solid var(--rule2); padding-top:14px; }
details.dazu summary { cursor:pointer; font-size:13px; color:var(--ink2);
  list-style:none; }
details.dazu summary::-webkit-details-marker { display:none; }
details.dazu summary::before { content:"+ "; color:var(--accent); font-weight:700; }
details.dazu[open] summary::before { content:"− "; }
details.dazu summary:hover { color:var(--accent); }
details.dazu .formgitter { margin-top:14px; }

fieldset.gruppe-kind { border:1px solid var(--rule2); border-radius:var(--radius);
  padding:6px 16px 4px; margin:0 0 14px; }
fieldset.gruppe-kind legend { font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink3); font-weight:700; padding:0 6px; }

.saal .feld input, .saal .feld select, .saal .feld textarea { border-color:var(--rule); }
.saal textarea { width:100%; padding:10px 12px; border:1px solid var(--rule);
  border-radius:var(--radius); background:transparent; font-size:15px; resize:vertical; }
.saal .karte .knopf.voll { margin-top:8px; }

/* Suchfeld über der Familienliste */
.suche { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.suche input { flex:1; padding:10px 14px; border:1px solid var(--line);
  border-radius:999px; background:var(--sheet); color:var(--fg); font-size:14.5px; }
.suche input:focus { outline:2px solid var(--acc); outline-offset:1px; }

/* Hinweis auf fällige Löschungen */
.zeile.frist .streifen { background:var(--problem); }

/* ===========================================================================
   Baustein 2 · Kurse, Stundenplan, Anwesenheit
   =========================================================================== */

/* Knopfreihe über einer Liste */
.werkzeugleiste { display:flex; gap:10px; align-items:center; margin-bottom:14px; }

/* Kleiner Statusvermerk hinter einem Namen, etwa „Vertretung" */
.merker { font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warn); border:1px solid var(--warn); border-radius:999px;
  padding:1px 7px; margin-left:6px; white-space:nowrap; }

/* Zwischenüberschrift innerhalb einer Karte */
.unterkopf { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); font-weight:700; margin:20px 0 8px; }

/* Ein Knopf, der allein in einer Zeile steht und kein Gitter braucht */
.reihe-form { display:inline; }

/* Mehrfachauswahl, etwa beim Aufrücken */
.ankreuzen { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:16px; }
.kreuz { display:flex; align-items:center; gap:7px; font-size:14px;
  cursor:pointer; }
.kreuz input { width:16px; height:16px; accent-color:var(--accent); }

/* ---------------------------------------------------------------------------
   Die Anwesenheitsliste.

   Sie wird von einer Lehrkraft auf dem Handy ausgefüllt, im Stehen, oft mit
   einer Hand. Deshalb große Flächen statt kleiner Kreise: die drei
   Möglichkeiten sind Knöpfe, die den ganzen Finger vertragen. Darunter liegt
   ein gewöhnliches Radiofeld, damit es ohne JavaScript funktioniert und für
   Screenreader lesbar bleibt.
   --------------------------------------------------------------------------- */
.anwesenheit { border-top:1px solid var(--rule2); }
.anw-zeile { display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:14px; padding:10px 0; border-bottom:1px solid var(--rule2); }
.anw-name { font-size:15px; }
.anw-wahl { display:flex; gap:6px; }
.anw-knopf { position:relative; }
.anw-knopf input { position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer; }
.anw-knopf span { display:block; padding:8px 14px; border:1px solid var(--rule);
  border-radius:999px; font-size:13px; color:var(--ink2); white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s; }
.anw-knopf input:hover + span { border-color:var(--accent); }
.anw-knopf input:focus-visible + span { outline:2px solid var(--accent);
  outline-offset:2px; }
.anw-knopf input:checked + span { background:var(--ink); color:var(--paper);
  border-color:var(--ink); }
.anw-fuss { margin-top:18px; }

/* Auf dem Handy stehen Name und Wahl untereinander, sonst wird es zu eng. */
@media (max-width: 640px) {
  .anw-zeile { grid-template-columns:1fr; gap:8px; }
  .anw-wahl { width:100%; }
  .anw-knopf { flex:1; }
  .anw-knopf span { text-align:center; padding:12px 6px; }
}

/* ---------------------------------------------------------------------------
   Einstellungen: Textbausteine, eigene Felder, Etiketten
   --------------------------------------------------------------------------- */

/* Das Etikett, das das System selbst errechnet, sieht anders aus als eines,
   das jemand von Hand vergeben hat. Sonst verwechselt man beide. */
.etikett.vom-system { background:transparent; color:var(--ink2);
  border:1px solid var(--rule); }

/* Ein Etikett, das man wegklicken kann. Es soll wie ein Etikett aussehen
   und sich wie ein Knopf anfuehlen — deshalb kein eigener Stil, sondern
   nur das, was ein <button> an Eigenem mitbringt, wieder weg. */
/* NICHT `.gross` nennen: die Klasse gibt es schon für die grossen Knoepfe
   der Elternseite, und ein Etikett wuerde dann als schwarze Pille ueber
   die ganze Breite laufen. Genau das war einmal zu sehen. */
.etiketten-gesetzt { margin:0 0 14px; gap:7px; }
.etiketten-gesetzt .etikett { font-size:11.5px; padding:5px 10px; }
.etikett.knopfartig { border:0; cursor:pointer; font-family:inherit;
  line-height:1.3; }
.etikett.knopfartig:hover { background:var(--accent); color:var(--paper); }
/* Ein Knopf, der in einer Formularzeile neben Feldern steht: er soll auf
   der Grundlinie der Eingaben sitzen, nicht auf der ihrer Beschriftung. */
.feld-knopf { display:flex; align-items:flex-end; }
.feld-knopf .knopf { height:40px; }

.bausteine { display:grid; gap:18px; }
/* .baustein ist ein .feld, damit Rahmen, Farben und Fokus dieselben sind
   wie in jedem anderen Formular. Hier kommt nur die Erläuterung darunter
   dazu. */
.baustein .zart { font-size:12.5px; margin-top:5px; }

/* Zwei Knopfreihen nebeneinander in derselben Zellenspalte einer Zeile. */
.inline { display:inline-flex; gap:6px; vertical-align:middle; }
.inline + .inline { margin-left:8px; }

.knopf.warnend { color:#BC3B32; border-color:rgba(188,59,50,.35); }
.knopf.warnend:hover { background:rgba(188,59,50,.08); border-color:#BC3B32; }
[data-mode="dark"] .knopf.warnend { color:#F08A80; border-color:rgba(240,138,128,.4); }

/* Ein Feld, das über die ganze Breite des Formulargitters geht. */
.formgitter .feld.breit { grid-column:1 / -1; }

.fehler { border-left:2px solid #BC3B32; padding:11px 15px; font-size:13.5px;
  color:var(--ink2); margin:0 0 4px; }
[data-mode="dark"] .fehler { border-left-color:#F08A80; }

/* Zeilen mit Knöpfen rechts brauchen mehr als die üblichen 80 Pixel. */
.zeile.mit-knoepfen { grid-template-columns:3px 204px 1fr auto; }
.zeile.mit-knoepfen .wann { display:flex; align-items:center; justify-content:flex-end;
  white-space:nowrap; }

@media (max-width: 860px) {
  .zeile.mit-knoepfen { grid-template-columns:3px 1fr; row-gap:8px; }
  .zeile.mit-knoepfen .was { grid-column:2; }
  .zeile.mit-knoepfen .wann { grid-column:2; justify-content:flex-start; }
}

/* ---------------------------------------------------------------------------
   Unterlagen vor dem Vertrag
   --------------------------------------------------------------------------- */

/* Die Ampel. Sie beantwortet eine Frage, deshalb steht sie allein oben
   und nicht als Zeile in der Liste. */
.ampel { display:flex; flex-direction:column; gap:4px; padding:13px 16px;
  border-radius:var(--radius); border:1px solid var(--rule);
  margin:0 0 18px; font-size:14px; }
.ampel.gut  { border-left:3px solid var(--marke-tuerkis-tief); }
.ampel.offen{ border-left:3px solid #BC3B32; }
[data-mode="dark"] .ampel.offen { border-left-color:#F08A80; }
.ampel .zart { font-size:12.5px; }

.ul-liste { border-top:1px solid var(--rule2); margin-bottom:6px; }
.ul-zeile { display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:14px; padding:9px 0; border-bottom:1px solid var(--rule2); }
.ul-zeile:last-child { border-bottom:none; }
.ul-was b { font-weight:600; font-size:14px; display:block; }
.ul-was .zart { font-size:12px; }
.ul-stand { font-size:13px; color:var(--ink2); text-align:right; }
.ul-zeile.problem .ul-stand { color:#BC3B32; }
.ul-zeile.wartet  .ul-stand { color:var(--marke-tuerkis-tief); }
[data-mode="dark"] .ul-zeile.problem .ul-stand { color:#F08A80; }
.ul-tun { min-width:104px; text-align:right; }

@media (max-width: 640px) {
  .ul-zeile { grid-template-columns:1fr; gap:4px; }
  .ul-stand, .ul-tun { text-align:left; }
}

/* Der Text einer früheren Fassung, aufgeklappt zum Nachlesen. */
.fassungstext { white-space:pre-wrap; font-size:13.5px; line-height:1.65;
  color:var(--ink2); padding:12px 0 4px; }

/* ---------------------------------------------------------------------------
   Posteingang, Verlauf, Postausgang
   --------------------------------------------------------------------------- */

/* Reiter über einer Liste: offen / wartet / erledigt */
.reiter { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.reiter-knopf { display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; color:var(--fg2); text-decoration:none; }
.reiter-knopf:hover { border-color:var(--acc); color:var(--fg); }
.reiter-knopf.an { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.reiter-knopf .zahl { font-size:11px; opacity:.7; }

/* Der Zustandsumschalter oben im Verlauf */
.zustand { display:flex; gap:6px; align-items:center; }
.zustand .knopf.an { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Ein Kasten, der auf etwas hinweist, das den Versand betrifft */
.warnkarte { border-left:3px solid #BC3B32; }
[data-mode="dark"] .warnkarte { border-left-color:#F08A80; }
.warnkarte b { font-size:14px; }

/* Betreffzeile über einer Nachricht */
.msg .betreff { font-size:12.5px; font-weight:600; color:var(--ink2);
  margin-bottom:4px; }

/* Eine Nachricht, die noch nicht draußen ist: gestrichelter Rand. */
.msg.offen .blase { border-style:dashed; }
.msg-tun { margin-top:6px; }

/* Interne Notiz.

   Sie ist keine Nachricht und darf auch nicht so aussehen. Ein Strich an
   der Seite hat dafür nicht gereicht: die Notiz stand dann in derselben
   Spalte wie die Nachrichten darüber und las sich wie ein Nachsatz an
   die Mutter. Deshalb ein eigener Kasten — eingelassen statt erhaben,
   gestrichelter Rahmen, über die ganze Breite und damit sichtbar
   außerhalb der linken und rechten Spur.

   Nicht kursiv: kursiv liest sich wie ein Zitat, also wie etwas, das
   jemand gesagt hat. Eine Notiz ist das Gegenteil davon. */
.msg.notiz { margin:22px 0; max-width:none; }

.notiz-karte { background:var(--paper); border:1px dashed var(--rule);
  border-radius:var(--radius); padding:10px 14px 9px; }

.notiz-kopf { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--ink3); margin-bottom:7px; }
.notiz-marke { border:1px solid var(--ink3); border-radius:999px;
  padding:2px 8px; letter-spacing:.11em; font-weight:700; }

.notiz-text { font-size:14px; line-height:1.55; color:var(--ink2);
  white-space:pre-wrap; }
.msg.notiz .fuss { justify-content:flex-start; margin-top:7px;
  padding-top:6px; border-top:1px solid var(--rule2); }

/* Die Bausteinleiste über dem Antwortkasten */
.bausteinleiste { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--rule2); }

.fussnote.klein-oben { margin-top:-6px; margin-bottom:14px; }

/* ---------------------------------------------------------------------------
   Die Elternseite

   Die einzige Seite, die jemand von außen aufruft, meistens vom Telefon.
   Größere Schrift, größere Schaltflächen, viel Luft. Sie muss auch dann
   funktionieren, wenn jemand sie im Bus mit einer Hand bedient.
   --------------------------------------------------------------------------- */

/* Die Elternseite hat ihren eigenen Satz Variablen. Sie gehört weder zum
   Pult noch zum Saal — und ohne sie wären --ink, --paper und --rule hier
   schlicht nicht definiert: die Schaltflächen hätten dann keine Farbe
   und sähen aus wie Text. Genau das war passiert.

   Kein Dunkelmodus: die Seite wird einmal im Jahr von einem fremden
   Telefon geöffnet, da ist ein Schalter, den niemand findet, kein
   Gewinn. Helles Papier, dunkle Schrift, fertig. */
body.eltern {
  --ink:#17324E; --ink2:#63798B; --ink3:#8FA3B2;
  --paper:#F5F9FB; --sheet:#ffffff;
  --rule:rgba(23,50,78,.15); --rule2:rgba(23,50,78,.08);
  --accent:#008995; --accent-soft:#E5F7F9;
  --ok:#1F7A6A; --alarm:#BC3B32;

  background:var(--paper); color:var(--ink);
}
.eltern { max-width:640px; margin:0 auto; padding:28px 20px 60px; }

.eltern-kopf { display:flex; align-items:center; gap:16px; margin-bottom:26px;
  padding-bottom:20px; border-bottom:1px solid var(--rule); }
.eltern-kopf .bild.klein { height:38px; width:auto; }
.eltern-ort { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marke-tuerkis-tief); font-weight:700; }
.eltern-kopf h1 { font-size:26px; margin:2px 0 0; }

.eltern-vorwort { font-size:15.5px; line-height:1.65; color:var(--ink2);
  margin:0 0 26px; }
.eltern-klein { font-size:12.5px; color:var(--ink3); line-height:1.55; }

.gespeichert { background:var(--accent-soft); border-left:3px solid var(--marke-tuerkis-tief);
  padding:13px 16px; border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:22px; font-size:14.5px; font-weight:600; }

.eltern .kind { margin-bottom:30px; }
.eltern .kind h2 { font-size:19px; margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--rule2); }

.frage { border:1px solid var(--rule); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:11px; background:var(--sheet); }
.frage.ja  { border-color:#1F7A6A; }
.frage.nein{ border-color:#BC3B32; }

.frage-kopf { display:flex; align-items:flex-start; gap:14px;
  justify-content:space-between; }
.frage-titel { font-size:16px; font-weight:600; line-height:1.3; }
.frage-text { font-size:13.5px; color:var(--ink3); line-height:1.5; margin-top:3px; }
.frage-zeichen { font-size:22px; line-height:1; flex:none; color:var(--ink3); }
.frage.ja   .frage-zeichen { color:#1F7A6A; }
.frage.nein .frage-zeichen { color:#BC3B32; }

.frage-stand { font-size:13px; color:var(--ink2); margin:10px 0 12px; }
.frage-tun { margin:0; }

/* Ein Daumen auf einem Handy braucht mehr als 28 Pixel. */
.gross { display:block; width:100%; padding:13px 18px; border-radius:999px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font: inherit; font-size:15px; font-weight:600; cursor:pointer; }
.gross:hover { opacity:.9; }
.gross.zurueck { background:transparent; color:var(--ink2);
  border-color:var(--rule); font-weight:500; }
.gross.zurueck:hover { border-color:#BC3B32; color:#BC3B32; }

.eltern-name { margin:0 0 30px; padding-bottom:22px;
  border-bottom:1px solid var(--rule2); }
.eltern .eltern-name label { display:block; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
  margin-bottom:6px; }
.eltern .eltern-name input { display:block; width:100%; font:inherit;
  font-size:16px; padding:12px 14px; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--sheet); color:var(--ink);
  margin-bottom:7px; }
.eltern .eltern-name input:focus { outline:2px solid var(--accent);
  outline-offset:1px; }

/* Der Wortlaut zum Aufklappen. Die meisten tippen ihn nie an — er muss
   aber dastehen, sonst bestätigt jemand etwas Ungelesenes. */
.eltern .dazu { margin:12px 0 0; }
.eltern .dazu summary { cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--accent); list-style:none; padding:4px 0; }
.eltern .dazu summary::-webkit-details-marker { display:none; }
.eltern .dazu summary::before { content:"▸ "; }
.eltern .dazu[open] summary::before { content:"▾ "; }
.eltern .fassungstext { white-space:pre-wrap; font-size:13.5px; line-height:1.6;
  color:var(--ink2); background:var(--paper); border:1px solid var(--rule2);
  border-radius:var(--radius); padding:12px 14px; margin-top:8px;
  max-height:320px; overflow:auto; }
.eltern .dazu + .frage-tun { margin-top:14px; }

.eltern-fuss { margin-top:36px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:13.5px; color:var(--ink3); line-height:1.6; }
.eltern-fuss p { margin:0 0 8px; }

@media (max-width: 480px) {
  .eltern { padding:20px 15px 48px; }
  .eltern-kopf h1 { font-size:22px; }
}

/* --- Die Frage vor dem Anlegen: Familie oder Einzelperson ------------------
   Zwei gleich große Karten nebeneinander. Keine Vorauswahl: beides ist
   gleich normal, und wer allein kommt, soll sich nicht als Sonderfall
   vorkommen. */
.wahl { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom:18px; }
.wahl-karte { display:block; text-decoration:none; color:inherit;
  background:var(--sheet); border:1px solid var(--rule);
  border-radius:var(--radius); padding:20px 22px; }
.wahl-karte:hover { border-color:var(--accent); }
.wahl-titel { font-family:var(--serif); font-size:22px; margin-bottom:6px; }
.wahl-text { font-size:13.5px; line-height:1.6; color:var(--ink3); }

/* Der Hinweis, wenn aus einer Einzelperson mehrere geworden sind.
   Kein Alarm, nur ein Vorschlag: der Name ist nicht falsch, er ist nur
   vielleicht nicht mehr der passende. */
.hinweis.umbenennen { background:var(--sheet); border:1px solid var(--rule);
  border-left:3px solid var(--marke-tuerkis-tief); padding:14px 16px;
  margin-bottom:18px; font-size:14px; line-height:1.6; }
.umbenennen-form { display:flex; gap:9px; align-items:center;
  flex-wrap:wrap; margin:10px 0 2px; }
.umbenennen-form input { flex:1; min-width:180px; font:inherit; font-size:14px;
  padding:8px 11px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper); color:var(--ink); }
.umbenennen-form .knopf { flex:none; }
.hinweis.umbenennen .fussnote { margin-top:6px; }

/* --- Elternseite: fehlende Angaben, eigene Daten, Notfallkontakt --------- */

/* Keine rote Warnung. Es fehlt etwas, das ist alles — und es haelt
   ausdruecklich nichts auf. */
.eltern-fehlt { background:var(--accent-soft); border-left:3px solid var(--accent);
  padding:13px 16px; border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:22px; font-size:14.5px; line-height:1.6; }
.eltern-fehler { background:#FDEDEB; border-left:3px solid var(--alarm);
  padding:13px 16px; border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:22px; font-size:14.5px; color:var(--alarm); font-weight:600; }

.daten-form { margin-top:14px; }
.daten-form .feld { margin-bottom:13px; }
.daten-form label { display:block; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
  margin-bottom:6px; }
.daten-form input { display:block; width:100%; font:inherit; font-size:16px;
  padding:12px 14px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--sheet); color:var(--ink); box-sizing:border-box; }
.daten-form input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.feld-paar { display:grid; gap:0 12px; grid-template-columns:1fr 1fr; }
.daten-form .gross { margin-top:6px; }

/* Schon zugestimmt, aber vor dem laufenden Vertrag. */
.frage.alt { border-color:var(--accent); background:var(--accent-soft); }
.frage.alt .frage-zeichen { color:var(--accent); }

/* Ein Text, den niemand geprueft hat. Faellt auf, weil er auffallen muss. */
.entwurf-marke { display:inline-block; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bad, #BC3B32);
  border:1px solid currentColor; border-radius:999px; padding:2px 9px; }

/* --- Rundschreiben --------------------------------------------------------
   Die Kreise und die Art als anklickbare Kacheln statt als Auswahlliste:
   an einer Liste sieht man nicht, wie viele Leute dahinterstehen. */
.wahlkachel { display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  padding:14px 16px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--sheet); }
/* Die Hervorhebung folgt dem Knopf, nicht dem, was der Server gerendert
   hat. Sonst bleibt sie nach einem Klick auf der alten Kachel stehen und
   zwei Kacheln sehen gleichzeitig ausgewaehlt aus. Genau das war zu
   sehen, bevor diese Zeile hier stand. Ohne :has() bleibt nur der
   Radioknopf selbst als Anzeige — sichtbar ist er, das genuegt. */
.wahlkachel:has(input:checked) {
  border-color:var(--accent); background:var(--accent-soft); }

/* --- Die drei Briefboegen ---------------------------------------------------
   Die Farben stammen aus den Stylesheets von balletsports.de und sind
   hier fest eingetragen, nicht ueber die Themenvariablen: eine Kachel
   fuer den Kinderbogen muss rosé sein, auch wenn das System gerade dunkel
   laeuft. Sie zeigt ja, wie die Mail aussieht, nicht wie die Seite
   aussieht. */
.bogenkachel:has(input:checked) { border-width:1.5px; }
.bogen-erwachsene:has(input:checked) { border-color:#008995; background:#E5F7F9; }
.bogen-kinder:has(input:checked)     { border-color:#D9A400; background:#FFF6DC; }
.bogen-erwachsene input { accent-color:#008995; }
.bogen-kinder     input { accent-color:#D9A400; }
/* Auch der Fokusrahmen in der Farbe des Bogens. Sonst liegt ein goldener
   Ring um die rosé Kachel und man haelt die Farbe fuer falsch. */
.bogen-erwachsene:focus-within { outline-color:#008995; }
.bogen-kinder:focus-within     { outline-color:#D9A400; }
/* Im dunklen Modus wuerde die helle Flaeche den dunklen Text verschlucken.
   Dort traegt nur der Rand die Farbe. */
[data-mode="dark"] .bogen-erwachsene:has(input:checked),
[data-mode="dark"] .bogen-kinder:has(input:checked) { background:var(--sheet); }

.bogen-merkmal { display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; }
.bogen-tupfer { display:inline-block; width:9px; height:9px; border-radius:50%;
  flex:none; }
.bogen-erwachsene .bogen-tupfer, .bogen-merkmal.bogen-erwachsene .bogen-tupfer { background:#008995; }
.bogen-kinder     .bogen-tupfer, .bogen-merkmal.bogen-kinder     .bogen-tupfer { background:#D9A400; }

/* Vier Kacheln nebeneinander, solange Platz ist. */
.kachelgitter.drei { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
/* Der Knopf bleibt sichtbar und bedienbar. Versteckt war er zwar huebscher,
   aber dann kommt niemand mit der Tastatur daran — und eine Vorlesehilfe
   findet ihn auch nicht. */
.wahlkachel input { flex:none; margin:2px 0 0; width:auto; height:auto;
  accent-color:var(--accent); }
.wahlkachel:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.wk-inhalt { display:block; }
.wk-zahl { display:block; font-size:26px; line-height:1.1; color:var(--ink); }
.wk-text { display:block; font-size:13px; line-height:1.5; color:var(--ink2);
  margin-top:4px; }

/* Der Brief in der Vorschau. Eigener Rahmen, damit sofort klar ist: das
   hier ist eine Mail, keine Seite des Systems. */
/* Hoch genug, dass bei einem ueblichen Brief auch der Fuss mit dem
   Abmeldelink zu sehen ist. Bei 520px war er abgeschnitten — und
   ausgerechnet der ist der Teil, den man vor dem Abschicken pruefen
   will. Laengere Briefe lassen sich im Rahmen scrollen. */
.briefrahmen { display:block; width:100%; height:780px; margin-top:14px;
  border:1px solid var(--rule); border-radius:var(--radius); background:#fff; }
.textfassung { white-space:pre-wrap; font-family:var(--mono); font-size:12px;
  line-height:1.6; color:var(--ink2); background:var(--paper);
  border:1px solid var(--rule2); border-radius:var(--radius);
  padding:14px 16px; margin-top:10px; overflow:auto; max-height:360px; }

/* Testversand und Vollversand nebeneinander, aber nicht gleich gewichtet:
   der Test ist gefuellt, der Vollversand nicht. Wer hastig klickt, trifft
   den harmlosen. */
.senden-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.senden-form .knopf { flex:none; }

/* Ein Aufklapper fuer das Kleingedruckte. Der Satz, der erklaert, warum
   etwas so ist, muss nicht jeden Tag mitgelesen werden — aber er muss da
   sein, wenn jemand ihn braucht. */
details.leise { display:inline; }
details.leise summary { display:inline; cursor:pointer; color:var(--accent);
  list-style:none; }
details.leise summary::-webkit-details-marker { display:none; }
details.leise summary::after { content:" ›"; }
details.leise[open] summary::after { content:" ‹"; }

/* --- Die Tafeln (Baustein 8) ------------------------------------------------

   Eine Tafel soll im Vorbeigehen zwei Fragen beantworten: wie viele sind
   wo, und was liegt zu lange. Deshalb steht auf einer Karte nur Name,
   Haushalt und Tage — und was ueberfaellig ist, traegt einen Punkt, den
   man sieht, ohne die Zahl zu lesen.
   --------------------------------------------------------------------- */

.tafel-zweck { font-size:13.5px; color:var(--ink2); margin-bottom:14px; }

/* Waagerecht scrollen, wenn die Spalten nicht passen. Umbrechen waere
   schlimmer: eine Tafel, deren fuenfte Spalte unter der ersten steht,
   ist keine Tafel mehr. */
.brett { display:flex; gap:10px; align-items:stretch;
  overflow-x:auto; padding-bottom:6px; }
/* Eine sichtbare Bahn je Spalte.
   Ohne sie schweben die Karten frei auf der Seite: bei einer Karte je
   Spalte sieht man Kaesten in verschiedenen Hoehen, aber keine Spalten.
   Die Bahn ist nur eine Spur dunkler als die Seite und laeuft bis unten
   durch — auch wo keine Karte liegt. */
.spalte { flex:1 1 176px; min-width:172px; max-width:300px;
  background:rgba(23,50,78,.035); border-radius:var(--radius);
  padding:10px 10px 14px; align-self:stretch; }
[data-mode="dark"] .spalte { background:rgba(245,249,251,.035); }

/* Feste Hoehe fuer den Kopf, damit die Karten aller Spalten auf einer
   Linie beginnen, auch wenn eine Ueberschrift umbricht. */
.sp-oben { min-height:66px; border-bottom:1px solid var(--rule);
  padding-bottom:7px; }
/* Eine Endspalte draengt nicht — dort ist die Karte angekommen. Deshalb
   gestrichelt und blasser, nicht gruen: „Kein Interesse" ist auch ein
   Ende, aber kein gutes. Farbe waere eine Wertung, die das System nicht
   treffen kann. */
.spalte.ende .sp-oben { border-bottom-style:dashed; }
.spalte.ende .sp-name { color:var(--ink2); font-weight:500; }

.sp-kopf { display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; }
.sp-name { font-size:13px; font-weight:600; min-width:0; line-height:1.3; }
.sp-zahl { font-family:var(--mono); font-size:13px; color:var(--ink3);
  display:flex; align-items:center; gap:6px; }
.sp-faellig { background:var(--warn); color:var(--paper); border-radius:999px;
  font-size:11px; padding:1px 6px; font-family:var(--mono); }
.sp-frist { font-size:11px; color:var(--ink3); margin-top:2px; }

.karten { list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px; }
/* Eine leere Spalte zeigt einen leeren Platz, kein Wort. Ein
   gestricheltes Feld sagt „hier koennte eine Karte liegen"; das Wort
   „leer" muss man lesen, um dasselbe zu erfahren. */
.k-leer { border:1px dashed var(--rule); border-radius:var(--radius);
  min-height:52px; list-style:none; }

.karte-k { background:var(--sheet); border:1px solid var(--rule2);
  border-radius:var(--radius); padding:10px 11px 10px 22px; position:relative;
  cursor:grab; }
.karte-k:active { cursor:grabbing; }

/* Der Griff: zwei Punktreihen links, wie an einer Schublade. Er sagt
   „hier anfassen", ohne dass es irgendwo geschrieben steht. */
.k-griff { position:absolute; left:8px; top:13px; width:5px; height:13px;
  background-image:radial-gradient(currentColor 1px, transparent 1.2px);
  background-size:3px 4px; color:var(--ink3); opacity:.55; }
.karte-k:hover .k-griff { opacity:1; }

/* Was gerade in der Luft ist, bleibt sichtbar, tritt aber zurueck. */
.karte-k.zieht { opacity:.4; }
/* Und die Spalte, ueber der die Karte schwebt, sagt es. */
.spalte.ueber { background:var(--acc-soft); outline:2px dashed var(--accent);
  outline-offset:-2px; }

.k-name { font-size:14px; font-weight:600; display:block; }
.k-haus { font-size:12px; color:var(--ink3); margin-top:1px; }
/* `nowrap` auf den Teilen, `wrap` auf der Zeile: auf einem schmalen
   Schirm rutscht „nachfassen" unter „seit 9 Tagen", statt dass beide
   mitten im Wort umbrechen. */
.k-zeit { font-size:12px; color:var(--ink3); margin-top:5px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.k-tage, .k-wort { white-space:nowrap; }

/* Der Punkt ist das eigentliche Signal. Die Zahl daneben sagt, wie
   schlimm — aber gesehen hat man es schon vorher. Farbe traegt nicht
   allein: das Wort „nachfassen" steht daneben. */
.karte-k.faellig { border-color:var(--warn); }
.karte-k.faellig .k-zeit { color:var(--warn); }
.k-punkt { width:7px; height:7px; border-radius:50%; background:var(--warn);
  flex:none; }
.k-wort { font-weight:600; }
.k-warn { font-size:11px; color:var(--alarm); margin-top:4px; }

/* Der Weg fuer alle, die nicht ziehen koennen: Finger, Tastatur, kein
   Javascript. Er ist klein, weil er selten gebraucht wird — aber er ist
   vollstaendig und liegt an derselben Stelle wie die Karte. */
.k-mehr { margin-top:8px; }
.k-mehr summary { cursor:pointer; font-size:11.5px; color:var(--ink3);
  list-style:none; }
.k-mehr summary::-webkit-details-marker { display:none; }
.k-mehr summary::before { content:"+\00a0"; color:var(--accent); font-weight:700; }
.k-mehr[open] summary::before { content:"\2212\00a0"; }
.k-mehr summary:hover { color:var(--accent); }
.k-ziele { display:flex; flex-direction:column; gap:5px; margin-top:7px; }
/* Ein Knopf wird nie schmaler als sein Text, wenn man ihn laesst —
   `min-width:0` hebt das auf, damit er umbricht statt herauszuragen. */
.k-ziele .knopf { min-width:0; white-space:normal; text-align:center;
  line-height:1.3; padding:6px 10px; }

.sp-zeile { grid-template-columns:3px 1fr auto; }
.sp-zeile form { padding:8px 14px 8px 0; }
.sp-neu { margin-top:16px; }

/* Der Kopf der Tafel: links wozu sie da ist, rechts was liegenbleibt.
   Die Nachfass-Liste ist zu, bis jemand sie aufmacht — die Zahl und der
   Punkt sagen schon alles, was man im Vorbeigehen braucht. */
.tafel-kopf { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:14px; }
.tafel-kopf .tafel-zweck { margin:0; }
/* Nur eine Plakette, kein Aufklapper.
   Die aufgeklappte Liste legte sich ueber das Brett und verdeckte zwei
   Spalten — sie beantwortete eine Frage, die auf den Karten schon
   beantwortet ist: jede ueberfaellige traegt ihren Punkt, jede Spalte
   ihre Zahl. Was nichts hinzufuegt, darf auch nichts verdecken. */
.nachfass { flex:none; font-size:12.5px; color:var(--warn); font-weight:600;
  display:flex; align-items:center; gap:7px; border:1px solid var(--warn);
  background:var(--warn-soft); border-radius:999px; padding:6px 13px;
  white-space:nowrap; }
.nf-punkt { width:7px; height:7px; border-radius:50%; background:var(--warn);
  flex:none; }

/* --- Die Regeln der Tafel ---
   Sie stehen im Spaltenkopf, nicht in einem Aufklapper: eine Automatik,
   von der man beim Hinsehen nicht sieht, dass es sie gibt, ist eine, der
   niemand traut — und die dann jemand parallel von Hand nachmacht. */
/* Genau eine Zeile. Drei Regeln ausgeschrieben sind drei Zeilen je
   Spalte, und dann steht ueber dem Brett wieder eine Textwand, die man
   lesen muss. Der Punkt und der erste Pfeil sagen „hier laeuft etwas";
   was genau, steht im Tooltip und unter „Spalten aendern". */
.sp-regeln { font-size:10.5px; color:var(--accent); margin-top:4px;
  line-height:1.4; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; cursor:default; }

.tafel-rechts { display:flex; align-items:center; gap:10px; flex:none;
  flex-wrap:wrap; justify-content:flex-end; }
.automatik { display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--ok); border:1px solid var(--ok); border-radius:999px;
  padding:6px 13px; white-space:nowrap; }
.automatik.aus { color:var(--ink3); border-color:var(--rule); }
.au-punkt { width:7px; height:7px; border-radius:50%; background:var(--ok);
  flex:none; }
.automatik.aus .au-punkt { background:var(--ink3); }

/* Je Spalte ein Formular statt einer Zeile: hier wird eingestellt, nicht
   nur angesehen. */
.spaltenform { border:1px solid var(--rule2); border-radius:var(--radius);
  background:var(--sheet); padding:14px 16px; margin-bottom:10px; }
.sf-kopf { display:flex; align-items:baseline; gap:9px; margin-bottom:12px; }
.sf-kopf b { font-size:14.5px; }
.sf-regeln { display:grid; gap:12px; margin-top:2px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  border-top:1px solid var(--rule2); padding-top:12px; }
.sf-tun { display:flex; gap:8px; margin-top:12px; }
/* Die Tuer der Tafel. Ein Pfeil nach unten sagt „hier faellt etwas
   herein", bevor man das Wort liest. */
.sp-tuer { font-size:10.5px; color:var(--ok); margin-top:4px; font-weight:600;
  white-space:nowrap; }
.sf-aus { font-size:12px; color:var(--ink3); line-height:1.45; }

/* --- Woher sie kommen ---
   Der Balken traegt die Quote, nicht die Zahl der Anfragen: die Frage ist
   nicht „welcher Kanal bringt viele", sondern „welcher bringt welche, die
   bleiben". Die Zahl daneben sagt, auf wie vielen die Quote beruht —
   „1 von 1" sind hundert Prozent und trotzdem nichts wert. */
.k-woher { font-size:11px; color:var(--ink3); margin-top:3px; }

/* ACHTUNG: `.kanal` gibt es zweimal in dieser Datei — oben als kleine
   Marke („intern", „E-Mail") und hier als Zeile einer Auswertung. Ohne
   die Einschränkung auf `.kanalliste` überschreibt diese Regel die
   Marke im ganzen System: sie wurde zu einem Raster und zog sich über
   die volle Breite. Aufgefallen ist es erst bei der Pflicht-Marke im
   Wissen, kaputt war es überall.

   Das ist dieselbe Fehlerart wie bei `var(--acc-soft)`: ein Name, der
   an zwei Stellen etwas anderes bedeutet. Eine Prüfung hält jetzt fest,
   dass die zweite Fassung eingeschränkt bleibt. */
.kanalliste { display:flex; flex-direction:column; gap:2px; }
.kanalliste .kanal { display:grid; grid-template-columns:150px 1fr auto 52px;
  align-items:center; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--rule2); }
.kanalliste .kanal:last-child { border-bottom:none; }
.ka-name { font-size:13.5px; font-weight:600; }
.ka-balken { height:8px; border-radius:999px; background:var(--rule2);
  overflow:hidden; }
.ka-voll { height:100%; background:var(--ok); border-radius:999px; }
.ka-zahl { font-size:12.5px; color:var(--ink2); white-space:nowrap; }
.ka-quote { font-family:var(--mono); font-size:13px; text-align:right;
  color:var(--ink2); }

/* Die Breite als Klasse statt als style-Attribut: die strenge CSP dieses
   Systems erlaubt kein `style="…"` im HTML. Elf Stufen reichen fuer
   einen Balken, den niemand nachmisst. */
.ka-b0 { width:0; } .ka-b10 { width:10%; } .ka-b20 { width:20%; }
.ka-b30 { width:30%; } .ka-b40 { width:40%; } .ka-b50 { width:50%; }
.ka-b60 { width:60%; } .ka-b70 { width:70%; } .ka-b80 { width:80%; }
.ka-b90 { width:90%; } .ka-b100 { width:100%; }

/* --- Formulare -------------------------------------------------------------
   Im Studio eine Liste von Feldern, draussen eine Seite fuer einen Daumen.
   Die oeffentliche Seite benutzt die Ansicht der Elternseite mit — eine
   zweite Gestaltung fuer denselben Zweck laeuft mit der Zeit auseinander.
   --------------------------------------------------------------------- */

.ff-liste { border:1px solid var(--rule2); border-radius:var(--radius);
  overflow:hidden; margin-bottom:4px; }
.ff-zeile { display:flex; align-items:baseline; gap:12px;
  padding:9px 14px; border-bottom:1px solid var(--rule2); }
.ff-zeile:last-child { border-bottom:none; }
.ff-zeile.ff-titel { background:var(--acc-soft); }

/* Die laufende Nummer: sie ist die Reihenfolge auf der oeffentlichen
   Seite. Schmal und fest breit, damit die Beschriftungen untereinander
   auf einer Kante stehen. */
.ff-nr { flex:0 0 22px; font-family:var(--mono); font-size:11.5px;
  color:var(--ink3); text-align:right; }

.ff-was { min-width:0; flex:1; }
.ff-was b { font-size:14px; }
.ff-was span.zart { display:block; font-size:12px; margin-top:1px; }

.ff-muss { margin-left:7px; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:99px; padding:1px 6px;
  position:relative; top:-1px; }

/* Leise, bis man hinzeigt: neunmal untereinander waere ein geraenderter
   Knopf das Lauteste auf der Seite. */
.ff-weg { flex:0 0 auto; background:none; border:1px solid transparent;
  border-radius:99px; padding:3px 9px; font:inherit; font-size:11.5px;
  color:var(--ink3); cursor:pointer; opacity:.55; }
.ff-weg:hover, .ff-weg:focus-visible {
  opacity:1; color:var(--alarm); border-color:var(--alarm); }

/* Worum es in einer Anfrage ging — damit die Liste nicht nur aus Namen
   und Uhrzeiten besteht. */
.ff-worum { flex:1 1 40%; min-width:0; font-size:13px; color:var(--ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.weg-liste { margin:0; padding-left:18px; font-size:13px; color:var(--ink2);
  line-height:1.9; }

.antwortliste { margin:0; }
.antwortliste dt { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--ink3); margin-top:16px; }
.antwortliste dt:first-child { margin-top:0; }
.antwortliste dd { margin:4px 0 0; font-size:14.5px; line-height:1.6; }

/* --- Die oeffentliche Seite --- */
.ff-form { margin-top:8px; }
.ff-zwischen { font-size:18px; margin:30px 0 14px; padding-bottom:8px;
  border-bottom:1px solid var(--rule); }
.ff-eingabe { margin-bottom:20px; }
.ff-eingabe label { display:block; font-size:14.5px; font-weight:600;
  margin-bottom:6px; }
.ff-eingabe input, .ff-eingabe select, .ff-eingabe textarea {
  display:block; width:100%; font:inherit; font-size:16px;
  padding:12px 13px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--sheet); color:inherit; }
.ff-eingabe textarea { resize:vertical; }
/* 16px ist kein Zufall: darunter zoomt Safari auf dem iPhone beim
   Antippen in das Feld hinein, und die halbe Seite ist weg. */
.ff-eingabe.fehlt input, .ff-eingabe.fehlt select, .ff-eingabe.fehlt textarea {
  border-color:var(--alarm); background:var(--alarm-soft); }
.ff-frei { font-weight:400; font-size:12.5px; color:var(--ink3); }
.ff-hinweis { font-size:12.5px; color:var(--ink3); margin-top:5px;
  line-height:1.5; }

/* Die Honigfalle. Nicht `display:none`: manche Automaten fuellen nur aus,
   was sie fuer sichtbar halten, und manche Vorlesegeraete lesen
   `display:none` trotzdem vor. Weit weg geschoben und aus der
   Tastaturreihenfolge genommen ist beides erledigt. */
.ff-honig { position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; }

/* --- Bewertungen -----------------------------------------------------------
   Draussen fuenf grosse Flaechen fuer einen Daumen, drinnen eine Zeile,
   die sich ueberfliegen laesst. Die Sterne sind Schriftzeichen, kein Bild:
   sie skalieren mit, lassen sich vorlesen und laden nichts nach.
   --------------------------------------------------------------------- */

/* Draussen */
.bw-form { margin-top:8px; }
.bw-wahl { border:none; margin:0 0 22px; padding:0; }
.bw-legende { padding:0; margin:0 0 10px; font-size:14.5px; font-weight:600; }

.bw-zeile { margin-bottom:9px; }
/* Der Knopf selbst bleibt fuer Vorleseprogramme und die Tastatur da,
   sichtbar ist die Flaeche daneben. `display:none` nimmt ihn auch der
   Tastatur weg. */
.bw-zeile input { position:absolute; opacity:0; width:1px; height:1px; }
.bw-zeile label { display:flex; align-items:center; gap:14px;
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:14px 18px; cursor:pointer; background:var(--sheet);
  min-height:56px; }
.bw-zeile label:hover { border-color:var(--accent); }
.bw-zeile input:checked + label { border-color:var(--accent);
  border-width:2px; padding:13px 17px; background:var(--accent-soft); }
.bw-zeile input:focus-visible + label { outline:2px solid var(--accent);
  outline-offset:2px; }
.bw-s { font-size:21px; letter-spacing:2px; color:var(--accent);
  line-height:1; white-space:nowrap; }
.bw-w { font-size:15px; }
.bw-leer { color:var(--rule); }

.bw-auch { margin-top:26px; padding-top:18px; border-top:1px solid var(--rule); }

/* Drinnen */
.bw-sterne { color:var(--accent); letter-spacing:1px; white-space:nowrap; }
.bw-zelle { font-size:13px; white-space:nowrap; }
.bw-gross { font-size:30px; letter-spacing:3px; line-height:1; }
.bw-gross .bw-sterne { color:var(--accent); }
.bw-text { margin-top:16px; font-size:15.5px; line-height:1.65; }
.bw-b-wort { color:var(--accent); letter-spacing:1px; white-space:nowrap; }
/* Wenige Sterne bekommen den Alarmton: in einer Verteilung ist die
   untere Haelfte das, was man sehen soll. */
.ka-voll.schlecht { background:var(--alarm); }

/* Eigenes Raster: die Bewertungszeile hat eine Zelle mehr als die
   gewoehnliche Listenzeile. Ohne das rutschen Text und Uhrzeit in eine
   zweite Zeile, und die Liste laesst sich nicht mehr ueberfliegen. */
.bw-liste .zeile { grid-template-columns:3px 200px 116px 1fr 74px; }
@media (max-width: 900px) {
  .bw-liste .zeile { grid-template-columns:3px 1fr 110px 64px; }
  .bw-liste .was { display:none; }
}

.bw-portal { margin-top:4px; }
.bw-portal .ff-eingabe { margin-bottom:14px; }
.bw-portal-zeichen { background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent); }

/* --- Wissen ----------------------------------------------------------------
   47 Fragen. Wer sie als 47 leere Textfelder sieht, macht drei und hoert
   auf. Deshalb: anklicken statt tippen, ein Balken oben, Bereich fuer
   Bereich, offene zuerst.
   --------------------------------------------------------------------- */

.wi-balken { height:10px; border-radius:999px; background:var(--rule2);
  overflow:hidden; margin-bottom:9px; }
.wi-voll { height:100%; background:var(--ok); border-radius:999px; }
.wi-zahlen { font-size:13.5px; color:var(--ink2); }
.wi-t-offen { color:var(--accent); }
.wi-t-alt   { color:var(--alarm); }

.wi-bereich > summary { display:flex; align-items:center; gap:10px;
  cursor:pointer; padding:11px 14px; background:var(--sheet);
  border:1px solid var(--rule); border-radius:var(--radius);
  list-style:none; }
.wi-bereich > summary::-webkit-details-marker { display:none; }
.wi-bereich > summary::before { content:'▸'; color:var(--ink3); font-size:12px; }
.wi-bereich[open] > summary::before { content:'▾'; }
.wi-b-name { font-weight:600; font-size:14.5px; flex:1; }

.wi-marke { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border-radius:99px; padding:2px 8px; white-space:nowrap; }
.wi-marke.offen { color:var(--accent); border:1px solid var(--accent); }
.wi-marke.alt   { color:var(--alarm);  border:1px solid var(--alarm); }
.wi-marke.ok    { color:var(--ink3);   border:1px solid var(--rule); }

.wi-frage { border:1px solid var(--rule2); border-top:none;
  padding:14px; background:var(--paper); }
.wi-frage:first-of-type { border-top:1px solid var(--rule2); margin-top:8px; }
.wi-offen { background:var(--accent-soft); }
.wi-alt   { border-left:3px solid var(--alarm); }

.wi-kopf { display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:9px; }
.wi-was { min-width:0; }
.wi-was b { font-size:14.5px; display:block; }
.wi-was span.zart { font-size:12px; display:block; margin-top:2px; }

.wi-antwort { font-size:14.5px; line-height:1.55; margin-bottom:10px;
  padding-left:11px; border-left:2px solid var(--rule); }

.wi-knoepfe { display:flex; gap:7px; flex-wrap:wrap; }
.wi-knoepfe .knopf { min-width:0; }

.wi-mehrfach { display:flex; flex-direction:column; gap:5px; }
.wi-haken { display:flex; align-items:center; gap:8px; }
.wi-haken label { font-size:14px; cursor:pointer; }
.wi-mehrfach .knopf { align-self:flex-start; margin-top:6px; }

.wi-text { display:flex; gap:8px; align-items:flex-start; }
.wi-text textarea, .wi-text input { flex:1; min-width:0; }
.wi-text .knopf { flex:0 0 auto; }

.wi-fuss { display:flex; gap:14px; margin-top:9px; }
.wi-leise { background:none; border:none; padding:0; font:inherit;
  font-size:12px; color:var(--ink3); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.wi-leise:hover { color:var(--ink); }

.wi-neu textarea { width:100%; margin-bottom:7px; }

/* „Zu klären" ist der dritte Zustand und braucht ein eigenes Zeichen.
   Eine vierte Farbe gibt es nicht: im hellen Modus sind --accent und
   --warn derselbe Bronzeton. Also gestrichelt statt bunt — dasselbe
   Mittel wie bei der Endspalte auf der Tafel. */
.wi-marke.klaeren { color:var(--warn); border:1px dashed var(--warn); }
.wi-t-klaeren     { color:var(--warn); }
.wi-klaeren       { border-left:3px dashed var(--warn); }

.wi-offenpunkt { font-size:13px; line-height:1.5; margin-bottom:10px;
  padding:8px 11px; border:1px dashed var(--warn); border-radius:6px;
  background:var(--warn-soft); color:var(--ink2); }
.wi-offenpunkt b { color:var(--warn); }
.wi-offenpunkt .fussnote { margin-top:5px; }

/* Was schon dasteht. Ein Fund, keine Antwort — deshalb flach und grau,
   nicht als Vorschlag hervorgehoben. */
.wi-fund { margin-top:10px; padding-top:9px; border-top:1px dotted var(--rule2); }
.wi-fund-kopf { font-size:11.5px; color:var(--ink3); margin-bottom:6px; }
.wi-fund-zeile { display:flex; align-items:flex-start; gap:12px;
  padding:5px 0; }
.wi-fund-text { flex:1; min-width:0; }
.wi-fund-text b { font-size:13px; display:block; font-weight:600; }
.wi-fund-text span { font-size:12px; color:var(--ink3); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wi-fund-zeile .wi-leise { flex:0 0 auto; white-space:nowrap; }

/* Der Diktierknopf. Sitzt im Textfluss neben dem Feld, nicht darüber:
   ein Knopf, der auf dem Feld liegt, verdeckt auf dem Handy genau die
   Stelle, an der man tippen will. */
.wi-mikro { flex:0 0 auto; background:none; border:1px solid var(--rule);
  border-radius:999px; width:34px; height:34px; cursor:pointer;
  font-size:15px; line-height:1; padding:0; color:var(--ink2); }
.wi-mikro:hover { border-color:var(--ink3); }
.wi-mikro.an { border-color:var(--alarm); background:var(--alarm-soft); }
.wi-klaeren-auf .wi-mikro, .wi-neu .wi-mikro { margin-right:7px;
  vertical-align:top; }
.wi-mikro-hinweis { margin-top:6px; }

/* EIGENE KLASSE, NICHT `.zeile` MITBENUTZT.
   `.zeile` ist ein Raster aus vier Spalten, und die erste ist 3 Pixel
   breit — dort liegt sonst der Statusstreifen. Wer die Klasse ohne
   Streifen benutzt, schiebt seinen ersten Inhalt in diese 3 Pixel und
   sieht ihn nie wieder. Genau so passiert.
   Dieselbe Fehlerart wie bei `.kanal`: eine gemeinsame Klasse benutzen,
   ohne ihre Annahmen zu prüfen. */
.ruecklauf { margin-bottom:16px; }
.rl-zahlen { font-size:13.5px; color:var(--ink2); margin-bottom:10px; }

.ki-leiste { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ki-leiste .fussnote { flex:1; margin:0; }
.ki-leiste select { flex:0 0 auto; }

.wi-einsetz { display:grid; grid-template-columns:1fr 40%;
  align-items:baseline; gap:14px; padding:7px 0; cursor:pointer;
  border-bottom:1px solid var(--rule2); }
.wi-einsetz:last-child { border-bottom:none; }
.wi-einsetz:hover { background:var(--accent-soft); }
.wi-e-kennung b { font-family:var(--mono); font-size:12px; display:block; }
.wi-e-kennung span { font-size:12px; color:var(--ink3); display:block;
  margin-top:2px; }
.wi-e-antwort { font-size:12.5px; color:var(--ink2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.kanal.gilt { color:var(--ink3); border-color:var(--rule); }
.kanal.pflicht { color:var(--alarm); border-color:var(--alarm); }

.wi-klaeren-auf { margin-top:9px; }
.wi-klaeren-auf > summary { font-size:11.5px; color:var(--ink3);
  cursor:pointer; list-style:none; }
.wi-klaeren-auf > summary::-webkit-details-marker { display:none; }
.wi-klaeren-auf > summary:hover { color:var(--ink); }
.wi-klaeren-auf textarea { width:100%; margin:7px 0; }

/* --- Der Plan einer Veranstaltung ---
   Wie `.kette`, aber mit einer Spalte mehr: links das gerechnete Datum.
   Ohne die Spalte muesste man jede Zeile lesen, um zu sehen, was als
   Naechstes dran ist; mit ihr sieht man es am Rand. Bewusst NICHT
   `.kettenglied` wiederverwendet — dessen Raster hat drei Spalten, und
   eine Klasse, die an zwei Stellen etwas anderes bedeutet, hat dieses
   Projekt schon zweimal Zeit gekostet (`.kanal`, `.zeile`). */
.plankette { list-style:none; margin:4px 0 0; padding:0; position:relative; }
.plankette::before { content:""; position:absolute; left:113px; top:20px;
  bottom:20px; width:1px; background:var(--rule); }
.planglied { display:grid; grid-template-columns:96px 36px 1fr auto;
  align-items:start; gap:0 14px; padding:9px 0; position:relative; }
.pg-wann { padding-top:8px; text-align:right; }
.pg-wann b { display:block; font-size:13px; font-weight:600; }
.pg-wann span { display:block; font-size:11.5px; color:var(--ink3); }
.pg-marke { width:36px; height:36px; border-radius:50%; background:var(--sheet);
  border:1px solid var(--rule); display:flex; align-items:center;
  justify-content:center; position:relative; z-index:1; color:var(--ink2); }
.pg-marke .sinnbild { width:16px; height:16px; }
.pg-text { min-width:0; padding-top:8px; }
.pg-text b { display:block; font-size:14.5px; font-weight:600; }
.pg-wer, .pg-betreff { display:block; font-size:12.5px; color:var(--ink2);
  margin-top:2px; }
.pg-ergebnis { display:block; font-size:12.5px; color:var(--ink3);
  margin-top:3px; }
.pg-knoepfe { padding-top:8px; display:flex; gap:6px; flex-wrap:wrap;
  justify-content:flex-end; }

/* Nachrichten heben sich ab: bei ihnen geht etwas hinaus. */
.planglied.art-nachricht .pg-marke { border-color:var(--accent);
  color:var(--accent); }

/* Ueberfaellig ist der einzige Zustand, der einen Blick verlangt. */
.planglied.spaet .pg-marke { border-color:var(--alarm); color:var(--alarm); }
.planglied.spaet .pg-wann b { color:var(--alarm); }

/* Erledigt und weggelassen treten zurueck, verschwinden aber nicht: ein
   Plan ohne seine erledigten Schritte sieht aus wie ein Plan, an dem
   niemand gearbeitet hat. Weggelassen wird gestrichelt statt eingefaerbt
   — dasselbe Mittel wie bei der Endspalte auf der Tafel. */
.planglied.fertig .pg-text b, .planglied.fertig .pg-wann b { color:var(--ink3);
  font-weight:500; }
.planglied.fertig .pg-marke { border-color:var(--ok); color:var(--ok); }
.planglied.uebersprungen .pg-marke { border-style:dashed; }
.planglied.uebersprungen .pg-text b { color:var(--ink3);
  text-decoration:line-through; }

/* --- Kleine Listen auf den Veranstaltungsseiten --- */
.planliste { display:flex; flex-direction:column; gap:1px; margin:4px 0 12px; }
.planzeile { display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--rule2); }
.planzeile:last-child { border-bottom:0; }
.pz-marke { width:24px; color:var(--ink3); display:flex; }
.pz-marke .sinnbild { width:16px; height:16px; }
.pz-text { flex:1; min-width:0; }
.pz-text b { display:block; font-size:14px; font-weight:600; }
.pz-text span { display:block; font-size:12.5px; color:var(--ink3); }
.planzeile.spaet .pz-text b { color:var(--alarm); }

@media (max-width:820px) {
  .plankette::before { display:none; }
  .planglied { grid-template-columns:1fr auto; gap:4px 10px; }
  .planglied .pg-marke { display:none; }
  .pg-wann { text-align:left; padding-top:0; }
  .pg-wann b, .pg-wann span { display:inline; margin-right:8px; }
  .pg-text { padding-top:0; grid-column:1 / -1; }
  .pg-knoepfe { padding-top:0; }
  .pg-aendern { margin-left:0; }
}

/* Das Aenderungsformular eines Planschritts: zugeklappt ein Wort, sonst
   staenden neun Textfelder untereinander und der Plan waere nicht mehr zu
   ueberblicken.

   Es liegt als eigene Rasterzeile UNTER der Zeile, nicht in der
   Textspalte. Im ersten Anlauf stand es darin — und weil die Textspalte
   nur so breit ist, wie der Text sie macht, war das Textfeld rund 200
   Pixel breit und die drei Artkacheln lagen untereinander. Eine Spalte,
   die sich nach ihrem Inhalt richtet, ist kein Platz fuer ein Formular. */
.pg-aendern { grid-column:1 / -1; margin:2px 0 10px 160px; }
.pg-aendern > summary { font-size:11.5px; color:var(--ink3); cursor:pointer;
  list-style:none; display:inline-block; }
.pg-aendern > summary::-webkit-details-marker { display:none; }
.pg-aendern > summary:hover { color:var(--ink); }
.pg-aendern[open] > summary { color:var(--ink); margin-bottom:8px; }
.pg-aendern form { padding:12px 14px; border:1px solid var(--rule);
  border-radius:8px; background:var(--paper); }
.pg-aendern textarea, .pg-aendern input[type=text], .pg-aendern input:not([type]) {
  width:100%; }

/* --- Der Korrekturvorschlag nach dem Diktat ---
   Er steht UNTER dem Feld und fasst es nicht an. Ein Modell, das ein Feld
   unbemerkt umschreibt, waere das Gegenteil von dem, was dieses Projekt
   sonst tut — deshalb sieht man erst, was herauskaeme, und entscheidet
   dann. */
/* Nur mit Kasten umbrechen. `.wi-text` ist sonst absichtlich eine Zeile;
   das Verhalten fuer alle zu aendern waere zu viel fuer diesen Zweck. */
.wi-text:has(.wi-korrektur) { flex-wrap:wrap; }
.wi-text .wi-korrektur { flex:0 0 100%; }

.wi-korrektur { margin:8px 0 2px; padding:10px 12px; border:1px solid var(--accent);
  border-radius:8px; background:var(--accent-soft); font-size:13px; }
.wi-korrektur.leise { border-color:var(--rule); background:transparent;
  color:var(--ink3); padding:4px 0; font-size:12px; }
.wi-korrektur.wartet { border-style:dashed; color:var(--ink3); }
.wi-k-frage { font-weight:600; margin-bottom:6px; }
.wi-k-text { white-space:pre-wrap; line-height:1.55; padding:8px 10px;
  background:var(--sheet); border-radius:6px; border:1px solid var(--rule2); }
.wi-k-knoepfe { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }

/* --- Dieselbe Frage, zweimal ---
   Der Katalog ist nach Oksanas echter FAQ gewachsen, und der Import hat
   dieselbe FAQ danach noch einmal als eigene Fragen hereingeholt. Wer
   die Katalogfrage beantwortet, sah die eigene weiter als offen. Der
   Kasten sagt, wohin die Frage gehoert. */
.wi-zwilling { margin:8px 0 2px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--ok); background:var(--ok-soft); font-size:13px; }
.wi-zwilling.wi-z-offen { border-color:var(--accent);
  background:var(--accent-soft); }
.wi-z-kopf { line-height:1.5; }
.wi-z-text { margin-top:7px; padding:8px 10px; background:var(--sheet);
  border:1px solid var(--rule2); border-radius:6px; line-height:1.55; }
.wi-z-fuss { display:flex; gap:10px; align-items:center; margin-top:9px;
  flex-wrap:wrap; }

/* --- Der KI-Vorschlag ---
   Wie der Korrekturkasten: er steht UNTER dem Feld und fasst es nicht
   an. Der Unterschied ist die Warnung — ein Vorschlag DARF Geratenes
   enthalten, das ist sein Zweck, aber er darf es nicht verstecken. */
.wi-v-anstoss { margin-top:7px; }
.wi-vorschlagen { font-size:12px; }
.wi-vorschlag { grid-column:1 / -1; margin:9px 0 2px; padding:11px 13px;
  border:1px solid var(--accent); border-radius:8px;
  background:var(--accent-soft); font-size:13px; }
.wi-vorschlag.leise { border-color:var(--rule); background:transparent;
  color:var(--ink3); padding:4px 0; font-size:12px; }
.wi-vorschlag.wartet { border-style:dashed; color:var(--ink3); }
.wi-v-kopf { font-weight:600; margin-bottom:7px; }
.wi-v-text { white-space:pre-wrap; line-height:1.55; padding:9px 11px;
  background:var(--sheet); border:1px solid var(--rule2); border-radius:6px; }

/* Eine geratene Zahl faellt auf, ohne dass man die Warnung lesen muss. */
.wi-geraten { background:var(--alarm-soft); color:var(--alarm);
  font-weight:600; padding:0 3px; border-radius:3px;
  border-bottom:2px solid var(--alarm); }
.wi-v-warnung { margin-top:8px; font-size:12.5px; color:var(--alarm);
  line-height:1.5; }
.wi-v-knoepfe { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.wi-herkunft { margin-top:6px; font-size:11.5px; color:var(--ink3); }

/* --- Wörtlich gleiche Fragen zusammenlegen --------------------------------
   EIGENE KLASSEN, KEINE GEERBTEN.

   `.zeile` ist ein Raster aus vier Spalten, deren erste 3 Pixel breit
   ist — dort liegt sonst der Statusstreifen. Wer hier `.zeile` nimmt,
   schiebt das Kästchen in diese 3 Pixel. Genau das ist bei `.kanal`,
   bei `.pg-text`, bei `.wi-text` und beim Änderungsformular der
   Planschritte schon passiert. Vier Mal reicht. */
.wi-gleich > summary { cursor:pointer; padding:4px 0; line-height:1.5; }
.wi-gleich > summary:hover { color:var(--ink); }
.wi-gleich .hinweis { margin:10px 0 12px; }

.wi-g-liste { border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; margin-bottom:12px; }
.wi-g-zeile { display:grid; grid-template-columns:22px 1fr;
  gap:2px 10px; align-items:start; padding:9px 12px;
  border-bottom:1px solid var(--rule); cursor:pointer; }
.wi-g-zeile:last-child { border-bottom:none; }
.wi-g-zeile:hover { background:var(--sheet); }
.wi-g-zeile input { margin-top:3px; }
.wi-g-frage { font-weight:600; line-height:1.45; }
.wi-g-bereich { font-weight:400; font-size:11.5px; color:var(--ink3);
  margin-left:7px; }
.wi-g-antwort { grid-column:2; font-size:12.5px; color:var(--ink2);
  line-height:1.5; }

/* --- Antworten von einem anderen Standort übernehmen ----------------------
   Wieder eigene Klassen. Siehe die Begründung bei .wi-g-zeile. */
.wi-u-lead { margin:6px 0 12px; line-height:1.55; }
.wi-u-wege { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.wi-u-liste { border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; margin-top:10px; }
.wi-u-zeile { display:grid; grid-template-columns:22px 1fr;
  gap:3px 10px; align-items:start; padding:10px 13px;
  border-bottom:1px solid var(--rule); cursor:pointer; }
.wi-u-zeile:last-child { border-bottom:none; }
.wi-u-zeile:hover { background:var(--sheet); }
.wi-u-zeile input { margin-top:3px; }
.wi-u-frage { font-weight:600; line-height:1.45; }
.wi-u-antwort { grid-column:2; font-size:12.5px; color:var(--ink2);
  line-height:1.55; white-space:pre-wrap; }
.wi-u-offen { grid-column:2; font-size:12px; color:var(--warn);
  line-height:1.5; margin-top:2px; }

/* Zahlen sind der einzige Hinweis, den die Seite geben darf — gestrichelt
   wie überall sonst, wo etwas „ansehen" und nicht „falsch" heißt. */
.wi-u-zeile.zahlen { border-left:3px dashed var(--warn); padding-left:10px; }
.kanal.zahlen { color:var(--warn); border:1px dashed var(--warn); }

/* --- Die Zahlen im Kopf sind Wege, keine Beschriftung -------------------
   Oksana am 26.09.2026: „Ich muss dann raussuchen, wo sind diese."
   Eine Zahl, auf die man zeigt, wenn man etwas sucht, muss anfassbar
   sein. Sie bleiben optisch Fließtext — ein Kopf aus sechs Knöpfen wäre
   lauter als die Liste darunter. */
.wi-zahlen a.wi-zahl { color:inherit; text-decoration:none;
  border-bottom:1px dotted var(--rule); padding-bottom:1px; }
.wi-zahlen a.wi-zahl:hover { border-bottom-style:solid;
  border-bottom-color:currentColor; }
.wi-zahlen a.wi-zahl.an { border-bottom:2px solid currentColor;
  font-weight:600; }
.wi-zahlen a.wi-t-offen { color:var(--accent); }
.wi-zahlen a.wi-t-klaeren { color:var(--warn); }
.wi-zahlen a.wi-t-alt { color:var(--alarm); }

.wi-gefiltert { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--ink2); }
.wi-t-ok { color:var(--ink3); }

.wi-v-geld { font-size:12px; color:var(--ink3); line-height:1.5;
  border-left:2px dashed var(--rule); padding-left:9px; }

/* --- Die Website als Quelle ---------------------------------------------
   Eigene Klassen, siehe die Begründung bei .wi-g-zeile. */
.wi-w-knoepfe { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wi-w-knoepfe form { margin:0; }

.wi-w-liste { border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; margin-top:10px; }
.wi-w-zeile { padding:10px 13px; border-bottom:1px solid var(--rule); }
.wi-w-zeile:last-child { border-bottom:none; }
.wi-w-frage { font-weight:600; line-height:1.45; }
.wi-w-antwort { font-size:12.5px; color:var(--ink2); line-height:1.55;
  white-space:pre-wrap; margin-top:3px; }
.wi-w-beleg { font-size:11.5px; color:var(--ink3); line-height:1.5;
  margin-top:4px; }
.wi-w-beleg a { color:var(--ink3); }

.wi-w-verworfen, .wi-w-seiten { margin-top:14px; }
.wi-w-verworfen > summary, .wi-w-seiten > summary { cursor:pointer;
  font-size:12.5px; color:var(--ink3); padding:4px 0; }
.wi-w-verworfen > summary:hover, .wi-w-seiten > summary:hover { color:var(--ink); }

/* Zwei Fassungen nebeneinander. Untereinander waere der Vergleich, um
   den es geht, nicht in einem Blick zu machen. */
.wi-w-ab { border:1px solid var(--warn); border-radius:8px;
  padding:13px 15px; margin-top:12px; }
.wi-w-gegen { display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:9px; }
.wi-w-kopf { font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:4px; }
.wi-w-wahl { margin-top:11px; }
.wi-w-wahl form { display:flex; gap:8px; flex-wrap:wrap; margin:0; }
@media (max-width:700px) { .wi-w-gegen { grid-template-columns:1fr; } }

/* ===========================================================================
   DIE SUMOS
   ---------------------------------------------------------------------------
   Zwei Ebenen Farbe. Jede Abteilung hat einen Ton und einen hellen
   Waschton (`abt-<kennung>`), jeder gezeichnete Sumo überschreibt ihn mit
   seinem eigenen (`sumo-<kennung>`). Deshalb steht die Abteilungsklasse
   im HTML immer VOR der Sumoklasse, und die Sumoregeln stehen hier
   DAHINTER: bei gleicher Spezifität gewinnt die spätere Regel.

   Gesetzt wird beides über Klassen, nicht über style="…". Die
   Inhaltsrichtlinie erlaubt kein style-Attribut im HTML.
   =========================================================================== */

.abt-kundinnen  { --ton:#007E8C; --wasch:#E8F9FA; }
.abt-unterricht { --ton:#B44C67; --wasch:#FFF0F3; }
.abt-marketing  { --ton:#8E6B12; --wasch:#FFF9DF; }
.abt-geld       { --ton:#2F7A63; --wasch:#E7F7F0; }
.abt-leitung    { --ton:#6B57A8; --wasch:#F3EEFC; }

.sumo-molly  { --ton:#007E8C; --wasch:#E8F9FA; }
.sumo-dolly  { --ton:#B44C67; --wasch:#FFF0F3; }
.sumo-googly { --ton:#8E6B12; --wasch:#FFF9DF; }
.sumo-lumi   { --ton:#805AA5; --wasch:#F6EFFD; }
.sumo-seoli  { --ton:#397BA5; --wasch:#EAF5FC; }
.sumo-soci   { --ton:#35836B; --wasch:#EAFBF2; }

/* --- In der Leiste --------------------------------------------------------- */

.leiste a.sumo { justify-content:flex-start; gap:9px; padding:6px 10px; }
.leiste a.sumo img { width:26px; height:26px; flex:0 0 auto;
                     object-fit:contain; }
.leiste a.sumo .ohnebild { width:26px; height:26px; border-radius:50%;
                           flex:0 0 auto; }
.leiste a.sumo .ohnebild { display:flex; align-items:center; justify-content:center;
                           background:var(--wasch); color:var(--ton);
                           font-size:12px; font-weight:700; }
.leiste a.sumo:hover  { background:var(--wasch); }
.leiste a.sumo.an     { background:var(--wasch); color:var(--ton); font-weight:650; }
.leiste a.leisemehr   { font-size:12.5px; color:var(--rail-fg2); }
.leiste .leernotiz    { display:block; padding:5px 22px 2px; font-size:12px;
                        color:var(--rail-fg2); }

/* --- Die Abteilungen ------------------------------------------------------- */

.abtkopf { display:flex; align-items:center; gap:9px; margin-bottom:3px; }
.abtkopf h2 { margin:0; }
.abtzahl { font-family:var(--mono); font-size:11px; font-weight:600;
           color:var(--ton); background:var(--wasch);
           border-radius:999px; padding:2px 9px; }
.abtsatz { margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--fg2);
           max-width:70ch; }

/* --- Die Karten ------------------------------------------------------------ */

.sumogitter { display:grid; gap:16px; align-items:stretch;
              grid-template-columns:repeat(auto-fill, minmax(216px, 1fr)); }
.sumokarte { display:flex; flex-direction:column; background:var(--sheet);
             border:1px solid var(--line2); border-radius:16px;
             padding:16px 16px 14px; }
.sumokarte:hover { border-color:var(--ton); }
.sumolink { display:block; flex:1; text-decoration:none; color:inherit; }
.kartekopf { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sumolink .kopfbild { width:48px; height:48px; flex:0 0 auto;
                      object-fit:contain; border:0; }
.sumolink .ohnebild { width:48px; height:48px; flex:0 0 auto; display:flex;
                      align-items:center; justify-content:center;
                      border-radius:50%; background:var(--wasch); }
.sumolink .ohnebild span { font-family:var(--serif); font-size:22px;
                           font-weight:700; color:var(--ton); line-height:1; }
.sumokarte .name  { font-size:15.5px; font-weight:700; color:var(--fg);
                    letter-spacing:-.01em; }
.sumokarte .rolle { font-size:12.5px; font-weight:600; color:var(--ton);
                    margin-top:1px; }
.sumokarte .satz  { font-size:13px; line-height:1.5; color:var(--fg2);
                    margin-top:9px; }

.kartenfuss { display:flex; align-items:center; justify-content:space-between;
              gap:10px; margin-top:13px; flex-wrap:wrap; }
.kartenfuss form { margin:0; }
.zustand { display:inline-block; font-size:11px; font-weight:600;
           letter-spacing:.02em; color:var(--ton); background:var(--wasch);
           border-radius:999px; padding:3px 10px; }
.leisehinweis { font-size:11.5px; color:var(--fg3); }
.knopf.klein.an { background:var(--ton); border-color:transparent;
                  color:#FFFFFF; }

/* --- Ein einzelner Sumo ---------------------------------------------------- */

.sumokopf { display:flex; align-items:center; gap:22px; background:var(--wasch);
            border-radius:18px; padding:20px 24px; }
.sumokopf .figur { width:168px; height:168px; object-fit:contain;
                   flex:0 0 auto; }
.sumokopf .ohnebild.figur { display:flex; align-items:center;
                            justify-content:center; border-radius:50%;
                            background:#FFFFFF; }
.sumokopf .ohnebild span { font-family:var(--serif); font-size:58px;
                           font-weight:700; color:var(--ton); line-height:1; }
.sumokopf .rolle { font-size:13px; font-weight:700; color:var(--ton);
                   letter-spacing:.02em; }
.sumokopf p { margin:7px 0 0; font-size:14.5px; line-height:1.55;
              color:var(--fg); max-width:52ch; }
.sumokopf .zustand { background:#FFFFFF; }
.sumokopf .kartenfuss { justify-content:flex-start; }

/* --- Die Grusskarte auf der Uebersicht ------------------------------------- */

.gruss { display:flex; align-items:center; gap:20px; background:var(--acc-soft);
         border-radius:18px; padding:14px 22px; margin-bottom:16px; }
.gruss img { width:96px; height:96px; object-fit:contain; flex:0 0 auto; }
.gruss h2 { font-family:var(--serif); font-size:21px; font-weight:700; margin:0;
            letter-spacing:-.015em; color:var(--fg); }
.gruss p  { margin:4px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg2); }


/* Die Stichpunkte auf der Seite eines Sumos.
   Nicht .zeile: die ist ein Raster aus Name, Text und Zeitspalte und
   schneidet lange Namen ab. Hier steht ein ganzer Satz in einer Spalte. */
.kannliste { list-style:none; margin:0; padding:0; background:var(--sheet);
             border:1px solid var(--line2); border-radius:16px; overflow:hidden; }
.kannliste li { display:flex; align-items:center; gap:12px;
                padding:13px 20px; font-size:14px; color:var(--fg);
                border-top:1px solid var(--line2); }
.kannliste li:first-child { border-top:0; }
.kannliste li::before { content:""; width:6px; height:6px; border-radius:50%;
                        background:var(--acc); flex:0 0 auto; }

/* --- Dunkel ---------------------------------------------------------------- */
/* Die Zeichnungen bleiben hell, dagegen ist nichts zu machen. Die
   Waschtoene dahinter muessen aber zurueckgenommen werden, sonst
   leuchten sie in einer dunklen Ansicht wie Lampen. */

[data-mode="dark"] .abt-kundinnen  { --ton:#4CC7D2; --wasch:rgba(0,126,140,.16); }
[data-mode="dark"] .abt-unterricht { --ton:#E89AAC; --wasch:rgba(180,76,103,.16); }
[data-mode="dark"] .abt-marketing  { --ton:#FFD039; --wasch:rgba(142,107,18,.20); }
[data-mode="dark"] .abt-geld       { --ton:#7FCBAE; --wasch:rgba(47,122,99,.18); }
[data-mode="dark"] .abt-leitung    { --ton:#C4A6E3; --wasch:rgba(107,87,168,.18); }

[data-mode="dark"] .sumo-molly  { --ton:#4CC7D2; --wasch:rgba(0,126,140,.16); }
[data-mode="dark"] .sumo-dolly  { --ton:#E89AAC; --wasch:rgba(180,76,103,.16); }
[data-mode="dark"] .sumo-googly { --ton:#FFD039; --wasch:rgba(142,107,18,.20); }
[data-mode="dark"] .sumo-lumi   { --ton:#C4A6E3; --wasch:rgba(128,90,165,.18); }
[data-mode="dark"] .sumo-seoli  { --ton:#8CBCDE; --wasch:rgba(57,123,165,.18); }
[data-mode="dark"] .sumo-soci   { --ton:#7FCBAE; --wasch:rgba(53,131,107,.18); }

[data-mode="dark"] .sumokopf .zustand { background:rgba(255,255,255,.07); }
[data-mode="dark"] .knopf.klein.an    { color:#0B1724; }

/* Der Diktat-Hinweis auf der Wissensseite: zugeklappt, bis jemand ihn will. */
.wi-mikro-hinweis summary { cursor:pointer; font-weight:600; color:var(--fg2);
                            padding:2px 0; }
.wi-mikro-hinweis summary:hover { color:var(--acc); }
.wi-mikro-hinweis > div { margin-top:6px; max-width:70ch; }