* {
  box-sizing: border-box;
}

:root {
  --kopfzeile-hoehe: 64px; /* Fallback, shared.js praezisiert das dynamisch */
}

body {
  font-family: system-ui, sans-serif;
  background: #1c1e22;
  color: #e6e6e6;
  margin: 0;
  padding: 0;
  padding-bottom: 64px; /* Platz fuer fixierte Kopfzeile unten - shared.js praezisiert das dynamisch */
}

/* Seiten mit fest berechneter Spaltenhoehe (.vollhoehe-fuellen) duerfen
   selbst nicht mehr scrollen - sonst zeigt der Browser trotzdem einen
   Seiten-Scrollbalken, obwohl die Spalten intern schon eigenes Scrollen
   haben. Admin & Login/Registrieren bleiben bewusst aussen vor, da deren
   Inhalt (z.B. lange Benutzerliste) natuerlich weiterwachsen darf. */
body.keine-seiten-scroll {
  overflow: hidden;
}

.container {
  max-width: 420px;
  margin: 80px auto;
  padding: 32px;
  background: #26292f;
  border: 1px solid #383c44;
  border-radius: 6px;
}

.container-breit {
  margin: 20px;
  padding: 0px 32px 22px;
  background: #26292f;
  border: 1px solid #383c44;
  border-radius: 6px;
}

h1 {
  font-size: 20px;
  margin: 0 0 20px 0;
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #b8bcc4;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 16px;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
}

