/* Layout: schwarzer Vorhang mit Logo-Intro, darunter eine ruhige, breite Einspalten-Seite mit goldenen Haarlinien */
:root{
  --ink:#0B0C0E;
  --ink-2:#121417;
  --ivory:#EDE8DF;
  --muted:#A7A196;
  --gold:#C8A96A;
  --gold-hi:#E3C98E;
  --gold-deep:#A8874A;
  --line:rgba(200,169,106,.22);
  --display:'Michroma','Eurostile','Arial Black',sans-serif;
  --body:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html.locked,html.locked body{overflow:hidden}
body{background:var(--ink);color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
h1,h2,h3{text-wrap:balance;font-weight:400;margin:0}
p{margin:0}

/* ---------- INTRO ---------- */
#intro{position:fixed;inset:0;z-index:50;cursor:pointer;color:var(--ivory)}
#intro .half{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform 1.1s cubic-bezier(.77,0,.18,1) .55s}
#intro .half.t{top:0;border-bottom:1px solid transparent}
#intro .half.b{bottom:0}
#intro .glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(200,169,106,.10),transparent 70%);transition:opacity .6s}
#intro .seam{position:absolute;left:50%;top:50%;height:1px;width:0;background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(227,201,142,.6);transition:width .6s cubic-bezier(.77,0,.18,1),opacity .4s 1.4s}
#intro .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-inline:24px;transition:opacity .45s,transform .6s}
.lockup{display:flex;align-items:center;gap:clamp(20px,4vw,44px)}
.lockup svg{width:clamp(96px,14vw,168px);height:auto;flex:none;overflow:visible}
.lockup .divider{width:1px;height:clamp(80px,11vw,128px);background:var(--gold);opacity:.45;transform-origin:center}
.lockup .words{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,18px)}
.lockup .name{font-family:var(--display);font-size:clamp(34px,6.4vw,76px);line-height:1;letter-spacing:.16em;white-space:nowrap}
.lockup .name span{display:inline-block}
.lockup .sub{font-weight:600;font-size:clamp(9px,1.5vw,17px);letter-spacing:.46em;color:var(--gold);white-space:nowrap}
#intro .hint{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);opacity:0}
#intro .hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Abspielen */
#intro.play .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards}
#intro.play .stem{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:rise .7s cubic-bezier(.2,.8,.2,1) .9s forwards}
#intro.play .arm{opacity:0;transform:translateX(-26px);animation:slide .8s cubic-bezier(.2,.8,.2,1) forwards}
#intro.play .arm.up{animation-delay:1.25s}
#intro.play .arm.down{animation-delay:1.4s}
#intro.play .divider{transform:scaleY(0);animation:grow .7s ease 1.7s forwards}
#intro.play .name span{opacity:0;filter:blur(6px);transform:translateY(8px);animation:letter .7s ease forwards}
#intro.play .name span:nth-child(1){animation-delay:1.85s}
#intro.play .name span:nth-child(2){animation-delay:1.93s}
#intro.play .name span:nth-child(3){animation-delay:2.01s}
#intro.play .name span:nth-child(4){animation-delay:2.09s}
#intro.play .name span:nth-child(5){animation-delay:2.17s}
#intro.play .name span:nth-child(6){animation-delay:2.25s}
#intro.play .sub{opacity:0;letter-spacing:.9em;animation:track 1.2s cubic-bezier(.2,.8,.2,1) 2.4s forwards}
#intro.play .hint{animation:fade .8s ease 3.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{transform:scaleY(1)}}
@keyframes slide{to{opacity:1;transform:translateX(0)}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes letter{to{opacity:1;filter:blur(0);transform:none}}
@keyframes track{to{opacity:1;letter-spacing:.46em}}
@keyframes fade{to{opacity:1}}

/* Verlassen: Logo zieht sich zurueck, goldene Naht, Vorhang oeffnet sich */
#intro.leaving{pointer-events:none}
#intro.leaving .stage{opacity:0;transform:scale(1.06)}
#intro.leaving .hint{animation:none;opacity:0;transition:opacity .3s}
#intro.leaving .glow{opacity:0}
#intro.leaving .seam{width:100%;opacity:0}
#intro.leaving .half.t{transform:translateY(-100%)}
#intro.leaving .half.b{transform:translateY(100%)}

@media (max-width:620px){
  .lockup{flex-direction:column;text-align:center}
  .lockup .divider{width:64px;height:1px}
  #intro.play .divider{transform:scaleX(0)}
  .lockup .words{align-items:center}
  .lockup .name{margin-right:-.16em}
  .lockup .sub{letter-spacing:.34em;margin-right:-.34em}
  #intro.play .sub{animation-name:track-s}
  @keyframes track-s{to{opacity:1;letter-spacing:.34em}}
}

/* ---------- SEITE ---------- */
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(11,12,14,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;color:var(--ivory);cursor:pointer;font:inherit}
.brand svg{width:34px;height:34px}
.brand b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.2em}
nav{display:flex;align-items:center;gap:clamp(16px,3vw,36px);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
nav a{color:var(--gold)}
nav a:hover,nav a[aria-current="page"]{color:var(--gold-hi)}
nav a.cta{color:var(--ink);background:var(--gold);padding:11px 18px;letter-spacing:.16em}
nav a.cta:hover{background:var(--gold-hi);color:var(--ink)}
@media (max-width:760px){nav a:not(.cta){display:none}}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";flex:none;width:32px;height:1px;background:var(--gold)}

.hero{padding-block:clamp(56px,10vw,120px) clamp(48px,7vw,88px)}
.hero h1{font-family:var(--display);font-size:clamp(28px,4.6vw,58px);line-height:1.18;letter-spacing:.02em;max-width:16ch;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{margin-top:28px;max-width:56ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;color:var(--muted)}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 26px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gold);color:var(--ivory);background:transparent;cursor:pointer;font-family:var(--body)}
.btn:hover{background:rgba(200,169,106,.1);color:var(--ivory)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-hi);color:var(--ink)}

