*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--fw-text) var(--fs-md)/var(--lh-text) var(--font-text);font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-4)}
@media (min-width:720px){.wrap{padding:0 var(--s-6)}}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--fw-head);line-height:var(--lh-head);letter-spacing:var(--tracking-head);margin:0}
h1{font-size:var(--fs-3xl)} h1,h2,h3{hyphens:auto;overflow-wrap:break-word} h2{font-size:var(--fs-2xl);margin-bottom:var(--s-2)} h3{font-size:var(--fs-lg);margin-bottom:var(--s-2)}
p{margin:0 0 var(--s-3);max-width:var(--measure)}
a{color:var(--c-link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.muted{color:var(--c-text-muted)} .klein{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.mono{font-family:var(--font-mono);font-size:.94em}

section{padding:var(--s-abschnitt) 0;border-bottom:var(--b-haar) solid var(--c-line)}
.kopf{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}
.kopf .nr{font:var(--fw-strong) var(--fs-sm) var(--font-mono);color:var(--c-text-muted)}
.raster{display:grid;gap:var(--s-5)}
@media (min-width:860px){.r2{grid-template-columns:1fr 1fr}.r3{grid-template-columns:repeat(3,1fr)}.r-7-5{grid-template-columns:7fr 5fr}}

/* Hero */
.hero{padding:var(--s-8) 0 var(--s-7)}
.hero h1{max-width:20ch;margin-bottom:var(--s-4);font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--tracking-hero);font-weight:var(--fw-hero)}
.claim{font:var(--fw-strong) var(--fs-lg)/1.3 var(--font-text);margin:var(--s-5) 0 0;padding:var(--s-3) var(--s-4);background:var(--c-signal-flaeche);color:var(--c-signal-text);display:inline-block;border-radius:var(--r-1)}

/* Knoepfe & Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--hit);padding:0 var(--s-5);font:var(--fw-strong) var(--fs-md)/1 var(--font-text);border-radius:var(--r-2);border:var(--b-regel) solid transparent;cursor:pointer;text-decoration:none;transition:background-color var(--t-kurz) var(--ease)}
.k-haupt{background:var(--c-accent);color:var(--c-on-accent)} .k-haupt:hover{background:var(--c-accent-hover)}
.k-zweit{background:var(--c-blatt);color:var(--c-text);border-color:var(--c-line-strong)} .k-zweit:hover{border-color:var(--c-text)}
.k-text{background:transparent;color:var(--c-link);padding:0 var(--s-2);text-decoration:underline;text-underline-offset:.18em}
.k-fokus{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
label{display:block;font-weight:var(--fw-strong);margin-bottom:var(--s-1)}
.eingabe{width:100%;min-height:var(--field-h);padding:0 var(--s-3);font:var(--fs-md) var(--font-text);color:var(--c-text);background:var(--c-surface);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2)}
.eingabe:focus-visible{outline:var(--focus-ring);outline-offset:0;border-color:var(--c-focus)}
.hilfe{font-size:var(--fs-sm);color:var(--c-text-muted);margin-top:var(--s-1)}
.feldfehler .eingabe{border:var(--b-regel) solid var(--c-fehler)}
.feldfehler .hilfe{color:var(--c-fehler-text);font-weight:var(--fw-medium)}
.meldung{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-left:4px solid;border-radius:var(--r-1);font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.m-fehler{background:var(--c-fehler-fill);color:var(--c-fehler-text);border-color:var(--c-fehler)}
.m-warn{background:var(--c-warnung-fill);color:var(--c-warnung-text);border-color:var(--c-warnung)}
.m-info{background:var(--c-info-fill);color:var(--c-info-text);border-color:var(--c-info)}
.m-ok{background:var(--c-entschieden-fill);color:var(--c-entschieden-text);border-color:var(--c-entschieden-line)}
.meldung svg{flex:none;width:20px;height:20px;margin-top:2px}

/* Tabelle */
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:var(--lh-ui)}
th,td{padding:var(--s-3) var(--s-3);text-align:left;border-bottom:var(--b-haar) solid var(--c-line);vertical-align:top}
thead th{background:var(--c-surface-2);font-weight:var(--fw-strong);border-bottom:var(--b-regel) solid var(--c-line-strong);white-space:nowrap}
td.z,th.z{text-align:right;white-space:nowrap}
tfoot td{border-top:var(--b-regel) solid var(--c-text);border-bottom:0;font-weight:var(--fw-strong)}

/* Ampel */
.ampel{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-2);border-radius:var(--r-1);font-weight:var(--fw-strong);font-size:var(--fs-sm);line-height:1.3;white-space:nowrap}
.ampel svg{width:16px;height:16px;flex:none}
.a-ok{background:var(--c-frist-ok-fill);color:var(--c-frist-ok-text)} .a-ok svg{fill:var(--c-frist-ok)}
.a-bald{background:var(--c-frist-bald-fill);color:var(--c-frist-bald-text)} .a-bald svg{fill:var(--c-frist-bald);stroke:var(--c-frist-bald-rand);stroke-width:2}
.a-ueber{background:var(--c-frist-ueber-fill);color:var(--c-frist-ueber-text)} .a-ueber svg{fill:var(--c-frist-ueber)}
.ampelliste{list-style:none;margin:0;padding:0}
.ampelliste li{display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:var(--b-haar) solid var(--c-line)}
.ampelliste small{display:block;color:var(--c-text-muted);font-size:var(--fs-sm)}

/* Bestellvorschlag: Vorschlag vs. Entschieden */
.beleg{background:var(--c-blatt);border-radius:var(--r-blatt);padding:var(--s-blatt) var(--s-blatt) var(--s-3);box-shadow:var(--shadow-blatt)}
.vorschlag{border:var(--b-vorschlag);background:var(--c-vorschlag-fill)}
.entschieden{border:var(--b-entschieden);background:var(--c-entschieden-fill)}
.status{display:flex;align-items:center;gap:var(--s-2);font-weight:var(--fw-strong);font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.vorschlag .status{color:var(--c-vorschlag-text)} .entschieden .status{color:var(--c-entschieden-text)}
.status svg{width:18px;height:18px;flex:none}
.beleg h3{margin-bottom:var(--s-1)}
.beleg table{margin:var(--s-3) 0}
.beleg thead th{background:transparent}
.kuerzel{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-rund);border:var(--b-regel) solid var(--c-entschieden-line);color:var(--c-entschieden-text);font:var(--fw-head) var(--fs-sm) var(--font-text);transform:rotate(-8deg);flex:none}
.abzeichnung{display:flex;gap:var(--s-3);align-items:center;font-size:var(--fs-sm);color:var(--c-entschieden-text)}
.geaendert{color:var(--c-entschieden-text);font-weight:var(--fw-strong)}
.geaendert s{color:var(--c-text-muted);font-weight:400;margin-right:.3em}

