/* ═══════════════════════════════════════════════════════════════
   Vivodepot · vivodepot.de · gemeinsames Stylesheet
   11.09.2026. Ersetzt die dreizehn Seiten mit eigenem Inline-CSS.
   Inter in allen Schnitten, keine Serife (stehende Vorgabe).
   Palette aus dem A0-Poster für den IOP-Summit gemessen.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  color-scheme: light;
  /* Werte aus vivodepot-style-guide.html, Abschnitt 2.2 — der Guide ist die
     Quelle, hier steht kein eigener Ton. Die Salbei-Familie hat genau drei
     Glieder; #2D4739 gehoert nicht dazu (Abschnitt 2.1: Logo-Ton, auf die
     kleine Marke optimiert, ausdruecklich nicht fuer flaechige UI). */
  --salbei-dunkel: #4F6539;   /* Chrome: Topbar, Sidebar, Fusszeile + Ueberschriften */
  --salbei-mid:    #7B9A6A;   /* interaktiv: Hover, Links, aktiv, Akzent-Icons */
  --salbei-light:  #EEF2E8;   /* helle Toenung: Hover-Flaechen, Feld-Trennlinien */
  --cream:         #F6F5F1;   /* Seitenflaeche, Body */
  --papier:        #FDFBF7;   /* --papier-bereich */
  --ink:           #1C2A1E;
  --ink2:          #4A5E4F;
  --ink3:          #637568;
  --gold:          #8A6D3A;
  --rand:          #D8D2C4;   /* --line */
  --rand-warm:     #EFEEE7;   /* --line-feiner */
  /* Die Namen dieser Datei zeigen auf die Guide-Tokens, keine zweiten Werte. */
  --salbei:        var(--salbei-dunkel);
  --salbei-tief:   var(--salbei-dunkel);
  --salbei-hell:   var(--salbei-light);
  /* Sektorfarben, aus dem Poster gemessen */
  --s-gesundheit:  #BBCDA7;
  --s-verwaltung:  #A9B8C4;
  --s-bildung:     #D9C9A3;
  --s-identitaet:  #C3B5A8;
  --s-vorsorge:    #B8AECB;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --breit: 1160px;
  --text:  730px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, li { hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 9 4 4; }
h1, h2, h3, h4 { hyphens: manual; color: var(--ink); line-height: 1.22; letter-spacing: -0.015em; font-weight: 700; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--salbei); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--salbei); outline-offset: 3px; border-radius: 2px; }

/* ─── Sprungmarke ─── */
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--salbei); color: var(--cream);
  padding: 0.7em 1.2em; text-decoration: none; font-weight: 600;
}
.sprung:focus { left: 0; color: var(--cream); }

/* ─── Navigation ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--salbei);
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; gap: 1.5rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav-logo img { width: 48px; height: 48px; flex: none; }
.nav-wort {
  font-weight: 700; letter-spacing: 0.1em; font-size: 1rem;
  color: var(--salbei-tief); white-space: nowrap; text-transform: uppercase;
}
.nav-links { display: flex; gap: 1.7rem; list-style: none; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--ink2); font-size: 0.88rem;
  white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--salbei); }
.nav-links a.aktiv { color: var(--salbei-tief); font-weight: 600; border-bottom-color: var(--salbei); }

.burger-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger-label { display: none; cursor: pointer; padding: 0.6rem; user-select: none; }
.burger-label span {
  display: block; width: 24px; height: 2px; background: var(--salbei-tief);
  margin: 5px 0; border-radius: 1px; transition: transform .25s, opacity .25s;
}
.burger-menu {
  display: none; position: fixed; top: 84px; left: 0; right: 0;
  background: var(--papier); border-bottom: 1px solid var(--rand);
  box-shadow: 0 6px 16px rgba(28,42,30,.09); z-index: 99;
}
.burger-menu ul { list-style: none; }
.burger-menu li { border-bottom: 1px solid var(--rand-warm); }
.burger-menu li:last-child { border-bottom: 0; }
.burger-menu a { display: block; padding: 0.9rem 1.5rem; text-decoration: none; color: var(--ink2); }
.burger-menu a.aktiv { color: var(--salbei-tief); font-weight: 600; border-left: 3px solid var(--salbei-mid); }
.burger-toggle:checked ~ .burger-menu { display: block; }
.burger-toggle:checked ~ .burger-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-toggle:checked ~ .burger-label span:nth-child(2) { opacity: 0; }
.burger-toggle:checked ~ .burger-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1050px) {
  .nav-links { display: none; }
  .burger-label { display: block; }
}
@media (max-width: 640px) {
  nav { padding: 0 1rem; height: 72px; }
  .burger-menu { top: 72px; }
  .nav-logo img { width: 40px; height: 40px; }
  .nav-wort { font-size: .88rem; }
}

/* ─── Raster ─── */
.bahn { padding: 4.5rem 2rem; }
/* EINE linke Kante für alles, in einer einzigen Regel (21.09.2026). Nichts steht
   mittig (Carola, 20.09.: „ich möchte nirgends etwas mittig"). Augenbraue,
   Überschrift, Fließtext, Karten und Fußzeile beginnen an derselben Linie.
   Vorher standen hier zwei Regeln mit gegensätzlicher Absicht: eine zentrierte
   den Text in einer 730-px-Spalte (12.09.), eine nahm das zurück (20.09.), aber nur
   für den Textblock. Augenbraue und Überschrift blieben in der Mitte und standen
   170 px rechts von Text und Karten; die Schlusszeile der Fußzeile blieb ebenfalls
   mittig. Dieselbe Umstellung, drei Reste. Eine Regel verhindert die Wiederkehr:
   was in eine Bahn kommt, erbt die Kante, statt sie einzeln zu bekommen. */
/* Die Regel steht am DATEIENDE („Die eine Kante"), nicht hier: mehrere Bausteine
   weiter unten setzen selbst `margin: 0 auto` (.bild-breit, .fuss-raster,
   .fuss-unten, .rollen) und würden sie sonst überstimmen — gemessen am 21.09.2026,
   die Fußzeile stand 49 px zu weit rechts. */
