/* =========================================================================
   BERATUNGSSEITE

   Gehört nur zu finanzberatung.html. Alle Klassen beginnen mit br.

   GRUNDHALTUNG
   Diese Seite soll Termine bringen und trotzdem ruhig wirken. Das
   erreicht sie nicht über mehr Buttons, sondern über Abstand: wenige,
   klar gesetzte Aufrufe mit viel Luft darum. Ein gedrängtes Layout
   wirkt bedrängend, und genau das beschädigt Vertrauen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Hero
   ------------------------------------------------------------------------- */

.brh-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.brh-text { min-width: 0; }

.brh-text h1 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 10px 0 0;
  max-width: 17ch;
}
.brh-text .lede {
  max-width: 52ch;
  margin-top: 18px;
}

.brh-aktion { margin-top: 30px; }
.brh-meta {
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin: 12px 0 0;
}

.brh-bild { min-width: 0; }
.brh-bild picture,
.brh-bild img {
  display: block;
  width: 100%;
  height: clamp(400px, 44vw, 580px);
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 899px) {
  .brh-raster { grid-template-columns: 1fr; gap: 30px; }
  .brh-text { order: 1; }
  .brh-bild { order: 2; }
  .brh-bild picture,
  .brh-bild img {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 60vh;
    object-position: 50% 16%;
  }
}

/* -------------------------------------------------------------------------
   2 · Social Proof

   Ein schmales Band direkt unter dem Hero. Kein eigener Abschnitt mit
   Überschrift — es soll nebenbei gelesen werden, nicht angekündigt.
   ------------------------------------------------------------------------- */

.br-proof {
  padding: clamp(18px, 2.4vw, 26px) 0;
  background: var(--charcoal);
}
.brp-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(16px, 2.4vw, 30px);
}
.brp-note {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.brp-sterne {
  color: var(--orange-light);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.brp-wert {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
}
.brp-anzahl {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.brp-link {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-light);
  text-decoration: none;
}
.brp-link:hover { color: var(--white); }

@media (max-width: 700px) {
  .brp-link { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   3 · Kommt dir das bekannt vor?

   Die Sätze stehen in der Ich-Form. Sie sollen wie ein Gedanke wirken,
   nicht wie eine Produktkategorie — deshalb Serif-Kursiv und nicht die
   Auszeichnungsschrift der übrigen Karten.
   ------------------------------------------------------------------------- */

.br-bekannt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin-top: 30px;
}

.brb-karte {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
a.brb-karte {
  min-height: 44px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.brb-karte:hover {
  border-color: rgba(255, 97, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.brb-emoji { font-size: 1.5rem; line-height: 1; }

.brb-satz {
  font-family: var(--serif-lesbar);
  font-size: clamp(0.98rem, 0.92rem + 0.45vw, 1.14rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
}
.brb-satz::before { content: "„"; }
.brb-satz::after  { content: "“"; }

.brb-thema {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.brb-weiter {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.brb-karte:hover .brb-weiter .btn-arrow { transform: translateX(3px); }
.brb-weiter .btn-arrow { transition: transform 0.22s ease; }

.br-bekannt-schluss {
  font-family: var(--serif-lesbar);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.16rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 58ch;
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
}

/* -------------------------------------------------------------------------
   Für wen ist die Beratung?
   ------------------------------------------------------------------------- */

.br-fuerwen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
}
.brf-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 0 0 18px;
  max-width: 20ch;
}
.brf-text p {
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--anthracite);
  margin: 0;
  max-width: 54ch;
}

.brf-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brf-punkte li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.08);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.brf-punkte li span { flex: none; font-style: normal; }

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

/* -------------------------------------------------------------------------
   4 · Der Ablauf

   Drei Termine und danach Begleitung, untereinander. Eine senkrechte
   Linie verbindet die Nummern: Es ist eine Abfolge, keine Auswahl.
   Die Termine sind unterschiedlich umfangreich — das darf man sehen.
   ------------------------------------------------------------------------- */

.br-ablauf {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bra-schritt {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  padding: clamp(22px, 2.8vw, 34px);
}

.bra-kopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(90, 60, 35, 0.1);
}
.bra-nr {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bra-marke {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 5px;
}
.bra-kopf h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0;
  max-width: 24ch;
}
.bra-meta {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--warm-grey);
}

.bra-inhalt { min-width: 0; }
.bra-text {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--anthracite);
  margin: 0 0 20px;
  max-width: 64ch;
}

/* Worüber gesprochen wird — als Liste in Spalten, damit neun Punkte
   nicht zu einer langen Rolle werden. */
.bra-themenlabel {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 10px;
}
.bra-themen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 30px;
}
.bra-themen li {
  break-inside: avoid;
  position: relative;
  padding-left: 17px;
  margin-bottom: 7px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.bra-themen li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
@media (max-width: 620px) { .bra-themen ul { columns: 1; } }

/* Kurz, mittel, lang */
.bra-horizonte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin-top: 22px;
}
.brah-zeit {
  background: var(--offwhite);
  border-top: 3px solid var(--sand);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.brah-zeit:nth-child(1) { border-top-color: var(--orange); }
.brah-zeit:nth-child(2) { border-top-color: var(--orange-light); }
.brah-zeit:nth-child(3) { border-top-color: var(--charcoal); }
.brah-zeit span {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 5px;
}
.brah-zeit p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--anthracite);
}

/* Wenn das Budget nicht reicht */
.bra-beispiel {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--offwhite);
  border-radius: var(--r-sm);
}
.brab-titel {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 6px;
}
.bra-beispiel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--anthracite);
}

