/* Extraction Compass — Kord Breach Modifier-Planer.
   Ergaenzt legal.css (Fonts, Grundfarben-Tokens, Header/Footer/Shell). Diese
   Datei macht die Seite bewusst breiter/farbiger als die schlichten Rechts-
   seiten, orientiert an der offiziellen Season-Grafik, aber mit den
   etablierten Extraction-Compass-Akzenten statt deren Cyan: Gold = Wert/
   Punkte (wie die Preis-/Deal-Tags im Haupttool), Gruen = positiv (wie der
   F2P-Tag), Rot = das Marken-Rot, das im Haupttool schon fuer Fehler-/
   Negativ-Zustaende (form-notice.error) steht. Header-Komponenten
   (nav-blog-link, status-live, lang-dropdown) sind 1:1 aus index.php
   uebernommen, damit die Seite denselben Kopfbereich hat wie die Startseite. */

:root{
  --accent-green: #6f9576;
  --accent-green-bright: #8fd39a;
  --accent-green-dim: #16321c;
  --accent-green-line: #2c4a34;
  --pos-wash: #17271d;
  --neg-wash: #271818;
}

/* ---------- wider shell fuer diese Seite (Haupttool-Breite statt der
   schmaleren 900px der reinen Rechtsseiten) ---------- */
.shell{ max-width: 1680px; }

/* ---------- reicherer, farbigerer Seitenhintergrund (identisch zur
   Startseite: dezente Rot-/Blau-Glows statt reinem Grau) ---------- */
body{
  background:
    radial-gradient(ellipse 900px 500px at 12% -8%, rgba(226,87,74,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 88% 8%, rgba(91,143,199,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at top left, #202020 0%, var(--bg-void) 55%),
    var(--bg-void);
  background-attachment: fixed, fixed, scroll, scroll;
}

/* ---------- Header-Komponenten (1:1 aus index.php uebernommen, damit der
   Kopfbereich exakt wie auf der Startseite aussieht) ---------- */
.statusbar-right{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-blog-link{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 7px 14px;
  background: var(--accent-red);
  border: 1.5px solid var(--accent-red);
  transition: background .15s, border-color .15s, transform .15s;
}
.nav-blog-link:hover{ background: var(--accent-red-bright); border-color: var(--accent-red-bright); transform: translateY(-1px); }
.status-live{ display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); }
.dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 8px var(--accent-gold); animation: kbp-pulse 2.4s ease-in-out infinite; }
@keyframes kbp-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }

.lang-dropdown{ position: relative; }
.lang-dd-toggle{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  padding: 4px 8px; background: var(--bg-panel-raised); border: 1px solid var(--line);
  color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.lang-dd-toggle:hover{ border-color: var(--text-dim); color: var(--text-primary); }
.lang-dropdown.open .lang-dd-toggle{ background: var(--accent-red-dim); border-color: var(--accent-red-bright); color: var(--accent-red-bright); }
.lang-flag{ font-size: 13px; line-height: 1; }
.lang-caret{ font-size: 8px; color: var(--text-dim); transition: transform .15s ease; }
.lang-dropdown.open .lang-caret{ transform: rotate(180deg); color: var(--accent-red-bright); }
.lang-dd-menu{
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 130px;
  background: var(--bg-panel-raised); border: 1px solid var(--line);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6); list-style: none; margin: 0; padding: 4px; z-index: 50;
}
.lang-dd-menu[hidden]{ display: none; }
.lang-dd-option{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; }
.lang-dd-option a{
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  color: var(--text-muted); text-decoration: none; transition: background .12s ease, color .12s ease;
}
.lang-dd-option a:hover{ background: var(--bg-panel); color: var(--text-primary); }
.lang-dd-option[aria-selected="true"] a{ color: var(--accent-red-bright); }

/* ---------- page / hero ---------- */
.kbp-page{ padding-top: 44px; }
.hero{ text-align: left; margin-bottom: 36px; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 58px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.05;
  padding-left: 14px;
  border-left: 3px solid var(--accent-red-bright);
  text-shadow: 0 0 26px rgba(226,87,74,0.18);
}
.hero-sub{
  font-size: 16px;
  color: var(--text-muted);
  max-width: 68ch;
  margin: 0;
  padding-left: 17px;
}

/* ---------- corner-bracket HUD frame (Terminal-Motiv, passend zum
   "STATUS"-Readout des Haupttools) ---------- */
.frame{ position: relative; background: var(--bg-panel); border: 1px solid var(--line); }
.corner{ position: absolute; width: 14px; height: 14px; pointer-events: none; }
.corner.tl{ top: -1px; left: -1px; border-top: 2px solid var(--accent-red-bright); border-left: 2px solid var(--accent-red-bright); }
.corner.tr{ top: -1px; right: -1px; border-top: 2px solid var(--accent-red-bright); border-right: 2px solid var(--accent-red-bright); }
.corner.bl{ bottom: -1px; left: -1px; border-bottom: 2px solid var(--accent-red-bright); border-left: 2px solid var(--accent-red-bright); }
.corner.br{ bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent-red-bright); border-right: 2px solid var(--accent-red-bright); }

