/* =========================================================
   RETHEME 2026 v2 — „Academy-Prinzip, FahrPuls-Grün"
   Barlow Condensed (Überschriften + Navigation, 700 / 800 Italic) +
   Inter (Fließtext, Buttons, Formulare).
   Farben: die Marken-Töne des Bestands bleiben unverändert. Aus der
   Tannengrün-Palette werden nur noch Salbei und Mint verwendet — und
   zwar ausschließlich für Trennlinien, nicht für Schrift oder Flächen.
   Liegt bewusst als letzte Schicht: überschreibt das
   Alt-System per Kaskade, ohne es zu zerlegen.
   ========================================================= */

/* ---- Webfonts, lokal gehostet (nur benötigte Schnitte) ---- */
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  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:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-800italic-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-800italic-latin.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
  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';
  src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  font-weight:100 459;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400-latin.woff2') format('woff2');
  font-weight:100 459;font-style:normal;font-display:swap;
  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';
  src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  font-weight:460 659;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-600-latin.woff2') format('woff2');
  font-weight:460 659;font-style:normal;font-display:swap;
  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';
  src:url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  font-weight:660 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-700-latin.woff2') format('woff2');
  font-weight:660 900;font-style:normal;font-display:swap;
  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;
}

/* ---- Alias-Familien: Alt-Namen im Bestand rendern die neuen Schnitte ---- */
@font-face{font-family:'Oswald';src:url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Oswald';src:url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');font-weight:100 459;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-400-latin.woff2') format('woff2');font-weight:100 459;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');font-weight:460 659;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-600-latin.woff2') format('woff2');font-weight:460 659;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-700-latin-ext.woff2') format('woff2');font-weight:660 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Barlow';src:url('../fonts/inter-700-latin.woff2') format('woff2');font-weight:660 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');font-weight:100 459;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-400-latin.woff2') format('woff2');font-weight:100 459;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-600-latin-ext.woff2') format('woff2');font-weight:460 659;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-600-latin.woff2') format('woff2');font-weight:460 659;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-700-latin-ext.woff2') format('woff2');font-weight:660 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/inter-700-latin.woff2') format('woff2');font-weight:660 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}

/* =========================================================
   TOKEN-SCHICHT
   ========================================================= */
:root{
  /* Schriften */
  --display:'Barlow Condensed','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'Inter',system-ui,sans-serif;
  --green-bright:#2BC186;

  /* Aus der Tannengrün-Palette nur die beiden hellen Töne — als Linienfarben. */
  --sage:#8EB69B;
  --mint:#DAF1DE;

  /* Die Palette trägt Schrift, Akzente und Linien — NICHT die Flächen.
     Die hellen Apple-Hintergründe (--paper, --paper-2, Weiß) bleiben
     unangetastet; ebenso die dunklen Bänder in --ink. */
  --rule:#8EB69B;              /* Trennlinien zwischen Rubriken */
  --rule-soft:#DAF1DE;         /* feine Innenlinien */
}

body{font-optical-sizing:auto;-webkit-font-smoothing:antialiased}

/* =========================================================
   TYPOGRAFIE — Academy-Prinzip
   Kondensierte, kräftige Überschriften; ruhiger Fließtext.
   ========================================================= */

/* ---- Fließtext: Inter, 18 px, luftige Zeile ---- */
body{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
}

/* ---- Überschriften: Barlow Condensed, aufrecht, Bold ---- */
h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--display);
  text-transform:none !important;
  letter-spacing:0;
  font-weight:700;
}
.h1,.hero .h1{
  font-size:clamp(2.5rem, 5.4vw, 4.75rem);         /* 40 → 76 px */
  line-height:1.02;
}
.h2,h2[class],section h2{
  font-size:clamp(2rem, 3.6vw, 3.25rem);           /* 32 → 52 px */
  line-height:1.06;
}
h1.h2{font-size:clamp(2.2rem, 4vw, 3.6rem)}
h3,.h3,h3[class]{
  font-size:clamp(1.5rem, 2.2vw, 2rem);            /* 24 → 32 px */
  line-height:1.15;
  font-weight:700;
}
/* Akzent-Spans in Überschriften erben die Condensed, fallen nicht auf Inter zurück */
.h1 .serif,.h2 .serif,.h3 .serif,h1 .serif,h2 .serif{font-family:inherit;font-style:inherit}
.serif{font-style:normal}

/* ---- Hero: versal, kursiv, ExtraBold — die kurze Werbeaussage ---- */
.hero .h1,.hero h1{
  font-weight:800;
  font-style:italic;
  text-transform:uppercase !important;
  line-height:.94;
  letter-spacing:.01em;
  font-size:clamp(2.5rem, 5.4vw, 4.75rem);         /* 40 → 76 px */
}

