/* ============================================================================
   blog.moritzkreis.de, Höhenlinien-Route
   Eine eigene Wurzel: shared/base.css liefert die Marken, die style.css der
   Hauptseite existiert hier NICHT. Deshalb führt diese Datei die geteilten
   Bausteine (.wrap, .mast, .rule, .punkt, .hand, .fuss) noch einmal, wörtlich
   nach landing/style.css und landing/projekte.css.

   Farbregel: --k-* ist Textfarbe, --f-* ist Neon-Grafik und nie Fließtext,
   --t-* ist Tönungsfläche. Kein Hex, kein rgb(), kein hsl() in dieser Datei.
   Aufbau: mobil zuerst, dann 480px, 700px, 900px, 1040px.
   ========================================================================= */

/* ---------- 1. Maße ------------------------------------------------------ */

body {
  /* aus landing/style.css übernommen */
  --nav-h: 3.4rem;
  --rand: clamp(1.25rem, 5vw, 5rem);
  --spalte: 1240px;
  --pill: 999px;

  /* neu, nur Maße, keine Farbe */
  --spur-breite: 2.25rem;                    /* ab 700px breiter, s. u. */
  --spur-abstand: clamp(1.9rem, 5vw, 2.6rem);/* Maß der Bestands-Stationen */
  --spur-rinne: clamp(1.25rem, 3vw, 2.25rem);
  --scheitel: 78%;                           /* ab 700px 86% */
  --scheitel-gespiegelt: 22%;                /* ab 700px 14% */

  /* Satzmaße: vier benannte Stufen statt sieben Einzelwerte.
     ch misst in Hanken Grotesk schmaler als das mittlere Zeichen,
     62ch landet real bei rund 68 bis 72 Zeichen, also sicher unter 75. */
  --mass-lauf: 62ch;     /* Fließtext */
  --mass-neben: 46ch;    /* Vorspann, Anriss, Hinweis */
  --mass-lede: 40ch;     /* Kopf-Lede */
  --mass-display: 30ch;  /* große Sätze */
}

/* ---------- 2. Geteilte Bausteine aus dem Bestand ------------------------ */

.wrap {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
}

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

.mast, main, .fuss { position: relative; z-index: 1; }

