/* ============================================================================
   FLORIAN'S WACHE — style.css
   Comic-/Pop-Art-Design gemäß SPEC:
   - 3px schwarze Rahmen, harte Schatten (5px 5px 0 #111), border-radius 12px
   - Anthrazit-Hintergrund #23252b, Karten in #E30613 / #FFD300 / Weiß
   - Überschriften in 'Arial Black', Buttons mit Comic-Pop
   ========================================================================== */

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

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #23252b; /* dunkler Anthrazit-Hintergrund */
  color: #ffffff;
  min-height: 100vh;
}

h1, h2, h3, h4, .ueberschrift {
  font-family: 'Arial Black', Arial, sans-serif;
  letter-spacing: 0.5px;
}

/* ---------- Grundgerüst: Sidebar links, Inhalt rechts ---------- */
#app {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background-color: #E30613; /* Signalrot */
  border-right: 3px solid #111;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  z-index: 10;
}

#content {
  margin-left: 280px; /* Platz für die feste Sidebar */
  flex: 1;
  padding: 28px;
  max-width: 1150px;
}

/* ---------- Logo ---------- */
#logo {
  text-align: center;
}

/* v13: eigenes Logo-Bild ersetzt Hydranten-SVG-Badge + h1/p-Schriftzug
   (Schriftzug + Untertitel sind bereits im Bild enthalten). */
#logo-bild {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto;
}

/* ---------- Navigation (ANHANG v7.3: illustrierte Icon-Kacheln) ----------
   Struktur: auto-fit-Raster — in der 280-px-Sidebar 2 Kacheln pro Reihe,
   auf schmalen Viewports (Sidebar wird Zeile) automatisch mehr pro Reihe.
   Jede Kachel: Icon groß oben, Label klein darunter. */
#navigation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(106px, 1fr));
  gap: 12px;
}

.nav-btn {
  font-family: 'Arial Black', Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px 8px;
  background-color: #F8F9FA;
  color: #111111;
  border: 3px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 5px 5px 0px #1a1a1a;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.nav-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 5px 5px 0px #1a1a1a;
}

/* ---------- Spieler-Leiste (Sidebar unten) ---------- */
#spieler-leiste {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 12px;
  font-size: 13px;
}

#spieler-leiste:empty {
  display: none; /* vor der Charaktererstellung unsichtbar */
}

.sl-name {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 15px;
  margin-bottom: 2px;
}

.sl-zeile {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

.sl-zeile strong {
  font-weight: bold;
}

.sl-hinweis {
  margin-top: 6px;
  padding: 4px 6px;
  background-color: #FFD300;
  border: 2px solid #111;
  border-radius: 8px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

#sidebar-fussnote {
  font-size: 11px;
  color: #ffcccc;
  text-align: center;
  margin-top: auto;
}

/* ---------- Buttons (allgemein) ---------- */
.btn {
  display: inline-block;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px;
  padding: 10px 18px;
  background-color: #FFD300;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Comic-Pop: Schattenverschiebung bei Hover/Active */
.btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px #111;
}

.btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0px #111;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-rot {
  background-color: #E30613;
  color: #ffffff;
}

.btn-weiss {
  background-color: #ffffff;
  color: #111111;
}

.btn-klein {
  font-size: 12px;
  padding: 6px 12px;
  box-shadow: 3px 3px 0px #111;
}

.btn-klein:hover:not(:disabled) {
  box-shadow: 5px 5px 0px #111;
}

.btn-klein:active:not(:disabled) {
  box-shadow: 1px 1px 0px #111;
}

/* ---------- Karten ---------- */
.karte {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 18px;
  margin-bottom: 18px;
}

.karte-rot {
  background-color: #E30613;
  color: #ffffff;
}

.karte-gelb {
  background-color: #FFD300;
  color: #111111;
}

.karte h2, .karte h3 {
  margin-bottom: 10px;
}

.karte-rot h2, .karte-rot h3 {
  text-shadow: 2px 2px 0px #111;
}

.bereich-titel {
  font-size: 24px;
  margin-bottom: 4px;
}

.bereich-untertitel {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 18px;
  opacity: 0.9;
}

/* ---------- Badges & Labels ---------- */
.badge {
  display: inline-block;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 2px 8px;
  background-color: #FFD300;
  color: #111111;
  font-size: 12px;
  font-weight: bold;
  margin: 2px 4px 2px 0;
}

.badge-rot {
  background-color: #E30613;
  color: #ffffff;
}

.badge-weiss {
  background-color: #ffffff;
  color: #111111;
}

/* ---------- Fortschrittsbalken ---------- */
.balken {
  height: 22px;
  border: 3px solid #111;
  border-radius: 12px;
  background-color: #ffffff;
  overflow: hidden;
  margin: 6px 0;
}

.balken-fuellung {
  height: 100%;
  background-color: #E30613;
  transition: width 0.3s ease;
}

.balken-fuellung-gelb {
  background-color: #FFD300;
}

.balken-fuellung-gruen {
  background-color: #2e9e44;
}

.balken-label {
  font-size: 12px;
  font-weight: bold;
}

/* ---------- Formulare ---------- */
.eingabe {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 14px;
  border: 3px solid #111;
  border-radius: 12px;
  background-color: #ffffff;
  color: #111111;
  width: 100%;
  max-width: 340px;
}

.eingabe-klein {
  max-width: 120px;
  padding: 6px 10px;
}

select.eingabe {
  cursor: pointer;
}

.formular-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}

/* ---------- Grids ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

/* ---------- Klassen-Auswahl (Charaktererstellung) ---------- */
.klassen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 16px 0;
}

.klassenkarte {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease;
}

.klassenkarte:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px #111;
}

.klassenkarte.gewaehlt {
  background-color: #FFD300; /* gewählte Klasse = Warnwesten-Gelb */
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 8px 8px 0px #111;
}

.klassenkarte h3 {
  color: #E30613;
  margin-bottom: 4px;
}

.klassenkarte.gewaehlt h3 {
  color: #111111;
}

.klassenkarte .fokus {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.klassenkarte ul {
  list-style: none;
  font-size: 13px;
}

.klassenkarte ul li {
  padding: 2px 0;
}

/* ---------- Attribut-Tabelle (Profil) ---------- */
.attribut-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 2px dashed #111;
}

.attribut-zeile:last-child {
  border-bottom: none;
}

.attribut-name {
  flex: 0 0 170px;
  font-weight: bold;
}

.attribut-wert {
  flex: 1;
  font-family: 'Arial Black', Arial, sans-serif;
}

.attribut-wert .bonus {
  color: #2e9e44;
  font-size: 12px;
}

/* v15: Geld-Kauf-Button in der Attribut-Zeile — Preis in einer Zeile halten;
   disabled-Optik kommt vom globalen .btn:disabled, hier nur etwas gedimmt,
   damit „zu teuer" auf einen Blick von „kaufbar" unterscheidbar ist. */
.btn-attr-kauf {
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-attr-kauf:disabled {
  opacity: 0.55;
}

/* ---------- ANHANG v17a: Dienstgrad-Badge (Profil-Kopf) ---------- */
.badge-dienstgrad {
  background: linear-gradient(180deg, #ffd300 0%, #e6a800 100%);
  color: #111;
  border-color: #111;
}

/* ---------- ANHANG v17b: Spind — Favoriten-Stern & Verkaufs-UI ---------- */
.spind-item {
  position: relative; /* Anker für den Stern oben rechts */
}

.spind-fav-stern {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #8a8a8a;
  padding: 2px 4px;
}

.spind-fav-stern:hover {
  transform: scale(1.2);
}

.spind-fav-stern.aktiv {
  color: #e6a800;
  text-shadow: 0 0 6px rgba(255, 211, 0, 0.7);
}

.btn-verkauf {
  margin-top: 6px;
  white-space: nowrap;
}

.spind-verkauf-frage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.spind-fav-hinweis {
  margin-top: 6px;
  color: #a06a00;
  font-weight: bold;
}

/* ---------- ANHANG v18: Tagesdienst (Daily Quests) ---------- */
.karte-tagesdienst {
  border-color: #111;
}

.td-aufgabe {
  padding: 8px 0;
  border-bottom: 2px dashed #111;
}

.td-aufgabe:last-of-type {
  border-bottom: none;
}

.td-erledigt {
  opacity: 0.6;
}

.td-kopf,
.td-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.td-titel {
  font-weight: bold;
}

.td-balken {
  margin: 5px 0;
}

.td-haken {
  color: #2e9e44;
  font-weight: bold;
}

/* v18: Einsatzart-Badges auf den Einsatzkarten (Brand rot-orange / TH blau) */
.badge-einsatzart {
  color: #fff;
}

.badge-einsatzart-brand {
  background: #e8590c;
}

.badge-einsatzart-th {
  background: #1c6fb3;
}

/* Stufen-Badges: leicht grün, mittel gelb, schwer rot (Comic-Kontur wie überall) */
.badge-td-leicht {
  background: #2e9e44;
  color: #fff;
}

.badge-td-mittel {
  background: #ffd300;
  color: #111;
}

.badge-td-schwer {
  background: #d81f26;
  color: #fff;
}

/* ---------- ANHANG v9.1: dezente Erklärungszeile unter jedem Attributwert ----------
   Klein (0.8rem), muted (reduzierte Deckkraft), sauberer Abstand; sie steht
   direkt unter der .attribut-zeile und übernimmt deren Trennlinie, damit
   Wert und Erklärung optisch EIN Block bleiben. Reine Anzeige — keine Werte. */
.attribut-zeile:has(+ .attr-info) {
  border-bottom: none;
  padding-bottom: 1px;
}

.attr-info {
  font-size: 0.8rem;
  opacity: 0.68;
  line-height: 1.3;
  margin: 0 0 6px;
  padding: 0 2px 6px 182px; /* bündig unter dem Wert (Name 170px + Gap 10px + 2px) */
  border-bottom: 2px dashed #111;
}

.attr-info:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Schmale Screens: Einrückung reduzieren, damit die Zeile nicht bricht */
@media (max-width: 700px) {
  .attr-info {
    padding-left: 2px;
  }
}

/* ---------- Einsatz-Bericht / Kampflog ---------- */
.bericht {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 16px;
  margin-bottom: 18px;
}

.bericht h3 {
  margin-bottom: 8px;
}

.bericht-erfolg {
  background-color: #FFD300;
}

.bericht-fehlschlag {
  background-color: #E30613;
  color: #ffffff;
}

.bericht-fehlschlag h3 {
  text-shadow: 2px 2px 0px #111;
}

.kampflog {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 14px;
  font-size: 14px;
  max-height: 420px;
  overflow-y: auto;
}

.kampflog p {
  padding: 5px 8px;
  border-bottom: 2px dashed #cccccc;
}

.kampflog p:last-child {
  border-bottom: none;
}

.kampflog .log-runde {
  font-family: 'Arial Black', Arial, sans-serif;
  background-color: #FFD300;
  border: 2px solid #111;
  border-radius: 8px;
  margin-top: 6px;
}

.kampflog .log-crit {
  color: #E30613;
  font-weight: bold;
}

.kampflog .log-ausweich {
  color: #2e6fd8;
  font-weight: bold;
}

.kampflog .log-ergebnis {
  font-family: 'Arial Black', Arial, sans-serif;
  background-color: #E30613;
  color: #ffffff;
  border: 2px solid #111;
  border-radius: 8px;
  text-shadow: 1px 1px 0px #111;
}

/* ---------- Rangliste ---------- */
.rangliste {
  list-style: none;
  font-size: 14px;
}

.rangliste li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid #111;
  border-radius: 8px;
  margin-bottom: 6px;
  background-color: #ffffff;
  font-weight: bold;
}

.rangliste li.ich {
  background-color: #FFD300;
  transform: rotate(-1deg);
}

/* ---------- Item-Karten (Shop/Inventar) ---------- */
.item-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-karte .item-slot {
  align-self: flex-start;
}

.item-karte .item-preis {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 18px;
  color: #E30613;
}

.item-karte .item-boni {
  font-size: 13px;
  font-weight: bold;
}

.item-karte .item-beschreibung {
  font-size: 13px;
  font-style: italic;
}

/* ---------- Slot-Übersicht (Ausrüstung) ---------- */
.slot-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 2px dashed #111;
}