/* Chat-Antwort mit Quelle */
.frage{font-weight:var(--fw-strong);margin-bottom:var(--s-3)}
.frage span{display:block;font:var(--fw-medium) var(--fs-xs) var(--font-text);color:var(--c-text-muted)}
.antwort{border-left:3px dashed var(--c-vorschlag-line);padding:var(--s-1) 0 var(--s-1) var(--s-4)}
.antwort .status{color:var(--c-vorschlag-text)}
.quelle{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-3);padding:var(--s-3);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);font-size:var(--fs-sm);background:var(--c-surface-2)}
.quelle .nr{flex:none;display:inline-grid;place-items:center;min-width:28px;height:28px;border:var(--b-regel) solid var(--c-text);border-radius:var(--r-1);font:var(--fw-head) var(--fs-sm) var(--font-mono)}
sup.fn{font:var(--fw-head) .72em var(--font-mono);border:1.5px solid currentColor;border-radius:2px;padding:0 .25em;margin-left:.15em}

/* Lieferschein */
.lieferschein{background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-top:6px solid var(--c-text);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt);padding:var(--s-5) var(--s-4)}
@media (min-width:720px){.lieferschein{padding:var(--s-6)}}
.ls-kopf{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.ls-kopf dl{margin:0;display:grid;grid-template-columns:auto auto;gap:var(--s-1) var(--s-4);font-size:var(--fs-sm)}
.ls-kopf dt{color:var(--c-text-muted)} .ls-kopf dd{margin:0;text-align:right}
.unterschrift{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-6);font-size:var(--fs-xs);color:var(--c-text-muted)}
.unterschrift div{border-top:var(--b-haar) solid var(--c-text);padding-top:var(--s-1)}
.beispiel{display:inline-block;font:var(--fw-strong) var(--fs-xs) var(--font-text);color:var(--c-text-muted);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-1);padding:0 var(--s-2);vertical-align:middle}
/* ===== Seiten-Bausteine (Startseite, Produkt, Motive) ===== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--c-text);color:var(--c-bg);padding:var(--s-2) var(--s-3);z-index:99}.skip:focus{left:var(--s-2);top:var(--s-2)}
.ki-hinweis{background:var(--c-hinweis);color:var(--c-hinweis-text);font-size:var(--fs-xs);padding:var(--s-1) 0;text-align:center}
.ki-hinweis a{color:inherit}
.band .wrap{justify-content:space-between}
.logo-h,.logo-d{height:52px;width:auto;display:block}
.logo-h{display:var(--logo-hell)}.logo-d{display:var(--logo-dunkel)}
.nav{display:none;gap:var(--s-5);align-items:center;font-weight:var(--fw-medium)}
.nav a{color:var(--c-band-text);text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--c-band-akzent)}
.nav .knopf{padding:0 var(--s-4);min-height:var(--hit-min);color:var(--c-on-accent);border-bottom:0}
.nav .knopf.k-zweit{color:var(--c-band-text);background:transparent;border-color:var(--c-band-text)}
@media (min-width:960px){.nav{display:flex}.mobil{display:none}}
.mobil{position:relative}
.mobil summary{list-style:none;cursor:pointer;min-height:var(--hit-min);display:inline-flex;align-items:center;padding:0 var(--s-4);border:var(--b-regel) solid var(--c-band-text);color:var(--c-band-text);border-radius:var(--r-2);font-weight:var(--fw-medium)}
.mobil summary::-webkit-details-marker{display:none}
.mobil nav{position:absolute;right:0;top:calc(100% + var(--s-2));background:var(--c-surface);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);padding:var(--s-3);display:grid;gap:var(--s-1);min-width:15rem;box-shadow:var(--shadow-float);z-index:20}
.mobil nav a{padding:var(--s-3);color:var(--c-text);text-decoration:none;min-height:var(--hit-min)}
section.ohne-linie{border-bottom:0}
.hero-grid{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero .lead{font-size:var(--fs-lg);line-height:1.5;color:var(--c-text);max-width:46ch}
.knopfreihe.mt{margin-top:var(--s-5)}
.abschnitt-kopf{display:grid;gap:var(--s-3);margin-bottom:var(--s-5)}
@media (min-width:860px){.abschnitt-kopf{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:var(--s-7)}}
.abschnitt-kopf p{margin:0;color:var(--c-text-muted)}
.legende{display:grid;gap:var(--s-5)}
@media (min-width:860px){.legende{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legende article{border-top:2px solid var(--c-text);padding-top:var(--s-3)}
.legende h3{font-size:var(--fs-lg)}
.legende p{color:var(--c-text-muted);margin:0}
.legende .status{margin-bottom:var(--s-2)}
.legende .v{color:var(--c-vorschlag-text)}.legende .e{color:var(--c-entschieden-text)}.legende .f{color:var(--c-text)}
/* Register der Branchen */
.filter{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4)}
.chip{min-height:var(--hit-min);padding:0 var(--s-4);font:var(--fw-medium) var(--fs-sm) var(--font-text);color:var(--c-text);background:transparent;border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);cursor:pointer}
.chip{border-radius:var(--r-chip);background:var(--c-blatt)}.chip[aria-pressed="true"]{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.zeilen{list-style:none;margin:0;padding:0 var(--s-2);border-top:var(--b-regel) solid var(--c-text);background:var(--c-blatt);border-radius:0 0 var(--r-blatt) var(--r-blatt);box-shadow:var(--shadow-blatt)}
.zeilen li{border-bottom:var(--b-haar) solid var(--c-line)}.zeilen li:last-child{border-bottom:0}
.zeilen li[hidden]{display:none}
.zeilen a{display:grid;gap:var(--s-1) var(--s-6);padding:var(--s-4) var(--s-2);color:var(--c-text);text-decoration:none;min-height:var(--hit)}
@media (min-width:860px){.zeilen a{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.zeilen a:hover{background:var(--c-surface-2)}
.zeilen .name{font:var(--fw-head) var(--fs-xl)/1.1 var(--font-head)}
.zeilen .satz{color:var(--c-text-muted)}
.zeilen .sonder a{background:var(--c-surface-2)}
.nicht-dabei{margin-top:var(--s-5);color:var(--c-text-muted)}
/* Schichten als Tabelle */
.schichten{width:100%;border-collapse:collapse}
.schichten th,.schichten td{padding:var(--s-4) var(--s-3);border-bottom:var(--b-haar) solid var(--c-line);vertical-align:top;text-align:left}
.schichten th{font:var(--fw-head) var(--fs-lg)/1.2 var(--font-head);width:26%}
.schichten th small{display:block;font:var(--fw-text) var(--fs-sm) var(--font-text);color:var(--c-text-muted);margin-top:var(--s-1)}
.schichten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.schichten li{border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-1);padding:var(--s-1) var(--s-3);font-size:var(--fs-sm)}
.schichten tr:last-child th,.schichten tr:last-child td{border-bottom:var(--b-regel) solid var(--c-text)}
@media (max-width:700px){.schichten th,.schichten td{display:block;width:auto}.schichten th{border-bottom:0;padding-bottom:0}}
/* Daten / Abschluss */
.daten{background:var(--c-daten);color:var(--c-daten-text);border-bottom:0}
.daten ul{list-style:none;margin:0;padding:0}
.daten li{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-top:var(--b-haar) solid var(--c-daten-line);font-weight:var(--fw-medium)}
.daten li svg{width:20px;height:20px;flex:none;color:var(--c-daten-haken)}
.schluss{border-bottom:0;background:var(--c-signal-flaeche);color:var(--c-signal-text)}
.schluss p{color:inherit}
.schluss .knopf.k-haupt{background:var(--c-signal-accent);color:var(--c-signal-on-accent)}
.schluss .knopf.k-zweit{background:transparent;color:inherit;border-color:currentColor}
.schluss a:not(.knopf){color:inherit}
.schluss :focus-visible{outline-color:currentColor}
.fuss{padding:var(--s-7) 0 var(--s-8);border-top:var(--b-regel) solid var(--c-fuss-kante);background:var(--c-fuss);color:var(--c-fuss-text);font-size:var(--fs-sm)}
.fuss-oben{display:grid;gap:var(--s-6);padding-bottom:var(--s-6);margin-bottom:var(--s-6);border-bottom:var(--b-haar) solid var(--c-fuss-line)}
@media (min-width:860px){.fuss-oben{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:start}}
.fuss-spruch{font:var(--fw-head) var(--fs-fuss-spruch)/1.12 var(--font-head);letter-spacing:var(--tracking-head);margin:0 0 var(--s-3);max-width:18ch}
.fuss-wer{font-size:var(--fs-md);color:var(--c-fuss-muted);max-width:48ch;margin:0 0 var(--s-4)}
.fuss .knopfreihe{margin:0}
.fuss .knopf.k-haupt{background:var(--c-fuss-accent);color:var(--c-fuss-on-accent)}
.fuss .chip-link{color:var(--c-fuss-text);border-color:var(--c-fuss-line);background:transparent}
.fuss .chip-link:hover{border-color:var(--c-fuss-text);background:transparent}
.fuss-fakten{list-style:none;margin:0;padding:0;border-top:var(--b-regel) solid var(--c-fuss-text)}
.fuss-fakten li{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:var(--b-haar) solid var(--c-fuss-line);font-weight:var(--fw-medium);font-size:var(--fs-md)}
.fuss-fakten svg{width:20px;height:20px;flex:none;color:var(--c-fuss-accent)}
.fuss-spalten{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
@media (min-width:720px){.fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fuss h2{font:var(--fw-strong) var(--fs-sm) var(--font-text);margin:0 0 var(--s-2);padding-bottom:var(--s-2);border-bottom:var(--b-haar) solid var(--c-fuss-line);color:var(--c-fuss-text)}
.fuss a{display:block;color:var(--c-fuss-text);padding:var(--s-1) 0;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss .fuss-unten{color:var(--c-fuss-muted);font-size:var(--fs-xs);max-width:none}
.fuss .fuss-unten a{display:inline;padding:0;color:inherit;text-decoration:underline}
/* Bildschirme (Produktseite) */
.bildschirm{border:var(--b-blatt) solid var(--c-blatt-line);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);background:var(--c-blatt);box-shadow:var(--shadow-blatt);position:relative}
.bildschirm>*{position:relative;z-index:1}
.bildschirm .titel{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--c-surface-2);border-bottom:var(--b-haar) solid var(--c-line);font-size:var(--fs-sm);font-weight:var(--fw-strong)}
.bildschirm .titel span{font-weight:var(--fw-text);color:var(--c-text-muted)}
.bildschirm .inhalt{padding:var(--s-blatt)}
.bildschirm .beleg{box-shadow:none;padding:0;background:transparent}
.bildschirm .beleg.vorschlag,.bildschirm .beleg.entschieden{padding:var(--s-4)}
.bildschirm.tablet{max-width:760px}
.bild-zeile{display:grid;gap:var(--s-6);margin-bottom:var(--s-8)}
@media (min-width:960px){.bild-zeile{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}}
.bild-zeile h2{font-size:var(--fs-xl)}
.bild-zeile .text p{color:var(--c-text-muted)}
.menge{width:5.5rem;min-height:var(--hit-min);padding:0 var(--s-2);font:var(--fs-md) var(--font-text);color:var(--c-text);background:var(--c-surface);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);text-align:right}
.menge:focus-visible{outline:var(--focus-ring);outline-offset:0;border-color:var(--c-focus)}
.pruef{list-style:none;margin:0;padding:0}
.pruef li{display:grid;gap:var(--s-2) var(--s-4);padding:var(--s-4) 0;border-bottom:var(--b-haar) solid var(--c-line);align-items:center}
@media (min-width:640px){.pruef li{grid-template-columns:minmax(0,1fr) auto auto}}
.pruef small{display:block;color:var(--c-text-muted);font-size:var(--fs-sm)}
.pruef .abgezeichnet{display:none;align-items:center;gap:var(--s-2);color:var(--c-entschieden-text);font-size:var(--fs-sm)}
.pruef li.fertig .abgezeichnet{display:flex}.pruef li.fertig button{display:none}
.pruef li.fertig{border-left:3px solid var(--c-entschieden-line);padding-left:var(--s-3)}
.auszug{margin-top:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--c-surface-2);border-radius:var(--r-1);font-size:var(--fs-sm)}
.auszug mark{background:var(--c-vorschlag-fill);color:inherit;box-shadow:inset 0 -2px 0 var(--c-vorschlag-line)}
details.quelle-auf summary{cursor:pointer;color:var(--c-link);text-decoration:underline;text-underline-offset:.18em;min-height:var(--hit-min);display:inline-flex;align-items:center}
/* Motive */
.motive{display:grid;gap:var(--s-5)}
@media (min-width:960px){.motive{grid-template-columns:repeat(2,minmax(0,1fr))}}
.motiv h3{font-size:var(--fs-xl);margin-bottom:var(--s-1)}
.motiv .wer{color:var(--c-text-muted);font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.motiv{display:flex;flex-direction:column}.motiv .beleg{flex:1}
.ohne-js .nur-js{display:none}
@media (prefers-reduced-motion:no-preference){.beleg.wechsel{animation:wechsel var(--t-kurz) var(--ease)}}
@keyframes wechsel{from{opacity:.6}to{opacity:1}}

/* Branchenseite */
.probleme{margin:0;display:grid;gap:0;border-top:var(--b-regel) solid var(--c-text)}
.probleme>div{padding:var(--s-5) 0;border-bottom:var(--b-haar) solid var(--c-line);display:grid;gap:var(--s-2) var(--s-6)}
@media (min-width:860px){.probleme>div{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.probleme dt{font:var(--fw-head) var(--fs-lg)/1.2 var(--font-head)}
.probleme dd{margin:0;color:var(--c-text-muted);max-width:var(--measure)}
.fliess p{color:var(--c-text-muted)}
.sr{position:absolute;left:-999px}
.zeile-kopf h1{font-size:var(--fs-kopf)}

[hidden]{display:none!important}
.hero-grid,.bild-zeile,.motive,.abschnitt-kopf,.legende,.fuss-spalten{grid-template-columns:minmax(0,1fr)}
.hero-grid>*,.bild-zeile>*,.motive>*,.abschnitt-kopf>*,.legende>*{min-width:0}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.bild-zeile{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.motive{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.abschnitt-kopf{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.legende{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px){.fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.band .wrap{flex-wrap:nowrap}.nav{gap:var(--s-4)}.nav .knopf{padding:0 var(--s-3);white-space:nowrap}.nav a{white-space:nowrap}}
.band{background:var(--c-band);color:var(--c-band-text);border-bottom:var(--b-haar) solid var(--c-band-line)}
.band .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:var(--band-h);padding-top:var(--s-2);padding-bottom:var(--s-2)}

/* ===== Umgesetzte WordPress-Seiten ===== */
.seiten-kopf h1{max-width:24ch;font-size:var(--fs-kopf)}
.seiten-kopf .lead{max-width:60ch}
.seiten-inhalt{padding-bottom:var(--s-8)}
.seiten-inhalt section{padding:var(--s-6) 0;border-top:var(--b-haar) solid var(--c-line);display:grid;row-gap:0;column-gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
.seiten-inhalt section>*{min-width:0}
.seiten-inhalt section:first-child{border-top:var(--b-regel) solid var(--c-text)}
@media (min-width:960px){
  .seiten-inhalt section{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .seiten-inhalt section>h2{grid-column:1;grid-row:1/span 40;align-self:start;position:sticky;top:var(--s-5)}
  .seiten-inhalt section>*:not(h2){grid-column:2}
  .seiten-inhalt section:not(:has(>h2))>*{grid-column:1/-1}
}
.seiten-inhalt h2{font-size:var(--fs-xl)}
.seiten-inhalt h3{font-size:var(--fs-lg);margin:var(--s-4) 0 var(--s-2)}
.seiten-inhalt h4{font:var(--fw-strong) var(--fs-md)/1.3 var(--font-text);margin:var(--s-3) 0 var(--s-1)}
.seiten-inhalt p,.seiten-inhalt li{max-width:var(--measure)}
.seiten-inhalt ul,.seiten-inhalt ol{padding-left:1.2em;margin:0 0 var(--s-3)}
.seiten-inhalt li{margin-bottom:var(--s-1)}
.seiten-inhalt img{max-width:100%;height:auto;border-radius:var(--r-bild);display:block}
.seiten-inhalt figure{margin:var(--s-3) 0;position:relative}
.seiten-inhalt blockquote{margin:var(--s-4) 0;padding:var(--s-2) var(--s-4);border-left:4px solid var(--c-line-strong);color:var(--c-text-muted)}
.seiten-inhalt hr{border:0;border-top:var(--b-haar) solid var(--c-line);margin:var(--s-5) 0}
.seiten-inhalt details{border-bottom:var(--b-haar) solid var(--c-line)}
.seiten-inhalt summary{cursor:pointer;font-weight:var(--fw-strong);padding:var(--s-3) var(--s-2);min-height:var(--hit-min)}
.seiten-inhalt summary:hover{background:var(--c-surface-2)}
.seiten-inhalt details[open] summary{color:var(--c-entschieden-text)}
.seiten-inhalt .raster{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-bottom:var(--s-6)}
/* Funktionsgruppen: schmale Seitenspalte (Titel+Bild) bleibt beim Lesen der langen Karten stehen */
@media (min-width:960px){.seiten-inhalt .raster:has(>.karte>h2){grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}.seiten-inhalt .raster>.karte:has(>h2){position:sticky;top:var(--s-5)}}
.seiten-inhalt .karte{border-top:2px solid var(--c-text);padding-top:var(--s-3)}
.seiten-inhalt .karte:has(ul){border-top:var(--b-blatt) solid var(--c-blatt-line)}
.seiten-inhalt .karte h3{margin-top:0}
.seiten-inhalt .karte p{color:var(--c-text-muted)}
.seiten-inhalt .tabwrap{margin:var(--s-3) 0}
.seiten-inhalt [data-ki]{display:inline-block;font:var(--fw-medium) var(--fs-xs) var(--font-text);color:var(--c-text-muted);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-1);padding:0 var(--s-2);background:var(--c-surface)}
.seiten-inhalt .knopf{margin:var(--s-2) var(--s-2) var(--s-2) 0}
.seiten-inhalt section>.knopf,.seiten-inhalt section>.chip-link{justify-self:start}
.beitrag .wrap{max-width:820px}
.beitrag section{grid-template-columns:minmax(0,1fr)!important;border-top:0!important;padding:var(--s-3) 0}
.beitrag section>h2{position:static!important;grid-row:auto!important}
.beitrag section>*{grid-column:1/-1!important}
.beitrag-meta{color:var(--c-text-muted);font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.blog-liste .satz{display:block}

/* Branchenregister mit Foto */
.zeilen a{align-items:center}
.zeilen .foto{position:relative;display:block;border-radius:var(--r-bild);overflow:hidden;background:var(--c-surface-2)}
.zeilen .foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ki-tag{position:absolute;left:var(--s-2);bottom:var(--s-2);font:var(--fw-medium) var(--fs-xs)/1.3 var(--font-text);color:var(--c-text);background:var(--c-tag-fill);border-radius:var(--r-1);padding:0 var(--s-2)}
@media (min-width:860px){.zeilen a{grid-template-columns:150px minmax(0,4fr) minmax(0,6fr)}}
@media (max-width:859px){.zeilen a{grid-template-columns:96px minmax(0,1fr);column-gap:var(--s-4)}.zeilen .foto{grid-row:1/3}.zeilen .name,.zeilen .satz{grid-column:2}}
figure.video{margin:0}
figure.video video{width:100%;height:auto;border-radius:var(--r-bild);background:var(--c-surface-2);display:block}
figure.video figcaption{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--c-text-muted)}

/* Untermenues */
.nav-gruppe{position:relative}
.nav-sub{display:none;position:absolute;left:calc(-1 * var(--s-4));top:100%;min-width:17rem;padding:var(--s-2);background:var(--c-surface);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-float);z-index:30}
.nav-gruppe:hover .nav-sub,.nav-gruppe:focus-within .nav-sub{display:grid}
.nav-sub a{color:var(--c-text);padding:var(--s-3);min-height:var(--hit-min);border-bottom:0!important;border-radius:var(--r-2);font-weight:var(--fw-text)}
.nav-sub a:hover{background:var(--c-surface-2)}
.mobil nav a.unter{padding-left:var(--s-6);font-size:var(--fs-sm);color:var(--c-text-muted)}

.vorzeile{font:var(--fw-medium) var(--fs-sm)/1.3 var(--font-text);color:var(--c-text-muted);margin:0 0 var(--s-3)}
/* Tarifkarten */
.seiten-inhalt [data-tarif]{border:var(--b-blatt) solid var(--c-blatt-line);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);padding:var(--s-blatt);background:var(--c-blatt);box-shadow:var(--shadow-blatt);display:flex;flex-direction:column;gap:var(--s-2);position:relative}
.seiten-inhalt [data-tarif="hervor"]{border:var(--b-regel) solid var(--c-entschieden-line)}
.seiten-inhalt [data-tarif] h3{margin:0;font-size:var(--fs-xl)}
.seiten-inhalt [data-rolle="tag"]{color:var(--c-text-muted);margin:0}
.seiten-inhalt [data-rolle="preis"]{margin:var(--s-3) 0 0;font:var(--fw-head) var(--fs-2xl)/1 var(--font-head);color:var(--c-text)}
.seiten-inhalt [data-rolle="preis"] s{font-size:var(--fs-lg);color:var(--c-text-muted);font-weight:var(--fw-text);margin-right:var(--s-2)}
.seiten-inhalt [data-rolle="sub"]{margin:0 0 var(--s-3);font-size:var(--fs-sm);color:var(--c-text-muted)}
.seiten-inhalt [data-rolle="band"]{align-self:flex-start;font:var(--fw-strong) var(--fs-sm)/1.3 var(--font-text);color:var(--c-entschieden-text);background:var(--c-entschieden-fill);border:var(--b-haar) solid var(--c-entschieden-line);border-radius:var(--r-1);padding:0 var(--s-2)}
.seiten-inhalt [data-tarif] ul{flex:1}
.seiten-inhalt [data-tarif] .knopf{align-self:flex-start}

.seiten-inhalt video{max-width:100%;height:auto;border-radius:var(--r-bild);display:block;background:var(--c-surface-2)}
.seiten-inhalt iframe{max-width:100%}

.seiten-inhalt,.zeilen,.blog-liste,.fuss{overflow-wrap:anywhere}
.seiten-inhalt a{overflow-wrap:anywhere;word-break:break-word}
.zeilen .name,.legende h3,.karte h3{hyphens:auto}
/* Handbuch: eine Spalte */
.handbuch section{display:block!important}
.handbuch section>h2{position:static!important;margin:var(--s-7) 0 var(--s-3)}
.handbuch .wrap{max-width:980px}
.handbuch table{font-size:var(--fs-sm)}
.handbuch code{font:var(--fw-text) .9em var(--font-mono);background:var(--c-surface-2);padding:0 .25em;border-radius:var(--r-1)}

/* MAPE: Balkenvergleich und Lewis-Skala */
.balken{margin:var(--s-4) 0;max-width:34rem}
.balken p{margin:var(--s-2) 0 var(--s-1)}
.balken progress{-webkit-appearance:none;appearance:none;width:100%;height:14px;border:0;border-radius:7px;background:var(--c-surface-2);accent-color:var(--c-accent);display:block}
.balken progress::-webkit-progress-bar{background:var(--c-surface-2);border-radius:7px}
.balken progress::-webkit-progress-value{background:var(--c-accent);border-radius:7px}
.balken progress::-moz-progress-bar{background:var(--c-accent);border-radius:7px}
table.lewis{max-width:34rem}
table.lewis th{width:9rem;text-align:left;font-weight:var(--fw-strong)}
.lewis-marker{font-weight:var(--fw-strong);color:var(--c-entschieden-text)}

/* Branchenkreis (Startseite) */
.kreis-block{display:grid;gap:var(--s-4);justify-items:center}
.kreis{width:100%;max-width:520px;height:auto;display:block;overflow:visible}
.kreis .speichen line{stroke:var(--c-line-strong);stroke-width:1.5}
.kreis .mitte .ring{fill:var(--c-surface);stroke:var(--logo-violett);stroke-width:7}
.kreis .mitte .balken{fill:var(--logo-orange)}
.kreis .blase circle{fill:var(--c-surface);stroke:var(--c-line-strong);stroke-width:1.5;transition:fill var(--t-kurz) var(--ease),stroke var(--t-kurz) var(--ease)}
.kreis .blase text{font:var(--fw-head) 18px/1 var(--font-text);fill:var(--c-text);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.kreis .blase:hover circle,.kreis .blase:focus-visible circle,.kreis .blase.treffer circle{fill:var(--c-accent);stroke:var(--c-accent)}
.kreis .blase:hover text,.kreis .blase:focus-visible text,.kreis .blase.treffer text{fill:var(--c-on-accent)}
.kreis .blase:focus-visible{outline:none}
.kreis .blase:focus-visible circle{stroke:var(--c-focus);stroke-width:4}
.kreis .blase.treffer circle{stroke-width:4;stroke:var(--c-entschieden-line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kreis .mitte .ring{stroke:var(--logo-violett-dunkelgrund)}}
:root[data-theme="dark"] .kreis .mitte .ring{stroke:var(--logo-violett-dunkelgrund)}
.kreis-suche{width:100%;max-width:520px}
.kreis-suche label{display:block;font-weight:var(--fw-strong);margin-bottom:var(--s-1)}
.kreis-treffer{margin:var(--s-2) 0 0;font-weight:var(--fw-medium)}
.vorschlag-zeile{max-width:560px}

/* Branchenkreis: Drehung per JavaScript (site2.js) */
.kreis-pause{justify-self:end;margin-top:calc(-1 * var(--s-2))}

/* Handy: kleine Kennzeichnung auf Vorschaubildern, kleinere Branchenueberschriften */
.ki-tag{white-space:nowrap}
.zeilen .foto{align-self:center}
@media (max-width:859px){
  .zeilen .ki-tag{left:var(--s-1);bottom:var(--s-1);font-size:.75rem;line-height:1.35;padding:0 var(--s-1)}
  .zeilen .name{font-size:var(--fs-lg);line-height:1.15}
  .zeilen a{padding:var(--s-3) var(--s-2)}
}

/* Produktseiten: Systembild neben dem Seitenkopf, Modulkarten */
.seiten-kopf.mit-bild .wrap{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:960px){.seiten-kopf.mit-bild .wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}}
.systembild{margin:0}
.systembild img{display:block;width:100%;height:auto;border-radius:var(--r-bild);border:var(--b-haar) solid var(--c-blatt-line);background:var(--c-blatt);box-shadow:var(--shadow-blatt)}
.systembild figcaption{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--c-text-muted)}
.seiten-inhalt .karte:has(ul){border:var(--b-blatt) solid var(--c-blatt-line);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);padding:var(--s-blatt);background:var(--c-blatt);box-shadow:var(--shadow-blatt);position:relative}

.beispiel-raster{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.beispiel-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:start}}
.legende-stapel{grid-template-columns:minmax(0,1fr)!important}

/* Verweise als Chips (Linklisten) und Modulkarten mit Knopf */
ul.linkreihe{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-3)}
ul.linkreihe li{margin:0;max-width:none}
ul.linkreihe a,.chip-link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--hit-min);padding:0 var(--s-4);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-chip);text-decoration:none;color:var(--c-text);font-weight:var(--fw-medium);background:var(--c-blatt);line-height:1.25}
ul.linkreihe a:hover,.chip-link:hover{background:var(--c-surface-2);border-color:var(--c-text)}
p.verweis{margin:0 0 var(--s-3)}
/* Navigationskarten: Verweise mit Zweckzeile statt Textlinks */
.nav-karten{list-style:none;margin:var(--s-4) 0;padding:0;display:grid;gap:var(--s-3)}
@media (min-width:720px){.nav-karten{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.nav-karten li{margin:0;max-width:none}
.nav-karten a{display:grid;gap:var(--s-1);height:100%;padding:var(--s-4) var(--s-blatt);color:var(--c-text);text-decoration:none;background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-left:4px solid var(--c-text);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt)}
.nav-karten a:hover{border-left-color:var(--c-accent)}
.nav-karten a:hover .nk-titel{text-decoration:underline;text-decoration-color:var(--c-accent)}
.nav-karten .nk-titel{font:var(--fw-head) var(--fs-lg)/1.2 var(--font-head);hyphens:auto}
.nav-karten .nk-zweck{color:var(--c-text-muted);font-size:var(--fs-sm)}
.nav-karten .nk-aktion{color:var(--c-link);font-weight:var(--fw-strong);font-size:var(--fs-sm);margin-top:var(--s-1)}
.seiten-inhalt .karte h3 a{color:inherit;text-decoration:none}
.seiten-inhalt .karte h3 a:hover{text-decoration:underline}
.seiten-inhalt .karte a.knopf{margin:var(--s-3) 0 0;text-decoration:none}
.seiten-inhalt .karte:has(ul){display:flex;flex-direction:column}
.seiten-inhalt .karte:has(ul) a.knopf{align-self:flex-start;margin-top:auto}
.seiten-inhalt .karte a.knopf,.seiten-inhalt a.knopf{line-height:1.25;padding-top:var(--s-2);padding-bottom:var(--s-2);text-align:center}

@media (min-width:720px){.fuss-spalten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fuss button.k-text{font:inherit;background:none;border:0;padding:var(--s-1) 0;text-decoration:none;color:var(--c-fuss-text);cursor:pointer;text-align:left;min-height:0;display:block}
.fuss button.k-text:hover{text-decoration:underline}

/* Blog: Karten mit Titelbild */
.blog-karten{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6) var(--s-5);grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr))}
.blog-karte a{display:flex;flex-direction:column;gap:var(--s-2);height:100%;color:var(--c-text);text-decoration:none}
.blog-karte .bk-bild{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-bild);background:var(--c-surface-2);border:var(--b-haar) solid var(--c-line)}
/* Leitartikel (neuester Beitrag) als Blatt, darunter Zeilen mit kleinem Bild */
.blog-leit{list-style:none;margin:0 0 var(--s-6);padding:0}
.blog-leit a{display:grid;gap:var(--s-4);color:var(--c-text);text-decoration:none;background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt);overflow:hidden;position:relative}
@media (min-width:860px){.blog-leit a{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}}
.blog-leit .bk-bild{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-surface-2)}
@media (min-width:860px){.blog-leit .bk-bild{aspect-ratio:4/3;height:100%}}
.blog-leit .bk-bild img{display:block;width:100%;height:100%;object-fit:cover}
.blog-leit .bk-text{display:grid;align-content:center;gap:var(--s-2);padding:var(--s-4) var(--s-blatt) var(--s-blatt)}
@media (min-width:860px){.blog-leit .bk-text{padding:var(--s-6) var(--s-6)}}
.blog-leit .bk-titel{font:var(--fw-head) var(--fs-2xl)/1.12 var(--font-head);letter-spacing:var(--tracking-head);hyphens:auto}
.blog-leit a:hover .bk-titel{text-decoration:underline}
.blog-leit .bk-auszug{color:var(--c-text-muted)}
.blog-leit .bk-meta{font-size:var(--fs-sm);color:var(--c-text-muted)}
.blog-leit .bk-kat,.blog-zeilen .bk-kat{font-weight:var(--fw-strong);color:var(--c-text)}
.blog-leit .bk-aktion{color:var(--c-link);font-weight:var(--fw-strong);margin-top:var(--s-2)}
.blog-zeilen .bk-meta{display:block;font-size:var(--fs-sm);color:var(--c-text-muted)}
.blog-zeilen .bk-bild{position:relative;display:block;border-radius:var(--r-bild);overflow:hidden;background:var(--c-surface-2)}
.blog-zeilen .bk-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.blog-zeilen .bk-ohne{aspect-ratio:4/3}
.blog-zeilen .name{font-size:var(--fs-lg)}
.blog-zeilen .satz{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:860px){.blog-zeilen a{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:var(--s-1)}.blog-zeilen .bk-bild{grid-row:1/4}.blog-zeilen .bk-meta,.blog-zeilen .name,.blog-zeilen .satz{grid-column:2}}
@media (max-width:859px){.blog-zeilen a{grid-template-columns:96px minmax(0,1fr);column-gap:var(--s-4)}.blog-zeilen .bk-bild{grid-row:1/4}.blog-zeilen .bk-meta,.blog-zeilen .name,.blog-zeilen .satz{grid-column:2}}
.blog-karte .bk-bild img{display:block;width:100%;height:100%;object-fit:cover}
.blog-karte .bk-ohne{background:var(--c-surface-2)}
.blog-karte .bk-meta{font-size:var(--fs-sm);color:var(--c-text-muted);margin-top:var(--s-1)}
.blog-karte .bk-kat{font-weight:var(--fw-strong);color:var(--c-text)}
.blog-karte .bk-titel{font:var(--fw-head) var(--fs-lg)/1.2 var(--font-head)}
.blog-karte a:hover .bk-titel{text-decoration:underline}
.blog-karte .bk-auszug{font-size:var(--fs-sm);color:var(--c-text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.beitragsbild{margin:var(--s-5) 0 0}
.beitragsbild img{display:block;width:100%;max-width:820px;height:auto;border-radius:var(--r-bild);border:var(--b-haar) solid var(--c-line)}
.beitragsbild img{width:auto;max-width:100%;max-height:30rem}
.bb-rahmen{position:relative;display:inline-block;max-width:100%;line-height:0}
.bb-rahmen .ki-tag{line-height:1.3}

/* Eckmarken wie auf Pruefplakette/Lieferschein (Variante Werkbank: --b-eckmarke 2px, sonst 0) */
.bildschirm::before,.bildschirm::after,.lieferschein::before,.lieferschein::after,.seiten-inhalt .karte:has(ul)::before,.seiten-inhalt .karte:has(ul)::after,.blog-leit a::before,.blog-leit a::after,.kontakt-karte::before,.kontakt-karte::after{content:"";position:absolute;width:var(--eckmarke);height:var(--eckmarke);border:0 solid var(--c-blatt-marke);pointer-events:none;z-index:2}
.bildschirm::before,.lieferschein::before,.seiten-inhalt .karte:has(ul)::before,.blog-leit a::before,.kontakt-karte::before{top:0;left:0;border-top-width:var(--b-eckmarke);border-left-width:var(--b-eckmarke)}
.bildschirm::after,.lieferschein::after,.seiten-inhalt .karte:has(ul)::after,.blog-leit a::after,.kontakt-karte::after{bottom:0;right:0;border-bottom-width:var(--b-eckmarke);border-right-width:var(--b-eckmarke)}

/* Der eine Bewegungsmoment: im Seitenkopf druckt ein Dokument seine Zeilen, ein Bildschirmfoto schiebt sich ins Bild (reduziert: aus) */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-bewegung="reduziert"]) .hero [data-bestellung] tbody tr{animation:drucken var(--t-druck) var(--ease) both;animation-delay:var(--t-druck-start)}
  :root:not([data-bewegung="reduziert"]) .hero [data-bestellung] tbody tr:nth-child(2){animation-delay:calc(var(--t-druck-start) + var(--t-druck-schritt))}
  :root:not([data-bewegung="reduziert"]) .hero [data-bestellung] tbody tr:nth-child(3){animation-delay:calc(var(--t-druck-start) + 2*var(--t-druck-schritt))}
  :root:not([data-bewegung="reduziert"]) .hero [data-bestellung] .aktion-v,:root:not([data-bewegung="reduziert"]) .hero [data-bestellung] .hinweis-v{animation:drucken var(--t-druck) var(--ease) both;animation-delay:calc(var(--t-druck-start) + 3*var(--t-druck-schritt))}
  :root:not([data-bewegung="reduziert"]) .hero .systembild{animation:schieben calc(2*var(--t-druck)) var(--ease) both;animation-delay:var(--t-druck-start)}
}
@keyframes drucken{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes schieben{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Kontaktseite: Kontaktkarte und Formular als Blatt */
.kontakt-karte{background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-top:4px solid var(--c-text);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt);padding:var(--s-blatt);position:relative;display:grid;gap:var(--s-3);align-content:start}
.kontakt-karte h2{font-size:var(--fs-xl);margin:0}
.kontakt-karte .kk-wer{color:var(--c-text-muted);margin:0}
.kontakt-karte .kk-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kontakt-karte dl{margin:0;display:grid;gap:var(--s-1) var(--s-3)}
.kontakt-karte dt{color:var(--c-text-muted);font-size:var(--fs-sm);margin-top:var(--s-2)}.kontakt-karte dd{margin:0}
.kontakt-karte .kk-fakten{list-style:none;margin:0;padding:0;border-top:var(--b-haar) solid var(--c-line)}
.kontakt-karte .kk-fakten li{display:flex;gap:var(--s-2);align-items:center;padding:var(--s-2) 0;border-bottom:var(--b-haar) solid var(--c-line);font-size:var(--fs-sm)}
.kontakt-karte .kk-fakten svg{width:18px;height:18px;flex:none;color:var(--c-daten-haken)}
.kontakt-blatt{background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-bottom-width:var(--b-blatt-unten);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt);padding:var(--s-blatt)}
@media (min-width:720px){.kontakt-blatt{padding:var(--s-6)}}
.kontakt-blatt .formular{max-width:none}
.kontakt-blatt h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}

