/* ====== Schriften, lokal eingebunden ====== */
@font-face{font-family:"Bodoni Moda"; src:url("/assets/fonts/BodoniModa.woff2") format("woff2"), url("/assets/fonts/BodoniModa.ttf") format("truetype"); font-weight:400 900; font-style:normal; font-display:swap}
@font-face{font-family:"Bodoni Moda"; src:url("/assets/fonts/BodoniModa-Italic.woff2") format("woff2"), url("/assets/fonts/BodoniModa-Italic.ttf") format("truetype"); font-weight:400 900; font-style:italic; font-display:swap}
@font-face{font-family:"Schibsted Grotesk"; src:url("/assets/fonts/SchibstedGrotesk.woff2") format("woff2"), url("/assets/fonts/SchibstedGrotesk.ttf") format("truetype"); font-weight:400 900; font-style:normal; font-display:swap}

/* ====== Overbeeke Abzug · Tokens ====== */
:root{
  --paper:#eeede9; --paper-raised:#f7f6f3; --paper-deep:#e3e1db; --print:#fbfaf7;
  --ink:#17171b; --ink-soft:#3a3a3f; --muted:#6b6964; --line:#cfccc5; --line-strong:#17171b;
  --accent:#6e1f2a; --accent-strong:#561722; --accent-tint:#ead9d5;
  --on-ink:#eeede9; --on-accent:#f7f6f3; --focus:#6e1f2a; --success:#2f6b45; --error:#a3282b;
  --ph-1:#dbd7cf; --ph-2:#d0cbc2; --ph-3:#e4e0d8; --ph-4:#c8c2b7; --ph-ink:#5d5a54;
  --font-display:"Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-sans:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-print:0 1px 2px rgba(23,23,27,.08), 0 14px 30px rgba(23,23,27,.12);
  --shadow-print-lift:0 2px 4px rgba(23,23,27,.10), 0 24px 44px rgba(23,23,27,.18);
  --ease-out:cubic-bezier(.2,.7,.1,1); --ease-develop:cubic-bezier(.3,0,.1,1);
  --gutter:48px; --gap:24px; --section:152px;
  color-scheme:light;
}
@media (max-width:1023px){:root{--gutter:24px; --section:104px}}
@media (max-width:599px){:root{--gutter:16px; --gap:16px; --section:72px}}
.abend{
  --paper:#15151a; --paper-raised:#1e1e24; --paper-deep:#26262d;
  --ink:#eeede9; --ink-soft:#cfcdc8; --muted:#a09d97; --line:#34343b; --line-strong:#eeede9;
  --accent:#d98a93; --accent-strong:#e8a9b0; --accent-tint:#3a2328;
  --on-ink:#15151a; --on-accent:#15151a; --focus:#e8a9b0; --error:#f08a84; --success:#7bc596;
  --ph-1:#2a2a31; --ph-2:#302f37; --ph-ink:#a09d97;
  background:var(--paper); color:var(--ink); color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance; font-weight:500}
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.wrap{max-width:calc(1320px + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section) 0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ====== Typografie ====== */
.kicker{font:600 11px/1.3 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.d-xl{font-family:var(--font-display); font-size:clamp(44px, 6.4vw, 88px); line-height:.96; letter-spacing:-.02em}
.d-l{font-family:var(--font-display); font-size:clamp(36px, 4.8vw, 64px); line-height:1.0; letter-spacing:-.015em}
.d-m{font-family:var(--font-display); font-size:clamp(32px, 3.4vw, 44px); line-height:1.05; letter-spacing:-.01em}
.d-s{font-family:var(--font-display); font-size:clamp(24px, 2.2vw, 28px); line-height:1.15}
.d-xl em, .d-l em, .d-m em{font-style:italic; color:var(--accent)}
.lead{font-size:clamp(17px, 1.5vw, 19px); line-height:1.55; color:var(--ink-soft); max-width:46ch}
.body{color:var(--ink-soft); max-width:64ch}
.caption{font-size:12px; line-height:1.4; letter-spacing:.01em; color:var(--muted); font-variant-numeric:tabular-nums}
.head{display:grid; gap:24px; max-width:780px}
.head--wide{max-width:980px}

/* ====== Buttons und Links ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; background:var(--ink); color:var(--on-ink); border:1px solid var(--ink); font:600 14px/1.2 var(--font-sans); letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out)}
.btn:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn:active{background:var(--accent-strong); border-color:var(--accent-strong)}
.btn--outline{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--outline:hover{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.link{display:inline-flex; align-items:center; gap:8px; min-height:44px; font:500 14px/1.2 var(--font-sans); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; transition:color .18s var(--ease-out)}
.link span{display:inline-block; transition:transform .18s var(--ease-out)}
.link:hover{color:var(--accent)} .link:hover span{transform:translateX(4px)}

/* ====== Fotoplatzhalter ====== */
.ph{position:relative; background:var(--ph, var(--ph-1)); color:var(--ph-ink); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; font-size:13px; line-height:1.45; aspect-ratio:var(--r, 4 / 5); max-width:100%}
.ph::before{content:"FOTO " attr(data-no); position:absolute; top:16px; left:18px; font:600 10px/1 var(--font-sans); letter-spacing:.22em; opacity:.85}
.ph::after{content:""; position:absolute; inset:8px; border:1px dashed currentColor; opacity:.22; pointer-events:none}
.ph span{position:relative; max-width:34ch}
.t2{--ph:var(--ph-2)} .t3{--ph:var(--ph-3)} .t4{--ph:var(--ph-4)}
.dev{transition:filter 1.6s var(--ease-develop)}
.dev.pre{filter:brightness(1.3) saturate(0) contrast(.85)}
.rv{transition:transform .9s var(--ease-out)}
.rv.pre{transform:translateY(22px)}
figure.photo{display:grid; gap:8px}
figure.photo figcaption{display:flex; justify-content:space-between; gap:16px}

/* ====== Ausdrucke ====== */
.print{display:inline-grid; gap:8px; background:var(--print); padding:10px 10px 12px; box-shadow:var(--shadow-print); transform:rotate(var(--tilt, 0deg)) translateY(var(--py, 0px)); transition:box-shadow .32s var(--ease-out)}
.print:hover{box-shadow:var(--shadow-print-lift)}
.print .ph{width:var(--w, 150px); --r:2 / 3; padding:8px; font-size:10.5px; color:#55534e; --ph:#dcd9d2}
.print .ph::before{font-size:8px; top:8px; left:8px; color:#55534e}
.print .ph::after{inset:4px; border-color:#55534e}
.print--strip .ph{--r:4 / 3; width:var(--w, 96px); font-size:9px; padding:5px}
.print--strip .ph::before{display:none}
.print__foot{font:500 12px/1.2 var(--font-display); color:#17171b; text-align:center; letter-spacing:.02em}
.print__foot small{display:block; font:400 8px/1.5 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; color:#6b6964}

/* ====== Navigation ====== */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .32s var(--ease-out)}
.nav__in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:18px; transition:padding .32s var(--ease-out)}
.nav.compact{border-bottom-color:var(--line)}
.nav.compact .nav__in{padding-block:10px}
.nav__side{display:flex; align-items:center; gap:28px}
.nav__side--end{justify-content:flex-end}
.nav__link{font:500 13px/1.2 var(--font-sans); letter-spacing:.02em; text-decoration:none; padding-block:8px; background:linear-gradient(var(--ink),var(--ink)) left bottom/0 1px no-repeat; transition:background-size .32s var(--ease-out)}
.nav__link:hover{background-size:100% 1px}
.mark{display:grid; justify-items:center; text-decoration:none}
.mark b{font:500 24px/1 var(--font-display); letter-spacing:.01em; transition:font-size .32s var(--ease-out)}
.mark small{font:600 8.5px/1.7 var(--font-sans); letter-spacing:.3em; text-transform:uppercase; max-height:16px; overflow:hidden; transition:max-height .32s var(--ease-out), opacity .32s}
.nav.compact .mark b{font-size:20px}
.nav.compact .mark small{max-height:0; opacity:0}
.nav__cta{min-height:40px; padding:0 14px; font-size:13px}
.nav:not(.compact) .nav__cta{background:transparent; color:var(--ink)}
.nav:not(.compact) .nav__cta:hover{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.nav__menu{display:none; min-height:48px; background:none; border:0; padding:0 2px; font:600 12px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); cursor:pointer}
@media (max-width:1023px){
  .nav__in{grid-template-columns:auto 1fr auto; padding-block:12px}
  .nav__side{display:none}
  .mark{justify-items:start}
  .nav__menu{display:inline-flex; align-items:center; grid-column:3}
}
.menu{position:fixed; inset:0; z-index:60; background:var(--paper); padding:calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); display:grid; grid-template-rows:auto 1fr auto; overflow:auto}
.menu__top{display:flex; justify-content:space-between; align-items:center}
.menu nav{display:grid; align-content:center; gap:2px; padding-block:24px}
.menu nav a.menu__sub{font-size:clamp(22px, 6vw, 30px); padding-left:24px; color:var(--ink-soft)}
.menu nav a{font:500 clamp(34px, 9vw, 52px)/1.2 var(--font-display); text-decoration:none; padding-block:8px; border-bottom:1px solid var(--line)}
.menu nav a em{font-style:italic; color:var(--accent)}
.menu__meta{font-size:13px; line-height:1.6; color:var(--muted)}

/* ====== Hero ====== */
.hero{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:end; padding-top:56px}
.hero__text{grid-column:1 / span 7; display:grid; gap:28px; position:relative; z-index:2; padding-bottom:40px}
.hero h1{margin-right:-16%}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.06em}
.hero h1 .ln > span{display:block; animation:rise .9s var(--ease-out) both}
.hero h1 .ln:nth-child(2) > span{animation-delay:.09s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.18s}
@keyframes rise{from{transform:translateY(100%)} to{transform:none}}
.hero__media{grid-column:8 / span 5; position:relative}
.hero__media > .ph::before{content:"FOTO ODER VIDEO " attr(data-no)}
.hero__media .ph{animation:develop 1.6s var(--ease-develop) both}
@keyframes develop{from{filter:brightness(1.3) saturate(0) contrast(.85)} to{filter:none}}
.hero__print{position:absolute; left:-64px; bottom:56px; z-index:3; --tilt:-4deg}
.datecheck{display:flex; flex-wrap:wrap; align-items:end; gap:12px 16px; max-width:560px}
.datecheck label{display:grid; gap:6px; flex:1 1 200px}
.datecheck label span{font:600 13px/1.2 var(--font-sans)}
.datecheck input{min-height:48px; padding:0 14px; background:var(--paper-raised); border:1px solid var(--line); border-radius:2px; font:400 16px/1.3 var(--font-sans); color:var(--ink); width:100%}
.datecheck input:focus{outline:none; border-color:var(--line-strong); box-shadow:inset 0 -2px 0 var(--ink)}
.hero__more{display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px}
.variant{display:inline-flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); border:1px dashed var(--line); padding:6px 6px 6px 12px}
.variant button{font:600 12px/1 var(--font-sans); border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); padding:7px 10px; cursor:pointer}
@media (max-width:1023px){
  .hero{padding-top:28px}
  .hero__text{grid-column:1 / -1; padding-bottom:36px}
  .hero h1{margin-right:0}
  .hero__media{grid-column:1 / -1}
  .hero__print{left:auto; right:16px; bottom:-28px; --w:96px}
}
@media (max-width:599px){
  .hero__media{margin-inline:calc(-1 * var(--gutter))}
  .hero__media figcaption{padding-inline:var(--gutter)}
  .hero__print .ph{--w:84px}
}

/* ====== Fakten ====== */
.facts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-block:1px solid var(--line)}
.facts li{padding:26px 20px 24px 0; display:grid; gap:6px; align-content:start}
.facts li + li{padding-left:20px; border-left:1px solid var(--line)}
.facts b{font:400 clamp(30px, 3vw, 44px)/1 var(--font-display); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.facts span{font-size:13px; line-height:1.4; color:var(--muted)}
@media (max-width:899px){
  .facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .facts li{padding:20px 12px 18px 0}
  .facts li + li{padding-left:0; border-left:0}
  .facts li:nth-child(even){padding-left:16px; border-left:1px solid var(--line)}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .facts li:last-child{grid-column:1 / -1; padding-left:0; border-left:0}
}

/* ====== Der Moment ====== */
.moment{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:48px; margin-top:64px; align-items:start}
.moment__a{grid-column:1 / span 7}
.moment__b{grid-column:9 / span 4; margin-top:120px}
.moment__c{grid-column:2 / span 4; position:relative}
.moment__line{grid-column:8 / span 5; align-self:center; font:italic 400 clamp(24px, 2.4vw, 32px)/1.3 var(--font-display); color:var(--ink); text-wrap:balance}
.moment__line small{display:block; margin-top:14px; font:400 12px/1.4 var(--font-sans); color:var(--muted); font-style:normal}
.moment__prints{position:absolute; left:calc(100% + 28px); top:-40px; display:flex; gap:18px}
@media (max-width:1023px){
  .moment__a{grid-column:1 / -1}
  .moment__b{grid-column:5 / -1; margin-top:0}
  .moment__c{grid-column:1 / span 6}
  .moment__line{grid-column:1 / -1}
  .moment__prints{right:auto; left:calc(100% + 24px); top:0}
}
@media (max-width:599px){
  .moment{row-gap:32px}
  .moment__a{margin-inline:calc(-1 * var(--gutter))}
  .moment__a figcaption{padding-inline:var(--gutter)}
  .moment__b{grid-column:3 / -1}
  .moment__c{grid-column:1 / -1; padding-right:36%}
  .moment__prints{left:auto; right:0; top:28px; gap:10px}
  .moment__prints .print--strip .ph{--w:62px}
}

/* ====== Ein Abend in neun Bildern ====== */
.evening{position:relative; margin-top:var(--section); background:var(--paper-deep)}
.evening__sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; padding-block:88px 32px}
.evening__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px}
.evening__track{display:flex; gap:28px; align-items:center; padding-inline:var(--gutter); will-change:transform}
.frame{flex:none; display:grid; gap:10px; width:clamp(220px, 22vw, 300px)}
.frame--wide{width:clamp(320px, 34vw, 460px)}
.frame .ph{--r:4 / 5}
.frame--wide .ph{--r:3 / 2}
.frame time{font:500 22px/1 var(--font-display); font-variant-numeric:tabular-nums}
.frame p{font-size:14px; line-height:1.45; color:var(--ink-soft)}
.frame--end{width:clamp(260px, 26vw, 340px); align-self:stretch; display:grid; align-content:center; gap:18px; padding:32px; background:var(--ink); color:var(--on-ink)}
.frame--end h3{font:500 32px/1.1 var(--font-display)}
.frame--end h3 em{color:var(--accent-tint); font-style:italic}
.frame--end p{color:var(--on-ink); opacity:.8}
.frame--end .link{color:var(--on-ink)}
.evening__bar{height:1px; background:var(--line); margin-inline:var(--gutter); position:relative}
.evening__bar i{position:absolute; left:0; top:-1px; height:3px; width:0; background:var(--ink)}
@media (max-width:759px){
  .evening__sticky{position:static; height:auto; padding-block:64px 40px; display:grid; gap:28px}
  .evening__track{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; transform:none !important; scrollbar-width:none}
  .evening__track::-webkit-scrollbar{display:none}
  .frame{scroll-snap-align:start; width:72vw}
  .frame--wide{width:84vw}
  .evening__bar{display:none}
}

