/* =========================================================================
   Ganzheitliche Energiearbeit — Designsystem
   Reihenfolge: Tokens · Grundlagen · Layout · Komponenten · Seiten · Zustände
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Farbe */
  --stein: #e7e4dc;
  --stein-tief: #dcd8ce;
  --papier: #f3f1eb;
  --tiefe: #17282a;
  --tiefe-weich: #2c4144;
  --salbei: #63775f;
  --salbei-hell: #8fa189;
  --lehm: #a28b72;
  --messing: #8a7845;
  --warnung: #8c4a32;

  --text: var(--tiefe);
  --text-leise: #4e5c5c;
  --linie: #c6c0b3;
  --linie-fein: #d5d0c4;

  /* Typografie */
  --serif: 'Source Serif 4', 'Source Serif Pro', Charter, 'Bitstream Charter',
    'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --gr-xs: 0.8125rem;
  --gr-s: 0.9375rem;
  --gr-basis: 1.1875rem;
  --gr-m: 1.375rem;
  --gr-l: 1.75rem;
  --gr-xl: 2.25rem;
  --gr-xxl: 2.9rem;
  --gr-xxl: clamp(2.4rem, 5.2vw, 3.9rem);

  /* Raum */
  --raum-1: 0.375rem;
  --raum-2: 0.75rem;
  --raum-3: 1.25rem;
  --raum-4: 2rem;
  --raum-5: 3rem;
  --raum-6: 4.5rem;
  --raum-7: 7rem;

  --mass: 34rem;      /* Lesebreite ~68 Zeichen */
  --mass-weit: 46rem;
  --bahn: 76rem;      /* maximale Seitenbreite */
  --rand: 1.5rem;
  --rand: clamp(1.25rem, 5vw, 3.5rem);

  --radius-bedienung: 10px;
  --radius-feld: 8px;

  --tempo: 180ms;
  --kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- 2. Grundlagen ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--stein);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--gr-basis);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.006em;
  margin: 0 0 var(--raum-3);
  text-wrap: balance;
  hyphens: manual;
}

h1 { font-size: 2.9rem; font-size: var(--gr-xxl); line-height: 1.06; letter-spacing: -0.018em; }
h2 { font-size: var(--gr-xl); }
h3 { font-size: var(--gr-m); }
h4 { font-size: var(--gr-basis); }

p { margin: 0 0 var(--raum-3); max-width: var(--mass); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--salbei);
  transition: text-decoration-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
a:hover { text-decoration-color: var(--tiefe); background: rgba(99, 119, 95, 0.12); }

:focus-visible {
  outline: 3px solid var(--tiefe);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--dunkel :focus-visible,
.kopf--dunkel :focus-visible { outline-color: var(--messing); }

strong, b { font-weight: 650; }
small { font-size: var(--gr-s); }

ul, ol { margin: 0 0 var(--raum-3); padding-left: 1.35em; max-width: var(--mass); }
li { margin-bottom: var(--raum-1); }
li::marker { color: var(--salbei); }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--raum-5) 0;
}

table { border-collapse: collapse; width: 100%; }

img, svg { max-width: 100%; height: auto; }

blockquote {
  margin: var(--raum-4) 0;
  padding-left: var(--raum-3);
  border-left: 2px solid var(--lehm);
  font-size: var(--gr-m);
  line-height: 1.45;
  max-width: var(--mass);
}
blockquote p:last-child { margin-bottom: 0; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--raum-3); top: -4rem;
  z-index: 60; background: var(--tiefe); color: var(--papier);
  padding: 0.7rem 1.1rem; border-radius: var(--radius-bedienung);
  font-family: var(--sans); font-size: var(--gr-s); text-decoration: none;
  transition: top var(--tempo) var(--kurve);
}
.sprungmarke:focus { top: var(--raum-3); }

main:focus { outline: none; }

/* --- 3. Layout ---------------------------------------------------------- */
.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--raum-6); }
.abschnitt--eng { padding-block: var(--raum-5); }
.abschnitt--weit { padding-block: var(--raum-7); }

/* Die Achse: feine Senkrechte, an der Abschnitte hängen */
@media (min-width: 900px) {
  .achse-halter { position: relative; padding-left: 3.25rem; }
  .achse-halter::before {
    content: '';
    position: absolute; left: 0; top: 0.55em; bottom: 0;
    width: 1px; background: var(--linie);
  }
  .achse-halter > h2::before,
  .achse-halter > h3::before {
    content: '';
    position: absolute; left: -3.25rem; top: 0.55em;
    width: 1.5rem; height: 1px; background: var(--salbei);
  }
  .achse-halter > h2, .achse-halter > h3 { position: relative; }
}