/* Mast wie auf den Unterseiten: statisch, heller Grund, Haarlinie unten */
.mast {
  position: static;
  padding-block: 1.4rem;
  background: var(--papier);
  border-bottom: 1px solid var(--haarlinie);
}
.mast__in {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.mast__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.mast__nav { display: flex; gap: .7rem; font-size: .72rem; flex-wrap: wrap; }
.mast__nav a {
  color: var(--gedaempft);
  text-decoration: none;
  padding-bottom: .15rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mast__nav a:hover,
.mast__nav a:focus-visible { color: var(--tinte); border-bottom-color: var(--f-marke); }
.mast__nav a[aria-current="page"] {
  color: var(--tinte);
  font-weight: 600;
  border-bottom-color: var(--f-marke);
}

/* Ziel des Sprunglinks: sichtbarer Ring nur bei Tastaturfokus */
#main:focus:not(:focus-visible) { outline: none; }

.ebene { padding-block: clamp(3.75rem, 6.5vw, 6rem); scroll-margin-top: 1rem; }

.rule {
  display: flex;
  border-top: 1px solid var(--linie);
  padding-top: .55rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}
.rule__tag {
  margin: 0 0 0 auto;
  font-family: var(--lauf);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.rule__tag--ki      { color: var(--k-ki); }
.rule__tag--netz    { color: var(--k-netz); }
.rule__tag--marke   { color: var(--k-marke); }
.rule__tag--energie { color: var(--k-energie); }
.rule__tag--betrieb { color: var(--k-betrieb); }
.rule__tag--achtung { color: var(--k-achtung); }
.rule__tag--fertig  { color: var(--k-fertig); }

.gross {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  max-width: var(--mass-display);
  margin: 0;
}
.gross--zwei {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--gedaempft);
  max-width: var(--mass-lede);
}
.mittel {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.035em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Punkt: das Legenden- und Wegpunkt-Zeichen.
   Der Bestand ringt ihn mit einem halbtransparenten Tintenwert; das ist
   eine Rohfarbe und hier verboten. Ersatz ist --kf, also die kräftige Ader desselben Codes. */
.punkt {
  display: inline-block;
  width: .5em;
  height: .5em;
  border-radius: var(--pill);
  margin-right: .5em;
  vertical-align: baseline;
  background: var(--ff, var(--papier));
  box-shadow: 0 0 0 1px var(--kf, var(--haarlinie));
}
.punkt--ki      { background: var(--f-ki);      box-shadow: 0 0 0 1px var(--k-ki); }
.punkt--netz    { background: var(--f-netz);    box-shadow: 0 0 0 1px var(--k-netz); }
.punkt--marke   { background: var(--f-marke);   box-shadow: 0 0 0 1px var(--k-marke); }
.punkt--energie { background: var(--f-energie); box-shadow: 0 0 0 1px var(--k-energie); }
.punkt--betrieb { background: var(--f-betrieb); box-shadow: 0 0 0 1px var(--k-betrieb); }
.punkt--achtung { background: var(--f-achtung); box-shadow: 0 0 0 1px var(--k-achtung); }
.punkt--fertig  { background: var(--f-fertig);  box-shadow: 0 0 0 1px var(--k-fertig); }
/* hohl: noch nicht besetzt */
.punkt--offen   { background: var(--papier);    box-shadow: 0 0 0 1px var(--haarlinie); }

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 1.75rem 2.25rem;
  background: var(--papier);
}
.fuss__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 2rem;
  font-size: .85rem;
  color: var(--gedaempft);
}
.fuss p { margin: 0; max-width: none; }
.fuss a {
  text-decoration: underline 1px var(--haarlinie);
  text-underline-offset: .25em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.fuss a:hover,
.fuss a:focus-visible { color: var(--tinte); text-decoration-color: var(--f-marke); }

/* ---------- 3. Der Aderschlüssel ----------------------------------------

   Farbe kommt vom Container, nie vom Element: data-ader setzt drei lokale
   Aliasse, alle Bausteine darin lesen ausschließlich diese Aliasse.
   Muster wörtlich aus .feld[data-farbe] in landing/style.css.
   Ohne data-ader bleiben die Aliasse ungesetzt, und jeder Baustein fällt
   über seinen var()-Ersatzwert auf Tinte, Papier oder Haarlinie zurück.
   Genau das ist der Auftakt: kein Thema, also keine Ader.
   ---------------------------------------------------------------------- */

[data-ader="ki"]      { --kf: var(--k-ki);      --ff: var(--f-ki);      --tf: var(--t-ki); }
[data-ader="netz"]    { --kf: var(--k-netz);    --ff: var(--f-netz);    --tf: var(--t-netz); }
[data-ader="marke"]   { --kf: var(--k-marke);   --ff: var(--f-marke);   --tf: var(--t-marke); }
[data-ader="energie"] { --kf: var(--k-energie); --ff: var(--f-energie); --tf: var(--t-energie); }
[data-ader="betrieb"] { --kf: var(--k-betrieb); --ff: var(--f-betrieb); --tf: var(--t-betrieb); }
[data-ader="achtung"] { --kf: var(--k-achtung); --ff: var(--f-achtung); --tf: var(--t-achtung); }
[data-ader="fertig"]  { --kf: var(--k-fertig);  --ff: var(--f-fertig);  --tf: var(--t-fertig); }

/* ---------- 4. Kopffläche ------------------------------------------------ */

.kopf {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linie);
}
/* Kein overflow:hidden auf .kopf: sonst beschneidet die Sektion den
   Fokusring des Pfad-Links. Beschnitten wird nur die Bildschicht. */
.kopf__topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.topo {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: min(120vw, 1500px);
  height: auto;
  max-width: none;
  opacity: .08;
  /* Absichtlich hochskaliert: die Quelle ist ein sehr dichtes Schwarzweiß-
     Muster, verkleinert flimmert es. Nicht wegoptimieren.
     Die Maske hält das Bild vom Text fern. var(--tinte) steht hier NICHT
     für eine Farbe, sondern nur als garantiert deckender Wert, eine Maske
     wertet allein den Alphakanal aus. So bleibt die Datei frei von Rohwerten. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--tinte) 55%, var(--tinte) 100%);
          mask-image: linear-gradient(to right, transparent 0%, var(--tinte) 55%, var(--tinte) 100%);
}
.kopf .wrap { position: relative; z-index: 1; }

.kopf__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.6rem);
}
.kopf__lede {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.34;
  letter-spacing: -.02em;
  max-width: var(--mass-lede);
}
.kopf__rand {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.kopf__strich { display: block; width: 3.5rem; height: 1px; background: var(--linie); flex: none; }
.kopf__wort {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

/* ---------- 5. Die Route ------------------------------------------------- */

/* Anlauf: die Isohypse fällt aus der Kopfkante heraus, statt in der Liste
   aufzutauchen. Steht außerhalb des .wrap, trägt dessen Maße deshalb selbst. */
.route__anlauf {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.route__anlauf > svg,
.route__auslauf > svg {
  display: block;
  width: var(--spur-breite);
  height: clamp(2.5rem, 6vw, 4rem);
  max-width: none;
}
.route__auslauf > svg {
  height: clamp(3rem, 7vw, 5rem);
  /* die Route hört nicht auf, sie verliert sich */
  -webkit-mask-image: linear-gradient(var(--tinte), transparent);
          mask-image: linear-gradient(var(--tinte), transparent);
}
.route__anlauf path,
.route__auslauf path {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ebene--route { padding-top: 0; }
.route__raster { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }

/* Die .rule ist eine waagerechte Kartenkante, die Route kreuzt sie.
   Das ::after füllt genau die Höhe der Rule-Zeile, weil ihr margin-bottom
   hier 0 ist: kein Messen, keine Zahl, die veralten kann. */
.route__spalte .rule { position: relative; margin-bottom: 0; }
.route__spalte .rule::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--spur-breite) / 2);
  transform: translateX(-50%);
  width: 2px;
  background: var(--tinte);
}

.route__liste { list-style: none; margin: 0; padding: 0; }

.wegpunkt {
  display: grid;
  grid-template-columns: var(--spur-breite) minmax(0, 1fr);
  gap: 0 var(--spur-rinne);
  min-height: clamp(13rem, 24vw, 17rem);
}
/* Die ehrliche Stelle darf nicht die einzige sein, die unfertig aussieht:
   der leere Wegpunkt bekommt eine deutlich niedrigere Mindesthöhe. */
.wegpunkt--offen { min-height: clamp(8rem, 16vw, 10rem); }

.wegpunkt__spur { position: relative; }
.isohypse {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.isohypse path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.isohypse__geist { stroke: var(--haarlinie); stroke-width: 1; }
/* Ohne data-ader ist die Route durchgehend Tinte. Das ist keine Lücke,
   sondern die Aussage: noch keine Ader befahren. */
.isohypse__zug { stroke: var(--kf, var(--tinte)); stroke-width: 1.7; }

.wegpunkt__punkt {
  position: absolute;
  left: var(--scheitel);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: var(--pill);
  border: 2px solid var(--tinte);
  background: var(--ff, var(--papier));
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
/* noch unbesetzt: hohl und leiser geringt */
.wegpunkt--offen .wegpunkt__punkt {
  background: var(--papier);
  border-color: var(--haarlinie);
}

.wegpunkt__blatt { padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); }

.wegpunkt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0 0 .5rem;
  max-width: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.wegpunkt__ader { color: var(--kf, var(--gedaempft)); }

.wegpunkt__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0 0 .7rem;
}
.wegpunkt__titel a {
  text-decoration: underline 1px var(--haarlinie);
  text-underline-offset: .18em;
  transition: text-decoration-color .3s var(--ease);
}
.wegpunkt__titel a:hover,
.wegpunkt__titel a:focus-visible { text-decoration-color: var(--ff, var(--f-marke)); }

.wegpunkt__titel--offen {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--gedaempft);
  margin: 0 0 .7rem;
  max-width: none;
}

