/* ============================================================
 * styles.css — ruedigervogel.de
 * Token-Basis: global.css (Bereich 0/1/2)
 * Layout-Token: tokens-fundament.css (--width-page, --width-content)
 * Null Inline-Styles, token-basiert (wenige dokumentierte Sonderwerte)
 * ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-v5-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-v5-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-v19-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-v19-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── TOKEN-BASIS (aus global.css Bereich 0/1/2) ─────────────── */

:root {
  /* Bereich 0 — Strukturelle Konstanten */
  --frame-width-desktop: 1280px;
  --frame-width-mobile:   390px;

  /* Bereich 1 — Varianten: Editorial New (Fallback, nicht Produktion) */
  --font-family-display:   "Editorial New";
  --size-hero-lp-d:        64px;  --size-hero-lp-m:        48px;
  --size-hero-content-d:   60px;  --size-hero-content-m:   40px;
  --size-h2-d:             32px;  --size-h2-m:             24px;
  --size-pull-d:           28px;  --size-pull-m:           22px;
  --size-band-h2-d:        40px;  --size-band-h2-m:        32px;
  --size-cta-hl-d:         34px;  --size-cta-hl-m:         28px;
  --size-wordmark-d:       22px;  --size-wordmark-m:       18px;
  --size-ziffer-d:        104px;  --size-ziffer-m:         64px;

  /* Bereich 2 — Non-Varianten: Fließtext, Farben, Flächen, Radius, Striche */
  --font-family-body:      "Source Sans 3", system-ui, sans-serif;
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;

  --lh-hero-lp:            1.06;
  --lh-hero-content:       1.1;
  --lh-h2:                 1.15;
  --lh-lead:               1.3;
  --lh-body:               1.6;
  --lh-kachel:             1.55;
  --lh-pull:               1.2;

  --size-body-d:           18px;  --size-body-m:           16px;
  --size-lead-d:           21px;  --size-lead-m:           19px;
  --size-m5-text-d:        17px;  --size-m5-text-m:        16px;
  --size-internelinks-d:   18px;  --size-internelinks-m:   16px;
  --size-lp-dek-d:         16px;  --size-lp-dek-m:         15px;
  --size-band-sub-d:       16px;  --size-band-sub-m:       15px;
  --size-button-d:         16px;  --size-button-m:         15px;
  --size-fragen-d:         24px;  --size-fragen-m:         22px;
  --size-h3:               22px;
  --size-h4:               17px;
  --size-nav-link:         15px;
  --size-byline:           15px;
  --size-eyebrow:          13px;
  --size-footer:           14px;
  --size-band-fliesstext:  16px;
  --size-kachel:           13px;
  --size-quellen:          14px;

  --color-heading:         #222222;
  --color-body:            #333333;
  --color-meta:            #767676;
  --color-subtle:          #9a9a9a;
  --color-kachel:          #cfcfcf;
  --color-disabled:        #A0A0A0;
  --color-on-dark:         #ffffff;
  --color-accent:          #A62022;

  --color-surface-page:    #ffffff;
  --color-surface-card:    #F3F4F6;
  --color-surface-band:    #1c1c1c;
  --color-surface-kachel:  #262626;
  --color-border:          #E5E5E5;
  --color-border-kachel:   #383838;

  /* Radius + Striche: Pencil-Werte unitlos; hier als px für CSS */
  --radius-button:          6px;
  --radius-kachel:         24px;
  --radius-portrait:       12px;
  --stroke-bar:             3px;
  --stroke-border:          1px;
  --stroke-marker-w:       38px;
  --stroke-eyebrow-bar:     2px;

  /* Letter-Spacing Eyebrow: Pencil unitlos; CSS-Interpretation per SSOT-Hinweis */
  --ls-eyebrow-d:          0.12em;  /* Pencil: 0.12 → em */
  --ls-eyebrow-m:          1.5px;   /* Pencil: 1.5 → px  */

  /* Layout (aus tokens-fundament.css) */
  --width-page:          1140px;
  --width-content:        720px;

  /* Fokus-Ring */
  --focus-ring: 2px solid var(--color-accent);
}

