/* KUKANILEA Webtools — Vertragsvorlagen-Hub (Cluster-Merge 7: Mietvertrag+Arbeitsvertrag+
   Untermietvertrag+Vollmacht). Eigenständige Subdomain, eigenes Mini-Design-System
   (Kanon-Tokens 1:1 aus kukanilea-fahrtenbuch/styles.css übernommen, nicht importiert). */

:root {
  color-scheme: light;
  /* Light: reines Weiss als Grund, Petrol als Akzent. Flaechen (Karten, Felder) sind ebenfalls
     weiss und tragen eine Kante statt einer Toenung -- Grau kommt nur als Sekundaerflaeche vor. */
  --cream: #ffffff;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --ink-3: #475569;   /* #64748b erreicht auf #f4f6f9 nur 4,4:1; #475569 haelt 7:1 */
  --ink-4: #5a6678;
  --line: rgba(15, 23, 42, .09);
  --line-2: #cbd5e1;
  --white: #ffffff;   /* Flaeche: Karten, Felder */
  --paper: #ffffff;   /* Seitengrund */
  --paper-2: #f4f6f9; /* Sekundaerflaeche */
  --blue: #0f766e;
  --blue-2: #115e59;
  --blue-soft: #ccece7;
  --blue-tint: #e6f4f1;
  --auf-akzent: #ffffff; /* Schrift auf --blue-Flaechen */
  --green: #18553a;
  --green-soft: #e4f1e9;
  --warn-ink: #97491a;
  --warn-soft: #fde9d4;
  --rot: #b42318;
  --rot-soft: #fee4e2;

  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 30px -10px rgba(0,0,0,.05);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", "IBM Plex Mono", monospace;
  --maxw: 880px;
}

/* Dark: Midnight-Slate. Standard ist IMMER Light -- das Betriebssystem entscheidet nicht (Betreiberentscheid
   2026-09-29). Dunkel gibt es nur ueber den Schalter im Kopf (assets/js/theme.js), der data-theme="dark"
   setzt und die Wahl auf diesem Geraet merkt. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0b0f19;
  --ink: #f8fafc;
  --ink-2: #e2e8f0;
  --ink-3: #94a3b8;
  --ink-4: #94a3b8;
  --line: rgba(255, 255, 255, .10);
  --line-2: #334155;
  --white: #1e293b;
  --paper: #0b0f19;
  --paper-2: #111827;
  --blue: #14b8a6;
  --blue-2: #2dd4bf;
  --blue-soft: #134e4a;
  --blue-tint: #10302d;
  --auf-akzent: #04211f;
  --green: #6ee7b7;
  --green-soft: #0f2e22;
  --warn-ink: #fdba74;
  --warn-soft: #3a2412;
  --rot: #f87171;
  --rot-soft: #3b1618;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html body [hidden] { display: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wide { max-width: 1080px; }

a { color: var(--blue); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--blue); color: var(--auf-akzent); padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Header ── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.brand-sub { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.brand-sub.tool-suite { color: var(--blue); }

@media (max-width: 720px) {
  .header-row { flex-wrap: wrap; }
}

/* ── Hero / intro ── */
.tool-hero { padding: 44px 0 8px; }
.tool-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--blue); margin-bottom: 10px;
}
.tool-hero h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
.tool-hero p.lede { font-size: 17px; color: var(--ink-3); max-width: 60ch; margin: 0 0 0; }

.privacy-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--blue-tint);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  font-size: 14px; color: var(--blue-2);
}
.privacy-note svg { flex: none; margin-top: 2px; }
.privacy-note.is-warn { background: var(--warn-soft); border-color: #f2c9a0; color: var(--warn-ink); }

/* ── Tool card / workspace ── */
.tool-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  margin: 28px 0 40px;
}
.tool-card-title { margin: 0 0 4px; font-size: 17px; }

.tool-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--blue); color: var(--auf-akzent); }
.btn-primary:hover:not(:disabled) { background: var(--blue-2); }
.btn-primary:disabled { background: var(--line-2); color: var(--ink-4); cursor: not-allowed; }
.btn-ghost { background: var(--white); color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line-2); color: var(--ink-2); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.tool-status { font-size: 14px; color: var(--ink-3); }
.tool-status[data-state="error"] { color: var(--warn-ink); }
.tool-status[data-state="done"] { color: var(--green); font-weight: 600; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 40px;
  margin-top: 40px;
}
.ft-row {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-4);
}
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ft-links a { color: var(--ink-4); text-decoration: none; }
.ft-links a:hover { color: var(--blue); }

/* ── Formular ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) { .form-grid-3 { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form-field select, .form-field input[type="text"], .form-field input[type="date"], .form-field input[type="number"], .form-field textarea {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 72px; }
.form-field select:focus, .form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.span-2 { grid-column: 1 / -1; }
.field-hint { font-size: 13px; color: var(--ink-4); margin: 0; }

/* ── Vorlagen (1-Klick-Beispiele) ── */
.preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 18px; }
.preset-label { font-size: 12px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }

/* ── Klick-Auswahl (Mieteranzahl/Befristung/Nebenkosten-Art) ── */
.choice-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }

/* ── Formular + Live-Vorschau nebeneinander (Kanon: kukanilea-rechnung/-mahnung/-fahrtenbuch) ── */
.tool-section { max-width: clamp(0px, 94vw, 1360px); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 440px); gap: 20px; align-items: start; margin: 0 0 28px; }
.tool-card-stack { display: flex; flex-direction: column; }
.tool-layout .tool-card-stack .tool-card { margin: 0 0 20px; }
.tool-layout .tool-card-stack .tool-card:last-child { margin-bottom: 0; }
.av-preview-aside { position: sticky; top: 84px; }
.preview-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px 2px; }
.preview-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); }

