/* ============================================================
   ContiNovo — Seiten-Layout
   Aus den Inline-Styles von Home.dc.html / Impressum.dc.html /
   Datenschutz.dc.html in echtes CSS überführt. Werte 1:1 aus dem
   Design übernommen, nicht neu erfunden.
   ============================================================ */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Smooth-Scroll erst per JS-Klasse aktiv (main.js, Ende von DOMContentLoaded),
   NICHT global auf html — sonst animiert der Browser auch seinen eigenen
   automatischen Sprung zu einem URL-Fragment beim Laden (z. B. nach
   Formular-Redirect auf ?sent=1#kontakt): Seite rendert erst oben, scrollt
   dann sichtbar/langsam runter, wirkt wie ein Doppel-Sprung (Fund
   2026-08-04). Ohne Klasse bleibt der allererste Sprung instant, Klicks
   auf Nav-Links/Logo/FAQ danach weiterhin smooth. */
html.js-smooth-scroll { scroll-behavior: smooth; }

/* Absicherung gegen das absichtlich off-screen positionierte Honeypot-Feld
   (left:-9999px) und den Skip-Link — ohne das erzeugen beide auf schmalen
   Viewports eine horizontale Scrollleiste. overflow-y explizit auf visible,
   sonst berechnet der Browser sie mangels Angabe auf auto und macht body
   damit zum Scroll-Container — das bricht position:sticky im Header. */
html, body { overflow-x: clip; overflow-y: visible; }

body {
  margin: 0;
  background: var(--surface-0);
  font-family: var(--font-sans);
  color: var(--text-body);
  min-height: 100vh;
  /* Deutsche Komposita ("Handlungsempfehlungen", "Organisationsentwicklung")
     sind unzerbrechlich lang und sprengen auf schmalen Viewports ihren
     Container — auch dann noch, wenn min-width:0 gesetzt ist, denn das
     erlaubt zwar das Schrumpfen der Box, macht aber das Wort nicht kürzer.
     Letzte Reißleine, greift nur wenn ein Wort sonst überliefe. Bricht dann
     allerdings ohne Trennstrich mitten im Wort — deshalb übernimmt auf
     schmalen Viewports vorher hyphens:auto, siehe unten. */
  overflow-wrap: break-word;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

.container { max-width: var(--container-max); width: 100%; margin: 0 auto; }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  padding: 14px 22px;
  z-index: 300;
  border-radius: 0 0 10px 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-decoration: none;
  box-shadow: var(--shadow-2);
}
.skip-link:focus { left: 0; }

/* ---------- Einblend-Animation ---------- */
@keyframes cnRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.rise   { animation: cnRise .6s var(--ease-out) both; }
.rise-2 { animation: cnRise .6s var(--ease-out) .08s both; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-0);
  padding: 9px 24px;
}
.site-header__inner { max-width: var(--container-max); margin: 0 auto; }
.site-header__bar {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px 11px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-1);
}
.site-logo {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72, 'wght' 600, 'SOFT' 50, 'WONK' 0;
  font-weight: 600;
  font-size: 25px;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex: none;
}
.site-logo:hover { color: var(--text-primary); }

.nav-desktop { display: flex; align-items: center; gap: 34px; }
.nav-desktop__link {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: var(--fw-medium);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease;
  white-space: nowrap;
}
.nav-desktop__link:hover { color: var(--text-muted); box-shadow: 0 2px 0 0 var(--accent); }
/* Scroll-Spy setzt aria-current, siehe js/main.js. Kein Extra-Klassenname:
   der Zustand steht damit auch für Screenreader in der Seite, statt nur
   optisch. */
.nav-desktop__link[aria-current="page"] {
  color: var(--secondary);
  border-bottom-color: var(--secondary);
}

.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.hamburger:hover { background: var(--surface-sunken); }
/* Zwei fertige Icons statt Transform-Morph auf den drei Linien: ein
   CSS-Transform auf einzelne SVG-<path>-Linien landet je nach Browser
   uneinheitlich relativ zu viewBox vs. gerendertem width/height (führte zu
   einem schiefen Chevron statt X). Umschalten über das ohnehin von main.js
   gesetzte aria-expanded — kein zusätzliches JS nötig. */
