:root{
  --bb-ink-50:#F7F7F8;--bb-ink-100:#F1F1F3;--bb-ink-200:#E5E5E9;--bb-ink-300:#D3D3D9;--bb-ink-500:#7A7A87;--bb-ink-800:#232329;--bb-ink-950:#0B0B0F;
  --bb-violet-200:#DFCEFF;--bb-violet-700:#6E3EDC;--bb-violet-800:#512BA6;
  --text-muted:var(--bb-ink-500);--text-accent:var(--bb-violet-700);--text-link-hover:var(--bb-violet-800);
  --font-sans:"Geist","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"neulis-neue","Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  --glass-light:rgba(255,255,255,.72);
  --shadow-sm:0 1px 2px rgba(11,11,15,.06),0 0 0 1px rgba(11,11,15,.04);
  --scrim-bottom:linear-gradient(to top,rgba(11,11,15,.72) 0%,rgba(11,11,15,.35) 38%,rgba(11,11,15,0) 78%);
  --focus-ring:0 0 0 3px rgba(138,92,246,.35);
  --ease:cubic-bezier(.4,0,.2,1);
  --transition-control:color 160ms var(--ease),background-color 160ms var(--ease),border-color 160ms var(--ease),opacity 160ms var(--ease),transform 160ms var(--ease);
  --gutter:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--bb-ink-950);font-family:var(--font-sans);font-size:17px;line-height:1.5;letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;color:var(--bb-ink-950);font-family:var(--font-display);font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--bb-ink-950);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