/* Redaktionsregel, bewusst KEINE Deklaration: der Vorspann bleibt bei drei
   Zeilen und die Etappenliste bei höchstens vier Zeilen. Eine max-height
   würde bei 200 % Textgröße abschneiden (WCAG 1.4.4). */
.wegpunkt__vorspann { margin: 0 0 1.1rem; max-width: var(--mass-neben); }

.etappen { list-style: none; margin: 0; padding: 0; }
.etappen li {
  position: relative;
  border-top: 1px solid var(--haarlinie);
  padding: .55rem 0 .55rem 1.5rem;
  max-width: var(--mass-neben);
  font-size: .92rem;
}
.etappen li:last-child { border-bottom: 1px solid var(--haarlinie); }
.etappen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 7px;
  height: 7px;
  background: var(--ff, var(--tinte));
}
.etappen a {
  text-decoration: underline 1px var(--haarlinie);
  text-underline-offset: .2em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.etappen a:hover,
.etappen a:focus-visible { color: var(--k-marke); text-decoration-color: var(--f-marke); }

/* ---------- 6. Das Register (Legende) ------------------------------------ */

.register__hinweis {
  margin: 0 0 1.25rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--gedaempft);
  max-width: var(--mass-neben);
}
.register__liste { list-style: none; margin: 0; padding: 0; }
.register__liste li {
  display: grid;
  grid-template-columns: .75rem minmax(0, 1fr);
  column-gap: .7rem;
  align-items: start;
  border-top: 1px solid var(--haarlinie);
  padding: .7rem 0;
}
.register__liste li:last-child { border-bottom: 1px solid var(--haarlinie); }
.register__liste .punkt {
  width: .55rem;
  height: .55rem;
  margin: .42rem 0 0;
}
.register__text { display: block; }
.register__name {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf, var(--tinte));
}
.register__satz {
  display: block;
  margin-top: .18rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--gedaempft);
}
.register__fuss {
  margin: .8rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--haarlinie);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gedaempft);
  max-width: var(--mass-neben);
}

