:root{color-scheme:dark;--bg:#0b0d12;--card:#121626;--muted:#a8b0c2;--text:#eef1f7;--line:rgba(255,255,255,.10);--shadow:0 20px 50px rgba(0,0,0,.35);--r:18px;--max:1100px;--accent:#7dd3fc;--grad1:rgba(125,211,252,.18);--grad2:rgba(167,243,208,.12);--btnbg:rgba(125,211,252,.14);--cardbg:rgba(255,255,255,.04);--offerbg:rgba(255,255,255,.02);}
/* Keep the site consistently dark even if the device prefers a light color scheme. */
@media (prefers-color-scheme: light){:root{color-scheme:dark;--bg:#0b0d12;--card:#121626;--muted:#a8b0c2;--text:#eef1f7;--line:rgba(255,255,255,.10);--shadow:0 20px 50px rgba(0,0,0,.35);}}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(1200px 600px at 15% 0%, var(--grad1), transparent 60%),radial-gradient(900px 520px at 85% 10%, var(--grad2), transparent 55%),var(--bg);color:var(--text);line-height:1.55}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:linear-gradient(to bottom, rgba(11,13,18,.75), rgba(11,13,18,.35));border-bottom:1px solid var(--line)}
@media (prefers-color-scheme: light){.header{background:linear-gradient(to bottom, rgba(11,13,18,.75), rgba(11,13,18,.35));}}

/* Slightly more horizontal breathing room for sticky header / footer */
.header .container{padding-left:28px;padding-right:28px}
.site-footer .container{padding-left:28px;padding-right:28px}

/* Header (Variant A: centered brand lockup) */
.headerbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0}
.brandlockup{display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;width:auto}
.brandlogo{height:52px;width:auto;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.brandcopy{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;line-height:1.2;text-align:center}
.brandcopy > div{display:inline}
.brandtitle{font-weight:800;letter-spacing:.2px;color:var(--text);font-size:18px}
.brandtag{font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-size:12px}
.brandsince{color:var(--muted);font-size:12px}

/* Prefer a single row on larger screens */
.brandtag::before{content:"- "; opacity:.7}
.brandsince::before{content:"- "; opacity:.7}

/* Compact: stack into 2–3 lines when space is tight */
@media (max-width: 620px){
  .headerbar{padding:10px 0}
  .brandlogo{height:40px}
  .brandcopy{flex-direction:column;gap:2px;line-height:1.05}
  .brandtag::before,.brandsince::before{content:""}
  .brandtag{letter-spacing:.18em}
  .brandtitle{font-size:15px}
  .brandtag,.brandsince{font-size:11px}
}

/* Mobile nav (currently unused in markup, kept for compatibility) */
@media (max-width: 620px){
  .navtoggle{display:inline-flex}
  .navlinks{display:none;position:absolute;top:72px;left:0;right:0;padding:10px;background:rgba(11,13,18,.96);border:1px solid var(--line);border-radius:16px;flex-direction:column;align-items:stretch;gap:6px}
  .navlinks a{width:100%}
  .navlinks.open{display:flex}
}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch;margin-top:18px}
@media (max-width:760px){.hero{grid-template-columns:1fr}}

.header-cta{white-space:nowrap}

.lane-strip{width:100%;height:220px;border-radius:16px;overflow:hidden;margin:14px 0 6px 0;background:#0b0f14}
.lane-strip img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
@media (max-width:760px){.lane-strip{height:120px}}

.gallery-row .media{border-radius:14px;overflow:hidden}
.gallery-row img{width:100%;height:160px;object-fit:cover;object-position:center;display:block}
@media (max-width:760px){.gallery-row img{height:140px}}
.card{background:var(--cardbg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
@media (prefers-color-scheme: light){.card{background:var(--cardbg)}}
.pad{padding:22px}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
h1{font-size:40px;line-height:1.15;margin:10px 0 10px}
@media (max-width:900px){h1{font-size:32px}}
.lead{color:var(--muted);font-size:18px;margin:0 0 14px}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);text-decoration:none;background:var(--btnbg)}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:rgba(255,255,255,.02)}
.grid{display:grid;gap:16px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols2,.grid.cols3{grid-template-columns:1fr}}
.section{margin-top:18px}
.section h2{margin:0 0 10px;font-size:22px}
.section p{margin:0 0 10px;color:var(--muted)}
.bullets{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.bullets li{margin:6px 0}


/* Extra info box below logo + lane (per target group) */
.info-extension .pad{padding:18px 22px}
.info-extension .intro{margin:0;color:var(--muted)}
.iconbullets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:900px){.iconbullets{grid-template-columns:1fr}}
.iconbullet{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
@media (prefers-color-scheme: light){.iconbullet{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}}
.ib-icon{flex:0 0 auto;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--line)}
@media (prefers-color-scheme: light){.ib-icon{background:rgba(255,255,255,.04)}}
.ib-icon svg{width:18px;height:18px;display:block}
.ib-head{font-weight:800;font-size:14px;line-height:1.2;margin:0;color:var(--text)}
.ib-text{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.media{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
/* Ensure images sit flush in their box (no inline-img baseline gap / "Rand") */
.media img{width:100%;height:100%;object-fit:cover;display:block;opacity:1}
.media.is-logo img{object-fit:contain;opacity:1;padding:22px}

.card--logo{background:#000;padding-top:0}
.card--logo .media{display:flex;align-items:center;justify-content:center}
.card--logo .media{background:transparent}
.card--logo .media.is-logo img{padding:0;opacity:1;max-width:92%;max-height:92%;margin:0 auto;display:block}

.card--lane .media img{object-position:center 46%}
.hero-media{margin-top:14px}

body.theme-sportkegeln{--grad1:rgba(96,165,250,.22);--grad2:rgba(56,189,248,.10);--btnbg:rgba(96,165,250,.16);--cardbg:rgba(96,165,250,.06);--offerbg:rgba(96,165,250,.04)}
body.theme-freunde{--grad1:rgba(192,132,252,.22);--grad2:rgba(232,121,249,.10);--btnbg:rgba(192,132,252,.16);--cardbg:rgba(192,132,252,.06);--offerbg:rgba(192,132,252,.04)}
body.theme-firmenfeier{--grad1:rgba(255,255,255,.12);--grad2:rgba(148,163,184,.10);--btnbg:rgba(226,232,240,.12);--cardbg:rgba(255,255,255,.06);--offerbg:rgba(255,255,255,.04)}
body.theme-geburtstag-familie{--grad1:rgba(251,146,60,.22);--grad2:rgba(253,186,116,.10);--btnbg:rgba(251,146,60,.16);--cardbg:rgba(251,146,60,.06);--offerbg:rgba(251,146,60,.04)}
.badgebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.02)}
.offer{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--offerbg)}
.offer h3{margin:0;font-size:18px}
.offer .meta{color:var(--muted);font-size:14px}
.offer .cta{margin-top:auto}

/* Footer (clean grid + optional dev links) */
.site-footer{margin-top:26px;border-top:1px solid var(--line);padding:22px 0 30px;color:var(--muted)}
.site-footer .small{font-size:13px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}

.devlinks{padding:10px 0 14px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px;opacity:.75}
.devlinks .label{opacity:.8;margin-right:6px}
@media (max-width:620px){
  /* Keep the internal page navigation visible on small screens (requested). */
  .devlinks{display:block;font-size:12px;line-height:1.4}
  .devlinks a{display:inline-block;padding:3px 0}
}

.footergrid{display:grid;grid-template-columns:1.4fr .8fr .6fr;gap:18px;align-items:start}
@media (max-width:900px){
  .footergrid{grid-template-columns:1fr;gap:14px}
}

/* Make right-side footer columns feel more balanced / symmetric */
.footergrid .footcol:nth-child(2),
.footergrid .footcol:nth-child(3){
  justify-self:end;
  text-align:right;
}
@media (max-width:900px){
  .footergrid .footcol:nth-child(2),
  .footergrid .footcol:nth-child(3){
    justify-self:start;
    text-align:left;
  }
}

/* Align link rows to the right on wide screens */
@media (min-width:901px){
  .footergrid .footcol:nth-child(2) .footlinks,
  .footergrid .footcol:nth-child(2) .langrow,
  .footergrid .footcol:nth-child(3) .social{justify-content:flex-end}
}

.foottitle{font-weight:800;color:var(--text);margin-bottom:6px}
.dlg{display:flex;align-items:center;gap:10px;margin-top:10px}
.dlg img{height:26px;width:auto;opacity:.9}

.footlinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footlinks .sep{opacity:.6}

.langrow{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flag{font-size:18px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footergrid .footcol:nth-child(2) .footlinks,
.footergrid .footcol:nth-child(2) .langrow,
.footergrid .footcol:nth-child(3) .social{justify-content:flex-end}
@media (max-width:900px){
  .footergrid .footcol:nth-child(2) .footlinks,
  .footergrid .footcol:nth-child(2) .langrow,
  .footergrid .footcol:nth-child(3) .social{justify-content:flex-start}
}
.social .icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.social .icon:hover{background:rgba(255,255,255,.06)}

.legal pre{white-space:pre-wrap;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--muted);margin:0}