/* ===========================================================================
   HOCHEDLINGER CONSULTING — Gestaltungssystem "Blaupause"
   Heller Auftritt. Sprache der technischen Zeichnung.

   Leitgedanke: Sein Gegenstand ist die Unordnung, die er beseitigt.
   Daraus folgt das durchgaengige Prinzip:
       warm (Bernstein) = das Problem
       kalt (Blau)      = die Loesung
   Die Farbe traegt die Botschaft, statt zu dekorieren.

   Aufbau
     01 Token
     02 Grundlagen und Schrift
     03 Layout und Baender
     04 Bewegung
     05 Kopf und Navigation
     06 Schaltflaechen
     07 Hero
     08 Signaturgrafik
     09 Karten, Raster, Schritte
     10 Datenpaneele und Diagramme
     11 Fragen und Antworten
     12 Kontakt und Formular
     13 Fuss
     14 Landingpage-Hilfen
     15 Rechtstexte
     16 Schmale Ansicht

   (Abschnitt 00 Schriften steht direkt unter diesem Kopf.)
   =========================================================================== */

/* ------------------------------------------------------------- 00 Schriften
   Lokal gehostet. Keine Verbindung zu fonts.googleapis.com oder
   fonts.gstatic.com - Vorgabe aus specs/compliance_specs.md, Abschnitt 3.

   League Spartan und Inter sind variable Schriften: eine Datei deckt den
   gesamten Stärkebereich ab. IBM Plex Mono ist statisch und braucht je
   Stärke eine eigene Datei.

   Die Zeichensätze latin-ext laden nur, wenn ein Zeichen daraus vorkommt -
   dafür sorgt die Angabe unicode-range.
   =========================================================================== */

/* IBM Plex Mono · latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-400-latin.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;
}
/* IBM Plex Mono · latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-500-latin.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;
}
/* IBM Plex Mono · latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-600-latin.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;
}
/* IBM Plex Mono · latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-400-latin-ext.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;
}
/* IBM Plex Mono · latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-500-latin-ext.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;
}
/* IBM Plex Mono · latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/ibm-plex-mono-600-latin-ext.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;
}
/* Inter · latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-var-latin.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;
}
/* Inter · latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-var-latin-ext.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;
}
/* League Spartan · latin */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/league-spartan-var-latin.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;
}
/* League Spartan · latin-ext */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/league-spartan-var-latin-ext.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;
}

/* ------------------------------------------------- 00b Skip-Link und Falle
   Zwei Bausteine, die specs/compliance_specs.md fordert.
   =========================================================================== */

/* Sprung zum Inhalt. Er ist das erste fokussierbare Element der Seite und
   wird erst sichtbar, wenn er den Tastaturfokus bekommt. So kann jemand,
   der mit der Tabulatortaste bedient, die Navigation ueberspringen. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  background: var(--lead);
  color: var(--on-lead);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}

.skip-link:focus-visible,
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Hinweisband beim Oeffnen per Doppelklick (file://). Erscheint nur dort;
   auf dem Webserver setzt das Skript es nie. */
.datei-hinweis {
  position: relative;
  z-index: 300;
  padding: 14px 20px;
  background: var(--signal);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

/* Honigtopf. Nicht display:none - manche Formularroboter erkennen das und
   lassen das Feld dann aus. So bleibt es technisch vorhanden, liegt aber
   ausserhalb des Bildes. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- 01 Token */
:root {
  /* Flaechen */
  --ground: #f6f8fb;
  --ground-2: #eef2f8;
  --surface: #ffffff;

  /* Schrift */
  --ink: #0e1b2e;
  --ink-soft: #4a5c75;
  --ink-faint: #6b7f9c;

  /* Leitfarbe: die Loesung */
  --lead: #1d4ed8;
  --lead-deep: #1739a8;
  --lead-tint: #dfe7fc;
  --lead-text: #1d4ed8;
  --on-lead: #ffffff;

  /* Signalfarbe: das Problem. -bright nur fuer Grafik, nie fuer kleinen Text. */
  --signal: #b45309;
  --signal-bright: #d97706;
  --signal-tint: #fdf0dc;

  /* Linien */
  --line: #c9d6e8;
  --line-soft: #e2eaf4;

  /* Aufgehelltes Blau fuer dunkle Flaechen. Das normale --lead erreicht auf
     dem Dunkelband nur rund 2:1 und taugt dort nicht als Zustandsanzeige;
     fuer Bedienelemente sind mindestens 3:1 noetig. */
  --lead-bright: #6b9bff;

  /* Dunkles Signaturband: reines Schwarz, Kacheln minimal aufgehellt.
     Kontrast gegen Schwarz nachgerechnet - --dark-soft erreicht 8,57:1,
     --lead-bright 7,76:1. --dark-line war auf Navy abgestimmt und waere auf
     Schwarz unsichtbar gewesen. */
  --dark: #000000;
  --dark-2: #16181d;
  --dark-soft: #93a7c4;
  --dark-line: #2f333b;

  /* Schrift */
  --font-display: "League Spartan", "Segoe UI", Arial, sans-serif;
  --font-body: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Masse */
  --max-width: 1180px;
  --measure: 68ch;
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 20px;

  /* Schatten: auf hellem Grund flach und weit, nie schwer */
  --shadow-s: 0 1px 2px rgba(14, 27, 46, 0.05);
  --shadow: 0 1px 2px rgba(14, 27, 46, 0.04), 0 12px 32px rgba(14, 27, 46, 0.07);
  --shadow-l: 0 2px 4px rgba(14, 27, 46, 0.04), 0 24px 56px rgba(14, 27, 46, 0.1);

  /* Bewegung */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.22s;
}

/* --------------------------------------------- 02 Grundlagen und Schrift */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}

h2 {
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
}

h3 {
  font-size: 1.14rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--lead-text);
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Rubriken, Zahlen, Datenbezeichner in Monospace.
   Tabellen, Daten und Code sind sein Handwerk - das darf die Schrift zeigen. */
