/* =====================================================================
   Ansicht: sicherheit — Zwei-Faktor-Anmeldung (TOTP) für Admin-Konten
   Schmale, zentrierte Karte. Farben nur über die Variablen aus app.css;
   einzige Ausnahme ist der weiße Grund hinter dem QR-Code (siehe unten).
   ===================================================================== */

.sicherheit {
  max-width: 520px;
  margin: clamp(4px, 3vw, 28px) auto 0;
}

/* Karte mit ruhiger Akzentkante */
.sicherheit__karte {
  padding: clamp(20px, 5vw, 32px);
  border-top: 3px solid var(--orange);
}

/* ---------------------------------------------------------------------
   Kopf: Schild-Symbol, Oberzeile, Titel
   --------------------------------------------------------------------- */
.sicherheit__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sicherheit__kopftext { min-width: 0; }

.sicherheit__symbol {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange-tint); color: var(--orange-dark);
  border: 1px solid color-mix(in srgb, var(--orange) 26%, transparent);
}
.sicherheit__symbol--ok {
  background: var(--ok-bg); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 26%, transparent);
}
:root[data-theme='dark'] .sicherheit__symbol:not(.sicherheit__symbol--ok) { color: var(--orange-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sicherheit__symbol:not(.sicherheit__symbol--ok) { color: var(--orange-2); }
}

.sicherheit__oberzeile {
  margin: 0 0 3px;
  font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.sicherheit__titel {
  font-size: clamp(21px, 5.4vw, 26px);
  letter-spacing: -.022em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sicherheit .karte__lead { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Einführung: Apps und Start
   --------------------------------------------------------------------- */
.sicherheit__absatz { margin: 0 0 10px; font-size: 14px; font-weight: 600; }

.sicherheit__apps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sicherheit__apps li {
  padding: 6px 12px; border-radius: 99px;
  background: var(--card-2); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 650; line-height: 1.35;
}

.sicherheit__nebentext { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.sicherheit__aktion { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.sicherheit__meldungen:empty { display: none; }

/* ---------------------------------------------------------------------
   Einrichtung: nummerierte Schritte
   --------------------------------------------------------------------- */
.sicherheit__schritte { list-style: none; margin: 4px 0 0; padding: 0; }
.sicherheit__schritt { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.sicherheit__schritt + .sicherheit__schritt { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.sicherheit__schritt-inhalt { min-width: 0; }
.sicherheit__schritt h2 { font-size: 16px; line-height: 28px; margin: 0 0 2px; }
/* Die Überschrift bekommt den Fokus nur programmatisch (Sprungziel), sie ist nicht bedienbar */
.sicherheit__schritt h2[tabindex='-1']:focus { outline: none; box-shadow: none; }
.sicherheit__schritt-inhalt > p { font-size: 14px; margin: 0; }

/* QR-Code und Schlüssel untereinander: die Karte ist für zwei Spalten zu schmal */
.sicherheit__qr-bereich { display: grid; gap: 18px; margin-top: 14px; }

.sicherheit__qr {
  /* Bewusst fest weiß, auch im Dunkelmodus: Kameras lesen QR-Codes nur mit
     dunklen Punkten auf hellem Grund zuverlässig. */
  --qr-grund: #fff;
  justify-self: center;
  padding: 12px; border-radius: 14px;
  background: var(--qr-grund);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1);
}
.sicherheit__qr-bild { width: 176px; height: 176px; }
.sicherheit__qr-hinweis { margin: 0; } /* Abstand kommt vom Raster (gap) */

.sicherheit__manuell { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sicherheit__manuell-titel { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.sicherheit__manuell .feld__hinweis { margin: 0; }

.sicherheit__schluessel {
  display: block; width: 100%;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text);
  font-size: 15px; font-weight: 650; letter-spacing: .06em; word-spacing: .2em; line-height: 1.65;
  overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all; /* ein Tipp markiert den ganzen Schlüssel */
}
.sicherheit__schluessel-zeile { display: block; }
.sicherheit__kopieren.btn--klein { min-height: 44px; }

/* ---------------------------------------------------------------------
   Codefeld
   --------------------------------------------------------------------- */
.sicherheit__formular { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.sicherheit__formular .feld__hinweis,
.sicherheit__formular .feld__fehler { margin: 0; }

/* ---------------------------------------------------------------------
   Unter der Karte: Hinweis und Abmelden
   --------------------------------------------------------------------- */
.sicherheit__fuss {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 18px; text-align: center;
}
.sicherheit__verloren { margin: 0; font-size: 13px; color: var(--muted); }
.sicherheit__abmelden.btn--link {
  min-height: 44px; padding: 0 10px;
  font-size: 14px; color: var(--muted);
}
.sicherheit__abmelden.btn--link:hover { color: var(--text); }

/* Sehr schmale Handys: etwas kompakter */
@media (max-width: 400px) {
  .sicherheit__symbol { width: 44px; height: 44px; border-radius: 13px; }
  .sicherheit__kopf { gap: 12px; }
}