/*
 * Gestaltung nach dem Prototyp „Verwaltung" (Claude Design, 2026-09-16).
 *
 * WAS ÜBERNOMMEN IST: Farben, Schriften, Seitenleiste, Karten, Tabellen,
 * Knöpfe, Formularfelder — die Gestaltungssprache.
 *
 * WAS NICHT: die Technik. Der Prototyp ist ein React-Dokument mit Inline-
 * Styles an jedem Element; hier stehen dieselben Werte einmal als Tokens.
 * Ein Farbwert, der an achtzig Stellen steht, ist keine Gestaltung, sondern
 * achtzig Gelegenheiten, ihn zu vergessen.
 *
 * WAS ENTFALLEN IST: der Dunkelmodus. Die Marke hat eine feste Palette mit
 * einer dunklen Seitenleiste und weissen Flächen; ein zweiter Satz Farben
 * dazu wäre eine zweite Marke. Das ist eine Entscheidung, keine Auslassung.
 */

:root {
  /* Marke */
  --rot: #961F2E;
  --rot-hell: #E02810;
  --rot-flaeche: rgba(150, 31, 46, .08);

  /* Seitenleiste und zweite Akzentfarbe */
  --dunkel: #44546A;
  --blau: #407D91;
  --blau-hell: #EAF6F9;
  --blau-rand: #BAD9E2;

  /* Grauwerte */
  --tinte: #000000;
  --gedaempft: #6E6E6F;
  --grau: #9D9C9C;
  --linie: #C5C6C6;
  --flaeche: #F1F1F1;
  --papier: #FFFFFF;

  /* Zustandsfarben — aus der Marke abgeleitet, damit nichts fremd wirkt */
  --gut: #2E6B4F;
  --warn: #8A5A14;
  --schlecht: var(--rot);

  --schrift-kopf: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --leiste-breite: 232px;
  --radius: 4px;
  --radius-gross: 8px;
}

/* Die Schriften liegen mitgeliefert unter public/marke — dieselben Dateien
   bedienen den Browser UND dompdf. Ein woff2 wäre kleiner, aber dompdf kann
   es nicht lesen; zwei Formate für dieselbe Schrift wären zwei Wahrheiten. */
@font-face { font-family: "Barlow Semi Condensed";
  src: url("/marke/BarlowSemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed";
  src: url("/marke/BarlowSemiCondensed-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro";
  src: url("/marke/SourceSansPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro";
  src: url("/marke/SourceSansPro-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }

/* `hidden` muss `hidden` bleiben.
 *
 * Die Browser-Regel dahinter ist `[hidden] { display: none }` — Spezifität
 * 0,1,0. Jede ID-Regel mit `display` schlägt sie. Genau das ist zwei Wochen
 * lang passiert: `#ergebnis { display: grid }` machte das Attribut
 * wirkungslos, und der Ergebnisblock stand schon auf der Warteseite. */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 15px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rot); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rot-hell); }

/* ── Gerüst: Seitenleiste und Inhalt ──────────────────────────────────── */

.geruest { min-height: 100vh; display: flex; background: var(--papier); }

.seitenleiste {
  width: var(--leiste-breite); flex: 0 0 var(--leiste-breite);
  background: var(--dunkel); color: var(--papier);
  display: flex; flex-direction: column; padding: 24px 16px;

  /* DIE LEISTE BLEIBT IM BILD, EGAL WIE LANG DIE SEITE IST.
     Ohne das wächst sie mit dem Inhalt: `margin-top: auto` schiebt den Fuss
     dann ans Ende des DOKUMENTS statt an den unteren Fensterrand, und wer
     sich abmelden will, scrollt erst an einer 20-seitigen Persona vorbei.
     `dvh` statt `vh`, weil mobile Browser ihre eigene Leiste ein- und
     ausblenden; `vh` ist die Rückfallebene für ältere Browser. */
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  /* Passt die Navigation selbst nicht ins Fenster, scrollt sie für sich —
     nicht die Seite. */
  overflow-y: auto;
}
.seitenleiste .marke {
  display: flex; align-items: center; gap: 10px; padding: 0 8px 24px;
  flex: 0 0 auto;
}
/* Das Logo ist eine flache schwarze Silhouette mit Transparenz. Für die
   dunkle Leiste genügt ein Filter — eine zweite Bilddatei wäre dieselbe
   Form ein zweites Mal. */
.seitenleiste .marke img { width: 26px; height: auto; filter: brightness(0) invert(1); }
.seitenleiste .marke .name {
  /* Ausdrücklich, nicht geerbt: Die Farbe des Markennamens ist eine
     Entscheidung und soll nicht davon abhängen, was ein Elternteil zufällig
     setzt — genau daran ist sie schon einmal grau geworden. */
  font: 700 14px/1.1 var(--schrift-kopf); text-transform: lowercase;
  color: var(--papier);
}
.seitenleiste .marke .was {
  font: 700 10px/1.2 var(--schrift); letter-spacing: .06em; text-transform: uppercase;
  color: var(--blau-rand); margin-top: 2px;
}
.seitenleiste nav { display: flex; flex-direction: column; gap: 2px; }
.seitenleiste nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius);
  color: var(--papier); text-decoration: none; font-size: 15px; opacity: .85;
}
.seitenleiste nav a:hover { background: rgba(255, 255, 255, .08); color: var(--papier); opacity: 1; }
.seitenleiste nav a.hier { background: var(--rot); font-weight: 700; opacity: 1; }
.seitenleiste nav svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.seitenleiste .fuss { margin-top: auto; padding: 16px 12px 0; font-size: 12px; color: var(--blau-rand); }
.seitenleiste .fuss a { color: var(--blau-rand); }
.seitenleiste .fuss a:hover { color: var(--papier); }

