/* Astoro-Portal – UI (Besitz: Assistent 2). Tokens aus tokens.css (Kopie von templates/core/src/theme/tokens.css).
   Ziel: anschaulich, ruhig, mit dem Daumen bedienbar (iPhone 17 Pro Max), auf dem Desktop mit Seitenleiste.
   Kein JavaScript nötig. Hell und dunkel (prefers-color-scheme). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Portal-Tokens (ergänzen tokens.css) ---------- */
:root {
  color-scheme: light dark;
  --side-w: 15rem;
  --tabbar-h: 4.25rem;
  --page-bg: #f5f5f7;
  --card: #ffffff;
  --card-2: #f5f5f7; /* Fläche in Karten (Inputs, Tracks) */
  --hover: rgb(0 0 0 / 0.045);
  --ink-2: #424245;
  --ok: #1d7d3f;
  --ok-solid: #248a3d;
  --ok-bg: #e3f4e8;
  --warn: #8a5a00;
  --warn-solid: #e0a100;
  --warn-bg: #fff4d6;
  --bad: #c9302c;
  --bad-bg: #fdeceb;
  --info-bg: var(--color-accent-soft);
  --chrome: rgb(255 255 255 / 0.78);
  --chrome-line: rgb(0 0 0 / 0.08);
  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #000000;
    --card: #1c1c1e;
    --card-2: #2c2c2e;
    --hover: rgb(255 255 255 / 0.06);
    --ink-2: #c7c7cc;
    --ok: #30d158;
    --ok-solid: #248a3d;
    --ok-bg: rgb(48 209 88 / 0.16);
    --warn: #ffd60a;
    --warn-solid: #ffd60a;
    --warn-bg: rgb(255 214 10 / 0.14);
    --bad: #ff6961;
    --bad-bg: rgb(255 69 58 / 0.16);
    --info-bg: rgb(10 132 255 / 0.18);
    --chrome: rgb(28 28 30 / 0.78);
    --chrome-line: rgb(255 255 255 / 0.1);
    --shadow-lift: none;
    --color-ink: #f5f5f7;
    --color-ink-muted: #98989d;
    --color-line: #38383a;
    --color-line-soft: #2c2c2e;
    --color-link: #4da3ff;
    --color-accent: #0a84ff;
    --color-accent-hover: #409cff;
    --color-accent-soft: rgb(10 132 255 / 0.18);
    --color-success: #30d158;
    --color-danger: #ff6961;
  }
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: var(--font-weight-heading); letter-spacing: var(--letter-spacing-heading); line-height: var(--line-height-snug); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 8px; }
.i { flex: none; display: block; }
.muted { color: var(--color-ink-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.devbar { background: #1d1d1f; color: #f5f5f7; font-size: var(--text-xs); text-align: center; padding: 0.35rem 1rem; letter-spacing: 0; }

/* ---------- Rahmen: Desktop-Seitenleiste ---------- */
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--color-ink); font-weight: 600; letter-spacing: -0.02em; font-size: 1.0625rem; }
.brand:hover { text-decoration: none; }
.brand-sub { color: var(--color-ink-muted); font-weight: 400; margin-left: 0.3rem; }
.logo { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: linear-gradient(145deg, #0a84ff, #0060df); color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 600; letter-spacing: 0; }

.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30;
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 0.85rem;
  background: var(--chrome); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
  border-right: 1px solid var(--chrome-line);
}
.side .brand { padding: 0.25rem 0.55rem; }
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: 0.65rem;
  color: var(--color-ink); font-size: 0.9375rem; font-weight: 500; position: relative;
}
.side-link:hover { background: var(--hover); text-decoration: none; }
.side-link.on { background: var(--color-accent-soft); color: var(--color-link); }
.side-link .ni { position: relative; display: grid; place-items: center; }
.side-link .ni .i { width: 20px; height: 20px; }
.side-link .nl { flex: 1; }
.side-foot { margin: auto 0 0; }
.as-btn { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; color: var(--color-ink-muted); text-align: left; }
.badge {
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.38rem; border-radius: var(--radius-pill);
  background: var(--bad); color: #fff; font-size: 0.6875rem; font-weight: 600; display: inline-grid; place-items: center; letter-spacing: 0;
}

/* ---------- Rahmen: Mobil (Kopfzeile + Tab-Bar) ---------- */
.mtop, .tabbar { display: none; }

.wrap { margin-left: var(--side-w); padding: 2.75rem clamp(1.5rem, 3vw, 3rem) 5rem; max-width: calc(var(--side-w) + 74rem); }
.guest .wrap { margin: 0; max-width: none; padding: 0; }

@media (max-width: 860px) {
  .side { display: none; }
  .wrap { margin-left: 0; padding: 1.25rem 1rem calc(var(--tabbar-h) + 2rem + env(safe-area-inset-bottom)); }
  .mtop {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20;
    height: 3.25rem; padding: 0 0.5rem 0 1rem;
    background: var(--chrome); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
    border-bottom: 1px solid var(--chrome-line);
  }
  .mtop .logo { width: 1.7rem; height: 1.7rem; font-size: 0.9rem; }
  .mtop-add { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: var(--color-link); }
  .mtop-add.on { background: var(--color-accent-soft); }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 30;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0.35rem 0.25rem env(safe-area-inset-bottom);
    background: var(--chrome); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur);
    border-top: 1px solid var(--chrome-line);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    color: var(--color-ink-muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; border-radius: 0.75rem;
  }
  .tab:hover { text-decoration: none; }
  .tab.on { color: var(--color-link); }
  .tab .ni { position: relative; }
  .tab .ni .i { width: 26px; height: 26px; }
  .tab .ni .badge { position: absolute; top: -0.35rem; right: -0.75rem; }
}

