/* KUKANILEA Webtools — Fristenrechner. 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; }

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; }
.tool-hero p.lede + p.lede { margin-top: 12px; }

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

/* ── Kopfbereich (2026-09-24) ─────────────────────────────────────────
   Gemessen in Chrome bei 1440 px: der Kopf stand in 1080 px, das Werkzeug
   darunter in 1360 px -- zwei linke Kanten auf einer Seite, und rechts neben
   dem Text 400 px Leere. Jetzt dieselbe Breite wie `.tool-section` und ab
   992 px zwei Spalten: links die Botschaft, rechts, was sie belegt. */
.tool-hero .hero-raster { max-width: clamp(0px, 94vw, 1360px); }
@media (min-width: 992px) {
  .hero-raster {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 48px; align-items: center;
  }
  .tool-hero { padding: 56px 0 24px; }
}

.hero-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.hero-marken .tool-kicker {
  margin: 0; padding: 6px 12px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue-2); letter-spacing: .04em;
}
@media (max-width: 480px) {
  /* Bei 390 px brach die Pille auf zwei Zeilen um. */
  .hero-marken .tool-kicker { font-size: 11px; letter-spacing: .02em; padding: 6px 10px; }
  .tool-hero p.lede { font-size: 16px; }
}
.tool-herkunft {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-decoration: none;
}
.tool-herkunft:hover { border-color: var(--blue); color: var(--blue); }

.tool-hero h1 {
  font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 16px;
  text-wrap: balance;
}
.tool-hero p.lede { line-height: 1.6; }
@media (min-width: 992px) { .tool-hero p.lede { font-size: 18px; } }

.hero-seite .privacy-note { margin: 0; }
@media (max-width: 991px) { .hero-seite { margin-top: 22px; } }

.vorteile {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 600px) and (max-width: 991px) {
  .vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vorteile li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.vorteile strong { font-size: 15px; color: var(--blue-2); }
.vorteile span { font-size: 14px; color: var(--ink-3); }

/* ── Team-Tabelle ────────────────────────────────────────────────────
   Bis zum 2026-09-24 ohne eigene Regeln: 515 von 804 px breit, Koepfe
   zentriert, Werte nicht unter ihrer Spalte. Zahlen rechtsbuendig und in
   gleich breiten Ziffern, damit 9 und 29 untereinander lesbar bleiben. */
/* Der Rahmen muss positioniert sein: das unsichtbare "Aktion"-Label im Kopf
   ist absolut positioniert, und ohne positionierten Vorfahren bezieht es sich
   auf die ganze Seite -- dann faengt `overflow-x: auto` es nicht ein, und bei
   390 px war die Seite 545 px breit (minikalender-arbeitsmodell.spec). */
.prose-table-wrap { position: relative; }
.team-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.team-tabelle th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 12px; border-bottom: 1px solid var(--line-2);
}
.team-tabelle td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-tabelle tbody tr:last-child td { border-bottom: 0; }
.team-tabelle th:nth-child(n+2):nth-child(-n+4),
.team-tabelle td:nth-child(n+2):nth-child(-n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.team-tabelle td:first-child { font-weight: 600; color: var(--ink); }
.team-tabelle td:last-child, .team-tabelle th:last-child { text-align: right; width: 1%; white-space: nowrap; }
.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;
}

.loesch-hinweis {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  margin: 12px 0 0; padding: 10px 14px;
  background: var(--warn-soft); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--warn-ink);
}
.loesch-hinweis[hidden] { display: none; }
.loesch-hinweis p { margin: 0; }

/* ── Dunkler Kopf, schwebendes Werkzeug (2026-09-24, Betreiberwunsch) ──
   Der Kopf in der Markenfarbe, das Werkzeug ragt 80 px hinein. Die
   Vorschauspalte bekommt dafuer eine eigene helle Flaeche: ihre Beschriftung
   "Live-Vorschau" stuende sonst dunkel auf dunklem Grund. */
