/*
 * Maulhardt Gruppe - global styles.
 *
 * Ported 1:1 from the static framework site (website-maulhardt-gruppe,
 * src/global/base.css) so the WordPress site keeps the approved design.
 * Tokens live in style.css (NETZLICHT-TOKENS block, generated from
 * web-modules/design-tokens/maulhardt-gruppe.json), layout primitives in
 * assets/css/layout-primitives.css. Left out on purpose: theme toggle and
 * consent banner (the site has neither). WordPress-specific rules are at
 * the end of this file.
 */

/* ── Site-Composition-Tokens Maulhardt ──
   Ergaenzend zum auto-generierten TOKENS-Block oben (Quelle:
   web-modules/design-tokens/maulhardt-gruppe.json — dort pflegen,
   nie im Block selbst). Farbwelt der alten Site: Rot #e61d21 (primary),
   Navy #010032 (accent, dunkle Sektionen + Button-Hover), Anthrazit
   #191c29 als zweiter dunkler Sektions-Ton. Site ist light-only
   (Brief: farbschema light) — keine Dark-Mode-Bloecke. */
:root {
    --color-surface-dark: #191c29;   /* Anthrazit (Kadence palette5) — dunkle Sektions-Variante */

    /* Text-taugliches Brand-Rot fuer KLEINEN Text (Kicker, Labels):
       pures #e61d21 schafft auf Weiss 4.6:1, auf bg-soft aber nur ~4.2:1
       (WCAG-AA-Fail fuer <18px-Text). Minimal via color-mix abgedunkelt
       (>=5:1 auf bg + bg-soft), visuell weiter klar Brand-Rot. Grosse
       Ziffern/Headlines (>=3:1) duerfen weiter --color-primary pur nutzen. */
    --color-primary-text: color-mix(in oklab, var(--color-primary) 92%, black);

    /* ── Typo-Zusatzgroessen ── */
    --font-size-sm:   0.875rem;
    --font-size-base: 1.125rem;      /* 18px Body wie alte Site */
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;

    /* Display-Skala (h1-Groesse, Ziel 58px Desktop aus design-tokens/
       maulhardt-gruppe.json). Eigener Token, weil ausser h1 auch
       Display-Zahlen die exakt gleiche Skala fahren muessen
       (.werkstatt-tel) — Literal-Duplikate driften sonst still
       auseinander sobald jemand die h1-Groesse anfasst. */
    --font-size-display: clamp(2.25rem, 5vw, 3.625rem);

    /* ── Container-Zusatz ── */
    --container-full: 100%;

    /* Semantische Aliase — verwenden den passenden Token aus der Skala oben.
       Site kann --space-Xxl auf eigene Werte stellen, alle Aliase ziehen mit. */
    --section-pad-y:        var(--space-2xl);
    --section-pad-tight:    var(--space-xl);
    --section-pad-spacious: var(--space-4xl);
    --hero-pad-top:         var(--space-5xl);
    --hero-pad-bottom:      var(--space-3xl);

    --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 14px rgba(0,0,0,.08);
    --shadow-lg:  0 15px 15px -10px rgba(0,0,0,.05);   /* weicher Card-Shadow wie alte Site */
}

/* ── Montserrat Variable (wght 100-900), self-hosted ──
   Subsets latin + latin-ext aus dem Alt-Site-Mirror (Google-Fonts-
   Variable-Slices, fvar-verifiziert 2026-07-15). unicode-ranges 1:1
   aus dem Original-CSS der alten Site. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Anti-Quetsch-Defaults ──
   Verhindern ungewollte Overlaps, Clipping und zu enge Nachbarschaft.
   Spezielle Designs koennen mit eigenen Klassen uebersteuern. */

/* Lange Woerter/URLs brechen statt Container zu sprengen.
   Headings: KEINE Silbentrennung (Typo-Regel — sieht nicht clean aus),
   nur Wort-Breaks bei Extrem-Faellen (URLs). text-wrap:balance fuer
   schoenere Umbrueche auf modernen Browsern. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
    text-wrap: balance;
}
p, li, dd, dt, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* Lead-Absaetze auch pretty-gebrochen */
.lead { text-wrap: pretty; }

/* Inline-Highlights (mark, .hero-badge, Buttons) brechen sauber ueber Zeilen:
   box-decoration-break: clone wiederholt padding + border pro Zeile,
   sonst kleben die Zeilen oft aneinander. */
