/* ==========================================================================
   VORLIO – Stylesheet
   Statisch, ohne Framework, ohne externe Ressourcen.

   Aufbau
   1.  Schriften
   2.  Tokens (Farben, Typografie, Abstände, Themen)
   3.  Basis (Reset, Typografie, Fokus, Barrierefreiheit)
   4.  Layout (Container, Raster, Sektionen, Split, Spalten)
   5.  Typo-Bausteine (Marker, Eyebrow, Label, Lead, Links, Statement)
   6.  Buttons und Icons
   7.  Header und Navigation
   8.  Footer
   9.  Komponenten
       9.1  Sektionslabel und Sektionskopf
       9.2  Seiten-Hero (Unterseiten) und Brotkrumen
       9.3  Fotos und Bildunterschriften
       9.4  Haarlinienlisten, Gruppen, Kicker, Claim
       9.5  Medienzeile (Foto + Text)
       9.6  Nummerierte Aufgabenliste
       9.7  Ablauf (Flow, auch senkrecht)
       9.8  Schritte-Raster (Zusammenarbeit)
       9.9  Pipeline
       9.10 Datensatz / Feldliste
       9.11 Grundsätze (dl), Haltung, Maximen
       9.12 Fakt-Zeile, Branchen, Startregion
       9.13 FAQ
       9.14 Querverweise (Weitere Leistungen)
       9.15 CTA-Band, Randblöcke, Agenda, Kontakttabelle
       9.16 Formulare
       9.17 Rechtstexte, Platzhalter, Inhaltsverzeichnis, Linkliste
       9.18 Fehlerseite (404)
       9.19 Wortmarke
   10. Startseite (Hero und seitenspezifische Anordnung)
   11. Unterseiten (seitenspezifische Anordnung)
   12. Hilfsklassen
   13. Bewegung (Einblendungen)
   ========================================================================== */


/* ==========================================================================
   1. Schriften (lokal, variabel 200–800)
   ========================================================================== */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root {
  /* Markenfarben */
  --navy: #0E1726;          /* Deep Navy: Headlines, dunkle Bänder, Primärbutton */
  --navy-hover: #1B2840;
  --paper: #F6F7F9;         /* Soft White: die eine helle Basis */
  --white: #FFFFFF;         /* nur für bewusste Flächen (Formular-Panel, Datensatz) */
  --ink: #22262C;           /* Graphite: Fließtext */
  --muted: #5B6470;         /* nur Sekundäres (5,6:1 auf Paper) */
  --line: #D8DCE2;          /* Haarlinien */
  --line-strong: #B8BFC8;
  --field-border: #858D98;  /* Formularränder, 3,3:1 */
  --photo-bg: #E4E7EB;

  /* Sage: Akzent, nie großflächig */
  --sage: #4F7D69;          /* nur dekorativ (Marker, Linien) */
  --sage-text: #3F6B58;     /* Sage als Text auf hellem Grund, 5,7:1 */
  --sage-on-dark: #7FAA93;  /* Sage auf Navy (Text und Marker), 6,9:1 */

  /* Zustände */
  --error: #A23B2F;
  --error-on-dark: #F0A99F;
  --placeholder-bg: #F6EBC8;
  --placeholder-ink: #5A4410;

  /* Auf Navy */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.76);
  --on-dark-3: rgba(255, 255, 255, 0.58);
  --line-dark: rgba(255, 255, 255, 0.16);
  --line-dark-strong: rgba(255, 255, 255, 0.34);

  /* Thema (wird in .section--dark und im Footer umgeschaltet) */
  --c-bg: var(--paper);
  --c-heading: var(--navy);
  --c-text: var(--ink);
  --c-muted: var(--muted);
  --c-line: var(--line);
  --c-line-strong: var(--line-strong);
  --c-rule: var(--navy);            /* kräftige Linie (z. B. Ergebnis) */
  --c-accent: var(--sage);          /* Marker, dekorative Linien */
  --c-accent-text: var(--sage-text);
  --c-focus: var(--sage-text);

  /* Fotobehandlung (einheitlich für alle Fotos) */
  --photo-filter: saturate(0.86) contrast(1.02);

  /* Typografie */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.375rem, 0.4rem + 5.4vw, 5.75rem);   /* H1 Startseite */
  --fs-h1: clamp(2.25rem, 1.1rem + 3vw, 4rem);              /* H1 Unterseiten */
  --fs-h2: clamp(2rem, 1.05rem + 2.55vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.1rem + 1.05vw, 2.25rem);
  --fs-h4: clamp(1.1875rem, 1.1rem + 0.25vw, 1.3125rem);
  --fs-statement: clamp(1.375rem, 1rem + 2.1vw, 3rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-body: 1.0625rem;     /* 17 px, ab 900 px 18 px */
  --fs-small: 0.9375rem;    /* 15 px, sparsam */
  --fs-label: 0.75rem;      /* 12 px, Minimum für Versalien */
  --track-label: 0.14em;

  /* Raster und Abstände */
  --maxw: 1280px;
  --pad: clamp(20px, 5.4vw, 80px);
  --cw: min(100vw - 2 * var(--pad), var(--maxw));
  --side: calc((100vw - var(--cw)) / 2);
  --gap: clamp(16px, 1.8vw, 24px);
  --header-h: 76px;
  --section-y: clamp(80px, 9.4vw, 136px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: clamp(64px, 7vw, 104px);

  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dunkles Thema: Navy-Bänder und Footer */
.section--dark,
.site-footer {
  --c-bg: var(--navy);
  --c-heading: var(--on-dark);
  --c-text: var(--on-dark-2);
  --c-muted: var(--on-dark-3);
  --c-line: var(--line-dark);
  --c-line-strong: var(--line-dark-strong);
  --c-rule: var(--on-dark);
  --c-accent: var(--sage-on-dark);
  --c-accent-text: var(--sage-on-dark);
  --c-focus: var(--sage-on-dark);
  background: var(--navy);
  color: var(--c-text);
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) {
  :root { --fs-body: 1.125rem; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p, ul, ol, dl, dd, h1, h2, h3, h4, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

/* Silbentrennung nur im Fließtext */
p, li, dd, dt, figcaption, td, th {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
p, li, dd, figcaption { text-wrap: pretty; }

h1, h2, h3, h4 {
  color: var(--c-heading);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.06;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.038em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.025em; line-height: 1.12; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.015em; line-height: 1.3; }

strong, b { font-weight: 650; }

::selection { background: var(--navy); color: #fff; }

/* Fokus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 1px;
}
main:focus-visible,
[tabindex="-1"]:focus-visible { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }


/* ==========================================================================
   4. Layout
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--pad), var(--maxw));
  margin-inline: auto;
}

/* 12-Spalten-Raster */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* Sektionen */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
/* zwei helle Sektionen hintereinander: Das Sektionslabel trennt, daher weniger Abstand */
.section:not(.section--dark) + .section:not(.section--dark):not(.section--flush-top) { padding-top: calc(var(--section-y) * 0.5); }
.page-hero + .section:not(.section--dark):not(.section--white) { padding-top: 0; }
/* Weiße Fläche nur bewusst einsetzen (z. B. hinter einem Formular) */
.section--white { background: var(--white); }

/* Blöcke innerhalb einer Sektion */
.block + .block { margin-top: var(--space-9); }
.block--rule { padding-top: var(--space-6); border-top: 1px solid var(--c-line); }

/* Split: zwei Spalten im 12er-Raster, mobil gestapelt
   .split           7 | 5 (Standard, rechte Spalte ab Spalte 9)
   .split--6-6      6 | 6
   .split--5-7      5 | 7
   .split--4-8      4 | 8
   .split--8-4      8 | 4
   .split--center   vertikal zentriert, .split--end unten bündig */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-7);
  align-items: start;
}
.split > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  .split > :first-child { grid-column: 1 / span 7; }
  .split > :last-child { grid-column: 9 / -1; }
  .split--6-6 > :first-child { grid-column: 1 / span 6; }
  .split--6-6 > :last-child { grid-column: 7 / -1; }
  .split--5-7 > :first-child { grid-column: 1 / span 5; }
  .split--5-7 > :last-child { grid-column: 7 / -1; }
  .split--4-8 > :first-child { grid-column: 1 / span 4; }
  .split--4-8 > :last-child { grid-column: 5 / -1; }
  .split--8-4 > :first-child { grid-column: 1 / span 8; }
  .split--8-4 > :last-child { grid-column: 10 / -1; }
}
/* Einzelne Spalte im 12er-Raster (Liste ohne Foto daneben) */
.col-8 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.col-8 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  .col-8 > * { grid-column: 1 / span 8; }
}

.split--center { align-items: center; }
.split--end { align-items: end; }
/* Textspalte neben einem hohen Baustein (z. B. Datensatz): der letzte Absatz
   sitzt unten, damit links keine große leere Fläche stehen bleibt. */
@media (min-width: 900px) {
  .split--fill { align-items: stretch; }
  .split--fill > :first-child { display: flex; flex-direction: column; }
  .split--fill > :first-child > :last-child { margin-top: auto; padding-top: var(--space-6); }
  .split--fill > :last-child { align-self: start; }
}

/* Gleichmäßige Spalten, responsiv */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--gap);
}
@media (min-width: 700px) {
  .cols--2, .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Vertikaler Rhythmus */
.stack > * + * { margin-top: var(--stack, var(--space-5)); }
.stack--sm { --stack: var(--space-3); }
.stack--lg { --stack: var(--space-6); }


/* ==========================================================================
   5. Typo-Bausteine
   ========================================================================== */

/* Markenmarker: schräger Balken aus dem grünen Arm des Logos */
.marker {
  display: inline-block;
  flex: none;
  width: 4px;
  height: 0.8em;
  margin-right: 0.65em;
  background: var(--c-accent);
  transform: skewX(-34deg);
  vertical-align: -0.05em;
}

/* Eyebrow: kurze Einordnung über einer Headline, Marker automatisch */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 550;
  letter-spacing: -0.003em;
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 4px;
  height: 12px;
  margin-left: 3px;
  background: var(--c-accent);
  transform: skewX(-34deg) translateY(1px);
}
.eyebrow--plain::before { display: none; }