/* ---------- 7. Die Beitragsseite ----------------------------------------- */

.kopf--beitrag { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem); }
.kopf--beitrag .topo { width: min(90vw, 1100px); opacity: .06; }

.beitrag__pfad {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  max-width: none;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.beitrag__pfad a {
  text-decoration: underline 1px var(--gedaempft);
  text-underline-offset: .25em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.beitrag__pfad a:hover,
.beitrag__pfad a:focus-visible { color: var(--tinte); text-decoration-color: var(--f-marke); }

/* Eigenes Register: der Beitrag ist kein Plakat, also keine 800er Versalien */
.beitrag__h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: none;
  margin: 0 0 clamp(.9rem, 2vw, 1.2rem);
}
.beitrag__daten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  margin: 0;
  max-width: none;
  font-size: .85rem;
  color: var(--gedaempft);
}
.beitrag__ader {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf, var(--gedaempft));
}
/* Der Auftakt trägt kein Thema: derselbe hohle Punkt-Baustein wie der
   offene Wegpunkt. Mit data-ader füllt er sich von selbst. */
.beitrag__ader::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .5em;
  border-radius: var(--pill);
  background: var(--ff, var(--papier));
  box-shadow: 0 0 0 1px var(--kf, var(--haarlinie));
}

.beitrag {
  position: relative;
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}
.beitrag > * { max-width: 64ch; }

