/* ==========================================================================
   banrado.de – Fallout 76 Legendäre-Mod-Tracker
   Nutzt die Tokens aus /assets/css/main.css (--bg, --surface, --purple, ...)
   ========================================================================== */

.fo-wrap{max-width:1240px;margin:0 auto;padding:100px 20px 60px}
.fo-install .fo-wrap{padding-top:40px;font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh}
.fo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Toolnav ─────────────────────────────────────────────────────────── */
.fo-toolnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 10px;margin-bottom:18px}
.fo-tn-brand{font-weight:900;color:var(--heading);letter-spacing:.5px;padding:6px 12px;margin-right:6px}
.fo-tn-item{padding:6px 14px;border-radius:100px;color:var(--text);font-size:.9rem;font-weight:500;
  border:1px solid transparent;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.fo-tn-item:hover{background:rgba(167,139,250,.1);color:var(--heading)}
.fo-tn-item.is-active{background:rgba(167,139,250,.16);border-color:var(--border);color:var(--heading)}
.fo-tn-cta{margin-left:auto;border-color:var(--purple);color:var(--purple)}
.fo-tn-admin{color:var(--warning)}

/* ── Kopf ────────────────────────────────────────────────────────────── */
.fo-breadcrumb{font-size:.85rem;margin-bottom:18px;opacity:.75}
.fo-breadcrumb span{margin:0 6px;opacity:.5}
.fo-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:22px}
.fo-hero-compact{padding:20px 24px}
.fo-hero h1{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.fo-lead{max-width:78ch;margin-bottom:14px}
.fo-stats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.fo-stats span{background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:5px 14px;font-size:.82rem}
.fo-stats strong{color:var(--heading)}
.fo-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.fo-charname{margin:0}
.fo-inline-link{font-size:.85rem;margin-left:8px}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.fo-btn{display:inline-block;border:1px solid var(--border);background:var(--surface2);color:var(--heading);
  border-radius:100px;padding:9px 20px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.fo-btn:hover{border-color:var(--purple);color:var(--heading)}
.fo-btn-primary{background:var(--purple);border-color:var(--purple);color:#0b0715;font-weight:700}
.fo-btn-primary:hover{background:#c4b5fd;border-color:#c4b5fd;color:#0b0715}
.fo-btn-ghost{background:transparent}
.fo-btn-small{padding:5px 12px;font-size:.8rem}
.fo-btn-danger{border-color:var(--red);color:#fca5a5}
.fo-btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ── Abschnitte, Meldungen ───────────────────────────────────────────── */
.fo-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:22px}
.fo-section > h2{font-size:1.25rem}
.fo-prose p{max-width:80ch}
.fo-prose h2{margin-top:1.4em}
.fo-hint{font-size:.85rem;opacity:.8}
.fo-empty-state{opacity:.8}
.fo-msg{border-radius:10px;padding:12px 16px;margin-bottom:18px;border:1px solid var(--border);background:var(--surface2)}
.fo-msg-ok{border-color:rgba(34,197,94,.4);color:#86efac}
.fo-msg-error{border-color:rgba(192,57,43,.5);color:#fca5a5}
.fo-msg-info{border-color:rgba(245,158,11,.4);color:#fcd34d}

/* ── Fortschrittsbalken ──────────────────────────────────────────────── */
.fo-bars{display:flex;flex-direction:column;gap:14px}
.fo-bars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fo-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.82rem;margin-bottom:5px}
.fo-bar-label{color:var(--heading);font-weight:500}
.fo-bar-num{opacity:.8;white-space:nowrap}
.fo-bar-track{height:9px;background:var(--surface2);border:1px solid var(--border);border-radius:100px;overflow:hidden}
.fo-bar-fill{height:100%;background:var(--purple);border-radius:100px;transition:width .3s ease}
.fo-bar-total .fo-bar-track{height:14px}
.fo-bar-total .fo-bar-label{font-size:1rem}
.fo-bar-total .fo-bar-fill{background:linear-gradient(90deg,var(--purple),var(--green))}
.fo-bar-star-4 .fo-bar-fill{background:var(--warning)}
.fo-summary-note{margin:14px 0 0;font-size:.9rem}

/* ── Charakterwahl ───────────────────────────────────────────────────── */
.fo-charswitch{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fo-chip{padding:6px 16px;border-radius:100px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:.88rem}
.fo-chip:hover{border-color:var(--purple)}
.fo-chip.is-active{background:var(--purple);border-color:var(--purple);color:#0b0715;font-weight:700}
.fo-chip-add{opacity:.7;font-size:.8rem}

.fo-charlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.fo-charcard{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px}
.fo-charcard-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.fo-charcard-head h2{margin:0;font-size:1.1rem}
.fo-charcard-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fo-form-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fo-form-inline input[type=text],.fo-form-inline input[type=search]{background:var(--bg);color:var(--heading);
  border:1px solid var(--border);border-radius:8px;padding:7px 12px;font:inherit;font-size:.88rem;min-width:0;flex:1 1 140px}
.fo-sharebox{margin-top:12px;font-size:.85rem}
.fo-sharebox-label{display:block;opacity:.75;margin-bottom:4px}
.fo-sharelink{width:100%;background:var(--bg);color:var(--heading);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;font:inherit;font-size:.82rem}
.fo-danger{margin-top:14px;font-size:.85rem}
.fo-danger summary{cursor:pointer;color:#fca5a5}
.fo-danger p{margin:10px 0}
.fo-danger code{background:var(--bg);padding:1px 6px;border-radius:4px}

/* ── Filter ──────────────────────────────────────────────────────────── */
.fo-filter{margin-bottom:16px}
.fo-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.fo-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.fo-field-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.fo-field-search{flex:1 1 260px}
.fo-field input,.fo-field select,.fo-field textarea{background:var(--bg);color:var(--heading);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;font:inherit;font-size:.88rem;width:100%}
.fo-field input:focus,.fo-field select:focus,.fo-field textarea:focus{outline:none;border-color:var(--purple)}
.fo-filter-count{margin:10px 0 0;font-size:.82rem;opacity:.75}
.fo-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;font-size:.85rem}
.fo-bulk-label{opacity:.75}
.fo-status{opacity:.8}

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.fo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fo-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:860px}
.fo-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7;
  padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1}
.fo-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.fo-row.is-learned{background:rgba(34,197,94,.05)}
.fo-row.is-learned .fo-name{color:#86efac}
.fo-row.is-wish:not(.is-learned){background:rgba(245,158,11,.05)}
.fo-table tbody tr:hover{background:rgba(167,139,250,.06)}
.fo-col-check{width:76px}
.fo-col-star{width:92px}
.fo-col-cost{width:130px}
.fo-col-wish{width:60px;text-align:center}
.fo-stars{color:var(--warning);letter-spacing:1px;white-space:nowrap}
.fo-name{display:block;color:var(--heading);font-weight:500}
.fo-name-en{display:block;font-size:.75rem;opacity:.6}
.fo-sub{display:block;font-size:.75rem;opacity:.65}
.fo-eff-de{display:block}
.fo-eff-en{display:block;font-size:.75rem;opacity:.55;margin-top:2px}
.fo-src{display:block;font-size:.75rem;opacity:.6;margin-top:4px}
.fo-ing{display:block;font-size:.75rem;opacity:.65;margin-top:2px}
.fo-flag{display:inline-block;margin-top:4px;margin-right:5px;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid rgba(245,158,11,.4);color:#fcd34d;border-radius:100px;padding:1px 8px;cursor:help}
.fo-flag-note{border-color:rgba(167,139,250,.4);color:#c4b5fd}
.fo-empty{margin-top:16px;opacity:.8}

.fo-pill{display:inline-block;font-size:.72rem;border-radius:100px;padding:2px 10px;border:1px solid var(--border)}
.fo-pill-learned{border-color:rgba(34,197,94,.45);color:#86efac}
.fo-pill-wish{border-color:rgba(245,158,11,.45);color:#fcd34d}
.fo-pill-open{opacity:.7}

/* Checkbox */
.fo-check{display:inline-flex;align-items:center;cursor:pointer}
.fo-check input{position:absolute;opacity:0;width:0;height:0}
.fo-check-box{width:22px;height:22px;border:2px solid var(--border);border-radius:6px;background:var(--bg);
  display:inline-block;position:relative;transition:background var(--tr),border-color var(--tr)}
.fo-check:hover .fo-check-box{border-color:var(--purple)}
.fo-check input:focus-visible + .fo-check-box{outline:2px solid var(--purple);outline-offset:2px}
.fo-check input:checked + .fo-check-box{background:var(--green);border-color:var(--green)}
.fo-check input:checked + .fo-check-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #05210f;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fo-check input:disabled + .fo-check-box{opacity:.4;cursor:wait}

.fo-star-btn{background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--border);padding:2px 4px;
  transition:color var(--tr),transform var(--tr)}
.fo-star-btn:hover{color:var(--warning);transform:scale(1.15)}
.fo-star-btn.is-on{color:var(--warning)}

/* ── Admin ───────────────────────────────────────────────────────────── */
.fo-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.fo-admin-grid-wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.fo-admin-checks{display:flex;flex-wrap:wrap;gap:22px;margin:8px 0 16px}
.fo-admin-checks .fo-field{flex-direction:row-reverse;align-items:center;gap:8px;justify-content:flex-end}
.fo-admin-checks .fo-field input{width:auto}
.fo-admin-actions{display:flex;flex-wrap:wrap;gap:6px;white-space:nowrap}
.fo-table-admin tr.is-inactive{opacity:.45}
.fo-install-list{margin:0 0 20px 20px}
.fo-install-list li{margin-bottom:4px}

/* ── Helles Theme ────────────────────────────────────────────────────── */
body.light-theme .fo-btn-primary{color:#fff}
body.light-theme .fo-chip.is-active{color:#fff}
body.light-theme .fo-row.is-learned .fo-name{color:#15803d}
body.light-theme .fo-msg-ok{color:#15803d}
body.light-theme .fo-msg-error{color:#b91c1c}
body.light-theme .fo-msg-info{color:#b45309}
body.light-theme .fo-flag{color:#b45309}
body.light-theme .fo-flag-note{color:#6d28d9}
body.light-theme .fo-pill-learned{color:#15803d}
body.light-theme .fo-pill-wish{color:#b45309}
body.light-theme .fo-danger summary{color:#b91c1c}
body.light-theme .fo-check input:checked + .fo-check-box::after{border-color:#fff}

/* ── Klein ───────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .fo-wrap{padding:88px 12px 40px}
  .fo-hero,.fo-section{padding:16px}
  .fo-tn-cta{margin-left:0}
  .fo-bars-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .fo-bar-fill,.fo-btn,.fo-star-btn,.fo-check-box{transition:none}
}

/* ── Kategorie-Chips und Effekt-Label (Modell ab 10.09.2026) ─────────── */
.fo-tag{display:inline-block;margin:0 4px 3px 0;padding:1px 9px;border-radius:100px;font-size:.72rem;
  border:1px solid var(--border);background:var(--surface2);white-space:nowrap}
.fo-eff-tag{font-style:normal;font-weight:600;color:var(--heading);opacity:.75}
.fo-col-cat{width:180px}
.fo-col-eff .fo-eff-de + .fo-eff-en + .fo-eff-de{margin-top:6px}

/* ── Kosten-Tabelle im Fließtext ─────────────────────────────────────── */
.fo-table-cost{min-width:0;max-width:560px;margin-bottom:1em}
.fo-table-cost td{vertical-align:middle}

/* ── Umschalter Mensch / Ghul ────────────────────────────────────────── */
.fo-formswitch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.fo-formswitch-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.fo-flag-form{border-color:rgba(34,197,94,.45);color:#86efac}
body.light-theme .fo-flag-form{color:#15803d}