/* Corevira – style.css
   Schriften werden lokal ausgeliefert (kein Google-Fonts-Abruf). */

@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-400-700.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-400-500.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#F2F1EB;
  --paper-2:#E8E7DF;
  --card:#F9F8F4;
  --ink:#191B1A;
  --ink-2:#464B47;
  --mute:#5F645E;
  --line:rgba(25,27,26,.14);
  --line-strong:rgba(25,27,26,.3);
  --sage:#6F8470;
  --sage-ink:#3F5344;
  --sage-tint:#DFE6DA;
  --night:#171918;
  --on-night:#ECEBE4;
  --on-night-2:#B4B8B0;
  --night-line:rgba(236,235,228,.16);
  --sage-light:#A9BCA6;
  --err:#9A3B2E;
  --ph-bg:#EFE3C2;
  --ph-ink:#5B4A12;
  --font:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
  --hdr:84px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[id]{scroll-margin-top:96px}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--sage-ink);outline-offset:3px}
.on-night :focus-visible{outline-color:var(--sage-light)}
::selection{background:var(--sage-tint);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:4px;text-decoration:none;font-weight:500}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

h1,h2,h3{font-weight:500;letter-spacing:-.03em;word-spacing:.04em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.25rem)}
h3{font-size:clamp(1.3rem,1rem + .9vw,1.7rem);letter-spacing:-.025em;line-height:1.2}
.eyebrow{font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.lead{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:34rem}
.wrap{max-width:var(--maxw);margin-inline:auto}
.sec{padding-block:clamp(72px,10vw,148px);padding-inline:var(--gutter)}

/* ---------- Buttons & Links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:50px;padding:.85rem 1.5rem;border-radius:4px;border:1px solid transparent;font:500 .98rem/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),background-color .25s ease,color .25s ease,border-color .25s ease}
.btn .arr{width:1.15em;height:1.15em;flex:none;transition:transform .3s var(--ease)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{color:var(--ink);border-color:var(--line-strong)}
.btn-light{background:var(--on-night);color:var(--night)}
.btn-sm{min-height:42px;padding:.65rem 1.1rem;font-size:.9rem}
.btn:active{transform:scale(.98)}
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;text-decoration:none;padding-block:.35rem;border-bottom:1px solid currentColor}
.link-arrow .arr{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--sage-ink);transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
  .btn-light:hover{background:var(--sage-light);transform:translateY(-2px)}
  .btn:hover .arr,.link-arrow:hover .arr{transform:translateX(4px)}
  .link-arrow:hover{color:var(--sage-ink)}
}
.tag{display:inline-block;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.5rem .65rem;border:1px solid var(--sage);background:var(--sage-tint);color:var(--sage-ink)}

/* ---------- Header ---------- */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding-inline:var(--gutter);border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease}
.hdr.is-scrolled,.hdr.menu-open{background:var(--paper);border-bottom-color:var(--line)}
.hdr-in{max-width:var(--maxw);margin-inline:auto;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .4s var(--ease)}
.hdr.is-scrolled .hdr-in{height:64px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:29px;height:34px;flex:none;transition:width .4s var(--ease),height .4s var(--ease)}
.hdr.is-scrolled .logo-mark{width:25px;height:30px}
.lm-c{fill:#111111}
.lm-v{fill:#B7B7B7}
.on-night .lm-c{fill:var(--on-night)}
.on-night .lm-v{fill:#5B5F59}
.wm{font-weight:600;font-size:.98rem;letter-spacing:.2em;text-transform:uppercase}
.nav{display:none}
.nav ul{display:flex;gap:clamp(20px,2.6vw,40px)}
.nav a{position:relative;display:inline-block;padding:.5rem 0;font-size:.95rem;color:var(--ink-2);text-decoration:none;transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-cta{display:none}
.menu-btn{position:relative;width:46px;height:46px;flex:none;background:transparent;border:1px solid var(--line-strong);border-radius:4px;cursor:pointer}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease),opacity .2s ease}
.menu-btn i:nth-child(1){top:16px}.menu-btn i:nth-child(2){top:22px}.menu-btn i:nth-child(3){top:28px}
.menu-btn[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){top:22px;transform:rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;padding:8px var(--gutter) 28px;background:var(--paper);border-bottom:1px solid var(--line);height:calc(100dvh - var(--hdr));overflow-y:auto;opacity:0;transform:translateY(-10px);visibility:hidden;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s linear .35s}
.hdr.is-scrolled .mnav{height:calc(100dvh - 64px)}
.mnav.open{opacity:1;transform:none;visibility:visible;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s}
.mnav a:not(.btn){display:flex;align-items:center;min-height:58px;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btn{width:100%;margin-top:22px}
@media (min-width:920px){
  .nav{display:block}.hdr-cta{display:inline-flex}.menu-btn,.mnav{display:none}
}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--hdr) + clamp(40px,7vw,104px));padding-bottom:clamp(56px,8vw,120px);padding-inline:var(--gutter)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,7vw,80px);align-items:center}
.hero h1{margin-top:22px;font-size:clamp(2.5rem,1rem + 4vw,4.7rem);letter-spacing:-.035em;line-height:1.03}
.hero .lead{margin-top:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:560px){.hero-cta{display:grid}.hero-cta .btn{width:100%}}
.hero-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:32rem}
.aud{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.aud li{display:inline-flex;align-items:center;gap:.55rem}
.aud li::before{content:"";width:5px;height:5px;background:var(--sage);flex:none}
.hero-vis{position:relative;padding-bottom:clamp(20px,4vw,44px)}
.vis-cap{padding-right:30%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;font-size:.88rem;color:var(--mute)}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.fx{animation:fx .8s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes fx{from{opacity:0}to{opacity:1}}

/* ---------- Reveal (nur Einblenden, keine Positionsänderung) ---------- */
.js .rv{opacity:0;transition:opacity .7s ease}
.js .rv.in{opacity:1}

/* ---------- Trust ---------- */
.trust{border-block:1px solid var(--line);padding-inline:var(--gutter)}
.trust-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr}
.trust-item{padding:22px 0;border-top:1px solid var(--line)}
.trust-item:first-child{border-top:0}
.trust-item .trust-title{font:500 1.15rem/1.3 var(--font);letter-spacing:-.015em;margin-bottom:6px;color:var(--ink)}
.trust-item p{font-size:.95rem;line-height:1.55;color:var(--ink-2);max-width:26rem}
@media (min-width:640px){.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-top:0}.trust-item:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}}
@media (min-width:1000px){.trust-grid{grid-template-columns:repeat(4,1fr)}.trust-item{padding:36px 28px;border-top:0;border-left:1px solid var(--line)}.trust-item:first-child{padding-left:0;border-left:0}}