mark, .hero-badge, .badge, .pill {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Inline-elements innerhalb von Headlines erben die Line-Height und kriegen
   eigene padding-block - verhindert Quetschen wie beim alten "Seit 1934"-Fall. */
h1 > span, h2 > span, h3 > span,
h1 > mark, h2 > mark, h3 > mark {
    line-height: inherit;
    padding-block: 0.05em;
}

/* Bilder/Media sprengen nie den Container */
img, video, iframe, svg, picture, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Pre/Code scrollen statt ueberlaufen */
pre { overflow-x: auto; }

/* Tabellen: bei Enge scrollen statt rauszuhengen (Wrapper um <table> vorausgesetzt) */
.table-wrap { overflow-x: auto; }

/* Safety-Gap zwischen benachbarten Bloecken im Container:
   Verhindert, dass handgeschriebene Pages Nachbarn ohne Luft setzen.
   .card, .feature usw. haben ihren Gap ueber Grid/Flex — hier greift es
   nur wenn gar keine Klasse/Kontext Abstand vorgibt. */
main .container > * + :where(h2, h3, section, div, ul, ol, p, figure) {
    margin-top: 1rem;
}
main .container > * + h2 { margin-top: 3rem; }
main .container > h2 + *,
main .container > p.lead + * { margin-top: 2rem; }

html { font-size: 16px; scroll-behavior: smooth; }

/* Anker-Sprungziele nicht unter den sticky Header schieben.
   .site-header ist position:sticky und ~4.25rem hoch (gescrollt ~3rem) —
   ohne scroll-margin landet jeder #anchor-Sprung teilweise dahinter, das
   Sprungziel ist dann angeschnitten oder ganz verdeckt. Betrifft jede Seite
   mit Sprunglinks (Startseite "Leistungen ansehen", Lager-Zweiwege-Block,
   AGB-Inhaltsverzeichnis). 5.5rem deckt den ungescrollten Header plus Luft. */
:where(h1, h2, h3, section, li)[id] { scroll-margin-top: 5.5rem; }

body {
    font-family:      var(--font-sans);
    font-size:        var(--font-size-base);
    color:            var(--color-text);
    background-color: var(--color-bg);
    line-height:      1.6;
    letter-spacing:   0.055em;   /* 1px@18px — praegnantes Detail der alten Site */
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
}

/* ── Container ── */
.container {
    max-width:     var(--container-wide);
    margin:        0 auto;
    padding-left:  var(--container-padding);
    padding-right: var(--container-padding);
}
.container--mid   { max-width: var(--container-mid); }
.container--text  { max-width: var(--container-text); }
.container--full  { max-width: var(--container-full); padding: 0; }

/* ── Section (responsive Padding via clamp) ── */
.section              { padding: var(--section-pad-y) 0; }
.section--tight       { padding: var(--section-pad-tight) 0; }
.section--spacious    { padding: var(--section-pad-spacious) 0; }
.section--alt         { background: var(--color-bg-soft); }
/* Dunkle Sektionen wie alte Site: Navy (accent) als Standard,
   .section--dark--anthrazit als zweiter Ton. Headlines dort WEISS
   (Original-Pattern; Brand-Rot auf Navy waere kontrastschwach). */
.section--dark        { background: var(--color-accent); color: #ffffff; }
.section--dark--anthrazit { background: var(--color-surface-dark); }
.section--dark .lead  { color: rgba(255,255,255,.8); }
.section--dark h1,
.section--dark h2,
.section--dark h3     { color: #ffffff; }
/* Links auf Navy: global gilt a { color: var(--color-text) } = #000000 und
   damit 1.05:1 auf #010032 — praktisch unsichtbar. Gegenstueck zum
   .section--primary-Block unten: auf #ffffff kippen (20.05:1). */
.section--dark a:not(.btn) {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}
.section--dark a:not(.btn):focus-visible { outline-color: #ffffff; }

/* Rote Vollflaechen-Sektion — das kraeftige Marken-Statement (die alte
   Kadence-Site hatte solche Farbfelder). Weiss auf #e61d21 = 4.6:1 (AA).
   WICHTIG: KEINE rgba-Abschwaechung fuer Fliesstext auf Rot — schon
   rgba(255,255,255,.9) faellt unter 4.5:1. Alles voll weiss. */
.section--primary        { background: var(--color-primary); color: #ffffff; }
.section--primary h1,
.section--primary h2,
.section--primary h3     { color: #ffffff; }
.section--primary .lead  { color: #ffffff; }
.section--primary a:not(.btn) {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}
.section--primary a:not(.btn):focus-visible,
.section--primary .btn:focus-visible { outline-color: #ffffff; }
/* Roter Button verschwindet auf Rot → Invert-Variante: weiss mit rotem
   Text (4.6:1). Hover kippt auf Navy wie der Original-Button-Hover. */
.section--primary .btn-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
    .section--primary .btn-primary:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-accent-fg);
    }
}

/* ── Overlap-Layouts (Layer-Pattern) ──
   Element ragt aus der eigenen Sektion nach OBEN in die vorige dunkle
   Hero-/Farb-Sektion: echtes DOM-Element, position:relative malt es
   ueber den BG der vorigen Sektion (kein ::before-z-index-Deko-Hack).
   Voraussetzungen: die eigene Sektion braucht genug padding-top
   (Standard-.section reicht); die Sektion darueber endet bei Bedarf
   mit .section--flush-bottom. Einsatz als erstes Kind des .container:
   nachfolgende Inhalte ruecken mit nach oben. */
.pull-up        { position: relative; margin-top: calc(-1 * var(--space-3xl)); }
.pull-up--deep  { position: relative; margin-top: calc(-1 * var(--space-4xl)); }
.section--flush-bottom { padding-bottom: 0; }

/* ── Background-Image-Section (Hero mit Parallax + Overlay) ── */
/* Usage: <section class="section section--bg" style="--bg:url(/img/pages/xyz.webp)">
   Desktop: background-attachment fixed fuer Parallax-Effekt.
   Mobile: scroll (iOS-Fix — fixed funktioniert dort nicht).
   prefers-reduced-motion wird respektiert (kein Parallax). */
.section--bg {
    position: relative;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    /* Background color under the photo: white text needs a defined background
       (WCAG F24), also while the image loads or when it fails. Checkers
       ignore the ::before overlay and measured 1:1 against white. */
    background-color: var(--color-surface-dark);
    padding: clamp(5rem, 10vw, 9rem) 0;
    overflow: hidden;
    isolation: isolate;
}
.section--bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 100%);
    z-index: -1;
}
.section--bg .container { position: relative; z-index: 1; }
.section--bg h1, .section--bg h2, .section--bg h3 { color: #ffffff; }
.section--bg .lead { color: rgba(255,255,255,.9); }
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .section--bg { background-attachment: fixed; }
}

/* ── Split-Image: Text + Bild nebeneinander ── */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__text  { min-width: 0; }
.split__media { min-width: 0; }
.split__media img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 820px) {
    .split { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: 0; }
}

/* ── Grid-Utilities fuer Produkt-/Feature-Raster ── */
/* Gap auf der Token-Skala statt fixer 1.5rem: im 1600er-Container werden
   .grid-2-Karten fast 800px breit — 24px Luft dazwischen liessen sie
   aneinanderkleben. clamp gibt auf grossen Viewports 2.5rem, auf kleinen
   bleibt es kompakt. */
.grid-auto-fit {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-2 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { display: grid; gap: var(--space-lg); grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) {
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .grid-auto-fit, .grid-2, .grid-3, .grid-4, .grid-6 {
        grid-template-columns: 1fr;
    }
}

/* ── Typography ──
   Montserrat fuer alles (wie alte Site): H1 weight 900, H2-H4 weight 800,
   mixed-case (KEIN uppercase), kein negatives Tracking, lh ~1.2.
   Groessen-Ziele aus design-tokens/maulhardt-gruppe.json (h1 58 / h2 40 /
   h3 30 / h4 24 px am Desktop). Headings ohne den Body-Letter-Spacing. */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 800; letter-spacing: 0; margin-bottom: 1rem; }
h1 { font-size: var(--font-size-display);  font-weight: 900; line-height: 1.15; margin-bottom: 1.5rem; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.875rem); line-height: 1.25; }
h4 { font-size: clamp(1.2rem, 1.4vw, 1.5rem); }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.lead {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ── Eyebrow-Kicker (Erkennungszeichen der Site) ──
   Klein, uppercase, weites Tracking, Brand-Rot, kurzer 2rem-Strich
   davor — echtes ::before-Element mit currentColor, kein Overlay-Hack.
   Auf dunklen Sektionen kippt er komplett auf Weiss (Rot auf Navy
   waere fuer kleinen Text kontrastschwach). */
.kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin-bottom: var(--space-xs);
}
.kicker::before {
    content: '';
    width: 2rem;
    height: 3px;
    background: currentColor;
    flex-shrink: 0;
}
.text-center .kicker { justify-content: center; }
.section--dark .kicker,
.section--bg .kicker,
.section--primary .kicker { color: #ffffff; }

/* Sektions-Kopf: kicker + h2 + optional .lead als konsistentes
   Kopf-Pattern fuer Content-Sektionen. */
.section-head {
    max-width: var(--container-text);
    margin-bottom: var(--space-lg);
}
.section-head > :last-child { margin-bottom: 0; }

/* Scroll-Reveal der Sektions-Koepfe (CSS-only, scroll-driven animations).
   Der Default-Zustand ist der ENDzustand (sichtbar) — die Animation blendet
   nur ein. Das ist Pflicht: Firefox unterstuetzt animation-timeline bis
   heute nicht (Chromium 115+, Safari 26+), ein `opacity: 0`-Default wuerde
   die Koepfe dort dauerhaft verstecken. Guard-Muster + Erstanwendung:
   TWZV verband.css (stats-morph), Memory reference_scroll_driven_animations.
   Kicker/H2/Lead laufen leicht versetzt, damit der Kopf als Einheit
   hereinkommt statt als drei Einzelteile. */
@keyframes nl-reveal-up {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .section-head > .kicker,
        .section-head > h2,
        .section-head > .lead {
            animation: nl-reveal-up linear both;
            animation-timeline: view();
        }
        .section-head > .kicker { animation-range: entry 5%  cover 18%; }
        .section-head > h2      { animation-range: entry 8%  cover 24%; }
        .section-head > .lead   { animation-range: entry 11% cover 30%; }
    }
}

img, video, svg { max-width: 100%; display: block; }

a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--color-primary); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    a:hover { text-decoration-thickness: 2px; }
}

/* .lead definiert oben im Typography-Block */

/* ── Buttons ── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.875rem 1.75rem;
    border-radius:   var(--radius-button);   /* Pill wie alte Site (40px+) */
    font-weight:     600;
    font-size:       var(--font-size-base);
    text-decoration: none;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      opacity .15s, transform .08s, background-color .15s, border-color .15s;
    font-family:     var(--font-sans);
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:active        { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { opacity: .92; }
    /* Original-Hover der alten Site: Rot kippt auf Navy */
    .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); opacity: 1; }
}
.btn-primary {
    background: var(--color-primary);
    color:      var(--color-primary-fg);
    border-color: var(--color-primary);
}
.btn-outline {
    background:    transparent;
    border-color:  var(--color-text);
    color:         var(--color-text);
}
/* Outline-Button auf dunklem Grund (section--bg-Hero, section--dark) —
   genutzt von index.md UND karriere.md, deshalb hier statt page-CSS.
   Hover-Regel im Block "Button-Hover verfeinert" weiter unten, damit
   sie .btn-outline:hover im Cascade schlaegt. */
.btn-outline--ondark {
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

/* ── Top-Bar (duenn, Navy wie Brand-Sekundaerfarbe): Kundenportal links,
   Telefon + E-Mail rechts. Hover hellt auf (Rot auf Navy waere
   kontrastschwach ~2.5:1). ── */
.site-topbar {
    background: var(--color-accent);
    color: #e8e9f2;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    /* Das rote Marken-Signal: duenne Akzentlinie als unterer Abschluss */
    border-bottom: 2px solid var(--color-primary);
}
.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    min-height: 38px;
}
/* Portal side holds Kundenportal and, once the customer enters the link,
   Sendungsverfolgung: same gap and divider as the contact side. */
.site-topbar__portal,
.site-topbar__contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.site-topbar__portal { min-height: 22px; }
/* Feiner Trenner zwischen Telefon | E-Mail (rgba-weiss, mittig im Gap) */
.site-topbar__portal a + a,
.site-topbar__contact a + a {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    padding-left: 1.25rem;
}
.site-topbar__portal a,
.site-topbar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #e8e9f2;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
}
.site-topbar__portal svg,
.site-topbar__contact svg { width: 1rem; height: 1rem; }
.site-topbar__portal a:focus-visible,
.site-topbar__contact a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .site-topbar__portal a:hover,
    .site-topbar__contact a:hover { color: #ffffff; }
}

/* Live-Status-Badge */
.live-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #e5e5e5;
    text-decoration: none;
}
.site-topbar a { text-decoration: none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) {
    .live-status:hover { color: var(--color-primary); }
}
.live-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.live-status--open .live-status__dot { background: #22c55e; }
.live-status--closed .live-status__dot { background: #9ca3af; }
/* Pulsing ring, nur bei 'open' */
.live-status--open .live-status__dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .live-status--open .live-status__dot::after { animation: none; }
}

/* ── Main-Header ── */
.site-header {
    padding:        0.75rem 0;
    border-bottom:  1px solid var(--color-border);
    position:       sticky;
    top:            0;
    background:     color-mix(in oklab, var(--color-bg) 88%, transparent);
    z-index:        100;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    transition: padding .18s ease, background .18s ease;
}
.site-header.is-scrolled { padding: 0.4rem 0; }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.site-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
}
/* Maulhardt-Logo ist eine breite Wortmarke (541x131) — Hoehe fixieren,
   Breite folgt der Ratio (Template-Default 3rem x 3rem war fuers
   quadratische Icon+Text-Muster). */
