/* ATELIER DIGITAL · johe.digital · v2
   Werte aus dem Design System „ATELIER DIGITAL“. Keine externen Ressourcen. */

@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#f5f3ee;--weiss:#fff;--stein:#e4e0d6;--tinte:#161614;--tinte-sanft:#55534c;--tinte-dim:#85826f;
  --olive:#4f5b32;--olive-tief:#2b3220;--olive-nacht:#1f2518;--olive-hell:#dde1cd;--olive-licht:#c5cca8;
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Source Sans 3","Source Sans Pro","Helvetica Neue",Arial,sans-serif;
  --rand:clamp(20px,4.5vw,64px);
  --abstand:clamp(96px,10vw,168px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:18px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
::selection{background:var(--olive);color:var(--weiss)}
a{color:inherit}
:focus-visible{outline:2px solid var(--olive-tief);outline-offset:4px}
.dunkel :focus-visible{outline-color:var(--papier)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Grundgerüst ---------- */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--rand)}
.dunkel{background:var(--olive-tief);color:var(--papier)}
.nacht{background:var(--olive-nacht);color:var(--papier)}
.hell{background:var(--olive-hell)}
.stein{background:var(--stein)}
section{position:relative}
.abschnitt{padding:var(--abstand) 0}

.skip{position:fixed;left:var(--rand);top:-80px;z-index:100;background:var(--papier);color:var(--tinte);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}

/* Fortschrittsanzeige */
.fortschritt{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.fortschritt span{display:block;height:100%;background:var(--olive-licht);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Kopfzeile ---------- */
.kopf{position:absolute;inset:0 0 auto 0;z-index:50}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
.kopf--hell{position:relative;background:var(--papier)}
.marke{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.marke img{height:46px;width:auto}
.marke span{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.34em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:36px}
.nav a{text-decoration:none;font-size:17px;display:inline-block;padding:10px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform 260ms var(--ease-out)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}}
.nav .nav-cta{padding:12px 20px;border:1px solid currentColor;transition:background-color 200ms ease,color 200ms ease}
.nav .nav-cta::after{display:none}
@media (hover:hover) and (pointer:fine){
  .dunkel-kopf .nav .nav-cta:hover{background:var(--papier);color:var(--olive-tief)}
  .kopf--hell .nav .nav-cta:hover{background:var(--tinte);color:var(--papier)}
}
.dunkel-kopf{color:var(--papier)}
.menu-btn{display:none}
@media (max-width:880px){
  .marke span{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:none;border:1px solid currentColor;color:inherit;font:600 16px var(--sans);cursor:pointer}
  .nav{position:fixed;inset:0;background:var(--olive-nacht);color:var(--papier);padding:120px var(--rand) 40px;display:none;z-index:40}
  .nav.offen{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:8px}
  .nav a{font-family:var(--serif);font-size:44px;line-height:1.1}
  .nav .nav-cta{font-family:var(--sans);font-size:18px;margin-top:24px}
  .menu-btn{position:relative;z-index:45}
  .menu-offen .menu-btn{color:var(--papier)}
  .menu-offen{overflow:hidden}
}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em;overflow-wrap:break-word;hyphens:manual}
h2{font-size:clamp(40px,5.2vw,80px);line-height:1;text-wrap:balance}
h3{font-size:clamp(26px,2.3vw,34px);line-height:1.12;font-weight:500;letter-spacing:-.005em}
p{margin:0 0 18px;max-width:64ch}
.lead{font-size:clamp(19px,1.55vw,23px);line-height:1.5;max-width:38em}
.klein{font-size:15px;line-height:1.5}

/* ---------- Buttons & Links ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 28px;font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;background:var(--olive);color:var(--weiss);transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.btn svg{width:18px;height:18px;transition:transform 260ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--hell{background:var(--papier);color:var(--olive-tief)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--olive-tief)}
  .btn--hell:hover{background:var(--olive-licht);color:var(--olive-nacht)}
  .btn:hover svg{transform:translateX(4px)}
}
.textlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.textlink:hover{text-decoration-thickness:2px}}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:44px}
.prosa a{color:var(--olive);text-decoration:underline;text-underline-offset:.22em}
.dunkel .prosa a,.nacht .prosa a{color:var(--olive-licht)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:160px 0 clamp(48px,7vw,96px);overflow:hidden}
.hero h1{font-size:clamp(40px,10.4vw,188px);line-height:.9;letter-spacing:-.035em}
.zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.zeile > span{display:block}
.hero-unten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-top:clamp(36px,4vw,64px)}
.hero .lead{color:var(--olive-hell);margin:0}
.hero .aktionen{margin-top:36px}
.siegel{justify-self:end;width:clamp(120px,13vw,180px);aspect-ratio:1;position:relative}
.siegel svg{width:100%;height:100%}
.siegel .ring{transform-origin:50% 50%}
.siegel text{font-family:var(--serif);font-size:11.5px;letter-spacing:.32em;fill:var(--olive-licht)}
.siegel img{position:absolute;inset:0;margin:auto;width:28%;height:auto}
@media (max-width:880px){.hero-unten{grid-template-columns:1fr}.siegel{justify-self:start;width:112px}}

/* Unterseiten-Hero */
.seitenkopf{padding:180px 0 clamp(64px,8vw,120px)}
.seitenkopf h1{font-size:clamp(52px,8.4vw,150px);line-height:.92;letter-spacing:-.03em;max-width:12ch}
.seitenkopf .lead{margin-top:36px;color:var(--olive-hell)}

/* ---------- Statement mit Scroll-Highlight ---------- */
.statement{font-family:var(--serif);font-size:clamp(32px,4.1vw,64px);line-height:1.14;letter-spacing:-.015em;max-width:24ch;margin:0}
.statement .wort{transition:color 280ms ease}
.js .statement .wort{color:var(--tinte-dim)}
.js .statement .wort.an{color:var(--tinte)}
.statement-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px}
.statement-grid .statement{grid-column:2}
@media (max-width:880px){.statement-grid .statement{grid-column:1}}
.statement-grid .klein{color:var(--tinte-sanft);padding-top:14px;max-width:22ch}
@media (max-width:880px){.statement-grid{grid-template-columns:1fr}}