/* Die Randlinie ist dieselbe Isohypse, nur als Flüstern: sie schwingt um
   rund plus/minus 0.6rem und bleibt in Rufweite der Randmarken.
   Unter 900px fällt sie ersatzlos weg. */
.randlinie { display: none; }
.randlinie path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.randlinie__geist { stroke: var(--haarlinie); stroke-width: 1; }
.randlinie__zug { stroke: var(--tinte); stroke-width: 1.4; }

.beitrag p {
  font-size: clamp(1.0625rem, 1.35vw, 1.15rem);
  line-height: 1.72;
  max-width: var(--mass-lauf);
  margin: 0 0 1.15em;
}
.beitrag a {
  text-decoration: underline 1px var(--gedaempft);
  text-underline-offset: .2em;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.beitrag a:hover,
.beitrag a:focus-visible { color: var(--k-marke); text-decoration-color: var(--f-marke); }

.beitrag__vorspann {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.34;
  letter-spacing: -.02em;
  max-width: var(--mass-neben);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.beitrag__h2 {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.03em;
  line-height: 1.06;
  margin: clamp(2.75rem, 6vw, 4rem) 0 .9rem;
  scroll-margin-top: 1.5rem;
}
.beitrag__h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .6em;
  background: var(--ff, var(--f-marke));
  vertical-align: middle;
}

/* Zäsur: volle Ober- und Unterkante über die ganze Textspalte.
   Die Zeilenlänge wird rechts durch Innenabstand begrenzt, nicht durch
   max-width: sonst enden beide Striche als schwebende Stummel. */
.beitrag__satz {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.03em;
  max-width: none;
  margin-inline: 0;
  margin-block: clamp(2rem, 4vw, 3rem);
  padding-block: 1.1rem;
  padding-inline-end: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  text-wrap: balance;
}

/* Im Beitrag gibt es außer der Zäsur und dem Abschluss keine waagerechte
   Kante. Die Liste trägt deshalb nur das Quadrat-Idiom, keine Haarlinien. */
.beitrag__liste { list-style: none; margin: 0 0 1.15em; padding: 0; }
.beitrag__liste li {
  position: relative;
  padding: .4rem 0 .4rem 1.5rem;
  max-width: var(--mass-lauf);
  line-height: 1.6;
}
.beitrag__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  background: var(--ff, var(--tinte));
}
.beitrag__liste b { font-weight: 600; color: var(--kf, var(--tinte)); }

.beitrag__weiter {
  border-top: 1px solid var(--linie);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.beitrag__weiter p {
  margin: 0 0 .55rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--gedaempft);
  max-width: var(--mass-neben);
}
.beitrag__weiter p:last-child { margin-bottom: 0; }

/* ============================================================================
   8. DIE DREI BAUSTEINE
   Einzeln verwendbar, benannt und dokumentiert: der spätere Blog-Editor in
   Editio soll sie nur noch ausgeben, nicht neu erfinden.
   ========================================================================= */

/* --- Baustein 1: Leuchtstelle ---------------------------------------------
   <span class="leuchte leuchte--ki">Wort</span>
   Der Neonton fährt beim Scrollen als Unterlegung unter dem Wort hindurch.
   Der Text bleibt IMMER --tinte, --f-* ist hier Grafik, nie Schriftfarbe.
   Ohne JS und bei reduzierter Bewegung liegt die Unterlegung sofort und
   vollständig da. Animiert wird ausschließlich transform.
   Kontrast --tinte auf --f-*: ki 5.57, netz 5.60, marke 5.57, energie 10.61,
   betrieb 9.32, achtung 5.54, fertig 7.80, alle weit über AA.
   Redaktionsregel: für kurze Wendungen gedacht; die Unterlegung deckt den
   ersten Zeilenumbruch-Abschnitt, nicht mehrere Zeilen.
   ------------------------------------------------------------------------ */