.route{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-top:28px}
.route-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.route-head b{color:var(--ivory);font-weight:500}
.route-box{overflow-x:auto;margin-top:18px}
.route svg{display:block;width:100%;min-width:560px;height:auto}
.route text{font-family:var(--body);font-size:12px;letter-spacing:.14em;fill:var(--muted)}
.route .end text{fill:var(--ivory)}
.route .track{stroke:var(--line);stroke-width:1}
.route .run{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 8;animation:run 1.6s linear infinite}
@keyframes run{to{stroke-dashoffset:-24}}

section.block{padding-block:clamp(64px,9vw,112px);border-top:1px solid var(--line)}
.block-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.block-head h2{font-family:var(--display);font-size:clamp(22px,2.8vw,34px);line-height:1.25;margin-top:16px}
.block-head p{color:var(--muted);max-width:52ch}
@media (max-width:860px){.block-head{grid-template-columns:minmax(0,1fr)}}

/* Goldene Karten: beim Hovern fuellt sich die Flaeche von unten mit Gold, Schrift wird schwarz */
.gold-card{position:relative;isolation:isolate;overflow:hidden;transition:color .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.gold-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.77,0,.18,1)}
.gold-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);opacity:0}
.gold-card:hover,.gold-card:focus-within{color:var(--ink);transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(200,169,106,.55)}
.gold-card:hover::before,.gold-card:focus-within::before{transform:scaleY(1)}
.gold-card:hover::after{animation:shine 1s ease .45s}
@keyframes shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.gold-card p,.gold-card h3,.gold-card li,.gold-card .n{transition:color .45s ease}
.gold-card:hover p,.gold-card:hover h3,.gold-card:hover li,.gold-card:hover .n,.gold-card:focus-within p{color:var(--ink)}

