@import url("../assets/fonts/fonts.css");

/* ============================================================
   MICHAEL LÖW · Kaufmännische Führung auf Zeit
   Design-System – Ledger / Editorial
   ============================================================ */

:root{
  --tinte:#141E28;
  --tinte-90:#1B2733;
  --papier:#EDEAE1;
  --papier-tief:#E4E0D5;
  --papier-hell:#F5F2EB;
  --linie:#C6BFB0;
  --linie-fein:#D6D0C2;
  --soll:#A32E23;
  --soll-hell:#C25548;
  --haben:#1E4D3B;
  --grau:#5C6670;
  --grau-hell:#8A96A2;

  --display:'Archivo',system-ui,-apple-system,Segoe UI,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'Cascadia Code','Segoe UI Mono',Consolas,monospace;

  --rand:clamp(20px,5vw,80px);
  --max:1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--body);
  font-size:clamp(17px,.55vw + 15px,20px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand);}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:0;}
h2{font-size:clamp(30px,3.6vw,50px);}
h3{font-size:clamp(20px,1.6vw,25px);letter-spacing:-.02em;}
p{margin:0 0 1em;}
strong,b{font-weight:600;}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau);margin:0 0 22px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--soll);flex:none;}
.lead{font-size:clamp(19px,1vw + 15px,24px);line-height:1.5;color:#2C3844;}

section{padding:clamp(66px,8vw,120px) 0;border-top:1px solid var(--linie);position:relative;}

/* Zweispaltige Rubrik (Label links, Inhalt rechts) */
.rubrik{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(24px,4vw,64px);}
.rubrik .sticky{position:sticky;top:96px;align-self:start;}
@media(max-width:840px){.rubrik{grid-template-columns:1fr;gap:14px;}.rubrik .sticky{position:static;}}

/* ---------- Buttons ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-weight:600;font-size:16px;
  background:var(--tinte);color:var(--papier);text-decoration:none;
  padding:16px 30px;border:1px solid var(--tinte);cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.knopf:hover,.knopf:focus-visible{background:var(--soll);border-color:var(--soll);transform:translateY(-2px);}
.knopf .pfeil{transition:transform .2s ease;}
.knopf:hover .pfeil{transform:translateX(4px);}
.knopf--geist{background:transparent;color:var(--tinte);}
.knopf--geist:hover{background:var(--tinte);color:var(--papier);}
.textlink{
  font-family:var(--mono);font-size:15px;text-decoration:none;
  border-bottom:1px solid var(--linie);padding-bottom:2px;transition:border-color .2s;
}
.textlink:hover{border-bottom-color:var(--soll);}

/* ============================================================
   HEADER
   ============================================================ */
.kopf{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--linie);
  background:color-mix(in srgb,var(--papier) 90%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px var(--rand);}
.marke{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:19px;text-decoration:none;color:var(--tinte);white-space:nowrap;}
.marke span{color:var(--grau);font-weight:600;}
.kopf nav{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;}
.kopf nav a{color:var(--grau);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.kopf nav a:hover{color:var(--tinte);border-bottom-color:var(--soll);}
.kopf .kopf-cta{display:inline-flex;}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:44px;height:44px;}
.burger span{display:block;width:24px;height:2px;background:var(--tinte);margin:5px 0;transition:transform .25s,opacity .25s;}
@media(max-width:960px){
  .kopf nav,.kopf .kopf-cta{display:none;}
  .burger{display:block;}
  .kopf nav.offen{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--papier);border-bottom:1px solid var(--linie);padding:18px var(--rand) 26px;gap:18px;font-size:15px;
  }
  body.menu-auf .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.menu-auf .burger span:nth-child(2){opacity:0;}
  body.menu-auf .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{border-top:0;padding-top:clamp(48px,6vw,88px);padding-bottom:0;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,38vw,480px));gap:clamp(28px,4vw,64px);align-items:end;}
