/* =====================================================================
   datasistas Unternehmensberatung – styles.css
   Designsprache: übertragene MUSTER der Referenz x1F.
   Basis Schwarz/Weiß + EIN Akzent (Beere-Magenta). Mono-Display + Sans-Body.
   Mobile-First (ab 360px). WCAG 2.2 AA: Fokus sichtbar, Kontrast ≥ 4,5:1,
   reduced-motion respektiert.
   ===================================================================== */

/* --------------------------- 1 · Selbst gehostete Fonts (DSGVO) --------------------------- */
/* Kein Google-Fonts-CDN. Dateien liegen lokal in assets/fonts/.
   Fallbacks (system-ui / monospace) greifen, bis die woff2 vorliegen. */
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --------------------------- 2 · Design-Tokens --------------------------- */
:root {
  /* Farben */
  --ink:            #000000;   /* Schwarz  */
  --paper:          #ffffff;   /* Weiß     */
  --accent:         #ff5ac0;   /* Beere-Magenta – Akzent (AAA auf Schwarz & mit schwarzem Text) */
  --accent-ink:     #000000;   /* Text auf Akzentfläche = Schwarz (AAA) */
  --accent-deep:    #5a0038;   /* dunkles Beere für Feindetails auf Akzent */

  /* Grautreppe für gestapelte Säulen (Text bleibt schwarz → Kontrast sicher) */
  --g1:  #f4f4f4;
  --g2:  #e6e6e6;
  /* Hintergrund Leistungen (Header + 3 Säulen + Zwischenraum). Mittelgrau; Weiß = #ffffff, heller = var(--g1), dunkler = var(--g3) */
  --leistungen-bg: #ffffff; /* Weiß; Alternativen: var(--g1) #f4f4f4, var(--g2) #e6e6e6, var(--g3) #d6d6d6 */
  --g3:  #d6d6d6;
  /* Hintergrund hinter den Säulen: sichtbar im Spalt beim seitlichen
     Reveal, deutlich dunkler als alle drei Säulen-Grautöne, damit es sich immer abhebt. */
  --g-bg: #bfbfbf;
  /* Header-Hintergrund der Leistungssäulen-Sektion: heller als --g-bg, aber
     bewusst kein identischer Ton zu g1/g2/g3 (eigenständige, mittlere Stufe). */
  --g-header: #cacaca;

  /* Textfarben auf hellem Grund */
  --text:           #111111;   /* Body auf Weiß (>= 16:1) */
  --text-muted:     #4a4a4a;   /* gedämpft, weiterhin ≥ 7:1 auf Weiß */

  /* Textfarben auf dunklem Grund */
  --on-dark:        #f2f2f2;
  --on-dark-muted:  #bdbdbd;   /* ≥ 4,5:1 auf Schwarz */

  /* Typografie */
  --font-display: "Space Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fließende Typo-Skala (min → max via clamp), Mobile-First */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-1-5: clamp(1.5rem, 1.35rem + 0.65vw, 1.9rem);   /* zwischen step-1 und step-2: Zwischenüberschriften über Fließtext in step-1 */
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* Abstände */
  --space-xs: .5rem;
  --space-s:  1rem;
  --space-m:  1.75rem;
  --space-l:  3rem;
  --space-xl: 5rem;
  --maxw:     1200px;
  --pad-x:    clamp(1.25rem, 5vw, 4rem);
  --radius:   0;               /* Referenz-DNA: harte Ecken */
}

/* --------------------------- 3 · Reset / Basis --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Sprungziele landen bündig UNTER dem sticky Header (Höhe wird in main.js gemessen) */
  scroll-padding-top: var(--header-h, 4.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Globaler Schutz gegen horizontales Scrollen durch die seitlichen
     Scroll-Reveal-Effekte (Themen-Karten, Leistungssäulen – siehe dort).
     Bewusst HIER statt auf den einzelnen Containern: ein overflow-x:clip
     direkt auf .card-grid/.pillars schnitt das jeweils erste/letzte Element
     exakt an dessen eigener Boxkante ab, weil die Slide-Distanz (3rem)
     dort auf keinerlei Puffer traf – sichtbar als "abgeschnittene" Karte/Box
     während der Einfahr-Animation (Bug, 08.10.2026). Am Viewport-Rand ist
     dagegen auf Desktop (--pad-x bis 4rem) meist gar kein Clipping mehr
     nötig, auf Mobile nur ein minimaler, gleichmäßiger Rest statt einer
     hart geschnittenen Kante mitten im Element.
     overflow-x:clip hat im Gegensatz zu overflow-x:hidden keine Nebenwirkung
     auf position:sticky-Elemente und erzeugt keine neue Scroll-Container. */
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }

/* --------------------------- 4 · Accessibility-Helfer --------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-s); top: -3rem; z-index: 999;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700;
  padding: .6rem 1rem; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-s); }

/* Sichtbarer Tastatur-Fokus überall (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Auf Akzentflächen kontrastierender Fokus */
.trust :focus-visible,
.btn--primary:focus-visible { outline-color: var(--ink); }

/* --------------------------- 5 · Layout-Grundlagen --------------------------- */
main { display: block; }

