/* ===========================================================================
   Schichtbuch - Gestaltung
   ---------------------------------------------------------------------------
   Das Erscheinungsbild ist auf die Plattform-Anwendung abgestimmt, damit beide
   Anwendungen nebeneinander stimmig wirken: gleiche Farbwerte, gleiche
   Abstands- und Radienstaffel, gleiche Schriftgroessen, gleiche Kopfzeilen-
   und Seitenleistenmasse.

   Uebernommen sind ausschliesslich die gestalterischen Werte. Es werden keine
   Dateien, Klassennamen, Komponenten oder Projektverweise der Plattform
   verwendet; die Bezeichner bleiben deutsch und diesem Projekt eigen.
   =========================================================================== */

:root {
    /* -- Grundfarben ----------------------------------------------------- */
    --sb-weiss: #ffffff;
    --sb-neutral-50: #f6f8fb;
    --sb-neutral-100: #f3f6fa;
    --sb-neutral-200: #c7d0dc;
    --sb-neutral-500: #68758a;
    --sb-neutral-700: #48566b;
    --sb-neutral-900: #152033;
    --sb-blau-600: #2563eb;
    --sb-blau-700: #1d4ed8;
    --sb-blau-zart: rgb(37 99 235 / 0.18);

    /* -- Abstaende ------------------------------------------------------- */
    --sb-abstand-0-5: 0.25rem;
    --sb-abstand-0-75: 0.375rem;
    --sb-abstand-1: 0.5rem;
    --sb-abstand-1-5: 0.75rem;
    --sb-abstand-2: 1rem;
    --sb-abstand-2-5: 1.25rem;
    --sb-abstand-3: 1.5rem;
    --sb-abstand-4: 2rem;

    /* -- Rahmen und Radien ----------------------------------------------- */
    --sb-rahmenbreite: 0.0625rem;
    --sb-radius-2: 0.125rem;
    --sb-radius-4: 0.25rem;
    --sb-radius-8: 0.625rem;
    --sb-radius-rund: 999px;

    /* -- Schatten -------------------------------------------------------- */
    --sb-schatten-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.22);
    --sb-schatten-2: 0 0.375rem 1.125rem rgb(0 0 0 / 0.24);

    /* -- Schrift --------------------------------------------------------- */
    --sb-schrift: system-ui, "Segoe UI", sans-serif;
    --sb-schriftgroesse-anzeige: 2rem;
    --sb-schriftgroesse-ueberschrift-1: 1.625rem;
    --sb-schriftgroesse-ueberschrift-2: 1.25rem;
    --sb-schriftgroesse-ueberschrift-3: 1rem;
    --sb-schriftgroesse: 0.9375rem;
    --sb-schriftgroesse-klein: 0.8125rem;
    --sb-schriftgroesse-winzig: 0.75rem;
    --sb-zeilenhoehe-eng: 1.2;
    --sb-zeilenhoehe: 1.5;
    --sb-schriftstaerke-normal: 400;
    --sb-schriftstaerke-mittel: 600;
    --sb-schriftstaerke-stark: 700;

    /* -- Masse ----------------------------------------------------------- */
    --sb-kopfzeile-hoehe: 3.5rem;
    --sb-seitenleiste-breite: 14rem;
    --sb-inhalt-max: 76rem;
    --sb-bedienelement-hoehe: 2.25rem;

    /* Einheitliche Masse aller Schaltflaechen. Die Breite ist ein Mindestmass:
       Kurze Beschriftungen wirken dadurch nicht gedrungen, lange duerfen
       darueber hinauswachsen. */
    --sb-schaltflaeche-hoehe: 2.5rem;
    --sb-schaltflaeche-breite: 7rem;
    --sb-bedienelement-hoehe-klein: 2rem;

    /* -- Bewegung -------------------------------------------------------- */
    --sb-dauer-1: 120ms;
    --sb-dauer-2: 180ms;
    --sb-verlauf: cubic-bezier(0.2, 0, 0, 1);

    /* -- Bedeutungsfarben, helles Erscheinungsbild ----------------------- */
    --sb-hintergrund: var(--sb-neutral-50);
    --sb-hintergrund-seite: var(--sb-neutral-100);
    --sb-flaeche: var(--sb-weiss);
    --sb-flaeche-gedaempft: var(--sb-neutral-100);
    --sb-flaeche-hervorgehoben: #e8edf4;
    --sb-rand: var(--sb-neutral-200);
    --sb-rand-stark: #9daabe;
    --sb-text: var(--sb-neutral-900);
    --sb-text-sekundaer: var(--sb-neutral-700);
    --sb-text-gedaempft: var(--sb-neutral-500);
    --sb-aktion: var(--sb-blau-600);
    --sb-aktion-stark: var(--sb-blau-700);
    --sb-aktion-zart: var(--sb-blau-zart);
    --sb-auf-aktion: var(--sb-weiss);
    --sb-info: var(--sb-blau-600);
    --sb-erfolg: #15803d;
    --sb-warnung: #b7791f;
    --sb-gefahr: #b91c1c;
    --sb-fokusring: 0 0 0 0.1875rem rgb(37 99 235 / 0.18);
    --sb-navigation-flaeche: var(--sb-flaeche);
    --sb-navigation-schweben: var(--sb-flaeche-hervorgehoben);
    --sb-navigation-aktiv: var(--sb-aktion-zart);
}

/* -- Dunkles Erscheinungsbild ------------------------------------------------
   Wie in der Plattform-Anwendung ueber ein Attribut am Wurzelelement
   umschaltbar; zusaetzlich folgt das Schichtbuch der Systemeinstellung. */

