@layer zustaende{
/* ═══════════════════════════════════════════════════════════════════════════
   ZUSTAENDE — Regeln, die einen ZUSTAND ueber alles andere stellen.
   Seit M3 die oberste Ebene (@layer zustaende); die Datei laedt weiterhin als
   letzte. ACHTUNG !important: bei !important ist die Ebenen-Prioritaet
   INVERTIERT — ein frueherer Layer gewinnt. [hidden] ist die einzige
   !important-Deklaration der App; jede neue braucht die Konkurrenzpruefung.

   Verantwortung (Architekturregel, M1.1/M2 vereinbart):
   State-artige Eigenschaften — display, visibility, opacity, pointer-events,
   cursor, color, background, border-color, box-shadow, outline, transform,
   filter, transition, animation.
   NICHT hierher: margin, padding, gap, width, height, position, inset,
   font-size, font-weight, line-height, letter-spacing, flex, grid.

   M2 verschiebt genau EINE Regel ([hidden], aus base.css); weitere Zustands-
   regeln wandern erst nach eigener Analyse — die Liste oben ist die Messlatte,
   kein Auftrag zum Sammeln. Jede neue Regel hier braucht einen Grund, warum
   sie staerker sein muss als jeder Screen.
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden]{display:none !important}

/* QUALITY-012: Fokus ist ein gemeinsamer Bedienzustand. Der spaete Layer muss
   gegen screenlokale outline:none-Resets gewinnen, ohne !important. Der bereits
   kontrastgepruefte Textakzent gilt auch im hellen Theme; Outline aendert kein Layout. */
:focus-visible{outline:2px solid var(--hl-text);outline-offset:2px}
/* Auth-Felder besitzen selbst die sichtbare Fokus-Kontur: kein zweiter Außenring.
   Gleiche Geometrie für Zeiger und Tastatur, auch in den sechs Codefeldern. */
.au-wrap .au-in:not([readonly]):focus,
.au-wrap .au-code input:not([readonly]):focus{outline:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-accent)}
/* Profil: die vorhandene Feldkontur ist zugleich die einzige Fokusmarkierung. */
.ms-team-setup .kd-hwfeld input:focus,
.pf-wrap .pf-in:focus{outline:none;box-shadow:none;border-color:var(--klar-accent)}
.pf-wrap .pf-code input:focus{outline:none;box-shadow:none}
/* Die Dialoghuelle ist nur ein programmatischer Fokusanker fuer den Focus-Trap,
   kein Bedienelement. Ihr Fokus darf keinen gelben Rand um die ganze Card malen.
   Buttons, Felder und Links behalten die gemeinsame Tastatur-Markierung. */
.pf-sheet[role="dialog"][tabindex="-1"]:focus{outline:none}

/* ═══ Exklusive App-Zustaende (aus auth.css/shell.css hierher verschoben, 2026-09) ═══
   Anmeldung, Trainer-Erstlauf, Kaltstart-Splash, Server-Stopp und Portrait-Sperre schalten die
   App als GANZES um. Sie gewinnen ueber die Layer-Reihenfolge (zustaende ist der letzte Layer),
   nicht mehr ueber !important. Inline-Styles auf diesen Elementen sind nicht erlaubt. */
html.au-open,body.au-open{overflow-x:hidden;max-width:100%}
html.au-open,html.ms-onboarding-open{background:var(--bg)}
html.au-open body,html.ms-onboarding-open body{background:var(--bg)}
html.au-open body::before,html.ms-onboarding-open body::before{content:none;display:none}
html.au-open body > *:not(.au-wrap):not(.au-splash):not(#sh-main):not(#sh-nav):not(.scr-leiste):not(.ms-host):not(.pf-wrap):not(.ez-portrait-guard){display:none}
html.au-open:not(.au-app-crossfade) #sh-main, html.au-open:not(.au-app-crossfade) #sh-nav, html.au-open:not(.au-app-crossfade) .scr-leiste, html.au-open:not(.au-from-app) .pf-wrap:not(.au-datenschutz):not(.au-auth-sheet){display:none}
html.au-open:not(.au-app-crossfade):not(.au-setup-handoff) .ms-host{display:none}
html.au-open .pf-wrap.au-datenschutz,html.au-open .pf-wrap.au-auth-sheet,html.ms-onboarding-open .pf-wrap{display:flex;z-index:var(--z-auth-sheet)}
html.au-open.au-from-app .pf-wrap{pointer-events:none}
html.ms-onboarding-open:not(.au-app-crossfade) #sh-main,html.ms-onboarding-open:not(.au-app-crossfade) #sh-nav,html.ms-onboarding-open:not(.au-app-crossfade) .scr-leiste{display:none}
html.ms-handoff-hold .ms-host{visibility:hidden}
html.ez-splash-open,html.ez-splash-open body{background:var(--bg)}
html.ez-splash-open body::before{content:none;display:none}
html.ez-server-fatal body > *:not(.au-wrap){visibility:hidden;pointer-events:none}

@media (pointer:coarse){
  html.ez-phone-landscape,html.ez-phone-landscape body{overflow:hidden}
  html.ez-phone-landscape body>:not(.ez-portrait-guard){visibility:hidden;pointer-events:none}
  html.ez-phone-landscape body>.ez-portrait-guard{position:fixed;inset:0;z-index:var(--z-sperre);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-7);
    background:var(--bg);color:var(--ink);text-align:center;visibility:visible;pointer-events:auto}
  .ez-portrait-guard span{font-size:34px;line-height:1}
  .ez-portrait-guard b{font-size:17px;font-weight:800;letter-spacing:-.15px}
}
}

@layer zustaende{
/* The single profile border is the focus ring, including all four edges. */
.au-auth-sheet .au-in:not([readonly]):focus{outline:none;box-shadow:none;border-color:var(--klar-accent)}
.au-auth-sheet .au-code input:not([readonly]):focus{outline:none;box-shadow:none;border:0}
/* As with appointment cancellation, hide the actual page during keyboard input;
   an opaque overlay alone does not cover Safari's keyboard accessory surface. */
.au-wrap.au-keyboard-covered{visibility:hidden}
}