/* ---- Marquee-Band: kurze Claims im Hero-Duktus ---- */
.marquee-track{
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ---- Eyebrow: Inter, Puls-Blip als Marken-Signatur ---- */
.eyebrow{
  font-family:var(--sans);
  text-transform:none;
  letter-spacing:0;
  font-size:.9375rem;
  font-weight:600;
  color:var(--green-deep);
  gap:9px;
}
.eyebrow .idx,.eyebrow .slash{display:none}
/* Die Rubrik traegt jetzt einen Hashtag, keinen Strich mehr.
   Die beiden Striche links und rechts sind auf Wunsch entfallen. */
.eyebrow::before{content:none}

/* ---- Buttons & Navigation: Inter, satter Kontrast ---- */
.btn,a.more,.more-link{
  font-family:var(--sans);
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:700;
  font-size:16px;
}
.btn-primary{background:var(--green);color:var(--ink)}
.btn-primary:hover{
  background:var(--green-bright);
  color:var(--ink);
  box-shadow:0 6px 22px var(--green-glow);
}
.btn svg{stroke-width:2}
/* Hauptnavigation in der Schrift der Hero-Zeile: Barlow Condensed, versal.
   Condensed baut schmaler, deshalb etwas groesser gesetzt als Inter und mit
   Laufweite, damit Versalien nicht kleben. */
.nav a,.nav-link{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.045em;
  font-weight:700;
  font-size:19px;
  white-space:nowrap;   /* „Über uns" sonst zweizeilig */
}
@media (max-width:1320px){
  .nav a,.nav-link{font-size:17px;letter-spacing:.03em}
}

/* ---- Formulare: Inter ---- */
input,select,textarea,button{font-family:var(--sans)}

/* ---- Tabellen: tabellarische Ziffern ---- */
table,td,th,.bkf-stat-num,.stat-num{
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---- Topbar: Inter, klein und ruhig ---- */
.topbar{font-family:var(--sans);font-size:12.5px}
.topbar *{letter-spacing:.02em}

/* ---- Feinschliff ---- */
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Ruhige Übergänge auf Bedienelementen — dieselbe Kurve, kürzer. */
.btn,.nav a,.klasse-card,.fk-card,.foot-social a,.social-rail a{
  transition:color 240ms cubic-bezier(0.16,1,0.3,1),
             background-color 240ms cubic-bezier(0.16,1,0.3,1),
             border-color 240ms cubic-bezier(0.16,1,0.3,1),
             transform 240ms cubic-bezier(0.16,1,0.3,1),
             box-shadow 240ms cubic-bezier(0.16,1,0.3,1);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{transform:none}
}

/* =========================================================
   TANNENGRÜN — Schrift, Akzente, Linien
   Die Flächen bleiben im hellen Apple-Look. Die Palette
   arbeitet ausschließlich auf Typografie, Akzenten und
   Trennlinien: getestet auf ≥7,4:1 gegen alle hellen Gründe.
   ========================================================= */

/* ---- Rubriken: jeder Abschnitt bekennt sich als eigene Rubrik ----
   Der Kicker wird links und rechts von einem Strich gefasst. Beide sind
   identisch: gleiche Länge, gleiche Höhe, gleiche Farbe, gleiche Rundung.
   Salbei (--rule) bleibt den Flächentrennern vorbehalten — auf Weiss ist
   es zu blass, um einen solchen Strich zu tragen. */
.eyebrow{font-weight:700}
.eyebrow::after{content:none}

/* Haarlinie zwischen aufeinanderfolgenden Rubriken */
section + section{border-top:1px solid var(--rule-soft)}
.hero + section,section.final-cta,section.marquee{border-top:0}

/* ---- Trennlinien und Ränder ---- */
.trust-bar{border-color:var(--rule-soft)}
.foot-bottom{border-top-color:var(--rule-soft)}
.card,.ferien-card{border-color:var(--rule-soft)}

/* ---- Statistik-Zahlen: der tiefe Ton trägt die Kennzahl ---- */
.stat-num,.bkf-stat-num{color:var(--green)}

/* =========================================================
   HERO-VIDEO — Imagevideo als Hintergrund
   Die Auflage deckt nur die linke Hälfte, wo der Text steht
   (Text endet bei 57 %, rechte Spalte beginnt bei 61 %).
   Rechts bleibt das Video frei sichtbar — kein Milchglas.
   ========================================================= */
/* Hintergrund wie bei Apple: nur Weiß und sehr helles Grau, keine farbigen
   Schleier. Die beiden grünen Radialverläufe des Alt-Systems sind hier
   überschrieben. */
.hero{
  min-height:min(78vh,760px);
  display:flex;align-items:center;
  background:var(--paper);
}
.hero .wrap{align-items:center;width:100%}
.hero-side{align-items:stretch}
.hero-side > *{width:100%;max-width:none}
@media (min-width:1041px){
  .hero-side{padding-right:18px}
}

.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;
}

/* Der Übergang lief vorher über nur fünf Stützpunkte — der Sprung von 84 %
   auf 28 % ergab eine sichtbare Kante quer durchs Bild. Viele enge Stopps
   bilden stattdessen eine weiche Kurve, die kein Auge als Linie liest. */
.hero-overlay{
  position:absolute;inset:0;
  z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgb(245 245 247 / 98%) 0%,
    rgb(245 245 247 / 97%) 30%,
    rgb(245 245 247 / 95%) 42%,
    rgb(245 245 247 / 92%) 50%,
    rgb(245 245 247 / 87%) 56%,
    rgb(245 245 247 / 79%) 61%,
    rgb(245 245 247 / 68%) 66%,
    rgb(245 245 247 / 55%) 71%,
    rgb(245 245 247 / 41%) 76%,
    rgb(245 245 247 / 27%) 81%,
    rgb(245 245 247 / 15%) 86%,
    rgb(245 245 247 / 6%) 92%,
    rgb(245 245 247 / 0%) 100%);
}



