/* =============================================================
   lean-coach.one — Designsystem „Werkstattpapier"
   Richtung A · Rev. 01
   Regeln: ein Akzent (Signalrot), Prüfgrün nur für erreichte
   Zielwerte, Linien statt Schatten, scharfe Ecken, zwei Schriften
   mit strenger Rollentrennung (Serife = Prosa, Mono = Messwert).
   ============================================================= */

/* ---------- Schrift: lokal gehostet, kein CDN (DSGVO) ---------- */
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jbmono-latin.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jbmono-latinext.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#EDEAE3;
  --sheet:#F7F5F0;
  --ink:#191A17;
  --ink-2:#54564E;
  /* Zurückhaltend, aber nie unter 4.5:1 auf Papier — kleine Mono-Labels
     tragen hier echte Information und müssen lesbar bleiben. */
  --ink-3:#63655A;
  --rule:#CFCCC2;
  --rule-soft:#E1DED5;
  --red:#B33A2B;
  --red-hover:#962E21;
  --red-wash:rgba(179,58,43,.08);
  --green:#3F6B4A;
  --green-wash:rgba(63,107,74,.10);
  --graphite:#191A17;
  /* Gedämpfter Text auf dunklem Grund — geprüft auf >=4.5:1 gegen #191A17 */
  --on-dark-2:#A8AA9E;
  --on-dark-3:#8B8D82;

  --serif:Georgia,"Iowan Old Style","Source Serif Pro","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* ---- Typo-Skala: sieben Stufen, sonst keine ----
     --fs-label ist der Boden. Darunter wird die Mono-Ebene unlesbar,
     und sie trägt Kennzahlen, keine Dekoration. */
  --fs-label:.75rem;                        /* 12px · Labels, Kennzahlen-Beschriftung */
  --fs-small:.875rem;                       /* 14px · Nebentext, Listen */
  --fs-body:1.0625rem;                      /* 17px · Fließtext */
  --fs-lead:clamp(1.05rem,1.9vw,1.2rem);    /* Einleitungen */
  --fs-h3:1.15rem;
  --fs-h2:clamp(1.7rem,3.8vw,2.6rem);
  --fs-h1:clamp(2.1rem,5.4vw,3.6rem);

  --wrap:1180px;
  --gut:clamp(1.25rem,5vw,4rem);
  --rail:104px;
  --sec:clamp(4rem,9vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--sheet);
  padding:.75rem 1rem;font-family:var(--mono);font-size:.75rem;z-index:100;
}
.skip:focus{left:0;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Typo-Rollen ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance;line-height:1.14;}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.005em;}
p{margin:0;max-width:66ch;}
.lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:60ch;}

