/* beaware · Architektur für Sichtbarkeit & Wirkung
   Statische Fassung. Keine Frameworks, keine externen Aufrufe.
   Farben, Schriftgroessen und Rhythmus sind aus der laufenden Seite gemessen. */

@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-var.woff2") format("woff2-variations"),
      url("../fonts/jost-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Marke ---------- */
:root{
  --bg:#0C0D11;
  --surface:#111318;
  --surface2:#17191F;
  --border:#1E2131;
  --border2:#252940;
  --orange:#F05A00;
  --orange-hover:#D94F00;
  --bar:#FF6600;
  --orange-dim:rgba(240,90,0,.08);
  --orange-mid:rgba(240,90,0,.18);
  --text:#E0DBD5;
  --head:#F0EDE9;
  --muted:#5C6278;
  --muted2:#8490A8;
  --ff:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1140px;
  --pad:30px;
  --head-h:75px;
  --sec-bg:var(--bg);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 10px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:#fff;
  font-family:var(--ff);font-size:18px;font-weight:400;line-height:32px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--head)}
em{font-style:normal}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--orange);color:#fff;padding:10px 16px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Abschnitte ---------- */
.section{--sec-bg:var(--bg);background:var(--bg);padding-block:clamp(44px,4.7vw,60px)}
.section--mid{padding-block:clamp(50px,6.3vw,80px)}
.section--air{padding-block:clamp(56px,7.8vw,100px)}
.section--surface{--sec-bg:var(--surface);background:var(--surface);border-top:1px solid var(--border)}
.section--line{border-top:1px solid var(--border)}
.section--tight{padding-top:0}

/* ---------- Typo-Bausteine ---------- */
.kicker{
  display:block;padding-left:14px;border-left:3px solid var(--bar);
  font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin:0 0 20px;
}
.kicker--center{border-left:0;padding-left:0;text-align:center}
h1,.h1{font-size:clamp(32px,4.2vw,51px);font-weight:600;line-height:1.12;letter-spacing:-1px}
h1 em,.h1 em{color:var(--orange);display:block}
h2,.h2{font-size:clamp(26px,3.1vw,35px);font-weight:600;line-height:1.16;letter-spacing:.01em}
h3,.h3{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:normal}
.lead{font-size:16.8px;font-weight:300;line-height:1.8;color:var(--muted2);max-width:64ch}
.head{max-width:760px;margin-bottom:clamp(34px,4.2vw,54px)}
.head .lead{margin-top:20px}
.center{text-align:center}
.center .head{margin-inline:auto}
.center .lead{margin-inline:auto}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;border-radius:2px;border:1px solid transparent;
  font-size:14.08px;font-weight:700;letter-spacing:.03em;line-height:32px;
  cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-hover);transform:translateY(-8px)}
.btn--ghost{background:transparent;color:var(--muted2);font-weight:400;letter-spacing:normal}
.btn--ghost:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){.btn--primary:hover{transform:none}}
.btn--sm{padding:4px 20px}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.link{
  display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  font-size:13.12px;font-weight:500;letter-spacing:normal;
  transition:color .25s var(--ease)
}
.link:hover{color:var(--orange)}

/* ---------- Kopf ---------- */
.site-head{
  position:sticky;top:0;z-index:100;height:var(--head-h);
  background:rgba(12,13,17,.86);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
}
.site-head__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--head-h);width:100%;max-width:none;margin:0;
  padding-inline:50px
}
.brand img{width:107px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:16px;font-weight:400;color:var(--muted);transition:color .2s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.head-cta{display:flex;align-items:center;gap:14px}
.burger{
  display:none;width:40px;height:40px;border:1px solid var(--border2);border-radius:2px;
  background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer
}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    position:absolute;left:0;right:0;top:var(--head-h);
    background:var(--surface);border-block:1px solid var(--border);
    padding:14px var(--pad) 22px
  }
  .nav.is-open a{font-size:19px;padding-block:9px;opacity:.85}
}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:55.6% 1fr;min-height:calc(100vh - var(--head-h));background:var(--bg)}
.hero__left{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,10vw,128px) clamp(24px,4.4vw,56px) clamp(40px,7.5vw,96px);
}
.hero__left::after{content:"";position:absolute;top:25px;bottom:25px;right:0;width:1px;background:var(--border)}
.hero__inner{max-width:480px}
.hero .forwhom{max-width:480px}
.hero__right{position:relative;overflow:hidden;min-height:420px}