[data-sb-erscheinungsbild="dunkel"] {
    --sb-hintergrund: #11151b;
    --sb-hintergrund-seite: #171c24;
    --sb-flaeche: #1c222c;
    --sb-flaeche-gedaempft: #222a35;
    --sb-flaeche-hervorgehoben: #29323f;
    --sb-rand: #303a48;
    --sb-rand-stark: #435066;
    --sb-text: #f3f6fa;
    --sb-text-sekundaer: #a7b2c2;
    --sb-text-gedaempft: #77859a;
    --sb-aktion: #3b82f6;
    --sb-aktion-stark: #60a5fa;
    --sb-aktion-zart: rgb(59 130 246 / 0.14);
    --sb-info: #60a5fa;
    --sb-erfolg: #4ade80;
    --sb-warnung: #fbbf24;
    --sb-gefahr: #f87171;
    --sb-navigation-flaeche: var(--sb-flaeche);
    --sb-navigation-schweben: var(--sb-flaeche-hervorgehoben);
    --sb-navigation-aktiv: var(--sb-aktion-zart);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-sb-erscheinungsbild="hell"]) {
        --sb-hintergrund: #11151b;
        --sb-hintergrund-seite: #171c24;
        --sb-flaeche: #1c222c;
        --sb-flaeche-gedaempft: #222a35;
        --sb-flaeche-hervorgehoben: #29323f;
        --sb-rand: #303a48;
        --sb-rand-stark: #435066;
        --sb-text: #f3f6fa;
        --sb-text-sekundaer: #a7b2c2;
        --sb-text-gedaempft: #77859a;
        --sb-aktion: #3b82f6;
        --sb-aktion-stark: #60a5fa;
        --sb-aktion-zart: rgb(59 130 246 / 0.14);
        --sb-info: #60a5fa;
        --sb-erfolg: #4ade80;
        --sb-warnung: #fbbf24;
        --sb-gefahr: #f87171;
    }
}

/* -- Grundlagen ------------------------------------------------------------- */

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

/* Der Browser gestaltet Formularfelder, Bildlaufleisten und Auswahlpfeile
   selbst. Womit er das tut, steuert color-scheme - und das muss dem hier
   gewaehlten Erscheinungsbild folgen, nicht der Systemeinstellung.

   Stuende hier "light dark", richtete sich der Browser nach dem Betriebssystem:
   Bei hellem System und dunkel gestelltem Schichtbuch schriebe er schwarze
   Schrift in ein dunkles Eingabefeld. */

html {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    html:not([data-sb-erscheinungsbild="hell"]) {
        color-scheme: dark;
    }
}

html[data-sb-erscheinungsbild="dunkel"] {
    color-scheme: dark;
}

html[data-sb-erscheinungsbild="hell"] {
    color-scheme: light;
}

html,
body {
    margin: 0;
    font-family: var(--sb-schrift);
    font-size: var(--sb-schriftgroesse);
    line-height: var(--sb-zeilenhoehe);
    color: var(--sb-text);
    background-color: var(--sb-hintergrund);
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: var(--sb-zeilenhoehe-eng);
    font-weight: var(--sb-schriftstaerke-medium, var(--sb-schriftstaerke-mittel));
}

h1 { font-size: var(--sb-schriftgroesse-ueberschrift-1); }
h2 { font-size: var(--sb-schriftgroesse-ueberschrift-2); }
h3 { font-size: var(--sb-schriftgroesse-ueberschrift-3); }

h1:focus {
    outline: none;
}

a {
    color: var(--sb-aktion);
    text-decoration: none;
}

a:hover {
    color: var(--sb-aktion-stark);
    text-decoration: underline;
}

:focus-visible {
    outline: none;
    box-shadow: var(--sb-fokusring);
}

/* Validierungshinweise der Blazor-Formulare. */

.valid.modified:not([type=checkbox]) {
    outline: var(--sb-rahmenbreite) solid var(--sb-erfolg);
}

.invalid {
    outline: var(--sb-rahmenbreite) solid var(--sb-gefahr);
}

.validation-message {
    color: var(--sb-gefahr);
}

/* Auffangnetz fuer unbehandelte Fehler in einer Komponente. */

.blazor-error-boundary {
    padding: var(--sb-abstand-2);
    border: var(--sb-rahmenbreite) solid var(--sb-gefahr);
    border-radius: var(--sb-radius-4);
    background: var(--sb-flaeche);
    color: var(--sb-gefahr);
}

.blazor-error-boundary::after {
    content: "Es ist ein unerwartetes Problem aufgetreten.";
}

/* ===========================================================================
   Anwendungshuelle: Kopfzeile, Seitenleiste, Inhalt
   =========================================================================== */

.huelle {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--sb-hintergrund);
}

/* Sprungziel fuer die Tastaturbedienung. */
.huelle__sprunglink {
    position: absolute;
    left: -1000rem;
    z-index: 500;
}

.huelle__sprunglink:focus {
    left: var(--sb-abstand-2);
    top: var(--sb-abstand-1);
    padding: var(--sb-abstand-1) var(--sb-abstand-2);
    border-radius: var(--sb-radius-4);
    background: var(--sb-flaeche);
    box-shadow: var(--sb-schatten-2);
}

/* Steuert die Seitenleiste auf schmalen Geraeten ohne JavaScript. */
.huelle__schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -- Kopfzeile -------------------------------------------------------------- */

.kopfzeile {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--sb-abstand-1-5);
    height: var(--sb-kopfzeile-hoehe);
    padding-inline: var(--sb-abstand-2);
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-rand);
    background-color: var(--sb-navigation-flaeche);
}

.kopfzeile__marke {
    font-size: var(--sb-schriftgroesse-ueberschrift-2);
    font-weight: var(--sb-schriftstaerke-stark);
    letter-spacing: -0.01em;
    color: var(--sb-text);
}

.kopfzeile__marke:hover {
    color: var(--sb-text);
    text-decoration: none;
}

.kopfzeile__erscheinungsbild {
    margin-left: auto;
    width: var(--sb-bedienelement-hoehe);
    height: var(--sb-bedienelement-hoehe);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background: var(--sb-flaeche-gedaempft);
    color: var(--sb-text-secondary, var(--sb-text-sekundaer));
    font: inherit;
    cursor: pointer;
}

