/* mila-auth.css — gemeinsame Oberflaeche fuer Anmelden, Registrieren,
 * Bestaetigen, Passwort zuruecksetzen, Kuendigen und Abo-Erfolg.
 *
 * KONTEXT: Auth ist weder App noch Marketing. Die Seiten laden bewusst
 * mila-theme.css (Karten, Felder, Knoepfe) aber NICHT mila-ui.js — es gibt
 * daher kein data-shell, keine Sidebar, keine Bottom-Navigation, keinen FAB
 * und keine Skins. Das war vor Phase 4C so und bleibt so.
 *
 * Diese Datei ersetzt den bis dahin sechsfach fast wortgleich duplizierten
 * .auth-Inline-Block und macht daraus eine ruhige, klare Formularflaeche.
 * Sie aendert ausschliesslich Darstellung — kein Skript, kein Request,
 * kein Redirect, kein Token.
 */

/* ---- Flaeche --------------------------------------------------------------
   Formular optisch etwas ueber der Mitte: das Auge erwartet den Einstieg
   nicht in der geometrischen Mitte, und auf niedrigen Fenstern bleibt unten
   Platz fuer Fehlermeldungen, ohne dass die Karte springt. */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 20px;gap:0}
.auth .box{width:100%;max-width:420px;min-width:0}

.auth .brand{font-size:1.6rem;font-weight:800;letter-spacing:-.5px;text-align:center;
  margin-bottom:6px;color:var(--text-strong);line-height:1.2}
.auth .brand span{color:var(--green)}
.auth .tagline{text-align:center;color:var(--muted);margin-bottom:22px;font-size:.9rem;
  overflow-wrap:break-word}
.auth .alt{text-align:center;margin-top:18px;color:var(--muted);font-size:.9rem;
  overflow-wrap:break-word;line-height:1.6}
.auth .langbar{text-align:center;margin-top:16px}
.auth .langbar select{background:transparent;color:var(--muted);
  border:1px solid var(--card-border);border-radius:8px;padding:5px 8px;font-size:.82rem;cursor:pointer}
.auth .langbar select option{background:var(--bg-soft);color:var(--text)}

/* ---- Karte ----------------------------------------------------------------
   Etwas mehr Luft als in der App: hier steht genau eine Aufgabe im Fokus. */
.auth .card{padding:26px 24px}
/* Karten liegen teils als Flex-Kind direkt in .auth. Ein Flex-Item hat
   min-width:auto und kann deshalb nicht unter seine min-content-Breite
   schrumpfen — bei 320px stand die Karte 344px breit in 305px Platz.
   Vorbestehend, hier mitbehoben. */
.auth>*,.auth .card{min-width:0;max-width:100%}
.auth .card>h3{font-size:1.22rem;line-height:1.3;letter-spacing:-.2px;
  color:var(--text-strong);overflow-wrap:break-word}
.auth .card>p.muted{line-height:1.6;overflow-wrap:break-word}

/* ---- Formularhierarchie ---------------------------------------------------
   Label klein und ruhig, Eingabe gross und ruhig, Hilfetext darunter. */
.auth .field{margin-bottom:15px;min-width:0}
.auth .field label{display:block;font-size:.84rem;font-weight:600;
  color:var(--soft-text);margin-bottom:6px;
  /* Lange Beschriftungen — im Niederlaendischen etwa
     „Verwerkingsverantwoordelijke" — schoben die Seite bei 320px um 20px
     aus dem Bild. Vorbestehend, hier mitbehoben. */
  overflow-wrap:break-word;min-width:0}
.auth .field input,.auth .field select,.auth .field textarea{
  width:100%;min-width:0;font-size:1rem;padding:11px 13px;line-height:1.4}
/* Lange E-Mail-Adressen duerfen das Feld nicht sprengen. */
.auth .field input{text-overflow:ellipsis}
.auth .field .hint{margin-top:5px;line-height:1.5;overflow-wrap:break-word}

