/* ============================================================================
 * profile.css — die Seitenkomponenten von profile.html
 * ----------------------------------------------------------------------------
 * ⚠️ DAS STAND BIS ZUM 29.08.2026 ALS <style>-BLOCK IN profile.html (#240).
 * Ein Inline-Block schlaegt jedes verlinkte Stilblatt (CLAUDE.md §10, Falle 3)
 * — die 44 Regeln waren damit fuer das Design-System unerreichbar, und wer
 * hier etwas aendern wollte, musste erst die HTML-Datei oeffnen.
 *
 * WAS HIER RICHTIG AUFGEHOBEN IST: der Profilkopf (Avatar mit Overlay,
 * Name, Meta-Zeile), das Passwort-Formular mit seinem Sichtbarkeits-Schalter
 * und die Sicherheits-Ampel. Alles Bausteine, die es nur auf dieser einen
 * Seite gibt — Schicht 3, kein Library-Fall.
 *
 * WAS NICHT MITGEKOMMEN IST (beim Umzug als tot gemessen):
 *   .empty-state  — die Klasse steht in keinem Markup dieser Seite mehr,
 *                   und die Library hat dafuer `tc-empty-state`.
 *   .danger-zone  — die Gefahrenzone ist seit #246 `tc-panel--danger`.
 *
 * Geladen NACH den Komponenten, damit die Seitenregeln wie bisher gewinnen.
 * ========================================================================== */

.profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background: var(--bg-card);
  border: 2px solid var(--color-blood);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-blood);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  border: 3px solid var(--color-gold);
  transition: transform 0.2s, box-shadow 0.2s;
}

.profile-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar Overlay mit Aktionen */
.profile-avatar:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}