.leuchte {
  --leucht: var(--f-marke);
  position: relative;
  isolation: isolate;
  color: var(--tinte);
  font-weight: 600;
  padding: 0 .14em;
}
.leuchte::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.06em;
  bottom: -.06em;
  z-index: -1;
  background: var(--leucht);
  transform-origin: left center;
}
.leuchte--ki      { --leucht: var(--f-ki); }
.leuchte--netz    { --leucht: var(--f-netz); }
.leuchte--marke   { --leucht: var(--f-marke); }
.leuchte--energie { --leucht: var(--f-energie); }
.leuchte--betrieb { --leucht: var(--f-betrieb); }
.leuchte--achtung { --leucht: var(--f-achtung); }
.leuchte--fertig  { --leucht: var(--f-fertig); }

/* --- Baustein 2: Tonstelle ------------------------------------------------
   <span class="tonstelle tonstelle--ki">Wort</span>
   Tönung --t-* als Fläche, Textfarbe aus derselben Ader. Keine Bewegung.
   Gemessener Kontrast --k-* auf --t-* (Prüfung aller sieben):
     ki 4.46  netz 4.49  marke 4.48  fertig 4.46   -> unter 4.5:1, durchgefallen
     achtung 4.50  betrieb 4.56  energie 4.73      -> bestanden
   Die vier durchgefallenen Adern setzen nach Regel --tinte als Textfarbe
   (dann 14.9 bis 15.5:1). Die Tönung bleibt in jedem Fall der Code.
   .hand ist der gleichnamige Bestandsbaustein und teilt sich die Regeln,
   damit es nur eine Wahrheit gibt.
   ------------------------------------------------------------------------ */