.seitenleiste .konto { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* Der Kreis trägt den ersten Buchstaben der Adresse. Feste Masse und
   `flex: 0 0 auto`, damit ihn eine lange Adresse nicht zum Oval zieht. */
.seitenleiste .avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); color: var(--papier);
  font: 700 13px/1 var(--schrift-kopf);
}
/* Eine Adresse hat keine Leerzeichen und sprengt sonst die 232 px. */
.seitenleiste .adresse { min-width: 0; overflow-wrap: anywhere; }
.seitenleiste .hinaus {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; padding: 6px 8px; margin-left: -8px;
  border-radius: var(--radius);
}
.seitenleiste .hinaus:hover { background: rgba(255, 255, 255, .08); }
.seitenleiste .hinaus svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }

.inhalt { flex: 1 1 auto; min-width: 0; padding: 40px 48px 64px; }
.huelle { max-width: 44rem; }
.huelle.weit { max-width: 66rem; }
/* Für Datentabellen mit zwei Textspalten. Der Satzspiegel gilt dem Lesen;
   eine Tabelle liest man nicht, man sucht darin — und jede Spalte, die
   klemmt, kostet einen Klick. */
.huelle.breit { max-width: 84rem; }
.huelle.schmal { max-width: 34rem; }

/* Auf schmalen Geräten legt sich die Leiste nach oben.
 *
 * WARUM DAS NACHGETRAGEN WURDE (2026-09-16): Beim Übertragen des Designs
 * wurde nur bei 1280 px nachgesehen. Bei 390 px behielt die Leiste ihre
 * 232 px — für den Inhalt blieben **62 px**, und die Seite lief 782 px über
 * den rechten Rand hinaus. Gemessen, nicht vermutet; die Sichtprüfung bei
 * einer Breite ist keine Sichtprüfung. */
