@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Trirong";
  src: url("../fonts/trirong-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Trirong";
  src: url("../fonts/trirong-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Trirong";
  src: url("../fonts/trirong-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Globales Schriftensystem der Originalseite */
  --font-body: "Mulish", Arial, sans-serif;
  --font-display: "Trirong", Georgia, serif;

  /* Body / Nav / Body-large (§6 Skala) */
  --type-body-size: 1.125rem;          /* 18 – Fließtext (Lesekomfort) */
  --type-body-line: 1.6;
  --type-body-tracking: 0;             /* Fließtext: normal; Caps → --type-label-tracking */
  --type-body-large-size: 1.5rem;      /* 24 – Kontaktliste, Footer-Details, Service-H3 */
  --type-body-large-line: 1.5;
  --type-nav-size: 1.125rem;           /* 18 – wie Body; 16 war zu klein */
  --type-nav-line: 1.25;
  --type-nav-tracking: 0.1875rem;      /* Display-Nav / Footer-Nav */
  --type-label-tracking: 0.08rem;      /* Uppercase-Labels: Abschnittstitel */

  /*
   * Eyebrow-Format (§6): eigene Tokens — Werte unabhängig von Nav änderbar.
   * Default: 16 / medium / enges Tracking / uppercase.
   */
  --type-eyebrow-size: 1rem;            /* 16 – Floor; zuvor 14 zu klein */
  --type-eyebrow-line: 1.25;
  --type-eyebrow-tracking: 0.08rem;      /* enger als Nav; = label-tracking */

  /*
   * Überschriften-Skala (§6 – bevorzugte Stufen 16…64).
   * Jede Stufe = klarer Job (Punkt 2 + 9). Keine zwei primären Display-Rollen
   * auf gleicher Größe.
   *
   * hero-title     48  Markenzeile nur Hero-Tafel („Wege zur …“)
   * page-title     40  Seiten-H1 (Paper, Impressum, Datenschutz, 404)
   * name           32  Personenname Intro + Über mich
   * section        28  Abschnitts-H2 (.section-title)
   * hero-name      28  .hero-copy__name
   * qualification  24  Qualis, Kontakt-Identität, Reasons-Lede
   * legal          24  Legal-H2/H3, Reasons-Frage
   * card           24  = body-large; generisches h3-Default
   * body-large     24  Kontaktliste, Footer-Details, Service-H3
   * body / nav       18  Fließtext, Header-Nav
   * eyebrow          16  Label über Titeln (.eyebrow)
   */
  --type-page-title-size: 2.5rem;      /* 40 – bleibt */
  --type-page-title-line: 1.1;
  --type-name-size: 2rem;              /* 32 */
  --type-name-line: 1.15;
  --type-section-size: 1.75rem;        /* 28 */
  --type-section-line: 1.15;
  --type-qualification-size: 1.5rem;   /* 24 */
  --type-qualification-line: 1.15;
  --type-card-title-size: 1.5rem;      /* 24 – = body-large */
  --type-card-title-line: 1.5;
  --type-legal-heading-size: 1.5rem;   /* 24 */
  --type-legal-heading-line: 1.25;
  --type-legal-heading-line-loose: 1.35;
  --type-hero-title-size: 3rem;        /* 48 – Markenzeile Hero */
  --type-hero-title-line: 1.1;
  --type-hero-name-size: 1.75rem;      /* 28 */
  --type-hero-name-line: 1.15;
  --type-hero-role-size: 1.5rem;       /* 24 – Legacy / Quali-Band */
  --type-hero-role-line: 1.25;

  /*
   * Responsive: nur Skalenwerte.
   * Desktop  > 900px  → Basiswerte oben
   * Tablet   ≤ 900px  → *-md
   * Phone    ≤ 560px  → *-sm
   */
  --type-page-title-size-md: 2rem;     /* 32 */
  --type-name-size-md: 1.75rem;        /* 28 */
  --type-section-size-md: 1.5rem;      /* 24 */
  --type-qualification-size-md: 1.25rem; /* 20 */
  --type-card-title-size-md: 1.25rem;  /* 20 */
  --type-legal-heading-size-md: 1.25rem; /* 20 */
  --type-hero-title-size-md: 2.25rem;  /* 36 – Tablet; genug für 6+6-Panel */
  --type-hero-name-size-md: 1.5rem;    /* 24 */
  --type-hero-role-size-md: 1.25rem;   /* 20 */
  --type-eyebrow-size-md: 1rem;         /* 16 */

  --type-page-title-size-sm: 1.75rem;  /* 28 */
  --type-name-size-sm: 1.5rem;         /* 24 */
  --type-section-size-sm: 1.5rem;      /* 24 – über Body 18 */
  --type-qualification-size-sm: 1.25rem; /* 20 */
  --type-card-title-size-sm: 1.25rem;  /* 20 */
  --type-legal-heading-size-sm: 1.25rem; /* 20 */
  --type-hero-title-size-sm: 2rem;     /* 32 */
  --type-hero-name-size-sm: 1.5rem;    /* 24 */
  --type-hero-role-size-sm: 1.25rem;   /* 20 */
  --type-eyebrow-size-sm: 1rem;         /* 16 */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --type-eyebrow-weight: var(--weight-medium);

  /*
   * Semantische Farb-Tokens (Design Instructions §3 / §20).
   * Hex/RGBA liegen nur hier — Komponenten nutzen ausschließlich var(--color-*).
   */
  --color-bg: #caffbf;
  --color-bg-subpage: #a0c4ff;
  --color-surface: #fbfaf5;
  --color-surface-warm: #f0ede5; /* helleres Beige (Intro, Kontakt, Ränder, Backdrop) */
  --color-surface-glass: rgba(255, 255, 255, 0.88); /* Nav-Toggle u. ä. */
  --color-text: #4a4646; /* Body: ≥4.5:1 auf Mint/Blau/Paper (WCAG AA) */
  --color-text-strong: #2f2c2c; /* stärker als Body, z. B. Nav mobil */
  --color-text-muted: #6b6767; /* Hinweise; dunkler als früher für Lesbarkeit */
  --color-white: #fff;
  --color-text-inverse: var(--color-white);

  --color-primary: #a0c4ff;
  --color-primary-hover: #6e99dc;
  --color-secondary: #caffbf; /* Marken-Grün als zweite Markenfarbe */
  --color-accent: #bdb2ff; /* Lavendel als Akzent */

  --color-accent-green: var(--color-secondary);
  --color-accent-lavender: var(--color-accent);
  --color-accent-aqua: #b8e2df;

  /* Status (Formular u. a.) — pastellig, markennah */
  --color-success: #4b6247;
  --color-warning: #b8956a;
  --color-danger: #b86b6b;

  --color-border: rgba(255, 255, 255, 0.9);
  --color-border-subtle: rgba(113, 109, 109, 0.35);
  --color-border-muted: rgba(113, 109, 109, 0.25);
  --color-overlay: rgba(72, 69, 69, 0.72);
  --color-overlay-dark: rgba(44, 66, 53, 0.62); /* Hero-Logo / Home-Burger */
  --color-scrim: rgba(0, 0, 0, 0.05); /* dezenter UI-Hintergrund */
  --color-focus: #254b80;
  --color-ornament: #7ca8ec; /* reserviert; Quali nutzt SVG-Checks */
  --color-hero-deep: var(--color-success); /* Hero-Fallback unter dem Bild */
  --color-shadow: rgba(53, 64, 52, 0.08);

  /*
   * Spacing-Skala (Design Instructions §4) – Basis 4px, in rem.
   * Nummer = Stufe in der Skala (nicht „beliebiger Multiplikator“).
   */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-18: 4.5rem;  /* 72px */
  --space-22: 5.5rem;  /* 88px – große Desktop-Abstände */
  --space-24: 6rem;    /* 96px */
  --space-26: 6.5rem;  /* 104px */
  --space-28: 7rem;    /* 112px */
  --space-32: 8rem;    /* 128px */
  --space-36: 9rem;    /* 144px */
  --space-40: 10rem;   /* 160px (~150–160px Sektions-/Block-Gaps) */

  /*
   * Layout-Shell (§5 / Abschnitt 20):
   * eine Content-Bühne + seitlicher Gutter. Sektions-Grids folgen später.
   * --page-gutter nach Space-Skala, damit die Referenz greift.
   */
  --page-gutter: var(--space-8); /* Desktop 32px */
  --content: 1180px;
  --page-shell: min(calc(100% - (2 * var(--page-gutter))), var(--content));
  --page-width: var(--page-shell); /* Alias – Content-Bühne */
  --page-bleed: 90%; /* Hero / Markenflächen: breiter als die Content-Shell */
  --reading: 75ch; /* Lesbreite Fließtext (§5) */
  --layout-gap: var(--space-16); /* Desktop 64px; Tablet/Phone siehe Media Queries */

  /*
   * Abschnitts-Padding (Standard, freigegeben):
   * feste Skalenstufe — kein ×1,75-calc. Tablet/Phone siehe Media Queries.
   */
  --space-section-y: var(--space-36); /* Desktop 144px */
  --space-title-gap: clamp(var(--space-8), 5vw, var(--space-16)); /* 32 → 64 */
  --space-block: var(--space-16);   /* 64px */
  --space-block-lg: var(--space-24); /* 96px */
  --touch-min: 2.75rem; /* ~44px – Touch-Ziel, bewusst außerhalb der Display-Skala */
  --border-width: 3px; /* Markenlinie (Hero, Paper, Footer, Karten) */

  /* Radien (§11): Markenbogen bewusst entfernt — Flächen eckig. */
  --radius-arch: 0;
  --radius-arch-mobile: 0;
  --radius-xs: 3px; /* Nav-Toggle Subpages */
  --radius-full: 9999px; /* Pills / Dots */

  /* Icons (§14): Größen; Kontakt-Spalte (§10) */
  --icon-size: 1.09375rem; /* Listen-Checks; Kontakt-SVG = 1em der Icon-Schrift */
  --contact-icon-col: 2rem;

  /* Panels (§9/§10): gemeinsame Schale; Radien eckig (kein Markenbogen). */
  --panel-padding: var(--space-8);
  --panel-radius-start: 0;
  --panel-radius-end: 0;

  --shadow: 0 18px 45px var(--color-shadow);

  /*
   * Medien-Hintergrundfläche (Probe): farbige Ebene hinter Medium,
   * versetzt nach oben/links; Offset % skaliert mit Medium-Breite.
   * Oben nur ¾ der Bildbreite (rechtes Viertel frei). Regeln → DESIGN nach Freigabe.
   */
  --media-backdrop-offset: 5%; /* ≈ space-6 bei ~480px Spaltenbreite; wächst mit Bild */
  --media-backdrop-color: var(--color-primary); /* Hellblau hinter Medium */
  --media-backdrop-top-span: 0.75; /* Anteil der Bildbreite für den oberen Balken */

  /*
   * Panel-Überlappung Hero (§5): zweite Grid-Ebene über Bild.
   * Spalten hart in CSS (2/6, 2/7, 2/8) — siehe .hero-panel Media Queries.
   */
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body.page-blue {
  background: var(--color-bg-subpage);
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--type-body-tracking);
}

h1 {
  font-size: var(--type-page-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-page-title-line);
}

h2 {
  font-size: var(--type-section-size);
  line-height: var(--type-section-line);
}

h3 {
  font-size: var(--type-card-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-card-title-line);
}

h4 {
  font-size: var(--type-body-size);
}

p {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  padding-left: var(--space-6);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: 1rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-strong);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.container {
  width: var(--page-width);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section-y);
}

.section-rule {
  width: var(--page-width);
  height: 0;
  margin: 0 auto;
  border: 0;
  background: none;
}

.section-title {
  margin-bottom: var(--space-title-gap);
  font-size: var(--type-section-size);
  font-weight: var(--weight-light);
  line-height: var(--type-section-line);
  letter-spacing: var(--type-label-tracking);
  text-align: center;
  text-transform: uppercase;
}

.eyebrow,
.hero-copy__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.hero-copy__eyebrow {
  margin: 0 0 var(--space-3);
}

.site-header {
  position: relative;
  z-index: 30;
  padding-block: var(--space-8) var(--space-4);
}

/* Start: Header wie R-Hero 4+8 — Nav nur in Spalten 5–12; Logo im Hero über Eyebrow. */
.home {
  --home-nav-band: calc(var(--space-8) + var(--space-4) + var(--space-3) + var(--space-3) + 1.25rem);
}

.home .site-header {
  position: relative;
  z-index: 40;
  inset: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.header-logo {
  width: 220px;
  flex: 0 0 auto;
}

.home .header-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Desktop Start: Logo sitzt im Hero; Header-Logo ausblenden. */
.home .header-inner > a[href="/"] {
  display: none;
}

.home .site-nav {
  grid-column: 1 / -1; /* volle Breite */
  justify-self: stretch;
  padding: var(--space-8) var(--space-8) var(--space-4);
  background: var(--color-primary);
}

.nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--type-nav-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-nav-line);
  letter-spacing: var(--type-nav-tracking);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.home .nav-list {
  gap: 0;
  padding: 0;
  background: transparent;
}

.home .nav-list a {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid currentColor;
  background: var(--color-surface-glass);
  color: var(--color-text-strong);
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-scrim);
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] span {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"]::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"]::after {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding-block: 0;
  overflow: visible;
  background: transparent;
}