.eyebrow,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;  /* 450 gibt es bei IBM Plex Mono nicht - siehe Abschnitt 00 */
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.section-intro,
.hero-text {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: var(--measure);
}

h2 + .section-intro {
  margin-top: 1.1rem;
}

/* Kernaussage im Fließtext: bleibt im Satz. Display-Schrift und volle
   Schriftfarbe gegen den gedämpften Absatz. Kein Block, keine Haarlinie,
   kein Leitblau (das ist die Linkfarbe). `.pull-quote` bleibt Wirtschaftlichkeit. */
.section-intro .phrase-punch {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.012em;
  color: var(--ink);
  /* League Spartan x-Höhe 0,41 gegen Inter 0,55, beides bei 100 px im
     Browser gemessen. 1,34 em gleicht das aus. Zeilenhöhe 1,21 hält die
     Absatzzeile: 1,62 / 1,34. */
  font-size: 1.34em;
  line-height: 1.21;
}

/* ------------------------------------------------- 03 Layout und Baender */
.container {
  width: min(var(--max-width), 90%);
  margin-inline: auto;
}

.section {
  padding: 76px 0;
  position: relative;
  /* Der Kopfbereich klebt oben und ist rund 73 px hoch. Ohne diesen Abstand
     verschwindet die Ueberschrift dahinter, sobald jemand ueber einen Anker
     springt - etwa mit der Schaltflaeche "Kostenloses Erstgespraech" auf
     #kontakt. */
  scroll-margin-top: 92px;
}

/* Baender wechseln den Grundton und geben der Seite Rhythmus. */
.section-elevated {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
}

.section-deep {
  background: var(--ground-2);
  border-block: 1px solid var(--line-soft);
}

/* Dunkles Signaturband. Kommt bewusst hoechstens zweimal je Seite vor. */
.section-dark {
  background: var(--dark);
  color: #fff;
  border-block: none;
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-dark p,
.section-dark .section-intro {
  color: color-mix(in srgb, #fff 76%, transparent);
}

.section-dark .eyebrow,
.section-dark .mono {
  color: var(--dark-soft);
}

.section-dark a {
  color: #fff;
}

/* Blaupausen-Raster: der eine gestalterische Einsatz dieser Variante.
   Erscheint nur auf ausgewaehlten Baendern, nie flaechendeckend. */
.band-grid {
  position: relative;
  isolation: isolate;
}

.band-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 24%, transparent 100%);
}

/* Auf hellem Grund darf das Raster sichtbar sein, sonst traegt es nichts bei.
   Auf dem Dunkelband muss es zurueckgenommen werden, sonst uebertoent es die
   Schrift. */
.band-grid {
  --grid-line: var(--line);
}

.section-dark.band-grid {
  --grid-line: color-mix(in srgb, var(--dark-line) 62%, transparent);
}

.sec-head {
  max-width: 36ch;
  margin-bottom: 34px;
}

.split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 42px;
  align-items: start;
}

/* -------------------------------------------------------- 04 Bewegung */
/*
   Startzustand wird NUR gesetzt, wenn JavaScript laeuft (.anim-ready am
   <html>). Ohne JavaScript bleibt alles sichtbar - deshalb braucht es keinen
   Not-Ausschalter mehr, der die Animation stilllegt.

   Angesteuert wird ueber data-anim, nicht ueber Abschnitts-IDs. Damit
   funktioniert dieselbe Bewegung auf jeder Seite. data-anim-words zerlegt
   vorhandenen Text in Woerter (Blur-Focus-Reveal). Ohne JavaScript bleibt
   der Textknoten unveraendert.
*/
.anim-ready [data-anim] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.anim-ready [data-anim="up"] {
  transform: translateY(26px);
}

.anim-ready [data-anim="fade"] {
  transform: none;
}

.anim-ready [data-anim="scale"] {
  transform: scale(0.94);
}

.anim-ready [data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* Gestaffelter Auftritt fuer Kindelemente */
.anim-ready [data-anim-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
}

.anim-ready [data-anim-group].is-in > * {
  opacity: 1;
  transform: none;
}

.anim-ready [data-anim-group].is-in > *:nth-child(1) { transition-delay: 0.02s; }
.anim-ready [data-anim-group].is-in > *:nth-child(2) { transition-delay: 0.09s; }
.anim-ready [data-anim-group].is-in > *:nth-child(3) { transition-delay: 0.16s; }
.anim-ready [data-anim-group].is-in > *:nth-child(4) { transition-delay: 0.23s; }
.anim-ready [data-anim-group].is-in > *:nth-child(5) { transition-delay: 0.3s; }
.anim-ready [data-anim-group].is-in > *:nth-child(6) { transition-delay: 0.37s; }

/* Gezeichnete Linien: Laenge wird per JavaScript gesetzt */
.anim-ready [data-anim-draw] {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1.1s var(--ease-out);
}

.anim-ready [data-anim-draw].is-in {
  stroke-dashoffset: 0;
}

/* Blur-Focus-Reveal: Woerter unscharf/klein, dann scharf. Nur kurze Gruppen.
   Ohne .anim-ready bleibt der Originaltext sichtbar. */
.anim-ready .blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.94) translateY(6px);
  transition:
    opacity 1.25s cubic-bezier(0.33, 0, 0.2, 1),
    filter 1.25s cubic-bezier(0.33, 0, 0.2, 1),
    transform 1.25s cubic-bezier(0.33, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 140ms);
}

.anim-ready [data-anim-words].is-in .blur-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Altbestand aus dem dunklen Entwurf: neutral halten, damit nichts verschwindet */
.reveal,
.reveal-depth {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------- 05 Kopf und Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark,
.footer-mark {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-text {
  display: grid;
  gap: 0.06rem;
  line-height: 1.12;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.brand-text span {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;  /* 450 gibt es bei IBM Plex Mono nicht - siehe Abschnitt 00 */
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.main-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--lead);
}

.main-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--lead);
}