/* Anhalten/Abspielen — ein Dauerloop ohne Ausstieg wäre eine Zumutung */
.hero-film-toggle{
  position:absolute;
  right:20px;bottom:20px;
  z-index:3;
  display:grid;place-items:center;
  width:40px;height:40px;
  padding:0;
  color:var(--ink);
  background:rgb(255 255 255 / 78%);
  border:0;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:opacity 220ms cubic-bezier(0.16,1,0.3,1), background 160ms ease;
}
.hero:hover .hero-film-toggle,
.hero-film-toggle:focus-visible{opacity:1}
.hero-film-toggle:hover{background:#fff}
.hero-film-toggle svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  .hero-film-toggle{opacity:1}
}

/* Schmale Displays: der Text läuft über die volle Breite, deshalb deckt
   die Auflage hier senkrecht — oben bleibt das Video am besten sichtbar. */
@media (max-width:1040px){
  .hero{min-height:0}
  .hero-overlay{
    background:linear-gradient(180deg,
      rgb(245 245 247 / 60%) 0%,
      rgb(245 245 247 / 70%) 10%,
      rgb(245 245 247 / 80%) 17%,
      rgb(245 245 247 / 88%) 24%,
      rgb(245 245 247 / 93%) 32%,
      rgb(245 245 247 / 96%) 45%,
      rgb(245 245 247 / 97%) 100%);
  }
  .hero-film-toggle{opacity:1;right:14px;bottom:14px}
}

/* =========================================================
   BESTAND — bewährte Korrekturen aus v1
   ========================================================= */

/* ---- Howto: Schritte-Sektion (Startseite) ---- */
.howto-track{position:relative}
.howto-track .howto-grid{padding-top:8px}
.howto .step-num{
  display:inline-grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  letter-spacing:0;
}
.howto .step:nth-child(3) .step-num{background:var(--green);color:var(--ink)}


/* ---- Topbar: atmen lassen statt clippen ---- */
.topbar .wrap{height:auto;min-height:42px;padding-block:3px}
.topbar .side a,.topbar .side span{white-space:nowrap}
@media (max-width:560px){
  .topbar{font-size:11.5px}
  .topbar .side{gap:14px}
}
@media (max-width:700px){
  .topbar ul{display:none}
}

/* ---- Footer-Ortsliste: auf schmalen Displays umbrechen ----
   Ein Skript setzt --orte-cols:4 und --orte-span:2 als Inline-Style auf
   :root. Das gilt dort auch für Handys und schiebt die Ortsliste über den
   Bildschirmrand hinaus. Inline schlägt jede Regel, deshalb !important. */
@media (max-width:760px){
  :root{--orte-cols:2 !important;--orte-span:1 !important}
}
@media (max-width:420px){
  :root{--orte-cols:1 !important}
}

/* =========================================================
   VERTRAUENS-KARTEN IM HERO — AZAV-Siegel und Google-Bewertung
   Beide Karten treten als Paar auf: gleiche Breite, gleiche
   Rundung, gleiche Schattenfamilie. Die Google-Karte trägt
   bewusst Googles eigene Farben — das Logo und das Sternengold
   sind der Wiedererkennungswert, den die Markenfarbe hier nicht
   ersetzen kann.
   Die Regeln stehen absichtlich mit .hero-side davor: die
   Basisregeln liegen in einem Inline-<style> NACH dieser Datei
   und gewinnen sonst bei gleicher Spezifität.
   ========================================================= */

:root{
  --google-gold:#F4B400;
  --google-blue:#4285F4;
}

/* Die Karten stehen unter den Buttons in der Textspalte, nebeneinander.
   Vorher schwebten sie frei in der rechten Spalte mitten über dem Video und
   deckten das Motiv ab. Jetzt gehören sie sichtbar zum Text, und die rechte
   Bildhälfte bleibt frei. */
.hero .hero-side{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:14px;
  margin-top:30px;
  max-width:660px;
}

/* ---- Gemeinsame Kartenform ---- */
.hero-side .azav-badge,
.hero-side .review-pill{
  width:100%;
  max-width:none;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(14,17,21,.04), 0 8px 24px -12px rgba(14,17,21,.18);
  transition:transform 240ms cubic-bezier(0.16,1,0.3,1),
             box-shadow 240ms cubic-bezier(0.16,1,0.3,1);
}

/* ---- Google-Bewertungen: die auffällige Karte ---- */
.hero-side .review-pill{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  text-decoration:none;
  color:inherit;
}
.hero-side a.review-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(14,17,21,.05), 0 18px 40px -16px rgba(66,133,244,.42);
  border-color:#D6E4FD;
}
.hero-side a.review-pill:focus-visible{
  outline:2px solid var(--google-blue);
  outline-offset:3px;
}