.hero-text{padding-bottom:clamp(48px,6vw,96px);}
.hero h1{font-size:clamp(36px,5.6vw,78px);max-width:15ch;}
.hero h1 .war{color:var(--grau);font-weight:600;display:block;font-size:.62em;letter-spacing:-.02em;margin-bottom:.35em;line-height:1.12;}
.hero h1 .wird{display:block;}
.mark{position:relative;white-space:nowrap;}
.mark::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.14em;background:var(--soll);opacity:.9;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.3,1) .5s;}
.geladen .mark::after{transform:scaleX(1);}
.hero .lead{max-width:50ch;margin-top:30px;}
.aktion{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:36px;}

/* Portrait-Panel */
.portrait{position:relative;align-self:end;}
.portrait-panel{
  position:relative;aspect-ratio:4/5;background:var(--tinte);overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:100% 34px,34px 100%;
}
.portrait-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,transparent 40%,rgba(0,0,0,.45));z-index:1;}
.portrait-panel img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:112%;max-width:none;height:auto;z-index:2;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));}
.portrait-tag{
  position:absolute;left:0;bottom:0;z-index:3;background:var(--soll);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;
}
.portrait figcaption{font-family:var(--mono);font-size:12.5px;color:var(--grau);margin-top:12px;line-height:1.6;}
.portrait-platzhalter{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--grau-hell);font-family:var(--mono);font-size:12px;letter-spacing:.1em;line-height:2;padding:24px;}

@media(max-width:840px){
  .hero-grid{grid-template-columns:1fr;align-items:start;}
  .hero-text{padding-bottom:36px;order:2;}
  .portrait{order:1;max-width:320px;}
}

/* ============================================================
   KENNZAHLEN (Counter-Leiste)
   ============================================================ */
.kennzahlen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--papier-tief);}
.kennzahlen .grid{display:grid;grid-template-columns:repeat(4,1fr);}
.kennzahl{padding:34px clamp(16px,2.4vw,30px);border-left:1px solid var(--linie);}
.kennzahl:first-child{border-left:0;}
.kennzahl .wert{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;color:var(--tinte);line-height:1;margin-bottom:10px;}
.kennzahl .txt{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--grau);}
@media(max-width:720px){
  .kennzahlen .grid{grid-template-columns:1fr 1fr;}
  .kennzahl:nth-child(3){border-left:0;}
  .kennzahl:nth-child(n+3){border-top:1px solid var(--linie);}
}

/* ============================================================
   ZWEI PFADE (Handwerk / Kommunen)
   ============================================================ */
.pfade-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--tinte);margin-top:8px;}
.pfad{padding:clamp(28px,3vw,44px);position:relative;}
.pfad:first-child{border-right:1px solid var(--tinte);}
.pfad .kennung{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soll);margin-bottom:18px;}
.pfad:last-child .kennung{color:var(--haben);}
.pfad h3{margin-bottom:14px;}
.pfad p{color:#2C3844;font-size:17px;}
.pfad ul{list-style:none;margin:16px 0 0;padding:0;font-family:var(--mono);font-size:13.5px;line-height:1.9;color:var(--grau);}
.pfad li::before{content:"–";color:var(--soll);margin-right:9px;}
.pfad:last-child li::before{color:var(--haben);}
@media(max-width:760px){
  .pfade-grid{grid-template-columns:1fr;}
  .pfad:first-child{border-right:0;border-bottom:1px solid var(--tinte);}
}

/* ============================================================
   T-KONTO (Soll / Haben) – Signatur
   ============================================================ */
.konto{border:1px solid var(--tinte);background:var(--papier-hell);}
.konto-kopf{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--tinte);}
.konto-kopf span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;}
.konto-kopf span:first-child{color:var(--soll);border-right:1px solid var(--tinte);}
.konto-kopf span:last-child{color:var(--haben);}
.zeile{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie);}
.zeile:first-of-type{border-top:0;}
.zeile>div{padding:24px 22px;font-size:17px;line-height:1.5;}
.zeile .s{border-right:1px solid var(--tinte);color:var(--soll);font-style:italic;}
.zeile .h{color:var(--haben);position:relative;}
.zeile .h::before{content:"→";position:absolute;left:-11px;top:26px;color:var(--linie);font-style:normal;background:var(--papier-hell);padding:2px 0;font-size:15px;}
@media(max-width:700px){
  .konto-kopf{grid-template-columns:1fr;}
  .konto-kopf span:first-child{border-right:0;border-bottom:1px solid var(--linie);}
  .konto-kopf span:last-child{display:none;}
  .zeile{grid-template-columns:1fr;}
  .zeile .s{border-right:0;border-bottom:1px dashed var(--linie);}
  .zeile .h::before{display:none;}
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.leistung{padding:36px 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(20px,3vw,52px);}
.leistung:first-of-type{border-top:0;padding-top:4px;}
.leistung h3{margin-bottom:12px;}
.leistung p{margin-bottom:0;color:#2C3844;}
.leistung ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--grau);}
.leistung li::before{content:"–";margin-right:9px;color:var(--soll);}
@media(max-width:840px){.leistung{grid-template-columns:1fr;gap:16px;}}

