/* KUKANILEA Webtools — Brückentage-Rechner. Eigenständige Subdomain, eigenes
   Mini-Design-System (Brand-Werte aus sites/kukanilea-www/styles.css :root übernommen, nicht
   importiert — volle Unabhängigkeit der Subdomain; identische Tokens wie andere Themen). */

:root {
  --cream: #ffffff;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --ink-3: #475569;
  --ink-4: #5a6678;
  --line: #e6ebf1;
  --line-2: #cbd5e1;
  --white: #ffffff;
  --paper: #f4f6f9;
  --blue: #1B4965;
  --blue-2: #123449;
  --blue-soft: #d7e3ea;
  --blue-tint: #eef3f6;
  --green: #18553a;
  --green-soft: #e4f1e9;
  --warn-ink: #97491a;
  --warn-soft: #fde9d4;

  --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 12px 28px -16px rgba(15,23,42,.16);

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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(--white); 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); }

.header-actions a.text-link { font-size: 14px; font-weight: 600; text-decoration: none; }

@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; }

/* ── 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-card-hint { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); }

.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(--white); }
.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-ghost.active { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.tool-status { font-size: 14px; color: var(--ink-3); min-height: 1.4em; }
.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); }

/* ── Formularfelder ── */
.pp-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  margin-top: 20px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form-field input[type="text"],
.form-field input[type="number"],
.form-field select {
  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 select { appearance: auto; cursor: pointer; }
.form-field input:focus-visible,
.form-field select:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.form-field .field-hint { font-size: 12px; color: var(--ink-4); }
.form-field-unit { display: flex; align-items: center; gap: 8px; }
.form-field-unit input { flex: 1; }
.form-field-unit-suffix { font-size: 13px; color: var(--ink-4); font-weight: 600; }

@media (max-width: 620px) {
  .pp-form { grid-template-columns: 1fr; }
}

/* ── Ergebnis ── */
.pp-result { margin-top: 24px; }
.pp-result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.pp-stat {
  background: var(--blue-tint);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.pp-stat-label { font-size: 12px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.pp-stat-value { font-size: 22px; font-weight: 700; color: var(--blue-2); margin-top: 4px; }

.pp-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 520px) {
  .tool-card { padding: 20px; }
}

/* ── Vorlagen-Beschriftung (Kanon-Klasse, hier nur fürs Kalenderjahr-Label genutzt) ── */
.preset-group-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; display: block; }

/* ── Formular + Live-Vorschau nebeneinander (Kanon: kukanilea-verzugszinsen/-mahnung) ── */
.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; }
.pp-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); }

.pp-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; }

.pp-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;
}
.pp-preview-aside.is-zoomed .preview-label-row { width: min(92vw, 700px); }
.pp-preview-aside.is-zoomed .preview-label { color: var(--white); }
.pp-preview-aside.is-zoomed .pp-sheet { width: min(92vw, 700px); aspect-ratio: 210 / 297; }
.pp-preview-aside.is-zoomed .ip-style-controls { width: min(92vw, 700px); }

.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; }
.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); }
.color-swatch:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.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(--white); }

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

/* ── "Was dieser Rechner nicht abbildet"-Aufklapp-Box (immer sichtbar per default-open,
   Kanon: kukanilea-brutto-netto/-homeoffice-pauschale) ── */
.disclosure-box summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--blue-2);
  padding: 4px 0;
}
.disclosure-box[open] summary { margin-bottom: 10px; }
.pp-note-list { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-3); }
.pp-note-list li { margin: 0 0 8px; }
.pp-note-list li:last-child { margin-bottom: 0; }

/* ── Brückentage-Ergebnisliste (Feiertage-ohne-Urlaub-Box + sortierte Tabelle) ── */
.bt-subtitle { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 20px 0 10px; }
.bt-zerocost {
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius-sm);
}
.bt-zerocost .bt-subtitle { margin-top: 0; color: var(--green); }
.bt-zerocost-list { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.bt-zerocost-list li { margin: 0 0 6px; }
.bt-zerocost-list li:last-child { margin-bottom: 0; }

.bt-table-wrap { overflow-x: auto; }
.bt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bt-table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-4); padding: 8px 10px; border-bottom: 2px solid var(--line-2);
  white-space: nowrap;
}
.bt-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.bt-table tr.bt-row-empfohlen td { background: var(--blue-tint); font-weight: 600; color: var(--blue-2); }
.bt-badge {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--blue); color: var(--white);
}

