/* Nordstern, Oberflaeche "Wenige Flaechen" (Diegos Wahl 30.09.2026, ARCHITEKTUR.md 19), seit dem 30.09.2026 dichter und
   in vier Reitern (ARCHITEKTUR.md 20; CI.md und ci.json).
   Schrift: nur Sora, vier Groessen (28 Zahl, 18 Titel, 15 Text und Bedienung, 13 Meta), zwei Gewichte (400, 600).
   Keine Linie an einer Kante, kein Schatten als Kante, kein Verlauf, kein Glas: Weiss auf Grund trennt allein.
   Ein Abstand zwischen allen Kacheln (16), Innenraum 24; keine Mindesthoehe und kein innerer Rollbalken.
   Die Marken stehen in ihren Zeichen; im Wochenplan traegt jede Karte die Flaeche ihrer Marke (Diego 30.09.2026). */

@font-face { font-family: "Sora"; src: url("fonts/sora-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --grund: #F5F6F7; --flaeche: #FFFFFF; --wasch: #ECF0F3; --tinte: #16191D; --weich: #55606B; --linie: #E3E6EA;
  --akzent: #2E5A7D; --laeuft: #2f7d4f; --klemmt: #b45309; --steht: #c1121f; --cb: #002E3C; --cb-gelb: #FFD700;
  --zk-grund: #0b110d; --zk-orange: #e8470a; --vereo-tinte: #0f0f0f;
  --t-zahl: 28px; --t-titel: 18px; --t-text: 15px; --t-meta: 13px;
  --r-kachel: 16px; --r-karte: 12px; --r-knopf: 8px; --r-chip: 6px; --r-balken: 4px;
  --kurve: cubic-bezier(0.4, 0, 0.2, 1);
  --rand: 24px; --luft: 16px; --innen: 24px;
  --schatten: 0 1px 2px rgba(22, 25, 29, 0.08);
  color-scheme: light;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--tinte); font: 400 var(--t-text)/1.5 "Sora", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: normal; }
h1, h2, h3, h4, p, ol, ul, fieldset, figure, pre { margin: 0; }
h3, h4 { font-size: var(--t-text); font-weight: 600; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
b, .fett { font-weight: 600; }
.sym { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.nacht :focus-visible { outline-color: var(--flaeche); }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.leise { color: var(--weich); }

.sprunglink { position: absolute; left: 16px; top: -120px; z-index: 60; padding: 12px 16px; border-radius: var(--r-knopf); background: var(--tinte); color: var(--flaeche); font-weight: 600; }
.sprunglink:focus { top: 12px; }

/* ---------------------------------------------------------------- Kopf: Stern, Reiter in der Mitte, rechts das Uebrige
   Diego 01.10.2026: Reiter "in die Mitte", klar als Menue erkennbar; rechts nur Suche, Aktualisieren (Zeichen), Profil,
   Fragezeichen. Der Stand steht leise im Seitenkopf jeder Ansicht und beim Ueberfahren des Aktualisieren-Zeichens. */
.kopf { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: 64px; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); background: var(--grund); }
.marke { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: -6px; padding: 0 10px 0 6px; border-radius: var(--r-knopf); color: var(--tinte); transition: background-color 140ms var(--kurve); }
.marke:hover { background: var(--wasch); }
.wortmarke { font-size: var(--t-titel); font-weight: 600; line-height: 1.25; white-space: nowrap; }
/* Der Nordstern, ausgefuellt: dreht sich beim ersten Laden einmal, dann wandert das Licht ruhig ueber seine vier Facetten
   (Weiss mit hoechstens 32 Prozent Deckung; kein Leuchten, kein Verlauf nach Hausstandard C0). Ohne Bewegung: steht still. */
.stern { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; }
.stern-svg { display: grid; place-items: center; }
.stern-svg svg { display: block; width: 28px; height: 28px; }
.stern-koerper { fill: var(--akzent); }
.facette { fill: var(--flaeche); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body.stern-dreht .marke .stern-svg { animation: stern-drehen 1100ms var(--kurve) 1 both; }
  .stern .facette { animation: stern-licht 8s var(--kurve) infinite; }
  .stern .f2 { animation-delay: 2s; }
  .stern .f3 { animation-delay: 4s; }
  .stern .f4 { animation-delay: 6s; }
}
@keyframes stern-drehen { from { transform: rotate(-180deg) scale(0.6); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes stern-licht { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 0.32; } }
/* Die Reiter als Menue: eine weisse Leiste in der Mitte, der gewaehlte in Tinte */
.reiter { justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: var(--r-kachel); background: var(--flaeche); }
.reiter [role="tab"] { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-karte); background: transparent; color: var(--weich); font-weight: 600; cursor: pointer; transition: background-color 140ms var(--kurve), color 140ms var(--kurve); }
.reiter [role="tab"]:hover { background: var(--wasch); color: var(--tinte); }
.reiter [role="tab"][aria-selected="true"] { background: var(--tinte); color: var(--flaeche); }
.reiter-zeichen { display: grid; place-items: center; }
.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 6px; }
.kopf-rechts > .zeichenknopf { background: var(--flaeche); }
.kopf-rechts > .zeichenknopf:hover { background: var(--linie); }
/* Aktualisieren: nur das Zeichen; nach 20 Minuten oder bei einer Stoerung das Dreieck in Klemmt-Orange (5,0:1 auf Weiss) */
.akt-punkt { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--klemmt); box-shadow: 0 0 0 2px var(--flaeche); }
.aktualisieren[aria-busy="true"] { cursor: progress; color: var(--weich); }
/* Profil: Name, Passwort aendern, Abmelden; kein Umschalten der Person */
.profil { position: relative; }
.profil-knopf { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-knopf); background: var(--flaeche); color: var(--tinte); font-weight: 600; cursor: pointer; transition: background-color 140ms var(--kurve); }
.profil-knopf:hover, .profil-knopf[aria-expanded="true"] { background: var(--linie); }
.profil-knopf > .sym:last-child { color: var(--weich); }
.profil-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; display: flex; flex-direction: column; gap: 2px; min-width: 232px; padding: 6px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: 0 2px 4px rgba(22, 25, 29, 0.08), 0 12px 32px rgba(22, 25, 29, 0.16); }
.menue-name { display: flex; flex-direction: column; padding: 8px 12px 10px; }
.menue-punkt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-knopf); background: transparent; color: var(--tinte); font-weight: 600; text-align: left; cursor: pointer; }
.menue-punkt:hover, .menue-punkt:focus-visible { background: var(--wasch); }
.menue-punkt .sym { color: var(--weich); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tinte); color: var(--flaeche); font-size: var(--t-meta); font-weight: 600; line-height: 1; }
.person-name { white-space: nowrap; }
/* Schilder im Seitenkopf: ein Wort, wenn etwas nicht wie im Betrieb ist; sie fuehren zur Erklaerung */
.kopf-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-chip); background: var(--wasch); color: var(--tinte); font-size: var(--t-meta); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 140ms var(--kurve); }
.kopf-chip::after { content: ""; position: absolute; inset: -8px 0; }
a.kopf-chip:hover { background: var(--linie); }
.kopf-chip .sym { color: var(--weich); }
.kopf-chip.stoerung .sym, .kopf-chip.warn .sym { color: var(--klemmt); }
.kopf-chip.stoerung.stark .sym { color: var(--steht); }
.kopf-chip.warn { color: var(--steht); }

/* Seitenkopf jeder Ansicht (Peter Plattform): Titel, leise Unterzeile, rechts leise der Stand */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin: 4px 0 16px; }
.seitenkopf-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seitenkopf h1 { font-size: var(--t-zahl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; outline: none; }
.seitenkopf .leise { font-size: var(--t-meta); }
.seitenkopf-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-meta); color: var(--weich); }
.stand-leise { font-variant-numeric: tabular-nums; }
.stand-leise.alt { color: var(--klemmt); font-weight: 600; }
.stand-weg { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.stand-weg:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 4px; }

.zeichenknopf { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-knopf); background: transparent; color: var(--tinte); cursor: pointer; transition: background-color 140ms var(--kurve); }
.zeichenknopf:hover { background: var(--wasch); }
.zeichenknopf.flaechig { background: var(--wasch); }
.zeichenknopf.flaechig:hover { background: var(--linie); }

/* ---------------------------------------------------------------- Raster: ein Abstand zwischen allen Kacheln */
main { max-width: 1440px; margin: 0 auto; padding: 8px var(--rand) 96px; outline: none; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--luft); align-items: stretch; }
.raster > * { grid-column: span 12; min-width: 0; }
.ganz { grid-column: 1 / -1; }

.raster-ziele .k-sprint { grid-column: span 8; }
.raster-aufgaben .k-fragen, .raster-aufgaben .k-auffaellig { grid-column: span 6; }
.raster-system .k-methode, .raster-system .k-neuerungen { grid-column: span 8; }
.raster-system .k-hilfe, .raster-system .k-rueckmeldung, .raster-system .k-einstellungen { grid-column: span 4; }
@media (min-width: 1100px) {
  .raster-system .k-methode .methode-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.raster-ziele .k-notizen { grid-column: span 4; }
.raster-ziele.ohne-notizen .k-sprint { grid-column: 1 / -1; }
.raster-statistik .k-wert, .raster-statistik .k-leads { grid-column: span 4; }
/* System: neben dem langen Betrieb ein Stapel aus drei kurzen Kacheln, damit keine Kachel halb leer gestreckt wird */
.stapel { display: flex; flex-direction: column; gap: var(--luft); min-width: 0; }
.stapel > .kachel { flex: none; }
.stapel > .kachel:last-child { flex: 1; }
.raster-system .k-betrieb { grid-column: span 8; }
.raster-system .stapel { grid-column: span 4; }
.raster-system .stapel-breit { grid-column: span 8; }


@media (max-width: 1099px) {
  :root { --innen: 20px; }
  .raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .raster > *, .raster-ziele .k-sprint, .raster-ziele .k-notizen, .raster-statistik .k-wert,
  .raster-system .k-methode, .raster-system .k-betrieb, .raster-system .k-hilfe, .raster-system .k-technik, .raster-system .k-neuerungen,
  .raster-system .k-tutorial, .raster-system .k-rueckmeldung, .raster-system .k-einstellungen { grid-column: span 6; }
  .raster-aufgaben .k-fragen, .raster-aufgaben .k-auffaellig, .raster-statistik .k-leads, .raster-system .k-neu,
  .raster-system .k-aktualisieren, .raster-system .k-aktionen, .raster-system .k-herkunft, .raster-system .k-werkzeuge, .raster-system .k-werte { grid-column: span 3; }
  /* Unter 1100 px loesen sich die Stapel auf: ihre kurzen Kacheln stehen paarweise, Technik und Tutorial volle Breite */
  .raster-system .stapel { display: contents; }
}

/* ---------------------------------------------------------------- Kachel */
.kachel { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: var(--innen); border-radius: var(--r-kachel); background: var(--flaeche); }
.kachel.klickbar { cursor: pointer; }
.kachel.klickbar input, .kachel.klickbar textarea { cursor: text; }
.kachel.nacht { background: var(--tinte); color: var(--flaeche); }
.kachel-kopf { display: flex; align-items: center; gap: 8px; margin: -10px -12px -6px; font-size: var(--t-titel); font-weight: 600; line-height: 1.25; }
.kachel-titel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-knopf); transition: background-color 140ms var(--kurve); }
a.kachel-titel:hover { background: var(--wasch); }
.nacht a.kachel-titel:hover { background: rgba(255, 255, 255, 0.08); }
.kachel-wort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-titel > .sym[role="img"] { color: var(--weich); }
.nacht .kachel-titel > .sym[role="img"] { color: var(--linie); }
.kachel-titel .chevron { margin-left: auto; color: var(--weich); transition: transform 140ms var(--kurve), color 140ms var(--kurve); }
.kachel.klickbar:hover .kachel-titel .chevron { transform: translateX(2px); color: var(--tinte); }
.nacht .kachel-titel .chevron, .nacht.klickbar:hover .kachel-titel .chevron { color: var(--linie); }
.kachel-titel > .sym:first-child { color: var(--akzent); }
.nacht .kachel-titel > .sym:first-child { color: var(--flaeche); }
.platzhalter-zeile { display: block; height: 16px; width: 72%; border-radius: var(--r-balken); background: var(--wasch); }
.platzhalter-zeile.kurz { width: 44%; }
.nacht .platzhalter-zeile { background: rgba(255, 255, 255, 0.12); }

