/* ============================================================
   Waeger Consulting · Website
   Farben ausschliesslich aus tokens/colors.css des Design Systems.
   Schrift Inter, lokal ausgeliefert, keine externe Verbindung.
   Keine Verlaeufe auf Bedienflaechen, keine Schatten.
   Ecken quadratisch, ausser 8px auf Buttons und weissen Karten.
   ============================================================ */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/InterVariable.woff2") format("woff2");
}

:root{
  --navy:#263f57;--navy-soft:#34557a;--steel:#3a4f64;--slate:#4e6a86;
  --petrol:#05445e;--mist:#8ba3bc;--cream:#fdf7e9;--offwhite:#f0ebe5;
  /* Gedaempfter Text auf dunklem Grund, Token --text-on-dark-muted des Design Systems.
     --mist ist dort eine Fuellfarbe und faellt als Fliesstext durch WCAG AA. */
  --on-dark-mute:#b9c6d2;
  --white:#fff;--ink:#26281e;--ink-2:#4a4d42;--red:#ff3131;
  /* Warmgrau des Design Systems, minimal abgedunkelt von #6f6b64.
     Der Originalton ergibt auf Off-White nur 4,47 und faellt durch WCAG AA. */
  --gray:#67635c;

  --hair:rgba(253,247,233,.20);
  --hair-strong:rgba(253,247,233,.36);
  --hair-ink:rgba(38,40,30,.14);

  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;

  --t-display:clamp(38px,4.9vw,72px);
  --t-h1:clamp(34px,4.2vw,62px);
  --t-h2:clamp(30px,3.4vw,52px);
  --t-h3:clamp(20px,1.6vw,25px);
  --t-lede:clamp(18px,1.4vw,22px);
  --t-body:clamp(16px,1.05vw,18px);
  --t-label:12px;

  --wrap:1170px;--gutter:clamp(20px,4vw,48px);--nav-h:60px;--r:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);overflow-wrap:break-word;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;line-height:1.05;letter-spacing:-.028em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.g2{gap:var(--s2)}.g3{gap:var(--s3)}.g4{gap:var(--s4)}.g5{gap:var(--s5)}
.g6{gap:var(--s6)}.g7{gap:var(--s7)}.g8{gap:var(--s8)}

/* Flaechen */
.s-navy{background:var(--navy)}
/* Navy-Soft ist heller als Navy. Der gedaempfte Textton braucht dort mehr
   Helligkeit, sonst liegt er bei 4,43 und damit unter WCAG AA. */
.s-soft{background:var(--navy-soft);--on-dark-mute:#c8d2dd}
.s-steel{background:var(--steel)}
.s-petrol{background:var(--petrol)}
.s-light{background:var(--offwhite);color:var(--ink)}
.pad{padding-block:clamp(76px,7.5vw,128px)}
.pad-sm{padding-block:clamp(56px,5.5vw,88px)}

/* Typo-Rollen */
.label{font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-mute);display:flex;align-items:center;gap:12px}
.label::after{content:"";flex:1;height:1px;background:var(--hair);max-width:96px}
.s-light .label{color:var(--slate)}
.s-light .label::after{background:var(--hair-ink)}
.lede{font-size:var(--t-lede);line-height:1.5;font-weight:500;max-width:66ch}
.muted{color:var(--on-dark-mute)}
.s-light .muted{color:var(--gray)}
.measure{max-width:78ch}
.rule-red{width:72px;height:4px;background:var(--red);border:0;margin:0}

/* Gipfelmarke aus der Bildmarke */
.peak{flex:none;width:28px;height:18px;overflow:visible}
.peak path{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}

/* Bedienelemente */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-size:19px;font-weight:700;
  line-height:1;padding:17px 28px;border-radius:var(--r);text-decoration:none;
  border:2px solid transparent;transition:background .16s ease,border-color .16s ease}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#e02424}
.btn-ghost{border-color:var(--hair-strong);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.on-light .btn-ghost,.s-light .btn-ghost{border-color:rgba(38,40,30,.34);color:var(--ink)}
.on-light .btn-ghost:hover,.s-light .btn-ghost:hover{border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4)}
.tlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;
  text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:4px;
  width:fit-content;transition:border-color .16s ease}
.tlink:hover{border-color:var(--red)}
.s-light .tlink,.card .tlink{border-color:var(--hair-ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;
  padding:12px 18px;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* Asymmetrischer Abschnittskopf */
.head{display:flex;flex-direction:column;gap:var(--s5)}
.head h2{max-width:none;text-wrap:balance}
@media(max-width:900px){.head{grid-template-columns:1fr;gap:var(--s5)}}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid var(--hair)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:34px}
.brand span{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:var(--s7)}
.nav-links a{font-size:14px;font-weight:600;text-decoration:none;opacity:.85}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]{border-bottom:2px solid var(--red);padding-bottom:3px}
.nav-cta{font-size:14px;font-weight:700;padding:10px 18px;border-radius:var(--r);
  background:var(--red);color:#fff;text-decoration:none;white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--hair-strong);color:var(--cream);
  font:700 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 15px;border-radius:var(--r);cursor:pointer}
/* Aufklappmenue unter Beratungsangebot */
.nav-gruppe{position:relative;display:flex;align-items:center;gap:4px}
.nav-auf{background:none;border:0;color:var(--cream);cursor:pointer;padding:4px;
  display:grid;place-items:center;opacity:.85;line-height:0}
.nav-auf svg{width:11px;height:7px;transition:transform .18s ease}
.nav-gruppe.offen .nav-auf svg{transform:rotate(180deg)}
.nav-sub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:230px;
  display:none;flex-direction:column;background:var(--navy);
  border:1px solid var(--hair);border-radius:var(--r);padding:6px;z-index:70}
.nav-gruppe:hover .nav-sub,.nav-gruppe:focus-within .nav-sub,.nav-gruppe.offen .nav-sub{display:flex}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-sub a{font-size:14px;padding:11px 12px;border-radius:4px;opacity:.9;white-space:nowrap}
.nav-sub a:hover{background:var(--navy-soft);opacity:1}
.nav-sub a[aria-current="page"]{border-bottom:0;background:var(--navy-soft);
  box-shadow:inset 3px 0 0 var(--red)}

@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-in{position:relative}
  .nav-links{position:absolute;left:0;right:0;top:var(--nav-h);display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--navy);border-bottom:1px solid var(--hair);
    padding:var(--s2) var(--gutter) var(--s5)}
  .nav-links.open{display:flex}
  .nav-links>a{padding:15px 0;border-bottom:1px solid var(--hair);font-size:17px;opacity:1}
  .nav-gruppe{flex-wrap:wrap;justify-content:space-between;
    border-bottom:1px solid var(--hair);padding:15px 0}
  .nav-gruppe>a{font-size:17px;opacity:1}
  .nav-auf{padding:6px 10px;margin-right:-10px}
  .nav-auf svg{width:14px;height:9px}
  .nav-sub{position:static;min-width:0;width:100%;border:0;border-radius:0;
    padding:var(--s3) 0 0 var(--s5);background:none}
  .nav-gruppe:hover .nav-sub,.nav-gruppe:focus-within .nav-sub{display:none}
  .nav-gruppe.offen .nav-sub{display:flex}
  .nav-sub a{font-size:16px;padding:11px 0;opacity:.85}
  .nav-links a:last-child{border-bottom:0}
}

/* ---------- Startseite: Einstieg mit Video ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--offwhite);
  display:grid;align-content:center;min-height:clamp(520px,58vw,860px)}
/* 30.09.2026: Mindesthoehe, damit der Hero mit der breiteren, kuerzeren
   Ueberschrift nicht flacher wird als vorher (etwa 835px bei 1440). */
.hero>.hero-in{width:100%}
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%}
.hero-media video{opacity:0;transition:opacity .7s ease}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(240,235,229,.94) 0%,rgba(240,235,229,.88) 45%,rgba(240,235,229,.78) 70%,rgba(240,235,229,.35) 85%,rgba(240,235,229,0) 100%)}
/* 30.09.2026: Ueberschrift und Einleitung laufen jetzt bis etwa 70 Prozent der
   Breite (Wunsch Max). Der helle Schleier reicht deshalb bis dorthin, sonst lag
   die Einleitung ueber dem dunklen Berg bei 1,8:1. */
.hero-foot{position:absolute;left:0;right:0;bottom:0;height:24%;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(240,235,229,0),var(--offwhite))}
.hero-in{position:relative;z-index:1;
  padding-top:clamp(76px,9vw,140px);padding-bottom:clamp(104px,12vw,180px)}
.hero .label{color:var(--slate)}
.hero h1{font-size:var(--t-display);font-weight:900;letter-spacing:-.035em;color:var(--ink);max-width:none}
.hero .lede{color:#3f433a;max-width:66ch}

/* ---------- Unterseiten: schlanker Kopf ---------- */
.phead{padding-block:clamp(60px,6.5vw,110px) clamp(48px,5vw,80px)}
.phead h1{font-size:var(--t-h1);max-width:none;text-wrap:balance}
.phead .lede{margin-top:var(--s5)}
.crumb{font-size:13px;color:var(--on-dark-mute);letter-spacing:.06em;margin-bottom:var(--s5)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair)}

