/* ==========================================================================
   MaJa-Cars UG — Design System
   Dark cinematic showroom. Ein Accent (Logo-Blau), viel Typo, viel Schwarz.
   Tokens -> Base -> Layout -> Components -> Sections -> Booking -> Motion
   ========================================================================== */

:root{
  /* Farbe */
  --ink:        #07080a;
  --ink-2:      #0c0e12;
  --surface:    #11141a;
  --surface-2:  #171b22;
  --hairline:   rgba(255,255,255,.085);
  --hairline-2: rgba(255,255,255,.16);

  --text:       #f4f5f7;
  --text-dim:   #a7aeb8;
  --text-mute:  #6f767f;

  /* Signal: ein einziger Akzent — das Blau aus dem MJ-Logo */
  --accent:     #1a8fff;
  --accent-sft: #5ec2ff;
  --accent-dim: rgba(26,143,255,.14);
  /* Nardograu — die zweite Markenfarbe des RS6 */
  --nardo:      #cfd4d9;

  --ok:         #4ade80;
  --warn:       #fbbf24;

  /* Typo */
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Raum */
  --gutter: 24px;
  --max:    1280px;
  --rad:    4px;
  --rad-lg: 10px;

  --t-fast: .18s cubic-bezier(.4,0,.2,1);
  --t-med:  .38s cubic-bezier(.22,1,.36,1);
  --t-slow: .9s  cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  /* WICHTIG: clip statt hidden. overflow-x:hidden macht den Body zum
     Scroll-Container und setzt damit jedes position:sticky ausser Kraft
     (Scroll-Buehne, Preis-Box auf der Buchungsseite). */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* Film-Korn ueber der ganzen Seite — nimmt dem Schwarz das Billige */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent-sft);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Typo-Skala ---------- */
.h-mega,.h1,.h2,.h3{
  font-family:var(--display);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
}
.h-mega{ font-size:clamp(3.2rem, 11.5vw, 10.5rem); }
.h1{ font-size:clamp(2.4rem, 6.4vw, 5.2rem); }
.h2{ font-size:clamp(1.9rem, 4.2vw, 3.4rem); }
.h3{ font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.1; }

.lead{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--text-dim); max-width:62ch; }

/* Outline-Typo fuer die grossen Statements */
.outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--hairline-2);
}
.accent{ color:var(--accent); }
.nardo{ color:var(--nardo); }

/* Kapitel-Label, ueberall wiederverwendet */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-mute);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--accent); flex:none;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,10vw,150px); position:relative; }
.section--tight{ padding-block:clamp(52px,6vw,90px); }
.hr{ height:1px; background:var(--hairline); border:0; margin:0; }

.grid{ display:grid; gap:clamp(20px,3vw,44px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
@media (max-width:900px){
  .g-3,.g-4,.split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .g-2,.g-3,.g-4,.split{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:fixed; inset:0 0 auto; z-index:900;
  padding-block:16px 0;
  transition:background var(--t-med), border-color var(--t-med), padding var(--t-med);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(7,8,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hairline);
  padding-block:10px 0;
}
.hdr__in{ display:flex; align-items:center; gap:clamp(16px,4vw,48px); }

.logo{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em; font-size:1.18rem; }
.logo b{ font-weight:400; }
.logo span{ color:var(--accent); }
.logo small{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.18em;
  color:var(--text-mute); align-self:flex-end; padding-bottom:.2em;
}

/* Bildmarke (MJ + Silhouette) neben dem Schriftzug. Das PNG ist freigestellt,
   liegt also auf jedem Untergrund richtig. */
.logo__mark{
  height:38px; width:auto; align-self:center; flex:none;
  filter:drop-shadow(0 0 16px rgba(26,143,255,.35));
  transition:height var(--t-med), filter var(--t-med), transform var(--t-med);
}
.hdr.is-stuck .logo__mark{ height:30px; }
.logo:hover .logo__mark{
  transform:translateX(3px);
  filter:drop-shadow(0 0 22px rgba(26,143,255,.65));
}
@media (max-width:520px){
  .logo__mark{ height:32px; }
  .logo b,.logo small{ display:none; }
}

/* Volllogo im Footer */
.logo--full{ display:block; }
.logo--full img{
  width:min(260px,70%); height:auto; display:block;
  filter:drop-shadow(0 0 26px rgba(26,143,255,.22));
  transition:filter var(--t-med);
}
.logo--full:hover img{ filter:drop-shadow(0 0 34px rgba(26,143,255,.5)); }

.nav{ display:flex; gap:2rem; margin-inline:auto; }
.nav a{
  font-size:.86rem; letter-spacing:.02em; color:var(--text-dim);
  position:relative; padding-block:4px; transition:color var(--t-fast);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width var(--t-med);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--text); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }

.burger{
  display:none; background:none; border:1px solid var(--hairline-2);
  width:44px; height:38px; border-radius:var(--rad); position:relative;
}
.burger i{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--text);
  transition:transform var(--t-med), opacity var(--t-fast);
}
.burger i:nth-child(1){ top:13px; }
.burger i:nth-child(2){ bottom:13px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:980px){
  .burger{ display:block; margin-left:auto; order:3; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:.4rem; margin:0; padding:0 var(--gutter);
    background:var(--ink);
    clip-path:inset(0 0 100% 0);
    transition:clip-path var(--t-slow);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav a{
    font-family:var(--display); text-transform:uppercase;
    font-size:clamp(1.8rem,8vw,3rem); color:var(--text);
  }
  .hdr__cta{ display:none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --bg:var(--accent); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 1.6rem; border:0; border-radius:var(--rad);
  background:var(--bg); color:var(--fg);
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--t-fast), box-shadow var(--t-med), color var(--t-med);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--text); transform:translateY(101%);
  transition:transform var(--t-med);
}
.btn:hover{ color:var(--ink); transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(26,143,255,.6); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn--ghost{ --bg:transparent; --fg:var(--text); box-shadow:inset 0 0 0 1px var(--hairline-2); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--text); }
.btn--sm{ padding:.68rem 1.1rem; font-size:.74rem; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* Textlink mit wanderndem Pfeil */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text); border-bottom:1px solid var(--hairline-2); padding-bottom:.35rem;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.tlink svg{ transition:transform var(--t-med); }
.tlink:hover{ color:var(--accent); border-color:var(--accent); }
.tlink:hover svg{ transform:translateX(5px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:172px 56px; overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
/* Lichtkegel, folgt der Maus (--mx/--my aus JS) */
.hero::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(42rem 42rem at var(--mx,62%) var(--my,34%), rgba(26,143,255,.2), transparent 62%),
    radial-gradient(30rem 24rem at 12% 88%, rgba(207,212,217,.09), transparent 70%);
  transition:background .5s ease-out;
}
/* Technisches Raster */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 15%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 45%, #000 15%, transparent 78%);
  opacity:.75;
}
.hero__in{ position:relative; z-index:2; width:100%; }

.hero__kicker{
  display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--hairline-2); border-radius:100px; padding:.45rem 1rem;
  background:rgba(12,14,18,.55); backdrop-filter:blur(6px);
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:pulse 2.4s infinite; flex:none; }
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

