/* Schrift Inter, selbst ausgeliefert (T5, Bauregel 12). Lizenz: SIL Open Font License 1.1, siehe ../schrift/LIZENZ-Inter.txt */
@font-face { font-family: 'Inter'; src: url('../schrift/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Gestaltung aus dem Prototyp (qa/quellen/app.template.html), verschlankt für v1.
   Keine fremden Schriften und Bilder, keine style-Attribute im HTML (spätere Inhaltsregel). */
/* ===== Stil nach Stilprobe 5: Airbnb/Uber, Ziegelrot nur für Hauptaktion und Zustand ===== */
:root {
  --color-page: #FFFFFF; --color-bg: #F7F7F7; --color-tint: #DDDDDD; --color-surface: #F2F2F2; --color-paper: #FFFFFF;
  --color-ink: #222222; --color-ink-secondary: #484848; --color-text: #717171; --color-text-muted: #717171; --color-quiet: #9A9A9A;
  --color-line: #EEEEEE; --color-line2: #E4E4E4;
  --grad: linear-gradient(90deg, #D4432F, #C73E2E); --acc: #C9432F;
  /* Warnfarbe Karminrot, deutlich anders als das Ziegelrot der Hauptaktion (Farbton 7° statt 31°, Prüfung 07.11.2026) */
  --color-error: #A8124A; --color-error-wash: rgba(168,18,74,.06); --color-error-bg: #FBEEF2;
  --color-field-line: #949494;
  /* Schriftgrößen: eine feste Reihe, nichts unter 12 Pixeln (Prüfung 07.11.2026) */
  --fs-xs: 0.75rem; --fs-s: 0.8125rem; --fs-m: 0.875rem; --fs-l: 0.9375rem; --fs-base: 1rem; --fs-xl: 1.0625rem;
  --fs-2xl: 1.125rem; --fs-3xl: 1.375rem; --fs-4xl: 1.75rem; --fs-5xl: 2rem;
  --g: 24px; --block: 32px; --section: 40px; --tabbar-h: 76px;
  --sh-card: 0 2px 6px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --sh-pill: 0 2px 4px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.10);
  --sh-btn: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08);
  --sh-sheet: 0 -4px 20px rgba(0,0,0,.08);
  --sh-primary: 0 6px 16px -6px rgba(199,62,46,.45);
  --shadow-4: 0 30px 70px -25px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
  --radius-md: 14px; --radius-lg: 20px; --radius-card: 24px; --radius-xl: 28px; --radius-pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1); --fast: .22s; --base: .55s;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior: none; }