/* ---------- Seitenkopf, Abschnitte, Karten ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.head h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); letter-spacing: var(--letter-spacing-display); line-height: 1.1; }
.head p { color: var(--color-ink-muted); font-size: var(--text-lg); margin-top: 0.4rem; max-width: 42rem; }
.head .back { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 0.2rem; margin-bottom: 0.5rem; min-height: 2.5rem; }
.section { margin-top: 2.25rem; }
.section > h2, .sh { font-size: 1.25rem; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.section > h2 .count, .sh .count { color: var(--color-ink-muted); font-weight: 400; }
.hint { color: var(--color-ink-muted); margin: -0.4rem 0 1rem; font-size: var(--text-sm); }
.card { background: var(--card); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lift); }
.card + .card { margin-top: 1rem; }
.card > h2 { font-size: 1.1875rem; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-h h2 { font-size: 1.1875rem; }
.card-h a { font-size: var(--text-sm); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .card { padding: 1.25rem; border-radius: 20px; } .section { margin-top: 1.75rem; } }

.flash { display: flex; align-items: center; gap: 0.6rem; background: var(--card); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; font-weight: 500; box-shadow: var(--shadow-lift); }
.flash.ok .i { color: var(--color-success); }
.flash.fehler { background: var(--bad-bg); color: var(--bad); }

/* ---------- Pills, Ampel, Badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; letter-spacing: 0; }
.pill.grau { background: var(--card-2); color: var(--ink-2); }
.pill.gruen { background: var(--ok-bg); color: var(--ok); }
.pill.rot { background: var(--bad-bg); color: var(--bad); }
.pill.gelb { background: var(--warn-bg); color: var(--warn); }
.pill.blau { background: var(--info-bg); color: var(--color-link); }
.ampel { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.ampel .dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--color-ink-muted); box-shadow: 0 0 0 4px var(--card-2); }
.ampel.gruen .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.ampel.gelb .dot { background: var(--warn-solid); box-shadow: 0 0 0 4px var(--warn-bg); }
.ampel.rot .dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: var(--radius-pill);
  min-height: 2.75rem; padding: 0.6rem 1.25rem; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  background: var(--color-accent); color: #fff; text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: background var(--duration) var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--color-accent-hover); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn .i { width: 20px; height: 20px; }
.btn.big { min-height: 3.5rem; padding-inline: 1.6rem; font-size: 1.0625rem; font-weight: 600; }
.btn.block { width: 100%; }
.btn.ok { background: var(--ok-solid); }
.btn.ok:hover { background: #1f7a35; }
.btn.bad { background: var(--bad-bg); color: var(--bad); }
.btn.bad:hover { background: var(--bad); color: #fff; }
.btn.ghost, .btn-quiet { background: var(--card-2); color: var(--color-ink); }
.btn.ghost:hover, .btn-quiet:hover { background: var(--hover); }
.btn.call { background: var(--ok-solid); color: #fff; }
.btn.call:hover { background: #1f7a35; }
.btn[disabled], .btn.disabled { background: var(--card-2); color: var(--color-ink-muted); cursor: not-allowed; transform: none; }
.icon-btn { border: 0; background: none; color: var(--color-ink-muted); width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }

/* ---------- Formulare ---------- */
label.f { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
label.f > span.opt, .opt { color: var(--color-ink-muted); font-weight: 400; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="tel"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--color-ink); background: var(--card-2); border: 1px solid transparent; border-radius: 0.8rem;
  padding: 0.75rem 0.95rem; width: 100%; min-width: 0; min-height: 2.9rem;
}
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem; }
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Auswahl als Pillen (Radio) */
.choices { display: flex; flex-wrap: wrap; gap: 0.45rem; border: 0; padding: 0; margin: 0; }
.choices legend { font-size: var(--text-sm); font-weight: 500; margin-bottom: 0.5rem; padding: 0; }
.choices label { cursor: pointer; position: relative; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.6rem; padding: 0.5rem 1rem; border-radius: var(--radius-pill); background: var(--card-2); font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); }
.choices label:hover span { background: var(--hover); }
.choices input:checked + span { background: var(--color-ink); color: var(--card); }
.choices input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Segmented Control aus Submit-Buttons (ein Tipp = speichern). Flex-Umbruch: volle Zeilen, keine Lücken. */
.segctl { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--card-2); border-radius: 14px; }
.segctl button {
  flex: 1 1 28%; appearance: none; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--color-ink);
  min-height: 2.9rem; padding: 0.4rem 0.5rem; border-radius: 11px; cursor: pointer; line-height: 1.2; text-align: center;
}
.segctl button:hover { background: var(--hover); }
.segctl button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); font-weight: 600; }
.segctl .seg-ok[aria-pressed="true"] { color: var(--ok); }
.segctl .seg-bad[aria-pressed="true"] { color: var(--bad); }
.seg-label { font-size: var(--text-sm); font-weight: 500; margin-bottom: 0.45rem; display: block; }
/* Rückruf: eigener aufklappbarer Bereich unter dem Segmented Control */
details.rr { margin-top: 0.5rem; }
details.rr > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.9rem;
  border-radius: 14px; background: var(--card-2); font-size: 0.875rem; font-weight: 500; color: var(--color-ink);
}
details.rr > summary::-webkit-details-marker { display: none; }
details.rr[data-on] > summary { box-shadow: inset 0 0 0 2px var(--warn-solid); font-weight: 600; }
details.rr[open] > summary { border-radius: 14px 14px 0 0; }
.rr-pop { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; background: var(--card-2); border-radius: 0 0 14px 14px; }
.rr-pop input { flex: 1; background: var(--card); }