.hamburger__icon-close { display: none; }
.hamburger[aria-expanded="true"] .hamburger__icon-menu { display: none; }
.hamburger[aria-expanded="true"] .hamburger__icon-close { display: block; }

.nav-mobile {
  display: none;
  margin-top: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-2);
  flex-direction: column;
  gap: 4px;
}
.nav-mobile[data-open="true"] { display: flex; }
.nav-mobile__link {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: var(--fs-body);
  color: var(--text-body);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.nav-mobile__link:hover { background: var(--surface-sunken); color: var(--text-body); }
.nav-mobile__cta {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  margin-top: 4px;
  background: var(--accent);
  color: var(--text-on-accent);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  text-align: center;
}
.nav-mobile__cta:hover { color: var(--text-on-accent); }

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .hamburger { display: inline-flex; }
}

/* ---------- Sektionen ---------- */
.section { padding: var(--section-pad-y) 24px; scroll-margin-top: 76px; }
.section--aqua { background: var(--surface-aqua); }
.section--sunken { background: var(--surface-sunken); }
.section--dark { background: var(--surface-dark); }

.section__head { max-width: 640px; }
.section__head--center { text-align: center; margin: 0 auto; }
.section__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 14px 0 0;
}
.section__title--on-aqua { color: var(--teal-900); }
.section__title--on-dark { color: var(--light-0); }
.section__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 16px 0 0;
  max-width: 52ch;
}
.section__lead--on-aqua { color: var(--teal-900); max-width: 64ch; }
.section__lead--on-dark { color: var(--light-0); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100svh - 120px);
  display: flex;
  align-items: center;
  padding: 44px 24px 48px;
  scroll-margin-top: 88px;
  box-sizing: border-box;
}
.hero__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
}
.hero__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 580, 'SOFT' 50, 'WONK' 0;
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 55px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 12px 0 0;
}
/* Genau ein Akzentwort pro Headline, in Gold statt fett oder größer —
   Vorgabe des Design-Systems. <em> statt <span>: "Klarheit" IST hier die
   Betonung, das darf auch semantisch dranstehen. */
/* Gold auf Creme lag bei 1.69:1 Kontrast (braucht 3:1) — Cerulean-600 (Marken-
   "Cerulean Blue" #2D728F) auf Creme misst 5.13:1, klar AA-konform, und nutzt
   die bislang unterrepräsentierte Sekundärfarbe stärker. Gold bleibt CTA-
   Flächen vorbehalten (Single Accent Rule). Kurzer Crossfade fürs
   Wort-Rotieren, kein Layout-Shift-Risiko durch abrupten Sprung. */
.hero__title em {
  font-style: normal;
  color: var(--cerulean-600);
  display: inline-block;
  transition: opacity var(--dur-slow) ease;
}
.hero__title em[data-swapping="true"] { opacity: 0; }
.hero__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--ink-800);
  max-width: 56ch;
  margin: 16px 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Feinjustierung aus dem Design-Export: Primary etwas höher, Secondary
   etwas kompakter als der sonstige btn--lg-Standard. Ab 401px, damit sie
   die 400px-Sicherung weiter unten (Button-Umbruch auf sehr schmalen
   Viewports) nicht per Spezifität überstimmt. */
@media (min-width: 401px) {
  .hero__actions .btn--primary { padding: 18px 28px; }
  .hero__actions .btn--secondary { padding: 14px 26px; font-size: var(--fs-body); }
}

/* Bildrahmen: Bilder sitzen in gerahmten Blöcken, nicht als Full-Bleed —
   Vorgabe aus der Imagery-Direction des Design-Systems. */