.spalten {
  display: grid;
  gap: var(--raum-5) var(--raum-5);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .spalten--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .spalten--haupt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .spalten--neben { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}

.stapel > * + * { margin-top: var(--raum-4); }

.band { background: var(--stein-tief); }
.band--papier { background: var(--papier); }
.band--dunkel {
  background: var(--tiefe);
  color: #e6e9e4;
}
.band--dunkel h1, .band--dunkel h2, .band--dunkel h3 { color: #f2f0ea; }
.band--dunkel a { text-decoration-color: var(--salbei-hell); }
.band--dunkel a:hover { background: rgba(143, 161, 137, 0.18); text-decoration-color: #f2f0ea; }
.band--dunkel .achse-halter::before { background: rgba(230, 233, 228, 0.28); }
.band--dunkel .achse-halter > h2::before { background: var(--salbei-hell); }

.blattend { max-width: var(--mass-weit); }

/* --- 4. Komponenten ----------------------------------------------------- */

/* 4.1 Kopf und Navigation */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--stein) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linie-fein);
}
.kopf-innen {
  max-width: var(--bahn); margin-inline: auto;
  padding: var(--raum-2) var(--rand);
  display: flex; align-items: center; gap: var(--raum-3);
}

.marke {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--tiefe); flex: 0 0 auto;
}
.marke:hover { background: none; }
.marke-zeichen { width: 20px; height: 24px; flex: 0 0 auto; }
.marke-zeichen line { stroke: var(--linie); stroke-width: 1; }
.marke-zeichen circle { fill: var(--messing); }
.marke:hover .marke-zeichen circle { fill: var(--salbei); }
.marke-wort { display: flex; flex-direction: column; line-height: 1.05; }
.marke-zeile1 { font-size: var(--gr-xs); font-family: var(--sans); color: var(--text-leise); letter-spacing: 0.01em; }
.marke-zeile2 { font-size: var(--gr-m); font-weight: 600; letter-spacing: -0.012em; }

.hauptmenue { margin-left: auto; }
.hauptmenue ul {
  display: flex; gap: var(--raum-3); list-style: none;
  margin: 0; padding: 0; max-width: none;
  font-family: var(--sans); font-size: var(--gr-s);
}
.hauptmenue li { margin: 0; }
.hauptmenue a {
  display: block; padding: 0.45rem 0.15rem;
  text-decoration: none; border-bottom: 2px solid transparent;
  color: var(--text-leise);
}
.hauptmenue a:hover { color: var(--tiefe); background: none; border-bottom-color: var(--linie); }
.hauptmenue a[aria-current='page'] { color: var(--tiefe); border-bottom-color: var(--messing); }

