/* =========================================================
   INVESTMENTORIN — MARKENWELT
   Warm, beige, orange. Kein Schwarz.
   Wird NACH style.css geladen.
   ========================================================= */

:root {
  --shadow-soft: 0 30px 70px -45px rgba(90, 60, 35, 0.45);
  --shadow-card: 0 18px 44px -28px rgba(90, 60, 35, 0.38);
  --r: 18px;
  --r-sm: 12px;
}

/* Alle Rundungen weicher — passt zu deiner Bildsprache */
.btn { border-radius: 100px; }
.real-photo { border-radius: var(--r); }

/* =========================================================
   TYPOGRAFIE-SYSTEM
   Serif  → nur Headlines und bewusste Editorial-Akzente
   Italic → Claim-Akzente
   Sans   → alles Funktionale: Navigation, Buttons, Trust,
            Labels, Zahlenwerte, Formulare
   ========================================================= */


/* Sans-Schrift für Auszeichnungen und kleine Beschriftungen.
   Navigation und Kopfzeile stehen bewusst NICHT mehr hier, sondern
   ausschließlich in css/navigation.css. */
.eyebrow, .btn,
.trust-item, .trust-badge, .nicola-badge, .tool-pill,
.cq-btn, .cr-gap, .tp-label, .cp-section-label, .cp-flow-item .cf-label,
.result-card .rc-label, .result-card .rc-note, .case-tab .ct-meta,
.footer-col h5, .footer-bottom,
.book-step, .bc-guarantee, .bc-sub, .cases-disclaimer,
.legal-updated, .path-step .ps-num, .freebie-card .fc-tag, .wissen-card .wc-cat {
  font-family: var(--sans);
}

/* Zahlen im Fall-Explorer und in den Faktenboxen bleiben Serif —
   dort ist der Editorial-Charakter gewollt. */
.cp-flow-item .cf-value,
.result-card .rc-value,
.tp-fact .tf-num,
.rating-summary .rs-score,
.bc-proof .bcp-score { font-family: var(--serif); }

/* Farbabgleich auf die neue warme Palette */

/* Sticky Header, der beim Scrollen minimal kompakter wird */


/* Sekundärer CTA: klar untergeordnet, als Textlink statt Button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--charcoal);
  padding: 10px 0;
  border: none;
  background: none;
  border-bottom: 1.5px solid rgba(90,60,35,0.25);
  border-radius: 0;
  transition: all 0.3s ease;
}
.btn-ghost:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }
.btn-ghost .btn-arrow { transition: transform 0.3s ease; }
.btn-ghost:hover .btn-arrow { transform: translateX(3px); }
.btn-primary { box-shadow: 0 8px 22px -8px rgba(255, 97, 0, 0.5); }
.btn-primary:hover { box-shadow: 0 12px 26px -8px rgba(255, 97, 0, 0.6); }
.btn-secondary { border-color: rgba(90,60,35,0.28); }
.btn-secondary:hover { border-color: var(--orange); color: var(--orange-dark); background: rgba(255,97,0,0.05); }

.ph-img::before { background: repeating-linear-gradient(45deg, rgba(255,97,0,0.05) 0 2px, transparent 2px 26px); }
.sticky-cta { border-top-color: rgba(90,60,35,0.14); }

/* ---------------------------------------------------------
   LAYOUT-STABILITÄT
   Verhindert das Verrutschen beim Verkleinern des Fensters
   --------------------------------------------------------- */

*, *::before, *::after { min-width: 0; }

html { overflow-x: hidden; }
body { overflow-x: clip; }

/* Deutsche Bandwurmwörter dürfen umbrechen statt zu überlaufen */
h1, h2, h3, h4, p, li, blockquote, .cq-text, .cp-situation, .tp-body {
  overflow-wrap: break-word;
  hyphens: none;
}
/* Nur sehr lange Fachbegriffe dürfen notfalls umbrechen */
.legal-content, .cases-disclaimer, .tp-fact .tf-txt { hyphens: auto; }
.bh-sub, .lede { text-wrap: pretty; }

/* Grid- und Flex-Kinder dürfen schrumpfen */
.container > *, .cta-row > * { min-width: 0; }
img, picture, video { max-width: 100%; height: auto; }

/* ---------------------------------------------------------
   TYPOGRAFIE-FEINSCHLIFF
   --------------------------------------------------------- */

h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3rem); line-height: 1.14; }
h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 600; }
h4 { font-weight: 600; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--orange-dark);
}

.lede { color: #5F4E42; }
p { color: #5F4E42; }

/* ---------------------------------------------------------
   SEKTIONS-RHYTHMUS  (eine Quelle für alle Abstände)
   --------------------------------------------------------- */

.sec { padding: clamp(64px, 4vw + 40px, 130px) 0; }
.sec-cream   { background: var(--cream); }
.sec-peach   { background: var(--peach); }
.sec-beige   { background: var(--beige); }
.sec-white   { background: var(--offwhite); }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.brand-hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  padding: clamp(122px, 10vw, 168px) 0 clamp(56px, 5vw, 96px);
  min-height: clamp(560px, 78vh, 860px);
  display: flex;
  align-items: center;
}
.brand-hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
.bh-copy { max-width: 620px; }

/* Personal-Brand-Zeile über der Headline */
.bh-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 26px;
}
.bh-kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--orange);
  flex-shrink: 0;
}
.bh-kicker .sep { color: rgba(90,60,35,0.35); font-weight: 400; }

.bh-copy h1 {
  margin-bottom: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bh-copy h1 .line2 {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}
.bh-sub {
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.16rem);
  color: #5F4E42;
  max-width: 34em;
  margin-bottom: 34px;
  line-height: 1.66;
}

/* --- Editorial-Foto: angeschnitten, ohne Rahmen, weich auslaufend --- */
.bh-visual {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(52vw, 720px);
  z-index: 1;
  pointer-events: none;
}
.bh-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 14%;
  display: block;
}
/* Weicher Übergang nur am linken Rand und nach unten –
   Gesicht und Blazer bleiben klar, kein milchiger Schleier. */
.bh-visual::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      var(--cream) 0%,
      rgba(253,238,225,0.72) 8%,
      rgba(253,238,225,0.22) 17%,
      rgba(253,238,225,0) 26%),
    linear-gradient(to bottom,
      rgba(253,238,225,0) 86%,
      rgba(253,238,225,0.45) 95%,
      rgba(253,238,225,0.9) 100%);
}

/* --- Trust-Zeile: viel Weißraum, sehr feine Trennlinien --- */


/* Klickbare Nachweise: dezent, mit Pfeil */


/* ProvenExpert – horizontal und in die Designwelt integriert */


.pe-rating .pe-logo { height: 13px; width: auto; opacity: 0.75; }


/* ---------------------------------------------------------
   NUR AUF BREITEN BILDSCHIRMEN

   Manche Sätze sind auf dem Desktop eine Präzisierung und auf dem Handy
   eine Hürde. Statt zwei Fassungen desselben Absatzes zu pflegen, steht
   der ganze Text im Quelltext und der ergänzende Teil bekommt diese
   Klasse.

   Wichtig: Das ist KEIN Platz für Inhalte, die auf dem Handy fehlen
   dürfen, sondern für solche, die dort nicht nötig sind. Wer beim Lesen
   der Handyfassung etwas vermisst, hat zu viel eingepackt.

   Für Suchmaschinen bleibt alles vorhanden — responsives Ausblenden ist
   keine Verschleierung, sondern der übliche Umgang mit zwei Formaten.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .ab-desktop { display: none; }
}

/* ---------------------------------------------------------
   TICKER
   --------------------------------------------------------- */