.framed {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.framed img { width: 100%; height: 100%; object-fit: cover; }
.framed--hero { aspect-ratio: 3 / 2; box-shadow: var(--shadow-3); }

/* ---------- Problem-Sektion ---------- */
/* Zweispaltig: Übernehmende (aqua) / Übergebende (dunkel-teal). Das
   asymmetrische Innenpadding richtet den Außenrand jeder Spalte am
   Container-Rand aus, während zur Mitte hin ein fixer 48px-Abstand bleibt —
   dieselbe Formel wie im Design-Export, nur auf --container-max bezogen
   statt hartkodiert (1208px dort = unser --container-max 1160px + 48px). */
.problem { display: grid; grid-template-columns: 1fr 1fr; }
.problem__col { display: flex; flex-direction: column; padding: 64px 48px 56px; }
.problem__col--left {
  background: var(--surface-aqua);
  padding-left: max(24px, calc((100vw - var(--container-max) - 48px) / 2 + 24px));
}
.problem__col--right {
  background: var(--teal-800);
  padding-right: max(24px, calc((100vw - var(--container-max) - 48px) / 2 + 24px));
}
.problem__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}
.problem__col--left .problem__title { color: var(--teal-900); }
.problem__col--right .problem__title { color: var(--light-0); }
.problem__lead { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 46ch; margin: 14px 0 0; }
.problem__col--left .problem__lead { color: var(--teal-800); }
.problem__col--right .problem__lead { color: var(--aqua-100); }
.problem__rule { height: 1px; margin: 24px 0 22px; }
.problem__col--left .problem__rule { background: rgba(31, 78, 79, 0.18); }
.problem__col--right .problem__rule { background: rgba(255, 255, 255, 0.18); }
.problem__bullets { display: flex; flex-direction: column; gap: 20px; }
.problem__item { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.problem__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.problem__col--left .problem__icon { background: var(--surface-0); color: var(--cerulean-600); }
.problem__col--right .problem__icon { background: var(--aqua-100); color: var(--teal-800); }
.problem__item-title { font-weight: var(--fw-semibold); font-size: 16.5px; }
.problem__col--left .problem__item-title { color: var(--teal-900); }
.problem__col--right .problem__item-title { color: var(--light-0); }
.problem__item-text { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 3px; }
.problem__col--left .problem__item-text { color: var(--teal-800); }
.problem__col--right .problem__item-text { color: var(--aqua-100); }

@media (max-width: 780px) {
  .problem { grid-template-columns: 1fr; }
  .problem__col--left, .problem__col--right { padding: 48px 24px 40px; }
}

/* ---------- Angebote ---------- */
.offers { padding: 64px 24px var(--section-pad-y); scroll-margin-top: 76px; }
.offers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 48px;
}
/* Die dritte Karte stünde zweispaltig allein in der zweiten Reihe — sie
   spannt deshalb über beide Spalten, gedeckelt zentriert. */
@media (max-width: 900px) {
  .offers__grid { grid-template-columns: 1fr 1fr; }
  .offers__grid > .offer-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }
}
@media (max-width: 780px) {
  .offers__grid { grid-template-columns: 1fr; }
  .offers__grid > .offer-card:nth-child(3) { max-width: none; margin: 0; }
}
/* Badge rechts oben auf der Karte — nur Horizont-Diagnose trägt einen
   (Hauptangebot markieren, ohne wie im alten Design eine eigene
   Highlight-Kartenform zu brauchen). */
.offer-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-block;
  background: var(--cerulean-600);
  color: var(--cerulean-50);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

/* Prozessbegleitung: eigenes volles Dark-Band unter dem 3er-Grid statt
   einer vierten Karte in der Reihe — Hierarchie über Fläche. */
/* Innenabstand sitzt pro Spalte statt am Band — so behält das Bild beim
   Umbruch seinen eigenen Rand. */
.offer-highlight {
  margin-top: 24px;
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Spaltenabstand doppelt so breit wie der Karteninnenrand — die Spalten
     brauchen mehr Luft zueinander als zur Kartenkante. */
  gap: 24px calc(var(--card-pad) * 2);
  align-items: start;
}
/* Ohne min-width:0 setzt die unteilbare Überschrift "Prozessbegleitung" plus
   Icon die Mindestbreite der Spalte und sprengt damit die Karte. */
.offer-highlight-intro,
.offer-highlight-bullets,
.offer-highlight-media { min-width: 0; }
/* flex-wrap greift erst, wenn Icon und Titel nebeneinander nicht mehr in die
   Spalte passen — der Titel rutscht dann unter das Icon statt überzulaufen. */