.menue-schalter {
  display: none; margin-left: auto;
  align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: var(--gr-s);
  background: var(--papier); color: var(--tiefe);
  border: 1px solid var(--linie);
  border-radius: var(--radius-bedienung);
  padding: 0.55rem 0.85rem; cursor: pointer;
  min-height: 44px;
}
.menue-strich {
  width: 18px; height: 10px; position: relative; display: block;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menue-strich::after {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 100%; border-top: 2px solid currentColor;
}
.menue-schalter[aria-expanded='true'] { background: var(--tiefe); color: var(--papier); border-color: var(--tiefe); }

@media (max-width: 860px) {
  .menue-schalter { display: inline-flex; }
  .hauptmenue {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    box-shadow: 0 18px 32px -26px rgba(23, 40, 42, 0.7);
  }
  .hauptmenue.ist-offen { display: block; }
  .hauptmenue ul {
    flex-direction: column; gap: 0;
    padding: var(--raum-2) var(--rand) var(--raum-3);
    font-size: var(--gr-basis);
  }
  .hauptmenue a {
    padding: 0.85rem 0; border-bottom: 1px solid var(--linie-fein);
    min-height: 48px; display: flex; align-items: center;
  }
  .hauptmenue a[aria-current='page'] { border-bottom-color: var(--messing); }
}

/* 4.2 Bedienelemente */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; min-height: 48px;
  padding: 0.75rem 1.35rem;
  font-family: var(--sans); font-size: var(--gr-s); font-weight: 500;
  border-radius: var(--radius-bedienung);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.knopf--haupt { background: var(--tiefe); color: #f3f1eb; border-color: var(--tiefe); }
.knopf--haupt:hover { background: var(--tiefe-weich); border-color: var(--tiefe-weich); }
.knopf--neben { background: transparent; color: var(--tiefe); border-color: var(--tiefe); }
.knopf--neben:hover { background: rgba(23, 40, 42, 0.07); }
.knopf--still {
  background: none; border-color: transparent; color: var(--text-leise);
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: var(--linie); padding-inline: 0.4rem;
}
.knopf--still:hover { color: var(--tiefe); text-decoration-color: var(--tiefe); }
.knopf[aria-disabled='true'],
.knopf:disabled {
  background: var(--stein-tief); color: var(--text-leise);
  border-color: var(--linie); cursor: not-allowed;
}
.band--dunkel .knopf--haupt { background: var(--papier); color: var(--tiefe); border-color: var(--papier); }
.band--dunkel .knopf--haupt:hover { background: #fff; }
.band--dunkel .knopf--neben { color: #e6e9e4; border-color: rgba(230, 233, 228, 0.55); }
.band--dunkel .knopf--neben:hover { background: rgba(230, 233, 228, 0.12); }

.link-schalter {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-family: var(--sans); font-size: var(--gr-s);
  color: inherit; text-decoration: underline;
  text-underline-offset: 0.2em; text-decoration-color: var(--salbei);
  min-height: 44px;
}
.link-schalter:hover { text-decoration-color: currentColor; }

.aktionen {
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3);
  align-items: center; margin-top: var(--raum-4);
}

/* 4.3 Hinweisflächen */
.hinweis {
  border-left: 3px solid var(--salbei);
  background: var(--papier);
  padding: var(--raum-3) var(--raum-3) var(--raum-3) var(--raum-3);
  margin: var(--raum-4) 0;
  max-width: var(--mass-weit);
  font-size: var(--gr-s);
  line-height: 1.6;
  font-family: var(--sans);
}
.hinweis > :last-child { margin-bottom: 0; }
.hinweis h3,
.hinweis .hinweis-titel {
  font-family: var(--sans); font-size: var(--gr-s); font-weight: 650;
  margin: 0 0 var(--raum-1); max-width: none; line-height: 1.4;
}
.hinweis--grenze { border-left-color: var(--lehm); }
.hinweis--offen { border-left-color: var(--warnung); background: #efe9e2; }
.band--dunkel .hinweis { background: rgba(243, 241, 235, 0.07); border-left-color: var(--salbei-hell); }

.entwurf {
  background: #f7e6d8;
  color: #6d3b22;
  border-bottom: 1px dashed #b06a45;
  padding: 0 0.25em;
  font-family: var(--sans);
  font-size: 0.9em;
}

/* 4.4 Karten und Listen */
.eintraege { list-style: none; padding: 0; margin: 0; max-width: none; }
.eintraege > li {
  border-top: 1px solid var(--linie);
  padding-block: var(--raum-4);
  margin: 0;
}
.eintraege > li:last-child { border-bottom: 1px solid var(--linie); }

.fragenliste { list-style: none; padding: 0; margin: 0; max-width: var(--mass-weit); }
.fragenliste li {
  border-bottom: 1px solid var(--linie-fein);
  padding: var(--raum-2) 0 var(--raum-2) 1.6rem;
  position: relative;
  font-size: var(--gr-m);
  line-height: 1.4;
}
.fragenliste li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 0.7rem; height: 1px; background: var(--lehm);
}

.tafel {
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  padding: var(--raum-4);
}
.tafel > :last-child { margin-bottom: 0; }
.tafel h2, .tafel h3 { font-size: var(--gr-basis); margin-bottom: var(--raum-2); }

.schrittfolge { counter-reset: schritt; list-style: none; padding: 0; max-width: var(--mass-weit); }
.schrittfolge > li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: var(--raum-3);
}
.schrittfolge > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0.1em;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lehm); border-radius: 50%;
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
}

.merkmalsliste { list-style: none; padding: 0; }
.merkmalsliste li { position: relative; padding-left: 1.6rem; }
.merkmalsliste li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.62em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 1px solid var(--salbei);
}
.merkmalsliste li[data-ohne]::before { border-style: dashed; opacity: 0.5; }

