/* ============================================================================
   Belvedere Chauffeur Service Vienna — Design-System "Palais bei Nacht"
   ----------------------------------------------------------------------------
   Eine Datei: Tokens, Reset, Schrift, Layout, Komponenten, Header, Hero,
   Footer, Consent, Bewegung, Druck. Alle Werte kommen aus :root; die helle
   Innenflaeche (.section--light) schaltet nur die Oberflaechen-Tokens um.
   Klassen-Vertrag: siehe KOMPONENTEN.md.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 Tokens */
:root{
  /* Marke */
  --nacht:        #0B0F1A;
  --nacht-2:      #141A2B;
  --nacht-3:      #1C2437;
  --champagner:   #E8D5A3;
  --gold:         #C9A55A;
  --gold-dunkel:  #9C7A32;
  --gold-tief:    #6E5520;   /* Gold-Text auf hellem Grund (AA) */
  --creme:        #F5F1E8;
  --papier:       #F7F4EE;
  --tinte:        #14181F;
  --ok:           #7FBF9E;
  --fehler:       #D98C7A;
  --ok-tief:      #2E7A57;   /* Erfolg auf hellem Grund */
  --fehler-tief:  #A8412C;   /* Fehler auf hellem Grund */

  /* Oberflaechen (dunkel = Standard) */
  --bg:           var(--nacht);
  --bg-2:         var(--nacht-2);
  --bg-3:         var(--nacht-3);
  --fg:           var(--creme);
  --fg-muted:     rgba(245,241,232,.62);
  --fg-heading:   var(--creme);
  --line:         rgba(232,213,163,.18);
  --line-strong:  rgba(232,213,163,.36);
  --accent:       var(--champagner);
  --accent-text:  var(--champagner);
  --btn-fg:       var(--nacht);
  --field-bg:     rgba(255,255,255,.04);
  --ok-fg:        var(--ok);
  --err-fg:       var(--fehler);

  /* Schrift */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:  0.8125rem;                        /* 13px  Fussnoten            */
  --fs-s:   0.875rem;                         /* 14px  Nebentext            */
  --fs-m:   1rem;                             /* 16px  Fliesstext           */
  --fs-l:   1.125rem;                         /* 18px  Einleitung           */
  --fs-xl:  clamp(1.375rem, 1.2rem + .8vw, 1.75rem);   /* 22-28px  h3       */
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);    /* 30-44px  h2       */
  --fs-3xl: clamp(2.5rem, 5vw, 4rem);                  /* 40-64px  h1       */
  --fs-num: clamp(2rem, 1.5rem + 2vw, 3rem);           /* Preise            */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --track-eyebrow: .14em;

  /* Raum (4er-Reihe) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --section: clamp(4rem, 8vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Form */
  --r-s: 8px; --r-m: 16px; --r-full: 999px;
  --shadow-s: 0 2px 10px rgba(0,0,0,.25);
  --shadow-m: 0 12px 32px rgba(0,0,0,.35);
  --shadow-l: 0 24px 64px rgba(0,0,0,.45);
  --ease: cubic-bezier(.22,.7,.28,1);
  --t-fast: .2s; --t: .35s; --t-slow: .8s;

  /* Breiten, Hoehen */
  --w-content: 1200px;
  --w-narrow: 760px;
  --header-h: 84px;
  --header-h-small: 64px;
  --field-h: 56px;
  --tap: 48px;

  color-scheme: dark;
}

/* Dunkle Flaechen, die auch auf hellen Seiten dunkel bleiben (Fusszeile, Cookie-Leiste).
   Ohne diese Rueckschaltung erbt .theme-light dort die dunkle Schrift und der Text
   verschwindet auf dem dunklen Grund. */
.surface-dark, .site-header, .site-footer, .consent{
  --bg:           var(--nacht);
  --bg-2:         var(--nacht-2);
  --bg-3:         var(--nacht-3);
  --fg:           var(--creme);
  --fg-muted:     rgba(245,241,232,.62);
  --fg-heading:   var(--creme);
  --line:         rgba(232,213,163,.18);
  --line-strong:  rgba(232,213,163,.36);
  --accent:       var(--champagner);
  --accent-text:  var(--champagner);
  --btn-fg:       var(--nacht);
  --field-bg:     rgba(255,255,255,.04);
  --ok-fg:        var(--ok);
  --err-fg:       var(--fehler);
  color-scheme: dark;
}

/* Helle Innenflaeche — nur Oberflaechen-Tokens werden umgeschaltet */
.section--light, .theme-light{
  --bg:          var(--papier);
  --bg-2:        #FFFFFF;
  --bg-3:        #EFEAE0;
  --fg:          var(--tinte);
  --fg-muted:    rgba(20,24,31,.68);
  --fg-heading:  var(--nacht);
  --line:        rgba(11,15,26,.14);
  --line-strong: rgba(11,15,26,.3);
  --accent:      var(--gold-dunkel);   /* Linien, Icons: 3.65:1 auf Papier */
  --accent-text: var(--gold-tief);     /* Gold als Text: 6.4:1 auf Papier */
  --field-bg:    #FFFFFF;
  --ok-fg:       var(--ok-tief);
  --err-fg:      var(--fehler-tief);
  --shadow-s: 0 2px 10px rgba(11,15,26,.08);
  --shadow-m: 0 12px 32px rgba(11,15,26,.12);
  --shadow-l: 0 24px 64px rgba(11,15,26,.16);
  color-scheme: light;
  background: var(--bg);
  color: var(--fg);
}

/* ------------------------------------------------------------- 2 Schriften */
@font-face{
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* ----------------------------------------------------------------- 3 Reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h-small) + 16px) }
body{
  margin:0; min-height:100svh;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: var(--fs-m); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.nav-open{ overflow:hidden }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0 }
ul[class],ol[class]{ list-style:none; padding:0 }
img,svg,video,picture{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; color:inherit; margin:0 }
button{ background:none; border:0; padding:0; cursor:pointer }
a{ color: var(--accent-text); text-decoration-thickness:1px; text-underline-offset:.18em; transition: color var(--t-fast) }
a:hover{ color: var(--fg) }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px }
::selection{ background: var(--gold); color: var(--nacht) }
address{ font-style: normal }
hr{ border:0; border-top:1px solid var(--line); margin: var(--sp-6) 0 }
[hidden]{ display:none !important }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip-link{ position:absolute; left: var(--sp-4); top:-100px; z-index:1000; padding: var(--sp-3) var(--sp-4); background: var(--gold); color: var(--nacht); border-radius: var(--r-s); font-weight:600 }
.skip-link:focus{ top: var(--sp-4) }

/* ------------------------------------------------------------ 4 Typografie */
h1,.h1,h2,.h2,h3,.h3{
  font-family: var(--serif); font-weight:600; color: var(--fg-heading);
  letter-spacing: -.005em; text-wrap: balance;
}
/* Cormorant liefert von Haus aus Mediaevalziffern – in Ueberschriften ("1. Begriffs-
   bestimmungen") liest sich die 1 sonst wie ein kleines i. Ueberall Versalziffern. */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,.card__title,.faq__q,.route-card__route,.steps__title,
