/* Solar-Kunden: ruhiges, sachliches Design nach der Marke HelioQ (Petrolblau + Sonnenorange).
   Dunkel ist die Grundgestaltung; wer das System auf Hell stellt, bekommt die helle Fassung. */

:root {
  --bg: #10171a;
  --surface: #1a2327;
  --surface-2: #151d20;
  --ink: #e9eeee;
  --muted: #93a3a3;
  --line: #2b3639;
  --accent: #4491ac;
  --accent-ink: #ffffff;
  --accent-soft: #1c333a;
  --sun: #ef9358;
  --danger: #ee8f86;
  --danger-soft: #3a2422;
  --focus: #6aa8f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);

  --badge-kunde-bg: #1d3a28;      --badge-kunde-ink: #8fd8a8;
  --badge-standort-bg: #1c3050;   --badge-standort-ink: #9dc0f2;
  --badge-erweiterung-bg: #43340f; --badge-erweiterung-ink: #f0cd7a;
  --badge-wechsel-bg: #33264f;    --badge-wechsel-ink: #c9b4f2;
  --badge-geplant-bg: #17373d;    --badge-geplant-ink: #8fd5e0;
  --badge-inbetrieb-bg: #4a2233;  --badge-inbetrieb-ink: #f3a8c3;

  --radius: 10px;
  --gap: 16px;
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f5f1;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --ink: #1f2a2e;
    --muted: #5f6c6c;
    --line: #e3e0d7;
    --accent: #33768c;
    --accent-ink: #ffffff;
    --accent-soft: #e4eff2;
    --sun: #e07c33;
    --danger: #a3372f;
    --danger-soft: #fbeae8;
    --focus: #2a7de1;
    --shadow: 0 1px 2px rgba(31, 42, 46, 0.06), 0 4px 14px rgba(31, 42, 46, 0.05);
    --badge-kunde-bg: #e3f3e8;      --badge-kunde-ink: #17612f;
    --badge-standort-bg: #e2edfb;   --badge-standort-ink: #1c4a94;
    --badge-erweiterung-bg: #fcefd0; --badge-erweiterung-ink: #7c5100;
    --badge-wechsel-bg: #ede6fa;    --badge-wechsel-ink: #532f93;
    --badge-geplant-bg: #dcf1f3;    --badge-geplant-ink: #0b5b66;
    --badge-inbetrieb-bg: #fbe3ec;  --badge-inbetrieb-ink: #8c1f4a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* gilt auch dort, wo eine Klasse display setzt */
html { color-scheme: dark light; }
body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* Kopf */
.demo-banner { background: var(--erweiterung, #fcefd0); background: var(--badge-erweiterung-bg); color: var(--badge-erweiterung-ink); text-align: center; padding: 6px 16px; font-size: 0.9rem; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar__inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 28px; min-height: 56px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; text-decoration: none; letter-spacing: 0.01em; }
.brand__logo { height: 24px; width: auto; display: block; }
.brand__product { padding-left: 10px; border-left: 1px solid var(--line); font-size: 0.92rem; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; } /* Administratoren haben zwei Punkte mehr: auf dem Handy umbrechen statt seitlich scrollen */
.nav a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.stamp { margin-left: auto; font-size: 0.85rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* Inhalt */
main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 40px; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card--pad { padding: 16px 18px; }
.stack { display: grid; gap: var(--gap); }
.stack > * { min-width: 0; } /* breite Tabellen scrollen in sich, statt die Seite zu verbreitern */

.footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.82rem; padding: 14px 20px 18px; }
.footer p { max-width: 1240px; margin: 0 auto 4px; }
.footer__meta { opacity: 0.85; }

/* Filter */
.filters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; align-items: end; padding: 14px 16px; }
.filters > .field { grid-column: span 12; }
.field { display: grid; gap: 4px; min-width: 0; }
.field > label, .field > .label { font-size: 0.78rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.field--action { justify-items: end; }
@media (min-width: 901px) {
  .filters > .col-2 { grid-column: span 2; }
  .filters > .col-3 { grid-column: span 3; }
  .filters > .col-4 { grid-column: span 4; }
  .filters > .col-5 { grid-column: span 5; }
  .filters > .col-6 { grid-column: span 6; }
}
@media (min-width: 560px) and (max-width: 900px) {
  .filters > .field { grid-column: span 6; }
}
input[type="text"], input[type="search"], input[type="date"], input[type="email"], input[type="password"], select, .multi > summary {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; min-height: 36px;
}
input::placeholder { color: var(--muted); opacity: 0.8; }
input:hover, select:hover, .multi > summary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.range span { color: var(--muted); }

.multi { position: relative; }
.multi > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: "▾"; color: var(--muted); }
.multi[open] > summary { border-color: var(--accent); }
.multi__panel { position: absolute; z-index: 30; left: 0; right: 0; min-width: 230px; margin-top: 4px; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; }
.multi__panel label { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.multi__panel label:hover { background: var(--surface-2); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { border: 0; background: var(--surface); color: var(--muted); padding: 7px 12px; font: inherit; cursor: pointer; min-height: 36px; white-space: nowrap; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.btn { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 7px 14px; min-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--accent); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 4px 0; color: var(--muted); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.badge--kunde { background: var(--badge-kunde-bg); color: var(--badge-kunde-ink); }
.badge--standort { background: var(--badge-standort-bg); color: var(--badge-standort-ink); }
.badge--erweiterung { background: var(--badge-erweiterung-bg); color: var(--badge-erweiterung-ink); }
.badge--wechsel { background: var(--badge-wechsel-bg); color: var(--badge-wechsel-ink); }
.badge--geplant { background: var(--badge-geplant-bg); color: var(--badge-geplant-ink); }
.badge--inbetrieb { background: var(--badge-inbetrieb-bg); color: var(--badge-inbetrieb-ink); }
.badge--neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge--neutral::before { display: none; }

/* Kennzahlen */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 150px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.chip__num { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; }
.kpi__label { color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.kpi__value { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Tabellen (Tabulator) */
.tabulator { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.93rem; color: var(--ink); }
.tabulator .tabulator-header { background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.tabulator .tabulator-header .tabulator-col { background: transparent; border-right: 0; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 9px 10px; }
.tabulator .tabulator-header .tabulator-col-title { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--accent-soft); }
.tabulator .tabulator-tableholder .tabulator-table { background: transparent; color: var(--ink); }
.tabulator-row { background: var(--surface); border-bottom: 1px solid var(--line); min-height: 40px; color: var(--ink); }
.tabulator-row.tabulator-row-even { background: var(--surface); }
.tabulator-row:hover, .tabulator-row.tabulator-selectable:hover { background: var(--surface-2); }
.tabulator-row.is-active { background: var(--accent-soft); }
.tabulator-row .tabulator-cell { border-right: 0; padding: 9px 10px; }
.tabulator-row .tabulator-cell.wrap { white-space: normal; overflow-wrap: anywhere; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { opacity: 0.85; }
.tabulator .tabulator-header .tabulator-col[aria-sort="none"] .tabulator-col-sorter { opacity: 0.28; }
.tabulator .tabulator-footer { background: var(--surface-2); border-top: 1px solid var(--line); color: var(--muted); }
.tabulator .tabulator-footer .tabulator-page, .tabulator .tabulator-footer .tabulator-page-size { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.tabulator .tabulator-footer .tabulator-page.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tabulator .tabulator-footer .tabulator-page:disabled { opacity: 0.45; }
/* Tabulator haengt Beschriftung + Dropdown fuer "Zeilen pro Seite" VOR die Seitenzahlen in denselben,
   rechtsbuendigen Block; per flex+order wandern sie hinter die Seitenzahlen, ganz an den rechten Rand,
   und der Dropdown bleibt klein statt die Blaettern-Knoepfe optisch zu dominieren. */
.tabulator .tabulator-footer .tabulator-paginator { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; }
.tabulator .tabulator-footer .tabulator-paginator > label { order: 2; flex: 0 0 auto; margin-left: 14px; font-size: 0.82em; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size { order: 3; flex: 0 0 auto; width: auto; font-size: 0.82em; padding: 2px 20px 2px 6px; height: 26px; }
.tabulator .tabulator-placeholder span { color: var(--muted); font-weight: 500; font-size: 1rem; }
.cell-sub { display: block; color: var(--muted); font-size: 0.82rem; }
.cell-strong { font-weight: 600; }

/* Karte */
/* Absichtlich hell (wie Leaflets eigene Vorgabe #ddd), auch im dunklen Design: das ist die Flaeche, die durchscheint,
   solange eine Kachel noch laedt oder (Netz, Anbieter) ausbleibt. Mit der dunklen Seitenfarbe wirkte ein fehlendes
   Stueck wie ein Absturz statt wie eine ladende Karte, besonders beim Reinzoomen mit vielen Kacheln auf einmal. */
.map { height: 460px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #ddd; z-index: 0; }
.map--tall { height: calc(100vh - 330px); min-height: 420px; }
.map-note { color: var(--muted); font-size: 0.88rem; padding: 8px 2px 0; }
/* Cluster in den Farben der App statt Gelb/Orange/Gruen. Das Popup selbst bleibt hell (Leaflet-Vorgabe), unabhaengig
   vom Farbschema der App, deshalb feste statt variable Farben fuer seinen Text. */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: color-mix(in srgb, #4491ac 28%, transparent); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: #4491ac; color: #ffffff; font-weight: 600; }
.leaflet-popup-content { margin: 12px 14px; font-family: inherit; color: #1f2a2e; }
.leaflet-popup-content a { color: #33768c; font-weight: 600; }
.popup__sub { color: #5f6c6c; font-size: 0.85rem; }

/* Detail */
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.crumbs { margin-bottom: 8px; font-size: 0.9rem; }
.notice { padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); }
.notice--error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.empty { text-align: center; padding: 56px 20px; }
.empty h1 { margin-bottom: 8px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; align-items: baseline; padding: 9px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .field--wide { grid-column: span 1; }
  .stamp { margin-left: 0; }
}
@media print {
  .topbar, .filters, .toolbar, .footer .footer__meta { display: none; }
}

/* Anmeldung und Konto */
.account { display: flex; align-items: center; gap: 8px; margin-left: 12px; font-size: 0.88rem; }
.stamp[hidden] + .account { margin-left: auto; }
.account a { color: var(--muted); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account a:hover { color: var(--ink); text-decoration: underline; }
.btn--small { min-height: 30px; padding: 3px 10px; font-size: 0.85rem; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }
.btn[disabled], button[disabled] { opacity: 0.55; cursor: not-allowed; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hint { font-size: 0.85rem; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.92rem; }
.notice--ok { background: var(--badge-kunde-bg); color: var(--badge-kunde-ink); border-color: color-mix(in srgb, var(--badge-kunde-ink) 30%, transparent); }
.narrow { max-width: 460px; }
.account-form { display: grid; gap: 14px; margin-top: 12px; }

.auth { width: 100%; max-width: 440px; margin: 9vh auto 40px; padding: 0 16px; flex: 1; }
.auth__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; font-size: 1.2rem; font-weight: 650; }
.auth__brand img { height: 34px; width: auto; display: block; }
.auth h1 { margin-bottom: 6px; }
.auth form { display: grid; gap: 14px; margin-top: 14px; }
.auth__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.auth .hint { margin: 12px 0 0; }

/* Benutzerverwaltung */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.invite-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; margin-top: 12px; }
.invite-form .field--action { display: flex; align-items: center; gap: 14px; justify-items: initial; }
.table-wrap { overflow-x: auto; }
.users { width: 100%; border-collapse: collapse; }
.users th, .users td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.users tbody tr:last-child td { border-bottom: 0; }
.users th { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.users select { min-width: 140px; min-height: 32px; padding: 3px 8px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.linkbox { padding: 14px 16px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.linkbox p { margin: 0 0 10px; }
.linkbox .hint { margin: 8px 0 0; }
.linkbox .hint:empty { display: none; }
.linkbox__row { display: flex; gap: 8px; }
.linkbox__row input { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; }
.linkbox__row .btn { white-space: nowrap; }
.linkbox__row--wrap { flex-wrap: wrap; }
.linkbox__row--wrap input { flex: 1 1 220px; min-width: 0; }
@media (max-width: 700px) {
  /* Benutzertabelle: jede Zeile wird eine Karte, damit nichts seitlich versteckt ist */
  .users thead { display: none; }
  .users, .users tbody, .users tr, .users td { display: block; }
  .users tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .users tbody tr:last-child { border-bottom: 0; }
  .users td { border: 0; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .users td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; font-weight: 600; flex: none; }
  .users td:first-child { display: block; padding-bottom: 6px; }
  .users td:last-child { display: block; padding-top: 8px; }
  .users td:has(.row-actions:empty) { display: none; } /* eigene Zeile: keine Aktionen, keine leere Beschriftung */
  .invite-form { grid-template-columns: minmax(0, 1fr); }
  .invite-form .field--action { flex-wrap: wrap; }
  .account a { max-width: 120px; }
}

/* E-Mail-Einstellungen (Administratoren) */
.mail-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: 14px 16px; margin-top: 12px; align-items: start; }
.mail-form .field--wide { grid-column: 1 / -1; }
.mail-form__actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.mail-notes { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.mail-notes li { margin-bottom: 4px; }
@media (max-width: 700px) {
  .mail-form { grid-template-columns: minmax(0, 1fr); }
}

/* Zwei-Faktor-Einrichtung */
.qr-box { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 18px; }
.qr { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.key { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; letter-spacing: 0.06em; word-break: break-all; margin: 4px 0 10px; }
.steps { margin: 6px 0 4px; padding-left: 20px; color: var(--muted); }
.steps li { margin-bottom: 4px; }
.recovery-codes { list-style: none; margin: 14px 0; padding: 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; }
@media print { .recovery-codes { border: 1px solid #000; } }

/* Datenlauf (Admin) */
.pipeline-card { margin-bottom: var(--gap); }
.pipeline-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pipeline-card .muted { margin: 8px 0 0; }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.progress__fill { height: 100%; width: 0%; background: var(--accent); border-radius: inherit; transition: width 0.6s ease; }
.progress--laeuft .progress__fill {
  background-image: linear-gradient(135deg, var(--accent) 25%, var(--sun) 25%, var(--sun) 50%,
    var(--accent) 50%, var(--accent) 75%, var(--sun) 75%);
  background-size: 28px 28px;
  animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }

/* Seite "Link abgelaufen" */
.expired { text-align: left; }
.expired__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 12px; background: var(--badge-erweiterung-bg); color: var(--badge-erweiterung-ink); }
.expired h1 { margin-bottom: 8px; }
.expired p { margin: 0 0 10px; }
.expired__reasons { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.expired__reasons li { margin-bottom: 4px; }
.expired .auth__actions { margin-top: 16px; }