/* conyx.de – dunkle, animierte Präsentation (ADR-003)
   Manrope self-hosted, Charcoal/Off-White + Limette, Monospace-Labels.
   Inhalt steht ohne JS vollständig sichtbar im HTML; Animation ist
   Progressive Enhancement (Klasse .js) und respektiert .reduced. */

/* Fonts (lokal) */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/manrope-800.woff2") format("woff2"); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { max-width: 100%; height: auto; display: block; }

/* Tokens */
:root {
  --bg: #0b0b0e;
  --bg-2: #121218;
  --bg-3: #1a1a21;
  --text: #eef0f2;
  --text-2: #9a9ca6;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.18);
  --lime: #a5ce4e;
  --lime-2: #bce265;
  --on-lime: #0b0b0e;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --wrap: 78rem;
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2.5rem; --s-7: 4rem;
  --section: clamp(4rem, 9vw, 8rem);

  --fs-label: 0.72rem; /* Mono-Labels: Kicker-Zeilen, Mechanismen, Schalter, Fußzeile */

  /* Hero und Faden (Startseite) */
  --hero-edge-h: 28px;
  --thread-w: 1px;
  --status-dot: 5px;
}
@media (min-width: 48rem) { :root { --thread-w: 1.5px; } }

/* Basis */
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
p { max-width: 46ch; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--on-lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Progressive Enhancement: Anfangszustand erst, wenn main.js die Auftritte scharf
   geschaltet hat (.reveal-armed) – bei jedem Ausfall davor bleibt Inhalt sichtbar. */
.reveal-armed:not(.reduced) [data-reveal],
.reveal-armed:not(.reduced) [data-reveal-item] { opacity: 0; transform: translate3d(0, 30px, 0); will-change: opacity, transform; }

/* Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 60rem) { .wrap { padding-inline: 2.5rem; } }
.section { padding-block: var(--section); }
.section-alt { background: var(--bg-2); }

/* Marker / Labels */
.lime-bar { display: block; width: 2.5rem; height: 3px; background: var(--lime); margin-bottom: var(--s-4); }
.kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; color: var(--lime); }
.section-head { max-width: 46rem; margin-bottom: var(--s-7); }
.section-title { margin-top: var(--s-3); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); max-width: 20ch; }
.lede { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem); line-height: 1.4; color: var(--text-2); max-width: 42ch; }

/* Skip-Link */
.skip-link { position: absolute; left: 1.25rem; top: -120%; z-index: 50; background: var(--lime); color: var(--on-lime); padding: var(--s-3) var(--s-4); text-decoration: none; font-weight: 700; }
.skip-link:focus { top: var(--s-3); }

/* Hero-Stage: Fahrt in Rack und Glasfaser mit Stops → ruhiges Datennetz, alles am selben Ort (gepinnt).
   Füllt den Bildschirm unter dem Header (--header-h: Schätzwert im CSS, main.js gleicht ab).
   Das Intro liegt im Fluss: Ist es höher als der Bildschirm (Querformat, Zoom), wächst der
   Hero mit, statt Text abzuschneiden – main.js pinnt dann nicht. Alle anderen Ebenen liegen
   absolut darüber. */