.hero-person{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;background:rgba(17,19,24,.7);
  border:1px solid var(--border);border-radius:100px;width:fit-content;margin-bottom:26px;
}
.hero-person-name{font-size:12.8px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:9px;line-height:1.4;letter-spacing:.02em}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#E05252;flex:0 0 auto;animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,82,82,.5)}50%{box-shadow:0 0 0 5px rgba(224,82,82,0)}}
@media (prefers-reduced-motion:reduce){.status-dot{animation:none}}

.hero__moin{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted2);margin-bottom:22px}
.hero h1{margin-bottom:22px}
.hero__sub{font-size:15px;font-weight:300;line-height:1.75;color:var(--muted2);max-width:46ch}
.hero .btns{margin-top:30px}

.forwhom{
  margin-top:auto;padding:28px 0 24px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px
}
.forwhom__label{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.02em}
.forwhom ul{display:flex;flex-wrap:wrap;gap:8px}
.forwhom li{
  font-size:12px;font-weight:300;color:var(--muted2);
  border:1px solid var(--border);border-radius:2px;padding:2px 8px;line-height:1.5
}

.hero__portrait{position:absolute;inset:0}
.hero__portrait img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero__portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(12,13,17,.2) 20%,transparent 55%),
    linear-gradient(180deg,rgba(12,13,17,.2) 0%,transparent 30%,transparent 55%,var(--bg) 100%);
}
.hero__marks{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero__data{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:1rem 2rem 10vh;
  background:linear-gradient(0deg,rgba(12,13,17,.95) 60%,transparent);
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
}
.hero__data .name{font-size:16px;font-weight:600;color:var(--text);line-height:1.2}
.hero__data .role{font-size:11.5px;color:var(--muted2);margin-top:2px;letter-spacing:.02em}
.hero__data .coords{font-size:11px;color:var(--muted);letter-spacing:.1em;line-height:1.4;text-align:right}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__left{max-width:none;padding:40px var(--pad) 48px;order:1}
  .hero__left::after{display:none}
  .hero__right{order:2;height:440px;min-height:0}
  .hero__portrait img{object-position:center center}
  .hero__portrait::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 15%,transparent 65%,var(--bg) 100%)}
  .hero__marks{display:none}
  .hero__data{padding:1rem 1.25rem}
  .forwhom{margin-top:30px;padding-top:24px}
}

/* ---------- Leitsatz-Band ---------- */
.motto{
  background:var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:17.6px 32px;text-align:center
}
.motto p{
  margin:0;font-size:13px;font-weight:600;line-height:32px;letter-spacing:.06em;
  color:var(--muted2)
}
.motto .sep{color:var(--border2);margin:0 .6rem}
@media (max-width:560px){
  .motto p{line-height:1.9}
  .motto .sep{margin:0 .35rem}
}

/* ---------- Partnerband ---------- */
.ticker{background:var(--surface);padding:0}
.ticker__label{
  text-align:center;margin:0;padding-top:24px;
  font-size:11px;font-weight:400;line-height:32px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:24px
}
.ticker__wrap{overflow:hidden;position:relative;padding-bottom:24px}
.ticker__wrap::before,.ticker__wrap::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ticker__wrap::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.ticker__wrap::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker__wrap:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__wrap{overflow-x:auto}.ticker__track{animation:none}}
.ticker__track span{
  display:flex;align-items:center;padding:0 48px;border-right:1px solid var(--border);
  font-size:13px;font-weight:500;line-height:32px;height:32px;
  color:var(--muted2);letter-spacing:.04em;white-space:nowrap;
  transition:color .25s var(--ease)
}
.ticker__track span:hover{color:#fff}
@media (max-width:900px){.ticker__track span{padding:0 32px}}
@media (max-width:500px){.ticker__track span{padding:0 24px}}

/* ---------- Karten-Raster mit Linien ---------- */
.cards{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.cards>*{background:var(--sec-bg)}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cards--3,.cards--2{grid-template-columns:1fr}}

.card{padding:clamp(28px,3.4vw,44px) clamp(22px,2.8vw,36px)}

/* Zielgruppen: Flaeche hebt sich, ein oranger Strich laeuft unten ein */
.cards--sweep .card{position:relative;overflow:hidden;transition:background .3s}
.cards--sweep .card::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1)
}
.cards--sweep .card:hover{background:var(--surface2)}
.cards--sweep .card:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .cards--sweep .card::after{transition:none}
}
.card .card__num{font-size:56px;font-weight:800;line-height:1;letter-spacing:-2.8px;color:var(--border2);margin-bottom:22px}
.card .card__eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;line-height:1.6}
.card h3{margin-bottom:16px}
.card p{font-size:14.5px;font-weight:300;line-height:1.75;color:var(--muted2)}
.card .card__out{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);font-size:14.5px;font-weight:300;line-height:1.75;color:var(--muted2)}
.card__out b{color:var(--orange);font-weight:600}

