/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   KOPFLEISTE — der Aufbau einer Seite: kein Streifen, drei Ebenen.
     .seite       1140 px, zentriert; die ganze Seite scrollt, kein Kasten darin
     .header      Marke links · Aktionen des Werkzeugs rechts · „Account"
     .kopf-nav    Umschalter links · weitere Umschalter oder Knöpfe rechts — darf fehlen
     .karte       der Inhalt: Karte mit Kopfzeile und Zahl
     .tabellen-leiste   Suche und Filter ÜBER einer Tabellenkarte
     .abschnitt-kopf    ein Bereich, der sich auf- und zuklappt
     .auswahl-ueberdeckung / .auswahl-fenster   ein Fenster, aus dem man EINEN Eintrag wählt
   Der Browser hat oben schon eine Leiste; ein zweiter schmaler Streifen
   darunter wäre eine Desktop-Metapher am falschen Ort. In den Kopf gehört,
   was das ganze Werkzeug betrifft — eine Suche gehört zu der Tabelle, die
   sie durchsucht. */

/* ── Die Seite ── 1140 breit, 32 oben, 24 seitlich, 80 unten. Sie scrollt
   als Ganzes; Dialoge, Fenster und die Anmeldekarte liegen `fixed` und
   brauchen keinen festen Körper. */
.seite {
    /* `width: 100%` bleibt: Wo ein Werkzeug den Körper als Flex-Spalte führt,
       nähme ein Flex-Kind sonst seine Inhaltsbreite. */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px var(--abstand-24) 80px;
    min-width: 0;
}
/* Schwebende Menüs gehören nicht als Kind in .seite: Die Regel darunter
   nähme ihnen die Mindestbreite. Sie stehen direkt im <body>. */
.seite > *,
.seite .tabellen-leiste,
.seite table { min-width: 0; max-width: 100%; }

/* ── EBENE 1 · Der Kopf ── links die Marke, rechts alles, was das Werkzeug
   als Ganzes betrifft, ganz außen der Konto-Menütitel. */
.header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-12) var(--abstand-16);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-24);
    position: relative;   /* Anker für die Menüs */
}

/* Was in Ebene 1 nach rechts gehört: Menütitel, Knöpfe, was zum Benutzer
   zählt. Die Marke steht oben, die Knöpfe bewusst 24 tiefer — eine leicht
   versetzte Anordnung. Wer beides auf einer Höhe will, streicht die Zeile. */
.header .rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    flex-wrap: wrap;
    margin-top: var(--abstand-24);
}

/* Der Menütitel — „Account" oder der Name des Benutzers: ein Knopf, der wie
   Text aussieht, bis man ihn anfasst. Wer angemeldet ist, steht im Menü. */
.kopf-menuetitel {
    margin: 0;
    padding: var(--abstand-6) var(--abstand-10);
    border: 0;
    background: none;
    border-radius: var(--rundung-mittel);
    color: var(--text-gedaempft);
    font: inherit;
    font-size: var(--schrift-sm);
    cursor: pointer;
    white-space: nowrap;
}
.kopf-menuetitel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* EBENE 2 — die Navigationszeile. Sie darf fehlen: Ein Werkzeug ohne
   Ansichten zum Wechseln ist kein Sonderfall. */
.kopf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-10);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-24);
}

/* ── Die Marke ── Zeichen + Name. Als Knopf öffnet sie den Über-Dialog
   (ueber.js); auf der Anmeldekarte steht sie ohne Knopf als <div class="marke">. */
.marke {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.marke-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-10);
    margin: -4px 0 0 -8px;   /* zieht die Fläche des Knopfes an die Kante */
    padding: var(--abstand-4) var(--abstand-8);
    border: 0;
    background: none;
    border-radius: var(--rundung-mittel);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* Kein Hover: Das Logo IST ein Knopf, sieht aber wie ein Logo aus — nur
   der Zeiger verrät, dass man klicken kann. Der Fokusring bleibt, er ist
   der einzige Hinweis für die Tastatur. */
.marke-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Das Zeichen neben dem Namen. Das Kit färbt es nicht um — ein Werkzeug,
   dessen Zeichen nur in einer Welt lesbar ist, setzt selbst
   `.dunkel .marke-zeichen { filter: brightness(0) invert(1); }`. */
.marke-zeichen {
    width: 20px;
    height: 20px;
    display: block;
    flex: none;
}

.marke-name {
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
}