/* ------------------------------------------------- 06 Schaltflaechen */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 13px 22px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transition: transform var(--dur) var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

/* Hauptaktion */
.btn-nav-cta,
.btn-primary {
  background: var(--lead);
  color: var(--on-lead);
}

.btn-nav-cta:hover,
.btn-primary:hover {
  background: var(--lead-deep);
  transform: translateY(-1px);
}

/* Nebenaktion */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--lead);
  color: var(--lead-text);
}

/* Textaktion */
.btn-quiet {
  color: var(--ink-soft);
  font-weight: 500;
  padding-inline: 4px;
}

.btn-quiet:hover {
  color: var(--ink);
}

.header-cta {
  flex-shrink: 0;
}

/* Auf schmalen Geraeten ist "Kostenloses Erstgespraech" zu breit und erzeugt
   waagrechtes Scrollen. Der lange Teil der Beschriftung wird ausgeblendet,
   der Knopf wird kompakter. Markup dazu:
   <a class="btn btn-nav-cta header-cta"><span class="cta-long">Kostenloses </span>Erstgespraech ...</a> */
@media (max-width: 680px) {
  .header-cta {
    padding: 10px 14px;
    font-size: 0.86rem;
    gap: 7px;
  }

  .header-cta .cta-long {
    display: none;
  }

  .header-cta svg {
    display: none;
  }
}

.section-dark .btn-nav-cta,
.section-dark .btn-primary {
  background: var(--lead);
  color: var(--on-lead);
}

.section-dark .btn-ghost {
  color: #fff;
  border-color: var(--dark-line);
}

/* --------------------------------------------------------- 07 Hero */
.hero {
  padding: 74px 0 62px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--ground) 100%);
  overflow: hidden;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-title {
  margin: 16px 0 0;
  max-width: 22ch;
}

/* Zweite Zeile der Hauptueberschrift. Sie bleibt Teil der H1 - fuer
   Suchmaschinen und Vorlesewerkzeuge ist der Satz vollstaendig -, tritt
   optisch aber zurueck. Eigene Skala statt em: bei 2,1rem H1 waere ein
   em-Anteil kleiner als der Fliesstext und wirkte wie eine Fussnote. */
.hero-title-sub {
  display: block;
  width: fit-content;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.06rem, 1.55vw, 1.42rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hero-title em,
.hero-title .accent {
  font-style: normal;
  color: var(--lead);
}

.hero .eyebrow {
  color: var(--lead-text);
}

.hero-lead {
  margin-top: 20px;
}

.hero-subhead {
  color: var(--ink-soft);
  font-size: 1.03rem;
  max-width: 56ch;
  margin: 0;
}

/* Kurzfassung nur unter 680 px. Ohne diese Regel stünden beide Wortlaute
   auf dem Desktop untereinander. Die Optik bestehender Hero-Elemente
   aendert sich dadurch nicht. */
.hero-short {
  display: none;
}

.hero-badges {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.hero-badges li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.hero-badges li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--lead);
}

/* Startseite: Begriff und Ergänzung als Spezifikationszeile,
   nicht als fette Aufzählung. Haarlinie links = Blaupause. */
.hero-claims {
  gap: 14px;
  margin-top: 26px;
  max-width: 38rem;
}

.hero-claims li {
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 3px;
  padding-left: 0;
  font-size: inherit;
}

.hero-claims li::before {
  position: static;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 2px;
  height: auto;
  min-height: 0;
  top: auto;
  left: auto;
  align-self: stretch;
  border-radius: 1px;
}

.hero-claims strong {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--lead);
}

.hero-claims span {
  grid-column: 2;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-facts {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.hero-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-facts span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-photo-wrap {
  margin: 0;
  align-self: start;
  justify-self: end;
  width: min(430px, 100%);
  aspect-ratio: 20 / 21;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
}

.hero-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 34%;
}

/* Vertrauensband unter dem Hero: zweites dunkles Signaturband der Seite
   (das andere ist „Vorgehen"). Schmales Schwarzband, keine Kacheln.
   Drei gleiche Spalten über die volle Containerbreite, feine Strichzeichen. */
.proof-strip {
  --proof-gap: clamp(28px, 3.6vw, 56px);
  background: var(--dark);
  color: #fff;
  border-block: none;
  border-top: 1px solid color-mix(in srgb, var(--lead-bright) 28%, transparent);
  padding: 16px 0;
}

.proof-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--proof-gap);
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.proof-items li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  min-width: 0;
}

.proof-items li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: calc(var(--proof-gap) / -2);
  width: 1px;
  background: var(--dark-line);
}

.proof-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--lead-bright);
}

.proof-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
}

.proof-items p {
  margin: 0;
  color: color-mix(in srgb, #fff 76%, transparent);
  font-size: 0.94rem;
  line-height: 1.38;
}

.proof-items strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}

/* Nacheinander: der nächste Punkt setzt ein, sobald der vorige
   seinen Auftritt weitgehend abgeschlossen hat. */
.anim-ready .proof-items > * {
  transition-duration: 0.88s;
}

.anim-ready .proof-items.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.anim-ready .proof-items.is-in > *:nth-child(2) { transition-delay: 0.88s; }
.anim-ready .proof-items.is-in > *:nth-child(3) { transition-delay: 1.72s; }

.anim-ready .proof-icon [data-anim-draw] {
  transition-duration: 1.85s;
}

.anim-ready .proof-items li:nth-child(1) [data-anim-draw] { transition-delay: 0.16s; }
.anim-ready .proof-items li:nth-child(2) [data-anim-draw] { transition-delay: 1s; }
.anim-ready .proof-items li:nth-child(3) [data-anim-draw] { transition-delay: 1.84s; }

@media (max-width: 720px) {
  .proof-items {
    --proof-gap: 0px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .proof-items li {
    padding: 12px 0;
  }

  .proof-items li:first-child {
    padding-top: 0;
  }

  .proof-items li:last-child {
    padding-bottom: 0;
  }

  .proof-items li:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 1px;
  }
}

