/* Antonia Wehner Pferdefotografie
   Marke: Sand / Taupe / Mocca / Graphit / Salbei, Playfair Display + Grotesk */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/playfair-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/playfair-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/hanken-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:300 800;font-display:swap;src:url(/fonts/hanken-italic.woff2) format("woff2")}

:root{
  --sand:#E9E6DE;--sand-2:#F1EFE9;--sand-3:#DDD8CE;
  --taupe:#8A7F73;--mocca:#3E332C;--graphit:#1E1E1E;--salbei:#6B7569;
  --bg:var(--sand);--bg-2:#DDD6C9;--bg-3:var(--sand-2);--radius:6px;--line:rgba(62,51,44,.16);--line-2:rgba(62,51,44,.32);
  --ink:var(--graphit);--ink-2:#5A5047;--ink-3:#7A6F64;
  --accent:#6B7569;--accent-ink:#55605A;--accent-soft:rgba(107,117,105,.14);
  --btn:var(--graphit);--btn-ink:var(--sand);--feat:var(--graphit);--feat-ink:var(--sand);--feat-sub:rgba(233,230,222,.65);--feat-check:#B7C0B5;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(16px,4vw,56px);--max:1440px;
  --nav-h:72px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1E1E1E;--bg-2:#2A2724;--bg-3:#232120;--sand-3:#33302C;--line:rgba(233,230,222,.14);--line-2:rgba(233,230,222,.3);
  --ink:#E9E6DE;--ink-2:#B9B1A6;--ink-3:#9A9186;--btn:#E9E6DE;--btn-ink:#1E1E1E;--feat:#E9E6DE;--feat-ink:#1E1E1E;--feat-sub:#5A5047;--feat-check:#6B7569;--accent:#9AA79C;--accent-ink:#B3BFB4;--accent-soft:rgba(154,167,156,.16);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1E1E1E;--bg-2:#2A2724;--bg-3:#232120;--sand-3:#33302C;--line:rgba(233,230,222,.14);--line-2:rgba(233,230,222,.3);
  --ink:#E9E6DE;--ink-2:#B9B1A6;--ink-3:#9A9186;--btn:#E9E6DE;--btn-ink:#1E1E1E;--feat:#E9E6DE;--feat-ink:#1E1E1E;--feat-sub:#5A5047;--feat-check:#6B7569;--accent:#9AA79C;--accent-ink:#B3BFB4;--accent-soft:rgba(154,167,156,.16);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--salbei);outline-offset:4px}
::selection{background:var(--salbei);color:#fff}

.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.sec{padding-block:clamp(88px,11vw,160px)}
.sec-tight{padding-block:clamp(56px,7vw,96px)}
.muted{color:var(--ink-2)}
.small{font-size:14px;letter-spacing:.01em}
.measure{max-width:56ch}

/* Typografie */
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02;text-wrap:balance}
.display-xl{font-size:clamp(2.6rem,7.2vw,6.4rem);letter-spacing:-.015em;line-height:.98}
.display-l{font-size:clamp(2.2rem,5vw,4.4rem)}
.display-m{font-size:clamp(1.7rem,3.2vw,2.8rem)}
.display-s{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
.caps{text-transform:uppercase;letter-spacing:.06em}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:52ch}
.num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.acc{color:var(--accent);font-style:italic;letter-spacing:0;text-transform:none}
.hero .acc{color:#C9D3C8}
em{font-style:italic}

/* Zweite Flächenfarbe */
.sec-alt{--bg:var(--bg-2);background:var(--bg-2)}
.contact{--bg:var(--bg-3)}

/* Buttons: eine Form, weiche Kanten, zwei Gewichte */
.btn{border-radius:var(--radius);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-ink);font:500 15px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;
  transition:transform .12s ease-out,background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{background:var(--salbei);border-color:var(--salbei);color:#fff}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-hero{background:var(--sand);border-color:var(--sand);color:var(--graphit)}
.btn-hero:hover{background:#fff;border-color:#fff;color:var(--graphit)}
.btn-hero-ghost{background:rgba(30,30,30,.28);border-color:rgba(233,230,222,.55);color:var(--sand);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.btn-hero-ghost:hover{background:rgba(233,230,222,.18);border-color:var(--sand);color:#fff}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:500;letter-spacing:.01em;position:relative}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:right}

/* Navigation: transluzentes Material, Inhalt scrollt darunter */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);padding-top:env(safe-area-inset-top,0);
  color:var(--sand);transition:transform .5s var(--ease),color .35s var(--ease),background .35s var(--ease);will-change:transform}
.nav::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s var(--ease)}
.nav.solid{color:var(--ink)}
.nav.solid::before{opacity:1}
.nav.hide{transform:translateY(-100%)}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.brand{display:flex;align-items:center;gap:14px;line-height:1}
.brand .mark{width:42px;height:auto;flex:none}
.brand .name{font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.brand .sub{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-top:6px;opacity:.75}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;letter-spacing:.02em;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .btn{min-height:44px;padding:0 20px;font-size:14px}
.nav:not(.solid) .btn{background:var(--sand);border-color:var(--sand);color:var(--graphit)}
.nav:not(.solid) .btn:hover{background:#fff;border-color:#fff}
.menu-btn{display:none;width:44px;height:44px;place-items:center;margin-right:-8px}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:transform .35s var(--ease),background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
body.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:45;background:var(--bg);color:var(--ink);display:grid;grid-template-rows:1fr auto;padding:calc(var(--nav-h) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0));
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu ul{display:grid;align-content:center;gap:4px}
.menu li a{display:block;font-family:var(--serif);font-size:clamp(2rem,9vw,3.4rem);line-height:1.15;padding:6px 0;border-bottom:1px solid var(--line);transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .5s}
body.menu-open .menu li a{transform:none;opacity:1}
.menu li:nth-child(1) a{transition-delay:.08s}.menu li:nth-child(2) a{transition-delay:.13s}.menu li:nth-child(3) a{transition-delay:.18s}.menu li:nth-child(4) a{transition-delay:.23s}.menu li:nth-child(5) a{transition-delay:.28s}.menu li:nth-child(6) a{transition-delay:.33s}
.menu .btn{width:100%;margin-top:24px}
body.menu-open{overflow:hidden}
@media (max-width:960px){.nav-links{display:none}.nav .btn{min-height:40px;padding:0 14px;font-size:13px;margin-left:auto}.menu-btn{display:grid;margin-left:4px}.brand .sub{display:none}}
@media (max-width:420px){.brand .name{display:none}.brand .mark{width:38px}}

/* Hero: Vollbild-Foto oder Video, 100vh, Text mittig */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;color:var(--sand);overflow:clip;isolation:isolate;background:var(--graphit)}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transform:scale(1.06);filter:sepia(.22) saturate(.9);animation:heroIn 2.2s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.14);filter:sepia(.22) saturate(.9) brightness(.6)}to{transform:scale(1.06);filter:sepia(.22) saturate(.9) brightness(1)}}
@supports (animation-timeline:scroll()){
  .hero-media img,.hero-media video{animation:heroIn 2.2s var(--ease) both,heroPar linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  @keyframes heroPar{to{translate:0 18%}}
}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,32,26,.5) 0%,rgba(40,32,26,.28) 35%,rgba(40,32,26,.34) 65%,rgba(40,32,26,.7) 100%)}
.hero-in{position:relative;display:grid;justify-items:center;text-align:center;padding:calc(var(--nav-h) + 32px) 0 clamp(48px,8vh,96px)}
.hero .crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:rgba(233,230,222,.72);margin-bottom:26px}
.hero .crumb a:hover{color:#fff}
.hero h1{font-size:clamp(2.5rem,6.1vw,6.2rem);line-height:.98;letter-spacing:.015em;max-width:18ch;margin-inline:auto;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 small{display:block;font-family:var(--serif);font-style:italic;font-size:.4em;letter-spacing:0;text-transform:none;margin-top:.5em;color:rgba(233,230,222,.85)}
.hero .lead{color:rgba(233,230,222,.88);margin:26px auto 0;max-width:46ch;text-align:center}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
@media (max-width:760px){.hero-media img,.hero-media video{object-position:var(--pos-m,var(--pos,50% 40%))}.hero .ctas{width:100%}.hero .ctas .btn{flex:1 1 auto}}

/* Zeilen-Reveal: Text tritt aus einer Maske */
.line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.line>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.in .line>span,.line.in>span{transform:none}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
.ph{position:relative;overflow:hidden;background:var(--sand-3);border-radius:var(--radius)}
.ph img{width:100%;height:100%;object-fit:cover}
[data-mask]{position:relative}
[data-mask]::after{content:"";position:absolute;inset:-1px;z-index:1;background:var(--bg);transform-origin:top;transition:transform 1.3s var(--ease);pointer-events:none}
[data-mask] img{transform:scale(1.12);transition:transform 1.8s var(--ease)}
[data-mask].in::after{transform:scaleY(0)}
[data-mask].in img{transform:none}

/* Leitsatz */
.claim-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:center}
.claim h2{font-size:clamp(2.6rem,6.4vw,5.8rem);line-height:1;letter-spacing:.02em}
.claim h2 .w{display:block}
.claim .lead{margin-top:32px}
.claim .facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(24px,4vw,56px);margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.claim .facts b{display:block;font:400 clamp(1.6rem,2.6vw,2.3rem)/1 var(--serif)}
.claim .facts>div>span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:8px}
.claim .facts b span{display:inline;font:inherit;color:var(--accent);margin:0}
.claim .ph{aspect-ratio:4/5;margin-right:calc(-1*var(--gutter));}
@media (max-width:900px){.claim-grid{grid-template-columns:1fr}.claim .ph{margin-right:0;aspect-ratio:4/5;max-height:70vh}.claim .facts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.claim .facts{grid-template-columns:1fr 1fr}}

