/* Job Radar, Designsystem (docs/specs/2026-09-29-phase-3-design.md). Aufbau: 1. Tokens,
   2. Basis, 3. Bausteine, 4. Seiten (4a Rahmen und Jobs, 4b übrige). Die beiden Token-Blöcke
   hier oben sind die einzige Quelle für Farbe, Schrift, Abstand, Form und Bewegung.
   web/tokens.py liest sie für svg.py und die Tests. Außerhalb dieser Blöcke gehört kein
   Farbwert, keine Schriftgröße, kein Radius und keine Dauer als Zahl hin, nur var(--…). */

/* 1. Tokens */
:root {
  /* Farbe. Jede Farbe hat genau eine Bedeutung (Spec „Farbsprache“, Tabelle 2). */
  --grund: #EEF1F7;
  --flaeche: #FFFFFF;
  --tinte: #121A33;
  --tinte-2: #323B55;
  --gedaempft: #56607A;
  --linie: #DCE1EC;
  --rand: #7A849C;
  --handlung: #1E3A8A;
  --auf-handlung: #FFFFFF;
  --handlung-hell: #E3E9F8;
  --braucht-dich: #9E3F00;
  --braucht-dich-flaeche: #FFE6D5;
  --gefahr: #B3261E;
  --gefahr-flaeche: #FBE4E2;
  --daten-1: #1E3A8A;
  --daten-2: #445DAA;

  /* Schrift. Eine Familie, sechs Rollen (Tabelle 3), hier die Werte fürs Handy. */
  --schrift: 'Figtree', system-ui, sans-serif;
  --schrift-seitentitel: 28px;
  --schrift-titel: 22px;
  --schrift-text: 16px;
  --schrift-meta: 14px;
  --schrift-label: 14px;
  --schrift-ziffer: 21px;
  --schrift-leiste: 13px;
  --zeilenhoehe: 1.45;
  --zeilenlaenge: 65ch;

  /* Abstand auf 4-px-Basis, Seitenrand fürs Handy. */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --seitenrand: 16px;
  --spalte: 48rem;

  /* Form. Drei Radien, keine Pillen, keine Schatten, Karten mit einer Linie. */
  --radius-karte: 12px;
  --radius-knopf: 10px;
  --radius-marke: 6px;
  --strich: 1px;

  /* Bewegung, nur für die nächste Karte nach Ja oder Nein. */
  --dauer: 160ms;
  --kurve: ease-out;

  /* Bedienung. */
  --tippziel: 44px;
  --tippziel-entscheidung: 52px;
  --fokus-breite: 2px;
  --fokus-abstand: 2px;
}
@media (min-width: 861px) {
  :root {
    --schrift-seitentitel: 34px;
    --schrift-titel: 24px;
    --seitenrand: 32px;
  }
}

/* 2. Basis */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  line-height: var(--zeilenhoehe);
  font-variant-numeric: tabular-nums;
}
h1 { font-size: var(--schrift-seitentitel); font-weight: 700; }
h2 { font-size: var(--schrift-titel); font-weight: 700; }
/* Handlung ist der einen nächsten Handlung vorbehalten, ein Link im Text ist Tinte mit
   Unterstrich. */
a { color: var(--tinte); text-decoration: underline; }
/* Fokusring auf jedem bedienbaren Element. :is() übernimmt die Spezifität von
   [tabindex], so schlägt der Ring auch Regeln, die mit all: unset alles zurücksetzen. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--fokus-breite) solid var(--handlung);
  outline-offset: var(--fokus-abstand);
}
/* Wer im System weniger Bewegung eingestellt hat, bekommt keinen Übergang. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 3. Bausteine */
/* Je Baustein ein Abschnitt mit seiner Handy-Regel. Die Makros liegen unter
   templates/_bausteine/, die Musterseite /admin/muster zeigt jeden in jedem Zustand. Jeder
   Selektor nennt eine Klasse, keine Regel gilt einem nackten Element. */

/* Gemeinsam */
/* Die eine Spalte jeder einspaltigen Seite: am PC mittig, mit der Breite aus --spalte. */
.spalte { width: 100%; max-width: var(--spalte); margin: 0 auto; min-width: 0; }
.zeichen { flex-shrink: 0; width: 1.25em; height: 1.25em; }
/* Text nur für Vorleseprogramme, etwa „Wo:“ vor dem Ortszeichen. */
.vorlesen {
  position: absolute;
  width: var(--strich);
  height: var(--strich);
  margin: calc(-1 * var(--strich));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rahmen */
.kopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--abstand-5);
  min-height: calc(var(--tippziel) + var(--abstand-3));
  padding: 0 var(--seitenrand);
  border-bottom: var(--strich) solid var(--linie);
  background: var(--flaeche);
}
.kopfleiste__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  color: var(--tinte);
  font-size: var(--schrift-titel);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.kopfleiste__navigation { display: flex; gap: var(--abstand-2); min-width: 0; overflow-x: auto; }
.kopfleiste__rechts { display: flex; align-items: center; gap: var(--abstand-2); margin-left: auto; }
.kopfleiste__eintrag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  min-width: var(--tippziel);
  min-height: var(--tippziel);
  padding: 0 var(--abstand-2);
  border-bottom: calc(2 * var(--strich)) solid transparent;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
}
.kopfleiste__eintrag:hover { text-decoration: underline; }
/* Der aktuelle Eintrag: fett, mit einem Strich in Handlung und aria-current. */
.kopfleiste__eintrag[aria-current="page"] { border-bottom-color: var(--handlung); font-weight: 700; }
.kopfleiste__zaehler { font-weight: 700; }
.untere-leiste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--strich) solid var(--linie);
  background: var(--flaeche);
}
.untere-leiste__eintrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  min-height: calc(var(--tippziel) + var(--abstand-4));
  color: var(--tinte);
  font-size: var(--schrift-leiste);
  text-decoration: none;
}
.untere-leiste__eintrag .zeichen { width: 1.7em; height: 1.7em; }
.untere-leiste__eintrag[aria-current="page"] { color: var(--handlung); font-weight: 700; }
@media (max-width: 860px) {
  .kopfleiste { gap: 0 var(--abstand-2); padding-right: var(--abstand-2); }
  .kopfleiste__marke { font-size: var(--schrift-text); }
  .kopfleiste__navigation { display: none; }
  .kopfleiste__rechts { gap: 0; }
  .kopfleiste__eintrag { padding: 0 var(--abstand-1); }
  /* Im Alltag steht Konto am Handy unter „Mehr“ in der unteren Leiste. */
  .kopfleiste:not(.kopfleiste--einrichtung) .kopfleiste__konto { display: none; }
  .untere-leiste--fest { position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; }
  body:has(.untere-leiste--fest) { padding-bottom: calc(var(--tippziel) + var(--abstand-4) + var(--strich)); }
}
@media (min-width: 861px) {
  .untere-leiste--fest { display: none; }
}

