/*
 * Eigene Ergänzungen zu @kern-ux/native – ausschließlich für Bausteine,
 * die KERN (Stand 2.7.2) noch nicht fertig anbietet: "Header" und "Tabs"
 * sind dort offiziell noch "in Bearbeitung" (siehe kern-ux.de/komponenten).
 * Bewusst im selben Idiom gehalten: nutzt KERNs eigene Farb-/Abstands-
 * Tokens und Icon-Klassen, nur die Struktur drumherum ist eigen.
 *
 * Lädt NACH kern.min.css + kern-brand.css.
 */

/* Horizontale Navigation (Kopfzeile-Bereich UND Unter-Reiter, gleiche
   Optik, .e-nav--tabs etwas kompakter für die zweite Ebene). Klartext
   statt Framework: einfache <nav><a>-Liste, aktiver Zustand über das
   native aria-current="page" (von Screenreadern verstanden, kein
   zusätzliches ARIA nötig). */
.e-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kern-metric-space-medium, 16px);
    border-bottom: 1px solid var(--kern-color-layout-border-contextual);
    margin-bottom: var(--kern-metric-space-large, 24px);
}
.e-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.75rem 0.1rem;
    color: var(--kern-color-layout-text-muted-contextual);
    text-decoration: none;
    font-weight: var(--e-weight-medium);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.e-nav a:hover {
    color: var(--e-color-primary);
}
.e-nav a[aria-current="page"] {
    color: var(--e-color-primary);
    font-weight: var(--e-weight-semibold);
    border-bottom-color: var(--e-color-accent);
}
.e-nav--tabs {
    margin-bottom: var(--kern-metric-space-large, 24px);
}
.e-nav--tabs a {
    font-size: 0.95rem;
    padding: 0.5rem 0.1rem;
}

/* Kopfzeilen-Leiste: Marke links, Nutzer-/Logout-Aktionen rechts. Nutzt
   kern-container für die gleiche max-Breite wie der restliche Inhalt. */
.e-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: var(--kern-metric-space-medium, 16px) 0;
}
.e-kopf__marke {
    display: flex;
    align-items: center;
    text-decoration: none;
}
/* Logo ersetzt den bisherigen Text-Schriftzug (Nutzer-Vorgabe 2026-08-24:
   eigenes Logo statt Textmarke, auf allen Seiten mit diesem Header).
   Nur die Höhe fest vorgeben, Breite ergibt sich aus dem Seitenverhältnis
   der Bilddatei – "ansehnlich groß" laut Nutzer-Vorgabe, deutlich
   präsenter als der bisherige kleine Schriftzug. Nach dem neuen Logo mit
   Unterzeile "Ihr Amtshelferlein" (2026-08-27) nochmal deutlich
   vergrößert (2.75rem -> 4rem) – bei der alten Höhe war die kleine
   Unterzeile darin kaum lesbar (Nutzer-Feedback: "ich kann die
   Unterschrift kaum lesen"). Gilt automatisch für JEDE Seite mit diesem
   Header (Verwaltung + öffentliche Seiten), eine einzige Stelle. */
.e-kopf__logo {
    display: block;
    height: 4rem;
    width: auto;
}
/* Rollen-Anzeige ("Super-Administration"/"Mandantenname · Mandanten-
   Administration"/…) steht jetzt mittig zwischen Logo und Abmelden-Button
   statt wie zuvor als zweite Zeile unter dem Markennamen gestapelt
   (Nutzer-Vorgabe 2026-08-24) – flex:1 auf dem mittleren Element nimmt
   den verbleibenden Platz zwischen den beiden äußeren Elementen ein,
   text-align:center zentriert den Text darin. Schriftgröße normale
   Fließtextgröße, fett statt der vorherigen kleineren/gedämpften Optik.
   */
.e-kopf__rolle {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: var(--e-weight-bold, 700);
    color: var(--kern-color-layout-text-default-contextual);
}

/* Akzentbalken – generisches Hervorhebungselement, siehe README */
.akzentbalken {
    display: block;
    width: 3rem;
    height: 0.3rem;
    background: var(--e-color-secondary);
    border-radius: var(--kern-metric-border-radius-pill, 999px);
    margin-bottom: 0.6rem;
}

/* Hilfe-/Info-Trigger ("?"-Button neben Texten/Feldern, öffnet einen
   kern-dialog mit Erläuterung). kern-btn--tertiary allein ist nur
   transparent + farbiges Icon, ohne jede Kontur – wirkte laut Nutzer-
   Feedback 2026-08-23 nicht erkennbar klickbar. Deshalb eigene, deutlich
   als Button lesbare Optik: runde, gefüllte Fläche in unserer
   Sekundärfarbe (Hellblau/Cyan). */
.e-hilfe-trigger.kern-btn {
    vertical-align: middle;
    margin-left: 0.3em;
    background: var(--e-color-secondary);
    border-radius: 999px;
    width: 1.6rem;
    height: 1.6rem;
    min-height: 1.6rem;
    min-width: 1.6rem;
    padding: 0;
    margin-top: 0;
}
.e-hilfe-trigger.kern-btn .kern-icon {
    background-color: #fff;
}

/* KERN setzt bei .kern-fieldset bewusst border:0 und margin:0 (rein
   semantische Gruppierung, visuelle Abgrenzung ist Aufgabe der Seite).
   Nutzer-Feedback 2026-08-23: mehrere Fieldsets untereinander OHNE jede
   Abgrenzung wirken wie eine einzige lange Liste. Deshalb hier ein
   eigener, karten-artiger Rahmen um jedes Fieldset – Optik lehnt sich an
   kern-card an (gleiche Rahmenfarbe/Radius/Fläche), aber die Fieldset/
   Legend-Semantik (wichtig für Screenreader-Gruppierung) bleibt erhalten. */