/* ---------- Section head ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(40px,6vw,84px)}
.sec-head p:not(.eyebrow){color:var(--ink-2);max-width:36rem;font-size:1.1rem}
@media (min-width:900px){
  .sec-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px}
  .sec-head .eyebrow{grid-column:1/4;padding-top:.9rem}
  .sec-head h2{grid-column:4/-1;max-width:20ch}
  .sec-head p:not(.eyebrow){grid-column:4/11}
}

/* ---------- Leistungen ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line-strong)}
.svc{padding:clamp(26px,3vw,44px) 0;border-top:1px solid var(--line-strong);transition:background-color .4s ease}
.svc h3{margin-bottom:8px}
.svc p{color:var(--ink-2);max-width:26rem}
.svc .svc-sub{margin-bottom:14px;font-weight:500;color:var(--sage-ink);transition:color .3s ease}
@media (min-width:760px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc{padding-inline:clamp(24px,3vw,44px)}
  .svc:nth-child(odd){padding-left:0}
  .svc:nth-child(even){border-left:1px solid var(--line-strong);padding-right:0}
}
@media (hover:hover) and (pointer:fine){
  .svc:hover .svc-sub{color:var(--ink)}
  .svc:hover h3{transform:translateX(6px)}
  .svc h3{transition:transform .5s var(--ease)}
}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(36px,5vw,64px);padding:clamp(24px,3vw,36px) 0 0;border-top:1px solid var(--line-strong)}
.cta-row p{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);letter-spacing:-.02em;line-height:1.35;max-width:32rem}

/* ---------- Projekte ---------- */
.projects{background:var(--paper-2)}
.cases{display:flex;flex-direction:column;gap:clamp(64px,9vw,140px)}
.case{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.case-media{display:block;text-decoration:none}
.case-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.case-copy h3{font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);letter-spacing:-.035em}
.case-cat{font:500 .78rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.case-copy p:not(.case-cat){color:var(--ink-2);max-width:24rem}
.case-copy .link-arrow{margin-top:8px}
@media (min-width:1000px){
  .case{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
  .case-media{grid-column:1/9;grid-row:1}
  .case-copy{grid-column:9/13;grid-row:1}
  .case:nth-child(even) .case-media{grid-column:5/13}
  .case:nth-child(even) .case-copy{grid-column:1/5}
}

/* ---------- Browser-Mockup ---------- */
.bw{position:relative;border:1px solid var(--line-strong);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(25,27,26,.04),0 44px 70px -46px rgba(25,27,26,.5);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.bw-bar{display:flex;align-items:center;gap:14px;height:36px;padding:0 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.bw-dots{display:flex;gap:5px;flex:none}
.bw-tag{flex:none;font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .5rem;background:var(--sage-tint);border:1px solid var(--sage);color:var(--sage-ink)}
.bw-dots i{width:14px;height:4px;border-radius:2px;background:var(--line-strong)}
.bw-url{flex:1;min-width:0;max-width:56%;margin-inline:auto;padding:6px 10px;font:400 .68rem/1 var(--mono);color:var(--mute);text-align:center;background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-vp{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;background:#fff}
.pg{width:100%;transition:transform 1.8s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .case-media:hover .bw,.hero-vis:hover .bw{transform:translateY(-4px);box-shadow:0 1px 0 rgba(25,27,26,.04),0 54px 80px -46px rgba(25,27,26,.55)}
  .case-media:hover .pg,.hero-vis:hover .pg,.bw-wide:hover .pg{transform:translateY(-36%)}
}
.phone{position:absolute;right:4%;bottom:0;width:27%;aspect-ratio:9/18.5;padding:5px;background:#fff;border:1px solid var(--line-strong);border-radius:20px;box-shadow:0 30px 50px -28px rgba(25,27,26,.6)}
.phone-screen{height:100%;overflow:hidden;border-radius:15px;container-type:inline-size}

/* Mockup 1: La Corina (Restaurant) */
.mc{background:#2A1D18;color:#F1E6D8;font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;min-height:100cqw}
.mc-nav{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4.4cqw}
.mc-logo{font-size:2.6cqw;font-style:italic;letter-spacing:.01em}
.mc-links{display:flex;gap:2.8cqw;font:1.4cqw/1 var(--font);letter-spacing:.06em;color:#CDBFAE}
.mc-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:4cqw;align-items:center;padding:2.4cqw 4.4cqw 4.4cqw}
.mc-eyebrow{font:1.1cqw/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:#C9A27A;margin-bottom:2cqw}
.mc-h{font-size:5.6cqw;line-height:1.02;font-weight:400;letter-spacing:-.01em}
.mc-p{font:1.5cqw/1.6 var(--font);color:#CDBFAE;margin:2.2cqw 0 2.8cqw;max-width:34cqw}
.mc-btn{display:inline-block;background:#C9A27A;color:#2A1D18;font:600 1.45cqw/1 var(--font);padding:1.3cqw 2.4cqw;border-radius:.4cqw}
.mc-art{aspect-ratio:4/5;border-radius:999px 999px .6cqw .6cqw;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 .2cqw,transparent .2cqw 1.6cqw),linear-gradient(170deg,#A56C48 0%,#5B3624 55%,#2F1D15 100%)}
.mc-menu{padding:4.4cqw;border-top:1px solid rgba(241,230,216,.16)}
.mc-mh{font-size:3.4cqw;margin-bottom:3cqw}
.mc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3.6cqw}
.mc-col b{display:block;font:600 1.15cqw/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#C9A27A;margin-bottom:1.6cqw}
.mc-col span{display:block;font-size:1.7cqw;padding:1.1cqw 0;border-bottom:1px dotted rgba(241,230,216,.28)}
/* Mockup 2: Müller Bau (Handwerk) */
.mb{background:#F3F4F6;color:#12203A;font-family:"Helvetica Neue",Arial,sans-serif;min-height:100cqw}
.mb-nav{display:flex;justify-content:space-between;align-items:center;padding:2.2cqw 4.4cqw;background:#12203A;color:#fff}
.mb-logo{font-weight:800;letter-spacing:.16em;font-size:1.8cqw}
.mb-cta{background:#F2B705;color:#12203A;font-weight:700;font-size:1.35cqw;padding:1cqw 1.8cqw;border-radius:.3cqw}
.mb-hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:30cqw}
.mb-copy{padding:3.6cqw 4.4cqw}
.mb-h{font-size:5.2cqw;line-height:.98;font-weight:800;letter-spacing:-.03em}
.mb-p{font-size:1.5cqw;line-height:1.5;color:#3C4A63;margin:1.8cqw 0 2.2cqw;max-width:34cqw}
.mb-btn{display:inline-block;background:#12203A;color:#fff;font-weight:700;font-size:1.4cqw;padding:1.2cqw 2.2cqw;border-radius:.3cqw}
.mb-art{position:relative;background:#1B2E52;background-image:linear-gradient(rgba(255,255,255,.09) .12cqw,transparent .12cqw),linear-gradient(90deg,rgba(255,255,255,.09) .12cqw,transparent .12cqw);background-size:3.2cqw 3.2cqw}
.mb-art::after{content:"";position:absolute;left:3.2cqw;bottom:3.2cqw;width:14cqw;height:14cqw;border-left:1.4cqw solid #F2B705;border-bottom:1.4cqw solid #F2B705}
.mb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:3.4cqw 4.4cqw}
.mb-tile{background:#fff;padding:2.4cqw;border-top:.4cqw solid #12203A}
.mb-tile small{display:block;font-size:1.2cqw;letter-spacing:.14em;color:#6A7690;margin-bottom:1.8cqw}
.mb-tile b{display:block;font-size:2.2cqw;margin-bottom:.8cqw}
.mb-tile span{font-size:1.4cqw;color:#3C4A63}
/* Mockup 3: PureLife (Fitness) */
.mp{background:#FBF7F1;color:#1F2E27;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;min-height:100cqw}
.mp-nav{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4.4cqw}
.mp-logo{font-weight:700;font-size:2.4cqw;color:#2F6F5E;letter-spacing:-.01em}
.mp-links{display:flex;align-items:center;gap:2.6cqw;font-size:1.4cqw;color:#4C5F55}
.mp-links b{background:#2F6F5E;color:#fff;font-weight:600;padding:1cqw 2cqw;border-radius:99cqw}
.mp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:4cqw;align-items:center;padding:3cqw 4.4cqw 4.4cqw}
.mp-h{font-size:5.6cqw;line-height:1.02;font-weight:700;letter-spacing:-.03em}
.mp-p{font-size:1.55cqw;line-height:1.55;color:#4C5F55;margin:2.2cqw 0 2.4cqw;max-width:34cqw}
.mp-chips{display:flex;gap:1.2cqw;flex-wrap:wrap}
.mp-chips span{background:#F2D3BE;color:#6A3A22;font-size:1.35cqw;font-weight:600;padding:.9cqw 1.8cqw;border-radius:99cqw}
.mp-card{background:#fff;border-radius:2.2cqw;padding:2.6cqw;box-shadow:0 2cqw 4cqw -2.4cqw rgba(31,46,39,.3)}
.mp-card small{display:block;font-size:1.15cqw;letter-spacing:.14em;text-transform:uppercase;color:#7A8B81;margin-bottom:1.6cqw}
.mp-row{display:flex;justify-content:space-between;gap:2cqw;padding:1.5cqw 0;border-top:1px solid #ECE6DC;font-size:1.6cqw;font-weight:600}
.mp-row i{font-style:normal;font-weight:500;color:#7A8B81}
.mp-band{margin:0 4.4cqw 4.4cqw;background:#2F6F5E;color:#fff;border-radius:2.2cqw;padding:4cqw;font-size:3cqw;font-weight:700;letter-spacing:-.02em}
/* Handy-Ansicht La Corina */
.mm{background:#2A1D18;color:#F1E6D8;font-family:Georgia,"Iowan Old Style",serif;height:100%}
.mm-nav{display:flex;justify-content:space-between;align-items:center;padding:7cqw 8cqw 4cqw}
.mm-logo{font-size:9cqw;font-style:italic}
.mm-bars{width:9cqw;height:5cqw;border-top:.8cqw solid #F1E6D8;border-bottom:.8cqw solid #F1E6D8}
.mm-body{padding:4cqw 8cqw}
.mm-e{font:3.6cqw/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#C9A27A;margin-bottom:5cqw}
.mm-h{font-size:15cqw;line-height:1;letter-spacing:-.01em;font-weight:400}
.mm-btn{display:block;margin-top:8cqw;background:#C9A27A;color:#2A1D18;text-align:center;font:600 5cqw/1 var(--font);padding:4.4cqw;border-radius:1.2cqw}
.mm-art{margin:8cqw 8cqw 0;height:60cqw;border-radius:999px 999px 1.5cqw 1.5cqw;background:linear-gradient(170deg,#A56C48 0%,#5B3624 55%,#2F1D15 100%)}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line-strong)}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 8px;padding:28px 0;border-top:1px solid var(--line-strong)}
.step .num{font:500 .8rem/1.9 var(--mono);letter-spacing:.08em;color:var(--sage-ink)}
.step h3{font-size:1.5rem;margin-bottom:8px}
.step p{color:var(--ink-2);max-width:30rem;font-size:1rem}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;border-bottom:0}
  .step{display:block;position:relative;padding:30px 0 0}
  .step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--sage)}
  .step .num{display:block;margin-bottom:38px}
  .step h3{font-size:1.4rem}
  .step p{font-size:.96rem}
}

/* ---------- Über uns ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,64px)}
.person{display:grid;grid-template-columns:1fr;gap:22px}
.person-tile{position:relative;aspect-ratio:3/2;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.person-tile .ini{position:absolute;left:clamp(18px,2.6vw,32px);bottom:clamp(14px,2vw,24px);font-size:clamp(4.4rem,3rem + 6vw,8.4rem);font-weight:500;letter-spacing:-.06em;line-height:1;color:var(--sage-ink)}
.person-tile .lbl{position:absolute;left:clamp(18px,2.6vw,32px);top:clamp(16px,2vw,24px);font:500 .72rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.person-tile::after{content:"";position:absolute;right:clamp(18px,2.6vw,32px);top:clamp(16px,2vw,24px);width:9px;height:9px;background:var(--sage)}
.person-tile.grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.person-tile.rules{background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 32px)}
.person-role{font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.person p{color:var(--ink-2);max-width:28rem;margin-top:12px}
@media (min-width:760px){.about-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}}

/* ---------- FAQ ---------- */
.faq{max-width:860px;border-bottom:1px solid var(--line-strong)}
.faq-item{border-top:1px solid var(--line-strong)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:26px 0;background:none;border:0;text-align:left;cursor:pointer;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.faq-q .chev{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .45s}
.faq-item.open .faq-a>div{visibility:visible;transition-delay:0s}
.faq-a p{padding-bottom:28px;color:var(--ink-2);max-width:40rem}
@media (hover:hover) and (pointer:fine){.faq-q:hover{color:var(--sage-ink)}}

/* ---------- Abschluss & Footer (dunkel) ---------- */
.night{background:var(--night);color:var(--on-night)}
.final{padding-block:clamp(72px,9vw,128px);padding-inline:var(--gutter)}
.final h2{font-size:clamp(2.2rem,1rem + 3.8vw,4.6rem);letter-spacing:-.035em;line-height:1.02;max-width:14ch}
.final p{margin-top:0;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--on-night-2);max-width:32rem}
.final-main .eyebrow{color:var(--on-night-2);margin-bottom:22px}
.final-side{margin-top:28px}
.final-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:32px}
@media (min-width:1000px){.final .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}.final-main{grid-column:1/9}.final-side{grid-column:9/13;margin-top:0;padding-top:24px;border-top:1px solid var(--night-line)}}
.final-mail{color:var(--on-night);font-size:1rem;text-underline-offset:5px}
.ftr{padding:clamp(48px,6vw,72px) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--night-line)}
.ftr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.ftr-brand{grid-column:1/-1}
.ftr-brand p{margin-top:16px;color:var(--on-night-2);max-width:20rem}
.ftr h2{font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:14px}
.ftr li+li{margin-top:6px}
.ftr a{text-decoration:none;color:var(--on-night)}
.ftr-list a{display:inline-block;padding:.5rem 0}
.ftr a:hover{text-decoration:underline;text-underline-offset:4px}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(40px,6vw,64px);padding-top:22px;border-top:1px solid var(--night-line);font-size:.85rem;color:var(--on-night-2)}
@media (min-width:900px){.ftr-grid{grid-template-columns:2fr 1fr 1fr 1fr}.ftr-brand{grid-column:auto}}
.ftr .wm{color:var(--on-night)}

/* ---------- Innenseiten ---------- */
.page{padding:calc(var(--hdr) + clamp(40px,6vw,88px)) var(--gutter) clamp(72px,9vw,128px)}
.page h1{font-size:clamp(2.3rem,1rem + 4.4vw,4.6rem);letter-spacing:-.035em;line-height:1.03;max-width:16ch;margin-top:18px;overflow-wrap:break-word}
.page .lead{margin-top:24px}
.crumb{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--mute);text-decoration:none}
.crumb:hover{color:var(--ink)}
.crumb .arr{width:1em;height:1em;transform:rotate(180deg)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,72px);margin-top:clamp(36px,5vw,64px)}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.aside h2{font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.aside ol{counter-reset:s;border-top:1px solid var(--line-strong)}
.aside li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}
.aside li::before{content:counter(s);font:500 .8rem/1.9 var(--mono);color:var(--sage-ink)}
.aside li b{display:block;font-weight:500}
.aside li span{color:var(--ink-2);font-size:.98rem}
.aside .direct{margin-top:28px;color:var(--ink-2)}
.aside .direct a{color:var(--ink);text-underline-offset:4px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3.5vw,44px)}
.frow{display:grid;grid-template-columns:minmax(0,1fr);gap:0 20px}
@media (min-width:640px){.frow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{font-weight:500;font-size:.95rem}
.field .opt{font-weight:400;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:.8rem 1rem;background:#fff;border:1px solid var(--line-strong);border-radius:4px;font-size:1rem;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23191B1A' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage-ink);box-shadow:0 0 0 3px var(--sage-tint)}
.field .err{font-size:.88rem;color:var(--err);display:none}
.field.has-err .err{display:block}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--err)}
.hint{font-size:.88rem;color:var(--mute);margin:4px 0 22px}
.hint a{text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{margin-top:16px;font-size:.92rem;line-height:1.5;color:var(--err)}
.form-err a{color:var(--err);text-underline-offset:3px}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.form-card .btn{width:100%}
@media (min-width:640px){.form-card .btn{width:auto}}
.sent h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem)}
.sent p{margin-top:14px;color:var(--ink-2);max-width:34rem}
.sent .back{margin-top:18px;background:none;border:0;padding:.4rem 0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* Case-Seiten */
.case-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.case-head h1{margin-top:6px}
.case-figure{margin-top:clamp(36px,5vw,64px)}
.case-note{margin-top:16px;font-size:.9rem;color:var(--mute);max-width:44rem}
.facts{margin-top:clamp(56px,8vw,112px);border-top:1px solid var(--line-strong)}
.fact{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;padding:26px 0;border-bottom:1px solid var(--line)}
.fact dt{font:500 .75rem/1.9 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.fact dd{max-width:42rem;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6}
@media (min-width:900px){.fact{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.fact dt{grid-column:1/4}.fact dd{grid-column:4/11}}
.pn{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--line-strong)}
.pn a{display:block;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s ease}
.pn a small{display:block;font:500 .75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.pn a span{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.03em}
.pn a:hover span{color:var(--sage-ink)}
@media (min-width:760px){.pn{grid-template-columns:1fr 1fr;gap:32px}.pn a:last-child{text-align:right}}

/* Rechtstexte */
.legal{max-width:46rem;margin-top:clamp(32px,4vw,56px)}
.legal h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);letter-spacing:-.025em;margin:44px 0 12px}
.legal h3{font-size:1.08rem;letter-spacing:-.01em;margin:24px 0 6px}
.legal p,.legal li{color:var(--ink-2);margin-top:10px}
.legal ul{list-style:disc;padding-left:1.3rem}
.legal a{color:var(--ink);text-underline-offset:3px}
.notice{margin-top:28px;padding:16px 18px;border:1px dashed var(--ph-ink);background:var(--ph-bg);color:var(--ph-ink);font-size:.95rem;max-width:46rem}
.ph{background:var(--ph-bg);color:var(--ph-ink);padding:.05em .3em;border:1px dashed var(--ph-ink);border-radius:2px;font-weight:500}

/* ---------- Reduzierte Bewegung ---------- */
@media (max-width:640px){
  .phone{width:34%}
  .vis-cap{padding-right:38%}
  .bw-dots{display:none}
  .bw-url{max-width:none;text-align:left}
  .svc p,.step p,.case-copy p,.fact dd,.trust-item p{hyphens:auto;-webkit-hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv{opacity:1}
  .pg{transform:none!important}
}