html, body { background: var(--color-page); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; color: var(--color-text); font-size: var(--fs-base); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; touch-action: manipulation; }
button, .row, .tab, .chip { -webkit-user-select: none; user-select: none; }
input, textarea { font: inherit; }
/* Felder zeigen den Fokus als Schatten; die durchsichtige Umrandung erscheint im Kontrastmodus von Windows, der Schatten entfernt */
input:focus, textarea:focus { outline: 2px solid transparent; outline-offset: -2px; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.muted { color: var(--color-text-muted) !important; font-style: normal; }
input::placeholder, textarea::placeholder { color: var(--color-text); }
svg { display: block; }
/* Einheitlicher Symbolsatz: feine Linien, Stärke 1,5 */
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
svg.i.fill { fill: currentColor; stroke: none; }

@keyframes pushIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes backIn { from { transform: translateX(-24%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes upIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes tabIn { from { opacity: 0; transform: translateX(var(--dx, 16px)); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes spark { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.4); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shakeX { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }

/* ---------- Rahmen ---------- */
.page { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; }
.app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; position: relative; overflow: hidden; background: var(--color-page); }
/* Rahmen nur bei genug Höhe und nur mit Maus oder Trackpad: Telefone quer und Tablets mit Touch bleiben randlos und unverkleinert.
   Gerätevorschau immer in Originalgröße 390 × 844. Passt sie nicht in die Höhe, gilt die normale Ansicht über die ganze Höhe:
   Verkleinern hob die Vergrößerung des Browsers wieder auf (WCAG 1.4.4, Prüfung 07.11.2026). */
@media (min-width: 768px) and (min-height: 908px) and (hover: hover) and (pointer: fine) {
  html, body { background: #ECECEE; }
  .page { height: 100vh; height: 100dvh; min-height: 0; padding: 32px 24px; align-items: flex-start; background: #ECECEE; overflow: hidden; }
  .app { flex: none; width: 390px; max-width: none; height: 844px; border-radius: 46px; box-shadow: var(--shadow-4); }
}
.screen { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--color-page); }
.screen.active { display: flex; }
.screen.a-push { animation: pushIn .32s var(--ease) both; }
.screen.a-back { animation: backIn .32s var(--ease) both; }
.screen.a-up { animation: upIn .38s var(--ease) both; }
.screen.a-fade { animation: fadeIn .32s var(--ease) both; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pad { padding: 0 var(--g); }
/* Feste Fußleiste wie in der Vorlage: weiß, feine Linie oben */
.actions { padding: 14px var(--g) calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; background: var(--color-paper); border-top: 1px solid var(--color-line); position: relative; z-index: 2; }

/* ---------- Kopfleisten ---------- */
.navbar { flex: 0 0 auto; height: calc(60px + var(--safe-top)); padding: var(--safe-top) 12px 0; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; column-gap: 8px; align-items: center; position: relative; z-index: 3; }
.navbar > :first-child { justify-self: start; }
.navbar > :last-child { justify-self: end; }
.navbar .nb-title { min-width: 0; text-align: center; font-size: var(--fs-l); font-weight: 600; color: var(--color-ink); opacity: 0; transition: opacity var(--fast) var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.navbar.scrolled { background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px); box-shadow: 0 1px 0 var(--color-line); }
.navbar.scrolled .nb-title { opacity: 1; }
.nb-gap { width: 44px; }
.nb-btn { min-width: 44px; height: 44px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; color: var(--color-ink); padding: 0 10px; font-size: var(--fs-m); font-weight: 500; position: relative; }
/* Runder Symbolknopf 34 px, weiß mit Schatten, Trefferfläche 44 px */
.nb-btn:not(.text)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--color-paper); box-shadow: var(--sh-btn); }
.nb-btn svg { width: 18px; height: 18px; position: relative; }
.nb-btn:not(.text):active::before { background: var(--color-surface); }
.nb-btn.text { color: var(--color-ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.nb-btn.text:active { color: var(--color-text); }
.nb-title .t-short { display: none; }
@media (max-width: 374px) { .nb-title .t-long { display: none; } .nb-title .t-short { display: inline; } [data-s="edit"] .navbar .nb-btn.text { padding: 0 6px; font-size: var(--fs-m); } }
.ltitle { font-size: var(--fs-4xl); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--color-ink); padding: 12px var(--g) 0; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.lsub { padding: 8px var(--g) 0; font-size: var(--fs-m); line-height: 1.5; color: var(--color-text); }

/* ---------- Typo ---------- */
.display { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; color: var(--color-ink); text-wrap: balance; }
.display b { font-weight: 600; }
.body { font-size: var(--fs-m); line-height: 1.55; color: var(--color-text); }
.small { font-size: var(--fs-s); line-height: 1.45; color: var(--color-text); }
.label { display: block; font-size: var(--fs-s); font-weight: 500; color: var(--color-ink); margin-bottom: 8px; }
.label .opt { font-weight: 400; color: var(--color-text); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe: Haupt (Ziegelrot), Neben (hellgraue Pille), leise (Textlink) ---------- */
.btn { width: 100%; min-height: 52px; border-radius: var(--radius-pill); font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; text-align: center; text-wrap: balance; overflow-wrap: break-word; line-height: 1.25; transition: transform var(--fast) var(--ease), box-shadow var(--base) var(--ease), background var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-primary { background: var(--grad); color: #FFFFFF; font-size: var(--fs-base); font-weight: 600; box-shadow: var(--sh-primary); }
.btn-primary:disabled, .btn-primary.soft-off { background: var(--color-surface); box-shadow: none; color: var(--color-ink-secondary); }
.btn-ink, .btn-secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: none; }
.btn-ink:active, .btn-secondary:active { background: #E8E8E8; }
.btn-quiet { min-height: 44px; font-size: var(--fs-m); font-weight: 500; color: var(--color-ink); width: auto; align-self: center; margin-left: auto; margin-right: auto; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px; padding: 0 10px; }
.btn-quiet.red { color: var(--color-error); }
.btn-quiet.stack { flex-direction: column; gap: 0; line-height: 1.3; padding: 6px 8px; text-decoration: none; }
.btn-quiet.stack .u { text-decoration: underline; text-underline-offset: 3px; }
.btn-quiet.stack small { font-size: var(--fs-xs); font-weight: 400; color: var(--color-text); }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .btn-pair.stack-sm .btn { padding: 0 8px; font-size: var(--fs-m); } }
@media (max-width: 260px) { .btn-pair { grid-template-columns: 1fr; } }
.btn-danger { background: var(--color-paper); color: var(--color-error); box-shadow: inset 0 0 0 1.5px var(--color-error); font-weight: 600; }
.btn-sm { min-height: 40px; width: auto; font-size: var(--fs-m); padding: 0 16px; white-space: nowrap; flex: 0 0 auto; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: var(--fs-xs); color: var(--color-ink); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust span::before { content: ""; width: 4px; height: 4px; border-radius: 100px; background: var(--color-quiet); }
/* Häkchen „Geprüft“: einzige rote Stelle neben Hauptknopf, Reiter, Schalter und Standort */
.vcheck { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.vcheck svg { width: 15px; height: 15px; color: var(--acc); }

/* ---------- Felder ---------- */
.field { margin-top: 24px; }
/* Eingabeschrift 16 Pixel: kleiner zoomt das iPhone beim Antippen */
.input { width: 100%; min-height: 56px; font-size: var(--fs-base); color: var(--color-ink); background: var(--color-paper); border: 0; border-radius: var(--radius-md); padding: 0 16px; box-shadow: 0 0 0 1px var(--color-field-line), var(--sh-btn); transition: box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); }
.input:focus { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-btn); }
.input.err { background: var(--color-error-wash); box-shadow: 0 0 0 1.5px var(--color-error); animation: shakeX .35s var(--ease); }
textarea.input { min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.row2 { display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; }
.hint { margin-top: 8px; font-size: var(--fs-s); line-height: 1.45; color: var(--color-text); }
.error { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-error-bg); color: var(--color-error); font-size: var(--fs-m); line-height: 1.4; }
.error.show { display: block; animation: shakeX .35s var(--ease); }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; margin-top: 24px; font-size: var(--fs-m); line-height: 1.5; color: var(--color-ink-secondary); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--color-ink); margin-top: 0; flex: 0 0 auto; }
.check a { text-decoration: underline; text-underline-offset: 2px; color: var(--color-ink); }
.check > span { min-width: 0; overflow-wrap: break-word; }
.check input.err { outline: 2px solid var(--color-error); outline-offset: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--color-surface); border-radius: var(--radius-pill); }
.seg button { min-height: 44px; border-radius: var(--radius-pill); font-size: var(--fs-m); font-weight: 500; color: var(--color-ink-secondary); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); line-height: 1.2; padding: 4px 6px; }
.seg button.on { background: var(--color-paper); color: var(--color-ink); font-weight: 600; box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-btn); }
.seg button small { display: block; font-size: var(--fs-s); font-weight: 400; color: var(--color-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-line2); font-size: var(--fs-m); font-weight: 500; color: var(--color-ink); display: inline-flex; align-items: center; gap: 6px; transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.chip svg { width: 16px; height: 16px; color: var(--color-text); }
.chip.on { background: var(--color-bg); box-shadow: 0 0 0 1.5px var(--color-ink); }
.chip.on svg { color: var(--color-ink); }
.chip:not(:disabled):active { transform: scale(.96); }

/* ---------- Listen mit feinen Linien statt Kästen ---------- */
.group { margin: var(--block) var(--g) 0; background: transparent; }
.group-title { margin: var(--section) var(--g) 0; font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); letter-spacing: -.005em; }
.group-title + .group { margin-top: 4px; }
.li { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 14px; padding: 15px 0; text-align: left; position: relative; font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.li:last-child { border-bottom: 0; }
button.li:active, a.li:active { background: var(--color-bg); }
@media (hover: hover) {
  button.li:hover, a.li:hover, .row:hover, .chip:hover, .tier:not(.info):hover, .as-group button:hover, .as-cancel:hover { background: var(--color-bg); }
  .btn-ink:hover, .btn-secondary:hover { background: #E8E8E8; }
  .btn-primary:not(:disabled):hover { filter: brightness(1.06); }
  .btn-quiet:hover, .nb-btn.text:hover { text-decoration-thickness: 2px; }
}
.li .li-main { flex: 1 1 0; min-width: min-content; overflow-wrap: break-word; }
.li .li-sub { display: block; font-size: var(--fs-s); font-weight: 400; color: var(--color-text); margin-top: 3px; line-height: 1.4; overflow-wrap: break-word; }
.li .li-val { font-size: var(--fs-m); font-weight: 400; color: var(--color-text); text-align: right; flex: 0 1 auto; min-width: 0; max-width: 55%; overflow-wrap: break-word; }
.li .chev, svg.chev { width: 18px; height: 18px; color: var(--color-quiet); flex: 0 0 auto; }
.li .ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-text); }
.li .ico svg { width: 22px; height: 22px; }
.li:focus-visible { outline-offset: -2px; }
.li:has(input.inline:focus-visible) { box-shadow: inset 0 -1.5px 0 var(--color-ink); }
.li:has(input.inline[aria-invalid="true"]) { box-shadow: inset 0 -1.5px 0 var(--color-error); background: var(--color-error-wash); }
.li:has(input.inline[aria-invalid="true"]) .li-label { color: var(--color-error); }
[data-s="edit"] .scroll { scroll-padding-top: 120px; }
[data-s="edit"] .li.fld { scroll-margin-top: 120px; }
.li.clickable { cursor: pointer; }
.li.danger { color: var(--color-error); }
.li input.inline { flex: 1; min-width: 0; border: none; background: transparent; font-size: var(--fs-base); color: var(--color-ink); text-align: right; }
.li label.li-label { flex: 0 0 auto; font-size: var(--fs-l); color: var(--color-ink); }
.li.fld { flex-direction: column; align-items: stretch; gap: 2px; cursor: text; padding: 12px 0; border-bottom-color: var(--color-field-line); }
.li.fld:last-child { border-bottom: 1px solid var(--color-field-line); }
.li.fld .li-label { font-size: var(--fs-xs); font-weight: 500; color: var(--color-text); }
.li.fld input.inline { text-align: left; min-height: 30px; width: 100%; font-weight: 400; }
.li.fld input.inline:disabled { color: var(--color-text); }
.switch { width: 46px; height: 28px; border-radius: 100px; background: var(--color-field-line); position: relative; flex: 0 0 auto; transition: background var(--fast) var(--ease); }
.switch span { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 100px; background: var(--color-paper); box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform var(--base) var(--ease); }
.switch.on { background: var(--acc); }
.switch.on span { transform: translateX(18px); }
.switch::before { content: ""; position: absolute; inset: -8px -5px; } /* unsichtbare Trefferfläche 56 × 44 */

/* ---------- Reiterleiste wie in der Vorlage ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(2, 1fr); padding: 6px 16px calc(10px + var(--safe-bottom)); background: var(--color-paper); border-top: 1px solid var(--color-line); }
.tab { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--color-text); position: relative; }
.tab .pill { width: 44px; height: 28px; display: flex; align-items: center; justify-content: center; }
.tab svg { width: 24px; height: 24px; }
.tab.on { color: var(--acc); font-weight: 600; }
.tabview { position: absolute; inset: 0; bottom: 0; display: none; flex-direction: column; }
.tabview.active { display: flex; animation: tabIn .3s var(--ease) both; }
/* Tastatur: fokussierte Inhalte nicht unter Kopf- und Reiterleiste */
.tabview .scroll { padding-bottom: calc(120px + var(--safe-bottom)); scroll-padding-top: calc(68px + var(--safe-top)); scroll-padding-bottom: calc(var(--tabbar-h) + 16px + var(--safe-bottom)); }
/* Netzwerk und Profil: Kopfleiste über dem Scrollbereich */
.tabview > .navbar { position: absolute; left: 0; right: 0; top: 0; }
.tabview > .scroll[data-collapse] { padding-top: calc(52px + var(--safe-top)); }

/* ---------- Karte: ruhig wie eine entsättigte Stadtkarte ---------- */
.map { position: absolute; inset: 0; overflow: hidden; background: #F1F1EE; }
.map svg { width: 100%; height: 100%; }
.map .fade-top { position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(180deg, rgba(255,255,255,.96) 30%, rgba(255,255,255,0)); pointer-events: none; }
.map-ring { fill: rgba(34,34,34,.035); stroke: var(--color-ink); stroke-opacity: .16; stroke-width: 1; }
.ringgrow { transform-box: fill-box; transform-origin: center; animation: dotIn .9s var(--ease) both; }
.pin { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: dotIn .45s var(--ease) both; }
.halo { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) 2; }

/* ---------- Startbildschirm für Gäste (Mark, 28.10.2026, Entwurf C1 mit Netz) ----------
   Dunkler Verlauf, der langsam treibt (nur transform, kein Unschärfefilter), darüber das wachsende Netz. */
.intro { background: #160B09; color: #FFFFFF; overflow: hidden; }
.intro-fleck { position: absolute; border-radius: 50%; pointer-events: none; }
.intro-fleck.f1 { width: 120%; height: 70%; left: -40%; top: -18%; background: radial-gradient(closest-side, rgba(212,67,47,.85), rgba(212,67,47,0)); animation: treiben1 5s ease-in-out both; }
.intro-fleck.f2 { width: 110%; height: 60%; right: -45%; top: 18%; background: radial-gradient(closest-side, rgba(240,122,74,.55), rgba(240,122,74,0)); animation: treiben2 5s ease-in-out both; }
.intro-fleck.f3 { width: 120%; height: 60%; left: -30%; bottom: -25%; background: radial-gradient(closest-side, rgba(142,42,31,.7), rgba(142,42,31,0)); animation: treiben3 5s ease-in-out both; }
@keyframes treiben1 { to { transform: translate(18%, 10%) scale(1.1); } }
@keyframes treiben2 { to { transform: translate(-22%, 14%) scale(.9); } }
@keyframes treiben3 { to { transform: translate(14%, -12%) scale(1.15); } }
.intro-karte { position: absolute; left: 0; right: 0; top: calc(64px + var(--safe-top)); height: 38%; z-index: 1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); }
.intro-karte svg { width: 100%; height: 100%; overflow: visible; }
.netz line { stroke: rgba(255,255,255,.16); stroke-width: .3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: netzLinie .8s ease-out forwards; }
.netz circle.p { fill: #FFFFFF; opacity: 0; transform-box: fill-box; transform-origin: center; animation: netzPunkt .6s var(--ease) forwards; --hell: .35; }
.netz circle.p.mit { --hell: .9; }
.netz circle.p.du { fill: #FF6A4F; --hell: 1; animation-delay: .2s; }
.netz circle.ring { fill: none; stroke: #FF6A4F; stroke-width: .5; transform-box: fill-box; transform-origin: center; animation: netzRing 2.4s ease-out 2; }
@keyframes netzLinie { to { stroke-dashoffset: 0; } }
@keyframes netzPunkt { from { opacity: 0; transform: scale(0); } to { opacity: var(--hell); transform: scale(1); } }
@keyframes netzRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(5); opacity: 0; } }
.intro-inhalt { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(22px + var(--safe-top)) var(--g) 0; overflow-y: auto; }
.intro-kopf { display: flex; justify-content: space-between; align-items: center; margin-right: -8px; }
.intro-kopf .btn-quiet { margin: 0; color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: var(--fs-l); }
.intro-titel { margin-top: auto; padding-top: 24px; }
.intro-titel h1 { font-size: var(--fs-5xl); font-weight: 650; line-height: 1.08; letter-spacing: -.03em; color: #FFFFFF; text-shadow: 0 2px 18px rgba(22,11,9,.6); animation: rise .7s var(--ease) .1s both; }
.intro-unter { margin-top: 12px; font-size: var(--fs-base); line-height: 1.45; color: rgba(255,255,255,.8); animation: rise .7s var(--ease) .18s both; }
.intro-vorteile { list-style: none; margin: 18px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.intro-vorteile li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: rise .7s var(--ease) both; }
.intro-vorteile li:nth-child(1) { animation-delay: .3s; } .intro-vorteile li:nth-child(2) { animation-delay: .42s; } .intro-vorteile li:nth-child(n+3) { animation-delay: .54s; }
.intro-vorteile svg.i { color: #FFFFFF; opacity: .9; }
.intro-t { display: block; font-size: var(--fs-m); font-weight: 600; line-height: 1.3; }
.intro-s { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.72); margin-top: 1px; line-height: 1.35; }
.intro .actions { position: relative; z-index: 2; background: transparent; border-top: none; }
.btn-weiss { position: relative; background: #FFFFFF; color: #1A0F0D; font-size: var(--fs-base); font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
/* Sanfter Ring, kein Hüpfen. Alle Bewegungen am Start enden nach höchstens 5 Sekunden (WCAG 2.2.2, Prüfung 07.11.2026) */
.btn-weiss::before { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: knopfRing 2.5s ease-out 1.5s 1; pointer-events: none; }
/* Stärker pulsieren (Mark, 28.10.2026): hellerer, weiterer Ring, dazu ein leichtes Leuchten */
@keyframes knopfRing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75), 0 0 24px 4px rgba(255,255,255,.25); } 55%, 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0), 0 0 24px 4px rgba(255,255,255,0); } }
.intro .trust { color: rgba(255,255,255,.8); }
/* Weniger runde Elemente (Mark, 28.10.2026): feine Striche statt Punkte, Zahl und Ausblick als leise Textzeile unter dem Knopf */
.intro .trust span::before { width: 1px; height: 10px; border-radius: 0; background: rgba(255,255,255,.35); }
.intro .trust span:first-child::before { display: none; }
.intro .trust .intro-fragen { display: inline-flex; align-items: center; gap: 6px; }
.intro .trust .intro-fragen::before { content: ""; width: 1px; height: 10px; background: rgba(255,255,255,.35); }
.intro-info { margin: 10px 0 0; text-align: center; font-size: var(--fs-xs); line-height: 1.4; color: rgba(255,255,255,.72); }
.intro-info span { display: block; }
.intro-info span[hidden] { display: none; }
.intro :focus-visible { outline-color: #FFFFFF; }
@media (max-height: 700px) { .intro-karte { height: 26%; opacity: .75; } .intro-titel h1 { font-size: var(--fs-4xl); } .intro-vorteile li { padding: 12px 14px; } }
@media (max-height: 620px) { .intro-karte { display: none; } .intro-titel h1 { font-size: var(--fs-3xl); } .intro-unter { margin-top: 6px; font-size: var(--fs-m); } .intro-vorteile { margin-top: 14px; gap: 8px; } .intro-vorteile li { padding: 10px 14px; } .intro-s { display: none; } }
@media (prefers-reduced-motion: reduce) { .intro .intro-fleck { animation: none; } .netz circle.ring, .btn-weiss::before { display: none; } }

.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 30px; height: 30px; flex: 0 0 auto; }
.brand-name { font-size: var(--fs-l); font-weight: 600; color: inherit; letter-spacing: -.01em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-slogan { font-size: var(--fs-xs); color: inherit; opacity: .8; }
@media (max-width: 359px) { .brand-name, .brand-slogan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.intro-recht { margin-top: 2px; text-align: center; font-size: var(--fs-xs); color: rgba(255,255,255,.72); }
.intro-recht a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.intro-fragen { color: rgba(255,255,255,.8); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; padding: 0 2px; }
.faq { border-bottom: 1px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: var(--fs-l); font-weight: 600; color: var(--color-ink); display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-quiet); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq p { padding-bottom: 14px; }
.em-preis { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg); }
.em-preis .btn-quiet { margin: 4px 0 0 -10px; min-height: 36px; }

/* ---------- Suche ---------- */
.search-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; padding: calc(32px + var(--safe-top)) var(--g) 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.search-top > * { pointer-events: auto; }
.greet { flex: 1; min-width: 0; font-size: var(--fs-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--color-ink); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.greet:has(.g-name) { display: block; }
.greet .g-hi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.greet .g-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-toggle { position: absolute; right: var(--g, 24px); z-index: 6; bottom: calc((100% - 96px - var(--safe-top)) * .8 + 14px); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: var(--sh-pill); font-size: var(--fs-s); font-weight: 600; color: var(--color-ink); transition: bottom .45s var(--ease); }
.map-toggle svg { width: 18px; height: 18px; }
.app.map-open .map-toggle { bottom: calc((100% - 96px - var(--safe-top)) * .26 + 14px); }
.trial-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: var(--sh-pill); font-size: var(--fs-s); font-weight: 500; color: var(--color-ink); }
.trial-chip svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.trial-chip .tc-bg { fill: none; stroke: var(--color-surface); stroke-width: 3; }
/* Schmal (bis 400 Pixel): Kurzform „Noch 23 Tage“ bzw. „Letzter Tag“ statt nur „23 Tage“ */
.trial-chip .tc-s { display: none; }
@media (max-width: 400px) { .trial-chip .tc-s { display: inline; } .trial-chip .tc-l { display: none; } }
.trial-chip .tc-fg { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.rsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(100% - 96px - var(--safe-top)); background: var(--color-paper); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--sh-sheet); display: flex; flex-direction: column; transition: transform .45s var(--ease); will-change: transform; }
.rsheet.dragging { transition: none; }
.grab { flex: 0 0 auto; padding: 10px 0 6px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.grab span { width: 36px; height: 4px; border-radius: 4px; background: var(--color-tint); }
.rs-head { flex: 0 0 auto; padding: 8px var(--g) 0; touch-action: none; }
.sbar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px 0 18px; background: var(--color-paper); border-radius: var(--radius-pill); box-shadow: 0 0 0 1px var(--color-field-line), var(--sh-btn); }
.sbar:focus-within { outline: 2px solid transparent; }
.sbar svg.s-ico { width: 20px; height: 20px; color: var(--color-ink); flex: 0 0 auto; }
.sbar input { flex: 1; min-width: 0; border: none; background: transparent; font-size: var(--fs-base); font-weight: 500; color: var(--color-ink); height: 48px; font-variant-numeric: tabular-nums; }
.sbar:focus-within { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-btn); }
.sbar input.err { color: var(--color-error); }
.sbar:has(input.err) { box-shadow: 0 0 0 1.5px var(--color-error); }
.sbar .clear { width: 44px; height: 44px; border-radius: 100px; display: none; align-items: center; justify-content: center; color: var(--color-text); }
.sbar .clear.show { display: flex; }
.sbar .clear svg { width: 16px; height: 16px; }
.qchips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 8px; scrollbar-width: none; touch-action: pan-x; }
.qchips::-webkit-scrollbar { display: none; }
.qchips .chip { flex: 0 0 auto; min-height: 40px; font-size: var(--fs-s); padding: 0 14px; }
.rs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 var(--rs-pad, calc(100px + var(--safe-bottom))); overscroll-behavior: contain; scroll-padding-bottom: var(--rs-pad, calc(100px + var(--safe-bottom))); }
/* Zusammenfassung klein und mittig wie in der Vorlage */
.rs-summary { padding: 14px var(--g) 6px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px; text-align: center; animation: rise .4s var(--ease) both; font-size: var(--fs-s); color: var(--color-text); }
.rs-summary .n { font-size: var(--fs-s); font-weight: 600; color: var(--color-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.rs-summary .t { font-size: var(--fs-s); line-height: 1.4; color: var(--color-text); }
.rs-summary .t span { display: inline; }
.rs-summary .t span::before { content: " · "; }
.section-label { padding: var(--block) var(--g) 4px; font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); }
.empty { padding: var(--section) var(--g) var(--block); text-align: center; animation: rise .4s var(--ease) both; }
.empty .motif { width: 96px; height: 96px; margin: 0 auto 12px; }
.empty h2 { font-size: var(--fs-2xl); font-weight: 600; color: var(--color-ink); letter-spacing: -.01em; line-height: 1.3; }
.empty p { margin-top: 8px; font-size: var(--fs-m); line-height: 1.5; color: var(--color-text); }
.empty .btn { margin-top: 24px; }
.empty .e-more { margin-top: 12px; font-size: var(--fs-s); color: var(--color-text); }
/* Hinweis-Karten: eine Kartenart (weiß, Radius 24, weicher Schatten) */
.banner { margin: 14px var(--g) 4px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--sh-card); display: flex; gap: 14px; align-items: center; }
.banner .b-main { flex: 1; min-width: 0; }
.banner .b-t { font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); }
.banner .b-s { font-size: var(--fs-s); color: var(--color-text); margin-top: 3px; line-height: 1.4; }
@media (max-width: 414px) { .banner { flex-wrap: wrap; row-gap: 12px; } .banner .b-main { flex: 1 1 180px; } .banner .btn-sm { margin-left: auto; max-width: 100%; white-space: normal; text-align: center; } }