.kopfzeile__erscheinungsbild:hover {
    border-color: var(--sb-rand-stark);
    background: var(--sb-flaeche-hervorgehoben);
}

/* Navigationsknopf nur auf schmalen Geraeten. */
.kopfzeile__navigationsknopf {
    display: none;
    width: var(--sb-bedienelement-hoehe);
    height: var(--sb-bedienelement-hoehe);
    align-items: center;
    justify-content: center;
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background: var(--sb-flaeche-gedaempft);
    cursor: pointer;
}

.kopfzeile__balken,
.kopfzeile__balken::before,
.kopfzeile__balken::after {
    display: block;
    width: 1rem;
    height: 0.125rem;
    border-radius: var(--sb-radius-rund);
    background: var(--sb-text-sekundaer);
}

.kopfzeile__balken {
    position: relative;
}

.kopfzeile__balken::before,
.kopfzeile__balken::after {
    position: absolute;
    content: "";
}

.kopfzeile__balken::before { top: -0.3125rem; }
.kopfzeile__balken::after  { top: 0.3125rem; }

/* -- Koerper: Seitenleiste und Inhalt --------------------------------------- */

.huelle__koerper {
    flex: 1;
    display: flex;
    min-height: 0;
}

.seitenleiste {
    flex: 0 0 var(--sb-seitenleiste-breite);
    width: var(--sb-seitenleiste-breite);
    padding: var(--sb-abstand-2) var(--sb-abstand-1);
    border-right: var(--sb-rahmenbreite) solid var(--sb-rand);
    background-color: var(--sb-navigation-flaeche);
}

.huelle__abdeckung {
    display: none;
}

.inhalt {
    flex: 1;
    min-width: 0;
    padding: var(--sb-abstand-3) var(--sb-abstand-3) var(--sb-abstand-4);
    background-color: var(--sb-hintergrund);
}

.inhalt:focus {
    outline: none;
}

.inhalt__rahmen {
    max-width: var(--sb-inhalt-max);
    margin: 0 auto;
}

/* -- Navigation ------------------------------------------------------------- */

.navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sb-abstand-0-5);
}

.navigation__gruppe {
    margin-top: var(--sb-abstand-2);
    padding-inline: var(--sb-abstand-1);
    font-size: var(--sb-schriftgroesse-winzig);
    font-weight: var(--sb-schriftstaerke-mittel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-text-gedaempft);
}

.navigation__gruppe:first-child {
    margin-top: 0;
}

.navigation__abschluss {
    margin-top: var(--sb-abstand-2);
    padding-top: var(--sb-abstand-1);
    border-top: var(--sb-rahmenbreite) solid var(--sb-rand);
}

.navigation__verweis {
    display: flex;
    align-items: center;
    min-height: var(--sb-bedienelement-hoehe);
    padding-inline: var(--sb-abstand-1);
    border-radius: var(--sb-radius-4);
    color: var(--sb-text-sekundaer);
    font-weight: var(--sb-schriftstaerke-mittel);
    text-decoration: none;
}

/* Die Abmeldung ist eine Schaltflaeche in einem Formular, soll aber wie die
   uebrigen Navigationseintraege aussehen. */

.navigation__formular {
    margin: 0;
}

button.navigation__verweis {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--sb-schriftstaerke-mittel);
    text-align: left;
    cursor: pointer;
}

.navigation__verweis:hover {
    background-color: var(--sb-navigation-schweben);
    color: var(--sb-text);
    text-decoration: none;
}

.navigation__verweis.active {
    background-color: var(--sb-navigation-aktiv);
    color: var(--sb-aktion);
}

/* -- Schmale Geraete -------------------------------------------------------- */

@media (max-width: 48rem) {
    .kopfzeile__navigationsknopf {
        display: inline-flex;
    }

    .seitenleiste {
        position: fixed;
        top: var(--sb-kopfzeile-hoehe);
        bottom: 0;
        left: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--sb-dauer-2) var(--sb-verlauf);
        box-shadow: var(--sb-schatten-2);
    }

    .huelle__schalter:checked ~ .huelle__koerper .seitenleiste {
        transform: translateX(0);
    }

    .huelle__schalter:checked ~ .huelle__koerper .huelle__abdeckung {
        display: block;
        position: fixed;
        inset: var(--sb-kopfzeile-hoehe) 0 0 0;
        z-index: 150;
        background: rgb(21 32 51 / 0.38);
    }

    .inhalt {
        padding: var(--sb-abstand-2);
    }
}

/* Bewegung nur, wenn der Anwender sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .seitenleiste {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Schichtbuch - Grundlegende, bewusst schlanke Basisformate.
   Ein ausgearbeitetes Design folgt in spaeteren Auftraegen.
   --------------------------------------------------------------------------- */

.start-panel,
.message-panel {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.start-panel__title,
.message-panel__title {
    font-size: var(--sb-schriftgroesse-ueberschrift-1);
    line-height: var(--sb-zeilenhoehe-eng);
    margin-bottom: 0.75rem;
    overflow-wrap: break-word;
}

.start-panel__status {
    font-size: var(--sb-schriftgroesse-ueberschrift-3);
    margin: 0;
}

.message-panel__hint {
    font-size: 0.9rem;
    color: var(--sb-text-gedaempft);
}

/* Bilder und Medien passen sich der Bildschirmbreite an. */
img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Auf schmalen Geraeten (Smartphone) etwas weniger Innenabstand. */
@media (max-width: 640px) {

    .start-panel,
    .message-panel {
        padding: 1rem 0;
    }
}

/* ---------------------------------------------------------------------------
   Schichtbuch – Anmeldung, Verwaltungsseiten und Meldungen.
   Bewusst schlank gehalten; ein ausgearbeitetes Design folgt später.
   --------------------------------------------------------------------------- */

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

.anmeldung {
    display: flex;
    justify-content: center;
    padding-block: var(--sb-abstand-4);
}

.anmeldung__karte {
    width: 100%;
    max-width: 24rem;
    padding: var(--sb-abstand-3);
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-8);
    background-color: var(--sb-flaeche);
    box-shadow: var(--sb-schatten-1);
}