.av-sheet {
  background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); aspect-ratio: 210 / 297; overflow: hidden;
}
.pdf-preview-embed { width: 100%; height: 100%; border: 0; display: block; }

.av-preview-aside.is-zoomed {
  position: fixed; inset: 0; z-index: 80; margin: 0; max-width: none; width: 100vw; height: 100vh;
  background: rgba(15, 23, 42, .6); display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding: 32px; overflow-y: auto;
}
.av-preview-aside.is-zoomed .preview-label-row { width: min(92vw, 640px); }
.av-preview-aside.is-zoomed .preview-label { color: var(--white); }
.av-preview-aside.is-zoomed .av-sheet { width: min(92vw, 640px); aspect-ratio: 210 / 297; }
.av-preview-aside.is-zoomed .ip-style-controls { width: min(92vw, 640px); }

.ip-style-controls { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.style-control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.style-control-label { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.style-control-hint { font-size: 12px; color: var(--ink-4); margin: -4px 0 0; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid var(--white); background: var(--sw); box-shadow: 0 0 0 1px var(--line-2); }
.color-swatch.active { box-shadow: 0 0 0 1px var(--sw), 0 0 0 3px var(--white), 0 0 0 4px var(--ink-3); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; }
.segmented-btn { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.segmented-btn.active { background: var(--blue); color: var(--auf-akzent); }

@media (max-width: 900px) {
  .tool-layout { grid-template-columns: 1fr; }
  .av-preview-aside { position: static; max-width: 420px; }
}

@media (max-width: 520px) {
  .tool-card { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Klick-Chips (Zahlungstermin/Probezeit-Dauer) — Kanon: kukanilea-arbeitslosengeld/styles.css ── */

.chip {
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2);
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: var(--auf-akzent); }

/* ── FAQ (native <details>, kein JS nötig) ── */
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border-top: 1px solid var(--line); padding: 4px 0; }
.faq-item:first-child { border-top: none; }
.faq-item summary {
  cursor: pointer; font-weight: 700; font-size: 15px; padding: 12px 4px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--blue); flex: none; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 4px 16px; font-size: 14.5px; color: var(--ink-3); }

/* ── Hub-Tabs (Cluster-Merge 7: mietvertrag+arbeitsvertrag+untermietvertrag+vollmacht) ── */

.hub-panel { margin-top: 8px; }

/* Zurueck zur Galerie und Weg zum Unterschreiben (Vorlagen-Seiten) */
.vv-zurueck { display: flex; width: fit-content; align-items: center; min-height: 44px; margin: -8px 0 4px; font-size: 14px; font-weight: 600; color: var(--blue-2); text-decoration: none; }
.vv-zurueck:hover { text-decoration: underline; }
.vv-zurueck:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.vv-weiter { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.vv-weiter a { color: var(--blue-2); font-weight: 600; }

/* Auswahlfelder der neuen Vertragsvorlagen (Checkbox-Gruppen) */
.check-group { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.check-group legend { padding: 0; }
.check-row {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 12px; margin: 0 0 6px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
.check-row:hover { border-color: var(--blue); }
.check-row input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.check-row:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.check-row:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.check-row strong { display: block; font-size: 14.5px; color: var(--ink-2); }
.cb-hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.segmented-btn { min-height: 44px; }
.segmented-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Kachel-Schalter: jeder Baustein ist eine grosse Flaeche mit Schalter und Statuswort ("Aktiv" / "Aus").
   Das Statuswort steht zusaetzlich zur Farbe da (Farbe allein waere kein Zustand) und ist mit
   Alternativtext leer, damit ein Screenreader es nicht zum Namen des Kontrollkaestchens schlaegt. */
.check-row { min-height: 68px; align-items: center; gap: 14px; padding: 12px 16px; }
.check-row > span { order: 1; flex: 1; min-width: 0; }
.check-row::after { content: "Aus" / ""; order: 2; flex: none; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.check-row:has(input:checked)::after { content: "Aktiv" / ""; color: var(--ink-2); font-weight: 700; }
.check-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; order: 3; flex: none; position: relative;
  width: 48px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--white); border: 2px solid var(--ink-3); transition: background .15s, border-color .15s;
}
.check-row input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-3); transition: transform .15s, background .15s;
}
.check-row input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); }
.check-row input[type="checkbox"]:checked::before { background: var(--auf-akzent); transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .check-row input[type="checkbox"], .check-row input[type="checkbox"]::before { transition: none; }
}

/* Schnellwahl-Chips (Betraege, Fristen, Datum) und Regler: Klicken statt Tippen. Das Zahlenfeld bleibt
   Eigentuemer des Wertes, Chips und Regler sind nur Ansichten davon. */
.vv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vv-chip {
  min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--white); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.vv-chip:hover { border-color: var(--blue); }
.vv-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--auf-akzent); }
.vv-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vv-regler { display: block; width: 100%; min-height: 44px; margin: 0 0 6px; accent-color: var(--blue); cursor: pointer; }

@media print {
  .site-header, .site-footer, .tool-actions, .privacy-note { display: none; }
}

