/*
 * responsive-fixes.css
 * Loaded last — overrides conflicting rules in the main bundle.
 */

/* ================================================================
   FIX 16: Bildergalerien (alle dgal-marquee Galerien) — Bilder in
   voller Größe, nicht beschnitten (analog Sportwagen-Erlebnisreisen).
   Betrifft: Homepage #gallery, Tailor-Made #tm-slider, Group-Tours,
   Society soc-gallery, Luxusreisen ldh-slider — alle nutzen .dgal-marquee.
   Vorher: feste 4:3-Slides + object-fit:cover → Bilder abgeschnitten.
   Jetzt: einheitliche Höhe, natürliche Breite, komplettes Bild sichtbar.
   ================================================================ */
.drivr .dgal-marquee .dgal-slide {
  width: auto !important;
  aspect-ratio: auto !important;
  height: 440px !important;
  overflow: visible !important;
  background: transparent !important;
}
.drivr .dgal-marquee .dgal-slide img {
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 1100px) {
  .drivr .dgal-marquee .dgal-slide { height: 380px !important; }
}
@media (max-width: 720px) {
  .drivr .dgal-marquee .dgal-slide { height: 300px !important; }
}
@media (max-width: 480px) {
  .drivr .dgal-marquee .dgal-slide { height: 240px !important; }
}

/* Bilder direkt aneinander — kein weißer Abstand zwischen den Slides */
.drivr .dgal-marquee .dgal-track {
  gap: 0 !important;
  padding: 0 !important;
}

/* ================================================================
   FIX 2: Long uppercase button text wrapping on small screens
   letter-spacing 0.22em + uppercase overflows a 375px viewport.
   ================================================================ */
@media (max-width: 720px) {
  .drivr .btn {
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 400px) {
  .drivr .btn {
    letter-spacing: 0.10em !important;
    padding: 13px 18px !important;
  }
}

/* ================================================================
   FIX 4: Ensure no horizontal overflow on any viewport
   ================================================================ */
.drivr {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ================================================================
   FIX 4.1: soc-reveal Fallback — IntersectionObserver-unabhängig
   Verhindert, dass Seiteninhalte unsichtbar bleiben, wenn der
   Observer nicht feuert (z.B. prerendering, lazy-load, Preview).
   Die CSS-Transition bleibt erhalten; Inhalte sind aber immer
   sichtbar (kein dauerhaftes opacity:0 / clip-path).
   ================================================================ */
.drivr .soc-reveal {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ================================================================
   FIX 5: gt-why-card-icon oval bug
   Root cause: the bundle has a rule
     .drivr [class*="-card"] { width: 100% }  at max-width: 960px
   The attribute selector [class*="-card"] accidentally matches
   .gt-why-card-icon (its class contains the string "-card"), so the
   icon's explicit width:46px is overridden. Two flex children both
   getting width:100% in a row container split 50/50 → oval instead
   of circle. Same issue affects the decorative rule line.
   ================================================================ */
@media (max-width: 960px) {
  .drivr .gt-why-card-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .drivr .gt-why-card-rule {
    width: 32px !important;
    flex-shrink: 0 !important;
  }

  .drivr .gt-why-card-num-small {
    width: auto !important;
    flex-shrink: 1 !important;
  }
}

@media (max-width: 600px) {
  .drivr .gt-why-card-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* Same [class*="-card"] bug affects other icon/rule elements
   that happen to have "-card" anywhere in their class name.
   NOTE: .stat-icon is excluded — it must stay a fixed square circle
   (the width:auto below would otherwise squash it into an oval).   */
@media (max-width: 960px) {
  .drivr [class$="-icon"]:not(.stat-icon),
  .drivr [class$="-rule"],
  .drivr [class$="-ic"] {
    width: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================================
   FIX 7: WhatsApp-Button + Sprachauswahl — sauberes rechtsbündiges
   Float-Dock (vertikal zentriert), statt klobigem dunklen Panel.
   Beide als dezente, schwebende Kreise rechts an der Seite.
   "DE DE"-Bug: das Flaggen-Emoji 🇩🇪 wird auf manchen Systemen als
   Buchstaben "DE" gerendert → zusammen mit dem Code "DE" = "DE DE".
   Lösung: Flagge ausblenden, nur sauberen Sprachcode zeigen.
   ================================================================ */

/* Gemeinsame Basis: aus dem Panel-Look ein schwebender Kreis rechts */
.drivr #nav .ni-wa,
.drivr #nav .ni-lang {
  position: fixed !important;
  right: 20px !important;
  top: 116px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 95 !important;
}

/* WhatsApp knapp unter dem Header (Anfragen-Button), Sprache darunter.
   Feste Top-Position (116px) statt vertikaler Zentrierung, damit die
   beiden Kreise oben rechts unter der Navigation sitzen. */
.drivr #nav .ni-wa {
  transform: none !important;
}
.drivr #nav .ni-lang {
  transform: translateY(62px) !important;
}

/* WhatsApp: sauberer grüner Kreis mit weicher Schattierung */
.drivr #nav .ni-wa .wa-link {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.42) !important;
}

/* Sprach-Bug: unzuverlässiges Flaggen-Emoji ausblenden */
.drivr #nav .ni-lang .drivr-lang-flag {
  display: none !important;
}

/* Sprache: cleaner, glasiger Kreis im gleichen Stil wie WhatsApp */
.drivr #nav .ni-lang .drivr-lang-dd,
.drivr #nav .ni-lang .drivr-lang-dd-trigger {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.drivr #nav .ni-lang .drivr-lang-dd-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(12, 12, 12, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.drivr #nav .ni-lang .drivr-lang-dd-trigger:hover {
  background: rgba(12, 12, 12, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.drivr #nav .ni-lang .drivr-lang-code {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
}
.drivr #nav .ni-lang .drivr-lang-chev {
  width: 8px !important;
  height: 5px !important;
  opacity: 0.7 !important;
}

/* Scroll-Bug-Fix: Beim Scrollen erhält #nav die Klasse .bg mit
   backdrop-filter:blur(). backdrop-filter erzeugt einen Containing Block
   für position:fixed-Kinder → die Buttons beziehen ihr top:50% dann auf
   die ~84px hohe Navleiste statt aufs Viewport und springen nach oben.
   Lösung: kein backdrop-filter auf #nav (dunkler Hintergrund bleibt,
   der Blur-Effekt ist bei 92% Deckkraft ohnehin kaum sichtbar). */
.drivr #nav,
.drivr #nav.bg,
.drivr #nav.open {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Mobile: ausgeblendet — das Hamburger-Menü übernimmt WA + Sprache */
@media (max-width: 900px) {
  .drivr #nav .ni-wa,
  .drivr #nav .ni-lang {
    display: none !important;
  }
}