/* Die eine Zahl: Wert und Satz ohne Wert stehen gleich hoch (34 px), die Beschriftung in einer Zeile */
.zahl { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; }
.zahl-wert { flex: none; font-size: var(--t-zahl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--akzent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl-ohne { flex: 0 1 auto; min-width: 0; font-size: var(--t-text); font-weight: 600; line-height: 2.24; color: var(--weich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zahl-text { flex: 0 1 auto; min-width: 0; color: var(--weich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zahl > .info { align-self: center; }
.zahl-text .info { margin-left: 2px; vertical-align: middle; position: relative; top: -1px; }
/* Am Telefon darf die Beschriftung umbrechen, damit Satz und Info-Punkt ganz zu sehen sind */
@media (max-width: 719px) { .zahl-text, .zahl-ohne { white-space: normal; overflow-wrap: anywhere; } .zahl-ohne { line-height: 1.4; } }
.zahl-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.person-weg { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.person-weg:hover { text-decoration-thickness: 2px; }
.nacht .zahl-wert { color: var(--flaeche); }
.nacht .zahl-ohne, .nacht .zahl-text { color: var(--linie); }

/* Info-Punkt: 16 sichtbar, 44 Trefferflaeche */
.info { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.info-knopf { display: grid; place-items: center; width: 44px; height: 44px; margin: -14px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--weich); cursor: pointer; transition: color 140ms var(--kurve); }
.info-knopf:hover { color: var(--tinte); }
.nacht .info-knopf { color: var(--linie); }
.nacht .info-knopf:hover { color: var(--flaeche); }
.info-text { position: fixed; z-index: 90; display: none; width: min(300px, calc(100vw - 16px)); padding: 12px 16px; border-radius: var(--r-knopf); background: var(--flaeche); color: var(--tinte); box-shadow: 0 2px 4px rgba(22, 25, 29, 0.08), 0 8px 24px rgba(22, 25, 29, 0.12); font-size: var(--t-meta); font-weight: 400; line-height: 1.5; letter-spacing: normal; text-align: left; white-space: normal; cursor: auto; }
.info-absatz { display: block; }
.info-absatz + .info-absatz { margin-top: 6px; }
.info:hover .info-text, .info.offen .info-text, .info:focus-within .info-text { display: block; }
.info.zu .info-text { display: none; }

/* Balken */
.balken { display: block; height: 8px; border-radius: var(--r-balken); background: var(--wasch); overflow: hidden; }
.balken-fuellung { display: block; height: 100%; width: var(--anteil, 0%); border-radius: var(--r-balken); background: var(--akzent); }
.balken.leer .balken-fuellung { display: none; }
.nacht .balken { background: rgba(255, 255, 255, 0.16); }
.nacht .balken-fuellung { background: var(--flaeche); }

/* Meta, Zustand und das eine Dringlichkeitszeichen */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: var(--t-meta); line-height: 1.5; color: var(--weich); }
.meta-teil { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.meta-teil.warn, .warn-text { color: var(--steht); font-weight: 600; }
.meta-teil.warn-leise { color: var(--klemmt); font-weight: 600; }
.meta-teil.dran { color: var(--tinte); font-weight: 600; }
.meta-teil.neu { color: var(--tinte); font-weight: 600; }
.nacht .meta { color: var(--linie); }
.nacht .meta-teil.warn, .nacht .meta-teil.dran, .nacht .meta-teil.neu { color: var(--flaeche); }
/* "neu seit deinem letzten Besuch": ein Punkt mit dem Wort, nie der Punkt allein */
.neu-punkt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.nacht .neu-punkt { background: var(--flaeche); }
.zustand { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinte); }
.zustand.laeuft .sym { color: var(--laeuft); }
.zustand.klemmt .sym { color: var(--klemmt); }
.zustand.steht .sym { color: var(--steht); }
.meta-teil.zustand { font-weight: 600; color: var(--tinte); }
.meta-teil.zustand.laeuft .sym { color: var(--laeuft); }
.meta-teil.zustand.klemmt .sym { color: var(--klemmt); }
.meta-teil.zustand.steht .sym { color: var(--steht); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-chip); background: var(--wasch); color: var(--tinte); font-size: var(--t-meta); font-weight: 600; white-space: nowrap; }
.chip.dunkel { background: var(--tinte); color: var(--flaeche); }

/* Markenzeichen: unveraendert, als kleine Kachel. Der Grund der Kachel ist der Grund des Zeichens. */
.zeichen { display: inline-grid; place-items: center; flex: none; overflow: hidden; width: 32px; height: 32px; border-radius: var(--r-knopf); }
.zeichen > svg, .zeichen > img { display: block; width: 100%; height: 100%; }
.zeichen.z16 { width: 16px; height: 16px; border-radius: var(--r-balken); }
.zeichen-drillinge { background: var(--akzent); color: var(--flaeche); }
.zeichen-persoenlich { background: var(--weich); color: var(--flaeche); }
.zeichen-vereo { background: #111111; }
.zeichen-zweitkopf { background: #0b110d; }
.zeichen-conrad { background: var(--cb); }
.zeichen-commerzbank { background: var(--cb); }
.zeichen-drillinge > svg, .zeichen-persoenlich > svg { width: 20px; height: 20px; }
.zeichen.z16.zeichen-drillinge > svg, .zeichen.z16.zeichen-persoenlich > svg { width: 12px; height: 12px; }
.zeichen-commerzbank > img { width: 24px; height: auto; }
.zeichen.z16.zeichen-commerzbank > img { width: 12px; }

/* Zeilen: die Zeile ist der Knopf */
.zeilen { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.zeile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: var(--r-karte); transition: background-color 140ms var(--kurve); }
.zeile:hover { background: var(--wasch); }
.nacht .zeile:hover { background: rgba(255, 255, 255, 0.08); }
.zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zeile-titel { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.zeile .chevron, .zeile > .sym { color: var(--weich); flex: none; }
.nacht .zeile .chevron, .nacht .zeile > .sym { color: var(--linie); }
.listen-titel { font-size: var(--t-meta); font-weight: 600; color: var(--weich); margin-bottom: -8px; }
.nacht .listen-titel { color: var(--linie); }
.listen-kopf { font-size: var(--t-meta); font-weight: 600; color: var(--weich); margin-bottom: -8px; }
@media (min-width: 1100px) {
  .zeilen-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .zeilen-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}

/* Fehler an genau der Stelle, die betroffen ist */
.fehlerbox { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-knopf); background: var(--wasch); color: var(--tinte); }
.fehler-titel { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fehler-titel .sym { color: var(--klemmt); }
.fehlerbox .leise { font-size: var(--t-meta); }
.nacht .fehlerbox { background: rgba(255, 255, 255, 0.08); color: var(--flaeche); }
.nacht .fehlerbox .leise { color: var(--linie); }

/* ---------------------------------------------------------------- Leitziele (Nacht-Flaeche, der Blickfang der Ziele) */
.ziele-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ziel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ziel-titel { display: flex; align-items: flex-start; gap: 10px; }
.ziel-titel > span { display: flex; flex-direction: column; min-width: 0; }
.ziel-nr { font-size: var(--t-meta); font-weight: 600; line-height: 1.5; color: var(--linie); }
.ziel-name { font-weight: 600; }
.ziel-titel .sym { margin-top: 2px; color: var(--linie); }
.ziel-fuss { display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------------- Sprint: Sprintziel gross, Resttage und Band klein */
.sprintziel-block { display: flex; flex-direction: column; gap: 2px; }
.sprintziel-wort { font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.sprintziel { font-size: var(--t-zahl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--akzent); overflow-wrap: anywhere; }
.sprint-fuss { display: grid; grid-template-columns: auto minmax(120px, 280px) auto; align-items: center; gap: 8px 20px; margin-top: auto; }
.sprint-rest { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.sprint-rest b { font-variant-numeric: tabular-nums; }
.wochenband { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; align-items: end; }
.wochenband li { display: flex; align-items: flex-end; height: 20px; }
.band-feld { display: block; width: 100%; height: 12px; border-radius: var(--r-balken); background: var(--wasch); }
.wochenband .vorbei .band-feld { background: var(--akzent); }
.wochenband .heute .band-feld { height: 20px; background: var(--tinte); }
.wochenziel { display: flex; align-items: flex-start; gap: 8px; }
.bei-dir { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; }
.bei-dir > .sym { color: var(--steht); }
.bei-dir .text-weg { min-height: 44px; margin: -10px 0; }
.bei-dir .text-weg .sym { color: var(--weich); }
.wochenziel .sym { color: var(--akzent); margin-top: 3px; }

/* ---------------------------------------------------------------- Notizen */
.notiz-form { display: flex; gap: 8px; }
.notiz-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-knopf); background: var(--wasch); }
.notiz-form input::placeholder { color: var(--weich); opacity: 1; }
.notiz-liste { display: flex; flex-direction: column; gap: 6px; }
.notiz-zeile { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: var(--r-karte); background: var(--wasch); text-align: left; cursor: pointer; transition: background-color 140ms var(--kurve); }
.notiz-zeile:hover { background: var(--linie); }
.notiz-zeile > .sym { color: var(--weich); }
.notiz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notiz-text > .fett { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Wochenplan-Kachel: Heute, Liegengebliebenes, Woche */
.woche-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.woche-teil { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 8px 8px; border-radius: var(--r-karte); background: var(--wasch); }
.woche-teil-kopf { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 6px; font-size: var(--t-meta); font-weight: 600; }
.woche-teil-kopf .leise { font-weight: 400; }
.woche-teil-kopf.warn-text .sym { color: var(--steht); }
.woche-teil-kopf:not(.warn-text) .sym { color: var(--laeuft); }
.vorschau-liste { display: flex; flex-direction: column; gap: 6px; }
.vorschau-liste > li.vorschau-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border-radius: var(--r-karte); background: var(--k-grund); color: var(--k-text); box-shadow: var(--schatten); }
.vorschau-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vorschau-liste > li.vorschau-mehr { min-height: 0; padding: 2px 6px; color: var(--weich); font-size: var(--t-meta); }
.vorschau-zeile .plan-zeile { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woche-tage { display: flex; flex-direction: column; gap: 2px; }
.woche-tag { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 32px; padding: 2px 6px; border-radius: var(--r-knopf); font-size: var(--t-meta); }
.woche-tag.heute { background: var(--tinte); color: var(--flaeche); }
.woche-tag.heute .leise { color: var(--linie); }
.woche-tag-name { font-weight: 600; white-space: nowrap; }
.woche-tag.vorbei .woche-tag-name { color: var(--weich); }
.woche-tag-zeichen { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.woche-tag-zahl { color: var(--weich); white-space: nowrap; font-variant-numeric: tabular-nums; }
.woche-tag.heute .woche-tag-zahl { color: var(--linie); }
.warn-kachel { display: grid; place-items: center; flex: none; width: 32px; height: 32px; }

.schluessel-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.schluessel-form .feld { flex: 1 1 200px; }
.schluessel-form .formfehler { flex-basis: 100%; }
.haken-zeile { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.haken-zeile input { width: 20px; height: 20px; margin: 0; accent-color: var(--akzent); }

/* ---------------------------------------------------------------- Linien, Zaehlung, Sprungpunkte */
.linie { display: flex; align-items: center; gap: 12px; }
.linie > .sym { color: var(--weich); }
.linie-wort { flex: 1; min-width: 0; }
.linien { display: flex; flex-direction: column; gap: 8px; }
.linien li { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.linien li > .sym { color: var(--weich); }
.nacht .linien li > .sym { color: var(--linie); }
.linie-zahl { font-variant-numeric: tabular-nums; }
.sprung-liste { display: flex; flex-direction: column; gap: 6px; }
.sprung-liste li { display: flex; }
.sprung-weg { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); transition: background-color 140ms var(--kurve); }
.sprung-weg:hover { background: var(--linie); }
.sprung-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.sprung-titel { font-weight: 600; }
.sprung-zusatz { font-size: var(--t-meta); color: var(--weich); }
.sprung-weg > .sym { color: var(--weich); }
.namen { display: flex; flex-direction: column; gap: 8px; }
.namen li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.namen li > .sym { color: var(--laeuft); }

/* ---------------------------------------------------------------- Aufgaben: Liste oder Board in einer Kachel */
.aufgaben-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.aufgaben-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.board-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 10px 10px; border-radius: var(--r-karte); background: var(--grund); }
.spalte .zeilen { margin: 0 -6px; }
.spalte .zeile { padding: 6px; min-height: 48px; }
.spalte-kopf { display: flex; align-items: center; margin: 0 -6px; }
.spalte-weg { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border-radius: var(--r-knopf); font-weight: 600; }
.spalte-weg:hover { background: var(--wasch); }
.spalte-weg .sym { color: var(--akzent); }
.spalte-zahl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-meta); }
.spalte-zahl b { font-size: var(--t-titel); font-variant-numeric: tabular-nums; color: var(--akzent); }
.leer-spalte { display: flex; align-items: center; gap: 8px; color: var(--weich); }
.leer-spalte .sym { color: var(--laeuft); }
.spalten-wahl { display: none; }
.werkzeug-wahl select, .feld select, .feld input, .formular textarea, .plan-projekte select, .plan-projekte input, .fragenliste textarea {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-knopf); background: var(--wasch); color: var(--tinte); }

/* ---------------------------------------------------------------- Statistiken */
.zahl-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.zahl-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zahl-feld-titel { width: fit-content; max-width: 100%; font-size: var(--t-meta); font-weight: 600; color: var(--weich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nacht .zahl-feld-titel { color: var(--linie); }
/* Portfolio als Zeitstrahl: fuenf Phasen je Programm, erreicht im Akzent, jetzt in Tinte; ohne Phase eine leere Spur */
.strahl { display: flex; flex-direction: column; gap: 4px; }
.strahl-kopf, .strahl-zeile { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 4fr) minmax(170px, 1.2fr) minmax(96px, 0.8fr); align-items: center; gap: 16px; }
.strahl-kopf { font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.strahl-stufen, .strahl-spur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.strahl-stufen > span { line-height: 1.3; hyphens: none; }
.strahl-kopf { align-items: end; }
.strahl-liste { display: flex; flex-direction: column; gap: 2px; }
.strahl-zeile { min-height: 44px; }
.strahl-name { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -6px; padding: 0 6px; border-radius: var(--r-knopf); font-weight: 600; }
.strahl-name:hover { background: var(--wasch); }
.strahl-feld { display: block; height: 12px; border-radius: var(--r-balken); background: var(--wasch); }
.strahl-feld.erreicht { background: var(--akzent); }
.strahl-feld.jetzt { height: 20px; background: var(--tinte); }
.strahl-spur { align-items: center; }
.strahl-phase { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; min-width: 0; }
.strahl-phase-wort { min-width: 0; line-height: 1.3; }
.strahl-phase.luecke { color: var(--weich); }
.strahl-phase.luecke .sym { color: var(--klemmt); }
.strahl-zustand { font-size: var(--t-meta); }
.strahl-legende li .strahl-feld { width: 28px; flex: none; }
.strahl-legende li .strahl-feld.jetzt { height: 16px; }
/* Auf der Nacht: erreicht in Linie, jetzt in Weiss und hoeher, noch nicht als leise Spur; Zustand in Weiss mit Zeichen */
.nacht .strahl-kopf, .nacht .legende { color: var(--linie); }
.nacht .strahl-feld { background: rgba(255, 255, 255, 0.12); }
.nacht .strahl-feld.erreicht { background: rgba(255, 255, 255, 0.5); }
.nacht .strahl-feld.jetzt { background: var(--flaeche); }
.nacht .strahl-name:hover { background: rgba(255, 255, 255, 0.08); }
.nacht .strahl-phase.luecke, .nacht .strahl-zustand .leise { color: var(--linie); }
.nacht .zustand { color: var(--flaeche); }
.nacht .zustand .sym, .nacht .meta-teil.zustand .sym { color: var(--flaeche) !important; }
.nacht .meta-teil.zustand { color: var(--flaeche); }
/* Einsatz je Programm: vier Spalten, jede Spalte fuer sich skaliert, nie ueber Programme addiert */
.einsatz { display: flex; flex-direction: column; gap: 6px; }
.einsatz-kopf, .einsatz-zeile { display: grid; grid-template-columns: minmax(170px, 1.1fr) repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.einsatz-kopf { font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.einsatz-kopf > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.einsatz-kopf > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.einsatz-kopf .sym { color: var(--akzent); }
.einsatz-liste { display: flex; flex-direction: column; gap: 4px; }
.einsatz-zeile { padding: 10px 12px; border-radius: var(--r-karte); background: var(--grund); }
.einsatz-zeile.ausserhalb { background: transparent; }
.einsatz-name { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 2px; }
.einsatz-name .zeichen { margin-top: 3px; }
.einsatz-zelle { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.einsatz-zelle.luecke { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-meta); min-height: 24px; }
.einsatz-zelle.luecke .einsatz-etikett { flex-basis: 100%; }
.einsatz-wert { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.einsatz-balken { display: block; height: 6px; border-radius: var(--r-balken); background: var(--wasch); overflow: hidden; }
.einsatz-zeile:not(.ausserhalb) .einsatz-balken { background: var(--flaeche); }
.einsatz-fuellung { display: block; height: 100%; width: var(--anteil, 0%); border-radius: var(--r-balken); background: var(--akzent); }
.einsatz-balken.spitze .einsatz-fuellung { background: var(--tinte); }
.einsatz-kopf { align-items: end; }
.einsatz-gruppe { position: relative; flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.einsatz-gruppe-wort { position: relative; width: calc(200% + 16px); padding-bottom: 2px; color: var(--tinte); }
.einsatz-gruppe-teil { display: flex; align-items: center; gap: 6px; }
.einsatz-zelle .meta { display: block; }
.einsatz-etikett { display: none; font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.einsatz-agenten { display: none; }

/* Besucher und Umwandlung: je Seite ein Trichter als Balken, daneben was ohne Banner zaehlt */
.besucher-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.besucher-seite { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--r-karte); background: var(--grund); }
.besucher-kopf { display: flex; align-items: center; gap: 8px; font-size: var(--t-text); font-weight: 600; }
.besucher-seite .stufen li { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) minmax(32px, auto); }
.besucher-seite .stufe-balken { background: var(--flaeche); }
.ideen { display: flex; flex-direction: column; gap: 12px; }
.ideen .linien li > .sym { color: var(--akzent); }
details.ideen { display: block; }
details.ideen > .linien { margin-top: 10px; }

/* Frag Nordstern: der Nordstern als kleine Figur, zugleich der Chat, kennt die offene Ansicht (Peter Plattform 5). Am
   Rechner immer unten rechts (Diego 01.10.2026: "kann dauerhaft unten rechts bleiben"; Abweichung in CI.md 11), unten im
   Body bleibt Platz, damit sie nie den Abschluss verdeckt. Bis 1199 px der fuenfte Eintrag der Reiterleiste. */
.chat-knopf { position: fixed; right: max(var(--rand), calc((100vw - 1440px) / 2 + var(--rand))); bottom: 24px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--tinte); color: var(--flaeche); cursor: pointer; box-shadow: 0 2px 4px rgba(22, 25, 29, 0.12), 0 8px 24px rgba(22, 25, 29, 0.16); transition: background-color 140ms var(--kurve); }
.chat-knopf:hover, .chat-knopf[aria-expanded="true"] { background: var(--akzent); }
.chat-figur { position: relative; display: grid; place-items: center; }
.chat-figur .stern-svg svg { width: 28px; height: 28px; }
.chat-figur .stern-koerper { fill: currentColor; }
.chat-figur .facette { display: none; }
.chat-blase { position: absolute; right: -9px; bottom: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--akzent); color: var(--flaeche); }
.chat-knopf:hover .chat-blase, .chat-knopf[aria-expanded="true"] .chat-blase { background: var(--tinte); }
.chat-wort { display: none; }
.chat-feld { position: fixed; right: max(var(--rand), calc((100vw - 1440px) / 2 + var(--rand))); bottom: 92px; z-index: 45; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 168px)); padding: 12px 14px 14px; border-radius: var(--r-kachel); background: var(--flaeche); box-shadow: 0 2px 4px rgba(22, 25, 29, 0.08), 0 12px 32px rgba(22, 25, 29, 0.18); }
/* Der feste Chat-Knopf (unten 24, hoch 56) braucht unten 80 px Luft; main hat 96 px Innenraum unten, mehr braucht es nicht */
.chat-ort { gap: 6px; }
.chat-form textarea:disabled { opacity: 1; color: var(--weich); cursor: not-allowed; }
.chat-aus { align-items: flex-start; }
.chat-feld[hidden] { display: none; }
.chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -6px; }
.chat-kopf h2 { font-size: var(--t-titel); font-weight: 600; }
.chat-verlauf { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.chat-verlauf > li { max-width: 92%; padding: 8px 12px; border-radius: var(--r-karte); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-frage { align-self: flex-end; background: var(--tinte); color: var(--flaeche); }
.chat-antwort { align-self: flex-start; background: var(--wasch); }
.chat-antwort.hinweis-text { color: var(--weich); }
.chat-leer { color: var(--weich); }
.chat-form { display: flex; flex-direction: column; gap: 8px; }
.chat-form textarea { width: 100%; min-height: 64px; padding: 10px 12px; line-height: 1.5; resize: vertical; border: 0; border-radius: var(--r-knopf); background: var(--wasch); }
.chat-form .knopf { align-self: flex-end; }

/* ---------------------------------------------------------------- Dialoge: grosse Karte, Blatt, Dialog */
dialog { max-width: none; max-height: none; padding: 0; border: 0; background: var(--flaeche); color: var(--tinte); }
dialog::backdrop { background: rgba(22, 25, 29, 0.44); }
.karte { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 48px); margin: 24px auto; border-radius: var(--r-kachel); overflow: auto; overscroll-behavior: contain; }
.karte.breit { width: min(1360px, calc(100vw - 48px)); }
.karte.seitlich, .blatt { width: min(480px, 100vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 16px 0 0 16px; overflow: auto; overscroll-behavior: contain; }
.karte-kopf { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 12px 12px 24px; background: var(--flaeche); }
.karte-kopf h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: var(--t-titel); font-weight: 600; line-height: 1.25; outline: none; }
.karte-kopf h2 > .sym:first-child { color: var(--akzent); }
.karte-kopf h2 > .sym:last-child:not(:first-child) { color: var(--weich); }
.karte-werkzeuge { display: flex; align-items: center; gap: 8px; }
.karte-werkzeuge:empty { display: none; }
.zurueck-weg { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -12px; padding: 0 12px 0 8px; border-radius: var(--r-knopf); font-weight: 600; color: var(--akzent); }
.zurueck-weg:hover { background: var(--wasch); }
.karte-inhalt { display: flex; flex-direction: column; gap: 24px; padding: 4px 24px 32px; }
.abschnitt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.abschnitt > h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t-text); font-weight: 600; line-height: 1.5; }
.abschnitt > h3 > .sym { color: var(--akzent); }
.abschnitt > h3 .info { margin-left: 6px; }
/* Am Telefon ist der Abstand zwischen Kacheltilen 12: der Titel eines Abschnitts sitzt dann enger an seinem Inhalt (Naehe) */
@media (max-width: 719px) { .abschnitt { gap: 6px; } }
.ziel-gross > p:first-of-type { max-width: 64ch; }
/* Spruenge in einer Karte (Ziel 3) landen unter dem klebenden Kopf der Karte, nicht darunter versteckt */
.ziel-gross { scroll-margin-top: 80px; outline: none; }
@media (min-width: 1100px) {
  .karte-inhalt.spalten-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 40px; }
  .spalten-drei .stufen li { grid-template-columns: 110px minmax(0, 1fr) 32px; }
}
.steine { display: flex; flex-direction: column; gap: 4px; }
.stein { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); }
.stein > .sym { margin-top: 2px; color: var(--weich); }
.stein.erledigt > .sym { color: var(--laeuft); }
.stein.ueber > .sym { color: var(--steht); }
.stein-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stein-titel { font-weight: 600; }
.stein-wege { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: var(--t-meta); }
.stein-text > .leise { font-size: var(--t-meta); }
.stufen { display: flex; flex-direction: column; gap: 6px; }
.stufen li { display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) minmax(40px, auto); align-items: center; gap: 10px; font-size: var(--t-meta); }
.stufe-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stufe-balken { display: block; height: 8px; border-radius: var(--r-balken); background: var(--wasch); overflow: hidden; }
.stufe-fuellung { display: block; height: 100%; width: var(--anteil, 0%); background: var(--akzent); border-radius: var(--r-balken); }
.stufe-zahl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fluss-stufe { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fluss-pfeil { color: var(--weich); }
.fluss-block { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 72px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); }
.korridor { display: flex; flex-wrap: wrap; gap: 10px 4px; }
.korridor .fluss-block { min-width: 190px; max-width: 300px; padding: 10px 14px; gap: 4px; }
.sprint-stufe.aktuell .fluss-block { background: var(--tinte); color: var(--flaeche); }
.sprint-stufe.aktuell .meta { color: var(--linie); }
.sprint-name { font-weight: 600; }
.sprint-oben { display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
.fragenliste { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; }
.fragenliste li { display: flex; gap: 10px; align-items: flex-start; }
.antworten-inhalt { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; padding-top: 8px; }
.antworten-inhalt textarea { width: 100%; min-height: 64px; padding: 10px 12px; line-height: 1.5; resize: vertical; border: 0; border-radius: var(--r-knopf); background: var(--wasch); }
.frage-wort { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.frage-wort .sym { color: var(--akzent); margin-top: 2px; }
.fragenliste textarea { width: 100%; min-height: 64px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.welle-rolle, .tabelle-rolle { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 0 6px; width: 100%; }
th, td { text-align: left; padding: 8px 12px; font-weight: 400; }
thead th { font-size: var(--t-meta); font-weight: 600; color: var(--weich); padding-top: 0; padding-bottom: 0; }
tbody th, tbody td { background: var(--wasch); }
tbody tr > :first-child { border-radius: var(--r-karte) 0 0 var(--r-karte); font-weight: 600; }
tbody tr > :last-child { border-radius: 0 var(--r-karte) var(--r-karte) 0; }
.welle td { text-align: right; font-variant-numeric: tabular-nums; }
.welle thead th:not(:first-child) { text-align: right; }
td.warn { color: var(--steht); font-weight: 600; }
.pf-name { display: flex; align-items: center; gap: 12px; }
.pf-weg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: var(--r-knopf); }
.pf-weg .sym { color: var(--weich); }
.pf-weg:hover .pf-name span { color: var(--akzent); }
.pf-zustand { display: inline-flex; align-items: center; gap: 12px; }
.ruhend summary, .einzelheiten summary, details.planung summary, .antworten summary, .art-wahl summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; }
.antworten summary .sym { color: var(--akzent); }
.art-wahl summary { gap: 0; font-weight: 400; }
.begriff-liste { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; max-width: 64ch; }
.begriff { display: flex; flex-direction: column; gap: 2px; scroll-margin-top: 140px; outline: none; }
.begriff:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: var(--r-chip); }
.begriff dt { font-weight: 600; }
.begriff dd { margin: 0; color: var(--weich); }
.kachel-kopf { scroll-margin-top: 140px; }
.art-wahl[open] summary { margin-bottom: 8px; }
.art-wahl .leise { margin-top: 8px; font-size: var(--t-meta); }
.zahlen-gross { display: flex; flex-direction: column; gap: 20px; }
.zahlen-gross li { display: flex; flex-direction: column; gap: 4px; }
.zahlen-titel { font-weight: 600; }
.projekt-oben { display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.mission { font-size: var(--t-titel); font-weight: 600; line-height: 1.4; }
.phasen { display: flex; flex-wrap: wrap; gap: 8px 4px; }
.phase .fluss-block { min-width: 0; font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.phase.erreicht .fluss-block { color: var(--tinte); }
.phase.aktuell .fluss-block { background: var(--tinte); color: var(--flaeche); }
.mini-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-zahlen li { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: var(--r-karte); background: var(--wasch); }
.mini-wert { font-size: var(--t-titel); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-zahlen .info { align-self: center; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.werte-teil { display: flex; flex-direction: column; gap: 8px; }
.punkte { display: flex; flex-direction: column; gap: 10px; }
.punkte li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.punkte li > .fett { overflow-wrap: anywhere; }
.punkt-weg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--akzent); }
.punkt-weg:hover { color: var(--tinte); }
.belege { display: flex; flex-direction: column; gap: 8px; }
.beleg { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-karte); background: var(--wasch); }
.beleg-titel { font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.leads li { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.lead-name { font-weight: 600; overflow-wrap: anywhere; }
.leads > li.mehr { grid-column: 1 / -1; padding: 4px 0 0; background: transparent; }
.zeilen > li.mehr { padding: 8px 10px 0; }
.stufen-sprung ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sprung-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-knopf); background: var(--wasch); font-weight: 600; transition: background-color 140ms var(--kurve); }
a.sprung-chip:hover { background: var(--linie); }
.sprung-chip b { color: var(--akzent); font-variant-numeric: tabular-nums; }
.sprung-chip.leer { background: transparent; color: var(--weich); }
.sprung-chip.leer b { color: var(--weich); }
.stufe-abschnitt { scroll-margin-top: 80px; outline: none; }
.stand-liste { display: flex; flex-direction: column; gap: 6px; }
.stand-liste li { display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: center; gap: 2px 12px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); }
.stand-liste .meta, .stand-mehr { grid-column: 1 / -1; }
.stand-name { font-weight: 600; }
@media (max-width: 719px) { .stand-liste li { grid-template-columns: minmax(0, 1fr); } }
.signal-liste { display: flex; flex-direction: column; gap: 10px; }
.signal-liste > li { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--r-karte); background: var(--wasch); }
.signal-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; }
.signal-kopf > .sym { color: var(--akzent); }
.signal-liste .punkte { margin-top: 4px; }
.hinweis-warn, .hinweis { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-knopf); background: var(--wasch); }
.hinweis-warn .sym { color: var(--klemmt); margin-top: 2px; }
.verwerfen-frage { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.hinweis-text { display: flex; flex-direction: column; gap: 4px; }
.hinweis .sym { color: var(--weich); margin-top: 2px; }
.inline-weg { font-weight: 600; color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.k-technik .einzelheiten summary .sym, .einzelheiten summary .sym { color: var(--weich); }

/* Korridor-Streifen fuer Ziel 1: Lagen und Breiten ueber CSS-Variablen (CSP), Zustand in der Form */
.streifen { display: flex; flex-direction: column; gap: 4px; min-width: 0; container-type: inline-size; }
.streifen-bahn { position: relative; height: 56px; }
.streifen-sprint { position: absolute; top: 0; height: 24px; left: var(--x); width: calc(var(--w) - 4px); display: flex; align-items: center; overflow: hidden; border-radius: var(--r-balken); background: var(--wasch); }
.streifen-sprint.aktuell { background: var(--tinte); }
.streifen-name { padding-left: 6px; font-size: var(--t-meta); font-weight: 600; color: var(--tinte); white-space: nowrap; }
.streifen-sprint.aktuell .streifen-name { color: var(--flaeche); }
.streifen-punkt { position: absolute; left: var(--x); top: 30px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--weich); border-radius: 50%; background: var(--flaeche); }
.streifen-punkt.reihe-1 { top: 44px; }
.streifen-punkt.erledigt { border-color: var(--laeuft); background: var(--laeuft); }
.streifen-punkt.ueber { border-color: var(--steht); border-radius: 0; background: var(--steht); transform: rotate(45deg) scale(0.85); }
.streifen-punkt.unbekannt { border-style: dashed; }
.streifen-heute { position: absolute; left: var(--x); top: 26px; height: 30px; width: 2px; margin-left: -1px; background: var(--tinte); }
.streifen-achse { position: relative; display: flex; justify-content: space-between; min-height: 20px; font-size: var(--t-meta); color: var(--weich); }
.streifen-achse .leer-platz { visibility: hidden; }
.streifen-heute-wort { position: absolute; left: var(--x); transform: translateX(-50%); font-weight: 600; color: var(--tinte); }
@container (max-width: 480px) { .streifen-sprint:not(.aktuell):not(.naechster) .streifen-name { visibility: hidden; } }
.legende { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--t-meta); color: var(--weich); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende .streifen-punkt { position: static; margin: 0; flex: none; }

/* Filter und Umschalter (Radio, Pfeiltasten gehen von selbst) */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-chip, .segment, .wahl { position: relative; display: inline-flex; }
.wahl-chip input, .segment input, .wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wahl-chip label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-knopf); background: var(--wasch); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 140ms var(--kurve), color 140ms var(--kurve); }
.chip-zahl { font-variant-numeric: tabular-nums; color: var(--weich); }
.wahl-chip input:checked + label, .segment input:checked + label { background: var(--tinte); color: var(--flaeche); }
.wahl-chip input:checked + label .chip-zahl { color: var(--linie); }
.wahl-chip input:focus-visible + label, .segment input:focus-visible + label, .wahl input:focus-visible + label { outline: 2px solid var(--tinte); outline-offset: 2px; }
.schalter label .sym { color: var(--steht); }
.schalter input:checked + label .sym { color: var(--flaeche); }
.umschalter { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-karte); background: var(--wasch); }
.segment label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-knopf); font-weight: 600; color: var(--weich); cursor: pointer; white-space: nowrap; transition: background-color 140ms var(--kurve), color 140ms var(--kurve); }

