/* SmartMeeting Account UI */

/* Self-hosted fonts — latin subset, variable font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Display-Schrift fuer H1 (Seitentitel) — Redesign-Runde 22.08.2026 (Tim, Design-Canvas).
   Variables Font: eine Datei deckt Weight 500-600 ab (Google liefert fuer beide dieselbe
   Quelle), daher ein einziger @font-face-Block mit Bereich statt zwei Dateien. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/newsreader.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --sm-primary-50:  #EFF6FB;
  --sm-primary-100: #D6E9F5;
  --sm-primary-200: #A4CFE9;
  --sm-primary-400: #3FA0D2;
  --sm-primary-500: #1D8AC4;
  --sm-primary-600: #1670A2;
  --sm-primary-700: #105580;
  --sm-primary-800: #0B3F60;

  --sm-primary:       var(--sm-primary-500);
  --sm-ink-50:  #F7F9FB;
  --sm-ink-100: #EEF1F5;
  --sm-ink-150: #E5E9EF;
  --sm-ink-200: #D7DCE3;
  --sm-ink-300: #BAC1CC;
  --sm-ink-400: #8C95A3;
  --sm-ink-500: #6B7280;
  --sm-ink-600: #4B5363;
  --sm-ink-700: #353B47;
  --sm-ink-800: #1F242E;
  --sm-ink-900: #0F131A;
  --sm-white:   #FFFFFF;

  --sm-fg:           var(--sm-ink-900);
  --sm-fg-muted:     var(--sm-ink-600);
  --sm-fg-faint:     var(--sm-ink-500);
  --sm-fg-on-primary: var(--sm-white);

  --sm-bg:           var(--sm-white);
  --sm-bg-alt:       var(--sm-ink-50);
  --sm-bg-soft:      var(--sm-ink-100);
  --sm-border:       var(--sm-ink-150);
  --sm-border-strong: var(--sm-ink-200);
  --sm-success:      #2E9F4A;
  --sm-success-soft: #E8F5EC;
  --sm-success-fg:   #1F6F33;
  --sm-danger:       #D44650;
  --sm-danger-soft:  #FBEAEB;
  --sm-danger-fg:    #8E2A33;
  --sm-warning:      #C68410;
  --sm-warning-soft: #FBF1DC;
  --sm-warning-fg:   #7A5008;
  --sm-info:         var(--sm-primary-500);
  --sm-info-soft:    var(--sm-primary-50);
  --sm-info-fg:      var(--sm-primary-700);
  --sm-font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --sm-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular",
                  Menlo, Consolas, monospace;
  /* Redesign-Runde 22.08.2026: Seitentitel (H1) tragen eine Serife statt Grotesk —
     bricht den generischen SaaS-Look, ohne den Fliesstext/UI-Font (Inter) anzutasten. */
  --sm-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sm-fs-xs:   12px;
  --sm-fs-sm:   13px;
  --sm-fs-base: 15px;
  --sm-fs-md:   17px;
  --sm-fs-lg:   19px;
  --sm-fw-medium:  500;
  --sm-fw-semi:    600;
  --sm-fw-bold:    700;
  --sm-tracking-tight: -0.015em;
  --sm-tracking-wide:   0.04em;
  --sm-lh-tight:  1.1;
  --sm-lh-normal: 1.5;
  --sm-radius-xs:   4px;
  --sm-radius-sm:   6px;
  --sm-radius-md:   8px;
  --sm-radius-lg:  8px; /* Redesign-Runde 22.08.2026: 10px wirkte zu "bouncy"/verspielt */
  --sm-radius-pill: 999px;
  --sm-shadow-sm: 0 1px 2px rgba(15,19,26,.04), 0 0 0 1px rgba(15,19,26,.05);
  --sm-shadow-lg: 0 12px 32px -8px rgba(15,19,26,.12), 0 0 0 1px rgba(15,19,26,.04);

  --sm-ring-focus: 0 0 0 3px rgba(29,138,196,.30);
  --sm-ease:     cubic-bezier(.2,.7,.2,1);
  --sm-dur-fast: 120ms;
  --sm-dur-base: 180ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* Base */
html {
  font-family: var(--sm-font-sans);
  color: var(--sm-fg);
  background: var(--sm-bg-alt);
  font-feature-settings: "ss01","cv02","cv11";
}
body {
  margin: 0; padding: 0;
  font-size: var(--sm-fs-base);
  line-height: var(--sm-lh-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--sm-primary-700); }
a:hover { color: var(--sm-primary-600); }
a:focus-visible {
  outline: none;
  box-shadow: var(--sm-ring-focus);
  border-radius: var(--sm-radius-xs);
}
p { margin: 0 0 16px; }
h1, h2, h3 { margin: 0; color: var(--sm-fg); }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: none; border-top: 1px solid var(--sm-border); margin: 24px 0; }