/* Instrument Serif — aktives Produktion-Theme (entschieden 30.06.2026) */
[data-font="instrument-serif"] {
  --font-family-display:  "Instrument Serif";
  --size-hero-lp-d:        96px;  --size-hero-lp-m:        64px;
  --size-hero-content-d:   72px;  --size-hero-content-m:   48px;
  --size-h2-d:             40px;  --size-h2-m:             32px;
  --size-pull-d:           32px;  --size-pull-m:           24px;
  --size-band-h2-d:        48px;  --size-band-h2-m:        40px;
  --size-cta-hl-d:         40px;  --size-cta-hl-m:         32px;
  --size-wordmark-d:       24px;  --size-wordmark-m:       20px;
  --size-ziffer-d:        120px;  --size-ziffer-m:         78px;
}

/* ── RESET ──────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family-body);
  color: var(--color-body);
  background-color: var(--color-surface-page);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 1280px;
  margin: 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

ul,
ol {
  list-style: none;
}

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

/* ── NAVIGATION ─────────────────────────────────────────────── */

.nav-bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 70px;
  background-color: var(--color-surface-page);
}

.nav__wordmark {
  font-family: var(--font-family-display);
  font-size: var(--size-wordmark-d);
  font-weight: var(--weight-regular);
  color: var(--color-heading);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font-family: var(--font-family-body);
  font-size: var(--size-nav-link);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
}

.nav__link--active {
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-heading);
  line-height: 0;
}

/* ── HERO ───────────────────────────────────────────────────── */

