/* =========================================================================
   Büro-System — Oberfläche

   Zwei Gestaltungsgedanken tragen alles:

   1. Die Seitenleiste ist dunkel, der Arbeitsbereich hell. Das gibt dem
      Fenster einen Rahmen und trennt Navigation von Inhalt, ohne dass
      Trennlinien nötig wären.

   2. Alles, was von außen kommt — Mailtexte, Entwürfe, Vertragstexte —
      steht in einer Serifenschrift. Man sieht auf einen Blick, was fremder
      Inhalt ist und was Bedienung.

   Die Akzentfarbe wählt der Betrieb. Die Seitenleiste bleibt davon
   unberührt neutral dunkel, damit auch ein grelles Firmenrot nicht die
   halbe Oberfläche einfärbt.
   ========================================================================= */

:root {
    /* ---- Arbeitsbereich: hell ---- */
    --grund:        #F2F1ED;
    --flaeche:      #FFFFFF;
    --flaeche-2:    #F8F7F4;
    --ton:          #ECEAE4;

    --text:         #17191F;
    --text-2:       #4B5160;
    --text-3:       #7D8391;

    --linie:        #DBD9D2;
    --linie-2:      #E9E7E1;

    /* ---- Seitenleiste: dunkel, unabhängig vom Kundenakzent ---- */
    --leiste:       #1A1E26;
    --leiste-tief:  #12151B;
    --leiste-2:     #20242D;
    --leiste-linie: #2A2F39;
    --leiste-text:  #C7CBD4;
    --leiste-text-2:#7C8494;
    --leiste-hell:  #FFFFFF;

    /* ---- Akzent: vom Betrieb wählbar ---- */
    --akzent:         #20406B;
    --akzent-tief:    #16304F;
    --akzent-hell:    #E4EAF3;
    --auf-akzent:     #FFFFFF;

    /* ---- Semantik ---- */
    --rot:          #A8452F;
    --rot-hell:     #F8E8E3;
    --gruen:        #2C6A4E;
    --gruen-hell:   #E0EDE6;
    --gelb:         #8A6412;
    --gelb-hell:    #F7ECD6;

    /* ---- Tiefe ---- */
    --schatten-1:   0 1px 2px rgba(23,25,31,.04), 0 1px 3px rgba(23,25,31,.06);
    --schatten-2:   0 2px 4px rgba(23,25,31,.04), 0 8px 20px -8px rgba(23,25,31,.14);
    --schatten-3:   0 4px 8px rgba(23,25,31,.05), 0 16px 32px -12px rgba(23,25,31,.2);

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

    --leiste-breite: 14rem;
    --radius: 9px;
    --radius-klein: 6px;
}

/*
   Drei Zustaende, nicht zwei: Wer nichts waehlt, folgt dem System - dann
   traegt das Wurzelelement kein data-theme. Eine ausdrueckliche Wahl gewinnt
   in beide Richtungen, deshalb steht der Dunkelblock zweimal.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grund:        #0E1116;
        --flaeche:      #171B22;
        --flaeche-2:    #1D222A;
        --ton:          #232831;
    
        --text:         #E8E9EC;
        --text-2:       #AEB4C0;
        --text-3:       #7E8593;
    
        --linie:        #2B303A;
        --linie-2:      #22262E;
    
        --leiste:       #12161C;
        --leiste-tief:  #0C0F14;
        --leiste-2:     #191D24;
        --leiste-linie: #262B34;
        --leiste-text:  #C2C7D0;
        --leiste-text-2:#767D8B;
        --leiste-hell:  #FFFFFF;
    
        --akzent:         #86AAD8;
        --akzent-tief:    #A9C4E7;
        --akzent-hell:    #1B2532;
        --auf-akzent:     #0E1116;
    
        --rot:          #DB7A62;
        --rot-hell:     #2C1D19;
        --gruen:        #6DB995;
        --gruen-hell:   #15251C;
        --gelb:         #D8AD57;
        --gelb-hell:    #262013;
    
        --schatten-1:   0 1px 2px rgba(0,0,0,.4);
        --schatten-2:   0 2px 4px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.6);
        --schatten-3:   0 4px 8px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.7);
    }
}

:root[data-theme="dark"] {
    --grund:        #0E1116;
    --flaeche:      #171B22;
    --flaeche-2:    #1D222A;
    --ton:          #232831;

    --text:         #E8E9EC;
    --text-2:       #AEB4C0;
    --text-3:       #7E8593;

    --linie:        #2B303A;
    --linie-2:      #22262E;

    --leiste:       #101317;
    --leiste-2:     #191D24;
    --leiste-linie: #262B34;
    --leiste-text:  #C2C7D0;
    --leiste-text-2:#767D8B;
    --leiste-hell:  #FFFFFF;

    --akzent:         #86AAD8;
    --akzent-tief:    #A9C4E7;
    --akzent-hell:    #1B2532;
    --auf-akzent:     #0E1116;

    --rot:          #DB7A62;
    --rot-hell:     #2C1D19;
    --gruen:        #6DB995;
    --gruen-hell:   #15251C;
    --gelb:         #D8AD57;
    --gelb-hell:    #262013;

    --schatten-1:   0 1px 2px rgba(0,0,0,.4);
    --schatten-2:   0 2px 4px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.6);
    --schatten-3:   0 4px 8px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

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

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

a { color: var(--akzent-tief); text-underline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}

.zeichen { width: 1.05rem; height: 1.05rem; flex: none; }

/* =========================================================================
   Grundraster
   ========================================================================= */

.huelle {
    display: grid;
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
    min-height: 100vh;
}

/* =========================================================================
   Seitenleiste

   Die Gruppe ist das Modul. Wer die Leiste liest, soll sehen, was wozu
   gehoert - "Zu pruefen", "Kategorien" und "Stoerungen" stehen deshalb
   unter "Posteingang" und nicht an drei Stellen verteilt.
   ========================================================================= */

.leiste {
    background: linear-gradient(180deg, var(--leiste) 0%, var(--leiste-tief) 100%);
    color: var(--leiste-text);
    display: flex;
    flex-direction: column;
    padding: 1rem .7rem .85rem;
    position: sticky;
    top: 0;
    height: 100vh;

    /* Nicht die ganze Leiste scrollt, sondern nur die Menueliste. Vorher
       schob sich der letzte Menuepunkt unter den Leistenfuss und war dort
       nicht mehr zu sehen - "Module" und "Lizenz" waren damit praktisch
       unauffindbar. */
    overflow: hidden;
}

.menue-rumpf {
    flex: 1;
    min-height: 0;          /* ohne das waechst der Flex-Kasten statt zu scrollen */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--leiste-linie) transparent;
}
.menue-rumpf::-webkit-scrollbar { width: 5px; }
.menue-rumpf::-webkit-scrollbar-thumb { background: var(--leiste-linie); border-radius: 3px; }

