/*
 * Praxis-Branding fuer das keycloak.v2-Login-Theme (Keycloak 26 / PatternFly 5).
 * Wird NACH vendor/patternfly-v5/patternfly.min.css und css/styles.css geladen,
 * gewinnt also bei gleicher Spezifitaet per Kaskade. Bewusst minimal gehalten:
 * nur Token-Overrides + wenige gezielte Selektoren, jeweils mit Begruendung.
 *
 * Ziel: die Login-Karte an die Claude-Design-SPEC „LoginScreen" angleichen
 * (design/ios-splash-login/SPEC.md). Alle Masse/Farben stammen aus dieser SPEC.
 * Dark Mode ueber @media (prefers-color-scheme: dark) — diese Seite liegt ausserhalb
 * des Portal-Toggles, folgt also dem System.
 */

/* ---------------------------------------------------------------------------
 * SPEC-Farbtokens als CSS-Variablen (Single Source of Truth fuer die Overrides).
 * ------------------------------------------------------------------------- */
:root {
    --sp-bg-screen: #EFF3F2;
    --sp-text-primary: #0F1F1C;
    --sp-text-secondary: #5C6B67;
    --sp-text-label: #33433F;
    --sp-text-tertiary: #8CA09B;
    --sp-brand: #0F766E;
    --sp-brand-pressed: #0C635C;
    --sp-field-bg: #FFFFFF;
    --sp-field-border: #D6DEDC;
    --sp-field-border-focus: #0F766E;
    --sp-card-bg: #FFFFFF;
    --sp-link: #0F766E;
    --sp-link-hover: #0C635C;
    --sp-focus-ring: rgba(15, 118, 110, 0.30);
}

/*
 * 1) Markenfarben ueber die globalen PF5-Tokens statt einzelner Komponenten-Regeln.
 *    Deckt in einem Schlag ab: Primary-Button (Hintergrund + Hover/Active), Links,
 *    Fokus-Ringe/-Rahmen (active-color) und Checkbox-/Radio-Checked-Zustaende.
 *    :root.pf-v5-theme-dark zusaetzlich, weil das keycloak.v2-Inline-Script bei
 *    prefers-color-scheme:dark diese Klasse setzt und PF dann Tokens umdefiniert —
 *    die hoehere Spezifitaet (0,2,0) haelt unser Teal auch im Dark Mode.
 */
:root,
:root.pf-v5-theme-dark {
    /* Teal wie die SPEC: primaer #0f766e, pressed #0c635c. */
    --pf-v5-global--primary-color--100: #0f766e;
    --pf-v5-global--primary-color--200: #0c635c;
    --pf-v5-global--link--Color: #0f766e;
    --pf-v5-global--link--Color--hover: #0c635c;
    --pf-v5-global--active-color--100: #0f766e;
    /* PF5 remappt auf "hellen" Komponenten (u.a. .pf-v5-c-form-control, .pf-v5-c-menu)
       primary/link auf die --dark-Aliase (#06c) — ohne diese drei bliebe z.B. die
       Fokus-Unterkante der Eingabefelder PatternFly-blau statt Teal. */
    --pf-v5-global--primary-color--dark-100: #0f766e;
    --pf-v5-global--link--Color--dark: #0f766e;
    --pf-v5-global--link--Color--dark--hover: #0c635c;
}

/*
 * 2) Seitenhintergrund: SPEC bg.screen (#EFF3F2) statt des dunklen keycloak-bg.png-Banners.
 *    Gleicher Selektor wie die Original-Regel in keycloak.v2/login/resources/css/styles.css
 *    (.login-pf = kcHtmlClass aus dem Eltern-Theme) — wir laden spaeter und gewinnen.
 */
.login-pf body {
    background: var(--sp-bg-screen);
}

/*
 * 3) Logo-Marke statt des Realm-Namens-Banners.
 *    keycloak.v2 rendert den Realm-Anzeigenamen als Text in #kc-header-wrapper — wir ersetzen
 *    ihn durch die SPEC-Logo-Marke (60x60, Radius 15): vier Mint/Teal-Kacheln auf Teal-Verlauf,
 *    als inline-SVG-Data-URI (kein FTL-Fork, keine PNG-Hintergrundannahmen).
 *    font-size:0 blendet den Realm-Text visuell aus, laesst ihn aber fuer Screenreader im DOM.
 */
#kc-header-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2311433C'/%3E%3Cstop offset='1' stop-color='%230A2C27'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='60' height='60' rx='15' fill='url(%23g)'/%3E%3Cg transform='translate(15 15) scale(0.3)'%3E%3Crect x='35' y='0' width='30' height='30' rx='8' fill='%23BFF4E9'/%3E%3Crect x='0' y='35' width='30' height='30' rx='8' fill='%23BFF4E9'/%3E%3Crect x='70' y='35' width='30' height='30' rx='8' fill='%232FA193'/%3E%3Crect x='35' y='70' width='30' height='30' rx='8' fill='%232FA193'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
    height: 76px;
    font-size: 0;
    letter-spacing: 0;
}

/*
 * 4) Karte: weiss, staerker abgerundet (SPEC-Sprache), weicher Schatten.
 *    Die PF5-Karte (.pf-v5-c-login__main) ist bereits weiss mit Schatten.
 */
.pf-v5-c-login__main {
    background: var(--sp-card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 31, 28, 0.08);
}

/*
 * 5) Ueberschrift „Willkommen zurueck" (Text kommt aus messages_de.properties → loginAccountTitle):
 *    28px/Bold/-0.4 in text.primary — SPEC H1.
 */
#kc-page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--sp-text-primary);
}

/* Feld-Labels: 13px/Semibold, text.label (SPEC). */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-label);
}

/*
 * 6) Eingabefelder — SPEC: Hoehe 52, Radius 14, Border #D6DEDC (1px), Fokus #0F766E (1.5px),
 *    16px Text. PF5 kapselt das <input> in einem .pf-v5-c-form-control-Wrapper und zeichnet den
 *    Rahmen ueber ein ::after-Pseudo (inset box-shadow). Wir setzen einen echten Rahmen am
 *    Wrapper und neutralisieren das ::after, damit nicht zwei Rahmen konkurrieren.
 */
.pf-v5-c-form-control {
    border-radius: 14px;
    border: 1px solid var(--sp-field-border);
    background: var(--sp-field-bg);
    min-height: 52px;
    /* PF-eigenen Pseudo-Rahmen entfernen (sonst blaue/graue Doppelkante). */
    --pf-v5-c-form-control--BorderBottomColor: transparent;
    --pf-v5-c-form-control--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
}
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before {
    border: 0 !important;
    box-shadow: none !important;
}
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
.pf-v5-c-form-control > input {
    font-size: 16px;
    color: var(--sp-text-primary);
}
.pf-v5-c-form-control input,
.pf-v5-c-form-control > input {
    height: 50px; /* 52 minus 1px Rahmen oben/unten */
    background: transparent;
    padding: 0 16px;
}
/* Passwortfeld: rechts Platz fuer das Auge/Toggle (SPEC: 48px). */
.pf-v5-c-input-group .pf-v5-c-form-control input {
    padding-right: 48px;
}
/* Fokus: 1.5px Teal-Rahmen ums ganze Feld (SPEC field.borderFocus). */
.pf-v5-c-form-control:focus-within {
    border: 1.5px solid var(--sp-field-border-focus);
    box-shadow: none;
    outline: none;
}
/* Placeholder in text.tertiary (SPEC). */
.pf-v5-c-form-control input::placeholder {
    color: var(--sp-text-tertiary);
}

/*
 * 6b) Native Controls in die SPEC-Feld-Sprache bringen (Mac-Feedback 04.07.): Ohne diese Regeln
 *     zeichnet die UA (WKWebView-Auth-Sheet) <select>, Auge-Button und Fokusring in Grau/Blau.
 *     color-scheme steuert die nativen Teile (Caret, Select-Pfeil, Autofill); die Farbtokens
 *     kommen aus den --sp-*-Variablen und passen sich Hell/Dunkel automatisch an.
 */
.login-pf {
    color-scheme: light; /* im Dark-Block auf dark gesetzt → keine grauen UA-Controls */
}
#kc-form-login input {
    accent-color: var(--sp-brand);
    caret-color: var(--sp-field-border-focus);
}
/* Blauen UA-Fokusring am rohen <input> killen — der grüne Rahmen sitzt am Wrapper. */
#kc-form-login input:focus,
#kc-form-login input:focus-visible {
    outline: none;
    box-shadow: none;
}
/* Sprach-<select> (#kc-locale): steckt in einem .pf-v5-c-form-control-Wrapper, der bereits die
   Feld-Box (Rahmen/Radius/Fokus) liefert. Der Select selbst also TRANSPARENT + randlos, sonst
   entsteht eine zweite Box in der Box (Mac-Feedback). Fokus übernimmt der Wrapper (:focus-within). */
#kc-locale select,
.login-pf .pf-v5-c-form-control select,
.login-pf select {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--sp-text-primary);
    border-radius: inherit;
    height: 50px;
    width: 100%;
    padding: 0 12px;
}
#kc-locale select:focus,
.login-pf select:focus {
    outline: none;
    box-shadow: none;
}
/* Passwort-Auge INS Feld legen (Mac-Feedback iPhone): PF rendert das Passwortfeld als
   .pf-v5-c-input-group (flex) mit zwei Items — Feld (.pf-m-fill) + Auge-Button daneben. Dadurch
   war das Passwortfeld schmaler als das Benutzernamen-Feld und der Auge-Button ein eigener Kasten.
   Lösung: Input-Group als Block, Feld füllt die volle Breite (= wie Username), Auge liegt als
   transparentes Overlay rechts IM Feld. */
.pf-v5-c-input-group {
    position: relative;
    display: block;
}
.pf-v5-c-input-group .pf-v5-c-input-group__item.pf-m-fill {
    width: 100%;
}
/* Das Item mit dem Auge-Button rechts ins Feld schieben (absolut über der rechten Innenkante). */
.pf-v5-c-input-group .pf-v5-c-input-group__item:not(.pf-m-fill) {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
/* Auge-Button selbst: transparent, randlos, kein Kasten. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control,
.pf-v5-c-input-group [data-password-toggle] {
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 0;
    height: 40px;
    width: 40px;
    border-radius: 8px;
    color: var(--sp-text-tertiary);
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
    background: rgba(127, 127, 127, 0.12);
    color: var(--sp-text-primary);
}
/* PF zeichnet am Control-Button ein ::after mit 1px grauem Unterstrich (die „Linie unter dem
   Auge") — neutralisieren, analog zum Form-Control. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before {
    border: 0 !important;
    box-shadow: none !important;
    content: none !important;
}

/*
 * 7) Primaerbutton „Anmelden" — SPEC: Hoehe 54, Radius 16, Fill #0F766E, hover/pressed #0C635C,
 *    17px/Semibold, pressed scale 0.985. Ziel ist der Submit (#kc-login .pf-m-primary).
 */
.pf-v5-c-button.pf-m-primary {
    height: 54px;
    border-radius: 16px;
    /* #260: iOS zeichnet sonst die native (eckige) Button-Chrome hinter unserem Radius. */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--sp-brand);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
    transition: transform 120ms ease, background-color 120ms ease;
}
.pf-v5-c-button.pf-m-primary:hover {
    background: var(--sp-brand-pressed);
}
.pf-v5-c-button.pf-m-primary:active {
    background: var(--sp-brand-pressed);
    transform: scale(0.985);
}

/*
 * Full-width + centred login CTAs. Newer Keycloak (PatternFly v5) renders the submit OUTSIDE the old
 * #kc-form-buttons wrapper (now in .pf-v5-c-form__actions), so it no longer inherited width:100% — the
 * primary button collapsed to content width and its label sat off-centre in the card (e.g. „Anmelden"
 * on the passkey screen). Pin every login CTA full-width + centred, independent of the wrapper. Scoped
 * to primary/secondary/action buttons so the password-reveal toggle and language menu are untouched.
 */
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-form__actions .pf-v5-c-button,
.pf-v5-c-form__actions button,
#kc-form-buttons .pf-v5-c-button,
button[name="cancel-aia"],
#kc-cancel {
    /* flex + both-axis centring: our fixed height:54px on a display:block button left the label sitting
       high (read as „nicht mittig"); flex centres it vertically AND horizontally regardless of markup. */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

/* The primary submit and the „Andere Anmeldemethode" button are separate <form>s in PatternFly v5, so
   they sat flush together (0px gap, looked cramped). Space the try-another-way form from the submit. */
#kc-select-try-another-way-form {
    margin-top: 12px;
}

/* Links („Passwort vergessen?", Registrierung) in Markenfarbe, semibold. */
#kc-content a,
.pf-v5-c-login__main a {
    color: var(--sp-link);
    font-weight: 600;
}
#kc-content a:hover,
.pf-v5-c-login__main a:hover {
    color: var(--sp-link-hover);
}

/*
 * 8) Trust-Zeile am Kartenfuss (SPEC-Footer): Schloss + „Verschluesselte Uebertragung · DSGVO-konform" (#397: kein E2E-Overclaim).
 *    Per ::after auf der Karte, damit kein FTL-Fork noetig ist. 12px, text.tertiary.
 */
.pf-v5-c-login__main::after {
    /* Schloss-Icon = „sicherheit"-Pfad aus unserer Icon-Registry (BereichIcon), inline als SVG-
       data-URI (CSS kann keine Svelte-Komponente rendern) statt Emoji. Stroke = text.tertiary. */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238CA09B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E") " Verschlüsselte Übertragung · DSGVO-konform";
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--sp-text-tertiary);
    padding: 16px 24px 20px;
}

/* #1043: englische Fassung der Trust-Zeile. Der Text steckt in `content` und ist damit nicht
   ueber messages_*.properties uebersetzbar — Keycloak setzt aber bei aktiver i18n das
   `lang`-Attribut am <html>, sodass eine reine CSS-Ueberschreibung genuegt (weiterhin kein
   FTL-Fork). Icon-URI identisch, nur der Text wechselt. „Verschluesselte Uebertragung" =
   Transportverschluesselung — die englische Fassung bleibt bewusst genauso zurueckhaltend
   und behauptet KEINE Ende-zu-Ende-Verschluesselung (#397). */
html[lang="en"] .pf-v5-c-login__main::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238CA09B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E") " Encrypted transmission · GDPR-compliant";
}

/*
 * 9) Mobile: kein "Springen" beim Einblenden der Tastatur / der Safari-URL-Leiste.
 *    100svh (small viewport height) ist stabil; die vh-Zeile bleibt als Fallback.
 *    Ausserdem: Safe-Area (Notch/Home-Indicator) als Mindest-Padding oben/unten.
 */
.pf-v5-c-login {
    min-height: 100vh;
    min-height: 100svh;
    padding-block-start: max(var(--pf-v5-c-login--PaddingTop), env(safe-area-inset-top));
    padding-block-end: max(var(--pf-v5-c-login--PaddingBottom), env(safe-area-inset-bottom));
}

/*
 * 10) Schmale Viewports: PF gibt dem Login-Container unterhalb 1200px kein Seiten-Padding —
 *     die Karte klebt sonst an der Displaykante. Etwas Luft plus Safe-Area seitlich.
 */
@media (max-width: 575px) {
    .pf-v5-c-login__container {
        padding-inline-start: max(1rem, env(safe-area-inset-left));
        padding-inline-end: max(1rem, env(safe-area-inset-right));
    }
}

/*
 * 11) Kurzes Auth-Sheet (#197 — iPad ASWebAuthenticationSession): iOS präsentiert das Login in
 *     einem fixierten, kurzen Form-Sheet, dessen Höhe die App nicht ändern kann; zusätzlich
 *     überlappt Safaris untere Toolbar den Inhalt. Bei knapper Höhe zentriert PF die (hohe) Karte
 *     vertikal — dadurch rutscht der „Anmelden"-Button unter die Toolbar. Fix: bei kurzer Höhe
 *     oben ausrichten + scrollbar machen + Boden-Padding, das die Toolbar freihält; außerdem die
 *     Vertikal-Rhythmik kompakter, damit möglichst alles ohne Scrollen passt. Greift auch bei
 *     Telefonen im Querformat.
 */
@media (max-height: 760px) {
    html.login-pf,
    .login-pf body {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }
    .pf-v5-c-login {
        justify-content: flex-start; /* oben statt Mitte → Button bleibt über der Toolbar erreichbar */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-block-start: max(env(safe-area-inset-top), 16px);
        /* großzügiges Boden-Padding hält den Button/die Trust-Zeile über Safaris Toolbar frei
           (safe-area-inset-bottom ist im Form-Sheet oft 0) */
        padding-block-end: max(env(safe-area-inset-bottom), 80px);
    }
    /* Kompakter, damit das Formular in ein kurzes Sheet passt. */
    #kc-header-wrapper {
        height: 52px;
        background-size: 46px 46px;
    }
    #kc-page-title {
        font-size: 22px;
    }
    .pf-v5-c-login__main::after {
        padding: 12px 24px 6px;
    }
}

/* ===========================================================================
 * DARK MODE — SPEC-Dark-Tokens. Diese Seite folgt dem System (kein Portal-Toggle),
 * daher @media (prefers-color-scheme: dark). keycloak.v2 setzt bei dark zusaetzlich
 * .pf-v5-theme-dark; unsere Regeln stehen spaeter und gewinnen per Kaskade.
 * ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --sp-bg-screen: #0A2C27;
        --sp-text-primary: #ECF5F2;
        --sp-text-secondary: #9FB7B1;
        --sp-text-label: #B9CCC7;
        --sp-text-tertiary: #7E9993;
        --sp-field-bg: rgba(255, 255, 255, 0.05);
        --sp-field-border: rgba(255, 255, 255, 0.14);
        --sp-field-border-focus: #2DB3A2;
        --sp-card-bg: rgba(255, 255, 255, 0.03);
        --sp-link: #4FC3B2;
        --sp-link-hover: #7FE0D0;
        --sp-focus-ring: rgba(45, 179, 162, 0.35);
    }

    /* Kernfix: native Controls (Select-Pfeil, Caret, Auge, Autofill) dunkel statt grau rendern. */
    .login-pf {
        color-scheme: dark;
    }

    .login-pf body {
        background: var(--sp-bg-screen);
    }

    /* Logo-Container im Dark Mode gedaempft (SPEC: rgba(255,255,255,.06), Border .1) —
       Kacheln bleiben Mint/Teal, der Teal-Verlauf entfaellt. */
    #kc-header-wrapper {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect width='59' height='59' x='0.5' y='0.5' rx='15' fill='rgba(255,255,255,0.06)' stroke='rgba(255,255,255,0.1)'/%3E%3Cg transform='translate(15 15) scale(0.3)'%3E%3Crect x='35' y='0' width='30' height='30' rx='8' fill='%23BFF4E9'/%3E%3Crect x='0' y='35' width='30' height='30' rx='8' fill='%23BFF4E9'/%3E%3Crect x='70' y='35' width='30' height='30' rx='8' fill='%232FA193'/%3E%3Crect x='35' y='70' width='30' height='30' rx='8' fill='%232FA193'/%3E%3C/g%3E%3C/svg%3E");
    }

    /* Karte + Text. Hoehere Spezifitaet via .login-pf, um PF-Dark-Defaults zu ueberstimmen. */
    .login-pf .pf-v5-c-login__main {
        background: var(--sp-card-bg);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }
    #kc-page-title {
        color: var(--sp-text-primary);
    }
    .pf-v5-c-form__label,
    .pf-v5-c-form__label-text {
        color: var(--sp-text-label);
    }

    /* Eingabefelder (SPEC dark). */
    .login-pf .pf-v5-c-form-control {
        background: var(--sp-field-bg);
        border-color: var(--sp-field-border);
    }
    .login-pf .pf-v5-c-form-control,
    .login-pf .pf-v5-c-form-control input {
        color: var(--sp-text-primary);
    }
    .login-pf .pf-v5-c-form-control:focus-within {
        border: 1.5px solid var(--sp-field-border-focus);
    }
    .pf-v5-c-form-control input::placeholder {
        color: var(--sp-text-tertiary);
    }

    /* Primaerbutton dark: Fill #14A091, Text #04211D (SPEC). */
    .login-pf .pf-v5-c-button.pf-m-primary {
        background: #14A091;
        color: #04211D;
        box-shadow: none;
    }
    .login-pf .pf-v5-c-button.pf-m-primary:hover,
    .login-pf .pf-v5-c-button.pf-m-primary:active {
        background: #0F8B7E;
    }

    /* Links dark (#4FC3B2). */
    .login-pf #kc-content a,
    .login-pf .pf-v5-c-login__main a {
        color: var(--sp-link);
    }
    .login-pf #kc-content a:hover,
    .login-pf .pf-v5-c-login__main a:hover {
        color: var(--sp-link-hover);
    }

    /* Trust-Zeile dark: Text + Schloss-Icon in dark-tertiary (#7E9993). */
    .pf-v5-c-login__main::after {
        color: var(--sp-text-tertiary);
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237E9993' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E") " Verschlüsselte Übertragung · DSGVO-konform";
    }

    /* #1043: englische Trust-Zeile auch im Dunkelmodus (gleiche Begruendung wie oben; das
       dark-Icon nutzt den helleren Stroke #7E9993). */
    html[lang="en"] .pf-v5-c-login__main::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237E9993' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E") " Encrypted transmission · GDPR-compliant";
    }
}

/* ===========================================================================
 * 12) Mobile Safe-Area für Notch / Dynamic Island (#258).
 *     Die AIA-Seiten (UPDATE_PASSWORD, CONFIGURE_TOTP, webauthn-register) laufen im
 *     Custom Tab / ASWebAuthenticationSession. Das Theme ist FTL-fork-frei, daher
 *     kommt KEIN <meta viewport-fit=cover> zum Einsatz und env(safe-area-inset-top)
 *     liefert dort 0 → das Logo klebt unter der Dynamic Island. Fix: auf schmalen
 *     Viewports einen Mindest-Abstand oben, der die Island freihält. env() gewinnt
 *     weiterhin per max(), falls eine Umgebung doch echte Insets meldet.
 * ========================================================================= */
@media (max-width: 767px) {
    .pf-v5-c-login {
        padding-block-start: max(env(safe-area-inset-top), 3.25rem);
    }
}
/* Auch im kurzen Auth-Sheet (#197-Block nutzt 16px) die Island freihalten. */
@media (max-height: 760px) {
    .pf-v5-c-login {
        padding-block-start: max(env(safe-area-inset-top), 3.25rem);
    }
}

/* ===========================================================================
 * 13) Einheitliches Button-System auf allen Login-/AIA-Seiten (#257).
 *     Keycloak rendert den Sekundär-/Abbrechen-Button je nach AIA-Seite anders
 *     (blauer Default-Kasten auf der TOTP-Seite, grüner Outline auf der Passkey-
 *     Seite) und in abweichender Höhe. Wir vereinheitlichen: Primär = gefüllt
 *     (oben definiert), Sekundär/Abbrechen = Outline in Markenfarbe — gleiche Höhe
 *     (54), gleicher Radius (16), gleiches Padding; beide vollbreit gestapelt.
 * ========================================================================= */
#kc-form-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#kc-form-buttons .pf-v5-c-button,
#kc-form-buttons input[type="submit"],
#kc-form-buttons button {
    width: 100%;
    margin: 0;
}
/* Sekundär/Abbrechen — greift den Default-Button (nicht-primär) im Button-Block,
   den PF-Sekundärbutton und den AIA-Cancel (eigenes <button name="cancel-aia">). */
#kc-form-buttons .pf-v5-c-button:not(.pf-m-primary),
#kc-form-buttons input[type="submit"]:not(.pf-m-primary),
#kc-form-buttons button:not(.pf-m-primary),
.pf-v5-c-button.pf-m-secondary,
button[name="cancel-aia"],
#kc-cancel {
    /* #260: iOS-Safari zeichnet am transparenten Sekundärbutton sonst die native, ECKIGE Button-
       Chrome hinter unserem 16px-Rand — genau die zweite eckige Kontur aus dem Report. */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    height: 54px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 600;
    background: transparent;
    color: var(--sp-brand);
    border: 1.5px solid var(--sp-brand);
    box-shadow: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* #260: PF zeichnet am Button ein ::after mit eigenem (kleinem) Radius — auf dem
   Outline-Sekundärbutton ergibt das eine zweite, eckige Kontur um unseren 16px-Rand.
   Neutralisieren; der sichtbare Rahmen ist allein unser border oben. */
#kc-form-buttons .pf-v5-c-button:not(.pf-m-primary)::after,
.pf-v5-c-button.pf-m-secondary::after,
button[name="cancel-aia"]::after,
#kc-cancel::after {
    border: 0 !important;
    box-shadow: none !important;
    content: none !important;
}
/* Fokus: kein eckiger Browser-/PF-Outline, sondern ein radius-treuer Ring via box-shadow. */
#kc-form-buttons .pf-v5-c-button:not(.pf-m-primary):focus,
#kc-form-buttons .pf-v5-c-button:not(.pf-m-primary):focus-visible,
.pf-v5-c-button.pf-m-secondary:focus,
.pf-v5-c-button.pf-m-secondary:focus-visible,
button[name="cancel-aia"]:focus,
button[name="cancel-aia"]:focus-visible,
#kc-cancel:focus,
#kc-cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sp-focus-ring);
}
#kc-form-buttons .pf-v5-c-button:not(.pf-m-primary):hover,
.pf-v5-c-button.pf-m-secondary:hover,
button[name="cancel-aia"]:hover,
#kc-cancel:hover {
    background: rgba(15, 118, 110, 0.06);
    color: var(--sp-brand-pressed);
    border-color: var(--sp-brand-pressed);
}
@media (prefers-color-scheme: dark) {
    /* Outline-Sekundärbutton dark: Markenfarbe hell auf transparent. */
    .login-pf #kc-form-buttons .pf-v5-c-button:not(.pf-m-primary),
    .login-pf #kc-form-buttons button:not(.pf-m-primary),
    .login-pf .pf-v5-c-button.pf-m-secondary,
    .login-pf button[name="cancel-aia"],
    .login-pf #kc-cancel {
        color: #4FC3B2;
        border-color: rgba(79, 195, 178, 0.6);
        background: transparent;
    }
}

/* ===========================================================================
 * 14) Passkey-Registrierung: „Abbrechen" so breit wie „Register".
 *     webauthn-register.ftl legt den Abbrechen-Button (#cancelWebAuthnAIA) in ein
 *     eigenes <form id="kc-webauthn-settings-form">. Beide — der Register-Button und
 *     dieses Cancel-Form — sind direkte Flex-Items von .pf-v5-c-form__actions (row):
 *     Register wuchs auf volle Breite, das Cancel-Form schrumpfte aber auf Inhalts-
 *     breite (~88px), sodass width:100% am Button nur diese 88px füllte. Fix: die
 *     Actions-Zeile vollbreit STAPELN (Spaltenrichtung + stretch) — konsistent mit
 *     den übrigen CTAs (#257) —, das Cancel-Form füllt die Breite. Wirkt nur, wo PF
 *     die __actions rendert; einzelne Buttons (Login/AIA) bleiben unverändert vollbreit.
 * ========================================================================= */
.pf-v5-c-form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* PF gibt der __actions-Zeile seitliche NEGATIV-Margins (-8px) und jedem direkten
       Kind (dem Register-Button) +8px — das Cancel-<form> bekommt diese 8px aber NICHT,
       also stand „Register" 8px weiter rechts als „Cancel" (gleiche Breite, versetzte
       Kante). Beide Seiten-Margins neutralisieren, dann teilen sich beide Buttons exakt
       Links-/Rechtskante. Der Login-Primärbutton bleibt an gleicher Stelle (8−8=0). */
    margin: 0;
}
.pf-v5-c-form__actions > * {
    margin: 0;
    width: 100%;
}
#kc-webauthn-settings-form {
    width: 100%;
    margin: 0;
}