/* ============================================================================
   Kursleben Design-System
   Gruene Palette, weiche Formen, hochwertige Komponenten - kein 0815-Look.
   Drei Oberflaechen nutzen dieselben Variablen:
   Tool (dicht/produktiv), Landingpage (gross), Kundenportal (einladend).
   ========================================================================== */

:root {
    /* Gruen-Palette */
    --gruen-900: #0f3d26;
    --gruen-800: #14532d;
    --gruen-700: #1a6b3a;
    --gruen-600: #2e7d4f;
    --gruen-500: #3d9963;
    --gruen-400: #5cb87e;
    --gruen-300: #8ed3a8;
    --gruen-200: #c3e8d1;
    --gruen-100: #e5f5ec;
    --gruen-50:  #f2faf5;

    /* Neutrale Toene (warm) */
    --grau-900: #1d241f;
    --grau-700: #3d453f;
    --grau-500: #6b746d;
    --grau-400: #949c96;
    --grau-300: #c6ccc8;
    --grau-200: #e2e6e3;
    --grau-100: #eff1ef;
    --creme:    #fafbf8;
    --weiss:    #ffffff;

    /* Signalfarben */
    --rot: #c0392b;
    --rot-hell: #fdecea;
    --gelb: #b7791f;
    --gelb-hell: #fdf6e3;
    --blau: #2471a3;
    --blau-hell: #eaf2fa;

    /* Mandanten-Akzent (wird pro Mandant per Inline-Style ueberschrieben) */
    --akzent: var(--gruen-600);
    --akzent-dunkel: var(--gruen-800);
    --akzent-hell: var(--gruen-100);

    /* Formen & Tiefe */
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-pill: 999px;
    --schatten-s: 0 1px 3px rgba(15, 61, 38, .08), 0 1px 2px rgba(15, 61, 38, .04);
    --schatten-m: 0 4px 16px rgba(15, 61, 38, .10), 0 2px 4px rgba(15, 61, 38, .05);
    --schatten-l: 0 12px 36px rgba(15, 61, 38, .14), 0 4px 8px rgba(15, 61, 38, .06);

    --schrift: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.55;
    color: var(--grau-900);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; color: var(--grau-900); margin: 0 0 .5em; }
h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 600; }

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

/* --- Buttons: weich geformt, hochwertig, klare Zustaende ------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.35em;
    border: none;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--gruen-300); outline-offset: 2px; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primaer {
    color: var(--weiss);
    background: linear-gradient(160deg, var(--gruen-500), var(--gruen-700));
    box-shadow: var(--schatten-s), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primaer:hover { box-shadow: var(--schatten-m), inset 0 1px 0 rgba(255,255,255,.22); filter: brightness(1.05); }

.btn-sekundaer {
    color: var(--gruen-800);
    background: var(--gruen-100);
    box-shadow: inset 0 0 0 1.5px var(--gruen-300);
}
.btn-sekundaer:hover { background: var(--gruen-200); }

.btn-neutral {
    color: var(--grau-700);
    background: var(--weiss);
    box-shadow: inset 0 0 0 1.5px var(--grau-300), var(--schatten-s);
}
.btn-neutral:hover { background: var(--grau-100); }

.btn-gefahr {
    color: var(--weiss);
    background: linear-gradient(160deg, #d35445, var(--rot));
    box-shadow: var(--schatten-s);
}
.btn-gefahr:hover { filter: brightness(1.06); }

.btn-gross { padding: .85em 1.9em; font-size: 1.05rem; }
.btn-klein { padding: .4em .95em; font-size: .85rem; }

/* Deutlicher Toggle (z.B. "Bei der BG registrieren?") */
.toggle-gross {
    display: inline-flex;
    border-radius: var(--radius-pill);
    background: var(--grau-100);
    padding: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}
.toggle-gross label {
    padding: .5em 1.4em;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 600;
    color: var(--grau-500);
    transition: all .15s ease;
}
.toggle-gross input { display: none; }
.toggle-gross input:checked + label.toggle-ja { background: var(--gruen-600); color: var(--weiss); box-shadow: var(--schatten-s); }
.toggle-gross input:checked + label.toggle-nein { background: var(--gruen-600); color: var(--weiss); box-shadow: var(--schatten-s); }