/*
 * Hero · R-Hero Viewport 4 + 8 (§5):
 * Bild Spalten 5–12; Mint-Hintergrund 1–4.
 * Panel absolut am .hero-grid (wie Test-Box) — 12er-Math, z-index über Bild.
 * Default ≈ Spalten 2–5 (left 1/12, width 4/12) → Spalte 5 überlappt das Bild.
 */
.hero-grid {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - var(--home-nav-band, 0px));
  height: calc(100dvh - var(--home-nav-band, 0px));
  min-height: calc(100vh - var(--home-nav-band, 0px));
  min-height: calc(100dvh - var(--home-nav-band, 0px));
  background: var(--color-accent-green);
}

/* Bild nur Spalten 5–12 */
.hero-media {
  grid-column: 5 / -1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  background: var(--color-bg); /* Mint wie Seite/Nav; kein Dark-Fallback */
}

.hero-media picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  /* Zoom + leicht nach unten: Eindruck „nach oben gehen“, ohne aus dem Frame zu fallen */
  animation: hero-ascend 16s ease forwards;
  will-change: transform;
}

@keyframes hero-ascend {
  from {
    transform: scale(1) translateY(0);
  }

  to {
    /* scale 1.2 gibt ~10% Überstand; 4% Downshift bleibt im Cover */
    transform: scale(1.2) translateY(4%);
  }
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Mint-Panel: absolute am Hero-Grid (Bezug = volle Breite, nicht Bild-Zelle).
 * left/width in 12er-Anteilen; z-index über .hero-media.
 */
.hero-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% / 12); /* Start Spalte 2 */
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-12);
  width: calc(100% * 4 / 12); /* Spalten 2–5 */
  max-width: none;
  margin: 0;
  padding: var(--space-8);
  overflow: hidden;
  background: var(--color-accent-green);
  color: var(--color-text);
}

.hero-logo-link {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  align-self: flex-start;
}

.hero-logo {
  display: block;
  width: 220px;
  height: auto;
  object-fit: contain;
}

/*
 * Hero-Textbox — Logo + Copy.
 * Höhe = volle Grid-/Bildhöhe; Inhalt unten (flex-end); Unterkante bündig.
 * Links: bündig am Grid-Rand; überlappt Bild ab Spalte 5.
 *
 * Breite — zwei Untergrenzen, CSS nimmt automatisch die größere:
 *   A) width  = 4 Spalten (Inhalt; Padding liegt bei content-box extra)
 *   B) min-width = max-content (Titel zweizeilig; Rest bricht um)
 */