.hero {
  padding: 80px 70px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__eyebrow-bar {
  display: block;
  flex-shrink: 0;
  width: var(--stroke-marker-w);
  height: var(--stroke-eyebrow-bar);
  background-color: var(--color-accent);
}

.hero__eyebrow-txt {
  font-family: var(--font-family-body);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
  letter-spacing: var(--ls-eyebrow-d);
}

.hero__h1 {
  font-family: var(--font-family-display);
  font-size: var(--size-hero-content-d);
  font-weight: var(--weight-regular); /* Pencil: 300; IS kein Light → Regular */
  line-height: var(--lh-hero-content);
  color: var(--color-heading);
  max-width: 700px;
}

.hero__dek {
  font-family: var(--font-family-body);
  font-size: var(--size-lead-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-lead);
  color: var(--color-body);
  max-width: 620px;
}

.hero__byline {
  font-family: var(--font-family-body);
  font-size: var(--size-byline);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
}

/* ── THESIS ─────────────────────────────────────────────────── */

.thesis {
  padding: 60px 70px 0;
}

.thesis__p {
  font-family: var(--font-family-body);
  font-size: var(--size-body-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
  max-width: var(--width-content);
}

/* ── BODY SECTIONS (H2) ─────────────────────────────────────── */

.body-section {
  padding: 80px 70px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.body-section__h2 {
  font-family: var(--font-family-display);
  font-size: var(--size-h2-d);
  font-weight: var(--weight-regular); /* Pencil: 300; IS kein Light → Regular */
  line-height: var(--lh-h2);
  color: var(--color-heading);
  max-width: var(--width-content);
}

.body-section__p {
  font-family: var(--font-family-body);
  font-size: var(--size-body-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
  max-width: var(--width-content);
}

.body-section__p strong {
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.pull-wrap {
  padding-top: 50px;
}

.pull-statement {
  font-family: var(--font-family-display);
  font-size: var(--size-pull-d);
  font-weight: var(--weight-regular); /* Pencil: 300; IS kein Light → Regular */
  line-height: var(--lh-pull);
  color: var(--color-heading);
  max-width: var(--width-content);
}

/* ── INTERNE LINKS ──────────────────────────────────────────── */

.interne-links {
  padding: 80px 70px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interne-links__sep {
  width: var(--width-content);
  border: none;
  border-top: var(--stroke-border) solid var(--color-border);
}

.interne-links ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interne-links__link {
  font-family: var(--font-family-body);
  font-size: var(--size-internelinks-d);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.interne-links__link:hover {
  text-decoration: underline;
}

/* ── QUELLENVERZEICHNIS ─────────────────────────────────────── */

.quellen {
  padding: 60px 70px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quellen__label {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-semibold);
  color: var(--color-meta);
}

.quellen__hairline {
  width: var(--width-content);
  border: none;
  border-top: var(--stroke-border) solid var(--color-border);
}

.quellen__entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--width-content);
}

.quellen__text {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--color-meta);
}

.quellen__url {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.quellen__url:hover {
  text-decoration: underline;
}

/* ── CTA (M5) ───────────────────────────────────────────────── */

.cta {
  padding: 80px 70px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cta__hl {
  font-family: var(--font-family-display);
  font-size: var(--size-cta-hl-d);
  font-weight: var(--weight-regular); /* Pencil: 300; IS kein Light → Regular */
  color: var(--color-heading);
}

.cta__text {
  font-family: var(--font-family-body);
  font-size: var(--size-m5-text-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
  max-width: 620px;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background-color: var(--color-heading);
  color: var(--color-on-dark);
  font-family: var(--font-family-body);
  font-size: var(--size-button-d);
  font-weight: var(--weight-regular);
  border-radius: var(--radius-button);
  align-self: flex-start;
}

/* ── UMSETZUNGS-BLOCK ───────────────────────────────────────── */

.umsetzung {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 60px 70px;
  background-color: var(--color-surface-card);
}

/* Einheitlicher Abstand CTA → Umsetzungs-Block: 80px (Desktop) — Referenz Modell-Seite: das eigene Bottom-Padding des .cta-Blocks, ohne zusätzliche Margin. */

/* Insights-Hub: Verbände-CTA liegt in <main> ohne eigenes Bottom-Padding → 80px via padding-bottom */
[data-block="veranstalter-cta"] {
  padding-bottom: 80px;
}

/* Kontakt: .umsetzung folgt einem <main>-Block ohne eigenes Bottom-Padding → 80px via margin */
.umsetzung--gap {
  margin-top: 80px;
}

.umsetzung__signet {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.umsetzung__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.umsetzung__text {
  font-family: var(--font-family-body);
  font-size: var(--size-lp-dek-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
}

.umsetzung__link {
  font-family: var(--font-family-body);
  font-size: var(--size-nav-link);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.umsetzung__link:hover {
  text-decoration: underline;
}

/* ── FOOTER ─────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 70px;
  background-color: var(--color-surface-page);
}

.site-footer__copy,
.site-footer__nav {
  font-family: var(--font-family-body);
  font-size: var(--size-footer);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
}

.site-footer__nav a {
  color: var(--color-meta);
}

.site-footer__nav a:hover {
  color: var(--color-heading);
}

.site-footer__sep {
  color: var(--color-meta);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 640px) {

  .nav-bar {
    height: 56px;
    padding: 0 24px;
  }

  .nav__wordmark {
    font-size: var(--size-wordmark-m);
  }

  .nav__menu {
    display: none; /* Standard geschlossen; .nav-bar.is-open blendet es ein (nav.js) */
  }

  .nav__burger {
    display: flex;
  }

  /* Geöffnetes Mobile-Menü: schlichtes Dropdown unter der Bar */
  .nav-bar.is-open .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-surface-page);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    padding: 4px 24px 12px;
  }

  .nav-bar.is-open .nav__link {
    padding: 12px 0;
  }

  .nav-bar.is-open .nav__link + .nav__link {
    border-top: 1px solid var(--color-border);
  }

  .hero {
    padding: 60px 24px 48px;
    gap: 20px;
  }

  .hero__eyebrow-txt {
    letter-spacing: var(--ls-eyebrow-m);
  }

  .hero__h1 {
    font-size: var(--size-hero-content-m);
    max-width: none;
  }

  .hero__dek {
    /* Cornerstone Mobile: 18 px — scoped, kein eigener Token (SSOT §2 Anmerkung) */
    font-size: 18px;
    max-width: none;
  }

  .thesis {
    padding: 48px 24px 0;
  }

  .thesis__p {
    font-size: var(--size-body-m);
    max-width: none;
  }

  .body-section {
    padding: 60px 24px 0;
  }

  .body-section__h2 {
    font-size: var(--size-h2-m);
    max-width: none;
  }

  .body-section__p {
    font-size: var(--size-body-m);
    max-width: none;
  }

  .pull-statement {
    font-size: var(--size-pull-m);
    max-width: none;
  }

  .interne-links {
    padding: 60px 24px 0;
  }

  .interne-links__sep {
    width: 100%;
  }

  .interne-links__link {
    font-size: var(--size-internelinks-m);
  }

  .quellen {
    padding: 48px 24px 0;
  }

  .quellen__hairline {
    width: 100%;
  }

  .quellen__entry {
    max-width: none;
  }

  .cta {
    padding: 56px 24px;
  }

  [data-block="veranstalter-cta"] {
    padding-bottom: 56px;
  }

  .umsetzung--gap {
    margin-top: 56px;
  }

  .cta__hl {
    font-size: var(--size-cta-hl-m);
  }

  .cta__text {
    font-size: var(--size-m5-text-m);
    max-width: none;
  }

  .cta__btn {
    font-size: var(--size-button-m);
    font-weight: var(--weight-semibold);
  }

  .umsetzung {
    padding: 48px 24px;
    align-items: flex-start;
  }

  .umsetzung__body {
    gap: 8px;
  }

  .umsetzung__text {
    font-size: var(--size-lp-dek-d); /* 16px — kein Breakpoint-Wechsel */
  }

  .umsetzung__link {
    font-size: var(--size-nav-link);
  }

  .site-footer {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 4px;
  }

  .site-footer__copy,
  .site-footer__nav {
    font-size: var(--size-footer);
  }
}

/* ── STATISCHE SEITEN ────────────────────────────────────────────
   Klassen für Über, Vorträge & Medien, Kontakt.
   Erweiterung gemäß cli-prompt-batch §1.7 (neue Seitentyp-Klassen).
   ─────────────────────────────────────────────────────────────── */

/* Über — Portrait */
.portrait-block {
  padding: 0 70px 0;
}

/* Weniger Weißraum zwischen Über-Bild und folgendem Bio-Text */
.portrait-block + .body-section {
  padding-top: 48px;
}

.portrait-block__img {
  max-width: var(--width-content);
  height: auto;
  border-radius: var(--radius-portrait);
}

/* Vorträge — Sektionsbild (Hero-Foto, Querformat) */
.hero-img {
  padding: 0;
  overflow: hidden;
}

.hero-img__img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  /* Crop nach oben verschieben, damit der Kopf nicht abgeschnitten wird (unten ist nur Podium) */
  object-position: 50% 20%;
}

/* Vorträge — Vortragsthema-Block */
.vortraege-thema {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
  border-top: var(--stroke-border) solid var(--color-border);
}

/* Vortragstitel wie die Insights-Überschriften der LP (--size-pull-d / --lh-pull) */
.vortraege-thema__h3 {
  font-family: var(--font-family-display);
  font-size: var(--size-pull-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-pull);
  color: var(--color-heading);
  max-width: var(--width-content);
}

.vortraege-thema__sub {
  font-family: var(--font-family-body);
  font-size: var(--size-body-d);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  max-width: var(--width-content);
}

.vortraege-thema__meta {
  font-family: var(--font-family-body);
  font-size: var(--size-byline);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
}

/* Vorträge — Referenz- und Beitrags-Tabelle */
.ref-table {
  width: 100%;
  max-width: var(--width-content);
  border-collapse: collapse;
}

.ref-table__th {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-semibold);
  color: var(--color-meta);
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: var(--stroke-border) solid var(--color-border);
}

.ref-table__td {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-regular);
  color: var(--color-body);
  padding: 10px 12px 10px 0;
  border-bottom: var(--stroke-border) solid var(--color-border);
  vertical-align: top;
  line-height: var(--lh-body);
}

/* Link in Tabellenzellen — Akzentfarbe, Unterstreichung bei Hover (Zellen-Schriftgröße bleibt) */
.ref-table__link {
  color: var(--color-accent);
}
.ref-table__link:hover {
  text-decoration: underline;
}

/* Vorträge — Galerie */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: var(--width-content);
}

/* 5. Galeriebild über beide Spalten (wie in Pencil) */
.gallery-grid > :nth-child(5) {
  grid-column: 1 / -1;
}

/* Vollbild-Bild flacher (Banner), Crop so gesetzt, dass der Kopf gerade nicht angeschnitten wird */
.gallery-grid > :nth-child(5) img {
  aspect-ratio: 2 / 1;
  object-position: 50% 30%;
}

.radius-portrait {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-portrait);
}

.radius-portrait__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Kontakt — Formular */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__label {
  font-family: var(--font-family-body);
  font-size: var(--size-byline);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.contact-form__select,
.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-family-body);
  font-size: var(--size-body-d);
  font-weight: var(--weight-regular);
  color: var(--color-body);
  background-color: var(--color-surface-page);
  border: var(--stroke-border) solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 10px 14px;
  width: 100%;
  appearance: auto;
}

