/* Visitenkarte A14 (30.10.2026): nur die Aenderungen gegenueber a13.css. David: "Und das Bild ist noch nicht groesser"
   (A13 hatte 124 px) und das Ticket "Kostenlose Finanzanalyse + Beratung" (laenger: darf umbrechen). */

/* Foto deutlich groesser auf normalen und grossen Handys; kleine Handys (SE) behalten a13.css (Ticket und "Kontakt
   speichern" muessen dort ins erste Bild) */
@media (min-device-height: 760px) and (orientation: portrait) {
    .foto, .foto img { width: 150px; height: 188px; border-radius: 40px; }
    .foto::after { border-radius: 44px; }
}
/* 30.10.2026 abends, David: "das Foto ... zu klein, nur mein Kopf ... ein bisschen den Koerper auch sehen": Anzugfoto 4:5
   (gemeinsam/david-laecheln-600: lachendes Foto 23, Real-ESRGAN x4 lokal, Ausschnitt bis zur Schulter ohne Loeffel), Rahmen hochkant; Anzugfoto verworfen ("sehr unsympathisch") */
@media (min-device-height: 860px) and (orientation: portrait) {
    .foto, .foto img { width: 168px; height: 210px; border-radius: 44px; }
    .foto::after { border-radius: 48px; }
}
.foto img { object-fit: cover; object-position: 50% 0%; }

/* Der laengere Ticket-Titel bricht um statt abgeschnitten zu werden */
.ticket .ticket-haupt b { white-space: normal; text-wrap: balance; }

/* iPhone SE (375 x 667): der zweizeilige Ticket-Titel braucht 16 px; das Foto gibt 8 davon her (gemessen: "Kontakt
   speichern" endete bei 612 px, das Dock beginnt bei 607 px) */
@media (max-device-height: 700px) and (orientation: portrait) {
    .foto, .foto img { width: 92px; height: 92px; border-radius: 26px; }
    .foto::after { border-radius: 30px; }
}
/* 30.10.2026 abends: die zwei Haken sind laenger (Zoom, "+ Finanzanalyse") und stehen untereinander. Gemessen danach:
   "Kontakt speichern" endete 375x667 bei 632 px (Dock 607), 360x800 bei 759 px (Dock 740). Kleine Hoehen: Haken kompakter,
   "Antwort meist am selben Werktag" faellt weg (SE), Foto im mittleren Bereich kleiner. */
@media (max-device-height: 859px) and (orientation: portrait) {
    .einstieg .fakten { font-size: 13px; line-height: 17px; row-gap: 4px; }
}
@media (min-device-height: 760px) and (max-device-height: 859px) and (orientation: portrait) {
    .foto, .foto img { width: 128px; height: 160px; border-radius: 36px; }
    .foto::after { border-radius: 40px; }
}
@media (max-device-height: 700px) and (orientation: portrait) {
    .beleg, .beleg-klein { display: none; }
}
@media (min-device-height: 820px) and (max-device-height: 859px) and (orientation: portrait) {   /* 390x844, 393x852: 76 px Luft gemessen */
    .foto, .foto img { width: 150px; height: 188px; border-radius: 40px; }
    .foto::after { border-radius: 44px; }
}

/* Rechtspruefung (30.10.2026): Kredit-Warnhinweis "klar und auffallend" (VKrG 2026 Paragraf 8 Abs. 1): eigene Zeile, hell und fett,
   mit gelbem Strich davor; nicht grau wie Kleingedrucktes */
.zeile-text .warnhinweis { display: block; margin-top: 6px; padding-left: 8px; border-left: 3px solid #ffd60a;
    font-size: 15px; line-height: 20px; font-weight: 700; color: var(--text); text-wrap: balance; }
/* 30.10.2026 abends, Davids Wahl "ruhig statt rot": gleichwertige Formulierung (VKrG 2026 Paragraf 8 Abs. 1), eigene Zeile
   in normaler Textfarbe, gut lesbar */
.zeile-text .kredit-hinweis { display: block; margin-top: 6px; font-size: 14px; line-height: 19px; font-weight: 500;
    color: var(--text); opacity: 0.85; }
