@font-face{font-family:'Archivo';src:url('../fonts/archivo.woff2') format('woff2');font-weight:400 800;font-stretch:75% 100%;font-display:swap}

:root{
  --blau:#172e40;--blau-tief:#0e1e2b;--blau-hell:#21415a;
  --koralle:#ff6e5f;--sand:#ece0d4;--sand-hell:#f6f0e9;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1120px;
  --z-nav:50;--z-skip:60;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--blau-tief);color:var(--sand);font-family:'Archivo',system-ui,sans-serif;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;word-spacing:.1em;line-height:1.02;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal;color:var(--koralle)}
:focus-visible{outline:3px solid var(--koralle);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--koralle);color:var(--blau-tief);padding:10px 16px;border-radius:8px;z-index:var(--z-skip);font-weight:700}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}

.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--koralle);margin-bottom:20px}
.eyebrow.dark{color:var(--koralle)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:52ch;opacity:.82;margin:22px 0 32px}
.lead.center{margin-inline:auto;text-align:center}
.small{font-size:.9rem;opacity:.7}
.tiny{font-size:.75rem;opacity:.7}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--koralle);color:var(--blau-tief);font:inherit;font-weight:700;font-size:1rem;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;box-shadow:0 10px 30px -10px rgba(255,110,95,.7);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,110,95,.85);background:#ff8173}
.btn:active{transform:scale(.98)}
.btn.big{font-size:1.15rem;padding:18px 36px}
.link-arrow{font-weight:700;text-decoration:none;color:var(--sand);padding:14px 4px}
.link-arrow::after{content:" →";display:inline-block;transition:transform .35s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}