.contact-form__select:focus,
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background-color: var(--color-heading);
  color: var(--color-on-dark);
  font-family: var(--font-family-body);
  font-size: var(--size-button-d);
  font-weight: var(--weight-regular);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  align-self: flex-start;
}

.contact-form__submit:hover {
  background-color: var(--color-body);
}

.contact-form__submit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.contact-form__hint {
  font-family: var(--font-family-body);
  font-size: var(--size-quellen);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
  line-height: var(--lh-body);
  max-width: 520px;
}

/* ── RESPONSIVE — statische Seiten ──────────────────────────── */

@media (max-width: 640px) {

  .portrait-block {
    padding: 0 24px 48px;
  }

  .portrait-block__img {
    max-width: 100%;
  }

  .hero-img__img {
    max-height: 240px;
  }

  .vortraege-thema__h3,
  .vortraege-thema__sub {
    max-width: none;
  }

  .vortraege-thema__h3 {
    font-size: var(--size-pull-m);
  }

  .ref-table {
    display: block;
    overflow-x: auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    max-width: 100%;
  }

  .contact-form__select,
  .contact-form__input,
  .contact-form__textarea {
    font-size: var(--size-body-m);
  }

  .contact-form__hint {
    max-width: none;
  }
}

/* ── INSIGHTS-HUB ─────────────────────────────────────────────
   Klassen für /insights/ (CollectionPage / Hub).
   Erweiterung gemäß cli-prompt-batch §1.7.
   ─────────────────────────────────────────────────────────── */

