/* ==========================================================================
   CONPLOT — main stylesheet
   Load order: tokens.css, then this file, on every page.
   Sections: 1. Reset  2. Base  3. Layout/Utility  4. Navigation  5. Hero
   6. Components  7. Sections  8. Footer  9. Responsive
   ========================================================================== */

/* 1. Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* 2. Base ---------------------------------------------------------------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
body.light-page { background: var(--c-bg-light); color: var(--c-text-on-light); }

h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p { color: var(--c-text-muted); line-height: var(--lh-relaxed); }
/* Der Reset oben nimmt allen Elementen den Rand. Für einzeln stehende
   Absätze ist das richtig, für zwei aufeinanderfolgende nicht — die klebten
   sonst ohne Lücke aneinander. Nur das Paar wird angefasst, damit Abstände
   zu Überschriften und Bausteinen weiterhin dort geregelt werden, wo sie
   hingehören. */
p + p { margin-top: var(--sp-3); }
.light-page p { color: var(--c-text-on-light-muted); }

.kicker {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-petrol);
  margin-bottom: var(--sp-2);
}

/* 3. Layout / utility ------------------------------------------------------ */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}
.section { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-6); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -60px;
  background: var(--c-petrol); color: #fff; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); z-index: 200; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* 4. Navigation ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(44, 42, 37, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-rule);
}
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo img { height: 34px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.nav__links > li { position: relative; }
.nav__link {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  padding: var(--sp-1) 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-petrol); }
.nav__link .chev { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease); }
.nav__item:hover .chev { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 240px;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-2);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.nav__dropdown a {
  display: block; padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small); color: var(--c-text-muted);
}
.nav__dropdown a:hover { background: var(--c-bg-sunken); color: var(--c-text); }

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-petrol); color: #fff;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  padding: 10px 20px; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease);
}
.nav__cta:hover { background: var(--c-petrol-hover); }

/* Burger (mobile) */
.nav__burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__burger span {
  display: block; width: 22px; height: 2px; background: var(--c-text);
  transition: transform var(--dur-normal) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-panel {
  position: fixed; inset: var(--nav-h) 0 0 0;
  background: var(--c-bg);
  z-index: 90;
  padding: var(--sp-5) var(--content-pad) var(--sp-7);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease);
}
.nav__mobile-panel[data-open="true"] { transform: translateX(0); }
.nav__mobile-panel .nav__link { font-size: 1.25rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-rule); width: 100%; justify-content: space-between; }
.nav__mobile-sub { padding-left: var(--sp-3); display: none; }
.nav__mobile-sub[data-open="true"] { display: block; }
.nav__mobile-sub a { display: block; padding: var(--sp-2) 0; color: var(--c-text-muted); font-size: var(--fs-body); }
.nav__mobile-cta { margin-top: var(--sp-5); display: inline-flex; }

/* 5. Hero (sine-line parallax, same system as index.html "langer Sticky") -
   margin-top pulls the wrap up by exactly the header's height so its top
   coincides with the true viewport top (y:0) on load. Without this, the
   sticky header (which reserves --nav-h of space in normal flow) sits above
   the wrap, so the first --nav-h of scrolling moves the whole hero normally
   before the sticky pin engages — visible as "moves up, stops, then the
   parallax starts". Pulling the wrap under the (semi-transparent, blurred)
   header removes that pre-roll: the pin engages immediately at scroll 0. */
/* Die 260vh sind nur der Startwert für den Fall, dass JavaScript nicht läuft.
   Im Normalbetrieb setzt main.js die Höhe exakt auf "Hero-Text + Nachlauf +
   eine Bildschirmhöhe" — eine feste vh-Höhe passt hier nicht, weil die
   Pin-Strecke damit an der Fensterhöhe hinge, der Hero-Inhalt aber in Pixeln
   nahezu konstant ist. Details im Kommentar zu pinStreckeAnInhaltKoppeln(). */
