/* Betreiberbereich des Vereins-Copiloten — Richtung „Eingang" (11.09.2026).
 *
 * Gewählt aus drei Mustern (docs/design-muster/admin/c.html): links der
 * Stapel dessen, was wartet, rechts mitlaufend die Vereine. Größere Schrift,
 * mehr Luft, warmer Grund.
 *
 * DIE EINZIGE STELLE MIT GESTALTUNGSWERTEN für diesen Bereich, wie
 * web/stil.css für die Anwendung: Farben stehen als Variablen im :root-Block
 * und nirgends sonst (test/admin-stil.test.mjs hält das fest). Zustände
 * kommen als data-Attribut aus dem HTML; welche Farbe daraus wird, steht hier.
 *
 * Ausgeliefert vom Admin-Prozess unter /stil.css. Er läuft mit der strengen
 * Inhaltsregel — Stil im Dokument wäre wirkungslos.
 */

:root {
  --grund: #f5f1e8;
  --papier: #fffdf7;
  --papier-2: #fbf8f0;
  --linie: #e3dccd;
  --linie-2: #eee8dc;
  --feld-linie: #cfc8b8;
  --ink: #1c1f1b;
  --ink-2: #5a6058;
  /* Nachgerechnet: #737870 stand auf --papier bei 4,3:1, unter der
   * Schwelle von 4,5:1 für kleinen Text. #6a6f68 hält 5,0:1 auf dem Papier
   * und 4,6:1 auf dem Seitengrund. */
  --ink-3: #6a6f68;
  --akzent: #1f644d;
  --akzent-tief: #174c3b;
  --akzent-hell: #e6f0ea;
  --akzent-linie: #cfe0d6;
  --gruen: #237a57;
  --amber: #9a641d;
  --amber-linie: #d8b77c;
  --fehler: #a14034;
  --fehler-hell: #f8eae7;
  --fehler-linie: #e4c5be;
  --grau: #a3a79f;
  --gold: #c9a55f;
  --gold-hell: #fbf4e4;
  --weiss: #ffffff;
  --fokus: rgba(31, 100, 77, .3);
  --schatten: 0 1px 2px rgba(40, 35, 20, .04);

  --disp: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --r: 16px;
  --r-feld: 12px;
  --klickziel: 44px;
  --raum: 80rem;
  --leistenbreite: 24rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); letter-spacing: -.02em; }
p, form { margin: 0; }
a { color: var(--akzent); }
button, input { font: inherit; }
code, .mono { font-family: var(--mono); font-size: .8rem; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.leise { color: var(--ink-2); font-size: .86rem; }
.leise[data-ton="amber"] { color: var(--amber); font-weight: 600; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------------ Kopf */
.kopf { max-width: var(--raum); margin: 0 auto; padding: 1.4rem 2rem 0; display: flex; align-items: center; gap: 1rem; }
.marke { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); }
.marke__zeichen { width: 2.3rem; height: 2.3rem; flex: none; border-radius: .75rem; background: var(--akzent); display: inline-grid; }
.marke__zeichen::before { content: ""; background: var(--weiss); -webkit-mask: url("/zeichen.svg") center / 100% no-repeat; mask: url("/zeichen.svg") center / 100% no-repeat; }
.marke__text b { display: block; font: 720 1rem/1.1 var(--disp); letter-spacing: -.02em; }
.marke__text small { display: block; color: var(--amber); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

/* ------------------------------------------------------- Knöpfe, Felder */
.knopf { min-height: var(--klickziel); padding: 0 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--akzent); border-radius: 999px; background: var(--akzent); color: var(--weiss); font-weight: 650; font-size: .92rem; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.knopf:hover { background: var(--akzent-tief); transform: translateY(-1px); }
.knopf[data-art="leise"] { background: transparent; color: var(--ink); border-color: var(--linie); }
.knopf[data-art="leise"]:hover { background: var(--papier); border-color: var(--ink-3); }
.knopf[data-art="warn"] { background: transparent; color: var(--fehler); border-color: var(--fehler-linie); }
.knopf[data-art="warn"]:hover { background: var(--fehler-hell); }
.knopf[data-art="gefahr"] { background: var(--fehler); border-color: var(--fehler); }
.knopf[data-art="gefahr"]:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.knopf[data-kopiert] { background: var(--gruen); border-color: var(--gruen); }
.textknopf { min-height: 36px; padding: 0 .3rem; display: inline-flex; align-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-size: .84rem; font-weight: 600; cursor: pointer; }
.textknopf:hover { color: var(--fehler); text-decoration: underline; }
/* Ein Textknopf, der nichts löscht („Rückgängig"): unterstrichen im Akzent,
 * damit er nicht aussieht wie .textknopf, der beim Überfahren rot wird. */
.textlink { min-height: 36px; padding: 0 .3rem; border: 0; border-radius: 8px; background: none; color: var(--akzent-tief); font-weight: 700; text-decoration: underline; cursor: pointer; }
.textlink:hover { color: var(--akzent); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"] { width: 100%; min-height: var(--klickziel); padding: 0 .9rem; border: 1px solid var(--feld-linie); border-radius: var(--r-feld); background: var(--weiss); color: var(--ink); }
input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--fokus); }
label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 650; }
.reihe { display: flex; align-items: center; gap: .5rem; }
.reihe input[type="number"] { width: 5.5rem; }

