/*
 * GDS Business Suite - Corporate Design
 *
 * Weiss, Anthrazit, GDS Orange. Keine Farbverlaeufe, keine dekorativen
 * Animationen. Desktop First mit Anpassung fuer kleinere Bildschirme.
 *
 * Grundsatz der Oberflaeche: Der Platz gehoert der Arbeit. Flaechen, die bei
 * taeglicher Nutzung nach dem zweiten Mal nicht mehr gelesen werden, gehoeren
 * nicht auf den Bildschirm.
 */

:root {
    --gds-orange: #ea6a20;
    --gds-orange-dunkel: #cf5a15;
    --gds-orange-hell: #fdf3ec;
    --anthrazit: #23282b;
    --anthrazit-hell: #333a3e;
    --anthrazit-linie: #3d4448;
    --text: #24282b;
    --text-schwach: #62696e;
    --linie: #e2e6e9;
    --flaeche: #f5f7f8;
    --weiss: #ffffff;
    --gruen: #2f7a3e;
    --rot: #b3261e;
    --gelb: #a86a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--flaeche);
}

a { color: var(--gds-orange); }

/* ---------------------------------------------------------- Anmeldung */

.anmeldung {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--anthrazit);
}

.anmeldung__karte {
    width: 100%;
    max-width: 25rem;
    background: var(--weiss);
    padding: 2.5rem;
    border-radius: 4px;
}

.anmeldung__logo { display: block; height: 3.25rem; margin: 0 auto 1.5rem; }
.anmeldung__titel { font-size: 1.05rem; font-weight: 600; margin: 0; text-align: center; }
.anmeldung__untertitel { color: var(--text-schwach); font-size: .9rem; margin: .15rem 0 1.5rem; text-align: center; }

/* ------------------------------------------------------ Rahmenlayout */

/*
 * Menuesteuerung ohne Skript.
 *
 * Ein verstecktes Kontrollkaestchen haelt den Zustand; die Beschriftungen im
 * Kopf schalten ihn um. So funktioniert das Menue auch, wenn ein Skript
 * blockiert wird.
 *
 * Der Schalter bedeutet "vom Ueblichen abweichend": Am Arbeitsplatz ist die
 * Seitenleiste sichtbar und wird durch ihn eingeklappt, auf kleinen
 * Bildschirmen ist sie verborgen und wird durch ihn eingeblendet. Ein Zustand
 * fuer beide Faelle waere entweder am Rechner laestig oder am Telefon nutzlos.
 */
.menuschalter { position: absolute; opacity: 0; pointer-events: none; }

.rahmen { display: flex; min-height: 100vh; }

.seitenleiste {
    width: 15.5rem;
    flex-shrink: 0;
    background: var(--anthrazit);
    color: #c2c9cd;
    display: flex;
    flex-direction: column;
}

.seitenleiste__kopf { padding: 1.25rem 1.25rem 1.1rem; }

.seitenleiste__logo {
    display: block;
    background: var(--weiss);
    border-radius: 6px;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
}

.seitenleiste__logo img { display: block; width: 100%; height: auto; }
.seitenleiste__name { color: var(--weiss); font-weight: 600; font-size: .95rem; }
.seitenleiste__zusatz { color: #838c92; font-size: .78rem; }

.seitenleiste__navigation { padding: .5rem 0 1rem; flex: 1; }

.seitenleiste__gruppe {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7c858b;
    padding: 1.1rem 1.25rem .35rem;
}

/* ------------------------------------------------- Einklappbare Bereiche */

/*
 * Die Gruppen der Seitenleiste sind <details>-Elemente. Offen ist, wo man
 * gerade arbeitet; alles andere bleibt zu. Das Verhalten steckt im Browser
 * und braucht kein Skript.
 */
.seitenleiste__bereich > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.25rem;
    color: #9aa3a9;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.seitenleiste__bereich > summary::-webkit-details-marker { display: none; }

/* Ein Winkel statt des voreingestellten Dreiecks: ruhiger und drehbar. */
.seitenleiste__bereich > summary::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .12s ease;
    flex-shrink: 0;
}