/* Statuszeilen in der Fusszeile (Online-Fassung): links ausgerichtet, lange Woerter duerfen umbrechen */
.fusszeile .status { text-align: left; overflow-wrap: anywhere; }
.impressum div { overflow-wrap: anywhere; }
/* 30.10.2026 abends: Google-Sterne des Bueros (Googles Regeln: "auf Google", Anzahl, Datum, kein eigenes Abzeichen) */
.beleg .sterne { color: #fbbc04; letter-spacing: 1px; margin-right: 6px; }
.beleg-klein { margin: -6px 0 0; text-align: center; font-size: 12px; line-height: 16px; color: var(--text-2); }
.fuss.steuer { margin-top: 6px; }
/* Schlusspruefung 30.10.2026 abends: die kleine Zeile unter den Sternen klebte am Knopf "Kontakt speichern" -> Luft;
   360x800 gemessen Knopf 743 px, Dock 740 px -> Foto im Bereich 760-819 px Hoehe kleiner */
.beleg-klein { margin-bottom: 8px; }
@media (min-device-height: 760px) and (max-device-height: 819px) and (orientation: portrait) {
    .foto, .foto img { width: 112px; height: 140px; border-radius: 32px; }
    .foto::after { border-radius: 36px; }
}
/* "So bin ich fuer Sie taetig" (30.10.2026 abends, Davids Wort "nichts gequetscht oder als Fliesstext-Block"):
   Karte mit Vorstellung (klein, grau) und Kernsatz (gross), darunter 4 Vorteile als Kacheln wie "Direkt erreichen" */
.taetig-karte .taetig-vor { margin: 0; font-size: 15px; line-height: 21px; color: var(--text-2); text-wrap: pretty; }
.taetig-karte .taetig-kern { margin: 10px 0 0; font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.vorteile { margin-top: 10px; }
.vorteile .kachel { min-height: 0; gap: 10px; padding: 14px 14px 16px; }
.vorteile .kachel b { margin-bottom: 2px; }
.vorteile .kachel small { margin-top: 4px; overflow-wrap: normal; }

/* Hochformat-Stufen nach Geraetehoehe (device-height) statt sichtbarer Hoehe (30.10.2026 spaet, Davids Meldung vom iPhone:
   "Das Bild ist klein, wenn ich runterscroll, wird's groß"). Safari blendet beim Scrollen die Adressleiste aus, die sichtbare
   Hoehe waechst (gemessen 660 -> 750 px bei 844er Bildschirm) und das Foto sprang von 92x92 auf 121x121. Die Geraetehoehe
   bleibt fest; die Stufen sind dieselben wie bisher (gestaltet und geprueft bei 390x844 = Geraet 844). Gilt auch fuer a12/a13.css. */

/* Leiste deckt ab (30.10.2026 spaet, Davids Meldung vom iPhone: "ueber der Leiste sieht man das Foto durchscrollen").
   Vorher halbdurchsichtig (0,78 + Unschaerfe): im oberen Polster und in der Safe Area schien der Inhalt durch. Jetzt deckend
   in der Seitenfarbe; die Flaeche darueber faengt Safe Area und das Nachfedern am oberen Rand ab. Die Kurz-Titel-Zeile ist weg. */
.segment-leiste, .segment-leiste.ist-kurz { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.segment-leiste::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 400px; background: var(--bg); pointer-events: none; }
.kurz-titel { display: none; }

/* Ganz oben nie Inhalt (30.10.2026 spaet, Davids Meldung vom iPhone: ueber dem Balken scheint beim Scrollen Inhalt durch, beim
   Hochscrollen sogar die andere Seite). (1) Kein Gummiband-Ueberscrollen am oberen Rand: Safari zieht die Seite nicht mehr herunter,
   dahinter blitzt nichts auf. (2) Fester Deckel in Seitenfarbe von oberhalb des Bildschirms bis zur Unterkante der Safe Area, ueber
   allem: deckt den Bereich unter der Statusleiste, in dem Safari sonst Inhalt oberhalb des Fensters zeigt, auch waehrend eines
   Seitenwechsels. */
html, body { overscroll-behavior-y: none; }
body::before { content: ""; position: fixed; left: 0; right: 0; top: -400px; height: calc(400px + env(safe-area-inset-top, 0px));
    background: var(--bg); z-index: 60; pointer-events: none; }

/* App-Huelle (30.10.2026 spaet, Davids iPhone-Foto aus dem Telegram-Browser: zwischen der schwebenden Adressleiste und dem
   Seitenbalken scrollte das Foto durch). In-App-Browser legen ihre Leiste ueber die Seite und zeigen dahinter den Teil des
   Dokuments, der nach oben weggescrollt ist; feste Flaechen malen sie dort nicht. Darum scrollt jetzt nicht mehr das Dokument,
   sondern body: was nach oben wegscrollt, wird an der Oberkante von body abgeschnitten und existiert darueber nicht mehr.
   Baustein: Skill webseite-bauen, bewegung-und-handy.md ("100dvh fuer eine App-Huelle"). Scroll-Zeitachse --seite fuer die
   Gutscheine (nav-gg.css), a11.js/kueche.js lesen die Position aus body.
   NUR in In-App-Browsern (Klasse app-huelle aus dem Kopfskript; Davids Wort: in Safari und Chrome passt alles, dort nichts aendern). */
html.app-huelle { height: 100%; overflow: hidden; }
html.app-huelle body { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; scroll-timeline: --seite block; }