/* ---- Marke ---- */

.marke {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--leiste-hell);
    padding: .3rem .4rem .3rem .35rem;
    border-radius: var(--radius);
    margin-bottom: 1.3rem;
}
.marke:hover { background: var(--leiste-2); }
.marke-zeichen {
    width: 2.1rem; height: 2.1rem;
    flex: none;
    display: grid; place-items: center;
    border-radius: 8px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--akzent) 88%, white),
        var(--akzent));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--akzent) 55%, transparent),
                inset 0 1px 0 rgba(255,255,255,.22);
}
.marke-logo { max-height: 2.1rem; max-width: 7rem; flex: none; }
.marke-text { min-width: 0; }
.marke-text b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 620;
    letter-spacing: -.014em;
    line-height: 1.22;
}
.marke-text span {
    display: block;
    font-size: .69rem;
    color: var(--leiste-text-2);
    letter-spacing: .03em;
}

/* ---- Menü ---- */

.menue-rumpf { display: flex; flex-direction: column; gap: 1.05rem; padding-bottom: .8rem; }
.menue { display: flex; flex-direction: column; gap: 1px; }

.menue-titel {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .66rem;
    font-weight: 680;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--leiste-text-2);
    padding: 0 .5rem .4rem;
}
.menue-titel .zeichen { width: .85rem; height: .85rem; opacity: .75; }

.menue a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .55rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--leiste-text);
    font-size: .875rem;
    transition: background .13s ease, color .13s ease;
}
.menue a .zeichen { color: var(--leiste-text-2); transition: color .13s ease; }
.menue a:hover { background: var(--leiste-2); color: var(--leiste-hell); }
.menue a:hover .zeichen { color: var(--leiste-text); }

/* Unterpunkte einer Modulgruppe: eingerückt, mit Führungslinie */
.menue.gruppe { position: relative; }
.menue.gruppe::before {
    content: "";
    position: absolute;
    left: 1.03rem;
    top: 1.35rem;
    bottom: .15rem;
    width: 1px;
    background: var(--leiste-linie);
}
.menue a.unterpunkt { padding-left: 1.85rem; }
.menue a.unterpunkt::before {
    content: "";
    position: absolute;
    left: 1.03rem;
    width: .5rem; height: 1px;
    background: var(--leiste-linie);
    transform: translateX(0);
}
.menue a.unterpunkt { position: relative; }

.menue a.aktiv {
    background: var(--akzent);
    color: var(--auf-akzent);
    font-weight: 570;
    box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--akzent) 70%, transparent),
                inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
}
.menue a.aktiv .zeichen { color: var(--auf-akzent); opacity: .92; }
.menue a.unterpunkt.aktiv::before { background: var(--akzent); width: .7rem; }

.menue .zaehler {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .69rem;
    font-variant-numeric: tabular-nums;
    background: var(--leiste-2);
    color: var(--leiste-text);
    padding: .04rem .38rem;
    border-radius: 999px;
    min-width: 1.3rem;
    text-align: center;
    line-height: 1.55;
}
.menue a.aktiv .zaehler {
    background: color-mix(in srgb, var(--auf-akzent) 22%, transparent);
    color: var(--auf-akzent);
}
.menue .zaehler.warnt { background: color-mix(in srgb, #E4674A 24%, transparent); color: #FFC0AE; }
.menue a.aktiv .zaehler.warnt { background: color-mix(in srgb, var(--auf-akzent) 26%, transparent); color: var(--auf-akzent); }

/* ---- Fuß: Erscheinungsbild, Benutzer, Stand ---- */

.leiste-fuss {
    margin-top: auto;
    padding: .85rem .2rem .1rem;
    border-top: 1px solid var(--leiste-linie);
    display: flex;
    flex-direction: column;
    gap: .6rem;

    /* Sitzt ausserhalb des Scrollbereichs und ist deshalb immer sichtbar.
       Deckend, nicht durchscheinend: sonst schimmert der Menuepunkt darunter
       durch und sieht aus wie ein Fehler. */
    flex: none;
    background: var(--leiste-tief);
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .45);
    margin-left: -.7rem;
    margin-right: -.7rem;
    padding-left: .9rem;
    padding-right: .9rem;
}

.erscheinung {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    background: var(--leiste-2);
    border-radius: 999px;
}
.erscheinung button {
    display: grid; place-items: center;
    padding: .3rem 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--leiste-text-2);
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.erscheinung button:hover { color: var(--leiste-hell); }
.erscheinung button.aktiv {
    background: color-mix(in srgb, var(--leiste-hell) 12%, transparent);
    color: var(--leiste-hell);
}
.erscheinung .zeichen { width: .95rem; height: .95rem; }

.wer-zeile { display: flex; align-items: center; gap: .55rem; padding: 0 .2rem; }
.wer-zeile .kuerzel {
    width: 1.85rem; height: 1.85rem;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--leiste-2);
    border: 1px solid var(--leiste-linie);
    color: var(--leiste-hell);
    font-size: .8rem;
    font-weight: 620;
}
.wer-zeile .wer { min-width: 0; flex: 1; }
.wer-zeile .wer b {
    display: block;
    font-size: .81rem;
    color: var(--leiste-hell);
    font-weight: 560;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wer-zeile .wer span { display: block; font-size: .69rem; color: var(--leiste-text-2); }
.abmelden {
    background: none; border: none; padding: .25rem;
    color: var(--leiste-text-2);
    cursor: pointer;
    border-radius: var(--radius-klein);
    display: grid; place-items: center;
    transition: background .13s ease, color .13s ease;
}
.abmelden:hover { color: #E4674A; background: var(--leiste-2); }

.leiste-fuss .stand {
    margin: 0;
    font-size: .69rem;
    color: var(--leiste-text-2);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .25rem;
}
.leiste-fuss .punkt {
    width: .4rem; height: .4rem; border-radius: 50%;
    background: #4CAF83;
    box-shadow: 0 0 0 2px color-mix(in srgb, #4CAF83 20%, transparent);
    display: inline-block;
    flex: none;
}

/* =========================================================================
   Inhaltsbereich
   ========================================================================= */

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

/* Das Demoband.
   Sitzt ueber der Kopfzeile und scrollt mit weg - es ist eine Ansage beim
   Betreten, kein Dauerbalken, der den Arbeitsbereich beschneidet. Die Farben
   kommen aus den Tokens, damit es im Dunkelmodus nicht leuchtet: --gelb ist
   dort ein anderer Wert, und color-mix rechnet die Flaeche mit. */
.demoband {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem 1.75rem;
    background: color-mix(in srgb, var(--gelb) 13%, var(--flaeche));
    border-bottom: 1px solid color-mix(in srgb, var(--gelb) 32%, var(--linie));
    font-size: .82rem;
    color: var(--text-2);
}
.demoband strong {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .7rem;
    color: var(--gelb);
}
.demoband span { flex: 1; min-width: 15rem; }
.demoband a { color: var(--gelb); font-weight: 600; white-space: nowrap; }

.kopfzeile {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    padding: .9rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
}
.kopfzeile h1 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 640;
    letter-spacing: -.021em;
}
.kopfzeile .beiwort { color: var(--text-3); font-size: .855rem; }
.kopfzeile .rechts { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.bereich { padding: 1.5rem 1.75rem 4rem; }
.bereich.schmal { max-width: 48rem; }

h2 { font-size: 1.06rem; font-weight: 640; letter-spacing: -.014em; margin: 0 0 .7rem; }

/* =========================================================================
   Meldungen
   ========================================================================= */

.meldung {
    padding: .7rem .95rem;
    border-radius: var(--radius);
    margin-bottom: 1.15rem;
    font-size: .89rem;
    line-height: 1.5;
    border: 1px solid;
    border-left-width: 3px;
}
.meldung a { color: inherit; }
.meldung.erfolg  { background: var(--gruen-hell);  color: var(--gruen);  border-color: color-mix(in srgb, var(--gruen) 30%, transparent); border-left-color: var(--gruen); }
.meldung.fehler  { background: var(--rot-hell);    color: var(--rot);    border-color: color-mix(in srgb, var(--rot) 30%, transparent);   border-left-color: var(--rot); }
.meldung.hinweis { background: var(--gelb-hell);   color: var(--gelb);   border-color: color-mix(in srgb, var(--gelb) 30%, transparent);  border-left-color: var(--gelb); }

/* =========================================================================
   Knöpfe
   ========================================================================= */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--linie);
    background: var(--flaeche);
    color: var(--text);
    padding: .44rem .85rem;
    border-radius: var(--radius-klein);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--schatten-1);
}
.knopf:hover { border-color: var(--text-3); background: var(--flaeche-2); }
.knopf:active { transform: translateY(.5px); }

