/* ══════════════════════════════════════════════════════════════════════════
   Linh Tran — Combined Stylesheet (nav + mobile-fixes + cookies)
   ══════════════════════════════════════════════════════════════════════════ */

/* === nav.css === */
/* ══════════════════════════════════════════════════════════════════════════
   Linh Tran — Unified Navigation
   Pixel-identisch zum Landing-Page-Nav, aber ohne Tailwind-Abhaengigkeit.
   Einbinden mit:  <link rel="stylesheet" href="nav.css" />
   ══════════════════════════════════════════════════════════════════════════ */

/* Inter-Font wird bereits global über den <style>-Block jeder Seite geladen
   (Weight-Range 300-900). Hier KEIN eigener @import — sonst entsteht eine
   zusätzliche Request-Kette, die LCP verzögert. */

.ln-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #1f1f1f;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.ln-nav {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 56px;
  margin: 0;
}
@media (min-width: 768px) {
  .ln-nav { height: 48px; padding: 0 24px; }
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.ln-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  flex-shrink: 0;
}
.ln-logo img {
  height: 28px; width: auto; display: block;
  filter: drop-shadow(0 0 2px rgba(230, 60, 47, 0.3));
}
.ln-logo span {
  font-size: 16px; font-weight: 700; letter-spacing: 0.06em;
  color: #ffffff; text-transform: uppercase;
  line-height: 1;
}

