/* ==========================================================================
   SCE Tools · Gemeinsames Stylesheet
   --------------------------------------------------------------------------
   Eine Quelle für alle Tools. Änderungen hier wirken überall.
   Eingebunden über: <link rel="stylesheet" href="../shared/assets/style.css">

   Palette: direkt aus dem Vereinswappen abgeleitet (Kobaltblau + Signalrot),
   auf Bildschirmlesbarkeit abgestimmt und um kühle Neutraltöne ergänzt.

   Schriften: bewusst nur Systemschriften - keine externen Anbieter wie Google
   Fonts. Das vermeidet Datenübertragung an Dritte (DSGVO) und funktioniert
   auch ohne Internetverbindung zuverlässig.
   ========================================================================== */

:root {
    /* Wappenfarben, für Bildschirm abgestimmt */
    --blau:            #1E43D8;
    --blau-tief:       #1733A8;
    --blau-hauch:      #EDF1FE;
    --rot:             #E01B2E;
    --rot-tief:        #B01223;
    --rot-hauch:       #FDEDEF;

    /* Neutrale Töne */
    --tinte:           #0B1220;
    --tinte-weich:     #16203A;
    --text:            #1B2436;
    --text-schwach:    #616C82;
    --text-zart:       #8B95A8;
    --flaeche:         #F4F6FB;
    --leiste:          #FAFBFD;
    --karte:           #FFFFFF;
    --linie:           #E2E7F0;
    --linie-zart:      #EEF1F7;

    /* Statusfarben */
    --gruen:           #12855A;
    --gruen-hauch:     #E7F6EF;
    --gelb:            #9A6B00;
    --gelb-hauch:      #FDF3DF;

    /* Form */
    --radius-s:        8px;
    --radius:          12px;
    --radius-l:        16px;
    --schatten-s:      0 1px 2px rgba(11,18,32,.05);
    --schatten:        0 1px 2px rgba(11,18,32,.05), 0 4px 16px rgba(11,18,32,.06);
    --schatten-l:      0 2px 4px rgba(11,18,32,.06), 0 12px 32px rgba(11,18,32,.10);

    /* Schrift */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-daten: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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


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

/* ------------------------------------------------------------------ Inhalt */



h1 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    color: var(--tinte);
}

h2 {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    margin: 0 0 16px;
    color: var(--tinte);
}

.card {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-l);
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--schatten-s);
}

/* Kennzahl-Karten: große Zahl mit Ziffern gleicher Breite */
.card > h2:first-child + .hinweis,
.card h2 + .hinweis { margin-top: -8px; }

.top-aktionen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.top-aktionen h1 { margin: 0; }

.hinweis {
    color: var(--text-schwach);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
}

.leer-zustand {
    color: var(--text-schwach);
    text-align: center;
    padding: 44px 20px;
    font-size: 14px;
}

/* ---------------------------------------------------------------- Formulare */

.feld { margin-bottom: 18px; }

label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}

input[type=text],
input[type=password],
input[type=date],
input[type=number],
input[type=file],
select,
textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-s);
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}

input[type=number],
input[type=date] { font-variant-numeric: tabular-nums; }

textarea {
    min-height: 260px;
    font-family: var(--schrift-daten);
    font-size: 13px;
    line-height: 1.6;
}

input:hover, select:hover, textarea:hover { border-color: #C9D1E0; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blau);
    box-shadow: 0 0 0 3px rgba(30,67,216,.13);
}

input[type=checkbox] {
    width: auto;
    accent-color: var(--blau);
    margin-right: 7px;
    vertical-align: -1px;
}

.feld-zeile {
    display: flex;
    flex-wrap: wrap;
    margin-left: -9px;
    margin-right: -9px;
}
.feld-zeile > * {
    flex: 1 1 210px;
    margin-left: 9px;
    margin-right: 9px;
}

/* --------------------------------------------------------------- Schaltfl. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blau);
    color: #fff;
    border: 1px solid var(--blau);
    padding: 10px 18px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -.005em;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
    text-decoration: none;
}
.btn:hover {
    background: var(--blau-tief);
    border-color: var(--blau-tief);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--schatten-s);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
    outline: 2px solid var(--blau);
    outline-offset: 2px;
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Nebeneinanderstehende Schaltflächen brauchen Luft */
.btn + .btn { margin-left: 10px; }