section { padding-inline: var(--pad-x); }
.section-head { max-width: none; margin-inline: 0; padding-block: var(--space-l) var(--space-m); text-align: left; }
.section-head--pad { padding-top: var(--space-xl); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--text-muted); margin-top: var(--space-s); font-size: var(--step-1); max-width: 60ch; }

/* --------------------------- 6 · Buttons / CTA --------------------------- */
/* "Sweep-Fill": Umriss-Button, Akzentfläche läuft beim Hover/Fokus von links
   ins Innere (vorab mit 3 weiteren Richtungen illustriert, Option A
   freigegeben 09.10.2026). Alle aktuellen Einsatzorte (Hero, Kontaktformular,
   Cookie-Hinweis) liegen auf dunklem Hintergrund (var(--ink)), daher startet
   der Button transparent mit hellem Text/Akzent-Kontur und füllt sich zu
   Akzent-Pink mit dunklem Text (gleiche Kontrast-Kombination wie zuvor). */
.btn {
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; gap: .6ch;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  text-decoration: none; border: 2px solid var(--ink);
  padding: .8rem 1.4rem; background: var(--ink); color: var(--paper);
  cursor: pointer;
}
.btn--primary {
  background: transparent; color: var(--on-dark); border-color: var(--accent);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: scaleX(1); }
.btn--primary:hover,
.btn--primary:focus-visible { color: var(--accent-ink); }
.btn__arrow { transition: transform .32s cubic-bezier(.65,0,.35,1); }
.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn__arrow { transition: none; }
}

/* "Ablehnen"-Variante des Cookie-Hinweises: gleiche Größe/Form wie
   .btn--primary (WCAG/TTDSG-Anforderung: Ablehnen muss genauso leicht zu
   finden und zu bedienen sein wie Annehmen, nicht als kleiner/versteckter
   Link), aber neutral statt Akzent-Pink, damit optisch klar bleibt, welcher
   Button die "positive" Wahl ist. Freigegeben 12.10.2026. */
.btn--ghost {
  background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted);
}
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--on-dark-muted);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.btn--ghost:hover::before,
.btn--ghost:focus-visible::before { transform: scaleX(1); }
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .btn--ghost::before { transition: none; }
}

/* --------------------------- 7 · Header / Nav --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-s) var(--pad-x);
  background: var(--ink); color: var(--paper);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  text-decoration: none; color: var(--paper); letter-spacing: -0.02em;
}
.wordmark b { color: var(--accent); font-weight: 700; }

/* Schwebender Menü-Button (Referenz-Muster): Akzent-Chip */
.menu-toggle {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0;
  background: var(--accent); border: none; cursor: pointer;
}
.menu-toggle__icon { display: grid; gap: 4px; }
.menu-toggle__icon span { display: block; width: 22px; height: 2px; background: var(--accent-ink); }

/* Rollen-Zeile: jetzt Teil von „Zu meiner Person" (unter dem Portrait,
   volle Breite der Sektion), nicht mehr vor dem Hauptinhalt – stand dort
   optisch wie ein Hero-Untertitel, war aber keiner (Korrektur 08.10.2026).
   Border oben/unten grenzt sie vom gleichfarbigen Sektionshintergrund ab. */
.roles-banner {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  padding: var(--space-s) 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-s);
}
.roles-banner .dot { color: var(--accent); }
/* "Scanning Akzent-Linie": ein schmaler, heller Lichtstreifen wandert dauerhaft
   durch den Hintergrund der Zeile (Vorschau freigegeben 08.10.2026). Der Text
   bleibt ruhig; nur der Hintergrund "lebt" durchgehend, kein Scroll-Trigger nötig. */
.roles-banner::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 192, .35), transparent);
  animation: scan-sweep 3.6s linear infinite;
}
@keyframes scan-sweep {
  from { left: -40%; }
  to   { left: 100%; }
}
.roles-banner span { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .roles-banner::before { animation: none; display: none; }
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--paper);
  display: grid; overflow-y: auto;            /* 8 Einträge: bei niedrigen Viewports scrollbar */
  padding: var(--space-l) var(--pad-x);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay ul { display: grid; gap: var(--space-s); text-align: center; margin: auto; } /* margin:auto = „sicher“ zentriert */
@media (max-height: 48rem) {
  .nav-overlay ul { gap: var(--space-xs); }
  .nav-overlay a  { font-size: var(--step-2); }
}
.nav-overlay a {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.2;
  text-decoration: none; color: var(--paper);
}
.nav-overlay a:hover, .nav-overlay a:focus-visible { color: var(--accent); }
.nav-overlay a[aria-current="page"] { color: var(--accent); }   /* aktuelle Seite (Impressum/Datenschutz) */

/* --------------------------- 8 · Registermarke & Akzent-Chip --------------------------- */
/* Kleine versetzte Marke (Referenz-Deko) */
.accent-chip {
  position: relative;
  display: inline-block; width: 3.25rem; height: 3.25rem;
  background: var(--accent);
  background-repeat: no-repeat; background-position: center; background-size: 56%;
}
/* Registermarke unten links */
.accent-chip::before {
  content: ""; position: absolute; left: -.6rem; bottom: -.6rem;
  width: .9rem; height: .9rem; background: var(--ink);
}
/* In den Themen-Karten: Registermarke in der Farbe des Kartentextes (--on-dark-muted) */
.card .accent-chip::before { background: var(--on-dark-muted); }
.accent-chip--lg { width: min(18rem, 60vw); height: min(18rem, 60vw); background-size: 70%; }

