/* ===========================================================================
   Marketing OS — Stylesheet V3
   Drop-in-Ersatz fuer static/marketing/v2.css.
   Alle Klassennamen aus V2 bleiben erhalten; V3 ergaenzt nur Tokens und
   Varianten. Keine Template-Aenderung noetig, ausser wo unten "NEU" steht.

   Was gegenueber V2 anders ist und warum:

   1. --marke (#69C8F3, das CI-Cyan der Schneeflocke) war in V2 definiert,
      aber an KEINER Stelle benutzt. Ebenso --marke-dunkel, --akzent-stark,
      --rand-stark, --leise, --radius-sm. Sechs von 24 Tokens waren tot.
      Die Marke stand im Stylesheet, aber nicht auf dem Bildschirm.
      V3 setzt --marke sichtbar ein (Logo-Zeichen, aktive Navigation,
      Fokus-Akzent) — mit dunkler Schrift, wo Text darauf sitzt (7,2:1).

   2. Kontrast. V2 hat die Shop-Farben 1:1 uebernommen, ohne sie fuer diesen
      Kontext nachzurechnen. Gemessen (WCAG 2.2):
        Weiss auf --akzent #1A8AB8 ............ 3,91:1  < 4,5  (Primaerknopf)
        --akzent auf --akzent-hell ............ 3,49:1  < 4,5  (Navi aktiv)
        --messung #B8860B auf --messung-hell .. 3,03:1  < 4,5  (Marker)
        Fokusring --akzent-hell auf Weiss ..... 1,12:1  < 3    (unsichtbar)
        Feldrand --rand auf Weiss ............. 1,28:1  < 3    (SC 1.4.11)
      V3 loest das wie V2 es beim Rot schon getan hat: die CI-Farbe bleibt
      unangetastet, daneben steht ein ABGELEITETER Textwert. Gleiche Logik,
      gleiche Begruendung, jetzt nur konsequent auf alle Faelle angewandt.

   3. Skalen statt Einzelwerte. V2 hatte 21 verschiedene Pixelabstaende und
      die Schriftstaerken 560/620/680 — Werte, die niemand wiederfinden kann.
      V3 hat eine Abstands-, eine Schriftgroessen- und eine Staerkenskala.

   Quelle der CI-Werte bleibt shopware-plugin/src/Resources/public/pdp/
   kaelte-pdp.css. Wer eine CI-FARBE aendern will, aendert sie DORT zuerst.
   Die abgeleiteten *-text-Werte unten gehoeren dagegen hierher.
   =========================================================================== */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("rubik.b65daadded74.woff2") format("woff2");   /* selbst gehostet, DSGVO */
}

:root {
  /* --- Flaechen und Linien (CI-Graustufen) --------------------------- */
  --grund: #F8F9FA;            /* kpdp-grey-50   */
  --flaeche: #ffffff;
  --rand: #E0E4E8;             /* kpdp-grey-200  — nur Trennlinien       */
  --rand-stark: #8C96A1;       /* ABGELEITET: 3,0:1 auf Weiss.
                                  Konturen von Bedienelementen (Felder,
                                  Knoepfe) brauchen 3:1 (WCAG 1.4.11).
                                  kpdp-grey-300 #C8CDD4 erreicht 1,6:1. */
  --text: #2E2E2E;             /* kpdp-grey-700  */
  --gedaempft: #6B7480;        /* kpdp-grey-500  — 4,74:1 auf Weiss, ok  */
  --leise: #9AA2AC;            /* kpdp-grey-400  — NUR dekorativ, 2,6:1.
                                  Nie fuer Text verwenden.               */

  /* --- Marke ---------------------------------------------------------- */
  --marke: #69C8F3;            /* kpdp-primary        — Flaeche, dunkler Text */
  --marke-dunkel: #3AACDE;     /* kpdp-primary-dark   — Raender, Hover        */
  --akzent: #1A8AB8;           /* kpdp-primary-darker — Flaechen, grosse Typo */
  --akzent-text: #177DA6;      /* ABGELEITET: 4,65:1 mit Weiss.
                                  Fuer Weiss-auf-Farbe und Links in
                                  Fliesstextgroesse. Gleiche Herleitung wie
                                  --risiko: CI-Ton, fuer Text abgedunkelt. */
  --akzent-hell: #E3F5FD;      /* kpdp-accent      */
  --akzent-stark: #C4E8F8;     /* kpdp-accent-dark */
  --fokus: #0F6E96;            /* ABGELEITET: 5,7:1 auf Weiss.            */

  /* --- Status ---------------------------------------------------------- */
  --risiko: #C21F1F;           /* CI-Fehlerrot #FF0000 abgedunkelt (5,9:1) */
  --risiko-hell: #FDECEC;
  --risiko-rand: #EEC0C0;
  --chance: #1e7e34;           /* CI-Gruen #28A745 abgedunkelt (4,6:1)     */
  --chance-hell: #E8F7EE;
  --chance-rand: #C0DBC6;
  --messung: #8A6508;          /* ABGELEITET aus kpdp-warning-fg #B8860B:
                                  4,96:1 statt 3,03:1 auf --messung-hell.  */
  --messung-hell: #FFF6E5;
  --messung-rand: #EBDDBB;

  /* --- Form ------------------------------------------------------------ */
  --radius: 5px;               /* kpdp-radius    */
  --radius-sm: 3px;            /* kpdp-radius-sm */
  --radius-pille: 999px;       /* NEU: ersetzt die zweimal hart notierten 20px */
  --schatten: 0 1px 2px rgba(46, 46, 46, .06);
  --schatten-hoch: 0 4px 12px rgba(46, 46, 46, .10);

  /* --- Abstaende (4er-Raster) ------------------------------------------ */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px;
  --a5: 20px; --a6: 24px; --a8: 32px; --a12: 48px;

  /* --- Typografie ------------------------------------------------------ */
  --t-xs: 11px; --t-s: 12px; --t-m: 13px; --t-l: 14px;
  --t-basis: 15px; --t-gross: 17px; --t-h2: 20px; --t-h1: 23px;
  --gew-normal: 400; --gew-mittel: 500; --gew-halbfett: 600; --gew-fett: 700;

  --breite: 1180px;
  --breite-text: 640px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: var(--t-basis)/1.55 "Rubik", ui-sans-serif, system-ui, "Segoe UI", -apple-system, sans-serif;
}