.knopf.haupt {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--auf-akzent);
    font-weight: 600;
}
.knopf.haupt:hover {
    background: color-mix(in srgb, var(--akzent) 86%, var(--auf-akzent));
    border-color: color-mix(in srgb, var(--akzent) 86%, var(--auf-akzent));
}
.knopf.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 32%, transparent); }
.knopf.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); }
.knopf.klein { padding: .28rem .6rem; font-size: .81rem; box-shadow: none; }
.knopf .kuerzel {
    font-family: var(--mono); font-size: .7rem; opacity: .65;
    border: 1px solid currentColor; border-radius: 2px;
    padding: 0 .22rem; margin-left: .15rem;
}

/* =========================================================================
   Chips
   ========================================================================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .715rem;
    font-weight: 560;
    letter-spacing: .01em;
    padding: .13rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--ton);
    color: var(--text-2);
    border: 1px solid transparent;
}
.chip::before {
    content: "";
    width: .4rem; height: .4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
    flex: none;
}
.chip.ohne-punkt::before { display: none; }
.chip.hoch    { background: var(--rot-hell);   color: var(--rot); }
.chip.normal  { background: var(--akzent-hell);  color: var(--akzent-tief); }
.chip.niedrig { background: var(--ton);        color: var(--text-3); }
.chip.gut     { background: var(--gruen-hell); color: var(--gruen); }
.chip.warnt   { background: var(--gelb-hell);  color: var(--gelb); }

.chip.st-offen        { background: var(--rot-hell);   color: var(--rot); }
.chip.st-wartet       { background: var(--gelb-hell);  color: var(--gelb); }
.chip.st-beantwortet  { background: var(--akzent-hell);  color: var(--akzent-tief); }
.chip.st-geschlossen  { background: var(--ton);        color: var(--text-3); }

/* =========================================================================
   Karten
   ========================================================================= */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
}
.karte-kopf {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--linie-2);
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    background: var(--flaeche-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.karte-titel {
    font-size: .755rem;
    font-weight: 640;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
}
.karte-rumpf { padding: 1rem; }

/* =========================================================================
   Kennzahlen
   ========================================================================= */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .85rem;
    margin-bottom: 1.4rem;
}
.kennzahl {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .85rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .08rem;
    box-shadow: var(--schatten-1);
    position: relative;
    overflow: hidden;
}
.kennzahl::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--linie);
}
.kennzahl:has(.wert.warnt)::after { background: var(--rot); }
.kennzahl:has(.wert.gut)::after { background: var(--gruen); }

.kennzahl .beschriftung {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--text-3);
}
.kennzahl .wert {
    font-size: 1.72rem;
    line-height: 1.15;
    font-weight: 620;
    letter-spacing: -.028em;
    font-variant-numeric: tabular-nums;
    margin-top: .12rem;
}
.kennzahl .wert.warnt { color: var(--rot); }
.kennzahl .wert.gut { color: var(--gruen); }
.kennzahl .zusatz { font-size: .785rem; color: var(--text-3); }

/* =========================================================================
   Reiter
   ========================================================================= */

.reiter {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--linie);
    padding-bottom: .5rem;
}
.reiter a {
    text-decoration: none;
    font-size: .865rem;
    font-weight: 500;
    padding: .32rem .75rem;
    border-radius: var(--radius-klein);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.reiter a:hover { background: var(--ton); color: var(--text); }
.reiter a.aktiv { background: var(--text); color: var(--grund); font-weight: 600; }
.reiter .zahl {
    font-family: var(--mono);
    font-size: .73rem;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

/* =========================================================================
   Listeneinträge
   ========================================================================= */

.liste { display: flex; flex-direction: column; gap: .4rem; }

.eintrag {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--linie);
    border-radius: var(--radius);
    padding: .72rem .95rem;
    box-shadow: var(--schatten-1);
}
.eintrag:hover {
    border-color: var(--text-3);
    border-left-color: var(--akzent);
    box-shadow: var(--schatten-2);
}
.eintrag.ausgewaehlt { border-color: var(--akzent); border-left-color: var(--akzent); box-shadow: var(--schatten-2); }
.eintrag.dringend { border-left-color: var(--rot); }
.eintrag.gering   { border-left-color: var(--linie); }
.eintrag.mittel   { border-left-color: var(--akzent); }

.eintrag-kopf { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.eintrag .absender { font-weight: 620; font-size: .935rem; letter-spacing: -.008em; }
.eintrag .zeitpunkt {
    margin-left: auto;
    color: var(--text-3);
    font-size: .77rem;
    font-family: var(--mono);
    white-space: nowrap;
}
.eintrag .betreff { color: var(--text-2); font-size: .9rem; margin-top: .08rem; }
.eintrag .abriss { color: var(--text-3); font-size: .855rem; margin-top: .22rem; }

/* =========================================================================
   Leerzustand
   ========================================================================= */

.leer {
    background: var(--flaeche);
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-3);
    font-size: .9rem;
}
.leer b { display: block; color: var(--text-2); font-size: 1.02rem; margin-bottom: .3rem; font-weight: 600; }

/* =========================================================================
   Zwei Spalten
   ========================================================================= */

.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }

/* =========================================================================
   Kopfdaten
   ========================================================================= */

.kopfdaten {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .95rem;
    font-size: .875rem;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--linie-2);
}
.kopfdaten dt {
    color: var(--text-3);
    font-size: .705rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding-top: .18rem;
}
.kopfdaten dd { margin: 0; }

/* =========================================================================
   Fremdtext — alles, was von außen kommt
   ========================================================================= */

.fremdtext {
    font-family: var(--serif);
    font-size: .95rem;
    line-height: 1.62;
    white-space: pre-wrap;
    color: var(--text-2);
    max-height: 28rem;
    overflow-y: auto;
}

textarea.entwurf {
    width: 100%;
    min-height: 19rem;
    font-family: var(--serif);
    font-size: .95rem;
    line-height: 1.62;
    padding: .85rem .95rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche-2);
    color: var(--text);
    resize: vertical;
}
textarea.entwurf:focus { background: var(--flaeche); }

.begruendung {
    background: var(--akzent-hell);
    border-left: 3px solid var(--akzent);
    padding: .65rem .85rem;
    font-size: .855rem;
    color: var(--text-2);
    margin-bottom: .85rem;
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    line-height: 1.55;
}
.begruendung b { color: var(--text); }

.wissensspur {
    font-size: .83rem;
    color: var(--text-3);
    background: var(--flaeche-2);
    border: 1px solid var(--linie-2);
    border-radius: var(--radius-klein);
    padding: .5rem .7rem;
    margin: 0 0 .85rem;
}
.wissensspur b { color: var(--text-2); font-weight: 600; }

.erkannt { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; }
.erkannt span {
    font-size: .775rem;
    background: var(--ton);
    border-radius: var(--radius-klein);
    padding: .13rem .48rem;
    color: var(--text-2);
}
.erkannt b { color: var(--text-3); font-weight: 500; }

/* =========================================================================
   Aktionsleiste
   ========================================================================= */

.aktionsleiste {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linie-2);
}
.aktionsleiste .rechts { margin-left: auto; display: flex; gap: .55rem; }
.schalter { display: flex; align-items: center; gap: .42rem; font-size: .855rem; color: var(--text-2); cursor: pointer; }

/* =========================================================================
   Verlauf
   ========================================================================= */

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .8rem;
    padding: .48rem 0;
    border-bottom: 1px solid var(--linie-2);
    font-size: .87rem;
    color: var(--text-2);
}
.verlauf li:last-child { border-bottom: none; }
.verlauf li.diese { color: var(--text); font-weight: 550; }
.verlauf .wann { font-family: var(--mono); font-size: .755rem; color: var(--text-3); }

/* =========================================================================
   Tabellen
   ========================================================================= */

.tab-huelle { overflow-x: auto; }
table.raster {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .885rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten-1);
}
table.raster th, table.raster td {
    text-align: left;
    padding: .62rem .85rem;
    border-bottom: 1px solid var(--linie-2);
    vertical-align: top;
}
table.raster thead th {
    font-size: .69rem;
    font-weight: 640;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}
table.raster tbody tr:last-child td { border-bottom: none; }
table.raster tbody tr:hover { background: var(--flaeche-2); }
table.raster td.zahl, table.raster th.zahl { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.raster .nebentext { display: block; color: var(--text-3); font-size: .8rem; margin-top: .1rem; }

/* =========================================================================
   Formulare
   ========================================================================= */

.feldgruppe { display: flex; flex-direction: column; gap: .28rem; margin-bottom: .9rem; }
.feldgruppe label { font-size: .825rem; font-weight: 600; color: var(--text-2); }
.feldgruppe .hilfe { font-size: .79rem; color: var(--text-3); line-height: 1.45; }
.feldgruppe input[type="text"],
.feldgruppe input[type="email"],
.feldgruppe input[type="password"],
.feldgruppe input[type="number"],
.feldgruppe input[type="date"],
.feldgruppe input[type="datetime-local"],
.feldgruppe input[type="tel"],
.feldgruppe select,
.feldgruppe textarea {
    font: inherit;
    font-size: .9rem;
    padding: .46rem .62rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    width: 100%;
    box-shadow: inset 0 1px 1px rgba(23,25,31,.03);
}
.feldgruppe input:focus, .feldgruppe select:focus, .feldgruppe textarea:focus {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 14%, transparent);
    outline: none;
}
.feldgruppe textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }

/* =========================================================================
   Blättern
   ========================================================================= */

.blaettern { margin-top: 1.2rem; font-size: .87rem; }
.blaettern svg { display: none; }

/* =========================================================================
   Tastaturhilfe
   ========================================================================= */

.tastenhilfe {
    display: flex; gap: 1rem; flex-wrap: wrap;
    font-size: .77rem; color: var(--text-3);
    margin-top: 1rem; padding-top: .7rem;
    border-top: 1px solid var(--linie-2);
}
.tastenhilfe kbd {
    font-family: var(--mono);
    font-size: .71rem;
    border: 1px solid var(--linie);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: .04rem .3rem;
    background: var(--flaeche);
    color: var(--text-2);
}

/* =========================================================================
   Anmeldeseite und öffentliche Seiten
   ========================================================================= */

body.anmeldeseite {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background:
        radial-gradient(60rem 40rem at 50% -10%, color-mix(in srgb, var(--akzent) 8%, transparent), transparent),
        var(--grund);
}
.anmeldung {
    width: min(24rem, 92vw);
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 2rem 0;
}
.anmelde-logo { max-height: 3.2rem; max-width: 12rem; margin-bottom: .7rem; }
.anmeldung h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.55rem;
    margin: 0;
    text-align: center;
    letter-spacing: -.018em;
}
.anmelde-unter { color: var(--text-3); font-size: .85rem; margin: .15rem 0 1.3rem; }
.anmeldung .karte { width: 100%; padding: 1.45rem 1.55rem 1.55rem; box-shadow: var(--schatten-3); }
.anmeldung .feldgruppe input { font-size: .93rem; padding: .55rem .7rem; }


/* =========================================================================
   Modulkarten und Anleitung
   ========================================================================= */

