/*
 * Aussehen der CAS-Anmeldemaske unter https://sso.kehrwoche.eu/login.
 *
 * CAS laedt diese Datei von sich aus, immer und ohne benanntes Theme - sie
 * muss nur unter /css/custom.css erreichbar sein. Dafuer sorgt die Rolle
 * docker/cas: sie legt dieses Verzeichnis nach /opt/docker/cas/static und
 * mountet es nur lesend nach /etc/cas/static; cas.properties nimmt es ueber
 * spring.web.resources.static-locations in die Suchliste auf.
 *
 * Aendern und ausrollen ohne Neustart des Containers:
 *
 *     ansible-playbook playbook.yml -i inventory.yml \
 *       --vault-password-file cert/ansible-password --tags cas-theme
 *
 * Das startet den Container neu und kappt damit bestehende Anmeldungen.
 * Absicht: CAS bindet statische Dateien mit einem Inhalts-Fingerabdruck ein
 * (/css/custom-<hash>.css) und berechnet die Zuordnung NUR BEIM START.
 * Ohne Neustart verweist die Seite weiter auf den alten Fingerabdruck - bei
 * Bildern antwortet der dann mit 404, das Symbol verschwindet einfach.
 *
 * ============================================================================
 * WAS HIER MOEGLICH IST - UND WAS NICHT
 * ============================================================================
 *
 * Dies ist reines CSS auf den Standardansichten von CAS. Die Struktur der
 * Seite gehoert dem Webflow und wird hier NICHT angefasst: Feldnamen,
 * execution, _eventId und die Fehlerausgabe bleiben, wie CAS sie rendert.
 * Umgestaltet wird, was sich ueber Farben, Abstaende, Rundungen und
 * Sichtbarkeit erreichen laesst.
 *
 * Das Markup kommt von Material Components Web (mdc-*) UND Bootstrap 5
 * gleichzeitig - beide Bibliotheken sind geladen und setzen teils sehr
 * spezifische Regeln. Deshalb steht an den Stellen, an denen sie
 * dagegenhalten, ein !important. Es ist dort kein Schlendrian, sondern die
 * einzige Moeglichkeit, ohne Template-Override zu gewinnen.
 *
 * Bewusst KEINE extern geladenen Schriften: Auf einer Anmeldemaske saehe ein
 * fremder Server sonst jeden Anmeldevorgang. Es gilt der Systemschrift-Stapel.
 * Auch kein zusaetzliches JavaScript - die CSP in cas.properties ist eng
 * gezogen, und eine Anmeldemaske braucht nichts davon.
 *
 * Struktureller Umbau - andere Anordnung, eigenes Logo als Bild, eigene
 * Texte - ginge erst mit ausgelagerten Templates. Das ist Schritt 2 in
 * backlog/cas-theme-umsetzung.md und kostet einen Pruefpunkt bei jedem
 * CAS-Major-Upgrade. Solange CSS reicht, ist CSS die guenstigere Wahl.
 */


/* ==========================================================================
 * 1. Farben und Masse an einer Stelle
 *
 * Alles Weitere greift nur noch auf diese Werte zu. Wer das Aussehen
 * anpassen will, aendert hier - und nicht verstreut weiter unten.
 * ========================================================================== */

:root {
    --kw-akzent: #4f46e5;
    --kw-akzent-stark: #4338ca;
    --kw-akzent-schwach: rgba(79, 70, 229, 0.12);
    --kw-ring: rgba(79, 70, 229, 0.28);

    --kw-grund: #eef1f7;
    --kw-grund-2: #dfe4ef;
    --kw-flaeche: #ffffff;
    --kw-linie: #d6dbe6;

    --kw-text: #151a23;
    --kw-text-leise: #5c6675;
    --kw-streifen: rgba(21, 26, 35, 0.035);

    --kw-radius: 16px;
    --kw-radius-klein: 10px;
    --kw-schatten:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 12px 32px -8px rgba(16, 24, 40, 0.16);

    --kw-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/*
 * Dunkle Darstellung, wenn das Betriebssystem sie verlangt. Eine
 * Anmeldemaske, die nachts weiss aufblitzt, ist ein vermeidbarer Schreck.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --kw-akzent: #818cf8;
        --kw-akzent-stark: #6366f1;
        --kw-akzent-schwach: rgba(129, 140, 248, 0.16);
        --kw-ring: rgba(129, 140, 248, 0.32);

        --kw-grund: #0b0f17;
        --kw-grund-2: #131a26;
        --kw-flaeche: #161d29;
        --kw-linie: #2a3444;

        --kw-text: #e9edf4;
        --kw-text-leise: #98a3b4;
        --kw-streifen: rgba(255, 255, 255, 0.045);

        --kw-schatten:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 16px 40px -12px rgba(0, 0, 0, 0.7);
    }
}


/* ==========================================================================
 * 2. Seitengrund
 *
 * ".bgimage" traegt in der CAS-Vorgabe ein Hintergrundbild. Es wird hier
 * durch einen ruhigen Verlauf ersetzt: kein zusaetzlicher Ladevorgang, und
 * auf kleinen Bildschirmen kein beschnittenes Motiv.
 * ========================================================================== */

body {
    font-family: var(--kw-schrift) !important;
    color: var(--kw-text);
    background: var(--kw-grund);
    -webkit-font-smoothing: antialiased;
}

.bgimage,
.mdc-drawer-app-content {
    background-image:
        radial-gradient(
            60rem 40rem at 12% -10%,
            var(--kw-akzent-schwach),
            transparent 60%
        ),
        radial-gradient(
            50rem 36rem at 105% 8%,
            var(--kw-akzent-schwach),
            transparent 55%
        ),
        linear-gradient(180deg, var(--kw-grund) 0%, var(--kw-grund-2) 100%)
        !important;
    background-color: var(--kw-grund) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-height: 100vh;
}


/* ==========================================================================
 * 3. Kopfleiste
 *
 * Die Vorgabe ist "navbar-dark bg-dark" - ein schwarzer Balken quer ueber
 * die Seite. Er weicht einer schwebenden Zeile ohne eigene Flaeche.
 * ========================================================================== */

#app-bar,
#app-bar .mdc-top-app-bar__row,
#app-bar .navbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

#app-bar {
    padding-top: 0.5rem;
}

/*
 * Der Schriftzug in der Kopfleiste. Er steht seit dem Override von
 * fragments/header.html als echter Text im Markup - vorher wurde er per
 * "content:" untergeschoben, weil das Template nicht zugaenglich war. Fuer
 * einen anderen Namen also das Template aendern, nicht diese Regel.
 *
 * Der Sprachwaehler wurde hier frueher muehsam zurechtgestutzt; er ist mit
 * demselben Override aus dem Markup verschwunden, die Regeln sind entfallen.
 */
.cas-wordmark {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--kw-text);
    text-decoration: none !important;
}

.cas-wordmark:hover {
    color: var(--kw-akzent);
}


/* ==========================================================================
 * 4. Die Anmeldekarte
 * ========================================================================== */