@media (max-width: 60rem) {
  .geruest { display: block; }
  .seitenleiste {
    width: auto; flex: none; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px 16px; padding: 12px 16px;
    /* Hier ist die Leiste eine Zeile oben, kein Rand links. Eine feste
       Fensterhöhe wäre hier falsch, und kleben darf sie auch nicht: Sie
       ist rund 170 px hoch und nähme einem 844-px-Telefon dauerhaft ein
       Fünftel der Lesefläche. Der Weg zum Abmelden ist ein Sprung an den
       Seitenanfang — die übliche Geste auf dem Telefon. */
    position: static; height: auto; overflow: visible;
  }
  .seitenleiste .marke { padding: 0; flex: 0 0 auto; }
  .seitenleiste nav { flex-direction: row; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
  .seitenleiste nav a { padding: 8px 10px; font-size: 14px; gap: 8px; }
  .seitenleiste .fuss {
    margin-top: 0; margin-left: auto; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
  }
  .seitenleiste .konto { margin-bottom: 0; }
  .seitenleiste .hinaus { margin-left: 0; }
  /* Auf dem Telefon zählt der Platz mehr als die Adresse: Der Kreis sagt
     schon, welches Konto es ist. */
  .seitenleiste .adresse { display: none; }
  .inhalt { padding: 24px 16px 48px; }

  /* Eine Liste mit fünf Spalten passt auf kein Telefon. `display: block`
     macht aus der Tabelle einen Kasten, der für sich scrollt — die Zeilen
     bleiben Zeilen, nur die Seite wird nicht mitgezogen. */
  .liste { display: block; overflow-x: auto; }
}

/* ── Kopf einer Seite ─────────────────────────────────────────────────── */

.kopf { margin-bottom: 28px; }
.kicker {
  font: 700 12px/1.2 var(--schrift-kopf); letter-spacing: .06em;
  text-transform: uppercase; color: var(--rot); margin: 0 0 6px;
}
h1 { font: 700 30px/1.15 var(--schrift-kopf); color: var(--tinte); margin: 0 0 10px; }
/* Der rote Strich unter der Überschrift ist die Signatur des Entwurfs. */
.kopf h1::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--rot); margin-top: 10px;
}
h2 { font: 700 20px/1.2 var(--schrift-kopf); color: var(--tinte); margin: 0 0 12px; }
h3 { font: 700 16px/1.25 var(--schrift-kopf); color: var(--tinte); margin: 1.2rem 0 .4rem; }
.dek { font-size: 15px; color: var(--gedaempft); line-height: 1.5; margin: 16px 0 0; max-width: 640px; }
.kopf h1::after + .dek { margin-top: 16px; }

/* ── Flächen ──────────────────────────────────────────────────────────── */

.block { margin: 32px 0; }
.karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 18px 20px;
}
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.kachel { background: var(--papier); border: 1px solid var(--linie);
          border-radius: var(--radius-gross); padding: 18px 20px; }
.kachel svg { width: 22px; height: 22px; margin-bottom: 10px; fill: var(--blau); }
.kacheln .kachel:first-child svg { fill: var(--rot); }
.kachel .zahl { font: 700 28px/1 var(--schrift-kopf); color: var(--tinte); }
 /* `font-weight` ausdrücklich: Bis zum 2026-09-16 kam sie vom nackten
    `.was` des Wartebildschirms — eine Fettung aus einer fremden Sektion. */
.kachel .was { font-size: 13px; color: var(--gedaempft); margin-top: 2px; font-weight: 700; }

/* ── Tabellen ─────────────────────────────────────────────────────────── */

.liste { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
.liste th {
  text-align: left; padding: 8px 12px 8px 0; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--grau);
  font-weight: 700; border-bottom: 1px solid var(--linie);
}
.liste td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste tr:last-child td { border-bottom: 0; }
.liste .leer { color: var(--grau); font-style: italic; }
.liste tr.hier td { background: var(--blau-hell); }
.liste tr.still td { opacity: .55; }
.rolle { font-size: 12px; color: var(--gedaempft); display: block; }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

button, .knopf {
  background: var(--rot); color: var(--papier); border: none;
  border-radius: var(--radius); padding: 12px 20px;
  font: 700 16px/1 var(--schrift-kopf); cursor: pointer;
  text-decoration: none; display: inline-block; justify-self: start;
}
button:hover, .knopf:hover { background: var(--rot-hell); color: var(--papier); }
.knopf.klein, button.klein { font-size: 13px; padding: 7px 13px; }
/* Der zweite Rang: Umriss statt Fläche. */
button.leise, .knopf.leise {
  background: none; color: var(--rot); border: 1px solid var(--rot);
  font: 700 13px/1 var(--schrift-kopf); padding: 6px 12px;
}
button.leise:hover, .knopf.leise:hover { background: var(--rot); color: var(--papier); }
button:focus-visible, .knopf:focus-visible, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 2px;
}

/* ── Formulare ────────────────────────────────────────────────────────── */

.formular { display: grid; gap: 20px; }
.zwei { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .zwei { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 6px; }
label { font-size: 13px; font-weight: 700; color: var(--tinte); }
input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--tinte);
  border: 1px solid var(--grau); border-radius: var(--radius);
  background: var(--papier);
}
input::placeholder, textarea::placeholder { color: var(--grau); }
textarea { resize: vertical; min-height: 6rem; }
.pflicht, .opt {
  font: 700 10px/1 var(--schrift-kopf); letter-spacing: .06em;
  text-transform: uppercase; color: var(--rot); margin-left: 6px;
}
.opt { color: var(--grau); }
.hilfe { margin: 0; font-size: 13px; color: var(--gedaempft); }
.jg { font-size: 12px; color: var(--grau); }