/* Skip Link (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  padding: 8px 16px;
  background: var(--sm-primary-500);
  color: var(--sm-white);
  text-decoration: none;
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semi);
  border-radius: 0 0 var(--sm-radius-sm) 0;
}
.skip-link:focus-visible { left: 0; outline: none; }

/* SM-276 (AC-A4): visuell versteckt, für Screenreader lesbar.
   Bewusst NICHT display:none und nicht visibility:hidden — beides nimmt den Inhalt
   auch aus dem Accessibility-Tree, eine Live-Region darin sagt dann nichts an.
   login.ejs:156 verwendet die Klasse seit SM-223, sie war hier bis SM-276 nie
   definiert; die Region stand dort also sichtbar in der Seite. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Auth Shell */
.sm-auth-shell {
  width: 100%; min-height: 100vh;
  background: var(--sm-bg-alt);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 32px;
}
.sm-auth-inner { width: 440px; max-width: 100%; }

/* Logo above card */
.sm-auth-logo {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.sm-wordmark { height: 28px; display: block; width: auto; }
/* Redesign-Runde 22.08.2026 (Befund Tim): dieselbe Signatur wie .sm-topbar-stripe,
   hier zentriert unter dem Wordmark statt linksbuendig im TopBar. */
.sm-auth-signature { display: flex; gap: 6px; }
.sm-auth-signature span { display: block; width: 36px; height: 3px; border-radius: 2px; }
.sm-auth-signature span:nth-child(1) { background: #1D96D5; }
.sm-auth-signature span:nth-child(2) { background: #77BE7A; }
.sm-auth-signature span:nth-child(3) { background: #EC5F65; }

/* Auth card = <main> */
.sm-auth-card {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-sm);
  padding: 32px 36px 36px;
  width: 100%;
  outline: none; /* tabindex="-1" for skip-link target, no visible ring */
}

/* Footer below card */
.sm-auth-footer {
  margin-top: 20px;
  text-align: center;
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg-muted);
}
.sm-auth-footer a {
  color: var(--sm-primary-700);
  text-decoration: none;
  font-weight: var(--sm-fw-medium);
}
.sm-auth-footer a:hover { text-decoration: underline; }
.sm-page-title {
  font-family: var(--sm-font-display);
  font-size: 30px;
  font-weight: var(--sm-fw-semi);
  letter-spacing: var(--sm-tracking-tight);
  line-height: var(--sm-lh-tight);
  color: var(--sm-fg);
  margin: 0 0 8px;
}
.sm-page-subtitle {
  font-size: var(--sm-fs-base);
  color: var(--sm-fg-muted);
  margin: 0 0 28px;
  line-height: 1.45;
}
.sm-centered { text-align: center; }

/* Stepper */
.sm-stepper {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
  font-size: var(--sm-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wide);
  font-weight: var(--sm-fw-semi);
  color: var(--sm-fg-muted);
}
.sm-stepper-current { color: var(--sm-primary-700); }
.sm-stepper-bar {
  flex: 1; height: 3px;
  background: var(--sm-bg-soft);
  border-radius: var(--sm-radius-pill);
  margin-left: 4px; overflow: hidden;
}
.sm-stepper-fill {
  height: 100%;
  background: var(--sm-primary-500);
  border-radius: var(--sm-radius-pill);
}

/* Forms */
.sm-field { margin-bottom: 16px; }
.sm-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.sm-field-row .sm-label { margin-bottom: 0; }
.sm-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  color: var(--sm-fg);
}
.sm-req { color: var(--sm-danger); margin-left: 2px; }

.sm-input,
input[type="text"].sm-input,
input[type="email"].sm-input,
input[type="password"].sm-input,
input[type="tel"].sm-input {
  display: block; width: 100%;
  font-family: inherit;
  font-size: var(--sm-fs-base);
  padding: 10px 12px;
  border-radius: var(--sm-radius-sm);
  border: 1px solid var(--sm-border-strong);
  background: var(--sm-white);
  color: var(--sm-fg);
  outline: none;
  transition: border-color var(--sm-dur-base) var(--sm-ease),
              box-shadow var(--sm-dur-base) var(--sm-ease);
  appearance: none;
}
.sm-input:focus-visible {
  border-color: var(--sm-primary-500);
  box-shadow: var(--sm-ring-focus);
}
.sm-input[aria-invalid="true"] {
  border-color: var(--sm-danger);
}
.sm-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(212,70,80,.25);
}
.sm-input[readonly] {
  background: var(--sm-bg-alt);
  color: var(--sm-fg-muted);
  cursor: default;
}
.sm-input-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg-faint);
  line-height: 1.5;
}
/* Mono input (TOTP/code) */
.sm-input-mono {
  font-family: var(--sm-font-mono);
  font-size: 20px;
  letter-spacing: 0.15em;
  text-align: center;
}
/* Read-only field display (registration step 2) */
.field-readonly {
  padding: 10px 12px;
  border-radius: var(--sm-radius-sm);
  border: 1px solid var(--sm-border);
  background: var(--sm-bg-alt);
  color: var(--sm-fg-muted);
  font-size: var(--sm-fs-base);
  margin-bottom: 8px;
}