/* ---------------------------------------------------------------- Wochenplan, grosse Karte: fuenf Werktage, darunter das Wochenende */
.woche-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kw { min-width: 190px; text-align: center; font-weight: 600; }
.woche-raster { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; container-name: woche; }
.tage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tag-spalte { display: flex; flex-direction: column; min-width: 0; }
.tag { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 8px 8px; border-radius: var(--r-karte); background: var(--wasch); scroll-margin-top: 140px; }
.tag-kopf { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 8px; font-size: var(--t-meta); font-weight: 600; line-height: 1.5; }
.frei { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-karte); background: var(--flaeche); color: var(--weich); text-align: left; cursor: pointer; transition: background-color 140ms var(--kurve), color 140ms var(--kurve); }
.frei:hover { background: var(--linie); color: var(--tinte); }
.liegen { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 8px; border-radius: var(--r-karte); background: var(--wasch); }
.plan-liste.liegen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.liegen-kopf { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 0 8px; font-size: var(--t-text); font-weight: 600; color: var(--steht); }
@container woche (min-width: 1000px) {
  .werktage { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .werktage .tag { min-height: 220px; }
  .wochenende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wochenende .plan-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
}
@container woche (max-width: 999px) and (min-width: 600px) {
  .tag { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; }
  .tag-kopf { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 4px; }
  .tag .frei { padding: 0 8px; }
}

/* ---------------------------------------------------------------- Die Karte im Wochenplan: die Flaeche ihrer Marke
   Zweitkopf #0b110d mit Orange #e8470a (4,9:1), VEREO #0f0f0f mit Weiss, Conrad Ozean #002E3C mit Weiss, Team im Akzent
   mit Weiss (7,3:1), Commerzbank Gelb mit Tinte (12,5:1), Persoenlich weiss. Die Metazeile auf dunkler Flaeche in Linie
   (mindestens 5,8:1). Kein Farbstrich an einer Kante: die Flaeche traegt allein. Erledigt tritt zurueck: weisse Karte,
   weicher, durchgestrichener Text; das Zeichen bleibt unveraendert. */
.thema-persoenlich, .plan-karte, .vorschau-zeile { --k-grund: var(--flaeche); --k-text: var(--tinte); --k-meta: var(--weich); }
.thema-zweitkopf { --k-grund: var(--zk-grund); --k-text: var(--zk-orange); --k-meta: var(--zk-orange); }
.thema-vereo { --k-grund: var(--vereo-tinte); --k-text: var(--flaeche); --k-meta: var(--linie); }
.thema-conrad { --k-grund: var(--cb); --k-text: var(--flaeche); --k-meta: var(--linie); }
.thema-drillinge { --k-grund: var(--akzent); --k-text: var(--flaeche); --k-meta: var(--linie); }
.thema-commerzbank { --k-grund: var(--cb-gelb); --k-text: var(--tinte); --k-meta: var(--tinte); }
.plan-karte.erledigt, .vorschau-zeile.erledigt { --k-grund: var(--flaeche); --k-text: var(--weich); --k-meta: var(--weich); }
.plan-liste { display: flex; flex-direction: column; gap: 8px; }
/* Das Blatt ist der Knopf "Aendern" selbst (auf der Wasch-Spalte, ein neutraler Schatten). Der Haken liegt rechts oben
   auf dem Blatt: ein Kreis 32 in Wasch mit Rand, darum 44 Trefferflaeche. */
.plan-karte { position: relative; min-width: 0; border-radius: var(--r-karte); container: karte / inline-size; transition: transform 140ms var(--kurve); }
.plan-koerper { width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 10px; min-height: 52px; padding: 10px 10px 8px; border: 0; border-radius: var(--r-karte); background: var(--k-grund); color: var(--k-text); box-shadow: var(--schatten); text-align: left; cursor: pointer; transition: box-shadow 140ms var(--kurve), background-color 240ms var(--kurve); }
.plan-karte.todo .plan-koerper { padding-right: 52px; }
.plan-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
/* Agenda-Form: die Uhrzeit steht vor dem Text im selben Fluss, der Text laeuft unter ihr weiter */
.plan-zeile { display: block; line-height: 1.5; overflow-wrap: break-word; }
.plan-zeit { margin-right: 8px; font-weight: 600; color: var(--k-meta); font-variant-numeric: tabular-nums; }
.plan-text { font-weight: 600; color: var(--k-text); overflow-wrap: break-word; min-width: 0; transition: color 240ms var(--kurve); }
.plan-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-meta); color: var(--k-meta); }
.plan-meta-teile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.plan-stift { flex: none; color: var(--k-meta); }
.plan-koerper:hover .plan-stift, .plan-koerper:focus-visible .plan-stift { color: var(--k-text); }
.plan-koerper:focus-visible { outline-color: var(--tinte); }
/* Auf einer farbigen Flaeche steht "ueberfaellig" in der Schrift der Karte; das Dreieck traegt die Warnung */
.thema-zweitkopf .meta-teil.warn, .thema-vereo .meta-teil.warn, .thema-conrad .meta-teil.warn, .thema-drillinge .meta-teil.warn,
.thema-commerzbank .meta-teil.warn { color: var(--k-text); }
.plan-karte.erledigt .meta-teil.warn, .vorschau-zeile.erledigt .meta-teil.warn { color: var(--k-meta); }
.plan-haken { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.kreis { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--weich); border-radius: 50%; background: var(--wasch); color: transparent; transition: background-color 240ms var(--kurve), border-color 240ms var(--kurve), color 240ms var(--kurve); }
.plan-haken:hover .kreis { border-color: var(--tinte); }
/* Schmale Tagesspalte (Karte unter 300): das Zeichen wird 20 gross und steht in der ersten Zeile vor Uhrzeit und Text;
   nur unter 220 steht es allein oben */