/* Zeilen für Kollegen: ruhige Zeilen, nur der Nächste hat einen Knopf */
.row { display: flex; align-items: center; gap: 14px; padding: 15px 0; margin: 0 var(--g); min-height: 72px; position: relative; cursor: pointer; animation: rise .4s var(--ease) both; background: var(--color-paper); border-bottom: 1px solid var(--color-line); transition: background var(--fast) var(--ease), transform .3s var(--ease); }
.row:last-child, .row:has(+ :not(.row)) { border-bottom: 0; }
.row:active { background: var(--color-bg); }
.r-main { flex: 1; min-width: 0; }
.r-name { font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub { font-size: var(--fs-s); color: var(--color-text); margin-top: 3px; overflow-wrap: break-word; }
.r-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--color-ink-secondary); }
.r-tag i { width: 6px; height: 6px; border-radius: 100px; background: var(--color-quiet); }
/* Musterbüros und Beta (Mark, 28.10.2026): leises Schild, kein Punkt */
.r-tag.beispiel, .beta { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--color-quiet); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--color-ink-secondary); }
.rf-top .r-tag.beispiel { margin-top: 0; align-self: flex-start; }
.beta[hidden] { display: none; }
.intro .beta { margin-left: 8px; border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); }
.greet-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.greet-zeile .beta { pointer-events: auto; background: rgba(255,255,255,.85); }
.r-dist { text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: var(--fs-s); color: var(--color-text); white-space: nowrap; }
.r-dist b { font-size: var(--fs-s); font-weight: 400; color: var(--color-text); }
.r-dist small { font-size: var(--fs-s); color: var(--color-text); margin-left: 3px; }
.row.dim .r-name { color: var(--color-text); }
.row-first { margin: 10px var(--g) 8px; padding: 16px; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--sh-card); display: block; position: relative; animation: rise .4s var(--ease) both; }
.row-first .rf-top { display: flex; align-items: flex-start; gap: 10px; }
.row-first .rf-flag { font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink); }
.row-first .r-name { font-size: var(--fs-base); font-weight: 600; margin-top: 4px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-first .btn { margin-top: 14px; min-height: 48px; }
.row-hit { position: absolute; inset: 0; z-index: 0; width: 100%; border-radius: inherit; background: transparent; cursor: pointer; }
.row-hit:focus-visible { outline-offset: -2px; }
.row > :not(.row-hit), .row-first > :not(.row-hit) { position: relative; z-index: 1; pointer-events: none; }
.row .btn, .row a, .row-first .btn, .row-first a { pointer-events: auto; }
.more-wrap { padding: 12px var(--g) 4px; }
.more-wrap .btn { width: 100%; }
.ort-sug { margin-top: 12px; }
.li.ort-sug { margin-top: 0; }

/* ---------- Untere Fenster: Radius 28 oben, weicher Schatten ---------- */
.layer { position: absolute; inset: 0; z-index: 50; display: none; }
.layer.open { display: block; }
.backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .3s var(--ease); }
.layer.shown .backdrop { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 44px - var(--safe-top)); background: var(--color-paper); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--sh-sheet); transform: translateY(100%); transition: transform .42s var(--ease); display: flex; flex-direction: column; }
.layer.shown .sheet { transform: translateY(0); }
.sheet.full { height: calc(100% - 44px - var(--safe-top)); }
.sheet.dragging { transition: none; }
.sheet-content { display: none; flex-direction: column; min-height: 0; flex: 1; }
.sheet-content.on { display: flex; }
.sh-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 4px var(--g); min-height: 56px; touch-action: none; gap: 8px; }
.sheet:focus { outline: none; }
.sh-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--color-ink); letter-spacing: -.01em; }
.sh-close { width: 44px; height: 44px; border-radius: 100px; display: flex; align-items: center; justify-content: center; color: var(--color-ink); flex: 0 0 auto; }
.sh-close span { width: 34px; height: 34px; border-radius: 100px; background: var(--color-paper); box-shadow: var(--sh-btn); display: flex; align-items: center; justify-content: center; }
.sh-close svg { width: 16px; height: 16px; }
.sh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--g) 20px; overscroll-behavior: contain; }
.sh-actions { flex: 0 0 auto; padding: 14px var(--g) calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--color-line); }
.sh-actions.duo { flex-direction: row; }
.sh-actions.duo .btn-secondary { flex: 1 1 0; }
.sh-actions.duo .btn-primary { flex: 1.5 1 0; }
.actionsheet { padding: 8px 12px calc(12px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 8px; }
.as-group { background: var(--color-paper); border-radius: var(--radius-lg); overflow: hidden; text-align: center; }
.as-group .as-t { padding: 16px 20px 12px; font-size: var(--fs-s); color: var(--color-text); line-height: 1.45; }
.as-group button { width: 100%; min-height: 56px; font-size: var(--fs-base); border-top: 1px solid var(--color-line); color: var(--color-ink); }
.as-group button.red { color: var(--color-error); font-weight: 600; }
.as-cancel { background: var(--color-paper); border-radius: var(--radius-lg); min-height: 56px; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }

/* Details eines Kollegen: Titel mittig, Geprüft-Zeile, ruhige Liste, Fußleiste E-Mail + Anrufen */
.d-name { font-size: var(--fs-3xl); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; color: var(--color-ink); overflow-wrap: anywhere; hyphens: auto; text-align: center; text-wrap: balance; }
.d-sub { margin-top: 6px; font-size: var(--fs-m); color: var(--color-text); text-align: center; }
.d-ver { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); display: flex; align-items: center; gap: 12px; }
.d-ver > svg { width: 28px; height: 28px; color: var(--acc); }
.d-ver .n, .d-off .n { font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); }
.d-ver .s, .d-off .s { font-size: var(--fs-s); color: var(--color-text); margin-top: 2px; line-height: 1.4; }
.d-off { padding: 14px 0; border-bottom: 1px solid var(--color-line); display: flex; align-items: center; gap: 12px; }
.d-off > svg { width: 24px; height: 24px; color: var(--color-text); margin: 0 2px; }
.dlist .li:last-child { border-bottom: 0; }
.dlist a.li .li-main { text-decoration: none; }
.dlist a.li .li-main > span:first-child { text-decoration: underline; text-decoration-color: var(--color-line2); text-underline-offset: 3px; }
.d-sec { margin: 28px 0 0; font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.qlist { list-style: none; }
.qlist li { position: relative; padding: 14px 0; font-size: var(--fs-l); font-weight: 500; line-height: 1.45; color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.qlist li:last-child { border-bottom: 0; }

/* ---------- Onboarding ---------- */
.progress { display: flex; gap: 6px; padding: 0 var(--g); }
.progress i { flex: 1; height: 3px; border-radius: 100px; background: var(--color-surface); overflow: hidden; position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--base) var(--ease); }
.progress i.done::after { transform: scaleX(1); }
.step { display: none; }
.step.on { display: block; animation: rise .4s var(--ease) both; }
.preview { margin-top: var(--section); }
.preview .pv-l { font-size: var(--fs-s); font-weight: 500; color: var(--color-text); margin-bottom: 8px; }
.preview .pv-card { border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--sh-card); overflow: hidden; padding: 0 18px; }
.preview .row { animation: none; cursor: default; margin: 0; border-bottom: 0; }
.preview .r-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.consent { display: flex; flex-direction: column; gap: 6px; }
.consent .check { margin-top: 0; font-size: var(--fs-s); line-height: 1.45; }
.code-in { width: 100%; height: 68px; text-align: center; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: .5em; padding-left: .5em; color: var(--color-ink); background: var(--color-paper); border: 0; border-radius: var(--radius-md); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--color-field-line), var(--sh-btn); }
.code-in:focus { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-btn); }
.code-in.err { box-shadow: 0 0 0 1.5px var(--color-error); background: var(--color-error-wash); }