fieldset.kern-fieldset {
    border: 1px solid var(--kern-color-decorative-border-contextual);
    /* Zweiter Gold-Akzent: schmaler linker Rand statt vollflächig, damit
       es "klein, aber wiederkehrend" bleibt statt aufdringlich zu wirken. */
    border-left: 3px solid var(--e-color-accent);
    border-radius: var(--kern-metric-border-radius-default, 4px);
    background: var(--e-color-bg-subtle);
    padding: 1.5rem 1.5rem 1.75rem;
}
fieldset.kern-fieldset legend.kern-label {
    background: var(--e-color-bg-subtle);
}
fieldset.kern-fieldset + fieldset.kern-fieldset {
    margin-top: 1.5rem;
}
fieldset.kern-fieldset legend.kern-label {
    padding: 0 0.35rem;
    margin-left: -0.35rem;
}

/* KERNs Haken ist eine sehr dünne, um 47° gedrehte Linie, die nur einen
   kleinen Teil der 32px-Box füllt – wirkt wie "kaum sichtbar" (Nutzer-
   Meldung 2026-08-23, Screenshot zeigte den Haken nur unten rechts als
   schwachen Strich). Ersetzt durch ein deutlich klareres, inzwischen
   allgemein bekanntes Muster: angehakt = Box komplett in Markenfarbe
   gefüllt, mit einem kräftigen weißen Haken darauf (Farbe kommt über
   background-color, die Form über eine Maske – dieselbe Technik wie
   KERNs eigene .kern-icon-Klassen, siehe kern.min.css). */
.kern-form-check__checkbox {
    position: relative;
}
.kern-form-check__checkbox:checked {
    background: var(--e-color-primary);
    border-color: var(--e-color-primary);
}
.kern-form-check__checkbox:checked::before,
.kern-form-check__checkbox:checked:hover::before,
.kern-form-check__checkbox:checked:focus::before {
    all: unset;
    content: '';
    position: absolute;
    inset: 6px;
    display: block;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* KERN-Formularfelder strecken sich per Default auf die volle Breite
   ihres Containers (align-self:stretch) – bei einem breiten
   Seiten-Container wirkt das für ein einzelnes Auswahlfeld/Textfeld
   überdimensioniert. Vernünftige Standard-Maximalbreite, pro Feld mit
   `style="max-width:none"` überschreibbar, falls doch die volle Breite
   gewünscht ist (z. B. eine lange Textarea). */
.kern-form-input {
    max-width: 26rem;
}

/* Seiten-Kopfbereich (Überschrift + kurze Beschreibung): KERN legt
   zwischen .kern-title/.kern-body bewusst keinen eigenen Vertikalabstand
   fest (komponenten-übergreifend nicht vorausgesetzt) – für den
   wiederkehrenden Seitenkopf-Rhythmus einmal zentral festgelegt statt
   pro Seite neu zu erfinden. Die Einleitung außerdem gedämpft statt
   gleich dunkel wie der übrige Fließtext, sonst keine erkennbare
   Hierarchie zwischen Titel/Unterzeile/Inhalt. */
main.kern-container > h1 {
    margin-bottom: 0.5rem;
}
main.kern-container > h1 + p {
    color: var(--e-color-muted);
    margin-bottom: 2rem;
}

/* Kleiner, wiederkehrender Gold-Akzent unter jeder Seitenüberschrift
   (Nutzer-Vorgabe 2026-08-23: Akzentfarbe soll öfter vorkommen, nicht nur
   im aktiven Reiter) – als generierter Inhalt statt Markup, damit jede
   künftige Verwaltungsseite ihn automatisch bekommt, ohne ihn manuell
   einzubauen. */
main.kern-container > h1::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin-top: 0.6rem;
    background: var(--e-color-accent);
    border-radius: var(--kern-metric-border-radius-pill, 999px);
}

/* KERNs Textgrößen sind auf werbliche Bürgerportale ausgelegt – für ein
   dichtes Verwaltungswerkzeug wirken sie im Vergleich zur eher kompakten
   Kopfzeile/Navigation überdimensioniert (Nutzer-Feedback 2026-08-23:
   "Text auf der Einstellungen-Seite ist recht groß" im Vergleich zu
   Reitern/Markentext). Zentral hier gedämpft statt pro Seite einzeln. */
main.kern-container h1.kern-title--large {
    font-size: 1.375rem;
}
main.kern-container legend.kern-label--large {
    font-size: 1.05rem;
}
main.kern-container p.kern-body,
main.kern-container div.kern-body {
    font-size: 0.95rem;
}
/* Feld-/Checkbox-Beschriftungen (<label class="kern-label">) blieben bei
   KERNs unverändertem Standard von 18px – größer als sowohl die
   Bereichsüberschrift daneben (legend.kern-label--large, 16.8px) als auch
   der normale Fließtext (kern-body, 15.2px), dadurch wirkte die
   Hierarchie verdreht (Nutzer-Feedback 2026-08-27: "Text hinter
   Checkboxen etc. sollte genau so groß sein wie der restliche Text").
   Jetzt dieselbe Größe wie kern-body. Bewusst über den Element-Selektor
   `label.kern-label` (nicht die bloße Klasse), damit NICHT die vielen
   `<span class="kern-label">`-Beschriftungen innerhalb von Buttons/Badges
   mitgetroffen werden – deren Text soll unverändert in Button-Größe
   bleiben. Gilt auch auf den Login-/Passwort-Seiten (.e-auth-karte),
   die main.kern-container nicht verwenden. */