.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service{padding:40px 32px 44px;display:flex;flex-direction:column;gap:16px;min-width:0;cursor:default}
.service + .service{border-left:1px solid var(--line)}
.service svg{width:40px;height:40px;stroke:var(--gold);fill:none;stroke-width:1.2;transition:stroke .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.service:hover svg{stroke:var(--ink);transform:scale(1.12) rotate(-4deg)}
.service h3{font-family:var(--display);font-size:17px;letter-spacing:.08em}
.service p{color:var(--muted)}
.service ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.service li{display:flex;gap:12px}
.service li::before{content:"";flex:none;width:12px;height:1px;background:var(--gold);margin-top:11px;transition:width .45s ease,background .45s ease}
.service:hover li::before{background:var(--ink);width:22px}
@media (max-width:860px){
  .services{grid-template-columns:minmax(0,1fr)}
  .service + .service{border-left:0;border-top:1px solid var(--line)}
  .service{padding:32px 20px}
}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step{display:flex;flex-direction:column;gap:14px;min-width:0;padding:30px 28px 34px;border:1px solid var(--line);cursor:default}
.step .n{font-family:var(--display);font-size:13px;color:var(--gold);letter-spacing:.2em;display:flex;align-items:center;gap:14px}
.step .n::after{content:"";flex:1;height:1px;background:var(--line);transform-origin:left;transition:background .45s ease,transform .6s ease}
.step:hover .n::after{background:var(--ink);transform:scaleX(1.0)}
.step h3{font-size:20px;font-weight:500}
.step p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}

.promise{background:var(--ink-2)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pillar{min-width:0;display:flex;flex-direction:column;gap:12px;padding:30px 28px 34px;border:1px solid var(--line);cursor:default}
.pillar h3{font-size:18px;font-weight:500}
.pillar h3::before{content:"";display:block;width:28px;height:1px;background:var(--gold);margin-bottom:18px;transition:width .5s ease,background .45s ease}
.pillar:hover h3::before{width:56px;background:var(--ink)}
.pillar p{color:var(--muted)}

/* Kontaktzeilen: goldene Linie zieht beim Hovern durch */
.details div{position:relative}
.details div::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold);transition:width .6s cubic-bezier(.77,0,.18,1)}
.details div:hover::before{width:100%}

/* Einblenden beim Scrollen (nur wenn JavaScript laeuft und das Element noch unter dem Bildschirmrand liegt) */
.reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.pre{opacity:0;transform:translateY(36px)}
.stagger.pre > *{opacity:0;transform:translateY(40px)}
.stagger.in > *{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) backwards}
.stagger.in > *:nth-child(2){animation-delay:.14s}
.stagger.in > *:nth-child(3){animation-delay:.28s}
@keyframes rise-in{from{opacity:0;transform:translateY(40px)}}

/* Knoepfe: Lichtreflex, Navigation: goldene Unterstreichung */
.btn{position:relative;overflow:hidden;transition:background .3s ease,color .3s ease,transform .3s ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{animation:shine .9s ease}
nav a:not(.cta){position:relative;padding-block:6px}
nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s ease}
nav a:not(.cta):hover::after{transform:scaleX(1);transform-origin:left}
.brand svg{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.brand:hover svg{transform:rotate(-90deg)}
.quote{margin-top:clamp(48px,6vw,80px);font-family:var(--display);font-size:clamp(18px,2.2vw,26px);line-height:1.5;max-width:34ch;color:var(--ivory)}
.quote span{color:var(--gold)}
@media (max-width:760px){.pillars{grid-template-columns:minmax(0,1fr)}}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(40px,6vw,96px)}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}}
.details{display:flex;flex-direction:column;gap:22px;margin-top:32px}
.details div{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:16px}
.details small{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.details span{font-size:17px;user-select:all}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
form .full{grid-column:1/-1}
@media (max-width:560px){form{grid-template-columns:minmax(0,1fr)}}
label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
input,select,textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ivory);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%}
select option{background:var(--ink-2);color:var(--ivory)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--gold)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
#formNote{font-size:14px;color:var(--gold-hi)}


nav a[aria-current="page"]:not(.cta)::after{transform:scaleX(1)}