@container karte (max-width: 299px) {
  .plan-koerper { gap: 8px; padding: 8px 8px 6px; min-height: 44px; }
  .plan-karte.todo .plan-koerper { padding-right: 46px; }
  .plan-koerper > .zeichen { width: 20px; height: 20px; margin-top: 2px; border-radius: var(--r-balken); }
  .plan-koerper > .zeichen-drillinge > svg, .plan-koerper > .zeichen-persoenlich > svg { width: 14px; height: 14px; }
  .plan-koerper > .zeichen-commerzbank > img { width: 16px; }
  .plan-inhalt { padding-top: 0; }
}
@container karte (max-width: 219px) {
  .plan-koerper, .plan-karte.todo .plan-koerper { flex-direction: column; gap: 6px; padding-right: 8px; }
  .plan-inhalt { width: 100%; }
}
.plan-karte.erledigt .kreis { background: var(--akzent); border-color: var(--akzent); color: var(--flaeche); }
.plan-karte.erledigt .plan-text, .vorschau-zeile.erledigt .plan-text { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  .plan-karte:hover { transform: translateY(-2px); }
  .plan-karte:hover .plan-koerper { box-shadow: 0 1px 2px rgba(22, 25, 29, 0.08), 0 6px 16px rgba(22, 25, 29, 0.10); }
}
.plan-kurz { display: flex; flex-direction: column; gap: 4px; }