.ticker {
  position: relative;
  z-index: 2;
  background: var(--orange);
  overflow: hidden;
  padding: 9px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerMove 105s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-family: var(--serif-lesbar);
  font-size: clamp(0.8rem, 0.76rem + 0.18vw, 0.95rem);
  font-style: italic;
  font-weight: 500;
  color: #FFF2E7;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ticker-item::after { content: "✦"; font-size: 0.52rem; font-style: normal; color: rgba(255,255,255,0.55); }

/* Die Spur enthält die Einträge doppelt (siehe js/brand.js).
   Bei -50 % beginnt der Umlauf deshalb nahtlos von vorn. */
@keyframes tickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
  .reveal { transition: none; }
  .alloc-seg { transition: none; }
}

@media (max-width: 640px) {
.ticker { padding: 8px 0; }
  .ticker-track { animation-duration: 150s; }
  .ticker-item { font-size: 0.78rem; padding: 0 16px; gap: 16px; }
}

/* ---------------------------------------------------------
   SCHMERZPUNKT — Zitat mit Foto
   --------------------------------------------------------- */

.pain {
  background: var(--peach);
  padding: clamp(64px, 4vw + 40px, 130px) 0;
}
/* -------------------------------------------------------------------------
   SCHMERZPUNKT

   Vier eigenständige Kinder statt Foto plus Textblock. Nur so lässt sich
   auf dem Handy die Reihenfolge ändern, ohne das Markup zu verdoppeln.

   AUF DEM DESKTOP SOLL DAS NICHTS ÄNDERN — und das ist beim ersten
   Versuch schiefgegangen. Mit grid-template-rows: auto auto 1fr wurde
   der Antwortkasten nach unten gezogen, sobald das Foto höher war als
   der Text. Vorher stand der Textblock als Ganzes mittig neben dem Foto.

   Die Lösung ist align-content: center. Es zentriert nicht jedes
   Element für sich, sondern die Zeilengruppe als Ganzes im Raster —
   also genau das, was der alte Textblock getan hat.

   Die Zeilen sind dafür alle auto: Keine darf sich strecken, sonst
   verschiebt sich der Abstand zwischen Zitat, Quelle und Antwort. */
.pain-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas:
    "foto zitat"
    "foto quelle"
    "foto antwort";
  grid-template-rows: auto auto auto;
  gap: 0 clamp(28px, 4vw, 60px);
  align-items: start;
  align-content: center;
}
.pain-photo  { grid-area: foto;    align-self: center; }
.pain-quote  { grid-area: zitat; }
.pain-attrib { grid-area: quelle; }
.pain-answer { grid-area: antwort; }


/* Editorial-Foto: nur sehr dezente Rundung, keine Bogen- oder Pillenform */
.pain-photo {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-card);
}
.pain-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;   /* Fokus auf Gesicht und Oberkörper */
  display: block;
}

.pain-quote {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.pain-quote .qm { color: var(--orange); }
.pain-attrib {
  font-size: 0.85rem;
  color: #7B6857;
  font-weight: 500;
  margin-bottom: 30px;
}
.pain-answer {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(22px, 2vw, 32px);
  border-left: 4px solid var(--orange);
}
.pain-answer p { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); color: var(--charcoal); margin: 0; }
.pain-answer strong { color: var(--orange-dark); }

/* ---------------------------------------------------------
   TRIGGER-SELECTOR
   --------------------------------------------------------- */


.trigger-panel.is-open { max-height: 1800px; opacity: 1; padding: clamp(26px, 3vw, 44px); }

/* Sanftes Überblenden beim Themenwechsel */

.trigger-panel.is-swapping .tp-grid { opacity: 0; }


/* Faktenblock: große Zahl als Editorial-Element */


.tp-side .btn { width: 100%; justify-content: center; }


/* ---------------------------------------------------------
   SELBSTCHECK
   --------------------------------------------------------- */

.check-shell {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  /* clip statt hidden. Beide schneiden ab, aber hidden macht aus dem
     Element einen Scroll-Behälter — und darin funktioniert das
     Festheften des Fortschrittsbalkens nicht mehr. clip tut das nicht. */
  overflow: clip;
}
.check-head { padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 46px) 26px; border-bottom: 1px solid rgba(90,60,35,0.1); }
.check-head .ch-emoji { font-size: 2rem; display: block; margin-bottom: 12px; }
.check-head h3 { margin-bottom: 8px; }
.check-head p { font-size: 0.93rem; color: var(--warm-grey); margin: 0; }

/* -------------------------------------------------------------------------
   FORTSCHRITT IM SELBSTCHECK

   Sieben Fragen ohne Anzeige heißt: Man beantwortet drei und weiß nicht,
   ob noch zwei oder noch zehn kommen. Genau da bricht man ab.

   Der Balken heftet sich jetzt unter den Header und bleibt beim Scrollen
   stehen — mit Zahl daneben, weil ein Balken allein nur ein Gefühl gibt
   und keine Auskunft.
   ------------------------------------------------------------------------- */

.check-progress {
  position: sticky;
  top: var(--kopf-hoehe, 84px);
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid rgba(90,60,35,0.1);
}
.cp-schiene { height: 4px; background: var(--cream); position: relative; }
.cp-schiene span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--orange); width: 0;
  transition: width 0.45s cubic-bezier(.4,0,.2,1);
}
.cp-stand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px clamp(24px, 3vw, 46px);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--warm-grey);
}
.cp-stand b { color: var(--orange-dark); font-weight: 700; }
.cps-rechts { flex: 0 0 auto; }
.check-progress.ist-fertig .cps-rechts { color: var(--orange-dark); font-weight: 600; }

.check-body {
  padding: 12px clamp(24px, 3vw, 46px) clamp(28px, 3vw, 40px);
  counter-reset: frage;
}
.check-q {
  counter-increment: frage;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0 20px 34px;
  border-bottom: 1px solid rgba(90,60,35,0.09);
}
.check-q:last-of-type { border-bottom: none; }
.check-q .cq-text { font-size: 0.99rem; color: var(--charcoal); line-height: 1.5; }
.check-q .cq-text small { display: block; font-size: 0.82rem; color: var(--warm-grey); margin-top: 4px; }
.cq-answers { display: flex; gap: 8px; flex-shrink: 0; }
/* Die Nummer an jeder Frage. Sie gibt Orientierung auch dann, wenn der
   Balken gerade außerhalb des Bildschirms ist — und nach der Antwort
   wird aus der Nummer ein Häkchen. */