/* Seitenkopf mit Standzeile */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
  margin: var(--abstand-5) 0 var(--abstand-4);
}
.seitenkopf__haupt { min-width: 0; }
.seitenkopf__titel { margin: 0; font-size: var(--schrift-seitentitel); overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf__text { margin: var(--abstand-1) 0 0; }
.seitenkopf__unterzeile { margin: var(--abstand-1) 0 0; color: var(--gedaempft); font-size: var(--schrift-meta); }
.seitenkopf__zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.standzeile { max-width: var(--zeilenlaenge); margin: 0 0 var(--abstand-4); }
.standzeile__dringend {
  padding: 0 var(--abstand-1);
  margin: 0 calc(-1 * var(--abstand-1));
  border-radius: var(--radius-marke);
  background: var(--braucht-dich-flaeche);
  color: var(--braucht-dich);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.standzeile__link { color: inherit; }
@media (max-width: 860px) {
  .seitenkopf { margin-top: var(--abstand-4); }
}

/* Nächste Handlung */
.naechste-handlung { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-2); }
.naechste-handlung__wo { margin: 0; font-size: var(--schrift-label); font-weight: 600; }
.naechste-handlung__feld {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--abstand-3);
  max-width: var(--zeilenlaenge);
  padding: var(--abstand-1) var(--abstand-1) var(--abstand-1) var(--abstand-3);
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-knopf);
  background: var(--grund);
}
/* Der Befehl steht in Figtree wie alles andere, fett statt in einer Schreibmaschinenschrift. */
.naechste-handlung__befehl {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: var(--schrift-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.naechste-handlung__satz { flex: 1; min-width: 0; }
/* Ein Stück eines Worts mit Bindestrich (Filter kopierwert): die Zeile bricht davor oder
   danach, nicht am Bindestrich. */
.naechste-handlung__stueck { display: inline-block; }
/* Am Handy rückt der Kopierknopf unter einen Befehl, der neben ihm nicht in eine Zeile passt,
   und der Befehl bekommt die ganze Breite. Ein kurzer wie /weiter bleibt neben dem Knopf. */
@media (max-width: 860px) {
  .naechste-handlung__feld { flex-wrap: wrap; }
  .naechste-handlung__befehl { flex-basis: auto; }
}

/* Planliste */
.planliste { display: flex; flex-direction: column; gap: var(--abstand-3); }
.planliste__liste,
.planliste__kommende { margin: 0; padding: 0; list-style: none; }
.planliste__schritt { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--tippziel); }
.planliste__kommende .planliste__schritt { border-bottom: var(--strich) solid var(--linie); }
.planliste__kommende .planliste__schritt:last-child { border-bottom: 0; }
.planliste__nummer {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--abstand-5) + var(--abstand-1));
  height: calc(var(--abstand-5) + var(--abstand-1));
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-marke);
  color: var(--tinte);
  font-size: var(--schrift-label);
  font-weight: 600;
}
.planliste__nummer--aktuell { border-color: var(--handlung); background: var(--handlung); color: var(--auf-handlung); }
.planliste__aktuell {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.planliste__titel { display: flex; align-items: center; gap: var(--abstand-3); margin: 0; font-size: var(--schrift-titel); }
.planliste__warum,
.planliste__braucht { margin: 0; max-width: var(--zeilenlaenge); }
.planliste__fakten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: 0; }
.planliste__fakt { display: inline-flex; align-items: center; gap: var(--abstand-2); min-width: 0; }
/* Dauer und Modell bleiben zusammen: passt die Zeile nicht, geht beides in die zweite, die
   Marke steht nie allein. */
.planliste__rest { display: inline-flex; flex: none; align-items: center; gap: var(--abstand-2); }
.planliste__handlung { display: flex; flex-direction: column; gap: var(--abstand-3); }
.fortschritt { display: flex; flex-direction: column; gap: var(--abstand-2); }
.fortschritt__text { margin: 0; color: var(--gedaempft); font-size: var(--schrift-meta); }
.fortschritt__balken { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--abstand-1); }
.fortschritt__teil { height: var(--abstand-2); border-radius: var(--radius-marke); background: var(--linie); }
.fortschritt__teil--erledigt { background: var(--tinte); }
.fortschritt__teil--aktuell { background: var(--handlung); }

/* Entscheidungskarte */
.entscheidungskarte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-5) var(--abstand-4) var(--abstand-2);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
  transition: opacity var(--dauer) var(--kurve);
}
/* Die einzige Bewegung: nach Ja oder Nein blendet die nächste Karte über. htmx setzt
   htmx-added an neuen Inhalt und nimmt die Klasse nach dem Einsetzen wieder weg. Bei
   weniger Bewegung schaltet die Basis den Übergang ab. */
