/* ============================================================
   BMM v2.5.0 — Anmeldung, Abmelde-Leiste und Abmelde-Overlay (AP-10b, Plan §4.4, E-21)
   ============================================================
   Nur Tokens aus tokens.css. Gerätebetrieb = html[data-fertigung="an"]:
   Knöpfe 56 px, Ziffernblock-Tasten 64 px, Passwortzeile 20 px Schrift.
   ============================================================ */

/* --- Seite ------------------------------------------------- */
.anm-seite { background: var(--bg); color: var(--text); }
.anm-rahmen {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 16px;
}
.anm-karte {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
html[data-fertigung="an"] .anm-karte { width: min(640px, 100%); padding: 20px; gap: 12px; }

.anm-marke { display: flex; align-items: center; gap: 12px; }
.anm-logo {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--primary-fill); display: inline-grid; place-items: center; flex: 0 0 auto;
}
.anm-logo img { width: 28px; height: 28px; object-fit: contain; }
.anm-marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.anm-marke-name { font: 700 var(--fs-lg) var(--font-display); color: var(--primary); }
.anm-marke-sub { font-size: var(--fs-sm); color: var(--text-subtle); }
.anm-titel { margin: 0; font: 700 var(--fs-xl) / 1.2 var(--font-display); color: var(--text); }

.anm-stapel { display: flex; flex-direction: column; gap: 12px; }
.anm-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.anm-unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Microsoft und „Lokales Konto“ -------------------------- */
.anm-ms-haupt, .anm-lokal-knopf { min-height: 48px; font-size: var(--fs-base); width: 100%; text-decoration: none; }
html[data-fertigung="an"] .anm-ms-haupt,
html[data-fertigung="an"] .anm-lokal-knopf { min-height: 56px; }
.anm-ms-klein {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--primary); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 2px;
}
html[data-fertigung="an"] .anm-ms-klein { min-height: 56px; }

/* --- Konto-Kacheln ------------------------------------------ */
.anm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
html[data-fertigung="an"] .anm-kacheln { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.anm-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 88px; padding: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rand-feld); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font-body);
}
html[data-fertigung="an"] .anm-kachel { min-height: 140px; }
.anm-kachel:hover { border-color: var(--primary); }
.anm-kachel-kz { font: 700 28px / 1 var(--font-display); color: var(--primary); }
html[data-fertigung="an"] .anm-kachel-kz { font-size: 40px; }
.anm-kachel-art { font-size: var(--fs-sm); color: var(--text-muted); }

.anm-kuerzel { display: flex; align-items: center; gap: 12px; }
.anm-feld-kurz { width: 7em; text-transform: uppercase; }

/* --- Gewähltes Konto ---------------------------------------- */
.anm-gewaehlt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anm-chip {
  display: inline-flex; align-items: baseline; gap: 10px;
  min-height: var(--knopf-h); padding: 6px 14px;
  background: var(--primary-soft); color: var(--text);
  border: 1px solid var(--primary); border-radius: var(--radius);
  font-family: var(--font-body); cursor: default;
}
.anm-chip-kz { font: 700 var(--fs-xl) / 1 var(--font-display); color: var(--primary); }
.anm-chip-art { font-size: var(--fs-sm); color: var(--text-muted); }
.anm-anderes { min-height: var(--knopf-h); }

/* --- Passwortzeile: Feld · Anzeigen · Anmelden (eine Zeile, 20 px) --- */
.anm-zeile { display: flex; align-items: stretch; gap: 8px; }
.anm-feld {
  min-height: 44px; padding: 0 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rand-feld); border-radius: var(--radius-sm);
  font: 400 var(--fs-base) var(--font-body);
}
.anm-feld:focus-visible, .anm-kachel:focus-visible, .anm-chip:focus-visible, .anm-taste:focus-visible,
.anm-ms-klein:focus-visible, .anm-leiste-knopf:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand);
}
.anm-feld-passwort { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); letter-spacing: 0.04em; }
html[data-fertigung="an"] .anm-feld { min-height: 56px; }
.anm-anzeigen, .anm-los { min-height: 44px; font-size: var(--fs-base); }
html[data-fertigung="an"] .anm-anzeigen, html[data-fertigung="an"] .anm-los { min-height: 56px; padding: 0 16px; }
.anm-los:disabled { opacity: .55; cursor: not-allowed; }
.anm-los-breit { width: 100%; }

