/* ══════════════════════════════════════════════════════════════
   Farbkonvention der Bauvorlage:
   Bestand = schwarz · Abbruch = gelb · Neubau = rot
   Genau so ist diese Seite eingefärbt. Rot ist alles, was
   ARC LLM neu hinzufügt. Gelb ist die Arbeit, die wegfällt.
   ══════════════════════════════════════════════════════════════ */
:root{
  --blatt:#E8E7E1;
  --blatt-hell:#F2F1EC;
  --bestand:#22262A;
  --neu:#C8362A;
  --abbruch:#B08A2C;
  --anno:#2F5D7C;
  --linie:#BEBBB1;
  --linie-fein:#D3D0C6;
  --grau:#5E636A;

  /* Schriftgrößen — eine Leiter, sechs Stufen.
     hero > zahl > h2 > lead > body > klein > mono
     Pro Abschnitt darf höchstens ein Element auf --t-zahl stehen. */
  --t-hero:   clamp(2.3rem, 5.4vw, 4rem);
  --t-zahl:   clamp(2.2rem, 4.8vw, 3.3rem);
  --t-h2:     clamp(1.55rem, 3vw, 2.15rem);
  --t-zahl-s: clamp(1.45rem, 3vw, 1.95rem);
  --t-h3:     1.12rem;
  --t-lead:   1.06rem;
  --t-body:   1rem;
  --t-body-s: .95rem;
  --t-klein:  .87rem;
  --t-mikro:  .8rem;
  --t-mono-l: 11.5px;
  --t-mono:   10.5px;
  --t-mono-s: 9.5px;

  /* Abstandsskala — sieben Stufen, alles rastert darauf */
  --s1:  6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 20px;
  --s5: 26px;
  --s6: 34px;
  --s7: 46px;

  /* Textbreiten — drei Stufen */
  --mw-text:  66ch;
  --mw-eng:   52ch;
  --mw-lead:  46ch;
  --mw-box:  660px;

  --display:"Space Grotesk",Helvetica,Arial,sans-serif;
  --body:"Public Sans",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blatt);color:var(--bestand);
  font-family:var(--body);font-weight:300;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.025em}
h1{font-size:var(--t-hero);line-height:1.02}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 15px;max-width:var(--mw-text)}
p:last-child{margin-bottom:0}
strong{font-weight:600}
a{color:var(--anno)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--neu);outline-offset:3px}

.mono{font-family:var(--mono)}
.klein{font-size:var(--t-klein);line-height:1.6;color:#464C52}

/* ── Anlagenmarke ─────────────────────────────────────────── */
.anlage{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--grau);
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
}
.anlage::after{content:"";flex:1;height:1px;background:var(--linie-fein);max-width:180px}

/* ── Kopfleiste ───────────────────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:40;background:rgba(232,231,225,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);
}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;padding-top:8px;padding-bottom:8px}
.marke{font-family:var(--display);font-weight:700;font-size:var(--t-body);letter-spacing:.04em}
.marke-name{white-space:nowrap;color:inherit}
.marke-name > span{color:var(--neu)}
.kopfnav{display:flex;gap:20px;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase}
.kopfnav a{color:var(--grau);text-decoration:none}
.kopfnav a:hover{color:var(--bestand)}
@media (max-width:820px){.kopfnav{display:none}}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding:54px 0 46px;border-bottom:1px solid var(--linie)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:46px;align-items:start}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--neu)}
.hero .lead{font-size:var(--t-lead);max-width:var(--mw-lead)}
.hero-meta{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--linie-fein);
  display:flex;flex-wrap:wrap;gap:6px 26px;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--grau);
}
.hero-meta b{color:var(--bestand);font-weight:500}

/* ── Vorgangsprotokoll ────────────────────────────────────── */
.prot{background:var(--bestand);color:#D9DCD8;padding:0;overflow:hidden}
.prot-kopf{
  display:flex;justify-content:space-between;gap:10px;
  padding:9px 16px;border-bottom:1px solid #3A4046;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:#8B9198;
}
.prot-body{padding:16px;font-family:var(--mono);font-size:12.2px;line-height:1.85;overflow-x:auto}
.prot-body .z{display:block;white-space:pre;opacity:0}
.prot-body .z.an{opacity:1}
.t{color:#71787F}
.r{color:#E0705F}
.ok{color:#7FB093}
.no{color:#E0705F;font-weight:500}
.prot-halt{
  border-top:1px solid #3A4046;margin-top:10px;padding-top:11px;
  color:#E8E7E1;letter-spacing:.05em;
}
.cursor{display:inline-block;width:8px;height:14px;background:var(--neu);vertical-align:-2px;margin-left:5px;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ── Vermerk · Testbetrieb ────────────────────────────────── */
.vermerk{
  background:var(--blatt-hell);
  border-bottom:1px solid var(--linie);
  border-top:3px double var(--neu);
  padding:48px 0;
}
.vermerk-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:46px;align-items:start}
.vermerk h2{max-width:none}

/* ── Abschnitte ───────────────────────────────────────────── */
section{padding:48px 0;border-bottom:1px solid var(--linie)}
.zwei{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:46px;align-items:start}

/* ── Abbruchliste ─────────────────────────────────────────── */
.abbruch{list-style:none;padding:0;margin:24px 0 0;max-width:var(--mw-text)}
.abbruch li{
  padding:14px 0 14px 40px;border-bottom:1px dashed var(--linie);position:relative;font-size:var(--t-body-s);
}
.abbruch li::before{
  content:"⌫";position:absolute;left:6px;top:13px;
  color:var(--abbruch);font-family:var(--mono);font-size:.95rem;
}
.abbruch li b{font-weight:600}
.abbruch li span{display:block;color:var(--grau);font-size:var(--t-klein)}

/* ── Stammbaum ────────────────────────────────────────────── */
.baum{padding-top:8px}
.stamm-hinweis{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--grau);margin:0 0 26px;
}
.reihe{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.stiel{width:1px;height:22px;background:var(--linie);margin:0 auto}
.faecher{border-top:1px solid var(--linie);padding-top:24px;margin-top:0}
.faecher > *{position:relative}
.faecher > *::before{
  content:"";position:absolute;top:-24px;left:50%;width:1px;height:24px;background:var(--linie);
}

.karte{
  background:var(--blatt-hell);border:1px solid var(--linie);
  border-left:3px solid var(--neu);
  padding:10px 13px;display:flex;gap:10px;align-items:center;min-width:210px;
}
.karte.mensch{border-left-color:var(--bestand);background:#DEDCD4}
.karte.pruef{border-left-color:var(--anno)}

/* Foto-Platzhalter — zum Ersetzen siehe Kommentar unten */
.foto{
  width:42px;height:42px;flex:none;
  border:1px dashed var(--linie);background:#DDDBD3;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--grau);
  object-fit:cover;
}
.karte.mensch .foto{border-style:solid;border-color:var(--bestand)}
.wer b{display:block;font-family:var(--display);font-weight:500;font-size:var(--t-body-s);line-height:1.25}
.wer span{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);margin-top:3px;
}

.abteilungen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:0}
.abt > h3{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bestand);background:var(--blatt-hell);border:1px solid var(--linie);
  padding:8px 10px;text-align:center;margin:0 0 12px;
}
.abt .karte{min-width:0;width:100%;margin-bottom:8px;padding:9px 11px}
.abt .foto{width:36px;height:36px;font-size:var(--t-mono)}
.abt .wer b{font-size:var(--t-klein)}

.quer{margin-top:40px;padding-top:26px;border-top:1px solid var(--linie)}
.quer-kopf{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--grau);margin-bottom:18px;
}
.quer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}

/* ── Ablauf ───────────────────────────────────────────────── */
.phasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:26px}
.phase{border-top:2px solid var(--neu);padding-top:14px}
.phase .dauer{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--neu);display:block;margin-bottom:7px;
}
.phase p{font-size:var(--t-body-s);margin:6px 0 0}