.modulliste { display: flex; flex-direction: column; gap: .7rem; }
.modulkarte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .95rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: var(--schatten-1);
}
.modulkarte:hover { box-shadow: var(--schatten-2); }
.modulkarte .text { flex: 1 1 22rem; }
.modulkarte b { display: block; font-size: 1rem; font-weight: 620; letter-spacing: -.012em; }
.modulkarte p { margin: .18rem 0 0; color: var(--text-2); font-size: .885rem; line-height: 1.5; }
.modulkarte .schalter-bereich { display: flex; align-items: center; gap: .55rem; margin-left: auto; }

.anleitung { display: flex; flex-direction: column; gap: 1rem; }
.anleitungspunkt { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .85rem; align-items: start; }
.anleitungspunkt .nummer {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--akzent-tief);
    background: var(--akzent-hell);
    border-radius: var(--radius-klein);
    text-align: center;
    padding: .16rem 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.anleitungspunkt b { display: block; font-size: .95rem; margin-bottom: .12rem; font-weight: 620; }
.anleitungspunkt p { margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.55; }

/* =========================================================================
   Ticketliste
   ========================================================================= */

.ticketliste {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten-1);
}
.ticketzeile {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto 5rem;
    gap: .9rem;
    align-items: center;
    padding: .68rem .95rem;
    border-bottom: 1px solid var(--linie-2);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
}
.ticketzeile:last-child { border-bottom: none; }
.ticketzeile:hover { background: var(--flaeche-2); border-left-color: var(--akzent); }
.ticketzeile.p-hoch { border-left-color: var(--rot); }
.ticketzeile .nummer { font-family: var(--mono); font-size: .77rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ticketzeile .mitte { min-width: 0; }
.ticketzeile .betreff { display: block; font-weight: 600; font-size: .935rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticketzeile .wer { display: block; font-size: .82rem; color: var(--text-3); margin-top: .04rem; }
.ticketzeile .marken { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ticketzeile .zahlen { text-align: right; }
.ticketzeile .anzahl { display: block; font-family: var(--mono); font-size: .81rem; color: var(--text-2); }
.ticketzeile .alter { display: block; font-size: .73rem; color: var(--text-3); font-family: var(--mono); }

/* =========================================================================
   Ticketverlauf
   ========================================================================= */

.verlaufsliste { display: flex; flex-direction: column; gap: .75rem; }
.nachricht {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    background: var(--flaeche);
}
.nachricht.von-kunde { border-left: 3px solid var(--text-3); background: var(--flaeche-2); }
.nachricht.von-buero { border-left: 3px solid var(--akzent); }
.nachricht.entwurf { border-left: 3px solid var(--gelb); border-style: dashed; }
.nachricht .kopf { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; font-size: .79rem; color: var(--text-3); }
.nachricht .kopf b { color: var(--text-2); font-size: .855rem; font-weight: 620; }
.nachricht .kopf .wann { margin-left: auto; font-family: var(--mono); font-size: .735rem; }
.nachricht .rumpf { white-space: pre-wrap; font-family: var(--serif); font-size: .94rem; line-height: 1.62; }

.bausteinleiste { display: flex; flex-wrap: wrap; gap: .32rem; margin-bottom: .6rem; }
.bausteinleiste button {
    font: inherit; font-size: .775rem;
    padding: .17rem .55rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text-2);
    cursor: pointer;
}
.bausteinleiste button:hover { border-color: var(--akzent); color: var(--akzent-tief); background: var(--akzent-hell); }

/* =========================================================================
   Assistent
   ========================================================================= */

.verlauf-chat { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.chatkarte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: .78rem 1rem;
    box-shadow: var(--schatten-1);
}
.chatkarte.frage { border-left-color: var(--text-3); background: var(--flaeche-2); }
.chatkarte.antwort { border-left-color: var(--akzent); }
.chatrolle {
    font-size: .685rem; font-weight: 640;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: .28rem;
}
.chattext { white-space: pre-wrap; font-family: var(--serif); font-size: .95rem; line-height: 1.6; }
.chatquellen {
    margin-top: .6rem; padding-top: .5rem;
    border-top: 1px solid var(--linie-2);
    font-size: .81rem; color: var(--text-3);
}
.chatquellen b { color: var(--text-2); font-weight: 600; }

/* =========================================================================
   Terminliste
   ========================================================================= */

.terminliste { display: flex; flex-direction: column; gap: 1.1rem; }
.tagesgruppe {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten-1);
}
.tagestitel {
    padding: .55rem .95rem;
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--linie-2);
    font-size: .845rem;
    font-weight: 620;
    display: flex; align-items: center; gap: .5rem;
}
.terminzeile {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto 9rem;
    gap: .8rem;
    align-items: center;
    padding: .58rem .95rem;
    border-bottom: 1px solid var(--linie-2);
    border-left: 3px solid transparent;
}
.terminzeile:last-child { border-bottom: none; }
.terminzeile.st-bestaetigt { border-left-color: var(--gruen); }
.terminzeile.st-geplant { border-left-color: var(--gelb); }
.terminzeile.st-abgesagt { border-left-color: var(--rot); opacity: .55; }
.terminzeile .uhrzeit { font-family: var(--mono); font-size: .87rem; font-variant-numeric: tabular-nums; }
.terminzeile .uhrzeit .bis { display: block; font-size: .73rem; color: var(--text-3); }
.terminzeile .was { display: block; font-weight: 620; font-size: .925rem; }
.terminzeile .wer { display: block; font-size: .815rem; color: var(--text-3); }
.terminzeile .schnellstatus select {
    font: inherit; font-size: .79rem; padding: .2rem .4rem;
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--text-2); width: 100%;
}
.terminlink {
    padding: 0 .95rem .5rem 5.9rem;
    font-family: var(--mono); font-size: .715rem; color: var(--text-3);
    word-break: break-all;
    border-bottom: 1px solid var(--linie-2);
}

/* =========================================================================
   Feldbaukasten
   ========================================================================= */

.feldzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem auto auto;
    gap: .5rem; align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid var(--linie-2);
}
.feldzeile:last-child { border-bottom: none; }
.feldzeile input[type="text"], .feldzeile select {
    font: inherit; font-size: .885rem; padding: .34rem .5rem;
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--text); width: 100%;
}

/* =========================================================================
   Aufzählung
   ========================================================================= */