/* ---------- countdown ---------- */
.countdown-outer{
  max-width: 680px; margin: 0 auto 34px; padding: 26px 22px 22px; text-align: center;
  background:
    radial-gradient(ellipse 480px 220px at 50% 0%, rgba(212,161,61,.12) 0%, transparent 70%),
    var(--bg-panel);
}
.countdown-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--text-dim); text-transform: uppercase; margin: 0 0 14px;
}
.clock{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.digit-box{ background: var(--bg-panel-raised); border: 1px solid var(--line); padding: 11px 16px; min-width: 68px; }
.digit-box .n{
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(26px, 5vw, 38px);
  color: var(--accent-gold); display: block; letter-spacing: 0.02em;
}
.digit-box .u{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; }
.countdown-note{ font-size: 13.5px; color: var(--text-muted); margin: 14px 0 4px; }
.countdown-tz{ font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); margin: 0; }
.countdown-live{ font-family: var(--font-body); font-weight: 600; color: var(--accent-gold); font-size: 17px; padding: 8px 0; }

/* ---------- intro ---------- */
.intro{ max-width: 90ch; color: var(--text-muted); font-size: 15.5px; margin: 0 0 30px; }
.intro strong{ color: var(--text-primary); }

/* ---------- HUD budget bar ---------- */
.hud-outer{ position: sticky; top: 0; z-index: 40; padding: 16px 0 14px; background: linear-gradient(var(--bg-void) 65%, rgba(26,26,26,0)); }
.hud{ padding: 15px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; backdrop-filter: blur(6px); background: rgba(33,33,33,.92); }
.hud-stats{ display: flex; gap: 26px; flex-wrap: wrap; }
.hud-stat .label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.hud-stat .val{ font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
.hud-stat.budget .val{ color: var(--accent-gold); }
.hud-stat.spent .val{ color: var(--accent-red-bright); }
.hud-stat.remaining .val{ color: var(--accent-green-bright); }
.hud-bar-wrap{ flex: 1 1 170px; min-width: 150px; }
.hud-bar-track{ height: 7px; background: var(--bg-panel-raised); border: 1px solid var(--line); position: relative; overflow: hidden; }
.hud-bar-fill{ height: 100%; background: var(--accent-gold); width: 0%; transition: width .25s ease; }
.hud-bar-fill.warn{ background: var(--accent-red-bright); }
.hud-count{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }
.hud-actions{ display: flex; gap: 8px; margin-left: auto; }
.hud-actions .btn{ font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; font-size: 12px; padding: 8px 12px; }

/* ---------- section headers: volle, eingefaerbte Balken (an die Season-
   Grafik angelehnt, aber mit sanftem Verlauf statt Flaechenfarbe) ---------- */
section.mods{ margin-top: 32px; }
.sec-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 13px 18px; border-left: 4px solid var(--line);
}
.sec-head h2{ font-family: var(--font-display); font-weight: 700; font-size: 23px; margin: 0; text-transform: uppercase; letter-spacing: -0.005em; }
.sec-head .tag{ font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.sec-head.global{ border-left-color: var(--text-dim); background: var(--bg-panel); }
.sec-head.global h2{ color: var(--text-muted); }
.sec-head.pos{ border-left-color: var(--accent-green-bright); background: linear-gradient(90deg, var(--accent-green-dim), var(--bg-panel) 75%); }
.sec-head.pos h2{ color: var(--accent-green-bright); }
.sec-head.neg{ border-left-color: var(--accent-red-bright); background: linear-gradient(90deg, var(--accent-red-dim), var(--bg-panel) 75%); }
.sec-head.neg h2{ color: var(--accent-red-bright); }

.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
@media (min-width: 1200px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- cards: farbige Standard-Hintergruende (nicht nur Rand),
   deutlich saettigter im ausgewaehlten Zustand ---------- */
.card{
  text-align: left; background: var(--bg-panel); border: 1px solid var(--line); border-left-width: 4px;
  padding: 14px 16px; font-family: var(--font-body);
}
.card.global{ opacity: .92; }
.card-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.card-title{ font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; color: var(--text-primary); }
.card-fix{ font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); border: 1px solid var(--line); padding: 2px 6px; letter-spacing: 0.08em; white-space: nowrap; }
.card ul{ margin: 4px 0 0; padding-left: 17px; color: var(--text-muted); font-size: 13px; }
.card ul li{ margin-bottom: 2px; }

button.card{ width: 100%; cursor: pointer; font-family: inherit; color: inherit; transition: background .15s ease, border-color .15s ease; }
button.card:focus-visible{ outline: 2px solid var(--accent-red-bright); outline-offset: 2px; }

.card.pos-card{ background: var(--pos-wash); border-color: var(--accent-green-line); }
.card.pos-card:hover{ border-color: var(--accent-green-bright); }
.card.pos-card.selected{ background: var(--accent-green-dim); border-color: var(--accent-green-bright); }
.card.pos-card.disabled{ opacity: .4; cursor: not-allowed; }

.card.neg-card{ background: var(--neg-wash); border-color: var(--accent-red-dim); }
.card.neg-card:hover{ border-color: var(--accent-red-bright); }
.card.neg-card.selected{ background: var(--accent-red-dim); border-color: var(--accent-red-bright); }

.chip{ font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
.chip.pos{ color: var(--accent-green-bright); border-color: var(--accent-green-line); }
.chip.neg{ color: var(--accent-red-bright); border-color: var(--accent-red); }

.checkbox{
  width: 15px; height: 15px; border: 1.5px solid var(--text-dim); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle;
}
.pos-card.selected .checkbox{ border-color: var(--accent-green-bright); background: var(--accent-green-bright); }
.neg-card.selected .checkbox{ border-color: var(--accent-red-bright); background: var(--accent-red-bright); }
.card-title-row{ display: flex; align-items: center; }

@keyframes kbp-shake{
  0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-4px); } 40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); } 80%{ transform: translateX(3px); }
}
.shake{ animation: kbp-shake .3s ease; }