.slot-zeile:last-child {
  border-bottom: none;
}

.slot-name {
  flex: 0 0 100px;
  font-weight: bold;
}

/* ---------- Meldungen (Toasts) ---------- */
#meldung-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.meldung {
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 14px;
  background-color: #ffffff;
  color: #111111;
  animation: reinploppen 0.25s ease-out;
}

.meldung-erfolg {
  background-color: #FFD300;
  color: #111111;
}

.meldung-fehler {
  background-color: #E30613;
  color: #ffffff;
}

.meldung-info {
  background-color: #ffffff;
  color: #111111;
}

@keyframes reinploppen {
  from {
    transform: scale(0.6) rotate(-3deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---------- Hinweis-Boxen ---------- */
.hinweis {
  background-color: #FFD300;
  color: #111111;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 18px;
}

.hinweis-sperrung {
  background-color: #E30613;
  color: #ffffff;
}

/* ---------- ANHANG v9.2: Endzeit-Anzeige im Trainingslager (Europe/Berlin) ----------
   Fügt sich in die Karten-/Typo-Sprache der TL-Ansicht ein: Comic-Rahmen
   (gestrichelt = „Termin im Kalender"), kräftige Zeile, weiße Fläche —
   funktioniert auf der gelben Laufzeit-Karte und der weißen Auswahl-Karte. */
.tl-endzeit {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 10px 0 0;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 2px dashed #111;
  border-radius: 10px;
}

/* Leere Container (noch nicht befüllt) bleiben unsichtbar */
.tl-endzeit:empty {
  display: none;
}

/* Auswahl-Vorschau bei der Dauer-Wahl: gleiche Zeile, etwas dezenter */
.tl-vorschau {
  opacity: 0.85;
  font-weight: normal;
  font-style: italic;
}

.text-klein {
  font-size: 12px;
}

.text-zentriert {
  text-align: center;
}

.abstand-oben {
  margin-top: 12px;
}

/* ---------- Responsive: schmale Bildschirme ---------- */
@media (max-width: 900px) {
  #app {
    flex-direction: column;
  }

  #sidebar {
    position: static;
    width: auto;
    border-right: none;
    border-bottom: 3px solid #111;
  }

  #content {
    margin-left: 0;
    padding: 16px;
  }
}

/* ============================================================================
   v2-ERWEITERUNGEN (SPEC §0/§3a): Flow-Masken, gesperrte Buttons,
   Einsatz-Countdown, Einsatzbericht-Modal — alles im bestehenden Comic-Stil
   ========================================================================== */

/* ---------- Vorgelagerter Flow (Registrierung/Login/Charaktererstellung) ----------
   Solange der Flow läuft, ist die Sidebar komplett ausgeblendet —
   Hauptspiel gibt es erst NACH abgeschlossenem Flow (SPEC §0). */
#app.flow-aktiv #sidebar {
  display: none;
}

#app.flow-aktiv #content {
  margin: 0 auto; /* zentrierte Maske ohne Sidebar */
  max-width: 780px;
  width: 100%;
}

/* Formular-Felder der Masken (Label über Eingabefeld) */
.formular-feld {
  margin-bottom: 14px;
}

.formular-feld label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inline-Fehlermeldung auf den Masken (Comic-Stil: rot & fett) */
.maske-fehler {
  min-height: 20px;
  margin: 6px 0 12px 0;
  font-weight: bold;
  font-size: 14px;
  color: #E30613;
}

/* ---------- Gesperrte Sidebar-Buttons (Einsatzfahrt, v3 SPEC §3a) ----------
   Während der Einsatzfahrt sind nur Wettkampf & Trainingslager gesperrt —
   sie bekommen zusätzlich ein kleines Hinweis-Badge. */
.nav-btn.gesperrt {
  opacity: 0.6;
  filter: grayscale(0.9) saturate(0.45); /* v7.3: entsättigt */
  cursor: not-allowed;
  transform: none;
  box-shadow: 5px 5px 0px #1a1a1a;
  padding-bottom: 18px; /* Platz für das Badge-Band unten */
}

.nav-btn.gesperrt:hover {
  transform: none; /* kein Anheben/Kippen, wenn gesperrt */
  box-shadow: 5px 5px 0px #1a1a1a;
}

/* Hinweis-Badge am gesperrten Button (Cooldown-Info „Einsatzfahrt läuft“):
   kleines Band mittig am unteren Kachelrand (Kachel-Layout, v7.3) */
.nav-btn.gesperrt::after {
  content: '🚒 Einsatzfahrt';
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 1px 6px;
  background-color: #D62828;
  color: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 8.5px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 2;
}

/* Deaktivierte Aktions-Buttons wirken ebenfalls „ausgegraut“ */
.btn:disabled {
  filter: grayscale(0.6);
}

/* Hinweis in der Spieler-Leiste während eines Einsatzes (rot statt gelb) */
.sl-hinweis-einsatz {
  background-color: #E30613;
  color: #ffffff;
}

/* ---------- Einsatz-Countdown (SPEC §3a) ---------- */
.countdown-karte {
  max-width: 620px;
}

.einsatz-timer {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 32px;
  text-align: center;
  margin: 12px 0 6px 0;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
}

/* ---------- Einsatzbericht-Modal (SPEC §3a) ---------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 17, 17, 0.7); /* abgedunkelte Bühne */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal {
  max-width: 540px;
  width: 100%;
  margin-bottom: 0; /* im Modal kein Karten-Abstand nach unten */
  /* v24: Höhenbegrenzung + eigenes Scrollen — so bleibt der Schließen-Knopf
     IMMER erreichbar, egal wie viel Inhalt ein Fenster hat. */
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  animation: reinploppen 0.25s ease-out; /* wie die Toasts: reinploppen */
}

.modal .bereich-titel {
  font-size: 20px;
}

/* ============================================================================
   v4-ERWEITERUNGEN (SPEC §1b/§3c/§4b/§5): Comic-Porträts, Wettkampf-Cooldown,
   Shop-Rotation, Item-Icons, Einsatzfahrt-Szenerien — alles im Comic-Stil
   ========================================================================== */

/* ---------- Comic-Porträts (v4, SPEC §1b) ---------- */

/* Editor in der Charaktererstellung: Pfeil-Buttons ◀ ▶ + große Vorschau */
.portrait-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
}

.portrait-pfeil {
  font-size: 22px;
  padding: 12px 18px;
  flex: 0 0 auto;
}

.portrait-vorschau {
  text-align: center;
}

/* Rahmen um jedes Porträt-SVG (Comic-Rahmen mit hartem Schatten) */
.portrait-rahmen {
  display: inline-block;
  background-color: #ffffff;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  overflow: hidden;
  line-height: 0; /* kein Inline-Gap unter dem SVG */
}

.portrait-rahmen svg {
  display: block;
  width: 100%;
  height: 100%;
}

.portrait-gross {
  width: 190px;
  height: 190px;
}

.portrait-kampf {
  width: 130px;
  height: 130px;
}

.portrait-name {
  margin-top: 8px;
  font-size: 15px;
}

/* Porträt-Karte im Profil-Dashboard (prominent, SVG links + Text rechts) */
.portrait-profil {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.portrait-profil-text {
  flex: 1;
  min-width: 220px;
}

/* VS-Aufstellung im Wettkampf: Spieler-Porträt vs. KI-Porträt */
.kampf-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 10px 0 14px 0;
}

.kampf-seite {
  text-align: center;
}

.kampf-vs-zeichen {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 34px;
  color: #E30613;
  text-shadow: 3px 3px 0px #111;
  transform: rotate(-6deg);
  align-self: center;
}

/* ---------- Wettkampf-Cooldown & Freikauf (v4, SPEC §4b) ---------- */
.wk-countdown {
  font-family: 'Arial Black', Arial, sans-serif;
  color: #E30613;
  font-size: 1.15em;
}

.freikauf-box {
  border: 3px dashed #111;
  border-radius: 12px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}

/* Erklärzeile unter dem Freikauf-Button: Abstand, damit der harte
   Button-Schatten (box-shadow) den Text nicht verdeckt. */
.freikauf-box .text-klein {
  margin-top: 8px;
}

/* ---------- Item-Icons (v4, SPEC §5b) ---------- */
.item-icon {
  align-self: flex-start;
  width: 58px;
  height: 58px;
  background-color: #ffffff;
  border: 3px solid #111;
  border-radius: 10px;
  box-shadow: 3px 3px 0px #111;
  line-height: 0;
}

.item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Icon in den Slot-Zeilen (Profil & Shop-Ausrüstungsübersicht) */
.slot-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  line-height: 0;
}

.slot-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border: 2px solid #111;
  border-radius: 8px;
  background-color: #ffffff;
}

/* Reroll-Aktionszeile im Shop (SPEC §5c) */
.shop-aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ---------- Einsatzfahrt-Szenerien (v4, SPEC §3c) ---------- */

/* Karten-Grundgerüst: Szenerie absolut dahinter, Inhalt eine Ebene darüber */
.szene-karte {
  position: relative;
  overflow: hidden;
}

.szene-hintergrund {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Klicks gehören dem Inhalt */
}

.szene-inhalt {
  position: relative;
  z-index: 2; /* Countdown & Balken bleiben lesbar ÜBER der Szenerie */
}