.note-line,.prose blockquote,.logo__name{ font-variant-numeric: lining-nums }
h1,.h1{ font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight:500 }
h2,.h2{ font-size: var(--fs-2xl); line-height: 1.15 }
h3,.h3{ font-size: var(--fs-xl); line-height: var(--lh-snug) }
h4,.h4{ font-family: var(--sans); font-size: var(--fs-l); font-weight:600; line-height: var(--lh-snug); color: var(--fg-heading) }
h1 em,h2 em,.h1 em,.h2 em{ font-style: italic; font-weight:500; color: var(--accent-text) }
.eyebrow{
  display:block; font-family: var(--sans); font-size: var(--fs-xs); font-weight:600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.lead{ font-size: var(--fs-l); line-height:1.6; color: var(--fg-muted); max-width: 62ch; text-wrap: pretty }
.muted{ color: var(--fg-muted) }
.small{ font-size: var(--fs-s) }
.num{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1 }
.center{ text-align:center }
.center .lead{ margin-inline:auto }
.center > .cluster,.center .form__actions{ justify-content:center }   /* Abschluss-CTA */
/* Abschnittskoepfe stehen site-weit zentriert (Entscheidung des Inhabers, 03.09.2026).
   Vorher war es gemischt: ueber Tabellen linksbuendig, darunter zentriert. Kein Kopf
   sitzt in einem .split-Raster, deshalb greift die Regel ohne Ausnahme. */
.section__head{ max-width: var(--w-narrow); margin: 0 auto var(--sp-7); text-align:center }
.section__head > * + *{ margin-top: var(--sp-4) }
.section__head .eyebrow{ margin-bottom:0 }
.section__head .lead{ margin-inline:auto }
.section__head > .cluster,.section__head .form__actions{ justify-content:center }
p + p{ margin-top: var(--sp-4) }

/* Fliesstext-Container (Rechtstexte, Blog, FAQ-Antworten) */
.prose{ max-width: 68ch; font-size: var(--fs-m); line-height: 1.7 }
.prose > * + *{ margin-top: 1.1em }
.prose h2{ font-size: var(--fs-xl); margin-top: 2em }
.prose h3{ font-size: var(--fs-l); font-family: var(--sans); font-weight:600; margin-top: 1.6em }
.prose ul,.prose ol{ padding-left: 1.3em }
.prose li + li{ margin-top: .35em }
.prose li::marker{ color: var(--accent) }
.prose blockquote{ border-left: 2px solid var(--accent); padding-left: var(--sp-5); font-family: var(--serif); font-size: var(--fs-xl); font-style: italic; color: var(--fg-heading) }
.prose table{ width:100% }
.prose img{ border-radius: var(--r-m) }
.prose small,.prose .small{ color: var(--fg-muted) }
.prose a{ text-decoration: underline }
/* Begriffsliste (Rechtstraeger in AGB/Datenschutz): Bezeichnung links, Wert rechts */
.prose__dl{ display:grid; gap: var(--sp-2) var(--sp-5); border-top:1px solid var(--line); padding-top: var(--sp-4) }
.prose__dl dt{ font-size: var(--fs-s); font-weight:600; letter-spacing:.04em; color: var(--fg-muted) }
.prose__dl dd{ color: var(--fg-heading) }
.prose__dl dd + dt{ margin-top: var(--sp-3) }
@media (min-width: 560px){
  .prose__dl{ grid-template-columns: minmax(9rem, 14rem) 1fr; align-items:baseline }
  .prose__dl dt{ grid-column:1 }
  .prose__dl dd{ grid-column:2 }
  .prose__dl dd + dt{ margin-top:0 }
}

/* ---------------------------------------------------------------- 5 Layout */
.wrap{ width:100%; max-width: var(--w-content); margin-inline:auto; padding-inline: var(--gutter) }
.wrap--narrow{ max-width: calc(var(--w-narrow) + 2 * var(--gutter)) }
.section{ padding-block: var(--section); position:relative }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4rem) }
.section--flush{ padding-top:0 }
.section + .section{ border-top: 1px solid var(--line) }
.section--light + .section--light{ border-top-color: rgba(11,15,26,.1) }
.grid{ display:grid; gap: var(--sp-5); align-items: stretch }
.grid--2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.grid--3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }
.grid--4{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }
.grid > .card,.grid > .vehicle-card,.grid > .route-card{ height:100% }
.stack{ display:flex; flex-direction:column; gap: var(--sp-4) }
.stack--lg{ gap: var(--sp-6) }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3) var(--sp-4) }
.cluster--between{ justify-content: space-between }
.split{ display:grid; gap: var(--sp-7); align-items:center }
.split > *{ min-width:0 }
.split__media img,.split__media picture img{ width:100%; border-radius: var(--r-m); object-fit:cover }
@media (min-width: 900px){
  .split{ grid-template-columns: 1fr 1fr; gap: var(--sp-8) }
  .split--reverse > :first-child{ order:2 }
  .split--wide-media{ grid-template-columns: 5fr 7fr }
}
.mt-0{ margin-top:0 } .mt-4{ margin-top: var(--sp-4) } .mt-6{ margin-top: var(--sp-6) } .mt-7{ margin-top: var(--sp-7) }

/* -------------------------------------------------------------- 6 Knoepfe */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full); border:1px solid var(--line-strong);
  font-family: var(--sans); font-size: var(--fs-s); font-weight:600; letter-spacing:.02em; line-height:1.2;
  color: var(--fg); text-decoration:none; white-space:nowrap; cursor:pointer;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t);
}
.btn:hover{ transform: translateY(-2px); color: var(--fg); border-color: var(--accent) }
.btn:active{ transform: translateY(0) }
.btn .icon{ width:18px; height:18px }
.btn--gold{ background: var(--gold); border-color: var(--gold); color: var(--nacht); box-shadow: 0 6px 20px rgba(201,165,90,.22) }
.btn--gold:hover{ background: var(--champagner); border-color: var(--champagner); color: var(--nacht); box-shadow: 0 10px 28px rgba(201,165,90,.32) }
.btn--ghost{ background: transparent; border-color: var(--line-strong); color: var(--fg) }
.btn--ghost:hover{ background: rgba(232,213,163,.06) }
.section--light .btn--ghost:hover{ background: rgba(11,15,26,.05) }
.btn--lg{ min-height:56px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-m) }
.btn--sm{ min-height:40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs) }
.btn--block{ display:flex; width:100% }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; pointer-events:none }
.link{ display:inline-flex; align-items:center; gap: var(--sp-2); font-weight:500; text-decoration:none; color: var(--accent-text) }
.link .icon{ width:18px; height:18px; transition: transform var(--t) var(--ease) }
.link:hover .icon{ transform: translateX(4px) }

/* ----------------------------------------------------------------- 7 Icons */
.icon{ width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color: inherit }
.icon--accent{ color: var(--accent) }
.icon--lg{ width:32px; height:32px }
.icon-ring{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; flex-shrink:0;
  border:1px solid var(--line-strong); border-radius:50%; color: var(--accent);
}

/* ----------------------------------------------------------------- 8 Karten */
.card{
  position:relative; display:flex; flex-direction:column; gap: var(--sp-4);
  padding: var(--sp-6); background: transparent;
  border:1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t);
}
.card--filled{ background: var(--bg-2) }
.card--accent{ border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgba(232,213,163,.12) }
a.card{ color:inherit; text-decoration:none }
.card:hover,.card:focus-within{ border-color: var(--line-strong) }
a.card:hover,.card--hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m) }
.card__title{ font-family: var(--serif); font-size: var(--fs-xl); font-weight:600; line-height: var(--lh-snug); color: var(--fg-heading) }
.card__body{ color: var(--fg-muted); flex:1 }
.card__body > * + *{ margin-top: var(--sp-3) }
.card__foot{ margin-top:auto; padding-top: var(--sp-4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-3) }
.card .icon-ring{ margin-bottom: var(--sp-1) }