/* ---------- Person ---------- */
.who{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,6.6fr);gap:var(--s9);align-items:end}
.pframe{position:relative;align-self:end;max-width:330px}
/* Auf dem Handy zuerst der Text, danach ein kleines Portrait. Vorher stand das
   Bild oben und fuellte die halbe Bildschirmhoehe, bevor ein Wort zu lesen war.
   Die Abfrage muss NACH der Grundregel stehen, sonst gewinnt die Grundregel. */
@media(max-width:920px){
  .who{grid-template-columns:1fr;gap:var(--s6);align-items:start}
  .who-txt{order:1;padding-bottom:0}
  .pframe{order:2;max-width:230px;margin-top:var(--s5)}
}
.pframe::before{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  background:var(--slate)}
.s-light .pframe::before{background:var(--slate)}
.pframe img{position:relative;width:100%;height:auto}
.who-txt{padding-bottom:clamp(16px,3vw,56px)}

/* Zahlenreihe */
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);
  margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--hair-ink)}
.s-navy .kpi,.s-steel .kpi,.s-petrol .kpi,.s-soft .kpi{border-top-color:var(--hair)}
@media(max-width:640px){.kpi{grid-template-columns:1fr;gap:var(--s5)}}
.kpi div{border-top:4px solid var(--red);padding-top:var(--s4)}
.kpi b{display:block;font-size:clamp(34px,3.6vw,50px);font-weight:900;letter-spacing:-.045em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.s-navy .kpi b,.s-steel .kpi b,.s-petrol .kpi b,.s-soft .kpi b{color:var(--cream)}
.kpi span{font-size:15px;color:var(--gray);display:block;max-width:26ch}
.s-navy .kpi span,.s-steel .kpi span,.s-petrol .kpi span,.s-soft .kpi span{color:var(--on-dark-mute)}

/* ---------- Bergband: der Bildwechsel ---------- */
/* Heller Himmel wie im LinkedIn-Footer. Die Berge stehen mit ihrer Basis
   exakt auf der Kante zur dunklen Flaeche darunter. */
/* Die Hoehe folgt dem Seitenverhaeltnis des Bildes (2688x1140 = 42.4 Prozent
   der Breite), abzueglich der Scrollleiste. Bis ca. 1710px Fensterbreite wird
   dadurch nichts beschnitten, auch nicht die hohen Gipfel rechts oben. Ueber
   dem hoechsten Gipfel stehen im Bild 95px Himmel.
   Unter ca. 510px greift die Untergrenze von 210px: dann beschneidet cover die
   Seiten, die Berge werden gross, genau die Mobilansicht, die stimmt.
   Ueber ca. 1710px greift die Obergrenze. Der Ueberschuss wird zu 25 Prozent
   oben und zu 75 Prozent unten weggeschnitten, so bleiben die Gipfel drin und
   unten faellt nur Flaeche weg, die ohnehin in Navy auslaeuft.
   Kein aspect-ratio: das wuerde bei greifender max-height die Breite mit
   verkleinern, dann steht das Band nicht mehr randlos. */
.band{position:relative;height:clamp(210px,calc(42.4vw - 7px),720px);
  background:var(--offwhite) url("../img/bergband.webp") center 25% / cover no-repeat}
/* Die Kanten werden per Verlauf angeschlossen statt ins Bild gerechnet.
   So sitzt der Uebergang bei jeder Fensterbreite, obwohl cover beschneidet. */
.band::before{content:"";position:absolute;inset:0 0 auto 0;height:10%;
  background:linear-gradient(to bottom,var(--offwhite),rgba(240,235,229,0))}
.band::after{content:"";position:absolute;inset:auto 0 0 0;height:16%;
  background:linear-gradient(to bottom,rgba(38,63,87,0),var(--navy))}
/* Variante fuer den Uebergang in den petrolfarbenen Schlussabschnitt.
   Wird auf den Unterseiten vor dem Kontaktblock eingesetzt. */
.band.zu-petrol::after{background:linear-gradient(to bottom,rgba(5,68,94,0),var(--petrol))}

/* ---------- Symptomliste ---------- */
.sym{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s8)}
@media(max-width:900px){.sym{grid-template-columns:1fr}}
.sym li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  padding-block:var(--s6);border-top:1px solid var(--hair);align-items:start}
.sym li:nth-child(-n+2){border-top:0}
@media(max-width:900px){.sym li:nth-child(2){border-top:1px solid var(--hair)}}
.sym p{font-size:clamp(17px,1.2vw,19px);line-height:1.5}
.sym b{color:#fff;font-weight:800;display:block;margin-bottom:2px}
.sym span{color:var(--on-dark-mute)}
.sym .peak{margin-top:5px}
/* Einspaltige Variante fuer Unterseiten */
.sym.eins{grid-template-columns:1fr}
.sym.eins li:nth-child(2){border-top:1px solid var(--hair)}
.sym.eins li:first-child{border-top:0}

.schluss{font-size:clamp(20px,1.9vw,30px);font-weight:700;line-height:1.35;max-width:none;text-wrap:pretty;
  border-left:4px solid var(--red);padding-left:var(--s5)}

/* ---------- Leistungskarten ---------- */
/* Die drei Felder sind der wiederkehrende Anker der Seite. Sie stehen auf der
   Startseite und im Beratungsangebot identisch und duerfen dort nicht wie eine
   beliebige Kachelreihe wirken: grosse Nummer, kraeftige Kante, klare Hierarchie. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media(max-width:940px){.cards{grid-template-columns:1fr}}
.card{position:relative;background:var(--white);color:var(--ink);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  border:2px solid transparent;transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--red);transform:translateY(-4px)}
.bar{height:14px;background:var(--red)}
.card:nth-child(2) .bar{background:var(--petrol)}
.card:nth-child(3) .bar{background:var(--slate)}
.card-in{padding:var(--s7) var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s4);flex:1}
/* Die Nummer wird zur Ziffer im Hintergrund statt zur kleinen Pille */
.card .chip{position:absolute;top:calc(var(--s5) + 6px);right:var(--s5);
  height:auto;padding:0;border:0;background:none;
  font-size:clamp(52px,4.6vw,74px);font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--red);opacity:.13;pointer-events:none}
.card h3{padding-right:var(--s8)}
.chip{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;
  border-radius:999px;background:var(--white);color:var(--ink);border:2px solid var(--red);
  font-size:12px;font-weight:800;letter-spacing:.1em;width:fit-content;
  font-variant-numeric:tabular-nums}
.card h3{font-size:var(--t-h3);color:var(--ink)}
.card p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.card .tlink{margin-top:auto;color:var(--ink)}

/* ---------- Bausteine: was ich mache ---------- */
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s8)}
@media(max-width:860px){.blocks{grid-template-columns:1fr;gap:var(--s6)}}
.blocks h3{font-size:var(--t-h3);margin-bottom:var(--s3)}
.blocks p{color:var(--on-dark-mute)}
.s-light .blocks p{color:var(--gray)}

/* ---------- Ablauf in Schritten ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.step{border-top:1px solid var(--hair);padding-top:var(--s5)}
.s-light .step{border-top-color:var(--hair-ink)}
.step .chip{margin-bottom:var(--s4)}
.step h3{font-size:18px;margin-bottom:var(--s3)}
.step p{font-size:15.5px;color:var(--on-dark-mute);line-height:1.5}
.s-light .step p{color:var(--gray)}
.rahmen{font-size:clamp(17px,1.35vw,20px);line-height:1.5;font-weight:600;color:var(--cream);border-left:3px solid var(--red);padding-left:var(--s5);margin-top:var(--s6);max-width:none;text-wrap:pretty}
.s-light .rahmen{color:var(--ink)}

/* ---------- Ergebnisliste ---------- */
/* Zwei Spalten mit Luft und einer weissen Karte je Punkt: als reine Liste war
   das auf der hellen Flaeche schwer zu lesen. */
.ergebnis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media(max-width:820px){.ergebnis{grid-template-columns:1fr}}
.ergebnis li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  padding:var(--s5) var(--s6) var(--s5) var(--s5);align-items:start;
  font-size:16.5px;line-height:1.5;background:var(--white);color:var(--ink-2);
  border-radius:var(--r);border-left:6px solid var(--red)}
.ergebnis li:nth-child(2n){border-left-color:var(--petrol)}
.s-navy .ergebnis li,.s-steel .ergebnis li,.s-soft .ergebnis li{background:rgba(255,255,255,.06);color:var(--cream)}
.ergebnis .peak{width:28px;height:18px;margin-top:3px}
.ergebnis .peak path{stroke:var(--red)}

/* ---------- Belegblock ---------- */
.beleg{background:var(--white);border-radius:var(--r);padding:var(--s7) var(--s6);
  border-top:10px solid var(--red);display:flex;flex-direction:column;gap:var(--s4)}
.beleg p{font-size:var(--t-lede);font-weight:600;color:var(--ink);line-height:1.4}
.beleg .sub{font-size:16px;font-weight:400;color:var(--ink-2)}

/* ---------- Belegkarten ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.proof.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.proof.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.proof.vier{grid-template-columns:1fr}}
@media(max-width:940px){.proof{grid-template-columns:1fr}}
.pcard ul{display:grid;gap:var(--s3)}
.pcard li{position:relative;padding-left:var(--s5);font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.pcard li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--red);border-radius:999px}
.pcard{background:var(--white);border-radius:var(--r);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);border-top:10px solid var(--slate)}
.pcard:nth-child(1){border-top-color:var(--red)}
.pcard:nth-child(2){border-top-color:var(--petrol)}
.pcard h3{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.pcard p{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* ---------- Werdegang ---------- */
/* Grundfarben fuer dunkle Flaechen, Helligkeit wird unten ueberschrieben */
.vita li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--s6);
  padding-block:var(--s6);border-top:1px solid var(--hair)}