/* ------------------------------------------------ 08 Signaturgrafik */
.signature {
  margin: 0;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px 20px 16px;
}

.signature-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.signature-head span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.signature svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Problemseite: unruhig, warm, teils gerissen */
.sig-chaos-line {
  stroke: var(--signal-bright);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.75;
}

.sig-chaos-line.is-broken {
  stroke-dasharray: 4 5;
  opacity: 0.5;
  animation: sig-drift 2.6s linear infinite;
}

.sig-chaos-node {
  fill: var(--surface);
  stroke: var(--signal-bright);
  stroke-width: 1.4;
}

.sig-chaos-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--signal);
}

/* Loesungsseite: ruhig, orthogonal, Leitfarbe */
.sig-order-line {
  stroke: var(--lead);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
}

.sig-order-node {
  fill: var(--lead-tint);
  stroke: var(--lead);
  stroke-width: 1.4;
}

.sig-order-core {
  fill: var(--lead);
}

.sig-order-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--lead);
}

.sig-order-core-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--on-lead);
}

.sig-axis {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.sig-stage-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill: var(--ink-soft);
  text-transform: uppercase;
}

@keyframes sig-drift {
  to {
    stroke-dashoffset: -18;
  }
}

/* ------------------------------------- 09 Karten, Raster, Schritte */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.card {
  position: relative;
  display: block;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--lead) 42%, var(--line));
}

.card h3 {
  margin: 12px 0 8px;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0;
}

.card-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0;
}

.card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 17px;
  height: 17px;
  stroke: var(--lead);
  stroke-width: 2;
  fill: none;
  transition: transform var(--dur) var(--ease);
}

a.card:hover .card-arrow {
  transform: translate(3px, -3px);
}

.leistung-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leistung-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--lead-tint);
  color: var(--lead);
}

.leistung-icon svg {
  width: 20px;
  height: 20px;
}

.checklist {
  margin: 0;
  padding-left: 1.05rem;
}

.checklist li {
  margin-bottom: 0.8rem;
  color: var(--ink-soft);
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

/* ------------------------------- 10 Datenpaneele und Diagramme */
.line-panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 18px;
}

.panel-hover {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.panel-hover:hover {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--lead) 34%, var(--line));
}

.panel-head p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.chart-grid-lines line {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.chart-area {
  fill: var(--lead-tint);
  opacity: 0.65;
}

.chart-line-primary {
  stroke: var(--lead);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line-secondary {
  stroke: var(--signal-bright);
  stroke-width: 1.6;
  fill: none;
  stroke-dasharray: 4 4;
}

.chart-line-tertiary {
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  fill: none;
}

.bar-primary {
  fill: var(--lead);
}

.bar-neutral {
  fill: var(--line);
}

.axis-x text,
.axis-y text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--ink-faint);
}

.tile-metrics {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.tile-metrics strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.tile-metrics span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chart-legend,
.ring-legend {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chart-legend span,
.ring-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  background: var(--line);
}

.swatch-primary,
.ring-a {
  background: var(--lead);
}

.swatch-neutral,
.ring-b {
  background: var(--line);
}

.swatch-line,
.ring-c {
  background: var(--signal-bright);
}

.swatch-accent {
  background: var(--signal-bright);
}

.chart-mosaic,
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.panel-wide {
  grid-column: 1 / -1;
}

.viz-count {
  font-variant-numeric: tabular-nums;
}

.chart-donut {
  display: block;
  width: 132px;
  height: 132px;
  margin: 14px auto 0;
}

.donut-track {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 13;
}

.donut-seg {
  fill: none;
  stroke-width: 13;
}

.donut-seg.ring-a {
  stroke: var(--lead);
}

.donut-seg.ring-b {
  stroke: var(--line);
}

.donut-seg.ring-c {
  stroke: var(--signal-bright);
}

/* Eingebettete Marken-Animation: vollbreit, ohne Kartenrahmen, vor dem Kontakt.
   Hoehe folgt 16:9 bis 640 px. Der 460-px-Deckel war fuer den Platz unter dem
   Hero gesetzt; vor dem Formular darf die Buehne groesser sein, damit die
   Schrift auf dem Laptop lesbar bleibt. Der Hintergrund fuellt immer den
   ganzen Streifen, der Inhalt wird eingepasst - nichts wird abgeschnitten. */
.hero-animation-embed {
  width: 100%;
  height: clamp(240px, 56.25vw, 640px);
  margin: 0;
  overflow: hidden;
  background: #f6f8fb;
}

.hero-animation-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-animation-embed.is-reduced-motion {
  display: none;
}

/* Fotos im Fliesstext */
.inline-photo {
  margin: 1.1rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
}

.inline-photo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------- 11 Fragen und Antworten */
.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  max-width: var(--measure);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--lead) 42%, var(--line));
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 20px;
  position: relative;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 21px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 2px solid var(--lead);
  border-bottom: 2px solid var(--lead);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.faq-answer p {
  padding: 0;
  margin: 0 0 0.55rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul {
  margin: 0.1rem 0 0.85rem;
  padding-left: 1.15rem;
}

.faq-answer li + li {
  margin-top: 0.22rem;
}

.faq-answer strong {
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------- 12 Kontakt und Formular */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.contact-lead {
  color: var(--ink-soft);
  max-width: 44ch;
}

.contact-profile {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
}

.contact-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.contact-profile-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
}

.contact-profile-text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-details {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.contact-detail {
  display: grid;
  gap: 2px;
  padding: 13px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.contact-detail:hover {
  border-color: var(--lead);
}

.contact-detail-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-detail-value {
  font-weight: 600;
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-field {
  display: grid;
  gap: 6px;
}

.contact-field label {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-field input,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  padding: 11px 13px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--ground);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--lead);
  background: var(--surface);
}

.contact-field textarea {
  min-height: 118px;
  resize: vertical;
}

.contact-field.is-invalid input,
.contact-field.is-invalid textarea {
  border-color: var(--signal);
  background: var(--signal-tint);
}

.contact-field-error {
  font-size: 0.82rem;
  color: var(--signal);
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.contact-consent.is-invalid {
  color: var(--signal);
}

/* Bedienziel mindestens 24 x 24 px - WCAG 2.2 AA, Erfolgskriterium 2.5.8.
   Die Voreinstellung des Browsers liegt bei 13 px und verfehlt das. */
.contact-consent input[type="checkbox"] {
  /* 26 statt 24: bei Bildschirmskalierung rundet der Browser 24px auf
     23,998px ab und verfehlt das Mindestmass um Haaresbreite. */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--lead);
  cursor: pointer;
}

/* Die Beschriftung mittig zum groesseren Kaestchen ausrichten. */
.contact-consent span {
  padding-top: 4px;
}

.contact-submit {
  justify-content: center;
  background: var(--lead);
  color: var(--on-lead);
}

.contact-submit:hover {
  background: var(--lead-deep);
}

.contact-form-status {
  font-size: 0.9rem;
  min-height: 1.2em;
}

.contact-form-status.is-error {
  color: var(--signal);
}

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

.contact-note {
  font-size: 0.84rem;
  color: var(--ink-faint);
}

/* -------------------------------------------------------- 13 Fuss */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
}

.footer-inner {
  display: grid;
  gap: 1.2rem;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  text-decoration: none;
  color: var(--ink);
}

.footer-brand-text {
  display: grid;
  gap: 0.06rem;
  line-height: 1.12;
}

.footer-brand-text strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
}