.site-header .logo img { height: 2.75rem; width: auto; transition: height .18s ease; }
.site-header.is-scrolled .logo img { height: 2.25rem; }
.site-header .logo__text {
    font-family: var(--font-display);
    font-weight: 700;
    /* Brand-Text skaliert mit runter statt auf Mobile versteckt zu werden.
       Auf 320px-Screens faellt der Text auf ~0.78rem, bleibt sichtbar. */
    font-size: clamp(0.78rem, 3.4vw, 1.35rem);
    letter-spacing: -0.015em;
    color: var(--color-text);
    white-space: nowrap;
}

.site-nav {
    display: flex;
    gap: 1.75rem;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.site-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
}
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.site-nav a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .site-nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav a::after { transition: none; }
}
/* Aktive Seite (aria-current="page", gesetzt von init.js): rote
   Unterstreichung permanent + staerkeres Gewicht. */
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Werkstatt-Dropdown (Desktop): oeffnet per :hover (Maus) + :focus-within
   (Tastatur). Top-Link fuehrt zur Werkstatt-Seite — Touch-Fallback, nie tot.
   Pattern aus TWZV uebernommen. */
.nav-has-sub { position: relative; display: flex; align-items: center; }

.nav-caret {
    display: inline-block;          /* span braucht inline-block, sonst kollabiert der border-Pfeil zum Strich */
    width: 0.42em; height: 0.42em;
    margin-left: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.18em) rotate(45deg);
    transition: transform 0.2s ease;
}

.nav-has-sub:focus-within .nav-caret { transform: translateY(0.06em) rotate(225deg); }

@media (hover: hover) and (pointer: fine) {
    .nav-has-sub:hover .nav-caret { transform: translateY(0.06em) rotate(225deg); }
}

.nav-sub {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2xs);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}

.nav-has-sub:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
    .nav-has-sub:hover .nav-sub {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

/* ESC-Dismiss (WCAG 1.4.13): init.js setzt .is-dismissed auf die Gruppe,
   solange Hover/Fokus noch anliegen. Muss NACH den :hover/:focus-within-
   Regeln stehen (gleiche Spezifitaet, letzte Regel gewinnt). visibility
   hidden macht die Sub-Links unfokussierbar — Tab ueberspringt sie sauber.
   mouseleave/focusout entfernen die Klasse wieder (re-armed). Framework-
   Pattern aus website-template (TWZV-Audit 2026-07-17). */
.nav-has-sub.is-dismissed .nav-sub {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
}

.nav-has-sub.is-dismissed .nav-caret { transform: translateY(-0.18em) rotate(45deg); }

.nav-sub a {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.nav-sub a::after { display: none; }

@media (hover: hover) and (pointer: fine) {
    .nav-sub a:hover { background: var(--color-bg-soft); }
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
/* Header-CTA: bewusst clean ohne Icon — Gewicht + Padding tragen ihn */
.site-header__cta {
    white-space: nowrap;
    padding: 0.55rem 1.25rem;
    font-weight: 700;
}

/* ── Burger-Button (nur mobile) ── */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text);
    transition: border-color .15s ease;
}
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle__box {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
}
.nav-toggle__box span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    .nav-toggle__box span { transition: none; }
}

/* ── Mobile-Drawer (Off-Canvas) ──
   Drawer ist als Sibling des <header> ins HTML geschrieben — nicht mehr als
   Kind. Vorteile:
   - Header behaelt seinen backdrop-filter ohne den Drawer im Containing-
     Block einzusperren (W3C Filter Effects L2).
   - Der body.nav-open-Backdrop ueberdeckt Viewport inkl. Header → Blur
     wirkt durchgehend ueber Logo/Topbar.
   - Drawer (z-index 110) liegt ueber dem Backdrop (105), beide im Root-
     Stacking-Context. */
.site-drawer        { display: none; }
.site-drawer__close { display: none; }

/* Site-Breakpoint 1200px: 6 Nav-Items + "Unternehmensgruppe" + CTA
   passen unterhalb davon nicht mehr nebeneinander (Template-Default
   war 960px fuer 3-4 Items). */
@media (max-width: 1200px) {
    .site-topbar .sm-hide { display: none; }
    .nav-toggle           { display: inline-flex; }
    .site-nav             { display: none; }     /* Desktop-Nav auf Mobile ausblenden */
    .site-header__cta     { display: none; }

    /* Drawer sichtbar + Off-Canvas von rechts */
    .site-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(88vw, 360px);
        padding: 4.5rem 0 2rem;                   /* Platz fuer Close-X */
        background: var(--color-bg);
        border-left: 1px solid var(--color-border);
        /* Closed = not painted. translateX(100%) alone parks the box right
           next to the viewport: --shadow-lg and the border-left painted a 1
           to 2px line at the right edge (Chrome up to 1.7px, WebKit 1px).
           visibility interpolates discretely (visible during the whole
           transition), so the slide-out still shows; reduced motion
           (transition: none below) hides at once. Keyboard and screen reader
           state is unchanged: the closed drawer is already inert +
           aria-hidden (init.js). Per MDN visibility (Interpolation,
           Accessibility), verified 2026-09-24. */
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .28s ease, visibility .28s;
        box-shadow: var(--shadow-lg);
        z-index: 110;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }

    /* Close-Button (X). Enter-Animation rotate(-90deg) scale(0.85) → 0.
       Respektiert prefers-reduced-motion weiter unten. */
    .site-drawer__close {
        display: inline-flex;
        position: absolute;
        top: 0.9rem; right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        transform: rotate(-90deg) scale(0.85);
        opacity: 0;
        transition: transform .32s cubic-bezier(.2,.7,.2,1.3) .08s,
                    opacity   .24s ease .08s,
                    background-color .15s,
                    border-color .15s;
    }
    .site-drawer[data-open="true"] .site-drawer__close {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
    .site-drawer__close:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    @media (hover: hover) and (pointer: fine) {
        .site-drawer__close:hover {
            background: var(--color-bg-soft);
            border-color: var(--color-primary);
            transform: rotate(90deg) scale(1.05);
        }
    }
    .site-drawer__close:active { transform: rotate(180deg) scale(0.95); }

    /* Kleine Wortmarke oben links — der Drawer wirkt sonst "nackt".
       Absolut im 4.5rem-Kopfbereich, vertikal auf Hoehe des Close-X. */
    .site-drawer__brand {
        position: absolute;
        top: 1.15rem;
        left: 1.75rem;
    }
    .site-drawer__brand img { height: 2rem; width: auto; }

    /* Nav-Items im Drawer */
    .site-drawer__items {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 1.75rem;
    }
    .site-drawer__items a {
        font-size: 1.1rem;
        padding: 0.9rem 0;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-text);
        text-decoration: none;
    }
    .site-drawer__items a::after { display: none; }

    /* Aktive Seite im Drawer: roter 3px-Kantenbalken links */
    .site-drawer__items a[aria-current="page"]:not(.btn) {
        border-left: 3px solid var(--color-primary);
        padding-left: 0.75rem;
        font-weight: 600;
    }

    /* Werkstatt-Untergruppe im Drawer: leicht eingerueckt */
    .site-drawer__sub {
        display: flex;
        flex-direction: column;
        padding-left: 1rem;
    }
    .site-drawer__sub a { font-size: 1rem; }

    /* CTA + Meta-Links (Kundenportal, Telefon) unten im Drawer */
    .site-drawer__cta {
        margin-top: 1.25rem;
        justify-content: center;
        border-bottom: none;
    }
    .site-drawer__items a.site-drawer__cta {
        color: var(--color-primary-fg);
        border-bottom: none;
        padding: 0.875rem 1.75rem;
    }
    /* Meta-Links (Kundenportal, Telefon) optisch abgesetzt */
    .site-drawer__meta {
        display: flex;
        flex-direction: column;
        margin-top: 1.25rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--color-border);
    }
    .site-drawer__meta a {
        font-size: 0.95rem;
        color: var(--color-text-muted);
        padding: 0.5rem 0;
        border-bottom: none;
        text-decoration: none;
    }

    /* Backdrop + Body-Lock. Backdrop liegt im Root-Stacking-Context und
       ueberdeckt dank z-index 105 jetzt auch den Header (z-index 100) —
       Blur wirkt durchgehend. Drawer (110) bleibt klar darueber. */
    body.nav-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        backdrop-filter: blur(6px) saturate(140%);
        -webkit-backdrop-filter: blur(6px) saturate(140%);
        z-index: 105;
        animation: fadeIn .2s ease;
    }
    body.nav-open { overflow: hidden; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
        .site-drawer        { transition: none; }
        .site-drawer__close { transition: opacity .15s ease; transform: none; }
        body.nav-open::after { animation: none; }
    }
}

