/* ==========================================================================
   Racing Car Benz Relaunch, Stylesheet
   Rezept: Erfolgsmuster Webdesign (Abstände, Schriftstufen, Bewegung)
   Konzept "Boxengasse nach Mitternacht": fast schwarz, eine Akzentfarbe,
   Montserrat als einzige Familie, Sektor-Markierungen (S1 bis S4) als Leitmotiv.
   ========================================================================== */

@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); }
/* Ersatzschrift mit den Maßen von Montserrat (Live-Audit W1, 09.10.2026): Bis Montserrat geladen ist, steht Arial mit angepasster Größe da,
   Zeilenumbrüche und Höhen bleiben beim Schriftwechsel fast gleich (Einwilligungshinweis und Hero sprangen, mobil CLS 0,112).
   Werte gemessen: Breite echter Seitentexte Montserrat gegen Arial (400: 113 %, 600 gegen Arial Bold: 109 %),
   ascent und descent aus Montserrat (968 und 251 von 1000), geteilt durch size-adjust, weil Chrome die Overrides mitskaliert. */
@font-face { font-family: "Montserrat Fallback"; font-weight: 400; font-style: normal; src: local("Arial"), local("ArialMT");
  size-adjust: 113%; ascent-override: 85.7%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; font-weight: 600; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 109%; ascent-override: 88.8%; descent-override: 23%; line-gap-override: 0%; }
/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farbrollen (dunkel) */
  --bg: #09090b;
  --surface: #131317;
  --surface-2: #1b1b21;
  --line: rgba(255, 255, 255, .13);
  --text: #f4f4f6;
  --muted: #a6a6b0;
  --accent: #cf5bd9;          /* einzige Akzentfarbe, abgeleitet vom Magenta der Simulatoren */
  --accent-hover: #e27bea;
  --on-accent: #09090b;
  --link: #d98ae0;
  --footnote: rgba(255, 255, 255, .56);

  /* Farbrollen (hell, Vertrauensbereich) */
  --light: #f5f5f7;
  --light-text: #1d1d1f;
  --light-muted: #6e6e73;
  --light-line: rgba(0, 0, 0, .12);
  --accent-on-light: #9a2aa0;

  /* Abstände (Rezept 1.3) */
  --gap: 12px;                 /* Kachel zu Kachel */
  --tile-top: 56px;            /* Kachelkante bis Text */
  --cta-gap: 17px;
  --sec-top: 144px;
  --sec-bottom: 224px;
  --gutter: 24px;
  --max: 1240px;
  --header: 64px;

  /* Formen */
  --r-pill: 980px;
  --r-card: 12px;
  --r-tile: 28px;

  /* Bewegung (Rezept 6.2) */
  --ease-move: cubic-bezier(.25, .1, .3, 1);
  --ease-state: cubic-bezier(.4, 0, .6, 1);
  --t-fast: 100ms linear;
  --t-ui: 160ms ease-in-out;
  --t-state: 320ms var(--ease-state);

  /* Schriftstufen Desktop (Größe / Zeilenhöhe) */
  --fs-hero: clamp(44px, 8vw, 80px);
  --fs-section: 48px;  --lh-section: 52px;
  --fs-tile: 40px;     --lh-tile: 44px;
  --fs-sub: 28px;      --lh-sub: 32px;
  --fs-eyebrow: 24px;  --lh-eyebrow: 28px;
  --fs-body: 17px;     --lh-body: 26px;
  --fs-small: 14px;    --lh-small: 20px;
  --fs-foot: 12px;     --lh-foot: 16px;
}

@media (max-width: 1068px) {
  :root { --sec-top: 112px; --sec-bottom: 144px; --fs-section: 40px; --lh-section: 44px; }
}
@media (max-width: 734px) {
  :root {
    --gutter: 20px; --header: 56px;
    --sec-top: 88px; --sec-bottom: 112px;
    --tile-top: 32px;
    --fs-section: 32px; --lh-section: 36px;
    --fs-tile: 28px; --lh-tile: 32px;
    --fs-sub: 21px; --lh-sub: 25px;
    --fs-eyebrow: 21px; --lh-eyebrow: 25px;
  }
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); scroll-padding-bottom: 96px; }
/* Fokus beim Tabben nicht unter der festen Ticketleiste (Live-Audit W2, 09.10.2026). Unter 360 px ist die Leiste 85 px hoch. */
@media (max-width: 359px) { html { scroll-padding-bottom: 110px; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) "Montserrat", "Montserrat Fallback", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }   /* width und height Attribute dienen nur dem Seitenverhältnis, die Höhe regelt das Layout */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
/* hidden gilt immer (Nachbesserung 08.10.2026 abends): Regeln wie .link { display: inline-flex } oder .form { display: grid } hoben es auf,
   z. B. bei „+ weiteren Fehler hinzufügen“ nach 10 Zeilen und beim Fehlerjagd-Formular nach Aktionsende. Geprüft: kein Element auf
   den 77 Seiten in site/ ist trotz hidden absichtlich sichtbar. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Auf hellem Grund reicht das helle Violett nicht für 3:1, dort das dunklere (Gegenprüfung 09.10.2026: 2,69:1 auf 5,16:1) */
.theme-light :focus-visible, .site-footer :focus-visible, .crumbs :focus-visible { outline-color: var(--accent-on-light); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* Schriftstufen (Rezept 1.4): nur Gewicht 400, 600, 800 */
.t-hero { font-weight: 600; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.035em; }
.t-section { font-weight: 600; font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -.028em; }
.t-tile { font-weight: 600; font-size: var(--fs-tile); line-height: var(--lh-tile); letter-spacing: -.024em; }
.t-sub { font-weight: 400; font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: -.012em; color: var(--text); }
.t-caption { font-weight: 600; font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: -.02em; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: -.008em; }
.t-foot { font-size: var(--fs-foot); line-height: var(--lh-foot); letter-spacing: -.004em; color: var(--footnote); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* Eyebrow mit Sektor-Markierung (Leitmotiv) */
.eyebrow { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: -.015em; color: var(--text); margin-bottom: 16px; }
.sector { display: inline-grid; place-items: center; min-width: 44px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   3. Header (klebt) und Tickets
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header); display: flex; align-items: center;
  background: rgba(9, 9, 11, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, transparent, var(--accent)); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 10px 12px; border-radius: var(--r-pill); opacity: .82; transition: opacity var(--t-ui), background-color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: none; background: rgba(255, 255, 255, .08); }
.header-cta { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.menu-btn span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--text); transition: transform var(--t-state), opacity var(--t-ui); }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1068px) {
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom));
    background: rgba(9, 9, 11, .97); scrollbar-width: none; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity var(--t-state), transform var(--t-state), visibility 0s linear 320ms; overflow: visible; border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
  .nav a { font-size: clamp(18px, 3.1svh, 24px); font-weight: 600; letter-spacing: -.02em; padding: clamp(10px, 1.7svh, 18px) 4px; min-height: 44px; display: flex; align-items: center; border-radius: 0; border-bottom: 1px solid var(--line); opacity: 1; }
  .menu-open .nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-btn { display: block; }
  .header-cta .btn.ghost { display: none; }
}

/* Feste Ticket Leiste unten (nur Handy und Tablet) */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(9, 9, 11, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(110%); transition: transform var(--t-state); }
.dock.on { transform: none; }
.dock .price { font-size: 14px; line-height: 18px; color: var(--muted); }
.dock .price b { display: block; color: var(--text); font-weight: 600; font-size: 17px; }
.dock-gs { display: none; }
@media (min-width: 520px) { .dock-gs { display: inline-flex; } }
/* Desktop: schwebende Leiste, begleitet den Besucher nach dem Hero, damit jederzeit gebucht werden kann */
@media (min-width: 1069px) {
  .dock { left: 50%; right: auto; bottom: 20px; transform: translate(-50%, 300%); width: auto; min-width: 460px; padding: 10px 12px 10px 24px;
    border: 1px solid var(--line); border-radius: var(--r-pill); gap: 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
  .dock.on { transform: translate(-50%, 0); }
}
body.has-dock { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Buttons (Rezept 4.1): Pille, 44 px, ein Primär je Bildschirm
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 24px; border: 0; border-radius: var(--r-pill);
  font: 600 17px/21px "Montserrat", "Montserrat Fallback", sans-serif; letter-spacing: -.012em; cursor: pointer; text-decoration: none; transition: background-color var(--t-fast), color var(--t-state), transform var(--t-ui), box-shadow var(--t-state); }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 0 rgba(207, 91, 217, 0); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 8px 32px -8px rgba(207, 91, 217, .65); transform: translateY(-1px); }
