/* Surfvibes — Design-System (Apple-Style, sportlich, eine Akzentfarbe) */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist.woff2?v=a147f99c) format('woff2')}

:root{
  --bg:#FFFFFF; --bg2:#F5F5F7; --ink:#1D1D1F; --ink2:#515157; --ink3:#6E6E73; --line:#D2D2D7; --line2:#E6E6EB;
  --accent:#0086A5; --accent-d:#00667F; --accent-soft:#E4F3F8; --blue:#263952; --dark:#0B1116;
  --r:18px; --rl:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --f:'Geist',-apple-system,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.5;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-w{max-width:1360px;margin:0 auto;padding:0 24px}
.t-center{text-align:center}
.eyebrow{font-size:14px;font-weight:600;color:var(--accent-d);letter-spacing:.01em}
.h-xl{font-size:clamp(40px,6.2vw,74px);letter-spacing:-.035em}
.h-l{font-size:clamp(28px,3.6vw,44px)}
.h-m{font-size:clamp(26px,3.1vw,38px)}
.h-s{font-size:clamp(20px,2vw,26px)}
.sub{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);line-height:1.45;max-width:38rem;margin:16px auto 0;letter-spacing:-.012em}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--ink2);line-height:1.55;max-width:40rem}
.prose{max-width:40rem;color:var(--ink2);font-size:17px;line-height:1.6}
.prose h2,.prose h3{color:var(--ink);margin:36px 0 12px;font-size:clamp(22px,2.2vw,28px)}
.prose h4{color:var(--ink);margin:24px 0 8px;font-size:18px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px 0;padding-left:0}
.prose li{position:relative;padding-left:22px;margin-bottom:6px}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prose a{color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.prose table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:16px}
.prose td,.prose th{padding:10px 12px;border-bottom:1px solid var(--line2);text-align:left}
.link{color:var(--accent-d);font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:.28em}
.link::after{content:"›";font-size:1.25em;line-height:1;transition:transform .25s var(--ease)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link:hover::after{transform:translateX(3px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-size:15px;font-weight:600;letter-spacing:-.01em;
  background:var(--accent-d);color:#fff;padding:13px 24px;border-radius:980px;border:0;cursor:pointer;transition:background .2s,transform .2s var(--ease),box-shadow .3s var(--ease);font-family:inherit}
.btn:hover{background:#00566B;box-shadow:0 10px 24px -12px rgba(0,102,127,.7)}
.btn:active{transform:scale(.98)}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:#000;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{background:var(--accent-d);color:#fff}
.btn-ghost{background:var(--bg2);color:var(--ink)}
.btn-ghost:hover{background:var(--line2);box-shadow:none}
.btn-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.btn-o:hover{background:#fff;color:var(--ink);box-shadow:none}
.btn-s{padding:9px 16px;font-size:13.5px}
.btn-l{padding:16px 30px;font-size:17px}
.btn-block{width:100%}

/* Reveal */
.js .rv{opacity:0;transform:translateY(10px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.d1.in{transition-delay:.08s}.rv.d2.in{transition-delay:.16s}.rv.d3.in{transition-delay:.24s}.rv.d4.in{transition-delay:.32s}.rv.d5.in{transition-delay:.4s}

/* Die fünf Sportarten erscheinen bewusst gemächlicher und deutlicher nacheinander
   als der Rest der Seite. Sie sind der erste Blick auf das Angebot. */
.sports .sport.rv.in{transition:opacity 1.45s var(--ease),transform 1.45s var(--ease)}
.sports .sport.rv.in{transition-delay:0s}
.sports .sport.rv.d1.in{transition-delay:.19s}
.sports .sport.rv.d2.in{transition-delay:.38s}
.sports .sport.rv.d3.in{transition-delay:.57s}
.sports .sport.rv.d4.in{transition-delay:.76s}

/* Der Schriftzug über den Karten schreibt sich von links nach rechts, im Tempo
   der Kartenreihe: die läuft in 2,21 s über rund 1310 px, also etwa 593 px/s.
   Der Schriftzug ist rund 465 px breit — das ergibt 0,78 s.
   Die Kurve ist bewusst fast gerade, damit die Schrift gleichmäßig durchläuft. */
.schriftzug.rv{opacity:1;transform:none}
.schriftzug h2>span{display:inline-block;padding:.18em .08em .3em 0;margin:-.18em -.08em -.3em 0}
.js .schriftzug.rv:not(.in) h2>span{clip-path:inset(0 100% 0 0)}
.schriftzug.rv.in h2>span{animation:schriftzug .78s cubic-bezier(.35,.2,.25,1) backwards}
@keyframes schriftzug{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.js .schriftzug.rv:not(.in) h2>span{clip-path:none}.schriftzug.rv.in h2>span{animation:none}}

/* Header */
/* Die Milchscheibe der Kopfzeile sitzt auf einem Pseudo-Element, nicht auf dem
   <header> selbst. Grund: Ein Element mit backdrop-filter schirmt alles ab, was
   darin liegt — das aufgeklappte Menü würde als Hintergrund nur die Kopfzeile
   sehen und könnte selbst kein Milchglas sein. So liegt das Menü neben der
   Scheibe statt darin und filtert wieder die Seite dahinter. Optisch ändert
   sich an der Kopfzeile nichts. */
header{position:sticky;top:0;z-index:80}
header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06)}
.nav{height:74px;display:flex;align-items:center;gap:28px}
.nav .brand{display:flex;align-items:center}
.logo-h{height:52px;width:auto;color:var(--ink)}
.nav ul{margin:0 auto;display:flex;gap:22px;font-size:15px;font-weight:500;color:var(--ink2);white-space:nowrap}
@media(max-width:1180px){.nav ul{gap:16px;font-size:14.5px}}
.nav ul a{transition:color .15s;padding:6px 0}
.nav ul a:hover,.nav ul a.on{color:var(--accent-d)}
.nav .btn-s{padding:10px 18px}
.nav ul li{position:relative}
.nav li.has>a::after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 6px;opacity:.55}
.dd{position:absolute;top:100%;left:-16px;padding-top:10px;display:none;z-index:95}
.nav li:hover>.dd,.nav li:focus-within>.dd{display:block}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile{display:none;position:fixed;inset:74px 0 0 0;background:#fff;z-index:79;padding:24px;overflow:auto}
.mobile.open{display:block}
html.menu-open .dock{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.mobile a{display:block;padding:14px 0;font-size:22px;font-weight:600;border-bottom:1px solid var(--line2)}
.mobile a.sub{font-size:17px;font-weight:500;color:var(--ink2);padding:10px 0 10px 18px}

/* Hero (Start) */
.hero{position:relative;height:min(86vh,800px);min-height:540px;overflow:hidden;background:var(--dark);color:#fff;display:flex;align-items:flex-end}
.hero>img,.hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.06);animation:settle 7s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
/* Sportseiten: gleicher ruhiger Rückzoom wie auf der Startseite. */
.phero>img{transform:scale(1.05);animation:settle 7s var(--ease) forwards}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,22,.28) 0%,rgba(11,17,22,.05) 24%,rgba(11,17,22,.36) 52%,rgba(11,17,22,.58) 80%,rgba(11,17,22,.7) 100%)}
.hero-c{position:relative;z-index:2;width:100%;padding-bottom:72px;text-align:center}
.hero .eyebrow{color:rgba(255,255,255,.92);font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero h1{margin-top:12px;text-shadow:0 2px 6px rgba(0,0,0,.35),0 4px 40px rgba(0,0,0,.45)}
.hero h1 small{display:block;font-size:.5em;font-weight:500;letter-spacing:-.02em;opacity:.95;margin-top:10px}
.hero .sub{color:#fff;font-weight:500;font-size:clamp(17px,1.6vw,21px);text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 26px rgba(0,0,0,.7);max-width:40rem}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.a1{animation:up .9s var(--ease) .2s both}.a2{animation:up .9s var(--ease) .35s both}.a3{animation:up .9s var(--ease) .5s both}.a4{animation:up .9s var(--ease) .65s both}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Page hero (Unterseiten) */
.phero{position:relative;height:min(58vh,520px);min-height:340px;overflow:hidden;background:var(--dark);color:#fff;display:flex;align-items:flex-end}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,22,.14) 0%,rgba(11,17,22,.1) 35%,rgba(11,17,22,.5) 68%,rgba(11,17,22,.84) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%;padding-bottom:44px}
.phero .eyebrow{color:rgba(255,255,255,.9)}
.phero h1{margin-top:8px;font-size:clamp(36px,5.4vw,64px);letter-spacing:-.035em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.phero p{color:rgba(255,255,255,.92);margin-top:12px;max-width:36rem;font-size:clamp(16px,1.4vw,19px);text-shadow:0 1px 14px rgba(0,0,0,.35)}
.phero.plain{height:auto;min-height:0;background:var(--bg2);color:var(--ink);padding:64px 0 40px}
.phero.plain::after{display:none}
.phero.plain{box-shadow:none}
.phero.plain .eyebrow{color:var(--accent-d)}
.phero.plain h1{text-shadow:none;font-size:clamp(34px,4.8vw,58px);letter-spacing:-.035em}
.phero.plain p{color:var(--ink2)}
.crumbs{font-size:13px;color:var(--ink3);margin-bottom:14px}
.crumbs a:hover{color:var(--accent-d)}
.phero:not(.plain) .crumbs{color:rgba(255,255,255,.7)}

/* Sections */
section{padding:88px 0}
.grey{background:var(--bg2)}
.sec-h{margin-bottom:44px}
.statement{padding:72px 0 64px}
.words{font-size:clamp(26px,3vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1.12;max-width:none;margin:0 auto}
/* Bewusst ohne Bewegung: bei so langem Text wirkt das Hochrutschen unruhig. */
.words span{display:inline-block;transition:color .7s var(--ease)}
/* Startzustand nur, wenn JavaScript läuft — sonst stünden die Wörter grau und zu tief. */
.js .words span{color:var(--ink3)}
.words.in span{color:var(--ink)}.words.in span.acc{color:var(--accent)}
.words.in span:nth-child(1){transition-delay:.05s}.words.in span:nth-child(2){transition-delay:.18s}.words.in span:nth-child(3){transition-delay:.31s}.words.in span:nth-child(4){transition-delay:.44s}.words.in span:nth-child(5){transition-delay:.57s}.words.in span:nth-child(6){transition-delay:.75s;color:var(--accent)}

/* Sport-Karten — 5 gleich große Karten */
.sports{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sport{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sport:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(0,0,0,.3)}
.sport .im{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.sport .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sport:hover .im img{transform:scale(1.05)}
.sport .bd{padding:20px 20px 20px;display:flex;flex-direction:column;flex:1;gap:8px}
.sport :is(h2,h3,h4){font-size:22px;letter-spacing:-.025em}
.sport p{font-size:15px;color:var(--ink2);line-height:1.45;flex:1}
.sport .facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sport .facts span{font-size:13px;font-weight:500;color:var(--ink2);background:var(--bg2);border-radius:980px;padding:5px 10px}
.sport .pr{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-size:14px;color:var(--ink2)}
.sport .pr b{font-size:20px;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.sport .btn{margin-top:8px}
.sport .badge{position:absolute;top:12px;left:12px;background:var(--blue);border-radius:9px;padding:5px 11px;font-size:12px;
  font-weight:600;color:#fff;transform:rotate(-4.5deg);box-shadow:0 8px 18px -12px rgba(11,17,22,.8)}
.sport .im{position:relative}

/* Kurs-Karten (Angebote) */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.course{background:#fff;border-radius:var(--r);padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.course:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(0,0,0,.28)}
.course .tag{font-size:13px;font-weight:600;color:var(--accent-d);background:var(--accent-soft);border-radius:980px;padding:5px 11px;align-self:flex-start}
.course .tag.kids{color:#7A4B00;background:#FFF1DB}
.course .tag.pro{color:#4A2E9C;background:#EEE8FB}
.course :is(h2,h3,h4){font-size:22px;letter-spacing:-.025em;margin-top:4px}
.course .meta{display:flex;gap:6px;flex-wrap:wrap}
.course .meta span{font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--bg2);border-radius:980px;padding:5px 10px}
.course p{font-size:15px;color:var(--ink2);line-height:1.5}
.course details{margin-top:2px}
.course summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--accent-d);display:inline-flex;align-items:center;gap:6px}
.course summary::-webkit-details-marker{display:none}
.course summary::after{content:"›";transform:rotate(90deg);display:inline-block;transition:transform .25s}
.course details[open] summary::after{transform:rotate(-90deg)}
.course ul{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.course li{font-size:14.5px;color:var(--ink2);position:relative;padding-left:20px;line-height:1.45}
.course li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.course .foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line2)}
.course .price{font-size:26px;font-weight:600;letter-spacing:-.03em}
.course .price small{font-size:13px;color:var(--ink2);font-weight:500;margin-left:4px}
.course.feat{grid-column:span 3;flex-direction:row;gap:36px;align-items:center;background:var(--dark);color:#fff}
.course.feat .tag{background:rgba(255,255,255,.14);color:#fff}
.course.feat p,.course.feat li,.course.feat .meta span,.course.feat .price small{color:rgba(255,255,255,.8)}
.course.feat .meta span{background:rgba(255,255,255,.1)}
.course.feat .foot{border-color:rgba(255,255,255,.14)}

/* Kennzahlen */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.num{background:var(--bg2);border-radius:var(--r);padding:30px 26px 28px}
.num b{display:block;font-size:clamp(40px,4.6vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.num b i{font-style:normal;font-size:.42em;font-weight:500;color:var(--ink3);margin-left:.1em;letter-spacing:-.01em}
.num > span{display:block;margin-top:12px;font-size:15px;color:var(--ink2);line-height:1.4}

/* Spotlight (Sticky-Bild + Schritte) */
.spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.spot-im{position:sticky;top:96px;border-radius:var(--rl);overflow:hidden;aspect-ratio:4/5}
.spot-im img{width:100%;height:100%;object-fit:cover}
.spot-im .badge{position:absolute;left:18px;bottom:18px;top:auto;background:var(--blue);color:#fff;border-radius:11px;
  padding:9px 15px;font-size:13px;font-weight:600;letter-spacing:-.005em;transform:rotate(-4.5deg);
  box-shadow:0 10px 24px -14px rgba(11,17,22,.75);transition:transform .45s var(--ease)}
.spot:hover .spot-im .badge{transform:rotate(-4.5deg) translateY(-3px)}
.steps{display:flex;flex-direction:column;margin-top:30px}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line2);transition:opacity .4s var(--ease)}
.step:last-child{border-bottom:1px solid var(--line2)}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink2);transition:.4s var(--ease)}
.step.act .n{background:var(--accent-d);color:#fff}
.step :is(h2,h3,h4){font-size:18px;font-weight:600;letter-spacing:-.02em}
.step p{color:var(--ink2);font-size:15.5px;margin-top:3px}
.step:not(.act) .n{color:var(--ink3)}
.spot-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.spot-meta span{font-size:13px;font-weight:500;background:var(--bg2);border-radius:980px;padding:7px 13px;color:var(--ink2)}
.spot-price{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.spot-price b{font-size:40px;font-weight:600;letter-spacing:-.04em}
.spot-price small{font-size:14px;color:var(--ink2)}

/* Dunkles Band */
.band{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:0}
.band-in{position:relative;min-height:600px;display:flex;align-items:center}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,17,22,.86) 0%,rgba(11,17,22,.5) 45%,rgba(11,17,22,.04) 100%)}
.band .wrap{position:relative;z-index:2}
.band .eyebrow{color:rgba(255,255,255,.8)}
.band .sub{color:rgba(255,255,255,.88);margin-left:0}
.band ul{margin:26px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.band li{font-size:14px;font-weight:500;padding:8px 14px;border-radius:980px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.person{text-align:center}
.person .ph{width:min(220px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;background:var(--bg2);transition:transform .6s var(--ease)}
.person:hover .ph{transform:scale(1.03)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person :is(h2,h3,h4){font-size:21px;margin-top:18px}
.person span{display:block;color:var(--ink2);font-size:15px;margin-top:4px}

/* Partner-Logos */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 56px;margin-top:36px}
.logos img{height:34px;width:auto;filter:grayscale(1) brightness(.28) contrast(1.1);opacity:.75;transition:.3s}
.logos a:hover img{opacity:1;filter:none}
.logos img.tall{height:46px}
.plogos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
@media(max-width:900px){.plogos{grid-template-columns:repeat(2,1fr)}}
.plogo{background:#fff;border-radius:var(--r);padding:38px 24px;min-height:120px;justify-content:center;display:flex;flex-direction:column;align-items:center;gap:16px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plogo:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(0,0,0,.28)}
.plogo img{height:44px;max-width:100%;object-fit:contain;width:auto;filter:grayscale(1) brightness(.28);opacity:.85}
.plogo:hover img{filter:none;opacity:1}
.plogo span{font-size:14px;font-weight:500;color:var(--ink2)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split .im{border-radius:var(--rl);overflow:hidden;min-height:420px;position:relative}
.split .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .tx{border-radius:var(--rl);background:var(--bg2);padding:46px 42px;display:flex;flex-direction:column;justify-content:center}
.split .tx p{color:var(--ink2);margin-top:14px;max-width:30rem}
.facts{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.facts div b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em}
.facts div span{font-size:14px;color:var(--ink2)}

/* Karten allgemein */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
a.card:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(0,0,0,.28)}
.card :is(h2,h3,h4){font-size:21px;letter-spacing:-.025em}
.card p{font-size:15.5px;color:var(--ink2);line-height:1.5;flex:1}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.card .ico svg{width:26px;height:26px}
.grey .card{background:#fff}
.card.dark{background:var(--dark);color:#fff}
.card.dark p{color:rgba(255,255,255,.8)}

/* Preistabelle (Verleih) */
.ptable{background:#fff;border-radius:var(--r);overflow:hidden}
.ptable .row{display:grid;grid-template-columns:1fr 130px 150px;gap:12px;padding:16px 26px;border-top:1px solid var(--line2);align-items:center;font-size:16px}
.ptable .row:first-child{border-top:0;background:var(--bg2);font-size:13px;font-weight:600;color:var(--ink3)}
.ptable .row b{font-weight:600}
.ptable .row .p{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.ptable .row small{display:block;color:var(--ink3);font-size:13px;font-weight:400}

/* FAQ */
.faq{max-width:760px;margin:36px auto 0;background:#fff;border-radius:var(--rl);padding:8px 30px}
.faq details{border-top:1px solid var(--line2)}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:18px;font-weight:600;letter-spacing:-.02em;display:flex;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq .ans{padding:0 0 22px;color:var(--ink2);font-size:16px;max-width:40rem}

/* Hinweis-Box */
.note{background:var(--accent-soft);border-radius:var(--r);padding:22px 26px;color:var(--ink);font-size:15.5px;line-height:1.55}
.note b{font-weight:600}
.note + .note{margin-top:12px}

/* Formular */
.form{background:#fff;border-radius:var(--rl);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.form input,.form textarea{font:inherit;font-size:16px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.form .full{grid-column:span 2}
.form .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px}
.form .check input{width:18px;height:18px;margin-top:2px}

/* CTA */
.cta{text-align:center;padding:104px 0}
.cta .btns{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* Footer */
footer{background:var(--bg2);border-top:1px solid var(--line2);padding:52px 0 28px;font-size:13px;color:var(--ink2)}
.fcols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
footer :is(h2,h3,h4){font-size:13px;font-weight:600;color:var(--ink);margin:0 0 12px}
footer ul{display:flex;flex-direction:column;gap:8px}
footer a:hover{color:var(--accent-d)}
footer .logo-h{height:34px;color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink3)}

/* Dock */
.dock{position:fixed;left:50%;transform:translate(-50%,20px);bottom:20px;z-index:95;background:rgba(29,29,31,.94);backdrop-filter:blur(14px);color:#fff;border-radius:980px;display:flex;align-items:center;gap:14px;padding:7px 7px 7px 18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.dock.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;transition-delay:0s}
.dock span{font-size:14px;white-space:nowrap}
.dock span b{font-weight:600}

/* Responsive */
@media(max-width:1180px){.sports{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
  .courses,.cards{grid-template-columns:1fr 1fr}
  .course.feat{grid-column:span 2;flex-direction:column;align-items:stretch}
  .nums{grid-template-columns:1fr 1fr}
  .spot{grid-template-columns:1fr;gap:32px}
  .spot-im{position:relative;top:auto;aspect-ratio:4/3}
  .team{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split .im{min-height:280px}
  .fcols{grid-template-columns:1fr 1fr}
  .nav ul,.nav .btn-s{display:none}
  .burger{display:block}
  section{padding:64px 0}
  .statement{padding:76px 0 56px}
  .band-in{min-height:0;padding:56px 0}
  .form{grid-template-columns:1fr;padding:24px}
  .form .full{grid-column:span 1}
  .ptable .row{grid-template-columns:1fr 90px 110px;padding:14px 18px;font-size:15px}
}
@media(max-width:640px){
  .sports,.courses,.cards{grid-template-columns:1fr}
  .course.feat{grid-column:span 1}
  .nums{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr;gap:28px 16px}
  .dock{left:14px;right:14px;transform:none}.dock.on{transform:none}
  .hero{height:min(84vh,720px)}
  .sport .im{aspect-ratio:16/9}
  .sport :is(h2,h3,h4){font-size:20px}
  .sport .facts span{font-size:13px}
  section{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.words span{opacity:1;transform:none;color:inherit}
  .hero>img,.hero>picture>img,.phero>img{transform:none}
  .wave{animation:none!important}
  .spot-im .badge{transform:rotate(-4.5deg)}
  .step:not(.act){opacity:1}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Bestseller-Tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 auto 40px;background:#fff;border-radius:980px;padding:6px;width:max-content;max-width:100%}
.tab{font:inherit;font-size:14.5px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:980px;padding:10px 18px;cursor:pointer;transition:.25s var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:#fff}
.panel{animation:up .6s var(--ease) both}

/* Verleih */
.vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.vcard{background:#fff;border-radius:var(--r);padding:24px 22px 20px;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.vcard:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(0,0,0,.28)}
.vico{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vico svg{width:32px;height:32px}
.vcard :is(h2,h3,h4){font-size:20px;letter-spacing:-.025em}
.vcard p{font-size:13.5px;color:var(--ink2);margin-top:4px;flex:0}
.vhead{display:grid;grid-template-columns:1fr 52px 52px;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:18px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.vhead span:not(:first-child){text-align:right}
.vrow{display:grid;grid-template-columns:1fr 52px 52px;gap:6px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:14.5px;align-items:baseline}
.vrow span{color:var(--ink)}
.vrow b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.vrow b:last-child{color:var(--accent-d)}
.vnote{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.vnote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

@media(max-width:1180px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.calc-l{padding:28px 24px}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}.tabs{border-radius:22px}}

/* Kennzahlen als Bild-Band */
.numband{position:relative;overflow:hidden;color:#fff;background:var(--dark);padding:104px 0}
.numband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.numband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,22,.55) 0%,rgba(11,17,22,.72) 100%)}
.numband .wrap{position:relative;z-index:2}
.numband .sub{color:rgba(255,255,255,.86)}
.numband .num{background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18)}
.numband .num b{color:#fff}
.numband .num b i{color:rgba(255,255,255,.65)}
.numband .num > span{color:rgba(255,255,255,.85)}

/* Gutschein-Feld */
/* Gutschein-Block (Kurse) */
.gift{display:grid;grid-template-columns:1fr 1.3fr;background:var(--accent-soft);border-radius:var(--rl);overflow:hidden;align-items:stretch}
.gift>*{min-width:0}
.gift-tx{padding:32px 36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.gift-tx .eyebrow{color:var(--accent-d)}
.gift-tx h2{margin-top:10px;font-size:clamp(24px,2.6vw,32px)}
.gift-tx p{color:var(--ink2);margin-top:12px;max-width:30rem;font-size:16px;line-height:1.5}
.gift-tx .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.gift-tx .btn-l{padding:13px 22px;font-size:15px}
.gift-tx .btn-ghost{background:#fff}
.gift-im{position:relative;min-height:100%}
.gift-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Gutschein-Foto: der Umschlag sitzt im unteren Bilddrittel, deshalb wird der
   Ausschnitt nach unten verschoben — sonst fuellt nur Himmel den Streifen. */
.gift-im.tief img{object-position:50% 74%}
@media(max-width:900px){.gift{grid-template-columns:1fr}.gift-tx{padding:28px 24px}.gift-im{aspect-ratio:2.2;min-height:0}}

/* Preisrechner v3 (kompakt) */
.calc{display:grid;grid-template-columns:1.15fr auto 1fr 1fr auto;gap:12px 16px;align-items:end;background:#fff;border:1px solid var(--line2);border-radius:var(--rl);padding:26px 28px;box-shadow:0 30px 60px -44px rgba(0,0,0,.25)}
.calc-f{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);margin:0}
.calc-f output{display:inline;font-weight:500;color:var(--ink)}
.calc-f select{font:inherit;font-size:15px;padding:12px 38px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.calc-f input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0 10px}
.calc-plus{font-size:26px;font-weight:500;color:var(--accent-d);line-height:1;padding-bottom:12px}
.calc-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;border-left:1px solid var(--line2);padding-left:22px;align-self:stretch;justify-content:center}
.calc-price{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.calc-price small{font-size:.45em;font-weight:500;color:var(--ink3)}
.calc-rows{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;color:var(--ink3)}
.calc-rows div{display:flex;gap:10px;white-space:nowrap}
.calc-rows div b{font-weight:500;color:var(--ink2)}
.calc-rows div.total{display:none}
.calc-fine{color:var(--ink3);font-size:13.5px;text-align:center;margin-top:16px}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-card{background:#fff}
.why-card{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.why-card:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(0,0,0,.3)}
.why-card img{aspect-ratio:4/3;width:100%;object-fit:cover}
.why-card .tx{padding:20px 20px 22px}
.why-card b{display:block;font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.why-card p{font-size:14.5px;color:var(--ink2);margin-top:8px;line-height:1.45}
@media(max-width:1100px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.calc{grid-template-columns:1fr;padding:22px}.calc-plus{display:none}.calc-r{border-left:0;border-top:1px solid var(--line2);padding:16px 0 0;align-items:flex-start}}
@media(max-width:640px){.why{grid-template-columns:1fr 1fr;gap:10px}.why-card .tx{padding:12px 12px 14px}.why-card b{font-size:15px}.why-card p{font-size:13px;margin-top:5px;line-height:1.4}}
p>a:not(.btn):not(.link){text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(7,122,136,.5)}

/* Level-Filter auf den Sportart-Seiten */
.lvl{display:flex;justify-content:center;gap:8px;margin:-8px 0 26px;flex-wrap:wrap}
.chip{font:inherit;font-size:14.5px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line2);border-radius:980px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.chip span{font-size:12px;font-weight:600;color:var(--ink3);background:var(--bg2);border-radius:980px;padding:2px 8px}
.chip:hover{border-color:var(--line)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on span{background:rgba(255,255,255,.18);color:#fff}
.course[hidden]{display:none}

/* Strandbar: Bild-Mosaik */
.mosaic{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:2fr 3fr;gap:14px;height:min(700px,62vw)}
.mosaic>*{display:block;position:relative;border-radius:var(--rl);overflow:hidden;background:var(--bg2)}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mosaic .m1{grid-row:1/3}
.mosaic .gal-i{aspect-ratio:auto;height:100%}
.mosaic .m2,.mosaic .m3{min-height:0}
.mosaic .m2 img{object-position:50% 40%}
.words .acc{color:var(--accent);display:block}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.cards.c4{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.mosaic{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.mosaic .m1{grid-row:auto}.mosaic .gal-i{height:auto}.mosaic .m1.gal-i{aspect-ratio:4/3}.mosaic .m2.gal-i{aspect-ratio:2.16}.mosaic .m3.gal-i{aspect-ratio:4/3}}
@media(max-width:640px){.cards.c4{grid-template-columns:1fr}}

/* Kurs-Zeilen (Variante D) */
.cgrp{margin-top:52px}.cgrp:first-child{margin-top:0}
.cgrp-h{display:flex;flex-direction:column;gap:4px;margin:0 0 18px 6px;padding-left:18px;border-left:4px solid var(--accent)}
.cgrp-h h3{font-size:30px;letter-spacing:-.03em;line-height:1.05}
.cgrp-h p{font-size:16px;color:var(--ink2)}
.cgrp[hidden]{display:none}
.crow[hidden]{display:none}
.lvl{margin:-6px 0 30px}
.crows{display:flex;flex-direction:column;gap:12px}
.crow{background:#fff;border-radius:var(--r);padding:30px 34px;display:grid;grid-template-columns:1.05fr 1.4fr auto;gap:36px;align-items:start;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.crow:hover{transform:translateY(-5px);box-shadow:0 34px 60px -32px rgba(0,0,0,.34)}
/* Preis rückt beim Überfahren einen Hauch nach oben. */
.crow .price>b,.crow .price strong{transition:transform .45s var(--ease)}
.crow:hover .price>b,.crow:hover .price strong{transform:translateY(-2px)}
/* Der Knopf füllt sich von links mit dem dunkleren Türkis (weiße Schrift bleibt über 4,5:1). */
.crow .btn{position:relative;isolation:isolate;overflow:hidden}
.crow .btn::after{content:"";position:absolute;inset:0;background:#00566B;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.crow:hover .btn::after,.crow .btn:focus-visible::after{transform:scaleX(1)}
.crow .cl{display:flex;flex-direction:column;gap:10px;min-width:0}
.crow .tag{font-size:12.5px;font-weight:600;color:var(--accent-d);background:var(--accent-soft);border-radius:980px;padding:5px 11px;align-self:flex-start}
.crow .tag.kids{color:#7A4B00;background:#FFF1DB}.crow .tag.pro{color:#4A2E9C;background:#EEE8FB}.crow .tag.lvl-all{color:var(--ink2);background:var(--bg2)}
.crow h3{font-size:27px;letter-spacing:-.028em;line-height:1.06;margin-top:2px}
.crow .facts{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink2);margin-top:4px}
.crow .facts b{color:var(--ink);font-weight:600}
.crow .cm{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:4px}
.crow .ziel{font-size:17px;font-weight:500;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.crow .top{display:flex;flex-direction:column;gap:7px}
.crow .top li{font-size:15px;color:var(--ink2);position:relative;padding-left:26px;line-height:1.4}
.crow .top li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--accent-soft)}
.crow .top li::after{content:"";position:absolute;left:5.5px;top:6px;width:4px;height:8px;border-right:2px solid var(--accent-d);border-bottom:2px solid var(--accent-d);transform:rotate(45deg)}
.crow .more{margin-top:2px}
.crow .more summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--accent-d);display:inline-flex;align-items:center;gap:6px}
.crow .more summary::-webkit-details-marker{display:none}
.crow .more summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-bottom:3px;transition:transform .25s}
.crow .more[open] summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.crow .more-in{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.crow .more-in p{font-size:14.5px;color:var(--ink2);line-height:1.5}
.crow .all{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.crow .all li{font-size:13.5px;color:var(--ink2);position:relative;padding-left:16px;line-height:1.4}
.crow .all li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.crow .cr{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;min-width:150px}
.crow .price{font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1}
.crow .price small{display:block;font-size:13px;color:var(--ink2);font-weight:500;margin-top:5px;letter-spacing:0}
.crow .btn{padding:13px 26px;font-size:15px}
@media(max-width:980px){.crow{grid-template-columns:1fr 1fr;gap:22px 28px;padding:26px 26px 24px}.crow .cr{grid-column:1/3;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--line2);padding-top:16px}.crow .price small{display:inline;margin-left:6px}}
@media(max-width:640px){.crow{grid-template-columns:1fr;gap:16px;padding:22px 20px 20px}.crow .cr{grid-column:auto;flex-direction:column;align-items:stretch;gap:14px}.crow .price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}.crow .price>b,.crow .price strong{flex:none}.crow .price small{display:inline;margin:0}.crow .price small.vat{flex-basis:100%;margin-top:6px;padding-left:0}.crow .btn{width:100%;text-align:center;white-space:nowrap;padding:14px 18px}.crow h3{font-size:24px}.cgrp-h{flex-direction:column;gap:4px}}

/* Sportart-Intro: Text, darunter „Auf einen Blick“ als flaches Band.
   Der frühere Kasten stand rechts neben dem Text, war höher als der Absatz und
   nahm mehr Breite als er — das Band nimmt kaum Höhe und lässt dem Text den Raum. */
.intro-sec{padding:48px 0 60px}
.intro-sec .lead{max-width:70ch;font-size:clamp(17px,1.4vw,19px)}
.blick{margin-top:40px}

/* Das Besondere. Aufbau wie überall auf der Seite: .eyebrow als Kleinüberschrift,
   darunter eine Überschrift aus der Schriftskala (.h-s). Nur der türkise Punkt ist
   ein Zusatz — er macht die Zeile als das Besondere erkennbar. */
.blick-lab{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.blick-lab i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.blick-hi.h-s{font-size:clamp(24px,2.7vw,34px)}
.blick-hi{margin:0 0 32px;font-weight:600;letter-spacing:-.025em;color:var(--ink);
  line-height:1.25;max-width:26ch}

/* Spaltenzahl = Anzahl der Werte (--sp aus dem Generator): so bleibt es auf dem
   Desktop immer eine Reihe, statt dass eine einzelne Zelle umbricht.
   Zwischen den Spalten steht ein breiter Spalt mit einer Haarlinie genau in seiner
   Mitte — dadurch hat jede Spalte links wie rechts gleich viel Luft und kein Text
   klebt an einem Strich. */
.blick-band{position:relative;display:grid;grid-template-columns:repeat(var(--sp,5),1fr);
  column-gap:56px}
/* Die Linie oben ist ein Pseudo-Element statt eines Rahmens, damit sie beim
   Einblenden von links nach rechts aufziehen kann — Tempo wie der Schriftzug. */
.blick-band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line);transform-origin:left}
.js .blick.rv:not(.in) .blick-band::before{transform:scaleX(0)}
.blick.rv.in .blick-band::before{animation:blicklinie .9s cubic-bezier(.35,.2,.25,1) .12s backwards}
@keyframes blicklinie{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.blick-z{position:relative;padding:24px 0 6px}
.blick-z+.blick-z::before{content:"";position:absolute;left:-28px;top:0;bottom:6px;
  width:1px;background:var(--line2)}
/* Bezeichnungen wie die Kopfzeile der Verleihtabelle (.vhead): 11,5 px, Versalien,
   .04em gesperrt. Nur die Farbe ist --accent-d statt --ink3, damit sich Bezeichnung
   und Wert unterscheiden. */
.blick-z span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent-d);margin-bottom:10px}
.blick-z b{display:block;font-size:17px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1.4}

/* Die Bezeichnungen stehen sofort, die Werte kommen von links nach rechts nach:
   erst das Gerüst lesen, dann die Antworten. */
.blick.rv{opacity:1;transform:none}
.js .blick.rv:not(.in) .blick-hi,.js .blick.rv:not(.in) .blick-z b{opacity:0}
.js .blick.rv:not(.in) .blick-z b{transform:translateY(6px)}
.blick.rv.in .blick-hi{transition:opacity .9s var(--ease)}
.blick.rv.in .blick-z b{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.blick.rv.in .blick-z:nth-child(1) b{transition-delay:.10s}
.blick.rv.in .blick-z:nth-child(2) b{transition-delay:.22s}
.blick.rv.in .blick-z:nth-child(3) b{transition-delay:.34s}
.blick.rv.in .blick-z:nth-child(4) b{transition-delay:.46s}
.blick.rv.in .blick-z:nth-child(5) b{transition-delay:.58s}
.blick.rv.in .blick-z:nth-child(6) b{transition-delay:.70s}
.blick.rv.in .blick-z:nth-child(7) b{transition-delay:.82s}
.blick.rv.in .blick-z:nth-child(8) b{transition-delay:.94s}

@media(max-width:1100px){
  .blick-band{grid-template-columns:1fr 1fr 1fr;column-gap:40px;row-gap:4px}
  .blick-z{padding:22px 0 18px}
  .blick-z+.blick-z::before{left:-20px;bottom:18px}
  .blick-z:nth-child(3n+1)::before{display:none}
  .blick-z:nth-child(n+4){border-top:1px solid var(--line2)}
}
@media(max-width:640px){
  .blick-band{grid-template-columns:1fr 1fr;column-gap:30px}
  .blick-z{padding:18px 0 16px}
  .blick-z+.blick-z::before{left:-15px;bottom:16px}
  .blick-z:nth-child(3n+1)::before{display:block}
  .blick-z:nth-child(2n+1)::before{display:none}
  .blick-z:nth-child(n+4){border-top:0}
  .blick-z:nth-child(n+3){border-top:1px solid var(--line2)}
}
@media(prefers-reduced-motion:reduce){
  .js .blick.rv:not(.in) .blick-band::before{transform:none}
  .blick.rv.in .blick-band::before{animation:none}
  .js .blick.rv:not(.in) .blick-hi,.js .blick.rv:not(.in) .blick-z b{opacity:1;transform:none}
}

/* Galerie (CORE) + Lightbox */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.gal-i{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bg2);cursor:zoom-in}
.gal-i img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal-i:hover img{transform:scale(1.04)}
.gal-i:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.credit{margin-top:14px;font-size:12.5px;color:var(--ink3);text-align:right}
@media(max-width:700px){.gal{grid-template-columns:1fr 1fr;gap:10px}}
/* Galerie: Bilder ziehen nacheinander von links nach rechts auf.
   Beobachtet wird das Raster, nicht die Kacheln: eine Kachel mit clip-path
   hat keine sichtbare Flaeche, der IntersectionObserver wuerde nie ausloesen. */
.gal.rv{opacity:1;transform:none}
.gal .gal-i:nth-child(1){--gd:0s}
.gal .gal-i:nth-child(2){--gd:.32s}
.gal .gal-i:nth-child(3){--gd:.64s}
.gal .gal-i:nth-child(4){--gd:.96s}
.js .gal.rv:not(.in) .gal-i{clip-path:inset(0 0 100% 0)}
.js .gal.rv:not(.in) .gal-i img{transform:scale(1.22)}
.gal.rv.in .gal-i{animation:galIn 1.6s cubic-bezier(.22,1,.36,1) var(--gd,0s) backwards}
.gal.rv.in .gal-i img{animation:galImg 2.2s cubic-bezier(.22,1,.36,1) var(--gd,0s) backwards}
@keyframes galIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes galImg{from{transform:scale(1.22)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .js .gal.rv:not(.in) .gal-i{clip-path:none}
  .js .gal.rv:not(.in) .gal-i img{transform:none}
  .gal.rv.in .gal-i,.gal.rv.in .gal-i img{animation:none}
}
.lbx{position:fixed;inset:0;z-index:100;background:rgba(11,17,22,.92);display:flex;align-items:center;justify-content:center;padding:64px 24px 24px;opacity:0;transition:opacity .25s}
.lbx.on{opacity:1}
.lbx img{max-width:100%;max-height:calc(100vh - 88px);width:auto;height:auto;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lbx-x{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:980px;padding:10px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.lbx-x:hover{background:rgba(255,255,255,.26)}
.lbx-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.gal-i img{transition:none}.lbx{transition:none}}

/* Gutscheine */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick-c{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:40px 38px;box-shadow:0 22px 60px rgba(29,29,31,.08),0 2px 6px rgba(29,29,31,.04);display:flex;flex-direction:column;align-items:flex-start}
.pick-c .eyebrow{color:var(--accent-d)}
.pick-c h2{margin-top:10px}
.pick-c p{color:var(--ink2);margin-top:14px;max-width:30rem}
.ticks{list-style:none;margin:20px 0 26px;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;background:var(--accent-soft)}
.ticks li::after{content:"";position:absolute;left:5px;top:8px;width:5px;height:8px;border:solid var(--accent-d);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pick-c .btn{margin-top:auto}
@media(max-width:800px){.pick{grid-template-columns:1fr}.pick-c{padding:30px 24px}}

/* Feature-Liste ohne Boxen (Strandbar) */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px;margin-top:40px}
.feat .ico{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--accent-d);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 2px 8px rgba(29,29,31,.06)}
.feat .ico svg{width:26px;height:26px}
.feat h3{font-size:18px;letter-spacing:-.01em}
.feat p{color:var(--ink2);margin-top:8px;font-size:15px}
@media(max-width:900px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.feats{grid-template-columns:1fr}}
/* Hero Start: Logo + Koordinaten */
.hero-logo{margin:0;line-height:0}
.hero-logo svg{width:min(520px,78vw);height:auto;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) drop-shadow(0 6px 40px rgba(0,0,0,.35))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.coords{margin-top:22px;font-size:14px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .sub{margin-top:16px;margin-left:auto;margin-right:auto}
/* Unterseiten-Hero: Bild oben, Text darunter */
.phero{height:min(46vh,440px);min-height:260px;align-items:flex-end}
.phero::after{background:linear-gradient(180deg,rgba(11,17,22,.12) 0%,rgba(11,17,22,0) 40%)}
.phead{padding:40px 0 0}
.phead h1{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.035em}
/* Türkiser Strich, der sich unter die Überschrift zieht. */
.wave{display:block;width:170px;height:auto;aspect-ratio:136.6/19.5;margin-top:16px;color:var(--accent);animation:welle 1.9s cubic-bezier(.45,.1,.25,1) .4s backwards}
@keyframes welle{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.phero.plain .wave{margin-top:14px}
.phead p{color:var(--ink2);margin-top:12px;max-width:40rem;font-size:clamp(16px,1.4vw,19px)}
.phead+section{padding-top:48px}
.phead+.intro-sec{padding-top:36px}
/* CTA-Box */
.cta{padding:48px 0 56px}
.cta-box{background:var(--blue);color:#fff;border-radius:var(--rl);padding:34px 32px;text-align:center;max-width:720px;margin:0 auto}
.cta-box h2{font-size:clamp(24px,2.6vw,32px);color:#fff}
.cta-box .sub{font-size:15px;color:rgba(255,255,255,.84);margin:12px auto 0}
.cta-box .sub a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.cta-box .sub a:hover{border-color:#fff}
.cta-box .btns{margin-top:20px;gap:10px}
.cta-box .btn-l{padding:11px 20px;font-size:14.5px}
.cta-box .btn{background:#fff;color:var(--blue)}
.cta-box .btn:hover{background:var(--accent-soft);color:var(--blue)}
.cta-box .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:700px){.cta-box{padding:30px 20px}.phero{height:38vh;min-height:220px}}

/* Highlight-Zeile (CORE): Surfvibes-Blau, baut sich beim Scrollen auf */
.hl{position:relative;margin:48px 0 0;max-width:none;text-align:left;padding:52px 56px;border-radius:var(--rl);background:var(--blue);box-shadow:0 24px 60px -30px rgba(38,57,82,.6);display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center}
.hl p{grid-column:1;font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em;font-weight:600;color:#fff;max-width:18ch}
.hl .btn{grid-column:2;grid-row:1/3;align-self:center}
@media(max-width:900px){.hl{grid-template-columns:1fr;padding:36px 28px}.hl .btn{grid-column:1;grid-row:auto;justify-self:start}}
.hl span{grid-column:1;display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-soft);margin:0}
.hl b{color:#fff;font-weight:600;white-space:nowrap;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 3px;background-position:0 100%;padding-bottom:3px;transition:background-size 1.6s var(--ease) .9s}
.hl.in b{background-size:100% 3px}
.js .hl.rv{transform:translateY(24px) scale(.97)}
.hl.rv.in{transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media(prefers-reduced-motion:reduce){.hl b{background-size:100% 3px;transition:none}}

.crow .hint{margin-top:10px;font-size:14px;color:var(--accent-d);font-weight:500}

/* Hero-Text blendet beim Scrollen aus (main.js) */
.hero-c{will-change:transform,opacity}

/* v30: Live-Check */
.split.contact{grid-template-columns:1.4fr 1fr;align-items:start}
@media(max-width:980px){.split.contact{grid-template-columns:1fr}.split.contact .tx{order:-1}}
.split.contact .tx{background:#fff}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}
.ferr{display:block;font-size:13px;color:#B42318;margin-top:6px}
.form [aria-invalid="true"]{border-color:#B42318;outline:none}
.crow .top li.safe{color:var(--ink3);font-size:13.5px}
.crow .price .vat{display:block;font-size:12px;color:var(--ink3);font-weight:500;margin-top:2px}
.crow .cl h3{text-wrap:balance}
.phead{padding:40px 0 34px}
.phero.plain p{text-shadow:none}
summary{padding:10px 0}
footer li a{display:inline-block;padding:5px 0}
.nav .btn-s{white-space:nowrap}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{header,footer,.dock,.mobile,.burger,.btn,.cta,.lbx,.skip{display:none!important}.phero{height:auto!important}.rv{opacity:1!important;transform:none!important}body{color:#000;background:#fff}a[href]::after{content:""}}


/* Mit JavaScript: bis die Tabs initialisiert sind, nur das erste Panel zeigen (kein Umspringen). */
html.js:not(.tabs-ready) .panel[data-panel]:not([data-panel="kite"]){display:none}

/* ================================================================
   Feinschliff. Sechs Details, die einzeln kaum auffallen und zusammen
   den Unterschied zwischen ordentlich und hochwertig ausmachen.
   ================================================================ */

/* 1 · Der Kopf hat oben auf der Seite keine Kante. Die Trennlinie und das
   stärkere Milchglas kommen erst, wenn tatsächlich etwas darunterliegt. */
header::before{transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease)}
/* Ohne JavaScript bleibt die feste Kante, sonst schwebte der Kopf ohne Abgrenzung. */
.js header::before{border-bottom-color:transparent;background:rgba(255,255,255,.62)}
.js header.scrolled::before{background:rgba(255,255,255,.82);border-bottom-color:rgba(0,0,0,.07)}

/* 2 · Fotos bekommen eine hauchdünne Innenkante, damit helle Bildränder
   nicht in den hellen Hintergrund auslaufen. */
.sport .im,.spot-im,.split .im,.gal-i,.phero,.vcard .vico,.person .ph{
  box-shadow:inset 0 0 0 1px rgba(11,17,22,.07)}

/* 3 · Alle Zahlen laufen in derselben Breite, damit Preise und Tabellen
   sauber untereinanderstehen. */
.crow .price,.vrow,.vhead,.calc-price,.calc-rows,.numband .num b,.facts{
  font-variant-numeric:tabular-nums}

/* 4 · Knöpfe geben beim Drücken einen Hauch nach. */
.btn{transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease)}
.btn:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* 5 · Markierter Text trägt die Hausfarbe. */
::selection{background:var(--accent-soft);color:var(--ink)}

/* 6 · Sprungziele rasten nicht direkt unter dem Kopf ein. */
:target,[id]{scroll-margin-top:96px}

/* ---- Öffnungsstatus (v54): eine Datenquelle, mehrere Stellen. main.js rechnet den Live-Zustand. */
.status{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--ink2);line-height:1.35}
.st-lab{display:inline-block;padding:4px 10px;border-radius:999px;background:#CBE9F2;color:#00566B;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.status.is-open .st-lab{background:#DDF4E4;color:#1B6B3A}
/* v66: offen = Haken vor „Geöffnet“ (reines CSS, keine Grafik) */
.status.is-open .st-lab{display:inline-flex;align-items:center;gap:6px}
.status.is-open .st-lab::before{content:"";width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1.5px) rotate(-45deg);flex:none}
/* v66: Hero-Status kleiner und in warmem Sand statt Weiß/Türkis; offen in Grün mit Haken */
.status-hero{margin-top:16px;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(11,17,22,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92);font-size:14.5px;font-weight:500;text-shadow:none;letter-spacing:.01em}
.status-hero .st-lab{background:#CBE9F2;color:#00566B;font-size:11px;padding:5px 10px;border:0;letter-spacing:.08em}
.status-hero.is-open .st-lab{background:#1B7A43;color:#fff}
@media(max-width:640px){.status-hero{font-size:13px;gap:6px 8px;padding:6px 12px;flex-wrap:wrap;justify-content:center;text-align:center;border-radius:18px}.status-hero .st-lab{font-size:10.5px}}
.status-pill{display:flex;padding:12px 14px;border-radius:12px;background:var(--bg2);margin-bottom:12px}
.status-line{margin-top:10px}
.mstat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.mstat .btn{text-align:center;padding:13px 10px;font-size:15px}
.mstat .btn.sec{background:var(--accent-soft);color:var(--accent-d)}
.mobile{padding:16px 20px 24px}
.mobile a{padding:12px 0;font-size:20px;line-height:1.3}
.mobile details{border-bottom:1px solid var(--line2)}
.mobile details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:20px;font-weight:600;line-height:1.3;cursor:pointer}
.mobile details summary::-webkit-details-marker{display:none}
.mobile details summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:6px;opacity:.5;transition:transform .2s var(--ease)}
.mobile details[open] summary::after{transform:rotate(-135deg)}
.mobile details .subs{padding:0 0 10px}
.mobile details a.sub{border:0;padding:7px 0 7px 14px;font-size:17px;font-weight:500;color:var(--ink2)}
.btn-glass{background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35);color:#fff;margin-left:12px}
.btn-glass:hover{background:rgba(255,255,255,.26);color:#fff}
@media(max-width:640px){.hero-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}.btn-glass{margin-left:0}}

/* ---- Hingucker v54 */
.fsig{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:36px;border-bottom:1px solid var(--line2)}
.fsig b{font-size:clamp(28px,3.2vw,38px);font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1.05}
.fsig-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fsig-r>span{font-size:12.5px;letter-spacing:.12em;font-weight:600;color:var(--ink3);text-transform:uppercase}
.fsig .status{margin-top:0;font-size:13px}
@media(max-width:640px){.fsig-r{align-items:flex-start}}
.num.white{background:#fff}
.num b i{letter-spacing:0}
.badge.flat{transform:none!important;background:var(--ink2)}
.steps-t .n.t{width:auto;min-width:44px;padding:0 9px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.steps-t .step{grid-template-columns:60px 1fr}
.steps-t .step h3{font-size:17px}
.steps-t .step p{font-size:14.5px;color:var(--ink2);margin-top:4px}
.tix{position:relative;background:#fff;border-radius:18px;padding:34px 38px 30px;box-shadow:0 2px 6px rgba(29,29,31,.05);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;max-width:720px;margin:0 auto;transform:rotate(-1.5deg);transition:transform .5s var(--ease);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 15px,#000 15.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 15px,#000 15.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 15px,#000 15.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 15px,#000 15.5px) right/51% 100% no-repeat}
.tix:hover{transform:rotate(-1.5deg) translateY(-4px)}
.tix-l{border-right:1.5px dashed var(--line);padding-right:28px}
.tix .eyebrow{color:var(--accent-d)}
.tix-amt{font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:10px;color:var(--ink)}
.tix-amt i{font-style:normal;font-size:.36em;color:var(--ink3);font-weight:500;margin-left:.15em}
.tix-for{margin-top:12px;color:var(--ink2);font-size:15px}
.tix-r{text-align:right;min-width:190px}
.tix-st{display:inline-block;border:2px solid var(--accent-d);color:var(--accent-d);border-radius:10px;padding:8px 12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transform:rotate(-6deg);opacity:.85}
.tix-co{margin-top:22px;font-size:12.5px;letter-spacing:.12em;color:var(--ink3);font-weight:600}
.tix-val{margin-top:6px;font-size:12.5px;color:var(--ink3)}
.tix-s{padding:24px 26px 22px;max-width:none;gap:18px}
.tix-s .tix-amt{font-size:52px}
.tix-s .tix-r{min-width:150px}
@media(max-width:640px){.tix{grid-template-columns:1fr;padding:26px 24px 24px}.tix-l{border-right:0;border-bottom:1.5px dashed var(--line);padding:0 0 18px}.tix-r{text-align:left}.tix-amt{font-size:56px}}
.gift-tix{display:flex;align-items:center;justify-content:center;padding:10px}
.gift-tix .tix{width:100%}
/* Vertrauensleiste (Startseite) */
.trust{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:14px;align-items:stretch}
.trust-p{display:flex;align-items:center;gap:18px;background:#fff;border-radius:var(--r);padding:22px 24px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.trust-p:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(29,29,31,.08)}
.trust-ph{display:flex;flex-shrink:0}
.trust-ph img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.trust-ph img:first-child{margin-left:0}
.trust-p b{display:block;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.trust-p span{display:block;font-size:14px;color:var(--ink2);margin-top:4px;line-height:1.45}
.trust-f{background:#fff;border-radius:var(--r);padding:22px 22px 20px}
.trust-f b{display:block;font-size:26px;font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1.05}
.trust-f span{display:block;font-size:13.5px;color:var(--ink2);margin-top:8px;line-height:1.4}
.logos-s{margin-top:28px}
.logos-s img{height:26px}
@media(max-width:980px){.trust{grid-template-columns:1fr 1fr}.trust-p{grid-column:1/3}}
@media(max-width:640px){
  /* v86 (Audit 22): alle Sportarten auf einen Blick statt Wischstreifen: zwei Spalten (v109: vier Sportarten, 2×2) */
  .sports{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sports .sport .im{aspect-ratio:4/3}
  .sports .sport .bd{padding:14px 14px 14px;gap:4px}
  .sports .sport :is(h2,h3,h4){font-size:18px}
  .sports .sport .facts{gap:4px;margin-top:4px}
  .sports .sport .facts span{font-size:12px;padding:4px 8px}
  .sports .sport .pr{margin-top:6px;font-size:13px}
  .sports .sport .pr b{font-size:18px}
  .sports .sport .btn-block{font-size:14px;padding:11px 10px}
  .why-card:nth-child(n+5){display:none}
  .trust{grid-template-columns:1fr 1fr}
  .trust-f:last-child{grid-column:1/3}
}

.btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink);background:#fff}
/* Fließtext mit Seitenleiste (Über uns, VDWS, Unterkünfte): füllt den leeren Raum rechts mit dem, was man dort sucht */
.prose2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.prose2 .prose{max-width:none}
.pside{position:sticky;top:96px;background:var(--bg2);border-radius:var(--rl);padding:28px 26px}
.pside h3{font-size:17px;margin:0 0 12px}
.pside p{font-size:14.5px;color:var(--ink2);line-height:1.5;margin:0}
.pside p+p{margin-top:10px}
.pside .status{margin:0 0 14px}
.pside .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pside hr{border:0;border-top:1px solid var(--line2);margin:18px 0}
.st-bilder{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.st-bilder img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22px;display:block}
.st-bilder img:nth-child(2){margin-top:0}
.vdws-logo{text-align:center;padding:40px 30px 34px;background:#fff;box-shadow:0 0 0 1px var(--line2),0 30px 60px -40px rgba(11,17,22,.35)}
.vdws-logo img{width:min(240px,80%);height:auto;margin:0 auto 22px;display:block}
.vdws-logo p{font-size:14.5px}
.vdws-logo p b{font-size:16px;color:var(--ink)}
.pfacts{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:4px 0 0;font-size:14.5px;line-height:1.4}
.pfacts dt{color:var(--ink3,#6E6E73)}
.pfacts dd{margin:0;color:var(--ink);font-weight:500}
@media(max-width:980px){.prose2{grid-template-columns:1fr}.pside{position:static}}

/* ================================================================
   Revier & Wind (kitespot-st-peter-ording.html)
   ================================================================ */
.wx-mats{display:flex;gap:6px;justify-content:center;margin:0 auto 18px;background:#fff;border-radius:16px;padding:6px;width:max-content;max-width:100%;box-shadow:0 1px 2px rgba(29,29,31,.05)}
.wx-mat{font:inherit;border:0;background:none;border-radius:12px;padding:10px 18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink2);transition:background .25s,color .25s}
.wx-mat b{font-size:15px;font-weight:600}
.wx-mat span{font-size:12.5px;color:var(--ink3)}
.wx-mat:hover{background:var(--bg2)}
.wx-mat.on{background:var(--ink);color:#fff}
.wx-mat.on span{color:rgba(255,255,255,.7)}
.wx .wx-col,.wx .wx-val{transition:opacity .45s var(--ease)}
.wx[data-mat="8"] .wx-col:not([data-mat="8"]),.wx[data-mat="12"] .wx-col:not([data-mat="12"]),.wx[data-mat="15"] .wx-col:not([data-mat="15"]){opacity:0;pointer-events:none}
.wx[data-mat="8"] .wx-val:not([data-mat="8"]),.wx[data-mat="12"] .wx-val:not([data-mat="12"]),.wx[data-mat="15"] .wx-val:not([data-mat="15"]){display:none}
.wx-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px;max-width:860px}
.wx-chip{padding:9px 14px;min-width:58px;justify-content:center}
.wx-chip:not(.is-saison){color:var(--ink3)}
.wx-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.wx-grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:stretch}
.wx-card{background:#fff;border-radius:var(--rl);padding:30px 30px 26px;display:flex;flex-direction:column}
.wx-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wx-card-h .eyebrow{font-size:15px}
.wx-card .badge.flat{position:static;background:var(--accent-soft);color:var(--accent-d);font-size:12.5px;padding:5px 10px;border-radius:980px;font-weight:600}
.wx-big{display:flex;align-items:flex-end;gap:14px;margin-top:14px}
.wx-big b{font-size:clamp(64px,8vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.wx-big span{font-size:15px;line-height:1.3;color:var(--ink2);padding-bottom:8px}
.wx-note2{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink3);max-width:34ch}
.wx-urteil{margin-top:14px;font-size:17px;line-height:1.45;color:var(--ink);font-weight:500}
.wx-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line2)}
.wx-facts .wide{grid-column:span 2}
.wx-facts dt{font-size:13px;color:var(--ink3)}
.wx-facts dd{margin:3px 0 0;font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.wx-chart{background:#fff;border-radius:var(--rl);padding:24px 24px 18px;position:relative;display:flex;flex-direction:column;justify-content:center}
.wx-chart-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.wx-chart-h b{font-size:16px;color:var(--ink)}
.wx-leg,.wx-rleg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink2);align-items:center}
.wx-rleg{margin-top:22px}
.wx-rleg span{display:inline-flex;align-items:center;gap:7px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.wx-leg .sw{margin-left:4px}
.sw.s1{background:var(--accent)}.sw.s0{background:#C5CDD5}
.wx-bars{width:100%;height:auto;display:block;overflow:visible}
.wx-grid{stroke:var(--line2);stroke-width:1}
.wx-tick{font-size:12px;fill:var(--ink3);font-variant-numeric:tabular-nums}
.wx-mon{font-size:12.5px;fill:var(--ink2)}
.wx-col{fill:#C5CDD5;transition:fill .25s}
.wx-bar.is-saison .wx-col{fill:var(--accent)}
.wx-hit{fill:transparent;cursor:pointer}
.wx-val{font-size:14px;font-weight:600;fill:var(--ink);opacity:0;transition:opacity .2s}
.wx-bar.on .wx-val{opacity:1}
.wx-bar.on .wx-mon{fill:var(--ink);font-weight:600}
.wx-bar:hover .wx-col{fill:var(--accent-d)}
.wx-bar:not(.is-saison):hover .wx-col{fill:#A9B4BF}
.wx-def{font-size:13.5px;color:var(--ink3);margin-top:10px;line-height:1.45}
.wx-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:13px;line-height:1.35;padding:8px 10px;border-radius:10px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .15s;z-index:3}
.wx-tip.on{opacity:1}
.wx-rose-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.wx-rose-wrap{max-width:460px;margin:0 auto;width:100%}
.wx-rose{width:100%;height:auto;display:block}
.wx-meer{fill:var(--accent-soft)}
.wx-ring{fill:none;stroke:var(--line);stroke-width:1}
.wx-dir{font-size:15px;font-weight:600;fill:var(--ink)}
.wx-zone{font-size:12.5px;fill:var(--accent-d);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.wx-note{font-size:12.5px;fill:var(--ink3);font-style:italic}
.wx-seg{stroke:#fff;stroke-width:2;stroke-linejoin:round;transform-box:view-box;transform-origin:190px 190px;transition:transform 1.1s var(--ease),opacity .6s;transition-delay:calc(var(--i)*90ms)}
.js .wx-rose-wrap.rv:not(.in) .wx-seg{transform:scale(.05);opacity:0}
.wx-seg:hover{opacity:.82}
.wx-table summary{cursor:pointer;font-weight:600;color:var(--accent-d);font-size:15.5px;padding:6px 0}
.wx-tw{overflow-x:auto;margin-top:14px;background:#fff;border-radius:var(--r)}
.wx-table table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums;min-width:560px}
.wx-table th,.wx-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line2)}
.wx-table thead th{font-size:12.5px;color:var(--ink3);font-weight:600}
.wx-table tbody tr:not(.is-saison){color:var(--ink3)}
.wx-src{font-size:12.5px;color:var(--ink3);line-height:1.5;max-width:56rem}
.wx-src a{color:var(--ink2);text-decoration:underline}
@media(max-width:980px){.wx-grid2,.wx-rose-grid{grid-template-columns:1fr}.wx-rose-grid{gap:28px}}
@media(max-width:640px){.wx-mat{padding:8px 10px}.wx-mat b{font-size:13.5px}.wx-mat span{font-size:11.5px}.wx-card{padding:24px 20px}.wx-chart{padding:18px 12px 14px}.wx-chip{min-width:0;padding:8px 11px;font-size:13.5px}.wx-tick{font-size:21px}.wx-mon{font-size:22px}.wx-val{font-size:26px}}
@media(prefers-reduced-motion:reduce){.wx-seg{transition:none}.js .wx-rose-wrap.rv:not(.in) .wx-seg{transform:none;opacity:1}}
html:not(.js) .wx-chips,html:not(.js) .wx-mats{display:none}
.wx-teaser{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:48px;align-items:center;background:var(--bg2);border-radius:var(--rl);padding:40px 48px}
.wx-teaser .wx-rose-wrap{max-width:330px}
.wx-teaser .wx-meer{fill:#fff}
@media(max-width:980px){.wx-teaser{grid-template-columns:1fr;gap:20px;padding:28px 22px}.wx-teaser .wx-rose-wrap{max-width:280px}}

/* Instagram im Handy (Startseite) — eigene Fotos im Instagram-Look, ohne Verbindung zu Instagram */
.ig{padding:96px 0;background:radial-gradient(90% 80% at 80% 20%,#EAF4F7 0%,#F5F5F7 60%);color:var(--ink);overflow:hidden}
.ig-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.ig .eyebrow{color:var(--accent-d)}
.ig .h-l{color:var(--ink)}
.ig .sub{color:var(--ink2)}
.ig-cta{background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:10px}
.ig-cta:hover{background:#000;color:#fff}
.ig-cta svg,.ig-cta img{width:22px;height:22px;flex:none}
.f-ig{display:inline-flex;align-items:center;gap:7px}
.f-ig svg,.f-ig img{width:16px;height:16px;flex:none}
.ig-stage{position:relative;display:flex;justify-content:center;padding:20px 0;min-height:600px;align-items:center}
.ig-phone{position:relative;z-index:2;width:316px;border-radius:50px;padding:11px;background:#0b0f14;box-shadow:0 0 0 1.5px #3a4654 inset,0 40px 80px -30px rgba(20,40,60,.45)}
.ig-phone::before{content:"";position:absolute;top:21px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#0b0f14;z-index:4}
.ig-screen{position:relative;height:640px;background:#fff;border-radius:40px;overflow:hidden;color:#000;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ig-sb,.ig-top{position:relative;z-index:3;background:#fff}
.ig-sb{display:flex;justify-content:space-between;align-items:center;height:46px;padding:4px 24px 0 30px}
.ig-sb b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.ig-sb span{display:flex;gap:5px;align-items:center}
.ig-sb em{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.ig-sb svg{height:10.5px;width:auto;fill:currentColor}
.ig-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2px 12px 8px 10px}
.ig-top>svg{width:22px;height:22px}
.ig-top b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.ig-top span{display:flex;gap:16px;justify-content:flex-end}
.ig-top span svg{width:22px;height:22px}
.ig-scroll{position:relative;z-index:1;will-change:transform;padding-bottom:90px}
.ig-prof{display:flex;align-items:center;gap:18px;padding:6px 14px 0}
.ig-ring{flex:none;width:76px;height:76px;border-radius:50%;display:block}
.ig-ring img{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 0 1px #DBDBDB}
.ig-head{flex:1;min-width:0}
.ig-head>b{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.ig-ring-story{padding:3px;background:conic-gradient(from 210deg,#F58529,#DD2A7B,#8134AF,#515BD4,#F58529)}
.ig-ring-story img{border:3px solid #fff;box-shadow:none}
.ig-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.ig-stats span{display:flex;flex-direction:column;align-items:flex-start;font-size:12px;line-height:1.3;white-space:nowrap}
.ig-stats b{font-size:14.5px;font-weight:600}
.ig-bio{display:flex;flex-direction:column;padding:10px 14px 0;font-size:12.5px;line-height:1.42}
.ig-mehr{font-style:normal;color:#737373}
.ig-bio b{font-weight:600}
.ig-kat{color:#737373}
.ig-weblink{display:inline-flex;align-items:center;gap:4px;color:#00376B;font-weight:600;align-self:flex-start}
.ig-weblink svg{width:13px;height:13px;stroke-width:2.2}
.ig-weblink:hover{color:#00376B;text-decoration:underline}
.ig-btns{display:grid;grid-template-columns:1fr 1fr 30px;gap:6px;padding:13px 14px 0}
.ig-btns a,.ig-add{font-size:12.5px;font-weight:600;text-align:center;border-radius:9px;padding:7px 0;line-height:1.25}
.ig-follow{position:relative;display:grid;place-items:center;background:#4A5DF6;color:#fff}
.ig-follow:hover{background:#3A4DE6;color:#fff}
.ig-follow .f1,.ig-follow .f2{grid-area:1/1}
.ig-follow .f2{opacity:0}
.ig-msg{background:#F0F2F5;color:#000}
.ig-msg:hover{background:#E4E6EB;color:#000}
.ig-add{display:grid;place-items:center;background:#F0F2F5;padding:0}
.ig-add svg{width:15px;height:15px;stroke-width:2.1}
.ig-tap{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(17,17,17,.28);box-shadow:0 0 0 2px rgba(255,255,255,.7);opacity:0;pointer-events:none}
.ig-hls{display:flex;gap:16px;padding:16px 14px 2px;overflow:hidden}
.ig-hl{flex:none;width:60px;display:flex;flex-direction:column;align-items:center}
.ig-hl i{width:60px;height:60px;border-radius:50%;padding:3px;box-shadow:0 0 0 1.5px #DEE2E6 inset;display:block}
.ig-hl img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ig-hl em{font-style:normal;font-size:11.5px;margin-top:5px;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;color:#737373;border-bottom:1px solid #EFEFEF}
.ig-tabs span{position:relative;display:grid;place-items:center;padding:8px 0 9px}
.ig-tabs svg{width:21px;height:21px}
.ig-tabs .on{color:#0C0F14}
.ig-tabs .on::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:#0C0F14}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;margin-top:1.5px}
.ig-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#EFEFEF}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.ig-badge{position:absolute;top:5px;right:5px;filter:drop-shadow(0 0 2px rgba(0,0,0,.3))}
.ig-badge svg{width:15px;height:15px;display:block}
.ig-ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,20,30,.35);color:#fff;opacity:0;transition:opacity .25s}
.ig-ov svg{width:26px;height:26px}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.08)}
.ig-tile:hover .ig-ov,.ig-tile:focus-visible .ig-ov{opacity:1}
.ig-nav{position:absolute;z-index:3;left:12px;right:12px;bottom:16px;height:48px;padding:0 4px 0 16px;border-radius:26px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px -6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center}
.ig-nav svg{width:22px;height:22px}
.ig-nav b{display:grid;place-items:center;width:62px;height:40px;border-radius:21px;background:rgba(0,0,0,.07)}
.ig-nav i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1.5px #0C0F14;overflow:hidden;display:block}
.ig-nav i img{width:100%;height:100%;object-fit:cover;display:block}
.ig-screen::after{content:"";position:absolute;z-index:4;left:50%;bottom:6px;width:108px;height:4px;margin-left:-54px;border-radius:3px;background:#000}
.ig-float{position:absolute;z-index:1;width:230px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(20,40,60,.35);border:6px solid #fff;transition:transform 1.4s var(--ease) .2s,opacity 1s .2s}
.ig-float img{width:100%;height:100%;object-fit:cover;display:block}
.ig-float1{left:2%;top:12%;transform:rotate(-9deg)}
.ig-float2{right:0;bottom:8%;transform:rotate(7deg)}
.js .ig-stage.rv:not(.in) .ig-float1{transform:rotate(0) translateX(70px);opacity:0}
.js .ig-stage.rv:not(.in) .ig-float2{transform:rotate(0) translateX(-70px);opacity:0}
/* Handy-Animation: erst durchs Profil scrollen, dann tippt ein Finger auf „Folgen“ (Schleife, 12 s) */
.ig-stage.in .ig-scroll{animation:igscroll 8s cubic-bezier(.4,0,.2,1) 0s infinite}
.ig-stage.in .ig-follow{animation:igbtn 8s ease 0s infinite}
.ig-stage.in .ig-follow .f1{animation:igf1 8s steps(1,end) 0s infinite}
.ig-stage.in .ig-follow .f2{animation:igf2 8s steps(1,end) 0s infinite}
.ig-stage.in .ig-tap{animation:igtap 8s ease-out 0s infinite}
.ig-stage:hover .ig-scroll,.ig-stage:hover .ig-follow,.ig-stage:hover .ig-follow span,.ig-stage:hover .ig-tap{animation-play-state:paused}
@keyframes igscroll{0%,1%{transform:translateY(0)}13%,36%{transform:translateY(-440px)}50%,100%{transform:translateY(0)}}
@keyframes igbtn{0%,57%{transform:scale(1);background:#4A5DF6;color:#fff}59%{transform:scale(.93);background:#4A5DF6;color:#fff}62%,93%{transform:scale(1);background:#F0F2F5;color:#000}96%,100%{background:#4A5DF6;color:#fff}}
@keyframes igf1{0%{opacity:1}60%{opacity:0}95%{opacity:1}}
@keyframes igf2{0%{opacity:0}60%{opacity:1}95%{opacity:0}}
@keyframes igtap{0%,51%{opacity:0;transform:translate(26px,34px) scale(1.25)}55%{opacity:1;transform:translate(0,0) scale(1)}59%{opacity:1;transform:scale(.78)}66%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ig-stage.in .ig-scroll,.ig-stage.in .ig-follow,.ig-stage.in .ig-follow span,.ig-stage.in .ig-tap{animation:none}}
@media(max-width:980px){.ig-in{grid-template-columns:1fr;gap:28px}.ig-copy{text-align:center}.ig .sub{margin-left:auto}.ig-stage{min-height:0}.ig-float1{left:calc(50% - 300px)}.ig-float2{right:calc(50% - 300px)}}
@media(max-width:640px){.ig{padding:64px 0}.ig-phone{width:min(316px,88vw)}.ig-float{display:none}}
@media(prefers-reduced-motion:reduce){.ig-float{transition:none}.js .ig-stage.rv:not(.in) .ig-float1,.js .ig-stage.rv:not(.in) .ig-float2{transform:none;opacity:1}}

/* Bildstrecke (Revier): Karussell, Bilder gleiten von rechts nach links (v66: kleiner, 4 s, 8–10 Bilder) */
.cr-sec{padding:8px 0 24px;overflow:hidden}
.cr-view{overflow:hidden;touch-action:pan-y}
.cr-track{display:flex;gap:16px;will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.cr-track.drag,.cr-track.jump{transition:none}
.cr-s{flex:0 0 42%;margin:0;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#0d1b26;position:relative;transform:scale(.92);opacity:.55;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease;cursor:grab;user-select:none;-webkit-user-select:none}
.cr-s.on{transform:none;opacity:1}
.cr-s img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transform:scale(1.04);transition:transform 4s ease-out}
.cr-s.on img{transform:none}
.cr-track.drag .cr-s{cursor:grabbing}
.cr-ui{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:22px}
.cr-cap{display:flex;align-items:baseline;gap:8px;min-width:0}
.cr-n{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cr-of{font-size:15px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-t{margin:0 0 0 14px;font-size:15.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .5s}
.cr-t.fade{opacity:0}
.cr-ctl{display:flex;align-items:center;gap:10px;flex:none}
.cr-prog{width:120px;height:2px;background:var(--line2);border-radius:2px;overflow:hidden;margin-right:8px}
.cr-prog i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.cr-prog i.run{transition:transform linear}
.cr-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,background .25s}
.cr-btn:hover{border-color:var(--ink)}
.cr-btn svg{width:20px;height:20px}
.cr-next svg{transform:rotate(180deg)}
.cr-play span{width:9px;height:10px;border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.cr.paused .cr-play span{width:0;height:0;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent var(--ink);margin-left:3px}
@media(min-width:701px) and (max-width:1100px){.cr-s{flex-basis:56%}}
@media(max-width:700px){.cr-sec{padding-top:4px}.cr-track{gap:10px}.cr-s{flex-basis:74%;aspect-ratio:4/5;border-radius:16px}.cr-prog{display:none}.cr-ui{margin-top:16px}.cr-t{display:none}.cr-btn{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.cr-track,.cr-s,.cr-s img{transition:none}}
.cr.glide .cr-track{transition:none}
.cr.glide .cr-s{transition:none;will-change:transform,opacity}
.cr.glide .cr-s img{transform:none;transition:none}
.cr.glide .cr-prog{display:none}
html:not(.js) .cr-view{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px}
html:not(.js) .cr-s{transform:none;opacity:1;scroll-snap-align:center}
html:not(.js) .cr-ui{display:none}

/* CORE „Und dann?“ — ruhige weiße Kachel, Preisschild am Nagel pendelt beim Einblenden aus */
.hl2{position:relative;margin-top:40px;border-radius:var(--rl);overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:center;background:var(--blue);color:#fff;padding:40px 0 40px 44px;min-height:250px}
.hl2-tx{position:relative;z-index:1}
.hl2-k{display:block;font-size:14px;font-weight:600;color:#8FD0E0}
.hl2-h{margin-top:10px;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:600;max-width:22ch;color:#fff}
.hl2-fair{margin-top:12px;font-size:clamp(16px,1.5vw,19px);font-weight:500;color:rgba(255,255,255,.85)}
.hl2-fair span{position:relative;display:inline-block;padding-bottom:6px}
.hl2-line{position:absolute;left:0;bottom:-2px;width:100%;height:10px;overflow:visible}
.hl2-line path{fill:none;stroke:#8FD0E0;stroke-width:2;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}
.hl2.in .hl2-line path{transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .9s;stroke-dashoffset:0}
.hl2 .btn{margin-top:22px;background:#fff;color:var(--blue);padding:11px 20px;font-size:14.5px}
.hl2 .btn:hover{background:var(--accent-soft);color:var(--blue)}
.hl2-stage{position:relative;height:100%;min-height:230px}
.hl2-nail{position:absolute;left:50%;top:-4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#C7CCD1 60%,#8D959C);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:3}
.hl2-tag{position:absolute;left:50%;top:0;width:160px;margin-left:-80px;transform-origin:50% 0;transform:rotate(-1deg)}
.hl2.in .hl2-tag{animation:hl2swing 2.8s cubic-bezier(.3,.7,.4,1) both,hl2sway 8s ease-in-out 2.8s infinite}
.hl2-string{display:block;width:50px;height:46px;margin:0 auto;overflow:visible}
.hl2-string path{fill:none;stroke:#B9BFC5;stroke-width:1.2}
.hl2-card{position:relative;background:#FBFBFC;color:var(--ink);border-radius:12px;padding:24px 16px 16px;text-align:center;margin-top:-6px;clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%);box-shadow:inset 0 0 0 1px var(--line2),0 24px 40px -24px rgba(29,29,31,.35)}
.hl2-hole{position:absolute;left:50%;top:12px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 0 0 1px var(--line2)}
.hl2-brand{display:block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.hl2-card b{display:block;font-size:22px;line-height:1.05;letter-spacing:-.03em;font-weight:600;margin-top:10px;color:var(--ink)}
.hl2-card b+b{margin-top:2px;color:var(--accent-d)}
.hl2-sub{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3)}
@keyframes hl2swing{0%{transform:translateY(-30px) rotate(-22deg);opacity:0}18%{opacity:1}36%{transform:translateY(0) rotate(12deg)}54%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}84%{transform:rotate(-2deg)}100%{transform:rotate(-1deg)}}
@keyframes hl2sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.2deg)}}
.js .hl2.rv:not(.in) .hl2-tag{opacity:0}
.hl2.rv{transform:none}
@media(max-width:900px){.hl2{grid-template-columns:1fr;padding:32px 24px 0}.hl2-stage{min-height:260px;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.hl2.in .hl2-tag{animation:none;transform:rotate(-3deg)}.hl2-line path{stroke-dashoffset:0}.js .hl2.rv:not(.in) .hl2-tag{opacity:1}}

/* „Das Besondere“: Textmarker zieht beim Einblenden durch */
.blick-hi .mark{background-image:linear-gradient(transparent 60%,#BFE6EF 60%,#BFE6EF 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) .35s;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.blick.in .blick-hi .mark{background-size:100% 100%}
/* CORE: Wochenleiste, die Tage leuchten nacheinander auf */
.woche{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-14px 0 30px}
.woche span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--ink3);background:var(--bg2);border:1.5px solid var(--line2);transition:background .4s,color .4s,border-color .4s,transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.5s + var(--d)*.14s)}
.blick.in .woche span{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.06)}
.woche em{font-style:normal;margin-left:8px;font-size:14.5px;font-weight:600;color:var(--accent-d);opacity:0;transform:translateX(-6px);transition:opacity .5s 1.6s,transform .5s 1.6s}
.blick.in .woche em{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.blick-hi .mark{background-size:100% 100%;transition:none}.woche span,.woche em{transition:none}}
@media(max-width:640px){.woche span{width:38px;height:38px;font-size:13px}.woche{gap:6px}}

/* Gutschein: Stempel „Alle aufs Wasser“ wird beim Einblenden aufgedrückt */
.tix-st{position:relative;border-width:2.5px;font-size:13px!important;padding:10px 16px!important;box-shadow:inset 0 0 0 1px rgba(0,102,127,.35);border-radius:9px 11px 8px 12px}
.tix.in .tix-st{animation:stempel .75s cubic-bezier(.2,.9,.25,1) .45s both}
.tix.in{animation:stempelruck .75s ease-out .45s}
.tix-st::after{content:"";position:absolute;inset:-6px;border-radius:14px;border:2px solid var(--accent-d);opacity:0}
.tix.in .tix-st::after{animation:stempelring .9s ease-out .78s both}
.js .tix:not(.in) .tix-st{opacity:0}
@keyframes stempel{0%{opacity:0;transform:rotate(-24deg) scale(2.4);filter:blur(1.5px)}55%{opacity:.95;transform:rotate(-4deg) scale(.88);filter:none}72%{transform:rotate(-7deg) scale(1.05)}100%{opacity:.88;transform:rotate(-6deg) scale(1)}}
@keyframes stempelruck{0%,52%{transform:rotate(-1.5deg)}58%{transform:rotate(-1.5deg) translateY(3px) scale(.995)}70%{transform:rotate(-1.2deg) translateY(-1px)}100%{transform:rotate(-1.5deg)}}
@keyframes stempelring{0%{opacity:.45;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.tix.in .tix-st,.tix.in,.tix.in .tix-st::after{animation:none}.js .tix:not(.in) .tix-st{opacity:.85}}

/* ================================================================
   Ohne JavaScript (oder wenn main.js nicht lädt): Die Seite bleibt
   vollständig bedienbar. Steht bewusst am Dateiende, damit keine
   spätere Regel diese Fallbacks überschreibt. „js“ setzt das kleine
   Boot-Skript im Kopf und nimmt es nach 2,5 s wieder weg, wenn main.js
   nicht angelaufen ist.
   ================================================================ */
html:not(.js) .burger{display:none!important}
html:not(.js) .mobile{display:block!important;position:static;inset:auto;z-index:auto;padding:0 0 10px;background:transparent;overflow:visible}
html:not(.js) .mobile a{font-size:17px;padding:10px 0}
html:not(.js) .mobile .mstat,html:not(.js) .mobile .status-pill{display:none}
@media(min-width:981px){html:not(.js) .mobile{display:none!important}}
html:not(.js) .lvl,html:not(.js) .dock{display:none!important}
html:not(.js) .tabs [role=tab]{display:none}
html:not(.js) .panel[data-panel]{display:block!important}
html:not(.js) .rv{opacity:1!important;transform:none!important}

/* 320 px (400 % Zoom): nichts darf quer scrollen. */
@media(max-width:359px){
  .nav .brand svg{height:28px;width:auto}
  .nav{gap:8px}
  .prose,.prose2,.ans,.phero p,.card p,.pside,.step h3,.step p,h1,h2,h3{overflow-wrap:anywhere}
  .split .tx{padding:28px 20px}
  .form{min-width:0}.form>*{min-width:0}
  .wrap{padding-left:14px;padding-right:14px}
}

/* v66: Kennzeichnung KI-generierter Symbolbilder */
.ki-tag{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(11,17,22,.55);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.03em;line-height:1.4;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:has(> .ki-tag){position:relative}
.phero > .ki-tag{bottom:16px;right:16px}
/* v66: Partnerlogos ganz unten auf der Startseite */
.partner-end{padding:56px 0 72px;border-top:1px solid var(--line2)}

/* v68 (Audit H2): Fokusring auf dunklen Flächen hell; Formularränder kräftiger (3:1) */
.cta-box :focus-visible,.hl2 :focus-visible,.hero :focus-visible,.band :focus-visible,.phero :focus-visible,footer :focus-visible{outline-color:#fff}
.form input,.form textarea,.calc-f select{border-color:#808086}
/* v68 (Audit H5): Links in FAQ-Antworten und Listen sichtbar unterstreichen */
.ans a:not(.btn),.prose li>a:not(.btn),.vnote a,.pside a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(7,122,136,.5)}
/* v68 (Audit H3): Esc schließt das Dropdown, der Fokus bleibt auf dem Menüpunkt */
.nav li.has.esc>.dd{display:none}
/* v68 (Audit C2): ohne JavaScript kein Rechner mit falscher Summe — die Preiskarten darüber gelten */
html:not(.js) .calc-sec{display:none}
/* v68 (Audit F1): leere Filterkombination */
.c-leer{text-align:center;padding:28px 16px;color:var(--ink2);font-size:15.5px}
.c-leer button{font:inherit;color:var(--accent-d);text-decoration:underline;background:none;border:0;cursor:pointer;padding:0}

/* ---- v70: „Dein erster Tag“ als Scroll-Story ---- */
.sy{padding:clamp(72px,10vw,120px) 0;background:#fff}
.sy-in{max-width:var(--maxw,1200px);margin:0 auto;padding:0 max(24px,4vw);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,88px)}
.sy-vis{position:sticky;top:max(88px,11vh);height:min(76vh,720px)}
.sy-frame{position:relative;height:100%;border-radius:30px;overflow:hidden;background:#dfe3e6}
.sy-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.1);transition:clip-path 1.1s var(--ease),transform 1.6s var(--ease)}
.sy-frame img.on{clip-path:inset(0 0 0 0);transform:none;z-index:1}
.sy-frame img.past{clip-path:inset(0 0 0 0);transform:none}
.sy-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
.sy-time{position:absolute;left:28px;bottom:22px;z-index:3;color:#fff;font-size:clamp(52px,6.6vw,100px);font-weight:600;letter-spacing:-.05em;line-height:1;height:1.04em;overflow:hidden;text-shadow:0 10px 40px rgba(0,0,0,.3)}
.sy-time span{display:block;transition:transform .7s var(--ease),opacity .5s}
.sy-time span.out{transform:translateY(-100%);opacity:0}
.sy-time span.in{transform:translateY(100%);opacity:0}
.sy-head .sub{margin-left:0;max-width:36ch}
.sy-steps{position:relative;margin-top:7vh;padding-left:36px}
.sy-line{position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line2);border-radius:2px}
.sy-line b{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);border-radius:2px}
.sy-step{position:relative;min-height:44vh;transform:translateX(-6px);transition:transform .6s var(--ease)}
.sy-step.on{transform:none}
/* inaktiv gedimmt über Farbe statt Deckkraft — bleibt lesbar (Kontrast ≥ 4,5:1 bzw. 3:1 bei großer Schrift) */
.sy-step h3,.sy-step p,.sy-t{transition:color .5s var(--ease)}
.sy-step:not(.on) h3{color:#86868B}.sy-step:not(.on) p,.sy-step:not(.on) .sy-t{color:#6E6E73}
.sy-step.on p{color:var(--ink)}
.sy-step::before{content:"";position:absolute;left:-36px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:background .4s,border-color .4s}
.sy-step.on::before,.sy-step.done::before{background:var(--accent);border-color:var(--accent)}
.sy-t{font-size:14px;font-weight:600;color:var(--accent-d);font-variant-numeric:tabular-nums}
.sy-step h3{font-size:clamp(24px,2.3vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:6px 0 10px}
.sy-step p{font-size:17px;color:var(--ink2);line-height:1.55;margin:0;max-width:36ch}
.sy-step:last-child{min-height:30vh}
@media(max-width:860px){
  .sy-in{grid-template-columns:1fr;gap:0}
  .sy-vis{top:56px;height:46vh;z-index:2;margin:0 calc(-1 * max(24px,4vw))}
  .sy-frame{border-radius:0}
  .sy-tx{position:relative;z-index:1}
  .sy-head{padding-top:28px}
  .sy-step{min-height:52vh}
}
html:not(.js) .sy-step{transform:none;min-height:0;padding-bottom:28px}
html:not(.js) .sy-step h3{color:var(--ink)}
html:not(.js) .sy-vis{position:relative;top:0}
@media(prefers-reduced-motion:reduce){.sy-frame img,.sy-time span,.sy-step{transition:none}}

/* ---- v70: Animierte Spot-Karte ---- */
.kms{position:relative;background:var(--bg2)}
.kms-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.kms-in{max-width:1280px;margin:0 auto;padding:72px max(24px,4vw) 24px;width:100%;display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.kms-steps{position:relative;min-height:210px;margin-top:22px}
.kms-s{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}
.kms-s.on{opacity:1;transform:none;pointer-events:auto}
.km-i{font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
.kms-s h3{font-size:clamp(22px,2vw,27px);letter-spacing:-.02em;margin:6px 0 10px}
.kms-s p{margin:0;color:var(--ink2);font-size:16.5px;line-height:1.55}
.kms-nav{display:flex;align-items:center;gap:6px;margin-top:20px;margin-left:-10px}
.kms-dots{display:flex;gap:2px}
.kms-dots button{background:none;border:0;padding:12px 5px;cursor:pointer;display:block}
.kms-dots i{display:block;width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--f,0%),var(--line) var(--f,0%));transition:transform .3s var(--ease)}
.kms-dots button:hover i{transform:scaleY(1.8)}
.kms-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .25s,opacity .25s}
.kms-btn:hover{border-color:var(--ink)}
.kms-btn svg{width:16px;height:16px}
.kms-next svg{transform:rotate(180deg)}
.kms-btn[disabled]{opacity:.35;cursor:default;border-color:var(--line)}
html:not(.js) .kms-nav{display:none}
.kms-map{display:flex;justify-content:center}
.km{width:auto;max-width:100%;height:min(84vh,860px);display:block;border-radius:28px;box-shadow:0 40px 80px -50px rgba(11,17,22,.45),0 0 0 1px rgba(11,17,22,.05);background:#A8D3DF}
.km-lab{font:600 13px var(--f);fill:#3A3A3F}.km-small{font-size:11px;fill:#5B6B4E}.km-v{font-size:15px;fill:#8A6D3B;writing-mode:vertical-rl;letter-spacing:.2em}.km-sea-l{font-size:15px;fill:#fff;letter-spacing:.1em}
.km-p{font:700 15px var(--f);fill:#fff}.km-z{font:600 12.5px var(--f);fill:#00667F;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}.km-zb{fill:#A33;font-size:11.5px}.km-zs{font:500 10.5px var(--f);fill:#6E6E73}.km-st{font:700 14px var(--f);fill:#1D1D1F}.km-n{font:700 8px var(--f);fill:#1D1D1F}.km-osm{font:400 9px var(--f);fill:#3A3A3F;opacity:.75}
.km-l{opacity:0;transition:opacity .8s var(--ease)}
.km-zoom{transform-box:view-box;transform-origin:0 0;transition:transform 1.4s cubic-bezier(.65,0,.25,1)}
.km-nur{transition:opacity .5s var(--ease)}
.km-l.on{opacity:1}
.km-walk{stroke-dashoffset:300;transition:stroke-dashoffset 2s var(--ease)}
.km-l.on .km-walk{stroke-dashoffset:0}
.km-pin{transform:translateY(-24px);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.34,1.56,.64,1)}
.km-pin.on{transform:none}
.km-pulse{transform-box:fill-box;transform-origin:center;animation:kmpuls 2.4s ease-out infinite}
@keyframes kmpuls{0%{transform:scale(.6);opacity:.35}100%{transform:scale(2.2);opacity:0}}
.km-wind path{stroke-dasharray:22 260;animation:kmwind 3.4s linear infinite}
.km-wind path:nth-child(2){animation-delay:-1.1s}.km-wind path:nth-child(3){animation-delay:-2.2s}.km-wind path:nth-child(4){animation-delay:-.6s}.km-wind path:nth-child(5){animation-delay:-1.7s}
@keyframes kmwind{from{stroke-dashoffset:282}to{stroke-dashoffset:0}}
.km-wave path{stroke-dasharray:40 260;animation:kmwave 8s linear infinite}
.km-wave path:nth-child(2n){animation-delay:-3s}
@keyframes kmwave{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}

@media(max-width:860px){
  .kms-pin{align-items:flex-start}
  .kms-in{grid-template-columns:1fr;gap:12px;padding-top:68px}
  .kms-tx .h-l{font-size:24px}
  .kms-tx .eyebrow{display:none}
  .kms-steps{min-height:196px;margin-top:8px}
  .kms-s h3{font-size:20px;margin:2px 0 6px}
  .kms-s p{font-size:14.5px;line-height:1.5}
  .kms-nav{margin-top:2px}
  .km{height:auto;max-height:50vh;width:auto;max-width:100%;margin:0 auto}
}
html:not(.js) .kms-pin{position:relative;height:auto}
html:not(.js) .kms-s{position:relative;opacity:1;transform:none;margin-bottom:18px}
html:not(.js) .kms-steps{min-height:0}
html:not(.js) .km-l{opacity:1}
@media(prefers-reduced-motion:reduce){.km-l,.km-pin,.km-walk,.kms-s,.km-zoom{transition:none}.km-mover{display:none}.km-pulse,.km-wind path,.km-wave path{animation:none}}
@media(max-width:860px) and (max-height:740px){.km{max-height:43vh}.kms-in{padding-top:62px}}

/* v79: Kontakt & Anfahrt — Karte mit Schritten 1–3 zum Durchklicken, Direkt-Kasten, Formular darunter */
.kma-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.kma{background:#fff;border-radius:var(--rl);padding:16px;box-shadow:0 30px 60px -44px rgba(11,17,22,.35)}
.kma-tabs{display:flex;gap:6px;background:var(--bg2);border-radius:999px;padding:4px;margin-bottom:14px}
.kma-tab{flex:1;border:0;background:none;border-radius:999px;padding:9px 10px;font:600 14px var(--f);color:var(--ink2);cursor:pointer;transition:background .3s,color .3s;position:relative;overflow:hidden}
.kma-tab:hover{color:var(--ink)}
.kma-tab.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(11,17,22,.08)}
.kma-tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
.kma-map{border-radius:18px;overflow:hidden;background:#A8D3DF}
.kma-map .km{display:block;width:100%;height:clamp(360px,44vw,560px);max-height:none;border-radius:0;box-shadow:none}
.kma-txt{position:relative;min-height:56px;margin:14px 6px 4px}
.kma-t{margin:0;font-size:16px;line-height:1.55;color:var(--ink2);position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.kma-t.on{opacity:1;transform:none;position:relative}
.kma-direkt{background:#fff;border-radius:var(--rl);padding:32px 30px;position:sticky;top:96px}
.kma-link{color:var(--accent-d);font-weight:600}
.kma-form{max-width:820px}
.kma-form .sec-h{margin-bottom:22px}
@media(max-width:980px){.kma-grid{grid-template-columns:1fr}.kma-direkt{position:static}}
@media(max-width:560px){.kma{padding:10px}.kma-tab{font-size:12.5px;padding:8px 4px}.kma-direkt{padding:26px 22px}}
html:not(.js) .kma-map .km-l{opacity:1}
/* v82: „Frag uns“-Handy auf der Startseite (ersetzt dort das Akkordeon; Daten = Fragen & Antworten → Startseite) */
.ch-sec{padding:110px 0;background:radial-gradient(90% 80% at 15% 30%,#EAF4F7 0%,#F5F5F7 62%)}
.ch-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.ch-copy .h-l{margin-top:10px}
.ch-copy .sub{margin-left:0;max-width:440px}
.ch-copy .btns{justify-content:flex-start;margin-top:26px}
.ch-kontakt{margin-top:14px;font-size:14px;color:var(--ink3)}
.ch-daten{margin-top:30px}
.js .ch-daten{display:none}
html:not(.js) .ch-stage{display:none}
html:not(.js) .ch-in{grid-template-columns:1fr}
.ch-stage{display:flex;justify-content:center;order:-1}
.ch-screen{position:relative;height:640px;background:#fff;border-radius:40px;overflow:hidden;display:flex;flex-direction:column;color:#000;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ch-screen .ig-sb{flex:none}
.ch-top{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0 10px;border-bottom:1px solid #EFEFF4;background:#F9F9F9}
.ch-av{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px #E5E5EA;background:#fff}
.ch-top b{font-size:13px;font-weight:600}
.ch-top small{font-size:11px;color:#8E8E93}
.ch-verlauf{position:relative;flex:1;overflow-y:auto;scrollbar-width:none;padding:14px 12px 22px;display:flex;flex-direction:column;gap:6px;
  -webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
.ch-verlauf::-webkit-scrollbar{display:none}
.ch-verlauf>*{flex-shrink:0}
.ch-verlauf>:first-child{margin-top:auto}
.ch-b{max-width:80%;padding:8px 12px;border-radius:19px;font-size:14.5px;line-height:1.36;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom left;
  transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.ch-b.da{opacity:1;transform:none}
.ch-ich{align-self:flex-end;background:#0A84FF;color:#fff;border-bottom-right-radius:6px;transform-origin:bottom right}
.ch-wir{align-self:flex-start;background:#E9E9EB;color:#000;border-bottom-left-radius:6px}
.ch-wir a{color:#0060DF;text-decoration:underline}
.ch-tipp{align-self:flex-start;background:#E9E9EB;border-radius:19px;padding:12px 14px;display:flex;gap:4px}
.ch-tipp i{width:7px;height:7px;border-radius:50%;background:#8E8E93;animation:chtipp 1.1s infinite}
.ch-tipp i:nth-child(2){animation-delay:.18s}.ch-tipp i:nth-child(3){animation-delay:.36s}
@keyframes chtipp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ch-liste{align-self:stretch;margin:8px 0 2px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px #E5E5EA,0 10px 24px -16px rgba(0,0,0,.28);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1)}
.ch-liste.da{opacity:1;transform:none}
.ch-liste-kopf{padding:10px 14px 6px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8E8E93}
.ch-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 14px;border:0;border-top:1px solid #F0F0F3;background:#fff;
  color:#000;font:400 14.5px/1.3 inherit;font-family:inherit;text-align:left;cursor:pointer;transition:background .15s}
.ch-zeile svg{flex:none;width:7px;height:12px;color:#C7C7CC;transition:transform .2s,color .2s}
.ch-zeile:hover,.ch-zeile:focus-visible{background:#F2F7FF;outline:none}
.ch-zeile:hover svg,.ch-zeile:focus-visible svg{color:#0A84FF;transform:translateX(2px)}
.ch-zeile:active{background:#E5EFFF}
.ch-zeile.mehr{color:#0A84FF;font-weight:500}
.ch-zeile.mehr svg{transform:rotate(90deg)}
.ch-zeile.mehr:hover svg{transform:rotate(90deg) translateX(2px)}
.ch-zeile.rest{color:#00667F;font-weight:600}
.ch-zeile.rest svg{width:15px;height:15px;color:#00667F}
.ch-aktion{align-self:flex-start;display:flex;gap:6px}
.ch-aktion a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:#00667F;color:#fff;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600}
.ch-aktion a+a{background:#fff;color:#00667F;box-shadow:inset 0 0 0 1.5px #00667F}
.ch-aktion svg{width:15px;height:15px}
@media(max-width:900px){.ch-sec{padding:80px 0}.ch-in{grid-template-columns:1fr;gap:34px}.ch-copy{text-align:center}.ch-copy .sub{margin:0 auto}.ch-copy .btns{justify-content:center}.ch-stage{order:0}}
@media(max-width:380px){.ch-screen{height:580px}}
@media(prefers-reduced-motion:reduce){.ch-b,.ch-liste{transition:none}.ch-tipp i{animation:none}}
.ch-copy .btn-ghost{background:#fff}
.faq-rest{text-align:center;margin-top:22px;color:var(--ink3);font-size:15px}
.faq-rest a{color:#00667F;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ch-zeile[hidden]{display:none}
/* v85: Hinweis unter Buchen-/Gutschein-Knöpfen, Strandbar-Infozeile, Dock nur am Handy, Fußzeile eine Stufe größer */
.c-ext{display:block;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--ink3)}
.cr-k{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.cr-k .c-ext{white-space:nowrap;text-align:right}
@media(max-width:980px){.cr-k .c-ext{white-space:normal}}
@media(max-width:640px){.cr-k{align-items:stretch}.cr-k .c-ext{max-width:none;text-align:center}}
.sb-info{margin:22px auto 0;max-width:36rem;font-size:15px;color:var(--ink2);line-height:1.55}
.sb-info b{color:var(--ink);font-weight:600}
.sb-info a{color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.dock{display:none!important}}
footer{font-size:15px}
footer :is(h2,h3,h4){font-size:14.5px}
.fbot{font-size:13.5px}
.fsig-r>span{font-size:13.5px}
.fsig .status{font-size:14px}
.sport .btn-block{white-space:nowrap;padding-left:10px;padding-right:10px;font-size:clamp(13px,1.15vw,15px)}

/* v86: Kartenknopf am Handy kurz („Ansehen“), am Desktop mit Sportart */
.k-kurz{display:none}
@media(max-width:640px){.sports .k-lang{display:none}.sports .k-kurz{display:inline}}
/* v86 (Audit 14): Kursübersicht kompakt, Sportarten-Leiste klebt unter dem Kopf */
.kompakt .crow .top,.kompakt .crow .hint{display:none}
.kompakt .crow .ziel{margin-bottom:6px}
.kf-stick{position:sticky;top:72px;z-index:40;margin:0 -24px 14px;padding:10px 24px;background:rgba(245,245,247,.97);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.kf-stick .lvl{margin:0}
@media(max-width:640px){
  .kf-stick{margin:0 -20px 12px;padding:8px 0}
  .kf-stick .lvl{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:0 20px}
  .kf-stick .lvl::-webkit-scrollbar{display:none}
  .kf-stick .chip{flex:none;padding:8px 14px;font-size:14px}
}
@media(max-width:640px){
  .kompakt .crow{gap:10px;padding:18px 18px 16px}
  .kompakt .crow h3{font-size:21px}
  .kompakt .crow .ziel{font-size:15.5px;margin:0}
  .kompakt .crow .more{margin-top:2px}
  .kompakt .crow .cr{gap:10px;padding-top:12px}
  .kompakt .crow .price>b{font-size:30px}
  .kompakt .crow .btn{padding:12px 18px}
  .kompakt .crows{gap:10px}
}
@media(max-width:640px){
  .kompakt .crow .cr{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .kompakt .crow .price small.vat,.kompakt .crow .c-ext{display:none}
  .kompakt .crow .price{flex-direction:column;align-items:flex-start;row-gap:0;min-width:0}
  .kompakt .crow .price>b{font-size:26px}
  .kompakt .crow .cr-k{align-items:flex-end;flex:none}
  .kompakt .crow .btn{width:auto;padding:12px 16px;font-size:14.5px}
}
.kf-hint{text-align:center;font-size:13.5px;color:var(--ink3);margin:-4px 0 18px}
/* v87: Strandbar-Satz statt Kennzahl-Kacheln, Infozeile statt Kacheln (Unterkünfte) */
.nb-lead{text-wrap:balance;font-size:clamp(24px,3.2vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.22;max-width:26ch;margin:0 auto;text-align:center;color:#fff}
.info-zeile{text-wrap:balance;text-align:center;margin:30px auto 0;max-width:46rem;font-size:15.5px;line-height:1.6;color:var(--ink2)}

/* v89 (Nils): Seitenwechsel wie in einer App + Kursdetails als Blatt von unten (nur „Alle Kurse“, nur Handy) */
/* ===== 1: Seitenwechsel wie in einer App (View Transitions, ohne Skript) ===== */
@view-transition{navigation:auto}
header{view-transition-name:kopf}
::view-transition-group(kopf){animation-duration:0s}
::view-transition-old(root){animation:vt-aus .22s ease-in both}
::view-transition-new(root){animation:vt-ein .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-aus{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes vt-ein{from{opacity:0;transform:translateY(18px)}}

@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* ===== 2: Kursdetails als Blatt von unten (nur Handy) ===== */
.bs-schleier{position:fixed;inset:0;background:rgba(11,17,22,.42);opacity:0;transition:opacity .35s;z-index:200}
.bs-schleier.on{opacity:1}
.bs{position:fixed;left:0;right:0;bottom:0;max-height:88vh;background:#fff;border-radius:22px 22px 0 0;z-index:201;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.25,1);box-shadow:0 -20px 50px -20px rgba(0,0,0,.35)}
.bs.on{transform:none}
.bs.ziehen{transition:none}
.bs-griff{flex:none;padding:10px 0 4px;display:grid;place-items:center;cursor:grab;touch-action:none}
.bs-griff i{width:40px;height:5px;border-radius:5px;background:#D1D1D6}
.bs-in{overflow-y:auto;padding:6px 22px 18px;overscroll-behavior:contain}
.bs-in h3{font-size:24px;letter-spacing:-.025em;margin:10px 0 6px}
.bs-in .facts{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink2)}
.bs-in .facts b{color:var(--ink)}
.bs-in .ziel{font-size:17px;font-weight:500;margin:14px 0 4px;line-height:1.4}
.bs-in .top{list-style:none;padding:0;margin:10px 0}
.bs-in .top li{padding:4px 0 4px 26px;position:relative;font-size:15.5px}
.bs-in .top li::before{content:"";position:absolute;left:2px;top:9px;width:14px;height:14px;border-radius:50%;background:#E4F3F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%2300667F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px}
.bs-in h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:18px 0 6px}
.bs-in p{color:var(--ink2);font-size:15.5px;line-height:1.5;margin:0}
.bs-in ul.all{margin:6px 0 0;padding-left:20px;color:var(--ink2);font-size:15px;line-height:1.6}
.bs-fuss{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #EFEFF4;background:#fff}
.bs-fuss .price b{font-size:28px;letter-spacing:-.03em}
.bs-fuss .price small{display:block;font-size:12.5px;color:var(--ink3)}
.bs-fuss .btn{padding:13px 18px}
html.bs-offen,html.bs-offen body{overflow:hidden}
@media(prefers-reduced-motion:reduce){.bs,.bs-schleier{transition:none}}
.bs-in .tag{display:inline-block;font-size:13px;font-weight:600;border-radius:999px;padding:5px 11px;background:#E4F3F8;color:#00667F}
.bs-in .tag.pro{background:#EEEAFB;color:#4B3AA8}.bs-in .tag.lvl-all{background:var(--bg2);color:var(--ink2)}
.bs-in ul.all{list-style:disc}
.bs-in ul.all li{padding:2px 0}
.bs-fuss .price{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.bs-fuss .price small{font-weight:500;letter-spacing:0}
.bs-fuss .price small.vat{display:none}
.bs-fuss .btn{white-space:nowrap;flex:none}
.bs-schleier{pointer-events:none}.bs-schleier.on{pointer-events:auto}
.bs{visibility:hidden;transition:transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s linear .5s}
.bs.on{visibility:visible;transition:transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s}
/* v90 (Performance): Abschnitte weiter unten erst rendern, wenn sie in die Nähe kommen. Spart am Handy
   Rechenzeit beim Laden (vor allem Startseite). Ausgenommen: Abschnitte mit klebenden Elementen und das Instagram-Handy
   (dessen Fotos ragen über den Rand). */
@supports (content-visibility:auto){
  main>section:nth-of-type(n+4):not(:has(.spot-im,.pside,.sy-vis,.kms-pin,.kma-direkt,.kf-stick,.ig-stage)){content-visibility:auto;contain-intrinsic-size:auto 900px}
}
/* v91: Status-Pill unter den Hero-Knöpfen, ein Gutschein-Kasten, SafetyTool-Logo */
.hero-st{margin-top:18px}
.hero-st .status-hero{margin-top:0}
.pick.pick-1{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.split .im.st-logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:48px}
.split .im.st-logo img{position:static;inset:auto;width:min(320px,75%);height:auto;object-fit:contain}
.hero-st{margin-top:22px}
@media(max-width:640px){.hero-st{margin-top:20px}.hero-st .status-hero{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:8px;text-shadow:0 1px 8px rgba(0,0,0,.35)}}
.k-zeile{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.k-zeile-sec .sec-h{margin-bottom:28px}
@media(max-width:640px){.k-zeile{flex-direction:column;align-items:stretch;max-width:340px;margin:0 auto}}
/* v92: Schriftzug aus dem Logo im Hero */
.hero h1 .wm{display:block;width:min(560px,78vw);height:auto;margin:0 auto;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)) drop-shadow(0 4px 30px rgba(0,0,0,.35))}
.hero h1 .wm+small{margin-top:18px}
/* v93 (Nils): Menü als schlichte weiße Karte (ersetzt Glaskarte und v92-Klappe) */
.dd-in{position:relative;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:16px;padding:6px;min-width:236px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px -4px rgba(0,0,0,.10),0 24px 48px -12px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.08);
  transform-origin:24px 0;animation:ddauf .32s cubic-bezier(.16,1,.3,1)}
@keyframes ddauf{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.nav .dd-i{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:10px 14px;border-radius:10px;
  font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;background:none;transition:color .15s}
.dd-i em{font-style:normal;color:var(--ink3);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.nav .dd-i:hover,.nav .dd-i:focus-visible{background:#F2F2F4;color:var(--ink)}
.dd-i:hover em,.dd-i:focus-visible em,.dd-i.h em{opacity:1;transform:none}
.js .nav .dd-i:hover,.js .nav .dd-i:focus-visible{background:none}
.nav .dd-i.dd-alle,.nav .dd-i.dd-alle:hover,.nav .dd-i.dd-alle em{color:var(--accent-d);font-size:14.5px}
.dd-sep{display:block;height:1px;background:#EDEDF0;margin:6px 8px}
.dd-hl{position:absolute;z-index:0;left:6px;right:6px;top:0;height:40px;border-radius:10px;background:#F2F2F4;opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),opacity .2s}
.dd-hl.sofort{transition:none}
html:not(.js) .dd-hl{display:none}
@media(prefers-reduced-motion:reduce){.dd-in{animation:none}.dd-hl{transition:none}}
/* v92: Buchungsfenster (spotcrew) — Luft über dem Kurstitel, damit Titel und Schließen-Knopf nicht am Rand kleben */
.bt-huelle .bt-kasten{box-sizing:border-box;padding-top:28px}
@media(max-width:640px){.bt-huelle .bt-kasten{padding-top:52px}}
/* v98: Filterleiste auf sehr schmalen Handys (≤359 px, Seitenrand 14 px) nicht breiter als der Bildschirm */
@media(max-width:359px){.kf-stick{margin-left:-14px;margin-right:-14px}.kf-stick .lvl{padding:0 14px}}
/* v99 (Nils): Frag-uns als aufgeklappter Laptop ab 901 px (Text oben mittig, Laptop groß darunter); am Handy bleibt es ein Handy */
.ch-fenster{display:none}
@media(min-width:901px){
  .ch-in{grid-template-columns:1fr;gap:48px}
  .ch-copy{text-align:center}.ch-copy .sub{margin:0 auto;max-width:560px}.ch-copy .btns{justify-content:center}
  .ch-stage{order:0}
  .ch-geraet{width:min(880px,100%);margin:0 auto}
  .ch-deckel{position:relative;background:#0b0f14;border-radius:22px 22px 6px 6px;padding:18px 18px 20px;box-shadow:0 0 0 1.5px #3a4654 inset}
  .ch-deckel::before{content:"";position:absolute;top:7px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#26313d}
  .ch-screen{height:auto;aspect-ratio:16/10;border-radius:6px}
  .ch-screen .ig-sb{display:none}
  .ch-fenster{flex:none;display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#F2F2F4;border-bottom:1px solid #E5E5EA}
  .ch-fenster i{width:11px;height:11px;border-radius:50%;background:#D7D7DC}
  .ch-fenster span{flex:1;text-align:center;margin-right:47px;font-size:12.5px;font-weight:500;color:#6E6E73}
  .ch-top{flex-direction:row;justify-content:center;gap:10px;padding:10px 0}
  .ch-top .ch-av{width:34px;height:34px}
  .ch-top small{display:none}
  .ch-verlauf{padding:16px max(24px,calc((100% - 620px) / 2)) 24px}
  .ch-b{font-size:15.5px}
  .ch-basis{position:relative;height:16px;margin:0 -7%;background:linear-gradient(#e6e8eb,#b7bbc2);border-radius:2px 2px 20px 20px;box-shadow:0 34px 60px -26px rgba(20,40,60,.5)}
  .ch-basis::before{content:"";position:absolute;left:50%;top:0;width:15%;height:6px;transform:translateX(-50%);background:linear-gradient(#bfc3c9,#d3d6db);border-radius:0 0 9px 9px}
}
@media(max-width:900px){
  .ch-geraet{position:relative;z-index:2;width:min(316px,88vw);border-radius:50px;padding:11px;background:#0b0f14;box-shadow:0 0 0 1.5px #3a4654 inset,0 40px 80px -30px rgba(20,40,60,.45)}
  .ch-basis{display:none}
}
/* v100: CORE-Logo neben dem Seitentitel, Kontaktformular mittig als Karte */
.ph-mit-logo .wrap{position:relative}
.ph-logo{display:block;width:120px;height:auto;margin-bottom:18px}
@media(min-width:901px){.ph-mit-logo .ph-logo{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:220px;margin:0}.ph-mit-logo h1,.ph-mit-logo p{max-width:calc(100% - 270px)}}
.kma-form{max-width:780px;margin:0 auto}
.kma-form .form{background:var(--bg2)}
.kma-form .form input,.kma-form .form textarea{background:#fff}
/* v101: Gutscheine mit festen Beträgen */
.gs-hero{position:relative;height:min(78vh,700px);min-height:520px;display:flex;align-items:center;color:#fff;overflow:hidden}
.gs-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.gs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,22,.15),rgba(11,17,22,.5))}
.gs-hero .wrap{position:relative;z-index:2;width:100%;text-align:center;padding-bottom:110px}
.gs-hero .eyebrow{color:#fff;opacity:.85}
.gs-hero h1{font-size:clamp(38px,6vw,74px);letter-spacing:-.04em;line-height:1.02;max-width:11em;margin:8px auto 16px;color:#fff}
.gs-hero p{font-size:clamp(16px,1.5vw,20px);max-width:30rem;margin:0 auto;opacity:.92}
.gs-wahl{padding:0 0 70px}
.gs-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-120px;position:relative;z-index:3}
.gs-k{background:#fff;border-radius:var(--rl);padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:0 30px 60px -36px rgba(11,17,22,.45);border:1px solid var(--line2);color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gs-k:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgba(11,17,22,.5)}
.gs-k:hover .btn{background:#00566B}
.gs-l{font-size:12.5px;font-weight:600;color:var(--accent-d)}
.gs-k b{font-size:clamp(52px,5.4vw,72px);letter-spacing:-.05em;line-height:1;margin:14px 0 10px}
.gs-k b i{font-style:normal;font-size:.42em;margin-left:4px;color:var(--ink3);letter-spacing:0}
.gs-f{color:var(--ink2);font-size:15px;margin-bottom:20px}
.gs-k .btn{margin-top:auto;align-self:flex-start}
.gs-kurs{text-align:center;margin-top:28px}
.gs-kurs a{color:var(--ink2);font-weight:500}.gs-kurs a:hover{color:var(--accent-d)}
.gs-kurs em{font-style:normal;display:inline-block;transition:transform .3s}.gs-kurs a:hover em{transform:translateX(4px)}
.gs-hinweis{text-align:center;font-size:13px;color:var(--ink3);margin-top:8px}
.gs-band{padding:20px 0 90px;overflow:hidden}
.gs-band h2{max-width:16em;margin:0 auto 34px;text-align:center;text-wrap:balance}
.gs-lauf>div{display:flex;gap:16px;width:max-content;animation:gslauf 70s linear infinite}
.gs-lauf img{height:clamp(220px,26vw,340px);width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
@keyframes gslauf{to{transform:translateX(calc(-50% - 8px))}}
@media(prefers-reduced-motion:reduce){.gs-lauf>div{animation:none}}
@media(max-width:900px){.gs-karten{grid-template-columns:1fr 1fr;margin-top:-90px}.gs-hero .wrap{padding-bottom:80px}}
@media(max-width:420px){.gs-k{padding:20px 18px}.gs-f{font-size:14px}}
/* v102: Glas-Knöpfe im Hero (beide gleich), Saison-Hinweis an den unteren Rand */
.hero-cta .btn-glass{margin-left:0;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.08),0 10px 30px -14px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero-cta .btn-glass:hover{background:rgba(255,255,255,.28);color:#fff;border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -14px rgba(0,0,0,.5)}
.hero-c{padding-bottom:112px}
.hero-st{position:absolute;left:0;right:0;bottom:26px;margin-top:0}
@media(max-width:640px){.hero-c{padding-bottom:92px}.hero-st{bottom:18px;margin-top:0}}
.hero-cta .btn-glass{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 55%,rgba(255,255,255,.18))}
.hero-cta .btn-glass:hover{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.18) 55%,rgba(255,255,255,.28))}
.hero-st{padding:0 24px}
/* v102: Hover der Hero-Knöpfe: Licht folgt der Maus, Knopf hebt sich, Pfeil gleitet rein (nur mit Maus) */
.hero-cta .btn-glass{position:relative;overflow:hidden;isolation:isolate}
.hero-cta .btn-glass span{position:relative;z-index:1;display:inline-block;transition:transform .45s var(--ease)}
.hero-cta .btn-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .45s var(--ease)}
.hero-cta .btn-glass::after{content:"→";position:absolute;right:24px;top:50%;z-index:1;font-weight:600;opacity:0;transform:translate(-10px,-50%);transition:opacity .45s var(--ease),transform .45s var(--ease)}
@media(hover:hover) and (pointer:fine){
 .hero-cta .btn-glass{transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease)}
 .hero-cta .btn-glass:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -16px rgba(0,0,0,.55),0 0 0 4px rgba(255,255,255,.08)}
 .hero-cta .btn-glass:hover::before{opacity:1}
 .hero-cta .btn-glass:hover span{transform:translateX(-12px)}
 .hero-cta .btn-glass:hover::after{opacity:1;transform:translate(0,-50%)}
 .hero-cta .btn-glass:active{transform:translateY(-1px) scale(.98)}
}
.hero-cta .btn-glass:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hero-cta .btn-glass,.hero-cta .btn-glass span,.hero-cta .btn-glass::after{transition:none}.hero-cta .btn-glass:hover{transform:none}}
/* v104 (Nils): Strandbar-Block auf der Startseite als Collage (Mockup B) */
.bar-b{padding:110px 0;background:var(--bg2)}
.bar-b-g{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.bar-b h2{margin-top:10px;max-width:14ch}
.bar-b .sub{margin-top:16px;margin-left:0}
.bar-chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.bar-chips li{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-weight:500;font-size:15px}
.bar-station{font-size:14px;color:var(--ink3);margin:16px 0 0}
.bar-b-tx .btn{margin-top:26px}
.bar-b-col{position:relative;padding:0 0 70px}
.bar-b-gross{display:block;width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:var(--rl);box-shadow:0 40px 80px -50px rgba(11,17,22,.55)}
.bar-b-klein{position:absolute;left:-48px;bottom:0;width:52%;aspect-ratio:16/10;overflow:hidden;border-radius:22px;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(11,17,22,.6);background:#fff}
/* v106: neues Foto (Gäste im Sonnenuntergang) — normaler Ausschnitt, kein Zoom mehr nötig */
.bar-b-klein img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media(max-width:900px){
 .bar-b{padding:72px 0}
 .bar-b-g{grid-template-columns:1fr;gap:36px}
 .bar-b-col{order:-1;padding-bottom:50px}
 .bar-b-klein{left:auto;right:-8px;width:50%}
}
/* v105 (Nils, Mockup 4): Hero mit Tiefe. Das Startfoto bleibt unter der Kopfzeile stehen, zoomt beim Scrollen langsam
   und wird dunkler; der nächste Abschnitt schiebt sich mit runden Ecken darüber. Ohne Bibliothek: sticky + main.js. */
.hero{position:sticky;top:74px}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:#0B1116;opacity:var(--dunkel,0);pointer-events:none}
.hero~*{position:relative;z-index:1}
.hero+.statement{background:#fff;border-radius:32px 32px 0 0;box-shadow:0 -30px 60px -30px rgba(11,17,22,.4)}
.hero~section:not(.grey):not(.bar-b):not(.ig):not(.ch-sec):not(.k-zeile-sec){background-color:#fff}
/* v111: Verweiszeile auf Themen- und Sportseiten */
.thema-links{padding:34px 0}
.thema-links p{color:var(--ink2);font-size:16px}
.thema-links a{color:var(--accent-d);font-weight:600;white-space:nowrap}
.thema-links a em{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.thema-links a:hover em{transform:translateX(4px)}