/* the DARLING – Teaser · Phase 1 */
@font-face{font-family:"Million Orchids";src:url("../assets/fonts/MillionOrchids.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thegeck";src:url("../assets/fonts/Thegeck.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Behind The Nineties Sans";src:url("../assets/fonts/BehindTheNinetiesSans-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Behind The Nineties Sans";src:url("../assets/fonts/BehindTheNinetiesSans-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Geomanist";src:url("../assets/fonts/Geomanist-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geomanist";src:url("../assets/fonts/Geomanist-Bold.otf") format("opentype");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --ecru:#f3ede1;--and-blau:#213a8f;--and-rot:#b61918;--and-rosa:#e3809e;
  --blau-deep:oklch(0.33 0.13 266);--blau-soft:oklch(0.9 0.04 266);--text-muted:oklch(0.45 0.08 266);
  --font-script:"Million Orchids",cursive;
  --font-display:"Thegeck",Impact,sans-serif;
  --font-eye:"Behind The Nineties Sans",Georgia,serif;
  --font-body:"Geomanist",system-ui,sans-serif;
  --paper:url("../assets/img/paper.jpg");
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Tag / Nacht ---------- */
:root,[data-theme="night"]{
  --pg:var(--blau-deep);--ink:var(--ecru);--accent:var(--and-rosa);--muted:oklch(0.85 0.03 266);
  --lamp:radial-gradient(ellipse 58% 42% at 50% 46%,oklch(0.42 0.13 266) 0%,oklch(0.42 0.13 266 / 0) 72%);
  --flap-bg:oklch(0.21 0.085 266);--flap-bg2:oklch(0.185 0.075 266);--flap-ink:var(--ecru);--flap-line:oklch(0.11 0.04 266);
  --wall:oklch(0.25 0.1 266);--wall-light:radial-gradient(ellipse 46% 55% at 50% 0%,oklch(0.36 0.12 266) 0%,oklch(0.36 0.12 266 / 0) 75%);
  --poster-light:radial-gradient(ellipse 95% 75% at 50% 6%,rgba(30,36,80,0) 30%,rgba(12,18,52,.62) 100%);
  --foot:var(--and-rot);--env-shadow:oklch(0.3 0.12 27);--rumour:var(--ecru);
  --vig:radial-gradient(ellipse 85% 80% at 50% 50%,rgba(8,14,44,0) 50%,rgba(8,14,44,.78) 100%);
  --grain-op:.17;--paper-op:.55;
}
[data-theme="day"]{
  --pg:var(--ecru);--ink:var(--and-blau);--accent:var(--and-rot);--muted:var(--text-muted);
  --lamp:none;
  --flap-bg:var(--and-blau);--flap-bg2:var(--blau-deep);--flap-ink:var(--ecru);--flap-line:oklch(0.22 0.09 266);
  --wall:var(--blau-soft);--wall-light:radial-gradient(ellipse 60% 60% at 30% 0%,var(--ecru) 0%,rgba(243,237,225,0) 75%);
  --poster-light:radial-gradient(ellipse 120% 90% at 25% 0%,rgba(120,130,190,0) 45%,rgba(70,86,150,.32) 100%);
  --foot:var(--and-blau);--env-shadow:oklch(0.2 0.08 266);--rumour:var(--and-blau);
  --vig:radial-gradient(ellipse 90% 85% at 50% 50%,rgba(33,58,143,0) 58%,rgba(33,58,143,.22) 100%);
  --grain-op:.11;--paper-op:1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--pg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow-x:clip;min-height:100vh}
a{color:inherit;text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--accent)}
::selection{background:var(--and-rosa);color:var(--ecru)}
img{display:block}

/* ---------- Overlays: Papier, Filmkorn, Vignette ---------- */
.fx{position:fixed;inset:0;pointer-events:none}
.fx-paper{z-index:60;background-image:var(--paper);background-size:900px;mix-blend-mode:multiply;opacity:var(--paper-op)}
.fx-grain{z-index:61;background-image:var(--grain);background-size:220px;mix-blend-mode:overlay;opacity:var(--grain-op)}
.fx-vig{z-index:62;background:var(--vig)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:580px;overflow:hidden;background:var(--lamp)}
.man{position:absolute;z-index:1;transform-origin:50% 100%;will-change:transform}
.man img{height:100%;width:auto}
.glint{position:absolute;left:56.6%;top:21%;width:7%;aspect-ratio:1;margin:-3.5% 0 0 -3.5%;opacity:0;pointer-events:none}
.glint svg{width:100%;height:100%}
.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .snow{z-index:2}

.social-top{position:absolute;top:clamp(14px,2.6svh,28px);left:0;right:0;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:0 16px;font-size:clamp(12px,1.1vw,14px);letter-spacing:.02em}
.social-top a,.social-foot a{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.social-top a:hover{color:var(--accent)}

.hero-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center}
.hero-logo{margin:0 0 clamp(20px,4svh,44px)}
.hero-logo img{height:clamp(64px,17vw,124px);width:auto}
.logo-blau{display:none}
[data-theme="day"] .logo-ecru{display:none}
[data-theme="day"] .logo-blau{display:block}
.hero-group{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4svh,26px)}
.melting{margin:0;font-family:var(--font-script);font-weight:400;font-size:clamp(44px,6.6vw,84px);line-height:.9;color:var(--accent);transform:rotate(-4deg)}
.board{--fw:clamp(24px,6.4vw,84px);--flap-font:var(--font-display);--label-font:var(--font-eye);--label-size:clamp(11px,1.1vw,14px);--label-ink:var(--muted);--sep-ink:var(--ink);--flap-shift:0.04em;color:var(--ink)}
.hero-spacer{height:clamp(72px,12svh,140px)}

/* Mobil & Tablet: Schneemann hinter dem Countdown */
@media (max-width:1023px){
  .man{height:min(130svh,230vw);bottom:-36svh;left:calc(-14vw - max(0px,(720px - 100vw) * .4))}
  .hero-inner{justify-content:flex-start;padding:calc(clamp(14px,2.6svh,28px) + 64px) 16px 64px}
  .hero-group{margin:2svh 0 0}
}
/* Desktop: Schneemann so skaliert, dass sein Arm 24px Abstand zum Countdown hält */
@media (min-width:1024px){
  .man{--H:min(130svh,calc((76vw - 4.83 * min(6.4vw,84px) - 24px) / 0.716));height:var(--H);bottom:calc(var(--H) * -0.28);left:-14vw}
  .hero-inner{justify-content:center;padding:0 16px}
  .hero-group{margin:clamp(48px,11svh,130px) 0 0 24vw}
}

/* ---------- Lebendes Poster ---------- */
.poster-sec{position:relative;background:var(--wall);padding:clamp(88px,13vw,180px) clamp(20px,5vw,64px);overflow:hidden}
.poster-sec::before{content:"";position:absolute;inset:0;background:var(--wall-light);pointer-events:none}
.poster-sec .snow{z-index:4}
.rumour{position:relative;z-index:2;margin:0 auto clamp(48px,8vw,96px);max-width:1120px;text-align:center;font-family:var(--font-body);font-weight:900;font-size:clamp(40px,7.4vw,104px);line-height:.95;letter-spacing:-.01em;color:var(--rumour);text-wrap:balance}
.poster-row{position:relative;z-index:2;max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(56px,9vw,120px)}
.frame{flex:1 1 320px;max-width:500px;padding:clamp(14px,2.6vw,24px);background:var(--and-rosa);border-radius:6px;box-shadow:12px 12px 0 oklch(0.55 0.13 0);transform:rotate(-1.4deg)}
.frame-inner{padding:clamp(6px,1vw,9px);border:2px dotted var(--ecru);border-radius:3px}
.canvas{position:relative;width:100%;aspect-ratio:1440 / 1948;overflow:hidden;background:var(--blau-soft)}
.zoom{position:absolute;inset:0;transform-origin:50% 30%}
.zoom img{width:100%;height:100%;object-fit:cover}
.light{position:absolute;inset:0;background:var(--poster-light);mix-blend-mode:multiply;pointer-events:none}
.lines{flex:1 1 280px;max-width:420px;display:flex;flex-direction:column;gap:clamp(44px,8vw,96px)}
.line{margin:0;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(18px);transition:opacity 1400ms var(--ease),transform 1400ms var(--ease)}
.line.is-in{opacity:1;transform:none}
.line span{font-family:var(--font-eye);font-style:italic;font-size:clamp(28px,3.3vw,42px);line-height:1.12;text-wrap:balance}

/* ---------- Footer ---------- */
.foot{position:relative;background:var(--foot);color:var(--ecru);padding:clamp(88px,12vw,160px) 20px 28px;display:flex;flex-direction:column;align-items:center;gap:clamp(64px,9vw,104px)}
.letter{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:660px;min-height:clamp(300px,52vw,420px);padding:clamp(26px,5vw,52px);background-color:var(--ecru);background-image:var(--paper);background-size:900px;background-blend-mode:multiply;color:var(--and-blau);text-decoration:none;border:9px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--and-rot) 0 12px,var(--ecru) 12px 20px,var(--and-blau) 20px 32px,var(--ecru) 32px 40px) 9;box-shadow:8px 8px 0 var(--env-shadow);transform:rotate(-1.6deg);transition:transform 320ms var(--ease),box-shadow 320ms var(--ease)}
.letter:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:10px 10px 0 var(--and-rosa);color:var(--and-blau)}
.letter:active{transform:rotate(0) translate(1px,1px);box-shadow:none}
.letter-flap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stamp{position:absolute;top:clamp(14px,2.4vw,24px);right:clamp(14px,2.4vw,24px);width:clamp(66px,11vw,96px);aspect-ratio:.82;background:var(--and-rot);border:5px dotted var(--ecru);outline:1.5px solid var(--and-rot);outline-offset:-10px;display:flex;align-items:center;justify-content:center;transform:rotate(3deg)}
.stamp img{width:58%;height:auto}
.postmark{position:absolute;top:clamp(26px,4vw,44px);right:clamp(64px,13vw,118px);width:104px;height:104px;transform:rotate(-14deg);pointer-events:none;color:var(--and-blau)}
.postmark img,.postmark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.postmark text{font-family:var(--font-display);font-size:16px;letter-spacing:.06em;fill:var(--and-blau)}
.postmark b{position:absolute;inset:30%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.06em}
.letter-text{position:relative;display:flex;flex-direction:column;gap:6px}
.letter-script{font-family:var(--font-script);font-size:clamp(40px,6.4vw,66px);line-height:.9;color:var(--and-rot);transform:rotate(-4deg);transform-origin:0 100%}
.letter-caps{font-family:var(--font-display);font-size:clamp(44px,8.6vw,88px);line-height:.9;letter-spacing:.02em;text-transform:uppercase}
.letter-mail{margin-top:clamp(14px,2.4vw,24px);padding-bottom:6px;border-bottom:1.5px solid var(--and-blau);font-family:var(--font-eye);font-style:italic;font-size:clamp(17px,2vw,22px);display:flex;justify-content:space-between;gap:12px}
.social-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;font-size:15px}
.social-foot a{gap:9px;color:var(--ecru)}
.social-foot a:hover{color:var(--and-rosa)}
.legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;font-size:13px;letter-spacing:.02em}
.legal a:hover{color:var(--and-rosa)}
.est{font-family:var(--font-eye);font-style:italic}

