:root{--black:#000;--coal:#0e0c0a;--gold:#bf9150;--gold-l:#e0b97a;--ivory:#f5efe4;--muted:#b9b0a1;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--black);color:var(--ivory);font:300 1.0625rem/1.7 "League Spartan",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:var(--gold-l)}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--gold);color:#000;padding:.5rem 1rem;z-index:100}
.wrap{width:min(1120px,100% - 3rem);margin-inline:auto}
h1,h2,h3{font-weight:500;line-height:1.15;letter-spacing:.01em}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:2rem}
h2::after{content:"";display:block;width:140px;height:4px;margin-top:1rem;background:var(--gold)}
section{padding:clamp(4.5rem,10vw,8rem) 0}

.nav{position:fixed;inset:0 0 auto;z-index:50;background:#000;border-bottom:1px solid #2a2118}
.nav nav{display:flex;justify-content:space-between;align-items:center;width:min(1120px,100% - 3rem);margin:auto;height:84px}
.nav__brand{display:block}.nav__brand .logo{height:64px;width:auto;aspect-ratio:237/84;display:block}
@media (max-width:520px){.nav__brand .logo{height:52px}}
.nav ul{display:flex;gap:2rem;list-style:none;padding:0}
.nav ul a{color:var(--ivory);text-decoration:none;font-weight:400}
.nav ul a:hover{color:var(--gold-l)}
.nav__toggle{display:none;background:none;border:1px solid var(--gold);color:var(--gold-l);padding:.4rem .9rem;font:inherit;cursor:pointer}

.hero{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;padding:8rem 0 4rem;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.78)}
.hero__inner{position:relative;width:min(960px,100% - 3rem);}
.hero__logo{width:min(760px,100%);height:auto;margin:0 auto 2.5rem}
.hero h1{font-size:clamp(1.7rem,4.2vw,3rem);max-width:20ch;margin:0 auto 1rem}
.hero__slogan{color:var(--gold-l);font-weight:500;letter-spacing:.18em;font-size:.95rem;margin-bottom:2.2rem}