.btn-1 {
  padding: 9px 18px;
  background: linear-gradient(180deg, #4f7fd6 0%, #3d6dbf 60%, #345c9e 100%);
  border: 1px solid #5a8bdb;
  border-radius: 4px;
  color: #f0f0f5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #1c3a63,
    0 5px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.btn-1:hover {
  background: linear-gradient(180deg, #5a8ce0 0%, #4676ca 60%, #3a65ac 100%);
}

.btn-1:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 #1c3a63,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

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

.btn-sekundaer {
  padding: 9px 18px;
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.btn-sekundaer:hover {
  background: linear-gradient(180deg, #454b58 0%, #2f333c 60%, #282a31 100%);
  border-color: #6b3fa0;
}

.btn-sekundaer:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 #14161a,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

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

.btn-sekundaer:disabled:hover {
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border-color: #4a4f5a;
}

.btn-sekundaer:disabled:active {
  transform: none;
}

.fehler {
  color: #e06060;
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 16px;
}

.hinweis {
  color: #8a8f99;
  font-size: 13px;
  margin-top: 16px;
}

.hinweis a {
  color: #6a9be0;
}

.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.status {
  font-size: 13px;
  color: #7bc47f;
  min-height: 16px;
}

.kachel {
  display: block;
  padding: 20px;
  background: #1c1e22;
  border: 1px solid #383c44;
  border-radius: 4px;
  color: #e6e6e6;
  text-decoration: none;
  margin-bottom: 12px;
}

.kachel:hover {
  border-color: #3d6dbf;
}

.kachel-titel {
  font-size: 16px;
  margin-bottom: 4px;
}

.kachel-beschreibung {
  font-size: 13px;
  color: #8a8f99;
}

.admin-abschnitt-titel {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 4px;
}

.admin-abschnitt-titel:first-of-type {
  margin-top: 0;
}

.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.admin-tabelle th,
.admin-tabelle td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #383c44;
  font-size: 14px;
}

.admin-tabelle th {
  color: #8a8f99;
  font-weight: normal;
  font-size: 13px;
}

.admin-tabelle input[type="number"] {
  width: 80px;
  padding: 6px 8px;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
  margin: 0;
}

.admin-tabelle input[type="date"] {
  width: 150px;
  padding: 6px 8px;
  margin: 0;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
  color-scheme: dark;
}

.admin-tabelle input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

/* ===================================================
   Admin-Bereich - Punktesystem-Spalte links, Benutzer-
   tabelle nimmt den Rest der Breite.
   =================================================== */

.admin-spalten {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.admin-punktesystem {
  width: 280px;
  flex-shrink: 0;
}

.admin-tabelle-spalte {
  flex: 1;
  min-width: 0;
}

.einstellung-eingabe {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 16px;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
}

.einstellung-trenner {
  margin: 4px 0 12px;
  padding-top: 12px;
  border-top: 1px solid #383c44;
  color: #8a8f99;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.einstellung-checkbox-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  color: #e6e6e6;
  font-size: 14px;
}

.sperre-zeit-zeile {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sperre-zeit-eingabe {
  width: 110px;
  flex-shrink: 0;
}

.sperre-zeit-eingabe::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ===================================================
   Modal-Dialog (Punktabzug-Popup) - einfacher zentrierter
   Kasten ueber abgedunkeltem Hintergrund.
   =================================================== */

.modal-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #26292f;
  border: 1px solid #383c44;
  border-radius: 6px;
  padding: 24px;
  width: 320px;
}

.admin-tabelle input[type="text"] {
  width: 160px;
  padding: 6px 8px;
  margin: 0;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
}

/* Dropdowns in der Admin-Tabelle (Klasse, Rolle) - gleiches Aussehen wie die Textfelder */
.admin-tabelle select {
  width: 140px;
  padding: 6px 8px;
  margin: 0;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
}
.admin-tabelle select option {
  background: #1c1e22;
  color: #e6e6e6;
}

.abzeichen {
  font-size: 11px;
  color: #d4af37;
  border: 1px solid #6b5a20;
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 8px;
}

.btn-gefahr {
  padding: 6px 12px;
  background: linear-gradient(180deg, #5a3232 0%, #3a1f1f 60%, #2e1717 100%);
  border: 1px solid #7a3838;
  border-radius: 4px;
  color: #f0a0a0;
  font-size: 13px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 0 #14161a,
    0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.btn-gefahr:hover {
  background: linear-gradient(180deg, #6b3a3a 0%, #452424 60%, #351c1c 100%);
  border-color: #a34d4d;
}

.btn-gefahr:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 #14161a,
    0 1px 3px rgba(0, 0, 0, 0.3);
}

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

.btn-gefahr:disabled:hover {
  background: linear-gradient(180deg, #5a3232 0%, #3a1f1f 60%, #2e1717 100%);
  border-color: #7a3838;
}

.btn-gefahr:disabled:active {
  transform: none;
}

/* ===================================================
   Checkboxen ueberall im Tool (Gildenweekly-Haken, Admin-Flag,
   Ranking-Flag) - ersetzt die native Browser-Optik durch denselben
   3D-Stil wie Buttons/Dropdowns: unmarkiert leicht eingesunken,
   markiert wie ein gedrueckter goldener Knopf mit Haken.
   =================================================== */
input[type="checkbox"].gwk-checkbox,
input[type="checkbox"].admin-checkbox,
input[type="checkbox"].ranking-checkbox,
input[type="checkbox"].sperre-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  background: linear-gradient(180deg, #24262c 0%, #1a1c20 100%);
  border: 1px solid #4a4f5a;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"].gwk-checkbox:hover,
input[type="checkbox"].admin-checkbox:hover,
input[type="checkbox"].ranking-checkbox:hover,
input[type="checkbox"].sperre-checkbox:hover {
  border-color: #6b3fa0;
}

input[type="checkbox"].gwk-checkbox:checked,
input[type="checkbox"].admin-checkbox:checked,
input[type="checkbox"].ranking-checkbox:checked,
input[type="checkbox"].sperre-checkbox:checked {
  background: linear-gradient(180deg, #ffdf4d 0%, #ffd700 60%, #d4b200 100%);
  border-color: #ffe680;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 #8a7300,
    0 3px 5px rgba(0, 0, 0, 0.35);
}

input[type="checkbox"].gwk-checkbox:checked::after,
input[type="checkbox"].admin-checkbox:checked::after,
input[type="checkbox"].ranking-checkbox:checked::after,
input[type="checkbox"].sperre-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #14161a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"].gwk-checkbox:active,
input[type="checkbox"].admin-checkbox:active,
input[type="checkbox"].ranking-checkbox:active,
input[type="checkbox"].sperre-checkbox:active {
  transform: translateY(1px);
}

input[type="checkbox"].gwk-checkbox:disabled,
input[type="checkbox"].admin-checkbox:disabled,
input[type="checkbox"].ranking-checkbox:disabled,
input[type="checkbox"].sperre-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===================================================
   Rangliste - Tabelle auf der Hauptseite, fuer alle
   eingeloggten Nutzer sichtbar. Eigene Zeile wird hervor-
   gehoben, damit man sich sofort selbst findet.
   =================================================== */

.rang-tabelle {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 0;
}

/* In Spalte 3 (Rangliste) braucht der Fehler-Platzhalter keinen
   reservierten Platz, solange kein Fehler da ist - zieht den
   Tabellenkopf naeher an die Ueberschrift heran. */
.modul-drei .fehler {
  min-height: 0;
  margin-bottom: 0;
}

.rang-tabelle th,
.rang-tabelle td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #383c44;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rang-tabelle th {
  color: #8a8f99;
  font-weight: normal;
  font-size: 13px;
}

.rang-tabelle td:last-child,
.rang-tabelle th:last-child {
  text-align: right;
}

/* Spalte 3 (SK-Rangliste): Name ist hier die letzte Spalte. Anwesende
   linksbuendig, Abwesende rechtsbuendig - ersetzt die vorherige blaue
   Hervorhebung als Unterscheidungsmerkmal. */
#tabelle th:last-child {
  text-align: left;
}

#tabelle td:last-child {
  text-align: right;
}

#tabelle tr.anwesend-zeile td:last-child {
  text-align: left;
}

#gp-tabelle td:last-child,
#gp-tabelle th:last-child {
  width: 55px;
}

.rang-tabelle tr.eigene-zeile td {
  color: #ffd700;
}

.lootsperre-sternchen {
  color: #ef4444;
  font-weight: 700;
}

/* ===================================================
   Mein Bereich - persoenliche Statuskarte (Punkte, Rang,
   ob man aktuell ueberhaupt in der Rangliste gefuehrt wird).
   =================================================== */

.status-karte {
  padding: 24px;
  background: #1c1e22;
  border: 1px solid #383c44;
  border-radius: 4px;
  margin-bottom: 16px;
}

.status-karte-zeile {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #2c2f36;
  font-size: 14px;
}

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

.status-karte-label {
  color: #8a8f99;
}

.status-karte-wert {
  font-weight: 600;
}

/* ===================================================
   Mein Bereich - Punkte-Karte links, Punkte-Historie
   nimmt sich rechts den Rest der (breiten) Seite.
   =================================================== */

.mein-bereich-spalten {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.mein-bereich-links {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mein-bereich-rechts {
  flex: 1;
  min-width: 0;
}

/* ===================================================
   Hauptseite - jedes Modul bekommt einen eigenen Rahmen
   statt einem gemeinsamen grossen Kasten. Links Mitglieder-
   liste (fest 383px), Mitte dynamisch, rechts Rangliste
   (fest 383px).
   =================================================== */

.seiten-module {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 20px;
  --spalte-standard-breite: 280px; /* Spalte 1, 3, 4, 5 - etwas breiter als die bisherigen 255px */
}

.modul-rahmen {
  background: #26292f;
  border: 1px solid #383c44;
  border-radius: 6px;
  padding: 32px;
  box-sizing: border-box;
}

.modul-titel {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}

.modul-links {
  width: var(--spalte-standard-breite);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modul-mitte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.boss-akkordeon {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}

.boss-akkordeon::-webkit-scrollbar {
  display: none; /* Chrome/Edge/Safari */
}

.boss-akk-abschnitt {
  flex-shrink: 0;
}

.boss-akk-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boss-akk-items:not(:empty) {
  margin-top: 8px;
}

.boss-akk-item-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #1c1e22;
  border: 1px solid #383c44;
  border-radius: 4px;
  cursor: default;
}

.boss-akk-item-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.boss-akk-item-name {
  font-size: 20px;
  color: #ffffff;
}

.boss-akk-item-bewerber {
  flex: 1;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}

.bewerber-typ-bis { color: #ffd700; }
.bewerber-typ-upgrade { color: #a335ee; }
.bewerber-typ-transmog { color: #3fd67a; }
.bewerber-typ-entzaubert { color: #94a3b8; }

.boss-akk-item-rechts {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hoehere Spezifitaet (zwei Klassen) als .boss-button, damit width/padding/
   font-size hier sicher gewinnen statt von der allgemeinen .boss-button-
   Regel ueberschrieben zu werden - vorher lief das je nach Reihenfolge im
   Stylesheet mal so, mal so. */
.boss-button.item-zuweisen-btn {
  width: auto;
  min-width: 150px;
  margin-left: auto;
  padding: 8px 14px;
  font-size: 13px;
  color: #4ade80;
}

/* Mehrfach frei: derselbe Spieler ist bei mehreren offenen Items als Naechster
   dran - dann sind alle seine Items gleichzeitig anklickbar und leuchten gold,
   damit der Lootmaster sieht, dass er hier die Wahl hat. */
.boss-button.item-zuweisen-btn.mehrfach-frei:not(:disabled) {
  border-color: #ffd700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px #ffd700,
    0 0 12px 3px rgba(255, 215, 0, 0.45),
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
}

.boss-button.item-zuweisen-btn.vergeben {
  color: #f87171;
  border-color: #f87171;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px #f87171,
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
}

.boss-button.item-zuweisen-btn.entzaubern {
  color: #38bdf8;
  border-color: #38bdf8;
}

.boss-button.item-zuweisen-btn.entzaubert {
  color: #f87171;
  border-color: #f87171;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px #f87171,
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
}

/* Kein "Reindruecken" beim Klicken - Zeile soll nicht wackeln/niedriger
   werden, deshalb hier bewusst kein transform wie beim normalen
   .boss-button:active. */
.boss-button.item-zuweisen-btn:active {
  transform: none;
}

.boss-button.item-zuweisen-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.boss-button.item-zuweisen-btn:disabled:hover {
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border-color: #4a4f5a;
}

.boss-button.aktiv {
  border-color: #ffd700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px #ffd700,
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
}

.boss-button {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: 13px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #f0f0f5;
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.boss-button:hover {
  background: linear-gradient(180deg, #454b58 0%, #2f333c 60%, #282a31 100%);
  border-color: #6b3fa0;
}

.boss-button:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 #14161a,
    0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Abzeichen fuer "alle Items dieses Bosses vergeben" - leuchtender 3D-Knopf
   mit Haken, damit man beim Runterscrollen auf einen Blick sieht, welche
   Bosse schon komplett abgearbeitet sind. */
.boss-fertig-abzeichen {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 28%, #d9ffd0 0%, #4ade80 32%, #16a34a 70%, #0d5c2c 100%);
  border: 1px solid #86efac;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 2px 0 #0a4a24,
    0 0 10px 2px rgba(74, 222, 128, 0.8),
    0 0 20px 6px rgba(74, 222, 128, 0.35);
}

.modul-drei {
  width: var(--spalte-standard-breite);
  flex-shrink: 0;
  overflow: hidden;
}

.modul-rechts {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modul-fuenf {
  width: var(--spalte-standard-breite);
  flex-shrink: 0;
  overflow: hidden;
}

.gilde-historie-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #383c44;
  color: #8a8f99;
  font-size: 13px;
}

.gilde-historie-kopf span:first-child,
.gilde-historie-zeile .gilde-historie-name {
  flex: 1;
}

.gilde-historie-kopf span:nth-child(2),
.gilde-historie-kopf span:nth-child(3),
.gilde-historie-delta,
.gilde-historie-punkte {
  width: 60px;
  text-align: right;
}

.gilde-historie-liste {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* ~eine Zeile Puffer unten, damit vor dem Dropdown-Button nicht die
     letzte Zeile nur halb sichtbar ist - Gesamthoehe der Spalte bleibt
     dadurch unveraendert, nur die Liste selbst wird etwas kuerzer. */
  margin-bottom: 40px;
  /* Einzige scrollbare Flaeche auf der Seite (Historie-Feed) - nur per
     Mausrad, kein sichtbarer Scrollbalken. Ueberschrift bleibt fix oben,
     weil sie ausserhalb dieses Elements liegt. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}

.gilde-historie-liste::-webkit-scrollbar {
  display: none; /* Chrome/Edge/Safari */
}

.gilde-historie-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #383c44;
  font-size: 14px;
  cursor: default;
}

.gilde-historie-name {
  color: #e6e6e6;
}

.gilde-historie-delta,
.gilde-historie-punkte {
  color: #a0a4ab;
  white-space: nowrap;
}

/* Spalte 4 (Rangliste-Seite) hat nur noch Name+Event statt drei Spalten -
   gezielt per ID ueberschrieben, damit Mein Bereichs eigene (weiterhin
   dreispaltige) Historie unangetastet bleibt. */
#gilde-historie-kopf span:nth-child(2) {
  width: auto;
  flex: 1;
  text-align: left;
}

#gilde-historie-kopf span:first-child,
#gilde-historie-liste .gilde-historie-name {
  flex: 0 0 150px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gilde-historie-event {
  flex: 1;
  min-width: 0;
  color: #a0a4ab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gilde-historie-item-weiss {
  color: #ffffff;
}

.gilde-historie-item-blau {
  color: #38bdf8;
}

/* ===================================================
   Mitgliederliste (Hauptseite links) - alphabetisch,
   rundes Anwesenheits-Kontrollkaestchen pro Zeile.
   =================================================== */

.mitglieder-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mitglied-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 4px;
}

.anwesenheit-haken {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #6b3fa0;
  background: #1c1e22;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.anwesenheit-haken.aktiv {
  background: #a335ee;
  border-color: #d19fff;
}

.mitglied-name {
  font-size: 14px;
}

.online-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fd67a;
  box-shadow: 0 0 4px 1px rgba(63, 214, 122, 0.6);
  flex-shrink: 0;
}

/* ===================================================
   Anzeigename-Formular in der Kopfzeile (nur Mein Bereich) -
   wird per JS neben den Seitentitel gehaengt (margin-left: auto
   schiebt es an den rechten Rand der Kopfzeile).
   =================================================== */

.header-anzeigename {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-anzeigename input[type="text"] {
  width: 200px;
  margin: 0;
  padding: 7px 10px;
  background: #1c1e22;
  border: 1px solid #454952;
  border-radius: 4px;
  color: #e6e6e6;
  font-size: 14px;
}

.header-anzeigename button {
  padding: 7px 14px;
  background: #3d6dbf;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.header-anzeigename button:hover {
  background: #3560a8;
}

/* ===================================================
   Demo: Boss-1-Item-Auswahl in Mein Bereich - reine
   Frontend-Demo (kein Server-Zustand), zeigt wie eine
   spaetere Wunschliste aussehen koennte.
   =================================================== */

.demo-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}

.wunsch-item {
  position: relative;
  width: 180px;
  height: 51px;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1c1e22;
  border: 1px solid #ffffff;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, border-width 0.2s ease;
}

.wunsch-item:hover {
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.5);
}

.wunsch-item.typ-upgrade {
  border-width: 3px;
  border-color: #a335ee;
  box-shadow: 0 0 14px 3px rgba(163, 53, 238, 0.5);
}

.wunsch-item.typ-bis {
  border-width: 3px;
  border-color: #ffd700;
  box-shadow: 0 0 14px 3px rgba(255, 215, 0, 0.5);
}

.wunsch-item.typ-transmog {
  border-width: 3px;
  border-color: #3fd67a;
  box-shadow: 0 0 14px 3px rgba(63, 214, 122, 0.5);
}

/* Item wurde dem angezeigten Spieler bereits zugewiesen - rot markiert,
   ohne Leuchten, nicht mehr anklickbar (siehe baueItemKachel). Steht nach
   den typ-X-Regeln, damit es die Typ-Farbe/das Leuchten ueberschreibt. */
.wunsch-item.vergeben {
  border-width: 3px;
  border-color: #e05a5a;
  box-shadow: none;
  cursor: default;
}

.wunsch-item.vergeben:hover {
  box-shadow: none;
}

.wunsch-item.gesperrt {
  cursor: default;
  opacity: 0.6;
}

.wunsch-item.gesperrt:hover {
  box-shadow: none;
}

.wunsch-item-typ-label {
  position: absolute;
  top: -9px;
  right: 6px;
  background: #1c1e22;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  border: 1px solid;
  letter-spacing: 0.5px;
}

.wunsch-item.typ-bis .wunsch-item-typ-label { color: #ffd700; border-color: #ffd700; }
.wunsch-item.typ-upgrade .wunsch-item-typ-label { color: #a335ee; border-color: #a335ee; }
.wunsch-item.typ-transmog .wunsch-item-typ-label { color: #3fd67a; border-color: #3fd67a; }

.header-gp-info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 17px;
  margin-left: 24px;
  white-space: nowrap;
}

.header-test-als {
  margin-left: 24px;
  width: 260px;
}

.header-prio-gold {
  color: #ffd700;
}

.wunsch-item-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #26292f;
  border-radius: 4px;
  color: #5f6773;
  font-size: 12px;
}

.wunsch-item-icon img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
}

.wunsch-item-name {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===================================================
   Item-Tooltip (Rechtsklick) - selbstgebaut, im Stil des
   original WoW-Tooltips: Name in Qualitaetsfarbe, Gegen-
   standsstufe in Gold, weisse Detailzeilen, gruene
   Anlegen-Effekte, Preis unten mit Muenzfarben.
   =================================================== */

#item-tooltip {
  position: fixed;
  display: none;
  z-index: 3000;
  background: #000000;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 14px;
  color: #ffffff;
  max-width: 320px;
  line-height: 1.45;
  pointer-events: none;
}

#item-tooltip .tt-name {
  font-weight: 600;
  margin-bottom: 2px;
}

#item-tooltip .tt-ilvl {
  color: #ffd100;
  margin-bottom: 2px;
}

#item-tooltip .tt-zeile-paar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

#item-tooltip .tt-gruen {
  color: #1eff00;
}

#item-tooltip .tt-preis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

#item-tooltip .tt-gold { color: #ffd700; }
#item-tooltip .tt-silber { color: #c7c7c7; }
#item-tooltip .tt-kupfer { color: #b87333; }

/* ===================================================
   Boss-Liste (rechte Haelfte Mein Bereich) - jeder Boss
   einzeln auf-/zuklappbar, unabhaengig voneinander.
   =================================================== */

.boss-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sperre-banner {
  padding: 10px 16px;
  margin-bottom: 4px;
  background: linear-gradient(180deg, #5a3232 0%, #3a1f1f 60%, #2e1717 100%);
  border: 1px solid #7a3838;
  border-radius: 6px;
  color: #f0a0a0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.boss-abschnitt {
  background: #1c1e22;
  border: 1px solid #383c44;
  border-radius: 4px;
  overflow: hidden;
}

.boss-abschnitt-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 3px;
  font-size: 14px;
  font-weight: 600;
}

.boss-abschnitt-wunsch {
  font-size: 12px;
  font-weight: normal;
  color: #a335ee;
}

.boss-abschnitt-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0px 14px 12px;
}

/* ===================================================
   Historie-Akkordeon (linke Haelfte Mein Bereich) - der
   oberste Eintrag zeigt automatisch den aktuellen Stand,
   da neueste Eintraege immer oben stehen. Details klappen
   einzeln auf, nie mehrere gleichzeitig.
   =================================================== */

.historie-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  /* ~eine Zeile Puffer unten, damit die letzte Zeile nicht nur halb
     sichtbar ist - Spaltenhoehe bleibt dadurch unveraendert. */
  margin-bottom: 40px;
  /* Scroll nur per Mausrad, kein sichtbarer Balken - Hoehe kommt jetzt von
     der Elternspalte (.mein-bereich-links, vollhoehe-fuellen). */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}

.historie-liste::-webkit-scrollbar {
  display: none; /* Chrome/Edge/Safari */
}

.historie-zeile {
  background: #1c1e22;
  border: 1px solid #383c44;
  border-radius: 4px;
  overflow: hidden;
}

.historie-zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
}

.historie-zeile-kopf:hover {
  background: #22252b;
}

.historie-zeile-wert {
  font-weight: 600;
}

.historie-zeile-neben {
  font-size: 12px;
  color: #8a8f99;
}

.historie-zeile-detail {
  display: none;
  padding: 0 14px 12px;
  font-size: 12px;
  color: #8a8f99;
  border-top: 1px solid #2c2f36;
  margin-top: 2px;
  padding-top: 10px;
}

.historie-zeile.offen .historie-zeile-detail {
  display: block;
}

/* ===================================================
   Kopfzeile - fixiert unten, Menue-Button links, wird von
   shared.js (LegionTool.buildHeader) erzeugt.
   =================================================== */

header.site-header {
  background: #20232a;
  border-top: 1px solid #383c44;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#app-nav {
  position: relative;
  display: inline-block;
}

#app-nav .nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #4f7fd6 0%, #3d6dbf 60%, #345c9e 100%);
  color: #f0f0f5;
  border: 1px solid #5a8bdb;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #1c3a63,
    0 5px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

#app-nav .nav-toggle:hover {
  background: linear-gradient(180deg, #5a8ce0 0%, #4676ca 60%, #3a65ac 100%);
}

#app-nav .nav-toggle:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 #1c3a63,
    0 2px 4px rgba(0, 0, 0, 0.3);
}

#app-nav.open .nav-toggle {
  border-color: #6b3fa0;
}

#app-nav .nav-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: linear-gradient(180deg, #2c2f37 0%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 8px 0 #14161a,
    0 14px 24px rgba(0, 0, 0, 0.5);
}