/* ====== Anlässe ====== */
.occasions{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); margin-top:64px; list-style:none; padding:0}
.occasions li{display:grid; gap:14px; align-content:start}
.occasions li:nth-child(even){margin-top:72px}
.occasions h3{margin-top:6px}
.occasions p{font-size:15px; color:var(--ink-soft)}
.occasions .ph{transition:filter .5s var(--ease-out)}
.occasions li:hover .ph{filter:brightness(1.04)}
@media (max-width:1023px){.occasions{grid-template-columns:repeat(2, minmax(0,1fr))} .occasions li:nth-child(even){margin-top:48px}}
@media (max-width:599px){.occasions{grid-template-columns:1fr; gap:48px} .occasions li:nth-child(even){margin-top:0} .occasions .ph{--r:3 / 2}}

/* ====== Druckvorlagen ====== */
.designs{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); align-items:center}
.designs__text{grid-column:1 / span 5; display:grid; gap:24px}
.designs__fan{grid-column:7 / span 6; position:relative; height:520px}
.designs__fan .print{position:absolute}
.designs__fan .print:nth-child(1){left:0; top:80px; --tilt:-7deg}
.designs__fan .print:nth-child(2){left:22%; top:10px; --tilt:-2deg}
.designs__fan .print:nth-child(3){left:46%; top:60px; --tilt:4deg}
.designs__fan .print:nth-child(4){left:70%; top:0; --tilt:8deg}
.designs__fan .print:nth-child(5){left:34%; top:260px; --tilt:-3deg}
.designs__fan .print:hover{z-index:5}
@media (max-width:1023px){
  .designs__text{grid-column:1 / -1}
  .designs__fan{grid-column:1 / -1; height:480px; margin-top:40px}
}
@media (max-width:599px){
  .designs__fan{height:430px}
  .designs__fan .print .ph{--w:110px}
  .designs__fan .print--strip .ph{--w:70px}
  .designs__fan .print:nth-child(4){left:62%}
  .designs__fan .print:nth-child(5){left:18%; top:230px}
}