/* ---------- Bento ---------- */
.kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.kopfzeile p{margin:0;max-width:34em}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:14px}
.kachel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(24px,2.6vw,40px);text-decoration:none;color:inherit;overflow:hidden;transition:transform 380ms var(--ease-out),background-color 300ms ease}
.kachel h3{max-width:14ch}
.kachel p{margin:12px 0 0;max-width:36ch}
.kachel .pfeil{width:44px;height:44px;flex:none;border:1px solid currentColor;border-radius:999px;display:grid;place-items:center;transition:transform 380ms var(--ease-out),background-color 260ms ease}
.kachel .pfeil svg{width:18px;height:18px}
.kachel-kopf{display:flex;justify-content:space-between;align-items:start;gap:24px}
.kachel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kachel li{font-size:15px;padding:6px 12px;border:1px solid currentColor;border-radius:999px;line-height:1.2}
.k-gross{grid-column:span 4;grid-row:span 2;background:var(--olive-tief);color:var(--papier)}
.k-gross h3{font-size:clamp(34px,4vw,64px);line-height:1}
.k-hoch{grid-column:span 2;grid-row:span 2;background:var(--olive);color:var(--papier)}
.k-hoch h3{font-size:clamp(30px,2.8vw,44px)}
.k-a{grid-column:span 2;background:var(--olive-hell)}
.k-b{grid-column:span 2;background:var(--stein)}
.k-c{grid-column:span 2;background:var(--weiss)}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{transform:translateY(-6px)}
  .kachel:hover .pfeil{transform:rotate(-45deg);background:currentColor}
  .kachel:hover .pfeil svg{color:var(--olive-tief)}
  .k-gross:hover .pfeil svg,.k-hoch:hover .pfeil svg{color:var(--olive-tief)}
  .k-a:hover .pfeil svg,.k-b:hover .pfeil svg,.k-c:hover .pfeil svg{color:var(--papier)}
}
.kachel:active{transform:scale(.99)}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.k-gross,.k-hoch{grid-column:span 2;grid-row:span 1}.k-a,.k-b,.k-c{grid-column:span 1}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.k-gross,.k-hoch,.k-a,.k-b,.k-c{grid-column:span 1}}