.hand,
.tonstelle {
  --ton: var(--t-marke);
  --wort: var(--tinte);
  font-style: normal;
  color: var(--wort);
  background: var(--ton);
  padding: 0 .14em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hand--ki,      .tonstelle--ki      { --ton: var(--t-ki);      --wort: var(--tinte); }
.hand--netz,    .tonstelle--netz    { --ton: var(--t-netz);    --wort: var(--tinte); }
.hand--marke,   .tonstelle--marke   { --ton: var(--t-marke);   --wort: var(--tinte); }
.hand--fertig,  .tonstelle--fertig  { --ton: var(--t-fertig);  --wort: var(--tinte); }
.hand--energie, .tonstelle--energie { --ton: var(--t-energie); --wort: var(--k-energie); }
.hand--betrieb, .tonstelle--betrieb { --ton: var(--t-betrieb); --wort: var(--k-betrieb); }
.hand--achtung, .tonstelle--achtung { --ton: var(--t-achtung); --wort: var(--k-achtung); }

/* --- Baustein 3: Schaubild ------------------------------------------------
   Reines Inline-SVG, kein Skript, keine Fremdbibliothek, kein Canvas.

   Serienfarben in FESTER Reihenfolge, geprüft gegen weißen Grund:
     1 --k-ki   2 --k-netz   3 --k-fertig   4 --k-achtung
   Höchstens vier Serien: --k-energie (Ocker) und --k-betrieb (Türkis) sind
   als Serienfarbe verboten (Ocker gegen Grün nur Delta-E 13.5, Türkis unter
   dem Chroma-Boden). Als Themenfarben bleiben beide gültig. Deshalb gibt es
   hier bewusst nur vier Serienklassen; eine fünfte existiert nicht.
   Die Serienklasse setzt `color`, alles darin liest currentColor.

   Gerüst:
   <figure class="schaubild">
     <div class="schaubild__rahmen">
       <svg class="schaubild__flaeche" viewBox="0 0 720 360" role="img"
            aria-labelledby="…">
         <g class="schaubild__grund"> Achsen und Raster </g>
         <g class="schaubild__serie schaubild__serie--1">
           <path class="schaubild__linie" d="…"/>
           <circle class="schaubild__punkt" r="4" …/>
           <text class="schaubild__ende" …>Name</text>
         </g>
       </svg>
     </div>
     <ul class="schaubild__legende" role="list"> … </ul>
     <figcaption class="schaubild__unterzeile"> … </figcaption>
     <details class="schaubild__zahlen"><summary>…</summary><table>…</table></details>
   </figure>

   Nie zwei y-Achsen, nie ein Regenbogenverlauf, nie eine Zahl an jedem Punkt.
   Ab zwei Serien immer eine Legende, zusätzlich Beschriftung am Linienende.
   Achsen und Raster treten zurück, Beschriftung nie in der Serienfarbe.
   ------------------------------------------------------------------------ */

.schaubild {
  margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: 64ch;
}
.schaubild__rahmen { overflow-x: auto; overscroll-behavior-x: contain; }
.schaubild__flaeche {
  display: block;
  width: 100%;
  min-width: 20rem;
  height: auto;
  overflow: visible;
}

/* Achsen und Raster treten zurück */
.schaubild__grund line,
.schaubild__grund path,
.schaubild__achse,
.schaubild__raster {
  fill: none;
  stroke: var(--haarlinie);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.schaubild__achse { stroke: var(--linie); }

/* Beschriftung: nie in der Serienfarbe */
.schaubild__marke {
  font-family: var(--lauf);
  font-size: .78rem;
  fill: var(--gedaempft);
}
.schaubild__ende {
  font-family: var(--lauf);
  font-size: .8rem;
  font-weight: 600;
  fill: var(--tinte);
}

/* Serienfarben, feste Reihenfolge */
.schaubild__serie--1 { color: var(--k-ki); }
.schaubild__serie--2 { color: var(--k-netz); }
.schaubild__serie--3 { color: var(--k-fertig); }
.schaubild__serie--4 { color: var(--k-achtung); }

.schaubild__linie {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;   /* Datenenden 4px gerundet bei 2px Strich */
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Punkte mindestens 8px Durchmesser: r >= 4 im Markup setzen */
.schaubild__punkt {
  fill: currentColor;
  stroke: var(--papier);
  stroke-width: 2;
}
.schaubild__flaeche--balken .schaubild__balken { fill: currentColor; }

.schaubild__legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: .9rem 0 0;
  padding: 0;
  font-size: .85rem;
}
.schaubild__legende li { display: inline-flex; align-items: baseline; }
.schaubild__legende .punkt {
  background: currentColor;
  box-shadow: none;
}
.schaubild__legende .schaubild__name { color: var(--tinte); }

.schaubild__unterzeile {
  margin-top: .9rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--gedaempft);
  max-width: var(--mass-lauf);
}

.schaubild__zahlen { margin-top: .9rem; font-size: .88rem; }
.schaubild__zahlen summary {
  cursor: pointer;
  color: var(--gedaempft);
  padding: .3rem 0;
  font-weight: 600;
  letter-spacing: .04em;
}
.schaubild__zahlen summary:hover { color: var(--tinte); }
.schaubild__zahlen table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .6rem;
  font-variant-numeric: tabular-nums;
}
.schaubild__zahlen caption { text-align: left; color: var(--gedaempft); padding-bottom: .4rem; }
.schaubild__zahlen th,
.schaubild__zahlen td {
  border-top: 1px solid var(--haarlinie);
  padding: .4rem .8rem .4rem 0;
  text-align: right;
}
.schaubild__zahlen th:first-child,
.schaubild__zahlen td:first-child { text-align: left; }
.schaubild__zahlen thead th { color: var(--gedaempft); font-weight: 600; }
.schaubild__zahlen tbody tr:last-child td,
.schaubild__zahlen tbody tr:last-child th { border-bottom: 1px solid var(--haarlinie); }