main.kern-container label.kern-label,
.e-auth-karte label.kern-label {
    font-size: 0.95rem;
}
/* Dasselbe Missverhältnis fanden wir auch beim tatsächlichen Feld-INHALT:
   Text-/Datumsfelder und Auswahlfelder blieben bei KERNs 18px, größer als
   die (jetzt 15.2px kleine) Beschriftung darüber (Nutzer-Feedback
   2026-08-28: "Eingabefelder ... Auswahlfelder ... Datumsfelder haben
   alle noch eine andere Schriftgröße"). Jetzt einheitlich mit Label/
   Fließtext. */
main.kern-container .kern-form-input__input,
main.kern-container .kern-form-input__select,
.e-auth-karte .kern-form-input__input,
.e-auth-karte .kern-form-input__select {
    font-size: 0.95rem;
}
/* div.kern-body zusätzlich zu p.kern-body (2026-08-27): .kern-body-Text,
   der ein <x-hilfe>-"?"-Symbol enthält, darf NICHT in einem <p> stehen –
   die Komponente rendert dabei auch ein <dialog>-Element, und <p> erlaubt
   laut HTML5-Spezifikation nur Phrasing Content. Der Browser repariert
   das automatisch (schließt das <p> vorzeitig, das <dialog> wird zum
   Geschwister), wodurch das eigentlich beabsichtigte schließende </p> im
   Quelltext zu einem verwaisten Ende-Tag wird – <p> hat als einziges
   HTML-Element die Sonderregel, dass ein solches verwaistes Ende-Tag
   einen NEUEN, leeren <p></p> einfügt, der unsichtbar zusätzlichen Platz
   braucht (gefunden auf der Mandanten-Einstellungsseite, "Zugang"-Bereich:
   16px zu viel Abstand unten). <h2>/<h3> haben diese Sonderregel nicht
   (deshalb funktioniert <x-hilfe> dort seit je problemlos) – bei <p>
   deshalb immer ein <div class="kern-body"> verwenden, sobald ein
   <x-hilfe> direkt darin steht. */

/* Wiederkehrender Rhythmus für Abschnitts-Überschriften/Tabellen auf
   Verwaltungsseiten (Mitglieder, Sitzungen, Accounts …) – zentral statt
   pro Seite neu erfunden. */
main.kern-container h2.kern-title {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}
main.kern-container table.kern-table {
    margin-bottom: 1.25rem;
}
/* Tabellenzellen richten sich per Default am oberen Rand aus – bei
   Aktions-Buttons in derselben Zeile wie kurzer Text wirkt das, als
   "klebten" die Buttons an der oberen Linie statt zur Zeile zu gehören
   (Nutzer-Screenshot 2026-08-23). Vertikal zentriert liest sich die ganze
   Zeile als zusammengehörig. */
main.kern-container .kern-table__cell,
main.kern-container .kern-table__header {
    vertical-align: middle;
}

/* Boxierter Seitenabschnitt (Überschrift + Inhalt), optische Alternative
   zu Fieldsets für nicht-Formular-Inhalte (Tabellen, Aktionsflächen) –
   selbe Optik wie Fieldsets, damit eine Seite mit mehreren Abschnitten
   nicht wie eine einzige lange, unstrukturierte Liste wirkt (Nutzer-
   Feedback 2026-08-23: "wirkt alles wild hintereinandergereiht").
   Ursprünglich mit goldenem linkem Rand + gräulicher Fläche (wie die
   Fieldset-Boxen) – auf der Sitzungsseite mit mehreren aufeinander-
   folgenden Abschnitten wirkte das laut Nutzer-Feedback 2026-08-24 zu
   dunkel/unruhig ("Kästchen selbst dunkler als weiß", "linke Ränder nicht
   gelb"). Jetzt schlicht: weiße Fläche (identisch zum Seitenhintergrund),
   nur der dünne Rahmen grenzt ab – näher an kern-card's eigener,
   zurückhaltender Optik. */
