/* KUKANILEA Markdown-Editor — eigenstaendiges Haus-CSS. Editor-Bibliothek: TOAST UI Editor
   (MIT, github.com/nhn/tui.editor, vendorisiertes Stylesheet unter
   assets/lib/toastui-editor/toastui-editor.css, siehe index.html). Dieses Stylesheet deckt
   nur den eigenen Seiten-Rahmen ab (Kopfleiste/Datei-Werkzeugleiste, Statusleiste,
   Legal-Bar) -- die Editor-Oberflaeche selbst (Toolbar, WYSIWYG-/Markdown-Tabs,
   Vorschau-Split) liefert die Bibliothek. System-Font-Stack statt Web-Font
   (Local-First-Policy, keine Netzwerk-Font-Requests). */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f0f1f4;
  color: #1f2430;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── App-Rahmen ─────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Kopfleiste / Datei-Werkzeugleiste ─────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  background: #16324f;
  border-bottom: 1px solid #0e2338;
  flex: 0 0 auto;
}

.brand {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-right: 4px;
  white-space: nowrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.toolbar-group button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: #1f2430;
  font-size: 0.82rem;
  cursor: pointer;
}
.toolbar-group button:hover,
.btn:hover {
  background: #eef1f6;
}
.toolbar-group button:focus-visible,
.btn:focus-visible {
  outline: 2px solid #7fb3d5;
  outline-offset: 1px;
}

.btn-file {
  position: relative;
}

/* ── Arbeitsbereich: TOAST UI Editor fuellt den restlichen Platz ───────── */

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

#editor-root {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* TOAST UI Editor erwartet ein Container-Element mit definierter Hoehe (height:"100%"
   Option) -- der eigentliche Editor-Wrapper der Bibliothek muss diese Hoehe ausfuellen. */
#editor-root .toastui-editor-defaultUI {
  height: 100%;
}

/* ── Statusleiste ───────────────────────────────────────────────────────── */

#status-bar {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 3px 12px;
  font-size: 0.76rem;
  color: #4b5563;
  background: #e7e9ee;
  border-top: 1px solid #d3d7de;
}

/* ── Legal-Bar (Kanon: alle Shard-Tools) ───────────────────────────────── */

#kukanilea-legal-bar {
  position: fixed !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 9999 !important;
  display: flex !important;
  gap: 10px !important;
  padding: 4px 8px !important;
  background: rgba(20, 20, 20, 0.72) !important;
  border-radius: 4px !important;
  font: 11px/1.4 system-ui, sans-serif !important;
  pointer-events: auto !important;
}
#kukanilea-legal-bar a {
  color: #e5e7eb !important;
  text-decoration: none !important;
  opacity: 0.85;
}
#kukanilea-legal-bar a:hover,
#kukanilea-legal-bar a:focus {
  opacity: 1;
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  #kukanilea-legal-bar {
    right: 4px !important;
    bottom: 4px !important;
    font-size: 10px !important;
  }
}

/* ── Druckansicht: A4-Vorschau, Browserdruck, PDF ────────────────────────────
   Warum eine eigene Ebene und keine dritte Spalte neben dem Editor: der
   Arbeitsplatz beim Schreiben ist der Editor, der beim Pruefen des Ausdrucks
   das Blatt. Beides gleichzeitig haette auf 375 px Breite keines von beidem
   brauchbar gezeigt.

   Die Vorschau rechnet in Millimetern -- CSS setzt 1 Zoll = 96 px = 25,4 mm,
   ein A4-Blatt ist am Bildschirm damit so gross wie auf dem Papier (bei
   --md-zoom: 1). --md-zoom ist der Bildschirmfaktor ("Breite anpassen"); er
   wirkt nur am Bildschirm, im Druck steht er auf 1, sonst waere die Vorschau
   nicht mehr das Abbild des Ausdrucks.

   Die Seitengroesse selbst (@page { size: … }) setzt markdown-druckansicht.js
   zur Laufzeit in ein eigenes <style>-Element: ein statisches Stylesheet kann
   nicht wissen, ob A4 hoch, A4 quer oder Letter gewaehlt ist. */

.md-druck {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #eceff3;
  overflow: hidden;
  --md-zoom: 1;
}
/* Ohne diese Zeile gewinnt `display: flex` gegen die Vorgabe des Browsers fuer
   [hidden] -- die geschlossene Ebene bliebe sichtbar. */
.md-druck[hidden] { display: none; }

body.md-druck-offen { overflow: hidden; }
/* Die Legal-Bar liegt per Kanon auf z-index 9999 und klebte sonst ueber dem
   Blatt. Waehrend die Ebene offen ist, gehoert sie zur verdeckten Oberflaeche. */