@media(max-width:760px){.vita li{grid-template-columns:1fr;gap:var(--s3)}}
.vita b{font-size:17px;font-weight:800;color:var(--cream)}
.vita time{display:block;font-size:14px;color:var(--on-dark-mute);font-weight:600;margin-top:2px}
.vita p{color:var(--on-dark-mute)}
.s-light .vita li{border-top-color:var(--hair-ink)}
.s-light .vita b{color:var(--ink)}
.s-light .vita time{color:var(--slate)}
.s-light .vita p{color:var(--ink-2)}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s9)}
@media(max-width:900px){.kontakt{grid-template-columns:1fr;gap:var(--s7)}}
.kdaten li{padding-block:var(--s4);border-top:1px solid var(--hair)}
.kdaten li:first-child{border-top:0}
.kdaten span{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:4px}
.kdaten a,.kdaten strong{font-size:var(--t-lede);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--hair)}
.kdaten strong{border-bottom:0;font-weight:600}
.status{display:inline-flex;align-items:center;gap:10px;background:var(--navy-soft);
  border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;width:fit-content}
.status::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--red)}

/* ---------- Rechtstexte ---------- */
.recht{max-width:74ch}
.recht h2{font-size:clamp(21px,2vw,28px);margin-top:var(--s8);margin-bottom:var(--s4)}
.recht h2:first-of-type{margin-top:0}
.recht h3{font-size:18px;margin-top:var(--s6);margin-bottom:var(--s3)}
.recht p{margin-bottom:var(--s4);color:var(--ink-2)}
.recht ul{margin-bottom:var(--s4)}
.recht li{padding-left:20px;position:relative;margin-bottom:var(--s2);color:var(--ink-2)}
.recht li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:999px;background:var(--red)}
/* Deckende Flaeche, damit die Markierung auf hellem wie dunklem Grund
   lesbar bleibt. Verschwindet, sobald Max die Angabe eintraegt. */
.platzhalter.platzhalter{background:var(--white);color:var(--ink);border:2px solid var(--red);border-radius:4px;padding:1px 8px;font-weight:700;white-space:nowrap}

/* ---------- Abschluss und Fuss ---------- */
.cta h2{font-size:var(--t-h2);max-width:16ch}
.foot{background:var(--slate);padding-block:var(--s7)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;
  align-items:center;font-size:14px}
.foot a{text-decoration:none;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.foot ul{display:flex;flex-wrap:wrap;gap:var(--s5)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .hero-media video{display:none}
}

/* ============================================================
   UNTERSEITEN: eigene Gesichter statt drei Mal dasselbe Muster
   ============================================================ */

/* ---------- Kopf mit Bergausschnitt, je Seite ein anderer ---------- */
.phead-bild{position:relative;isolation:isolate;overflow:hidden}
.phead-bild::after{content:"";position:absolute;right:0;bottom:0;z-index:-1;
  width:min(52%,620px);height:100%;
  background:var(--band-pos,center) / cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 38%);
  mask-image:linear-gradient(to right,transparent,#000 38%);
  opacity:.5}
.phead-bild.b-links::after{background-image:url("../img/bergband.webp");background-position:12% bottom}
.phead-bild.b-mitte::after{background-image:url("../img/bergband.webp");background-position:52% bottom}
.phead-bild.b-rechts::after{background-image:url("../img/bergband.webp");background-position:92% bottom}
@media(max-width:760px){.phead-bild::after{width:100%;opacity:.22}}

/* ---------- Diagramme ---------- */
.dia{display:grid;gap:var(--s3);align-items:end}
.dia-spalte{padding:var(--s5) var(--s4);text-align:center;font-size:14px;
  font-weight:700;line-height:1.4}
.dia-spalte small{display:block;font-size:12px;font-weight:500;opacity:.78;margin-top:7px}
.dia-cap{margin-top:var(--s6);font-size:clamp(17px,1.35vw,20px);font-weight:600;line-height:1.45;color:var(--cream);text-align:center;max-width:56ch;margin-inline:auto}
.s-light .dia-cap{color:var(--ink)}

/* Anschlussstueck: links die Strategie, rechts die Umsetzung, in der Mitte das
   Zielbild, das beide verbindet. Pfeile zeigen die Richtung. */
.dia-luecke{grid-template-columns:1fr 1.2fr 1fr;align-items:stretch;
  position:relative;gap:var(--s6)}
.dia-luecke .voll::after,.dia-luecke .offen::after{content:"";position:absolute;
  top:50%;right:calc(var(--s6) * -1);width:var(--s6);height:2px;background:var(--hair-strong)}
.dia-luecke .voll.alt::after{display:none}
.dia-luecke>div{position:relative}
.dia-luecke .voll::before,.dia-luecke .offen::before{content:"";position:absolute;
  top:50%;right:calc(var(--s6) * -1 + 1px);transform:translateY(-50%);
  border-left:7px solid var(--hair-strong);border-block:5px solid transparent}
.dia-luecke .voll.alt::before{display:none}
@media(max-width:600px){
  .dia-luecke .voll::after,.dia-luecke .offen::after,
  .dia-luecke .voll::before,.dia-luecke .offen::before{display:none}
}
.dia-luecke .voll{background:var(--petrol);color:var(--cream);min-height:230px;
  display:flex;flex-direction:column;justify-content:center;font-size:16px}
.dia-luecke .voll small{font-size:14px;margin-top:var(--s3)}
.dia-luecke .voll.alt{background:var(--slate)}
.dia-luecke .offen{min-height:230px;border:2px solid var(--red);background:rgba(255,49,49,.10);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s4);color:#fff;font-size:16px;line-height:1.5}
.dia-luecke .offen em{font-style:normal;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);font-weight:800;
  background:var(--white);border:2px solid var(--red);padding:3px 10px;border-radius:999px}
@media(max-width:600px){.dia-luecke{grid-template-columns:1fr}
  .dia-luecke .voll,.dia-luecke .offen{height:auto;padding:var(--s5);justify-content:center}}
/* Der Satz haengt am mittleren Stueck. Ein roter Pfeil laeuft aus der roten
   Unterkante des Zielbilds senkrecht auf den Satz, der mittig darunter steht.
   Der Satz ist Teil des Rasters, damit er auf dem Handy direkt unter dem
   Zielbild steht und nicht unter der Umsetzung, zu der der Pfeil nicht gehoert.
   margin-top hebt den Zeilenabstand des Rasters auf, damit der Pfeil an der
   Kante ansetzt. Alle Lagen sind ausdruecklich gesetzt. */
.dia-luecke>.voll{grid-column:1;grid-row:1}
.dia-luecke>.offen{grid-column:2;grid-row:1}
.dia-luecke>.voll.alt{grid-column:3}
.zusage{--pfeil:clamp(56px,5vw,76px);grid-column:1 / -1;grid-row:2;
  position:relative;justify-self:center;margin-top:calc(var(--s6) * -1);
  padding-top:calc(var(--pfeil) + var(--s4));max-width:34ch;
  text-align:center;text-wrap:balance;font-size:clamp(21px,1.9vw,28px);
  font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--cream)}
.zusage::before{content:"";position:absolute;top:0;left:50%;
  width:var(--kante);margin-left:calc(var(--kante) / -2);
  height:calc(var(--pfeil) - 12px);background:var(--red)}
.zusage::after{content:"";position:absolute;left:50%;top:calc(var(--pfeil) - 16px);
  margin-left:-10px;border-inline:10px solid transparent;border-top:16px solid var(--red)}
@media(max-width:600px){
  .dia-luecke>.voll,.dia-luecke>.offen,.dia-luecke>.voll.alt,.dia-luecke>.zusage{
    grid-column:1;grid-row:auto}
  .dia-luecke>.zusage{order:1}
  .dia-luecke>.voll.alt{order:2}
}

/* Zwei Spuren: Value Cases gegen Quick Wins */
.dia-spuren{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}
@media(max-width:720px){.dia-spuren{grid-template-columns:1fr}}
.spur{border:2px solid var(--hair);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.spur-kopf{padding:var(--s4) var(--s5);font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.spur.value .spur-kopf{background:var(--petrol);color:var(--cream)}
.spur.quick .spur-kopf{background:var(--white);color:var(--ink)}
.spur ol{list-style:none;margin:0;padding:var(--s5);display:flex;flex-direction:column;
  gap:var(--s3);counter-reset:s}
.spur li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;
  color:var(--on-dark-mute)}
.spur li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;
  font-size:11px;font-weight:800;color:var(--cream);font-variant-numeric:tabular-nums}
.spur-fuss{margin-top:auto;padding:var(--s4) var(--s5);border-top:2px solid var(--hair);
  font-size:13px;font-weight:700;color:var(--cream)}
.spur.value .spur-fuss{background:rgba(5,68,94,.4)}
.spur.quick .spur-fuss{background:rgba(255,255,255,.08)}

/* ---------- Ergebnis als Kartenraster statt Liste ---------- */
.ergebnis-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.ekarte{background:var(--white);border-radius:var(--r);padding:var(--s5);
  border-left:6px solid var(--red);font-size:16px;line-height:1.5;color:var(--ink-2)}
.ekarte:nth-child(2n){border-left-color:var(--petrol)}
.ekarte:nth-child(3n){border-left-color:var(--slate)}