.gruppe { border: 1px solid var(--linie); border-radius: var(--radius-gross);
          padding: 18px 20px; margin: 0; }
.gruppe legend { font: 700 14px/1 var(--schrift-kopf); padding: 0 6px;
                 text-transform: uppercase; letter-spacing: .04em; color: var(--rot); }
.kaesten { display: grid; gap: 8px; margin: 12px 0 4px; }
.kaesten label { display: flex; align-items: baseline; gap: 8px; font-weight: 400; font-size: 15px; }
.kaesten label.wahl { align-items: flex-start; }
.kaesten label.wahl strong { font-weight: 700; }
.schalter { display: flex; align-items: flex-start; gap: 10px; }
.schalter input { margin-top: 4px; width: 1.05rem; height: 1.05rem; accent-color: var(--rot); }
.schalter strong { display: block; font-size: 15px; }
.schalter span { font-size: 14px; color: var(--gedaempft); }

/* ── Meldungen ────────────────────────────────────────────────────────── */

.hinweis { font-size: 13px; color: var(--gedaempft); margin: 0; }
.hinweis.gut { color: var(--gut); font-weight: 700; }
.fehler {
  background: var(--rot-flaeche); border-left: 4px solid var(--rot);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px;
  font-size: 14px; color: var(--rot);
}
/* Hervorgehobene Hinweiskästen — Kostenvoranschlag, Regeln, Warnungen. */
.voranschlag {
  background: var(--blau-hell); border-left: 4px solid var(--rot);
  border-radius: var(--radius); padding: 16px 20px; margin: 0;
  font-size: 14px; line-height: 1.5;
}
.voranschlag strong { display: block; font-family: var(--schrift-kopf); font-size: 16px; }

.kennzahlen {
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px;
  margin: 0 0 24px; padding: 16px 20px; background: var(--blau-hell);
  border-radius: var(--radius-gross);
}
.kennzahlen b { font: 700 18px/1 var(--schrift-kopf); }

/* ── Wartebildschirm ──────────────────────────────────────────────────── */