.htmx-added .entscheidungskarte,
.entscheidungskarte.htmx-added { opacity: 0; }
.entscheidungskarte__titel { margin: 0; font-size: var(--schrift-titel); overflow-wrap: anywhere; hyphens: auto; }
.entscheidungskarte__firma { margin: 0; }
.entscheidungskarte__meta { margin: 0; color: var(--gedaempft); font-size: var(--schrift-meta); }
.entscheidungskarte__score { display: flex; align-items: flex-start; gap: var(--abstand-4); padding: var(--abstand-2) 0; }
.entscheidungskarte__begruendung { display: flex; flex-direction: column; gap: var(--abstand-1); min-width: 0; }
.entscheidungskarte__marken { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0; }
.entscheidungskarte__status { padding-top: var(--abstand-1); }
.entscheidungskarte__grund { margin: 0; max-width: var(--zeilenlaenge); }
.entscheidungskarte__auszug {
  display: -webkit-box;
  max-width: var(--zeilenlaenge);
  margin: 0;
  padding-top: var(--abstand-3);
  overflow: hidden;
  border-top: var(--strich) solid var(--linie);
  color: var(--tinte-2);
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.entscheidungskarte:has(.entscheidungskarte__ganz[open]) .entscheidungskarte__auszug { display: none; }
.entscheidungskarte__anzeige {
  max-width: var(--zeilenlaenge);
  color: var(--tinte-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.entscheidungskarte__handlung { display: flex; flex-direction: column; gap: var(--abstand-3); padding-bottom: var(--abstand-2); }
.entscheidungsleiste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; }
.entscheidungsleiste .knopf { min-height: var(--tippziel-entscheidung); }
.entscheidungsleiste .knopf--sekundaer { flex: 1 1 0; }
.entscheidungsleiste .knopf--primaer { flex: 1.7 1 0; }
/* Der leise Knopf steht in einer eigenen Zeile unter Nein und Ja, so bleibt beiden die Breite. */
.entscheidungsleiste .knopf--leise { flex: 1 0 100%; order: 1; }
@media (max-width: 860px) {
  /* Am Handy steht die Leiste unten fest, über der unteren Leiste, wenn es sie gibt. */
  .entscheidungsleiste--fest {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: var(--abstand-2) var(--seitenrand) var(--abstand-3);
    border-top: var(--strich) solid var(--linie);
    background: var(--flaeche);
  }
  body:has(.entscheidungsleiste--fest) { padding-bottom: calc(var(--tippziel-entscheidung) + var(--abstand-5)); }
  body:has(.untere-leiste--fest) .entscheidungsleiste--fest { bottom: calc(var(--tippziel) + var(--abstand-4) + var(--strich)); }
  body:has(.untere-leiste--fest):has(.entscheidungsleiste--fest) {
    padding-bottom: calc(var(--tippziel-entscheidung) + var(--abstand-5) + var(--tippziel) + var(--abstand-4) + var(--strich));
  }
  body:has(.entscheidungsleiste--fest .knopf--leise) { padding-bottom: calc(var(--tippziel-entscheidung) * 2 + var(--abstand-2) + var(--abstand-5)); }
  body:has(.untere-leiste--fest):has(.entscheidungsleiste--fest .knopf--leise) {
    padding-bottom: calc(var(--tippziel-entscheidung) * 2 + var(--abstand-2) + var(--abstand-5) + var(--tippziel) + var(--abstand-4) + var(--strich));
  }
}

/* Score-Ring */
.score-ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--tinte);
}
.score-ring__bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.score-ring__spur { stroke: var(--linie); }
.score-ring__bogen { stroke: currentColor; }
.score-ring__wert { position: relative; font-weight: 700; }
.score-ring--gross {
  width: calc(var(--abstand-7) + var(--abstand-3));
  height: calc(var(--abstand-7) + var(--abstand-3));
}
.score-ring--gross .score-ring__wert { font-size: var(--schrift-ziffer); }
.score-ring--klein {
  width: calc(var(--abstand-6) + var(--abstand-2));
  height: calc(var(--abstand-6) + var(--abstand-2));
}
.score-ring--klein .score-ring__wert { font-size: var(--schrift-label); }
.score-ring--niedrig { color: var(--gedaempft); }
.score-ring--ohne .score-ring__spur { stroke: var(--rand); }

/* Jobzeile */
.jobzeilen {
  overflow: hidden;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.jobzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: calc(var(--tippziel) + var(--abstand-3));
  padding: var(--abstand-2) var(--abstand-4);
  border-bottom: var(--strich) solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
  text-decoration: none;
}
.jobzeile:last-child { border-bottom: 0; }
.jobzeile:hover { background: var(--grund); }
.jobzeile:focus-visible { outline-offset: calc(-2 * var(--fokus-breite)); }
.jobzeile__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.jobzeile__titel { font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.jobzeile__firma { overflow-wrap: anywhere; }
.jobzeile__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--abstand-1);
}
.jobzeile__marken { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--abstand-1); }
.jobzeile__meta { color: var(--gedaempft); font-size: var(--schrift-meta); white-space: nowrap; }
/* Ausgewählt: Handlung hell mit Rahmen in Tinte, fettem Titel und aria-current, nie die Fläche allein. */
.jobzeile--ausgewaehlt,
.jobzeile--ausgewaehlt:hover {
  outline: var(--strich) solid var(--tinte);
  outline-offset: calc(-1 * var(--strich));
  background: var(--handlung-hell);
}
.jobzeile--ausgewaehlt .jobzeile__titel { font-weight: 700; }
@media (max-width: 860px) {
  .jobzeile { flex-wrap: wrap; }
  .jobzeile__rechts { flex: 1 0 100%; flex-direction: row; align-items: center; }
  .jobzeile:has(.score-ring) .jobzeile__rechts {
    padding-left: calc(var(--abstand-6) + var(--abstand-2) + var(--abstand-3));
  }
}

/* Marke */
.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  padding: 0 var(--abstand-2);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-marke);
  background: var(--grund);
  color: var(--tinte);
  font-size: var(--schrift-label);
  font-weight: 600;
  white-space: nowrap;
}
.marke--braucht-dich {
  border-color: var(--braucht-dich-flaeche);
  background: var(--braucht-dich-flaeche);
  color: var(--braucht-dich);
}
.marke--gefahr {
  border-color: var(--gefahr-flaeche);
  background: var(--gefahr-flaeche);
  color: var(--gefahr);
}

/* Knopf */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-width: var(--tippziel);
  min-height: var(--tippziel);
  margin: 0;
  padding: 0 var(--abstand-4);
  border: var(--strich) solid transparent;
  border-radius: var(--radius-knopf);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf--primaer { border-color: var(--handlung); background: var(--handlung); color: var(--auf-handlung); }
.knopf--primaer:hover { border-color: var(--tinte); background: var(--tinte); }
.knopf--sekundaer { border-color: var(--rand); background: var(--flaeche); color: var(--tinte); }
.knopf--sekundaer:hover { border-color: var(--tinte); }
.knopf--leise {
  padding: 0;
  color: var(--tinte);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.knopf--leise:hover { text-decoration-thickness: calc(2 * var(--strich)); }
/* Gewählt: Handlung hell nie allein, der Haken im Knopf und aria-pressed gehören dazu. */
.knopf--gewaehlt,
.knopf--gewaehlt:hover { border-color: var(--handlung); background: var(--handlung-hell); color: var(--tinte); }
.knopf:disabled {
  border-color: var(--rand);
  border-style: dashed;
  background: var(--grund);
  color: var(--gedaempft);
  cursor: not-allowed;
}

/* Hinweis */
.hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--grund);
  color: var(--tinte);
}
.hinweis > .zeichen { margin-top: 0.1em; }
.hinweis__text { min-width: 0; max-width: var(--zeilenlaenge); }
.hinweis__text > :first-child { margin-top: 0; }
.hinweis__text > :last-child { margin-bottom: 0; }
.hinweis--braucht-dich { border-color: var(--braucht-dich-flaeche); background: var(--braucht-dich-flaeche); }
.hinweis--braucht-dich .zeichen { color: var(--braucht-dich); }
.hinweis--fehler { border-color: var(--gefahr); background: var(--gefahr-flaeche); }
.hinweis--fehler .zeichen { color: var(--gefahr); }
.hinweis--erfolg { padding: 0; border: 0; background: none; }