.btn-sekundaer {
    background: #fff;
    color: var(--text);
    border-color: var(--linie);
}
.btn-sekundaer:hover {
    background: var(--flaeche);
    border-color: #C9D1E0;
    color: var(--text);
}

.btn-gefahr {
    background: var(--rot);
    border-color: var(--rot);
}
.btn-gefahr:hover { background: var(--rot-tief); border-color: var(--rot-tief); }

/* ---------------------------------------------------------------- Tabellen */

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    padding: 0 14px 10px;
    font-size: 11.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-zart);
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}

tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 14px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Beträge, Daten und Zahlen laufen mit gleich breiten Ziffern sauber
   untereinander - in einer Verwaltung mit vielen Zahlen deutlich lesbarer. */
tbody td { font-variant-numeric: tabular-nums; }

tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--blau-hauch); }
tbody tr:last-child td { border-bottom: none; }

.aktionen {
    display: flex;
    align-items: center;
    /* Symbole bleiben in einer Reihe. Mit Umbruch verrutschen sie beim
       Vergleichen zweier Zeilen gegeneinander und man greift daneben. */
    flex-wrap: nowrap;
    gap: 2px;
    white-space: nowrap;
}
/* Textverweise brauchen weiterhin Abstand, Symbole nicht */
.aktionen > a:not(.symbol-knopf),
.aktionen > button:not(.symbol-knopf) { margin-right: 14px; }
.aktionen > *:last-child { margin-right: 0; }
.aktionen form { display: inline; margin: 0; }
.aktionen a { font-size: 13.5px; font-weight: 500; }

/* Aktionen innerhalb einer Tabellenzeile sind Textlinks, keine Vollton-Knöpfe.
   Das hält lange Zeilen ruhig und verhindert, dass die Spalte umbricht. */
.aktionen .btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--blau);
    box-shadow: none;
}
.aktionen .btn:hover {
    background: none;
    color: var(--blau-tief);
    text-decoration: underline;
    box-shadow: none;
}
.aktionen .btn-gefahr { color: var(--rot); }
.aktionen .btn-gefahr:hover { color: var(--rot-tief); }

/* ------------------------------------------------------------- Rückmeldung */

.flash {
    padding: 13px 16px;
    border-radius: var(--radius);
    margin-bottom: 22px;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
}
.flash::before { margin-right: 10px; }
.flash::before {
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}
.flash-success {
    background: var(--gruen-hauch);
    border-color: rgba(18,133,90,.22);
    color: #0C6644;
}
.flash-success::before { content: "✓"; }
.flash-error {
    background: var(--rot-hauch);
    border-color: rgba(224,27,46,.22);
    color: var(--rot-tief);
}
.flash-error::before { content: "!"; }

/* ------------------------------------------------------------------- Login */

.login-wrapper {
    max-width: 400px;
    margin: 60px auto;
}
.login-wrapper .card { padding: 34px 32px; }
.login-wrapper h1 { font-size: 22px; margin-bottom: 8px; }

.login-wappen {
    width: 52px;
    height: auto;
    display: block;
    margin: 0 0 20px;
}

/* --------------------------------------------------------------- Sonstiges */

code {
    background: var(--linie-zart);
    padding: 2px 6px;
    border-radius: 5px;
    font-family: var(--schrift-daten);
    font-size: 12.5px;
    color: var(--tinte-weich);
}

.platzhalter-liste {
    font-size: 13px;
    color: var(--text-schwach);
    margin: 0;
}
.platzhalter-liste li { margin-bottom: 7px; }
.platzhalter-einfuegen {
    font-family: var(--schrift-daten) !important;
    font-size: 12px !important;
    padding: 4px 9px !important;
}

/* Quill-Editor an das Erscheinungsbild angleichen */
#quill-editor-wrapper .ql-toolbar {
    border-color: var(--linie);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    background: var(--flaeche);
}
#quill-editor-wrapper .ql-container {
    border-color: var(--linie);
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    font-size: 14.5px;
    font-family: var(--schrift);
}
#quill-editor-wrapper .ql-editor { min-height: 420px; line-height: 1.65; }
#inhalt { min-height: 420px; }

/* ------------------------------------------- Deploy-Tool: Protokoll & Prüfung */

.log { list-style: none; padding: 0; margin: 0; }
.log li {
    padding: 10px 14px;
    border-radius: var(--radius-s);
    margin-bottom: 7px;
    font-size: 13.5px;
    border: 1px solid transparent;
}
.log .ok      { background: var(--gruen-hauch); border-color: rgba(18,133,90,.2);  color: #0C6644; }
.log .fehler  { background: var(--rot-hauch);   border-color: rgba(224,27,46,.2);  color: var(--rot-tief); }
.log .info    { background: var(--flaeche);     border-color: var(--linie);        color: var(--text-schwach); }

.pruef td {
    padding: 10px 0;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 14px;
}
.pruef td:last-child {
    text-align: right;
    color: var(--text-schwach);
    font-family: var(--schrift-daten);
    font-size: 12.5px;
}
.pruef tr:last-child td { border-bottom: none; }
.pruef tbody tr:hover td { background: transparent; }

.ja   { color: var(--gruen); font-weight: 700; margin-right: 4px; }
.nein { color: var(--rot);   font-weight: 700; margin-right: 4px; }
.warn { color: var(--gelb);  font-weight: 700; margin-right: 4px; }

.modus-band {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.modus-band::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 7px;
}
.modus-erst   { background: var(--gelb-hauch);  color: var(--gelb); }
.modus-update { background: var(--gruen-hauch); color: var(--gruen); }

/* Hilfsklassen für wiederkehrende Formularanordnungen.
   Bewusst mit Außenabständen statt "gap" umgesetzt - so verhalten sie sich
   auch in älteren Browsern zuverlässig. */

/* Felder untereinander, mit gleichmäßigem Abstand */
.form-stapel > * { margin-bottom: 16px; }
.form-stapel > *:last-child { margin-bottom: 0; }
.form-stapel .feld { margin-bottom: 0; }

/* Felder nebeneinander, unten ausgerichtet (z.B. Filterzeilen) */
.form-reihe {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-reihe > * { margin-right: 12px; margin-bottom: 10px; }
.form-reihe > *:last-child { margin-right: 0; }
.form-reihe .feld { margin-bottom: 10px; }

/* Gruppe aus Beschriftung und mehreren Ankreuzfeldern */
.auswahlgruppe > label:first-child { margin-bottom: 8px; }
.auswahlgruppe label { font-weight: 400; display: block; margin-bottom: 5px; }
.auswahlgruppe > label:first-child { font-weight: 600; }

/* ------------------------------------------------------------------- Mobil */

@media (max-width: 720px) {
    .inhalt { padding: 24px 16px 60px; }
    .card { padding: 20px 18px; border-radius: var(--radius); }
    h1 { font-size: 22px; }
    table, thead, tbody, tr, td, th { display: block; }
    thead { display: none; }
    tbody tr {
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        margin-bottom: 12px;
        padding: 6px 4px;
    }
    tbody td { border-bottom: 1px solid var(--linie-zart); padding: 10px 12px; }
    tbody tr:hover td { background: transparent; }
    .aktionen { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Leiste für Aktionen auf mehrere ausgewählte Zeilen */
.massenleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--linie);
}
.massenleiste .hinweis { margin: 0 12px 0 0; }
.massenleiste .btn { margin-top: 4px; }

/* ==========================================================================
   Navigation als Seitenleiste
   Ersetzt die frühere Kopfleiste: Aus jedem Modul führt so immer ein Weg
   zu den anderen Modulen und zurück zur Startseite.
   ========================================================================== */

.zum-inhalt {
    position: absolute;
    left: -9999px;
    background: var(--blau);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-s);
    z-index: 200;
}
.zum-inhalt:focus { left: 12px; top: 12px; }

.leiste-schalter,
.leiste-knopf { display: none; }

.seitenleiste {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    /* Helle Fläche statt dunklem Block: Der dunkle Balken war die
       Hauptquelle der Schwere im Gesamtbild. */
    background: var(--leiste);
    border-right: 1px solid var(--linie);
    padding: 0 0 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 60;
}
.seitenleiste::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--blau) 0%, var(--blau) 50%, var(--rot) 50%, var(--rot) 100%);
}