.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top,0)) 16px calc(24px + env(safe-area-inset-bottom,0));background:rgba(30,30,30,.92);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.lb.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.lb img{border-radius:var(--radius);max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;will-change:transform}
.lb .x{border-radius:50%;position:absolute;top:calc(16px + env(safe-area-inset-top,0));right:16px;width:48px;height:48px;border:1px solid rgba(233,230,222,.35);color:var(--sand);display:grid;place-items:center;background:rgba(30,30,30,.4)}
.lb .x svg{width:18px;height:18px}
.lb .cap{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0));text-align:center;color:rgba(233,230,222,.75);font-size:13.5px}


/* Leistungen: Tabs mit Icons, großes Panel */
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.badge-bg{background:var(--bg);border-color:var(--line)}
.svc-intro{display:grid;justify-items:center;text-align:center;gap:16px;max-width:60ch;margin:0 auto clamp(28px,4vw,44px)}
.svc-intro .lead{text-align:center}
.svc-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px clamp(8px,1.5vw,20px);margin-bottom:clamp(20px,3vw,32px)}
.svc-tab{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:14px;font:500 15px/1 var(--sans);color:var(--ink-2);transition:background .3s var(--ease),color .3s var(--ease),transform .15s ease-out}
.svc-tab .ico-wrap{width:28px}
.svc-tab .ico{color:var(--accent)}
.svc-tab:hover{color:var(--ink)}
.svc-tab:active{transform:scale(.97)}
.svc-tab[aria-selected="true"]{background:var(--bg);color:var(--ink);box-shadow:0 10px 30px -18px rgba(30,30,30,.35)}
.svc-stage{background:var(--bg-3);border-radius:calc(var(--radius) * 4);padding:clamp(20px,4vw,64px);--bg:var(--bg-3)}
.svc-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.svc-panel[hidden]{display:none}
.svc-panel.in{animation:panelIn .55s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.svc-copy{display:grid;gap:18px;justify-items:start}
.svc-copy h3{text-wrap:balance}
.svc-benefits{display:grid;gap:8px;font-size:15.5px}
.svc-benefits li{display:flex;gap:12px;align-items:flex-start}
.svc-benefits svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px}
.svc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.svc-img{display:block;aspect-ratio:4/5;max-height:560px;border-radius:calc(var(--radius) * 3)}
.svc-img img{transition:transform 1.2s var(--ease)}
@media (max-width:900px){.svc-panel{grid-template-columns:1fr}.svc-img{order:-1;aspect-ratio:4/3;max-height:52vh}.svc-tabs{flex-direction:column;align-items:stretch}.svc-tab{justify-content:center}}