.btn.primary:active { transform: none; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.btn.small { min-height: 44px; padding: 8px 18px; font-size: 14px; line-height: 18px; }   /* 44 px auch am Desktop (Live-Prüfung 09.10.2026) */
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 17px; color: var(--link); }
.link::after { content: "\203A"; font-size: 1.25em; line-height: 1; transition: transform var(--t-ui); }
.link:hover::after { transform: translateX(3px); }
.link:hover { text-decoration: none; }
/* Knöpfe im Linkstil (z. B. „+ weiteren Fehler hinzufügen“): ohne Knopfhintergrund, sonst stand heller Text auf hellgrauem Grund */
button.link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cta-gap); margin-top: var(--cta-gap); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: min(calc(100svh - var(--header)), 940px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 55%; transform-origin: 60% 60%; animation: settle 2.4s var(--ease-move) both; }
@keyframes settle { from { transform: scale(1.09); filter: brightness(.55); } to { transform: scale(1); filter: brightness(1); } }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg) 0, rgba(9, 9, 11, .72) 24%, rgba(9, 9, 11, .1) 58%, rgba(9, 9, 11, .5) 100%),
              linear-gradient(90deg, rgba(9, 9, 11, .78) 0, rgba(9, 9, 11, 0) 62%); }
.speedlines { position: absolute; inset: 0; z-index: -1; opacity: .9; pointer-events: none;
  background: repeating-linear-gradient(104deg, transparent 0 168px, rgba(255, 255, 255, .035) 168px 169px, transparent 169px 340px); animation: lines 18s linear infinite; }
@keyframes lines { to { background-position: 340px 0; } }
.hero-inner { padding-block: 56px clamp(28px, 6vh, 64px); }
.hero .eyebrow { font-size: 14px; line-height: 20px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 20px; }
.hero h1 { max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .t-sub { max-width: 30ch; margin-top: 18px; }
.telemetry { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 40px; margin-top: clamp(32px, 7vh, 64px); padding-top: 22px; border-top: 1px solid var(--line); }
.telemetry li { display: flex; flex-direction: column; gap: 2px; }
.telemetry b { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.telemetry span { font-size: 14px; line-height: 18px; color: var(--muted); }
@media (max-width: 734px) { .telemetry { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } .hero h1 { max-width: none; } }

/* Hero der Unterseiten (kürzer) */
.hero.sub { min-height: min(72svh, 640px); }
.hero.sub .hero-inner { padding-bottom: 56px; }

/* --------------------------------------------------------------------------
   6. Kapitel
   -------------------------------------------------------------------------- */
.section { padding-block: var(--sec-top) var(--sec-bottom); position: relative; }
.section.tight { padding-block: 96px 128px; }
.section.flush { padding-top: 0; }
.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head .t-sub { margin-top: 20px; color: var(--muted); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .cta-row { justify-content: center; }
.copy { max-width: 56ch; color: var(--muted); }
.copy + .copy { margin-top: 16px; }
.copy b, .copy strong { color: var(--text); font-weight: 600; }

/* Kacheln (Rezept 2.1): 12 px Lücke, Text oben, Bild unten */
.tiles { display: grid; gap: var(--gap); }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 734px) { .tiles.two, .tiles.three { grid-template-columns: 1fr; } }
@media (min-width: 735px) and (max-width: 1068px) { .tiles.three { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-tile); min-height: 580px; background: var(--surface); display: flex; flex-direction: column; color: var(--text); }
.tile:hover { text-decoration: none; }
.tile .tile-media { position: absolute; inset: 0; z-index: -1; }
.tile .tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-move); }
.tile:hover .tile-media img { transform: scale(1.035); }
.tile .tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .82) 0, rgba(9, 9, 11, .42) 34%, rgba(9, 9, 11, 0) 62%); }
.tile .tile-body { padding: var(--tile-top) 40px 0; max-width: 520px; }
.tile .t-caption { display: block; font-size: 28px; line-height: 32px; }
.tile .tile-body .link { margin-top: 18px; }
.tile .tile-tag { font-size: 14px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 10px; display: block; }
@media (max-width: 734px) { .tile { min-height: 460px; } .tile .tile-body { padding-inline: 24px; } .tile .t-caption { font-size: 21px; line-height: 25px; } }