.check-q::before {
  content: counter(frage);
  position: absolute;
  left: 0; top: 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(90,60,35,0.22);
  color: var(--warm-grey);
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 600;
  display: grid; place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.check-q.ist-beantwortet::before {
  content: "✓";
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.check-q.ist-beantwortet .cq-text { color: var(--warm-grey); }

.cq-btn {
  border: 1.5px solid rgba(90,60,35,0.18);
  background: transparent; border-radius: 100px;
  padding: 10px 20px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--charcoal); cursor: pointer;
  transition: all 0.25s ease; white-space: nowrap;
}
.cq-btn:hover { border-color: var(--orange); }
.cq-btn[aria-pressed="true"][data-a="ja"]   { background: var(--sage); border-color: var(--sage); color: #35502B; }
.cq-btn[aria-pressed="true"][data-a="nein"] { background: var(--orange); border-color: var(--orange); color: var(--white); }

.check-result {
  display: none;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 46px);
  background: var(--cream);
  border-top: 1px solid rgba(90,60,35,0.1);
}
.check-result.is-visible { display: block; }
.cr-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 12px; }
.cr-headline { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.8rem); font-weight: 700; color: var(--charcoal); margin-bottom: 14px; line-height: 1.25; }
.cr-body { font-size: 0.98rem; line-height: 1.66; color: #5F4E42; }
.cr-gaps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 24px 0 28px; }
.cr-gaps-label {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #A3907F; margin-bottom: 2px;
}
.cr-gap {
  background: var(--white); border: 1px solid rgba(255,97,0,0.32);
  border-radius: 100px; padding: 9px 17px;
  font-size: 0.83rem; font-weight: 600; color: var(--orange-dark);
}
.cr-trust {
  font-family: var(--sans);
  font-size: 0.82rem; color: #7B6857;
  margin-top: 16px;
}
.cr-trust a { color: #6B5B4F; font-weight: 600; text-decoration: none; transition: color 0.25s ease; }
.cr-trust a:hover { color: var(--orange-dark); }
.cr-trust .pe-arrow { color: var(--orange); display: inline-block; transition: transform 0.25s ease; }
.cr-trust a:hover .pe-arrow { transform: translate(2px, -2px); }
.cr-note { font-size: 0.8rem; color: var(--warm-grey); margin-top: 14px; line-height: 1.55; }

/* Zwischenzeile und Fußnote im Themenpanel */


/* ---------------------------------------------------------
   ROTER FADEN — Beratungsweg
   --------------------------------------------------------- */

.path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  margin-top: 50px;
  position: relative;
}
.path-step {
  background: var(--white);
  border-radius: var(--r);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.path-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.path-step .ps-emoji {
  font-size: 2.1rem; display: block; margin-bottom: 14px;
}
.path-step .ps-num {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 8px;
}
.path-step h4 { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
.path-step p { font-size: 0.85rem; color: #6B5B4F; line-height: 1.5; margin: 0; }
.path-step.is-goal { background: var(--orange); }
.path-step.is-goal .ps-num { color: rgba(255,255,255,0.75); }
.path-step.is-goal h4 { color: var(--white); }
.path-step.is-goal p { color: rgba(255,255,255,0.88); }

/* ---------------------------------------------------------
   FALL-EXPLORER
   --------------------------------------------------------- */

.case-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 40px 0 26px;
}
.case-tab {
  border: 1.5px solid rgba(90,60,35,0.15);
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; gap: 12px;
}
.case-tab:hover { border-color: var(--orange); transform: translateY(-2px); }
.case-tab .ct-emoji { font-size: 1.6rem; flex-shrink: 0; }
.case-tab .ct-name { display: block; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--charcoal); }
.case-tab .ct-meta { display: block; font-size: 0.77rem; color: var(--warm-grey); line-height: 1.35; }
.case-tab[aria-selected="true"] { background: var(--orange); border-color: var(--orange); }
.case-tab[aria-selected="true"] .ct-name { color: var(--white); }
.case-tab[aria-selected="true"] .ct-meta { color: rgba(255,255,255,0.82); }

.case-panel { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-soft); }
.case-panel[hidden] { display: none; }

.cp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: start;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) 26px;
  border-bottom: 1px solid rgba(90,60,35,0.09);
}
.cp-situation { font-size: 1rem; color: #5F4E42; line-height: 1.62; max-width: 58ch; margin: 0; }
.cp-situation strong { color: var(--charcoal); }

.cp-flow { display: flex; flex-wrap: wrap; }
.cp-flow-item { padding: 12px 22px; border-left: 1px solid rgba(90,60,35,0.12); text-align: right; min-width: 118px; }
.cp-flow-item:first-child { border-left: none; }
.cp-flow-item .cf-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--warm-grey); margin-bottom: 5px; }
.cp-flow-item .cf-value { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--charcoal); line-height: 1; }
.cp-flow-item.is-free .cf-value { color: var(--sage-deep); }
.cp-flow-item.is-out .cf-value { color: var(--warm-grey); }

.cp-body { padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 40px); }
.cp-section-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orange-dark); margin-bottom: 16px; }

