/* ═══════════════════════════════════════════════════════════════════════════
   Vogelhaus — Design-Tokens

   Die Daten-Palette (Status, Sequential, Chrome/Ink) ist die validierte
   Referenz-Instanz der Visualisierungs-Richtlinie und wird UNVERÄNDERT
   übernommen — keine selbst erfundenen Hex-Werte auf Datenflächen.
   Die Markenfarben (--brand-*) sind Chrome, keine Datenkodierung, und
   sind deshalb bewusst von allen Status- und Serienfarben verschieden.

   Dark Mode ist ausgewählt, nicht umgerechnet: eigene Schritte aus denselben
   Rampen, deklariert unter beiden Scopes (OS-Einstellung + Theme-Schalter).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* Marke (Chrome) */
    --brand-900: #0e2c36;
    --brand-700: #17475a;
    --brand-500: #226b82;
    --brand-300: #7bb0bf;
    --brand-on: #ffffff;

    /* Flächen & Schrift */
    --surface-1: #fcfcfb;
    --surface-2: #f4f4f1;
    --page: #f9f9f7;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --gridline: #e1e0d9;
    --baseline: #c3c2b7;
    --border: rgba(11, 11, 11, 0.10);
    --delta-up-good: #006300;

    /* Status — fest, nie gethemt. Trägt Bedeutung immer mit Icon + Label. */
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #d03b3b;

    /* Schrift auf Status-Fläche (nach Luminanz der Füllung gewählt) */
    --on-good: #ffffff;
    --on-warning: #0b0b0b;
    --on-serious: #0b0b0b;
    --on-critical: #ffffff;

    /* Sequential (Magnitude): eine Hue, hell → dunkel */
    --seq-100: #cde2fb;
    --seq-250: #86b6ef;
    --seq-450: #2a78d6;
    --seq-550: #1c5cab;

    /* Serie 1 — einzige Datenserie im Cashflow */
    --series-1: #2a78d6;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(11, 11, 11, 0.04), 0 1px 8px rgba(11, 11, 11, 0.04);
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;

        --brand-900: #0b232b;
        --brand-700: #1d5a70;
        --brand-500: #3d8ba3;
        --brand-300: #9ac9d6;

        --surface-1: #1a1a19;
        --surface-2: #232322;
        --page: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --gridline: #2c2c2a;
        --baseline: #383835;
        --border: rgba(255, 255, 255, 0.10);
        --delta-up-good: #0ca30c;

        --seq-100: #184f95;
        --seq-250: #256abf;
        --seq-450: #3987e5;
        --seq-550: #86b6ef;

        --series-1: #3987e5;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand-900: #0b232b;
    --brand-700: #1d5a70;
    --brand-500: #3d8ba3;
    --brand-300: #9ac9d6;

    --surface-1: #1a1a19;
    --surface-2: #232322;
    --page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --delta-up-good: #0ca30c;

    --seq-100: #184f95;
    --seq-250: #256abf;
    --seq-450: #3987e5;
    --seq-550: #86b6ef;

    --series-1: #3987e5;
}

html, body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--page);
    color: var(--text-primary);
}

/* ── Karten ─────────────────────────────────────────────────────────────── */

.vh-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

.vh-card--flush { padding: 0; overflow: hidden; }

.vh-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.vh-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.vh-card__sub {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.vh-section-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--text-primary);
}

.vh-section-sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

/* ── Hero-Figur: genau eine pro Ansicht ─────────────────────────────────── */

.vh-hero__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.vh-hero__value {
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    /* Proportionale Ziffern: tabular-nums lässt große Zahlen locker wirken. */
}

.vh-hero__meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* ── Stat-Tiles ─────────────────────────────────────────────────────────── */

.vh-tile {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.vh-tile__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.vh-tile__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
}

.vh-tile__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.vh-tile__delta {
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
}

.vh-tile__delta--good { color: var(--delta-up-good); }
.vh-tile__delta--bad { color: var(--status-critical); }