/* Sichtbarer Fokus — Tastaturbedienung war bisher nur ueber den
   Browser-Standardring erkennbar. */
.auth input:focus-visible,.auth select:focus-visible,.auth textarea:focus-visible,
.auth button:focus-visible,.auth a:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px}

/* Autofill: Chrome faerbt automatisch ausgefuellte Felder hellblau ein und
   macht den Text auf dunklem Grund unlesbar. Der Schatten-Trick haelt die
   Flaeche dunkel, OHNE das Feld oder sein autocomplete-Attribut anzufassen. */
.auth input:-webkit-autofill,
.auth input:-webkit-autofill:hover,
.auth input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg-soft) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s}

/* ---- Meldungen ------------------------------------------------------------
   Die Skripte schreiben ihren Text weiterhin unveraendert in diese Container.
   Erst wenn wirklich etwas drinsteht, wird daraus eine Meldungsflaeche —
   sonst entstuende eine leere Box ueber jedem Formular. */
.auth #msg:not(:empty),.auth #tfa-msg:not(:empty),.auth #rmsg:not(:empty),
.auth #msg2:not(:empty),.auth [id$="-msg"]:not(:empty){
  display:block;padding:10px 13px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--card-border);
  line-height:1.5;overflow-wrap:anywhere}

/* ---- Knoepfe --------------------------------------------------------------
   Ein klarer Hauptweg, alles andere ruhig. */
.auth .btn-lg{padding:12px 18px;font-size:1rem}
.auth .btn[disabled],.auth .btn:disabled{opacity:.55;cursor:progress}
.auth .btn{overflow-wrap:break-word;white-space:normal;line-height:1.3}

/* ---- Zustandsflaechen -----------------------------------------------------
   Bestaetigung, abgelaufener Link, Erfolg: gleiche Anatomie auf allen Seiten. */
.auth .state-ic{font-size:2.1rem;line-height:1;margin-bottom:10px;display:block;text-align:center}
.auth .state-h{text-align:center}

/* ---- Rechtliches ----------------------------------------------------------
   Zustimmungen bleiben vollstaendig sichtbar und anklickbar — nie verkleinert
   oder eingeklappt. */
.auth .check,.auth label.check{display:flex;align-items:flex-start;gap:9px;
  line-height:1.55;margin:10px 0}
.auth .check input[type="checkbox"]{flex:0 0 auto;margin-top:3px;width:17px;height:17px}
.auth .check span,.auth .check a{min-width:0;overflow-wrap:break-word}

/* ---- Mobil ----------------------------------------------------------------
   Keine gestauchte Desktopansicht: engere Raender, volle Kartenbreite,
   groessere Zielflaechen. */
@media(max-width:520px){
  .auth{padding:22px 14px;justify-content:flex-start;padding-top:34px}
  .auth .card{padding:20px 16px}
  .auth .brand{font-size:1.42rem}
  .auth .field input,.auth .field select{font-size:1rem;padding:12px}
}
@media(max-width:360px){
  /* Bei 320px blieben durch die Aussenraender nur ~272px fuer die Karte —
     zusammen mit dem Kartenpolster lief die Flaeche aus dem Bild. */
  .auth{padding:20px 10px}
  .auth .card{padding:18px 14px}
  .auth .brand{font-size:1.3rem}
}

/* Sehr niedrige Fenster (Landscape-Handy): oben ausrichten statt zentrieren,
   sonst ist der Absendeknopf nicht erreichbar. */
@media(max-height:620px){
  .auth{justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .auth *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---- Nur fuer Screenreader ------------------------------------------------
   Die Auth-Seiten hatten bis hierher gar keine <h1>. Die Karten tragen <h3>,
   und eine sichtbare Ueberschrift ueber der Marke waere doppelt gemoppelt.
   Deshalb eine Ueberschrift, die vorgelesen, aber nicht gezeigt wird —
   kein Layout-Shift, kein veraendertes Bild. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}