/* Preis */
.price{ display:flex; flex-direction:column; gap: var(--sp-1) }
.price__from{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-muted) }
.price__amount{ font-family: var(--sans); font-size: var(--fs-num); font-weight:500; line-height:1; letter-spacing:-.02em; color: var(--fg-heading); font-variant-numeric: tabular-nums lining-nums }
.price__amount small{ font-size:.5em; font-weight:500; color: var(--accent-text); margin-left:.15em; vertical-align: baseline }
.price__note{ font-size: var(--fs-xs); color: var(--fg-muted) }
.price--inline{ flex-direction:row; align-items:baseline; gap: var(--sp-2) }
.price--inline .price__amount{ font-size: var(--fs-xl) }

/* Abzeichen */
.badge{
  display:inline-flex; align-items:center; gap: var(--sp-1); min-height:26px; padding: 2px var(--sp-3);
  border:1px solid var(--line-strong); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-text);
  white-space:nowrap;
}
.badge--solid{ background: var(--gold); border-color: var(--gold); color: var(--nacht) }
.badge--ok{ color: var(--ok-fg); border-color: currentColor }
.badge .icon{ width:14px; height:14px }

/* Fahrzeugkarte */
.vehicle-card{ padding: 0; overflow:hidden }
.vehicle-card__media{
  position:relative; padding: var(--sp-5) var(--sp-5) 0; aspect-ratio: 16/8; display:flex; align-items:flex-end; justify-content:center;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(232,213,163,.14), transparent 70%);
  border-bottom:1px solid var(--line);
}
.vehicle-card__media img{ width:100%; max-width: 420px; object-fit:contain; transition: transform var(--t-slow) var(--ease) }
.vehicle-card:hover .vehicle-card__media img{ transform: translateX(6px) }
.vehicle-card__media .badge{ position:absolute; top: var(--sp-4); left: var(--sp-4) }
.vehicle-card__body{ display:flex; flex-direction:column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-6); flex:1 }
.vehicle-card__specs{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-s); color: var(--fg-muted) }
.vehicle-card__specs li{ display:inline-flex; align-items:center; gap: var(--sp-2) }
.vehicle-card__specs .icon{ width:18px; height:18px; color: var(--accent) }
.vehicle-card .card__foot{ margin-top:auto }

/* Routenkarte */
.route-card{ display:flex; flex-direction:column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); text-decoration:none; color:inherit }
.route-card__route{ display:flex; align-items:center; gap: var(--sp-3); font-family: var(--serif); font-size: var(--fs-xl); font-weight:600; color: var(--fg-heading); line-height:1.2 }
.route-card__route .icon{ width:20px; height:20px; color: var(--accent); flex-shrink:0 }
.route-card__meta{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-s); color: var(--fg-muted) }
.route-card__meta li{ display:inline-flex; align-items:center; gap: 6px }
.route-card__meta .icon{ width:16px; height:16px }
.route-card .price--inline{ margin-top:auto; padding-top: var(--sp-3); border-top:1px solid var(--line) }

/* Ablauf-Schritte */
.steps{ display:grid; gap: var(--sp-6) var(--sp-5); counter-reset: step }
@media (min-width: 720px){ .steps{ grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1040px){ .steps{ grid-template-columns: repeat(4, 1fr) } }
.steps__item{ position:relative; display:flex; flex-direction:column; gap: var(--sp-3); padding-top: var(--sp-5); border-top:1px solid var(--line) }
.steps__num{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--accent); border-radius:50%; font-family: var(--serif); font-size:1.375rem; font-weight:600; color: var(--accent-text);
  font-variant-numeric: lining-nums;
}
.steps__title{ font-family: var(--serif); font-size: var(--fs-xl); font-weight:600; color: var(--fg-heading); line-height: var(--lh-snug) }
.steps__item p{ color: var(--fg-muted); font-size: var(--fs-s) }

/* Vertrauensmerkmale */
.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-3) var(--sp-7); padding: var(--sp-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.trust li,.trust__item{ display:inline-flex; align-items:center; gap: var(--sp-3); font-size: var(--fs-s); font-weight:500; color: var(--fg) }
.trust .icon{ color: var(--accent); width:22px; height:22px }
.trust__item{ gap: var(--sp-2) }
.trust__item .icon{ margin-right: var(--sp-1) }
.trust__value{ font-weight:600; color: var(--fg-heading) }
.trust__label{ color: var(--fg-muted) }
.trust--start{ justify-content:flex-start }

/* Checkliste */
.checklist{ display:grid; gap: var(--sp-3) }
/* Kein display:flex auf dem <li>: "<strong>Titel</strong> – Text" wuerde sonst in zwei
   Flex-Elemente zerfallen und der Titel auf min-content zusammenschrumpfen. */
.checklist li{ position:relative; padding-left: calc(22px + var(--sp-3)); line-height:1.5 }
.checklist li::before{
  content:""; position:absolute; left:0; top:.15em; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--accent);
  /* Maske statt fest eingefaerbter Grafik: der Haken folgt --accent und bleibt
     damit auch auf .section--light kontrastreich (Gold auf Papier waere 2,1:1). */
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center/14px no-repeat;
}
.checklist--2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) }

/* FAQ (details/summary) */
.faq{ display:grid; gap:0; border-top:1px solid var(--line) }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  min-height: var(--tap); padding: var(--sp-4) 0; cursor:pointer; list-style:none;
  font-family: var(--serif); font-size: var(--fs-xl); font-weight:600; line-height: var(--lh-snug); color: var(--fg-heading);
  transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker{ display:none }
.faq__q::after{
  content:""; flex-shrink:0; width:24px; height:24px; color: var(--accent); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/24px no-repeat;
  transition: transform var(--t) var(--ease);
}
.faq__q:hover{ color: var(--accent-text) }
.faq__item[open] .faq__q::after{ transform: rotate(180deg) }
.faq__a{ padding: 0 var(--sp-7) var(--sp-5) 0; color: var(--fg-muted); max-width: 68ch }
.faq__a > * + *{ margin-top: var(--sp-3) }
.faq__a a{ text-decoration: underline }

/* Tabellen */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius: var(--r-m); scrollbar-width: thin }
.table{ width:100%; min-width: 560px; border-collapse:collapse; font-size: var(--fs-s) }
/* Spalten brauchen eine Mindestbreite, sonst quetscht die erste Spalte auf schmalen
   Schirmen alle Werte aus dem sichtbaren Bereich (Preistabellen). */
.table th,.table td{ padding: var(--sp-4) var(--sp-5); text-align:left; vertical-align:top; border-bottom:1px solid var(--line); min-width: 7.5rem }
.table tbody th,.table thead th:first-child{ min-width: 13rem }
.table thead th{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-text); background: rgba(232,213,163,.05); white-space:nowrap }
.section--light .table thead th{ background: rgba(11,15,26,.04) }
.table tbody tr:last-child td{ border-bottom:0 }
.table tbody th{ font-weight:500; color: var(--fg-heading) }
.table td.num,.table th.num{ text-align:right; font-variant-numeric: tabular-nums lining-nums; white-space:nowrap }
.table tbody tr:hover td{ background: rgba(232,213,163,.03) }
.section--light .table tbody tr:hover td{ background: rgba(11,15,26,.025) }
.table .is-hl{ color: var(--fg-heading); font-weight:600 }
/* Schmale Schirme: die Beschriftungsspalte bleibt beim seitlichen Rollen stehen,
   sonst weiss man beim Scrollen nicht mehr, zu welcher Zeile ein Preis gehoert. */