.randnotiz{margin-top:46px;padding:28px 30px;background:var(--papier-tief);border-left:3px solid var(--soll);}
.randnotiz strong{font-family:var(--display);color:var(--tinte);display:block;margin-bottom:8px;font-size:17px;font-weight:800;}
.randnotiz p{color:var(--grau);font-size:16.5px;margin:0;}

/* ============================================================
   PERSON
   ============================================================ */
.person-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;}
.person-foto{background:var(--tinte);aspect-ratio:4/5;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 32px;}
.person-foto img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:108%;max-width:none;}
.person-foto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--grau-hell);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-align:center;line-height:1.9;padding:20px;}
.person-text p{max-width:58ch;color:#2C3844;}
.person-text p:first-child{color:var(--tinte);}
@media(max-width:760px){.person-grid{grid-template-columns:1fr;}.person-foto{max-width:280px;}}

/* Ablauf */
.ablauf{margin-top:56px;}
.schritt{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--linie);}
.schritt:first-of-type{border-top:0;}
.schritt .nr{font-family:var(--mono);font-size:13px;color:var(--soll);padding-top:5px;}
.schritt h3{font-size:20px;}
.schritt p{margin:7px 0 0;color:#2C3844;font-size:17px;}

/* ============================================================
   HONORAR
   ============================================================ */
.satz{background:var(--tinte);color:var(--papier);padding:30px 34px;margin-bottom:34px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;}
.satz .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau-hell);}
.satz .val{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;}
.posten{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:19px 0;border-top:1px solid var(--linie);}
.posten:first-of-type{border-top:0;}
.posten .bez{font-family:var(--display);font-weight:600;font-size:18px;}
.posten .det{display:block;font-family:var(--body);font-weight:400;font-size:15.5px;color:var(--grau);margin-top:3px;}
.posten .preis{font-family:var(--mono);font-size:16px;white-space:nowrap;color:var(--tinte);}
.ust{font-family:var(--mono);font-size:12.5px;color:var(--grau);margin-top:24px;line-height:1.6;}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{background:var(--tinte);color:var(--papier);border-top:0;}
.kontakt h2{color:var(--papier);}
.kontakt .eyebrow{color:var(--grau-hell);}
.kontakt .eyebrow::before{background:var(--soll-hell);}
.kontakt .lead{color:#C7CFD6;}
.kontakt .knopf{background:var(--papier);color:var(--tinte);border-color:var(--papier);}
.kontakt .knopf:hover{background:var(--soll);border-color:var(--soll);color:#fff;}
.daten{font-family:var(--mono);font-size:15px;line-height:2.15;margin-top:34px;color:#C7CFD6;display:grid;gap:2px;}
.daten a{color:var(--papier);text-decoration:none;border-bottom:1px solid #3A4753;}
.daten a:hover{border-bottom-color:var(--soll-hell);}
.daten .k{color:var(--grau-hell);display:inline-block;min-width:78px;}
.gebiet{margin-top:26px;font-size:16px;color:var(--grau-hell);max-width:46ch;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:#0E1720;color:#7C8894;padding:46px 0;font-family:var(--mono);font-size:12.5px;line-height:1.9;}
footer .hinweis{max-width:64ch;margin-bottom:24px;font-family:var(--body);font-size:15px;line-height:1.6;color:#96A1AC;}
footer .zeile-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;}
footer .links{display:flex;gap:22px;flex-wrap:wrap;}
footer a{color:#B6BFC8;text-decoration:none;border-bottom:1px solid #2C3742;}
footer a:hover{border-bottom-color:var(--soll-hell);}

/* ============================================================
   ANIMATIONEN
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.da{opacity:1;transform:none;}
.hero-text .eyebrow,.hero-text h1,.hero-text .lead,.hero-text .aktion{opacity:0;transform:translateY(16px);animation:auf .8s cubic-bezier(.2,.7,.3,1) forwards;}
.hero-text h1{animation-delay:.08s;}
.hero-text .lead{animation-delay:.18s;}
.hero-text .aktion{animation-delay:.28s;}
.portrait-panel{opacity:0;transform:translateY(24px);animation:auf .9s cubic-bezier(.2,.7,.3,1) .2s forwards;}
@keyframes auf{to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.hero-text *,.portrait-panel{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
  .mark::after{transform:scaleX(1)!important;}
}

/* Legal-Seiten */
.legal{max-width:820px;margin:0 auto;padding:clamp(60px,8vw,110px) var(--rand);}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:32px;}
.legal h2{font-size:22px;margin:38px 0 12px;}
.legal p,.legal address{font-size:17px;color:#2C3844;font-style:normal;}
.legal .tbd{background:#FBE9CF;border-left:3px solid #B8843A;padding:14px 18px;font-family:var(--mono);font-size:13.5px;color:#6b4f22;margin:14px 0;line-height:1.6;}
.legal a{color:var(--soll);}
.zurueck{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--grau);text-decoration:none;display:inline-block;margin-bottom:40px;}
.zurueck:hover{color:var(--soll);}

/* ============================================================
   SIGNATUR-LOGO (Ephesis)
   ============================================================ */
.marke-sig{font-family:'Ephesis',cursive;font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:.9;color:var(--tinte);text-decoration:none;display:inline-block;padding-top:4px;}
.marke-wrap{display:flex;align-items:baseline;gap:12px;}
.marke-wrap .ort{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grau);text-transform:uppercase;}
@media(max-width:520px){.marke-wrap .ort{display:none;}}
.sig-signoff{font-family:'Ephesis',cursive;font-size:clamp(46px,7vw,86px);line-height:.9;color:var(--papier);margin:0 0 6px;}
.sig-untertitel{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-hell);}

/* ============================================================
   FAQ
   ============================================================ */
.faq-item{border-top:1px solid var(--linie);}
.faq-item:last-child{border-bottom:1px solid var(--linie);}
.faq-frage{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.4vw,21px);color:var(--tinte);letter-spacing:-.01em;line-height:1.3;}
.faq-frage::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:24px;color:var(--soll);transition:transform .3s ease;}
.faq-item.auf .faq-frage::after{content:"–";}
.faq-antwort{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-antwort .inner{padding:0 40px 26px 0;color:#2C3844;font-size:17px;}
.faq-antwort .inner p{margin:0;}

a:focus-visible,button:focus-visible{outline:2px solid var(--soll);outline-offset:3px;}
::selection{background:var(--soll);color:#fff;}

/* ============================================================
   V2 · GRÖSSER, FETTER, WENIGER „BUCH"  (Body = Grotesk statt Serif)
   ============================================================ */
:root{ --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; }
body{ font-family:var(--body); font-size:clamp(18px,.55vw + 16px,21px); line-height:1.55; letter-spacing:-.006em; }
h2{ font-size:clamp(34px,4.7vw,64px); letter-spacing:-.038em; line-height:1.02; }
h3{ font-size:clamp(21px,1.7vw,26px); }
.lead{ font-size:clamp(21px,1.1vw + 16px,28px); line-height:1.38; letter-spacing:-.012em; color:#2A3642; }
.hero h1{ font-size:clamp(44px,6.8vw,94px); letter-spacing:-.042em; }
.hero h1 .war{ font-size:.48em; letter-spacing:-.025em; }
section{ padding:clamp(84px,10vw,152px) 0; }
p{ margin:0 0 1.05em; }
.person-text p,.leistung p,.pfad p{ font-size:18.5px; line-height:1.55; }
.zeile>div{ padding:26px 24px; font-size:18.5px; }
.zeile .s{ font-style:normal; font-weight:500; }            /* kein Fake-Kursiv in Sans */
.eyebrow{ font-size:12.5px; letter-spacing:.2em; }

/* Porträt sauber auf die Person zentriert (Cutout sitzt leicht links) */
.portrait-panel img{ width:110%; transform:translateX(-48.4%); }
.person-foto img{ width:108%; left:50%; transform:translateX(-48.4%); }

/* ============================================================
   MODERN-RESTYLE  ·  runde Formen, schwebende Navbar, weiche Schatten
   ============================================================ */
:root{
  --r:16px;
  --r-lg:24px;
  --pill:999px;
  --schatten:0 12px 34px -16px rgba(20,30,40,.22);
  --schatten-lg:0 28px 70px -24px rgba(20,30,40,.32);
}

/* --- weicher, wärmerer Grund --- */
body{background:#F3F0E8;}

/* --- Schwebende Glas-Navbar --- */
.kopf{position:sticky;top:14px;z-index:60;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
.kopf>.wrap{
  max-width:1160px;
  background:color-mix(in srgb,#F7F4ED 84%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(198,191,176,.55);
  border-radius:var(--pill);
  box-shadow:var(--schatten);
  padding:9px 10px 9px 26px;
  transition:padding .25s ease,box-shadow .25s ease,background .25s ease;
}
body.nav-klein .kopf>.wrap{padding-top:6px;padding-bottom:6px;box-shadow:var(--schatten-lg);background:color-mix(in srgb,#F7F4ED 92%,transparent);}
.kopf .marke-sig{font-size:clamp(24px,2.2vw,29px);}
@media(max-width:960px){.kopf>.wrap{padding:8px 8px 8px 20px;}}

/* --- Buttons: Pille --- */
.knopf{border-radius:var(--pill);padding:15px 30px;box-shadow:0 8px 20px -10px rgba(20,30,40,.4);}
.knopf:hover,.knopf:focus-visible{box-shadow:0 12px 26px -10px rgba(163,46,35,.5);}
.kopf-cta{padding:12px 26px;font-size:15px;}

/* --- Karten & Panels: rund + weicher Schatten, keine harten Rahmen --- */
.kennzahlen{background:transparent;border:0;padding:clamp(40px,5vw,64px) 0 0;}
.kennzahlen .grid{background:#fff;border:1px solid var(--linie-fein);border-radius:var(--r-lg);box-shadow:var(--schatten);overflow:hidden;}
.kennzahl{border-left:1px solid var(--linie-fein);}

.pfade-grid{border:1px solid var(--linie-fein);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schatten);background:#fff;}
.pfad:first-child{border-right:1px solid var(--linie-fein);}
@media(max-width:760px){.pfad:first-child{border-right:0;border-bottom:1px solid var(--linie-fein);}}

.konto{border:1px solid var(--linie-fein);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schatten);background:#fff;}
.konto-kopf span:first-child,.zeile .s{border-right-color:var(--linie-fein);}
.zeile .h::before{background:#fff;}

.portrait-panel{border-radius:var(--r-lg);box-shadow:var(--schatten-lg);}
.portrait-tag{border-radius:0 var(--r) 0 var(--r-lg);}
.person-foto{border-radius:var(--r-lg);box-shadow:var(--schatten);}

.satz{border-radius:var(--r-lg);box-shadow:var(--schatten-lg);}
.randnotiz{border-radius:var(--r);border-left-width:4px;}
.posten{border-color:var(--linie-fein);}

/* --- Hero: warmer, lebendiger Hintergrund-Schimmer --- */
.hero{position:relative;}
.hero::before{
  content:"";position:absolute;top:-10%;right:-8%;width:52%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(163,46,35,.10),rgba(163,46,35,0) 72%);
}
.hero::after{
  content:"";position:absolute;bottom:0;left:-12%;width:46%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(30,77,59,.09),rgba(30,77,59,0) 72%);
}

/* --- FAQ: runde, weiche Karten statt Linien --- */
.faq-liste{display:grid;gap:12px;}
.faq-item{border:1px solid var(--linie-fein);border-radius:var(--r);background:#fff;box-shadow:var(--schatten);overflow:hidden;}
.faq-item:last-child{border-bottom:1px solid var(--linie-fein);}
.faq-frage{padding:22px 56px 22px 26px;}
.faq-frage::after{right:24px;}
.faq-antwort .inner{padding:0 26px 24px;}

/* --- Kontakt-Sektion als große runde Fläche --- */
.kontakt{border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:8px;}

/* ============================================================
   KONTAKTFORMULAR (dunkle Sektion)
   ============================================================ */
.kform{margin-top:32px;display:grid;gap:16px;max-width:600px;}
.kform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.krow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.krow{grid-template-columns:1fr;}}
.kform label{display:grid;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-hell);}
.kform label .opt{text-transform:none;letter-spacing:0;color:#6b7883;}
.kform input,.kform select,.kform textarea{
  font-family:var(--body);font-size:16.5px;text-transform:none;letter-spacing:normal;color:var(--papier);
  background:rgba(255,255,255,.05);border:1px solid rgba(198,191,176,.28);border-radius:14px;
  padding:14px 16px;width:100%;transition:border-color .2s,background .2s,box-shadow .2s;
}
.kform textarea{resize:vertical;min-height:120px;line-height:1.5;}
.kform select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grau-hell) 50%),linear-gradient(135deg,var(--grau-hell) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;}
.kform select option{color:#141E28;}
.kform input:focus,.kform select:focus,.kform textarea:focus{
  outline:none;border-color:var(--soll-hell);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(163,46,35,.22);}
.kform input::placeholder,.kform textarea::placeholder{color:#6b7883;}
.kcheck{grid-template-columns:auto 1fr;align-items:start;gap:12px;font-family:var(--body);font-size:14.5px;text-transform:none;letter-spacing:normal;color:#C7CFD6;line-height:1.5;cursor:pointer;}
.kcheck input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--soll);border-radius:6px;flex:none;padding:0;background:rgba(255,255,255,.05);}
.kcheck a{color:var(--papier);text-decoration:underline;text-underline-offset:2px;}
.kaktion{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:6px;}
.kmsg{font-family:var(--mono);font-size:13.5px;line-height:1.5;}
.kmsg.ok{color:#7FBFA5;}
.kmsg.err{color:var(--soll-hell);}
.kform.sendet .knopf{opacity:.6;pointer-events:none;}
.oder-direkt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-hell);margin:44px 0 0;}
.cf-turnstile{margin-top:2px;min-height:65px;}

/* Interaktive Soll/Haben-Tabelle: Zeile reagiert auf Hover/Fokus */
.zeile{transition:background .28s ease;}
.zeile:hover{background:color-mix(in srgb,var(--soll) 5%,var(--papier-hell));}
.zeile:hover .h::before{color:var(--soll);transform:translateX(2px);}
.zeile .h::before{transition:color .28s ease,transform .28s ease;}
@media(hover:none){.zeile:hover{background:var(--papier-hell);}}

/* --- dezenter Sektions-Rhythmus statt harter Volllinien --- */
section{border-top:0;}
#pfade,#situationen,#leistungen,#person,#honorar,#faq{position:relative;}
#pfade::before,#situationen::before,#leistungen::before,#person::before,#honorar::before,#faq::before{
  content:"";position:absolute;top:0;left:var(--rand);right:var(--rand);height:1px;
  background:linear-gradient(90deg,transparent,var(--linie),transparent);
}

/* ============================================================
   HERO-PORTRÄT v4 · voller Körper sichtbar, vertikal zentriert
   ============================================================ */
@media(min-width:841px){
  .hero-grid{ align-items:center; }
  .portrait{ align-self:center; }
  .portrait-panel{ aspect-ratio:4/5; height:auto; min-height:0; }
  .portrait-panel img{ height:auto; width:112%; max-width:none; left:50%; bottom:0; transform:translateX(-48.4%); }
}
/* Mobil: Porträt größer & mittig */
@media(max-width:840px){
  .portrait{ max-width:min(400px,90vw); margin-left:auto; margin-right:auto; }
}

/* ============================================================
   V5 · MEHR MOTION – Hover-Lift, gerichtete Reveals, Drift, Pop
   ============================================================ */
.faq-item{transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease;}
.faq-item:hover{transform:translateY(-3px);box-shadow:var(--schatten-lg);}
.pfad{transition:background .3s ease;}
.pfad:hover{background:color-mix(in srgb,var(--soll) 4%,#fff);}
.pfad:last-child:hover{background:color-mix(in srgb,var(--haben) 4%,#fff);}
.kennzahl{transition:background .3s ease;}
.kennzahl:hover{background:color-mix(in srgb,var(--soll) 5%,transparent);}
.leistung h3{transition:color .25s ease;}
.leistung:hover h3{color:var(--soll);}

/* Gerichtete Reveals: „Soll" von links, „Haben" von rechts */
.zeile.reveal{opacity:1;transform:none;}
.zeile.reveal .s,.zeile.reveal .h{opacity:0;transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.3,1);}
.zeile.reveal .s{transform:translateX(-28px);}
.zeile.reveal .h{transform:translateX(28px);}
.zeile.reveal.da .s,.zeile.reveal.da .h{opacity:1;transform:none;}

/* Hero-Farbschimmer driftet langsam */
@keyframes ml-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-16px,12px) scale(1.07);}}
.hero::before{animation:ml-drift 13s ease-in-out infinite;}
.hero::after{animation:ml-drift 17s ease-in-out infinite reverse;}

/* Kennzahlen „poppen" nach dem Hochzählen */
.kennzahl .wert.fertig{animation:ml-pop .55s ease;}
@keyframes ml-pop{0%{transform:scale(1);}42%{transform:scale(1.09);}100%{transform:scale(1);}}

@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none!important;}
  .zeile.reveal .s,.zeile.reveal .h{opacity:1!important;transform:none!important;transition:none!important;}
  .kennzahl .wert.fertig{animation:none!important;}
}

/* ============================================================
   V6 · CLEAN PASS – heller Kontakt/Footer, Karten, kein Lag
   ============================================================ */

/* Navbar solid statt Blur → kein Scroll-Lag */
.kopf>.wrap{ background:#F7F4ED; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.nav-klein .kopf>.wrap{ background:#F3F0E8; }

/* teure/laggy Animationen entfernen */
.hero::before,.hero::after{ animation:none !important; }
.kennzahl .wert.fertig{ animation:none; }

/* lange Sektions-Trennlinien weg → Struktur durch Weißraum */
#pfade::before,#situationen::before,#leistungen::before,#person::before,#honorar::before,#faq::before{ display:none !important; }

/* Kennzahlen: einzelne Karten mit Abstand statt durchgehender Linien */
.kennzahlen{ padding-top:0; }
.kennzahlen .grid{ background:transparent; border:0; box-shadow:none; overflow:visible; gap:16px; }
.kennzahl{ border:1px solid var(--linie-fein); border-radius:var(--r-lg); background:#fff; box-shadow:var(--schatten); padding:28px 26px; }
.kennzahl:hover{ background:#fff; }
@media(max-width:720px){ .kennzahl:nth-child(n+3){ border-top:1px solid var(--linie-fein); } }

/* Kontaktdaten sauber ausgerichtet, LinkedIn nicht ineinander */
.daten{ display:grid; gap:10px; }
.daten div{ display:flex; align-items:center; gap:12px; }
.daten .k{ min-width:74px; flex:none; }
.social-link{ display:inline-flex; align-items:center; gap:8px; }
.social-link svg{ color:#0A66C2; flex:none; }

/* Person-Foto: voller Körper, kein Crop */
.person-foto img{ width:112%; height:auto; left:50%; bottom:0; transform:translateX(-48.4%); }

/* ---------- KONTAKT jetzt HELL ---------- */
.kontakt{ background:var(--papier-hell); color:var(--tinte); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.kontakt h2{ color:var(--tinte); }
.kontakt .eyebrow{ color:var(--grau); }
.kontakt .eyebrow::before{ background:var(--soll); }
.kontakt .lead{ color:#2A3642; }
.kontakt .knopf{ background:var(--tinte); color:var(--papier); border-color:var(--tinte); }
.kontakt .knopf:hover{ background:var(--soll); border-color:var(--soll); color:#fff; }

/* Formular auf hell */
.kform label{ color:var(--grau); }
.kform input,.kform select,.kform textarea{ background:#fff; border:1px solid var(--linie); color:var(--tinte); }
.kform input:focus,.kform select:focus,.kform textarea:focus{ background:#fff; border-color:var(--soll); box-shadow:0 0 0 3px rgba(163,46,35,.15); }
.kform input::placeholder,.kform textarea::placeholder{ color:#9AA2AB; }
.kform select{ background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),linear-gradient(135deg,var(--grau) 50%,transparent 50%); }
.kform select option{ color:var(--tinte); }
.kcheck{ color:#2A3642; }
.kcheck a{ color:var(--soll); }
.kcheck input{ background:#fff; }
.oder-direkt{ color:var(--grau); }
.daten{ color:#2A3642; }
.daten .k{ color:var(--grau); }
.daten a{ color:var(--tinte); border-bottom:1px solid var(--linie); }
.daten a:hover{ border-bottom-color:var(--soll); }
.gebiet{ color:var(--grau); }
.sig-signoff{ color:var(--tinte); }
.sig-untertitel{ color:var(--grau); }

/* ---------- FOOTER hell & aufgeräumt ---------- */
footer{ background:var(--papier-tief); color:var(--grau); border-top:1px solid var(--linie); }
footer .hinweis{ color:var(--grau); }
footer a{ color:var(--tinte); border-bottom:1px solid var(--linie); }
footer a:hover{ border-bottom-color:var(--soll); }
footer .zeile-foot{ border-top:1px solid var(--linie); padding-top:20px; margin-top:4px; }

/* ============================================================
   V7 · Select-Fix + Ablauf-Schritte auffälliger
   ============================================================ */
/* „Anliegen"-Dropdown: sauberer Chevron statt Gradient-Pfeil */
.kform select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px 14px;
  padding-right:46px;
}

/* „So arbeiten wir zusammen" – große, auffällige Schritt-Nummern */
.ablauf{ margin-top:66px; }
.schritt{ grid-template-columns:100px 1fr; gap:30px; padding:36px 0; align-items:start; }
.schritt .nr{ font-family:var(--display); font-weight:800; font-size:clamp(40px,3.8vw,58px); color:var(--soll); line-height:.85; letter-spacing:-.035em; padding-top:2px; }
.schritt h3{ font-size:clamp(23px,2vw,30px); }
.schritt p{ font-size:19px; margin-top:12px; max-width:58ch; }
@media(max-width:600px){
  .schritt{ grid-template-columns:66px 1fr; gap:18px; padding:28px 0; }
  .schritt .nr{ font-size:38px; }
}