/* Der Satz, der eine Sorge auflöst. Bei Termin 1 der wichtigste der
   ganzen Seite: Du musst nichts vorbereiten. */
.bra-hinweis {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--cream);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
}
.brah-titel {
  display: block;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 5px;
}
.bra-hinweis p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--anthracite);
}
.brah-freebie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}

.bra-ergebnis {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(90, 60, 35, 0.18);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.bra-ergebnis::before {
  content: "Danach";
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 5px;
}

/* Die Reihenfolge, die am Ende von Termin 1 steht */
.bra-reihenfolge {
  list-style: none;
  counter-reset: rf;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bra-reihenfolge li {
  counter-increment: rf;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--offwhite);
  border: 1px solid rgba(90, 60, 35, 0.1);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
}
.bra-reihenfolge li::before {
  content: counter(rf);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Kleine Pfeile zwischen den Schritten */
.bra-reihenfolge li:not(:last-child)::after {
  content: "→";
  margin-left: 6px;
  color: var(--warm-grey);
  font-weight: 400;
}

/* Der Satz, der die Haltung transportiert. Bewusst groß. */
.bra-merksatz {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
  font-family: var(--serif-lesbar);
  font-size: clamp(1.02rem, 0.94rem + 0.5vw, 1.22rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 56ch;
}

/* -------------------------------------------------------------------------
   Der Aufruf mit den Fragen daneben

   Zusammen ein Block: links die Entscheidung, rechts alles, was noch
   dagegen sprechen könnte. Getrennt voneinander verlieren beide.
   ------------------------------------------------------------------------- */

.br-buchung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 70px);
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--cream);
  border-radius: var(--r);
}

.brb-aufruf h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0 0 22px;
  max-width: 20ch;
}
.brb-meta {
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin: 14px 0 0;
}

.brv-titel {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 14px;
}
.brv-liste {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.brv-punkt { min-width: 0; }
.brv-punkt dt {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.35;
}
.brv-punkt dd {
  margin: 2px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--anthracite);
}

.brv-zusicherung {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--white);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--charcoal);
}

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

/* -------------------------------------------------------------------------
   5 · Verweis auf die Kundenfälle
   ------------------------------------------------------------------------- */

.br-faelle-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.br-faelle-link:hover { color: var(--orange); }
.br-faelle-link .btn-arrow { transition: transform 0.22s ease; }
.br-faelle-link:hover .btn-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   8 · Abschluss
   ------------------------------------------------------------------------- */

