/* 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;
  --color-error: #B52B27; --color-error-wash: rgba(181,43,39,.06); --color-error-bg: #FBEFEE;
  --color-field-line: #949494;
  --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: 1rem; 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; }
input:focus, textarea:focus { outline: none; }
: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 */
@media (min-width: 768px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  /* Gerätevorschau: immer exakt iPhone-Größe 390 × 844, bei kleinem Fenster als Ganzes verkleinert (--frame-s setzt das Skript) */
  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); transform: scale(var(--frame-s, 1)); transform-origin: top center; }
}
.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: 0.9375rem; 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: 0.875rem; 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: 0.875rem; } }
.ltitle { font-size: 1.75rem; 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: 0.875rem; line-height: 1.5; color: var(--color-text); }

/* ---------- Typo ---------- */
.display { font-size: 1.375rem; 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: 0.875rem; line-height: 1.55; color: var(--color-text); }
.small { font-size: 0.8125rem; line-height: 1.45; color: var(--color-text); }
.label { display: block; font-size: 0.8125rem; 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: 0.9375rem; 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:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-primary { background: var(--grad); color: #FFFFFF; font-size: 1rem; 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: 0.875rem; 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: 0.75rem; 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: 0.875rem; } }
@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: 0.875rem; padding: 0 16px; white-space: nowrap; flex: 0 0 auto; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 0.75rem; 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: 0.75rem; 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: 1rem; 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-line2), 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: 0.8125rem; 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: 0.875rem; 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: 0.875rem; 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: 0.875rem; 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: 0.8125rem; 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: 0.875rem; 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:active { transform: scale(.97); }

/* ---------- 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: 1.0625rem; 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: 0.9375rem; 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); }
.li .li-main { flex: 1 1 0; min-width: min-content; overflow-wrap: break-word; }
.li .li-sub { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-text); margin-top: 3px; line-height: 1.4; overflow-wrap: break-word; }
.li .li-val { font-size: 0.875rem; 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: 1rem; color: var(--color-ink); text-align: right; }
.li label.li-label { flex: 0 0 auto; font-size: 0.9375rem; color: var(--color-ink); }
.li.fld { flex-direction: column; align-items: stretch; gap: 2px; cursor: text; padding: 12px 0; }
.li.fld .li-label { font-size: 0.75rem; 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: 0.625rem; 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-dot { transform-box: fill-box; transform-origin: center; animation: dotIn .5s var(--ease) both; }
.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) infinite; }

/* ---------- Startscreen: Foto oben, weißes Blatt, ein Ziel ---------- */
.start-map { position: relative; height: 38%; min-height: 240px; flex: 0 0 auto; }
.start-map .map { position: absolute; inset: 0; }
.start-map .map .fade-top { display: none; }
/* TODO Bild selbst ausliefern: Platzhalter-Verlauf statt Foto (kein Abruf bei Unsplash) */
.start-photo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.62) 0, rgba(0,0,0,.6) 96px, rgba(0,0,0,0) calc(96px + 30%)), linear-gradient(160deg, #8A8A86 0%, #5E5E5A 55%, #3F3F3C 100%); transition: opacity .6s var(--ease); }
.start-map.probed .start-photo { opacity: 0; pointer-events: none; }
.start-brand { position: absolute; top: calc(20px + var(--safe-top)); left: var(--g); right: 16px; display: flex; gap: 8px; justify-content: space-between; align-items: center; z-index: 2; color: #FFFFFF; transition: color .4s var(--ease); }
.start-map.probed .start-brand { color: var(--color-ink); }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 30px; height: 30px; flex: 0 0 auto; }
.brand-name { font-size: 0.9375rem; font-weight: 600; color: inherit; letter-spacing: -.01em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-slogan { font-size: 0.75rem; color: inherit; opacity: .8; }
.start-brand .btn-quiet { color: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.start-brand .btn-quiet:hover { text-decoration: underline; }
@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; } }
.start-count { position: absolute; left: var(--g); bottom: 40px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: var(--sh-pill); font-size: 0.8125rem; font-weight: 500; color: var(--color-ink); }
.start-count b { font-weight: 600; }
.start-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 26px var(--g) 0; overflow-y: auto; margin-top: -24px; position: relative; z-index: 3; background: var(--color-paper); border-radius: 24px 24px 0 0; }
.probe { margin-top: 22px; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-line2), var(--sh-btn); }
.probe svg { width: 20px; height: 20px; color: var(--color-ink); flex: 0 0 auto; }
.probe input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 1rem; font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; height: 52px; }
.probe:focus-within { box-shadow: 0 0 0 1.5px var(--color-ink), var(--sh-btn); }
.probe-res { margin-top: 12px; min-height: 44px; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); animation: rise .4s var(--ease) both; }
.probe-res b { color: var(--color-ink); font-weight: 600; }
.probe-res svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--acc); }

/* ---------- 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: 1.375rem; 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: 0.8125rem; 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: 0.8125rem; 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-line2), var(--sh-btn); }
.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: 1rem; 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: 0.8125rem; 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: 0.8125rem; color: var(--color-text); }
.rs-summary .n { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.rs-summary .t { font-size: 0.8125rem; 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: 1.0625rem; 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: 1.125rem; font-weight: 600; color: var(--color-ink); letter-spacing: -.01em; line-height: 1.3; }
.empty p { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); }
.empty .btn { margin-top: 24px; }
.empty .e-more { margin-top: 12px; font-size: 0.8125rem; 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: 0.9375rem; font-weight: 500; color: var(--color-ink); }
.banner .b-s { font-size: 0.8125rem; 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: 0.9375rem; font-weight: 500; color: var(--color-ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub { font-size: 0.8125rem; 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: 0.75rem; font-weight: 500; color: var(--color-ink-secondary); }
.r-tag i { width: 6px; height: 6px; border-radius: 100px; background: var(--color-quiet); }
.r-dist { text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--color-text); white-space: nowrap; }
.r-dist b { font-size: 0.8125rem; font-weight: 400; color: var(--color-text); }
.r-dist small { font-size: 0.8125rem; 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: 0.75rem; font-weight: 600; color: var(--color-ink); }
.row-first .r-name { font-size: 1rem; 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: 1.125rem; 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: 0.8125rem; color: var(--color-text); line-height: 1.45; }
.as-group button { width: 100%; min-height: 56px; font-size: 1rem; 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: 1rem; 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: 1.375rem; 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: 0.875rem; 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: 0.9375rem; font-weight: 500; color: var(--color-ink); }
.d-ver .s, .d-off .s { font-size: 0.8125rem; 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: 1.0625rem; 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: 0.9375rem; 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: 0.8125rem; 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: 0.8125rem; line-height: 1.45; }
.code-in { width: 100%; height: 68px; text-align: center; font-size: 1.75rem; 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-line2), var(--sh-btn); }
.code-in::placeholder { font-size: 0.9375rem; font-weight: 400; letter-spacing: normal; }
.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 infinite; }
.tl .tl-t { font-size: 0.9375rem; color: var(--color-ink); font-weight: 500; padding-top: 3px; }
.tl .tl-s { font-size: 0.8125rem; 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: 2rem; 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: 0.875rem; 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: 1.0625rem; }

/* 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: 0.6875rem; 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: 0.9375rem; font-weight: 600; color: var(--color-ink); overflow-wrap: break-word; }
.tier-sub { display: block; font-size: 0.8125rem; 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: 1.125rem; 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: 0.75rem; 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: 1rem; 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: 0.8125rem; 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: 0.875rem; 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: 0.875rem; 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 „Rückgängig“ durch die Kurzmeldung hindurch */
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .t-undo { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 12px; min-height: 44px; font-size: 0.875rem; flex: 0 0 auto; }
.toast.show .t-undo { pointer-events: auto; }
/* Ausgeblendet ist „Rückgängig“ nicht mehr erreichbar; Fokusrahmen weiß auf der dunklen Kurzmeldung */
.toast:not(.show) .t-undo { visibility: hidden; }
.toast :focus-visible { outline-color: #FFFFFF; }
.toast .t-undo:empty { display: none; }
.toast:not(:has(.t-undo:not(:empty))) { 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: 0.8125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.g-t { font-size: 0.9375rem; 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: 0.875rem; }
.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: 0.875rem; 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: 1.0625rem; font-weight: 500; color: var(--color-ink); line-height: 1.35; overflow-wrap: break-word; }
.me-sub { font-size: 0.8125rem; 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: 1.0625rem; }
#meTrial .banner .btn { display: flex; width: calc(100% - 36px); margin: 14px 18px 18px; min-height: 48px; background: var(--grad); color: #FFFFFF; font-size: 1rem; 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: 600px) and (hover: hover) and (pointer: fine) { .search-top { padding-top: 40px; } .start-brand { top: 30px; } .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) {
  .start-map { height: 30%; min-height: 168px; }
  .start-count { bottom: 34px; }
  .start-body { padding-top: 22px; }
  .probe { margin-top: 16px; }
  .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) {
  .start-map { height: 25%; min-height: 136px; }
  .start-brand { top: calc(12px + var(--safe-top)); }
  .start-count { bottom: 32px; padding: 5px 12px; }
  .start-sub { display: none; }
  .probe { min-height: 50px; }
  .probe input { height: 46px; }
  .probe-res { margin-top: 10px; font-size: 0.8125rem; }
  .actions { gap: 4px; }
  .actions .btn-quiet { min-height: 36px; }
  .empty h2 { font-size: 1.0625rem; }
  .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; }
.big-text .start-brand { flex-wrap: wrap; }
.big-text .start-brand > .btn-quiet { margin-left: auto !important; }
/* Ü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: 1.25rem; }
  .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: 0.8125rem; 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)); }
  .screen[data-s="start"] > .actions { position: sticky; bottom: 0; z-index: 4; 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; }
  .start-count { max-width: calc(100% - 2 * var(--g)); }
  .screen[data-s="start"] { overflow-y: auto; }
  .start-brand { flex-wrap: wrap; }
  .screen[data-s="start"] .start-map { height: 150px; min-height: 150px; }
  .screen[data-s="start"] .start-body { flex: 0 0 auto; overflow: visible; }
  .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: 1.375rem !important; padding-top: 0; }
  .lsub { padding-top: 4px; font-size: 0.8125rem; }
  .tabview[data-tab="me"] .pad { margin-top: 8px !important; }
  .tabview .group-title { margin-top: 20px; }
  .greet { font-size: 1.25rem; }
  .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: 0.875rem; 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: 0.8125rem; 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: 0.8125rem; 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; }
/* Inhalte des Starts behalten ihre Höhe, der Bereich scrollt statt zu überlappen */
.start-body > * { flex-shrink: 0; }
/* 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; }
.start-login { min-height: 44px; padding: 0 8px; margin: 0; }
.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: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
.summary-k .li-sub { font-size: 0.9375rem; 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: 0.8125rem; 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: 0.8125rem; font-weight: 600; color: var(--color-ink); line-height: 1.4; }
.tier-quelle { display: block; margin-top: 8px; font-size: 0.75rem; color: var(--color-text); line-height: 1.4; }
.pr-h { margin-top: 32px; font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); letter-spacing: -.005em; line-height: 1.35; }
.pr-p { margin-top: 8px; font-size: 0.9375rem; }
.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; } }