/* --- KURZ: Katze auf Baum (rechts unten angedockt, dezent transparent) --- */
.szene-katze-bg svg {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 40%;
  max-width: 230px;
  height: auto;
  opacity: 0.5; /* witzig sichtbar, Countdown darüber bleibt klar lesbar (v7.6) */
}

/* --- MITTEL (v15): fahrendes Löschfahrzeug statt Karten-Blinken ----------
   Das frühere hektische Blaulicht-Pulsieren der GESAMTEN Karte
   (@keyframes blaulichtPuls + .szene-blaulicht) ist ENTFERNT — stattdessen
   gibt es wie bei kurz/lang eine bildliche Hintergrund-Animation:
   ein Comic-Löschfahrzeug (SZENE_FAHRT_AUTO, icons.js) fährt wiederholt
   über die Karte, wippt leicht und blinkt NUR am eigenen Blaulichtbalken;
   unten zieht eine Straße mit Mittelstreifen vorbei. */
@keyframes fahrtFahren {
  from { left: -32%; }
  to { left: 108%; }
}

@keyframes fahrtWippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes fahrtBlaulichtBlinken {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

@keyframes strasseZiehen {
  from { background-position-x: 0; }
  to { background-position-x: -64px; }
}

.szene-fahrt-auto {
  position: absolute;
  bottom: 7%;
  width: 200px;
  max-width: 42%;
  opacity: 0.55; /* wie Katze/Rauch: sichtbar, aber Countdown bleibt klar lesbar */
  animation: fahrtFahren 9s linear infinite;
}

.szene-fahrt-auto svg {
  width: 100%;
  height: auto;
  display: block;
  animation: fahrtWippen 0.5s ease-in-out infinite; /* leichtes Fahrbahn-Wippen */
}

.fahrt-blaulicht {
  animation: fahrtBlaulichtBlinken 0.55s steps(1, end) infinite;
}

.fahrt-blaulicht-2 {
  animation-delay: 0.28s; /* Wechselblinken der beiden Balken */
}

.szene-fahrt-strasse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  opacity: 0.35;
  background-color: #4a4f57;
  /* Mittelstreifen: 34px Strich + 30px Lücke, wandert per Animation nach links */
  background-image: repeating-linear-gradient(90deg, #f5f0e0 0 34px, transparent 34px 64px);
  background-size: 64px 4px;
  background-position: 0 3px;
  background-repeat: repeat-x;
  animation: strasseZiehen 0.8s linear infinite;
}

/* --- LANG: Comic-Rauchwolken driften langsam über die Karte --- */
@keyframes rauchZiehen {
  from { left: -38%; }
  to { left: 108%; }
}

.rauch-wolke {
  position: absolute;
  line-height: 0;
  opacity: 0.5; /* dicke Wolke, aber der Text bleibt lesbar */
  animation-name: rauchZiehen;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.rauch-wolke svg {
  width: 100%;
  height: auto;
  display: block;
}

.rauch-wolke-1 {
  top: 6%;
  width: 240px;
  animation-duration: 17s;
}

.rauch-wolke-2 {
  top: 42%;
  width: 320px;
  animation-duration: 24s;
  animation-delay: -9s; /* versetzter Start: Wolken wirken „schon unterwegs" */
}

.rauch-wolke-3 {
  top: 70%;
  width: 190px;
  animation-duration: 13s;
  animation-delay: -4s;
}


/* ============================================================================
   v5-ERWEITERUNGEN (SPEC §8): FEUERWEHR-DESIGN FÜR DASHBOARD & BUTTONS
   Der bestehende Comic-Look (3-px-Rahmen, harte Schatten, #E30613/#FFD300)
   wird Richtung Schlauch/Hydrant weiterentwickelt — alles reines CSS +
   Inline-SVGs aus index.html/game.js (keine externen Assets, keine Fonts,
   keine url()-Referenzen → file://-Offline-Betrieb bleibt gewahrt).
   Alle bisherigen Klassen bleiben erhalten; v5-Regeln stehen NACH den alten
   Blöcken und überlagern sie gezielt per Kaskade.
   ========================================================================== */

/* ---------- 8.1 Sidebar im Hydranten-Look (SPEC §8) ----------
   Sattes Hydrantenrot (Verlauf wie lackiertes Metall), feine Längs-Riffelung
   wie geripptes Hydranten-Gehäuse, Messing-/Gold-Akzente. */
#sidebar {
  background-color: #c00510;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 10px, rgba(17, 17, 17, 0.06) 10px 20px),
    linear-gradient(180deg, #e30a18 0%, #c00510 45%, #8f030c 100%);
}

/* Kupplungsstöße als Trennlinien zwischen den Sidebar-Blöcken:
   Messing-/Stahl-Segmente im Wechsel, wie eine Kupplungsleiste. */
#navigation,
#spieler-leiste,
#sidebar-manometer,
#sidebar-fussnote {
  position: relative;
}

#navigation::before,
#spieler-leiste::before,
#sidebar-manometer::before,
#sidebar-fussnote::before {
  content: '';
  position: absolute;
  top: -15px; /* sitzt genau in der 16-px-Flex-Lücke über dem Block */
  left: -6px;
  right: -6px;
  height: 10px;
  border: 2.5px solid #111;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #e8c34a 0 14px, #3a3a44 14px 28px);
  box-shadow: 2px 2px 0px #111;
}

/* Logo-Plakette (Messing-Look) entfiel mit v13 — das neue #logo-bild
   bringt sein eigenes, bereits fertig gestaltetes Design mit. */

/* Spieler-Karte: Messing-Rahmen um die weiße Comic-Karte */
#spieler-leiste {
  border: 3px solid #111;
  box-shadow: 0 0 0 3px #c8a23c, 5px 5px 0px #111;
}

#sidebar-fussnote {
  color: #ffe1c4; /* auf dem dunkleren Hydrantenrot weiterhin gut lesbar */
}

/* Druckanzeige-Detail im Sidebar-Fuß (SPEC §8) */
#sidebar-manometer {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(17, 17, 17, 0.28);
  border: 3px solid #111;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 3px 3px 0px #111;
}

#sidebar-manometer svg {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
}

#sidebar-manometer-text {
  color: #FFD300;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

/* ---------- 8.2 Nav-Kacheln: v7.3-Skin + Animationen (rein CSS) ----------
   Illustrierte Icon-Kacheln (v7.3): großes Icon in heller App-Kachel, Label
   klein darunter. Zustände:
   - Hover:  anheben + leichtes Kippen + einmal durchlaufender Glanz-Streifen
   - Klick (:active): eindrücken (Schatten + Versatz schrumpfen)
   - .aktiv: gelber Leuchtring + dauerhaft eingedrückt
   - .gesperrt/:disabled: entsättigt (Graufilter), kein Glanz/Hover-Pop */
.nav-btn {
  background-color: #F8F9FA;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 rgba(26, 26, 26, 0.14), 5px 5px 0px #1a1a1a;
}

/* Glanz-Streifen (läuft bei Hover einmal diagonal über die Kachel) */
.nav-btn::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -90%;
  width: 55%;
  height: 150%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-16deg);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.nav-btn:hover {
  transform: translateY(-3px) rotate(-1.5deg); /* anheben + leichtes Kippen */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 rgba(26, 26, 26, 0.14), 7px 9px 0px #1a1a1a;
}

.nav-btn:hover::before {
  left: 130%; /* Glanz läuft über die Kachel */
}

.nav-btn:active {
  transform: translate(2px, 2px); /* eindrücken */
  box-shadow: inset 0 3px 6px rgba(26, 26, 26, 0.25), 2px 2px 0px #1a1a1a;
}

/* Icon-Kachel: das illustrierte v7.1-SVG in hellem, gerundetem Feld */
.nav-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 15px;
  box-shadow: inset 0 -4px 0 rgba(26, 26, 26, 0.10), 3px 3px 0px rgba(26, 26, 26, 0.85);
}

.nav-icon svg {
  width: 42px;
  height: 42px;
  display: block;
}