.alloc-bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; background: var(--cream); }
.alloc-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; width: 0;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.alloc-seg.c1 { background: #FF6100; }
.alloc-seg.c2 { background: #E08A4A; }
.alloc-seg.c3 { background: #B79274; }
.alloc-seg.c4 { background: #8FA97F; }
.alloc-seg.c5 { background: #D9B84F; }

.alloc-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 30px; }
.alloc-legend li { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: #5F4E42; }
.alloc-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.alloc-legend .dot.c1 { background: #FF6100; }
.alloc-legend .dot.c2 { background: #E08A4A; }
.alloc-legend .dot.c3 { background: #B79274; }
.alloc-legend .dot.c4 { background: #8FA97F; }
.alloc-legend .dot.c5 { background: #D9B84F; }
.alloc-legend b { color: var(--charcoal); }

.cp-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.result-card { background: var(--cream); border-radius: var(--r-sm); padding: 22px; }
.result-card .rc-label { font-size: 0.73rem; color: var(--warm-grey); font-weight: 600; margin-bottom: 9px; line-height: 1.35; }
.result-card .rc-value { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.8rem); font-weight: 700; color: var(--charcoal); line-height: 1; margin-bottom: 7px; }
.result-card .rc-note { font-size: 0.75rem; color: var(--warm-grey); line-height: 1.45; }
.result-card.highlight { background: var(--orange); }
.result-card.highlight .rc-label { color: rgba(255,255,255,0.75); }
.result-card.highlight .rc-value { color: var(--white); }
.result-card.highlight .rc-note { color: rgba(255,255,255,0.8); }

.cp-takeaway {
  background: var(--peach);
  border-radius: var(--r-sm);
  padding: 22px 26px;
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.98rem, 0.94rem + 0.28vw, 1.18rem);
  color: var(--charcoal);
  line-height: 1.52;
  margin-bottom: 26px;
}

.cases-disclaimer {
  margin-top: 28px;
  padding: 20px 24px;
  background: rgba(90,60,35,0.05);
  border-radius: var(--r-sm);
  font-size: 0.77rem;
  color: #7B6857;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   BEISPIELHAFTE FINANZPLÄNE — Profilkarten
   --------------------------------------------------------- */

.cases-note {
  font-family: var(--sans);
  font-size: 0.83rem;
  color: #8C7A6B;
  font-style: italic;
  margin-top: 14px;
  max-width: 60ch;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 44px 0 34px;
}

.profile-card {
  background: var(--white);
  border: 1.5px solid rgba(90,60,35,0.12);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.profile-card:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: var(--shadow-card); }
.profile-card[aria-selected="true"] { border-color: var(--orange); border-width: 2px; box-shadow: var(--shadow-card); }

/* Illustrationsfläche — bewusst keine Porträtfotos, da die Profile fiktiv sind */
.pc-visual {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pc-visual.v1 { background: linear-gradient(150deg, #FBD9C0 0%, #F6C49F 100%); }
.pc-visual.v2 { background: linear-gradient(150deg, #FDEADC 0%, #F8D3B4 100%); }
.pc-visual.v3 { background: linear-gradient(150deg, #F3E1CC 0%, #E9CBA8 100%); }
.pc-visual.v4 { background: linear-gradient(150deg, #FBDEC7 0%, #EFC9A2 100%); }
.pc-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* Platzhalterhinweis, solange kein Foto hinterlegt ist */
.pc-visual .pc-slot {
  font-family: var(--sans);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(90,60,35,0.34);
}

.pc-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 100px;
  padding: 6px 13px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--orange-dark);
  z-index: 2;
}

.pc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pc-name {
  font-family: var(--serif);
  font-size: 1.24rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.2;
  margin-bottom: 4px;
}
.pc-role { font-size: 0.8rem; color: var(--warm-grey); line-height: 1.4; margin-bottom: 10px; }
.pc-income {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem; font-weight: 700;
  color: var(--orange-dark);
  line-height: 1.3;
  margin-bottom: 14px;
}
.pc-quote {
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.92rem;
  color: #5F4E42;
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}
.pc-cta {
  font-size: 0.81rem; font-weight: 600;
  color: #7B6857;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.3s ease;
}
.pc-cta .pc-arrow { transition: transform 0.3s ease; display: inline-block; }
.profile-card:hover .pc-cta,
.profile-card[aria-selected="true"] .pc-cta { color: var(--orange-dark); }
.profile-card:hover .pc-arrow { transform: translateX(3px); }

/* ---------- Detailbereich ---------- */

.case-panel .cp-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  border-radius: 100px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 18px;
}
.case-panel .cp-headline {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.22; margin-bottom: 16px;
}

/* Vergleichsbox (Lena-Marie) */
.case-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 26px 0 22px;
}
.cc-item {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 20px 22px;
}
.cc-item.is-highlight { background: var(--orange); }
.cc-item .cci-name { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-grey); margin-bottom: 8px; }
.cc-item.is-highlight .cci-name { color: rgba(255,255,255,0.8); }
.cc-item .cci-value { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--charcoal); line-height: 1.35; }
.cc-item.is-highlight .cci-value { color: var(--white); }

.case-statement {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.34;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(90,60,35,0.14);
  border-bottom: 1px solid rgba(90,60,35,0.14);
  margin-bottom: 28px;
}

/* Große Zahlenkarten */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.num-card {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 26px;
  border-top: 3px solid var(--orange);
}
.num-card.is-strong { background: var(--orange); border-top-color: #B84618; }
.num-card .nc-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--warm-grey); line-height: 1.45; margin-bottom: 12px; }
.num-card.is-strong .nc-label { color: rgba(255,255,255,0.85); }
.num-card .nc-value {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
  font-weight: 700; color: var(--orange-dark); line-height: 1;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.num-card.is-strong .nc-value { color: var(--white); }
.num-card .nc-sub { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); line-height: 1.45; }
.num-card.is-strong .nc-sub { color: rgba(255,255,255,0.82); }

/* Timeline (Sophie) */
.case-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0;
  position: relative;
}
.case-timeline::before {
  content: "";
  position: absolute;
  top: 26px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(to right, var(--peach), var(--orange), var(--peach));
}
.tl-step { text-align: center; padding: 0 10px; position: relative; }
.tl-dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--peach);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 16px;
  position: relative; z-index: 2;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tl-step:hover .tl-dot { border-color: var(--orange); transform: scale(1.06); }
.tl-step.is-now .tl-dot { border-color: var(--orange); background: var(--orange); }
.tl-when {
  font-family: var(--sans);
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 7px;
}
.tl-what { font-family: var(--sans); font-size: 0.85rem; color: #5F4E42; line-height: 1.45; }

/* Dashboard (Anna) */
.case-dashboard { display: flex; flex-direction: column; gap: 2px; margin: 26px 0 28px; }
.db-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--cream);
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.db-row:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.db-row:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.db-row:hover { background: var(--peach); padding-left: 28px; }
.db-num {
  font-family: var(--serif);
  font-size: 0.95rem; font-weight: 700;
  color: var(--orange); min-width: 26px;
}
.db-emoji { font-size: 1.3rem; }
.db-text { font-family: var(--sans); }
.db-text b {
  display: block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--charcoal); margin-bottom: 4px;
}
.db-text span { font-size: 0.88rem; color: #5F4E42; line-height: 1.45; }

/* Abschlusskasten */
.case-closing {
  background: var(--peach);
  border-radius: var(--r-sm);
  padding: 24px 28px;
  font-family: var(--serif-lesbar);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.55;
  margin-bottom: 26px;
}

.case-cta-note {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin-top: 12px;
}

/* ---------- Ausgangslage: drei große Zahlen ---------- */
.case-start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 4px 0 30px;
  border-top: 1px solid rgba(90,60,35,0.14);
  border-bottom: 1px solid rgba(90,60,35,0.14);
}
.cs-item { padding: 24px clamp(12px, 2vw, 26px); border-left: 1px solid rgba(90,60,35,0.12); }
.cs-item:first-child { border-left: none; padding-left: 0; }
.cs-item .csi-value {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--charcoal); margin-bottom: 8px;
}
.cs-item.is-free .csi-value { color: var(--orange-dark); }
.cs-item.is-muted .csi-value { color: var(--warm-grey); }
.cs-item .csi-label {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--warm-grey);
}

/* ---------- Analyse-Blöcke ---------- */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.an-item {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 22px 24px;
  border-top: 3px solid var(--peach);
  transition: border-top-color 0.3s ease;
}
.an-item:hover { border-top-color: var(--orange); }
.an-item .ani-head {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--orange-dark);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.an-item .ani-q {
  font-family: var(--serif);
  font-size: 1.02rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.4;
  margin-bottom: 8px;
}
.an-item .ani-txt { font-family: var(--sans); font-size: 0.84rem; color: #6B5B4F; line-height: 1.55; }

/* ---------- Vorher / Nachher ---------- */
.transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: 30px 0 26px;
}
.tf-side { padding: 26px 28px; border-radius: var(--r-sm); height: 100%; }
.tf-side.is-before { background: rgba(90,60,35,0.055); }
.tf-side.is-after  { background: var(--peach); }
.tf-side .tfs-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 12px;
}
.tf-side.is-after .tfs-label { color: var(--orange-dark); }
.tf-side .tfs-quote {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: 1.02rem; color: #5F4E42; line-height: 1.55;
}
.tf-side.is-after .tfs-quote { color: var(--charcoal); font-style: normal; }
.tf-side ul { list-style: none; margin: 0; padding: 0; }
.tf-side ul li {
  font-family: var(--sans); font-size: 0.92rem;
  color: var(--charcoal); line-height: 1.5;
  padding: 7px 0; border-top: 1px solid rgba(90,60,35,0.13);
  display: flex; align-items: baseline; gap: 9px;
}
.tf-side ul li:first-child { border-top: none; padding-top: 0; }
.tf-side ul li b { font-family: var(--serif); font-size: 1.05rem; color: var(--orange-dark); white-space: nowrap; }
.tf-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--orange);
}

/* ---------- Split-Screen-Vergleich ---------- */
.split-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 26px 0 24px;
}
.sc-side { padding: 30px 32px; }
.sc-side.a { background: var(--cream); }
.sc-side.b { background: var(--orange); }
.sc-side .scs-name {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 16px;
}
.sc-side.b .scs-name { color: rgba(255,255,255,0.82); }
.sc-side .scs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(90,60,35,0.12); }
.sc-side.b .scs-row { border-top-color: rgba(255,255,255,0.25); }
.sc-side .scs-row:first-of-type { border-top: none; }
.sc-side .scs-k { font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey); }
.sc-side.b .scs-k { color: rgba(255,255,255,0.85); }
.sc-side .scs-v { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--charcoal); }
.sc-side.b .scs-v { color: var(--white); }
.sc-vs {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  padding: 0 8px;
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: 0.95rem; color: var(--warm-grey);
}

/* ---------- Lebensphasen-Timeline (vertikal, editorial) ---------- */
.phase-list { position: relative; margin: 26px 0 30px; padding-left: 58px; }
.phase-list::before {
  content: ""; position: absolute;
  left: 21px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, var(--peach), var(--orange) 45%, var(--peach));
}
.phase-item { position: relative; padding: 0 0 26px; }
.phase-item:last-child { padding-bottom: 0; }
.phase-item .ph-dot {
  position: absolute; left: -58px; top: -2px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--peach);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.phase-item:hover .ph-dot { border-color: var(--orange); transform: scale(1.07); }