.seitenleiste__bereich[open] > summary::before { transform: rotate(45deg); }
.seitenleiste__bereich > summary:hover { color: var(--weiss); }
.seitenleiste__bereich > a { padding-left: 2.4rem; }

/* Eine geschlossene Gruppe mit aktivem Eintrag darf nicht verschwinden. */
.seitenleiste__bereich:not([open]) > summary { color: #7c858b; }

.seitenleiste a.einzeln { font-weight: 600; }

.seitenleiste a {
    display: block;
    padding: .5rem 1.25rem;
    color: #c2c9cd;
    text-decoration: none;
    font-size: .9rem;
    border-left: 3px solid transparent;
}

.seitenleiste a:hover { background: var(--anthrazit-hell); color: var(--weiss); }

.seitenleiste a.aktiv {
    background: var(--gds-orange);
    color: var(--weiss);
    border-left-color: var(--gds-orange-dunkel);
    font-weight: 600;
}

.seitenleiste__fuss {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--anthrazit-linie);
    display: flex;
    align-items: center;
    gap: .7rem;
}

.seitenleiste__zeichen {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gds-orange);
    color: var(--weiss);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
}

.seitenleiste__benutzer { min-width: 0; }
.seitenleiste__benutzer strong { display: block; color: var(--weiss); font-size: .85rem; font-weight: 600; }
.seitenleiste__benutzer span { display: block; color: #838c92; font-size: .75rem; }

.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Schaltflaeche zum Ein- und Ausblenden des Menues. */
.menuknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 1px solid var(--linie);
    border-radius: 3px;
    background: var(--weiss);
    cursor: pointer;
    color: var(--text);
}

.menuknopf:hover { background: var(--flaeche); }
.menuknopf span { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; }
.menuknopf span::before,
.menuknopf span::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.menuknopf span::before { top: -6px; }
.menuknopf span::after { top: 6px; }

/* Nur fuer Vorlesegeraete sichtbar. */
.nurlesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Flaeche zum Schliessen, wenn das Menue ueberlagert. */
.menuschatten { display: none; }

.kopfzeile {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    padding: .8rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kopfzeile__titel { font-size: 1.05rem; font-weight: 600; margin: 0; }
.kopfzeile__version { color: var(--text-schwach); font-size: .78rem; }

.bereich { padding: 1.5rem 1.75rem 2.5rem; flex: 1; }

/* ------------------------------------------------------------- Karten */

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    display: block;
    text-decoration: none;
    color: inherit;
}

a.karte:hover { border-color: var(--gds-orange); }

.karte__titel { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-schwach); margin: 0 0 .4rem; }
.karte__wert { font-size: 1.65rem; font-weight: 700; margin: 0; line-height: 1.2; }
.karte__hinweis { font-size: .8rem; color: var(--text-schwach); margin: .3rem 0 0; }

.block {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: 1.4rem 1.5rem;
    margin-top: 1.25rem;
}

.block__titel { font-size: .98rem; margin: 0 0 1rem; }
.block__leer { color: var(--text-schwach); margin: 0; font-size: .9rem; }

/* Zweispaltiger Bereich fuer das Dashboard. */
.spalten { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; }
.spalten > .block { margin-top: 0; }

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

label { display: block; font-weight: 600; font-size: .85rem; margin: 1.1rem 0 .3rem; }

/* Zwei Felder nebeneinander; auf schmalen Bildschirmen untereinander. */
.felder-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=file], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #c8ced2;
    border-radius: 3px;
    font-size: .95rem;
    font-family: inherit;
    background: var(--weiss);
    color: var(--text);
}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--gds-orange); outline-offset: -1px; }