.anmeldung__titel {
    font-size: var(--sb-schriftgroesse-ueberschrift-1);
    margin-bottom: var(--sb-abstand-2-5);
}

.anmeldung__hinweis {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}

/* Formularfelder ----------------------------------------------------------- */

.feld {
    margin-bottom: 1rem;
}

.feld-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.feld-gruppe .feld {
    flex: 1 1 8rem;
}

.feld__beschriftung {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.feld__eingabe {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font: inherit;

    /* Formularfelder erben die Textfarbe nicht. Ohne diese Angabe naehme der
       Browser seinen eigenen Standardwert - im dunklen Erscheinungsbild
       schwarze Schrift auf dunklem Grund. */
    color: var(--sb-text);

    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: 4px;
    background-color: var(--sb-flaeche);
    min-height: 2.5rem;
}

.feld__eingabe::placeholder {
    color: var(--sb-text-gedaempft);
    opacity: 1;
}

/* Gilt auch fuer Auswahllisten und mehrzeilige Felder, die dieselbe Klasse
   tragen. */
select.feld__eingabe,
textarea.feld__eingabe {
    color: var(--sb-text);
    background-color: var(--sb-flaeche);
}

.feld__eingabe:focus-visible {
    outline: 2px solid var(--sb-aktion);
    outline-offset: 1px;
}

.feld__fehler {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--sb-gefahr);
}

.formular--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Schaltflächen ------------------------------------------------------------ */

/* Eine einzige Schaltflaechenform fuer die gesamte Anwendung.
   Gleiche Hoehe, gleiche Mindestbreite, gleiche Farbe - unabhaengig davon,
   was die Schaltflaeche tut. Dadurch stehen sie in Zeilen und Spalten
   sauber untereinander und nichts draengt sich optisch vor. */

.schaltflaeche {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Einheitliche Groesse. Der Text wird mittig gesetzt, damit kurze und
       lange Beschriftungen gleich wirken. */
    min-height: var(--sb-schaltflaeche-hoehe);
    min-width: var(--sb-schaltflaeche-breite);
    padding-inline: var(--sb-abstand-1-5);

    font: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background-color: var(--sb-flaeche-gedaempft);
    color: var(--sb-text);
    cursor: pointer;
}

.schaltflaeche:hover {
    border-color: var(--sb-rand-stark);
    background-color: var(--sb-flaeche-hervorgehoben);
}

/* Schaltflaeche mit einem einzelnen Zeichen statt einer Beschriftung
   (Sortierpfeile). Sie ist quadratisch und nimmt die Mindestbreite nicht an -
   sonst stuenden zwei Pfeile so breit wie zwei beschriftete Schaltflaechen. */

.schaltflaeche--symbol {
    min-width: 0;
    width: var(--sb-schaltflaeche-hoehe);
    padding-inline: 0;
    flex: 0 0 auto;
}

/* Alles ab hier wird an das rechte Ende der Zeile gerueckt. */

.schaltflaeche--rechts {
    margin-inline-start: auto;
}



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

.meldung {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border: var(--sb-rahmenbreite) solid transparent;
}

.meldung--fehler {
    background-color: color-mix(in srgb, var(--sb-gefahr) 12%, var(--sb-flaeche));
    border-color: color-mix(in srgb, var(--sb-gefahr) 45%, var(--sb-rand));
    color: var(--sb-gefahr);
}

.meldung--erfolg {
    background-color: color-mix(in srgb, var(--sb-erfolg) 12%, var(--sb-flaeche));
    border-color: color-mix(in srgb, var(--sb-erfolg) 45%, var(--sb-rand));
    color: var(--sb-erfolg);
}

/* Startseite --------------------------------------------------------------- */

.kachel-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.kachel {
    flex: 1 1 14rem;
    padding: 1rem;
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: 6px;
    background-color: var(--sb-flaeche);
}

.kachel__titel {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sb-text-gedaempft);
    margin: 0 0 0.5rem;
}

.kachel__wert {
    font-size: var(--sb-schriftgroesse-ueberschrift-2);
    font-weight: 600;
    margin: 0;
}

.kachel__wert--leer {
    color: var(--sb-text-gedaempft);
    font-weight: 500;
}

.kachel__zusatz {
    margin: 0.25rem 0 0;
    color: var(--sb-text-gedaempft);
}

/* Verwaltungsseiten -------------------------------------------------------- */

.verwaltung {
    max-width: 60rem;
}

.verwaltung__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.verwaltung__hinweis {
    color: var(--sb-text-gedaempft);
    font-size: 0.9rem;
}

.verwaltung__leer {
    padding: 1rem 0;
    color: var(--sb-text-gedaempft);
}

.tabelle-huelle {
    overflow-x: auto;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
}

.tabelle th,
.tabelle td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-rand);
    vertical-align: top;
}

.tabelle__zeile--inaktiv {
    color: var(--sb-text-gedaempft);
}

.tabelle__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.marke {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 3px;
    background-color: var(--sb-flaeche-gedaempft);
    color: var(--sb-text-sekundaer);
}

.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Schmale Bildschirme: Tabellen als Kartenliste darstellen. ---------------- */

@media (max-width: 640px) {

    .verwaltung__kopf {
        align-items: stretch;
        flex-direction: column;
    }

    .tabelle thead {
        display: none;
    }

    .tabelle,
    .tabelle tbody,
    .tabelle tr,
    .tabelle td {
        display: block;
        width: 100%;
    }

    .tabelle tr {
        border: var(--sb-rahmenbreite) solid var(--sb-rand);
        border-radius: 6px;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .tabelle td {
        border-bottom: none;
        padding: 0.35rem 0;
    }

    /* Die Aktionszelle bleibt eine Flex-Zeile. Sonst haette die Regel
       ".tabelle td { display: block }" sie umgestellt und die Schaltflaechen
       waeren wieder unterschiedlich breit. */
    .tabelle td.tabelle__aktionen {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .tabelle td[data-spalte]::before {
        content: attr(data-spalte) ": ";
        font-weight: 600;
        color: var(--sb-text-gedaempft);
    }

    .tabelle td[data-spalte="Aktionen"]::before {
        content: "";
    }
}

/* Filter- und Blätterleiste der Meldetextverwaltung -------------------------- */

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.filterleiste .feld {
    flex: 1 1 14rem;
    margin-bottom: 0;
}

.blaetterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--sb-text-gedaempft);
}