/*
 * Der aeussere Kasten muss weg. CAS' eigenes Stylesheet legt auf #content
 * ein "box-shadow: 1px 1px 3px #888" ohne jede Rundung - das ergibt einen
 * eckigen Schattenkasten um die runde Karte herum. Zwei Kaesten ineinander,
 * von denen nur der innere gemeint war.
 */
#content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Die Trennlinie am rechten Rand des Anmeldebereichs stammt aus einer
 * Anordnung mit zweiter Spalte daneben. Die gibt es hier nicht, also trennt
 * die Linie nichts.
 */
#loginForm.login-section {
    border-right: 0 !important;
}

#main-content {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
}

#content .mdc-card,
#content .card {
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
    background: var(--kw-flaeche) !important;
    border: 1px solid var(--kw-linie) !important;
    border-radius: var(--kw-radius) !important;
    box-shadow: var(--kw-schatten) !important;
    overflow: hidden;
}

#loginForm.card-body {
    padding: 2rem 1.75rem 1.75rem !important;
}

/*
 * Die Ueberschrift ist in der Vorgabe nur ein Schild-Symbol. Es wird zu
 * einer runden Marke mit Akzentfarbe.
 */
#login-form-controls h2 {
    margin-bottom: 1.5rem !important;
}

#login-form-controls h2 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--kw-akzent-schwach);
    color: var(--kw-akzent);
    font-size: 1.35rem;
}


/* ==========================================================================
 * 5. Eingabefelder
 *
 * Material zeichnet den Rahmen nicht am Feld, sondern ueber drei Spannen
 * (leading / notch / trailing) der "notched outline". Wer die Randfarbe
 * aendern will, muss alle drei anfassen - am Eingabefeld selbst passiert
 * sichtbar nichts.
 * ========================================================================== */

.cas-field .mdc-text-field {
    background: transparent !important;
    border-radius: var(--kw-radius-klein) !important;
}

.cas-field .mdc-notched-outline__leading,
.cas-field .mdc-notched-outline__notch,
.cas-field .mdc-notched-outline__trailing {
    border-color: var(--kw-linie) !important;
    transition: border-color 0.15s ease;
}

.cas-field .mdc-notched-outline__leading {
    border-radius: var(--kw-radius-klein) 0 0 var(--kw-radius-klein) !important;
}

.cas-field .mdc-notched-outline__trailing {
    border-radius: 0 var(--kw-radius-klein) var(--kw-radius-klein) 0 !important;
}

/*
 * Doppelt abgesichert: :focus-within greift auch dann, wenn das
 * JavaScript von Material die Klasse --focused einmal nicht setzt.
 */
.cas-field .mdc-text-field:focus-within .mdc-notched-outline__leading,
.cas-field .mdc-text-field:focus-within .mdc-notched-outline__notch,
.cas-field .mdc-text-field:focus-within .mdc-notched-outline__trailing,
.cas-field .mdc-text-field--focused .mdc-notched-outline__leading,
.cas-field .mdc-text-field--focused .mdc-notched-outline__notch,
.cas-field .mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--kw-akzent) !important;
}

.cas-field .mdc-text-field:focus-within {
    box-shadow: 0 0 0 4px var(--kw-ring);
}

.cas-field .mdc-text-field__input {
    color: var(--kw-text) !important;
    background: transparent !important;
    caret-color: var(--kw-akzent);
}

.cas-field .mdc-floating-label {
    color: var(--kw-text-leise) !important;
}

.cas-field .mdc-text-field--focused .mdc-floating-label {
    color: var(--kw-akzent) !important;
}

/*
 * Der Knopf zum Sichtbarmachen des Passworts ist in der Vorgabe ein
 * gefuellter blauer Block neben dem Feld. Er wird zum ruhigen Symbol.
 */
.reveal-password {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--kw-text-leise) !important;
}

.reveal-password:hover,
.reveal-password:focus {
    color: var(--kw-akzent) !important;
    background: var(--kw-akzent-schwach) !important;
}


/* ==========================================================================
 * 6. Anmeldeknopf
 * ========================================================================== */

#submitBtn {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem !important;
    border: 0 !important;
    border-radius: var(--kw-radius-klein) !important;
    background: var(--kw-akzent) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#submitBtn:hover {
    background: var(--kw-akzent-stark) !important;
    transform: translateY(-1px);
}

#submitBtn:active {
    transform: translateY(0);
}

#submitBtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--kw-ring) !important;
}


/* ==========================================================================
 * 7. Nebentexte
 * ========================================================================== */

#fieldsLegend,
#termsOfUse,
#securityNotice {
    color: var(--kw-text-leise) !important;
    font-size: 0.82rem;
    line-height: 1.5;
}

#sidebar {
    max-width: 26rem;
    margin: 1.25rem auto 0;
    text-align: center;
}

#loginForm a,
#sidebar a {
    color: var(--kw-akzent);
    text-decoration: none;
}

#loginForm a:hover,
#sidebar a:hover {
    text-decoration: underline;
}

.invalid-feedback,
.mdc-text-field-helper-text--validation-msg {
    font-size: 0.8rem;
}


/* ==========================================================================
 * 8. Fuss
 *
 * Die Vorgabe nannte dort Fassung und Bauzeitpunkt von CAS, den
 * Rechnernamen des Containers, die Besucher-IP und eine Apereo-Zeile. Eine
 * genaue Versionsangabe auf einer oeffentlichen Anmeldeseite sagt einem
 * Angreifer unmittelbar, welche Schwachstellen er zuerst probiert.
 *
 * Das war hier eine Zeit lang nur ausgeblendet und im Quelltext weiter zu
 * lesen. Seit dem Override von fragments/footer.html steht es nicht mehr im
 * HTML. Das Element selbst bleibt, weil das Layout es per Element-Auswahl
 * einbindet ("~{fragments/footer :: footer}") - es bekommt hier nur noch
 * seinen Abstand genommen.
 * ========================================================================== */
.cas-footer {
    padding: 0.75rem 0 1.25rem !important;
    /* cas.css gibt dem Fuss die Farbe der Kopfleiste von CAS (ein
     * dunkelblauer Balken). Seit dort ein Verweis steht, sieht man ihn;
     * er soll im Grund des Themes verschwinden. */
    background: transparent !important;
    color: var(--kw-text-leise) !important;
}

/* Seit 2026-10-07 steht im Fuss genau ein Verweis: die Hinweise zum
 * Datenschutz auf kehrwoche.eu. Unaufdringlich, aber lesbar. */
/* Die mitgelieferte cas.css blendet #casFooter unter 960px aus
 * ("@media (max-width: 960px) { #casFooter { display: none } }") - am Handy
 * fehlte der Verweis damit ganz (Ansichtstest, 2026-10-07). */
@media (max-width: 960px) {
    #casFooter.cas-footer {
        display: flex !important;
    }
}

.cas-footer a {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--kw-text-leise) !important;
    text-decoration: underline;
}


