/*
 * NETZLICHT WP - global styles.
 *
 * The CSS of the NETZLICHT framework sites (src/global/base.css), first
 * ported 1:1 for website-maulhardt-gruppe and kept here as the base of every
 * Blockstudio site. Colours, fonts, radii come from the token block in
 * style.css (tokens_to_css.py), layout primitives from
 * assets/css/layout-primitives.css. Left out: theme toggle and consent
 * banner. WordPress-specific rules are at the end of this file.
 * Comments below still name Maulhardt where a rule was derived there.
 */

/* ── Site-Composition-Tokens ──
   Ergaenzend zum auto-generierten TOKENS-Block in style.css. Werte pro
   Site anpassen (zweiter dunkler Sektions-Ton, Typo-Skala). */
:root {
    --color-surface-dark: #191c29;   /* zweiter dunkler Sektions-Ton (Hintergrund "Dunkel, Variante") */
    --color-sand: #eee3d4;           /* Sand-Flaeche (.section--sand, Schluss-Box), Text schwarz */

    /* 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: clamp(17px, 0.9286rem + 0.4464vw, 22px);   /* Fliesstext wie Kadence (17px mobil, 22px ab 2000px) */
    --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, 1.5rem + 2.4vw, 3.75rem);

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

/* Fonts: per site as local woff2 in assets/fonts/ (NETZLICHT rule, never
   remote), @font-face here, family names via --font-sans/--font-display in
   the token block of style.css, plus a <link rel="preload"> for the latin
   body slice in functions.php (wp_head, priority 2).
   Nunito Sans (Google Fonts, variable font, one file covers 400 and 700),
   subsets latin + latin-ext as in the Kadence version (unicode-ranges from
   its fonts.css), downloaded 2026-10-12. */
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/nunito-sans-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/nunito-sans-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Seitenraender wie Kadence --global-content-edge-padding: 4rem Desktop,
   2rem Tablet (bis 1024px), 1rem Mobil (bis 767px). Ueberschreibt den Wert
   aus dem Token-Block (style.css laedt vor base.css). */
@media (max-width: 1024px) { :root { --container-padding: 2rem; } }
@media (max-width: 767px)  { :root { --container-padding: 1rem; } }

*, *::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, .pill, buttons) wrap cleanly across lines:
   box-decoration-break: clone wiederholt padding + border pro Zeile,
   sonst kleben die Zeilen oft aneinander. */
mark, .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: 7.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.3;
    letter-spacing:   1px;       /* wie Kadence */
    -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); }
.section--sand        { background: var(--color-sand); color: #000000; }
/* 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,
.section--dark .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; }
/* Gefuellter Button auf Blau/Navy: helle Flaeche (bg-soft) mit Navy-Text wie
   in der Kadence-Fassung ("Produkte >" im Hero), >= 12:1. Hover: weiss. */
.section--dark .btn-primary,
.section--primary .btn-primary {
    background: var(--color-bg-soft);
    border-color: var(--color-bg-soft);
    color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
    .section--dark .btn-primary:hover,
    .section--primary .btn-primary:hover {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--color-accent);
    }
}

/* ── 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 ──
   Nunito Sans fuer alles (wie die Kadence-Fassung): H1-H4 weight 700,
   mixed-case (KEIN uppercase), lh 1.2. Skala der Kadence-Site, gemessen
   2026-10-12 bei 390 und 1440px (dazwischen fluide): h1 Seitenkopf 40/64,
   h1 Startseiten-Hero 44/96, h2 36/48, grosse h2 auf Farbflaechen 40/64,
   h3 28/32, ueberall 1px Laufweite wie der Fliesstext. */
:root {
    --font-size-h1:       clamp(2.5rem, 1.943rem + 2.286vw, 4rem);
    --font-size-h1-hero:  clamp(2.75rem, 1.543rem + 4.952vw, 6rem);
    --font-size-h2:       clamp(2.25rem, 1.971rem + 1.143vw, 3rem);
    --font-size-h2-large: clamp(2.5rem, 1.943rem + 2.286vw, 4rem);
    --font-size-h3:       clamp(1.75rem, 1.657rem + 0.381vw, 2rem);
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 700; letter-spacing: 1px; margin-bottom: 1rem; }
h1 { font-size: var(--font-size-h1); margin-bottom: 1.5rem; }
h2 { font-size: var(--font-size-h2); margin-bottom: 1.5rem; }
h3 { font-size: var(--font-size-h3); }
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.75rem;
    padding:         0.6rem 1.1rem;
    border-radius:   var(--radius-button);   /* eckig (Token = 0) */
    font-weight:     400;
    font-size:       var(--font-size-base);
    text-decoration: none;
    cursor:          pointer;
    border:          1px 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; }