@media (max-width: 620px) {
  .bt-table { font-size: 12.5px; }
  .bt-table th, .bt-table td { padding: 7px 8px; }
}

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border-top: 1px solid var(--line); padding: 14px 0; }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item summary {
  font-weight: 700; font-size: 15px; cursor: pointer; color: var(--ink-2);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; color: var(--blue); font-weight: 700; }
.faq-item[open] summary::before { content: "– "; }
.faq-item p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-3); }

/* ── Druckansicht: nur der Ergebnis-/Formular-Bereich (#printArea), kein Header/Hero/Footer ── */
@media print {
  body:has(#printArea) .site-header,
  body:has(#printArea) .tool-hero,
  body:has(#printArea) .site-footer,
  body:has(#printArea) .skip-link,
  body:has(#printArea) .tool-actions { display: none; }
  body:has(#printArea) main .tool-card { border: 0; box-shadow: none; }
  body:has(#printArea) main section:not(:has(#printArea)) { display: none; }
  body:has(#printArea) .tool-card-stack .tool-card:not(#printArea) { display: none; }
  body:has(#printArea) .pp-preview-aside { display: none; }
  body:has(#printArea) { background: #fff; }
}

/* 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 */

/* ── Mini-Kalender: die fachlichen Zustaende dieses Werkzeugs ─────────
 *
 * Dieselben Klassennamen `mk-z-*` wie im Urlaubsplaner, andere Bedeutung --
 * und genau das ist der Punkt des gemeinsamen Kerns. Dort heisst ein
 * eingefaerbter Tag "jemand ist abwesend", hier "dieser Tag kostet einen
 * Urlaubstag". Der Kern weiss von beidem nichts.
 *
 * Die drei Zustaende schliessen sich aus (siehe `tagZustand`), deshalb reicht
 * je eine Flaeche; eine Ueberlagerung wie beim Team-Dreieck braucht es hier
 * nicht.
 *
 * Mit `#miniKalender` davor (2026-09-25): ohne ID gewann `.mk-tag` aus
 * minikalender.css (gleiche Spezifitaet, spaeter geladen), und die Zustaende
 * standen nur in der Legende.
 */
#miniKalender .mk-z-urlaubstag { background: #f7e3c4; color: #6a4708; font-weight: 700; }
#miniKalender .mk-z-gratis { background: #d7ead8; color: #1d4023; }
#miniKalender .mk-z-freizeit { background: #e7eefb; color: #24365f; }

/* Dunkel nur mit der Seite, nicht mit dem System -- siehe minikalender.css. */
:root[data-theme="dark"] #miniKalender .mk-z-urlaubstag { background: #4a3410; color: #f0cd8e; }
:root[data-theme="dark"] #miniKalender .mk-z-gratis { background: #1e3a25; color: #b7dcbd; }
:root[data-theme="dark"] #miniKalender .mk-z-freizeit { background: #1d2a44; color: #bccbe8; }

.bt-kalender { margin-top: 20px; }
.bt-kalender-titel { font-size: 16px; margin: 0 0 4px; }
#miniKalender { margin-top: 10px; max-width: 34rem; }

.bt-eigene-auswahl {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper, #f4f6f9);
  font-size: 14px;
}

/* Die Zeilen der Ergebnistabelle sind anklickbar -- das muss man sehen. */
#oppTableBody tr { cursor: pointer; }
#oppTableBody tr:hover { background: var(--paper, #f4f6f9); }

/* 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: 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; }
/* 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; }
.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; 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 */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bt-table-wrap { position: relative; }

/* Gemeinsame Navigation der drei Bereiche (2026-09-24): echte Links, damit
   jede Adresse einzeln aufrufbar und auffindbar bleibt. */
.werkstatt-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.werkstatt-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.werkstatt-nav a:hover { border-color: var(--blue); color: var(--blue); }
.werkstatt-nav a[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.werkstatt-nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (pointer: coarse) { .werkstatt-nav a { min-height: 44px; } }