/* ==========================================================================
 * 9. Was die Anmeldeansicht zeigt und hier nicht hingehoert
 *
 * Was in Kopfleiste und Fuss stand, ist ueber die ausgelagerten Fragmente
 * inzwischen wirklich entfernt. Was hier bleibt, gehoert zur Anmeldeansicht
 * selbst (casLoginView), und die ist NICHT ausgelagert - hier wird also
 * weiterhin nur ausgeblendet. Beide Schalter stammen aus
 * cas-theme-default.properties im Jar cas-server-support-thymeleaf.
 * ========================================================================== */

/*
 * "Forgot your password?" verweist auf https://pwd.example.org - ein
 * Platzhalter aus der CAS-Vorgabe (cas.pm-links.enabled=true), der auf
 * unserer Maske als echter Link stand. Eine Passwortverwaltung gibt es hier
 * nicht; der Link fuehrte ins Leere und sah aus wie ein Versehen, weil er
 * eines war. Der Trenner darueber faellt mit weg.
 */
#pmlinks,
#loginForm hr {
    display: none !important;
}


/*
 * "Mit der Anmeldung ueber CAS erklaeren Sie sich mit unseren
 * Nutzungsbedingungen einverstanden." - ein Satz aus der CAS-Vorgabe
 * (cas.login-form.terms-of-use.enabled=true), der auf Bedingungen verweist,
 * die es hier nicht gibt. Der Verweis war sogar leer, weshalb der Satz
 * verstuemmelt dastand. Es ist reiner Text ohne Kaestchen zum Ankreuzen -
 * das Ausblenden aendert am Anmeldevorgang nichts.
 */
#termsOfUse {
    display: none !important;
}


/* ==========================================================================
 * 10. Erfolgsseite (casGenericSuccessView)
 *
 * Die Seite nach einer Anmeldung ohne Zieldienst. Sie zeigt die vom
 * Verzeichnis gelieferten Merkmale in drei Reitern - Principal,
 * Authentication und, sobald Dienste eingetragen sind, Services.
 *
 * Zwei Dinge waren hier falsch:
 *
 * 1. Die Karte war zusammengequetscht. Die Regel in Abschnitt 4 begrenzt
 *    sie auf 26rem - richtig fuer ein Anmeldeformular mit zwei Feldern,
 *    voellig falsch fuer eine zweispaltige Tabelle. Unterschieden werden
 *    die Ansichten am Inhalts-Container: die Anmeldeseite liefert
 *    <div id="content" class="d-flex ...">, die Erfolgsseite
 *    <div id="content" class="row">. Deshalb hier "#content.row" - das ist
 *    spezifischer als die Regel oben und gewinnt ohne !important.
 *
 * 2. Die Tabelle trug ihr Rohaussehen. Sie kommt gleich aus zwei Quellen:
 *    Bootstrap ("table table-striped") und Material ("mdc-data-table" samt
 *    __header-cell und __cell). Beide setzen eigene Hintergruende, Rahmen
 *    und Streifenfarben, die mit den Farbwerten hier nichts zu tun haben
 *    und in dunkler Darstellung entweder verschwinden oder blenden. Sie
 *    werden hier durchgehend ueberschrieben.
 *
 * Die Reiter sind funktionsfaehig - material.js haengt MDCTabBar an
 * .mdc-tab-bar und schaltet .attribute-tab um. Hier wird also nur ihr
 * Aussehen angefasst, nicht ihr Verhalten.
 * ========================================================================== */

#content.row {
    justify-content: center;
}

/*
 * Breit genug fuer zwei Spalten mit Merkmalsnamen und -werten, aber nicht
 * unbegrenzt: laengere Zeilen als etwa 56rem liest niemand mehr gern.
 */
#content.row .mdc-card,
#content.row .card {
    max-width: 56rem;
}

#content.row h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kw-text);
}

#content.row h2 i {
    color: var(--kw-akzent);
}

#content.row p {
    color: var(--kw-text-leise);
    font-size: 0.9rem;
    line-height: 1.55;
}

#content.row strong {
    color: var(--kw-text);
}

#content.row a {
    color: var(--kw-akzent);
    text-decoration: none;
}

#content.row a:hover {
    text-decoration: underline;
}


/* --- Reiterleiste --- */

#attribute-tabs {
    margin: 1.25rem 0 0;
    border-bottom: 1px solid var(--kw-linie);
}

/*
 * Mit dem Rasenmaeher, und das mit Absicht: Der helle Balken hinter den
 * Reitern kam weder von Material (dessen .mdc-tab hat "background: none")
 * noch von einer einzelnen Regel, die sich benennen liesse - im Spiel sind
 * gleichzeitig Bootstrap (.nav-tabs .nav-link), jQuery UI (cupertino, ueber
 * DataTables mitgeladen) und die Vorgabefarbe, die Browser einem <button>
 * geben. Statt der Reihe nach zu raten, wird hier der ganze Teilbaum
 * durchsichtig gesetzt.
 *
 * Der Balken unter dem aktiven Reiter ueberlebt das, weil er als BORDER
 * gezeichnet wird, nicht als Hintergrund.
 */
#attribute-tabs,
#attribute-tabs *,
#attribute-tabs *::before,
#attribute-tabs *::after {
    background-color: transparent !important;
    background-image: none !important;
}

#attribute-tabs .nav-tabs,
#attribute-tabs .mdc-tab-scroller,
#attribute-tabs .mdc-tab-scroller__scroll-area {
    border: 0 !important;
}

#attribute-tabs .mdc-tab {
    height: auto !important;
    min-width: 0 !important;
    padding: 0.6rem 1rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--kw-text-leise) !important;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#attribute-tabs .mdc-tab__text-label {
    color: inherit !important;
    font-size: 0.85rem;
}

#attribute-tabs .mdc-tab[aria-selected="true"],
#attribute-tabs .mdc-tab--active {
    color: var(--kw-akzent) !important;
}

/* Material zeichnet den Balken unter dem aktiven Reiter als eigenes Element. */
#attribute-tabs .mdc-tab-indicator__content--underline {
    border-color: var(--kw-akzent) !important;
    border-top-width: 2px !important;
    border-radius: 2px 2px 0 0;
}


/* --- Merkmalstabellen --- */

