@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#14110f; --paper:#f3e6d2; --muted:#6e6258; --stamp:#c81e5c; --canary:#efd56a;
  --carbon:#2a2420; --line:rgba(20,17,15,.14); --thermal:#fff8ec;
  --display:'Fraunces',Georgia,serif; --body:'Manrope',system-ui,sans-serif;
  --pad:clamp(1rem,4vw,1.35rem);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.62;
  overflow-x:clip;-webkit-text-size-adjust:100%;
  background-image:
    radial-gradient(ellipse 50% 35% at 10% 0%,rgba(200,30,92,.12),transparent 55%),
    radial-gradient(ellipse 40% 30% at 90% 8%,rgba(239,213,106,.2),transparent 50%),
    repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(20,17,15,.03) 28px)}
img,video{max-width:100%;height:auto;display:block}
a{color:#9b1848} a:hover{color:var(--ink)}
.wrap{width:min(980px,100%);margin:0 auto;padding-inline:var(--pad)}

/* —— header —— */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:rgba(243,230,210,.94);border-bottom:1px dashed var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;gap:.75rem;min-height:3rem}
.brand{font-family:var(--display);font-size:clamp(1.25rem,4vw,1.45rem);font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.02em;flex:0 0 auto}
.brand em{font-style:normal;color:var(--stamp)}
.nav{display:flex;gap:.55rem;align-items:center;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.nav a{color:var(--muted);text-decoration:none;font-size:.84rem;font-weight:650;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.btn,.go,.fab{background:linear-gradient(135deg,var(--stamp),#e85a8a);color:#fff!important;
  font-weight:800;text-decoration:none;border-radius:.35rem;box-shadow:0 8px 20px rgba(200,30,92,.28)}
.btn{padding:.48rem .85rem;font-size:.82rem;flex:0 0 auto}

/* —— hero: full-bleed visual + copy —— */
.hero{padding:0 0 1rem}
.hero-visual{position:relative;width:100%;overflow:hidden;
  background:#1a1216;border-bottom:1px solid rgba(20,17,15,.12)}
.hero-visual img{width:100%;height:clamp(220px,48vw,460px);object-fit:cover;object-position:center center}
.hero-copy{padding:1.35rem 0 .35rem}
.eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);font-weight:800;margin:0 0 .45rem}
.hero h1{font-family:var(--display);font-size:clamp(1.55rem,6.2vw,2.75rem);line-height:1.1;margin:0 0 .55rem;letter-spacing:-.02em;max-width:18ch}
.lead{font-size:clamp(.95rem,2.8vw,1.05rem);color:var(--carbon);margin:0 0 .9rem;max-width:36rem}
.cta-row{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}
.go{padding:.72rem 1.15rem;font-size:.92rem;display:inline-flex;align-items:center}
.ghost{color:var(--muted);font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(20,17,15,.3);padding:.2rem 0}
.disc{font-size:.78rem;color:var(--muted);margin:.7rem 0 0;line-height:1.45}

/* legacy class kept for safety */
.hero-grid{display:block}
.hero-shot{display:none}

/* —— bon rail —— */
.bons{padding:.15rem 0 1.1rem;overflow:hidden}
.bon-track{display:flex;gap:.5rem;overflow-x:auto;padding:.35rem var(--pad) .95rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.bon-track::-webkit-scrollbar{display:none;height:0}
.bon{flex:0 0 6.6rem;scroll-snap-align:start;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#f6e7cf);border:1px solid rgba(20,17,15,.18);
  border-radius:.2rem;padding:.5rem .45rem .65rem;position:relative;
  box-shadow:0 6px 0 rgba(20,17,15,.05);min-height:5.2rem}
.bon:before{content:"";position:absolute;left:0;right:0;top:-5px;height:9px;
  background:radial-gradient(circle at 7px 5px,transparent 4px,var(--paper) 5px) left/12px 9px repeat-x}
.bon .code{font-size:.58rem;font-weight:800;letter-spacing:.12em;color:var(--stamp)}
.bon .lab{display:block;margin-top:.35rem;font-family:var(--display);font-size:.9rem;font-weight:700;line-height:1.15}
.bon.on,.bon:hover{transform:translateY(-3px);outline:2px solid var(--stamp)}
.note{margin:0 0 1rem;padding:.75rem .9rem;border-left:3px solid var(--stamp);
  background:rgba(239,213,106,.28);font-size:.95rem}

/* —— content —— */
.content{padding:0 0 calc(5.2rem + var(--safe-b))}
.prose{background:rgba(255,250,240,.78);border:1px solid var(--line);border-radius:.75rem;padding:1.15rem 1.15rem 1.4rem}
.prose h2{font-family:var(--display);font-size:clamp(1.2rem,4vw,1.4rem);margin:1.2rem 0 .45rem}
.prose h3{font-size:1.02rem;margin:1rem 0 .3rem}
.prose p,.prose li{color:var(--carbon)}
.prose ul,.prose ol{padding-left:1.1rem}
.prose .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.prose table{width:100%;min-width:280px;border-collapse:collapse;margin:0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:.45rem .55rem;text-align:left;background:#fffdf8;vertical-align:top}
.prose th{background:rgba(239,213,106,.35)}
.prose blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--stamp);
  background:rgba(200,30,92,.07);font-family:var(--display);font-size:1.08rem}
.prose details{border:1px dashed var(--line);border-radius:.4rem;padding:.55rem .7rem;margin:.5rem 0;background:#fffdf8}
.prose summary{cursor:pointer;font-weight:700;line-height:1.35}
.shot{margin:1.15rem 0 0;border-radius:.45rem;overflow:hidden;border:1px solid rgba(20,17,15,.14)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.shot figcaption{font-size:.76rem;color:var(--muted);padding:.4rem .6rem;background:rgba(255,248,236,.95)}

.foot{border-top:1px dashed var(--line);padding:1.2rem 0 calc(4.8rem + var(--safe-b));color:var(--muted);font-size:.82rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem .85rem;margin-bottom:.55rem}
.foot a{color:var(--muted);text-decoration:none;font-weight:600}

.fab{position:fixed;right:max(.75rem,var(--safe-r));bottom:max(.75rem,var(--safe-b));z-index:50;
  padding:.72rem .95rem;font-size:.88rem;display:inline-flex;flex-direction:column;line-height:1.05;
  max-width:calc(100vw - 1.5rem)}
.fab small{font-size:.6rem;opacity:.9;letter-spacing:.08em}

/* —— desktop side layout —— */
@media(min-width:900px){
  .hero{padding:1.6rem 0 1rem}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem;align-items:center}
  .hero-visual{display:none}
  .hero-shot{display:block;background:#1a1216;border:1px solid rgba(20,17,15,.18);
    border-radius:.35rem .9rem .35rem .35rem;overflow:hidden;
    box-shadow:8px 12px 0 rgba(239,213,106,.4)}
  .hero-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  .hero-copy{padding:0}
  .bons .bon-track{padding-inline:0}
  .wrap .bon-track, .bons{padding-inline:0}
  .bons{padding-left:0;padding-right:0}
  .bon-track{padding-left:0;padding-right:0;width:min(980px,100%);margin:0 auto}
}

/* —— mobile / tablet —— */
@media(max-width:899px){
  .nav a:not(.btn){display:none} /* brand + Starten only — no cramped links */
  .hero-visual{width:100vw;margin-left:calc(50% - 50vw)}
  .hero h1{max-width:none}
  .prose{padding:1rem .95rem 1.2rem;border-radius:.55rem}
  .cta-row{flex-direction:column;align-items:stretch;gap:.55rem}
  .cta-row .go{flex:1 1 auto;justify-content:center;text-align:center;width:100%}
  .cta-row .ghost{align-self:flex-start}
  .bon{flex-basis:6.2rem;min-height:4.9rem}
  .fab{padding:.65rem .85rem;font-size:.82rem}
  .top-inner{padding:.62rem 0}
}
@media(max-width:380px){
  .brand{font-size:1.15rem}
  .btn{padding:.42rem .7rem;font-size:.78rem}
  .hero-visual img{height:min(220px,52vw)}
}

.bons{position:relative}
.bons:after{content:"";pointer-events:none;position:absolute;top:0;right:0;bottom:.85rem;width:2.2rem;
  background:linear-gradient(90deg,transparent,var(--paper));display:none}
@media(max-width:899px){.bons:after{display:block}}