/* Etwas kleiner als .h-mega sonst: so bleibt "DEIN WOCHENENDE" auch neben
   dem Logo komplett im Bild und wird am rechten Rand nicht abgeschnitten. */
.hero__title{ margin-bottom:1.4rem; font-size:clamp(2.9rem, 9.2vw, 8.4rem); }
.hero__title em{ display:block; font-style:normal; }
.hero__sub{ max-width:48ch; margin-bottom:2.2rem; }

.hero__foot{
  display:flex; flex-wrap:wrap; gap:clamp(20px,5vw,64px);
  align-items:flex-end; justify-content:space-between;
  margin-top:clamp(40px,7vw,80px); padding-top:28px;
  border-top:1px solid var(--hairline);
}
.hero__specs{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,52px); }

.stat{ display:flex; flex-direction:column; gap:.2rem; }
.stat__n{ font-family:var(--display); font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1; }
.stat__l{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); }

/* Wagen-Silhouette im Hero */
.hero__car{
  position:absolute; z-index:1; right:-4%; top:46%; translate:0 -50%;
  width:min(78vw,1020px); opacity:.5;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.9));
  pointer-events:none;
}
.car .body{ fill:none; stroke:var(--nardo); stroke-width:1.4; opacity:.6; stroke-linejoin:round; stroke-linecap:round; }
.car .glow{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; }
.car .fill{ fill:rgba(207,212,217,.04); stroke:none; }
@media (max-width:900px){ .hero__car{ width:130vw; right:-30%; opacity:.28; } }

/* Scroll-Hinweis */
.scroll-cue{
  position:absolute; left:var(--gutter); bottom:22px; z-index:3;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-mute); display:flex; align-items:center; gap:.6rem;
}
/* Volllogo rechts oben im Hero. Bewusst absolut positioniert: der Inhalt
   links (Kicker, Headline, Buttons, Eckdaten) bleibt damit genau da, wo er
   vorher war, und steht sofort ohne Scrollen im Bild. */