/* ================================================================
   FIX 8: Hintergrundfarben — Design-System-Konsistenz
   Referenz: Sportwagen-Erlebnisreisen.de / Oldtimer-Urlaubsreisen.de

   Design-Sprache:
     Dunkel  → Hero, Trust-Strip, About, Quote, Neu (Impact-Momente)
     Hell     → alle Content-Sektionen einheitlich --off: #f5f4f2

   Probleme vorher:
     • #tours   rgb(245,239,228) — zu goldwarm, eigener Ton
     • #stats   #faf7f2          — wärmer als --off
     • #gallery #faf8f5          — abweichend
     • #founder fast-weiß       — inkonsistent
     • #testimonials #f7f5f1    — leicht anders als --off
     • #trusted schwarz         — bricht hellen Content-Fluss auf
     • #neu     #0d0d0d          — andere Nuance als --dark
   ================================================================ */

/* ── Alle hellen Content-Sektionen → einheitlich #f5f4f2 (--off) ── */
.drivr #tiles,
.drivr #stats.stats-v3,
.drivr #gallery.gallery-v3,
.drivr #founder,
.drivr #tours,
.drivr #testimonials {
  background: #f5f4f2 !important;
}

/* ── Trusted: hell statt schwarz (Referenz-Sites zeigen Partner auf hellem Grund) ── */
.drivr #trusted,
.drivr #trusted.trusted-v3 {
  background: #f5f4f2 !important;
}

/* Textfarben anpassen: auf hellem Grund dunkel */
.drivr #trusted .trusted-h,
.drivr #trusted .partners-cap {
  color: #0c0c0c !important;
}

/* ── Dunkle Sektionen → einheitlich --dark: #141414 ── */
.drivr #neu {
  background: #141414 !important;
}

/* ── Stats-v3: weißer Hintergrund der Stat-Icons auf --off anpassen ── */
.drivr #stats.stats-v3 .stat-icon {
  background: #ffffff !important;
}

/* ── Testimonials: Karten auf weißem Hintergrund für Kontrast ── */
.drivr #testimonials .ts-card {
  background: #ffffff !important;
}

/* ================================================================
   FIX 9: HOME Mobile — drei Sektions-Probleme
   ================================================================ */

/* ----------------------------------------------------------------
   9.1 "Was DRIVR auszeichnet" (#usps) — Text wird abgeschnitten
   Ursache: die seitlichen Pfeil-Buttons quetschen das overflow:hidden-
   Marquee-Fenster auf ~231px, während die Karten ~322px breit sind →
   der rechte Teil des Textes wird abgeschnitten.
   Lösung: Pfeile auf Mobile ausblenden (Track ist ohnehin per Swipe
   scrollbar), Karte passt damit voll ins Fenster, Text komplett lesbar.
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .drivr #usps.usps-editorial .usps-nav {
    display: none !important;
  }

  .drivr #usps.usps-editorial .usp-edit-item {
    width: 86vw !important;
    max-width: 340px !important;
  }

  /* Volltext anzeigen statt auf 2 Zeilen klemmen */
  .drivr #usps.usps-editorial .usp-edit-p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }

  /* sanfte Fade-Kante rechts, damit der nächste Slide angedeutet wird */
  .drivr #usps.usps-editorial .usps-marquee {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%) !important;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%) !important;
  }
}

/* ----------------------------------------------------------------
   9.2 "Auswahl an Partnern" (#trusted) — Durchlaufende Marquee auf
   ALLEN Breakpoints (wie "Bekannt aus"-Streifen).
   Klone werden per JS in index.html eingefügt.
   ---------------------------------------------------------------- */

/* Sektion schmäler */
.drivr #trusted.trusted-v3 {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.drivr #trusted.trusted-v3 .partners-cap {
  margin-bottom: 14px !important;
}

/* Wrapper als Marquee-Fenster */
.drivr #trusted.trusted-v3 .trusted-partners-wrap {
  overflow: hidden !important;
  padding: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

/* Durchlaufende Zeile */
.drivr #trusted.trusted-v3 .partners-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: -moz-max-content !important;
  width: max-content !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 72px !important;
  padding: 6px 0 !important;
  animation: drivr-partners-marquee 14s linear infinite;
  will-change: transform;
}

/* Klon-Logos immer sichtbar */
.drivr #trusted.trusted-v3 .plogo-clone {
  display: block !important;
}

/* Einheitliche Logohöhe */
.drivr #trusted.trusted-v3 .partners-row .plogo {
  flex: 0 0 auto !important;
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
}

@keyframes drivr-partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------
   9.3 "Ausgewählte Kundenstimmen" (#testimonials) — eckige Boxen
   Boxen haben border-radius:18px → auf Mobile auf 0 (eckig) setzen.
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .drivr #testimonials .ts-video,
  .drivr #testimonials .ts-video.reverse,
  .drivr #testimonials .ts-vid-thumb,
  .drivr #testimonials .ts-card {
    border-radius: 0 !important;
  }
}

/* ================================================================
   FIX 10: Tailor-Made / Group-Tours (Maßgeschneiderte Lifestyle-Reisen)
   ================================================================ */

/* 10.1 "Sechs Zutaten" Icons — gegen Verzerrung absichern (immer rund).
   Der [class*="-card"]{width:100%}-Bug kann das Icon an Zwischen-
   breakpoints oval ziehen. aspect-ratio + flex:none macht es robust. */
.drivr .gt-why-card-icon {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
.drivr .gt-why-card-icon svg {
  flex: 0 0 auto !important;
}

/* 10.2 Galerie (ehem. gt-grid3, jetzt Marquee): die alte
   3-Spalten-Grid-Regel darf die dgal-Marquee nicht beeinflussen.
   Die dgal-Komponente bringt ihr eigenes Layout mit. */
.drivr .gt-gallery-marquee {
  display: block !important;
  grid-template-columns: none !important;
  padding: clamp(48px, 7vw, 88px) 0 !important;
}

/* ================================================================
   FIX 11: Automobile Luxusreisen (luxury-driving-holidays)
   ================================================================ */

/* 11.1 Galerie: ehemaliger ldh-slider ist jetzt dgal-Marquee.
   Slider-spezifische Regeln (track flex, dots) neutralisieren. */
.drivr .ldh-slider.gallery-v3 {
  display: block !important;
}
.drivr .ldh-slider.gallery-v3 .ldh-slider-track,
.drivr .ldh-slider.gallery-v3 .ldh-slider-dots {
  all: unset;
}

/* 11.2 Final-CTA: entfernter Untertitel hinterlässt leeres <p> →
   ausblenden, damit kein Leerraum/Abstand entsteht. */
.drivr .ldh-final-inner p:empty {
  display: none !important;
}

/* ================================================================
   FIX 12: About-Seite (/society/ueber-uns)
   ================================================================ */

/* 12.0 Hero "About DRIVR": Hintergrundbild (HEROabout.jpg) statt
   schwarzer Fläche. Dunkler Gradient-Overlay darüber, damit der
   weiße Text und der Button lesbar bleiben. */
.drivr.sab .sab-hero {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.68) 100%),
    url('/images/HEROabout.jpg') center center / cover no-repeat !important;
}