/* Das Google-G bekommt eine eigene Fläche, damit es als Marke liest */
.hero-side .review-pill .g-mark{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:14px;
  background:var(--paper-2,#F5F5F7);
  flex:none;
}
.hero-side .review-pill .g-mark svg{width:25px;height:25px;display:block}

.hero-side .review-pill .g-body{min-width:0}

/* Note und Sterne stehen in einer Zeile, die Note führt */
.hero-side .review-pill .g-top{
  display:flex;align-items:center;gap:9px;
  line-height:1;
}
.hero-side .review-pill .num{
  font-family:var(--display);
  font-weight:800;
  font-size:30px;
  letter-spacing:-.01em;
  color:var(--ink,#0E1115);
  line-height:1;
}
.hero-side .review-pill .stars{display:flex;gap:2px;color:var(--google-gold)}
.hero-side .review-pill .stars svg{width:16px;height:16px;display:block}

.hero-side .review-pill .lbl{
  display:block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.35;
  color:var(--text-2);
}
.hero-side .review-pill .lbl b{
  color:var(--text);
  font-weight:600;
}
/* Der Pfeil rückt beim Überfahren nach — kleine Einladung zum Klick */
.hero-side .review-pill .lbl .arrow{
  display:inline-block;
  transition:transform 240ms cubic-bezier(0.16,1,0.3,1);
}
.hero-side a.review-pill:hover .lbl .arrow{transform:translateX(3px)}

/* ---- AZAV: ruhiger, aber gleichwertig ---- */
.hero-side .azav-badge{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-color:var(--green-tint,#DAF1DE);
}
/* Das Siegel ist ein Querformat (359 x 181). Als Quadrat gezwungen
   schrumpft es auf halbe Höhe und die Schrift darin wird unlesbar —
   deshalb Breite vorgeben und die Höhe folgen lassen. */
.hero-side .azav-badge img{
  width:82px;height:auto;
  object-fit:contain;
  flex:none;
  padding:0;
  border-radius:8px;
  background:#fff;
}
.hero-side .azav-badge .t{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink,#0E1115);
}
.hero-side .azav-badge .s{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:7px;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.4;
  color:var(--text-2);
}
.hero-side .azav-badge .s svg{
  width:14px;height:14px;
  flex:none;
  margin-top:1px;
  color:var(--green);
}

@media (prefers-reduced-motion:reduce){
  .hero-side .azav-badge,
  .hero-side .review-pill,
  .hero-side .review-pill .lbl .arrow{transition:none}
  .hero-side a.review-pill:hover{transform:none}
}

/* Unter 720 px reicht die Breite nicht mehr für zwei Karten nebeneinander */
@media (max-width:720px){
  .hero .hero-side{grid-template-columns:1fr;max-width:none}
}

/* =========================================================
   BEWERTUNGSKARTEN — echte Google-Rezensionen
   Die Karte führt mit dem Zitat, nicht mit dem Namen: der Satz
   ist das Argument, die Person die Beglaubigung. Google-Logo und
   Sternengold bleiben in Googles Farben, damit die Herkunft ohne
   Erklärung lesbar ist.
   ========================================================= */

.reviews-band .rev07-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:32px;
}

.reviews-band .rev07-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(14,17,21,.04), 0 8px 24px -14px rgba(14,17,21,.16);
  transition:transform 240ms cubic-bezier(0.16,1,0.3,1),
             box-shadow 240ms cubic-bezier(0.16,1,0.3,1);
}
.reviews-band .rev07-card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(14,17,21,.05), 0 18px 40px -18px rgba(14,17,21,.28);
}

.reviews-band .rev07-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.reviews-band .rev07-g{width:20px;height:20px;flex:none;display:block}
.reviews-band .rev07-stars{display:flex;gap:1px;color:var(--google-gold)}
.reviews-band .rev07-stars svg{width:15px;height:15px;display:block}

/* Das Zitat trägt die Karte — etwas grösser als Fliesstext, ruhig gesetzt */
.reviews-band .rev07-quote{
  margin:0;
  flex:1;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--text);
  letter-spacing:-.005em;
}
.reviews-band .rev07-quote::before{content:"„"}
.reviews-band .rev07-quote::after{content:"“"}

.reviews-band .rev07-author{
  display:flex;
  align-items:center;
  gap:11px;
  padding-top:16px;
  border-top:1px solid var(--rule-soft);
}
.reviews-band .rev07-avatar{
  width:34px;height:34px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  line-height:1;
}
.reviews-band .rev07-author-name{
  font-family:var(--sans);
  font-weight:600;
  font-size:14.5px;
  color:var(--text);
}