/* ---------------------------------------------------------------------------
   Erfassungsseite für Schichtbucheinträge.
   Bewusst auf Touch-Bedienung an Tablet und Smartphone ausgelegt:
   große Flächen, klare Abstände, kein horizontales Scrollen.
   --------------------------------------------------------------------------- */

.erfassung {
    max-width: 48rem;
}

.erfassung h1 {
    font-size: var(--sb-schriftgroesse-ueberschrift-1);
    margin-bottom: 1rem;
}

.start-panel__aktion {
    margin: 1.25rem 0 0;
}

/* Anzeige der automatisch ermittelten Schicht ------------------------------ */

.schichtanzeige {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--sb-aktion);
    border-radius: 4px;
    background-color: var(--sb-aktion-zart);
}

.schichtanzeige__titel {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-text-sekundaer);
}

.schichtanzeige__wert {
    font-size: var(--sb-schriftgroesse-ueberschrift-2);
    font-weight: 600;
    overflow-wrap: break-word;
}

.schichtanzeige__wert--fehlt {
    color: var(--sb-gefahr);
}

/* Einzelne Erfassungsschritte --------------------------------------------- */

.schritt {
    margin-bottom: 1.75rem;
}

.schritt__titel {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.schritt__hinweis {
    color: var(--sb-text-gedaempft);
    margin: 0.4rem 0;
}

.schritt__oder {
    margin: 1.25rem 0 0.5rem;
    color: var(--sb-text-gedaempft);
    font-style: italic;
}

/* Auswahlkacheln: groß genug für die Bedienung mit dem Finger ------------- */

.auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Feste Groesse statt Streckung.

   Zuvor teilten sich die Kacheln die Zeilenbreite: Zwei Kategorien wurden
   halbseitenbreit, fuenf schmal. Die Groesse haing damit an der Anzahl und
   nicht am Inhalt, und dieselbe Schaltflaeche sah auf jeder Seite anders aus.

   Jetzt haben alle dieselbe Breite. Lange Meldetexte brechen innerhalb der
   Kachel um; die Kacheln einer Zeile bleiben dabei gleich hoch. Die Hoehe
   bleibt bei 2.75rem und damit ueber dem ueblichen Mindestmass fuer die
   Bedienung mit dem Finger. */

.kachel {
    flex: 0 0 auto;
    width: 8.5rem;

    display: flex;
    align-items: center;

    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    border: 2px solid var(--sb-rand);
    border-radius: 8px;
    background-color: var(--sb-flaeche);
    color: var(--sb-text);
    cursor: pointer;

    /* Lange Meldetexte brechen um, statt die Seite breiter zu machen. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.kachel:hover {
    border-color: var(--sb-rand-stark);
    background-color: var(--sb-flaeche-gedaempft);
}

.kachel:focus-visible {
    outline: 3px solid var(--sb-aktion);
    outline-offset: 2px;
}

/* Die Auswahl wird ueber Rahmen, Flaeche und Schriftstaerke angezeigt,
   nicht ueber eine Signalfarbe. */

.kachel--gewaehlt {
    border-color: var(--sb-text-sekundaer);
    background-color: var(--sb-flaeche-hervorgehoben);
    font-weight: var(--sb-schriftstaerke-stark);

    /* Ein Balken am linken Rand. Die Auswahl entscheidet, welchem Bereich und
       welcher Kategorie eine Meldung zugeordnet wird - sie muss auch auf einem
       hellen Hallenbildschirm zweifelsfrei erkennbar sein. Der Balken liegt
       innerhalb des vorhandenen Innenabstands; die Beschriftung springt beim
       Auswaehlen deshalb nicht. */
    box-shadow: inset 0.3125rem 0 0 0 var(--sb-text-sekundaer);
}

.kachel--gewaehlt:hover {
    background-color: var(--sb-flaeche-hervorgehoben);
    border-color: var(--sb-rand-stark);
}

/* Meldetexte sind meist laenger und bekommen deshalb mehr Breite - aber
   ebenfalls eine feste, keine gestreckte. */
.auswahl--meldetexte .kachel {
    width: 16rem;
}

/* Freitext ---------------------------------------------------------------- */

.feld__eingabe--mehrzeilig {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.4;
}

.feld__hinweis {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--sb-text-gedaempft);
}

/* Speichern --------------------------------------------------------------- */

.erfassung__abschluss {
    display: flex;
    flex-direction: column;

    /* Ohne diese Angabe streckte die Spalte die Schaltflaeche ueber die
       gesamte Breite - sie waere dann breiter als alle uebrigen. */
    align-items: flex-start;

    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: var(--sb-rahmenbreite) solid var(--sb-rand);
}



.schaltflaeche:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.erfassung__hinweis {
    font-size: 0.9rem;
    color: var(--sb-text-gedaempft);
}

/* Zusammenfassung des gespeicherten Eintrags ------------------------------ */

.zusammenfassung {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: var(--sb-rahmenbreite) solid color-mix(in srgb, var(--sb-erfolg) 45%, var(--sb-rand));
}

.zusammenfassung__kopf {
    font-weight: 600;
}

.zusammenfassung__kategorie {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zusammenfassung__meldung {
    margin-top: 0.2rem;
    font-weight: 600;
    overflow-wrap: break-word;
}

.zusammenfassung__freitext {
    margin-top: 0.35rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Auf Smartphones füllen die Kacheln die ganze Breite. -------------------- */

@media (max-width: 640px) {

    .kachel,
    .auswahl--meldetexte .kachel {
        flex: 1 1 100%;
    }

    /* Auf dem Smartphone waere die feste Mindestbreite breiter als das
       Fenster. Stattdessen teilen sich die Schaltflaechen einer Zeile den
       Platz zu gleichen Teilen - sie bleiben dadurch untereinander gleich
       breit und zugleich gut mit dem Daumen zu treffen. */
    .schaltflaeche {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* ---------------------------------------------------------------------------
   Schichtbuchansicht (Verlauf).
   Karten-/Listendarstellung statt breiter Tabelle, damit sie auf Smartphone,
   Tablet und Desktop gleichermaßen lesbar bleibt.
   --------------------------------------------------------------------------- */

.verlauf {
    max-width: 56rem;
}

.verlauf__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.verlauf__kopf h1 {
    margin: 0;
    font-size: var(--sb-schriftgroesse-ueberschrift-1);
}

.verlauf__datum {
    margin: 0.2rem 0 0;
    color: var(--sb-text-gedaempft);
    font-size: 1.05rem;
}

.start-panel__aktion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Datumsnavigation --------------------------------------------------------- */

.datumsleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.datumsleiste__datum {
    width: auto;
    min-width: 10rem;
    flex: 0 1 12rem;
}

.filterleiste .feld--knopf {
    display: flex;
    align-items: flex-end;
    flex: 0 1 auto;
}

/* Schichtgruppen ----------------------------------------------------------- */

.schichtgruppe {
    margin: 1.5rem 0;
}

.schichtgruppe__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--sb-rand);
}

.schichtgruppe__name {
    margin: 0;
    font-size: 1.15rem;
}

.schichtgruppe__zeit {
    color: var(--sb-text-gedaempft);
    font-variant-numeric: tabular-nums;
}

/* Einzelner Eintrag -------------------------------------------------------- */

.eintrag {
    padding: 0.85rem 0;
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-flaeche-hervorgehoben);
    overflow-wrap: break-word;
}

.eintrag:last-child {
    border-bottom: none;
}

.eintrag__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    font-size: 0.95rem;
    color: var(--sb-text-sekundaer);
}

.eintrag__uhrzeit {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--sb-text);
}