/* ---------- Rechtliche Seiten ---------- */
.doc{min-height:100vh;background-color:var(--ecru);background-image:var(--paper);background-size:900px;background-blend-mode:multiply;color:var(--and-blau);line-height:1.6;padding:clamp(28px,5vw,56px) 20px clamp(64px,8vw,96px)}
.doc a{color:var(--and-rot)}
.doc a:hover{color:var(--and-blau)}
.doc-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,60px)}
.doc-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.doc-head img{height:28px;width:auto}
.doc-back{font-family:var(--font-eye);font-style:italic;font-size:15px;text-decoration:none}
.doc-title{display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--and-blau);border-bottom:1.5px solid var(--and-blau);padding:28px 0}
.doc-title h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(44px,9.4vw,84px);line-height:.9;letter-spacing:.02em;text-transform:uppercase}
.doc-title p{margin:0;font-family:var(--font-eye);font-style:italic;font-size:clamp(18px,2.4vw,22px);line-height:1.35;text-wrap:pretty}
.doc-block{display:flex;flex-direction:column;gap:22px}
.doc-block + .doc-block{border-top:1.5px solid var(--and-blau);padding-top:32px}
.doc-block h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,4vw,34px);letter-spacing:.03em;text-transform:uppercase}
.doc-block .sub{margin:-18px 0 0;font-family:var(--font-eye);font-style:italic;font-size:15px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px 40px}
.doc-grid h3{margin:0 0 6px;font-family:var(--font-eye);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--and-rot)}
.doc-grid p,.doc-text p{margin:0}
.doc-text{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.65;text-wrap:pretty}
.doc-text h2{font-size:24px}
.fill{background:var(--and-rosa);padding:0 4px}
.doc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;border-top:3px solid var(--and-blau);padding-top:18px}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .line{opacity:1;transform:none;transition:none}
  .letter{transition:none}
  .glint{display:none}
}