/*
Theme Name:   SüdBadenVan
Theme URI:    https://suedbadenvan.de
Description:  Child-Theme für SüdBadenVan auf Basis von Hello Elementor. Enthält das CI-Farb- und Typo-System.
Author:       PRO-Sulting
Template:     hello-elementor
Version:      0.1.0
Text Domain:  suedbadenvan
*/

/* ============================================================
   1. DESIGN-TOKENS  (CI aus dem Mockup sbv-preview)
   ============================================================ */
:root {
  /* --- Kernfarben (CI-Verlauf) --- */
  --sbv-yellow:      #FFE70A;
  --sbv-orange:      #FF952B;
  --sbv-teal:        #00C2E0;
  --sbv-teal-dark:   #0098B3;
  --sbv-teal-deep:   #006D80;

  /* --- Abgeleitete Toene --- */
  --sbv-orange-dark: #E07818;
  --sbv-orange-pale: #FFF3E6;
  --sbv-yellow-pale: #FFFAE6;
  --sbv-teal-pale:   #E5F8FC;

  /* --- Neutrals --- */
  --sbv-white:    #FFFFFF;
  --sbv-cream:    #FAFAF8;
  --sbv-gray-50:  #F5F5F3;
  --sbv-gray-100: #EBEBEA;
  --sbv-gray-200: #D4D4D2;
  --sbv-gray-500: #888886;
  --sbv-gray-700: #4A4A48;   /* Body-Text, 8.88:1 auf Weiss */
  --sbv-charcoal: #1A1A18;   /* Headlines, 17.9:1 auf Weiss */

  /* --- Barrierefreiheit: Vordergrund auf Marken-Flaechen ---
     Weiss auf Orange = 2.19:1 und auf Teal = 2.14:1 -> WCAG-AA FAIL.
     Charcoal auf denselben Flaechen = 7.96:1 / 8.13:1 -> AA OK.
     Diese zwei Tokens sind der einzige Hebel; CI-Farben bleiben unveraendert. */
  --sbv-on-orange: var(--sbv-charcoal);
  --sbv-on-teal:   var(--sbv-charcoal);
  --sbv-on-yellow: var(--sbv-charcoal);   /* 13.85:1 */
  /* Fuer Flaechen, die zwingend weisse Schrift tragen sollen: */
  --sbv-teal-solid: var(--sbv-teal-deep); /* #006D80 + Weiss = 6.00:1 -> AA OK */

  /* --- Verlaeufe (das CI-Herzstueck) --- */
  --sbv-gradient-bg: linear-gradient(126deg,
    #FFFDF0 0%, #FFF5D0 28%, #FFE8C8 55%, #D6F5FC 100%);
  --sbv-gradient-hero: linear-gradient(126deg,
    #FFF8DC 0%, #FFE066 20%, #FF952B 55%, #00C2E0 100%);
  --sbv-gradient-accent: linear-gradient(126deg, var(--sbv-orange) 0%, var(--sbv-teal) 100%);

  /* --- Radien --- */
  --sbv-radius:    6px;
  --sbv-radius-lg: 12px;
  --sbv-radius-xl: 20px;
  --sbv-radius-pill: 50px;

  /* --- Typo-Skala --- */
  --sbv-font-head: 'Playfair Display', Georgia, serif;
  --sbv-font-body: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   2. BASIS
   ============================================================ */
body {
  font-family: var(--sbv-font-body);
  background: var(--sbv-gradient-bg);
  background-attachment: fixed;
  color: var(--sbv-charcoal);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--sbv-font-head);
  line-height: 1.15;
  color: var(--sbv-charcoal);
}

/* ============================================================
   3. FOKUS-SICHTBARKEIT (WCAG 2.4.7 / 2.4.11)
   Hello Elementor liefert keinen belastbaren Fokusring.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sbv-teal-deep);
  outline-offset: 2px;
  border-radius: var(--sbv-radius);
}

/* Elementor setzt `outline: 0` auf fokussierte Formularfelder
   (`.elementor-field-group .elementor-field-textual:focus`, Spezifitaet 0,3,0) und schlaegt
   damit `input:focus-visible` (0,1,1) -- ohne diese Regel ist der Fokusring im Formular weg.
   Longhands + !important, weil Elementors Regel gleich spezifisch ist.

   Nachgemessen: Ring ist im Formular sichtbar (3px solid, 8.88:1 gegen Weiss -> WCAG 1.4.11 erfuellt).
   Die Ringfarbe liess sich im Automations-Browser nicht verifizieren -- dort ignoriert der
   Renderer auf diesen Feldern selbst Inline-Styles mit !important und zeichnet currentColor.
   Im echten Chrome pruefen, falls die Farbe abweicht. */
.elementor-field-group .elementor-field-textual:focus-visible,
.elementor-field-group .elementor-field-textual:focus,
.elementor-field-group .elementor-field-option input:focus-visible,
.elementor-field-group .elementor-button:focus-visible {
  outline-width: 3px !important;
  outline-style: solid !important;
  outline-color: #006D80 !important;
  outline-offset: 2px !important;
  border-color: #006D80;
}

/* Skip-Link von Hello Elementor sichtbar machen, sobald er Fokus bekommt. */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 9999;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 12px 20px;
  background: var(--sbv-white);
  color: var(--sbv-charcoal);
  font-family: var(--sbv-font-body);
  font-weight: 600;
  border-radius: 0 0 var(--sbv-radius) 0;
  outline: 3px solid var(--sbv-teal-deep);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.elementor-button,
.sbv-btn {
  font-family: var(--sbv-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  border-radius: var(--sbv-radius-pill);
  padding: 15px 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color .2s, transform .15s, box-shadow .2s;
}

.sbv-btn--primary {
  background: var(--sbv-orange);
  color: var(--sbv-on-orange);
}
.sbv-btn--primary:hover {
  background: var(--sbv-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 149, 43, .4);
}

.sbv-btn--teal {
  background: var(--sbv-teal);
  color: var(--sbv-on-teal);
}
.sbv-btn--teal:hover {
  background: var(--sbv-teal-dark);
  transform: translateY(-1px);
}

.sbv-btn--outline {
  background: transparent;
  color: var(--sbv-charcoal);
  border: 1px solid var(--sbv-gray-200);
  font-weight: 500;
  padding: 15px 28px;
}
.sbv-btn--outline:hover { border-color: var(--sbv-teal-dark); }

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sbv-btn:hover { transform: none; }
}

/* ============================================================
   5. HEADER / FOOTER
   Nur was Elementor nicht abbildet. Layout, Farben und Abstaende
   bleiben bewusst im Editor aenderbar.
   ============================================================ */
/* KORREKTUR zur frueheren Annahme: Container nehmen sehr wohl CSS-Klassen an --
   ihr Feld heisst nur anders. Widgets: `_css_classes`, Container: `css_classes`
   (ohne Unterstrich, siehe Control-Liste des Container-Typs). Der falsche
   Feldname war der Grund, warum `.sbv-header` und `.sbv-footer-bottom` nie im
   DOM ankamen. Die Regeln hier haengen weiterhin am Theme-Builder-Wrapper --
   das funktioniert und wurde nicht umgebaut; neue Container bekommen aber
   `css_classes` und lassen sich damit direkt ansprechen.
   Deshalb haengen die Header-Regeln am Theme-Builder-Wrapper statt an .sbv-header. */
.elementor-location-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 194, 224, .15);
}