.eintrag__trenner {
    color: var(--sb-text-gedaempft);
}

/* Neutrale Hervorhebung der Kategorie – bewusst unabhängig vom Namen der
   Kategorie, da Kategorien frei konfigurierbar sind. */
.eintrag__kategorie {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    background-color: var(--sb-flaeche-gedaempft);
    color: var(--sb-text-sekundaer);
}

.eintrag__meldung {
    margin-top: 0.3rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.eintrag__freitext {
    margin-top: 0.3rem;
    white-space: pre-wrap;
    color: var(--sb-text-sekundaer);
}

.verlauf__leer {
    padding: 2rem 0;
    color: var(--sb-text-gedaempft);
    font-size: 1.05rem;
}

.verlauf__anzahl {
    margin-top: 1rem;
    color: var(--sb-text-gedaempft);
    font-size: 0.9rem;
}

@media (max-width: 640px) {

    .verlauf__kopf {
        flex-direction: column;
        align-items: stretch;
    }

    .datumsleiste button,
    .datumsleiste__datum {
        flex: 1 1 8rem;
    }

    .filterleiste .feld {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------------
   Dashboard („Was ist passiert?").
   Bewusst ruhig und zahlenorientiert, ohne Diagrammbibliothek. Es gibt keine
   Hervorhebung, die sich aus einem Kategorienamen ableitet.
   --------------------------------------------------------------------------- */

.dashboard {
    max-width: 56rem;
}

.dashboard__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dashboard__kopf h1 {
    margin: 0;
    font-size: var(--sb-schriftgroesse-ueberschrift-1);
}

.dashboard__zeitpunkt {
    margin: 0.2rem 0 0;
    color: var(--sb-text-gedaempft);
    font-size: 1.05rem;
}

.dashboard__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dashboard__abschnitt {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sb-text-gedaempft);
}

.dashboard__block {
    margin-top: 1.75rem;
}

.dashboard__block h2 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--sb-rand);
}

.dashboard__unterschrift {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}

.dashboard__kuerzung {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--sb-text-gedaempft);
    font-size: 0.9rem;
}

/* Aktuelle und vorherige Schicht nebeneinander ---------------------------- */

.schichtpaar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.schichtpaar .schichtanzeige {
    flex: 1 1 18rem;
    margin-bottom: 0;
}

.schichtanzeige--vorherige {
    border-left-color: var(--sb-text-gedaempft);
    background-color: var(--sb-flaeche-gedaempft);
}

.schichtanzeige__zusatz {
    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}

/* Kennzahlen -------------------------------------------------------------- */

.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kennzahl {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem;
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: 6px;
    background-color: var(--sb-flaeche);
    text-align: center;
}

.kennzahl__wert {
    font-size: var(--sb-schriftgroesse-anzeige);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kennzahl__titel {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-text-gedaempft);
}

/* Auswertungen nebeneinander ---------------------------------------------- */

.auswertungen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.auswertungen > .dashboard__block {
    flex: 1 1 18rem;
    min-width: 0;
}

/* Zähllisten und Rangliste ------------------------------------------------ */

.zaehlliste,
.rangliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rangliste {
    counter-reset: rang;
}

.zaehlliste__eintrag,
.rangliste__eintrag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-flaeche-hervorgehoben);
}

.zaehlliste__eintrag:last-child,
.rangliste__eintrag:last-child {
    border-bottom: none;
}