/* ── Grenzen ──────────────────────────────────────────────── */
.grenzen{list-style:none;padding:0;margin:22px 0 0;max-width:var(--mw-text)}
.grenzen li{padding:13px 0 13px 32px;border-bottom:1px solid var(--linie-fein);position:relative;font-size:var(--t-body-s)}
.grenzen li::before{content:"×";position:absolute;left:7px;top:11px;color:var(--neu);font-family:var(--mono);font-size:var(--t-h3)}

.portraet{
  display:block;width:100%;max-width:360px;
  aspect-ratio:4 / 5;height:auto;
  object-fit:cover;object-position:50% 18%;
  margin-top:24px;border:1px solid var(--linie);
  filter:grayscale(1) contrast(1.06);
}

/* ── Konditionen ──────────────────────────────────────────── */
.kondi{border:2px solid var(--bestand);background:var(--blatt-hell);padding:var(--s5);max-width:var(--mw-box)}
.preis{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:2px 0 18px}
.preis .neu{font-family:var(--display);font-weight:700;font-size:var(--t-zahl);line-height:.92}
.preis .alt{font-family:var(--mono);font-size:var(--t-body);text-decoration:line-through;color:var(--grau)}
.preis .netto{font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.13em;text-transform:uppercase;color:var(--grau)}
.plaetze{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.platz{
  width:26px;height:32px;border:1px solid var(--bestand);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--t-mono);
}
.cta{
  display:inline-block;background:var(--neu);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);
  padding:14px 32px;border:2px solid var(--neu);
  transition:background .15s ease,color .15s ease;
}
.cta:hover{background:var(--bestand);border-color:var(--bestand)}

/* ── Schriftfeld ──────────────────────────────────────────── */
.schriftfeld{padding:46px 0 60px}
.sf{border:2px solid var(--bestand);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sf div{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:11px 13px}
.sf div:nth-child(4n){border-right:none}
.sf div:nth-last-child(-n+4){border-bottom:none}
.sf dt,.sf .f{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--grau);display:block;margin-bottom:4px;
}
.sf .v{font-size:var(--t-klein);line-height:1.4;display:block}
.sf .v a{text-decoration:none}
.sf-gross{grid-column:span 2}
.sf-gross .v{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:.02em}
.sf-gross .v span{color:var(--neu)}

/* ── Responsiv ────────────────────────────────────────────── */
@media (max-width:1000px){
  .abteilungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faecher{border-top:none;padding-top:0}
  .faecher > *::before{display:none}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .zwei,.vermerk-grid{grid-template-columns:1fr;gap:26px}
  .vermerk h2{max-width:none}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:44px 0}
  .abteilungen{grid-template-columns:1fr}
  .sf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf div:nth-child(4n){border-right:1px solid var(--linie)}
  .sf div:nth-child(2n){border-right:none}
  .sf-gross{grid-column:span 2}
  .kondi{padding:var(--s4)}
  .reihe{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .cursor{animation:none}
  .prot-body .z{opacity:1}
}

/* ══════════════════════════════════════════════════════════
   Fachbeiträge und Newsletter
   ══════════════════════════════════════════════════════════ */

/* ── Beitragsindex ────────────────────────────────────────── */
.beitraege{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--linie)}
.beitrag{border-bottom:1px solid var(--linie-fein)}
.beitrag a{
  display:grid;grid-template-columns:112px minmax(0,1fr) 96px;gap:20px;align-items:baseline;
  padding:19px 4px;text-decoration:none;color:inherit;
  transition:background .14s ease,padding .14s ease;
}
.beitrag a:hover,.beitrag a:focus-visible{background:var(--blatt-hell);padding-left:12px}
.beitrag .datum{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--grau);
}
.beitrag h3{margin:0 0 5px;font-weight:500}
.beitrag p{margin:0;font-size:var(--t-klein);color:#4C5257;max-width:var(--mw-text)}
.beitrag .laenge{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--grau);text-align:right;
}
.beitrag.folgt a{cursor:default;pointer-events:none;opacity:.52}
.beitrag.folgt .laenge{color:var(--grau)}

/* ── Newsletter ───────────────────────────────────────────── */
.brief{background:var(--bestand);color:#DCDFDB;padding:48px 0}
.brief h2{color:#fff}
.brief p{color:#B4BAB6}
.brief-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:start}
.brief .anlage{color:#E0705F}
.brief .anlage::after{background:#3A4046}

.formular{display:flex;flex-direction:column;gap:14px;max-width:440px}
.feld label{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;
  text-transform:uppercase;color:#8B9198;margin-bottom:6px;
}
.feld input[type=email],.feld input[type=text]{
  width:100%;background:#2C3237;border:1px solid #454C52;color:#F0EFEA;
  font-family:var(--mono);font-size:16px;padding:12px 13px;
}
.feld input::placeholder{color:#6E767D}
.feld input:focus{outline:2px solid var(--neu);outline-offset:1px;border-color:var(--neu)}

.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-mikro);line-height:1.5;color:#A8AEAA}
.zustimmung input{margin-top:3px;accent-color:var(--neu);width:16px;height:16px;flex:none}
.zustimmung a{color:#9BB8CC}

.brief button{
  align-self:flex-start;background:var(--neu);color:#fff;border:2px solid var(--neu);
  font-family:var(--display);font-weight:700;font-size:var(--t-body);
  padding:12px 28px;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.brief button:hover{background:#fff;color:var(--bestand);border-color:#fff}
.brief .klein{color:#868D89}

/* ── Beitragsseite ────────────────────────────────────────── */
/* Beitragsseiten laufen in einer eigenen Lesespalte —
   Kopf und Text stehen dadurch auf derselben Breite. */
.artikel{
  max-width:800px;margin:0 auto;
  padding:var(--s7) var(--s5) 56px;
}
.artikel-kopf{
  border-bottom:1px solid var(--linie);
  padding-bottom:var(--s5);margin-bottom:var(--s6);
}
.artikel-kopf h1{font-size:var(--t-h2);line-height:1.12;margin-bottom:var(--s3)}
.artikel-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau);
}
.artikel-body{max-width:none}
.artikel-body h2{font-size:var(--t-h3);margin:var(--s6) 0 var(--s3);letter-spacing:-.01em}
.artikel-body h3{
  margin:var(--s5) 0 var(--s2);
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--neu);
}
.artikel-body p{max-width:none;margin-bottom:var(--s3)}

/* Aufzählungen wie auf der Startseite — keine Browserpunkte */
.artikel-body ul{list-style:none;padding:0;margin:var(--s3) 0 var(--s4)}
.artikel-body li{
  position:relative;padding:var(--s2) 0 var(--s2) var(--s4);
  margin:0;border-bottom:1px solid var(--linie-fein);line-height:1.55;
}
.artikel-body li:last-child{border-bottom:none}
.artikel-body li::before{
  content:"";position:absolute;left:0;top:1.05em;
  width:9px;height:1px;background:var(--neu);
}

.artikel-body blockquote{
  margin:var(--s5) 0;padding:var(--s3) 0 var(--s3) var(--s4);
  border-left:3px solid var(--neu);
  font-family:var(--display);font-weight:500;font-size:var(--t-lead);
  line-height:1.45;letter-spacing:-.01em;
}
.zurueck{
  display:inline-block;margin-bottom:var(--s5);text-decoration:none;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;
}

/* Quellen am Ende: kleiner gesetzt, ohne Strich davor */
.artikel-body .quellen li::before{display:none}
.artikel-body .quellen li{padding-left:var(--s4)}

@media (max-width:860px){
  .brief-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .beitrag a{grid-template-columns:1fr;gap:6px;padding:16px 4px}
  .beitrag .laenge{text-align:left}
}

/* ══════════════════════════════════════════════════════════
   Impulssteuerung im Stammbaum
   ══════════════════════════════════════════════════════════ */
.impulsblock{
  margin:var(--s6) 0 var(--s5);padding:var(--s4);
  background:#FBFAF7;border:1px solid var(--linie);border-left:3px solid var(--neu);
}
.impuls-frage{
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;
  color:var(--bestand);margin:0 0 6px;
}
.impuls-frage .cursor{
  width:9px;height:17px;vertical-align:-3px;margin-left:7px;
}
.impuls-lead{font-size:var(--t-body-s);color:#4C5257;margin:0 0 16px;max-width:var(--mw-eng)}
.impuls-leiste{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.impuls{
  font-family:var(--mono);font-size:var(--t-mono-l);letter-spacing:.02em;
  background:var(--blatt-hell);border:1px solid var(--linie);color:var(--bestand);
  padding:9px 14px;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.impuls::before{content:"› ";color:var(--grau)}
.impuls:hover{border-color:var(--neu)}
.impuls.laeuft{background:var(--bestand);border-color:var(--bestand);color:var(--blatt)}
.impuls.laeuft::before{color:#E0705F}

.impuls-status{
  font-family:var(--mono);font-size:var(--t-mono-l);line-height:1.5;color:var(--bestand);
  border-left:3px solid var(--linie);padding:2px 0 2px var(--s3);
  min-height:2.6em;margin:0;transition:border-color .18s ease;
}
.impuls-status.aktiv{border-left-color:var(--neu)}
.impuls-status .schritt{color:var(--grau)}
.impuls-status:empty::before{
  content:"Noch kein Impuls. Wählen Sie oben einen aus.";color:var(--grau);
}

/* Kartenzustände während eines Laufs */
.karte{transition:background .22s ease,border-color .22s ease,opacity .22s ease,transform .22s ease,box-shadow .22s ease}
.baum.laeuft .karte{opacity:.3}
.baum.laeuft .karte.getan{opacity:.66}
.baum.laeuft .karte.aktiv{
  opacity:1;background:#F8E6E2;border-color:var(--neu);
  box-shadow:0 0 0 2px rgba(200,54,42,.16);transform:translateY(-2px);
}
.baum.laeuft .karte.aktiv.mensch{background:#E3E0D6;border-color:var(--bestand);box-shadow:0 0 0 2px rgba(34,38,42,.14)}

@media (prefers-reduced-motion:reduce){
  .karte{transition:none}
  .baum.laeuft .karte.aktiv{transform:none}
}

/* ── Rollenzeile unter dem Namen im Verfasser-Block ───────── */
.rolle-zeile{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--neu);margin:8px 0 0;
}
.vermerk .portraet{margin-top:22px;max-width:100%}

/* ══════════════════════════════════════════════════════════
   Nachschärfung: CTA im Hero, Maßkette, Klarstellung,
   aufklappbarer Stammbaum
   ══════════════════════════════════════════════════════════ */

/* ── CTA im Hero ──────────────────────────────────────────── */
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.hero-cta .cta{font-size:var(--t-body);padding:12px 26px}
.hero-cta-not{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);
}

/* ── Klarstellung über der Besetzung ──────────────────────── */
.klarstellung{
  margin:var(--s5) 0 var(--s1);padding:var(--s4);
  border-left:3px solid var(--neu);background:var(--blatt-hell);
}
.klarstellung p{margin:0 0 10px;font-size:var(--t-body-s)}
.klarstellung p:last-child{margin:0;color:#4C5257;font-size:var(--t-klein)}

/* ── Stammbaum aufklappbar ────────────────────────────────── */
.baum-mehr{display:none}

@media (max-width:1000px){
  .baum{position:relative}
  .baum:not(.offen){max-height:560px;overflow:hidden}
  .baum:not(.offen)::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
    background:linear-gradient(to bottom,rgba(232,231,225,0),var(--blatt));
    pointer-events:none;
  }
  .baum-mehr{
    display:block;width:100%;margin-top:16px;
    font-family:var(--mono);font-size:var(--t-mono-l);letter-spacing:.1em;text-transform:uppercase;
    background:var(--blatt-hell);border:1px solid var(--bestand);color:var(--bestand);
    padding:13px;cursor:pointer;
  }
  .baum-mehr::before{content:"+ ";color:var(--neu)}
  .baum.offen + .baum-mehr::before{content:"– "}
}

@media (max-width:640px){
  .hero-cta{gap:10px}
  .hero-cta .cta{width:100%;text-align:center}
  .baum:not(.offen){max-height:440px}
}

/* ── Kennzahl ─────────────────────────────────────────────── */
.kennzahl{margin:34px 0 0;max-width:none}
.kz-kopf{display:flex;align-items:baseline;gap:10px}
.kz-zahl{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-zahl);line-height:.9;
  letter-spacing:-.045em;color:var(--neu);
}
.kz-einheit{display:none}
.kz-gross{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-h2);line-height:1.05;
  letter-spacing:-.045em;text-transform:uppercase;
  color:var(--bestand);margin:6px 0 0;
}
.kz-satz{
  font-size:var(--t-lead);margin:14px 0 24px;max-width:var(--mw-lead);color:var(--bestand);
}
.kz-balken{display:flex;height:10px;overflow:hidden;gap:3px}
.kz-bleibt{flex:8;background:var(--neu)}
.kz-frei{flex:12;background:var(--linie)}
.kz-legende{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);
}
.kz-legende span{display:flex;align-items:center;gap:10px}
.kz-punkt{width:9px;height:9px;display:inline-block;flex:none}
.kz-p-bleibt{background:var(--neu)}
.kz-p-frei{background:var(--linie)}
.kennzahl figcaption{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--linie-fein);
  font-size:var(--t-klein);line-height:1.55;color:var(--grau);max-width:var(--mw-text);
}

/* ══════════════════════════════════════════════════════════
   Farbzonen
   Papier  = lesen
   Hell    = ansehen und ausprobieren
   Dunkel  = hier wird entschieden
   ══════════════════════════════════════════════════════════ */

/* ── Helle Zone ───────────────────────────────────────────── */
.zone-hell{background:var(--blatt-hell)}
.zone-hell .karte,
.zone-hell .abt > h3,
.zone-hell .klarstellung,
.zone-hell .impuls{background:#FBFAF7}
.zone-hell .baum:not(.offen)::after{
  background:linear-gradient(to bottom,rgba(242,241,236,0),var(--blatt-hell));
}
.zone-hell .baum-mehr{background:#FBFAF7}
.zone-hell .baum.laeuft .karte.aktiv{background:#F8E6E2}
.zone-hell .baum.laeuft .karte.aktiv.mensch{background:#E9E6DC}

/* ── Dunkle Zone ──────────────────────────────────────────── */
.zone-dunkel{
  background:var(--bestand);color:#DCDFDB;
  border-bottom:none;border-top:1px solid var(--bestand);
}
.zone-dunkel h2,.zone-dunkel h3{color:#fff}
.zone-dunkel p{color:#B4BAB6}
.zone-dunkel strong{color:#fff;font-weight:600}
.zone-dunkel .anlage{color:#E0705F}
.zone-dunkel .anlage::after{background:#3A4046}
.zone-dunkel .grenzen li{border-bottom-color:rgba(255,255,255,.11)}
.zone-dunkel .grenzen li::before{color:#E0705F}
.zone-dunkel .klein{color:#8B928D}
.zone-dunkel a{color:#9BB8CC}

/* Übergang: kein doppelter Trennstrich vor der dunklen Zone */
section:has(+ .zone-dunkel){border-bottom:none}

/* ── Aufmerksamkeit für die Impulsleiste ──────────────────── */
.impuls.locken{
  animation:locken 2.4s ease-in-out infinite;
  border-color:var(--neu);
}
@keyframes locken{
  0%,100% { box-shadow:0 0 0 0 rgba(200,54,42,0) }
  35%     { box-shadow:0 0 0 5px rgba(200,54,42,.14) }
  70%     { box-shadow:0 0 0 0 rgba(200,54,42,0) }
}
.impuls.locken::after{
  content:"←";margin-left:9px;color:var(--neu);
  display:inline-block;animation:tippen 2.4s ease-in-out infinite;
}
@keyframes tippen{
  0%,100% { transform:translateX(0);opacity:.55 }
  35%     { transform:translateX(-4px);opacity:1 }
}
.zone-hell .impulsblock{background:#FDFDFB}

@media (prefers-reduced-motion:reduce){
  .impuls.locken{animation:none;box-shadow:0 0 0 3px rgba(200,54,42,.12)}
  .impuls.locken::after{animation:none;opacity:1}
  .impuls-frage .cursor{animation:none}
}

/* ── Rechner in den Konditionen ───────────────────────────── */
.rechner{
  margin-top:var(--s5);max-width:var(--mw-box);
  border:1px solid var(--linie);background:var(--blatt-hell);
  padding:var(--s5);
}
.rechner-kopf{
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);
  letter-spacing:-.02em;margin:0 0 18px;
}
.rechner-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rechner-felder label{display:block}
.rechner-felder span{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau);margin-bottom:6px;line-height:1.4;min-height:2.6em;
}
.rechner-felder input{
  width:100%;background:#FDFDFB;border:1px solid var(--linie);color:var(--bestand);
  font-family:var(--mono);font-size:16px;padding:10px 11px;
}
.rechner-felder input:focus{outline:2px solid var(--neu);outline-offset:1px;border-color:var(--neu)}

.rechner-ergebnis{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--linie);
}
.re-block-weit{grid-column:1 / -1}
.re-zahl{
  display:block;font-family:var(--display);font-weight:700;
  font-size:var(--t-zahl-s);line-height:1;letter-spacing:-.035em;color:var(--bestand);
}
.re-zahl-klein{font-size:var(--t-h3)}
.re-label{
  display:block;margin-top:7px;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--grau);line-height:1.5;
}
.rechner-fuss{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--linie-fein);
  font-size:var(--t-mikro);line-height:1.55;color:var(--grau);max-width:none;
}

@media (max-width:640px){
  .rechner{padding:var(--s3)}
  .rechner-felder{grid-template-columns:1fr;gap:10px}
  .rechner-felder span{min-height:0}
  .rechner-ergebnis{grid-template-columns:1fr;gap:14px}
}

/* ══════════════════════════════════════════════════════════
   Profilbilder der Rollen — runde Chat-Avatare,
   Farbe je Zuständigkeitsbereich
   ══════════════════════════════════════════════════════════ */
.karte[data-team="chef"]      { --team:#3A4247 }
.karte[data-team="fuehrung"]  { --team:#2F5D7C }
.karte[data-team="leistung"]  { --team:#3F6B57 }
.karte[data-team="vertrieb"]  { --team:#8A5A2B }
.karte[data-team="marketing"] { --team:#6B5079 }
.karte[data-team="kunde"]     { --team:#2D6E73 }
.karte[data-team="betrieb"]   { --team:#5E6470 }
.karte[data-team="kontrolle"] { --team:#A8503A }
.karte[data-team="system"]    { --team:#7A7568 }

.karte[data-team]{border-left-color:var(--team)}

.karte[data-team] .foto{
  border:none;border-radius:50%;
  background:var(--team);color:#fff;
  font-family:var(--mono);font-weight:500;font-size:var(--t-mono-l);letter-spacing:.02em;
  text-transform:uppercase;
}
.abt .karte[data-team] .foto{font-size:var(--t-mono)}

/* Ein echtes Foto ersetzt den Kreis, bleibt aber rund */
.karte[data-team] img.foto{background:none;object-fit:cover;border:1px solid var(--linie)}

/* Ihre eigene Karte bekommt einen Ring statt einer Sonderfarbe */
.karte[data-team="chef"] .foto{box-shadow:0 0 0 2px var(--blatt),0 0 0 3.5px var(--team)}
.zone-hell .karte[data-team="chef"] .foto{box-shadow:0 0 0 2px #FBFAF7,0 0 0 3.5px var(--team)}

/* Legende der Bereiche */
.team-legende{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 22px;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);
}
.team-legende span{display:flex;align-items:center;gap:6px}
.team-legende i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}

/* ── Gegenüberstellung Kosten und Nutzen ──────────────────── */
.verhaeltnis{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--linie);
}
.vh-zeile{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label wert" "spur spur" "not not";
  gap:6px 14px;align-items:baseline;margin-bottom:20px;
}
.vh-label{
  grid-area:label;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);
}
.vh-wert{
  grid-area:wert;font-family:var(--display);font-weight:700;
  font-size:var(--t-zahl-s);line-height:1;letter-spacing:-.035em;
}
.vh-kosten{color:var(--grau)}
.vh-nutzen{color:var(--neu)}
.vh-spur{
  grid-area:spur;display:block;height:9px;background:var(--linie-fein);margin-top:6px;
}
.vh-balken{display:block;height:100%;transition:width .25s ease}
.vh-b-kosten{background:var(--grau)}
.vh-b-nutzen{background:var(--neu)}
.vh-not{
  grid-area:not;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);margin-top:2px;
}
.vh-fazit{
  margin:6px 0 0;font-family:var(--display);font-weight:700;
  font-size:var(--t-h3);letter-spacing:-.02em;color:var(--bestand);
}

@media (prefers-reduced-motion:reduce){ .vh-balken{transition:none} }

/* ── Ausgang unter dem Rechner ────────────────────────────── */
.rechner-cta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--linie);
}
.rechner-cta-not{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);
}
@media (max-width:640px){
  .rechner-cta .cta{width:100%;text-align:center}
}

/* ── Zehn-Wochen-Block in den Konditionen ─────────────────── */
.zehn-wochen{margin-top:34px;padding-top:26px;border-top:1px solid var(--linie)}
.zw-kopf{
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);
  letter-spacing:-.02em;margin:0 0 4px;
}
.zehn-wochen .phasen{margin-top:20px}

/* ── Untertitel innerhalb der dunklen Zone ────────────────── */
.unter-titel{
  margin:34px 0 12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  font-size:var(--t-h3);
}

/* ── Zusatzhinweis auf den Impulsknöpfen ──────────────────── */
.impuls em{
  display:block;font-style:normal;margin-top:4px;
  font-size:var(--t-mono-s);letter-spacing:.12em;text-transform:uppercase;color:var(--grau);
}
.impuls-haupt em{color:var(--neu)}
.impuls.laeuft em{color:rgba(232,231,225,.6)}

/* ══════════════════════════════════════════════════════════
   Handy-Optimierung
   ══════════════════════════════════════════════════════════ */

/* Nichts darf seitlich überstehen */
html,body{max-width:100%}
img,svg{max-width:100%}

/* Protokoll: Schrift skaliert mit, damit keine Zeile umbricht
   oder seitlich wegläuft. 58 Zeichen ist die längste Zeile. */
.prot-body{
  font-size:clamp(8.4px, calc((100vw - 46px) / 35), 12.2px);
}

@media (min-width:861px){
  .prot-body{font-size:12.2px}
}

/* Kopfleiste: statt versteckter Navigation ein Weg zum Angebot */
.kopf-cta{display:none}
@media (max-width:820px){
  .kopfnav{display:none}
  .kopf-cta{
    display:inline-block;text-decoration:none;
    font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;
    text-transform:uppercase;color:var(--blatt);background:var(--neu);
    padding:8px 14px;
  }
}

@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 34px}
  section{padding:36px 0}
  .vermerk{padding:36px 0}

  /* Impulsknöpfe als volle Zeilen — größere Tippflächen */
  .impuls-leiste{flex-direction:column;gap:6px}
  .impuls{width:100%;text-align:left;padding:12px 14px;font-size:var(--t-mono-l)}
  .impuls em{font-size:var(--t-mono)}
  .impulsblock{padding:var(--s3)}
  .impuls-frage{font-size:var(--t-h3)}

  /* Zehn Platzhalter passen in eine Zeile */
  .platz{width:23px;height:29px;font-size:var(--t-mono-s)}
  .plaetze{gap:6px}

  /* Bereichslegende kompakter */
  .team-legende{gap:6px 14px;font-size:var(--t-mono-s)}

  /* Blogliste: Datum und Dauer nebeneinander statt untereinander */
  .beitrag a{padding:15px 2px}

  /* Kennzahl */
  .kz-gross{font-size:var(--t-h2)}
  .kz-satz{font-size:var(--t-body)}

  /* Rechner: Ergebniszahlen etwas kleiner, damit nichts umbricht */
  .vh-wert{font-size:var(--t-zahl-s)}
  .re-zahl{font-size:var(--t-zahl-s)}

  /* Porträt zentriert über dem Text */
  .vermerk .portraet{max-width:230px}
}

@media (max-width:480px){
  /* Schriftfeld einspaltig — zweispaltig wird es zu eng */
  .sf{grid-template-columns:1fr}
  .sf div{border-right:none!important}
  .sf div:last-child{border-bottom:none}
  .sf-gross{grid-column:span 1}

  .fuss{flex-direction:column;gap:10px}
  .artikel-meta{gap:6px 14px}
}

/* Tippflächen und Antippen */
@media (hover:none){
  a,button{-webkit-tap-highlight-color:rgba(200,54,42,.18)}
  .karte{transform:none!important}
}

/* ── Markenzusatz "by Architektur Nolte" ──────────────────── */
.marke{display:block;line-height:1.1}
.marke-zusatz{
  display:block;
  font-family:var(--mono);font-style:normal;font-weight:400;
  font-size:var(--t-mono-s);letter-spacing:.15em;text-transform:uppercase;color:var(--grau);
}
.sf-zusatz{
  display:block;margin-top:5px;
  font-family:var(--mono);font-style:normal;font-weight:400;
  font-size:var(--t-mono-s);letter-spacing:.13em;text-transform:uppercase;color:var(--grau);
}
@media (max-width:520px){
  .marke-zusatz{font-size:var(--t-mono-s);letter-spacing:.12em}
}

/* ── Kennzahl: Zahl, Schlagzeile, Erklärung, Nervenmotiv ──── */
.kz-zahl{margin:0}
.kz-gross{
  text-transform:uppercase;margin:4px 0 0;
}
.kz-plus{
  margin:var(--s3) 0 0;padding-left:var(--s3);border-left:3px solid var(--abbruch);
  font-size:var(--t-klein);line-height:1.6;color:#4C5257;max-width:var(--mw-text);
}

/* Zwei Zeilen unter dem Namen im Verfasser-Block */
.rolle-zeile{line-height:1.6}

/* ── Startbedingung unter dem Ablauf ──────────────────────── */
.startbedingung{
  margin-top:var(--s5);padding:var(--s4);
  background:var(--blatt-hell);border-left:3px solid var(--neu);
}
.startbedingung p{margin:0 0 8px;font-size:var(--t-body-s)}
.startbedingung p:last-child{margin:0}

/* ── Leistungsumfang in den Konditionen ───────────────────── */
.umfang{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  margin:20px 0 0;padding-top:20px;border-top:1px solid var(--linie);
}
.umfang-kopf{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin:0 0 12px;
}
.umfang ul{list-style:none;margin:0;padding:0}
.umfang li{
  padding:8px 0 8px 20px;position:relative;
  font-size:var(--t-body-s);line-height:1.5;border-bottom:1px solid var(--linie-fein);
}
.umfang li:last-child{border-bottom:none}
.umfang li::before{
  content:"✓";position:absolute;left:0;top:8px;
  color:var(--neu);font-family:var(--mono);font-size:var(--t-klein);
}
.umfang li strong{font-weight:600}

@media (max-width:640px){
  .umfang{grid-template-columns:1fr;gap:20px}
}

/* ══════════════════════════════════════════════════════════
   Terminvereinbarung, Freebie, Quellen
   ══════════════════════════════════════════════════════════ */

/* ── Freebie ──────────────────────────────────────────────── */
.freebie{
  background:var(--bestand);color:#DCDFDB;padding:48px 0;
  border-top:1px solid var(--bestand);
}
.freebie h2{color:#fff}
.freebie p{color:#B4BAB6}
.freebie .anlage{color:#E0705F}
.freebie .anlage::after{background:#3A4046}
.freebie .klein{color:#868D89}
.freebie a{color:#9BB8CC}
.freebie-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:start}
.freebie-liste{list-style:none;padding:0;margin:20px 0 0;max-width:var(--mw-eng)}
.freebie-liste li{
  padding:9px 0 9px 24px;position:relative;font-size:var(--t-body-s);
  border-bottom:1px solid rgba(255,255,255,.1);color:#C6CCC8;
}
.freebie-liste li:last-child{border-bottom:none}
.freebie-liste li::before{
  content:"→";position:absolute;left:0;top:9px;color:#E0705F;font-family:var(--mono);
}
.freebie-form{
  background:#2C3237;border:1px solid #454C52;padding:var(--s4);max-width:none;
}
.freebie-form-kopf{
  font-family:var(--display);font-weight:700;font-size:var(--t-h3);
  color:#fff!important;margin:0 0 16px;
}

/* ── Zwischen-CTA ─────────────────────────────────────────── */
.zwischen-cta{
  background:var(--blatt-hell);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);padding:var(--s5) 0;
}
.zwischen-cta .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.zwischen-cta p{margin:0;font-size:var(--t-lead);max-width:var(--mw-eng)}

/* ── CTA am Ende jedes Beitrags ───────────────────────────── */
.artikel-cta{
  background:var(--blatt-hell);border-top:1px solid var(--linie);padding:48px 0;
}
.artikel-cta h2{margin-bottom:12px}
.artikel-cta p{margin-bottom:22px;max-width:var(--mw-text)}

/* ── Fester Balken auf schmalen Bildschirmen ──────────────── */
.fixleiste{display:none}
@media (max-width:820px){
  .fixleiste{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--bestand);border-top:1px solid #454C52;
  }
  .fixleiste-text{
    font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
    text-transform:uppercase;color:#B4BAB6;
  }
  .fixleiste-cta{
    background:var(--neu);color:#fff;text-decoration:none;
    font-family:var(--display);font-weight:700;font-size:var(--t-body-s);
    padding:10px 18px;white-space:nowrap;
  }
  body{padding-bottom:64px}
}

/* ── Quellenliste in Beiträgen ────────────────────────────── */
.quellen{list-style:none;padding:0;margin:16px 0 0}
.quellen li{
  padding:11px 0 11px 20px;position:relative;
  font-size:var(--t-klein);line-height:1.55;color:#4C5257;
  border-bottom:1px solid var(--linie-fein);
}
.quellen li:last-child{border-bottom:none}
.quellen li::before{
  content:"·";position:absolute;left:6px;top:9px;color:var(--grau);font-family:var(--mono);
}

@media (max-width:860px){
  .freebie-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .zwischen-cta .wrap{flex-direction:column;align-items:stretch;gap:14px}
  .zwischen-cta .cta,.artikel-cta .cta{width:100%;text-align:center}
}

/* ══════════════════════════════════════════════════════════
   Lesbarkeit und Leerraum
   Reine Textabschnitte laufen einspaltig mit begrenzter
   Zeilenlänge — das Zweispaltenraster bleibt nur dort,
   wo links tatsächlich etwas steht.
   ══════════════════════════════════════════════════════════ */
.zwei.eng{
  display:block;max-width:760px;
}
.zwei.eng > div:first-child{margin-bottom:18px}
.zwei.eng h2{max-width:22ch}
.zwei.eng p,
.zwei.eng .grenzen,
.zwei.eng .abbruch{max-width:var(--mw-text)}

/* Kontrast der kleinen Auszeichnungen */
.beitrag p{color:#464C52}
.kz-plus{color:#464C52}
.klarstellung p:last-child{color:#464C52}
.rechner-fuss{color:#4C5257}
.kennzahl figcaption{color:#4C5257}
.masskette figcaption{color:#4C5257}
.quellen li{color:#464C52}

/* ── Zeitfresser: zwei Spalten zu je drei ─────────────────── */
.abbruch{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px;max-width:none;
}
.abbruch li{
  padding:14px 0 14px 30px;
  border-bottom:1px dashed var(--linie);
}
.abbruch li:nth-last-child(-n+2){border-bottom:none}
.abbruch li b{display:block;line-height:1.3;margin-bottom:3px}
.abbruch li span{margin-top:2px}

/* In der einspaltigen Ausgangslage darf die Liste breiter laufen */
.zwei.eng .abbruch{max-width:none}

@media (max-width:700px){
  .abbruch{grid-template-columns:1fr;gap:0}
  .abbruch li:nth-last-child(-n+2){border-bottom:1px dashed var(--linie)}
  .abbruch li:last-child{border-bottom:none}
}

/* ── Verfasser: Überschrift über beide Spalten, Bild und Text
   starten auf derselben Linie ─────────────────────────────── */
.vermerk-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:0 var(--s7);
  align-items:start;
}
.vermerk-kopf{grid-column:1 / -1;margin-bottom:var(--s5)}
.vermerk-bild .portraet{margin-top:0}
.vermerk-text > p:first-child{margin-top:0}

@media (max-width:860px){
  .vermerk-grid{grid-template-columns:1fr;gap:var(--s5)}
  .vermerk-kopf{margin-bottom:0}
}

/* ── Arbeitsteilung unter der Besetzung ───────────────────── */
.teilung{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--linie);
}
.teilung-kopf{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s3);
  color:var(--neu);
}
.teilung-mensch .teilung-kopf{color:var(--bestand)}
.teilung ul{list-style:none;margin:0;padding:0}
.teilung li{
  padding:var(--s2) 0 var(--s2) var(--s4);position:relative;
  font-size:var(--t-body-s);line-height:1.45;border-bottom:1px solid var(--linie-fein);
}
.teilung li:last-child{border-bottom:none}
.teilung li::before{
  content:"✓";position:absolute;left:0;top:var(--s2);
  color:var(--neu);font-family:var(--mono);font-size:var(--t-klein);
}
.teilung-mensch li::before{content:"●";color:var(--bestand);font-size:var(--t-mono)}

/* ── Datenband vor den Konditionen ────────────────────────── */
.daten-band{
  background:var(--bestand);color:#DCDFDB;padding:var(--s6) 0;
  border-top:1px solid var(--bestand);
}
.daten-band .anlage{color:#E0705F}
.daten-band .anlage::after{background:#3A4046}
.daten-punkte{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);
  margin-bottom:var(--s4);
}
.daten-punkte b{
  display:block;font-family:var(--display);font-weight:700;font-size:var(--t-h3);
  color:#fff;margin-bottom:var(--s1);line-height:1.25;
}
.daten-punkte span{display:block;font-size:var(--t-klein);line-height:1.55;color:#B4BAB6}
.daten-band .klein{color:#868D89;max-width:var(--mw-text)}

@media (max-width:860px){
  .teilung{grid-template-columns:1fr;gap:var(--s5)}
  .daten-punkte{grid-template-columns:1fr;gap:var(--s4)}
}

/* ── Beitragsseiten auf schmalen Bildschirmen ─────────────── */
@media (max-width:640px){
  .artikel{padding:var(--s6) var(--s4) 40px}
  .artikel-body h2{margin:var(--s5) 0 var(--s2)}
}