/* Status-Screens */
.hero-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.hero-ico svg { width: 26px; height: 26px; color: var(--color-ink); }
.hero-top { padding-top: calc(56px + var(--safe-top)); }
.hero-ico .checkdraw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s .15s var(--ease) forwards; }
.timeline { margin-top: var(--block); }
.tl { display: flex; gap: 14px; padding: 12px 0; position: relative; }
.tl:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 42px; bottom: -4px; width: 1.5px; background: var(--color-line2); }
.tl .dot { width: 28px; height: 28px; border-radius: 100px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.tl .dot svg { width: 14px; height: 14px; }
.tl .dot.done { background: var(--color-ink); color: #FFFFFF; }
.tl .dot.run { background: var(--color-paper); border: 1.5px solid var(--color-line2); }
.tl .dot.run::after { content: ""; position: absolute; inset: -1.5px; border-radius: 100px; border: 1.5px solid transparent; border-top-color: var(--color-ink); animation: spin 1s linear 4; }
.tl .tl-t { font-size: var(--fs-l); color: var(--color-ink); font-weight: 500; padding-top: 3px; }
.tl .tl-s { font-size: var(--fs-s); color: var(--color-text); margin-top: 2px; line-height: 1.45; }
.stat { margin-top: var(--block); padding: 20px; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--sh-card); }
.stat .s-n { font-size: var(--fs-5xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.stat .s-n b { font-weight: 600; }
.stat .s-t { margin-top: 8px; font-size: var(--fs-m); color: var(--color-text); line-height: 1.5; overflow-wrap: break-word; }
.stat .s-t.reason { margin-top: 0; color: var(--color-ink); font-size: var(--fs-xl); }

/* Preise */
.picker { display: flex; flex-direction: column; gap: 12px; }
.tier { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-line2); transition: box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); }
.tier.on { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-card); }
/* Premium hervorgehoben (Mark, 23.10.2026): angehoben und mit Hinweis, ohne Ziegelrot (nur für Hauptaktion und Zustand) */
.tier.premium { background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-line2), var(--sh-card); }
.tier.premium.on { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-card); }
.tier-badge { display: table; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-ink); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 600; }
.tier-radio { margin-top: 1px; width: 22px; height: 22px; border-radius: 100px; border: 1.5px solid var(--color-field-line); flex: 0 0 auto; position: relative; background: var(--color-paper); }
.tier.on .tier-radio { border-color: var(--color-ink); }
.tier.on .tier-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 100px; background: var(--color-ink); }
.tier-main { flex: 1; min-width: 0; }
.tier-name { display: block; font-size: var(--fs-l); font-weight: 600; color: var(--color-ink); overflow-wrap: break-word; }
.tier-sub { display: block; font-size: var(--fs-s); color: var(--color-text); margin-top: 2px; }
.tier-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tier-price { text-align: right; flex: 0 0 auto; }
.tier-price b { display: block; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier-price small { display: block; font-size: var(--fs-xs); color: var(--color-ink); }
.offer { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-ink); }
.offer .o-t { font-size: var(--fs-base); font-weight: 400; letter-spacing: -.005em; line-height: 1.4; color: var(--color-ink); }
.offer .o-t b { font-weight: 600; color: var(--color-ink); }
.offer .o-s { margin-top: 6px; font-size: var(--fs-s); color: #5E5E5E; line-height: 1.45; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-m); color: var(--color-ink); line-height: 1.45; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.ticks li:last-child { border-bottom: 0; }
.ticks svg { width: 20px; height: 20px; color: var(--color-ink); flex: 0 0 auto; }
.tiers { display: flex; flex-direction: column; gap: 12px; }
/* Entscheidung D1 c: Preise und Fristen dunkel, nicht grau */
.due, .banner .b-s.due, .li .li-sub.due, #meMemberVal, #meConfirmNext { color: var(--color-ink); }

/* Sonstiges */
.toast { position: absolute; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; background: var(--color-ink); color: var(--color-paper); font-size: var(--fs-m); font-weight: 500; padding: 12px 8px 12px 18px; border-radius: var(--radius-md); box-shadow: var(--sh-card); display: flex; gap: 12px; align-items: center; width: max-content; max-width: calc(100% - 2 * var(--g)); line-height: 1.35; transition: opacity var(--fast) var(--ease), transform var(--base) var(--ease); }
/* Tipps gehen außer auf „Schließen“ durch die Kurzmeldung hindurch */
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .t-zu { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 12px; min-height: 44px; font-size: var(--fs-m); flex: 0 0 auto; }
.toast.show .t-zu { pointer-events: auto; }
/* Ausgeblendet ist „Schließen“ nicht mehr erreichbar; Fokusrahmen weiß auf der dunklen Kurzmeldung */
.toast:not(.show) .t-zu { visibility: hidden; }
.toast :focus-visible { outline-color: #FFFFFF; }
.toast:has(.t-zu[hidden]) { padding-right: 18px; }
.guide { margin-top: 24px; display: flex; flex-direction: column; gap: 0; }
.g-step { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.g-step:last-child { border-bottom: 0; }
.g-n { width: 28px; height: 28px; border-radius: 100px; background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-s); font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.g-t { font-size: var(--fs-l); color: var(--color-ink); line-height: 1.45; }
.g-t .kbd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; background: var(--color-surface); font-weight: 500; font-size: var(--fs-m); }
.g-t .kbd svg { width: 16px; height: 16px; }
.msg { margin-top: 20px; padding: 18px; border-radius: var(--radius-lg); background: var(--color-bg); font-size: var(--fs-m); line-height: 1.55; color: var(--color-ink-secondary); white-space: pre-line; }
.spacer { height: var(--block); }

/* Profil: Seitentitel, Kopfzeile mit Geprüft, Hinweis-Karte mit Foto */
.me-id.pad { display: flex; align-items: flex-start; gap: 12px; margin: 18px var(--g) 0; padding: 0 0 18px; border-bottom: 1px solid var(--color-line); }
.me-id > div { flex: 1; min-width: 0; }
.me-id .vcheck { align-self: flex-start; margin-top: 4px; }
.me-firma { font-size: var(--fs-xl); font-weight: 500; color: var(--color-ink); line-height: 1.35; overflow-wrap: break-word; }
.me-sub { font-size: var(--fs-s); color: var(--color-text); margin-top: 3px; }
#meTrial .banner { display: block; padding: 0; overflow: hidden; margin: 18px var(--g) 0 !important; }
#meTrial .banner .b-main { padding: 16px 18px 0; }
#meTrial .banner .b-t { font-size: var(--fs-xl); }
#meTrial .banner .btn { display: flex; width: calc(100% - 36px); margin: 14px 18px 18px; min-height: 48px; background: var(--grad); color: #FFFFFF; font-size: var(--fs-base); font-weight: 600; box-shadow: var(--sh-primary); }

/* ===== Abstände ===== */
.display + .body, .display + p { margin-top: 12px !important; }
@media (min-width: 768px) and (min-height: 908px) and (hover: hover) and (pointer: fine) { .search-top { padding-top: 40px; } .navbar { padding-top: 8px; height: 68px; } }

/* ===== Zustände: Warnhinweis, gesperrte Felder, Fehlerbox im Bearbeiten ===== */
.banner.warn .b-t { color: var(--color-error); }
.input:disabled { opacity: .6; }
.ed-err { position: sticky; top: 0; z-index: 2; background: var(--color-page); }
.ed-err .error { background: var(--color-error-bg); margin: 8px 0 0; }
.ed-err:has(.error:not(.show)) { position: static; }
/* Bearbeiten: Speichern ist die Hauptaktion des Screens */
#edSave { text-decoration: none; height: 36px; min-width: 0; padding: 0 16px; background: var(--grad); color: #FFFFFF; font-weight: 600; box-shadow: var(--sh-primary); }

/* ===== Kleine Höhen (zum Beispiel 320 × 568) ===== */
@media (max-height: 700px) {
  .actions { gap: 8px; padding-top: 12px; padding-bottom: calc(16px + var(--safe-bottom)); }
  .hero-top { padding-top: calc(32px + var(--safe-top)); }
  .empty { padding-top: 16px; }
  .empty .motif { display: none; }
}
@media (max-height: 620px) {
  .actions { gap: 4px; }
  .actions .btn-quiet { min-height: 36px; }
  .empty h2 { font-size: var(--fs-xl); }
  .empty .btn { margin-top: 16px; }
  .search-top { padding-top: calc(16px + var(--safe-top)); }
  .rsheet { height: calc(100% - 64px - var(--safe-top)); }
  .qchips { padding: 8px 0 4px; }
  .rs-summary { padding: 10px var(--g) 4px; }
  .row-first { padding: 14px; }
  .row-first .btn { margin-top: 12px; }
  .banner { padding: 12px 16px; margin-top: 12px; }
  .stat { margin-top: 20px; padding: 18px; }
  .timeline { margin-top: 20px; }
  .tl { padding: 8px 0; }
}

/* ===== Vergrößerte Grundschrift (z. B. Android-Textgröße): Klasse big-text setzt das Skript ===== */
.big-text .navbar { height: auto; min-height: calc(52px + var(--safe-top)); grid-template-columns: auto 1fr auto; }
.big-text .navbar .nb-title { display: none; }
.big-text [data-s="edit"] .navbar .nb-title { display: block; grid-row: 2; grid-column: 1 / -1; padding-bottom: 8px; white-space: normal; order: 3; flex: 1 1 100%; text-align: left; }
.big-text .nb-btn.text { padding: 0 4px; }
.big-text #edSave { height: auto; min-height: 36px; padding: 4px 12px; }
.big-text .r-name, .big-text .r-sub { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.big-text .row-first .rf-top, .big-text .row { flex-wrap: wrap; }
.big-text .row-first .r-main, .big-text .row .r-main { flex: 1 1 calc(100% - 72px); min-width: 0; }
.big-text .seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); }
.big-text .seg button { border-radius: var(--radius-md); }
.big-text .preview .r-sub .muted { white-space: normal; }
.big-text .sh-actions.duo { flex-direction: column; }
.big-text .me-id { flex-wrap: wrap; }
/* Werte unter die Beschriftung, Preis unter den Stufennamen, Knopfpaare untereinander,
   Marke und „Anmelden“ zweizeilig, Kopfleiste im Bearbeiten mit „Speichern“ in eigener Zeile, wenn beide nicht nebeneinander passen */
.big-text .li .li-main, .big-text .li .li-sub, .big-text .check > span, .big-text .me-firma, .big-text .ep-sub, .big-text .stat .s-t, .big-text .tier-name, .big-text .note { hyphens: auto; }
/* Suche: Begrüßung über die ganze Breite, Countdown darunter, wenn beide nicht nebeneinander passen */
.big-text .search-top { flex-wrap: wrap; }
.big-text .greet { flex: 1 1 auto; overflow-wrap: break-word; hyphens: auto; }
.big-text .li:has(> .li-val) { flex-wrap: wrap; row-gap: 2px; }
.big-text .li:has(> .li-val) > .li-main { flex-basis: auto; }
.big-text .li .li-val { max-width: 100%; margin-left: auto; }
/* Überschriften: lange Wörter umbrechen statt über den Rand zu ragen (bei 320 Pixeln „Mitgliedschaft“) */
.big-text .display, .big-text .ltitle, .big-text .sh-title, .big-text .group-title, .big-text .section-label, .big-text .pr-h, .big-text .d-sec, .big-text .empty h2 { overflow-wrap: break-word; hyphens: auto; }
.big-text .sh-title { min-width: 0; }
.big-text .btn-pair { grid-template-columns: 1fr; }
.big-text .tier-kopf { flex-wrap: wrap; row-gap: 4px; }
.big-text .tier-price { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; text-align: left; }
.big-text [data-s="edit"] .navbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
.big-text [data-s="edit"] .navbar #edSave { margin-left: auto; }
/* ===== 200 % Zoom: Suche als einfache Liste ===== */
@media (max-height: 500px), (max-width: 260px) {
  :root { --g: 16px; }
  .display { font-size: var(--fs-2xl); }
  .display, .greet, .li, .d-name, .check > span, .me-firma, .ep-sub, .stat .s-t, .tier-name { overflow-wrap: break-word; hyphens: auto; }
  .tier-kopf { flex-wrap: wrap; }
  .navbar .nb-title { display: none; }
  .navbar { height: auto; min-height: calc(52px + var(--safe-top)); grid-template-columns: auto 1fr auto; }
  .nb-btn.text { font-size: var(--fs-s); padding: 0 4px; }
  .tier-sub { overflow-wrap: break-word; hyphens: auto; }
  /* „Abbrechen“ und „Speichern“ überlappen nicht, „Speichern“ rückt bei Bedarf in eine eigene Zeile */
  [data-s="edit"] .navbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
  [data-s="edit"] .navbar #edSave { margin-left: auto; }
  [data-s="edit"] .navbar .nb-title { display: block; grid-row: 2; grid-column: 1 / -1; padding-bottom: 8px; order: 3; flex: 1 1 100%; }
  .li:has(> .li-val) { flex-wrap: wrap; row-gap: 2px; }
  .li:has(> .li-val) > .li-main { flex-basis: auto; }
  .li .li-val { max-width: 100%; margin-left: auto; }
  /* Fußleisten bleiben am unteren Rand sichtbar, wenn das ganze Fenster bzw. der Start scrollt */
  .sh-actions { position: sticky; bottom: 0; z-index: 2; background: var(--color-paper); padding-top: 10px; padding-bottom: calc(12px + var(--safe-bottom)); }
  .r-name { overflow-wrap: break-word; hyphens: auto; }
  .row-first .rf-top, .row { flex-wrap: wrap; }
  .row-first .r-main, .row .r-main { flex: 1 1 110px; }
  .tabview[data-tab="search"] { overflow-y: auto; scroll-padding-bottom: calc(var(--tabbar-h) + 16px + var(--safe-bottom)); }
  .tabview[data-tab="search"] .map, .map-toggle, .rsheet .grab { display: none; }
  .search-top { position: static; padding: calc(16px + var(--safe-top)) var(--g) 8px; flex-wrap: wrap; }
  .rsheet { position: static; height: auto; transform: none !important; border-radius: 0; box-shadow: none; background: transparent; }
  .rs-body { overflow: visible; flex: none; padding-bottom: calc(var(--tabbar-h) + 24px) !important; }
  .r-name, .r-sub { white-space: normal; }
  .sheet { overflow-y: auto; }
  .sheet-content.on, .sh-body { flex: none; min-height: auto; overflow: visible; }
  .sh-actions.duo { flex-direction: column; }
}
/* Telefon quer: „E-Mail“ und „Anrufen“ nebeneinander, damit die mitlaufende Fußleiste flach bleibt */
@media (max-height: 500px) and (min-width: 400px) { .sh-actions.duo { flex-direction: row; } }

/* ===== Niedrige Bildschirme (Telefone quer, z. B. Galaxy Z Fold 882 × 344): Überschriften und Tab-Leiste kompakter ===== */
@media (max-height: 500px) {
  .tabview .scroll[data-collapse] { padding-top: calc(44px + var(--safe-top)) !important; }
  .ltitle { font-size: var(--fs-3xl) !important; padding-top: 0; }
  .lsub { padding-top: 4px; font-size: var(--fs-s); }
  .tabview[data-tab="me"] .pad { margin-top: 8px !important; }
  .tabview .group-title { margin-top: 20px; }
  .greet { font-size: var(--fs-2xl); }
  .search-top { padding-top: calc(8px + var(--safe-top)); }
  .tabbar { padding-top: 4px; padding-bottom: calc(4px + var(--safe-bottom)); }
  .tab { min-height: 48px; gap: 2px; }
  .tab .pill { height: 26px; }
}
/* ===== Eigener Eintrag, Hinweise, Qualifikationen ===== */
.ps-res { margin-top: 8px; }
.self-pv .pv-card { position: relative; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--sh-card); overflow: hidden; }
.self-pv .row { animation: none; margin: 0; padding-left: 18px; padding-right: 18px; border-bottom: 0; }
.self-pv .r-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--color-bg); font-size: var(--fs-m); line-height: 1.5; color: var(--color-ink-secondary); overflow-wrap: break-word; }
.note b { color: var(--color-ink); font-weight: 600; }
.li.hint-li { font-size: var(--fs-s); font-weight: 400; color: var(--color-text); line-height: 1.45; display: block; }
.qbtn { font: inherit; color: inherit; text-align: left; text-decoration: underline dotted; text-decoration-color: var(--color-quiet); text-underline-offset: 3px; cursor: pointer; }
.qlist li .q-full[hidden] { display: none; }
.qlist li .q-full { display: block; font-size: var(--fs-s); font-weight: 400; color: var(--color-text); margin-top: 2px; }
.qtip { margin-top: 12px; }
.r-tag.until { white-space: normal; }
input[type=date].input { padding-right: 12px; }
/* Tippfläche des Qualifikationsknopfs über die ganze Zeile */
.qbtn::after { content: ""; position: absolute; inset: 0; }
/* Bei großer Schrift oder sehr wenig Höhe stehen die Zustimmungen im Scrollbereich (app.js, placeConsent) */
.step .consent { margin-top: 24px; }