/* Label: kleine Versalien, 12 px */
.label {
  display: block;
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.label--ink { color: var(--c-heading); }
.label--accent { color: var(--c-accent-text); }

/* Einleitende Texte */
.lead {
  color: var(--c-heading);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.lead--muted { color: var(--c-text); font-weight: 400; }
.text { color: var(--c-text); }
.text-muted { color: var(--c-muted); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.measure { max-width: 65ch; }
.measure-sm { max-width: 44ch; }

/* Link mit Pfeil (Tap-Fläche ≥ 44 px über Pseudo-Element) */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--c-accent);
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.2s;
}
.link-arrow::after {
  content: "";
  position: absolute;
  inset: -12px -6px -10px;
}
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover { border-color: var(--c-heading); }
.link-arrow:hover .icon { transform: translateX(3px); }
/* Mobil ≥ 44 px hoch: Der Platz wächst nach oben, damit der Unterstrich am
   Text bleibt; der negative Außenabstand hält den vertikalen Rhythmus. */
@media (max-width: 699.98px) {
  .link-arrow { padding-top: 18px; margin-top: -14px; }
  .steps__entry .link-arrow { margin-top: 6px; }
}

/* Fließtext-Link */
.link {
  color: var(--c-heading);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.link:hover { text-decoration-color: currentColor; }

/* Statement / Kernbotschaft: großer typografischer Satz */
.statement { max-width: 1000px; }
.statement__label { margin-bottom: var(--space-4); }
.statement__text {
  color: var(--c-heading);
  font-size: var(--fs-statement);
  font-weight: 620;
  letter-spacing: -0.032em;
  line-height: 1.12;
  text-wrap: balance;
  max-width: 20em;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.statement__text span { display: block; }
.statement__text .is-quiet { color: var(--c-muted); }
.statement--wide { max-width: none; }
.statement--wide .statement__text { max-width: 22em; }   /* Zeilenlänge auf Displaygröße begrenzen */
.statement--rule { padding-top: var(--space-6); border-top: 1px solid var(--c-rule); }

/* Kurzer Abschluss-Satz mit Link (z. B. „Genau hier unterstützt VORLIO.“) */
.close-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-rule);
}
.close-line__text {
  color: var(--c-heading);
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.15;
  hyphens: manual;
  -webkit-hyphens: manual;
}


/* ==========================================================================
   6. Buttons und Icons
   ========================================================================== */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 14px; height: 14px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: inherit;
  font-size: 0.96875rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn .icon { transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* Der einzige gefüllte CTA-Typ: Erstgespräch / Anfrage senden */
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-hover); }

/* Kontur (Leistungs-Buttons, sekundäre Aktionen) */
.btn--secondary { border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }

/* Auf Navy */
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #E3E8EE; }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.46); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.875rem; }
.btn--block { width: 100%; justify-content: space-between; }

.btn[disabled],
.btn[aria-disabled="true"] { cursor: default; opacity: 0.7; }

/* Ladezustand (Formular) */
.btn.is-loading { cursor: progress; }
.btn.is-loading .icon { display: none; }
.btn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 599.98px) {
  .btn-row > .btn,
  .media-row__body > .btn { width: 100%; justify-content: space-between; }
}


/* ==========================================================================
   7. Header und Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.is-scrolled,
.menu-open .site-header { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}
.brand {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 44px;
}
.brand img { width: auto; height: 24px; }

.site-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.3vw, 34px);
}
.nav-list a {
  position: relative;
  display: block;
  padding: 12px 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1.5px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--navy); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

/* Zweite Zeile im Navigationspanel: deutsche Erklärung zum Bereichsnamen */
.nav-link__text { display: inline; }
.nav-link__desc { display: none; }
/* Telefonnummer im Panel (sobald eine vorhanden ist) */
.nav-panel-tel {
  display: inline-block;
  padding: 11px 0;
  color: var(--navy);
  font-weight: 650;
  text-decoration: none;
}

.nav-panel-foot { display: none; }

.header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--navy);
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle-bars span:first-child { top: 0; }
.nav-toggle-bars span:last-child { top: 8.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Schließen im Navigationspanel: benannter Knopf, damit er nicht wie ein zweites
   Umschalt-Kreuz wirkt. Er funktioniert unabhängig davon, wo der Header steht. */
.nav-panel-close {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 auto 8px 0;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-panel-close:hover { color: var(--navy); }
.nav-panel-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Etwas gedrängter, solange die Navigation knapp in eine Zeile passt */
@media (min-width: 1000px) and (max-width: 1099.98px) {
  .header-inner { gap: 24px; }
  .nav-list { gap: 22px; }
  .nav-list a { font-size: 0.90625rem; }
}

@media (max-width: 999.98px) {
  :root { --header-h: 68px; }
  .brand img { height: 21px; }
  .header-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .js .nav-panel-close { display: inline-flex; }

  .js .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 8px var(--pad) max(28px, env(safe-area-inset-bottom));
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
  }
  .js .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .nav-list a {
    display: flex;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font-size: 1.5rem;
    font-weight: 620;
    letter-spacing: -0.025em;
  }
  .js .nav-list a::after { display: none; }
  .js .nav-list a[aria-current="page"]::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 5px;
    height: 18px;
    margin: 0 16px 0 3px;
    background: var(--sage);
    transform: skewX(-34deg);
  }
  .js .nav-link__text { display: block; }
  .js .nav-link__name { display: block; }
  .js .nav-link__desc {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.35;
  }
  .js .nav-panel-foot {
    display: block;
    margin-top: auto;
    padding-top: 32px;
  }
  .nav-panel-contact {
    margin-top: 20px;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .nav-panel-contact a {
    display: inline-block;
    padding: 11px 0;
    color: var(--navy);
    font-weight: 650;
    text-decoration: none;
  }

  /* Ohne JavaScript: Navigation als einfache Linkzeile. Der Header wird dabei
     dreizeilig – er darf dann nicht kleben, sonst frisst er ein Viertel des
     Bildschirms und Sprungmarken landen darunter. */
  html:not(.js) .site-header { position: static; }
  html:not(.js) { scroll-padding-top: 24px; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { order: 3; width: 100%; margin: 0; }
  html:not(.js) .nav-list { flex-wrap: wrap; gap: 0 18px; }
}
@media (max-width: 359.98px) {
  .header-cta { display: none; }
}
/* sehr schmale Telefone: Headlines kleiner, und als letzte Rettung darf der
   Browser trennen – lieber eine Trennung als waagerechtes Scrollen. */
@media (max-width: 389.98px) {
  :root { --fs-h1: 2rem; }
}
@media (max-width: 399.98px) {
  :root { --fs-h2: 1.625rem; }
  h1, h2, h3,
  .task-list__text,
  .close-line__text { hyphens: auto; -webkit-hyphens: auto; }
}

/* Geöffnetes Menü: Seite steht still. Der Header muss dabei fixiert werden –
   ohne scrollbares Wurzelelement greift „position: sticky“ nicht mehr und der
   Header (mit dem Schließen-Knopf) würde an seiner statischen Stelle am
   Seitenanfang bleiben. */
html.menu-open { overflow: hidden; }
html.menu-open body { overflow: hidden; }
html.menu-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}


/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer { font-size: var(--fs-small); }

.footer-top {
  row-gap: 40px;
  padding-block: clamp(56px, 6vw, 80px) clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-dark);
}
.footer-brand { grid-column: 1 / span 4; }
.footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
/* Wortmarke ohne Unterzeile: Die Unterzeile steht als HTML darunter und bleibt
   damit auch bei 1× lesbar (im Logo-Lockup wäre sie hier ~2,5 px hoch). */
.footer-logo img { width: auto; height: 40px; }
.footer-tagline {
  margin-top: 10px;
  max-width: 248px;
  color: var(--on-dark-2);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}
.footer-claim {
  margin-top: 20px;
  max-width: 28em;
  color: var(--on-dark-3);
  line-height: 1.6;
}
.footer-col--1 { grid-column: 6 / span 2; }
.footer-col--2 { grid-column: 8 / span 2; }
.footer-col--3 { grid-column: 10 / span 3; }
.footer-head {
  margin-bottom: 10px;
  color: var(--on-dark);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.footer-col li + li { margin-top: 2px; }
.site-footer a { text-decoration: none; transition: color 0.2s; }
.footer-col ul a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--on-dark-2);
}
/* Leistungen: Bereichsname mit kurzer deutscher Erklärung */
.footer-col--1 ul a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding-block: 5px;
}
.footer-link__name { color: inherit; }
.footer-link__desc {
  color: var(--on-dark-3);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
}
.footer-col--1 ul a:hover .footer-link__desc { color: var(--on-dark-2); }
.footer-col ul a:hover,
.footer-legal a:hover,
.footer-address a:hover,
.to-top:hover { color: #fff; }
.footer-address {
  color: var(--on-dark-3);
  line-height: 1.75;
}
.footer-address a {
  position: relative;
  display: inline-block;
  color: var(--on-dark-2);
  text-decoration: underline;
  text-decoration-color: var(--sage-on-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.footer-address a:hover { text-decoration-color: currentColor; }
.footer-address a::after { content: ""; position: absolute; inset: -10px -4px; }
.footer-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--sage-on-dark);
  color: var(--on-dark) !important;
  font-weight: 650;
  white-space: nowrap;
}
.footer-cta::after { content: ""; position: absolute; inset: -12px -6px -10px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  padding-block: 16px 24px;
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-3);
  font-size: 0.875rem;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { min-height: 44px; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: auto;
  color: var(--on-dark-2);
}

@media (max-width: 1099.98px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--1 { grid-column: 1 / span 4; }
  .footer-col--2 { grid-column: 5 / span 4; }
  .footer-col--3 { grid-column: 9 / span 4; }
}
@media (max-width: 699.98px) {
  .footer-col--1 { grid-column: 1 / span 6; }
  .footer-col--2 { grid-column: 7 / span 6; }
  .footer-col--3 { grid-column: 1 / -1; }
  .footer-col ul a { min-height: 44px; }
  .footer-col li + li { margin-top: 6px; }
  .footer-bottom { justify-content: space-between; }
  .to-top { display: none; }
  /* lange Rechtstexte: der Weg nach oben muss auch mobil erreichbar bleiben */
  .page-legal .to-top { display: inline-flex; width: 100%; margin-left: 0; justify-content: flex-start; }
  /* direkt nach dem CTA-Band braucht der Footer oben weniger Luft */
  .cta-band + .site-footer .footer-top { padding-top: 32px; }
}


/* ==========================================================================
   9. Komponenten
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Sektionslabel und Sektionskopf
   -------------------------------------------------------------------------- */
/* Sektionslabel: Haarlinie + (Nummer) + Name.
   Pro Seite entweder alle Sektionen nummeriert oder keine. */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(36px, 4.4vw, 64px);
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  color: var(--c-heading);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  line-height: 1.3;
  text-transform: uppercase;
}
.section-label__no {
  min-width: 2ch;
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
}
.section-label__name { color: var(--c-heading); }
.section-label__aside {
  margin-left: auto;
  color: var(--c-muted);
}