.tool-hero {
  background: linear-gradient(160deg, #102f42 0%, var(--blue) 100%);
  color: #e3ebf1;
  padding: 44px 0 104px;
}
@media (min-width: 992px) { .tool-hero { padding: 64px 0 128px; } }
.tool-hero h1 { color: #ffffff; }
.tool-hero p.lede { color: #d3dee6; }
.tool-hero p.lede a { color: #ffffff; text-decoration-thickness: 1px; }
.hero-marken .tool-kicker {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #ffffff;
}
.tool-herkunft { border-color: rgba(255,255,255,.25); color: #d3dee6; }
.tool-herkunft:hover { border-color: #ffffff; color: #ffffff; }
.tool-herkunft:focus-visible, .tool-hero p.lede a:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.hero-seite .privacy-note,
.vorteile li {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: #e3ebf1; box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vorteile strong { color: #ffffff; display: flex; align-items: baseline; gap: 8px; }
.vorteile strong::before { content: "✓"; color: #6ee7b7; font-weight: 800; }
.vorteile span { color: #c3d1db; padding-left: 20px; }

.hero-aktion { margin: 24px 0 0; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 14px 26px; border-radius: 999px;
  background: #6ee7b7; color: #062a1d; font-size: 16px; font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.55);
  transition: background-color .15s;
}
.hero-cta:hover { background: #8ef0c8; }
.hero-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.hero-mikro { margin: 10px 0 0; font-size: 13px; color: #b9c9d4; }

@media (max-width: 599px) {
  /* Auf dem Telefon kostete der Kopf mit drei ausfuehrlichen Karten rund
     anderthalb Bildschirme, bevor das Werkzeug kam. Dort genuegen die
     Ueberschriften -- die Einzelheiten stehen weiter unten im Vergleich. */
  .vorteile { gap: 8px; }
  .vorteile li { padding: 10px 14px; }
  .vorteile span { display: none; }
  .hero-cta { width: 100%; justify-content: center; text-align: center; }
}
.tool-hero + .tool-section { position: relative; z-index: 1; margin-top: -80px; }
@media (max-width: 991px) { .tool-hero + .tool-section { margin-top: -56px; } }
.urlaub-preview-aside {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow);
}
#mitarbeiterName { scroll-margin-top: 140px; }
@media (prefers-reduced-motion: reduce) { .hero-cta { transition: none; } }

/* Alle Abschnitte im main auf dieselbe Kante wie Werkzeug und Kopf --
   sonst standen Info und FAQ wieder 1080 px breit unter 1360 px. Fliesstext
   bleibt dabei lesbar schmal. */
#main > section.container.wide { max-width: clamp(0px, 94vw, 1360px); }
#main > section.container.wide .tool-card > p,
#main > section.container.wide .faq-item p { max-width: 78ch; }

/* ── Vergleich ─────────────────────────────────────────────────────── */
.vergleich { margin-top: 40px; margin-bottom: 28px; max-width: clamp(0px, 94vw, 1360px); }
.vergleich h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; margin: 0 0 6px; }
.vergleich-lede { margin: 0 0 20px; color: var(--ink-3); }
.vergleich-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.vergleich-karte {
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.vergleich-karte h3 { font-size: 17px; margin: 0 0 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vergleich-karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vergleich-karte li { font-size: 15px; color: var(--ink-3); padding-left: 18px; position: relative; }
.vergleich-karte li::before { content: "–"; position: absolute; left: 0; color: var(--ink-4); }
.vergleich-hier { background: var(--white); border: 2px solid var(--blue); box-shadow: var(--shadow); }
.vergleich-hier h3 { color: var(--blue-2); }
.vergleich-hier li { color: var(--ink); }
.vergleich-hier li::before { content: "✓"; color: var(--blue); font-weight: 800; }
.vergleich-hier li.vergleich-grenze { color: var(--ink-3); font-size: 14px; }
.vergleich-hier li.vergleich-grenze::before { content: "i"; font-style: italic; }
.vergleich-marke {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--blue); color: var(--white);
}

/* ── Vorschau als Blatt Papier ─────────────────────────────────────────
   Der dunkle Rand kam nicht aus unserem CSS und nicht aus dem Seitenformat
   (das war schon DIN A4), sondern vom PDF-Viewer des Browsers: er legt einen
   Hintergrund um die Seite, den weder CSS noch URL-Parameter erreichen. Das
   Einbettungselement wird deshalb minimal groesser als das Blatt und der
   Ueberstand abgeschnitten -- in Chrome gemessen: kein Rand mehr. */
.urlaub-sheet { position: relative; background: #ffffff; border: 1px solid var(--line); }
.urlaub-sheet .pdf-preview-embed { position: absolute; inset: 0; }
.urlaub-sheet embed.pdf-preview-embed,
.urlaub-sheet .pdf-preview-embed embed {
  position: absolute; left: -8px; top: -8px;
  width: calc(100% + 16px); height: calc(100% + 22px);
}

/* ── Eingabefelder, weicher -- der Rahmen bleibt kraeftig genug ──────────
   #cbd5e1 statt des vorgeschlagenen #e2e8f0: auf Weiss waeren das 1,2 : 1,
   und ein Feld, das man kaum sieht, ist kein modernes Feld (WCAG 1.4.11). */
.form-field select, .form-field input[type="text"], .form-field input[type="date"], .form-field input[type="number"] {
  background: #f8fafc; border-radius: 10px; padding: 11px 14px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.form-field select:focus, .form-field input:focus {
  background: #ffffff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27, 73, 101, .15);
}

/* Schnellwahl fuer den Anspruch */
.schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.schnellwahl-knopf {
  min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2);
  font: 600 14px/1 var(--font-sans); cursor: pointer; font-variant-numeric: tabular-nums;
}
.schnellwahl-knopf:hover { border-color: var(--blue); color: var(--blue); }
.schnellwahl-knopf[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.schnellwahl-knopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (pointer: coarse) { .schnellwahl-knopf { min-height: 44px; } }

/* Vorlagen als grosse Knoepfe mit Datum */
.preset-bar { gap: 10px; }
.vorlage-knopf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 56px; padding: 9px 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--white); color: var(--ink);
  font-family: var(--font-sans); text-align: left; cursor: pointer;
}
.vorlage-knopf strong { font-size: 14px; }
.vorlage-knopf span { font-size: 12.5px; color: var(--ink-4); }
.vorlage-knopf:hover { border-color: var(--blue); background: var(--blue-tint); }
.vorlage-knopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Was ohne Tippen gefuellt wurde, blitzt kurz auf. */
@keyframes feld-gefuellt { from { background-color: #dcfce7; } to { background-color: #f8fafc; } }
.feld-gefuellt { animation: feld-gefuellt 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .feld-gefuellt { animation: none; background-color: #dcfce7; }
  .form-field select, .form-field input { transition: none; }
}

/* Feiertagsregel als Segment-Schalter */
@supports selector(:has(*)) {
  .feiertagsregel {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-top: 8px;
    background: #eef2f6; border-radius: 12px;
  }
  .feiertagsregel .arbeitswoche-tag {
    flex: 1 1 220px; justify-content: center; text-align: center;
    border: 0; background: transparent; color: var(--ink-3); font-weight: 600; border-radius: 9px;
  }
  .feiertagsregel .arbeitswoche-tag:hover { color: var(--ink); }
  .feiertagsregel .arbeitswoche-tag:has(input:checked) {
    background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,.12);
  }
}

/* Hauptknoepfe mit etwas Tiefe beim Zeigen */
.btn-primary { transition: background-color .15s, box-shadow .15s, transform .15s; }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(27,73,101,.55); }
}
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } .btn-primary:hover:not(:disabled) { transform: none; } }

/* Telefon: die Vorschau zwischen Eingabe und Liste -- wer eingetragen hat,
   sieht das Ergebnis, ohne unter der ganzen Liste danach zu suchen. */
@media (max-width: 900px) {
  .tool-layout .tool-card-stack { display: contents; }
  .tool-layout .tool-card-stack > .tool-card { margin: 0; }
  .tool-layout .tool-card-stack > .tool-card:nth-child(3) { order: 3; }
  .tool-layout > .urlaub-preview-aside { order: 2; }
}

.kosten-vorschau {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: #f1f5f9; font-size: 14px; color: var(--ink-2);
}
.kosten-vorschau:empty { display: none; }
.kosten-vorschau[data-state="warnung"] { background: var(--warn-soft); color: var(--warn-ink); }
.kosten-vorschau[data-state="fehler"] { background: var(--warn-soft); color: var(--warn-ink); }

/* 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; } }
/* Im dunklen Kopf des Planers hell auf dunkel. */
.tool-hero .werkstatt-nav a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #e3ebf1; }
.tool-hero .werkstatt-nav a:hover { border-color: #ffffff; color: #ffffff; }
.tool-hero .werkstatt-nav a[aria-current="page"] { background: #ffffff; border-color: #ffffff; color: var(--blue-2); }
.tool-hero .werkstatt-nav a:focus-visible { outline-color: #ffffff; }

.beispiel-hinweis {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--blue-tint); border: 1px solid var(--blue-soft); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--blue-2);
}
.beispiel-hinweis[hidden] { display: none; }
.beispiel-hinweis p { margin: 0; flex: 1 1 260px; }

.produkt-hinweis {
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-3);
}
.produkt-hinweis a { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* ── 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-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 (Fristen-Eingabe) ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.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"] {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
}
.form-field select:focus, .form-field input: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; }

.radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.radio-option input { margin-top: 3px; }
.radio-option span.hint { display: block; font-size: 12.5px; color: var(--ink-4); }

/* ── Ergebnis ── */
.result-box {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  background: var(--blue-tint);
}
.result-date {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue-2);
  margin: 0 0 4px;
}
.result-weekday { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }
.result-shifted {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--warn-ink);
  background: var(--warn-soft); border-radius: 999px; padding: 4px 12px;
  margin-bottom: 14px;
}

.breakdown { margin: 14px 0 0; padding: 0; list-style: none; }
.breakdown li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.breakdown li:first-child { border-top: none; }
.breakdown li b { color: var(--ink); }

/* ── Verlauf ── */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
.history-item:first-child { border-top: none; }
.history-item .meta { color: var(--ink-3); font-size: 12.5px; }
.history-empty { color: var(--ink-4); font-size: 14px; padding: 8px 0; }

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

/* ── Vorlagen (Dimension 8: Maximaler Werkzeug-Ertrag) ── */
.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; }

/* ── Formular + Live-Vorschau nebeneinander (Kanon: kukanilea-rechnung/-mahnung/-kassenbuch/
   -gwg/-fahrtenbuch). Kein Entwurf-Verlauf hier: die Mitarbeiter-/Abwesenheiten-Listen SIND
   der persistente Datensatz (gleiches Architektur-Prinzip wie kukanilea-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; }
.urlaub-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); }

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

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

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

/* 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 ──────────────────────────
 *
 * Der gemeinsame Kern laesst `mk-z-*` bewusst ohne Farbe. Was "Urlaub" von
 * "Krankheit" unterscheidet, ist eine Aussage dieses Werkzeugs -- im
 * Fristenrechner hiesse derselbe Klassenname etwas anderes.
 *
 * Nie allein durch Farbe (WCAG 1.4.1): jeder Zustand steht zusaetzlich im
 * `aria-label` der Zelle, das der Kern aus der Legende zusammensetzt. Die
 * Ueberschneidung mit Kollegen traegt darueber hinaus eine sichtbare Ecke,
 * weil sie sich mit jedem anderen Zustand ueberlagern kann und eine zweite
 * Hintergrundfarbe deshalb nicht in Frage kommt. *
 * Mit `#miniKalender` davor (2026-09-25): ohne ID gewann `.mk-tag` aus
 * minikalender.css -- gleiche Spezifitaet, spaeter geladen. Die Farben
 * standen nur in der Legende, eingetragener Urlaub war im Raster weiss.
 */
#miniKalender .mk-z-urlaub { background: #d7ead8; color: #1d4023; }
#miniKalender .mk-z-sonderurlaub { background: #dbe4f7; color: #1e3564; }
#miniKalender .mk-z-krankheit { background: #f6dcdc; color: #5a1f1f; }

.mk-z-team { position: relative; }
.mk-z-team::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  border-width: 0 7px 7px 0;
  border-style: solid;
  border-color: transparent #8a6ad1 transparent transparent;
}

/* Dunkel nur mit der Seite, nicht mit dem System -- siehe minikalender.css. */
:root[data-theme="dark"] .mk-z-urlaub { background: #1e3a25; color: #b7dcbd; }
:root[data-theme="dark"] .mk-z-sonderurlaub { background: #1e2c4d; color: #b8c9ea; }
:root[data-theme="dark"] .mk-z-krankheit { background: #452020; color: #e8b7b7; }
:root[data-theme="dark"] .mk-z-team::before { border-color: transparent #a98ae6 transparent transparent; }

/* ── Arbeitswoche ─────────────────────────────────────────────────── */

.arbeitswoche {
  border: 1px solid var(--line, #d8dee7);
  border-radius: 10px;
  padding: 10px 14px 14px;
  margin: 16px 0 0;
}

.arbeitswoche legend { font-size: 13px; font-weight: 600; padding: 0 6px; }

.arbeitswoche-tage { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* 44 Pixel Zielgroesse und `flex-wrap`, damit die sieben Schalter auf einem
 * 390-Pixel-Bildschirm umbrechen statt die Seite zu verbreitern. */
.arbeitswoche-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}

.arbeitswoche-tag:has(input:checked) { border-color: currentColor; font-weight: 600; }
.arbeitswoche-tag:has(input:focus-visible) { outline: 2px solid; outline-offset: 2px; }

/* Umschalter statt sichtbarer Kontrollkaestchen (2026-09-24). Das Kaestchen
   bleibt im Dokument und fokussierbar -- nur unsichtbar. `display: none`
   naehme es aus der Tastaturreihenfolge, und die Woche waere nur noch mit der
   Maus bedienbar. Nur wo `:has()` greift: sonst waere der Zustand gar nicht
   mehr zu sehen, und dann ist das sichtbare Kaestchen die bessere Antwort. */
@supports selector(:has(*)) {
  .arbeitswoche-tag { position: relative; justify-content: center; min-width: 52px; background: var(--white); transition: background-color .15s, color .15s, border-color .15s; }
  .arbeitswoche-tag input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .arbeitswoche-tag:hover { border-color: var(--blue); }
  .arbeitswoche-tag:has(input:checked) { background: var(--blue); border-color: var(--blue); color: var(--white); }
  .arbeitswoche-tag:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .arbeitswoche-tag { transition: none; } }

/* Der Kalender ist seit 2026-09-25 der Hauptweg und nutzt die volle
 * Kartenbreite. Die Datumsfelder darunter sind Kontrolle und Tastatur-
 * Rueckfall: gleiche Funktion, leiser gesetzt. */
.kalender-flaeche { margin-top: 14px; }
#miniKalender { margin-top: 8px; }
#miniKalenderHinweis { margin: 0; }
.zeitraum-felder { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.zeitraum-felder label { font-size: 0.8125rem; color: #5b6472; }

/* Feiertag: sichtbar auf den ersten Blick. Der Kern bringt einen blassen
 * Sandton mit, der neben Urlaub und Krankheit kaum auffaellt; hier ist der
 * Feiertag das, wonach man einen Monat absucht. Orange statt Rot, damit er
 * nicht mit "krank" (#f6dcdc) verwechselt wird. Kontrast #9a3412 auf
 * #ffedd5: 6,6:1. Der Punkt aus dem Kern bleibt -- nicht allein durch Farbe. */
#miniKalender { --mk-feiertag: #ffedd5; --mk-feiertag-ink: #9a3412; }
#miniKalender .mk-feiertag { font-weight: 700; }
#miniKalender .mk-legende-punkt.mk-z-feiertag { background: #ffedd5; border-color: #fdba74; }

/* Brueckentag: ein gestrichelter gruener Rahmen -- "hier lohnt ein Tag".
 * Gestrichelt ist zugleich das Nicht-Farb-Merkmal (WCAG 1.4.1). Eine Auswahl
 * ueberdeckt ihn, damit der gewaehlte Zeitraum eindeutig bleibt. */
#miniKalender .mk-z-bruecke:not(.mk-gewaehlt):not(.mk-vorschau) {
  border: 2px dashed #16a34a;
}
#miniKalender .mk-legende-punkt.mk-z-bruecke { border: 2px dashed #16a34a; background: transparent; }
:root[data-theme="dark"] #miniKalender { --mk-feiertag: #3b2412; --mk-feiertag-ink: #fdba74; }
:root[data-theme="dark"] #miniKalender .mk-z-bruecke:not(.mk-gewaehlt):not(.mk-vorschau) { border-color: #4ade80; }

/* Die Mitarbeitertabelle hat fuenf Spalten und braucht 404 Pixel. Bei 390
 * Pixel Fensterbreite schob sie die GANZE Seite nach rechts -- am 2026-09-17
 * im Browser gemessen: `scrollWidth` 457 gegen `clientWidth` 390.
 *
 * Der Behaelter dafuer war die ganze Zeit da; nur die Regel fehlte. Achtzehn
 * andere Werkzeuge tragen sie als eigene Kopie in ihrem Stylesheet, dieses
 * eine nicht -- und ein fehlendes Stueck CSS wird nie rot.
 * Gate: scripts/ops/check_tabellen_wrapper.py */
.prose-table-wrap { overflow-x: auto; }

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

/* ── "Ich" zuerst (2026-09-25) ─────────────────────────────────────
 * Die Ich-Felder stehen im selben Raster wie die Region. `display: contents`
 * nur, solange sie sichtbar sind -- sonst ueberstimmt es `hidden`. */
.ich-felder:not([hidden]) { display: contents; }
.optional { font-weight: 400; color: #5b6472; font-size: 0.8125rem; }
.team-bereich { margin-top: 18px; border-top: 1px solid #e5e7eb; padding-top: 14px; }
.team-bereich > summary {
  cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px;
  list-style: none;
}
.team-bereich > summary::-webkit-details-marker { display: none; }
.team-bereich > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.team-bereich[open] > summary { margin-bottom: 10px; }

/* ══ Designschicht "Werkstatt": dunkler Kopf des Planers (2026-09-25) ══
 * Der allgemeine Teil (Farben, Schrift, Karten, Knoepfe, Felder, Kalender)
 * liegt in assets/werkstatt-design.css und gilt fuer alle drei Seiten der
 * Werkstatt. Hier steht nur, was der Planer anders macht: sein Kopf ist
 * dunkel, der der Unterseiten hell. */
/* ── Kopf: Tinte statt Blau, mit feinem Punktraster ── */
.tool-hero {
  background-color: #121211;
  background-image: radial-gradient(rgba(250, 250, 249, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #d6d3d1;
}
.tool-hero h1 { color: #fafaf9; font-weight: 700; letter-spacing: -0.035em; }
.tool-hero p.lede { color: #d6d3d1; }
.hero-marken .tool-kicker,
.tool-herkunft { border-radius: var(--radius-sm); }
.hero-marken .tool-kicker { background: transparent; border-color: rgba(250, 250, 249, .22); color: #e7e5e4; }
.hero-mikro { color: #a8a29e; }
.hero-cta {
  border-radius: 8px; background: #fafaf9; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); font-weight: 700;
}
.hero-cta:hover { background: #e7e5e4; }
.tool-hero .werkstatt-nav a { border-radius: var(--radius-sm); background: transparent; border-color: rgba(250, 250, 249, .2); color: #d6d3d1; }
.tool-hero .werkstatt-nav a[aria-current="page"] { background: #fafaf9; border-color: #fafaf9; color: var(--ink); }

/* Vorteile: filigrane Liste statt Glaskarten. */
.hero-seite .privacy-note,
.vorteile li {
  background: none; border: 0; border-left: 2px solid rgba(250, 250, 249, .18);
  border-radius: 0; padding: 4px 0 4px 16px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.vorteile { gap: 18px; }
.vorteile strong { color: #fafaf9; font-size: 15px; }
.vorteile strong::before { color: #a3e635; }
.vorteile span { color: #a8a29e; }
.hero-seite .privacy-note { color: #d6d3d1; font-size: 13.5px; }

.tool-hero .werkstatt-nav a:focus-visible, .hero-cta:focus-visible { outline-color: #fafaf9; }
/* ══ Klicken statt Tippen, Raum nutzen (2026-09-25) ════════════════════ */

/* Anspruch: fuenf Kacheln als Hauptweg, das Zahlenfeld als leiser Rest. */
.feldtitel { display: block; font-size: 14px; font-weight: 600; color: #3f3f46; margin-bottom: 6px; }
.schnellwahl-kacheln { display: grid; grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 6px; margin: 0; }
.schnellwahl-kacheln .schnellwahl-knopf { min-height: 48px; min-width: 48px; font-size: 17px; font-weight: 700; padding: 0; }
.eigener-wert { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.eigener-wert label { font-size: 13px; color: var(--ink-4); font-weight: 500; margin: 0; }
.form-field .eigener-wert input[type="number"] { width: 6.5rem; min-height: 36px; padding: 6px 10px; font-size: 14px; color: var(--ink-3); }

/* Von/Bis: Kontrolle und Tastaturweg, nicht mehr Blickfang. */
.zeitraum-felder { gap: 10px 14px; }
.zeitraum-felder .form-field input[type="date"] {
  min-height: 38px; padding: 6px 10px; font-size: 14px; color: var(--ink-3); background: #fafaf9;
}

/* Vorlagen: auf dem Telefon wischbare Karten mit Einrasten. */
.vorlage-knopf { min-height: 64px; }
@media (max-width: 600px) {
  .preset-bar { scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .preset-bar .preset-label { display: none; }
  .preset-bar .vorlage-knopf { min-width: 150px; scroll-snap-align: start; }
}

/* Telefon: Karten bis an den Rand -- 40 px mehr fuer den Kalender. */
@media (max-width: 768px) {
  /* Die 94vw-Deckelung fuer alle Abschnitte liess hier 12 px Rand stehen. */
  #main > section.tool-section.container { padding-left: 0; padding-right: 0; max-width: none; }
  .tool-layout .tool-card,
  .tool-layout .urlaub-preview-aside {
    border-left: 0; border-right: 0; border-radius: 0; max-width: none;
  }
  .tool-layout .tool-card { padding: 22px 16px; }
  .tool-layout { gap: 12px; }
}

/* Schwebendes Aktionsfeld. Sichtbarkeit steuert das Skript. Der Schatten
 * ist hier Absicht: das Feld liegt UEBER der Seite, nicht in ihr. */
.aktions-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 320px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: auto 1fr; gap: 10px 10px; align-items: start;
  padding: 14px 16px 16px 10px;
  background: rgba(255, 255, 255, .96); border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.aktions-widget[hidden] { display: none; }
.widget-zu {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e5e5; border-radius: 6px; background: #ffffff; color: var(--ink); cursor: pointer;
}
.widget-zu:hover { border-color: var(--ink); }
.widget-zu:focus-visible, .aktions-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.widget-text p { margin: 0; }
.aktionsleiste-text { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.widget-rest { font-size: 13.5px; color: #52525b; margin-top: 2px !important; }
.widget-rest[data-state="warnung"] { color: #9a3412; font-weight: 600; }
.widget-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.widget-knoepfe .btn { min-height: 44px; padding: 0 16px; }
.widget-knoepfe .btn-primary { flex: 1 1 auto; justify-content: center; }
.aktions-widget .btn:disabled { background: #d6d3d1; color: #52525b; box-shadow: none; }
.aktions-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action); color: #fafaf9; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.aktions-fab[hidden] { display: none; }
@media (max-width: 767px) {
  .aktions-widget { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .aktions-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .aktions-widget:not([hidden]) { animation: widget-herein .25s cubic-bezier(.4, 0, .2, 1); }
  .aktions-fab:not([hidden]) { animation: widget-herein .2s ease-out; }
}
@keyframes widget-herein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }


/* ══ Eine Arbeitsflaeche (2026-09-25) ══════════════════════════════════ */

/* Kompakte Leiste: Anspruch | Region | Arbeitstage. Auf dem Telefon
 * untereinander, ab 900 px nebeneinander. */
.einstell-leiste {
  display: grid; gap: 16px 24px; margin: 12px 0 0; padding: 0 0 16px;
  border-bottom: 1px solid #e7e5e4;
}
@media (min-width: 900px) {
  .einstell-leiste { grid-template-columns: minmax(250px, auto) minmax(200px, 1fr) auto; align-items: start; }
}
.leisten-feld { min-width: 0; }
fieldset.leisten-feld { border: 0; padding: 0; margin: 0; }
fieldset.leisten-feld legend { font-size: 14px; font-weight: 600; color: #3f3f46; padding: 0; margin-bottom: 6px; }
.leisten-feld .arbeitswoche-tage { gap: 4px; }
.leisten-feld .arbeitswoche-tag { min-width: 40px; min-height: 44px; padding: 0 8px; justify-content: center; }
.leisten-feld .tool-card-hint { margin: 6px 0 0; font-size: 12.5px; }
.leisten-feld .schnellwahl-kacheln { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
.leisten-feld .eigener-wert { margin-top: 6px; }

.mehr-einstellungen { margin-top: 4px; border-bottom: 1px solid #e7e5e4; }
.mehr-einstellungen > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--ink); list-style: none;
}
.mehr-einstellungen > summary::-webkit-details-marker { display: none; }
.mehr-einstellungen > summary::before { content: "+"; font-weight: 700; width: 1em; }
.mehr-einstellungen[open] > summary::before { content: "–"; }
.mehr-einstellungen > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mehr-einstellungen[open] { padding-bottom: 14px; }
.haken-feld { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: #3f3f46; cursor: pointer; }
.halb-feld { margin-top: 6px; }

/* Brueckentag-Tipp: gruen abgesetzt, direkt ueber dem Kalender. */
.bruecken-tipp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 16px 0 14px; padding: 12px 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 3px solid #15803d; border-radius: 0 8px 8px 0;
}
.bruecken-tipp[hidden] { display: none; }
.bruecken-tipp-text { margin: 0; flex: 1 1 280px; font-size: 14.5px; color: #14532d; font-weight: 500; }
.bruecken-tipp-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.bruecken-tipp .btn-sm { min-height: 40px; }

/* Der freie Block rund um einen Brueckentag: sanft gruen hinterlegt. Der
 * Feiertag behaelt sein Ocker, der Brueckentag seinen gestrichelten Rand. */
#miniKalender .mk-z-brueckenblock:not(.mk-feiertag):not(.mk-gewaehlt):not(.mk-vorschau) { background: #e8f5ec; }

/* Rechte Spalte: Konto oben, Liste darin, Vorschau darunter. */
.seiten-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.seiten-spalte .tool-card { margin: 0; }
.konto-zahlen { margin: 6px 0 14px; }
.konto-rest { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.konto-zahl { font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.konto-einheit { font-size: 16px; font-weight: 600; color: #3f3f46; }
.konto-detail { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.konto-zahlen[data-state="warnung"] .konto-zahl { color: #9a3412; }
.liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e7e5e4; }
.liste-titel { margin: 0; font-size: 15px; }
@media (max-width: 768px) { .seiten-spalte { gap: 12px; } }

/* Leiste zweizeilig (Chrome, 2026-09-25): dreispaltig wurde die Region bei
 * rund 740 px Kartenbreite abgeschnitten und der Sonntag brach um. Oben
 * Anspruch und Region, darunter die Arbeitstage in einer Reihe. */
@media (min-width: 900px) {
  .einstell-leiste { grid-template-columns: auto minmax(0, 1fr); }
  .einstell-leiste > fieldset.leisten-feld { grid-column: 1 / -1; }
}
fieldset.leisten-feld .arbeitswoche-tage { flex-wrap: nowrap; }
fieldset.leisten-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
fieldset.leisten-feld legend { float: left; margin: 0 4px 0 0; }
fieldset.leisten-feld .tool-card-hint { margin: 0; }

/* Teambereich: die Klammer darf unter den Titel, nicht daneben quetschen. */
.team-bereich > summary { display: block; padding: 11px 0; }
.team-bereich > summary .optional { display: block; }

/* Telefon: der Kopf kostete gut einen Bildschirm, bevor das Werkzeug kam.
 * Die beiden Kennzeichnungen treten dort zurueck. */
@media (max-width: 600px) { .hero-marken { display: none; } }
.mehr-einstellungen > summary { display: block; padding: 11px 0; }
.mehr-einstellungen > summary .optional { display: block; padding-left: 1em; }
.mehr-einstellungen > summary::before { display: inline-block; }

/* ══ Telefon: Leiste einklappen, Vorschau als Vollbild (2026-09-25) ═══ */
.einstell-klapp > summary { list-style: none; }
.einstell-klapp > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) {
  .einstell-klapp > summary { display: none; }
}
@media (max-width: 767px) {
  .einstell-klapp { margin-top: 10px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafaf9; }
  .einstell-klapp > summary {
    display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 40px 8px 12px;
    cursor: pointer; font-size: 14px; color: var(--ink); position: relative;
  }
  .einstell-klapp > summary::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
  }
  .einstell-klapp[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .einstell-klapp > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .einstell-titel { font-weight: 700; }
  #einstellText { color: #3f3f46; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .einstell-klapp .einstell-leiste { margin: 0; padding: 4px 12px 14px; border-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .einstell-klapp > summary::after { transition: transform .15s; }
}

/* Vorschau: auf dem Telefon nicht am Seitenende, sondern als Vollbild. */
.vorschau-mobil { display: none; }
@media (max-width: 900px) {
  .vorschau-mobil { display: inline-flex; }
  .seiten-spalte .urlaub-preview-aside:not(.is-zoomed) { display: none; }
  .urlaub-preview-aside.is-zoomed { padding: 12px; }
}

/* ══ Status und Kontobalken (2026-09-25) ═══════════════════════════════ */
/* Beantragt: dieselbe Farbe wie Urlaub, aber schraffiert und gestrichelt
 * umrandet -- nicht allein durch Farbe unterschieden (WCAG 1.4.1). */
#miniKalender .mk-z-beantragt:not(.mk-gewaehlt):not(.mk-vorschau) {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .7) 0 3px, transparent 3px 7px);
  outline: 1.5px dashed #2f6b3a; outline-offset: -3px;
}
#miniKalender .mk-legende-punkt.mk-z-beantragt {
  background: #d7ead8 repeating-linear-gradient(135deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 4px);
  border: 1px dashed #2f6b3a;
}
.status-marke { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.status-marke[data-status="beantragt"] { border: 1px dashed #71717a; color: #3f3f46; }
.status-marke[data-status="genehmigt"] { background: #dcfce7; color: #14532d; }
.eintrag-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.status-knopf[aria-pressed="true"] { border-color: #15803d; color: #14532d; }

.konto-balken { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #e7e5e4; margin: 12px 0 6px; }
.konto-balken span { display: block; height: 100%; }
.kb-fest { background: var(--action); }
.kb-offen { background: #a8a29e repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px); }
.kb-rest { background: #e7e5e4; }
.konto-balken-legende { margin: 0; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kbl { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.kbl-fest { background: var(--action); }
.kbl-offen { background: #a8a29e repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 4px); }
.kbl-rest { background: #e7e5e4; border: 1px solid #d6d3d1; }
.sonder-hinweis { margin: 8px 0 0; padding: 10px 12px; background: #f5f5f4; border-left: 3px solid #71717a; border-radius: 0 6px 6px 0; }
.verfall-hinweis { margin: 0 0 12px; padding: 10px 12px; background: var(--warn-soft); color: var(--warn-ink); border-left: 3px solid #c2410c; border-radius: 0 6px 6px 0; font-size: 13.5px; }
.verfall-hinweis[hidden], .sonder-hinweis[hidden] { display: none; }

/* Betriebsferien: kraeftiger Rahmen unten -- vorgegeben, nicht gewaehlt. */
#miniKalender .mk-z-betriebsferien:not(.mk-gewaehlt) { box-shadow: inset 0 -4px 0 #57534e; }
#miniKalender .mk-legende-punkt.mk-z-betriebsferien { background: #ffffff; box-shadow: inset 0 -3px 0 #57534e; }
.betrieb-regeln .field-hint { margin: 2px 0 10px; }
.bf-block { margin-top: 8px; padding-top: 10px; border-top: 1px solid #e7e5e4; }
.bf-titel { margin: 0; font-weight: 600; font-size: 14px; }
.bf-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bf-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }

/* ── Blanko-Vorlagen: leise, am Seitenende ── */
.blanko-section { margin-top: 40px; }
.blanko-karte {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 18px 22px;
}
.blanko-thumb {
  width: 46px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #a8a29e; border-radius: 4px; background: #fafaf9; color: #78716c;
}
.blanko-text { flex: 1 1 320px; min-width: 0; }
.blanko-titel { margin: 0 0 4px; font-size: 16px; }
.blanko-text p { margin: 0; font-size: 14px; color: var(--ink-3); }
.blanko-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Schulferien: dezent schraffiert. Nicht auf Feiertagen (die behalten ihr
 * Punktraster) und nicht auf Auswahl/Vorschau. */
#miniKalender .mk-z-schulferien:not(.mk-feiertag):not(.mk-gewaehlt):not(.mk-vorschau) {
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(37, 99, 235, .13) 4px 8px);
}
#miniKalender .mk-legende-punkt.mk-z-schulferien {
  background: #ffffff repeating-linear-gradient(45deg, transparent 0 2px, rgba(37, 99, 235, .35) 2px 4px);
}
.kalender-ebenen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; font-size: 14px; }
.kalender-ebenen .field-hint { margin: 0; flex: 1 1 260px; }

/* ══ Personen, Antragsangaben, Unterschrift (2026-09-25) ═══════════════ */
/* Personenzeilen in der Kontospalte: feste Zahlenspalten, Knoepfe darunter.
 * Vorher lag der Loeschknopf rechts ausserhalb der 382 px breiten Spalte. */
.konto-karte .team-tabelle, .konto-karte .team-tabelle thead, .konto-karte .team-tabelle tbody { display: block; width: 100%; }
.konto-karte .team-tabelle tr {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 70px 70px; column-gap: 6px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #e7e5e4;
}
.konto-karte .team-tabelle th, .konto-karte .team-tabelle td { padding: 0; border: 0; min-width: 0; }
.konto-karte .team-tabelle th { font-size: 11px; }
.konto-karte .team-tabelle th:last-child { display: none; }
.konto-karte .team-tabelle td:first-child { overflow-wrap: anywhere; }
.konto-karte .team-tabelle td:last-child { grid-column: 1 / -1; width: auto; text-align: left; display: flex; gap: 6px; flex-wrap: wrap; }
.konto-karte .team-tabelle td:last-child:empty { display: none; }
.konto-karte .team-tabelle tr.wird-bearbeitet td:nth-child(3), .konto-karte .team-tabelle tr.wird-bearbeitet td:nth-child(4) { display: none; }
.konto-karte .team-tabelle tr.wird-bearbeitet { grid-template-columns: minmax(0, 1fr) 90px; row-gap: 8px; }
.team-tabelle input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #d4d4d8; border-radius: 6px; font: inherit; }
.team-tabelle input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.konto-karte .prose-table-wrap { overflow: visible; }

.gruppen-titel { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.gruppen-titel:first-of-type { margin-top: 4px; }
.link-knopf { background: none; border: 0; padding: 0 2px; font: inherit; color: #1B4965; text-decoration: underline; cursor: pointer; min-height: 24px; }
.link-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.antrag-hinweis { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }

.unterschrift-bereich { margin-top: 14px; border: 1px solid #e5e5e5; border-radius: 8px; padding: 0 14px; }
.unterschrift-bereich > summary { cursor: pointer; min-height: 44px; display: block; padding: 12px 0; font-weight: 600; font-size: 14px; list-style: none; }
.unterschrift-bereich > summary::-webkit-details-marker { display: none; }
.unterschrift-bereich > summary::before { content: "+ "; }
.unterschrift-bereich[open] > summary::before { content: "– "; }
.unterschrift-bereich > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.unterschrift-bereich[open] { padding-bottom: 14px; }
.sig-rahmen { position: relative; margin-top: 8px; }
.sig-canvas {
  display: block; width: 100%; height: 150px; border: 1px solid #d4d4d8; border-radius: 6px; touch-action: none;
  background: #fafaf9 radial-gradient(rgba(113, 113, 122, .18) 1px, transparent 1.2px) 0 0 / 12px 12px;
}
.sig-linie {
  position: absolute; left: 16px; right: 16px; bottom: 30px; border-bottom: 2px dashed #a8a29e;
  font-size: 11px; color: #78716c; padding-bottom: 2px; pointer-events: none;
}
.sig-knoepfe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.sig-knoepfe .tool-status { margin: 0; }

/* Personalien: erste Zeile der Arbeitsflaeche, volle Breite. */
.einstell-leiste > .personalien { grid-column: 1 / -1; display: block; }
.personalien-felder { display: grid; gap: 10px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .personalien-felder { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.personalien .field-hint { margin: 6px 0 0; font-size: 12.5px; }
.konto-person { margin: -2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.dok-wahl-zeile { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dok-wahl-zeile .feldtitel { margin: 0; }
.dok-wahl-zeile .field-hint { flex-basis: 100%; margin: 2px 0 0; }
.dok-wahl .segmented-btn[aria-pressed="true"] { background: var(--action); color: #fafaf9; }
.dok-wahl .segmented-btn { min-height: 36px; }
@media (pointer: coarse) { .dok-wahl .segmented-btn { min-height: 44px; } }

/* ══ Abschluss-Dialog (Bauweise esign/abschied) im Tintenton ═══════════ */
.abschieds-dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid #3f3f46; border-radius: 14px;
  background: #121211; color: #fafaf9; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
.abschieds-dialog::backdrop { background: rgba(18, 18, 17, .72); }
.abschied-innen { position: relative; padding: 30px 24px 24px; }
.abschied-schliessen {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 8px;
  background: transparent; color: #d6d3d1; font-size: 26px; line-height: 1; cursor: pointer;
}
.abschied-schliessen:hover { background: #27272a; color: #fff; }
.abschied-schliessen:focus-visible, .teilen-knopf:focus-visible, .abschieds-dialog .btn:focus-visible { outline: 2px solid #fafaf9; outline-offset: 2px; }
.abschied-kopf { text-align: center; margin-bottom: 18px; }
.erfolg-symbol {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; margin-bottom: 12px; background: #14532d; color: #bbf7d0;
}
.abschied-kopf h2 { margin: 0 0 8px; font-size: 20px; color: #fff; letter-spacing: -0.02em; }
.abschied-sub { margin: 0; font-size: 14px; line-height: 1.55; color: #d6d3d1; }
.abschied-pdf { width: 100%; justify-content: center; min-height: 48px; margin-bottom: 14px; background: #fafaf9; color: #09090b; }
.abschied-pdf:hover:not(:disabled) { background: #e7e5e4; }
.teilen-box { background: #1c1c1b; border: 1px solid #3f3f46; border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.teilen-titel { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #e7e5e4; }
.teilen-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr)); }
.teilen-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer;
}
.teilen-whatsapp { background: #075e54; }
.teilen-linkedin { background: #0a66c2; }
.teilen-mail { background: #3f3f46; }
.teilen-kopieren { background: #1B4965; }
.teilen-knopf:hover { filter: brightness(1.12); }
.teilen-status { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; color: #86efac; }
.teilen-status:empty { min-height: 0; margin: 0; }
.abschied-aktionen .btn { width: 100%; min-height: 48px; justify-content: center; }
.abschied-zweit { background: rgba(255, 255, 255, .08); color: #fafaf9; border: 1px solid rgba(255, 255, 255, .22); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Blanko: je Vorlage ansehen, herunterladen, teilen ── */
.blanko-liste { margin-top: 12px; display: grid; gap: 8px; }
.blanko-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 14px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; }
.blanko-name { margin: 0; font-weight: 600; font-size: 14px; }
.blanko-vorschau { margin-top: 12px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px; }
.blanko-vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.blanko-vorschau-titel { margin: 0; font-weight: 600; font-size: 14px; }
.blanko-blatt { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid #e7e5e4; }
.blanko-embed { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
/* Die Ueberschriften der Angaben stehen UEBER den Feldern -- die
 * float-Regel gilt nur der einzeiligen Arbeitstage-Leiste. */
fieldset.personalien legend { float: none; display: block; margin: 0 0 6px; }
fieldset.personalien { padding-top: 2px; }

/* ══ Mitlaufende Vorschau (2026-09-25) ═════════════════════════════════
 * Gemessen: sticky war gesetzt und wirkte nicht -- die Seitenspalte war
 * 1263 px hoch, die Arbeitsflaeche 1876 px, und ein klebendes Element
 * laeuft nur innerhalb seiner Spalte mit. Die Spalte streckt sich jetzt
 * auf die volle Zeilenhoehe; die Vorschau klebt unter der Kopfleiste und
 * ist nie hoeher als der Bildschirm. */
@media (min-width: 901px) {
  .tool-layout > .seiten-spalte { align-self: stretch; }
  .seiten-spalte .urlaub-preview-aside {
    position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
  }
}
.abschieds-dialog .abschied-pdf { background: #fafaf9; color: #09090b; }
.abschieds-dialog .abschied-pdf:hover:not(:disabled) { background: #e7e5e4; }

/* Telefon: Vorschau jederzeit mit einem Tipp -- unten links, damit sie das
 * Aktionsfeld unten rechts nicht verdeckt. */
.vorschau-fab { display: none; }
@media (max-width: 900px) {
  .vorschau-fab {
    position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55;
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
    border: 1px solid #d6d3d1; border-radius: 24px; background: #ffffff; color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); cursor: pointer;
  }
  .vorschau-fab[hidden] { display: none; }
  .vorschau-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}
.gestaltung > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-3); list-style: none; }
.gestaltung > summary::-webkit-details-marker { display: none; }
.gestaltung > summary::before { content: "+"; width: 1.2em; }
.gestaltung[open] > summary::before { content: "–"; }
.gestaltung > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gestaltung[open] { display: flex; flex-direction: column; gap: 14px; }
.ip-style-controls.gestaltung { margin-top: 10px; gap: 0; }

/* ── Brueckentag-Radar (2026-09-25) ─────────────────────────────────── */
.bruecken-tipp { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.radar-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.radar-titel { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #14532d; }
.radar-bester { margin: 0; font-size: 13px; color: #166534; }
.radar-bester:empty { display: none; }
.radar-klapp { grid-column: 1 / -1; border-top: 1px solid #bbf7d0; padding-top: 6px; }
.radar-klapp > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: #14532d; list-style: none; }
.radar-klapp > summary::-webkit-details-marker { display: none; }
.radar-klapp > summary::before { content: "+"; width: 1.1em; font-weight: 700; }
.radar-klapp[open] > summary::before { content: "–"; }
.radar-klapp > summary:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
.radar-liste { list-style: none; margin: 4px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.radar-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 6px; border-bottom: 1px solid #dcfce7; border-radius: 4px; }
.radar-zeile:last-child { border-bottom: 0; }
.radar-zeile:hover, .radar-zeile:focus-within { background: #dcfce7; }
.radar-was { margin: 0; font-size: 14px; color: #14532d; font-variant-numeric: tabular-nums; }
.radar-was strong { font-weight: 700; }
.radar-was small { display: block; font-size: 12.5px; color: #3f6212; }
.radar-marke { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-size: 11.5px; font-weight: 700; background: #15803d; color: #fff; vertical-align: 1px; }
.radar-zeile.vorbei .radar-was { color: #52525b; }
.radar-zeile.vorbei .radar-marke { background: #71717a; }
.radar-zeile .btn-sm { min-height: 40px; }
/* Der Block leuchtet im Kalender, solange die Zeile unter Maus oder Fokus ist. */
#miniKalender .mk-tag.mk-radar { box-shadow: inset 0 0 0 2px #15803d; background-color: #bbf7d0; }
@media (prefers-reduced-motion: no-preference) { #miniKalender .mk-tag { transition: background-color .15s, box-shadow .15s; } }
@media (max-width: 600px) { .bruecken-tipp { grid-template-columns: 1fr; } }

/* ── Radar neben dem Kalender (2026-09-25) ──────────────────────────────
   Gemessen an der ARBEITSFLAECHE, nicht am Fenster: bei 1440 px ist sie
   rund 780 px breit, bei 1024 px wegen der Vorschauspalte nur rund 570 --
   dort bliebe dem Kalender neben 300 px Radar kein Daumenmass mehr. */
#abwKarte { container-type: inline-size; container-name: flaeche; }
@container flaeche (min-width: 640px) {
  .plan-raster {
    display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 20px; align-items: start; margin-top: 14px;
  }
  .plan-raster > .kalender-flaeche { margin-top: 0; }
  /* Der Kalender bestimmt die Zeilenhoehe, das Radar scrollt darin:
     Hoehe 0 plus Mindesthoehe 100 % traegt nichts zur Zeile bei und
     fuellt sie danach ganz aus. */
  .plan-raster > .bruecken-tipp {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    align-self: stretch; height: 0; min-height: 100%; margin: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .plan-raster > .bruecken-tipp[hidden] { display: none; }
  .plan-raster .bruecken-tipp-text { flex: none; font-size: 14px; }
  .plan-raster .radar-kopf { flex-direction: column; gap: 2px; }
  .plan-raster .radar-liste { max-height: none; overflow: visible; }
  .plan-raster .radar-zeile { grid-template-columns: 1fr; }
  .plan-raster .radar-zeile .btn-sm { justify-self: start; }
  /* Zwei oder drei Monate brauchen die ganze Breite nebeneinander --
     dann steht das Radar wieder darueber. */
  .plan-raster[data-monate="2"], .plan-raster[data-monate="3"] { display: block; }
  .plan-raster[data-monate="2"] > .bruecken-tipp, .plan-raster[data-monate="3"] > .bruecken-tipp {
    display: grid; height: auto; min-height: 0; overflow: visible; margin: 0 0 14px;
  }
  .plan-raster[data-monate="2"] > .bruecken-tipp[hidden], .plan-raster[data-monate="3"] > .bruecken-tipp[hidden] { display: none; }
}

/* Arbeitstage bei 320 px: sieben Kacheln mit festen 40 px plus Abstaenden
 * sind 304 px -- mehr, als ein 320er-Telefon neben dem Kartenrand hat
 * (gemessen: 13 px Querscroll). Sieben gleiche Spalten statt fester Breite;
 * die Hoehe bleibt 44 px. */
fieldset.leisten-feld .arbeitswoche-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
fieldset.leisten-feld .arbeitswoche-tag { min-width: 0; padding: 0; }

/* Mehrfachauswahl im Radar: Haken vorn, der Text ist sein Label. */
.radar-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
.radar-check { width: 22px; height: 22px; margin: 0; accent-color: #15803d; cursor: pointer; align-self: center; }
.radar-zeile .radar-was { cursor: pointer; display: block; }
/* Die ganze Zeile ist die Tippflaeche des Hakens -- 22 px allein waeren zu klein. */
.radar-zeile .radar-was { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.radar-zeile.gesperrt .radar-was { opacity: .5; cursor: not-allowed; }
.radar-zeile.gesperrt .radar-check { cursor: not-allowed; }
.radar-sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0 2px; border-top: 1px solid #bbf7d0; margin-top: 4px; position: sticky; bottom: 0; background: #f0fdf4; }
.radar-sammel .btn-sm { min-height: 44px; }
.radar-sammel .btn-sm:disabled { opacity: .45; cursor: not-allowed; }
.radar-sammel-hinweis { margin: 0; font-size: 13px; color: #166534; flex: 1 1 180px; }
.radar-sammel-hinweis[data-state="warnung"] { color: #b45309; font-weight: 600; }
@container flaeche (min-width: 640px) {
  .plan-raster .radar-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .plan-raster .radar-zeile .btn-sm { grid-column: 2; }
}
/* Bundesland fuer die oesterreichischen Schulferien -- eine eigene Zeile. */
.kalender-ebenen .at-land { flex: 1 1 100%; max-width: 340px; margin: 2px 0 4px; }
.kalender-ebenen .at-land label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.kalender-ebenen .at-land select { width: 100%; min-height: 44px; }

/* Sichern, Wiederherstellen, Loeschen: eine Knopfgruppe am Listenkopf. */
.liste-kopf .daten-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.liste-kopf { flex-wrap: wrap; }