/* Aufklapper */
.aufklapper__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.aufklapper__titel::-webkit-details-marker { display: none; }
.aufklapper__titel:hover .aufklapper__text { text-decoration: underline; }
.aufklapper[open] > .aufklapper__titel .zeichen--plus,
.aufklapper:not([open]) > .aufklapper__titel .zeichen--minus { display: none; }
.aufklapper__inhalt { padding-bottom: var(--abstand-3); }
.aufklapper__inhalt > :first-child { margin-top: 0; }
/* Aufklapper untereinander stehen in einer Karte, eine Linie trennt sie. */
.aufklapper-liste {
  margin: 0;
  padding: 0 var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.aufklapper-liste > * + * { border-top: var(--strich) solid var(--linie); }

/* Formularfeld */
.feld { display: flex; flex-direction: column; gap: var(--abstand-1); margin: 0 0 var(--abstand-4); }
.feld__label { display: block; margin: 0; font-size: var(--schrift-label); font-weight: 600; }
.feld__hilfe { max-width: var(--zeilenlaenge); margin: 0; }
.feld__fehler { display: flex; align-items: flex-start; gap: var(--abstand-2); margin: 0; color: var(--gefahr); font-weight: 600; }
.feld__eingabe {
  width: 100%;
  min-height: var(--tippziel);
  margin: 0;
  padding: 0 var(--abstand-3);
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-knopf);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
}
.feld textarea.feld__eingabe { min-height: calc(3 * var(--tippziel)); padding: var(--abstand-2) var(--abstand-3); resize: vertical; }
.feld .feld__eingabe[readonly] { border-style: dashed; background: var(--grund); }
.feld--fehler .feld__eingabe { border-color: var(--gefahr); }
.feld__eingabe::placeholder,
.begriffsliste__eingabe::placeholder { color: var(--gedaempft); opacity: 1; }
.feld--auswahl { margin-bottom: var(--abstand-1); }
.feld__auswahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  margin: 0;
  font-size: var(--schrift-text);
  font-weight: 400;
  cursor: pointer;
}
.feld__kaestchen { width: 1.25em; height: 1.25em; margin: 0; accent-color: var(--tinte); }
.begriffsliste { display: flex; flex-direction: column; gap: var(--abstand-2); margin: 0 0 var(--abstand-4); }
.begriffsliste__label { margin: 0; font-size: var(--schrift-label); font-weight: 600; }
.begriffsliste__hilfe { max-width: var(--zeilenlaenge); margin: 0; }
.begriffsliste__liste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.begriffsliste__begriff {
  display: inline-flex;
  align-items: center;
  padding-left: var(--abstand-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-knopf);
  background: var(--grund);
}
.begriffsliste__entfernen-formular { display: flex; margin: 0; }
/* Der ×-Knopf ist ein ganzes Tippziel, trägt den Fokusring der Basis und heißt
   „<Begriff> entfernen“. */
.begriffsliste__entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tippziel);
  height: var(--tippziel);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-knopf);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
}
.begriffsliste__entfernen:hover { background: var(--linie); }
.begriffsliste__neu { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; }
.begriffsliste__eingabe {
  flex: 1 1 12em;
  min-width: 0;
  min-height: var(--tippziel);
  margin: 0;
  padding: 0 var(--abstand-3);
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-knopf);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
}

/* Leerzustand */
.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-4);
  padding: var(--abstand-6) var(--abstand-5);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.leerzustand__text { max-width: var(--zeilenlaenge); margin: 0; }
@media (max-width: 860px) {
  .leerzustand { padding: var(--abstand-5) var(--abstand-4); }
}