.hero__logo{
  position:absolute; right:0; top:-40px; z-index:2;
  width:min(26vw,360px); height:auto; margin:0;
  filter:drop-shadow(0 0 46px rgba(26,143,255,.3));
  opacity:0; transform:translateY(16px) scale(.97);
  animation:logo-in 1.2s .15s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes logo-in{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero__logo{ animation:none; opacity:1; transform:none; }
}
html.motion-off .hero__logo{ animation:none; opacity:1; transform:none; }
/* Schmale Viewports: das Logo steckt schon im Header, hier zaehlt der Platz. */
@media (max-width:1024px){ .hero__logo{ display:none; } }

.scroll-cue i{ width:1px; height:34px; background:linear-gradient(var(--accent),transparent); display:block; animation:cue 2s infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* Innenseiten-Kopf */
.phead{
  padding-block:clamp(158px,17vw,215px) clamp(30px,5vw,56px);
  border-bottom:1px solid var(--hairline);
  background:radial-gradient(40rem 20rem at 85% -10%, rgba(26,143,255,.14), transparent 70%);
}

/* ==========================================================================
   Karten / Panels
   ========================================================================== */
.card{
  position:relative; padding:clamp(22px,3vw,34px);
  background:linear-gradient(160deg,var(--surface),var(--ink-2));
  border:1px solid var(--hairline); border-radius:var(--rad-lg);
  overflow:hidden; transition:border-color var(--t-med), transform var(--t-med);
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity var(--t-med);
}
.card:hover{ border-color:var(--hairline-2); transform:translateY(-3px); }
.card:hover::before{ opacity:1; }
.card__n{
  font-family:var(--mono); font-size:.68rem; color:var(--accent);
  letter-spacing:.14em; margin-bottom:1.1rem;
}
.card p{ color:var(--text-dim); margin:.6rem 0 0; font-size:.94rem; }

/* Nummerierte Ablauf-Schritte */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s;
  display:grid; grid-template-columns:72px 1fr; gap:clamp(16px,3vw,40px);
  padding-block:clamp(22px,3vw,34px); border-top:1px solid var(--hairline);
  transition:background var(--t-med);
}
.step:last-child{ border-bottom:1px solid var(--hairline); }
.step:hover{ background:linear-gradient(90deg,var(--accent-dim),transparent 60%); }
.step::before{
  content:"0" counter(s);
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,2rem);
  color:transparent; -webkit-text-stroke:1px var(--hairline-2);
  transition:color var(--t-med);
}
.step:hover::before{ color:var(--accent); -webkit-text-stroke-color:transparent; }
.step h3{ margin:0 0 .4rem; font-size:1.05rem; }
.step p{ margin:0; color:var(--text-dim); font-size:.93rem; max-width:70ch; }
@media (max-width:620px){ .step{ grid-template-columns:48px 1fr; } }

/* ==========================================================================
   Fahrzeug-Showcase
   ========================================================================== */
.showcase{
  position:relative; border:1px solid var(--hairline); border-radius:var(--rad-lg);
  background:
    radial-gradient(60rem 30rem at 50% 115%, rgba(26,143,255,.16), transparent 70%),
    linear-gradient(170deg,var(--surface-2),var(--ink));
  padding:clamp(24px,4vw,56px); overflow:hidden;
}
.showcase__tag{
  position:absolute; top:0; right:0; z-index:3;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:.5rem 1rem;
  border-bottom-left-radius:var(--rad-lg);
}
.stage{
  aspect-ratio:16/9; border-radius:var(--rad); overflow:hidden;
  background:
    radial-gradient(50% 70% at 50% 100%, rgba(207,212,217,.12), transparent),
    linear-gradient(180deg, var(--ink-2), var(--surface));
  display:grid; place-items:center; position:relative;
  border:1px solid var(--hairline);
}
.stage.has-photo{ background-size:cover; background-position:center; }
.stage.has-photo .car,.stage.has-photo .stage__hint{ display:none; }
.stage .car{ width:88%; }
.stage__hint{
  position:absolute; bottom:10px; right:12px;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mute); opacity:.5;
}
.stage--sm{ aspect-ratio:4/3; }

/* Datenblatt */
.specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--rad); overflow:hidden; margin:0; }
.specs div{ background:var(--ink-2); padding:1.1rem 1.2rem; }
.specs dt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:.35rem; }
.specs dd{ margin:0; font-size:1rem; font-weight:600; }

/* Zweiter Slot — ehrlich kommuniziert */
.soon{
  border:1px dashed var(--hairline-2); border-radius:var(--rad-lg);
  padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; justify-content:center;
  gap:.6rem; background:repeating-linear-gradient(135deg,transparent 0 10px, rgba(255,255,255,.012) 10px 20px);
}
.soon .h3{ color:var(--text-mute); }

/* Ausstattungs-Liste */
.feat{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.1rem 1.6rem; }
.feat li{ display:flex; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--hairline); font-size:.92rem; color:var(--text-dim); }
.feat li::before{ content:"+"; color:var(--accent); font-family:var(--mono); flex:none; }

/* ==========================================================================
   Preis-Pakete
   ========================================================================== */
.pricing{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--rad-lg); overflow:hidden; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .pricing{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .pricing{ grid-template-columns:1fr; } }

.pkg{ background:var(--ink-2); padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; gap:1rem; position:relative; transition:background var(--t-med); }
.pkg:hover{ background:var(--surface-2); }
.pkg--best{ background:linear-gradient(180deg,rgba(26,143,255,.1),var(--ink-2)); }
.pkg__badge{
  position:absolute; top:14px; right:14px;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:100px; padding:.2rem .55rem;
}
.pkg__name{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.pkg__price{ font-family:var(--display); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; }
.pkg__price small{ font-family:var(--sans); font-size:.8rem; font-weight:400; color:var(--text-mute); display:block; margin-top:.4rem; letter-spacing:0; }
.pkg ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.88rem; color:var(--text-dim); }
.pkg li{ display:flex; gap:.6rem; }
.pkg li::before{ content:"—"; color:var(--accent); flex:none; }
.pkg__foot{ margin-top:auto; }