@media (max-width: 480px) {
    .site-topbar__contact a span { display: none; }
    .site-topbar__contact { gap: 0.75rem; }
    .site-topbar__contact svg { width: 1.1rem; height: 1.1rem; }
}

/* ── Footer-System (Redesign 2026-07) ──
   Aufbau: (1) rote Pre-Footer-CTA-Box — komponiert aus .section--primary
   (Farben) + .pull-up (Overlap) + .site-footer__closing (Layout) — ragt aus dem
   Navy-Footer nach oben in dessen margin-top-Luftraum (dort steht nie
   Seiten-Content, das Overlap ist auf jeder Seite kollisionsfrei);
   (2) Navy-Hauptfooter, 4-Zonen-Grid (Brand / Leistungen / Unternehmen /
   Kontakt); (3) Bottom-Bar; (4) riesige halbtransparente MAULHARDT-
   Wortmarke, unten vom Clip-Wrapper angeschnitten.
   Alle Links weiss unterstrichen (die globalen a-Farben waeren auf Navy
   unsichtbar/kontrastschwach), Focus-Outline weiss. */
.site-footer {
    /* flow-root: BFC verhindert den Margin-Collapse footer <-> pull-up-Box
       (sonst wandert die Navy-Kante mit der Box nach oben, kein Overlap).
       Bewusst KEIN overflow:hidden hier — das wuerde die Box kappen. */
    display: flow-root;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    margin-top: calc(var(--space-3xl) + var(--space-xl));
    font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1rem);
}
/* Variante ohne Pre-Footer-CTA (Rechtstexte: build.py haengt die Klasse an,
   wenn der NL-FOOTER-CTA-Block rausgeschnitten wird). Der grosse margin-top
   oben ist der Luftraum fuer die pull-up-Box — ohne Box wirkt er als totes
   Weiss zwischen Content und Footer. Und weil sonst die CTA-Box den oberen
   Innenabstand traegt, braucht das Grid hier ein eigenes padding-top. */
.site-footer--no-cta { margin-top: var(--space-2xl); }
.site-footer--no-cta .site-footer__grid { padding-top: var(--space-3xl); }
/* :not(.btn) ist PFLICHT (Spezifizitaets-Falle, gleiche Klasse wie die
   Framework-Lesson "main a:not(...) schluckt Card-Transitions"): dieser
   Selektor ist 0-1-1 und schlaegt damit .btn (0-1-0) — die Buttons der
   Pre-Footer-CTA-Box haetten sonst eine Unterstreichung im Normal- UND
   Hover-State. Gleiches Muster wie .section--dark a:not(.btn) oben. */
.site-footer a:not(.btn) {
    color: var(--color-accent-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    transition: text-decoration-color .15s ease;
}
.site-footer a:focus-visible {
    outline: 2px solid var(--color-accent-fg);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .site-footer a:not(.btn):hover {
        text-decoration-color: var(--color-primary);
        text-decoration-thickness: 2px;
    }
}

/* (1) Pre-Footer-CTA-Box (Markup: class="site-footer__closing section--primary pull-up") */
.site-footer__closing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md) var(--space-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
}
/* Text links waechst, Buttons stehen rechts daneben (wrappen erst
   wenn wirklich zu eng) */
.site-footer__closing-text { flex: 1 1 30rem; min-width: min(100%, 24rem); }
.site-footer__closing-title {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: var(--space-3xs);
}
.site-footer__closing-sub { margin-bottom: 0; }   /* volles Weiss erbt von .section--primary */
.site-footer__closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* (2) Haupt-Footer: 4-Zonen-Grid */
.site-footer__grid {
    display: grid;
    gap: var(--space-xl) var(--space-lg);
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}
.site-footer__brand > p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 40ch;
    margin: var(--space-md) 0;
    hyphens: manual;               /* keine Auto-Trennung ("Lei-nefelde") im Brand-Text */
    -webkit-hyphens: manual;
}
.site-footer__logo {
    height: 2.25rem;
    width: auto;
    filter: brightness(0) invert(1);   /* Wortmarke als Weiss-Variante */
}
/* Spalten-Labels im Kicker-Stil, mit kurzem rotem Strich */
/* Footer-Spaltentitel sind seit dem BITV-Test 2026-08 echte <h2>
   (Pruefschritt 9.1.3.1a, gemeldet fuer die Schwester-Site TWZV, hier
   dasselbe Muster): sie betiteln je eine Link- bzw. Adress-Gruppe. Die
   h1-h4-Basisregel wird neutralisiert (font-weight/line-height/color),
   damit die Optik exakt bleibt. */

.site-footer__label {
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-sm);
}
.site-footer__label::before {
    content: '';
    width: 1.25rem;
    height: 2px;
    background: var(--color-primary);
    flex-shrink: 0;
}
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
address { font-style: normal; }
.site-footer address { line-height: 1.9; }
/* Social-Icons in kantigen 1px-Rahmen, Hover kippt die Kante auf Rot */
.site-footer__profiles {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-sm);
}
.site-footer__profiles a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.site-footer__profiles svg { display: block; }
@media (hover: hover) and (pointer: fine) {
    .site-footer__profiles a:hover {
        border-color: var(--color-primary);
        background: rgba(255, 255, 255, 0.06);
    }
}

/* (3) Bottom-Bar */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xl);
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}
.site-footer__bottom p { margin-bottom: 0; }
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
}
.site-footer__year { cursor: help; }

/* (4) Riesen-Wortmarke: Deko-Typo in 7% Weiss auf Navy, unten vom
   Clip-Wrapper angeschnitten (negative margin-bottom + overflow hidden
   am Wrapper statt am Footer, siehe oben). */
.site-footer__watermark-clip { overflow: hidden; }
.site-footer__watermark {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 12vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    color: color-mix(in srgb, #ffffff 7%, var(--color-accent));
    margin-top: var(--space-sm);
    margin-bottom: -0.35em;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

@media (max-width: 980px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* ── Feature (Text-Kachel mit Border-Top-Akzent) ──
   Fuer Vorteil-Grids mit H3 + Text, ohne echte Box-Card. Konsistenter Look
   ueber alle Seiten: gelber 3px-Balken oben, padding-top, rest luftig. */
.feature {
    padding-top: 1rem;
    border-top: 3px solid var(--color-primary);
}
.feature h3    { margin-top: 0; margin-bottom: 0.5rem; }
.feature p     { margin-bottom: 0; }

/* Feature-Grids (Gap + Columns)
   Gleiche Deckelung wie .card-grid (siehe dort): der 220px-Floor liess im
   1600er-Container bis zu sieben Kacheln in eine Zeile — Sektionen mit 5 oder
   6 Features standen als gequetschte Reihe statt in zwei ruhigen Zeilen. */
.feature-grid {
    --feature-grid-gap:   1.75rem;
    --feature-grid-floor: 220px;
    --feature-grid-max:   3;
    display: grid;
    gap: 2rem var(--feature-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(
            var(--feature-grid-floor),
            (100% - (var(--feature-grid-max) - 1) * var(--feature-grid-gap)) / var(--feature-grid-max)
        ), 1fr));
    margin-top: 2rem;
}

/* ── Kennzahlen / Big-Numbers ──
   .usp-num  = grosse Zahl im USP-Kontext (Startseite)
   .callout-num = etwas kleinere Zahl fuer Feuerklassen o.ae. */
.usp-num, .callout-num {
    font-family: var(--font-display);
    font-weight: 800;
    /* Zaehler-Aesthetik: gleichbreite Ziffern, Zahlen stehen exakt untereinander */
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.usp-num      { font-size: clamp(2.25rem, 3.5vw, 3rem); font-weight: 900; }
.callout-num  { font-size: clamp(1.75rem, 2.5vw, 2.5rem); }

/* ── Prozess-Schritte (ol mit grossen Zaehler-Ziffern) ──
   Markup: <ol class="steps"><li><h3>Titel</h3><p>Text</p></li>…</ol>
   Grosse 900er-Ziffer ("01", "02", …) in Brand-Rot mit duenner
   Border-Box drum, Titel + Text darunter. Auto-Grid: traegt 3er- wie
   5er-Strecken. Rot ist hier large text (>=3:1 auf bg + bg-soft ok). */
.steps {
    list-style: none;
    counter-reset: steps;
    display: grid;
    gap: var(--space-lg) var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    padding: 0;
    margin: 0;
}
.steps > li { counter-increment: steps; }
.steps > li::before {
    content: counter(steps, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    height: 3.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border-input);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.steps > li h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.steps > li p  { margin-bottom: 0; }
/* Auf dunklen Sektionen: Box-Kante rgba-weiss, Ziffer bleibt rot (>=3:1 auf Navy) */
.section--dark .steps > li::before { border-color: rgba(255, 255, 255, 0.4); }

/* ── Akkordeon (native details/summary, fuer FAQ-Sektionen) ──
   Markup: <div class="accordion"><details><summary>Frage</summary>
   <div class="accordion__body"><p>Antwort</p></div></details>…</div>
   Kantig: 1px Rahmen, Eintraege nur durch horizontale Linien getrennt.
   Plus/Minus-Indikator rein per CSS: zwei Striche in Brand-Rot, der
   vertikale dreht bei [open] auf horizontal (Minus). Fokus-Ring mit
   NEGATIVEM offset, damit er innerhalb des 1px-Rahmens liegt und
   nirgends abgeschnitten wird. */
.accordion {
    border: 1px solid var(--color-border);
}
.accordion > details + details {
    border-top: 1px solid var(--color-border);
}
.accordion summary {
    position: relative;
    display: block;              /* entfernt das native Dreieck */
    list-style: none;
    padding: var(--space-md);
    padding-right: calc(var(--space-md) + 2.25rem);
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before,
.accordion summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--space-md);
    width: 1rem;
    height: 3px;
    background: var(--color-primary);
    translate: 0 -50%;
    transition: rotate .2s ease;
}
.accordion summary::after { rotate: 90deg; }
.accordion details[open] summary::after { rotate: 0deg; }
.accordion details[open] summary { border-bottom: 1px solid var(--color-border); }
.accordion summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
    .accordion summary:hover { background: var(--color-bg-soft); }
}
.accordion__body {
    padding: var(--space-md);
    max-width: var(--container-text);
}
.accordion__body > :last-child { margin-bottom: 0; }
/* Dunkle Variante fuer section--dark: Kanten rgba-weiss, Indikator
   bleibt rot (UI-Grafik >=3:1 auf Navy ok), Hover hellt minimal auf. */
.accordion--ondark,
.accordion--ondark > details + details { border-color: rgba(255, 255, 255, 0.25); }
.accordion--ondark details[open] summary { border-bottom-color: rgba(255, 255, 255, 0.25); }
.accordion--ondark summary:focus-visible { outline-color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
    .accordion--ondark summary:hover { background: rgba(255, 255, 255, 0.08); }
}

/* ── Hero (Utility) ── */
.hero        { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); text-align: center; }
.hero h1     { margin-bottom: 1.5rem; }
.hero .lead  { margin-bottom: 2rem; max-width: 54ch; margin-left: auto; margin-right: auto; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    padding: 0.45rem 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    line-height: 1;
}
.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
}