/* Daten */
.tabelle { margin: 0 0 var(--abstand-4); }
.tabelle__rahmen {
  overflow-x: auto;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.tabelle__tabelle {
  width: 100%;
  border-collapse: collapse;
}
.tabelle th,
.tabelle td {
  padding: var(--abstand-2) var(--abstand-3);
  border-bottom: var(--strich) solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.tabelle th {
  background: var(--flaeche);
  color: var(--tinte);
  font-size: var(--schrift-label);
  font-weight: 600;
  white-space: nowrap;
}
.tabelle td { font-size: var(--schrift-text); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .tabelle__zahl { text-align: right; }
.tabelle__hinweis { display: none; margin: var(--abstand-1) 0 0; }
@media (max-width: 860px) {
  .tabelle__hinweis { display: block; }
  /* Gestapelt: jede Zeile ein Block, die erste Zelle fett, die zweite darunter. Die Spaltenköpfe
     bleiben für Vorleseprogramme, wie .vorlesen. */
  .tabelle--gestapelt thead {
    position: absolute;
    width: var(--strich);
    height: var(--strich);
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabelle--gestapelt tr { display: block; padding: var(--abstand-2) 0; border-bottom: var(--strich) solid var(--linie); }
  .tabelle--gestapelt tbody tr:last-child { border-bottom: 0; }
  .tabelle--gestapelt td { display: block; padding: var(--abstand-1) var(--abstand-3); border-bottom: 0; }
  .tabelle--gestapelt td:first-child { font-weight: 600; }
}

/* Problem melden */
.problem-melden { margin: var(--abstand-6) 0 0; }
.problem-melden__blatt {
  width: 100%;
  max-width: var(--zeilenlaenge);
  padding: var(--abstand-5) var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
  color: var(--tinte);
}
/* Offen an seinem Platz (Musterseite, Antwort ohne JavaScript) statt über der Seite. */
.problem-melden__blatt[open]:not(:modal) { position: static; margin: var(--abstand-3) 0 0; }
.problem-melden__blatt::backdrop { background: color-mix(in srgb, var(--tinte) 45%, transparent); }
.problem-melden__titel { margin: 0 0 var(--abstand-3); font-size: var(--schrift-titel); }
.problem-melden__formular { margin: 0; }
.problem-melden__formular > .hinweis { margin: 0 0 var(--abstand-3); }
.problem-melden__seite { margin: 0 0 var(--abstand-4); }
.problem-melden__knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-3) 0 0; }
@media (max-width: 860px) {
  /* Am Handy ein Blatt von unten, über die ganze Breite. */
  .problem-melden__blatt:modal {
    top: auto;
    bottom: 0;
    max-width: none;
    max-height: calc(100% - var(--abstand-7));
    margin: 0;
    border-bottom: 0;
    border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  }
}

/* Bewerbungszeile */
/* Eine Bewerbung unter Bewerbungen: Firma fett, rechts die Marke, darunter der Titel und in
   einer eigenen Zeile der nächste Schritt in Tinte. Drängt er, steht er in Braucht dich mit
   der Uhr, nie über die Farbe allein. „bewerbungszeilen“ rahmt die Zeilen einer Liste. */
.bewerbungszeilen {
  overflow: hidden;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.bewerbungszeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--abstand-1) var(--abstand-3);
  min-height: calc(var(--tippziel) + var(--abstand-3));
  padding: var(--abstand-3) var(--abstand-4);
  border-bottom: var(--strich) solid var(--linie);
  color: var(--tinte);
  text-decoration: none;
}
.bewerbungszeile:last-child { border-bottom: 0; }
.bewerbungszeile:hover .bewerbungszeile__firma { text-decoration: underline; }
.bewerbungszeile:focus-visible { outline-offset: calc(-2 * var(--fokus-breite)); }
.bewerbungszeile__firma { font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.bewerbungszeile > .marke { justify-self: end; }
.bewerbungszeile__titel {
  grid-column: 1 / -1;
  color: var(--tinte-2);
  font-size: var(--schrift-meta);
  overflow-wrap: anywhere;
}
.bewerbungszeile__schritt,
.bewerbungszeile__meta { display: flex; grid-column: 1 / -1; align-items: center; gap: var(--abstand-2); }
.bewerbungszeile__meta { color: var(--gedaempft); font-size: var(--schrift-meta); }
.bewerbungszeile--dringend .bewerbungszeile__schritt,
.bewerbungszeile--dringend .bewerbungszeile__meta {
  color: var(--braucht-dich);
  font-size: var(--schrift-text);
  font-weight: 600;
}
@media (max-width: 860px) {
  /* Am Handy rückt die Zeile enger, damit Firma und Marke bei 360 px nebeneinander passen. */
  .bewerbungszeile { gap: var(--abstand-1) var(--abstand-2); padding: var(--abstand-3); }
}

/* Abschnitt */
/* Ein zuklappbarer Abschnitt mit h2 und Zahl im Kopf. Plus zeigt „zu“, Minus „offen“, app.js
   merkt sich je Gerät, ob er offen ist. */
.abschnitt { margin: var(--abstand-5) 0 0; }
.abschnitt__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  list-style: none;
  cursor: pointer;
}
.abschnitt__kopf::-webkit-details-marker { display: none; }
.abschnitt__kopf:hover .abschnitt__titel { text-decoration: underline; }
.abschnitt__titel { margin: 0; font-size: var(--schrift-titel); }
.abschnitt__zahl { color: var(--gedaempft); font-size: var(--schrift-meta); }
.abschnitt[open] > .abschnitt__kopf .zeichen--plus,
.abschnitt:not([open]) > .abschnitt__kopf .zeichen--minus { display: none; }
.abschnitt__inhalt { padding-top: var(--abstand-2); }
@media (max-width: 860px) {
  .abschnitt { margin-top: var(--abstand-4); }
}

/* Teilschritte */
/* Die Teilschritte eines Schritts, einer nach dem anderen: erledigte zugeklappt, der aktuelle
   als Karte auf Grund innerhalb der Fläche des Schritts, die übrigen je eine Zeile. Die
   Nummern sehen aus wie die der Planliste. Zum Nachschlagen stehen alle als Liste, mit der
   Nummer als Zahl im Titel. */
.teilschritte { display: flex; flex-direction: column; gap: var(--abstand-3); min-width: 0; }
.teilschritte--liste { gap: var(--abstand-5); margin: 0; padding: 0; list-style: none; }
.teilschritte__liste,
.teilschritte__kommende { margin: 0; padding: 0; list-style: none; }
.teilschritte__teil { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--tippziel); }
.teilschritte__kommende .teilschritte__teil { border-bottom: var(--strich) solid var(--linie); }
.teilschritte__kommende .teilschritte__teil:last-child { border-bottom: 0; }
.teilschritte__nummer {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--abstand-5) + var(--abstand-1));
  height: calc(var(--abstand-5) + var(--abstand-1));
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-marke);
  color: var(--tinte);
  font-size: var(--schrift-label);
  font-weight: 600;
}
.teilschritte__nummer--aktuell { border-color: var(--handlung); background: var(--handlung); color: var(--auf-handlung); }
.teilschritte__aktuell {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  min-width: 0;
  padding: var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--grund);
}
.teilschritte__eintrag { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.teilschritte__titel { display: flex; align-items: center; gap: var(--abstand-3); margin: 0; font-size: var(--schrift-text); font-weight: 700; }
.teilschritte__text { display: flex; flex-direction: column; gap: var(--abstand-2); max-width: var(--zeilenlaenge); overflow-wrap: anywhere; }
.teilschritte__text > p { margin: 0; }
.teilschritte__handlungen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); }
/* Am Handy rückt die Karte enger an ihren Text, sie steht schon in der Fläche des Schritts. */
@media (max-width: 860px) {
  .teilschritte__aktuell { padding: var(--abstand-3); }
}

/* 4. Seiten */