@media (max-width: 640px){
  .table{ min-width:0 }
  .table th,.table td{ padding: var(--sp-3) var(--sp-4); min-width: 6.5rem }
  /* Spaltentitel duerfen umbrechen (auch .num), Werte in den Zellen nicht. */
  .table thead th,.table thead th.num{ white-space: normal }
  .table tbody th,.table thead th:first-child{
    position: sticky; left:0; z-index:1; min-width: 9.5rem;
    background: var(--bg); border-right:1px solid var(--line);
  }
  .table thead th:first-child{ background: var(--bg-3) }
}

/* Breadcrumbs — die Liste traegt die Zeile, nicht der <nav> (der enthaelt nur .wrap) */
.breadcrumbs{ font-size: var(--fs-xs); color: var(--fg-muted); padding-block: var(--sp-4) 0 }
.breadcrumbs__list{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-2) }
.breadcrumbs__item{ display:inline-flex; align-items:center; gap: var(--sp-2) }
.breadcrumbs a{ color: var(--fg-muted); text-decoration:none }
.breadcrumbs a:hover{ color: var(--fg) }
.breadcrumbs li + li::before{ content:"/"; opacity:.5 }
.breadcrumbs [aria-current]{ color: var(--fg) }

/* Meldungen */
.alert{ display:flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border:1px solid var(--line-strong); border-radius: var(--r-s); font-size: var(--fs-s); line-height:1.5; background: rgba(232,213,163,.05) }
.alert .icon{ width:20px; height:20px; margin-top:1px }
.alert--ok{ border-color: var(--ok-fg); color: var(--fg); background: rgba(127,191,158,.08) }
.alert--ok .icon{ color: var(--ok-fg) }
.alert--error{ border-color: var(--err-fg); color: var(--fg); background: rgba(217,140,122,.08) }
.alert--error .icon{ color: var(--err-fg) }
.alert strong{ font-weight:600 }

/* -------------------------------------------------------------- 9 Formulare */
.form{ display:grid; gap: var(--sp-5) }
.form__row{ display:grid; gap: var(--sp-4) }
@media (min-width: 640px){ .form__row{ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) } }
.form__row--3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) }
.field{ display:flex; flex-direction:column; gap: var(--sp-2); min-width:0 }
/* Kein display:flex: Beschriftungen mit Verweis im Satz ("Ich habe die <a>Datenschutz-
   erklaerung</a> gelesen") zerfielen sonst in mehrere nebeneinander stehende Bloecke.
   Der Zusatz "optional" wandert per float nach rechts. */
.field__label{ font-size: var(--fs-s); font-weight:500; color: var(--fg); display:block }
.field__label .muted{ float:right; margin-left: var(--sp-3); font-weight:400; font-size: var(--fs-xs) }
.field__input{
  width:100%; min-height: var(--field-h); padding: var(--sp-3) var(--sp-4);
  background: var(--field-bg); color: var(--fg);
  border:1px solid var(--line-strong); border-radius: var(--r-s);
  font-size: var(--fs-m); line-height:1.4; -webkit-appearance:none; appearance:none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field__input::placeholder{ color: var(--fg-muted); opacity:.7 }
.field__input:hover{ border-color: var(--accent) }
.field__input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,165,90,.32) }
.field__input:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px }
.field__input:disabled{ opacity:.55 }
textarea.field__input{ min-height: 140px; resize: vertical }
select.field__input{
  padding-right: 44px; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A55A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; background-size: 20px;
}
/* Auf hellem Grund braucht der Pfeil den dunkleren Goldton (Gold auf Papier nur 2,1:1). */
.section--light select.field__input,.theme-light select.field__input{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7A32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.field__input option{ color: var(--tinte); background: #fff }
.field__input::-webkit-calendar-picker-indicator{ filter: invert(80%) sepia(30%) saturate(400%) hue-rotate(5deg); cursor:pointer }
.section--light .field__input::-webkit-calendar-picker-indicator{ filter:none }
.field__hint{ font-size: var(--fs-xs); color: var(--fg-muted) }
.field__error{ font-size: var(--fs-xs); color: var(--err-fg); font-weight:500 }
.field--error .field__input{ border-color: var(--err-fg); box-shadow: 0 0 0 3px rgba(217,140,122,.2) }
.field--inline{ flex-direction:row; align-items:flex-start; gap: var(--sp-3) }
.field--inline input[type="checkbox"],.field--inline input[type="radio"]{ width:22px; height:22px; margin-top:2px; accent-color: var(--gold); flex-shrink:0 }
.field--inline .field__label{ font-weight:400; color: var(--fg-muted) }
.field__prefix{ position:relative }
.field__prefix .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--accent); pointer-events:none; width:20px; height:20px }
.field__prefix .field__input{ padding-left: 46px }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-4); padding-top: var(--sp-2) }
.form__note{ font-size: var(--fs-xs); color: var(--fg-muted) }
.chips{ display:flex; flex-wrap:wrap; gap: var(--sp-2) }
.chip{ display:inline-flex; align-items:center; gap: var(--sp-2); min-height:40px; padding: var(--sp-2) var(--sp-4); border:1px solid var(--line-strong); border-radius: var(--r-full); font-size: var(--fs-s); cursor:pointer; user-select:none }
.chip input{ position:absolute; opacity:0; width:1px; height:1px }
.chip:has(input:checked){ background: var(--gold); border-color: var(--gold); color: var(--nacht) }
.chip:has(input:focus-visible){ outline: 2px solid var(--gold); outline-offset: 3px }

/* ---------------------------------------------------------------- 10 Header */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(11,15,26,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled{ background: rgba(11,15,26,.92); border-bottom-color: var(--line); box-shadow: var(--shadow-s) }
/* backdrop-filter macht den Header zum Containing Block fuer position:fixed —
   bei offener Navigation deshalb ohne Filter, damit das Panel den Viewport fuellt */
body.nav-open .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background: var(--nacht) }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); min-height: var(--header-h); transition: min-height var(--t) var(--ease) }
.site-header.is-scrolled .site-header__inner{ min-height: var(--header-h-small) }
.site-logo{ display:inline-flex; align-items:center; color: var(--champagner); text-decoration:none; flex-shrink:0 }
.site-logo svg,.site-logo img{ height:42px; width:auto; transition: height var(--t) var(--ease) }
.site-header.is-scrolled .site-logo svg,.site-header.is-scrolled .site-logo img{ height:34px }
.site-nav{ display:flex; align-items:center; gap: var(--sp-3); margin-left:auto; min-width:0 }
.site-nav__list{ display:flex; align-items:center; gap: var(--sp-1) }
.site-nav__link{
  display:inline-flex; align-items:center; gap: var(--sp-1); min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-s); font-weight:500; color: var(--fg); text-decoration:none; border-radius: var(--r-s);
  position:relative; transition: color var(--t-fast);
}
.site-nav__link::after{ content:""; position:absolute; left: var(--sp-3); right: var(--sp-3); bottom:6px; height:1px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform var(--t) var(--ease) }
.site-nav__link:hover{ color: var(--champagner) }
.site-nav__link:hover::after,.site-nav__link[aria-current="page"]::after{ transform: scaleX(1) }
.site-nav__link[aria-current="page"]{ color: var(--champagner) }
.site-nav__cta{ margin-left: var(--sp-2) }
/* Farbe --fg (nicht --fg-muted): der Kopf ist halbdurchsichtig, ueber hellen Seiten
   erreicht die gedaempfte Creme nur 3,9:1. Die Linie bleibt zurueckhaltend. */