.hero { position: relative; display: grid; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); overflow: hidden; background: #000; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Erster Frame als Hintergrund: Standbild ohne JS und bei jedem Ausfall; mit JS übermalt. */
.hero-seq { z-index: 0; background: var(--bg) center / cover no-repeat; } /* Standbild je Film: home.css */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Blendet mit dem Intro aus (main.js), damit die Fahrt voll sichtbar ist. */
  opacity: var(--hero-scrim, 1);
  /* Text liegt unten → nur dort abdunkeln, das Rack bleibt frei. Schmal etwas mehr. */
  background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 38%, transparent 70%);
}
@media (min-width: 48rem) {
  .hero::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 26%, transparent 52%); }
}
/* LED-Overlay über der Sequenz, unter der Abdunklung (::after kommt im DOM später). */
.hero-fx { z-index: 1; pointer-events: none; display: none; }
.js:not(.reduced) .hero-fx { display: block; }
.network-canvas { z-index: 2; background: #000; opacity: 0; }

/* Netzkarte: Beschriftungen der Knoten im Datennetz (Text im HTML, Position per JS) */
.network-map { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.js:not(.reduced) .network-map { display: block; }
.map-node { position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; line-height: 1.4; will-change: transform, opacity; }
.map-node.is-left { text-align: right; }
.map-num { color: var(--lime); }
.map-term { color: var(--text); }
.map-sub { display: none; margin-top: 0.2rem; font-size: 0.66rem; color: var(--text-2); }
@media (min-width: 48rem) { .map-sub { display: block; } }
.map-node.is-compact .map-sub { display: none; }
.map-node.is-minimal .map-term { display: none; }

/* Pause-Schalter für dauerhaft laufende Animationen (WCAG 2.2.2), oben rechts: dort liegt
   weder Intro noch Stop-Text. Fester Hintergrund, damit der Kontrast über jedem Frame hält. */
.motion-toggle { position: absolute; right: 1.25rem; top: var(--s-4); z-index: 6; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text-2); font: inherit; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.motion-toggle:hover { color: var(--text); border-color: var(--text-2); }
.motion-toggle[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
@media (min-width: 60rem) { .motion-toggle { right: 2.5rem; } }
.hero-layer { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; pointer-events: none; }
.hero-layer > .wrap { width: 100%; pointer-events: auto; padding-bottom: clamp(3.5rem, 8vh, 6rem); }
.hero-intro { position: relative; inset: auto; grid-area: 1 / 1; align-self: end; }
/* Klebt der Header nicht (geringe Höhe), steht er über dem Hero: Intro um seine Höhe anheben. */
.hero-intro > .wrap { padding-bottom: calc(clamp(3.5rem, 8vh, 6rem) + var(--header-static-h, 0px)); }

/* Intro: Headline links, Lede und Aktionen rechts – beides am unteren Rand */
.hero-inner { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) { .hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: var(--s-7); } }
.hero .display { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 5rem); max-width: 14ch; }
.hero .lede { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); }
.hero .hero-actions { margin-top: var(--s-5); }

/* Stops der Fahrt: Bildunterschriften unten links. Kräftiger Verlauf und dunkler Halo,
   damit der Text über hellen Bildstellen (LED-Reihen, Stecker) lesbar bleibt. */
.journey-layer { opacity: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, transparent 65%); }
@media (min-width: 48rem) { .journey-layer { background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 35%, transparent 60%); } }
.journey-layer > .wrap { pointer-events: none; }
.journey-layer .kicker, .stop-num { text-shadow: 0 0 8px var(--bg), 0 0 2px var(--bg); }
.journey-stops { position: relative; margin-top: var(--s-4); min-height: 12rem; }
.journey-stop { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--s-2); opacity: 0; will-change: transform, opacity; }
.stop-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--lime); }
.stop-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
.stop-desc { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); color: var(--text); max-width: 34ch; line-height: 1.45; }

/* Mechanismen: Mono-Begriffe mit Statuspunkt (die LED aus dem Bild setzt sich im Text fort) */
.mechanism-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); max-width: none; }
.mechanism-item { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.mechanism-item::before { content: ""; flex: none; width: var(--status-dot); height: var(--status-dot); border-radius: 50%; background: var(--lime); }

/* Abschlusskante des Heroes: Seiten höher, Mitte tiefer (geschwungener Übergang) */
.hero-edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 5; display: flex; height: var(--hero-edge-h); pointer-events: none; }
.hero-edge-side { flex: 0 0 16%; background: var(--bg); }
.hero-edge-gap { flex: 1 1 auto; }
.hero-edge-curve { flex: 0 0 64px; width: 64px; height: var(--hero-edge-h); fill: var(--bg); }
.display { font-size: clamp(2.7rem, 1.2rem + 6.6vw, 6.5rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 15ch; margin-top: var(--s-4); }
.display-sm { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); max-width: 20ch; overflow-wrap: break-word; hyphens: auto; } /* lange Einzelwörter („Datenschutzerklärung“) passen sonst nicht auf schmale Bildschirme */
mark.hl { background: var(--lime); color: var(--on-lime); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: clamp(2rem, 4vw, 3rem); max-width: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s-6); background: var(--lime); color: var(--on-lime); font-weight: 700; text-decoration: none; border-radius: 999px; transition: background-color 0.2s ease, transform 0.2s ease; }
.btn:hover { background: var(--lime-2); transform: translateY(-1px); }
.arrow-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: none; }
.arrow-link::after { content: "\2192"; color: var(--lime); transition: transform 0.2s ease; }
.arrow-link:hover { color: var(--lime); }
.arrow-link:hover::after { transform: translateX(4px); }