/* Reiter-Beschriftung UNTER dem Icon: gut sichtbar, bruchsicher */
.nav-text {
  display: block;
  width: 100%;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.2px;
  color: #111111;
  overflow-wrap: break-word;
  hyphens: manual;          /* bricht nur an ­-Stellen (z. B. „Trainings­lager") */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Schmale Screens: Beschriftung kleiner, damit lange Wörter einzeilig passen */
@media (max-width: 480px) {
  .nav-text {
    font-size: 10.5px;
    letter-spacing: 0;
  }
}

/* AKTIV: gelber Leuchtring + eingedrückt (gewinnt per Kaskade über :hover) */
.nav-btn.aktiv {
  background-color: #FFF3C4;
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 3px #FFC300, 0 0 18px 4px rgba(255, 195, 0, 0.75), inset 0 3px 6px rgba(26, 26, 26, 0.22), 2px 2px 0px #1a1a1a;
}

.nav-btn.aktiv .nav-icon {
  background: #FFF8E1;
  box-shadow: 0 0 8px 2px rgba(255, 195, 0, 0.8), inset 0 -4px 0 rgba(26, 26, 26, 0.10);
}

/* GESPERRT/DEAKTIVIERT: entsättigt, ohne Glanz-Streifen */
.nav-btn:disabled,
.nav-btn.gesperrt {
  filter: grayscale(0.9) saturate(0.45);
  opacity: 0.6;
  box-shadow: 5px 5px 0px #1a1a1a;
}

.nav-btn.gesperrt::before,
.nav-btn:disabled::before {
  display: none;
}

/* ---------- 8.3 Primär-Buttons: Hydrantenrot + Wasserdruck (SPEC §8) ----------
   .btn-rot bekommt einen Messing-Kupplungsring (::before) und einen
   Glanzstreifen (::after); Hover/Active = „Wasserdruck" (Schatten fährt ein,
   gelber Glanz steigt). */
.btn-rot {
  position: relative;
  padding-left: 38px; /* Platz für den Kupplungsring */
  background-color: #E30613;
  background-image: linear-gradient(180deg, #f5233a 0%, #E30613 55%, #b00410 100%);
  box-shadow: 5px 5px 0px #111;
}

/* Kupplungsring links im Button */
.btn-rot::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid #FFD300;
  background: radial-gradient(circle at 40% 35%, #e8ecf0 0%, #9aa0a8 75%);
  box-shadow: 0 0 0 2px #111;
}

/* Statischer Glanzstreifen oben — der „nasse" Hydranten-Look */
.btn-rot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 8px;
  right: 8px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* WASSERDRUCK bei Hover: Schatten fährt ein, gelber Glanz steigt */
.btn-rot:hover:not(:disabled) {
  transform: translate(1px, 1px);
  background-image: linear-gradient(180deg, #ff3b4f 0%, #f01624 55%, #c00510 100%);
  box-shadow: 3px 3px 0px #111, inset 0 0 16px rgba(255, 211, 0, 0.5);
}

.btn-rot:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0px #111, inset 0 4px 10px rgba(17, 17, 17, 0.45), inset 0 0 0 2px #FFD300;
}

/* ---------- 8.4 Fortschrittsbalken als Schlauchleitung (SPEC §8) ----------
   Dunkler Gummischlauch, Füllung = fließendes Wasser (animierte Wellen),
   rechtes Ende = Messing-Kupplungsstück. Gilt für Energie/XP/Einsatzfahrt/TL —
   die Farbvarianten (-gelb, -gruen) bleiben erhalten, bekommen aber denselben
   Fließ-Mechanismus. */
.balken {
  position: relative;
  background-color: #17191d;
  background-image: linear-gradient(180deg, #23262c 0%, #17191d 50%, #0f1114 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65), 3px 3px 0px #111;
}

/* Kupplungsstück am rechten Ende der Leitung (Messing, geriffelt) */
.balken::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(180deg, #e8c34a 0 3px, #9c7a1e 3px 6px);
  border-left: 2px solid #111;
}

/* Fließendes Wasser: Wellen-Streifen rauschen per CSS-Animation durchs Rohr */
.balken-fuellung {
  background-color: #1e90d8;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 6px, rgba(255, 255, 255, 0) 6px 16px),
    linear-gradient(180deg, #8fd8ff 0%, #2fa8e0 45%, #0f6fb8 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(17, 17, 17, 0.3);
  animation: wasserFluss 0.9s linear infinite;
  transition: width 0.3s ease;
}

/* XP-Balken: goldenes „Löschwasser" (Warnwesten-Gelb) — gleiche Fließ-Mechanik */
.balken-fuellung-gelb {
  background-color: #FFD300;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.6) 0 6px, rgba(255, 255, 255, 0) 6px 16px),
    linear-gradient(180deg, #ffe98a 0%, #FFD300 45%, #d8a800 100%);
}

/* Einsatzfahrt-/TL-Balken: grünes „Löschwasser" — gleiche Fließ-Mechanik */
.balken-fuellung-gruen {
  background-color: #2e9e44;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 6px, rgba(255, 255, 255, 0) 6px 16px),
    linear-gradient(180deg, #a8e6b8 0%, #3fbf5f 45%, #1e7a38 100%);
}

/* Wellen-Keyfram: eine Streifen-Periode (16 px) weiter → nahtlose Schleife */
@keyframes wasserFluss {
  from { background-position: 0 0, 0 0; }
  to { background-position: 16px 0, 0 0; }
}

/* ---------- 8.5 Überschriften & Karten (SPEC §8) ----------
   Gewellter Schlauchlinien-Unterstrich (reines CSS, kein SVG nötig) +
   kleines Flammen-Emblem in der Ecke der roten Titel-Karten. */
.bereich-titel,
.ueberschrift {
  text-decoration: underline; /* Fallback für sehr alte Browser */
  text-decoration: underline wavy #FFD300;
  text-decoration-thickness: 2px;
  /* Deutlich UNTER die Textzeile gelegt: Die Wellen-Scheitel bleiben unterhalb
     der Unterlängen (g, p, y …) — der Titel wirkt nicht mehr „durchgestrichen".
     em-basiert, damit der Abstand bei allen Titel-Größen (24/20/18 px) passt. */
  text-underline-offset: 0.45em;
}

.karte {
  position: relative; /* Anker für das Eck-Emblem */
}

/* Kleines Flammen-Emblem oben rechts auf den roten Titel-Karten */
.karte-rot::after {
  content: '🔥';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(2px 2px 0px #111);
  pointer-events: none;
}

/* Titel rückt vom Emblem ab (Lesbarkeit hat Vorrang) */
.karte-rot .bereich-titel {
  padding-right: 44px;
}

/* ---------- 8.6 Profil: Porträt-Rahmen & Manometer (SPEC §8, ANHANG v7.4) ----------
   v7.4: Das schwarze Gitter-Overlay („Fahrzeugfenster") ist vollständig
   ENTFERNT — klares Porträt mit schlichtem modernem Rahmen (dünnes Rot +
   Comic-Schatten). Kampfwerte-Kacheln = verfeinerte runde Manometer. */
.portrait-modern {
  outline: 3px solid #D62828; /* dünner roter Fassungs-Ring */
  outline-offset: 3px;
  box-shadow: 7px 7px 0px #1a1a1a; /* Comic-Schatten */
  margin: 10px; /* Platz für Ring + Schatten im Flex-Layout */
  position: relative;
}

/* Manometer-Kacheln: runde Instrumente — Messing-Ring, feine Strich-Skala
   (repeating-conic), feiner Zeiger mit Drehpunkt im Zentrum (v7.4) */
.manometer-karte .attribut-zeile {
  border-bottom: none;
  padding: 9px 0;
}

.manometer-karte .attribut-wert {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.15;
  padding: 38px 5px 6px; /* Wert sitzt ruhig UNTER dem Zeiger-Drehpunkt */
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #B08945, inset 0 -6px 10px rgba(26, 26, 26, 0.10), 3px 3px 0px #1a1a1a;
  position: relative;
  /* saubere Skala: feine Striche nur im äußeren Ring, Mitte bleibt frei */
  background-image:
    radial-gradient(circle at 50% 50%, #F8F9FA 0 58%, rgba(248, 249, 250, 0) 59%),
    repeating-conic-gradient(from 0deg, rgba(26, 26, 26, 0.5) 0deg 1.6deg, rgba(26, 26, 26, 0) 1.6deg 30deg),
    radial-gradient(circle at 50% 42%, #ffffff 0%, #eef1f4 60%, #cfd4da 100%);
}

/* Feiner roter Zeiger (leicht nach rechts geneigt, wie ein echter
   Instrumentenzeiger mit Drehpunkt in der Zifferblatt-Mitte) */
.manometer-karte .attribut-wert::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2.5px;
  height: 14px;
  background-color: #D62828;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  transform: translateX(-50%) rotate(38deg);
  transform-origin: 50% 33px; /* Drehpunkt = Zentrum (6 px + 33 px = 39 px) */
}

/* Kleine Messing-Nabe als Zeiger-Lager */
.manometer-karte .attribut-wert::after {
  content: '';
  position: absolute;
  top: 39px;
  left: 50%;
  width: 7px;
  height: 7px;
  background-color: #B08945;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- 8.7 Responsive-Feinschliff (v5) ----------
   Das bestehende mobile Verhalten (max-width: 900px) bleibt erhalten;
   hier nur v5-spezifische Nachjustierungen. */
@media (max-width: 900px) {
  .nav-btn {
    font-size: 14px;
    padding: 10px 12px;
  }

  .manometer-karte .attribut-wert {
    width: 66px;
    height: 66px;
    font-size: 11px;
  }

  /* Kupplungsstoß-Trennlinien nicht über den Sidebar-Rand hinaus */
  #navigation::before,
  #spieler-leiste::before,
  #sidebar-manometer::before,
  #sidebar-fussnote::before {
    left: 0;
    right: 0;
  }

  .karte-rot .bereich-titel {
    padding-right: 38px;
  }
}

/* ============================================================================
   v6-ERWEITERUNGEN (SPEC §0b/§0c/§11/§12): Avatar-Baukasten-Editor,
   Fahrzeughalle mit Leasing-Karten, Fahrzeug-Boost-Badges, DSGVO-Footer,
   Ranglisten-Avatare — alles im bestehenden Feuerwehr-/Hydranten-Design
   (dicke schwarze Konturen, harte Schatten, Cell-Shading, Comic-Stil).
   ========================================================================== */

/* ---------- 9.1 Avatar-Baukasten-Editor (SPEC §0c) ---------- */

/* Gesamtlayout: Live-Vorschau links, Kategorie-Steuerung rechts */
.avatar-editor {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 12px 0;
}

.avatar-vorschau-karte {
  flex: 0 0 auto;
  text-align: center;
}

/* Live-Vorschau-Rahmen: wie die Porträt-Rahmen (Comic-Rahmen + harter Schatten) */
.avatar-vorschau {
  width: 190px;
  height: 190px;
  background-color: #ffffff;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  overflow: hidden;
  line-height: 0;
}

.avatar-vorschau svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Avatar-SVGs skalieren immer auf ihren Container (Rahmen bestimmt die Größe) */
.avatar-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Rahmen-Utility für Avatare außerhalb des Editors (Rangliste, Wache) */
.avatar-rahmen {
  background-color: #ffe9c8;
}

.avatar-kategorien {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Eine Kategorie-Zeile: Titel + ◀ Wert ▶ */
.avatar-kat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background-color: rgba(17, 17, 17, 0.06);
  border: 2.5px solid #111;
  border-radius: 10px;
  padding: 8px 12px;
}

.avatar-kat-titel {
  font-weight: bold;
  font-size: 14px;
  min-width: 92px;
}

.avatar-kat-steuerung {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-kat-wert {
  min-width: 150px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background-color: #ffffff;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 5px 10px;
}

/* Pfeil-Buttons ◀ ▶: klein, gelb, mit hartem Schatten */
.avatar-pfeil {
  font-size: 14px;
  padding: 6px 12px;
  line-height: 1;
}

/* Gesperrte Kategorie (Bart bei Geschlecht „frau“): ausgegraut + Hinweis */
.avatar-kat-gesperrt {
  opacity: 0.45;
  filter: grayscale(0.9);
}

.avatar-kat-sperrtext {
  flex-basis: 100%;
  margin: 2px 0 0 0;
  font-size: 12px;
  font-style: italic;
}

/* Haarfarben-Swatches (6 Server-Farben) */
.avatar-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #111;
  cursor: pointer;
  padding: 0;
  box-shadow: 2px 2px 0px #111;
  transition: transform 0.1s ease;
}

.avatar-swatch:hover {
  transform: scale(1.12);
}

.avatar-swatch.gewaehlt {
  outline: 3px solid #FFD300;
  outline-offset: 2px;
  transform: scale(1.12);
}

/* Detail-Chips (Ruß/Kaffee/Brille/Pflaster — Mehrfachauswahl) */
.avatar-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  background-color: #ffffff;
  border: 2.5px solid #111;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0px #111;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.avatar-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #111;
}

.avatar-chip.aktiv {
  background-color: #FFD300;
}

/* ---------- 9.2 Rangliste mit Avataren (SPEC §0c) ---------- */

.rangliste li {
  gap: 10px;
}

.rangliste .rang-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 2.5px solid #111;
  border-radius: 10px;
  box-shadow: 3px 3px 0px #111;
  overflow: hidden;
  line-height: 0;
  background-color: #ffe9c8;
}

.rangliste .rang-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rangliste .rang-name {
  flex: 1;
  text-align: left;
}

.rangliste .rang-ehre {
  font-weight: bold;
  white-space: nowrap;
}

/* KI-Einträge wirken etwas matter (geheimnisvolle Konkurrenz) */
.rangliste li.ki .rang-name {
  font-style: italic;
}

/* ---------- 9.3 Wache: Kopf mit Avatar + Beitrittsliste (SPEC §0c) ---------- */

.wache-kopf {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.wache-avatar {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 4px 4px 0px #111;
  overflow: hidden;
  line-height: 0;
  background-color: #ffe9c8;
}

.wache-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wache-listen-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2.5px solid #111;
  border-radius: 10px;
  background-color: rgba(17, 17, 17, 0.06);
  padding: 10px 12px;
  margin-top: 8px;
}

/* ---------- 9.3a Wach-Anwesenheit (ANHANG v12.2) ----------
   Status-Punkt (grün/gelb/rot) + Mitglieder-Zeilen im Comic-Stil
   (harte Schatten, dicke Konturen, v7-Stil). */
.status-punkt {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid #111;
}

.status-gruen { background-color: #3dbb4e; } /* dienstbereit */
.status-gelb { background-color: #ffc93c; }  /* im Einsatz / im TL */
.status-rot { background-color: #e23a3a; }   /* außer Dienst */

.wache-anwesenheit-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wache-anwesenheit-kopf h3 {
  margin-top: 0;
}

.wache-mitglieder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.wache-mitglied {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2.5px solid #111;
  border-radius: 10px;
  background-color: rgba(17, 17, 17, 0.06);
  box-shadow: 4px 4px 0px #111;
  padding: 8px 12px;
}

/* Eigene Zeile hebt sich ab (Badge-Gelb der Karten-Akzente) */
.wache-mitglied-spieler {
  background-color: #fff3d6;
}

.wache-mitglied-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 2.5px solid #111;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background-color: #ffe9c8;
}

.wache-mitglied-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wache-mitglied-name {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.wache-mitglied-status {
  flex: 0 0 auto;
  font-weight: bold;
  font-size: 13px;
  text-align: right;
}

/* Prominenter Verlassen-Button (v12.2) + Verlassen-Dialog-Aktionsleiste */
.wache-verlassen-btn {
  font-size: 16px;
  padding: 12px 22px;
}

.wache-verlassen-aktionen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .wache-mitglied-status { font-size: 12px; }
}

/* ---------- 9.4 Fahrzeug-Boost-Badge auf Einsatz-Karten (SPEC §12) ---------- */

.boost-badge {
  display: inline-block;
  background-color: #2ea3ff;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  border: 2.5px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0px #111;
  padding: 4px 10px;
  margin: 0 0 8px 0;
  text-shadow: 1px 1px 0px #111;
}

.boost-badge .boost-alt {
  font-weight: normal;
  font-size: 12px;
  opacity: 0.9;
}

/* ---------- 9.5 Fahrzeughalle (SPEC §12) ---------- */

/* Bühne für das aktuell geleaste Fahrzeug: großes SVG links, Infos rechts */
.fahrzeug-buehne {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.fahrzeug-buehne-svg {
  flex: 1 1 300px;
  max-width: 430px;
  background-color: #ffffff;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #111;
  padding: 10px;
  line-height: 0;
}

.fahrzeug-buehne-svg svg,
.fahrzeug-buehne-svg img {
  display: block;
  width: 100%;
  height: auto;
}

.fahrzeug-buehne-info {
  flex: 1 1 240px;
}

.fahrzeug-buehne-leer {
  border-style: dashed;
  background-color: rgba(255, 255, 255, 0.55);
}

/* Leasing-Grid: die 4 Fahrzeug-Karten */
.leasing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 4px;
}

.leasing-karte {
  position: relative;
  text-align: center;
}

.leasing-karte h3 {
  margin-top: 8px;
}

.leasing-svg {
  background-color: #ffffff;
  border: 3px solid #111;
  border-radius: 10px;
  padding: 8px;
  line-height: 0;
}

.leasing-svg svg,
.leasing-svg img {
  display: block;
  width: 100%;
  height: auto;
}

.leasing-boost {
  display: inline-block;
  background-color: #2ea3ff;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  border: 2.5px solid #111;
  border-radius: 8px;
  padding: 3px 10px;
  margin: 4px 0;
  text-shadow: 1px 1px 0px #111;
}

/* Aktiv geleastes Fahrzeug: goldener Rahmen + Badge oben rechts */
.leasing-aktiv {
  outline: 4px solid #FFD300;
  outline-offset: 2px;
}

.leasing-aktiv-badge {
  position: absolute;
  top: -12px;
  right: 12px;
  background-color: #FFD300;
  color: #111;
  font-size: 11px;
  font-weight: bold;
  border: 2.5px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0px #111;
  padding: 3px 10px;
  z-index: 2;
}

/* ---------- 9.6 DSGVO-Hinweis-Footer (SPEC §0b/§8) ---------- */

.dsgvo-hinweis {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px dashed rgba(17, 17, 17, 0.35);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
  text-align: center;
}

/* ---------- 9.7 Sidebar-Hinweis fürs geleaste Fahrzeug (SPEC §12) ---------- */

.sl-hinweis-fahrzeug {
  background-color: #2ea3ff;
}

/* ---------- 9.8 Responsive-Nachjustierung (v6) ---------- */
@media (max-width: 900px) {
  .avatar-editor {
    flex-direction: column;
    align-items: center;
  }

  .avatar-kategorien {
    width: 100%;
    min-width: 0;
  }

  .avatar-kat-wert {
    min-width: 110px;
  }

  .leasing-grid {
    grid-template-columns: 1fr;
  }

  .fahrzeug-buehne-svg {
    max-width: 100%;
  }

  .wache-avatar {
    width: 70px;
    height: 70px;
  }
}

/* ============================================================================
   ANHANG v8 — SPIND & DRAG-AND-DROP-AUSRÜSTUNG (Profilseite)
   ----------------------------------------------------------------------------
   Paper-Doll-Ansicht (Porträt zentral, 6 Slot-Kacheln geometrisch drumherum),
   Spind-Grid (Lager der nicht ausgerüsteten Items) und visuelles Feedback
   der nativen HTML5-Drag-and-Drop-Mechanik — alles im v7-Design:
   3-px-Rahmen #1a1a1a, harte Schatten, Metall-Akzente (Messing #B08945 /
   Stahl #D8DDE4), Comic-Cell-Shading.
   ========================================================================== */

/* ---------- v8.6: Paper-Doll-Grid (v8.1) ----------
   Geometrie laut SPEC:
     Kopf = oben Mitte · Werkzeug = links oben · Torso = rechts oben
     Handschuhe = links unten · Hose = rechts unten · Stiefel = unten Mitte
     → CSS-Grid-Areas, Porträt zentral in der mittleren Zeile. */
.puppen-grid {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) minmax(150px, 210px) minmax(104px, 1fr);
  grid-template-areas:
    "werkzeug kopf torso"
    ". puppe ."
    "handschuhe stiefel hose";
  gap: 14px;
  align-items: center;
  justify-items: center;
  margin-top: 12px;
}

.puppen-portrait {
  grid-area: puppe;
  line-height: 0; /* kein Inline-Gap unter dem SVG */
}

/* Slot-Kacheln auf ihre Grid-Areas verteilt */
.slot-kachel[data-slot="kopf"]       { grid-area: kopf; }
.slot-kachel[data-slot="werkzeug"]   { grid-area: werkzeug; }
.slot-kachel[data-slot="torso"]      { grid-area: torso; }
.slot-kachel[data-slot="handschuhe"] { grid-area: handschuhe; }
.slot-kachel[data-slot="stiefel"]    { grid-area: stiefel; }
.slot-kachel[data-slot="hose"]       { grid-area: hose; }

/* ---------- Slot-Kacheln (6 Ausrüstungs-Slots, v8.1/v8.6) ---------- */
.slot-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 132px;
  min-height: 118px;
  padding: 10px 8px 8px;
  background-color: #F8F9FA; /* Helms-Weiß */
  color: #111111;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 5px 5px 0px #1a1a1a;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Belegte Kacheln sind draggable — Griff-Signal + Metall-Kopfleiste */
.slot-kachel-belegt {
  cursor: grab;
  background-image: linear-gradient(to bottom, #D8DDE4 0, #D8DDE4 6px, transparent 6px);
}

.slot-kachel-belegt:active {
  cursor: grabbing;
}

.slot-kachel-belegt:hover {
  transform: translateY(-2px);
  box-shadow: 6px 7px 0px #1a1a1a;
}

/* Leere Kachel: gedämpft, gestrichelte Messing-Kante als „Silhouetten-Rahmen" */
.slot-kachel-leer {
  background-color: #e8e4da;
  border-style: dashed;
  border-color: #8d8574;
  box-shadow: 4px 4px 0px rgba(26, 26, 26, 0.55);
}

.slot-kachel-icon {
  width: 52px;
  height: 52px;
  line-height: 0;
  background-color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 3px 3px 0px #1a1a1a;
  overflow: hidden;
  flex: 0 0 auto;
}

.slot-kachel-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Leere Kachel: Slot-Silhouette ohne eigenen Rahmen (Icon-Box ist Rahmen genug) */
.slot-kachel-silhouette {
  background-color: #d9d4c7;
  border-color: #8d8574;
  box-shadow: none;
}

.slot-kachel-label {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2B2D42;
  /* Nie mitten im Wort umbrechen — Slot-Namen (z. B. „WERKZEUG") bleiben
     immer ein ungeteiltes Wort auf einer Zeile (v8.6b) */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  white-space: nowrap;
}

.slot-kachel-item {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.25;
  word-break: break-word;
}

.slot-kachel-leer-text {
  font-weight: normal;
  font-style: italic;
  color: #6b6558;
}

/* ---------- v8.1: Spind (Lager — nur NICHT ausgerüstete Items) ---------- */
.spind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
  margin-top: 12px;
  padding: 12px;
  min-height: 120px;
  background-color: #eeeae0; /* Spind-Innenraum */
  background-image: repeating-linear-gradient(90deg, rgba(176, 137, 69, 0.14) 0 3px, transparent 3px 56px); /* dezente Spind-Lamellen (Metall-Akzent) */
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: inset 3px 3px 0px rgba(26, 26, 26, 0.25);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

/* Spind-Item-Karte: Icon, Name, Slot-Badge, Boni — draggable (v8.2) */
.spind-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 4px 4px 0px #1a1a1a;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.spind-item:active {
  cursor: grabbing;
}

.spind-item:hover {
  transform: translateY(-2px) rotate(-0.5deg);
  box-shadow: 5px 6px 0px #1a1a1a;
}

.spind-item .item-icon {
  align-self: center;
}

.spind-item-slot {
  align-self: flex-start;
}

.spind-item-name {
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.spind-item .item-boni {
  text-align: center;
}

/* Leerzustand im Spind (witziger .lang-Text, v8.1) */
.spind-leer {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-style: italic;
  color: #6b6558;
  grid-column: 1 / -1;
}

/* ---------- v8.2: Drag-Feedback (nativ HTML5 DnD) ---------- */

/* Das gezogene Element (während dragstart→dragend) */
.slot-kachel.dragging,
.spind-item.dragging {
  opacity: 0.45;
  filter: saturate(0.6);
  transform: rotate(-1.5deg) scale(0.97);
}

/* GÜLTIGES Drop-Ziel während dragover: gelber Leuchtring + Anheben */
.slot-kachel.drop-gueltig,
.spind-grid.drop-gueltig {
  background-color: #fff3bf;
  outline: 3px solid #FFC300;
  outline-offset: 2px;
  box-shadow: 6px 6px 0px #1a1a1a, 0 0 0 6px rgba(255, 195, 0, 0.35);
  transform: translateY(-2px);
}

/* UNGÜLTIGES Drop-Ziel während dragover: gedimmt/entsättigt (v8.2) */
.slot-kachel.drop-ungueltig,
.spind-grid.drop-ungueltig {
  opacity: 0.45;
  filter: grayscale(0.7);
}

/* Erfolgs-Flash nach dem Drop (wird nach dem Re-Render kurz gesetzt) */
.slot-kachel.drop-flash {
  animation: drop-erfolg-flash 0.9s ease-out;
}

@keyframes drop-erfolg-flash {
  0% {
    background-color: #FFC300;
    outline: 3px solid #D62828;
    outline-offset: 2px;
    transform: scale(1.06) rotate(-1deg);
  }
  60% {
    background-color: #fff3bf;
  }
  100% {
    background-color: #F8F9FA;
    outline: 3px solid transparent;
    outline-offset: 0;
    transform: none;
  }
}

/* ---------- v8.6: Responsive-Nachjustierung (v8.2: Layout bricht nicht) ---------- */
@media (max-width: 900px) {
  .puppen-grid {
    grid-template-columns: minmax(84px, 1fr) minmax(120px, 170px) minmax(84px, 1fr);
    gap: 10px;
  }

  .slot-kachel {
    max-width: 108px;
    min-height: 106px;
    padding: 8px 6px 6px;
  }

  .slot-kachel-icon {
    width: 42px;
    height: 42px;
  }

  .slot-kachel-label {
    font-size: 11px;
  }

  .slot-kachel-item {
    font-size: 11px;
  }

  .spind-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 12px;
    padding: 10px;
  }
}

/* ---------- v8.6b: Sehr kleine Slot-Kacheln (≤ 480 px, z. B. 390 px mobil) ----------
   Die Kacheln schrumpfen hier auf ~84 px; damit auch die langen Slot-Namen
   („WERKZEUG", „HANDSCHUHE") ungebrochen und lesbar IN der Kachel bleiben,
   wird die Label-Schrift reduziert und die Laufweite gestrafft. */
@media (max-width: 480px) {
  .slot-kachel-label {
    font-size: 9px; /* 0.5625rem */
    letter-spacing: 0;
    /* Label darf die Padding-Zone der Kachel bis an deren Kante mitnutzen
       (Headroom für breitere Fallback-Fonts wie Arial Black), nie darüber hinaus */
    margin-left: -6px;
    margin-right: -6px;
  }
}

/* ============================================================================
   ANHANG v10 — GROSSSCHADENSLAGEN (Dungeon-Bosskampf)
   ----------------------------------------------------------------------------
   Alles im v7-Design (Comic + Feuerwehr: 3-px-Rahmen #1a1a1a, harte Schatten
   4–5 px, Cell-Shading, Hydranten-/Metall-Akzente). Neu dazu:
   - Nav: .gesperrt-stufe (Level-10-Sperre, ausgegraut) + .nav-cd-badge (mm:ss)
   - Boss-Kacheln-Grid mit Status besiegt ✓ / aktuell (leuchtend) / gesperrt 🔒
   - Seltenheits-System: Rare #4CC9F0 (blau) · Super Rare #9B5DE5/#FFC300
     (violett/gold) — Aura in Loot-Popup, Spind-Grid und Slot-Kacheln
   - Ergebnis-Modal mit Kampflog + Loot-Aura
   ========================================================================== */

/* ---------- 8. Nav-Button: Level-Sperre + Cooldown-Badge ---------- */
.nav-btn.gesperrt-stufe {
  opacity: 0.6;
  filter: grayscale(0.9) saturate(0.45); /* wie .gesperrt — nur klickbar */
  padding-bottom: 18px; /* Platz für das Schloss-Band unten */
}

.nav-btn.gesperrt-stufe:hover {
  transform: none;
  box-shadow: 5px 5px 0px #1a1a1a;
}

/* Schloss-Band am gesperrten Dungeon-Button (Hinweis-Text steht als
   de.lang-Text im gesperrten Bereich + als Tooltip/title am Button) */
.nav-btn.gesperrt-stufe::after {
  content: '🔒';
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 1px 6px;
  background-color: #2B2D42;
  color: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
}

/* Live-Cooldown-Badge (mm:ss) am Dungeon-Nav-Button */
.nav-cd-badge {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 1px 6px;
  background-color: #2B2D42;
  color: #FFC300;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 9.5px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 2;
}

/* trägt der Button einen Cooldown, bleibt unten Platz für das Badge */
#nav-dungeon {
  padding-bottom: 18px;
}

/* ---------- Kopf-Karte des Reiters (Warnflamme + Titel) ---------- */
.dungeon-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dungeon-kopf-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  line-height: 0;
  filter: drop-shadow(3px 3px 0px rgba(26, 26, 26, 0.6));
}

.dungeon-kopf-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Level-Sperre (< 10): ausgegraute Sperr-Ansicht ---------- */
.dungeon-gesperrt-karte {
  text-align: center;
  padding: 26px 18px;
  filter: none;
}

.dungeon-gesperrt-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 10px;
  line-height: 0;
  opacity: 0.55;
  filter: grayscale(0.9) saturate(0.45);
}

.dungeon-gesperrt-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Status-Zeile (Fortschritt X/20 + Live-Cooldown) ---------- */
.dungeon-status-karte {
  margin-top: 0;
}

.dungeon-status-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 15px;
}

.dungeon-cooldown {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  background-color: #2B2D42;
  color: #FFC300;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 3px 3px 0px rgba(26, 26, 26, 0.5);
}

.dungeon-bereit {
  background-color: #3E9B4F;
  color: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 3px 3px 0px rgba(26, 26, 26, 0.5);
  text-shadow: 1px 1px 0px #1a1a1a;
}

/* ---------- Boss-Kacheln-Grid (20 Stufen) ---------- */
.dungeon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.boss-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 190px;
  padding: 12px 12px 10px;
  background-color: #F8F9FA;
  color: #111111;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 4px 4px 0px #1a1a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.boss-nummer {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 14px;
  background-color: #FFC300;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: 2px 2px 0px #1a1a1a;
  z-index: 1;
}

.boss-name {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.3;
}

.boss-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.boss-level {
  margin: 0;
  font-size: 11.5px;
  font-weight: bold;
  color: #2B2D42;
}

.boss-warnung {
  margin: 0;
  font-size: 11.5px;
  font-weight: bold;
  color: #A31D1D;
}

.boss-status {
  align-self: flex-start;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
}

.boss-status-besiegt {
  background-color: #3E9B4F;
  color: #ffffff;
}

.boss-status-aktuell {
  background-color: #E30613;
  color: #ffffff;
  text-shadow: 1px 1px 0px #1a1a1a;
}

.boss-status-gesperrt {
  margin: 0;
  font-size: 11.5px;
  font-style: italic;
  color: #6b6558;
}

.boss-schloss {
  font-size: 26px;
  line-height: 1;
}

/* besiegt ✓: gedimmt + entsättigt (Erfolg bleibt lesbar, tritt zurück) */
.boss-besiegt {
  opacity: 0.68;
  filter: grayscale(0.55) saturate(0.7);
  background-color: #e3efe4;
}

/* aktuell: leuchtend herausforderbar — rote Kante + pulsierender Glüh-Schein */
.boss-aktuell {
  border-color: #E30613;
  background-color: #fff6d8;
  animation: dungeon-glut 2.2s ease-in-out infinite;
}

.boss-aktuell:hover {
  transform: translateY(-2px);
}

@keyframes dungeon-glut {
  0%, 100% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 0px rgba(227, 6, 19, 0.0); }
  50% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 18px rgba(227, 6, 19, 0.55); }
}

