/* =============================================================
   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;}
/* Nicht in ch: die Einheit richtet sich nach der Ziffernbreite und liefert bei
   Georgia rund 20 % zu viel — aus 66ch wurden gemessene 82 Zeichen je Zeile.
   Feste Werte treffen den Lesekorridor von 65–75 Zeichen zuverlässig. */
p{margin:0;max-width:36em;}
.lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:32em;}

.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);
}

/* Sechs kurze Punkte passen bis hinunter zu ~900px bequem in die Kopfzeile.
   Vorher verschwand die Navigation schon bei 980px — auf einem 1024er-Laptop
   sah der Besucher ein Burger-Menü, obwohl reichlich Platz war. */
@media (max-width:900px){
  .nav{display:none;}
  .burger{display:flex;}
  .head .btn{display:none;}
}
@media (min-width:901px) and (max-width:1010px){
  .nav{gap:1.1rem;}
}

/* =============================================================
   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);
}
/* Die Verschwendungsfelder sind jetzt einzeln abwählbar. Der Zustand hängt
   deshalb am Element selbst (aria-pressed), nicht mehr am Elternzustand. */
.seg--waste[aria-pressed="true"]{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);
  border-left:none;border-right:none;border-bottom:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.seg--waste:hover{
  background:repeating-linear-gradient(-45deg,rgba(179,58,43,.62) 0 5px,transparent 5px 10px),rgba(179,58,43,.22);
}
.seg--waste:focus-visible{outline:2px solid #E8A08D;outline-offset:-3px;}
.seg--waste[aria-pressed="true"]{
  cursor:default;
  background:repeating-linear-gradient(-45deg,rgba(130,172,136,.30) 0 5px,transparent 5px 10px),rgba(130,172,136,.12);
  border-top-color:#6E9B72;
}
.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;}
.seg--waste[aria-pressed="true"] .seg__tag{opacity:0;transition:opacity .3s ease;}
.vsm__hint{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;
  color:#E8A08D;margin:0;
}
.vsm.is-after .vsm__hint{color:#8FC098;}
.vsm__link{color:#E0806B;text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap;}
.vsm__link:hover{border-bottom-color:#E0806B;}
.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;}

/* ---------- Filterleiste über den Fällen ----------
   Ohne JavaScript bleiben Leiste und Schaltfläche per hidden-Attribut
   verborgen und alle sechs Fälle sichtbar. */
.case-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem;}
.case-filter[hidden]{display:none;}
.chip{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .85rem;background:transparent;border:1px solid var(--rule);color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;min-height:38px;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink);}
.chip__n{color:var(--ink-3);font-variant-numeric:tabular-nums;}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet);}
.chip[aria-pressed="true"] .chip__n{color:var(--on-dark-3);}
.cases__more{margin-top:1.25rem;}
.cases__more[hidden]{display:none;}
.case[hidden]{display:none;}

/* 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;
}
/* ---- Ablaufschema als Sektionshintergrund ----
   Vier Prozesskästen, dazwischen je eine Entscheidung mit Ausstieg nach
   rechts. Dieselbe Machart wie das Hallenlayout im Hero, nur auf hellem
   Grund und links angeschlagen statt rechts. Die Zeichnung nutzt die
   volle Sektionshöhe; die Maske blendet sie nach rechts aus, bevor die
   Schrittkarten beginnen. */
.sec--flow{position:relative;}
.sec--flow > .wrap{position:relative;z-index:1;}
.procflow{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:.55;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 12%,transparent 34%);
          mask-image:linear-gradient(to right,#000 0,#000 12%,transparent 34%);
}
.pf__svg{width:100%;height:100%;display:block;}

/* Reine Strichzeichnung, keine gefüllten Kästen — gefüllte Flächen
   würden auf dem Papierton als Blöcke stehen statt als Zeichnung. */
.pf__spine{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-opacity:.5;
  stroke-dasharray:7 7;animation:pfFluss 1.9s linear infinite;}
.pf__head{fill:var(--ink-3);fill-opacity:.5;stroke:none;}
.pf__term{fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-opacity:.6;}
.pf__gate{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-opacity:.5;}
.pf__exit{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-opacity:.3;
  stroke-dasharray:5 5;}
.pf__stop{fill:var(--ink-3);fill-opacity:.3;stroke:none;}
.pf__box rect{fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-opacity:.5;}
.pf__num{fill:var(--ink-3);fill-opacity:.55;stroke:none;font-family:var(--mono);
  font-size:22px;font-weight:700;text-anchor:middle;}
.pf__token{fill:var(--red);stroke:none;transform-box:view-box;transform-origin:0 0;}

/* Laufende Striche auf der Achse: der Fluss selbst. */
@keyframes pfFluss{to{stroke-dashoffset:-14}}

/* Das Werkstück hält an jedem Kasten, statt gleichmäßig durchzurutschen —
   sonst liest es sich als Ladebalken statt als Prozess. Die Werte sind
   die Kastenmitten minus Startpunkt: 140/372/604/836 minus 50. */