.br-abschluss {
  background: var(--charcoal);
  padding: clamp(56px, 8vw, 104px) 0;
}
.bras-inner { max-width: 620px; }
.bras-inner .eyebrow { color: var(--orange-light); }
.bras-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0 0 16px;
}
.bras-inner > p {
  font-size: 0.96rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 54ch;
}
.bras-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 16px 0 0;
}
.bras-pe {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 8px 0 0;
}
.bras-pe span[aria-hidden] { color: var(--orange-light); letter-spacing: 0.08em; }

/* -------------------------------------------------------------------------
   Weniger Bewegung
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  a.brb-karte,
  .brb-weiter .btn-arrow,
  .br-faelle-link .btn-arrow { transition: none; }
  a.brb-karte:hover { transform: none; }
}


/* -------------------------------------------------------------------------
   BESTÄTIGUNGSSEITE NACH DER BUCHUNG
   Siehe Kommentar in termin-bestaetigt.html.
   ------------------------------------------------------------------------- */

.tb-inner { max-width: 620px; }
.tb-haken { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 14px; }

.tb-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.tb-block {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  padding: clamp(22px, 2.8vw, 32px);
}
.tb-block h2 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin: 0 0 12px;
}
.tb-gross {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--orange);
  margin: 0 0 10px;
}
.tb-block p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--anthracite);
  margin: 0;
}
.tb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.tb-link:hover { color: var(--orange); }

.tb-umbuchen {
  margin: 26px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--warm-grey);
  max-width: 62ch;
}

/* =========================================================================
   TERMIN 1 UND 2 — VISUELLE JOURNEY

   Vorher: Überschrift, Absatz, Aufzählung, Absatz, Aufzählung. Inhaltlich
   richtig, aber man musste es lesen, um es zu verstehen.

   Jetzt vier Bausteine, die man sieht statt liest:
     Chips        was besprochen wird
     Prioritäten  in welcher Reihenfolge
     Horizonte    heute, morgen, später
     Ergebnisbox  was du danach weißt
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Themen als Chips
   ------------------------------------------------------------------------- */

.bra-chips {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.brac-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.12);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--charcoal);
}
.bracc-zeichen { font-size: 1.15rem; line-height: 1; flex: none; }

@media (max-width: 900px) { .bra-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .bra-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* -------------------------------------------------------------------------
   2 · Teilschritt (01 · Dein Cashflow)
   ------------------------------------------------------------------------- */

.bra-teilschritt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 22px 0 6px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: var(--r-sm);
}
.brat-nr {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  flex: none;
}
.brat-titel {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.bra-teilschritt p { font-size: 0.9rem; line-height: 1.6; color: #5F4E42; margin: 0; }

/* -------------------------------------------------------------------------
   3 · Priorisierung

   Die vier Einträge rutschen nacheinander an ihren Platz. Der Versatz je
   Element kommt aus --platz, gesetzt beim Aufbau. Ausgelöst wird es
   einmal, wenn der Block sichtbar wird — siehe js/beratung.js.
   ------------------------------------------------------------------------- */

.bra-prio {
  margin: 26px 0 6px;
  padding: 22px 24px;
  background: var(--peach);
  border-radius: var(--r);
}
.brap-titel {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.brap-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #5F4E42;
  margin: 0 0 18px;
  max-width: 60ch;
}
.brap-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brap-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);

  opacity: 0;
  transform: translateY(-10px);
}
.bra-prio.ist-sortiert .brap-liste li {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(.22, .9, .3, 1);
  transition-delay: calc(var(--platz) * 0.11s);
}
.brapl-nr {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--orange);
  flex: none;
}
.brap-fuss {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin: 12px 0 0;
}

/* Ohne JavaScript oder bei reduzierter Bewegung steht alles sofort da. */
@media (prefers-reduced-motion: reduce) {
  .brap-liste li { opacity: 1; transform: none; }
  .bra-prio.ist-sortiert .brap-liste li { transition: none; }
}

/* -------------------------------------------------------------------------
   4 · Heute · Morgen · Später
   ------------------------------------------------------------------------- */