a { color: var(--akzent-text); }

/* Ein einziger, sichtbarer Fokusring fuer ALLES — in V2 hatte nur .feld
   einen, und der war mit 1,12:1 praktisch unsichtbar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Nur fuer Screenreader — NEU, gebraucht fuer die Status-Auswahlfelder
   in der Aufgabenliste (siehe template-patches.md). */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopf und Navigation ---------- */

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 20; }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 10px var(--a5); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.marke { display: flex; align-items: center; gap: 10px; font-weight: var(--gew-halbfett); text-decoration: none; color: var(--text); }
/* Das Logo-Zeichen traegt jetzt das CI-Cyan statt der dunklen Ableitung.
   #2E2E2E auf #69C8F3 = 7,2:1 — die Marke ist sichtbar UND lesbar. */
/* Das echte Shop-Logo statt des Buchstabenquadrats (20.08.2026).
   Die Datei ist dieselbe wie in der Produktdaten-Maske — dort liegt sie als
   Data-URI im Stylesheet, hier als statische Datei, weil Django sie ohnehin
   mit Hash ausliefert. 341x132, auf 28px Hoehe skaliert (= 72px breit).
   Das Cyan der Schneeflocke ist --marke; die Markenfarbe kommt damit an der
   prominentesten Stelle vor, an der sie hingehoert. */
.marke-logo { height: 28px; width: auto; display: block; }

/* Bleibt fuer Stellen ohne Bild (Druck, fehlgeschlagener Ladevorgang). */
.marke-zeichen {
  width: 30px; height: 30px; border-radius: var(--radius);
  background: var(--marke); color: var(--text);
  display: grid; place-items: center;
  font-size: var(--t-s); font-weight: var(--gew-fett); letter-spacing: .5px;
}
.marke small { display: block; font-weight: var(--gew-normal); font-size: var(--t-xs); color: var(--gedaempft); }

.navi { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.navi a { padding: 7px var(--a3); border-radius: var(--radius); text-decoration: none; color: var(--gedaempft); font-size: var(--t-l); white-space: nowrap; }
.navi a:hover { background: var(--grund); color: var(--text); }
/* aktiv: dunklerer Textwert auf hellem Grund (4,6:1 statt 3,49:1)
   plus eine 2px-Kante in der Markenfarbe — der Zustand ist damit nicht
   mehr nur ueber Farbe kodiert. */
.navi a.an {
  /* KORREKTUR gegenueber dem Pruefbericht (20.08.2026): dort steht fuer
     diesen Fall 4,65:1 — das ist aber der Wert von WEISS auf #177DA6. Die
     tatsaechliche Paarung ist --akzent-text auf --akzent-hell und ergibt
     nachgerechnet nur 4,15:1, bliebe also unter der Schwelle. --fokus
     #0F6E96 auf demselben Grund erreicht 5,08:1 — gleiche Farbfamilie,
     kein neuer Wert. */
  background: var(--akzent-hell); color: var(--fokus);
  font-weight: var(--gew-mittel); box-shadow: inset 0 -2px 0 var(--marke-dunkel);
}
.navi .zahl { margin-left: 6px; font-size: var(--t-xs); padding: 1px 6px; border-radius: var(--radius-pille); background: var(--rand); color: var(--gedaempft); }
.navi a.an .zahl { background: var(--fokus); color: var(--flaeche); }

.konto { display: flex; align-items: center; gap: 10px; font-size: var(--t-m); color: var(--gedaempft); }
.textknopf { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent-text); text-decoration: underline; cursor: pointer; }