.vh-tile__foot {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Status: Farbe nie allein — immer Icon + Label ──────────────────────── */

.vh-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-primary);
    white-space: nowrap;
}

.vh-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 2px var(--surface-1);
}

.vh-status .mud-icon-root { font-size: 1rem; }

.vh-status--good .vh-status__dot { background: var(--status-good); }
.vh-status--warning .vh-status__dot { background: var(--status-warning); }
.vh-status--serious .vh-status__dot { background: var(--status-serious); }
.vh-status--critical .vh-status__dot { background: var(--status-critical); }

.vh-status--good .mud-icon-root { color: var(--status-good); }
.vh-status--warning .mud-icon-root { color: var(--status-warning); }
.vh-status--serious .mud-icon-root { color: var(--status-serious); }
.vh-status--critical .mud-icon-root { color: var(--status-critical); }

/* ── Vogelperspektive: Belegungsraster ─────────────────────────────────────
   Bewusst neutrale Karten mit kleiner Statusmarke (Leiste + Icon + Label)
   statt großer gesättigter Blöcke — gesättigte Flächen sind für kleine
   Marken und Akzente, nicht für Kacheln in Handflächengröße.            */

.vh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 10px;
}

.vh-unit {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 4px solid var(--baseline);
    border-radius: var(--radius-sm);
    padding: 11px 12px 12px 13px;
    /* Trefferfläche deutlich über der Marke: die ganze Kachel ist klickbar. */
    min-height: 92px;
    cursor: pointer;
    transition: box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
    color: inherit;
    font: inherit;
}

.vh-unit:hover,
.vh-unit:focus-visible {
    box-shadow: 0 2px 10px rgba(11, 11, 11, 0.10);
    transform: translateY(-1px);
    background: var(--surface-2);
    outline: none;
}

.vh-unit:focus-visible { border-color: var(--brand-500); }

.vh-unit--good { border-left-color: var(--status-good); }
.vh-unit--warning { border-left-color: var(--status-warning); }
.vh-unit--serious { border-left-color: var(--status-serious); }
.vh-unit--critical { border-left-color: var(--status-critical); }
.vh-unit--empty { border-left-color: var(--baseline); background: var(--surface-2); }

.vh-unit__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.vh-unit__tenant {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-unit__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.vh-unit__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    margin-top: 7px;
    color: var(--text-secondary);
}

.vh-unit__state .mud-icon-root { font-size: 0.9375rem; }
.vh-unit--good .vh-unit__state .mud-icon-root { color: var(--status-good); }
.vh-unit--warning .vh-unit__state .mud-icon-root { color: var(--status-warning); }
.vh-unit--serious .vh-unit__state .mud-icon-root { color: var(--status-serious); }
.vh-unit--critical .vh-unit__state .mud-icon-root { color: var(--status-critical); }

/* ── Meter (Ratio gegen eine Grenze) ───────────────────────────────────────
   Track = hellerer Schritt derselben Rampe, damit der Zustand über die
   ganze Breite lesbar bleibt.                                            */

.vh-meter { display: flex; flex-direction: column; gap: 6px; }

.vh-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.vh-meter__value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.vh-meter__track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--seq-100);
    overflow: hidden;
}

.vh-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--seq-450);
}

.vh-meter__fill--warning { background: var(--status-warning); }
.vh-meter__fill--critical { background: var(--status-critical); }

.vh-meter__foot { font-size: 0.75rem; color: var(--text-muted); }

/* ── Cashflow-Diagramm ─────────────────────────────────────────────────── */