/* Der fixierte Header wuerde sonst den Seitenanfang verdecken.

   EINE Zahl fuer beides: die Hoehe des Headers und der Platz, den der Inhalt
   dafuer freihaelt. Vorher standen die Werte getrennt (84px hier, 72px in einer
   Media Query) -- und weil der Header auf dem Handy in Wahrheit 145-198px hoch
   war, lag der Seitenanfang darunter. Auf ALLEN Seiten war die erste Ueberschrift
   um rund 25px angeschnitten. Wer die Header-Hoehe aendert, aendert ab jetzt nur
   noch --sbv-header-h. */
/* 85px = die 84px min-height, die das Build-Skript am Container setzt, plus den
   1px Rand darunter. Gemessen, nicht geschaetzt: Elementors eigene Regel ist
   spezifischer als eine Regel von hier, der Container laesst sich also nicht
   kleiner machen -- der freigehaltene Platz richtet sich nach ihm. */
:root { --sbv-header-h: 85px; }

body { padding-top: var(--sbv-header-h); }

.elementor-location-header > .elementor > .e-con { min-height: var(--sbv-header-h); }

/* Eingeloggt schiebt WordPress die Seite per `html { margin-top: 32px }` unter
   seine Admin-Leiste. Ein `position: fixed`-Header bezieht sich aber auf das
   Sichtfenster, nicht auf das html-Element -- er blieb deshalb bei top: 0 und
   verschwand zu 32 px unter der Leiste. Gemessen waren damit 26 der 72 px des
   Logos verdeckt, also mehr als ein Drittel. Betrifft nur angemeldete Benutzer;
   fuer Besucher war der Header immer korrekt. */
body.admin-bar .elementor-location-header { top: 32px; }

@media screen and (max-width: 782px) {
  /* Schmale Fenster: WordPress macht die Leiste 46 px hoch. */
  body.admin-bar .elementor-location-header { top: 46px; }
}

@media screen and (max-width: 600px) {
  /* Hier ist die Leiste `position: absolute` und scrollt mit. Ein Offset wuerde
     eine Luecke hinterlassen, sobald sie nach oben weggescrollt ist. */
  body.admin-bar .elementor-location-header { top: 0; }
}

.sbv-header-logo img,
.sbv-footer-logo img { display: block; height: auto; }

/* ------------------------------------------------------------
   Rechtliche Fusszeile auf dem Handy zentrieren

   Copyright und Rechtliches-Menue stehen auf breiten Fenstern nebeneinander
   (space-between). Sobald sie untereinander rutschen, standen beide linksbuendig
   und wirkten wie abgeschnitten -- zentriert sitzen sie unter der ohnehin
   zentrierten "Powered by"-Zeile stimmiger.

   Angesprochen ueber die Position im Footer (vorletzter Container), nicht ueber
   `.sbv-footer-bottom`: Elementor uebertraegt `_css_classes` nur auf Widgets,
   nicht auf Container -- die Klasse steht zwar im Build-Skript, landet aber nie
   im DOM. Und nicht ueber die Element-ID, die beim Neubau des Templates wechselt.
   Der Inhalt selbst liegt in `.e-con-inner`, deshalb sitzt die Ausrichtung dort.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .elementor-location-footer > .e-con:nth-last-child(2) > .e-con-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  /* Das Rechtliches-Menue ist horizontal -- seine Punkte mittig setzen. */
  .elementor-location-footer > .e-con:nth-last-child(2) .elementor-nav-menu {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Footer-Kontaktblock (HTML-Widget, weil Label/Wert-Paare als Einzelwidgets
   den Editor unnoetig zumuellen wuerden). */
.sbv-footer-contact .sbv-fc-label {
  font-family: var(--sbv-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sbv-teal);
  margin: 0 0 4px;
}
.sbv-footer-contact .sbv-fc-val {
  font-family: var(--sbv-font-body);
  font-size: 14px;
  font-weight: 300;
  color: #C9C9C7;          /* 8.4:1 auf Charcoal */
  line-height: 1.6;
  margin: 0 0 16px;
}
/* Abbinder ganz unten im Footer, zentriert. */
.sbv-powered {
  margin: 0;
  text-align: center;
  font-family: var(--sbv-font-body);
  font-size: 13px;
  font-weight: 300;
  color: #A3A3A1;                 /* 5.5:1 auf Charcoal */
}
.sbv-powered a {
  color: #C9C9C7;                 /* 8.4:1 auf Charcoal */
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  min-height: 24px;               /* Tapflaeche (WCAG 2.5.8) */
  padding: 2px 4px;
}
.sbv-powered a:hover,
.sbv-powered a:focus-visible { color: #FFFFFF; text-decoration: underline; }

/* Mindest-Tapflaeche 24px (WCAG 2.2, 2.5.8) -- die Zeilenhoehe allein reicht nicht. */
.sbv-footer-contact .sbv-fc-val a {
  color: #C9C9C7;
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
  padding: 3px 0;
}
.sbv-footer-contact .sbv-fc-val a:hover { color: #FFFFFF; text-decoration: underline; }

/* ------------------------------------------------------------
   Kopfzeile auf Tablet und Handy

   Vorher stapelten sich Logo, Menue-Schalter und der CTA in drei Zeilen:
   gemessen 198px auf 320px Breite -- ein Viertel eines iPhone-SE-Bildschirms,
   bevor der Inhalt beginnt. Ursache war der innere Container mit `width: 70%`:
   Logo (108px) + 70% passen zusammen nicht in eine Zeile, also brach er um.

   Jetzt: Logo links, Menue-Schalter rechts, eine Zeile, 72px.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Der innere Container darf nur so breit sein wie sein Inhalt, sonst bricht
     die Zeile um. */
  .elementor-location-header .e-con > .e-con {
    width: auto;
    flex-grow: 0;
  }

  .elementor-location-header .e-con { flex-wrap: nowrap; }

  /* Der CTA "Konfigurator starten" ist mit 199px zu breit fuer die Kopfzeile
     eines Handys -- er war der Grund fuer die dritte Zeile. Auf jeder Seite
     fuehrt ein Einstieg in den Konfigurator ohnehin aus dem Inhalt heraus.
     Wer ihn zurueckholen will: diese Regel loeschen und dem Button in Elementor
     eine kompaktere Beschriftung geben. */
  .elementor-location-header .elementor-widget-button { display: none; }

  /* Fingerfreundlich: 33px waren unter der Empfehlung von 44px -- und das ist
     auf dem Handy das wichtigste Bedienelement ueberhaupt. */
  .elementor-location-header .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   Das aufgeklappte Menue ueber die volle Breite

   Elementor legt das Dropdown in den Fluss seines Widget-Containers -- und der
   ist nur so breit wie der Menue-Schalter (gemessen 96px). Das Menue klappte
   deshalb als schmale Spalte am rechten Rand auf.

   Bezugspunkt ist der Header selbst (er ist `position: fixed` und damit ein
   positionierter Vorfahre), nicht das Widget. `top` haengt an derselben
   Variable wie die Header-Hoehe, damit das Menue buendig darunter sitzt.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Elementor setzt `position: relative` auf seine Container. Damit waere der
     naechste positionierte Vorfahre das Menue-Widget (44px breit) und das
     Dropdown bliebe genau so schmal -- gemessen: 44px am rechten Rand.
     Static schaltet die Zwischenstufen aus, sodass der fixierte Header selbst
     der Bezugspunkt wird. Vorteil gegenueber `position: fixed`: Das Menue folgt
     dem Header automatisch, wenn ihn die Admin-Leiste nach unten schiebt. */
  .elementor-location-header .e-con,
  .elementor-location-header .elementor-widget-nav-menu {
    position: static;
  }

  .elementor-location-header .elementor-nav-menu--dropdown {
    position: absolute;
    top: var(--sbv-header-h);
    left: 0;
    right: 0;
    width: 100%;
    /* Elementor setzt 10px Abstand nach oben -- als schmaler durchsichtiger
       Streifen zwischen Header und Menue sichtbar. Das Menue schliesst buendig an. */
    margin-top: 0;
    /* Deckend, sonst scheint der Seiteninhalt durch das offene Menue. Der
       Header selbst ist nur zu 88% deckend -- fuer eine Flaeche mit Text
       reicht das nicht. */
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 194, 224, .15);
    box-shadow: 0 8px 24px rgba(26, 26, 24, .08);
  }

  /* Die Punkte linksbuendig wie im uebrigen Layout, nicht am Schalter geklebt. */
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Menuepunkte des mobilen Menues fingerfreundlich (Elementor liefert 36px).

   Hinweis zum Testen: Beim Pruefen wirkte das Menue zunaechst defekt -- nach
   dem Antippen blieb es auf Hoehe 0. Das war ein Artefakt des Test-Browsers,
   der den Stil nach der Klassenaenderung am Geschwister-Element nicht neu
   berechnet hatte. Nach erzwungener Neuberechnung oeffnete es korrekt
   (176px, alle Punkte erreichbar). Wer hier wieder auf ein "totes" Menue
   stoesst: erst eine Neuberechnung erzwingen, bevor die Ursache im CSS
   gesucht wird. */
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
  min-height: 44px;
  align-items: center;
}

/* ------------------------------------------------------------
   Formularfelder: iOS zoomt in jedes Feld unter 16px hinein und laesst den
   Besucher in einer vergroesserten, verschobenen Ansicht zurueck. Gemessen
   waren es 15px auf der Kontaktseite (5 Felder).
   ------------------------------------------------------------ */
/* `!important` ist hier Absicht: Die Schriftgroesse der Felder kommt aus der
   Typografie-Einstellung des Formular-Widgets (post-23.css, Spezifitaet 0-3-0)
   und laesst sich von hier sonst nicht erreichen. 16px sind keine Gestaltungs-
   frage, sondern die Schwelle, unterhalb derer iOS ungefragt hineinzoomt --
   deshalb hat sie Vorrang vor der Einstellung im Editor. Wer im Editor eine
   groessere Schrift setzt, muss diesen Block anpassen. */
@media (max-width: 1024px) {
  .elementor-field-textual,
  .elementor-field-textual.elementor-size-sm,
  .vc-app input:not([type="checkbox"]):not([type="radio"]),
  .vc-app select,
  .vc-app textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   5a. KENNZAHLEN („100% gasfrei / >60 Fahrzeuge / 5 Tage autark")
   Struktur aus patch-stats.php. Die Zahlen zaehlen per counter.js hoch.
   Hier: die drei Spalten mittig, mit dezenten Trennstrichen dazwischen,
   damit die Flaeche nicht leer wirkt.
   ============================================================ */
.sbv-stat { position: relative; text-align: center; }

/* Trennstrich zwischen den Spalten -- nur auf dem Desktop, wo sie nebeneinander
   stehen. Am ersten Element keiner (::before greift ab dem zweiten). */
@media (min-width: 1025px) {
  .sbv-stat + .sbv-stat::before {
    content: "";
    position: absolute;
    left: calc(-16px - 1px);      /* halber flex-gap (32px) nach links */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg,
      rgba(0, 109, 128, 0) 0%,
      rgba(0, 109, 128, .22) 50%,
      rgba(0, 109, 128, 0) 100%);
  }
}

/* Die hochzaehlende Zahl nicht "springen" lassen: feste Mindesthoehe und
   tabellarische Ziffern, damit die Breite beim Zaehlen nicht zappelt. */
.sbv-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1.1;
}

/* ============================================================
   5b. ABLAUF-TIMELINE („Der Weg zu deinem SüdBadenVan")
   Struktur kommt aus patch-ablauf-timeline.php. Hier steht nur, was Elementor
   nicht abbildet: die durchgehende Linie, die Nummernkreise darauf und der
   Wechsel der Bildseite. Texte, Bilder und Reihenfolge bleiben im Editor.
   ============================================================ */
/* Mobile first: schmale Fenster bekommen die Linie am linken Rand, weil Bild und
   Text dort untereinander stehen. Ab Desktop wandert sie in die Mitte zwischen
   die beiden Spalten (siehe unten). */
.sbv-tl {
  position: relative;
  padding-left: 60px;
}

/* Die durchgehende Linie. Sie endet an der Mitte des letzten Kreises, damit sie
   nicht ins Leere laeuft -- deshalb ein eigenes Element statt eines Rahmens. */
.sbv-tl::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--sbv-teal, #00C2E0) 0%,
    var(--sbv-orange, #FF952B) 55%,
    rgba(255, 149, 43, .15) 100%);
}