/* ---------- Grundgeruest ---------- */

.inhalt { max-width: var(--breite); margin: 0 auto; padding: 22px var(--a5) 70px; }
.seitenkopf { display: flex; align-items: flex-start; gap: var(--a4); flex-wrap: wrap; margin-bottom: 18px; }
.seitenkopf h1 { margin: 0; font-size: var(--t-h1); letter-spacing: -.2px; }
.seitenkopf p { margin: var(--a1) 0 0; color: var(--gedaempft); font-size: var(--t-l); }
.schieber { margin-left: auto; display: flex; gap: var(--a2); flex-wrap: wrap; }

/* ---------- Bausteine ---------- */

.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px; margin-bottom: 14px; }

.knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--a2) 14px; border-radius: var(--radius);
  border: 1px solid var(--rand-stark);      /* 3:1 statt 1,28:1 */
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: var(--t-l); cursor: pointer; text-decoration: none;
}
.knopf:hover { border-color: var(--text); background: var(--grund); }
.knopf.haupt { background: var(--akzent-text); border-color: var(--akzent-text); color: var(--flaeche); }
.knopf.haupt:hover { background: var(--fokus); border-color: var(--fokus); filter: none; }
.knopf.gefahr { color: var(--risiko); border-color: var(--risiko); }
.knopf.gefahr:hover { background: var(--risiko-hell); }
.knopf.klein { padding: var(--a1) 9px; font-size: var(--t-m); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.marker { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pille); font-size: var(--t-s); font-weight: var(--gew-mittel); white-space: nowrap; }
.marker.risiko  { background: var(--risiko-hell);  color: var(--risiko); }
.marker.chance  { background: var(--chance-hell);  color: var(--chance); }
.marker.messung { background: var(--messung-hell); color: var(--messung); }
.marker.neutral { background: var(--grund); color: var(--gedaempft); border: 1px solid var(--rand); }
.marker.marke   { background: var(--akzent-hell); color: var(--akzent-text); }   /* NEU */

.hinweis { border-radius: var(--radius); padding: var(--a3) var(--a4); margin-bottom: var(--a4); font-size: var(--t-l); border: 1px solid; }
.hinweis.warnung { background: var(--messung-hell); border-color: var(--messung-rand); color: var(--messung); }
.hinweis.gut     { background: var(--chance-hell);  border-color: var(--chance-rand); color: var(--chance); }
.hinweis.fehler  { background: var(--risiko-hell);  border-color: var(--risiko-rand); color: var(--risiko); }

.leer { text-align: center; padding: 46px var(--a5); color: var(--gedaempft); }
.leer strong { display: block; color: var(--text); margin-bottom: 6px; font-size: var(--t-gross); }

/* ---------- Fokus-Feed ---------- */

.prio { flex: none; width: 34px; height: 34px; border-radius: var(--radius); background: var(--grund); border: 1px solid var(--rand-stark); display: grid; place-items: center; font-weight: var(--gew-fett); font-size: var(--t-l); color: var(--text); }
.insight-kopf { display: flex; gap: 14px; align-items: flex-start; }
.insight-kopf h2 { margin: 0 0 7px; font-size: var(--t-gross); line-height: 1.35; }
/* Nur der TEXTBLOCK waechst, nicht die Prio-Kachel daneben. Vorher traf
   diese Regel jedes Kind — auch .prio, das ebenfalls ein div ist — und
   gewann mit hoeherer Spezifitaet gegen `.prio { width: 34px }`. Die
   34px-Kachel war dadurch ueber 500px breit. */
.insight-kopf > div:not(.prio) { flex: 1; min-width: 0; }
.marker-zeile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.insight-text { margin: 14px 0 0; }
.insight-text p { margin: 0 0 10px; }
.feldname { font-size: var(--t-xs); font-weight: var(--gew-halbfett); letter-spacing: .6px; text-transform: uppercase; color: var(--gedaempft); margin-bottom: 3px; }
.feldname + * { margin-top: 0; }
.insight-text .feldname { margin-top: var(--a4); }  /* NEU: ersetzt style="margin-top:14px|16px" */

details.mehr { margin-top: var(--a3); border-top: 1px solid var(--rand); padding-top: var(--a3); }
details.mehr > summary { cursor: pointer; color: var(--akzent-text); font-size: var(--t-l); list-style: none; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: "▸ "; }
details.mehr[open] > summary::before { content: "▾ "; }
details.mehr > summary:hover { text-decoration: underline; }
.beleg { margin: var(--a3) 0 0; padding-left: 18px; }
.beleg li { margin-bottom: 5px; color: var(--gedaempft); font-size: var(--t-l); }

.aktionen { display: flex; gap: var(--a2); flex-wrap: wrap; margin-top: var(--a4); padding-top: 14px; border-top: 1px solid var(--rand); }
.aktionen form { display: inline; margin: 0; }      /* NEU: ersetzt style="display:inline;margin:0" */
.vorschlag { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px var(--a3); border: 1px solid var(--rand); border-radius: var(--radius); margin-bottom: 7px; background: var(--grund); font-size: var(--t-l); }
.vorschlag form { margin: 0; }