/* 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. */
/* EIN AUSWAHLFELD IST SO BREIT WIE SEINE LAENGSTE OPTION.
   Das ist Browservorgabe und kein Fehler des Werkzeugs: die
   intrinsische Mindestbreite eines `<select>` kommt aus dem laengsten
   Eintrag, und `min-width: auto` laesst es nicht darunter.

   Am 2026-09-22 ueber 186 Werkzeuge bei 320 CSS px gemessen. Es war
   die haeufigste Einzelursache fuer waagerechtes Seitenscrollen:
   "Windows-1252 / ANSI (ältere Excel-Exporte)" macht ein Feld 331 px
   breit, wo 238 zur Verfuegung stehen -- und die ganze Seite wird
   breiter als das Fenster. WCAG 1.4.10 verlangt 320 CSS px ohne
   zweidimensionales Scrollen; 320 px sind ausdruecklich auch der
   Zoomfall 400 % an einem 1280-px-Bildschirm, also kein Sonderfall
   fuer kleine Telefone.

   Dieselbe Falle steht in `.claude/rules/autonomer-maximum-modus.md`
   schon einmal beschrieben -- damals mit 409 px in einem 390 px
   breiten Bildschirm.

   `max-inline-size` statt `width`: die Felder behalten ihre gesetzte
   Breite, wo Platz ist, und geben nur nach, wenn es eng wird. Die
   Vorfahren brauchen `min-inline-size: 0`, weil ein Flex- oder
   Grid-Element sonst nicht unter seinen Inhalt schrumpft -- ohne das
   verschiebt die Regel den Ueberlauf nur eine Ebene nach oben. */
:where(select, input, textarea) {
  max-inline-size: 100%;
  min-inline-size: 0;
}
:where(.form-field, .option-field, .option-row, .field, .tool-card) {
  min-inline-size: 0;
}

/* UND EIN UNTEILBARES WORT HAELT EINE GANZE SEITE AUSEINANDER.
   `Einzelunternehmen/Personengesellschaft` hat keine Umbruchstelle --
   ein Schraegstrich ohne Leerzeichen ist keine. Der Chip wurde damit
   312 px breit in einer 219 px breiten Gruppe, obwohl sie laengst
   `flex-wrap: wrap` traegt: umbrechen kann nur, was sich teilen
   laesst. Gemessen an `gewerbesteuer`, dieselbe Bauform steht in 235
   Werkzeugen.

   `anywhere` und nicht `break-word`: nur `anywhere` senkt auch die
   INTRINSISCHE Mindestbreite, und genau die verhindert hier das
   Schrumpfen. `break-word` bricht erst beim Zeichnen und aendert an
   der Ueberlaufrechnung nichts.

   Beschraenkt auf Beschriftungen von Bedienelementen: im Fliesstext
   waere ein Umbruch mitten im Wort eine Verschlechterung, hier ist er
   die Alternative zu abgeschnittenem Text. */
:where(.chip, .check-tile, .sn-template-btn) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

/* EINE FLEXZEILE BRICHT NICHT VON ALLEIN UM.
   `display: flex` ohne `flex-wrap` ist `nowrap` -- die Vorgabe des
   Browsers, und in einer Zeile mit drei Auswahlknoepfen ist sie bei
   320 CSS px falsch. `.vz-radio-group` steht in 235 Werkzeugen und
   trug sie ueberall; aufgefallen ist es an `kuendigungsschreiben`
   (+40 px), `mahnung` (+3) und `impressum` (+33).

   Umgebrochen wird nur, wo es sonst nicht passt: solange Platz ist,
   aendert `wrap` nichts an der Darstellung. */
:where(.vz-radio-group, .checkbox-label, .chip-group, .seg-group,
       .diff-mode-group, .json-toolbar, .tool-actions) {
  flex-wrap: wrap;
}
/* Eine Beschriftung, die ein Bedienelement umschliesst, ist selbst ein
   Kasten und muss genauso nachgeben koennen. Bei `camt053-viewer` war
   sie 287 px breit in einem 238 px breiten Feld -- das Dateifeld darin
   bringt seine eigene Mindestbreite mit. */
label { max-inline-size: 100%; min-inline-size: 0; }

/* UND EIN LANGES WORT IM FLIESSTEXT RAGT EINFACH HERAUS.
   "(monatlich/vierteljährlich/befreit)" hat keine Umbruchstelle; der
   Listeneintrag blieb 179 px breit und sein Text lief 63 px darueber
   hinaus. Gemessen an `ust-voranmeldung`, `kuendigungsfrist-schweiz`
   und `buchfuehrungspflicht`.

   `break-word` und nicht `anywhere`: hier ist die Kastenbreite
   richtig, nur der Text passt nicht. `break-word` greift genau dann
   -- und laesst die Mindestbreitenrechnung in Ruhe, damit sich an
   Rastern und Flexzeilen nichts still verschiebt. */
body { overflow-wrap: break-word; }

.tool-weiter {
  border-top: 1px solid var(--line);
  padding: 22px 0 4px;
  margin-top: 40px;
}
.tool-weiter + .site-footer { margin-top: 20px; }
.tool-weiter:empty { display: none; }
/* ── Passend zu diesem Werkzeug: Kacheln wie im Store (2026-10-02) ──
   Mausfirst und fingerfirst: jede Kachel ist ein grosses Ziel (mind.
   60 px), das Gesicht kommt aus dem Store, der Name bricht hoechstens
   zweimal um und wird sonst gekuerzt. */
/* GRAU AUS DER TEXTFARBE, NICHT AUS EINER VARIABLEN DES HELLEN THEMAS
   (2026-10-02). `var(--ink-4)` ist das Grau des hellen Themas; ein Werkzeug
   mit dunklem Thema, das die Variable nicht neu setzt, zeigte den Titel mit
   2,82:1 auf fast schwarzem Grund (gemessen auf hintergrund-entfernen) --
   unter WCAG AA. Aus der Textfarbe gemischt traegt dieselbe Regel beide
   Themen: dunkle Schrift auf hell, helle auf dunkel. */