.bra-zwischentitel {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--charcoal);
  margin: 30px 0 14px;
}

.bra-horizonte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}
.brah-zeit {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.12);
  border-radius: var(--r-sm);
  padding: 20px;
}
.brahz-marke {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 6px;
}
.brahz-zeit {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.brah-zeit p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #5F4E42;
  margin: 0 0 10px;
}
.brahz-beispiele {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--warm-grey);
  padding-top: 10px;
  border-top: 1px solid rgba(90, 60, 35, 0.1);
}

/* -------------------------------------------------------------------------
   5 · Budgetverteilung
   ------------------------------------------------------------------------- */

.bra-verteilung { margin-top: 8px; }
.brav-frei {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #5F4E42;
  margin-bottom: 14px;
}
.brav-frei b {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--charcoal);
  margin-right: 6px;
}
.brav-teile { display: flex; flex-direction: column; gap: 10px; }
.bravt-teil { display: flex; align-items: center; gap: 14px; }
.bravt-balken {
  flex: none;
  width: var(--anteil);
  min-width: 40px;
  height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
}
.bravt-text { font-family: var(--sans); font-size: 0.9rem; color: #5F4E42; }
.bravt-text b { color: var(--charcoal); font-weight: 700; }
.brav-hinweis {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 14px 0 0;
  max-width: 58ch;
}

/* -------------------------------------------------------------------------
   6 · Was du danach weißt
   ------------------------------------------------------------------------- */

.bra-ergebnisbox {
  margin-top: 26px;
  padding: 24px;
  background: var(--charcoal);
  border-radius: var(--r);
  color: var(--white);
}
.brae-titel {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 700;
  margin-bottom: 14px;
}
.brae-liste { list-style: none; margin: 0; padding: 0; }
.brae-liste li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.brae-liste li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 7px;
  color: var(--orange);
  font-weight: 700;
}
.brae-cta { margin-top: 18px; }

@media (max-width: 768px) {
  .bra-horizonte { grid-template-columns: 1fr; }
  .bra-prio { padding: 20px 18px; }
  .bra-ergebnisbox { padding: 20px 18px; }
  .brae-cta { width: 100%; justify-content: center; }
}

/* =========================================================================
   VISUELLE UNTERBRECHUNGEN

   Die Seite war überwiegend Text. Nicht zu viel Text — der Inhalt stimmt —,
   aber zu wenig Rhythmus: Wer scrollt, sieht fünf Minuten lang dasselbe.

   Drei Mittel dagegen, alle sparsam:
     ein Bild je Termin, an einer bestimmten Stelle
     ein Zeichen in der Hinweisbox
     die Chips, Kacheln und Balken aus dem letzten Durchgang
   ========================================================================= */

.bra-bild {
  margin: 26px 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--cream);
}
.bra-bild picture,
.bra-bild img {
  display: block;
  width: 100%;
  /* 16:9 und nicht flacher.

     Bei 16:7 wurde aus dem Gesprächsbild eine Nahaufnahme: Die Quelle
     ist 4:3, und je flacher der Streifen, desto stärker wird
     hineingezoomt. 16:9 zeigt die Szene statt nur des Gesichts — und
     eine Szene unterbricht besser als ein Porträt.
     Am gerenderten Ausschnitt geprüft. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 32%;
}
.bra-bild figcaption {
  padding: 12px 18px 14px;
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--cream);
}

/* Die Hinweisbox bekommt ein Zeichen und wird zur Callout-Box. */
.bra-hinweis {
  position: relative;
  padding-left: 56px;
}
.brah-zeichen {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .bra-bild {
    margin: 20px 0;
    /* Auf dem Handy etwas höher — 16:7 wäre dort ein Streifen. */
  }
  .bra-bild picture,
  .bra-bild img { aspect-ratio: 3 / 2; }
  .bra-bild figcaption { padding: 10px 14px 12px; font-size: 0.9rem; }

  .bra-hinweis { padding-left: 18px; padding-top: 52px; }
  .brah-zeichen { left: 18px; top: 18px; transform: none; }
}

/* =========================================================================
   DIE JOURNEY

   Fünf Schritte, zwei Formen — bewusst dieselbe Umsetzung wie der Ablauf
   auf der Startseite, damit es sich für die Besucherin gleich anfühlt.

     DESKTOP  Zeitleiste 01–05, darunter eine Karte
     HANDY    alle fünf Karten in einer Bahn zum Wischen
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Die Zeitleiste
   ------------------------------------------------------------------------- */

.brj-leiste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  margin-bottom: clamp(26px, 3vw, 40px);
}
/* Zwei Linien übereinander: die graue Bahn und die orange, die wächst. */
.brj-leiste::before,
.brj-leiste::after {
  content: "";
  position: absolute;
  top: 25px; height: 2px;
  left: 10%; right: 10%;
}
.brj-leiste::before { background: rgba(90, 60, 35, 0.16); }
.brj-leiste::after {
  background: var(--orange);
  right: auto;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
.brj-leiste.ist-gewachsen::after { width: calc(var(--fortschritt, 0%) * 0.8); }

.brj-punkt {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  font-family: var(--sans);
}
.brjp-nr {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--offwhite);
  border: 2px solid rgba(90, 60, 35, 0.18);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--warm-grey);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}