/* ── Forms ── */
.form-group   { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
label         { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); }
input, textarea, select {
    padding:       .75rem 1rem;
    /* border_input #6e7180 (4.3:1 auf Weiss) — WCAG 1.4.11 Non-Text
       Contrast fuer UI-Komponenten; das dekorative --color-border
       (#e5e5e5, 1.2:1) ist fuer Form-Controls nicht zulaessig. */
    border:        1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-base);
    font-family:   inherit;
    width:         100%;
    background:    var(--color-surface);
    color:         var(--color-text);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: transparent; }
textarea { resize: vertical; min-height: 8rem; }

.nl-contact-form { max-width: 36rem; }

/* Formular-Grid (2 Spalten Desktop, 1 mobil) — Muster TWZV.
   Grid-Formulare (Kontakt/Bewerbung/Transportanfrage) laufen im
   container--text; das 36rem-Limit der Basisklasse ist dort zu eng. */
.nl-contact-form.contact-form-grid { max-width: none; }
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-md);
    align-items: start;
}
.contact-form-grid__row { display: flex; flex-direction: column; gap: 0.375rem; }
.contact-form-grid__row--full { grid-column: 1 / -1; }
.contact-form-grid__hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}
.contact-form-grid__consent {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}
.contact-form-grid__actions { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .contact-form-grid { grid-template-columns: 1fr; }
}

/* Nummerierte Formular-Bloecke (Transportanfrage: 3 Bloecke wie im
   Kunden-PDF). fieldset resettet, legend als Block-Titel mit Zaehler. */
fieldset.form-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    /* Innen grosszuegiger als das Feld-Gap — die Blockkante braucht Luft,
       sonst kleben Inputs an der 1px-Linie */
    padding: var(--space-lg);
    margin: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    counter-increment: form-block;
}
form { counter-reset: form-block; }
fieldset.form-block legend {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 0 0.6rem;
    color: var(--color-accent);
}
fieldset.form-block legend::before {
    content: counter(form-block) ". ";
    color: var(--color-primary);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    fieldset.form-block { grid-template-columns: 1fr; }
}

/* Turnstile-Slot: collapsed solange leer, expanded sobald Widget rendert */
.nl-turnstile { display: block; grid-column: 1 / -1; }
.nl-turnstile:empty { display: none; }
.nl-turnstile:not(:empty) { min-height: 70px; margin-block: 0.5rem; }

/* Pflichtfeld-Marker: <abbr title="Pflichtfeld">*</abbr> im Label.
   Screen-Reader lesen "Pflichtfeld", Sighted-User sehen Tooltip beim Hover.
   Default-Abbr-Underline entfernen. Farbe an den Site-Text halten — primary
   ist oft Brand-Farbe, die dann WCAG-Kontrast-Fail haben koennte. */
.nl-contact-form label abbr[title] {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    margin-left: 0.15em;
    cursor: help;
}

/* Feld-Hinweistext (z.B. erlaubte Dateitypen + Groesse am Upload). Dezent
   unter dem Feld, via aria-describedby mit dem Input verknuepft. */
.form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2xs);
    margin-bottom: 0;
}

/* ── Form-Validation-States (contact-form-Modul rendert diese Klassen) ──
   WCAG: Fehler-Text mit Rot (semantisch), NICHT NUR ueber Farbe — auch mit
   Icon/Text-Kennzeichnung im nl-field-error-Span. aria-invalid=true wird
   vom Modul gesetzt. Form-Element MUSS `novalidate` haben, sonst greift
   der Browser-Native-Tooltip statt der deutschen Feld-spezifischen Messages. */
.nl-contact-form input.is-invalid,
.nl-contact-form textarea.is-invalid,
.nl-contact-form select.is-invalid {
    border-color: #c62828;
    box-shadow: 0 0 0 1px #c62828;
}
.nl-contact-form input.is-invalid:focus-visible,
.nl-contact-form textarea.is-invalid:focus-visible,
.nl-contact-form select.is-invalid:focus-visible {
    outline-color: #c62828;
}
.nl-contact-form .nl-field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #c62828;
    font-weight: 600;
    line-height: 1.4;
}
.nl-contact-form .nl-field-error::before {
    content: '⚠ ';
    margin-right: 0.15rem;
}
/* Success-State: nach erfolgreichem Submit setzt das Modul .is-success am Form.
   Felder werden ausgeblendet, stattdessen erscheint eine sichtbare Erfolgs-Box
   mit Haken-Badge. aria-live via .nl-form-status bleibt parallel aktiv
   fuer Screen-Reader.
   !important ist noetig weil manche Form-Wrapper inline style="display:grid" haben.
   Text via data-success-message-Attribut am <form>, Fallback darunter.

   ADR 2026-07-15 (Anti-Slop, design-treue.md Teil 2): kein Akzent-Streifen,
   stattdessen Navy-Vollfläche.
   - Warum kein border-left: 4px solid: ein Streifen ist nur zulässig wenn die
     Farbe etwas BEDEUTET. Rot bedeutet in dieser Form bereits "Fehler" (eigener
     Status-Token --color-error, oben an .is-invalid + .nl-field-error). Der rote
     Streifen an der Erfolgs-Box war damit nicht nur bedeutungsleer, sondern
     gegensemantisch. Die Bedeutung trägt der ✓-Badge über die GLYPHE, nicht über
     Farbe (U+2713 ist Unicode, kein Emoji, also regelkonform).
   - Warum Fläche statt ersatzlos streichen: das Formular sitzt in .section--alt,
     deren Hintergrund exakt --color-bg-soft ist = die alte Box-Farbe. Ohne
     Streifen hätte die Box auf /kontakt/ null Flächenkontrast. Navy folgt der
     dokumentierten DNA (Präzedenz .section--dark, DESIGN.md "Navy + Rot als
     Vollflächen-Rhythmus"), Weiss auf #010032 = ~19:1.
   - Warum grid-column: das ::before ist ein Grid-Item von .contact-form-grid
     (1fr 1fr) und hinge sonst halbbreit in Spalte 1. */