/* Motiv-Icons als schwarze SVG (data-URI) auf dem Magenta-Chip.
   Eigene, einfache Formen – keine Referenz-Assets. */
.accent-chip[data-art="db"]     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Cellipse cx='24' cy='11' rx='15' ry='6'/%3E%3Cpath d='M9 11v13c0 3.3 6.7 6 15 6s15-2.7 15-6V11'/%3E%3Cpath d='M9 24v13c0 3.3 6.7 6 15 6s15-2.7 15-6V24'/%3E%3C/svg%3E"); }
.accent-chip[data-art="skill"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='24' cy='20' r='11'/%3E%3Cpath d='M19 34h10M20 39h8'/%3E%3Cpath d='M24 9v3M13 20h-3M38 20h-3'/%3E%3C/svg%3E"); }
.accent-chip[data-art="growth"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M8 40V22M20 40V14M32 40V26M44 40V8'/%3E%3Cpath d='M36 8h8v8'/%3E%3C/svg%3E"); }

/* --------------------------- 9 · Raster-Texturen (x / Punkte) --------------------------- */
.raster { pointer-events: none; }
.raster--dots {
  --d: #2a2a2a;
  background-image: radial-gradient(var(--d) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.raster--x {
  --x: rgba(0,0,0,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctext x='2' y='12' font-family='monospace' font-size='12' fill='%23000' fill-opacity='0.18'%3Ex%3C/text%3E%3C/svg%3E");
  background-size: 16px 16px;
}

/* --------------------------- 10 · HERO --------------------------- */
.hero {
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-l);
  padding-block: var(--space-xl);
  align-items: center;
}
.hero__title { font-size: var(--step-4); color: var(--on-dark); }
.accent-dot { color: var(--accent); }
.hero__lead {
  margin-top: var(--space-m); max-width: 42ch;
  color: var(--on-dark-muted); font-size: var(--step-1); line-height: 1.5;
}
.hero .btn { margin-top: var(--space-m); }
.hero__art { position: relative; display: grid; place-items: center; min-height: 12rem; }
/* Marken-Schriftzug (Brush-Wortmarke), quadratisches Bild, waagerecht */
.hero__wordmark { display: block; width: 100%; max-width: 560px; }
.hero__wordmark img { width: 100%; height: auto; display: block; }

/* "Wirbel-Dreh": dreht sich EINMALIG um 360° mit kurzem Hochskalieren in der
   Drehmitte ("Swoosh"), landet wieder scharf ausgerichtet und bleibt dann
   stehen (freigegeben 12.10.2026 – vorher: Loop alle 10 s, erster Dreh
   sofort beim Laden). Jetzt: Start erst 10 s nach dem Laden (zuvor 15 s, geändert 12.10.2026)
   (animation-delay), Ablauf etwas gemächlicher (1,8 s statt vormals rund
   1,2 s Spin-Zeit), läuft nur einmal (iteration-count 1, kein infinite
   mehr). */
@keyframes hero-whirl {
  0%        { transform: rotate(0deg)   scale(1); }
  45%       { transform: rotate(200deg) scale(1.12); }
  100%      { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__wordmark { animation: hero-whirl 1.8s cubic-bezier(.3,.7,.3,1) 10s 1 both; }
}

@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.2fr .8fr; }
}

/* --------------------------- 11 · FOKUS-STATEMENT --------------------------- */
.fokus {
  position: relative; background: var(--paper);
  padding-block: var(--space-xl); overflow: hidden;
}
.fokus .raster--x {
  /* Durchgezogen über die gesamte Breite (kein Fade-out mehr), auf Wunsch
     der Betreiberin: vorher per Masken-Gradient nur links sichtbar. */
  position: absolute; inset: 0; opacity: .5;
}
.fokus__body { position: relative; max-width: 46ch; margin-inline: auto; text-align: center; }
.highlight-box {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1.1; padding: .3em .5em; position: relative;
}
.highlight-box::before { /* Registermarke */
  content: ""; position: absolute; left: -.7rem; bottom: -.7rem;
  width: 1rem; height: 1rem; background: var(--ink);
}
.fokus__lead { margin-top: var(--space-m); font-family: var(--font-display); font-size: var(--step-1); }
.fokus__text { margin-top: var(--space-s); color: var(--text-muted); max-width: 44ch; margin-inline: auto; }

/* --------------------------- 12 · THEMEN-GRID --------------------------- */
.themen { background: var(--paper); padding-bottom: var(--space-xl); }
.card-grid {
  display: grid; gap: var(--space-l);
  max-width: var(--maxw); margin-inline: auto;
  grid-template-columns: 1fr;
  /* Kein eigenes overflow-x:clip mehr hier (schnitt die erste Karte an ihrer
     eigenen Boxkante ab, siehe Kommentar bei body { overflow-x: clip }). */
  --reveal-step: 700ms; /* schnelleres Stagger-Tempo als die Leistungssäulen (1500ms) */
}
.card {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding: var(--space-m); padding-top: var(--space-l);
}
.card::after { /* Registermarke unten links */
  content: ""; position: absolute; left: -.5rem; bottom: -.5rem;
  width: 1rem; height: 1rem; background: var(--accent);
  transition: box-shadow .25s ease;
}
/* Effekt 4 (Vorschau): sanfter Glow/Pulse der Registermarke beim Hover der Karte */
@media (prefers-reduced-motion: no-preference) {
  .card:hover::after {
    box-shadow: 0 0 0 4px rgba(255, 90, 192, .25), 0 0 16px 4px rgba(255, 90, 192, .55);
    animation: registermarke-pulse 1.6s ease-in-out infinite;
  }
  @keyframes registermarke-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 90, 192, .25), 0 0 16px 4px rgba(255, 90, 192, .55); }
    50% { box-shadow: 0 0 0 7px rgba(255, 90, 192, .12), 0 0 24px 9px rgba(255, 90, 192, .35); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover::after { box-shadow: 0 0 0 4px rgba(255, 90, 192, .35); }
}
.card .accent-chip { margin-bottom: var(--space-m); }
.card__title { color: var(--accent); font-size: var(--step-1); }
.card__text { margin-top: var(--space-s); color: var(--on-dark-muted); font-size: var(--step-0); }

@media (min-width: 48rem) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------- 13 · BILD-SEKTION (Klammer-Overlay) --------------------------- */
.feature-image {
  position: relative; padding: 0;
  /* Feste, moderate Höhe; das Bild füllt die Section vollflächig (cover) */
  height: clamp(18rem, 50vw, 42rem);
  display: grid; overflow: hidden;
}
.feature-image__media { position: absolute; inset: 0; display: block; }
.feature-image__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.feature-image__overlay {
  position: relative; grid-area: 1 / 1; align-self: end; justify-self: stretch; width: 100%;
  padding: var(--pad-x);
  /* Verlauf sichert Lesbarkeit über die gesamte Breite */
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.bracket {
  font-family: var(--font-display); font-weight: 700; color: var(--paper);
  font-size: var(--step-3); line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.bracket__open, .bracket__close, .bracket__op, .bracket__eq { color: var(--accent); }
.bracket__op { margin-inline: .35em; }
.bracket__eq { margin-right: .3em; }

/* --------------------------- 14 · LEISTUNGSSÄULEN (gestapelt) --------------------------- */
/* Überarbeitet 25.10.2026 (freigegebenes Layout „D“, jetzt Schwarz/Weiß):
   Schwarze Fläche mit weißem Titel + pinkem Icon-Feld, daneben/darunter die Liste
   auf hellem Grau. Pinke Linie unter jeder Säule bleibt. Die frühere Diagonale
   (.pillar__wedge) entfällt samt Markup. Kontraste: Weiß/#d4d4d4 auf Schwarz
   und Schwarz auf Weiß liegen deutlich über 4,5:1 (WCAG 2.2 AA). */
.pillars {
  padding-inline: 0;
  background: var(--leistungen-bg);
  --pillar-dark: #000000;   /* Schwarz, wie Hero/Über mich/Kontakt */
  --pillar-light: #ffffff;  /* weiße Listenfläche */
  --pillar-bullet: #6b6b6b; /* Aufzählungspunkte */
  --reveal-step: 150ms;
}
.pillars .section-head {
  position: relative; isolation: isolate;
  padding-inline: var(--pad-x); background: var(--leistungen-bg); color: var(--ink);
  border-top: 12px solid var(--accent); border-bottom: 12px solid var(--accent);
}
.pillars .section-head h2 { color: var(--ink); }
/* Unterzeile über die volle Breite; Umbruch erst bei Platzmangel, dann ausgeglichen */
.pillars .section-head p { color: var(--ink); max-width: none; text-wrap: balance; }
/* Punktraster (pink): Kachel wird auf die Höhe skaliert (round) und um eine halbe
   Kachel nach oben versetzt, damit die Punkte als Halbpunkte bündig an der oberen
   und unteren pinken Linie sitzen – kein heller Streifen mehr. Rein dekorativ. */
.pillars .section-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,90,192,.8) 2px, transparent 2.4px);
  background-size: 20px 20px; background-repeat: round; background-position: 0 -10px;
  -webkit-mask-image: linear-gradient(to left, #000 5%, transparent 75%);
          mask-image: linear-gradient(to left, #000 5%, transparent 75%);
}
.pillar {
  display: grid; gap: 0; padding: 0; align-items: start;
  background: var(--pillar-light); border-bottom: 12px solid var(--accent);
}
/* Mobil: Icon-Chip (pink, schwarzes Symbol) auf anthrazitem Band, Titel darunter */
.pillar__mark { background: var(--pillar-dark); padding: var(--space-m) var(--pad-x) 0; }
.pillar__mark .accent-chip::before { background: #8a8a8a; } /* Registermarke auf dunklem Grund sichtbar */
.pillar__mark-desktop { display: none; }
.pillar__title {
  font-size: var(--step-2); margin: 0; color: var(--paper);
  background: var(--pillar-dark); padding: var(--space-m) var(--pad-x) .2rem;
}
.pillar__sub {
  font-family: var(--font-display); color: #d4d4d4; margin: 0;
  background: var(--pillar-dark); padding: .3rem var(--pad-x) var(--space-m);
}
.pillar__content { background: var(--pillar-light); position: relative; isolation: isolate; }
/* Pinkes Punktraster hinter der Liste: gleiche Kachel und gleicher Verlauf (rechts am
   dichtesten) wie im Kopfbereich, über die volle Blockbreite berechnet. Die weiße
   Spalte zeigt nur den Ausschnitt ab Spaltenbeginn (clip-path, Desktop). Rein dekorativ. */
.pillar__content::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,90,192,.8) 2px, transparent 2.4px);
  background-size: 20px 20px; background-repeat: round;
  -webkit-mask-image: linear-gradient(to left, #000 5%, transparent 75%);
          mask-image: linear-gradient(to left, #000 5%, transparent 75%);
}
.pillar__list { margin: 0; padding: var(--space-m) var(--pad-x) 0; display: grid; gap: .7rem; }
.pillar__list li { position: relative; padding-left: 1.6rem; }
.pillar__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .7rem; height: .7rem; background: var(--pillar-bullet);
}
.pillar__close { margin: 0; padding: var(--space-m) var(--pad-x); font-family: var(--font-display); font-weight: 700; }

@media (min-width: 52rem) {
  /* Tablet/Desktop: zweispaltig. Links anthrazit (Icon, Titel, Untertitel), rechts Liste.
     Die Spaltenfarben kommen aus einem Verlauf mit hartem Übergang bei 32 %; die
     Grid-Spalte (min. 16rem) liegt ab diesem Breakpoint immer innerhalb dieser 32 %. */
  .pillar { display: block; position: relative; overflow: hidden; }
  .pillar__mark {
    position: absolute; top: 2rem; left: var(--pad-x); z-index: 1; padding: 0;
    width: clamp(40px, 6.5vw, 76px); height: clamp(40px, 6.5vw, 76px);
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .pillar__mark-mobile { display: none; }
  .pillar__mark-desktop {
    display: block; color: var(--ink); /* schwarzes Symbol auf pinkem Feld */
    width: clamp(20px, 3.2vw, 34px); height: auto;
  }
  .pillar__content {
    display: grid; grid-template-columns: minmax(16rem, 32%) 1fr; grid-template-rows: auto auto 1fr;
    background: linear-gradient(90deg, var(--pillar-dark) 32%, var(--pillar-light) 32%);
  }
  .pillar__content::before { clip-path: inset(0 0 0 32%); } /* Raster nur in der weißen Spalte */
  .pillar__title {
    grid-column: 1; grid-row: 1; background: none;
    padding: calc(2rem + clamp(40px, 6.5vw, 76px) + 1.2rem) var(--space-m) 0 var(--pad-x);
  }
  .pillar__sub { grid-column: 1; grid-row: 2; background: none; padding: .4rem var(--space-m) var(--space-l) var(--pad-x); }
  .pillar__list { grid-column: 2; grid-row: 1 / 3; padding: var(--space-l) var(--pad-x) 0 var(--space-l); }
  .pillar__close { grid-column: 2; grid-row: 3; padding: var(--space-m) var(--pad-x) var(--space-l) var(--space-l); }
}

/* --------------------------- 15 · ÜBER MICH --------------------------- */
.about {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-l);
  padding-block: var(--space-xl);
}
/* Dekoratives Punktraster, nur auf der rechten Seitenhälfte – Option 1 der
   Gestaltungsvorschau: akzentfarben (Pink) statt weiß und deutlich kräftiger,
   damit es neben dem Portrait wirklich sichtbar ist (die vorherige
   Weiß-auf-Schwarz-Variante bei 14 % Deckkraft war praktisch unsichtbar). */
.about__raster {
  /* z-index:-1 verhindert, dass das Muster (obwohl im Markup vor dem Portrait
     stehend) über das Foto gelegt wird: ein position:absolute-Element stapelt
     sich sonst unabhängig von der Reihenfolge im Code über normal fließende
     Inhalte wie das <picture>-Portrait – genau das sah „falsch" aus. */
  position: absolute; inset: 0; left: 50%; z-index: -1;
  background-image: radial-gradient(rgba(255,90,192,.55) 2.5px, transparent 2.7px);
  background-size: 18px 18px;
}
.about h2 { color: var(--accent); font-size: var(--step-3); }
.about__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin-top: 0; }
.about__profession { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--accent); line-height: 1.35; margin-top: var(--space-s); }
.about__claim { margin-top: var(--space-s); max-width: 46ch; font-size: var(--step-1); line-height: 1.45; }
.about__portrait { display: block; width: 100%; aspect-ratio: 3 / 4; max-width: 22rem; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__facts { display: grid; gap: var(--space-s); }
.fact { background: #0d0d0d; border-left: 4px solid var(--accent); padding: var(--space-m); }
/* Schriftgröße bewusst +13% gegenüber dem globalen Fließtext-Maßstab (--step-1/--step-0),
   nur für diese Fakten-Liste, auf Nutzerwunsch nach Vorschau-Freigabe am 08.10.2026. */
.fact dt { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: clamp(1.36rem, 1.24rem + 0.57vw, 1.7rem); }
.fact dd { margin-top: .5rem; color: var(--on-dark-muted); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); }

@media (min-width: 56rem) {
  .about { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .about > h2 { grid-column: 1 / -1; }
  .about__intro { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
  /* Claim vertikal mittig im freien Raum der Intro-Spalte (Rollen-Zeile liegt
     jetzt unterhalb der Fakten-Liste, nicht mehr hier im Intro-Block). */
  .about__intro .about__claim { margin-block: auto; padding-block: var(--space-s); }
  .about__portrait { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; }
  .roles-banner { grid-column: 1 / -1; grid-row: 3; }
  .about__facts { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr 1fr; }
}

/* --------------------------- 16 · TRUST / REFERENZEN --------------------------- */
.trust {
  position: relative; overflow: hidden;
  background: var(--accent); color: var(--accent-ink);
  padding-block: var(--space-xl);
}
.trust__art {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  font-family: var(--font-display); color: var(--accent-ink);
  display: grid; place-items: center;
}
.trust__body { position: relative; max-width: var(--maxw); margin-inline: auto; }
.trust__statement {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  max-width: min(44ch, 100%); text-wrap: balance; /* breiter: 2 statt 4 Zeilen (freigegeben 25.10.2026) */
  background: var(--ink); color: var(--paper);
  display: inline-block; padding: .35em .5em;
}
/* Einleitungszeile („Branchen, in denen ich zu Hause bin:“) formatiert wie die Zwischenüberschrift (h3).
   Schriftgröße auf Wunsch der Betreiberin (08.10.2026) an „Zu meiner Person“ angeglichen:
   .trust__lead/.trust__subhead = gleiche Größe wie .fact dt (Überschrift-Ebene),
   .trust__branches/.ref-list = gleiche Größe wie .fact dd (Fließtext-Ebene). */
.trust__lead, .trust__subhead {
  margin-top: var(--space-l);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.36rem, 1.24rem + 0.57vw, 1.7rem);
  line-height: 1.05; letter-spacing: -0.01em;
  overflow-wrap: break-word; hyphens: auto;   /* „Unternehmensreferenzen“ bricht bei 320 px nicht aus */
}
.trust__branches { font-family: var(--font-display); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); margin-top: .3rem; }
/* Unternehmensreferenzen: gleiche Formatierung wie .trust__branches – Fließtext mit „·“ als Trenner.
   Bleibt semantisch eine Liste (<ul>); die Trenner sind reine CSS-Deko (für Screenreader stumm). */
.ref-list { margin-top: .3rem; font-family: var(--font-display); font-size: clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem); }
.ref-list li { display: inline-block; max-width: 100%; }   /* Einträge umbrechen als Einheit; Abstand = Leerraum zwischen den <li> im HTML */
.ref-list li:not(:nth-last-child(-n+2))::after { content: "\00a0·"; content: "\00a0·" / ""; }   /* kein Trenner vor dem Anhang */
/* Anhang „… sowie weitere …“: läuft als normaler Fließtext direkt hinter dem letzten Eintrag weiter */
.ref-list .ref-list__more { display: inline; }