/* 4.5 Grafiken */
.grafik { display: block; width: 100%; height: auto; }
.grafik-label {
  font-family: var(--sans); font-size: 9px; fill: var(--text-leise);
}
.grafik-rahmen {
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  padding: var(--raum-4);
}
.grafik-rahmen figcaption {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  margin-top: var(--raum-3); line-height: 1.5; max-width: 40ch;
}

.achse-stamm { stroke: var(--linie); stroke-width: 1; }
.achse-linie { stroke: var(--salbei); stroke-width: 1; }
.achse-knoten { fill: none; stroke: var(--tiefe); stroke-width: 1.3; }
.achse-knoten--unten { fill: var(--tiefe); }
.achse-text { font-family: var(--sans); font-size: 10px; fill: var(--text-leise); }
.achse-text--links { text-anchor: start; }
.achse-text--rechts { text-anchor: end; }

.balken { fill: none; stroke: var(--tiefe); stroke-width: 1; }
.balken--stimmig { fill: var(--salbei); stroke: var(--salbei); }
.grundlinie { stroke: var(--linie); stroke-width: 1; }

.person { fill: none; stroke: var(--tiefe); stroke-width: 1.2; }
.person--empfangend { stroke-dasharray: 3 2.5; }
.verlauf { stroke: var(--linie); stroke-width: 1; }
.verlauf--gerichtet { stroke: var(--salbei); stroke-width: 1; fill: none; }
.spitze { fill: var(--salbei); }
.impuls { fill: var(--lehm); }
.strahlung { fill: none; stroke: var(--salbei); stroke-width: 1; opacity: 0.75; }

.schritt-linie { stroke: var(--linie); stroke-width: 1; }
.schritt-punkt { fill: var(--papier); stroke: var(--salbei); stroke-width: 1.2; }
.schritt-text { text-anchor: middle; }

.ebenen-kante { stroke: var(--linie); stroke-width: 1; }
.ebenen-knoten { fill: var(--papier); stroke: var(--tiefe); stroke-width: 1.2; }
.ebenen-text { text-anchor: middle; }

.band--dunkel .grafik-label,
.band--dunkel .achse-text { fill: rgba(230, 233, 228, 0.72); }
.band--dunkel .achse-stamm { stroke: rgba(230, 233, 228, 0.3); }
.band--dunkel .achse-linie { stroke: var(--salbei-hell); }
.band--dunkel .achse-knoten { stroke: #e6e9e4; }
.band--dunkel .achse-knoten--unten { fill: #e6e9e4; }

/* Der eine orchestrierte Moment: die Achsen zeichnen sich einmal beim Laden. */
@media (prefers-reduced-motion: no-preference) {
  .grafik--achsen.ist-animiert .achse-linie {
    stroke-dasharray: 252; stroke-dashoffset: 252;
    animation: linie-zeichnen 900ms var(--kurve) forwards;
    animation-delay: calc(220ms + var(--i) * 160ms);
  }
  .grafik--achsen.ist-animiert .achse-knoten,
  .grafik--achsen.ist-animiert .achse-text {
    opacity: 0;
    animation: sanft-ein 520ms var(--kurve) forwards;
    animation-delay: calc(700ms + var(--i) * 160ms);
  }
  .grafik--achsen.ist-animiert .achse-stamm {
    transform-origin: 50% 0;
    animation: stamm-wachsen 700ms var(--kurve) forwards;
  }
}
@keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sanft-ein { to { opacity: 1; } }
@keyframes stamm-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 4.6 Akkordeon */
.akkordeon { border-top: 1px solid var(--linie); max-width: var(--mass-weit); }
.akkordeon details { border-bottom: 1px solid var(--linie); }
.akkordeon summary {
  cursor: pointer; list-style: none;
  padding: var(--raum-3) 2.5rem var(--raum-3) 0;
  position: relative; font-size: var(--gr-m); line-height: 1.35;
  min-height: 48px; display: flex; align-items: center;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%;
  width: 0.85rem; height: 0.85rem; margin-top: -0.42rem;
  border-right: 1.5px solid var(--salbei); border-bottom: 1.5px solid var(--salbei);
  transform: rotate(45deg); transform-origin: center;
  transition: transform var(--tempo) var(--kurve);
}
.akkordeon details[open] summary::after { transform: rotate(-135deg); }
.akkordeon summary:hover { color: var(--tiefe); }
.akkordeon .akkordeon-inhalt { padding: 0 0 var(--raum-3); }
.akkordeon .akkordeon-inhalt > :last-child { margin-bottom: 0; }

/* 4.7 Preisvergleich */
.preisraster {
  display: grid; gap: var(--raum-3);
  grid-template-columns: 1fr;
  margin-top: var(--raum-4);
}
@media (min-width: 820px) {
  .preisraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3); }
}
.paket {
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  padding: var(--raum-4) var(--raum-3);
  display: flex; flex-direction: column;
}
.paket--hervor { border-color: var(--tiefe); border-width: 1px; box-shadow: inset 0 3px 0 var(--messing); }
.paket h3 { font-size: var(--gr-basis); margin-bottom: var(--raum-2); }
.paket-preis {
  font-size: var(--gr-xl); font-weight: 600; line-height: 1;
  display: block; margin-bottom: 0.2rem;
}
.paket-preis-zusatz {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  display: block; margin-bottom: var(--raum-3);
}
.paket-aufschlag {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  border-top: 1px solid var(--linie-fein); padding-top: var(--raum-2);
  margin-top: auto;
}
.paket .merkmalsliste { font-size: var(--gr-s); margin-bottom: var(--raum-3); }
.paket .knopf { width: 100%; margin-top: var(--raum-3); }

