/*
  Das einzige Stylesheet der Anwendung.

  Es wird von unserem eigenen Server ausgeliefert. Es gibt keine Schriftarten und
  keine Bibliotheken von fremden Servern -- das schützt die IP-Adressen der Nutzer
  und erspart eine Diskussion in der Datenschutzerklärung.

  Die Farben sind dieselben wie in den Diagrammen (`app/diagramme.py`). Sie wurden
  auf Kontrast und Unterscheidbarkeit bei Farbenblindheit geprüft.
*/

:root {
  --flaeche:        #fcfcfb;   /* Hintergrund von Karten */
  --ebene:          #f4f4f1;   /* Hintergrund der Seite */
  --tinte:          #0b0b0b;   /* Überschriften */
  --tinte-zweit:    #52514e;   /* Fließtext */
  --tinte-leise:    #6f6d68;   /* Nebensächliches */
  --linie:          #e1e0d9;   /* 1,32:1 -- NUR dekorative Trennlinien */
  --feldrahmen:     #8d8a80;   /* 3,45:1 -- Umrisse von Bedienelementen */

  /* DREI BLAUTÖNE, WEIL BLAU DREI AUFGABEN HAT -- und die Aufgaben verschiedene
     Grenzwerte haben. Wer hier einen Wert ändert, muss wissen, welche:

       --blau         Linien, Umrisse, Fokus            -> 3:1 genügt (WCAG 1.4.11)
       --blau-dunkel  Text; Flächen mit weisser Schrift -> 4,5:1 nötig (WCAG 1.4.3)
       --blau-tief    dasselbe beim Überfahren          -> dunkler als --blau-dunkel

     Vorher gab es nur zwei, und --blau tat alle drei Jobs. Für Linien reichte er,
     für Text und Knopfflächen nicht -- der wichtigste Knopf jeder Seite lag bei
     4,42:1 und der Link beim Überfahren bei 4,30:1. Beides verfehlte die Stufe AA,
     und der Kommentar an dieser Stelle behauptete das Gegenteil.

     WARUM NICHT EINFACH --blau DUNKLER? Weil er an acht Stellen als Linie oder
     Umriss dient, wo er in Ordnung ist. Ihn zu ändern hätte die Trennlinien und
     Auswahlrahmen mit verdunkelt -- eine Gestaltungsänderung, um einen
     Kontrastfehler zu beheben, den sie gar nicht hatten. */
  --blau:           #2a78d6;   /* 4,30:1 -- reicht für Linien, NICHT für Text */
  --blau-dunkel:    #1c5cab;   /* 6,46:1 als Text, 6,63:1 unter weisser Schrift */
  --blau-tief:      #134788;   /* 8,95:1 als Text, 9,19:1 unter weisser Schrift */

  --aqua:           #0f7a55;   /* 5,20:1 */
  --warn-flaeche:   #fff8e6;
  --warn-linie:     #e8b53d;
  --fehler-flaeche: #fdeceb;
  --fehler-linie:   #d03b3b;
  --gut-flaeche:    #eaf5ec;
  --gut-linie:      #0ca30c;
  --radius:         10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ebene);
  color: var(--tinte-zweit);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 { color: var(--tinte); line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 0 0 .6rem; }
h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .2rem; }

/* Beim Überfahren wird der Verweis DUNKLER, nicht heller. Vorher stand hier
   --blau: Der Link fiel dadurch von 6,46:1 auf 4,30:1 und rutschte genau in dem
   Moment unter die Grenze, in dem er hervorgehoben werden sollte. */
a { color: var(--blau-dunkel); }
a:hover { color: var(--blau-tief); }