/* --------------------------- 17 · CTA / KONTAKT --------------------------- */
.cta {
  background: var(--ink); color: var(--on-dark);
  display: grid; gap: var(--space-xl);
  padding-block: var(--space-xl);
}
.cta__title { font-size: var(--step-3); color: var(--on-dark); }
/* Titel über die ganze Breite in EINER Zeile (ab 48rem); die Schrift wächst/schrumpft
   mit der Fensterbreite (4vw), damit er nie abgeschnitten wird. Darunter bricht er
   ausgeglichen hinter dem Gedankenstrich um. */
@media (min-width: 48rem) { .cta__title { white-space: nowrap; font-size: min(var(--step-3), 4vw); } }
@media (max-width: 47.99rem) { .cta__title { text-wrap: balance; } }
.cta__lead { margin-top: var(--space-m); max-width: 46ch; color: var(--on-dark-muted); }

/* Marken-Name über dem Formular, zweifarbig wie der Header-Wordmark
   (.wordmark: "data" normal, "sistas" fett + Akzent). Vorab per Mockup
   illustriert, freigegeben 09.10.2026. Ersetzt die frühere Namenszeile im
   Adress-Block (.contact-card__name, entfernt) in der rechten Spalte. */
.cta__brand {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--on-dark); margin: var(--space-m) 0 0; letter-spacing: -0.01em;
}
.cta__brand b { color: var(--accent); font-weight: 700; }