.footer-brand-text span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer-nav,
.footer-services {
  display: flex;
  align-items: center;
  gap: 0.4rem 1.1rem;
  flex-wrap: wrap;
}

.footer-nav a,
.footer-services a {
  color: var(--ink-soft);
  font-size: 0.87rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.footer-nav a:hover,
.footer-services a:hover,
.footer-nav a[aria-current="page"],
.footer-services a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--lead);
}

.footer-nap {
  font-style: normal;
  display: grid;
  gap: 0.3rem;
}

.footer-nap-line {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.87rem;
}

.footer-nap-line strong {
  color: var(--ink);
  font-weight: 600;
}

.footer-nap-line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line);
  transition: color var(--dur) var(--ease);
}

.footer-nap-line a:hover {
  color: var(--ink);
}

.footer-claim {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--lead);
}

.footer-bottom {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

.footer-bottom p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* --------------------------------------- 14 Landingpage-Hilfen */
.lp-narrow {
  max-width: var(--measure);
}

.container.lp-narrow {
  max-width: none;
}

.container.lp-narrow > * {
  max-width: var(--measure);
}

.lp-hero {
  padding-bottom: 2.4rem;
}

.lp-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.1rem;
  flex-wrap: wrap;
  margin: 1.35rem 0 0;
}

.lp-cta-tel {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line);
  transition: color var(--dur) var(--ease);
}

.lp-cta-tel:hover {
  color: var(--ink);
}

.lp-links {
  margin: 1.9rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: 0.86rem;
}

.lp-links a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line);
}

.lp-links a:hover {
  color: var(--ink);
}

.seo-copy p {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ------------------------------------------------ 15 Rechtstexte */
.legal-page .nav-wrap {
  min-height: 74px;
}

.legal-back-link {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.legal-back-link:hover {
  color: var(--ink);
}

.legal-main {
  padding: 56px 0 72px;
}

.legal-head {
  max-width: 46ch;
  margin-bottom: 30px;
}

.legal-lead {
  color: var(--ink-soft);
  margin-top: 12px;
}

.legal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 30px;
  max-width: var(--measure);
}

.legal-block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}

.legal-block-last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.legal-block h2 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.legal-text {
  color: var(--ink-soft);
  margin: 0;
}

.legal-address {
  font-style: normal;
  color: var(--ink-soft);
}

.legal-address strong {
  color: var(--ink);
}

.legal-details {
  margin: 0;
  display: grid;
  gap: 9px;
}

.legal-details-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
}

.legal-details-row dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}

.legal-details-row dd {
  margin: 0;
}

.legal-mono {
  font-family: var(--font-mono);
  color: var(--ink);
}

.legal-contact-box {
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--ground);
  padding: 16px 18px;
}

/* ------------------------------------------- 16 Schmale Ansicht */
@media (max-width: 980px) {
  .hero-layout,
  .contact-card,
  .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-title {
    max-width: none;
  }

  .hero-photo-wrap {
    justify-self: start;
    width: min(360px, 100%);
  }

  /* Ohne JavaScript bleibt die Navigation als einfache Linkliste stehen und
     bricht unter Marke und Schaltflaeche um. Sie einfach auszublenden hiesse,
     einen Besucher ohne JavaScript auf dem Handy ohne Menue zurueckzulassen.
     Laeuft JavaScript, uebernimmt das Klappmenue - siehe .js-nav .main-nav
     weiter unten, das diese Regeln mit hoeherer Spezifitaet ueberschreibt. */
  .nav-wrap {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .main-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 2px 20px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--line-soft);
  }

  .main-nav a {
    padding: 6px 0;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 54px 0;
  }

  .cards,
  .contact-form-row,
  .chart-mosaic,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .legal-details-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .lp-cta-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-facts {
    gap: 22px;
  }

  /* Hero: Text und Portraet teilen sich das erste Sichtfeld.
     height statt min-height: sonst waechst das Foto auf sein
     intrinsisches Mass und das Gesicht rutscht unter den Rand.
     Unten 24 px, sonst sitzt das Foto am Vertrauensband.
     Hoehe ueber lvh (grosse Viewport-Hoehe): bleibt beim Ein- und
     Ausfahren der Adressleiste fest. dvh wuerde das Foto springen lassen.
     Kopfzeile .nav-wrap min-height 72 px. */
  .hero {
    display: flex;
    flex-direction: column;
    padding: 24px 0 24px;
    height: calc(100vh - 72px);
    height: calc(100lvh - 72px);
    max-height: calc(100vh - 72px);
    max-height: calc(100lvh - 72px);
    overflow: hidden;
  }

  .hero-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 16px;
  }

  .hero-copy {
    flex-shrink: 0;
  }

  .hero-title {
    margin-top: 10px;
  }

  .hero-title-sub {
    margin-top: 10px;
    padding-top: 8px;
  }

  .hero-lead {
    margin-top: 12px;
  }

  .hero-full {
    display: none;
  }

  .hero-short {
    display: inline;
  }

  .hero-badges {
    margin-top: 14px;
    gap: 0.35rem;
  }

  .hero-actions {
    display: none;
  }

  .hero-photo-wrap {
    flex: 1 1 0;
    width: 100%;
    min-height: 120px;
    aspect-ratio: auto;
    align-self: stretch;
    justify-self: stretch;
  }

  /* Mit Klappmenue bleiben Marke, Erstgespraech und Menueknopf in einer
     Zeile. Ohne JavaScript bleibt flex-wrap aus der 980px-Regel, damit
     die Navigationslinks unter der Marke sichtbar bleiben. */
  .js-nav .nav-wrap {
    flex-wrap: nowrap;
    gap: 10px;
  }
}