.brj-punkt:hover .brjp-nr { border-color: var(--orange-light); }
.brj-punkt[aria-selected="true"] .brjp-nr {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: scale(1.08);
}
.brjp-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-grey);
  text-align: center;
  line-height: 1.35;
  transition: color 0.3s ease;
}
.brj-punkt[aria-selected="true"] .brjp-name { color: var(--orange-dark); }
.brj-punkt:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 8px; }

/* -------------------------------------------------------------------------
   2 · Stand und Tasten — nur auf dem Handy
   ------------------------------------------------------------------------- */

/* Der Stand als eigene Zeile gehört dem Handy — auf dem Desktop steht
   er in der Bedienzeile unter der Karte. */
.brj-stand { display: none; }

/* -------------------------------------------------------------------------
   DIE BEDIENZEILE

   Sie stand bisher nur auf dem Handy. Auf dem Desktop musste man die
   Nummern oben anklicken — und dass fünf Kreise in einer Reihe Schalter
   sind und keine Grafik, sieht man ihnen nicht an.

   Jetzt steht unter jeder Karte dasselbe: Zurück, der Stand, Weiter.
   ------------------------------------------------------------------------- */

.brj-tasten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.brjt-taste {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid rgba(90, 60, 35, 0.2);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.brjt-taste:hover:not([disabled]) { border-color: var(--orange); }
.brjt-taste.ist-weiter {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.brjt-taste.ist-weiter:hover:not([disabled]) { background: var(--orange-dark); }
.brjt-taste[disabled] { opacity: 0.3; cursor: default; }
.brjt-taste:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.brjt-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.brjt-stand {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-dark);
  white-space: nowrap;
}
.brjt-stand b { color: var(--charcoal); }
.brjt-wisch {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--warm-grey);
  white-space: nowrap;
}

/* Die Nummern oben sollen aussehen, als könnte man sie anfassen. */
.brj-punkt:hover .brjp-nr {
  border-color: var(--orange);
  transform: translateY(-2px);
}
.brj-punkt:hover .brjp-name { color: var(--orange-dark); }

/* -------------------------------------------------------------------------
   3 · Die Karten
   ------------------------------------------------------------------------- */

.bra-schritt {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(26px, 3.2vw, 44px);
  box-shadow: var(--shadow-soft);
}
.bra-schritt[hidden] { display: none; }

.bra-kopf {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(90, 60, 35, 0.1);
}
.bra-nr {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  flex: none;
}
.bra-marke {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 6px;
}
.bra-kopf h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0;
}
.bra-meta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  border-radius: 100px;
  padding: 6px 14px;
}