/* ------------------------------------------------------------ Begrüßung */
.begruessung { max-width: var(--raum); margin: 0 auto; padding: 3rem 2rem 2rem; }
.ueberzeile { margin-bottom: .5rem; color: var(--akzent); font-size: .75rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.begruessung h1 { max-width: 18em; font-size: 2.7rem; font-weight: 720; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.marker-reihe { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.marker { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); font-size: .86rem; font-weight: 600; }
.marker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.marker[data-ton="amber"]::before { background: var(--amber); }

/* --------------------------------------------------------------- Raster */
.raster { max-width: var(--raum); margin: 0 auto; padding: 0 2rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--leistenbreite); gap: 2rem; align-items: start; }
.spalte { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.abschnittstitel { margin: .6rem 0 -.2rem; color: var(--ink-2); font: 760 .75rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.leer { padding: 1.2rem 1.4rem; border: 1px dashed var(--linie); border-radius: var(--r); color: var(--ink-2); }
.leer--kasten { margin: 0; padding: 1rem 1.2rem; border: 0; }

/* ------------------------------------------------ Meldung, Linkbanner */
.hinweis-banner { padding: .8rem 1.1rem; border-radius: var(--r-feld); background: var(--akzent-hell); color: var(--akzent-tief); font-weight: 600; }
.hinweis-banner[data-art="fehler"] { background: var(--fehler-hell); color: var(--fehler); }
/* Hinweis mit Knopf („Rückgängig"): Text links, Knopf rechts. Im Fließtext
 * umbrochen stand der Knopf eingerückt am Anfang der zweiten Zeile und nicht
 * bündig mit dem Text darüber (Sichtprüfung 14.09.2026). */
.hinweis-banner--mit-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
/* Der Text darf schrumpfen und bricht in seinem eigenen Block um. Ohne das war
 * er breiter als die Zeile, und der Knopf rutschte trotz Flex doch nach unten. */
.hinweis-banner--mit-knopf > span { flex: 1 1 20rem; min-width: 0; }
.hinweis-banner__form { flex: none; margin-left: auto; }
.linkbanner { padding: 1.3rem 1.5rem; border: 1px solid var(--gold); border-radius: var(--r); background: var(--gold-hell); }
.linkbanner h2 { font-size: 1.1rem; }
.linkbanner__zeile { margin-top: .8rem; display: flex; gap: .6rem; }
.linkbanner__zeile input { font-family: var(--mono); font-size: .8rem; }

/* ------------------------------------------------------ Karten im Eingang */
.karte { display: grid; gap: .8rem; padding: 1.35rem 1.5rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier); box-shadow: var(--schatten); }
.karte[data-ton="amber"] { border-left: 4px solid var(--amber); }
.karte[data-ton="neu"] { border-left: 4px solid var(--akzent); }
.karte[data-ton="arbeit"] { border-left: 4px solid var(--amber-linie); }
.karte__kopf { display: flex; align-items: baseline; gap: .7rem; }
.art { color: var(--akzent); font-size: .72rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.karte[data-ton="amber"] .art, .karte[data-ton="arbeit"] .art { color: var(--amber); }
.wann { margin-left: auto; color: var(--ink-3); font-size: .84rem; }
.karte h3 { font-size: 1.15rem; font-weight: 700; }
.karte__text { max-width: 42rem; font-size: 1.02rem; line-height: 1.62; overflow-wrap: anywhere; }
.karte audio, .erledigt audio { width: 100%; max-width: 26rem; height: 38px; }
.karte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-top: .2rem; }
.karte__fuss label { margin: 0; }
.karte__fuss input[type="number"] { width: 7rem; }
.karte__fuss-ende { margin-left: auto; }

/* ------------------------------------- Stand je Verein (Nachtrag 14.09.2026)
 * Der Weg in der Karte „Hängt fest", die Spur unter der Vereinszeile und die
 * Stand-Liste im aufgeklappten Verein. Erreicht und „hier hängt es" kommen als
 * data-Attribut; welche Farbe daraus wird, steht hier. Amber heißt überall
 * dasselbe wie an den Karten: Hier kommt ein Verein nicht weiter. */
.weg { margin: .1rem 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; max-width: 42rem; }
.weg li { display: grid; align-content: start; min-width: 0; }
.weg__balken { height: 6px; margin-bottom: .5rem; border-radius: 3px; background: var(--linie-2); }
.weg li[data-erreicht] .weg__balken { background: var(--akzent); }
.weg li[data-halt] .weg__balken { background: var(--amber); }
.weg b { font-size: .86rem; font-weight: 650; line-height: 1.3; }
.weg li:not([data-erreicht]):not([data-halt]) b { color: var(--ink-3); font-weight: 600; }
.weg__wann { color: var(--ink-3); font-size: .8rem; line-height: 1.4; }
.weg li[data-erreicht] .weg__wann { color: var(--ink-2); }
.weg li[data-halt] .weg__wann { color: var(--amber); font-weight: 650; }
.spur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; max-width: 10rem; margin-top: .4rem; }
.spur i { height: 4px; border-radius: 2px; background: var(--linie-2); }
.spur i[data-erreicht] { background: var(--akzent); }
.spur i[data-halt] { background: var(--amber); }
/* Offene Werte in --ink-2, nicht --ink-3: Auf dem grünlichen Grund des Panels
 * hielt --ink-3 nur 4,4:1 (gemessen am Muster vom 14.09.2026). */
.stand { margin: 0; display: grid; gap: .1rem; font-size: .8rem; line-height: 1.5; }
.stand div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .6rem; }
.stand dt { color: var(--ink-2); }
.stand dd { margin: 0; color: var(--ink-2); }
.stand div[data-erreicht] dd { color: var(--ink); font-weight: 650; }
.stand b { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------- Fragenkatalog
 * Seit dem 14.09.2026 eine ruhige Zeile am Ende der linken Spalte statt einer
 * Karte unter dem Eingang. */
.katalog-bereich { margin-top: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.katalog > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.katalog > summary .abschnittstitel { margin: 0; }
.katalog__zahl { flex: 1; min-width: 14rem; color: var(--ink-2); font-size: .92rem; }
.katalog > summary .knopf { min-height: 36px; padding: 0 .9rem; font-size: .84rem; }
.wenn-zu { display: inline; }
.katalog .wenn-offen, .katalog[open] .wenn-zu { display: none; }
.katalog[open] .wenn-offen { display: inline; }
.katalog__hinweis { max-width: 44rem; margin: 1rem 0 .4rem; color: var(--ink-2); font-size: .86rem; }
.topf { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--linie-2); }
.topf h4 { font-size: .98rem; font-weight: 700; }
.befund { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .35rem 0; font-size: .92rem; }
.befund[data-erledigt] > span:nth-child(2) { color: var(--ink-3); text-decoration: line-through; }
.befund__knoepfe { display: flex; align-items: center; gap: .4rem; }
.befund .knopf { min-height: 36px; padding: 0 .9rem; font-size: .84rem; }

/* ------------------------------------------------------------- Erledigt */
.erledigt { margin: 0; padding: 0; list-style: none; }
.erledigt li { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--linie); color: var(--ink-2); font-size: .92rem; }
.erledigt__wer { color: var(--ink); font-weight: 600; }
.erledigt__was { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.erledigt__knoepfe { display: flex; gap: .6rem; }

/* ------------------------------------------------------- Rechte Spalte */
.leiste { position: sticky; top: 1.2rem; max-height: calc(100vh - 2.4rem); overflow-y: auto; display: grid; gap: 1rem; align-content: start; }
.kasten { position: relative; border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier); overflow: hidden; }
.kasten__kopf { display: flex; align-items: center; gap: .6rem; min-height: 4rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linie-2); }
.kasten__kopf h2 { font-size: 1.05rem; font-weight: 700; }
.anlegen > summary.knopf { position: absolute; top: .7rem; right: 1.2rem; min-height: 36px; padding: 0 .9rem; font-size: .84rem; }
.anlegen[open] > summary.knopf { background: var(--akzent-hell); color: var(--akzent-tief); }
.anlegen__form { display: grid; gap: .7rem; padding: 1rem 1.2rem 1.2rem; border-bottom: 1px solid var(--linie-2); background: var(--papier-2); }
.anlegen__form .schmal { width: 7rem; }
.vereine { margin: 0; padding: 0; list-style: none; }
.vereine > li + li { border-top: 1px solid var(--linie-2); }
.verein__zeile { display: grid; grid-template-columns: .6rem minmax(0, 1fr) 2.4rem; gap: .75rem; align-items: center; padding: .75rem 1.2rem; }
.verein__zeile:hover { background: var(--papier-2); }
.verein[open] > .verein__zeile { background: var(--akzent-hell); }
.verein__name { display: block; min-width: 0; }
.verein__name strong { display: block; overflow: hidden; font-size: .94rem; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.verein__name .leise { display: block; font-size: .8rem; line-height: 1.35; }
.punkt { width: .6rem; height: .6rem; border-radius: 50%; background: var(--gruen); }
.punkt[data-zugang="link_offen"] { background: transparent; box-shadow: inset 0 0 0 2px var(--akzent); }
.punkt[data-zugang="link_abgelaufen"] { background: var(--amber); }
.punkt[data-zugang="gesperrt"] { background: var(--grau); }
.ring { width: 2.4rem; height: 2.4rem; }
.ring circle { fill: none; stroke-width: 4; }
.ring__grund { stroke: var(--linie-2); }
.ring__wert { stroke: var(--akzent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring[data-voll] .ring__wert { stroke: var(--amber); }
.verein__panel { display: grid; gap: .75rem; padding: .3rem 1.2rem 1.1rem; background: var(--akzent-hell); }
.verein__panel p { font-size: .8rem; }
.gefahr { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--akzent-linie); }
.einsichten { margin: 0; padding: .3rem 1.2rem .9rem; list-style: none; }
.einsichten li { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem 0; font-size: .86rem; }
.einsichten li + li { border-top: 1px solid var(--linie-2); }

/* KI-Kosten (Nachtrag 11.09.2026). Der Balken ist ein SVG wie der Ring: Die
 * strenge Inhaltsregel verbietet style=, eine Breite als SVG-Attribut nicht.
 * Breite UND Höhe in rem, im Verhältnis der viewBox (74 : 6) — sonst verzerrt
 * er, sobald jemand die Schrift vergrößert. Die Zeile im aufgeklappten Verein
 * steht seit dem 14.09.2026 in der Stand-Liste (.stand). */
.kosten { margin: 0; padding: .8rem 1.2rem .4rem; list-style: none; display: grid; gap: .55rem; }
.kosten li { display: grid; grid-template-columns: minmax(0, 1fr) 4.625rem 4.2rem; gap: .6rem; align-items: center; font-size: .86rem; }
.kosten__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kosten__balken { display: block; width: 4.625rem; height: .375rem; }
.kosten__grund { fill: var(--linie-2); }
.kosten__wert { fill: var(--akzent); }
.kosten__betrag { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.kosten__rest { color: var(--ink-2); }
.kosten__rest .kosten__wert { fill: var(--grau); }
.kosten__fuss { padding: .3rem 1.2rem 1rem; font-size: .8rem; line-height: 1.5; }

.fuss { max-width: var(--raum); margin: 0 auto; padding: 0 2rem 3rem; color: var(--ink-3); font-size: .8rem; }

/* ------------------------------------------- Anmeldung, kurze Seiten */
.auth { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.auth__mitte { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 2rem 6rem; align-self: center; }
.auth__mitte h1 { font-size: 3.2rem; font-weight: 720; letter-spacing: -.045em; line-height: 1.02; }
.auth__satz { max-width: 30rem; margin: 1rem 0 2rem; color: var(--ink-2); font-size: 1.05rem; }
.auth__zeile { display: flex; gap: .7rem; max-width: 30rem; }
.auth__zeile input { min-height: 52px; padding: 0 1.2rem; border-radius: 999px; font-size: 1rem; }
.auth__zeile .knopf { min-height: 52px; padding: 0 1.6rem; }
.auth__fehler { max-width: 30rem; margin-bottom: 1rem; color: var(--fehler); font-weight: 650; }

@media (max-width: 60rem) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: static; max-height: none; overflow: visible; }
  .erledigt li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}