/* Tabelle (Extras, km-Staffel) */
.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th,.tbl td{ text-align:left; padding:1rem .9rem; border-bottom:1px solid var(--hairline); }
.tbl th{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); font-weight:400; }
.tbl td:last-child,.tbl th:last-child{ text-align:right; white-space:nowrap; }
.tbl tbody tr{ transition:background var(--t-fast); }
.tbl tbody tr:hover{ background:var(--surface); }
.tbl strong{ color:var(--text); }
.tbl-scroll{ overflow-x:auto; }

/* ==========================================================================
   Verfuegbarkeits-Kalender
   ========================================================================== */
.cal{
  border:1px solid var(--hairline); border-radius:var(--rad-lg);
  background:var(--ink-2); overflow:hidden;
}
.cal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--hairline); background:var(--surface);
}
.cal__bar h3{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:0; color:var(--text-dim); }
.cal__nav{ display:flex; gap:.4rem; }
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--ink-2); border:1px solid var(--hairline-2); border-radius:var(--rad);
  transition:background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover{ background:var(--accent); border-color:var(--accent); }
.icon-btn[disabled]{ opacity:.3; pointer-events:none; }

.cal__months{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ .cal__months{ grid-template-columns:1fr; } }
.month{ padding:1.3rem; }
.month + .month{ border-left:1px solid var(--hairline); }
@media (max-width:760px){ .month + .month{ border-left:0; border-top:1px solid var(--hairline); } }
.month__h{ font-family:var(--display); text-transform:uppercase; font-size:1rem; margin:0 0 1rem; letter-spacing:.02em; }
.month__h span{ color:var(--text-mute); }

.dow,.days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dow{ margin-bottom:6px; }
.dow span{ font-family:var(--mono); font-size:.58rem; text-align:center; color:var(--text-mute); letter-spacing:.06em; }

.day{
  position:relative; aspect-ratio:1; border:1px solid transparent; border-radius:var(--rad);
  background:var(--surface); color:var(--text-dim);
  font-size:.82rem; font-variant-numeric:tabular-nums;
  display:grid; place-items:center; padding:0;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.day--pad{ background:transparent; pointer-events:none; }
.day--free:hover{ background:var(--accent-sft); color:#fff; border-color:var(--accent-sft); }
.day--past,.day--lead{ background:transparent; color:var(--text-mute); opacity:.4; pointer-events:none; }
/* Belegt bleibt bewusst neutral-grau: Blau ist jetzt die Auswahlfarbe. */
.day--busy{ background:rgba(167,174,184,.1); color:var(--text-dim); pointer-events:none; }
.day--busy::after{
  content:""; position:absolute; inset:0; border-radius:var(--rad);
  background:repeating-linear-gradient(45deg,transparent 0 3px, rgba(167,174,184,.2) 3px 6px);
}
.day--option{ background:rgba(251,191,36,.12); color:var(--warn); pointer-events:none; }
.day--sel{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.day--range{ background:var(--accent-dim); color:var(--text); }
.day--hint{ background:rgba(26,143,255,.07); }
/* Nach der Wahl eines Tages: ab hier ist keine Verlaengerung mehr moeglich */
.day--unreach{ opacity:.38; }
.day--unreach:hover{ background:transparent; color:inherit; border-color:inherit; }
/* Erklaerender Hinweis unter dem Kalender - kein Fehler, also nicht alarmrot */
.kal-hinweis{ color:var(--text-dim); }

.legend{ display:flex; flex-wrap:wrap; gap:1.1rem; padding:1rem 1.3rem; border-top:1px solid var(--hairline); background:var(--surface); }
.legend span{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); }
.legend i{ width:11px; height:11px; border-radius:2px; flex:none; }
.lg-free{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--hairline-2); }
.lg-busy{ background:rgba(167,174,184,.38); }
.lg-opt{ background:rgba(251,191,36,.4); }
.lg-sel{ background:var(--accent); }

/* ==========================================================================
   Buchungs-Konfigurator
   ========================================================================== */
.booking{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(20px,3vw,36px); align-items:start; }
@media (max-width:1040px){ .booking{ grid-template-columns:1fr; } }

.panel{ border:1px solid var(--hairline); border-radius:var(--rad-lg); background:var(--ink-2); overflow:hidden; }
.panel + .panel{ margin-top:clamp(16px,2vw,24px); }
.panel__h{ padding:1.1rem 1.3rem; border-bottom:1px solid var(--hairline); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.panel__h h3{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:0; color:var(--text-dim); }
.panel__b{ padding:clamp(18px,2.4vw,26px); }

.sticky{ position:sticky; top:92px; }
@media (max-width:1040px){ .sticky{ position:static; } }

.field{ display:grid; gap:.45rem; margin-bottom:1rem; }
.field > label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }
.input{
  width:100%; padding:.85rem 1rem; background:var(--surface); color:var(--text);
  border:1px solid var(--hairline-2); border-radius:var(--rad); font:inherit; font-size:.92rem;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.input:hover{ border-color:var(--text-mute); }
.input:focus{ border-color:var(--accent); background:var(--ink-2); outline:none; }
textarea.input{ min-height:110px; resize:vertical; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a7aeb8' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:560px){ .field--row{ grid-template-columns:1fr; } }
.hint{ font-size:.76rem; color:var(--text-mute); }
.err{ color:var(--accent-sft); font-size:.78rem; }

/* Extras als klickbare Zeilen */
.opt{
  display:flex; align-items:flex-start; gap:.9rem; padding:.9rem 1rem;
  border:1px solid var(--hairline); border-radius:var(--rad); background:var(--surface);
  cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast);
  margin-bottom:.6rem;
}
.opt:hover{ border-color:var(--hairline-2); }
.opt:has(input:checked){ border-color:var(--accent); background:linear-gradient(90deg,var(--accent-dim),var(--surface)); }
.opt input{ accent-color:var(--accent); width:17px; height:17px; margin-top:2px; flex:none; }
.opt__t{ flex:1; }
.opt__t b{ display:block; font-size:.92rem; font-weight:600; }
.opt__t small{ color:var(--text-mute); font-size:.78rem; }
.opt__p{ font-family:var(--mono); font-size:.82rem; color:var(--nardo); white-space:nowrap; }

/* Rechnungsblock */
.sum{ display:grid; }
.sum__row{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; font-size:.9rem; border-bottom:1px dashed var(--hairline); }
.sum__row span:first-child{ color:var(--text-dim); }
.sum__row b{ font-variant-numeric:tabular-nums; font-weight:600; }
.sum__row--mute{ font-size:.82rem; }
.sum__row--mute span,.sum__row--mute b{ color:var(--text-mute); font-weight:400; }
.sum__tot{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--hairline-2); }
.sum__tot .lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }
.sum__tot .val{ font-family:var(--display); font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; }
.sum__note{ margin-top:1rem; padding:.9rem 1rem; border-radius:var(--rad); background:var(--surface); border-left:2px solid var(--accent); font-size:.8rem; color:var(--text-dim); }
.sum__empty{ color:var(--text-mute); font-size:.88rem; text-align:center; padding:2.4rem 0; }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.chip{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:100px; background:var(--accent-dim);
  color:var(--accent-sft); border:1px solid rgba(26,143,255,.3);
}
.chip--grey{ background:var(--surface); color:var(--text-dim); border-color:var(--hairline-2); }