/* Untertitel im Hero: reines Weiß + leichter Schatten → klar lesbar
   über dem Bild (vorher #c9c9c9 Hellgrau, auf hellen Bildstellen kaum
   sichtbar). */
.drivr.sab .sab-hero .sab-hero-sub {
  color: #ffffff !important;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55) !important;
}

/* 12.1 "Über DRIVR": Split-Layout — Bild links, Text rechts.
   Eyebrow + Headline + Text stehen im rechten Grid-Track,
   das Bild (about-heart.jpg) im linken Track, über alle Zeilen gespannt. */
.drivr.sab .sab-intro-inner {
  display: grid !important;
  grid-template-columns: 44% 1fr !important;
  grid-template-rows: auto auto 1fr !important;
  column-gap: clamp(36px, 5vw, 72px) !important;
  align-items: start !important;
  text-align: left !important;
}

/* Bild links, über alle Textzeilen gespannt */
.drivr.sab .sab-intro-inner .sab-intro-img {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 360px !important;
  -o-object-fit: cover !important;
  object-fit: cover !important;
  object-position: center center !important;
  align-self: stretch !important;
}

/* Eyebrow, Headline, Text in Spalte 2 */
.drivr.sab .sab-intro-inner .sab-eyebrow {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.drivr.sab .sab-intro-inner .sab-h2 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: 16px !important;
}
.drivr.sab .sab-intro-inner .sab-intro-text {
  grid-column: 2 !important;
  grid-row: 3 !important;
  -moz-column-count: 1 !important;
  column-count: 1 !important;
  max-width: none !important;
  margin: 22px 0 0 !important;
}

/* Mobile: zurück zu einspaltig, Bild über Text */
@media (max-width: 720px) {
  .drivr.sab .sab-intro-inner {
    display: block !important;
    text-align: center !important;
  }
  .drivr.sab .sab-intro-inner .sab-intro-img {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    margin: 28px auto 0 !important;
  }
  .drivr.sab .sab-intro-inner .sab-intro-text {
    text-align: left !important;
    margin: 18px 0 0 !important;
  }
}

/* ================================================================
   FIX 13: DRIVR FAQ-Seite (/faq)
   ================================================================ */
.drivr.faq-page {
  background: #f5f4f2;
}