button{font:inherit;letter-spacing:inherit}
::selection{background:var(--bb-violet-200);color:var(--bb-ink-950)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{min-height:100vh;display:flex;flex-direction:column}

/* Kopfleiste */
.hdr{position:fixed;top:16px;left:0;right:0;z-index:20;padding:0 clamp(12px,3vw,40px);pointer-events:none}
.hdr-bar{max-width:1240px;margin:0 auto;padding:10px 10px 10px 12px;border-radius:999px;background:var(--glass-light);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--bb-ink-200);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;pointer-events:auto}
a.brand{display:flex;align-items:center;gap:12px;padding-right:8px;text-decoration:none}
a.brand:hover{color:var(--bb-ink-950);text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--bb-ink-200)}
.brand span{font-family:var(--font-display);font-size:17px;letter-spacing:-0.02em;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:11px 18px;border-radius:999px;font-size:14px;color:var(--bb-ink-950);transition:background 160ms var(--ease)}
.nav a:hover{background:var(--bb-ink-100);color:var(--bb-ink-950);text-decoration:none}
.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--bb-ink-300);border-radius:999px;flex:none}
.lang a{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:500;color:var(--bb-ink-950)}
.lang a:hover{background:var(--bb-ink-100);color:var(--bb-ink-950);text-decoration:none}
.lang a[aria-current="true"]{background:var(--bb-ink-950);color:#fff}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;padding:0;border-radius:999px;border:1px solid var(--bb-ink-300);background:transparent;color:var(--bb-ink-950);align-items:center;justify-content:center;cursor:pointer;flex:none}
.menu-btn svg{width:20px;height:20px}
.menu-btn .i-close,.hdr.open .menu-btn .i-menu{display:none}
.hdr.open .menu-btn .i-close{display:block}

/* Unter 900 px passt die Leiste nicht mehr in eine Zeile: Menü klappt auf. */
@media (max-width:899px){
  .hdr-bar{gap:8px 12px}
  .brand{order:0;min-width:0}
  .brand span{overflow:hidden;text-overflow:ellipsis}
  .menu-btn{display:flex;order:1}
  .nav,.lang{display:none}
  .hdr.open .hdr-bar{border-radius:28px;background:rgba(255,255,255,.94)}
  .hdr.open .nav{display:flex;order:2;flex-direction:column;flex-basis:100%;margin:4px 0 0;gap:2px}
  .hdr.open .nav a{font-size:17px;padding:14px 16px;border-radius:16px}
  .hdr.open .lang{display:flex;order:3;margin:0 0 4px 4px}
}
@media (max-width:360px){.brand span{font-size:15px}}

/* Titelbild */
.hero{position:relative;height:clamp(520px,86vh,960px);overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.hero-inner{position:relative;width:100%;max-width:1680px;margin:0 auto;padding:0 var(--gutter) clamp(48px,7vw,104px);display:flex;flex-direction:column;gap:20px}
.hero h1{color:#fff;font-size:clamp(48px,7vw,112px);line-height:1;letter-spacing:-0.035em}
.hero p{color:#fff;font-size:21px;font-weight:300}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
a.pill{padding:12px 24px;border-radius:999px;font-size:15px;text-decoration:none}
a.pill:active,a.cta:active{transform:scale(.98)}
a.pill-light{background:#fff;color:var(--bb-ink-950);font-weight:500}
a.pill-light:hover{background:var(--bb-ink-100);color:var(--bb-ink-950);text-decoration:none}
a.pill-ghost{border:1px solid rgba(255,255,255,.6);color:#fff}
a.pill-ghost:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

/* Inhaltsabschnitte */
section{scroll-margin-top:96px}
.alt{background:var(--bb-ink-50)}
.wrap{max-width:1680px;margin:0 auto;padding:clamp(48px,6vw,96px) var(--gutter);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:960px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-accent)}
.h2{font-size:clamp(34px,3.6vw,56px);letter-spacing:-0.035em;line-height:1.06}
.split{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,120px);align-items:start}
/* Einspaltig so breit wie der Text, sonst füllt das Bild auf dem Tablet den ganzen Schirm. */
.media{max-width:680px}
@media (min-width:1080px){
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .media{max-width:none}
  .media.last{order:2}
}
.media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:28px;background:var(--bb-ink-100)}
.copy{display:flex;flex-direction:column;gap:20px;max-width:680px}
.copy h3{font-size:24px;letter-spacing:-0.02em;line-height:1.25;text-wrap:pretty}
.copy h3.sub{margin-top:12px}
.copy p{font-size:17px;line-height:1.65;color:var(--text-muted)}
.copy strong,.plist strong{font-weight:500;color:var(--bb-ink-950)}
a.cta{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:var(--bb-ink-950);color:#fff;font-size:15px;font-weight:500;text-decoration:none;transition:background 160ms var(--ease)}
a.cta:hover{background:var(--bb-ink-800);color:#fff;text-decoration:none}
.cta svg{width:16px;height:16px;flex:none}
.plist{display:flex;flex-direction:column;border-top:1px solid var(--bb-ink-200);font-variant-numeric:tabular-nums}
.plist div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--bb-ink-200);font-size:17px}

/* Preise */
.prices{max-width:1680px;width:100%;margin:0 auto;padding:clamp(48px,6vw,96px) var(--gutter);display:flex;flex-direction:column;gap:40px}
.prices .sec-head{gap:12px;max-width:none}
.prices .h2{font-size:clamp(32px,4vw,56px);line-height:1.04}
.prices-body{display:flex;flex-direction:column;gap:28px}
.price-controls{display:flex;flex-wrap:wrap;gap:12px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:999px;background:var(--bb-ink-50);border:1px solid var(--bb-ink-200);align-self:flex-start}
.tabs button{padding:12px 24px;border-radius:999px;border:0;font-size:15px;font-weight:500;cursor:pointer;background:transparent;color:var(--bb-ink-950);transition:background 160ms var(--ease),color 160ms var(--ease)}
.tabs button[aria-selected="true"]{background:var(--bb-ink-950);color:#fff}
.ptable{overflow-x:auto;border-top:1px solid var(--bb-ink-950)}
.ptable-inner{min-width:1076px;font-variant-numeric:tabular-nums}
.prow{display:grid;grid-template-columns:minmax(240px,2fr) repeat(11,minmax(76px,1fr));align-items:center;border-bottom:1px solid var(--bb-ink-200)}
.prow.head{border-bottom-color:var(--bb-ink-950)}
.prow:not(.head):hover{background:var(--bb-ink-50)}
.prow.head>div{padding:18px 12px;font-size:15px;font-weight:500;text-align:right;white-space:nowrap}
.prow.head>div:first-child{padding:20px 24px 20px 0;text-align:left;border-right:1px solid var(--bb-ink-200)}
.pname{padding:20px 24px 20px 0;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500;border-right:1px solid var(--bb-ink-200);align-self:stretch}
.pname{flex-wrap:wrap;row-gap:2px}
.psize{flex-basis:100%;font-size:14px;color:var(--text-muted);font-weight:400;white-space:nowrap}
.pcell{padding:18px 12px;font-size:16px;white-space:nowrap;text-align:right;color:var(--bb-ink-800)}
/* Paketspalte bleibt beim seitlichen Scrollen stehen. */
.pname,.prow.head>div:first-child{position:sticky;left:0;z-index:1;background:#fff}
.prow:not(.head):hover .pname{background:var(--bb-ink-50)}
@media (max-width:699px){
  .ptable-inner{min-width:0;width:max-content}
  .prow{grid-template-columns:156px repeat(11,72px)}
  .pname{padding:16px 12px 16px 0;flex-wrap:wrap;gap:4px 8px;font-size:15px}
  .prow.head>div,.pcell{padding:16px 10px;font-size:15px}
  .prow.head>div:first-child{padding:16px 12px 16px 0}
}
.stars{display:flex;gap:2px;color:var(--text-accent)}
.stars svg{display:block;flex:none;width:13px;height:13px}
.legend{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:13px;color:var(--text-muted);align-items:center}
.legend>span{display:flex;align-items:center;gap:6px}
.legend .stars svg{width:12px;height:12px}

/* Marken */
.brands-wrap{max-width:1680px;margin:0 auto;padding:clamp(64px,7vw,112px) var(--gutter);display:flex;flex-direction:column;gap:clamp(40px,4vw,64px)}
.brands-wrap .eyebrow{color:var(--text-muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:bb-marquee 60s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-track>div{flex:0 0 auto;padding:0 clamp(32px,4vw,64px);display:flex;align-items:center}
.marquee-track img{height:88px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(1.18) contrast(3);mix-blend-mode:multiply;opacity:.9;transition:opacity 240ms var(--ease)}
.marquee-track img:hover{opacity:1}
@keyframes bb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Fußzeile */
footer{border-top:1px solid var(--bb-ink-200)}
.ft-grid{max-width:1680px;margin:0 auto;padding:64px var(--gutter) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px;font-size:15px}
.ft-col{display:flex;flex-direction:column;gap:8px}
.ft-col.brandcol{gap:12px}
.ft-col.brandcol img{height:48px;width:auto;align-self:flex-start}
.ft-col strong{font-weight:500}
.muted{color:var(--text-muted)}
.ft-hours div{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.ft-hours div span:last-child{color:var(--text-muted);text-align:right}
a.insta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.insta svg{width:18px;height:18px;flex:none}
.ft-legal{max-width:1680px;margin:0 auto;padding:20px var(--gutter) 40px;display:flex;flex-wrap:wrap;gap:20px;font-size:13px;color:var(--text-muted);border-top:1px solid var(--bb-ink-200)}
.ft-legal .powered{margin-left:auto}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

[hidden]{display:none!important}

/* Rechtsseiten (Texte 1:1 aus dem Portal, siehe tools/build_legal.py) */
.legal{padding:clamp(128px,14vw,168px) var(--gutter) clamp(64px,8vw,112px)}
.legal-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
a.back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--text-muted)}
a.back:hover{color:var(--bb-ink-950);text-decoration:none}
.back svg{width:16px;height:16px;flex:none}
.legal-article{display:flex;flex-direction:column;gap:28px}
.legal-title{font-size:clamp(40px,5vw,64px);letter-spacing:-0.035em;line-height:1.04}
.legal-note{padding:14px 18px;border-radius:16px;background:var(--bb-ink-50);border:1px solid var(--bb-ink-200);font-size:15px;color:var(--bb-ink-800)}
.legal-note a{font-weight:500;text-decoration:underline}
.legal-body{display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.65;color:var(--bb-ink-800);overflow-wrap:anywhere}
.legal-body h2{font-size:24px;letter-spacing:-0.02em;line-height:1.25;margin-top:20px;overflow-wrap:normal}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:19px;letter-spacing:-0.015em;line-height:1.3;margin-top:8px}
.legal-body p,.legal-body ul,.legal-body ol{margin:0}
.legal-body ul,.legal-body ol{padding-left:1.25em;display:flex;flex-direction:column;gap:6px}
.legal-body strong,.legal-body b{font-weight:500;color:var(--bb-ink-950)}
.legal-body a{text-decoration:underline}