/*
 * Der Rahmen fuer den waagerechten Bildlauf. Lange Werte sollen die Karte
 * nicht sprengen und schon gar nicht die ganze Seite waagerecht schieben -
 * gescrollt wird innerhalb der Tabelle.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: transparent !important;
    font-size: 0.85rem;
}

/*
 * Die Zeilenhoehe steht bei Material an der ZEILE, nicht an der Zelle:
 * .mdc-data-table__header-row hat 56px, .mdc-data-table__row 52px. Padding
 * an den Zellen richtet dagegen nichts aus - die Kopfzeile blieb ein
 * 56 Pixel hoher Balken, obwohl die Beschriftung darin klein ist. Deshalb
 * hier die Hoehe der Zeilen selbst freigeben.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__header-row,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__row,
:is(#view-genericsuccess-authn-data, #casAccountProfile) thead tr,
:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody tr {
    height: auto !important;
    background: transparent !important;
}

/*
 * Material rundet die aeusseren Kopfzellen mit 4px ab - ein Rest der
 * Karten-Optik, die diese Tabelle nicht hat. Ohne das sitzt ein sichtbarer
 * Knick an den Enden der Trennlinie.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__header-cell:first-child,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__header-cell:last-child {
    border-radius: 0 !important;
}

/*
 * Zwei der drei Tabellen tragen zusaetzlich .mdc-data-table__table, die
 * erste nicht - eine Unsauberkeit der CAS-Vorlage. Diese Klasse setzt
 * "table-layout: fixed" und "white-space: nowrap", wodurch dieselbe
 * Tabelle je nach Reiter anders aussaehe: einmal nach Inhalt umbrochen,
 * einmal in starre Haelften geteilt. Hier werden alle drei gleich
 * behandelt.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__table {
    table-layout: auto !important;
    white-space: normal !important;
    min-width: 100%;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) thead th,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__header-cell {
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kw-linie) !important;
    background: transparent !important;
    color: var(--kw-text-leise) !important;
    font-family: inherit !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody td,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .mdc-data-table__cell {
    height: auto !important;
    padding: 0.55rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kw-linie) !important;
    background: transparent !important;
    color: var(--kw-text) !important;
    vertical-align: top;
    /*
     * Merkmalswerte sind oft lange Zeichenketten ohne Leerzeichen - DNs,
     * Kennungen, Zeitstempel. Ohne diese Zeile schieben sie die Spalte
     * beliebig breit.
     */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * Bootstrap streift ueber "table-striped" mit einer eigenen Variablen, die
 * in dunkler Darstellung nichts taugt. Hier die Streifen aus den Farbwerten
 * dieser Datei.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody tr:nth-of-type(odd) > * {
    background: var(--kw-streifen) !important;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody tr:last-child > * {
    border-bottom: 0 !important;
}

/*
 * In den Zellen steckt <code><kbd>. Beide bringen vom Browser einen eigenen
 * Rahmen und Hintergrund mit, Bootstrap gibt <code> zusaetzlich eine grelle
 * Schriftfarbe. Hier bleibt nur die Festbreitenschrift uebrig.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) code,
:is(#view-genericsuccess-authn-data, #casAccountProfile) kbd {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.82rem;
}

/* Der Merkmalsname traegt die Zeile - er darf sich abheben. */
:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody td:first-child code,
:is(#view-genericsuccess-authn-data, #casAccountProfile) tbody td:first-child kbd {
    color: var(--kw-akzent) !important;
    font-weight: 600;
    white-space: nowrap;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .attribute-tab {
    padding-top: 0.25rem;
}


/* --- DataTables --- */

/*
 * Die Tabellen tragen in der CAS-Vorlage die Klasse "auto-init", und cas.js
 * macht daraus mit $("table.auto-init").DataTable() eine DataTable. Damit
 * kommen Laengenauswahl, Suchfeld, Zaehlzeile, Blaetterknoepfe und
 * Sortierpfeile hinzu - alles unformatiert, denn DataTables 2.3.8 bringt
 * zwar einen Dunkelmodus mit, schaltet ihn aber nur bei "html.dark" ein,
 * und diese Klasse setzt hier niemand.
 *
 * Fuer vier Merkmale sind Suche und Blaettern ehrlich gesagt Ballast. Sie
 * bleiben trotzdem, weil die Diensteliste im dritten Reiter mit der Zeit
 * waechst. Wer sie loswerden will, blendet .dt-length, .dt-search, .dt-info
 * und .dt-paging aus - oder nimmt "auto-init" im ausgelagerten Template
 * heraus, was der ehrlichere, aber teurere Weg waere (190 Zeilen Vorlage
 * zu fuehren).
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-container {
    color: var(--kw-text);
    font-size: 0.85rem;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-layout-row {
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-length,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-search,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-info {
    color: var(--kw-text-leise) !important;
    font-size: 0.8rem;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-input,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-search input,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-length select {
    padding: 0.35rem 0.55rem !important;
    border: 1px solid var(--kw-linie) !important;
    border-radius: var(--kw-radius-klein) !important;
    background-color: var(--kw-flaeche) !important;
    color: var(--kw-text) !important;
    font-family: inherit;
    font-size: 0.82rem;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-input:focus,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-search input:focus,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-length select:focus {
    outline: none;
    border-color: var(--kw-akzent) !important;
    box-shadow: 0 0 0 3px var(--kw-ring);
}

/* Die Blaetterknoepfe faerbt DataTables mit !important schwarz auf weiss. */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-paging .dt-paging-button {
    margin-left: 2px;
    padding: 0.3rem 0.6rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--kw-radius-klein) !important;
    background: transparent !important;
    color: var(--kw-text-leise) !important;
    font-size: 0.8rem;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-paging .dt-paging-button.current,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-paging .dt-paging-button.current:hover {
    border-color: var(--kw-linie) !important;
    background: var(--kw-akzent-schwach) !important;
    color: var(--kw-text) !important;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-paging .dt-paging-button:hover {
    border-color: var(--kw-akzent) !important;
    background: var(--kw-akzent) !important;
    color: #fff !important;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-paging .dt-paging-button.disabled {
    opacity: 0.4;
}

/*
 * Die Sortierpfeile stehen als eigenes Element rechts in der Kopfzelle.
 * Voreingestellt sind sie fast schwarz und damit in dunkler Darstellung
 * kaum zu sehen - und in heller zu aufdringlich fuer ein Beiwerk.
 */
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-column-order::before,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-column-order::after {
    color: var(--kw-text-leise) !important;
    opacity: 0.45;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-ordering-asc .dt-column-order::before,
:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-ordering-desc .dt-column-order::after {
    color: var(--kw-akzent) !important;
    opacity: 1;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) .dt-column-title {
    font: inherit;
}

/* Sortierbare Koepfe zeigen den Mauszeiger als Hand. */
:is(#view-genericsuccess-authn-data, #casAccountProfile) th.dt-orderable-asc,
:is(#view-genericsuccess-authn-data, #casAccountProfile) th.dt-orderable-desc {
    cursor: pointer;
}

:is(#view-genericsuccess-authn-data, #casAccountProfile) th.dt-orderable-asc:hover,
:is(#view-genericsuccess-authn-data, #casAccountProfile) th.dt-orderable-desc:hover {
    color: var(--kw-text) !important;
}


/* ==========================================================================
 * 11. Kontoprofil (/account, casMyAccountProfile)
 *
 * Seit dem 2026-09-14 erreichbar, fuer Passkeys und Authenticator-Apps.
 * Die erste Fassung war NICHT BEDIENBAR, und zwar aus vier Gruenden, die alle
 * hier behoben werden:
 *
 * 1. Die Inhaltskarte war 26rem schmal. Die Kontoseite legt ihren Inhalt in
 *    eine .mdc-card innerhalb von #content - genau die Kombination, die
 *    Abschnitt 4 fuer die Anmeldekarte begrenzt.
 * 2. Die Seitenleiste von CAS schwebt links (float), ist 80px breit, klappt
 *    beim Ueberfahren auf 260px auf und traegt die Materialfarbe von CAS.
 *    Daneben blieb der Inhalt eingeklemmt, rechts davon die leere Seite.
 * 3. cas.css setzt GLOBAL "body { overflow: hidden }". Alles, was unter den
 *    Bildschirmrand reicht, war unerreichbar.
 * 4. Das Menue hinter "Registrieren" traegt die Klasse mw-25: hoechstens 25 %
 *    der Breite seines Ankers, und der Anker ist nur so breit wie der Knopf.
 *    Heraus kamen rund 100px fuer zwei Absaetze Text und zwei Knoepfe.
 *
 * Unterschieden wird die Seite am Element #casAccountProfile, das nur sie
 * traegt. Die Tabellenregeln aus Abschnitt 10 gelten ueber :is() fuer beide
 * Seiten. Geprueft mit scripts/cas/ansichtstest.sh, breit und auf Handybreite.
 * ========================================================================== */

/* Zu 3: Bildlauf zurueck - fuer alle Seiten, nicht nur diese. */
body {
    overflow-y: auto !important;
}

/* Zu 1 und 2: die volle Breite nutzen, Navigation und Inhalt nebeneinander. */
#main-content:has(#casAccountProfile),
#content:has(#casAccountProfile) {
    width: 100%;
}

#casAccountProfile {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
}

#casAccountProfile .sidebar-navigation {
    float: none;
    flex: 0 0 14rem;
    width: 14rem !important;
    min-height: 0;
    padding: 0.5rem;
    background: var(--kw-flaeche);
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius);
    box-shadow: var(--kw-schatten);
    position: sticky;
    top: 5rem;
}

#casAccountProfile .sidebar-navigation ul {
    color: var(--kw-text);
    gap: 0.15rem;
}

#casAccountProfile .sidebar-navigation ul li {
    padding: 0.65rem 0.85rem;
    gap: 0.75rem;
    border-radius: var(--kw-radius-klein);
    color: var(--kw-text-leise);
}