/* Erfolgsmeldung */
.done{
  display:none; padding:clamp(20px,3vw,32px); border:1px solid rgba(74,222,128,.35);
  border-radius:var(--rad-lg); background:rgba(74,222,128,.07);
}
.done.is-on{ display:block; }
.done h3{ margin:0 0 .6rem; }
.done p{ color:var(--text-dim); font-size:.92rem; margin:0 0 1rem; }
.done pre{
  font-family:var(--mono); font-size:.76rem; color:var(--text-dim); white-space:pre-wrap;
  background:var(--ink); padding:1rem; border-radius:var(--rad); border:1px solid var(--hairline);
  max-height:260px; overflow:auto; margin:0 0 1rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--hairline); }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.3rem 0; display:flex; gap:1.2rem; align-items:center;
  font-size:1.02rem; font-weight:500; transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.3rem; color:var(--accent);
  transition:transform var(--t-med);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 0 1.4rem; color:var(--text-dim); max-width:80ch; font-size:.94rem; }
.faq details > div p{ margin:0 0 .7rem; }

/* ==========================================================================
   CTA / Footer
   ========================================================================== */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(70px,11vw,150px);
  background:radial-gradient(45rem 24rem at 50% 120%, rgba(26,143,255,.22), transparent 70%);
  border-top:1px solid var(--hairline);
}
.cta .h-mega{ margin-bottom:1.4rem; }
.cta .lead{ margin-inline:auto; margin-bottom:2.4rem; text-align:center; }
.cta .btn-row{ justify-content:center; }

.ftr{ border-top:1px solid var(--hairline); background:var(--ink-2); padding-block:clamp(44px,6vw,72px) 28px; }
.ftr__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); }
@media (max-width:860px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr__top{ grid-template-columns:1fr; } }
.ftr h4{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin:0 0 1.1rem; font-weight:400; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ftr a,.ftr li{ color:var(--text-dim); font-size:.9rem; }
.ftr a{ transition:color var(--t-fast); }
.ftr a:hover{ color:var(--accent); }
.ftr__bot{
  margin-top:clamp(32px,5vw,56px); padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--text-mute); text-transform:uppercase;
}

/* Sticky Reservierungs-Leiste (mobil) */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  display:none; gap:.8rem; align-items:center; justify-content:space-between;
  padding:.8rem var(--gutter);
  background:rgba(7,8,10,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline);
}
.dock b{ font-family:var(--display); font-size:1rem; }
.dock small{ display:block; font-family:var(--mono); font-size:.58rem; color:var(--text-mute); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:760px){ .dock{ display:flex; } body{ padding-bottom:76px; } }