.cta__form { margin-top: var(--space-l); display: grid; gap: var(--space-m); max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.field input, .field textarea {
  font: inherit; color: var(--paper); background: #111;
  border: 2px solid #444; padding: .7rem .8rem;
}
.field input:hover, .field textarea:hover { border-color: #777; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent); }
.field--check { grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.field--check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--accent); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--on-dark-muted); }
.field--check a { color: var(--accent); }
.req { color: var(--accent); }

/* Honeypot – für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.4em; font-family: var(--font-display); font-size: var(--step--1); }
.form-status[data-state="error"] { color: var(--accent); }
.form-status[data-state="ok"]    { color: var(--paper); }

.cta__aside { display: grid; gap: var(--space-l); align-content: start; }
.cta__art {
  font-family: var(--font-display); color: var(--accent);
  white-space: pre; line-height: .95; font-size: .75rem; overflow: hidden;
  /* Pfeil (freigegeben 25.10.2026): 120 px, mittig in der Spalte, zeigt immer nach unten.
     Negative Außenabstände schneiden den leeren Rand der SVG-Fläche weg. */
  display: block; max-width: none; margin: 0;
}
.cta__art svg { width: 120px; margin: -20px auto -30px; }
.contact-card { font-style: normal; }
.contact-card__sub { color: var(--on-dark-muted); margin-top: .2rem; }
.contact-card__intro { margin-top: var(--space-m); color: var(--on-dark); }
.contact-imgs { margin-top: var(--space-m); display: grid; gap: var(--space-s); }
/* Anzeigegröße der Anbieter-Grafiken fest vorgegeben (statt Inline-Style im HTML,
   siehe HTML-Kommentar bei den <img>-Tags): die CSP (_headers) setzt
   style-src 'self' und würde ein style="…"-Attribut blockieren. */
