/* KUKANILEA Newsletter-Editor
 *
 * Zwei Zustände, kein Mischzustand (.claude/rules/webtool-workspace-contract.md):
 *   LANDING  erklärt, zeigt die Prüfung live, bietet Vorlagen an
 *   ARBEIT   App-Kopf, Bühne mit dem Newsletter, angedockter Inspector
 * Der Zustand steht am Wurzelelement: html[data-nl-modus="arbeit"].
 */

:root {
  --petrol: #0f4c5c;
  --petrol-dunkel: #0a3540;
  --petrol-hell: #16687c;
  --petrol-zart: #e7f1f3;
  --sand: #f6f4ef;
  --sand-dunkel: #ece8de;
  --linie: #dcd7cc;
  --linie-zart: #ebe7de;
  --text: #1b2226;
  --grau: #5a636a;
  --grau-hell: #8a939a;
  --rot: #b42318;
  --rot-zart: #fdecea;
  --gelb: #8a5a00;
  --gelb-zart: #fdf3dc;
  --blau: #1d5fa8;
  --blau-zart: #e8f0fb;
  --violett: #6a4c9c;
  --violett-zart: #f1ecf9;
  --gruen: #22704a;
  --gruen-zart: #e5f3ec;
  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(16, 32, 40, .06), 0 8px 24px rgba(16, 32, 40, .08);
  --schatten-stark: 0 2px 6px rgba(16, 32, 40, .08), 0 18px 48px rgba(16, 32, 40, .16);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}

img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container.wide { max-width: 1240px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--petrol); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 2px; }

/* ------------------------------------------------------------ Knöpfe */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: var(--radius-klein); border: 1px solid transparent;
  padding: 9px 16px; min-height: 40px; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: 7px 12px; min-height: 36px; font-size: .92rem; }
