/* =====================================================================
   EBV Bewerberportal — Design-System
   Orientiert an home.auslandspraktikum-europa.de
   Inter · Sky-Blau (#0284C7) · Slate-Neutrals · Grün/Amber-Akzente
   ===================================================================== */

:root {
    /* Marke */
    --sky-700:#0369a1; --sky-600:#0284c7; --sky-500:#0ea5e9; --sky-400:#38bdf8;
    --sky-100:#e0f2fe; --sky-50:#f0f9ff;
    /* Neutrals */
    --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155;
    --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
    --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
    /* Akzente */
    --green:#16a34a; --green-50:#f0fdf4; --amber:#f59e0b; --red:#dc2626; --red-50:#fef2f2;

    --ink:var(--slate-700);
    --heading:var(--slate-900);

    --radius:12px; --radius-sm:8px; --radius-lg:20px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --shadow:0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.06);
    --shadow-lg:0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.06);
    --ring:0 0 0 4px rgba(2,132,199,.18);

    --bs-primary:var(--sky-600);
    --bs-primary-rgb:2,132,199;
    --nav-h:68px;

    /* Themebare Flächen (Light-Defaults). Der Dark-Mode invertiert die Slate-Skala
       — Text/Ränder/Panels adaptieren dadurch automatisch — und setzt diese Tokens. */
    --bg:#fff; --surface:#fff; --surface-2:var(--slate-50); --nav-bg:rgba(255,255,255,.92);
    --footer-bg:var(--slate-900); --footer-border:var(--slate-800);
}

/* --------------------------------------------------------------- Base */
* { box-sizing:border-box; }
/* scroll-padding-top: Anker-/Hash-Sprünge (z. B. formulare.php#sec-…) stoppen unter
   der sticky Navbar statt dahinter — sonst landet das Ziel „einen Eintrag zu spät". */
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body {
    margin:0; font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink); background:var(--bg); line-height:1.6;
    font-size:16px; -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100vh;
}
main { flex:1 0 auto; }
h1,h2,h3,h4,h5 { color:var(--heading); font-weight:700; line-height:1.2; margin:0 0 .5em; }
h1 { font-size:clamp(2rem,4vw,3.25rem); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:clamp(1.6rem,2.5vw,2.25rem); letter-spacing:-.01em; }
h3 { font-size:1.25rem; }
p { margin:0 0 1rem; }
a { color:var(--sky-600); text-decoration:none; transition:color .15s; }
a:hover { color:var(--sky-700); }
.muted { color:var(--slate-500); }
.lead { font-size:1.125rem; color:var(--slate-600); }
.container-page { width:100%; max-width:1140px; margin-inline:auto; padding-inline:20px; }
.section { padding:72px 0; }
.section-sky { background:var(--sky-50); }
.section-title { text-align:center; margin-bottom:8px; }
.section-sub { text-align:center; color:var(--slate-500); max-width:620px; margin:0 auto 44px; }

/* ---------------------------------------------------------- Navbar */
.site-nav {
    position:sticky; top:0; z-index:1030; background:var(--nav-bg);
    backdrop-filter:saturate(160%) blur(8px);
    border-bottom:1px solid var(--slate-200);
}
.nav-inner {
    max-width:1140px; margin-inline:auto; padding:0 20px; height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--heading); }