/* Richtung, Ausrichtung und Abstand stehen bewusst NICHT hier, sondern als
   Container-Einstellungen (siehe patch-ablauf-timeline.php): Elementor schreibt
   je Container eine elementspezifische Regel mit `--flex-direction`
   (Spezifitaet 0-3-0), gegen die eine Klassenregel von hier nicht ankommt.
   Hier bleibt nur, was Elementor nicht kennt. */
.sbv-tl-step {
  position: relative;
  margin-bottom: 40px;
}

.sbv-tl-step:last-child { margin-bottom: 0; }

/* Der Nummernkreis sitzt auf der Linie, nicht im Textfluss. */
.sbv-tl-num {
  position: absolute;
  left: -60px;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbv-charcoal, #1A1A18);
  /* Ring in Seitenfarbe, damit die Linie sichtbar hinter dem Kreis endet. */
  box-shadow: 0 0 0 5px var(--sbv-cream, #FAFAF8);
}

.sbv-tl-num .elementor-heading-title { line-height: 1; }

.sbv-tl-media,
.sbv-tl-body { flex: 1 1 auto; max-width: 100%; }

.sbv-tl-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--sbv-radius-lg, 12px);
  box-shadow: 0 10px 30px rgba(26, 26, 24, .10);
}

.sbv-tl-titel { margin-bottom: 8px; }

/* ------------------------------------------------------------
   Ab Desktop: Linie mittig zwischen den beiden Spalten

   Erst hier stehen Bild und Text nebeneinander (Elementor schaltet das ueber
   `flex_direction_tablet: column` bei 1024px um) -- eine Mittellinie ergibt
   davor keinen Sinn, weil es keine zwei Spalten gibt.

   Die 1025px sind bewusst an Elementors Tablet-Breakpoint gekoppelt. Wird der
   in den Website-Einstellungen verschoben, muss dieser Wert mitwandern.
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
  .sbv-tl { padding-left: 0; }

  .sbv-tl::before {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    /* Oben und unten ausblenden, statt an festen Werten zu enden: Die Kreise
       sitzen jetzt auf halber Hoehe ihres Schritts, und wo genau das ist,
       haengt an der Textlaenge. Ein Verlauf trifft das immer. */
    background: linear-gradient(180deg,
      rgba(0, 194, 224, 0) 0%,
      var(--sbv-teal, #00C2E0) 8%,
      var(--sbv-orange, #FF952B) 62%,
      rgba(255, 149, 43, .12) 96%,
      rgba(255, 149, 43, 0) 100%);
  }

  .sbv-tl-step { margin-bottom: 56px; }

  /* Kreis mittig auf der Linie, auf halber Hoehe des Schritts. */
  .sbv-tl-num {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    box-shadow: 0 0 0 6px var(--sbv-cream, #FAFAF8);
  }

  /* Symmetrisch, damit die Mitte wirklich die Mitte ist: Der Container hat
     80px Abstand (Einstellung im Patch-Skript), also je Spalte die Haelfte
     davon abziehen. */
  .sbv-tl-media,
  .sbv-tl-body {
    flex: 0 0 calc(50% - 40px);
    max-width: calc(50% - 40px);
  }
}

/* ============================================================
   5c. 404-SEITE (404.php im Child-Theme, absichtlich ohne Elementor Pro)
   ============================================================ */
.sbv-404 {
  min-height: calc(100vh - var(--sbv-header-h) - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px 80px;
  text-align: center;
}

.sbv-404-inner { max-width: 620px; }

.sbv-404-buehne {
  position: relative;
  width: min(260px, 60vw);
  margin: 0 auto 28px;
}

.sbv-404-van {
  display: block;
  width: 100%;
  height: auto;
  /* Sanftes "Fahren": leichtes Nicken wie auf einer Landstrasse. */
  animation: sbv-404-fahrt 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* Strichlinie als Strasse; laeuft per Hintergrund-Animation unter dem Bus weg. */
.sbv-404-strasse {
  height: 4px;
  margin-top: -6px;
  background-image: repeating-linear-gradient(90deg,
    var(--sbv-charcoal, #1A1A18) 0 26px, transparent 26px 46px);
  border-radius: 2px;
  opacity: .35;
  animation: sbv-404-strasse 1.1s linear infinite;
}

@keyframes sbv-404-fahrt {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-.6deg) translateY(-1px); }
  60%      { transform: rotate(.5deg) translateY(0); }
}

@keyframes sbv-404-strasse {
  from { background-position-x: 0; }
  to   { background-position-x: -46px; }
}

@media (prefers-reduced-motion: reduce) {
  .sbv-404-van, .sbv-404-strasse { animation: none; }
}

.sbv-404-kicker {
  font-family: var(--sbv-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sbv-teal-deep, #006D80);
  margin-bottom: 10px;
}

.sbv-404-titel {
  font-family: var(--sbv-font-display);
  font-size: clamp(34px, 6vw, 52px);
  color: var(--sbv-charcoal, #1A1A18);
  margin-bottom: 18px;
}

.sbv-404-text {
  font-family: var(--sbv-font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #4A4A48;
  margin-bottom: 14px;
}

.sbv-404-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 26px 0 22px;
}

/* Buttons im Stil der Elementor-Buttons (sbv_btn), hier als schlichte Links --
   die .sbv-btn-Basisklasse aus Abschnitt 4 liefert Schrift und Radius. */
.sbv-404 .sbv-btn--primary {
  background: var(--sbv-orange, #FF952B);
  color: var(--sbv-charcoal, #1A1A18);
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
}
.sbv-404 .sbv-btn--primary:hover { background: #E07818; }

.sbv-404 .sbv-btn--outline {
  background: transparent;
  color: var(--sbv-charcoal, #1A1A18);
  border: 1px solid #D4D4D2;
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
}
.sbv-404 .sbv-btn--outline:hover { color: var(--sbv-teal-deep, #006D80); }

.sbv-404-hinweis {
  font-family: var(--sbv-font-body);
  font-size: 14px;
  color: #4A4A48;
}
.sbv-404-hinweis a { color: var(--sbv-teal-deep, #006D80); }

/* ============================================================
   6. SEKTIONS-BAUSTEINE
   ============================================================ */
/* Die Pillen-Optik sitzt ausschließlich am inneren Titel-Element (Abschnitt 7).
   Hier zusätzlich Rahmen/Hintergrund zu setzen ergab einen sichtbaren DOPPELTEN
   Rahmen — der Wrapper steuert nur noch den Abstand und die Schrift-Vererbung. */
.sbv-section-tag {
  margin-bottom: 20px;
  font-family: var(--sbv-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--sbv-teal-deep);   /* 6.0:1 auf teal-pale */
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sbv-section-title {
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.12;
}

.sbv-card {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--sbv-gray-100);
  border-radius: var(--sbv-radius-xl);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.sbv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0, 194, 224, .12), 0 4px 16px rgba(0, 0, 0, .06);
}

/* ============================================================
   7. WIDGET-KLASSEN (aus den Build-Skripten gesetzt)
   Nur Feinschliff, den Elementor nicht als Setting anbietet.
   ============================================================ */

/* Hero-Badge: Pille mit Punkt im CI-Verlauf */
.sbv-hero-badge .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sbv-white);
  border: 1px solid var(--sbv-gray-100);
  border-radius: var(--sbv-radius-pill);
  padding: 6px 16px 6px 8px;
  box-shadow: 0 2px 12px rgba(0, 194, 224, .12);
}
.sbv-hero-badge .elementor-heading-title::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sbv-gradient-accent);
  flex-shrink: 0;
}

/* H1-Akzentzeile */
.sbv-accent { color: var(--sbv-teal-dark); }

/* Section-Tag als Pille */
.sbv-section-tag .elementor-heading-title {
  display: inline-block;
  background: var(--sbv-teal-pale);
  border: 1px solid rgba(0, 194, 224, .2);
  border-radius: var(--sbv-radius-pill);
  padding: 5px 14px;
}

.sbv-hero-img img { border-radius: var(--sbv-radius-xl) 0 0 var(--sbv-radius-xl); }
.sbv-round-img img { border-radius: var(--sbv-radius-xl); }
.sbv-team-img img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

/* Modellkarten: Bild randlos oben, Karte hebt beim Hover */
.sbv-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Feature-Liste in den Modellkarten */
.sbv-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sbv-feat-list li {
  font-family: var(--sbv-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--sbv-gray-700);
  background: var(--sbv-gray-50);
  border-radius: var(--sbv-radius-pill);
  padding: 4px 10px;
}

/* ============================================================
   KONFIGURATOR (Plugin „Fahrzeug-Konfigurator", Container .vc-app)
   ============================================================ */

/* Der Website-Header ist fixed und 84px hoch. Ohne diesen Offset klebt die
   Preisübersicht des Konfigurators beim Scrollen dahinter. Die Variable wird
   vom Plugin ab 2.0.2 ausgewertet (Standard wäre 1rem). */
.vc-app {
  --vc-sticky-top: 100px;
}

/* Badge-Pille auf den Modellseiten (Bestseller, 4×4, Kompakt) */
.sbv-badge-pill .elementor-heading-title {
  display: inline-block;
  background: var(--sbv-gradient-accent);
  border-radius: var(--sbv-radius-pill);
  padding: 5px 14px;
}

/* Datentabellen (Technik, Optionen) -- echte <table>, weil es Tabellendaten sind */
.sbv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sbv-font-body);
  font-size: 14px;
}
.sbv-table th,
.sbv-table td {
  text-align: left;
  padding: 11px 4px;
  border-bottom: 1px solid var(--sbv-gray-100);
  vertical-align: top;
}
.sbv-table tbody th {
  font-weight: 500;
  color: var(--sbv-gray-700);
  width: 42%;
}
.sbv-table td {
  font-weight: 400;
  color: var(--sbv-charcoal);
}
.sbv-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sbv-teal-deep);
  border-bottom: 1px solid var(--sbv-gray-200);
}
.sbv-table--opt tbody th { width: 66%; font-weight: 400; color: var(--sbv-charcoal); }
.sbv-table .sbv-opt-p {
  text-align: right;
  font-weight: 600;
  color: var(--sbv-teal-deep);
  white-space: nowrap;
}
.sbv-opt-fn {
  font-family: var(--sbv-font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--sbv-gray-700);
  margin-top: 14px;
}

/* Häkchen-Liste ("Unser Anspruch") */
.sbv-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbv-check-list li {
  position: relative;
  font-family: var(--sbv-font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--sbv-gray-700);
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--sbv-gray-100);
}
.sbv-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sbv-gradient-accent);
}

/* Kontaktblock auf der Kontaktseite (gleiche Bausteine wie im Footer, helle Flaeche) */
.sbv-kontakt-block .sbv-fc-label {
  font-family: var(--sbv-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sbv-teal-deep);
  margin: 0 0 4px;
}
.sbv-kontakt-block .sbv-fc-val {
  font-family: var(--sbv-font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--sbv-gray-700);
  line-height: 1.6;
  margin: 0 0 18px;
}
.sbv-kontakt-block .sbv-fc-val a {
  color: var(--sbv-gray-700);
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}
.sbv-kontakt-block .sbv-fc-val a:hover { color: var(--sbv-teal-deep); }

/* Bildunterschriften in den Modell-Galerien */
.sbv-round-img figcaption {
  font-family: var(--sbv-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--sbv-gray-700);
  text-align: left;
  padding-top: 6px;
}

/* Schritt-Nummer als Kreis im CI-Verlauf */
.sbv-step-num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sbv-gradient-accent);
}