/* Layout: App-Rahmen im CEOWerk-Stil – iPhone zuerst (Tabbar unten), ab 820 px Seitenleiste; Graphit-Band oben, Messing als einziger Akzent */
/* Immobilien 0.1 – Design im Stil von CEOWerk (Graphit, Messing als einziger Akzent, Systemschrift, Dunkelmodus) */
:root {
  --bg:#ECEEED; --card:#FFFFFF; --line:#C9D0D4; --line-soft:#DEE2E5;
  --ink:#172023; --ink2:#3F4A52; --ink3:#5F6A73;
  --graphite:#232B30; --graphite2:#34404A; --brass:#D2AE63; --brass-ink:#6E4F17; --brass-soft:#F4EAD2; --focus:#1F63B5;
  --good-fg:#1F5C3A; --good-bg:#DDEDE3; --warn-fg:#5A3E0C; --warn-bg:#F7ECD4; --bad-fg:#9E3426; --bad-bg:#F5E1DD;
  --info-fg:#1F63B5; --info-bg:#DCE7F5; --mut-fg:#3F4A52; --mut-bg:#E3E7E9;
  --band-bg:#232B30; --band-fg:#F3F5F6; --band-fg2:#C3CCD1; --band-line:#3A454D;
  --seg-track:#DEE2E5; --seg-on:#FFFFFF; --pri-bg:#232B30; --pri-fg:#FFFFFF; --chip-on-bg:#232B30; --chip-on-fg:#FFFFFF;
  --scrim:rgba(23,32,35,.45); --press:#EEF0F0;
  --chart-a:#34404A; --chart-b:#D2AE63; --chart-c:#1F5C3A; --chart-d:#9E3426;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#15191C; --card:#1F252A; --line:#3A454D; --line-soft:#2C353B; --ink:#F3F5F6; --ink2:#B7C1C7; --ink3:#9AA6AD;
  --brass-ink:#E0C27A; --brass-soft:#3C3221; --focus:#8FB5EC;
  --good-fg:#A9D8B9; --good-bg:#1F3328; --warn-fg:#F0D9A6; --warn-bg:#3C3221; --bad-fg:#F2B3A8; --bad-bg:#3B2522;
  --info-fg:#A8C6EE; --info-bg:#1E2C40; --mut-fg:#C3CCD1; --mut-bg:#2B343A;
  --band-bg:#1A2024; --band-fg2:#B7C1C7; --band-line:#2C353B; --seg-track:#2B343A; --seg-on:#3F4A52;
  --pri-bg:#D2AE63; --pri-fg:#232B30; --chip-on-bg:#D2AE63; --chip-on-fg:#232B30; --scrim:rgba(0,0,0,.6); --press:#2B343A;
  --chart-a:#8E9AA2; --chart-b:#D2AE63; --chart-c:#A9D8B9; --chart-d:#F2B3A8; color-scheme:dark; } }
:root[data-theme="dark"] {
  --bg:#15191C; --card:#1F252A; --line:#3A454D; --line-soft:#2C353B; --ink:#F3F5F6; --ink2:#B7C1C7; --ink3:#9AA6AD;
  --brass-ink:#E0C27A; --brass-soft:#3C3221; --focus:#8FB5EC;
  --good-fg:#A9D8B9; --good-bg:#1F3328; --warn-fg:#F0D9A6; --warn-bg:#3C3221; --bad-fg:#F2B3A8; --bad-bg:#3B2522;
  --info-fg:#A8C6EE; --info-bg:#1E2C40; --mut-fg:#C3CCD1; --mut-bg:#2B343A;
  --band-bg:#1A2024; --band-fg2:#B7C1C7; --band-line:#2C353B; --seg-track:#2B343A; --seg-on:#3F4A52;
  --pri-bg:#D2AE63; --pri-fg:#232B30; --chip-on-bg:#D2AE63; --chip-on-fg:#232B30; --scrim:rgba(0,0,0,.6); --press:#2B343A;
  --chart-a:#8E9AA2; --chart-b:#D2AE63; --chart-c:#A9D8B9; --chart-d:#F2B3A8; color-scheme:dark; }
* { box-sizing:border-box; }
html, body { height:100%; overflow-x:hidden; overflow-x:clip; overscroll-behavior:none; touch-action:manipulation; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.4 var(--font); -webkit-text-size-adjust:100%; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--band-bg); }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
.num { font-variant-numeric:tabular-nums; }

/* App */
.app { max-width:1180px; margin:0 auto; display:flex; min-height:100%; }
.side { display:none; }
.main { flex:1; min-width:0; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:8px 110px; }
.top { display:flex; align-items:flex-end; gap:12px; padding-block:14px 10px; }
.top h1 { font-size:clamp(26px, 8vw, 32px); line-height:1.1; margin:0; letter-spacing:-.01em; text-wrap:balance; flex:1; min-width:0; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }
.back { display:flex; align-items:center; gap:4px; color:var(--brass-ink); font-size:16px; min-height:44px; padding-right:8px; }
.plus { width:44px; height:44px; border-radius:22px; background:var(--pri-bg); color:var(--pri-fg); display:grid; place-items:center; flex:none; }
.plus svg { width:22px; height:22px; }
.sub { color:var(--ink3); font-size:15px; margin:-4px 0 12px; }
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--band-bg); border-top:1px solid var(--band-line); padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
.tabbar-in { display:flex; max-width:640px; margin:0 auto; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 6px; color:var(--band-fg2); font-size:11px; min-height:52px; }
.tab svg { width:24px; height:24px; }
.tab[aria-current="page"] { color:var(--brass); }
.tab[disabled] { opacity:.35; cursor:not-allowed; }