.weiter-titel {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.weiter-liste {
  list-style: none; margin: 0; padding: 0;
  /* minmax(0, ...) und nicht 1fr: ein Rasterfeld mit `1fr` schrumpft nicht
     unter das laengste Wort seines Inhalts -- "Sachbezugswerte-,
     Betriebsveranstaltungs-, ..." machte die Seite auf dem Telefon 463
     statt 390 px breit (gemessen an afa, 2026-10-02). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}
.weiter-kachel {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 12px; box-sizing: border-box;
  min-width: 0; border-radius: 12px;
  /* Der Rand ebenso aus der Schriftfarbe: `--line` ist in manchen dunklen
     Themen fast weiss und machte aus jeder Kachel einen harten Kasten. */
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  /* Aus der Textfarbe gemischt statt aus `--white`: dieselbe Kachel traegt
     helles und dunkles Thema, auch wo ein Werkzeug `--white` nicht kennt. */
  background: color-mix(in srgb, currentColor 3%, transparent);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.weiter-kachel .kuk-kachel { width: 40px; height: 40px; }
/* Silbentrennung statt Bruch mitten im Wort: `anywhere` machte auf dem
   Telefon "Anlageverzeichni|s" daraus. `hyphens: auto` trennt nach der
   Sprache des Dokuments (lang="de") -- "Anlage-verzeichnis". */
.weiter-name {
  min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.weiter-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Das Laenderetikett wie im Store: klein, aber ausgesprochen. Wer aus
   einem oesterreichischen Werkzeug kommt, sieht vor dem Klick, dass das
   naechste deutsches Recht rechnet. */
.kuk-land {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; line-height: 1.2;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.kuk-launcher-text .kuk-land { margin-left: 8px; }
.kuk-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (hover: hover) {
  .weiter-kachel:hover {
    border-color: var(--blue); transform: translateY(-2px);
    box-shadow: 0 10px 18px -12px rgba(18, 54, 64, .45);
  }
}
@media (max-width: 560px) {
  .weiter-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .weiter-kachel { gap: 9px; padding: 9px 10px; }
  .weiter-kachel .kuk-kachel { width: 34px; height: 34px; }
  .weiter-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .weiter-kachel { transition: none; }
  .weiter-kachel:hover { transform: none; }
}

/* ── Die Marke traegt ihre Flaeche (2026-10-02) ──────────────────────
   `mark-onpetrol.svg` ist fuer einen petrolfarbenen Grund gezeichnet.
   Auf den Werkzeugen stand sie ohne ihn auf Weiss und zerfiel in
   verstreute Punkte -- genau der Eindruck eines beliebigen Symbols, den
   eine Marke nicht machen darf. Auf www sitzt sie in einer Kachel
   (styles-v2.css .brand-mark); hier jetzt dieselbe. */
.site-header .brand-mark {
  width: 32px; height: 32px; padding: 4px; box-sizing: border-box;
  border-radius: 9px; background: #1B4965;
}
/* Der Weg zur Buerosoftware im Kopf -- auf breiten Bildschirmen. Auf dem
   Telefon steht er im Launcher und im Werbeband des Fusses; der Kopf
   bleibt dort einzeilig. */
.header-actions { display: flex; align-items: center; gap: 6px; }
.kuk-haus {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: inherit; text-decoration: none; opacity: .86;
}
.kuk-haus:hover { opacity: 1; background: rgba(27, 73, 101, .08); }
/* Werkzeuge mit dunklem Thema faerben JEDEN Link (z. B.
   `html[data-theme="dark"]:not(...) a`, Spezifitaet 0,2,2). Kopf- und
   Bandlinks gehoeren aber der Marke, nicht dem Werkzeug -- deshalb hier
   eine Stufe spezifischer (0,3,1). */
.site-header .header-actions a.kuk-haus { color: inherit; }
@media (max-width: 840px) { .kuk-haus { display: none; } }

/* ── Fuss: Werbeband und Rechtszeile (2026-10-02) ────────────────────
   Das Band ist auf jedem Werkzeug gleich und in hellem wie dunklem
   Thema dasselbe Petrol -- es ist die Marke, nicht das Werkzeug. */
.kuk-werbung {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px 22px;
  margin: 6px 0 16px; padding: 18px 20px;
  border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #1B4965 0%, #12344A 100%);
}
.kuk-werbung-marke {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
}
.kuk-werbung-marke img { display: block; width: 30px; height: 30px; }
.kuk-werbung-text { min-width: 0; }
.kuk-werbung-kicker {
  margin: 0 0 3px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #A8D4E8;
}
.kuk-werbung-titel { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; }
.kuk-werbung-satz { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #D6E6EE; }
.kuk-werbung-aktionen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.kuk-werbung-cta, .kuk-werbung-zweit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 10px; box-sizing: border-box;
  font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.site-footer .kuk-werbung a.kuk-werbung-cta { background: #fff; color: #1B4965; }
.site-footer .kuk-werbung a.kuk-werbung-cta:hover { background: #E8F3F8; }
.site-footer .kuk-werbung a.kuk-werbung-zweit { color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.site-footer .kuk-werbung a.kuk-werbung-zweit:hover { background: rgba(255, 255, 255, .1); }
.kuk-werbung a:focus-visible { outline: 3px solid #A8D4E8; outline-offset: 2px; }
@media (max-width: 840px) {
  .kuk-werbung { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; gap: 12px 14px; }
  .kuk-werbung-marke { width: 40px; height: 40px; border-radius: 11px; }
  .kuk-werbung-marke img { width: 26px; height: 26px; }
  .kuk-werbung-aktionen { grid-column: 1 / -1; }
  .kuk-werbung-aktionen a { flex: 1 1 0; }
  .kuk-werbung-titel { font-size: 15px; }
}
.site-footer .ft-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 22px; padding: 4px 0 6px;
}
.site-footer .ft-links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* ── 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; }
/* DIE KOPFZEILE PASSTE BEI 320 PX NICHT INS FENSTER.
   Gemessen am 2026-09-22 an `rechnung` und `stundennachweis`:

     Marke 130 + Trenner 1 + Werkzeugname 64 + Knopf 106 = 301
     plus Abstaende -> rechte Kante bei 383, Fenster 320

   Die Seite scrollte also waagerecht -- und zwar die ganze Seite, nicht
   ein einzelnes Element (WCAG 1.4.10 verlangt 320 CSS px ohne
   zweidimensionales Scrollen). Nachgeben konnte niemand: die Marke steht
   auf `0 0 auto`, der Werkzeugname lag schon auf seiner Mindestbreite
   von 6ch, und der Knopf ist die einzige Bedienung im Kopf.

   Unterhalb von 400 px traegt die Bildmarke allein. Der Schriftzug ist
   dort die einzige Angabe, auf die verzichtet werden kann, ohne dass
   jemand etwas verliert: wo man ist, sagt der Werkzeugname daneben, und
   die Marke bleibt sichtbar. Das spart rund 98 px -- gemessen genug. */
@media (max-width: 400px) {
  .brand-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.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; }
/* Blauer Haken (website/PRUEFHAKEN.json): gleich hinter dem Namen, nie von ihm verdraengt. Der Name gibt nur so viel
   Breite her, wie er braucht, damit der Haken daneben steht; der Knopf rechts behaelt seine Stelle ueber margin-left. */
/* Mindestbreite 4ch statt 6ch: der Haken braucht ca. 22 px, und bei 320 px schob er sonst die Kopfzeile 7 px ueber den Rand (gemessen). */
.kuk-kontext:has(+ .kuk-haken) { flex: 0 1 auto; min-width: 4ch; }
.kuk-kontext:has(+ .kuk-haken) ~ .header-actions { margin-left: auto; }
/* Bis 340 px entfaellt der Haken im Kopf: er braucht 22 px, und die Kopfzeile ist dort bei manchen Werkzeugen schon ohne ihn zu breit
   (Vertragsvorlagen: 21 px, mit Haken 41 px, gemessen). !important, weil die Gestalt des Hakens inline im Markup steht. */
@media (max-width: 340px) {
  .kuk-kontext + .kuk-haken { display: none !important; }
  .kuk-kontext:has(+ .kuk-haken) { min-width: 6ch; }
}
.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; } }
/* FINGER BRAUCHEN 44 PX, AUCH WO DAS AUGE 32 SIEHT.
   Gemessen am 2026-10-02 auf dem iPhone 13 (WebKit, Projektplan): die
   Marke war 32 x 32 px gross, der Werkzeugname 24 px hoch -- zwei Ziele
   unter dem Produktmass von 44 px, auf allen Werkzeugen. Vergroessert
   wird die Trefferflaeche, nicht das Bild: Marke und Name sehen aus wie
   vorher. `line-height` statt Flexbox beim Namen, weil er mit
   `text-overflow: ellipsis` kuerzt -- in einem Flexcontainer greift das
   nicht. */
@media (pointer: coarse) {
  .site-header .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .kuk-kontext { line-height: 44px; }
  .site-header .kuk-haus { 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; align-items: center; gap: 11px;
  padding: 7px 0; min-height: 44px;
  text-decoration: none; color: inherit;
}
.kuk-launcher-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kuk-launcher-ziel:hover, .kuk-launcher .site-nav a:hover {
  color: var(--blue);
}
.kuk-launcher-hinweis { font-size: 12px; color: var(--ink-4); }
/* DASSELBE GESICHT WIE IM STORE.
   Die Zeichnung und die beiden Kachelfarben kommen aus dem Suchindex
   von /webtools -- keine zweite Iconliste, kein zweiter Farbschluessel.
   Ein Werkzeug sieht hier aus wie dort. */
.kuk-kachel {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 28%; corner-shape: squircle;
  border: 1px solid rgba(255,255,255,.24); color: #fff;
  background: linear-gradient(145deg, var(--tile-light), var(--tile-dark));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 3px 8px rgba(20,50,60,.16);
}
.kuk-kachel svg { display: block; width: 74%; height: 74%; overflow: visible; }
/* Die kuratierten Marken tragen `stroke="currentColor"`, die
   semantischen Glyphen nicht -- ohne diese Zeile blieben sie
   unsichtbar auf der farbigen Kachel. Derselbe Fall wie im Store. */
.kuk-kachel svg:not([stroke]) { stroke: currentColor; fill: none; stroke-width: 1.7; }
.kuk-kachel .duo { fill: rgba(255,255,255,.22); stroke: none; }
.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 */

/* Theme-Schalter im Kopf: icon-only, 44 x 44. Der Platz ist von Anfang an reserviert, damit die
   Schaltflaeche "Werkzeuge" nicht springt, wenn theme.js den Knopf einsetzt (CLS). */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions:not(:has(.kuk-theme))::before { content: ""; flex: none; width: 44px; height: 44px; }
.kuk-theme {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; cursor: pointer;
}
.kuk-theme:hover { border-color: var(--blue); color: var(--blue); }
.kuk-theme:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.kuk-theme svg { width: 20px; height: 20px; }
.kuk-theme .kuk-theme-sonne { display: none; }
:root[data-theme="dark"] .kuk-theme .kuk-theme-sonne { display: block; }
:root[data-theme="dark"] .kuk-theme .kuk-theme-mond { display: none; }

/* Karte "Form und Unterschrift": Ampel mit Wort und Punkt. Das Wort traegt die Aussage, die Farbe nur die Zuordnung. */
.vv-form-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.vv-form-zeile { display: flex; align-items: flex-start; gap: 12px; }
.vv-form-zeile[hidden] { display: none; }
.vv-form-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.vv-form-text strong { color: var(--ink); }
.vv-ampel {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 116px; padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.vv-ampel i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); flex: none; }
.vv-ampel-gruen { background: var(--green-soft); }
.vv-ampel-gruen i { background: var(--green); }
.vv-ampel-gelb { background: var(--warn-soft); }
.vv-ampel-gelb i { background: var(--warn-ink); }
.vv-ampel-rot { background: var(--rot-soft); }
.vv-ampel-rot i { background: var(--rot); }
@media (max-width: 520px) { .vv-form-zeile { flex-direction: column; gap: 6px; } }

/* Widerspruch zwischen zwei Angaben: Rand in der Warnfarbe, dazu immer ein Hinweistext (Farbe allein waere keine Aussage). */
.vv-konflikt { outline: 2px solid var(--rot); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Anlagen & Anhaenge: Akkordeon, die Zusammenfassung ist eine grosse, tastaturbedienbare Flaeche */
.vv-anlagen { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0 14px 6px; margin: 12px 0; background: var(--white); }
.vv-anlagen > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink-2); }
.vv-anlagen > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Mobil-Feinschliff (2026-09-30) -- gemessen auf 360/390/412/768 px ─────────────────────────
   Gemessen (alle Routen): waagerechter Ueberlauf von 23 px bei 412 px (Kopfzeile: die Wortmarke verschwindet
   erst unter 401 px, die Kopfzeile braucht aber bis 435 px), Zielhoehen 44 px, Eingabefelder mit 14 px Schrift
   (iOS zoomt beim Fokussieren hinein), Schieberegler 24 px hoch, Farbfelder 32 px, keine Aktionsleiste am Daumen.
   Gilt bis 768 px. Der Text folgt der Aufgabe: ein Ziel ist 48 px hoch, das Zeichen darin darf kleiner sein. */
@media (max-width: 440px) {
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 768px) {
  .segmented-btn, .vv-chip, .btn, .btn-sm, .kuk-tools, .kuk-theme, .vv-zurueck, .check-row, .st-chip,
  .vv-anlagen > summary, .chip { min-height: 48px; touch-action: manipulation; }
  .btn, .btn-sm { padding-top: 10px; padding-bottom: 10px; }
  .kuk-theme, .kuk-tools { min-width: 48px; }
  /* iOS Safari zoomt in Felder unter 16 px hinein und verschiebt das Layout */
  .form-field select, .form-field input[type="text"], .form-field input[type="date"], .form-field input[type="month"],
  .form-field input[type="number"], .form-field textarea, input[type="search"], select { font-size: 16px; min-height: 48px; }
  .form-field textarea { min-height: 96px; }
  input[type="checkbox"] { min-width: 24px; min-height: 24px; }
  /* Schieberegler: 48 px hohe Bahn, Griff 28 px sichtbar und 48 px greifbar (transparenter Rand) */
  /* Farbfelder der Vorschau: 32 px sichtbar, 48 px greifbar */
  .color-swatches { gap: 4px; }
  .color-swatch { width: 48px; height: 48px; border: 0; box-shadow: none;
    background: radial-gradient(circle closest-side at 50% 50%, var(--sw) 0 15.5px, var(--line-2) 15.5px 16.5px, transparent 17px); }
  .color-swatch.active { box-shadow: none;
    background: radial-gradient(circle closest-side at 50% 50%, var(--sw) 0 15.5px, var(--white) 15.5px 18.5px, var(--ink-3) 18.5px 20px, transparent 20.5px); }
}

/* Aktionsleiste am Daumen: unter 768 px bleibt "PDF" sichtbar, der Rest liegt hinter "Mehr" (vv-vertrag.js baut die Leiste) */
.vv-leiste-vorschau, .vv-mehr-knopf { display: none; }
@media (max-width: 768px) {
  .tool-actions.vv-leiste {
    position: sticky; bottom: 0; z-index: 60; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px;
    margin: 20px -28px -28px; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line-2); box-shadow: 0 -6px 18px -12px rgb(15 23 42 / .35);
  }
  .tool-actions.vv-leiste > .btn-primary { flex: 1 1 auto; min-width: 0; }
  .vv-leiste-vorschau, .vv-mehr-knopf { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .vv-leiste-mehr { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 8px; order: 5; }
  .tool-actions.vv-leiste.vv-offen { flex-wrap: wrap; }
  .tool-actions.vv-leiste.vv-offen .vv-leiste-mehr { display: flex; }
  .vv-leiste-mehr > .btn { flex: 1 1 auto; }
}
@media (max-width: 520px) { .tool-actions.vv-leiste { margin: 20px -20px -20px; } }
@media (min-width: 769px) { .vv-leiste-mehr { display: contents; } }
@media (max-width: 768px) {
  .segmented-btn, .vv-chip, .chip, .btn { min-width: 48px; }
}
/* Formularpaare: unter 600 px eine Spalte (vorher erst ab 520 px) */
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  /* zwei lange Optionen brechen um: der Rahmen wird ein Rechteck mit runden Ecken statt einer riesigen Ellipse */
  .segmented { border-radius: 26px; }
  .segmented-btn { border-radius: 22px; text-align: center; font-size: 14px; }
  .tool-actions.vv-leiste > .btn-primary { padding: 6px 14px; line-height: 1.15; font-size: 14px; white-space: normal; text-align: center; }
  .vv-leiste-vorschau, .vv-mehr-knopf { padding-left: 14px; padding-right: 14px; }
}

/* Schieberegler: die gefuellte Strecke steht in der Akzentfarbe, der Rest in einem hellen Ton derselben Farbe (--fuell setzt vv-vertrag.js in Prozent).
   Vorher trug nur der kleine Griff Farbe; auf einer grauen Bahn war der Stand kaum zu erkennen. */
.vv-regler { --fuell: 0%; -webkit-appearance: none; appearance: none; height: 48px; min-height: 48px; background: transparent; touch-action: manipulation; }
.vv-regler::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--blue) var(--fuell), color-mix(in srgb, var(--blue) 30%, var(--white)) var(--fuell)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 75%, transparent); }
.vv-regler::-moz-range-track { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--blue) 30%, var(--white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 75%, transparent); }
.vv-regler::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--blue); }
/* Griff: 48 px greifbar, sichtbar ein Kreis in der Akzentfarbe mit weissem Ring und feinem Schatten */
.vv-regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 48px; height: 48px; margin-top: -19px; border: 0; border-radius: 50%; background: radial-gradient(circle closest-side at 50% 50%, var(--blue) 0 11px, var(--white) 11.5px 14px, rgb(15 23 42 / .35) 14px 15px, transparent 15.5px); }
.vv-regler::-moz-range-thumb { width: 48px; height: 48px; border: 0; border-radius: 50%; background: radial-gradient(circle closest-side at 50% 50%, var(--blue) 0 11px, var(--white) 11.5px 14px, rgb(15 23 42 / .35) 14px 15px, transparent 15.5px); }
.vv-regler:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Gesperrter PDF-Knopf: bisher Grau auf Grau und kaum zu lesen. Jetzt lesbare Schrift auf hellem Akzentton mit gestrichelter Kante --
   erkennbar als "noch nicht bereit", ohne mit dem aktiven Knopf verwechselt zu werden; der Hinweis darueber nennt, was fehlt. */