.hero-wrap { position: relative; height: 260vh; margin-top: calc(var(--nav-h) * -1); }
.hero {
  position: sticky; top: 0;
  width: 100%; height: 100vh; min-height: 560px;
  overflow: hidden; background: var(--c-bg-sunken);
}
.hero__layer {
  position: absolute; inset: 0;
  background-repeat: repeat-x; background-size: auto 100%; background-position: 0 50%;
  will-change: transform;
}
.hero__copy {
  /* top offset by --nav-h to cancel out .hero-wrap's negative margin above,
     so the copy still starts exactly at the true viewport top (same
     position/scroll-away timing as before) — only the background graphic's
     sticky pin point moved, not the text.

     min-height statt height: seit der Lösungsblock mit im Hero liegt, ist
     dieser Container höher als ein Viewport. Bei fixer Höhe würde er oben und
     unten gleichmäßig überlaufen; so wächst er nach unten und bleibt bei
     kurzem Inhalt trotzdem vertikal zentriert. */
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-8) var(--content-pad); z-index: 5; pointer-events: none;
}
.hero__copy-inner { pointer-events: auto; max-width: 760px; }
.hero__copy h1 { font-size: var(--fs-hero); color: var(--c-text); letter-spacing: 0.2px; }
.hero__copy p { font-size: var(--fs-body-lg); color: var(--c-blue); font-weight: var(--fw-semibold); margin-top: var(--sp-4); }
.hero__copy .hero__intro {
  font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-muted);
  max-width: 620px; margin: var(--sp-6) auto 0; line-height: var(--lh-relaxed);
}
.hero__actions { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* Lösungsblock im Hero. Liegt in .hero__copy, aber außerhalb von
   .hero__copy-inner — der Textblock bleibt bei 760px lesbar, die vier Karten
   dürfen die volle Inhaltsbreite nutzen.
   pointer-events wieder aktivieren: .hero__copy schaltet sie ab, damit man
   neben dem Text hindurch auf die Grafik klicken kann. */
.hero__solution {
  pointer-events: auto;
  width: 100%; max-width: var(--content-max);
  margin-top: var(--sp-9);
}
.hero__solution h2 { color: var(--c-text); }
.hero__solution .hero__solution-intro {
  font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-muted);
  max-width: 620px; margin: var(--sp-3) auto var(--sp-6); line-height: var(--lh-relaxed);
}
.hero__solution .grid { text-align: left; }
/* Auf der bewegten Sinusgrafik brauchen die Karten mehr Deckkraft als im
   ruhigen Seitenkörper, sonst laufen die Linien sichtbar durch den Text. */
.hero__solution .card {
  background: rgba(66, 62, 54, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Linksbündig an der Inhaltskante, nicht am Viewport-Rand: So steht der
   Hinweis auf jeder Breite in einer Flucht mit Überschrift und Karten.

   Linksbündig allein reicht allerdings nicht: Der Hinweis klebt unten am
   gepinnten Hero, während der Hero-Text an ihm vorbeizieht — gemessen
   kollidierte er bei 1440x780 an 12 Scrollpositionen mit Überschrift und
   linker Karte (zentriert waren es 24). main.js setzt deshalb
   data-hidden="true" in zwei Fällen: sobald gescrollt wurde (die
   Aufforderung hat sich dann erledigt) und wenn in seinem Streifen schon bei
   Scroll 0 Inhalt liegt. Warum das zweite nicht über einen Breakpoint geht,
   steht im Kommentar zu hinweisPlatzPruefen().

   pointer-events: none, damit der Kasten - er spannt jetzt die volle
   Inhaltsbreite - keine Klicks auf dahinterliegende Elemente abfängt. */
.hero__scrolldown {
  position: absolute; left: 0; right: 0; bottom: 28px;
  /* Der Hinweis liegt in .hero und damit ausserhalb von .hero__copy — er erbt
     deren Polsterung nicht. Damit er trotzdem exakt auf der Kante der Karten
     sitzt, wird beides nachgebildet: die Polsterung von .hero__copy und die
     Inhaltsbreite von .hero__solution, die darin zentriert liegt. */
  max-width: calc(var(--content-max) + 2 * var(--content-pad));
  margin-inline: auto; padding-inline: var(--content-pad);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-text-muted);
  opacity: 0.6; pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease);
}
.hero__scrolldown[data-hidden="true"] { opacity: 0; }

