/* Maske: Bedienbarkeit mit Tastatur und Vorleser, Anmeldung direkt auf der Startseite (30.09.2026).
   Wird nach dem Stil in index.html geladen und ergaenzt ihn – Farben kommen aus dessen Variablen. */

/* Sichtbarer Fokus fuer alles, was man mit Tab erreicht (Felder haben ihren eigenen Ring) */
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,[role="switch"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--clay);outline-offset:2px;border-radius:8px}
.step-btn:focus-visible{outline-offset:0}
.step-btn:focus-visible .ic{box-shadow:0 0 0 4px var(--clay-tint)}

/* Bereichsleiste: Namen nicht mehr abschneiden ("Aussch…", "Fertigu…") */
.step-btn .lb{overflow:visible;text-overflow:clip;letter-spacing:0}

/* Schliessen-Kreuz: groessere Trefferflaeche */
.xp-x{min-width:32px;min-height:32px;border-radius:8px;margin:-6px -6px 0 0}
.xp-x:hover{background:var(--bg3)}

/* Startseite: erst das Tun (loslegen / anmelden), darunter die Uebersicht, was machbar ist */
.st-modal{display:flex;flex-direction:column}
.st-modal>.xp-x{align-self:flex-end;margin-bottom:-28px;position:relative;z-index:1}
.st-kopf{order:1;margin-bottom:14px;padding-right:40px}
.st-wege{order:2}
.st-karten{order:3;margin:16px 0 0}
.st-fuss{order:4}
.st-karte{padding:10px 12px 9px}

/* Anmeldung im Haendlerbereich der Startseite und im Anmeldefenster */
.st-login{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.st-login .an-feld{margin:0;color:var(--ink2)}
.an-feld input{min-height:42px;font-size:14px}
.an-feld input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-tint)}
.st-weg.haendler .an-feld input:focus{box-shadow:0 0 0 3px #fff}
.an-pw{position:relative;display:block}
.an-pw input{width:100%;padding-right:78px;box-sizing:border-box}
.an-zeigen{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ink2);
  font:inherit;font-size:11.5px;font-weight:600;padding:7px 9px;border-radius:7px;cursor:pointer}
.an-zeigen:hover{background:var(--bg3)}
.an-caps{font-size:11.5px;color:#8a5a00;min-height:0}
.an-caps:empty{display:none}
.an-status{font-size:12.5px;line-height:1.4}
.st-login .an-status{min-height:0}
.st-login .an-status:empty{display:none}
.st-login .btn{background:var(--clay);border-color:var(--clay);color:#fff}
.st-login .btn:hover{filter:brightness(.95)}
.st-login .btn:disabled{opacity:.6;cursor:default}
.st-login-hinweis{font-size:11.5px;color:var(--ink2);margin:0}
.an-modal .ma-btn{min-height:40px;padding:8px 18px}

/* Schmale Fenster (Tablet hochkant, Telefon): Dialoge nutzen die Breite */
@media (max-width:760px){
  .xp-modal{width:min(100%,96vw);max-height:92vh;padding:16px}
  .st-karten{grid-template-columns:1fr}
  .sa-zwei{flex-direction:column}
}

/* Wer Bewegung reduziert haben will, bekommt keine Uebergaenge */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}