.bra-text {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: #5F4E42;
  margin: 0 0 8px;
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   4 · Heute · Morgen · Später — mit Zeichen und Liste
   ------------------------------------------------------------------------- */

.brahz-zeichen { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 10px; }
.brahz-liste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.brahz-liste li {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5F4E42;
  padding: 4px 0 4px 16px;
  position: relative;
}
.brahz-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* -------------------------------------------------------------------------
   5 · Kleine Abfolge: Heute → Morgen → Später
   ------------------------------------------------------------------------- */

.bra-linie {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bra-linie li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--peach);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orange-dark);
}
.bra-linie li:not(:last-child)::after {
  content: "→";
  margin-left: 18px;
  margin-right: -8px;
  color: var(--orange);
  font-weight: 400;
}

/* -------------------------------------------------------------------------
   6 · Haken
   ------------------------------------------------------------------------- */

.bra-haken {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
.bra-haken li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.bra-haken li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 6px;
  color: var(--orange);
  font-weight: 700;
}

.bra-schluss {
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--charcoal);
  padding-left: 16px;
  border-left: 2px solid var(--orange);
  margin: 18px 0 0;
  max-width: 58ch;
}

/* Der Link unter den Chips, etwa zum Cashflow-Planer. */
.brac-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease;
}
.brac-link:hover { border-bottom-color: var(--orange); }

/* =========================================================================
   DIE JOURNEY AUF DEM HANDY

   Aus fünf Karten untereinander wird eine Wisch-Story: eine Karte pro
   Bildschirm, rechts die nächste angeschnitten, Punkte und Tasten
   darunter.

   Der Anschnitt ist kein Zierrat — er ist der Grund, warum überhaupt
   jemand wischt, ohne dass man es hinschreiben muss. Der Satz „wischen"
   steht trotzdem dabei, weil sich niemand darauf verlassen sollte.
   ========================================================================= */

@media (max-width: 900px) {

  /* Die Zeitleiste bleibt waagerecht, wird aber schmaler: Fünf Kreise à
     40 px passen mit Abständen auch auf 320 px. Die Namen darunter
     entfallen — fünf Beschriftungen nebeneinander sind dort nicht
     lesbar. Der Name des aktiven Schritts steht in der Standzeile. */
  .brj-leiste { margin-bottom: 12px; }
  .brj-leiste::before,
  .brj-leiste::after { top: 21px; }
  /* 44 px, nicht 40. Fünf mal 44 sind 220 px und passen auch auf ein
     320-px-Gerät in die Zeile — es gibt also keinen Grund, unter die
     Untergrenze für Touchflächen zu gehen. */
  .brjp-nr { width: 44px; height: 44px; font-size: 0.85rem; border-width: 2px; }
  .brjp-name { display: none; }

  /* Stand und Punkte */
  .brj-stand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
  }
  .brjs-text {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange-dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brjs-text b { color: var(--charcoal); }
  .brjs-punkte { display: flex; gap: 7px; align-items: center; flex: none; }
  .brjs-punkt {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(90, 60, 35, 0.22);
    transition: background 0.25s ease, width 0.25s ease;
  }
  .brjs-punkt.ist-da { background: var(--orange); width: 22px; border-radius: 100px; }

  /* Die Bahn */
  .brj-bahn {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rand, 16px);
    scroll-behavior: smooth;
    margin-inline: calc(-1 * var(--rand, 16px));
    padding: 4px var(--rand, 16px) 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .brj-bahn::-webkit-scrollbar { display: none; }
  .brj-bahn > .bra-schritt {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 0;
    position: relative;
  }
  .brj-bahn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

  /* Ein Pfeil am rechten Rand jeder Karte außer der letzten. */
  .brj-bahn > .bra-schritt:not(:last-child)::after {
    content: "›";
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(90, 60, 35, 0.26);
    pointer-events: none;
  }

  /* Einmaliger Anstupser beim ersten Sichtwerden. */
  .brj-bahn.zeigt-hinweis > .bra-schritt:first-child {
    animation: brjAnstupsen 1.3s cubic-bezier(.4, 0, .2, 1);
  }

  /* Auf dem Handy trägt die Standzeile oben die Auskunft — in der
     Bedienzeile bleiben dann nur die beiden Tasten, und die dürfen
     dafür breiter werden. */
  .brj-tasten { gap: 10px; margin-top: 14px; }
  .brjt-taste { flex: 1 1 0; justify-content: center; padding: 12px 16px; }
  .brjt-mitte { display: none; }

  /* Die Karte selbst kompakter. */
  .bra-schritt { padding: 22px 20px 24px; }
  .bra-kopf { gap: 14px; margin-bottom: 16px; padding-bottom: 16px; }
  .bra-haken { grid-template-columns: 1fr; gap: 4px; }
  .bra-linie { gap: 8px; }
  .bra-linie li { padding: 8px 14px; font-size: 0.85rem; }
  .bra-linie li:not(:last-child)::after { margin-left: 14px; margin-right: -6px; }
}