/* ---------- Kopfbereich mit Bewegtbild ---------- */
/* Wie beim Hero: Medienschicht hinten, darueber ein Navy-Schleier von links,
   damit die helle Schrift lesbar bleibt und die Berge rechts durchkommen. */
.phead-video{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(88px,9vw,150px) clamp(72px,7vw,116px)}
.phead-video .medien{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phead-video video,.phead-video .medien img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 62%}
.phead-video video{opacity:0;transition:opacity .7s ease}
.phead-video .schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,var(--navy) 0%,rgba(38,63,87,.95) 58%,rgba(38,63,87,.9) 76%,rgba(38,63,87,.55) 92%,rgba(38,63,87,.4) 100%)}
/* 29.09.2026: Schleier bis 76 Prozent dicht, weil Ueberschrift und Einleitung
   jetzt bis dorthin laufen. Mit dem alten Verlauf lag die Einleitung bei 1,9:1. */
.phead-video .wrap{position:relative;z-index:1}
.phead-video h1{font-size:var(--t-h1);max-width:none;text-wrap:balance}
/* Bis 29.09.2026 fehlte hier die Groesse, die H1 lief mit Browser-Standard
   (etwa 32px) und war damit kleiner als jede H2 auf der Seite. */
/* Seit 29.09.2026 laufen Ueberschrift und Einleitung breiter. Damit der Kopf
   dadurch nicht flacher wird als vorher, behaelt er eine Mindesthoehe und
   setzt den Text mittig. */
/* 30.09.2026, zweiter Stand: Mit breitem Text und dichtem Schleier von links
   blieb vom Bergvideo nur ein Streifen am rechten Rand, dort liefen die
   Gipfel angeschnitten durch (Kommentar Max). Ab Tablet steht das Video
   deshalb als Band unter dem Text ueber die volle Breite, wie das Bergband
   der Marke. Oben ist der Kopf Navy, der Text liegt nie auf dem Bild. */
@media(min-width:761px){
  .phead-video{--band:clamp(150px,16vw,230px);
    padding-top:clamp(72px,7.5vw,120px);padding-bottom:calc(var(--band) + var(--s5))}
  .phead-video .medien{top:auto;height:calc(var(--band) + 140px)}
  .phead-video video,.phead-video .medien img,
  .phead-video.v-tief video,.phead-video.v-tief .medien img,
  .phead-video.v-hoch video,.phead-video.v-hoch .medien img{object-position:center 38%}
  .phead-video .schleier{background:linear-gradient(to bottom,var(--navy) 0,
    var(--navy) calc(100% - var(--band) - 140px),rgba(38,63,87,.93) calc(100% - var(--band) - 10px),
    rgba(38,63,87,.5) calc(100% - 70px),rgba(38,63,87,.35) 100%)}
}
.phead-video .lede{margin-top:var(--s5)}
/* Zweiter bewegter Kopf zeigt den tieferen Bildbereich, damit sich die
   beiden Unterseiten nicht gleich anfuehlen. */
.phead-video.v-tief video,.phead-video.v-tief .medien img{object-position:center 82%}
.phead-video.v-hoch video,.phead-video.v-hoch .medien img{object-position:center 38%}
@media(max-width:760px){
  .phead-video .schleier{background:linear-gradient(to bottom,rgba(38,63,87,.86),rgba(38,63,87,.94))}
}
@media(prefers-reduced-motion:reduce){.phead-video video{display:none}}

/* ============================================================
   Drei Bausteine, je einer traegt eine der drei Angebotsseiten.
   Bewusst unterschiedlich, damit sich die Seiten nicht gleich lesen.
   ============================================================ */

/* ---------- Selbsttest: Fragen, die der Leser sich selbst stellt ---------- */
/* Traegt die Zielbild-Seite. Die Frage ist gross, die Folge klein darunter. */
.fragen{display:grid;gap:0;counter-reset:frage}
.fragen li{counter-increment:frage;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:var(--s5) var(--s6);
  padding-block:var(--s6);border-top:1px solid var(--hair);align-items:start}
.fragen li:first-child{border-top:0;padding-top:0}
.fragen li::before{content:counter(frage,decimal-leading-zero);
  font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--red);
  font-variant-numeric:tabular-nums;padding-top:6px}
.fragen q{quotes:"„" "“";display:block;
  font-size:clamp(19px,1.7vw,26px);font-weight:700;line-height:1.3;
  letter-spacing:-.015em;color:var(--cream)}
.fragen p{margin-top:var(--s3);font-size:15.5px;line-height:1.55;color:var(--on-dark-mute)}
@media(max-width:600px){
  .fragen li{grid-template-columns:1fr;gap:var(--s3)}
  .fragen li::before{padding-top:0}
}

/* ---------- Sortierung: die Regel, auf echte Aufgaben angewendet ---------- */
/* Traegt die Use-Case-Seite. Arbeitsprobe statt Beschreibung. */
.sortier-rahmen{overflow-x:auto}
.sortier{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.sortier th{text-align:left;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-mute);padding-bottom:var(--s4);
  border-bottom:1px solid var(--hair-strong)}
.sortier td{padding-block:var(--s5);border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.5}
.sortier td:first-child{font-weight:700;color:var(--cream);padding-right:var(--s6);width:32%}
.sortier td:nth-child(2){padding-right:var(--s6);white-space:nowrap;width:1%}
.sortier td:last-child{color:var(--on-dark-mute)}
.sortier tr:last-child td{border-bottom:0}
.marke{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:4px 10px;border:2px solid var(--red);border-radius:999px;
  background:var(--white);color:var(--ink);white-space:nowrap}
.marke.aus{border-color:var(--hair-strong);background:transparent;color:var(--on-dark-mute)}
/* Auf dem Handy wird aus jeder Zeile ein Block. Seitwaerts scrollen in einer
   Tabelle liest niemand. */
@media(max-width:640px){
  .sortier{min-width:0}
  .sortier thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sortier tr{display:block;padding-block:var(--s5);border-bottom:1px solid var(--hair)}
  .sortier tr:last-child{border-bottom:0}
  .sortier td{display:block;padding:0;border:0;width:auto!important}
  .sortier td:first-child{font-size:17px;padding-right:0;margin-bottom:var(--s3)}
  .sortier td:nth-child(2){margin-bottom:var(--s3);padding-right:0}
}

/* ---------- Gegenueberstellung: vorher und nachher, Zeile fuer Zeile ---------- */
/* Traegt die Enablement-Seite. Links der Zustand nach dem Pflichttraining als
   blasser Rahmen ohne Flaeche: dokumentiert, aber ohne Substanz. Rechts der
   Zustand nach echter Befaehigung als volle Petrolflaeche mit der roten Kante.
   Die zwei Woerter der Ueberschrift, Geschult und Befaehigt, stehen gross ueber
   den Spalten. In der schmalen Mittelspalte zeigt je Satzpaar ein Pfeil von
   links nach rechts. Drei Subgrids teilen sich die Zeilen, damit jedes Paar
   und sein Pfeil auf derselben Hoehe stehen, egal wie lang ein Satz ist. */
.gegen{--gpfeil:clamp(48px,5.2vw,80px);--gin:clamp(20px,2.2vw,34px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--gpfeil) minmax(0,1.12fr);
  align-items:stretch}
.gegen>div{grid-row:1 / span var(--zeilen,5);display:grid;grid-template-rows:subgrid}
/* Rahmen und rote Kante liegen als Schatten und Pseudoelement auf der Flaeche,
   nicht als border. Ein border waere links 1px und rechts 4px dick und wuerde
   die Koepfe der beiden Spalten gegeneinander verschieben. */
.gegen>.links{grid-column:1;box-shadow:inset 0 0 0 1px var(--hair-strong);padding:0 var(--gin)}
.gegen>.gpfeile{grid-column:2}
.gegen>.rechts{grid-column:3;position:relative;background:var(--petrol);padding:0 var(--gin)}
.gegen>.rechts::before{content:"";position:absolute;inset:0 0 auto 0;
  height:var(--kante);background:var(--red)}