.phase-item.is-now .ph-dot { border-color: var(--orange); background: var(--peach); }
.phase-item .ph-when {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 6px;
}
.phase-item .ph-what {
  font-family: var(--serif);
  font-size: 1.1rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.35; margin-bottom: 5px;
}
.phase-item .ph-q { font-family: var(--sans); font-size: 0.88rem; color: #6B5B4F; line-height: 1.55; }

/* ---------- Immobilien-Rechnung ---------- */
.immo-block {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: clamp(24px, 3vw, 34px);
  margin: 26px 0;
}
.immo-block .ib-head {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark);
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
}
.immo-eq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.ie-cell { background: var(--white); border-radius: var(--r-sm); padding: 20px 22px; height: 100%; }
.ie-cell.is-result { background: var(--orange); }
.ie-cell .iec-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--warm-grey);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px;
}
.ie-cell.is-result .iec-label { color: rgba(255,255,255,0.85); }
.ie-cell .iec-txt { font-family: var(--sans); font-size: 0.86rem; color: #5F4E42; line-height: 1.5; }
.ie-cell.is-result .iec-txt { color: var(--white); font-weight: 600; }
.ie-op {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--orange-dark);
}
.immo-note {
  font-family: var(--sans); font-size: 0.79rem;
  color: #7B6857; line-height: 1.6; margin-top: 18px;
}

/* ---------- Bausteine-Reihe ---------- */
.blocks-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}
.br-item {
  background: var(--white);
  border: 1.5px solid rgba(90,60,35,0.13);
  border-radius: var(--r-sm);
  padding: 18px 14px;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.br-item:hover { border-color: var(--orange); transform: translateY(-3px); }
.br-item .bri-emoji { font-size: 1.4rem; display: block; margin-bottom: 9px; }
.br-item .bri-txt {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.35;
}

/* ---------- Anna: Dashboard-Hub ---------- */
.hub {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 26px 0 28px;
}
.hub-core {
  background: var(--orange);
  border-radius: var(--r-sm);
  padding: 32px 28px;
  text-align: center;
}
.hub-core .hc-value {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 700; color: var(--white);
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px;
}
.hub-core .hc-label {
  font-family: var(--sans); font-size: 0.8rem;
  color: rgba(255,255,255,0.9); line-height: 1.5;
}
.hub-core .hc-add {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.28);
}
.hub-core .hc-add b { font-family: var(--serif); font-size: 1.5rem; color: var(--white); display: block; }
.hub-core .hc-add span { font-family: var(--sans); font-size: 0.76rem; color: rgba(255,255,255,0.85); }
.hub-ring { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Töpfe (Anna nachher) ---------- */
.pots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.pot {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 20px 22px;
  border-left: 3px solid var(--orange);
}
.pot .pt-when {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 7px;
}
.pot .pt-what { font-family: var(--sans); font-size: 0.88rem; color: #5F4E42; line-height: 1.5; }

/* ---------- Große Schlusszeile ---------- */
.case-punch {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.95rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  margin: 6px 0 26px;
  letter-spacing: -0.01em;
}

@media (max-width: 860px) {
.transform { grid-template-columns: 1fr; }
  .tf-arrow { transform: rotate(90deg); padding: 12px 0; }
  .split-compare { grid-template-columns: 1fr; }
  .sc-vs { padding: 12px 0; }
  .immo-eq { grid-template-columns: 1fr; }
  .ie-op { padding: 10px 0; }
  .hub { grid-template-columns: 1fr; }
  .cs-item { border-left: none; border-top: 1px solid rgba(90,60,35,0.12); padding-inline: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .cs-item:first-child { border-top: none; }
  .cs-item .csi-value { margin-bottom: 0; }
}

@media (max-width: 560px) {
.phase-list { padding-left: 48px; }
  .phase-list::before { left: 17px; }
  .phase-item .ph-dot { left: -48px; width: 36px; height: 36px; font-size: 1rem; }
  .blocks-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------
   BERATUNGS-JOURNEY — alternierende Editorial-Steps
   --------------------------------------------------------- */

.journey { position: relative; margin-top: 54px; }
/* durchgehende orange Linie durch die Section */
.journey::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--orange-light) 6%, var(--orange-light) 94%, transparent);
  opacity: 0.5;
}

.jstep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-bottom: clamp(48px, 5vw, 84px);
  position: relative;
}
.jstep:last-child { margin-bottom: 0; }

.jstep-copy { padding: 8px clamp(10px, 2.2vw, 34px); }
.jstep-visual { padding: 0 clamp(10px, 2.2vw, 34px); }

/* ungerade Schritte: Text links, Visual rechts — gerade: umgekehrt */
.jstep:nth-child(even) .jstep-copy   { grid-column: 3; grid-row: 1; }
.jstep:nth-child(even) .jstep-visual { grid-column: 1; grid-row: 1; }

.jstep-node {
  grid-column: 2; grid-row: 1;
  justify-self: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--offwhite);
  border: 2px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--orange-dark);
  position: relative; z-index: 2;
}
.jstep.is-final .jstep-node { background: var(--orange); color: var(--white); }

.jstep .js-eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 14px;
}
.jstep h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.05rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.jstep p { font-family: var(--sans); font-size: 0.97rem; color: #5F4E42; line-height: 1.7; margin-bottom: 14px; }
.jstep .js-meta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  border-radius: 100px; padding: 7px 16px;
  margin-bottom: 14px;
}
.jstep .js-note { font-family: var(--sans); font-size: 0.83rem; color: var(--warm-grey); line-height: 1.6; }
.jstep .js-punch {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--charcoal); line-height: 1.5;
  padding-left: 18px; border-left: 2px solid var(--orange);
  margin-top: 20px;
}

/* Bildfläche eines Schritts */
.js-photo {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--cream), var(--beige));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.js-photo img { width: 100%; height: 100%; object-fit: cover; }
.js-photo .pc-slot { font-size: 0.62rem; }