#app-nav.open .nav-dropdown {
  display: block;
}

#app-nav .nav-dropdown a {
  display: block;
  padding: 10px 16px;
  color: #e6e6e6;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #383c44;
}

#app-nav .nav-dropdown a:hover {
  background: #a3e635;
  color: #14161a;
}

#app-nav .nav-dropdown a.active {
  background: linear-gradient(180deg, #6b3fa0 0%, #55307f 100%);
  color: #ffffff;
  font-weight: 600;
}

#app-nav .nav-abmelden {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #e08080;
  font-size: 14px;
  cursor: pointer;
}

#app-nav .nav-abmelden:hover {
  background: #5a3232;
  color: #f0a0a0;
}

/* ===================================================
   Lootvergabe-Overlay-Knopf in der Kopfzeile (siehe shared.js buildHeader) -
   oeffnet lootvergabe-overlay.html als eigenes Popup-Fenster.
   =================================================== */
.lv-widget-oeffnen-btn {
  display: inline-block;
  margin-left: 12px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #f0f0f5;
  text-decoration: none;
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.lv-widget-oeffnen-btn:hover {
  background: linear-gradient(180deg, #454b58 0%, #2f333c 60%, #282a31 100%);
  border-color: #6b3fa0;
}

.lv-widget-oeffnen-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 #14161a,
    0 2px 4px rgba(0, 0, 0, 0.35);
}

.header-page-title {
  margin-left: 16px;
  font-weight: 600;
  font-size: 16px;
  color: #e6e6e6;
}

/* ===================================================
   Speicher-Toast - kurze, nicht-blockierende Bestaetigung
   unten rechts, verschwindet von selbst wieder.
   =================================================== */

/* ===================================================
   Eigenes 3D-Dropdown - ersetzt natives <select> ueberall im Tool, damit
   auch die aufgeklappte Liste gestylt werden kann (nativ nicht moeglich).
   Aufbau/Verhalten kommt aus LegionTool.baueDropdown3D() in shared.js.
   =================================================== */

.dropdown3d {
  position: relative;
}

.dropdown3d-toggle {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #f0f0f5;
  background: linear-gradient(180deg, #3a3f4a 0%, #2a2d34 60%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0 #14161a,
    0 5px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.dropdown3d-toggle:hover {
  background: linear-gradient(180deg, #454b58 0%, #2f333c 60%, #282a31 100%);
  border-color: #6b3fa0;
}

.dropdown3d-toggle:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 #14161a,
    0 2px 4px rgba(0, 0, 0, 0.35);
}

.dropdown3d.offen .dropdown3d-toggle {
  border-color: #6b3fa0;
}

.dropdown3d-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown3d-pfeil {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.dropdown3d.offen .dropdown3d-pfeil {
  transform: rotate(180deg);
}

/* Aufgeklappte Liste: wird per JS an <body> gehaengt statt in der
   gezoomten Seitenstruktur zu bleiben - dort kaeme es sonst durch die
   "zoom"-Skalierung der Seite zu einem Versatz bei Position/Breite.
   Sichtbarkeit daher ueber eine eigene .offen-Klasse direkt am Element,
   nicht ueber den Elternselektor. Gleiche "3D"-Tiefe wie die uebrigen
   Buttons, nur staerker fuer den Panel-Charakter. Hoehe fuer ca. 10
   Eintraege, Rest scrollt nur per Mausrad ohne sichtbaren Balken. */
.dropdown3d-liste {
  display: none;
  position: fixed;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, #2c2f37 0%, #24262c 100%);
  border: 1px solid #4a4f5a;
  border-radius: 8px;
  box-shadow:
    0 8px 0 #14161a,
    0 14px 24px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 500;
  scrollbar-width: none;
}

.dropdown3d-liste.offen {
  display: block;
}

.dropdown3d-liste::-webkit-scrollbar {
  display: none;
}

.dropdown3d-option {
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  color: #d6d8dd;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown3d-option:hover {
  background: #a3e635;
  color: #14161a;
}

.dropdown3d-option.aktiv {
  background: linear-gradient(180deg, #6b3fa0 0%, #55307f 100%);
  color: #ffffff;
  font-weight: 600;
}


.speicher-toast {
  position: fixed;
  right: 16px;
  bottom: calc(var(--kopfzeile-hoehe) + 16px);
  z-index: 2000;
  background: #26292f;
  border: 1px solid #383c44;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 13px;
  color: #7bc47f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.speicher-toast.zeigen {
  opacity: 1;
}

.speicher-toast.fehler {
  color: #e08080;
}

/* ===================================================
   Farbvarianten fuer btn-1 - fuer Buttons mit mehreren Zustaenden
   (z.B. Raidstart/Raidende, Anwesenheit geben/bereits gegeben), gleiche
   3D-Optik wie btn-1, nur andere Grundfarbe.
   =================================================== */
.btn-1.btn-gruen {
  background: linear-gradient(180deg, #4fd67f 0%, #3dbf6d 60%, #349e5c 100%);
  border: 1px solid #5adb8b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #1c633a,
    0 5px 8px rgba(0, 0, 0, 0.3);
}
.btn-1.btn-gruen:hover {
  background: linear-gradient(180deg, #5ae08c 0%, #46ca76 60%, #3aac65 100%);
}

.btn-1.btn-rot {
  background: linear-gradient(180deg, #d64f4f 0%, #bf3d3d 60%, #9e3434 100%);
  border: 1px solid #db5a5a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #631c1c,
    0 5px 8px rgba(0, 0, 0, 0.3);
}
.btn-1.btn-rot:hover {
  background: linear-gradient(180deg, #e05a5a 0%, #ca4646 60%, #ac3a3a 100%);
}

.btn-1.btn-amber {
  background: linear-gradient(180deg, #d6a94f 0%, #bf8f3d 60%, #9e7434 100%);
  border: 1px solid #dbb85a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #63481c,
    0 5px 8px rgba(0, 0, 0, 0.3);
}
.btn-1.btn-amber:hover {
  background: linear-gradient(180deg, #e0b95a 0%, #caa046 60%, #ac863a 100%);
}

.btn-1.btn-grau {
  background: linear-gradient(180deg, #6b7280 0%, #565d6b 60%, #454b57 100%);
  border: 1px solid #7a8290;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 0 #2c3038,
    0 5px 8px rgba(0, 0, 0, 0.3);
}
.btn-1.btn-grau:hover {
  background: linear-gradient(180deg, #767d8c 0%, #616875 60%, #4f5661 100%);
}

.btn-1.btn-neon {
  background: linear-gradient(180deg, #bef264 0%, #a3e635 60%, #84cc16 100%);
  border: 1px solid #bef264;
  color: #14161a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 3px 0 #4d7c0f,
    0 5px 8px rgba(0, 0, 0, 0.3);
}
.btn-1.btn-neon:hover {
  background: linear-gradient(180deg, #d9f99d 0%, #bef264 60%, #a3e635 100%);
  color: #14161a;
}

/* ===================================================
   Anleitung (Hilfe-Seite fuer Spieler)
   =================================================== */
.anleitung-inhalt {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 20px;
}

.anleitung-intro {
  color: #b8bcc4;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 30px;
}

.anleitung-abschnitt {
  margin-bottom: 30px;
}

.anleitung-abschnitt h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8f99;
  border-top: 1px solid #383c44;
  padding-top: 18px;
  margin: 0 0 14px;
}

.anleitung-abschnitt:first-of-type h2 {
  border-top: none;
  padding-top: 0;
}

.anleitung-abschnitt p {
  font-size: 14px;
  line-height: 1.7;
  color: #e6e6e6;
  margin: 0 0 10px;
}

.anleitung-abschnitt ul {
  margin: 0 0 10px;
  padding-left: 22px;
}

.anleitung-abschnitt li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 6px;
}

.anleitung-hinweis {
  background: rgba(214, 169, 79, 0.1);
  border: 1px solid rgba(219, 184, 90, 0.35);
  border-radius: 5px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.65;
  margin: 14px 0;
}

.anleitung-hinweis strong {
  color: #dbb85a;
}

.anleitung-live-wert {
  color: #a3e635;
  font-weight: 700;
}

.anleitung-typ-bis { color: #ffd700; font-weight: 600; }
.anleitung-typ-upgrade { color: #a335ee; font-weight: 600; }
.anleitung-typ-transmog { color: #3fd67a; font-weight: 600; }
.anleitung-sternchen { color: #ef4444; font-weight: 700; }