.btn{display:inline-block;background:var(--gold);color:#000;border:0;padding:1rem 2.6rem;font:500 1rem "League Spartan",sans-serif;letter-spacing:.08em;text-decoration:none;cursor:pointer;}
.btn:hover{background:var(--gold-l)}

.about{background:var(--coal)}
.about__photo{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--gold);padding:10px}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:28% center}
.about__lead{font-size:1.25rem;color:var(--gold-l)!important;font-weight:500}
.band{height:clamp(220px,38vw,440px);background-size:cover;background-position:center}
.about__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about__text p{margin-bottom:1.2rem;color:#e6dfd2;max-width:60ch}
.about__quote{font-size:1.35rem;font-weight:500;color:var(--gold-l)!important;border-left:3px solid var(--gold);padding-left:1.2rem}
.about__sign{font-family:"Segoe Script","Brush Script MT",cursive;font-size:1.5rem;color:var(--gold)!important;margin-top:1.5rem}

.offer__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2a2118;border:1px solid #2a2118}
.offer__list li{background:var(--black);padding:2.2rem 1.8rem}
.offer__list h3{font-size:1.35rem;color:var(--gold-l);margin-bottom:.6rem}
.offer__list p{color:var(--muted)}

.contact__grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem)}
.contact__info ul{list-style:none;padding:0;margin-top:2rem;display:grid;gap:.8rem}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.35rem;font-weight:500;font-size:.95rem;color:var(--gold-l)}
input,select,textarea{font:300 1rem "League Spartan",sans-serif;background:#120e0a;color:var(--ivory);border:1px solid #3a2e20;padding:.8rem 1rem;border-radius:0;}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form__msg{color:var(--gold-l);min-height:1.5em}

footer{border-top:1px solid #2a2118;text-align:center;padding:3rem 0;color:var(--muted)}
.footer__name{font-size:1.4rem;color:var(--gold-l);font-weight:500}
.footer__small{font-size:.85rem;margin-top:1rem}


@media (max-width:860px){
  .nav__toggle{display:block}
  .nav ul{display:none;position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:0;background:#000;border-bottom:1px solid #2a2118}
  .nav ul.open{display:flex}.nav ul a{display:block;padding:1rem 1.5rem}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .about__photo{aspect-ratio:4/3}
  .offer__list{grid-template-columns:1fr 1fr}
      }
@media (max-width:520px){.offer__list,.row{grid-template-columns:1fr}}

/* Bild "Mann": kleiner dargestellt = schärfer */
.about__grid{grid-template-columns:minmax(0,360px) 1fr;align-items:start}
.about__photo{max-width:360px;aspect-ratio:4/5;overflow:hidden}
.about__photo img{transition:transform 1.4s var(--ease)}
.about__photo:hover img{transform:scale(1.04)}

/* Seiten & Übergang */
.page[hidden]{display:none}
.contact{padding-top:9rem;min-height:80vh}
.curtain{position:fixed;inset:0;z-index:200;background:#000;opacity:0;pointer-events:none;transition:opacity .45s ease}
.curtain.on{opacity:1;pointer-events:all}
.curtain::after{content:"";position:absolute;left:50%;top:50%;width:0;height:3px;background:var(--gold);transform:translate(-50%,-50%);transition:width .6s var(--ease)}
.curtain.on::after{width:min(320px,60vw)}

/* Hero-Auftritt */
.hero__bg{animation:zoom 24s ease-in-out infinite alternate}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__inner>*{animation:up 1s var(--ease) both}
.hero__logo{animation-delay:.1s}.hero h1{animation-delay:.45s}.hero__slogan{animation-delay:.7s}.hero .btn{animation-delay:.95s}

/* Scroll-Effekte */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
h2::after{transform-origin:left;transition:transform .9s var(--ease) .3s}
.js h2.rv:not(.in)::after{transform:scaleX(0)}

/* Hover-Effekte */
.nav ul a{position:relative;padding-bottom:4px}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-l);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1)}
.btn{position:relative;overflow:hidden;transition:background .3s,transform .4s var(--ease)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{left:130%}
.offer__list li{position:relative;transition:background .4s,transform .5s var(--ease),opacity .9s var(--ease) var(--d,0ms)}
.offer__list li::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.offer__list li:hover{background:#15100a;z-index:1}
.offer__list li:hover::before{transform:scaleX(1)}
input,select,textarea{transition:border-color .3s,background .3s}
input:focus,select:focus,textarea:focus{background:#17120c}

@media (max-width:860px){.about__grid{grid-template-columns:1fr}.about__photo{max-width:320px;aspect-ratio:4/5}.contact{padding-top:7rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== Version 3 ===== */
h1{font-weight:500;line-height:1.15}
.sub h1{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:2rem}
.sub h1::after{content:"";display:block;width:140px;height:4px;margin-top:1rem;background:var(--gold)}
.sub>section:first-child{padding-top:9rem}
.hero h1{font-size:clamp(1.7rem,4.2vw,3rem)}
.hero h1::after{display:none}

/* Mann: Querformat wie Original, kleiner = schärfer */
.about__grid{grid-template-columns:minmax(0,460px) 1fr;align-items:start}
.about__photo{max-width:460px;aspect-ratio:3/2;padding:8px}
.about__photo img{object-position:center}

/* Hero Parallax */
.hero__bg{transform:translateY(var(--py,0px)) scale(1.06);animation:none}

/* Fortschrittsbalken */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:120}

/* Laufband */
.marquee{overflow:hidden;border-block:1px solid #2a2118;background:#000;padding:1.1rem 0;white-space:nowrap}
.marquee__track{display:inline-flex;animation:run 38s linear infinite}
.marquee span{padding-right:.5rem;font-size:1.5rem;font-weight:500;color:var(--gold);letter-spacing:.06em}
@keyframes run{to{transform:translateX(-50%)}}

/* Teaser-Karten (3D-Tilt) */
.teasers{background:var(--coal)}
.teasers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;perspective:900px}
.tilt{display:block;text-decoration:none;color:var(--ivory);border:1px solid #3a2e20;padding:2.4rem 2rem;background:#0a0806;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .4s,opacity .9s var(--ease) var(--d,0ms)}
.tilt:hover{border-color:var(--gold)}
.tilt h2{font-size:1.9rem;margin-bottom:.8rem}
.tilt h2::after{width:60px;height:3px;margin-top:.7rem}
.tilt p{color:var(--muted);margin-bottom:1.6rem}
.more{color:var(--gold-l);font-weight:500;display:inline-block;transition:transform .4s var(--ease)}
.tilt:hover .more{transform:translateX(8px)}

/* Fakten */
.facts{background:var(--coal);padding:clamp(3rem,6vw,5rem) 0}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.facts__grid>div{border-top:2px solid var(--gold);padding-top:1.2rem}
.facts h3{font-size:1.2rem;color:var(--gold-l);margin-bottom:.4rem}
.facts p{color:var(--muted)}

/* Angebotskarten: Licht folgt der Maus */
.glow{overflow:hidden}
.glow::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:280px;height:280px;margin:-140px 0 0 -140px;background:radial-gradient(circle,rgba(191,145,80,.28),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.glow:hover::after{opacity:1}

/* Ablauf */
.steps__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:s}
.steps__list li{counter-increment:s;border-left:2px solid var(--gold);padding-left:1.4rem}
.steps__list li::before{content:counter(s);display:block;font-size:3rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.4rem}
.steps h3{font-size:1.3rem;margin-bottom:.4rem}
.steps p{color:var(--muted)}

/* FAQ */
.faq{background:var(--coal)}
.faq__wrap{max-width:820px}
details{border-bottom:1px solid #3a2e20}
summary{cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;font-weight:500;font-size:1.15rem;position:relative;transition:color .3s}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.8rem;transition:transform .4s var(--ease)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
summary:hover{color:var(--gold-l)}
details p{padding:0 0 1.4rem;color:#d8d0c2;max-width:62ch;animation:open .5s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .about__grid{grid-template-columns:1fr}.about__photo{max-width:460px}
  .teasers__grid,.steps__list{grid-template-columns:1fr}
  .facts__grid{grid-template-columns:1fr 1fr}
  .sub>section:first-child{padding-top:7rem}
}
@media (max-width:520px){.facts__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* Logo als Vektor (SVG) – immer gestochen scharf */
.hero__logo{display:block;width:min(780px,100%);height:auto;aspect-ratio:237/84;margin:0 auto 2.5rem}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.hero__logo{animation:wipe 1.8s var(--ease) .1s both!important}
.hero__slogan{animation:up 1s var(--ease) .7s both,track 1.8s var(--ease) .7s both}
@keyframes track{from{letter-spacing:.02em}to{letter-spacing:.18em}}
.marquee:hover .marquee__track{animation-play-state:paused}
.btn{animation:up 1s var(--ease) .95s both,pulse 3.5s ease-in-out 2.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(191,145,80,.45)}50%{box-shadow:0 0 0 14px rgba(191,145,80,0)}}
.btn:not(.hero .btn){animation:none}
/* Fotos ohne Hochskalierung = scharf */
.about__photo{max-width:440px}
.about__photo:hover img{transform:none}
.offer__head{display:grid;grid-template-columns:1fr minmax(0,533px);gap:2rem;align-items:center;margin-bottom:2.5rem}
.offer__head h1{margin-bottom:0}
.party{max-width:533px;border:1px solid var(--gold);padding:8px}
.party img{width:100%;height:auto}
@media (max-width:860px){.offer__head{grid-template-columns:1fr}}

.hero__bg{transform:translateY(var(--py,0px)) scale(1.02)}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.72))}

/* Hero: Bewusst leicht weichgezeichnet, damit keine Unschärfe auffällt */
.hero__bg{filter:blur(3px);transform:translateY(var(--py,0px)) scale(1.08);background-position:center 55%}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.7))}

/* Hero: stärker weichgezeichnet = wirkt wie hochwertiger Hintergrund (Bokeh) */
.hero__bg{filter:blur(9px) saturate(1.1);transform:translateY(var(--py,0px)) scale(1.15)}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.66))}

