/* =========================================================================
   MOBILE STARTSEITE

   -------------------------------------------------------------------------
   WAS DIESE DATEI IST

   Kein Nachjustieren der Desktopfassung, sondern ein eigenes System für
   schmale Bildschirme. Sie steht bewusst in einer eigenen Datei, damit
   man sehen kann, wo die mobile Seite eigene Entscheidungen trifft — und
   sie notfalls in einem Stück wieder herausnehmen könnte.

   Sie wird NACH allen Seitenstylesheets geladen und VOR navigation.css.

   -------------------------------------------------------------------------
   DER GRUNDGEDANKE

   Auf dem Desktop liest man. Auf dem Handy scrollt man und entscheidet
   dabei alle paar Sekunden neu, ob es sich lohnt weiterzuscrollen.

   Daraus folgt beides: größere Schrift (weil man weiter weg hält und
   nebenbei liest) und engere Abstände (weil jede leere Fläche eine
   Gelegenheit ist aufzuhören).

   -------------------------------------------------------------------------
   DIE MASSE

   Sie kommen aus Rubens Vorgabe und sind hier einmal zentral abgelegt.
   Wer eine Größe ändern will, ändert sie hier — nicht an fünfzehn
   Stellen.
   ========================================================================= */

@media (max-width: 768px) {

  :root {
    /* Schrift. Die Werte sind Pixel, weil sie so vorgegeben wurden;
       intern gerechnet wird in rem, damit die Systemschriftgröße der
       Nutzerin weiterhin wirkt. */
    --m-h1:      2.75rem;   /* 44 px */
    --m-h2:      2rem;      /* 32 px */
    --m-h3:      1.5rem;    /* 24 px */
    --m-body:    1.125rem;  /* 18 px */
    --m-klein:   1rem;      /* 16 px */
    --m-taste:   1.0625rem; /* 17 px */

    /* Abstände. Vorher lagen zwischen zwei Abschnitten bis zu 130 px. */
    --m-sektion: clamp(48px, 9vw, 72px);
    --m-karte:   24px;
  }

  /* -----------------------------------------------------------------------
     1 · Schriftgrößen

     Wichtig ist nicht nur die Größe, sondern die Zeilenlänge. 30 bis 45
     Zeichen ist die Spanne, in der man auf einem Telefon flüssig liest.
     Bei 18 px sind das etwa 22 rem — deshalb steht max-width auf den
     Fließtexten und nicht auf ihren Behältern.
     ----------------------------------------------------------------------- */

  h1, .bh-copy h1, .umh-text h1, .fcd-inner h1, .fc-kopf h1 {
    font-size: var(--m-h1);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  h2, .section-head h2, .pain-quote {
    font-size: var(--m-h2);
    line-height: 1.16;
    letter-spacing: -0.028em;
  }

  h3, .situ-headline, .hj-panel h3, .ct-kopf, .uma-text h3 {
    font-size: var(--m-h3);
    line-height: 1.24;
    letter-spacing: -0.02em;
  }

  /* Fließtext. Grotesk, nicht Serif — auf kleinen Bildschirmen ist die
     Serifenschrift bei langen Absätzen anstrengender. */
  p, li, .situ-text, .hj-panel p, .ct-satz, .bh-sub, .lede, .sub {
    font-family: var(--sans);
    font-size: var(--m-body);
    line-height: 1.6;
  }
  p, .situ-text, .hj-panel p, .bh-sub, .lede, .sub {
    /* 22 rem bei 18 px ≈ 39 Zeichen. Genau in der Spanne. */
    max-width: 22rem;
  }
  /* In einer Karte gilt die Kartenbreite, nicht 22 rem. */
  .ct-satz, .fcdw-link small, .cn-body p { max-width: none; }

  .btn, .btn-primary, .btn-light, .btn-ghost, .ew-taste, .cq-btn {
    font-size: var(--m-taste);
  }

  /* Kleinkram bleibt klein, aber nicht winzig. Unter 14 px wird auf
     einem Telefon aus Information Dekoration. */
  .eyebrow, .situ-badge, .hjp-eyebrow, .ct-name, .cp-stand,
  .hjf-text, .cases-note, .sc-meta, .hje-note {
    font-size: 0.875rem;   /* 14 px */
  }
  .cases-disclaimer { font-size: 0.8125rem; }  /* 13 px, Pflichtangabe */

  /* -----------------------------------------------------------------------
     2 · Abstände

     Vorher: clamp(64px, …, 130px) zwischen Abschnitten. Auf einem Handy
     bedeutet das über eine halbe Bildschirmhöhe Beige zwischen zwei
     Gedanken.
     ----------------------------------------------------------------------- */

  .sec,
  .pain,
  section.section-topic,
  .kennzahlen-band { padding-block: var(--m-sektion); }

  .section-head { margin-bottom: 28px; }
  .section-head .sub,
  .section-head .lede { margin-top: 12px; }

  /* Innenabstand aller Karten auf ein Maß. */
  .situ-inhalt,
  .hj-panel,
  .check-head,
  .check-body,
  .cn-kopf,
  .fc-platzhalter { padding: var(--m-karte); }

  .ct-body { padding: var(--m-karte) var(--m-karte) calc(var(--m-karte) - 4px); }

  /* -----------------------------------------------------------------------
     3 · Alles darf schrumpfen

     Eine einzige Regel, die mehr Überläufe verhindert als jede
     Einzelkorrektur: Rasterspalten und Flexkinder dürfen kleiner werden
     als ihr Inhalt. Ohne min-width: 0 schiebt ein langes Wort die ganze
     Seite auf.
     ----------------------------------------------------------------------- */

  .container > *,
  .situ-inhalt > *,
  .hj-panel > *,
  .cn-kopf > * { min-width: 0; }

  /* Lange Wörter — „Liquiditätsreserve", „Berufsunfähigkeitsversicherung" —
     dürfen notfalls umbrechen, statt den Rand zu sprengen. */
  h1, h2, h3, p, li { overflow-wrap: break-word; }
  /* Hier stand bis eben die schließende Klammer der Medienabfrage.
     Alles Folgende galt dadurch auf JEDEM Bildschirm — inklusive
     des organischen Fotoausschnitts, der nur fürs Handy gedacht war.
     Sie steht jetzt am Ende des mobilen Teils, direkt vor dem
     Abschnitt BEWEGUNG, der absichtlich global ist. */

  /* -----------------------------------------------------------------------
     4 · Hero

     Kompakt heißt hier: Foto direkt unter dem Header, Überschrift im
     ausgeblendeten Teil des Fotos, darunter genau ein Aufruf und die
     Bewertungszahl. Kein zweiter Knopf, keine zweite Entscheidung.
     ----------------------------------------------------------------------- */

  .bh-kicker { margin-bottom: 12px; font-size: 0.8125rem; }
  .bh-copy h1 { margin-bottom: 14px; max-width: 13ch; }
  .bh-sub { margin-bottom: 22px; }

  .cta-row .btn-primary { width: 100%; justify-content: center; }

  .bh-proof {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-family: var(--sans);
    font-size: 0.875rem;
    color: var(--warm-grey);
  }
  .bhp-sterne { color: var(--orange); letter-spacing: 0.06em; font-size: 0.95rem; }
  .bh-proof b { color: var(--charcoal); font-weight: 700; }

  /* -----------------------------------------------------------------------
     5 · Problem und Identifikation

     Das Zitat ist die eigentliche Aussage — es führt. Das Foto ist ein
     Beleg dafür, dass ein Mensch dahintersteht, und braucht dafür keine
     halbe Bildschirmhöhe.

     Organische Form statt Rechteck: eine weiche, ungleichmäßige Rundung.
     Sie wirkt weniger nach Kachel und mehr nach Bildmarke — und
     unterscheidet das Foto von den Karten darunter.
     ----------------------------------------------------------------------- */

  .pain-grid {
    grid-template-areas: "zitat" "foto" "quelle" "antwort";
  }

  .pain-photo {
    aspect-ratio: 4 / 3;
    max-width: 62%;
    margin: 20px 0 0;
    /* Vier verschiedene Radien. Der Unterschied ist klein genug, dass
       niemand ihn benennt, und groß genug, dass es nicht nach Kachel
       aussieht. */
    border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
    box-shadow: none;
  }

  .pain-quote { margin-bottom: 0; }
  .pain-attrib { margin: 14px 0 20px; font-size: 0.9375rem; }
  .pain-answer {
    padding-left: 16px;
    border-left: 2px solid var(--orange);
  }
  .pain-answer p { font-size: var(--m-body); line-height: 1.6; }

  /* -----------------------------------------------------------------------
     6 · Selbstcheck

     Nur die aktuelle Frage steht da. Beantwortete bleiben oberhalb
     sichtbar — man sieht den eigenen Weg —, spätere sind ausgeblendet.

     display: none und nicht Höhe null: Eine ausgeblendete Frage soll
     auch für Screenreader und für die Tastatur nicht existieren, solange
     sie nicht an der Reihe ist.
     ----------------------------------------------------------------------- */

  .check-q.ist-versteckt { display: none; }

  /* Der Fortschritt heftet sich innerhalb des Abschnitts fest. */
  .check-progress { top: var(--kopf-hoehe, 76px); }
  .cp-stand { padding-inline: var(--m-karte); font-size: 0.875rem; }
  .cps-rechts { font-variant-numeric: tabular-nums; }

  /* Frage und Antworten untereinander, beide voll breit. */
  .check-q {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 0 24px 34px;
  }
  .cq-text { font-size: var(--m-body); line-height: 1.5; max-width: none; }
  .cq-text small { font-size: 0.9375rem; }
  .cq-answers { width: 100%; gap: 10px; }
  .cq-btn { flex: 1 1 0; min-height: 52px; }

  /* Das Ergebnis knapp halten. */
  .check-result { padding: var(--m-karte); }
  .cr-gaps { margin-top: 14px; }

  /* -----------------------------------------------------------------------
     7 · Der feste Buchungsknopf

     56 px hoch, wie vorgegeben. Das ist knapp über der Untergrenze für
     eine Touchfläche und flach genug, dass er nicht als Balken wirkt.

     Die Sicherheitszone unten kommt dazu, nicht hinein: Auf einem iPhone
     ohne Home-Knopf läge er sonst unter der Wischleiste.
     ----------------------------------------------------------------------- */

  .sticky-cta {
    min-height: 56px;
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn { min-height: 44px; padding: 10px 20px; }

  /* -----------------------------------------------------------------------
     8 · Beratungsablauf

     Eine Karte pro Bildschirm, alles darauf in wenigen Sekunden erfassbar:
     Schritt, Überschrift, zwei bis drei Sätze, der hervorgehobene Satz.

     Die Faktenlisten in der rechten Spalte sind auf dem Desktop gut —
     dort steht Platz daneben. Auf dem Handy verdoppeln sie die Kartenhöhe.
     Deshalb bleibt von ihnen nur die fette Zeile stehen, die Erklärung
     darunter entfällt. Verlinkungen bleiben erhalten.
     ----------------------------------------------------------------------- */

  .hj-wischhinweis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--warm-grey);
  }
  .hj-wischhinweis span { color: var(--orange); font-size: 0.95rem; }

  /* Die Faktenliste auf das Wesentliche. */
  .js-facts { gap: 8px; }
  .js-fact { padding: 10px 0; }
  .js-fact > span > span { display: none; }
  .js-fact > span > b { display: block; font-size: 1rem; }
  .js-fact .jf-link { display: inline-flex; margin-top: 6px; }
  .js-fact .jf-klein { display: none; }

  /* Der hervorgehobene Satz ist der Key-Takeaway. Er darf auffallen. */
  .hj-panel .hjp-ergebnis {
    margin-top: 16px;
    padding: 12px 0 12px 14px;
    font-size: 1.0625rem;
  }

  /* Ein Pfeil am rechten Kartenrand. Er zeigt, dass rechts weitergeht,
     auch wenn der Anschnitt gerade schwer zu sehen ist. */
  .hj-bahn > .hj-panel { position: relative; }
  .hj-bahn > .hj-panel:not(:last-child)::after {
    content: "›";
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(90, 60, 35, 0.28);
    pointer-events: none;
  }

  /* -----------------------------------------------------------------------
     9 · Footer

     Vorher stand jeder Punkt einzeln untereinander — vier Überschriften
     und dreizehn Links, jeder mit voller Zeilenhöhe. Das war fast eine
     ganze Bildschirmhöhe nur Fußzeile.

     Jetzt zwei Spalten für Navigation und Mehr, und die rechtlichen
     Links als fließende Zeile. Sie dürfen umbrechen, aber nicht jeder
     mit eigenem Absatz.
     ----------------------------------------------------------------------- */

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }
  .footer-brand { grid-column: 1 / -1; }

  .footer-col h5 { margin-bottom: 10px; }
  .footer-col ul { display: flex; flex-direction: column; gap: 2px; }
  .footer-col li { margin: 0; }
  .footer-col a {
    display: block;
    padding: 7px 0;
    font-size: 0.9375rem;
  }

  /* Rechtliches quer über beide Spalten, als Zeile mit Trennpunkten. */
  .footer-col.ist-recht {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
  }
  .footer-col.ist-recht ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: baseline;
  }
  .footer-col.ist-recht li { display: inline; }
  .footer-col.ist-recht li + li::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.45;
  }
  .footer-col.ist-recht a {
    display: inline;
    padding: 0;
    font-size: 0.875rem;
    line-height: 2;
  }

  /* Icons statt ausgeschriebener Namen. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-social { gap: 6px; }

  /* -----------------------------------------------------------------------
     10 · Beratungsseite

     Dieselbe Regel wie überall: Nicht der Desktop wird gestapelt,
     sondern der Inhalt bekommt eine eigene Form.
     ----------------------------------------------------------------------- */

  /* Themenkacheln: zwei Spalten, kompakt. Acht Stück in zwei Spalten
     sind vier Reihen — überschaubar, ohne dass man wischen muss. */
  .brac-chip { padding: 12px; font-size: 0.8125rem; gap: 8px; }
  .bracc-zeichen { font-size: 1.05rem; }

  /* Heute, Morgen, Später als Wischkarten. Drei große Textblöcke
     untereinander wären genau die Textwand, die hier vermieden werden
     soll — und nebeneinander passen sie nicht. */
  .bra-horizonte {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rand, 16px);
    margin-inline: calc(-1 * var(--rand, 16px));
    padding: 4px var(--rand, 16px) 12px;
    scrollbar-width: none;
  }
  .bra-horizonte::-webkit-scrollbar { display: none; }
  .brah-zeit {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Die Budgetbalken untereinander statt nebeneinander — sonst bleibt
     für den Text neben einem 200-px-Balken nichts übrig. */
  .bravt-teil { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bravt-balken { width: var(--anteil); height: 26px; }

  .brap-liste li { font-size: 0.9375rem; padding: 12px 14px; }
  .bra-teilschritt { padding: 16px; }

  /* Fallbeispiele auf der Beratungsseite: dieselbe Wischlösung wie auf
     der Startseite. Die Regeln dafür stehen in start.css und greifen
     hier mit, weil dieselben Klassen verwendet werden. */

  /* -----------------------------------------------------------------------
     11 · Beratungsseite, zweiter Teil

     Die Journey bringt ihre eigenen Mobilregeln mit (css/beratung.css).
     Hier steht nur, was zusätzlich aus dem mobilen System kommt:
     Schriftgrößen, Abstände, Textbreiten.
     ----------------------------------------------------------------------- */

  /* Identifikationskarten: eine große pro Bildschirm zum Wischen.
     Fünf schmale nebeneinander waren genau das Problem. */
  .br-bekannt {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rand, 16px);
    margin-inline: calc(-1 * var(--rand, 16px));
    padding: 4px var(--rand, 16px) 12px;
    scrollbar-width: none;
  }
  .br-bekannt::-webkit-scrollbar { display: none; }
  .brb-karte {
    flex: 0 0 84%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .brb-satz { font-size: 1.0625rem; line-height: 1.45; }

  /* Der Videocall-Abschnitt */
  .brv-text h2 { font-size: var(--m-h2); }
  .brv-text > p { font-size: var(--m-body); max-width: none; }
  .brv-bubble { font-size: 0.95rem; padding: 8px 16px; }
  .brv-herzen li { font-size: 1rem; padding: 3px 0; }
  .brv-schluss { font-size: 1.05rem; }

  /* Journey-Karten: Schrift aus dem mobilen System */
  .bra-kopf h3 { font-size: var(--m-h3); }
  .bra-text { font-size: var(--m-body); max-width: none; }
  .bra-haken li { font-size: 1rem; }
  .brahz-liste li { font-size: 0.9375rem; }

  /* Für wen: Kacheln untereinander, aber kompakt */
  .brf-punkte li { font-size: 1rem; padding: 7px 0; }

  /* -----------------------------------------------------------------------
     12 · Sehr schmale Geräte

     Bei 320 px bleiben in einer Auswahlkarte nur 106 px Textbreite. Die
     längste Beschriftung braucht dort fünf Zeilen. Weniger Innenabstand
     und eine Spur kleinere Schrift bringen sie auf vier.

     Nachgerechnet, nicht geschätzt: 138 px Karte − 2 × 12 px = 114 px.
     ----------------------------------------------------------------------- */

  @media (max-width: 360px) {
    .situ-chip { padding: 14px 12px; min-height: 112px; }
    .sc-emoji { font-size: 1.5rem; margin-bottom: 8px; }
    .sc-kurz { font-size: 0.8125rem; line-height: 1.3; }
    :root { --m-h1: 2.375rem; --m-h2: 1.75rem; }
  }

}

/* =========================================================================
   BEWEGUNG

   Sparsam und mit Anlass. Alles hier hat eine Aufgabe:

     Einblenden      sagt „hier beginnt etwas Neues"
     Hochzählen      macht aus einer Zahl ein Ereignis
     Skalieren       bestätigt einen Tipp
     Einrasten       macht das Wischen berechenbar

   Nichts davon läuft dauerhaft, nichts wiederholt sich, nichts bewegt
   sich, während man liest.
   ========================================================================= */

.m-auf {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22, .8, .3, 1);
}
.m-auf.ist-da {
  opacity: 1;
  transform: none;
}

/* Mehrere Karten nacheinander statt alle gleichzeitig. Der Versatz ist
   klein — 60 ms reichen, damit es nach Reihenfolge aussieht und nicht
   nach Verzögerung. */
.m-auf[data-verzug="1"] { transition-delay: 0.06s; }
.m-auf[data-verzug="2"] { transition-delay: 0.12s; }
.m-auf[data-verzug="3"] { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .m-auf {
    opacity: 1;
    transform: none;
    transition: none;
  }
}