.vergleich { margin-top: var(--raum-5); }
.vergleich table { font-family: var(--sans); font-size: var(--gr-s); }
.vergleich caption {
  text-align: left; font-family: var(--sans); font-size: var(--gr-xs);
  color: var(--text-leise); padding-bottom: var(--raum-2);
}
.vergleich th, .vergleich td {
  border-bottom: 1px solid var(--linie-fein);
  padding: var(--raum-2) var(--raum-2);
  text-align: left; vertical-align: top;
}
.vergleich thead th { border-bottom: 1px solid var(--linie); font-weight: 650; }
.vergleich tbody th { font-weight: 500; }
.vergleich td { text-align: center; }
.vergleich .ja::before { content: '✓ '; color: var(--salbei); }
.vergleich .nein { color: var(--text-leise); }
.vergleich .nein::before { content: '– '; }
.vergleich-detail { display: block; font-size: var(--gr-xs); color: var(--text-leise); font-weight: 400; }

@media (max-width: 819px) { .nur-breit { display: none; } }
@media (min-width: 820px) { .nur-schmal { display: none; } }

/* 4.8 Formulare */
.formular { max-width: var(--mass); }
.feld { margin-bottom: var(--raum-3); }
.feld label {
  display: block; font-family: var(--sans); font-size: var(--gr-s);
  font-weight: 500; margin-bottom: 0.35rem;
}
.feld-hinweis {
  display: block; font-family: var(--sans); font-size: var(--gr-xs);
  color: var(--text-leise); margin-bottom: 0.4rem;
}
.feld input[type='text'],
.feld input[type='email'],
.feld textarea {
  width: 100%; font: inherit; font-size: var(--gr-basis);
  padding: 0.7rem 0.85rem; min-height: 48px;
  background: var(--papier); color: var(--tiefe);
  border: 1px solid var(--linie); border-radius: var(--radius-feld);
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover { border-color: var(--text-leise); }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--tiefe); }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: var(--warnung); border-width: 2px; }
.feld-fehler {
  display: none; font-family: var(--sans); font-size: var(--gr-xs);
  color: var(--warnung); margin-top: 0.35rem;
}
.feld[data-fehler] .feld-fehler { display: block; }
.feld-kontroll { display: flex; gap: 0.7rem; align-items: flex-start; }
.feld-kontroll input[type='checkbox'] { width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--tiefe); }
.feld-kontroll label { font-weight: 400; font-size: var(--gr-s); }