/* Faktenzeile innerhalb eines Schritts */
.js-facts { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.js-fact {
  background: var(--white);
  padding: 15px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: baseline;
}
.js-fact:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.js-fact:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.js-fact .jf-emoji { font-size: 1.05rem; }
.js-fact b { display: block; font-family: var(--sans); font-size: 0.84rem; color: var(--charcoal); margin-bottom: 3px; }
.js-fact span { font-family: var(--sans); font-size: 0.82rem; color: #6B5B4F; line-height: 1.5; }

/* Zeithorizonte (Schritt 03) */
.horizons { display: flex; flex-direction: column; gap: 12px; }
.hz {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  border-left: 3px solid var(--peach);
}
.hz:nth-child(2) { border-left-color: var(--orange-light); }
.hz:nth-child(3) { border-left-color: var(--orange); }
.hz .hz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hz .hz-name {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--charcoal);
}
.hz .hz-time { font-family: var(--serif); font-size: 0.95rem; font-weight: 700; color: var(--orange-dark); white-space: nowrap; }
.hz .hz-what { font-family: var(--sans); font-size: 0.85rem; color: #6B5B4F; line-height: 1.55; }

/* Keep / Optimize / Add */
.koa { display: flex; flex-direction: column; gap: 2px; }
.koa-item {
  background: var(--white);
  padding: 16px 20px;
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--sans); font-size: 0.9rem;
  color: var(--charcoal); line-height: 1.5;
}
.koa-item:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.koa-item:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.koa-item::before { content: "✓"; color: var(--orange); font-weight: 700; flex: none; }

/* Lifestyle-Timeline (Schritt 05) */
.life-line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 4px;
  margin-top: 4px;
}
.life-line .ll-item {
  background: var(--white);
  border-radius: 100px;
  padding: 9px 15px;
  font-family: var(--sans); font-size: 0.79rem; font-weight: 600;
  color: var(--charcoal);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.life-line .ll-item.is-goal { background: var(--orange); color: var(--white); }
.life-line .ll-sep { color: var(--orange); font-size: 0.85rem; }

@media (max-width: 900px) {
.journey::before { left: 28px; }
  .jstep { grid-template-columns: 58px minmax(0, 1fr); gap: 0 20px; }
  .jstep-node { grid-column: 1; justify-self: start; }
  .jstep-copy, .jstep:nth-child(even) .jstep-copy { grid-column: 2; grid-row: 1; padding: 0; }
  .jstep-visual, .jstep:nth-child(even) .jstep-visual {
    grid-column: 2; grid-row: 2; padding: 22px 0 0;
  }
}

@media (max-width: 560px) {
.journey::before { left: 21px; }
  .jstep { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .jstep-node { width: 44px; height: 44px; font-size: 0.9rem; }
}

/* ---------- Dein nächster Schritt ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 44px 0 40px;
  text-align: left;
}
.sg-item { padding: 30px clamp(16px, 2.4vw, 30px); border-left: 1px solid rgba(90,60,35,0.14); }
.sg-item:first-child { border-left: none; padding-left: 0; }
.sg-item .sgi-num {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
}
.sg-item .sgi-q {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.35; margin-bottom: 9px;
}
.sg-item .sgi-txt { font-family: var(--sans); font-size: 0.88rem; color: #6B5B4F; line-height: 1.6; }

.step-proof {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.83rem;
  color: var(--warm-grey); margin-top: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.step-proof:hover { color: var(--orange-dark); }
.step-proof .sp-stars { color: var(--orange); letter-spacing: 0.05em; }

@media (max-width: 760px) {
.sg-item { border-left: none; border-top: 1px solid rgba(90,60,35,0.14); padding-inline: 0; }
  .sg-item:first-child { border-top: none; }
}

/* ---------- Abschluss-Conversion ---------- */

.final-check { text-align: center; }
.final-check .container { max-width: 860px; }
.final-check h2 { margin-bottom: 20px; }
.final-check > .container > p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem); line-height: 1.7; }
.final-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  margin: 44px 0 40px;
  border-top: 1px solid rgba(90,60,35,0.16);
  border-bottom: 1px solid rgba(90,60,35,0.16);
}
.fp-item {
  padding: 28px clamp(14px, 2vw, 26px);
  border-left: 1px solid rgba(90,60,35,0.14);
  text-align: left;
}
.fp-item:first-child { border-left: none; }
.fp-item b {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 0.92rem; font-weight: 600;
  color: var(--charcoal); margin-bottom: 7px;
}
.fp-item b::before { content: "✓"; color: var(--orange); font-weight: 700; }
.fp-item span { font-family: var(--sans); font-size: 0.85rem; color: #6B5B4F; line-height: 1.5; }

@media (max-width: 1100px) {
.profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 0; }
  .case-timeline::before { display: none; }
}

@media (max-width: 700px) {
.profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc-body { padding: 16px 16px 18px; }
  .pc-name { font-size: 1.05rem; }
  .pc-quote { font-size: 0.85rem; }
  .case-timeline { grid-template-columns: 1fr; gap: 20px; }
  .tl-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; text-align: left; align-items: center; padding: 0; }
  .tl-dot { margin: 0; }
  .db-row { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .db-row .db-emoji { display: none; }
  .fp-item { border-left: none; border-top: 1px solid rgba(90,60,35,0.14); padding-inline: 0; }
  .fp-item:first-child { border-top: none; }
}

@media (max-width: 460px) {
/* bleibt bewusst 2 × 2 — vier Karten untereinander wären zu viel Scrollweg */
  .profile-grid { gap: 10px; }
  .pc-body { padding: 13px 13px 15px; }
  .pc-name { font-size: 0.98rem; }
  .pc-role { font-size: 0.74rem; }
  .pc-quote { font-size: 0.79rem; margin-bottom: 14px; }
  .pc-cta { font-size: 0.74rem; }
  .pc-badge { font-size: 0.55rem; padding: 5px 9px; top: 8px; left: 8px; }
}

/* ---------------------------------------------------------
   NICOLA KOMPAKT
   --------------------------------------------------------- */

/* Editorial-Verhältnis 42 / 58 — das Bild darf etwas größer wirken */
.nicola {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
}
.nicola-photo {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
  background: linear-gradient(150deg, var(--cream), var(--beige));
  display: flex; align-items: center; justify-content: center;
  /* leicht über die Contentkante hinaus für Magazin-Charakter */
  margin-left: clamp(-40px, -2.5vw, 0px);
}
/* Die Dateien sind bereits im passenden Seitenverhältnis zugeschnitten,
   deshalb wird hier nichts mehr verschoben. */
.nicola-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.nicola-copy h2 { margin-bottom: 20px; }
.nicola-copy .lead-line {
  font-family: var(--serif-lesbar); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  color: var(--charcoal); margin-bottom: 30px; line-height: 1.4;
}
.nicola-copy p { margin-bottom: 15px; line-height: 1.7; }

/* Signature-Zitat — hervorgehoben, aber bewusst keine eigene Card */
.signature-quote {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  color: var(--charcoal); line-height: 1.6;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--orange);
  margin: 30px 0 0;
  max-width: 52ch;
}
/* Erklärende Zeile direkt unter dem Zitat */
.signature-note {
  font-family: var(--sans);
  font-size: 0.86rem; color: var(--warm-grey);
  line-height: 1.6;
  padding-left: 24px;
  margin: 12px 0 34px;
  max-width: 52ch;
}
.nicola-copy p.signature-note { margin-bottom: 34px; }

.nicola-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 32px; }
.nicola-badge {
  background: var(--white); border: 1px solid rgba(90,60,35,0.14);
  border-radius: 100px; padding: 9px 16px;
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600; color: var(--charcoal);
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
/* nur die anklickbaren Nachweise reagieren */
a.nicola-badge, button.nicola-badge { cursor: pointer; }
a.nicola-badge:hover, button.nicola-badge:hover { border-color: var(--orange); color: var(--orange-dark); }
.nicola-badge .nb-arrow { font-size: 0.72rem; color: var(--warm-grey); transition: color 0.25s ease; }
a.nicola-badge:hover .nb-arrow, button.nicola-badge:hover .nb-arrow { color: var(--orange); }
.nicola-badge .nb-stars { color: var(--orange); letter-spacing: 0.06em; }

@media (max-width: 900px) {
.nicola { grid-template-columns: 1fr; gap: 0; }
  .nicola-photo {
    margin-left: 0;
    aspect-ratio: 3 / 2;
    order: -1;                      /* Bild früh, damit Nicola sichtbar bleibt */
    margin-bottom: 28px;
  }
  /* Bei 3:2 auf einem 4:3-Hochformat schneidet der Cover-Zuschnitt sonst
     knapp über dem Scheitel. 30 % gibt Luft über dem Kopf. Am gerenderten
     Ausschnitt geprüft. */
  .nicola-photo img { object-position: 50% 30%; }
  /* Reihenfolge mobil: Eyebrow, Headline, Positionierungssatz, Bild, Text …
     display:contents löst den Wrapper auf, damit das Foto zwischen
     Positionierungssatz und Fließtext rutschen kann. Die reveal-Animation
     greift dann nicht mehr am Wrapper – deshalb hier neutralisiert. */
  .nicola-copy { display: contents; opacity: 1; transform: none; }
  .nicola-copy .eyebrow  { order: -4; }
  .nicola-copy h2        { order: -3; }
  .nicola-copy .lead-line{ order: -2; margin-bottom: 24px; }
}

/* ---------------------------------------------------------
   QUALIFIKATION & TRANSPARENZ (Über mich)
   Offene Liste statt Kacheln
   --------------------------------------------------------- */

.qual-list { border-top: 1px solid rgba(90,60,35,0.16); margin-top: 44px; }


.qual-year {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--orange);
  min-width: 46px;
}
.qual-main .qm-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.35rem);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: 5px;
}
.qual-main .qm-issuer {
  display: block;
  font-size: 0.84rem;
  color: #7B6857;
  line-height: 1.5;
}
.qual-action {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-dark);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qual-action .qa-arrow { transition: transform 0.25s ease; display: inline-block; }
.qual-item:hover .qa-arrow { transform: translate(2px, -2px); }