.brand:hover { color:var(--heading); }
.brand-mark {
    width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
    color:#fff; font-size:1.1rem;
    background:linear-gradient(135deg,var(--sky-500),var(--sky-600));
    box-shadow:0 6px 14px -4px rgba(2,132,199,.6);
}
.brand-text { display:flex; flex-direction:column; line-height:1.05; letter-spacing:-.01em; }
.brand-text small { font-size:.72rem; font-weight:600; color:var(--slate-500); letter-spacing:0; }
.brand-logo { height:50px; width:auto; display:block; }
@media (max-width:520px){ .brand-logo{ height:42px; } }
.brand-tag {
    font-size:.82rem; font-weight:600; color:var(--slate-500);
    padding-left:12px; margin-left:2px; border-left:1px solid var(--slate-300);
}
@media (max-width:520px){ .brand-tag{ display:none; } }
/* Rechtstexte (Impressum/Datenschutz) */
.legal p { margin:0 0 14px; }
.legal ul { margin:0 0 16px; padding-left:22px; }
.legal li { margin:0 0 6px; }
.legal h3 { color:var(--heading); }
.footer-logo { display:inline-block; background:#fff; padding:14px 20px; border-radius:14px; }
.footer-logo img { height:58px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-link {
    padding:9px 14px; border-radius:8px; color:var(--slate-600); font-weight:600; font-size:.95rem;
}
.nav-link:hover { color:var(--sky-700); background:var(--sky-50); }
.nav-link.active { color:var(--sky-700); }
.nav-toggle { display:none; border:0; background:transparent; font-size:1.3rem; color:var(--slate-700); cursor:pointer; }

@media (max-width:820px) {
    .nav-toggle { display:block; }
    .nav-links {
        position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch;
        gap:4px; padding:12px 16px 18px; background:var(--surface); border-bottom:1px solid var(--slate-200);
        box-shadow:var(--shadow); display:none;
    }
    body.nav-open .nav-links { display:flex; }
    .nav-links .btn { text-align:center; }
}

/* ---------------------------------------------------------- Buttons */
.btn {
    --bs-btn-focus-box-shadow:none;
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-weight:600; border-radius:var(--radius-sm); padding:11px 20px; font-size:.98rem;
    border:1px solid transparent; cursor:pointer; transition:all .16s ease; line-height:1.2;
}
.btn:focus-visible { outline:none; box-shadow:var(--ring); }
.btn-brand { background:var(--sky-600); color:#fff; box-shadow:0 6px 14px -6px rgba(2,132,199,.7); }
.btn-brand:hover { background:var(--sky-700); color:#fff; transform:translateY(-1px); }
.btn-outline-brand { background:#fff; color:var(--sky-700); border-color:var(--slate-300); }
.btn-outline-brand:hover { border-color:var(--sky-600); background:var(--sky-50); color:var(--sky-700); }
.btn-white { background:#fff; color:var(--sky-700); }
.btn-white:hover { background:var(--sky-50); color:var(--sky-700); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--slate-600); border-color:var(--slate-200); }
.btn-ghost:hover { background:var(--slate-100); color:var(--slate-800); }
.btn-lg { padding:14px 26px; font-size:1.05rem; }
.btn-block { width:100%; }

/* ---------------------------------------------------------- Hero */
.hero {
    position:relative; color:#fff; overflow:hidden;
    background:linear-gradient(135deg,var(--sky-600) 0%,var(--sky-500) 55%,var(--sky-400) 100%);
}
.hero::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(1200px 400px at 85% -10%,rgba(255,255,255,.25),transparent 60%);
}
.hero-inner { position:relative; z-index:1; max-width:1140px; margin-inline:auto; padding:80px 20px; }
.hero h1 { color:#fff; margin-bottom:16px; }
.hero p { color:rgba(255,255,255,.92); font-size:1.15rem; max-width:540px; }
.hero .btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------------------------------------------------------- Cards */
.card-ui {
    background:var(--surface); border:1px solid var(--slate-200); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:26px; transition:box-shadow .18s, transform .18s;
}
.card-ui.hoverable:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.feature-icon {
    width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
    background:var(--sky-100); color:var(--sky-600); font-size:1.2rem; margin-bottom:16px;
}

/* ---------------------------------------------------------- Auth-Layout */
.auth-wrap { display:flex; min-height:calc(100vh - var(--nav-h)); }
.auth-aside {
    flex:1 1 46%; color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
    background:linear-gradient(150deg,var(--sky-600),var(--sky-500) 60%,var(--sky-400));
    position:relative; overflow:hidden;
}
.auth-aside::after {
    content:""; position:absolute; inset:0;
    background:radial-gradient(700px 300px at 100% 0,rgba(255,255,255,.22),transparent 55%);
}
.auth-aside > * { position:relative; z-index:1; }
.auth-aside h2 { color:#fff; font-size:2.1rem; }
.auth-aside .pitch { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.auth-aside .pitch li { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.95); }
.auth-aside .pitch i { margin-top:3px; }
.auth-main { flex:1 1 54%; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--slate-50); }
.auth-card { width:100%; max-width:420px; }
.auth-card .eyebrow { color:var(--sky-600); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
/* Logo auf den Auth-Seiten */
.auth-logo { display:inline-block; background:#fff; padding:14px 20px; border-radius:16px; box-shadow:0 14px 34px -14px rgba(2,29,55,.55); margin-bottom:30px; }
.auth-logo img { height:56px; width:auto; display:block; }
/* Auth-Seiten (Login/Registrieren/Passwort-vergessen/-zurücksetzen): das Navbar-
   Brand-Logo oben entfernen — das Marken-Logo sitzt einheitlich mittig in der Card.
   Nav-Links dann rechtsbündig. */
.auth-page .brand { display:none; }
.auth-page .nav-links { margin-left:auto; }
.auth-brand-c { text-align:center; }
.auth-brand-c .auth-logo { margin-bottom:22px; }
@media (max-width:900px){ .auth-aside{ display:none; } }

/* ---------------------------------------------------------- Forms */
.form-label { font-weight:600; font-size:.9rem; color:var(--slate-700); margin-bottom:6px; display:block; }
.form-control, .form-select {
    width:100%; border:1px solid var(--slate-300); border-radius:var(--radius-sm);
    padding:11px 14px; font-size:1rem; color:var(--slate-800); background:var(--surface); transition:border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color:var(--slate-400); }
/* Browser-Autofill nicht die Fläche überschreiben lassen (sonst hell im Dark-Mode). */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--slate-800);
    -webkit-box-shadow:0 0 0 100px var(--surface) inset;
    caret-color:var(--slate-800);
}
.form-control:focus, .form-select:focus { outline:none; border-color:var(--sky-500); box-shadow:var(--ring); }
.input-group-ic { position:relative; }
.input-group-ic i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-400); }
.input-group-ic .form-control { padding-left:42px; }
.field { margin-bottom:18px; }
.form-hint { font-size:.82rem; color:var(--slate-500); margin-top:6px; }
.form-error { font-size:.82rem; color:var(--red); margin-top:6px; }

/* ---------------------------------------------------------- Badges / Alerts */
.badge-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:600; }
.badge-available { background:var(--green-50); color:var(--green); }
.badge-open { background:var(--sky-50); color:var(--sky-700); }
.badge-progress { background:#fffbeb; color:#b45309; }
.badge-revise { background:var(--amber); color:#fff; }
.alert-ui { border-radius:var(--radius-sm); padding:13px 16px; font-size:.92rem; margin-bottom:18px; border:1px solid transparent; display:flex; gap:10px; align-items:flex-start; }
.alert-success { background:var(--green-50); color:#15803d; border-color:#bbf7d0; }
.alert-danger  { background:var(--red-50); color:#b91c1c; border-color:#fecaca; }
.alert-warning { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.alert-info    { background:var(--sky-50); color:var(--sky-700); border-color:#bae6fd; }

/* ---------------------------------------------------------- Progress-Steps */
.steps { display:flex; gap:10px; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--slate-100); color:var(--slate-500); font-weight:600; font-size:.9rem; }
.step .dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--slate-300); color:#fff; font-size:.78rem; }
.step.done { background:var(--green-50); color:#15803d; }
.step.done .dot { background:var(--green); }
.step.current { background:var(--sky-50); color:var(--sky-700); }
.step.current .dot { background:var(--sky-600); }

/* ---------------------------------------------------------- Progress-Ring / Meter */
.meter { height:10px; border-radius:999px; background:var(--slate-200); overflow:hidden; }
.meter > span { display:block; height:100%; background:linear-gradient(90deg,var(--sky-500),var(--sky-600)); border-radius:999px; }

/* ---------------------------------------------------------- Footer */
.site-footer { background:var(--footer-bg); color:var(--slate-400); margin-top:auto; }
.footer-inner {
    max-width:1140px; margin-inline:auto; padding:56px 20px 32px;
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;
}
.footer-brand p { margin-top:14px; font-size:.92rem; max-width:320px; }
.footer-brand .brand-mark { margin-bottom:4px; }
.footer-col h4 { color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-col a { display:block; color:var(--slate-400); padding:5px 0; font-size:.92rem; }
.footer-col a:hover { color:#fff; }
.footer-bar { border-top:1px solid var(--footer-border); text-align:center; padding:18px; font-size:.85rem; color:var(--slate-500); }
@media (max-width:820px){ .footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-inner{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- Utilities */
.grid { display:grid; gap:24px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.dash-grid { grid-template-columns:1.5fr 1fr; } /* Dashboard: Fortschritt + Status */
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } .dash-grid{ grid-template-columns:1fr; } }
.stack-sm > * + * { margin-top:10px; }
.text-center { text-align:center; }
.mt-3{margin-top:1rem} .mt-4{margin-top:1.5rem} .mb-0{margin-bottom:0}

/* ---------------------------------------------------------- Formular-Grid */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-grid .field.full { grid-column:1 / -1; }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }

.privacy-check { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--slate-600); margin:6px 0 4px; }
.privacy-check input { margin-top:4px; }
.form-actions { display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--slate-100); }
.req-star { color:var(--red); font-weight:700; }
.req-legend { font-size:.82rem; color:var(--slate-400); margin-left:auto; }
/* Login & Registrierung: alle Felder sind Pflicht -> Stern an jedes Label */
form[action*="login.php"] .form-label::after,
form[action*="register.php"] .form-label::after { content:" *"; color:var(--red); font-weight:700; }
.save-note { font-size:.9rem; font-weight:600; }
.save-note.ok { color:var(--green); }
.save-note.err { color:var(--red); }

/* ---------------------------------------------------------- Akkordeon */
.form-accordion .acc-item { background:var(--surface); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:12px; overflow:hidden; }
.acc-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; background:var(--surface); border:0; cursor:pointer; text-align:left; }
.acc-head:hover { background:var(--slate-50); }
.acc-title { display:flex; align-items:center; gap:14px; font-weight:600; color:var(--heading); }
.acc-ic { margin:0; width:38px; height:38px; font-size:1rem; }
.acc-meta { display:flex; align-items:center; gap:12px; color:var(--slate-400); }
.acc-chev { transition:transform .2s; }
.acc-head[aria-expanded="true"] .acc-chev { transform:rotate(180deg); }
.acc-body { padding:8px 20px 22px; border-top:1px solid var(--slate-100); }

/* ---------------------------------------------------------- Dashboard: Unterlagen kompakt + gruppiert */
.u-groups { margin-top:16px; }
.u-group + .u-group { margin-top:20px; }
.u-label { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-500); margin:0 0 10px; }
.u-label i { color:var(--sky-600); }
.u-card { padding:14px 16px; display:block; }
.u-card .u-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.u-card .feature-icon { width:38px; height:38px; font-size:.98rem; }
.u-card h3 { font-size:.98rem; margin:10px 0 0; line-height:1.25; }
/* Dokumente kräftig in Teal abgrenzen (Formulare bleiben Sky) — Dashboard + formulare.php */
.u-group-docs .u-label { color:#0f766e; }
.u-group-docs .u-label i { color:#0f766e; }
.u-group-docs .feature-icon { background:#0d9488; color:#fff; }
.u-group-docs .u-card { border-color:#99f6e4; }
/* Vom EBV bereitgestellte Dokumente: grüner Akzent (= „für dich bereit") */
.u-group-ebv .u-label, .u-group-ebv .u-label i { color:#15803d; }
.u-group-ebv .feature-icon { background:var(--green); color:#fff; }
.u-group-ebv .u-card { border-color:#bbf7d0; }

/* Verlauf als Accordion (natives <details>, kein JS nötig) */
.verlauf { background:var(--surface); border:1px solid var(--slate-200); border-left:3px solid var(--slate-500); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.verlauf > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 20px; font-weight:600; color:var(--heading); }
.verlauf > summary::-webkit-details-marker { display:none; }
.verlauf > summary:hover { background:var(--slate-50); }
.verlauf > summary .acc-chev { transition:transform .2s; color:var(--slate-400); }
.verlauf[open] > summary .acc-chev { transform:rotate(180deg); }
.verlauf-body { padding:0 20px 6px; border-top:1px solid var(--slate-100); }

/* ---------------------------------------------------------- Mehrfach-Zeilen */
.repeat-row { border:1px dashed var(--slate-300); border-radius:var(--radius-sm); padding:14px 16px 4px; margin-bottom:14px; background:var(--slate-50); }
.repeat-row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.repeat-num { font-weight:600; font-size:.85rem; color:var(--slate-500); }
.btn-linklike { border:0; background:transparent; color:var(--slate-400); cursor:pointer; padding:4px 6px; border-radius:6px; }
.btn-linklike:hover { color:var(--red); background:var(--red-50); }

/* ---------------------------------------------------------- Signatur */
.sig-wrap { border:1px dashed var(--slate-300); border-radius:var(--radius-sm); background:var(--slate-50); overflow:hidden; }
.sig-pad { width:100%; height:180px; display:block; touch-action:none; cursor:crosshair; }

/* ---------------------------------------------------------- Impersonation-Banner */
.imp-banner {
    position:sticky; top:var(--nav-h); z-index:1029;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 20px; background:#7c2d12; color:#fff; font-size:.9rem; font-weight:600;
}
.imp-banner i { margin-right:6px; }
.imp-banner .imp-end { color:#fff; background:rgba(255,255,255,.2); padding:5px 14px; border-radius:6px; white-space:nowrap; }
.imp-banner .imp-end:hover { background:rgba(255,255,255,.32); color:#fff; }

/* ---------------------------------------------------------- Timeline */
.timeline-list { list-style:none; margin:0; padding:0; }
.tl-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--slate-100); }
.tl-item:last-child { border-bottom:0; }
.tl-dot { flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; }
.tl-admin { background:var(--sky-100); color:var(--sky-600); }
.tl-user { background:var(--green-50); color:var(--green); }
.tl-body { flex:1 1 auto; min-width:0; }
.tl-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.tl-meta { font-size:.8rem; color:var(--slate-400); }
.tl-content { font-size:.9rem; margin-top:4px; }
.tl-content ul { margin:.3rem 0; padding-left:1.1rem; }

/* ---------------------------------------------------------- Resend-Box */
.resend-box { margin-top:18px; border-top:1px solid var(--slate-200); padding-top:14px; }
.resend-box summary { cursor:pointer; color:var(--slate-500); font-size:.9rem; font-weight:600; list-style:none; text-align:center; }
.resend-box summary::-webkit-details-marker { display:none; }
.resend-box summary:hover { color:var(--sky-600); }

/* --------------------------------------------- Seiten-Einleitung (Callout, wie bewerber/) */
.page-callout {
    background:var(--sky-50); border:1px solid #bae6fd; border-left:4px solid var(--sky-600);
    border-radius:var(--radius-sm); padding:18px 22px; margin-bottom:24px;
}
.page-callout h4 { margin:0 0 8px; font-size:1.05rem; font-weight:700; color:var(--heading); }
.page-callout p { margin:0 0 10px; font-size:.92rem; color:var(--slate-600); line-height:1.6; }
.page-callout p:last-child { margin-bottom:0; }
.page-callout a { font-weight:600; }

/* --------------------------------------------- Formular-Einleitungstexte (im Klappbereich) */
.form-intro { font-size:.9rem; color:var(--slate-600); margin:0 0 16px; line-height:1.55; }
.form-intro-warn {
    display:flex; gap:9px; align-items:flex-start;
    background:#fffbeb; border:1px solid #fde68a; color:#92400e;
    border-radius:var(--radius-sm); padding:11px 14px;
}
.form-intro-warn i { color:var(--amber); margin-top:2px; }

/* --------------------------------------------- Auto-Logout-Chip (Navbar) */
.logout-chip { position:relative; display:inline-flex; }
.logout-chip > summary {
    list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
    padding:6px 11px; border-radius:999px; font-size:.85rem; font-weight:600;
    color:var(--slate-600); background:var(--slate-100); white-space:nowrap;
    transition:background .15s;
}
.logout-chip > summary::-webkit-details-marker { display:none; }
.logout-chip > summary:hover,
.logout-chip[open] > summary { background:var(--slate-200); }
.logout-chip > summary i { color:var(--amber); }
.logout-chip-pop {
    position:absolute; right:0; top:calc(100% + 8px); z-index:1100;
    width:250px; max-width:78vw; padding:12px 14px;
    font-size:.85rem; font-weight:500; line-height:1.5;
    color:var(--slate-700); background:var(--surface);
    border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.logout-chip-pop strong { color:var(--heading); font-weight:700; white-space:nowrap; }

/* --------------------------------------------- Session-Timeout-Warnung (aus app.js) */
.session-overlay {
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(15,23,42,.55);
}
.session-dialog {
    width:100%; max-width:420px; padding:26px 26px 22px; text-align:center;
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.session-dialog .si-icon {
    width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
    display:grid; place-items:center; font-size:1.5rem; background:#fffbeb; color:var(--amber);
}
.session-dialog h3 { margin:0 0 8px; color:var(--heading); font-size:1.15rem; }
.session-dialog p { margin:0; color:var(--slate-600); font-size:.94rem; line-height:1.55; }
.session-dialog .si-count { font-weight:700; color:var(--heading); font-variant-numeric:tabular-nums; }
.session-actions { display:flex; gap:10px; margin-top:18px; }
.session-actions .btn { flex:1; }

/* --------------------------------------------- Upload-UX (Drag&Drop, Vorschau, Fortschritt) */
.js-upload { transition:border-color .15s, box-shadow .15s; }
.js-upload.drag { border-color:var(--sky-500); box-shadow:var(--ring); }
.up-hint { margin-top:6px; font-size:.8rem; color:var(--slate-500); }
.up-hint i { margin-right:4px; }
.up-file {
    margin-top:8px; padding:8px 10px; display:flex; align-items:center; gap:8px;
    font-size:.85rem; color:var(--slate-700);
    background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius-sm);
}
.up-file.err { background:var(--red-50); border-color:#fecaca; color:#b91c1c; }
.up-file .up-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-file .up-size { margin-left:auto; flex:none; color:var(--slate-500); font-size:.8rem; }
.up-progress { margin-top:8px; height:6px; border-radius:999px; background:var(--slate-200); overflow:hidden; }
.up-bar { height:100%; width:0; background:var(--sky-600); transition:width .15s; }

/* --------------------------------------------- Passwort-Stärke-Anzeige */
.pw-meter { margin-top:8px; display:flex; align-items:center; gap:9px; opacity:0; transition:opacity .15s; }
.pw-meter.on { opacity:1; }
.pw-track { flex:1; height:6px; border-radius:999px; background:var(--slate-200); overflow:hidden; }
.pw-fill { height:100%; width:0; border-radius:999px; transition:width .15s, background .15s; }
.pw-label { font-size:.78rem; font-weight:600; min-width:52px; text-align:right; }

/* --------------------------------------------- Nächster Schritt + Abgabetermin (Dashboard) */
.deadline-note {
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
    padding:12px 16px; border-radius:var(--radius); font-size:.92rem;
    background:var(--sky-50); border:1px solid #bae6fd; color:var(--sky-700);
}
.deadline-note i { font-size:1.05rem; }
.deadline-note.is-soon { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.deadline-note.is-over { background:var(--red-50); border-color:#fecaca; color:#b91c1c; }
.deadline-note strong { white-space:nowrap; }
.next-step-card {
    display:flex; align-items:center; gap:16px; margin-bottom:22px; padding:16px 20px;
    text-decoration:none; color:inherit;
    background:var(--surface); border:1px solid var(--slate-200); border-left:4px solid var(--sky-600);
    border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;
}
.next-step-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); color:inherit; text-decoration:none; }
.next-step-card .ns-icon {
    width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
    background:var(--sky-50); color:var(--sky-600); font-size:1.15rem;
}
.next-step-card .ns-body { min-width:0; flex:1; display:flex; flex-direction:column; }
.next-step-card .ns-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--sky-600); }
.next-step-card .ns-title { font-size:1.05rem; color:var(--heading); overflow-wrap:anywhere; }
.next-step-card .ns-go { flex:none; font-weight:600; color:var(--sky-600); white-space:nowrap; }
@media (max-width:560px) { .next-step-card .ns-go { display:none; } }

/* --------------------------------------------- „Was ist neu" — Verlauf-Markierung */
.badge-new { background:var(--sky-600); color:#fff; }
.tl-item.tl-new .tl-head strong { color:var(--sky-700); }
.tl-item.tl-new .tl-dot { box-shadow:0 0 0 3px var(--sky-100); }

/* --------------------------------------------- Stammdaten-Übersicht (Dashboard) */
.stammdaten { margin-bottom:22px; padding:20px 24px; }
.stamm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px 22px; }
.stamm-item { display:flex; flex-direction:column; gap:3px; min-width:0; }
.stamm-item + .stamm-item { border-left:1px solid var(--slate-100); padding-left:22px; }
.stamm-label { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-400); }
.stamm-val { font-size:1.02rem; font-weight:600; color:var(--slate-800,#1e293b); overflow-wrap:anywhere; }
@media (max-width:640px) {
    .stamm-item + .stamm-item { border-left:0; padding-left:0; }
}

/* --------------------------------------------- Nachrichten (Chat) */
.nav-badge {
    display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
    padding:0 5px; margin-left:4px; border-radius:999px; background:var(--red); color:#fff;
    font-size:.72rem; font-weight:700; line-height:1; vertical-align:middle;
}
.msg-thread { display:flex; flex-direction:column; gap:12px; padding:22px; max-height:56vh; overflow-y:auto; background:var(--surface-2); }
.msg-empty { text-align:center; color:var(--slate-500); font-size:.92rem; margin:24px 0; }
.msg { display:flex; flex-direction:column; max-width:78%; }
.msg-user  { align-self:flex-end;   align-items:flex-end; }
.msg-admin { align-self:flex-start; align-items:flex-start; }
.msg-bubble { padding:10px 14px; border-radius:14px; font-size:.94rem; line-height:1.45; overflow-wrap:anywhere; }
.msg-user  .msg-bubble { background:var(--sky-600); color:#fff; border-bottom-right-radius:4px; }
.msg-admin .msg-bubble { background:var(--surface); border:1px solid var(--slate-200); color:var(--ink); border-bottom-left-radius:4px; }
.msg-meta { font-size:.72rem; color:var(--slate-400); margin-top:3px; }
.msg-compose { display:flex; gap:10px; align-items:flex-end; padding:14px; border-top:1px solid var(--slate-200); background:var(--surface); }
.msg-compose textarea { resize:vertical; min-height:44px; }
.msg-compose .btn { flex:none; }

/* --------------------------------------------- Theme-Umschalter (Navbar) */
.theme-toggle {
    display:inline-grid; place-items:center; width:38px; height:38px; padding:0;
    border:1px solid var(--slate-200); border-radius:999px; background:transparent;
    color:var(--slate-600); cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background:var(--slate-100); color:var(--slate-800); }
/* Passendes Icon je Modus zeigen (Sonne im Dark, Mond im Light) */
.theme-toggle .ic-dark { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-dark { display:inline; }
:root[data-theme="dark"] .theme-toggle .ic-light { display:none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .ic-dark { display:inline; }
    :root:not([data-theme="light"]) .theme-toggle .ic-light { display:none; }
}

/* =====================================================================
   Dark Mode — die Slate-Neutrals werden invertiert (Text, Ränder und
   Panels adaptieren dadurch automatisch, auch Inline-`var(--slate-*)` in
   den PHP-Seiten); zusätzlich werden die Flächen-Tokens gesetzt. Standard
   ist HELL: theme-init.js setzt [data-theme] am <html> immer explizit
   (light/dark aus localStorage, sonst light). Die prefers-color-scheme-
   Blöcke greifen nur noch als Fallback, falls JS nicht läuft.
   Bewusst farbige/dunkle Elemente
   (Hero, Auth-Seitenbanner, Footer, Buttons) bleiben über eigene Werte/
   Tokens erhalten.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --slate-900:#f8fafc; --slate-800:#f1f5f9; --slate-700:#e2e8f0; --slate-600:#cbd5e1;
    --slate-500:#9fb0c4; --slate-400:#7c8aa0; --slate-300:#475569; --slate-200:#334155;
    --slate-100:#1e293b; --slate-50:#162236;
    --bg:#0b1220; --surface:#151f33; --nav-bg:rgba(11,18,32,.88);
    --footer-bg:#0b1220; --footer-border:rgba(255,255,255,.08);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 6px 16px rgba(0,0,0,.55); --shadow-lg:0 22px 44px rgba(0,0,0,.6);
    --ring:0 0 0 4px rgba(56,189,248,.28);
  }
}
:root[data-theme="dark"] {
    --slate-900:#f8fafc; --slate-800:#f1f5f9; --slate-700:#e2e8f0; --slate-600:#cbd5e1;
    --slate-500:#9fb0c4; --slate-400:#7c8aa0; --slate-300:#475569; --slate-200:#334155;
    --slate-100:#1e293b; --slate-50:#162236;
    --bg:#0b1220; --surface:#151f33; --nav-bg:rgba(11,18,32,.88);
    --footer-bg:#0b1220; --footer-border:rgba(255,255,255,.08);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 6px 16px rgba(0,0,0,.55); --shadow-lg:0 22px 44px rgba(0,0,0,.6);
    --ring:0 0 0 4px rgba(56,189,248,.28);
}
/* Info-Panels mit fixem Hell-Blau (var(--sky-50)) im Dark-Mode abdunkeln — sonst
   heller Text (invertierte Neutrals) auf hellem Grund. Farbige Chips (alert-*,
   badge-open) bleiben absichtlich helle Chips mit dunklem Text. */
:root[data-theme="dark"] .page-callout { background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.22); }
:root[data-theme="dark"] .section-sky  { background:rgba(56,189,248,.05); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .page-callout { background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.22); }
    :root:not([data-theme="light"]) .section-sky  { background:rgba(56,189,248,.05); }
}
/* Logo (JPG mit hellem Grund) im Dark-Mode auf weißen Kasten setzen — wie im Footer,
   sonst „schwimmt" der helle Bildrand im dunklen Nav. box-sizing hält die Nav-Höhe. */
:root[data-theme="dark"] .brand-logo { background:#fff; padding:5px 9px; border-radius:9px; box-sizing:border-box; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo { background:#fff; padding:5px 9px; border-radius:9px; box-sizing:border-box; }
}