/* Hero */
.drivr .faq-hero {
  background: #0c0c0c;
  padding: clamp(140px, 18vh, 200px) 24px clamp(56px, 8vh, 88px);
  text-align: center;
}
.drivr .faq-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.drivr .faq-hero .ey {
  color: var(--sand, #c4a06e);
  display: inline-block;
  margin-bottom: 18px;
}
.drivr .faq-h1 {
  font-family: var(--serif, "Albra Sans", serif);
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.drivr .faq-lead {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* Accordion */
.drivr .faq-section {
  padding: clamp(56px, 9vw, 110px) 24px clamp(80px, 12vw, 140px);
}
.drivr .faq-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.drivr .faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.drivr .faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.drivr .faq-q {
  font-family: var(--serif, "Albra Sans", serif);
  font-size: clamp(17px, 2.1vw, 22px);
  color: #0c0c0c;
  padding: 26px 44px 26px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.2s ease;
}
.drivr .faq-q::-webkit-details-marker { display: none; }
.drivr .faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 300;
  color: var(--sand, #c4a06e);
  transition: transform 0.25s ease;
}
.drivr .faq-item[open] .faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}
.drivr .faq-q:hover { color: var(--sand, #c4a06e); }
.drivr .faq-a {
  color: rgba(0, 0, 0, 0.62);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  margin: 0;
  padding: 0 44px 28px 0;
  max-width: 680px;
}
/* Links in FAQ-Antworten (z.B. Verweise auf Sportwagen-/Oldtimer-FAQ) */
.drivr .faq-a a {
  color: var(--sand, #c4a06e);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}
.drivr .faq-a a:hover { opacity: 0.7; }

/* ================================================================
   FIX 14: About-Team Flip-Cards — iPad/Touch-Verhalten + Lesbarkeit
   ================================================================ */

/* 14.1 Touch-Geräte (iPad): das "klebende" iOS-:hover deaktivieren,
   sodass die Karte ausschließlich per Tap (is-flipped) gesteuert wird.
   Behebt: Karte dreht nach 2. Tap nicht zurück. */
@media (hover: none), (pointer: coarse) {
  .drivr .soc-team-flip:hover .soc-team-flip-inner {
    transform: none;
  }
  .drivr .soc-team-flip.is-flipped .soc-team-flip-inner {
    transform: rotateY(180deg) !important;
  }
}

/* 14.2 Rückseite: lange Biografien lesbar machen
   (weniger Padding, kleinere Schrift, Scroll als Sicherheitsnetz).
   Behebt: Text z. B. bei Christoph Baumbach abgeschnitten. */
.drivr.sab .soc-team-flip-back {
  padding: 22px 18px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.drivr.sab .soc-team-flip-back .soc-team-name {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
.drivr.sab .soc-team-flip-back .soc-team-role {
  font-size: 9.5px !important;
  margin-bottom: 10px !important;
}
.drivr.sab .soc-team-flip-back .soc-team-bio {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* 14.4 Desktop/Tablet: Auf den großen 3-Spalten-Karten wirkten die
   Texte (Bio 12px, Rolle 9.5px) zu klein und verloren. Hier deutlich
   größer und besser lesbar. Die Karten bieten genug Höhe, sodass auch
   die längeren Biografien ohne Scrollen passen. */
@media (min-width: 901px) {
  .drivr.sab .soc-team-flip-front .soc-team-name { font-size: 20px !important; }
  .drivr.sab .soc-team-flip-front .soc-team-role {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
  }
  .drivr.sab .soc-team-flip-back { padding: 30px 26px !important; }
  .drivr.sab .soc-team-flip-back .soc-team-name {
    font-size: 19px !important;
    margin-bottom: 6px !important;
  }
  .drivr.sab .soc-team-flip-back .soc-team-role {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 16px !important;
  }
  .drivr.sab .soc-team-flip-back .soc-team-bio {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
}

/* ================================================================
   FIX 14.3: Team-Karten — Fotos sauber ausgeschnitten (kein Rand)
   Bisheriges Problem: feste Höhe 300px bei ~280px breiten Karten +
   object-fit:cover → Porträts wurden zu stark gezoomt/abgeschnitten.
   Lösung: Karte im Porträt-Verhältnis (3/4), Bild füllt randlos
   (cover) mit object-position center top → Gesichter bleiben sichtbar,
   kein beiger Rand, kein komischer Zoom. Flip-Mechanismus bleibt.
   ================================================================ */

/* Karte: hohes Porträt-Verhältnis → Bildbereich bleibt Porträt
   (bei 3/4 blieb nach der Namens-Box nur ein Querformat-Streifen,
   der Porträtfotos extrem zoomte). */
.drivr.sab .soc-team-flip {
  aspect-ratio: 3 / 5 !important;
}

/* Bildbereich: FESTES Seitenverhältnis (4/5) statt flex → ALLE Fotos
   exakt gleich groß, unabhängig von der Namens-/Rollen-Länge.
   (Vorher flex:1 → bei langen Namen schrumpfte das Bild, bei kurzen
   wuchs es → ungleiche Höhen wie bei Maresa vs. Richard.) */
.drivr.sab .soc-team-flip-front .soc-team-img {
  flex: 0 0 auto !important;
  height: auto !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  background: #1a1612 !important;
}

/* Foto füllt den Rahmen randlos; Fokus leicht oben → Gesichter sichtbar */
.drivr.sab .soc-team-flip-front .soc-team-img img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
  object-fit: cover !important;
  object-position: center 25% !important;
}

/* Namens-Box: nimmt den konstanten Rest der Karte; Text mittig vertikal,
   Überlauf bei sehr langen Namen sauber abgeschnitten. */
.drivr.sab .soc-team-flip-front .soc-team-meta {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px 16px 16px !important;
  overflow: hidden !important;
  justify-content: center !important;
}

/* Rückseite (Bio): mind. so hoch wie die Karte — scrollbar wenn nötig */
.drivr.sab .soc-team-flip-back {
  min-height: 0 !important;
}

/* ================================================================
   FIX 17: KENNZAHLEN-BEREICH — KOMPLETTER REDESIGN
   Ein einheitliches, harmonisches System für Web / Tablet / Mobile.
   Ersetzt die früheren verstreuten Stats-Fixes (1, 3, 6, 15).
   ================================================================ */

/* ---- Section ---- */
/* Schmale Leiste: deutlich weniger vertikales Padding (vorher
   clamp(52px,7vw,100px) ≈ 90px auf Desktop).
   :not(#hero) hebt die Spezifität auf (2,2,0) an, damit diese Regel die
   Bundle-Regel `.drivr section:not(#hero):not(#trust-strip)` (Spezifität
   2,1,1, !important) schlägt, die ab ≤720px sonst 56px Padding erzwingt.
   (#stats ist nie #hero → Selektor matcht immer.) */
.drivr #stats.stats-v3:not(#hero) {
  background: #f5f4f2 !important;
  padding: clamp(22px, 2.8vw, 38px) 0 !important;
  overflow: hidden !important;
}

/* ---- Raster: 5 gleichwertige Spalten ---- */
.drivr #stats.stats-v3 .stats-inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  place-items: stretch !important;
  gap: 0 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  /* Reste aus altem Scroll-Layout neutralisieren */
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scroll-snap-type: none !important;
  text-align: center !important;
}

/* ---- Eine Kennzahl ---- */
.drivr #stats.stats-v3 .stat-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 4px clamp(8px, 1.6vw, 24px) !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  flex: initial !important;
}

/* Dezente vertikale Trennlinie zwischen den Spalten */
.drivr #stats.stats-v3 .stat-col + .stat-col::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 66px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent,
              rgba(196,160,110,.42) 28%, rgba(196,160,110,.42) 72%, transparent) !important;
  display: block !important;
}

/* ---- Icon ---- */
.drivr #stats.stats-v3 .stat-icon {
  width: clamp(46px, 4.6vw, 56px) !important;
  height: clamp(46px, 4.6vw, 56px) !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(196,160,110,.45) !important;
  background: #ffffff !important;
  color: var(--sand, #c4a06e) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto clamp(14px, 1.8vw, 20px) !important;
  flex: 0 0 auto !important;
  transition: border-color .3s ease, transform .3s ease !important;
}
.drivr #stats.stats-v3 .stat-col:hover .stat-icon {
  border-color: var(--sand, #c4a06e) !important;
  transform: translateY(-2px) !important;
}
.drivr #stats.stats-v3 .stat-icon svg {
  width: 46% !important;
  height: 46% !important;
}

/* ---- Prefix "über" ---- */
.drivr #stats.stats-v3 .stat-prefix {
  display: block !important;
  font-family: var(--ui, "Raleway", sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--sand, #c4a06e) !important;
  margin: 0 0 7px !important;
  line-height: 1 !important;
}

/* ---- Zahl ---- */
.drivr #stats.stats-v3 .stat-num {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 clamp(13px, 1.6vw, 17px) !important;
  position: relative !important;
  height: auto !important;
  gap: 0 !important;
}
.drivr #stats.stats-v3 .stat-value-row,
.drivr #stats.stats-v3 .stat-value-row .cnt,
.drivr #stats.stats-v3 .stat-rating-value {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  font-family: var(--serif, "Albra Sans", serif) !important;
  font-size: clamp(33px, 4vw, 52px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #111111 !important;
  letter-spacing: -.02em !important;
}
.drivr #stats.stats-v3 .stat-unit {
  font-family: var(--serif, "Albra Sans", serif) !important;
  font-size: .5em !important;
  font-style: normal !important;
  margin-left: 4px !important;
  color: #111111 !important;
  align-self: flex-start !important;
  position: relative !important;
  top: .14em !important;
}

/* Gold-Unterstrich einheitlich unter jeder Zahl */
.drivr #stats.stats-v3 .stat-num::after {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 1px !important;
  background: var(--sand, #c4a06e) !important;
  opacity: .8 !important;
  margin: clamp(13px, 1.6vw, 17px) auto 0 !important;
}

/* Rating-Spalte: gleiche Höhe wie Prefix-Spalten, Sterne aus */
.drivr #stats.stats-v3 .stat-rating-stars { display: none !important; }
.drivr #stats.stats-v3 .stat-num.stars-num::before {
  content: "\00a0" !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 0 7px !important;
}