.contact-img--anschrift { width: 353px; height: 104px; }
.contact-img--kontakt   { width: 272px; height: 47px; }

/* Kontakt-Layout „B“ (freigegeben 25.10.2026), ab 56rem: links Text, Pfeil (zeigt nach unten)
   und Kontaktdaten, rechts das Formular (Name | E-Mail, darunter Nachricht).
   .cta__body/.cta__aside werden mit display:contents aufgelöst, damit ihre Kinder direkt
   im .cta-Raster platziert werden können. Die Quelltext-Reihenfolge (und damit die
   Tab-Reihenfolge der Formularfelder) bleibt unverändert. */
@media (min-width: 56rem) {
  .cta {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--space-xl); row-gap: var(--space-m); align-items: start;
  }
  .cta__body, .cta__aside { display: contents; }
  .cta > .cta__title { grid-column: 1 / -1; }
  .cta__lead  { grid-column: 1; grid-row: 2; margin: 0; }
  .cta__art   { grid-column: 1; grid-row: 3; }
  .contact-card { grid-column: 1; grid-row: 4; margin: 0; }
  .contact-card__intro { margin-top: 0; }
  .cta__brand { grid-column: 2; grid-row: 2; margin: 0; }
  /* Formular beginnt direkt unter der Marken-Zeile (Höhe = Zeilenhöhe der Marke + Abstand) */
  .cta__form {
    grid-column: 2; grid-row: 2 / 6; max-width: none;
    margin-top: calc(var(--step-1) * 1.6 + var(--space-m));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-m);
  }
  .cta__form > .field:nth-child(3),
  .cta__form > .field--check,
  .cta__form > .btn,
  .cta__form > .form-status { grid-column: 1 / -1; }
  .cta__form > .btn { justify-self: start; }
  .cta__form .field { min-width: 0; }
  .cta__form .field input:not([type="checkbox"]), .cta__form .field textarea { width: 100%; min-width: 0; }
  .cta__form > .form-status { min-height: 0; margin: 0; }
  .cta__form > .form-status:empty { margin-top: calc(-1 * var(--space-m)); } /* leere Statuszeile braucht keinen Abstand */
}
/* Unter 56rem: einspaltig. Reihenfolge sichtbar: Text, Pfeil (zeigt auf Kontaktdaten),
   Kontaktdaten, Formular. */