/* Arbeiten: Stapel fächert sich auf */
.spread{height:350vh;position:relative;background:var(--bg)}
.spread-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.spread-text{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;padding:0 var(--gutter);pointer-events:none;opacity:0;will-change:transform,opacity}
.spread-text h2{font-size:clamp(2.2rem,4.6vw,4.4rem)}
.spread-text .lead{text-align:center;margin-top:14px}
.sp-card{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:0;border-radius:10px;overflow:hidden;background:var(--sand-3);will-change:transform;box-shadow:0 20px 50px -30px rgba(30,30,30,.45);transform:translate(-50%,-50%)}
.sp-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1s var(--ease)}
.sp-card button{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
@media (pointer:coarse),(max-width:760px){.spread{height:300vh}.sp-card{width:40vw;height:20vh;border-radius:4vw}}

/* Über mich */
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:center}
.about .ph{aspect-ratio:4/5}
.about h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05}
.about .lead{margin-top:28px}
.about p+p{margin-top:16px;color:var(--ink-2)}
.about .sig{font-family:var(--serif);font-style:italic;font-size:2rem;margin-top:28px;color:var(--accent)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.about .ph{max-height:70vh}}

/* Ablauf: vier Spalten, Linie oben */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);border-top:1px solid var(--line-2);margin-top:clamp(36px,5vw,64px)}
.steps li{padding-top:28px;position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--accent);transition:width 1.2s var(--ease);transition-delay:var(--d,0s)}
.steps.in li::before{width:100%}
.steps .num{font-size:2.4rem;line-height:1;display:block}
.steps h3{font-family:var(--serif);font-size:1.45rem;margin:16px 0 10px;line-height:1.15}
.steps p{color:var(--ink-2);font-size:15px;max-width:30ch}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr;gap:8px}.steps li{padding-top:22px;padding-bottom:18px}.steps p{max-width:none}}