.qual-note {
  margin-top: 30px;
  font-size: 0.82rem;
  color: #7B6857;
  line-height: 1.6;
}

@media (max-width: 700px) {
.qual-action { grid-column: 2; }
}

/* --- PDF-Overlay --- */
.doc-modal {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(58, 44, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.doc-modal.is-open { display: flex; }
.doc-modal-inner {
  background: var(--offwhite);
  border-radius: var(--r);
  width: min(960px, 100%);
  height: min(88vh, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(58,44,34,0.6);
}
.doc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(90,60,35,0.14);
  flex-shrink: 0;
}
.doc-modal-head h3 {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  color: var(--charcoal); margin: 0; line-height: 1.35;
}
.doc-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-modal-close, .doc-modal-tab {
  border: 1px solid rgba(90,60,35,0.2);
  background: var(--white);
  border-radius: 100px;
  padding: 9px 16px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  color: var(--charcoal); cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.doc-modal-close:hover, .doc-modal-tab:hover { border-color: var(--orange); color: var(--orange-dark); }
.doc-modal-close { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 1.1rem; }
.doc-modal-body { flex: 1; min-height: 0; background: var(--sand); }
.doc-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 560px) {
.doc-modal-head h3 { font-size: 0.9rem; }
  .doc-modal-tab { display: none; }
}

/* ---------------------------------------------------------
   KUNDINNENSTIMMEN — Aufbau liegt in css/start.css
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   CTA-BAND
   --------------------------------------------------------- */

.cta-band { padding: clamp(56px, 4vw, 84px) 0; background: var(--beige); color: var(--charcoal); text-align: center; }
.cta-band .container { max-width: 760px; }
.cta-band h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2.1rem); margin-bottom: 14px; }
.cta-band p { color: #5F4E42; margin-bottom: 26px; }
.cta-band .cta-row { justify-content: center; }
.cta-band .band-note { margin-top: 18px; margin-bottom: 0; font-size: 0.8rem; color: #7B6857; }

/* ---------------------------------------------------------
   WEITERLESEN — Brücken zu den Unterseiten
   --------------------------------------------------------- */

/* Weiterlesen: offene Spalten statt Kacheln */


/* Antwort im Schmerzpunkt offener gestalten */
.pain-answer {
  background: none;
  border-radius: 0;
  padding: 0 0 0 clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--orange);
}

/* ---------------------------------------------------------
   Sonstiges aus style.css überschreiben (kein Schwarz mehr)
   --------------------------------------------------------- */

.section-identifikation,
.section-transform,
.manifest { background: var(--cream); color: var(--charcoal); }
.section-identifikation h2,
.section-transform h2 { color: var(--charcoal); }

/* Lifestyle-Streifen auf „Über mich": warm statt dunkel */
.section-freiheit { background: var(--peach); }
.freiheit-copy h2,
.freiheit-copy .big-line { color: var(--charcoal); }
.freiheit-copy .eyebrow { color: var(--orange-dark); }
.freiheit-copy .eyebrow::before { background: var(--orange); }
.freiheit-copy .strike { color: #9C8A79; }
.freiheit-grid .ph-img.dark {
  background: linear-gradient(135deg, var(--sand) 0%, var(--beige) 100%);
}
.freiheit-grid .ph-img.dark .ph-label { background: rgba(255,255,255,0.85); color: var(--warm-grey); }

/* Platzhalter-Kacheln (Wissen-Seite) warm halten */
.ph-img { background: linear-gradient(135deg, var(--cream) 0%, var(--sand) 100%); }
.ph-img.dark { background: linear-gradient(135deg, var(--sand) 0%, var(--beige) 100%); }
.ph-img.dark .ph-label { background: rgba(255,255,255,0.85); color: var(--warm-grey); }

.site-footer { background: #433226; }
.faq-list { border-top-color: rgba(90,60,35,0.16); }
.faq-item { border-bottom-color: rgba(90,60,35,0.16); }
.section-faq { background: var(--offwhite); }
.faq-q { font-weight: 600; }

.page-hero { background: var(--cream); padding: clamp(130px, 12vw, 200px) 0 clamp(48px, 5vw, 90px); }
.section-topic { background: var(--offwhite); padding: clamp(60px, 4vw + 36px, 110px) 0; }
.section-topic.on-cream { background: var(--cream); }
.section-newsletter { background: var(--beige); }
.newsletter-box { border-radius: var(--r); }
.sticky-cta { background: rgba(254,248,241,0.96); }

@media (max-width: 1240px) {
.bh-copy { max-width: 54%; }
  .bh-visual { width: 50vw; }
}

@media (max-width: 1000px) {
  /* -------------------------------------------------------------------
     MOBILER HERO

     Vorher: Header, dann ein hohes Stück leeres Beige, dann Überschrift,
     Text, zwei Buttons — und erst danach das Foto. Auf einem iPhone war
     das Gesicht damit unterhalb des ersten Bildschirms. Wer die Seite
     öffnete, sah eine beige Fläche mit Text.

     Jetzt: Header, direkt darunter das Foto, und die Textfläche liegt
     mit ihrer oberen Kante im ausgeblendeten unteren Teil des Fotos.
     Aus zwei Blöcken wird eine Fläche.

     Umgesetzt über order, nicht über eine Änderung im Markup — der
     Desktop bleibt unangetastet.
     ------------------------------------------------------------------- */
  .brand-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Genau die Headerhöhe, kein Puffer. Das ist der Leerraum, den du
       gesehen hast: vorher standen hier 122 px gegen einen 76-px-Header.
       Der Wert kommt aus navigation.css, damit beide nie auseinanderlaufen. */
    padding: var(--kopf-hoehe, 76px) 0 clamp(40px, 6vw, 64px);
  }
  .bh-visual { order: 1; }
  .brand-hero .container { order: 2; }
  .bh-copy { max-width: 100%; }

  .bh-visual {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* 46 vh: auf jedem Telefon bleibt unter dem Foto noch Platz für die
       Überschrift. Die Obergrenze verhindert, dass das Bild auf einem
       großen Tablet die ganze Seite einnimmt. */
    height: clamp(280px, 46vh, 460px);
    margin-top: 0;
  }
  /* Der Ausschnitt beginnt knapp über dem Kopf. Deshalb kann die
     Bildposition oben stehen bleiben: beschnitten wird immer nur unten,
     der Kopf ist auf keiner Telefonhöhe in Gefahr. An vier echten
     Gerätemaßen gerendert und angesehen. */
  .bh-visual img { object-position: 50% 0%; }

  /* Der weiche Auslauf.

     Wichtig ist, WO er fertig ist: ab 86 % der Bandhöhe ist die Fläche
     vollständig beige. Genau dort beginnt die Textfläche. Läge der
     Übergang später, stünde die Kickerzeile auf einem halb sichtbaren
     Foto — auf einem 320-px-Gerät war das der Fall, bevor die Werte
     nachgerechnet wurden. */
  .bh-visual::after {
    background: linear-gradient(to bottom,
      rgba(253,238,225,0)    54%,
      rgba(253,238,225,0.50) 74%,
      var(--cream)           86%);
  }

  /* Die Textfläche wandert in den Auslauf hinein. Das ist die
     Überlagerung statt des harten Schnitts.

     Ein fester Wert, keine Formel: Das Band ist zwischen 280 und 460 px
     hoch, 34 px liegen bei jeder dieser Höhen im vollständig beigen
     Bereich. Eine vw-Rechnung sähe klüger aus, käme hier aber ohnehin
     immer beim selben Wert heraus. */
  .brand-hero .container {
    margin-top: -34px;
    z-index: 3;
  }
  .bh-kicker { margin-bottom: 16px; }
  .bh-copy h1 { margin-bottom: 16px; }
  .bh-sub { margin-bottom: 26px; }
}

@media (max-width: 1100px) {
.nicola { grid-template-columns: 1fr; }
  .nicola-photo { max-width: 380px; margin-inline: auto; }
  .pain-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .pain-photo { aspect-ratio: 1 / 1.09; }          /* Tablet-Zuschnitt */
  .pain-photo img { object-position: 50% 34%; }
}

@media (max-width: 900px) {
.cp-top { grid-template-columns: 1fr; }
  .cp-flow { width: 100%; }
  .cp-flow-item { flex: 1 1 110px; text-align: left; padding: 12px 14px; }
  .cp-flow-item:first-child { padding-left: 0; }
}

@media (max-width: 768px) {
  /* -------------------------------------------------------------------
     SCHMERZPUNKT AUF DEM HANDY

     Drei Fassungen, und die Mitte ist die richtige.

     Am Anfang stand das Foto ganz oben und war 455 px hoch — mehr als
     die Hälfte eines iPhone-Bildschirms, bevor ein Wort zu lesen war.
     Dann wurde daraus ein 52-px-Porträt: Der Text stand sofort da, aber
     der Abschnitt hatte keine Wirkung mehr.

     Jetzt ein flaches Band von rund 197 px, 16:9, mit einem eigenen
     Ausschnitt. Es öffnet den Abschnitt, ohne ihn zu besetzen: 197 px
     statt 455 px, und das Zitat beginnt direkt darunter.

     Der Ausschnitt ist eine eigene Datei. Ein Hochformat in ein flaches
     Band zu zwingen hieße, den größten Teil wegzuschneiden — und dann
     bliebe genau der Teil, den keiner ausgesucht hat.
     ------------------------------------------------------------------- */
  /* Die Reihenfolge steht in css/mobil.css — dort liegen alle
     Entscheidungen, die nur für schmale Bildschirme gelten. Hier bleibt
     nur, was in beiden Fällen gilt. */
  .pain-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
  }
  .pain-photo {
    display: block;
    max-width: none;
    box-shadow: none;
  }
  .pain-photo img { object-position: 50% 50%; }
  .pa-satz { line-height: 1.45; }
  .check-q { grid-template-columns: 1fr; gap: 14px; }
  .cq-answers { width: 100%; }
  .cq-btn { flex: 1; }
}

@media (max-width: 640px) {
.container { --rand: 20px; }
  
  
  .cp-flow { flex-direction: column; }
  .cp-flow-item { border-left: none; border-top: 1px solid rgba(90,60,35,0.12); padding: 11px 0; display: flex; justify-content: space-between; align-items: baseline; }
  .cp-flow-item:first-child { border-top: none; }
  .cp-flow-item .cf-label { margin-bottom: 0; }
  .alloc-bar { height: 38px; }
  .alloc-seg { font-size: 0.66rem; }
  .rating-summary { border-radius: var(--r); padding: 20px 24px; width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; width: 100%; }
  .path-step { text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
  .path-step .ps-emoji { margin-bottom: 0; }
  .path-step > .ps-num { grid-column: 2; }
  .path-step h4, .path-step p { grid-column: 2; }
}


@media (max-width: 560px) {
/* Touch-Ziele mindestens 48 px hoch */
  .situ-chip, .cq-btn, .case-tab, .btn, .rn-chip { min-height: 48px; }
  .cq-btn { padding: 13px 18px; }
}

@media (max-width: 380px) {
  /* Kleineres Band, kleinerer Versatz — sonst rückt die Überschrift
     unnötig weit ins Bild. */
  .brand-hero .container { margin-top: -26px; }
}

@media (max-width: 430px) {
.container { --rand: 16px; }
  
  
  .check-head, .check-body, .check-result { padding-inline: 20px; }
  .cp-top, .cp-body { padding-inline: 20px; }
}

/* =========================================================================
   EINWILLIGUNG

   Unten angedockt statt bildschirmfüllend. Ein Kasten, der alles
   verdeckt, wird weggeklickt — und ein weggeklicktes Banner ist keine
   Entscheidung, sondern eine Störung, die man loswird.

   Beide Schaltflächen sind gleich groß. Das ist keine Designfrage:
   Ein Ablehnen, das schwerer zu finden ist als ein Zustimmen, gilt
   nicht als freiwillige Einwilligung.
   ========================================================================= */

.einwilligung {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 0 clamp(12px, 3vw, 24px) calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-bottom));
  transform: translateY(115%);
  transition: transform 0.34s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.einwilligung.ist-da { transform: translateY(0); }

.ew-inner {
  pointer-events: auto;
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.14);
  border-radius: var(--r);
  box-shadow: 0 18px 50px -18px rgba(45, 38, 32, 0.35);
  padding: clamp(20px, 2.6vw, 28px);
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .ew-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px; }
}