/* Navigation */
.nav{color:var(--sand);position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);background:rgba(14,30,43,.62);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid rgba(236,224,212,.08)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;width:min(1280px,100% - 40px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.brand img{width:28px;height:28px}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{text-decoration:none;font-size:.88rem;opacity:.78;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav-cta{justify-self:end;background:var(--sand);color:var(--blau-tief);text-decoration:none;font-weight:700;font-size:.85rem;padding:7px 16px;border-radius:999px;transition:background .2s,transform .2s}
.nav-cta:hover{background:#fff}
.nav-cta:active{transform:scale(.97)}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* Hero */
.hero{position:relative;min-height:100dvh;display:grid;place-items:center;text-align:center;padding:120px 24px 90px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,var(--blau-hell) 0%,var(--blau) 45%,var(--blau-tief) 100%)}
.hero-inner{position:relative;z-index:2;max-width:980px}
.hero h1{font-size:clamp(3.2rem,10.5vw,8.6rem);letter-spacing:-.05em;line-height:.94}
.hero-sub{font-size:clamp(1.1rem,2vw,1.55rem);max-width:34ch;margin:28px auto 0;opacity:.82}
.hero-actions{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:38px}
.hero-ball{position:absolute;z-index:1;left:50%;bottom:-14%;width:min(560px,82vw);translate:-50% 0;opacity:.11;pointer-events:none;will-change:transform}
.hero-ball img{width:100%;height:auto;animation:schweben 9s ease-in-out infinite}
.hero-rays{position:absolute;inset:-40%;z-index:0;background:repeating-conic-gradient(from 0deg at 50% 62%,rgba(255,110,95,.10) 0 5deg,transparent 5deg 15deg);mask-image:radial-gradient(circle at 50% 62%,#000 0,transparent 55%);-webkit-mask-image:radial-gradient(circle at 50% 62%,#000 0,transparent 55%);animation:drehen 80s linear infinite}
.hero-rays.soft{opacity:.7}
.hero-grain,.advent::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-cue{position:absolute;z-index:2;bottom:28px;left:50%;translate:-50% 0;width:26px;height:42px;border:2px solid rgba(236,224,212,.4);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--sand);border-radius:2px;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes schweben{50%{transform:translateY(-14px) rotate(2.5deg)}}

/* Manifest */
.manifest{background:var(--sand);color:var(--blau);padding:clamp(100px,16vw,220px) 0}
.manifest-text{word-spacing:.04em;font-size:clamp(1.9rem,5.2vw,4.3rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;max-width:22ch;text-wrap:balance}
.manifest-text .w{transition:opacity .5s var(--ease),color .5s var(--ease)}
.js .manifest-text .w{opacity:.18}
.js .manifest-text .w.on{opacity:1}
.manifest-text .w.hl.on{color:var(--koralle)}

/* Säulen */
.pillars{background:var(--sand-hell);color:var(--blau);padding:clamp(40px,8vw,110px) 0 clamp(90px,14vw,180px)}
.pillar{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(40px,6vw,90px) 0}
.pillar.flip{grid-template-columns:1fr 1.1fr}
.pillar.flip .pillar-visual{order:2}
.pillar-visual{aspect-ratio:4/3;border-radius:40px;display:grid;place-items:center;padding:8%;position:relative;overflow:hidden;box-shadow:0 40px 80px -40px rgba(23,46,64,.55)}
.pillar-visual.v1{background:radial-gradient(90% 90% at 20% 0%,var(--blau-hell),var(--blau))}
.pillar-visual.v2{background:radial-gradient(90% 90% at 80% 0%,#2b4d68,var(--blau-tief))}
.pillar-visual.v3{background:radial-gradient(90% 90% at 50% 100%,#ff8a7d,var(--koralle) 60%,#e5584a)}
.pillar-visual svg{width:100%;height:100%;overflow:visible}
.draw .c{stroke:var(--koralle)}
.draw .s{stroke:var(--sand);fill:var(--sand)}
.v3 .draw .c{stroke:var(--sand-hell)}
.v3 .draw .s{stroke:var(--blau);fill:var(--blau)}
.js .draw .c{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.2s var(--ease) .2s}
.js .in .draw .c{stroke-dashoffset:0}
.js .draw .s{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2) rotate(-40deg);transition:opacity .8s var(--ease) 1.2s,transform 1.2s var(--ease) 1.2s}
.js .in .draw .s{opacity:1;transform:none;animation:funkel 3.4s ease-in-out 2.4s infinite}
.num{font-size:.9rem;font-weight:700;letter-spacing:.14em;color:var(--koralle);margin-bottom:16px}
.pillar-copy h2{font-size:clamp(2.1rem,4.6vw,3.8rem);margin-bottom:22px}
.pillar-copy p:last-child{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:44ch;opacity:.78}

/* Veranstaltungen */
.events{background:var(--sand);color:var(--blau);padding:clamp(90px,12vw,170px) 0}
.events h2{font-size:clamp(2.4rem,6vw,5rem)}
.events .lead{color:var(--blau)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 36px;max-width:760px}
.chips li{padding:10px 20px;border-radius:999px;background:var(--sand-hell);box-shadow:inset 0 0 0 1.5px rgba(23,46,64,.14);font-weight:700;font-size:.95rem;transition:background .3s,color .3s,transform .35s var(--ease)}
.chips li:hover{background:var(--blau);color:var(--sand);transform:translateY(-2px)}
.events-note{max-width:52ch;opacity:.8}
.events-note a{color:var(--koralle);font-weight:700}

/* Instagram */
.insta{background:linear-gradient(180deg,var(--blau-tief),var(--blau));padding:clamp(100px,14vw,200px) 0}
.insta h2{font-size:clamp(2.4rem,6vw,5rem)}
.insta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,110px);align-items:center}
.phone{justify-self:center;width:min(360px,100%);padding:12px;border-radius:52px;background:linear-gradient(160deg,#2a3f50,#0a151f);box-shadow:0 60px 100px -40px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(236,224,212,.18)}
.phone-screen{background:var(--sand-hell);color:var(--blau);border-radius:40px;min-height:540px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 12px;overflow:hidden}
.ig-gate{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px}
.ig-gate img{width:72px;height:72px}
.phone-screen iframe{max-width:100%}

/* Advent */
.advent{position:relative;background:radial-gradient(90% 60% at 50% 0%,#32231f 0%,var(--blau-tief) 60%);padding:clamp(100px,14vw,200px) 0;text-align:center;overflow:hidden}
.advent::after{opacity:.05}
.advent>.wrap{position:relative;z-index:2}
.advent-title{font-size:clamp(2.8rem,9vw,7.4rem);letter-spacing:-.05em;line-height:.96}
.countdown{display:flex;justify-content:center;gap:clamp(8px,2vw,22px);margin:56px 0 14px;flex-wrap:wrap}
.cd{min-width:clamp(78px,15vw,160px);padding:clamp(16px,2.6vw,30px) 8px;border-radius:28px;background:linear-gradient(180deg,rgba(236,224,212,.12),rgba(236,224,212,.04));box-shadow:inset 0 1px 0 rgba(236,224,212,.25),0 30px 60px -30px rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.cd b{display:block;font-size:clamp(2.4rem,8vw,5.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:10px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--koralle)}
.cd b.tick{animation:tick .45s var(--ease)}
@keyframes tick{from{transform:translateY(-10px);opacity:.3}to{transform:none;opacity:1}}
.cd-text{min-height:1.6em;font-weight:700}

.doors{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.6vw,18px);max-width:820px;margin:clamp(56px,8vw,96px) auto clamp(48px,6vw,72px);perspective:900px}
.door{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .8s var(--ease);cursor:default;outline-offset:4px}
.door>*{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door .front{background:linear-gradient(160deg,var(--blau-hell),var(--blau));font-weight:800;font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:-.03em;box-shadow:inset 0 0 0 1.5px rgba(255,110,95,.5),0 14px 30px -14px rgba(0,0,0,.8);transform-origin:left center}
.door:nth-child(3n) .front{background:linear-gradient(160deg,#ff8a7d,var(--koralle));color:var(--blau-tief);box-shadow:0 14px 30px -14px rgba(255,110,95,.7)}
.door:nth-child(24) .front{background:linear-gradient(160deg,#fff,var(--sand));color:var(--blau)}
.door .back{background:var(--blau-tief);color:var(--koralle);font-size:clamp(.7rem,1.4vw,.95rem);font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(236,224,212,.25)}
.door:hover,.door.open{transform:rotateY(-24deg) translateY(-4px)}
.js .doors .door{opacity:0;transform:translateY(24px) scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .doors.in .door{opacity:1;transform:none;transition-delay:calc(var(--i)*40ms)}
.js .doors.in .door:hover{transform:rotateY(-24deg) translateY(-4px);transition-delay:0s}
.advent-cta{display:flex;flex-direction:column;align-items:center;gap:18px}

/* Footer */
.footer{color:var(--sand);background:var(--blau-tief);border-top:1px solid rgba(236,224,212,.1);padding:34px 0;font-size:.85rem}
.footer-inner{width:min(1280px,100% - 40px);margin-inline:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;opacity:.8}
.footer-links{display:flex;gap:22px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--koralle)}

/* Rechtliche Seiten */
body.legal-page{background:var(--sand-hell);color:var(--blau)}
.legal-page .nav{background:rgba(14,30,43,.9)}
.legal{max-width:760px;margin-inline:auto;padding:130px 24px 100px}
.legal h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:34px}
.legal h2{font-size:1.2rem;letter-spacing:-.01em;margin:34px 0 8px;color:var(--blau)}
.legal p{margin-bottom:12px;opacity:.88}
.legal a{color:var(--koralle);font-weight:700}
.legal-page .footer{background:var(--blau-tief)}

@keyframes funkel{50%{transform:scale(.88) rotate(8deg);opacity:.75}}

@media(max-width:860px){
  .nav-inner{grid-template-columns:1fr auto}
  .nav nav{display:none}
  .pillar,.pillar.flip,.insta-grid{grid-template-columns:1fr}
  .pillar.flip .pillar-visual{order:0}
  .hero-ball{opacity:.09;bottom:-6%}
}
@media(max-width:480px){
  .brand span{font-size:.88rem}
  .door .front{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .doors .door{opacity:1;transform:none}
  .js .draw .c{stroke-dashoffset:0}.js .draw .s{opacity:1;transform:none}
  .js .manifest-text .w{opacity:1}
}