.offer-highlight-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 4px 0 8px;
}
.offer-highlight-icon {
  display: flex;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  align-items: center;
  justify-content: center;
  flex: none;
}
.offer-highlight-title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-size: var(--fs-subhead);
  line-height: 1;
  color: #fff;
  margin: 0;
  position: relative;
  top: 2px;
}
.offer-highlight-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--aqua-100); margin: 8px 0 0; max-width: 46ch; }
/* Die Bullets setzen bewusst tiefer an als der Intro-Text, damit sie optisch
   auf Höhe des Fließtexts starten statt auf Höhe der Überschrift. */
.offer-highlight-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  margin-top: 64px;
}
.offer-highlight-bullet {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: #fff;
}
.offer-highlight-bullet::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.offer-highlight-media {
  align-self: center;
  aspect-ratio: 12 / 7;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.offer-highlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .offer-highlight { grid-template-columns: 1fr 1fr; }
  .offer-highlight-media {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 400px;
    justify-self: center;
  }
}
@media (max-width: 780px) {
  /* Einspaltig gestapelt zählt der margin-top der Bullets (Baseline-Ausgleich
     zum Titel auf Desktop) zusätzlich zum Grid-Row-Gap — beides zusammen
     verdoppelte den Abstand. Row-Gap allein auf .offer-card__desc-Maß
     gebracht, margin-top entfällt. */
  .offer-highlight { grid-template-columns: 1fr; gap: 16px; }
  .offer-highlight-bullets { margin-top: 0; }
  .offer-highlight-media { max-width: 320px; }
}

/* ---------- Referenzen ---------- */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* ---------- Horizont-Diagnose ---------- */
.diag__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  grid-template-rows: auto auto;
  gap: 16px 28px;
  margin-bottom: 44px;
}
.diag__head-title { grid-column: 1; grid-row: 1; }
.diag__head-lead { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
.diag__actions { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.diag__action-row { display: flex; flex-wrap: wrap; gap: 12px; }
.diag__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}
.diag__panel {
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Flache Aqua-Panels kommen ohne Rand aus — das Design-System trennt sie
   über die Tönung, nicht über Border oder Shadow. */
.diag__panel { background: var(--surface-aqua); }
.diag__panel-title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  color: var(--teal-900);
  margin: 0;
}
.diag__panel-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--teal-800);
  margin: 14px 0 18px;
  max-width: 46ch;
}
.diag__rule { height: 1px; background: rgba(31, 78, 79, 0.18); margin: 18px 0 6px; }
.diag__fields { list-style: none; padding: 0; margin: 0; }
.diag__field {
  display: grid;
  grid-template-columns: var(--icon-box) 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(31, 78, 79, 0.12);
}
.diag__field:last-child { padding: 14px 0 4px; border-bottom: 0; }
.diag__field-icon {
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 50%;
  background: var(--teal-800);
  color: var(--light-0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diag__field-body { min-width: 0; }
.diag__field-title { font-weight: var(--fw-semibold); color: var(--teal-900); font-size: 16.5px; }
.diag__field-text { font-size: var(--fs-body-s); color: var(--teal-800); }

/* ---------- Horizont-Diagnose ausprobieren ---------- */
.tryout {
  margin-top: 24px;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: minmax(280px, 620px) minmax(240px, 1fr);
  gap: 40px;
  align-items: start;
}
/* min-width:0, sonst zwingt die Mindestbreite des langen CTA-Buttons die
   Grid-Spalte über das Innenpolster der Karte hinaus. */
.tryout__intro { max-width: 620px; min-width: 0; }
.tryout__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  color: var(--ink-900);
  margin: 0;
}
.tryout__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 10px 0 0;
}
.tryout__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.tryout__cta { margin-top: 22px; }
/* Feste Höhe statt Seitenverhältnis: die Karte soll neben dem Textblock
   nicht mitwachsen, das Bild beschneidet dafür oben und unten. */
.tryout__media {
  justify-self: end;
  align-self: start;
  width: 100%;
  min-width: 0;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tryout__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) {
  .tryout { grid-template-columns: 1fr; }
  .tryout__media { justify-self: center; }
  /* Einzige Stelle, an der ein Button umbrechen darf: das Label ist länger
     als die Karte hier innen breit ist. Sitewide bleiben Buttons einzeilig. */
  .tryout__cta .btn { white-space: normal; text-align: center; }
}