.schritte { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.schritt {
  display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 12px;
  align-items: center; background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 14px 18px;
}
/* ALLE VIER SELEKTOREN SIND AUF `.schritt` EINGEENGT (2026-09-16), und das
   ist kein Aufräumen, sondern ein Fehler, den der Auftraggeber gesehen hat:
   `.marke` und `.was` heissen in der Seitenleiste dasselbe. Das nackte
   `.marke { color: var(--grau) }` von hier färbte den Markennamen
   „agentur junges herz" grau — die Regel daneben setzt Schrift und
   Schreibweise, aber keine Farbe, und Farbe wird vererbt. Gemessen:
   rgb(157,156,156) statt Weiss. */
.schritt .marke { font-size: 16px; color: var(--grau); }
.schritt.running .marke { color: var(--blau); }
.schritt.done .marke { color: var(--gut); }
.schritt.error .marke { color: var(--schlecht); }
.schritt .was { font-weight: 700; }
.schritt .wie { font: 700 11px/1 var(--schrift-kopf); letter-spacing: .08em;
       text-transform: uppercase; color: var(--grau); }
.schritt.running .wie { color: var(--blau); }
#ergebnis { display: grid; gap: 12px; justify-items: start; margin-top: 24px; }

/* ── Reiter (innerhalb eines Bereichs) ────────────────────────────────── */

.reiter { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 24px;
          border-bottom: 1px solid var(--linie); }
.reiter a {
  padding: 8px 14px; text-decoration: none; color: var(--gedaempft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px;
}
.reiter a:hover { color: var(--tinte); }
.reiter a.hier { color: var(--rot); font-weight: 700; border-bottom-color: var(--rot); }

/* ── Zeilenformulare (Projekte eines Mandanten) ───────────────────────── */

.zeilenkopf, .zeilenform {
  display: grid; gap: 8px; align-items: center;
  /* Die letzten beiden Spalten sind FEST, nicht `auto`: Der Kopf hat dort
     zwei leere Zellen, die Zeile zwei Schaltflaechen. Mit `auto` sind die
     Spalten in beiden Zeilen verschieden breit — und die Beschriftungen
     standen sichtbar neben ihren Feldern (gemessen am 2026-09-16). */
  grid-template-columns: 2fr 1.4fr 1fr 7rem 7.5rem;
  padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.zeilenkopf { border-bottom-width: 1px; padding-bottom: 8px;
              font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
              color: var(--grau); font-weight: 700; }
.zeilenform input[type=text] { min-width: 0; padding: 8px 10px; font-size: 14px; }
.zeilenform button { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.zeilenform.still { opacity: .55; }
@media (max-width: 40rem) {
  .zeilenkopf { display: none; }
  .zeilenform { grid-template-columns: 1fr 1fr; }
  .zeilenform input[type=text]:first-of-type { grid-column: 1 / -1; }
}

.nebenform { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* ── Aufwandserfassung und offene Belege ──────────────────────────────── */

.aussage { margin-bottom: 16px; }
.aussage label { display: block; margin-bottom: 4px; font-weight: 400; }
.offenerbeleg {
  border-left: 4px solid var(--warn); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 16px; background: var(--flaeche);
}
.offenerbeleg p { margin: 0 0 6px; }
.offenerbeleg .vorher { color: var(--grau); text-decoration: line-through; }

/* ── Anmeldung: einzige Seite ohne Seitenleiste ───────────────────────── */

.anmeldung {
  min-height: 100vh; background: var(--blau-hell);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.anmeldung .karte {
  width: 100%; max-width: 380px; padding: 40px 36px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.anmeldung img { width: 36px; height: auto; display: block; margin-bottom: 14px; }
.anmeldung h1 { font-size: 28px; text-transform: lowercase; margin-bottom: 6px; }
.anmeldung h1::after { content: none; }
.anmeldung button { width: 100%; }

/* ── Wortlaut: der Prompt, wie er hinausgeht ──────────────────────────────
 *
 * `pre` statt Fliesstext, und das ist keine Kosmetik: Was gesendet wird, ist
 * zeichengenau — Einrückung und Leerzeilen tragen im Prompt Bedeutung. Ein
 * umbrochener Absatz sähe ordentlicher aus und wäre eine andere Zeichenkette
 * als die, um die es geht.
 */
.wortlaut {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 20px 22px;
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--tinte);
  /* Lange Zeilen umbrechen statt die Seite zu schieben; der Kasten scrollt
     für sich, wenn doch etwas zu breit ist (eine lange Adresse etwa). */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto;
  max-height: 34rem; overflow-y: auto; margin: 0;
}

/* Kurze Codewörter in Tabellen brechen nicht um: `---` über zwei Zeilen
   liest sich als „– --" und sagt dann etwas anderes, als dasteht. */
.liste code { white-space: nowrap; }

/* ── Filterzeile und geklemmte Tabellenzellen ─────────────────────────────
 *
 * DIE FILTERZEILE hat ihr eigenes Raster, weil sie kein Raster braucht:
 * Suchfeld, zwei Auswahlfelder, ein Knopf. Vorher lieh sie sich
 * `.zeilenform` aus der Verwaltung — ein Gitter mit festen Spalten für
 * Projektzeilen. Geliehen passte die letzte Spalte nicht, und der Knopf
 * stand 8 px niedriger als die Felder, weil beide verschiedene Polsterungen
 * tragen. `align-items: stretch` gleicht das aus, statt es nachzurechnen.
 */
.filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  margin: 0 0 20px;
}
.filter input[type=text] { flex: 1 1 18rem; min-width: 0; }
.filter select { flex: 0 1 14rem; min-width: 0; }
.filter button { flex: 0 0 auto; }

/* GEKLEMMT STATT GESCHNITTEN: Der volle Text steht im Dokument — kopierbar,
 * über die Browsersuche auffindbar und als `title` beim Darüberfahren
 * lesbar. Sichtbar sind zwei Zeilen; was darüber hinausgeht, blendet der
 * Browser aus, statt dass PHP es wegwirft. */
.klemm {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.liste td .jg { display: block; margin-top: 2px; }
.warnfarbe { color: var(--warn); }

/* ── Hinweis auf schmalen Fenstern (Faden A7, 2026-09-17) ─────────────────
 *
 * DIE SCHWELLE IST DER GANZE ENTWURF. 34 rem (544 px) liegt **unter** den
 * beiden Fällen, die weiter getragen werden — zwei Fenster nebeneinander
 * (je 720 px) und 200 % Vergrösserung (rund 640 px) — und **über** jedem
 * Telefon im Hochformat (390 bis 430 px). Höher angesetzt träfe der Hinweis
 * genau die Leute, die kein Telefon benutzen.
 *
 * Er steht IM FLUSS, nicht darüber: Ein fester Balken nähme dem schmalsten
 * Fenster dauerhaft Höhe weg, und das ist das Gegenteil dessen, was er
 * ausdrücken will.
 */
.schmalhinweis { display: none; }

@media (max-width: 34rem) {
  .schmalhinweis {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--blau-hell); border-bottom: 2px solid var(--blau);
    padding: 12px 16px; font-size: 13px; color: var(--tinte);
  }
  .schmalhinweis p { margin: 0; flex: 1 1 auto; line-height: 1.45; }
  .schmalhinweis .weg {
    flex: 0 0 auto; background: none; border: 0; color: var(--gedaempft);
    font: 700 20px/1 var(--schrift); padding: 0 4px; cursor: pointer;
    min-height: 24px; min-width: 24px;
  }
  .schmalhinweis .weg:hover { color: var(--tinte); background: none; }
}
.gutfarbe { color: var(--gut); }

/* ── Reiter (Tabs) ──────────────────────────────────────────────────────────
   Eingeführt am 2026-09-17: Die Versionsseite war auf sechs Abschnitte
   gewachsen, und das Dokument — das Produkt — stand ganz unten.

   OHNE JAVASCRIPT IST HIER NICHTS AUSGEBLENDET. `reiter.js` setzt `hidden`;
   diese Regel macht es wirksam. Das `!important` ist Absicht und kein
   Faulheitszeichen: `[hidden]` hat Spezifität 0,1,0 und verliert gegen jede
   ID- oder Klassenregel, die `display` setzt — genau daran hing der Fehler
   auf der Warteseite, bei dem der Ergebnisblock zwei Wochen lang zu früh
   sichtbar war. */
.blatt[hidden] { display: none !important; }

.reiter {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 28px 0 0; padding: 0;
  border-bottom: 2px solid var(--linie);
}
.reiter a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  font: 700 14px/1.2 var(--schrift-kopf);
  letter-spacing: .01em;
  color: var(--gedaempft); text-decoration: none;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 3px 3px 0 0;
  margin-bottom: -2px;
}
.reiter a:hover { color: var(--rot); background: var(--rot-flaeche); }

/* Der offene Reiter trägt die Fläche und schliesst die Linie darunter. */
.reiter a[aria-selected="true"] {
  color: var(--rot); background: var(--papier);
  border-color: var(--linie); border-bottom: 2px solid var(--papier);
}

/* Die Zahl am Reiter: wie viele Versionen, wie viele offene Belege. Sie ist
   eine Auskunft, kein Alarm — deshalb gedeckt und nicht rot. */
.reiter .zahl {
  display: inline-block; min-width: 1.5em; padding: 1px 6px;
  font: 700 12px/1.5 var(--schrift-kopf);
  text-align: center; border-radius: 9px;
  background: var(--blau-hell); color: var(--blau);
}
.reiter a[aria-selected="true"] .zahl { background: var(--rot-flaeche); color: var(--rot); }

.blatt { padding-top: 4px; }

/* Das erste Kind eines Blatts braucht keinen zusätzlichen Abstand nach oben —
   die Reiterleiste liefert ihn schon. */
.blatt > .block:first-child,
.blatt > .dokumentlage:first-child { margin-top: 18px; }

@media (max-width: 34rem) {
  .reiter a { padding: 9px 12px; font-size: 13px; }
}

/* ── Erklärung hinter einem Fragezeichen ────────────────────────────────────
   Eingeführt am 2026-09-17: Die Kennzahlen der Bibliothek sind kurz und
   dadurch missverständlich — „1 am Original geprüft" sagt nicht, warum das
   wichtig ist.

   `<details>` statt eines eigenen Aufklappers: mit der Tastatur bedienbar,
   auf dem Telefon antippbar, von Vorlesesoftware verstanden, und es
   funktioniert ohne JavaScript. */
.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.erklaerung { display: inline; position: relative; }

.erklaerung summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px;
  font: 700 11px/1 var(--schrift-kopf);
  color: var(--blau); background: var(--blau-hell);
  border: 1px solid var(--blau-rand); border-radius: 50%;
  cursor: pointer; vertical-align: 1px;
  list-style: none;                      /* Firefox */
}
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung summary::marker { content: ''; }
.erklaerung summary:hover,
.erklaerung[open] summary { color: var(--papier); background: var(--blau); }
.erklaerung summary:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* DER TEXT SCHWEBT, statt die Zeile auseinanderzuschieben. Ein Aufklapper,
   der das Raster der Kennzahlen umbricht, verschiebt beim Öffnen genau die
   Zahl, die man gerade liest. */
.erklaerung .text {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  width: 22rem; max-width: 80vw;
  padding: 10px 13px;
  font: 400 13px/1.5 var(--schrift);
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--blau-rand); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .13);
  text-align: left; white-space: normal;
}
.erklaerung .text p { margin: 0 0 .5em; }
.erklaerung .text p:last-child { margin-bottom: 0; }

/* Am rechten Rand nach links ausrichten, sonst steht der Kasten im Nichts.
   Die Klasse sitzt am umgebenden Element, weil die Erklaerung selbst vom
   Baustein erzeugt wird und die Vorlage sie nicht anfassen kann. */
.erklaerung-links .erklaerung .text { left: auto; right: 0; }

@media (max-width: 34rem) {
  /* Auf schmalen Fenstern schiebt der schwebende Kasten aus dem Bild — dort
     klappt er in den Fluss auf. */
  .erklaerung .text { position: static; width: auto; max-width: none;
                      margin-top: 6px; box-shadow: none; }
}

/* ── Legende unter einer Liste ──────────────────────────────────────────────
   Für Zusätze, die sich über hundert Zeilen wiederholen: Vier Fragezeichen
   je Zeile wären vierhundert. */
.legende { margin: 22px 0 8px; max-width: 52rem; }
.legende > summary {
  font: 700 14px/1.4 var(--schrift-kopf); color: var(--blau);
  cursor: pointer; padding: 6px 0;
}
.legende > summary:hover { color: var(--rot); }
.legende dl { margin: 6px 0 0; padding: 14px 16px;
              background: var(--blau-hell); border-radius: 3px; }
.legende dt { margin: 12px 0 3px; font-size: 14px; }
.legende dt:first-child { margin-top: 0; }
.legende dd { margin: 0 0 0 0; font-size: 14px; line-height: 1.55; color: var(--gedaempft); }

/* ── Formular mit mitlaufender Erläuterung ──────────────────────────────────
   Eingeführt am 2026-09-17: „Was Sie bekommen" stand unter dem Absendeknopf
   und beantwortete die Frage, nachdem die Entscheidung gefallen war. */
.formularlage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 40px;
  align-items: start;
}