.e-abschnitt {
    border: 1px solid var(--kern-color-decorative-border-contextual);
    border-radius: var(--kern-metric-border-radius-default, 4px);
    background: var(--e-color-surface);
    padding: 1.5rem 1.5rem 1.75rem;
    /* Vorher nur über `.e-abschnitt + .e-abschnitt` (Abstand NUR zwischen
       zwei Abschnitten) gelöst – ein Button/Element direkt NACH einem
       einzelnen Abschnitt (z. B. "Gesamtes Archiv durchsuchen" nach der
       Gremien-Tabelle) hatte dadurch gar keinen Abstand und hing direkt am
       Kasten (Nutzer-Feedback 2026-08-24: "WIEDER den Button direkt unter
       den Content vorher gehangen"). Jetzt am Abschnitt selbst, gilt
       dadurch automatisch für JEDES nachfolgende Element, nicht nur für
       einen weiteren Abschnitt (Ränder angrenzender Blockelemente
       kollabieren ohnehin zum größeren der beiden Werte, kein doppelter
       Abstand zwischen zwei Abschnitten).

       margin-top ergänzt (2026-08-28, gleicher Fehler nochmal aus der
       ANDEREN Richtung gemeldet): ein Element direkt VOR einem Abschnitt
       (z. B. "Umbenennen"/"Gremium löschen"-Buttons vor dem neuen
       "Mitglieder"-Kasten auf der Gremium-Seite) hing ohne diesen Zusatz
       genauso am oberen Rahmen fest. Jetzt wie bei article.kern-card
       (siehe unten) beide Richtungen abgedeckt statt nur eine. */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
/* main.kern-container h2.kern-title{margin-top:2.5rem} (oben, für den
   Abstand ZWISCHEN aufeinanderfolgenden Abschnitten auf der Seite) ist
   spezifischer als eine einfache .e-abschnitt-Regel (main.kern-container +
   Element + Klasse schlägt Klasse + Element + Klasse) und hätte die
   Nullung sonst überstimmt – der 2.5rem-Abstand kam dadurch zusätzlich
   zum ohnehin schon vorhandenen Box-Padding oben drauf (Nutzer-Feedback
   2026-08-23: "so viel Platz oben, bevor die Überschrift kommt"). Deshalb
   hier ebenfalls unter main.kern-container skopiert. */
main.kern-container .e-abschnitt > h2.kern-title {
    margin-top: 0;
}
/* Dasselbe Spezifitätsproblem betraf auch Überschriften innerhalb einer
   kern-card (z. B. "Schnelllinks" auf der Super-Admin-Startseite) – der
   Rhythmus-Abstand kam dort zusätzlich zum Card-Padding oben drauf,
   wodurch der Abstand von der oberen Kartenlinie zur Überschrift falsch
   wirkte (Nutzer-Feedback 2026-08-24). Nachdem dieses Muster jetzt dreimal
   nacheinander einzeln gemeldet werden musste (Abschnitt, Karte, jetzt
   Alert/Dialog), hier zusätzlich systematisch ALLE __header-Bausteine
   abgedeckt, die dieses Projekt tatsächlich mit einer h2.kern-title
   befüllt (kern-accordion/-dropdown/-summary/-task-list__header werden
   nirgends im Projekt verwendet, deshalb bewusst ausgelassen) – nicht nur
   die gerade konkret gemeldete Stelle. */
main.kern-container .kern-card__header h2.kern-title,
main.kern-container .kern-alert__header h2.kern-title,
main.kern-container .kern-dialog__header h2.kern-title {
    margin-top: 0;
}
/* Karten brauchen denselben Rhythmus-Abstand wie Tabellen/Abschnitte –
   sowohl NACH UNTEN (ohne das wirken direkt folgende Aktions-Buttons
   "angeklatscht", Nutzer-Feedback 2026-08-24, Schnelllinks-Karte +
   "Neuen Mandanten anlegen"/"Mandanten löschen") ALS AUCH NACH OBEN
   (derselbe Fehler wiederholt: die Schnelllinks-Karte auf der Mandanten-
   Detailseite klebte direkt am Speichern-Button darüber, weil hier nur
   margin-bottom gesetzt war – margin-top fehlte schlicht. Künftig bei
   JEDEM Abstands-Fix beide Richtungen prüfen, nicht nur die gerade
   gemeldete.). */
main.kern-container article.kern-card {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Kompakte, gestapelte Kennzahlen-Liste (z. B. Abstimmungsstatus je
   Mandant in der Super-Admin-Tabelle) – vorher durch Mittelpunkte
   getrennt in einer Zeile, dadurch schwer überfliegbar (Nutzer-Vorgabe
   2026-08-24: "abgelegt: 6" / "Offen: 0" / "geschlossen: 13" jeweils in
   eigener Zeile). */
.e-kennzahlen-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

/* Hoch/Runter-Buttons einer Abstimmungs-Karte (Reihenfolge ändern) als
   eng zusammenstehendes Paar statt zweier einzelner Buttons mit demselben
   großen Abstand wie zu "Bearbeiten"/"Löschen" (Nutzer-Vorgabe
   2026-08-24: "näher zusammen, dass klar ist, wofür sie da sind"). Vorher
   außerdem kern-btn--tertiary (randlos, wirkt neben den umrandeten/
   gefüllten Nachbar-Buttons deutlich "kleiner"/unscheinbarer) – jetzt wie
   "Bearbeiten" auf kern-btn--secondary umgestellt, damit beide optisch
   gleich viel Gewicht haben. */
.e-reorder-gruppe {
    display: inline-flex;
    gap: 0.2rem;
}
.e-abschnitt table.kern-table,
.e-abschnitt .e-abstimmung-karte {
    background: var(--e-color-surface);
}

/* KERN kennt keine eigene "gefahr"/destruktive Button-Variante. Basis
   bleibt kern-btn--primary (Struktur/Größe/Icon-Layout), nur die Farbe
   wird über die von .kern-btn--primary gelesene CSS-Variable lokal auf
   diesem Element umgebogen – Verwendung: class="kern-btn kern-btn--primary
   kern-btn--gefahr". */
.kern-btn.kern-btn--primary.kern-btn--gefahr {
    --kern-color-action-default-contextual: var(--e-color-danger);
    --kern-color-action-on-default-contextual: #fff;
}

/* Zweite eigene Button-Variante nach demselben Trick wie kern-btn--gefahr:
   Basis bleibt kern-btn--primary, nur die Farbe wird lokal umgebogen – hier
   auf Gold mit dunkelblauer Schrift (CD-Vorgabe, Verwendung: class="kern-btn
   kern-btn--primary kern-btn--akzent"). Zusätzlich die Hover-/Active-Schatten
   mit übersteuert: KERN berechnet sie aus dem GLOBALEN
   --kern-color-action-default (Blau), nicht aus der hier gesetzten
   -contextual-Variante – ohne diese beiden Zeilen würde der Button beim
   Hovern kurz blau aufblitzen statt golden nachzudunkeln. */
.kern-btn.kern-btn--primary.kern-btn--akzent {
    --kern-color-action-default-contextual: var(--e-color-accent);
    --kern-color-action-on-default-contextual: var(--e-color-primary);
    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--e-color-accent), black calc(100% - var(--kern-color-action-state-opacity-hover)));
    --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--e-color-accent), black calc(100% - var(--kern-color-action-state-opacity-active)));
}