/* --- Grosse Reiter-Navigation ---------------------------------------------- */
.hauptnav {
    background: linear-gradient(175deg, var(--gruen-800), var(--gruen-900));
    padding: 0 clamp(12px, 3vw, 40px);
    box-shadow: var(--schatten-m);
    position: sticky;
    top: 0;
    z-index: 50;
}
.hauptnav-inner {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.hauptnav-marke {
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--weiss);
    font-weight: 700;
    font-size: 1.32rem;
    padding: 14px 18px 14px 0;
    margin-right: 12px;
    letter-spacing: -.01em;
}
.hauptnav-marke .logo-punkt {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gruen-300);
    box-shadow: 0 0 0 4px rgba(142, 211, 168, .25);
}
.hauptnav-marke .logo-bild {
    height: 46px; width: 46px;
    background: var(--weiss);
    border-radius: 50%;
    padding: 3px;
    object-fit: contain;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
#globale-suche::placeholder { color: rgba(255,255,255,.92); }
.zurueck-knopf {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin-bottom: 12px;
    padding: .35em .9em;
    border-radius: 99px;
    background: var(--weiss);
    border: 1px solid var(--grau-200);
    color: var(--grau-700);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
}
.zurueck-knopf:hover { background: var(--gruen-50); color: var(--gruen-800); }
.reiter {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .8em 1.5em;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    color: var(--gruen-200);
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
    position: relative;
    top: 0;
}
.reiter:hover { background: rgba(255,255,255,.09); color: var(--weiss); }
.reiter.aktiv {
    background: var(--creme);
    color: var(--gruen-800);
    box-shadow: 0 -4px 12px rgba(0,0,0,.10);
}
.hauptnav-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.hauptnav-rechts .benutzer { color: var(--gruen-200); font-size: .88rem; }
.konto-badge {
    /* kein Button-Look: freundlicher Hinweis-Text mit Smiley */
    display: flex;
    align-items: center;
    gap: .45em;
    color: #fff;
    font-size: .92rem;
    white-space: nowrap;
}
.konto-badge strong { font-weight: 700; }
.konto-badge .konto-kuerzel {
    background: rgba(255,255,255,.22);
    border-radius: 6px;
    padding: .1em .5em;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Unternavigation (z.B. Rechnungen: Uebersicht / Offene Kurse / Mahnwesen) */
.unternav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 6px;
    background: var(--grau-100);
    border-radius: var(--radius-pill);
    width: fit-content;
}
.unternav a {
    padding: .45em 1.2em;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: .92rem;
    color: var(--grau-500);
    text-decoration: none !important;
}
.unternav a:hover { color: var(--gruen-700); }
.unternav a.aktiv { background: var(--weiss); color: var(--gruen-800); box-shadow: var(--schatten-s); }

/* --- Layout ----------------------------------------------------------------- */
.inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 36px);
}
.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* --- Karten ------------------------------------------------------------------ */
.karte {
    background: var(--weiss);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
    padding: 22px 24px;
    border: 1px solid var(--grau-200);
}
.karte + .karte { margin-top: 18px; }
.karte-titel {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grau-500);
    margin-bottom: 12px;
}
.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.kachel {
    background: var(--weiss);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
    border: 1px solid var(--grau-200);
    padding: 20px;
    transition: box-shadow .18s ease, transform .18s ease;
}
a.kachel:hover { box-shadow: var(--schatten-m); transform: translateY(-2px); text-decoration: none; }
.kachel-zahl { font-size: 2rem; font-weight: 750; color: var(--gruen-700); line-height: 1.1; }
.kachel-label { color: var(--grau-500); font-size: .9rem; font-weight: 600; }

/* --- Formulare ---------------------------------------------------------------- */
.feld { margin-bottom: 16px; }
.feld label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 5px; color: var(--grau-700); }
.feld .hinweis { font-size: .82rem; color: var(--grau-500); margin-top: 4px; }
.eingabe, select.eingabe, textarea.eingabe {
    width: 100%;
    padding: .6em .9em;
    font: inherit;
    color: var(--grau-900);
    background: var(--weiss);
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius-s);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.eingabe:focus {
    outline: none;
    border-color: var(--gruen-500);
    box-shadow: 0 0 0 3px var(--gruen-200);
}
.eingabe.fehler { border-color: var(--rot); }
.formular-zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.formular-zeile .feld { flex: 1; min-width: 180px; }

/* --- Tabellen ------------------------------------------------------------------ */
.tabelle-umschlag { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--grau-200); background: var(--weiss); box-shadow: var(--schatten-s); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabelle th {
    text-align: left;
    padding: 12px 16px;
    background: var(--gruen-50);
    color: var(--gruen-800);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--gruen-200);
    white-space: nowrap;
}
.tabelle td { padding: 12px 16px; border-bottom: 1px solid var(--grau-100); vertical-align: middle; }
.tabelle tbody tr:hover { background: var(--gruen-50); }
.tabelle tbody tr:last-child td { border-bottom: none; }