.btn-primary:disabled { background: color-mix(in srgb, var(--blue) 14%, var(--white)); color: var(--ink-2); border: 2px dashed color-mix(in srgb, var(--blue) 60%, var(--white)); }

/* ── Farbe und Form (Rueckmeldung 2026-09-30) ─────────────────────────────────────────────
   Gruen hiess ueberall "gewaehlt" und damit "erledigt", auch solange Pflichtangaben fehlten. Jetzt:
   Auswahl = ruhiges Blau (--wahl), Gruen nur noch fuer den bereiten PDF-Knopf und das "vollstaendig"-Signal.
   Formen: kleine Radien statt Pillen -- ein Rechtsdokument, kein Spielzeug. Der Kippschalter bleibt rund (er ist einer). */
:root { --wahl: #1d4ed8; --wahl-tint: #eef2ff; --auf-wahl: #ffffff; --r-ziel: 6px; }
:root[data-theme="dark"] { --wahl: #93b4fd; --wahl-tint: #1e2a4a; --auf-wahl: #0b0f19; }
.segmented { border-radius: 8px; }
.segmented-btn { border-radius: var(--r-ziel); }
.segmented-btn.active { background: var(--wahl); color: var(--auf-wahl); }
.segmented-btn:focus-visible, .vv-chip:focus-visible, .check-row:has(input:focus-visible), .vv-regler:focus-visible { outline-color: var(--wahl); }
.btn, .chip, .vv-chip, .st-chip { border-radius: var(--r-ziel); }
.chip.active, .vv-chip[aria-pressed="true"] { background: var(--wahl); border-color: var(--wahl); color: var(--auf-wahl); }
.chip:hover, .vv-chip:hover, .check-row:hover, .btn-ghost:hover { border-color: var(--wahl); }
.btn-ghost:hover { color: var(--wahl); }
.check-row:has(input:checked) { border-color: var(--wahl); background: var(--wahl-tint); }
.check-row input[type="checkbox"]:checked { background: var(--wahl); border-color: var(--wahl); }
.vv-regler::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--wahl) var(--fuell), color-mix(in srgb, var(--wahl) 26%, var(--white)) var(--fuell)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wahl) 70%, transparent); }
.vv-regler::-moz-range-track { background: color-mix(in srgb, var(--wahl) 26%, var(--white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wahl) 70%, transparent); }
.vv-regler::-moz-range-progress { background: var(--wahl); }
.vv-regler::-webkit-slider-thumb { background: radial-gradient(circle closest-side at 50% 50%, var(--wahl) 0 11px, var(--white) 11.5px 14px, rgb(15 23 42 / .35) 14px 15px, transparent 15.5px); }
.vv-regler::-moz-range-thumb { background: radial-gradient(circle closest-side at 50% 50%, var(--wahl) 0 11px, var(--white) 11.5px 14px, rgb(15 23 42 / .35) 14px 15px, transparent 15.5px); }
.btn-primary:disabled { background: var(--line); color: var(--ink-2); border: 2px dashed var(--ink-4); }
@media (max-width: 768px) { .segmented { border-radius: 8px; } .segmented-btn { border-radius: var(--r-ziel); } }