#casAccountProfile .sidebar-navigation ul li i {
    font-size: 1.25rem;
    color: inherit;
}

/* Die Beschriftung ist bei CAS nur beim Aufklappen sichtbar - hier immer. */
#casAccountProfile .sidebar-navigation ul li .tooltip {
    visibility: visible;
    opacity: 1;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 500;
}

#casAccountProfile .sidebar-navigation ul li:hover,
#casAccountProfile .sidebar-navigation ul li:focus-visible {
    background: var(--kw-streifen);
    color: var(--kw-text);
}

#casAccountProfile .sidebar-navigation ul li.active,
#casAccountProfile .sidebar-navigation ul li.active i {
    background-color: var(--kw-akzent-schwach);
    color: var(--kw-akzent);
}

#casAccountProfile .sidebar-navigation ul li.active i {
    background: transparent;
}

/* Die Inhaltskarte: zwei ids schlagen die eine aus Abschnitt 4. */
#content #casAccountProfile > .mdc-card {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    /* Die Vorlage setzt min-height: 100vh inline. */
    min-height: 0 !important;
    /*
     * Abschnitt 4 gibt der Anmeldekarte "overflow: hidden" (fuer die runden
     * Ecken). Hier schnitt das das Menue hinter "Registrieren" ab: Es klappt
     * nach unten ueber die Karte hinaus und lag unsichtbar darunter - oder der
     * Browser verschob den Karteninhalt, um den angeklickten Knopf zu zeigen,
     * und Tabelle samt Ueberschrift verschwanden nach oben. Am 2026-09-14
     * beim Betreiber aufgefallen, nachdem der erste Ansichtstest es wegen
     * eines hoeheren Fensters nicht gezeigt hatte.
     */
    overflow: visible !important;
    margin: 0 !important;
    padding: 1.5rem 1.75rem !important;
}

#casAccountProfile h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kw-text);
}

#casAccountProfile h2 i {
    color: var(--kw-akzent);
}

#casAccountProfile .profile-content > p {
    color: var(--kw-text-leise);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 48rem;
}

#casAccountProfile a {
    color: var(--kw-akzent);
}

#casAccountProfile hr {
    margin: 1.5rem 0 1rem;
    border-color: var(--kw-linie);
    opacity: 1;
}

/*
 * Die Knoepfe in den Tabellenzeilen (ansehen, loeschen) bleiben ruhig. Zwei
 * ids, damit die seitenweite Knopfregel aus Abschnitt 12 sie nicht fuellt.
 */
#main-content #casAccountProfile td .mdc-button--raised {
    min-width: 0;
    padding: 0.3rem 0.5rem !important;
    background: transparent !important;
    color: var(--kw-text-leise) !important;
}

#main-content #casAccountProfile td .mdc-button--raised:hover {
    background: var(--kw-akzent-schwach) !important;
    color: var(--kw-akzent) !important;
}

#main-content #casAccountProfile td button[name="deleteMfaDevice"]:hover {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #dc2626 !important;
}

/*
 * Die Geraetetabelle. Die allgemeine Regel bricht Zellen an beliebiger Stelle
 * um - richtig fuer lange DNs, falsch hier: "Authenticator" zerfiel in
 * "Authenticat/or", und die Kennung eines Passkeys (43 Zeichen) stand als
 * Saeule aus Dreiergruppen da. Die Kennung wird deshalb gekuerzt, der volle
 * Wert steht im Dialog hinter dem Ansehen-Knopf.
 */
#casAccountProfile #mfaDevicesTable td {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    vertical-align: middle;
}

#casAccountProfile #mfaDevicesTable td code {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/*
 * Typ, Modell und Nummer: Fuer Passkeys und Authenticator-Apps liefert CAS
 * dort immer "N/A" - die Spalten gibt es fuer Duo Security, das hier nicht
 * eingerichtet ist.
 */
#casAccountProfile #mfaDevicesTable :is(th, td):nth-child(4),
#casAccountProfile #mfaDevicesTable :is(th, td):nth-child(5),
#casAccountProfile #mfaDevicesTable :is(th, td):nth-child(6) {
    display: none;
}

/*
 * Breite Tabellen scrollen in ihrer Karte, nicht die ganze Seite. An der
 * Huelle von DataTables und NICHT am ganzen Abschnitt: Dort schnitt es das
 * Menue hinter "Registrieren" ab, das im selben Abschnitt aufklappt.
 */
#casAccountProfile .dt-container {
    overflow-x: auto;
}

/*
 * CAS setzt die Navigation in ein <span> (th:replace des Fragments). Das
 * Span ist damit das eigentliche Flex-Element, und Breite, "sticky" und
 * "stretch" an der Navigation liefen ins Leere. display: contents macht die
 * Navigation selbst zum Flex-Element.
 */
#casAccountProfile > span:has(> .sidebar-navigation) {
    display: contents;
}

/* Zu 4: das Menue hinter "Registrieren". */
#casAccountProfile #toolbar .mdc-menu {
    width: 30rem;
    max-width: min(30rem, calc(100vw - 2rem)) !important;
    padding: 0.5rem;
    background: var(--kw-flaeche) !important;
    border: 1px solid var(--kw-linie);
    border-radius: var(--kw-radius) !important;
    box-shadow: var(--kw-schatten) !important;
}