/* Buttons */
button, .sm-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: inherit;
  font-weight: var(--sm-fw-semi);
  cursor: pointer;
  border: none;
  border-radius: var(--sm-radius-md);
  min-height: 44px; /* WCAG 2.5.8 */
  transition: background var(--sm-dur-fast) var(--sm-ease),
              color var(--sm-dur-fast) var(--sm-ease);
  text-decoration: none;
}
button:focus-visible, .sm-btn:focus-visible {
  outline: none;
  box-shadow: var(--sm-ring-focus);
}
.sm-btn-primary, button[type="submit"] {
  width: 100%; padding: 11px 16px;
  font-size: var(--sm-fs-base);
  /* Redesign-Runde 22.08.2026: primary-700 statt primary-500 — primary-500 blieb bisher
     ueberall dominant und trug massgeblich zum "verspielten" Eindruck bei. primary-500
     bleibt als punktueller Akzent (Links, Fokus-Ring), das Gewicht traegt jetzt die
     dunklere Stufe. */
  background: var(--sm-primary-700);
  color: var(--sm-white);
  border: none;
}
.sm-btn-primary:hover, button[type="submit"]:hover {
  background: var(--sm-primary-800);
}
/* "Code erneut senden" (_pending-verification.ejs) ist type="submit", weil es ein
   echtes POST-Formular ausloest (Lesson SM-260, kein <a onclick>) — trifft damit aber
   button[type="submit"] oben (Spezifitaet 0,1,1) und schlaegt .sm-btn-ghost (0,1,0).
   `width: auto` wurde dafuer schon separat gepatcht (siehe .sm-row-action); Hintergrund,
   Farbe und Padding blieben bis hierher primary-blau. Selektor mit Klasse+Attribut
   (0,2,1) gewinnt gezielt gegen button[type="submit"] und laesst alle anderen
   type="submit"-Buttons (z.B. echte Primary-CTAs) unangetastet.
   Befund Tim (23.08.2026): font-size fehlte hier — button[type="submit"] oben setzt
   --sm-fs-base (15px), .sm-btn-ghost will --sm-fs-sm (13px) wie "Entfernen" daneben.
   Ohne diese Zeile gewinnt weiterhin die 15px-Regel, weil font-size hier nie erwaehnt
   wurde und "Code erneut senden" damit sichtbar groesser wirkte als "Entfernen". */
button.sm-btn-ghost[type="submit"] {
  background: transparent;
  color: var(--sm-primary-700);
  padding: 0;
  font-size: var(--sm-fs-sm);
}
button.sm-btn-ghost[type="submit"]:hover {
  background: transparent;
  color: var(--sm-primary-600);
}

/* Secondary */
.sm-btn-secondary {
  padding: 9px 16px;
  font-size: var(--sm-fs-sm);
  background: var(--sm-white);
  color: var(--sm-fg);
  border: 1px solid var(--sm-border-strong);
  width: auto;
}
.sm-btn-secondary:hover { background: var(--sm-bg-soft); }

/* Ghost */
.sm-btn-ghost {
  background: transparent; border: none;
  color: var(--sm-primary-700);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  padding: 0; text-decoration: none; cursor: pointer;
}
.sm-btn-ghost:hover { color: var(--sm-primary-600); }

.sm-identifier-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; margin-bottom: 16px;
  /* SM-276 (Review P5): --sm-gray-* ist in diesem Stylesheet nirgends definiert. Eine
     ungueltige var() ohne Fallback macht die Deklaration "invalid at computed-value
     time" — background und border-color fielen auf ihren Initialwert (transparent)
     zurueck. Ersetzt durch die tatsaechlich definierte --sm-ink-Skala. */
  background: var(--sm-bg-alt); border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius); font-size: var(--sm-fs-sm);
  color: var(--sm-ink-700);
}

/* SM-276 (Review P5, AC-A2): Der Trenner war unsichtbar — --sm-gray-400/200 sind hier
   nicht definiert, die Linien rendern damit transparent und sichtbar blieb nur das Wort
   "oder". AC-A2 verlangt aber einen sichtbaren Trenner, damit Passwort- und Passkey-Weg
   als Alternativen erkennbar sind. --sm-ink-400 (#8C95A3) traegt gegen Weiss 3,06:1 und
   erfuellt damit WCAG 1.4.11 fuer ein bedeutungstragendes grafisches Element; --sm-ink-200
   waere mit 1,4:1 zu schwach gewesen. Wirkt auch auf login.ejs, das dieselbe Klasse
   nutzt (dort derselbe vorbestehende Fehler). */
