/* WaterBob-Website: gemeinsames Stylesheet aller Sprachen. */
*{box-sizing:border-box}

/* ======================= FARBEN =======================
   Hauptfarbe ist das Blau der CamperStation-Farbmarke (#2d61ab) – es ist der
   Hintergrund der ganzen Seite. Sekundärfarbe ist das Tankgrau (#b1b5b7); daraus
   sind die grauen Tafeln (.band), mit denen sich die Seite abwechselt. Dazu das
   Gelb der Farbmarke (#f7b906) – sparsam und nur dort, wo etwas zu tun ist:
   Knöpfe in den Shop, die Fahrbahn unten, die Schrittzahl, das Schild „mehr Druck".

   Drei Umgebungen, jede setzt ihre eigenen Variablen; alle Bausteine lesen nur die
   Variablen, deshalb passt sich alles von selbst an:
     :root / body  blaue Tafel  – weisse Schrift auf Deckelblau
     .band         graue Tafel  – dunkle Schrift auf hellem Tankgrau
     .card & Co.   weisse Fläche auf beiden – dunkle Schrift
   ====================================================== */
:root{
  --deckel:#3a74c0;        /* Markenblau, aufgehellt – der Hintergrund der ganzen Seite */
  --deckel-hell:#4f8ad8;   /* noch heller, für die Leuchten im Kopf */
  --deckel-dunkel:#1f4d8c; /* auf hellen Flächen: Verweise, Knöpfe in Karten */
  --auf-dunkel:#ffffff;    /* Schrift auf --deckel-dunkel */
  --deckel-tief:#245c9e;   /* Kopf und Kontakt */
  --tank:#b1b5b7;          /* Tankgrau aus dem Produktfoto */
  --tank-hell:#d3d8db;     /* die grauen Tafeln */

  /* Gelb der Farbmarke – nur für Handlungen, nie als Fläche */
  --cta:#f7b906; --on-cta:#241a00;
  --gelb-bg:#fdf0cf; --on-gelb-bg:#6a4c00;

  /* blaue Tafel (Standard) */
  --bg:var(--deckel);
  --ink:#ffffff;
  --muted:#ffffff;
  --line:rgba(255,255,255,.28);
  --tint:rgba(4,52,95,.42);
  --accent:#ffffff; --on-accent:var(--deckel-tief);
  --link:#ffffff;
  --mark:#bcd9ff;
  --focus:#ffffff;

  /* weisse Flächen darauf (Karten, Tafeln, Fotos) */
  --card:#ffffff;
  --card-ink:#14212b; --card-muted:#53606a; --card-line:#dde2e5; --card-tint:#eef1f3;

  /* Schilder */
  --wb-bg:#e3eefb; --on-wb-bg:#1d4a86;
  --grey-bg:#e7eaec; --on-grey-bg:#3a454e;

  --ok:#2e7d32; --ok-bg:#e6f2e7;
  --warn:#8a6100; --warn-bg:#f8efd8;
  --err:#c62828; --err-bg:#fbe9e9;
  --nav:rgba(28,74,132,.9);
  --shadow:0 1px 2px rgba(2,32,60,.16),0 12px 32px rgba(2,32,60,.24);
  --r:20px;
}
/* graue Tafeln: das Tankgrau, mit dunkler Schrift */
.band{
  --bg:var(--tank-hell);
  --ink:#14212b;
  --muted:#4c5760;
  --line:#bcc3c7;
  --tint:#e6eaec;
  --accent:var(--deckel-dunkel); --on-accent:var(--auf-dunkel);
  --link:var(--deckel-dunkel);
  --mark:var(--deckel-dunkel);
  --focus:var(--deckel-dunkel);
  background:var(--bg);color:var(--ink);
}
/* Weisse Flächen setzen die Schriftfarben zurück – sie stehen auf beiden Tafelarten. */
.card,.panel,.var,.acc-card,.shot,.result,.tagline,.partners{
  --ink:var(--card-ink);
  --muted:var(--card-muted);
  --line:var(--card-line);
  --tint:var(--card-tint);
  --accent:var(--deckel-dunkel); --on-accent:var(--auf-dunkel);
  --link:var(--deckel-dunkel);
  --mark:var(--deckel-dunkel);
  --focus:var(--deckel-dunkel);
  color:var(--ink);
}