/* ---- Label ---- */
.drivr #stats.stats-v3 .stat-lab {
  font-family: var(--ui, "Raleway", sans-serif) !important;
  font-size: clamp(9.5px, 1vw, 11px) !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.56) !important;
  line-height: 1.4 !important;
  max-width: 150px !important;
  margin: 0 auto !important;
}

/* ===================== TABLET (≤960px) ===================== */
@media (max-width: 960px) {
  .drivr #stats.stats-v3 .stats-inner { padding: 0 16px !important; }
  .drivr #stats.stats-v3 .stat-col   { padding: 4px 8px !important; }
  .drivr #stats.stats-v3 .stat-col + .stat-col::before { height: 50px !important; }
}

/* ===================== MOBILE (≤600px) =====================
   Saubere vertikale Liste: Icon links, Zahl + Label rechts.   */
@media (max-width: 600px) {
  /* :not(#hero) — siehe Erklärung oben (schlägt die !important Bundle-Regel) */
  .drivr #stats.stats-v3:not(#hero) { padding: 24px 0 !important; }

  .drivr #stats.stats-v3 .stats-inner {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    padding: 0 26px !important;
  }

  .drivr #stats.stats-v3 .stat-col {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 18px !important;
    padding: 17px 0 !important;
    border-top: 1px solid rgba(0,0,0,.09) !important;
  }
  .drivr #stats.stats-v3 .stat-col:last-child {
    border-bottom: 1px solid rgba(0,0,0,.09) !important;
  }
  .drivr #stats.stats-v3 .stat-col + .stat-col::before { display: none !important; }

  .drivr #stats.stats-v3 .stat-icon {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    flex: 0 0 46px !important;
  }

  /* Zahl-Block: natürliche Breite + min-width für kurze Zahlen, damit die
     lange Zahl "1.000.000" nicht ins Label läuft. padding-right hält
     immer Abstand zum Label, white-space:nowrap verhindert Umbruch. */
  .drivr #stats.stats-v3 .stat-num {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    padding-right: 16px !important;
    white-space: nowrap !important;
  }
  .drivr #stats.stats-v3 .stat-num::after { display: none !important; }
  .drivr #stats.stats-v3 .stat-num.stars-num::before { display: none !important; }
  .drivr #stats.stats-v3 .stat-prefix {
    margin: 0 0 3px !important;
    text-align: left !important;
  }
  .drivr #stats.stats-v3 .stat-value-row,
  .drivr #stats.stats-v3 .stat-value-row .cnt,
  .drivr #stats.stats-v3 .stat-rating-value {
    font-size: 26px !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
  }

  .drivr #stats.stats-v3 .stat-lab {
    flex: 1 1 auto !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 !important;
  }
}

/* ================================================================
   FIX 18: "Bekannt aus" — Überschrift ÜBER die Logos statt links daneben
   Vorher: #trust-strip = horizontale Flex-Row → Label links mit
   Trennstrich, Logo-Marquee rechts. Jetzt: vertikal gestapelt,
   Label zentriert oben, Logos durchlaufend darunter.
   ================================================================ */
.drivr #trust-strip {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 0 !important;
  gap: 16px !important;
}

.drivr #trust-strip .trust-label {
  padding: 0 !important;
  margin: 0 !important;
  border-right: none !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.drivr #trust-strip .trust-marquee {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-left: 0 !important;
  align-self: stretch !important;
}


/* ================================================================
   FIX 19: Neue Partner-Logos (Auswahl an Partnern)
   Porsche Zentren Dortmund·Soest·Recklinghausen + Heusel Automobile.
   Schwarz-auf-transparent aufbereitet -> passen auf den hellen Grund.
   ================================================================ */
.drivr #trusted.trusted-v3 .plogo-porsche-soest { height: 42px !important; }
.drivr #trusted.trusted-v3 .plogo-heusel        { height: 30px !important; }

@media (max-width: 600px) {
  .drivr #trusted.trusted-v3 .plogo-porsche-soest { height: 34px !important; }
  .drivr #trusted.trusted-v3 .plogo-heusel        { height: 26px !important; }
}

/* ================================================================
   FIX 20: "Auswahl an Partnern" — schmaler + mehr Logo-Abstand +
   fehlendes Logo "Porsche Zentren am Niederrhein".

   • Logo ist im JS-Fallback ergänzt (zwischen Porsche-Soest und Heusel),
     Quelle: /images/logospartner/Porsche…Niederrhein…Schriftzug.png.
     Hier nur die Dimensionierung (zweizeiliger Schriftzug → etwas höher).
   • Der Partner-Bereich (Caption + Logo-Reihe) wird so schmal wie der
     "Bekannt aus"-Streifen (#trust-strip ≈ 24px oben/unten):
       vorher  cap margin-top 56px · row padding-bottom 80px
       jetzt   cap margin-top 26px · row padding-bottom 26px
   • Größerer Abstand zwischen den Logos (column-gap 56px → 92px).
   ================================================================ */

/* Neues Logo: zweizeiliger Schriftzug, leicht höher als die einzeiligen */
.drivr #trusted.trusted-v3 .plogo-porsche-niederrhein { height: 50px !important; }

@media (min-width: 721px) {
  /* Strip-Höhe an "Bekannt aus" angleichen */
  .drivr #trusted.trusted-v3 .partners-cap {
    margin-top: 26px !important;
    margin-bottom: 20px !important;
  }
  .drivr #trusted.trusted-v3 .partners-row {
    padding-bottom: 26px !important;
    justify-content: center !important;
    -moz-column-gap: 92px !important;
    column-gap: 92px !important;
    row-gap: 34px !important;
  }
  /* Section-Bottom-Padding auf gleiche Höhe wie Top-Padding setzen */
  .drivr #trusted.trusted-v3 { padding-bottom: 18px !important; }
}

/* Mobile-Marquee (FIX 9.2): Logo in die Laufzeilen-Höhe einreihen */
@media (max-width: 720px) {
  .drivr #trusted.trusted-v3 .partners-row .plogo-porsche-niederrhein {
    height: 40px !important;
  }
}
@media (max-width: 600px) {
  .drivr #trusted.trusted-v3 .plogo-porsche-niederrhein { height: 38px !important; }
}

/* ================================================================
   FIX 21: Galerien — manuelle Pfeil-Navigation statt Auto-Scroll
   Betrifft alle Galerien (Home #gallery, Tailor-Made #tm-slider,
   Group-Tours, Society, Luxusreisen) — alle nutzen dieselbe
   .dgal-marquee-Komponente.

   • JS-Komponente: Slide-Duplizierung entfernt ([...t,...t] → [...t]),
     da kein nahtloser Endlos-Loop mehr nötig.
   • Auto-Scroll-Animation deaktiviert; Track wird horizontal scrollbar.
   • Prev/Next-Pfeile (per index.html injiziert) im Stil der
     Sportwagen-/Oldtimer-Tour-Galerie (.tour-nav).
   ================================================================ */