.lang-switch{ display:inline-flex; align-items:center; gap: var(--sp-1); min-height: var(--tap); padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--fg); text-decoration:none; border:1px solid var(--line); border-radius: var(--r-full) }
.lang-switch:hover{ color: var(--champagner); border-color: var(--line-strong) }
.lang-switch .icon{ width:16px; height:16px }
.site-nav__toggle{ display:none; width: var(--tap); height: var(--tap); align-items:center; justify-content:center; border:1px solid var(--line); border-radius: var(--r-s); color: var(--champagner); flex-shrink:0 }
.site-nav__toggle .icon{ pointer-events:none }
.site-nav__toggle .icon--close{ display:none }
.site-nav__toggle[aria-expanded="true"] .icon--menu{ display:none }
.site-nav__toggle[aria-expanded="true"] .icon--close{ display:block }

/* Umschaltpunkt 1200 px: darunter passen Menue, Sprachwechsel und CTA nicht
   nebeneinander in die 1200-px-Inhaltsbreite – bis 1150 px fielen Sprachwechsel
   und "Preis anfragen" vorher aus dem sichtbaren Bereich. */
@media (max-width: 1199.98px){
  .site-nav__toggle{ display:inline-flex }
  .site-nav__panel{
    position:fixed; inset: var(--header-h) 0 0 0; z-index:99; overflow-y:auto;
    display:flex; flex-direction:column; gap: var(--sp-6); padding: var(--sp-6) var(--gutter) var(--sp-8);
    background: var(--nacht); border-top:1px solid var(--line);
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s var(--t);
  }
  .site-header.is-scrolled .site-nav__panel{ inset-block-start: var(--header-h-small) }
  .site-nav.is-open .site-nav__panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
  .site-nav__list{ flex-direction:column; align-items:stretch; gap:0 }
  .site-nav__list li{ border-bottom:1px solid var(--line) }
  .site-nav__link{ width:100%; min-height:56px; padding: var(--sp-3) 0; font-family: var(--serif); font-size: 1.5rem; font-weight:500; justify-content:space-between }
  .site-nav__link::after{ display:none }
  .site-nav__cta{ margin:0; width:100% }
  .site-nav__cta .btn{ width:100%; display:flex }
  .site-nav__meta{ display:flex; flex-direction:column; gap: var(--sp-3); color: var(--fg-muted); font-size: var(--fs-s) }
  .site-nav__meta a{ color: var(--fg); text-decoration:none }
  .lang-switch--desktop{ display:none }
}
@media (min-width: 1200px){
  .site-nav__panel{ display:contents }
  .site-nav__meta{ display:none }
  /* knapper Zuschnitt, damit die Zeile in 1200 px Inhaltsbreite bleibt */
  .site-nav__list{ gap:0 }
  .site-nav__link{ padding-inline: var(--sp-2); white-space:nowrap }
  .site-nav__link::after{ left: var(--sp-2); right: var(--sp-2) }
  .lang-switch--desktop{ padding-inline: var(--sp-3) }
  .lang-switch--desktop .icon{ display:none }
  .site-nav__cta{ margin-left: var(--sp-2) }
  .site-nav__cta .btn{ padding-inline: var(--sp-5) }
}

/* ------------------------------------------------- 10b Untermenues der Navigation */
.site-nav__item--has-sub{ position:relative }
.site-nav__sub{ list-style:none; margin:0; padding:0 }
.site-nav__chevron{ width:16px; height:16px; flex-shrink:0; transition: transform var(--t) var(--ease) }
.site-nav__sub-toggle{ cursor:pointer; background:none }
.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron{ transform: rotate(180deg) }
.site-nav__item--has-sub.is-active > .site-nav__sub-toggle{ color: var(--champagner) }

@media (min-width: 1200px){
  .site-nav__sub{
    position:absolute; top:100%; left:50%; z-index:120; min-width:15rem;
    display:flex; flex-direction:column; gap:2px; padding: var(--sp-2);
    background: var(--nacht-2); border:1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-m);
    opacity:0; visibility:hidden; pointer-events:none; transform: translate(-50%, -8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s var(--t);
  }
  /* Kein :focus-within – sonst haelt der Fokus, der nach Escape auf den Schalter
     zurueckspringt, das Untermenue offen. Tastatur laeuft ueber aria-expanded. */
  .site-nav__item--has-sub:hover > .site-nav__sub,
  .site-nav__sub-toggle[aria-expanded="true"] + .site-nav__sub{
    opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0); transition-delay:0s;
  }
  .site-nav__sub li{ border:0 }
  .site-nav__sub-link{ display:flex; width:100%; white-space:nowrap; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); font-size: var(--fs-s) }
  .site-nav__sub-link::after{ display:none }
  .site-nav__sub-link:hover{ background: rgba(232,213,163,.08); color: var(--champagner) }
}

@media (max-width: 1199.98px){
  .site-nav__sub{ display:none; padding: 0 0 var(--sp-3) var(--sp-4) }
  .site-nav__sub-toggle[aria-expanded="true"] + .site-nav__sub{ display:block }
  .site-nav__list .site-nav__sub li{ border-bottom:0 }
  .site-nav__sub-link{ min-height:48px; font-family: var(--sans); font-size: var(--fs-m); font-weight:400; color: var(--fg-muted) }
  .site-nav__sub-link:hover,.site-nav__sub-link[aria-current="page"]{ color: var(--champagner) }
}

/* Ohne JavaScript bleiben die Gruppen auf kleinen Schirmen aufgeklappt erreichbar. */
.no-js .site-nav__sub{ display:block }

/* ------------------------------------------------------------------ 11 Hero */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h) }
/* Mit Brotkrumen davor darf der Hero nicht hochgezogen werden – sonst deckt er sie zu. */
.breadcrumbs + .hero{ margin-top: 0; padding-top: var(--sp-5) }
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.hero__media img,.hero__media picture{ width:100%; height:100%; object-fit:cover; object-position: 70% 50% }
.hero__media picture img{ height:100% }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,15,26,.96) 0%, rgba(11,15,26,.9) 36%, rgba(11,15,26,.55) 62%, rgba(11,15,26,.28) 100%),
    linear-gradient(180deg, rgba(11,15,26,.55) 0%, rgba(11,15,26,0) 30%, rgba(11,15,26,.7) 100%);
}
/* Auf schmalen Schirmen laeuft der Text ueber die ganze Breite – ein waagrechter Verlauf
   schuetzt ihn dort nicht, die Zeilen enden ueber der hellen Bildseite. Darum senkrecht
   abdunkeln: kraeftig, wo Text steht, und im unteren Drittel offener, damit das Foto
   ueberhaupt noch zu sehen ist. */
@media (max-width: 959px){
  .hero__media img,.hero__media picture{ object-position: 58% 50% }
  .hero__media::after{
    background: linear-gradient(180deg,
      rgba(11,15,26,.94) 0%,
      rgba(11,15,26,.88) 30%,
      rgba(11,15,26,.74) 54%,
      rgba(11,15,26,.60) 72%,
      rgba(11,15,26,.90) 100%);
  }
}
.hero__media img{ animation: ken-burns 26s var(--ease) both; transform-origin: 62% 45% }
@keyframes ken-burns{ from{ transform: scale(1) } to{ transform: scale(1.09) } }
.hero .wrap{ width:100% }
.hero__grid{ display:grid; gap: var(--sp-7); align-items:center; padding-block: var(--sp-8) }
@media (min-width: 960px){ .hero__grid{ grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: var(--sp-8) } }
.hero__content{ max-width: 640px; display:flex; flex-direction:column; gap: var(--sp-5) }
/* Cremefarbener Text und Schattenkante gelten nur, wenn wirklich ein Foto dahinter liegt.
   Auf .hero--plain (Preise, AGB, Hilfe, Kontakt ... alle hell) waere Creme auf Papier 1,0:1. */