.schaltflaeche {
    display: inline-block;
    background: var(--gds-orange);
    color: var(--weiss);
    border: 0;
    border-radius: 3px;
    padding: .65rem 1.4rem;
    font-size: .93rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.schaltflaeche:hover { background: var(--gds-orange-dunkel); color: var(--weiss); }
.schaltflaeche:disabled { background: #c8ced2; cursor: not-allowed; }
.schaltflaeche--voll { width: 100%; margin-top: 1.75rem; }

.schaltflaeche--schlicht {
    background: transparent;
    color: var(--text-schwach);
    border: 1px solid #c8ced2;
    padding: .42rem .9rem;
    font-size: .84rem;
}

.schaltflaeche--schlicht:hover { background: var(--flaeche); color: var(--text); }

/*
 * Senkrechte Liste von Schnellzugriffen.
 *
 * Module stehen oben und tragen den kraeftigen Farbton, ihre Unterpunkte
 * einen abgesetzten hellen. Eintraege des Systems folgen darunter neutral.
 * So ist auf einen Blick erkennbar, was Fachbereich und was Verwaltung ist.
 */
.schnellzugriff { display: flex; flex-direction: column; gap: .4rem; }
.schnellzugriff .schaltflaeche { text-align: left; }

.schaltflaeche--modul {
    background: var(--anthrazit);
    color: var(--weiss);
    border-left: 4px solid var(--gds-orange);
    font-weight: 600;
}

.schaltflaeche--modul:hover { background: var(--anthrazit-hell); color: var(--weiss); }

.schaltflaeche--untermodul {
    background: var(--gds-orange-hell);
    color: var(--gds-orange-dunkel);
    border-left: 4px solid var(--gds-orange);
    font-weight: 500;
    padding-left: 1.9rem;
    font-size: .88rem;
}

.schaltflaeche--untermodul:hover { background: #f9e6d8; color: var(--gds-orange-dunkel); }

.schnellzugriff .schaltflaeche--schlicht { border-left: 4px solid var(--linie); }

.hinweis { font-size: .8rem; color: var(--text-schwach); margin: .3rem 0 0; }
.feldfehler { color: var(--rot); font-size: .8rem; margin: .3rem 0 0; }

/* -------------------------------------------------------- Meldungen */

.meldung { border-left: 3px solid var(--linie); background: var(--weiss); padding: .85rem 1.1rem; margin: 0 0 1.25rem; font-size: .9rem; border-radius: 0 3px 3px 0; }
.meldung--fehler { border-color: var(--rot); background: #fdf3f2; }
.meldung--erfolg { border-color: var(--gruen); background: #f2f8f3; }
.meldung--warnung { border-color: var(--gelb); background: #fdf8ef; }
.meldung--information { border-color: var(--gds-orange); background: var(--gds-orange-hell); }

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

.tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--text-schwach); padding: .5rem .65rem; border-bottom: 2px solid var(--linie); }
.tabelle td { padding: .5rem .65rem; border-bottom: 1px solid var(--linie); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--flaeche); }

.marke { display: inline-block; font-size: .74rem; padding: .1rem .45rem; border: 1px solid var(--linie); border-radius: 2px; background: var(--flaeche); color: var(--text-schwach); }

/* ------------------------------------------- Anpassung an die Bildschirmgroesse */

/* Zwei Spalten werden ab hier zu einer. */
@media (max-width: 66rem) {
    .spalten { grid-template-columns: 1fr; }
    .felder-zwei { grid-template-columns: 1fr !important; }
}

/*
 * Am Arbeitsplatz bleibt die Seitenleiste sichtbar; der Knopf klappt sie ein.
 * Sie belegt dort nur einen Bruchteil der Breite, und die Orientierung ueber
 * die vorhandenen Bereiche ist mehr wert als der gewonnene Platz.
 */
@media (min-width: 69rem) {
    .menuschalter:checked ~ .rahmen .seitenleiste { display: none; }
}

/*
 * Auf kleineren Bildschirmen ist die Seitenleiste verborgen und ueberlagert
 * bei Bedarf den Inhalt. Sie schiebt ihn nicht beiseite: Auf einem Telefon
 * bliebe sonst nichts uebrig.
 */
@media (max-width: 68.99rem) {
    .seitenleiste { display: none; }

    .menuschalter:checked ~ .rahmen .seitenleiste {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 17rem;
        max-width: 85vw;
        z-index: 20;
        overflow-y: auto;
        box-shadow: 0 0 2rem rgba(0, 0, 0, .35);
    }

    .menuschalter:checked ~ .rahmen .menuschatten {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10;
        background: rgba(35, 40, 43, .45);
        cursor: pointer;
    }

    .bereich { padding: 1rem; }
    .kopfzeile { padding: .7rem 1rem; }
    .kopfzeile__version { display: none; }
}

/* Telefon. */
@media (max-width: 34rem) {
    body { font-size: 15px; }

    .bereich { padding: .75rem; }
    .block { padding: 1rem 1rem; border-radius: 3px; }
    .block__titel { font-size: .95rem; }
    .karten { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .karte { padding: .8rem .9rem; }
    .karte__wert { font-size: 1.35rem; }

    /*
     * Breite Tabellen laufen sonst aus dem Bild. Statt Spalten auszublenden
     * bleibt die Tabelle vollstaendig und der Block wird seitlich
     * verschiebbar: Welche Spalte im Einzelfall entbehrlich ist, weiss die
     * Anwendung nicht.
     *
     * Verschoben wird der Block, nicht die Tabelle selbst. Eine Tabelle mit
     * "display: block" verliert ihre Spaltenausrichtung.
     */
    .block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabelle { font-size: .82rem; }
    .tabelle th, .tabelle td { padding: .45rem .5rem; white-space: nowrap; }

    /* Lange Fliesstexte in Zellen duerfen umbrechen. */
    .tabelle td > div, .tabelle td p { white-space: normal; }

    /* Eingabefelder und Schaltflaechen mit ausreichender Trefferflaeche. */
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=url], select, textarea { font-size: 16px; padding: .6rem .7rem; }

    .schaltflaeche { padding: .7rem 1.1rem; }
    .schaltflaeche--schlicht { padding: .5rem .9rem; }

    /* Nebeneinanderstehende Schaltflaechen brechen um. */
    .block form + form, .block .schaltflaeche + .schaltflaeche { margin-top: .4rem; }
}

/*
 * Auf Beruehrungsgeraeten sind Schaltflaechen in Tabellen zu klein. Die
 * Abfrage greift nur dort und laesst die Maus unberuehrt.
 */
@media (pointer: coarse) {
    .tabelle .schaltflaeche--schlicht { padding: .55rem 1rem; }
    .seitenleiste a { padding: .7rem 1.25rem; }
}

/* --------------------------------------------------- Vorschlagsliste */

/*
 * Eigene Liste statt des HTML-Elements "datalist": Dessen Verhalten
 * unterscheidet sich je nach Browser erheblich, und die Beschriftung wird
 * nicht ueberall angezeigt.
 */
.vorschlaege {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(35, 40, 43, .12);
    max-height: 15rem;
    overflow-y: auto;
    display: none;
}

.vorschlaege button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linie);
    padding: .5rem .7rem;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}

.vorschlaege button:last-child { border-bottom: 0; }
.vorschlaege button:hover { background: var(--flaeche); }
.vorschlaege .nebentext { display: block; color: var(--text-schwach); font-size: .85em; }

/* --------------------------------------------------------------- Dateien */

/*
 * Flaeche zum Hineinziehen von Dateien.
 *
 * Sie wird von app.js um jedes Auswahlfeld gelegt. Ohne Skript bleibt das
 * gewoehnliche Feld - die Flaeche ist eine Erleichterung, keine Bedingung.
 */
.dateiablage {
    border: 1px dashed var(--linie);
    border-radius: 4px;
    padding: .6rem;
    background: var(--flaeche);
}

.dateiablage--bereit {
    border-color: var(--gds-orange);
    border-style: solid;
    background: var(--gds-orange-hell);
}

.dateiablage__hinweis {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--text-schwach);
}

.dateiablage--bereit .dateiablage__hinweis { color: var(--gds-orange); font-weight: 600; }

.dateiablage__meldung {
    margin: .2rem 0 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gruen);
}

.dateiablage__meldung:empty { display: none; }

/* Auf schmalen Bildschirmen zieht niemand Dateien - dort nimmt der Hinweis
   nur Platz weg. */
@media (max-width: 640px) {
    .dateiablage { border: 0; padding: 0; background: none; }
    .dateiablage__hinweis { display: none; }
}

/* Vier Felder nebeneinander, auf schmalen Bildschirmen untereinander. */
.felder-vier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .8rem;
}