/* 4.9 Consent */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  padding: var(--raum-3);
  display: flex; justify-content: center;
}
.consent[hidden] { display: none; }
.consent--dialog { inset: 0; background: rgba(23, 40, 42, 0.42); align-items: center; }
.consent-flaeche {
  background: var(--papier);
  border: 1px solid var(--linie);
  box-shadow: 0 26px 60px -30px rgba(23, 40, 42, 0.75);
  padding: var(--raum-4);
  max-width: 44rem; width: 100%;
  max-height: min(84vh, 46rem); overflow-y: auto;
  border-radius: var(--radius-bedienung);
}
.consent-flaeche h2 { font-size: var(--gr-m); margin-bottom: var(--raum-2); }
.consent-einleitung { font-family: var(--sans); font-size: var(--gr-s); max-width: none; }
.consent-aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-3); }
.consent-aktionen .knopf { flex: 1 1 12rem; }
.consent-fuss {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  margin: var(--raum-3) 0 0; max-width: none;
}
.consent-liste { margin-top: var(--raum-3); border-top: 1px solid var(--linie-fein); }
.consent-zeile {
  display: flex; gap: var(--raum-3); align-items: flex-start;
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein);
}
.consent-beschriftung p {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  margin: 0.25rem 0 0; max-width: 48ch; line-height: 1.55;
}
.consent-titel { font-family: var(--sans); font-size: var(--gr-s); font-weight: 600; }
.consent-schalter { flex: 0 0 4.2rem; position: relative; padding-top: 0.15rem; }
.consent-schalter input { position: absolute; opacity: 0; width: 3.4rem; height: 1.9rem; margin: 0; cursor: pointer; }
.consent-schalter label {
  display: block; width: 3.4rem; height: 1.9rem;
  background: var(--stein-tief); border: 1px solid var(--linie);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background-color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.consent-schalter label::after {
  content: ''; position: absolute; left: 0.2rem; top: 0.2rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--papier); border: 1px solid var(--linie);
  transition: transform var(--tempo) var(--kurve);
}
.consent-schalter input:checked + label { background: var(--salbei); border-color: var(--salbei); }
.consent-schalter input:checked + label::after { transform: translateX(1.5rem); border-color: var(--salbei); }
.consent-schalter input:focus-visible + label { outline: 3px solid var(--tiefe); outline-offset: 3px; }
.consent-schalter input:checked + label::before {
  content: 'an'; position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 0.7rem; color: #f3f1eb;
}
.consent-schalter input:not(:checked) + label::before {
  content: 'aus'; position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 0.7rem; color: var(--text-leise);
}
.consent-schalter--fest {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  border: 1px dashed var(--linie); border-radius: 999px;
  padding: 0.4rem 0.3rem; text-align: center; line-height: 1.2;
}

/* 4.10 Datenschutzfreundlicher Video-Platzhalter */
.video-platz {
  border: 1px solid var(--linie); background: var(--papier);
  padding: var(--raum-4); max-width: var(--mass-weit);
}
.video-platz-flaeche {
  aspect-ratio: 16 / 9; background: var(--stein-tief);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--linie); margin-bottom: var(--raum-3);
}
.video-platz-flaeche span { font-family: var(--sans); font-size: var(--gr-s); color: var(--text-leise); }
.video-platz p { font-family: var(--sans); font-size: var(--gr-s); }