/* Dunkles Thema: dasselbe Blau, nur tiefer abgemischt. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --deckel:#1d4074; --deckel-hell:#2f66ae; --deckel-dunkel:#9ec6f5; --deckel-tief:#132f56;
    --auf-dunkel:#0c1622;
    --cta:#f7b906; --on-cta:#241a00;
    --gelb-bg:#3a2c00; --on-gelb-bg:#f3d78a;
    --tank-hell:#141d24;
    --nav:rgba(12,30,58,.9);
    --tint:rgba(2,24,45,.5);
    --card:#12202c;
    --card-ink:#e8eef4; --card-muted:#a3b3c2; --card-line:#27384a; --card-tint:#16242f;
    --wb-bg:#123253; --on-wb-bg:#cfe6ff;
    --grey-bg:#232c34; --on-grey-bg:#ccd6de;
    --ok:#7ad38a; --ok-bg:#17301f;
    --warn:#e6c264; --warn-bg:#382f14;
    --err:#ff8a8a; --err-bg:#3d1c1c;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.45);
  }
  :root:not([data-theme="light"]) .band{--ink:#e8eef4;--muted:#a3b3c2;--line:#2a3640;--tint:#1b262e}
}
:root[data-theme="dark"]{
  --deckel:#1d4074; --deckel-hell:#2f66ae; --deckel-dunkel:#9ec6f5; --deckel-tief:#132f56;
  --auf-dunkel:#0c1622;
  --cta:#f7b906; --on-cta:#241a00;
  --gelb-bg:#3a2c00; --on-gelb-bg:#f3d78a;
  --tank-hell:#141d24;
  --nav:rgba(12,30,58,.9);
  --tint:rgba(2,24,45,.5);
  --card:#12202c;
  --card-ink:#e8eef4; --card-muted:#a3b3c2; --card-line:#27384a; --card-tint:#16242f;
  --wb-bg:#123253; --on-wb-bg:#cfe6ff;
  --grey-bg:#232c34; --on-grey-bg:#ccd6de;
  --ok:#7ad38a; --ok-bg:#17301f;
  --warn:#e6c264; --warn-bg:#382f14;
  --err:#ff8a8a; --err-bg:#3d1c1c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .band{--ink:#e8eef4;--muted:#a3b3c2;--line:#2a3640;--tint:#1b262e}

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* Die Fahrbahn der Seite gibt es nur im Querformat. Diese Regel muss VOR der
   Medienabfrage stehen, sonst gewinnt sie gegen deren display:block. */
.pageroad{display:none}
@media (prefers-reduced-motion: reduce){.pageroad .pbob{transition:none}}

/* ---------- Grundlagen ---------- */
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.5em}
h3{font-size:1.12rem;margin-bottom:.35em;letter-spacing:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--link);text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
section{padding:80px 0}
/* Die Leiste oben bleibt stehen – Sprungziele dürfen nicht darunter verschwinden. */
section[id],header[id]{scroll-margin-top:76px}
@media (max-width:640px){section{padding:56px 0}.wrap{padding:0 18px}}
.lead{font-size:1.18rem;max-width:36em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--link);margin-bottom:14px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--link)}
.big{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:clamp(1.25rem,2.8vw,1.55rem);line-height:1.35;max-width:30em;margin:0 0 .8em;letter-spacing:-.01em}
.small{font-size:.95rem;color:var(--muted)}
.band{background:var(--tint)}