/* Aufteilung Text und Bild */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.rev { grid-template-columns: 1.15fr 1fr; }
.split.top { align-items: start; }
.split.rev .split-media { order: -1; }
@media (max-width: 1068px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } }
.split-media { position: relative; border-radius: var(--r-tile); overflow: hidden; background: var(--surface); }
.split-media img { width: 100%; height: auto; }
.split-media.contain { padding: 24px; background: radial-gradient(60% 60% at 50% 50%, #1d1d24 0, var(--surface) 70%); }
.facts { display: grid; gap: 0; margin-top: 32px; }
.facts li { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 24px; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }

/* Ablauf in drei Schritten */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: step; }
@media (max-width: 1068px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 36px 32px 40px; border-radius: var(--r-tile); background: var(--surface); counter-increment: step; overflow: hidden; }
.step { min-height: 260px; display: flex; flex-direction: column; }
.step::before { content: none; }
.theme-light .step { background: #fff; }
.step h3 { font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -.02em; margin-bottom: 10px; position: relative; }
.step p { color: var(--muted); position: relative; }

/* Zahlen */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 56px; }
@media (max-width: 734px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 32px; border-radius: var(--r-tile); background: var(--surface); }
.stat .num { font-weight: 600; font-size: clamp(56px, 6vw, 80px); line-height: 1; letter-spacing: -.045em; color: var(--text); }
.stat .num small { font-size: .5em; letter-spacing: -.02em; color: var(--accent); margin-left: 4px; }
.stat p { margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 22px; }

/* Streckenlauf und Lauftext */
.trackline { position: relative; margin-top: 56px; border-radius: var(--r-tile); background: var(--surface); padding: 12px; overflow: hidden; }
.trackline svg { width: 100%; height: auto; }
.trackline .path-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.trackline .path-run { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 2.6s var(--ease-state); }
.trackline.in .path-run { stroke-dashoffset: 0; }
.trackline .car { fill: #fff; filter: drop-shadow(0 0 8px var(--accent)); offset-path: path("M60,200 C60,120 140,80 220,90 L380,110 C460,120 500,60 580,70 C680,82 720,170 640,210 C600,230 540,200 480,230 C420,260 440,320 360,330 L180,330 C100,330 60,280 60,200 Z"); offset-distance: 0%; opacity: 0; }
.trackline.in .car { opacity: 1; animation: lap 9s linear 2.4s infinite; }
@keyframes lap { to { offset-distance: 100%; } }
.trackline .tl-labels { position: absolute; left: 24px; bottom: 20px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.marquee { overflow: hidden; margin-top: 40px; border-block: 1px solid var(--line); padding-block: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 40px; animation: marq 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .42); white-space: nowrap; }
.marquee-track span.on { color: var(--text); -webkit-text-stroke: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Pakete (Entscheidungsliste, Rezept 5)
   -------------------------------------------------------------------------- */
.picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.picker legend { padding: 0; margin-bottom: 20px; font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -.02em; }
.picker legend b { font-weight: 600; }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1068px) { .packs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .packs { grid-template-columns: 1fr; } }
.pack { position: relative; display: block; cursor: pointer; }
.pack input { position: absolute; opacity: 0; inset: 0; }
.pack-card { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 232px; padding: 24px; border-radius: var(--r-card); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px #5d5d66; transition: box-shadow var(--t-ui), background-color var(--t-ui), transform var(--t-ui); }
.pack:hover .pack-card { background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.pack input:checked + .pack-card { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(207, 91, 217, .1); }
.pack input:focus-visible + .pack-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.pack-name { font-size: 14px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.pack-price { font-weight: 600; font-size: 48px; line-height: 52px; letter-spacing: -.04em; margin-top: 8px; }
.pack-price small { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-left: 2px; }
.pack-dur { font-weight: 600; font-size: 17px; }
.pack-for { color: var(--muted); font-size: 17px; line-height: 22px; margin-top: auto; padding-top: 14px; }
.pack-badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); }
.picker-help { margin-top: 20px; }
.picker-help summary { cursor: pointer; font-size: 17px; font-weight: 600; color: var(--link); list-style: none; padding: 10px 0; }   /* 44 px Zielhöhe (Live-Prüfung 09.10.2026) */
.picker-help summary::-webkit-details-marker { display: none; }
.picker-help summary::after { content: " \203A"; }
.picker-help[open] summary::after { content: " \2039"; }
.picker-help p { margin-top: 10px; max-width: 64ch; color: var(--muted); font-size: 17px; line-height: 23px; }
.summary { position: sticky; bottom: 16px; z-index: 5; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 20px 18px 28px;
  border-radius: var(--r-pill); background: rgba(27, 27, 33, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 1px var(--line), 0 20px 50px -20px #000; }
.summary-text { font-size: 17px; line-height: 20px; color: var(--muted); }
.summary-text b { display: block; font-size: 21px; line-height: 24px; color: var(--text); font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 734px) { .summary { border-radius: 24px; padding: 16px; } .summary .btn { width: 100%; } }
.note { margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Regiondo Platzhalter (Buchungsseite) */
.embed-slot { margin-top: 28px; border-radius: var(--r-tile); padding: 40px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px); border: 1px dashed rgba(255, 255, 255, .3); }
.embed-slot code { font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--accent); }

/* --------------------------------------------------------------------------
   8. Vertrauen (heller Bereich, ein Flächenwechsel)
   -------------------------------------------------------------------------- */
.theme-light { background: var(--light); color: var(--light-text); --text: var(--light-text); --muted: var(--light-muted); --line: var(--light-line); --link: var(--accent-on-light); --footnote: rgba(0, 0, 0, .56); --surface: #fff; --surface-2: #ececf0; }
.theme-light .eyebrow { color: var(--light-text); }
.theme-light .sector { background: var(--accent-on-light); color: #fff; }
.theme-light .t-sub { color: var(--light-muted); }
.theme-light .btn.primary { background: var(--accent-on-light); color: #fff; }
.theme-light .btn.primary:hover { background: #b233b9; }
.theme-light .btn.ghost { color: var(--light-text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.theme-light .btn.ghost:hover { color: var(--accent-on-light); box-shadow: inset 0 0 0 1px var(--accent-on-light); }
.theme-light .facts li { border-color: var(--light-line); }
.theme-light .facts li::before { background: var(--accent-on-light); }

.rating { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 40px; }
.rating .big { font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.05em; }
.stars { display: inline-flex; gap: 3px; color: var(--accent-on-light); }
.stars svg { width: 22px; height: 22px; fill: currentColor; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 1068px) { .reviews { grid-template-columns: 1fr; } }
.review { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--r-tile); background: #fff; }
.review h3 { font-weight: 600; font-size: 21px; line-height: 25px; letter-spacing: -.02em; }
.review p { color: var(--light-muted); font-size: 17px; line-height: 25px; }
.review cite { margin-top: auto; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--light-text); }
.review cite span { display: block; font-weight: 400; color: var(--light-muted); }
.why { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); margin-top: var(--gap); }
@media (max-width: 1068px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .why { grid-template-columns: 1fr; } }
.why > div { padding: 24px; border-radius: var(--r-card); background: #fff; }
.why h3 { font-weight: 600; font-size: 17px; line-height: 21px; letter-spacing: -.015em; margin-bottom: 8px; }
.why p { font-size: 17px; line-height: 22px; color: var(--light-muted); }

/* Abschluss Aufruf */
.finale { text-align: center; padding-block: var(--sec-top) var(--sec-top); position: relative; overflow: hidden; isolation: isolate; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 100%, rgba(207, 91, 217, .28), transparent 70%); }
.theme-light.finale::before { display: none; }
.finale .t-section { font-size: clamp(36px, 5vw, 56px); line-height: 1.06; max-width: 14ch; margin-inline: auto; }
.finale .cta-row { justify-content: center; margin-top: 32px; }

/* --------------------------------------------------------------------------
   9. Formulare, FAQ, Karten
   -------------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 734px) { .form { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid #5d5d66; background: var(--surface); color: var(--text); font: 400 16px/22px "Montserrat", "Montserrat Fallback", sans-serif; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; }
.form-msg { grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px; background: rgba(207, 91, 217, .14); font-size: 17px; display: none; }
.form-msg.show { display: block; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font-weight: 600; font-size: 21px; line-height: 26px; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 28px; line-height: 1; color: var(--accent); transition: transform var(--t-state); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 26px 0; max-width: 72ch; color: var(--muted); }
/* 320 px: lange Wörter wie „Größenbeschränkungen“ schoben die Seite über die Breite (09.10.2026) */
@media (max-width: 374px) { .faq summary { overflow-wrap: anywhere; hyphens: auto; gap: 12px; } .faq details p { padding-right: 0; overflow-wrap: anywhere; hyphens: auto; } }
/* 320 px: Stornotabellen der AGB waren 2 px zu breit, Innenabstand steht inline (09.10.2026) */
@media (max-width: 374px) { main table[style] th, main table[style] td { padding-right: 10px !important; overflow-wrap: anywhere; hyphens: auto; } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 1068px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; border-radius: var(--r-tile); background: var(--surface); overflow: hidden; color: var(--text); min-height: 100%; }
.card:hover { text-decoration: none; }
.card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.card .card-body { padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h3 { font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -.022em; }
.card p { color: var(--muted); font-size: 17px; line-height: 23px; }
.card .link { margin-top: auto; padding-top: 8px; font-size: 17px; }
.card .price-line { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Footer (hell, mit Fußnoten)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--light); color: var(--light-text); --muted: var(--light-muted); --line: var(--light-line); --link: var(--accent-on-light); --footnote: rgba(0, 0, 0, .56); padding-block: 56px 48px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 1068px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer .foot-h { font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--light-muted); margin-bottom: 14px; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--light-text); font-size: 14px; line-height: 20px; }
.site-footer .brand img { height: 40px; }
.site-footer address { font-style: normal; font-size: 14px; line-height: 22px; margin-top: 16px; color: var(--light-muted); }
.foot-legal { max-width: 980px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--light-line); }
.foot-legal p + p { margin-top: 8px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.foot-bottom a { font-size: 12px; line-height: 16px; color: var(--light-muted); }

/* --------------------------------------------------------------------------
   11. Bewegung beim Scrollen (Rezept 6.1): Start bei 70 % der Fensterhöhe
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 640ms var(--ease-state), transform 640ms var(--ease-move); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].animate { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal="scale"].animate { transform: none; }

/* Hero Text: gestaffelter Einstieg beim Laden */
.hero .eyebrow, .hero h1, .hero .t-sub, .hero .cta-row, .hero .telemetry { animation: rise 900ms var(--ease-move) both; }
.hero .eyebrow { animation-delay: .15s; } .hero h1 { animation-delay: .28s; } .hero .t-sub { animation-delay: .42s; } .hero .cta-row { animation-delay: .56s; } .hero .telemetry { animation-delay: .72s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Parallax im Hero: eigene Ebene, per Skript gesteuert (--py), damit der Einstieg (settle) unberührt bleibt */
.hero-media { top: -90px; height: calc(100% + 90px); transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; }

/* --------------------------------------------------------------------------
   11b. Erweiterungen: Welten, Telemetrie, Rundenzeiten, Paketfinder, Fakten
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }   /* weiche Seitenwechsel, wo der Browser es kann */
.badge { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(207, 91, 217, .16); color: var(--accent); }

/* Welten: aufklappbare Leiste (Desktop), Kacheln (Handy) */
.worlds { display: flex; gap: var(--gap); height: clamp(520px, 74vh, 700px); }
.world { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-tile); background: var(--surface); color: var(--text);
  transition: flex-grow 760ms var(--ease-move); display: block; }
.world:hover { text-decoration: none; }
.world.is-active { flex-grow: 6; }
.world-media { position: absolute; inset: 0; z-index: -1; }
.world-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: brightness(.55) saturate(.9); transition: transform 1100ms var(--ease-move), filter 760ms var(--ease-state); }
.world.is-active .world-media img { transform: scale(1); filter: none; }
.world-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .82) 0, rgba(9, 9, 11, .38) 38%, rgba(9, 9, 11, .1) 62%, rgba(9, 9, 11, .55) 100%); }
.world-num { position: absolute; left: 24px; top: 24px; font-weight: 600; font-size: 14px; letter-spacing: .1em; color: var(--accent); }
.world-rail { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-weight: 600; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; transition: opacity 320ms var(--ease-state); }
.world.is-active .world-rail { opacity: 0; }
.world-body { position: absolute; left: 0; top: 0; padding: 64px 40px 0; width: min(560px, 100%); opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease-state) 180ms, transform 600ms var(--ease-move) 120ms; }
.world.is-active .world-body { opacity: 1; transform: none; }
.world-body .t-caption { display: block; }
.world-body .link { margin-top: 18px; }
@media (max-width: 1068px) {
  .worlds { flex-direction: column; height: auto; }
  .world, .world.is-active { flex: none; min-height: 380px; }
  .world-media img, .world.is-active .world-media img { transform: none; filter: none; }
  .world-rail { display: none; }
  .world-body { opacity: 1; transform: none; padding: 56px 28px 0; }
  .world-body .t-caption { font-size: 24px; line-height: 28px; }
}

/* Telemetrie im Hero (Beispielrunde, rein dekorativ) */
.hero-inner { position: relative; }
.hud { position: absolute; right: var(--gutter); bottom: clamp(28px, 6vh, 64px); width: 296px; padding: 18px 20px 20px; border-radius: 20px;
  background: rgba(9, 9, 11, .55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px var(--line);
  font-variant-numeric: tabular-nums; animation: rise 900ms var(--ease-move) .9s both; }
@media (max-width: 1068px) { .hud { display: none; } }
.hud-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.hud-top em { font-style: normal; color: var(--accent); }
.hud-main { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; }
.hud-gear { font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.05em; color: var(--accent); min-width: 40px; }
.hud-speed { text-align: right; }
.hud-speed b { font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.05em; }
.hud-speed small { display: block; font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.hud-rpm { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 14px; height: 16px; }
.hud-rpm i { background: rgba(255, 255, 255, .12); border-radius: 2px; transition: background-color 80ms linear; }
.hud-rpm i.on { background: var(--text); }
.hud-rpm i.hot { background: var(--accent); }
.hud-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.hud-foot span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hud-foot b { font-weight: 600; font-size: 21px; line-height: 26px; letter-spacing: -.02em; }
.hud-sectors { display: flex; gap: 6px; }
.hud-sectors span { padding: 4px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; letter-spacing: .06em; background: rgba(255, 255, 255, .1); color: var(--muted); transition: background-color 200ms, color 200ms; }
.hud-sectors span.on { background: var(--accent); color: var(--on-accent); }

/* Rundenzeiten Tafel */
.lb { border-radius: var(--r-tile); background: var(--surface); padding: 12px; }
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-tabs button { padding: 10px 18px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color var(--t-fast), color var(--t-ui); }
.lb-tabs button:hover { color: var(--text); }
.lb-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.lb-body { padding: 4px 12px 12px; overflow-x: auto; }
.lb table { width: 100%; border-collapse: collapse; min-width: 480px; font-variant-numeric: tabular-nums; }
.lb th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lb td { padding: 16px 14px; border-bottom: 1px solid var(--line); font-size: 17px; }
.lb tr:last-child td { border-bottom: 0; }
.lb tbody tr:first-child td { font-weight: 600; }
.lb tbody tr:first-child td:first-child { color: var(--accent); }
.lb .num { text-align: right; }
.lb .gap { color: var(--muted); }
.lb tbody tr { transition: background-color var(--t-fast); }
.lb tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* Paketfinder */
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; }
.finder-label { font-weight: 600; margin-right: 6px; }
.chip { padding: 10px 18px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); color: var(--text); font-weight: 600; font-size: 17px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--t-fast), box-shadow var(--t-ui); }
.chip:hover { background: rgba(255, 255, 255, .12); }
.chip[aria-pressed="true"] { background: rgba(207, 91, 217, .16); box-shadow: inset 0 0 0 2px var(--accent); }

/* Technik in klaren Fakten, Gut zu wissen */
.know { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 1068px) { .know { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .know { grid-template-columns: 1fr; } }
.know-card { padding: 32px; border-radius: var(--r-tile); background: var(--surface); position: relative; overflow: hidden; }
.know-card h3 { font-weight: 600; font-size: 21px; line-height: 25px; letter-spacing: -.02em; margin-bottom: 10px; }
.know-card p { color: var(--muted); font-size: 17px; line-height: 25px; }

/* Cursor Licht auf Karten und Paketen (nur mit Maus) */
@media (hover: hover) and (pointer: fine) {
  .know-card::before, .pack-card::before, .stat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(207, 91, 217, .18), transparent 70%); }
  .know-card:hover::before, .pack:hover .pack-card::before, .stat:hover::before { opacity: 1; }
  .pack-card, .stat { position: relative; overflow: hidden; }
}