/* 4.11 Fuß */
.fuss {
  background: var(--tiefe); color: #d9ded9;
  margin-top: var(--raum-6);
  padding-top: var(--raum-6);
}
.fuss a { color: #e6e9e4; text-decoration-color: rgba(230, 233, 228, 0.4); }
.fuss a:hover { background: rgba(230, 233, 228, 0.12); text-decoration-color: #e6e9e4; }
.fuss-innen {
  max-width: var(--bahn); margin-inline: auto; padding-inline: var(--rand);
  display: grid; gap: var(--raum-5); grid-template-columns: 1fr;
}
@media (min-width: 880px) { .fuss-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.fuss-marke .marke-zeichen { width: 22px; height: 26px; }
.fuss-marke .marke-zeichen line { stroke: rgba(230, 233, 228, 0.4); }
.fuss-marke .marke-zeichen circle { fill: var(--messing); }
.fuss-claim { font-size: var(--gr-m); margin: var(--raum-2) 0 var(--raum-3); color: #f2f0ea; }
.fuss-hinweis { font-family: var(--sans); font-size: var(--gr-xs); line-height: 1.6; color: rgba(217, 222, 217, 0.8); max-width: 34ch; }
.fuss-navigation { display: grid; gap: var(--raum-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fuss-spalte h2 { font-family: var(--sans); font-size: var(--gr-xs); font-weight: 650; color: rgba(217, 222, 217, 0.72); margin-bottom: var(--raum-2); }
.fuss-spalte ul { list-style: none; padding: 0; margin: 0; }
.fuss-spalte li { margin-bottom: 0.55rem; }
.fuss-spalte a { font-family: var(--sans); font-size: var(--gr-s); }
.fuss-zeile {
  max-width: var(--bahn); margin: var(--raum-6) auto 0; padding: var(--raum-3) var(--rand);
  border-top: 1px solid rgba(230, 233, 228, 0.18);
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4);
  justify-content: space-between; align-items: center;
}
.fuss-zeile p { margin: 0; font-family: var(--sans); font-size: var(--gr-xs); color: rgba(217, 222, 217, 0.75); max-width: none; }
.fuss-aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; }
.fuss .link-schalter { font-size: var(--gr-xs); color: rgba(217, 222, 217, 0.9); text-decoration-color: rgba(230, 233, 228, 0.4); }

/* --- 5. Seitenbausteine ------------------------------------------------- */
.hero { padding-block: var(--raum-6) var(--raum-6); }
@media (min-width: 900px) { .hero { padding-block: var(--raum-7) var(--raum-6); } }
.hero-raster { display: grid; gap: var(--raum-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .hero-raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--raum-6); }
}
.hero h1 { max-width: 14ch; }
.hero-vorspann { font-size: var(--gr-m); line-height: 1.5; max-width: 40ch; color: var(--text); }
.hero-grafik { max-width: 22rem; }
@media (max-width: 899px) { .hero-grafik { max-width: 17rem; } }

.seitenkopf { padding-block: var(--raum-6) var(--raum-4); border-bottom: 1px solid var(--linie-fein); }
.seitenkopf h1 { max-width: 18ch; }
.seitenkopf .vorspann { font-size: var(--gr-m); line-height: 1.5; max-width: 46ch; }

.kennsatz {
  font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise);
  display: inline-block; margin-bottom: var(--raum-2);
  border-left: 2px solid var(--messing); padding-left: 0.6rem;
}

.merksatz {
  font-size: var(--gr-l); line-height: 1.32; max-width: 24ch;
  font-weight: 500; letter-spacing: -0.01em;
}

.zustand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: var(--gr-xs);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 0.25rem 0.7rem; color: var(--text-leise);
}
.zustand::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid currentColor; }
.zustand--geplant::before { background: var(--lehm); border-color: var(--lehm); }
.zustand--vorbereitung::before { background: none; border-style: dashed; }
.zustand--verfuegbar::before { background: var(--salbei); border-color: var(--salbei); }

.meta { font-family: var(--sans); font-size: var(--gr-xs); color: var(--text-leise); }

.leerzustand {
  border: 1px dashed var(--linie);
  padding: var(--raum-5) var(--raum-4);
  max-width: var(--mass-weit);
  text-align: left;
  background: var(--papier);
}
.leerzustand h2 { font-size: var(--gr-m); }

.themenliste { columns: 2; column-gap: var(--raum-5); max-width: var(--mass-weit); list-style: none; padding: 0; }
.themenliste li { break-inside: avoid; padding: 0.3rem 0; font-family: var(--sans); font-size: var(--gr-s); color: var(--text-leise); }
@media (max-width: 640px) { .themenliste { columns: 1; } }

.rechtstext { max-width: var(--mass-weit); }
.rechtstext h2 { font-size: var(--gr-l); margin-top: var(--raum-5); }
.rechtstext h3 { font-size: var(--gr-basis); margin-top: var(--raum-4); }
.rechtstext p, .rechtstext ul { font-size: var(--gr-s); line-height: 1.6; max-width: none; }

.beitrag { max-width: var(--mass); }
.beitrag h2 { font-size: var(--gr-l); margin-top: var(--raum-5); }
.beitrag-kopf { border-bottom: 1px solid var(--linie); padding-bottom: var(--raum-3); margin-bottom: var(--raum-4); }

/* --- 6. Zustände und Ausgabe -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopf, .fuss, .consent, .sprungmarke, .aktionen, .video-platz { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  main { max-width: 100%; }
  a { text-decoration: none; color: #000; }
  .beitrag a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
  .band, .band--dunkel, .band--papier { background: #fff !important; color: #000 !important; }
  .abschnitt { padding-block: 1.2rem; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  .tafel, .hinweis { border: 1px solid #999; }
}

@media (forced-colors: active) {
  .knopf { border: 1px solid ButtonText; }
  .achse-linie, .achse-stamm, .verlauf, .ebenen-kante { stroke: CanvasText; }
}