/* ---------- share panel ---------- */
.share-panel{ margin-top: 34px; padding: 20px; background: var(--bg-panel); border: 1px solid var(--line); }
.share-panel h3{
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; font-size: 19px;
  margin: 0 0 6px; color: var(--text-primary); text-transform: uppercase;
}
.share-panel p{ color: var(--text-dim); font-size: 13.5px; margin: 0 0 13px; }
.share-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.share-input{
  flex: 1 1 280px; background: var(--bg-panel-raised); border: 1px solid var(--line); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 12.5px; padding: 10px 12px;
}
.btn-primary{ background: var(--accent-red); border: 1.5px solid var(--accent-red); color: #fff; }
.btn-primary:hover{ background: var(--accent-red-bright); border-color: var(--accent-red-bright); }

/* ---------- FAQ ---------- */
.faq-section{ margin-top: 40px; padding-top: 8px; }
.faq-heading{
  font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase;
  letter-spacing: -0.005em; margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--accent-red-bright);
}
.faq-item{ margin-bottom: 18px; max-width: 82ch; }
.faq-q{ font-weight: 700; color: var(--text-primary); margin: 0 0 4px; font-size: 15px; }
.faq-a{ color: var(--text-muted); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ---------- toast ---------- */
.toast{
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--bg-panel-raised); border: 1px solid var(--accent-red-bright); color: var(--text-primary);
  padding: 11px 18px; font-size: 13.5px; font-family: var(--font-body); font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 80;
  max-width: 90vw; text-align: center;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px){
  .hud{ gap: 12px; }
  .hud-actions{ margin-left: 0; width: 100%; }
  .hud-actions .btn{ flex: 1; }
  .sec-head{ padding: 11px 14px; }
  .sec-head h2{ font-size: 19px; }
  .hero h1{ padding-left: 12px; }
  .hero-sub{ padding-left: 15px; }
  .statusbar-right{ gap: 10px; }
  .status-live{ font-size: 10px; }
  .nav-blog-link{ padding: 6px 10px; font-size: 11px; }
}