.nl-contact-form.is-success {
    position: relative;
    pointer-events: none;
}
.nl-contact-form.is-success > *:not(.nl-form-status) {
    display: none !important;
}
.nl-contact-form.is-success::before {
    display: block !important;
    grid-column: 1 / -1;
    padding: 1.5rem 1.75rem 1.5rem 4rem;
    background: var(--color-accent);
    font-weight: 600;
    color: var(--color-accent-fg);
    font-size: 1.05rem;
    line-height: 1.5;
    content: attr(data-success-message);
    position: relative;
}
.nl-contact-form:not([data-success-message]).is-success::before {
    content: 'Vielen Dank. Ihre Nachricht wurde gesendet. Wir melden uns zeitnah bei Ihnen.';
}
.nl-contact-form.is-success::after {
    content: '✓';
    position: absolute;
    top: 1.6rem;
    left: 1.5rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-fg);
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 900;
    pointer-events: none;
    line-height: 1;
}
.nl-form-status {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── Tabellen (kantig-technisch: nur horizontale 1px-Linien) ──
   th klein/uppercase/tracking wie die Kicker-Labels, Zeilen-Hover
   bg-soft. Auf Mobile in .table-wrap einschlagen (scrollt statt
   Container zu sprengen, Regel oben bei den Anti-Quetsch-Defaults). */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1rem;
}
th, td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
thead th {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    /* Kopfkante kraeftiger als die Zeilenlinien (bleibt 1px horizontal) */
    border-bottom-color: var(--color-border-input);
}
@media (hover: hover) and (pointer: fine) {
    tbody tr:hover { background: var(--color-bg-soft); }
}

/* ── Cards (generisch, mit Hover/Focus-States) ──
   Basis-Card: Box mit Padding, Border, Radius.
   Modifier:
     .card--link   → als <a> verwendet, Hover-Lift + Border-Color-Change
     .card--sm     → kleineres Padding (1.75rem)
     .card--highlight → FERO-Gelb BG mit schwarzem Text (CTA-Akzent)
   WCAG: Focus-Visible-Outline, prefers-reduced-motion respektiert, Hover
   nur auf echten Pointer-Geraeten (kein iOS-Sticky-Hover).
   PageSpeed: transform + opacity (GPU), kein Layout-Thrashing. */
/* ── Card (Editorial-Umbau 2026-07) ──
   Der 1px-Rahmen ist RAUS. Ein Rahmen um jede Gruppierung war das alte
   Ordnungsprinzip; bei vier Karten nebeneinander liest sich das wie ein
   Wireframe statt wie eine gefuehrte Seite. Kontur entsteht jetzt durch
   Flaeche, Bild und Typografie (Runbook 5.1).
   Textkarten behalten eine helle Traegerflaeche — auf .section--alt kippt
   sie auf Weiss, sonst waere Grau auf Grau unsichtbar. */
.card {
    padding:       var(--card-pad, 2.5rem);
    background:    var(--color-bg-soft);
    border:        none;
    border-radius: var(--radius-md);
    transition:    background-color .18s ease;
}
/* Kontext-Background NUR fuer Traeger-Karten, NICHT fuer .card--highlight:
   die highlight-Karte (roter Vollton) hat mit 1 Klasse weniger Spezifitaet
   als diese 2-Klassen-Regel und wuerde sonst auf .section--alt weiss
   uebermalt -> weisser Text auf weiss unsichtbar (AG-Section 100.000-m²-Box). */
.section--alt .card:not(.card--highlight),
.section--dark .card:not(.card--highlight) { background: var(--color-surface); }
.card--sm       { --card-pad: 2rem; }
.card h3        { margin-bottom: 0.75rem; }
.card p         { margin-bottom: 1rem; }
.card p:last-child { margin-bottom: 0; }
.card--link {
    display:         block;
    color:           var(--color-text);
    text-decoration: none;
}
.card--link h3  { transition: color .18s ease; }

/* Bild-Karten: rein editorial. Kein Padding, keine Flaeche — das Bild
   traegt die Karte, der Text steht offen darunter. Deshalb faellt auch
   der frueher noetige Negativ-Margin-Trick weg (er hob nur das Padding
   auf, das es jetzt nicht mehr gibt). */
.card--media,
.section--alt .card--media,
.section--dark .card--media {
    padding: 0;
    background: transparent;
}
.card--media > img:first-child {
    width: 100%;
    max-width: none;
    margin: 0 0 var(--space-md);
}
/* Hover-Akzent der Bild-Karten: roter Strich waechst unter dem Titel —
   dieselbe Sprache wie die Hauptnavigation. inline-block, damit der
   Strich am Text endet und nicht an der Spaltenkante. */
.card--media.card--link h3 {
    display: inline-block;
    position: relative;
}
.card--media.card--link h3::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.12em;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.card--highlight {
    padding:      var(--card-pad, 2.5rem);
    background:   var(--color-primary);
    color:        var(--color-primary-fg);
}
.card--highlight h3,
.card--highlight p { color: var(--color-primary-fg); }

.card--link:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    /* Ohne Rahmen gibt es nichts mehr zum Einfaerben und ohne Flaeche
       nichts zum Anheben — der Hover laeuft jetzt ueber Titel + Strich
       (Bild-Karten) bzw. eine minimal dunklere Flaeche (Textkarten). */
    .card--link:hover h3 { color: var(--color-primary-text); }
    .card--media.card--link:hover h3::after { transform: scaleX(1); }
    .card--link:not(.card--media):not(.card--highlight):hover {
        background: color-mix(in oklab, var(--color-bg-soft) 88%, var(--color-text));
    }
    .card--highlight.card--link:hover { opacity: .94; }
    .card--highlight.card--link:hover h3 { color: var(--color-primary-fg); }
}

@media (prefers-reduced-motion: reduce) {
    .card, .card--link { transition: none; }
    .card--media.card--link h3::after { transition: none; }
}

/* ── Link-Unterstreichung mit animiertem Akzent ──
   Default: dezent unterstrichen mit Primary-Farbe.
   Hover auf Pointer-Geraeten: dicker. */
main a:not(.btn):not(.card--link):not(.theme-toggle):not(.skip-link):not(.nl-download-card):not(.nl-job-card__link) {
    transition: text-decoration-thickness .12s ease;
}
@media (hover: hover) and (pointer: fine) {
    main a:not(.btn):not(.card--link):not(.theme-toggle):not(.skip-link):not(.nl-download-card):not(.nl-job-card__link):hover {
        text-decoration-thickness: 2px;
    }
}

/* ── Button-Hover verfeinert ── */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
    .btn-outline--ondark:hover {
        background: #ffffff;
        color: var(--color-accent);
        opacity: 1;
    }
}

/* ── Partner-Grid (Logos mit Link) ──
   Logos in Graustufen, bei Hover farbig + leichter Lift.
   filter:grayscale ist GPU-accelerated, transform auch. */
.partner-grid {
    display:        grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:            2.5rem 2rem;
    align-items:    center;
    justify-items:  center;
}
.partner-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    max-width:       160px;
    padding:         0.75rem;
    border-radius:   var(--radius-md);
    transition:      transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.partner-logo img {
    width:           100%;
    max-width:       140px;
    height:          60px;
    object-fit:      contain;
    filter:          grayscale(100%) opacity(0.72);
    transition:      filter .25s ease;
}
.partner-logo:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .partner-logo:hover img {
        filter: grayscale(0%) opacity(1);
    }
    .partner-logo:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }
}
@media (prefers-reduced-motion: reduce) {
    .partner-logo, .partner-logo img { transition: none; }
    .partner-logo:hover              { transform: none; }
}
/* Dark-Mode: Logos auf dunklem BG oft dunkel — Invert-Filter fuer Light-Logos */
[data-theme="dark"] .partner-logo img {
    filter: grayscale(100%) opacity(0.7) brightness(1.3);
}
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .partner-logo img {
        filter: grayscale(100%) opacity(0.7) brightness(1.3);
    }
}

/* ── Referenz-Cards (mit Bildern) ── */
.ref-card         { padding: 0; overflow: hidden; }
.ref-card-img     { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .3s ease; }
.ref-card-body    { padding: 1.5rem; }
@media (hover: hover) and (pointer: fine) {
    .ref-card:hover .ref-card-img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .ref-card-img             { transition: none; }
    .ref-card:hover .ref-card-img { transform: none; }
}

.ref-img          { margin: 0; }
.ref-img img      { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-md); display: block; }

/* ── Utility-Klassen (framework-weit, site-uebergreifend) ──
   Minimales Set, um die haeufigsten Inline-Styles zu ersetzen.
   Konvention: .u-* oder kurze semantische Namen. */

/* Text-Ausrichtung */
.text-center    { text-align: center; }
.text-muted     { color: var(--color-text-muted); }

/* Margin-Top Rhythmus (clamp-respektierend — Mobile enger) */
/* Spacing-Utilities auf der Token-Skala. Vorher Fixwerte (1 / 2 / 2.5rem):
   die skalierten nicht mit der Viewport-Breite und lagen so dicht
   beieinander, dass mt-2 -> mt-3 nur 0.5rem Unterschied machte — zu wenig,
   um "gequetscht" von "luftig" zu trennen. Jetzt clamp-basiert und mit
   mt-4 als grosszuegiger Stufe (z.B. Logo-Strip -> Button). */
.mt-1           { margin-top: var(--space-md); }
.mt-2           { margin-top: var(--space-lg); }
.mt-3           { margin-top: var(--space-xl); }