/* Orte im Einzugsgebiet — Chips statt Aufzaehlung */
.orte{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1.6rem 0 0; }
.orte li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--hairline-2); border-radius:100px;
  padding:.35rem .8rem; background:var(--surface);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.orte li:hover{ border-color:var(--accent); color:var(--text); }
#oldenburg p{ color:var(--text-dim); font-size:.95rem; margin:0 0 1rem; }
#oldenburg .lead{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--text-dim); }

/* ==========================================================================
   Einwilligung (Cookie-Banner)
   Liegt ueber allem (z-index 1000), damit nichts davor klickbar ist, bevor
   entschieden wurde. Auf dem Handy sitzt er ueber der Reservierungsleiste.
   ========================================================================== */
.consent{
  position:fixed; z-index:1000;
  left:var(--gutter); bottom:var(--gutter); width:min(460px, calc(100vw - 2*var(--gutter)));
  background:rgba(12,14,18,.97); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--hairline-2); border-radius:var(--rad-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(26,143,255,.12);
  opacity:0; transform:translateY(18px);
  transition:opacity var(--t-med), transform var(--t-med);
}
.consent.is-on{ opacity:1; transform:none; }
.consent__in{ padding:clamp(18px,2.4vw,26px); }
.consent__eyebrow{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .5rem;
}
.consent__h{ font-family:var(--display); text-transform:uppercase; font-size:1.3rem; line-height:1; margin:0 0 .7rem; font-weight:400; }
.consent__t{ font-size:.86rem; line-height:1.55; color:var(--text-dim); margin:0 0 1.1rem; }

.consent__opts{ display:grid; gap:.5rem; margin-bottom:1.1rem; max-height:40vh; overflow-y:auto; }
/* display:grid wuerde [hidden] sonst aushebeln */
.consent__opts[hidden]{ display:none; }
.consent__opt{
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  padding:.7rem .8rem; border:1px solid var(--hairline); border-radius:var(--rad);
  background:var(--surface); transition:border-color var(--t-fast);
}
.consent__opt:hover{ border-color:var(--hairline-2); }
.consent__opt:has(input:checked){ border-color:rgba(26,143,255,.45); }
.consent__opt:has(input:disabled){ cursor:default; opacity:.85; }
.consent__opt input{ accent-color:var(--accent); width:16px; height:16px; margin-top:2px; flex:none; }
.consent__opt b{ display:block; font-size:.84rem; font-weight:600; margin-bottom:.15rem; }
.consent__opt em{ font-style:normal; font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); }
.consent__opt small{ display:block; font-size:.76rem; line-height:1.5; color:var(--text-mute); }

/* Beide Hauptknoepfe bewusst gleich gross: eine Ablehnung muss genauso
   leicht sein wie die Zustimmung (Vorgabe der Datenschutzkonferenz). */
.consent__row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.consent__row .btn{ flex:1 1 auto; justify-content:center; }
.consent__link{
  background:none; border:0; padding:.4rem .2rem; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute); border-bottom:1px solid var(--hairline-2);
}
.consent__link:hover{ color:var(--accent); border-color:var(--accent); }
.consent__fine{ margin:1rem 0 0; font-size:.72rem; color:var(--text-mute); }
.consent__fine a{ color:var(--text-dim); border-bottom:1px solid var(--hairline-2); }
.consent__fine a:hover{ color:var(--accent); }

@media (max-width:760px){
  .consent{ left:10px; right:10px; width:auto; bottom:84px; }
  .consent__row .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .consent{ transition:none; }
}

/* Fliesstext-Seiten (Impressum, Datenschutz) */
.prose{ max-width:78ch; }
.prose h2{ font-family:var(--display); text-transform:uppercase; font-size:1.3rem; margin:2.6rem 0 .8rem; letter-spacing:-.01em; }
.prose h3{ font-size:1rem; margin:1.8rem 0 .5rem; }
.prose p,.prose li{ color:var(--text-dim); font-size:.95rem; }
.prose ul{ padding-left:1.2rem; }
.prose a{ color:var(--accent); }
.note{
  padding:1rem 1.2rem; border-radius:var(--rad); background:var(--surface);
  border-left:2px solid var(--warn); font-size:.88rem; color:var(--text-dim); margin:1.4rem 0;
}

/* ==========================================================================
   Motion
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity var(--t-slow), transform var(--t-slow); transition-delay:var(--d,0ms); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .pulse,.scroll-cue i{ animation:none; }
}

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ==========================================================================
   Echte Fotos
   Die Bilder liegen in assets/img/ und werden von main.js erkannt. Fehlt
   eines, bleibt automatisch die gezeichnete Silhouette stehen.
   ========================================================================== */