/* Blatt: der geoeffnete Eintrag */
.blatt { display: none; }
.blatt[open] { display: flex; flex-direction: column; }
.blatt-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 12px 6px 24px; background: var(--flaeche); }
.blatt-art { flex: 1; min-width: 0; font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.blatt-inhalt { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 6px 24px 24px; }
.blatt-inhalt h2 { font-size: var(--t-titel); font-weight: 600; line-height: 1.35; outline: none; overflow-wrap: anywhere; }
.fakten { display: flex; flex-direction: column; gap: 8px; }
.fakten li { display: flex; align-items: center; gap: 12px; }
.fakten .sym { color: var(--weich); }
.fakten li.warn { color: var(--steht); font-weight: 600; }
.fakten li.warn .sym { color: var(--steht); }
.fakten li.dran { font-weight: 600; }
.fakten li.dran .sym { color: var(--akzent); }
.fakten li.herkunft { margin-top: -4px; padding-left: 32px; font-size: var(--t-meta); color: var(--weich); }
.absaetze { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.absaetze p { white-space: pre-line; overflow-wrap: anywhere; }
.text-weg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--akzent); }
.text-weg:hover { color: var(--tinte); }
button.text-weg { padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
/* Die Aktionen stehen auf einer eigenen Flaeche (Wasch), ohne Linie und ohne Schatten an der Kante */
.aktionen { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 20px; background: var(--wasch); }
.aktionen .knopf { flex: 1 1 0; min-width: max-content; padding: 0 12px; white-space: nowrap; background: var(--flaeche); }
.aktionen .knopf:hover { background: var(--linie); }

/* Knoepfe: eine Form. Wort 15 halbfett, Zeichen links, 44 hoch (primaer 48) */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-knopf); background: var(--wasch); color: var(--tinte); font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color 140ms var(--kurve); }
.knopf:hover { background: var(--linie); }
.knopf.primaer { min-height: 48px; padding: 0 20px; background: var(--akzent); color: var(--flaeche); }
.knopf.primaer:hover { background: var(--tinte); }
.knopf:disabled { cursor: not-allowed; color: var(--weich); }
.knopf.primaer:disabled { background: var(--wasch); color: var(--weich); }