.vh-chart { position: relative; width: 100%; }
.vh-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.vh-chart__grid { stroke: var(--gridline); stroke-width: 1; }
.vh-chart__axis { stroke: var(--baseline); stroke-width: 1; }
.vh-chart__tick { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.vh-chart__area { fill: var(--series-1); opacity: 0.10; }
.vh-chart__line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vh-chart__dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.vh-chart__ref { stroke: var(--baseline); stroke-width: 1; }
.vh-chart__ref-label { fill: var(--text-secondary); font-size: 11px; }
.vh-chart__endlabel { fill: var(--text-primary); font-size: 12px; font-weight: 600; }
.vh-chart__crosshair { stroke: var(--baseline); stroke-width: 1; opacity: 0; }
.vh-chart__hit { fill: transparent; cursor: crosshair; }

.vh-tooltip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(11, 11, 11, 0.14);
    padding: 8px 10px;
    font-size: 0.8125rem;
    min-width: 132px;
    z-index: 5;
    transition: opacity 90ms ease;
}

.vh-tooltip__month { color: var(--text-secondary); font-size: 0.75rem; margin-bottom: 4px; }

.vh-tooltip__row {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
}

.vh-tooltip__key { width: 12px; height: 2px; border-radius: 2px; background: var(--series-1); flex: none; }
.vh-tooltip__name { color: var(--text-secondary); }
.vh-tooltip__val { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Feed ───────────────────────────────────────────────────────────────── */

.vh-feed { display: flex; flex-direction: column; }

.vh-feed__item {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}

.vh-feed__item:first-child { border-top: none; }
.vh-feed__item:hover { background: var(--surface-2); }

.vh-feed__icon { flex: none; margin-top: 1px; }
.vh-feed__icon .mud-icon-root { font-size: 1.125rem; }
.vh-feed__icon--good .mud-icon-root { color: var(--status-good); }
.vh-feed__icon--warning .mud-icon-root { color: var(--status-warning); }
.vh-feed__icon--serious .mud-icon-root { color: var(--status-serious); }
.vh-feed__icon--critical .mud-icon-root { color: var(--status-critical); }

.vh-feed__body { min-width: 0; }
.vh-feed__text { font-size: 0.8125rem; color: var(--text-primary); }
.vh-feed__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Tabellen-Zwilling (jede Grafik ist auch als Tabelle lesbar) ────────── */

.vh-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.vh-table th, .vh-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.vh-table th { color: var(--text-secondary); font-weight: 600; }
.vh-table td.num, .vh-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vh-table tbody tr:hover { background: var(--surface-2); }

.vh-tableview { margin-top: 12px; }
.vh-tableview summary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
}
.vh-tableview summary:hover { color: var(--text-primary); }

/* ── Login ──────────────────────────────────────────────────────────────── */

.vh-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--page);
}

.vh-login__stage {
    background: linear-gradient(155deg, var(--brand-900), var(--brand-700) 65%, var(--brand-500));
    color: var(--brand-on);
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vh-login__form { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.vh-login__form-inner { width: 100%; max-width: 372px; }

.vh-login__claim { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.vh-login__lead { font-size: 0.9375rem; opacity: 0.88; margin-top: 12px; max-width: 42ch; line-height: 1.55; }
.vh-login__points { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.vh-login__points li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.875rem; opacity: 0.92; }

@media (max-width: 900px) {
    .vh-login { grid-template-columns: 1fr; }
    .vh-login__stage { padding: 32px 24px; }
}

/* ── Marke ──────────────────────────────────────────────────────────────── */

.vh-brand { display: inline-flex; align-items: center; gap: 10px; }
.vh-brand__mark { flex: none; }
.vh-brand__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.vh-brand__name--light { color: var(--brand-on); }

/* ── Mieter-App-Rahmen (mobile Vorschau) ───────────────────────────────── */

.vh-phone {
    width: 360px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface-1);
    box-shadow: 0 8px 32px rgba(11, 11, 11, 0.12);
    overflow: hidden;
}

.vh-phone__bar {
    background: var(--brand-700);
    color: var(--brand-on);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 0.9375rem;
}

.vh-phone__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.vh-chat { display: flex; flex-direction: column; gap: 8px; }

.vh-chat__msg {
    max-width: 84%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.vh-chat__msg--in { background: var(--surface-2); border: 1px solid var(--border); align-self: flex-start; }
.vh-chat__msg--out { background: var(--brand-700); color: var(--brand-on); align-self: flex-end; }
.vh-chat__meta { font-size: 0.6875rem; color: var(--text-muted); margin-top: 3px; }

/* ── Kanban (Techniker-Tool) ───────────────────────────────────────────── */

.vh-kanban {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    gap: 12px;
    align-items: start;
}

.vh-kanban__col {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    min-height: 120px;
}

.vh-kanban__head {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vh-kanban__card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--baseline);
    border-radius: var(--radius-sm);
    padding: 10px 11px;
    margin-bottom: 8px;
}

.vh-kanban__card--good { border-left-color: var(--status-good); }
.vh-kanban__card--warning { border-left-color: var(--status-warning); }
.vh-kanban__card--serious { border-left-color: var(--status-serious); }
.vh-kanban__card--critical { border-left-color: var(--status-critical); }

.vh-kanban__title { font-size: 0.8125rem; font-weight: 600; }
.vh-kanban__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; }

/* ── Preis-Karten ──────────────────────────────────────────────────────── */

.vh-plan { display: flex; flex-direction: column; height: 100%; }
.vh-plan__price { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.vh-plan__unit { font-size: 0.8125rem; color: var(--text-secondary); }
.vh-plan__features { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.vh-plan__features li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; color: var(--text-secondary); }
.vh-plan__features .mud-icon-root { font-size: 1rem; color: var(--status-good); flex: none; margin-top: 1px; }

/* ── Prototyp-Hinweisband ──────────────────────────────────────────────── */

.vh-protobar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 7px 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vh-protobar .mud-icon-root { font-size: 1rem; color: var(--text-muted); }

/* Tabellen/Karten dürfen nie die Seite horizontal scrollen lassen. */
.vh-scroll-x { overflow-x: auto; }

/* Zweispaltige Dashboard-Fläche bricht auf schmalen Schirmen um. */
@media (max-width: 1180px) {
    .vh-dash { grid-template-columns: 1fr !important; }
}

.vh-spark { display: block; }

/* ── Formularfelder für serverseitig gerenderte Seiten ─────────────────────
   Die Anmeldung kann keine interaktiven MudBlazor-Felder verwenden: sie wird
   statisch gerendert und per Formular abgeschickt, damit das Anmelde-Cookie
   überhaupt gesetzt werden kann. Deshalb eigene, schlichte Feldstile.      */

.vh-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.vh-field > label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.vh-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--surface-1);
    border: 1px solid var(--baseline);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.vh-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

.vh-input::placeholder { color: var(--text-muted); }

.vh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 18px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brand-on);
    background: var(--brand-700);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 120ms ease;
}

.vh-btn:hover { background: var(--brand-900); }
.vh-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-500) 45%, transparent); outline-offset: 2px; }

.vh-btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border);
    width: auto;
    font-weight: 500;
}

.vh-btn--ghost:hover { background: var(--surface-2); }

.vh-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.vh-formnote {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
}

.vh-formnote--error {
    border-color: color-mix(in srgb, var(--status-critical) 40%, var(--border));
    background: color-mix(in srgb, var(--status-critical) 8%, var(--surface-1));
    color: var(--text-primary);
}

.vh-formnote--good {
    border-color: color-mix(in srgb, var(--status-good) 40%, var(--border));
    background: color-mix(in srgb, var(--status-good) 8%, var(--surface-1));
    color: var(--text-primary);
}

.vh-formnote .mud-icon-root { font-size: 1.125rem; flex: none; margin-top: 1px; }
.vh-formnote--error .mud-icon-root { color: var(--status-critical); }
.vh-formnote--good .mud-icon-root { color: var(--status-good); }

.vh-validation { color: var(--status-critical); font-size: 0.8125rem; }

/* Kopierbarer Einladungslink */
.vh-token {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    word-break: break-all;
    color: var(--text-primary);
}

.vh-centerpage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: var(--page);
}

.vh-centerpage__card { width: 100%; max-width: 440px; }