/* 6. Components ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  padding: 14px 28px; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--c-petrol); color: #fff; }
.btn--primary:hover { background: var(--c-petrol-hover); }
.btn--secondary { background: transparent; border: 1.5px solid var(--c-text-faint); color: var(--c-text); }
.btn--secondary:hover { border-color: var(--c-text); }
.light-page .btn--secondary { border-color: var(--c-rule-light); color: var(--c-text-on-light); }

.card {
  background: var(--c-bg-raised);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.light-page .card { background: #fff; border-color: var(--c-rule-light); box-shadow: var(--shadow-card); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--c-petrol); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}
.card__icon svg { width: 22px; height: 22px; stroke: #fff; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-small); }

.card--link { display: block; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.card--link:hover { transform: translateY(-4px); border-color: var(--c-petrol); }

/* Bild am Kopf einer Artikelkachel.

   Die negativen Ränder ziehen es über die Polsterung der Karte hinaus bis an
   deren Kante. Der Radius sitzt am Bild selbst statt als overflow: hidden an
   der Karte — das käme ohne :has() nicht aus, und wo :has() fehlt, ragten die
   Bildecken über die abgerundeten Kartenecken hinaus. Das eine Pixel Abzug
   ist die Rahmenstärke der Karte.

   aspect-ratio statt fester Höhe, damit die Kachel auf jeder Spaltenbreite
   dasselbe Format behält. Die Fotos sind quadratisch angeliefert — object-fit
   deckt trotzdem ab, falls später ein anderes Format dazukommt. */
.card__bild {
  display: block; overflow: hidden;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.card__bild img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Leichtes Zurücknehmen: Die Fotos sind helle Himmelsaufnahmen und würden
     sonst gegen den gedeckten Seitenhintergrund zu laut wirken. Beim
     Überfahren der Kachel kommen sie auf volle Leuchtkraft. */
  filter: saturate(0.9) brightness(0.92);
  transition: filter var(--dur-normal) var(--ease);
}
.card--link:hover .card__bild img { filter: none; }