/* Kleiner Dialog */
.dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; border-radius: var(--r-kachel); overflow: auto; }
.dialog-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px 24px; }
.dialog-kopf h2 { flex: 1; font-size: var(--t-titel); font-weight: 600; line-height: 1.25; }
.dialog-inhalt { display: flex; flex-direction: column; gap: 14px; padding: 6px 24px 24px; }
.formular { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld-wort { font-size: var(--t-meta); font-weight: 600; color: var(--weich); padding: 0; }
.feld-hinweis { font-size: var(--t-meta); color: var(--weich); }
.felder-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.formular textarea, #prompt, #pl-warum { width: 100%; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; border: 0; border-radius: var(--r-knopf); background: var(--wasch); }
#prompt { min-height: 220px; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.werkzeug-wahl { display: inline-flex; gap: 8px; margin-right: auto; }
.ergebnis { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ergebnis .sym { color: var(--akzent); }
.formfehler { color: var(--steht); font-weight: 600; }
.plan { padding: 12px 14px; border-radius: var(--r-knopf); background: var(--wasch); font: 400 var(--t-meta)/1.5 "Sora", system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.auswahl-liste { display: flex; flex-direction: column; gap: 6px; }
.auswahl-zeile, .geteilt-zeile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); }
.auswahl-zeile { cursor: pointer; }
.auswahl-zeile input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--akzent); }
.auswahl-text { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.block-zeile { display: block; }
.punkte.bestaetigen li { padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); }
.sicht-liste { display: flex; flex-direction: column; gap: 6px; }
.sicht-wahl { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r-karte); background: var(--wasch); text-align: left; cursor: pointer; transition: background-color 140ms var(--kurve); }
.sicht-wahl:hover { background: var(--linie); }
.sicht-wahl.gewaehlt { background: var(--tinte); color: var(--flaeche); }
.sicht-wahl.gewaehlt .avatar { background: var(--flaeche); color: var(--tinte); }
.sicht-wahl.gewaehlt .meta { color: var(--linie); }
.sicht-name { flex: 1; display: flex; flex-direction: column; font-weight: 600; }

/* Woche planen */
.planung { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--r-karte); background: var(--grund); }
.planung legend { float: left; width: 100%; margin-bottom: 4px; font-weight: 600; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 0 20px; }
.wahl-reihe.spalte { flex-direction: column; }
.plan-projekte { display: flex; flex-direction: column; gap: 12px; }
.plan-projekte li, .plan-kopf { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.plan-kopf { font-size: var(--t-meta); font-weight: 600; color: var(--weich); }
.plan-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dialog .welle-rolle { margin: 0 -4px; }

/* Hinweis: immer an derselben Stelle, unten in der Mitte (auf der Seite und in jeder Karte), nie ueber Reitern oder
   Ueberschriften; am Handy und Tablet ueber der Reiterleiste */
.meldung { position: fixed; left: 50%; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); min-height: 48px; padding: 4px 4px 4px 16px; border-radius: var(--r-knopf); background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: 0 2px 4px rgba(22, 25, 29, 0.10), 0 12px 32px rgba(22, 25, 29, 0.22); }
.meldung > span { flex: 1; min-width: 0; padding: 8px 8px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meldung.im-dialog { bottom: 16px; }
.meldung-knopf { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-knopf); background: var(--wasch); color: var(--tinte); font-weight: 600; cursor: pointer; }
.meldung-knopf:hover { background: var(--linie); }

/* 1200 bis 1439: dieselbe Zeile, die Reiter etwas enger */
@media (max-width: 1439px) and (min-width: 1200px) {
  .reiter [role="tab"] { padding: 0 12px; }
  .person-name { display: none; }
}

/* ---------------------------------------------------------------- Mittel: 720 bis 1099 */
@media (max-width: 1099px) {
  .kopf { gap: 12px; }
  .reiter [role="tab"] { padding: 0 10px; }
  .ziele-drei { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ziel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 24px; row-gap: 6px; align-items: center; }
  .ziel .ziel-titel { grid-row: span 2; }
  .ziel > .zahl, .ziel > .fehlerbox { grid-column: 2; }
  .ziel > .ziel-fuss { grid-column: 2; }
  .woche-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woche-drei > .woche-teil:last-child { grid-column: 1 / -1; }
  .besucher-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .besucher-drei > .besucher-seite:last-child { grid-column: 1 / -1; }
  .board-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blatt, .karte.seitlich { width: 100vw; border-radius: 0; }
  .drei, .zwei { grid-template-columns: 1fr; gap: 20px; }
  .zahl-felder { gap: 16px; }
  .strahl-kopf { display: none; }
  .strahl-zeile { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(150px, 1fr); }
  .strahl-zustand { display: none; }
  .einsatz-kopf { display: none; }
  .einsatz-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .einsatz-name { grid-column: 1 / -1; }
  .einsatz-etikett { display: block; }
  /* Unter 1100 px: Commits neben Muehe, darunter die Agentenarbeit (Token und Stunden) mit eigener Ueberschrift */
  .einsatz-zeile > :nth-child(2) { order: 1; }
  .einsatz-zeile > :nth-child(6) { order: 2; }
  .einsatz-agenten { display: block; order: 3; grid-column: 1 / -1; margin-bottom: -8px; font-size: var(--t-meta); font-weight: 600; color: var(--tinte); }
  .einsatz-zeile > :nth-child(4) { order: 4; }
  .einsatz-zeile > :nth-child(5) { order: 5; }
}

/* ---------------------------------------------------------------- Bis 1199 px: Reiter zuerst im Kopf, beim Rollen unten
   Die Reiter stehen zuerst als letzte Zeile im Kopf, der Chat als fuenfter Eintrag daneben; sobald diese Zeile oben aus
   dem Bild rollt, stehen sie unten als Leiste, der Chat in ihr (body.reiter-unten). So liegt im ersten Schirm nichts
   Festes ueber Inhalt (wie martino, anordnung/SKILL.md 1b), und nichts schwebt ueber dem Inhalt. Jeder Reiter ist so
   breit wie sein Wort plus ein gleicher Anteil am Rest, damit sich keine Woerter beruehren. */