.insights-liste {
  display: flex;
  flex-direction: column;
  max-width: var(--width-content);
}

.insight-teaser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: var(--stroke-border) solid var(--color-border);
}

.insight-teaser__eyebrow {
  font-family: var(--font-family-body);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  color: var(--color-meta);
  letter-spacing: var(--ls-eyebrow-d);
}

/* Insights-Titel wie auf der LP (.lp-ins-row__title): Display/Serif, regular */
.insight-teaser__h3 {
  font-family: var(--font-family-display);
  font-size: var(--size-pull-d);
  font-weight: var(--weight-regular);
  color: var(--color-heading);
  line-height: var(--lh-pull);
}

.insight-teaser__desc {
  font-family: var(--font-family-body);
  font-size: var(--size-body-d);
  font-weight: var(--weight-regular);
  color: var(--color-body);
  line-height: var(--lh-body);
}

.insight-teaser__link {
  font-family: var(--font-family-body);
  font-size: var(--size-internelinks-d);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.insight-teaser__link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .insight-teaser__eyebrow {
    letter-spacing: var(--ls-eyebrow-m);
  }

  .insight-teaser__h3 {
    font-size: var(--size-pull-m);
  }

  .insight-teaser__desc {
    font-size: var(--size-body-m);
  }

  .insight-teaser__link {
    font-size: var(--size-internelinks-m);
  }
}