/* gesperrt: ruhiges Grau + gestrichelte Kante (wie leere Slot-Kacheln) */
.boss-gesperrt {
  background-color: #e8e4da;
  border-style: dashed;
  border-color: #8d8574;
  box-shadow: 4px 4px 0px rgba(26, 26, 26, 0.55);
  opacity: 0.85;
}

.boss-gesperrt .boss-name {
  color: #5d5747;
}

.boss-kampf-btn {
  margin-top: auto;
  width: 100%;
}

/* ---------- Drop-Vorschau-Icon (Seltenheits-Ring) ---------- */
.boss-drop {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  line-height: 0;
  background-color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0px #1a1a1a;
  overflow: visible;
}

.boss-drop svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7px;
}

/* Rare: blauer Ring (#4CC9F0) mit dezentem Schein */
.boss-drop-rare {
  border-color: #4CC9F0;
  box-shadow: 2px 2px 0px #1a1a1a, 0 0 9px rgba(76, 201, 240, 0.7);
}

/* Super Rare: violetter Ring (#9B5DE5) mit goldenem Schein (#FFC300) */
.boss-drop-super-rare {
  border-color: #9B5DE5;
  outline: 2px solid #FFC300;
  outline-offset: 1px;
  box-shadow: 2px 2px 0px #1a1a1a, 0 0 12px rgba(255, 195, 0, 0.65);
}