/* Marquee-Fade-Maske weg (kein Loop mehr), Container als Pfeil-Anker */
.drivr .dgal-marquee {
  position: relative !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Track: keine Animation, stattdessen manueller Horizontal-Scroll */
.drivr .dgal-marquee .dgal-track {
  animation: none !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.drivr .dgal-marquee .dgal-track::-webkit-scrollbar { display: none !important; }
.drivr .dgal-marquee .dgal-slide { scroll-snap-align: center !important; }

/* Pfeil-Buttons — analog .tour-nav (weißer Kreis, Chevron) */
.drivr .dgal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.drivr .dgal-nav svg { width: 20px; height: 20px; }
.drivr .dgal-nav:hover {
  background: #fff;
  border-color: var(--sand, #c4a06e);
  transform: translateY(-50%) scale(1.06);
}
.drivr .dgal-nav-prev { left: 18px; }
.drivr .dgal-nav-next { right: 18px; }

@media (max-width: 720px) {
  .drivr .dgal-nav { width: 40px; height: 40px; }
  .drivr .dgal-nav svg { width: 18px; height: 18px; }
  .drivr .dgal-nav-prev { left: 10px; }
  .drivr .dgal-nav-next { right: 10px; }
}

/* Reduzierte Bewegung respektieren (war zuvor animationsbasiert) */
@media (prefers-reduced-motion: reduce) {
  .drivr .dgal-marquee .dgal-track { scroll-behavior: auto !important; }
}

/* ================================================================
   FIX 22: Founder-Sektion ("Hi, ich bin Ernst – Gründer von DRIVR")
   Oben/unten zu viel Abstand. Vorher ≈102px (8–10vw) → deutlich schmaler.
   :not(#hero) hebt die Spezifität auf (2,2,0) an, damit diese Regel die
   !important-Bundle-Regeln (u.a. section:not(#hero):not(#trust-strip),
   Spezifität 2,1,1) auf allen Breakpoints schlägt.
   ================================================================ */
.drivr #founder.founder-light:not(#hero) {
  padding: clamp(44px, 5vw, 72px) 0 !important;
}

/* ================================================================
   FIX 23: "Lifestyle-Reisen 2026" — Kategorie-Überschriften
   ("Sportwagen-Erlebnisreisen" / "Oldtimer-Urlaubsreisen") größer,
   damit die zwei Kategorien klar erkennbar & unterscheidbar sind.
   Vorher: 13px Eyebrow-Stil. Jetzt: deutlich größere Kategorie-Titel.
   Laufweite leicht reduziert, damit die größere Großschrift nicht
   überläuft und gut lesbar bleibt.
   ================================================================ */
.drivr #tours .tour-bhed .ey {
  font-size: clamp(18px, 2vw, 24px) !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Goldene Linie vor dem Label an die größere Schrift anpassen */
.drivr #tours .tour-bhed:before {
  width: 46px !important;
  height: 2px !important;
}

/* ================================================================
   FIX 24: Brand-Experiences "Referenzen" — Absatzausrichtung
   Der Intro-Absatz ("Von der Oldtimer-Rallye im bayerischen
   Voralpenland …") saß in der rechten Spalte eines 2-Spalten-Grids
   (1.1fr 1fr) und stand dadurch zu weit rechts. Jetzt einspaltig
   gestapelt → Titel UND Absatz linksbündig am Containerrand,
   bündig mit den darunterliegenden "Case · Live Event"-Blöcken.
   ================================================================ */
.drivr .oem-case-head .oem-case-head-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
.drivr .oem-case-head .oem-case-head-grid > p {
  max-width: 760px;
  margin-top: 4px !important;
}

/* ================================================================
   FIX 25: Brand-Experiences — uneinheitliche Sektions-Überschriften
   Zwei Überschriften waren kleiner/anders als die übrigen H2 der Seite
   (Standard ≈ clamp(28px,3.2vw,44px), Albra Sans):
     • "Drei Ziele. Ein Partner."  (.oem-goals-head h2) — fehlte in der
       Standard-Größenregel des Bundles → zu klein.
     • "Erlebnisse, die Marken erlebbar machen." (.oem-intro-section h2)
       — Inline-Style (Serif + abweichende Größe). !important schlägt
       den Inline-Style und vereinheitlicht Größe/Schrift.
   ================================================================ */
.drivr .oem-goals-head h2,
.drivr .oem-intro-section h2 {
  font-family: "Albra Sans", "Raleway", system-ui, sans-serif !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.008em !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

@media (max-width: 720px) {
  .drivr .oem-goals-head h2,
  .drivr .oem-intro-section h2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
}

/* ================================================================
   FIX 26: Gruppenreisen (/tailor-made/group-tours) — drei Punkte
   ================================================================ */

/* 26.1 Kein Abstand zwischen Galerie und Folgesektion ("Sie brauchen
   Ideen? Wir haben viele."). Die Galerie-Sektion hatte unten
   clamp(48px,7vw,88px) Padding → leeres Band. Entfernt, sodass die
   Galerie direkt an die dunkle Sektion anschließt. */
.drivr .gt-gallery-marquee {
  padding-bottom: 0 !important;
}

/* 26.2 Letzte Überschrift "Nicht geplant für alle. Sondern individuell
   für Sie." (.gt-final-h) war 28px → auf Standardgröße/-style der
   übrigen Seitenüberschriften (≈40px, Albra Sans) angeglichen. */
.drivr .gt-final-h {
  font-family: "Albra Sans", "Raleway", system-ui, sans-serif !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.008em !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
@media (max-width: 720px) {
  .drivr .gt-final-h {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
}

/* 26.3 Bild der letzten Sektion war beschnitten (Auto/Reifen unten weg).
   Bildausschnitt nach unten verschieben, damit das Fahrzeug vollständig
   sichtbar bleibt (cover bleibt, nur Position angepasst). */
.drivr .gt-final-bg {
  background-position: 50% 78% !important;
}

/* ================================================================
   FIX 27: Footer auf Legal-Seiten (Impressum, Datenschutz, AGB)
   Diese Seiten rendern ohne .drivr-Wrapper → sämtliche
   ".drivr footer"-Regeln greifen nicht. Der Footer erscheint
   dadurch als unsichtbarer Block (transparenter Hintergrund,
   weiße Links auf weißem Grund). Das ist der "seltsame Block"
   unten links im Impressum.
   Selector: main.min-h-screen ist exklusiv für diese Seiten und
   tritt nie auf normalen DRIVR-Seiten (mit .drivr-Wrapper) auf.
   ================================================================ */
main.min-h-screen footer {
  background: #0b0b0b !important;
  color: #ffffffd1 !important;
  padding: 56px 0 24px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* FAQ-Link-Styling: farbige Verlinkungen in FAQ-Antworten */
.drivr .faq-a a {
  color: var(--sand, #c4a06e);
  text-decoration: underline;
}

/* ================================================================
   FIX 28: Team-Grid — 3 Spalten statt 4 (9 Mitglieder = 3×3)
   Bundle-Basis: repeat(4,1fr). Mit Gerda jetzt 9 Personen →
   exakt 3 volle Zeilen bei 3 Spalten.
   ================================================================ */
.drivr.sab .sab-team-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Tablet: 2 Spalten */
@media (max-width: 900px) {
  .drivr.sab .sab-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Smartphone: nur EINE Person pro Reihe — breitere Karte, damit die Bio
   ohne Scrollen vollständig passt (bei 2 Spalten waren die Karten zu
   schmal → Bio-Rückseite scrollte stark). */
@media (max-width: 640px) {
  .drivr.sab .sab-team-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 22px !important;
  }
  /* Auf voller Breite kein extrem hohes Hochformat — handlichere Karte,
     deren Rückseite trotzdem genug Platz für lange Biografien bietet. */
  .drivr.sab .soc-team-flip {
    aspect-ratio: 4 / 5 !important;
  }
  /* Foto darf schrumpfen, damit Name + Rolle unten sichtbar bleiben
     (festes 4/5-Bild füllte sonst die ganze Karte → Meta rausgedrückt).
     Bei 1 Spalte sind alle Karten gleich breit → Bildgrößen bleiben
     ohnehin konsistent. */
  .drivr.sab .soc-team-flip-front .soc-team-img {
    aspect-ratio: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .drivr.sab .soc-team-flip-front .soc-team-meta {
    flex: 0 0 auto !important;
  }
  /* Bio-Rückseite: Text vollständig sichtbar (kein Scroll-Zwang). */
  .drivr.sab .soc-team-flip-back {
    overflow-y: visible !important;
    justify-content: center !important;
    padding: 24px 22px !important;
  }
  .drivr.sab .soc-team-flip-back .soc-team-bio {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
}

/* ================================================================
   FIX 29: Cookie-Consent-Banner + Einstellungen (DSGVO / Consent Mode v2)
   Eigener Namespace `drivr-cc-` OHNE .drivr-Scope, damit Banner und
   Modal auch auf den Legal-Seiten (Impressum/Datenschutz/AGB, ohne
   .drivr-Wrapper) korrekt erscheinen.
   ================================================================ */

.drivr-cc-banner,
.drivr-cc-modal-overlay,
.drivr-cc-banner *,
.drivr-cc-modal-overlay * {
  box-sizing: border-box;
  font-family: "Raleway", system-ui, -apple-system, sans-serif;
}

/* ---- Banner (unten fixiert) ---- */
.drivr-cc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;
  background: #0c0c0c;
  color: #ffffffde;
  border-top: 1px solid rgba(196, 160, 110, 0.35);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  padding: 26px clamp(20px, 4vw, 56px);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drivr-cc-banner.is-open { transform: translateY(0); }

.drivr-cc-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.drivr-cc-text { flex: 1 1 340px; min-width: 260px; }
.drivr-cc-title {
  font-family: "Albra Sans", "Raleway", system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: #fff;
}
.drivr-cc-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.drivr-cc-desc a {
  color: #d4b07a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Button-Reihe ---- */
.drivr-cc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.drivr-cc-btn {
  font-family: "Raleway", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.drivr-cc-btn-solid {
  background: #c4a06e;
  color: #0c0c0c;
  border-color: #c4a06e;
}
.drivr-cc-btn-solid:hover { background: #d4b07a; border-color: #d4b07a; }
.drivr-cc-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.drivr-cc-btn-ghost:hover { border-color: #fff; }
.drivr-cc-btn-text {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 13px 10px;
}
.drivr-cc-btn-text:hover { color: #fff; }

/* ---- Einstellungs-Modal ---- */
.drivr-cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drivr-cc-modal-overlay.is-open { opacity: 1; visibility: visible; }

.drivr-cc-modal {
  background: #ffffff;
  color: #1a1a1a;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(16px);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drivr-cc-modal-overlay.is-open .drivr-cc-modal { transform: translateY(0); }

.drivr-cc-modal-title {
  font-family: "Albra Sans", "Raleway", system-ui, sans-serif;
  font-size: 24px;
  margin: 0 0 10px;
  color: #1a1a1a;
}
.drivr-cc-modal-intro {
  font-size: 13.5px;
  line-height: 1.65;
  color: #555;
  margin: 0 0 24px;
}

/* ---- Kategorie-Zeile mit Toggle ---- */
.drivr-cc-cat {
  border-top: 1px solid #ececec;
  padding: 18px 0;
}
.drivr-cc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.drivr-cc-cat-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}
.drivr-cc-cat-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #777;
  margin: 8px 0 0;
}

/* Konkrete Dienste / Tracking-Punkte pro Kategorie (Transparenz) */
.drivr-cc-cat-services {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.drivr-cc-cat-services li {
  position: relative;
  font-size: 11.5px;
  line-height: 1.5;
  color: #555;
  padding: 3px 0 3px 16px;
}
.drivr-cc-cat-services li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4a06e;
}

/* Toggle-Switch */
.drivr-cc-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}
.drivr-cc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.drivr-cc-slider {
  position: absolute;
  inset: 0;
  background: #cfcfcf;
  border-radius: 24px;
  transition: background 0.25s;
  cursor: pointer;
}
.drivr-cc-slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.drivr-cc-switch input:checked + .drivr-cc-slider { background: #c4a06e; }
.drivr-cc-switch input:checked + .drivr-cc-slider::before { transform: translateX(20px); }
.drivr-cc-switch input:disabled + .drivr-cc-slider { background: #b8a079; cursor: not-allowed; opacity: 0.8; }

.drivr-cc-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.drivr-cc-modal-actions .drivr-cc-btn { flex: 1 1 auto; text-align: center; }

/* Ghost-Button im hellen Modal: dunkler Text/Rand statt weiß (sonst
   unsichtbar auf weißem Grund). */
.drivr-cc-modal .drivr-cc-btn-ghost {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.28);
}
.drivr-cc-modal .drivr-cc-btn-ghost:hover {
  border-color: #1a1a1a;
  background: rgba(0, 0, 0, 0.03);
}

/* Footer-Link "Cookie-Einstellungen" (injiziert in .footer-leg) */
.drivr-cc-footlink {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.drivr-cc-footlink:hover { opacity: 0.7; }

@media (max-width: 720px) {
  /* Banner kompakt: nur so hoch wie der Inhalt, kein erzwungener Leerraum */
  .drivr-cc-banner {
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .drivr-cc-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  /* KEINE flex-basis-Höhe (verursachte den großen Leerraum) */
  .drivr-cc-text {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .drivr-cc-title { font-size: 16px; margin-bottom: 6px; }
  .drivr-cc-desc { font-size: 12.5px; line-height: 1.55; }

  /* Buttons: sauber gestapelt, volle Breite, klare Hierarchie */
  .drivr-cc-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .drivr-cc-actions .drivr-cc-btn {
    width: 100%;
    text-align: center;
    flex: 0 0 auto;
  }
  /* Akzeptieren zuerst (primär), dann Ablehnen, dann Einstellungen als Textlink */
  .drivr-cc-actions .drivr-cc-btn-solid { order: 1; padding: 15px 26px; }
  .drivr-cc-actions .drivr-cc-btn-ghost { order: 2; padding: 14px 26px; }
  .drivr-cc-actions .drivr-cc-btn-text  { order: 3; padding: 8px 10px; }
}

/* ================================================================
   FIX 30: Touren-Detailseite — Abschnitts-Tab-Leiste (.sw-wrap)
   Bug: Die Tabs (Übersicht / Tagesbeschreibungen / Hotels / Services /
   Anmeldung) sind <button>-Elemente. Die Bundle-Regel
   `.sw-wrap a { flex: 0 0 auto }` greift nur auf <a>, nicht auf <button>
   → die Buttons hatten flex-shrink:1, schrumpften unter ihre Textbreite
   und der Text überlappte sich (auf Mobile unleserlich/unbedienbar).
   Fix: Buttons dürfen nicht schrumpfen; die Leiste scrollt horizontal
   (overflow-x:auto ist bereits gesetzt). Nur `flex` (kein white-space),
   da die Tab-Buttons bereits nowrap sind und `.sw-wrap` auch als
   Content-Wrapper mit CTA-Buttons dient — `flex:0 0 auto` ist im
   Block-Kontext wirkungslos und somit für CTAs ungefährlich. */
.sw-wrap > button {
  flex: 0 0 auto !important;
}

/* ================================================================
   FIX 31: Society-Galerie — weißer Balken oben/unten entfernen
   Die .soc-gallery hatte background:#fff + padding:clamp(40px,5vw,64px) 0.
   Da die Sektion darüber (soc-about) schwarz und darunter (soc-shop)
   beige ist, erschien das weiße Padding als störender weißer Balken.
   Padding entfernt → Galerie schließt bündig an die Nachbarsektionen an
   (deren eigenes Padding sorgt weiterhin für sauberen Abstand zum Text).
   ================================================================ */
/* Society-Galerie auf allen Breakpoints bündig.
   Selektor mit :not(#hero):not(#trust-strip) → Spezifität (2,2,1),
   schlägt die Bundle-Regel .drivr section:not(#hero):not(#trust-strip)
   {padding!important} (2,1,1). */
.drivr section.soc-gallery:not(#hero):not(#trust-strip) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================================================
   FIX 32: ALLE Galerien auf dem Smartphone bündig an die Nachbar-
   sektionen anschließen — unnötiges vertikales Padding entfernen.
   Die Galerie-Sektionen tragen die Klasse .gallery-v3 (Home #gallery,
   Tailor-Made, Society, Sub-Brand-Touren …). Sie sind <section> und
   bekamen über die generische Bundle-Regel
   .drivr section:not(#hero):not(#trust-strip){padding:56px!important}
   (Spezifität 2,1,1) ihr vertikales Padding. Daher hier derselbe
   :not()-Aufbau + zusätzliche Klasse → Spezifität (2,2,1) gewinnt.
   ================================================================ */
@media (max-width: 720px) {
  .drivr section.gallery-v3:not(#hero):not(#trust-strip),
  .drivr section.soc-gallery:not(#hero):not(#trust-strip) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Galerien, die als <div> ausgeliefert werden (nicht von der
     section-Regel betroffen, aber zur Sicherheit) */
  .drivr .gt-gallery-marquee {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ================================================================
   FIX 33: OEM "Unsere Formate"-Karten (Markenerlebnisse & Incentives)
   — clean auf Mobile.
   Problem 1: Der Icon-Container .oem-cell-icon ist display:inline-flex
   → die Breite schrumpft auf den Icon-Inhalt (24px), Höhe bleibt 46px
   → mit border-radius:50% entsteht eine ovale Verzerrung.
   Lösung: feste 46×46-Kreise (display:flex, zentriert, flex:0 0 auto).
   Problem 2: Auf Touch-Geräten bleibt der :hover-Zustand „kleben“
   (eine Karte wirkte dauerhaft gold hervorgehoben). Lösung: Hover-
   Effekte auf Touch neutralisieren.
   ================================================================ */
.drivr .oem-cell-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

@media (hover: none), (pointer: coarse) {
  .drivr .oem-cell:hover {
    transform: none !important;
    border-color: rgba(196, 160, 110, 0.18) !important;
    box-shadow: none !important;
  }
  .drivr .oem-cell:hover::before { opacity: 0 !important; }
  .drivr .oem-cell:hover::after  { width: 0 !important; }
  .drivr .oem-cell:hover .oem-cell-icon {
    background: transparent !important;
    border-color: rgba(184, 160, 122, 0.5) !important;
    color: var(--gold, #c4a06e) !important;
  }
  .drivr .oem-cell:hover h3 { transform: none !important; color: #fff !important; }
}

/* ================================================================
   FIX 34: DRIVR FAQ — Tab-Menü (DRIVR / Sportwagen / Oldtimer)
   Tab-Leiste über der FAQ-Liste; Logik in assets/faq-tabs.js.
   ================================================================ */
.drivr .faq-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
.drivr .faq-tab {
  font-family: "Raleway", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  padding: 13px 26px;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.drivr .faq-tab:hover {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.4);
}
.drivr .faq-tab.is-active {
  color: #fff;
  background: #c4a06e;
  border-color: #c4a06e;
}

/* Mehr-Absatz-Antworten (Sportwagen/Oldtimer) sauber gesetzt */
.drivr .faq-a-multi span {
  display: block;
}
.drivr .faq-a-multi span + span {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .drivr .faq-tabs {
    gap: 8px;
    margin-bottom: 28px;
  }
  .drivr .faq-tab {
    flex: 1 1 auto;
    padding: 12px 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-align: center;
  }
}