@media (max-width: 55.99rem) {
  .cta { gap: var(--space-m); }
  .cta__body, .cta__aside { display: contents; }
  .cta__title { order: 0; } .cta__lead { order: 1; } .cta__art { order: 2; }
  .contact-card { order: 3; } .cta__brand { order: 4; margin-top: var(--space-s); } .cta__form { order: 5; }
  .cta__lead, .cta__form { margin-top: 0; }
}

/* --------------------------- 18 · Platzhalter-Optik --------------------------- */
.placeholder {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, #1a1a1a 0 12px, #232323 12px 24px);
  color: var(--accent); border: 2px dashed var(--accent);
  min-height: 8rem; padding: var(--space-s);
}
.placeholder__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.placeholder--inline { min-height: 4.5rem; }
.placeholder--text {
  background: #f5f5f5; color: var(--accent-deep); border-color: var(--accent);
  min-height: auto; padding: var(--space-m); display: block; text-align: left;
}
.placeholder--text p { margin-bottom: .6rem; }
.placeholder--text p:first-child { font-family: var(--font-display); font-weight: 700; }

/* --------------------------- 19 · FOOTER --------------------------- */
/* Fußzeile mit Linkzeile (4 Einträge: Zurück zum Anfang, Impressum, Datenschutzerklärung,
   Cookie-Einstellungen). Ab 40rem (≈ 640px, „große Formate“): alle 4 in einer Zeile,
   gleichmäßig verteilt (4-Spalten-Raster). Darunter (kleine Formate/Mobile): untereinander,
   da vier Mono-Einträge nicht nebeneinander passen. "Cookie-Einstellungen" ist bewusst ein
   <button> (öffnet die CookieYes-Einstellungen, navigiert nirgendwohin) statt eines
   <a href="#">-Links – daher Style-Regeln hier für a UND button gemeinsam. */