/* Musterseite */
.muster { max-width: 64rem; padding-bottom: var(--abstand-7); }
.muster__abschnitt { display: flex; flex-direction: column; gap: var(--abstand-4); margin-top: var(--abstand-7); }
.muster__abschnitt > h2 { margin: 0; }
.muster__datei { margin: calc(-1 * var(--abstand-3)) 0 0; color: var(--gedaempft); font-size: var(--schrift-meta); }
.muster__zustand { margin: var(--abstand-2) 0 0; font-size: var(--schrift-label); font-weight: 600; }
.muster__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); }
.muster__farben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--abstand-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.muster__farbe { display: flex; align-items: center; gap: var(--abstand-3); }
.muster__probe {
  flex-shrink: 0;
  width: var(--tippziel);
  height: var(--tippziel);
  border: var(--strich) solid var(--rand);
  border-radius: var(--radius-marke);
}
.muster__token { display: flex; flex-direction: column; min-width: 0; }
.muster__name { font-family: inherit; font-weight: 600; white-space: nowrap; }
.muster__wert { color: var(--gedaempft); font-size: var(--schrift-meta); }
.muster .tabelle td { white-space: nowrap; }
/* Das offene Beispiel von Problem melden steht ohne den Abstand, den es am Ende einer Seite hat. */
.muster__abschnitt > .problem-melden { margin: 0; }
.muster__abschnitt .problem-melden__blatt[open]:not(:modal) { margin: 0; }
.muster__probe--grund { background: var(--grund); }
.muster__probe--flaeche { background: var(--flaeche); }
.muster__probe--tinte { background: var(--tinte); }
.muster__probe--tinte-2 { background: var(--tinte-2); }
.muster__probe--gedaempft { background: var(--gedaempft); }
.muster__probe--linie { background: var(--linie); }
.muster__probe--rand { background: var(--rand); }
.muster__probe--handlung { background: var(--handlung); }
.muster__probe--auf-handlung { background: var(--auf-handlung); }
.muster__probe--handlung-hell { background: var(--handlung-hell); }
.muster__probe--braucht-dich { background: var(--braucht-dich); }
.muster__probe--braucht-dich-flaeche { background: var(--braucht-dich-flaeche); }
.muster__probe--gefahr { background: var(--gefahr); }
.muster__probe--gefahr-flaeche { background: var(--gefahr-flaeche); }
.muster__probe--daten-1 { background: var(--daten-1); }
.muster__probe--daten-2 { background: var(--daten-2); }
.muster__schrift { display: flex; flex-direction: column; gap: var(--abstand-1); }
.muster__rolle { max-width: var(--zeilenlaenge); margin: 0; }
.muster__rolle--seitentitel { font-size: var(--schrift-seitentitel); font-weight: 700; }
.muster__rolle--titel { font-size: var(--schrift-titel); font-weight: 700; }
.muster__rolle--text { font-size: var(--schrift-text); }
.muster__rolle--meta { color: var(--gedaempft); font-size: var(--schrift-meta); }
.muster__rolle--label { font-size: var(--schrift-label); font-weight: 600; }
.muster__rolle--ziffer { font-size: var(--schrift-ziffer); font-weight: 700; }

/* 4a. Seiten: Rahmen und Jobs */

/* Rahmen. Die Seite ist eine Spalte mit Seitenrand, main trägt jede Seite. Die Kopfleiste
   und die untere Leiste sind der Baustein, hier stehen nur main und die Fußzeile mit
   „Etwas klappt nicht?“ in derselben Spalte. */
main {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--abstand-2) var(--seitenrand) var(--abstand-6);
}
.fusszeile { max-width: 80rem; margin: 0 auto; padding: 0 var(--seitenrand) var(--abstand-6); }
.fusszeile > .problem-melden { margin-top: 0; }