/* Abschluss-Zeile unter dem Raster */
.reviews-band .rev07-foot{
  display:flex;
  justify-content:center;
  margin-top:32px;
}
.reviews-band .rev07-foot .rev07-google-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:#fff;
  font-family:var(--sans);
  font-weight:600;
  font-size:14.5px;
  color:var(--text);
  text-decoration:none;
  transition:transform 240ms cubic-bezier(0.16,1,0.3,1),
             box-shadow 240ms cubic-bezier(0.16,1,0.3,1),
             border-color 240ms ease;
}
.reviews-band .rev07-foot .rev07-google-btn:hover{
  transform:translateY(-2px);
  border-color:#D6E4FD;
  box-shadow:0 14px 32px -18px rgba(66,133,244,.5);
}
.reviews-band .rev07-foot .rev07-google-btn .rev07-g{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .reviews-band .rev07-card,
  .reviews-band .rev07-foot .rev07-google-btn{transition:none}
  .reviews-band .rev07-card:hover,
  .reviews-band .rev07-foot .rev07-google-btn:hover{transform:none}
}

/* =========================================================
   SIMULATORBILD IN SZENE SETZEN
   Das Motiv ist ein Produktfoto auf fast weissem Grund und steht auf
   einer fast weissen Seite — es hatte nichts, wogegen es sich abheben
   konnte. Drei Eingriffe, alle zurückhaltend:
   1. etwas mehr Kontrast und Sättigung, damit das schwarze Rig und die
      farbigen Lichtleisten wieder Substanz bekommen,
   2. der Schein darunter wird zum echten Bodenschatten — vorher war er
      orange, eine Farbe, die auf dieser Seite sonst nirgends vorkommt,
   3. beim Heranscrollen fährt das Bild sanft heran statt still zu stehen.
   Die weiche Maske links und der full-bleed nach rechts bleiben, wie sie
   waren. Kein Rahmen, kein Farb-Overlay über dem Motiv.
   ========================================================= */

.simulator .sim-media img{
  filter:contrast(1.07) saturate(1.1);
  /* Der Bildausschnitt rückt eine Spur nach links: dort sitzt das
     Cockpit, das dem Rig seine Tiefe gibt. */
  object-position:66% 50%;
}

/* Bodenschatten statt Orange-Schein */
.simulator .sim-img::after{
  height:132px;
  margin-top:-6px;
  background:
    radial-gradient(ellipse 34% 62% at 50% 0%,
      rgba(14,17,21,.20) 0%,
      rgba(14,17,21,.09) 44%,
      rgba(14,17,21,0) 74%),
    radial-gradient(ellipse 62% 88% at 54% 6%,
      rgba(31,169,113,.10) 0%,
      rgba(31,169,113,.035) 50%,
      rgba(31,169,113,0) 78%);
}

/* Mehr Höhe für das Motiv: 5:2 liess das Rig flach und klein wirken.
   Bei 9:4 wächst es spürbar, ohne dass links die Cockpit-Nase oder
   rechts die Sitzlehne beschnitten wird — das Rig liegt im Bild
   zwischen 13 % und 81 % der Breite, sichtbar bleiben rund 83 %. */
@media (min-width:1041px){
  .simulator .sim-media{aspect-ratio:9/4}
  .simulator .sim-media img{object-position:52% 50%}
}

/* Auf schmalen Schirmen war die Totale nur noch 137 px hoch — das Rig
   verschwand darin. Dort zeigen wir deshalb einen engeren Ausschnitt:
   Monitorwand und Fahrerin am Steuer, also das, was die Szene erzählt.
   Die Person sitzt im Bild bei rund 73 % der Breite. */
@media (max-width:720px){
  .simulator .sim-media{aspect-ratio:3/2}
  .simulator .sim-media img{object-position:73% 50%}
  .simulator .sim-img::after{height:96px}
}

/* =========================================================
   ABSCHLUSS-CTA MIT MOTIV (nur Startseite)
   Die Box wird zum Dreiklang: Text, Handlungsknöpfe, Motiv.
   Das Bild läuft nach rechts bis an die Kante der Box und blendet
   nach links weich aus — dasselbe Prinzip wie beim Simulatorbild,
   nur innerhalb der Rundung.
   Das Motiv sieht aus wie eine Schaltfläche, also ist es auch eine:
   es führt zur Anmeldung. Sonst wäre es eine Attrappe.
   ========================================================= */

.final-cta-inner.has-media{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  grid-template-areas:
    "text  motiv"
    "tasten motiv";
  align-items:center;
  gap:26px 44px;
  padding-right:0;
  overflow:hidden;
}
.final-cta-inner.has-media .final-cta-copy{grid-area:text;align-self:end}
.final-cta-inner.has-media .final-cta-actions{grid-area:tasten;align-self:start}
.final-cta-inner.has-media .final-cta-media{grid-area:motiv}

.final-cta-media{
  position:relative;
  display:block;
  align-self:stretch;
  min-height:100%;
  margin:-52px 0;               /* frisst die Innenabstände der Box */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 44%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 44%);
}
.final-cta-media img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:56% 50%;
  transition:transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.final-cta-media:hover img{transform:scale(1.03)}
.final-cta-media:focus-visible{outline:2px solid var(--green);outline-offset:-4px}

