/* Gestaltung angelehnt an apily: dunkler Kopfbalken, helle Fläche, Tabellen ohne
   senkrechte Linien. Farben aus dem apily-Bildausschnitt gemessen. */
:root {
    --balken: #1f3864; --balken-text: #dfe6f2; --text: #1d2433; --leise: #5b6475;
    --linie: #d6dae0; --grund: #f4f5f7; --flaeche: #ffffff;
    --akzent: #1f3864; --fehler: #b3261e; --ok: #1e7a3c; --hinweis: #8a5a00;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--grund); }
a { color: var(--akzent); }
:focus-visible { outline: 2px solid #8bb4e8; outline-offset: 2px; }

/* Kopfbalken */
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; min-height: 56px; padding: .5rem 2.9rem; background: var(--balken); color: var(--balken-text); }
.kopf a { color: var(--balken-text); text-decoration: none; }
.kopf a:hover { color: #ffffff; }
.kopf .marke { display: inline-flex; align-items: center; gap: .55rem; color: #ffffff; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; }
.kopf .marke img { display: block; height: 27px; width: auto; }
.menue, .konto { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.konto { margin-left: auto; }
.kopf .aktiv { color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.trenner { width: 1px; height: 18px; background: rgba(255, 255, 255, .3); }
.kopf form { margin: 0; }
.kopf button.abmelden { background: transparent; border: 0; padding: 0; color: var(--balken-text); font: inherit; cursor: pointer; }
.kopf button.abmelden:hover { color: #ffffff; }
.kopf .name { color: #ffffff; }

/* Inhalt */
main { max-width: 1380px; margin: 0; padding: 1.5rem 2.9rem 3rem; }
h1 { margin: .25rem 0 1.25rem; font-size: 1.75rem; font-weight: 700; color: var(--balken); }
h2 { font-size: 1.2rem; color: var(--balken); margin: 2rem 0 .75rem; }

/* Tabellen */
.liste { border-collapse: collapse; background: var(--flaeche); margin-bottom: 1rem; min-width: min(100%, 720px); }
.liste th, .liste td { padding: .75rem .65rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.liste thead th { font-weight: 600; border-bottom: 2px solid var(--balken); }
.liste th { font-weight: 600; }
.liste a { color: var(--text); text-decoration: none; font-weight: 500; }
.liste a:hover { color: var(--akzent); text-decoration: underline; }
.liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.st-aktiv { color: var(--ok); font-weight: 600; }
.st-gesperrt { color: var(--fehler); font-weight: 600; }
.st-anonymisiert { color: var(--leise); font-style: italic; }
.status-gesperrt td { color: var(--leise); }
.status-anonymisiert td { color: var(--leise); font-style: italic; }
.sie { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border: 1px solid var(--linie); border-radius: 3px; font-size: .75rem; color: var(--leise); }
td.ok { color: var(--ok); } td.fehler { color: var(--fehler); }

/* Formulare und Knöpfe */
.formular { display: grid; gap: 1rem; max-width: 460px; background: var(--flaeche); padding: 1.5rem; border: 1px solid var(--linie); border-radius: 4px; }
.formular p { margin: 0; }
label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--text); }
input, select { font: inherit; font-weight: 400; padding: .55rem .65rem; border: 1px solid #c3c9d2; border-radius: 4px; background: var(--flaeche); color: var(--text); }
button { font: inherit; padding: .5rem 1rem; border: 1px solid var(--akzent); border-radius: 4px; background: var(--akzent); color: #fff; cursor: pointer; font-weight: 600; }
button:hover { background: #2a4a82; }
.knopf { display: inline-block; padding: .5rem 1rem; border-radius: 4px; background: var(--akzent); color: #fff; text-decoration: none; font-weight: 600; }
.knopf:hover { background: #2a4a82; color: #fff; }
.abschnitte { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 1.25rem 0; }
.abschnitte .formular { max-width: none; align-content: start; }
.gefahr { border-color: var(--fehler); }
.gefahr button { background: var(--fehler); border-color: var(--fehler); }
label.kasten { display: flex; gap: .5rem; align-items: center; font-weight: 400; }

/* Meldungen */
.meldung { padding: .65rem .9rem; border-radius: 4px; border-left: 4px solid; background: var(--flaeche); }
.meldung.fehler { border-color: var(--fehler); } .meldung.erfolg { border-color: var(--ok); } .meldung.hinweis { border-color: var(--hinweis); }
code { background: #e9ecf1; padding: .05rem .3rem; border-radius: 3px; }

@media (max-width: 700px) {
    .kopf, main { padding-left: 1rem; padding-right: 1rem; }
    .konto { margin-left: 0; }
}

/* Mobil: Die Verwaltung muss auch unterwegs bedienbar sein. Eingabefelder mit
   16px Schrift (sonst zoomen iPhones beim Antippen), Knöpfe gross genug zum
   Antippen, breite Tabellen seitlich wischbar statt der ganzen Seite. */
@media (pointer: coarse), (max-width: 700px) {
    input, select, button { font-size: 16px; min-height: 44px; }
    label.kasten input { min-height: 0; width: 22px; height: 22px; }
}
@media (max-width: 700px) {
    .kopf { gap: .4rem 1.1rem; padding-top: .6rem; padding-bottom: .6rem; }
    .konto { width: 100%; justify-content: flex-start; }
    h1 { font-size: 1.4rem; }
    main { padding-top: 1rem; }
    .liste { display: block; overflow-x: auto; max-width: 100%; }
    .liste td, .liste th { white-space: nowrap; }
    .formular { padding: 1rem; }
    .abschnitte { grid-template-columns: minmax(0, 1fr); }
}

/* Import */
.hinweis-text { margin: 0; font-size: .88rem; color: var(--leise); }
button.leise-knopf { background: var(--flaeche); color: var(--akzent); border-color: #c3c9d2; font-weight: 500; padding: .35rem .75rem; }
button.leise-knopf:hover { background: #eef1f6; }
input[type="file"] { padding: .45rem; background: var(--flaeche); }

/* Kästen begrenzen ihren Inhalt: Ein Auswahlfeld mit langem Eintrag darf einen
   Kasten nicht breiter machen und in den Nachbarkasten ragen. */
.abschnitte > * { min-width: 0; }
.formular { grid-template-columns: minmax(0, 1fr); }
.formular select, .formular input:not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 100%; }

.formular button + button { margin-top: .5rem; }