/* Sprungmarke für Tastaturnutzer: unsichtbar, bis sie den Fokus bekommt. */
.sprungmarke {
  position: absolute; left: -9999px;
  background: var(--tinte); color: #fff; padding: .6rem 1rem; z-index: 10;
}
.sprungmarke:focus { left: 1rem; top: 1rem; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.breite { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.schmal { max-width: 640px; margin: 2rem auto; }
.held { max-width: 760px; margin: 2.5rem 0 2rem; }
.held-schmal { max-width: 720px; }

.fuehrungstext { font-size: 1.1rem; color: var(--tinte-zweit); }
.leise { color: var(--tinte-leise); font-size: .92rem; }
.hinweis-klein { font-size: .87rem; color: var(--tinte-leise); }
.pflicht { font-weight: 400; color: var(--tinte-leise); font-size: .85em; }

/* ---------- Kopf- und Fußzeile ---------- */

.kopfzeile { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopfzeile-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px; flex-wrap: wrap;
}
.marke { font-weight: 700; color: var(--tinte); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.marke span { font-weight: 400; color: var(--tinte-leise); }
/* Das Partner-Logo (marke-logo.svg): auf Kopfzeilenhöhe begrenzt. */
.marke-logo { height: 38px; width: auto; max-width: 260px; display: block; }
.kopf-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kopf-benutzer { color: var(--tinte-leise); font-size: .88rem; }

.fusszeile {
  margin-top: 3rem; padding: 1.5rem 0;
  border-top: 1px solid var(--linie); background: var(--flaeche);
  font-size: .88rem;
}
.fusszeile p { margin: .2rem 0; }

/* Die Foerderleiste ist genau so lang wie der Hinweissatz darunter.
   ---------------------------------------------------------------------------
   WIE WIRD DAS ERREICHT?
   Der umschliessende Block bekommt `width: fit-content`: Er ist damit so breit
   wie sein breitester Inhalt. Breitester Inhalt soll der SATZ sein, nicht das
   Bild -- und genau dafuer steht am Bild `width: 0`. Bei der Breitenberechnung
   zaehlt das Bild dadurch mit null Breite mit, der Block richtet sich also allein
   nach dem Satz. Erst danach zieht `min-width: 100%` das Bild auf die volle
   Blockbreite. Ergebnis: Beide sind exakt gleich lang.

   Der Umweg ist noetig, weil ein `<img>` sonst mit seiner eigenen Groesse
   (1178 Pixel) in die Berechnung einginge und den Block auseinanderzoege.

   `aspect-ratio` haelt das Seitenverhaeltnis der Datei fest. Ohne die Angabe
   muesste der Browser die Hoehe aus der Breite ableiten, was bei `width: 0`
   je nach Browser unterschiedlich ausfaellt.

   WER DEN SATZ AENDERT, aendert damit auch die Laenge der Leiste -- das ist so
   gewollt und braucht keine weitere Anpassung. */
/* Der Anmeldename im Profil: nur zum Ablesen, nicht zum Aendern. Deutlich
   abgesetzt, damit niemand ihn fuer ein Eingabefeld haelt. */
.anmeldename {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .3rem;
}
.anmeldename-marke {
  display: block; font-size: .8rem; color: var(--tinte-leise);
  text-transform: uppercase; letter-spacing: .04em;
}

.fusszeile-block { width: fit-content; max-width: 100%; }
.fusszeile-satz { margin: 0; }
.foerderleiste {
  display: block;
  width: 0; min-width: 100%; max-width: 100%;
  aspect-ratio: 1178 / 119;
  height: auto;
  margin: 0 0 .6rem;
}

/* ---------- Die beiden Wege auf der Startseite ---------- */

.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; }
/* Seit der Trennung von öffentlicher und geführter Startseite steht auf jeder
   der beiden Seiten nur noch EIN Weg. Eine halbbreite Karte neben einer leeren
   Spalte sähe nach einem Fehler aus, darum hier eine einzelne volle Spalte. */
.wege-einzeln { grid-template-columns: 1fr; }
.weg {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.75rem;
  display: flex; flex-direction: column;
}
.weg-untertitel { color: var(--tinte-leise); font-size: .9rem; margin: -.3rem 0 1rem; }
/* Ein einzelner Knopf in einer Weg-Karte wird nach unten gedrueckt. Bewusst mit
   `>` (nur direkte Kinder): Knoepfe INNERHALB einer `.knopfleiste` sollen das
   nicht bekommen, sonst zoege jeder von ihnen einzeln nach unten und die Leiste
   fiele auseinander. Um deren Platzierung kuemmert sich `.knopfleiste` (siehe
   unten). */
.weg > .knopf { margin-top: auto; align-self: flex-start; }

.haken { list-style: none; padding: 0; margin: 1rem 0; }
.haken li { padding-left: 1.5rem; position: relative; margin-bottom: .35rem; }
.haken li::before {
  content: "✓"; position: absolute; left: 0; color: var(--aqua); font-weight: 700;
}

/* Hier standen `.haken-schloss` (Schloss statt Haken) und `.datenschutz-block`.
   Beide gehoerten allein zu den Datenschutz-Kaesten der beiden Einstiegsseiten;
   die sind entfernt (MASTERPROMPT.md 6.1.1), also sind auch die Regeln weg. Eine
   Regel ohne Element im HTML waere nur noch Ballast, den spaeter niemand mehr
   zuordnen kann. */

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-block; padding: .7rem 1.4rem; border-radius: 8px;
  text-decoration: none; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; font-size: 1rem; font-family: inherit;
}
/* Der wichtigste Knopf JEDER Seite -- „Weiter", „Speichern", „Anmelden". Weisse
   Schrift auf 1 rem ist keine Grossschrift, es gelten also 4,5:1. */
.knopf-haupt { background: var(--blau-dunkel); color: #fff; }
.knopf-haupt:hover { background: var(--blau-tief); color: #fff; }
.knopf-zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }
.knopf-zweit:hover { border-color: var(--tinte-leise); color: var(--tinte); }

/* Mehrere Knoepfe nebeneinander. `flex-wrap` laesst sie auf schmalen Bildschirmen
   untereinander rutschen, statt aus der Karte herauszuragen. `margin-top: auto`
   drueckt die Leiste an den unteren Rand der Karte -- dieselbe Wirkung, die
   `.weg .knopf` vorher fuer einen einzelnen Knopf hatte. */
.knopfleiste {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: auto; align-items: center;
}

.knopf-schlicht {
  background: none; border: none; color: var(--blau-dunkel);
  cursor: pointer; font: inherit; font-size: .88rem; padding: .2rem .35rem;
  text-decoration: underline;
}
.knopf-gefahr { color: var(--fehler-linie); }
.inline-form { display: inline; }

*:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

/* ---------- Karten und Meldungen ---------- */

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0;
}

.meldung { padding: .9rem 1.1rem; border-radius: 8px; border-left: 4px solid; margin: 1rem 0; }
.meldung-fehler { background: var(--fehler-flaeche); border-color: var(--fehler-linie); }
.meldung-warn   { background: var(--warn-flaeche);   border-color: var(--warn-linie); }
.meldung-gut    { background: var(--gut-flaeche);    border-color: var(--gut-linie); }

.warnkasten {
  background: var(--warn-flaeche); border: 1px solid var(--warn-linie);
  border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0;
}
.warnkasten h2 { margin-top: 0; }
.warnkasten-schmal { padding: 1.25rem; }
.download-leiste { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }

.fehler-code { font-size: 3.5rem; font-weight: 700; color: var(--tinte-leise); margin: 0; }

.abzeichen { padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.abzeichen-gut     { background: var(--gut-flaeche);    color: #04600b; }
.abzeichen-warn    { background: var(--fehler-flaeche); color: #8f1f1f; }
.abzeichen-neutral { background: var(--ebene);          color: var(--tinte-leise); }

.einladungslink {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .82rem; word-break: break-all; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 6px; padding: .7rem;
}

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

.formular { display: flex; flex-direction: column; gap: .3rem; }
.formular label, .feld label { font-weight: 600; color: var(--tinte); margin-top: .8rem; }
.formular button { margin-top: 1.2rem; align-self: flex-start; }

.formular-zeile { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.formular-zeile input { flex: 1; min-width: 240px; }

/* --feldrahmen statt --linie: Ein Eingabefeld ist ein Bedienelement, sein Umriss
   braucht 3:1 (WCAG 1.4.11). --linie liegt bei 1,32:1 -- wer schlecht sieht oder
   bei starkem Umgebungslicht arbeitet, erkannte nicht, wo das Feld anfängt.
   Die dekorativen Trennlinien behalten --linie; für die gilt die Regel nicht. */
input[type="text"], input[type="password"], select, textarea {
  padding: .6rem .7rem; border: 1px solid var(--feldrahmen); border-radius: 7px;
  font: inherit; font-size: 1rem; background: #fff; color: var(--tinte);
  width: 100%; max-width: 100%;
}
textarea { resize: vertical; }
.feld { margin-bottom: 1.25rem; }
.feld-hilfe { font-size: .82rem; color: var(--tinte-leise); margin: .25rem 0 0; }

/* Kontrollkästchen mit langem Begleittext (Datenschutz-Kenntnisnahme). */
.kontrollkaestchen {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  margin-top: 1rem; font-size: .9rem; color: var(--tinte-zweit); font-weight: 400;
}
.kontrollkaestchen input { margin-top: .25rem; }

.navigation {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 2rem 0 3rem;
}

/* ---------- Fortschritt ---------- */

/*
  Der Fortschrittsbalken ist ein <progress>-Element. Es braucht keine
  Formatierung im HTML -- die Content-Security-Policy verbietet die nämlich.
  Leider gestaltet jeder Browser <progress> anders, deshalb die drei Regeln:
  `appearance: none` schaltet das Standardaussehen ab, danach färben wir in
  Firefox den Balken selbst und in Chrome, Edge und Safari die beiden
  Pseudo-Elemente.
*/
.fortschritt { margin: 1.5rem 0 .5rem; }

.fortschritt-balken {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--linie);   /* die leere Spur, auch in Firefox */
  color: var(--aqua);         /* Rückfall für alte Browser */
}
/* Firefox: der gefüllte Teil */
.fortschritt-balken::-moz-progress-bar { background: var(--aqua); border-radius: 999px; }
/* Chrome, Edge, Safari: erst die Spur, dann der gefüllte Teil */
.fortschritt-balken::-webkit-progress-bar { background: var(--linie); border-radius: 999px; }
.fortschritt-balken::-webkit-progress-value { background: var(--aqua); border-radius: 999px; }

/* ---------- Kriterien ---------- */

.phase-block { margin: 2.5rem 0; }
.phase-titel {
  font-size: 1.45rem; padding-bottom: .4rem; border-bottom: 2px solid var(--blau);
}

.kriterium-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.4rem; margin: 1.1rem 0;
}
/* Weisse Schrift auf farbiger Fläche -- wie .knopf-haupt und .rang: --blau-dunkel. */
.nummer {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--blau-dunkel); color: #fff; font-size: .8rem; font-weight: 700;
  margin-right: .5rem; vertical-align: middle; padding: 0 .35rem;
}

/* Die Gesprächsfrage zum Kriterium (Spalte R der Arbeitsmappe).
   Ein senkrechter Strich statt eines Kastens: Die Karte hat schon einen Rahmen,
   ein zweiter darin wirkte verschachtelt. Der Strich hebt den Block ab, ohne ihn
   einzusperren -- und liest sich wie ein Zitat, was die Frage ja auch ist. */
.gespraechsfrage {
  border-left: 3px solid var(--blau);
  padding: .1rem 0 .1rem .9rem;
  margin: 0 0 1.3rem;
}
.gespraechsfrage-marke {
  margin: 0; font-size: .78rem; font-weight: 700; color: var(--tinte-leise);
  text-transform: uppercase; letter-spacing: .04em;
}
.gespraechsfrage-text {
  margin: .15rem 0 0; font-size: 1.02rem; color: var(--tinte);
}

.reifegrade { list-style: none; padding: 0; margin: .6rem 0 0; }
.reifegrade li { border-top: 1px solid var(--linie); padding: .7rem 0; }
.stufe { font-weight: 700; color: var(--tinte); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.reifegrad-kurz { margin: .2rem 0; }
.reifegrad-lang { white-space: pre-line; font-size: .92rem; color: var(--tinte-zweit); }

details { margin: .4rem 0; }
summary { cursor: pointer; color: var(--blau-dunkel); font-size: .9rem; }
.hilfe { margin: 1rem 0; }

/* ---------- Reifegradauswahl ---------- */

fieldset { border: none; padding: 0; margin: 1.2rem 0 0; }
legend { font-weight: 600; color: var(--tinte); padding: 0; margin-bottom: .5rem; }

.wahl {
  display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: start;
  padding: .6rem .7rem; border: 1px solid var(--linie); border-radius: 8px;
  margin-bottom: .4rem; cursor: pointer;
}
.wahl:hover { border-color: var(--blau); }
.wahl input { grid-row: span 2; margin-top: .35rem; }
/* Die Stufenzahl steht über der Beschreibung. Sie war früher ausgeblendet; sichtbar
   gemacht, damit beim IST-Wert dieselbe Nummerierung 1-5 zu sehen ist wie bei den
   Skalen für ZIEL und Priorität darunter. Nur so erkennt der Nutzer, welche
   Beschreibung zu welcher Zahl gehört, wenn er sein Ziel als blosse Zahl waehlt.
   Der Platz dafür war im Raster bereits vorgesehen: `.wahl input` überspannt die
   beiden Zeilen der ersten Spalte, Zahl und Text liegen in der zweiten. */
.wahl-stufe { font-weight: 700; color: var(--tinte); font-size: .9rem; }
.wahl-text { font-size: .93rem; }
.wahl:has(input:checked) { border-color: var(--blau); background: #f3f8fe; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.skala { display: flex; gap: .4rem; }
.skala-punkt {
  flex: 1; text-align: center; border: 1px solid var(--linie); border-radius: 7px;
  padding: .5rem .2rem; cursor: pointer;
}
.skala-punkt:hover { border-color: var(--blau); }
.skala-punkt:has(input:checked) { border-color: var(--blau); background: #f3f8fe; font-weight: 700; }
.skala-punkt input { display: block; margin: 0 auto .2rem; }
/* Ausgegraut, wenn der ZIEL-Wert kleiner als der IST-Wert wäre (ziel_regel.js). */
.skala-punkt.deaktiviert { opacity: .35; cursor: not-allowed; }
.skala-punkt.deaktiviert:hover { border-color: var(--linie); }

.abschlussfragen { padding-left: 0; list-style: none; }
.abschlussfragen li { padding: .8rem 0; border-top: 1px solid var(--linie); }
.auswahl-vorschau { margin: .3rem 0 0 2.2rem; }

/* Die Kontaktangaben unter „Beim Test begleitet von:". Bewusst zurückhaltend --
   sie sind eine Fußnote zur Auswertung, keine Kennzahl. */
.begleitung h2 { font-size: 1rem; color: var(--tinte-zweit); margin-bottom: .4rem; }
.begleitung-zeile { margin: .1rem 0; font-weight: 600; }

/* ---------- Auswertung ---------- */

.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.2rem;
}
.kennzahl-wert { display: block; font-size: 1.3rem; font-weight: 700; color: var(--tinte); }
.kennzahl-name { display: block; font-size: .82rem; color: var(--tinte-leise); }

.diagramm { max-width: 100%; height: auto; display: block; margin: 1rem auto; }

.tabellen-huelle { overflow-x: auto; margin: 1rem 0; }

/* Der Befund unter dem Netzdiagramm. Abgesetzt durch eine Linie oben, wie im
   PDF: Darueber steht die Lesehilfe zum Bild, darunter das, was in den Zahlen
   steht. Kein Kasten und keine Farbe -- es ist kein Hinweis und keine Warnung,
   sondern schlicht der Text zum Bild. */
/* Beschriftete Angaben im Impressum: Begriff und Erläuterung als Definitionsliste.
   Semantisch richtiger als zwei Absätze -- ein Vorleseprogramm nennt den Begriff
   und liest dann, was zu ihm gehört. */
.angaben { margin: .6rem 0 1.2rem; }
.angaben dt { font-weight: 700; color: var(--tinte); margin-top: .7rem; }
.angaben dd { margin: .1rem 0 0; }

/* Die beiden Blockmarken der Datenschutzhinweise („Gilt für alle Besucher",
   „Gilt nur mit Benutzerkonto"). Sie stehen eine Ebene ÜBER den gewöhnlichen
   Zwischenüberschriften, tragen aber dasselbe h2 -- die Gliederungstiefe darf
   nicht daran hängen, wie kräftig eine Zeile aussieht. Die Linie darüber macht
   den Sprung sichtbar. */
.abschnittsmarke {
  border-top: 3px solid var(--blau);
  margin: 2.5rem 0 .8rem;
  padding-top: .8rem;
  font-size: 1.15rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
}

.profil-befund { border-top: 1px solid var(--linie); margin: 1rem 0 0; padding-top: .8rem; }
.profil-befund h3 { margin: 0 0 .4rem; }
.profil-befund p { margin: 0 0 .5rem; }
.tabelle { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabelle th, .tabelle td {
  text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.tabelle th { color: var(--tinte-zweit); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tabelle tbody tr:nth-child(even) { background: #f8f8f6; }
.strategie { max-width: 320px; font-size: .84rem; }
.aktionen { white-space: nowrap; }

.massnahmen { list-style: none; padding: 0; counter-reset: none; }
.massnahme { border-top: 1px solid var(--linie); padding: 1.1rem 0; }
.massnahme-kopf { display: flex; gap: .9rem; align-items: flex-start; }
.rang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; border-radius: 8px;
  background: var(--blau-dunkel); color: #fff; font-weight: 700; flex-shrink: 0;
}
.massnahme-meta { margin: .1rem 0 0; font-size: .85rem; color: var(--tinte-leise); }
.massnahme-text { white-space: pre-line; font-size: .92rem; }

/* Text aus einem öffentlichen Formular -- die Nachricht einer Terminanfrage.
   `pre-line` erhält die Zeilenumbrüche des Absenders, ohne HTML durchzulassen;
   `|safe` wäre hier gefährlich. Als Klasse und nicht als style-Attribut: Die
   Inhaltssicherheitsrichtlinie verwirft Inline-Stile stillschweigend, der
   Umbruch ginge also unbemerkt verloren. */
.absendertext { white-space: pre-line; }
.massnahme-link { font-weight: 600; }

/* ---------- Verwaltung ---------- */

.verwaltung-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
/* Zweispaltiges Raster für das Anlegen-Formular (E-Mail/Rolle, Name/Firma). */
.feld-gitter {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-bottom: 1rem;
}
.feld-gitter label { display: block; font-weight: 600; color: var(--tinte); margin: .4rem 0 .2rem; }
.meldung-neutral { background: var(--ebene); border-color: var(--tinte-gedaempft, #b8b6b0); }
.zeitpunkt { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 780px) {
  .wege, .zwei-spalten, .feld-gitter { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 1.55rem; }
}

@media (max-width: 380px) {
  .kennzahlen { grid-template-columns: 1fr; }
  .skala { flex-wrap: wrap; }
}

/* ---------- Druck ---------- */

@media print {
  /* ----- Kraeftigere Farben fuer den Drucker -----

     WARUM UEBERHAUPT?
     Am Bildschirm ist `--tinte-leise` (#6f6d68) ein gut lesbares Grau: Das Bild
     leuchtet von hinten, und der Text steht als geschlossene Flaeche da. Ein
     Drucker legt dieselbe Farbe als Raster aus einzelnen Punkten aufs Papier.
     Bei kleiner Schrift -- Fusszeile, Erklaerungen unter den Ueberschriften,
     Hinweise -- zerfaellt sie sichtbar, und mit sparsamem Toner wird sie noch
     blasser. Dieselbe Farbe, zwei voellig verschiedene Ergebnisse.

     WARUM AN DEN VARIABLEN UND NICHT AN DEN REGELN?
     Weil hier sonst eine zweite Liste entstuende, die jemand pflegen muesste.
     Ueber die Variablen zieht alles mit, was ueber sie gestylt ist -- auch das,
     was spaeter dazukommt. Wer eine neue leise Zeile ergaenzt, bekommt den
     Druckfall geschenkt.

     WARUM NICHT ALLES AUF SCHWARZ?
     Die Abstufung zwischen Haupttext, Fliesstext und Nebentext traegt Bedeutung:
     Sie sagt dem Leser, was Aussage und was Erlaeuterung ist. Verschwindet sie,
     liest sich die gedruckte Seite als eine einzige Wand. Die Stufen bleiben
     deshalb erhalten, sie ruecken nur zusammen und nach unten. */
  :root {
    --tinte:       #000;      /* Ueberschriften: voll schwarz */
    --tinte-zweit: #1c1c1a;   /* Fliesstext */
    --tinte-leise: #3a3835;   /* Nebensaechliches -- vorher #6f6d68 */
    --linie:       #9a978d;   /* Trennlinien tragen sonst gar nicht */
    --blau-dunkel: #10386b;   /* Verweise bleiben unterscheidbar, ohne zu blassen */
    --blau:        #10386b;
    --blau-tief:   #10386b;   /* Auf Papier gibt es kein Überfahren -- ein Ton genügt */
    --feldrahmen:  #3a3835;   /* Ausgefüllte Formulare drucken Betreuer aus */
  }

  /* Manche Browser sparen beim Drucken Hintergrundfarben ein und schwaechen
     Farben ab. Das trifft die Warn- und Hinweiskaesten, deren Flaeche ihre
     Bedeutung traegt. Beide Schreibweisen, weil die aeltere noch verbreitet ist. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .kopfzeile, .navigation, .warnkasten, .sprungmarke { display: none; }

  /* Die Fusszeile selbst verschwindet, ihre Foerderleiste NICHT. Die
     selbstgefuehrte Ansicht ist ausdruecklich zum Ausdrucken gedacht (Vorbereitung
     und Workshop-Moderation), und die Auflage der Foerdergeber gilt fuer gedruckte
     Unterlagen ebenso wie fuer die Bildschirmansicht. */
  .fusszeile { border: none; background: none; margin-top: 1.5rem; padding: 0; }
  .fusszeile p { display: none; }
  .foerderleiste { max-width: 120mm; }
  body { background: #fff; font-size: 11pt; }

  /* Die kleinen Klassen sind am Bildschirm auf 0,87 bis 0,92 rem gesetzt. Aus
     11 pt werden dadurch gut 9 pt -- die Groesse, bei der die Rasterung des
     Druckers am staerksten stoert. Sie ruecken deshalb auf Fliesstextgroesse
     auf; ihre Rolle als Nebentext traegt jetzt die Farbe allein. */
  .leise, .hinweis-klein, .feld-hilfe, .weg-untertitel, .massnahme-meta {
    font-size: 1rem;
  }
  .karte, .kriterium-karte { border: none; padding: 0; }
  details { display: block; }
  details > summary { display: none; }
  .kriterium-karte { break-inside: avoid; }
}