.svc__list{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:grid;gap:9px}
.svc__list li{font-size:13.5px;font-weight:300;color:var(--muted2);padding-left:18px;position:relative}
.svc__list li::before{content:"→";position:absolute;left:0;color:var(--orange);font-size:12px}

/* Merkmale */
.chips{
  display:flex;flex-wrap:wrap;gap:9.6px 4px;
  margin:clamp(26px,3.1vw,40px) -8px 0
}
.chip{
  display:inline-flex;align-items:center;gap:9px;margin:0 8px;padding:3.2px 16px;
  font-size:12.48px;line-height:32px;color:var(--muted2)
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:0 0 auto}
.after-cta{margin:clamp(26px,3.1vw,40px) 0 13px;text-align:right}

/* ---------- Vorgehen ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;margin-top:clamp(30px,4vw,46px)}
.steps::before{
  content:"";position:absolute;top:27px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange) 10%,var(--orange) 10%,transparent);
  opacity:.18;transform-origin:left center;pointer-events:none
}

/* Die Linie waechst, danach kommen die fuenf Schritte nacheinander */
@media (prefers-reduced-motion:no-preference){
  .steps.reveal::before{transform:scaleX(0);transition:transform .9s var(--ease) .1s}
  .steps.reveal.is-in::before{transform:scaleX(1)}
  .steps.reveal .step{opacity:0}
  .steps.reveal.is-in .step{animation:stepIn .55s var(--ease) both}
  .steps.reveal.is-in .step:nth-child(1){animation-delay:.20s}
  .steps.reveal.is-in .step:nth-child(2){animation-delay:.33s}
  .steps.reveal.is-in .step:nth-child(3){animation-delay:.46s}
  .steps.reveal.is-in .step:nth-child(4){animation-delay:.59s}
  .steps.reveal.is-in .step:nth-child(5){animation-delay:.72s}
  .steps.reveal.is-in .step__n{animation:stepPop .55s var(--ease) both;animation-delay:inherit}
  .steps.reveal.is-in .step:nth-child(1) .step__n{animation-delay:.20s}
  .steps.reveal.is-in .step:nth-child(2) .step__n{animation-delay:.33s}
  .steps.reveal.is-in .step:nth-child(3) .step__n{animation-delay:.46s}
  .steps.reveal.is-in .step:nth-child(4) .step__n{animation-delay:.59s}
  .steps.reveal.is-in .step:nth-child(5) .step__n{animation-delay:.72s}
  @keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes stepPop{from{transform:scale(.82)}to{transform:scale(1)}}
}
.step{text-align:center;padding-inline:12px;position:relative;z-index:1}
.step__n{
  width:54px;height:54px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border2);
  display:grid;place-items:center;margin:0 auto 24px;
  font-size:16.8px;font-weight:700;line-height:1;color:var(--text);
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)
}
.section--surface .step__n{background:var(--surface)}
.step:hover .step__n{
  border-color:var(--orange);
  color:var(--orange);
  background:var(--orange-dim)
}
.step h3{font-size:14px;font-weight:700;line-height:1.3;color:var(--text);margin-bottom:9px}
.step p{font-size:12.5px;font-weight:400;line-height:1.55;color:var(--muted)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
  .steps::before{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4.5vw,64px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about__text p{font-size:14.5px;font-weight:300;line-height:1.8;color:var(--muted2);margin-bottom:1.1em}
.about h2{margin-bottom:22px}
.about__media{position:relative}
.about__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.about__badge{
  position:absolute;left:0;bottom:26px;background:var(--orange);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1.35;letter-spacing:.02em;
  padding:12px 16px;max-width:190px
}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
.stat{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--bar);padding:20px 24px}
.section--surface .stat{background:var(--bg)}
.stat b{display:block;font-size:30.4px;font-weight:800;line-height:1;color:var(--orange)}
.stat span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:10px;line-height:1.4}
.proof{
  display:inline-flex;align-items:center;gap:4px;margin-top:14px;
  background:var(--surface);border:1px solid var(--border);padding:10px;
  transition:border-color .25s var(--ease)
}
.section--surface .proof{background:var(--bg)}
.proof:hover{border-color:var(--bar)}
.proof img{width:72px;height:auto;flex:0 0 auto}
.proof p{margin:0;font-size:12.48px;font-weight:400;line-height:1.5;color:var(--muted2)}
.proof b{display:block;font-weight:700;color:#fff}

/* ---------- Stimmen ---------- */
.voice{padding:clamp(28px,3.1vw,40px) clamp(22px,2.5vw,32px);display:flex;flex-direction:column}
.voice .voice__tag{
  font-size:11.2px;font-weight:700;line-height:1.4;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin:0 0 24px
}
.voice blockquote{margin:0 0 12px;font-size:13.92px;font-weight:300;font-style:italic;line-height:1.7;color:var(--text)}
.voice cite{margin-top:auto;font-style:normal;font-size:11.52px;font-weight:400;line-height:1.5;color:var(--muted)}
.voice cite b{display:block;font-weight:700;color:var(--muted2)}

/* ---------- Logbuch: eigenstaendige Kacheln, 30 px Abstand ---------- */
.logs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:960px){.logs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.logs{grid-template-columns:1fr}}
.log{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:30px;transition:border-color .3s ease
}
.log:hover{border-color:var(--orange)}
.log .log__cat{
  font-size:10.4px;font-weight:700;line-height:1;letter-spacing:.12em;
  text-transform:none;color:var(--bar);margin-bottom:15px
}
.log h3{font-size:17.6px;font-weight:600;line-height:1.3;color:#fff;margin-bottom:15px}
.log p{font-size:13.6px;font-weight:400;line-height:1.5;color:var(--muted2);margin:0}

/* ---------- Abschluss ---------- */
.cta-band h2{margin-bottom:14px}
.cta-band .btns{justify-content:center;margin-top:26px}

/* ---------- Fuss ---------- */
.site-foot{background:var(--bg);padding-block:0}
.site-foot > .wrap{max-width:none;padding-inline:40px}
.foot__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,9.4vw,120px) 0 24px}
.foot__top{display:flex;align-items:flex-start;gap:20px}
.foot__brand{flex:0 0 auto;min-width:171px}
.foot__brand img{width:135px}
.foot__mitte{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px}
.foot__nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.foot__nav a{font-size:14.4px;font-weight:300;color:var(--muted);transition:color .2s var(--ease)}
.foot__mark{width:32px;opacity:.85}
.foot__direct{flex:0 0 auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end;padding:10px;min-width:285px}
.foot__direct a{font-size:12.6px;font-weight:300;color:var(--muted);transition:color .2s var(--ease)}
.foot__nav a:hover,.foot__direct a:hover{color:#fff}
.foot__bottom{
  border-top:1px solid var(--border);padding-top:20px;margin-top:20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap
}
.foot__bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.foot__bottom a{font-size:12.6px;font-weight:300;color:var(--muted);transition:color .2s var(--ease)}
.foot__bottom a:hover{color:#fff}
.foot__bottom p{margin:0;font-size:10px;color:var(--muted)}
@media (max-width:820px){
  .foot__top{flex-direction:column;align-items:center;text-align:center}
  .foot__brand,.foot__direct{min-width:0;justify-content:center}
  .foot__bottom{justify-content:center}
}

/* ---------- Inhaltsseiten ---------- */
.page-head{padding-block:clamp(40px,5vw,68px) clamp(24px,3vw,40px);background:var(--bg)}
.page-head h1{max-width:22ch}
.page-head .lead{margin-top:18px}

.prose{max-width:76ch;font-size:15px;font-weight:300;line-height:1.85;color:var(--muted2)}
.prose h2{font-size:22px;color:var(--head);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;color:var(--text);margin:28px 0 10px;font-weight:600}
.prose p{margin:0 0 1.15em}
.prose a{font-size:14px;font-weight:500;color:var(--orange);border-bottom:1px solid rgba(240,90,0,.35)}
.prose a:hover{border-color:var(--orange)}
.prose ul{margin:0 0 1.3em;display:grid;gap:8px}
.prose ul li{padding-left:18px;position:relative}
.prose ul li::before{content:"→";position:absolute;left:0;color:var(--orange);font-size:12px}
.prose .box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--bar);padding:22px 26px;margin:0 0 1.5em;color:var(--text)}
.prose .stand{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}

