@font-face{font-family:"DM Serif Display";src:url(schrift/dm-serif-display-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Sacramento";src:url(schrift/sacramento-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Figtree";src:url(schrift/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(schrift/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --crema:#FBF4EA;--apricot:#F3D3B0;--terra:#C96F4D;--espresso:#2E1F1A;--espresso-2:#5C4A41;
  --himbeere:#B81F5A;--himbeere-tief:#961549;--olive:#6F7033;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:7rem;
  --rand:clamp(1.25rem,5vw,5rem);
  --herz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 90 C20 66 0 48 0 26 C0 11 12 0 26 0 C36 0 45 5 50 14 C55 5 64 0 74 0 C88 0 100 11 100 26 C100 48 80 66 50 90Z'/%3E%3C/svg%3E");
  --aus:cubic-bezier(.22,.8,.26,1);
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--espresso);font:400 1.0625rem/1.6 Figtree,system-ui,sans-serif}
img,video{display:block;max-width:100%;height:auto}
h1,h2{font:400 clamp(2.4rem,5.4vw,4.75rem)/1.05 "DM Serif Display",Georgia,serif;margin:0 0 var(--s3);letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 var(--s2)}
a{color:inherit}
::selection{background:var(--himbeere);color:#fff}
:focus-visible{outline:3px solid var(--himbeere);outline-offset:3px;border-radius:4px}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:fixed;left:1rem;top:-4rem;z-index:30;background:#fff;padding:.75rem 1rem;border-radius:.5rem}
.sprung:focus{top:1rem}
.hand{font:400 clamp(1.9rem,3vw,2.6rem)/1 Sacramento,cursive;color:var(--himbeere);margin:0 0 var(--s1)}
.klein{font-size:.9375rem;color:var(--espresso-2);margin-top:var(--s2)}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.75rem 1.75rem;border-radius:99px;background:var(--himbeere);color:#fff;font-weight:600;text-decoration:none;border:2px solid var(--himbeere);transition:background .2s var(--aus),transform .15s var(--aus)}
.knopf:hover{background:var(--himbeere-tief);border-color:var(--himbeere-tief)}
.knopf:active{transform:scale(.97)}
.knopf-klein{min-height:2.75rem;padding:.4rem 1.25rem;font-size:.9375rem}
.knopf-rand{background:transparent;color:var(--himbeere)}
.knopf-rand:hover{background:var(--himbeere);color:#fff;border-color:var(--himbeere)}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.75rem var(--rand);pointer-events:none;transition:background .3s}
.kopf>*{pointer-events:auto}
.kopf-logo{display:block;width:clamp(58px,6vw,78px);aspect-ratio:1;position:relative}
.kopf-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s}
.logo-dunkel{opacity:0}
.kopf.hell{background:var(--crema)}
.kopf.hell .logo-hell{opacity:0}
.kopf.hell .logo-dunkel{opacity:1}

/* Tür-Film */
.film{height:420vh;height:420svh;position:relative}
.film-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--crema)}
.film-hinten{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(1.5rem,7vh,4.5rem)}
.film-hinten-text{font:400 clamp(2.6rem,6vw,4.5rem)/1 Sacramento,cursive;color:var(--himbeere);margin:0;opacity:var(--ende,0)}
.film-rahmen{position:absolute;inset:0;-webkit-mask:var(--herz) center 44%/var(--masse,100%) no-repeat;mask:var(--herz) center 44%/var(--masse,100%) no-repeat}
.film-rahmen:not(.maske){-webkit-mask:none;mask:none}
.film-poster,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-video{opacity:0;transition:opacity .25s}
.film-video.bereit{opacity:1}
.film-schleier{position:absolute;inset:50% 0 0 0;background:linear-gradient(to top,rgba(30,18,12,.62),rgba(30,18,12,0))}
.film-worte{position:absolute;inset:auto var(--rand) clamp(4.5rem,13vh,7.5rem) var(--rand)}
.wort{position:absolute;left:0;right:0;bottom:0;margin:0;color:#fff;font:400 clamp(2.3rem,6.4vw,5.5rem)/1.05 "DM Serif Display",Georgia,serif;opacity:0;transform:translateY(14px);text-shadow:0 1px 24px rgba(30,18,12,.35)}
.wort em{font:400 1.32em/1 Sacramento,cursive;font-style:normal}
.no-js .wort,html:not(.js) .wort:last-child{opacity:1;transform:none}
.film-hinweis{position:absolute;left:0;right:0;bottom:clamp(1.25rem,4vh,2.25rem);margin:0;text-align:center;color:#fff;font-size:.9375rem;font-weight:600;transition:opacity .3s}

/* Kleiderstange: Die Teile hängen an einer Schiene und schwingen, wenn sie gezogen werden. */
.stange{position:relative;background:var(--apricot);scroll-margin-top:-6rem}
.stange-buehne{display:flex;flex-direction:column;background:var(--apricot);padding-bottom:var(--s3)}
.stange-kopf{padding:clamp(5.5rem,13.5vh,7.5rem) var(--rand) 0}
.stange-kopf .hand{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:.15rem}
.stange-kopf h2{font-size:clamp(1.9rem,4.4vw,3.4rem);margin:0}
.stange-raum{position:relative;flex:1;min-height:0;margin-top:clamp(.75rem,2.5vh,1.75rem);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.stange-raum::-webkit-scrollbar{display:none}
.schiene{position:absolute;left:0;width:100%;min-width:600vw;top:.6rem;height:7px;border-radius:7px;background:linear-gradient(#8a7a70,#4a3a32 55%,#2E1F1A);box-shadow:0 5px 8px rgba(46,31,26,.25);z-index:2}
.stange-bahn{--b:max(11rem,min(72vw,calc((100vh - 27rem)*.75),23rem));--b:max(11rem,min(72vw,calc((100svh - 27rem)*.75),23rem));list-style:none;margin:0;padding:0 var(--rand);display:flex;gap:clamp(1rem,2.6vw,2.25rem);width:max-content;will-change:transform}
.teil{position:relative;flex:none;width:var(--b);padding-top:2.65rem;transform-origin:50% .85rem;scroll-snap-align:center}
.buegel{position:absolute;top:0;left:50%;width:4.75rem;height:2.9rem;margin-left:-2.375rem;fill:none;stroke:#3a2b24;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;z-index:3;overflow:visible}
.teil-kleid{position:relative;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 18px 34px -14px rgba(46,31,26,.45)}
.teil-kleid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.teil-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 .75rem;align-items:center;padding:.65rem .8rem .75rem}
.teil-info strong{grid-column:1/-1;font:400 1.25rem/1.15 "DM Serif Display",Georgia,serif}
.teil-info span{grid-column:1/-1;font-size:.875rem;color:var(--espresso-2);line-height:1.3;margin-bottom:.35rem}
.teil-info b{font-weight:600;color:var(--himbeere);font-variant-numeric:tabular-nums;font-size:.9375rem;line-height:1.2}
.wa-knopf{gap:.4rem}
.wa-zeichen{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.teil-ende .teil-kleid{background:var(--espresso);color:var(--crema);padding:clamp(1.25rem,3vw,2rem);min-height:calc(var(--b)*1.33);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.teil-ende .hand{color:#F5A9C4}
.stange-stand{height:3px;margin:var(--s2) var(--rand) 0;background:rgba(46,31,26,.16);border-radius:3px;overflow:hidden;display:none}
.stange-stand i{display:block;height:100%;background:var(--himbeere);transform-origin:0 50%;transform:scaleX(0)}
.stange.an{height:calc(100vh + var(--weg,0px));height:calc(100svh + var(--weg,0px))}
.stange.an .stange-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stange.an .stange-raum{overflow:hidden;scroll-snap-type:none}
.stange.an .stange-stand{display:block}

/* WhatsApp: immer einen Daumen weit weg */
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;gap:.55rem;min-height:3.5rem;padding:.5rem 1.25rem .5rem 1rem;border-radius:99px;background:#1FAF55;color:#fff;font-weight:600;text-decoration:none;box-shadow:0 10px 26px -6px rgba(20,90,50,.55);transition:transform .15s var(--aus),background .2s}
.wa:hover{background:#178F45}
.wa:active{transform:scale(.96)}
.wa .wa-zeichen{width:1.65rem;height:1.65rem}
.wa::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(31,175,85,.55);animation:wa-ring 1.5s 2.4s var(--aus) 2;pointer-events:none}
@keyframes wa-ring{to{box-shadow:0 0 0 18px rgba(31,175,85,0)}}

/* Herz geht auf: Startzustand nur mit Skript */
.js .herz-auf{-webkit-mask:var(--herz) center/var(--m,600%) no-repeat;mask:var(--herz) center/var(--m,600%) no-repeat}
.js .herz-auf.offen{-webkit-mask:none;mask:none}

/* Geschichte */
.geschichte{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,7vw,7rem);align-items:center;padding:var(--s6) var(--rand);max-width:1320px;margin:auto}
.geschichte-text{max-width:38rem}
blockquote{margin:0}
.geschichte blockquote{font:400 clamp(1.5rem,2.4vw,2rem)/1.25 "DM Serif Display",Georgia,serif;color:var(--himbeere);margin:var(--s3) 0}
.geschichte-film{margin:0;max-width:24rem;justify-self:center;width:100%}
.geschichte-film video{width:100%;aspect-ratio:478/850;object-fit:cover;border-radius:1.25rem;background:var(--apricot)}
figcaption{font-size:.9375rem;color:var(--espresso-2);margin-top:.6rem}
.spieler{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s4);padding:.75rem 1.25rem .75rem .75rem;background:var(--apricot);border-radius:99px}
.spieler-knopf{flex:none;width:3.25rem;height:3.25rem;border-radius:50%;border:0;background:var(--himbeere);display:grid;place-items:center;cursor:pointer;transition:transform .15s var(--aus),background .2s}
.spieler-knopf:hover{background:var(--himbeere-tief)}
.spieler-knopf:active{transform:scale(.94)}
.spieler-knopf svg{width:1.5rem;height:1.5rem;fill:#fff}
.spieler-knopf .aus{display:none}
.spieler.spielt .an{display:none}
.spieler.spielt .aus{display:block}
.spieler-text{flex:1;min-width:0;line-height:1.3}
.spieler-text strong{display:block;font-weight:600}
.spieler-text span{font-size:.9375rem;color:var(--espresso)}
.spieler-linie{height:3px;background:rgba(46,31,26,.2);border-radius:3px;margin-top:.4rem;overflow:hidden}
.spieler-linie i{display:block;height:100%;width:0;background:var(--himbeere)}

/* Jacke */
.jacke{background:var(--apricot);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:var(--s6) var(--rand)}
.jacke-bild{justify-self:end;width:min(100%,34rem)}
.jacke-bild img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:1.25rem;transition:opacity .22s var(--aus)}
.jacke-text{max-width:30rem}
.farben{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:var(--s3) 0 var(--s2)}
.farbe{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:600 .875rem/1 Figtree,sans-serif;color:var(--espresso);display:grid;justify-items:center;gap:.45rem;min-width:3.25rem}
.farbe::before{content:"";width:3rem;height:3rem;border-radius:50%;background:radial-gradient(circle at 50% 52%,var(--b) 0 26%,var(--a) 27%);box-shadow:0 0 0 2px var(--apricot),0 0 0 3px rgba(46,31,26,.3);transition:box-shadow .15s,transform .15s var(--aus)}
.farbe:hover::before{transform:scale(1.06)}
.farbe:active::before{transform:scale(.95)}
.farbe[aria-pressed=true]::before{box-shadow:0 0 0 3px var(--apricot),0 0 0 5px var(--himbeere)}
.jacke-name{font-weight:600;margin-bottom:var(--s3)}

/* Looks */
.looks{padding:var(--s6) var(--rand);max-width:1320px;margin:auto}
.looks-kopf{margin-bottom:var(--s4)}
.looks-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.look{margin:0}
.look img{width:100%;object-fit:cover;border-radius:1.25rem}
.look-a{grid-column:1/6}
.look-b{grid-column:6/10;margin-top:var(--s5)}
.look-c{grid-column:10/13;margin-top:var(--s2)}

/* Dolce Vita */
.dolce{height:190vh;position:relative}
.dolce-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--terra)}
.dolce-buehne img{position:absolute;inset:0;width:100%;height:112%;max-width:none;object-fit:cover;will-change:transform}
.dolce-buehne::after{content:"";position:absolute;inset:0;background:rgba(30,18,12,.32)}
.dolce blockquote{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--rand);color:#fff;font:400 clamp(1.5rem,3.1vw,2.75rem)/1.2 "DM Serif Display",Georgia,serif;text-shadow:0 1px 26px rgba(30,18,12,.45)}
.dolce em{font:400 clamp(3.5rem,10vw,9rem)/1.1 Sacramento,cursive;font-style:normal}

/* Für jede Frau: Ruhe */
.jede{padding:var(--s6) var(--rand);max-width:1120px;margin:auto}
.jede-zitat{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.45;max-width:44rem;margin-bottom:var(--s5)}
.fakten{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);border-top:1px solid rgba(46,31,26,.2);padding-top:var(--s3)}
.fakten dt{font:400 1.5rem/1.2 "DM Serif Display",Georgia,serif;margin-bottom:.4rem}
.fakten dd{margin:0;color:var(--espresso-2)}

/* Besuch */
.besuch{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:92vh;background:var(--espresso);color:var(--crema)}
.besuch-bild{min-height:60vh;background:var(--espresso)}
.besuch-bild img{width:100%;height:100%;object-fit:cover}
.besuch-text{padding:var(--s6) var(--rand);align-self:center}
.besuch .hand{color:#F5A9C4}
address{font-style:normal;font-size:1.25rem;line-height:1.5;margin-bottom:var(--s2)}
address strong{font-weight:600}
.zeile{font-size:1.25rem;font-weight:600;display:inline-block;padding:.5rem 0;text-underline-offset:.2em}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin:var(--s3) 0}
.besuch .knopf{background:#F5A9C4;border-color:#F5A9C4;color:var(--espresso)}
.besuch .knopf:hover{background:#fff;border-color:#fff}
.besuch .knopf-rand{background:transparent;color:#F5A9C4}
.besuch .knopf-rand:hover{color:var(--espresso)}
.vip{max-width:30rem}
.vip a{font-weight:600;text-underline-offset:.2em}

/* Fuß */
.fuss{padding:var(--s4) var(--rand) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;position:relative}
.fuss img{width:82px;height:auto}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.fuss nav:last-child{margin-left:auto}
.fuss a{display:inline-block;padding:.65rem 0;text-underline-offset:.2em}
.fahne{position:absolute;left:0;right:0;top:0;display:flex;height:5px}
.fahne i{flex:1}
.fahne i:nth-child(1){background:#2F8F57}
.fahne i:nth-child(2){background:#fff}
.fahne i:nth-child(3){background:#CC3440}

/* Handy: Unten bleibt Platz für den WhatsApp-Knopf, kleine Handys rücken alles enger. */
@media (max-width:820px){
  .stange-bahn{--b:max(9rem,min(72vw,calc((100vh - 30rem)*.75),23rem));--b:max(9rem,min(72vw,calc((100svh - 30rem)*.75),23rem))}
}
@media (max-width:820px) and (max-height:700px){
  .stange-kopf{padding-top:4.75rem}
  .stange-kopf .hand{display:none}
  .teil-info{grid-template-columns:minmax(0,1fr)}
  .teil-info span{display:none}
  .teil-info strong{font-size:1.05rem}
  .teil-info b{margin:.15rem 0 .35rem}
  .teil-info .wa-knopf{padding:.3rem .5rem}
}

/* Rechtsseiten */
.recht{max-width:44rem;margin:auto;padding:var(--s5) var(--rand)}
.recht h1{font-size:clamp(2.2rem,5vw,3.2rem)}
.recht h2{font-size:1.6rem;margin:var(--s4) 0 var(--s1)}
.recht-zurueck{display:inline-block;padding:.65rem 0;font-weight:600;color:var(--himbeere)}

/* Handy */
@media (max-width:820px){
  :root{--s6:4.5rem;--s5:3rem}
  .geschichte,.jacke,.besuch{grid-template-columns:minmax(0,1fr)}
  .geschichte-film{max-width:19rem}
  .jacke-bild{justify-self:center}
  .jacke-text{max-width:none}
  .looks-raster{display:flex;flex-direction:column;gap:var(--s3)}
  .look{width:88%;margin:0}
  .look-b{align-self:flex-end}
  .fakten{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .besuch-bild{min-height:0;aspect-ratio:4/5}
  .besuch-text{padding:var(--s5) var(--rand)}
  .knoepfe .knopf{flex:1 1 100%}
  .film-hinten{padding-bottom:6.5rem}
  .film{height:380vh;height:380svh}
  .film-hinweis{left:var(--rand);right:auto;bottom:1.6rem;max-width:8.25rem;text-align:left;font-size:.8125rem;line-height:1.3}
  .fuss{padding-bottom:6rem}
  .fuss nav:last-child{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .film{height:100vh;height:100svh}
  .film-video{display:none}
  .film-hinweis{display:none}
  .wort{transition:none}
  .js .herz-auf{-webkit-mask:none;mask:none}
  .dolce{height:100vh}
  .wa::after{animation:none}
}