.hero-overlay-test {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-12);
  /* A: Soll-Breite ≈ 4 Spalten außen */
  width: calc(100% * 4 / 12 - 2 * var(--space-8));
  /* B: nie schmaler als Titel; greift wenn Titel > A */
  min-width: max-content;
  height: auto; /* durch top+bottom = 100% Grid-/Bildhöhe */
  padding: var(--space-8);
  overflow: visible;
  background: var(--color-accent-green);
  color: var(--color-text);
  border: none;
  pointer-events: auto;
}

.hero-overlay-test .hero-logo-link {
  flex: 0 0 auto;
}

.hero-overlay-test .hero-logo {
  width: 220px;
  height: auto;
}

.hero-overlay-test .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  /*
   * Preferiert Titelbreite (für Overlay-min-width), füllt aber die Box,
   * wenn 4 Spalten breiter sind — Qualis/Eyebrow nutzen dann den Platz.
   */
  width: max-content;
  min-width: 100%;
  max-width: none;
}

/* Schritt 1: Titel setzt die intrinsische Breite der Box */
.hero-overlay-test .hero-copy h1 {
  width: max-content;
  max-width: none;
}

/*
 * Eyebrow, Name, Qualis: weiten die Box nicht auf (bleiben hinter dem Titel),
 * füllen aber die Copy-Breite (= Box abzgl. Padding) und dürfen dort umbrechen.
 */
.hero-overlay-test .hero-copy__eyebrow,
.hero-overlay-test .hero-identity {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
}

.hero-overlay-test .qualification {
  overflow-wrap: break-word;
}

.hero-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  text-align: left;
}

.hero-copy h1 {
  margin: 0 0 var(--space-8);
  font-size: var(--type-hero-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-hero-title-line);
  letter-spacing: var(--type-body-tracking);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Markenwörter / Eigennamen: kein Mittenumbruch */
.text-nowrap {
  white-space: nowrap;
}

/*
 * Personen-Einheit: H1 ↔ Name space-8; Name ↔ Qualis space-8.
 */
.hero-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
}

.hero-copy__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-hero-name-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-hero-name-line);
  letter-spacing: var(--type-body-tracking);
  text-transform: none;
}

.hero-credentials {
  margin: 0;
}

.hero-credentials .qualification {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.hero-credentials .qualification + .qualification {
  margin-top: var(--space-2);
}

.hero-credentials .qualification--license {
  line-height: var(--type-body-line);
}

.hero-credentials .qualification__note {
  color: var(--color-text-muted);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
}

/*
 * Zitat · R1 (§5): einspaltig nach Hero.
 * Vertikal: Standard --space-section-y via .section (kein Sonderfall).
 */

/*
 * Intro · R2 als 6 + 6 (§5): Name + Fließtext | Porträt (50/50).
 * Spalten-Gap: --layout-gap; Vertikal: Standard --space-section-y via .section.
 * Porträt: gleicher Asset-Typ wie Über mich (§13 Portrait).
 */
.intro-section {
  background: var(--color-surface-warm);
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--space-8);
  align-items: start;
}

.intro-prose {
  grid-column: span 6;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
}

.intro-grid .portrait-arch {
  grid-column: span 6;
  /* Oberer Balken bis zum grauen Wandblock im Foto (nicht an der Bluse enden) */
  --media-backdrop-top-span: 0.88;
}

/*
 * Medien-Hintergrundfläche (Probe am Intro-Porträt):
 * Offset oben/links; Breite oben nur ¾ → rechtes Viertel ohne Balken.
 */
.media-backdrop {
  position: relative;
  overflow: visible;
  background: transparent;
  padding-top: var(--media-backdrop-offset);
  padding-left: var(--media-backdrop-offset);
}

.media-backdrop::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  /*
   * Links volle Offset-Leiste + ¾ der Bildbreite:
   * oberer Balken endet vor dem letzten Viertel.
   */
  width: calc(
    var(--media-backdrop-offset)
    + (100% - var(--media-backdrop-offset)) * var(--media-backdrop-top-span)
  );
  height: calc(100% - var(--media-backdrop-offset));
  background: var(--media-backdrop-color);
  border-radius: 0;
  pointer-events: none;
}

.media-backdrop > * {
  position: relative;
  z-index: 1;
}

.credentials__name {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--type-name-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-name-line);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.intro-copy {
  margin-top: 0;
  max-width: none;
  text-align: left;
}

.intro-copy p {
  margin-bottom: var(--space-3);
}

.text-toggle {
  border: 0;
  padding: 0;
  color: var(--color-primary-hover); /* Markenblau, nicht Focus-Navy */
  background: transparent;
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
  text-decoration: none;
  cursor: pointer;
}

.text-toggle::after {
  content: "»";
  margin-left: 0.35em;
  font-weight: 700;
}

.text-toggle:hover,
.text-toggle:focus-visible {
  color: var(--color-text-strong);
}

.more-content {
  margin-top: var(--space-6);
}

.quote-arch {
  display: grid;
  width: 100%;
  max-width: var(--reading);
  margin-inline: auto;
  min-height: 0;
  min-width: 0;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: 0;
  color: var(--color-text);
  text-align: center;
}

.quote-mark {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: var(--weight-regular);
  /*
   * Em-Box eng am sichtbaren Glyph: sonst wirkt der Sektionsabstand
   * unten optisch knapper als oben (Transform ändert die Layout-Box nicht).
   */
  line-height: 1;
  height: 0.55em;
  letter-spacing: 0;
  overflow: visible;
  transform: rotate(180deg);
  transform-origin: center center;
}

.quote-arch blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-section-size); /* 24 – präsenter als qualification */
  font-weight: var(--weight-regular);
  line-height: var(--type-legal-heading-line-loose); /* ~1.35 Lesbarkeit */
  letter-spacing: var(--type-body-tracking);
  text-transform: none;
}

.quote-arch cite {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: var(--space-6) auto 0;
  font-family: var(--font-display);
  font-size: var(--type-body-size); /* 16 – eine Stufe unter dem Zitat */
  font-style: normal;
  font-weight: var(--weight-medium);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  white-space: nowrap;
}

/* Abstand Intro → Folgesektion nur über Abschnitts-Padding (kein Trenner-Gap). */
.intro-rule {
  margin: 0;
}

/*
 * Themen · R2 als 6 + 6 (§5): vier getrennte Karten (2×2).
 * Transparent auf Mint-Seite; 2px Hellblau-Umrandung (--color-primary).
 * Stichworte = Kundentexte 1:1; Cluster-Titel = Struktur-Labels.
 */
.topics-directory {
  display: block;
  padding: 0;
  background: transparent;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
}

.topic-cluster {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 14rem;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text);
  background: transparent;
  border: 2px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.topic-cluster__index {
  margin: 0;
  color: var(--color-primary-hover);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--type-label-tracking);
}

.topic-cluster__title {
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
  text-transform: none;
}

.topic-cluster ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-cluster li {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
}

.topic-cluster li + li {
  margin-top: var(--space-2);
}

.collaboration-rule {
  margin: 0;
}

#zusammenarbeit {
  background: var(--color-primary);
}

/*
 * Zusammenarbeit · R3 als 4 + 4 + 4 (§5):
 * Drei Service-Karten auf Hellblau — Struktur angelehnt an Referenz-Cards,
 * Farben/Tokens markeneigen (kein Terracotta, kein Pfeil-Sticker).
 * Bild mit .media-backdrop (Beige auf Blau); Karte transparent + Beige-Rand.
 */
.collaboration-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
  padding: 0;
  background: transparent;
}

.service-card {
  grid-column: span 4;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: transparent;
  border: 2px solid var(--color-surface-warm);
  border-radius: 0;
}