/* Hero: stärker weichgezeichnet, wie ein weicher Bokeh-Hintergrund */
.hero__bg{filter:blur(10px) saturate(1.1);transform:translateY(var(--py,0px)) scale(1.15)}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.66))}

/* Hero: weich verschwommen, Unschärfe wirkt gewollt */
.hero__bg{filter:blur(4px);transform:translateY(var(--py,0px)) scale(1.1);background-position:center 40%}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.68))}

.hero__bg{background-position:center 55%;transform:translateY(var(--py,0px)) scale(1.04)}
.hero__bg::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.68))}

.about__photo{aspect-ratio:960/487}

/* ===== Wow-Effekte pro Seite ===== */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Seitenübergänge (je Ziel anders) */
.curtain{clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s;opacity:1}
.curtain::after{display:none}
.curtain.on{visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
.curtain[data-fx=iris]{clip-path:circle(0% at 50% 50%)}.curtain.on[data-fx=iris]{clip-path:circle(110% at 50% 50%)}
.curtain[data-fx=drop]{clip-path:inset(0 0 100% 0)}.curtain.on[data-fx=drop]{clip-path:inset(0 0 0 0)}
.curtain[data-fx=diag]{clip-path:polygon(0 0,0 0,0 0)}.curtain.on[data-fx=diag]{clip-path:polygon(0 0,260% 0,0 260%)}
.curtain[data-fx=split]{clip-path:inset(50% 0 50% 0)}.curtain.on[data-fx=split]{clip-path:inset(0 0 0 0)}

/* 1 STARTSEITE: Blende öffnet sich wie eine Kamera, Ring pulsiert, Logo glüht */
.hero__bg{animation:iris 2.2s var(--ease) both}
@keyframes iris{from{clip-path:circle(0% at 50% 45%)}to{clip-path:circle(110% at 50% 45%)}}
.hero__inner::before{content:"";position:absolute;left:50%;top:32%;width:0;height:0;border:2px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:ring 2.4s var(--ease) .15s both}
@keyframes ring{from{width:0;height:0;opacity:.9}to{width:170vmax;height:170vmax;opacity:0}}
.hero__logo{animation:wipe 1.8s var(--ease) .1s both,glow 5s ease-in-out 2.2s infinite!important}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(224,185,122,0))}50%{filter:drop-shadow(0 0 16px rgba(224,185,122,.5))}}