/* Breiten-Limits fuer Text im wide Container */
.max-w-text     { max-width: var(--container-text); }
.max-w-mid      { max-width: var(--container-mid); }

/* Meta-Text (klein, muted) — fuer Ort/Jahr, Unterzeilen, Sublabels */
.meta           { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Prose-Listen (Bulletlisten mit komfortabler Line-Height) */
.prose-list {
    list-style: disc;
    padding-left: 1.5rem;
    line-height: 1.8;
    max-width: var(--container-text);
}
.prose-list li { margin-bottom: 0.25rem; }

/* ── Card-Grids (verschiedene Kartengroessen) ──
   Spaltenzahl ist nach oben gedeckelt (--card-grid-max, Default 3).
   Grund: auto-fit mit reinem Pixel-Floor rechnet gegen die CONTAINER-Breite,
   und im 1600er-Container (unser Default) passen bei 280px-Floor fuenf Karten
   nebeneinander — die 5 offenen Stellen standen dadurch als gequetschte
   Fuenfer-Reihe. Ab ~4 Karten pro Zeile kippt die Optik.
   Technik: Der Floor ist das MAXIMUM aus Pixel-Floor und "1/n der freien
   Breite". Sobald 1/n groesser wird, koennen rechnerisch nie mehr als n
   Spalten entstehen; darunter greift wieder der Pixel-Floor und auto-fit
   faellt frei auf 2 und 1 Spalte zurueck. Kein Breakpoint noetig.
   Einzelne Grids duerfen bewusst mehr: --card-grid-max am Element setzen. */
.card-grid {
    --card-grid-gap:   2rem;
    --card-grid-floor: 280px;
    --card-grid-max:   3;
    display: grid;
    gap: var(--card-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(
        max(
            var(--card-grid-floor),
            (100% - (var(--card-grid-max) - 1) * var(--card-grid-gap)) / var(--card-grid-max)
        ), 1fr));
    margin-top: 2.5rem;
}
.card-grid--sm { --card-grid-floor: 220px; --card-grid-gap: 1.75rem; }
.card-grid--lg { --card-grid-floor: 320px; }

/* CTA-Group (Button-Reihe zentriert) — wie hero-cta fuer sekundaere Stellen */
.cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

/* Bild-Container (responsive Bild mit Radius) */
.img-fluid      { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }

/* ── Visually hidden (Screen-Reader only) ── */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── Skip-Link ── */
.skip-link {
    position:       absolute;
    left:           -9999px;
    top:            0;
    z-index:        1000;
    padding:        0.5rem 1rem;
    background:     var(--color-primary);
    color:          var(--color-primary-fg);
    font-weight:    600;
    text-decoration: none;
    border-radius:  0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Legal-Content (Impressum / Datenschutz) ── */
.legal-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
}
.legal-content h2 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.legal-content h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.legal-content p     { margin-bottom: 1rem; line-height: 1.7; }
.legal-content ul    { padding-left: 1.5rem; margin-bottom: 1rem; line-height: 1.7; }
.legal-content li    { margin-bottom: 0.5rem; }
.legal-content a     { color: var(--color-text); text-decoration-color: var(--color-primary); }
.legal-content strong{ color: var(--color-text); }
.legal-content hr    { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }
/* ADR 2026-07-15 (Anti-Slop): kein border-left: 4px solid var(--color-primary).
   Rot bedeutet an einem Adressblock im Impressum nichts (kein Status, keine
   Priorität, keine aktive Seite) — reine Deko. Die bg-soft-Fläche setzt den
   Block bereits vom Fliesstext ab, Weglass-Test: es fehlt nichts. Herkunft des
   Patterns: website-template (CLAUDE.md dokumentiert .legal-content als
   "address mit Soft-BG + Primary-Left-Border") — dort separat zu fixen. */
.legal-content address {
    font-style: normal;
    background: var(--color-bg-soft);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    margin: 1rem 0;
}

/* ── 404 ── */
.error-page    { padding: 8rem 0; text-align: center; }
.error-page h1 { font-size: 6rem; color: var(--color-text-muted); margin-bottom: 1rem; }

/* ── Subregions-Grid (Startseite Einsatzgebiete) ──
   Schmales Grid fuer 5-spalten Ort-Listen. */
.subregions-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 2rem;
    max-width: var(--container-mid);
}


/* ═══════════════════════════════════════════════════════════════════════
   CMS-Module: Jobs / Downloads / Popups
   Die Renderer (build.py) verkabeln nur die strukturellen nl-*-Klassen —
   die Optik kommt hier. Portiert von FERO, aber Token-treu in Maulhardts
   Design uebersetzt: Farben ausschliesslich via --color-*, Spacing via
   --space-*, Radien via --radius-* (Maulhardt ist kantig = 0, nur Buttons
   duerfen --radius-button). Karten folgen der entkasteten .card-Sprache
   (Traegerflaeche + Akzent statt 1px-Rahmen), Hover = dezenter Flaechen-
   Darken statt Scale. Navy (--color-accent) traegt die soliden Tags, Rot
   (--color-primary) das Interaktions-Signal. Hover nur auf Pointer-Geraeten,
   Fokus sichtbar (WCAG 2.4.7). Reduced-Motion greift global (Block oben). */

/* ── cms-jobs: Karriere-Uebersicht (Card-Grid) ── */
.nl-jobs-list {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: var(--space-lg);
}
/* Spalten deckeln, damit wenige Stellen nicht zu Riesen-Kacheln aufblasen
   (Anzahl kommt aus dem CMS): 2/4 → zwei, 3/5/6 → drei Spalten. */
@media (min-width: 900px) {
    .nl-jobs-list:has(> :nth-child(2):last-child),
    .nl-jobs-list:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .nl-jobs-list:has(> :nth-child(3):last-child),
    .nl-jobs-list:has(> :nth-child(5):last-child),
    .nl-jobs-list:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Kachel: entkastet wie .card — Traegerflaeche statt Rahmen, kantig, kein
   Shadow. bg-soft auf Weiss, surface (Weiss) auf grauen/dunklen Sektionen. */
.nl-job-card {
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    transition: background-color .18s ease;
}
.section--alt .nl-job-card,
.section--dark .nl-job-card { background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) {
    /* Gleiche Hover-Sprache wie .card--link: minimal dunklere Flaeche. */
    .nl-job-card:hover {
        background: color-mix(in oklab, var(--color-bg-soft) 88%, var(--color-text));
    }
}
.nl-job-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
}
/* Klick-Affordanz fuer die voll klickbare Kachel (Markup hat keinen CTA). */
.nl-job-card__link::after {
    content: "Mehr erfahren →";
    margin-top: auto;
    padding-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .nl-job-card:hover .nl-job-card__link::after { color: var(--color-primary-text); }
    .nl-job-card:hover .nl-job-card__title { color: var(--color-primary-text); }
}
.nl-job-card__title { transition: color .18s ease; }

/* Employment-Type als solider Navy-Tag (kantig, uppercase). */
.nl-job-card__type,
.nl-job-detail__type {
    display: inline-flex;
    align-self: flex-start;
    padding: var(--space-3xs) var(--space-xs);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: var(--radius-sm);
}
.nl-job-card__title {
    font-size: var(--font-size-lg);
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}
/* Meta-Zeile mit Punkt-Trenner zwischen den Spans (Ort · Start). Greift
   fuer Card (__location/__start-Spans) und Detail (blanke Spans). */
.nl-job-card__meta,
.nl-job-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}
.nl-job-card__meta > span + span::before,
.nl-job-detail__meta > span + span::before {
    content: "·";
    margin-right: var(--space-sm);
    opacity: 0.6;
}
/* Fokus-Ring auf dem inneren Anker (rot, WCAG 2.4.7 — Card ist aus der
   generischen a:focus-Regel via main-a-not ausgeschlossen). */
.nl-job-card__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── cms-jobs: Detailseite ── */
.nl-job-detail__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.nl-job-detail__type {
    align-self: auto;
    padding: var(--space-3xs) var(--space-sm);
    margin-bottom: var(--space-sm);
}
.nl-job-detail__title { margin: 0 0 var(--space-sm); }
.nl-job-detail__meta {
    justify-content: center;
    font-size: var(--font-size-base);
}
.nl-job-detail__body {
    line-height: 1.65;
    margin-top: var(--space-md);
}
/* Body-Sektionen (Aufgaben/Anforderungen/Benefits) als entkastete Flaechen. */
.nl-job-detail__tasks,
.nl-job-detail__requirements,
.nl-job-detail__benefits {
    padding: var(--space-lg);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}