.kopf-menuetitel:hover,
.kopf-menuetitel[aria-expanded="true"] { background: var(--flaeche-gehoben); color: var(--text); }

.kopf-nav-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

/* ── Der Umschalter ── zwei bis vier Ansichten desselben Inhalts in einer
   flachen Wanne; die gewählte hebt sich als Griff heraus.
       <nav class="umschalter" role="tablist">
         <button class="tab active" role="tab">Übersicht</button> …
   `role` ist kein Beiwerk: Die Tastaturbedienung liefert umschalter.js —
   ohne `role` gibt es die Optik und keine Bedienung. `.active` setzt das
   Werkzeug, `aria-selected` schreibt der Baustein nach; die Regel nimmt
   beide. */
.umschalter {
    display: inline-flex;
    align-items: center;
    /* Nicht schrumpfen: In einer Kopfzeile mit Knöpfen daneben würde die
       Wanne sonst auf schmalen Fenstern zusammengedrückt. */
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border-radius: var(--rundung-mittel);
    background: var(--linie-zart);
}
.umschalter .tab {
    border: 0;
    background: transparent;
    padding: var(--abstand-8) var(--abstand-14);
    border-radius: var(--rundung-klein);
    cursor: pointer;
    color: var(--text-gedaempft);
    font-family: inherit;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    line-height: normal;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.umschalter .tab:hover { color: var(--text); }
.umschalter .tab.active,
.umschalter .tab[aria-selected="true"] {
    background: var(--flaeche-aktiv);
    color: var(--text);
    box-shadow: var(--schatten-kante);
}
/* Der Fokusring gehört hierher: Mit dem wandernden tabindex ist er die
   einzige Anzeige, WO man in der Leiste steht, solange man mit den Pfeilen
   wandert und noch nicht geschaltet hat. */
.umschalter .tab:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}


/* ── Die Tabellen-Leiste ── die Zeile ÜBER einer Tabellenkarte: Suche links,
   Filter und Anzahl rechts. Kein Rahmen, kein Innenabstand — eine nackte
   Zeile, bündig mit dem Kopf der Karte darunter. */
.tabellen-leiste {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    margin-bottom: var(--abstand-24);
    flex-wrap: wrap;
}
/* Das Suchfeld samt Hülle mit Deckel: Ohne ihn wäre die Hülle unbegrenzt
   breit und schöbe die Knöpfe daneben an den Bildrand. */
.tabellen-leiste .suche,
.tabellen-leiste .suche-huelle { flex: 1 1 auto; max-width: 420px; min-width: 0; }
.tabellen-leiste .suche-huelle .suche { width: 100%; max-width: none; }
/* Was nach rechts gehört, kommt in diese Gruppe — sonst müsste jedes
   Werkzeug den Abstand selbst rechnen. */
.tabellen-leiste .rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
}

/* ── Die Karte ── Rahmen 1 px, Rundung 8, Grund erhaben, 24 darunter. */
.karte {
    background: var(--flaeche-erhaben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-karte);
    margin-bottom: var(--abstand-24);
    /* `clip`, nicht `hidden`: Beide schneiden den Inhalt an der Rundung ab,
       aber `hidden` macht die Karte zu einem Scroll-Kasten — und daran
       klebte ein `position: sticky`-Tabellenkopf fest, statt am Fenster.
       Mit `clip` gibt es keinen Kasten dazwischen. */
    overflow: clip;
}
.karte-kopf,
.abschnitt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-12);
    padding: var(--abstand-14) var(--abstand-20);
    border-bottom: 1px solid var(--linie);
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-mittel);
    letter-spacing: var(--laufweite);
    text-transform: uppercase;
    color: var(--text-gedaempft);
    /* Fest, damit die Kopfzeile immer 45 px hoch ist, egal welche Zeilenhöhe
       die Seite setzt. */
    line-height: 1.45;
}
/* Rechts im Kopf die Zahl zur Liste („249 Einträge") — Gemischtschreibung,
   13 px, gedämpft; die Zahl selbst in Textfarbe. */
.karte-kopf .anzahl {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    color: var(--text-gedaempft);
    white-space: nowrap;
}
.karte-kopf .anzahl strong { color: var(--text); font-weight: var(--gewicht-halbfett); }

/* ── Ein Bereich, der sich auf- und zuklappt ── Er trägt seinen Schalter
   an sich selbst, als Zeile mit Pfeil — nicht in der Kopfleiste. So macht
   es jedes Betriebssystem; niemand legt den Schalter für einen Bereich in
   die Titelleiste der App. */
.abschnitt-kopf {
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    border-left: 0; border-right: 0; border-top: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.abschnitt-kopf:hover { background: var(--flaeche-gehoben); }
/* Zugeklappt trägt die Kopfzeile keine Trennlinie — es steht nichts darunter.
   Den Zustand führt `aria-expanded`. */
.abschnitt-kopf[aria-expanded="false"] { border-bottom-color: transparent; }

/* Der Pfeil zeigt zu nach unten und dreht sich beim Öffnen nach oben — die
   Geste aus dem Web. 7 px: Er markiert nur, er ruft nicht. */
.abschnitt-kopf .pfeil {
    width: 7px;
    height: 7px;
    margin: -3px 4px 0 2px;
    border-right: 1.5px solid var(--text-gedaempft);
    border-bottom: 1.5px solid var(--text-gedaempft);
    transform: rotate(45deg);
    transition: transform 0.2s;
}
.abschnitt-kopf[aria-expanded="true"] .pfeil {
    margin-top: 3px;
    transform: rotate(-135deg);
}
.abschnitt-kopf .abschnitt-name { font-weight: var(--gewicht-mittel); }
/* Die Zusammenfassung steht nur, wenn der Bereich zu ist — dann sagt sie in
   einer Zeile, was drinsteht. */
.abschnitt-kopf .abschnitt-zusammenfassung {
    margin-left: var(--abstand-8);
    color: var(--text-gedaempft);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--schrift-sm);
}
.abschnitt-kopf[aria-expanded="true"] .abschnitt-zusammenfassung { display: none; }

/* ── Das Auswahl-Fenster ── eine Liste, aus der man EINEN Eintrag wählt und
   die sich danach schließt: ein mittiges Fenster über abgedunkeltem Grund,
   dort, wo man ohnehin hinsieht. Maße aus dem Dialog (Breite L, Höhe wie
   .modal-tall). Die FESTE Höhe ist Absicht — ohne sie hüpft das Fenster bei
   jedem Tastendruck in der Suche, weil es mit der Trefferzahl wächst. */
.auswahl-ueberdeckung {
    position: fixed;
    inset: 0;
    z-index: 120;   /* über dem Inhalt, unter dem Anmeldefenster (300) */
    background: var(--overlay);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-16);
}
.auswahl-ueberdeckung[data-offen="1"] { display: flex; }

.auswahl-fenster {
    width: 100%;
    max-width: 680px;
    height: 80vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-fenster);
    /* Aufblenden und leicht heben, statt zu schieben: Ein mittiges Fenster
       kommt aus keiner Richtung — es ist da. Der Übergang hängt am Zustand,
       nicht an einer Animation, die bei jedem display-Wechsel neu startet. */
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.auswahl-ueberdeckung[data-offen="1"] .auswahl-fenster { opacity: 1; transform: none; }

.auswahl-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
    padding: var(--abstand-12) var(--abstand-16);
    border-bottom: 1px solid var(--linie);
    flex-shrink: 0;
}
.auswahl-kopf .titel { font-weight: var(--gewicht-halbfett); }
.auswahl-kopf .anzahl { color: var(--text-gedaempft); font-size: var(--schrift-kompakt); }
.auswahl-kopf .zu {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--text-gedaempft);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.auswahl-kopf .zu:hover { color: var(--text); }

/* Die Filterzeile: unten enger und ohne Linie — die Liste darunter hat
   schon ihre eigene Kopfzeile, zwei Trenner übereinander wären zu viel. */
.auswahl-filter {
    display: flex;
    gap: var(--abstand-8);
    padding: var(--abstand-12) var(--abstand-16) var(--abstand-8);
    flex-shrink: 0;
}
/* Das Suchfeld mit demselben Deckel wie in der Tabellen-Leiste: Ohne ihn
   nimmt es alles, was die Klapplisten übrig lassen, und drückt sie an den
   Rand. Die Klapplisten bekommen eine feste Breite statt der Inhaltsbreite —
   168 ist die Mindestbreite eines Menüs, so springt beim Aufklappen nichts. */
.auswahl-filter .suche,
.auswahl-filter .suche-huelle { flex: 1 1 auto; max-width: 420px; min-width: 0; }
.auswahl-filter .suche-huelle .suche { width: 100%; max-width: none; }
.auswahl-filter .auswahl-huelle { flex: 0 0 168px; }
.auswahl-liste { overflow-y: auto; padding: var(--abstand-8); flex: 1; min-height: 0; }