.hero__content .lead{ color: var(--fg-muted) }
.hero__media ~ .wrap .hero__content h1{ text-shadow: 0 2px 24px rgba(11,15,26,.6) }
.hero__media ~ .wrap .hero__content .lead{ color: rgba(245,241,232,.78) }
.hero__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3) var(--sp-4); align-items:center }
.hero__card{
  position:relative; padding: var(--sp-6); border-radius: var(--r-m);
  background: rgba(20,26,43,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border:1px solid var(--line-strong); box-shadow: var(--shadow-l), inset 0 1px 0 rgba(232,213,163,.14);
}
.hero__card .h3{ margin-bottom: var(--sp-4) }
.hero__card .form{ gap: var(--sp-4) }
.hero__card .field__input{ background: rgba(11,15,26,.55) }
.hero__scroll{ position:absolute; left:50%; bottom: var(--sp-5); transform:translateX(-50%); color: var(--fg-muted); font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; display:none }
@media (min-width: 960px) and (min-height: 700px){ .hero__scroll{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-2) } }
.hero__scroll .icon{ animation: nudge 2.4s var(--ease) infinite }
@keyframes nudge{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(6px) } }

.hero--compact{ min-height: min(56svh, 560px); align-items:flex-end }
.hero--compact .hero__grid{ grid-template-columns: 1fr; padding-block: var(--sp-7) var(--sp-7) }
.hero--compact .hero__content{ max-width: 760px }
.hero--compact .hero__media::after{
  background: linear-gradient(180deg, rgba(11,15,26,.7) 0%, rgba(11,15,26,.55) 45%, rgba(11,15,26,.96) 100%);
}
.hero--compact .hero__media img{ animation:none }
.hero--plain{ min-height:0; padding-top: calc(var(--header-h) + var(--sp-7)) }
.hero--plain .hero__grid{ padding-block: var(--sp-6) var(--sp-7) }

/* ---------------------------------------------------------------- 12 Footer */
.site-footer{ border-top:1px solid var(--line); background: var(--nacht); color: var(--fg-muted); font-size: var(--fs-s); padding-block: var(--sp-8) var(--sp-6) }
.site-footer__grid{ display:grid; gap: var(--sp-7) var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) }
.site-footer__brand,.site-footer__col--brand{ display:flex; flex-direction:column; gap: var(--sp-4); max-width: 340px }
@media (min-width: 960px){ .site-footer__grid{ grid-template-columns: 1.6fr 1fr 1fr 1.2fr } }
.site-footer .site-logo,.site-footer .logo{ color: var(--champagner) }
/* Spaltenueberschriften: klein und gesperrt, unabhaengig von der Elementebene (h2/h4) */
.site-footer h4,.site-footer .h4,.site-footer__title{
  font-family: var(--sans); font-size: var(--fs-xs); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color: var(--champagner); line-height:1.4; margin-bottom: var(--sp-4);
}
.site-footer__list + .site-footer__title{ margin-top: var(--sp-6) }
.site-footer__list + p{ margin-top: var(--sp-3) }
.site-footer ul{ display:grid; gap: var(--sp-2) }
.site-footer a{ color: var(--fg-muted); text-decoration:none }
.site-footer a:hover{ color: var(--champagner) }
.site-footer address,.site-footer__address{ font-style:normal; line-height:1.6; margin-bottom: var(--sp-4) }
.site-footer__operated{ color: var(--fg-muted) }
.site-footer__contact li,.site-footer__list--contact li{ display:flex; align-items:center; gap: var(--sp-3) }
.site-footer__list--contact a{ display:inline-flex; align-items:center; gap: var(--sp-3) }
.site-footer__contact .icon,.site-footer__list--contact .icon{ width:18px; height:18px; color: var(--champagner); flex-shrink:0 }
.site-footer__legal{ margin-top: var(--sp-7); padding-top: var(--sp-5); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-xs) }
.site-footer__legal ul,.site-footer__list--inline{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-4) }
.site-footer__note,.site-footer__copy{ font-size: var(--fs-xs); color: rgba(245,241,232,.5) }

/* ---------------------------------------------------------------- 13 Consent */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background: rgba(20,26,43,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top:1px solid var(--line-strong); box-shadow: 0 -12px 40px rgba(0,0,0,.4);
  padding: var(--sp-4) 0; font-size: var(--fs-s); color: var(--fg-muted);
}
.consent__inner{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3) var(--sp-6) }
.consent__text{ flex: 1 1 380px; min-width: 240px; line-height:1.45 }
.consent__text strong{ color: var(--fg); font-weight:600 }
.consent__text a{ text-decoration: underline }
.consent__link + .consent__link{ margin-left: var(--sp-3) }
.consent__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-3); margin-left:auto }
/* Beide Schaltflaechen gleich gewichtet (Einwilligung darf nicht vorgespurt sein). */
.consent__actions .btn,.consent__btn{ min-height:44px; padding-inline: var(--sp-5); flex:0 1 auto; min-width: 10.5rem; justify-content:center }
@media (max-width: 639.98px){
  /* Budget: hoechstens 15 % der Viewport-Hoehe (844 px -> 126 px). */
  .consent{ padding: var(--sp-2) 0; font-size: var(--fs-xs) }
  .consent__inner{ gap: var(--sp-2) }
  .consent__text{ flex-basis:100%; line-height:1.4 }
  .consent__actions{ width:100%; margin:0; flex-wrap:nowrap }
  .consent__actions .btn,.consent__btn{ flex:1 1 0; min-width:0; min-height:44px; padding-inline: var(--sp-3) }
}

/* ------------------------------------------------------------ 14 Sonstiges */
.divider{ height:1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent) }
.note-line{ font-family: var(--serif); font-size: var(--fs-xl); font-style: italic; color: var(--fg-heading); text-align:center; max-width: 60ch; margin-inline:auto }
.note-line strong{ font-style:normal; font-weight:600; color: var(--accent-text) }
.kpi{ display:flex; flex-direction:column; gap: var(--sp-1) }
.kpi__value{ font-family: var(--serif); font-size: var(--fs-2xl); font-weight:600; line-height:1; color: var(--accent-text); font-variant-numeric: lining-nums }
.kpi__label{ font-size: var(--fs-s); color: var(--fg-muted) }
.media-frame{ position:relative; border-radius: var(--r-m); overflow:hidden; border:1px solid var(--line) }
.media-frame img{ width:100%; height:100%; object-fit:cover }
.media-frame--4x3{ aspect-ratio: 4/3 }
.media-frame--16x9{ aspect-ratio: 16/9 }
.media-frame--square{ aspect-ratio: 1 }
/* Wortmarke: Inline-SVG oder Text-Rueckfall (partials/logo.php) */
.logo{ display:inline-flex; align-items:center; color: inherit }
.logo__svg{ height:42px; width:auto }
.logo--footer .logo__svg{ height:46px }
.logo__text{ display:flex; flex-direction:column; gap:2px; line-height:1 }
.logo__name{ font-family: var(--serif); font-size: 1.75rem; font-weight:500; letter-spacing:.01em }
.logo__sub{ font-family: var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--fg-muted) }
/* Sprungmarken-Leiste der Hilfeseite */
.faq-toc .eyebrow{ margin-bottom: var(--sp-3) }