/* ---------- Zusammenarbeit (Auswahl) ---------- */
.modelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.wahl{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.wahl button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-family:var(--serif);font-size:clamp(26px,2.3vw,34px);line-height:1.1;color:var(--olive-licht);transition:color 200ms ease,background-color 200ms ease}
.wahl button span{font-family:var(--sans);font-size:15px;color:inherit;opacity:.9}
.wahl button[aria-pressed="true"]{background:var(--papier);color:var(--olive-tief)}
.wahl button:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.wahl button[aria-pressed="false"]:hover{color:var(--papier);background:rgba(245,243,238,.06)}}
.tafel{background:var(--papier);color:var(--tinte);padding:clamp(28px,3.4vw,56px);min-height:100%}
.tafel h3{font-size:clamp(34px,3.4vw,52px);line-height:1.02;margin-bottom:20px}
.tafel dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:28px 0 0}
.tafel dt{font-weight:600}
.tafel dd{margin:0}
.tafel .btn{margin-top:36px}
.tafel-inhalt{transition:opacity 220ms ease,transform 260ms var(--ease-out),filter 220ms ease}
.tafel-inhalt.wechsel{opacity:0;transform:translateY(8px);filter:blur(2px)}
@media (max-width:880px){.modelle{grid-template-columns:1fr}}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.ablauf li{padding-top:28px;position:relative}
.ablauf li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--olive);transform-origin:0 50%}
.js .ablauf li::before{transform:scaleX(0);transition:transform 900ms var(--ease-in-out)}
.js .ablauf li.da::before{transform:scaleX(1)}
.ablauf h3{font-size:clamp(34px,3.6vw,56px);margin-bottom:16px}
@media (max-width:880px){.ablauf{grid-template-columns:1fr}}

/* ---------- Person ---------- */
.person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.portrait{aspect-ratio:4/5;background:var(--olive);display:grid;place-items:center;overflow:hidden}
.portrait img{width:46%;height:auto}
.zahlen{display:flex;flex-wrap:wrap;gap:40px 64px;margin-top:40px}
.zahl strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.03em}
.zahl span{display:block;margin-top:10px;max-width:16ch;hyphens:auto}
@media (max-width:880px){.person{grid-template-columns:1fr}.portrait{aspect-ratio:16/11}.portrait img{width:28%}}

/* ---------- KI-Band ---------- */
.band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
@media (max-width:880px){.band{grid-template-columns:1fr}}

/* ---------- Abschluss ---------- */
.abschluss{padding:var(--abstand) 0}
.abschluss h2{font-size:clamp(56px,10vw,180px);line-height:.9;letter-spacing:-.035em;max-width:10ch}
.abschluss .kontaktzeile{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:48px;align-items:center}
.abschluss .kontaktzeile a{font-size:clamp(19px,1.6vw,24px)}