/* Bausteine */
.group { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:16px; }
.ghead { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); margin:18px 4px 6px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
.row { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:52px; border-top:1px solid var(--line-soft); width:100%; text-align:left; }
.row:first-child { border-top:0; }
button.row:active { background:var(--press); }
.row .t { flex:1; min-width:0; }
.row .t b { display:block; font-weight:600; font-size:16px; overflow-wrap:anywhere; }
.row .t span { display:block; font-size:14px; color:var(--ink3); overflow-wrap:anywhere; }
.row .v { text-align:right; font-variant-numeric:tabular-nums; font-size:15px; flex:none; }
.row .v small { display:block; color:var(--ink3); font-size:12px; }
.chev { width:14px; height:14px; color:var(--ink3); flex:none; }
.ic { width:36px; height:36px; border-radius:10px; background:var(--mut-bg); color:var(--ink2); display:grid; place-items:center; flex:none; }
.ic svg { width:20px; height:20px; }
.pill { display:inline-block; font-size:12px; font-weight:600; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.p-good { background:var(--good-bg); color:var(--good-fg); } .p-warn { background:var(--warn-bg); color:var(--warn-fg); }
.p-bad { background:var(--bad-bg); color:var(--bad-fg); } .p-info { background:var(--info-bg); color:var(--info-fg); } .p-mut { background:var(--mut-bg); color:var(--mut-fg); }
.p-brass { background:var(--brass-soft); color:var(--brass-ink); }
.kpis { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:6px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; min-width:0; text-align:left; }
.kpi .l { font-size:13px; color:var(--ink3); }
.kpi .n { white-space:nowrap; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; margin-top:2px; }
.kpi .s { font-size:13px; color:var(--ink2); margin-top:2px; }
.bar { height:8px; border-radius:4px; background:var(--mut-bg); overflow:hidden; margin-top:8px; }
.bar i { display:block; height:100%; background:var(--good-fg); }
.seg { display:flex; background:var(--seg-track); border-radius:10px; padding:3px; gap:2px; margin:4px 0 12px; overflow-x:auto; scrollbar-width:none; }
.seg button { flex:1 0 auto; padding:7px 12px; border-radius:8px; font-size:14px; color:var(--ink2); min-height:36px; white-space:nowrap; }
.seg button[aria-pressed="true"] { background:var(--seg-on); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(23,32,35,.16); }
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:10px; scrollbar-width:none; }
.chip { border:1px solid var(--line); background:var(--card); border-radius:18px; padding:6px 12px; font-size:14px; white-space:nowrap; min-height:36px; }
.chip[aria-pressed="true"] { background:var(--chip-on-bg); color:var(--chip-on-fg); border-color:var(--chip-on-bg); }
.chip .c { opacity:.75; margin-left:4px; font-variant-numeric:tabular-nums; }
.note { background:var(--brass-soft); color:var(--ink); border-radius:12px; padding:10px 12px; font-size:14px; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start; }
.note svg { width:18px; height:18px; flex:none; margin-top:2px; color:var(--brass-ink); }
.kv { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
.kv > div { padding:10px 14px; border-top:1px solid var(--line-soft); font-size:15px; min-width:0; overflow-wrap:anywhere; }
.kv > div:nth-child(-n+2) { border-top:0; }
.kv > div:nth-child(odd) { color:var(--ink3); }
.btns { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px; }
.btn { min-height:44px; padding:10px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; }
.btn.pri { background:var(--pri-bg); color:var(--pri-fg); border-color:var(--pri-bg); }
.btn svg { width:18px; height:18px; }
.chart { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 8px 6px; margin-bottom:12px; overflow-x:auto; }
.chart svg { display:block; width:100%; min-width:320px; height:auto; }
.chart svg text { fill:var(--ink3); font-size:11px; font-family:var(--font); }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink2); padding:4px 8px 6px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.msg { padding:10px 14px; border-top:1px solid var(--line-soft); }
.msg:first-child { border-top:0; }
.msg .h { font-size:13px; color:var(--ink3); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msg p { margin:4px 0 0; font-size:15px; }
.matrix { overflow-x:auto; }
.matrix table { border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
.matrix th, .matrix td { padding:9px 10px; border-top:1px solid var(--line-soft); text-align:left; }
.matrix thead th { border-top:0; color:var(--ink3); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.matrix td.c { text-align:center; }
.empty { text-align:center; padding:36px 16px; color:var(--ink2); }
.empty svg { width:44px; height:44px; color:var(--ink3); margin-bottom:6px; }
.empty b { display:block; color:var(--ink); font-size:18px; margin-bottom:4px; }
.lockline { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink3); margin:18px 4px; }
.lockline svg { width:16px; height:16px; flex:none; }
.fp { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px; letter-spacing:.04em; }

/* Blatt */
.scrim { position:fixed; inset:0; background:var(--scrim); z-index:40; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:41; background:var(--bg); border-radius:16px 16px 0 0; max-height:88%; overflow:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-width:640px; margin:0 auto; box-shadow:0 -8px 32px rgba(23,32,35,.22); }
.sheet-h { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; border-radius:16px 16px 0 0; }
.sheet-h b { font-size:17px; }
.sheet-h button { color:var(--brass-ink); min-height:44px; padding:0 4px; font-size:16px; }
.sheet-h button.done { font-weight:700; }
.sheet-b { padding:12px 16px; }
.field { display:block; margin-bottom:12px; }
.field span { display:block; font-size:13px; color:var(--ink3); margin:0 0 4px 4px; }
.field input, .field select, .field textarea { width:100%; font:inherit; font-size:16px; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.field textarea { min-height:90px; resize:vertical; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom,0px)); background:var(--graphite); color:#F3F5F6; padding:10px 16px; border-radius:12px; font-size:14px; z-index:50; max-width:calc(100% - 32px); box-shadow:0 8px 24px rgba(23,32,35,.3); }

@media (min-width:820px) {
  .tabbar { display:none; }
  .side { display:block; width:232px; flex:none; padding:18px 10px; border-right:1px solid var(--line); position:sticky; top:env(safe-area-inset-top,0px); align-self:flex-start; height:100vh; }
  .side button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:10px; color:var(--ink2); font-size:16px; min-height:44px; }
  .side button svg { width:20px; height:20px; }
  .side button[aria-current="page"] { background:var(--brass-soft); color:var(--ink); font-weight:600; }
  .side button[disabled] { opacity:.35; cursor:not-allowed; }
  .main { padding-left:28px; padding-right:max(28px, env(safe-area-inset-right,0px)); padding-bottom:40px; }
  .toast { bottom:24px; }
}
@media (min-width:1100px) {
  .kpis { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
}
@media (prefers-reduced-motion: no-preference) { .sheet { animation:up .22s ease-out; } @keyframes up { from { transform:translateY(30px); opacity:.6; } } }

/* Ergänzungen 0.2: Chronologie, Stepper, Fotos, Typenraster, Mietkonto */
.tl { position:relative; }
.tl-e { display:flex; gap:12px; padding:12px 14px; border-top:1px solid var(--line-soft); }
.tl-e:first-child { border-top:0; }
.tl-ic { width:34px; height:34px; border-radius:17px; display:grid; place-items:center; flex:none; background:var(--mut-bg); color:var(--ink2); }
.tl-ic svg { width:18px; height:18px; }
.tl-ic.k-mail { background:var(--info-bg); color:var(--info-fg); }
.tl-ic.k-wa { background:var(--good-bg); color:var(--good-fg); }
.tl-ic.k-brief { background:var(--brass-soft); color:var(--brass-ink); }
.tl-ic.k-abs { background:var(--graphite); color:#F3F5F6; }
.tl-ic.k-pay { background:var(--good-bg); color:var(--good-fg); }
.tl-ic.k-warn { background:var(--bad-bg); color:var(--bad-fg); }
.tl-b { flex:1; min-width:0; }
.tl-h { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:baseline; font-size:13px; color:var(--ink3); }
.tl-h b { color:var(--ink); font-size:15px; }
.tl-b p { margin:4px 0 0; font-size:15px; overflow-wrap:anywhere; }
.tl-meta { font-size:12px; color:var(--ink3); margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tl-meta svg { width:13px; height:13px; }
.thumbs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.thumb { width:76px; height:58px; border-radius:8px; background:linear-gradient(135deg, var(--mut-bg), var(--line)); display:grid; place-items:center; color:var(--ink2); font-size:11px; text-align:center; border:1px solid var(--line); }
.thumb svg { width:18px; height:18px; display:block; margin:0 auto 2px; }
.steps { display:flex; gap:4px; margin:4px 0 14px; overflow-x:auto; scrollbar-width:none; }
.step { flex:1 0 auto; min-width:74px; text-align:center; font-size:12px; color:var(--ink3); padding-top:8px; border-top:4px solid var(--line); }
.step.done { border-color:var(--good-fg); color:var(--ink2); }
.step.now { border-color:var(--brass); color:var(--ink); font-weight:700; }
.tgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.tgrid button { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; min-height:76px; }
.tgrid button[aria-pressed="true"] { border-color:var(--brass); background:var(--brass-soft); font-weight:600; }
.tgrid svg { width:22px; height:22px; }
.note.bad { background:var(--bad-bg); }
.note.bad svg { color:var(--bad-fg); }
.mk { overflow-x:auto; }
.mk table { border-collapse:collapse; width:100%; min-width:300px; font-size:14px; font-variant-numeric:tabular-nums; }
.mk th, .mk td { padding:9px 10px; border-top:1px solid var(--line-soft); text-align:right; white-space:nowrap; }
.mk th:first-child, .mk td:first-child { text-align:left; }
.mk thead th { border-top:0; color:var(--ink3); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.mk tfoot td { font-weight:700; border-top:2px solid var(--line); }
.neg { color:var(--bad-fg); }
.check { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-top:1px solid var(--line-soft); }
.check:first-child { border-top:0; }
.check i { width:22px; height:22px; border-radius:11px; border:2px solid var(--line); flex:none; display:grid; place-items:center; margin-top:1px; }
.check.ok i { background:var(--good-fg); border-color:var(--good-fg); }
.check.ok i::after { content:""; width:9px; height:5px; border-left:2px solid var(--card); border-bottom:2px solid var(--card); transform:rotate(-45deg) translate(1px,-1px); }
.check .t { flex:1; min-width:0; }
.check .t b { display:block; font-size:15px; font-weight:600; }
.check .t span { display:block; font-size:13px; color:var(--ink3); }
.tchips { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
.av { width:28px; height:28px; border-radius:14px; background:var(--graphite2); color:#FFFFFF; font-size:12px; font-weight:700; display:inline-grid; place-items:center; flex:none; }
.av.dl { background:var(--brass-soft); color:var(--brass-ink); }


/* Ergänzungen App 0.1 */
.side .brand { display:flex; align-items:center; gap:10px; font-weight:700; padding:6px 12px 16px; font-size:17px; }
.bm { width:28px; height:28px; flex:none; } .bm-bg { fill:#34404A; } .bm-st { stroke:#D2AE63; } .bm-fi { fill:#D2AE63; }
a.row, a.btn { color:inherit; text-decoration:none; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.login { min-height:100%; display:flex; align-items:flex-start; justify-content:center; padding-block:max(40px, env(safe-area-inset-top,0px)) 40px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
.login .mark { font-size:22px; font-weight:700; margin-top:30vh; color:var(--ink2); }
.lg-in { width:100%; max-width:520px; }
.lg-in .bm { width:56px; height:56px; margin:10px 0 8px; }
.lg-in h1 { font-size:32px; margin:6px 0 4px; }
.rk { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:18px; line-height:1.6; letter-spacing:.06em; background:var(--card); border:2px solid var(--brass); border-radius:14px; padding:14px 16px; margin:12px 0; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all; }
.fp.big { font-size:24px; text-align:center; margin:12px 0; }
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
@media (max-width:360px) { .two { grid-template-columns:minmax(0,1fr); } }
.field small { display:block; font-size:12px; color:var(--ink3); margin:4px 4px 0; }
.check-f { display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; min-height:48px; }
.check-f span { margin:0; font-size:15px; color:var(--ink); }
.check-f input, .check-row input { width:22px; height:22px; flex:none; accent-color:var(--graphite); }
.check-row { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-top:1px solid var(--line-soft); font-size:14px; }
.check-row:first-child { border-top:0; }
.check-row span { min-width:0; overflow-wrap:anywhere; }
.linkb { color:var(--brass-ink); text-decoration:underline; font-size:12px; min-height:24px; }
.code { font-family:ui-monospace, Menlo, monospace; font-size:12px; padding:12px 14px; overflow-wrap:anywhere; color:var(--ink2); }
.thumb { padding:0; overflow:hidden; position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb span { position:absolute; bottom:2px; left:0; right:0; font-size:10px; }
img.full { width:100%; height:auto; border-radius:12px; display:block; }
.pillrow { display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 10px; }
.kpi .n.sm { font-size:18px; } .kpi .n.neg, .n.neg { color:var(--bad-fg); }
.empty.sm { padding:14px; font-size:14px; }
.sheet-h .sp { width:70px; }
.cl { font-size:14px !important; color:var(--ink) !important; }
.gsel { font:inherit; font-size:13px; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); min-height:36px; }
.gsel.g-r { background:var(--info-bg); color:var(--info-fg); } .gsel.g-w { background:var(--good-bg); color:var(--good-fg); }
.main { padding-top:max(8px, env(safe-area-inset-top,0px)); }
.mk td small { display:block; font-size:11px; color:var(--ink3); }
.mk th, .mk td { padding:8px 8px; }
.tl-b p { white-space:pre-line; }

/* 0.2: Hinweisleiste (wartende Geräte, Anmeldung), Abschnittstitel in der Einrichtung, Polster in Gruppen, Warte-Kreisel */
.note.warnb { width:100%; border:0; text-align:left; font:inherit; cursor:pointer; background:var(--warn-bg); color:var(--warn-fg); font-weight:600; }
.st-h { font-size:22px; margin:18px 0 8px; }
.group.pad { padding:12px 14px; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--brass); border-radius:50%; animation:sp 1s linear infinite; vertical-align:-1px; margin-right:6px; }
@keyframes sp { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }

/* Ziehen zum Aktualisieren, Leiste „Neue Version“, Versionsabzeichen */
.pull { position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:35; transform:translateY(-56px); opacity:0; margin-left:-130px; width:260px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:20px; background:var(--card); color:var(--ink2); border:1px solid var(--line); font-size:14px; pointer-events:none; box-shadow:0 4px 14px rgba(23,32,35,.14); }
.pull-i { display:grid; place-items:center; width:20px; height:20px; transition:transform .15s; }
.pull-i svg { width:20px; height:20px; }
.pull.go .pull-i { transform:rotate(180deg); color:var(--brass-ink); }
.pull.busy .pull-i { animation:sp 1s linear infinite; }
.upd { position:fixed; left:max(12px, env(safe-area-inset-left,0px)); right:max(12px, env(safe-area-inset-right,0px)); bottom:calc(64px + env(safe-area-inset-bottom,0px)); z-index:16; max-width:616px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 10px 10px 14px; border-radius:14px; background:var(--graphite); color:#F3F5F6; box-shadow:0 8px 24px rgba(23,32,35,.3); }
.upd-t { flex:1; min-width:0; }
.upd-t b { display:block; font-size:15px; }
.upd-t span { display:block; font-size:20px; font-weight:700; color:#D2AE63; letter-spacing:.01em; }
.upd .btn { flex:none; background:#D2AE63; color:#232B30; border-color:#D2AE63; }
.app.has-upd .main { padding-bottom:180px; }
.vbadge { flex:none; align-self:center; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; padding:4px 12px; border-radius:12px; background:var(--brass-soft); color:var(--ink); border:1px solid var(--line); }
.vbadge.sm { font-size:13px; padding:2px 8px; margin-left:auto; }
.login .upd { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
@media (min-width:820px) { .upd { bottom:24px; left:auto; right:24px; width:420px; } .app.has-upd .main { padding-bottom:120px; } }
.app.has-upd ~ .toast { bottom:calc(140px + env(safe-area-inset-bottom,0px)); }
@media (min-width:820px) { .app.has-upd ~ .toast { bottom:110px; } }