.label{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin:0;
}
.label--red{color:var(--red);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---------- Sektionsgerüst mit Koordinaten-Randspalte ---------- */
.sec{border-top:1px solid var(--rule);padding-block:var(--sec);}
.sec__grid{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0 2.5rem;
  align-items:start;
}
.rail{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  display:grid;gap:.35rem;padding-top:.5rem;
}
.rail__no{font-size:1.6rem;line-height:1;letter-spacing:-.02em;color:var(--red);}
.sec__body{min-width:0;display:grid;gap:1.5rem;}
.sec__head{display:grid;gap:.9rem;}

@media (max-width:820px){
  .sec__grid{grid-template-columns:1fr;gap:1.25rem;}
  .rail{display:flex;align-items:baseline;gap:.7rem;padding-top:0;}
  .rail__no{font-size:1.15rem;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.9rem 1.35rem;border:1px solid var(--red);background:var(--red);color:#fff;
  text-decoration:none;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn:hover{background:var(--red-hover);border-color:var(--red-hover);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--onDark{background:var(--red);border-color:var(--red);color:#fff;}
.btn--ghostDark{background:transparent;border-color:#3E4038;color:#D6D8CC;}
.btn--ghostDark:hover{background:transparent;border-color:#8A8C80;color:#fff;}
.arrowlink{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);text-decoration:none;display:inline-flex;gap:.5rem;align-items:center;
  border-bottom:1px solid transparent;padding:.55rem 0;min-height:34px;
}
.arrowlink:hover{border-bottom-color:var(--red);}

/* Auf Touch-Geräten brauchen Textlinks eine echte Trefferfläche.
   Auf dem Desktop bleibt die Satzdichte unangetastet. */
@media (pointer:coarse){
  .arrowlink,.lang,.foot a,.foot__bar a{min-height:44px;display:inline-flex;align-items:center;}
  .vsm__switch button,.burger{min-height:44px;}
}

/* =============================================================
   Kopfzeile
   ============================================================= */
.head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.head__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
/* Die Wortmarke trägt das Logo. Der Text daneben ist das erste
   Navigationselement und wird deshalb auch so gesetzt. */
.brand{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;
  min-height:44px;
}
.brand img{height:30px;width:auto;}
.brand__txt{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.brand:hover .brand__txt{color:var(--ink);border-bottom-color:var(--red);}
.nav{display:flex;align-items:center;gap:1.6rem;}
.nav a{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--red);}
.head__side{display:flex;align-items:center;gap:1rem;}
.lang{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);
  padding:.5rem .6rem;display:inline-flex;align-items:center;min-height:36px;
}
.lang:hover{border-color:var(--ink);color:var(--ink);}
.head .btn{padding:.6rem 1rem;font-size:var(--fs-label);}
.burger{
  display:none;background:none;border:1px solid var(--rule);
  width:38px;height:34px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:16px;height:1px;background:var(--ink);position:relative;}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:var(--ink);
}
.burger span::before{top:-5px;}
.burger span::after{top:5px;}

.mnav{display:none;border-top:1px solid var(--rule);background:var(--sheet);}
.mnav[data-open="true"]{display:block;}
.mnav ul{list-style:none;margin:0;padding:.5rem var(--gut) 1.25rem;display:grid;gap:.15rem;}
.mnav a{
  display:block;padding:.6rem 0;text-decoration:none;
  font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--rule-soft);
}

@media (max-width:980px){
  .nav{display:none;}
  .burger{display:flex;}
  .head .btn{display:none;}
}

/* =============================================================
   1 · Hero mit Wertstrom
   ============================================================= */
.hero{background:var(--graphite);color:#EFEDE6;border-bottom:1px solid #2A2C25;}

/* ---- Hallenlayout als Hintergrundzeichnung ----
   Vier Stationen, Förderstrecken, Bestandsdreiecke, Bemaßung. Sie liegt
   im Textbereich, nicht in der ganzen Sektion — sonst skaliert sie über
   das Wertstrom-Modul mit und wird von dessen Grund halb verdeckt.
   Rechts verankert, die Maske blendet sie nach links aus, wo die
   Überschrift steht. */
.blueprint{
  position:absolute;top:0;right:0;bottom:0;left:52%;
  z-index:0;overflow:hidden;pointer-events:none;
  opacity:.6;
  /* Der Anstieg braucht ein absolutes Mindestmaß. Rein prozentual
     schrumpft er mit dem Fenster, während der Textblock seine Breite
     behält — dann rutscht der Fließtext in den kräftigen Teil der
     Zeichnung und verliert Kontrast. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 max(44%,360px));
          mask-image:linear-gradient(to right,transparent 0,#000 max(44%,360px));
}
.bp__svg{width:100%;height:100%;display:block;}
/* Jede Regel nennt ihre Klasse. Ein pauschales .blueprint path würde
   die Sonderfälle darunter überstimmen — Rasterstärke, Rahmenfläche —
   weil zwei Selektoren mehr wiegen als einer. */
.blueprint .bp__grid{fill:none;stroke:#EFEDE6;stroke-width:.6;stroke-opacity:.2;}
.blueprint .bp__field{fill:url(#bpGrid);stroke:none;}
.blueprint .bp__belt path{fill:none;stroke:#EFEDE6;stroke-width:1.2;stroke-opacity:.34;}
.blueprint .bp__machine path{fill:none;stroke:#EFEDE6;stroke-width:1.4;stroke-opacity:.5;}
.blueprint .bp__machine .bp__core{stroke-width:1;stroke-opacity:.3;}
.blueprint .bp__buffer{fill:none;stroke:#E0806B;stroke-width:1.4;stroke-opacity:.6;}
.blueprint .bp__dim path{fill:#EFEDE6;stroke:#EFEDE6;stroke-width:1;stroke-opacity:.26;fill-opacity:.26;}
.blueprint .bp__dimline{fill:none;}
.blueprint .bp__part{fill:#E0806B;stroke:none;}
.blueprint .bp__stamp path{fill:none;stroke:#EFEDE6;stroke-width:1;stroke-opacity:.24;}
.blueprint .bp__id{
  fill:#EFEDE6;fill-opacity:.3;stroke:none;
  font-family:var(--mono);font-size:17px;letter-spacing:.12em;
}
/* Die Rückführung ist der Milkrun. Die wandernden Striche zeigen die
   Fahrtrichtung, ohne dass ein Fahrzeug gezeichnet werden muss. */
.blueprint .bp__route{
  fill:none;stroke:#EFEDE6;stroke-width:1.2;stroke-opacity:.28;
  stroke-dasharray:14 12;animation:bpRoute 3.2s linear infinite;
}
.blueprint .bp__routeHead{fill:#EFEDE6;fill-opacity:.28;stroke:none;}
@keyframes bpRoute{to{stroke-dashoffset:-52}}

/* Die Stationen atmen im Takt, versetzt gegeneinander — im Gleichtakt
   wirkt die ganze Zeichnung sonst wie ein blinkendes Schild. */
.bp__machine{animation:bpTakt 4.2s var(--takt,0s) ease-in-out infinite;}
@keyframes bpTakt{0%,100%{opacity:.72}50%{opacity:1}}

/* Werkstücke laufen die Strecke ab und setzen links wieder an. */
.bp__part{animation:bpLauf 13s var(--los,0s) linear infinite;}
@keyframes bpLauf{
  0%{transform:translateX(76px);opacity:0}
  6%{opacity:.8}
  94%{opacity:.8}
  100%{transform:translateX(898px);opacity:0}
}

/* Die Bemaßung zeichnet sich in einer langen Schleife selbst nach. */
.bp__dimline{stroke-dasharray:840;animation:bpMass 19s ease-in-out infinite;}
@keyframes bpMass{0%{stroke-dashoffset:840}45%,100%{stroke-dashoffset:0}}

/* Schmal gibt es keine freie rechte Hälfte mehr. Dann läuft die
   Zeichnung über die volle Breite hinter dem Text, entsprechend leiser. */
@media (max-width:900px){
  .blueprint{
    left:0;opacity:.22;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%);
            mask-image:linear-gradient(to bottom,#000,transparent 82%);
  }
}
/* Der globale Reduzieren-Regelsatz kürzt Laufzeiten nur ab; bei
   Endlosschleifen bedeutet das Dauerlast. Hier deshalb ganz abschalten. */
@media (prefers-reduced-motion:reduce){
  .bp__machine,.bp__part,.bp__dimline,.bp__route{animation:none !important;}
  .bp__part{transform:translateX(400px);}
  .bp__dimline{stroke-dashoffset:0;}
}

/* Die Zeichnung ist positioniert und läge damit über dem Text, der
   im normalen Fluss steht. Deshalb bekommen die Inhalte eine eigene
   Ebene darüber. */
.hero__in{position:relative;}
.hero__eyebrow,.hero h1,.hero__lead,.hero__cta,.hero__facts{position:relative;z-index:1;}
.hero__in{
  max-width:var(--wrap);margin:0 auto;padding:clamp(3.5rem,8vw,6rem) var(--gut) clamp(2rem,4vw,3rem);
  display:grid;gap:1.75rem;
}
/* Die Zeile ist keine Beschriftung, sondern die Kernaussage: wofür,
   für wen, wo. Deshalb größer als die Mono-Labels sonst, kräftiger im
   Schnitt und im helleren Terrakotta. Die Sperrung geht dabei zurück —
   bei dieser Größe liest man sonst Buchstaben statt Wörter. */
.hero__eyebrow{
  font-family:var(--mono);
  font-size:clamp(.875rem,1.7vw,1.125rem);
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
  color:#E58A74;
  margin:0;
  /* Auf die Breite der Überschrift eingestellt, damit beide dieselbe
     Kante haben. balance verteilt die Wörter gleichmäßig auf die
     Zeilen, sonst steht „DACH" allein am Schluss. */
  max-width:46ch;
  text-wrap:balance;
}
.hero h1{max-width:17ch;}
.hero h1 .mark{color:#E0806B;}
.hero__lead{color:var(--on-dark-2);max-width:56ch;font-size:clamp(1rem,1.8vw,1.15rem);}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:.35rem;}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:2.25rem;
  border-top:1px solid #2A2C25;padding-top:1.5rem;margin-top:.75rem;
}
.fact{display:grid;gap:.2rem;}
.fact__v{font-family:var(--mono);font-size:1.6rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.fact__l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);}

/* --- Wertstrom-Modul --- */
.vsm{background:#0F1009;border-top:1px solid #2A2C25;}
.vsm__in{max-width:var(--wrap);margin:0 auto;padding:clamp(1.75rem,4vw,2.75rem) var(--gut);display:grid;gap:1.25rem;}
.vsm__head{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-end;justify-content:space-between;}
.vsm__total{display:grid;gap:.25rem;}
.vsm__total .l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-3);}
.vsm__total .v{
  font-family:var(--mono);font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:#E58A74;transition:color .5s ease;
}
.vsm.is-after .vsm__total .v{color:#8FC098;}
.vsm__switch{display:flex;border:1px solid #34362D;}
.vsm__switch button{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem 1rem;background:transparent;border:none;color:var(--on-dark-3);cursor:pointer;
  min-height:40px;
}
.vsm__switch button[aria-pressed="true"]{background:#2A2C24;color:#EFEDE6;}

.track{display:flex;gap:2px;height:76px;align-items:stretch;min-width:0;}
.seg{
  flex-grow:var(--w);flex-basis:0;min-width:3px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:.4rem;
  transition:flex-grow .9s cubic-bezier(.4,0,.2,1);
}
.vsm.is-after .seg{flex-grow:var(--w2,var(--w));}
.seg--va{background:#33362C;border-top:2px solid #6E7263;}
.seg--waste{
  border-top:2px solid #B33A2B;
  background:repeating-linear-gradient(-45deg,rgba(179,58,43,.42) 0 5px,transparent 5px 10px),rgba(179,58,43,.14);
}
.seg__tag{
  font-family:var(--mono);font-size:.625rem;line-height:1.35;letter-spacing:.04em;
  color:#C9CBC0;white-space:nowrap;
}
.seg--waste .seg__tag{color:#E8A08D;}
.vsm.is-after .seg--waste .seg__tag{opacity:0;transition:opacity .3s ease;}
.vsm__legend{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);
}
.vsm__legend span{display:inline-flex;align-items:center;gap:.5rem;}
.vsm__legend i{width:16px;height:9px;display:inline-block;}
.vsm__legend i.a{background:#33362C;border-top:2px solid #6E7263;}
.vsm__legend i.b{background:rgba(179,58,43,.35);border-top:2px solid #B33A2B;}
.vsm__note{font-family:var(--mono);font-size:var(--fs-label);color:var(--on-dark-3);letter-spacing:.04em;margin:0;}

@media (max-width:760px){
  /* Auf schmalen Schirmen sind neun Einzelbeschriftungen unlesbar und würden
     das Band über die Bildschirmbreite hinausdrücken. Die Zahlen stehen
     weiterhin oben (Gesamtdurchlaufzeit) und unten in der Legende. */
  .seg__tag{display:none;}
  .seg{padding:0;}
  .track{height:52px;}
  .hero__facts{gap:1.5rem 2rem;}
  .vsm__legend{gap:.5rem 1.25rem;}
}

/* =============================================================
   2 · Rechner
   ============================================================= */
.calc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.calc__inputs,.calc__out{background:var(--sheet);padding:clamp(1.25rem,3vw,1.9rem);}
.calc__inputs{display:grid;gap:1.15rem;align-content:start;}
.field{display:grid;gap:.4rem;}
.field label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.field input{
  font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums;
  padding:.65rem .75rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  width:100%;
}
.field input:focus{border-color:var(--red);outline:none;}
.field .hint{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:.04em;}
.calc__out{display:grid;gap:1.1rem;align-content:start;background:var(--graphite);color:#EFEDE6;}
.calc__out .l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-3);}
.calc__big{
  font-family:var(--mono);font-size:clamp(1.9rem,5.5vw,2.9rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:#8FC098;
}
.calc__rows{display:grid;gap:.6rem;border-top:1px solid #2A2C25;padding-top:1rem;}
.calc__row{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:var(--fs-small);}
.calc__row span:last-child{font-variant-numeric:tabular-nums;}
.calc__disc{font-family:var(--mono);font-size:var(--fs-label);color:var(--on-dark-3);line-height:1.5;margin:0;}

/* =============================================================
   3 · Fälle
   ============================================================= */
/* Karten wie bei den Einstiegen: Der 1px-Spalt im Raster legt den
   Untergrund frei und erzeugt die Trennlinien, ohne dass jede Karte
   eine eigene Kante braucht. Untereinander über die volle Breite,
   innen zweispaltig — sonst liefe der Fließtext über 1000px und
   verlöre die Zeile. */
.cases{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.case{
  background:var(--sheet);padding:clamp(1.4rem,2.6vw,2rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:1.25rem 2.75rem;align-items:start;
}
.case__meta{display:grid;gap:.6rem;align-content:start;}

/* Kopfzeile der Karte: Zähler links, Sinnbild rechts. Beide tragen
   dieselbe Akzentfarbe, damit das Auge einen festen Einstiegspunkt hat. */
.case__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.case__no{
  font-family:var(--mono);font-size:1.35rem;font-weight:700;line-height:1;
  color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.case__icon{
  flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center;
  background:var(--red-wash);border:1px solid var(--rule-soft);
}
.case__icon svg{
  width:18px;height:18px;fill:none;stroke:var(--red);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.case__tag{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
.case h3{font-size:1.15rem;line-height:1.3;}
.case__lead{font-size:.9375rem;color:var(--ink-2);}

/* In der breiten Spalte hat die Kennzeichnung wieder Platz neben dem
   Absatz statt darüber. Das hält den Textblock schmal genug zum Lesen. */
.case__steps{display:grid;gap:1rem;}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;}
.step__k{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  padding-top:.28rem;white-space:nowrap;width:6.5rem;
}
.step p{font-size:.9375rem;color:var(--ink-2);}

/* Die Kachelreihe sitzt jetzt auf hellem Kartengrund, deshalb sind
   die Felder papierfarben abgesetzt statt umgekehrt. */
/* Die Kachelreihe steht unter beiden Spalten, nicht nur unter dem Text.
   Sonst bliebe links neben ihr der halbe Kartenboden leer, und die
   Kennzahlen sind das, wofür der Leser bis hierher gescrollt ist. */
.kpis{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-soft);border:1px solid var(--rule-soft);
}
.kpi{background:var(--paper);padding:.75rem .85rem;display:grid;gap:.25rem;}
.kpi__v{font-family:var(--mono);font-size:1.2rem;font-weight:700;line-height:1;color:var(--green);font-variant-numeric:tabular-nums;}
/* „Verfügbarkeit" oder „Liefertreue" sind länger als eine Kachelspalte.
   Mit anywhere trennte der Browser irgendwo („LIEFERTRE/UE"); auto setzt
   dagegen an der Silbengrenze und zeigt einen echten Trennstrich.
   break-word bleibt als Notnagel für Wörter ohne Trennstelle. */
.kpi__l{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.35;
  hyphens:auto;overflow-wrap:break-word;
}
.case.is-placeholder .kpi__v{color:var(--ink-3);}

/* Unterhalb dieser Breite bleibt für den Fließtext neben Metaspalte und
   Schrittkennzeichnung zu wenig übrig — beides rückt dann nach oben. */
@media (max-width:1000px){
  .case{grid-template-columns:1fr;gap:1rem;}
  .step{grid-template-columns:1fr;gap:.15rem;}
  .step__k{width:auto;padding-top:0;}
}

/* ---------- Hinweisbalken (nur intern, vor Livegang entfernen) ---------- */
.todo{
  border-left:3px solid var(--red);background:var(--red-wash);
  padding:.9rem 1.15rem;font-family:var(--mono);font-size:.75rem;line-height:1.6;color:var(--ink-2);
}
.todo b{color:var(--red);}

/* =============================================================
   4 · Ablauf
   ============================================================= */
.flow{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.flow__step{
  background:var(--sheet);padding:clamp(1.1rem,2.5vw,1.6rem);
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:0 1.25rem;align-items:start;
}
/* Zähler und Sinnbild teilen sich die schmale linke Spalte. Das Bild
   sitzt unter der Zahl, damit die Nummernfolge beim Scrollen die Führung
   behält und das Sinnbild sie nur begleitet. */
.flow__mark{display:grid;gap:.7rem;justify-items:start;align-content:start;}
.flow__no{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--red);line-height:1;padding-top:.15rem;}
.flow__icon{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;
  border:1px solid var(--rule);background:var(--paper);
}
.flow__icon svg{
  width:17px;height:17px;fill:none;stroke:var(--red);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.flow__body{display:grid;gap:.4rem;}
.flow__body p{font-size:.9375rem;color:var(--ink-2);}
.flow__dur{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;padding-top:.4rem;
}
.flow__out{
  font-family:var(--mono);font-size:var(--fs-label);color:var(--green);letter-spacing:.04em;
  border-top:1px solid var(--rule-soft);padding-top:.5rem;margin-top:.25rem;
}
@media (max-width:700px){
  .flow__step{grid-template-columns:2.5rem minmax(0,1fr);}
  .flow__dur{grid-column:2;padding-top:0;}
}

/* =============================================================
   5 · Person
   ============================================================= */
.bio{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:2.5rem;align-items:start;}
.bio__img{border:1px solid var(--rule);position:relative;}
/* 400px statt des vorherigen 5:6-Verhältnisses (384px). Die Vorlage ist
   750×1000, also 3:4. Bei 320px Spaltenbreite braucht ein 3:4-Ausschnitt
   427px Höhe — bei 400px bleibt der Beschnitt oben und unten also klein,
   und es ist mehr von der Person zu sehen als vorher. */
.bio__img img{width:100%;height:400px;object-fit:cover;filter:grayscale(1) contrast(1.04);display:block;}
/* Die Beschriftung liegt auf dem Bild statt darunter. Der Verlauf läuft
   nach oben aus, damit keine harte Kante quer durchs Bild schneidet;
   unten ist er fast deckend, damit der Text unabhängig davon trägt,
   was auf dem Foto gerade hell ist. */
.bio__cap{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;gap:.25rem;
  padding:2.5rem .8rem .8rem;
  background:linear-gradient(to top,
    rgba(25,26,23,.94) 0%,
    rgba(25,26,23,.88) 55%,
    rgba(25,26,23,0) 100%);
}
.bio__name{
  font-family:var(--mono);font-size:.8125rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#EFEDE6;line-height:1.3;
}
/* „Senior Manager Operational Excellence" sind 37 Zeichen. Bei 12px und
   0,09em Sperrung braucht das 306px, im Bild stehen aber nur rund 270 zur
   Verfügung. Kleiner UND enger gesetzt, weil die Sperrung bei Versalien
   fast ein Fünftel der Breite ausmacht. nowrap hält die Zeile zusammen. */
.bio__role{
  font-family:var(--mono);
  /* Auf schmalen Geräten schrumpft das Bild mit, die Zeile muss also
     mitgehen — sonst stößt sie unten am Rand an. */
  font-size:clamp(.625rem,3vw,.6875rem);
  letter-spacing:.04em;
  text-transform:uppercase;color:#C6C8BC;line-height:1.4;
  white-space:nowrap;
}
.bio__txt{display:grid;gap:1.1rem;}
.cv{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:.5rem;}
.cv__row{
  display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule-soft);
}
.cv__k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-top:.2rem;}
.cv__v{font-size:.9375rem;color:var(--ink-2);}
@media (max-width:820px){
  .bio{grid-template-columns:1fr;}
  .bio__img{max-width:300px;}
  .cv__row{grid-template-columns:1fr;gap:.15rem;}
}

/* =============================================================
   6 · Einstiege
   ============================================================= */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.tier{background:var(--sheet);padding:clamp(1.25rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.9rem;}
.tier--focus{background:var(--graphite);color:#EFEDE6;}
.tier__k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--red);}
.tier--focus .tier__k{color:#E0806B;}
.tier__dur{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);letter-spacing:.05em;}
.tier--focus .tier__dur{color:var(--on-dark-3);}
.tier p{font-size:.9375rem;color:var(--ink-2);}
.tier--focus p{color:var(--on-dark-2);}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.tier li{
  display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.5rem;
  font-size:.875rem;color:var(--ink-2);
}
.tier--focus li{color:#C4C6BA;}
.tier li::before{content:"—";font-family:var(--mono);color:var(--red);}
.tier--focus li::before{color:#E0806B;}
.tier__foot{margin-top:auto;padding-top:.5rem;}

/* =============================================================
   7 · Wissen
   ============================================================= */
.posts{display:grid;gap:0;border-top:1px solid var(--rule);}
.post{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:1rem 1.5rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit;
}
.post:hover{background:var(--sheet);}
.post:hover .post__t{color:var(--red);}
.post__d{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--ink-3);}
.post__t{font-size:1.05rem;font-weight:700;line-height:1.3;transition:color .12s ease;}
.post__x{font-size:.875rem;color:var(--ink-2);margin-top:.25rem;}
.post__r{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
@media (max-width:700px){
  .post{grid-template-columns:1fr;gap:.3rem;}
  .post__r{display:none;}
}

/* =============================================================
   8 · Termin
   ============================================================= */
.booking{background:var(--graphite);color:#EFEDE6;border-top:1px solid var(--rule);}
.booking .rail{color:var(--on-dark-3);}
.booking .rail__no{color:#E0806B;}
.booking h2{color:#EFEDE6;}
.booking .lead{color:var(--on-dark-2);}
.trust{display:flex;flex-wrap:wrap;gap:1.5rem;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);}
.trust span{display:inline-flex;align-items:center;gap:.5rem;}
.trust svg{width:13px;height:13px;stroke:#8FC098;fill:none;stroke-width:2;}
.cal{border:1px solid #2A2C25;background:#15160F;min-height:640px;margin-top:.75rem;}
.booking__alt{font-family:var(--mono);font-size:.75rem;color:var(--on-dark-3);letter-spacing:.03em;}
/* E-Mail und Telefonnummer sind zusammenhängende Angaben — ohne nowrap
   bricht die Nummer mitten durch („+49 176" / „23125944") und liest sich
   wie zwei getrennte Zeilen statt wie Fließtext. */
.booking__alt a{color:#E0806B;text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap;}
.booking__alt a:hover{border-bottom-color:#E0806B;}

/* =============================================================
   Fußzeile
   ============================================================= */
.foot{background:var(--graphite);color:var(--on-dark-3);border-top:1px solid #2A2C25;}
.foot__in{
  max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) var(--gut) 1.5rem;
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:2rem;
}
.foot h4{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;
  color:#EFEDE6;margin-bottom:.9rem;font-weight:500;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;}
.foot a{
  color:var(--on-dark-3);text-decoration:none;font-size:var(--fs-small);
  display:inline-flex;align-items:center;min-height:32px;
}
.foot a:hover{color:#EFEDE6;}
.foot__tag{font-size:.9375rem;max-width:38ch;line-height:1.6;}
.foot__bar{
  max-width:var(--wrap);margin:0 auto;padding:1.25rem var(--gut) 2rem;
  border-top:1px solid #2A2C25;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
}
.foot__bar a{font-size:var(--fs-label);letter-spacing:.1em;min-height:32px;}
.foot__bar div{display:flex;flex-wrap:wrap;gap:0 1.5rem;}
@media (max-width:700px){
  .foot__in{grid-template-columns:1fr;gap:1.75rem;}
}

/* =============================================================
   Artikel (Blog) — Lesetypografie
   ============================================================= */
.artHead{border-bottom:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.75rem,4vw,2.5rem);}
.artHead__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);display:grid;gap:1.1rem;}
.artHead h1{max-width:20ch;}
.artHead .lead{max-width:58ch;}
.artMeta{
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  border-top:1px solid var(--rule-soft);padding-top:1rem;margin-top:.4rem;
}
.artMeta .badge{color:var(--red);border:1px solid var(--red);padding:.25rem .5rem;}

.artBody{padding-block:clamp(2.5rem,6vw,4rem);}
.artBody__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 2.5rem;align-items:start;
}
/* Feste Breite statt ch: die ch-Einheit richtet sich nach der Ziffernbreite
   und liefert bei Georgia rund 77 Zeichen — zu lang zum Lesen. 38rem ≈ 72. */
.prose{min-width:0;max-width:38rem;}
.prose > *{margin-block:0;}
.prose > * + *{margin-top:1.25rem;}
.prose p{max-width:none;color:var(--ink-2);}
.prose > p:first-of-type{font-size:1.15rem;color:var(--ink);line-height:1.55;}
.prose h2{
  font-size:clamp(1.35rem,2.6vw,1.75rem);margin-top:2.75rem;
  padding-top:1.1rem;border-top:1px solid var(--rule);color:var(--ink);
}
.prose h3{font-size:1.0625rem;margin-top:1.9rem;color:var(--ink);}
.prose strong{color:var(--ink);}
/* Das Zeichen hängt links im Anschnitt, der Text bleibt bündig darunter.
   Vorher stand hier ein Grid auf dem <li>. Das trägt nur, solange ein
   Listenpunkt aus reinem Text besteht: Sobald er ein <strong> enthält,
   wird das Element zu einem eigenen Rasterfeld und der Resttext rutscht
   in die 1,35 rem schmale Markerspalte, wo er Wort für Wort umbricht.
   Absolute Positionierung lässt den Punkt dagegen im normalen Textfluss. */
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:.55rem;}
.prose li{position:relative;padding-left:1.85rem;color:var(--ink-2);}
.prose ul > li::before{
  content:"—";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--red);
}
.prose ol{counter-reset:p;}
.prose ol > li{counter-increment:p;}
.prose ol > li::before{
  content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.22rem;
  font-family:var(--mono);font-size:.75rem;color:var(--red);
}
.prose blockquote{
  border-left:3px solid var(--red);background:var(--red-wash);
  padding:1.1rem 1.35rem;margin-block:1.9rem;font-style:italic;color:var(--ink);
}
.prose blockquote p{color:inherit;}
.prose a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--rule);}
.prose a:hover{border-bottom-color:var(--red);}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--sheet);padding:.1em .35em;border:1px solid var(--rule-soft);}
.prose figure{margin:0;}
.prose img{border:1px solid var(--rule);}

/* Tabellenvergleich im Artikel */
.prose .tablewrap{overflow-x:auto;border:1px solid var(--rule);}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem;}
.prose th,.prose td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2);}
.prose thead th{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper);border-bottom:1px solid var(--rule);
}
.prose tbody tr:last-child td{border-bottom:none;}

/* Nummerierte Blöcke (Routinen, Prinzipien, Schritte) */
.pstep{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:0 1.25rem;align-items:start;margin-top:2.25rem;}
.pstep__n{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1;
  color:var(--red);padding-top:.2rem;font-variant-numeric:tabular-nums;
}
.pstep__b > *{margin-block:0;}
.pstep__b > * + *{margin-top:.7rem;}
.pstep__b h2,.pstep__b h3{margin-top:0;padding-top:0;border-top:none;}

/* Karten-Raster im Artikel (z. B. Reifegrad-Dimensionen) */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:1.75rem;}
.pcard{background:var(--sheet);padding:1rem 1.1rem;display:grid;gap:.35rem;}
.pcard strong{font-size:.9375rem;}
.pcard p{font-size:.875rem;margin:0;}

/* Kanji-Auszeichnung (Kaizen-Artikel) */
.kanjiblock{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;}
.kanji{font-family:var(--serif);font-size:clamp(3rem,9vw,4.5rem);line-height:1;color:var(--red);font-weight:700;}
.kanjiblock p{margin:0;}

@media (max-width:820px){
  .artBody__in{grid-template-columns:1fr;gap:1.25rem;}
  .pstep{grid-template-columns:2.25rem minmax(0,1fr);gap:0 .9rem;}
}

/* Artikel-Abschluss: Weiterlesen + Termin */
.artFoot{border-top:1px solid var(--rule);padding-block:clamp(2.5rem,5vw,3.5rem);}
.artFoot__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);display:grid;gap:2rem;}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.related a{background:var(--sheet);padding:1.1rem 1.2rem;text-decoration:none;display:grid;gap:.35rem;}
.related a:hover{background:var(--paper);}
.related a:hover .related__t{color:var(--red);}
.related__d{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;color:var(--ink-3);}
.related__t{font-weight:700;font-size:1rem;line-height:1.3;}

/* =============================================================
   Einblenden beim Scrollen — sehr zurückhaltend
   ============================================================= */
/* Ohne JavaScript bleibt alles sichtbar — der Inhalt darf nie an einem
   Skript hängen. Erst die .js-Klasse (vom Inline-Skript im <head> gesetzt)
   schaltet das Einblenden überhaupt ein. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.js .rise.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;}
}