/* 2 ÜBER UNS: Schärfe-Ziehen – Wörter kommen aus der Unschärfe, Foto fährt wie ein Rollladen herunter */
.about__photo{animation:shutter 1.5s var(--ease) .1s backwards}
.about__photo img{animation:settle 2.2s var(--ease) .1s backwards}
@keyframes shutter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.45)}to{transform:scale(1)}}
.w{display:inline-block;animation:focus .9s var(--ease) calc(.5s + var(--i)*13ms) backwards}
@keyframes focus{from{opacity:0;filter:blur(10px);transform:translateY(.7em) scale(1.15)}to{opacity:1;filter:blur(0);transform:none}}

/* 3 ANGEBOT: Karten klappen wie Speisekarten-Tafeln aus der Decke */
.offer__list li{animation:flip 1s var(--ease) calc(.2s + var(--d,0ms)) backwards;transform-origin:top center}
@keyframes flip{from{opacity:0;transform:perspective(800px) rotateX(-85deg) translateY(-40px)}to{opacity:1;transform:none}}

/* 4 KONTAKT: Gold-Licht kreist um das Formular, Felder schnappen nacheinander ein */
form{padding:2rem;border:1px solid transparent;background:linear-gradient(#0a0806,#0a0806) padding-box,conic-gradient(from var(--a),transparent 0 62%,var(--gold) 82%,var(--gold-l) 88%,transparent 92%) border-box;animation:spin 6s linear infinite,pop .9s var(--ease) .25s backwards}
@keyframes spin{to{--a:360deg}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
form>*{animation:field .7s var(--ease) backwards}
form>*:nth-child(1){animation-delay:.6s}form>*:nth-child(2){animation-delay:.72s}form>*:nth-child(3){animation-delay:.84s}form>*:nth-child(4){animation-delay:.96s}form>*:nth-child(5){animation-delay:1.08s}form>*:nth-child(6){animation-delay:1.2s}
@keyframes field{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.contact__info h1,.contact__info>p{animation:up .9s var(--ease) .15s backwards}
.contact__info li{animation:slide .8s var(--ease) backwards;border-left:2px solid var(--gold);padding-left:1rem}
.contact__info li:nth-child(1){animation-delay:.5s}.contact__info li:nth-child(2){animation-delay:.65s}.contact__info li:nth-child(3){animation-delay:.8s}.contact__info li:nth-child(4){animation-delay:.95s}
@keyframes slide{from{opacity:0;transform:translateX(-50px);border-left-width:0}to{opacity:1;transform:none}}

.about__photo{max-width:460px;aspect-ratio:740/493}
@media (max-width:860px){.contact{padding-top:7rem}form{padding:1.4rem}}

@media (prefers-reduced-motion:reduce){.hero__logo,.hero__bg,.hero__inner::before,.w,form,form>*{animation:none!important}}

/* ===== FLÜSSIG: nur transform + opacity (GPU), keine Blur-/Clip-/Layout-Animationen ===== */
html{scroll-behavior:smooth}
.hero__bg,.hero__logo,.hero__inner>*,.about__photo,.offer__list li,form,.curtain i,.marquee__track{backface-visibility:hidden}

/* Seitenübergang */
.curtain{clip-path:none!important;transition:visibility 0s .7s!important;visibility:hidden;pointer-events:none}
.curtain.on{visibility:visible;pointer-events:all;transition:visibility 0s!important}
.curtain i{position:absolute;inset:0;background:#000;transform:translateY(-100%);transition:transform .65s cubic-bezier(.65,0,.35,1);will-change:transform}
.curtain.on i{transform:none}
.curtain[data-fx=iris] i{inset:auto;left:50%;top:50%;width:125vmax;height:125vmax;margin:-62.5vmax 0 0 -62.5vmax;border-radius:50%;transform:scale(0)}
.curtain.on[data-fx=iris] i{transform:scale(1)}
.curtain[data-fx=diag] i{inset:0 -30%;transform:translateX(-125%) skewX(-20deg)}
.curtain.on[data-fx=diag] i{transform:translateX(0) skewX(-20deg)}
.curtain[data-fx=split] i{transform:scaleY(0)}
.curtain.on[data-fx=split] i{transform:scaleY(1)}

/* 1 Startseite */
.hero__bg{transform:scale(1.04);animation:bgin 1.6s var(--ease) both}
@keyframes bgin{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1.04)}}
.hero__logo{animation:logoin 1.4s var(--ease) .15s both!important}
@keyframes logoin{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.hero__inner::before{width:130vmax;height:130vmax;top:32%;transform:translate(-50%,-50%) scale(0);animation:ring 2.6s cubic-bezier(.2,.6,.2,1) .2s both}
@keyframes ring{from{transform:translate(-50%,-50%) scale(0);opacity:.8}to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.hero__inner::after{content:"";position:absolute;left:50%;top:22%;width:70%;aspect-ratio:2;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(224,185,122,.14),transparent);opacity:0;pointer-events:none;animation:breathe 6s ease-in-out 1.6s infinite}
@keyframes breathe{0%,100%{opacity:0}50%{opacity:1}}

/* 2 Über uns: Foto + Absätze gleiten nacheinander ein */
.about__photo{animation:rise 1.1s var(--ease) .1s backwards}
.about__photo img{animation:settle 1.8s var(--ease) .1s backwards}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.2)}to{transform:scale(1)}}
.about__text>*{animation:rise .95s var(--ease) backwards}
.about__text>:nth-child(1){animation-delay:.2s}.about__text>:nth-child(2){animation-delay:.3s}.about__text>:nth-child(3){animation-delay:.4s}.about__text>:nth-child(4){animation-delay:.5s}.about__text>:nth-child(5){animation-delay:.6s}.about__text>:nth-child(6){animation-delay:.7s}.about__text>:nth-child(7){animation-delay:.8s}.about__text>:nth-child(8){animation-delay:.9s}

/* 3 Angebot */
.offer__list li{animation:flip .9s var(--ease) calc(.15s + var(--d,0ms)) backwards}
@keyframes flip{from{opacity:0;transform:perspective(900px) rotateX(-60deg) translateY(-24px)}to{opacity:1;transform:none}}

/* 4 Kontakt: Licht kreist per Rotation (GPU) statt per Farbverlauf-Animation */
form{position:relative;overflow:hidden;isolation:isolate;border:0;background:#0a0806;animation:pop .9s var(--ease) .2s backwards}
form::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(transparent 0 68%,var(--gold) 84%,var(--gold-l) 90%,transparent 94%);animation:rot 8s linear infinite;will-change:transform}
form::after{content:"";position:absolute;inset:1.5px;background:#0a0806;z-index:-1}
@keyframes rot{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.hero__logo,.hero__bg,.hero__inner::before,.hero__inner::after,form,form::before,form>*,.about__text>*,.about__photo,.about__photo img{animation:none!important}.curtain i{transition:none}}

/* ===== SCHNELL: kurze Übergänge, schnelle Einblendungen ===== */
.curtain{transition:visibility 0s .3s!important}
.curtain i{transition:transform .3s cubic-bezier(.65,0,.35,1)}
.hero__bg{animation-duration:1s}
.hero__logo{animation:logoin .8s var(--ease) .05s both!important}
.hero h1{animation:up .7s var(--ease) .2s both}
.hero__slogan{animation:up .7s var(--ease) .32s both}
.hero .btn{animation:up .7s var(--ease) .44s both,pulse 3.5s ease-in-out 1.4s infinite}
.hero__inner::before{animation-duration:1.8s;animation-delay:.05s}
.about__photo{animation:rise .6s var(--ease) 0s backwards}
.about__text>*{animation-duration:.6s}
.about__text>:nth-child(1){animation-delay:.04s}.about__text>:nth-child(2){animation-delay:.09s}.about__text>:nth-child(3){animation-delay:.14s}.about__text>:nth-child(4){animation-delay:.19s}.about__text>:nth-child(5){animation-delay:.24s}.about__text>:nth-child(6){animation-delay:.29s}.about__text>:nth-child(7){animation-delay:.34s}.about__text>:nth-child(8){animation-delay:.39s}
.offer__list li{animation:flip .55s var(--ease) calc(.03s + var(--d,0ms)/2.5) backwards}
form{animation-duration:.5s;animation-delay:.03s}
form>*{animation-duration:.45s}
form>*:nth-child(1){animation-delay:.12s}form>*:nth-child(2){animation-delay:.17s}form>*:nth-child(3){animation-delay:.22s}form>*:nth-child(4){animation-delay:.27s}form>*:nth-child(5){animation-delay:.32s}form>*:nth-child(6){animation-delay:.37s}
.contact__info h1,.contact__info>p{animation-duration:.5s;animation-delay:.03s}
.contact__info li{animation-duration:.5s}
.contact__info li:nth-child(1){animation-delay:.1s}.contact__info li:nth-child(2){animation-delay:.15s}.contact__info li:nth-child(3){animation-delay:.2s}.contact__info li:nth-child(4){animation-delay:.25s}
.js .rv{transition:opacity .5s var(--ease) calc(var(--d,0ms)/2),transform .5s var(--ease) calc(var(--d,0ms)/2)}

/* ===== Foto Über uns: scharf – kein Zoom, keine Layer-Tricks, kleinere Darstellung ===== */
.about__photo,.about__photo img{backface-visibility:visible;will-change:auto}
.about__photo img{animation:none;transform:none;transition:none;image-rendering:auto}
.about__photo{max-width:420px}
@media (min-width:861px){.about__grid{grid-template-columns:minmax(0,420px) 1fr}}