/* Faden: Lime-Linie vom Hero durch Leistungen, Produkte und Kontakt (story-thread.js).
   Dekoration: ohne JS ausgeblendet, sonst statisch voll gezeichnet; .thread-live (von
   main.js gesetzt, wenn Bewegung aktiv ist) schaltet die scroll-gebundene Fassung mit
   Spitze ein. */
.thread-scope { position: relative; }
.thread-scope .wrap { position: relative; z-index: 1; }
.thread { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; display: none; }
.thread-tip { position: absolute; top: 0; left: 0; z-index: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lime) 55%, transparent); pointer-events: none; display: none; will-change: transform; transition: opacity 0.3s ease; }
.thread-lead { display: none; }
.js .thread { display: block; }
.thread-live .thread-tip { display: block; }
.thread-live .thread-lead { display: block; height: clamp(8rem, 24svh, 16rem); }
.thread-path { fill: none; stroke: var(--lime); stroke-width: var(--thread-w); stroke-linecap: round; stroke-linejoin: round; }
.thread-halo { fill: none; stroke: var(--lime); stroke-width: 5px; stroke-linecap: round; opacity: 0.12; }
.thread-branch { fill: none; stroke: var(--lime); stroke-width: var(--thread-w); stroke-linecap: round; }

/* Knoten, die der Faden erreicht: erst dann gehen Balken, Nummer und Statuspunkte an.
   .no-anim (bei Sprüngen) schaltet nur die Übergänge ab, damit nichts kaskadiert. */
.thread-live .lime-bar[data-thread-node] { transform: scaleX(0); transform-origin: left center; }
.thread-live .lime-bar.is-reached { transform: scaleX(1); }
.thread-live .index-num { color: var(--text-2); }
.thread-live .is-reached .index-num { color: var(--lime); }
.thread-live .index-mechanisms .mechanism-item::before { background: var(--line-2); }
.thread-live .is-reached .mechanism-item::before { background: var(--lime); }
.thread-live:not(.no-anim) .lime-bar[data-thread-node] { transition: transform 0.36s cubic-bezier(0.33, 1, 0.68, 1); }
.thread-live:not(.no-anim) .index-num { transition: color 0.3s ease; }
.thread-live:not(.no-anim) .mechanism-item::before { transition: background-color 0.3s ease var(--delay, 0ms); }

/* Nummerierter Index */
.index { border-top: 1px solid var(--line); }
.index-row { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--s-5); padding-block: var(--s-6); border-bottom: 1px solid var(--line); transition: background-color 0.2s ease; }
.index-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--lime); padding-top: 0.35rem; }
.index-title { grid-column: 2; font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); }
/* Unter 336 px passen lange Einzelwörter („Freiwilligenmanagement“) sonst nicht in die Spalte. */
@media (max-width: 20.99rem) { .index-title { font-size: 1.2rem; } }
.index-title a { color: var(--text); text-decoration: none; }
.index-title a:hover { color: var(--lime); }
.index-desc { grid-column: 2; color: var(--text-2); }
.index-mechanisms { grid-column: 2; margin-top: var(--s-2); }
@media (min-width: 60rem) {
  .index-row { grid-template-columns: 4rem 20rem 1fr; align-items: baseline; gap: var(--s-6); padding-inline: var(--s-4); row-gap: var(--s-3); }
  .index-row:hover { background: var(--bg-3); }
  .index-title { grid-column: 2; }
  .index-desc { grid-column: 3; }
  .index-mechanisms { grid-column: 3; margin-top: 0; }
}

/* Produkte */
.products { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) { .products { grid-template-columns: 1.6fr 1fr; gap: var(--s-7); align-items: start; } }
.product { border-top: 2px solid var(--line-2); padding-top: var(--s-5); }
.product-feature { border-top-color: var(--lime); }
.product-tag { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-label); color: var(--lime); }
.product-name { margin-block: var(--s-3) var(--s-4); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.product-feature .product-name { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.product-desc { color: var(--text-2); margin-bottom: var(--s-4); max-width: 42ch; }

/* Kontakt */
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; } }
.contact-card { font-style: normal; display: flex; flex-direction: column; gap: 0.4rem; font-size: 1.15rem; }
.contact-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-label); color: var(--text-2); margin-bottom: var(--s-3); }
.contact-line { color: var(--text-2); }
.contact-link { display: inline-flex; align-items: center; min-height: 44px; width: max-content; color: var(--text); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-link:hover { color: var(--lime); }

/* Über uns: Text links, Bild rechts (breit), schmal untereinander. Die Spur ist auf minmax(0, 1fr)
   begrenzt und lange Wörter brechen um – sonst schöbe ein langes Kompositum die Spalte über den Rand. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 52rem) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; } }
.about-text :is(.section-title, .about-lede, .about-body) { overflow-wrap: break-word; }
.about-lede { margin-top: var(--s-5); max-width: 40ch; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.about-body { margin-top: var(--s-4); color: var(--text-2); }
.about-media { margin: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; }
.about-media img { display: block; width: 100%; height: auto; }

/* Unterseiten. Die Leiste schwebt fest über der Seite (header-footer.css): Die Brotkrumen beginnen
   unter ihr (--header-h). */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: calc(var(--header-h) + var(--s-5)); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-label); color: var(--text-2); }