/* ---------- Übersicht: Kennzahlen ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.kpi {
  background: var(--card); border-radius: var(--radius-lg); padding: 1.2rem 1.3rem 1.15rem; display: flex; flex-direction: column; gap: 0.1rem;
  color: var(--color-ink); box-shadow: var(--shadow-lift); min-width: 0;
}
a.kpi:hover { text-decoration: none; background: color-mix(in srgb, var(--card) 94%, var(--color-ink)); }
.kpi-l { font-size: var(--text-sm); color: var(--color-ink-muted); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.kpi-l .i { width: 16px; height: 16px; }
.kpi-v { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin-top: 0.5rem; white-space: nowrap; }
.kpi-s { font-size: 0.8125rem; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.dunkel { background: linear-gradient(150deg, #1d1d1f, #3a3a3c); color: #fff; }
.kpi.dunkel .kpi-l, .kpi.dunkel .kpi-s { color: rgb(255 255 255 / 0.7); }
@media (prefers-color-scheme: dark) { .kpi.dunkel { background: linear-gradient(150deg, #0a84ff, #0060df); } }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .kpi { padding: 1rem 1.05rem; border-radius: 20px; }
  .kpi.wide { grid-column: 1 / -1; }
}

/* Erinnerungsbrief */
.erinnerung { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.25rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); background: var(--card-2); flex-wrap: wrap; }
.erinnerung .t { min-width: 12rem; }
.erinnerung .t span { white-space: normal; }
.erinnerung form { margin-left: auto; }

/* Faktencheck-Sperre (dezent) */
.qa-sperre { background: var(--card-2); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: var(--text-sm); color: var(--ink-2); }
.qa-sperre ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.sh .muted { font-weight: 400; font-size: 0.9em; }

/* Kosten */
.kosten-link { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); background: var(--card); color: var(--color-ink); font-weight: 500; box-shadow: var(--shadow-lift); }
.kosten-link span { flex: 1; }
.kosten-link:hover { text-decoration: none; background: var(--hover); }
@media (min-width: 861px) { .kosten-link { display: none; } }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.budget-v { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; }
.budget-v .muted { font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.meter { display: block; height: 0.6rem; border-radius: var(--radius-pill); background: var(--card-2); overflow: hidden; margin-top: 0.75rem; }
.meter > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--ok); }
.meter.gelb > span { background: var(--warn-solid); }
.meter.rot > span { background: var(--bad); }

/* Anrufe: Rückruf-Wunsch und F3-Hinweis */
.callcard.wunsch { box-shadow: inset 0 0 0 2px var(--bad), var(--shadow-lift); }
.wunsch-info { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; background: var(--bad-bg); color: var(--color-ink); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; }
.wunsch-info .i { color: var(--bad); margin-top: 0.15rem; }
.notice { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--warn-bg); color: var(--color-ink); border-radius: var(--radius-md); padding: 0.85rem 1rem; margin-bottom: 1rem; font-size: var(--text-sm); }
.notice .i { color: var(--warn); margin-top: 0.1rem; flex: none; }
.locked { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-muted); background: var(--card-2); border-radius: var(--radius-md); padding: 0.8rem 1rem; }
.locked .i { margin-top: 0.15rem; }
.sh .i { color: var(--color-ink-muted); }

/* ---------- Funnel ---------- */
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.frow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 0.8rem; }
.frow .fl { font-size: var(--text-sm); font-weight: 500; }
.track { height: 1.6rem; background: var(--card-2); border-radius: var(--radius-pill); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #0a84ff, #5ac8fa); }
.frow:last-child .fill { background: linear-gradient(90deg, #248a3d, #30d158); }
.frow .fn { text-align: right; font-weight: 600; line-height: 1.1; }
.frow .fn small { display: block; color: var(--color-ink-muted); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0; }
@media (max-width: 560px) { .frow { grid-template-columns: 6.9rem minmax(0, 1fr) 2.6rem; gap: 0.55rem; } .frow .fl { font-size: 0.8125rem; } .track { height: 1.35rem; } }

/* ---------- Listen ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--color-line-soft); }
.row { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0; color: var(--color-ink); min-height: 3.5rem; }
a.row:hover { text-decoration: none; }
a.row:hover b { color: var(--color-link); }
.ico { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--card-2); color: var(--color-ink-muted); }
.ico.blau { background: var(--info-bg); color: var(--color-link); }
.ico.gruen { background: var(--ok-bg); color: var(--ok); }
.ico.gelb { background: var(--warn-bg); color: var(--warn); }
.ico.rot { background: var(--bad-bg); color: var(--bad); }
.t { flex: 1; min-width: 0; }
.t b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t span { color: var(--color-ink-muted); font-size: var(--text-sm); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go { color: var(--color-ink-muted); flex: none; }
.more { display: flex; justify-content: center; padding-top: 0.75rem; border-top: 1px solid var(--color-line-soft); font-size: var(--text-sm); font-weight: 500; }
.rowlist { background: var(--card); border-radius: var(--radius-lg); padding: 0.25rem 1.25rem; box-shadow: var(--shadow-lift); }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: var(--letter-spacing-heading); min-height: 2.75rem; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--color-ink-muted); border-bottom: 2px solid var(--color-ink-muted); transform: rotate(45deg); margin-left: 0.25rem; transition: transform var(--duration) var(--ease); }
details.fold[open] > summary::after { transform: rotate(225deg); }
details.fold > summary .count { color: var(--color-ink-muted); font-weight: 400; }

/* ---------- Leere Zustände ---------- */
.empty { text-align: center; padding: 2rem 1rem; color: var(--color-ink-muted); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.empty-ico { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--color-link); margin-bottom: 0.25rem; }
.empty h3 { color: var(--color-ink); font-size: 1.125rem; }
.empty p { max-width: 28rem; font-size: var(--text-sm); }
.empty-steps { text-align: left; margin: 0.75rem auto 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0.6rem; max-width: 26rem; font-size: var(--text-sm); color: var(--color-ink); }
.empty-steps li { counter-increment: s; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.6rem; align-items: start; }
.empty-steps li::before { content: counter(s); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; }
.empty .btn-quiet { margin-top: 0.75rem; }

/* ---------- Freigaben ---------- */
.fg { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; padding: 1.75rem; }
.phone {
  display: block; position: relative; width: 100%; aspect-ratio: 440 / 956; border-radius: 2.2rem; padding: 0.55rem;
  background: #1d1d1f; box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); overflow: hidden;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 1.7rem; background: #fff; }
.phone .tapcap {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgb(29 29 31 / 0.78); color: #fff; font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; letter-spacing: 0;
}
.phone .tapcap .i { width: 14px; height: 14px; }
.phone.none { display: grid; place-items: center; color: #98989d; font-size: var(--text-sm); text-align: center; }
.phone-wrap { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.phone-wrap .sub-links { display: flex; gap: 0.9rem; font-size: var(--text-sm); flex-wrap: wrap; justify-content: center; }
.fg-info { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.fg-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fg-title h2 { font-size: 1.6rem; letter-spacing: var(--letter-spacing-display); }
.meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; color: var(--color-ink-muted); font-size: var(--text-sm); align-items: center; margin-top: 0.25rem; }
.qa-box { background: var(--card-2); border-radius: var(--radius-md); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.qa-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--text-sm); }
.checks li { display: flex; gap: 0.5rem; align-items: flex-start; }
.checks li .i { width: 18px; height: 18px; margin-top: 0.1rem; }
.checks li.fehler .i { color: var(--bad); }
.checks li.warnung .i { color: var(--warn); }
.scores { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.score { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--color-ink-muted); }
.score b { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; color: var(--ok); box-shadow: inset 0 0 0 2.5px var(--ok); letter-spacing: 0; }
.score b.mid { color: var(--warn); box-shadow: inset 0 0 0 2.5px var(--warn-solid); }
.score b.low { color: var(--bad); box-shadow: inset 0 0 0 2.5px var(--bad); }
.letter { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--card-2); color: var(--color-ink); }
.letter:hover { text-decoration: none; background: var(--hover); }
.letter .paper { width: 2.6rem; height: 3.4rem; border-radius: 0.3rem; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.15); flex: none; padding: 0.4rem 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; }
.letter .paper span { display: block; height: 0.15rem; border-radius: 1px; background: #d2d2d7; }
.letter .paper span:nth-child(1) { width: 60%; background: #86868b; }
.letter .paper span:nth-child(4) { width: 70%; }
.letter .paper i { display: block; width: 0.8rem; height: 0.8rem; margin-top: auto; background: repeating-conic-gradient(#1d1d1f 0 25%, #fff 0 50%) 0 0 / 0.27rem 0.27rem; }
.letter .t b { white-space: normal; }
details.brief-inline > summary { cursor: pointer; color: var(--color-link); font-weight: 500; font-size: var(--text-sm); list-style: none; display: inline-flex; gap: 0.35rem; align-items: center; min-height: 2.5rem; }
details.brief-inline > summary::-webkit-details-marker { display: none; }
details.brief-inline object { width: 100%; height: 36rem; border: 0; border-radius: var(--radius-md); background: #fff; margin-top: 0.5rem; }

/* Entscheidung: zwei große Buttons nebeneinander; Bestätigung per <details> (ohne JS). Geöffnet: volle Breite. */
.decide { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line-soft); }
.decide > details, .decide > .btn { flex: 1 1 10rem; min-width: 0; }
.decide > details[open] { flex-basis: 100%; }
.decide > details > summary { list-style: none; width: 100%; }
.decide > details > summary::-webkit-details-marker { display: none; }
.decide > details > .panel { margin-top: 0.75rem; background: var(--card-2); border-radius: var(--radius-md); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.decide > details.d-ok[open] > summary { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ok-solid); }
.decide > details.d-bad[open] > summary { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--bad); }
.panel h3 { font-size: 1.0625rem; }
.panel p { font-size: var(--text-sm); color: var(--ink-2); }
.why { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-ink-muted); display: flex; gap: 0.45rem; align-items: flex-start; }
.why .i { width: 16px; height: 16px; margin-top: 0.15rem; }
.decided { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--color-line-soft); }
.compact .fg { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.1rem; padding: 1rem 1.25rem; align-items: center; }
.compact .phone { border-radius: 0.9rem; padding: 0.2rem; box-shadow: none; }
.compact .phone img { border-radius: 0.7rem; }
.compact .fg-title h2 { font-size: 1.125rem; letter-spacing: var(--letter-spacing-heading); }
@media (max-width: 860px) {
  .fg { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
  .fg > .phone-wrap .phone { width: min(70%, 16rem); }
  .fg-title h2 { font-size: 1.375rem; }
  details.brief-inline { display: none; }
  .compact .fg { grid-template-columns: 4rem minmax(0, 1fr); }
  .compact .fg > .phone-wrap .phone { width: 100%; }
}


/* ---------- Freigaben: Liste ---------- */
.btn.start { min-height: 3.75rem; font-size: 1.125rem; border-radius: 1.1rem; }
.flist { background: var(--card); border-radius: var(--radius-lg); padding: 0.25rem 1rem; box-shadow: var(--shadow-lift); }
.frow-l { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; color: var(--color-ink); min-height: 4.75rem; }
.frow-l:hover { text-decoration: none; }
.frow-l:hover b { color: var(--color-link); }
.thumb { width: 3.75rem; height: 5rem; flex: none; border-radius: 0.7rem; overflow: hidden; background: var(--card-2); display: grid; place-items: center; color: var(--color-ink-muted); box-shadow: inset 0 0 0 1px var(--color-line-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fr-end { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.qadot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-ink-muted); flex: none; }
.qadot.gruen { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.qadot.gelb { background: var(--warn-solid); box-shadow: 0 0 0 3px var(--warn-bg); }
.qadot.rot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.muted-list .thumb { opacity: 0.6; }
@media (max-width: 560px) { .fr-end .pill { display: none; } }

/* ---------- Freigabe-Modus: ein Paket pro Bildschirm ---------- */
body:has(.modus) .tabbar { display: none; }
body:has(.modus) .wrap { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.modus { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.m-top { display: grid; grid-template-columns: 2.75rem 1fr 4.5rem; align-items: center; gap: 0.5rem; }
.m-close { margin-left: -0.6rem; color: var(--color-ink); }
.m-prog { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.m-count { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-bar { width: min(14rem, 100%); height: 0.3rem; border-radius: var(--radius-pill); background: var(--card-2); overflow: hidden; }
.m-fill { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.m-skip { justify-self: end; font-size: var(--text-sm); font-weight: 500; min-height: 2.75rem; display: inline-flex; align-items: center; }
.m-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: var(--letter-spacing-display); line-height: 1.12; }
.m-head p { color: var(--color-ink-muted); margin-top: 0.2rem; }

/* Viewer: Umschalter Handy/Desktop ohne JS (Radio + Geschwister-Selektor) */
.viewer { display: flex; flex-direction: column; gap: 0.6rem; }
.v-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.v-toggle { display: inline-flex; padding: 3px; gap: 3px; background: var(--card-2); border-radius: 12px; }
.v-toggle label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 9px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; color: var(--color-ink-muted); }
.v-toggle label.off { opacity: 0.4; cursor: not-allowed; }
#ansicht-m:checked ~ .v-bar label[for="ansicht-m"], #ansicht-d:checked ~ .v-bar label[for="ansicht-d"] { background: var(--card); color: var(--color-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); font-weight: 600; }
#ansicht-m:focus-visible ~ .v-bar label[for="ansicht-m"], #ansicht-d:focus-visible ~ .v-bar label[for="ansicht-d"] { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.v-open { font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; }
.screens .s-d { display: none; }
#ansicht-d:checked ~ .screens .s-m { display: none; }
#ansicht-d:checked ~ .screens .s-d { display: block; }
.scroller {
  height: calc(100dvh - 27.5rem); min-height: 18rem; max-height: 44rem; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 1.4rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--color-line-soft), var(--shadow-lift);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.scroller img { display: block; width: 100%; height: auto; }
.scroller.s-m { margin-inline: auto; width: min(100%, 26rem); }
.scroller.none { display: grid; place-items: center; align-content: center; gap: 0.5rem; color: var(--color-ink-muted); font-size: var(--text-sm); }
#ansicht-d:checked ~ .screens .scroller.s-d.none { display: grid; }

/* QA kompakt in einer Zeile */
details.qa-line { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
details.qa-line > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-height: 3.25rem; padding: 0.55rem 1rem; font-size: 0.9375rem; }
details.qa-line > summary::-webkit-details-marker { display: none; }
.qa-more { margin-left: auto; font-size: var(--text-sm); color: var(--color-link); font-weight: 500; }
details.qa-line[open] .qa-more { visibility: hidden; }
.qa-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.m-decided { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.m-decided p { flex-basis: 100%; }

/* Sticky Bottom-Bar mit zwei großen Buttons; Bestätigung/Gründe als Bottom-Sheet (details, ohne JS) */
.m-bar-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 0.6rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--chrome-line); box-shadow: 0 -6px 24px rgb(0 0 0 / 0.06);
}
.m-bar-bottom > .btn, .m-bar-bottom > .sheet { flex: 1 1 0; min-width: 0; }
.sheet > summary { list-style: none; width: 100%; }
.sheet > summary::-webkit-details-marker { display: none; }
.sheet > summary.btn { min-height: 3.6rem; border-radius: 1.1rem; }
.m-bar-bottom > .btn { min-height: 3.6rem; border-radius: 1.1rem; white-space: normal; line-height: 1.2; font-size: 0.9375rem; }
/* Sheet über der Leiste (die Leiste ist der Bezugsrahmen), mit abgedunkeltem Hintergrund */
.sheet[open]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: rgb(0 0 0 / 0.38); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; display: flex; flex-direction: column; gap: 0.9rem;
  max-height: 70vh; overflow-y: auto; padding: 1.25rem 1.25rem 1.1rem; background: var(--card); border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -10px 30px rgb(0 0 0 / 0.15);
}
.sheet-panel::before { content: ""; width: 2.5rem; height: 0.3rem; border-radius: 3px; background: var(--color-line); align-self: center; margin: -0.4rem 0 0.2rem; }
.sheet-panel h3 { font-size: 1.25rem; letter-spacing: var(--letter-spacing-heading); }
.sheet-panel p { color: var(--ink-2); font-size: var(--text-sm); }
.sheet.s-ok[open] > summary { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ok-solid); }
.sheet.s-bad[open] > summary { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--bad); }
.sheet-panel .choices span { min-height: 2.75rem; }
.sheet-panel .choices input:checked + span { background: var(--bad); color: #fff; }
@media (min-width: 861px) {
  .m-bar-bottom { left: var(--side-w); justify-content: center; }
  .m-bar-bottom > .btn, .m-bar-bottom > .sheet { flex: 0 1 22rem; }
  .sheet-panel { left: 50%; right: auto; width: min(36rem, calc(100vw - var(--side-w) - 2rem)); transform: translateX(-50%); }
  .scroller.s-m { width: min(100%, 24rem); }
}

/* ---------- Anrufe ---------- */
.callcard { display: flex; flex-direction: column; gap: 1rem; }
.callcard.prio { box-shadow: inset 0 0 0 2px var(--warn-solid), var(--shadow-lift); }
.call-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.call-top h2 { font-size: 1.375rem; letter-spacing: var(--letter-spacing-display); }
.call-top h2 a { color: inherit; }
.signals { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.callcard .old { background: var(--card-2); border-radius: var(--radius-md); padding: 0.8rem 1rem; font-size: var(--text-sm); color: var(--ink-2); }
.callcard .btn.call { min-height: 3.75rem; font-size: 1.1875rem; font-weight: 600; width: 100%; border-radius: 1.1rem; }
.callcard .btn.call .i { width: 24px; height: 24px; }
.call-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-sm); color: var(--color-ink-muted); }
.call-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.call-grid .callcard + .callcard { margin-top: 0; }
@media (max-width: 1100px) { .call-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Betriebe ---------- */
.filters { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }
.search { position: relative; max-width: 30rem; }
.search .i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--color-ink-muted); pointer-events: none; }
.search input { padding-left: 2.6rem; background: var(--card); box-shadow: var(--shadow-lift); }
.seg { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; }
.seg::-webkit-scrollbar { display: none; }
.seg a { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); background: var(--card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-lift); }
.seg a:hover { text-decoration: none; background: var(--hover); }
.seg a.on { background: var(--color-ink); color: var(--card); }
.seg a small { opacity: 0.6; margin-left: 0.35rem; font-size: 0.75rem; }
.blist { background: var(--card); border-radius: var(--radius-lg); padding: 0.25rem 1.25rem; box-shadow: var(--shadow-lift); }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; padding: 0.95rem 0; color: var(--color-ink); align-items: center; }
.blist li + li .brow { border-top: 1px solid var(--color-line-soft); }
a.brow:hover { text-decoration: none; }
a.brow:hover .bn { color: var(--color-link); }
.bn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsub { color: var(--color-ink-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bright { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; grid-row: span 2; }
.mini { display: flex; gap: 2px; }
.mini span { width: 0.85rem; height: 0.3rem; border-radius: 2px; background: var(--color-line-soft); }
.mini span.on { background: var(--color-accent); }
.mini.auftrag span.on { background: var(--ok); }

/* Fortschritt (Detail) */
.stepper { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.stepper li { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.stepper .sdot { height: 0.4rem; border-radius: var(--radius-pill); background: var(--color-line-soft); }
.stepper li.done .sdot, .stepper li.now .sdot { background: var(--color-accent); }
.stepper .sl { font-size: 0.6875rem; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.stepper li.done .sl { color: var(--color-ink); }
.stepper li.now .sl { color: var(--color-ink); font-weight: 600; }
@media (max-width: 560px) { .stepper .sl { display: none; } .stepper li.now .sl { display: block; overflow: visible; } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin-top: 1.25rem; }
.facts div { min-width: 0; overflow-wrap: anywhere; }
.facts div span { display: block; font-size: 0.75rem; color: var(--color-ink-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.contact-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (min-width: 861px) { .contact-btns { display: flex; } }

/* Zeitleiste */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl li { position: relative; padding: 0 0 1.35rem 3.1rem; min-height: 2.4rem; }
.tl li::before { content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: 0.1rem; width: 2px; border-radius: 1px; background: var(--color-line-soft); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl .dot { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); color: var(--color-ink-muted); }
.tl .dot .i { width: 18px; height: 18px; }
.tl .dot.blau { background: var(--info-bg); color: var(--color-link); }
.tl .dot.gruen { background: var(--ok-bg); color: var(--ok); }
.tl .dot.rot { background: var(--bad-bg); color: var(--bad); }
.tl .dot.gelb { background: var(--warn-bg); color: var(--warn); }
.tl .tt { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-top: 0.35rem; }
.tl .tt b { font-weight: 600; }
.tl .tt time { color: var(--color-ink-muted); font-size: var(--text-sm); white-space: nowrap; }
.tl p { color: var(--ink-2); font-size: var(--text-sm); margin-top: 0.15rem; white-space: pre-line; overflow-wrap: anywhere; }
.tl .day { padding: 0 0 0.75rem 0; min-height: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.tl .day::before { display: none; }

/* ---------- Login ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.login .card { width: 100%; max-width: 24rem; padding: 2.25rem 2rem; }
.login h1 { font-size: 1.75rem; margin: 1.25rem 0 0.35rem; }
.login .logo { width: 3rem; height: 3rem; border-radius: 0.85rem; font-size: 1.4rem; }
.login .btn { width: 100%; margin-top: 0.5rem; }
.login .code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; font-size: 1.25rem; text-align: center; }
.devhint { background: var(--warn-bg); color: var(--warn); border-radius: 0.75rem; padding: 0.7rem 0.9rem; font-size: var(--text-sm); margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Abstands-Helfer (statt Inline-Styles, CSP) ---------- */
.mt-s { margin-top: 0.5rem; }
.mt-m { margin-top: 1rem; }
.mt-l { margin-top: 1.25rem; }
.mt-xl { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.narrow { max-width: 44rem; }

/* ---------- Teil 7/8: Angebote, Rechnungen, Go-live, Einstellungen (Assistent 2) ---------- */
.side-quiet { opacity: 0.8; }
.side-foot { display: grid; gap: 0.15rem; }
.mb-m { margin-bottom: 1rem; }
.w-full { width: 100%; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--card-2); padding: 0.1em 0.35em; border-radius: 0.35em; }
.narrow-l { max-width: 52rem; }

.muster-box { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.15rem; margin-bottom: 1.25rem; border-radius: var(--radius-md); background: var(--warn-bg); border: 2px dashed var(--warn); }
.muster-box .i { color: var(--warn); flex: none; margin-top: 0.1rem; }
.muster-box b { display: block; font-size: 1.0625rem; }
.muster-box span { display: block; font-size: var(--text-sm); margin-top: 0.2rem; }

/* Kachel-Auswahl (Paket, Module) */
.tiles { display: grid; gap: 0.6rem; }
.tiles-3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.tile { position: relative; cursor: pointer; display: block; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile-b { display: grid; gap: 0.2rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--card-2); border: 2px solid transparent; transition: border-color 0.15s, background 0.15s; }
.tile:hover .tile-b { background: var(--hover); }
.tile input:checked + .tile-b { border-color: var(--color-link); background: var(--card); box-shadow: var(--shadow-lift); }
.tile input:focus-visible + .tile-b { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tile-p { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 0.25rem; }
.tile-l { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: 0.4rem; }
.tile-row .tile-b { grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; }
.tick { width: 1.35rem; height: 1.35rem; border-radius: 0.4rem; border: 1.5px solid var(--color-line); display: grid; place-items: center; color: transparent; background: var(--card); }
.tile input:checked + .tile-b .tick { background: var(--color-link); border-color: var(--color-link); color: #fff; }
.submit-bar { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 0.75rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1rem 0.9rem 1.25rem; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-lift), 0 8px 30px rgb(0 0 0 / 0.08); }
.submit-bar p { flex: 1 1 16rem; }
@media (max-width: 47.99rem) { .submit-bar { bottom: calc(var(--tabbar-h, 4.5rem) + env(safe-area-inset-bottom) + 0.5rem); } .submit-bar .btn { width: 100%; } }

/* Angebot: Positionen */
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc-table th, .doc-table td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--color-line-soft); vertical-align: top; }
.doc-table thead th { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0; }
.doc-table td span, .doc-table th span { display: block; font-size: var(--text-sm); color: var(--color-ink-muted); font-weight: 400; margin-top: 0.15rem; }
.doc-table .r { text-align: right; padding-left: 1rem; white-space: nowrap; }
.doc-table tfoot th, .doc-table tfoot td { border-bottom: 0; font-weight: 600; font-size: 1.0625rem; padding-top: 0.9rem; }
.copy-line { display: flex; gap: 0.4rem; align-items: center; }
.copy-line input { flex: 1; }
.mail-text { width: 100%; font-size: 0.9375rem; line-height: 1.5; resize: vertical; }
.copy-btn.copied { background: var(--ok-bg); color: var(--ok); }

/* Rechnungen */
.rg .row { flex-wrap: wrap; }
.rg-r { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.rg-act { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0 0 0.85rem 3.1rem; }
.pop { position: relative; }
.pop > summary { list-style: none; min-height: 2.4rem; font-size: var(--text-sm); }
.pop > summary::-webkit-details-marker { display: none; }
.pop[open] > summary { background: var(--color-ink); color: var(--card); }
.pop-b { margin-top: 0.5rem; display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: var(--radius-md); background: var(--card-2); min-width: 15rem; }

/* Go-live */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.checklist li { font-size: 0.9375rem; }
.checklist li > label, .checklist li.auto { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--card-2); cursor: pointer; }
.checklist li.auto { cursor: default; background: transparent; color: var(--color-ink-muted); }
.checklist em { font-style: normal; font-size: var(--text-xs); color: var(--color-ink-muted); }
.checklist input { position: absolute; opacity: 0; pointer-events: none; }
.ck { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--color-line); display: grid; place-items: center; color: transparent; background: var(--card); margin-top: 0.05rem; }
.ck.ok, .checklist input:checked + .ck { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; }
.ck.wait { color: var(--color-ink-muted); border-style: dashed; }
.checklist input:focus-visible + .ck { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.golive h2 { display: flex; align-items: center; gap: 0.5rem; }
.golive.is-live { background: var(--ok-bg); }

/* Anfragen pro Monat (Balken) */
.bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 0.5rem; height: 9rem; }
.bars li { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 0.3rem; height: 100%; }
.bar { width: 100%; max-width: 2.5rem; height: 100%; display: flex; align-items: flex-end; }
.bar span { width: 100%; border-radius: 0.45rem 0.45rem 0.2rem 0.2rem; background: var(--color-link); }
.bars li:last-child .bar span { background: var(--ok-solid); }
.bar-n { font-size: var(--text-sm); font-weight: 600; }
.bar-l { font-size: var(--text-xs); color: var(--color-ink-muted); white-space: nowrap; }
.ext { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }

/* Kunden + Monatsbericht (Teil 9) */
.kunden { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.kunde { display: grid; gap: 1rem; }
.kunde.alarm { box-shadow: 0 0 0 2px var(--bad), var(--shadow-lift); }
.kunde-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.kunde-name { display: grid; gap: 0.15rem; color: var(--color-ink); min-width: 0; }
.kunde-name b { font-size: 1.125rem; }
.kunde-name span { font-size: var(--text-sm); color: var(--color-ink-muted); overflow-wrap: anywhere; }
.kchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kchip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 0.6rem; border-radius: var(--radius-md); background: var(--card-2); font-size: var(--text-sm); }
.kchip .ampel .dot { box-shadow: none; width: 0.65rem; height: 0.65rem; }
.kchip-l { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); line-height: 1.2; }
.kchip-a { color: inherit; } .kchip-a:hover { text-decoration: none; } .kchip-a .kchip { background: var(--info-bg); }
.kunde-z { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; border-top: 1px solid var(--color-line-soft); padding-top: 0.9rem; }
.kunde-z div { display: grid; }
.kunde-z .num { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.kunde-z span:last-child { font-size: var(--text-xs); color: var(--color-ink-muted); }
.bericht-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.alarm-n { background: var(--bad-bg); } .alarm-n .i { color: var(--bad); }
.mail-h { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0.75rem 0 1rem; font-size: var(--text-sm); }
.mail-h dt { color: var(--color-ink-muted); } .mail-h dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 0.3rem; }
.mail-body { white-space: pre-wrap; font-size: 0.9375rem; line-height: 1.55; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--card-2); max-height: 32rem; overflow: auto; }
.bad-t { color: var(--bad); }
.send-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-lift); position: sticky; bottom: calc(env(safe-area-inset-bottom) + 0.75rem); }
.send-to { display: grid; } .send-to b { font-size: 1.0625rem; overflow-wrap: anywhere; }
.send-pop[open] > summary { background: var(--color-ink); }
.send-pop .pop-b { position: absolute; right: 0; bottom: calc(100% + 0.5rem); width: min(24rem, 86vw); background: var(--card); box-shadow: var(--shadow-lift), 0 12px 40px rgb(0 0 0 / 0.15); }
@media (max-width: 47.99rem) { .send-bar { position: static; } .send-pop, .send-pop > summary { width: 100%; } .send-pop .pop-b { left: 0; right: auto; width: 100%; } }
.send-pop .pop-b .btn { white-space: normal; height: auto; padding-block: 0.8rem; text-align: center; overflow-wrap: anywhere; }

/* Posteingang */
.pe-card.pe-hat { box-shadow: 0 0 0 2px var(--warn), var(--shadow-lift); }
.pe .row { flex-wrap: wrap; }
.pe-b { margin-left: auto; text-decoration: none; }
.pe-act { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0 0 0.9rem 3.1rem; }
.pe-act .btn { min-height: 2.4rem; font-size: var(--text-sm); }
.pe-form select[size] { min-height: 9rem; padding: 0.35rem; }
.pe-form { min-width: min(22rem, 80vw); }
@media (max-width: 47.99rem) { .pe-act { padding-left: 0; } .pe .t span { white-space: normal; overflow-wrap: anywhere; } .pe-b { margin-left: 3.1rem; } }
.pe-act { align-items: flex-start; }

/* Freigabe: Anrede, Aktivität, Redaktionshinweise */
.aktiv-n { margin: 0 0 1rem; border: 1.5px solid var(--warn); }
.aktiv-n .i { color: var(--warn); }
.brief-info { display: grid; gap: 0.6rem; margin-top: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-lift); }
.anrede { display: grid; gap: 0.15rem; }
.anrede b { font-weight: 500; }
.anrede.geschaetzt { margin: -0.35rem -0.5rem 0; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm, 8px); background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.anrede-n { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0.2rem 0 0; }
.anrede-n .i { flex: none; margin-top: 0.15rem; }
.brief-info p.anrede-n { align-items: flex-start; }
.hinweise ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: var(--text-sm); display: grid; gap: 0.2rem; }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); }
.brief-info .i, .sheet-panel .i { vertical-align: -2px; }

/* Freigabe ungültig (Demo nach dem Ja verändert) */
.ungueltig-n { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--bad-bg); border: 1.5px solid var(--bad); font-size: var(--text-sm); }
.ungueltig-n .i { color: var(--bad); flex: none; margin-top: 0.05rem; }
.ungueltig-s h2 { color: var(--bad); }
.ungueltig-s .flist { box-shadow: 0 0 0 2px var(--bad); border-radius: var(--radius-lg); }
.fr-end .pill.keep { display: inline-flex; }
@media (max-width: 560px) { .fr-end .pill.keep { font-size: 0.75rem; padding: 0.2rem 0.55rem; } }
.brief-info p.small { display: flex; align-items: center; gap: 0.35rem; }

/* Warnungen der QA (sichtbar, nicht nur als Zahl) */
.qa-warn { margin-top: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-lift); }
.qa-warn h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; }
.qa-warn h2 .i { color: var(--warn); }
.qa-warn ul { list-style: none; margin: 0.6rem 0 0.4rem; padding: 0; display: grid; gap: 0.5rem; }
.qa-warn li { display: grid; gap: 0.1rem; padding-left: 0.75rem; border-left: 3px solid var(--warn); font-size: var(--text-sm); }
.qa-warn li.fehler { border-left-color: var(--bad); }
.qa-warn li span { color: var(--color-ink-muted); }

.pe-entwurf { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pe-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); min-height: 2.4rem; }
@media (max-width: 47.99rem) { .pe .row > .t { flex: 1 1 calc(100% - 3.5rem); min-width: 0; } .pe .t b { white-space: normal; } }
.bsp-n { margin-top: 0.75rem; }

/* Seite /verkauf (Assistent 4): Spickzettel, Einwände, Kundenfragen */
.vk-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0; }
.vk-nav .btn { flex: 1 1 auto; justify-content: center; }
.vk, .vk .vk-h { scroll-margin-top: 4.5rem; }
.vk .vk-p a { font-weight: 600; }
.vk > h2 { font-size: 1.375rem; margin-bottom: 0.75rem; }
.vk .vk-h { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; line-height: 1.3; }
.vk .vk-p { margin: 0 0 0.75rem; line-height: 1.55; }
.vk .vk-list { margin: 0 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.4rem; line-height: 1.5; }
.vk .vk-scroll { overflow-x: auto; margin: 0 0 0.75rem; }
.vk .vk-table th, .vk .vk-table td { padding: 0.55rem 0.75rem 0.55rem 0; }
.vk .vk-table td:first-child { font-weight: 600; white-space: nowrap; }
.vk .vk-table td:nth-child(2), .vk .vk-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vk code { font-size: 0.875em; background: var(--card-2); padding: 0.05em 0.3em; border-radius: 4px; }