/* Unter 900 px steht das Motiv über dem Text, sonst wird beides zu schmal */
@media (max-width:900px){
  .final-cta-inner.has-media{
    grid-template-columns:1fr;
    grid-template-areas:"motiv" "text" "tasten";
    gap:22px;
    padding-right:56px;
  }
  .final-cta-inner.has-media .final-cta-copy,
  .final-cta-inner.has-media .final-cta-actions{align-self:auto}
  .final-cta-media{
    margin:-52px -56px 4px;
    aspect-ratio:16/7;
    min-height:0;
    -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .final-cta-media img{transition:none}
  .final-cta-media:hover img{transform:none}
}

/* Original reviews: native scrolling, stable source order and readable expansion. */
.reviews-band .rev07-grid[data-bewertungen]{
  --sichtbar:3;--luecke:20px;
  display:flex;gap:var(--luecke);max-width:none;
  overflow-x:auto;scroll-snap-type:x mandatory;align-items:flex-start;
  padding:6px 0 18px;scrollbar-width:thin;
  scrollbar-color:#b8c8c1 transparent;
}
.reviews-band .rev07-grid > .rev07-card{
  flex:0 0 calc((100% - (var(--sichtbar) - 1) * var(--luecke)) / var(--sichtbar));
  min-width:0;min-height:390px;scroll-snap-align:start;
  box-sizing:border-box;box-shadow:none;border:1px solid var(--rule-soft);border-radius:16px;
}
.reviews-band .rev07-card:hover{transform:none;box-shadow:none}
.reviews-band .rev07-card.is-readable{cursor:pointer}
.reviews-band .rev07-card.is-reading{cursor:text;border-color:var(--green-deep,#0f6e45)}
.reviews-band .rev07-quote{flex:none;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.reviews-band .rev07-quote::before,.reviews-band .rev07-quote::after{content:none}
.reviews-band .rev07-quote.is-collapsed{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.reviews-band .rev07-read-more{align-self:flex-start;border:0;padding:8px 0;min-height:40px;background:none;color:var(--green-deep,#0f6e45);font:600 14px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-top:-12px}
.reviews-band .rev07-read-more[hidden],.reviews-band .rev07-playback[hidden]{display:none}
.reviews-band .rev07-author{margin-top:auto;width:100%}
.reviews-band .rev07-author-info{display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}
.reviews-band .rev07-source{font-size:13px;line-height:1.5;color:#51585a;text-decoration:underline;text-underline-offset:3px}
.reviews-band .rev07-selection{font-size:15px;line-height:1.6;color:#51585a;margin:20px 0 22px}
.reviews-band .rev07-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.reviews-band .rev07-nav,.reviews-band .rev07-playback{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px;border:1px solid #d5d9d7;border-radius:50%;background:#fff;color:var(--green-deep,#0f6e45);cursor:pointer}
.reviews-band .rev07-nav{width:44px;flex:none}
.reviews-band .rev07-playback{border-radius:999px;padding-inline:15px;font:500 14px var(--sans)}
.reviews-band .rev07-nav:disabled{opacity:.35;cursor:default}
.reviews-band .rev07-nav:not(:disabled):hover,.reviews-band .rev07-playback:hover{background:#e8f4ee;border-color:var(--green)}
.reviews-band .rev07-position{min-width:94px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:#51585a}
.reviews-band :is(.rev07-grid,.rev07-nav,.rev07-playback,.rev07-read-more,.rev07-source):focus-visible{outline:2px solid var(--green-deep,#0f6e45);outline-offset:3px}
@media(max-width:1040px){.reviews-band .rev07-grid[data-bewertungen]{--sichtbar:2}}
@media(max-width:700px){
 .reviews-band .rev07-grid[data-bewertungen]{--sichtbar:1}
 .reviews-band .rev07-title span{white-space:normal}
 .reviews-band .rev07-grid > .rev07-card{padding:24px;min-height:390px}
 .reviews-band .rev07-controls{gap:8px}
}

/* Profilbild aus dem Google-Konto; ohne Bild bleibt die Initiale */
.reviews-band .rev07-avatar.hat-bild{background:none;padding:0;overflow:hidden}
.reviews-band .rev07-avatar img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  .reviews-band .rev07-card .rev07-quote,
  .reviews-band .rev07-card .rev07-author{transition:none}
}

/* ---- Instagram: Beiträge von Bestandenen ---- */
.insta-bestanden[hidden]{display:none}
.insta-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:28px;
}
.insta-kachel{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  background:var(--paper-2,#F5F5F7);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(14,17,21,.04), 0 8px 24px -14px rgba(14,17,21,.16);
  transition:transform 240ms cubic-bezier(0.16,1,0.3,1),
             box-shadow 240ms cubic-bezier(0.16,1,0.3,1),
             opacity 420ms cubic-bezier(0.16,1,0.3,1);
}
.insta-kachel:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(14,17,21,.05), 0 18px 40px -18px rgba(14,17,21,.28)}
.insta-kachel.wechselt{opacity:0}
.insta-kachel img{width:100%;height:100%;object-fit:cover;display:block}
.insta-kachel-tag{
  position:absolute;left:12px;bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  font-family:var(--sans);
  font-weight:600;
  font-size:12.5px;
  color:var(--text);
  backdrop-filter:blur(6px);
}
@media (prefers-reduced-motion:reduce){
  .insta-kachel{transition:none}
  .insta-kachel:hover{transform:none}
}

/* =========================================================
   FERIENKURS-MOTIVE
   Jede Ferienzeit bekommt ihr Bild — aber eingearbeitet, nicht
   aufgesetzt: Das Motiv sitzt bündig an der Kartenkante und blendet
   nach unten in die weisse Karte aus. Dasselbe Prinzip wie beim
   Abschluss-CTA, nur senkrecht.
   ========================================================= */

.fk-card{position:relative;overflow:hidden}

.fk-media{
  margin:-32px -30px 0;          /* frisst den Innenabstand der Karte */
  height:158px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
}
.fk-media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.fk-card:hover .fk-media img{transform:scale(1.04)}

/* Der Abstand zum Kartenkopf entsteht durch die ausblendende Kante,
   deshalb hier weniger als sonst. */
.fk-media + .fk-card-top{margin-top:-30px;position:relative;z-index:1}

/* ---- Hervorgehobene Karte: das Motiv liegt hinter dem Countdown ---- */
.fk-hero-media{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  z-index:0;
}
.fk-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Helle Auflage, damit die Zahl lesbar bleibt — der Rand bleibt offen,
   dort sieht man das Motiv klar. */
.fk-hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 68% at 50% 50%,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.78) 46%,
    rgba(255,255,255,.42) 78%,
    rgba(255,255,255,.22) 100%);
}
.fk-hero-aside > *:not(.fk-hero-media){position:relative;z-index:1}

@media (max-width:980px){
  .fk-media{height:132px}
}
@media (prefers-reduced-motion:reduce){
  .fk-media img{transition:none}
  .fk-card:hover .fk-media img{transform:none}
}

/* Der Countdown steht seit dem Ferienmotiv auf einem bunten, hellen Bild.
   Das Markengrün trägt dort zu wenig — die Zahl liest sich schlecht.
   Deshalb hier die dunkle Textfarbe: gleicher Auftritt, klar lesbar.
   Gilt nur in dieser Karte; überall sonst bleibt Grün. */
.fk-hero-aside .fk-count-num{color:var(--ink,#0E1115)}
.fk-hero-aside .fk-count-lbl,
.fk-hero-aside .fk-count-sub{color:var(--text-2)}

/* =========================================================
   KLASSEN — Bento statt sechs gleicher Kästen
   Sechs identische Karten geben keine Rangfolge her: Klasse B ist das
   Hauptgeschäft, sah aber aus wie alles andere. Jetzt trägt B die
   Fläche, die übrigen ordnen sich darum an.
   Reihenfolge im Markup: 1 B · 2 A · 3 C · 4 BKF · 5 BE · 6 Beratung
   ========================================================= */

@media (min-width:1041px){
  .klassen-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(210px,auto);
    gap:22px;
  }
  /* Klasse B: doppelt breit und doppelt hoch */
  .klassen-grid > :nth-child(1){grid-column:span 2;grid-row:span 2}
  /* A und C stehen rechts daneben, gestapelt */
  .klassen-grid > :nth-child(2),
  .klassen-grid > :nth-child(3){grid-column:3}
  /* BKF, BE und die Beratung bilden die Fußzeile */
  .klassen-grid > :nth-child(4),
  .klassen-grid > :nth-child(5),
  .klassen-grid > :nth-child(6){grid-column:span 1}

  /* Die grosse Karte darf grösser sprechen */
  .klassen-grid > :nth-child(1) h3{font-size:clamp(1.7rem,2.4vw,2.3rem)}
  .klassen-grid > :nth-child(1) .slogan{font-size:16.5px;max-width:42ch}
  .klassen-grid > :nth-child(1) .klasse-icon-wrap{width:300px;height:210px}

  /* Die kleinen Karten brauchen weniger Innenabstand, sonst wird der
     Text zur Wurst */
  .klassen-grid > :nth-child(n+2){padding:30px 32px 32px;min-height:0}
  .klassen-grid > :nth-child(n+2) h3{font-size:clamp(1.1rem,1.2vw,1.3rem)}
  .klassen-grid > :nth-child(n+2) .slogan{font-size:14px;line-height:1.5}
  .klassen-grid > :nth-child(n+2) .klasse-icon-wrap{width:132px;height:92px}
  .klassen-grid > :nth-child(n+2) .icon-link{right:24px;bottom:22px}
}

/* =========================================================
   UNTERSEITEN-KOPF — der Text bekommt die Breite, die frei steht
   Der Zweispalter im Hero stammt von der Startseite, wo rechts die
   Bewertungs- und die AZAV-Karte stehen. Auf den Unterseiten bleibt
   diese Spalte leer: die Überschrift bricht früher um, als sie müsste
   ("Berufskraftfahrer werden." auf zwei Zeilen), und rechts steht
   ein Drittel Leerraum.

   Also trägt der Text hier allein — und die Auflage reicht
   entsprechend weiter nach rechts, sonst stünde die letzte Zeile
   im freien Video ohne Kontrast.
   ========================================================= */
@media (min-width:1041px){
  .hero.hero-unterseite .wrap{grid-template-columns:minmax(0,780px)}

  .hero.hero-unterseite .hero-overlay{
    background:linear-gradient(100deg,
      rgb(245 245 247 / 98%) 0%,
      rgb(245 245 247 / 97%) 36%,
      rgb(245 245 247 / 95%) 50%,
      rgb(245 245 247 / 92%) 58%,
      rgb(245 245 247 / 87%) 64%,
      rgb(245 245 247 / 79%) 69%,
      rgb(245 245 247 / 68%) 74%,
      rgb(245 245 247 / 55%) 79%,
      rgb(245 245 247 / 41%) 84%,
      rgb(245 245 247 / 27%) 88%,
      rgb(245 245 247 / 15%) 92%,
      rgb(245 245 247 / 6%) 96%,
      rgb(245 245 247 / 0%) 100%);
  }

  /* Der Fliesstext bleibt in lesbarer Zeilenlaenge — nur die
     Ueberschrift soll die neue Breite wirklich ausnutzen. */
  .hero.hero-unterseite p.intro{max-width:56ch}
}

/* =========================================================
   KENNZAHLEN-BAND — auf schmalen Schirmen einspaltig
   Das Band stammt von der BKF-Seite, wo die Werte kurz sind
   ("AZAV", "IHK", "100 %"). Auf der Sicherheitstraining-Seite
   stehen dort ganze Woerter ("Bescheinigung", "Kleine Gruppen").
   In einer 139px-Zelle passen die nicht: sie haben die Seite bei
   375px auf 414px aufgeschoben — ein vorbestehender Fehler.

   repeat(2,1fr) heisst minmax(auto,1fr): die Spalte kann nicht
   unter ihre min-content-Breite. Deshalb minmax(0,1fr) — und
   unterhalb von 560px steht jede Kennzahl fuer sich.
   ========================================================= */
@media (max-width:800px){
  .bkf-stats-band .bkf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:559px){
  .bkf-stats-band .bkf-stats{grid-template-columns:minmax(0,1fr);gap:26px}
}
.bkf-stats-band .bkf-stat-num{overflow-wrap:break-word}

/* =========================================================
   ABLAUF-SCHRITTE — ein Motiv je Schritt
   Die vier Karten trugen bisher nur eine Nummernplakette: links
   dunkel, rechts leer. Jetzt sitzt in der freien Ecke ein Motiv,
   das auf einen Blick sagt, worum es geht — Klemmbrett, Buch,
   Lenkrad, Schluessel. Zurueckhaltend, damit die Zahl die
   Reihenfolge weiter allein traegt; beim Ueberfahren tritt es vor.
   Icons: Streamline Flex Line (Commercial-Lizenz).
   ========================================================= */
.howto .step-ico,
.bkf-step .step-ico,
.roadmap-step .step-ico,
.bkf-foerd-card .step-ico,
.st-arg .step-ico{
  position:absolute;
  top:34px;right:32px;
  width:34px;height:34px;
  color:var(--green-deep);
  opacity:.5;
  pointer-events:none;
  transition:opacity 320ms cubic-bezier(0.16,1,0.3,1),
             transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.howto .step-ico svg,
.bkf-step .step-ico svg,
.roadmap-step .step-ico svg,
.bkf-foerd-card .step-ico svg,
.st-arg .step-ico svg{width:100%;height:100%;display:block}
.howto .step:hover .step-ico,
.bkf-step:hover .step-ico,
.roadmap-step:hover .step-ico,
.bkf-foerd-card:hover .step-ico,
.st-arg:hover .step-ico{opacity:1;transform:translateY(-2px)}

/* Die dritte Karte traegt eine gruene Nummernplakette — dort wuerde
   ein gruenes Motiv die Karte einseitig machen. */
.howto .step:nth-child(3) .step-ico{color:var(--ink);opacity:.34}
.howto .step:nth-child(3):hover .step-ico{opacity:.7}

/* Die BKF-Karten sind knapper gepolstert (28/26 statt 36) */
.bkf-step .step-ico{top:26px;right:24px;width:30px;height:30px}

/* Diese drei Kartenarten setzen selbst keinen Bezugsrahmen — ohne
   position:relative wuerde das Motiv an der Seite kleben statt in der
   Karte. Die Werte folgen dem jeweiligen Innenabstand. */
.roadmap-step,
.bkf-foerd-card,
.st-arg{position:relative}
.bkf-foerd-card .step-ico{top:26px;right:26px;width:30px;height:30px}
.st-arg .step-ico{top:22px;right:18px;width:26px;height:26px}
.roadmap-step .step-ico{top:24px;right:24px;width:28px;height:28px}

/* Die Roadmap-Karte ist ein Raster: Nummer links, Text rechts ueber die
   volle Restbreite. Ohne reservierten Platz laeuft die Ueberschrift unter
   das Motiv — auf schmalen Schirmen bei jeder der fuenf Karten. */
.roadmap-step h3{padding-right:38px}

@media (prefers-reduced-motion:reduce){
  .howto .step-ico{transition:none}
  .howto .step:hover .step-ico{transform:none}
}
@media (max-width:700px){
  .howto .step-ico,
  .bkf-step .step-ico,
  .roadmap-step .step-ico,
  .bkf-foerd-card .step-ico,
  .st-arg .step-ico{width:26px;height:26px;top:24px;right:20px}
}