/* ---------- Generationen ---------- */
/* Vollbild statt Bild-neben-Text: Gradient trägt die Lesbarkeit fürs
   zentrierte Zitat, kein separates Eyebrow-Label (s. static-doku.md). */
.generations { padding: 72px 24px 64px; scroll-margin-top: 76px; }
.generations__media {
  position: relative;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.generations__media img { width: 100%; height: 100%; object-fit: cover; }
.generations__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(31, 78, 79, 0) 0%, rgba(31, 78, 79, .85) 100%);
  pointer-events: none;
}
.generations__quote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  text-align: center;
  padding: 0 40px;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- Über uns ---------- */
.about__intro { max-width: 720px; }
.about__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 20px 0 0; }
.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
  margin-top: 48px;
}
.person {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  min-width: 0;
}
.person__photo { width: 100%; aspect-ratio: 4 / 3; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__body { padding: 24px 26px 28px; }
.person__name {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  color: var(--text-primary);
  margin: 0;
}
.person__role {
  font-size: var(--fs-small);
  color: var(--secondary);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.person__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 18px 0 0; }
.person__text + .person__text { margin-top: 12px; }
.person__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--cerulean-700);
  text-decoration: none;
}
.person__link:hover { filter: brightness(1.4); }

/* ---------- FAQ ---------- */
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__list {
  margin-top: 40px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 6px 26px;
}
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 0; }
.faq__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 20px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.faq__btn:hover { color: var(--secondary); }
.faq__chevron {
  flex: none;
  color: var(--secondary);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__btn[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__panel { padding: 0 2px 20px; }
.faq__panel[hidden] { display: none; }
.faq__answer { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; max-width: 68ch; }

/* ---------- Kontakt ---------- */
.contact__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  grid-template-rows: auto 1fr;
  gap: 18px 48px;
  align-items: stretch;
}
.contact__title-col { grid-column: 1; grid-row: 1; align-self: end; }
.contact__body-col { grid-column: 1; grid-row: 2; }
.contact__form-col { grid-column: 2; grid-row: 1 / 3; height: 100%; display: flex; flex-direction: column; margin-top: 30px; }

.contact__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--light-0);
  margin: 0;
  max-width: 48ch;
}
.contact__card {
  width: 100%;
  text-align: left;
  margin-top: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
.contact__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.contact__card-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--cerulean-600);
  color: var(--cerulean-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__card-body { flex: 1; min-width: 0; }
.contact__card-title { display: block; font-weight: var(--fw-semibold); color: var(--text-primary); font-size: 16.5px; }
.contact__card-arrow { color: var(--secondary); }

.contact__mail { margin-top: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; }
.contact__mail-label { display: block; font-weight: var(--fw-semibold); color: var(--light-0); font-size: var(--fs-body); }
.contact__mail a { display: block; font-size: var(--fs-small); color: var(--aqua-100); text-decoration: none; }
.contact__mail altcha-widget + altcha-widget { margin-top: 2px; }
.contact__mail a:hover { filter: brightness(1.4); color: var(--aqua-100); }

.contact__scan-card {
  width: 100%;
  text-align: left;
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) ease;
}
.contact__scan-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .08); }
.contact__scan-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: var(--aqua-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__scan-title { display: block; font-weight: var(--fw-semibold); color: var(--light-0); font-size: var(--fs-body); }
.contact__scan-sub { display: block; font-size: var(--fs-small); color: var(--aqua-100); }

.contact__form-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 32px;
}
.contact__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.contact__form[hidden] { display: none; }
.contact__form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.contact__form-row > div { min-width: 0; }
.contact__field { margin-top: 16px; }
.contact__field--grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.contact__field--grow textarea {
  flex: 1 1 auto;
  min-height: 160px;
  height: 100%;
}

.contact__consent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.contact__consent input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--cerulean-600);
}
.contact__consent input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact__consent span { min-width: 0; }
.contact__consent a { color: var(--link); text-decoration: underline; }

.contact__submit-wrap { margin-top: 16px; }