/* Knopfsymbole: nur Beiwerk zum Text, fuer Vorleseprogramme verborgen */
.btn .vv-ico { width: 18px; height: 18px; flex: none; margin-right: 8px; vertical-align: -3px; }

/* Fortschritt: gezaehlte Pflichtangaben, keine Schaetzung. Steht in der Aktionsleiste, die jetzt auf jeder Breite am unteren Rand klebt. */
.vv-fortschritt { flex-basis: 100%; order: -1; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.vv-fortschritt-bahn { flex: 1 1 auto; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--wahl) 18%, var(--white)); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wahl) 40%, transparent); }
.vv-fortschritt-bahn > i { display: block; height: 100%; width: var(--anteil, 0%); background: var(--wahl); }
.vv-fortschritt[data-fertig="ja"] .vv-fortschritt-bahn > i { background: var(--blue); }
.vv-fortschritt[data-fertig="ja"] { color: var(--blue-2, var(--blue)); }
.tool-actions.vv-leiste { position: sticky; bottom: 0; z-index: 60; flex-wrap: wrap; background: var(--white); border-top: 1px solid var(--line-2); padding: 12px 16px max(12px, env(safe-area-inset-bottom)); margin: 20px -28px -28px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (max-width: 520px) { .tool-actions.vv-leiste { margin: 20px -20px -20px; } }
@media (prefers-reduced-motion: no-preference) { .vv-fortschritt-bahn > i { transition: width .2s ease; } }

/* Naechster Schritt nach dem Download */
.vv-danach { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--blue); border-radius: var(--r-ziel); background: var(--white); font-size: 14px; color: var(--ink-2); }
.vv-danach strong { display: block; margin-bottom: 4px; }