/* --- Ziffernblock (64-px-Tasten) ---------------------------- */
.anm-ziffernblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.anm-taste {
  min-height: 64px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--rand-feld); border-radius: var(--radius);
  font: 600 var(--fs-xl) / 1 var(--font-display); cursor: pointer;
  touch-action: manipulation;
}
.anm-taste:active { background: var(--primary-soft); }
.anm-taste-wort { font: 600 var(--fs-base) / 1 var(--font-body); }
.anm-umschalter { min-height: 56px; font-size: var(--fs-base); align-self: flex-start; }

/* --- Pflichtwechsel ----------------------------------------- */
/* Querformat mit wenig Höhe (TAB-Q): Felder links, Ziffernblock rechts */
@media (orientation: landscape) and (max-height: 820px) {
  html[data-fertigung="an"] .anm-karte:has(.anm-wechsel) { width: min(980px, 100%); }
  html[data-fertigung="an"] .anm-wechsel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
  html[data-fertigung="an"] .anm-wechsel > * { grid-column: 1; }
  html[data-fertigung="an"] .anm-wechsel > .anm-ziffernblock { grid-column: 2; grid-row: 1 / span 6; }
}
.anm-regel { margin: 0; padding: 10px 12px; background: var(--primary-soft); border-radius: var(--radius-sm); color: var(--text); }
.anm-wechsel-feld { display: flex; flex-direction: column; gap: 4px; }
.anm-feldfehler { color: var(--marke-fehler-text); font-size: var(--fs-sm); font-weight: 600; }

/* --- Meldungen und Fuß -------------------------------------- */
.anm-meldung {
  margin: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm);
}
.anm-meldung svg { width: 18px; height: 18px; flex: 0 0 auto; }
.anm-meldung-fehler {
  background: var(--marke-fehler-grund); color: var(--marke-fehler-text);
  border: 1px solid var(--marke-fehler-rand);
}
.anm-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.anm-vergessen { font-size: var(--fs-sm); color: var(--text-subtle); }

/* --- Abmelde-Leiste „Abmeldung in 60 s · Weiter arbeiten“ --- */
.anm-leiste {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px); padding: 8px 8px 8px 20px;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--marke-warn-rand); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); font-size: var(--fs-md); font-weight: 600;
}
/* Doppelte Klasse: die Knopfregel des Fertigungsmodus (html[data-fertigung] .bmm-knopf, 56 px) hat höhere Spezifität (E-21: 64 px) */
.anm-leiste .anm-leiste-knopf, html[data-fertigung="an"] .anm-leiste .anm-leiste-knopf { min-height: 64px; padding: 0 24px; font-size: var(--fs-md); }

/* --- Abmelde-Overlay (deckend: Daten bleiben verborgen) ------ */
[data-abmelde-verdeckt] { visibility: hidden !important; }
.anm-overlay {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 16px;
  background: var(--bg); overflow: auto;
}
.anm-overlay .anm-karte { max-height: calc(100dvh - 32px); overflow: auto; }
.anm-overlay-hinweis { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Einstellungen → Konten (partials_v2/_einstellungen_konten.html) --- */
.konten-reiter { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.konten-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.konten-titel { margin: 0; font: 700 var(--fs-lg) var(--font-display); }
.konten-regel, .konten-hinweis { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.konten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 12px; align-items: start; }
.konten-block-liste { grid-row: span 2; min-height: 0; max-height: calc(100dvh - 210px); }   /* Rückfall, bis AP-11 dem Reiter eine feste Höhe gibt */
.konten-block-liste .konten-liste { overflow: auto; min-height: 0; }   /* einziger Rollbereich des Reiters */
.konten-block {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.konten-block-titel { margin: 0; font: 700 var(--fs-md) var(--font-display); }
.konten-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.konten-zeile { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.konten-zeile:last-child { border-bottom: 0; }
.konten-zeile-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--zeile-h); }
.konten-kz { font: 700 var(--fs-md) var(--font-display); color: var(--primary); min-width: 2.6em; }
.konten-art { font-size: var(--fs-sm); color: var(--text-muted); }
.konten-aktionen { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.konten-pw { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.konten-pw-feld { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.konten-pw-feld .anm-feld { min-height: var(--knopf-h); width: 14em; }
.konten-kacheln, .konten-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.konten-kachel { min-width: 64px; font-size: var(--fs-md); }
.konten-kachel[aria-pressed="true"] { background: var(--primary-fill); color: var(--on-primary); border-color: var(--primary-fill); }
.konten-geruest { margin: 0; }