/* Goldene Ueberschriften */
.block-head h2,.page-hero h1,.cta-inner h2{background:linear-gradient(100deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-deep) 70%,var(--gold-hi) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.page-hero h1{animation:sheen 7s ease-in-out infinite alternate}
@keyframes sheen{from{background-position:0% 0}to{background-position:100% 0}}

/* Unterseiten */
.page-hero{padding-block:clamp(56px,9vw,112px) clamp(36px,5vw,64px)}
.page-hero h1{font-family:var(--display);font-size:clamp(28px,4.8vw,58px);line-height:1.18;letter-spacing:.02em;max-width:18ch;margin-top:22px}
.page-hero .lead{margin-top:26px;max-width:58ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;color:var(--muted)}
section.block.flush{border-top:0;padding-top:0}
.view.enter .page-hero .wrap,.view.enter .hero .wrap{animation:rise-in 1s cubic-bezier(.2,.8,.2,1) backwards .05s}

.cta-band{background:var(--ink-2)}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.cta-inner h2{font-family:var(--display);font-size:clamp(20px,2.6vw,32px);line-height:1.3}

.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.c-card{display:flex;flex-direction:column;gap:14px;padding:34px 30px 38px;border:1px solid var(--line);min-width:0;cursor:default}
.c-card small{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);transition:color .45s ease}
.c-card span{font-size:clamp(18px,1.8vw,22px);line-height:1.4;overflow-wrap:anywhere;user-select:all;transition:color .45s ease}
.c-card:hover small,.c-card:hover span{color:var(--ink)}
@media (max-width:760px){.contact-cards{grid-template-columns:minmax(0,1fr)}}
.aside-title{font-family:var(--display);font-size:18px;letter-spacing:.06em;color:var(--gold)}
.aside-title + .details{margin-top:24px}

/* Ladeanimation: nur das Bildzeichen */
#loader{position:fixed;inset:0;z-index:40;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;opacity:0;transition:opacity .3s ease}
#loader.on{opacity:1}
#loader.on.out{opacity:0;transition-duration:.4s}
#loader svg{width:clamp(76px,10vw,104px);height:auto;overflow:visible}
#loader .l-ring{transform-box:fill-box;transform-origin:center;stroke-dasharray:.28 .72}
#loader.on .l-ring{animation:spin 1s cubic-bezier(.6,.1,.4,.9) infinite}
#loader.on .l-stem{transform-box:fill-box;transform-origin:bottom;animation:l-rise .45s cubic-bezier(.2,.8,.2,1) .1s backwards}
#loader.on .l-arm{animation:l-slide .55s cubic-bezier(.2,.8,.2,1) backwards}
#loader.on .l-arm.up{animation-delay:.35s}
#loader.on .l-arm.down{animation-delay:.48s}
#loader .l-arm{transform:none}
#loader.on svg{animation:pulse 1.1s ease-in-out .7s infinite}
.l-bar{width:120px;height:1px;background:var(--line);overflow:hidden}
.l-bar i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
#loader.on .l-bar i{animation:bar 1.15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes l-rise{from{transform:scaleY(0)}}
@keyframes l-slide{from{opacity:0;transform:translateX(-26px)}}
@keyframes pulse{50%{filter:drop-shadow(0 0 14px rgba(227,201,142,.45))}}
@keyframes bar{to{transform:scaleX(1)}}