/* ============================================================================
   9. Bewegung
   Alles hier ist Schmuck. Ohne JavaScript ist jede Linie voll gezeichnet,
   jeder Text sichtbar, jede Unterlegung da. Kein Ausgangszustand mit
   opacity 0 liegt außerhalb von .js UND außerhalb der no-preference-Abfrage.
   Der globale Notaus in base.css deckt zusätzlich alle reinen Übergänge.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  /* Kopfeinblendung: nur mit Skript, doppelt gesichert */
  .js .b-auf { opacity: 0; transform: translateY(14px); }

  /* Leuchtstelle: fährt unter dem Wort hindurch */
  .js .leuchte::before {
    transform: scaleX(0);
    transition: transform .55s var(--ease);
  }
  .js .leuchte.ist-an::before { transform: scaleX(1); }

  /* Wegpunkt leuchtet auf, wenn er in den Sichtbereich kommt */
  .wegpunkt.ist-an .wegpunkt__punkt {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 12px 2px var(--ff, var(--haarlinie));
  }
}

/* ============================================================================
   10. Größere Fenster
   ========================================================================= */

/* Ab 480px schwingt die Isohypse abwechselnd nach rechts und links.
   Darunter bleibt sie gleichsinnig: bei sehr schmaler Spur läge der
   gespiegelte Scheitel so nah am Original, dass die Schwingung als
   Zittern gelesen würde. Entschieden, kein Notausgang. */
@media (min-width: 480px) {
  .wegpunkt:nth-child(even) .isohypse { transform: scaleX(-1); }
  .wegpunkt:nth-child(even) .wegpunkt__punkt { left: var(--scheitel-gespiegelt); }
}

@media (min-width: 700px) {
  body {
    --spur-breite: clamp(2.75rem, 6vw, 4.5rem);
    --scheitel: 86%;
    --scheitel-gespiegelt: 14%;
  }
  .topo { opacity: .12; }
  .kopf--beitrag .topo { opacity: .09; }
  .mast__nav { gap: clamp(.85rem, 2.4vw, 2rem); font-size: .85rem; }
  .register__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 4vw, 2.5rem);
  }
  .register__liste li:nth-last-child(2) { border-bottom: 1px solid var(--haarlinie); }
}

@media (min-width: 900px) {
  .route__raster {
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: clamp(2rem, 5vw, 4rem);
  }
  /* Die Legende bleibt stehen, während man die Route abfährt, aber sie
     darf nie unerreichbar werden: bei flachem Fenster scrollt sie in sich. */
  .register {
    position: sticky;
    top: clamp(1rem, 3vw, 2rem);
    max-height: calc(100svh - 2 * clamp(1rem, 3vw, 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* einspaltig zurück, sobald die Legende neben der Route steht */
  .register__liste { display: block; }
  .register__liste li:nth-last-child(2) { border-bottom: 0; }

  /* Beitrag: Textspalte rechts, Randlinie in der Rinne links */
  .beitrag { padding-left: calc(var(--rand) + var(--spur-breite) + var(--spur-rinne)); }
  .randlinie {
    display: block;
    position: absolute;
    left: var(--rand);
    top: clamp(2.5rem, 6vw, 4rem);
    bottom: clamp(3rem, 7vw, 5rem);
    width: var(--spur-breite);
    height: auto;
    max-width: none;
  }
  /* Die Randmarke wandert aus dem Textfluss an die Linie */
  .beitrag__h2::before {
    position: absolute;
    display: block;
    left: calc(-1 * var(--spur-abstand));
    top: .55em;
    margin-right: 0;
  }
}

@media (min-width: 1040px) {
  .route__raster { grid-template-columns: minmax(0, 1fr) 16rem; }
}