.breadcrumb a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
/* Kurze Brotkrumen („Start“, „Home“): Klickfläche mindestens 44 px breit, wie bei .nav-link. */
.breadcrumb a::after { content: ""; position: absolute; inset: 0 50%; min-width: 44px; transform: translateX(-50%); }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb [aria-current] { color: var(--text); }
.page-head { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
/* Fließtext der Unterseiten: eine Zeilenlänge für Absätze, Listen und Zwischenüberschriften (rund
   75 Zeichen). Die Grundbreite für Absätze (46ch, für kurze Einleitungen) gilt hier nicht – mit ihr
   standen Absätze schmaler als die Listen daneben (Rückmeldung Sven 2026-10-01: „gequetscht“). */
.prose { max-width: 44rem; }
.prose p { max-width: none; color: var(--text-2); }
/* Einleitung im Seitenkopf: Abstand zur h1 wie überall (sonst lag sie auf den Unterlängen). */
.page-head .lede { margin-top: var(--s-5); }
/* Stellenliste (Karriere): Tabelle wie bei Stellenbörsen – Spaltenköpfe als Mono-Labels, Zeilen
   mit feinen Linien, Bewerben rechts. Ohne Ausschreibung eine Zeile mit Hinweis (.job-empty).
   Schmal (unter 40rem) stehen die Zellen einer Stelle untereinander, beschriftet über data-label. */
.jobs { margin-top: var(--s-6); }
.job-table { width: 100%; border-collapse: collapse; text-align: left; }
.job-table thead th { padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.job-table :is(tbody th, td) { padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; }
.job-table tbody th a { color: var(--text); font-weight: 600; text-decoration: none; }
.job-table tbody th a:hover, .job-apply:hover { color: var(--lime); }
.job-apply { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: none; }
.job-empty td { padding-block: var(--s-6); }
.job-empty-text { color: var(--text); font-size: 1.15rem; }
/* Lange Stellenbezeichnungen brechen in der Zelle um, statt die Tabelle über den Rand zu schieben. */
.job-table :is(th, td) { overflow-wrap: anywhere; }
.job-empty .arrow-link { margin-top: var(--s-2); }
@media (max-width: 39.99rem) {
  .job-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .job-table tbody tr:not(.job-empty) { display: block; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .job-table tbody tr:not(.job-empty) :is(th, td) { display: block; padding: 0.15rem 0; border: 0; }
  .job-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-2); }
  .job-empty td { border-top: 1px solid var(--line-2); }
}
.job-initiative { margin-top: var(--s-5); }

/* Erster Inhaltsblock unter dem Seitenkopf: weniger Abstand als zwischen Abschnitten. */
.page-body { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose p + p { margin-top: var(--s-4); }

/* Rechtstexte (Impressum, Datenschutz, AGB): langer Fließtext mit Zwischenüberschriften und Listen */
.legal-text h2 { margin-top: var(--s-6); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.25; letter-spacing: -0.01em; }
.legal-text h2 + p, .legal-text h2 + ul { margin-top: var(--s-3); }
.legal-text ul { padding-left: 1.25rem; list-style: disc; color: var(--text-2); }
.legal-text li + li { margin-top: var(--s-2); }
.legal-text p, .legal-text li { overflow-wrap: anywhere; }
.legal-text a { color: var(--text); text-underline-offset: 0.2em; }
.legal-text a:hover { color: var(--lime); }

/* Nur für Hilfstechnik sichtbar (z. B. Hinweis „öffnet in neuem Tab“); ohne Versalien der Umgebung. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-transform: none; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
}