/* Auf Blau-Sektion: Beige-Fläche hinter dem Bild (wie Intro, Farben getauscht) */
.service-card__media {
  --media-backdrop-color: var(--color-surface-warm);
  flex: 0 0 auto;
}

.service-card__media picture {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.service-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.service-card h3 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  text-transform: none;
}

.service-accordion-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: default;
  pointer-events: none;
}

.service-accordion-trigger::after {
  content: none;
}

.service-body {
  min-width: 0;
}

.service-body > * {
  margin-top: 0;
}

.service-body > * + * {
  margin-top: var(--space-6);
}

.service-body p {
  margin-bottom: var(--space-3);
  text-align: left;
}

.check-list,
.contact-list {
  padding: 0;
  list-style: none;
}

.check-list {
  margin: 0;
}

.check-list li {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  column-gap: var(--space-1);
  align-items: start;
  min-width: 0;
  padding: 0;
}

/* Einheitlicher Listenpunkt (statt Check/Flag-SVG) */
.check-list li::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-top: 0.55em;
  justify-self: center;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Zusammenarbeit: Punkte auf Hellblau → Beige (sichtbar, markennah) */
#zusammenarbeit .check-list li::before {
  background: var(--color-surface-warm);
}

.ui-icon {
  display: grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: var(--space-1);
  color: inherit;
  line-height: 1;
}

.ui-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.service-note {
  margin-bottom: var(--space-3);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  text-align: left;
}

.collaboration-footnote {
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  max-width: var(--reading);
}

.contact-rule {
  width: 100%;
  margin: 0;
  background: none;
}

/*
 * Kontakt · R2 als 6 + 6 (§5):
 * Info-Box (Kontaktdaten) + Formular, 50/50.
 * Außen: --layout-gap; innen in der Info-Box: --space-6.
 * Hintergrund: Beige (--color-surface-warm), analog Intro.
 */
#kontakt {
  background: var(--color-surface-warm);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
  align-items: stretch;
}

.contact-info {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-primary);
}

.contact-form {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  height: auto;
  border: 0;
  padding: 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.contact-identity {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--type-body-tracking);
}

.contact-identity p {
  margin: 0;
}

.contact-identity p:first-child {
  margin-bottom: var(--space-2);
  font-size: var(--type-qualification-size);
  line-height: var(--type-qualification-line);
}

.contact-identity p:last-child {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.contact-list {
  min-width: 0;
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.contact-list li {
  display: grid;
  grid-template-columns: var(--contact-icon-col) minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: center;
  min-width: 0;
  margin: 0;
}

.contact-list li:first-child {
  padding-bottom: var(--space-1);
}

.contact-list li:nth-child(2) {
  margin-top: var(--space-1);
}

.contact-list li:nth-child(3) {
  margin-top: var(--space-1);
  align-items: start; /* Icon oben bei mehrzeiliger Adresse */
}

.contact-list li:nth-child(3) .contact-icon {
  align-self: start;
  margin-top: 0.15em; /* optisch an erste Textzeile */
}

.contact-list a {
  min-width: 0;
  padding-left: var(--space-1);
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

.contact-icon {
  display: grid;
  place-items: center;
  align-self: center;
  width: var(--contact-icon-col);
  color: var(--color-primary);
  font-size: var(--type-body-large-size);
  line-height: 1;
}

.contact-list .contact-icon {
  font-size: var(--type-body-size);
}

.contact-icon--phone::before,
.contact-icon--mail::before,
.contact-icon--address::before {
  content: none;
}

.contact-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.contact-form .field {
  flex: 0 0 auto;
}

.contact-form .field--message {
  display: flex;
  flex: 1 1 auto;
  min-height: 7.573rem;
}

.contact-form .field--message textarea {
  flex: 1 1 auto;
  height: auto;
  min-height: 7.573rem;
}

.contact-form .button {
  flex: 0 0 auto;
  width: 100%;
}

.contact-form .form-status {
  flex: 0 0 auto;
}

.field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-focus);
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: 2px;
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--color-danger);
  outline: var(--border-width) solid var(--color-danger);
  outline-offset: 2px;
}

.field input,
.field select {
  height: 3.375rem;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
}

.field textarea {
  height: 7.573rem;
  min-height: 7.573rem;
  padding: var(--space-1) var(--space-3);
  resize: vertical;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.button {
  min-height: var(--touch-min);
  height: auto;
  border: 0;
  padding: var(--space-3) var(--space-6);
  color: var(--color-text-strong); /* AA auf Primary; Weiß auf Primary nur Zitat (Kundin) */
  background: var(--color-primary);
  font-size: 1.25rem; /* 20 – eine Stufe unter body-large (24) */
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--type-body-tracking);
  text-transform: none; /* Satzschreibweise – üblich & lesbarer */
  white-space: normal;
  cursor: pointer;
}

.button:hover {
  color: var(--color-text-strong);
  background: var(--color-primary-hover);
}

.button:active {
  background: var(--color-focus);
  color: var(--color-white);
}

.button:disabled,
.button[aria-busy="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--color-primary);
  color: var(--color-text-strong);
}

.form-status {
  margin: var(--space-2) 0 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.form-status.sending {
  color: var(--color-text);
}

.form-status.success {
  color: var(--color-success);
}

.form-status.error {
  color: var(--color-danger);
}

.form-status:empty {
  display: none;
}

.site-footer {
  padding-block: var(--space-24) var(--space-12);
  background: var(--color-bg); /* Mint – bewusster Abschluss nach Beige-Kontakt */
}

/*
 * Footer · Logo | Identität+Kontakt | Legal:
 * Flex space-between → gleicher freier Abstand links und rechts vom Mittelblock.
 */
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap);
}

.footer-logo {
  flex: 0 0 auto;
  width: min(9rem, 100%);
  max-width: 100%;
}

.footer-details {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: max-content;
  max-width: min(22rem, 100%);
  min-width: 0;
  text-align: left;
}

.footer-identity {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--type-body-tracking);
}

.footer-identity p {
  margin: 0;
}

.footer-identity p:first-child {
  margin-bottom: var(--space-1);
  font-size: var(--type-qualification-size);
  line-height: var(--type-qualification-line);
}

.footer-identity p:last-child {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.footer-contact li {
  display: grid;
  grid-template-columns: var(--contact-icon-col) minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: center;
  margin: 0;
}

.footer-contact li + li {
  margin-top: var(--space-1);
}

.footer-contact a {
  min-width: 0;
  padding-left: var(--space-1);
  color: inherit;
  font: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-contact .contact-icon {
  color: var(--color-text);
  font-size: var(--type-body-size);
}

.footer-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
  text-align: right;
}

.footer-nav a {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-decoration: none;
  text-transform: none;
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
}

/*
 * Über mich / Unterseiten: Header wie Start – volle Primary-Leiste,
 * seitlicher Innenabstand = Start-Nav (--space-8).
 */
.page-blue .site-header {
  min-height: 0;
  padding: 0;
  background: var(--color-primary);
}

.page-blue .header-inner {
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-4) var(--space-8);
}

.page-blue .header-logo {
  width: 7.5rem;
  height: auto;
}

.page-blue .site-nav {
  padding-top: 0;
}

/*
 * Über mich Sub-Hero · Content-Shell wie untere Abschnitte (R2 5 + 7).
 * Abschnittsfarbe Primary vollbreit; Inhalt in .container.
 */
.sub-hero {
  padding-block: var(--space-section-y);
  background: var(--color-primary);
}

.sub-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
  align-items: center;
}

.sub-credentials {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-8);
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text);
}