.stat { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--c-bg-sunken); border: 1px solid var(--c-rule); }
.stat__value { font-size: 1.75rem; font-weight: var(--fw-bold); color: var(--c-text); }
.stat__label { font-size: var(--fs-small); color: var(--c-text-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(25,130,125,0.16); color: var(--c-petrol);
}

.anchor-offset { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* 7. Sections --------------------------------------------------------------- */
.section-head { max-width: 640px; margin-bottom: var(--sp-6); }
.section-head p { margin-top: var(--sp-3); }

/* Zentrierte Variante. Wird für Seitenköpfe genutzt, kann aber auch auf
   einzelne Abschnitte gesetzt werden. */
.section-head--center { margin-inline: auto; text-align: center; }

/* Seitenkopf: der oberste Block einer Unterseite (Kicker, H1, Lead).
   Er steht allein über der vollen Seitenbreite — linksbündig wirkte er dort
   wie ein abgeschnittener Textblock, deshalb zentriert. Etwas breiter als
   .section-head, weil die H1 hier länger ist (z. B. "Batteriespeicher für
   Reinraum & Medizintechnik") und sonst unschön umbricht. */
.page-head { padding-top: var(--sp-7); position: relative; }
.page-head .section-head { max-width: 780px; }
.page-head > .container { position: relative; z-index: 1; }

/* Dezente Fassung der Hero-Grafik als Hintergrund des Seitenkopfs.

   Zwei Unterschiede zum Hero auf der Startseite:
   - Keine Scroll-Parallaxe. Die Ebenen driften nur seitlich; vertikal
     passiert nichts, und nichts wird gepinnt.
   - Ohne die beiden kontraststärksten Ebenen. Gemessen an der
     Strichdeckkraft der SVGs liegt 1a bei 0,58–0,62 und 1b bei 0,36–0,43;
     übrig bleiben die drei ruhigen Ebenen mit höchstens 0,20.

   Als Pseudoelement mit drei Hintergrundbildern statt als drei Elemente:
   So bleibt das Markup unberührt und die Grafik erscheint automatisch auf
   jeder Seite, die einen .page-head hat. Die Pfade sind relativ zu dieser
   CSS-Datei und damit unabhängig von der Verschachtelungstiefe der Seite.

   Die Drift-Werte setzt main.js als Custom Properties; ohne JavaScript
   steht die Grafik einfach still.

   Feste Bandhöhe statt inset: 0 — der Seitenkopf ist die komplette erste
   Sektion und damit je nach Seite unterschiedlich hoch: 455px auf einer
   Branchenseite, 680px auf der Technologieseite, 863px auf Kontakt und
   1074px im Impressum, wo die Linien sonst hinter dem gesamten Rechtstext
   liegen würden. Das Band hält die Grafik dort, wo sie hingehört — hinter
   der Überschrift — und blendet nach unten weich aus, damit die Kante nicht
   als Schnitt sichtbar wird. */
.page-head::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(280px, 42vh, 460px);
  z-index: 0; pointer-events: none;
  /* Aus sinus-layers/sparsam/: dieselben Ebenen, aber nur jede dritte Linie.
     Im 378px hohen Band wirkt das ruhiger als die volle Dichte und kostet
     komprimiert 18 statt 234 KB — für jemanden, der aus der Suche direkt auf
     einer Branchenseite landet, ist das der Unterschied. Die Startseite nutzt
     weiterhin die vollen Ebenen. */
  background-image:
    url('../img/sinus-layers/sparsam/conplot-layer-2-kontrast-mittelhoch.svg'),
    url('../img/sinus-layers/sparsam/conplot-layer-3-kontrast-mittelniedrig.svg'),
    url('../img/sinus-layers/sparsam/conplot-layer-4-kontrast-niedrig.svg');
  background-repeat: repeat-x;
  background-size: auto 180%;
  background-position:
    var(--drift-a, 0px) 50%,
    var(--drift-b, 0px) 50%,
    var(--drift-c, 0px) 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* Auf hellen Seiten zurücknehmen: Petrol und Blau stehen gegen ein fast
   weisses Papier deutlich kontrastreicher als gegen den dunklen Grund, und
   unter dem Seitenkopf des Impressums beginnt direkt der Rechtstext. */
.light-page .page-head::before { opacity: 0.45; }

/* Einleitungsabsatz direkt unter einer Überschrift. */
.lead { font-size: var(--fs-body-lg); margin-top: var(--sp-3); }

.bleed-dark { background: var(--c-bg-sunken); }
.bleed-light { background: var(--c-bg-light); color: var(--c-text-on-light); }
.bleed-light p { color: var(--c-text-on-light-muted); }
.bleed-light h2, .bleed-light h3 { color: var(--c-text-on-light); }

/* 8. Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--c-bg-sunken);
  border-top: 1px solid var(--c-rule);
  padding-block: var(--sp-7) var(--sp-5);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.footer-grid h4 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-faint); margin-bottom: var(--sp-3); }
.footer-grid a { display: block; font-size: var(--fs-small); color: var(--c-text-muted); padding: 6px 0; }
.footer-grid a:hover { color: var(--c-text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--c-rule); font-size: var(--fs-small); color: var(--c-text-faint); }
.footer-bottom .legal-links { display: flex; gap: var(--sp-4); }

/* 8a. Artikel (Themen-Spotlights) ----------------------------------------------
   Fließtext in Lesebreite. 68rem wäre Layoutbreite, hier zählt die Zeilenlänge:
   rund 70 Zeichen, darüber verliert das Auge beim Zeilenwechsel die Spur. */
.artikel { max-width: 760px; margin-inline: auto; }
.artikel > * + * { margin-top: var(--sp-3); }
.artikel h2 { font-size: var(--fs-h2); margin-top: var(--sp-7); }
.artikel h3 { margin-top: var(--sp-5); }
.artikel h2 + p, .artikel h3 + p { margin-top: var(--sp-3); }
.artikel ul { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.artikel ul li {
  position: relative; padding-left: var(--sp-4);
  color: var(--c-text-muted); line-height: var(--lh-relaxed);
}
.artikel ul li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-petrol);
}
.artikel ul li strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.artikel .lead-in { font-size: var(--fs-body-lg); color: var(--c-text); }

/* Merksatz-Einschub — für den einen Satz, der hängenbleiben soll. */
.artikel blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 3px solid var(--c-petrol);
  font-size: var(--fs-body-lg); color: var(--c-text);
}

/* Abbildungen.

   Sie stehen absichtlich NICHT in einer .card: Von den vier Serienfarben
   erreichen Blau und Orange auf der Kartenfläche (#423E36) keine 3:1 gegen
   den Untergrund, auf den Abschnittsflächen dagegen schon (gemessen 3,4:1
   bzw. 3,2:1 auf #37342E). Deshalb liegen die Diagramme direkt auf dem
   Abschnitt.

   Sie dürfen breiter werden als der Fließtext — eine Kurve in Lesebreite
   wird unlesbar schmal. */
.figur { margin: var(--sp-6) 0; }
.figur svg { width: 100%; height: auto; display: block; overflow: visible; }
.figur figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-small);
  color: var(--c-text-faint); line-height: var(--lh-normal);
}
@media (min-width: 1000px) {
  .artikel .figur { width: calc(100% + 2 * var(--sp-7)); margin-inline: calc(var(--sp-7) * -1); }
}