/* ---- Hero-Foto ---- */
.hero__photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.4s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.hero__photo.has-photo{ opacity:1; transform:scale(1); }
/* Abdunkeln, damit die Schrift links sicher lesbar bleibt */
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,8,10,.97) 0%, rgba(7,8,10,.88) 34%,
                            rgba(7,8,10,.42) 62%, rgba(7,8,10,.72) 100%),
    linear-gradient(to top, var(--ink) 3%, rgba(7,8,10,.1) 46%);
}
/* Sobald ein Foto da ist, verschwindet die Zeichnung */
.hero__photo.has-photo ~ .hero__car{ opacity:0; }
.hero__photo.has-photo ~ .hero__in .hero__kicker{ background:rgba(7,8,10,.72); }

/* ---- Galerie mit echten Fotos ---- */
.shots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
@media (max-width:760px){ .shots{ grid-template-columns:1fr; } }
.shot{
  position:relative; aspect-ratio:4/3; border-radius:var(--rad-lg); overflow:hidden;
  border:1px solid var(--hairline); background:var(--surface);
  background-size:cover; background-position:center;
  transition:transform var(--t-med), border-color var(--t-med);
}
.shot:hover{ transform:translateY(-4px); border-color:var(--hairline-2); }
.shot::after{
  content:attr(data-label);
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1rem .9rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); background:linear-gradient(transparent, rgba(7,8,10,.9));
}

/* Bildnachweis, dezent */
.credit{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  color:var(--text-mute); margin-top:1rem; line-height:1.7;
}
.credit a{ color:var(--text-mute); border-bottom:1px solid var(--hairline-2); }
.credit a:hover{ color:var(--accent); }

/* Hero-Foto atmet langsam — laeuft erst an, wenn die Einblendung durch ist */
.hero__photo.has-photo{ animation:kenburns 26s 1.5s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){
  .hero__photo.has-photo{ animation:none; }
}

/* ==========================================================================
   Dauer-Laufband unter dem Header
   Laeuft immer, auf jeder Seite, und reagiert ueber --v auf das Scrolltempo.
   ========================================================================== */
.ticker{
  --v:0;
  display:flex; overflow:hidden; user-select:none;
  margin-top:12px;
  border-block:1px solid var(--hairline);
  background:linear-gradient(90deg, var(--ink-2), var(--surface), var(--ink-2));
  transition:margin var(--t-med);
}
.hdr.is-stuck .ticker{ margin-top:9px; }

.ticker__t{
  display:flex; align-items:center; gap:2.6rem; padding:7px 1.3rem 7px 0;
  flex:none; white-space:nowrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  animation:tick 30s linear infinite;
  transform:skewX(calc(var(--v) * -7deg));
  transition:transform .3s ease-out;
}
.ticker__t > span{ display:flex; align-items:center; gap:2.6rem; }
.ticker__t > span::after{
  content:""; width:5px; height:5px; background:var(--accent); rotate:45deg; flex:none;
}
.ticker__t b{ color:var(--text); font-weight:500; }
.ticker__t em{ color:var(--accent); font-style:normal; }
.ticker:hover .ticker__t{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-100%) skewX(calc(var(--v) * -7deg)); } }

@media (max-width:980px){
  .ticker{ margin-top:10px; }
  .ticker__t{ font-size:.58rem; gap:1.8rem; }
  .ticker__t > span{ gap:1.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .ticker__t{ animation:none; transform:none; }
}

/* ==========================================================================
   Scroll-Fortschritt — haarfeine Linie ganz oben
   ========================================================================== */
.progress{
  position:fixed; inset:0 0 auto; z-index:950; height:2px;
  background:transparent; pointer-events:none;
}
.progress i{
  display:block; height:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--accent-sft));
  box-shadow:0 0 12px rgba(26,143,255,.7);
}

/* ==========================================================================
   Horizontale Galerie
   Der Abschnitt klebt, der Streifen faehrt seitlich durch.
   Hoehe setzt main.js passend zur Breite des Streifens.
   ========================================================================== */
.hscroll{ position:relative; background:var(--ink); border-block:1px solid var(--hairline); }
.hscroll__stage{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden; --p:0;
}
.hscroll__stage::before{   /* Licht, wandert mit */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(34rem 30rem at calc(90% - var(--p) * 70%) 50%,
             rgba(26,143,255,.2), transparent 64%);
}
.hscroll__track{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  padding-inline:var(--gutter); will-change:transform;
}
.hitem{
  flex:none; position:relative; overflow:hidden; margin:0;
  width:clamp(260px, 38vw, 540px); aspect-ratio:4/3;
  border-radius:var(--rad-lg); border:1px solid var(--hairline);
  background:var(--surface) center/cover;
}
.hitem--tall{ aspect-ratio:3/4; width:clamp(220px, 28vw, 400px); }
.hitem__cap{
  position:absolute; left:0; right:0; bottom:0; padding:3rem 1.2rem 1.1rem;
  background:linear-gradient(transparent, rgba(7,8,10,.92));
}
.hitem__cap b{ display:block; font-family:var(--display); text-transform:uppercase; font-size:1.05rem; }
.hitem__cap small{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); }