/* Sektoren Navigation (rechts, nur große Bildschirme) */
.sectors { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 6px; }
@media (min-width: 1280px) { .sectors { display: flex; } }
.sectors a { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 6px; font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--muted); background: rgba(9, 9, 11, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--t-ui), color var(--t-ui), transform var(--t-ui); }
.sectors a:hover { text-decoration: none; color: var(--text); transform: translateX(-3px); }
.sectors a.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }

/* Video Platzhalter (lädt YouTube erst nach Klick, Datenschutz) */
.video-facade { position: relative; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-move), filter 400ms; }
.video-facade:hover img { transform: scale(1.025); filter: brightness(1.08); }
.video-facade > button { z-index: 2; }
.video-facade iframe { z-index: 3; }
.video-facade > button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.video-facade > button::after { content: ""; width: 84px; height: 84px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%2309090b'/%3E%3C/svg%3E") center / 40px no-repeat; box-shadow: 0 0 0 10px rgba(207, 91, 217, .22); transition: transform var(--t-ui); }
.video-facade > button:hover::after { transform: scale(1.08); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   11c. Bedienbarkeit: Zielgrößen, Kopfzeile auf schmalen Desktops, WhatsApp, Platzierung
   -------------------------------------------------------------------------- */
.link { min-height: 44px; }
.brand { min-height: 44px; }
.site-footer a { display: inline-block; padding: 12px 0; }
.site-footer li { margin-bottom: 0; }
.foot-bottom a { padding: 14px 0; }
.nav a { white-space: nowrap; }
.note a, .t-foot a { display: inline-block; padding: 14px 0; }
.facts a { display: inline-block; padding: 13px 0; }
.check { min-height: 44px; align-items: center; }
/* Links im Fließtext des Zustimmungssatzes: kleines Polster, kein 44-px-Feld. Das große Feld lag über den Nachbarzeilen, ein Tipp auf den Satz
   öffnete die Datenschutzseite statt das Häkchen zu setzen (Gegenprüfung 09.10.2026). Links im Fließtext sind von WCAG 2.5.8 ausgenommen. */
.check a { padding: 0; }   /* auch 2 px reichten noch in die Zeile darüber (Live-Prüfung 09.10.2026) */
.nav-gs, .nav-tk { display: none; }
@media (max-width: 1179px) { .nav-gs { display: block; } }
@media (max-width: 1068px) { .nav-tk { display: block; } }
/* Cookie-Einstellungen und Widerruf (Rechtsprüfung 09.10.2026): Handy und Tablet als letzter, leiser Menüeintrag, Desktop als kleiner Knopf unten rechts.
   Der Knopf tritt zurück, solange der Hinweis offen ist und sobald die Fußzeile mit demselben Eintrag im Bild ist; die Buchungsleiste sitzt mittig. */
.nav-ck, .ck-fab { display: none; }
@media (max-width: 1068px) {
  .nav .nav-ck { display: flex; align-items: center; width: 100%; min-height: 44px; padding: clamp(10px, 1.7svh, 18px) 4px; margin: 0; border: 0; border-bottom: 1px solid var(--line);
    background: none; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
}
@media (min-width: 1069px) {
  .ck-fab { position: fixed; right: 20px; bottom: 20px; z-index: 44; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28); background: var(--surface-2); color: var(--text); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
  .ck-fab svg { width: 22px; height: 22px; fill: currentColor; }
  .ck-fab:hover { color: var(--accent); border-color: var(--accent); }
  .ck-fab:focus-visible { border-radius: 50%; }
  .ck-fab.away, .consent-offen .ck-fab { display: none; }
}
@media (min-width: 1069px) and (max-width: 1259px) {
  .nav a { padding: 10px 8px; font-size: 14px; }
}
@media (min-width: 1069px) and (max-width: 1179px) {
  .header-cta .btn.ghost { display: none; }
}
@media (max-width: 1068px) {
  .btn.small { min-height: 44px; padding: 9px 20px; }
  .summary { bottom: 84px; }
}
.sectors { display: none !important; }
@media (min-width: 1420px) { .sectors { display: flex !important; } }

/* WhatsApp: schwebender Knopf am Desktop, runder Knopf in der festen Leiste am Handy */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 44; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7); transition: transform var(--t-ui), background-color var(--t-fast); }
.fab:hover { text-decoration: none; background: var(--accent-hover); transform: translateY(-2px); }
.fab svg, .dock-wa svg { width: 26px; height: 26px; fill: currentColor; }
.dock-wa { display: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.dock-wa:hover { text-decoration: none; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dock-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1068px) { .fab { display: none; } .dock-wa { display: grid; } }
/* 3D Betrachter (Actoracer Pro) */
.viewer3d { position: relative; margin: 0; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 5 / 4; touch-action: pan-y;
  background: radial-gradient(55% 40% at 50% 74%, rgba(207, 91, 217, .30), transparent 72%), radial-gradient(95% 85% at 50% 35%, #20202a, var(--surface) 78%); }
.viewer3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.viewer3d canvas[hidden] { display: none; }
.viewer3d.is-dragging canvas { cursor: grabbing; }
.viewer3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 28px; transition: opacity 600ms var(--ease-state); }
.viewer3d.is-3d img { opacity: 0; pointer-events: none; }
.v3d-status { position: absolute; top: 14px; left: 18px; font-size: 14px; color: var(--muted); margin: 0; }
.v3d-ui { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.v3d-ui > * { pointer-events: auto; }
.v3d-hint { font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.v3d-btns { display: flex; gap: 8px; }
.v3d-btns button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: rgba(9, 9, 11, .62); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color var(--t-fast), box-shadow var(--t-ui); }
.v3d-btns button:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.v3d-btns button[aria-pressed="true"] { background: rgba(207, 91, 217, .2); box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 734px) { .viewer3d { aspect-ratio: 1 / 1; } .v3d-hint { display: none; } }

/* Hero Film (Schleife aus dem Werbefilm) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.82) saturate(1.05); transition: opacity 1.4s var(--ease-state); pointer-events: none; }
.hero-video.on { opacity: 1; }
.hero-pause { position: absolute; z-index: 3; top: 16px; right: var(--gutter); min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(9, 9, 11, .6); color: var(--text); font: 600 14px/1 "Montserrat", "Montserrat Fallback", sans-serif; box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow var(--t-ui), background-color var(--t-fast); }
.hero-pause:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.hero-pause[hidden] { display: none; }

/* Regiondo Buchungssystem */
.regiondo { margin-top: 28px; }
.regiondo-facade { padding: 40px; border-radius: var(--r-tile); background: var(--surface); }
.regiondo-facade h3 { font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.02em; margin-bottom: 12px; }
.regiondo-facade p { color: var(--muted); max-width: 62ch; margin-bottom: 20px; }
.regiondo-facade .note { margin: 18px 0 0; }
.regiondo-facade[hidden] { display: none; }
.regiondo-mount.on { background: #fff; color: #1d1d1f; border-radius: var(--r-tile); padding: 16px; min-height: 320px; }
@media (max-width: 734px) { .regiondo-facade { padding: 28px 22px; } .regiondo-mount.on { padding: 8px; } }

/* Fließtext Block für Suchbegriffe (Wissenswertes) */
.seotext { columns: 2 380px; column-gap: 56px; }
.seotext h3 { font-weight: 600; font-size: 21px; line-height: 25px; letter-spacing: -.02em; margin: 0 0 10px; break-after: avoid; }
.seotext h3:not(:first-child) { margin-top: 32px; }
.seotext p { color: var(--muted); font-size: 17px; line-height: 26px; margin-bottom: 14px; }
.seotext p b { color: var(--text); font-weight: 600; }

/* Bewegung anhalten (Besucher Schalter, zusätzlich zu prefers-reduced-motion) */
.calm-btn { padding: 14px 0; border: 0; background: none; cursor: pointer; font-size: 12px; line-height: 16px; color: var(--light-muted); text-decoration: underline; text-underline-offset: 3px; }
.calm-btn[aria-pressed="true"] { color: var(--accent-on-light); font-weight: 600; }
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.calm .js [data-reveal], .calm [data-reveal] { opacity: 1 !important; transform: none !important; }
.calm .trackline .path-run { stroke-dashoffset: 0; }
.calm .trackline .car { display: none; }
.chosen-pack { margin-top: 18px; font-weight: 600; color: var(--accent); }
.chosen-pack[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Barrierefreiheit: weniger Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js:not(.motion-on) [data-reveal] { opacity: 1; transform: none; }
  html:not(.motion-on) .marquee-track { animation: none; }
  html:not(.motion-on) .trackline .path-run { stroke-dashoffset: 0; }
  html:not(.motion-on) .trackline .car { display: none; }
}
@media print { .site-header, .dock, .speedlines { display: none; } body { background: #fff; color: #000; } }


/* ===== Dein Rennen: Scroll Film ===== */
.rennen { padding: var(--sec-top) 0 0; background: var(--bg); }
.rennen .rn-head { margin-bottom: 40px; }
.rn-static { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max); }
.rn-static figure { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.rn-static img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rn-static figcaption { padding: 14px 16px 18px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.rn-static figcaption b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }
.rn-track, .rennen .rn-cta { display: none; }
.rennen .rn-cta { gap: 24px; align-items: center; justify-content: center; padding: 40px var(--gutter) var(--sec-bottom); flex-wrap: wrap; }
.rennen.is-live .rn-cta, .rennen.is-static .rn-cta { display: flex; }
.rennen:not(.is-live):not(.is-static) .rn-cta { display: flex; }
.rennen.is-live .rn-static { display: none; }
.rennen.is-live .rn-head { display: none; }
.rennen.is-live .rn-track { display: block; height: 640vh; position: relative; }
/* Hinweis Marci 07.10.2026: weniger Abstand über dem Film. Der Film läuft jetzt auch ohne Scrollen (rcb.js), deshalb reicht kürzere Scrollstrecke */
.rennen.is-live { padding-top: calc(var(--sec-top) - 30px); }
.rn-stage { position: sticky; top: var(--header); height: calc(100svh - var(--header)); overflow: hidden; background: #000; }
.rn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.45) saturate(1.15); }
.rennen.is-ready .rn-video { opacity: 1; }
.rn-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,9,11,.78) 0%, rgba(9,9,11,.05) 40%, rgba(9,9,11,.2) 100%); pointer-events: none; }
.rn-caps { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; max-width: 640px; margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.rn-cap { position: absolute; left: 0; bottom: 0; right: 0; opacity: 0; transform: translateY(18px); transition: opacity var(--t-state), transform var(--t-state); }
.rn-cap.on { opacity: 1; transform: none; }
.rn-cap h2 { margin: 0 0 8px; }
.rn-cap p { margin: 0; color: var(--text); opacity: .86; }
.rn-hud { position: absolute; right: var(--gutter); top: 24px; width: min(300px, 44vw); opacity: 0; transition: opacity var(--t-state); pointer-events: none; }
.rennen.race .rn-hud { opacity: 1; }
.rn-pos { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; justify-content: flex-end; }
.rn-pos small { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); margin-right: auto; }
.rn-pos b { font-size: 56px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.rn-pos span { color: var(--muted); font-size: 17px; }
.rn-hud svg { width: 100%; height: auto; display: block; }
.rn-bg { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 12; stroke-linecap: round; }
.rn-opp { fill: #c9c9d1; }
.rn-me { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.rn-note { display: block; font-size: 12px; color: var(--footnote); text-align: right; margin-top: 2px; }
.rn-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.rn-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.rn-scroll { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: opacity var(--t-state); }
.rennen.past-start .rn-scroll { opacity: 0; }
@media (max-width: 1068px) { .rn-static { grid-template-columns: repeat(2, 1fr); } .rennen { padding-top: 112px; } }
@media (max-width: 734px) { .rn-caps { bottom: calc(86px + env(safe-area-inset-bottom)); } .rn-pos b { font-size: 40px; } .rn-hud { top: 12px; } }

.nav::-webkit-scrollbar { display: none; }
@media (max-width: 1068px) and (max-height: 640px) { .nav a { font-size: 17px; padding: 6px 4px; } }

/* Paketfinder: Hinweis und Empfehlung */
.finder-hint { margin: 10px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.finder-hint b { color: var(--text); }
.pack-card { position: relative; }
.pack-badge { display: inline-block; align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

.rn-stage { background: #000 url(../img/still-gesicht-1280.webp) center / cover no-repeat; }
.rn-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* Aufhellung steckt in den Bildern (frames-hd) */
.rennen.frames .rn-canvas { display: block; }
.rennen.frames .rn-video { display: none; }

/* Handymenü: klappt vollständig unter der Kopfleiste aus, ohne Scrollen. Querformat: zwei Spalten */
@media (max-width: 1068px) {
  .nav { background: rgba(9, 9, 11, .985); }
}
@media (max-width: 1068px) and (max-height: 480px) {
  .nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .nav a { font-size: 17px; padding: 4px; }
  /* Sehr flaches Querformat: Cookie-Eintrag über beide Spalten, Menü scrollt, falls es trotzdem nicht passt (Gegenprüfung 09.10.2026) */
  .nav .nav-ck { grid-column: 1 / -1; padding: 4px; }
  .menu-open .nav { max-height: calc(100dvh - var(--header)); overflow-y: auto; overscroll-behavior: contain; }
}

.fab { display: none; }
.dock-wa { display: grid; }
.rennen.is-live .rn-track { height: 330vh; }

b, strong, th { font-weight: 600; }
.dock.away { transform: translateY(140%); pointer-events: none; }
@media (min-width: 1069px) { .dock.away { transform: translate(-50%, 300%); } }

/* Rückmeldung 06.10.2026 */
.hero-pause { min-width: 44px; padding: 0; display: grid; place-items: center; }
.hero-pause i { grid-area: 1 / 1; }
.ic-pause { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.ic-play { display: none; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.hero-pause.is-paused .ic-pause { display: none; }
.hero-pause.is-paused .ic-play { display: block; }
.tile.is-bottom .tile-body { margin-top: auto; padding: 0 40px 40px; }
.tile.is-bottom .tile-media::after { background: linear-gradient(0deg, rgba(9, 9, 11, .86) 0, rgba(9, 9, 11, .5) 30%, rgba(9, 9, 11, 0) 60%); }
@media (max-width: 734px) { .tile.is-bottom .tile-body { padding: 0 24px 28px; } }
.pack-incl { font-size: 14px; line-height: 20px; color: var(--muted); }
.benefits { margin-top: 112px; }
.site-footer { background: #e4e4e9; border-top: 1px solid rgba(0, 0, 0, .1); }
@media (max-width: 734px) {
  .rennen.is-live .rn-track { height: 280vh; }
  .rn-hud { width: 72vw; top: 14px; }   /* Rückmeldung 08.10.: Streckenkarte „Position 4/4“ war am Handy zu klein (vorher 58vw) */
  .rn-pos b { font-size: 52px; }
  .rn-note { font-size: 12px; }
}

/* ===== Duell: Rundenzeiten Anzeige (Beispiel), weckt Lust auf das Rennen gegeneinander ===== */
.duel { padding: 22px 24px 24px; border-radius: var(--r-tile); background: linear-gradient(160deg, #17171d 0%, #0d0d11 100%); box-shadow: inset 0 0 0 1px var(--line); }
.duel-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.duel-top em { font-style: normal; color: var(--accent); }
.duel-lap { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; }
.duel-lap span { font-size: 14px; color: var(--muted); }
.duel-lap b { font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.duel-progress { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 12px; overflow: hidden; }
.duel-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.duel-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.duel-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); transition: background-color 320ms var(--ease-state); }
.duel-row.lead { background: rgba(207, 91, 217, .16); box-shadow: inset 0 0 0 1px rgba(207, 91, 217, .5); }
.duel-pos { font-weight: 600; font-size: 21px; color: var(--accent); text-align: center; }
.duel-name { font-weight: 600; font-size: 17px; }
.duel-time { font-variant-numeric: tabular-nums; font-size: 17px; }
.duel-gap { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); min-width: 64px; text-align: right; }
.duel-best { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.duel-best b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.duel-note { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--footnote); }
@media (max-width: 734px) { .duel { padding: 18px 16px 18px; } .duel-row { grid-template-columns: 28px 1fr auto; } .duel-gap { display: none; } }

/* ===== Zusatzseiten 06.10.2026 ===== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
a.chip { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
mark.ph { background: rgba(255, 196, 0, .18); color: inherit; padding: 1px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 196, 0, .55); font-size: .92em; }
.crumbs { padding: 28px 0; border-top: 1px solid var(--light-line); background: var(--light); color: var(--light-muted); font-size: 12px; line-height: 16px; }
.crumbs a { color: var(--light-text); display: inline-block; padding: 14px 0; }
.crumbs span[aria-current] { color: var(--light-muted); }
.know-card .facts { margin-top: 12px; }
.know-card .facts li { font-size: 15px; line-height: 21px; padding: 10px 0; }
.dock .dock-gs { display: none; }
@media (min-width: 520px) { .dock .dock-gs { display: inline-flex; } }

/* Kontrast im grauen Footer (WCAG AA) */
.site-footer { --muted: #4f4f55; --footnote: rgba(0, 0, 0, .7); }
.site-footer address, .site-footer .foot-h, .site-footer .foot-bottom a, .site-footer .calm-btn { color: #4f4f55; }

/* Datenblatt Strecken */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin: 0; }
.spec div { padding: 24px 28px; border-radius: var(--r-card); background: var(--surface); }
.spec dt { font-size: 14px; line-height: 18px; color: var(--muted); margin-bottom: 6px; }
.spec dd { margin: 0; font-weight: 600; font-size: 21px; line-height: 25px; }

/* Bewertungstitel und Fassadentitel ohne Überschriften Tag (Audit M8) */
.review .review-title { font-weight: 600; font-size: 21px; line-height: 25px; letter-spacing: -.02em; }
.regiondo-facade .facade-title { font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -.02em; margin-bottom: 10px; }
.theme-light mark.ph { color: var(--light-text); }
.race-when{font-size:14px;line-height:18px;letter-spacing:-.016em;font-weight:600;color:var(--accent,#e30613);margin:0 0 6px}
.know-card h3 small{font-weight:400;opacity:.6;font-size:.6em}
.know-card .facts small{opacity:.7}
.cal-month{font-size:25px;line-height:37px;letter-spacing:-.015em;font-weight:600;margin:56px 0 13px}.cal-month:first-child{margin-top:0}
.know-card .price-big{font-size:40px;line-height:44px;font-weight:600;color:var(--text);margin:6px 0 13px}.know-card .price-big span{font-size:17px;font-weight:400;color:var(--muted)}.price-card{position:relative}.price-card.is-tip{box-shadow:inset 0 0 0 2px var(--accent)}.price-card .tip{position:absolute;top:20px;right:20px;font-size:12px;line-height:16px;font-weight:600;padding:4px 10px;border-radius:980px;background:var(--accent);color:var(--on-accent)}
/* Kinderpakete mit Arena-Paket (09.10.2026): vier Karten, Desktop vier Spalten, Tablet zwei, Handy eine.
   Die Empfehlung hängt als Reiter an der Oberkante, damit sie in schmalen Karten nicht über der Fahrzeit liegt. */
@media (min-width: 1069px) { .know.four { grid-template-columns: repeat(4, 1fr); } .know.four .price-big { font-size: 34px; line-height: 40px; } }
.price-card .tip { top: 0; right: 28px; padding: 5px 10px; border-radius: 0 0 10px 10px; }
/* Live Rangliste bei 320 px: „Geburtstagskind“ schob die Seite 3 px über die Breite.
   Schmalere Positionsspalte und kleinere Schrift, damit auch „Geburtstagskind“ und „Klassenkamerad“ ganz stehen (09.10.2026) */
@media (max-width: 374px) { .duel-row { grid-template-columns: 22px 1fr auto; gap: 6px; padding: 12px 8px; } .duel-pos { font-size: 17px; } .duel-name { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duel-time { font-size: 15px; } }
a.know-card{color:var(--text);text-decoration:none;display:block}a.know-card h3{color:var(--text)}a.know-card p{color:var(--muted)}a.know-card:hover .link{text-decoration:underline}
.opts { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.opts legend { display: block; width: 100%; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid #5d5d66; background: var(--surface); cursor: pointer; font-size: 15px; line-height: 20px; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.opt:has(input:checked) { border: 2px solid var(--accent); padding: 9px 15px; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-msg.ok { color: #7ee2a8; } .form-msg.err { color: #ff8a8a; }
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 640px; margin: 0 auto; padding: 24px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.consent-t { font-size: 17px; line-height: 22px; font-weight: 600; margin: 0 0 6px; }
.consent-x { font-size: 14px; line-height: 20px; color: var(--muted); margin: 0 0 16px; }
.consent-x a { color: var(--link); }
.consent-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.consent-b { display: flex; flex-wrap: wrap; gap: 12px 17px; align-items: center; }
.consent-btn { background: var(--text); color: var(--bg); min-width: 170px; }
.consent .link { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
@media (max-width: 734px) { .consent { left: 8px; right: 8px; bottom: 8px; padding: 18px; } .consent-btn { flex: 1 1 100%; } }
/* Nie höher als der Bildschirm, sonst im Querformat nicht erreichbar (Live-Prüfung 09.10.2026) */
.consent { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 734px) { .consent { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } }
@media (max-height: 480px) { .consent { padding: 14px 18px; } .consent-x { margin-bottom: 10px; } .consent-btn { flex: 1 1 0; min-width: 0; } }
.consent [hidden] { display: none !important; }

/* Rückmeldung Marci 06./07.10.2026, umgesetzt 08.10.2026 */
/* Textlinks in Textfarbe, nur der Pfeil in Akzentfarbe: Pink bleibt den Buchungsknöpfen vorbehalten */
.link { color: var(--text); }
.link::after { color: var(--accent); }
.theme-light .link::after, .site-footer .link::after { color: var(--accent-on-light); }
/* Lange Einzelwörter in großen Überschriften (z. B. „Kindergeburtstag“) passen auch auf 360 bis 393 px Breite */
.t-hero, .t-section { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 430px) { .t-hero.long { font-size: min(48px, 10.2vw); line-height: 1.08; } }/* Gutscheinpreise als Kauflinks mit Lenkrad */
.facts li .vrow { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); text-decoration: none; min-height: 44px; }
.vrow .vgo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); transition: color var(--t-ui); }
.vrow:hover .vgo, .vrow:focus-visible .vgo { color: var(--accent); }
.vwheel { width: 22px; height: 22px; color: var(--accent); }/* Rechtsseiten: ruhige Lesespalte, Überschriften brechen auch am Handy sauber um */
.recht .section-head { margin-bottom: 32px; }
.recht-text { max-width: 760px; }
.recht-text h2 { font-size: 24px; line-height: 30px; margin: 40px 0 12px; overflow-wrap: break-word; hyphens: auto; }
.recht-text h3 { font-size: 19px; line-height: 25px; margin: 28px 0 8px; }
.recht-text p, .recht-text li { font-size: 17px; line-height: 26px; color: var(--muted); }
.recht-text strong { color: var(--text); }
.recht-text a { overflow-wrap: anywhere; }
.recht-text code { font-size: 15px; overflow-wrap: anywhere; }/* Laufband per Skript: wischbar statt reiner CSS-Animation */
.marquee.is-js { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.marquee.is-js::-webkit-scrollbar { display: none; }
.marquee.is-js .marquee-track { animation: none; }/* YouTube-Einwilligung im Video (zwei Klicks, Hinweis erst beim Abspielen) */
.video-facade { position: relative; }
.yt-consent { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(9, 9, 11, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; }
.yt-consent[hidden] { display: none; }
.yt-card { max-width: 460px; padding: 24px 24px 20px; border-radius: 18px; background: #f5f5f7; color: #1d1d1f; text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.yt-t { margin: 0 0 8px; font-size: 19px; line-height: 24px; font-weight: 600; }
.yt-x { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #515154; }
.yt-x a { color: var(--accent-on-light); }
.yt-immer { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; color: #515154; margin-bottom: 16px; }
.yt-b { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.yt-b .link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #1d1d1f; cursor: pointer; }
.yt-b .link::after { color: var(--accent-on-light); }
@media (max-width: 480px) { .yt-card { padding: 16px; } .yt-x { font-size: 13px; line-height: 18px; margin-bottom: 8px; } .yt-immer { font-size: 13px; margin-bottom: 10px; } }.video-facade > button[hidden] { display: none; }
.yt-consent { z-index: 3; }/* Regiondo-Widgets: immer volle Breite, nie breiter als der Bildschirm (Rückmeldung 08.10.2026) */
.widget-voll { margin-top: 40px; }
.regiondo, .regiondo-mount, product-catalog-widget, booking-widget { display: block; width: 100%; max-width: 100%; min-width: 0; }
.split > * { min-width: 0; }
/* Buchungsfenster über der Seite (statt Seitenwechsel), Regiondo-Katalog in voller Breite */
.buch-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(9, 9, 11, .9); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 32px 16px; }
.buch-overlay[hidden] { display: none; }
.buch-panel { position: relative; width: 100%; max-width: 1240px; background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 40px 32px 32px; }
.buch-panel .t-section { margin-bottom: 24px; }
.buch-zu { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.buch-zu:hover { border-color: var(--accent); }
html.buch-offen, html.buch-offen body { overflow: hidden; }
/* Doppelklick-Schutz: die ersten 500 ms nach dem Öffnen liegt eine unsichtbare Fläche über dem Fenster, Zeigerklicks treffen den Hintergrund
   (rcb.js oeffnen, 08.10.2026 nachts). pointer-events: none am Fenster reicht nicht, Regiondo setzt im shadowRoot pointer-events: auto. */
.buch-overlay.frisch::after { content: ""; position: fixed; inset: 0; z-index: 1; }
@media (max-width: 734px) { .buch-overlay { padding: 0; } .buch-panel { min-height: 100%; border-radius: 0; border: 0; padding: 64px 16px 24px; } }
/* Paketwahl: über der Terminauswahl eines Pakets der Weg zurück zu allen Angeboten (rcb.js, 08.10.2026) */
.regiondo-alle { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .5em; row-gap: 4px; }
@media (max-width: 480px) { .regiondo-alle .trenner { display: none; } .regiondo-alle { column-gap: 20px; } }   /* am Handy ohne hängenden Punkt (Live-Prüfung 09.10.2026) */
.regiondo-alle[hidden] { display: none; }
.regiondo-alle .link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.regiondo-mount:focus { outline: none; }
/* Je Ziel (Katalog, je Paket) ein Widget, beim Wechsel nur ein- und ausgeblendet. Darüber der Ladehinweis bzw. der Störungshinweis (rcb.js, 08.10.2026 abends) */
.regiondo-inst[hidden] { display: none; }
.regiondo-status { margin: 0; padding: 12px; font-size: 15px; line-height: 22px; color: #3a3a3f; }
.regiondo-status.fehler { color: #1d1d1f; font-weight: 600; }
.regiondo-status a { color: var(--accent-on-light); text-decoration: underline; text-underline-offset: 3px; }
/* Sehr schmale Handys (320 px, iPhone SE 1. Generation): Der Regiondo-Kalender braucht 308 px und wurde abgeschnitten.
   Unter 360 px weniger Seitenrand am Fenster, das Widget reicht bis 4 px an den Bildschirmrand (im Fenster und im Seiteninhalt).
   Im Seiteninhalt fehlten auch bei 360 px noch 4 px (20 px Seitenrand plus 8 px Innenabstand), deshalb dort bis 367 px ohne Innenabstand seitlich. */
@media (max-width: 367px) { main .regiondo-mount.on { padding-left: 0; padding-right: 0; } }
@media (max-width: 359px) {
  .buch-panel { padding-left: 12px; padding-right: 12px; }
  .regiondo-mount.on { width: auto; max-width: none; padding: 8px 0; margin-inline: -8px; }
  main .regiondo-mount.on { margin-inline: calc(4px - var(--gutter)); }
  .regiondo-status { padding: 8px 12px; }
}
/* Audit S27: Kennzeichnung KI-erzeugter oder KI-bearbeiteter Bilder, sitzt unten rechts im Bild */
.ki-hinweis { position: absolute; right: 12px; bottom: 12px; z-index: 3; pointer-events: none; padding: 3px 9px; border-radius: 6px;
  font-size: 11px; line-height: 1.4; letter-spacing: .02em; color: #f5f5f7; background: rgba(9, 9, 11, .62); }
@media (max-width: 734px) { .ki-hinweis { bottom: 84px; } }   /* über der festen Buchungsleiste */
/* Audit S25: Preishinweis unter jedem Buchungs-Widget */
.regiondo-mwst { margin-top: 10px; }
/* Fehlerjagd (/fehlerjagd/, Aktion bis 16.10.2026) */
.fj-zeilen { display: grid; gap: 16px; }
.fj-zeile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
.fj-zeile legend { font-size: 14px; font-weight: 600; padding: 0 6px; color: var(--accent); }
.fj-zeile .fj-l { display: block; font-size: 13px; line-height: 18px; color: var(--muted); margin: 10px 0 6px; }
.fj-zeile input, .fj-zeile textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid #5d5d66; background: var(--surface); color: var(--text); font: inherit; }
.fj-zaehlt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.fj-zaehlt h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.fj-zaehlt div:first-child h3 { color: #7ee2a0; } .fj-zaehlt div:last-child h3 { color: #ff8a8a; }
.fj-zaehlt ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.fj-gemeldet { margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fj-gemeldet h3 { font-size: 17px; margin: 0 0 8px; }
.fj-gemeldet ul { margin: 0 0 8px; padding-left: 18px; line-height: 1.6; }
.fj-tb { padding-left: 20px; } .fj-tb li { margin-bottom: 12px; }
@media (max-width: 734px) { .fj-zaehlt { grid-template-columns: 1fr; } }

/* Live-Audit 09.10.2026 */
/* W2: In der Paketwahl klebt die Zusammenfassung unten (über der Ticketleiste). Fokussierte Chips, Karten und Links darüber
   scrollen weit genug hoch, dass sie nicht darunter liegen. Die Zusammenfassung selbst ist ausgenommen, sie klebt ja. */
[data-picker] :is(a, button, input, summary):not(.summary *) { scroll-margin-bottom: 120px; }
@media (max-width: 1068px) { [data-picker] :is(a, button, input, summary):not(.summary *) { scroll-margin-bottom: 190px; } }
@media (max-width: 734px) { [data-picker] :is(a, button, input, summary):not(.summary *) { scroll-margin-bottom: 260px; } }
/* W2 Rest: Die Knöpfe der Ticketleiste sind auch erreichbar, wenn die Leiste weggeschoben ist (oben im Hero, am Seitenende).
   Liegt der Fokus darin, fährt sie herein, sonst stand der Fokus unsichtbar unter dem Bildschirmrand. */
.dock:focus-within { transform: none; pointer-events: auto; }
@media (min-width: 1069px) { .dock:focus-within { transform: translate(-50%, 0); } }
/* W4: Links im Fließtext unterstrichen, nicht nur über die Farbe erkennbar (WCAG 1.4.1). Niedrige Spezifität über :where,
   damit Knöpfe und Karten-Links ohne Unterstrich bleiben. Hauptmenü, Brotkrumen und Sektorleiste stehen nicht in p oder li.
   Die Linklisten der Fußzeile sind Navigation und bleiben wie bisher (Unterstrich beim Darüberfahren). */
:where(p, li, .check) a:where(:not(.btn, .link, .chip, .card, .tile, .vrow, .know-card, .world)) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site-footer li a { text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* W21: Datenhinweis oben im Buchungsfenster (rcb.js setzt ihn unter den Titel) */
.buch-panel .buch-hinweis { margin: -12px 0 20px; max-width: 72ch; }
.buch-panel .buch-hinweis a { display: inline; padding: 0; }   /* Link im Satz, ohne die 44-px-Polsterung von .note a, sonst klafft eine Lücke zwischen den Zeilen */
@media (max-width: 734px) { .buch-panel .buch-hinweis { margin-top: -14px; } }
/* Buchungsweg Direktwahl (09.10.2026): Buchungsseite als Kaufweg ohne Umweg. Kurzer Kopf ohne Bild, Wegweiser-Chips,
   Ticketzeilen mit Preis (ein Tipp öffnet den Kalender), Gruppe und Gutschein als Zeilen, „Alle Erlebnisse“ als Karten. */
.hero.kompakt { min-height: 0; }
.hero.kompakt .hero-inner { padding-block: 40px 28px; }
.hero.kompakt h1 { font-size: 64px; line-height: 68px; max-width: none; }
.hero.kompakt .chips { margin-top: 20px; }
.hero .hero-wege { animation: rise 900ms var(--ease-move) .5s both; }
/* Die Ticketzeilen rücken an den kurzen Kopf heran, die Listen der Buchungsseite stehen dicht als ein Weg */
.hero.kompakt + .section.buchweg { padding-top: 56px; }
.section.buchweg { padding-bottom: 72px; }
.section.buchweg + .section.buchweg { padding-top: 0; padding-bottom: 128px; }
@media (max-width: 734px) {
  .hero.kompakt .hero-inner { padding-block: 24px 16px; }
  .hero.kompakt h1 { font-size: 40px; line-height: 44px; }
  .hero.kompakt + .section.buchweg { padding-top: 32px; }
  .section.buchweg { padding-bottom: 56px; }
  .section.buchweg + .section.buchweg { padding-bottom: 96px; }
}
.t-pick { font-weight: 600; font-size: 24px; line-height: 28px; letter-spacing: -.02em; }
.picker legend .t-pick { font: inherit; margin: 0; }
[data-direkt] .picker legend { margin-bottom: 0; }
.pick-sub { font-size: 14px; line-height: 18px; color: var(--muted); margin: 6px 0 16px; }
[data-direkt] .picker + .picker { margin-top: 48px; }
[data-direkt] .picker-help { margin-top: 16px; }
.pick-daten { margin-top: 28px; max-width: 72ch; }
.pick-daten a { padding: 0; display: inline; }
/* Auf der Buchungsseite führt der Tipp direkt zum Kalender: die Zusammenfassung bleibt im Fluss (Weg per Tastatur) und klebt nicht über den Zeilen */
[data-direkt] .summary { position: static; }
#verschenken { margin-top: 48px; }
#verschenken .t-pick { margin-bottom: 16px; }
/* Zeilen: Ticketzeilen (Radio) und Linkzeilen teilen sich die Form, ganze Fläche tippbar */
.packs.zeilen .pack-card, .zeile { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; grid-template-areas: "name name" "text text" "preis pfeil";
  align-items: start; gap: 4px 8px; height: 100%; min-height: 120px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px #5d5d66; color: var(--text); text-decoration: none; cursor: pointer;
  transition: box-shadow var(--t-ui), background-color var(--t-ui), transform var(--t-ui); }
.zeilen-liste .zeile { text-decoration: none; }
.zeile:hover, .packs.zeilen .pack:hover .pack-card { background: rgba(255, 255, 255, .06); text-decoration: none; }
.packs.zeilen .pack input:checked + .pack-card { background: rgba(207, 91, 217, .1); }
.packs.zeilen .pack-card::after, .zeile::after { content: "\203A"; grid-area: pfeil; align-self: end; color: var(--accent); font-size: 28px; line-height: 28px; font-weight: 400; }
.packs.zeilen .pack-name, .zeile-name { grid-area: name; font-size: 17px; line-height: 21px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.packs.zeilen .pack-zeile, .zeile-text { grid-area: text; font-size: 14px; line-height: 18px; color: var(--muted); }
.packs.zeilen .pack-price, .zeile-preis { grid-area: preis; align-self: end; margin-top: 8px; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.packs.zeilen .pack-price small, .zeile-preis small { display: block; margin: 0; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.packs.zeilen .pack-badge { position: static; display: inline-block; margin: 0 0 0 8px; padding: 2px 8px; vertical-align: 2px; font-size: 12px; line-height: 16px; text-transform: none; letter-spacing: .02em; }
.marke { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; vertical-align: 3px; text-transform: none; }
.zeilen-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.packs.zeilen { grid-template-columns: repeat(5, 1fr); }
.packs.zeilen.duo { grid-template-columns: repeat(4, 1fr); }
/* Unter 1069 px als Zeile: links Name und Zusatz, rechts Preis und Pfeil */
@media (max-width: 1068px) {
  .packs.zeilen, .packs.zeilen.duo, .zeilen-liste { grid-template-columns: repeat(2, 1fr); }
  .packs.zeilen .pack-card, .zeile { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto;
    grid-template-areas: "name preis pfeil" "text preis pfeil"; align-items: center; column-gap: 12px; row-gap: 2px; }
  .packs.zeilen .pack-name, .zeile-name { align-self: end; }
  .packs.zeilen .pack-zeile, .zeile-text { align-self: start; }
  .packs.zeilen .pack-price, .zeile-preis { margin-top: 0; text-align: right; align-self: center; }
  .packs.zeilen .pack-card::after, .zeile::after { align-self: center; }
}
@media (max-width: 734px) {
  .packs.zeilen, .packs.zeilen.duo, .zeilen-liste { grid-template-columns: 1fr; gap: 8px; }
}
/* 320 px: „ab 16,50 €“ neben „Kindergeburtstag“ passt nicht in eine Zeile, der Preis rückt unter den Text, der Pfeil bleibt rechts.
   Die H1 „Rennsimulator“ brach bei 40 px mitten im Wort, deshalb dort 34/38. */
@media (max-width: 374px) {
  .hero.kompakt h1 { font-size: 34px; line-height: 38px; }
  .packs.zeilen .pack-card, .zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    grid-template-areas: "name pfeil" "text pfeil" "preis pfeil"; }
  .packs.zeilen .pack-price, .zeile-preis { text-align: left; margin-top: 4px; }
  .packs.zeilen .pack-price small, .zeile-preis small { display: inline; margin-left: 6px; }
}
/* Alle Erlebnisse: Karten ohne Bild, Preis oben, zwei direkte Wege unten */
.cards.erlebnisse .card-links { display: flex; flex-wrap: wrap; gap: 0 17px; margin-top: auto; }
.cards.erlebnisse .card-links .link { margin-top: 0; padding-top: 0; }
.cards.erlebnisse .marke { vertical-align: 4px; }
/* Kopfzeile am Handy (Audit M63): „Tickets“ bleibt sichtbar, nach den beiden Ausblenderegeln für .btn.ghost */
@media (max-width: 1179px) { .header-cta .btn.ghost.tk { display: inline-flex; } }
/* Buchungsfenster: Chipzeile „Direkt zu“ unter dem Datenhinweis, weg sobald ein Paket gewählt ist; das Kreuz klebt beim Scrollen oben (S34) */
.buch-wege { margin: 0 0 20px; align-items: center; }
.buch-wege-label { font-size: 14px; line-height: 20px; color: var(--muted); margin-right: 2px; }
.buch-panel:has(.regiondo[data-produkt]) .buch-wege { display: none; }
.buch-zu { position: sticky; top: 12px; right: auto; float: right; z-index: 3; background: var(--bg); margin: -26px -18px 0 0; }
.buch-overlay.frisch::after { z-index: 5; }   /* Doppelklick-Schutz bleibt über dem klebenden Kreuz */
@media (max-width: 734px) { .buch-zu { margin: -50px -2px 0 0; } }
@media (max-width: 359px) { .buch-zu { margin-right: 2px; } }