.avatar-overlay-btn {
  padding: 6px 12px;
  background: rgba(212, 175, 55, 0.9);
  border: none;
  border-radius: 4px;
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.avatar-overlay-btn:hover {
  background: var(--color-gold);
}

/* Lightbox für Profilbild-Vergrößerung */

/* Das grosse Profilbild im Modal. Hiess bis #246 `profile-lightbox-img`
   — eine Lightbox gibt es seitdem nicht mehr, das Bild sitzt in einem
   tc-modal. Der Name blieb sonst der letzte Zeuge einer Komponente, die
   es nicht gibt. Die goldene Fassung bleibt: Sie ist der Grund, warum das
   Bild gross gezeigt wird. */
.profile-avatar-gross {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 60vh;
  border-radius: var(--tc-radius-lg, 12px);
  border: 4px solid var(--tc-highlight, #c9a959);
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
}

/* Loading Spinner Animation */
/* @keyframes spin stand hier — entfernt am 08.09.2026 (#536).
   Die identische Definition steht in css/mordheim-unified.css:129, und die liegt
   auf 40 von 45 Seiten; JEDE Seite, die DIESE Datei laedt, laedt sie auch
   (nachgemessen ueber die <link>-Zeilen aller HTML-Dateien). Die Klasse hier
   benutzt `animation: spin` unveraendert weiter.
   ⚠️ Wer diese Datei auf eine Seite OHNE mordheim-unified.css legt, muss den
   Keyframe wieder mitbringen — sonst dreht sich der Spinner nicht mehr, und
   zwar ohne Fehlermeldung. */

.profile-info {
  flex: 1;
}

.profile-info h1 {
  font-family: var(--font-gothic);
  color: var(--color-gold);
  font-size: 2rem;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile-info h1 .admin-badge {
  font-size: 0.7rem;
  padding: 4px 10px;
  background: var(--color-gold);
  color: #000;
  border-radius: 12px;
  /* ⚠️ HIER STAND `var(--font-primary)` — ein Token, das es NICHT GIBT
     (29.08.2026 beim Auslagern gemessen, #240). Eine ungueltige
     Deklaration faellt still auf Vererbung zurueck; die Marke trug also
     nie die vorgesehene Schrift, und im Quelltext sah es richtig aus
     (CLAUDE.md §9). Der Rueckfall im var() haelt die Regel gueltig,
     falls tokens.css einmal fehlt. */
  font-family: var(--tc-font-display, var(--font-display, serif));
}

.profile-info .full-name {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 15px;
}

.profile-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.profile-actions {
  display: flex;
  gap: 10px;
}

/* Tabs */

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Cards */

/* Form Styles */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
/* Password Toggle Button */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  flex: 1;
  padding-right: 50px;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.2s;
  user-select: none;
  z-index: 10;
  /* ⚠️ GEMESSEN 35px — einen Pixel unter Heuristik 5 (29.08.2026, #240).
     Aus 8px Polster und der Zeilenhoehe von 19,2px ergaben sich 35,2px. Das
     ist dieselbe Sorte Beinahe-Treffer wie das Inhaltsverzeichnis in
     guide.html (34,5px) — kein Fehler, den jemand meldet, aber am Daumen
     spuerbar, und ausgerechnet beim Passwort-Feld.
     inline-flex + zentrieren statt mehr Polster: Das Auge soll an seiner
     Stelle bleiben. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tc-touch-min, 36px);
  min-height: var(--tc-touch-min, 36px);
}

.password-toggle-btn:hover {
  color: var(--color-gold);
}

.forgot-password-hint {
  margin-top: 10px;
  padding: 10px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.forgot-password-hint a {
  color: var(--color-gold);
  text-decoration: none;
  font-weight: 600;
}

.forgot-password-hint a:hover {
  text-decoration: underline;
}

/* Game Systems */

/* Core System Cards (Rang-Flavor) */

/* Empty State */


/* Security Status */
.security-status {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.security-status.complete {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.security-status.incomplete {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.security-status .icon {
  font-size: 2.5rem;
}

.security-status.complete .icon {
  color: #4caf50;
}

.security-status.incomplete .icon {
  color: #ff9800;
}

.security-status .text h4 {
  margin: 0 0 5px;
  color: var(--text-primary);
}

.security-status .text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Password Requirements */
.password-requirements {
  background: var(--bg-secondary);
  padding: 15px;
  border-radius: var(--radius-md);
  margin-top: 15px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.password-requirements ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.password-requirements li {
  margin-bottom: 5px;
}

/* Danger Zone */

/* Responsive */
@media (max-width: 768px) {
  /* Der Kopf am Handy (#1082): Bild neben dem Namen statt darüber. Gestapelt
     und zentriert war er 472 px hoch — zwei Drittel des ersten Bildschirms,
     auf jedem der vier Reiter. */
  .profile-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: var(--tc-space-3) var(--tc-space-4);
    padding: var(--tc-space-4);
    margin-bottom: var(--tc-space-3);
  }
  .profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
    border-width: 2px;
  }
  /* Ohne Zeiger gibt es kein „darüberfahren": Der Tipp aufs Bild öffnet es
     (oder die Auswahl), die Schaltflächen im Bild blieben nach dem Tipp kleben. */
  .profile-avatar .avatar-overlay { display: none; }
  .profile-info h1 {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 1.45rem;
    line-height: 1.2;
  }
  .profile-info .full-name { margin-bottom: 6px; font-size: 0.9rem; }
  .profile-meta { gap: 2px 14px; }
  .profile-meta-item { font-size: 0.8rem; }
  .profile-actions { grid-column: 1 / -1; }
  .profile-actions .tc-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tc-touch-rec, 44px);
    padding: var(--tc-space-2) var(--tc-space-3);
    font-size: var(--tc-text-sm);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
 * TÜREN AM HANDY — der Reiter „Person" (#1082, 12.10.2026)
 * ----------------------------------------------------------------------------
 * Fünf Kästen untereinander waren am Handy knapp acht Bildschirme. Jeder liegt
 * jetzt hinter einer Tür mit Wort und Stand (`tc-bezirk-tuer`, panel.css;
 * TC.Tueren) — dieselben Türen wie am Dashboard, in den Hubs und auf der
 * Spielerseite.
 *
 * ⚠️ NUR MIT `data-tueren`. Das Attribut setzt TC.Tueren am Handy; ohne
 * Skript und am Schreibtisch steht alles offen da wie zuvor.
 *
 * Nichts wird im DOM verschoben: Der Seitenbehälter wird zur Flex-Spalte,
 * Türenreihe und Reiterinhalt lösen sich auf (`display: contents`), und
 * `order` stellt jeden Kasten hinter seine Tür (`--tc-tuer-platz` steht an
 * Tür und Kasten). Auf den anderen drei Reitern gibt es keine Türen.
 * ========================================================================== */
.konto-tueren { display: none; }

@media (max-width: 768px) {
  #profileContainer[data-tueren] {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-2);
  }
  #profileContainer[data-tueren] > .profile-header,
  #profileContainer[data-tueren] > .tc-tabs { margin-bottom: 0; }
  #profileContainer[data-tueren] > #tab-profile.active,
  #profileContainer[data-tueren]:has(> #tab-profile.active) > .konto-tueren { display: contents; }

  #profileContainer[data-tueren] .tc-bezirk-tuer,
  #profileContainer[data-tueren] .tc-panel[data-tuer] {
    order: var(--tc-tuer-platz);
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Die Tür trägt Zeichen und Titel des Kastens schon. */
  #profileContainer[data-tueren] .tc-panel[data-tuer] > .tc-panel__header { display: none; }
  #profileContainer[data-tueren] .konto-hinweis { order: 999; }
}


/* ============================================================================
 * DEINE SPIELERSEITE — die Sichtbarkeitsschalter (#323, 29.08.2026)
 * ----------------------------------------------------------------------------
 * Eine Liste aus Zeilen, nicht das Kachelraster der Spielsysteme: Dort waehlt
 * man aus gleichrangigen Dingen, hier schaltet man neun benannte Abschnitte
 * einzeln an und aus — und jeder braucht eine Zeile Erklaerung, was andere
 * dann nicht mehr sehen. Kacheln haetten dafuer keinen Platz.
 * ========================================================================== */
.sps-satz {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.sps-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sps-reihe {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  /* ⚠️ Die ganze Zeile ist die Trefferflaeche, nicht nur das Kaestchen.
     Ein 13px-Haken ist am Daumen nicht zu treffen (Heuristik 5); mit
     min-height traegt die Zeile das Mass. */
  min-height: var(--tc-touch-min, 36px);
  transition: background var(--tc-duration-fast, 120ms) ease;
}

.sps-reihe:hover { background: rgba(255, 255, 255, 0.03); }
.sps-reihe:focus-within {
  outline: 2px solid var(--tc-highlight);
  outline-offset: -2px;
}

/* ⚠️ Breite ausdruecklich setzen: mordheim-theme.css gibt JEDEM `input` ein
   `width: 100%` — eine frische Checkbox misst dort ueber 2000px (CLAUDE.md
   §10, Falle 6). Ohne diese Zeile schoebe der Haken die Beschriftung aus dem
   Kasten. */
.sps-schalter {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--color-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.sps-icon {
  font-size: 1rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.sps-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sps-titel {
  color: var(--text-primary, #e0e0e0);
  font-size: 0.9rem;
  font-weight: 600;
}

.sps-erklaerung {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Ein abgeschalteter Abschnitt soll man SEHEN, ohne ihn zu suchen. */
.sps-reihe:has(.sps-schalter:not(:checked)) .sps-titel,
.sps-reihe:has(.sps-schalter:not(:checked)) .sps-icon { opacity: 0.45; }

.sps-ansehen { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sps-reihe { transition-duration: 0.01ms; }
}