.pf__token{animation:pfLauf 16s linear infinite;}
@keyframes pfLauf{
  0%   {transform:translateY(0px);          opacity:0}
  4%   {opacity:1}
  8%,22%  {transform:translateY(var(--y1,0px))}
  33%,47% {transform:translateY(var(--y2,0px))}
  58%,72% {transform:translateY(var(--y3,0px))}
  83%,96% {transform:translateY(var(--y4,0px))}
  99%  {transform:translateY(var(--yE,0px)); opacity:1}
  100% {transform:translateY(var(--yE,0px)); opacity:0}
}

/* Jeder Kasten leuchtet auf, während das Werkstück bei ihm steht.
   Der Versatz steckt als --i im Markup, ein Viertel Umlauf je Schritt. */
.pf__box rect{animation:pfHalt 16s var(--i,0s) linear infinite;}
@keyframes pfHalt{
  0%,4%    {stroke:var(--ink-3);stroke-opacity:.5;}
  8%,22%   {stroke:var(--red);stroke-opacity:1;}
  26%,100% {stroke:var(--ink-3);stroke-opacity:.5;}
}

@media (prefers-reduced-motion:reduce){
  .pf__spine,.pf__token,.pf__box rect{animation:none !important;}
  .pf__token{transform:translateY(var(--y1,0px));}
}
/* Schmal steht kein freier Rand mehr zur Verfügung: Die Zeichnung liefe
   unter den Text. Dort bleibt sie deshalb aus. */
@media (max-width:900px){
  .procflow{display:none;}
}

/* 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);}
/* Das Porträt steht mit festen 320px neben dem Text. Bei 820px Umbruch blieben
   für den Fließtext keine 300px — rund 35 Zeichen je Zeile, halb so breit wie
   lesbar. Der Umbruch gehört dorthin, wo die Textspalte noch 45+ Zeichen trägt. */
@media (max-width:1000px){
  .bio{grid-template-columns:1fr;}
  .bio__img{max-width:300px;}
}
@media (max-width:820px){
  .cv__row{grid-template-columns:1fr;gap:.15rem;}
}

/* =============================================================
   6 · Einstiege
   ============================================================= */
/* Die 1px-Lücken zeigen den Containerhintergrund als Trennlinien. Das trägt
   nur, solange jede Rasterzelle besetzt ist: Mit auto-fit entstand bei drei
   Karten und zwei Spalten eine leere vierte Zelle — ein massiver grauer Block
   neben dem teuersten Angebot. Deshalb feste Stufen, und in der zweispaltigen
   Stufe läuft die dritte Karte über die volle Breite. */
.tiers{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media (min-width:700px) and (max-width:1059px){
  .tiers{grid-template-columns:1fr 1fr;}
  .tiers > :last-child{grid-column:1 / -1;}
}
@media (min-width:1060px){
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.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;}
/* Solange der Kalender nicht geladen ist, trägt der Container den
   Platzhalter und braucht keine feste Mindesthöhe — erst mit dem Embed
   wird sie gebraucht, damit nichts springt (Layoutverschiebung 0). */
.cal{border:1px solid #2A2C25;background:#15160F;margin-top:.75rem;}
.cal.is-loaded{min-height:640px;}
.cal__ph{
  padding:clamp(1.75rem,5vw,3.25rem);
  display:grid;gap:.9rem;justify-items:start;max-width:52em;
}
.cal__ph-t{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-3);margin:0;
}
.cal__ph-x{color:var(--on-dark-2);font-size:.9375rem;margin:0;}
.cal__ph-x a{color:#E0806B;text-decoration:none;border-bottom:1px solid transparent;}
.cal__ph-x a:hover{border-bottom-color:#E0806B;}
.cal__ph-a{font-family:var(--mono);font-size:.75rem;color:var(--on-dark-3);margin:0;}
.cal__ph .btn{margin-top:.35rem;}
.cal__ph .btn[disabled]{opacity:.6;cursor:default;}
.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;}

/* =============================================================
   8 · Häufige Fragen

   <details>/<summary> statt eigener Aufklapp-Logik: funktioniert ohne
   JavaScript, ist von Haus aus tastaturbedienbar und wird von der
   Seitensuche des Browsers gefunden.
   ============================================================= */
.faq{display:grid;border-top:1px solid var(--rule);}
.faq__i{border-bottom:1px solid var(--rule);}
.faq__q{
  cursor:pointer;list-style:none;padding:1.05rem 2.5rem 1.05rem 0;position:relative;
  font-weight:700;font-size:1.05rem;line-height:1.35;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q:hover{color:var(--red);}
.faq__q:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
/* Plus/Minus aus zwei Strichen — kein Icon, keine zusätzliche Datei. */
.faq__q::before,.faq__q::after{
  content:"";position:absolute;right:.35rem;top:50%;
  width:13px;height:1.5px;background:var(--red);transition:transform .16s ease;
}
.faq__q::after{transform:rotate(90deg);}
.faq__i[open] .faq__q::after{transform:rotate(0deg);}
.faq__a{padding:0 2.5rem 1.15rem 0;}
.faq__a p{color:var(--ink-2);font-size:.9375rem;}
@media (prefers-reduced-motion:reduce){
  .faq__q::before,.faq__q::after{transition:none;}
}

/* =============================================================
   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;}
}