.sm-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--sm-fg-muted); font-size: var(--sm-fs-sm);
  margin: 16px 0;
}
.sm-divider::before, .sm-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--sm-ink-400);
}

/* Danger ghost */
.sm-btn-danger {
  background: transparent; border: none;
  color: var(--sm-danger-fg);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  padding: 0; min-height: 44px;
}

/* Full-width secondary (e.g. Zurück) */
.sm-btn-secondary-full {
  width: 100%; padding: 11px 16px;
  font-size: var(--sm-fs-base);
  background: var(--sm-white);
  color: var(--sm-fg);
  border: 1px solid var(--sm-border-strong);
  margin-top: 12px;
}
.sm-btn-secondary-full:hover { background: var(--sm-bg-soft); }

/* Danger secondary */
.sm-btn-danger-secondary {
  width: auto; padding: 9px 14px;
  font-size: var(--sm-fs-sm);
  background: var(--sm-white);
  color: var(--sm-danger-fg);
  border: 1px solid var(--sm-danger-soft);
}
.sm-btn-danger-secondary:hover { background: var(--sm-danger-soft); }

/* Messages */
/* Field-level inline error (below input) */
/* SM-275 (AC-A1): --sm-danger (#D44650) erreicht auf --sm-white nur 4,40:1 und verfehlt
   damit die 4,5:1-Schwelle aus WCAG 2.1 AA (1.4.3) für Fließtext — bei var(--sm-fs-sm)
   greift auch die Ausnahme für große Schrift nicht. --sm-danger-fg (#8E2A33) erreicht
   7,8:1, analog zum bereits korrekten Block-Fehler p.error unten.
   Der Rahmen .sm-input[aria-invalid="true"] behält --sm-danger: für nicht-textliche
   Kontraste gilt 3:1 (1.4.11), die 4,40:1 erfüllen. */
span.error, .error-message {
  display: block;
  margin-top: 6px;
  font-size: var(--sm-fs-sm);
  color: var(--sm-danger-fg);
}
/* SM-275 (E10, AC-M5): Die Fehlercontainer stehen leer im Markup, damit die
   clientseitige Prüfung nur Text hineinschreibt statt Elemente einzufügen —
   das vermeidet einen Layout-Shift beim Einblenden.
   Bewusst NICHT `display: none`: eine Live-Region, die im Moment der Mutation
   noch display:none ist, wird von einem Teil der Screenreader nicht angekündigt.
   Stattdessen bleibt das Element im Layout und im Accessibility-Tree und ist
   solange es leer ist schlicht 0 Pixel hoch — role="alert" kündigt damit
   zuverlässig an (AC-A2). */
span.error:empty, .error-message:empty, p.error:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* SM-275 (Review): Layout-Shift der Fehlerzusammenfassung.
   Die :empty-Regel darüber ist für die FELD-Container richtig — die stehen unter ihrem
   Feld, ihr Wachstum schiebt nur nachfolgende Felder. Die Zusammenfassung steht dagegen
   am Formularkopf und trug die volle p.error-Kastenoptik: 12+12 px Polsterung, ~20 px
   Textzeile, 16 px Abstand — rund 60 px, die beim Befüllen schlagartig entstanden und
   das gesamte Formular nach unten schoben. Und zwar in genau dem Moment, in dem der
   Fokus auf das erste fehlerhafte Feld springt: das Feld rutscht dem Nutzer unter dem
   Cursor weg.
   Deshalb ist die Zusammenfassung visuell flach — kein Kasten, nur Text in der
   Fehlerfarbe — und ihre Höhe ist dauerhaft reserviert (eine Zeile plus Abstand).
   Leer bleibt sie im Layout und im Accessibility-Tree, role="alert" kündigt unverändert
   an (AC-A2). Der reservierte Streifen ist unsichtbar und liest sich als normaler
   Abstand zwischen Kartenkopf und erstem Feld.
   Rest-Shift: auf sehr schmalen Viewports kann der Text auf zwei Zeilen umbrechen und
   um eine Zeilenhöhe wachsen. Zwei Zeilen dauerhaft zu reservieren wäre auf allen
   anderen Breiten totes Weiß — ~20 px statt ~60 px ist der bessere Tausch. */
p.error[data-sm-error-summary],
p.error[data-sm-error-summary]:empty {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sm-danger-fg);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semi);
  line-height: var(--sm-lh-normal);
  min-height: calc(var(--sm-fs-sm) * var(--sm-lh-normal));
  margin: 0 0 12px;
}

/* Block messages */
p.error,
.message.message--error {
  padding: 12px 14px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-danger-soft);
  color: var(--sm-danger-fg);
  border-left: 3px solid var(--sm-danger);
  font-size: var(--sm-fs-sm);
  margin-bottom: 16px;
}
p.info,
.message.message--info {
  padding: 12px 14px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-info-soft);
  color: var(--sm-info-fg);
  border-left: 3px solid var(--sm-info);
  font-size: var(--sm-fs-sm);
  margin-bottom: 16px;
}
p.success,
.message.message--success {
  padding: 12px 14px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-success-soft);
  color: var(--sm-success-fg);
  border-left: 3px solid var(--sm-success);
  font-size: var(--sm-fs-sm);
  margin-bottom: 16px;
}
p.warning,
.message.message--warning,
.warning {
  padding: 12px 14px;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-warning-soft);
  color: var(--sm-warning-fg);
  border-left: 3px solid var(--sm-warning);
  font-size: var(--sm-fs-sm);
  margin-bottom: 16px;
}
p.hint, .hint {
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg-faint);
  margin-bottom: 16px;
}

/* Badges */
/* Redesign-Runde 22.08.2026: radius-pill -> radius-sm. Volle Pillen waren einer der
   Hauptgruende fuer den "spielzeugartigen" Eindruck (Befund Tim, 22.08.2026). */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--sm-radius-sm);
  /* Befund Tim (23.08.2026): war --sm-fs-xs (12px), stand aber in der Adresszeile
     direkt neben .sm-status-badge (--sm-fs-sm, 13px) — "Primär" wirkte kleiner als
     "Verifiziert"/"Ausstehend" daneben. Beide Badges derselben Zeile jetzt gleich gross. */
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semi);
}
.badge--primary  { background: var(--sm-primary-50);    color: var(--sm-primary-700); }
.badge--verified,
.badge--active   { background: var(--sm-success-soft);  color: var(--sm-success-fg); }
.badge--pending,
.badge--inactive { background: var(--sm-bg-soft);       color: var(--sm-fg-muted); }

/* Dot badge (status) */
.sm-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--sm-radius-sm);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semi);
}
.sm-status-badge--active  { background: var(--sm-success-soft); color: var(--sm-success-fg); }
.sm-status-badge--inactive { background: var(--sm-bg-soft);     color: var(--sm-fg-muted); }
/* Redesign-Runde 22.08.2026: fuer settings.ejs (E-Mail/Telefon-Verifikationsstatus) —
   ersetzt .badge--verified/--pending samt eingebetteten Unicode-Glyphen (Check/Sanduhr)
   durch dasselbe Punkt+Text-Muster, das settings-totp.ejs fuer den 2FA-Status bereits
   nutzt. Farben unveraendert uebernommen (dieselben, bereits kontrastgeprueften Tokens
   wie zuvor .badge--verified/--pending) — nur Form und Darreichung aendern sich. */
.sm-status-badge--verified { background: var(--sm-success-soft); color: var(--sm-success-fg); }
.sm-status-badge--pending  { background: var(--sm-info-soft);    color: var(--sm-info-fg); }
.sm-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.sm-status-dot--active   { background: var(--sm-success); }
.sm-status-dot--inactive { background: var(--sm-ink-400); }
.sm-status-dot--verified { background: var(--sm-success); }
.sm-status-dot--pending  { background: var(--sm-primary-500); }

/* Icon Badge (mail/error circle) */
.sm-icon-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 26px;
}
.sm-icon-badge--primary { background: var(--sm-primary-50);  color: var(--sm-primary-700); }
.sm-icon-badge--danger  { background: var(--sm-danger-soft); color: var(--sm-danger-fg); font-weight: var(--sm-fw-bold); }

/* Error code box (error.ejs) */
.sm-error-code {
  background: var(--sm-bg-alt);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  padding: 12px 14px;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg-muted);
  margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
}

/* Code display / TOTP secret */
code, #totp-secret-display {
  font-family: var(--sm-font-mono);
  font-size: 13px;
  background: var(--sm-bg-soft);
  padding: 0.15em 0.4em;
  border-radius: var(--sm-radius-xs);
}
#totp-secret-display {
  display: block;
  background: var(--sm-white);
  padding: 8px 10px;
  border-radius: var(--sm-radius-sm);
  border: 1px solid var(--sm-border);
  word-break: break-all;
  line-height: 1.5;
  font-size: 13px;
  margin-bottom: 10px;
}

/* QR Row (Authenticator) */
.sm-qr-row {
  display: flex; gap: 20px; align-items: stretch;
  padding: 16px;
  background: var(--sm-bg-alt);
  border-radius: var(--sm-radius-md);
  margin-bottom: 20px;
}
.sm-qr-img-wrap {
  flex-shrink: 0;
  background: var(--sm-white);
  border-radius: var(--sm-radius-md);
  border: 1px solid var(--sm-border);
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
}
.sm-qr-img-wrap img { display: block; }
.sm-qr-text {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.sm-qr-eyebrow {
  font-size: var(--sm-fs-xs);
  color: var(--sm-fg-faint);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wide);
  font-weight: var(--sm-fw-semi);
  margin-bottom: 6px;
}

/* Backup codes */
#backup-codes-list { list-style: none; padding: 0; }
#backup-codes-list li { padding: 2px 0; font-size: var(--sm-fs-sm); }
.sm-backup-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Privacy notice */
.privacy-notice {
  background: var(--sm-info-soft);
  border: 1px solid var(--sm-primary-100);
  border-radius: var(--sm-radius-md);
  padding: 16px;
  margin-bottom: 20px;
}
.privacy-notice h3 {
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semi);
  color: var(--sm-info-fg);
  margin: 0 0 8px;
}
.privacy-notice ul { list-style: disc; padding-left: 20px; }
.privacy-notice li { font-size: var(--sm-fs-sm); color: var(--sm-fg-muted); padding: 2px 0; }

/* Dialog */
dialog {
  background: var(--sm-white);
  border: none;
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-lg);
  padding: 32px;
  max-width: 440px;
  width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(15,19,26,.4); }
dialog h2, dialog h3 {
  font-size: var(--sm-fs-md);
  font-weight: var(--sm-fw-semi);
  margin: 0 0 8px;
}

/* TopBar (Settings, Sessions) */
/* Redesign-Runde 22.08.2026, Nachtrag (Befund Tim: "responsive ist das Design noch
   nicht"): .sm-topbar und .sm-topbar-stripe sassen VORHER jeweils einzeln auf
   position:sticky, die Stripe mit einem hart codierten top:56px — geht die TopBar auf
   schmalen Viewports in den Umbruch (zwei Zeilen statt einer, siehe unten), waechst ihre
   Hoehe ueber 56px hinaus und die Stripe haengt dann MITTEN im TopBar-Inhalt statt
   darunter. Ein gemeinsamer sticky-Wrapper macht die Hoehe der Stripe-Positionierung
   egal, wie hoch die TopBar gerade ist. */
.sm-topbar-wrap { position: sticky; top: 0; z-index: 10; }
.sm-topbar {
  min-height: 56px; flex-shrink: 0;
  background: var(--sm-white);
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 0 32px; gap: 16px; row-gap: 10px;
}
.sm-topbar-logo { height: 22px; display: block; width: auto; }
/* Redesign-Runde 22.08.2026 (Befund Tim): Signatur-Streifen aus den drei echten
   Logo-Farben (siehe logo-icon.png, per Pixelprobe ausgelesen) statt der bisherigen
   neutralen Trennlinie unter dem TopBar — ein wiederkehrendes, unverwechselbares
   Markenelement statt einer generischen border-bottom. */