/* ── Desktop Links ────────────────────────────────────────────────────────── */
.ln-links {
  display: none;
  align-items: center; gap: 2px;
}
@media (min-width: 768px) {
  .ln-links { display: flex; }
}
.ln-links a {
  display: inline-flex; align-items: center; height: 36px;
  padding: 0 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: #a1a1aa; text-transform: uppercase; text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.ln-links a:hover { color: #ffffff; background: rgba(255,255,255,0.05); }
.ln-links a.ln-active { color: #ffffff; }

/* ── Desktop Mega-Menü ────────────────────────────────────────────────── */
.ln-group { position: relative; }
.ln-group-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 12px; border: none; background: transparent;
  font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: #a1a1aa; text-transform: uppercase;
  cursor: pointer; border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.ln-group-trigger:hover,
.ln-group--open .ln-group-trigger { color: #ffffff; background: rgba(255,255,255,0.05); }
.ln-group-trigger.ln-active { color: #ffffff; }
.ln-group-trigger .ln-caret {
  transition: transform 0.2s ease;
  flex-shrink: 0; opacity: 0.7;
}
.ln-group--open .ln-group-trigger .ln-caret { transform: rotate(180deg); opacity: 1; }

.ln-mega {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid #1f1f1f; border-radius: 8px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
  z-index: 200;
}
.ln-group--open .ln-mega,
.ln-group:focus-within .ln-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.ln-group:focus-within .ln-group-trigger { color: #ffffff; background: rgba(255,255,255,0.05); }
.ln-group:focus-within .ln-group-trigger .ln-caret { transform: rotate(180deg); opacity: 1; }
.ln-mega-item {
  display: flex; align-items: center;
  height: 36px; padding: 0 12px;
  border-radius: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4d4d8; text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.ln-mega-item:hover { background: rgba(255,255,255,0.05); color: #ffffff; }
.ln-mega-item--active {
  color: #ffffff;
  background: rgba(230,60,47,0.08);
  box-shadow: inset 2px 0 0 #e63c2f;
  padding-left: 14px;
}

/* ── CTA Button ───────────────────────────────────────────────────────────── */
.ln-cta {
  display: inline-flex; align-items: center; height: 36px;
  margin-left: 12px; padding: 0 20px;
  background: #e63c2f; color: #ffffff !important; border: none;
  border-radius: 9999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 0 0 0 rgba(230,60,47,0);
}
.ln-cta:hover {
  background: #e63c2f;
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(230,60,47,0.25);
}

/* ── Mobile Hamburger ─────────────────────────────────────────────────────── */
.ln-burger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid #333333; border-radius: 6px;
  background: transparent; color: #ffffff;
  cursor: pointer; padding: 0;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ln-burger { display: none; }
}
.ln-burger-icon { position: relative; width: 18px; height: 14px; display: block; }
.ln-burger-icon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #ffffff; border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
.ln-burger-icon .ln-bt { top: 0; }
.ln-burger-icon .ln-bm { top: 6px; }
.ln-burger-icon .ln-bb { top: 12px; }
.ln-burger[aria-expanded="true"] .ln-burger-icon .ln-bt { top: 6px; transform: rotate(45deg); }
.ln-burger[aria-expanded="true"] .ln-burger-icon .ln-bm { opacity: 0; }
.ln-burger[aria-expanded="true"] .ln-burger-icon .ln-bb { top: 6px; transform: rotate(-45deg); }

/* ── Mobile Menu Overlay ──────────────────────────────────────────────────── */
.ln-mobile {
  position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid #262626;
  padding: 20px; z-index: 99;
  display: none; flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ln-mobile.ln-open { display: flex; }
@media (min-width: 768px) { .ln-mobile.ln-open { display: none; } }

.ln-mobile-links { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.ln-mobile-links a {
  display: flex; align-items: center; height: 44px;
  padding: 0 12px; border-radius: 6px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  color: #d4d4d8; text-transform: uppercase; text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ln-mobile-links a:hover { color: #ffffff; background: rgba(255,255,255,0.05); }
.ln-mobile-links a.ln-active { color: #ffffff; }

/* ── Mobile Accordion-Gruppe ──────────────────────────────────────────── */
.ln-mobile-group { display: flex; flex-direction: column; }
.ln-mobile-group-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 44px;
  padding: 0 12px; border: none; background: transparent;
  font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  color: #d4d4d8; text-transform: uppercase;
  cursor: pointer; border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
  text-align: left;
}
.ln-mobile-group-trigger:hover { color: #ffffff; background: rgba(255,255,255,0.05); }
.ln-mobile-group-trigger.ln-active { color: #ffffff; }
.ln-mobile-plus {
  font-size: 22px; font-weight: 300; line-height: 1; color: #e63c2f;
  transition: transform 0.25s ease;
  display: inline-block;
}
.ln-mobile-group-trigger[aria-expanded="true"] .ln-mobile-plus {
  transform: rotate(45deg);
}
.ln-mobile-group-panel {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 0 8px 8px; padding: 4px 0 4px 14px;
  border-left: 2px solid #e63c2f;
}
.ln-mobile-group-panel a {
  height: 40px; padding: 0 12px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center;
  border-radius: 6px;
  text-transform: uppercase; text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ln-mobile-group-panel a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.ln-mobile-group-panel a.ln-active { color: #fff; }
.ln-mobile-group-panel[hidden] { display: none; }

.ln-mobile-cta {
  margin-top: auto; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  background: #e63c2f; color: #ffffff !important; border: none;
  border-radius: 9999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  box-shadow: 0 0 0 0 rgba(230,60,47,0);
}
.ln-mobile-cta:hover {
  background: #e63c2f;
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(230,60,47,0.25);
}

/* ── Top-Spacer (damit fixed Nav nicht den Content verdeckt) ──────────────── */
.ln-spacer { height: 56px; }
@media (min-width: 768px) { .ln-spacer { height: 48px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Standard Hover-Effekt für rote Brand-Buttons (site-weit)
   Anwendung: .btn-cta auf jedem Button/Link, oder automatisch via .btn-primary,
   .btn-red, .ln-cta — gleicher Effekt überall.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-cta,
.btn-primary,
.btn-red {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 0 0 0 rgba(230,60,47,0);
  color: #ffffff !important;
}
.btn-cta:hover,
.btn-primary:hover,
.btn-red:hover,
.ln-cta:hover,
.ln-mobile-cta:hover {
  background: #e63c2f !important;
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(230,60,47,0.25);
}

/* Eigene Definition für `.btn-cta` Standard-CTA Button */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.625rem;
  height: 3rem; padding: 0 2rem;
  background: #e63c2f;
  border: none; border-radius: 9999px;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  font-family: inherit;
}

/* Auch alle Tailwind-Buttons mit Brand-Hintergrund (#e63c2f) erhalten den Effekt */
a[class*="bg-[#e63c2f]"],
button[class*="bg-[#e63c2f]"] {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 0 0 0 rgba(230,60,47,0);
  color: #ffffff !important;
}
a[class*="bg-[#e63c2f]"]:hover,
button[class*="bg-[#e63c2f]"]:hover {
  background-color: #e63c2f !important;
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(230,60,47,0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   Globale Accessibility-Defaults (sitewide via nav.css)
   ══════════════════════════════════════════════════════════════════════════ */

/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #e63c2f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-Link: visuell komplett unsichtbar (clip-path + 1px), erst bei
   Tastatur-Fokus sichtbar. Klick/Touch zeigt ihn NICHT, weil :focus-visible
   nur auf echte Tastatur-Navigation reagiert. */
.skip-to-main {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background: #e63c2f;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.skip-to-main:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: 6px;
  z-index: 10000;
}

/* prefers-reduced-motion: alle Animationen runterregeln, Hero-Video pausieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] {
    /* Bewegtbild ist fürs UX nicht zwingend nötig — auf erste Frame zeigen */
    animation-play-state: paused !important;
  }
}

/* === mobile-fixes.css === */
/* ════════════════════════════════════════════════════════════════════════
   Mobile-Fixes — werden NUR unter 768 px aktiv, Desktop bleibt unverändert.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   GLOBAL · Horizontalen Body-Scroll verhindern (sitewide)
   Mehrere Seiten nutzen Breakout-Tricks (`width: calc(100vw - 3rem);
   margin-left: 50%; transform: translateX(-50%);`) für Galerien, Foto-
   Karussells und Hero-Sektionen. Auf bestimmten Viewport-Breiten oder bei
   Scrollbar-Berechnungsfehlern können diese minimal über das Viewport
   hinausragen und einen waagerechten Body-Scroll auslösen. `overflow-x: clip`
   verhindert den Scroll, ohne `position: sticky`-Verhalten zu zerstören
   (im Gegensatz zu `overflow-x: hidden`). Fallback `hidden` für ältere
   Browser, die `clip` noch nicht kennen.
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ─────────────────────────────────────────────────────────────────────────
   A1 · Parallax abschalten
   `background-attachment: fixed` ist auf iOS Safari + einigen Android-Browsern
   defekt (Bild wird übergroß gestreckt oder verschwindet). Auf Mobile fallen
   wir deshalb auf den normalen Scroll-Modus zurück.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [style*="background-attachment:fixed"],
  [style*="background-attachment: fixed"],
  .home-medien-section,
  .ndr-banner {
    background-attachment: scroll !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   A2 · Fussball-WM-Hero-Bild — auf Mobile sauber zentrieren
   Desktop nutzt width: 135% + translateX(10%) für eine künstlerische
   Verschiebung des Bildes nach rechts. Auf Mobile-Portrait rutscht das Bild
   dadurch fast komplett aus dem Viewport.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-bg img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: 65% center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   A3 · 100vh → 100dvh auf Mobile
   Auf iOS/Android ändert sich vh nicht, wenn die Browser-Adressleiste
   ein-/ausgeblendet wird. Inhalte können dadurch unten abgeschnitten werden.
   100dvh respektiert den dynamischen Viewport. @supports stellt sicher,
   dass ältere Browser die ursprüngliche vh-Regel weiter nutzen.
   ───────────────────────────────────────────────────────────────────────── */
@supports (min-height: 100dvh) {
  @media (max-width: 767px) {

    /* Tailwind-Arbitrary-Klasse: min-h-[calc(100vh-56px)] */
    .min-h-\[calc\(100vh-56px\)\] {
      min-height: calc(100dvh - 56px) !important;
    }

    /* fussball-wm-2026.html: .hero { min-height: 100vh } */
    .hero {
      min-height: calc(100dvh - 56px) !important;
    }

    /* buch.html, bestellen.html, feedback.html: inline `min-height: calc(100vh - 56px)` */
    [style*="100vh - 56px"] {
      min-height: calc(100dvh - 56px) !important;
    }

    /* Tailwind: min-h-screen */
    .min-h-screen {
      min-height: 100dvh !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   B1 · Kundenstimmen — horizontales Swipe-Karussell auf Mobile
   Desktop: zwei Spalten mit vertikaler Scroll-Animation in einer 680 px
   hohen, gemaskten Box. Auf Mobile fühlt sich das beengt und unkontrollierbar
   an. Wir verwandeln den Block in EIN flüssiges horizontales Swipe-Karussell
   mit Snap-Points. Duplikate (für Desktop-Loop) werden ausgeblendet.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* 1. Container: feste Höhe + Maske + Overflow-Hidden aufheben,
        Aus Grid wird ein horizontaler Flex-Scroll-Container */
  #testimonials .grid[style*="height:680px"] {
    height: auto !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.5rem 1.25rem 1.25rem !important;
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
  }
  #testimonials .grid[style*="height:680px"]::-webkit-scrollbar {
    display: none !important;
  }

  /* 2. Beide Kolumnen → display:contents, sodass ihre Karten direkt
        zu Kindern des Flex-Karussells werden, und Animation aus. */
  #testimonials .t-col-inner {
    display: contents !important;
    animation: none !important;
  }

  /* 3. Duplikate ausblenden (sind nur für die Desktop-Loop-Animation da) */
  #testimonials .t-col-inner > div:nth-child(n+4) {
    display: none !important;
  }

  /* 4. Karten: feste Breite, mittig snappend */
  #testimonials .t-col-inner > div {
    flex: 0 0 86% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   B2 · Sport-Press-Logos — auf Mobile NUR Sports Illustrated zeigen
   sport.html nutzt grid-cols-2 sm:grid-cols-3 md:grid-cols-5 für 5 Logos.
   Auf Mobile lenkt die volle Logo-Reihe vom Hero ab und sieht zerrissen
   aus. Wir blenden alle bis auf das erste Logo (Sports Illustrated) aus
   und zentrieren es als prominentes Einzel-Element.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sport-press-cell:not(:first-child) {
    display: none !important;
  }
  .sport-press-cell:first-child {
    grid-column: 1 / -1 !important;
    max-width: 220px !important;
    justify-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   B3 · Sport.html Stat-Akkordeon — einheitliche Mobile-Breite
   Die drei ausklappbaren Karten (5×, 3×, 1×) haben auf Desktop Platz für
   große Zahlen + lange Labels. Auf Mobile sprengen Zahl + Label + Toggle
   das Viewport (Tischfußball-Weltmeisterin etc.). Wir verkleinern Padding,
   Zahl-Mindestbreite und Label-Schrift so, dass alle Karten gleich
   aussehen und sauber ins Viewport passen — auch bei sehr schmalen Phones.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .stat-card__header {
    gap: 0.75rem !important;
    padding: 1rem 1rem 1rem 1.15rem !important;
  }
  .stat-num {
    font-size: 1.85rem !important;
    min-width: 52px !important;
  }
  .stat-label {
    font-size: 0.74rem !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .stat-card__toggle {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
  }
  .stat-card__detail-text {
    padding: 0 1.15rem 1.15rem !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
  }
}

/* Sehr schmale Phones (≤360 px) — noch kompakter, damit nichts überläuft */
@media (max-width: 360px) {
  .stat-card__header {
    gap: 0.6rem !important;
    padding: 0.9rem 0.85rem 0.9rem 1rem !important;
  }
  .stat-num {
    font-size: 1.65rem !important;
    min-width: 46px !important;
  }
  .stat-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.04em !important;
  }
  .stat-card__toggle {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   C1 · iOS-Auto-Zoom in Form-Inputs verhindern
   Wenn ein input/textarea eine Schriftgröße < 16 px hat, zoomt iOS Safari
   beim Fokussieren ungewollt rein. 16 px erzwingt natürliches Verhalten.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   C2 · Lange deutsche Wörter sauber umbrechen + iOS-Textgröße fixen
   Wörter wie "Tischfußball-Weltmeisterin" können sonst aus dem Viewport
   stoßen. text-size-adjust verhindert iOS-Auto-Vergrößern im Querformat.
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 767px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   C3 · Tap-Highlight in Markenfarbe statt Standard-Blau
   Reine Cosmetik, schadet Desktop nicht (gilt nur für Touch-Geräte).
   ───────────────────────────────────────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: rgba(230, 60, 47, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────
   C4 · prefers-reduced-motion respektieren
   Nutzer mit reduzierter Bewegung sollen die schweren Animationen
   (Logo-Slider, Testimonial-Loop, Reveal-Effekte) abschalten können.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   C5 · Bilder dürfen nie über ihren Container hinausragen
   Tailwind-Preflight setzt das eigentlich schon, aber inline-Bilder mit
   width/height-Attributen ignorieren es teilweise. Sicherheitsnetz für
   Mobile-Layouts.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  img,
  video,
  iframe {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   C6 · YouTube-Iframe-Aspect-Ratio absichern
   Falls Iframes feste height/width-Attribute haben, sollen sie auf Mobile
   in 16:9 fließen, damit nichts überläuft.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  iframe[src*="youtube.com"],
  iframe[src*="youtube-nocookie.com"] {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   D1 · Globale Heading-Skalierung auf Mobile
   Headlines werden auf Mobile generell kleiner gesetzt, damit sie in 1–2
   Zeilen passen. Cap auf ~2.25rem für H1, ~1.85rem für H2, ~1.25rem für H3.
   Inline-clamp() Headlines werden gezielt überschrieben, da deren `min`
   sonst Mobile-Größen blockiert.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Allgemeine Caps für Heading-Tags */
  main h1,
  main h2,
  main h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  main h1 {
    font-size: clamp(1.85rem, 7vw, 2.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.005em !important;
  }
  main h2 {
    font-size: clamp(1.5rem, 6vw, 1.9rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.005em !important;
  }
  main h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important;
    line-height: 1.3 !important;
  }

  /* Inline-Style mit clamp() — die min-Werte wären sonst zu groß für Mobile */
  [style*="font-size:clamp"],
  [style*="font-size: clamp"] {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  /* Spezielle inline-clamp Hero-Headlines (sehr groß) gezielt kleiner */
  h1[style*="clamp(3"],
  h1[style*="clamp(2.75"],
  h2[style*="clamp(3"],
  h2[style*="clamp(2.75"] {
    font-size: clamp(1.85rem, 7vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   E1 · Testimonial-Karten — Modal-Pattern (sitewide)
   Wird von testimonial-modal.js dynamisch auf Karten angewendet.
   Auf Desktop bleibt die Karte voll lesbar; auf Mobile wird der Body
   auf 5 Zeilen geclippt und der "Vollständige Rezension"-Button sichtbar.
   ───────────────────────────────────────────────────────────────────────── */
.tm-card { position: relative; }
.tm-more {
  align-self: flex-start;
  margin-top: -0.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #e63c2f;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: none; /* Default: nur auf Mobile sichtbar */
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.tm-more:hover { color: #cc2200; gap: 0.55rem; }
.tm-more svg { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }

/* Modal-Container */
.tm-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tmFadeIn 0.25s ease forwards;
}
.tm-modal.tm-open { display: flex; }
@keyframes tmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tm-dialog {
  position: relative;
  background: #ffffff;
  border: 1px solid #d4af37;
  border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.25);
  max-width: 640px; width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2.5rem 2rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  animation: tmDialogIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes tmDialogIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-dialog__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(10,10,10,0.05);
  border: none; border-radius: 50%;
  color: #0a0a0a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tm-dialog__close:hover { background: rgba(230, 60, 47, 0.12); color: #e63c2f; transform: rotate(90deg); }
.tm-dialog__close svg { width: 18px; height: 18px; }
.tm-dialog__stars { font-size: 1.05rem; color: #f59e0b; }
.tm-dialog__title { font-size: 1.25rem; font-weight: 700; color: #0a0a0a; line-height: 1.3; margin: 0; }
.tm-dialog__body { color: #3f3f46; font-size: 0.95rem; line-height: 1.75; white-space: pre-line; margin: 0; }
.tm-dialog__footer { border-top: 1px solid #d4af37; padding-top: 1rem; margin-top: 0.25rem; }
.tm-dialog__name { font-weight: 700; color: #0a0a0a; font-size: 1rem; }
.tm-dialog__role { color: #e63c2f; font-size: 0.85rem; margin-top: 2px; font-weight: 500; }
body.tm-modal-open { overflow: hidden; }

/* ── Auf Mobile: tm-body kürzen + Mehr-Button anzeigen ────────────────── */
@media (max-width: 640px) {
  .tm-body {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tm-more { display: inline-flex; }
}

/* ─────────────────────────────────────────────────────────────────────────
   E2 · Testimonial-Karussell auf Mobile
   Index-Seite: zwei vertikal scrollende Spalten werden auf Mobile zu
   einem horizontalen Karussell mit Snap.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tm-testimonial-grid {
    height: auto !important;
    overflow: visible !important;
    overflow-x: auto !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.75rem !important;
    padding: 0 1rem 1rem !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tm-testimonial-grid::-webkit-scrollbar { display: none; }
  .tm-testimonial-grid .t-col-inner {
    animation: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  .tm-testimonial-grid .t-col-inner > div {
    flex: 0 0 80vw !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    padding: 1.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   F1 · Site-weite Haupt-CTA (.btn-primary)
   Übernimmt Größe, Farbe und Pfeil-Animation vom Keynotes-Button auf der
   Startseite. Wird sitewide auf allen primären CTAs verwendet.
   ───────────────────────────────────────────────────────────────────────── */
.btn-primary,
a.btn-primary,
button.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  height: 3.5rem !important;
  padding: 0 3rem !important;
  border-radius: 9999px !important;
  background: #e63c2f !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: #cc2200 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 0 4px rgba(230,60,47,0.25) !important;
}
.btn-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(230,60,47,0.35) !important;
}
/* Pfeil-Animation: SVG innerhalb wandert auf Hover nach rechts */
.btn-primary svg { transition: transform 0.3s ease; flex-shrink: 0; width: 18px; height: 18px; }
.btn-primary:hover svg { transform: translateX(4px); }

/* Mobile etwas kompakter, damit der Button in den Viewport passt */
@media (max-width: 640px) {
  .btn-primary,
  a.btn-primary,
  button.btn-primary {
    height: 3rem !important;
    padding: 0 1.75rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
  }
  .btn-primary svg { width: 16px; height: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   F2 · Inline-Kontaktformular — Nav-Row neu strukturiert (sitewide)
   Bisher 3-Spalten-Grid (Zurück | Stepper | Weiter) → auf engen Viewports
   kollabiert das. Wir machen aus der Nav-Row eine vertikale Flex-Spalte:
     1. Stepper zentriert
     2. „Weiter"/„Anfrage senden"-Button zentriert in eigener Zeile
     3. „Zurück"-Link zentriert darunter (nur sichtbar ab Schritt 2)
   Trust-Badges (eine Ebene tiefer) bleiben dank `justify-center` mittig
   und werden hier zusätzlich abgesichert.
   ID-Selektor (#icf-nav) wird verwendet, um das auf den 8 Form-Seiten
   inline gesetzte `grid-template-columns` und das in jedem File enthaltene
   .icf-nav-row-Mobile-Override (gap:0.5rem) per höherer Spezifität zu
   überschreiben.
   ───────────────────────────────────────────────────────────────────────── */
#icf-nav,
#icf-nav.icf-nav-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  grid-template-columns: none !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

/* Reihenfolge: Stepper → Weiter-Button → Zurück-Link */
#icf-nav > .justify-self-center { order: 1 !important; }
#icf-nav > .justify-self-end    { order: 2 !important; }
#icf-nav > .justify-self-start  { order: 3 !important; }

/* Margin-Reset, damit kein Tailwind-Justify-Self im Flex-Layout stört */
#icf-nav > .justify-self-start,
#icf-nav > .justify-self-center,
#icf-nav > .justify-self-end {
  margin: 0 !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* Zurück-Wrapper ausblenden, wenn der Button per `visibility:hidden`
   (Schritt 0) versteckt ist — sonst entsteht eine leere dritte Zeile.
   :has() ist seit 2023 in allen modernen Browsern verfügbar. */
#icf-nav > .justify-self-start:has(> button[style*="visibility:hidden"]),
#icf-nav > .justify-self-start:has(> button[style*="visibility: hidden"]) {
  display: none !important;
}

/* Weiter/Anfrage-Button: schön zentriert, auf Mobile fast volle Breite */
#icf-nav .icf-btn-next {
  justify-content: center !important;
  min-width: 220px !important;
}
@media (max-width: 640px) {
  #icf-nav,
  #icf-nav.icf-nav-row {
    gap: 0.85rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  #icf-nav .icf-btn-next {
    width: 100% !important;
    max-width: 320px !important;
    padding: 12px 22px !important;
    font-size: 0.88rem !important;
  }
  #icf-nav .icf-btn-back {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
  }
}

/* Trust-Badge-Strip — sitewide nochmals als zentriert abgesichert.
   Liegt direkt nach #icf-nav als Geschwister-<div>. */
#icf-nav + div {
  justify-content: center !important;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   E3 · Kundenstimmen-Karten als Mobile-Karussell (sitewide)
   Wird auf jedem Grid mit Klasse `ks-grid` aktiviert. Funktioniert mit oder
   ohne `tm-card`-Klasse auf den Karten — alle direkten Kinder werden zu
   gleich breiten Snap-Karten.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ks-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.75rem !important;
    padding: 0.25rem 1rem 1rem !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ks-grid::-webkit-scrollbar { display: none; }
  .ks-grid > .tm-card,
  .ks-grid > div {
    flex: 0 0 80vw !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
  }
  /* Spezifischere Padding-Reduktion nur für tm-card-Wrapper */
  .ks-grid > .tm-card { padding: 1.5rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   D2 · Einheitliches Styling für Section-Descriptions auf Mobile
   Lead-/Untertitel-Absätze (unter H1/H2-Headings, oft mit clamp() oder
   text-lg/text-xl gesetzt) bekommen sitewide einheitliche Größe und
   Zeilenhöhe, damit sie sich nicht "aufgeblasen" anfühlen.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Inline-clamp Beschreibungen (Startseite Keynotes/Showact etc.) */
  main p[style*="clamp(1rem"],
  main p[style*="clamp(1.05rem"],
  main p[style*="clamp(1.1rem"] {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* Tailwind-Pattern: text-lg md:text-xl (Hero-Subtitles auf Unterseiten) */
  main p[class*="text-lg"][class*="md:text-xl"],
  main p[class*="text-xl"][class*="md:text-2xl"],
  main p[class*="text-base"][class*="md:text-lg"] {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* Bestehende Tailwind-Subtitles unter Headings */
  main h1 + p,
  main h2 + p,
  main p.lead,
  main .text-center > p[class*="text-lg"],
  main .text-center > p[class*="text-xl"] {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   G1 · content-visibility — Browser überspringt Layout/Paint für nicht
   sichtbare Bereiche. Massiver Performance-Boost auf langen Seiten.
   contain-intrinsic-size gibt dem Browser eine grobe Layout-Schätzung,
   sonst springt der Scrollbar.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Sections jenseits des Viewports nicht rendern */
  main > section:not(:first-of-type),
  main > div > section,
  main section.cv-skip {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
  /* Footer (außerhalb main) auch */
  .lt-footer-wrap {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   G2 · Backdrop-Filter auf Mobile abschalten — GPU-Killer
   Statt Frosted-Glass-Effekt einfach opake Hintergründe verwenden.
   Massive Verbesserung der Scroll-Performance + Rendering-Zeit.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ln-header,
  .yt-overlay__card,
  #cc-main .pm,
  #cc-main .cm,
  .nav-pill,
  [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Navbar: opaker Hintergrund statt Glas */
  .ln-header { background: rgba(10, 10, 10, 0.98) !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   H1 · YouTube-Consent-Overlay — robuste Stile (von youtube-consent.js)
   ───────────────────────────────────────────────────────────────────────── */
.yt-embed {
  position: relative;
  display: block;
  background: #0a0a0a;
}
.yt-embed .yt-thumb {
  all: unset;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border-radius: inherit;
}
.yt-embed .yt-thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.yt-embed .yt-thumb-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.yt-embed .yt-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.25rem !important;
  color: #fff !important;
  pointer-events: none !important;
  border-radius: inherit;
  z-index: 2;
}
.yt-embed .yt-overlay__card {
  pointer-events: auto;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  max-width: min(92%, 360px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  color: #fff;
}
.yt-embed .yt-overlay__card h4 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #fff;
}
.yt-embed .yt-overlay__btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.yt-embed .yt-btn-primary {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  background: #e63c2f;
  color: #fff;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.yt-embed .yt-btn-primary:hover { background: #cc2200; transform: scale(1.03); }
.yt-embed .yt-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.yt-embed .yt-btn-secondary:hover { border-color: rgba(255,255,255,0.45); }
.yt-embed .yt-overlay__footer {
  margin: 0.85rem 0 0;
  font-size: 0.68rem;
  color: #a1a1aa;
  line-height: 1.45;
}
.yt-embed .yt-overlay__footer a { color: #e63c2f; text-decoration: underline; }
.yt-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: inherit;
}

/* === cookies.css === */
/* ══════════════════════════════════════════════════════════════════════════
   Cookie-Banner Styling — angeglichen an die Linh-Tran-Website
   Dark Theme, Brand-Rot #e63c2f, Inter, Pill-Buttons, Letter-Spacing.
   Override für CookieConsent v3.
   ══════════════════════════════════════════════════════════════════════════ */

#cc-main {
  /* CSS-Variablen, die CookieConsent für sein Theming verwendet */
  --cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Banner & Modal Hintergrund */
  --cc-bg: #0e0e0e;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #d4d4d8;

  /* Buttons */
  --cc-btn-primary-bg: #e63c2f;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #cc2200;
  --cc-btn-primary-hover-color: #ffffff;

  --cc-btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.18);
  --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.3);

  /* Toggle-Switches */
  --cc-toggle-on-bg: #e63c2f;
  --cc-toggle-off-bg: #3f3f46;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #1f1f1f;
  --cc-toggle-readonly-knob-bg: #71717a;
  --cc-toggle-readonly-knob-icon-color: #1f1f1f;

  /* Border / Trennlinien */
  --cc-separator-border-color: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-bg: #161616;
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-hover-bg: #1a1a1a;
  --cc-cookie-category-block-hover-border: rgba(230, 60, 47, 0.35);
  --cc-cookie-category-expanded-block-bg: #1a1a1a;

  /* Overlay (Backdrop) */
  --cc-overlay-bg: rgba(10, 10, 10, 0.78);
  --cc-overlay-opacity: 1;

  /* Footer-Links im Banner */
  --cc-footer-bg: #0a0a0a;
  --cc-footer-color: rgba(255, 255, 255, 0.55);
  --cc-footer-border-color: rgba(255, 255, 255, 0.06);
}

/* ── Banner: pill-form Buttons + Letter-Spacing wie .btn-primary ───────── */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  padding: 0.7rem 1.5rem !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  border-width: 1px !important;
}
#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(230, 60, 47, 0.25);
}

/* ── Banner-Container (Box, unten rechts) ────────────────────────────── */
#cc-main .cm {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(230, 60, 47, 0.12) !important;
  max-width: 420px !important;
}
#cc-main .cm__title {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.005em !important;
  color: #ffffff !important;
}
#cc-main .cm__desc {
  color: #d4d4d8 !important;
  line-height: 1.6 !important;
  font-size: 0.92rem !important;
}
#cc-main .cm__footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 0.85rem !important;
  font-size: 0.78rem !important;
}
#cc-main .cm__footer a {
  color: #e63c2f !important;
  text-decoration: none !important;
  margin-right: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
#cc-main .cm__footer a:hover {
  text-decoration: underline !important;
}

/* ── Preferences-Modal ────────────────────────────────────────────────── */
#cc-main .pm {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}
#cc-main .pm__title {
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
}
#cc-main .pm__section-title {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
}
#cc-main .pm__section-desc {
  color: #a1a1aa !important;
  line-height: 1.65 !important;
  font-size: 0.88rem !important;
}
#cc-main .pm__section--toggle .pm__section-arrow {
  color: #e63c2f !important;
}
#cc-main .pm__badge {
  display: inline-block;
  background: rgba(230, 60, 47, 0.12);
  color: #e63c2f;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid rgba(230, 60, 47, 0.3);
}
#cc-main .pm__section a {
  color: #e63c2f !important;
  text-decoration: underline !important;
}

/* ── Cookie-Tabelle ──────────────────────────────────────────────────── */
#cc-main .pm__section-table {
  font-size: 0.82rem !important;
}
#cc-main .pm__section-table th {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}
#cc-main .pm__section-table td {
  color: #d4d4d8 !important;
}

/* ── Toggle-Switches: rote Akzentfarbe ────────────────────────────────── */
#cc-main .section__toggle:checked + .toggle__icon {
  background: #e63c2f !important;
}

/* ── Mobile Anpassungen ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  #cc-main .cm {
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0.75rem !important;
  }
  #cc-main .cm__btn,
  #cc-main .pm__btn {
    font-size: 0.72rem !important;
    padding: 0.65rem 1.1rem !important;
  }
  #cc-main .cm__title { font-size: 1rem !important; }
  #cc-main .cm__desc { font-size: 0.85rem !important; }
}