/* ---------- Aufgaben ---------- */

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; align-items: start; }
.spalte h2 { font-size: var(--t-m); text-transform: uppercase; letter-spacing: .6px; color: var(--gedaempft); margin: 0 0 10px; }
.aufgabe { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--a3) 14px; margin-bottom: 10px; box-shadow: var(--schatten); }
.aufgabe h3 { margin: 0 0 6px; font-size: var(--t-basis); font-weight: var(--gew-mittel); line-height: 1.4; }
.aufgabe h3 a { color: inherit; text-decoration: none; }   /* NEU: ersetzt style="text-decoration:none;color:inherit" */
.aufgabe h3 a:hover { text-decoration: underline; }
.aufgabe .zeile { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; font-size: var(--t-s); color: var(--gedaempft); }
.aufgabe .meta { margin-top: 6px; }                        /* NEU */
.aufgabe .werkzeuge { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.aufgabe .werkzeuge form { margin: 0; }
.filterleiste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.filterleiste a { text-decoration: none; }

/* ---------- Formulare ---------- */

.formular { max-width: var(--breite-text); }
.feldgruppe { margin: var(--a4) 0 0; }              /* NEU: ein Container pro Feld */
.formular > .feldgruppe:first-child { margin-top: 0; }
.formular label { display: block; font-size: var(--t-m); font-weight: var(--gew-mittel); margin: 0 0 5px; }
.feld {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--rand-stark);   /* 3:1 — das Feld ist jetzt erkennbar */
  border-radius: var(--radius);
  font: inherit; background: var(--flaeche); color: var(--text);
}
.feld:hover { border-color: var(--text); }
.feld:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.feld.klein { width: auto; padding: var(--a1) var(--a2); font-size: var(--t-m); }  /* NEU: ersetzt das Inline-style in der Aufgabenliste */
.feld[aria-invalid="true"] { border-color: var(--risiko); }
textarea.feld { min-height: 120px; resize: vertical; }

.formular .fehler { color: var(--risiko); font-size: var(--t-m); margin-top: 5px; font-weight: var(--gew-mittel); }
.formular .hilfe { color: var(--gedaempft); font-size: var(--t-m); margin-top: var(--a1); }
.formular-fuss { display: flex; gap: 10px; margin-top: var(--a6); align-items: center; flex-wrap: wrap; }
.formular-fuss .rechts { margin-left: auto; }       /* NEU: Loeschen nach rechts */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--a4); }
.paar > .feldgruppe { margin-top: 0; }   /* sonst sitzt die zweite Spalte tiefer */
ul.radios { list-style: none; padding: 0; margin: 6px 0 0; }
ul.radios li { margin-bottom: 6px; }
ul.radios label { display: inline; font-weight: var(--gew-normal); margin: 0 0 0 6px; }

/* ---------- Listen ---------- */

.eintrag { border-bottom: 1px solid var(--rand); padding: var(--a3) 0; }
.eintrag:last-child { border-bottom: 0; }
.eintrag h3 { margin: 0 0 var(--a1); font-size: var(--t-basis); font-weight: var(--gew-mittel); }
.eintrag p { margin: 0; color: var(--gedaempft); font-size: var(--t-l); white-space: pre-wrap; }
.meta { font-size: var(--t-s); color: var(--gedaempft); }

/* ---------- Karteninhalt ----------
   Ersetzt die letzten 27 style=-Attribute aus den Vorlagen (20.08.2026).
   Bewusst benannte Klassen statt Hilfsklassen wie .mt-3: der Name sagt,
   WOFUER die Regel da ist, und genau das fehlte den Inline-Stilen — sie
   waren jeweils die eine Stelle, an der das CI beim naechsten Mal driftet,
   weil sie am Stylesheet vorbeigeht. */

.karte-titel { margin: 0 0 var(--a2); font-size: var(--t-gross); line-height: 1.35; }
.karte-zeile { margin: 0 0 var(--a1); }
.karte-zeile:last-child { margin-bottom: 0; }
.karte-vorzeile { margin: 0 0 var(--a1); }      /* Beschriftung ueber einem Wert */
.karte-nachzeile { margin-top: var(--a3); }     /* Herkunft/Fussnote unter der Karte */
.abschnitt-titel {
  font-size: var(--t-basis); margin: 30px 0 10px;
  color: var(--gedaempft); font-weight: var(--gew-halbfett);
}

.marker-zeile.oben { margin-bottom: var(--a2); }
.marker-zeile.eng  { margin: var(--a1) 0; }

/* Kopfzeile: Abmelden und Sprachwahl sitzen als Formulare in der Textzeile. */
.konto form { display: inline; margin: 0; }

/* Suchzeile im Memory */
.suchzeile { display: flex; gap: 10px; align-items: center; }
.suchzeile .feld { flex: 1; }