/* ====== Pakete ====== */
.packs{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px; margin-top:64px}
.packs__list{grid-column:1 / span 8; display:grid; gap:24px; align-content:start}
.packs__side{grid-column:10 / span 3; display:grid; gap:18px; align-content:start}
.packages{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.package{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto 20px; gap:24px; align-items:baseline; padding:22px 16px; border-top:1px solid var(--line); text-decoration:none; transition:background-color .32s var(--ease-out)}
.package:hover{background:var(--paper-raised)}
.package__name{font:500 28px/1.15 var(--font-display)}
.package__name small{display:block; margin-top:6px; font:600 10.5px/1.3 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.package__desc{font-size:14px; line-height:1.55; color:var(--ink-soft)}
.package__price{font:400 28px/1 var(--font-display); font-variant-numeric:tabular-nums; white-space:nowrap}
.package__arr{color:var(--accent); opacity:0; transform:translateX(-6px); transition:opacity .18s var(--ease-out), transform .18s var(--ease-out)}
.package:hover .package__arr{opacity:1; transform:none}
.note{background:var(--accent-tint); color:var(--ink); padding:24px 32px; font-size:14px; line-height:1.55; display:grid; gap:4px}
.note b{font:500 19px/1.25 var(--font-display)}
.incl{list-style:none; margin:0; padding:0; display:grid}
.incl li{display:grid; grid-template-columns:24px 1fr; gap:14px; padding-block:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.45; color:var(--ink-soft)}
.incl li b{display:block; color:var(--ink); font-weight:600}
.ico{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--ink)}
@media (max-width:1023px){.packs__list, .packs__side{grid-column:1 / -1} .packs__side{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px} .packs__side > h3{grid-column:1 / -1}}
@media (max-width:599px){
  .package{grid-template-columns:1fr auto; gap:6px 16px; padding:18px 0}
  .package__desc{grid-column:1 / -1; grid-row:2}
  .package__arr{display:none}
  .packs__side{grid-template-columns:1fr}
  .note{padding:20px}
}

/* ====== Ablauf ====== */
.steps{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); counter-reset:s}
.steps li{counter-increment:s; display:grid; gap:14px; align-content:start; padding-top:22px; border-top:1px solid var(--line-strong)}
.steps li::before{content:counter(s); font:400 56px/1 var(--font-display); color:var(--ink)}
.steps h3{font:500 22px/1.2 var(--font-display)}
.steps p{font-size:15px; color:var(--ink-soft)}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:48px}}
@media (max-width:599px){.steps{grid-template-columns:1fr; row-gap:32px} .steps li{grid-template-columns:56px 1fr; column-gap:16px} .steps li::before{grid-row:span 2; font-size:44px} }