.sm-topbar-stripe {
  height: 3px; flex-shrink: 0;
  display: flex; gap: 6px;
  padding: 0 32px;
  background: var(--sm-white);
}
.sm-topbar-stripe span { display: block; width: 64px; border-radius: 2px; }
.sm-topbar-stripe span:nth-child(1) { background: #1D96D5; }
.sm-topbar-stripe span:nth-child(2) { background: #77BE7A; }
.sm-topbar-stripe span:nth-child(3) { background: #EC5F65; }
.sm-topbar-spacer { flex: 1; }
.sm-topbar-nav { display: flex; gap: 4px; }
.sm-topbar-navlink {
  padding: 6px 12px;
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  color: var(--sm-fg-muted);
  text-decoration: none;
  border-radius: var(--sm-radius-sm);
  transition: background var(--sm-dur-fast) var(--sm-ease);
}
.sm-topbar-navlink:hover { background: var(--sm-bg-soft); color: var(--sm-fg); }
.sm-topbar-navlink--active {
  font-weight: var(--sm-fw-semi);
  color: var(--sm-primary-700);
  background: var(--sm-primary-50);
}
.sm-topbar-navlink--action { margin-left: 8px; }

/* Full-page layout (Settings, Sessions) */
.sm-full-page {
  width: 100%; min-height: 100vh;
  background: var(--sm-bg-alt);
  display: flex; flex-direction: column;
  font-family: var(--sm-font-sans);
}
.sm-page-content { flex: 1; padding: 40px 48px; overflow: auto; }
.sm-page-inner { max-width: 720px; margin: 0 auto; }

.sm-page-header { margin-bottom: 32px; }
.sm-page-header h1 {
  font-family: var(--sm-font-display);
  font-size: 36px;
  font-weight: var(--sm-fw-semi);
  letter-spacing: var(--sm-tracking-tight);
  line-height: var(--sm-lh-tight);
  margin: 0 0 4px;
}
.sm-page-header p {
  font-size: var(--sm-fs-base);
  color: var(--sm-fg-muted);
  margin: 0;
}

/* Section cards */
.sm-section {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--sm-shadow-sm);
}
.sm-section-head { margin-bottom: 16px; }
/* Redesign-Runde 22.08.2026, Nachtrag (Befund Tim: "responsive ist das Design noch
   nicht"): Titel+Aktion-Zeile (Passwort, 2FA) stand bisher als Inline-Style direkt im
   Markup — dadurch nicht per Media Query erreichbar. Jetzt als Klasse, siehe die
   @media-Regel unten fuer das Stapeln auf schmalen Viewports. */
.sm-section-head--split {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.sm-section-head-action { width: auto; padding: 9px 16px; font-size: 13px; }
/* Zeile aus Eingabefeld + Button (E-Mail/Telefon hinzufuegen) — ebenfalls aus einem
   Inline-Style herausgezogen, aus demselben Grund. */
.sm-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-add-row .sm-input { flex: 1; min-width: 200px; }
.sm-add-row button { white-space: nowrap; }
.sm-section-title {
  font-size: var(--sm-fs-lg);
  font-weight: var(--sm-fw-semi);
  letter-spacing: var(--sm-tracking-tight);
  margin: 0;
}
.sm-section-desc {
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* Email rows */
/* SM-276 (AC-A8, WCAG 2.5.8 AA): Die Zeile trug gap:12px bei rund 18px hohen
   Inline-Links. Damit greift weder die 24x24-Regel noch die Abstands-Ausnahme — und
   nach CAP-3/CAP-4 stehen dort kuenftig ZWEI Bedienelemente nebeneinander statt einem.
   gap:16px sorgt dafuer, dass sich die 24-px-Kreise benachbarter Ziele auch dann nicht
   ueberschneiden, wenn ein Element genau 24px breit waere; row-gap deckt den
   flex-wrap-Umbruch in der schmalen Ansicht mit ab. */
.sm-email-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding: 12px 0;
  border-top: 1px solid var(--sm-border);
}
/* Redesign-Runde 22.08.2026: Mono-Font fuer Adressen wieder raus (Befund Tim: wirkte
   "courier-artig", zu technisch fuer eine Kontodaten-Zeile). Laeuft jetzt in Inter wie
   der Rest des Texts. */
.sm-email-addr {
  font-size: var(--sm-fs-sm);
  color: var(--sm-fg);
  word-break: break-all;
  min-width: 0;
}
.sm-email-spacer { flex: 1; }

/* Row controls */

/* SM-276 (AC-A8, WCAG 2.5.8): Zielflaeche der Zeilen-Bedienelemente.

   Review P6 — die vorige Fassung setzte hier 24px und hat damit VERKLEINERT statt
   vergroessert: Die Basisregel fuer `button` traegt bereits `min-height: 44px`, und ein
   Klassenselektor schlaegt einen Elementselektor. „Als Primär" und „Entfernen"
   schrumpften also von 44 auf 24 px, waehrend der Kommentar eine Untergrenze behauptete.
   24 px ist das gesetzliche Minimum, nicht das Ziel.

   Jetzt: 44 px halten — das ist die Groesse, die der Rest der Oberflaeche verwendet.
   `width: auto` ist noetig, weil `button[type="submit"]` in der Basisregel `width: 100%`
   bekommt; ohne das spraengte der Neuversand-Button die Zeile. */
.sm-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  width: auto;
  box-sizing: border-box;
}
/* Der reine Link darf schmaler wirken als eine Schaltflaeche, ohne die Zielflaeche
   aufzugeben: `padding-block` vergroessert den Treffbereich ueber die Textzeile hinaus,
   die Hoehe kommt weiter aus .sm-row-action. */
.sm-row-link {
  font-size: var(--sm-fs-sm);
  padding-block: 12px;
  padding-inline: 4px;
}
/* Das Neuversand-Formular ist reine Struktur (es traegt _csrf und den Ziel-Index) und
   darf die Zeile nicht zusaetzlich auseinanderziehen. */
.sm-row-form { display: inline-flex; margin: 0; }

/* SM-276 (Review P15): Die Meldung des Neuversands bekommt nach der Rueckkehr den
   Fokus (AC-A9). Ein <p> hat von sich aus keine Fokusdarstellung — ohne diese Regel
   sieht ein sehender Tastaturnutzer nicht, wo der Fokus gelandet ist. */
#sm-resend-status:focus-visible,
#verification-notice:focus-visible {
  outline: none;
  box-shadow: var(--sm-ring-focus);
  border-radius: var(--sm-radius-sm);
}

/* Danger card */

/* Sessions list */
.sm-sessions-list {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-sm);
  overflow: hidden;
}
.sm-session-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
}
.sm-session-divider { border-top: 1px solid var(--sm-border); }
.sm-session-icon {
  width: 40px; height: 40px;
  border-radius: var(--sm-radius-md);
  color: var(--sm-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sm-session-meta { flex: 1; min-width: 0; }
.sm-session-device { font-weight: var(--sm-fw-semi); font-size: var(--sm-fs-base); color: var(--sm-fg); }
.sm-session-sub { font-size: var(--sm-fs-sm); color: var(--sm-fg-muted); }
.sm-session-aside { text-align: right; flex-shrink: 0; }
.sm-session-when { font-size: var(--sm-fs-sm); }
.sm-session-when--current { color: var(--sm-success-fg); font-weight: var(--sm-fw-semi); }
.sm-sessions-footer {
  margin-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
}

/* Back link */
.sm-back-link {
  font-size: var(--sm-fs-sm);
  color: var(--sm-primary-700);
  text-decoration: none;
  font-weight: var(--sm-fw-medium);
  display: inline-block;
  margin-bottom: 8px;
}
.sm-back-link:hover { text-decoration: underline; }

/* Page nav row (footer links below main content) */
.sm-page-nav-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 8px 0;
  margin-top: 8px;
}

/* Responsive */
/* Redesign-Runde 22.08.2026, Nachtrag (Befund Tim: "responsive ist das Design noch
   nicht"): eigene, etwas breitere Schwelle nur fuer den TopBar — das Wordmark
   (logo-wordmark.png, ~130px bei 22px Hoehe) ist deutlich breiter als das vorherige
   Icon-only-Logo und stoesst zusammen mit den drei Navlinks + "Abmelden" frueher an den
   verfuegbaren Platz als die uebrigen 520px-Regeln unten. Statt die Links zu verkleinern
   oder zu verstecken: TopBar bricht in zwei Zeilen um (Logo+Abmelden oben, Navigation
   darunter, volle Breite) — bleibt vollstaendig lesbar und bedienbar statt nur enger. */
@media (max-width: 600px) {
  .sm-topbar { justify-content: space-between; row-gap: 8px; }
  .sm-topbar-spacer { display: none; }
  .sm-topbar-nav { order: 3; flex: 1 1 100%; }
  .sm-topbar-navlink--action { order: 2; margin-left: 0; }
}
@media (max-width: 520px) {
  .sm-auth-shell { padding: 24px 16px; align-items: stretch; justify-content: flex-start; }
  .sm-auth-card { padding: 24px 20px 28px; }
  .sm-auth-inner { width: 100%; }
  .sm-page-content { padding: 24px 16px; }
  .sm-topbar { padding: 0 16px; }
  .sm-topbar-stripe { padding: 0 16px; }
  .sm-topbar-user-name { flex-direction: column; align-items: stretch; gap: 12px; }
  /* Titel+Aktion-Zeilen (Passwort, 2FA) und Eingabe+Button-Zeilen (E-Mail/Telefon
     hinzufuegen) stapeln sich statt sich zu quetschen — Buttons behalten ihre volle
     44px-Zielflaeche ueber die ganze Breite, wie im Design-Entwurf (Settings Mobile). */
  .sm-section-head-action { width: 100%; }
  .sm-add-row .sm-input,
  .sm-add-row button { width: 100%; flex: 1 1 100%; }
  .sm-sessions-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .sm-sessions-footer button { width: 100%; }
  .sm-session-aside {
    flex: 1 1 100%; text-align: left;
    margin-left: 56px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-top: 8px;
  }
  .sm-session-row { flex-wrap: wrap; padding: 16px 18px; }
    .sm-danger-card .sm-btn-danger-secondary { width: 100%; }
}
@media (max-width: 480px) {
  .sm-qr-row { flex-direction: column; align-items: center; text-align: center; }
  .sm-qr-text { width: 100%; }
}
@media (max-width: 380px) {
    .sm-email-spacer { display: none; }
}

/* prefers-reduced-motion (WCAG 1.3.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* SM-276 (Befund Tim, 16.08.2026): Rueckmeldung der Passkey-Ceremony auf der
   Registrierung. Vorher lag sie in einer sr-only-Region und war fuer sehende Nutzer
   unsichtbar — ein fehlgeschlagener Versuch sah aus wie ein toter Knopf.
   Leer nimmt sie keinen Platz ein, bleibt aber im Layout und im Accessibility-Tree:
   display:none im Moment der Mutation verhindert die Ansage (Lesson SM-275). */
.sm-passkey-status {
  margin: 10px 0 0;
  font-size: var(--sm-fs-sm);
  line-height: 1.5;
  color: var(--sm-ink-700);
}
.sm-passkey-status:empty { margin: 0; padding: 0; border: 0; }
.sm-passkey-status.is-error { color: var(--sm-danger-fg); }

/* spec-account-ui-server-mediated-verification-add (Review-Runde 1, Fund 5): dieselbe
   Rolle wie .sm-passkey-status, fuer den fetch-Weg von "Telefonnummer hinzufuegen". */
.sm-phone-add-status {
  margin: 10px 0 0;
  font-size: var(--sm-fs-sm);
  line-height: 1.5;
  color: var(--sm-ink-700);
}
.sm-phone-add-status:empty { margin: 0; padding: 0; border: 0; }
.sm-phone-add-status.is-error { color: var(--sm-danger-fg); }