/* Die Leiste klebt auf jeder Breite; damit sie schmal bleibt, liegen Zuruecksetzen, Speichern und Laden auch auf dem Desktop hinter "Mehr".
   "Vorschau" braucht es nur, wo die Vorschau unter dem Formular steht (unter 900 px). */
.tool-actions.vv-leiste { flex-wrap: wrap; align-items: stretch; gap: 8px; }
.vv-mehr-knopf { display: inline-flex; align-items: center; justify-content: center; }
.vv-leiste-mehr { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 8px; order: 5; }
.tool-actions.vv-leiste.vv-offen .vv-leiste-mehr { display: flex; }
@media (min-width: 901px) { .vv-leiste-vorschau { display: none; } }
@media (max-width: 900px) { .vv-leiste-vorschau { display: inline-flex; align-items: center; justify-content: center; } }

/* Beispielwert aus einem Muster, noch nicht geprueft: gestrichelte Kante in Warnfarbe und ein Wort an der Beschriftung */
.form-field.vv-beispiel input, .form-field.vv-beispiel textarea, .form-field.vv-beispiel select { border: 2px dashed var(--warn-ink, #b45309); background: color-mix(in srgb, var(--warn-ink, #b45309) 7%, var(--white)); }
.form-field.vv-beispiel > label::after { content: " · Beispiel – bitte prüfen"; font-weight: 600; color: var(--warn-ink, #b45309); }
.segmented.vv-beispiel { outline: 2px dashed var(--warn-ink, #b45309); outline-offset: 2px; }
/* PDF ist moeglich (zur Ansicht), aber erst gruen, wenn alles geprueft ist */
.btn-primary.vv-noch-nicht-bereit:not(:disabled) { background: var(--white); color: var(--ink); border: 2px solid var(--ink-3); }
.vv-weiter-knopf { flex: none; min-height: 36px; }
@media (max-width: 768px) { .vv-weiter-knopf { min-height: 48px; } }

/* Passende Rechner und Werkzeuge je Vertrag und Land (Liste ist Link-Kacheln, kein Menue) */
.kv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vv-werkzeug-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.vv-werkzeug-liste a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ziel, 6px); background: var(--white); color: var(--ink); text-decoration: none; }
.vv-werkzeug-liste a:hover { border-color: var(--wahl); background: var(--wahl-tint); }
.vv-werkzeug-liste a:focus-visible { outline: 2px solid var(--wahl); outline-offset: 2px; }
.vv-werkzeug-liste strong { display: block; font-size: 14.5px; }
.vv-werkzeug-text { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.vv-werkzeug-pfeil { width: 18px; height: 18px; flex: none; color: var(--wahl); }

/* Abschluss nach dem Download (Vorbild: musterbrief.kukanilea.de, brief-abschied.js) */
.kuk-abschied { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35); }
.kuk-abschied::backdrop { background: rgba(15, 23, 42, .55); }
.kuk-abschied-innen { position: relative; padding: 28px 24px 22px; }
.kuk-abschied-zu { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer; }
.kuk-abschied-zu:hover { background: var(--line); color: var(--ink); }
.kuk-abschied-kopf { text-align: center; margin-bottom: 16px; }
.kuk-abschied-symbol { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 10px; background: var(--blue-tint); color: var(--blue); }
.kuk-abschied-kopf h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.kuk-abschied-kopf p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.kuk-abschied-vorschau { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 700; color: var(--blue-2, var(--blue)); }
.kuk-abschied-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.kuk-abschied-block h3 { margin: 0 0 6px; font-size: 14.5px; }
.kuk-abschied-block p { margin: 0; line-height: 1.5; }
.kuk-abschied-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kuk-abschied-block ul a { display: flex; align-items: center; min-height: 44px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 600; }
.kuk-abschied-block ul a:hover { border-color: var(--wahl); background: var(--wahl-tint); }
.kuk-abschied-werbung { background: var(--blue-tint); border-color: color-mix(in srgb, var(--blue) 30%, var(--white)); }
.kuk-teilen-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); margin-top: 8px; }
.kuk-teilen-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; }
.kuk-teilen-knopf svg { flex: none; }
.kuk-teilen-whatsapp { background: #075e54; }
.kuk-teilen-linkedin { background: #0a66c2; }
.kuk-teilen-mail { background: #334155; }
.kuk-teilen-link { background: #1d4ed8; }
.kuk-teilen-knopf:hover { filter: brightness(1.12); }
.kuk-teilen-status { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.kuk-teilen-status:empty { margin: 0; }
.kuk-abschied-aktionen { display: flex; flex-direction: column; gap: 10px; }
.kuk-abschied-aktionen .btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
.kuk-abschied-zu:focus-visible, .kuk-teilen-knopf:focus-visible, .kuk-abschied .btn:focus-visible, .kuk-abschied a:focus-visible { outline: 3px solid var(--wahl); outline-offset: 2px; }
@media print { .kuk-abschied { display: none !important; } }