/* Instagram: vier Posts */
.ig-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(28px,4vw,48px)}
.ig-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.ig-head b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1}
.ig-head span{color:var(--ink-2);font-size:14.5px}
.ig-head img{outline:2px solid var(--accent);outline-offset:3px}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.ig-grid .ph{aspect-ratio:4/5}
.ig-grid img{transition:transform 1.2s var(--ease)}
@media (max-width:760px){.ig-grid{grid-template-columns:1fr 1fr}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,100px)}
.faq-grid h2{font-size:clamp(2rem,4vw,3.6rem)}
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.25}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary i{flex:none;width:32px;height:32px;position:relative;border:1px solid var(--line-2);border-radius:50%;color:var(--accent)}
.accordion summary i::before,.accordion summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.accordion summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.accordion details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.accordion details[open] summary i{background:var(--accent-soft);border-color:var(--accent)}
.accordion .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.accordion details[open] .body{grid-template-rows:1fr}
.accordion .body>div{overflow:hidden}
.accordion .body p{color:var(--ink-2);padding:0 56px 24px 0;max-width:60ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* Kontakt */
.contact{border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.contact h2{font-size:clamp(2.2rem,5vw,4.4rem)}
.contact .lead{margin-top:24px}
.contact .meta{margin-top:40px;display:grid;gap:14px;font-size:15.5px}
.contact .meta b{display:block;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}

@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cta-card{background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) * 2);padding:clamp(24px,3vw,40px);display:grid;gap:22px;box-shadow:0 30px 60px -40px rgba(30,30,30,.35)}
.cta-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15}
.cta-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cta-steps li{display:grid;justify-items:center;text-align:center;gap:8px;font-size:13.5px;color:var(--ink-2);padding:14px 6px;border:1px solid var(--line);border-radius:var(--radius)}
.cta-steps .ico-wrap{width:40px}
.cta-steps .ico{color:var(--accent)}
.cta-card .btn{width:100%;min-height:58px;font-size:16px}
@media (max-width:520px){.cta-steps{grid-template-columns:1fr 1fr}}

/* Footer */
footer{padding:clamp(56px,7vw,96px) 0 32px;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.6fr));gap:32px;margin-bottom:clamp(40px,6vw,80px)}
.foot-top h4{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.foot-top li{margin-bottom:10px;font-size:15.5px}
.foot-top li a:hover{color:var(--accent)}
.foot-brand .mark{width:56px;color:var(--ink)}
.foot-brand p{margin-top:18px;max-width:34ch;color:var(--ink-2);font-size:15px}
.foot-word{font-family:var(--serif);font-size:clamp(2rem,8.6vw,8.1rem);line-height:.9;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:.92;border-top:1px solid var(--line);padding-top:28px;overflow:hidden}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:24px;font-size:13.5px;color:var(--ink-3)}
.foot-bottom a{margin-right:18px}
.foot-bottom a:hover{color:var(--ink)}
.linkbtn{font:inherit;color:inherit;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--ink)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* Mobile-Leiste */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:none;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0));
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;min-height:48px}
@media (max-width:760px){.mbar{display:flex}}

