/* Schriften, selbst gehostet: latin-Subsets der gelieferten Originale
   (Cardos, SK Greenland), erzeugt mit pyftsubset aus src-v2/_ds/.../fonts. */
@font-face{font-family:"Cardos";src:url("/assets/fonts/cardos-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cardos";src:url("/assets/fonts/cardos-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cardos";src:url("/assets/fonts/cardos-600.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"SK Greenland";src:url("/assets/fonts/sk-greenland-300.woff2") format("woff2");font-weight:100 300;font-style:normal;font-display:swap}
@font-face{font-family:"SK Greenland";src:url("/assets/fonts/sk-greenland-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SK Greenland";src:url("/assets/fonts/sk-greenland-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"SK Greenland";src:url("/assets/fonts/sk-greenland-600.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}

:root { --primary-50: #f2f9f4; --primary-100: #e4f1e7; --primary-200: #cbe1d1; --primary-300: #aacbb3; --primary-400: #8aaf96; --primary-500: #6e937c; --primary-600: #557a64; --primary-700: #3e634f; --primary-800: #2c4f3d; --primary-900: #1b3729; --primary-950: #0e2319; --sand-50: #f9f6f2; --sand-100: #f1ece4; --sand-200: #e7dfd1; --sand-300: #c9bfb2; --sand-400: #ada396; --sand-500: #92877b; --sand-600: #7a6e63; --sand-700: #63574d; --sand-800: #4d4138; --sand-900: #392e25; --sand-950: #261c14; --neutral-50: #fcfaf6; --neutral-100: #f3f0e9; --neutral-200: #dedad3; --neutral-300: #c4c0ba; --neutral-400: #a8a49e; --neutral-500: #8c8982; --neutral-600: #73706a; --neutral-700: #5c5953; --neutral-800: #46433e; --neutral-900: #33302b; --neutral-950: #1f1e1b; --bg: #fcfaf6; --surface: #ffffff; --surface-tint: #f1ece4; --surface-sand: #e7dfd1; --surface-sunken: #f3f0e9; --border: #dedad3; --border-strong: #c4c0ba; --border-control: #8c8982; --text: #33302b; --text-muted: #73706a; --text-muted-tint: #5c5953; --heading: #1b3729; --brand: #2c4f3d; --brand-hover: #1b3729; --brand-active: #0e2319; --brand-soft: #e4f1e7; --brand-soft-text: #2c4f3d; --on-brand: #ffffff; --link: #3e634f; --link-hover: #2c4f3d; --focus-ring: #557a64; --accent: #63574d; --accent-soft: #e7dfd1; --accent-soft-text: #4d4138; --dark-bg: #0e2319; --dark-surface: #1b3729; --dark-surface-raised: #2c4f3d; --dark-border: #3e634f; --dark-text: #f2f9f4; --dark-text-muted: #cbe1d1; --danger: oklch(48% 0.12 30); --danger-soft: oklch(95% 0.025 30); --success: var(--primary-700); --success-soft: var(--primary-100); }
[data-theme="dark"] { --bg: #0e2319; --surface: #1b3729; --surface-tint: #1b3729; --surface-sand: #261c14; --surface-sunken: #0e2319; --border: #3e634f; --border-strong: #557a64; --border-control: #6e937c; --text: #e4f1e7; --text-muted: #aacbb3; --text-muted-tint: #aacbb3; --heading: #f2f9f4; --brand: #557a64; --brand-hover: #6e937c; --brand-active: #8aaf96; --brand-soft: #1b3729; --brand-soft-text: #cbe1d1; --on-brand: #ffffff; --link: #aacbb3; --link-hover: #cbe1d1; --focus-ring: #8aaf96; --accent: #c9bfb2; --accent-soft: #392e25; --accent-soft-text: #e7dfd1; color-scheme: dark; }
:root { --font-serif-display: "Cardos", "Iowan Old Style", Georgia, serif; --font-sans: "SK Greenland", "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-serif-display); --font-body: var(--font-sans); --font-ui: var(--font-sans); --fs-display: 64px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 20px; --fs-lead: 20px; --fs-body: 17px; --fs-small: 15px; --fs-caption: 13px; --fs-overline: 12px; --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.6; --lh-ui: 1.3; --fw-heading: 500; --fw-display: 400; --fw-body: 400; --fw-ui: 500; --fw-strong: 600; --ls-heading: -0.01em; --ls-display: -0.02em; --ls-overline: 0.14em; --text-display: var(--fw-display) var(--fs-display)/var(--lh-tight) var(--font-heading); --text-h1: var(--fw-heading) var(--fs-h1)/var(--lh-tight) var(--font-heading); --text-h2: var(--fw-heading) var(--fs-h2)/var(--lh-heading) var(--font-heading); --text-h3: var(--fw-heading) var(--fs-h3)/var(--lh-heading) var(--font-heading); --text-body: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-body); --text-lead: 300 var(--fs-lead)/var(--lh-body) var(--font-body); --text-small: var(--fw-body) var(--fs-small)/var(--lh-body) var(--font-body); --text-ui: var(--fw-ui) var(--fs-small)/var(--lh-ui) var(--font-ui); }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --section-y: 96px; --container: 1180px; --container-narrow: 760px; --gutter: 24px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --radius-control: var(--radius-sm); --radius-card: var(--radius-md); --shadow-sm: 0 1px 2px oklch(23.5% 0.033 162.6 / 0.08); --shadow-md: 0 2px 4px oklch(23.5% 0.033 162.6 / 0.06), 0 6px 16px oklch(23.5% 0.033 162.6 / 0.10); --shadow-lg: 0 4px 8px oklch(23.5% 0.033 162.6 / 0.06), 0 16px 40px oklch(23.5% 0.033 162.6 / 0.16); --shadow-xl: 0 8px 16px oklch(23.5% 0.033 162.6 / 0.08), 0 32px 64px oklch(23.5% 0.033 162.6 / 0.22); --highlight-top: inset 0 1px 0 oklch(100% 0 0 / 0.6); --focus-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus-ring); --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; --press-scale: 0.97; --enter-scale: 0.97; --motion-y: 8px; }
@keyframes gl-fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gl-fade-up { 
  0% { opacity: 0; transform: translateY(var(--motion-y)); }
  100% { opacity: 1; transform: none; }
}
@keyframes gl-toast-in { 
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: none; }
}
@keyframes gl-toast-out { 
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 0.99; --enter-scale: 1; --motion-y: 0px; }
  @keyframes gl-toast-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
  @keyframes gl-toast-out { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}
}
html { text-size-adjust: 100%; }
body { margin: 0px; background: var(--bg); color: var(--text); font: var(--text-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--heading); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); margin: 0px; text-wrap: balance; }
p { margin: 0px; text-wrap: pretty; }
a { color: var(--link); text-decoration: underline 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--primary-200); color: var(--primary-950); }
*, ::before, ::after { box-sizing: border-box; }
.gl-skip { position: fixed; top: 12px; left: 12px; z-index: 80; padding: 12px 20px; border-radius: var(--radius-control); background: var(--brand); color: var(--on-brand); font: var(--text-ui); text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-200%); transition: transform var(--dur) var(--ease); }
.gl-skip:focus { transform: none; color: var(--on-brand); }
/* Zustände der Design-System-Komponenten.
   Im Artefakt setzte React Hover, Fokus, Druck und Auswahl als Inline-Style.
   prerender.mjs entfernt genau diese Eigenschaften und vergibt ds-*-Klassen;
   die Werte hier entsprechen 1:1 dem _ds_bundle.js vom 11.10.2026. */

/* Buttons ------------------------------------------------------------- */
.ds-btn{-webkit-tap-highlight-color:transparent}
.ds-btn--primary{background:var(--brand)}
.ds-btn--secondary{background:transparent}
.ds-btn--sand{background:var(--surface-sand)}
.ds-btn--ghost{background:transparent}
.ds-btn--inverse{background:var(--primary-50)}
@media (hover:hover) and (pointer:fine){
  .ds-btn--primary:hover{background:var(--brand-hover)}
  .ds-btn--secondary:hover{background:var(--brand-soft)}
  .ds-btn--sand:hover{background:var(--sand-300)}
  .ds-btn--ghost:hover{background:var(--surface-tint)}
  .ds-btn--inverse:hover{background:#fff}
  .ds-card-lift:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
  .ds-acc-btn:hover{color:var(--brand)}
}
.ds-btn--primary:active{background:var(--brand-active)}
.ds-btn--secondary:active{background:var(--primary-200)}
.ds-btn--sand:active{background:var(--sand-400)}
.ds-btn--ghost:active{background:var(--surface-sand)}
.ds-btn--inverse:active{background:var(--primary-100)}
.ds-btn:active:not(:disabled){transform:scale(var(--press-scale))}
.ds-btn:disabled{cursor:not-allowed;color:var(--neutral-500)!important;border-color:var(--border)!important;background:transparent}
.ds-btn--primary:disabled{background:var(--neutral-200)}

/* Karten -------------------------------------------------------------- */
.ds-card-elev{box-shadow:var(--shadow-md)}

/* Akkordeon (FAQ) ----------------------------------------------------- */
.ds-acc-btn{color:var(--heading)}
.ds-acc-icon{transform:none}
.ds-acc-btn[aria-expanded="true"] .ds-acc-icon{transform:rotate(45deg)}
.ds-acc-panel{grid-template-rows:0fr;transition:grid-template-rows var(--dur-fast) var(--ease)}
.ds-acc-btn[aria-expanded="true"] + .ds-acc-panel{grid-template-rows:1fr;transition-duration:var(--dur)}
.ds-acc-body{opacity:0;transform:translateY(calc(var(--motion-y) * -0.5))}
.ds-acc-btn[aria-expanded="true"] + .ds-acc-panel .ds-acc-body{opacity:1;transform:none}

/* Formularfelder ------------------------------------------------------ */
.ds-field{border:1px solid var(--border-control)}
.ds-field:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--primary-100)}
.ds-field[aria-invalid="true"]{border-color:var(--danger)}
.ds-field[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.ds-field::placeholder{color:var(--text-muted);opacity:1}
.gl-field-msg{font:400 14px/1.4 var(--font-ui);color:var(--text-muted)}
.gl-field-msg[data-err]{color:var(--danger)}
.gl-err{margin-top:10px;font:400 14px/1.4 var(--font-ui);color:var(--danger)}

/* Checkbox und Radio -------------------------------------------------- */
.ds-check-box{border:1px solid var(--border-control);background:var(--surface)}
.ds-check-input:checked + .ds-check-box{border-color:var(--brand)}
.ds-check-input:checked + .ds-check-box--cb{background:var(--brand)}
.ds-check-input:focus-visible + .ds-check-box{box-shadow:0 0 0 3px var(--primary-100),0 0 0 5px var(--focus-ring)}
.ds-check-input[aria-invalid="true"] + .ds-check-box{border-color:var(--danger)}
.ds-check:active .ds-check-box{transform:scale(calc(var(--press-scale) - 0.02))}
.ds-check-mark{opacity:0;transform:scale(.8)}
.ds-check-box--rd .ds-check-mark{transform:scale(.6)}
.ds-check-input:checked + .ds-check-box .ds-check-mark{opacity:1;transform:none}

/* Auswahlkarten der Anfrage-Strecke (vorher React-State "opt") -------- */
.gl-opt label{border:1px solid var(--border-strong);background:transparent}
.gl-opt label:has(.ds-check-input:checked){border-color:var(--brand)!important;background:var(--brand-soft)}
.gl-opt[data-err] label{border-color:var(--danger)}

/* Hauptnavigation: aktiver Abschnitt (vorher React-State) ------------- */
.gl-navlink{color:var(--text-muted)}
.gl-navlink[aria-current="true"]{color:var(--heading)}
@media (hover:hover) and (pointer:fine){.gl-navlink:hover{color:var(--heading)}}

/* Formularversand ----------------------------------------------------- */
.gl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.gl-form-status{margin:0;padding:12px 14px;border-radius:var(--radius-control);background:var(--danger-soft);color:var(--danger);font:400 15px/1.5 var(--font-ui)}
.gl-form-status a{color:inherit}
button[aria-busy="true"]{cursor:progress;opacity:.8}

/* Sichtbar fokussierbare Rückmeldungen ohne Rahmen beim Programmfokus */
[role="status"][tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}

/* Telefon-Knopf im Kopf der Anfrage-Seite: unter 375 px nur Symbol */
@media (max-width:374px){header .gl-tel-btn{padding-left:13px!important;padding-right:13px!important}header .gl-tel-btn .gl-tel-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}