/* ── START-LP ─────────────────────────────────────────────────
   Klassen für / (Start, Landingpage).
   Erweiterung gemäß cli-prompt-batch §1.7.
   Status-Farben (--status-*): CLAUDE.md §7 — nur Cockpit-Kachel.
   ─────────────────────────────────────────────────────────── */

/* Status-Tokens (Cockpit-Kachel only) */
:root {
  --status-ok:   #16a34a;
  --status-warn: #d97706;
  --status-stop: #dc2626;
}

/* Hero LP — zwei Spalten (Text links, Foto rechts) */
.hero-lp {
  display: flex;
  align-items: center;
  gap: 40px;
  /* rechts kein Padding: Hero-Foto zieht bis zur rechten Kante (bündig mit dem vollflächigen schwarzen Band darunter); links bleibt 70px */
  padding: 78px 0 78px 70px;
  background-color: var(--color-surface-page);
}

.hero-lp__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 620px;
  flex-shrink: 0;
}

.hero-lp__h1 {
  font-family: var(--font-family-display);
  font-size: var(--size-hero-lp-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-hero-lp);
  color: var(--color-heading);
}

.hero-lp__lead {
  font-family: var(--font-family-body);
  font-size: var(--size-lead-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-lead);
  color: var(--color-body);
}

.hero-lp__dek {
  font-family: var(--font-family-body);
  font-size: var(--size-lp-dek-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-meta);
}

.hero-lp__cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero-lp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 44px;
  background-color: var(--color-heading);
  color: var(--color-on-dark);
  font-family: var(--font-family-body);
  font-size: var(--size-nav-link);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-button);
  flex-shrink: 0;
}

.hero-lp__cta-link {
  font-family: var(--font-family-body);
  font-size: var(--size-nav-link);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.hero-lp__cta-link:hover {
  text-decoration: underline;
}

.hero-lp__photo {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 460px;
  overflow: hidden;
}

.hero-lp__photo-stroke {
  flex-shrink: 0;
  width: var(--stroke-bar);
  height: 100%;
  background-color: var(--color-accent);
}

.hero-lp__photo-img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Model-Band (dunkler Hintergrund #1c1c1c) */
.model-band {
  background-color: var(--color-surface-band);
  padding: 78px 70px;
  display: flex;
  flex-direction: column;
}

.model-band__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 48px;
}

.model-band__titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.model-band__h2 {
  font-family: var(--font-family-display);
  font-size: var(--size-band-h2-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h2);
  color: var(--color-on-dark);
}

.model-band__sub {
  font-family: var(--font-family-body);
  font-size: var(--size-band-sub-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-subtle);
}

/* Cockpit-Kachel */
.cockpit-kachel {
  flex-shrink: 0;
  width: 220px;
  background-color: var(--color-surface-kachel);
  border-radius: var(--radius-kachel);
  border: var(--stroke-border) solid var(--color-border-kachel);
  /* padding-top 17px: Punkte-Unterkante sitzt auf der Grundlinie von "Drei Fragen" (1px Border + 17 + 26px Punkt = 44px = Baseline-Offset des H2) */
  padding: 17px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpit-kachel__ampel {
  display: flex;
  gap: 14px;
}

.cockpit-kachel__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cockpit-kachel__dot--ok   { background-color: var(--status-ok); }
.cockpit-kachel__dot--warn { background-color: var(--status-warn); }
.cockpit-kachel__dot--stop { background-color: var(--status-stop); }

.cockpit-kachel__label {
  font-family: var(--font-family-body);
  font-size: var(--size-kachel);
  font-weight: var(--weight-regular);
  line-height: var(--lh-kachel);
  color: var(--color-kachel);
}

.cockpit-kachel__line {
  font-family: var(--font-family-body);
  font-size: var(--size-kachel);
  font-weight: var(--weight-regular);
  line-height: var(--lh-kachel);
  color: var(--color-subtle);
}

/* Die beiden Info-Zeilen enger beieinander als der Abstand zum Label darüber (Kachel-Gap 12px → hier 6px) */
.cockpit-kachel__line + .cockpit-kachel__line {
  margin-top: -6px;
}

/* Modell-Fragen */
.model-q {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 42px 0 30px;
  border-top: var(--stroke-border) solid var(--color-border-kachel);
}

.model-q__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 150px;
  flex-shrink: 0;
}

.model-q__ziffer {
  font-family: var(--font-family-display);
  font-size: var(--size-ziffer-d);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-on-dark);
}