/* bei der aktuellen Kachel sitzt der Button unten — Drop wandert nach oben rechts */
.boss-aktuell .boss-drop {
  top: 8px;
  right: 8px;
  bottom: auto;
}

/* ---------- Seltenheits-Rahmen: Spind-Grid + Slot-Kacheln (v10.3) ---------- */
/* Rare = blauer Rahmen (#4CC9F0) mit blauem Schein */
.spind-item.selten-rare,
.slot-kachel.selten-rare {
  border-color: #4CC9F0;
  box-shadow: 4px 4px 0px #1a1a1a, 0 0 10px rgba(76, 201, 240, 0.6);
}

.spind-item.selten-rare:hover,
.slot-kachel.selten-rare:hover {
  box-shadow: 5px 6px 0px #1a1a1a, 0 0 14px rgba(76, 201, 240, 0.75);
}

/* Super Rare = violetter Rahmen (#9B5DE5) mit goldener Kontur (#FFC300) */
.spind-item.selten-super-rare,
.slot-kachel.selten-super-rare {
  border-color: #9B5DE5;
  outline: 2px solid #FFC300;
  outline-offset: 1px;
  box-shadow: 4px 4px 0px #1a1a1a, 0 0 12px rgba(155, 93, 229, 0.55);
}

.spind-item.selten-super-rare:hover,
.slot-kachel.selten-super-rare:hover {
  box-shadow: 5px 6px 0px #1a1a1a, 0 0 16px rgba(255, 195, 0, 0.7);
}

/* Seltenheits-Label (Spind, Slot-Kachel, Loot-Popup) */
.seltenheit-badge {
  align-self: flex-start;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(26, 26, 26, 0.6);
}

.seltenheit-badge-rare {
  background-color: #4CC9F0;
}

.seltenheit-badge-super_rare {
  background: linear-gradient(135deg, #9B5DE5 0%, #9B5DE5 60%, #FFC300 100%);
}

.slot-kachel .seltenheit-badge {
  align-self: center;
}

/* ---------- Ergebnis-Modal (Kampflog + Loot-Aura) ---------- */
.dungeon-ergebnis {
  max-width: 640px;
}

.dungeon-log-titel {
  margin: 12px 0 6px;
}

.dungeon-kampflog {
  max-height: 300px;
}

/* Loot-Box mit Seltenheits-Aura */
.dungeon-loot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background-color: #F8F9FA;
  color: #111111;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 4px 4px 0px #1a1a1a;
  text-align: left;
}

.dungeon-loot-icon {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  line-height: 0;
  background-color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px 0px #1a1a1a;
}

.dungeon-loot-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 9px;
}

/* Rare-Aura: blau (#4CC9F0) — Rahmen + dezenter Puls-Schein */
.dungeon-loot-rare {
  border-color: #4CC9F0;
  animation: loot-aura-rare 2.4s ease-in-out infinite;
}

.dungeon-loot-rare .dungeon-loot-icon {
  border-color: #4CC9F0;
}

@keyframes loot-aura-rare {
  0%, 100% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 6px rgba(76, 201, 240, 0.45); }
  50% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 20px rgba(76, 201, 240, 0.85); }
}

/* Super-Rare-Aura: violett/gold (#9B5DE5/#FFC300) */
.dungeon-loot-super_rare {
  border-color: #9B5DE5;
  outline: 2px solid #FFC300;
  outline-offset: 2px;
  animation: loot-aura-super 2.4s ease-in-out infinite;
}

.dungeon-loot-super_rare .dungeon-loot-icon {
  border-color: #9B5DE5;
  outline: 2px solid #FFC300;
  outline-offset: 1px;
}

@keyframes loot-aura-super {
  0%, 100% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 8px rgba(155, 93, 229, 0.5); }
  50% { box-shadow: 4px 4px 0px #1a1a1a, 0 0 22px rgba(255, 195, 0, 0.85); }
}

.dungeon-loot-text {
  min-width: 0;
}

.dungeon-loot-titel {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6558;
}

.dungeon-loot-name {
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.25;
}

.dungeon-loot-desc {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.35;
}

.dungeon-loot-duplikat {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: bold;
  color: #8A6A33;
}

/* ---------- Finale-Karte (alle 20 bezwungen) ---------- */
.dungeon-finale-karte {
  text-align: center;
  padding: 22px 16px;
}

/* ---------- Responsive (v7-konform) ---------- */
@media (max-width: 900px) {
  .dungeon-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }

  .dungeon-status-zeile {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .dungeon-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .boss-kachel {
    min-height: 170px;
    padding: 10px 8px 8px;
  }

  .boss-desc {
    display: none; /* kleine Kacheln: Beschreibung nur auf größeren Screens */
  }

  .dungeon-loot {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .seltenheit-badge {
    align-self: center;
  }
}

/* ============================================================================
   ANHANG v19: GROSSSCHADENSLAGEN — Instanz-Karten, Gegner-Portraits, Bosse
   ----------------------------------------------------------------------------
   Baut auf den bestehenden .dungeon-grid/.boss-kachel-Regeln auf (v10.5) und
   ergänzt nur das Neue: Instanz-Rahmen, Portraits und Boss-Hervorhebung.
   ========================================================================== */
.instanz-karte {
  margin-bottom: 20px;
}

.instanz-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.instanz-kopf h3 {
  margin: 0;
}

/* Gesperrte Instanz: sichtbar, aber deutlich zurückgenommen */
.instanz-gesperrt {
  opacity: 0.72;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.04) 0 12px, transparent 12px 24px);
}

.instanz-gesperrt .dungeon-grid {
  filter: grayscale(0.55);
}

.instanz-fertig {
  border-color: #2e9e44;
  box-shadow: 5px 5px 0px #1f6e30;
}

.instanz-sperre {
  margin: 8px 0 0;
  padding: 8px 10px;
  background-color: #ffe9a8;
  border: 2px dashed #111;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
}

/* --- Gegner-Portraits (modular erzeugt, icons.js → gegnerPortraitSvg) --- */
.gegner-portrait {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto 2px;
  background-color: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0px #1a1a1a;
  overflow: hidden;
}

.gegner-portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Boss-Portrait: größer und golden gerahmt */
.gegner-portrait-boss {
  width: 82px;
  height: 82px;
  border-color: #b8860b;
  box-shadow: 2px 2px 0px #1a1a1a, 0 0 10px rgba(255, 211, 0, 0.65);
}

/* Portrait im Ergebnis-Modal */
.gegner-portrait-gross {
  width: 104px;
  height: 104px;
  margin: 10px auto;
}