.bahn-eng  { max-width: var(--text); }
.bahn-breit{ max-width: var(--breit); }

/* Lesebreite in einer breiten Bahn: Augenbraue, Überschrift und Absatz bleiben auf
   730 px, aber an derselben Kante wie die Karten darunter. */
.bahn-breit > .augenbraue,
.bahn-breit > h1,
.bahn-breit > h2,
.bahn-breit > p,
.bahn-breit > .textbahn { max-width: var(--text); margin-inline: 0; }

/* Reine Textbahnen füllen die Breite in zwei Spalten (21.09.2026). Carola: „der Text
   geht nur bis zur Mitte — das habe ich schon oft angemerkt". Die Zeilenlänge bleibt
   lesbar (etwa 60 Zeichen je Spalte), die Fläche wird genutzt, nichts steht mittig.
   Gilt nur für Bahnen, die AUSSCHLIESSLICH Augenbraue, EINE Überschrift und mindestens
   zwei Absätze enthalten; alles mit Liste, Karte, Bild, Tabelle bleibt einspaltig.
   Bahnen mit mehreren Überschriften bleiben einspaltig: dort bricht jeder kurze Absatz
   mit ein bis zwei Zeilen in die zweite Spalte (gesehen auf ueber.html).
   Zurücknehmen: diesen Block löschen. Nicht das Zielbild B (Text links, rechts ein
   zweites Element) — das ist Inhalt und braucht Carolas Entscheidung. */
@media (min-width: 900px) {
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) {
    max-width: var(--breit); column-count: 2; column-gap: 3.5rem;
  }
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) > .augenbraue,
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) > h1,
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) > h2 {
    column-span: all; max-width: var(--text);
  }
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) > p {
    margin-top: 0; margin-bottom: .95rem; orphans: 3; widows: 3;
  }
}

/* Die Stromgrafik vom Poster. Sie traegt ihr eigenes viewBox und skaliert mit der
   Bahn; die Beschriftungen sind klein, darum bekommt sie die volle Breite und auf
   schmalen Schirmen einen eigenen Rollbereich statt einer Schrumpfung ins
   Unleserliche. */
/* Nachtrag 12.09.2026: die Grafik laeuft nicht mehr ueber die volle Bahn. Sie ist
   ein Beleg im Text, kein Plakat — in ihrer eigenen Breite gesetzt, mittig, mit
   Luft darum. Ueber 986px waechst sie nicht weiter, sonst wird sie wieder zum
   Hauptdarsteller. */
.strom { display: block; width: 100%; max-width: 860px; height: auto;
         margin: 2.4rem 0 0; }
@media (max-width: 780px) {
  .strom { width: 760px; max-width: none; }
  .strom-huelle { overflow-x: auto; }
}
.bahn.hell   { background: var(--papier); }
.bahn.salbei { background: var(--salbei-hell); }
.bahn.tief   { background: var(--salbei-tief); color: var(--rand-warm); }
.bahn.tief h2, .bahn.tief h3, .bahn.tief strong { color: #fff; }
.bahn.tief a { color: var(--s-bildung); }
@media (max-width: 640px) { .bahn { padding: 3rem 1.1rem; } }

.augenbraue {
  font-size: .7rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--salbei); display: block; margin-bottom: 1rem;
}
.bahn.tief .augenbraue { color: var(--s-gesundheit); }

h1 { font-size: clamp(1.75rem, 3.4vw, 2.45rem); margin-bottom: .9rem; }
h2 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); margin-bottom: .8rem; }
h3 { font-size: 1.02rem; margin: 2rem 0 .45rem; color: var(--salbei-tief); }
h2 + h3 { margin-top: 1.2rem; }
.lead { font-size: 1.08rem; line-height: 1.55; color: var(--ink2); margin-bottom: 1.4rem; }
.bahn p + p, .bahn ul + p, .bahn p + ul { margin-top: .95rem; }
ul, ol { margin: .95rem 0 .95rem 1.3rem; }
li + li { margin-top: .4rem; }

/* ─── Hervorhebungen ─── */
.kasten {
  background: var(--salbei-hell); border-left: 3px solid var(--salbei);
  padding: 1.3rem 1.5rem; margin: 1.8rem 0; border-radius: 0 6px 6px 0;
}
.kasten.warm { background: var(--rand-warm); border-left-color: var(--gold); }
.kasten h3 { margin-top: 0; }
.kasten p:first-child { margin-top: 0; }
.einwand {
  font-size: 1.12rem; font-weight: 500; color: var(--salbei-tief);
  border-left: 3px solid var(--gold); padding-left: 1.2rem; margin: 1.6rem 0;
}
.definition {
  background: var(--papier); border: 1px solid var(--salbei-mid);
  border-radius: 8px; padding: 1.5rem 1.7rem; margin: 1.8rem 0;
  font-size: 1.05rem; line-height: 1.6;
}
.definition .wort { font-weight: 700; color: var(--salbei-tief); }
.fuss { font-size: .86rem; color: var(--ink3); line-height: 1.55; }
.quelle { font-size: .84rem; color: var(--ink3); }

/* ─── Karten ─── */
.karten { display: grid; gap: 1.3rem; margin: 2rem 0; }
.karten.zwei { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.karten.drei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Nach Anzahl gesetzt (21.09.2026): fünf Karten in einem auto-fit-Raster ergaben vier
   nebeneinander und eine allein darunter. Die Spaltenzahl folgt jetzt der Kartenzahl. */
.karten.n2, .karten.n3, .karten.n4, .karten.n5 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .karten.n2, .karten.n4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .karten.n3, .karten.n5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .karten.n4 { grid-template-columns: repeat(4, 1fr); } }
.karte {
  background: var(--papier); border: 1px solid var(--rand);
  border-radius: 8px; padding: 1.4rem 1.5rem;
}
.karte h3 { margin-top: 0; font-size: 1.08rem; }
.karte p { font-size: .95rem; }
a.karte { text-decoration: none; color: var(--ink2); display: block; transition: border-color .2s, transform .2s; }
a.karte:hover { border-color: var(--salbei-mid); transform: translateY(-2px); }
a.karte h3 { color: var(--salbei-tief); }
a.karte .weiter { color: var(--gold); font-size: .9rem; font-weight: 600; display: inline-block; margin-top: .6rem; }