@media (max-width: 1199px) {
  .kopf { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; height: 120px; gap: 0 8px; }
  .marke, .kopf-rechts { height: 56px; }
  .kopf-rechts { margin-left: auto; }
  .reiter { order: 3; flex: 0 0 calc(100% + 2 * var(--rand)); justify-self: auto; display: flex; gap: 0; height: 64px; margin: 0 calc(-1 * var(--rand)); padding: 0 64px 0 0; border-radius: 0; background: transparent; }
  body.reiter-unten .reiter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(64px + env(safe-area-inset-bottom)); margin: 0; padding: 0 64px env(safe-area-inset-bottom) 0; background: var(--wasch); }
  .reiter [role="tab"] { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 2px; min-width: 56px; height: 64px; padding: 0 4px; border-radius: 0; font-size: var(--t-meta); background: transparent; }
  .reiter [role="tab"]:hover { background: transparent; }
  .reiter [role="tab"][aria-selected="true"] { background: transparent; color: var(--tinte); }
  .reiter-wort { white-space: nowrap; }
  .reiter-zeichen { width: 56px; height: 30px; border-radius: var(--r-kachel); }
  .reiter [role="tab"][aria-selected="true"] .reiter-zeichen { background: var(--tinte); color: var(--flaeche); }
  .reiter .sym { width: 22px; height: 22px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* Der Chat: der fuenfte Platz der Reiterzeile (64 breit), Figur und Wort wie ein Reiter; unten in der Leiste */
  .chat-knopf { position: absolute; top: 56px; right: 0; bottom: auto; flex-direction: column; justify-content: center; gap: 2px; width: 64px; height: 64px; border-radius: 0; background: transparent; box-shadow: none; color: var(--weich); font-size: var(--t-meta); font-weight: 600; }
  .chat-knopf:hover, .chat-knopf[aria-expanded="true"] { background: transparent; color: var(--tinte); }
  .chat-figur .stern-svg svg { width: 22px; height: 22px; }
  .chat-blase { right: -8px; bottom: -4px; width: 14px; height: 14px; }
  .chat-blase .sym { width: 9px; height: 9px; }
  .chat-wort { display: block; line-height: 1.5; }
  body.reiter-unten .chat-knopf { position: fixed; z-index: 31; top: auto; bottom: env(safe-area-inset-bottom); }
  .chat-feld { right: 8px; left: 8px; width: auto; bottom: 12px; max-height: calc(100vh - 140px); }
  body.reiter-unten .chat-feld { bottom: calc(64px + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - 64px - 96px); }
  .meldung { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); }
  .fuehrung.mitte { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- Telefon: unter 720 */
@media (max-width: 719px) {
  :root { --rand: 16px; --luft: 12px; --innen: 16px; }
  .wortmarke { font-size: var(--t-text); }
  .marke { gap: 8px; }
  .kopf-rechts { gap: 4px; }
  .person-name, .profil-knopf > .sym:last-child { display: none; }
  .profil-knopf { padding: 0 8px; }
  .seitenkopf h1 { font-size: var(--t-titel); }
  .seitenkopf { margin-bottom: 12px; }
  main { padding: 4px var(--rand) 24px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > *, .raster [class*="k-"] { grid-column: 1 / -1 !important; }
  .kachel { gap: 12px; }
  /* Handy: die Leitziele eng, Nummer und Name in einer Zeile, der Stichtag neben dem Balken, die Warnung darunter */
  .ziele-drei { gap: 16px; }
  .ziel { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .ziel-titel > span { display: block; }
  .ziel-nr { display: inline; margin-right: 4px; }
  .ziel-name { display: inline; }
  .ziel-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
  .ziel-fuss .meta { display: contents; }
  .ziel-fuss .meta-teil.warn { grid-column: 1 / -1; }
  .sprint-fuss { grid-template-columns: auto minmax(0, 1fr); }
  .sprint-fuss > .meta { grid-column: 1 / -1; }
  .woche-drei { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .besucher-drei { grid-template-columns: minmax(0, 1fr); }
  main { padding-bottom: 88px; }
  .zeilen-zwei, .zeilen-drei { display: flex; }
  .aufgaben-wahl { width: 100%; }
  .aufgaben-wahl .umschalter { flex: 1 1 100%; display: flex; }
  .aufgaben-wahl .segment { flex: 1; }
  .aufgaben-wahl .segment label { flex: 1; justify-content: center; padding: 0 8px; }
  .aufgaben-wahl .schalter, .aufgaben-wahl .schalter label { width: 100%; justify-content: center; }
  .board-spalten { grid-template-columns: minmax(0, 1fr); }
  .board-spalten .spalte { display: none; }
  .board-spalten .spalte.gewaehlt { display: flex; }
  /* Spaltenwahl am Handy: zwei mal zwei, Zeichen, Zahl und Wort, kein Wort wird getrennt */
  .spalten-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-karte); background: var(--wasch); }
  .wahl { display: flex; min-width: 0; }
  .wahl label { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; width: 100%; min-height: 52px; padding: 6px 12px; border-radius: var(--r-knopf); color: var(--weich); cursor: pointer; }
  .wahl-oben { display: flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .wahl-wort { max-width: 100%; font-size: var(--t-meta); font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wahl input:checked + label { background: var(--tinte); color: var(--flaeche); }
  .zahl-felder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .strahl-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 4px 0; }
  .strahl-zustand { display: block; }
  .strahl-spur { grid-column: 1 / -1; grid-row: 2; }
  .strahl-phase { grid-column: 1 / -1; grid-row: 3; }
  .einsatz-zeile { gap: 10px 12px; padding: 10px; }
  .karte, .karte.breit { width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
  .karte-kopf { padding: 8px 8px 8px 16px; }
  .karte-kopf h2 { flex: 1 1 60%; }
  .woche-karte .karte-werkzeuge { order: 3; flex: 1 1 100%; justify-content: flex-end; }
  .karte-inhalt { padding: 6px 16px 28px; gap: 20px; }
  .blatt-kopf { padding: 8px 8px 8px 16px; }
  .blatt-inhalt { padding: 6px 16px 20px; }
  .aktionen { padding: 12px 16px 16px; }
  .stufen li { grid-template-columns: 118px minmax(0, 1fr) minmax(32px, auto); }
  .felder-zwei { grid-template-columns: minmax(0, 1fr); }
  .dialog-knoepfe { justify-content: stretch; }
  .dialog-knoepfe > .knopf, .werkzeug-wahl { flex: 1 1 100%; }
  .werkzeug-wahl .knopf { flex: 1; }
  .umschalter { display: flex; width: 100%; }
  .umschalter .segment { flex: 1; }
  .segment label { flex: 1; justify-content: center; padding: 0 8px; }
  .korridor .fluss-stufe { width: 100%; }
  .korridor .fluss-block { flex: 1; min-width: 0; max-width: none; }
  .fluss-block { min-width: 64px; padding: 8px 10px; }
  .kw { min-width: 0; flex: 1; }
  .blaettern { flex: 1; }
  .plan-kopf { display: none; }
  .plan-projekte { gap: 16px; }
  .plan-projekte li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
  .plan-projekte li > input { grid-column: 1 / -1; }
}

/* Sehr schmal (320, etwa 200 Prozent Zoom am Handy): die Wortmarke nur als Zeichen, die Reiter enger */
@media (max-width: 359px) {
  .wortmarke { display: none; }
  .reiter [role="tab"] { min-width: 44px; padding: 0 2px; }
  .reiter-zeichen { width: 44px; }
  .reiter, body.reiter-unten .reiter { padding-right: 56px; }
  .chat-knopf { width: 56px; }
  .kopf-rechts > .such-knopf { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .plan-karte:hover, .kachel.klickbar:hover .kachel-titel .chevron { transform: none !important; }
}
.k-hilfe p, .k-hilfe .linien { max-width: 56ch; }


/* ---------------------------------------------------------------- Drei Signale (ARCHITEKTUR.md 22) */
.signal-erst { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--r-karte); background: var(--wasch); }
.signal-erst-wort { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; color: var(--akzent); }
.signal-erst-titel { font-size: var(--t-titel); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.signal-erst .knopfreihe { margin-top: 6px; align-items: center; }
.signal-zeile { display: flex; align-items: center; gap: 6px; }
.signal-zeile > .zeile { flex: 1; min-width: 0; }
.signal-art { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 76px; font-size: var(--t-meta); font-weight: 600; color: var(--akzent); }
.tausch { flex: none; }
/* Am Telefon steht die Art als Zeile ueber dem Titel, damit der Titel die volle Breite hat */
@media (max-width: 719px) {
  .signal-zeile > .zeile { flex-wrap: wrap; row-gap: 4px; }
  .signal-art { flex-direction: row; flex-basis: 100%; width: auto; }
  .signal-zeile > .zeile > .chevron { display: none; }
}
@media (min-width: 1100px) {
  .signal-liste-drei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
.zustand-offen { display: flex; align-items: center; gap: 8px; color: var(--weich); }
.zustand-offen .sym { color: var(--klemmt); }

/* Sprint: Resttage, Band, Sprintziele als Liste und die Meilensteine im Sprint */
.sprint-oben { display: grid; grid-template-columns: auto minmax(120px, 280px) auto; align-items: center; gap: 8px 20px; }
.sprint-teile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.sprint-teil { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sprint-teil .listen-kopf { margin-bottom: 0; }
@media (max-width: 719px) { .sprint-teil { gap: 6px; } }
.sprintziele { display: flex; flex-direction: column; gap: 8px; }
.sprintziele li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-titel); font-weight: 600; line-height: 1.3; color: var(--akzent); overflow-wrap: anywhere; }
.sprintziele li .sym { margin-top: 3px; }
.raster-ziele.ohne-notizen .sprint-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kalender: Montag bis Sonntag, private Eintraege in der Flaeche ihrer Marke, Aufgaben weiss */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kal-tag { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 6px 6px; border-radius: var(--r-karte); background: var(--wasch); }
.kal-kopf { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 4px; font-size: var(--t-meta); font-weight: 600; }
.kal-tag.vorbei .kal-kopf { color: var(--weich); }
.kal-liste { display: flex; flex-direction: column; gap: 6px; }
.kal-eintrag .plan-koerper { min-height: 44px; padding: 8px; gap: 6px; align-items: flex-start; }
.kal-eintrag.todo .plan-koerper { padding-right: 46px; }
.kal-eintrag .plan-koerper > .zeichen { width: 16px; height: 16px; margin-top: 3px; border-radius: var(--r-balken); }
.kal-eintrag .plan-koerper > .zeichen-drillinge > svg, .kal-eintrag .plan-koerper > .zeichen-persoenlich > svg { width: 12px; height: 12px; }
.kal-eintrag .plan-koerper > .zeichen-commerzbank > img { width: 12px; }
.kal-eintrag .plan-zeile { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kal-eintrag .plan-koerper > .sym { color: var(--k-text); margin-top: 3px; }
.kal-weg { display: flex; align-items: flex-start; gap: 6px; min-height: 44px; padding: 8px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: var(--schatten); transition: background-color 140ms var(--kurve); }
.kal-weg:hover { background: var(--linie); }
.kal-weg .zeichen { margin-top: 3px; }
.kal-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kal-frei .frei { min-height: 44px; }
.kal-frei > .leise { display: block; padding: 4px; font-size: var(--t-meta); }
.kal-fuss { display: flex; flex-wrap: wrap; gap: 6px; }
@container karte (max-width: 299px) {
  .kal-eintrag .plan-koerper, .kal-eintrag.todo .plan-koerper { flex-direction: row; }
}
@media (max-width: 1099px) {
  .kalender { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sprint-teile, .raster-ziele.ohne-notizen .sprint-teile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .kalender { grid-template-columns: minmax(0, 1fr); }
  .kal-tag.leer:not(.heute) { flex-direction: row; align-items: center; justify-content: space-between; padding: 4px 6px 4px 8px; }
  .kal-tag.leer:not(.heute) .kal-liste { flex: 0 1 50%; }
  .sprint-oben { grid-template-columns: auto minmax(0, 1fr); }
  .sprint-oben > .meta { grid-column: 1 / -1; }
}

/* Aufgaben: wessen Arbeit, Rauschen eingeklappt mit Zahl */
.wessen { margin: 0 0 var(--luft); }
.rauschen summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--akzent); cursor: pointer; list-style: none; }
.rauschen summary::-webkit-details-marker { display: none; }
.rauschen[open] summary .sym { transform: rotate(180deg); }
.rauschen-inhalt { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }

/* Lernschleife je Programm im Portfolio (auf Nacht) */
.lernschleife summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; }
.lernschleife summary::-webkit-details-marker { display: none; }
.lernschleife summary .leise { font-weight: 400; }
.lernschleife[open] summary .sym { transform: rotate(180deg); }
.nacht .lernschleife summary .leise { color: var(--linie); }
.lern-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* Auf Nacht ohne eigene Flaeche: die Zeilen trennt Luft, der Text steht direkt auf Tinte (Weiss 17:1, Linie 14:1) */
.lern-liste { gap: 18px; }
.lern-zeile { display: grid; grid-template-columns: minmax(150px, 0.7fr) repeat(3, minmax(0, 1fr)); gap: 4px 16px; }
.nacht .lernschleife .leise, .nacht .lernschleife .meta { color: var(--linie); }
.lern-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lern-teil { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-meta); overflow-wrap: anywhere; }
.nacht .inline-weg { color: var(--flaeche); }
@media (max-width: 1099px) {
  .lern-zeile { grid-template-columns: minmax(0, 1fr); }
}

/* System: Wie wir arbeiten, Tutorial, Rueckmeldung, Einladen */
.methode-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.methode-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-karte); background: var(--wasch); }
.methode-zeile > .sym { color: var(--akzent); margin-top: 2px; }
.methode-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-methode > .meta { overflow-wrap: anywhere; }
.methode-fund { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1099px) { .methode-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .methode-liste { grid-template-columns: minmax(0, 1fr); } }
.tutorial-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.tutorial-liste li { display: flex; align-items: flex-start; gap: 12px; }
.tutorial-bild { flex: none; width: 72px; height: 72px; padding: 6px; border-radius: var(--r-karte); background: var(--wasch); }
.bild-flaeche { fill: var(--flaeche); }
.bild-nacht { fill: var(--tinte); }
.tutorial-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 719px) { .tutorial-liste { grid-template-columns: minmax(0, 1fr); } }
.k-rueckmeldung select, .k-rueckmeldung textarea, .einladung-ausgabe input { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r-knopf); background: var(--wasch); color: var(--tinte); }
.k-rueckmeldung textarea { line-height: 1.5; resize: vertical; }
.einladung-ausgabe { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.einladung-ausgabe:empty { display: none; }

/* Anmeldung: eine ruhige Maske in der CI, ohne Reiter und ohne Daten */
body.startet .kopf, body.startet main, body.startet .chat-knopf { visibility: hidden; }
body.ohne-sitzung .kopf, body.ohne-sitzung main, body.ohne-sitzung .chat-knopf, body.ohne-sitzung .chat-feld { display: none; }
body.ohne-sitzung { padding-bottom: 0; }
.zugang { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
/* Am Telefon beginnt die Maske oben, sonst stuende im ersten Schirm ein Drittel leerer Grund */
@media (max-width: 719px) { .zugang { place-items: start center; padding-top: 24px; } }
.zugang-karte { display: flex; flex-direction: column; gap: 16px; width: min(420px, 100%); padding: 32px 28px; border-radius: var(--r-kachel); background: var(--flaeche); }
.zugang-kopf { display: flex; align-items: center; gap: 10px; }
.zugang-marke { font-size: var(--t-titel); font-weight: 600; }
.zugang-karte h1 { font-size: var(--t-zahl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.zugang-form { display: flex; flex-direction: column; gap: 14px; }
.zugang-form .feld input { width: 100%; }
.zugang-form .knopf.primaer { justify-content: center; }

/* Suche ueber alles: ein Fenster oben in der Mitte */
.suche { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px)); margin: 10vh auto auto; padding: 0; border-radius: var(--r-kachel); overflow: hidden; }
.suche[open] { display: flex; flex-direction: column; }
.such-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; }
.such-kopf > .sym { color: var(--weich); }
.such-kopf input { flex: 1; min-width: 0; min-height: 48px; padding: 0 8px; border: 0; background: transparent; font-size: var(--t-titel); }
.such-kopf input:focus-visible { outline: none; }
.such-liste { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.such-liste li[role="option"] { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-knopf); cursor: pointer; }
.such-liste li[role="option"] > .sym { color: var(--weich); }
.such-liste li.gewaehlt, .such-liste li[role="option"]:hover { background: var(--wasch); }
.such-wort { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.such-leer { padding: 12px; }
.such-fuss { padding: 8px 16px 12px; }

/* Willkommen und Fuehrung: ein ruhiges Fenster unten in der Mitte; das Ziel traegt den Fokusrahmen in Tinte */
.fuehrung { position: absolute; left: var(--f-links, 16px); top: var(--f-oben, 96px); z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); padding: 16px 18px; border-radius: var(--r-kachel); background: var(--flaeche); color: var(--tinte); box-shadow: 0 2px 4px rgba(22, 25, 29, 0.10), 0 16px 40px rgba(22, 25, 29, 0.24); }
.fuehrung.fest { position: fixed; }
.fuehrung.mitte { left: 50%; top: auto; bottom: 24px; transform: translateX(-50%); }
.fuehrung[hidden] { display: none; }
.fuehrung h2 { font-size: var(--t-titel); font-weight: 600; }
.fuehrung .meta { color: var(--weich); }
.fuehrung-ziel { outline: 3px solid var(--tinte); outline-offset: 4px; }
.nacht.fuehrung-ziel { outline-color: var(--akzent); }

/* ---------------------------------------------------------------- Nachbesserung 22 (Laientest und Rotes Team, 01.10.2026) */
/* Tauschen: eigenes Zeichen mit Wort; im ersten Signal auf Weiss, weil die Flaeche dort Wasch ist */
.knopf.tausch { flex: none; }
.signal-erst .knopf.tausch { background: var(--flaeche); }
.signal-erst .knopf.tausch:hover { background: var(--linie); }
@media (max-width: 719px) {
  .signal-zeile { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .signal-zeile > .zeile { flex-basis: 100%; }
  .signal-zeile > .knopf.tausch { min-height: 44px; }
}
/* Aufgaben: eine Zeile, ob etwas brennt */
.brennt { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--luft); padding: 10px 14px; border-radius: var(--r-karte); background: var(--flaeche); font-weight: 600; }
.brennt > .sym { color: var(--steht); }
.brennt.ruhig > .sym { color: var(--laeuft); }
.brennt > span { flex: 1; min-width: 0; }
/* Blatt: Weg in die Quelle oben, Markdown als ruhige Elemente */
.blatt-weg { margin: -12px 0 -8px; }
.md-titel { font-size: var(--t-text); font-weight: 600; }
.absaetze.md p { white-space: normal; }
.md-liste { display: flex; flex-direction: column; gap: 4px; padding-left: 0; }
.md-tabelle { display: flex; flex-direction: column; gap: 6px; }
.md-tabelle li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; border-radius: var(--r-karte); background: var(--wasch); overflow-wrap: anywhere; }
.md-feld { min-width: 0; }
.md code { font-family: ui-monospace, monospace; font-size: var(--t-meta); }
.md-ganz { display: flex; flex-direction: column; gap: 10px; }
/* Kalender: morgen markiert, Legende der Kartenfarben */
.kal-kopf .chip:not(.dunkel) { background: var(--flaeche); }
.kal-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; border-radius: var(--r-karte); background: var(--wasch); font-size: var(--t-meta); }
.kal-legende li { display: inline-flex; align-items: center; gap: 6px; }
.kal-muster { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--k-grund, var(--flaeche)); }
.kal-muster.aufgabe { background: var(--flaeche); }

