/* ==========================================================================
   Anmeldeformular – Komponenten (nutzt Tokens aus base.css)
   ========================================================================== */

/* XP-Leiste als Fortschrittsanzeige */
.xp-bar {
  margin: 0 auto var(--space-8);
  max-width: 32rem;
}

.xp-bar__track {
  height: 14px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border-gold);
  overflow: hidden;
}

.xp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-border-gold) 0%, var(--c-border-gold-bright) 100%);
  transition: width var(--dur-medium) var(--ease-standard);
  width: 0%;
}

.xp-bar__label {
  display: block;
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Formular-Rahmen im WoW-Fenster-Stil */
.formular {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

@media (max-width: 640px) {
  .formular {
    padding: var(--space-4);
  }
}

.formular-step[hidden] {
  display: none;
}

.formular-step h2 {
  margin-bottom: var(--space-2);
}

.formular-step__hinweis {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-6);
}

.feld {
  margin-bottom: var(--space-6);
}

.feld label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-border-gold-bright);
  margin-bottom: var(--space-2);
}

.feld input[type="text"],
.feld textarea {
  width: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: 1rem;
}

.feld input[type="text"]:focus,
.feld textarea:focus {
  outline: 2px solid var(--c-border-gold-bright);
  outline-offset: 1px;
}

.feld__fehler {
  color: var(--q-orange);
  font-size: var(--fs-small);
  margin-top: var(--space-1);
}

/* Honeypot-Feld: fuer Menschen unsichtbar, fuer einfache Bots erreichbar */
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Auswahl-Karten (Fraktion, Rasse, Klasse, Rolle, Beruf) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.option-card {
  position: relative;
  display: block;
  cursor: pointer;
  background: var(--c-bg);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-gold-bright);
}

.option-card:has(input:checked) {
  border-color: var(--option-accent, var(--c-border-gold-bright));
  box-shadow: 0 0 0 2px var(--option-accent, var(--c-border-gold-bright)) inset;
  background: var(--c-bg-alt);
}

.option-card:has(input:focus-visible) {
  outline: 2px solid var(--c-border-gold-bright);
  outline-offset: 2px;
}

.option-card__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--option-accent, var(--c-text));
}

/* Klassen-Karten bekommen zusaetzlich zur farbigen Schrift eine dezente
   Farbfuellung in der Klassenfarbe (Nutzer-Feedback: "nicht nur die Namen
   in der Farbe"). Mischanteil bewusst niedrig gehalten, damit auch sehr
   helle Klassenfarben (Priester weiss, Schurke gelb) den eigenen farbigen
   Namenstext nicht unlesbar machen - die dunkle Grundflaeche bleibt
   dominant, nur der Farbton schimmert durch. */
.option-card--akzentfarbe {
  background: color-mix(in srgb, var(--option-accent) 12%, var(--c-bg));
  border-color: color-mix(in srgb, var(--option-accent) 40%, var(--c-border-gold));
}

.option-card--akzentfarbe:hover {
  background: color-mix(in srgb, var(--option-accent) 18%, var(--c-bg));
}

.option-card--akzentfarbe:has(input:checked) {
  background: color-mix(in srgb, var(--option-accent) 26%, var(--c-bg-alt));
}

.option-card__beta {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.7rem;
  color: var(--q-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Info-Karte im Tooltip-Stil */
.info-karte {
  margin-top: var(--space-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-small);
}

.info-karte__titel {
  font-family: var(--font-heading);
  color: var(--c-border-gold-bright);
  margin: 0 0 var(--space-2);
}

.info-karte__live {
  margin-top: var(--space-2);
  color: var(--q-blau);
  font-weight: 600;
}

.info-karte ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.2rem;
}

/* Charakter-Bloecke */
.char-block {
  border: 1px solid var(--c-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
}

.char-block__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.char-block__entfernen {
  background: none;
  border: none;
  color: var(--q-orange);
  cursor: pointer;
  font-size: var(--fs-small);
  text-decoration: underline;
}

/* Zeiten-Raster */
.zeitraster {
  display: grid;
  grid-template-columns: 3rem repeat(7, 1fr);
  gap: 2px;
  user-select: none;
  touch-action: none;
}

.zeitraster__kopf {
  font-size: var(--fs-small);
  text-align: center;
  color: var(--c-text-muted);
  padding: var(--space-1) 0;
}

.zeitraster__zeile-label {
  font-size: 0.7rem;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-1);
}

.zeitraster__zelle {
  height: 1.6rem;
  background: var(--c-bg);
  border: 1px solid var(--c-bg-alt);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.zeitraster__zelle.ist-aktiv {
  background: var(--c-border-gold);
  border-color: var(--c-border-gold-bright);
}

/* Chips (Mehrfachauswahl: Spielstil, Berufe) */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  cursor: pointer;
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip__label {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-border-gold);
  border-radius: 999px;
  font-size: var(--fs-small);
  transition: background var(--dur-fast) var(--ease-standard);
}

.chip:has(input:checked) .chip__label {
  background: var(--c-border-gold);
  color: #2a1c04;
}

.chip:has(input:focus-visible) .chip__label {
  outline: 2px solid var(--c-border-gold-bright);
  outline-offset: 2px;
}

/* Navigation zwischen Schritten */
.formular-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-8);
  gap: var(--space-3);
}

.btn--sekundaer {
  background: transparent;
  color: var(--c-border-gold-bright);
  border: 1px solid var(--c-border-gold);
  box-shadow: none;
}

.btn--sekundaer:hover {
  box-shadow: var(--shadow-glow-gold);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Level-Up-Abschluss */
.level-up {
  text-align: center;
}

.level-up__code {
  display: inline-block;
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  color: var(--c-border-gold-bright);
  background: var(--c-bg);
  border: 2px solid var(--c-border-gold-bright);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glow-gold);
}

.level-up__warnung {
  color: var(--q-orange);
  font-weight: 600;
}

.formular-fehler {
  background: rgba(255, 128, 0, 0.12);
  border: 1px solid var(--q-orange);
  color: var(--q-orange);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.formular-fehler[hidden] {
  display: none;
}

/* Mitgliederliste */
.mitglied-karte {
  background: var(--c-surface);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.mitglied-karte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.mitglied-karte__name {
  font-family: var(--font-heading);
  color: var(--c-border-gold-bright);
  margin: 0;
}

.mitglied-karte__fraktion {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.mitglied-karte ul {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.mitglied-karte__verwalten-toggle {
  background: none;
  border: none;
  color: var(--c-text-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--fs-small);
  padding: 0;
}

.mitglied-karte__verwalten {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-bg-alt);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.mitglied-karte__verwalten input {
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--fs-small);
  width: 8rem;
}

.mitglied-karte__meldung {
  font-size: var(--fs-small);
  width: 100%;
  margin: 0;
}

.mitglied-karte__meldung--ok {
  color: var(--q-gruen);
}

.mitglied-karte__meldung--fehler {
  color: var(--q-orange);
}