/* Bewegung respektiert die Systemeinstellung */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===========================================================================
   17 Reiter-Baustein "Vorgehen"

   Vier Schritte auf dunklem Grund. Klick oder Pfeiltaste wechselt den Reiter,
   darunter tauscht der Inhalt aus.

   Zugaenglichkeit ist hier bewusst der Unterschied zum Vorbild: dort sind die
   Kacheln reine <div> ohne role und ohne tabindex, der Bereich ist per Tastatur
   nicht erreichbar. Hier sind es echte <button role="tab">.

   Ohne JavaScript fehlt .is-interactive: die Reiterleiste bleibt verborgen und
   alle vier Bloecke stehen untereinander. Es geht also kein Inhalt verloren.
   =========================================================================== */

/* Kopf, Reiterleiste und Panel sitzen im Container. Kacheln haben feste
   Breite; die Pfeile nehmen den Rest und zeichnen sich von links nach rechts. */
.stepper-head {
  text-align: left;
  max-width: var(--measure);
}

#vorgehen {
  overflow-x: clip;
}

.stepper {
  margin-top: 34px;
}

/* Ohne JavaScript: keine Reiter, dafuer alle Bloecke sichtbar */
.stepper:not(.is-interactive) .stepper-tabs {
  display: none;
}

.stepper:not(.is-interactive) .stepper-panel + .stepper-panel {
  margin-top: 42px;
  padding-top: 38px;
  border-top: 1px solid var(--dark-line);
}

/* --- Reiterleiste ------------------------------------------------------- */
.stepper-tabs {
  --stepper-tab-w: 136px;
  display: grid;
  grid-template-columns: var(--stepper-tab-w) 1fr var(--stepper-tab-w) 1fr var(--stepper-tab-w) 1fr var(--stepper-tab-w);
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.stepper-tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  width: var(--stepper-tab-w);
  min-height: 124px;
  padding: 16px 10px;
  border-radius: 16px;
  border: 1.7px solid transparent;
  background: var(--dark-2);
  color: color-mix(in srgb, #fff 74%, transparent);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.stepper-tab:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: color-mix(in srgb, var(--lead-bright) 45%, transparent);
}

.stepper-tab[aria-selected="true"] {
  border-color: var(--lead-bright);
  background: color-mix(in srgb, var(--lead) 16%, var(--dark-2));
  color: #fff;
}

/* Verbindungspfeil: Haarlinie plus Spitze. aria-hidden, kein Indextext.
   Zeichnet sich per scaleX (Compositor), nicht per JavaScript.
   In der 1fr-Spalte zentriert und gedeckelt, damit die Linie auf
   breiten Schirmen nicht die ganze Luecke fuellt. */
.stepper-arrow {
  display: flex;
  align-items: center;
  align-self: center;
  justify-self: center;
  min-width: 0;
  width: clamp(28px, 35%, 64px);
  height: 16px;
  pointer-events: none;
}

.stepper-arrow-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--dark-soft);
  transform-origin: left center;
}

.stepper-arrow-tip {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: -1px;
  border-right: 1.5px solid var(--dark-soft);
  border-bottom: 1.5px solid var(--dark-soft);
  transform: rotate(-45deg);
}

/* Startzustand nur mit Bewegung. Ohne .anim-ready bleibt der Pfeil sichtbar. */
.anim-ready .stepper-arrow-line {
  transform: scaleX(0);
  transition: transform 0.55s var(--ease-out);
}

.anim-ready .stepper-arrow-tip {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

.anim-ready .stepper-tabs.is-in .stepper-arrow-line {
  transform: scaleX(1);
}

.anim-ready .stepper-tabs.is-in .stepper-arrow-tip {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(1) .stepper-arrow-line { transition-delay: 0.28s; }
.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(1) .stepper-arrow-tip { transition-delay: 0.68s; }
.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(2) .stepper-arrow-line { transition-delay: 0.78s; }
.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(2) .stepper-arrow-tip { transition-delay: 1.18s; }
.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(3) .stepper-arrow-line { transition-delay: 1.28s; }
.anim-ready .stepper-tabs.is-in .stepper-arrow:nth-of-type(3) .stepper-arrow-tip { transition-delay: 1.68s; }

/* Pfeile nicht mit dem Kachel-Auftritt verschieben */
.anim-ready .stepper-tabs[data-anim-group] > .stepper-arrow {
  opacity: 1;
  transform: none;
}

.anim-ready .stepper-tabs[data-anim-group].is-in > .stepper-tab:nth-of-type(1) { transition-delay: 0.02s; }
.anim-ready .stepper-tabs[data-anim-group].is-in > .stepper-tab:nth-of-type(2) { transition-delay: 0.08s; }
.anim-ready .stepper-tabs[data-anim-group].is-in > .stepper-tab:nth-of-type(3) { transition-delay: 0.14s; }
.anim-ready .stepper-tabs[data-anim-group].is-in > .stepper-tab:nth-of-type(4) { transition-delay: 0.2s; }

.stepper-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--lead-bright);
}

/* Massiv gefuellte Zeichen, keine Linien. Die Form traegt, nicht die Kontur. */
.stepper-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: none;
}

.stepper-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
}

/* --- Inhaltsbereich ------------------------------------------------------ */
.stepper-panels {
  margin-top: 44px;
}

.stepper-panel {
  text-align: left;
}

.stepper .stepper-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--lead-bright);
}

.stepper .stepper-panel-text {
  margin: 10px 0 0;
  max-width: var(--measure);
  font-size: 1.02rem;
  line-height: 1.58;
  color: color-mix(in srgb, #fff 72%, transparent);
}

/* Leitzeile: die ehemalige Unterzeile, jetzt der erste Satz des Textes.
   Gleiche Schrift wie der Fliesstext, nur Gewicht und Farbe unterscheiden. */
.stepper .stepper-panel-lead {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: color-mix(in srgb, #fff 92%, transparent);
}

/* Drei nummerierte Punkte je Schritt */
.stepper-facts {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  text-align: left;
}

.stepper-facts > li > .stepper-fact-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lead-bright);
}

.stepper-facts h3 {
  margin: 8px 0 7px;
  font-size: 1.02rem;
  color: #fff;
}

.stepper-facts p {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, #fff 68%, transparent);
}

/* Wechsel: Titel von oben, Beschreibung (samt Leitzeile) und die drei
   Punkte von unten. Der Wechsel von display:none startet die Animation
   von selbst neu - dafuer braucht es kein JavaScript. */
@keyframes stepper-von-oben {
  from {
    opacity: 0;
    transform: translateY(-26px);
  }
}

@keyframes stepper-von-unten {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

.stepper.is-interactive .stepper-panel-title {
  animation: stepper-von-oben 0.52s var(--ease-out) both;
}

.stepper.is-interactive .stepper-panel-text {
  animation: stepper-von-unten 0.52s var(--ease-out) 0.08s both;
}

.stepper.is-interactive .stepper-facts > li {
  animation: stepper-von-unten 0.52s var(--ease-out) both;
}

.stepper.is-interactive .stepper-facts > li:nth-child(1) { animation-delay: 0.2s; }
.stepper.is-interactive .stepper-facts > li:nth-child(2) { animation-delay: 0.28s; }
.stepper.is-interactive .stepper-facts > li:nth-child(3) { animation-delay: 0.36s; }

@media (max-width: 720px) {
  .stepper-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .stepper-tab {
    width: auto;
  }

  .stepper-arrow {
    display: none;
  }
}

@media (max-width: 860px) {
  .stepper-facts {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ===========================================================================
   18 Mobilmenue

   Unter 980 px ist die Kopfnavigation ausgeblendet. Bisher fuehrte von dort
   kein Weg zu den Leistungsseiten - auf Mobil, wo der groessere Teil der
   Besucher herkommt. Diese Schaltflaeche klappt sie aus.

   Sichtbar wird sie erst, wenn JavaScript laeuft (.js-nav am <html>). Ohne
   JavaScript bliebe sie wirkungslos und waere nur eine tote Schaltflaeche.
   =========================================================================== */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-toggle:hover {
  border-color: var(--lead);
}

.nav-toggle-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}

.nav-toggle-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Aus den drei Strichen wird beim Oeffnen ein Kreuz */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
  .js-nav .nav-toggle {
    display: inline-flex;
  }

  /* Hoehere Spezifitaet als die Regel, die .main-nav hier ausblendet */
  .js-nav .main-nav {
    display: grid;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px 5% 16px;
    background: var(--surface);
    border-top: none;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);

    /* Geschlossener Zustand */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
      visibility 0.24s var(--ease);
  }

  .js-nav .main-nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .js-nav .main-nav a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 2px solid transparent;
    padding-left: 12px;
    font-size: 1rem;
  }

  .js-nav .main-nav a:last-child {
    border-bottom: none;
  }

  .js-nav .main-nav a:hover,
  .js-nav .main-nav a[aria-current="page"] {
    border-bottom-color: var(--line-soft);
    border-left-color: var(--lead);
    color: var(--ink);
  }
}

/* ------------------------------------- 17 Relaunch: Schmerzwand, Umschwung,
   Sicherheit, Testimonials (konzept_relaunch.md) */

/* Drei Spalten fuer die sechs Schmerzpunkt-Kacheln - faellt ueber .cards
   Basis (zwei Spalten) und deren 680px-Regel zurueck, siehe dort. */
.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cards-3 {
    grid-template-columns: 1fr;
  }
}

.pain-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--signal-tint)) 0%, var(--surface) 42%);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pain-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pain-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pain-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--signal-tint);
  color: var(--signal);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pain-icon svg {
  width: 20px;
  height: 20px;
}

/* Auftritt per Keyframe, damit der Hover danach ohne Restverzoegerung
   der Gruppenstaffelung reagiert. */
@keyframes ausgang-card-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.anim-ready #ausgangslage [data-anim-group] > *,
.anim-ready #leistungen .cards[data-anim-group] > * {
  opacity: 0;
  transform: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(1),