/* ─── Knöpfe ─── */
.knopf {
  display: inline-block; font-weight: 600; font-size: .98rem;
  padding: .95rem 1.9rem; border-radius: 11px; text-decoration: none;
  border: 2px solid var(--salbei); background: var(--salbei); color: var(--cream);
}
.knopf:hover { background: var(--salbei-tief); border-color: var(--salbei-tief); color: #fff; }
.knopf.leer { background: transparent; color: var(--salbei); }
.knopf.leer:hover { background: var(--salbei); color: var(--cream); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0 0; }
.knopfreihe + .fuss { margin-top: .9rem; }

/* ─── Tabellen ─── */
.tabellenhuelle { overflow-x: auto; margin: 1.8rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; }
th, td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-weight: 600; color: var(--ink); background: var(--rand-warm); white-space: nowrap; }
td code, p code, li code { font-family: ui-monospace, Menlo, monospace; font-size: .87em; color: var(--salbei-tief); }
/* Die Sektorfarben sind dieselben wie auf dem A0-Poster: ein kräftiger
   Streifen links, dahinter derselbe Ton stark aufgehellt. Die Farbe trägt
   keine Information allein — der Sektorname steht daneben. */
.sektorzelle { font-weight: 600; color: var(--ink); border-left: 7px solid var(--rand); }
.s-gesundheit { border-left-color: var(--s-gesundheit); background: color-mix(in srgb, var(--s-gesundheit) 26%, #fff); }
.s-verwaltung { border-left-color: var(--s-verwaltung); background: color-mix(in srgb, var(--s-verwaltung) 26%, #fff); }
.s-bildung    { border-left-color: var(--s-bildung);    background: color-mix(in srgb, var(--s-bildung)    26%, #fff); }
.s-identitaet { border-left-color: var(--s-identitaet); background: color-mix(in srgb, var(--s-identitaet) 26%, #fff); }
.s-vorsorge   { border-left-color: var(--s-vorsorge);   background: color-mix(in srgb, var(--s-vorsorge)   26%, #fff); }

/* ─── Bilder ─── */
figure { margin: 2rem 0; }
figure img { border-radius: 8px; }
figcaption { font-size: .84rem; color: var(--ink3); margin-top: .6rem; }
.bild-breit { max-width: var(--breit); margin: 0 auto 2.5rem; padding: 0 2rem; }
@media (max-width: 640px) { .bild-breit { padding: 0 1.1rem; } }

/* ─── Fußbereich ─── */
#impressum { background: var(--papier); border-top: 1px solid var(--rand); }
.impressum-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.impressum-raster p { font-size: .9rem; line-height: 1.6; }
.impressum-raster strong { display: block; color: var(--salbei-tief); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }

footer { background: var(--salbei-tief); color: var(--rand-warm); padding: 3rem 2rem 2rem; }
.fuss-raster { max-width: var(--breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.2rem; }
footer h4 { color: var(--s-gesundheit); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: .7rem; font-weight: 700; }
footer p { font-size: .9rem; margin: .3rem 0; }
footer a { color: var(--rand-warm); text-decoration-color: var(--salbei-mid); }
footer a:hover { color: #fff; }
.fuss-unten { max-width: var(--breit); margin: 2.4rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--ink3); font-size: .82rem; color: var(--s-bildung);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 640px) { footer { padding: 2.4rem 1.1rem 1.6rem; } }

/* ═══════════════════════════════════════════════════════════════
   Anlass-Karten — „Die schweren und die schönen Übergänge"
   Aus dem Stand vom 06.09. übernommen. Elf Stationen, von der
   Geburt bis zum Erbfall, jede mit Bild, Titel und einem Satz
   darüber, was an diesem Tag gebraucht wird.
   ═══════════════════════════════════════════════════════════════ */
.anlaesse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.6rem;
  margin: 2.4rem 0 0;
}
.anlass {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.anlass-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--salbei-hell); }
.anlass-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.anlass:hover .anlass-bild img { transform: scale(1.03); }
.anlass-bild .bildnachweis {
  position: absolute; right: .45rem; bottom: .35rem;
  font-size: .62rem; letter-spacing: .02em;
  color: #fff; background: rgba(28, 42, 30, .48);
  padding: .12rem .45rem; border-radius: 3px;
}
.anlass-bild .bildnachweis a { color: #fff; text-decoration: none; }
.anlass-bild .bildnachweis a:hover { text-decoration: underline; }
.anlass-streifen { height: 4px; background: var(--salbei-mid); }
.anlass-text { padding: 1.1rem 1.25rem 1.35rem; }
.anlass-titel {
  display: block; font-weight: 700; color: var(--salbei-tief);
  font-size: 1.02rem; line-height: 1.3; margin-bottom: .45rem;
  letter-spacing: -.01em;
}
.anlass-text p { font-size: .93rem; line-height: 1.58; margin: 0; }

/* Zusagen — „Was immer gilt" */
.zusagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem 2.2rem; margin: 2rem 0 0; }
.zusage h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--salbei-tief); }
.zusage p { font-size: .95rem; margin: 0; }
.bahn.tief .zusage h3 { color: var(--s-gesundheit); }

/* Was-wenn — Frage und Antwort */
.waswenn { margin: 1.8rem 0 0; }
.waswenn > div { padding: 1.15rem 0; border-top: 1px solid var(--rand); }
.waswenn > div:last-child { border-bottom: 1px solid var(--rand); }
.waswenn h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.waswenn p { font-size: .95rem; margin: 0; }

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

/* „Worum es geht" — Text mit kleiner, zarter Grafik daneben (22.09.2026, Carola:
   „ein geeignetes Bild / Grafik daneben, zart und klein"). Auf schmalen Schirmen
   steht die Grafik unter dem Text, klein, damit sie nicht dominiert. */
.einleitung-raster {
  display: grid; grid-template-columns: minmax(0, 640px) minmax(140px, 200px);
  gap: 2.2rem 3rem; align-items: start;
}
.einleitung-text { min-width: 0; }
.einleitung-text > p { max-width: 640px; }
.einleitung-grafik { margin: .4rem 0 0; }
.einleitung-grafik svg { width: 100%; height: auto; display: block; }
.einleitung-grafik figcaption {
  font-size: .72rem; color: var(--ink3); margin-top: .6rem; text-align: center;
}
@media (max-width: 860px) {
  .einleitung-raster { grid-template-columns: 1fr; }
  .einleitung-grafik { max-width: 150px; margin: .6rem auto 0; order: -1; }
}

/* Beistellbild neben einem Textblock — feste Proportion, damit ein hohes
   Motiv den Absatz daneben nicht überragt. */
.beistell { margin: 0; }
.beistell img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 10px; }
.beistell figcaption { font-size: .74rem; color: var(--ink3); margin-top: .4rem; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   Literaturliste — „Weiterlesen". Sieben Stränge, je Eintrag Titel,
   Art, Sprache, Quelle, Einordnung und Verweise.
   ═══════════════════════════════════════════════════════════════ */
.strang + .strang { margin-top: 3rem; }
.strang > h2 { margin-bottom: .5rem; }
.strang-lead { max-width: var(--text); color: var(--ink2); margin-bottom: 1.6rem; }
.eintraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.2rem; }
.eintrag {
  background: var(--papier); border: 1px solid var(--rand);
  border-left: 4px solid var(--salbei-mid);
  border-radius: 0 8px 8px 0; padding: 1.15rem 1.3rem;
}
.eintrag-titel { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.marke {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 3px; white-space: nowrap;
}
.marke.art  { background: var(--salbei-hell); color: var(--salbei-tief); }
.marke.spr  { background: var(--rand-warm); color: var(--gold); }
.eintrag-quelle { font-size: .82rem; color: var(--ink3); margin: .4rem 0 .55rem; }
.eintrag-warum { font-size: .92rem; line-height: 1.55; margin: 0; }
.eintrag-links { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.eintrag-links a { font-size: .85rem; font-weight: 500; }
.strang-inhalt { position: sticky; top: 84px; }
.inhaltsleiste {
  display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: 1.6rem 0 0;
  font-size: .87rem;
}
.inhaltsleiste a {
  text-decoration: none; color: var(--salbei-tief); background: var(--salbei-hell);
  padding: .3rem .75rem; border-radius: 14px; border: 1px solid transparent;
}
.inhaltsleiste a:hover { border-color: var(--salbei-mid); }
@media (max-width: 640px) { .eintraege { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   Ergänzungen vom 12.09.2026 — aus der Rückmeldung der Gründerin.
   ══════════════════════════════════════════════════════════════════════════ */

/* Überschriftenabstände waren zu gering: h2 und h3 hatten keinen oberen
   Abstand, eine Überschrift klebte am Absatz davor. Die erste Überschrift
   eines Blocks behält ihren bündigen Anschluss. */
h2 { margin-top: 2.8rem; }
h3 { margin-top: 2.2rem; }
.bahn-eng > h1, .bahn-eng > h2, .bahn-breit > h1, .bahn-breit > h2,
.augenbraue + h1, .augenbraue + h2,
.karte > h3:first-child, .definition > h3:first-child,
.waswenn h3, .zusage h3, .strang > h2, footer h4 { margin-top: 0; }
h2 + h3, h1 + h3 { margin-top: 1.2rem; }

/* Das abgesetzte Beispiel. Die Gründerin hat den Schwerbehinderten-Fall als
   zentral markiert: eingerückt, mit linker Linie, gleiche Schriftgröße.
   Kein Kursiv — das trägt in Inter nicht über vier Absätze. */
.beispielkasten {
  margin: 1.8rem 0;
  padding: 1.3rem 0 1.3rem 1.6rem;
  border-left: 3px solid var(--s-gesundheit);
  background: linear-gradient(90deg, var(--salbei-hell) 0%, transparent 60%);
}
.beispielkasten p { line-height: 1.62; }
.beispielkasten p + p { margin-top: .8rem; }

/* Die Figur auf der Startseite: drinnen die eigene Ordnung, draußen die Form
   der empfangenden Stelle. Nachgebaut aus der Darstellung des A0-Posters. */
.figur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin: 2rem 0 1rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papier);
}
.figur-innen, .figur-aussen { padding: 1.5rem 1.6rem; }
.figur-innen { background: var(--salbei-hell); }
.figur-marke {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; color: var(--salbei-tief);
  margin-bottom: .9rem;
}
.figur ul { list-style: none; margin: 0; padding: 0; }
.figur li {
  padding: .5rem 0; border-bottom: 1px dashed var(--rand);
  font-size: .95rem; line-height: 1.45;
}
.figur li:last-child { border-bottom: 0; }
.figur-aussen li em { color: var(--ink3); }
.figur-grenze {
  position: relative; width: 2px; background: var(--salbei-mid);
}
.figur-grenze span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--salbei-tief);
  background: var(--papier); padding: .3rem .5rem;
}
@media (max-width: 720px) {
  .figur { grid-template-columns: 1fr; }
  .figur-grenze { width: auto; height: 2px; }
  .figur-grenze span { transform: translate(-50%, -50%); }
}

/* Eine stumme Karte: dieselbe Form, aber ohne Verweis-Anmutung. */
.karte.stumm { background: transparent; border-style: dashed; }
.bahn.tief .karte.stumm { border-color: rgba(255,255,255,.28); }
.bahn.tief .karte.stumm p { color: var(--rand-warm); }

/* Weiterlesen am Seitenende. Der Befund war: die Navigation sagt, was es
   gibt, nicht, wo man als nächstes hingeht. bauen.py prüft, dass es auf
   jeder Seite steht. */
.bahn.weiterlesen { background: var(--cream); border-top: 1px solid var(--rand); padding-top: 3rem; }
.bahn.weiterlesen .karte { background: var(--papier); }
.bahn.weiterlesen .karte h3 { color: var(--salbei); }

/* Das Impressum trug seine Angaben in einem auto-fit-Raster; bei ungleich
   langen Einträgen reißen die Zeilen auseinander und eine Spalte steht
   sichtbar tiefer. Masonry-artige Spalten setzen jeden Eintrag direkt unter
   den vorigen, ohne Zeilenraster. */
.impressum-raster {
  display: block;
  columns: 3 260px;
  column-gap: 2.2rem;
}
.impressum-raster p {
  break-inside: avoid;
  margin: 0 0 1.4rem;
}

/* Drei Übergänge auf der Startseite, nicht elf — die vollständige Reihe steht
   auf privat.html. Dieselben Karten, nur ein engeres Raster. */
.anlaesse.drei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Der Kopf der Startseite. Vorher stand die Überschrift allein auf einer
   leeren Fläche; die rechte Hälfte tat nichts, und darunter kam Weiß.
   Gründerin am 12.09.2026: „nackt und technokratisch". */
.bahn.kopf { padding-top: 3.2rem; padding-bottom: 3.2rem; background: #eae3d2; }
.kopf-raster {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 3rem; align-items: center;
}
.kopf-text h1 { margin-bottom: 1.1rem; }
.kopf-text .lead { margin-bottom: 1.6rem; }
.kopf-bild { margin: 0; position: relative; }
.kopf-bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; display: block;
}
.kopf-bild figcaption {
  position: absolute; right: .7rem; bottom: .6rem;
  font-size: .68rem; letter-spacing: .04em; color: #fff;
  background: rgba(28,42,30,.55); padding: .15rem .5rem; border-radius: 4px;
}
@media (max-width: 820px) {
  .kopf-raster { grid-template-columns: 1fr; gap: 1.8rem; }
  .kopf-bild img { aspect-ratio: 16 / 9; }
}

/* Versuch vom 12.09.2026, Fließtextblöcke in breiten Bahnen zu zentrieren:
   zurückgenommen. Der Text schwebte dann unter einer linksbündigen
   Überschrift. Linksbündig ist richtig, weil es an Überschrift und
   Kartenraster ausgerichtet ist. */


/* ══════════════════════════════════════════════════════════════════════════
   Die Rollenweiche auf der Institutionenseite (12.09.2026).
   Vier Leser, ein Durchlauf — vorher las jeder drei Viertel Fremdes. Statt
   vier gleicher Kaesten eine Liste: Haarlinie statt Rahmen, je Rolle ein
   eigener Ton als schmale Kante, die Rollenbezeichnung gross und links,
   der Text rechts. Reduziert, damit die Seite nicht wie ein Katalog wirkt.
   ══════════════════════════════════════════════════════════════════════════ */
.rollen { max-width: var(--breit); margin: 0 auto; }
.rolle {
  display: grid; grid-template-columns: minmax(210px, 1fr) minmax(0, 2.1fr);
  gap: 1rem 3.2rem; padding: 2.8rem 0 2.8rem 1.4rem;
  border-top: 1px solid var(--rand); position: relative;
}
.rolle:first-child { border-top: 0; }
.rolle::before {
  content: ""; position: absolute; left: 0; top: 2.9rem; width: 4px; height: 2.4rem;
  background: var(--ton, var(--salbei)); border-radius: 2px;
}
.rolle-marke span {
  display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: .5rem;
}
.rolle-marke h3 { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--salbei-tief); }
.rolle-text p { margin: 0 0 .9rem; }
.rolle-text p:last-child { margin-bottom: 0; }
.rolle-tiefe a {
  font-size: .92rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 1px;
}
.rolle-tiefe a::after { content: " →"; }
@media (max-width: 780px) {
  .rolle { grid-template-columns: 1fr; gap: .8rem; padding-top: 2rem; padding-bottom: 2rem; }
  .rolle::before { top: 2.1rem; }
}

/* Sprachwahl in der Kopfleiste — dieselbe Umschaltung wie auf literatur.html:
   `setLang` blendet die Fassungen um, DE ist die Voreinstellung. */
.sprachwahl { display: flex; gap: .3rem; margin-left: 1rem; }
.sprachwahl button { font: inherit; font-size: .82rem; letter-spacing: .04em; padding: .25rem .5rem;
  border: 1px solid var(--linie, #e4dfd2); background: transparent; color: var(--ink3, #637568);
  border-radius: .4rem; cursor: pointer; }
.sprachwahl button.aktiv { color: var(--salbei, #4F6539); border-color: var(--salbei, #4F6539); }
.sprachwahl button:hover { color: var(--salbei, #4F6539); }
@media (max-width: 860px) { .sprachwahl { margin-left: auto; margin-right: .6rem; } }

/* Bildschirmfoto aus der Anwendung — soll wie ein Fenster wirken, nicht wie ein Stimmungsbild. */
.app-bild { margin: 1.6rem 0 0; max-width: 720px; }
.app-bild img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  filter: none;
}

/* ─── Aus der Anwendung übernommen ─── */
.nav-wort-zwei { color: var(--gold); }

/* Der Hinweiskasten der Anwendung: heller Grund, Balken links. */
.notiz {
  background: var(--salbei-hell);
  border-left: 4px solid var(--salbei);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.notiz > :first-child { margin-top: 0; }
.notiz > :last-child  { margin-bottom: 0; }

/* Im Kopf steht die Anwendung selbst: kein Bildausschnitt, sondern das ganze Fenster. */
.kopf-app img {
  width: 100%; height: auto; object-fit: contain;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  filter: none;
  background: #fff;
}

/* Wie in der Anwendung: der nicht gefüllte Knopf trägt links einen Streifen,
   statt rundum eine Kontur. */
.knopf.leer {
  background: #fff;
  border: 1px solid var(--rand-warm);
  border-left: 3px solid var(--salbei-mid);
  border-radius: 4px 11px 11px 4px;
  color: var(--salbei-tief);
}
.knopf.leer:hover {
  background: var(--salbei-hell);
  border-color: var(--rand-warm);
  border-left-color: var(--salbei);
  color: var(--salbei-tief);
}

/* Keine gefüllten Knöpfe — die Anwendung kennt keine. Rangfolge über den
   Grundton und die Stärke des Streifens, nicht über die Fläche. */
.knopf {
  background: var(--salbei-hell);
  border: 1px solid var(--rand-warm);
  border-left: 4px solid var(--salbei);
  border-radius: 4px 11px 11px 4px;
  color: var(--salbei-tief);
}
.knopf:hover {
  background: #fff;
  border-color: var(--rand-warm);
  border-left-color: var(--salbei-tief);
  color: var(--salbei-tief);
}

/* ─── Style Guide 2.2 + 5.3 · Topbar ────────────────────────────────
   Wörtlich aus dem Style Guide, Abschnitt 5.3:
   „.topbar: --salbei-dunkel Fläche, --auf-akzent Text, Bildmarke auf
    cremefarbenem Plättchen (--cream), Wortzug .lw-vivo #edefea /
    .lw-depot #a7c3b0."
   Das Logo trägt tiefes Grün und Gold-Verläufe — auf Salbei verschwindet
   es. Das Plättchen ist genau dafür da. ─────────────────────────────── */
nav {
  background: var(--salbei);
  border-bottom: none;
}

/* Bildmarke auf cremefarbenem Plättchen. */
.nav-logo img {
  width: 42px; height: 42px;
  padding: 5px;
  background: var(--cream);
  border-radius: 50%;
  box-sizing: content-box;
}

/* Wortzug in den beiden Tönen des Style Guide, nicht in Gold. */
.nav-wort      { color: #edefea; }
.nav-wort-zwei { color: #a7c3b0; }

.nav-links a { color: rgba(255,255,255,.88); }
.nav-links a:hover, .nav-links a.aktiv { color: #fff; }
.nav-links a.aktiv { border-bottom: 2px solid #a7c3b0; }
.sprachwahl button { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.45); background: transparent; }
.sprachwahl button.aktiv { color: var(--salbei-tief); background: var(--cream); border-color: var(--cream); }
.burger-label span { background: #fff; }

/* Die Inhaltsflächen tragen Papier, nicht Weiß. */
.bahn.hell { background: var(--papier); }

/* ─── Kästen beschränken ────────────────────────────────────────────
   Zehn gleich aussehende Kästen auf der Startseite, davon sieben ohne
   Verweis. Ein Kasten heißt „hier ist etwas anzuklicken"; wo nichts zu
   klicken ist, ist er nur Rahmen um Fließtext. Die stumme Karte legt ihn
   ab und behält den Streifen links, wie die Knöpfe und wie die
   Anwendung. ─────────────────────────────────────────────────────── */
.karte.stumm {
  background: transparent;
  border: none;
  border-left: 3px solid var(--salbei-mid);
  border-radius: 0;
  padding: .2rem 0 .2rem 1.2rem;
}
.bahn.tief .karte.stumm { border-left-color: #a7c3b0; }
.bahn.tief .karte.stumm p { color: var(--rand-warm); }

/* „Nichts mittig" steht jetzt im Abschnitt „Raster" oben, in einer Regel
   (21.09.2026). Hier stand bis dahin ein zweiter Block, der nur einen Teil der
   Kanten zurücksetzte. */

/* ─── Die eine Kante (21.09.2026) ────────────────────────────────────
   Steht ganz am Ende, damit keine Komponentenregel darüber `margin: 0 auto`
   setzen kann. Was hier fehlt, wird wieder mittig. Beim Anlegen einer neuen
   Bahn oder eines neuen Blocks: hier eintragen.
   ──────────────────────────────────────────────────────────────────── */
.bahn-eng, .bahn-breit, .bild-breit, .fuss-raster, .fuss-unten, .rollen {
  margin-left: 0; margin-right: auto;
}
@media (min-width: 1400px) {
  .bahn-eng, .bahn-breit, .bild-breit, .fuss-raster, .fuss-unten, .rollen { margin-left: 4rem; }
}

/* ─── Bildton (21.09.2026) ───────────────────────────────────────────
   Die Startseite wirkte kühl (Carola, 21.09.). Zwei der Fotos sind Schwarzweiß:
   das Kopfbild und die Geburtskarte. Ein leichter Sepia-Stich nimmt ihnen das
   reine Grau und passt sie an den warmen Hafer-Ton des Kopfes an. Rücknahme:
   diesen Block löschen. Die frühere Sättigungsminderung (saturate .9) ist
   entfallen; sie kühlte die Farbfotos minimal und diente sonst nichts. */
img[src$="img-hands-bw.jpg"], img[src$="img-birth.jpg"] { filter: sepia(.22); }

/* ═══════════════════════════════════════════════════════════════════
   Stand 23.09.2026 — Update der Live-Seite (Carola: „ein Update und eine
   sinnvolle Reduktion der aktuellen Seite"). Steht am Ende, damit es gilt.
   ═══════════════════════════════════════════════════════════════════ */

/* Knick in der Kopfleiste: `li + li { margin-top: .4rem }` (Fließtext-Regel oben)
   griff auch in der Navigation — jeder Punkt außer dem ersten saß 0,4rem tiefer.
   Gesehen auf allen erzeugten Seiten („Beruflich ist weiter oben"). */
nav ul, nav li { margin: 0; }
nav li + li { margin-top: 0; }

/* Unter der Kopfleiste kein Hafer-Ton mehr (Carola: „sieht schmutzig aus").
   Alle Kopfbahnen tragen dieselbe Seitenfläche. */
.bahn.kopf { background: var(--cream); }

/* Lesebreite nach heutiger Konvention: Zeilen um 70 Zeichen, die Schrift wächst
   mit dem Fenster, und die rechte Seite trägt ein zweites Element (Foto, Liste),
   statt leer zu bleiben. Carola: „auf allen Seiten geht der Text nur bis zur
   Mitte". Zurücknehmen: diesen Block löschen. */
body { font-size: clamp(16px, 0.86rem + 0.28vw, 19px); }
:root { --text: 70ch; }
.bahn-eng { max-width: var(--breit); }
.bahn-eng > p, .bahn-eng > .lead, .bahn-eng > h1, .bahn-eng > h2,
.bahn-eng > ul, .bahn-eng > ol { max-width: var(--text); }
/* Zweispaltige Reduktion vom 21.09. aufheben — sie ersetzt die obige Regel. */
@media (min-width: 900px) {
  .bahn-eng:not(:has(> :not(.augenbraue, h1, h2, p))):not(:has(> :is(h1, h2) ~ :is(h1, h2))):has(> p ~ p) {
    column-count: auto;
  }
}

/* Die zweiteilige Bahn: links Text, rechts ein Beistell-Element. */
.zweiteilig {
  max-width: var(--breit);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 2.4rem 3.5rem; align-items: start;
}
.zweiteilig > .text > p, .zweiteilig > .text > .lead,
.zweiteilig > .text > h1, .zweiteilig > .text > h2 { max-width: var(--text); }
.zweiteilig > .text > :first-child { margin-top: 0; }
@media (max-width: 820px) {
  .zweiteilig { grid-template-columns: 1fr; }
  .zweiteilig > .seite { order: -1; max-width: 340px; }
}

/* Fotos klein: höchstens rund ein Drittel der Inhaltsbreite (Carola: „die Fotos
   am besten nicht so groß"). Gilt für Kopf- und Beistellbilder. */
.foto { margin: 0; position: relative; max-width: 340px; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.foto figcaption {
  position: absolute; right: .5rem; bottom: .45rem; margin: 0;
  font-size: .64rem; letter-spacing: .04em; color: #fff;
  background: rgba(28,42,30,.55); padding: .1rem .45rem; border-radius: 4px;
}
@media (min-width: 821px) {
  .kopf-raster { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); }
}
.kopf-bild { max-width: 340px; }
@media (max-width: 820px) { .kopf-raster > .foto, .kopf-bild { max-width: 260px; } }

/* Beistell-Liste: die Kernpunkte eines Abschnitts rechts neben dem Text. */
.merkliste { list-style: none; margin: 0; padding: 0;
  border-left: 3px solid var(--salbei-mid); padding-left: 1.2rem; }
.merkliste li { font-size: .95rem; color: var(--ink); }
.merkliste li + li { margin-top: .7rem; }

/* Bezug: Privat und Pro gleich angeordnet, je ein Knopf. */
.bezug { display: grid; gap: 1.6rem; grid-template-columns: 1fr; max-width: var(--breit); }
@media (min-width: 760px) { .bezug { grid-template-columns: 1fr 1fr; } }
.bezug .karte { display: flex; flex-direction: column; }
.bezug .karte .knopfreihe { margin-top: auto; padding-top: 1.2rem; }

/* Bausteine (Institutionen): fester Kern, wählbare Teile. */
.bausteine { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.6rem 0; }
.baustein { background: var(--papier); border: 1px solid var(--rand); border-radius: 8px; padding: 1.1rem 1.2rem; }
.baustein .marke { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.baustein h3 { margin: .35rem 0 .3rem; }
.baustein p { font-size: .92rem; }
.baustein.kern { border-color: var(--salbei); background: var(--salbei-hell); }

/* Fußzeile in vier Spalten: Marke · Für wen · Hintergrund · Rechtliches.
   Die aktuelle Seite steht fett und unverlinkt. */
.fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
footer .hier { color: #fff; font-weight: 600; }
/* Die zweiteilige Bahn gehört zur einen Kante. */
.zweiteilig { margin-left: 0; margin-right: auto; }
@media (min-width: 1400px) { .zweiteilig { margin-left: 4rem; } }
/* Lange Merkliste in zwei Spalten, damit sie nicht höher wird als der Text daneben. */
.merkliste.zweispaltig { column-count: 2; column-gap: 1.6rem; }
.merkliste.zweispaltig li { break-inside: avoid; margin: 0 0 .6rem; }
.zweiteilig:has(.merkliste.zweispaltig) { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); }
@media (max-width: 820px) { .zweiteilig:has(.merkliste.zweispaltig) { grid-template-columns: 1fr; } }

/* Stufen der Zusammenarbeit (Institutionen, 23.09.2026): eine Treppe, die mit
   jeder Stufe wächst — vom Ausprobieren bis zum eigenen Produkt. */
.stufen { list-style: none; margin: 2.4rem 0 1.6rem; padding: 0;
  display: grid; gap: 1.4rem; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 900px) { .stufen { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.stufe { position: relative; background: var(--papier); border: 1px solid var(--rand);
  border-radius: 10px; padding: 1.3rem 1.3rem 1.2rem; margin: 0; display: flex; flex-direction: column; }
.stufen li + li { margin-top: 0; }
.stufe .treppe { display: block; height: 10px; border-radius: 5px; margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--salbei-mid), var(--salbei)); }
.stufe.s1 .treppe { width: 25%; } .stufe.s2 .treppe { width: 50%; }
.stufe.s3 .treppe { width: 75%; } .stufe.s4 .treppe { width: 100%; }
@media (min-width: 900px) {
  .stufe.s1 { min-height: 17rem; } .stufe.s2 { min-height: 19rem; }
  .stufe.s3 { min-height: 21rem; } .stufe.s4 { min-height: 23rem; border-color: var(--salbei); background: var(--salbei-hell); }
}
.stufe .nr { position: absolute; top: -0.9rem; right: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--salbei); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; }
.stufe h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.stufe .beispiel { font-size: .93rem; }
.stufe .aufwand { margin-top: auto; padding-top: .9rem; font-size: .84rem; font-weight: 600; color: var(--gold); }

/* Baukasten-Grafik (Institutionen, 23.09.2026): wählbare Teile → Kern → Produkt. */
.grafik-huelle { overflow-x: auto; margin: 2rem 0 1.2rem; max-width: var(--breit); }
.baukasten-grafik { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--font); }
.bk-teil { fill: var(--papier); stroke: var(--rand); }
.bk-marke { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: var(--gold); }
.bk-wert { font-size: 16px; font-weight: 600; fill: var(--ink); }
.bk-linie { fill: none; stroke: var(--salbei-mid); stroke-width: 2; }
.bk-kern { fill: var(--salbei); }
.bk-marke-hell { font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: #a7c3b0; }
.bk-kern-titel { font-size: 24px; font-weight: 700; fill: #fff; }
.bk-kern-text { font-size: 13px; fill: #edefea; }
.bk-pfeil { fill: none; stroke: var(--salbei); stroke-width: 2.5; }
.bk-produkt { fill: #fff; stroke: var(--salbei); stroke-width: 1.5; }
.bk-produkt-kopf { fill: var(--salbei-hell); }
.bk-logo { fill: #fff; stroke: var(--ink3); }
.bk-produkt-titel { font-size: 16px; font-weight: 700; fill: var(--ink); }
.bk-produkt-text { font-size: 14px; fill: var(--ink2); }
.bk-aus { fill: var(--salbei-hell); stroke: var(--rand); }
.bk-aus-titel { font-size: 14px; font-weight: 700; fill: var(--salbei-tief); }
.bk-aus-text { font-size: 12px; fill: var(--ink2); }
/* Merkliste neben dem Text beginnt auf Höhe des ersten Absatzes, nicht auf Höhe der
   Augenbraue (Carola, 23.09.: „der Kasten rechts ist zu weit oben"). */
@media (min-width: 821px) { .zweiteilig > .seite:has(> .merkliste) { padding-top: 5.4rem; } }
/* Text neben einem Bildschirmfoto der Anwendung: das Foto bekommt die größere Spalte. */
.app-zeile { display: grid; grid-template-columns: 1fr; gap: 1.6rem 3rem; align-items: center; max-width: var(--breit); margin-top: 2rem; }
@media (min-width: 900px) { .app-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.app-zeile .app-bild { margin: 0; max-width: none; }
.app-zeile .app-bild figcaption { margin-top: .6rem; }
/* Baukasten-Grafik etwas kleiner (Carola, 24.09.2026). */
.grafik-huelle { max-width: 860px; }
/* Links: durchgehender Unterstrich, nicht an „g", „p", „y" unterbrochen (Carola, 24.09.). */
a { text-decoration-skip-ink: none; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
/* Links zeitgemäß (Carola, 24.09.: Farbe und Strich „sehen 90er aus"): Salbeigrün statt
   Ocker, kein Dauer-Unterstrich; erkennbar bleiben sie über Farbe UND Schriftstärke
   (nicht über Farbe allein, WCAG 1.4.1), der Unterstrich erscheint beim Darüberfahren. */
main a:not(.knopf):not(.karte), .impressum-raster a {
  color: var(--salbei-tief); font-weight: 600; text-decoration: none;
}
main a:not(.knopf):not(.karte):hover, main a:not(.knopf):not(.karte):focus-visible,
.impressum-raster a:hover {
  color: var(--salbei-tief); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-color: var(--salbei-mid);
}
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Links auf dunkelgrünen Flächen (Kontaktbahnen der Handseiten, .bahn.tief): hell statt Salbei,
   sonst sind sie unsichtbar (24.09.2026, E-Mail im Kontakt von org.html). */
.bahn.tief a:not(.knopf), header a:not(.knopf) { color: #fff; }
.bahn.tief a:not(.knopf):hover { text-decoration-color: #a7c3b0; }

/* Kontakt auf den Handseiten (Konzept, EU-Rahmen): hell und kompakt, damit er nicht mit der
   grünen Fußzeile verschmilzt (Carola, 24.09.: „der Bereich ist RIESIG"). */
#kontakt:not(.bahn) { background: var(--papier); padding: 3rem 2rem; border-top: 1px solid var(--rand); }
#kontakt:not(.bahn) .eyebrow { color: var(--salbei); }
#kontakt:not(.bahn) h2 { color: var(--ink); font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: .6rem; }
#kontakt:not(.bahn) .lead { color: var(--ink2); font-size: 1rem; max-width: 70ch; }
@media (min-width: 1400px) { #kontakt:not(.bahn) .container { margin-left: 4rem; } }

/* Kopfleiste mit neun Punkten: etwas enger, und früher ins Burger-Menü,
   damit DE/EN nicht abgeschnitten wird (24.09.2026). */
.nav-links { gap: 1.25rem; }
.nav-links a { font-size: .86rem; }
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .burger-label { display: block; }
}
/* Fußzeile auf den Handseiten (AGB, Datenschutz …): deren alte Stile zentrieren sie und
   färben Absätze dunkel. Hier gilt die Fußzeile der erzeugten Seiten (24.09.2026). */
footer, footer .fuss-raster, footer .fuss-raster > div, footer .fuss-unten { text-align: left; }
footer .fuss-raster p, footer .fuss-raster p span { color: var(--rand-warm); }
footer .fuss-raster h4 { color: var(--s-gesundheit); }
footer .fuss-raster a { color: var(--rand-warm); font-weight: 400; }
footer .fuss-raster .hier { color: #fff; font-weight: 600; }
/* Hilfe-Seite (24.09.2026) */
.hilfe-inhalt { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: var(--breit); }
.hilfe-inhalt li { margin: 0; }
.hilfe-thema { padding: 2.2rem 0; border-bottom: 1px solid var(--rand); scroll-margin-top: 100px; }
.hilfe-thema:first-child { padding-top: 0; }
.hilfe-thema:last-child { border-bottom: 0; }
.hilfe-thema h2 { margin-bottom: .6rem; }
/* Schriftgröße zurück auf das Maß der Anwendung (Carola, 24.09.: „der Text ist riesig, auch im
   Vergleich zur Navigation und zur App"). Hebt die mitwachsende Schrift vom 23.09. auf. */
body { font-size: 16px; }
.lead { font-size: 1.06rem; }
h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h2 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
/* Carola, 24.09.: „15 und 16 Pixel." Grundschrift 15 px für ALLE Seiten (auch die Handseiten,
   die in rem rechnen), Einleitungen 16 px, Menü fest 14 px. */
html { font-size: 15px; }
body { font-size: 15px; }
.lead, p.lead { font-size: 16px; }
.nav-links a { font-size: 14px; }