ul.punkte-liste { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
ul.punkte-liste li { color: var(--text-2); font-size: .92rem; line-height: 1.55; }

/* =========================================================================
   Schmale Bildschirme
   ========================================================================= */

@media (max-width: 62rem) {
    .spalten { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
    .huelle { grid-template-columns: 1fr; }
    .leiste {
        position: static; height: auto;
        flex-direction: row; align-items: center;
        gap: .8rem; overflow-x: auto;
        padding: .6rem .8rem;
    }
    .menue-rumpf { flex-direction: row; gap: .5rem; overflow-x: auto; }
    .leiste .menue { flex-direction: row; gap: .2rem; }
    .leiste .menue.gruppe::before { display: none; }
    .leiste .menue-titel { display: none; }
    .leiste a.unterpunkt { padding-left: .55rem; }
    .leiste a.unterpunkt::before { display: none; }
    .leiste .menue a .beschriftung { display: none; }
    .marke-text { display: none; }
    .marke { margin-bottom: 0; }
    .erscheinung { display: none; }
    .leiste-fuss {
        margin-top: 0; margin-left: auto;
        border-top: none; padding-top: 0;
        flex-direction: row; align-items: center; gap: .7rem;
    }
    .leiste-fuss .stand, .leiste-fuss .wer span { display: none; }
    .bereich { padding: 1rem .9rem 3rem; }
    .kopfzeile { padding: .7rem .9rem; }
    .ticketzeile { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
    .ticketzeile .zahlen { display: none; }
    .terminzeile { grid-template-columns: 4rem minmax(0, 1fr) auto; }
    .terminzeile .schnellstatus { grid-column: 2 / -1; }
    .terminlink { display: none; }
    .feldzeile { grid-template-columns: 1fr 1fr; }
}

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

/* Chips in Knöpfen tragen keinen Statuspunkt - dort ist es eine Zahl,
   kein Zustand. */
.knopf .chip::before { display: none; }
.knopf .chip {
    background: color-mix(in srgb, var(--auf-akzent) 22%, transparent);
    color: var(--auf-akzent);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   Feinheiten

   Sparsam eingesetzt: ein wenig Bewegung und Tiefe, damit die Oberfläche
   lebendig wirkt - aber nichts, was bei täglicher Nutzung ermüdet.
   ========================================================================= */

.karte, .eintrag, .kennzahl, .modulkarte, .ticketzeile, .terminzeile {
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.eintrag:hover, .modulkarte:hover { transform: translateY(-1px); }

.knopf { transition: background .13s ease, border-color .13s ease, box-shadow .13s ease; }
.reiter a { transition: background .13s ease, color .13s ease; }

/* Kartenköpfe bekommen einen zarten Verlauf statt einer flachen Fläche */
.karte-kopf {
    background: linear-gradient(180deg,
        var(--flaeche-2),
        color-mix(in srgb, var(--flaeche-2) 45%, var(--flaeche)));
}

/* Der Hauptknopf mit leichter Lichtkante oben */
.knopf.haupt {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--akzent) 92%, white),
        var(--akzent));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--akzent) 32%, transparent),
                inset 0 1px 0 color-mix(in srgb, white 20%, transparent);
}
.knopf.haupt:hover {
    background: var(--akzent);
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--akzent) 42%, transparent),
                inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
}

/* Kennzahlen: der Streifen läuft nach unten aus */
.kennzahl::after {
    background: linear-gradient(180deg, var(--linie), transparent);
}
.kennzahl:has(.wert.warnt)::after { background: linear-gradient(180deg, var(--rot), transparent); }
.kennzahl:has(.wert.gut)::after { background: linear-gradient(180deg, var(--gruen), transparent); }

/* Der aktive Reiter bekommt eine weiche Kante statt harter Fläche */
.reiter a.aktiv { box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--text) 45%, transparent); }

/* =========================================================================
   Öffentliche Terminbuchung

   Vier Schritte untereinander, jeder erscheint erst, wenn der vorige
   beantwortet ist. Der Kunde soll nie vor einem Formular stehen, dessen
   Sinn er noch nicht kennt.
   ========================================================================= */

.anmeldung.buchung { width: min(38rem, 94vw); }

.schritt {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem 0;
    border-top: 1px solid var(--linie-2);
}
.schritt:first-child { border-top: none; padding-top: 0; }
.schritt.verborgen { display: none; }
.schrittnummer {
    width: 1.7rem; height: 1.7rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.schrittinhalt > b { display: block; font-size: .95rem; font-weight: 620; margin-bottom: .6rem; }

/* ---- Leistungen ---- */

.leistungswahl { display: flex; flex-direction: column; gap: .45rem; }
.leistungskachel {
    text-align: left;
    font: inherit;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--linie);
    border-radius: var(--radius);
    padding: .65rem .85rem;
    cursor: pointer;
    transition: border-color .13s ease, background .13s ease;
}
.leistungskachel:hover { border-color: var(--text-3); border-left-color: var(--akzent); }
.leistungskachel.aktiv { border-color: var(--akzent); border-left-color: var(--akzent); background: var(--akzent-hell); }
.leistungskachel .was { display: block; font-weight: 620; font-size: .93rem; }
.leistungskachel .dauer { display: block; font-size: .8rem; color: var(--text-3); font-family: var(--mono); }
.leistungskachel .beschreibung { display: block; font-size: .84rem; color: var(--text-2); margin-top: .25rem; }

/* ---- Kalender ---- */

.monatskopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .6rem;
}
.monatskopf span { font-weight: 620; font-size: .93rem; }

.wochentage {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem; margin-bottom: .25rem;
}
.wochentage span {
    text-align: center;
    font-size: .68rem; font-weight: 640;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3);
}

.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.kalender .laedt { grid-column: 1 / -1; text-align: center; color: var(--text-3); font-size: .85rem; padding: 1.5rem 0; }