.sub-hero-portrait {
  grid-column: span 7;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.sub-hero-portrait .portrait-arch {
  grid-column: auto;
  width: 100%;
  max-width: 100%;
  flex: 0 1 auto;
}

.sub-credentials__name {
  width: auto;
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-name-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-name-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  text-transform: none;
}

.sub-credentials__roles {
  margin: 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
}

.sub-credentials__roles .qualification {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.sub-credentials__roles .qualification + .qualification {
  margin-top: var(--space-2);
}

.sub-credentials__roles .qualification__note {
  color: var(--color-text-muted);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
}

.portrait-arch {
  grid-column: span 7;
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-primary);
}

.portrait-arch.media-backdrop {
  overflow: visible;
  background: transparent;
}

/* Über mich: Mint-L hinter Porträt; Querformat wie Intro */
.page-blue .portrait-arch.media-backdrop {
  --media-backdrop-color: var(--color-accent-green);
  --media-backdrop-top-span: 0.88;
}

.portrait-arch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 639 / 427;
  object-fit: cover;
  object-position: 50% 0%;
}

/*
 * Paper „Über mich“ · vollbreite Beige-Fläche;
 * Titel + Fließtext zweispaltig in der Content-Shell.
 */
.paper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-block: var(--space-section-y);
  padding-inline: var(--page-gutter);
  border-top: 0;
  background: var(--color-surface-warm);
  box-shadow: none;
}

.paper-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  width: var(--page-width);
  max-width: none;
  margin-inline: auto;
}

.paper h1 {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 var(--space-title-gap);
  font-size: var(--type-page-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
}

.reading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: 100%;
  max-width: none;
  margin: 0;
  letter-spacing: var(--type-body-tracking);
}

.reading__lead,
.reading__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--space-6);
  width: 100%;
}

.reading__col {
  min-width: 0;
}

.reading p {
  margin: 0 0 var(--space-4);
  line-height: var(--type-body-line);
  text-align: left;
}

.reading__col > :last-child {
  margin-bottom: 0;
}

.reading > .text-toggle {
  flex: 0 0 auto;
}

.reading__more {
  margin-top: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-primary);
}

/*
 * Reasons · vollbreit Mint; R2 7 + 5:
 * Copy | „Weitere Gründe“ mit schmaler Primary-Umrandung (wie Themen-Karten).
 */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
  align-items: stretch;
}

.section:has(.reasons-grid) {
  padding-block: var(--space-section-y);
  margin: 0;
  background: var(--color-accent-green);
}

.reasons-copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.reasons-copy h2 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--type-legal-heading-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-legal-heading-line);
  letter-spacing: var(--type-body-tracking);
}

.reasons-copy p {
  margin: 0;
  color: var(--color-text);
  text-align: left;
}

.reasons-tabs {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
  min-height: 100%;
  justify-self: stretch;
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
}

.reasons-tabs__lede {
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
  text-transform: none;
}

.reasons-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.reasons-tabs__tab {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-primary);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--type-label-tracking);
  cursor: pointer;
}

.reasons-tabs__tab:hover,
.reasons-tabs__tab:focus-visible {
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.reasons-tabs__tab[aria-selected="true"] {
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  background: var(--color-surface-warm);
}

.reasons-tabs__panels {
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

.reasons-tabs__panel {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.reasons-tabs__panel[hidden] {
  display: none;
}

/*
 * Qualifikationen · vollbreit Primary; R2 6 + 6:
 * Karten wie Zusammenarbeit (Beige-Rand, Media-Backdrop, Titel, Liste).
 */
.section:has(.qualifications) {
  padding-block: var(--space-section-y);
  margin: 0;
  background: var(--color-primary);
}

.qualifications {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--layout-gap);
  align-items: stretch;
}

.qualification-card {
  grid-column: span 6;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-surface-warm);
  border-radius: 0;
  background: transparent;
}

.qualification-card__media {
  --media-backdrop-color: var(--color-accent-green);
  flex: 0 0 auto;
}

.qualification-card__media img,
.qualification-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.qualification-card__title {
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  text-transform: none;
}

.qualification-card .check-list {
  margin: 0;
}

.qualification-card .check-list li + li {
  margin-top: var(--space-2);
}

#qualifikation-title {
  color: var(--color-text);
}

/* Quali auf Primary: Listenpunkte in Beige (sichtbar) */
.section:has(.qualifications) .check-list li::before {
  background: var(--color-surface-warm);
}

.legal-shell {
  padding-block: var(--space-section-y);
}

.legal-content {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--reading));
  margin-inline: auto;
  padding: clamp(var(--space-8), 6vw, var(--space-24));
  background: var(--color-surface);
  box-shadow: var(--shadow);
  letter-spacing: var(--type-body-tracking);
}

.legal-content h1 {
  font-size: var(--type-page-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
}

.legal-content h2 {
  margin-top: var(--space-12);
  font-size: var(--type-legal-heading-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-legal-heading-line);
  letter-spacing: var(--type-body-tracking);
}

.legal-content h3 {
  margin-top: var(--space-8);
  font-size: var(--type-legal-heading-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-legal-heading-line-loose);
  letter-spacing: var(--type-body-tracking);
}

.legal-content h4 {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: 700;
}

.legal-content p {
  text-align: left;
}

.legal-datenschutz .legal-content h1 {
  color: var(--color-primary);
}

/* —— Datenschutz · Variante B: Mint, sticky TOC, durchgehender Text —— */
body.legal-datenschutz {
  background: var(--color-accent-green);
}

.datenschutz-main {
  padding-block: var(--space-section-y);
}

/*
 * Datenschutz · R2 als 5 + 7 (§5):
 * TOC sticky | Lesetext; Spalten-Gap = --layout-gap.
 */
.datenschutz-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--layout-gap);
  row-gap: var(--space-8);
  align-items: start;
  width: var(--page-width);
}

.datenschutz-toc {
  grid-column: span 5;
  position: sticky;
  top: var(--space-8);
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
}

.datenschutz-toc__title {
  margin: 0 0 var(--space-6);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-body-large-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--type-body-tracking);
}

.datenschutz-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.datenschutz-toc__list li {
  margin: 0 0 var(--space-2);
}

.datenschutz-toc__list li:last-child {
  margin-bottom: 0;
}

.datenschutz-toc__list a {
  display: block;
  color: inherit;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-decoration: none;
}

.datenschutz-toc__list a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.datenschutz-content {
  grid-column: span 7;
  min-width: 0;
  max-width: var(--reading);
  color: var(--color-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.datenschutz-content h1 {
  margin: 0 0 var(--space-title-gap);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--type-page-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
}

.datenschutz-content h2 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-legal-heading-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-legal-heading-line);
  letter-spacing: var(--type-body-tracking);
  scroll-margin-top: var(--space-8);
}

.datenschutz-content h2:first-of-type {
  margin-top: var(--space-8);
}

.datenschutz-content p {
  margin: 0 0 var(--space-3);
  text-align: left;
}

.datenschutz-content ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-6);
}

.datenschutz-content li {
  margin-bottom: var(--space-1);
}

.datenschutz-content a {
  color: inherit;
  text-decoration: underline;
}

.datenschutz-content a:hover {
  color: var(--color-text-strong);
}

/* —— Impressum · Variante A: Mint, eine Anbieter-Box, Lesetext —— */
body.legal-impressum {
  background: var(--color-accent-green);
}

.impressum-main {
  padding-block: var(--space-section-y);
}

.impressum-inner {
  max-width: none;
  width: var(--page-shell);
  margin-inline: auto;
}

.impressum-title {
  margin: 0 0 var(--space-title-gap);
  font-family: var(--font-display);
  font-size: var(--type-page-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
  color: var(--color-text);
}

/*
 * Eine Anbieter-Box im Kontakt-Stil (1px Primary-Rand):
 * Identität, Rollen, Erlaubnis, Kontaktliste.
 */
.impressum-provider {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: var(--reading);
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-primary);
  background: transparent;
}

.impressum-provider .contact-card {
  gap: var(--space-6);
}