/* Kleiner Chevron rechts ("Kontakt >", "mehr erfahren >"), reine CSS-Form */
.btn::after {
    content: '';
    flex-shrink: 0;
    width: 0.4em;
    height: 0.4em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
.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;
}

/* Large buttons of the Leschuplast blocks (hero "Bild rechts", hero-bildwechsel
   "mitte", spezialisierungen tiles, teaser-bild "vollbreit"): room for the chevron. */
.hero--bild-rechts .btn-hell,
.hero-slides--mitte .btn-primary,
.spez__kachel .btn,
.bild-teaser-voll .btn { padding: 0.375rem 3.75rem 0.375rem 0.8rem; }

/* ── Kopf (Leschuplast): weiss, Logo links, rechts nur der Burger auf allen
   Breiten. Keine Topbar, keine Desktop-Navigation, kein Header-Button; das
   Off-Canvas-Menue (.site-drawer) ist das einzige Menue. Hoehe/Logo wie
   die Kadence-Vorlage: 110px Kopf + 250px Logo am Desktop, 94px + 120px
   mobil (Breakpoint 767px wie Kadence). ── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: #ffffff;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 110px;
}
.site-header .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
}
.site-header .logo img { width: 250px; max-width: 60vw; height: auto; }
.logo__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
    white-space: nowrap;
}
.site-footer .logo__text { color: var(--color-primary); }
.site-header .logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
@media (max-width: 767px) {
    .site-header__inner { min-height: 94px; }
    .site-header .logo img { width: 120px; }
}

/* ── Burger (alle Breiten): drei blaue Linien ohne Rahmen ── */
.nav-toggle {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 0.75rem;
    margin-right: -0.75rem;
    cursor: pointer;
    color: var(--color-primary);
}
.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: 40px;
    height: 25px;
}
.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(11.5px) 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(-11.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    .nav-toggle__box span { transition: none; }
}

/* ── Off-Canvas-Menue (alle Breiten) ──
   Drawer ist Sibling des <header> (Stacking-/backdrop-filter-Falle, siehe
   header.php). Rechts einfahrendes Panel: 400px am Desktop, volle Breite
   bis 767px. Navy-Overlay (accent, 80 %) ueber dem Foto
   assets/img/menue-hintergrund.webp. Backdrop (z-index 105) dunkelt die
   Seite ab, der Drawer (110) liegt darueber. */
.site-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(100vw, 400px);
    padding: 5rem 2rem 2rem;
    background:
        linear-gradient(rgba(13, 31, 79, 0.8), rgba(13, 31, 79, 0.8)),
        url("../img/menue-hintergrund.webp") center / cover no-repeat,
        var(--color-accent);
    color: #ffffff;
    /* Closed = not painted (visibility interpolates discretely, so the
       slide-out stays visible; per MDN visibility, verified 2026-09-24).
       The closed drawer is also inert + aria-hidden (init.js). */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .28s ease, visibility .28s;
    z-index: 110;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
@media (max-width: 767px) {
    .site-drawer { width: 100vw; }
}

