/* ============================================================================
   WiEReG-Meldungsassistent — Design-System (Warm-professionell)
   Farben: Petrol dunkel + Beige
   Font: Inter Variable (selbst-gehostet, OFL-1.1)
   Icons: Lucide SVG-Sprite (ISC)
   ============================================================================ */

/* ---------- Web-Font ---------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2-variations"),
         url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
    /* Farben — warm-professionell */
    --app-bg:        #f5f0e8;
    --card-bg:       #faf7f2;
    --elevated-bg:   #ffffff;
    --border:        #d4c5a8;
    --border-strong: #b8a888;

    --text:          #2c3e50;
    --text-muted:    #6b7d8c;
    --text-on-dark:  rgba(255,255,255,0.92);
    --text-on-dark-muted: rgba(255,255,255,0.7);

    --header-bg:     #2d3a3a;
    --accent:        #5d8a89;
    --accent-hover:  #4a7271;
    --accent-soft:   rgba(93,138,137,0.12);

    --success:       #2d6a4f;
    --success-soft:  #e1efe7;
    --warning:       #b8860b;
    --warning-soft:  #fbf3dd;
    --danger:        #9f3838;
    --danger-soft:   #f5dede;
    --info:          #3a6a8a;
    --info-soft:     #dde8f0;

    /* Typografie */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;

    /* Spacing (8-pt) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius / Schatten */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(45,58,58,0.06);
    --shadow-md: 0 2px 8px rgba(45,58,58,0.08);
    --shadow-lg: 0 8px 24px rgba(45,58,58,0.16);

    /* Übergänge */
    --t-fast: 0.12s ease;
    --t-med:  0.2s ease;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--app-bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4 {
    line-height: 1.3;
    color: var(--text);
    font-weight: 600;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p { line-height: 1.55; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, pre {
    font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
    font-size: 0.92em;
}

/* ---------- Layout ---------- */
header {
    background: var(--header-bg);
    color: var(--text-on-dark);
    padding: 0 var(--space-5);
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    gap: var(--space-4);
}
.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.logo {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-on-dark);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.logo:hover { color: var(--text-on-dark); text-decoration: none; }

.zurueck-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.zurueck-link:hover {
    color: var(--text-on-dark);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}
.zurueck-link .icon { width: 14px; height: 14px; }

nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
nav a {
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
nav a:hover {
    color: var(--text-on-dark);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}

main {
    max-width: 1200px;
    margin: var(--space-5) auto;
    padding: 0 var(--space-4);
    flex: 1;
    width: 100%;
}

footer {
    text-align: center;
    padding: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: var(--space-6);
}

/* ---------- Icons (Lucide-Sprite) ---------- */
.icon {
    display: inline-block;
    vertical-align: -2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* ---------- Karten ---------- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.card-header {
    margin-bottom: var(--space-3);
}
.card-header h2,
.card-header h3 {
    color: var(--text);
}
.card-info {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    line-height: 1.55;
}
.card-actions {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

.btn-secondary {
    background: var(--elevated-bg);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--app-bg); color: var(--text); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }

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

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-success:hover { background: #1f5238; border-color: #1f5238; color: #fff; }

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}
.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-md);
}

.btn-icon-only {
    padding: var(--space-2);
    width: 32px;
    height: 32px;
}
.btn-icon-only.btn-sm {
    padding: var(--space-1);
    width: 26px;
    height: 26px;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    padding: 0;
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: none;
}
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge .icon { width: 12px; height: 12px; }

.badge-neutral   { background: var(--app-bg);        color: var(--text-muted);  border-color: var(--border); }
.badge-info      { background: var(--info-soft);     color: var(--info); }
.badge-success   { background: var(--success-soft);  color: var(--success); }
.badge-warning   { background: var(--warning-soft);  color: var(--warning); }
.badge-danger    { background: var(--danger-soft);   color: var(--danger); }
.badge-accent    { background: var(--accent-soft);   color: var(--accent-hover); }

/* Fall-Klassifikation */
.badge-fall-A { background: var(--success-soft); color: var(--success); border-color: rgba(45,106,79,0.25); }
.badge-fall-B { background: var(--info-soft);    color: var(--info);    border-color: rgba(58,106,138,0.25); }
.badge-fall-D { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(159,56,56,0.25); }
.badge-fall-X { background: var(--app-bg);       color: var(--text-muted); border-color: var(--border); }
.badge-fall-FEHLER { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---------- Tabellen ---------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--elevated-bg);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.table thead th {
    background: var(--card-bg);
    color: var(--text);
    font-weight: 600;
    text-align: left;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table--hoverable tbody tr { transition: background var(--t-fast); }
.table--hoverable tbody tr:hover { background: var(--card-bg); }
.table--compact thead th,
.table--compact tbody td { padding: var(--space-2); }

.table .text-right { text-align: right; }
.table .text-center { text-align: center; }
.table .text-muted { color: var(--text-muted); }
.table .num { font-variant-numeric: tabular-nums; }

/* ---------- Alerts / Hinweise ---------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    font-size: var(--text-sm);
    line-height: 1.55;
    margin-bottom: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.alert .icon { margin-top: 2px; flex-shrink: 0; }
.alert-info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning); color: #6b5008; }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }

/* Flash-Nachrichten (Flask) */
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    border-left: 3px solid;
}
.flash-erfolg  { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.flash-fehler  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.flash-warnung { background: var(--warning-soft); border-color: var(--warning); color: #6b5008; }

/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.feld label,
.label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
}
.eingabe,
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="date"], input[type="password"], select, textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    background: var(--elevated-bg);
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.eingabe:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.formular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.feld-breit { grid-column: 1 / -1; }

.trenner { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.hinweis {
    background: var(--card-bg);
    border-left: 3px solid var(--accent);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

/* ---------- Modal (Standard-System) ---------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(45,58,58,0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.modal-overlay.is-open { display: flex; }
.modal {
    background: var(--elevated-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in 0.18s ease;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.modal--wide  { max-width: 900px; }
.modal--xwide { max-width: 1400px; }

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.modal-header h2,
.modal-header h3 { margin: 0; }
.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--app-bg); color: var(--text); }

/* ---------- Status-Pille (DocuSign etc.) ---------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid;
}
.status-pill .icon { width: 12px; height: 12px; }
.status-pill-sent      { background: var(--accent-soft);  color: var(--accent-hover); border-color: rgba(93,138,137,0.3); }
.status-pill-delivered { background: var(--info-soft);    color: var(--info);         border-color: rgba(58,106,138,0.3); }
.status-pill-completed { background: var(--success-soft); color: var(--success);      border-color: rgba(45,106,79,0.3); }
.status-pill-declined  { background: var(--danger-soft);  color: var(--danger);       border-color: rgba(159,56,56,0.3); }
.status-pill-voided    { background: var(--app-bg);       color: var(--text-muted);   border-color: var(--border); }

/* ---------- Spinner ---------- */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Utility ---------- */
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-bold    { font-weight: 600; }
.text-mono    { font-family: "SF Mono", "Cascadia Code", "Consolas", monospace; font-variant-numeric: tabular-nums; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Hervorhebung Marker-Phrasen (von Jinja-Filter) */
.k-hl-rot {
    color: var(--danger);
    font-weight: 600;
}

/* ============================================================================
   Legacy-Komponenten — Einzelmeldung-Wizard + Änderungs-Check
   Werden iterativ in das neue Komponenten-System überführt; bis dahin
   bleiben sie funktional mit eigenständigen Klassen erhalten.
   ============================================================================ */

/* Legacy-Button-Aliase */
.btn-primaer { display: inline-block; background: var(--accent); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: background var(--t-fast); }
.btn-primaer:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-sekundaer { display: inline-block; background: var(--app-bg); color: var(--text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--border-strong); cursor: pointer; }
.btn-sekundaer:hover { background: var(--card-bg); }
.btn-erfolg { display: inline-block; background: var(--success); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; border: none; cursor: pointer; }
.btn-icon { background: none; border: none; cursor: pointer; padding: var(--space-1); color: var(--danger); border-radius: var(--radius-sm); }

/* Hero / Subtitle (Wizard-Header) */
.hero { text-align: center; padding: var(--space-6) 0 var(--space-4); }
.hero h1 { font-size: var(--text-2xl); color: var(--text); }
.subtitle { color: var(--text-muted); font-size: var(--text-md); margin-top: var(--space-1); }

/* Wizard-Stepper */
.wizard-nav { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); gap: 0; }
.wizard-schritt { display: flex; flex-direction: column; align-items: center; }
.wizard-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--app-bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-sm); border: 1px solid var(--border); transition: background var(--t-med), border-color var(--t-med); }
.wizard-schritt.aktiv .wizard-nr { background: var(--accent); color: #fff; border-color: var(--accent); }
.wizard-schritt.erledigt .wizard-nr { background: var(--success); color: #fff; border-color: var(--success); }
.wizard-schritt.uebersprungen .wizard-nr { background: var(--text-muted); color: #fff; border-color: var(--text-muted); text-decoration: line-through; }
.wizard-schritt.uebersprungen .wizard-label { text-decoration: line-through; color: var(--text-muted); }
.wizard-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); white-space: nowrap; }
.wizard-schritt.aktiv .wizard-label { color: var(--accent); font-weight: 600; }
.wizard-linie { width: 50px; height: 2px; background: var(--border); margin: 0 var(--space-1); margin-bottom: 18px; }
.wizard-linie.erledigt { background: var(--success); }

/* Karte (Wizard-Container) */
.karte { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.karte h2 { color: var(--text); margin-bottom: var(--space-2); }
.beschreibung { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.aktionen { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }

/* Suche */
.suchfeld-container { position: relative; margin-bottom: var(--space-3); }
.suchergebnisse { position: absolute; top: 100%; left: 0; right: 0; background: var(--elevated-bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-md); z-index: 10; max-height: 240px; overflow-y: auto; }
.treffer { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.treffer:hover { background: var(--card-bg); }
.kein-treffer { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.hinweis-info { border-left-color: var(--info); }

/* Ergebnis-Box (Schritt 3) */
.ergebnis-box { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-4); border: 1px solid; }
.ergebnis-icon { font-size: 2rem; flex-shrink: 0; }
.ergebnis-box h3 { margin-bottom: var(--space-1); }
.ergebnis-box p { font-size: var(--text-sm); }
.ergebnis-befreit { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.ergebnis-ermittelt { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.ergebnis-subsidiaer { background: var(--warning-soft); border-color: var(--warning); color: #6b5008; }
.rechtsgrundlage { font-size: var(--text-xs); color: var(--accent); font-weight: 600; }

/* Kandidaten / wE-Karten */
.kandidaten-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.kandidat-karte { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.kandidat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.kandidat-details { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
.kandidat-herleitung { font-size: var(--text-sm); white-space: pre-line; }

/* Beteiligungsketten */
.bk-eintrag { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.bk-info { display: flex; flex-direction: column; gap: 2px; }
.bk-aktionen { display: flex; align-items: center; gap: var(--space-2); }
.btn-klein { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); cursor: pointer; }
.btn-deaktiviert { opacity: 0.5; cursor: not-allowed; }

/* Toggle-Switch */
.toggle-container { position: relative; display: inline-block; width: 42px; height: 22px; }
.toggle-container input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: background var(--t-med); }
.toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--t-med); }
.toggle-container input:checked + .toggle-slider { background: var(--accent); }
.toggle-container input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Upload-Bereich */
.upload-bereich { margin-bottom: var(--space-3); }
.upload-box { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; background: var(--card-bg); min-height: 120px; display: flex; align-items: center; justify-content: center; transition: border-color var(--t-fast), background var(--t-fast); }
.upload-box-hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-inhalt p { margin: var(--space-1) 0; }
.upload-icon { font-size: 2.2rem; margin-bottom: var(--space-1); color: var(--accent); }
.upload-link { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.text-klein { font-size: var(--text-xs); color: var(--text-muted); }
.upload-erfolg { color: var(--success); font-weight: 600; font-size: var(--text-md); }
.upload-fehler-box { color: var(--danger); font-weight: 600; }
.text-fehler { color: var(--danger); font-size: var(--text-sm); }

/* Fortschritt */
.fortschritt-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto var(--space-2); }
.fortschritt-spinner-klein { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: var(--space-1); }
.fortschritt-schritte { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); }
.fortschritt-schritt { color: var(--text-muted); }
.fortschritt-schritt.fs-aktiv { color: var(--accent); font-weight: 600; }
.fortschritt-schritt.fs-erledigt { color: var(--success); }

/* Oder-Trenner */
.oder-trenner { text-align: center; margin: var(--space-4) 0; position: relative; }
.oder-trenner::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.oder-trenner span { position: relative; background: var(--card-bg); padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }

/* Radio */
.radio-gruppe { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.radio-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.radio-label input[type="radio"] { accent-color: var(--accent); }

/* Tabellen-Hilfen */
.tabelle-container { overflow-x: auto; margin-bottom: var(--space-3); }
.tabelle-kompakt th, .tabelle-kompakt td { padding: var(--space-2) var(--space-3); }
.zentriert { text-align: center; }
.rechts { text-align: right; }

/* Schritt 5 — Prozess-Schritte */
.prozess-schritte { display: flex; flex-direction: column; gap: 0; }
.prozess-schritt { display: flex; gap: var(--space-3); padding: var(--space-4); border-left: 3px solid var(--border); background: var(--card-bg); opacity: 0.5; transition: opacity var(--t-fast); }
.prozess-schritt.ps-aktiv { opacity: 1; border-left-color: var(--accent); background: var(--elevated-bg); box-shadow: var(--shadow-sm); }
.prozess-schritt.ps-erledigt { opacity: 0.75; border-left-color: var(--success); }
.ps-nummer { width: 28px; height: 28px; border-radius: 50%; background: var(--app-bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-xs); flex-shrink: 0; }
.ps-aktiv .ps-nummer { background: var(--accent); color: #fff; }
.ps-erledigt .ps-nummer { background: var(--success); color: #fff; }
.ps-inhalt { flex: 1; }
.ps-inhalt h4 { margin-bottom: var(--space-1); font-size: var(--text-sm); }
.ps-inhalt p, .ps-inhalt li { font-size: var(--text-sm); }
.ps-inhalt ol, .ps-inhalt ul { margin: var(--space-1) 0 var(--space-2) var(--space-4); }
.ps-aktion { margin-top: var(--space-2); }
.ps-status-ok { color: var(--success); font-weight: 600; font-size: var(--text-sm); margin-top: var(--space-1); }

/* wE-Formular (Schritt 4) */
.we-formular { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-3); }
.we-formular h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-md); }

/* Zusammenfassung */
.zusammenfassung { margin-bottom: var(--space-3); }
.zusammenfassung-zeile { display: flex; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.zusammenfassung-zeile .label { width: 160px; font-weight: 500; color: var(--text-muted); flex-shrink: 0; }
.begruendung-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--text-sm); white-space: pre-line; }

/* Vergleich (Schritt 3) */
.vergleich-detail-tabelle { margin-top: var(--space-2); }
.vergleich-detail-tabelle td.aenderung-neu { color: var(--success); font-weight: 600; }
.vergleich-detail-tabelle td.aenderung-weg { color: var(--danger); font-weight: 600; }
.vergleich-detail-tabelle td.aenderung-mod { color: var(--warning); font-weight: 600; }

/* Compass-Bereich */
.compass-bereich { margin-bottom: var(--space-3); }

/* GF-Zeile */
.gf-zeile { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.gf-zeile .eingabe { flex: 1; }

/* Modus-Karten + Buttons (Startseite-Legacy) */
.modus-button { display: inline-block; background: var(--accent); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 500; text-align: center; font-size: var(--text-sm); }
.modus-button-deaktiviert { background: var(--text-muted); }

/* Badge-Varianten Legacy */
.badge-direkt    { background: var(--info-soft); color: var(--info); }
.badge-indirekt  { background: #e8dff5; color: #5d3a8a; }
.badge-subsidiaer { background: var(--warning-soft); color: var(--warning); }
.badge-anteil    { background: var(--app-bg); color: var(--text); }

/* Eingabe-Variante */
.eingabe-gross { font-size: var(--text-md); padding: var(--space-3) var(--space-4); }

/* Warnungen */
.warnungen { margin-bottom: var(--space-3); }
.warnung { background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1); font-size: var(--text-sm); color: #6b5008; }

/* Aenderungs-Check Ampel + Tabs */
.ac-ampel-rot   { background: var(--danger);  color: #fff; }
.ac-ampel-gelb  { background: var(--warning); color: #fff; }
.ac-ampel-gruen { background: var(--success); color: #fff; }
.ac-ampel-grau  { background: var(--text-muted); color: #fff; }

/* ---------- Anmeldung (Entra ID, 14.09.2026) ---------- */
/* Neutrale Hinweisvariante. Die drei bestehenden Flash-Varianten sind erfolg,
   fehler und warnung; fuer eine reine Mitteilung ohne Wertung fehlte eine.
   Nutzt die bereits vorhandenen --info-Tokens. */
.flash-hinweis { background: var(--info-soft); border-color: var(--info); color: var(--info); }

/* Gekuerzter Kontoname im Kopfbereich, neben den Navigationslinks. Bewusst
   kein Link: er ist eine Angabe, kein Ziel. */
.header-konto {
    color: var(--text-on-dark-muted);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-left: 1px solid rgba(255,255,255,0.18);
    margin-left: var(--space-1);
}

.anmeldung-seite {
    background: var(--app-bg);
    min-height: 100vh;
}
.anmeldung-huelle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-5);
}
.anmeldung-karte {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.anmeldung-titel {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0 0 var(--space-1);
}
.anmeldung-untertitel {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 var(--space-5);
}
.anmeldung-hinweis {
    text-align: left;
    margin-bottom: var(--space-4);
}
.anmeldung-knopf {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
}
.anmeldung-fuss {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: left;
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .anmeldung-huelle { padding: var(--space-3); }
    .anmeldung-karte { padding: var(--space-5); }
    main { padding: 0 var(--space-3); }
    .formular-grid { grid-template-columns: 1fr; }
    .modal { max-width: 100%; }
    header { padding: 0 var(--space-3); }
    nav { gap: var(--space-2); }
}