/* Gemeinsam für Heute, Bewerbungen und die Jobseite. */
.metatext { color: var(--gedaempft); font-size: var(--schrift-meta); }
.formular {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-2);
  min-width: 0;
  margin: 0;
}
/* Ein einzelner Knopf behält seine Breite, Felder und Feldgruppen füllen die Spalte. */
.formular > :not(.knopf, .knopfreihe) { align-self: stretch; }
.formular-inline { display: inline; margin: 0; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
/* Die Feinauswahl hat drei Knöpfe, die in eine Handybreite nicht nebeneinander passen: Vorbereiten
   steht allein in der ersten Zeile, Vielleicht und Aussortieren teilen sich die zweite. */
@media (max-width: 860px) {
  .knopfreihe--auswahl > .knopf--primaer { flex: 1 0 100%; }
  .knopfreihe--auswahl > .knopf--sekundaer { flex: 1 1 0; }
}
.absatz { max-width: var(--zeilenlaenge); margin: 0; }

.verlauf { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.verlauf > li {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-2) 0;
  border-bottom: var(--strich) solid var(--linie);
}
.verlauf > li:last-child { border-bottom: 0; }

/* Heute: am PC unter der Überschrift „Neu seit …“ links die Liste (5fr) und rechts die Karte
   (7fr), beide oben bündig. Am Handy ist die Karte die Seite. Über ihr stehen der Zähler und
   „Später“, die Liste und der Kasten für Cowork fallen weg, die h1 bleibt nur für
   Vorleseprogramme, und der Titel der Karte trägt die Größe des Seitentitels. Die
   Rückmeldung nach Ja oder Nein steht mit „Rückgängig“ in einer Zeile. */
.heute > .hinweis { margin-bottom: var(--abstand-4); }
.heute > .hinweis--erfolg { align-items: center; }
.heute > .hinweis--erfolg > .hinweis__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--abstand-3);
}
.heute > .hinweis--erfolg p { margin: 0; }
.heute__rueckgaengig { margin: 0; }
.heute__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  margin: var(--abstand-5) 0 var(--abstand-3);
}
.heute__ueberschrift { margin: 0; }
.heute__zahl { color: var(--gedaempft); font-size: var(--schrift-meta); }
.heute__runde {
  display: grid;
  grid-template-areas: "seite karte";
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--abstand-5);
}
.heute__karte { display: flex; grid-area: karte; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.heute__seite { display: flex; grid-area: seite; flex-direction: column; gap: var(--abstand-4); min-width: 0; }
.heute__zaehler { display: none; }
.heute__spaeter { margin: 0; }
.heute__weitere {
  padding: 0 var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.heute__weitere > .aufklapper + .aufklapper { border-top: var(--strich) solid var(--linie); }
.heute__frist { margin: 0 0 var(--abstand-2); color: var(--gedaempft); font-size: var(--schrift-meta); }
.heute__zeilen { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--abstand-4)); }
.heute__cowork {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.heute__cowork > h2 { margin: 0; font-size: var(--schrift-text); }
.heute__naechstes {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-5);
}
.heute__naechstes > h2,
.heute__naechstes > p { margin: 0; max-width: var(--zeilenlaenge); }
@media (min-width: 861px) {
  /* Am PC läuft die Karte mit, wenn die Liste länger ist als der Bildschirm. */
  .heute__karte {
    position: sticky;
    top: var(--abstand-4);
    align-self: start;
    /* Mit aufgeklappter Anzeige scrollt die Karte in sich, statt erst am Seitenende zu enden. */
    max-height: calc(100vh - 2 * var(--abstand-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 860px) {
  .heute__runde { display: flex; flex-direction: column; align-items: stretch; gap: var(--abstand-4); }
  .heute__kopf,
  .heute__liste,
  .heute__cowork,
  .heute__spaeter { display: none; }
  .heute__zaehler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    color: var(--gedaempft);
    font-size: var(--schrift-meta);
  }
  .heute--runde > .seitenkopf {
    position: absolute;
    width: var(--strich);
    height: var(--strich);
    margin: calc(-1 * var(--strich));
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .heute--runde .entscheidungskarte__titel { font-size: var(--schrift-seitentitel); }
}

/* Jobseite: die Karte mit Status und Handlungen der Stufe, darunter die Aufklapper und der
   leise Knopf der Stufe. Eine Spalte, am PC mit begrenzter Breite. */
.brotkrumen { margin-top: var(--abstand-2); }
.brotkrumen a { display: inline-flex; align-items: center; min-width: var(--tippziel); min-height: var(--tippziel); }
.jobseite { display: flex; flex-direction: column; gap: var(--abstand-4); }
.jobseite__dokumente { max-width: var(--zeilenlaenge); margin: 0; }
.jobseite__ordner { font-family: inherit; font-weight: 600; overflow-wrap: anywhere; }
.jobseite__notiz { max-width: var(--zeilenlaenge); margin: 0; color: var(--tinte-2); }
.jobseite__leise { margin: 0; }
.anzeige { max-width: var(--zeilenlaenge); color: var(--tinte-2); white-space: pre-line; overflow-wrap: anywhere; }

/* 4b. Seiten: übrige */
/* Einrichtung, Tour, Suche, Bewerbungen, Hilfe, Lernen, Anleitung, Verbindungen,
   Meine Daten, Anmeldung, Einladung, Fehler, Wiederkommen und Admin Nutzer (Block C2). Die
   Seiten setzen sich aus den Bausteinen zusammen, hier steht nur, was eine Seite darüber
   hinaus braucht. Wie in Abschnitt 3: nur var(--…), jeder Selektor nennt eine Klasse. */

/* Gemeinsam für diese Seiten */
.kasten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  min-width: 0;
  padding: var(--abstand-5);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.kasten > h1,
.kasten > h2,
.kasten > h3,
.kasten > p,
.kasten > ul,
.kasten > ol { margin: 0; }
.kasten > p,
.kasten > ul,
.kasten > ol { max-width: var(--zeilenlaenge); }
.kasten--schmal { width: 100%; max-width: 30rem; margin: var(--abstand-6) auto; }
.stapel { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; }
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
  gap: var(--abstand-4);
}
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: 0; }
/* Ein Befehl steht in Figtree wie alles andere, fett und auf Grund gesetzt. */
.kasten code:not(.naechste-handlung__befehl),
.lesetext code,
.hinweis code {
  padding: 0 var(--abstand-1);
  border-radius: var(--radius-marke);
  background: var(--grund);
  font-family: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}
@media (max-width: 860px) {
  .kasten { padding: var(--abstand-4); }
  .kasten--schmal { margin: var(--abstand-4) auto; }
  .spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Einrichtung: eine Spalte, am PC mittig mit begrenzter Breite */
.einrichtung { display: flex; flex-direction: column; gap: var(--abstand-4); }
.einrichtung__handlung { display: flex; flex-direction: column; gap: var(--abstand-3); }
.einrichtung__formular { display: flex; flex-direction: column; gap: var(--abstand-2); }
.einrichtung__wahl { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Die Aufklapper unter der Liste stehen als Karten, damit die Anleitung nicht wie die
   Fortsetzung des Plans aussieht. */
.einrichtung__vertiefung,
.einrichtung__anleitung { padding: 0 var(--abstand-4); border: var(--strich) solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche); }

/* Tour: zwei Seiten, der Kreislauf und was du brauchst als Folge mit Zeichen */
.tourseite { padding-top: var(--abstand-4); }
.tourseite > h1 { margin: var(--abstand-1) 0 0; }
.tourseite__zaehler { margin: 0; color: var(--gedaempft); font-size: var(--schrift-meta); }
.kreislauf { display: grid; margin: var(--abstand-5) 0; padding: 0; list-style: none; }
.kreislauf__teil {
  display: grid;
  grid-template-columns: var(--tippziel) minmax(0, 1fr);
  align-items: start;
  gap: var(--abstand-3);
  padding-bottom: var(--abstand-4);
}
.kreislauf__zeichen {
  display: grid;
  place-items: center;
  width: var(--tippziel);
  height: var(--tippziel);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.kreislauf__name { display: block; }
.kreislauf__wo { color: var(--gedaempft); font-size: var(--schrift-meta); }

/* Suche */
/* Eine Spalte: Listen und Felder, die sofort speichern, darunter die Aufklapper. Alles darin
   darf schrumpfen (min-width: 0), sonst schöbe eine lange Zeile die Seite bei 360 px seitlich. */
.suche { display: flex; flex-direction: column; gap: var(--abstand-4); }
.suche__liste { min-width: 0; }
.suche__liste > .begriffsliste,
.suche__feld > .feld { margin-bottom: 0; }
.suche__feld { margin: 0; }
.suchlauf:not(:has(*)) { display: none; }
/* Der Bereich für die Absage an der Tagesgrenze bleibt leer im Baum, damit ein
   Vorleseprogramm ihn kennt, bevor der Satz kommt. Leer steht er außerhalb des Flusses
   und kostet keinen Abstand. display: none nähme ihn aus dem Baum. */
.suchlauf-meldung:not(:has(*)) { position: absolute; }
.suche__schluss { max-width: var(--zeilenlaenge); margin: 0; }
.feldgruppe { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Bewerbungen */
/* Eine Spalte mit den Abschnitten, am Ende zugeklappt Abgeschlossen und die Auswertung. */
.bewerbungen { display: flex; flex-direction: column; }
.bewerbungen__ende { margin-top: var(--abstand-6); }
/* Die Zeilen unter „Abgeschlossen“ laufen von Rand zu Rand der Karte. */
.bewerbungen__ende .bewerbungszeilen {
  margin: 0 calc(-1 * var(--abstand-4)) var(--abstand-3);
  border-width: var(--strich) 0;
  border-radius: 0;
}
.auswertung { display: flex; flex-direction: column; gap: var(--abstand-5); min-width: 0; }
.auswertung > p { max-width: var(--zeilenlaenge); margin: 0; }
.auswertung__teil { display: flex; flex-direction: column; gap: var(--abstand-3); min-width: 0; }
.auswertung__teil > h3 { margin: 0; font-size: var(--schrift-text); font-weight: 700; }
.diagramm { min-width: 0; }
.diagramm__rahmen {
  padding: var(--abstand-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
/* Das SVG kommt mit width="100%" und viewBox und schrumpft mit der Spalte, ohne zu schieben.
   Die Höchstbreite (die Breite des viewBox in rem) hält die Schrift der Beschriftungen bei
   ihrer Größe. Balken und Weg sind für das Handy gebaut (svg.PHONE_WIDTH) und schrumpfen bei
   360 px nicht, das Sankey steht nur am PC. */
.diagramm__rahmen svg { display: block; width: 100%; height: auto; }
.diagramm__balken { max-width: 16.5rem; }
.diagramm__sankey { max-width: 42.5rem; }
.diagramm__weg { max-width: 16.5rem; }
/* Die Legende nennt jede Reihe in Worten. Die Farbe der Probe steht als Token hier, dieselbe
   wie in web/svg.py (COLORS), und das Wort daneben trägt die Bedeutung. */
.diagramm__legende { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: var(--abstand-2) 0 0; padding: 0; list-style: none; }
.diagramm__reihe { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.diagramm__probe { display: inline-block; width: var(--abstand-3); height: var(--abstand-3); }
.diagramm__probe--found { background: var(--rand); }
.diagramm__probe--decided { background: var(--daten-2); }
.diagramm__probe--applied { background: var(--daten-1); }
/* Das Ausblenden braucht den Rahmen im Selektor, sonst gewinnt „.diagramm__rahmen svg“ mit
   display: block. */
@media (max-width: 860px) {
  .diagramm__rahmen { padding: var(--abstand-3); }
  .diagramm__rahmen .diagramm__sankey { display: none; }
}
@media (min-width: 861px) {
  .diagramm__rahmen .diagramm__weg { display: none; }
}

/* Lesetexte: Hilfe, Lernen, Anleitung */
/* Markdown aus content/ (eigene Dateien). Absätze und Listen bleiben bei --zeilenlaenge, etwa
   65 Zeichen (vis-04), Tabellen dürfen breiter sein und scrollen im Rahmen des Bausteins. */
.lesetext { display: flex; flex-direction: column; gap: var(--abstand-3); min-width: 0; }
.lesetext > h2,
.lesetext > h3 { margin: var(--abstand-3) 0 0; }
.lesetext > h3 { font-size: var(--schrift-text); font-weight: 700; }
.lesetext > p,
.lesetext > ul,
.lesetext > ol { max-width: var(--zeilenlaenge); margin: 0; }
.lesetext > ul,
.lesetext > ol { padding-left: var(--abstand-5); }
.lesetext li + li { margin-top: var(--abstand-1); }
.lesetext img { max-width: 100%; height: auto; }
.lesetext .tabelle { margin: 0; }
.lesetext > .lesetext__titel { margin-top: 0; }
/* Die Liste der Hintergrundseiten steht ohne Karte auf dem Grund, wie der Text darüber. */
.themen > h2 { margin: 0 0 var(--abstand-2); }
.themenliste { margin: 0; padding: 0; list-style: none; }
.themenliste a { display: flex; align-items: center; min-height: var(--tippziel); }
/* Die aktuelle Seite: fett und mit einem kräftigen Strich in Handlung, dazu aria-current. */
.themenliste a[aria-current="page"] {
  font-weight: 700;
  text-decoration-color: var(--handlung);
  text-decoration-thickness: calc(2 * var(--strich));
}

/* Verbindungen, Verbinden, Meine Daten */
.kasten__liste { padding-left: var(--abstand-5); }
.verbindungen { margin: 0; padding: 0; list-style: none; }
.verbindung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-3) 0;
  border-bottom: var(--strich) solid var(--linie);
}
.verbindung:last-child { border-bottom: 0; }
.verbindung__text { display: flex; flex-direction: column; gap: var(--abstand-1); min-width: 0; overflow-wrap: anywhere; }
.verbindung__formular { margin: 0; }

/* Anmeldung, Einladung, Fehler, Wiederkommen */
.wiederkommen { display: flex; flex-direction: column; gap: var(--abstand-4); width: 100%; max-width: 30rem; margin: var(--abstand-6) auto; }
.wiederkommen > h1,
.wiederkommen > p { margin: 0; }
.wiederkommen__qr { max-width: 14rem; }
.wiederkommen__qr svg { display: block; width: 100%; height: auto; }

/* Konto, am Handy „Mehr“ */
.konto__wer { max-width: var(--zeilenlaenge); margin: 0 0 var(--abstand-4); overflow-wrap: anywhere; }
.konto__formular { margin: 0; }
.liste-links {
  display: grid;
  margin: 0 0 var(--abstand-5);
  padding: 0;
  list-style: none;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}
.liste-links li + li { border-top: var(--strich) solid var(--linie); }
.liste-links__eintrag {
  display: flex;
  align-items: center;
  min-height: calc(var(--tippziel) + var(--abstand-2));
  padding: 0 var(--abstand-4);
  color: var(--tinte);
  text-decoration: none;
}
.liste-links__eintrag:hover { text-decoration: underline; }

/* Admin: Nutzer */
.kasten--admin { max-width: 40rem; }
.fehlertext { display: inline-flex; align-items: flex-start; gap: var(--abstand-1); color: var(--gefahr); font-weight: 600; overflow-wrap: anywhere; }
.systemliste { margin: 0; }
.systemliste__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-3);
  padding: var(--abstand-2) 0;
  border-bottom: var(--strich) solid var(--linie);
}
.systemliste__zeile:last-child { border-bottom: 0; }
.systemliste__zeile > dt { color: var(--gedaempft); }
.systemliste__zeile > dd { margin: 0; }

/* Admin: Meldungen */
.meldungen { display: flex; flex-direction: column; gap: var(--abstand-5); margin: 0; padding: 0; list-style: none; }
.meldung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: 0 0 var(--abstand-5);
  border-bottom: var(--strich) solid var(--linie);
}
.meldung:last-child { padding-bottom: 0; border-bottom: 0; }
.meldung > p { margin: 0; }
.meldung__text { max-width: var(--zeilenlaenge); white-space: pre-line; overflow-wrap: anywhere; }