/* Sektionskopf: Headline links, Einleitung rechts (unten bündig) */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-5);
  align-items: end;
  margin-bottom: var(--space-9);
}
.section-head > * { grid-column: 1 / -1; }
.section-head__title { max-width: 18em; }
.section-head__text { color: var(--c-text); max-width: 38em; }
.section-head__text > * + * { margin-top: var(--space-4); }
.section-head--flush { margin-bottom: 0; }
/* Variante: Label, Headline und Einleitung oben bündig – nötig, sobald die
   rechte Spalte deutlich höher ist als die Headline (sonst rutscht die
   Headline weit unter ihr Label). */
.section-head--top { align-items: start; }
@media (min-width: 1100px) {
  .section-head__title { grid-column: 1 / span 7; }
  .section-head__text { grid-column: 9 / -1; }
  .section-head--wide .section-head__title { grid-column: 1 / span 8; }
  .section-head--wide .section-head__text { grid-column: 9 / -1; }
}
/* Variante: Einleitung unter der Headline */
.section-head--stack .section-head__title,
.section-head--stack .section-head__text { grid-column: 1 / span 8; }
@media (max-width: 899.98px) {
  .section-head--stack .section-head__title,
  .section-head--stack .section-head__text { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   9.2 Seiten-Hero (Unterseiten) und Brotkrumen
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin-bottom: clamp(28px, 3vw, 44px);
  font-size: 0.875rem;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--line-strong);
}
.breadcrumb a {
  display: inline-block;
  padding: 11px 10px 11px 2px;    /* Tapfläche ≥ 44 × 44 px */
  margin-left: -2px;
  color: var(--ink);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage); }
.breadcrumb [aria-current="page"] { color: var(--muted); }

.page-hero {
  padding-top: clamp(20px, 3vw, 44px);
  padding-bottom: var(--section-y);
  overflow-x: clip;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-7);
  align-items: center;
}
.page-hero__copy { grid-column: 1 / span 7; padding-block: var(--space-5); }
.page-hero__copy .eyebrow { margin-bottom: clamp(20px, 2.2vw, 32px); }
.page-hero__title { max-width: 13em; }
/* 900–1100 px: die Textspalte ist schmal, die H1 darf hier nicht zu groß sein
   (sonst bricht „Geschäftskunden“ mitten im Wort). Das CTA-Band zieht mit,
   damit der Abschluss nie lauter ist als der Seitentitel. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .page-hero__title { font-size: clamp(2rem, 1rem + 2.6vw, 2.75rem); }
}
.page-hero__lead {
  margin-top: clamp(20px, 2.2vw, 32px);
  max-width: 34em;
  color: var(--c-heading);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.page-hero__text {
  margin-top: var(--space-4);
  max-width: 36em;
  color: var(--ink);
}
.page-hero__copy .btn-row { margin-top: clamp(28px, 3vw, 40px); }
/* niedrige Fenster: der erste Button soll über dem Falz bleiben */
@media (max-height: 700px) and (max-width: 899.98px) {
  .page-hero { padding-top: 10px; }
  .page-hero__grid { row-gap: var(--space-5); }
  .page-hero__copy { padding-block: 0; }
  .breadcrumb { margin-bottom: 10px; }
  .page-hero__title { font-size: clamp(1.75rem, 7.2vw, 2.125rem); }
  .page-hero__lead { margin-top: 14px; font-size: 1.0625rem; }
  .page-hero__text { margin-top: 10px; font-size: 1rem; }
  .page-hero__copy .btn-row { margin-top: 18px; }
  .page-hero__copy .eyebrow { margin-bottom: 12px; }
}
.page-hero__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  max-width: 36em;
  color: var(--muted);
  font-size: var(--fs-small);
}
/* Oberkante auf der Zeile des Eyebrows, nicht 24 px darueber */
.page-hero__media {
  position: relative;
  grid-column: 9 / -1;
  align-self: stretch;
  margin-block: calc(var(--space-5) + 3px) var(--space-5);
  min-height: 460px;
  margin-right: calc(-1 * var(--side));
  background: var(--photo-bg);
  overflow: hidden;
}
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Querformat-Foto statt Hochformat */
.page-hero--landscape .page-hero__copy { grid-column: 1 / span 6; }
.page-hero--landscape .page-hero__media { grid-column: 7 / -1; align-self: center; min-height: 0; aspect-ratio: 16 / 11; }

/* Ohne Foto (Kontakt, Rechtliches) */
.page-hero--plain { padding-bottom: clamp(48px, 6vw, 88px); }
.page-hero--plain .page-hero__copy { grid-column: 1 / span 8; }
.page-hero--plain .page-hero__title { max-width: 16em; }
.page-hero__aside { grid-column: 10 / -1; align-self: end; }
.page-hero--rule { border-bottom: 1px solid var(--line); margin-bottom: 0; }
/* Randhinweis statt Tabelle (z. B. „Lieber telefonisch?“ mit Link) */
.page-hero__aside--note { padding-top: var(--space-4); border-top: 1px solid var(--c-rule); }
.page-hero__aside--note .aside-title { padding-bottom: 8px; }
.page-hero__aside--note .aside-text { margin: 0 0 20px; }

@media (max-width: 1099.98px) {
  .page-hero__copy,
  .page-hero--landscape .page-hero__copy { grid-column: 1 / span 7; }
  .page-hero__media,
  .page-hero--landscape .page-hero__media { grid-column: 8 / -1; align-self: stretch; aspect-ratio: auto; min-height: 420px; }
  .page-hero--plain .page-hero__copy { grid-column: 1 / -1; }
  .page-hero__aside { grid-column: 1 / span 8; }
  /* unter dem Lead: leichte Linie, begrenzte Breite */
  .page-hero__aside--note { max-width: 36em; border-top-color: var(--c-line); }
}
@media (max-width: 899.98px) {
  .page-hero__grid { row-gap: var(--space-6); }
  .page-hero__copy,
  .page-hero--landscape .page-hero__copy,
  .page-hero__aside { grid-column: 1 / -1; }
  .page-hero__copy { padding-block: 0; }
  .page-hero__media,
  .page-hero--landscape .page-hero__media {
    grid-column: 1 / -1;
    min-height: 0;
    margin-inline: calc(-1 * var(--side));
    aspect-ratio: 4 / 3;
  }
}


/* --------------------------------------------------------------------------
   9.3 Fotos und Bildunterschriften
   -------------------------------------------------------------------------- */
/* <picture> ist nur eine Huelle fuer die Quellen – es darf im Layout nicht
   zwischen Rahmen und Bild stehen, sonst greifen height:100% und object-fit nicht. */
picture { display: contents; }

figure img,
img.photo { filter: var(--photo-filter); }

.figure { margin: 0; }
.figure__frame {
  position: relative;
  background: var(--photo-bg);
  overflow: hidden;
}
.figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure--4x5 .figure__frame { aspect-ratio: 4 / 5; }
.figure--3x2 .figure__frame { aspect-ratio: 3 / 2; }
.figure--16x9 .figure__frame { aspect-ratio: 16 / 9; }
.figure--21x9 .figure__frame { aspect-ratio: 21 / 9; }
.figure--1x1 .figure__frame { aspect-ratio: 1 / 1; }
/* Mobil (unter 900 px) flacher und begrenzt breit, z. B. ein 4:5-Foto unter einer Liste */
@media (max-width: 899.98px) {
  .figure--m-4x3,
  .figure--m-1x1 { max-width: 520px; }
  .figure--m-4x3 .figure__frame { aspect-ratio: 4 / 3; }
  .figure--m-1x1 .figure__frame { aspect-ratio: 1 / 1; }
}

.figure__caption,
.figure > figcaption {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 12px;
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.figure__caption::before,
.figure > figcaption::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--c-line-strong);
  transform: translateY(-0.3em);
}

/* Bildausschnitte (Fokuspunkte laut Foto-Manifest) */
.focus-hero { object-position: 50% 60%; }
.focus-telefonat { object-position: 36% 50%; }
.focus-handwerk { object-position: 55% 55%; }
.focus-industrie { object-position: 56% 50%; }
.focus-recruiting { object-position: 58% 40%; }
.focus-besprechung { object-position: 70% 50%; }   /* Laptop-Logo oben links aus dem Bild */
.focus-buero { object-position: 85% 70%; }         /* Flasche links, Notausgangsschild rechts oben aus dem Bild */
.focus-planung { object-position: 50% 55%; }
.focus-telefon-mann { object-position: 50% 45%; }
.focus-werkstatt { object-position: 55% 50%; }
.focus-gespraech-zwei { object-position: 38% 50%; }
.focus-freiburg { object-position: 50% 62%; }
.focus-region { object-position: 50% 78%; }
.focus-portrait { object-position: 50% 32%; }

/* Seiten-Hero mobil (4:3, volle Breite): störende Details aus dem Ausschnitt nehmen.
   Gleiche Technik wie #operations auf der Startseite (Abschnitt 10). */
@media (max-width: 899.98px) {
  .page-hero__media .focus-besprechung {   /* Laptop-Logo oben links */
    object-position: 100% 50%;
    transform: scale(1.22);
    transform-origin: 100% 72%;
  }
  .page-hero__media .focus-buero {         /* Flasche links, dunkler Bodenstreifen */
    transform: scale(1.28);
    transform-origin: 100% 40%;
  }
}


/* --------------------------------------------------------------------------
   9.4 Haarlinienlisten, Gruppen, Kicker, Claim
   -------------------------------------------------------------------------- */