.gkopf{padding:clamp(26px,2.6vw,38px) 0 var(--s5);border-bottom:1px solid var(--hair)}
.gkopf h3{font-size:clamp(32px,3.2vw,50px);letter-spacing:-.04em;line-height:1}
.links .gkopf h3{color:var(--on-dark-mute)}
.rechts .gkopf h3{color:var(--cream)}
.gunter{margin-top:var(--s3);font-size:var(--t-label);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
.gegen>div>p{display:flex;align-items:center;padding-block:var(--s5);
  border-bottom:1px solid var(--hair);font-size:clamp(16px,1.2vw,18px);line-height:1.5}
.gegen>div>p:last-child{border-bottom:0}
.links>p{color:var(--on-dark-mute)}
.rechts>p{color:var(--cream);font-weight:600}
/* Pfeil: Schaft und Spitze in Creme, gedeckt, damit Rot der Kante allein
   gehoert. Die Spalte beginnt mit einem leeren Feld auf Hoehe der Koepfe. */
.gpfeile i{position:relative;align-self:center;justify-self:center;
  width:calc(var(--gpfeil) - 18px);height:14px;opacity:.6}
.gpfeile i::before{content:"";position:absolute;left:0;right:9px;top:50%;
  height:2px;margin-top:-1px;background:var(--cream)}
.gpfeile i::after{content:"";position:absolute;right:0;top:50%;margin-top:-7px;
  border-left:11px solid var(--cream);border-block:7px solid transparent}
/* Handy: die Spalten stehen untereinander, dazwischen ein Pfeil nach unten. */
@media(max-width:760px){
  .gegen{grid-template-columns:minmax(0,1fr)}
  .gegen>div{display:block}
  .gegen>.links,.gegen>.gpfeile,.gegen>.rechts{grid-column:1;grid-row:auto}
  .gegen>.gpfeile{position:relative;height:var(--s8);opacity:.6}
  .gpfeile>*{display:none}
  .gpfeile::before{content:"";position:absolute;left:50%;top:var(--s3);bottom:calc(var(--s3) + 9px);
    width:2px;margin-left:-1px;background:var(--cream)}
  .gpfeile::after{content:"";position:absolute;left:50%;bottom:var(--s3);margin-left:-7px;
    border-top:11px solid var(--cream);border-inline:7px solid transparent}
}

/* Ergebnistafel: weisse Karten mit grosser Gipfelmarke. Traegt die
   Ergebnisabschnitte dort, wo eine Aufzaehlung zu blass waere. */
/* Ergebnisse als Liste, nicht als Kartenraster. Die Gipfelmarke steht links
   als Aufzaehlungszeichen, Titel und Satz daneben, Haarlinien dazwischen.
   Vorher standen dieselben vier weissen Karten auf allen drei Angebotsseiten
   und die Schrift darin war zu klein, um ueberflogen zu werden. */
.tafel{display:flex;flex-direction:column}
.tkarte{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,2.4vw,34px);align-items:start;
  padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--hair-ink)}
.tkarte:last-child{border-bottom:1px solid var(--hair-ink)}
/* Explizite Zellen: ohne sie rutscht der Absatz in die Spalte der
   Gipfelmarke, weil das Raster automatisch weiterzaehlt. */
.tkarte .peak{grid-column:1;grid-row:1 / span 2;width:clamp(28px,2.8vw,40px);
  height:auto;margin-top:7px}
.tkarte .peak path{stroke:var(--red);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tkarte h3{grid-column:2;grid-row:1;font-size:clamp(20px,1.9vw,27px);
  color:var(--ink);line-height:1.2;margin-bottom:var(--s3)}
.tkarte p{grid-column:2;grid-row:2;font-size:clamp(16px,1.15vw,17.5px);
  line-height:1.55;color:var(--ink-2);max-width:78ch}
@media(max-width:600px){
  .tkarte{column-gap:var(--s4);padding-block:var(--s5)}
  .tkarte .peak{width:24px;margin-top:5px}
}

/* Aufzaehlung mit der Gipfelmarke als Punkt, passend zum Bergabschnitt.
   Gleiche Listenform wie die Ergebnisse: Haarlinien dazwischen und genug Luft,
   damit die fuenf Punkte einzeln gelesen werden statt als ein Block. */
.punkte{display:flex;flex-direction:column;max-width:78ch;margin-top:var(--s5)}
.punkte li{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2vw,26px);align-items:start;
  padding:clamp(16px,1.7vw,22px) 0;border-top:1px solid var(--hair);
  font-size:clamp(17px,1.25vw,19px);line-height:1.5;color:var(--cream)}
.punkte li:last-child{border-bottom:1px solid var(--hair)}
.s-light .punkte li{color:var(--ink-2);border-color:var(--hair-ink)}
.punkte .peak{width:clamp(26px,2.3vw,32px);height:auto;margin-top:5px}
.punkte .peak path{stroke:var(--red)}

/* Ausgewaehlte Mandate als Liste. Vorher vier Bloecke im Zweierraster, jeder
   mit eigener roter Kante: vier rote Balken nebeneinander lesen als Wand, und
   die Texte standen zu eng. Jetzt links Feld und Kunde, rechts das Ergebnis,
   eine rote Kante nur oben fuer den ganzen Block. */
.mandate{display:flex;flex-direction:column;
  border-top:var(--kante) solid var(--red)}
.mandat{display:grid;grid-template-columns:clamp(190px,25vw,310px) minmax(0,1fr);
  column-gap:clamp(28px,4vw,64px);row-gap:var(--s3);
  padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--hair)}
.mandat i{grid-column:1;grid-row:1;font-style:normal;font-size:var(--t-label);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-mute)}
.mandat b{grid-column:1;grid-row:2;font-size:clamp(19px,1.6vw,23px);
  font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--cream)}
.mandat p{grid-column:2;grid-row:1 / span 2;font-size:16px;line-height:1.6;
  color:var(--on-dark-mute);max-width:78ch}
.mandat em{font-style:normal;font-weight:700;color:var(--cream)}
@media(max-width:860px){
  .mandat{grid-template-columns:minmax(0,1fr)}
  .mandat i,.mandat b,.mandat p{grid-column:1;grid-row:auto}
  .mandat p{margin-top:var(--s2)}
}

/* Interview-Ausschnitt. Bewusst mit den Bedienelementen des Browsers und
   preload="none": die Datei laedt erst, wenn jemand wirklich abspielt. */
.interview{margin:0;display:grid;gap:var(--s4);max-width:900px}
.interview video{width:100%;height:auto;display:block;background:#000;
  border-top:6px solid var(--red)}
.interview figcaption{font-size:15px;line-height:1.5;color:var(--on-dark-mute)}
.s-light .interview figcaption{color:var(--gray)}

/* ---------- Fotoreihe: Berge, Gleitschirm, Ski ---------- */
.hobby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media(max-width:720px){.hobby{grid-template-columns:1fr;gap:var(--s4)}}
.hobby figure{margin:0}
.hobby figcaption{margin-top:var(--s3);font-size:15px;line-height:1.45;
  color:var(--on-dark-mute)}
.hobby img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.hobby .leer{aspect-ratio:3/4;display:grid;place-items:center;
  border:1px dashed var(--hair-strong);background:rgba(255,255,255,.04)}

/* ---------- Gestapelter Abschnittskopf ---------- */
/* Wenn der Untertitel rechts neben der Ueberschrift steht, wirkt er verloren.
   Diese Variante stellt ihn direkt darunter.
   Seit 29.09.2026 (Variante B, Entscheidung Max): der Block ist nicht mehr auf
   60ch begrenzt, die Ueberschrift laeuft ueber die volle Breite. Nur die Texte
   behalten ein Lesemass, sonst werden die Zeilen bei 1070px zu lang.
   Beim Schluss-CTA sitzen .wrap und .kopf-block auf demselben Element, dort
   greift deshalb wieder die normale Containerbreite. */
.kopf-block{display:flex;flex-direction:column;gap:var(--s5)}
.kopf-block h2{max-width:none;text-wrap:balance}
.nw{white-space:nowrap}
/* Lange Bindestrich-Woerter (ueber 16 Zeichen, etwa "KI-Transformationen")
   erst ab 480px zusammenhalten, darunter wuerden sie ueber den Rand laufen. */
@media(min-width:480px){.nw-gross{white-space:nowrap}}
.kopf-block .lede{max-width:66ch}
.kopf-block .measure{max-width:78ch}

/* Symptomliste einspaltig mit groesseren Gipfelmarken */
.sym.gross{grid-template-columns:1fr}
.sym.gross li{gap:var(--s6);padding-block:var(--s6)}
.sym.gross li:nth-child(2){border-top:1px solid var(--hair)}
.sym.gross li:first-child{border-top:0}
.sym.gross .peak{width:38px;height:24px;margin-top:4px}
.sym.gross .peak path{stroke-width:2}
.sym.gross p{font-size:clamp(18px,1.35vw,21px)}
.sym.gross b{margin-bottom:4px}

/* Schlusssatz ueber die volle Breite der Liste */
.schluss.breit{max-width:none;margin-top:var(--s5)}

/* ---------- Treppe: drei Stossrichtungen, die aufeinander aufbauen ---------- */
/* Die Aussage steckt in der Geometrie, nicht in Pfeilen. Drei Flaechen stehen
   buendig auf einer Grundlinie, ihre Oberkanten steigen von links nach rechts.
   Daraus wird eine gestufte Silhouette, ueber die eine durchgehende rote Linie
   als Tritt und Setzstufe laeuft und oben rechts im Punkt endet. Wer nicht
   liest, sieht trotzdem einen Aufstieg. Ab 860px wird daraus eine Liste mit
   roter Kante links, weil Diagonalen auf dem Handy nur Platz kosten. */
.treppe{--step:clamp(34px,4.2vw,78px);--kante:4px;--luft:200px;
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;
  padding-top:var(--luft)}
/* Hinter der Treppe steht der Bergzug aus dem Header der Marke. Er ist breiter
   als die Treppe, mittig gesetzt, und laeuft links und rechts weich aus, damit
   keine harte Bildkante mitten im Satzspiegel steht. Nach unten laeuft er
   ebenfalls aus, sonst steht neben der ersten und dritten Stufe seine
   Unterkante als waagerechte Linie. Seine Unterkante liegt auf
   dem Tritt der ersten Stufe, die zweite und dritte Stufe verdecken den Fuss.
   Die Gipfel ragen ueber alle drei Stufen, der hoechste steht ueber der dritten.
   Die Sektion schneidet den Ueberstand ab, sonst entsteht auf schmalen
   Bildschirmen ein waagerechter Scrollbalken. */