/* ====== Extras ====== */
.extras{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:56px; margin-top:64px}
.feature{display:grid; gap:14px; align-content:start}
.feature--a{grid-column:1 / span 5}
.feature--b{grid-column:6 / span 3; margin-top:140px}
.rentals-wrap{grid-column:10 / span 3; display:grid; gap:18px; align-content:start}
.feature h3{margin-top:4px}
.feature p{font-size:15px; color:var(--ink-soft)}
.price{font:400 20px/1 var(--font-display); color:var(--ink)}
.rentals{list-style:none; margin:0; padding:0}
.rental{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; padding-block:12px; border-top:1px solid var(--line)}
.rental:last-child{border-bottom:1px solid var(--line)}
.rental .ph{--r:1; padding:0; font-size:0}
.rental .ph::before{content:attr(data-no); font-size:9px; top:50%; left:50%; transform:translate(-50%,-50%)}
.rental .ph::after{inset:4px}
.rental b{display:block; font:500 18px/1.2 var(--font-display)}
.rental span{font-size:12.5px; line-height:1.4; color:var(--muted)}
.rental em{font:500 14px/1 var(--font-sans); font-style:normal; font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:1023px){.feature--a{grid-column:1 / span 7} .feature--b{grid-column:8 / -1; margin-top:96px} .rentals-wrap{grid-column:1 / -1}}
@media (max-width:599px){.feature--a, .feature--b{grid-column:1 / -1; margin-top:0}}

/* ====== Stimmen ====== */
.voices{padding-block:var(--section); margin-top:var(--section)}
.voices__grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:56px; margin-top:64px}
.quote{display:grid; gap:22px; align-content:start}
.quote:nth-child(1){grid-column:1 / span 6}
.quote:nth-child(2){grid-column:8 / span 5; margin-top:120px}
.quote:nth-child(3){grid-column:3 / span 6}
.quote blockquote{font:italic 400 clamp(24px, 2.4vw, 32px)/1.3 var(--font-display); text-wrap:balance}
.quote blockquote::before{content:"„"; color:var(--accent)}
.quote blockquote::after{content:"“"; color:var(--accent)}
.quote figcaption{display:grid; gap:2px; font:500 14px/1.4 var(--font-sans)}
.quote figcaption span{font-weight:400; font-size:12px; color:var(--muted)}
@media (max-width:1023px){.quote:nth-child(n){grid-column:1 / -1; margin-top:0} .quote:nth-child(2){padding-left:15%}}
@media (max-width:599px){.quote:nth-child(2){padding-left:0}}

/* ====== Über uns ====== */
.about{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:48px; align-items:start}
.about__img{grid-column:1 / span 5}
.about__text{grid-column:7 / span 6; display:grid; gap:24px; padding-top:40px}
.about__bts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); margin-top:16px}
.about__sign{font:italic 400 26px/1.2 var(--font-display); color:var(--accent)}
@media (max-width:1023px){.about__img{grid-column:1 / span 6} .about__text{grid-column:1 / -1; padding-top:0}}
@media (max-width:599px){.about__img{grid-column:1 / -1}}

/* ====== FAQ ====== */
.faqwrap{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px}
.faqwrap .head{grid-column:1 / span 4; align-content:start}
.faq{grid-column:6 / span 7; border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:48px; padding:20px 0; cursor:pointer; font:500 clamp(19px, 1.7vw, 22px)/1.3 var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:14px; height:14px; background:linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat; transition:transform .32s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 24px 0; color:var(--ink-soft); max-width:64ch}
@media (max-width:1023px){.faqwrap .head, .faq{grid-column:1 / -1} .faq details p{padding-right:0}}

/* ====== Anfrage ====== */
.inquiry{padding-block:var(--section); margin-top:var(--section)}
.inquiry__grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:48px}
.inquiry__intro{grid-column:1 / span 5; display:grid; gap:28px; align-content:start}
.contact{display:grid; gap:4px; font-size:14px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:20px}
.contact b{font:500 20px/1.3 var(--font-display); color:var(--ink)}
.contact .sel{user-select:all; color:var(--ink)}
.inquiry__form{grid-column:7 / span 6}
.form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
.field{display:grid; gap:8px}
.field label{font:600 13px/1.2 var(--font-sans)}
.field label span{font-weight:400; color:var(--muted)}
.input{width:100%; min-height:48px; padding:0 16px; background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:2px; font:400 16px/1.3 var(--font-sans); appearance:none}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none; border-color:var(--line-strong); box-shadow:inset 0 -2px 0 var(--ink)}
.input[aria-invalid="true"]{border-color:var(--error)}
.err{display:flex; gap:6px; align-items:center; font:500 12.5px/1.4 var(--font-sans); color:var(--error)}
.form__foot{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding-top:8px}
.form__foot p{font-size:13px; line-height:1.45; color:var(--muted); max-width:36ch}
.done{display:grid; gap:10px; padding:32px; background:var(--accent-tint)}
.done b{font:500 30px/1.15 var(--font-display)}
@media (max-width:1023px){.inquiry__intro, .inquiry__form{grid-column:1 / -1}}
@media (max-width:599px){.form{grid-template-columns:1fr} .form__foot .btn{width:100%}}

/* ====== Footer ====== */
.footer{padding-block:72px 120px}
.footer__grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px; border-top:1px solid var(--line); padding-top:48px}
.footer__brand{grid-column:1 / span 4; display:grid; gap:14px; align-content:start}
.footer__brand p{font-size:14px; color:var(--ink-soft); max-width:36ch}
.footer__col{grid-column:span 2; display:grid; gap:10px; align-content:start; font-size:14px}
.footer__col h3{font:600 11px/1.3 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.footer__col a{text-decoration:none; color:var(--ink-soft)}
.footer__col a:hover{color:var(--accent)}
.footer__area{grid-column:1 / -1; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}
@media (max-width:1023px){.footer__brand{grid-column:1 / -1} .footer__col{grid-column:span 4}}
@media (max-width:599px){.footer__col{grid-column:span 6}}

/* ====== Mobile CTA-Leiste ====== */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--paper-raised); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .32s var(--ease-out)}
.sticky.show{transform:none}
.sticky p{flex:1; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.sticky p b{display:block; font:500 17px/1.2 var(--font-display); color:var(--ink)}
@media (max-width:599px){.sticky{display:flex}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .print{transform:rotate(var(--tilt, 0deg)) !important}
}

/* ====== Seiten ====== */
.page{display:none}
.page.is-active{display:block}
section[id], div[id].catalog__group{scroll-margin-top:88px}
.nav__link[aria-current="page"]{background-size:100% 1px}
.hero--page .hero__text{grid-column:1 / span 6}
.hero--page .hero__media{grid-column:8 / span 5}
@media (max-width:1023px){.hero--page .hero__text, .hero--page .hero__media{grid-column:1 / -1}}

/* Unternavigation */
.subnav{margin-top:72px}
.subnav__in{display:flex; gap:28px; overflow-x:auto; border-block:1px solid var(--line); scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:none; font:500 13px/1.2 var(--font-sans); letter-spacing:.02em; color:var(--ink-soft); text-decoration:none; padding-block:16px; transition:color .18s var(--ease-out)}
.subnav a:hover{color:var(--accent)}
@media (max-width:599px){.subnav{margin-top:48px} .subnav__in{gap:22px; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter)}}