.kalendertag {
    /* Zwei Fallen in einem Raster:
       1. minmax(0,1fr) statt 1fr - sonst wird jede Spalte mindestens so
          breit wie ihr Inhalt und das Raster sprengt die Karte.
       2. keine aspect-ratio - zusammen mit der Streckung auf Zeilenhoehe
          schaukelt sie sich auf: hoehere Zelle, daher breitere Zelle,
          daher breitere Spalte. Feste Hoehe ist hier das Ruhigere. */
    min-width: 0;
    height: 2.9rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .05rem;
    font: inherit;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--gruen-hell);
    color: var(--text);
    cursor: pointer;
    transition: border-color .12s ease, transform .12s ease;
}
.kalendertag:hover { border-color: var(--gruen); transform: translateY(-1px); }
.kalendertag .zahl { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kalendertag .frei {
    font-size: .62rem; color: var(--gruen); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Nicht ".leer" — den Namen belegt schon der Leerzustand einer Liste
   (padding: 3rem), und der hat die Kalenderkacheln aufgeblaeht. */
.kalendertag.ohne {
    background: var(--flaeche-2);
    color: var(--text-3);
    cursor: default;
    border-color: var(--linie-2);
}
.kalendertag.ohne .zahl { font-weight: 400; }
.kalendertag.aktiv {
    background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
}
.kalendertag.aktiv .frei { color: var(--auf-akzent); }

.kalenderhinweis { font-size: .8rem; color: var(--text-3); margin: .6rem 0 0; }

/* ---- Uhrzeiten ---- */

.zeiten { display: flex; flex-wrap: wrap; gap: .35rem; }
.zeiten .laedt { color: var(--text-3); font-size: .85rem; }
.zeitknopf {
    font: inherit;
    font-family: var(--mono);
    font-size: .85rem;
    padding: .38rem .7rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.zeitknopf:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.zeitknopf.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); font-weight: 600; }

.zusammenfassung {
    background: var(--akzent-hell);
    border-left: 3px solid var(--akzent);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    padding: .55rem .8rem;
    font-size: .89rem;
    color: var(--text);
    margin: 0 0 .9rem;
    font-weight: 550;
}

/* ---- Kartenkopf mit erklärendem Zusatz ---- */

.karte-beiwort {
    font-size: .8rem;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* ---- Wochenplan der buchbaren Leistung ----
   Zwei Zeitfenster je Tag. Mehr braucht kein Betrieb dieser Größe; wer
   drei bräuchte, nimmt einen abweichenden Einzeltag. */

.wochenplan td { padding-top: .3rem; padding-bottom: .3rem; }
.wochenplan input[type="time"] {
    width: 7.2rem;
    font-family: var(--mono);
    font-size: .85rem;
    padding: .28rem .45rem;
}
.zeitpaar { display: inline-flex; align-items: center; gap: .4rem; }
.zeitpaar > span { color: var(--text-3); font-size: .8rem; }

/* =========================================================================
   Terminmodul: Monatsraster des Betriebs, Sterne, Vorlagen
   ========================================================================= */

.monatsraster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
}
.monatstag {
    min-width: 0;
    min-height: 5.2rem;
    display: flex; flex-direction: column; gap: .12rem;
    padding: .3rem;
    border: 1px solid var(--linie-2);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
}
.monatstag .zahl {
    font-size: .78rem; font-weight: 600; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.monatstag.vorbei { background: var(--flaeche-2); }
.monatstag.vorbei .zahl { opacity: .55; }
.monatstag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.monatstag.heute .zahl { color: var(--akzent-tief); }
.monatstag.belegt { border-color: var(--linie); }
.monatstag.offen { border-left: 3px solid var(--gelb); }

.monatstag .punkt {
    display: block;
    font-size: .68rem;
    line-height: 1.25;
    padding: .1rem .25rem;
    border-radius: 3px;
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monatstag .punkt.st-angefragt,
.monatstag .punkt.st-geplant { background: var(--gelb-hell); color: var(--gelb); }
.monatstag .punkt.st-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.monatstag .punkt.st-nicht_erschienen { background: var(--flaeche-2); color: var(--text-3); text-decoration: line-through; }
.monatstag .mehr { font-size: .66rem; color: var(--text-3); padding-left: .25rem; }

.raster-legende {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: .7rem;
    font-size: .76rem; color: var(--text-3);
}
.raster-legende span { display: inline-flex; align-items: center; gap: .3rem; }
.klecks { width: .65rem; height: .65rem; border-radius: 2px; display: inline-block; }
.klecks.offen { background: var(--gelb-hell); border: 1px solid var(--gelb); }
.klecks.fest { background: var(--akzent-hell); border: 1px solid var(--akzent); }
.klecks.vorbei { background: var(--flaeche-2); border: 1px solid var(--linie); }

/* ---- Sterne für die Rückmeldung ----
   Die Eingaben stehen absteigend im Markup (5 zuerst), damit ~ nach rechts
   greifen kann. Angezeigt wird die Reihe deshalb umgekehrt. */

.sterne { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.sterne input { position: absolute; opacity: 0; width: 0; height: 0; }
.sterne label {
    font-size: 1.9rem; line-height: 1;
    color: var(--linie);
    cursor: pointer;
    transition: color .1s ease, transform .1s ease;
}
.sterne label:hover,
.sterne label:hover ~ label,
.sterne input:checked ~ label { color: #E8A317; }
.sterne label:hover { transform: scale(1.12); }
.sterne input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---- Aufklappbare Mailvorlagen ---- */

.vorlage {
    border: 1px solid var(--linie-2);
    border-radius: var(--radius-klein);
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: var(--flaeche);
}
.vorlage > summary {
    cursor: pointer;
    font-size: .9rem; font-weight: 600;
    display: flex; align-items: center; gap: .5rem;
    list-style: none;
}
.vorlage > summary::-webkit-details-marker { display: none; }
.vorlage > summary::before {
    content: '▸';
    color: var(--text-3);
    transition: transform .12s ease;
    display: inline-block;
}
.vorlage[open] > summary::before { transform: rotate(90deg); }
.vorlage[open] > summary { margin-bottom: .7rem; }
.vorlage textarea { font-family: var(--mono); font-size: .82rem; line-height: 1.5; }
.vorlage code, .hilfe code {
    font-family: var(--mono); font-size: .78rem;
    background: var(--flaeche-2); padding: .05rem .25rem; border-radius: 3px;
}

/* =========================================================================
   Modulreiter

   Jede Seite, die zu einem Modul gehört, trägt die Reiter dieses Moduls —
   alle seine Seiten plus seine Einstellungen. Vorher lagen die Einstellungen
   unter Einrichtung → Module → … und wurden dort schlicht nicht gefunden.
   ========================================================================= */

.modulreiter {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
    padding: 0 1.6rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 5;
}

.modulreiter .modulname {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-right: .8rem;
    padding: .55rem 0;
    font-size: .72rem;
    font-weight: 680;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}
.modulreiter .modulname .zeichen { width: 1rem; height: 1rem; opacity: .75; }

.modulreiter a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .62rem .8rem;
    font-size: .88rem;
    font-weight: 550;
    color: var(--text-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
}
.modulreiter a:hover { color: var(--text); border-bottom-color: var(--linie); }
.modulreiter a.aktiv {
    color: var(--akzent-tief);
    border-bottom-color: var(--akzent);
    font-weight: 640;
}

.modulreiter .zahl {
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .3rem;
    border-radius: 999px;
    background: var(--flaeche-2);
    color: var(--text-3);
}
.modulreiter a.aktiv .zahl { background: var(--akzent-hell); color: var(--akzent-tief); }
.modulreiter .zahl.warnt { background: var(--gelb-hell); color: var(--gelb); }

@media (max-width: 900px) {
    .modulreiter { padding: 0 1rem; overflow-x: auto; flex-wrap: nowrap; }
    .modulreiter .modulname { display: none; }
}

/* ---- Buchbare Leistungen als Karten ----
   Vorher eine Tabelle: bei schmalem Fenster lief die Aktionsspalte rechts
   heraus, und der Knopf „Einstellen" war schlicht nicht zu sehen. */

.leistungskarte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
}
.leistungskarte .kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: .8rem;
}
.leistungskarte .kopf b { font-size: 1rem; margin-right: .45rem; }
.leistungskarte .kopf .nebentext { display: block; margin-top: .2rem; max-width: 44rem; }
.leistungskarte .knoepfe { display: flex; gap: .4rem; align-items: center; flex: none; }

.leistungskarte .kennwerte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .55rem .9rem;
    margin: 0;
    padding-top: .7rem;
    border-top: 1px solid var(--linie-2);
}
.leistungskarte .kennwerte dt {
    font-size: .68rem; font-weight: 680; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3);
    margin-bottom: .1rem;
}
.leistungskarte .kennwerte dd {
    margin: 0; font-size: .88rem; font-weight: 550;
    font-variant-numeric: tabular-nums;
}
.leistungskarte .kennwerte dd span { font-weight: 400; color: var(--text-3); font-size: .8rem; }
.leistungskarte .kennwerte dd .fehlt { color: var(--gelb); font-weight: 600; }

/* ---- Sperrkalender: Urlaub anklicken statt tippen ---- */

.sperrkalender { max-width: 22rem; }
.sperrkalender .monatskopf { margin-bottom: .5rem; }
.sperrkalender .monatsname { font-weight: 620; font-size: .9rem; }

.sperrraster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .2rem;
}
.sperrtag {
    min-width: 0;
    height: 2.2rem;
    font: inherit;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease;
}
.sperrtag:hover { border-color: var(--text-3); }
.sperrtag.wochenende { color: var(--text-3); background: var(--flaeche-2); }
.sperrtag.vorbei { opacity: .45; }
.sperrtag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.sperrtag.gesperrt {
    background: var(--rot-hell);
    border-color: var(--rot);
    color: var(--rot);
    font-weight: 700;
    text-decoration: line-through;
}