.treppe::before{content:"";position:absolute;z-index:-1;left:50%;
  width:135%;aspect-ratio:2400 / 494;
  top:calc(var(--luft) + 2 * var(--step));transform:translate(-50%,-100%);
  background:url("../img/treppe-berge.webp") no-repeat center bottom / 100% 100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,#000 58%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-composite:intersect;
  pointer-events:none}
section:has(> .wrap > .treppe){overflow-x:clip}
/* Die Stufen haengen an ihrem Tritt und stehen auf einer gemeinsamen Grundlinie.
   Eine zweizeilige Ueberschrift kann die Treppe deshalb nicht verziehen. */
.tstufe{position:relative;background:var(--petrol);
  border-top:var(--kante) solid var(--red);
  padding:var(--s6) var(--s5) var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:background-color .16s ease}
.tstufe:hover{background:var(--navy)}
.tstufe:first-child{margin-top:calc(var(--step) * 2)}
.tstufe:nth-child(2){margin-top:var(--step)}
/* Setzstufe: senkrechtes Stueck der roten Linie an der Naht zur tieferen Stufe */
.tstufe:nth-child(n+2)::before{content:"";position:absolute;left:0;top:calc(var(--kante) * -1);
  width:var(--kante);height:calc(var(--step) + var(--kante));background:var(--red)}

/* Die Nummer ist Struktur, nicht Text: gross, gedeckt, hinter der Ueberschrift */
.tzahl{font-size:clamp(52px,4.6vw,86px);font-weight:900;line-height:.82;letter-spacing:-.06em;
  color:var(--cream);opacity:.45;font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.tstufe h3{font-size:var(--t-h3)}
.tfrage{font-style:italic;color:var(--on-dark-mute);line-height:1.5}
.terg{font-size:16px;line-height:1.5;border-top:1px solid var(--hair);padding-top:var(--s3)}
.terg b{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:6px}
.tstufe .tlink{margin-top:auto;padding-top:var(--s4)}
.tabbind{font-size:var(--t-lede);font-weight:600;max-width:none;text-wrap:pretty;
  border-left:var(--kante) solid var(--red);padding-left:var(--s5)}
@media(max-width:860px){
  /* Auf dem Handy gibt es keine Stufen, also steht der Bergzug als Gipfelreihe
     ueber der ersten Karte. Er ist breiter als der Bildschirm und laeuft seitlich
     aus, seine Unterkante liegt auf der Oberkante der ersten Karte. */
  .treppe{--luft:calc((100vw - 40px) * .37);grid-template-columns:1fr;
    gap:var(--s4);padding-top:var(--luft)}
  .treppe::before{width:180%;top:var(--luft)}
  .tstufe{margin-top:0!important;border-top:0;
    border-left:var(--kante) solid var(--red);padding:var(--s5)}
  .tstufe::before,.tstufe::after{display:none}
}


/* ============================================================
   REGELN FUER DIE SCHAUBILDER
   Je Seite gibt es genau ein Schaubild, nicht drei. Alles andere ist
   Typografie. Drei Grafiken tragen die Methodik: .treppe auf der
   Uebersicht, .schnitt bei den Use Cases und .kstufen bei Enablement.
   Dazu kommt .dia-luecke beim Zielbild, das aus der ersten Fassung stammt
   und traegt.

   1. Rotstaerke immer 4px, als --kante.
   2. Je Schaubild genau ein zusammenhaengender roter Streckenzug und
      genau eine Bedeutung, die auch im Text steht. Treppe: Aufstieg.
      Schnitt: Auslese. Kompetenzstufen: Anspruch.
   3. Rot erreicht auf keiner dunklen Flaeche 3:1 (Steel 2,32 I Petrol
      2,72 I Navy 2,97), nur an Offwhite mit 3,09. Deshalb traegt Rot
      nie eine Information, die nicht auch im Text steht.
   4. Ziffern in zwei Zustaenden. Struktur: ab 28px, Gewicht 900,
      Creme mit Deckkraft .45 auf Dunkel. Marke: 12px, Gewicht 800,
      Sperrung .16em, immer voll deckend, weil .45 unter 24px durch
      WCAG faellt.
   5. Bruchpunkt 860px, und darunter wird umcodiert statt verkleinert.
   6. Was kein eigenes Argument hat, wird kein Schaubild. Fuenf
      gleichrangige Fragen sind eine Liste, keine Geometrie.
   ============================================================ */
:root{--kante:4px}

/* ---------- Schnittkante: vier Spalten, die nach rechts kuerzer werden ---------- */
/* Gelesen wird von links nach rechts, in der Reihenfolge des Vorgehens. Vier
   Spalten stehen auf einer gemeinsamen Grundlinie, jede ist um --stufe kuerzer
   als die vorige. Ueber die Oberkanten laeuft der rote Streckenzug als Tritt
   und Setzstufe nach rechts unten. Das ist das Spiegelbild der Treppe auf der
   Uebersicht: dort steigt die Linie, weil etwas aufgebaut wird, hier faellt
   sie, weil in jedem Schritt aussortiert wird. Unter jeder Spalte steht, was
   in diesem Schritt herausgefallen ist. Rechts von Spalte 04 laeuft die Linie
   weiter, knickt nach unten und teilt sich in die zwei Wege.
   Bruchpunkt hier 1000px statt 860px: fuenf Spalten brauchen die Breite. */
.schnitt{--stufe:clamp(96px,8vw,116px);--verb:clamp(32px,3.4vw,52px);--sg:var(--s4);
  --sin:clamp(16px,1.6vw,24px);
  container-type:inline-size;--bergh:calc(100cqw * 4 / 5.5 / 2.906);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);
  align-items:stretch}
/* Jede Spalte ist ein Raster mit genau einer Zelle. Spalte und Notiz liegen
   in derselben Zelle: die Spalte haengt an ihrem Tritt und reicht bis zur
   Grundlinie, die Notiz fuellt genau die Stufe darueber, also das Stueck, das
   die Spalte gegenueber der vorigen verloren hat. --stufe ist so hoch, dass
   dort Marke und zwei bis drei Zeilen Platz haben. */
.sspalte{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr)}
.sspalte:nth-child(1){grid-column:1}
.sspalte:nth-child(2){grid-column:2}
.sspalte:nth-child(3){grid-column:3}
.sspalte:nth-child(4){grid-column:4}
/* Die Spalten haengen an ihrem Tritt: margin-top schiebt die Oberkante nach
   unten, align stretch haelt die Unterkante auf der Grundlinie. */
.sband{grid-area:1 / 1;position:relative;isolation:isolate;background:var(--petrol);
  border-top:var(--kante) solid var(--red);
  padding:clamp(18px,1.8vw,26px) var(--sin);
  display:flex;flex-direction:column;gap:var(--s2)}
/* Haarlinie an der Naht als Schatten, nicht als Rahmen. Ein Rahmen wuerde die
   Innenkante um 1px verschieben und die Setzstufe von ihrem Tritt loesen. */
.sspalte+.sspalte .sband{box-shadow:inset 1px 0 0 var(--hair)}
.sspalte:nth-child(2) .sband{margin-top:var(--stufe)}
.sspalte:nth-child(3) .sband{margin-top:calc(var(--stufe) * 2)}
.sspalte:nth-child(4) .sband{margin-top:calc(var(--stufe) * 3)}
/* Setzstufe: vom Tritt der hoeheren Spalte links senkrecht hinunter auf den
   eigenen Tritt. top rechnet ab der Innenkante, also unter dem roten Rand. */
.sspalte:nth-child(n+2) .sband::before{content:"";position:absolute;left:0;
  top:calc((var(--stufe) + var(--kante)) * -1);
  width:var(--kante);height:calc(var(--stufe) + var(--kante));background:var(--red)}
/* Unten in den vier Spalten dezent ein Bergzug, der links in Spalte 01 am
   hoechsten ist und nach rechts abfaellt, so wie die Spalten selbst. Es ist
   das Motiv aus dem Claude-Stapel, gespiegelt. Er laeuft ueber alle vier
   Spalten durch, jede zeigt ihr Viertel des Bildes. Die Hoehe folgt der
   Breite der vier Spalten, das sind 4 von 5,5 Anteilen des Rasters.
   Nur Spalte 04 braucht unten Platz fuer ihn, dort ist er am niedrigsten:
   hoechstens 24 Prozent der Bildhoehe. Die Spalten 01 bis 03 sind so hoch,
   dass ihr Text weit ueber den Gipfeln endet. Auf dem Handy entfaellt er. */
.sband::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;
  height:var(--bergh);opacity:.2;pointer-events:none;
  background:url("../img/uc-berge.webp") no-repeat 0 100% / 400% 100%}
.sspalte:nth-child(4) .sband{padding-bottom:calc(var(--bergh) * .24 + var(--s4))}
.sspalte:nth-child(2) .sband::after{background-position:33.333% 100%}
.sspalte:nth-child(3) .sband::after{background-position:66.667% 100%}
.sspalte:nth-child(4) .sband::after{background-position:100% 100%}
.szahl{font-style:normal;font-size:clamp(30px,2.6vw,44px);font-weight:900;line-height:.8;
  letter-spacing:-.05em;color:var(--cream);opacity:.45;
  font-variant-numeric:tabular-nums;margin-bottom:var(--s3)}
.sband b{display:block;font-size:clamp(17px,1.4vw,20px);font-weight:800;
  letter-spacing:-.01em;line-height:1.2;color:var(--cream);hyphens:auto}