.impressum-provider__label {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.impressum-provider__roles,
.impressum-provider__permits {
  margin: 0;
  color: var(--color-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.impressum-provider__roles p,
.impressum-provider__permits p {
  margin: 0 0 var(--space-3);
}

.impressum-provider__roles p:last-child,
.impressum-provider__permits p:last-child {
  margin-bottom: 0;
}

.impressum-provider__note {
  color: var(--color-text-muted);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
}

.impressum-provider__web {
  margin: 0;
  color: var(--color-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}

.impressum-provider__web a {
  color: inherit;
  text-decoration: underline;
}

.impressum-provider__web a:hover {
  color: var(--color-text-strong);
}

/*
 * Impressum-Rechtstext · R1 + Lesbreite (§5).
 */
.impressum-legal {
  width: 100%;
  max-width: var(--reading);
  margin: var(--space-block-lg) 0 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  text-align: left;
}

.impressum-legal h2 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--type-legal-heading-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-legal-heading-line);
  letter-spacing: var(--type-body-tracking);
}

.impressum-legal h2:first-child {
  margin-top: 0;
}

.impressum-legal p {
  margin: 0 0 var(--space-3);
}

.impressum-legal a {
  color: inherit;
  text-decoration: underline;
}

.impressum-legal a:hover {
  color: var(--color-text-strong);
}

.legal-content details {
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
}

.legal-content summary {
  cursor: pointer;
}

.legal-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.legal-content th,
.legal-content td {
  border-bottom: 1px solid var(--color-border-muted);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

.not-found {
  min-height: 55vh;
  display: grid;
  place-content: center;
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Schmalerer Desktop: Overlay etwas breiter (mehr Platz für Qualis). */
@media (max-width: 1200px) and (min-width: 901px) {
  .hero-overlay-test {
    width: calc(100% * 5 / 12 - 2 * var(--space-8));
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .hero-overlay-test {
    width: calc(100% * 5.5 / 12 - 2 * var(--space-8));
  }
}

@media (max-width: 900px) {
  :root {
    --type-page-title-size: var(--type-page-title-size-md);
    --type-name-size: var(--type-name-size-md);
    --type-section-size: var(--type-section-size-md);
    --type-qualification-size: var(--type-qualification-size-md);
    --type-card-title-size: var(--type-card-title-size-md);
    --type-legal-heading-size: var(--type-legal-heading-size-md);
    --type-hero-title-size: var(--type-hero-title-size-md);
    --type-hero-name-size: var(--type-hero-name-size-md);
    --type-hero-role-size: var(--type-hero-role-size-md);
    --type-eyebrow-size: var(--type-eyebrow-size-md);
    --space-section-y: var(--space-24); /* Tablet 96px */
    --space-title-gap: clamp(var(--space-6), 4vw, var(--space-12)); /* 24 → 48 */
    --space-block: var(--space-12);
    --space-block-lg: var(--space-16);
    --page-gutter: var(--space-6); /* Tablet 24px */
    --layout-gap: var(--space-12); /* Tablet 48px — Spalten-/Rezept-Gap */
  }
  /*
   * Startseite mobil: Hero-Band-Variablen; Header = Primary-Leiste.
   */
  .home,
  .page-blue {
    /* Alias: alter Name → Standard Abschnitts-Padding */
    --home-section-gap: var(--space-section-y);
    --home-title-gap: var(--space-6);    /* 24px */
  }

  .home {
    --home-nav-band: calc(var(--space-4) + var(--touch-min) + var(--space-4));
    --home-hero-mobile-h: calc(100dvh - var(--home-nav-band));
    --home-hero-mobile-inset: 0;
  }

  /*
   * Mobil/Tablet: volle Primary-Leiste (Wiedererkennung wie Desktop-Nav),
   * Logo + Burger darauf; Dropdown ebenfalls Primary, volle Breite.
   */
  .site-header {
    padding: var(--space-4);
    background: var(--color-primary);
  }

  .home .site-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 30;
    height: auto;
    min-height: 0;
    padding: var(--space-4);
    pointer-events: auto;
    background: var(--color-primary);
  }

  .header-logo {
    display: block;
    width: 110px;
    visibility: visible;
  }

  /* Start mobil: normales Header-Flex; Logo 110px wie Unterseiten. */
  .home .header-inner {
    display: flex;
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
  }

  .home .header-inner > a[href="/"] {
    display: block;
    grid-column: auto;
    height: auto;
    overflow: visible;
    padding: 0;
    line-height: 0;
  }

  .home .header-logo {
    display: block;
    width: 110px;
    height: auto;
  }

  .nav-toggle {
    display: block;
    width: var(--touch-min);
    height: var(--touch-min);
    border: 0;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text-strong);
    box-shadow: none;
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: color-mix(in srgb, var(--color-text) 16%, transparent);
  }

  .home .nav-toggle {
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text-strong);
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding: 0;
    background: var(--color-primary);
    box-shadow: none;
  }

  .home .site-nav {
    grid-column: auto;
    left: 0;
    right: 0;
    max-height: min(50vh, 18rem);
    padding: 0;
    background: var(--color-primary);
  }

  /* Desktop-Offset der blauen Unterseiten entfällt im Mobile-Dropdown */
  .page-blue .site-nav {
    padding-top: 0;
  }

  .page-blue .site-header {
    min-height: 0;
    padding: 0;
    background: var(--color-primary);
  }

  .page-blue .header-inner {
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--space-4) var(--page-gutter);
  }

  .page-blue .header-logo {
    width: 110px;
    height: auto;
  }

  .site-nav[hidden] {
    display: none;
  }

  .nav-list,
  .home .nav-list {
    display: grid;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: transparent;
  }

  .nav-list a,
  .home .nav-list a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    font-size: var(--type-nav-size);
    font-weight: var(--weight-medium);
    line-height: var(--type-nav-line);
    letter-spacing: var(--type-nav-tracking);
    white-space: normal;
  }

  .nav-list a::after {
    content: none;
  }

  /*
   * Hero Tablet: 6 + 6 (Mint | Bild) statt Desktop 4 + 8 —
   * mehr Platz für Markentitel; Bild schmaler.
   * Logo nur im Header (kein Doppel im Panel).
   */
  .hero {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }

  .home .hero {
    margin-top: 0;
  }

  .hero-grid {
    height: calc(100vh - var(--home-nav-band, 0px));
    height: calc(100dvh - var(--home-nav-band, 0px));
    min-height: 28rem;
  }

  .hero-media {
    grid-column: 7 / -1; /* Spalten 7–12 = Hälfte */
  }

  .hero-overlay-test {
    box-sizing: border-box;
    gap: var(--space-6);
    width: 50%; /* Mint-Hälfte, bündig zum Bild */
    min-width: 0;
    max-width: none;
    padding: var(--space-6) var(--space-4);
    overflow: hidden;
  }

  .hero-overlay-test .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .hero-overlay-test .hero-copy h1 {
    width: auto;
    max-width: 100%;
  }

  .hero-overlay-test .hero-copy__eyebrow,
  .hero-overlay-test .hero-identity {
    width: auto;
    min-width: 0;
  }

  /* Langer Markentitel darf auf Tablet umbrechen */
  .hero .text-nowrap {
    white-space: normal;
  }

  .hero-logo-link {
    display: none;
  }

  .hero-media picture {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .hero-copy {
    display: block;
  }

  .intro-section,
  .quote-section {
    margin-top: 0;
  }

  /*
   * §5 Tablet/Phone: Mehrspalten-Rezepte (R2/R3) → 1 Spalte.
   * --layout-gap ist gestaffelt (48px Tablet / 32px Phone); Shell via --page-gutter.
   */
  .intro-grid,
  .reasons-grid {
    grid-template-columns: 1fr;
  }

  .intro-prose,
  .intro-grid .portrait-arch {
    grid-column: 1 / -1;
  }

  .reasons-grid {
    column-gap: var(--space-8);
    row-gap: var(--space-6);
  }

  .reasons-copy,
  .reasons-tabs {
    grid-column: 1 / -1;
  }

  /*
   * Über mich Tablet: Sub-Hero bleibt 5+7 in der Content-Shell.
   */

  /*
   * Über mich mobil – Paper: vollbreit Beige, einspaltiger Text.
   */
  .paper {
    width: 100%;
    padding-block: var(--space-section-y);
    padding-inline: var(--page-gutter);
  }

  .paper-inner {
    width: 100%;
  }

  .paper h1 {
    width: 100%;
    max-width: none;
    margin-bottom: var(--space-title-gap);
  }

  .reading {
    width: 100%;
    max-width: none;
  }

  .reading__lead,
  .reading__more {
    grid-template-columns: 1fr;
  }

  .reading p {
    margin-bottom: var(--space-3);
    text-align: left;
  }

  .reasons-copy h2 {
    font-size: var(--type-legal-heading-size);
    line-height: var(--type-legal-heading-line-loose);
    letter-spacing: var(--type-body-tracking);
  }

  .reasons-copy p {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    text-align: left;
  }

  /*
   * Qualifikationen Tablet: weiter 6+6 (zwei Spalten).
   * Gestapelt erst auf Phone ≤560.
   */
  .qualifications {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--layout-gap);
    max-width: none;
    margin: 0;
    padding-top: 0;
  }

  .qualification-card,
  .qualification-card:nth-child(1),
  .qualification-card:nth-child(2) {
    grid-column: auto;
    min-height: 0;
    justify-content: flex-start;
    margin: 0;
    padding: var(--space-6) var(--space-4);
  }

  .qualification-card .check-list li {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  .qualification-card .check-list li + li {
    margin-top: var(--space-2);
  }

  /*
   * Über mich mobil – Typo-Nachzug (Punkt 6):
   * Tokens greifen schon; feste Desktop-Größen hier auf Mobile-Skala ziehen.
   */
  .page-blue .reading p {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  /*
   * Über mich mobil – einheitliche Abstände (--space-section-y):
   * Sub-Hero → Paper → Gründe → Qualifikationen → Footer
   */
  .page-blue .sub-hero {
    margin-bottom: 0;
  }

  .page-blue .sub-hero-grid {
    padding-bottom: 0;
  }

  .page-blue .paper {
    margin-bottom: 0;
  }

  .page-blue .section:has(.reasons-grid),
  .page-blue .section:has(.qualifications) {
    margin: 0;
    padding-block: var(--space-section-y);
  }

  .page-blue .section-rule {
    margin: 0;
  }

  .page-blue .section:has(.qualifications) .section-title {
    margin-bottom: var(--home-title-gap);
  }

  /*
   * Startseite mobil – Abschnitte nutzen .section / --space-section-y.
   * Keine Extra-Margins an Rules oder margin-top an Quote/Intro.
   */
  .home .quote-section,
  .home .intro-section,
  .home .topics-section,
  .home #zusammenarbeit,
  .home #kontakt {
    margin-top: 0;
    padding-block: var(--space-section-y);
  }

  .home .intro-rule,
  .home .collaboration-rule,
  .home .contact-rule {
    margin: 0;
  }

  .home .topics-section .section-title,
  .home #zusammenarbeit .section-title,
  .home #kontakt .section-title {
    margin-bottom: var(--home-title-gap);
  }

  .credentials__name {
    margin-bottom: var(--space-3);
  }

  .intro-copy {
    margin-top: var(--space-4);
    text-align: left;
  }

  .intro-copy p {
    margin-bottom: var(--space-3);
  }

  .quote-arch {
    padding: 0;
  }

  .quote-arch blockquote {
    /* Größe folgt --type-section-size (Tablet/Phone gestaffelt) */
    line-height: var(--type-legal-heading-line-loose);
  }

  .quote-arch cite {
    margin-top: var(--space-4);
    font-size: var(--type-body-size);
    white-space: normal;
  }

  /*
   * Themen Tablet: 2×2 wie Desktop-Raster, gestapelt nur auf Phone.
   */
  .topics-directory {
    padding: 0;
    background: transparent;
  }

  .topics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--layout-gap);
  }

  .topic-cluster {
    grid-column: auto;
    min-height: 0;
    padding: var(--space-6) var(--space-4);
    border: 2px solid var(--color-primary);
  }

  .topic-cluster__title {
    font-size: var(--type-body-large-size);
  }

  .collaboration-panel,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    grid-column: 1 / -1;
  }

  .contact-info,
  .contact-form {
    grid-column: 1 / -1;
  }

  .contact-info {
    min-height: 0;
    padding: var(--space-6);
  }

  .collaboration-panel {
    row-gap: var(--layout-gap);
    padding: 0;
  }

  /*
   * Zusammenarbeit Tablet: gestapelte Desktop-Karten inkl. Bilder
   * (Accordion erst auf Phone ≤560).
   */
  .service-card {
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
    border: 2px solid var(--color-surface-warm);
  }

  .service-card__media,
  .service-card picture,
  .service-image {
    display: block;
  }

  .service-body p,
  .service-note {
    text-align: left;
  }

  .contact-card,
  .contact-form {
    height: auto;
    min-height: 0;
  }

  .contact-form {
    width: 100%;
  }

  .contact-identity {
    letter-spacing: var(--type-body-tracking);
  }

  .contact-identity p:first-child {
    font-size: var(--type-qualification-size);
    line-height: var(--type-legal-heading-line-loose);
  }

  .contact-identity p:last-child {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .contact-list {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .contact-list .contact-icon {
    font-size: var(--type-body-size);
  }

  .contact-list .contact-icon svg {
    width: 1em;
    height: 1em;
  }

  .field input,
  .field select,
  .field textarea {
    font-size: var(--type-body-size); /* ≥16px – kein iOS-Zoom, aber nicht übergroß */
  }

  .field input,
  .field select {
    height: var(--touch-min);
  }

  .field textarea,
  .contact-form .field--message,
  .contact-form .field--message textarea {
    min-height: 6.5rem;
  }

  .field textarea {
    height: 6.5rem;
  }

  /*
   * Footer Tablet: zweispaltig — Logo links | Identität+Kontakt+Legal rechts.
   * Phone (≤560) stapelt wieder eine Spalte.
   */
  .site-footer {
    padding-block: var(--space-12) var(--space-8);
  }

  .footer-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--layout-gap);
    row-gap: var(--space-6);
    align-items: start;
    justify-content: unset;
  }

  .footer-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 6.5rem;
  }

  .footer-details {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    gap: var(--space-6);
    align-items: flex-start;
    text-align: left;
  }

  .footer-identity p:first-child {
    font-size: var(--type-qualification-size);
    line-height: var(--type-qualification-line);
  }

  .footer-identity p:last-child {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .footer-contact {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .footer-contact .contact-icon {
    font-size: var(--type-body-size);
  }

  .footer-contact li {
    padding-bottom: var(--space-2);
  }

  .footer-nav {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
    gap: var(--space-2) var(--space-4);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .sub-hero {
    margin-bottom: var(--space-section-y);
  }

  .paper {
    padding: var(--space-8) var(--page-gutter);
  }

  .qualifications {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .qualification-card,
  .qualification-card:nth-child(1),
  .qualification-card:nth-child(2) {
    padding: var(--space-4);
  }

  .qualification-card .check-list li {
    font-size: var(--type-body-size);
  }

  .reasons-copy p,
  .page-blue .reading p {
    font-size: var(--type-body-size);
  }

  .reasons-tabs__panel {
    font-size: var(--type-body-size);
  }

  /*
   * Impressum mobil – eine Anbieter-Box, Lesetext.
   */
  .impressum-main {
    padding-block: var(--space-section-y);
  }

  .impressum-inner {
    width: var(--page-width);
  }

  .impressum-title {
    margin: 0 0 var(--home-title-gap);
    font-size: var(--type-page-title-size);
    line-height: var(--type-page-title-line);
  }

  .impressum-provider {
    max-width: none;
    padding: var(--space-4);
  }

  .impressum-legal {
    width: 100%;
    max-width: none;
    margin-top: var(--space-block-lg);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
    text-align: left;
  }

  .impressum-legal h2 {
    font-size: var(--type-legal-heading-size);
    line-height: var(--type-legal-heading-line);
  }

  .impressum-legal p {
    margin-bottom: var(--space-3);
  }

  /*
   * Datenschutz mobil – TOC oben (nicht sticky), Content darunter.
   */
  .datenschutz-main {
    padding-block: var(--space-section-y);
  }

  .datenschutz-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-block);
  }

  .datenschutz-toc,
  .datenschutz-content {
    grid-column: 1 / -1;
  }

  .datenschutz-toc {
    position: static;
    padding: var(--space-4);
  }

  .datenschutz-toc__title {
    margin-bottom: var(--space-4);
    font-size: var(--type-body-large-size);
    line-height: var(--type-body-large-line);
  }

  .datenschutz-toc__list li {
    margin-bottom: var(--space-1);
  }

  .datenschutz-toc__list a {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .datenschutz-content {
    max-width: none;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  .datenschutz-content h1 {
    margin-bottom: var(--home-title-gap);
    font-size: var(--type-page-title-size);
    line-height: var(--type-page-title-line);
  }

  .datenschutz-content h2 {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--type-legal-heading-size);
    line-height: var(--type-legal-heading-line);
  }

  .datenschutz-content p,
  .datenschutz-content ul {
    margin-bottom: var(--space-3);
    text-align: left;
  }

  /*
   * 404 mobil – Paper-Block, klare Hierarchie, gleicher Rhythmus.
   */
  .not-found {
    display: block;
    min-height: 0;
    padding-block: var(--home-section-gap);
    text-align: left;
  }

  .not-found .container {
    padding: var(--space-8) var(--space-6) var(--space-8);
    background: var(--color-surface);
    box-shadow: none;
  }

  .not-found h1 {
    margin: 0 0 var(--home-title-gap);
    font-size: var(--type-page-title-size);
    font-weight: var(--weight-semibold);
    line-height: var(--type-page-title-line);
    letter-spacing: var(--type-body-tracking);
  }

  .not-found p {
    margin: 0 0 var(--space-3);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
  }

  .not-found .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    text-decoration: none;
  }

  /* Touch-Ziele ≥ ~44px (Optik bleibt, Hit-Area wächst) */
  .button {
    min-height: var(--touch-min);
    height: auto;
    padding-block: var(--space-3);
  }

  .text-toggle {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-1);
  }

  .footer-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-3);
  }

  .datenschutz-toc__list a {
    min-height: var(--touch-min);
    padding-block: var(--space-2);
    align-items: center;
  }
}