body.md-druck-offen #kukanilea-legal-bar { display: none !important; }

.md-druck-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #d3d7de;
  flex: 0 0 auto;
}
.md-druck-ueberschrift { margin: 0; font-size: 1.05rem; }
.md-druck-status {
  margin: 0;
  font-size: 0.8rem;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}
.md-druck-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.md-druck-knopf {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c3c9d2;
  border-radius: 6px;
  background: #fff;
  color: #1f2430;
  font-size: 0.85rem;
  cursor: pointer;
}
.md-druck-knopf:hover { background: #eef1f6; }
.md-druck-knopf:focus-visible { outline: 2px solid #16324f; outline-offset: 1px; }
.md-druck-knopf-haupt { background: #16324f; border-color: #16324f; color: #fff; }
.md-druck-knopf-haupt:hover { background: #1d456d; }

.md-druck-koerper { display: flex; flex: 1 1 auto; min-height: 0; }

.md-druck-einstellungen {
  flex: 0 0 282px;
  overflow-y: auto;
  padding: 14px 16px 32px;
  background: #fff;
  border-right: 1px solid #d3d7de;
  text-align: left;
}
.md-druck-feld { display: block; margin: 0 0 12px; font-size: 0.81rem; color: #3a4350; }
.md-druck-feld-text { display: block; margin-bottom: 4px; font-weight: 600; }
.md-druck-feld select,
.md-druck-feld input[type="text"] {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #c3c9d2;
  border-radius: 6px;
  background: #fff;
  color: #1f2430;
  font-family: inherit;
  font-size: 0.81rem;
}
.md-druck-feld select:focus-visible,
.md-druck-feld input[type="text"]:focus-visible {
  outline: 2px solid #16324f;
  outline-offset: 1px;
}
.md-druck-feld-kaestchen { display: flex; align-items: center; gap: 8px; }
.md-druck-feld-kaestchen .md-druck-feld-text { margin: 0; font-weight: 400; }
.md-druck-feld-kaestchen input { width: 16px; height: 16px; margin: 0; }

.md-druck-hinweis { margin: 18px 0 0; font-size: 0.74rem; line-height: 1.55; color: #4b5563; }
.md-druck-hinweis code {
  padding: 1px 4px;
  background: #e7e9ee;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}
.md-druck-warnung {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdf3d8;
  color: #6b4c07;
  font-size: 0.76rem;
  line-height: 1.5;
}
.md-druck-warnung[hidden] { display: none; }

.md-druck-buehne { flex: 1 1 auto; overflow: auto; padding: 16px 4px 40px; text-align: center; }
.md-druck-buehne:focus-visible { outline: 2px solid #16324f; outline-offset: -2px; }

/* Der Markentext ist erzeugter Inhalt, kein Textknoten -- siehe die Begruendung
   in markdown-druckansicht.js (Funktion `wasserzeichen`). Der Wert kommt aus
   dem Vertrag (--kuk-wm-text, gesetzt aus window.KukWebtoolCommon.WATERMARK);
   ein Literal an dieser Stelle waere eine zweite Quelle fuer denselben Namen. */
.md-blatt .kuk-wm::after { content: var(--kuk-wm-text, ""); }

/* Die Huelle traegt die Flaeche, die das skalierte Blatt am Bildschirm belegt --
   ein transform aendert die Layoutgroesse nicht, ohne sie bliebe bei kleinem
   Zoom eine Luecke in Originalgroesse stehen. */
.md-druck-huelle {
  width: calc(var(--md-seite-breite) * var(--md-zoom));
  height: calc(var(--md-seite-hoehe) * var(--md-zoom));
  margin: 0 auto 16px;
}

.md-blatt {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: var(--md-seite-breite);
  height: var(--md-seite-hoehe);
  padding: var(--md-seite-rand);
  background: #fff;
  color: #14181d;
  text-align: left;
  display: flex;
  flex-direction: column;
  transform: scale(var(--md-zoom));
  transform-origin: top left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 10px 30px -18px rgba(15, 23, 42, 0.5);
}

/* Ein Blatt, auf dem ein zu hohes Element abgeschnitten wurde. Nur am
   Bildschirm markiert: im Ausdruck waere die Markierung selbst Inhalt. */
.md-blatt-gekuerzt { box-shadow: 0 0 0 2px #d97706, 0 10px 30px -18px rgba(15, 23, 42, 0.5); }

.md-blatt-kopf,
.md-blatt-fuss {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 8pt;
  line-height: 1.3;
  color: #3d4650;
}
/* Feste Hoehe, nicht inhaltsabhaengig. Die Seitenzahl steht erst fest, wenn
   alle Blaetter gebaut sind -- waechst die Fusszeile dann noch um ihre
   Textzeile, schrumpft der Inhaltskasten NACH der Aufteilung und schneidet ab.
   Genau das war am 2026-09-03 messbar: 4 bis 8 px Ueberlauf auf jeder Seite
   ausser der letzten. */
.md-blatt-kopf {
  height: 7mm; padding-bottom: 1.5mm; margin-bottom: 3mm; border-bottom: 0.2mm solid #b9c2cc;
}
.md-blatt-fuss {
  height: 7mm; padding-top: 1.5mm; margin-top: 3mm; border-top: 0.2mm solid #b9c2cc;
  justify-content: flex-end;
}
.md-blatt-fuss[hidden] { display: none; }
.md-blatt-kopf-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-blatt-kopf-datum { margin-left: auto; flex: 0 0 auto; }

/* Der Inhaltskasten hat eine feste Hoehe (Flex-Rest) und schneidet ab. Genau
   daran misst die Seitenaufteilung: scrollHeight > clientHeight heisst "passt
   nicht mehr". `overflow: hidden` erzeugt zugleich einen eigenen
   Block-Formatierungskontext -- ohne ihn wuerde der Aussenabstand des ersten
   Absatzes aus dem Kasten herauslaufen und die Messung verfaelschen. */
.md-blatt-inhalt {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Auf schmalen Geraeten wird aus den zwei Spalten eine Spalte -- und aus zwei
   getrennten Scrollbereichen einer. Zwei ineinander liegende Scrollflaechen
   auf einem Telefon treffen zu wollen, ist die haeufigste Bedienfalle solcher
   Ebenen; hier scrollt stattdessen der ganze Koerper. */
@media (max-width: 860px) {
  .md-druck-koerper { flex-direction: column; overflow: auto; }
  .md-druck-einstellungen {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
    padding-bottom: 18px;
    border-right: none;
    border-bottom: 1px solid #d3d7de;
  }
  .md-druck-aktionen { margin-left: 0; width: 100%; }
  .md-druck-aktionen .md-druck-knopf { flex: 1 1 auto; }
  .md-druck-buehne { overflow: visible; padding: 12px 2px 32px; }
}

/* ── Druck (Document-Output-Standard, Abschnitt 5) ───────────────────────────
   Gedruckt wird das Blatt, nicht die Anwendung. Jedes .md-blatt ist ein eigenes
   Element mit genau den Papiermassen und wird deshalb genau eine Druckseite;
   der Rand von @page steht auf 0, weil das Blatt seinen Rand selbst traegt.
   Daraus folgt die Zusage des Standards: die Seitenzahl der Vorschau ist die
   Seitenzahl des PDF. Umbrueche mit break-*, nicht mit page-break-*.

   Die Regeln haengen an body.md-druck-offen: ohne die Ebene gibt es kein Blatt,
   und ein `body > *:not(#md-druckansicht) { display: none }` ohne diese
   Bedingung wuerde ein Strg+P im Editor auf eine leere Seite drucken. */
@media print {
  html, body { background: #fff; height: auto; overflow: visible; }
  body.md-druck-offen > *:not(#md-druckansicht) { display: none !important; }
  body.md-druck-offen .md-druck {
    position: static;
    inset: auto;
    display: block;
    background: #fff;
    overflow: visible;
    --md-zoom: 1;
  }
  body.md-druck-offen .md-druck-leiste,
  body.md-druck-offen .md-druck-einstellungen { display: none !important; }
  body.md-druck-offen .md-druck-koerper { display: block; }
  body.md-druck-offen .md-druck-buehne { overflow: visible; padding: 0; }
  body.md-druck-offen .md-druck-huelle { width: auto; height: auto; margin: 0; }
  body.md-druck-offen .md-blatt {
    transform: none;
    box-shadow: none;
    break-after: page;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.md-druck-offen .md-druck-huelle:last-child .md-blatt { break-after: auto; }

  /* Sicherheitsnetz: die Aufteilung ist bereits gerechnet, aber ein abweichend
     rundender Renderer darf eine Tabellenzeile trotzdem nicht halbieren. */
  body.md-druck-offen .md-blatt tr,
  body.md-druck-offen .md-blatt-kopf,
  body.md-druck-offen .md-blatt-fuss { break-inside: avoid; }

  /* Herkunftsmarke im Druck: hier bleibt die Bildschirmlage richtig. Das
     erzeugte Partial (Markerblock unten) setzt `position: fixed` und verankert
     die Ecken an der Seitenbox -- die richtige Wahl fuer ein fliessendes
     Dokument ueber mehrere Druckseiten. Dieses Werkzeug ist das nicht: jedes
     .md-blatt IST bereits eine Druckseite, absolut positionierte Marken
     erscheinen also ohnehin auf jeder. Mit `fixed` und @page-Rand 0 laegen sie
     auf der Papierkante. Dieselbe Lage und dieselbe Loesung wie bei
     kukanilea-brief (dort .a4-page). Die Werte bleiben die des Vertrags
     (--kuk-wm-* aus window.KukWebtoolCommon.WATERMARK). */
  .md-blatt .kuk-wm { position: absolute; }
  .md-blatt .kuk-wm-oben-links { left: var(--kuk-wm-rand); right: auto; top: var(--kuk-wm-oben); }
  .md-blatt .kuk-wm-oben-rechts { right: var(--kuk-wm-rand); left: auto; top: var(--kuk-wm-oben); }
  .md-blatt .kuk-wm-unten-links { left: var(--kuk-wm-rand); right: auto; bottom: var(--kuk-wm-unten); }
  .md-blatt .kuk-wm-unten-rechts { right: var(--kuk-wm-rand); left: auto; bottom: var(--kuk-wm-unten); }
}

/* KUK-WASSERZEICHEN:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN.
   Quelle: shared/kukanilea-webtool-common/webtool-common.js (Objekt WATERMARK),
   verteilt von scripts/ops/sync_webtool_common.py, geprueft von
   check_webtool_common_sync.py. Werte: docs/webtools/document-output-standard.md
   Abschnitt 6 -- "Created by kukanilea.de" oben-links und "kukanilea.de" unten-rechts, 6pt, 25 %,
   Slate-Grau (druckstabil, seit 2026-09-26).

   Die Werte des Vertrags stehen als Custom Properties in :root. Sie sind der
   Exportweg des Partials: ein Verbraucher, der eine Marke anders verankern
   muss, liest --kuk-wm-rand/--kuk-wm-oben/--kuk-wm-unten, statt die
   Grundlinien-Umrechnung ein zweites Mal nachzubilden.

   Auf dem Bildschirm liegen die Marken im Vorschaublatt (position:absolute im
   Element mit position:relative). Im Druck ist das falsch: ein absolut
   positioniertes Kind des Blattes erscheint nur auf Seite 1 -- genau der
   Zustand bis zum 2026-09-02. position:fixed bezieht sich im Seitenmodell auf
   die SEITENBOX und wird deshalb auf jeder Druckseite wiederholt.

   Im Druck sitzen die Ecken an den Ecken des Satzspiegels statt 36pt vom
   Papierrand: die Seitenraender bestimmt dort @page, nicht dieses Partial.
   Das ist die sichere Randzone des Seitenmodells (Abschnitt 6, "Ecken").

   Das gilt fuer FLIESSENDE Dokumente -- ein Inhalt, den der Browser selbst auf
   Druckseiten verteilt. Werkzeuge mit EINEM DOM-Element JE SEITE (Brief,
   Begleitdokument) brauchen das Gegenteil: dort ist jedes Blatt bereits eine
   Druckseite, absolute Marken erscheinen also ohnehin auf jeder, und `fixed`
   laege bei @page-Rand 0 auf der Papierkante, also in der nicht druckbaren
   Zone. Fuer sie traegt das Seitenelement die Klasse `kuk-wm-seite`; die
   Variante darunter haelt die Marken im Blatt und in der sicheren Randzone.
   Eine eigene Zahlenmenge braucht dafuer niemand mehr. */
:root {
  --kuk-wm-rand: 36pt;
  --kuk-wm-oben: 20pt;
  --kuk-wm-unten: 19pt;
  --kuk-wm-groesse: 6pt;
  --kuk-wm-deckkraft: 0.25;
  --kuk-wm-farbe: #64748b;
}
.kuk-wm {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-size: var(--kuk-wm-groesse);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kuk-wm-farbe);
  opacity: var(--kuk-wm-deckkraft);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.kuk-wm-oben-links { left: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
.kuk-wm-oben-rechts { right: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
.kuk-wm-mitte { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kuk-wm-unten-links { left: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }
.kuk-wm-unten-rechts { right: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }

@media print {
  .kuk-wm { position: fixed; }
  .kuk-wm-oben-links { left: 0; top: 0; }
  .kuk-wm-oben-rechts { right: 0; top: 0; }
  .kuk-wm-unten-links { left: 0; bottom: 0; }
  .kuk-wm-unten-rechts { right: 0; bottom: 0; }

  /* Seite je Element: das Blatt IST die Druckseite. */
  .kuk-wm-seite .kuk-wm { position: absolute; }
  .kuk-wm-seite .kuk-wm-oben-links { left: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
  .kuk-wm-seite .kuk-wm-oben-rechts { right: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
  .kuk-wm-seite .kuk-wm-unten-links { left: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }
  .kuk-wm-seite .kuk-wm-unten-rechts { right: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }
}
/* KUK-WASSERZEICHEN:ENDE */

/* KUK-ZIELGROESSEN:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN.
   Quelle: scripts/ops/sync_webtool_common.py
   Zielgroessen fuer Pointer und Touch: WCAG 2.2 SC 2.5.8 verlangt 24x24,
   das Produktziel sind rund 44 Pixel fuer haeufig benutzte Schaltflaechen. */
.btn-sm,
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vz-radio-group label,
.chip-group > label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Die Vorlagenleiste auf schmalen Bildschirmen.
   Gemessen am 2026-09-16 auf `prozent` bei 390 Pixeln: die Leiste bricht auf
   vier Zeilen um und wird 200 Pixel hoch -- ein Viertel des Bildschirms, VOR
   dem ersten Eingabefeld. Das erste Feld begann dadurch erst nach 1,12
   Bildschirmhoehen; der Mensch musste scrollen, bevor er die Aufgabe
   ueberhaupt sah. Die Hoehe kommt nicht von der Schrift, sondern von der
   44-Pixel-Zielgroesse oben: sie multipliziert sich mit jeder Umbruchzeile.

   Zwei Varianten gemessen, bevor eine gebaut wurde:

       Ausgang           200 px    erstes Feld bei 1,12x
       eine Zeile         44 px    erstes Feld bei 0,93x
       Leiste ausgeblendet 0 px    erstes Feld bei 0,86x

   Das Ausblenden bringt 0,07 Bildschirme mehr und kostet die Vorlagen ganz.
   Eine Zeile bringt das Feld in den ersten Viewport und laesst sie stehen --
   fuer wiederkehrende Nutzer sind sie echte Beschleuniger, kein Beiwerk.

   Der Tastaturweg traegt ohne Zutun: die Knoepfe sind fokussierbar, und der
   Browser scrollt sie beim Tabben in den Blick (gemessen: 480 Pixel). Anders
   als bei den breiten Tabellen, deren Inhalt NICHT fokussierbar ist und die
   deshalb einen eigenen Tabstopp brauchten, waere hier ein Handler Ueberbau.

   Nur bis 600 Pixel. Wo Platz ist, bleiben die Vorlagen vollstaendig
   sichtbar -- dieselbe Funktion, andere Darstellung. */
@media (max-width: 600px) {
  .preset-bar { flex-wrap: nowrap; overflow-x: auto; }
  .preset-bar > * { flex: none; }
}

/* Die Fusszeilen-Navigation.
   Am 2026-09-16 ueber vier Archetypen gemessen: "Impressum", "Datenschutz"
   und "KUKANILEA Buerosoftware" sind 20 Pixel hoch bei `padding: 0`, und sie
   stehen untereinander so dicht, dass der 24-Pixel-Kreis des Erfolgs-
   kriteriums den Nachbarn beruehrt.
   Damit greift KEINE der beiden Ausnahmen von SC 2.5.8: Spacing nicht, weil
   die Kreise sich schneiden -- und Inline nicht, weil `nav.ft-links` eine
   Navigation ist und kein Satz. Der Kommentar oben nimmt Inline-Links im
   Fliesstext bewusst aus; diese hier sind keine.
   Drei Werkzeuge von vieren trugen den Befund, das vierte nur deshalb nicht,
   weil seine Fusszeile weiter auseinanderstand. Ein gemeinsamer Owner, ein
   Fix: vier Pixel Innenabstand machen aus 20 genau 24, ohne dass sich die
   Schrift oder das Bild der Seite aendert. */
.ft-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Waagerechtes Scrollen im Hauptweg.
   Ein Grid-Kind traegt von sich aus `min-width: auto` und kann deshalb nicht
   unter die Mindestbreite seines Inhalts schrumpfen. Eine einzige lange
   Auswahloption genuegt, um die ganze Spalte breiter zu machen als den
   Bildschirm -- gemessen am 2026-09-12 auf fristen.kukanilea.de: 421 Pixel
   Scrollbreite bei 390 Pixeln Viewport, verursacht von einem <select>, dessen
   breiteste Option 409 Pixel misst. `min-width: 0` gibt dem Kind das
   Schrumpfen zurueck; die Option bricht dann in der Liste um, statt die Seite
   zu verschieben. */
.tool-layout > *,
.tool-card-stack > *,
.form-grid > *,
.vz-form > *,
.pp-form > *,
/* Und das Kind selbst, statt jeden Container einzeln aufzuzaehlen.
   Am 2026-09-12 gemessen: acht Werkzeuge scrollten bei 390 Pixeln waagerecht,
   und jedes hatte seinen EIGENEN Grid-Container -- eg-form, es-form, gh-grid,
   kz-form, ab-grid. Das nicht schrumpfende Kind hiess aber ueberall gleich.
   Wer die Container aufzaehlt, vergisst den naechsten; wer das Kind nimmt,
   erwischt auch den, den es noch nicht gibt. */
.form-field,
/* Und dieselbe Lehre ein zweites Mal, an einem anderen Kind.
   Am 2026-09-16 scrollte fahrtenbuch.kukanilea.de bei 320 Pixeln waagerecht:
   drei `.tool-card` waren 363 Pixel breit und trugen `min-width: auto`. Die
   Regel darueber zaehlt Container auf -- `.tool-layout`, `.tool-card-stack`,
   `.form-grid` --, und der Grid-Container dieser Karten war keiner davon.
   Genau der Fall, den der Kommentar daneben vorhergesagt hat: wer die
   Container aufzaehlt, vergisst den naechsten. `.tool-card` ist die
   durchgehende Klasse in allen Werkzeugen. */
.tool-card {
  min-width: 0;
}

/* Ein Schieberegler in einer Flex-Zeile hat dasselbe Problem aus derselben
   Ursache. Auf kfz-steuer.kukanilea.de steht neben ihm ein Zahlenfeld, das
   auf schmalen Schirmen ABSICHTLICH breiter wird, damit es die 44 Pixel
   Zielmass erreicht -- der Regler daneben konnte aber nicht nachgeben und
   schob die Seite auf 400 Pixel. Beide Anforderungen vertragen sich, sobald
   der Regler schrumpfen darf. */
.slider-row input[type="range"] {
  min-width: 0;
}

/* Deutsche Komposita in Ueberschriften.
   "Weihnachtsgeld-/Urlaubsgeld-Rechner" bietet dem Browser keine
   Umbruchstelle: nach einem Bindestrich, auf den ein Schraegstrich folgt,
   wird nicht getrennt. Das Wort war 398 Pixel breit in einer 350 Pixel
   breiten Ueberschrift. Diese Regel greift nur, wenn ein Wort sonst gar
   nicht passt -- an vier Kontrollwerkzeugen gemessen blieb die Hoehe der
   Ueberschrift auf das Pixel gleich, und auch beim Anlassfall kam keine
   Zeile hinzu. */
h1, h2, h3 {
  overflow-wrap: break-word;
}

/* Kontrollkaestchen und Radiofelder.
   Gemessen am 2026-09-12 ueber 242 Werkzeuge bei 390 Pixeln Breite: 73 trugen
   Ziele unter 24 CSS-Pixeln, und 103 davon waren Kontrollkaestchen oder
   Radiofelder. Gezaehlt wurde bereits das GROESSTE Ziel -- Element,
   umschliessendes Label oder label[for] -- diese blieben trotzdem darunter.
   Ein Browser zeichnet sie von sich aus mit ungefaehr dreizehn Pixeln; auf
   dem Telefon ist das mit dem Daumen nicht sicher zu treffen. WCAG 2.2
   SC 2.5.8 nennt 24 x 24 als Untergrenze. */
input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

/* Und die uebrigen Bedienelemente auf dieselbe Untergrenze. In den meisten
   Werkzeugen sind sie ohnehin um die 39 Pixel hoch -- das hebt nur die
   Ausreisser, etwa die 21 Pixel hohen Felder des SEPA-Formulars. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="range"],
select,
textarea {
  min-height: 24px;
}

/* Das Dateifeld schiebt die Seite waagerecht, und zwar aus einem Grund, den
   man ihm nicht ansieht: ein `input[type="file"]` traegt `white-space: pre`.
   Seine Mindestbreite ist damit der Text "Datei auswaehlen | Keine
   ausgewaehlt", der nicht umbrechen darf -- rund 320 Pixel, unabhaengig davon,
   wieviel Platz da ist.
   Am 2026-09-16 auf fahrtenbuch.kukanilea.de gemessen: das Sicherungsfeld war
   321 Pixel breit in einem 320 Pixel breiten Fenster und schob das ganze
   Dokument auf 383 Pixel. Derselbe Fehler hatte kurz zuvor die PDF-Werkstatt
   getroffen; 95 index.html tragen Dateifelder.
   `min-width: 0` allein genuegt nicht -- die Mindestbreite kommt aus dem
   Inhalt, nicht aus der Eigenschaft. */
input[type="file"] {
  max-width: 100%;
  min-width: 0;
}

/* Aufklapper sind Bedienelemente, keine Ueberschriften.
   Am 2026-09-16 auf elterngeld.kukanilea.de bei 390 und 430 Pixeln gemessen:
   die FAQ-Zeilen waren 23 Pixel hoch -- einen Pixel unter der Grenze des
   WCAG 2.2 SC 2.5.8. Bei 320 und 360 Pixeln fiel es nicht auf, weil der Text
   dort umbricht und die Zeile dadurch hoeher wird; genau deshalb ist so ein
   Fehler ohne Messung an mehreren Breiten unsichtbar.
   Die Inline-Ausnahme des Erfolgskriteriums greift hier NICHT: ein <summary>
   ist ein eigenes Bedienelement, kein Verweis in einem Satz.
   Nur `min-height`, bewusst ohne `display: flex`: sobald `display` gesetzt
   wird, verschwindet die Aufklappmarkierung des Browsers -- und die zeichnen
   nicht alle Werkzeuge selbst nach. Fuer das Zielmass genuegt die Hoehe. */
summary {
  min-height: 24px;
}
/* KUK-ZIELGROESSEN:ENDE */

/* KUK-SHELL:CSS:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN.
   Owner: scripts/ops/sync_webtool_shell.py

   `.tool-weiter` ist die kontextuelle Produktnavigation, die beim Umbau
   aus dem Footer geloest wurde. Sie sieht dem Footer bewusst aehnlich --
   sie steht an derselben Stelle der Seite --, ist aber ein eigener
   Bereich mit eigenem zugaenglichen Namen.

   Sie faellt weg, wenn sie leer ist: ein Werkzeug ohne verwandte
   Werkzeuge bekommt keine leere Leiste. */
.tool-weiter {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 40px;
}
.tool-weiter + .site-footer { margin-top: 20px; }
.tool-weiter:empty { display: none; }
.weiter-row {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: baseline;
  font-size: 13px; color: var(--ink-4);
}

/* ── Volle Fensterbreite fuer Kopf und Fuss ──────────────────────────
   `.container` zentriert auf `--maxw` und setzt 20 px Rand. Fuer den
   Seiteninhalt ist das richtig -- eine Textspalte ueber 1600 px waere
   unlesbar. Fuer die Shell ist es falsch: eine App-Bar, die in der Mitte
   schwebt, sieht aus wie ein Seitenkopf, nicht wie die Leiste einer
   Anwendung. Auf 1440 px begann die Marke erst bei rund 300 px.

   Kopf und Fuss laufen deshalb ueber die volle Breite, und ihr Rand
   waechst stufenlos mit dem Fenster statt in Sprüngen: `clamp` geht von
   14 px auf schmalen Geraeten bis 48 px auf sehr breiten. Der Inhalt
   darunter behaelt seine zentrierte Spalte. */
.site-header > .container,
.site-header .header-lokal > .container,
.site-footer > .container,
.tool-weiter > .container {
  max-width: none;
  width: 100%;
  padding-inline: clamp(14px, 2.4vw, 48px);
}

/* ── App-Bar ─────────────────────────────────────────────────────────
   Eine Zeile, und sie bleibt eine Zeile. Der Werkzeugname darf kuerzen,
   die Marke nicht verschwinden, und der Knopf nicht umbrechen. */
.header-row { flex-wrap: nowrap; min-height: 56px; }
.brand { flex: 0 0 auto; }
.kuk-trenner {
  flex: 0 0 auto; width: 1px; height: 22px;
  background: currentColor; opacity: .25; margin: 0 4px;
}
/* Der Werkzeugname darf kuerzen, aber erst spaet: er ist die Antwort auf
   "wo bin ich". Deshalb `flex: 1 1 auto` erst NACH einer Mindestbreite --
   und keine Navigation mehr daneben, die ihn verdraengen koennte. */
.kuk-kontext {
  flex: 1 1 auto; min-width: 6ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; color: inherit; font-weight: 600;
}
.kuk-kontext:hover { text-decoration: underline; }
.header-actions { flex: 0 0 auto; }

/* Die lokale Ebene einer Werkstatt: eigene Zeile unter der App-Bar,
   nicht darin. Sie existiert nur, wo es sie gibt -- ein Rechner bekommt
   sie nicht. */
.header-lokal {
  border-top: 1px solid var(--line);
  background: var(--white, #fff);
}
.header-lokal .site-nav {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 8px 0; font-size: 14px;
}
.kuk-tools {
  font: inherit; font-size: 14px; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 8px;
  padding: 7px 14px; min-height: 40px; cursor: pointer;
}
.kuk-tools:hover { border-color: var(--blue); color: var(--blue); }
@media (pointer: coarse) { .kuk-tools { min-height: 44px; } }

/* Unterhalb des gemessenen Umbruchpunkts verlaesst die
   Werkstattnavigation den Kopf. Sie wird nicht versteckt -- `kuk-shell.js`
   verschiebt den echten Knoten in den Launcher. Diese Regel ist nur die
   Ruecklage fuer den Fall, dass kein JavaScript laeuft: dann bleibt sie
   sichtbar und bricht um. Ein umgebrochener Kopf ist haesslich; eine
   verschwundene Navigation waere ein Verlust. */
@media (max-width: 840px) {
  .header-lokal { display: none; }
}
.kuk-launcher .site-nav {
  display: flex; flex-direction: column; gap: 2px;
}

/* ── Launcher ────────────────────────────────────────────────────────
   Auf schmalen Breiten ein Blatt am unteren Rand -- dort ist der Daumen.
   Auf breiten ein Popover unter dem Knopf. Dieselbe Information, andere
   Komposition. */
.kuk-launcher {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 32, .38);
  display: flex; align-items: flex-end; justify-content: center;
}
.kuk-launcher[hidden] { display: none; }
.kuk-launcher-blatt {
  width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--white, #fff);
  border-radius: 16px 16px 0 0;
  padding: 8px 18px 24px;
  box-shadow: 0 -8px 32px rgba(16, 24, 32, .18);
}
.kuk-launcher-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 4px;
}
.kuk-launcher-titel { font-weight: 700; }
.kuk-launcher-zu {
  font: inherit; font-size: 24px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; color: inherit;
}
.kuk-launcher-bereich { padding: 8px 0; }
.kuk-launcher-bereich[hidden] { display: none; }
.kuk-launcher-label {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
}
.kuk-launcher-ziel, .kuk-launcher .site-nav a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 0; min-height: 44px; justify-content: center;
  text-decoration: none; color: inherit;
}
.kuk-launcher-ziel:hover, .kuk-launcher .site-nav a:hover {
  color: var(--blue);
}
.kuk-launcher-hinweis { font-size: 12px; color: var(--ink-4); }
.kuk-launcher-offen { overflow: hidden; }

@media (min-width: 841px) {
  /* Das Popover steht buendig unter dem Knopf -- also am selben
     fliessenden Rand wie die App-Bar darueber. */
  .kuk-launcher {
    background: transparent; inset: 0 0 auto auto;
    padding: 8px clamp(14px, 2.4vw, 48px) 0; justify-content: flex-end;
  }
  .kuk-launcher-blatt {
    width: min(360px, calc(100vw - 36px));
    border-radius: 12px; margin-top: 56px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(16, 24, 32, .16);
  }
}

/* ── Der Kopf tritt beim Lesen zurueck ───────────────────────────────
   Nur auf schmalen Breiten: dort kostet ein dauerhaft klebender Kopf
   68 von 844 Pixeln, also acht Prozent der Hoehe, waehrend jemand
   arbeitet. Verschoben wird mit `transform` -- der Kopf bleibt im
   Fluss, und der Inhalt darunter springt nicht.

   `kuk-kopf-weg` setzt `kuk-shell.js`; ohne JavaScript bleibt der Kopf
   stehen, wie er es immer getan hat. */
@media (max-width: 840px) {
  .site-header { transition: transform .22s ease; will-change: transform; }
  .kuk-kopf-weg .site-header { transform: translateY(-100%); }
}
/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Fahrt --
   aber er bekommt ihn: der Platzgewinn ist kein Effekt, sondern der
   Zweck. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* Ein klebender Kopf verdeckt jedes Sprungziel.
   Der Skip-Link fuehrt zu `#main`, Inhaltsverzeichnisse fuehren zu
   Abschnitten -- landet das Ziel unter der App-Bar, ist der Fokus zwar
   gesetzt, aber nicht zu sehen. W3C nennt Scroll-Padding ausdruecklich
   als Technik dagegen. Der Wert deckt App-Bar und lokale Ebene ab. */
html { scroll-padding-top: 112px; }
@media (max-width: 840px) {
  html { scroll-padding-top: 76px; }
}

/* Der Skip-Link ist im Ruhezustand nicht zu sehen und im Tastaturfokus
   deutlich -- W3C G1. Er darf dabei nicht unter der App-Bar liegen. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 70;
  background: var(--white, #fff); color: inherit;
  border: 2px solid currentColor; border-radius: 8px;
  padding: 10px 16px; text-decoration: none;
  transition: top .12s ease-out;
}
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}
/* Die Zielgroesse gilt, wo grob gezeigt wird -- hier stehen Links eng
   beieinander, und ein Fehlgriff fuehrt auf ein fremdes Werkzeug. */
@media (pointer: coarse) {
  .weiter-row .ft-links a,
  .site-footer .ft-links a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}
/* KUK-SHELL:CSS:ENDE */