.btn-gross { padding: 13px 22px; min-height: 50px; font-size: 1.05rem; }
.btn-primary { background: var(--petrol); color: #fff; }
.btn-primary:hover { background: var(--petrol-hell); }
.btn-ghost { background: #fff; color: var(--petrol); border-color: var(--linie); }
.btn-ghost:hover { background: var(--sand); border-color: #cbc4b5; }
.btn-link {
  background: none; border: 0; color: var(--petrol); padding: 4px 2px; min-height: 0;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.btn-gefahr { background: #fff; color: var(--rot); border-color: #efc5c0; }
.btn-gefahr:hover { background: var(--rot-zart); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.nl-ikon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: var(--radius-klein); background: transparent; color: inherit;
  cursor: pointer; font: inherit; font-size: 1.4rem; line-height: 1;
}
.nl-ikon:hover { background: rgba(127, 127, 127, .14); }
.nl-ikon:disabled { opacity: .35; cursor: not-allowed; }

/* ------------------------------------------------------------ Kopf */

.site-header { background: var(--petrol); color: #fff; }
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; letter-spacing: .05em; }
.brand-sub { font-size: .82rem; opacity: .85; }

/* ------------------------------------------------------------ Landing */

.nl-hero {
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(22, 104, 124, .14), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, #fbfaf7 100%);
  border-bottom: 1px solid var(--linie-zart);
  padding: 56px 0 64px;
}
.nl-hero-raster { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) {
  .nl-hero-raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; }
}
.nl-kicker {
  margin: 0 0 14px; font-size: .85rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--petrol-hell);
}
.nl-hero h1 {
  margin: 0 0 18px; font-size: clamp(2rem, 4.2vw, 3.15rem); letter-spacing: -.02em;
  line-height: 1.08; color: var(--petrol-dunkel);
}
.nl-lede { margin: 0 0 26px; font-size: 1.14rem; color: #34404a; max-width: 58ch; }
.nl-hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.nl-fortsetzen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 10px 14px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.nl-fortsetzen[hidden] { display: none; }
.nl-lokal-hinweis {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; max-width: 56ch;
  font-size: .95rem; color: var(--grau);
}
.nl-lokal-hinweis svg { color: var(--petrol); flex: none; margin-top: 3px; }

/* Die Live-Prüfung im Hero -- dasselbe Herz wie im Editor. */
.nl-demo {
  background: #fff; border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: var(--schatten-stark); overflow: hidden;
}
.nl-demo-fenster {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #f3f1ec; border-bottom: 1px solid var(--linie-zart);
}
.nl-demo-fenster span { width: 11px; height: 11px; border-radius: 50%; background: #d8d2c6; }
.nl-demo-fenster em { margin-left: 8px; font-style: normal; font-size: .85rem; color: var(--grau); }
.nl-demo-koerper { padding: 18px 20px 20px; }
.nl-demo-label { display: block; font-size: .85rem; color: var(--grau); margin-bottom: 8px; }
.nl-demo-text {
  min-height: 150px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font-size: 1.02rem; line-height: 1.7; background: #fffefc;
}
.nl-demo-text:focus { outline: 3px solid rgba(22, 104, 124, .35); outline-offset: 1px; border-color: var(--petrol-hell); }
.nl-demo-status { margin: 10px 0 8px; font-size: .9rem; color: var(--grau); min-height: 1.4em; }
.nl-demo-funde { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 280px; overflow-y: auto; }

.nl-abschnitt { padding: 72px 0; }
.nl-hell { background: var(--sand); border-top: 1px solid var(--linie-zart); border-bottom: 1px solid var(--linie-zart); }
.nl-abschnitt h2 { margin: 0 0 12px; font-size: clamp(1.55rem, 2.6vw, 2.1rem); letter-spacing: -.01em; color: var(--petrol-dunkel); }
.nl-abschnitt-lede { margin: 0 0 30px; font-size: 1.06rem; color: #3b4650; max-width: 70ch; }
.nl-klein { font-size: .92rem; color: var(--grau); }

.nl-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .nl-karten-3, .nl-karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .nl-karten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nl-karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nl-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px 22px 20px; display: flex; flex-direction: column;
}
.nl-karte h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--petrol-dunkel); }
.nl-karte p { margin: 0 0 12px; color: #3b4650; }
.nl-karte-klein p { margin: 0; }
.nl-beispiel {
  margin-top: auto !important; padding: 9px 12px; border-radius: var(--radius-klein);
  background: var(--sand); font-size: .95rem;
}
.nl-beispiel del { color: var(--rot); text-decoration-thickness: 1.5px; margin-right: 6px; }
.nl-beispiel ins { color: var(--gruen); text-decoration: none; font-weight: 600; }
.nl-beispiel span { color: var(--gelb); }

.nl-zweispaltig { display: grid; gap: 32px; align-items: start; }
@media (min-width: 980px) { .nl-zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.nl-zweispaltig p { color: #3b4650; font-size: 1.04rem; }

.nl-vorher-nachher { margin: 0; display: grid; gap: 12px; }
.nl-vorher-nachher > div {
  position: relative; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 18px 20px 18px 74px; box-shadow: var(--schatten);
}
.nl-vorher-nachher p { margin: 0; font-size: 1.04rem; }
.nl-vn-marke {
  position: absolute; left: 18px; top: 18px; display: inline-grid; place-items: center;
  min-width: 40px; height: 28px; padding: 0 8px; border-radius: 999px;
  background: var(--petrol-zart); color: var(--petrol); font-weight: 700; font-size: .9rem;
}
.nl-vn-du { background: var(--violett-zart); color: var(--violett); }

.nl-laender { display: grid; gap: 12px; }
.nl-land {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px;
}
.nl-land h3 { margin: 0 0 6px; font-size: 1.02rem; }
.nl-land ul { margin: 0; padding-left: 20px; }
.nl-land li { margin: 4px 0; font-size: .95rem; color: #3b4650; }
.nl-land .nl-quelle { display: block; margin-top: 8px; font-size: .82rem; color: var(--grau); }

.nl-grenzen { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 80ch; }
.nl-grenzen li {
  padding: 14px 18px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--grau-hell);
  border-radius: var(--radius-klein); color: #3b4650;
}
.nl-grenzen strong { color: var(--text); }

.nl-faq details {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  margin: 0 0 10px; max-width: 86ch;
}
.nl-faq summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; position: relative; padding-right: 44px;
}
.nl-faq summary::-webkit-details-marker { display: none; }
.nl-faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.nl-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.nl-faq details p { margin: 0; padding: 0 18px 16px; color: #3b4650; }

/* Vorlagen: schematische Vorschau aus dem echten Aufbau der Vorlage. */
.nl-vorlagen-raster {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.nl-vorlage {
  display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer; padding: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nl-vorlage:hover { border-color: var(--petrol-hell); box-shadow: var(--schatten); }
@media (prefers-reduced-motion: no-preference) { .nl-vorlage:hover { transform: translateY(-2px); } }
.nl-vorlage-bild {
  display: block; padding: 16px 22px 0; background: var(--sand-dunkel); height: 168px; overflow: hidden;
  border-bottom: 1px solid var(--linie-zart);
}
.nl-skizze {
  background: #fff; border-radius: 6px 6px 0 0; padding: 12px 14px; height: 100%;
  display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.nl-skizze i { display: block; border-radius: 3px; background: #e3e0d8; flex: none; }
.nl-skizze .s-kopf { height: 8px; width: 38%; margin: 0 auto 4px; background: var(--s-akzent, var(--petrol)); opacity: .75; }
.nl-skizze .s-h { height: 9px; width: 70%; background: var(--s-akzent, var(--petrol)); opacity: .55; }
.nl-skizze .s-t { height: 5px; width: 100%; }
.nl-skizze .s-t2 { height: 5px; width: 84%; }
.nl-skizze .s-bild { height: 34px; width: 100%; background: #d6dde0; }
.nl-skizze .s-knopf { height: 12px; width: 34%; margin: 2px auto; border-radius: 4px; background: var(--s-akzent, var(--petrol)); }
.nl-skizze .s-titel { height: 30px; width: 100%; border-radius: 4px; background: var(--s-akzent, var(--petrol)); opacity: .3; }
.nl-vorlagen-filter { margin: 0 0 14px; }
.nl-skizze .s-reihe { display: flex; gap: 6px; }
.nl-skizze .s-reihe i { flex: 1; height: 26px; }
.nl-skizze .s-termin { height: 24px; width: 100%; background: #edf2f3; border-left: 3px solid var(--s-akzent, var(--petrol)); }
.nl-skizze .s-linie { height: 1px; width: 100%; }
.nl-vorlage-text { padding: 14px 16px 16px; }
.nl-vorlage-text strong { display: block; margin-bottom: 4px; color: var(--petrol-dunkel); font-size: 1.02rem; }
.nl-vorlage-text span { display: block; font-size: .9rem; color: var(--grau); line-height: 1.45; }
.nl-vorlage-text em {
  display: inline-block; margin-top: 8px; font-style: normal; font-size: .78rem; font-weight: 700;
  color: var(--petrol); background: var(--petrol-zart); border-radius: 999px; padding: 2px 9px;
}
.nl-vorlagen-weitere { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; color: var(--grau); }

.site-footer { background: var(--petrol-dunkel); color: #d7e3e6; font-size: .9rem; }
.ft-row { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; padding: 22px 20px; }
.site-footer a { color: #d7e3e6; }

/* ------------------------------------------------------------ Funde (gemeinsam) */

.nl-fund {
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: #fff;
  padding: 10px 12px; font-size: .94rem;
}
.nl-fund[data-aktiv="ja"] { border-color: var(--petrol-hell); box-shadow: 0 0 0 2px rgba(22, 104, 124, .18); }
.nl-fund-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; flex-wrap: wrap; }
.nl-marke {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--grau);
}
.nl-marke[data-kategorie="rechtschreibung"], .nl-marke[data-kategorie="grammatik"] { background: var(--rot-zart); color: var(--rot); }
.nl-marke[data-kategorie="typografie"] { background: var(--gelb-zart); color: var(--gelb); }
.nl-marke[data-kategorie="stil"], .nl-marke[data-kategorie="muster"] { background: var(--blau-zart); color: var(--blau); }
.nl-marke[data-kategorie="anrede"] { background: var(--violett-zart); color: var(--violett); }
.nl-marke[data-kategorie="newsletter"] { background: var(--gruen-zart); color: var(--gruen); }
.nl-marke[data-schwere="fehler"] { background: var(--rot-zart); color: var(--rot); }
.nl-marke[data-schwere="warnung"] { background: var(--gelb-zart); color: var(--gelb); }
.nl-fund-ort { font-size: .78rem; color: var(--grau); }
.nl-wechsel { margin: 2px 0 4px; }
.nl-wechsel del { color: var(--rot); text-decoration-thickness: 1.5px; }
.nl-wechsel ins { color: var(--gruen); text-decoration: none; font-weight: 700; }
.nl-wechsel .nl-pfeil { color: var(--grau-hell); margin: 0 6px; }
.nl-grund { margin: 0 0 8px; color: #3b4650; line-height: 1.45; }
.nl-fund-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-fund-aktionen .btn { min-height: 32px; padding: 5px 10px; font-size: .86rem; }
.nl-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.nl-vorschlag {
  font: inherit; font-weight: 700; color: var(--gruen); background: var(--gruen-zart);
  border: 1px solid #bfe0cf; border-radius: 6px; padding: 3px 10px; cursor: pointer; min-height: 32px;
}
.nl-vorschlag:hover { background: #d4ecdf; }

/* Unterstreichungen ohne DOM-Eingriff: CSS Custom Highlight API. */
::highlight(nl-rechtschreibung), ::highlight(nl-grammatik) {
  text-decoration: underline wavy #d03b2f; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
::highlight(nl-typografie) { text-decoration: underline wavy #c58a00; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
::highlight(nl-stil), ::highlight(nl-muster) { text-decoration: underline dotted #2f6fbf; text-decoration-thickness: 2px; text-underline-offset: 3px; }
::highlight(nl-anrede) { text-decoration: underline wavy #7b55b5; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
::highlight(nl-aktiv) { background-color: rgba(255, 213, 79, .45); }

/* ------------------------------------------------------------ Arbeitsmodus */

[data-nl-modus="arbeit"], [data-nl-modus="arbeit"] body { height: 100%; overflow: hidden; }
[data-nl-modus="arbeit"] body { display: flex; flex-direction: column; }
[data-nl-modus="arbeit"] .site-header,
[data-nl-modus="arbeit"] .site-footer,
[data-nl-modus="arbeit"] .tool-weiter,
[data-nl-modus="arbeit"] .skip-link { display: none; }
[data-nl-modus="arbeit"] #main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
[data-nl-modus="arbeit"] #main > :not(#editor) { display: none; }
[data-nl-modus="arbeit"] #editor { display: flex; }

.nl-editor[hidden] { display: none; }
.nl-editor { flex: 1; min-height: 0; flex-direction: column; background: #e9edef; }

.nl-appkopf {
  flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px 0 8px;
  background: var(--petrol-dunkel); color: #fff;
}
.nl-zurueck { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.nl-zurueck:hover { background: rgba(255, 255, 255, .12); }
.nl-projekt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.nl-projekt input {
  min-width: 0; width: min(360px, 100%); font: inherit; font-weight: 600; color: #fff;
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px;
}
.nl-projekt input:hover { border-color: rgba(255, 255, 255, .25); }
.nl-projekt input:focus { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); outline: none; }
.nl-speicherstand { font-size: .82rem; color: #b8cdd3; white-space: nowrap; }
/* Ein anderes Fenster hat den Entwurf übernommen: auf jeder Breite sichtbar,
   weil die Speicheranzeige im Kopf unter 960 px fehlt. */
.nl-konflikt {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 14px; background: var(--gelb-zart); color: #5a4100;
  border-bottom: 1px solid #ead9a8; font-size: .92rem;
}
.nl-konflikt[hidden] { display: none; }
.nl-konflikt p { margin: 0; flex: 1 1 320px; }
.nl-konflikt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-appkopf-aktionen { display: flex; align-items: center; gap: 6px; position: relative; }
.nl-appkopf .nl-ikon { color: #fff; }
.nl-appkopf .nl-ikon:hover { background: rgba(255, 255, 255, .14); }
.nl-appkopf .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.nl-appkopf .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.nl-appkopf .btn-primary { background: #fff; color: var(--petrol-dunkel); }
.nl-appkopf .btn-primary:hover { background: var(--petrol-zart); }

.nl-menue {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px;
  background: #fff; color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-stark); padding: 6px; display: flex; flex-direction: column;
}
.nl-menue[hidden] { display: none; }
.nl-menue button, .nl-menue a {
  display: block; text-align: left; font: inherit; color: inherit; text-decoration: none;
  background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.nl-menue button:hover, .nl-menue a:hover, .nl-menue button:focus-visible { background: var(--sand); }
.nl-menue hr { border: 0; border-top: 1px solid var(--linie-zart); margin: 4px 6px; }

.nl-arbeit { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 340px; }

.nl-leiste {
  min-height: 0; overflow-y: auto; background: #fff; border-right: 1px solid var(--linie);
  padding: 14px 12px 24px;
}
.nl-panel-titel {
  margin: 4px 4px 10px; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grau);
}
.nl-baustein-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.nl-baustein {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  font: inherit; font-size: .8rem; color: var(--text); text-align: center; line-height: 1.2;
  background: #fbfaf8; border: 1px solid var(--linie-zart); border-radius: 10px; cursor: pointer; min-height: 64px;
}
.nl-baustein:hover { border-color: var(--petrol-hell); background: var(--petrol-zart); }
.nl-baustein svg { color: var(--petrol); }
.nl-gliederung { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nl-glied {
  display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 2px 4px 2px 8px;
  border: 1px solid transparent; font-size: .88rem;
}
.nl-glied[aria-current="true"] { background: var(--petrol-zart); border-color: #b9d6dd; }
.nl-glied-name {
  flex: 1; min-width: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  padding: 7px 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nl-glied-name small { color: var(--grau); margin-left: 4px; }
.nl-glied .nl-ikon { width: 30px; height: 30px; font-size: 1rem; color: var(--grau); }
.nl-glied-fund { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); flex: none; }

.nl-buehne { min-height: 0; min-width: 0; position: relative; }
.nl-buehne-scroll { position: absolute; inset: 0; overflow: auto; padding: 22px 22px 40px; scroll-padding: 80px; }

.nl-posteingang {
  max-width: var(--nl-breite, 600px); margin: 0 auto 16px; background: #fff; border: 1px solid #d5dbde;
  border-radius: 12px; padding: 6px 14px;
}
.nl-pe-zeile { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f2; min-height: 44px; }
.nl-pe-zeile:last-child { border-bottom: 0; }
.nl-pe-zeile[hidden] { display: none; }
.nl-pe-zeile label { font-size: .82rem; font-weight: 600; color: var(--grau); }
.nl-pe-zeile input, .nl-zeile {
  font: inherit; font-size: .98rem; border: 0; background: transparent; padding: 9px 0; min-width: 0;
  outline: none; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
#nlBetreff { font-weight: 700; }
.nl-zeile:empty::before, .nl-feld-text:empty::before { content: attr(data-platzhalter); color: var(--grau-hell); pointer-events: none; }
.nl-pe-rechts { display: flex; align-items: center; gap: 6px; }
.nl-vorschlag-knopf {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--petrol); background: var(--petrol-zart);
  border: 1px solid #c5dde3; border-radius: 999px; padding: 3px 10px; cursor: pointer; min-height: 28px; white-space: nowrap;
}
.nl-vorschlag-knopf:hover { background: #d6e8ec; }
.nl-vorschlag-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nl-vorschlag-liste button { width: 100%; text-align: left; font: inherit; font-size: .92rem; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.nl-vorschlag-liste button:hover { border-color: var(--petrol-hell); background: var(--petrol-zart); }
.nl-vorschlag-liste small { color: var(--grau); font-size: .78rem; }
.nl-vorschlag-liste small[data-lang="ja"] { color: var(--gelb); }
.nl-lesbarkeit { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: .84rem; color: var(--grau); }
.nl-lesbarkeit strong { color: var(--text); }
.nl-zaehler { font-size: .78rem; color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-zaehler[data-zustand="lang"] { color: var(--gelb); font-weight: 700; }
.nl-pe-zeile:focus-within { border-bottom-color: var(--petrol-hell); }

.nl-blatt-rahmen { background: var(--nl-seite, #eef1f3); border-radius: 12px; padding: 22px 0; max-width: calc(var(--nl-breite, 600px) + 48px); margin: 0 auto; }
.nl-blatt {
  width: 100%; max-width: var(--nl-breite, 600px); margin: 0 auto; background: var(--nl-flaeche, #fff);
  border-radius: var(--nl-ecken, 6px); color: var(--nl-text, #1f2933);
  font-family: var(--nl-schrift, Arial, Helvetica, sans-serif); font-size: var(--nl-groesse, 16px);
  line-height: 1.6; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); overflow: hidden;
}

/* Ein Baustein auf der Bühne */
.nl-b { position: relative; padding: 8px 32px; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .12s ease; }
.nl-b:hover { outline: 1px dashed #9fbfc7; }
.nl-b[data-gewaehlt="ja"] { outline: 2px solid var(--petrol-hell); }
.nl-b[data-typ="kopf"] { padding-top: 26px; padding-bottom: 10px; }
.nl-b[data-typ="ueberschrift"] { padding-top: 20px; }
.nl-b[data-typ="knopf"] { padding-top: 14px; padding-bottom: 14px; }
.nl-b[data-typ="fuss"] { background: var(--nl-fuss, #f6f8f9); padding: 22px 32px 26px; text-align: center; }
.nl-b[data-typ="trenner"] hr { border: 0; border-top: 1px solid var(--nl-linie, #dfe3e6); margin: 12px 0; }
.nl-b[data-typ="abstand"] { min-height: 24px; }

/* Die Werkzeuge stehen ÜBER dem Baustein, nicht in ihm: am 2026-10-02
   gemessen deckten sie in sechs Bausteinarten Inhalt zu, im Menü alle drei
   Punkte. Beim ersten Baustein ist darüber kein Platz -- die Bühne schneidet
   ab --, dort stehen sie innen. */
.nl-b-leiste {
  position: absolute; right: 6px; bottom: calc(100% + 2px); z-index: 5; display: none; gap: 2px;
  background: var(--petrol-dunkel); border-radius: 8px; padding: 2px; box-shadow: var(--schatten);
}
#nlBlatt > .nl-einfuege:first-child + .nl-b > .nl-b-leiste { bottom: auto; top: 4px; }
#nlBlatt > .nl-einfuege:first-child + .nl-b > .nl-b-name { top: 4px; }
.nl-b { scroll-margin-top: 64px; }
.nl-b[data-gewaehlt="ja"] > .nl-b-leiste { display: flex; }
.nl-b-leiste button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.nl-b-leiste button:hover { background: rgba(255, 255, 255, .16); }
.nl-b-name { position: absolute; left: 8px; top: -18px; display: none; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: var(--petrol-hell); color: #fff; font-family: var(--schrift); }
.nl-b[data-gewaehlt="ja"] > .nl-b-name { display: block; }

.nl-einfuege { display: flex; justify-content: center; height: 0; position: relative; z-index: 4; }
.nl-einfuege button {
  position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #b9d6dd;
  background: #fff; color: var(--petrol); font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity .12s ease; display: grid; place-items: center; padding: 0;
}
.nl-blatt:hover .nl-einfuege button, .nl-einfuege button:focus-visible { opacity: 1; }

/* Text auf der Bühne -- so nah am Export wie möglich */
.nl-feld-text { outline: none; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; }
.nl-feld-text:focus { box-shadow: 0 0 0 2px rgba(22, 104, 124, .22); }
.nl-reich p { margin: 0 0 1em; }
.nl-reich p:last-child, .nl-reich ul:last-child, .nl-reich ol:last-child { margin-bottom: 0; }
.nl-reich ul, .nl-reich ol { margin: 0 0 1em; padding-left: 24px; }
.nl-reich li { margin: 0 0 6px; }
.nl-reich a { color: var(--nl-link, var(--nl-akzent, #0f4c5c)); }
.nl-blatt h1, .nl-blatt h2 { margin: 0; color: var(--nl-ueberschrift, #0f4c5c); font-weight: bold; }
.nl-blatt h1 { font-size: 28px; line-height: 1.25; }
.nl-blatt h2 { font-size: 22px; line-height: 1.25; }
.nl-kopf-name { margin: 0; font-size: 22px; font-weight: bold; letter-spacing: .02em; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-knopf {
  display: inline-block; padding: 14px 26px; border-radius: var(--nl-ecken, 6px); font-weight: bold;
  background: var(--nl-akzent, #0f4c5c); color: var(--nl-knopftext, #fff); min-width: 60px; text-align: center;
}
.nl-knopf-klein { padding: 10px 18px; font-size: .94em; }
.nl-ausr-mitte { text-align: center; }
.nl-ausr-rechts { text-align: right; }
.nl-bildplatz {
  display: grid; place-items: center; gap: 4px; min-height: 140px; border: 2px dashed #c5d0d4; border-radius: 8px;
  background: #f4f7f8; color: var(--grau); font-family: var(--schrift); font-size: .9rem; text-align: center; padding: 14px;
  cursor: pointer; width: 100%;
}
.nl-bildplatz:hover { border-color: var(--petrol-hell); color: var(--petrol); }
.nl-b img { display: block; max-width: 100%; height: auto; border-radius: min(var(--nl-ecken, 6px), 12px); }
.nl-bild-mitte img { margin: 0 auto; }
.nl-beschriftung { margin: 8px 0 0; font-size: 13px; color: var(--nl-leise, #7b8590); text-align: center; }

/* --- Abschnittsflächen auf der Bühne: dieselben Farben wie im Export --- */
.nl-b[data-flaeche="hell"] { background: var(--nl-hell, #eef4f6); color: var(--nl-hell-text, inherit); }
.nl-b[data-flaeche="akzent"] { background: var(--nl-akzent, #0f4c5c); color: var(--nl-auf-akzent, #fff); }
.nl-b[data-flaeche="dunkel"] { background: var(--nl-dunkel, #10232b); color: var(--nl-auf-dunkel, #fff); }
.nl-b[data-flaeche="akzent"] :is(h1, h2, h3), .nl-b[data-flaeche="dunkel"] :is(h1, h2, h3),
.nl-b[data-flaeche="akzent"] .nl-reich a, .nl-b[data-flaeche="dunkel"] .nl-reich a { color: inherit; }
.nl-b[data-flaeche="akzent"] .nl-knopf:not(.nl-knopf-zweit) { background: var(--nl-flaeche, #fff); color: var(--nl-akzent, #0f4c5c); }
.nl-b[data-flaeche] .nl-oberzeile { color: inherit; opacity: .85; }
.nl-b[data-flaeche]:not([data-typ="titel"]) { padding-top: 18px; padding-bottom: 18px; }
.nl-b[data-abstand="l"] { padding-top: 34px; padding-bottom: 34px; }
.nl-b[data-abstand="s"] { padding-top: 6px; padding-bottom: 6px; }

/* --- Titelbereich --- */
.nl-b[data-typ="titel"] { padding-top: 34px; padding-bottom: 34px; }
.nl-titel { display: grid; gap: 22px; }
.nl-titel[data-layout="bild-rechts"] { grid-template-columns: 1.1fr .9fr; align-items: center; }
.nl-titel[data-layout="mitte"] { text-align: center; }
.nl-titel[data-layout="mitte"] .nl-titel-knoepfe { justify-content: center; }
.nl-titel[data-layout="bild-hinten"] {
  min-height: 300px; align-items: center; color: #fff; border-radius: min(var(--nl-ecken, 6px), 12px); padding: 32px 24px;
  background: linear-gradient(90deg, rgba(8, 12, 16, .8), rgba(8, 12, 16, .35)), var(--nl-titelbild, none) center / cover, #3a4750;
}
.nl-titel[data-layout="bild-hinten"] :is(h1, .nl-oberzeile, .nl-unterzeile) { color: #fff; opacity: 1; }
.nl-titel[data-layout="bild-hinten"] .nl-knopf-zweit { color: #fff; }
.nl-titel h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 10px; }
.nl-oberzeile { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nl-akzent, #0f4c5c); }
.nl-unterzeile { margin: 0; font-size: 1.08em; line-height: 1.55; opacity: .88; }
.nl-titel-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nl-knopf-zweit { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.nl-knopf-breit { display: block; width: 100%; }

/* --- Vorteile, Fragen, Linkliste --- */
.nl-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.nl-kachel { background: var(--nl-box, #edf4f6); border-radius: min(calc(var(--nl-ecken, 6px) + 4px), 16px); padding: 16px; }
.nl-b[data-flaeche="hell"] .nl-kachel { background: var(--nl-flaeche, #fff); }
.nl-b[data-flaeche="akzent"] .nl-kachel, .nl-b[data-flaeche="dunkel"] .nl-kachel { background: rgba(255, 255, 255, .12); }
.nl-kachel h3 { margin: 10px 0 4px; font-size: 1.02em; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-kachel p { margin: 0; font-size: .95em; }
.nl-symbol {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--nl-akzent, #0f4c5c); color: var(--nl-knopftext, #fff); font-size: 1.3rem; line-height: 1; padding: 0;
}
.nl-symbol:hover { filter: brightness(1.1); }
.nl-symbol:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 2px; }
.nl-fragen { margin-top: 10px; border-top: 1px solid var(--nl-linie, #dfe3e6); }
.nl-frage { border-bottom: 1px solid var(--nl-linie, #dfe3e6); padding: 12px 0; }
.nl-frage-text { margin: 0 0 4px; font-weight: bold; }
.nl-antwort { margin: 0; opacity: .9; }
.nl-linkliste { display: grid; gap: 10px; max-width: 440px; margin: 0 auto; }

/* --- Kontakt, Preise, Galerie (dieselben Bauteile wie auf der Seite) --- */
.nl-nummer { cursor: default; font-weight: 800; font-size: 1.15rem; }
.nl-b[data-flaeche="akzent"] .nl-symbol { background: var(--nl-flaeche, #fff); color: var(--nl-akzent, #0f4c5c); }
.nl-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); grid-template-rows: auto 1fr; grid-template-areas: "kopf wege" "daten wege"; gap: 6px 28px; align-items: start; }
.nl-kontakt-kopf { grid-area: kopf; }
.nl-kontakt-kopf h2 { margin: 0 0 6px; }
.nl-kontakt-name { margin: 0; font-weight: bold; }
.nl-kontakt-wege { grid-area: wege; display: grid; gap: 10px; }
.nl-kontakt-daten { grid-area: daten; }
.nl-kontakt-adresse { margin: 0 0 12px; white-space: pre-line; }
.nl-weg { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 8px 14px; border-radius: var(--nl-ecken, 6px); box-shadow: inset 0 0 0 2px currentColor; text-align: center; }
.nl-weg-erst { background: var(--nl-akzent, #0f4c5c); color: var(--nl-knopftext, #fff); box-shadow: none; }
.nl-b[data-flaeche="akzent"] .nl-weg-erst { background: var(--nl-flaeche, #fff); color: var(--nl-akzent, #0f4c5c); }
.nl-weg-titel { font-weight: bold; }
.nl-weg-wert { font-size: .9em; opacity: .9; min-width: 10ch; overflow-wrap: anywhere; }
.nl-weg-fest { opacity: .72; }
.nl-weg-fehler, .nl-weg-erst.nl-weg-fehler { box-shadow: 0 0 0 3px var(--rot); }
.nl-zeiten td + td { text-align: right; white-space: nowrap; }
.nl-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 22px; align-items: stretch; }
.nl-paket { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--nl-box, #edf4f6); border-radius: min(calc(var(--nl-ecken, 6px) + 4px), 16px); padding: 22px 16px 16px; }
.nl-b[data-flaeche="hell"] .nl-paket { background: var(--nl-flaeche, #fff); }
.nl-b[data-flaeche="akzent"] .nl-paket, .nl-b[data-flaeche="dunkel"] .nl-paket { background: rgba(255, 255, 255, .12); }
.nl-paket.nl-hervor { box-shadow: inset 0 0 0 2px var(--nl-akzent, #0f4c5c); }
.nl-b[data-flaeche="akzent"] .nl-paket.nl-hervor, .nl-b[data-flaeche="dunkel"] .nl-paket.nl-hervor { box-shadow: inset 0 0 0 2px currentColor; }
.nl-paket-marke { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 3px 12px; border-radius: 999px; background: var(--nl-akzent, #0f4c5c); color: var(--nl-knopftext, #fff); font-size: 12px; font-weight: 800; white-space: nowrap; }
.nl-paket h3 { margin: 0; font-size: 1.05em; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-paket-preis { margin: 4px 0 0; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-b[data-flaeche="akzent"] :is(.nl-paket h3, .nl-paket-preis), .nl-b[data-flaeche="dunkel"] :is(.nl-paket h3, .nl-paket-preis) { color: inherit; }
.nl-paket-zusatz { margin: 0; font-size: .9em; opacity: .8; }
.nl-paket-punkte { margin: 10px 0 12px; white-space: pre-line; font-size: .95em; flex: 1; }
.nl-pakete-hinweis { margin: 14px 0 0; text-align: center; font-size: .88em; opacity: .8; }
.nl-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nl-galerie[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-galerie[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl-galerie[data-ziel="ja"] { outline: 3px dashed var(--petrol-hell); outline-offset: 4px; }
.nl-galerie-bild { margin: 0; }
.nl-galerie-bild img { width: 100%; cursor: pointer; }
.nl-galerie[data-format="43"] .nl-galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.nl-galerie[data-format="11"] .nl-galerie-bild img { aspect-ratio: 1; object-fit: cover; }
.nl-galerie-platz { min-height: 110px; }
.nl-galerie-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-top: 12px; }
.nl-galerie-zeile img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; grid-row: span 2; }
.nl-galerie-zeile .nl-feld { margin: 0; }
.nl-galerie-zeile button { justify-self: start; }
@media (max-width: 700px) {
  .nl-kontakt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "wege" "daten"; gap: 14px; }
  .nl-galerie, .nl-galerie[data-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-galerie[data-spalten="2"] { grid-template-columns: minmax(0, 1fr); }
}

/* --- Knopfreihen statt Auswahllisten (ein Klick, alle Optionen sichtbar) --- */
.nl-segmente { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-segmente button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 10px;
  border: 1.5px solid #cfd8dc; background: #fff; color: var(--text, #1f2933); font: inherit; font-size: .92rem; cursor: pointer;
}
.nl-segmente button:hover { border-color: var(--petrol-hell); }
.nl-segmente button[aria-checked="true"] { border-color: var(--petrol); background: #e8f2f4; color: var(--petrol-dunkel); font-weight: 700; box-shadow: inset 0 0 0 1px var(--petrol); }
.nl-segmente button:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 2px; }
.nl-muster { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); flex: none; }
.nl-abschnitt-titel { margin-top: 18px; }
.nl-feld-titel { margin: 14px 0 6px; font-size: .82rem; font-weight: 700; color: var(--grau); }
.nl-feld-titel:first-child { margin-top: 0; }
.nl-stile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nl-stil {
  display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 1.5px solid #d5dde0; background: #fff; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--text, #1f2933); text-align: center; min-height: 44px;
}
.nl-stil:hover { border-color: var(--petrol-hell); }
.nl-stil[aria-checked="true"] { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); background: #f0f7f8; font-weight: 700; }
.nl-stil:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 2px; }
.nl-stil-vorschau {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 40px; padding: 0 8px;
  border-radius: var(--s-ecken); background: var(--s-flaeche); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.nl-stil-vorschau i { flex: 1; height: 8px; border-radius: 4px; background: var(--s-ue); opacity: .85; }
.nl-stil-vorschau b { font-family: var(--s-schrift); font-size: .78rem; padding: 3px 8px; border-radius: var(--s-ecken); background: var(--s-akzent); color: var(--s-knopf); }
.nl-symbolraster { display: grid; grid-template-columns: repeat(6, 44px); gap: 6px; }
.nl-symbolraster button {
  width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #dbe3e6; background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0;
}
.nl-symbolraster button:hover { border-color: var(--petrol-hell); }
.nl-symbolraster button[aria-selected="true"] { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); background: #e8f2f4; }
@media (pointer: coarse) {
  .nl-segmente button { min-height: 44px; }
  /* Finger statt Maus: die Werkzeuge am gewählten Baustein und das "+" dazwischen. */
  .nl-b-leiste button { width: 44px; height: 44px; }
  /* Das Plus direkt über dem gewählten Baustein läge unter seinen Werkzeugen;
     Einfügen geht dort über die Daumenleiste. */
  .nl-einfuege:has(+ .nl-b[data-gewaehlt="ja"]) button { visibility: hidden; }
  .nl-einfuege button { width: 36px; height: 36px; top: -18px; opacity: 1; }
  .nl-blatt-zu { min-width: 44px; min-height: 44px; }
}

/* --- Was entsteht: Newsletter oder Landingpage --- */
.nl-artwahl { max-width: var(--nl-breite, 600px); margin: 0 auto 12px; }
.nl-artwahl .nl-feld { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nl-artwahl .nl-feld > span { font-size: .82rem; font-weight: 700; color: var(--grau); }
[data-nl-art="landingpage"] .nl-blatt { border-radius: 4px; }
[data-nl-art="landingpage"] .nl-b { padding-left: clamp(20px, 4%, 40px); padding-right: clamp(20px, 4%, 40px); }
[data-nl-art="landingpage"] .nl-blatt h1 { font-size: 36px; }
[data-nl-art="landingpage"] .nl-blatt h2 { font-size: 26px; }
.nl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nl-bildtext { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items: start; }
.nl-bildtext[data-seite="rechts"] { grid-template-columns: 3fr 2fr; }
.nl-bildtext[data-seite="rechts"] > :first-child { order: 2; }
.nl-spalte h2, .nl-bildtext h2 { font-size: 19px; margin-bottom: 8px; }
.nl-spalte-knopf, .nl-unter-knopf { margin-top: 14px; }
.nl-termin { background: var(--nl-box, #edf4f6); border-left: 4px solid var(--nl-akzent, #0f4c5c); border-radius: 8px; padding: 16px 18px; }
.nl-termin h2 { font-size: 20px; margin-bottom: 6px; }
.nl-termin-zeile { margin: 0 0 4px; font-weight: bold; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.nl-termin-zeile input { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, .6); padding: 2px 6px; color: inherit; }
.nl-termin-zeile input:hover, .nl-termin-zeile input:focus { border-color: #b9d6dd; background: #fff; }
.nl-zitat { border-left: 3px solid var(--nl-akzent, #0f4c5c); padding: 4px 0 4px 18px; }
.nl-zitat .nl-feld-text:first-child { font-size: 1.12em; font-style: italic; }
.nl-zitat .nl-quelle { margin-top: 8px; font-size: 14px; color: var(--nl-leise, #7b8590); }
.nl-fuss-zeile { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--nl-leise, #7b8590); }
.nl-fuss-zeile strong { color: inherit; }
.nl-fuss-links { margin-top: 10px; font-size: 13px; color: var(--nl-leise, #7b8590); }
.nl-fuss-links span { text-decoration: underline; }
.nl-social { text-align: center; font-size: 15px; }
.nl-produkt h2 { font-size: 20px; }
.nl-preis { margin: 0 0 14px; font-size: 1.25em; font-weight: bold; }
.nl-alter-preis { font-size: .8em; font-weight: normal; color: var(--nl-leise, #7b8590); text-decoration: line-through; }
.nl-gutschein { border: 2px dashed var(--nl-akzent, #0f4c5c); border-radius: 10px; background: var(--nl-box, #edf4f6); padding: 18px 20px; text-align: center; }
.nl-code-text { margin: 0 0 8px; font-family: "Courier New", Courier, monospace; font-size: 26px; font-weight: bold; letter-spacing: .08em; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-tabelle { width: 100%; border-collapse: collapse; }
.nl-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--nl-linie, #dfe3e6); vertical-align: top; }
.nl-tabelle td + td { text-align: right; }
.nl-tabelle tr[data-kopf="ja"] td { font-weight: bold; color: var(--nl-ueberschrift, #0f4c5c); }
.nl-menue-zeile { margin: 0; font-size: 15px; font-weight: bold; color: var(--nl-link, #0f4c5c); }
.nl-menue-trenner { color: var(--nl-linie, #c8ced2); font-weight: normal; }
.nl-webversion { margin: -14px 0 10px; text-align: right; font-size: 12px; color: var(--nl-leise, #7b8590); text-decoration: underline; font-family: var(--schrift); }
.nl-gemerkt { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.nl-gemerkt li { display: flex; align-items: center; gap: 4px; border: 1px solid var(--linie-zart); border-radius: 8px; padding: 0 2px 0 8px; font-size: .88rem; }
.nl-gemerkt .nl-ikon { width: 30px; height: 30px; font-size: 1rem; color: var(--grau); }
.nl-html-block { font-family: var(--schrift); font-size: .9rem; color: var(--grau); background: #f6f6f4; border: 1px dashed #cfcac0; border-radius: 8px; padding: 14px; }

@media (max-width: 560px) {
  .nl-zwei, .nl-bildtext, .nl-bildtext[data-seite="rechts"] { grid-template-columns: 1fr; }
  .nl-bildtext[data-seite="rechts"] > :first-child { order: 0; }
  .nl-b { padding-left: 18px; padding-right: 18px; }
}

.nl-buehne-fuss {
  max-width: var(--nl-breite, 600px); margin: 14px auto 0; display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--grau);
}
.nl-recht { display: flex; gap: 14px; }
.nl-recht a { color: var(--grau); }

/* Inspector: dockt an, volle Höhe, eigener Scroll. */
.nl-inspektor { min-height: 0; overflow-y: auto; background: #fff; border-left: 1px solid var(--linie); }
.nl-blatt-kopf { display: none; }
.nl-panel { padding: 16px 16px 18px; border-bottom: 1px solid var(--linie-zart); }
.nl-panel-text { margin: 0 0 10px; font-size: .92rem; color: #3b4650; }
.nl-pruef-status { font-size: .92rem; margin: 0 0 10px; color: var(--grau); }
.nl-pruef-status strong { color: var(--text); }
.nl-pruef-status[data-zustand="sauber"] { color: var(--gruen); }
.nl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.nl-chip {
  font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 999px; min-height: 30px;
  border: 1px solid var(--linie); background: #fff; color: var(--grau); cursor: pointer;
}
.nl-chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.nl-chip b { font-variant-numeric: tabular-nums; margin-left: 3px; }
.nl-sammel { margin: 0 0 10px; }
.nl-sammel[hidden] { display: none; }
.nl-funde { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl-leer { font-size: .92rem; color: var(--grau); margin: 4px 0; }
.nl-einstellungen { margin-top: 14px; font-size: .92rem; }
.nl-einstellungen summary { cursor: pointer; color: var(--petrol); font-weight: 600; }
.nl-feld { display: grid; gap: 4px; margin: 10px 0; font-size: .86rem; color: var(--grau); }
.nl-feld > span { font-weight: 600; }
.nl-feld input[type="text"], .nl-feld input[type="url"], .nl-feld input[type="date"], .nl-feld input[type="time"],
.nl-feld select, .nl-feld textarea {
  font: inherit; font-size: .95rem; color: var(--text); background: #fff; width: 100%;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; min-height: 40px;
}
.nl-feld textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.nl-feld-hinweis { font-size: .8rem; color: var(--grau); margin: -2px 0 0; }
.nl-feld-fehler { font-size: .8rem; color: var(--rot); margin: -2px 0 0; }
.nl-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: .9rem; }
.nl-check input { width: 18px; height: 18px; accent-color: var(--petrol); }
.nl-farben { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.nl-farbe { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--grau); }
.nl-farbe input[type="color"] { width: 40px; height: 34px; border: 1px solid var(--linie); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.nl-segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 10px; padding: 3px; gap: 2px; background: #f7f6f2; margin: 0 0 10px; }
.nl-segment button { font: inherit; font-size: .9rem; font-weight: 600; border: 0; background: transparent; color: var(--grau); padding: 6px 14px; border-radius: 7px; cursor: pointer; min-height: 34px; }
.nl-segment button[aria-checked="true"] { background: #fff; color: var(--petrol); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.nl-checkliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.nl-checkliste li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.nl-checkliste li::before { content: "✓"; color: var(--gruen); font-weight: 800; }
.nl-checkliste li[data-ok="nein"]::before { content: "!"; color: var(--rot); }
.nl-checkliste li[data-ok="hinweis"]::before { content: "i"; color: var(--blau); font-style: italic; }
.nl-woerter { margin-top: 10px; font-size: .86rem; }
.nl-woerter ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nl-woerter li { background: var(--sand); border-radius: 999px; padding: 2px 4px 2px 10px; display: flex; align-items: center; gap: 4px; }
.nl-woerter li button { border: 0; background: none; cursor: pointer; color: var(--grau); font-size: 1rem; width: 24px; height: 24px; }

.nl-daumenleiste { display: none; }

/* Popover an einer Fundstelle */
.nl-popover {
  position: fixed; z-index: 120; width: min(340px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-stark); padding: 12px 14px;
}
.nl-popover[hidden] { display: none; }
/* Bausteinmenü: höchstens so hoch wie das Fenster, mit eigenem Scrollen --
   mit 26 Bausteinen lag das Ende sonst unter dem Fensterrand, unerreichbar.
   Mit der Maus breit und vierspaltig, am Telefon dreispaltig. */
.nl-popover-bausteine { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.nl-popover-bausteine .nl-baustein-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
@media (max-width: 520px) { .nl-popover-bausteine .nl-baustein-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-gruppe-titel { grid-column: 1 / -1; margin: 6px 2px 6px; font-size: .74rem; font-weight: 700; color: var(--grau); }
.nl-baustein-raster > .nl-gruppe-titel:first-child { margin-top: 0; }

.nl-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 150;
  background: var(--petrol-dunkel); color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: var(--schatten-stark);
  max-width: calc(100vw - 32px); font-size: .94rem;
}
.nl-toast[hidden] { display: none; }

/* Dialoge */
.nl-dialog {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: 16px; box-shadow: var(--schatten-stark); color: var(--text);
}
.nl-dialog::backdrop { background: rgba(10, 30, 38, .48); }
.nl-dialog-breit { width: min(1100px, calc(100vw - 24px)); height: calc(100dvh - 32px); }
.nl-dialog-breit[open] { display: flex; flex-direction: column; }
.nl-dialog-kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 12px 12px 22px; background: #fff; border-bottom: 1px solid var(--linie-zart); margin: 0;
}
.nl-dialog-kopf h2 { margin: 0; flex: 1; font-size: 1.18rem; }
.nl-dialog-kopf .nl-segment { margin: 0; }
.nl-dialog-inhalt { padding: 18px 22px 22px; }
.nl-vorlagen-dialog { padding: 18px 22px 22px; margin: 0; }
.nl-vorschau-flaeche { flex: 1; min-height: 0; background: #e3e8ea; display: flex; justify-content: center; padding: 18px; overflow: auto; }
.nl-vorschau-flaeche iframe { border: 0; background: #fff; width: 100%; max-width: 900px; height: 100%; min-height: 520px; border-radius: 10px; box-shadow: var(--schatten); }
.nl-vorschau-flaeche[data-ansicht="mobil"] iframe { max-width: 390px; }
.nl-vorschau-flaeche[data-ansicht="seite"] iframe { max-width: 1280px; }
.nl-vorschau-flaeche[data-ansicht="seite-tablet"] iframe { max-width: 768px; }
.nl-vorschau-flaeche[data-ansicht="seite-mobil"] iframe { max-width: 390px; }
@media (pointer: coarse) { .nl-segment button { min-height: 44px; } }
.nl-vorschau-flaeche pre { margin: 0; width: 100%; max-width: 760px; background: #fff; padding: 20px 24px; border-radius: 10px; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; overflow: auto; }
.nl-export-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nl-export-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.nl-export-liste strong { display: block; }
.nl-export-liste span { font-size: .88rem; color: var(--grau); }
.nl-export-liste .nl-export-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nl-hinweisbox { padding: 12px 14px; border-radius: var(--radius-klein); background: var(--gelb-zart); color: #5a4100; margin: 0 0 14px; font-size: .92rem; }
.nl-hinweisbox[data-art="gut"] { background: var(--gruen-zart); color: #174d33; }
.nl-hinweisbox ul { margin: 6px 0 0; padding-left: 20px; }
.nl-diff-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.nl-diff-liste li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 8px 10px; border: 1px solid var(--linie-zart); border-radius: 8px; font-size: .92rem; }
.nl-diff-liste li[data-sicher="nein"] { border-color: #f0d9a6; background: #fffaf0; }
.nl-diff-liste del { color: var(--rot); }
.nl-diff-liste ins { color: var(--gruen); text-decoration: none; font-weight: 700; }
.nl-diff-liste small { display: block; color: var(--grau); }
.nl-projekte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl-projekte li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.nl-projekte li > div { flex: 1; min-width: 0; }
.nl-projekte strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-projekte span { font-size: .84rem; color: var(--grau); }
.nl-dialog textarea.nl-code { width: 100%; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; border: 1px solid var(--linie); border-radius: 8px; padding: 10px; }
.nl-dialog-aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ------------------------------------------------------------ Breitenstufen */

@media (min-width: 960px) and (max-width: 1279px) {
  .nl-arbeit { grid-template-columns: 76px minmax(0, 1fr) minmax(300px, 330px); }
  .nl-leiste { padding: 10px 8px; }
  .nl-leiste .nl-panel-titel, .nl-gliederung, .nl-leiste h2 + .nl-gliederung { display: none; }
  .nl-baustein-raster { grid-template-columns: 1fr; }
  .nl-baustein { font-size: .66rem; padding: 8px 2px; min-height: 58px; }
  .nl-leiste .nl-gruppe-titel { display: none; }
}

/* Unter 960 px: Bühne voll, Werkzeuge unten, Bedienfeld als Blatt. */
@media (max-width: 959px) {
  .nl-titel[data-layout="bild-rechts"] { grid-template-columns: 1fr; }
  .nl-titel h1 { font-size: 28px; }
  .nl-artwahl { padding: 0 2px; }
  .nl-appkopf { height: 52px; gap: 4px; padding: 0 4px; }
  .nl-speicherstand { display: none; }
  #nlVorschauKnopf { display: none; }
  .nl-appkopf .btn-primary { padding: 7px 10px; }
  .nl-arbeit { display: block; position: relative; }
  .nl-leiste, .nl-inspektor {
    position: fixed; left: 0; right: 0; bottom: var(--nl-leiste-h, 64px); z-index: 70;
    max-height: 46dvh; border: 0; border-top: 1px solid var(--linie); border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(10, 30, 38, .18); display: none;
  }
  .nl-buehne { position: absolute; inset: 0; }
  .nl-buehne-scroll { padding: 12px 8px calc(var(--nl-leiste-h, 64px) + var(--nl-blatt-h, 0px) + 24px); }
  [data-nl-blatt="einfuegen"] .nl-leiste { display: block; }
  [data-nl-blatt="pruefung"] .nl-inspektor,
  [data-nl-blatt="baustein"] .nl-inspektor,
  [data-nl-blatt="gestaltung"] .nl-inspektor,
  [data-nl-blatt="versand"] .nl-inspektor { display: block; }
  [data-nl-blatt] .nl-inspektor .nl-panel { display: none; border: 0; }
  [data-nl-blatt="pruefung"] .nl-inspektor [data-panel="pruefung"],
  [data-nl-blatt="pruefung"] .nl-inspektor [data-panel="anrede"],
  [data-nl-blatt="baustein"] .nl-inspektor [data-panel="baustein"],
  [data-nl-blatt="gestaltung"] .nl-inspektor [data-panel="gestaltung"],
  [data-nl-blatt="versand"] .nl-inspektor [data-panel="versand"] { display: block; }
  .nl-blatt-kopf {
    display: flex; position: sticky; top: 0; z-index: 2; align-items: center; justify-content: space-between;
    background: #fff; padding: 6px 6px 0 16px;
  }
  .nl-blatt-titel { margin: 0; font-size: 1rem; }
  [data-nl-blatt] .nl-panel-titel { display: none; }
  .nl-leiste .nl-panel-titel { display: block; }
  .nl-daumenleiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff;
    border-top: 1px solid var(--linie); padding: 4px 4px max(4px, env(safe-area-inset-bottom));
  }
  .nl-daumenleiste button {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: inherit; font-size: .72rem; color: var(--grau); background: none; border: 0; border-radius: 10px;
    padding: 6px 2px; min-height: 56px; cursor: pointer; position: relative;
  }
  .nl-daumenleiste button[aria-pressed="true"] { color: var(--petrol); background: var(--petrol-zart); }
  .nl-zahl {
    position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--rot); color: #fff; font-size: .7rem; line-height: 18px; padding: 0 5px; font-style: normal;
  }
  .nl-posteingang { padding: 4px 10px; }
  .nl-pe-zeile { grid-template-columns: 82px minmax(0, 1fr) auto; }
  .nl-blatt-rahmen { padding: 10px 0; border-radius: 10px; }
  .nl-einfuege button { opacity: .85; }
}

/* Telefon: Am 2026-10-02 auf der Produktion gemessen (390 px). Der Betreff
   stand in einer drei Spalten breiten Zeile neben Zähler und Knopf und brach
   Wort für Wort um ("Neuigkeite / n im / Oktober"); im Exportdialog schrumpfte
   "E-Mail-HTML" neben zwei Knöpfen auf eine Buchstabenspalte. Unter 600 px
   rücken Zähler und Knöpfe deshalb in eine eigene Zeile darunter. */
@media (max-width: 599px) {
  .nl-pe-zeile { grid-template-columns: 70px minmax(0, 1fr); row-gap: 2px; padding-bottom: 4px; }
  .nl-pe-rechts { grid-column: 1 / -1; justify-content: flex-end; }
  .nl-pe-zeile .nl-zeile { overflow-wrap: break-word; }
  .nl-pe-zeile label { hyphens: auto; -webkit-hyphens: auto; }
  .nl-export-liste li { grid-template-columns: minmax(0, 1fr); }
  .nl-export-liste .nl-export-knoepfe { justify-content: flex-start; }
  .nl-projekte li { flex-wrap: wrap; }
  .nl-projekte li > div { flex-basis: 100%; }
}
.nl-projekt input { text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

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

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

   Sie faellt weg, wenn sie leer ist: ein Werkzeug ohne verwandte
   Werkzeuge bekommt keine leere Leiste. */
/* EIN AUSWAHLFELD IST SO BREIT WIE SEINE LAENGSTE OPTION.
   Das ist Browservorgabe und kein Fehler des Werkzeugs: die
   intrinsische Mindestbreite eines `<select>` kommt aus dem laengsten
   Eintrag, und `min-width: auto` laesst es nicht darunter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── App-Bar ─────────────────────────────────────────────────────────
   Eine Zeile, und sie bleibt eine Zeile. Der Werkzeugname darf kuerzen,
   die Marke nicht verschwinden, und der Knopf nicht umbrechen. */
.header-row { flex-wrap: nowrap; min-height: 56px; }
.brand { flex: 0 0 auto; }
/* DIE KOPFZEILE PASSTE BEI 320 PX NICHT INS FENSTER.
   Gemessen am 2026-09-22 an `rechnung` und `stundennachweis`:

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

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

   Unterhalb von 400 px traegt die Bildmarke allein. Der Schriftzug ist
   dort die einzige Angabe, auf die verzichtet werden kann, ohne dass
   jemand etwas verliert: wo man ist, sagt der Werkzeugname daneben, und
   die Marke bleibt sichtbar. Das spart rund 98 px -- gemessen genug. */
@media (max-width: 400px) {
  .brand-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.kuk-trenner {
  flex: 0 0 auto; width: 1px; height: 22px;
  background: currentColor; opacity: .25; margin: 0 4px;
}
/* Der Werkzeugname darf kuerzen, aber erst spaet: er ist die Antwort auf
   "wo bin ich". Deshalb `flex: 1 1 auto` erst NACH einer Mindestbreite --
   und keine Navigation mehr daneben, die ihn verdraengen koennte. */
.kuk-kontext {
  flex: 1 1 auto; min-width: 6ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; color: inherit; font-weight: 600;
}
.kuk-kontext:hover { text-decoration: underline; }
/* Blauer Haken (website/PRUEFHAKEN.json): gleich hinter dem Namen, nie von ihm verdraengt. Der Name gibt nur so viel
   Breite her, wie er braucht, damit der Haken daneben steht; der Knopf rechts behaelt seine Stelle ueber margin-left. */
/* Mindestbreite 4ch statt 6ch: der Haken braucht ca. 22 px, und bei 320 px schob er sonst die Kopfzeile 7 px ueber den Rand (gemessen). */
.kuk-kontext:has(+ .kuk-haken) { flex: 0 1 auto; min-width: 4ch; }
.kuk-kontext:has(+ .kuk-haken) ~ .header-actions { margin-left: auto; }
/* Bis 340 px entfaellt der Haken im Kopf: er braucht 22 px, und die Kopfzeile ist dort bei manchen Werkzeugen schon ohne ihn zu breit
   (Vertragsvorlagen: 21 px, mit Haken 41 px, gemessen). !important, weil die Gestalt des Hakens inline im Markup steht. */
@media (max-width: 340px) {
  .kuk-kontext + .kuk-haken { display: none !important; }
  .kuk-kontext:has(+ .kuk-haken) { min-width: 6ch; }
}
.header-actions { flex: 0 0 auto; }

/* Die lokale Ebene einer Werkstatt: eigene Zeile unter der App-Bar,
   nicht darin. Sie existiert nur, wo es sie gibt -- ein Rechner bekommt
   sie nicht. */
.header-lokal {
  border-top: 1px solid var(--line);
  background: var(--white, #fff);
}
.header-lokal .site-nav {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 8px 0; font-size: 14px;
}
.kuk-tools {
  font: inherit; font-size: 14px; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 8px;
  padding: 7px 14px; min-height: 40px; cursor: pointer;
}
.kuk-tools:hover { border-color: var(--blue); color: var(--blue); }
@media (pointer: coarse) { .kuk-tools { min-height: 44px; } }
/* FINGER BRAUCHEN 44 PX, AUCH WO DAS AUGE 32 SIEHT.
   Gemessen am 2026-10-02 auf dem iPhone 13 (WebKit, Projektplan): die
   Marke war 32 x 32 px gross, der Werkzeugname 24 px hoch -- zwei Ziele
   unter dem Produktmass von 44 px, auf allen Werkzeugen. Vergroessert
   wird die Trefferflaeche, nicht das Bild: Marke und Name sehen aus wie
   vorher. `line-height` statt Flexbox beim Namen, weil er mit
   `text-overflow: ellipsis` kuerzt -- in einem Flexcontainer greift das
   nicht. */
@media (pointer: coarse) {
  .site-header .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .kuk-kontext { line-height: 44px; }
  .site-header .kuk-haus { min-height: 44px; }
}

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

/* ── Launcher ────────────────────────────────────────────────────────
   Auf schmalen Breiten ein Blatt am unteren Rand -- dort ist der Daumen.
   Auf breiten ein Popover unter dem Knopf. Dieselbe Information, andere
   Komposition. */
.kuk-launcher {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 32, .38);
  display: flex; align-items: flex-end; justify-content: center;
}
.kuk-launcher[hidden] { display: none; }
.kuk-launcher-blatt {
  width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--white, #fff);
  border-radius: 16px 16px 0 0;
  padding: 8px 18px 24px;
  box-shadow: 0 -8px 32px rgba(16, 24, 32, .18);
}
.kuk-launcher-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 4px;
}
.kuk-launcher-titel { font-weight: 700; }
.kuk-launcher-zu {
  font: inherit; font-size: 24px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; color: inherit;
}
.kuk-launcher-bereich { padding: 8px 0; }
.kuk-launcher-bereich[hidden] { display: none; }
.kuk-launcher-label {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
}
.kuk-launcher-ziel, .kuk-launcher .site-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 0; min-height: 44px;
  text-decoration: none; color: inherit;
}
.kuk-launcher-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kuk-launcher-ziel:hover, .kuk-launcher .site-nav a:hover {
  color: var(--blue);
}
.kuk-launcher-hinweis { font-size: 12px; color: var(--ink-4); }
/* DASSELBE GESICHT WIE IM STORE.
   Die Zeichnung und die beiden Kachelfarben kommen aus dem Suchindex
   von /webtools -- keine zweite Iconliste, kein zweiter Farbschluessel.
   Ein Werkzeug sieht hier aus wie dort. */
.kuk-kachel {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 28%; corner-shape: squircle;
  border: 1px solid rgba(255,255,255,.24); color: #fff;
  background: linear-gradient(145deg, var(--tile-light), var(--tile-dark));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 3px 8px rgba(20,50,60,.16);
}
.kuk-kachel svg { display: block; width: 74%; height: 74%; overflow: visible; }
/* Die kuratierten Marken tragen `stroke="currentColor"`, die
   semantischen Glyphen nicht -- ohne diese Zeile blieben sie
   unsichtbar auf der farbigen Kachel. Derselbe Fall wie im Store. */
.kuk-kachel svg:not([stroke]) { stroke: currentColor; fill: none; stroke-width: 1.7; }
.kuk-kachel .duo { fill: rgba(255,255,255,.22); stroke: none; }
.kuk-launcher-offen { overflow: hidden; }

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

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

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

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

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

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