/* MITLAUFEND, ABER MIT EIGENEM SCROLLEN ALS RÜCKFALL: Ist der Kasten höher
   als das Fenster, käme man ohne `max-height` an sein Ende nie heran —
   `sticky` friert ihn dann an der Oberkante fest. */
.fakten {
  position: sticky;
  top: 24px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 22px 24px;
  background: var(--blau-hell);
  border: 1px solid var(--blau-rand);
  border-radius: 4px;
}
.fakten h2 {
  margin: 0 0 4px;
  font: 700 17px/1.25 var(--schrift-kopf);
  color: var(--dunkel);
}
.fakten dl { margin: 0; }
.fakten dl > div { padding: 13px 0; border-top: 1px solid var(--blau-rand); }
.fakten dl > div:first-of-type { border-top: none; }
.fakten dt {
  font: 700 14px/1.3 var(--schrift-kopf);
  color: var(--rot);
  margin: 0 0 3px;
}
.fakten dd {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--gedaempft);
}
.fakten dd b { color: var(--tinte); }

/* Unter 62 rem nebeneinander zu stellen hiesse, zwei zu schmale Spalten zu
   bauen. Dann legt sich der Kasten unter das Formular, und mitlaufen muss er
   dort nicht mehr. */
@media (max-width: 62rem) {
  .formularlage { grid-template-columns: 1fr; gap: 24px; }
  .fakten { position: static; max-height: none; }
}