@keyframes brjAnstupsen {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(-22px); }
  62%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brj-bahn { scroll-behavior: auto; }
  .brj-bahn.zeigt-hinweis > .bra-schritt:first-child { animation: none; }
  .brj-leiste::after { transition: none; }
}

/* =========================================================================
   DER PERSÖNLICHE ÜBERGANG

   Zwischen „deine Situation" und „so läuft es bei mir ab" fehlte ein
   Schritt. Das Bild aus einem echten Videocall füllt ihn: Man weiß, wie
   das Gespräch aussehen wird, bevor man es bucht.

   Die Herz-Kacheln greifen die Optik aus dem Für-wen-Abschnitt auf. Sie
   sind bewusst ein wiederkehrendes Element und keine neue Form.
   ========================================================================= */

.br-videocall {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.brv-bild { margin: 0; min-width: 0; }
.brv-bild picture,
.brv-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

.brv-text { min-width: 0; }

/* Die kleine Blase. Sie macht aus einem Abschnitt eine Ansprache. */
.brv-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 100px 100px 100px 4px;
  margin-bottom: 16px;
}

.brv-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin: 0 0 14px;
  max-width: 20ch;
}
.brv-text > p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: #5F4E42;
  margin: 0 0 22px;
  max-width: 54ch;
}

.brv-herzen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
.brv-herzen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--charcoal);
}
.brv-herzen li span { flex: none; font-size: 0.95rem; }

.brv-schluss {
  margin-top: 22px !important;
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--orange-dark);
}

/* Die zweite Zahl in der Vertrauensleiste. */
.brp-begleitet b { color: var(--charcoal); font-weight: 700; }

@media (max-width: 900px) {
  .br-videocall { grid-template-columns: 1fr; gap: 24px; }
  /* Auf dem Handy quer statt hoch — ein Hochformat würde hier fast einen
     ganzen Bildschirm füllen, bevor der Text kommt. */
  .brv-bild picture,
  .brv-bild img { aspect-ratio: 3 / 2; }
  .brv-herzen { grid-template-columns: 1fr; gap: 6px; }
  .brv-text h2 { max-width: none; }
}

/* =========================================================================
   FARBRHYTHMUS

   Ein Abschnitt nach dem anderen in derselben Farbe liest sich wie eine
   einzige lange Seite. Ein Wechsel sagt ohne Worte: Hier fängt etwas
   Neues an.

   Die Reihenfolge auf der Beratungsseite:

     Hero              Creme
     Vertrauensleiste  Weiß
     Kommt dir bekannt Creme
     Für wen           Weiß
     Videocall         Pfirsich   ← der persönliche Moment
     Ablauf            Creme
     Beispiele         Weiß
     Bewertungen       Creme
     FAQ               Weiß
     Abschluss         Dunkel

   Mehr als vier Töne wären Unruhe. Diese vier reichen.
   ========================================================================= */

.section-topic.on-peach { background: var(--peach); }

/* =========================================================================
   IDENTIFIKATIONSKARTEN

   Der Hinweis darüber ist derselbe wie bei der Situationsauswahl auf der
   Startseite — dieselbe Frage, dieselbe Antwort, dieselbe Form.
   ========================================================================= */

.brb-anleitung {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--orange-dark);
}
.brba-pfeil {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1;
}