#casAccountProfile #toolbar .mdc-list-item {
    height: auto !important;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1rem !important;
    border-radius: var(--kw-radius-klein);
    white-space: normal;
    color: var(--kw-text);
}

#casAccountProfile #toolbar .mdc-list-item + .mdc-list-item {
    border-top: 1px solid var(--kw-linie);
    border-radius: 0 0 var(--kw-radius-klein) var(--kw-radius-klein);
}

#casAccountProfile #toolbar .mdc-list-item > i {
    font-size: 1.6rem;
    color: var(--kw-akzent);
}

#casAccountProfile #toolbar .mdc-list-item h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

#casAccountProfile #toolbar .mdc-list-item span,
#casAccountProfile #toolbar .text-justify {
    color: var(--kw-text-leise);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left !important;
}

#casAccountProfile #toolbar .mdc-list-item p {
    margin: 0.5rem 0 0;
}

#casAccountProfile #toolbar .mdc-list-item .mdc-button__label,
#casAccountProfile #toolbar .mdc-list-item .mdc-button__label * {
    color: #fff;
}

/* Pfeil und Beschriftung standen auf zwei verschiedenen Grundlinien. */
#casAccountProfile #toolbar .mdc-button__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

#casAccountProfile #toolbar .mdc-button__label i {
    margin: 0 !important;
    vertical-align: middle;
}

/*
 * Die Paging-Knoepfe dieser Tabellen kommen aus der jQuery-UI-Variante von
 * DataTables (fg-button) und nicht aus der, die Abschnitt 10 behandelt.
 */
#casAccountProfile .fg-button {
    margin-left: 2px;
    padding: 0.3rem 0.6rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--kw-radius-klein) !important;
    background: transparent !important;
    color: var(--kw-text-leise) !important;
    font-size: 0.8rem;
}

#casAccountProfile .fg-button.ui-state-disabled {
    opacity: 0.4;
}

#casAccountProfile table.dataTable thead th {
    background: transparent !important;
}

/*
 * Die Kopfleiste ist fest oben angeheftet und nach Abschnitt 3 durchsichtig.
 * Solange keine Seite scrollte, fiel das nicht auf; seit der Bildlauf wieder
 * geht, lief der Inhalt beim Scrollen unter Schriftzug und Konto-Symbol
 * hindurch. Deshalb hier ein Grund in der Seitenfarbe, leicht durchscheinend.
 */
header#app-bar {
    background: color-mix(in srgb, var(--kw-grund) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding-bottom: 0.5rem;
}

/* Das Konto-Symbol und die Glocke oben rechts: sichtbar auf hellem Grund. */
#app-bar .mdc-top-app-bar__action-item {
    color: var(--kw-text) !important;
    border: 0 !important;
    background: transparent !important;
}

#app-bar .mdc-top-app-bar__action-item:hover {
    color: var(--kw-akzent) !important;
    background: var(--kw-akzent-schwach) !important;
}

/* Schmale Bildschirme: die Navigation wird zur Zeile ueber dem Inhalt. */
@media (max-width: 767.98px) {
    #casAccountProfile {
        flex-direction: column;
        gap: 0.75rem;
    }

    #casAccountProfile .sidebar-navigation {
        position: static;
        flex: 0 0 auto;
        align-self: stretch;
        width: 100% !important;
        min-width: 100%;
        overflow-x: auto;
    }

    #casAccountProfile .sidebar-navigation ul {
        flex-direction: row;
    }

    #casAccountProfile .sidebar-navigation ul li {
        flex: 1 0 auto;
        justify-content: center;
        padding: 0.6rem;
    }

    /* Auf dem Handy nur die Symbole, die Beschriftung steht im Titel. */
    #casAccountProfile .sidebar-navigation ul li .tooltip {
        display: none;
    }

    #content #casAccountProfile > .mdc-card {
        width: 100%;
        padding: 1.1rem 1rem !important;
    }
}


/* ==========================================================================
 * 12. Knoepfe und Passkey-Anmeldung auf allen Seiten
 *
 * Seit Passkeys und Einmalkennwoerter dazukamen (2026-09-14), gibt es Seiten
 * ausserhalb der Anmeldekarte: das Kontoprofil, die Registrierung eines
 * Passkeys, den QR-Code fuer die Authenticator-App samt Bestaetigungsdialog.
 * Deren Knoepfe trugen das Material-Standardbild - dunkelblau, Grossbuchstaben,
 * leuchtender Schatten (".drop-button").
 *
 * #main-content und nicht #content: Die Registrierseiten bringen eine eigene
 * Kennung fuer ihren Inhalt mit (id="login"), die die des Layouts ersetzt.
 * ========================================================================== */

#main-content .mdc-button--raised:not(.reveal-password),
#main-content .btn-primary:not(.reveal-password) {
    border: 0 !important;
    border-radius: var(--kw-radius-klein) !important;
    background: var(--kw-akzent) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 600;
}

#main-content .mdc-button--raised:not(.reveal-password):hover,
#main-content .btn-primary:not(.reveal-password):hover {
    background: var(--kw-akzent-stark) !important;
}

/* Abbrechen und Schliessen: sichtbar, aber zurueckhaltend - nicht rot. */
#main-content .button-cancel,
#main-content .btn-outline-secondary,
#main-content .mdc-button--outline {
    border: 1px solid var(--kw-linie) !important;
    border-radius: var(--kw-radius-klein) !important;
    background: transparent !important;
    color: var(--kw-text) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

#main-content .button-cancel:hover,
#main-content .btn-outline-secondary:hover,
#main-content .mdc-button--outline:hover {
    background: var(--kw-streifen) !important;
}

/*
 * Karten auf allen Seiten. Abschnitt 4 faerbt nur Karten innerhalb von
 * #content - die Registrierseiten fuer Passkey und Authenticator-App tragen
 * aber id="login", und ihre .mdc-card behielt das Weiss von Material. In
 * dunkler Darstellung stand dort helle Schrift auf weissem Grund, auch die
 * kurz eingeblendete Erfolgsmeldung nach der Registrierung (2026-09-14,
 * beim Betreiber aufgefallen).
 */
#main-content .mdc-card,
#main-content .card {
    background: var(--kw-flaeche) !important;
    color: var(--kw-text);
    border: 1px solid var(--kw-linie) !important;
    border-radius: var(--kw-radius) !important;
    box-shadow: var(--kw-schatten) !important;
}

/* Eine Karte in einer Karte bekommt keinen zweiten Rahmen. */
#main-content .mdc-card .mdc-card,
#main-content .card .card {
    border: 0 !important;
    box-shadow: none !important;
}

#main-content hr {
    border-color: var(--kw-linie);
    opacity: 1;
}

/* Die Rubbelcodes der Authenticator-App: hellgraue Chips von Material. */
#main-content .mdc-chip {
    background: var(--kw-akzent-schwach) !important;
    color: var(--kw-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;
}

/*
 * Das Geraetebild auf der Passkey-Seite hat bis zur Antwort des Geraets
 * keine Quelle; der Browser zeigte so lange den Ersatztext "Device icon".
 */