/* Textkachel im Streifen */
.hintro{ flex:none; width:clamp(260px, 32vw, 460px); padding-right:1rem; align-self:center; }
.hintro .h2{ margin-bottom:1rem; }
.hintro p{ color:var(--text-dim); font-size:.96rem; }

/* Abschluss-Kachel mit Handlungsaufruf */
.hcta{
  flex:none; width:clamp(240px, 26vw, 380px); aspect-ratio:4/3;
  border:1px dashed var(--hairline-2); border-radius:var(--rad-lg);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
  padding:clamp(20px,2.4vw,32px);
  background:radial-gradient(22rem 18rem at 50% 120%, rgba(26,143,255,.2), transparent 70%);
}

/* Ohne Animation: einfach untereinander */
@media (prefers-reduced-motion:reduce){
  .hscroll{ height:auto !important; }
  .hscroll__stage{ position:static; height:auto; display:block; padding-block:70px; }
  .hscroll__track{ flex-wrap:wrap; justify-content:center; transform:none !important; }
}

/* ==========================================================================
   Titel-Reveal: Zeilen schieben sich hinter einer Kante hervor
   ========================================================================== */
.rvl{ display:block; overflow:hidden; padding-bottom:.08em; }
.rvl > i{
  display:block; font-style:normal;
  transform:translateY(108%);
  animation:rvl 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
.rvl:nth-of-type(2) > i{ animation-delay:.13s; }
.rvl:nth-of-type(3) > i{ animation-delay:.26s; }
@keyframes rvl{ to{ transform:none; } }

/* Dasselbe beim Hereinscrollen fuer Abschnitts-Titel */
[data-reveal] .rvl > i{ animation:none; transform:translateY(108%); }
[data-reveal].is-in .rvl > i{ animation:rvl 1s cubic-bezier(.16,1,.3,1) forwards; }

@media (prefers-reduced-motion:reduce){
  .rvl > i{ animation:none !important; transform:none !important; }
}

/* ==========================================================================
   Laufband im Seitenfluss — grosse Schrift, laeuft endlos durch
   Die Inhalte stehen zweimal im HTML, damit die Schleife auch ohne
   JavaScript luckenlos ist.
   ========================================================================== */
.marquee{
  display:flex; overflow:hidden; user-select:none;
  padding-block:20px;
  border-block:1px solid var(--hairline);
  background:
    radial-gradient(40rem 10rem at 50% 50%, rgba(26,143,255,.09), transparent 70%),
    var(--ink-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__t{
  display:flex; align-items:center; gap:3.2rem; padding-right:3.2rem;
  flex:none; white-space:nowrap;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,2.3rem); letter-spacing:-.01em;
  color:var(--text);
  animation:slide 28s linear infinite;
}
.marquee__t > span{ display:flex; align-items:center; gap:3.2rem; }
.marquee__t > span::after{
  content:""; width:9px; height:9px; background:var(--accent); rotate:45deg; flex:none;
}
/* jedes zweite Wort nur als Kontur — gibt dem Band Rhythmus */
.marquee__t > span:nth-child(even){
  color:transparent; -webkit-text-stroke:1.2px var(--hairline-2);
}
.marquee:hover .marquee__t{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ==========================================================================
   Bewegungs-Schalter
   Standard: wir respektieren die Systemeinstellung. Wer sie gesetzt hat,
   aber die Animationen trotzdem sehen will, schaltet sie im Footer an —
   die Wahl landet in localStorage und gilt fuer alle Seiten.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .marquee__t{ animation:none; }
}
/* ausdruecklich eingeschaltet -> Animationen laufen trotz Systemeinstellung */
html.motion-on .marquee__t{ animation:slide 28s linear infinite !important; }
html.motion-on .ticker__t{ animation:tick 30s linear infinite !important; }
html.motion-on .hero__photo.has-photo{ animation:kenburns 26s 1.5s ease-in-out infinite alternate !important; }
html.motion-on .rvl > i{ animation:rvl 1.1s cubic-bezier(.16,1,.3,1) forwards !important; }
html.motion-on [data-reveal]{ transition:opacity .9s, transform .9s; }

/* ausdruecklich ausgeschaltet */
html.motion-off .marquee__t,
html.motion-off .ticker__t,
html.motion-off .hero__photo.has-photo,
html.motion-off .pulse,
html.motion-off .scroll-cue i{ animation:none !important; }
html.motion-off .rvl > i{ animation:none !important; transform:none !important; }

.motion-toggle{
  background:none; border:1px solid var(--hairline-2); border-radius:100px;
  padding:.4rem .9rem; color:var(--text-mute);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.motion-toggle:hover{ color:var(--text); border-color:var(--text-mute); }
.motion-toggle i{
  width:6px; height:6px; border-radius:50%; background:var(--text-mute); flex:none;
}
.motion-toggle[aria-pressed="true"] i{ background:var(--ok); }

/* Honigtopf im Anfrageformular: vollstaendig aus dem Blickfeld, aber
   nicht display:none — manche Bots ignorieren versteckte Felder. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }