/* ============================================================
   dennisduncker.de – Angebotsseiten (Growth Radar, Wachstumsentscheid,
   Strategic Second Opinion, Go-to-Market, Interim & Fractional CMO)
   Lädt zusätzlich zu chrome.css + styles.css. Tokens kommen von dort.
   Struktur:
   01 Grundraster        05 Ablauf + Timeline     09 FAQ-Override
   02 Hero + Artefakte   06 Artefakte (Ergebnis)  10 Angebot + Anfrage
   03 Situationen/Frage  07 Reifegrad             11 Wenn es weitergeht
   04 Einwand/Statement  08 Wahrer Wert Diagramme 12 Responsive
   ============================================================ */

:root {
  --ice-60: rgba(216,232,239,0.6);
  --line-dark: rgba(216,232,239,0.14);
  --ang-max: 1180px;
}

/* ── 01 GRUNDRASTER ── */
.ang-section { padding: var(--sect-y) var(--pad-x); border-top: 1px solid var(--line); }
.ang-section.bg-off   { background: var(--off-white); }
.ang-section.bg-ice   { background: var(--ice-light); }
.ang-section.bg-white { background: var(--white); }
.ang-inner { max-width: var(--ang-max); margin: 0 auto; }

.ang-head { margin-bottom: 48px; }
.ang-head .eyebrow { margin-bottom: 24px; }
.ang-head .display-h { margin-bottom: 0; }
.ang-head-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 48px;
}
.ang-head-row .eyebrow { margin-bottom: 24px; }
.ang-sub { font-size: 1.05rem; line-height: 1.75; color: var(--text-body); max-width: 520px; }
.ang-head-row .ang-sub { margin: 0; }

.ang-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px); align-items: start;
}
/* Spalten wachsen nie über ihre Hälfte hinaus: feste Wortgruppen in Überschriften (.nb, .nb-w) verbreiterten sonst per
   Mindestbreite die Textspalte und drückten Kacheln, Karten und Visuals rechts zusammen (DC „Das richtige Maß“ bei 901 px: 181 statt 385 px, 25.09.) */
.ang-split > *, .ang-head-row > * { min-width: 0; }
.ang-split.is-center { align-items: center; }
.ang-split.is-wide { gap: clamp(48px, 6vw, 96px); }
.ang-split .eyebrow { margin-bottom: 24px; }
.ang-wert-solo .eyebrow { margin-bottom: 24px; } /* Wert-Sektion ohne Visual (Interim): Kicker hing ohne Abstand an der Headline (Sichtung 21.09.) */
.ang-split .display-h { margin-bottom: 24px; }
.ang-split .display-h:last-child { margin-bottom: 0; }

.angebot .display-h { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }

/* Zitat/Closing: dieselben Regeln wie .quote-block/.quote-text der Startseite (Linie, Einzug, keine synthetische Kursive) */
.ang-closing { border-left: 3px solid var(--slate-blue); padding: 6px 0 6px 28px; margin-top: 24px; }
.ang-closing p {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.15rem; line-height: 1.6; letter-spacing: -0.01em; color: var(--navy);
}

/* ── 02 HERO ── */
.ang-hero {
  background:
    radial-gradient(110% 85% at 8% 4%, rgba(34,55,70,0.7) 0%, rgba(34,55,70,0) 55%),
    var(--navy);
  padding: calc(var(--header-h) + clamp(72px, 10vw, 128px)) var(--pad-x) clamp(64px, 8vw, 112px);
}
.ang-hero-inner {
  max-width: var(--ang-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.ang-hero .eyebrow { margin-bottom: 28px; }
.ang-h1 {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.04em;
  color: var(--white); margin-bottom: 24px;
  overflow-wrap: anywhere; hyphens: manual;
}
.ang-h1.is-large { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.0; }
.ang-h1.is-tight { font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem); } /* lange Headline (Go-to-Market): maximal vier Zeilen ab 1180px */
.ang-h1.is-long { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.2rem); } /* sehr lange Headline (Growth Radar, 12 Wörter): vier Zeilen ab 1280px */
.ang-hero-sub { font-size: 1.05rem; line-height: 1.75; color: var(--ice-mid); max-width: 520px; margin-bottom: 32px; }
.ang-hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ang-micro {
  font-family: var(--font-display);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ice-60); line-height: 1.8;
}
.ang-hero-visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.ang-hero-visual.is-compact { min-height: 360px; }

/* Hero mit Keyvisual (reserviertes Bildformat für individuelle Visuals auf allen Angebotsseiten):
   Text links am Inhaltsraster, Bild rechts als volle Spalte unter der Kopfzeile, object-fit: cover
   wie das Porträt im Startseiten-Hero. Master 4:5, Motivmitte auf 40 % Höhe. */
.ang-hero.has-image { padding: 0; display: grid; grid-template-columns: 1.2fr 1fr; min-height: clamp(600px, 82vh, 860px); }
.ang-hero.has-image .ang-hero-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 96px)) clamp(32px, 3vw, 48px) clamp(56px, 8vw, 96px) max(var(--pad-x), calc((100vw - var(--ang-max)) / 2));
}
.ang-hero-copy { max-width: 640px; }
.ang-hero-photo { position: relative; overflow: hidden; margin-top: var(--header-h); background: var(--navy-deep); }
.ang-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }







/* Persönlicher Proof-Moment (Interim & Fractional CMO): Arbeitsfoto, Haltung, Fakten */
.ang-person-photo { width: min(100%, 440px); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--navy-mid), var(--navy-deep)); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.5); }
.ang-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ang-person-facts { display: flex; flex-direction: column; margin-top: 28px; }
.ang-person-facts li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.5; color: var(--navy); }
.ang-person-facts li:last-child { border-bottom: 1px solid var(--line); }
.ang-textlink { display: inline-block; margin-top: 24px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); }
.ang-textlink:hover { color: var(--navy); }

/* Marketing OS: Bildplatz 3:2 rechts, Bausteine als Zeile */
.ang-teaser-visual { margin: 0; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--navy-deep); box-shadow: 0 40px 80px -36px rgba(14,34,51,0.5); }
.ang-teaser-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ang-teaser-terms { margin-top: 24px; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-blue); line-height: 1.8; }
.ang-teaser-terms + .ang-line-note { margin-top: 24px; }

/* ── 03 SITUATIONEN + FRAGE ── */
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: var(--ang-max); }
.sit-grid .problem-text { font-size: 1rem; }

.ang-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ang-kacheln.is-six { grid-template-columns: repeat(3, 1fr); }
.ang-kachel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 24px; }
.ang-kachel b {
  display: block; font-family: var(--font-display);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px;
}
.ang-kachel p { font-size: 0.92rem; line-height: 1.6; color: var(--text-body); }
/* Kurze Kacheltexte ausbalanciert und ohne Silbentrennung: in 200 px breiten Kacheln trennte der Lauftext-Satz „aus-spielen“, „ver-dienen“
   und ließ „Nächstes“ allein in einer Zeile stehen (Growth Radar, „Die Frage, die bleibt“, 25.09.) */
main .ang-kachel p { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }

/* Bausteine als Liste (Go-to-Market): zwei Spalten, Haarlinien, keine Kacheln */
.ang-facets { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-self: start; }
.ang-facet { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.ang-facet:last-child { border-bottom: 1px solid var(--line); }
.ang-facet b { display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.ang-facet p { font-size: 0.92rem; line-height: 1.6; color: var(--text-body); }
@media (min-width: 901px) { .ang-facet:nth-last-child(2) { border-bottom: 1px solid var(--line); } }

/* ── 04 EINWAND + STATEMENT ── */
.ang-einwand-text { font-size: 1.1rem; line-height: 1.75; color: var(--text-body); max-width: 520px; padding-top: 6px; }
.ang-einwand-text strong { color: var(--navy); font-weight: 600; }
.ang-einwand-text + .ang-einwand-text { padding-top: 0; margin-top: 16px; }

/* Diagramm: Architektur unter Kreation/Development/Produktion, minimal */
.dg-stack { margin-top: 32px; max-width: 520px; }
.dg-stack-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.dg-stack-top div { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 14px 12px; text-align: center; }
.dg-stack-top b, .dg-stack-base b { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.dg-stack-top b { display: block; color: var(--navy); }
.dg-stack-base { background: var(--navy); border-radius: 6px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dg-stack-base b { color: var(--white); }
.dg-stack-base span { font-size: 0.72rem; color: var(--ice-mid); }

/* Diagramm: Festanstellung vs. Mandat (Zeitachse) */
.dg-hire { margin-top: 32px; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.dg-hire-row > b { display: block; font-size: 0.78rem; font-weight: 500; color: var(--navy); margin-bottom: 8px; }
.dg-hire-segs { display: flex; gap: 3px; }
.dg-seg { min-width: 0; }
.dg-seg i { display: block; height: 8px; border-radius: 3px; margin-bottom: 6px; }
.dg-seg span {
  display: block; font-family: var(--font-display); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-blue); line-height: 1.3;
}
.dg-seg.is-narrow span { white-space: nowrap; }
.dg-hire-note { font-size: 0.72rem; color: var(--text-muted); }

.ang-statement {
  background: linear-gradient(170deg, #071827 0%, #0e2535 55%, #223746 100%);
  padding: clamp(88px, 12vw, 160px) var(--pad-x);
}
.ang-statement p {
  max-width: 1000px; margin: 0 auto; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--white);
}
.ang-statement p span { color: var(--ice-mid); }
.ang-statement.is-long p { font-size: clamp(1.7rem, 1rem + 2.5vw, 3.2rem); line-height: 1.12; } /* langer Manifesto-Satz (Decision Case) */

/* ── 05 ABLAUF ── */
.ang-steps { display: flex; flex-direction: column; }
.ang-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.ang-step:last-child { border-bottom: 1px solid var(--line); }
.ang-step-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ice-mid); line-height: 1; }
.ang-step h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 8px; }
.ang-step p { font-size: 0.95rem; line-height: 1.65; color: var(--text-body); }
/* Zeitmarke je Schritt (Interim, Panel 23.09.): gleiche Machart wie .tl-day im Radar-Zeitstrahl */
.ang-step-day { display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 8px; }
.ang-split .ang-head-col .display-h { margin-bottom: 44px; }

/* Zehn-Tage-Timeline (Growth Radar) */
.tl-bars { display: flex; gap: 4px; margin-bottom: 10px; }
.tl-bars i { display: block; height: 6px; border-radius: 3px; }
.tl-labels {
  display: flex; gap: 4px; margin-bottom: 40px;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-blue);
}
.tl-labels .between { display: flex; justify-content: space-between; }
.tl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.tl-col { border-top: 1px solid var(--line); padding-top: 22px; }
.tl-day { display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 10px; }
.tl-col h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 12px; }
.tl-col p { font-size: 0.95rem; line-height: 1.65; color: var(--text-body); }
.ang-line-note {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 12px;
}
.ang-line-note::before { content: ''; width: 16px; height: 1px; background: var(--slate-blue); flex: none; }
.ang-facets + .ang-line-note { margin-top: 20px; padding-top: 0; border-top: 0; }
.ang-tag { display: inline-block; margin-left: 10px; padding: 3px 8px; border: 1px solid var(--ice-mid); border-radius: 999px; font-size: 0.56rem; letter-spacing: 0.12em; color: var(--slate-blue); vertical-align: middle; }

/* Delivery-Proof: eingeschobener typografischer Beleg direkt unter dem Ablauf */
.ang-proof { margin-top: 40px; max-width: 760px; background: var(--ice-light); border-radius: var(--radius-card); padding: 28px 32px 30px; }
.ang-proof-kicker {
  display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 12px;
}
.ang-proof-statement {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--navy); margin-bottom: 10px;
}
.ang-proof-statement { text-wrap: balance; }
.ang-proof-statement .nb { white-space: nowrap; } /* Satz bleibt zusammen: Umbruch nur zwischen den Sätzen */
.ang-proof-text { font-size: 0.92rem; line-height: 1.65; color: var(--text-body); max-width: 560px; text-wrap: pretty; }

/* ── 06 ERGEBNIS ── */
.ang-result .display-h { margin-bottom: 36px; }

/* Ergebnis mit Bild: Artefakt als Freisteller (kein Rahmen, weicher Schatten), Outputs ohne Nummern */
.ang-artefact-image { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ang-artefact-image img { display: block; width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 24px 30px rgba(14,34,51,0.18)); }
/* Renderings mit eigenem Schatten auf weißem Grund (Growth Report): kein CSS-Schatten, etwas mehr Breite */
.ang-artefact-image.is-render img { filter: none; max-width: 640px; }
/* Dunkles Rendering als Karte (Go-to-Market: Blueprint auf Navy): volle Spaltenbreite, abgerundete Ecken */
.ang-artefact-image.is-card img { border-radius: var(--radius-card); max-width: none; }
.ang-offer-visual.is-card img { border-radius: var(--radius-card); }
.ang-artefact-image figcaption { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ang-artefact-image figcaption b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); } /* Aussage zum Artefakt */
.ang-artefact-image figcaption > span { /* Platzhalter-/Beispielhinweis; nur das direkte Kind, nicht die Sprach-Spans in <b> */
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.ang-outputs { display: flex; flex-direction: column; }
.ang-outputs li { padding: 20px 0; border-top: 1px solid var(--line); }
.ang-outputs li:last-child { border-bottom: 1px solid var(--line); }
.ang-outputs b {
  display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px;
}
.ang-outputs p { font-size: 0.97rem; line-height: 1.6; color: var(--text-body); max-width: 480px; }

/* ── 07 REIFEGRAD (Go-to-Market) ── */
.rf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rf-card { background: var(--navy); border-radius: var(--radius-card); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.rf-card b { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-on-dark); }
.rf-card strong { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
.rf-card p { font-size: 0.92rem; line-height: 1.65; color: var(--ice-mid); }
.rf-card .rf-price { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); }

/* ── 08 DER WAHRE WERT: DIAGRAMME ── */
.dg-card { position: relative; width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 32px); }
.dg-card > b, .dg-title {
  display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 18px;
}

/* Möglichkeitsraum (Growth Radar) */
.dg-field { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.dg-field > b { position: absolute; top: 18px; left: 20px; margin: 0; }
.dg-known { position: absolute; left: 12%; top: 24%; width: 40%; height: 44%; background: var(--ice-light); border: 1px solid var(--ice-mid); border-radius: 8px; }
.dg-known b { position: absolute; bottom: 10px; left: 12px; font-family: var(--font-display); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-blue); }
.dg-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--slate-blue); }
.dg-dot.is-faint { width: 6px; height: 6px; background: var(--ice-mid); }
.dg-fav { position: absolute; right: 20%; top: 44%; display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.dg-fav i { width: 16px; height: 16px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 7px rgba(0,71,171,0.14); }
.dg-fav b { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
/* Schmale Felder (mobil bis 480 px, 901–1180 px): das einzeilige Label „Klarer Favorit“ lief in den Kasten „Bekannte Optionen“ (25.09.).
   Unter 520 px Feldbreite steht es zweizeilig, rechtsbündig am Punkt, und der Punkt rückt nach außen. */
.dg-field { container-type: inline-size; }
@container (max-width: 519px) {
  .dg-fav { right: 10%; }
  .dg-fav b { white-space: normal; width: min-content; text-align: right; line-height: 1.3; }
}

/* Validation Grid (Wachstumsentscheid) */
.dg-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dg-cell { background: var(--ice-light); border: 1px solid var(--ice-mid); border-radius: 8px; padding: 22px 18px 18px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.dg-cell b { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.dg-cell span { font-size: 0.72rem; color: var(--text-muted); }
.dg-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--cobalt); color: var(--white); font-family: var(--font-display);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 0 0 8px rgba(0,71,171,0.14); white-space: nowrap;
}

/* Vier Ausgänge (Second Opinion) */
.dg-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dg-outcome { background: var(--ice-light); border: 1px solid var(--ice-mid); border-radius: 8px; padding: 22px 16px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.dg-outcome i { width: 12px; height: 12px; border-radius: 50%; background: var(--slate-blue); display: block; }
.dg-outcome strong { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 4px; }
.dg-outcome b { font-family: var(--font-display); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; color: var(--slate-blue); }

/* Urteilsschlüssel (Second Opinion): zwei Gruppen, je Zeile Stempel · Wort · Bedeutung */
/* ── Urteilsschlüssel (Second Opinion): zwei Anlässe als Umschalter ──
   Zwei Wörter als Segmente nebeneinander auf der Haarlinie („Konzept“ | „Engpass“, Manrope 800), Sichtung 21.09.: nur ein Wort je Segment.
   Zustand = Navy-Unterstrich, Cobalt nur beim Hover auf dem nicht gewählten Segment. Beide Gruppen liegen in
   derselben Grid-Zelle: die Karte behält die Höhe der höheren Gruppe, der Wechsel ist ein Cross-fade. */
.dg-key > b { margin-bottom: 14px; }
.dg-key-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); } /* Segmente so breit wie das Wort, Unterstrich nur unter dem Wort */
.dg-key-tab { position: relative; display: block; text-align: left; padding: 4px 0 12px; margin: 0; background: none; border: 0; cursor: pointer; color: var(--text-muted); font: inherit; appearance: none; }
.dg-key-word { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: inherit; transition: color 0.2s; }
.dg-key-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); opacity: 0; transition: opacity 0.2s; }
.dg-key-tab.is-on { color: var(--navy); cursor: default; }
.dg-key-tab.is-on::after { opacity: 1; }
.dg-key-tab:not(.is-on):hover, .dg-key-tab:not(.is-on):focus-visible { color: var(--cobalt); }
.dg-key-panels { display: grid; grid-template-rows: repeat(var(--rows, 4), auto); } /* --rows kommt aus dem Generator */
.dg-key-group { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 0.26s ease, visibility 0.26s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Subgrid: Zeile i ist in Konzept und Engpass gleich hoch, Trennlinien bleiben beim Umschalten stehen; ohne Subgrid-Support stapeln die Zeilen wie bisher */
.dg-key-group.is-on ~ .dg-key-group { transform: translateX(6px); } /* Richtungsschub: verdeckte Gruppen warten links bzw. rechts der aktiven, der Inhalt kommt aus Richtung des gewählten Reiters */
.dg-key-group.is-on { opacity: 1; visibility: visible; transform: none; }
.dg-key-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dg-key-row > b { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: var(--slate-blue); } /* Untergrenze 0,66rem */
.dg-key-row > p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-body); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.dg-key-row > p strong { display: block; margin-bottom: 1px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); } /* Handlung fett auf eigener Zeile, darunter der Grund, ausbalanciert (Panel 25.09.: vorher stand in schmalen Spalten „Annahmen“ allein) */

/* Time-to-Revenue (Go-to-Market): zwei Balken, eine Legende */
.ttr-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
.ttr-row > b { font-size: 0.78rem; font-weight: 500; color: var(--navy); }
.ttr-bar { display: flex; gap: 3px; height: 12px; }
.ttr-bar i { display: block; border-radius: 3px; }
.ttr-bar .cost, .ttr-legend .cost { background: var(--ice-mid); }
.ttr-bar .rev, .ttr-legend .rev { background: var(--cobalt); }
.ttr-legend { display: flex; gap: 20px; margin-top: 24px; font-family: var(--font-display); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-blue); }
.ttr-legend span { display: flex; align-items: center; gap: 8px; }
.ttr-legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.dg-card.is-ttr > b { margin-bottom: 24px; }

/* Wahrer Wert ohne Diagramm (Interim & Fractional) */
.ang-wert-solo { max-width: 860px; }
.ang-wert-solo .display-h { margin-bottom: 32px; }
.ang-wert-solo .ang-body { font-size: 1.15rem; line-height: 1.75; color: var(--text-body); margin-bottom: 32px; }
.ang-wert-solo .ang-closing p { font-size: 1.25rem; }

/* ── 04b ZWEI ANLÄSSE (Strategic Second Opinion) ── */
.ang-head-anlaesse .display-h { margin-bottom: 20px; }
.ang-anlaesse { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.ang-anlass { padding: 26px 0 8px; border-top: 1px solid var(--line); }
.ang-anlass > b { display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 18px; }
.ang-anlass-lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--navy); margin-bottom: 14px; }
.ang-anlass-text { font-size: 0.97rem; line-height: 1.65; color: var(--text-body); max-width: 46ch; }
/* Zwei Preiszeilen (Anlass 1 / Anlass 2) im bestehenden Preisblock */
.ang-price-lines { display: flex; flex-direction: column; gap: 16px; }
.ang-price-line > small { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 6px; }
.ang-price-lines .ang-price { font-size: clamp(1.9rem, 2.5vw, 2.4rem); }

/* ── 04c DAS RICHTIGE MASS (Decision Case) ── */
/* Eigene Sektion unter dem Statement: Skala zu schmal · genau richtig · zu groß über drei Karten.
   Außen Schraffur (finanzierte Hoffnung, finanzierte Vorsicht), Mitte Kobalt (Decision Case). Ab 900 px gestapelt,
   die Skala entfällt, dieselben Begriffe stehen dann als Tag in der Karte (Desktop: nur für Screenreader). */
.mass-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; align-items: center; margin-bottom: 18px; }
.mass-scale > span {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy);
}
.mass-scale > span.is-core { color: var(--cobalt); }
.mass-scale i { flex: 1; height: 1.5px; background: rgba(14,34,51,0.35); }
.mass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.mass-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(14,34,51,0.05); }
.mass-card.is-core { box-shadow: 0 1px 2px rgba(14,34,51,0.06), 0 16px 36px rgba(14,34,51,0.12); }
.mass-strip { flex: none; height: 64px; background-color: var(--white); }
.mass-card.is-hope .mass-strip { background-image: repeating-linear-gradient(45deg, rgba(14,34,51,0.16) 0 2px, transparent 2px 9px); }
.mass-card.is-care .mass-strip { background-image: repeating-linear-gradient(0deg, rgba(14,34,51,0.16) 0 2px, transparent 2px 12px); }
.mass-card.is-core .mass-strip {
  display: flex; align-items: center; padding: 0 28px; background: var(--cobalt); color: var(--white);
  font-family: var(--font-display); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.mass-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 28px; }
.mass-tag { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.mass-title { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.625rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--navy); }
.mass-card .mass-claim { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--navy); }
.mass-card .mass-quote { font-size: 0.94rem; line-height: 1.6; color: var(--text-body); }
.mass-card :is(.mass-claim, .mass-quote, .mass-verdict) { hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; } /* kurze Sätze nicht trennen */
/* Mittlere Karte: steht an der Stelle, an der außen das Zitat steht – eine Aussage statt eines Zitats, deshalb Navy
   und Display-Schnitt (Cobalt ist im Projekt den Links und Hovern vorbehalten).
   Die Chipreihe GO · ADJUST · VALIDATE · STOP ist am 22.09. entfallen (steht in „Das Ergebnis“ und im Artefaktbild). */
.mass-card .mass-verdict { font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; line-height: 1.6; color: var(--navy); }
.mass-cost { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); }
@media (min-width: 901px) {
  .mass-tag { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* steht darüber in der Skala */
}
@media (max-width: 900px) {
  .mass-scale { display: none; }
  .mass-grid { grid-template-columns: 1fr; gap: 12px; }
  .mass-strip { height: 28px; }
  .mass-card.is-care .mass-strip { background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(14,34,51,0.16) 5px 7px); }
  .mass-card.is-core .mass-strip { height: 48px; padding: 0 20px; }
  .mass-body { padding: 22px 20px; }
}

/* ── 09 FAQ (Override: Angebotsseiten auf Off-White, Kicker "FAQ") ── */
.angebot .faq { background: var(--off-white); }
.angebot .faq-inner { max-width: var(--ang-max); margin: 0 auto; }

/* ── 10 ANGEBOT + ANFRAGE ── */
.ang-offer .display-h { margin-bottom: 36px; }
.ang-price-row {
  display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap;
  padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.ang-price { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 3vw, 3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--navy); line-height: 1; white-space: nowrap; }
.ang-price small { font-size: 0.5em; font-weight: 700; letter-spacing: 0; }
.ang-price .per { font-size: 0.42em; font-weight: 700; letter-spacing: 0; color: var(--slate-blue); }
.ang-price-meta {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; /* 10,6 → 12,5 px (Panel Growth Radar 25.09.: zu klein zum Prüfen) */
  text-transform: uppercase; color: var(--slate-blue); padding-bottom: 6px; line-height: 1.8; max-width: 420px;
}
.ang-price-meta small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-muted); }
.ang-included-label { display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 28px 0 8px; }
.ang-included { display: flex; flex-direction: column; }
.ang-included li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 0.97rem; line-height: 1.55; color: var(--text-body); }
.ang-included li:last-child { border-bottom: 0; }
.ang-included li > span:last-child { text-wrap: pretty; }
.ang-offer-note { margin-top: 28px; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); max-width: 46ch; }
.ang-offer-note + .ang-offer-note { margin-top: 10px; }
.ang-offer-when { margin-top: 28px; max-width: 52ch; padding: 18px 20px; background: var(--ice-light); border: 1px solid var(--ice-mid); border-radius: 10px; }
.ang-offer-when b { display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 6px; }
.ang-offer-when p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--navy); text-wrap: balance; } /* 2–4 Zeilen: ausbalanciert statt „Übernahme“ allein in Zeile 3 (320 px, 25.09.) */
.dg-outcomes.is-2x2 { grid-template-columns: 1fr 1fr; }
.ang-offer-option { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.6; color: var(--text-body); max-width: 52ch; }
.ang-offer-option b { display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 6px; }
/* Visual 3: Layflat des Artefakts unter dem Angebotsblock, links am Preis, ohne Rahmen */
.ang-offer-visual { margin: 40px 0 0; max-width: 440px; }
.ang-offer-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(14,34,51,0.16)); }
.ang-offer-visual.is-render { max-width: 560px; }
/* Hochformatige Artefakte in der Angebotsspalte (Challenger Memo als Stapel, 1,11:1): auf die HÖHE der übrigen
   Angebotsbilder deckeln, nicht auf deren Breite. decision-dossier-open 554x350, growth-report-pad 554x367,
   gtm-blueprint-cover 554x369 – 400 px Breite ergeben hier 400x359. Ungedeckelt stünde der Stapel bei 554x497
   und damit so groß wie das Ergebnisbild oben (Sichtung 23.09.). */
.ang-offer-visual.is-tall { max-width: 400px; }
@media (max-width: 900px) { .ang-offer-visual.is-hide-mobile { display: none; } } /* mobil folgt das Formular direkt auf den Angebotskasten (Decision Case, Panel 23.09.) */
.ang-offer-visual.is-render img { filter: none; }
.ang-offer-visual figcaption { margin-top: 16px; font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.ang-form-card { background: var(--ice-light); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.ang-form-card .eyebrow { margin-bottom: 20px; }
.ang-form-h { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 14px; }
.ang-form-copy { font-size: 0.97rem; line-height: 1.7; color: var(--text-body); margin-bottom: 28px; }
.ang-form { display: flex; flex-direction: column; gap: 16px; }
.ang-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--navy); }
.ang-field .opt { color: var(--text-muted); font-weight: 400; }
.ang-field input, .ang-field textarea {
  width: 100%; background: var(--white); border: 1px solid rgba(14,34,51,0.16); border-radius: var(--radius-btn);
  padding: 13px 14px; font: inherit; font-size: 1rem; font-weight: 400; /* 16 px: iOS zoomt beim Fokus nicht */ color: var(--navy); line-height: 1.6;
}
.ang-field input::placeholder, .ang-field textarea::placeholder { color: #6b7480; } /* 4,7:1 auf Weiß */
.ang-field input:focus, .ang-field textarea:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.ang-field textarea { min-height: 120px; resize: vertical; }
.ang-field.is-invalid input, .ang-field.is-invalid textarea { border-color: #c0392b; }
.ang-field-hint { font-size: 0.78rem; font-weight: 400; color: #c0392b; }
.ang-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ang-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ang-form .btn { margin-top: 6px; align-self: flex-start; }
.ang-form-micro { font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.01em; } /* Notizen 14 px, Mikrozeile 13 px: Käufer lesen hier Preis, Reise, Start (Panel 25.09.) */
.ang-form-cal { display: inline-block; margin-top: 16px; font-size: 0.86rem; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--ice-mid); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } /* Kalenderlink unter dem Formular (Intro-Call), leiser als der Button */
.ang-form-cal:hover { color: var(--cobalt); border-color: var(--cobalt); }
.ang-form-status { display: none; gap: 12px; align-items: flex-start; font-size: 0.9rem; line-height: 1.6; color: var(--navy); background: var(--white); border: 0; border-radius: 8px; padding: 14px 16px; outline: none; }
.ang-form-status.is-visible { display: flex; animation: angFadeIn 0.25s ease both; }
@keyframes angFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ang-status-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--slate-blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.ang-status-mark { flex: none; margin-top: 3px; }
.ang-form-status.is-error .ang-status-mark { background: #c0392b; color: var(--white); border-color: #c0392b; }
.ang-form-status a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.ang-form .btn[disabled] { opacity: 0.6; cursor: progress; }

/* ── 11 WENN ES WEITERGEHT ── */
.ang-next { background: var(--off-white); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) var(--pad-x); }
.ang-next-inner { max-width: var(--ang-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ang-next-inner.is-solo { grid-template-columns: 1fr; } /* ohne Folgelinks: am Inhaltsraster wie die Zwei-Spalten-Variante */
.ang-next-inner.is-solo .ang-next-copy { max-width: 560px; }
.ang-next .eyebrow { margin-bottom: 20px; }
.ang-next-copy { font-size: 1rem; line-height: 1.75; color: var(--text-body); max-width: 480px; }
.ang-next-links { display: flex; flex-direction: column; gap: 10px; }
.ang-next-link {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 22px 26px; color: var(--navy); transition: border-color 0.25s;
}
.ang-next-link:hover { border-color: var(--ice-mid); color: var(--navy); }
.ang-next-link:hover .arrow { transform: translateX(4px); } /* wie die Angebotszeilen: der Pfeil trägt die Bewegung */
.ang-next-link small { display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-blue); margin-bottom: 6px; }
.ang-next-link strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; }
.ang-next-link .arrow { font-size: 1.1rem; color: var(--slate-blue); flex: none; transition: transform 0.25s var(--ease-out); }

/* Fokusring auf dunklen Flächen */
.ang-hero :focus-visible, .ang-statement :focus-visible, .rf-card :focus-visible { outline-color: var(--ice); }

/* ── 12 RESPONSIVE ── */
@media (max-width: 1100px) {
  .ang-kacheln.is-six { grid-template-columns: 1fr 1fr; }
  .rf-grid { grid-template-columns: 1fr; }
  .dg-outcomes { grid-template-columns: 1fr 1fr; }
}
/* 2×2-Kacheln neben dem Text: bei 901–1200 px (Tablet quer, kleine Laptops) blieben ~150–200 px je Kachel, Wörter standen einzeln.
   Dort einspaltig; ab 1201 px wieder 2×2 (25.09.) */
@media (min-width: 901px) and (max-width: 1200px) {
  .ang-split > .ang-kacheln:not(.is-six) { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ang-hero { padding: calc(var(--header-h) + clamp(40px, 8vw, 64px)) var(--pad-x) 56px; }
  .ang-hero-inner, .ang-split, .ang-head-row, .ang-next-inner { grid-template-columns: 1fr; }
  /* Rasterzellen dürfen schrumpfen. Ohne min-width:0 setzt die Mindestbreite des Inhalts (lange deutsche
     Komposita in der H2, nowrap-Wendungen in der Enthalten-Liste) die Spalte auf 404 px bei 390 px Viewport;
     body{overflow-x:clip} verbirgt das, das Angebotsvisual wurde rechts um 38 px beschnitten. Gefunden 23.09. */
  .ang-split > *, .ang-head-row > *, .ang-next-inner > * { min-width: 0; }
  .ang-hero-inner { gap: 40px; }
  .ang-hero-visual { min-height: 0; }
  .ang-hero.has-image { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--header-h) + clamp(40px, 8vw, 64px)) var(--pad-x) 56px; }
  .ang-hero.has-image .ang-hero-main { padding: 0; }
  .ang-hero-copy { max-width: none; }
  .ang-hero-photo { margin-top: 40px; height: clamp(240px, 62vw, 420px); border-radius: var(--radius-card); }
  .ang-hero-photo img { object-position: 50% 50%; } /* Mobile-Ausschnitt 3:2, Motiv mittig */
  .ang-artefact-image img { max-width: 480px; }
  .ang-offer-visual { max-width: 380px; }
  .ang-offer-visual.is-render { max-width: 460px; }
  .ang-offer-visual.is-tall { max-width: 340px; } /* dieselbe Logik wie oben: 340 px ergeben 305 px Höhe,
                                                     so hoch wie decision-dossier-open (291) und growth-report-pad (305) hier */
  .ang-split { gap: 32px; }
  .ang-split .ang-head-col .display-h { margin-bottom: 28px; }
  .sit-grid, .ang-kacheln, .ang-kacheln.is-six, .ang-facets { grid-template-columns: 1fr; }
  .ang-anlaesse { grid-template-columns: 1fr; }
  .sit-grid .problem-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 24px 22px; }
  .tl-cols { grid-template-columns: 1fr; gap: 20px; }
  .ang-field-row { grid-template-columns: 1fr; }
  .ang-form .btn { align-self: stretch; }
  .ang-price-row { gap: 16px; }
  .dg-pill { font-size: 0.58rem; padding: 10px 14px; }
  .ang-head-row { margin-bottom: 36px; }
}
@media (max-width: 380px) {
  .ang-form-card { padding: 22px 18px; } /* 320 px: Formular nur 210 px breit, „Nachricht senden“ brach zweizeilig (25.09.) */
}
@media (max-width: 520px) {
  .dg-outcomes { grid-template-columns: 1fr 1fr; }
  .dg-key-row { grid-template-columns: 80px 1fr; } /* 80 statt 64 px: Engpass-Stempel seit 23.09. ausgeschrieben (LEADERSHIP 79 px) */
  .dg-key-tabs { gap: 24px; }
  .dg-outcome { min-height: 120px; }
  .dg-stack-top { grid-template-columns: 1fr; }
  .tl-labels { font-size: 0.55rem; }
  .ang-proof { padding: 24px 22px 26px; }
  .ang-proof-statement .nb { white-space: normal; } /* schmale Screens: natürlicher Umbruch, ausbalanciert */
  .ttr-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ang-next-link, .ang-next-link .arrow, .dg-key-group, .dg-key-tab::after { transition: none; }
  .dg-key-group { transform: none; }
  .ang-next-link:hover .arrow { transform: none; }
  .ang-form-status.is-visible, .mm-empty.is-visible { animation: none; }
}