.site-drawer__close {
    position: absolute;
    top: 0.75rem; right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.site-drawer__close svg { width: 1.75rem; height: 1.75rem; }
.site-drawer__close:focus-visible,
.site-drawer__items a:focus-visible,
.site-drawer__toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.site-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-drawer__row { position: relative; }
.site-drawer__items a {
    display: block;
    padding: 0.6rem 1rem;
    border: 2px solid transparent;
    font-size: 2rem;
    line-height: 1.3;
    color: #ffffff;
    text-decoration: none;
}
/* Aktive Seite: weisser Rahmen */
.site-drawer__items a[aria-current="page"] { border-color: #ffffff; }
.site-drawer__row > a { padding-right: 3.5rem; }
@media (hover: hover) and (pointer: fine) {
    .site-drawer__items a:hover { border-color: rgba(255, 255, 255, 0.6); }
    .site-drawer__items a[aria-current="page"]:hover { border-color: #ffffff; }
}

/* Aufklappen der Unterpunkte: eigener Chevron-Button neben dem Link
   (der Link selbst fuehrt zur Seite), Logik in init.js. */
.site-drawer__toggle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.site-drawer__toggle::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .2s ease;
}
.site-drawer__toggle[aria-expanded="true"]::before { transform: translateY(25%) rotate(-135deg); }

.site-drawer__sub {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-left: 1rem;
}
.site-drawer__sub[hidden] { display: none; }
.site-drawer__sub a { font-size: 1.5rem; }

@media (max-width: 767px) {
    .site-drawer__items { gap: 0.55rem; }
    .site-drawer__items a { font-size: 1.125rem; padding: 0.55rem 1rem; }
    .site-drawer__sub a { font-size: 1rem; }
}

body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    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__toggle::before { transition: none; }
    body.nav-open::after { animation: none; }
}

/* ── Fuss (Leschuplast) ──
   Drei Baender in einem <footer>: (1) Schluss-Box auf Sand (Titel gross,
   Text, Buttons; per Seite ueberschreibbar, siehe footer.php), (2) blauer
   Fuss mit weissem Logo-Kasten, der 1rem nach oben ueber die Kante in die
   Schluss-Box ragt, und je einer Spalte pro Standort (Feld "Standorte"),
   (3) weisse Leiste mit Copyright links und rechtlichen Links rechts. */
.site-footer { display: flow-root; font-size: var(--font-size-base); }

.site-footer__closing {
    padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}
.site-footer__closing-title { margin-bottom: 1.25rem; }
.site-footer__closing-sub { max-width: 60em; }
.site-footer__closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.site-footer__main {
    background: var(--color-primary);
    color: #ffffff;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
    padding-bottom: 5rem;
}
.site-footer__brand {
    position: relative;
    margin-top: -1rem;
    width: min(100%, 300px);
    padding: 1.5rem;
    background: #ffffff;
}
.site-footer__brand a { display: block; }
.site-footer__brand img { display: block; width: 100%; height: auto; }
.site-footer__place { padding-top: 5rem; }
.site-footer__place-title {
    color: #ffffff;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    margin-bottom: 1.25rem;
}
.site-footer__place address { font-style: normal; }
.site-footer__place p { margin-bottom: 1.25rem; }
.site-footer__place p:last-child { margin-bottom: 0; }
.site-footer__main a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.site-footer__main a:focus-visible,
.site-footer__bottom a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.site-footer__bottom {
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.8125rem;
}
.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.6rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.15em; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__place { padding-top: 2rem; }
}
@media (max-width: 767px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 3rem; }
    .site-footer__place { padding-top: 0; }
    .site-footer__brand + .site-footer__place { padding-top: 2rem; }
    .site-footer__bottom-inner { flex-direction: column-reverse; justify-content: center; text-align: center; }
    .site-footer__legal { justify-content: center; }
}

/* ── 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) */
.usp-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; }

/* ── 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 motion controls (WCAG 2.2.2) ──
   Background video stage and the pause toggle of slideshow and video, shared
   by nl/hero and nl/hero-bildwechsel (logic: init.js sections 2 and 3). The
   toggle sits bottom right of its stage; --hero-toggle-inset overrides the
   distance per block. Icon pair CSS-only (no inline SVG): pause = two bars,
   play = triangle, switched by aria-pressed. */
.hero-video { position: absolute; inset: 0; overflow: hidden; background: var(--color-accent); }
.hero-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slides__toggle,
.hero-video__toggle {
    position: absolute;
    right: var(--hero-toggle-inset, var(--space-lg));
    bottom: var(--hero-toggle-inset, var(--space-lg));
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-button);
    background: rgba(1, 0, 50, 0.45);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.hero-slides__toggle[hidden],
.hero-video__toggle[hidden] { display: none; }
.hero-slides__toggle:focus-visible,
.hero-video__toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .hero-slides__toggle:hover,
    .hero-video__toggle:hover { background: rgba(1, 0, 50, 0.75); border-color: #ffffff; }
}
.hero-slides__toggle .icon-pause,
.hero-video__toggle .icon-pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.hero-slides__toggle .icon-play,
.hero-video__toggle .icon-play { display: none; width: 0; height: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 3px; }
.hero-slides__toggle[aria-pressed="true"] .icon-play,
.hero-video__toggle[aria-pressed="true"] .icon-play { display: block; }
.hero-slides__toggle[aria-pressed="true"] .icon-pause,
.hero-video__toggle[aria-pressed="true"] .icon-pause { display: none; }

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

/* ── 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(.skip-link):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(.skip-link):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;
    }
}

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

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