/* Haarlinienliste: ruhige Liste ohne Aufzählungszeichen */
.hairlist { border-bottom: 1px solid var(--c-line); }
.hairlist > li {
  padding: 11px 0 12px;
  border-top: 1px solid var(--c-line);
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.45;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.hairlist__note {
  display: block;
  margin-top: 2px;
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* zweispaltig (ab 600 px) */
@media (min-width: 600px) {
  .hairlist--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    border-bottom: 0;
  }
  .hairlist--2col > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
}
/* größer (z. B. Haltung) */
.hairlist--lg > li {
  padding: 16px 0 17px;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* mit Markenmarker (sparsam: Orte, kurze Listen) */
.hairlist--marked > li { display: flex; align-items: baseline; }
.hairlist--marked > li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 10px;
  margin: 0 14px 0 3px;
  background: var(--c-accent);
  transform: skewX(-34deg);
}
/* ruhiger (normale Schrift, Graphite) */
.hairlist--plain > li { color: var(--c-text); font-weight: 400; }
/* Schmale Bildschirme: Listen aus ein bis drei Wörtern zweispaltig, damit aus
   17 Branchen keine 17 fast leeren Zeilen werden. */
@media (min-width: 360px) and (max-width: 699.98px) {
  .industries .hairlist,
  .region__text .hairlist,
  .hairlist--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    border-bottom: 0;
  }
  .industries .hairlist > li:nth-last-child(-n+2),
  .region__text .hairlist > li:nth-last-child(-n+2),
  .hairlist--2col > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  /* zweispaltig etwas dichter, sonst wird die Seite auf dem Telefon sehr lang */
  .industries .hairlist > li,
  .region__text .hairlist > li,
  .hairlist--2col > li { padding: 9px 0 10px; font-size: 0.9375rem; }
  /* Lange Komposita in schmalen Spalten mit Trennstrich umbrechen, nicht
     irgendwo mitten im Wort (lang="de" liefert die Trennstellen). */
  .industries .hairlist > li,
  .region__text .hairlist > li,
  .hairlist--2col > li {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: normal;
  }
  /* lange Ortsnamen duerfen in der schmalen Spalte trennen */
  .region__text .hairlist > li { hyphens: auto; -webkit-hyphens: auto; }
}