.section--alt .nl-job-detail__tasks,
.section--alt .nl-job-detail__requirements,
.section--alt .nl-job-detail__benefits { background: var(--color-surface); }
.nl-job-detail__tasks h2,
.nl-job-detail__requirements h2,
.nl-job-detail__benefits h2 {
    margin-top: 0;
    font-size: var(--font-size-xl);
}
.nl-job-detail__tasks ul,
.nl-job-detail__requirements ul,
.nl-job-detail__benefits ul {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: grid;
    gap: var(--space-2xs);
}
.nl-job-detail__tasks li,
.nl-job-detail__requirements li,
.nl-job-detail__benefits li {
    padding-left: var(--space-md);
    position: relative;
    line-height: 1.55;
}
.nl-job-detail__tasks li::before,
.nl-job-detail__requirements li::before,
.nl-job-detail__benefits li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.6rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-primary);
}
/* Bewerbungs-Sektion: Wrapper-Flaeche, Formular selbst = .contact-form-grid. */
.nl-job-detail__application {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
.section--alt .nl-job-detail__application { background: var(--color-surface); }
.nl-job-detail__application > h2 { margin-top: 0; }

/* ── cms-downloads: Download-Cards (File-Type-Icon rein CSS) ── */
.nl-downloads-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: var(--space-lg);
}
/* Karte = klickbarer <a download>: entkastete Flaeche, kantig, kein Underline. */
.nl-download-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color .18s ease;
}
.section--alt .nl-download-card,
.section--dark .nl-download-card { background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) {
    .nl-download-card:hover {
        background: color-mix(in oklab, var(--color-bg-soft) 88%, var(--color-text));
    }
}
.nl-download-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* File-Icon: kantiges Navy-Rechteck mit abgerissener Ecke (clip-path),
   Typ-Kuerzel via content: attr(data-type). Ein Marken-Ton statt der
   Office-Bunt-Palette — Token-treu und zur kantig-technischen Optik passend. */
.nl-download-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 3.5rem;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
}
.nl-download-card__icon::before { content: attr(data-type); }
.nl-download-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 0;
}
.nl-download-card__title {
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.3;
    color: var(--color-text);
    /* Lange Einzelwoerter (z.B. "Abstellgenehmigung") brechen sonst aus der
       schmalen Card-Spalte aus. break-word + Auto-Trennung haelt sie drin. */
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.nl-download-card__desc {
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}
.nl-download-card__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-3xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── cms-popup-notifications: Strip / Modal / Inline ──
   Erbt Light/Dark automatisch ueber die Tokens. CTA spiegelt .btn (Rot →
   Navy-Hover). Severity-Border links ist funktional (Info/Warnung/Erfolg),
   kein Deko-Rot — daher zulaessig trotz Anti-Slop. */
:root {
    --nl-popup-maxw:        560px;
    --nl-popup-accent:      var(--color-text-muted);   /* info (Default) */
    --nl-popup-accent-warn: var(--color-primary);      /* warning (rot) */
    --nl-popup-accent-succ: var(--color-text);         /* success (stark) */
    --nl-popup-backdrop:    rgba(0, 0, 0, .55);        /* Scrim wie Nav-Drawer/Hero */
}
.nl-popup-title {
    margin: 0 0 var(--space-3xs);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}
.nl-popup-message {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.5;
}
.nl-popup-message p { margin: 0 0 var(--space-2xs); }
.nl-popup-message p:last-child { margin-bottom: 0; }
.nl-popup-message a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-underline-offset: .15em;
}
@media (hover: hover) and (pointer: fine) {
    .nl-popup-message a:hover { text-decoration-thickness: 2px; }
}
/* CTA spiegelt .btn / .btn-primary / .btn-outline (Maulhardt-Tokens). */
.nl-popup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-button);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.nl-popup-cta:active { transform: translateY(1px); }
.nl-popup-cta--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-fg);
}
.nl-popup-cta--secondary {
    background: transparent;
    border-color: var(--color-text);
    color: var(--color-text);
}
.nl-popup-cta--link {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) {
    .nl-popup-cta--primary:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-accent-fg);
    }
    .nl-popup-cta--secondary:hover {
        background: var(--color-text);
        border-color: var(--color-text);
        color: var(--color-bg);
    }
    .nl-popup-cta--link:hover { text-decoration-thickness: 2px; }
}
.nl-popup-cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* Dismiss (×): 30px-Button, WCAG-Tap-Target ueber Padding. */
.nl-popup-dismiss {
    position: absolute;
    top: var(--space-2xs);
    right: var(--space-2xs);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.625rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .nl-popup-dismiss:hover { background: var(--color-bg-soft); color: var(--color-text); }
}
.nl-popup-dismiss:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.nl-popup-media { margin: 0; }
.nl-popup-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
/* Strip (Top-Bar): z-index 250 > sticky .site-header (100), damit die Bar
   ueber dem Header liegt. Modal-Wrapper darueber auf 300. */
.nl-popup-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-lg);
    padding-right: var(--space-2xl);
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid var(--nl-popup-accent);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.nl-popup-strip.nl-popup-warning { border-left-color: var(--nl-popup-accent-warn); }
.nl-popup-strip.nl-popup-success { border-left-color: var(--nl-popup-accent-succ); }
.nl-popup-strip .nl-popup-title { font-size: var(--font-size-base); margin: 0; }
.nl-popup-strip .nl-popup-message { font-size: var(--font-size-sm); }
/* Modal (Overlay) */
.nl-popup-modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}
.nl-popup-modal-wrapper[hidden] { display: none; }
/* audit-ignore: wcag — programmatisches Fokus-Ziel (tabindex=-1, kein Tab-Stop), Ring laege ums ganze Modal; innere Controls behalten ihre :focus-visible-Ringe */
.nl-popup-modal-wrapper:focus { outline: none; }
.nl-popup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--nl-popup-backdrop);
    cursor: pointer;
    animation: nl-popup-fade-in .18s ease;
}
.nl-popup-modal {
    position: relative;
    max-width: var(--nl-popup-maxw);
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--nl-popup-accent);
    padding: var(--space-lg);
    padding-right: calc(var(--space-lg) + 24px);
    animation: nl-popup-slide-up .18s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.nl-popup-modal.nl-popup-warning { border-left-color: var(--nl-popup-accent-warn); }
.nl-popup-modal.nl-popup-success { border-left-color: var(--nl-popup-accent-succ); }
.nl-popup-modal .nl-popup-title { font-size: var(--font-size-xl); margin: 0; }
.nl-popup-modal > .nl-popup-cta { align-self: center; margin-top: auto; }
.nl-popup-modal:has(.nl-popup-media) {
    max-width: calc(var(--nl-popup-maxw) + 200px);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
    padding-right: calc(var(--space-lg) + 24px);
}
@media (min-width: 640px) {
    .nl-popup-modal:has(.nl-popup-media) {
        grid-template-columns: 240px 1fr;
        align-items: start;
    }
}
.nl-popup-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.nl-popup-body > .nl-popup-cta { align-self: center; margin-top: auto; }
/* Inline (im Content) */
.nl-popup-inline {
    position: relative;
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    padding-right: calc(var(--space-lg) + 24px);
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-left: 3px solid var(--nl-popup-accent);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.nl-popup-inline > .nl-popup-cta { align-self: center; margin-top: auto; }
.nl-popup-inline.nl-popup-warning { border-left-color: var(--nl-popup-accent-warn); }
.nl-popup-inline.nl-popup-success { border-left-color: var(--nl-popup-accent-succ); }
.nl-popup-inline .nl-popup-media img { aspect-ratio: 16 / 9; }
.nl-popup-inline:has(.nl-popup-media) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 640px) {
    .nl-popup-inline:has(.nl-popup-media) {
        grid-template-columns: 200px 1fr;
        align-items: center;
    }
}
@keyframes nl-popup-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes nl-popup-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Popups nicht mitdrucken (fixe Strip wuerde sonst jede Seite ueberlagern).
   Ohne Override-Flag: gleiche/hoehere Spezifitaet + spaetere Position gewinnt. */
@media print {
    .nl-popup-strip,
    .nl-popup-modal-wrapper,
    .nl-popup-inline,
    .nl-popup-inline:has(.nl-popup-media) { display: none; }
}



/* ── WordPress specifics ──
   Not part of the framework CSS: WP core and plugins rely on
   .screen-reader-text, and the admin bar of logged-in users sits on top of
   the sticky header unless the header moves down by its height (32px
   desktop, 46px at <=782px, per wp-includes/css/admin-bar.css). */
.screen-reader-text {
    position: absolute !important; /* framework constraint override: WP core convention class, must win everywhere */
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Free content between the sections: core blocks the customer inserts
   directly on a page (paragraph, heading, list, table, form ...) have no
   container of their own, so they get the reading width of the framework
   (.container--text) and the side gutter. Section blocks (wp-block-nl-*)
   stay full width. */
#main > :not([class*="wp-block-nl-"]) {
    max-width: calc(var(--container-text) + 2 * var(--container-padding));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
#main > :not([class*="wp-block-nl-"]):first-child { margin-top: var(--space-xl); }
#main > :not([class*="wp-block-nl-"]) + :not([class*="wp-block-nl-"]) { margin-top: var(--space-sm); }
#main > [class*="wp-block-nl-"] + :not([class*="wp-block-nl-"]),
#main > :not([class*="wp-block-nl-"]) + [class*="wp-block-nl-"] { margin-top: var(--space-xl); }

.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}