/* ============================================================
   pro-Register — Fluent-inspiriertes Haus-Design-System
   (Token-Satz aus docs/DesignRules.md; UI-Sprache Deutsch)
   ============================================================ */

:root {
    /* Flächen / Rahmen */
    --bg: #F5F5F5;                 /* Seiten-Hintergrund */
    --surface: #FFFFFF;            /* Karten / Panels */
    --surface-muted: #FAFAFA;      /* Kachel-/Sektions-Hintergrund */
    --stroke: #ECECEC;             /* Kartenrahmen */
    --stroke-divider: #F0F0F0;     /* feine Trennlinien */
    --stroke-input: #D9D9D9;       /* Eingabefeld-Rahmen */
    --row-hover: #FAFCFF;          /* Tabellen-Zeilen-Hover */

    /* Text */
    --ink: #242424;                /* primär */
    --ink-soft: #616161;           /* sekundär */
    --ink-muted: #909090;          /* tertiär / muted */

    /* Marke */
    --brand: #0F6CBD;
    --brand-hover: #115EA3;
    --brand-tint: #EEF4FB;

    /* Status */
    --success: #0E7A3B;
    --success-tint: #E7F5EC;
    --warning: #A15C00;
    --warning-tint: #FFF2E0;
    --danger: #B3261E;
    --danger-tint: #FBECEC;

    /* Form / Elevation */
    --radius-sm: 6px;              /* Controls / Buttons */
    --radius-md: 10px;             /* Karten */
    --radius-lg: 14px;
    --radius-pill: 999px;

    --focus-ring: 0 0 0 2px rgba(15,108,189,.15);

    --shadow-2: 0 1px 2px rgba(0,0,0,.08);
    --shadow-4: 0 2px 4px rgba(0,0,0,.10);
    --shadow-8: 0 4px 8px rgba(0,0,0,.12);
    --shadow-card-hover: 0 2px 10px rgba(15,108,189,.09);

    /* Fonts */
    --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;

    /* Bootstrap-Link-Farben auf die Marke ziehen */
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-hover);
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

code, pre, .fl-mono {
    font-family: var(--font-mono);
}

.fl-upper { text-transform: uppercase; }
.fl-narrow { max-width: 260px; }
.fl-page-narrow { max-width: 900px; margin: 0 auto; }

/* Inhalts-Links (Buttons/Sidebar/Footer setzen eigene, spezifischere Farben) */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ---- Topbar (56px, sticky) -------------------------------- */
.fl-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid #E0E0E0;
    box-shadow: var(--shadow-2);
}

.fl-topbar-inner {
    max-width: 1360px;
    margin: 0 auto;
    height: 56px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.fl-brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.fl-brand span { color: var(--brand); }

.fl-topnav { display: flex; gap: 4px; align-items: center; height: 100%; }

.fl-topnav a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.fl-topnav a:hover { color: var(--brand); }
.fl-topnav a.active { color: var(--ink); border-bottom-color: var(--brand); }

.fl-topbar-user { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.fl-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.fl-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.fl-user-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.fl-user-org { font-size: 11px; color: var(--ink-soft); }

/* Avatar-Initialen (Topbar 32px, Tabellen 28px) */
.fl-avatar, .fl-user-chip {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: #E8F1FB;
    color: var(--brand);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.fl-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ---- Hauptbereich ------------------------------------------ */
.fl-main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 32px 48px;
    min-height: calc(100vh - 56px - 96px);
}

/* ---- Footer ------------------------------------------------- */
.fl-footer {
    border-top: 1px solid #E6E6E6;
    background: var(--surface);
}

.fl-footer-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fl-footer-links {
    list-style: none;
    display: flex;
    gap: 22px;
    padding: 0;
    margin: 0;
}

.fl-footer-links a, .fl-footer-copyright a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 13px;
}

.fl-footer-links a:hover { color: var(--brand); }

.fl-footer-copyright {
    font-size: 12.5px;
    color: var(--ink-muted);
}

/* ---- Buttons (32px Standard) -------------------------------- */
.btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--stroke-input);
    background: var(--surface);
    color: var(--ink);
}

.btn:hover { border-color: var(--brand); color: var(--brand); }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

.btn-subtle { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-subtle:hover { background: var(--brand-tint); color: var(--brand); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #922016; border-color: #922016; color: #fff; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---- Bootstrap-Formulare/Alerts fluent-getönt (app-weit) ---- */
.form-label { font-size: 12.5px; font-weight: 600; color: #424242; margin-bottom: 6px; }

.form-control, .form-select {
    min-height: 38px;
    border: 1px solid var(--stroke-input);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--ink);
    background-color: var(--surface);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Platz für den Dropdown-Pfeil (Bootstrap positioniert ihn rechts) */
.form-select { padding-right: 34px; }

textarea.form-control { min-height: auto; line-height: 1.5; }

.form-text { font-size: 12px; color: var(--ink-muted); margin-top: 5px; line-height: 1.45; }

.form-check-input { border-color: var(--stroke-input); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }

.alert { border-radius: var(--radius-md); border: 1px solid transparent; font-size: 13.5px; padding: 12px 16px; }
.alert-success { background: var(--success-tint); border-color: #CDEBD8; color: var(--success); }
.alert-danger  { background: var(--danger-tint);  border-color: #F3C9C6; color: var(--danger); }
.alert-warning { background: var(--warning-tint); border-color: #F3DDB8; color: var(--warning); }
.alert-info    { background: var(--brand-tint);   border-color: #CFE0F2; color: #35485C; }

/* ---- Seitenkopf --------------------------------------------- */
.fl-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.fl-page-head-main { min-width: 0; }
.fl-breadcrumb { font-size: 13px; color: var(--ink-muted); margin-bottom: 4px; }
.fl-breadcrumb a { color: var(--ink-muted); }
.fl-page-head h1, h1.fl-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.fl-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---- Cards -------------------------------------------------- */
.fl-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 20px;
    margin-bottom: 20px;
}

/* randlose Karte mit eigenen Sektionen (Grid/Listen mit Kopf/Fuß) */
.fl-card--flush { padding: 0; overflow: hidden; }

.fl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--stroke-divider);
}

.fl-card-header h2, .fl-card-title { margin: 0; font-size: 15px; font-weight: 700; }

.fl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--stroke-divider);
}

.fl-card-body { padding: 16px 20px; }

/* ---- KPI ---------------------------------------------------- */
.fl-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.fl-kpi {
    flex: 1 1 160px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 16px 18px;
}

.fl-kpi .value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fl-kpi .label { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* KPI-Kopf mit Farbpunkt (Einladungen) */
.fl-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fl-kpi-caption { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }

/* Klickbare KPI-Kacheln (Drilldown) */
a.fl-kpi { text-decoration: none; color: inherit; display: block; }
a.fl-kpi:hover { border-color: var(--brand); box-shadow: var(--shadow-4); }

/* ---- Highlight-Karten (Dashboard) --------------------------- */
.fl-highlight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }

.fl-highlight {
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 18px 20px 20px;
}

a.fl-highlight {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .15s, border-color .15s;
}

a.fl-highlight:hover { border-color: #CFE0F2; box-shadow: var(--shadow-card-hover); }

.fl-highlight-top { display: flex; align-items: center; justify-content: space-between; }
.fl-highlight-label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.fl-highlight-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700;
}
.fl-highlight-icon--brand { background: var(--brand-tint); color: var(--brand); }
.fl-highlight-icon--success { background: var(--success-tint); color: var(--success); }
.fl-highlight-icon--warning { background: var(--warning-tint); color: var(--warning); }
.fl-highlight-value {
    font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
    margin: 16px 0 8px; font-variant-numeric: tabular-nums;
}
.fl-highlight-hint { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.fl-highlight-hint.is-link { color: var(--brand); }

/* ---- Breakdown-Ministats ------------------------------------ */
.fl-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.fl-ministat {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; background: var(--surface-muted); border-radius: 8px;
}
.fl-ministat-value { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.fl-ministat-label { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

/* Farbpunkte */
.fl-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.fl-dot--sm { width: 8px; height: 8px; border-radius: 2px; }
.fl-dot--brand { background: var(--brand); }
.fl-dot--success { background: var(--success); }
.fl-dot--danger { background: var(--danger); }
.fl-dot--neutral { background: var(--ink-muted); }

/* ---- Segment-Control (Filter / Modus-Umschalter) ------------ */
.fl-segment { display: inline-flex; gap: 6px; align-items: center; background: var(--bg); border-radius: 8px; padding: 3px; }
.fl-segment button {
    border: none; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
    background: transparent; color: var(--ink-soft);
}
.fl-segment button:hover { color: var(--ink); }
.fl-segment button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-2); }

/* ---- Toolbar + Suche ---------------------------------------- */
.fl-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--stroke-divider); flex-wrap: wrap;
}
.fl-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 360px; }
.fl-search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--ink-muted); font-size: 14px; pointer-events: none;
}
.fl-search input {
    width: 100%; height: 36px; border: 1px solid var(--stroke-input); border-radius: 6px;
    padding: 0 12px 0 30px; font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--ink);
}
.fl-search input:focus { border-color: var(--brand); outline: none; box-shadow: var(--focus-ring); }
.fl-toolbar-count { margin-left: auto; font-size: 13px; color: var(--ink-muted); }

/* Seitengrößen-Pills */
.fl-page-sizes { display: flex; align-items: center; gap: 6px; }
.fl-page-sizes .lbl { font-size: 12.5px; color: var(--ink-muted); margin-right: 4px; }
.fl-page-sizes button {
    border: 1px solid #E0E0E0; background: var(--surface); color: var(--ink-soft);
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border-radius: 6px; padding: 4px 11px;
}
.fl-page-sizes button.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.fl-page-info { font-size: 12.5px; color: var(--ink-muted); }

/* ---- Fluent-Tabellen ---------------------------------------- */
.fl-table {
    width: 100%;
    font-size: 13.5px;
    border-collapse: collapse;
    background: var(--surface);
}

.fl-table th {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink-soft);
    text-align: left;
    padding: 10px 16px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--stroke-divider);
}

.fl-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #F4F4F4;
    vertical-align: middle;
}

.fl-table tbody tr:hover { background: var(--row-hover); }
.fl-table .fl-empty-cell { text-align: center; color: var(--ink-muted); padding: 40px 16px; }

/* ---- Pills (Status) ----------------------------------------- */
.fl-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.fl-pill.success { background: var(--success-tint); color: var(--success); }
.fl-pill.warning { background: var(--warning-tint); color: var(--warning); }
.fl-pill.danger  { background: var(--danger-tint);  color: var(--danger); }
.fl-pill.neutral { background: #F0F0F0; color: var(--ink-soft); }
.fl-pill.brand   { background: var(--brand-tint); color: var(--brand); }

/* ---- HTTP-Methoden-Badge (API-Test) ------------------------- */
.fl-method {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 4px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.fl-method--get { background: #E7F2FF; color: var(--brand); }
.fl-method--post { background: var(--success-tint); color: var(--success); }
.fl-method--put { background: var(--warning-tint); color: var(--warning); }
.fl-method--delete { background: var(--danger-tint); color: var(--danger); }

/* ---- Endpunkt-Buttons (API-Test) ---------------------------- */
.fl-endpoints { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-endpoint {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #E0E0E0; background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
    border-radius: 7px; padding: 7px 12px;
}
.fl-endpoint:hover { border-color: var(--brand); }
.fl-endpoint.active { border-color: var(--brand); background: var(--brand-tint); }

/* ---- Empty-State -------------------------------------------- */
.fl-empty { padding: 64px 24px 72px; text-align: center; }
.fl-empty-icon {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
    background: var(--brand-tint); display: flex; align-items: center; justify-content: center;
}
.fl-empty-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.fl-empty-text { font-size: 14px; color: var(--ink-soft); max-width: 380px; margin: 0 auto 22px; line-height: 1.5; }
.fl-empty--sm { padding: 48px 24px; }
.fl-empty--sm .fl-empty-icon { width: 60px; height: 60px; background: var(--bg); margin-bottom: 16px; }

/* ---- Callout ------------------------------------------------ */
.fl-callout {
    display: flex; gap: 12px; align-items: flex-start;
    border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;
    font-size: 13.5px; line-height: 1.55;
}
.fl-callout-icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.fl-callout--info { background: #F4F8FC; border: 1px solid #D9E6F4; color: #35485C; }
.fl-callout--info .fl-callout-icon { background: var(--brand); }
.fl-callout--danger { background: #FDF3F2; border: 1px solid #F4D5D2; border-left: 3px solid var(--danger); color: #5C1A15; }
.fl-callout--danger .fl-callout-icon { background: var(--danger); }
.fl-callout code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; }

/* ---- Sektions-Formular (Mandant anlegen/bearbeiten) --------- */
.fl-form-card {
    max-width: 780px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    margin-bottom: 20px;
}
.fl-form-section { padding: 20px 22px; border-bottom: 1px solid var(--stroke-divider); }
.fl-form-section:last-child { border-bottom: none; }
.fl-section-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-muted); margin-bottom: 16px;
}
.fl-check-card {
    display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
    padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--surface-muted);
}
.fl-check-card input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--brand); flex: 0 0 auto; }
.fl-check-title { display: block; font-size: 13.5px; font-weight: 600; }
.fl-form-actions {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--stroke-divider); background: var(--surface-muted);
}
.fl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl-grid-code { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
@media (max-width: 640px) { .fl-grid-2, .fl-grid-code { grid-template-columns: 1fr; } }

/* ---- API-Test-Konsole + Code-Panels ------------------------- */
.fl-console { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; }
.fl-console-col { display: flex; flex-direction: column; gap: 16px; }
.fl-console-response { position: sticky; top: 88px; }
@media (max-width: 900px) {
    .fl-console { grid-template-columns: 1fr; }
    .fl-console-response { position: static; }
}
.fl-code-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.fl-code {
    margin: 0 0 16px; background: var(--surface-muted); border: 1px solid var(--stroke-divider);
    border-radius: 6px; padding: 10px 12px; font-size: 12.5px; white-space: pre-wrap; word-break: break-all;
}
.fl-code--dark { background: #1E1E1E; color: #D4D4D4; border: none; margin: 0; }

/* ---- Admin-Layout (Sidebar 232px sticky, weißes Panel) ------ */
.fl-admin-grid {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 28px;
    align-items: start;
}

.fl-sidebar {
    position: sticky;
    top: 88px;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 8px;
}

.fl-sidebar-label {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.fl-sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.fl-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    color: #424242;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
}

.fl-sidebar a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex: 0 0 auto;
}

.fl-sidebar a:hover { background: var(--brand-tint); }

.fl-sidebar a.active {
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 600;
}

.fl-sidebar a.active::before { background: var(--brand); }

.fl-admin-content { min-width: 0; }

@media (max-width: 900px) {
    .fl-admin-grid { grid-template-columns: 1fr; }
    .fl-sidebar { position: static; }
    .fl-highlight-row { grid-template-columns: 1fr; }
    .fl-breakdown { grid-template-columns: 1fr 1fr; }
}

/* ---- DevExtreme-Grid an Fluent angleichen ------------------- */
.fl-card .dx-datagrid,
.fl-card--flush .dx-datagrid { background: var(--surface); color: var(--ink); }
.fl-card .dx-datagrid-headers,
.fl-card--flush .dx-datagrid-headers { background: var(--surface-muted); color: var(--ink-soft); }
.fl-card .dx-datagrid .dx-row > td,
.fl-card--flush .dx-datagrid .dx-row > td { border-color: #F4F4F4; }
.fl-card .dx-datagrid-rowsview .dx-row:hover > td,
.fl-card--flush .dx-datagrid-rowsview .dx-data-row:hover > td { background-color: var(--row-hover); }
.dx-datagrid .dx-link-danger { color: var(--danger); }

/* ---- Onboarding / schlanke, zentrierte Seiten --------------- */
.fl-onboarding {
    max-width: 560px;
    margin: 32px auto;
}

.fl-onboarding .fl-card { padding: 28px; }

.fl-onboarding h1 { font-size: 22px; margin-bottom: 4px; }

.fl-onboarding .subtitle { color: var(--ink-soft); margin-bottom: 20px; }