/* --- Badges ---------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .22em .75em;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-gruen { background: var(--gruen-100); color: var(--gruen-800); }
.badge-gelb { background: var(--gelb-hell); color: var(--gelb); }
.badge-rot { background: var(--rot-hell); color: var(--rot); }
.badge-blau { background: var(--blau-hell); color: var(--blau); }
.badge-grau { background: var(--grau-100); color: var(--grau-500); }
.badge .punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- Flash-Meldungen ---------------------------------------------------------------- */
/* Block statt Flex: Flex frisst Leerzeichen zwischen Inline-Elementen (Links, strong) und zerreisst Fliesstext */
.flash { padding: 13px 18px; border-radius: var(--radius-m); margin-bottom: 16px; font-weight: 550; line-height: 1.55; }
.flash-erfolg { background: var(--gruen-100); color: var(--gruen-800); border: 1px solid var(--gruen-300); }
.flash-fehler { background: var(--rot-hell); color: var(--rot); border: 1px solid #f2c4be; }
.flash-info { background: var(--blau-hell); color: var(--blau); border: 1px solid #c4dcf0; }

/* --- Ampel (Compliance-Quoten, Lizenz-Ablauf) ----------------------------------------- */
.ampel { display: inline-flex; align-items: center; gap: .5em; font-weight: 650; }
.ampel .licht { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 -1px 2px rgba(0,0,0,.2); }
.ampel-gruen .licht { background: #35a45e; }
.ampel-gelb .licht { background: #e2af3a; }
.ampel-rot .licht { background: #d64545; }

/* --- Login-Seite ------------------------------------------------------------------------ */
.login-buehne {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1200px 600px at 85% -10%, var(--gruen-200), transparent),
        radial-gradient(900px 500px at -10% 110%, var(--gruen-100), transparent),
        var(--creme);
    padding: 24px;
}
.login-karte {
    width: 100%;
    max-width: 410px;
    background: var(--weiss);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
    padding: 38px 36px 32px;
    border: 1px solid var(--grau-200);
}
.login-marke { text-align: center; margin-bottom: 26px; }
.login-marke .name { font-size: 1.65rem; font-weight: 800; color: var(--gruen-800); letter-spacing: -.02em; }
.login-marke .claim { color: var(--grau-500); font-size: .9rem; margin-top: 2px; }

/* --- Schnellinfo-Panel (Slide-Over) --------------------------------------------------- */
.panel-hintergrund { position: fixed; inset: 0; background: rgba(20, 40, 28, .35); z-index: 90; }
.panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(480px, 94vw);
    background: var(--weiss);
    z-index: 91;
    box-shadow: var(--schatten-l);
    border-radius: var(--radius-l) 0 0 var(--radius-l);
    padding: 28px;
    overflow-y: auto;
}

/* --- Checkliste (gruen/rot) -------------------------------------------------------------- */
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste li { display: flex; align-items: center; gap: .6em; padding: .45em 0; border-bottom: 1px dashed var(--grau-200); }
.check-ok::before { content: '✓'; color: var(--gruen-600); font-weight: 800; }
.check-fehlt::before { content: '✗'; color: var(--rot); font-weight: 800; }

/* --- Fortschrittsanzeige (Buchungsstrecke) ---------------------------------------------- */
.schritte { display: flex; gap: 0; margin-bottom: 28px; }
.schritt { flex: 1; text-align: center; position: relative; color: var(--grau-400); font-size: .85rem; font-weight: 600; }
.schritt .kugel {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--grau-200);
    color: var(--grau-500);
    display: grid; place-items: center;
    margin: 0 auto 6px;
    font-weight: 700;
    position: relative; z-index: 2;
}
.schritt::before {
    content: '';
    position: absolute;
    top: 17px; left: -50%; right: 50%;
    height: 3px;
    background: var(--grau-200);
}
.schritt:first-child::before { display: none; }
.schritt.aktiv .kugel, .schritt.fertig .kugel { background: var(--gruen-600); color: var(--weiss); box-shadow: 0 0 0 5px var(--gruen-200); }
.schritt.fertig::before, .schritt.aktiv::before { background: var(--gruen-400); }
.schritt.aktiv { color: var(--gruen-800); }

/* --- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .hauptnav-inner { padding-bottom: 6px; }
    .reiter { padding: .6em 1em; font-size: .88rem; border-radius: var(--radius-s); }
    .reiter.aktiv { box-shadow: none; }
    .seitenkopf { flex-direction: column; align-items: stretch; }
}

/* --- Kleinkram ------------------------------------------------------------------------------ */
.text-klein { font-size: .85rem; color: var(--grau-500); }
.text-rechts { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }
.leer-hinweis {
    text-align: center;
    padding: 48px 20px;
    color: var(--grau-400);
    background: var(--weiss);
    border: 2px dashed var(--grau-200);
    border-radius: var(--radius-m);
}
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }