/* Bereich: auth – Anmelde- und Pflichtseiten (lib/auth_ui.dart, login_page.dart,
   register_flow_page.dart, verify_email_page.dart, forgot_password_page.dart,
   login_security_challenge_page.dart, account_deactivated_page.dart,
   account_deletion_pending_page.dart). Ohne Kacheln, Akzent als Verlauf. */

/* hidden gilt hier immer (sonst gewinnt z. B. display:inline-flex von .btn). */
.auth [hidden],
.reg [hidden] { display: none !important; }

/* ---------- Gerüst ---------- */
/* Volle Bildhöhe abzüglich des unteren Seitenrands, den .main auf diesen Seiten
   bekommt (app.css: html.is-bare .main { padding-bottom: 32px }) – sonst ist jede
   kurze Seite 32 px zu hoch und lässt sich unnötig scrollen. Bewusst ohne var():
   sonst fiele ein Browser ohne dvh nicht auf die vh-Zeile zurück. Gilt auch für .reg. */
.auth {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
  padding-top: env(safe-area-inset-top);
}
.auth__col {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 10px;
}
@media (min-width: 768px) {
  .auth__col { padding-top: 56px; }
}
.auth__back {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 12px;
  z-index: 3;
}
/* Großes, zartes Logo unten rechts wie AuthBackground (keine Fläche, kein Schein). */
.auth__art {
  position: fixed;
  right: -70px;
  bottom: -30px;
  z-index: 0;
  width: 400px;
  max-width: none;
  height: auto;
  opacity: .10;
  transform: rotate(-.22rad);
  pointer-events: none;
  user-select: none;
}
:root[data-theme="light"] .auth__art { opacity: .06; }
.auth__foot {
  position: relative;
  z-index: 1;
  padding: 22px 24px 4px;
}
.auth__foot .legal-links { justify-content: center; }

/* ---------- Logo-Badge und Wortmarke ---------- */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.auth-brand__badge {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #070707;
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 10px;
  object-fit: contain;
}
:root[data-theme="light"] .auth-brand__badge { border-color: rgba(0, 0, 0, .10); }
.auth-brand__word {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.auth-brand--small {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.auth-brand--small .auth-brand__badge { width: 38px; height: 38px; padding: 5px; }
.auth-brand--small .auth-brand__word { font-size: 25px; font-weight: 800; letter-spacing: 1.2px; }
.auth-wordmark {
  margin-top: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

/* ---------- Texte ---------- */
.auth__title {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.auth__title--big { font-size: 24px; letter-spacing: -.2px; }
.auth--pin .auth__title { margin-top: 24px; font-size: 26px; font-weight: 800; }
.auth__lead {
  margin: 8px auto 0;
  max-width: 400px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-2);
  text-align: center;
}
.auth--login .auth__lead { margin-top: 14px; }
.auth__lead--lines { white-space: pre-line; }
.auth__text {
  margin: 10px auto 0;
  max-width: 400px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-2);
  text-align: center;
}
.auth-note {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}
.auth-note a { color: var(--text-2); text-decoration: underline; }
.auth-signature {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Formulare ---------- */
.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.auth .field__input:disabled,
.reg .field__input:disabled,
.reg .field__select:disabled,
.auth .field__textarea:disabled { opacity: .6; }

/* Feld mit Symbol links (alternate_email, Schloss); im Fokus im Verlauf. */
.auth-field--icon .field__input { padding-left: 46px; }
.auth-field__icon {
  position: absolute;
  left: 15px;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--text-2);
  pointer-events: none;
}
.auth-field__icon .icon { width: 20px; height: 20px; }
.auth-field--icon:focus-within .auth-field__icon .icon { fill: url(#cv-accent); }
.field__toggle .icon { width: 21px; height: 21px; }

.auth-forgot {
  justify-self: end;
  margin: -8px -4px -6px 0;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

/* ---------- Knöpfe ---------- */
.auth-btn { position: relative; }
.auth-btn__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0;
}
.auth-btn.is-loading .auth-btn__label { visibility: hidden; }
.auth-btn.is-loading .auth-btn__spin { opacity: 1; }
.btn--primary .auth-btn__spin {
  background: conic-gradient(from 90deg, rgba(255, 255, 255, 0), #fff);
}

/* Hauptknopf „Login“: harter Kontrast (weiß im Dunkeln, schwarz im Hellen). */
.auth-main-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 52px;
  border-radius: 18px;
  background: #fff;
  color: #000;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .12s ease, opacity .15s ease;
}
.auth-main-btn:active { transform: scale(.985); }
:root[data-theme="light"] .auth-main-btn { background: #000; color: #fff; }

.auth-cta {
  min-height: 52px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
}
.auth .btn:disabled:not(.is-loading),
.reg .btn:disabled:not(.is-loading),
.auth-main-btn:disabled:not(.is-loading) { opacity: .5; }

.auth-social {
  min-height: 48px;
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 800;
  background: var(--input-fill);
  border-color: var(--line-soft);
}

.auth-switch {
  margin-top: -4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
}
.auth-switch a {
  display: inline-block;
  padding: 8px 0;
  font-weight: 900;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 -2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-soft);
}

/* Ruhige Text-Knöpfe (Erneut senden, Zurück zur Anmeldung …) */
.auth-textbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
.auth-textbtn:disabled { opacity: .45; }
.auth-textbtn .icon { width: 18px; height: 18px; }
.auth-textbtn.text-accent { color: transparent; }
.auth-textbtn--quiet { color: var(--text-2); font-weight: 700; }
.auth-textbtn--underline {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

.auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.auth-actions--end {
  margin-top: auto;
  padding-top: 28px;
}

/* ---------- Lade-Kreis im Verlauf ---------- */
.auth-spinner {
  display: inline-block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255, 59, 142, 0), var(--accent-1) 55%, var(--accent-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: auth-spin .9s linear infinite;
}
.auth-spinner--inline { display: block; width: 24px; height: 24px; margin: 0 auto; }
.auth-spinner--tiny { width: 14px; height: 14px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---------- Meldungen ---------- */
.auth-msg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-2);
}
.auth-msg__icon { display: grid; flex: none; padding-top: 1px; }
.auth-msg__icon .icon { width: 18px; height: 18px; }
.auth-msg.is-bad { color: var(--danger); }
.auth-msg.is-bad .icon { fill: currentColor; }
.auth-line-error {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--danger);
  text-align: center;
}
.auth-sent {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
}
.auth-hint { margin-top: 24px; }
.auth-hint__title { font-size: 16px; font-weight: 800; }
.auth-hint__text {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}
.auth-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.38;
  color: var(--text-2);
}
.auth-info__icon { flex: none; width: 20px; height: 20px; }
.auth-info__icon--warn { color: #FFB020; }
:root[data-theme="light"] .auth-info__icon--warn { color: #B26A00; }

/* Großes Symbol über der Überschrift (Briefumschlag, Sperre, Uhr) */
.auth-symbol {
  display: grid;
  place-items: center;
  margin: 22px auto 0;
}
.auth-symbol .icon { width: 76px; height: 76px; }
.auth-symbol--small { margin-top: 4px; }
.auth-symbol--small .icon { width: 58px; height: 58px; }
.auth-symbol--warn { margin-top: 8px; color: #FFB020; }
:root[data-theme="light"] .auth-symbol--warn { color: #B26A00; }
.auth-symbol--warn .icon,
.auth--deletion .auth-symbol .icon { width: 42px; height: 42px; }

/* ---------- Anmelde-PIN ---------- */
.auth-pin__intro {
  min-height: 24px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
.auth--pin .auth-form { margin-top: 16px; }
.auth-pin__code {
  border-radius: 20px;
  font-size: 26px;
  letter-spacing: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.auth-pin__code::placeholder { letter-spacing: 0; }

/* ---------- Gesperrtes Konto / Widerspruch ---------- */
.appeal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.appeal__input { min-height: 132px; }
.appeal-status:empty { display: none; }
.appeal-status__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-weight: 600;
  color: var(--text-2);
}
.appeal-status__line .auth-spinner { width: 18px; height: 18px; }
.appeal-status__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
}
.appeal-status__icon { width: 19px; height: 19px; color: #FFB020; }
:root[data-theme="light"] .appeal-status__icon { color: #B26A00; }
.appeal-status__date {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.appeal-status__text {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.auth--blocked .auth-note { margin-top: 12px; }
.auth--blocked .auth-note a { overflow-wrap: anywhere; }
.appeal__logout { gap: 10px; }
.appeal__logout .icon { width: 22px; height: 22px; }

/* ---------- Löschung vorgemerkt ---------- */
.del__headline {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.2px;
  text-align: center;
}
.del__when {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.del__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
}
.del__icon .icon { width: 22px; height: 22px; }
.del__meta { min-width: 0; }
.del__label { font-size: 16px; font-weight: 800; }
.del__date { margin-top: 3px; font-size: 15px; font-weight: 900; }
.del__rest { margin-top: 5px; font-size: 13px; font-weight: 800; }
.del__rest.is-late { color: var(--danger); }
.auth--deletion .auth-info { margin-top: 26px; font-size: 13.5px; font-weight: 600; }
.auth--deletion .btn--social .icon { width: 22px; height: 22px; }

/* =====================================================================
   Registrierung / Profil einrichten (register_flow_page.dart)
   ===================================================================== */
.reg {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
}
.reg__head {
  position: relative;
  padding: max(14px, env(safe-area-inset-top)) 18px 0;
  text-align: center;
}
.reg__title { font-size: 22px; font-weight: 900; line-height: 1.2; }
.reg--social .reg__title { padding: 0 72px; }
.reg__signout {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  right: 6px;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
}
.reg__step {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
/* Fortschritt als EINE dünne Linie, erreichter Teil im Verlauf */
.reg__progress {
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.reg__bar {
  display: block;
  height: 100%;
  background: var(--accent-gradient);
  transform-origin: left center;
  transform: scaleX(.25);
  transition: transform .28s var(--ease-out);
}
.reg__form {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.reg__body {
  flex: 1 0 auto;
  padding: 20px 18px 8px;
}
.reg__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  animation: reg-in .25s var(--ease-out);
}
.reg__panel:focus,
.reg__panel:focus-visible { outline: none; }
@keyframes reg-in { from { opacity: 0; transform: translateX(24px); } }

/* „Weiter“ bleibt unten (nichts verschiebt sich beim Tippen) */
.reg__foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 4px;
  padding: 14px 18px max(6px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0, var(--bg) 14px);
}
.reg__msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--danger);
}
.reg__msg .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.reg__msg.is-note { color: var(--text-2); }
.reg__next {
  min-height: 52px;
  border-radius: 18px;
  font-size: 15.5px;
  font-weight: 900;
}
.reg__back {
  min-height: 44px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-2);
}
.reg__back:disabled { opacity: .45; }
.reg__legal { padding: 4px 18px 0; }
.reg__legal .auth-note { margin-top: 10px; }
.reg__legal .auth__foot { padding: 12px 0 4px; }

/* Schritt 0 */
.reg-avatar {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 104px;
  height: 104px;
  margin-top: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  transition: opacity .15s ease;
}
:root[data-theme="light"] .reg-avatar { background: rgba(102, 102, 102, .08); }
.reg-avatar .icon { width: 34px; height: 34px; }
.reg-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.reg-avatar.is-loading { opacity: .55; }
.reg-pick { margin-top: -10px; font-size: 14px; }
.reg-identity {
  min-width: 0;
  margin-top: -6px;
  text-align: center;
  cursor: text;
}
.reg-identity__handle {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-identity__name {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-stack { display: grid; gap: 6px; margin-top: 4px; }
.reg-status:empty { display: none; }
.reg-status__line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-2);
}
.reg-status__line .icon { flex: none; width: 16px; height: 16px; }
.reg-status__line.is-ok { color: var(--success); }
.reg-status__line.is-bad { color: var(--danger); }
.reg-sugg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
}
/* Vorschlag als Pille nur mit Verlaufsrand, ohne Fläche */
.reg-sugg {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--accent-tint-border) border-box;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.reg .field__input[aria-invalid="true"]:not(:focus) { border-color: var(--danger); }
.reg-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.reg-row2 > *,
.reg-phone > * { min-width: 0; }
.reg-hint {
  margin-top: 4px;
  font-size: 12.8px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
}
.reg-hint--left { font-size: 12px; text-align: left; }

/* Schritt 1 */
.reg-phone {
  display: grid;
  grid-template-columns: minmax(112px, 132px) 1fr;
  gap: 12px;
  align-items: end;
}
.reg-phone .field__select { padding-left: 12px; padding-right: 8px; }
.reg-date::-webkit-date-and-time-value { text-align: left; }
.reg-date { min-width: 0; }
.reg-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.reg-section__title { font-size: 16px; font-weight: 900; }
.reg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Auswahl-Pille: ungewählt leichte neutrale Fläche, gewählt im Verlauf */
.reg-pill {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  transition: background-color .16s ease, color .16s ease;
}
:root[data-theme="light"] .reg-pill { background: rgba(102, 102, 102, .08); }
.reg-pill[aria-pressed="true"],
:root[data-theme="light"] .reg-pill[aria-pressed="true"] {
  background: var(--accent-gradient);
  color: #fff;
}
.reg-pill:disabled { opacity: .6; }

/* Schritt 2 */
.reg-panel__title { font-size: 18px; font-weight: 900; }
.reg-panel__sub {
  margin-top: -8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}
.reg-section .reg-panel__sub { margin-top: -4px; }
.reg-add .icon { width: 24px; height: 24px; }
.reg-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reg-chosen__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 3px 3px 12px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--accent-tint-border) border-box;
  font-size: 13px;
  font-weight: 700;
}
.reg-chosen__item > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-chosen__remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-2);
}
.reg-chosen__remove .icon { width: 16px; height: 16px; }
.reg-counter {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  text-align: center;
}
.reg-counter.text-accent { color: transparent; }

/* Schritt 3 */
.reg-visibility { margin-top: 6px; }
.reg-choices { display: grid; }
.reg-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  color: var(--text);
}
.reg-choice .sel-circle { width: 22px; height: 22px; margin-top: 1px; }
.reg-choice__text { display: grid; gap: 3px; min-width: 0; }
.reg-choice__title { font-size: 15px; font-weight: 800; }
.reg-choice__sub {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
}
.reg-terms {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}
.reg-terms__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -9px;
  border-radius: 50%;
}
.reg-terms__box .sel-circle { width: 22px; height: 22px; }
.reg-terms__text {
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-2);
  cursor: pointer;
}
.reg-terms__link { font-weight: 900; }

/* Passwortstärke: schwach rot, mittel orange, stark grün (Statusfarben, kein Akzent) */
.reg-strength { display: grid; gap: 4px; }
.reg-strength__track {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.reg-strength__bar {
  display: block;
  height: 100%;
  background: var(--danger);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .2s ease, background-color .2s ease;
}
.reg-strength__label {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--danger);
}
.reg-strength[data-level="medium"] .reg-strength__bar { background: #FFAB40; }
.reg-strength[data-level="medium"] .reg-strength__label { color: #FFAB40; }
:root[data-theme="light"] .reg-strength[data-level="medium"] .reg-strength__bar { background: #E08600; }
:root[data-theme="light"] .reg-strength[data-level="medium"] .reg-strength__label { color: #B26A00; }
.reg-strength[data-level="strong"] .reg-strength__bar { background: var(--success); }
.reg-strength[data-level="strong"] .reg-strength__label { color: var(--success); }
.reg-strength__note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}
.reg-req {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-3);
}
.reg-req__title { margin-bottom: 3px; color: var(--success); }
.reg-req__list li.is-ok { color: var(--success); }
:root[data-theme="light"] .reg-req__title,
:root[data-theme="light"] .reg-req__list li.is-ok,
:root[data-theme="light"] .reg-strength[data-level="strong"] .reg-strength__label { color: #2E7D32; }

@media (min-width: 768px) {
  .reg__head { padding-top: 40px; }
}

/* Raster nie breiter als die Spalte (lange Namen, Vorschläge) */
.reg-section,
.reg-stack,
.reg__foot { grid-template-columns: minmax(0, 1fr); }