/* ---------- Leistungen-Detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px);scroll-margin-top:24px}
.detail + .detail{padding-top:0}
.detail-kopf{position:sticky;top:40px;align-self:start}
.detail-kopf h2{font-size:clamp(40px,4.6vw,72px)}
.detail ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.detail li{padding-left:22px;position:relative}
.detail li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;background:var(--olive);border-radius:999px}
@media (max-width:880px){.detail{grid-template-columns:1fr}.detail-kopf{position:static}.detail ul{grid-template-columns:1fr}}

.modell-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px}
.modell{background:var(--papier);color:var(--tinte);padding:32px}
.modell h3{font-size:30px;margin-bottom:12px}
.modell p{margin:0}
@media (max-width:1000px){.modell-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.modell-raster{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:920px}
.faq details{border-bottom:1px solid rgba(22,22,20,.18)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform 260ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:26px;margin:0}

/* KI-Seite */
.grundsaetze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:56px}
.grundsaetze h3{margin-bottom:14px}
@media (max-width:880px){.grundsaetze{grid-template-columns:1fr}}
.themen{list-style:none;margin:32px 0 0;padding:0}
.themen li{display:flex;gap:20px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(22,22,20,.18);font-size:20px}
.themen li:last-child{border-bottom:1px solid rgba(22,22,20,.18)}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.kontakt-liste{list-style:none;margin:0;padding:0}
.kontakt-liste li{padding:24px 0;border-top:1px solid rgba(22,22,20,.18)}
.kontakt-liste li:last-child{border-bottom:1px solid rgba(22,22,20,.18)}
.kontakt-liste span{display:block;font-size:15px;color:var(--tinte-sanft);margin-bottom:6px}
.kontakt-liste a,.kontakt-liste strong{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.15;text-decoration:none}
@media (hover:hover) and (pointer:fine){.kontakt-liste a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}}
@media (max-width:880px){.kontakt-raster{grid-template-columns:1fr}}

/* Rechtstexte */
.recht{max-width:780px}
.recht h2{font-size:30px;margin:52px 0 14px;letter-spacing:0}
.recht a{color:var(--olive)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--olive-nacht);color:var(--papier);padding:clamp(72px,8vw,120px) 0 40px}
.fuss-oben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:48px;align-items:start}
.fuss-logo{width:150px;height:auto}
.fuss ul{list-style:none;margin:0;padding:0;line-height:2.1}
.fuss a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.fuss a:hover{text-decoration:underline;text-underline-offset:.25em}}
.fuss-name{font-family:var(--serif);font-size:calc((min(100vw,1440px) - 2 * var(--rand)) / 10.8);line-height:.85;letter-spacing:.02em;margin:clamp(64px,8vw,120px) 0 28px;color:var(--olive-licht);white-space:nowrap}
.fuss-unten{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--olive-licht);font-size:15px}
@media (max-width:880px){.fuss-oben{grid-template-columns:1fr}}

/* ---------- Bewegung (nur mit JS und ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .zeile > span{transform:translateY(105%);transition:transform 1100ms var(--ease-out)}
  .js .geladen .zeile > span{transform:none}
  .js .geladen .zeile:nth-child(2) > span{transition-delay:90ms}
  .js .geladen .zeile:nth-child(3) > span{transition-delay:180ms}
  .js .hero-unten,.js .seitenkopf .lead{opacity:0;transform:translateY(20px);transition:opacity 900ms var(--ease-out) 420ms,transform 900ms var(--ease-out) 420ms}
  .js .geladen .hero-unten,.js .geladen .lead{opacity:1;transform:none}
  .js .rein{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
  .js .rein.da{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .kachel,.btn,.kachel .pfeil{transition:background-color 200ms ease!important}
  .kachel:hover{transform:none!important}
}

/* Hilfsklassen (statt Inline-Styles, damit die Content-Security-Policy streng bleiben kann) */
.ohne-oben{padding-top:0}
.lead + .zahlen,.kopfzeile + .faq{margin-top:0}
h2 + .lead,h2 + p.lead{margin-top:28px}
#faq{margin-bottom:40px}
.modell-raster + .klein{margin-top:40px;color:var(--olive-licht)}
.recht h1{font-size:clamp(48px,6vw,88px);line-height:1}
.hell .detail{padding-top:0;padding-bottom:0}

.fuss .prosa a{color:var(--papier)}
.zahl strong{font-variant-numeric:lining-nums}
.k-gross h3{max-width:none}
.detail .themen{display:block}
.detail .themen li{padding-left:0}
.detail .themen li::before{display:none}
.themen + p{margin-top:28px}
.kopieren{all:unset;cursor:pointer;font:600 15px var(--sans);padding:8px 14px;border:1px solid currentColor;border-radius:999px;transition:background-color 200ms ease,color 200ms ease}
.kopieren:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.kontakt-liste .kopieren{margin-left:12px;vertical-align:middle;font-size:14px}
@media (hover:hover) and (pointer:fine){.nacht .kopieren:hover{background:var(--papier);color:var(--olive-nacht)}.kontakt-liste .kopieren:hover{background:var(--tinte);color:var(--papier)}}

/* ===== v3: Einblick, Preise, elegante Bewegung ===== */
.einblick{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.einblick .hinweis{color:var(--tinte-sanft);margin-top:24px}
@media (max-width:880px){.einblick{grid-template-columns:1fr}}
.plan{margin:0;background:var(--weiss);padding:clamp(20px,2.4vw,36px);box-shadow:0 30px 60px -30px rgba(22,22,20,.28)}
.plan-kopf{display:flex;justify-content:space-between;font:600 15px var(--sans);padding-bottom:18px;color:var(--tinte-sanft)}
.plan-kopf span:first-child{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--tinte)}
.plan-liste{list-style:none;margin:0;padding:0}
.plan-liste li{display:grid;grid-template-columns:64px 104px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--stein);font-size:16px}
.plan-liste .tag{font-weight:600}
.plan-liste .kanal{font-size:14px;color:var(--tinte-sanft)}
.plan-liste .status{font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--stein);white-space:nowrap}
.plan-liste li:nth-child(-n+2) .status{background:var(--olive);color:var(--weiss)}
.plan-liste li:nth-child(3) .status{background:var(--olive-hell)}
@media (max-width:640px){.plan-liste li{grid-template-columns:56px 1fr;row-gap:4px}.plan-liste .kanal{grid-column:2}.plan-liste .titel{grid-column:1/-1}.plan-liste .status{grid-column:1/-1;justify-self:start}}

.preis{font-family:var(--serif);font-size:clamp(30px,2.6vw,40px);line-height:1;margin:0 0 14px}
.preis small{font-family:var(--sans);font-size:15px;color:var(--tinte-sanft)}
.tafel .preis{color:var(--olive)}
.preis-hinweis{color:var(--olive-licht);margin-top:24px}
.modell .preis{color:var(--olive)}
.modell-raster + .klein{margin-top:32px}
.bento-zwei{grid-auto-rows:minmax(280px,auto)}
.bento-zwei .k-gross,.bento-zwei .k-hoch{grid-row:span 1}
.zahlen{gap:32px 56px}

/* Hero: Titel weicht beim Scrollen elegant zurück */
.hero-titel{transform-origin:0 100%;will-change:transform}

@media (prefers-reduced-motion:no-preference){
  /* Kacheln & Flächen: Vorhang-Enthüllung von unten */
  .js .enthuellen{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--ease-in-out)}
  .js .enthuellen.da{clip-path:inset(0 0 0 0)}
  .js .enthuellen > *{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease-out) 450ms,transform 700ms var(--ease-out) 450ms}
  .js .enthuellen.da > *{opacity:1;transform:none}
  /* Redaktionsplan: Zeilen gleiten nacheinander ein */
  .js .plan-liste li{opacity:0;transform:translateX(-14px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
  .js .plan.da .plan-liste li{opacity:1;transform:none}
  .js .plan.da .plan-liste li:nth-child(2){transition-delay:90ms}
  .js .plan.da .plan-liste li:nth-child(3){transition-delay:180ms}
  .js .plan.da .plan-liste li:nth-child(4){transition-delay:270ms}
  .js .plan.da .plan-liste li:nth-child(5){transition-delay:360ms}
  .js .plan .status{transform:scale(.9);opacity:0;transition:transform 400ms var(--ease-out) 700ms,opacity 400ms ease 700ms}
  .js .plan.da .status{transform:none;opacity:1}
}
/* Preis-Bausteine */
.preisgruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.preisgruppe{background:var(--papier);color:var(--tinte);padding:clamp(24px,3vw,44px)}
.preisgruppe h3{font-size:clamp(30px,2.6vw,40px);margin-bottom:20px}
.pakete{margin:0}
.pakete > div{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:16px 0;border-top:1px solid var(--stein)}
.pakete dt{font-weight:600}
.pakete dd{margin:0}
.pakete dd.p{font-family:var(--serif);font-size:24px;color:var(--olive);text-align:right;white-space:nowrap}
.pakete dd.p small{font-family:var(--sans);font-size:14px;color:var(--tinte-sanft)}
.pakete dd:last-child{grid-column:1/-1;color:var(--tinte-sanft);font-size:16px}
.preis-fuss{margin-top:32px;color:var(--olive-licht);max-width:70ch}
@media (max-width:880px){.preisgruppen{grid-template-columns:1fr}}
.pakete dd.p,.preis,.wahl button span{font-variant-numeric:lining-nums}

.modell-raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.modell .preis{font-size:clamp(36px,3.4vw,56px)}
.tafel .klein{color:var(--tinte-sanft);margin-top:8px}
@media (max-width:880px){.modell-raster.drei{grid-template-columns:1fr}}
.modell-raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.modell-raster.zwei{grid-template-columns:1fr}}
.wahl button span{white-space:nowrap;flex-shrink:0}

/* Leistungen mit Preis: Leisten, die sich beim Scrollen öffnen */
.detail-kopf .preis{margin-top:14px;font-family:var(--serif);font-size:clamp(26px,2.2vw,34px);color:var(--olive)}
.seitenkopf-hinweis{margin-top:18px;color:var(--olive-licht)}
.leisten-hinweis{max-width:40ch}
.leisten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.leiste{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,2.4vw,36px);overflow:hidden;min-width:0}
.leiste h3{font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.leiste-oben{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.leiste .nr{font-size:14px;letter-spacing:.12em;opacity:.75}
.leiste .preis{margin:0;font-family:var(--serif);font-size:clamp(22px,1.8vw,28px);white-space:nowrap}
.leiste-zeile{margin:0;font-size:18px}
.leiste ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.leiste li{padding-left:18px;position:relative}
.leiste li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:999px;background:currentColor}
.leiste-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.leiste-link svg{width:16px;height:16px}
.leiste-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.leiste-mehr{margin-top:auto}
.l-1{background:var(--olive-tief);color:var(--papier)}
.l-2{background:var(--olive);color:var(--papier)}
.l-3{background:var(--olive-hell);color:var(--tinte)}
.l-4{background:var(--stein);color:var(--tinte)}
.l-5{background:var(--weiss);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(43,50,32,.14)}
.l-5:last-child{grid-column:1/-1}
.leisten-fuss{margin-top:28px;color:var(--tinte-sanft)}
@media (max-width:700px){.leisten{grid-template-columns:1fr}.l-5:last-child{grid-column:auto}}

/* Desktop mit Bewegung: Bühne bleibt stehen, die aktive Leiste wird breit */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
  .js .leisten-abschnitt{padding-top:0;padding-bottom:0}
  .js .leisten-buehne{height:340vh}
  .js .leisten-innen{position:sticky;top:0;height:100vh;min-height:620px;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px}
  .js .leisten{display:flex;height:min(62vh,560px);gap:12px}
  .js .leiste{flex:1 1 0;transition:flex-grow 900ms var(--ease-out),padding 600ms var(--ease-out);cursor:default}
  .js .leiste.aktiv{flex-grow:2.8}
  .js .leiste{padding:28px 24px}
  .js .leiste.aktiv{padding:36px}
  .js .l-5:last-child{grid-column:auto}
  .js .leiste h3{font-size:clamp(24px,2vw,34px);transition:font-size 600ms var(--ease-out)}
  .js .leiste.aktiv h3{font-size:clamp(34px,3.2vw,52px)}
  .js .leiste-mehr{width:min(30vw,420px);opacity:0;transform:translateY(16px);transition:opacity 260ms ease,transform 260ms ease}
  .js .leiste.aktiv .leiste-mehr{opacity:1;transform:none;transition:opacity 500ms ease 280ms,transform 600ms var(--ease-out) 280ms}
}

/* Porträtfoto */
.portrait.foto{background:var(--stein)}
.portrait.foto picture{display:block;width:100%;height:100%}
.portrait.foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:880px){.portrait.foto{aspect-ratio:4/5;max-width:520px}.portrait.foto img{width:100%}}

/* Über mich: Werdegang, Studium, Kenntnisse */
.werdegang .kopfzeile p{max-width:36ch;color:var(--tinte-sanft)}
.zeitleiste{--zl:0;list-style:none;margin:0;padding:0;position:relative}
.zeitleiste::before,.zeitleiste::after{content:"";position:absolute;top:10px;bottom:10px;left:calc(clamp(150px,18vw,240px) - 1px);width:2px;background:rgba(43,50,32,.15)}
.zeitleiste::after{background:var(--olive);transform-origin:50% 0;transform:scaleY(var(--zl))}
.zeitleiste li{display:grid;grid-template-columns:clamp(150px,18vw,240px) minmax(0,1fr);gap:0;padding:0 0 clamp(36px,4vw,56px)}
.zeitleiste li:last-child{padding-bottom:0}
.zeitleiste li > div{position:relative;padding-left:clamp(32px,4vw,64px)}
.zeitleiste li > div::before{content:"";position:absolute;left:-7px;top:.55em;width:12px;height:12px;border-radius:999px;background:var(--stein);border:2px solid var(--olive);transition:background-color 400ms ease}
.zeitleiste li.da > div::before{background:var(--olive)}
.zeitleiste h3{font-size:clamp(26px,2.6vw,40px);line-height:1.1;max-width:24ch}
.zeitleiste li p{margin:10px 0 0;color:var(--tinte-sanft)}
.zl-jahr{margin:0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);font-variant-numeric:lining-nums;padding-top:.55em}
@media (max-width:700px){
  .zeitleiste::before,.zeitleiste::after{left:5px}
  .zeitleiste li{grid-template-columns:1fr;padding-left:36px}
  .zeitleiste li > div{padding-left:0}
  .zeitleiste li > div::before{left:-37px;top:-1.6em}
  .zl-jahr{padding-top:0;margin-bottom:8px}
}
.studium{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:56px}
.abschluss-karte{background:var(--olive-hell);padding:clamp(28px,3vw,48px)}
.abschluss-karte .grad{margin:18px 0 6px;font-family:var(--serif);font-size:clamp(56px,6vw,96px);line-height:1;color:var(--olive)}
.abschluss-karte h3{font-size:clamp(26px,2.4vw,36px);line-height:1.1}
.abschluss-karte h3 + p{margin:12px 0 0;color:var(--tinte-sanft)}
@media (max-width:700px){.studium{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.zeitleiste::after{transform:scaleY(1)}}

/* Silbentrennung: korrekt nach deutschem Wörterbuch, nur bei langen Wörtern */
h2,h3,.zahl span,.leiste-zeile,.zeitleiste li p{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
h1,.statement{-webkit-hyphens:manual;hyphens:manual}

/* Fun Fact (KI-Seite) */
.funfact-marke{display:inline-block;margin:0 0 28px;padding:8px 16px;border:1px solid var(--olive);border-radius:999px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive-tief)}
.funfact h2{font-size:clamp(40px,6vw,96px);line-height:1;max-width:16ch}
.funfact .lead{margin-top:28px;max-width:44ch}

/* Zeilenumbrüche: neuer Satz in neuer Zeile, keine einzelnen Wörter am Ende */
p,li,dd{text-wrap:pretty}
h2,h3{text-wrap:balance}