/* Statusmeldungen nach dem PHP-Redirect. Im Prototyp war das React-State
   (this.state.sent) — hier kommt der Zustand aus dem Query-Parameter, den
   contact.php setzt, siehe js/main.js. */
.contact__status {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 8px;
  display: none;
}
.contact__status[data-visible="true"] { display: flex; }
.contact__status-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aqua-100);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.contact__status-title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  color: var(--text-primary);
  margin: 0;
}
.contact__status-text { font-size: var(--fs-body); color: var(--text-muted); margin: 8px 0 0; max-width: 40ch; }
.contact__error-banner {
  display: none;
  gap: 10px;
  align-items: flex-start;
  background: #F6E1DD;
  color: #7A2C20;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin-bottom: 18px;
}
.contact__error-banner[data-visible="true"] { display: flex; }

/* ---------- Footer ---------- */
.site-footer { padding: 24px 24px 40px; }
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--surface-dark-deep);
  border-radius: 14px;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
/* Footer folgt der Footer-Komponente aus dem Design-System-Bundle (21/13/13.5px),
   nicht dem Inline-Footer der Horizont-Diagnose-Seite: alle Seiten außer jener
   nutzen im Export die Komponente, im Deploy teilen sich alle Seiten diesen Footer. */
.site-footer__logo {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72, 'wght' 600, 'SOFT' 50, 'WONK' 0;
  font-weight: 600;
  font-size: 21px;
  color: var(--light-0);
  justify-self: start;
}
.site-footer__copy { font-size: 13px; color: var(--aqua-200); text-align: center; justify-self: center; }
.site-footer__links { display: flex; gap: 22px; justify-self: end; }
.site-footer__links a {
  color: var(--aqua-300);
  font-size: 13.5px;
  text-decoration: underline;
  font-weight: var(--fw-semibold);
}
.site-footer__links a:hover { filter: brightness(1.4); color: var(--aqua-300); }

/* ---------- Rechtstexte-Hero (Titel/Lead auf Impressum + Datenschutz, exportgetreu) ---------- */
.legal-hero__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 14px 0 0;
}
.legal-hero__lead { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--text-muted); margin: 16px 0 0; max-width: 68ch; }

/* ---------- Impressum ---------- */
.impressum { padding: 64px 24px 100px; }
.impressum__inner { max-width: 980px; margin: 0 auto; }

.impressum-top-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 780px) { .impressum-top-grid { grid-template-columns: 1fr; } }

.impressum-tmg-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; background: var(--surface-aqua); }
.impressum-tmg-card--dark { border: none; background: var(--surface-dark); }

.impressum-tmg-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.impressum-tmg-card__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--cerulean-600); color: var(--cerulean-50); display: flex; align-items: center; justify-content: center; }
.impressum-tmg-card__icon--dark { background: rgba(255,255,255,.1); color: var(--aqua-100); }
.impressum-tmg-card__title { font-family: var(--font-display); font-variation-settings: var(--fraunces-heading); font-size: var(--fs-h3); color: var(--text-primary); margin: 0; }
.impressum-tmg-card__title--dark { color: var(--light-0); }

.impressum-tmg-card__name { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-h4); margin: 0; }
.impressum-tmg-card__name--dark { color: var(--light-0); }
.impressum-tmg-card__role { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
.impressum-tmg-card__role--dark { color: var(--cerulean-100); }

.impressum-tmg-card__divider { height: 1px; background: var(--border); margin: 18px 0; }
.impressum-tmg-card__divider--dark { background: rgba(255,255,255,.14); }

.impressum-tmg-card__label { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-small); }
.impressum-tmg-card__label--dark { color: var(--light-0); }
.impressum-tmg-card__address { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 6px 0 0; }
.impressum-tmg-card__address--dark { color: var(--light-0); }
.impressum-tmg-card__vat { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted); margin: 14px 0 0; }
.impressum-tmg-card__vat--dark { color: var(--aqua-200); }