.badge-boss {
  position: absolute;
  top: -10px;
  right: -8px;
  background: linear-gradient(180deg, #ffd300 0%, #e6a800 100%);
  color: #111;
  border: 2px solid #111;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Boss-Kachel insgesamt etwas prominenter */
.boss-kachel-boss {
  background-color: #fffaf0;
  border-color: #b8860b;
}

.boss-kachel-boss.boss-aktuell {
  box-shadow: 5px 5px 0px #1a1a1a, 0 0 16px rgba(255, 211, 0, 0.55);
}

/* Mehrere Drop-Vorschauen nebeneinander (Instanz 5 wirft zwei Stücke ab) */
.boss-drop-leiste {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.instanz-fertig-hinweis {
  margin: 6px 0;
  font-weight: bold;
  color: #b8860b;
}

/* ============================================================================
   ANHANG v20: LIGAKAMPF (asynchrones PvP)
   ----------------------------------------------------------------------------
   Nutzt bestehende Bausteine (.karte, .badge, .dungeon-cooldown/-bereit) und
   ergänzt nur Liga-Wappen, Gegnerkarten und Ligatabelle. Neue Liga → eine
   Farbregel .pvp-wappen-<key> anhängen, sonst greift der neutrale Default.
   ========================================================================== */
.pvp-kopf-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pvp-kopf-text {
  flex: 1 1 220px;
}

.pvp-kopf-text h3 {
  margin: 0 0 4px;
}

.pvp-wertung {
  margin: 0;
  font-weight: bold;
  font-size: 18px;
}

/* --- Liga-Wappen: farbiger Schild-Kreis mit Stufenzahl --- */
.pvp-wappen {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  box-shadow: 2px 2px 0px #1a1a1a;
  background: #9AA0A6;
  color: #111;
  font-weight: bold;
}

.pvp-wappen-stufe {
  font-size: 18px;
  line-height: 1;
}

.pvp-wappen-bronze  { background: linear-gradient(180deg, #d08a52 0%, #a05f2c 100%); color: #fff; }
.pvp-wappen-silber  { background: linear-gradient(180deg, #e2e6ea 0%, #a9b1b8 100%); }
.pvp-wappen-gold    { background: linear-gradient(180deg, #ffd94a 0%, #d9a400 100%); }
.pvp-wappen-platin  { background: linear-gradient(180deg, #dff0f5 0%, #9fc4d0 100%); }
.pvp-wappen-diamant { background: linear-gradient(180deg, #9ae6ff 0%, #4cc9f0 100%); }
.pvp-wappen-elite   { background: linear-gradient(180deg, #f0a6ff 0%, #8e44ad 100%); color: #fff; }

.pvp-erklaerung {
  margin: 12px 2px;
}

/* --- Gegnerkarten --- */
.pvp-gegner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.pvp-gegner-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pvp-gegner-ki {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0 10px, transparent 10px 20px);
}

.pvp-gegner-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pvp-gegner-kopf > div {
  flex: 1 1 auto;
  min-width: 0;
}

.pvp-gegner-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: block;
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.pvp-gegner-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pvp-gegner-name {
  margin: 0;
  word-break: break-word;
}

.pvp-gegner-wertung {
  margin: 0;
}

/* --- Ligatabelle --- */
.pvp-rangliste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.pvp-rang-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 2px dashed #111;
}

.pvp-rang-zeile:last-child {
  border-bottom: none;
}

.pvp-rang-ich {
  background-color: #fff6d6;
}

.pvp-rang-platz {
  flex: 0 0 30px;
  font-weight: bold;
  font-size: 17px;
}

.pvp-rang-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pvp-rang-punkte {
  flex: 0 0 auto;
  font-weight: bold;
}

/* --- Ergebnis-Modal --- */
.pvp-delta {
  font-weight: bold;
  font-size: 17px;
}

.pvp-delta-plus  { color: #2e9e44; }
.pvp-delta-minus { color: #d81f26; }

/* ============================================================================
   ANHANG v21: ITEM-STUFEN, QUALITÄTEN & LOOT
   ----------------------------------------------------------------------------
   Ergänzt die bestehenden Seltenheits-Rahmen um die neue Stufe „episch" und
   die Stufen-/Qualitäts-Badges. Neue Qualität → eine Farbregel anhängen.
   ========================================================================== */
.item-stufe-badge {
  display: inline-block;
  margin: 2px 4px 4px 0;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
  background: #ececec;
  border: 2px solid #111;
  border-radius: 10px;
}

.item-stufe-badge.qualitaet-rare       { background: #d6e9ff; }
.item-stufe-badge.qualitaet-episch     { background: #ecd9ff; }
.item-stufe-badge.qualitaet-super_rare { background: #ffe9a8; }

/* Neue Qualitätsstufe „episch" (zwischen selten und legendär) */
.selten-episch {
  border-color: #8e44ad;
  box-shadow: 4px 4px 0px #5b2c6f;
}

.seltenheit-badge-episch,
.dungeon-loot-episch .seltenheit-badge {
  background: #8e44ad;
  color: #fff;
}

.dungeon-loot-episch {
  border-color: #8e44ad;
}

.dungeon-loot-normal {
  border-color: #1a1a1a;
}

/* Auffällige Fundanimation für episch/legendär */
@keyframes lootGlanz {
  0%, 100% { box-shadow: 4px 4px 0px #1a1a1a; }
  50%      { box-shadow: 4px 4px 0px #1a1a1a, 0 0 18px 6px rgba(255, 211, 0, 0.75); }
}

.loot-glanz {
  animation: lootGlanz 1.1s ease-in-out infinite;
}

/* --- Drop-Vorschau („Mögliche Belohnungen") --- */
.loot-vorschau h4 {
  margin: 12px 0 5px;
  font-size: 15px;
}

/* Kopfzeile bleibt beim Scrollen stehen — das ✕ ist dadurch immer sichtbar. */
.loot-vorschau-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px -4px 6px;
  padding: 6px 4px;
  background: #F8F9FA;
  border-bottom: 2px dashed #111;
}

.loot-vorschau-kopf h2 {
  margin: 0;
  font-size: 19px;
}

.modal-schliessen-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.loot-chancen-liste li {
  padding: 4px 8px;
  font-size: 14px;
}

.loot-chancen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loot-chancen-liste li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  border-bottom: 2px dashed #111;
}

.loot-chancen-liste li:last-child {
  border-bottom: none;
}

.loot-chancen-liste li.qualitaet-rare       { background: #eaf4ff; }
.loot-chancen-liste li.qualitaet-episch     { background: #f5eaff; }
.loot-chancen-liste li.qualitaet-super_rare { background: #fff6d6; }

.loot-beute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

.loot-beute-karte {
  padding: 6px 5px;
  text-align: center;
  background: #F8F9FA;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
}

/* v24: .item-icon ist ein <span> (inline) — ohne display:inline-block greift
   die Breitenangabe nicht und das SVG dehnt sich auf die volle Kartenbreite.
   Genau das hat die Vorschau riesig gemacht. */
.loot-beute-karte .item-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-width: 2px;
  border-radius: 8px;
  box-shadow: 2px 2px 0px #111;
}

.loot-beute-karte h5 {
  margin: 3px 0;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-word;
}

.loot-beute-karte .seltenheit-badge {
  font-size: 10px;
  padding: 1px 5px;
}

.loot-beute-karte .item-boni {
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.25;
}

.loot-beute-karte.qualitaet-rare   { border-color: #1c6fb3; }
.loot-beute-karte.qualitaet-episch { border-color: #8e44ad; }

/* ============================================================================
   ANHANG v23 (Etappe E): ANIMIERTE DUELLANSICHT
   ----------------------------------------------------------------------------
   Links Spieler, rechts Gegner, dazwischen die Aktion. Alle Bewegungen laufen
   über CSS-Keyframes (GPU-freundlich: nur transform/opacity), damit die
   Darstellung auch auf schwächeren Geräten flüssig bleibt. Die Klassen setzt
   der Client je Ereignis neu (duell-aktion-treffer/-crit/-ausweich,
   duell-von-spieler/-gegner).
   ========================================================================== */
.duell-modal {
  max-width: 640px;
  width: 100%;
}

.duell-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.duell-tempo-anzeige {
  font-weight: bold;
}

.duell-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  background: linear-gradient(180deg, #2b2d42 0%, #1d1e2e 100%);
  border: 3px solid #111;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.duell-seite {
  text-align: center;
  min-width: 0;
}

.duell-portrait {
  width: 92px;
  height: 92px;
  margin: 0 auto 6px;
  background: #F8F9FA;
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #111;
  overflow: hidden;
}

.duell-portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}

.duell-portrait-boss {
  border-color: #b8860b;
  box-shadow: 3px 3px 0 #111, 0 0 12px rgba(255, 211, 0, 0.6);
}

.duell-name {
  margin: 0 0 4px;
  color: #F8F9FA;
  font-size: 14px;
  word-break: break-word;
}

.duell-hp-balken {
  height: 14px;
}

.duell-hp-fuellung-spieler { background: linear-gradient(180deg, #5fd36a 0%, #2e9e44 100%); }
.duell-hp-fuellung-gegner  { background: linear-gradient(180deg, #ff7a7a 0%, #d81f26 100%); }

.duell-hp-zahl {
  display: block;
  margin-top: 3px;
  color: #F8F9FA;
  font-size: 12px;
  font-weight: bold;
}

.duell-mitte {
  position: relative;
  min-width: 96px;
  text-align: center;
}

.duell-schaden {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #111;
  animation: duellSchadenAuf 0.5s ease-out;
}

.duell-schaden-spieler { color: #ffd300; }  /* Schaden, den der Spieler austeilt */
.duell-schaden-gegner  { color: #ff6b6b; }  /* … und den er einsteckt */

.duell-effekt-text,
.duell-crit-text {
  display: block;
  color: #F8F9FA;
  font-weight: bold;
  text-shadow: 1px 1px 0 #111;
}

.duell-crit-text {
  color: #ffd300;
  font-size: 15px;
  animation: duellPochen 0.4s ease-out;
}

.duell-funken {
  display: block;
  font-size: 26px;
  animation: duellFunken 0.6s ease-out;
}

/* --- Bewegung der Portraits: der Angreifer stößt vor --- */
@keyframes duellStossRechts { 0%,100% { transform: translateX(0); } 45% { transform: translateX(16px) scale(1.05); } }
@keyframes duellStossLinks  { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-16px) scale(1.05); } }
@keyframes duellTreffer     { 0%,100% { transform: translateX(0); } 30% { transform: translateX(7px) rotate(3deg); } 60% { transform: translateX(-5px) rotate(-2deg); } }
@keyframes duellAusweichen  { 0%,100% { transform: translateX(0) skewX(0); } 50% { transform: translateX(-18px) skewX(-8deg); opacity: 0.75; } }
@keyframes duellSchadenAuf  { 0% { transform: translateY(14px) scale(0.6); opacity: 0; } 100% { transform: translateY(-6px) scale(1); opacity: 1; } }
@keyframes duellPochen      { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes duellFunken      { 0% { transform: scale(0.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.35) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0.9; } }
@keyframes duellWackeln     { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-5px,3px); } 40% { transform: translate(5px,-3px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(4px,2px); } }
@keyframes duellRauchAuf    { 0% { transform: translateY(10px) scale(0.5); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translateY(-30px) scale(1.3); opacity: 0; } }

/* Angreifer stößt vor, Getroffener zuckt zurück */
.duell-von-spieler.duell-aktion-treffer .duell-portrait-spieler,
.duell-von-spieler.duell-aktion-crit    .duell-portrait-spieler { animation: duellStossRechts 0.5s ease-out; }
.duell-von-gegner.duell-aktion-treffer  .duell-portrait-gegner,
.duell-von-gegner.duell-aktion-crit     .duell-portrait-gegner  { animation: duellStossLinks 0.5s ease-out; }
.duell-von-spieler.duell-aktion-treffer .duell-portrait-gegner,
.duell-von-spieler.duell-aktion-crit    .duell-portrait-gegner  { animation: duellTreffer 0.5s ease-out; }
.duell-von-gegner.duell-aktion-treffer  .duell-portrait-spieler,
.duell-von-gegner.duell-aktion-crit     .duell-portrait-spieler { animation: duellTreffer 0.5s ease-out; }
/* Ausweichen: der Verteidiger springt zur Seite */
.duell-von-spieler.duell-aktion-ausweich .duell-portrait-gegner  { animation: duellAusweichen 0.55s ease-out; }
.duell-von-gegner.duell-aktion-ausweich  .duell-portrait-spieler { animation: duellAusweichen 0.55s ease-out; }

/* Bildschirmwackeln bei kritischen Treffern.
   v24: Die Bewegung liegt auf den INNEREN Bereichen statt auf der Arena —
   so ragt nichts über den Fensterrand hinaus und die Höhenbegrenzung des
   Modals löst keine Bildlaufleiste aus. */
.duell-wackeln .duell-seite,
.duell-wackeln .duell-mitte { animation: duellWackeln 0.45s ease-out; }

.duell-aktion-crit {
  box-shadow: inset 0 0 40px rgba(255, 120, 0, 0.55);
}

/* Feuer-/Rauchschwaden im Hintergrund der Arena (Feuerwehr-Thema) */
.duell-rauch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.duell-rauch span {
  position: absolute;
  bottom: 6px;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle, rgba(200, 200, 200, 0.55) 0%, rgba(200, 200, 200, 0) 70%);
  border-radius: 50%;
  animation: duellRauchAuf 3.2s ease-in infinite;
}

.duell-rauch span:nth-child(1) { left: 12%; animation-delay: 0s; }
.duell-rauch span:nth-child(2) { left: 48%; animation-delay: 1.1s; }
.duell-rauch span:nth-child(3) { left: 78%; animation-delay: 2.2s; }

.duell-steuerung,
.duell-nachher-knoepfe {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Bewegungsreduktion respektieren (Betriebssystem-Einstellung) */
@media (prefers-reduced-motion: reduce) {
  .duell-arena *,
  .duell-wackeln .duell-seite,
  .duell-wackeln .duell-mitte {
    animation: none !important;
  }
}

/* ============================================================================
   ANHANG v25: Eigenständige Seite „Neues Passwort setzen" (passwort-neu.html)
   ========================================================================== */
.passwort-neu-seite {
  margin: 0;
  padding: 24px;
  background: #2b2d42;
  min-height: 100vh;
}

.passwort-neu-box {
  max-width: 420px;
  margin: 8vh auto;
  padding: 24px;
  background: #F8F9FA;
  border: 3px solid #111;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #111;
}

.passwort-neu-box h1 {
  margin: 0 0 10px;
  font-size: 21px;
}

.pw-label {
  display: block;
  margin: 12px 0 4px;
  font-weight: bold;
}

.pw-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 15px;
  border: 3px solid #111;
  border-radius: 8px;
}

.pw-meldung {
  margin-top: 14px;
  font-weight: bold;
}

.pw-erfolg { color: #2e9e44; }
.pw-fehler { color: #D62828; }

.pw-zurueck {
  color: #111;
  font-weight: bold;
}

/* v25: Selbsthilfe-Links in der Login-Maske + Hinweis-Variante der Fehlerzeile */
.login-hilfe {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: bold;
  color: #D62828;
  text-decoration: underline;
  cursor: pointer;
}

.btn-link:hover { color: #A31D1D; }

.maske-hinweis {
  color: #2e9e44 !important;
}