/* ============================================================
   089 Fahrschule — Stylesheet

   Bildet das Erscheinungsbild der bisherigen WordPress-Seite (Theme
   "uDrive" mit Elementor) nach: Farben, Schriften, Abstände und Bausteine
   wurden am 17.10.2026 auf 089-fahrschule.com gemessen. Die Farbwerte
   entsprechen FARBEN in site_config.py.

   Ohne Theme-Ballast: keine Icon-Schriften (Inline-SVG), keine
   Animationsbibliotheken, keine Slider-Bibliothek.
   ============================================================ */

/* ------------------------------------------------------------ Schriften
   Frueher eine eigene fonts.css — zusammengelegt, damit im kritischen Pfad
   nur noch ein Stylesheet blockiert (Audit 17.10.2026, TECH-4). */


@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/assets/fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/assets/fonts/lexend-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:400 700; font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/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;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/assets/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


:root{
  --rot:#E01C1D;
  --rot-2:#BF392B;
  --rot-hell:#E73648;
  --dunkel:#121113;
  --dunkel-2:#262427;
  --schwarz:#070707;
  --text:#74757B;
  --text-hell:#C3C4C8;
  --grau:#F3F3F3;
  --grau-2:#F9F9F9;
  --grau-3:#F5F5F5;
  --linie:#E7E7E7;
  /* #1E88D6 hatte nur 3,6:1 auf #F9F9F9 — für Linktext zu hell */
  --blau:#1668A8;
  --navy:#1B2F5B;
  --kopf:'Lexend','Montserrat',system-ui,sans-serif;
  --fliess:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:#fff; color:var(--text);
  font-family:var(--fliess); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist Pflicht: jedes <img> traegt width/height gegen CLS; wird
   die Breite per CSS beschnitten, bliebe sonst die Attributhoehe stehen und
   das Bild waere verzerrt. */
img{ max-width:100%; height:auto; display:block; }
picture{ display:block; }
a{ color:inherit; }
ul{ list-style:none; }
button{ font:inherit; }
h1,h2,h3,h4{
  font-family:var(--kopf); color:var(--dunkel); font-weight:600; line-height:1.27;
  /* Lange deutsche Komposita ("Führerscheinbewerber") passen sonst nicht in
     schmale Spalten und schieben die Seite seitlich. */
  overflow-wrap:break-word; hyphens:auto;
  /* nur lange Wörter trennen: "Führer-schein" oder "Mo-torrad" in einer
     Überschrift sieht nach Fehler aus, "Führerscheinbewerber" muss es */
  hyphenate-limit-chars:13 5 5; -webkit-hyphenate-limit-before:5; -webkit-hyphenate-limit-after:5;
}
:lang(ru) h1,:lang(ru) h2,:lang(uk) h1,:lang(uk) h2{ letter-spacing:-.01em; }
.ico{ width:1em; height:1em; fill:currentColor; flex:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 15px; }
.sec{ padding:100px 0; }
.sec-tight{ padding:60px 0; }
/* Preisauszug schließt an den Text davor an ("Die festen Posten im Überblick:") */
.sec + .sec-tight:not(.filiale-sec){ padding-top:0; }
/* Endet ein Textabschnitt mit einer Ueberschrift ("Kosten"), gehoert sie zum
   folgenden Abschnitt (Preistabelle) - ohne das stand sie 60-100px davor allein */
.sec:has(.prose > h2:last-child):has(+ .sec-tight){ padding-bottom:0; }
.nw{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--rot); color:#fff; padding:10px 16px; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--rot); outline-offset:2px; }

/* ---------------------------------------------------------- Knoepfe */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--rot); color:#fff; border:0; cursor:pointer;
  font-family:var(--kopf); font-size:14px; font-weight:600; line-height:26px;
  text-transform:uppercase; text-decoration:none; letter-spacing:.02em;
  padding:13px 40px; transition:background .2s;
}
.btn:hover{ background:var(--dunkel); }
.btn .ico{ font-size:16px; }
.btn-dark{ background:var(--dunkel); }
.btn-dark:hover{ background:var(--rot); }
.btn-outline{ background:transparent; border:2px solid rgba(255,255,255,.5); padding:11px 26px; }
.btn-outline:hover{ background:#fff; color:var(--dunkel); }
.btn-outline-dark{ background:transparent; color:var(--dunkel); border:2px solid var(--dunkel); padding:11px 26px; }
.btn-outline-dark:hover{ background:var(--dunkel); color:#fff; }
.btn-pill{ border-radius:30px; text-transform:none; font-family:var(--fliess); font-weight:700; font-size:17px; padding:14px 32px; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------- Abschnittstitel */
.sec-title{ margin-bottom:55px; }
.sec-title.centred{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--kopf); font-size:16px; font-weight:500; line-height:24px;
  /* #A7A7A7 der alten Seite hatte nur 2,4:1 auf Weiß (WCAG verlangt 4,5:1) */
  color:#767676; text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px;
}
/* der rote Schraegstrich vor der Dachzeile */
.eyebrow::before{ content:""; width:4px; height:14px; background:var(--rot); transform:skewX(-20deg); }
.sec-title h2,.sec-title h1{ font-size:44px; line-height:56px; }
.sec-title .sec-text{ max-width:900px; margin:14px auto 0; }
.sec-title:not(.centred) .sec-text{ margin-left:0; }
.sec-title.light h2{ color:#fff; }
.sec-title.light .eyebrow{ color:#fff; }

/* ---------------------------------------------------------- Leiste oben */
.topbar{
  background:var(--dunkel); color:#fff; font-size:16px; line-height:24px;
  position:relative; overflow:hidden;
}
/* die rot-blauen Streifen aus dem Logo, schraeg im Hintergrund */
.topbar::before{
  content:""; position:absolute; top:-40px; bottom:-40px; left:44%; width:90px;
  background:linear-gradient(90deg, rgba(224,28,29,.55) 0 22%, transparent 22% 45%, rgba(30,136,214,.55) 45% 100%);
  transform:skewX(-35deg); opacity:.35; pointer-events:none;
}
.topbar-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:30px; padding:27px 40px; }
.topbar ul{ display:flex; }
.topbar-info{ flex-direction:column; }
.topbar-info li,.topbar-kontakt li{ display:flex; align-items:center; gap:8px; }
.topbar .ico{ color:var(--rot); font-size:19px; }
.topbar-info strong{ text-transform:uppercase; font-weight:700; font-size:14px; letter-spacing:.02em; }
.topbar-kontakt{ gap:44px; align-items:center; }
.tb-label{ color:#95969B; text-transform:uppercase; font-family:var(--kopf); font-size:14px; font-weight:500; letter-spacing:.04em; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ color:var(--rot); }
.tb-social a .ico{ color:#fff; font-size:16px; }

/* ---------------------------------------------------------- Kopf */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  transition:box-shadow .2s;
}
.site-header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
.header-inner{ display:flex; align-items:center; gap:28px; height:101px; padding:0 40px 0 50px; }
.logo{ flex:none; display:block; margin:-10px 0; position:relative; z-index:2; }
/* Das Logo ragt wie auf der alten Seite oben und unten ueber den Kopf. */
.logo img{ width:355px; height:auto; }
.site-header.scrolled .logo img{ width:300px; }
.main-nav{ margin-left:auto; }
.main-nav > ul{ display:flex; align-items:center; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:35px 17px; font-family:var(--kopf); font-size:14px; font-weight:700;
  line-height:30px; text-transform:uppercase; color:var(--dunkel); text-decoration:none;
  position:relative;
}
/* Unterstrich von links, wie hvr-underline-from-left im Theme */
.main-nav > ul > li > a::after{
  content:""; position:absolute; left:17px; right:17px; bottom:28px; height:2px;
  background:var(--rot); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.main-nav > ul > li > a:hover::after,.main-nav > ul > li > a.active::after,
.main-nav > ul > li:focus-within > a::after{ transform:scaleX(1); }
.main-nav .sub{
  position:absolute; top:100%; left:0; min-width:260px; background:#fff;
  box-shadow:0 15px 40px rgba(0,0,0,.12); border-top:3px solid var(--rot);
  padding:10px 0; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.main-nav .has-sub:hover .sub,.main-nav .has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none; }
.main-nav .sub a{ display:block; padding:9px 22px; font-family:var(--kopf); font-size:15px; font-weight:500; color:var(--dunkel); text-decoration:none; }
.main-nav .sub a:hover,.main-nav .sub a[aria-current]{ color:var(--rot); }

.lang-switch{ position:relative; flex:none; }
.lang-switch summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-family:var(--kopf); font-size:14px; font-weight:700; color:var(--dunkel);
  padding:10px 12px; border-left:2px solid var(--dunkel);
}
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary .ico{ font-size:18px; }
.lang-switch .caret{ font-size:20px; transition:transform .2s; }
.lang-switch[open] .caret{ transform:rotate(180deg); }
.lang-switch ul{
  position:absolute; right:0; top:calc(100% + 18px); background:#fff; min-width:190px;
  box-shadow:0 15px 40px rgba(0,0,0,.12); border-top:3px solid var(--rot); padding:8px 0; z-index:60;
}
.lang-switch a{ display:flex; gap:12px; padding:9px 18px; text-decoration:none; color:var(--dunkel); font-size:15px; }
.lang-switch a:hover{ color:var(--rot); }
.lang-switch a[aria-current]{ color:var(--rot); font-weight:600; }
.lang-kurz{ font-family:var(--kopf); font-weight:700; width:24px; }

.menu-btn{
  display:none; width:44px; height:38px; background:var(--rot); border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; margin-left:auto;
}
.menu-btn span{ display:block; width:24px; height:2px; background:#fff; transition:transform .2s, opacity .2s; }
.menu-open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2){ opacity:0; }
.menu-open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; top:0; z-index:45; background:#fff; padding:150px 24px 40px;
  overflow-y:auto; display:none;
}
/* display:none statt visibility:hidden: ein unsichtbares, aber gelayoutetes
   Menue laedt seine Schriften mit — die kyrillischen Sprachnamen im
   Umschalter kosteten sonst auf jeder deutschen Seite rund 35 KB. */
.mobile-nav.open{ display:block; animation:menue-rein .3s ease-out; }
@keyframes menue-rein{ from{ transform:translateX(100%); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .mobile-nav.open{ animation:none; } }
.mobile-nav > ul > li > a{ display:block; padding:14px 0; border-bottom:1px solid var(--linie);
  font-family:var(--kopf); font-weight:700; font-size:17px; text-transform:uppercase; color:var(--dunkel); text-decoration:none; }
.mobile-nav ul ul a{ display:block; padding:9px 0 9px 18px; color:var(--text); text-decoration:none; font-size:15px; border-bottom:1px solid var(--grau); }
.mobile-nav .btn{ margin:26px 0 18px; width:100%; }
.lang-mobil{ display:flex; flex-wrap:wrap; gap:8px; }
.lang-mobil a{ flex:1 1 30%; text-align:center; border:1px solid var(--linie); padding:9px 6px; text-decoration:none; color:var(--dunkel); font-size:14px; }
.lang-mobil a[aria-current]{ border-color:var(--rot); color:var(--rot); }
.lang-mobil .lang-kurz{ display:block; width:auto; }

/* ---------------------------------------------------------- Slider */
.hero-slider{ position:relative; height:633px; background:var(--dunkel); overflow:hidden; }
.slides,.slide{ position:absolute; inset:0; }
.slide{ opacity:0; visibility:hidden; transition:opacity .9s, visibility .9s; display:flex; align-items:center; }
.slide.is-active{ opacity:1; visibility:visible; }
.slide picture{ position:absolute; inset:0; }
.slide-bg{ width:100%; height:100% !important; object-fit:cover; }
.slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.2) 100%); }
.slide-content{ position:relative; z-index:2; max-width:none; padding-left:50px; }
.slide-title{ font-family:var(--kopf); font-size:70px; line-height:80px; font-weight:600; color:#fff; max-width:640px; margin-bottom:19px; }
.slide-kicker{
  display:block; font-size:16px; line-height:24px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:#fff; margin-bottom:14px;
}
.slide-kicker::before{ content:""; display:inline-block; width:4px; height:14px; background:var(--rot); transform:skewX(-20deg); margin-right:12px; }
.slide-text{ color:#fff; max-width:600px; margin-bottom:33px; }
.slide.is-active .slide-title,.slide.is-active .slide-text,.slide.is-active .btn{ animation:einblenden .9s both; }
.slide.is-active .slide-text{ animation-delay:.15s; }
.slide.is-active .btn{ animation-delay:.3s; }
@keyframes einblenden{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .slide,.slide *{ animation:none !important; transition:none !important; } }
.slider-dots{ position:absolute; z-index:3; left:50px; bottom:24px; display:flex; gap:10px; }
/* sichtbar ein 4 px hoher Strich, tippbar 34 × 24 px (WCAG 2.5.8) */
.slider-dots button{ width:34px; height:24px; border:0; padding:10px 0; background:rgba(255,255,255,.45) content-box; cursor:pointer; }
.slider-dots button[aria-current]{ background:var(--rot) content-box; }
.slider-dots{ align-items:center; }
.slider-dots .slider-pause{ width:28px; height:28px; margin-left:10px; background:rgba(255,255,255,.18);
  border-radius:50%; display:flex; align-items:center; justify-content:center; }
.slider-dots .slider-pause[hidden]{ display:none; }
.slider-pause span{ width:8px; height:10px; border-left:3px solid #fff; border-right:3px solid #fff; }
.slider-pause.is-paused span{ width:0; height:0; border:0; border-left:9px solid #fff;
  border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:3px; }

/* ---------------------------------------------------------- Seitenkopf */
.page-hero{ position:relative; background:var(--dunkel); color:#fff; padding:110px 0 100px; overflow:hidden; text-align:center; }
.page-hero picture{ position:absolute; inset:0; }
.ph-bg{ width:100%; height:100% !important; object-fit:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; background:rgba(18,17,19,.72); }
.ph-inner{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:50px; line-height:1.2; max-width:920px; margin:12px auto 0; hyphens:manual; text-wrap:balance; }
.sec-title h2,.slide-title,.cta-band h2{ text-wrap:balance; }
/* Silbentrennung nur, wo die Spalte wirklich schmal ist */
@media (min-width: 768px){ h1,h2{ hyphens:manual; } }
.ph-lede{ max-width:760px; margin:18px auto 0; font-size:18px; line-height:1.6; color:#E6E6E8; }
.breadcrumb{ font-family:var(--kopf); font-size:15px; font-weight:500; color:#fff; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.breadcrumb a{ color:#fff; text-decoration:none; }
.breadcrumb a:hover{ color:var(--rot); }
.breadcrumb span[aria-hidden]{ color:var(--rot); }

/* ---------------------------------------------------------- Klassen */
.klassen .wrap{ max-width:1410px; }
.klassen-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.klasse-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  background:var(--dunkel-2); box-shadow:0 10px 40px rgba(0,0,0,.1); margin-top:14px;
}
.klasse-card picture{ aspect-ratio:370/410; overflow:hidden; }
.klasse-card picture img{ width:100%; height:100% !important; object-fit:cover; transition:transform .5s; }
.klasse-card:hover picture img{ transform:scale(1.05); }
.kc-icon{
  position:absolute; z-index:3; left:0; top:-14px; width:66px; height:66px; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.kc-icon img{ width:44px; height:44px; }
/* das rote Quadrat rechts oben am Icon */
.kc-icon::after{ content:""; position:absolute; right:-26px; top:0; width:26px; height:26px; background:var(--rot); }
.kc-body{
  position:absolute; left:0; right:0; bottom:40px; padding:110px 30px 30px; z-index:2;
  background:linear-gradient(180deg, rgba(38,36,39,0) 0%, rgba(38,36,39,.86) 40%, #262427 100%);
}
.kc-title{ display:block; font-family:var(--kopf); color:#fff; font-size:20px; font-weight:500; line-height:28px; margin-bottom:12px; }
.kc-text{ display:block; color:var(--text-hell); }
/* Die Leiste ist ueber die ganze Breite weiss wie im Theme (lower-box).
   Die Pfeile sitzen in ::before und nicht als Maske auf der Leiste: die Maske
   schnitt auch den weissen Grund ab 150px weg, dort schien der dunkle
   Kartengrund durch. */
.kc-foot{ display:flex; align-items:center; gap:16px; height:40px; padding-right:30px; background:#fff; transition:background-color .5s; }
.kc-foot::before{ content:""; flex:0 1 150px; align-self:stretch; background:#F0F0F0; transition:background-color .5s;
  /* Pfeile als Muster, wie die Grafik shape-54 im Theme; schrumpft vor dem Text */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='40' viewBox='0 0 38 40'%3E%3Cpath d='M0 0h16l20 20-20 20H0l20-20z'/%3E%3C/svg%3E") 0 0 / 38px 40px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='40' viewBox='0 0 38 40'%3E%3Cpath d='M0 0h16l20 20-20 20H0l20-20z'/%3E%3C/svg%3E") 0 0 / 38px 40px repeat-x; }
.kc-mehr{ margin-left:auto; font-family:var(--kopf); font-size:14px; font-weight:600; line-height:20px; text-transform:uppercase; color:#3D3D3D; white-space:nowrap; transition:color .5s; }
.klasse-card:hover .kc-title{ color:#fff; text-decoration:underline; text-decoration-color:var(--rot); text-underline-offset:5px; }
.klasse-card:hover .kc-foot{ background-color:var(--rot); }
.klasse-card:hover .kc-foot::before{ background-color:#fff; }
.klasse-card:hover .kc-mehr{ color:#fff; }

/* ---------------------------------------------------------- Zusaetzlich */
.zusaetzlich{ padding:70px 0; box-shadow:0 -3px 6px -3px rgba(0,0,0,.25), 0 3px 6px -3px rgba(0,0,0,.25); position:relative; }
.zus-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.zusaetzlich h2{ font-size:44px; line-height:56px; text-align:right; }
.zusaetzlich li{ display:flex; gap:16px; align-items:flex-start; padding:5px 0; }
.zusaetzlich li .ico{ font-size:20px; margin-top:3px; color:#A7A7A7; }
.zusaetzlich a{ text-decoration:none; }
.zusaetzlich a:hover{ color:var(--rot); }

/* ---------------------------------------------------------- Erste Hilfe */
.erste-hilfe .sec-title h2{ text-transform:uppercase; letter-spacing:.06em; }
.eh-grid{ display:grid; grid-template-columns:5fr 7fr; gap:60px; align-items:center; max-width:1000px; margin:0 auto; }
.eh-box{ text-align:center; }
.eh-koffer{ width:200px; margin:0 auto 26px; }
.eh-box p{ margin-bottom:10px; }
.eh-box strong{ font-family:var(--kopf); color:var(--dunkel); font-size:18px; font-weight:500; }
.eh-list h3{ font-size:24px; font-weight:500; margin:0 0 18px; }
.eh-list h3 + ul + h3{ margin-top:30px; }
.icon-list li{ display:flex; gap:10px; align-items:flex-start; }
.icon-list .ico{ color:#A7A7A7; font-size:18px; margin-top:4px; }
.eh-list .btn{ margin-top:30px; }

/* ---------------------------------------------------------- Termine */
.termine-sec .sec-title{ margin-bottom:45px; }
.termine-sec + .termine-sec{ padding-top:0; }
.termine-erste-hilfe{ padding-top:20px; }
.termine-h3{ font-size:30px; margin-bottom:45px; }
.termine-wrap.mit-filter{ display:grid; grid-template-columns:210px 1fr; gap:30px; }
.termine-filter fieldset{ border:0; border-bottom:1px solid var(--linie); padding:0 0 16px; margin-bottom:22px; min-width:0; }
.termine-filter legend{ color:var(--rot); font-size:14px; font-weight:600; margin-bottom:12px; }
.termine-filter label{ display:flex; gap:10px; align-items:center; font-size:14px; padding:4px 0; cursor:pointer; color:var(--dunkel); }
.termine-filter input{ width:16px; height:16px; accent-color:var(--rot); }
.termine{ border-top:1px solid var(--linie); }
.termin{ display:grid; grid-template-columns:90px 1fr auto; gap:30px; align-items:center; padding:28px 15px 28px 0; border-bottom:1px solid var(--linie); }
.termin.is-extra{ display:none; }
.termin[hidden]{ display:none; }
.t-datum{ text-align:center; color:var(--rot); line-height:1.15; }
.t-tag{ display:block; font-size:30px; }
.t-monat{ display:block; font-size:16px; }
.t-titel{ font-size:25px; line-height:32px; font-weight:500; margin-bottom:4px; overflow-wrap:break-word; }
.t-info,.pt-inhalt li span{ min-width:0; }
.pt-inhalt li span{ overflow-wrap:break-word; hyphens:auto; }
.t-meta{ display:flex; flex-wrap:wrap; color:#6B6B6B; }
/* Trennpunkt links vor jedem Eintrag; der Rand links ist weggeschnitten, so
   steht am Zeilenanfang nie ein einzelner Punkt, auch wenn umbrochen wird */
.t-meta{ margin-left:-22px; clip-path:inset(0 0 0 22px); }
.t-meta > *{ position:relative; padding-left:22px; }
.t-meta > *::before{ content:"•"; position:absolute; left:8px; color:#C9C9C9; }
.t-desc{ margin-top:12px; }
.t-preis{ margin-top:8px; color:var(--dunkel); font-weight:600; font-size:15px; }
.t-aktion{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.btn-termin{ display:inline-block; text-align:center; background:var(--rot); color:#fff; text-decoration:none; font-size:13.6px; line-height:26px; padding:6px 14px; border-radius:2px; white-space:nowrap; }
.btn-termin:hover{ background:var(--dunkel); }
.termine-erste-hilfe .btn-termin{ background:var(--rot-2); }
.btn-termin-hell{ background:#fff !important; color:var(--rot-2); box-shadow:inset 0 0 0 1px var(--rot-2); }
.btn-termin-hell:hover{ background:var(--rot-2) !important; color:#fff; }
.termine-mehr{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.termine-mehr .btn[hidden]{ display:none; }
/* im Raster mit Filterspalte unter die Liste, nicht unter den Filter */
.termine-wrap.mit-filter .termine-mehr{ grid-column:-2 / -1; }
.termine-keine{ padding:26px 28px; background:var(--grau-2); border-left:3px solid var(--rot); }
.termine-sec[data-leer-ausblenden]:has(.termine-leer){ display:none; }

/* ---------------------------------------------------------- Seit 2013 */
.seit{ display:grid; grid-template-columns:905fr 535fr; }
.seit-bild{ position:relative; min-height:100%; }
.seit-bild picture{ position:absolute; inset:0; }
.seit-links{ display:flex; flex-direction:column; }
.seit-dunkel{ background:var(--dunkel) linear-gradient(120deg, #1b1a1c 0%, #121113 60%); color:#fff; padding:55px 60px 70px 205px; position:relative; overflow:hidden; }
.seit-dunkel::before{ content:"089"; position:absolute; left:-30px; top:50%; transform:translateY(-50%);
  font-family:var(--kopf); font-weight:700; font-size:220px; line-height:1; color:rgba(255,255,255,.04); }
.seit-inner{ position:relative; max-width:440px; }
.seit-label{ font-family:var(--kopf); font-weight:700; text-transform:uppercase; font-size:16px; }
.seit-jahr{ font-family:var(--kopf); font-weight:700; font-size:50px; line-height:1.1; display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.chevrons{ width:116px; height:26px; fill:var(--rot); flex:none; }
.seit-text{ color:#fff; margin-bottom:30px; }
.seit-zahl{ display:flex; gap:20px; align-items:center; }
.seit-ico{ width:50px; filter:brightness(0) invert(1); }
.seit-zahl b{ display:block; font-family:var(--kopf); font-size:48px; line-height:1; }
.seit-zahl span{ font-family:var(--kopf); font-size:20px; font-weight:500; }
.seit-hell{ background:var(--grau); display:grid; grid-template-columns:1fr 1fr; flex:1; position:relative; }
.seit-hell::before{ content:""; position:absolute; left:33%; top:0; width:140px; height:90px; background:#fff; clip-path:polygon(0 0,60% 0,100% 100%,40% 100%); }
.seit-k{ padding:60px; position:relative; }
.seit-k + .seit-k{ border-left:1px solid #E2E2E2; }
/* feste Hoehe: die beiden Icons sind 63 und 49px hoch, die Ueberschriften
   daneben standen 14px versetzt */
.seit-k img{ width:56px; height:63px; object-fit:contain; object-position:left bottom; margin-bottom:22px; }
.seit-k h3{ font-size:24px; font-weight:500; margin-bottom:16px; }
.seit-k p{ color:#626368; }
.seit-bild picture,.seit-bild img{ width:100%; height:100% !important; object-fit:cover; }

/* ---------------------------------------------------------- Team */
/* Drei Karten je Reihe in sechs Spalten: so laesst sich eine letzte Reihe mit
   zwei Karten um eine halbe Karte einruecken. margin-left:50% tat das vorher
   auf Kosten der Breite - die beiden Karten waren halb so gross wie die anderen. */
.team-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:60px 72px; max-width:1260px; margin:0 auto; }
.team-grid > *{ grid-column:span 2; }
.team-grid > :nth-last-child(2):nth-child(3n+1){ grid-column:2 / span 2; }
.team-card h3{ font-size:20px; font-weight:500; color:#2B2B2B; margin:30px 0 8px 50px; }
.tc-rolle{ margin-left:50px; color:var(--rot); text-transform:uppercase; font-size:14px; font-weight:600; line-height:20px; }
.tc-bild{ position:relative; padding:0 50px; container-type:inline-size; }
.tc-bild::before{ content:""; position:absolute; inset:0; background:var(--grau);
  clip-path:polygon(0 0,13.5% 13%,13.5% 100%,100% 100%,100% 87%,86.5% 63%,86.5% 0); }
.tc-bild picture{ position:relative; }
.tc-bild img{ width:100%; }
.tc-klassen{ position:absolute; z-index:2; left:8px; top:80px; writing-mode:vertical-rl;
  font-family:var(--kopf); font-weight:700; font-size:30px; letter-spacing:.06em; color:#fff;
  -webkit-text-stroke:1px #DCDCDC; text-transform:uppercase; }
/* Lange Klassenlisten ("B/BE/A/CE/DE") ragten unter dem Foto heraus. Die Schrift
   schrumpft gerade so weit, dass die Liste in die Fotohoehe passt: 100cqw ist die
   Fotobreite (Inhaltsbox von .tc-bild), das Foto 270:340 also 125.93cqw hoch
   (cqw, nicht cqi: die Liste steht vertical-rl, ihr cqi waere die Hoehe);
   davon top und etwas Luft ab, geteilt durch Zeichenzahl (--n, aus seiten.py)
   mal ~0.72em je Zeichen. Kurze Listen bleiben bei der vollen Groesse. */
.tc-klassen{ font-size:min(30px, calc((125.93cqw - 88px) / (var(--n, 1) * .72))); }
/* die Pfeilspalte rechts neben dem Foto */
.tc-bild::after{ content:""; position:absolute; right:11px; top:0; width:28px; height:176px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Cpath d='M2 3l12 10L26 3' fill='none' stroke='%23D2D2D2' stroke-width='1.6'/%3E%3Cpath d='M2 9l12 10L26 9' fill='none' stroke='%23D2D2D2' stroke-width='1.6'/%3E%3C/svg%3E"); background-size:28px 22px; }

/* ---------------------------------------------------------- Flotte */
.flotte-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 90px) / 4); gap:30px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:thin; }
.flotte-card{ scroll-snap-align:start; background:#000; padding:0 10px 10px; position:relative; }
.fc-bild{ margin:0 -10px; aspect-ratio:270/340; overflow:hidden; background:var(--grau); }
.fc-bild img{ width:100%; height:100% !important; object-fit:cover; }
/* padding-bottom: die weisse .fc-box ragt 90px ins Bild und verdeckte "Foto folgt" */
.fc-platzhalter{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#6B6B6B; font-size:14px; padding-bottom:90px; }
.fc-platzhalter img{ width:80px; opacity:.6; }
.fc-box{ background:#fff; margin-top:-90px; position:relative; padding:24px 20px 50px; }
.fc-box::after{ content:""; position:absolute; left:0; bottom:0; width:114px; height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='40' viewBox='0 0 38 40'%3E%3Cpath d='M0 0h16l20 20-20 20H0l20-20z' fill='%23F0F0F0'/%3E%3C/svg%3E"); background-size:38px 40px; }
.fc-typ{ display:flex; gap:8px; align-items:center; font-family:var(--kopf); font-size:13px; font-weight:500; text-transform:uppercase; color:#6E6E6E; letter-spacing:.04em; }
.fc-typ::before{ content:""; width:8px; height:8px; background:var(--rot); }
.fc-box h3{ font-size:20px; font-weight:500; margin-top:4px; }
.seite-fuhrpark .flotte-grid{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; }

/* ---------------------------------------------------------- Warum wir */
.warum{ background:var(--dunkel); padding:115px 0 90px; position:relative; overflow:hidden; }
.warum::before{ content:""; position:absolute; right:12%; top:0; width:70px; height:120px; background:#fff; opacity:.08; transform:skewX(-35deg); }
.warum-kopf{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:55px; }
.warum-kopf .sec-title{ margin-bottom:0; }
.warum-text{ color:#fff; }
.warum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.warum-card{ background:#fff; padding:94px 30px 33px; position:relative; overflow:hidden; }
.wc-nr{ position:absolute; left:0; top:0; width:70px; height:70px; background:var(--grau); color:var(--rot);
  font-family:var(--kopf); font-size:24px; font-weight:500; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%); }
.wc-ico{ position:absolute; right:30px; top:30px; width:110px; opacity:.35; }
.warum-card h3{ font-size:20px; font-weight:500; line-height:30px; margin-bottom:16px; position:relative; hyphens:manual; }
.warum-card p{ position:relative; }

/* ---------------------------------------------------------- Galerie */
.galerie-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.galerie figure{ overflow:hidden; }
.galerie img{ width:100%; transition:transform .5s; }
.galerie figure:hover img{ transform:scale(1.05); }

/* ---------------------------------------------------------- Aktion */
.aktion-sec{ padding:40px 0 70px; }
.aktion{ position:relative; overflow:hidden; border-radius:20px; padding:40px; color:#fff;
  background:var(--navy) linear-gradient(120deg, #1B2F5B 0%, #22386a 55%, #1B2F5B 100%); }
.aktion::after{ content:""; position:absolute; right:-60px; top:30px; width:240px; height:240px; border-radius:50%; background:rgba(200,16,46,.25); }
.aktion > *{ position:relative; z-index:2; }
.aktion-badge{ display:inline-block; background:#C8102E; color:#fff; border-radius:30px; padding:6px 16px;
  font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.aktion h2{ color:#fff; font-size:40px; font-weight:700; margin-bottom:10px; }
.aktion-text{ font-size:18px; line-height:1.55; max-width:640px; margin-bottom:24px; }
.aktion-boxen{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.aktion-box{ background:#F5F8FC; border-radius:14px; padding:22px 20px; color:var(--navy); }
.ab-label{ display:block; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.ab-preis{ display:block; font-size:34px; font-weight:800; color:#C8102E; line-height:1.1; margin-bottom:10px; }
.ab-preis s{ font-size:13px; font-weight:700; color:var(--navy); margin-left:12px; }
.ab-text{ font-size:13px; }
.aktion .btn-pill{ background:#C8102E; }
.aktion .btn-pill:hover{ background:#fff; color:#C8102E; }
.aktion-hinweis{ font-size:13px; margin-top:16px; opacity:.9; }

/* ---------------------------------------------------------- Preise */
.preise{ background:var(--grau-3); }
.preis-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; align-items:start; }
.preis-tabelle{ background:#fff; box-shadow:0 0 30px rgba(0,0,0,.1); margin-top:52px; }
.preis-tabelle.is-top{ background:var(--dunkel); margin-top:0; }
.pt-top{ overflow:hidden; }
.pt-leer{ height:55px; }
/* Der Platzhalter gleicht nur die Hoehe von "Beliebt" in der Preisreihe aus;
   neben der Kosten-Box gibt es nichts auszugleichen, dort war er ein leerer Streifen */
.preis-mit-kosten .pt-leer{ display:none; }
.pt-top{ height:115px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pt-beliebt{ font-family:var(--kopf); font-size:58px; font-weight:700; color:#FF0000; }
/* Wort etwas links der Mitte, damit es das Eckband nicht berührt */
.pt-top{ container-type:inline-size; padding-right:24px; }
.pt-top:has(.pt-beliebt.pt-lang){ padding-right:70px; }
.pt-beliebt.pt-lang{ font-size:min(40px, 10cqw) !important; white-space:nowrap; }
.pt-band{ position:absolute; right:-38px; top:22px; transform:rotate(45deg); background:var(--rot); color:#fff;
  font-family:var(--kopf); font-size:14px; font-weight:600; text-transform:uppercase;
  width:150px; padding:6px 0; text-align:center; right:-45px; }
.pt-band.pt-lang{ font-size:12px; letter-spacing:0; }
.pt-paket{ background:var(--grau); padding:20px 40px; }
.pt-paket h3{ font-size:20px; font-weight:500; line-height:30px; margin-bottom:3px; }
.pt-paket p,.preis-hinweis{ color:#626368; }
.pt-inhalt{ padding:22px 40px 40px; }
.pt-inhalt h4{ font-size:20px; font-weight:500; margin:24px 0 12px; }
.pt-inhalt h4:first-child{ margin-top:10px; }
.pt-inhalt ul{ border-top:1px solid var(--linie); }
.pt-inhalt li{ display:flex; justify-content:space-between; gap:20px; align-items:flex-end; padding:13px 0;
  border-bottom:1px solid var(--linie); font-family:var(--kopf); font-weight:500; color:var(--dunkel); }
.pt-inhalt li b{ font-family:var(--fliess); font-weight:400; color:var(--text); white-space:nowrap; }
.is-top .pt-paket{ background:var(--grau); }
.is-top .pt-inhalt h4,.is-top .pt-inhalt li{ color:#fff; }
.is-top .pt-inhalt li b{ color:#fff; }
.is-top .pt-inhalt ul,.is-top .pt-inhalt li{ border-color:#3A383B; }
.preis-hinweis{ text-align:center; margin-top:40px; font-size:14px; }
.preis-hinweis a{ color:var(--rot); }
.preis-einzeln{ max-width:520px; margin:0 auto; }
.preis-mit-kosten{ max-width:1080px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; align-items:start; }
.kosten-box{ background:var(--grau-2); border-left:4px solid var(--rot); padding:30px 32px; }
.kosten-box h3{ font-size:22px; font-weight:500; margin-bottom:16px; }
.kosten-box table{ width:100%; border-collapse:collapse; margin-bottom:16px; }
.kosten-box th,.kosten-box td{ padding:9px 0; border-bottom:1px solid var(--linie); text-align:left; font-weight:400; vertical-align:top; color:#626368; }
.kosten-box td{ text-align:right; white-space:nowrap; padding-left:16px; color:var(--dunkel); }
.kosten-box tfoot th,.kosten-box tfoot td{ font-family:var(--kopf); font-weight:600; color:var(--dunkel); border-bottom:0; padding-top:14px; }
.kb-plus{ color:var(--dunkel); font-weight:600; margin-bottom:10px; }
.kb-hinweis{ font-size:14px; color:#626368; margin-bottom:6px; }
@media (max-width: 991px){ .preis-mit-kosten{ grid-template-columns:minmax(0,1fr); max-width:520px; } }
.preis-einzeln .preis-tabelle{ margin-top:0; }

/* ---------------------------------------------------------- Feedback */
.fb-inner{ display:grid; grid-template-columns:400px 1fr; gap:40px; }
.fb-deko{ position:relative; }
/* die roten Parallelogramme links, wie shape-74 */
.fb-deko::before,.fb-deko::after{ content:""; position:absolute; background:var(--rot); transform:skewX(-37deg); }
.fb-deko::before{ left:70px; top:0; width:110px; height:210px; clip-path:polygon(0 100%,0 55%,100% 0,100% 45%); transform:none; }
.fb-deko::after{ left:115px; top:120px; width:110px; height:142px; }
.fb-card{ position:relative; border:1px solid #DFDFDF; padding:38px 30px 34px 125px; margin:0 0 70px; }
.fb-card::before{ content:"\201D"; position:absolute; left:38px; top:6px; font-family:Georgia,serif; font-size:120px; line-height:1; color:#BDBDBD; }
.fb-card blockquote h3{ font-size:20px; font-weight:500; margin-bottom:12px; }
.fb-card blockquote p{ font-size:18px; line-height:28px; }
.fb-card figcaption{ position:absolute; left:90px; bottom:-60px; font-family:var(--kopf); font-size:20px; color:var(--dunkel); }
.fb-card figcaption{ font-size:16px; color:var(--text); }
.fb-card figcaption b{ font-size:20px; color:var(--dunkel); font-weight:500; }
.sterne{ display:block; color:var(--rot); letter-spacing:4px; font-size:16px; }
.fb-avatar{ position:absolute; right:-170px; top:10px; width:140px; height:140px; border-radius:50%;
  background:var(--dunkel); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--kopf); font-size:54px; font-weight:600; }
.fb-card:nth-of-type(odd){ margin-right:170px; }
.fb-card:nth-of-type(even){ margin-left:170px; }
.fb-card:nth-of-type(even) .fb-avatar{ right:auto; left:-170px; background:var(--rot); }
.fb-mehr{ margin-top:10px; }
.fb-mehr a{ color:var(--rot); font-weight:600; text-decoration:none; }

/* ---------------------------------------------------------- Kontakt */
.kontakt{ background:var(--grau-2); color:#66676C; }
.kontakt .eyebrow{ color:#6E6E6E; }
.kontakt-grid{ display:grid; grid-template-columns:5fr 7fr; gap:60px; max-width:1120px; margin:0 auto 90px; }
.kontakt-firma h3{ font-size:28px; font-weight:500; margin-bottom:6px; }
.kontakt-firma p{ margin-bottom:16px; }
.kontakt a,.filiale-sec a{ color:var(--blau); text-decoration:none; }
.kontakt a:hover,.filiale-sec a:hover{ text-decoration:underline; }
.kontakt-form-wrap > p{ margin-bottom:26px; }
.kontakt-form input,.kontakt-form textarea,.form-mini input{
  width:100%; font:inherit; font-size:14px; color:var(--dunkel); background:#fff;
  border:1px solid #CFCFCF; padding:10px 18px; margin-bottom:20px; border-radius:0;
}
.kontakt-form input{ height:43px; }
.kontakt-form input:focus-visible,.kontakt-form textarea:focus-visible,.form-mini input:focus-visible{ outline:2px solid var(--rot); outline-offset:1px; border-color:var(--dunkel); }
.kontakt-form ::placeholder{ color:var(--dunkel); }
.kontakt-form .btn{ background:#D42A3C; height:50px; font-family:var(--fliess); font-weight:700; }
.kontakt-form .btn:hover{ background:var(--dunkel); }
.consent{ font-size:13px; line-height:1.5; margin-bottom:20px; }
.form-pflicht{ white-space:nowrap; }
.consent a{ text-decoration:underline !important; }
.form-status{ display:none; margin-top:16px; padding:12px 14px; font-size:14px; }
.form-status.show{ display:block; }
.form-status.success{ background:#E7F6EC; color:#1E7B3E; }
.form-status.error{ background:#FBE9E9; color:#B3261E; }
.filialen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1120px; margin:0 auto; }
.filiale-box .fb-titel{ font-size:28px; font-weight:500; line-height:1.2; }
.filiale-box .fb-titel a{ color:var(--dunkel) !important; }
.filiale-box .fb-firma{ font-family:var(--kopf); font-size:20px; font-weight:600; color:var(--dunkel); }
.filiale-box p{ margin-bottom:12px; font-size:17px; }
.fb-zeiten strong{ color:var(--dunkel); font-family:var(--kopf); font-weight:500; }
.link-route{ display:inline-flex; gap:8px; align-items:center; font-weight:600; }
.link-route .ico{ font-size:20px; }
/* 820px Inhalt wie .prose darunter; .wrap bringt 2 x 15px Padding mit, sonst
   stand der Kasten 15px eingerueckt gegenueber dem Text */
.filiale-einzeln{ max-width:850px; }

/* ---------------------------------------------------------- Fliesstext */
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ font-size:32px; line-height:1.3; margin:50px 0 18px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:22px; font-weight:500; margin:32px 0 12px; }
.prose p{ margin-bottom:18px; font-size:17px; line-height:1.75; }
.prose ul{ margin:0 0 22px; }
.prose li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:17px; line-height:1.7; }
.prose li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; background:var(--rot); }
.prose .check-list li{ padding-left:34px; }
.prose .check-list li::before{ width:18px; height:18px; top:5px; left:0; background:none;
  border:2px solid var(--rot); border-radius:50%; }
.prose .check-list li::after{ content:""; position:absolute; left:6px; top:9px; width:5px; height:8px;
  border:solid var(--rot); border-width:0 2px 2px 0; transform:rotate(45deg); }
.prose strong{ color:var(--dunkel); }
.prose a{ color:var(--rot); }
.legal h2{ font-size:24px; margin:40px 0 12px; }
.legal h3{ font-size:18px; margin:22px 0 6px; }
.legal p,.legal li{ font-size:16px; }
.legal-stand{ margin-top:40px; color:#6E6E6E; }
.table-wrap{ overflow-x:auto; margin-bottom:24px; }
.legal table{ border-collapse:collapse; width:100%; font-size:15px; min-width:620px; }
.legal th,.legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--linie); vertical-align:top; }
.legal th{ color:var(--dunkel); font-family:var(--kopf); font-weight:500; }

.sec-stand{ padding:0 0 40px; }
.stand{ max-width:820px; margin:0 auto; font-size:14px; color:#6E6E6E; }
.faq + .sec-stand{ background:var(--grau-2); }

/* ---------------------------------------------------------- FAQ */
.faq{ background:var(--grau-2); }
.faq + .cta-band{ margin-top:0; }
.faq-list{ max-width:900px; margin:0 auto; }
.faq details{ background:#fff; margin-bottom:12px; border-left:3px solid transparent; transition:border-color .2s; }
.faq details[open]{ border-left-color:var(--rot); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 60px 22px 26px; position:relative;
  font-family:var(--kopf); font-size:18px; font-weight:500; color:var(--dunkel); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:28px; color:var(--rot); font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq-a{ padding:0 26px 22px; }
.faq-a a{ color:var(--rot); }

/* ---------------------------------------------------------- Abschlussband */
.cta-band{ background:var(--dunkel); color:#fff; padding:60px 0; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; left:-40px; top:0; bottom:0; width:120px; background:var(--rot); transform:skewX(-30deg); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; padding-left:80px; }
.cta-band h2{ color:#fff; font-size:32px; margin-bottom:6px; }
.cta-band p{ color:#C3C4C8; }
.cta-btns{ display:flex; gap:14px; flex-wrap:wrap; flex:none; }
.cta-btns .btn:hover{ background:#fff; color:var(--dunkel); }

/* ---------------------------------------------------------- Fehlerseite */
.error-page{ padding:110px 0 60px; text-align:center; }
.error-code{ font-family:var(--kopf); font-size:140px; font-weight:700; line-height:1; color:var(--rot); }
.error-page h1{ font-size:40px; margin:10px 0 14px; }
.error-page .lede{ max-width:560px; margin:0 auto 30px; }
.error-links{ display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center; }
.error-links a{ color:var(--dunkel); font-family:var(--kopf); font-weight:600; text-decoration:none; }
.error-links a:hover{ color:var(--rot); }
.error-sprachen{ padding-top:20px; }
.error-sprachen p{ max-width:820px; margin:0 auto 10px; font-size:15px; }
.error-sprachen a{ color:var(--rot); }

/* ---------------------------------------------------------- Fuss */
.site-footer{ background:var(--dunkel); color:#A7A7A7; font-size:14px; line-height:22px; }
.footer-cols{ display:grid; grid-template-columns:1.25fr 1fr .8fr 1.25fr; gap:50px; padding-top:70px; padding-bottom:60px; max-width:1260px; }
.f-about img{ width:180px; margin-bottom:22px; }
.f-about p{ margin-bottom:16px; }
.f-kontakt a{ color:#fff; text-decoration:none; }
.footer-h{ font-family:var(--kopf); color:#fff; font-size:22px; font-weight:500; margin-bottom:26px; }
.f-zeit{ display:flex; flex-direction:column; margin-bottom:20px; }
.f-zeit strong{ color:#fff; font-weight:600; margin-bottom:6px; }
.f-zeit b{ color:#fff; font-weight:400; }
.f-links{ display:flex; flex-direction:column; gap:10px; }
.f-links a{ color:#A7A7A7; text-decoration:none; }
.f-links a:hover{ color:#fff; }
.form-mini input{ height:45px; border:0; margin-bottom:14px; }
.form-mini .consent{ color:#A7A7A7; font-size:12px; }
.form-mini .consent a{ color:#fff; }
.form-mini .btn{ width:100%; background:#CF3426; font-family:var(--fliess); font-weight:700; font-size:13px; }
.form-mini .btn:hover{ background:#fff; color:var(--dunkel); }
.f-klein{ margin-top:16px; }
.footer-bottom{ background:var(--schwarz); padding:22px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:1260px; }
.footer-bottom a{ text-decoration:none; }
.footer-bottom-inner > span a{ color:#F04B4C; text-decoration:underline; text-underline-offset:3px; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a,.footer-linkbtn{ color:#A7A7A7; background:none; border:0; cursor:pointer; font-size:14px; }
.footer-links a:hover,.footer-linkbtn:hover{ color:#fff; }
.recht-hinweis{ max-width:1260px; margin:10px auto 0; padding:0 15px; font-size:13px; color:#8F9096; }

/* Anruf-Knopf, nur auf dem Handy (Audit-Befund CNV-1/CNV-3) */
.call-fab{ display:none; }

/* ---------------------------------------------------------- Cookie-Hinweis */
#cookie-banner{ position:fixed; z-index:100; left:20px; right:20px; bottom:20px; max-width:880px; margin:0 auto;
  background:var(--dunkel); color:#fff; padding:22px 26px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:none; align-items:center; gap:24px; border-left:4px solid var(--rot); }
#cookie-banner.show{ display:flex; }
#cookie-banner p{ font-size:14px; line-height:1.55; color:#D5D6D9; margin:0; }
#cookie-banner a{ color:#fff; }
.cookie-actions{ display:flex; gap:10px; flex:none; }
.btn-cookie-accept,.btn-cookie-decline{ border:0; cursor:pointer; padding:11px 18px; font-family:var(--kopf); font-weight:600; font-size:13px; text-transform:uppercase; }
.btn-cookie-accept{ background:var(--rot); color:#fff; }
.btn-cookie-decline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }

/* ============================================================ Breakpoints */
@media (max-width: 1399px){
  .header-inner{ gap:16px; padding:0 24px 0 30px; }
  .logo img{ width:290px; }
  .main-nav > ul > li > a{ padding:35px 12px; }
  .main-nav > ul > li > a::after{ left:12px; right:12px; }
}
@media (max-width: 1199px){
  .main-nav,.lang-switch{ display:none; }
  .menu-btn{ display:flex; }
  .header-inner{ height:80px; padding:0 20px; }
  .logo img,.site-header.scrolled .logo img{ width:240px; }
  .topbar-inner{ padding:16px 20px; }
  .klassen-grid{ grid-template-columns:repeat(2,1fr); }
  .seit{ grid-template-columns:1fr; }
  .seit-bild{ display:none; }
  .seit-dunkel{ padding:55px 40px 60px 120px; }
  .team-grid{ grid-template-columns:repeat(2,1fr); max-width:820px; gap:50px 40px; }
  .flotte-grid{ grid-auto-columns:calc((100% - 30px) / 2); }
  .seite-fuhrpark .flotte-grid{ grid-template-columns:repeat(2,1fr); }
  .warum-grid{ grid-template-columns:repeat(2,1fr); }
  .preis-grid{ grid-template-columns:minmax(0,1fr); max-width:520px; margin:0 auto; }
  .preis-tabelle{ margin-top:0; }
  .fb-inner{ grid-template-columns:1fr; }
  .fb-deko{ display:none; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 991px){
  .sec{ padding:75px 0; }
  .sec-title h2,.sec-title h1,.zusaetzlich h2{ font-size:34px; line-height:44px; }
  .topbar-inner{ flex-direction:column; text-align:center; gap:6px; }
  .topbar-info,.topbar-info li,.topbar-kontakt li{ justify-content:center; }
  .topbar-info li{ flex-wrap:wrap; }
  .tb-social{ display:none !important; }
  .topbar::before{ display:none; }
  .hero-slider{ height:600px; }
  .slide-content{ padding-left:24px; padding-right:24px; }
  .slide-title{ font-size:44px; line-height:52px; }
  .slider-dots{ left:24px; bottom:24px; }
  .page-hero{ padding:80px 0 70px; }
  .page-hero h1{ font-size:36px; }
  .zus-inner{ grid-template-columns:1fr; }
  .zusaetzlich h2{ text-align:left; }
  .eh-grid,.kontakt-grid,.filialen-grid{ grid-template-columns:1fr; gap:40px; }
  .termine-wrap.mit-filter{ grid-template-columns:minmax(0,1fr); gap:0; }
  .termine-filter{ display:flex; flex-wrap:wrap; gap:0 30px; }
  .termine-filter fieldset{ border:0; margin-bottom:10px; }
  .termine-filter fieldset{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; }
  .termine-filter legend{ width:100%; margin-bottom:4px; }
  .warum-kopf{ grid-template-columns:1fr; }
  .fb-card,.fb-card:nth-of-type(odd),.fb-card:nth-of-type(even){ margin:0 0 70px; padding:90px 24px 30px; }
  .fb-avatar,.fb-card:nth-of-type(even) .fb-avatar{ width:70px; height:70px; font-size:28px; left:auto; right:20px; top:-20px; }
  .fb-card::before{ left:20px; top:4px; font-size:90px; }
  .fb-card figcaption{ left:24px; }
  .cta-inner{ flex-direction:column; align-items:flex-start; padding-left:40px; }
  /* Gestapelt wird das Band hoch, und der um die Mitte geschraegte Streifen ragte
     oben bis x~175 unter Ueberschrift, Text (Grau auf Rot ~2,8:1) und den roten
     Knopf. Oben angeschlagen bleibt er als Ecke links vor dem Text. */
  .cta-band::before{ left:-10px; width:64px; transform-origin:0 0; }
}
@media (max-width: 767px){
  body{ font-size:15px; }
  .sec{ padding:60px 0; }
  .sec-title{ margin-bottom:36px; }
  .sec-title h2,.sec-title h1,.zusaetzlich h2{ font-size:30px; line-height:40px; }
  .topbar{ font-size:14px; line-height:22px; }
  .logo img,.site-header.scrolled .logo img{ width:200px; }
  .header-inner{ height:72px; }
  .hero-slider{ height:560px; }
  .slide-title{ font-size:36px; line-height:44px; }
  .klassen-grid,.warum-grid,.galerie-grid,.team-grid,.footer-cols,.aktion-boxen{ grid-template-columns:minmax(0,1fr); }
  .klassen-grid{ max-width:420px; margin:0 auto; gap:40px; }
  .team-grid{ max-width:370px; }
  .flotte-grid{ grid-auto-columns:78%; }
  .seite-fuhrpark .flotte-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .fc-box,.fc-platzhalter{ overflow-wrap:anywhere; }
  .seite-fuhrpark .fc-box{ padding:16px 12px 40px; }
  .seit-dunkel{ padding:45px 24px 50px; }
  .seit-dunkel::before{ display:none; }
  .seit-hell{ grid-template-columns:1fr; }
  .seit-hell::before{ display:none; }
  .seit-k{ padding:40px 24px; }
  .seit-k + .seit-k{ border-left:0; border-top:1px solid #E2E2E2; }
  .termin{ grid-template-columns:60px minmax(0,1fr); gap:6px 16px; padding:22px 0; }
  .t-aktion{ grid-column:2; flex-direction:row; flex-wrap:wrap; margin-top:8px; }
  .t-titel{ font-size:20px; line-height:27px; }
  /* Lange Komposita passten bei 320-375px nicht in die Zeile; mit hyphens:manual
     brach overflow-wrap sie dann ohne Trennstrich ("Geschaeftsbedingunge/n").
     Getrennt werden nur lange Woerter, kurze Titel bleiben unangetastet. */
  .page-hero h1,.t-titel,.warum-card h3{ hyphens:auto; hyphenate-limit-chars:13 5 5; }
  .t-tag{ font-size:26px; }
  .t-monat{ font-size:14px; }
  .aktion{ padding:28px 22px; }
  .aktion h2{ font-size:28px; }
  .pt-inhalt,.pt-paket{ padding-left:24px; padding-right:24px; }
  .pt-beliebt{ font-size:46px; }
  .prose h2{ font-size:26px; }
  .page-hero h1{ font-size:30px; }
  .ph-lede{ font-size:16px; }
  .cta-band h2{ font-size:26px; }
  .cta-btns{ width:100%; }
  .cta-btns .btn{ flex:1 1 100%; }
  .footer-bottom-inner{ flex-direction:column; }
  #cookie-banner{ flex-direction:column; align-items:stretch; left:10px; right:10px; bottom:10px; }
  .cookie-actions .btn-cookie-accept,.cookie-actions .btn-cookie-decline{ flex:1; }
  .call-fab{ display:inline-flex; position:fixed; z-index:40; right:16px; bottom:16px; gap:8px; align-items:center;
    background:var(--rot); color:#fff; text-decoration:none; padding:12px 18px; border-radius:30px;
    font-family:var(--kopf); font-weight:600; font-size:15px; box-shadow:0 10px 25px rgba(0,0,0,.25); }
  .call-fab .ico{ font-size:18px; }
  .menu-open .call-fab{ display:none; }
  /* Platz fuer den Anruf-Knopf in der untersten Leiste selbst: als Padding des
     Footers lag darunter ein heller abgesetzter Streifen. */
  .footer-bottom{ padding-bottom:92px; }
}
@media (max-width: 420px){
  .slide-title{ font-size:32px; line-height:40px; }
  .sec-title h2,.sec-title h1{ font-size:27px; line-height:36px; }
  .header-inner{ padding:0 14px; }
  .logo img,.site-header.scrolled .logo img{ width:180px; }
}

/* ============================================================
   Feinschliff Smartphone und Tablet (Prüfung 17.10.2026)
   ============================================================ */
a[href^="tel:"]{ white-space:nowrap; }
/* Tippziele ≥ 24 px (WCAG 2.5.8) */
.footer-links a,.footer-linkbtn{ display:inline-block; padding:4px 0; }
.f-links{ gap:4px; }
.f-links a{ display:inline-block; padding:3px 0; }
.tb-social a{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; }
.topbar-kontakt a{ display:inline-block; padding:2px 0; }
.termine-filter input{ width:18px; height:18px; flex:none; }
@media (pointer: coarse){ .termine-filter label{ padding:7px 0; } }

@media (max-width: 1199px){
  /* Sprachwahl auch ohne Desktop-Menü sichtbar, neben dem Menüknopf */
  .lang-switch{ display:block; margin-left:auto; }
  .menu-btn{ margin-left:0; }
  .lang-switch summary{ border-left:0; padding:8px 6px; }
  .lang-switch ul{ top:calc(100% + 16px); }
  /* die Desktop-Regel für die letzte Reihe ließ im 2er-Raster ein Loch */
  .team-grid > *{ grid-column:auto !important; }
  /* bei ungerader Zahl (11) stand die letzte Karte allein links: mittig, eine Spalte breit */
  .team-grid > :last-child:nth-child(odd){ grid-column:1 / -1 !important; justify-self:center; width:calc(50% - 20px); }
}
@media (min-width: 992px) and (max-width: 1199px){
  .preis-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
  .preis-tabelle{ margin-top:52px; }
  .preis-tabelle.is-top,.preis-einzeln .preis-tabelle{ margin-top:0; }
}
@media (min-width: 768px) and (max-width: 991px){
  .topbar-inner{ flex-direction:row; text-align:left; gap:20px; }
  .topbar-info,.topbar-info li,.topbar-kontakt li{ justify-content:flex-start; }
}
@media (max-width: 991px){
  .pt-leer{ display:none; }
  /* zuerst die Antwort (feste Kosten), dann die vollständige Preisliste */
  .preis-mit-kosten .kosten-box{ order:-1; }
  .fb-card,.fb-card:nth-of-type(odd),.fb-card:nth-of-type(even){ margin-bottom:84px; }
}
@media (max-width: 767px){
  .topbar{ font-size:13px; line-height:20px; }
  .topbar-inner{ padding:8px 14px; gap:2px; }
  .topbar-info li:first-child,.topbar .tb-label{ display:none; }
  .topbar-info li{ display:block; }
  .topbar-info strong{ font-size:13px; }
  .topbar .ico{ font-size:15px; vertical-align:-3px; margin-right:4px; }
  .termin{ grid-template-columns:68px minmax(0,1fr); gap:6px 14px; }
  .t-monat{ font-size:13px; }
  .t-meta{ font-size:14px; line-height:22px; }
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; gap:34px 16px; }
  .team-grid > :last-child:nth-child(odd){ width:calc(50% - 8px); }
  .tc-bild{ padding:0 8px 0 26px; }
  .tc-bild::after{ display:none; }
  .tc-klassen{ font-size:min(17px, calc((125.93cqw - 42px) / (var(--n, 1) * .72))); left:3px; top:34px; }
  .team-card h3{ font-size:16px; line-height:21px; margin:14px 0 4px 26px; }
  .tc-rolle{ margin-left:26px; font-size:12px; line-height:16px; overflow-wrap:break-word; hyphens:auto; }
  .galerie-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .galerie-grid > :first-child{ grid-column:1 / -1; }
  .fc-box,.fc-platzhalter{ overflow-wrap:break-word; }
  .seite-fuhrpark .fc-typ{ font-size:12px; letter-spacing:0; gap:6px; align-items:flex-start; hyphens:auto; }
  .seite-fuhrpark .fc-typ::before{ flex:none; width:6px; height:6px; margin-top:4px; }
  .seite-fuhrpark .fc-box h3{ font-size:17px; }
}
@media (max-width: 420px){
  .header-inner{ gap:8px; }
  .logo img,.site-header.scrolled .logo img{ width:168px; }
  .lang-switch summary{ padding:8px 4px; gap:2px; }
  .lang-switch summary .ico:first-child{ display:none; }
}