/* Unterseiten Leistungen */
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.benefit-row li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.45}
.benefit-row svg{flex:none;width:22px;height:22px;color:var(--salbei);margin-top:2px}
@media (max-width:760px){.benefit-row{grid-template-columns:1fr;gap:14px}}

.ps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);border-top:1px solid var(--line-2);padding-top:clamp(36px,5vw,64px)}
.ps small{display:block;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.ps p{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.25;text-wrap:pretty}
@media (max-width:760px){.ps{grid-template-columns:1fr}}

.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px) clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.incl h3{font-family:var(--serif);font-size:1.35rem;line-height:1.2;margin-bottom:10px}
.incl p{color:var(--ink-2);font-size:15px;max-width:34ch}
.incl .num{display:block;font-size:1.2rem;margin-bottom:14px}
@media (max-width:900px){.incl{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.incl{grid-template-columns:1fr}}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(12px,1.6vw,22px);align-items:end}
.duo .ph:first-child{aspect-ratio:4/5}.duo .ph:last-child{aspect-ratio:3/2}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(36px,5vw,64px);align-items:stretch}
.tier{border-radius:calc(var(--radius) * 2);border:1px solid var(--line-2);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;background:var(--bg);transition:transform .6s var(--ease)}
.tier.feat{background:var(--feat);color:var(--feat-ink);border-color:var(--feat)}
.tier .tag{font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);min-height:12px}
.tier.feat .tag{color:#B7C0B5}
.tier h3{font-family:var(--serif);font-size:2rem;line-height:1;margin-top:18px}
.tier .dur{margin-top:8px;font-size:14.5px;color:var(--ink-2)}
.tier.feat .dur{color:var(--feat-sub)}
.tier ul{margin:26px 0 30px;flex:1;display:grid;gap:10px;font-size:15.5px}
.tier li{display:flex;gap:12px;align-items:flex-start}
.tier li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--salbei)}
.tier.feat li svg{color:var(--feat-check)}
.tier .price{font-family:var(--serif);font-size:1.4rem;margin-bottom:18px}
.tier .btn{width:100%}
.tier.feat .btn{background:var(--feat-ink);border-color:var(--feat-ink);color:var(--feat)}
.tier.feat .btn:hover{background:var(--salbei);border-color:var(--salbei);color:#fff}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

.next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
.next a{padding:clamp(36px,5vw,64px) 0;display:block}
.next a+a{text-align:right;border-left:1px solid var(--line);padding-left:24px}
.next small{display:block;color:var(--ink-3);font-size:13.5px;margin-bottom:10px}
.next b{font:400 clamp(1.5rem,3.2vw,2.8rem)/1.05 var(--serif);transition:color .35s}
.next a:hover b{color:var(--salbei)}
@media (max-width:600px){.next{grid-template-columns:1fr}.next a+a{text-align:left;border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* Rechtliches */
.legal{padding-top:clamp(56px,7vw,96px);max-width:72ch}
.legal h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:32px}
.legal h2{font-family:var(--serif);font-size:1.5rem;margin:40px 0 12px}
.legal p{margin-bottom:14px;color:var(--ink-2)}
.legal .todo{background:var(--sand-3);padding:14px 16px;border-left:3px solid var(--salbei);color:var(--ink)}


/* Hover-Bewegung nur bei echtem Zeiger (Touch bleibt ruhig) */
@media (hover:hover) and (pointer:fine){
  .svc-img:hover img{transform:scale(1.04)}
  .sp-card:hover img{transform:scale(1.03)}
  .ig-grid a:hover img{transform:scale(1.04)}
  .tier:hover{transform:translateY(-6px)}
}

/* Reitsport-Icons (Markenkit) */
.ico{width:100%;height:auto;aspect-ratio:1;display:block;color:var(--ink);transition:transform .7s var(--ease)}
.ico-wrap{display:block;width:56px;flex:none}
.ico-wrap[data-reveal]{transform:scale(.92)}
.ico-wrap[data-reveal].in{transform:none}
.steps .ico-wrap{width:72px;margin-bottom:18px}
.steps .ico{color:var(--accent-ink)}
.steps .num{font-size:1.4rem}
.benefit-row{grid-template-columns:96px repeat(3,1fr);align-items:center}
.benefit-ico{width:96px;color:var(--taupe)}
.benefit-row .benefit-ico .ico{color:var(--accent);width:96px;height:96px;flex:none;margin:0}
@media (max-width:760px){.benefit-row{grid-template-columns:1fr}.benefit-ico{width:72px}.benefit-row .benefit-ico .ico{width:72px;height:72px}}

/* Logo-Aufbau: Sticky-Szene nach dem Hero */
.build{height:340vh;position:relative}
.build-scene{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:0 var(--gutter);overflow:hidden;isolation:isolate;color:var(--sand)}
.build-scene.inv .build-bg::after{opacity:.15}
.build-scene .build-mark,.build-scene .build-word,.build-scene .build-sub{transition:color .5s var(--ease),filter .5s var(--ease)}
.build-scene.inv .build-mark,.build-scene.inv .build-word,.build-scene.inv .build-sub{color:#fff;mix-blend-mode:difference;filter:none}
.build-bg::after{transition:opacity .6s var(--ease)}
.build-bg{position:absolute;inset:0;z-index:-1;background:var(--graphit)}
.build-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1);will-change:transform,filter;filter:sepia(.08)}
.build-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(30,30,30,.5),rgba(30,30,30,.3) 60%,rgba(30,30,30,.6))}
.build-mark{width:clamp(170px,26vw,360px);height:auto;overflow:visible;color:var(--sand);filter:drop-shadow(0 6px 30px rgba(0,0,0,.25))}
.build-mark path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;will-change:stroke-dashoffset}
.build-word{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:.16em;text-transform:uppercase;margin-top:clamp(28px,4vw,48px);opacity:0;transform:translateY(28px);will-change:transform}
.build-sub{font:500 clamp(10px,1.1vw,13px)/1 var(--sans);letter-spacing:.55em;text-transform:uppercase;color:#C9D3C8;margin-top:16px;opacity:0;padding-left:.28em}
@media (max-width:760px){.build{height:280vh}}

/* Einzugsgebiet */
.area-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.area .lead{margin-top:24px}
.area-list{display:grid;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.area-list li{display:grid;grid-template-columns:110px 1fr;gap:16px;font-size:15.5px;color:var(--ink-2)}
.area-list b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--accent-ink)}
.area .small{margin-top:24px}
.map{width:100%;height:auto;max-width:560px;justify-self:end;overflow:visible}
.map .rhine{stroke:var(--sand-3);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.map .ring{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1.4s var(--ease)}
.map .ring-a{fill:var(--salbei);fill-opacity:.14;stroke:var(--salbei);stroke-width:1.5}
.map .ring-b{fill:var(--taupe);fill-opacity:.12;stroke:var(--taupe);stroke-width:1.5;stroke-dasharray:5 5;transition-delay:.2s}
.map .city{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.6s + var(--i) * 60ms)}
.map .city circle{fill:var(--ink)}
.map .city text{font:500 11px var(--sans);fill:var(--ink-2)}
.map .city.big text{font:400 18px var(--serif);fill:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.map .city.big circle{fill:var(--accent)}
.map .km{font:500 11px var(--sans);fill:var(--ink-3);letter-spacing:.1em}
.map.in .rhine{stroke-dashoffset:0}
.map.in .ring{transform:scale(1)}
.map.in .city{opacity:1;transform:none}
@media (max-width:900px){.area-grid{grid-template-columns:1fr}.map{justify-self:center}.area-list li{grid-template-columns:1fr;gap:2px}}

/* Kontakt: Monogramm als leises Muster */
.contact{background-color:var(--bg-3);background-image:url(/img/muster.svg);background-size:320px 320px}


/* Ladescreen und Einwilligung */
.gate{position:fixed;inset:0;z-index:90;background:var(--bg);color:var(--ink);display:grid;place-items:center;transition:clip-path .9s var(--ease);clip-path:inset(0)}
.gate[data-state="done"]{clip-path:inset(0 0 100% 0);pointer-events:none}
.gate[data-state="settings"]{background:color-mix(in srgb,var(--graphit) 55%,transparent)}
.gate[data-state="settings"] .gate-logo{display:none}
.no-gate .gate{display:none}
.no-gate .gate[data-state="settings"]{display:grid}
body.gated{overflow:hidden}
.gate-logo{display:grid;justify-items:center;text-align:center;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.gate[data-state="consent"] .gate-logo{transform:translateY(-22vh) scale(.72);opacity:.9}
.gate-mark{width:clamp(150px,22vw,300px);height:auto;overflow:visible}
.gate-mark path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:gateDraw 1.5s cubic-bezier(.65,0,.35,1) forwards,gateFill .6s .9s var(--ease) forwards}
@keyframes gateDraw{to{stroke-dashoffset:0}}
@keyframes gateFill{to{fill-opacity:1;stroke-opacity:0}}
.gate-word{font-family:var(--serif);font-size:clamp(1rem,2vw,1.4rem);letter-spacing:.2em;text-transform:uppercase;margin-top:28px;opacity:0;transform:translateY(12px);animation:gateWord .9s 1.05s var(--ease) forwards}
@keyframes gateWord{to{opacity:1;transform:none}}
.consent{border-radius:calc(var(--radius) * 2);position:absolute;left:50%;bottom:clamp(20px,5vh,56px);transform:translate(-50%,40px) scale(.96);width:min(560px,100% - 32px);background:var(--bg);color:var(--ink);border:1px solid var(--line-2);padding:clamp(22px,3vw,34px);box-shadow:0 30px 80px -30px rgba(30,30,30,.35);opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.consent[hidden]{display:none}
.gate[data-state="consent"] .consent,.gate[data-state="settings"] .consent{opacity:1;transform:translate(-50%,0) scale(1)}
.consent h2{font-family:var(--serif);font-size:1.45rem;line-height:1.2;margin-bottom:10px}
.consent p{font-size:15px;color:var(--ink-2);line-height:1.55}
.consent p a{text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.consent-actions .btn{flex:1 1 auto;min-height:50px}
.consent-legal{margin-top:16px;font-size:13px;color:var(--ink-3);display:flex;gap:18px}
@media (max-width:600px){.consent{bottom:12px}.gate[data-state="consent"] .gate-logo{transform:translateY(-26vh) scale(.6)}}

/* Hero-Einstieg wartet, bis der Vorhang oben ist */
body.gated .hero-media img,body.gated .hero-media video{animation-play-state:paused,running}


/* Fortschrittslinie (scroll-getrieben, ohne JS) */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:var(--accent);transform:scaleX(0);transform-origin:left;display:none}
@supports (animation-timeline:scroll()){.progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}

/* Laufband mit Icons (einmal pro Seite) */
.band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--bg-2);--bg:var(--bg-2)}
.band-track{display:flex;align-items:center;gap:clamp(28px,4vw,56px);width:max-content;animation:band 42s linear infinite;will-change:transform}
.band-track span{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:.04em;white-space:nowrap;color:var(--ink)}
.band-ico{width:34px;flex:none}
.band-ico .ico{color:var(--accent)}
@keyframes band{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.band:hover .band-track{animation-play-state:paused}}