.anim-ready #leistungen .cards[data-anim-group].is-in > *:nth-child(1) {
  animation: ausgang-card-in 2.05s var(--ease-out) 0.14s backwards;
  opacity: 1;
}
.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(2),
.anim-ready #leistungen .cards[data-anim-group].is-in > *:nth-child(2) {
  animation: ausgang-card-in 2.05s var(--ease-out) 0.5s backwards;
  opacity: 1;
}
.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(3),
.anim-ready #leistungen .cards[data-anim-group].is-in > *:nth-child(3) {
  animation: ausgang-card-in 2.05s var(--ease-out) 0.86s backwards;
  opacity: 1;
}
.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(4),
.anim-ready #leistungen .cards[data-anim-group].is-in > *:nth-child(4) {
  animation: ausgang-card-in 2.05s var(--ease-out) 1.22s backwards;
  opacity: 1;
}
.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(5) {
  animation: ausgang-card-in 2.05s var(--ease-out) 1.58s backwards;
  opacity: 1;
}
.anim-ready #ausgangslage [data-anim-group].is-in > *:nth-child(6) {
  animation: ausgang-card-in 2.05s var(--ease-out) 1.94s backwards;
  opacity: 1;
}

.anim-ready #ausgangslage .pain-icon [data-anim-draw] {
  transition-duration: 3.8s;
}

.anim-ready #ausgangslage [data-anim-group]:not(.is-in) [data-anim-draw] {
  transition: none;
}

.anim-ready #ausgangslage .pain-card:nth-child(1) [data-anim-draw] { transition-delay: 0.7s; }
.anim-ready #ausgangslage .pain-card:nth-child(2) [data-anim-draw] { transition-delay: 1.06s; }
.anim-ready #ausgangslage .pain-card:nth-child(3) [data-anim-draw] { transition-delay: 1.42s; }
.anim-ready #ausgangslage .pain-card:nth-child(4) [data-anim-draw] { transition-delay: 1.78s; }
.anim-ready #ausgangslage .pain-card:nth-child(5) [data-anim-draw] { transition-delay: 2.14s; }
.anim-ready #ausgangslage .pain-card:nth-child(6) [data-anim-draw] { transition-delay: 2.5s; }

@media (hover: hover) and (pointer: fine) {
  #ausgangslage .pain-card:hover,
  #leistungen .cards .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
  }

  #ausgangslage .pain-card:hover {
    border-color: color-mix(in srgb, var(--signal) 48%, var(--line));
  }

  #leistungen .cards .card:hover {
    border-color: color-mix(in srgb, var(--lead) 48%, var(--line));
  }

  #ausgangslage .pain-card:hover .pain-icon {
    transform: scale(1.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ausgangslage .pain-card:hover,
  #leistungen .cards .card:hover {
    transform: none;
  }

  #ausgangslage .pain-card:hover .pain-icon {
    transform: none;
  }
}

/* Der Umschwung: vier 3D-Flip-Karten. Ohne JavaScript stehen Ist und Ziel
   untereinander. Vorderseite Heute (--ink-soft, --signal), Rueckseite Danach
   (--lead-text). Siehe design_specs.md 2c. */
.umschwung-flips {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.umschwung-flips > li {
  min-width: 0;
  display: flex;
}

.umschwung-flip {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.umschwung-flip-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.umschwung-flip-face {
  position: relative;
  padding: 12px 16px 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}

.umschwung-flip-face::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
}

.umschwung-flip-front::before {
  background: var(--signal);
}

.umschwung-flip-back::before {
  background: var(--lead);
}

.umschwung-idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.umschwung-satz {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.45;
}

.umschwung-flip-front .umschwung-satz {
  color: var(--ink-soft);
}

.umschwung-flip-back .umschwung-satz {
  color: var(--lead-text);
}

.umschwung-mark {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.umschwung-mark-ist {
  color: var(--signal);
}

.umschwung-mark-ziel {
  color: var(--lead-text);
}

.umschwung-hint {
  display: none;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.umschwung-flips.is-interactive .umschwung-flip {
  cursor: pointer;
  perspective: 1100px;
}

.umschwung-flips.is-interactive + .umschwung-hint {
  display: block;
}

.umschwung-flips.is-interactive .umschwung-flip-inner {
  display: grid;
  flex: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}

.umschwung-flips.is-interactive .umschwung-flip-face {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.umschwung-flips.is-interactive .umschwung-satz {
  flex: 1;
}

.umschwung-flips.is-interactive .umschwung-flip-front {
  transform: rotateY(0deg);
}

.umschwung-flips.is-interactive .umschwung-flip-back {
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--lead-tint) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--lead) 22%, var(--line-soft));
}

.umschwung-flips.is-interactive .umschwung-flip.is-flipped .umschwung-flip-inner {
  transform: rotateY(180deg);
}

.umschwung-flips.is-interactive .umschwung-flip:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
  border-radius: var(--radius-l);
}

@media (hover: hover) and (pointer: fine) {
  .umschwung-flips.is-interactive .umschwung-flip:hover .umschwung-flip-face {
    box-shadow: var(--shadow-l);
  }
}

@media (min-width: 640px) {
  .umschwung-flips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 980px) {
  .umschwung-flips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .umschwung-flips.is-interactive .umschwung-flip-inner {
    transition: none;
  }
}

/* Sicherheitsband: reine Textblaecke auf .section-dark, deren Kontrast
   bereits ueber die generischen .section-dark-Regeln (Abschnitt 03) steht. */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 44px;
  margin-top: 30px;
}

.security-point {
  padding-left: 18px;
  border-left: 2px solid var(--lead-bright);
}

.security-point h3 {
  margin-bottom: 8px;
}

@media (max-width: 680px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Wirtschaftlichkeit: hervorgehobenes Zitat */
.pull-quote {
  margin: 1.6rem 0;
  padding-left: 20px;
  border-left: 3px solid var(--lead);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 46ch;
}

/* Kundenstimmen */
.testimonial-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 26px;
}

.testimonial-grid {
  display: grid;
  gap: 16px;
}

.testimonial-card {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.testimonial-card blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

.testimonial-card figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.testimonial-photo {
  align-self: stretch;
}

.testimonial-photo .inline-photo-img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .testimonial-layout {
    grid-template-columns: 1fr;
  }

  .testimonial-photo {
    order: -1;
    max-width: 360px;
  }

  .testimonial-photo .inline-photo-img {
    height: auto;
  }
}