/* Gruppen: 2–4 Spalten mit Gruppentitel und Haarlinienliste */
.groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--gap);
}
@media (min-width: 700px) {
  .groups,
  .groups--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .groups--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Titel und Listen stehen spaltenübergreifend auf einer Linie */
@supports (grid-template-rows: subgrid) {
  .group {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .group > * { align-self: start; }
}
.group__head { margin-bottom: 14px; }
.group__no {
  display: block;
  margin-bottom: 6px;
  color: var(--c-accent-text);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.group__title {
  font-size: var(--fs-h4);
  letter-spacing: -0.018em;
  line-height: 1.25;
}
.group__text {
  margin-top: 8px;
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Kicker: Einheit + Bereich */
.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 20px;
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.kicker__name { color: var(--c-heading); }
/* ein Trennzeichen auf der ganzen Seite: Mittelpunkt mit 0,5 em Abstand */
.kicker { column-gap: 0; }
.kicker__sep { margin-inline: 0.5em; }
.kicker__sep::after { content: "·"; }

@media (max-width: 599.98px) {
  .kicker { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kicker__sep { display: none; }
}

/* Claim: Ziel / Kernbotschaft innerhalb eines Blocks */
.claim { margin-top: var(--space-6); }
.claim__label { margin-bottom: 8px; }
.claim__text {
  max-width: 26em;
  color: var(--c-heading);
  font-size: clamp(1.1875rem, 1rem + 0.45vw, 1.4375rem);
  font-weight: 620;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}


/* --------------------------------------------------------------------------
   9.5 Medienzeile (Foto + Text, abwechselnd)
   -------------------------------------------------------------------------- */
.media-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-6);
  align-items: start;
}
.media-row + .media-row {
  margin-top: clamp(40px, 5.5vw, 80px);
  padding-top: clamp(40px, 5.5vw, 80px);
  border-top: 1px solid var(--c-line);
}
.media-row__media {
  grid-column: 1 / span 5;
  grid-row: 1;
  aspect-ratio: 4 / 5;
  background: var(--photo-bg);
  overflow: hidden;
}
.media-row__media img { width: 100%; height: 100%; object-fit: cover; }
.media-row__body { grid-column: 7 / -1; grid-row: 1; }
.media-row__body > .btn,
.media-row__body > .btn-row,
.media-row__body > .link-arrow { margin-top: var(--space-6); }
.media-row__title { max-width: 18em; }
.media-row__text {
  margin-top: 20px;
  max-width: 36em;
  color: var(--c-text);
}
.media-row__text + .media-row__text { margin-top: var(--space-4); }
.media-row__body > .hairlist { margin-top: var(--space-6); }

.media-row--flip .media-row__media { grid-column: 8 / -1; }
.media-row--flip .media-row__body { grid-column: 1 / span 6; }
.media-row--center { align-items: center; }
/* breites Querformat-Foto */
.media-row--wide .media-row__media { grid-column: 1 / span 6; aspect-ratio: 3 / 2; }
.media-row--wide.media-row--flip .media-row__media { grid-column: 7 / -1; }
.media-row--wide.media-row--flip .media-row__body { grid-column: 1 / span 5; }

/* Medienzeile mit Bildunterschrift: Seitenverhältnis am Rahmen */
.media-row > figure.media-row__media.figure { aspect-ratio: auto; background: none; overflow: visible; }
.media-row__media.figure .figure__frame { aspect-ratio: 4 / 5; }
.media-row--wide .media-row__media.figure .figure__frame { aspect-ratio: 3 / 2; }

@media (max-width: 1099.98px) {
  .media-row--wide .media-row__media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
  .media-row--wide .media-row__media.figure .figure__frame { aspect-ratio: 4 / 5; }
  .media-row--wide.media-row--flip .media-row__media { grid-column: 8 / -1; }
  .media-row--wide.media-row--flip .media-row__body { grid-column: 1 / span 6; }
}
@media (max-width: 899.98px) {
  .media-row { row-gap: 28px; }
  .media-row__media,
  .media-row--flip .media-row__media,
  .media-row--wide .media-row__media,
  .media-row--wide.media-row--flip .media-row__media {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }
  .media-row__body,
  .media-row--flip .media-row__body,
  .media-row--wide.media-row--flip .media-row__body { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 899.98px) {
  .media-row .media-row__media.figure .figure__frame { aspect-ratio: 3 / 2; }
}
@media (max-width: 599.98px) {
  .media-row__media,
  .media-row--flip .media-row__media,
  .media-row .media-row__media.figure .figure__frame { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   9.6 Nummerierte Aufgabenliste (große Zeilen mit Bereichs-Tag)
   -------------------------------------------------------------------------- */
.task-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 16px 0 17px;
  border-top: 1px solid var(--c-line);
}
.task-list li:last-child { border-bottom: 1px solid var(--c-line); }
.task-list__text {
  color: var(--c-heading);
  font-size: clamp(1.4375rem, 0.95rem + 1.5vw, 2.375rem);
  font-weight: 560;
  letter-spacing: -0.028em;
  line-height: 1.15;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.task-list__tag {
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
/* schmal: das Bereichs-Tag unter die Zeile, sonst drängt es lange Einträge */
@media (max-width: 1099.98px) {
  .task-list li { grid-template-columns: minmax(0, 1fr); }
  .task-list__tag { display: block; margin-top: 4px; font-size: 0.75rem; }
}
@media (max-width: 599.98px) {
  .task-list li { padding: 14px 0 15px; }
}


/* --------------------------------------------------------------------------
   9.7 Ablauf (Flow): 3–5 Stufen, letzte Stufe = Ergebnis
   Hell standardmäßig, in .section--dark automatisch dunkel.
   Ist der Ablauf selbst schmaler als 640 px (mobil oder in einer schmalen
   Spalte), stehen die Stufen senkrecht mit Linie links.
   -------------------------------------------------------------------------- */
.flow { container: flow / inline-size; }
.flows > .flow + .flow { margin-top: clamp(40px, 4.4vw, 64px); }

.flow__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 18px;
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.flow__name { color: var(--c-heading); }
.flow__unit { color: var(--c-muted); }

.flow__steps {
  --flow-word: clamp(1.5rem, 0.85rem + 1.2vw, 2.25rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.flow__step {
  position: relative;
  padding: 16px 28px 0 0;
  border-top: 1px solid var(--c-line-strong);
}
/* Pfeilspitze am Ende jeder Linie */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 6px;
  height: 9px;
  background: var(--c-line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flow__step + .flow__step { margin-left: 6px; }
.flow__step:last-child { padding-right: 0; }
.flow__no {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 1.35em;
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.flow__word {
  display: block;
  margin-top: clamp(14px, 1.6vw, 24px);
  color: var(--c-heading);
  font-size: var(--flow-word);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.flow__result {
  color: var(--c-accent-text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.flow__step--result { border-top: 2px solid var(--c-rule); padding-top: 15px; margin-top: -0.5px; }

/* Ohne &shy; muss das längste Ergebniswort („Geschäftschancen“) in eine Spalte
   passen; darum in den mittleren Breiten kleiner. */
@media (max-width: 1399.98px) {
  .flow__steps { --flow-word: clamp(1.0625rem, 0.15rem + 1.5vw, 1.875rem); }
}
@media (max-width: 899.98px) {
  .flow__steps { --flow-word: clamp(1.375rem, 1rem + 1.6vw, 1.75rem); }
  .flow__step { padding-right: 16px; }
}
/* Schmal: senkrecht mit Linie links */
@container flow (max-width: 899.98px) {
  .flow__steps {
    display: block;
    margin-left: 4px;
  }
  .flow__step,
  .flow__step + .flow__step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: baseline;
    margin: 0;
    padding: 10px 0 18px 20px;
    border-top: 0;
    border-left: 1px solid var(--c-line-strong);
  }
  .flow__step:last-child { padding-bottom: 4px; }
  .flow__step:not(:last-child)::after { display: none; }
  .flow__step::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 19px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-bg);
    border: 1px solid var(--c-line-strong);
  }
  .flow__step--result { border-left: 2px solid var(--c-rule); padding-left: 19px; }
  .flow__step--result::before { left: -5px; background: var(--c-rule); border-color: var(--c-rule); }
  .flow__no { display: block; }
  .flow__word { margin-top: 0; font-size: 1.5rem; }
  .flow__result { display: block; grid-column: 2; }
  .flow__step--result .flow__no { display: contents; }
  .flow__step--result .flow__result { grid-row: 2; margin-top: 4px; }
}

/* Fallback für Browser ohne Container-Queries (z. B. Safari 15.0–15.3):
   Unter 900 px steht der Ablauf senkrecht, sonst entstünden vier 87-px-Spalten
   und damit waagerechtes Scrollen. */
@supports not (container-type: inline-size) {
  @media (max-width: 899.98px) {
    .flow__steps { display: block; margin-left: 4px; }
    .flow__step,
    .flow__step + .flow__step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: baseline;
      margin: 0;
      padding: 10px 0 18px 20px;
      border-top: 0;
      border-left: 1px solid var(--c-line-strong);
    }
    .flow__step:last-child { padding-bottom: 4px; }
    .flow__step:not(:last-child)::after { display: none; }
    .flow__step::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 19px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--c-bg);
      border: 1px solid var(--c-line-strong);
    }
    .flow__step--result { border-left: 2px solid var(--c-rule); padding-left: 19px; }
    .flow__step--result::before { left: -5px; background: var(--c-rule); border-color: var(--c-rule); }
    .flow__no { display: block; }
    .flow__word { margin-top: 0; font-size: 1.5rem; }
    .flow__result { display: block; grid-column: 2; }
    .flow__step--result .flow__no { display: contents; }
    .flow__step--result .flow__result { grid-row: 2; margin-top: 4px; }
  }
}

/* Variante: Abläufe senkrecht neben Text (Über VORLIO).
   Einspaltig; nebeneinander bei 600–899 px und ab 1200 px. */
.flows--vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--gap);
}
.flows--vertical > .flow + .flow { margin-top: 0; }
/* Name und Einheit untereinander, damit nebeneinanderstehende Abläufe bündig beginnen */
.flows--vertical .flow__label { flex-direction: column; gap: 4px; }
@media (min-width: 600px) and (max-width: 899.98px), (min-width: 1200px) {
  .flows--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   9.8 Schritte-Raster (7 Schritte + „Der Einstieg“)
   Desktop 4 Spalten, Tablet 2 Spalten, mobil Liste.
   Andere Schrittzahl: --steps-rows-lg (4 Spalten) und --steps-rows-md
   (2 Spalten) inline setzen, z. B. 5 Schritte: style="--steps-rows-lg:2;--steps-rows-md:3".
   -------------------------------------------------------------------------- */
.steps__item,
.steps__entry {
  padding: 18px 0 26px;
  border-top: 1px solid var(--c-line-strong);
}
.steps__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
  align-content: start;
}
.steps__no {
  grid-row: 1 / span 2;
  color: var(--c-heading);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.steps__title {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.steps__text {
  margin-top: 6px;
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.55;
}
.steps__entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 2px solid var(--c-rule);
}
.steps__entry-label { color: var(--c-accent-text); }
.steps__entry-text {
  margin-top: 10px;
  max-width: 22ch;
  color: var(--c-heading);
  font-size: 1.25rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.3;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.steps__entry .link-arrow { margin-top: 20px; }

/* Sektionskopf direkt über dem Raster: etwas weniger Abstand */
.section-head:has(+ .steps) { margin-bottom: clamp(40px, 5vw, 80px); }

@media (min-width: 700px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--steps-rows-md, 4), auto);
    column-gap: var(--gap);
  }
  .steps__list {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .steps__entry {
    grid-column: -2 / -1;
    grid-row: -2 / -1;
  }
}
@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(var(--steps-rows-lg, 2), auto);
    row-gap: clamp(40px, 4vw, 64px);
  }
  .steps__item,
  .steps__entry { padding: 20px 0 0; }
  .steps__item { display: block; }
  .steps__no {
    display: block;
    font-size: clamp(3rem, 1.4rem + 2.3vw, 4.5rem);
    font-weight: 350;
    letter-spacing: -0.045em;
  }
  .steps__title { margin-top: clamp(28px, 3vw, 48px); }
  .steps__text { max-width: 26ch; margin-top: 8px; }
  .steps__entry-label { display: flex; align-items: flex-start; height: clamp(3rem, 1.4rem + 2.3vw, 4.5rem); padding-top: 6px; }
  .steps__entry-text { margin-top: clamp(28px, 3vw, 48px); }
  .steps__entry .link-arrow { margin-top: auto; }
}
/* Fallback ohne Subgrid: Einstieg unter der Liste */
@supports not (grid-template-columns: subgrid) {
  .steps { display: block; }
  .steps__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--gap); }
  .steps__entry { margin-top: var(--space-6); }
}


/* --------------------------------------------------------------------------
   9.9 Pipeline (9 Stufen, typografisch, ohne Zahlenwerte)
   -------------------------------------------------------------------------- */
.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: stage;
}
.pipeline__stage {
  position: relative;
  counter-increment: stage;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  padding: 12px 0 13px;
  border-top: 1px solid var(--c-line);
}
.pipeline__stage:last-child { border-bottom: 1px solid var(--c-line); }
.pipeline__stage::before {
  content: counter(stage, decimal-leading-zero);
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.pipeline__name {
  display: block;                 /* eigene Zeilenhöhe, bündig mit „Gewonnen / Verloren“ */
  color: var(--c-heading);
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.012em;
  line-height: 1.3;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.pipeline__desc {
  display: block;                 /* ab 700 px stehen die Stufen als Block */
  grid-column: 2;
  margin-top: 2px;
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
/* Endzustand: Gewonnen / Verloren */
.pipeline__stage--end { border-top: 2px solid var(--c-rule); }
/* „Gewonnen oder verloren“ ist ein Zustandspaar, keine Beschreibung:
   eine Zeile, ein Gewicht – wie die acht Stufen davor. */
.pipeline__outcomes {
  display: block;
  color: var(--c-heading);
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.012em;
  line-height: 1.3;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (min-width: 700px) {
  .pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--space-6);
  }
  .pipeline__stage,
  .pipeline__stage:last-child {
    display: block;
    padding: 14px 18px 0 0;
    border-bottom: 0;
    border-top-color: var(--c-line-strong);
  }
  .pipeline__stage::before { display: block; margin-bottom: 12px; }
  .pipeline__stage:not(:nth-child(3n)):not(:last-child)::after {
    content: "";
    position: absolute;
    top: -5px;
    right: calc(-1 * var(--gap));
    width: 6px;
    height: 9px;
    background: var(--c-line-strong);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pipeline__stage--end,
  .pipeline__stage--end:last-child { border-top: 2px solid var(--c-rule); padding-top: 13px; }
  .pipeline__desc { margin-top: 6px; }
}
@media (min-width: 1360px) {
  .pipeline {
    /* zehn Spuren: Die Endstufe „Gewonnen oder verloren“ bekommt zwei und
       bleibt damit wie die übrigen acht Stufen einzeilig. */
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: 0;
  }
  .pipeline__stage--end { grid-column: span 2; }
  .pipeline__outcomes { white-space: nowrap; }
  .pipeline__stage:not(:nth-child(3n)):not(:last-child)::after,
  .pipeline__stage:nth-child(3n):not(:last-child)::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 6px;
    width: 6px;
    height: 9px;
    background: var(--c-line-strong);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6.6 5 4.5.6 8.4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pipeline__stage { margin-right: 12px; padding-right: 8px; }
  .pipeline__stage:last-child { margin-right: 0; }
  .pipeline__name,
  .pipeline__outcomes { font-size: 0.9375rem; }
}


/* --------------------------------------------------------------------------
   9.10 Datensatz / Feldliste (Feldname + kurze Erläuterung, keine Beispieldaten)
   Ruhige Definitionsliste: links der Feldname, rechts in einem Satz, was dort
   steht. Unter 420 px Datensatzbreite stehen beide untereinander – ohne
   Container-Query-Unterstützung bleibt das die Vorgabe.
   -------------------------------------------------------------------------- */
.record {
  container-type: inline-size;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.record__title {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.record__meta { color: var(--muted); font-size: 0.875rem; }
.record__fields {
  display: block;
  padding: 4px 20px 16px;
}
/* Zwischenlabel für Feldgruppen:
   <p class="record__group label" id="…"> + <ul class="record__fields" aria-labelledby="…"> */
.record__group { padding: 18px 20px 0; }
/* Feldname links, kurze Erläuterung rechts. Schmal: untereinander. */
.record__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 20px;
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--line);
}
@container (min-width: 420px) {
  .record__field {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 20px;
  }
}
.record__field-name {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1.35;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.record__field-note {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
}
.record__foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}


/* --------------------------------------------------------------------------
   9.11 Grundsätze (dl) und Haltung
   -------------------------------------------------------------------------- */
.principles { border-bottom: 1px solid var(--c-line); }
.principles > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding: 22px 0 24px;
  border-top: 1px solid var(--c-line);
}
.principles dt {
  color: var(--c-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.25;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.principles dd { color: var(--c-text); }
@media (max-width: 599.98px) {
  .principles > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 18px 0 20px; }
}

/* Haltung: vier ruhige Sätze */
.stance .label { margin-bottom: 12px; }

/* Maximen: die Haltung groß als typografische Tabelle (Über VORLIO, Navy-Band).
   Begriff hervorgehoben, „statt …“ zurückgenommen. Ab 1100 px zweispaltig,
   700–1099 px als fließender Satz, mobil zweizeilig. */
.maxims { border-bottom: 1px solid var(--c-line); }
.maxims > li {
  padding: 18px 0 22px;
  border-top: 1px solid var(--c-line);
  color: var(--c-heading);
  font-size: var(--fs-h2);
  font-weight: 620;
  letter-spacing: -0.034em;
  line-height: 1.08;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.maxims > li:first-child { border-top-color: var(--c-line-strong); }
/* Ein Gewicht, eine Farbe – die Haarlinie trennt Begriff und Rest (Jury: keine
   grau abgesetzte Headline-Zeile). */
.maxims__key,
.maxims__rest { color: var(--c-heading); }
@media (max-width: 699.98px) {
  .maxims__key,
  .maxims__rest { display: block; }
}
@media (min-width: 1100px) {
  .maxims > li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
    padding: 26px 0 30px;
  }
  .maxims__key { grid-column: 1 / span 4; }
  .maxims__rest { grid-column: 5 / -1; }
}


/* --------------------------------------------------------------------------
   9.12 Fakt-Zeile, Branchen, Startregion
   -------------------------------------------------------------------------- */
/* Fakt-Zeile: Label + Wert, sachlich */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  padding: 14px 0 15px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.fact + .fact { border-top: 0; }
.fact__label { min-width: 11rem; }
.fact__value {
  color: var(--c-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Branchen: Randlabel + Gruppen */
.industries {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-6);
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
}
.industries__label { grid-column: 1 / -1; }
.industries .groups { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .industries__label { grid-column: 1 / span 3; }
  .industries .groups { grid-column: 4 / -1; }
}

/* Startregion: Text auf fester Fläche neben dem Foto */
.region {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-6);
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
}
.region__text { grid-column: 1 / -1; }
.region__title {
  margin-top: 18px;
  font-size: clamp(2.25rem, 1.1rem + 3vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.region__desc {
  margin-top: 16px;
  max-width: 34em;
  color: var(--c-text);
}
.region__text .hairlist { margin-top: var(--space-5); }
.region__media { grid-column: 1 / -1; }
.region__media .figure__frame { aspect-ratio: 16 / 9; }
/* Himmel knapp halten, damit das Foto nicht in den hellen Grund übergeht */
.region__media img {
  object-position: 50% 100%;
  transform: scale(1.32);
  transform-origin: 50% 100%;
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .region__text .hairlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: 0; }
  .region__text .hairlist > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
}
@media (min-width: 1100px) {
  .region__text { grid-column: 1 / span 4; }
  .region__media { grid-column: 6 / -1; padding-top: 6px; }
}

/* Variante: Kaiserstuhl als Panorama in Containerbreite (Über VORLIO),
   Ortsliste darunter. Wenig Himmel, mobil 16:9. */
.region-panorama .figure__frame { aspect-ratio: 21 / 9; }
.region-panorama img {
  object-position: 50% 100%;
  transform: scale(1.1);
  transform-origin: 50% 100%;
}
@media (max-width: 699.98px) {
  .region-panorama .figure__frame { aspect-ratio: 16 / 9; }
  .region-panorama img { transform: scale(1.38); }
}


/* --------------------------------------------------------------------------
   9.13 FAQ (details/summary, funktioniert ohne JavaScript)
   -------------------------------------------------------------------------- */
.faq { border-bottom: 1px solid var(--c-line); }
.faq__item { border-top: 1px solid var(--c-line); }
.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 18px 0;
  color: var(--c-heading);
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--c-accent-text); }
.faq__q:focus-visible { outline-offset: 4px; }
/* Plus/Minus aus zwei Linien */
.faq__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 2px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8.25px;
  width: 18px;
  height: 1.5px;
  background: var(--c-heading);
  transition: transform 0.25s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a {
  max-width: 65ch;
  padding: 0 48px 26px 0;
  color: var(--c-text);
}
.faq__a > * + * { margin-top: 12px; }
.faq__a ul { padding-left: 0; }
.faq__a li { position: relative; padding-left: 18px; }
.faq__a li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 1px;
  background: var(--c-muted);
}


/* --------------------------------------------------------------------------
   9.14 Querverweise (Weitere Leistungen)
   -------------------------------------------------------------------------- */
.crosslinks { padding-top: 16px; border-top: 1px solid var(--c-line); }
.crosslinks__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--gap);
  margin-top: 16px;
}
@media (min-width: 700px) {
  .crosslinks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crosslink {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 0 28px;
  border-top: 1px solid var(--c-rule);
}
@media (max-width: 699.98px) {
  .crosslink + .crosslink { border-top-color: var(--c-line-strong); }
}
.crosslink .kicker { margin-bottom: 14px; }
.crosslink__title {
  font-size: var(--fs-h3);
  max-width: 16em;
}
.crosslink__title a {
  text-decoration: none;
}
/* ganze Fläche klickbar */
.crosslink__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.crosslink__text {
  margin-top: 12px;
  max-width: 36em;
  color: var(--c-text);
}
.crosslink__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 650;
}
/* gleiche Optik wie .link-arrow: Unterstrich in Sage */
.crosslink__more > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--c-accent);
}
.crosslink:hover .crosslink__more > span { border-color: var(--c-heading); }
.crosslink__more .icon { transition: transform 0.25s var(--ease); }
.crosslink:hover .crosslink__more .icon { transform: translateX(3px); }
.crosslink:hover .crosslink__title a { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.crosslink:focus-within { outline: 2px solid var(--c-focus); outline-offset: 6px; }
.crosslink:focus-within a:focus-visible { outline: none; }


/* --------------------------------------------------------------------------
   9.15 CTA-Band, Randblöcke, Agenda und Kontakttabelle
   -------------------------------------------------------------------------- */
.cta-band { padding-block: clamp(88px, 10vw, 144px); }
.cta-band__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-8);
  align-items: start;
}
.cta-band__main { grid-column: 1 / span 7; }
.cta-band__title {
  font-size: var(--fs-h1);   /* nie groesser als die H1 der Seite */
  letter-spacing: -0.038em;
  line-height: 1.02;
}
/* 900–1100 px: die Seiten-H1 ist hier kleiner – der Abschluss zieht mit,
   damit er nie lauter ist als der Seitentitel. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .cta-band__title { font-size: clamp(2rem, 1rem + 2.6vw, 2.75rem); }
}
.cta-band__text {
  margin-top: 28px;
  max-width: 34em;
  color: var(--c-text);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cta-band__main .btn-row { margin-top: 40px; }
.cta-band__aside {
  grid-column: 9 / -1;
  padding-top: 8px;
}
.cta-band__aside > * + * { margin-top: var(--space-7); }

/* Randblock: kurzer Titel und optionaler Satz über Agenda oder Kontakttabelle
   (CTA-Band, Kontaktseite, Randhinweis im Seiten-Hero) */