.ew-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.24rem);
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 8px;
  line-height: 1.3;
}
.ew-text p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.62;
  color: #5F4E42;
  margin: 0 0 8px;
  max-width: 62ch;
}
.ew-text p:last-child { margin-bottom: 0; }
.ew-klein { font-size: 0.8rem !important; color: var(--warm-grey) !important; }
.ew-klein a { color: var(--orange-dark); }

.ew-tasten { display: flex; gap: 10px; }
.ew-taste {
  flex: 1 1 0;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid rgba(90, 60, 35, 0.24);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ew-taste:hover { border-color: var(--orange); }
.ew-taste.ist-ja {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.ew-taste:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (min-width: 720px) {
  .ew-tasten { flex: none; }
  .ew-taste { flex: none; min-width: 168px; }
}

/* Solange das Banner steht, soll der feste Buchungsknopf nicht darunter
   hervorlugen. */
.einwilligung.ist-da ~ .sticky-cta { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .einwilligung { transition: none; }
}

/* =========================================================================
   SOCIAL-ICONS IM FOOTER

   Vorher standen dort die Namen ausgeschrieben — auf dem Handy drei
   Zeilen, die nichts sagen, was das Icon nicht auch sagt.

   Echte Markenpfade als SVG, keine Emojis: Emojis sehen auf jedem
   Betriebssystem anders aus und es gibt für LinkedIn und TikTok keine.
   Die Pfade liegen direkt im Markup, damit keine fremde Icon-Bibliothek
   geladen werden muss — das wären eine weitere Fremdquelle und ein
   weiterer Eintrag in der Datenschutzerklärung.

   Die Fläche ist 44 × 44 px, auch wenn das Zeichen nur 20 px misst.
   ========================================================================= */

.footer-social { display: flex; align-items: center; gap: 4px; }

.fs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.22s ease, background 0.22s ease;
}
.fs-icon svg { fill: currentColor; display: block; }
.fs-icon:hover,
.fs-icon:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}
.fs-icon:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }