/* Vorschau Startseite 2026-10: gemeinsame Basis der fünf Entwürfe.
   Mobile first, Markenfarben aus docs/DESIGN_GUIDELINES.md, nur eigene Schriften. */
@font-face{font-family:"Bauhaus Bugler";src:url(../../../fonts/bauhaus-bugler-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Lexend;font-weight:300 700;font-display:swap;src:url(../../../fonts/lexend-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Lexend;font-weight:300 700;font-display:swap;src:url(../../../fonts/lexend-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
:root{
  --burgund:#7d0845;--burgund-dark:#4a0428;--deep:#2e1a4a;--amber:#ffb000;--orange:#c46a2a;--rose:#f3d5be;
  --creme:#fafaf8;--ink:#1a1a1a;--muted:#5b5560;
  --display:"Bauhaus Bugler",Lexend,system-ui,sans-serif;--sans:Lexend,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--creme);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}

/* Vorschau-Hinweis */
.pv-bar{position:relative;z-index:100;background:#fff3c4;color:#5a4300;font:500 12px/1.4 var(--sans);text-align:center;padding:7px 14px}
.pv-bar a{color:inherit}

/* Kopfzeile: Logo + kleiner Store-Link, sonst nichts (wie clubhouse/whatsapp) */
.pv-head{position:absolute;inset:auto 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-width:1200px;margin:0 auto}
.pv-logo{display:inline-flex;align-items:center;gap:0;font:700 30px/1 var(--display);text-decoration:none;color:var(--burgund)}
.pv-logo img{width:42px;height:42px;margin-right:10px}
@media (min-width:900px){.pv-logo{font-size:34px}.pv-logo img{width:48px;height:48px}}
.pv-logo span{color:var(--amber)}
.pv-logo.is-light{color:#fff}
.pv-head-link{font:600 15px/1 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* Der eine Knopf: erkennt iPhone oder Android, am Computer QR-Code + beide Badges */
.dl-smart{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:999px;font:600 17px/1 var(--sans);text-decoration:none;background:var(--ink);color:#fff;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dl-smart svg{width:20px;height:20px;flex:none}
.dl-smart:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.dl-smart:active{transform:scale(.97)}
.dl-smart--amber{background:var(--amber);color:var(--deep)}
.dl-smart--burgund{background:var(--burgund);color:#fff}
.dl-smart--light{background:#fff;color:var(--burgund)}
.dl-note{font-size:13px;opacity:.75;margin-top:12px}
.dl-desk{display:none;align-items:center;gap:18px}
.dl-desk .qr{width:104px;height:104px;background:#fff;border-radius:14px;padding:8px}
.dl-desk .badges{display:flex;flex-direction:column;gap:8px}
.dl-desk .badges img{height:44px;width:auto}
html.is-desk .dl-desk{display:flex}
html.is-desk .dl-smart[data-hide-desk]{display:none}

/* Eintritts-Animation per Klasse (IntersectionObserver in shared.js) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.12s}.rv[data-d="2"]{transition-delay:.24s}.rv[data-d="3"]{transition-delay:.36s}

/* Fußzeile, klein */
.pv-foot{padding:28px 20px 36px;text-align:center;font-size:13px;color:var(--muted)}
.pv-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:12px}
.pv-foot a{color:inherit}
.pv-foot p{margin:4px auto;max-width:520px}
.pv-foot.is-dark{color:rgba(255,255,255,.7)}

/* Körniges Papier über Verläufen, damit sie nicht nach Plastik aussehen */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}