/* Abstimmungs-Karten auf der Sitzungsseite: kern-card selbst hat keinen
   Außenabstand (Aufgabe der Seite, siehe Fieldset-Kommentar oben) – nur
   der Abstand zwischen mehreren gestapelten Karten fehlt noch. KERNs
   Footer streckt Buttons per Default gleichmäßig (flex:1) – bei bis zu
   fünf gemischten Text-/Icon-Buttons (öffnen/rauf/runter/bearbeiten/
   löschen) wirkt das zu breit/ungleichmäßig, deshalb hier auf natürliche
   Breite zurückgesetzt. */
.e-abstimmung-karte {
    margin-bottom: 1.25rem;
}
.e-abstimmung-karte .kern-card__footer .kern-btn {
    flex: 0 0 auto;
}

/* Kleiner Abstand über einzeln stehenden Aktions-Buttons (z. B. "Neues
   Gremium anlegen" nach einer Tabelle, "Umbenennen"/"Löschen" nach der
   Überschrift) – Verwendung: class="... e-aktion-abstand".
   Bewusst als .kern-btn.e-aktion-abstand (zwei Klassen) statt nur
   .e-aktion-abstand: mit gleicher Spezifität wie unten die
   .kern-btn-Reset-Regel (margin-top: 0) hätte sonst rein die
   Reihenfolge im Stylesheet entschieden – und die Reset-Regel steht
   weiter unten, hätte also immer gewonnen. Dadurch griff dieser
   Abstand bislang an KEINER der zahlreichen Einsatzstellen im Projekt
   (Nutzer-Meldung 2026-08-28: "Person als abwesend melden"-Button
   klebt am Text). */
.kern-btn.e-aktion-abstand {
    margin-top: 0.5rem;
}
.kern-btn.e-aktion-abstand + .kern-btn.e-aktion-abstand {
    margin-left: 0.75rem;
}

/* Zugangscode-Formular in der Stimmberechtigten-Tabelle (Checkboxen +
   Erzeugen-Button): vorher standen Checkboxen und Button in zwei
   gestapelten Zeilen, wodurch der Button in Zeilen mit viel Zellenhöhe
   "weit unten" wirkte (Nutzer-Feedback 2026-08-23) – jetzt eine einzige,
   umbrechende Flex-Zeile auf gemeinsamer Grundlinie. */
.e-zugangscode-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0;
}
.e-zugangscode-form .kern-form-check {
    margin: 0;
}

/* Ein Code-Schnipsel (z. B. eine URL) in einem grauen Fieldset-Kasten
   verschwindet farblich, wenn er dieselbe graue Fläche wie der Kasten
   selbst hat – braucht eine eigene, hellere Fläche, um als eigenes
   Element erkennbar zu bleiben. Monospace nur hier (nicht global, da
   code.token an anderer Stelle auch für die große Zugangscode-Anzeige
   verwendet wird, die bewusst nicht wie klassischer Code aussehen soll). */
.kern-fieldset code.token {
    display: inline-block;
    background: var(--e-color-surface);
    border: 1px solid var(--kern-color-decorative-border-contextual);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
}

/* Formular-Aktionsbereich (Speichern-Button etc.) sichtbar vom Inhalt
   trennen statt direkt anschließend – ein Trennstrich plus Abstand macht
   deutlich "hier endet der Inhalt, hier beginnt die Aktion". */
.e-form-aktionen {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kern-color-layout-border-contextual);
}

/* Das alte, unpräfigierte components.css (für Seiten, die noch nicht auf
   KERN-Klassen umgestellt sind, siehe README) setzt u. a. `button {
   margin-top: 0.9rem }`. Das gilt technisch auch für <button
   class="kern-btn">, weil KERN selbst keinen eigenen margin-top setzt
   (geerdete Lücke wird sonst von der niedriger-spezifischen Alt-Regel
   gefüllt). Hier bewusst zurücksetzen, damit KERN-Buttons ihren eigenen,
   konsistenten Abstand behalten.

   margin-bottom wird aus einem zweiten, unabhängigen Grund ebenfalls
   zurückgesetzt: `.kern-btn--x-small` bringt selbst `margin-top` UND
   `margin-bottom: 8px` mit (offenbar für mehrzeilig umbrechende
   Button-Gruppen gedacht). In Tabellenzellen mit `vertical-align: middle`
   zählt dieses unsichtbare Rand-Margin mit zur "Höhe" des zu
   zentrierenden Inhalts – der Button selbst landet dadurch sichtbar
   oberhalb der Zellenmitte statt wirklich mittig (Nutzer-Feedback
   2026-08-23: "Buttons in Tabellenzeilen zu weit oben"). Betrifft auch
   Flex-Reihen mit align-items:center (z. B. .e-zugangscode-form) aus
   demselben Grund. Alle Stellen, an denen zwischen mehreren
   Buttons/Elementen absichtlich Abstand gebraucht wird, regeln das
   bereits explizit selbst (kern-dialog__footer/kern-card__footer per
   `gap`, .e-aktion-abstand, .e-form-aktionen) – hängen nicht von diesem
   Button-eigenen margin-bottom ab. */
.kern-btn {
    margin-top: 0;
    margin-bottom: 0;
}
/* KERN hat noch eine dritte, unabhängige Margin-Quelle speziell für
   Icon-only-x-small-Buttons (Label nur per kern-sr-only, kein sichtbarer
   Text – z. B. die Hoch/Runter-Buttons einer Abstimmungs-Karte):
   `.kern-btn--x-small:has(.kern-sr-only)` setzt zusätzlich zur festen
   Breite (32px) ein `margin: 8px` auf ALLEN vier Seiten. Diese Selektor-
   Kombination (zwei Klassen + :has()) ist spezifischer als die einfache
   `.kern-btn`-Regel oben und überstimmt sie deshalb trotz späterer
   Position im Stylesheet – erst beim gezielten Verkleinern des Abstands
   zwischen zwei solchen Buttons entdeckt (Nutzer-Vorgabe 2026-08-24:
   Hoch/Runter-Buttons sollen näher zusammenstehen). Gleiche Selektor-
   Spezifität wie KERNs Regel, damit die spätere Position im Stylesheet
   wieder den Ausschlag gibt. */
.kern-btn--x-small:has(.kern-sr-only) {
    margin: 0;
}

/* Formulare außerhalb von Dialogen/Fieldsets (z. B. die öffentliche
   Archiv-Suche, oeffentlich/archiv.blade.php): KERNs .kern-form-input hat
   selbst kein margin-bottom – innerhalb eines .kern-dialog__body oder
   .kern-fieldset__body sorgt deren eigenes `gap:16px` dafür, dass
   gestapelte Felder trotzdem Abstand zueinander haben, außerhalb beider
   klebten Felder und der folgende Button aneinander (Nutzer-Feedback
   2026-08-24: "Suchen-Button WIEDER zu nahe am Feld"). Statt für jedes
   einzelne Formular erneut von Hand Abstände zu setzen, hier dieselbe
   Gap-Logik als wiederverwendbare Klasse für den Wrapper. */
.e-formular-spalte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kern-metric-space-default, 16px);
}
/* Mehrere Buttons nebeneinander innerhalb eines .e-formular-spalte-Blocks
   (z. B. "Suchen" + "Zurücksetzen") – eigene Zeile statt die äußere
   column-gap zu missbrauchen. */
.e-form-inline-aktionen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Eigene Pagination-Ansicht (resources/views/pagination/kern.blade.php,
   ersetzt Laravels Tailwind-Standardansicht – siehe Kommentar dort für den
   Grund). Schlichte Zeile: Vorherige/Nächste als kern-btn--tertiary mit
   KERN-eigenen Pfeil-Icons, Status-Text mittig dazwischen. */
.e-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.e-pagination__status {
    color: var(--e-color-muted);
}

/* KERN gibt <dialog> keine eigene Breite vor (nur max-width: 768px als
   Deckel) – der Browser lässt native Dialoge dadurch auf ihren Inhalt
   schrumpfen ("fit-content"), was bei einem Absatz Fließtext oder einem
   Formular mit wenigen Feldern schmal wirkt (Nutzer-Feedback 2026-08-23:
   "warum ist das so schmal?", gemessen ca. 448px). Fest auf gut doppelte
   Breite gesetzt, aber per min() weiterhin responsiv (schrumpft auf
   schmalen Fenstern statt zu überlaufen) – die bestehende
   @media(max-width:768px)-Regel aus kern.min.css (min-width/max-width:100%
   für mobile Vollbild-Dialoge) gewinnt dort weiterhin, da min/max-width
   immer vor width priorisiert werden. */
.kern-dialog {
    width: min(90vw, 56rem);
    max-width: min(90vw, 56rem);
}

/* KERN zeichnet Text-/Auswahlfelder standardmäßig nur mit einer unteren
   Trennlinie (Material-Design-artig), ringsum unsichtbar bis zum Fokus –
   wirkt wie ein "kaputtes"/unfertiges Feld, solange man nicht hineinklickt
   (Nutzer-Feedback 2026-08-24, u. a. Audit-Log-Filter, "Neue Abstimmung
   anlegen"). Jetzt ein durchgehender, dezenter Rahmen im Ruhezustand
   (dieselbe neutrale Randfarbe wie die Box/Card-Rahmen im Rest der Seite)
   plus ein weicher Fokus-"Glow" in unserer Primärfarbe statt KERNs hartem
   4px-Outline-Ring. Bei Selects sitzt der eigentliche Rahmen am
   Wrapper-Element (`.kern-form-input__select-wrapper`), nicht am
   `<select>` selbst – deshalb `:focus-within` statt `:focus` dort, sonst
   entsteht ein doppelter/versetzter Rahmen. KERN erzwingt seinen eigenen,
   unsichtbaren Rahmen jeweils per `!important` – deshalb hier ebenfalls
   nötig.

   Zusätzlich `.e-auth-karte` als zweiter Scope: die Login-/Passwort-
   zurücksetzen-Seiten (layouts/auth.blade.php) nutzen bewusst KEIN
   main.kern-container (kein Kopfbereich/Navigation dort), fielen dadurch
   erst durchs Raster – exakt derselbe "Felder nur unten umrandet"-Fehler
   trat dort erneut auf (Nutzer-Hinweis 2026-08-27), obwohl schon einmal
   gelöst. Lehre: Fixes, die "für Formularfelder allgemein" gedacht sind,
   nicht an einen einzelnen Container binden, sondern bei jeder neuen
   Seite mit `.kern-form-input` aktiv gegenprüfen. */
main.kern-container .kern-form-input__input,
main.kern-container .kern-form-input__select-wrapper,
.e-auth-karte .kern-form-input__input,
.e-auth-karte .kern-form-input__select-wrapper {
    border: 1px solid var(--e-color-border) !important;
    border-radius: var(--kern-metric-border-radius-small, 2px);
}
main.kern-container .kern-form-input__input:focus,
.e-auth-karte .kern-form-input__input:focus {
    border: 1px solid var(--e-color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(27, 58, 102, 0.25);
}
main.kern-container .kern-form-input__select-wrapper:focus-within,
.e-auth-karte .kern-form-input__select-wrapper:focus-within {
    border: 1px solid var(--e-color-primary) !important;
    box-shadow: 0 0 0 4px rgba(27, 58, 102, 0.25);
}
main.kern-container .kern-form-input__select:focus,
.e-auth-karte .kern-form-input__select:focus {
    outline: none !important;
}

/* Öffentliche Seiten (layouts/oeffentlich.blade.php) nutzen jetzt für den
   Kopfzeilen-Hinweis dieselbe .e-kopf__rolle-Klasse wie der
   Verwaltungsbereich (siehe deren Definition oben) statt einer eigenen,
   abweichenden Optik – Nutzer-Feedback 2026-08-24: "entspricht definitiv
   nicht dem Stil der anderen Seiten". Der bisherige feste Fußzeilen-
   Hinweis ("Ausschließlich öffentliche Abstimmungen …") ist entfallen,
   dafür jetzt ein "?"-Hilfe-Symbol direkt beim Sitzungsstatus (siehe
   oeffentlich/sitzung.blade.php) – deshalb hier keine eigenen Klassen
   mehr nötig. */

/* Als die Dialoge verdoppelt wurden (siehe Notiz weiter oben), wurde nicht
   mitbedacht, dass KERN seine Dialog-Inhalte per align-items:flex-start
   NICHT auf volle Breite streckt (jedes Kind schrumpft auf seine eigene
   Inhaltsbreite) UND dass .kern-form-input bereits eine eigene
   max-width:26rem hat (ursprünglich für einzelne Felder auf normalen
   Seiten gedacht, nicht für Dialoge). Im jetzt fast doppelt so breiten
   Dialog wirkten Formularfelder UND die hineinverschobene Fehlerbox
   dadurch nur noch halb so breit wie der Dialog, mit viel Leerraum rechts
   (Nutzer-Feedback 2026-08-24: "seltsame Abstände", "nur halb so groß").
   Fix: Dialog-Inhalt streckt sich jetzt auf volle Breite, die
   26rem-Beschränkung gilt nur noch außerhalb von Dialogen. */
main.kern-container .kern-dialog__body {
    align-items: stretch;
}
.kern-dialog .kern-form-input {
    max-width: none;
}

/* Erfolgs- UND Fehler-Toast (resources/views/layouts/verwaltung.blade.php):
   schweben oben über dem Seiteninhalt statt fest im Textfluss zu stehen,
   verschwinden per JS von selbst nach ein paar Sekunden oder per Klick auf
   das X (Nutzer-Vorgabe 2026-08-24, für die Fehlermeldung ausdrücklich auch
   auf Nachfrage bestätigt trotz des Risikos, dass sie verschwindet, während
   das gemeldete Feld noch ungültig ist). Der Fehler-Toast bleibt zusätzlich
   `.kern-alert--danger`, damit er weiterhin per JS in einen automatisch
   wieder geöffneten Dialog verschoben werden kann (siehe Kommentar dort).
   h2 bekommt flex:1, damit der Schließen-Button innerhalb des ohnehin schon
   horizontalen kern-alert__header ganz nach rechts rutscht, statt direkt
   hinter dem Text zu kleben. */
.e-toast {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: min(90vw, 40rem);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    animation: e-toast-einblenden 0.25s ease-out;
}
.e-toast .kern-alert__header h2.kern-title {
    flex: 1;
}
.e-toast--ausblenden {
    animation: e-toast-ausblenden 0.3s ease-in forwards;
}
@keyframes e-toast-einblenden {
    from {
        opacity: 0;
        transform: translate(-50%, -0.75rem);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
@keyframes e-toast-ausblenden {
    to {
        opacity: 0;
        transform: translate(-50%, -0.75rem);
    }
}

/* Login/Passwort-zurücksetzen (layouts/auth.blade.php, eigenes schlankes
   Layout ohne Kopfzeile/Navigation – Nutzer-Vorgabe 2026-08-27, "bitte
   professionell"): eine zentrierte Karte auf dezentem Grau, Logo obendrauf.
   Bewusst eigene, kleine Klassen statt e-kopf/e-abschnitt wiederzuverwenden,
   da diese Seiten strukturell nichts mit dem restlichen App-Rahmen
   (Kopfzeile+Navigation+kern-container) teilen. */
.e-auth-seite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--e-color-bg-subtle);
    padding: 1.5rem;
}
.e-auth-karte {
    width: 100%;
    max-width: 26rem;
    background: var(--e-color-surface);
    border: 1px solid var(--kern-color-decorative-border-contextual);
    border-radius: var(--kern-metric-border-radius-default, 4px);
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.e-auth-logo {
    display: block;
    height: 3rem;
    width: auto;
    margin: 0 auto 1.5rem;
}
.e-auth-karte h1.kern-title {
    text-align: center;
    margin-bottom: 1.5rem;
}
.e-auth-karte .kern-alert {
    margin-bottom: 1.5rem;
}
.e-auth-karte form .kern-form-input {
    margin-bottom: 1.25rem;
}
/* Nur echte Formular-Buttons (Anmelden/Code anfordern/…) auf volle Breite
   strecken, NICHT jeden .kern-btn in der Karte – traf sonst versehentlich
   auch den Schließen-Button (X) eines hier hineingerenderten Toasts
   (kern-btn kern-btn--tertiary e-toast__schliessen), siehe Nutzer-Hinweis
   2026-08-27. Der Toast selbst steht inzwischen zwar außerhalb der Karte
   (siehe layouts/auth.blade.php), `form` als Scope bleibt trotzdem als
   zweite Absicherung, falls je ein weiterer .kern-btn direkt in der Karte
   landet. */
.e-auth-karte form .kern-btn {
    width: 100%;
    justify-content: center;
}
.e-auth-karte .e-auth-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}
/* KERNs .kern-link setzt seine eigene, größere Schriftgröße (18px) fest –
   dadurch wirkten "Noch keinen Zugang?" (Fließtext, 14.4px laut Regel
   oben) und "Kostenlos testen" (der Link selbst) auf der Login-Seite
   unterschiedlich groß nebeneinander (Nutzer-Feedback 2026-08-28).
   Entschieden für gleiche Schriftgröße statt eines eigenen Gold-Buttons
   (siehe Konversation) – der Login-Bereich soll optisch zurückhaltend
   bleiben, "Anmelden" bleibt die einzige betonte Aktion auf der Seite. */
.e-auth-karte .e-auth-links a.kern-link {
    font-size: inherit;
}

/* Globaler Feedback-"Flyout Tab" (components/feedback-tab.blade.php,
   Nutzer-Vorgabe 2026-08-28): unten rechts fest verankert, im
   Ruhezustand nur das gelbe Dreieck (Griff) sichtbar, der Rest
   (Formular-Karte) liegt per translateX() außerhalb des Bildschirms und
   fährt bei Hover/Fokus/Klick auf 0 herein.

   Geometrie: Griff steht im Markup VOR der Karte (erstes Kind), Container
   ist rechtsbündig (`right:0`), Ruhezustand verschiebt den gesamten
   Container um "eigene Breite minus Griffbreite" nach rechts – dadurch
   bleibt exakt der Griff (die ersten `--e-feedback-griff` Pixel des
   Containers) im sichtbaren Bereich, die Karte (danach) liegt komplett
   jenseits der rechten Bildschirmkante. Bei geöffnetem Zustand
   (translateX(0)) landet die Karte an der echten Bildschirmkante, der
   Griff sitzt dann sichtbar links neben ihr wie eine angeheftete Ecke. */
.e-feedback-tab {
    --e-feedback-griff: 6rem;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    transform: translateX(calc(100% - var(--e-feedback-griff)));
    transition: transform 0.25s ease;
}
.e-feedback-tab:hover,
.e-feedback-tab:focus-within,
.e-feedback-tab.ist-offen {
    transform: translateX(0);
}
/* Überstimmt :hover/:focus-within per !important, solange die Maus noch
   über dem Tab steht, nachdem er per X/Escape/Außen-Klick geschlossen
   wurde (Nutzer-Meldung 2026-08-28: "X-Button funktioniert nicht" – ohne
   das hielt :hover das Panel trotz entfernter .ist-offen-Klasse optisch
   offen). Wird per mouseleave wieder entfernt (siehe
   components/feedback-tab.blade.php), danach funktioniert Hover wieder
   normal. */
.e-feedback-tab.erzwungen-zu {
    transform: translateX(calc(100% - var(--e-feedback-griff))) !important;
}
.e-feedback-tab__griff {
    flex-shrink: 0;
    width: var(--e-feedback-griff);
    height: var(--e-feedback-griff);
    background: var(--e-color-accent);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.6rem;
}
.e-feedback-tab__griff-icon {
    /* Jetzt ein echtes <svg> (Sprechblase + "?") statt KERNs
       maskiertem Icon-Span – deshalb `color` statt `background-color`,
       greift über `stroke="currentColor"`/`fill="currentColor"` im SVG
       selbst (Nutzer-Vorgabe 2026-08-28: kreativer als ein nacktes
       Fragezeichen). */
    color: var(--e-color-primary);
    width: 2.1rem;
    height: 2.1rem;
}
.e-feedback-tab__panel {
    width: 22rem;
    max-width: calc(100vw - var(--e-feedback-griff) - 1rem);
    background: var(--e-color-surface);
    border: 1px solid var(--kern-color-decorative-border-contextual);
    border-radius: var(--kern-metric-border-radius-default, 4px) 0 0 0;
    box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    position: relative;
}
.e-feedback-tab__schliessen {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.e-feedback-tab__titel {
    font-size: 1.05rem;
    margin: 0 2rem 1rem 0;
}
.e-feedback-tab__textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* Nutzer-Feedback 2026-08-28: "Bemerkungsfenster zu klein" – deutlich
       großzügiger als KERNs eigene Vorgabe, damit auch ein längerer Text
       ohne viel Scrollen Platz hat. */
    min-height: 8rem;
    margin-bottom: 1rem;
    padding: 0.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--kern-color-layout-text-default-contextual);
    border: 1px solid var(--e-color-border);
    border-radius: var(--kern-metric-border-radius-small, 2px);
    resize: vertical;
}
.e-feedback-tab__textarea:focus {
    outline: none;
    border-color: var(--e-color-primary);
    box-shadow: 0 0 0 4px rgba(27, 58, 102, 0.25);
}
.e-feedback-tab__fehler {
    color: var(--e-color-danger);
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}
.e-feedback-tab__danke {
    margin: 0;
}