/* Beitragsende: Weiterweg als Navigationskarten */
.beitrag-weiter{padding:var(--s-6) 0 var(--s-8);border-top:var(--b-regel) solid var(--c-text);margin-top:var(--s-6)}
.beitrag-weiter h2{font-size:var(--fs-lg);margin-bottom:var(--s-3)}

/* Kopfband: Kante oben (Schild) */
.band{border-top:var(--band-kante) solid var(--c-band-akzent)}
/* Funktionsgruppen: Karten untereinander in der breiten Spalte, Listen zweispaltig statt schmal und hoch */
@media (min-width:960px){
  .seiten-inhalt .raster>.raster{grid-template-columns:minmax(0,1fr);margin-bottom:0}
  .seiten-inhalt .raster>.raster .karte ul{columns:2;column-gap:var(--s-5)}
  .seiten-inhalt .raster>.raster .karte li{break-inside:avoid}
}
/* genau drei Karten nebeneinander statt 2+1; lange Listen (ab 8 Punkten) zweispaltig */
@media (min-width:960px){
  .seiten-inhalt .raster:has(>.karte:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .seiten-inhalt section>div>ul:has(>li:nth-child(8)),.seiten-inhalt section>ul:has(>li:nth-child(8)){columns:2;column-gap:var(--s-5)}
  .seiten-inhalt ul:has(>li:nth-child(8))>li{break-inside:avoid}
}
/* Altseiten-Aufteilung Text | Bild: nebeneinander statt Bild unter dem Text */
@media (min-width:960px){
  .seiten-inhalt section>div:has(>div>h2):has(>figure){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
  .seiten-inhalt section>div:has(>div>h2):has(>figure)>figure{margin:0}
}

/* Support-Seite: Felder zum Kopieren (ein Klick markiert alles) */
.kopierfeld { display: inline-block; padding: var(--s-1) var(--s-3); border: var(--b-haar) solid var(--c-line-strong); border-radius: var(--r-2); background: var(--c-blatt); user-select: all; overflow-wrap: anywhere; }
.support-abschnitt { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--b-haar) solid var(--c-line); max-width: 46rem; }
.support-abschnitt h3 { margin-top: var(--s-6); }

/* Baeckerei: vier Orte (Grundriss), versetzte Breiten 7/5 und 5/7 */
.orte{display:grid;gap:var(--s-6) var(--s-5);grid-template-columns:minmax(0,1fr)}
.ort{margin:0;min-width:0}
.ort-bild{position:relative}
.ort-bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-bild)}
.ort-bild .ki-tag{top:var(--s-2);bottom:auto}
.ort figcaption{margin-top:var(--s-3);max-width:52ch}
.ort h3{margin:0 0 var(--s-1)}
.ort p{margin:0;color:var(--c-text-muted)}
@media (min-width:860px){
  .orte{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ort-1{grid-column:1/8}.ort-2{grid-column:8/13;align-self:end}
  .ort-3{grid-column:1/6;align-self:start}.ort-4{grid-column:6/13}
  .ort-2 .ort-bild img,.ort-3 .ort-bild img{aspect-ratio:4/3}
  .ort-1 .ort-bild img,.ort-4 .ort-bild img{aspect-ratio:16/10}
}

/* Startseite: Branchen-Chips nur auf schmalen Bildschirmen, ab 860 px zeigt der Kreis die Branchen */
@media (min-width:860px){ul.linkreihe.nur-schmal{display:none}}

.nb{white-space:nowrap}

/* Vorlagen-Seiten: Vorschau des PDF-Blatts */
.vorschau-blatt{margin:0;max-width:26rem}.vorschau-blatt a{display:block}.vorschau-blatt a:hover img{border-color:var(--c-text)}.vorschau-blatt img{display:block;width:100%;height:auto;border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-1);background:#fff}.vorschau-blatt figcaption{margin-top:var(--s-2);color:var(--c-text-muted);font-size:var(--fs-sm)}

/* Vorlagen-Uebersicht: drei Karten nebeneinander, auf dem Handy untereinander */
.vorlagen-raster{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6) var(--s-5);grid-template-columns:minmax(0,1fr)}
.vorlagen-karte{min-width:0}
.vorlagen-karte h2{margin:var(--s-3) 0 var(--s-1);font-size:var(--fs-lg)}
.vorlagen-karte h2 a{color:inherit;text-decoration:none}
.vorlagen-karte h2 a:hover{text-decoration:underline}
.vorlagen-karte p{margin:0 0 var(--s-3);color:var(--c-text-muted)}
.vorschau-link{display:block}.vorschau-link img{display:block;width:100%;height:auto;border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-1);background:#fff}
.vorschau-link:hover img{border-color:var(--c-text)}
@media (min-width:860px){.vorlagen-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}