/* Serienfarben der Diagramme. Nicht aus den Marken-Tokens: Petrol und Blau
   liegen zu dicht beieinander und haben zu wenig Buntheit, um als
   Datenreihen unterscheidbar zu sein — sie lesen sich als zwei Grautöne.
   Diese vier sind gegen die dunkle Fläche geprüft (Helligkeitsband,
   Buntheit, Farbfehlsichtigkeit, Kontrast). */
.viz { --serie-1: #199e70; --serie-2: #3987e5; --serie-3: #d95926; --serie-4: #9085e9;
       --viz-linie: var(--c-rule); --viz-text: var(--c-text-muted); }
.viz text { font-family: var(--font-sans); fill: var(--viz-text); }
.viz .viz-achse { stroke: var(--viz-linie); stroke-width: 1; }
.viz .viz-raster { stroke: var(--viz-linie); stroke-width: 1; opacity: 0.4; }
.viz .viz-wert { fill: var(--c-text); font-weight: var(--fw-semibold); }
.viz .viz-schwelle { stroke: var(--c-text-faint); stroke-width: 2; stroke-dasharray: 6 5; }

/* 8c. Rechtstexte (Impressum, Datenschutz) ------------------------------------
   Eigene Klasse statt Inline-Abstände an jedem Element: Ein Rechtstext wächst
   mit der Zeit, und jede neue Überschrift müsste sonst ihre Abstände selbst
   mitbringen. Die Gliederung ist hier wichtiger als sonst — wer etwas sucht,
   liest nicht von oben. */
.rechtstext { max-width: 760px; margin-inline: auto; }
.rechtstext h2 {
  font-size: var(--fs-h2); margin-top: var(--sp-8); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-rule-light);
}
.rechtstext > h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.125rem; margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.rechtstext h4 {
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--c-text-on-light); margin-top: var(--sp-4); margin-bottom: 4px;
  text-transform: none; letter-spacing: 0;
}
.rechtstext p { margin-bottom: var(--sp-3); }
.rechtstext ul { margin: 0 0 var(--sp-3); display: grid; gap: 4px; }
.rechtstext ul li {
  position: relative; padding-left: var(--sp-4);
  color: var(--c-text-on-light-muted); line-height: var(--lh-relaxed);
}
.rechtstext ul li::before {
  content: ''; position: absolute; left: 2px; top: 0.7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-petrol);
}
.rechtstext address { font-style: normal; color: var(--c-text-on-light-muted); line-height: var(--lh-relaxed); }
.rechtstext a { color: var(--c-petrol); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext .hinweis {
  margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-petrol); background: var(--c-bg-light-raised);
  font-size: var(--fs-small);
}
/* Sprungmarken oben. Auf einer Seite, die man nach einem Stichwort durchsucht,
   spart das den Weg durch den gesamten Text. */
.rechtstext-sprungmarken {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-7); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-rule-light);
}
.rechtstext-sprungmarken a {
  font-size: var(--fs-small); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-rule-light);
  color: var(--c-text-on-light);
}
.rechtstext-sprungmarken a:hover { border-color: var(--c-petrol); color: var(--c-petrol); }

/* 8b. Bewegung reduzieren ------------------------------------------------------
   Dauerhaft laufende Hintergrundbewegung ist für Menschen mit vestibulären
   Beschwerden nicht nur unangenehm, sondern kann Schwindel und Übelkeit
   auslösen. Wer das im Betriebssystem abgestellt hat, bekommt hier eine
   stehende Grafik — sie verschwindet nicht, sie bewegt sich nur nicht mehr.

   main.js fragt dieselbe Einstellung ab und hält die Animationsschleife
   ganz an; diese Regeln fangen zusätzlich die Übergänge ab. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 9. Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* Nur der JavaScript-lose Notfall: Sobald die Karten untereinander stehen,
     ist der Hero-Inhalt deutlich höher als 260vh und liefe unten in den
     nächsten Abschnitt. main.js setzt die Höhe ohnehin exakt — dieser Wert
     greift also nur, wenn das Skript nicht lädt. */
  .hero-wrap { height: 380vh; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__copy h1 { font-size: 2rem; }
  .hero__copy .hero__intro { font-size: var(--fs-small); margin-top: var(--sp-3); }
  /* The intro paragraph makes the vertically-centered hero copy stack taller
     than it was — on short mobile viewports that pushes the action buttons
     down far enough to collide with the "scroll to explore" hint at the
     bottom of the hero, so it's dropped here rather than left overlapping. */
  .hero__scrolldown { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}