#device-icon:not([src]),
#device-icon[src=""] {
    display: none;
}

/* Dialoge (etwa die Bestaetigung der Authenticator-App). */
.mdc-dialog .mdc-dialog__surface {
    border-radius: var(--kw-radius) !important;
    background: var(--kw-flaeche) !important;
    color: var(--kw-text);
}

.mdc-dialog .mdc-dialog__title {
    color: var(--kw-text) !important;
    font-weight: 600;
}

.mdc-dialog .mdc-dialog__content {
    color: var(--kw-text-leise) !important;
}

/*
 * Der Passkey auf der Anmeldeseite. CAS setzt ihn als zweiten Block mit
 * grosser Ueberschrift und Blocksatz unter das Formular. Er wird hier zur
 * ruhigen zweiten Moeglichkeit unter einer Trennlinie - der Hauptweg bleibt
 * optisch das Passwort, bis der zweite Faktor erzwungen wird.
 */
#webauthnContainer {
    margin: 1.5rem 0 0 !important;
    padding: 1.25rem 0 0 !important;
    border-top: 1px solid var(--kw-linie);
    text-align: center !important;
}

#webauthnContainer h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--kw-text);
}

#webauthnContainer #description {
    margin-bottom: 0.9rem;
    color: var(--kw-text-leise);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

#main-content #webauthnContainer #authnButton {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid var(--kw-linie) !important;
    background: transparent !important;
    color: var(--kw-text) !important;
}

#main-content #webauthnContainer #authnButton:hover {
    border-color: var(--kw-akzent) !important;
    background: var(--kw-akzent-schwach) !important;
    color: var(--kw-akzent) !important;
}

#webauthnContainer #loginPanel {
    align-items: stretch !important;
}

/*
 * Der leuchtende Schatten unter den Knoepfen kommt nicht aus box-shadow,
 * sondern aus der Klasse .drop-button als filter.
 */
#main-content .drop-button,
#main-content .mdc-button {
    filter: none !important;
}

/*
 * Die Registrierung eines Passkeys bietet zwei Knoepfe. NUR DER ZWEITE
 * ("mit erkennbaren Anmeldeinformationen") legt einen Schluessel an, mit dem
 * man sich OHNE Passwort anmelden kann - am 2026-09-14 mit
 * scripts/cas/ansichtstest.sh gemessen: Ein Passkey ueber den ersten Knopf
 * scheiterte an der Anmeldemaske mit NotAllowedError, auch mit eingetragenem
 * Benutzernamen; einer ueber den zweiten meldete an.
 *
 * Das beschlossene Modell (backlog/cas-passkey-mfa.md) ist genau diese
 * passwortlose Anmeldung. Der erste Knopf fuehrte also in eine Sackgasse, die
 * man erst beim naechsten Anmelden bemerkt. Er wird ausgeblendet; der
 * Absatz darueber erklaert den verbleibenden Weg.
 *
 * Nur auf der Registrierseite: #registerButton heisst auch der Knopf im
 * Bestaetigungsdialog der Authenticator-App, dort steht er aber nicht hinter
 * #deviceNamePanel.
 */
#deviceNamePanel ~ #registerButton {
    display: none !important;
}

#main-content #registerDiscoverableCredentialButton {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1rem !important;
    white-space: normal;
}

#casAccountProfile #mfaDevicesTable {
    width: 100% !important;
}


/* ==========================================================================
 * 13. Ruecksichten
 * ========================================================================== */

@media (max-width: 480px) {
    #main-content {
        padding-top: 1.5rem !important;
    }

    #loginForm.card-body {
        padding: 1.5rem 1.25rem !important;
    }

    #content .mdc-card,
    #content .card {
        border-radius: var(--kw-radius-klein) !important;
    }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    #submitBtn,
    .cas-field .mdc-notched-outline__leading,
    .cas-field .mdc-notched-outline__notch,
    .cas-field .mdc-notched-outline__trailing {
        transition: none !important;
    }

    #submitBtn:hover {
        transform: none;
    }
}

/*
 * Sichtbarer Fokus fuer die Tastaturbedienung. Auf einer Anmeldemaske ist
 * das kein Beiwerk - sie wird oft ohne Maus bedient.
 */
:focus-visible {
    outline: 2px solid var(--kw-akzent);
    outline-offset: 2px;
}


/* ==========================================================================
 * 14. Kopfleiste der Webseite im Kontoprofil
 *
 * Seit dem 2026-10-02 steht im Kontoprofil (/account) statt der Leiste von
 * CAS dieselbe Kopfleiste wie auf kehrwoche.eu: links Avatar und Name,
 * rechts die Menuepunkte und "Abmelden". Markup und Begruendung in
 * templates/fragments/header.html ("VIERTE ABWEICHUNG").
 *
 * ABGESCHRIEBEN AUS scripts/php-main, html/style/style.css, Abschnitt "Die
 * Kopfleiste". Farben, Masse und Schriftgroessen stehen dort wie hier in px
 * und als feste Werte, NICHT als --kw-Variablen: Die Leiste soll auf beiden
 * Seiten gleich aussehen, auch im dunklen Modus, in dem die Variablen
 * dieses Themes ihre Werte wechseln. Wer dort etwas aendert, zieht es hier
 * nach. Einziger Unterschied ist die Schrift - Open Sans liegt nur im Bild
 * der Webseite, hier gilt die Systemschrift des Themes.
 *
 * ANGEHEFTET WIRD DER RAHMEN, NICHT DIE LEISTE. Das Fragment kommt als
 * <div> direkt unter <body> an, und die Leiste fuellt es ganz aus - ein
 * "position: sticky" an ihr selbst haette keinen Raum zum Kleben. Das
 * Abstandsstueck fuer die feste Leiste von CAS (mdc-top-app-bar--fixed-adjust,
 * 64px) entfaellt dafuer; die Leiste nimmt ihren Platz selbst ein, auch wenn
 * sie auf Handybreite zweizeilig wird.
 * ========================================================================== */

body > div:has(> #kw-leiste) {
    position: sticky;
    top: 0;
    z-index: 1000;
}

body:has(#kw-leiste) .mdc-top-app-bar--fixed-adjust {
    padding-top: 0 !important;
}

#kw-leiste nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    min-height: 64px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 5%;
    font-size: 16px;
    line-height: 1.3;
    background-color: rgba(28,34,48,0.9);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

#kw-leiste a {
    color: #D5DCE4;
    text-decoration: none !important;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#kw-leiste a:focus-visible {
    outline: 2px solid rgba(40,165,0,1);
    outline-offset: 2px;
}

#kw-leiste .kw-person {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px 4px 4px;
    min-width: 0;
    color: white;
    font-weight: 600;
}

#kw-leiste .kw-person:hover {
    background-color: rgba(255,255,255,0.08);
}

#kw-leiste .kw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    color: rgba(255,255,255,0.92);
    background: linear-gradient(135deg, rgba(10,95,183,1), rgba(40,165,0,1));
    box-shadow: 0 0 0 2px rgba(255,255,255,0.14);
}