/* Footer in drei Spalten */
footer{border-top:1px solid var(--line);background:var(--ink-2);padding-block:clamp(56px,7vw,88px) calc(28px + env(safe-area-inset-bottom,0px))}
.f-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px 48px}
.f-brand{display:flex;flex-direction:column;gap:18px;min-width:0}
.f-brand p{color:var(--muted);font-size:14px;max-width:30ch}
.f-mark{font-family:var(--display);letter-spacing:.2em;font-size:20px;color:var(--ivory)}
.f-mark:hover{color:var(--ivory)}
.f-mark small{display:block;font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.42em;color:var(--gold);margin-top:10px}
.f-col{min-width:0}
.f-col h4{margin:0 0 20px;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.f-col li a,.f-col li button{color:var(--muted);font-size:14px;background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left;position:relative;transition:color .3s ease,padding-left .3s ease}
.f-col li a:hover,.f-col li button:hover{color:var(--gold-hi);padding-left:10px}
.f-col li a::before,.f-col li button::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--gold);transition:width .3s ease}
.f-col li a:hover::before,.f-col li button:hover::before{width:6px}
.f-col address{font-style:normal;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ivory)}
.f-col address span{user-select:all}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.social a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);padding-left:16px;transform:translateY(-2px)}
.social svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s ease}
.social a:hover svg{transform:translate(2px,-2px)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.f-bottom button{background:none;border:0;padding:0;font:inherit;color:var(--gold);cursor:pointer}
.f-bottom button:hover{color:var(--gold-hi)}
@media (max-width:960px){.f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.f-brand{grid-column:1/-1}}
@media (max-width:620px){.f-grid{grid-template-columns:minmax(0,1fr)}}

/* Cookie-Fenster */
#cookiePanel{position:fixed;z-index:30;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100% - 32px));background:var(--ink-2);border:1px solid var(--gold);padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:rise-in .5s cubic-bezier(.2,.8,.2,1)}
#cookiePanel h3{font-family:var(--display);font-size:15px;letter-spacing:.08em;color:var(--gold)}
#cookiePanel p{font-size:14px;color:var(--muted)}
#cookiePanel .btn{align-self:flex-start;margin-top:6px}

/* Textseiten: Datenschutz, Impressum, Ueber uns */
.stand{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.prose{max-width:72ch}
.prose p{color:var(--muted)}
.prose p + p{margin-top:18px}
.prose p.signoff{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.legal{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);border-left:1px solid var(--line);padding-left:20px}
.toc-title{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:t}
.toc li{counter-increment:t}
.toc button{background:none;border:0;padding:2px 0;font:inherit;font-size:13px;line-height:1.4;color:var(--muted);text-align:left;cursor:pointer;display:flex;gap:10px;transition:color .3s ease}
.toc button::before{content:counter(t,decimal-leading-zero);color:var(--gold);font-family:var(--display);font-size:10px;padding-top:3px}
.toc button:hover,.toc button.active{color:var(--ivory)}
.legal-text h2{font-family:var(--display);font-size:clamp(16px,1.6vw,19px);line-height:1.4;letter-spacing:.04em;color:var(--gold);margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:110px;counter-increment:h}
.legal-text{counter-reset:h}
#ds-text h2::before{content:counter(h,decimal-leading-zero) "  ";color:var(--gold-deep)}
.legal-text h2:first-child{margin-top:0}
.legal-text ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.legal-text li{display:block;position:relative;padding-left:26px}
.legal-text li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:1px;background:var(--gold)}
.legal-text strong{color:var(--ivory);font-weight:600}
.legal-text ul + p{margin-top:18px}
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}.toc{position:static}}

.factors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.factors.stagger.in > *:nth-child(4){animation-delay:.42s}
@media (max-width:960px){.factors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.factors{grid-template-columns:minmax(0,1fr)}}

.empty-note{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:40px;border:1px solid var(--line);max-width:640px}
.empty-note svg{width:56px;height:56px}
.empty-note p{color:var(--muted)}

/* Blog */
.blog-lockup{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,32px);margin-top:4px}
.blog-lockup svg{width:clamp(64px,8vw,104px);height:auto;flex:none}
.bl-div{width:1px;height:clamp(56px,7vw,88px);background:var(--gold);opacity:.45}
.bl-words{display:flex;flex-direction:column;gap:10px}
.bl-name{font-family:var(--display);font-size:clamp(28px,4.4vw,54px);line-height:1;letter-spacing:.16em;color:var(--ivory)}
.bl-sub{font-weight:600;font-size:clamp(8px,1.1vw,12px);letter-spacing:.46em;color:var(--gold)}
.bl-blog{font-family:var(--display);font-size:clamp(28px,4.4vw,54px);line-height:1;letter-spacing:.16em;padding-left:clamp(16px,3vw,32px);border-left:1px solid var(--gold);background:linear-gradient(100deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-deep) 70%,var(--gold-hi) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sheen 7s ease-in-out infinite alternate}
.blog-hero .lead{margin-top:36px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts.stagger.in > *:nth-child(4){animation-delay:.42s}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);color:var(--ivory);min-width:0;background:var(--ink);transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .5s ease}
.post-card:hover{color:var(--ivory);transform:translateY(-6px);border-color:var(--gold);box-shadow:0 26px 50px -26px rgba(200,169,106,.5)}
.post-card.featured{grid-column:1/-1;flex-direction:row}
.post-card.featured .post-cover{flex:1.3 1 0;aspect-ratio:auto;min-height:320px}
.post-card.featured .post-body{flex:1 1 0;justify-content:center;padding:clamp(28px,4vw,56px)}
.post-card.featured h3{font-size:clamp(20px,2.2vw,28px)}
.post-cover{aspect-ratio:16/9;overflow:hidden;position:relative;max-width:100%}
.post-cover svg,.article-cover svg{display:block;width:100%;height:100%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.post-card:hover .post-cover svg{transform:scale(1.06)}
.post-body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 30px;min-width:0}
.post-cat{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.post-body h3{font-family:var(--display);font-size:16px;line-height:1.45;letter-spacing:.03em;transition:color .4s ease}
.post-card:hover h3{color:var(--gold-hi)}
.post-body p:not(.post-cat){color:var(--muted);font-size:15px}
.post-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:8px}
.post-body .post-meta{display:flex;align-items:center;gap:10px}
.post-body .post-meta::after{content:"";width:24px;height:1px;background:var(--gold);transition:width .4s ease}
.post-card:hover .post-meta::after{width:48px}
@media (max-width:960px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.post-card.featured{flex-direction:column}.post-card.featured .post-cover{min-height:0;aspect-ratio:16/9}}
@media (max-width:620px){.posts{grid-template-columns:minmax(0,1fr)}}