.zaehlliste__bezeichnung,
.rangliste__text {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.rangliste__eintrag::before {
    counter-increment: rang;
    content: counter(rang) ".";
    color: var(--sb-text-gedaempft);
    font-variant-numeric: tabular-nums;
}

.zaehlliste__zusatz {
    margin-left: 0.4rem;
    color: var(--sb-text-gedaempft);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.zaehlliste__anzahl,
.rangliste__anzahl {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {

    .dashboard__kopf {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard__aktionen .schaltflaeche {
        flex: 1 1 100%;
    }

    .kennzahl {
        flex: 1 1 6rem;
        padding: 0.75rem 0.5rem;
    }
}

/* ===========================================================================
   Hinweisleiste fuer unbehandelte Fehler (von Blazor eingeblendet)
   =========================================================================== */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 400;
    padding: var(--sb-abstand-1-5) var(--sb-abstand-2);
    border-top: var(--sb-rahmenbreite) solid var(--sb-rand);
    background: var(--sb-flaeche);
    color: var(--sb-text);
    box-shadow: var(--sb-schatten-2);
}

#blazor-error-ui .reload {
    margin-inline-start: var(--sb-abstand-1);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: var(--sb-abstand-1);
    inset-inline-end: var(--sb-abstand-1);
    cursor: pointer;
}

/* ===========================================================================
   Schichtbuchansicht: eine Zeile je Eintrag
   ---------------------------------------------------------------------------
   Eine Schicht bringt schnell zwei Dutzend Meldungen. Als mehrzeilige Karten
   passt davon kaum ein Drittel auf den Bildschirm. Deshalb eine Zeile je
   Eintrag mit dem Wesentlichen; alles Weitere zeigt der Dialog.
   =========================================================================== */

.zeile {
    display: grid;
    grid-template-columns: 3.5rem 10rem 8rem 10rem 1fr auto;
    align-items: center;
    gap: var(--sb-abstand-1-5);
    width: 100%;

    min-height: var(--sb-schaltflaeche-hoehe);
    padding: var(--sb-abstand-0-75) var(--sb-abstand-1);

    border: 0;
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-rand);
    background: none;
    color: var(--sb-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.zeile:hover {
    background-color: var(--sb-flaeche-hervorgehoben);
}

.zeile:focus-visible {
    outline: none;
    box-shadow: var(--sb-fokusring);
}

.zeile__uhrzeit {
    font-variant-numeric: tabular-nums;
    font-weight: var(--sb-schriftstaerke-mittel);
}

.zeile__schicht,
.zeile__kategorie {
    color: var(--sb-text-sekundaer);
}

/* Der Grund fuellt den Rest der Zeile. Laengere Texte werden gekuerzt statt
   umgebrochen - sonst waere die Zeile keine Zeile mehr. */
.zeile__uhrzeit,
.zeile__bereich,
.zeile__schicht,
.zeile__kategorie,
.zeile__grund {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zeile__vermerk {
    padding: 0.1rem var(--sb-abstand-1);
    border-radius: var(--sb-radius-rund);
    background-color: var(--sb-flaeche-gedaempft);
    color: var(--sb-text-gedaempft);
    font-size: var(--sb-schriftgroesse-winzig);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zeile--storniert .zeile__grund,
.zeile--storniert .zeile__bereich {
    text-decoration: line-through;
    color: var(--sb-text-gedaempft);
}

/* Auf schmalen Geraeten steht die Zeile untereinander; dort ist Kuerzen
   unnoetig. */
@media (max-width: 48rem) {
    .zeile {
        grid-template-columns: 4rem 1fr auto;
        row-gap: var(--sb-abstand-0-5);
    }

    .zeile__schicht,
    .zeile__kategorie {
        font-size: var(--sb-schriftgroesse-klein);
    }

    .zeile__grund {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* ===========================================================================
   Dialog mit den Einzelheiten einer Meldung
   =========================================================================== */

.dialog {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sb-abstand-2);
}

/* Die Abdeckung ist eine Schaltflaeche, damit ein Klick daneben schliesst -
   auch ohne Maus erreichbar. */
.dialog__abdeckung {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(21 32 51 / 0.55);
    cursor: pointer;
}

.dialog__inhalt {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 40rem;
    max-height: 85dvh;
    overflow-y: auto;

    padding: var(--sb-abstand-3);
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-8);
    background-color: var(--sb-flaeche);
    box-shadow: var(--sb-schatten-2);
}

.dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-abstand-1-5);
    margin-bottom: var(--sb-abstand-2);
}

.dialog__kopf h2 {
    font-size: var(--sb-schriftgroesse-ueberschrift-2);
}

.dialog__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-abstand-1);
    margin-top: var(--sb-abstand-3);
}

.dialog__aktion {
    margin-top: var(--sb-abstand-3);
    padding-top: var(--sb-abstand-2);
    border-top: var(--sb-rahmenbreite) solid var(--sb-rand);
}

.einzelheiten {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--sb-abstand-0-75) var(--sb-abstand-1-5);
    margin: 0;
}

.einzelheiten dt {
    color: var(--sb-text-gedaempft);
    font-size: var(--sb-schriftgroesse-klein);
}

.einzelheiten dd {
    margin: 0;
}

.einzelheiten__freitext {
    white-space: pre-wrap;
}

@media (max-width: 48rem) {
    .einzelheiten {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .einzelheiten dd {
        margin-bottom: var(--sb-abstand-1-5);
    }
}

.fassungen {
    margin-top: var(--sb-abstand-3);
    padding-top: var(--sb-abstand-2);
    border-top: var(--sb-rahmenbreite) solid var(--sb-rand);
}

.fassungen summary {
    cursor: pointer;
    color: var(--sb-text-sekundaer);
    font-size: var(--sb-schriftgroesse-klein);
}

.fassung {
    margin-top: var(--sb-abstand-1-5);
    padding: var(--sb-abstand-1-5);
    border-left: 3px solid var(--sb-rand);
    background-color: var(--sb-flaeche-gedaempft);
    border-radius: var(--sb-radius-4);
}

.fassung__kopf {
    color: var(--sb-text-gedaempft);
    font-size: var(--sb-schriftgroesse-winzig);
}

.fassung__grund {
    font-style: italic;
    color: var(--sb-text-sekundaer);
}

.fassung__inhalt {
    margin-top: var(--sb-abstand-0-5);
    white-space: pre-wrap;
}

/* ===========================================================================
   Einstellungsdialog mit Reitern
   =========================================================================== */

.dialog__inhalt--breit {
    max-width: 60rem;
}

.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-abstand-0-5);
    margin-bottom: var(--sb-abstand-3);
    border-bottom: var(--sb-rahmenbreite) solid var(--sb-rand);
}