/* Aufklapper ("Etwas festhalten") */
.aufklapper > summary { cursor: pointer; font-weight: var(--gew-mittel); }
.aufklapper .formular { margin-top: var(--a3); }

/* Aufgabenliste */
.aufgabe .iq-stand { margin-top: var(--a1); }
.warnfarbe { color: var(--messung); }
.spalte-leer { padding: var(--a2) 2px; }

/* Anmeldeseite */
.sprachwahl { margin-top: 18px; }
.anmeldung .fusszeile { margin-top: var(--a5); line-height: 1.5; }

/* ---------- Motive (Creative-Dateien) ----------
   Bilder sind hier der Inhalt, nicht die Dekoration: die Karte ordnet sich
   dem Bild unter, nicht umgekehrt. Feste Hoehe mit `object-fit: contain`,
   damit 1:1 und 4:5 nebeneinander ruhig stehen und nichts beschnitten wird
   — beim Beurteilen eines Motivs ist genau der Rand oft das Problem. */

.motive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--a4);
  align-items: start;
}
.motiv { padding: var(--a3); margin-bottom: 0; display: flex; flex-direction: column; gap: var(--a2); }
.motiv-bild {
  width: 100%; height: 240px; object-fit: contain;
  background: var(--grund); border-radius: var(--radius-sm);
  display: block;
}
.motiv-bild.leer {
  display: grid; place-items: center;
  color: var(--gedaempft); font-size: var(--t-m);
  border: 1px dashed var(--rand-stark);
}
.motiv-kopf .marker-zeile { margin-bottom: var(--a1); }
.motiv-formular { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.motiv-formular .feld { flex: 1 1 120px; }
.motiv-formular .feld.klein { flex: 0 0 auto; }

/* ---------- Themenkopf ----------
   Beantwortet beim Draufschauen: wie weit sind wir, was haengt, wer ist dran.
   Der Balken ist bewusst flach und ohne Beschriftung im Inneren — die Zahl
   steht darunter im Klartext, und ein Balken, den man lesen muss, ist keiner. */

.thema-kopf { display: flex; flex-direction: column; gap: var(--a2); }
.fortschritt {
  height: 8px; border-radius: var(--radius-pille);
  background: var(--rand); overflow: hidden;
}
.fortschritt-balken {
  height: 100%; background: var(--marke-dunkel);
  border-radius: var(--radius-pille);
}
.thema-zahlen {
  display: flex; flex-wrap: wrap; gap: var(--a3);
  align-items: center; font-size: var(--t-l); color: var(--gedaempft);
}
.thema-zahlen strong { color: var(--text); font-size: var(--t-gross); }

/* Anlegen direkt am Thema — eine Zeile, Enter genuegt. */
.schnell-anlegen { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.schnell-anlegen .feld { flex: 1 1 260px; }
.schnell-anlegen .feld.klein { flex: 0 0 auto; }

/* Ueberfaellige Karte: eine Kante statt einer Flaeche. Eine rot hinterlegte
   Karte schreit; eine Kante zeigt es, ohne den Text schlechter lesbar zu
   machen. */
.aufgabe.ist-ueberfaellig { border-left: 3px solid var(--risiko); }

.aufgabe .werkzeuge form { display: flex; gap: 6px; margin: 0; }

/* ---------- Notizzeilen einer Besprechung ----------
   Eine Zeile je Gedanke, mit Haken, Titelfeld und zwei Auswahlen. Bewusst
   flach und ohne Karte drumherum: man arbeitet die Liste von oben nach unten
   durch, und jede zusaetzliche Umrandung macht das langsamer. */

.zeile-auswahl {
  display: flex; gap: var(--a2); align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--rand);
}
.zeile-auswahl:last-of-type { border-bottom: 0; }
.zeile-auswahl input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--akzent-text); }
.zeile-auswahl .feld { flex: 1 1 240px; }
.zeile-auswahl .feld.klein { flex: 0 0 auto; }

@media (max-width: 720px) {
  .zeile-auswahl { flex-wrap: wrap; }
  .zeile-auswahl .feld { flex: 1 1 100%; }
}

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
  .kopf-innen { padding: 10px 14px; gap: 10px; }
  .navi { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .inhalt { padding: var(--a4) 14px 60px; }
  .paar { grid-template-columns: 1fr; }
  .seitenkopf h1 { font-size: var(--t-h2); }
  .formular-fuss .knopf { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .schieber, .aktionen, .formular-fuss, .filterleiste { display: none; }
  .karte, .aufgabe { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- Aufgabe als Arbeitsplatz ---------- */
/* Zwei Spalten: links die Arbeit, rechts die Fakten. Unter 900px wird daraus
   eine Spalte — die Fakten wandern dann unter den Verlauf, weil sie beim
   Lesen der Antworten nicht im Weg stehen sollen. */
.arbeitsplatz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--a5); align-items: start; }
.arbeitsplatz-fakten { display: flex; flex-direction: column; gap: var(--a3); }
@media (max-width: 900px) { .arbeitsplatz { grid-template-columns: 1fr; } }

.fakten { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--a3); margin: 0; align-items: baseline; }
.fakten dt { font-size: var(--t-xs); font-weight: var(--gew-halbfett); letter-spacing: .6px; text-transform: uppercase; color: var(--gedaempft); }
.fakten dd { margin: 0; font-size: var(--t-l); }

ul.schlicht { list-style: none; padding: 0; margin: var(--a2) 0 0; }
ul.schlicht li { margin-bottom: 6px; font-size: var(--t-l); }

/* Das Bearbeitungsformular ist der Ausnahmefall und sieht auch so aus. */
.formularklappe > summary { cursor: pointer; font-size: var(--t-l); color: var(--akzent-text); }
.formularklappe[open] > summary { margin-bottom: var(--a4); }
.formularklappe .formular { max-width: var(--breite-text); }

/* ---------- Assistent ---------- */
/* Die Antwort ist der Inhalt, nicht die Verpackung: keine Sprechblasen, keine
   Avatare. Menschbeitrag und Antwort unterscheiden sich ueber eine Kante
   links — genug zum Unterscheiden, wenig genug, um nicht abzulenken. */
.assistent-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.assistent-kopf h2 { margin: 0; font-size: var(--t-gross); }
.assistent-womit { margin: var(--a1) 0 var(--a3); }
.assistent-einstiege { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.assistent-frage { display: flex; gap: 6px; align-items: center; }
.assistent-frage .feld { flex: 1 1 auto; min-width: 0; }

.gespraech { border-left: 3px solid var(--marke); }
.gespraech-kopf { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; margin-bottom: var(--a3); }
.gespraech-anlass { font-size: var(--t-m); font-weight: var(--gew-mittel); color: var(--akzent-text); }
.gespraech-weg { margin: 0 0 0 auto; }

.beitrag + .beitrag { margin-top: var(--a4); padding-top: var(--a4); border-top: 1px solid var(--rand); }
.beitrag-mensch { color: var(--gedaempft); }
.beitrag-text p { margin: 0 0 .6em; }
.beitrag-text p:last-child { margin-bottom: 0; }
.beitrag-werkzeuge { display: flex; gap: 6px; margin-top: var(--a3); flex-wrap: wrap; }
.beitrag-werkzeuge form { margin: 0; }

/* Woher die Antwort kommt. Ohne diese Zeile ist nicht nachvollziehbar, warum
   der Assistent etwas behauptet. */
.quellenzeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--rand); }
.quelle { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pille); font-size: var(--t-s); background: var(--grund); border: 1px solid var(--rand); color: var(--gedaempft); text-decoration: none; }
a.quelle { color: var(--akzent-text); }
a.quelle:hover { border-color: var(--akzent-text); }

.kontext-aufklapper { margin-top: var(--a3); }
.kontext-aufklapper > summary { cursor: pointer; }
/* Umbrechen statt seitlich scrollen — sonst schiebt ein langer
   Protokollausschnitt die ganze Seite in die Breite. */
.assistent-kontext {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--t-m); color: var(--gedaempft);
  background: var(--grund); border-radius: var(--radius);
  padding: 10px; margin: var(--a2) 0 0;
  max-height: 320px; overflow-y: auto;
}

/* ---------- Wartezustand ---------- */
/* Der Aufruf dauert 25 bis 40 Sekunden. Vorher fror die Seite in dieser Zeit
   ein, ohne ein Zeichen. Die Platzhalterzeilen zeigen, dass Text kommt, ohne
   einen Fortschritt vorzutaeuschen, den wir nicht kennen. */
.gespraech.wartet { border-left-color: var(--marke-dunkel); }
.wartetext { font-size: var(--t-m); color: var(--akzent-text); font-weight: var(--gew-mittel); }
.wartedauer { margin-left: auto; }