.sband span{display:block;font-size:15px;line-height:1.45;color:var(--on-dark-mute)}
/* Was in diesem Schritt herausfaellt, steht genau dort, wo die Spalte
   gegenueber der vorigen an Hoehe verloren hat. Das Feld ist schraffiert und
   oben und rechts gestrichelt, als Umriss des weggefallenen Stuecks. Links
   begrenzt es die rote Setzstufe, unten der rote Tritt. */
.sweg{grid-area:1 / 1;align-self:start;height:var(--stufe);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s2) var(--sin);
  border-top:1px dashed var(--hair-strong);border-right:1px dashed var(--hair-strong);
  background:repeating-linear-gradient(135deg,rgba(253,247,233,.07) 0 2px,transparent 2px 10px);
  font-size:13.5px;line-height:1.4;color:var(--on-dark-mute)}
.sspalte:nth-child(3) .sweg{margin-top:var(--stufe)}
.sspalte:nth-child(4) .sweg{margin-top:calc(var(--stufe) * 2)}
.sweg b{display:block;font-size:var(--t-label);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);margin-bottom:6px}
/* Gabel: so hoch wie Spalte 04. Die Linie kommt waagerecht vom Tritt der
   Spalte 04, knickt nach unten und fuehrt mit zwei Stichen in die beiden
   Wege. Beide Kaesten sind gleich hoch, deshalb liegt die Mitte des unteren
   bei 75 Prozent plus einem Viertel des Abstands. */
.sgabel{grid-column:5;grid-row:1;position:relative;margin-top:calc(var(--stufe) * 3);
  padding-left:var(--verb);display:flex;flex-direction:column;gap:var(--sg)}
.sgabel::before{content:"";position:absolute;left:0;top:0;
  width:calc(var(--verb) / 2 + var(--kante) / 2);height:var(--kante);background:var(--red)}
.sgabel::after{content:"";position:absolute;top:0;
  left:calc(var(--verb) / 2 - var(--kante) / 2);width:var(--kante);
  height:calc(75% + var(--sg) / 4 + var(--kante) / 2);background:var(--red)}
.szweig{flex:1;position:relative;background:var(--petrol);padding:var(--s4) var(--sin);
  display:flex;flex-direction:column;justify-content:center}
.szweig::before{content:"";position:absolute;top:50%;margin-top:calc(var(--kante) / -2);
  left:calc((var(--verb) / 2 + var(--kante) / 2) * -1);
  width:calc(var(--verb) / 2 + var(--kante) / 2);height:var(--kante);background:var(--red)}
.szweig b{display:block;font-size:clamp(16px,1.3vw,19px);font-weight:800;
  line-height:1.25;color:var(--cream)}
.szweig span{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;
  color:var(--on-dark-mute)}

/* Handy und schmale Tablets: der Ablauf steht untereinander, gelesen von oben
   nach unten. Die Verengung wechselt von der Hoehe auf die Linie: unter jeder
   Spalte zeigt ein rotes Restmass, wie viel nach diesem Schritt noch im Rennen
   ist. Die Notiz haengt unter ihrem Schritt. Die Gabel steht nebeneinander,
   untereinander waere sie eine Liste. */
@media(max-width:1000px){
  .schnitt{grid-template-columns:minmax(0,1fr)}
  .sspalte:nth-child(n){grid-column:1;grid-row:auto;display:block}
  .sspalte:nth-child(n) .sband{margin-top:0;border-top:0;box-shadow:none;
    padding:var(--s5) var(--s4) calc(var(--s5) + var(--kante))}
  .sspalte+.sspalte{margin-top:var(--s4)}
  .sspalte:nth-child(n) .sband::before{top:auto;bottom:0;left:0;width:var(--rest);
    height:var(--kante)}
  .sspalte:nth-child(1) .sband{--rest:100%}
  .sspalte:nth-child(2) .sband{--rest:72%}
  .sspalte:nth-child(3) .sband{--rest:48%}
  .sspalte:nth-child(4) .sband{--rest:28%}
  .sspalte:nth-child(1) .sband::before{content:"";position:absolute;background:var(--red)}
  .sband::after{display:none}
  .szahl{font-size:var(--t-label);font-weight:800;letter-spacing:.16em;line-height:1;
    opacity:1;margin-bottom:var(--s2)}
  .sspalte:nth-child(n) .sweg{display:block;height:auto;margin-top:0;
    padding:var(--s3) var(--s4) 0;border:0;background:none;font-size:14px}
  /* Gabel als Baum: kurzer Stiel von oben, Querbalken ueber beiden
     Kastenmitten, zwei Stiche hinunter. */
  .sgabel{grid-column:1;grid-row:auto;margin-top:0;padding:calc(var(--s4) * 2) 0 0;
    flex-direction:row;gap:var(--s3);--sg:var(--s3)}
  .sgabel::after{left:50%;margin-left:calc(var(--kante) / -2);top:0;
    height:calc(var(--s4) + var(--kante))}
  .sgabel::before{top:var(--s4);width:auto;
    left:calc(25% - var(--sg) / 4 - var(--kante) / 2);
    right:calc(25% - var(--sg) / 4 - var(--kante) / 2)}
  .szweig{padding:var(--s4)}
  .szweig::before{top:calc(var(--s4) * -1);margin-top:0;left:50%;
    margin-left:calc(var(--kante) / -2);width:var(--kante);height:var(--s4)}
}

/* ---------- Schichten: das Claude-Betriebssystem als Stapel ---------- */
/* Drei Schichten, die aufeinander aufbauen, gestapelt wie ein Betriebssystem:
   unten die Kontextarchitektur als breites Fundament, darauf die Skills, oben
   die Governance. Die Nummern stehen gross vorn, damit die Reihenfolge ohne
   Lesen klar ist. Die rote Linie umlaeuft die gestufte Silhouette als ein
   einziger Streckenzug: jede hoehere Schicht liegt 4px ueber der Kante der
   darunter und deckt deren Rot in der Mitte ab, sichtbar bleiben die Absaetze
   links und rechts. Alle drei Schichten sind gleich hoch, sonst wird der
   Stapel kopflastig, weil oben der laengste Text steht. */
.cschichten{display:grid;grid-template-rows:repeat(3,1fr);justify-items:center;
  container-type:inline-size}
.cschicht{position:relative;isolation:isolate;overflow:hidden;width:100%;
  background:var(--petrol);border-top:var(--kante) solid var(--red);
  display:grid;grid-template-columns:clamp(64px,6.4vw,100px) minmax(0,1fr);
  column-gap:var(--s5);align-content:center;
  padding:clamp(20px,2vw,28px) clamp(24px,2.6vw,40px)}
.cschicht:nth-child(1){grid-row:3}
.cschicht:nth-child(2){grid-row:2;width:87%;z-index:1;
  border-inline:var(--kante) solid var(--red);margin-bottom:calc(var(--kante) * -1)}
.cschicht:nth-child(3){grid-row:1;width:74%;z-index:2;
  border-inline:var(--kante) solid var(--red);margin-bottom:calc(var(--kante) * -1)}
/* In den Schichten steht ein Bergzug, der nach rechts zu einem hohen Gipfel
   ansteigt, ein anderes und hoeheres Motiv als in der Kompetenztreppe. Es ist
   ein einziges Bild fuer den ganzen Stapel: jede Schicht legt es an dieselbe
   Stelle und zeigt durch overflow nur ihren Ausschnitt, so laeuft der Bergzug
   ueber die Stufenkanten hinweg weiter.
   Rechnung: das Bild ist 148 Prozent der Stapelbreite breit (148cqw) und
   beginnt 47cqw links vom Stapel, damit der Gipfel bei 84 Prozent in der
   obersten Schicht steht. Waagerecht zieht jede Schicht ihren Einzug ab,
   (1 - Breite) / 2, und ihre 4px Seitenkante. Senkrecht sitzt der Fuss des
   Bildes auf der Unterkante des Stapels. Alle Zeilen sind gleich hoch (R),
   und die Innenhoehe der Schichten 02 und 03 ist genau R, weil ihre 4px
   Ueberlappung und ihr 4px roter Rand sich aufheben. Also liegt die
   Stapelunterkante R - 4px unter 02 und 2R - 4px unter 03. */
.cschicht::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-47cqw;bottom:0;width:148cqw;aspect-ratio:2400 / 826;opacity:.34;
  background:url("../img/schichten-berge.webp") no-repeat 0 0 / 100% 100%}
.cschicht:nth-child(2)::after{left:calc(-53.5cqw - var(--kante));
  bottom:calc(-100% + var(--kante))}
.cschicht:nth-child(3)::after{left:calc(-60cqw - var(--kante));
  bottom:calc(-200% + var(--kante))}
.cnr{grid-column:1;grid-row:1 / span 2;align-self:center;font-style:normal;
  font-size:clamp(48px,5vw,80px);font-weight:900;line-height:.8;letter-spacing:-.06em;
  color:var(--cream);opacity:.65;font-variant-numeric:tabular-nums}
/* Deckkraft .65 statt .45 wie in den anderen Schaubildern: die Nummern liegen
   hier auf dem Bergzug und brauchen dort 3:1, das schafft .45 nur auf Petrol. */
.cschicht h3{grid-column:2;grid-row:1;font-size:clamp(20px,1.8vw,26px);
  color:var(--cream);margin-bottom:var(--s2)}
.cschicht p{grid-column:2;grid-row:2;font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;
  color:var(--cream);max-width:72ch}