/* Passt-Seite */
.fit{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.fit>*{background:var(--sec-bg)}
.fit__item{padding:26px 30px;border-left:3px solid var(--bar)}
.fit__item--no{border-left-color:var(--border2)}
.fit__item h3{margin-bottom:8px}
.fit__item p{font-size:14.5px;font-weight:300;line-height:1.75;color:var(--muted2);margin:0}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.ways{display:grid;gap:14px}
.way{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--bar);
  padding:22px 26px;transition:border-color .25s var(--ease)
}
.section--surface .way{background:var(--bg)}
.way:hover{border-color:var(--orange)}
.way__ico{flex:0 0 auto;width:34px;height:34px;background:var(--orange-dim);display:grid;place-items:center;color:var(--orange)}
.way h3{margin-bottom:4px}
.way p{font-size:13.5px;font-weight:300;line-height:1.7;color:var(--muted2);margin:0}
.way .val{color:var(--bar);font-size:12.48px;font-weight:400;word-break:break-word}
.expect{background:var(--surface);border:1px solid var(--border);padding:24px 26px;display:grid;gap:12px;margin-top:14px}
.section--surface .expect{background:var(--bg)}
.expect h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.expect li{padding-left:18px;position:relative;font-size:13.5px;font-weight:300;line-height:1.7;color:var(--muted2)}
.expect li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* ---------- Beitrag ---------- */
.post-head{padding-block:clamp(34px,4vw,56px) clamp(20px,2.4vw,30px)}
.post-head .kicker{margin-bottom:14px}
.post-hero{background:var(--surface);border:1px solid var(--border);margin-bottom:clamp(28px,3.4vw,44px)}
.post-hero img{width:100%;height:auto}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}}
.post-body{font-size:16px;font-weight:300;line-height:1.85;color:var(--text)}
.post-body p{margin:0 0 1.3em}
.post-body .pointe,
.post-body blockquote{
  margin:1.6em 0;padding:22px 26px;border-left:3px solid var(--bar);background:var(--orange-dim);
  font-size:16px;font-style:italic;line-height:1.7;color:var(--text)
}
.post-body blockquote p{margin:0}
.post-body strong{color:#fff;font-weight:600}
.post-nav{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--border)}
.post-nav a{font-size:13px;font-weight:400;color:var(--muted);display:inline-flex;gap:8px;align-items:center;transition:color .2s var(--ease)}
.post-nav a:hover{color:var(--orange)}