.impressum-tmg-card__contact { display: flex; align-items: center; gap: 12px; }
.impressum-tmg-card__contact-icon { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-sunken); color: var(--secondary); display: flex; align-items: center; justify-content: center; }
.impressum-tmg-card__contact-icon--dark { background: rgba(255,255,255,.1); color: var(--aqua-100); }
.impressum-tmg-card__contact altcha-widget a { display: block; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-primary); text-decoration: none; }
.impressum-tmg-card__contact altcha-widget a:hover { color: var(--secondary); }
.impressum-tmg-card--dark .impressum-tmg-card__contact altcha-widget a { color: var(--light-0); }
.impressum-tmg-card--dark .impressum-tmg-card__contact altcha-widget a:hover { color: var(--aqua-100); }

.impressum-callout { margin-top: 20px; background: var(--surface-aqua-tint); border-radius: var(--radius-lg); padding: 24px 28px; display: flex; gap: 18px; align-items: flex-start; }
.impressum-callout__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-dark-deep); color: var(--light-0); display: flex; align-items: center; justify-content: center; }
.impressum-callout__title { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-h4); margin-bottom: 6px; }
.impressum-callout__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }

.impressum-section { margin-top: 40px; }
.impressum-section__head { border-left: 3px solid var(--secondary); padding-left: 16px; }
.impressum-section__title { font-family: var(--font-display); font-variation-settings: var(--fraunces-heading); font-size: var(--fs-h3); color: var(--text-primary); margin: 0; }
.impressum-section__h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0 0 8px; }
.impressum-section__text { margin-top: 20px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.impressum-section__text--wide { max-width: 76ch; }

.impressum-haftung-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 780px) { .impressum-haftung-grid { grid-template-columns: 1fr; } }

/* ---------- Datenschutz (Sidebar-TOC + nummerierte Sektionen) ---------- */
.datenschutz { padding: 64px 24px 100px; }
.datenschutz__inner { max-width: 1080px; margin: 0 auto; }

.ds-grid { margin-top: 48px; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
@media (max-width: 880px) { .ds-grid { grid-template-columns: 1fr; } .ds-aside { position: static !important; top: auto !important; } }

.ds-aside { position: sticky; top: 96px; }
.ds-aside__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; padding: 0 14px; }
.ds-toc { display: flex; flex-direction: column; gap: 2px; }
.ds-toc__link { display: block; padding: 9px 14px; border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--text-muted); text-decoration: none; font-weight: var(--fw-medium); scroll-margin-top: 100px; }
.ds-toc__link:hover { color: var(--text-primary); }
.ds-toc__link--active { background: var(--surface-1); color: var(--text-primary) !important; font-weight: var(--fw-semibold); }

.ds-content { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.ds-section { scroll-margin-top: 96px; }
.ds-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ds-section__title { font-family: var(--font-display); font-variation-settings: var(--fraunces-heading); font-size: var(--fs-h2); color: var(--text-primary); margin: 0; }
.ds-section__h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 22px 0 10px; }
.ds-section__h3:first-of-type { margin-top: 0; }
.ds-section__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0 0 22px; }
.ds-section__text:last-child { margin-bottom: 0; }

.ds-infobox { margin-top: 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; }
.ds-infobox:first-of-type { margin-top: 22px; }
.ds-infobox__title { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-h4); margin-bottom: 6px; }
.ds-infobox__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }

.ds-checklist { display: flex; flex-direction: column; gap: 12px; }
.ds-checklist__item { display: flex; gap: 12px; align-items: flex-start; }
.ds-checklist__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--aqua-100); color: var(--success); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.ds-checklist__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }

.ds-rights-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ds-rights-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.ds-rights-card__title { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-h4); margin-bottom: 6px; }
.ds-rights-card__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin: 0; }

.ds-finePrint { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-muted); margin: 22px 0 0; }

.ds-auth-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ds-auth-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.ds-auth-card__title { font-weight: var(--fw-semibold); color: var(--text-primary); font-size: var(--fs-body); margin-bottom: 6px; }
.ds-auth-card__sub { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 8px; }
.ds-auth-card__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }

.ds-responsible-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ds-responsible-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; }
.ds-responsible-card__name { font-family: var(--font-display); font-variation-settings: var(--fraunces-heading); font-size: var(--fs-h4); color: var(--text-primary); margin: 0 0 10px; }
.ds-responsible-card__address { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.ds-responsible-card__email { margin-top: 10px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* ---------- 404 ---------- */
.error404-page { min-height: 100svh; display: flex; flex-direction: column; background: var(--surface-dark); }
.error404 { flex: 1; min-height: 640px; box-sizing: border-box; position: relative; overflow: hidden; display: flex; align-items: center; padding: 64px 24px; }
.error404__illustration { position: absolute; inset: 0; width: 100%; height: 100%; }
.error404__inner { width: min(560px, 100%); position: relative; z-index: 1; }
.error404__title { font-family: var(--font-display); font-variation-settings: var(--fraunces-display); font-size: clamp(30px, 4vw, 44px); line-height: 1.14; letter-spacing: -0.01em; color: var(--light-0); margin: 16px 0 0; }
.error404__lead { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--light-0); opacity: .88; max-width: 46ch; margin: 18px 0 0; }
.error404__cta { margin-top: 40px; position: relative; }
.error404__cta-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--aqua-100); margin-bottom: 12px; }

@keyframes error404ScribblePulse { 0%, 100% { opacity: .45; } 50% { opacity: .72; } }
.error404__encircle { animation: error404ScribblePulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .error404__encircle { animation: none !important; }
}
@media (max-width: 780px) {
  .error404 { padding: 96px 24px 200px; min-height: 680px; }
}

/* Markiert Text, der noch vom Auftraggeber kommt. Bewusst auffällig — dieser
   Marker DARF nicht live gehen, siehe static-doku.md. */
.todo {
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: var(--fw-semibold);
  color: var(--gold-900);
}

/* ---------- Responsive ---------- */
/* Silbentrennung erst ab schmalen Spalten. Deutsche Komposita brechen sonst
   über overflow-wrap mitten im Wort und OHNE Trennstrich um
   ("Handlungsempfehlun|gen") — das ist typografisch schlechter als der
   Überlauf, den es behebt. hyphens:auto trennt stattdessen an echten
   Silbengrenzen mit sichtbarem Strich ("Handlungsempfeh-|lungen"); die
   Seite ist lang="de", die Browser-Wörterbücher greifen also.
   Bewusst nur mobil: auf Desktop sind die Spalten breit genug, dort wäre
   Trennung eine unnötige Änderung am Design. */
@media (max-width: 400px) {
  body { hyphens: auto; }
  /* Nicht trennen: Headlines, Buttons, Labels — dort wirkt ein Trennstrich
     wie ein Fehler. Und die Zitat-Karten: das sind Display-Zitate in
     Fraunces italic, die zerfielen sonst in "loslas-sen"/"Si-cherheit" und
     sähen zerhackt aus. Ihr längstes Wort ("Organisation") passt ohnehin. */
  h1, h2, h3, .btn, .eyebrow, .site-logo, .offer-card__badge,
  .quote-card__quote, .hero__title {
    hyphens: manual;
  }
}

@media (max-width: 780px) {
  .hero__grid { grid-template-columns: 1fr; }
  .contact__title-col, .contact__body-col, .contact__form-col {
    grid-column: 1;
    grid-row: auto;
    height: auto;
  }
  .diag__actions { grid-column: 1; grid-row: 3; align-self: auto; }
}

/* Footer-Komponente bricht eigenständig bei 640px, unabhängig vom
   780px-Breakpoint des restlichen Seiteninhalts. */
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__logo, .site-footer__copy, .site-footer__links { justify-self: center; }
}

/* Sehr schmale Viewports (iPhone SE & Co., 320px).
   Das Design-System gibt Buttons white-space:nowrap mit — sinnvoll, damit
   kurze Labels nicht albern umbrechen. Bei langen deutschen Labels sprengt
   ein lg-Button damit aber die ca. 272px, die bei 320px Viewport abzüglich
   Sektions-Padding übrig bleiben. Hier darf er umbrechen — ein zweizeiliger
   Button ist allemal besser als eine horizontal scrollende Seite. */
@media (max-width: 400px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  .btn--lg { font-size: var(--fs-body); padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js-smooth-scroll { scroll-behavior: auto; }
  .rise, .rise-2 { animation: none; }
  .contact__card:hover, .contact__scan-card:hover { transform: none; }
}