.sperrfuss {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-top: .55rem;
}
.sperrfuss .anzahl { font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

.zeilehinzu {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    margin-bottom: .5rem;
}
.zeilehinzu input { width: auto; font-family: var(--mono); font-size: .82rem; padding: .28rem .45rem; }
.zeilehinzu span { color: var(--text-3); font-size: .82rem; }

/* ---- Untertabs innerhalb einer Seite ---- */

.untertabs {
    display: flex;
    gap: .2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--linie);
}
.untertabs button {
    font: inherit;
    font-size: .88rem;
    font-weight: 550;
    padding: .5rem .85rem;
    border: none;
    background: none;
    color: var(--text-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    transition: color .12s ease, background .12s ease;
}
.untertabs button:hover { color: var(--text); background: var(--flaeche-2); }
.untertabs button.aktiv {
    color: var(--akzent-tief);
    border-bottom-color: var(--akzent);
    font-weight: 640;
}

/* ---- Filterleiste über einer Liste ---- */

.filterleiste {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.filterleiste select,
.filterleiste input[type="search"] { width: auto; font-size: .85rem; padding: .32rem .55rem; }
.filterleiste input[type="search"] { min-width: 14rem; }
.filterleiste .treffer { margin-left: auto; font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

.knopfgruppe { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.knopfgruppe a {
    padding: .34rem .75rem;
    font-size: .85rem; font-weight: 550;
    color: var(--text-2); text-decoration: none;
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
}
.knopfgruppe a:last-child { border-right: none; }
.knopfgruppe a:hover { background: var(--flaeche-2); }
.knopfgruppe a.aktiv { background: var(--akzent); color: var(--auf-akzent); font-weight: 640; }

/* ---- Aufklappbarer Monatskasten über der Liste ---- */

.monatskasten {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.monatskasten > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.monatskasten > summary::-webkit-details-marker { display: none; }
.monatskasten > summary::before { content: '▸'; color: var(--text-3); transition: transform .12s ease; }
.monatskasten[open] > summary::before { transform: rotate(90deg); }
.monatskasten > summary span { font-size: .82rem; color: var(--text-3); }
.monatskasten[open] > summary { margin-bottom: .9rem; }

.monatstag { text-decoration: none; color: inherit; }
.monatstag.gewaehlt { border-color: var(--akzent); background: var(--akzent-hell); }

/* ---- Terminliste ---- */

.termintabelle td { vertical-align: top; }
.termintabelle .nebentext { display: block; font-size: .78rem; color: var(--text-3); font-weight: 400; }
.termintabelle .schnellstatus { display: inline-block; margin-right: .3rem; }
.termintabelle .schnellstatus select { font-size: .8rem; padding: .22rem .4rem; width: auto; }
.termintabelle tr.st-abgesagt b,
.termintabelle tr.st-nicht_erschienen b { text-decoration: line-through; opacity: .7; }

/* Aufklappbare Karten (Anlegen, Warteliste, Kalenderabo) */
details.karte > summary { cursor: pointer; list-style: none; }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::before { content: '▸'; color: var(--text-3); transition: transform .12s ease; }
details.karte[open] > summary::before { transform: rotate(90deg); }

/* =========================================================================
   Vertragslupe

   Was genauer angesehen werden sollte, steht oben und trägt links einen
   Streifen. Die Farbe ordnet ein, sie urteilt nicht — deshalb kein Rot für
   „schlecht", sondern Gelb für „hier hinsehen".
   ========================================================================= */

.lupe .kurzfassung {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--text);
    padding: .8rem 1rem;
    background: var(--flaeche-2);
    border-radius: var(--radius-klein);
    margin: 0 0 1.2rem;
}

.lupentitel {
    font-size: .72rem;
    font-weight: 680;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 .5rem;
}

.spalten.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }

.pflichtliste { margin: 0; padding-left: 1.1rem; }
.pflichtliste li { font-size: .9rem; line-height: 1.5; margin-bottom: .35rem; }
.pflichtliste.pflicht li::marker { color: var(--gelb); }
.pflichtliste.recht li::marker { color: var(--gruen); }

.lupenpunkt {
    border-left: 3px solid var(--linie);
    padding: .7rem 0 .7rem .9rem;
    margin-bottom: .9rem;
}
.lupenpunkt.st-ansehen { border-left-color: var(--gelb); }
.lupenpunkt.st-ungewoehnlich { border-left-color: var(--akzent); }
.lupenpunkt.st-ueblich { border-left-color: var(--gruen); }

.lupenpunkt .punktkopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.lupenpunkt .punktkopf b { font-size: .95rem; }
.lupenpunkt .steht-da { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.55; }

.lupenpunkt blockquote.fremd {
    font-family: var(--serif, Georgia, serif);
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-2);
    border-left: 2px solid var(--linie-2);
    padding: .1rem 0 .1rem .7rem;
    margin: .4rem 0;
}

.lupenpunkt .vergleich,
.lupenpunkt .alltag { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--text-2); }
.lupenpunkt .etikett {
    display: inline-block;
    font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3);
    background: var(--flaeche-2);
    padding: .1rem .35rem;
    border-radius: 3px;
    margin-right: .4rem;
}