.contact-line{ display:inline-flex; align-items:center; gap: var(--sp-3); font-size: var(--fs-l); font-weight:500; color: var(--fg); text-decoration:none }
.contact-line .icon{ color: var(--accent) }
.contact-line:hover{ color: var(--accent-text) }

/* ------------------------------------------------- 14b Buchungsablauf (/buchung/*) */
/* Nur Tokens, keine neuen Farben. Bausteine: Fortschrittsanzeige, Klassenkarten mit
   Preis, Preiszeile, Zusammenfassung, Buchungsnummer, zahlungspflichtiger Abschluss. */

.bk-layout{ display:grid; gap: var(--sp-7); align-items:start }
.bk-layout > *{ min-width:0 }
@media (min-width: 960px){
  .bk-layout{ grid-template-columns: 7fr 5fr; gap: var(--sp-8) }
}
.bk-main{ display:flex; flex-direction:column; gap: var(--sp-6); min-width:0 }
/* .form ist ein Raster; ohne min-width:0 waechst die Spur auf die min-content-Breite
   ihres breitesten Kindes. Die Schaltflaeche im letzten Schritt traegt die lange
   Pflichtbeschriftung nach Paragraf 8 FAGG ("Zahlungspflichtig buchen" / "Book with
   obligation to pay") und bricht als .btn nicht um - damit schob sie bei 360 px die
   ganze Seite seitlich auf. */
.bk-form{ min-width:0 }
.bk-form > *{ min-width:0 }

/* Fortschritt */
.bk-progress{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: var(--sp-4) }
.bk-progress__label{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text); margin:0 0 var(--sp-2) }
.bk-progress__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: 0 var(--sp-4); counter-reset:none }
.bk-progress__item{ min-width:0 }
.bk-progress__link{ display:flex; align-items:center; gap: var(--sp-2); min-height:44px; color: var(--fg-muted); text-decoration:none; font-size: var(--fs-s) }
a.bk-progress__link:hover{ color: var(--fg) }
.bk-progress__num{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; border:1px solid var(--line-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-variant-numeric: tabular-nums lining-nums }
.bk-progress__name{ overflow-wrap:anywhere }
.bk-progress__item.is-done .bk-progress__num{ border-color: var(--accent); color: var(--accent-text) }
.bk-progress__item.is-current .bk-progress__link{ color: var(--fg-heading); font-weight:600 }
.bk-progress__item.is-current .bk-progress__num{ background: var(--gold); border-color: var(--gold); color: var(--nacht) }
.bk-progress__item.is-open .bk-progress__link{ opacity:.65 }

/* Die Strecke ueber den Fahrzeugkarten (Schritt 2): worum es geht, plus Weg zurueck */
.bk-trip{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) var(--sp-5); border:1px solid var(--line); border-radius: var(--r-m); background: var(--bg-2) }
.bk-trip__list{ display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-5); margin:0; min-width:0 }
.bk-trip__item{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.bk-trip__label{ font-size: var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--fg-muted) }
.bk-trip__value{ margin:0; font-size: var(--fs-s); color: var(--fg); overflow-wrap:anywhere }
.bk-trip__edit{ display:inline-flex; align-items:center; gap: var(--sp-2); min-height:44px; white-space:nowrap }

/* Fahrzeugkarten mit Preis (Schritt 2)
   ------------------------------------------------------------------------------
   Drei Karten nebeneinander, ab 860 px in einem Raster, darunter untereinander.
   Jede Karte ist die Beschriftung ihres Radiofeldes: ein Klick irgendwo auf der
   Karte waehlt die Klasse, auch ohne JavaScript.

   DIE WAHL IST NICHT NUR FARBE. Sichtbar sind drei Dinge zugleich: der Rahmen in
   Gold, das ausgefuellte Radiofeld und die Zeile mit Haken und dem Wort "Gewaehlt".
   Wer Farben nicht unterscheiden kann, erkennt die Wahl an Haken und Wort.

   Eine Klasse, die die angegebene Gruppe nicht traegt, verschwindet nicht: sie
   behaelt ihren Preis, wird gedaempft (.bk-class--out) und ist nicht waehlbar.
   Auch das steht als Wort auf der Karte, nicht nur in der Farbe. */
.bk-classes{ display:grid; gap: var(--sp-3) }
@media (min-width: 860px){
  .bk-classes{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) }
}
.bk-class{ display:flex; flex-direction:column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border:1px solid var(--line); border-radius: var(--r-m); background: var(--bg-2); cursor:pointer; min-width:0; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) }
.bk-class:hover{ border-color: var(--line-strong) }
.bk-class:focus-within{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,165,90,.28) }
.bk-class__head{ display:flex; align-items:center; gap: var(--sp-3); min-height:44px; min-width:0 }
.bk-class__radio{ width:22px; height:22px; flex:0 0 22px; accent-color: var(--gold) }
.bk-class__name{ font-family: var(--serif); font-size: var(--fs-l); font-weight:600; color: var(--fg-heading); line-height: var(--lh-snug); overflow-wrap:anywhere }
.bk-class__price{ display:flex; flex-direction:column; gap: var(--sp-1); min-width:0 }
.bk-class__amount{ font-size: var(--fs-xl); font-weight:500; color: var(--fg-heading); white-space:nowrap; font-variant-numeric: tabular-nums lining-nums }
.bk-class__note{ font-size: var(--fs-xs); color: var(--fg-muted) }
.bk-class__body{ display:flex; flex-direction:column; gap: var(--sp-1); min-width:0 }
.bk-class__model{ display:flex; align-items:flex-start; gap: var(--sp-2); font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--fg-muted); overflow-wrap:anywhere }
.bk-class__model .icon{ width:18px; height:18px; flex:0 0 18px; margin-top:2px; color: var(--accent) }
.bk-class__state{ display:none; align-items:center; gap: var(--sp-2); margin-top:auto; padding-top: var(--sp-3); border-top:1px solid var(--line); font-size: var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-text) }
.bk-class__state .icon{ width:16px; height:16px; flex:0 0 16px }
.bk-class.is-selected{ border-color: var(--gold); background: rgba(201,165,90,.07) }
.bk-class.is-selected .bk-class__state{ display:flex }
.bk-classes--error .bk-class{ border-color: var(--err-fg) }
/* Zu klein fuer die Gruppe: sichtbar, aber gedaempft und nicht waehlbar. */
.bk-class--out{ cursor:not-allowed; opacity:.55 }
.bk-class--out:hover{ border-color: var(--line) }
.bk-class__state--out{ display:flex; color: var(--fg-muted) }
/* Wo :has() greift, entscheidet allein der Haken – sonst blieben nach einem Klick
   ohne Seitenwechsel zwei Karten hervorgehoben (die alte serverseitige und die neue). */
@supports selector(:has(*)){
  .bk-class.is-selected{ border-color: var(--line); background: var(--bg-2) }
  .bk-class.is-selected .bk-class__state{ display:none }
  .bk-class:has(.bk-class__radio:checked){ border-color: var(--gold); background: rgba(201,165,90,.07) }
  .bk-class:has(.bk-class__radio:checked) .bk-class__state{ display:flex }
  .bk-class--out .bk-class__state--out{ display:flex }
}

/* Die Preisbegruendung unter den Karten – ein Satz, kein Kleingedrucktes */
.bk-basis{ display:flex; flex-direction:column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-left:3px solid var(--gold); border-radius: var(--r-s); background: var(--bg-2) }
.bk-basis__label{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text) }
.bk-basis__text{ margin:0; font-size: var(--fs-s); line-height:1.6; color: var(--fg) }

.bk-included{ font-size: var(--fs-xs); line-height:1.6; color: var(--fg-muted) }
.bk-included strong{ color: var(--fg); font-weight:600 }

/* Kein Fixpreis: ruhiger Hinweis, keine Fehlerfarbe */
.bk-nofix__actions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top:1px solid var(--line) }

/* Preiszeile in den Schritten 2 und 3 */
.bk-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap: var(--sp-1) var(--sp-4); padding: var(--sp-4) var(--sp-5); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius: var(--r-s); background: var(--bg-2) }
.bk-price__label{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text) }
.bk-price__amount{ font-size: var(--fs-xl); font-weight:500; color: var(--fg-heading); font-variant-numeric: tabular-nums lining-nums; white-space:nowrap }
.bk-price__note{ flex-basis:100%; font-size: var(--fs-xs); color: var(--fg-muted) }
.bk-price__basis{ flex-basis:100%; font-size: var(--fs-xs); line-height:1.6; color: var(--fg-muted) }

/* Endsumme in Schritt 4 und auf der Bestaetigung */
.bk-total{ display:flex; flex-wrap:wrap; align-items:baseline; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5); border:1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg-2) }
.bk-total__label{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text) }
.bk-total__amount{ font-size: var(--fs-2xl); font-weight:500; line-height:1; color: var(--fg-heading); font-variant-numeric: tabular-nums lining-nums; white-space:nowrap; margin-left:auto }
.bk-total__note{ flex-basis:100%; font-size: var(--fs-xs); color: var(--fg-muted) }
.bk-total__basis{ flex-basis:100%; margin:0; font-size: var(--fs-xs); line-height:1.6; color: var(--fg-muted) }
.bk-total__basis strong{ color: var(--fg); font-weight:600 }
.bk-total__included{ flex-basis:100%; margin:0; font-size: var(--fs-xs); line-height:1.6; color: var(--fg-muted) }
.bk-total__included strong{ color: var(--fg); font-weight:600 }

/* Zusammenfassung */
.bk-block{ padding-top: var(--sp-5); border-top:1px solid var(--line) }
.bk-block__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3) }
.bk-block__head h2{ margin:0 }
/* Der Aenderungslink jedes Blocks ist auf dem Telefon ein Ziel wie jedes andere und
   braucht deshalb die 44 px Hoehe – als Text allein waere er 26 px hoch. */
.bk-block__head .link{ display:inline-flex; align-items:center; gap: var(--sp-2); min-height:44px }
.bk-rows{ margin:0 }
.bk-rows__row{ display:grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom:1px solid var(--line) }
.bk-rows__row:last-child{ border-bottom:0 }
.bk-rows__label{ font-size: var(--fs-s); color: var(--fg-muted) }
.bk-rows__value{ margin:0; font-size: var(--fs-m); color: var(--fg); overflow-wrap:anywhere }
@media (min-width: 560px){
  .bk-rows__row{ grid-template-columns: 38% minmax(0, 1fr); gap: var(--sp-4); align-items:baseline }
}

/* Buchungsnummer */
.bk-number{ display:flex; flex-direction:column; gap: var(--sp-2); padding: var(--sp-5); border:1px solid var(--line-strong); border-left:3px solid var(--gold); border-radius: var(--r-m); background: var(--bg-2) }
.bk-number__label{ font-size: var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-text) }
.bk-number__value{ font-size: clamp(1.6rem, 6vw, 2.25rem); font-weight:600; line-height:1.1; letter-spacing:.06em; color: var(--fg-heading); overflow-wrap:anywhere }
.bk-number__hint{ font-size: var(--fs-xs); color: var(--fg-muted) }

/* Zahlungspflichtiger Abschluss */
.bk-obligation{ display:flex; flex-direction:column; gap: var(--sp-4); padding: var(--sp-5); border:1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg-2) }
.bk-obligation__intro{ margin:0; font-size: var(--fs-s); color: var(--fg) }
.bk-obligation .field__label a{ color: var(--accent-text) }
.bk-obligation__notes{ list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--fg-muted) }
.bk-obligation__notes li{ display:flex; align-items:flex-start; gap: var(--sp-2) }
.bk-obligation__notes .icon{ width:16px; height:16px; flex:0 0 16px; margin-top:2px; color: var(--accent) }
/* Die Beschriftungen des Ablaufs sind lang und duerfen nicht gekuerzt werden: die
   Pflichtangabe nach Paragraf 8 FAGG ("Zahlungspflichtig buchen" / "Book with
   obligation to pay") ebenso wenig wie "Weiter zur Bestaetigung" / "Continue to the
   confirmation". Auf schmalen Schirmen duerfen sie deshalb umbrechen - .btn ist sonst
   nowrap und schob die englische Fassung von Schritt 3 bei 360 px um 14 px seitlich
   aus dem Bild. Nur im Buchungsablauf, damit alle anderen Schaltflaechen der Site
   unveraendert bleiben. */
@media (max-width: 480px){
  .bk-obligation .btn--block{ white-space:normal; padding-inline: var(--sp-5); text-align:center }
  .bk-form .form__actions .btn{ white-space:normal; max-width:100%; padding-inline: var(--sp-5); text-align:center }
}
.btn.is-busy{ pointer-events:none; opacity:.7 }

/* -------------------------------------------------------------- 15 Bewegung */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease) }
.reveal.is-visible{ opacity:1; transform:none }
.reveal-group > .reveal:nth-child(2){ transition-delay:.08s }
.reveal-group > .reveal:nth-child(3){ transition-delay:.16s }
.reveal-group > .reveal:nth-child(4){ transition-delay:.24s }
.no-js .reveal{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .reveal{ opacity:1; transform:none }
  .hero__media img{ animation:none; transform:none }
  .btn:hover,a.card:hover,.card--hover:hover{ transform:none }
  .vehicle-card:hover .vehicle-card__media img{ transform:none }
}

/* ------------------------------------------------------------------ 16 Druck */
@media print{
  :root{ --bg:#fff; --bg-2:#fff; --fg:#000; --fg-muted:#333; --fg-heading:#000; --line:#bbb; --line-strong:#888; --accent:#6E5520; --accent-text:#6E5520 }
  body{ background:#fff; color:#000 }
  .site-header,.site-nav__toggle,.consent,.hero__media,.hero__scroll,.skip-link,.btn{ display:none !important }
  /* Reveal-Bloecke, die beim Druck noch nicht sichtbar waren, muessen trotzdem mit. */
  .reveal,.reveal:not(.is-visible){ opacity:1 !important; transform:none !important; visibility:visible !important }
  .hero{ min-height:0; margin:0; padding:0 }
  .hero__card{ background:none; box-shadow:none; border:1px solid #bbb }
  a{ color:#000; text-decoration:underline }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.85em; color:#555 }
  .section{ padding-block: 1.5rem; border:0 !important }
  .card,.table-wrap{ break-inside:avoid; border-color:#bbb }
  .faq__item{ break-inside:avoid }
  details.faq__item:not([open]) .faq__a{ display:block }
  .site-footer{ border-top:1px solid #bbb; background:none; color:#333 }
}