.aside-title {
  padding-bottom: 12px;
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.aside-text {
  margin: -4px 0 14px;
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Nummerierte Kurzliste (Agenda) */
.agenda {
  counter-reset: agenda;
  border-bottom: 1px solid var(--c-line);
}
.agenda li {
  position: relative;
  padding: 12px 0 13px 36px;
  border-top: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.5;
  counter-increment: agenda;
}
/* optional: Kurztitel je Schritt, Erläuterung darunter */
.agenda__title {
  display: block;
  margin-bottom: 2px;
  color: var(--c-heading);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.agenda li::before {
  content: counter(agenda, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  color: var(--c-accent-text);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Kontakttabelle: Label | Wert */
.contact-table { border-bottom: 1px solid var(--c-line); }
.contact-table > div {
  display: grid;
  grid-template-columns: minmax(8.75rem, 5fr) minmax(0, 8fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 13px 0 14px;
  border-top: 1px solid var(--c-line);
}
.contact-table dt {
  color: var(--c-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.contact-table dd {
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 560;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.contact-table a {
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.contact-table a::after { content: ""; position: absolute; inset: -12px -4px; }
.contact-table a:hover { text-decoration-color: currentColor; }
/* kurze Erläuterung unter dem Wert */
.contact-table__note {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
  font-size: 0.875rem;
  font-weight: 450;
  line-height: 1.45;
}

@media (max-width: 1099.98px) {
  .cta-band__main { grid-column: 1 / span 10; }
  .cta-band__aside {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    padding-top: 0;
  }
  .cta-band__aside > * + * { margin-top: 0; }
}
@media (max-width: 699.98px) {
  .cta-band__main { grid-column: 1 / -1; }
  .cta-band__aside { display: block; }
  .cta-band__aside > * + * { margin-top: var(--space-7); }
}


/* --------------------------------------------------------------------------
   9.16 Formulare
   -------------------------------------------------------------------------- */
.form { position: relative; }
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px var(--gap);
}
.form__grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 600px) {
  .form__grid > .field--half { grid-column: span 1; }
}
.form__section + .form__section { margin-top: var(--space-6); }
.form__intro {
  margin-bottom: var(--space-5);
  color: var(--ink);
}
.form__required-note {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar.
   Nicht aus dem Bild schieben – Browser-Autofill füllt weit ausgelagerte
   Felder trotzdem. Eingeklappt auf 1 px, damit es aus dem Layout verschwindet. */
.form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field__label {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.35;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.field__req {
  margin-left: 2px;
  color: var(--sage-text);
  font-weight: 700;
}
.field__opt {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 450;
}
.field__hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.field__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: var(--muted); opacity: 1; }
.field__input:hover { border-color: var(--navy); }
.field__input:focus { outline: none; }
.field__input:focus-visible,
.field__input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
textarea.field__input {
  min-height: 160px;
  resize: vertical;
}
select.field__input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E1726' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* Fehlerzustand */
.field__error {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 8px;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.4;
}
.field__error::before {
  content: "";
  flex: none;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-0.3em);
}
.field.is-invalid .field__input {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}
.field.is-invalid .field__label { color: var(--error); }

/* Checkbox (Einwilligung, Chips) */
.check {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
}
.check__input,
.chip__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  background: var(--white) center / 14px 14px no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.check__input:hover,
.chip__input:hover { border-color: var(--navy); }
.check__input:checked,
.chip__input:checked {
  border-color: var(--navy);
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 5.6 10.2 11.5 3.8'/%3E%3C/svg%3E");
}
.check__input:focus-visible,
.chip__input:focus-visible {
  outline: 2px solid var(--sage-text);
  outline-offset: 2px;
}
.check a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-underline-offset: 3px;
}
.field.is-invalid .check__input { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

/* Chips: „Wobei dürfen wir unterstützen?“ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 0.96875rem;
  font-weight: 550;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--navy); }
/* Raster: gleich breite Chips (2 × 2), einspaltig, sobald ein Chip nicht mehr passt */
.chips--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 10px var(--gap);
}
@media (max-width: 479.98px) {
  .chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.chip__input { margin: 0; }
.chip:has(.chip__input:checked) {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  color: var(--navy);
}
.field.is-invalid .chip { border-color: var(--error); }

/* Formular-Panel: bewusste weiße Fläche */
.form-panel {
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-panel__head { margin-bottom: var(--space-6); }
.form-panel__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); }
.form-panel__text { margin-top: 10px; color: var(--ink); }
/* Langform, damit das background-image des Select-Pfeils erhalten bleibt */
.form-panel .field__input { background-color: var(--paper); }
.form-panel .field__input:focus { background-color: var(--white); }
.form-panel .chip,
.form-panel .check__input:not(:checked),
.form-panel .chip__input:not(:checked) { background-color: var(--paper); }

/* Abschluss: Hinweis + Button */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: var(--space-6);
}
.form__actions .form__required-note { order: 2; }
@media (max-width: 599.98px) {
  .form__actions .btn { width: 100%; justify-content: space-between; }
  .form__actions .form__required-note { order: 0; }
}

/* Formularweite Meldungen */
.form__status {
  margin-top: var(--space-6);
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  background: var(--white);
  color: var(--ink);
}
.form__status:focus { outline: none; }
.form__status-title {
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.form__status-text { margin-top: 6px; font-size: 1rem; }
.form__status-text + .form__status-text { margin-top: 8px; }
.form__status a {
  color: var(--navy);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-underline-offset: 3px;
}
.form__status.is-success { border-top-color: var(--sage); }
.form__status.is-error { border-top-color: var(--error); }
.form__status.is-error .form__status-title { color: var(--error); }
.form__status ul { margin-top: 8px; }
.form__status li { padding: 3px 0; font-size: 1rem; }
.form__status li a { font-weight: 550; }
.form.is-sent .form__body { display: none; }


/* --------------------------------------------------------------------------
   9.17 Rechtstexte, Platzhalter, Inhaltsverzeichnis, Linkliste
   -------------------------------------------------------------------------- */
.prose {
  max-width: 68ch;
  color: var(--ink);
}
.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: 2.2em;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.prose h3 {
  margin-top: 1.8em;
  font-size: 1.1875rem;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.prose h4 {
  margin-top: 1.5em;
  font-size: 1rem;
  letter-spacing: 0;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: 0.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul,
.prose ol { padding-left: 0; }
.prose ul > li,
.prose ol > li {
  position: relative;
  padding-left: 24px;
}
.prose li + li { margin-top: 0.4em; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--muted);
}
.prose ol { counter-reset: prose; }
.prose ol > li { counter-increment: prose; }
.prose ol > li::before {
  content: counter(prose) ".";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.prose a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.prose a:hover { text-decoration-color: currentColor; }
.prose address { line-height: 1.7; }
.prose .prose__meta {
  color: var(--muted);
  font-size: var(--fs-small);
}
.prose .prose__lead { font-size: var(--fs-lead); color: var(--navy); font-weight: 500; line-height: 1.5; }
.prose .prose__note {
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: var(--fs-small);
}
/* Abschnittsnummer über einer Zwischenüberschrift: <h2><span class="prose__no">01</span> Titel</h2> */
.prose__no {
  display: block;
  margin-bottom: 10px;
  color: var(--sage-text);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
/* Hervorgehobener Kasten, z. B. Widerspruchsrecht (Art. 21 Abs. 4 DSGVO) */
.prose .prose__box {
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  background: var(--white);
}
.prose h2 + .prose__box { margin-top: var(--space-5); }
.prose__box > * + * { margin-top: 0.9em; }
.prose__box > :first-child { margin-top: 0; }
.prose__box strong { color: var(--navy); }

/* Platzhalter: vor Veröffentlichung ersetzen */
.ph {
  padding: 0.05em 0.3em;
  border-radius: 2px;
  background: var(--placeholder-bg);
  color: var(--placeholder-ink);
  font-weight: 600;
  outline: 1px dashed #B08A2E;
  outline-offset: -1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Rechtstexte: Inhaltsverzeichnis links, Text rechts (Basis .split.split--4-8).
   Ab 1100 px 3 Spalten Verzeichnis, Spalte 4 bleibt als ruhiger Abstand frei. */
@media (min-width: 1100px) {
  .split--legal > :first-child { grid-column: 1 / span 3; }
  .split--legal > :last-child { grid-column: 5 / -1; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .split--legal > :first-child { grid-column: 1 / span 4; margin-right: var(--space-4); }
}

/* Inhaltsverzeichnis für lange Rechtstexte */
.toc { padding-top: 16px; border-top: 1px solid var(--navy); }
.toc .label { margin-bottom: 8px; }
.toc a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-small);
  text-decoration: none;
}
.toc a:hover,
.toc a[aria-current="location"] { color: var(--navy); text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.toc a[aria-current="location"] { text-decoration-thickness: 1.5px; }
@media (max-width: 1099.98px) {
  .toc a { padding-block: 10px; }   /* Tap-Ziele ≥ 44 px, solange es nicht seitlich steht */
}
@media (min-width: 1100px) {
  .toc--sticky { position: sticky; top: calc(var(--header-h) + 24px); }
}
/* nummeriert: <a><span class="toc__no">01</span><span>Titel</span></a> */
.toc--numbered a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
}
.toc__no {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}


/* Linkliste: ganze Zeile klickbar (404, Übersichten) */
.linklist {
  container-type: inline-size;
  border-bottom: 1px solid var(--c-line);
}
.linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line);
  color: var(--c-heading);
  font-size: 1.125rem;
  font-weight: 620;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-decoration: none;
}
.linklist__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.linklist__desc {
  color: var(--c-muted);
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0;
}
.linklist .icon { transition: transform 0.25s var(--ease); }
.linklist a:hover .linklist__name { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.linklist a:hover .icon { transform: translateX(3px); }
/* optionales Handlungswort vor dem Pfeil (nur, wenn die Liste mindestens 560 px breit ist) */
.linklist__more {
  flex: none;
  margin-left: auto;
  color: var(--c-heading);
  font-size: 0.9375rem;
  font-weight: 650;
  white-space: nowrap;
}
@container (max-width: 559.98px) {
  .linklist__more { display: none; }
}
/* Fallback ohne Container-Queries: das Handlungswort würde den Pfeil aus dem
   Bild schieben. */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    .linklist__more { display: none; }
  }
}
/* groß: Bereichsname, eine Zeile Erklärung darunter */
.linklist--lg > li:first-child > a { border-top-color: var(--c-rule); }
.linklist--lg a {
  gap: var(--space-5);
  padding: 22px 0 24px;
}
.linklist--lg .linklist__text {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
}
.linklist--lg .linklist__name {
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.linklist--lg .linklist__desc {
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  hyphens: manual;
  -webkit-hyphens: manual;
}


/* --------------------------------------------------------------------------
   9.18 Fehlerseite (404)
   -------------------------------------------------------------------------- */
.error-page {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: var(--section-y);
}
.error-page__code { margin-bottom: clamp(20px, 2.4vw, 32px); }
.error-page__title { max-width: 14em; }
.error-page__text {
  margin-top: 24px;
  max-width: 34em;
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.error-page .btn-row { margin-top: 36px; }
.error-page__links { margin-top: var(--space-9); }


/* --------------------------------------------------------------------------
   9.19 Wortmarke: ruhiger Markenmoment mit Label und vollem Logo
   -------------------------------------------------------------------------- */
.brand-lockup {
  margin-top: var(--space-8);
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.brand-lockup img {
  width: clamp(240px, 24vw, 330px);
  height: auto;
  margin-top: var(--space-6);
}


/* ==========================================================================
   10. Startseite
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(20px, 2.6vw, 40px);
  overflow-x: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.hero__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: clamp(20px, 2vw, 28px);
}
.hero__place {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}
.hero__title {
  grid-column: 1 / span 9;
  font-size: var(--fs-display);
  font-weight: 650;
  letter-spacing: -0.042em;
  line-height: 0.99;
  text-wrap: initial;
}
.hero__title > span { display: block; }
.br-lg { display: none; }
@media (min-width: 600px) {
  .br-lg { display: inline; }
}

.hero__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-7);
  align-items: start;
  margin-top: clamp(32px, 3.4vw, 52px);
}
.hero__copy { grid-column: 1 / span 6; }
.hero__lead {
  max-width: 33rem;
  color: var(--navy);
  font-size: clamp(1.125rem, 1.02rem + 0.25vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.hero__text {
  margin-top: 12px;
  max-width: 33rem;
  color: var(--ink);
}
.hero__copy .btn-row { margin-top: 28px; }
.hero__note {
  display: flex;
  align-items: baseline;
  margin-top: 28px;
  padding-top: 16px;
  max-width: 33rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.hero__media {
  grid-column: 7 / -1;
  margin-right: calc(-1 * var(--side));
  aspect-ratio: 16 / 11;
  background: var(--photo-bg);
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Leistungsindex */
.hero__index {
  grid-column: 10 / -1;
  grid-row: 2;
  align-self: end;
  padding-bottom: 6px;
}
.hero__index .label { padding-bottom: 12px; }
.index-list ul { border-bottom: 1px solid var(--line); }
.index-list li { border-top: 1px solid var(--line); }
.index-list li:first-child { border-top-color: var(--navy); }
.index-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 12px 0 13px;
  text-decoration: none;
}
.index-list__text { display: flex; flex-direction: column; }
.index-list__name {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.index-list__desc {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.index-list .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.25s var(--ease), color 0.2s;
}
.index-list a:hover .icon { transform: translateY(3px); color: var(--navy); }
.index-list a:hover .index-list__name {
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* sehr breite Schirme: das Foto wächst nicht weiter, sondern endet auf derselben
   Linie wie die Textspalte – sonst bleibt links darunter eine leere Fläche */
@media (min-width: 1600px) {
  .hero__body { align-items: stretch; }
  .hero__media { aspect-ratio: auto; height: auto; min-height: 380px; max-height: 560px; }
}

/* Desktop: Buttons über dem Falz (auch bei geringer Fensterhöhe) */
@media (min-width: 1200px) {
  .hero__title { font-size: min(var(--fs-display), 9.8vh); }
  .hero { padding-top: clamp(16px, 2.6vh, 40px); }
  .hero__meta { margin-bottom: clamp(16px, 2.4vh, 28px); }
  .hero__body { margin-top: clamp(24px, 4vh, 52px); }
}

@media (max-width: 1199.98px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__index {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 5;
    margin-top: clamp(40px, 6vw, 64px);
    padding-bottom: 0;
  }
  .hero__index .label { display: none; }
  .hero__index ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    border-bottom: 0;
  }
  .hero__index li,
  .hero__index li:first-child { border-top-color: var(--navy); }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .hero__copy .btn-row { display: grid; justify-content: start; }
}
@media (max-width: 1099.98px) {
  .hero__media { aspect-ratio: 1 / 1; }
  .hero__media img { object-position: 56% 50%; }
}
@media (max-width: 899.98px) {
  .hero__place { display: none; }
  .hero__copy,
  .hero__media { grid-column: 1 / -1; }
  .hero__body { row-gap: var(--space-6); }
  .hero__media {
    margin-left: calc(-1 * var(--side));
    aspect-ratio: 4 / 3;
  }
  .hero__media img { object-position: 50% 60%; }
  /* kompakter Leistungsindex unter dem Foto */
  .hero__index { margin-top: 20px; }
  .hero__index ul {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .hero__index li { border-top-color: var(--line); }
  .hero__index li:first-child { border-top-color: var(--navy); }
  .hero__index a { padding: 11px 0 12px; }
  .index-list__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
}
@media (max-width: 599.98px) {
  .hero__title { font-size: clamp(1.875rem, 8.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.02; }
  .hero__meta .eyebrow { font-size: 0.875rem; }
  .hero__lead { font-size: 1.125rem; }
  .hero__note { margin-top: 24px; }
}

/* ---------- 01 Ausgangslage ---------- */
.problem {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-7);
  align-items: start;
}
.problem__list { grid-column: 1 / span 7; }
.problem__list .label { margin-bottom: 14px; }
.problem__media { grid-column: 9 / -1; padding-top: 32px; }
.problem__media .figure__frame { aspect-ratio: 4 / 5; }
.problem__media img { object-position: 50% 32%; }
.problem .close-line { grid-column: 1 / -1; margin-top: clamp(16px, 2vw, 32px); }
/* die Bruecken-Zeile steht direkt vor dem naechsten Abschnitt – kein doppelter Luftraum */
.section:has(> .container > .problem) { padding-bottom: clamp(48px, 5vw, 72px); }
@media (max-width: 1099.98px) {
  .problem__list { grid-column: 1 / span 8; }
  .problem__media { grid-column: 9 / -1; padding-top: 30px; }
}
@media (max-width: 899.98px) {
  .problem__list,
  .problem__media { grid-column: 1 / -1; }
  .problem__media { padding-top: 0; max-width: 520px; }
  .problem__media .figure__frame { aspect-ratio: 4 / 3; }
  .problem__media img { object-position: 50% 28%; }
}

/* ---------- 02 Leistungen ---------- */
.services .media-row__media img { object-position: 50% 50%; }
#sales .media-row__media img { object-position: 36% 50%; }
#operations .media-row__media img { object-position: 72% 50%; }
#talent .media-row__media img { object-position: 40% 50%; }
@media (max-width: 899.98px) {
  /* Laptop-Logo oben links aus dem Ausschnitt nehmen */
  #operations .media-row__media img {
    object-position: 100% 50%;
    transform: scale(1.22);
    transform-origin: 100% 72%;
  }
}

/* ---------- 05 Warum VORLIO ---------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-8);
  align-items: start;
}
.why__grid > * { grid-column: 1 / -1; min-width: 0; }
.why__intro .text { margin-top: 24px; max-width: 34em; }
.why__intro .link-arrow { margin-top: 28px; }
.why__text { max-width: 40em; }
@media (max-width: 699.98px) {
  .why__intro .link-arrow { margin-top: 14px; }   /* Ausgleich für die mobile Tapfläche */
}
@media (min-width: 900px) {
  .why__grid { row-gap: clamp(48px, 5vw, 72px); align-items: stretch; }
  /* der Link sitzt unten, damit beide Spalten auf derselben Linie enden */
  .why__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; }
  .why__intro .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 0; }
  .why__grid > :last-child { grid-column: 7 / -1; align-self: start; }
}
/* 900–1100 px: fünf Spalten sind für diese H2 zu schmal (Zeilen mit nur einem
   Wort). Hier steht sie über sechs Spalten und eine Spur kleiner. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .why__intro { grid-column: 1 / span 6; }
  .why__grid > :last-child { grid-column: 7 / -1; }
  .why__intro h2 { font-size: clamp(1.875rem, 0.9rem + 2.2vw, 2.25rem); }
}

/* ---------- 06 Für wen ---------- */
.section-head__text > .audience__facts { margin-top: 22px; }
.audience__photos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-6);
  margin-bottom: var(--space-9);
}
.audience__photos .figure:first-child { grid-column: 1 / span 5; }
.audience__photos .figure:last-child { grid-column: 6 / -1; }
.audience__photos .figure__frame { height: clamp(280px, 30vw, 440px); }
.audience__photos .figure:first-child img { object-position: 40% 50%; }
.audience__photos .figure:last-child img { object-position: 50% 45%; }
.audience .region { margin-top: var(--space-9); }
@media (max-width: 699.98px) {
  .audience__photos { column-gap: 12px; }
  .audience__photos .figure:first-child { grid-column: 1 / span 6; }
  .audience__photos .figure:last-child { grid-column: 7 / -1; }
  .audience__photos .figure__frame { height: auto; aspect-ratio: 4 / 5; }
  .audience__photos .figure:first-child img { object-position: 52% 50%; }
  .audience__photos .figure:last-child img { object-position: 52% 50%; }
  .audience__photos .figure__caption::before { display: none; }
}


/* ==========================================================================
   11. Unterseiten (seitenspezifische Anordnung)
   ========================================================================== */

/* ---------- Häufige Fragen: Titel und Hinweis links, Akkordeon rechts ----------
   Mobil steht der Hinweis „Ihre Frage ist nicht dabei?“ hinter den Fragen. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-5);
}
.faq-grid > * { grid-column: 1 / -1; min-width: 0; }
.faq-grid__title {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  max-width: 14em;
}
.faq-grid__note { color: var(--c-text); }
@media (min-width: 900px) {
  .faq-grid { grid-template-rows: auto 1fr; }
  .faq-grid__title { grid-column: 1 / span 4; grid-row: 1; }
  /* Der Hinweis steht als Fußnote am Fuß der Fragenliste, damit links unter dem
     Titel keine halbe Seite leer bleibt. */
  .faq-grid__note { grid-column: 1 / span 4; grid-row: 2; align-self: end; padding-bottom: 4px; }
  .faq-grid > .faq { grid-column: 5 / -1; grid-row: 1 / span 2; }
}
/* mobil steht rechts kein Icon mehr im Weg */
@media (max-width: 699.98px) {
  .faq__a { padding-right: 0; }
}

/* ---------- Talent: Diskretion ----------
   Zwischen 900 und 1100 px ist die Fotospalte nur halb so hoch wie die
   Grundsatzliste daneben. Dort stehen beide untereinander. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  #diskretion .split > * { grid-column: 1 / -1; }
  #diskretion .figure { max-width: 460px; }
}

/* ---------- Medienzeile: mobil zuerst der Text, dann das Foto ---------- */
@media (max-width: 899.98px) {
  .media-row--body-first .media-row__media { grid-row: 2; }
  .media-row--body-first .media-row__body { grid-row: 1; }
}

/* ---------- Schmales Band (z. B. „Für Kandidaten“) ---------- */
.band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-5);
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
}
.band > * { grid-column: 1 / -1; min-width: 0; }
.band__title {
  font-size: var(--fs-h4);
  letter-spacing: -0.015em;
}
.band__text { color: var(--c-text); max-width: 46em; }
.band__text a { font-weight: 600; }
@media (min-width: 900px) {
  .band__title { grid-column: 1 / span 3; }
  .band__text { grid-column: 4 / span 8; }
}

/* ---------- Kontaktseite: Randspalte neben dem Formular ---------- */
/* Randhinweis auf derselben Spaltenkante wie die Abschnitte darunter (949 px bei 1440) */
@media (min-width: 1100px) {
  .page-hero--plain .page-hero__aside { grid-column: 9 / -1; }
}
/* Mobil: die drei Wege gleich unter dem Lead, damit das Formular in den ersten
   Bildschirm rückt. Der Randhinweis daneben entfällt dort. */
.contact-routes { margin-top: var(--space-6); }
@media (max-width: 899.98px) {
  .page-hero--plain .page-hero__aside--note { display: none; }
  /* Der Seitenkopf bleibt knapp, damit das Formular auf dem ersten Bildschirm
     beginnt (Ziel: erstes Feld über der Falzkante bei 390 × 844). */
  .page-hero--plain .page-hero__copy .btn-row { margin-top: 20px; }
  .page-hero--plain { padding-bottom: 24px; }
  .page-hero--plain .breadcrumb { margin-bottom: 16px; }
  .page-hero--plain + .section .section-label { margin-bottom: 24px; }
  .form-panel { padding: 20px; }
  .form-panel__head { margin-bottom: 20px; }
}
/* zwei Wege nebeneinander statt untereinander */
@media (max-width: 599.98px) {
  .contact-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .contact-routes > .btn {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .contact-routes > .btn .icon { display: none; }
}
.contact-aside__block + .contact-aside__block { margin-top: var(--space-7); }
/* Das Formular ist zwangsläufig höher als die Randspalte. Ab 1100 px rückt der
   letzte Block an den Fuß der Spalte, damit rechts keine große leere Fläche
   unter dem Text steht. */
@media (min-width: 1100px) {
  #anfrage .split { align-items: stretch; }
  .contact-aside { display: flex; flex-direction: column; }
  .contact-aside__block:last-child { margin-top: auto; padding-top: var(--space-7); }
}
/* schmale Randspalte (900–1199 px): Label über dem Wert */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .contact-aside .contact-table > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}
/* Tablet: zweispaltig unter dem Formular (links der Ablauf, rechts die Kontaktblöcke) */
@media (min-width: 700px) and (max-width: 899.98px) {
  .contact-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-content: start;
    gap: var(--space-7) var(--gap);
  }
  .contact-aside__block { grid-column: 2; }
  .contact-aside__block:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .contact-aside__block + .contact-aside__block { margin-top: 0; }
}
/* schmale Telefone: schmalere Labelspalte, damit Adressen nicht umbrechen */
@media (max-width: 479.98px) {
  .contact-aside .contact-table > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}


/* ==========================================================================
   12. Hilfsklassen
   ========================================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-9 { margin-top: var(--space-9) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
@media (max-width: 899.98px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 900px) {
  .hide-desktop { display: none !important; }
}


/* ==========================================================================
   13. Bewegung: ruhige Einblendungen (nur mit JavaScript)
   ========================================================================== */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal-on .reveal { opacity: 1; transform: none; }
  .btn.is-loading::after { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

@media print {
  .site-header, .nav-toggle, .skip-link, .to-top { display: none !important; }
  /* Navy-Bänder und Footer hell drucken – dafür muss auch das Thema umgestellt
     werden, sonst bleiben Überschriften und Links weiß auf weiß. */
  .section--dark,
  .site-footer {
    --c-bg: #fff;
    --c-heading: #000;
    --c-text: #000;
    --c-muted: #333;
    --c-line: #bbb;
    --c-line-strong: #888;
    --c-rule: #000;
    --c-accent: #555;
    --c-accent-text: #333;
    --on-dark: #000;
    --on-dark-2: #000;
    --on-dark-3: #333;
    --line-dark: #bbb;
    --line-dark-strong: #888;
    --sage-on-dark: #555;
    background: #fff;
    color: #000;
  }
  .section--dark h1, .section--dark h2, .section--dark h3,
  .site-footer, .site-footer a, .footer-head, .footer-cta { color: #000 !important; }
  .btn--light, .btn--outline-light { border: 1px solid #000; color: #000; background: #fff; }
  .reveal-on .reveal { opacity: 1; transform: none; }
}