/* Forever-Versionsseite (forever.html): Ordnung und Hierarchie im GuildLoot-Design.
   Nur Darstellung – Inhalte, Anker und Werkzeuge bleiben unverändert. */

/* ---------- Status-Chips (neu / geändert / Classic …) ---------- */
.fx-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font:600 11px/1.6 system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;color:var(--muted);background:transparent;vertical-align:middle}
.fx-chip-new{color:#7be3a4;border-color:#7be3a466;background:#7be3a414}
.fx-chip-changed{color:#ecd09a;border-color:#ecd09a66;background:#ecd09a12}
.fx-chip-unchanged{color:#aac2ca;border-color:#aac2ca44}
.fx-chip-removed{color:#ef8a8a;border-color:#ef8a8a55;background:#ef8a8a10}
.fx-chip-open,.fx-chip-stand{color:#aac2ca;border-color:#aac2ca44}
.fx-chip-beta{color:#0b1a22;background:var(--cyan);border-color:var(--cyan)}
.character-status.fx-chip{display:inline-flex}

/* ---------- Eine Datenstand-Zeile pro Seite ---------- */
.fx-datenstand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 26px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:#0b1f29;font-size:13px;line-height:1.5;color:var(--muted)}
.fx-datenstand-line{margin:0;display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.fx-datenstand-details{flex:0 0 auto}
.fx-datenstand-details>summary{cursor:pointer;color:var(--cyan);font-weight:700;list-style:none}
.fx-datenstand-details>summary::-webkit-details-marker{display:none}
.fx-datenstand-details>summary::after{content:" ▾";font-size:11px}
.fx-datenstand-details[open]{flex-basis:100%}
.fx-datenstand-details[open]>summary::after{content:" ▴"}
.fx-datenstand-details ul{margin:10px 0 4px;padding-left:18px;display:grid;gap:8px}
.fx-datenstand-details li{line-height:1.55}
.fx-datenstand-details strong{color:var(--text)}
.fx-datenstand a{color:var(--cyan)}

/* Übrige Hinweise: schmal statt großer gelber Kästen */
.content .notice{padding:8px 12px!important;margin:12px 0!important;border:0!important;border-left:3px solid #ecd09a66!important;border-radius:0 8px 8px 0!important;background:#ecd09a0a!important;color:var(--muted)!important;font-size:13px!important;line-height:1.55!important}
.content .notice a{color:var(--cyan)!important}
.content .notice.fx-hint{border-left-color:#67e7ec55!important;background:#67e7ec08!important}

/* Quellenlinks lesbar auf dunklem Grund */
.fx-sources a,.character-muted a,.professions-note a{color:var(--cyan)!important;text-decoration:underline;text-decoration-color:#67e7ec66;text-underline-offset:2px}
.fx-sources a:hover,.character-muted a:hover{color:#fff!important}

/* ---------- Übersicht: Schnellzugriff ---------- */
.fx-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0 34px}
.fx-quick a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-decoration:none;min-width:0}
.fx-quick a:hover,.fx-quick a:focus-visible{border-color:var(--cyan);background:#123341}
.fx-quick img{width:40px;height:40px;border-radius:8px;border:1px solid #526e77;flex:none}
.fx-quick span{display:grid;min-width:0}
.fx-quick strong{font-size:15px;color:var(--gold)}
.fx-quick small{font-size:12px;color:var(--muted);line-height:1.4}
.fx-more-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ---------- Völker: Auswahl-Leiste → Steckbrief ---------- */
.fx-keyfacts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.fx-keyfacts li::before{content:"› ";color:var(--cyan)}
.fx-keyfacts strong{color:var(--text)}
.fx-race-bar{display:grid!important;gap:8px!important;margin:16px 0 18px!important}
.fx-race-faction{align-self:center;font:800 11px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7fa7ff;min-width:64px}
.fx-horde .fx-race-faction{color:#ef8a8a}
.fx-race-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fx-race-choice{flex-direction:row!important;gap:8px!important;min-width:0!important;max-width:none!important;padding:5px 12px 5px 5px!important;border-radius:999px!important;font-size:14px}
.fx-race-choice .character-icon{width:30px;height:30px;border-radius:50%}
.fx-alliance .fx-race-choice[aria-pressed=true]{border-color:#7fa7ff!important;background:#7fa7ff22!important;color:#fff!important}
.fx-horde .fx-race-choice[aria-pressed=true]{border-color:#ef8a8a!important;background:#ef8a8a22!important;color:#fff!important}
.fx-steckbrief{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 20px;margin:0 0 20px}
#raceTitle{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 12px;font-size:22px;color:var(--gold)}
.fx-race-portrait{width:56px!important;height:56px!important;border-radius:12px!important}
.fx-faction.fx-alliance{color:#a9c1ff;border-color:#7fa7ff77;background:#7fa7ff18}
.fx-faction.fx-horde{color:#ffb0b0;border-color:#ef8a8a77;background:#ef8a8a18}
.fx-label{display:block;margin:0 0 6px;font:800 11px/1.3 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6f9aa7}
.fx-race-classes{margin:0 0 14px}
.fx-class-list,.fx-race-links{display:flex;flex-wrap:wrap;gap:6px}
.fx-class-link,.fx-race-link{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:1px solid var(--line);border-radius:999px;background:#0b1f29;color:var(--text)!important;text-decoration:none!important;font-size:13px;font-weight:600}
.fx-class-link:hover,.fx-race-link:hover{border-color:var(--cyan)}
.fx-mini-icon{width:22px;height:22px;border-radius:50%;border:1px solid #526e77;flex:none}
.fx-subhead{display:flex;align-items:center;gap:8px;margin:6px 0 8px;font-size:15px;color:var(--text)}
/* Volksfähigkeiten als kompakte Liste */
.fx-racial-list{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin-top:4px!important;border-top:1px solid var(--line)}
.fx-racial-list>.ability-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.fx-racial-list .ability-summary{padding:9px 4px;gap:10px;flex-wrap:nowrap;display:flex}
.fx-racial-list .ability-summary .character-icon{width:30px;height:30px;border-radius:6px}
.fx-racial-list .ability-summary strong{flex:1;min-width:0}
.fx-racial-list .ability-body{padding:0 4px 12px 44px;font-size:14px}
#voelker .character-more{margin:14px 0}

/* ---------- Klassen: kompakte Karten ---------- */
#classCards .character-card{display:flex;flex-direction:column;gap:6px}
#classCards .character-card p{margin:0}
#classCards .character-heading{margin-bottom:4px}
#classCards .character-icon{width:44px;height:44px;border-radius:10px}
#classCards .fx-label{margin-top:8px}
.fx-actions{margin-top:auto;padding-top:10px;gap:6px!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center}
.fx-actions>*{width:auto!important;flex:0 0 auto}
.fx-actions{gap:4px 16px!important;border-top:1px solid var(--line)}
.fx-actions .loot-link{padding:2px 0!important;font-size:13px!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;font-weight:700;text-decoration:underline;text-decoration-color:#67e7ec55;text-underline-offset:3px}
.fx-actions .loot-link::after{content:" →"}

/* ---------- Sidebar: drei Gruppen, ruhiger ---------- */
.fx-nav .nav-group a{padding:8px 12px;font-weight:700;font-size:15px}
.fx-nav .nav-group small{margin:16px 12px 6px}

/* Seitenkopf etwas flacher, damit Datenstand und Schnellzugriff früher sichtbar sind */
main>.hero#start{min-height:470px}

/* ---------- Handy ---------- */
@media (max-width:1100px){.fx-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .shell>.side{position:sticky!important;top:var(--gl-top,0px);z-index:20;padding:6px 0!important;height:auto!important;border-right:0!important;border-bottom:1px solid var(--line)!important;background:#061018f2!important}
  .shell>.side .side-logo{display:none!important}
  .fx-nav{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:0!important;padding:0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fx-nav::-webkit-scrollbar{display:none}
  .fx-nav .nav-group{display:flex!important;flex:0 0 auto!important;gap:4px!important;align-items:center;border:0!important;padding:0 8px 0 0!important}
  .fx-nav .nav-group+.nav-group{border-left:1px solid #28556466!important;padding-left:8px!important}
  .fx-nav .nav-group small{display:none!important}
  .fx-nav .nav-group a{flex:0 0 auto;padding:6px 11px!important;font-size:13px!important;white-space:nowrap;border-radius:999px}
  .fx-nav .nav-group a i{display:none}
  html{scroll-padding-top:calc(var(--gl-top,0px) + 56px)}
  main>.hero#start{min-height:0!important;padding:30px 18px 34px!important}
  .content{padding:22px 16px!important}
  .fx-datenstand{font-size:12px;padding:8px 10px}
  .fx-quick{grid-template-columns:1fr;gap:8px}
  .fx-race-bar{display:block!important}
  .fx-race-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;scrollbar-width:thin}
  .fx-race-choice{flex:0 0 auto!important}
  .fx-steckbrief{padding:14px}
  #raceTitle{font-size:19px}
  .fx-race-portrait{width:44px!important;height:44px!important}
  .fx-racial-list .ability-summary{display:flex!important}
  .fx-racial-list .ability-summary .character-status{grid-column:auto}
  .fx-racial-list .ability-body{padding-left:4px}
}

/* Rechtliche Links in der Fußzeile (§ 5 DDG) */
.fx-legal{margin-top:6px;font-size:13px}
.fx-legal a{color:var(--cyan)}