.punkte { display: inline-flex; gap: 3px; align-items: center; }
.punkte i { width: 5px; height: 5px; border-radius: var(--radius-pille); background: var(--marke-dunkel); display: block; animation: pulsieren 1.2s ease-in-out infinite; }
.punkte i:nth-child(2) { animation-delay: .2s; }
.punkte i:nth-child(3) { animation-delay: .4s; }
@keyframes pulsieren { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.skelettzeilen { display: flex; flex-direction: column; gap: 9px; }
.skelett {
  height: 12px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #EEF1F4 25%, var(--grund) 50%, #EEF1F4 75%);
  background-size: 200% 100%;
  animation: wandern 1.4s linear infinite;
}
@keyframes wandern { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

.gespraech-fehler { border-left-color: var(--risiko); }
.gespraech-fehler .fehlertitel { margin: 0; font-weight: var(--gew-mittel); }

/* Auszeichnungen in einer Antwort. Zwischentitel bewusst als h4: die Seite
   fuehrt h1/h2, eine Antwort darf da nicht mithalten. */
.beitrag-text h4 { margin: var(--a4) 0 var(--a1); font-size: var(--t-basis); font-weight: var(--gew-halbfett); }
.beitrag-text h4:first-child { margin-top: 0; }
.beitrag-text ul, .beitrag-text ol { margin: 0 0 .6em; padding-left: 20px; }
.beitrag-text li { margin-bottom: 3px; }
.beitrag-text code { font-size: var(--t-m); background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius-sm); padding: 1px 4px; }
.beitrag-text blockquote { margin: 0 0 .6em; padding: var(--a2) var(--a3); border-left: 2px solid var(--rand); background: var(--grund); border-radius: 0 var(--radius) var(--radius) 0; }
.beitrag-text blockquote p:last-child { margin-bottom: 0; }
.beitrag-text hr { border: 0; border-top: 1px solid var(--rand); margin: var(--a4) 0; }

/* ---------- Filterzeile (Aufgabenliste) ---------- */
/* Ersetzt drei Chipreihen mit ueber 30 Schaltflaechen, die zusammen mehr
   Flaeche einnahmen als die Aufgaben darunter. */
.filterzeile {
  display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: var(--a3) 14px; margin-bottom: var(--a4);
}
.suchfeld { position: relative; flex: 1 1 260px; min-width: 200px; }
.suchfeld .feld { padding-left: 32px; }
.suchzeichen { position: absolute; left: 11px; top: 11px; color: var(--gedaempft); pointer-events: none; }
.filterzeile select.feld.klein { width: auto; padding: 9px 11px; font-size: var(--t-l); }
.filterzeile .textknopf { margin-left: var(--a1); }

.listenfuss { margin-top: var(--a5); }

/* Ein Hinweis, den man nur wegsehen kann, wird weggesehen — also bekommt er
   den Knopf gleich mit. */
.hinweis.mit-tat { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; }
.hinweis.mit-tat > span { flex: 1; min-width: 220px; }
.hinweis.mit-tat .knopf { background: var(--flaeche); }

/* ---------- Tageszahlen (Fokus) ---------- */
/* Der eigene Tag ueber der Analyse: die Befunde sind wichtig, aber nicht
   dringend — die eigene ueberfaellige Aufgabe ist es. */
.tageszahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: var(--a6); }
.zahlkarte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: var(--a4); text-decoration: none; color: var(--text);
  display: block;
}
.zahlkarte:hover { border-color: var(--rand-stark); }
.zahl-gross { display: block; font-size: 27px; font-weight: var(--gew-halbfett); line-height: 1.1; }
.zahl-text { display: block; font-size: var(--t-l); color: var(--gedaempft); margin-top: 2px; }
.zahlkarte.ist-warnung .zahl-gross { color: var(--risiko); }

/* Ueberschrift aus den Besprechungsnotizen — gliedert die Ankreuzliste. */
.notiz-abschnitt { margin: var(--a5) 0 var(--a2); font-size: var(--t-m); text-transform: uppercase; letter-spacing: .6px; color: var(--gedaempft); font-weight: var(--gew-halbfett); }
.notiz-abschnitt:first-of-type { margin-top: var(--a3); }

/* ---------- Aufgaben als Zeilen, gruppiert ---------- */
/* Statt drei Statusspalten: Gruppen ueber die volle Breite. Die Titel sind
   lang (Median 64 Zeichen, bis 173) — in schmalen Karten stapelten sie sich
   ueber vier Zeilen, waehrend zwei Drittel der Breite leer standen. */
.gruppenwahl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--a4); }
.gruppenwahl .feldname { margin: 0 var(--a1) 0 0; }

.gruppe { padding: 0; margin-bottom: 14px; }
.gruppenkopf {
  display: flex; align-items: baseline; gap: var(--a2);
  padding: var(--a3) var(--a4); background: var(--grund);
  border-bottom: 1px solid var(--rand); border-radius: var(--radius) var(--radius) 0 0;
}
.gruppenkopf h2 { margin: 0; font-size: var(--t-basis); font-weight: var(--gew-halbfett); }
.gruppenkopf h2 a { color: inherit; text-decoration: none; }
.gruppenkopf h2 a:hover { text-decoration: underline; }
.gruppen-hinweis { margin-left: auto; }
.gruppe.laeuft { border-left: 3px solid var(--marke); }
/* Was keiner Gruppe angehoert, sieht auch so aus — und faellt damit auf. */
.gruppe.ist-verwaist { border-style: dashed; }
.gruppe.ist-verwaist .gruppenkopf { background: var(--messung-hell); color: var(--messung); }

.aufgabenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 130px 60px auto;
  gap: var(--a3); align-items: center;
  padding: 10px var(--a4); border-bottom: 1px solid var(--rand);
}
.aufgabenzeile:last-child { border-bottom: 0; }
.aufgabenzeile:hover { background: var(--grund); }
.aufgabenzeile.ist-ueberfaellig { box-shadow: inset 3px 0 0 var(--risiko); }
.az-titel { color: var(--text); text-decoration: none; font-weight: var(--gew-mittel); min-width: 0; }
.az-titel:hover { text-decoration: underline; }
.az-merkmale { display: flex; gap: var(--a1); flex-wrap: wrap; }
.az-wer, .az-frist { font-size: var(--t-m); color: var(--gedaempft); }
.az-frist { text-align: right; font-variant-numeric: tabular-nums; }
.az-tat { display: flex; gap: 6px; margin: 0; }
.leise { color: var(--leise); }