/* Startseite: Paket-Teaser und Abschluss */
.teaser{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px; align-items:end}
.teaser .head{grid-column:1 / span 5}
.teaser .packages{grid-column:7 / span 6}
@media (max-width:1023px){.teaser .head, .teaser .packages{grid-column:1 / -1}}
.band{padding-block:var(--section); margin-top:var(--section)}
.band__in{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px; align-items:end}
.band .head{grid-column:1 / span 7}
.band .datecheck{grid-column:8 / span 5}
@media (max-width:1023px){.band .head, .band .datecheck{grid-column:1 / -1}}

/* Text und Bild nebeneinander */
.split{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:40px; align-items:center}
.split__text{grid-column:1 / span 5}
.split__media{grid-column:7 / span 6}
.split--rev .split__text{grid-column:8 / span 5; grid-row:1}
.split--rev .split__media{grid-column:1 / span 6; grid-row:1}
@media (max-width:1023px){.split__text, .split__media, .split--rev .split__text, .split--rev .split__media{grid-column:1 / -1; grid-row:auto}}
.gal-media{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:var(--gap); align-items:end}
.rentals--lg .rental{grid-template-columns:72px 1fr auto; padding-block:18px; gap:18px}
.rentals--lg .rental b{font-size:22px}

/* Hintergründe */
.bgs{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px var(--gap)}
.bgs li{display:grid; gap:8px}
.bgs .ph{--r:240 / 231}
@media (max-width:899px){.bgs{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* Druckvorlagen-Ablauf */
.mini-steps{list-style:none; margin:0; padding:0; display:grid; counter-reset:m}
.mini-steps li{counter-increment:m; display:grid; grid-template-columns:40px 1fr; gap:2px 12px; padding-block:14px; border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--ink-soft)}
.mini-steps li::before{content:counter(m); grid-row:span 2; font:400 28px/1 var(--font-display); color:var(--ink)}
.mini-steps b{color:var(--ink); font-weight:600}

/* Lieferung */
.cols2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px var(--gap); margin-top:56px}
@media (max-width:899px){.cols2{grid-template-columns:1fr}}
.spec{margin:14px 0 0; display:grid}
.spec div{display:flex; justify-content:space-between; gap:24px; padding-block:12px; border-top:1px solid var(--line); font-size:15px; line-height:1.45}
.spec div:last-child{border-bottom:1px solid var(--line)}
.spec dt{color:var(--ink-soft)}
.spec dd{margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:500}

/* Hinweisflächen */
.note--big{padding:48px; gap:18px}
.note--big .d-m{max-width:20ch}
@media (max-width:599px){.note--big{padding:24px}}
.deals{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.deals .note{align-content:start; gap:8px}
.deal-price{display:block; font:400 34px/1 var(--font-display); margin-top:16px; font-variant-numeric:tabular-nums}
.deal-price s{font-size:16px; color:var(--muted); margin-left:8px}
.note--ink{background:var(--ink); color:var(--on-ink)}
.note--ink .deal-price s{color:var(--on-ink); opacity:.65}
@media (max-width:899px){.deals{grid-template-columns:1fr}}

/* Partyverleih-Katalog */
.catalog{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:72px var(--gap)}
.catalog__group{display:grid; gap:18px; align-content:start}
@media (max-width:899px){.catalog{grid-template-columns:1fr; gap:56px}}
.gifts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px var(--gap); margin-top:56px}
.gifts .feature p{font-size:15px; color:var(--ink-soft)}
@media (max-width:599px){.gifts{grid-template-columns:1fr}}

/* Anfrageseite */
.steps--3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:899px){.steps--3{grid-template-columns:1fr}}
.inquiry--page{margin-top:0; padding-top:88px}