.site-footer { background: var(--ink); color: var(--on-dark); padding: var(--space-xl) var(--pad-x) var(--space-l); }
.footer-nav { display: grid; justify-items: start; gap: var(--space-xs); }
.footer-nav a, .footer-nav button {
  display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem;   /* Touch-Ziel ≥ 44 px */
  font-family: var(--font-display); font-weight: 700; text-decoration: none; color: var(--on-dark);
  white-space: nowrap;
}
.footer-nav button {
  background: none; border: none; padding: 0; font-size: inherit; cursor: pointer;
}
.footer-nav a:hover, .footer-nav a:focus-visible,
.footer-nav button:hover, .footer-nav button:focus-visible { color: var(--accent); }
.footer-nav a[aria-current="page"] { color: var(--accent); }
@media (min-width: 40rem) {
  .footer-nav {
    grid-template-columns: repeat(4, auto);
    grid-auto-flow: column;              /* erzwingt eine Zeile statt Umbruch, auch bei engem Platz */
    justify-content: space-between;
    align-items: center;
  }
  .footer-nav > :nth-child(1) { justify-self: start; }
  .footer-nav > :nth-child(2),
  .footer-nav > :nth-child(3) { justify-self: center; }
  .footer-nav > :nth-child(4) { justify-self: end; }
}
.footer-copy { margin-top: var(--space-l); color: var(--on-dark-muted); font-family: var(--font-display); }
.footer-copy b { color: var(--accent); }

/* Rechtsseiten (Impressum / Datenschutzerklärung): eigene Seiten, dunkler Grund wie zuvor im Footer */
.page-legal { background: var(--ink); color: var(--on-dark); }
.legal-page { padding: var(--space-l) var(--pad-x) var(--space-xl); }
.legal { padding-inline: 0; max-width: none; }
.legal h1 { font-size: clamp(1.5rem, 1.1rem + 2.5vw, 3.2rem); color: var(--accent); }  /* Seitentitel; „Datenschutzerklärung“ passt auch bei 320–360 px */
.legal__hint { color: var(--on-dark-muted); margin: .5rem 0 var(--space-s); }
.legal h1, .legal h2 { overflow-wrap: break-word; hyphens: auto; }                   /* z. B. „Verbraucherstreitbeilegung/Universalschlichtungsstelle“ */
.legal h2 { font-size: var(--step-1); color: var(--accent); margin-top: var(--space-m); }  /* Abschnittstitel */
.legal p { margin-top: .5rem; color: var(--on-dark-muted); max-width: 72ch; }
.legal a { color: var(--accent); }
.legal__small { font-size: .9em; }
/* Sichtbarer Inline-Marker für noch offene Pflichtangaben */
.legal mark { background: var(--accent); color: var(--accent-ink); padding: 0 .25em; font-weight: 700; }

/* --------------------------- 20 · Scroll-Reveal (nur wenn Motion erlaubt) --------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease, transition-delay 0s; }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* Effekt 2: gestaffeltes Einblenden innerhalb einer Gruppe (Karten, Listen).
     Der Schrittabstand kommt von der --reveal-step-Variable der jeweiligen Gruppe
     (.card-grid: 700ms -> bei 3 Karten alle nach ca. 2 Sek. da; .pillars: 1500ms ->
     nach ca. 3 Sek.), Fallback 1500ms falls irgendwo nicht gesetzt. */
  .reveal.reveal--stagger.is-visible { transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 1500ms)); }

  /* Effekt 2b: Themen-Karten fliegen von links ein statt generischem Fade-up.
     Höhere Spezifität (.card.reveal) überschreibt den generischen translateY der Basisregel. */
  .card.reveal {
    transform: translateX(-3rem);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), transition-delay 0s;
  }
  .card.reveal.is-visible { opacity: 1; transform: none; }

  /* Effekt 5: Leistungssäulen fliegen alle drei gleichermaßen von rechts ein
     (auf Wunsch der Betreiberin am 08.10.2026 – vorher alternierend links/rechts/links).
     Höhere Spezifität (.pillar.reveal) überschreibt den generischen translateY der Basisregel. */
  .pillar.reveal {
    transform: translateX(3rem);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), transition-delay 0s;
  }
  .pillar.reveal.is-visible { opacity: 1; transform: none; }
}
/* Bei reduzierter Bewegung immer sichtbar (kein Layout-Sprung) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------- 21a · Effekt 1 (Vorschau): Scroll-Progress-Balken --------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 1000; transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; } /* reine Bewegungsanzeige, bei reduced-motion ausgeblendet */
}

/* --------------------------- 21 · Print (Rechtstexte lesbar) --------------------------- */
@media print {
  .site-header, .nav-overlay, .menu-toggle, .hero__art, .trust__art, .cta__art { display: none !important; }
  body, .page-legal, .site-footer { color: #000; background: #fff; }
  .legal h1, .legal h2, .legal p, .legal a, .legal li, .footer-nav a, .footer-copy { color: #000; }
  .legal mark { background: none; border: 1px solid #000; color: #000; }
}

/* Referenz-Aussage auf kleinen Displays wieder schmal (mehrzeilig) */
@media (max-width: 47.99rem) { .trust__statement { max-width: 24ch; } }