/* ---------- Wortmarke: „Water“ in Tinte, „bob“ im Deckelblau ---------- */
.wm{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wm svg{width:28px;height:28px;flex:none;color:var(--mark)}
.wm .b{color:var(--mark)}
.wm.light{color:#fff}
.wm.light .b{color:#8cc4ff}
.wm.light svg{color:#8cc4ff}
/* Das Logo in Originalfarben auf weissem Schild – auf dem blauen Balken wäre es sonst
   kaum zu sehen. Die Höhe bestimmt die Grösse, die Breite folgt dem Seitenverhältnis. */
.wm.logo{background:#fff;border-radius:10px;padding:4px 9px;line-height:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.wm.logo img{display:block;height:38px;width:auto}
.wm.logo.gross img{height:64px}
@media (max-width:420px){.wm.logo{padding:3px 7px}.wm.logo img{height:31px}}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 22px;border-radius:12px;
  border:2px solid var(--cta);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;
  background:var(--cta);color:var(--on-cta);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn.light{background:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.sm{min-height:42px;padding:6px 16px;font-size:.92rem;border-radius:10px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav ul a{display:block;padding:8px 10px;border-radius:99px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap}
.nav ul a:hover{background:var(--tint)}
.nav .right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang{display:flex;gap:1px}
.lang a{padding:6px 7px;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.03em}
.lang a:hover{background:var(--tint);color:var(--ink)}
.lang a[aria-current]{color:var(--accent);background:var(--tint)}
.nav .btn.sm{white-space:nowrap}
@media (max-width:1180px){.nav ul{display:none}}
@media (max-width:480px){.nav .btn.sm{display:none}}

/* ---------- Dunkle Blöcke (feste Farben, in beiden Themes gleich) ---------- */
.dark{color:#fff;background:
    radial-gradient(62% 92% at 84% 0%, rgba(79,138,216,.92), transparent 62%),
    radial-gradient(48% 62% at 2% 100%, rgba(177,181,183,.30), transparent 60%),
    var(--deckel-tief)}
.dark .eyebrow{color:#bcd9ff}
.dark .eyebrow::before{background:var(--cta)}
.dark .muted,.dark .small{color:rgba(255,255,255,.9)}
.dark a{color:#d7e8ff}

/* ---------- Kopf ---------- */
.hero{padding:52px 0 68px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:880px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:52px}.hero{padding:68px 0 84px}}
/* Logo CamperStation: Original ist farbig auf transparent, deshalb im Kopf auf weißer Platte */
.partners{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;background:#fff;border-radius:14px;padding:10px 18px;max-width:100%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.partners .cs{height:48px;width:auto;flex:none;display:block}
.partners .by{font-size:.82rem;line-height:1.25;color:#5d6771;font-weight:700;max-width:12em}
@media (max-width:480px){.partners{gap:10px;padding:8px 12px}.partners .cs{height:38px}.partners .by{font-size:.74rem}}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.ptag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:99px;
  padding:6px 14px 6px 8px;font-weight:700;font-size:.95rem}
.ptag svg{width:24px;height:24px;flex:none;color:#8cc4ff}
.ptag span{font-weight:400;color:rgba(255,255,255,.93)}
@media (max-width:480px){.ptag span{display:none}}
.dark a.jump{display:inline-flex;align-items:center;background:#8cc4ff;color:#0c1622;border-radius:99px;padding:8px 13px;font-weight:700;font-size:.85rem;letter-spacing:.02em;text-decoration:none}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);max-width:14ch;margin-bottom:.4em;color:#fff;letter-spacing:-.025em}
.hero .lead{color:rgba(255,255,255,.95);font-size:1.22rem;max-width:32em}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding:0;list-style:none;font-size:.95rem;color:rgba(255,255,255,.95)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;flex:none}
.stage{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}
.stage::before{content:"";position:absolute;inset:6% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(143,199,242,.4),transparent);filter:blur(12px)}
/* <picture> ist nur die Hülle für die WebP-Fassung; alle Regeln gelten weiter dem Bild. */
.stage picture{display:contents}
.stage img{position:relative;display:block;width:100%;max-width:430px;height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.45))}
/* Preisschild am Kopfbild */
/* Preisschild: steht neben den Knöpfen im Kopf, nicht mehr auf dem Foto. */
/* Preis und Kleingedrucktes stehen nebeneinander, solange es passt; sonst rutscht das
   Kleingedruckte unter den Preis. Der Preis selbst bricht nie um – „139,00" und „€"
   gehören zusammen. */
.tagline{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:10px;row-gap:1px;max-width:100%;background:#fff;color:#1e242a;
  border-radius:18px;padding:8px 18px;box-shadow:0 10px 26px rgba(0,0,0,.28);line-height:1.2;
  text-align:center}
.tagline b{white-space:nowrap}
.tagline b{font-family:'Sora',system-ui,sans-serif;font-size:1.35rem;letter-spacing:-.02em}
.tagline span{font-size:.78rem;color:#5d6771}

/* ---------- Karten & Raster ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.grid3{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid3 .card{display:flex;flex-direction:column}
.grid3 p{font-size:1rem}
.two{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.two{grid-template-columns:1fr 1fr}}
.glyph{width:52px;height:52px;margin-bottom:16px;color:var(--ink);flex:none;background:var(--tint);border-radius:14px;padding:10px}
.glyph *{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.glyph .acc{stroke:var(--mark)}
.glyph .bad{stroke:var(--err)}
.dark .card{--ink:#fff;--muted:rgba(255,255,255,.75);--line:rgba(255,255,255,.14);--tint:rgba(255,255,255,.1);
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none;color:#fff}
.dark .glyph{background:rgba(255,255,255,.1);color:#fff}
.dark .glyph .acc{stroke:#8cc4ff}


/* ---------- Fotos ---------- */
figure{margin:0}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.shot > img{display:block;width:100%;height:auto}
.shots .shot > img{aspect-ratio:1/1;object-fit:cover}
.shot figcaption{padding:12px 18px;font-size:.92rem;color:var(--muted)}
.shots{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
@media (min-width:640px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots.pair{grid-template-columns:1fr}
@media (min-width:700px){.shots.pair{grid-template-columns:1fr 1fr}}

/* ---------- Chips / Einsatzorte ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.95rem;box-shadow:var(--shadow)}
.chip svg{width:18px;height:18px;flex:none;color:var(--accent)}
.chip svg *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Drei Schritte (Foto-Stepper) ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
@media (max-width:480px){.panel{padding:12px}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px;background:var(--tint);padding:6px;border-radius:14px}
.step{min-height:48px;border:0;background:transparent;color:var(--ink);border-radius:10px;
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:8px 6px;line-height:1.2}
.step[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 12px rgba(14,90,167,.25)}
@media (max-width:420px){.step{font-size:.82rem;padding:8px 4px}}
.walkthrough{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media (min-width:760px){.walkthrough{grid-template-columns:1fr 1fr;gap:28px}}
.frame{position:relative;border-radius:16px;overflow:hidden;background:var(--tint);aspect-ratio:1/1}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.frame img.on{opacity:1}
.frame .num{position:absolute;left:14px;top:14px;z-index:2;width:38px;height:38px;border-radius:12px;background:var(--cta);color:var(--on-cta);
  display:flex;align-items:center;justify-content:center;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:1.15rem;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media (prefers-reduced-motion: reduce){.frame img{transition:none}}
.cap h3{font-size:1.3rem;margin-bottom:.4em}
.cap p{font-size:1.05rem}
.cap .min{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border-radius:99px;background:var(--wb-bg);color:var(--on-wb-bg);font-weight:700;font-size:.88rem}
.cap .min svg{width:16px;height:16px;flex:none}
.cap .min svg *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.next{margin-top:18px;width:100%}
@media (min-width:520px){.next{width:auto}}

/* ---------- Versionen ---------- */
.vars{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
@media (min-width:620px){.vars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.var{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);position:relative}
.var.pick{border-color:var(--accent);box-shadow:0 0 0 3px var(--wb-bg),var(--shadow)}
.var h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.var .who{color:var(--muted);font-size:.98rem;margin:6px 0 14px}
.var .spec{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;font-size:.95rem}
.var .spec li{display:flex;gap:9px;align-items:flex-start}
.var .spec svg{width:17px;height:17px;flex:none;margin-top:.25em;color:var(--accent)}
.var .spec svg *{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.var .btn{margin-top:auto}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.tag.blue{background:var(--wb-bg);color:var(--on-wb-bg)}
.tag.grey{background:var(--gelb-bg);color:var(--on-gelb-bg)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}

/* ---------- Finder: zwei Fragen, eine Empfehlung ---------- */
.q{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.12rem;line-height:1.3;margin:0 0 12px;letter-spacing:-.01em}
.qblock{margin-bottom:22px}
.opts{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;min-height:50px;padding:13px 18px;border-radius:12px;
  border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.opt small{font-weight:400;font-size:.88rem;color:var(--muted)}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--wb-bg)}
.opt[aria-pressed="true"] small{color:var(--on-wb-bg)}
.result{margin-top:4px;border-radius:14px;padding:18px 20px;background:var(--wb-bg);color:var(--ink)}
.result b.h{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.2rem;margin-bottom:4px}
.result .cta{margin-top:16px}

/* ---------- Lieferumfang & technische Daten ---------- */
.pack{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pack li{display:flex;gap:12px;align-items:flex-start}
.pack svg{width:20px;height:20px;flex:none;margin-top:.22em;color:var(--accent)}
.pack svg *{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pack b{display:block}
.pack span{color:var(--muted);font-size:.95rem}
.specs{width:100%;border-collapse:collapse;margin-top:8px;font-size:.98rem}
.specs th,.specs td{text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{font-weight:700;width:42%;color:var(--muted);font-size:.92rem}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs td{font-variant-numeric:tabular-nums}

/* ---------- Zubehör ---------- */
.acc-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media (min-width:760px){.acc-grid{grid-template-columns:1fr 1fr}}
.acc-card{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
@media (min-width:460px){.acc-card{grid-template-columns:150px 1fr}}
.acc-card img{display:block;width:100%;height:100%;min-height:150px;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.acc-card .txt{padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.acc-card .price{font-weight:700;color:var(--muted);font-size:.95rem;margin-bottom:10px}
.acc-card .btn{margin-top:auto;align-self:flex-start}

/* ---------- Aufklapper ---------- */
details{border-bottom:1px solid var(--line)}
.acc{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;line-height:1;color:var(--accent);flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--tint)}
details[open] summary::after{content:"–"}
details .in{padding:0 0 18px;max-width:62ch}
details .in ul{margin:0;padding-left:20px}
details .in li{margin:0 0 8px}

/* ---------- Sprachweiche ---------- */
.router{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.router ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.router a{display:inline-block;min-width:150px;padding:14px 20px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:var(--shadow)}

/* ---------- Kontaktformular (dunkler Abschnitt) ---------- */
.cform{margin-top:26px;display:grid;gap:14px;position:relative}
.cform .row2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.cform .row2{grid-template-columns:1fr}}
.cform label{display:grid;gap:6px;font-weight:700;font-size:.95rem;color:rgba(255,255,255,.9)}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:16px;font-weight:400;color:#1e242a;background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:12px 14px;min-height:48px}
.cform textarea{resize:vertical;min-height:150px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:3px solid #8cc4ff;outline-offset:2px}
.cform .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}
.cform .cta{margin-top:4px}
.cform .small{font-size:.9rem;color:rgba(255,255,255,.9);margin:0}
.cform .small a{color:#fff}
.fmsg{margin:0;padding:12px 16px;border-radius:12px;font-weight:700;line-height:1.45}
.fmsg.ok{background:rgba(46,125,50,.28);color:#dcf5de;border:1px solid rgba(120,200,125,.7)}
.fmsg.err{background:rgba(198,40,40,.28);color:#ffdada;border:1px solid rgba(240,120,120,.7)}
.fnote{display:none}
.fnote:target{display:block;margin-top:16px}
.mailto{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-weight:700;color:#fff;text-decoration:none;font-size:1.05rem}
.mailto svg{width:22px;height:22px;flex:none;color:#8cc4ff}
.mailto svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Fuß ---------- */
.foot{padding:36px 0 48px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line)}
.foot b{color:var(--ink)}
.foot-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-logos .cs{height:44px;width:auto}
.foot-logos .txt{flex:1 1 240px}
/* Soziale Netzwerke von CamperStation: reine Links, keine eingebetteten Plugins */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:22px 0 0}
.social .lbl{margin-right:2px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--muted);text-decoration:none}
.social a:hover,.social a:focus-visible{color:var(--link)}
.social svg{width:22px;height:22px;fill:currentColor;flex:none}
@media (max-width:480px){.social .lbl{flex:0 0 100%;margin:0}}
.legal{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.legal a{color:var(--muted)}

/* ---------- Einblenden beim Scrollen (nur mit JavaScript, sonst alles sichtbar) ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none}}
@media print{html.js .reveal{opacity:1;transform:none}}

/* ---------- Ohne JavaScript: tote Bedienelemente ausblenden ----------
   Der Stepper zeigt dann Schritt 1 als Bild mit Text, die Schritte 2 und 3 stehen
   im <noscript>-Block darunter. Der Versions-Finder entfällt; die vier Versionen
   stehen ohnehin als Karten darüber. */
.steps,#walk-next,#finder{display:none}
html.js .steps{display:grid}
html.js #walk-next{display:inline-flex}
html.js #finder{display:block}

/* ---------- Sehr schmale Geräte (ab 360 px abwärts) ----------
   Wortmarke und Sprachschalter sollen nebeneinander passen, ohne dass die Seite
   waagerecht scrollt. */
@media (max-width:380px){
  .wm{font-size:1.1rem;gap:7px}
  .wm svg{width:24px;height:24px}
  .lang a{padding:6px 5px;font-size:.76rem}
  .nav .wrap{gap:6px}
}

/* Auf schmalen Geräten dürfen die Versions-Schilder umbrechen – sonst schiebt
   „Anschlüsse seitlich · mehr Druck" als eine Zeile die ganze Seite auf. */
@media (max-width:520px){
  .tag{white-space:normal}
}

/* ---------- Lieferumfang & technische Daten ---------- */
.pack{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pack li{display:flex;gap:12px;align-items:flex-start}
.pack svg{width:20px;height:20px;flex:none;margin-top:.22em;color:var(--accent)}
.pack svg *{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pack b{display:block}
.pack span{color:var(--muted);font-size:.95rem}
.specs{width:100%;border-collapse:collapse;margin-top:8px;font-size:.98rem}
.specs th,.specs td{text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{font-weight:700;width:42%;color:var(--muted);font-size:.92rem}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs td{font-variant-numeric:tabular-nums}

/* ---------- Zubehör ---------- */
.acc-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media (min-width:760px){.acc-grid{grid-template-columns:1fr 1fr}}
.acc-card{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
@media (min-width:460px){.acc-card{grid-template-columns:150px 1fr}}
.acc-card img{display:block;width:100%;height:100%;min-height:150px;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.acc-card .txt{padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.acc-card .price{font-weight:700;color:var(--muted);font-size:.95rem;margin-bottom:10px}
.acc-card .btn{margin-top:auto;align-self:flex-start}

/* ---------- Aufklapper ---------- */
details{border-bottom:1px solid var(--line)}
.acc{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;line-height:1;color:var(--accent);flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--tint)}
details[open] summary::after{content:"–"}
details .in{padding:0 0 18px;max-width:62ch}
details .in ul{margin:0;padding-left:20px}
details .in li{margin:0 0 8px}

/* ---------- Sprachweiche ---------- */
.router{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.router ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.router a{display:inline-block;min-width:150px;padding:14px 20px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:var(--shadow)}

/* ---------- Kontaktformular (dunkler Abschnitt) ---------- */
.cform{margin-top:26px;display:grid;gap:14px;position:relative}
.cform .row2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.cform .row2{grid-template-columns:1fr}}
.cform label{display:grid;gap:6px;font-weight:700;font-size:.95rem;color:rgba(255,255,255,.9)}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:16px;font-weight:400;color:#1e242a;background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:12px 14px;min-height:48px}
.cform textarea{resize:vertical;min-height:150px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:3px solid #8cc4ff;outline-offset:2px}
.cform .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}
.cform .cta{margin-top:4px}
.cform .small{font-size:.9rem;color:rgba(255,255,255,.9);margin:0}
.cform .small a{color:#fff}
.fmsg{margin:0;padding:12px 16px;border-radius:12px;font-weight:700;line-height:1.45}
.fmsg.ok{background:rgba(46,125,50,.28);color:#dcf5de;border:1px solid rgba(120,200,125,.7)}
.fmsg.err{background:rgba(198,40,40,.28);color:#ffdada;border:1px solid rgba(240,120,120,.7)}
.fnote{display:none}
.fnote:target{display:block;margin-top:16px}
.mailto{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-weight:700;color:#fff;text-decoration:none;font-size:1.05rem}
.mailto svg{width:22px;height:22px;flex:none;color:#8cc4ff}
.mailto svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Fuß ---------- */
.foot{padding:36px 0 48px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line)}
.foot b{color:var(--ink)}
.foot-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-logos .cs{height:44px;width:auto}
.foot-logos .txt{flex:1 1 240px}
/* Soziale Netzwerke von CamperStation: reine Links, keine eingebetteten Plugins */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:22px 0 0}
.social .lbl{margin-right:2px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--muted);text-decoration:none}
.social a:hover,.social a:focus-visible{color:var(--link)}
.social svg{width:22px;height:22px;fill:currentColor;flex:none}
@media (max-width:480px){.social .lbl{flex:0 0 100%;margin:0}}
.legal{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.legal a{color:var(--muted)}

/* ---------- Einblenden beim Scrollen (nur mit JavaScript, sonst alles sichtbar) ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none}}
@media print{html.js .reveal{opacity:1;transform:none}}

/* ---------- Ohne JavaScript: tote Bedienelemente ausblenden ----------
   Der Stepper zeigt dann Schritt 1 als Bild mit Text, die Schritte 2 und 3 stehen
   im <noscript>-Block darunter. Der Versions-Finder entfällt; die vier Versionen
   stehen ohnehin als Karten darüber. */
.steps,#walk-next,#finder{display:none}
html.js .steps{display:grid}
html.js #walk-next{display:inline-flex}
html.js #finder{display:block}

/* ---------- Sehr schmale Geräte (ab 360 px abwärts) ----------
   Wortmarke und Sprachschalter sollen nebeneinander passen, ohne dass die Seite
   waagerecht scrollt. */
@media (max-width:380px){
  .wm{font-size:1.1rem;gap:7px}
  .wm svg{width:24px;height:24px}
  .lang a{padding:6px 5px;font-size:.76rem}
  .nav .wrap{gap:6px}
}

/* Auf schmalen Geräten dürfen die Versions-Schilder umbrechen – sonst schiebt
   „Anschlüsse seitlich · mehr Druck" als eine Zeile die ganze Seite auf. */
@media (max-width:520px){
  .tag{white-space:normal}
}

/* ================================================================================
   QUERFORMAT – die ganze Seite fährt nach rechts, wie der WaterBob.

   Ab 900 x 640 Pixeln stehen alle Abschnitte nebeneinander statt untereinander.
   Jede Tafel ist bildschirmhoch und (mindestens) bildschirmbreit; gescrollt wird
   waagerecht. Das Mausrad übernimmt site.js; Wischen, Bildlaufleiste, Tabulator
   und die Sprungmarken der Navigation gehen auch ohne JavaScript.

   Darunter – Handy, Tablet hochkant, flache Fenster – bleibt die gewohnte Seite
   von oben nach unten. Elf Fragen und ein Formular lassen sich auf einem Handy
   nicht sinnvoll seitwärts lesen.
   ================================================================================ */
/* Zwei Fälle: breite Fenster (Laptop, Tablet quer) und schmale, aber hohe
   (Tablet hochkant). Beides muss reichen, damit eine Tafel in eine
   Bildschirmhöhe passt – die Ecke schmal UND flach bleibt hochkant. */
@media (min-width:1000px) and (min-height:620px),
       (min-width:740px) and (min-height:1000px){

  html,body{height:100%;overflow:hidden}
  .nav{position:fixed;top:0;left:0;right:0}

  .strip{
    height:100dvh;padding-top:64px;padding-bottom:40px;
    display:flex;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;   /* kein scroll-snap: es zöge jede Radbewegung zurück */
    scrollbar-width:thin;
  }
  /* Grundmaß einer Tafel: eine Bildschirmbreite, volle Höhe, Inhalt mittig.
     Die Inhaltsspalte (.wrap) bleibt unangetastet, damit alles zentriert bleibt. */
  .strip > *{
    flex:0 0 100vw;height:100%;padding:0;
    display:flex;flex-direction:column;justify-content:center;
    overflow-y:auto;overscroll-behavior-y:contain;   /* Notausgang bei aufgeklappten Fragen */
  }
  .strip section[id],.strip header[id]{scroll-margin-top:0}

  /* Tafeln, die mehr als eine Bildschirmbreite brauchen */
  .strip > #versionen{flex-basis:max(100vw,1400px)}
  .strip > #versionen > .wrap{max-width:1320px}
  .strip > #versionen .vars{grid-template-columns:repeat(4,1fr);gap:20px}
  .strip > #faq{flex-basis:max(100vw,1240px)}
  .strip > #faq > .wrap{max-width:1160px}
  .strip > #faq .acc{columns:2;column-gap:56px}
  .strip > #faq details{break-inside:avoid}
  /* Kontakt: Text links, Formular rechts – gestapelt wird die Tafel sonst zu hoch. */
  .strip > #kontakt{flex-basis:max(100vw,1200px)}
  .strip > #kontakt > .wrap{max-width:1160px;display:grid;gap:12px 48px;
    grid-template-columns:1fr 1.05fr;align-items:center;align-content:center}
  .strip > #kontakt > .wrap > .eyebrow{grid-column:1;grid-row:1;align-self:end}
  .strip > #kontakt > .wrap > h2{grid-column:1;grid-row:2}
  .strip > #kontakt > .wrap > .lead{grid-column:1;grid-row:3}
  .strip > #kontakt > .wrap > .small{grid-column:1;grid-row:4;align-self:end}
  .strip > #kontakt > .wrap > .mailto{grid-column:1;grid-row:5;margin-top:0;align-self:start}
  .strip > #kontakt > .wrap > .cform{grid-column:2;grid-row:1 / span 5;margin-top:0;align-self:center}
  .strip > #kontakt > .wrap > .fnote{display:none}

  /* Die Reise ist im Querformat einfach ein Stück der Bahn: kein eigener
     Scrollbereich mehr, die sieben Halte stehen als Teil der Seite nebeneinander. */

  /* Damit jede Tafel in eine Bildschirmhöhe passt, hängen die grossen Masse an der
     Fensterhöhe (vh) statt an festen Pixeln. Auf hohen Fenstern ändert sich dadurch
     nichts, auf flachen rückt alles zusammen, statt überzulaufen. */
  .strip h2{font-size:clamp(1.35rem,3.6vh,2.3rem)}
  .strip .lead{font-size:clamp(.98rem,2.05vh,1.18rem)}
  .strip .big{font-size:clamp(1.05rem,2.7vh,1.55rem)}
  .strip .eyebrow{margin-bottom:clamp(6px,1.4vh,14px)}
  .strip p{margin-bottom:clamp(.5em,1.4vh,1em)}
  .strip .card{padding:clamp(16px,2.6vh,26px)}
  .strip .glyph{width:clamp(38px,6vh,52px);height:clamp(38px,6vh,52px);margin-bottom:clamp(8px,1.8vh,16px)}
  .strip .cta{margin-top:clamp(12px,2.6vh,28px)}
  .strip .trust{margin-top:clamp(12px,2.8vh,30px);gap:clamp(6px,1.2vh,10px) 22px}
  .strip .partners{margin-bottom:clamp(10px,2.4vh,26px)}
  .strip .tags{margin-bottom:clamp(8px,2vh,20px)}

  /* Kopfbild und Fotos über die Höhe begrenzen – sie sind sonst das, was überläuft. */
  .strip > #top .stage img{max-height:min(58vh,560px);width:auto;max-width:100%}
  .strip .frame{aspect-ratio:auto;height:clamp(200px,46vh,420px)}
  .strip .shot > img{height:clamp(120px,26vh,240px);object-fit:cover}
  .strip .shots .shot > img{aspect-ratio:auto}
  .strip .acc-card img{min-height:0;height:100%;aspect-ratio:auto}

  /* Reise, Daten, Formular: die drei Tafeln mit dem meisten Inhalt */
  .strip > #daten .specs th,.strip > #daten .specs td{padding:clamp(4px,1.05vh,12px) 4px}
  .strip > #daten .specs th{width:36%}   /* die längeren Zeilenköpfe brauchen weniger Breite,
                                            damit die Werte nicht umbrechen */
  .strip > #daten .specs{font-size:clamp(.88rem,1.85vh,.98rem)}
  .strip > #kontakt .cform{gap:clamp(8px,1.6vh,14px)}
  .strip > #kontakt .cform textarea{min-height:clamp(110px,26vh,260px)}
  .strip > #kontakt .cform input,.strip > #kontakt .cform select{min-height:clamp(38px,5.4vh,48px)}
  .strip > #faq summary{padding:clamp(7px,1.5vh,16px) 0;min-height:0}
  .strip > #lieferumfang .pack{gap:clamp(6px,1.4vh,12px)}
  .strip > #versionen .var{padding:clamp(14px,2.4vh,22px)}
  .strip > #versionen .var .spec{gap:clamp(4px,.9vh,7px);margin-bottom:clamp(8px,1.8vh,18px)}

  /* Zweite Stufe: was auf flachen Fenstern noch überlief. */
  .strip > #top h1{font-size:clamp(1.5rem,min(5.6vh,3.4vw),3.6rem);margin-bottom:.3em;max-width:16ch}
  .strip > #top .lead{font-size:clamp(.94rem,2vh,1.22rem)}
  .strip > #top .trust{font-size:clamp(.8rem,1.7vh,.95rem);gap:clamp(4px,1vh,10px) 20px}
  .strip > #top .stage img{max-height:min(44vh,500px)}
  @media (max-width:900px){
    .strip > #top .stage img{max-height:min(26vh,360px)}
    .strip > #top .trust{gap:clamp(3px,.8vh,8px) 16px;font-size:clamp(.78rem,1.5vh,.92rem)}
    .strip > #antwort .yt{max-height:min(43vh,500px)}
    .strip > #top h1{font-size:clamp(1.45rem,4.1vh,2.4rem)}
    .strip > #top .hero-grid{gap:clamp(12px,2.6vh,40px)}
  }
  /* Flache Fenster: der Kopf ist die Tafel mit dem meisten Inhalt. */
  @media (max-height:740px){
    .strip > #top .stage img{max-height:min(40vh,440px)}
    .strip > #top h1{font-size:clamp(1.4rem,5vh,2.6rem)}
    .strip > #top .partners{margin-bottom:clamp(8px,1.6vh,18px)}
    .strip > #top .tags{margin-bottom:clamp(6px,1.4vh,14px)}
    .strip > #top .trust{margin-top:clamp(8px,1.6vh,20px)}
    .strip > #lieferumfang .pack{gap:clamp(4px,1vh,10px)}
    .strip > #versionen .var .spec{gap:clamp(3px,.7vh,6px)}
    .strip > #versionen .var{padding:clamp(10px,1.8vh,18px)}
    .strip > #versionen .var .who{margin-bottom:clamp(4px,1vh,12px);font-size:clamp(.84rem,1.7vh,.95rem)}
    .strip > #versionen .var h3{margin-bottom:clamp(4px,1vh,10px)}
    .strip > #versionen .vars{gap:clamp(10px,1.8vh,22px)}
  }
  .strip > #top .partners .cs{height:clamp(28px,4.6vh,48px)}
  .strip > #top .cta{margin-top:clamp(10px,2.1vh,28px)}
  .strip > #top .trust{margin-top:clamp(10px,2.2vh,30px)}
  .strip > #top .tagline b{font-size:clamp(1.05rem,2.8vh,1.5rem)}
  .strip .card p,.strip .var .who{font-size:clamp(.9rem,1.9vh,1rem)}
  .strip .var .spec{font-size:clamp(.86rem,1.8vh,.95rem)}
  .strip .var .spec svg{width:clamp(14px,1.9vh,17px);height:clamp(14px,1.9vh,17px)}
  .strip .btn{min-height:clamp(38px,5.6vh,50px);padding:clamp(6px,1.2vh,10px) 22px}
  .strip .btn.sm{min-height:clamp(34px,4.8vh,42px)}
  .strip .pack span,.strip .small{font-size:clamp(.85rem,1.85vh,.95rem)}
  .strip .pack svg{width:clamp(16px,2.2vh,20px);height:clamp(16px,2.2vh,20px)}
  .strip .acc-card .txt{padding:clamp(12px,2.2vh,20px) clamp(14px,2.4vh,22px)}
  .strip h3{font-size:clamp(1rem,2.1vh,1.12rem)}
  .strip > #kontakt .cform textarea{min-height:clamp(90px,22vh,240px)}
  .strip > #kontakt .cform label{font-size:clamp(.85rem,1.8vh,.95rem)}
  .strip > #zubehoer .acc-grid{gap:clamp(12px,2.4vh,20px)}
  .strip > #lieferumfang .two{gap:clamp(12px,2.4vh,18px)}

  .strip > #versionen-fotos .shot > img{height:clamp(200px,46vh,440px)}

  /* Fahrbahn der ganzen Seite: unten fest, zeigt, wie weit der WaterBob gefahren ist. */
  .pageroad{display:block;position:fixed;left:24px;right:24px;bottom:6px;height:30px;z-index:40;pointer-events:none}
  .pageroad .line{position:absolute;left:0;right:0;top:14px;height:4px;border-radius:2px;
    background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 26px)}
  .pageroad .done{position:absolute;left:0;top:14px;height:4px;border-radius:2px;background:var(--cta);width:0}
  .pageroad .pbob{position:absolute;top:0;left:0;width:30px;height:30px;color:var(--cta);
    transform:translateX(-50%);transition:left .12s linear}
  .pageroad .pbob svg{width:30px;height:30px;display:block}
}

/* ---------- Video im Abschnitt „Die Antwort" ----------
   Hochkant (9:16). Geladen wird erst, wenn es im Bild ist; bis dahin steht hier ein
   Standbild von unserem eigenen Server. Siehe site.js und README. */
.yt{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;
  max-height:min(56vh,560px);margin:0 auto;width:auto}
/* Der eingebettete Rahmen nimmt keine Maus- und Wischereignisse an: Sonst landet jede
   Radbewegung über dem Video im Rahmen von YouTube, und die Seite bleibt stehen.
   Zum Ansehen mit Ton führt der Verweis unter dem Video zu YouTube. */
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  pointer-events:none}
/* Eigene Videodatei: füllt denselben Rahmen wie das Standbild. */
.yt video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#000}
.yt-start{position:absolute;inset:0;display:block;text-decoration:none}
.yt-start img{width:100%;height:100%;object-fit:cover;display:block}
/* Läuft der Rahmen, verschwinden Knopf und Hinweis – das Standbild bleibt dahinter. */
.yt.laeuft .yt-play,.yt.laeuft .yt-hint{display:none}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:52px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));transition:transform .15s}
.yt-play svg{width:100%;height:100%;display:block}
.yt-start:hover .yt-play{transform:translate(-50%,-50%) scale(1.06)}
/* Der Widerrufsknopf ist kein Werbeknopf: Umriss statt Gelb, damit er nicht mit
   „Kaufen" konkurriert. Farben kommen aus dem Umfeld, also auch im dunklen Thema richtig. */
.widerruf{margin:16px 0 0}
.widerruf .btn{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.widerruf .btn:hover{background:var(--accent);color:var(--on-accent)}
.yt-ton{margin:8px 0 0;text-align:center;font-size:.9rem}
.yt-hint{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;
  font-size:.86rem;font-weight:700;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.62))}
@media (prefers-reduced-motion: reduce){.yt-start:hover .yt-play{transform:translate(-50%,-50%)}}