.leiste-marke {
    display: flex;
    align-items: center;
    padding: 16px 16px 16px;
    margin: 0 10px 12px;
    border-bottom: 1px solid var(--linie-zart);
    color: var(--text);
    text-decoration: none;
}
.leiste-marke:hover { color: var(--text); text-decoration: none; }
.leiste-marke img { width: 30px; height: auto; margin-right: 11px; }
.leiste-marke span {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.leiste-marke small {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-zart);
    letter-spacing: .02em;
}

.leiste-gruppe { padding: 0 10px 16px; }

/* Aktueller Bereich: leicht abgesetzte Fläche, damit er sich von den
   übrigen Modulen abhebt. */
.leiste-aktuell {
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: var(--radius);
    margin: 0 10px 16px;
    padding: 12px 6px 8px;
}
.leiste-aktuell .leiste-titel { color: var(--text-schwach); }
.leiste-aktuell a:hover { background: #fff; }

.leiste-titel {
    display: block;
    padding: 0 8px 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-zart);
}

.seitenleiste a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.seitenleiste a:hover {
    background: var(--blau-hauch);
    color: var(--blau-tief);
    text-decoration: none;
}
.seitenleiste a.aktiv {
    background: var(--blau);
    color: #fff;
}
.seitenleiste a.aktiv:hover { background: var(--blau); color: #fff; }

.leiste-fuss {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid var(--linie-zart);
}
.leiste-konto { font-weight: 600 !important; }
.leiste-abmelden { font-size: 13px !important; color: var(--text-schwach) !important; }
.leiste-stand { color: var(--text-zart) !important; }

/* Weitere Module: etwas zurückgenommen gegenüber dem aktuellen Modul */
.leiste-gruppe + .leiste-gruppe a { color: var(--text-schwach); }

/* Inhalt neben der Leiste */
body.mit-leiste .inhalt { margin-left: 232px; }

.inhalt {
    max-width: 1180px;
    padding: 36px 32px 80px;
    position: relative;
}
.inhalt::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blau) 0%, var(--blau) 50%, var(--rot) 50%, var(--rot) 100%);
}
body.mit-leiste .inhalt::before { display: none; }

@media (max-width: 900px) {
    body.mit-leiste .inhalt { margin-left: 0; padding-top: 74px; }

    .leiste-knopf {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        padding: 0 16px;
        background: var(--tinte);
        border-top: 3px solid var(--blau);
        z-index: 70;
        cursor: pointer;
    }
    .leiste-knopf span {
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        margin-bottom: 4px;
    }
    .leiste-knopf span:first-of-type { margin-top: 2px; }
    .leiste-knopf em {
        font-style: normal;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        margin-left: 14px;
    }

    .seitenleiste {
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: 250px;
        box-shadow: 0 0 40px rgba(0,0,0,.35);
    }
    .leiste-schalter:checked ~ .seitenleiste { transform: translateX(0); }
    .leiste-schalter:checked ~ .leiste-knopf { background: var(--tinte-weich); }
}

/* Kennzeichnung von Positionen, die bereits in Rechnung gestellt wurden */
.marke-berechnet {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gelb-hauch);
    color: var(--gelb);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}
tbody tr.zeile-berechnet td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }

.leiste-stand {
    padding: 10px 10px 0;
    font-size: 11px;
    color: #5A6480;
}


/* ---------------------------------------------------------------
   Zeilenaktionen als Symbole

   Ein Symbol allein ist mehrdeutig, deshalb trägt jedes einen
   Tooltip und eine Beschriftung für Vorleseprogramme. Die Fläche
   ist bewusst mindestens 32px groß - darunter trifft man auf dem
   Tablet nicht zuverlässig.
   --------------------------------------------------------------- */
.symbol-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: none;
    color: var(--text-schwach);
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.symbol-knopf:hover {
    background: var(--blau-hauch);
    border-color: var(--linie);
    color: var(--blau);
    text-decoration: none;
}
.symbol-knopf.gefahr:hover {
    background: var(--rot-hauch);
    color: var(--rot);
}
.symbol-knopf:focus-visible {
    outline: 2px solid var(--blau);
    outline-offset: 1px;
}

td.aktionen {
    white-space: nowrap;
    width: 1%;
}
td.aktionen .symbol-knopf + .symbol-knopf { margin-left: 2px; }