#kw-leiste .kw-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#kw-leiste .kw-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

#kw-leiste .kw-menue {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#kw-leiste .kw-menue a {
    display: block;
    padding: 8px 14px;
    font-weight: 500;
}

#kw-leiste .kw-menue a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

#kw-leiste .kw-abmelden {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-left: 8px;
    position: relative;
    font-weight: 600;
    border: 1px solid rgba(255,95,74,0.55);
    color: #FFC2B8;
}

/* Ein Strich trennt die Menuepunkte von "Abmelden". */
#kw-leiste .kw-abmelden::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 20%;
    height: 60%;
    border-left: 1px solid rgba(255,255,255,0.15);
}

#kw-leiste .kw-abmelden:hover,
#kw-leiste .kw-abmelden:focus-visible {
    background-color: rgba(255,95,74,1);
    border-color: rgba(255,95,74,1);
    color: white;
}

/* Schmal wie auf der Webseite: Name und Abmelden in der ersten Zeile, die
   Menuepunkte darunter. */
@media screen and (max-width: 640px) {

    #kw-leiste nav {
        padding: 8px 12px;
        gap: 6px;
    }

    #kw-leiste .kw-person {
        flex: 1 1 0;
    }

    #kw-leiste .kw-aktionen {
        display: contents;
    }

    #kw-leiste .kw-abmelden {
        margin-left: 0;
    }

    #kw-leiste .kw-abmelden::before {
        display: none;
    }

    #kw-leiste .kw-menue {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }

    #kw-leiste .kw-menue a {
        padding: 6px 12px;
    }

}


/* ==========================================================================
 * 15. Dialoge (SweetAlert2) und die Geraetetabelle nach dem Passkey
 *
 * Seit dem 2026-10-02. CAS bringt fuer Rueckfragen und Wartehinweise
 * SweetAlert2 11.26.25 mit, ungestaltet: weisse Karte mit 5px Rundung,
 * lila Bestaetigung, rotes "No", hellblaues Symbol. Betroffen sind alle
 * Stellen, die Swal.fire aufrufen:
 *
 * - "Finalizing attempt for ..." nach einer Passkey-Anmeldung
 *   (js/webauthn/webauthn.js, zwei Sekunden lang vor dem Absenden),
 * - "Password Reset" und "Logout" im Kontoprofil
 *   (fragments/accountprofile/accountprofilenavigation.html),
 * - das Entfernen eines Geraets (.../accountprofilemfadevices.html).
 *
 * Der Dialog haengt direkt unter <body>, ausserhalb von #main-content - die
 * Knopfregeln aus Abschnitt 12 greifen dort nicht.
 *
 * GESTALTET WIRD UEBER DIE VARIABLEN VON SWEETALERT2. Sie stehen dort auf
 * :root, und das Stylesheet von SweetAlert2 kommt im <body> und damit NACH
 * diesem - bei gleicher Spezifitaet gewaenne es. ":root:root" hebt sie an.
 * Die Regeln von SweetAlert2 stehen in :where() und haben gar keine
 * Spezifitaet; einfache Klassen genuegen fuer den Rest.
 *
 * Die Texte bleiben englisch - sie stehen im Skript und in den Vorlagen von
 * CAS, nicht in den Meldungsdateien. BEWUSST SO, entschieden vom Betreiber
 * am 2026-10-02: Uebersetzen hiesse, webauthn.js und
 * accountprofilenavigation.html zu ueberschreiben und bei jedem Upgrade von
 * CAS abzugleichen - fuer vier kurze Texte nicht wert.
 * ========================================================================== */

:root:root {
    --swal2-backdrop: rgba(11, 15, 23, 0.55);
    --swal2-width: 26rem;
    --swal2-padding: 0 0 1.5rem;
    --swal2-border: 1px solid var(--kw-linie);
    --swal2-border-radius: var(--kw-radius);
    --swal2-background: var(--kw-flaeche);
    --swal2-color: var(--kw-text);
    --swal2-title-padding: 1.25rem 1.5rem 0;
    --swal2-html-container-padding: 0.75rem 1.75rem 0;
    --swal2-outline: 0 0 0 3px var(--kw-ring);
    --swal2-actions-margin: 1.5rem auto 0;
    --swal2-action-button-transition: background-color 0.15s ease, border-color 0.15s ease;
    --swal2-confirm-button-border-radius: var(--kw-radius-klein);
    --swal2-confirm-button-background-color: var(--kw-akzent);
    --swal2-confirm-button-color: #fff;
    --swal2-deny-button-border-radius: var(--kw-radius-klein);
    --swal2-deny-button-background-color: transparent;
    --swal2-deny-button-color: var(--kw-text);
    --swal2-cancel-button-border-radius: var(--kw-radius-klein);
    --swal2-cancel-button-background-color: transparent;
    --swal2-cancel-button-color: var(--kw-text);
}

.swal2-container .swal2-popup {
    font-family: var(--kw-schrift);
    box-shadow: var(--kw-schatten);
}

.swal2-container .swal2-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--kw-text);
}

.swal2-container .swal2-html-container {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--kw-text-leise);
}

/* Die Knoepfe wie im Kontoprofil: Bestaetigen in der Akzentfarbe,
   "No"/"Cancel" umrandet und zurueckhaltend - nicht rot. */
.swal2-container .swal2-styled {
    margin: 0.3rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.swal2-container .swal2-styled.swal2-confirm:hover {
    background-color: var(--kw-akzent-stark);
}

.swal2-container .swal2-styled.swal2-deny,
.swal2-container .swal2-styled.swal2-cancel {
    border: 1px solid var(--kw-linie);
}

.swal2-container .swal2-styled.swal2-deny:hover,
.swal2-container .swal2-styled.swal2-cancel:hover {
    background-color: var(--kw-streifen);
}

/* Symbole in der Akzentfarbe statt Hellblau und Graublau, etwas kleiner. */
.swal2-container .swal2-icon {
    --swal2-icon-zoom: 0.75;
    margin-top: 1.75rem;
}

.swal2-container .swal2-icon.swal2-info,
.swal2-container .swal2-icon.swal2-question {
    border-color: var(--kw-akzent-schwach);
    color: var(--kw-akzent);
}

/* Der Kreisel beim Warten. */
.swal2-container .swal2-loader {
    border-color: var(--kw-akzent) transparent var(--kw-akzent) transparent;
}

/*
 * NACH DER PASSKEY-ANMELDUNG NICHTS AUFLISTEN. webauthn.js blendet fuer die
 * zwei Sekunden bis zum Absenden eine Tabelle ein: Benutzername, Name und
 * Registrierzeit des Passkeys - und das "Session Token", mit dem das
 * Formular gleich darauf die Anmeldung abschliesst. Fuer den Benutzer hat
 * das keinen Wert (alles ausser dem Token steht im Kontoprofil), und ein
 * Bildschirmfoto in diesem Augenblick hielte das Token fest.
 *
 * !important, weil das Skript die Tabelle mit jQuery .show() einblendet,
 * also als Stilangabe am Element.
 */
#divDeviceInfo {
    display: none !important;
}