/* aussenseite.css — gemeinsame Optik der Aussenseiten ohne Layout: Mandantenwahl nach dem Login
   (static/login_select.html) und "Claude verbinden" (static/claude_verbinden.html). Nacharbeit Claude-Anbindung
   Teil 2 (Auftrag Milko 07.11.2026): bis dahin stand derselbe Block je Seite als Kopie im <style>; Werte 1:1
   uebernommen, Farben und Masse als Tokens --aussen-* in tokens.css (Aussehen unveraendert, Vergleich
   hilfsmittel/browser/aussenseiten_harness.py). Laden nach welcome_scene.css und tokens.css.
   Hier nur, was beide Seiten gleich haben: Grundschrift, Szene, Spalte (.login-overlay), Titel mit Claim,
   Glas-Karte, Zeilenflaeche und Sperrzustand der Tabelle, Mandantenzeile mit Kuerzel-Kreis, Pfeilspalte, Fuss und
   die Breitenstufen 420, 768 und 375 px. Seiteneigene Regeln (Spalten der Mandantenwahl, Meta-Zeile, Zustimmung
   mit Knoepfen) bleiben in der Seite. login.html hat weiter seinen eigenen Block (nicht Teil des Auftrags). */

/* Grundschrift und Fokusring dieser Seiten: --ink und --ring aus tokens.css gelten hier mit den Werten der
   Aussenseiten (so standen sie als :root-Ueberschreibung in jeder Seite) */
:root {
  --ink: var(--aussen-ink);
  --ring: var(--aussen-ring);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: Inter, system-ui, 'Segoe UI', sans-serif;
  color: var(--ink);
}

/* Szene (welcome_scene.js) als fester Hintergrund */
.scene-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Spalte ueber der Szene: Titel, Karte, Fuss */
.login-overlay {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: var(--aussen-oben);
  gap: var(--aussen-reihe);
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--aussen-titel-unten);
  user-select: none;
  width: 100%;
}

.titlebar .title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

.titlebar h1 {
  color: var(--aussen-titel-farbe);
  font-size: var(--aussen-titel-schrift);
  font-weight: 500;
  letter-spacing: .4px;
  margin: 0;
  line-height: 1;
  text-shadow: var(--aussen-titel-schatten);
}

.titlebar .claim {
  font-size: var(--aussen-claim-schrift);
  line-height: 1.2;
  color: var(--aussen-claim-farbe);
  letter-spacing: .2px;
  text-align: center;
  text-shadow: var(--aussen-claim-schatten);
}

/* Glas-Karte: breiter als login.html (dort min(420px, 90%)), weil die Mandanten-Tabelle mit den Spalten Mandant,
   Rolle, Letzter Login, Produkt und Pfeil bei 14px Grundschrift rund 520px Innenbreite braucht (Messung 2026-09-03);
   unter 768px die schmale Karte (Meta-Zeilen-Variante der Mandantenwahl). */
.glass {
  width: min(640px, 90%);
  border-radius: var(--radius-card);
  background: var(--aussen-karte-bg);
  box-shadow: var(--aussen-karte-schatten);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--aussen-karte-innen);
}

/* Mandanten-Tabelle: Grundgeruest aus .tbl-std, Klickbarkeit aus .klickbar (beide tokens.css). Zeilenflaeche
   WEISS ueber das Karten-Weiss-Token: die Glas-Karte ist halbtransparent, deshalb tragen die Zellen es selbst. */
.sel-table tbody td { background-color: var(--bg); }

/* Waehrend die Auswahl laeuft (aria-busy an der Tabelle): Zeilen sichtbar gesperrt */
.sel-table[aria-busy="true"] tbody tr { opacity: .6; }

.sel-mandant {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Kuerzel-Kreis vor dem Mandanten (Blau-Familie aus tokens.css) */
.sel-badge {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-blue-bg);
  color: var(--aussen-titel-farbe);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .5px;
}

.sel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-col-arrow { color: var(--ink-2); }
.sel-col-arrow svg { display: block; }

.footer {
  width: min(640px, 90%);
  text-align: left;
  color: var(--aussen-titel-farbe);
  font-size: .85rem;
  margin-top: var(--control-padding-y-sm);
  position: relative;
  text-shadow: var(--aussen-fuss-schatten);
}

@media (max-width: 420px) {
  .titlebar h1 { font-size: var(--aussen-titel-schrift-420); }
  .titlebar .claim { font-size: var(--aussen-claim-schrift-420); }
  .login-overlay { padding-top: var(--aussen-oben-420); }
}

@media (max-width: 768px) {
  .login-overlay {
    padding-top: var(--aussen-oben-768);
    padding-left: var(--aussen-seite-rand);
    padding-right: var(--aussen-seite-rand);
  }

  .glass {
    width: 100%;
    max-width: 380px;
    padding: var(--aussen-karte-innen-768);
  }

  /* Mobil ohne Kopfzeile (Tabellen-Spaltenregel Punkt 8) */
  .sel-table thead { display: none; }
}

@media (max-width: 375px) {
  .titlebar h1 { font-size: var(--aussen-titel-schrift-375); }
  .titlebar .claim { font-size: var(--aussen-claim-schrift-375); }
  .glass { padding: var(--aussen-karte-innen-375); }
  .footer { font-size: 0.75rem; }
}