/* Echte Fotos und Videos */
.ph.has-media{padding:0}
.ph.has-media::before, .ph.has-media::after{display:none}
.ph > img, .ph > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ablauf-media{max-width:360px; justify-self:center}
.ablauf-media .ph > video{object-fit:contain; background:#17171b}

/* Logo */
.mark.logo{display:block; line-height:0}
.mark.logo img{height:52px; width:auto; transition:height .32s var(--ease-out)}
.nav.compact .mark.logo img{height:38px}
.menu__top .mark.logo img{height:40px}
.footer__brand .mark.logo img{height:64px}
@media (max-width:1023px){.nav .mark.logo img{height:40px} .nav.compact .mark.logo img{height:34px}}
/* Druckvorlagen-Video, LOVE-Galerie, Ersparnis */
.designs__video{grid-column:8 / span 4; max-width:380px; justify-self:center; width:100%}
@media (max-width:1023px){.designs__video{grid-column:1 / -1; margin-top:32px}}
.lovegal{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
@media (max-width:899px){.lovegal{grid-template-columns:repeat(2, minmax(0,1fr))}}
.deal-save{display:block; margin-top:6px; font:600 11px/1.3 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.note--ink .deal-save{color:var(--accent-tint)}

.gal-media{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.qrstrip{display:grid; gap:14px; align-self:center}
.qrstrip .print{padding:0; transform:rotate(var(--tilt))}
.qrstrip .print img{display:block; width:100%; height:auto}
@media (max-width:599px){.gal-media{grid-template-columns:1fr} .qrstrip{order:-1} .gal-media > .ph{width:58%; justify-self:center}}

/* Handy-Rahmen */
.gal-media{display:grid; grid-template-columns:auto minmax(0,1fr); gap:40px; align-items:center}
.phone{position:relative; width:min(270px, 62vw); aspect-ratio:9 / 19.5; padding:11px; border-radius:44px; background:#17171b; box-shadow:0 0 0 1.5px #3a3a3f inset, 0 28px 60px rgba(23,23,27,.28), 0 4px 10px rgba(23,23,27,.18)}
.phone::before{content:""; position:absolute; top:20px; left:50%; width:30%; height:22px; transform:translateX(-50%); border-radius:12px; background:#17171b; z-index:2}
.phone::after{content:""; position:absolute; right:-3px; top:22%; width:3px; height:12%; border-radius:0 2px 2px 0; background:#2a2a30}
.phone__screen{position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#fbfaf7}
.phone__ph{position:absolute; inset:0; aspect-ratio:auto; --ph:var(--paper-deep)}
.phone__ph > video, .phone__ph > img{object-fit:cover; object-position:50% 0; top:30px; height:calc(100% - 30px)}
.phone__screen{background:#ffffff}
.phone__wait{position:absolute; inset:auto 18px 40px; font-size:12px; line-height:1.45; color:var(--muted); text-align:center}
@media (max-width:1023px){.gal-media{grid-template-columns:auto minmax(0,1fr)}}
@media (max-width:599px){.gal-media{grid-template-columns:1fr; justify-items:center} .gal-media > .ph{width:auto} .qrstrip{order:0; width:100%}}

.contact{grid-template-columns:auto 1fr; column-gap:18px}
.contact > *{grid-column:2}
.contact .avatar{grid-column:1; grid-row:1 / span 6; width:72px; height:72px; border-radius:50%; object-fit:cover; align-self:start}
.contact__role{font-size:13px; color:var(--muted); margin-bottom:6px}

/* Wegweiser Startseite */
.wege{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); row-gap:56px; margin-top:64px; align-items:start}
.weg{display:grid; gap:18px; text-decoration:none; color:inherit}
.weg--gross{grid-column:1 / span 6}
.weg:not(.weg--gross){grid-column:8 / span 5; margin-top:120px}
.weg__text{display:grid; gap:10px; max-width:44ch}
.weg__text p:not(.kicker){font-size:15px; color:var(--ink-soft)}
.weg .ph img{transition:transform .9s var(--ease-out)}
.weg:hover .ph img{transform:scale(1.03)}
.weg:hover .link{color:var(--accent)} .weg:hover .link span{transform:translateX(4px)}
@media (max-width:899px){.weg--gross, .weg:not(.weg--gross){grid-column:1 / -1; margin-top:0}}
/* WhatsApp */
.wa-card{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:center; padding:18px 20px; border:1px solid var(--line-strong); text-decoration:none; color:var(--ink); transition:background-color .18s var(--ease-out), color .18s var(--ease-out)}
.wa-card .ico{grid-row:span 2; width:30px; height:30px; color:var(--ink)}
.wa-card span{display:grid; gap:2px; font-size:13.5px; line-height:1.45; color:var(--ink-soft)}
.wa-card b{font:500 19px/1.2 var(--font-display); color:var(--ink)}
.wa-card em{grid-column:2; font:600 12px/1.2 var(--font-sans); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.wa-card:hover{background:var(--ink); color:var(--on-ink)} .wa-card:hover b, .wa-card:hover span, .wa-card:hover .ico{color:var(--on-ink)}
.hero__more .link + .link{margin-left:0}

/* Rückmeldung */
.reply{grid-column:1 / -1; border:0; margin:0; padding:0; min-width:0}
.reply legend{font:600 13px/1.2 var(--font-sans); padding:0; margin-bottom:8px}
.reply__opts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.reply__opt{position:relative; cursor:pointer}
.reply__opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.reply__opt span{display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:2px; background:var(--paper-raised); font:500 14.5px/1.2 var(--font-sans); color:var(--ink); transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out)}
.field.reply .reply__opt span{color:var(--ink); font-weight:500}
.reply__opt small{font:600 10px/1.2 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.reply__opt:hover span{border-color:var(--muted)}
.reply__opt input:checked + span{border-color:var(--line-strong); box-shadow:inset 0 -2px 0 var(--ink)}
.reply__opt input:focus-visible + span{outline:2px solid var(--focus); outline-offset:3px}
@media (max-width:599px){.reply__opts{grid-template-columns:1fr}}

/* Rechtstexte */
.legal{max-width:calc(760px + 2 * var(--gutter)); padding-block:72px 40px; display:grid; gap:14px}
.legal h1{margin-bottom:24px}
.legal h2{font:500 24px/1.25 var(--font-display); margin-top:28px}
.legal h3{font:600 15px/1.4 var(--font-sans); margin-top:8px}
.legal p, .legal li{color:var(--ink-soft); max-width:68ch}
.legal ul{margin:0; padding-left:20px; display:grid; gap:4px}
.legal a{color:var(--accent)}

.field--wide{grid-column:1 / -1}
.input--area{min-height:112px; padding:12px 16px; line-height:1.5; resize:vertical; font:400 16px/1.5 var(--font-sans)}

/* Google-Bewertungen */
.voices__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:32px}
.rating{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); padding:14px 20px; border:1px solid var(--line)}
.rating:hover{border-color:var(--line-strong)}
.rating__num{font:400 52px/1 var(--font-display)}
.rating__meta{display:grid; gap:4px; font-size:13px; color:var(--muted)}
.stars{color:#e3b04b; letter-spacing:.12em; font-size:15px}
.voices .quote--lead{margin-top:72px; max-width:980px; gap:18px}
.quote--lead blockquote{font:italic 400 clamp(28px, 3.4vw, 44px)/1.22 var(--font-display)}
.voices__list{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:48px var(--gap); margin-top:72px; border-top:1px solid var(--line); padding-top:40px}
.quote--s{gap:14px; align-content:start}
.quote--s blockquote{font:italic 400 21px/1.4 var(--font-display)}
.voices__more{margin-top:40px}
.voices .quote:nth-child(n){grid-column:auto; margin-top:0; padding-left:0}

/* Konfigurator */
.konf{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; margin-top:56px; align-items:start}
.konf__steps{display:grid; gap:48px}
.konf__step{border:0; margin:0; padding:0; min-width:0; display:grid; gap:16px}
.konf__step legend{display:flex; align-items:center; gap:14px; font:500 26px/1.2 var(--font-display); padding:0; margin-bottom:16px}
.konf__step legend span{display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; font:500 15px/1 var(--font-sans)}
.konf__opts{display:grid; gap:12px}
.konf__opts--pack{grid-template-columns:repeat(5, minmax(0,1fr))}
.konf__opts--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.konf__opts--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.kopt{position:relative; cursor:pointer; display:block}
.kopt input{position:absolute; opacity:0; inset:0; cursor:pointer; z-index:1}
.kopt > span{position:relative; display:grid; gap:6px; align-content:start; height:100%; padding:16px; border:1px solid var(--line); background:var(--paper-raised); transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s}
.kopt b{font:500 19px/1.2 var(--font-display)}
.kopt small{font-size:13px; line-height:1.4; color:var(--muted)}
.kopt em s{font-weight:400; color:var(--muted); margin-left:6px}
.kopt em{font-style:normal; font:500 15px/1.2 var(--font-sans); margin-top:6px; font-variant-numeric:tabular-nums}
.kopt i{position:absolute; top:-9px; right:10px; font:600 9.5px/1 var(--font-sans); font-style:normal; letter-spacing:.16em; text-transform:uppercase; background:var(--accent); color:var(--on-accent); padding:5px 7px}
.kopt:hover > span{border-color:var(--muted)}
.kopt input:checked + span{border-color:var(--line-strong); box-shadow:inset 0 0 0 1px var(--line-strong); background:var(--paper)}
.kopt input:checked + span::after{content:"✓"; position:absolute; right:14px; bottom:14px; font:600 14px/1 var(--font-sans); color:var(--accent)}
.kopt input:focus-visible + span{outline:2px solid var(--focus); outline-offset:3px}
.kopt input:disabled + span{opacity:.4; cursor:not-allowed}
.kopt--img > span{padding:0 0 16px}
.kopt__ph{display:grid; place-items:center; aspect-ratio:16 / 9; margin-bottom:8px; background:var(--paper-deep); font:600 10px/1 var(--font-sans); letter-spacing:.2em; color:var(--muted)}
.kopt--img img{width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; margin-bottom:8px}
.kopt--img b, .kopt--img small, .kopt--img em{padding-inline:16px}
.konf__hint, .konf__deal{font-size:13.5px; color:var(--muted); margin:0}
.konf__deal{color:var(--accent)}
.konf__km{display:grid; gap:10px; margin-top:8px}
.konf__km label{font-size:14px}
.konf__km input[type=range]{width:100%; accent-color:var(--ink)}
.konf__scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.kcheck{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer}
.kcheck input{width:18px; height:18px; accent-color:var(--ink)}
.kcheck em{font-style:normal; color:var(--muted)}
.konf__sum{position:sticky; top:96px; display:grid; gap:14px; padding:28px; background:var(--ink); color:var(--on-ink)}
.konf__sum .kicker{color:var(--on-ink) !important; opacity:.7}
.konf__lines{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px}
.konf__lines li{display:flex; justify-content:space-between; gap:16px; font-variant-numeric:tabular-nums}
.konf__lines li span:last-child{white-space:nowrap}
.konf__lines li.minus{color:#e8b7bd}
.konf__total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(238,237,233,.25); padding-top:14px}
.konf__total b{font:400 44px/1 var(--font-display); font-variant-numeric:tabular-nums}
.konf__save{margin:0; font:600 11px/1.3 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:#e8b7bd}
.konf__note{margin:0; font-size:12px; line-height:1.45; opacity:.7}
.konf__sum .btn{background:var(--on-ink); color:var(--ink); border-color:var(--on-ink)}
.konf__sum .btn:hover{background:var(--accent-tint); border-color:var(--accent-tint)}
@media (max-width:1100px){.konf__opts--pack{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:1023px){.konf{grid-template-columns:1fr} .konf__sum{position:static}}
@media (max-width:599px){.konf__opts--pack, .konf__opts--2, .konf__opts--3{grid-template-columns:1fr} .konf__sum{padding:22px}}

/* Druckvorlagen gestalten */
.dvways{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px var(--gap); margin-top:56px}
.dvways .feature{display:grid; gap:14px; align-content:start}
.dvways .feature p:not(.kicker){color:var(--ink-soft)}
@media (max-width:767px){.dvways{grid-template-columns:1fr}}
.dvlist{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gap); border-top:1px solid var(--line)}
.dvlist li{border-bottom:1px solid var(--line)}
.dvlist__a{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:26px 0; text-decoration:none; color:var(--ink); height:100%}
.dvlist__no{grid-row:span 2; font:400 44px/1 var(--font-display); color:var(--accent); font-variant-numeric:lining-nums tabular-nums; min-width:1.4em}
.dvlist__t{display:grid; gap:4px}
.dvlist__t b{font:400 26px/1.1 var(--font-display)}
.dvlist__t span{font-size:14px; line-height:1.45; color:var(--ink-soft)}
.dvlist__go{grid-column:2; font:500 13px/1.2 var(--font-sans); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; margin-top:8px; transition:color .18s var(--ease-out)}
.dvlist__a:hover .dvlist__go, .dvlist__a:hover b{color:var(--accent)}
@media (max-width:1023px){.dvlist{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:599px){.dvlist{grid-template-columns:1fr} .dvlist__a{padding:20px 0} .dvlist__no{font-size:36px}}
.gifts--3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:899px){.gifts--3{grid-template-columns:1fr}}

/* ====== Mobil: einfacher, visueller ====== */
.sticky__std, .sticky__konf{display:flex; align-items:center; gap:10px; width:100%}
.sticky__konf{display:none}
.sticky.is-konf .sticky__std{display:none}
.sticky.is-konf .sticky__konf{display:flex}
.sticky__std > *{flex:1; justify-content:center; min-height:48px}
.sticky__wa{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong); color:var(--ink); text-decoration:none; font:600 14px/1 var(--font-sans)}
.sticky__wa .ico{width:20px; height:20px}
.sticky__konf p{flex:1; display:grid; gap:2px; font-size:12px; color:var(--muted); line-height:1.2}
.sticky .sticky__konf b{font:500 24px/1 var(--font-display); color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.sticky__konf .btn{min-height:48px}
@media (max-width:599px){
  body{padding-bottom:76px}
  /* Hero: großes Bild zuerst, Überschrift darauf */
  .hero{grid-template-columns:minmax(0,1fr); padding-top:0; column-gap:0}
  .hero__text{display:contents}
  .hero__media{grid-row:1; grid-column:1 !important; margin-inline:calc(-1 * var(--gutter)); position:relative}
  .hero__media .ph{aspect-ratio:auto; height:min(68svh, 560px); transform:none !important}
  .hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,16,.82) 0%, rgba(14,14,16,.35) 42%, rgba(14,14,16,0) 68%); pointer-events:none}
  .hero__media figcaption, .hero__media .caption, .hero__print, .hero .kicker{display:none !important}
  .hero h1{grid-row:1; grid-column:1; align-self:end; position:relative; z-index:2; color:#fff; margin:0; padding:0 0 24px; font-size:clamp(38px, 11vw, 50px)}
  .hero h1 em{color:var(--accent-tint)}
  .hero .lead{margin-top:22px; font-size:17px; line-height:1.5}
  .hero .datecheck, .hero .hero__more{margin-top:18px}
  .hero .hero__more .btn{flex:1 1 100%; justify-content:center}
  .hero--page + .subnav, .hero + .subnav{margin-top:32px}
  /* Wischen statt endlos scrollen */
  .occasions, .voices__list, .lovegal, .dvways, .gifts--3, .extras{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 10px; scrollbar-width:none; scroll-padding-inline:var(--gutter)}
  .occasions::-webkit-scrollbar, .voices__list::-webkit-scrollbar, .lovegal::-webkit-scrollbar, .dvways::-webkit-scrollbar, .gifts--3::-webkit-scrollbar, .extras::-webkit-scrollbar{display:none}
  .occasions > *, .voices__list > *, .lovegal > *, .dvways > *, .gifts--3 > *, .extras > .feature{flex:0 0 82%; scroll-snap-align:start; min-width:0; grid-column:auto !important; margin:0 !important}
  .lovegal > *{flex-basis:70%}
  .voices__list > *{border:1px solid rgba(238,237,233,.18); padding:20px}
  .extras > .rentals-wrap{display:none}
  .swipe-hint{display:flex !important}
  /* Wegweiser: Bild mit Titel, wenig Text */
  .wege{gap:16px}
  .weg .ph{aspect-ratio:16 / 10}
  .weg__text p:not(.kicker){display:none}
  /* Konfigurator: kompakte Zeilen */
  .konf__opts--pack{grid-template-columns:1fr 1fr !important; gap:10px}
  .konf__opts--pack .kopt > span{padding:14px 12px}
  .konf__opts--pack .kopt b{font-size:17px}
  .kopt--img > span{grid-template-columns:92px minmax(0,1fr); column-gap:14px; row-gap:2px; padding:0 34px 0 0; align-content:center; min-height:92px}
  .kopt--img img, .kopt--img .kopt__ph{grid-column:1; grid-row:1 / span 3; width:92px; height:0; min-height:100%; aspect-ratio:auto; margin:0; align-self:stretch}
  .extras .feature .ph, .gifts--3 .ph, .dvways .ph{aspect-ratio:4 / 3 !important}
  .steps li p{display:none}
  .dvlist{grid-template-columns:1fr 1fr !important; column-gap:10px; row-gap:10px; border-top:0}
  .dvlist li{border:1px solid var(--line); background:var(--paper-raised)}
  .dvlist__a{grid-template-columns:1fr; padding:14px 14px 16px; gap:4px}
  .dvlist__no{grid-row:auto; font-size:26px}
  .dvlist__t b{font-size:21px}
  .dvlist__t span{display:none}
  .dvlist__go{grid-column:1; margin-top:6px; font-size:12px}
  .steps li{padding-block:18px}
  #box-extras, .subnav a[href="#box-extras"], #druckvorlagen .mini-steps, #druckvorlagen .designs__video, #lieferung .ph{display:none !important}
  .kopt--img b, .kopt--img small, .kopt--img em{grid-column:2; padding:0}
  .kopt--img b{padding-top:10px}
  .kopt--img em{padding-bottom:10px; margin-top:2px}
  .kopt--img small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .kopt input:checked + span::after{top:50%; bottom:auto; transform:translateY(-50%)}
  /* Kleinkram */
  .photo figcaption.caption{font-size:11px}
}
.swipe-hint{display:none; align-items:center; gap:8px; margin-top:10px; font:600 11px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* Hinweis: was ist ein Ausdruck */
.printinfo{display:inline-flex; align-items:center; gap:14px; margin-top:20px; padding:12px 16px; background:var(--accent-tint); font-size:15px; line-height:1.4; color:var(--ink)}
.printinfo svg{flex:none; width:40px; height:28px; fill:var(--print); stroke:var(--ink); stroke-width:1.2}
.printinfo em{font-style:normal; color:var(--muted)}
.printinfo--s{margin:0 0 4px; font-size:14px}

/* Beispiel: was ist ein Ausdruck (maßstabsgetreu) */
.ausdruck{--u:12px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px; margin:28px 0 0; padding:24px; background:var(--paper-raised); border:1px solid var(--line); width:fit-content; max-width:100%}
.ausdruck__item{display:grid; gap:10px; justify-items:start; font-size:13px; line-height:1.3; color:var(--ink-soft)}
.ausdruck__item b{color:var(--ink); font-weight:600}
.ausdruck__foto{width:calc(15 * var(--u)); height:calc(10 * var(--u)); object-fit:cover; display:block; box-shadow:0 6px 18px rgba(23,23,27,.16); transform:rotate(-2deg)}
.ausdruck__strips{display:flex; gap:6px}
.ausdruck__strips img{width:calc(5 * var(--u)); height:calc(15 * var(--u)); object-fit:cover; display:block; box-shadow:0 6px 18px rgba(23,23,27,.16)}
.ausdruck__strips img:first-child{transform:rotate(-3deg)} .ausdruck__strips img:last-child{transform:rotate(2deg)}
.ausdruck__or{font:italic 400 22px/1 var(--font-display); color:var(--muted); padding-bottom:calc(5 * var(--u) + 12px)}
.ausdruck__eq{flex-basis:100%; font:400 22px/1.2 var(--font-display); color:var(--ink); border-top:1px solid var(--line); padding-top:14px}
.ausdruck__eq b{font-weight:400; color:var(--accent)}
@media (max-width:599px){.ausdruck{--u:8px; padding:16px; gap:12px 10px; flex-wrap:wrap} .ausdruck__or{font-size:18px} .ausdruck__item{font-size:12px}}

.frame__strips{display:flex !important; flex-direction:row !important; justify-content:center; align-items:center; gap:8px; padding:18px !important; background:var(--paper-deep) !important}
.frame__strips > img{position:static !important; height:100% !important; width:auto !important; max-width:calc(50% - 4px); object-fit:contain !important; box-shadow:0 6px 16px rgba(23,23,27,.18)}
.frame__strips > img:first-child{transform:rotate(-3deg)} .frame__strips > img:last-child{transform:rotate(2deg)}

/* Liefertabelle */
.deltab{width:100%; margin-top:18px; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums}
.deltab th, .deltab td{padding:12px 8px; border-top:1px solid var(--line); text-align:right; font-weight:500}
.deltab thead th{font:600 11px/1.3 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-top:0; padding-top:0}
.deltab th[scope=row], .deltab thead th:first-child{text-align:left; color:var(--ink-soft); font-weight:400}
.deltab tbody tr:last-child th, .deltab tbody tr:last-child td{border-bottom:1px solid var(--line)}
.deltab td b{font-weight:600; color:var(--accent)}
@media (max-width:599px){.deltab{font-size:14px} .deltab th, .deltab td{padding:11px 4px}}

/* Hilfe-Seite */
.selfvid{margin-top:22px; max-width:360px}
.selfvid video{display:block; width:100%; aspect-ratio:1080 / 1356; object-fit:cover; background:var(--paper-deep)}
.help-hero{padding-top:clamp(28px,5vw,64px); padding-bottom:8px}
.help-hero h1{margin:10px 0 14px}
.help-hero .lead{max-width:34em}
.help-call{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.help-jump{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none}
.help-jump a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font:500 14px/1.2 var(--font-sans); background:var(--paper-raised)}
.help-jump a:hover{border-color:var(--ink)}
.help-sec{padding-top:clamp(36px,6vw,72px)}
.help-bar{background:var(--ink); color:var(--on-ink, #eeede9); padding:14px 18px; font:400 clamp(24px,3.4vw,34px)/1.1 var(--font-display)}
.help-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.help-item{border-bottom:1px solid var(--line); padding:26px 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 20px; scroll-margin-top:90px}
.help-no{grid-row:span 3; font:400 clamp(34px,4vw,44px)/1 var(--font-display); color:var(--accent); font-variant-numeric:lining-nums tabular-nums; min-width:1.9em}
.help-item h3{margin:0; font:400 clamp(24px,3vw,30px)/1.15 var(--font-display)}
.help-item p{margin:0; color:var(--ink-soft); max-width:40em}
.help-item ul, .help-item ol{margin:0; padding-left:1.2em; color:var(--ink-soft)}
.help-item li{margin:3px 0}
.help-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.help-acts .btn{min-height:44px; padding:0 18px}
.help-video{grid-column:1 / -1; margin-top:16px; max-width:440px}
.help-video video{display:block; width:100%; aspect-ratio:1080 / 1356; object-fit:cover; background:var(--paper-deep)}
.help-tip{margin-top:28px; padding:22px; background:var(--accent-tint); font:400 clamp(20px,2.6vw,26px)/1.3 var(--font-display)}
.help-tip small{display:block; margin-top:6px; font:400 15px/1.5 var(--font-sans); color:var(--ink-soft)}
.help-check{columns:2; column-gap:28px}
.help-sos{margin-top:clamp(40px,6vw,72px); padding:clamp(24px,4vw,40px); border:1px solid var(--line-strong)}
.help-sos h2{margin:0 0 8px}
@media (max-width:767px){.help-item{grid-template-columns:1fr} .help-no{grid-row:auto} .help-check{columns:1} .help-video{max-width:none}}