/* Karte: Herzschlag an den beiden Mittelpunkten */
.map .city.big circle{transform-box:fill-box;transform-origin:center}
.map.in .city.big circle{animation:pulse 2.8s var(--ease) 1.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.45)}}

/* Seitenwechsel als weiche Blende */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-16px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}

.foot-word .line{padding-bottom:.05em}


/* Terminanfrage: App-Sheet */
.sheet-wrap{position:fixed;inset:0;z-index:85;display:grid;place-items:end center}
.sheet-wrap[hidden]{display:none}
.sheet-back{position:absolute;inset:0;background:rgba(30,30,30,.55);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .4s var(--ease)}
.sheet{position:relative;width:min(100%,560px);max-height:min(92svh,860px);background:var(--bg);color:var(--ink);border-radius:20px 20px 0 0;display:grid;grid-template-rows:auto auto 1fr auto;transform:translateY(100%);will-change:transform;box-shadow:0 -20px 80px -20px rgba(0,0,0,.45);touch-action:none;transition:transform .55s cubic-bezier(.32,.72,0,1)}
.sheet-wrap.open .sheet-back{opacity:1}
.sheet-wrap.open .sheet{transform:none}
.sheet.dragging{transition:none}
.sheet-grip{padding:10px 0 2px;display:grid;justify-items:center;cursor:grab}
.sheet-grip i{width:44px;height:5px;border-radius:3px;background:var(--line-2)}
.sheet-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;padding:6px 16px 10px}
.sheet-nav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .25s,color .25s,opacity .3s}
.sheet-nav svg{width:18px;height:18px}
.sheet-nav:hover{background:var(--accent-soft);color:var(--ink)}
.sheet-nav[disabled]{opacity:0;pointer-events:none}
.sheet-prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.sheet-prog i{display:block;height:100%;width:20%;background:var(--accent);border-radius:2px;transition:width .5s var(--ease)}
.sheet-body{overflow:auto;padding:8px clamp(18px,4vw,32px) 24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.step{display:none}
.step.active{display:block;animation:stepIn .45s var(--ease) both}
.step.active.back{animation-name:stepInBack}
@keyframes stepIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.step h2{margin:6px 0 20px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:grid;gap:6px;text-align:left;padding:16px;border:1px solid var(--line-2);border-radius:calc(var(--radius) * 2);background:var(--bg);transition:border-color .25s,background .25s,transform .15s ease-out}
.tile .ico-wrap{width:44px;margin-bottom:4px}
.tile .ico{color:var(--accent)}
.tile b{font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.15}
.tile small{font-size:13px;color:var(--ink-2);line-height:1.4}
.tile:active{transform:scale(.98)}
.tile[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{padding:0 16px;min-height:42px;border:1px solid var(--line-2);border-radius:999px;font-size:14.5px;font-weight:500;background:var(--bg);transition:background .25s,border-color .25s,color .25s,transform .15s ease-out}
.chip:active{transform:scale(.96)}
.chip[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.field{display:grid;gap:8px;margin-bottom:16px;font-size:14px;font-weight:500}
.field small{font-weight:400;color:var(--ink-3)}
.field-label{font-size:14px;font-weight:500;margin-bottom:8px}
.field input,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--bg-3);border:1px solid var(--line-2);padding:14px 16px;width:100%;border-radius:var(--radius);appearance:none;-webkit-appearance:none;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field textarea{min-height:96px;resize:vertical}
.field[hidden]{display:none}
.field-err{min-height:20px;font-size:14px;color:#9a3b2e}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);font-size:20px;transition:background .25s,transform .15s ease-out}
.stepper button:hover{background:var(--accent-soft)}
.stepper button:active{transform:scale(.94)}
.stepper output{font:400 1.8rem var(--serif);min-width:2ch;text-align:center}
.summary{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 18px;font-size:15px}
.summary dt{color:var(--ink-3);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.summary dd{margin:0}
.done{text-align:center;padding:24px 0 8px}
.done-mark{width:84px;height:84px;margin:0 auto 20px;color:var(--accent)}
.done-mark circle,.done-mark path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.step.active .done-mark circle{animation:draw .9s var(--ease) forwards}
.step.active .done-mark path{animation:draw .5s .6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sheet-foot{padding:14px clamp(18px,4vw,32px) calc(18px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);background:var(--bg)}
.sheet-foot .btn{width:100%;min-height:56px;font-size:16px}
body.sheet-open{overflow:hidden}
@media (min-width:700px){
  .sheet-wrap{place-items:center}
  .sheet{border-radius:20px;max-height:min(88vh,820px);transform:translateY(30px) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .35s var(--ease)}
  .sheet-wrap.open .sheet{transform:none;opacity:1}
  .sheet-grip{display:none}
  .sheet-head{padding-top:16px}
}

/* Reduzierte Bewegung: Zustände statt Wege */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;transition-delay:0s!important}
  .hero-media img,.hero-media video{transform:none;animation:none}
  .line>span,[data-reveal]{transform:none;opacity:1}
  [data-mask]::after{display:none}[data-mask] img{transform:none}
  .steps li::before{width:100%}
  .build{height:auto;padding:clamp(80px,12vw,160px) 0}.build-scene{position:static;height:auto}
  .build-mark path{fill-opacity:1;stroke-opacity:0}.build-word,.build-sub{opacity:1;transform:none}
  .map .rhine{stroke-dashoffset:0}.map .ring{transform:none}.map .city{opacity:1;transform:none}
  .ico-wrap[data-reveal]{transform:none}
  .spread{height:auto;padding:80px 0}.spread-stage{position:static;height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--gutter)}.spread-text{position:static;opacity:1;grid-column:1/-1;margin-bottom:24px}.sp-card{position:static;width:auto;height:auto;aspect-ratio:3/4;transform:none!important}.svc-panel.in{animation:none}
  .step.active{animation:none}.sheet{transition:opacity .2s}
  .band-track{animation:none}.map.in .city.big circle{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}
  .gate-mark path{fill-opacity:1;stroke-opacity:0;animation:none}.gate-word{opacity:1;transform:none;animation:none}
  .gate[data-state="consent"] .gate-logo{transform:translateY(-22vh)}
}
@media (prefers-reduced-transparency:reduce){
  .nav::before,.mbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .btn-hero-ghost{backdrop-filter:none;background:rgba(30,30,30,.7)}
}