/* Der Fliesstext steht in Creme statt im gedaempften Grau: er liegt auf dem
   Bergzug, und auf dessen hellsten Flaechen erreicht Grau nur 3,3:1. Creme
   haelt dort ueber 4,5:1. */
/* Handy: die Schichten stehen untereinander in der Reihenfolge 01 bis 03,
   mit roter Kante links wie die anderen Schaubilder. */
@media(max-width:860px){
  .cschichten{grid-template-rows:none;gap:var(--s4)}
  .cschicht::after{display:none}
  .cschicht:nth-child(n){grid-row:auto;width:100%;margin-bottom:0;border:0;
    border-left:var(--kante) solid var(--red);grid-template-columns:minmax(0,1fr);
    padding:var(--s5)}
  .cnr{grid-row:auto;font-size:clamp(32px,9vw,44px);margin-bottom:var(--s3)}
  .cschicht h3,.cschicht p{grid-column:1;grid-row:auto}
}

/* ---------- Kompetenztreppe: drei Stufen, die nach rechts steigen ---------- */
/* Verstehen, Anwenden, Veraendern. Drei Stufen auf einer gemeinsamen
   Grundlinie, jede um --stufe hoeher als die vorige, die rote Linie laeuft als
   Tritt und Setzstufe nach rechts oben. Gleiche Bauweise wie die Schnittkante
   bei den Use Cases, nur steigend und ohne Gabel. Unter jeder Stufe steht,
   fuer wen sie gilt. Der Schlusssatz der Sektion spricht von der untersten
   Stufe, die Grafik zeigt, welche das ist. */
.kstufen{--stufe:clamp(40px,5.5vw,88px);--kin:clamp(20px,2vw,32px);
  container-type:inline-size;--bergh:calc(100cqw / 2.906);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;row-gap:var(--s5)}
.kspalte{grid-row:1 / span 2;display:grid;grid-template-rows:subgrid}
.kspalte:nth-child(1){grid-column:1}
.kspalte:nth-child(2){grid-column:2}
.kspalte:nth-child(3){grid-column:3}
.kstufe{grid-row:1;position:relative;isolation:isolate;background:var(--petrol);
  border-top:var(--kante) solid var(--red);
  padding:clamp(22px,2.2vw,32px) var(--kin) calc(var(--bergh) * .5 + var(--s4));
  display:flex;flex-direction:column;gap:var(--s3)}
.kspalte+.kspalte .kstufe{box-shadow:inset 1px 0 0 var(--hair)}
.kspalte:nth-child(1) .kstufe{margin-top:calc(var(--stufe) * 2)}
.kspalte:nth-child(2) .kstufe{margin-top:var(--stufe)}
/* Setzstufe: vom Tritt der tieferen Stufe links senkrecht hinauf auf den
   eigenen Tritt */
.kspalte:nth-child(n+2) .kstufe::before{content:"";position:absolute;left:0;
  top:calc(var(--kante) * -1);width:var(--kante);
  height:calc(var(--stufe) + var(--kante));background:var(--red)}
/* Unten in den drei Stufen steht dezent der Bergzug der Marke. Er laeuft ueber
   alle drei Stufen durch: jede zeigt ihr Drittel desselben Bildes, weil das
   Bild dreimal so breit gesetzt ist wie eine Stufe. Seine Hoehe folgt der
   Breite der ganzen Treppe (cqw), damit er in jeder Fensterbreite dasselbe
   Seitenverhaeltnis hat. z-index -1 legt ihn hinter den Text, aber vor die
   Petrolflaeche und die Haarlinie an der Naht. Auf dem Handy entfaellt er. */
.kstufe::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;
  height:var(--bergh);opacity:.2;pointer-events:none;
  background:url("../img/schichten-berge.webp") no-repeat 0 100% / 300% 100%}
/* 30.09.2026 (Max): Berge groesser und nach rechts ansteigend wie die Treppe.
   Dafuer der hohe Bergzug mit dem Gipfel rechts (Seitenverhaeltnis 2,906)
   statt des flachen Bandes kstufen-berge.webp (8,633). */
.kspalte:nth-child(2) .kstufe::after{background-position:50% 100%}
.kspalte:nth-child(3) .kstufe::after{background-position:100% 100%}
.kzahl{font-style:normal;font-size:clamp(30px,2.6vw,44px);font-weight:900;line-height:.8;
  letter-spacing:-.05em;color:var(--cream);opacity:.45;
  font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.kstufe h3{font-size:clamp(26px,2.5vw,38px);letter-spacing:-.03em;line-height:1.05;
  color:var(--cream)}
.kstufe p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:var(--on-dark-mute);
  max-width:38ch}
.kwer{grid-row:2;padding:var(--s3) var(--kin) 0;border-top:1px solid var(--hair);
  font-size:15.5px;font-weight:600;line-height:1.4;color:var(--cream)}
.kwer b{display:block;font-size:var(--t-label);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:6px}
@media(max-width:860px){
  .kstufen{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
  .kspalte:nth-child(n){grid-column:1;grid-row:auto;display:block}
  .kspalte+.kspalte{margin-top:var(--s5)}
  .kspalte:nth-child(n) .kstufe{margin-top:0;border-top:0;box-shadow:none;
    border-left:var(--kante) solid var(--red);padding:var(--s5)}
  .kspalte:nth-child(n) .kstufe::before{display:none}
  .kstufe::after{display:none}
  .kwer{padding:var(--s3) var(--s5) 0;border-top:0}
}

/* ---------- Liste: Marke, Stichwort, Satz ---------- */
/* Kein Schaubild, sondern Typografie. Fuenf gleichrangige Fragen und fuenf
   gleichrangige Formate ordnen sich in keine Geometrie. Sie brauchen eine
   saubere Flucht, Haarlinien dazwischen und sonst nichts. Die grosse Fassung
   traegt das Stichwort in Displaygroesse, weil dort das Wort die Aussage ist. */
.liste{display:flex;flex-direction:column}
.lzeile{display:grid;grid-template-columns:34px clamp(150px,20vw,260px) minmax(0,1fr);
  gap:var(--s5);align-items:baseline;padding:var(--s5) 0;
  border-top:1px solid var(--hair)}
.lzeile:last-child{border-bottom:1px solid var(--hair)}
.s-light .lzeile{border-color:var(--hair-ink)}
.lnr{font-style:normal;font-size:var(--t-label);font-weight:800;letter-spacing:.16em;
  color:var(--on-dark-mute);font-variant-numeric:tabular-nums}
.lzeile b{font-size:clamp(17px,1.4vw,21px);font-weight:800;letter-spacing:-.01em;
  line-height:1.2;color:var(--cream)}
.lzeile p{font-size:15.5px;line-height:1.5;color:var(--on-dark-mute)}
.liste.gross .lzeile{grid-template-columns:34px clamp(124px,17vw,220px) minmax(0,1fr);
  align-items:center;min-height:clamp(76px,6vw,96px)}
.liste.gross .lzeile b{font-size:clamp(28px,3.4vw,50px);font-weight:900;
  line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.liste.gross .lzeile p{font-size:clamp(16px,1.3vw,19px)}
@media(max-width:860px){
  .lzeile,.liste.gross .lzeile{grid-template-columns:34px minmax(0,1fr);
    gap:var(--s2) var(--s4);align-items:start;min-height:0}
  .lnr{grid-row:1}
  .lzeile b{grid-row:1;grid-column:2}
  .lzeile p{grid-row:2;grid-column:2}
}

/* ---------- Kopfleiste auf sehr schmalen Handys (29.09.2026) ---------- */
/* Auf Handybreiten war die Leiste zu eng: bei 360px lief die ganze Seite 15px
   ueber den Rand, und bis etwa 420px schob sich der Knopf "Erstgespraech" ueber
   die zweizeilige Wortmarke (gemessen: -10px Abstand bei 390px, iPhone 12 bis
   15). Bis 440px, also auf allen gaengigen Handys, steht deshalb nur die
   Bildmarke. Das war schon in Session 3a als Rueckfall vorgesehen. */
@media(max-width:440px){
  .brand span{display:none}
}
/* Unter 340px passt die Mailadresse im Schlussabschnitt nicht in einen Knopf
   auf einer Zeile. Sie darf dann umbrechen statt ueber den Rand zu laufen. */
@media(max-width:340px){
  .btn{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- Fotos aus dem Shooting (08.10.2026) ---------- */
/* Über mich: echtes Foto statt des freigestellten Portraits, deshalb ohne
   die Slate-Flaeche dahinter. */
.pframe.foto::before{display:none}
.pframe.foto img{display:block}
/* Kontakt (zweiter Stand 08.10.2026, Max: Foto zu klein): oben grosses Foto
   links und Kontaktdaten rechts, darunter die Vorbereitung ueber die volle
   Breite mit den drei Karten nebeneinander. Auf dem Handy: Kontaktdaten,
   Foto, Vorbereitung. */
.kontakt.mit-foto{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"foto daten" "vorb vorb";gap:var(--s9);align-items:center}
.kontakt.mit-foto .k-foto{grid-area:foto;margin:0}
.kontakt.mit-foto .k-daten{grid-area:daten}
.kontakt.mit-foto .k-vorb{grid-area:vorb;align-self:start;
  border-top:1px solid var(--hair);padding-top:var(--s8)}
.k-foto img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .kontakt.mit-foto{grid-template-columns:minmax(0,1fr);grid-template-areas:"daten" "foto" "vorb";gap:var(--s7)}
  .kontakt.mit-foto .k-foto{max-width:340px}
}