/* SVG-Grafiken */
.cv .bg{fill:var(--ink-2)}
.cv .grid line{stroke:var(--line);stroke-width:1}
.cv .g{fill:none;stroke:var(--gold);stroke-width:2}
.cv .gt{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.5}
.cv .gf{fill:var(--gold)}
.cv .gd{fill:var(--gold-deep)}
.cv .gh{fill:var(--gold-hi)}
.cv .ink{fill:var(--ink);stroke:var(--gold);stroke-width:1.5}
.cv .iv{fill:var(--ivory)}
.cv .dash{stroke-dasharray:6 10;animation:run 1.6s linear infinite}
.cv text{font-family:var(--display);font-size:20px;letter-spacing:.2em;fill:var(--gold)}
.cv text.sm{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.32em}
.cv .pulse{transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* Artikel */
.article-wrap{max-width:880px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
.back::before{content:"";width:22px;height:1px;background:var(--gold);transition:width .35s ease}
.back:hover::before{width:40px}
.article-hero h1{max-width:24ch}
.article-hero .post-meta{display:block;margin-top:22px}
.article-cover{aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;margin-bottom:clamp(36px,5vw,56px);max-width:100%}
.article p.intro{font-size:clamp(17px,1.6vw,20px);color:var(--ivory);font-weight:300;line-height:1.65}
.article p.note{margin-top:36px;padding:18px 20px;border-left:1px solid var(--gold);font-size:14px}
.article ol.tips{list-style:none;counter-reset:tip;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;color:var(--muted)}
.article ol.tips li{counter-increment:tip;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
.article ol.tips li::before{content:counter(tip,decimal-leading-zero);font-family:var(--display);font-size:14px;color:var(--gold);padding-top:3px}
.article ol.tips + p{margin-top:28px}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:32px 0 8px}
.cmp{border:1px solid var(--line);padding:26px 24px 28px;cursor:default}
.cmp h3{font-family:var(--display);font-size:15px;letter-spacing:.06em;color:var(--gold);transition:color .45s ease}
.cmp ul{margin-top:16px}
.cmp .cmp-for{margin-top:18px;font-size:14px;color:var(--ivory)}
.cmp:hover h3,.cmp:hover li,.cmp:hover .cmp-for,.cmp:hover strong{color:var(--ink)}
.cmp:hover li::before{background:var(--ink)}
@media (max-width:620px){.compare{grid-template-columns:minmax(0,1fr)}}

/* Hinweis telefonische Beratung */
.call-note{margin-top:28px;padding:22px 22px 24px;border:1px solid var(--gold);display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,rgba(200,169,106,.10),transparent 60%)}
.call-note p{color:var(--muted);font-size:15px}
.call-note .num{font-family:var(--display);font-size:clamp(17px,1.8vw,21px);letter-spacing:.06em;color:var(--gold-hi);user-select:all}

/* Mobiles Menue */
.menu-btn{display:none;position:relative;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer;padding:0}
.menu-btn span{position:absolute;left:12px;right:12px;height:1px;background:var(--gold);transition:transform .4s cubic-bezier(.77,0,.18,1),top .4s ease}
.menu-btn span:first-child{top:17px}
.menu-btn span:last-child{top:26px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
#mobileMenu{position:fixed;inset:0;z-index:9;background:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 104px) 24px calc(env(safe-area-inset-bottom,0px) + 36px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow-y:auto}
#mobileMenu nav{display:flex;flex-direction:column;align-items:stretch;gap:0;text-transform:none;letter-spacing:0}
#mobileMenu nav a{display:block;font-family:var(--display);font-size:22px;letter-spacing:.08em;color:var(--ivory);padding:18px 0;border-bottom:1px solid var(--line);animation:rise-in .6s cubic-bezier(.2,.8,.2,1) backwards}
#mobileMenu nav a[aria-current="page"]{color:var(--gold)}
#mobileMenu nav a::after{display:none}
#mobileMenu nav a.mm-cta{margin-top:28px;border:0;background:var(--gold);color:var(--ink);text-align:center;font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;padding:18px}
#mobileMenu nav a:nth-child(2){animation-delay:.05s}#mobileMenu nav a:nth-child(3){animation-delay:.1s}#mobileMenu nav a:nth-child(4){animation-delay:.15s}#mobileMenu nav a:nth-child(5){animation-delay:.2s}#mobileMenu nav a:nth-child(6){animation-delay:.25s}#mobileMenu nav a:nth-child(7){animation-delay:.3s}
.mm-contact{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--gold)}
html.menu-open,html.menu-open body{overflow:hidden}
@media (max-width:760px){.menu-btn{display:block}header nav a.cta{display:none}}

/* Kontakt-Links, WhatsApp */
.c-card a{font-size:clamp(18px,1.8vw,22px);line-height:1.4;overflow-wrap:anywhere;color:var(--ivory);transition:color .45s ease}
.c-card:hover a{color:var(--ink)}
.details a{font-size:17px;color:var(--ivory)}
.details a:hover{color:var(--gold-hi)}
.f-col address a{color:var(--ivory)}
.f-col address a:hover{color:var(--gold-hi)}
.mm-contact a{color:var(--gold)}
.call-note a.num{text-decoration:none}
.kontakt-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.btn svg circle{fill:currentColor;stroke:none}
.wa-btn{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);transition:transform .35s ease,background .35s ease}
.wa-btn:hover{color:var(--ink);background:var(--gold-hi);transform:translateY(-3px)}
.wa-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.wa-btn svg circle{fill:currentColor;stroke:none}
html.menu-open .wa-btn{display:none}
@media (max-width:560px){.wa-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.wa-btn{padding:0;width:56px;height:56px;justify-content:center;border-radius:50%}}
footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Formular */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-privacy{font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0}
.form-privacy a{color:var(--gold)}
#f-submit[disabled]{opacity:.6;cursor:wait}
.form-done{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:40px;border:1px solid var(--gold);background:linear-gradient(160deg,rgba(200,169,106,.10),transparent 60%);animation:rise-in .8s cubic-bezier(.2,.8,.2,1)}
.form-done svg{width:72px;height:72px}
.form-done svg circle{stroke-dasharray:600;stroke-dashoffset:600;animation:done-draw 1s ease forwards}
.form-done svg path{stroke-dasharray:140;stroke-dashoffset:140;animation:done-draw .6s ease .8s forwards}
@keyframes done-draw{to{stroke-dashoffset:0}}
.form-done h3{font-family:var(--display);font-size:20px;letter-spacing:.04em;color:var(--gold)}
.form-done p{color:var(--muted);max-width:52ch}

/* FAQ */
.faq-wrap{max-width:900px;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.faq-cat{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(16px,1.6vw,19px);font-weight:500;color:var(--ivory);transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--gold),var(--gold)) center/14px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 14px no-repeat;transition:transform .4s cubic-bezier(.77,0,.18,1)}
.faq[open] summary::after{transform:rotate(135deg)}
.faq summary:hover,.faq[open] summary{color:var(--gold-hi)}
.faq-a{padding:0 0 24px;max-width:70ch}
.faq-a p{color:var(--muted)}
.faq[open] .faq-a{animation:rise-in .5s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  #loader{display:none}
  .page-hero h1{animation:none}
  .view.enter .page-hero .wrap,.view.enter .hero .wrap{animation:none}
  #intro *,#intro{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}
  #intro .hint{opacity:1}
  .route .run{animation:none}
  .cv .dash,.cv .pulse,.bl-blog{animation:none}
  .reveal.pre,.stagger.pre > *{opacity:1;transform:none}
  .stagger.in > *{animation:none}
  .gold-card,.gold-card::before,.btn{transition-duration:.01s}
  .gold-card:hover::after,.btn:hover::after{animation:none}
}
.intro-skip #intro{display:none}