.reiter__knopf {
    min-height: var(--sb-schaltflaeche-hoehe);
    padding-inline: var(--sb-abstand-2);

    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--sb-text-sekundaer);
    font: inherit;
    font-weight: var(--sb-schriftstaerke-mittel);
    cursor: pointer;
}

.reiter__knopf:hover {
    color: var(--sb-text);
}

/* Der aktive Reiter wird ueber einen Balken und die Schriftfarbe
   gekennzeichnet, nicht ueber eine Signalfarbe. */
.reiter__knopf--aktiv {
    border-bottom-color: var(--sb-text-sekundaer);
    color: var(--sb-text);
}

.reiter__knopf:focus-visible {
    outline: none;
    box-shadow: var(--sb-fokusring);
}

/* Kleine Schaltflaeche -----------------------------------------------------

   Fuer Kurzwege innerhalb eines Feldes ("Mo-Fr", "Taeglich"). Sie steht
   bewusst neben der Eingabe und nicht in einer Knopfzeile, deshalb bricht sie
   als einzige die einheitliche Mindestbreite. */

.schaltflaeche--klein {
    min-height: 2rem;
    min-width: 0;
    padding-inline: var(--sb-abstand-1);
    font-size: 0.85rem;
}

/* Wochentagswahl -----------------------------------------------------------

   Sieben Schalter in einer Zeile. Auf schmalen Bildschirmen brechen sie um,
   statt die Zeile zu sprengen. */

.tagewahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-abstand-1);
}

.tagewahl__tage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tagewahl__tag {
    min-width: 2.5rem;
    min-height: 2rem;
    padding-inline: 0.4rem;

    font: inherit;
    font-size: 0.85rem;
    line-height: 1.2;

    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background-color: var(--sb-flaeche);
    color: var(--sb-text-gedaempft);
    cursor: pointer;
}

.tagewahl__tag:hover {
    border-color: var(--sb-rand-stark);
}

/* Der gewaehlte Tag wird nicht nur farblich abgesetzt, sondern auch
   fetter - Farbe allein waere fuer Farbfehlsichtige kein Unterschied. */

.tagewahl__tag--an {
    border-color: var(--sb-rand-stark);
    background-color: var(--sb-flaeche-hervorgehoben);
    color: var(--sb-text);
    font-weight: 600;
}

.tagewahl__tag:focus-visible {
    outline: none;
    box-shadow: var(--sb-fokusring);
}

.tagewahl__kurzwege {
    display: flex;
    gap: 0.25rem;
}

/* Zyklus eines Rotationsmusters -------------------------------------------- */

.verwaltung__untertitel {
    margin: var(--sb-abstand-2) 0 var(--sb-abstand-1);
    font-size: 1rem;
}

.zyklus {
    display: flex;
    flex-direction: column;
    gap: var(--sb-abstand-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zyklus__position {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-abstand-1);

    padding: var(--sb-abstand-1);
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background-color: var(--sb-flaeche);
}

.zyklus__nummer {
    min-width: 5.5rem;
    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}

.zyklus__schicht {
    width: auto;
    min-width: 10rem;
    flex: 0 1 auto;
}


/* Bearbeitungsstand einer Meldung ------------------------------------------

   Sichtbar fuer alle, aenderbar nur fuer die angemeldete Abteilung. Der
   Verlauf steht darunter, damit nachvollziehbar bleibt, wer wann was
   uebernommen hat. */

.stand {
    margin-top: var(--sb-abstand-2);
    padding: var(--sb-abstand-1-5);
    border: var(--sb-rahmenbreite) solid var(--sb-rand);
    border-radius: var(--sb-radius-4);
    background-color: var(--sb-flaeche);
}

.stand__kopf {
    display: flex;
    align-items: baseline;
    gap: var(--sb-abstand-1);
}

.stand__titel {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-text-gedaempft);
}

.stand__wert {
    font-weight: 600;
}

.stand__verlauf {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    margin: var(--sb-abstand-1) 0 0;
    padding: 0;
    list-style: none;

    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}

.stand__verlauf li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-abstand-1);
}

.stand__schritt {
    min-width: 11rem;
    color: var(--sb-text);
}

.stand__bereich {
    font-style: italic;
}

/* Angemeldete Abteilung im Kopf der Startseite ----------------------------- */

.abteilung {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-abstand-1);

    padding: 0 var(--sb-abstand-1);
    min-height: var(--sb-schaltflaeche-hoehe);

    border: var(--sb-rahmenbreite) solid var(--sb-rand-stark);
    border-radius: var(--sb-radius-4);
    background-color: var(--sb-flaeche-hervorgehoben);
}

.abteilung__titel {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-text-gedaempft);
}

.abteilung__name {
    font-weight: 600;
}

/* Feste Feldbreiten in Formularen -------------------------------------------

   Ein Eingabefeld ueber die volle Dialogbreite sagt nichts darueber aus, wie
   viel hineingehoert. Eine Uhrzeit braucht acht Zeichen, kein halbes Fenster. */

.feld--name {
    max-width: 26rem;
}

.feld--zeit {
    flex: 0 0 auto;
    width: 9rem;
}

.feld-gruppe--zeiten {
    align-items: flex-end;
}

.feld__wert {
    display: flex;
    align-items: center;
    min-height: var(--sb-schaltflaeche-hoehe);
    font-weight: 600;
}


/* Zweite Zeile in einer Tabellenzelle, etwa die abweichende Zeit. */

.tabelle__zusatz {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--sb-text-gedaempft);
}