.model-q__marker {
  display: block;
  width: var(--stroke-marker-w);
  height: var(--stroke-bar);
  background-color: var(--color-accent);
}

.model-q__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.model-q__kicker {
  font-family: var(--font-family-body);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-regular);
  color: var(--color-subtle);
  letter-spacing: var(--ls-eyebrow-d);
}

.model-q__frage {
  font-family: var(--font-family-body);
  font-size: var(--size-fragen-d);
  font-weight: var(--weight-medium);
  line-height: var(--lh-lead);
  color: var(--color-on-dark);
}

/* LP-Insights-Sektion (zwei Spalten: Kategorie + Titel/Teaser) */
.lp-insights {
  padding: 80px 70px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-ins-row {
  display: flex;
  gap: 32px;
  padding: 32px 0;
  border-top: var(--stroke-border) solid var(--color-border);
  color: inherit;
}

.lp-ins-row:hover .lp-ins-row__title {
  text-decoration: underline;
}

.lp-ins-row__kat {
  font-family: var(--font-family-body);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-regular);
  color: var(--color-meta);
  letter-spacing: var(--ls-eyebrow-d);
  width: 150px;
  flex-shrink: 0;
  padding-top: 4px;
}

.lp-ins-row__cont {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.lp-ins-row__title {
  font-family: var(--font-family-display);
  font-size: var(--size-pull-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-pull);
  color: var(--color-heading);
}

.lp-ins-row__teaser {
  font-family: var(--font-family-body);
  font-size: var(--size-m5-text-d);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
}

/* Responsive: Start-LP */
@media (max-width: 640px) {

  .hero-lp {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .hero-lp__text {
    width: auto;
    padding: 48px 24px 40px;
    gap: 20px;
  }

  .hero-lp__h1 {
    font-size: var(--size-hero-lp-m);
  }

  .hero-lp__lead {
    font-size: var(--size-lead-m);
  }

  .hero-lp__dek {
    font-size: var(--size-lp-dek-m);
  }

  .hero-lp__cta-row {
    gap: 16px;
  }

  .hero-lp__photo {
    height: 280px;
    width: 100%;
  }

  .model-band {
    padding: 60px 24px;
  }

  .model-band__head {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 0;
  }

  .model-band__h2 {
    font-size: var(--size-band-h2-m);
  }

  .model-band__sub {
    font-size: var(--size-band-sub-m);
  }

  .cockpit-kachel {
    width: 100%;
    padding: 20px;
    gap: 12px;
  }

  .model-q {
    gap: 16px;
  }

  .model-q__num {
    width: 48px;
  }

  .model-q__ziffer {
    font-size: var(--size-ziffer-m);
  }

  .model-q__kicker {
    letter-spacing: var(--ls-eyebrow-m);
  }

  .model-q__frage {
    font-size: var(--size-fragen-m);
  }

  .lp-insights {
    padding: 60px 24px 0;
  }

  .lp-ins-row {
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
  }

  .lp-ins-row__kat {
    width: auto;
    padding-top: 0;
    letter-spacing: var(--ls-eyebrow-m);
  }

  .lp-ins-row__title {
    font-size: var(--size-pull-m);
  }

  .lp-ins-row__teaser {
    font-size: var(--size-m5-text-m);
  }
}

/* ── MODELL ──────────────────────────────────────────────────────
   Klassen für /modell/ (Das Modell).
   Sonderwerte: lh 1.4 (hero lead) und lh 1.5 (model-q__sub)
   sind hardcodiert — kein passender Token im Variablensystem.
   ─────────────────────────────────────────────────────────────── */

/* Hero Lead (Modell): 21 px Desktop / 19 px Mobile, lh 1.4.
   .hero__dek hat lh-lead (1.3) und mobile 18 px — beides passt nicht. */
.hero__lead {
  font-family: var(--font-family-body);
  font-size: var(--size-lead-d);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--color-body);
  max-width: 620px;
}

/* Jump-Link im Hero */
.hero__jump {
  font-family: var(--font-family-body);
  font-size: var(--size-band-fliesstext);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}
.hero__jump:hover { text-decoration: underline; }

/* M1: eingerückter Szenen-Block mit linkem Rand (2 px, color-border) */
.modell-szenen {
  border-left: var(--stroke-eyebrow-bar) solid var(--color-border);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* etwas mehr Abstand nach den beiden Szenen zum Folgeabsatz (24px Sektions-Gap + 16px = 40px) */
  margin-bottom: 64px;
}

/* Body-Text + Pull-Statement im engen Abstand (gap 8 px) */
.modell-hl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pull-Block mitten in der Sektion (nicht am Ende): gleicher Abstand darunter wie beim Pull am Sektionsende — 24px Flex-Gap + 36px = 60px */
.modell-hl-group:not(:last-child) {
  margin-bottom: 36px;
}

/* Erklärungstext unter jeder Frage im dunklen Band (Modell; nicht LP) */
.model-q__sub {
  font-family: var(--font-family-body);
  font-size: var(--size-band-fliesstext);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--color-subtle);
}

/* Übergangstexte um das dunkle Band (M2a / M2c) */
.modell-text-wrap {
  padding: 60px 70px 40px;
}

/* M3/M4-Trennlinie */
.modell-section-sep {
  padding: 40px 70px;
}

.modell-section-sep__line {
  border: none;
  border-top: var(--stroke-border) solid var(--color-border);
}

@media (max-width: 640px) {
  .hero__lead {
    font-size: var(--size-lead-m);
    max-width: none;
  }

  .hero__jump {
    font-size: var(--size-nav-link);
  }

  .modell-szenen {
    gap: 20px;
  }

  /* Mobiles Padding der Frage-Zeilen (LP + Modell);
     Pencil-Wert [28,0,20,0] — fehlte im START-LP-Block. */
  .model-q {
    padding: 28px 0 20px;
  }

  .modell-text-wrap {
    padding: 48px 24px 32px;
  }

  .modell-section-sep {
    padding: 32px 24px;
  }

  .modell-hl-group:not(:last-child) {
    margin-bottom: 24px;
  }
}

/* ── CONSENT MODAL ─────────────────────────────────────────── */

.consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.consent-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
}

.consent-modal__card {
  position: relative;
  max-width: 520px;
  width: 100%;
  padding: 32px;
  background: var(--color-surface-page);
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.consent-modal__text {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-body);
  margin-bottom: 24px;
}

.consent-modal__text strong {
  font-weight: var(--weight-semibold);
}

.consent-modal__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.consent-modal__btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-align: center;
}

.consent-modal__btn--primary {
  background: var(--color-accent);
  color: var(--color-on-dark);
}

.consent-modal__btn--secondary {
  background: #6c757d;
  color: var(--color-on-dark);
}

.consent-modal__divider {
  border: none;
  border-top: var(--stroke-border) solid var(--color-border);
  margin-bottom: 16px;
}

.consent-modal__link {
  font-family: var(--font-family-body);
  font-size: 15px;
  color: var(--color-meta);
  text-decoration: none;
}

.consent-modal__link:hover {
  text-decoration: underline;
}

body.consent-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .consent-modal__card {
    padding: 24px;
  }

  .consent-modal__actions {
    flex-direction: column;
  }
}