@media (max-width: 560px) {
  :root {
    --type-page-title-size: var(--type-page-title-size-sm);
    --type-name-size: var(--type-name-size-sm);
    --type-section-size: var(--type-section-size-sm);
    --type-qualification-size: var(--type-qualification-size-sm);
    --type-card-title-size: var(--type-card-title-size-sm);
    --type-legal-heading-size: var(--type-legal-heading-size-sm);
    --type-hero-title-size: var(--type-hero-title-size-sm);
    --type-hero-name-size: var(--type-hero-name-size-sm);
    --type-hero-role-size: var(--type-hero-role-size-sm);
    --type-eyebrow-size: var(--type-eyebrow-size-sm);
    /* nav bleibt body-large */
    --space-section-y: var(--space-16); /* Phone 64px */
    --space-title-gap: clamp(var(--space-6), 4vw, var(--space-8)); /* 24 → 32 */
    --space-block: var(--space-8);
    --space-block-lg: var(--space-12);
    --page-gutter: var(--space-4); /* Phone 16px */
    --layout-gap: var(--space-8); /* Phone 32px — Spalten-/Rezept-Gap */
  }

  body {
    font-size: var(--type-body-size);
  }

  .container,
  .legal-content,
  .section-rule {
    width: var(--page-shell);
  }

  .paper {
    width: 100%;
  }

  .home,
  .page-blue {
    --home-section-gap: var(--space-section-y);
    --home-title-gap: var(--space-4);   /* 16px */
  }

  .home {
    --home-nav-band: calc(var(--space-3) + var(--touch-min) + var(--space-3));
    --home-hero-mobile-h: calc(100dvh - var(--home-nav-band));
    --home-hero-mobile-inset: 0;
  }

  /*
   * Hero Phone: kein Bild (kein guter Crop); nur Mint-Texttafel volle Breite.
   */
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .home .hero {
    height: auto;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hero-media {
    display: none;
  }

  .hero-overlay-test {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: var(--space-6);
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: var(--space-6) var(--space-4);
    overflow: visible;
  }

  .hero-overlay-test .hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero-overlay-test .hero-copy h1 {
    width: auto;
    max-width: 100%;
  }

  .hero-overlay-test .hero-copy__eyebrow,
  .hero-overlay-test .hero-identity {
    width: auto;
    min-width: 0;
  }

  .hero .text-nowrap {
    white-space: normal;
  }

  /*
   * Über mich Phone: Sub-Hero vollbreit gestapelt
   * (Porträt → Credentials, beide Primary).
   */
  .sub-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .sub-credentials,
  .sub-hero-portrait,
  .portrait-arch {
    grid-column: auto;
  }

  .sub-credentials {
    order: 2;
    grid-column: auto;
    gap: var(--space-6);
    padding: 0;
  }

  .sub-hero-portrait {
    order: 1;
    grid-column: auto;
    padding: 0;
  }

  .home .header-inner {
    width: 100%;
  }

  .topics-directory {
    padding: 0;
  }

  .topics-grid {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
  }

  .topic-cluster {
    padding: var(--space-4);
    min-height: 0;
    font-size: var(--type-body-size);
  }

  .field input,
  .field select,
  .field textarea {
    font-size: var(--type-body-size); /* 16px – verhindert iOS-Zoom */
  }

  .field input,
  .field select {
    height: var(--touch-min);
  }

  .field textarea,
  .contact-form .field--message,
  .contact-form .field--message textarea {
    min-height: 5.5rem;
  }

  .field textarea {
    height: 5.5rem;
  }

  .collaboration-panel {
    padding: 0;
  }

  /*
   * Zusammenarbeit Phone: Accordion; kompakte Bilder behalten (Desktop-Nähe).
   */
  .service-card {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .service-image {
    aspect-ratio: 16 / 9;
  }

  .service-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--touch-min);
    padding: var(--space-2) 0;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
  }

  .service-accordion-trigger:hover,
  .service-accordion-trigger:focus-visible {
    color: var(--color-text-strong);
  }

  .service-accordion-trigger::after {
    content: "+";
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--type-body-large-size);
    font-weight: var(--weight-regular);
    line-height: 1;
    color: var(--color-text);
  }

  .service-accordion-trigger[aria-expanded="true"]::after {
    content: "−";
  }

  .service-body {
    padding: 0 var(--space-1) var(--space-4);
  }

  .service-body--indented {
    padding-inline: var(--space-1);
  }

  .paper {
    padding-block: var(--space-section-y);
    padding-inline: var(--page-gutter);
  }

  .legal-content {
    padding: var(--space-8) var(--space-4);
  }

  .reading p,
  .reasons-copy p {
    text-align: left;
  }

  .impressum-provider {
    padding: var(--space-4);
  }

  .impressum-legal,
  .datenschutz-content {
    font-size: var(--type-body-size);
  }

  .datenschutz-toc {
    padding: var(--space-4) var(--space-4) var(--space-4);
  }

  .datenschutz-toc__list a {
    font-size: var(--type-body-size);
  }

  .not-found .container {
    padding: var(--space-8) var(--space-4) var(--space-8);
  }

  .not-found p {
    font-size: var(--type-body-size);
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-6);
  }

  .footer-logo {
    grid-column: auto;
    grid-row: auto;
    width: 4.75rem;
  }

  .footer-details {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 22rem;
    gap: var(--space-4);
  }

  .footer-nav {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-media picture {
    animation: none;
    transform: scale(1);
    will-change: auto;
  }
}