/*
 * 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;
}

/* ================================================================
   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;
}

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

@media (max-width: 380px) {
  .drivr.sab .sab-team-grid {
    grid-template-columns: 1fr !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;
}

/* 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) {
  .drivr-cc-banner-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .drivr-cc-actions { width: 100%; }
  .drivr-cc-actions .drivr-cc-btn-solid,
  .drivr-cc-actions .drivr-cc-btn-ghost { flex: 1 1 auto; text-align: center; }
}

/* ================================================================
   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;
}