/* ===== Ergänzungen v1 (B4): Klassen statt style-Attributen ===== */
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb10 { margin-bottom: 10px; }
.group.flat { margin: 20px 0 0; } .group.flat16 { margin: 16px 0 0; } .group.flat24 { margin: 24px 0 0; } .group.flat32 { margin: 32px 0 0; }
.row2.even { grid-template-columns: 1fr 1fr; }
.step h1 { margin-top: 32px; }
.em-ink { color: var(--color-ink); font-weight: 600; }
.chip-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.li.block { display: block; }
.navbar .nb-title.shown { opacity: 1; }
.sheet.bare { background: transparent; box-shadow: none; }
.sheet.bare > .grab { display: none; }
.summary-k { font-size: var(--fs-s); font-weight: 400; color: var(--color-text-muted); }
.summary-k .li-sub { font-size: var(--fs-l); font-weight: 500; color: var(--color-ink); }
.qtip { list-style: none; flex-basis: 100%; }
.qtip b { color: var(--color-ink); font-weight: 600; }
.pin.still { cursor: default; }
.d-hint { margin-top: 4px; }
.kbd svg.i { width: 16px; height: 16px; }
/* Stufen (Preisseite, Willkommen) und Anzeige der gewählten Stufe */
.tier.info { cursor: default; align-items: flex-start; }
.tier-punkte { display: block; margin-top: 8px; }
.tier-punkt { display: block; position: relative; padding-left: 18px; font-size: var(--fs-s); color: var(--color-ink); line-height: 1.4; margin-top: 3px; }
.tier-punkt::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 8px; height: 4px; border-left: 1.5px solid var(--color-ink); border-bottom: 1.5px solid var(--color-ink); transform: rotate(-45deg); }
.tier-spar { display: block; margin-top: 10px; font-size: var(--fs-s); font-weight: 600; color: var(--color-ink); line-height: 1.4; }
.tier-quelle { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--color-text); line-height: 1.4; }
.pr-h { margin-top: 32px; font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); letter-spacing: -.005em; line-height: 1.35; }
.pr-p { margin-top: 8px; font-size: var(--fs-l); }
.ep-total { margin: 16px 0 0; }
.ep-total .li { min-height: 48px; padding: 12px 0; }
.ep-total .li-val { color: var(--color-ink); font-weight: 500; }
/* Hinweis-Karte im Profil ohne Foto */
#meTrial .banner .b-main { padding-bottom: 0; }
.rem-probe { position: absolute; visibility: hidden; width: 1rem; height: 0; pointer-events: none; }

/* Frage „Hilf uns, die App zu verbessern“ (Nutzungsdaten): Text oben, Ja und Nein darunter rechts */
.banner.frage { flex-wrap: wrap; row-gap: 12px; }
.banner.frage .b-main { flex: 1 1 100%; }
.banner .b-knoepfe { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 414px) { .banner .b-knoepfe .btn-sm { margin-left: 0; } }

/* ---------- Rechtstexte als eigene Seiten (web/recht/, erzeugt von werkzeuge/rechtstexte.mjs) ---------- */
.recht-text { max-width: 720px; margin: 0 auto; padding: calc(28px + var(--safe-top)) var(--g) 64px; font-size: var(--fs-l); line-height: 1.6; color: var(--color-ink-secondary); }
.recht-text h1 { font-size: var(--fs-4xl); font-weight: 650; line-height: 1.2; color: var(--color-ink); margin: 16px 0 20px; }
.recht-text h2 { font-size: var(--fs-xl); font-weight: 600; color: var(--color-ink); margin: 28px 0 8px; }
.recht-text p, .recht-text ol, .recht-text ul, .recht-text table { margin: 0 0 12px; }
.recht-text ol, .recht-text ul { padding-left: 22px; }
.recht-text li { margin-bottom: 6px; }
.recht-text table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); display: block; overflow-x: auto; }
.recht-text th, .recht-text td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--color-line); }
.recht-text a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.recht-text b { color: var(--color-ink); font-weight: 600; }
.recht-zurueck, .recht-fuss { font-size: var(--fs-s); }
.recht-fuss { margin-top: 32px !important; padding-top: 16px; border-top: 1px solid var(--color-line); }