.aside{display:grid;gap:16px;position:sticky;top:calc(var(--head-h) + 20px)}
@media (max-width:900px){.aside{position:static}}
.aside__cta{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--orange);padding:24px 26px}
.aside__cta h3{margin-bottom:10px}
.aside__cta p{font-size:13px;font-weight:300;line-height:1.7;color:var(--muted2);margin-bottom:18px}
.aside__more{background:var(--surface);border:1px solid var(--border);padding:22px 26px}
.aside__more h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.aside__more li+li{border-top:1px solid var(--border)}
.aside__more a{display:block;padding:11px 0;font-size:13px;font-weight:400;color:var(--text);transition:color .2s var(--ease)}
.aside__more a:hover{color:var(--orange)}

/* ---------- Sanfte Einblendung ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
  .steps.reveal{opacity:1;transform:none}
  .hero__inner>*{animation:heroIn .7s var(--ease) both}
  .hero__inner>*:nth-child(1){animation-delay:.05s}
  .hero__inner>*:nth-child(2){animation-delay:.12s}
  .hero__inner>*:nth-child(3){animation-delay:.2s}
  .hero__inner>*:nth-child(4){animation-delay:.28s}
  .hero__inner>*:nth-child(5){animation-delay:.36s}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .site-head,.site-foot,.burger,.btns,.cta-band,.ticker,.motto,.hero__right,.aside{display:none}
  h1,h2,h3{color:#000}
  .card,.voice,.log,.way,.fit__item,.cards,.fit{border-color:#ccc;background:#fff;break-inside:avoid}
  .section{padding-block:14pt;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- Hilfsklassen (statt Inline-Styles, damit die CSP eng bleibt) ---------- */
.u-mt{margin-top:22px}

/* ---------- 404 ---------- */
.err{background:var(--bg);padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px)}
.err__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.err__in{grid-template-columns:1fr}}
.err h1{max-width:16ch}
.err__nav{background:var(--surface);border:1px solid var(--border);border-radius:2px;padding:26px 30px}
.err__nav h2{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.err__nav li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--border)}
.err__nav li:last-child{border-bottom:0;padding-bottom:0}
.err__nav a{font-size:15px;font-weight:600;color:var(--text);transition:color .2s var(--ease)}
.err__nav a:hover{color:var(--orange)}
.err__nav span{font-size:12.5px;font-weight:300;color:var(--muted)}