/* Unter 1000px traegt das Raster nicht mehr — dann untereinander. */
@media (max-width: 1000px) {
  .aufgabenzeile { grid-template-columns: 1fr; gap: 6px; }
  .az-frist { text-align: left; }
}

/* ---------- Themen als Vergleichsliste ---------- */
.themenliste { padding: 0; overflow: hidden; }
.themenkopf, .themenzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 210px 170px;
  gap: var(--a4); align-items: center;
}
.themenkopf {
  padding: 10px var(--a4); background: var(--grund);
  font-size: var(--t-xs); font-weight: var(--gew-halbfett);
  letter-spacing: .6px; text-transform: uppercase; color: var(--gedaempft);
  border-bottom: 1px solid var(--rand);
}
.themenzeile { padding: var(--a3) var(--a4); border-bottom: 1px solid var(--rand); }
.themenzeile:last-child { border-bottom: 0; }
.themenzeile:hover { background: var(--grund); }
.themenzeile.schlicht { grid-template-columns: minmax(0, 1fr) auto; }
.tz-name a { font-weight: var(--gew-mittel); text-decoration: none; color: var(--text); }
.tz-name a:hover { text-decoration: underline; }
.tz-haengt { display: flex; gap: var(--a1); flex-wrap: wrap; }
.themenliste.ist-ruhend { opacity: .8; }

.hinweis-lose {
  display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap;
  border-style: dashed; padding: var(--a3) var(--a4);
}
.hinweis-lose > div { flex: 1; min-width: 240px; }

@media (max-width: 900px) {
  .themenkopf { display: none; }
  .themenzeile { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Navigation: „Mehr" ---------- */
/* <details> statt eines Menues — kommt ohne JavaScript aus. */
.navi-mehr { position: relative; }
.navi-mehr > summary {
  padding: 7px var(--a3); border-radius: var(--radius); color: var(--gedaempft);
  font-size: var(--t-l); cursor: pointer; list-style: none; white-space: nowrap;
}
.navi-mehr > summary::-webkit-details-marker { display: none; }
.navi-mehr > summary::after { content: " ▾"; }
.navi-mehr > summary:hover { background: var(--grund); color: var(--text); }
.navi-mehr > summary.an {
  background: var(--akzent-hell); color: var(--fokus);
  font-weight: var(--gew-mittel); box-shadow: inset 0 -2px 0 var(--marke-dunkel);
}
.navi-klappe {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 180px; display: flex; flex-direction: column; gap: 1px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-hoch); padding: 6px;
}
.navi-klappe a { padding: 6px 10px; border-radius: var(--radius-sm); }
.navi-klappe hr { border: 0; border-top: 1px solid var(--rand); margin: 4px 0; }

/* ---------- Schritte (Checkliste) ---------- */
/* Karg gehalten: Text, Haken, Weg. Jedes weitere Feld waere der erste
   Schritt zurueck zu einer zweiten Aufgabenliste. */
.schritt-kopf { display: flex; align-items: baseline; gap: var(--a2); margin-bottom: var(--a2); }
.schritt { display: flex; align-items: baseline; gap: var(--a2); padding: 5px 0; }
.schritt + .schritt { border-top: 1px solid var(--rand); }
.schritt form { margin: 0; display: flex; }
.schritt-text { flex: 1; min-width: 0; }
.schritt.ist-erledigt .schritt-text { color: var(--gedaempft); text-decoration: line-through; }
.hakenknopf {
  background: none; border: 0; padding: 0 2px 0 0; cursor: pointer;
  color: var(--rand-stark); display: flex; align-items: center;
}
.hakenknopf:hover { color: var(--text); }
.schritt.ist-erledigt .hakenknopf { color: var(--chance); }
/* Der Loeschknopf erst beim Darueberfahren — er soll nicht mitlesen. */
.schritt-weg { opacity: 0; }
.schritt:hover .schritt-weg, .schritt-weg:focus-visible { opacity: 1; }

.schritt-neu { display: flex; gap: 6px; margin-top: var(--a3); }
.schritt-neu .feld { flex: 1; min-width: 0; }
.schritt-teilen { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; margin-top: var(--a3); }

/* Skizze aus einer Antwort. Breite gehoert der Seite, nicht dem Modell —
   deshalb entfernt der Filter width/height am <svg>. */
.skizze { margin: 0 0 var(--a3); padding: var(--a3); background: var(--grund);
  border: 1px solid var(--rand); border-radius: var(--radius); }
.skizze svg { display: block; width: 100%; height: auto; }