/* Handy: Leitziele kompakt (Name in einer Zeile, darunter Zahl, Balken, Stichtag), damit das erste Signal im ersten
   Bildschirm steht; die Unterzeile im Seitenkopf entfaellt (Laientest 22, Befund 3) */
@media (max-width: 719px) {
  .seitenkopf .seitenkopf-titel .leise { display: none; }
  .seitenkopf { align-items: center; }
  .ziele-drei { gap: 14px; }
  .ziel { display: grid; grid-template-columns: auto minmax(32px, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 4px; }
  .ziel .ziel-titel { grid-column: 1 / -1; min-width: 0; }
  .ziel .ziel-titel > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ziel > .zahl { grid-column: 1; }
  .ziel > .zahl .zahl-wert { font-size: var(--t-titel); }
  .ziel > .zahl .zahl-text, .ziel > .zahl .zahl-ohne { white-space: nowrap; font-size: var(--t-meta); line-height: 1.4; }
  .ziel > .fehlerbox { grid-column: 1 / -1; }
  .ziel > .ziel-fuss, .ziel-fuss .meta { display: contents; }
  .ziel .balken { grid-column: 2; }
  .ziel .ziel-datum { grid-column: 3; }
  .ziel .meta-teil.warn { grid-column: 1 / -1; }
  .signal-erst-titel { font-size: var(--t-text); }
}

/* Rechner: der Chat-Knopf hat rechts eine eigene Spur, damit er nie einen Pfeil oder Knopf einer Kachel verdeckt
   (Laientest 22, Befund 18). Kopf und Inhalt enden an derselben Kante; ab 1600 px reicht der Rand neben dem Inhalt. */
@media (min-width: 1200px) {
  main, .kopf { padding-right: max(var(--rand), calc(88px - max(0px, (100vw - 1440px) / 2))); }
  .chat-knopf { right: 16px; }
  .chat-feld { right: 16px; }
}
/* Ab 900 px stehen die Knoepfe des ersten Signals rechts neben seinem Text: der Block wird flacher, das Signal bleibt
   der erste Handlungsaufruf (erster Bildschirm, Nachbesserung 22) */
@media (min-width: 900px) {
  .signal-erst { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center; }
  .signal-erst > :not(.knopfreihe) { grid-column: 1; }
  .signal-erst > .knopfreihe { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; flex-wrap: nowrap; }
}
/* Laden: das Geruest hat etwa die Hoehe des Inhalts (Peter Plattform 7), damit beim Fuellen nichts springt und der erste
   Bildschirm schon beim Laden so aussieht wie danach */
.kachel.geruest { min-height: 260px; }
body.fuehrung-laeuft main { padding-bottom: 60vh; }