/* ═══════════════════════════════════════════════════════════════
   Soccernomics — CSS für Club-Finanzanalyse-Seiten
   Design-System: DM Sans + DM Mono, --bg #fafafa, --primary #DC2626
   Erstellt als Teil der aktebundesliga.net Astro-Migration
   ═══════════════════════════════════════════════════════════════ */

/* Variables and body styles come from hub.css — no duplicate :root here (F4 fix) */

/* Nav, breadcrumb, page-content, section styles come from hub.css (F3 fix — no duplicates) */

/* ── AEO Quick Answer ────────────────────────────────────── */
.aeo-answer { background:var(--bg-white);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1.5rem;font-size:.9rem;line-height:1.7 }

/* ── Data Freshness Bar ──────────────────────────────────── */
.data-freshness { display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-family:var(--mono);font-size:.65rem;color:var(--text-3);margin-bottom:1.5rem;padding:.6rem 1rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius) }
.freshness-item { display:flex;align-items:center;gap:.35rem }
.freshness-dot { width:6px;height:6px;border-radius:50% }
.freshness-dot.green { background:var(--green) }
.freshness-dot.yellow { background:var(--yellow) }
.freshness-dot.red { background:var(--red) }
.freshness-sep { width:1px;height:12px;background:var(--border) }

/* ── Score Dashboard (XRay) ──────────────────────────────── */
.xray-dash { margin-bottom:2rem }
.xray-dash > div:first-child { display:flex;align-items:flex-end;gap:1.5rem;margin-bottom:1.5rem }
.xray-score-num { font-size:3.5rem;font-weight:800;line-height:1;color:var(--text) }
.xray-score-big { font-size:1rem;color:var(--text-3);margin-left:.25rem }
.xray-score-class { font-family:var(--mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .75rem;border-radius:4px;background:var(--green);color:#fff }
.xray-kpis { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem }
.xray-kpi { background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem }
.xray-kpi-val { font-size:1.3rem;font-weight:700;margin-bottom:.15rem }
.xray-kpi-label { font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3) }
.xray-kpi-sub { font-size:.72rem;color:var(--text-3);margin-top:.25rem }

/* ── Module Tabs ─────────────────────────────────────────── */
.xray-tabs { display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.5rem }
.xray-tab { padding:.4rem .85rem;font-size:.75rem;font-weight:600;color:var(--text-3);background:none;border:1px solid transparent;border-radius:6px 6px 0 0;cursor:pointer;transition:all .15s;font-family:var(--font) }
.xray-tab:hover { color:var(--text);background:var(--bg-alt) }
.xray-tab.active { color:var(--red);border-color:var(--border);border-bottom-color:var(--bg);background:var(--bg-white) }
.xray-mod { display:none }
.xray-mod.active { display:block }

/* ── Fazit Box ───────────────────────────────────────────── */
.fazit-box { background:var(--bg-white);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.5rem 0;font-size:.9rem;line-height:1.7 }
.fazit-box strong { color:var(--text) }

/* ── Module Prose ────────────────────────────────────────── */
.mod-heading { font-size:1.1rem;font-weight:700;margin-bottom:.75rem }
.mod-prose { font-size:.88rem;line-height:1.7;color:var(--text-2);margin-bottom:1rem }
.mod-prose p { margin-bottom:.75rem }

/* ── DFL Check Cards ─────────────────────────────────────── */
.check-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-bottom:1.5rem }
.check-card { background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center }
.check-icon { font-size:1.5rem;margin-bottom:.35rem }
.check-label { font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:.25rem }
.check-val { font-size:1rem;font-weight:700 }
.check-status { font-family:var(--mono);font-size:.6rem;margin-top:.25rem }

/* ── Ampel (Traffic Light) ───────────────────────────────── */
.ampel { display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35rem }
.ampel.g { background:var(--green) }
.ampel.y { background:var(--yellow) }
.ampel.r { background:var(--red) }

/* ── Financial Table ─────────────────────────────────────── */
.fin-table { width:100%;border-collapse:collapse;font-size:.8rem;margin:1rem 0 }
.fin-table th,.fin-table td { padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--border) }
.fin-table th { font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600 }
.fin-table td { color:var(--text) }

/* ── SA Grid (Financial Rows) ────────────────────────────── */
.sa-grid { display:grid;gap:.5rem;margin:1rem 0 }
.sa-block { background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem }
.sa-head { font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:.5rem }
.sa-row { display:flex;justify-content:space-between;align-items:center;padding:.25rem 0 }
.sa-row + .sa-row { border-top:1px solid var(--border) }
.sa-row-label { font-size:.82rem;color:var(--text-2) }
.sa-row-val { font-weight:700;font-size:.88rem }
.row-sep { height:1px;background:var(--border);margin:.5rem 0 }

/* ── Strengths / Weaknesses ──────────────────────────────── */
.ss-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0 }
.ss-block { background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem }
.ss-block.strengths { border-left:3px solid var(--green) }
.ss-block.weaknesses { border-left:3px solid var(--red) }
.ss-title { font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;font-weight:600 }
.ss-block.strengths .ss-title { color:var(--green) }
.ss-block.weaknesses .ss-title { color:var(--red) }
.ss-block ul { margin:0;padding-left:1.25rem;font-size:.82rem;line-height:1.6 }

/* ── Risk Bars ───────────────────────────────────────────── */
.risk-bar { margin-bottom:.75rem }
.risk-bar-label { display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:.25rem }
.risk-bar-track { height:6px;background:var(--bg-alt);border-radius:3px;overflow:hidden }
.risk-bar-fill { height:100%;border-radius:3px;transition:width .3s }

/* ── Projection Banner ───────────────────────────────────── */
.proj-banner { background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);color:#fff;border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.82rem }
.est { font-family:var(--mono);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.2);padding:.15rem .5rem;border-radius:3px;margin-left:.5rem }
.beta-badge { font-family:var(--mono);font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);background:#fffbeb;padding:.15rem .5rem;border-radius:3px }

/* ── Page Nav (previous/next club) ───────────────────────── */
.page-nav { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 }
.page-nav a { display:block;padding:1rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:all .15s }
.page-nav a:hover { border-color:var(--red);box-shadow:var(--shadow) }
.page-nav-label { font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3) }
.page-nav-title { font-size:.88rem;font-weight:600;margin-top:.2rem }

/* ── FAQ Section ─────────────────────────────────────────── */
.faq-section { margin:2rem 0 }
.faq-heading { font-size:1.1rem;font-weight:700;margin-bottom:1rem }
.faq-item { border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;background:var(--bg-white) }
.faq-q,.faq-item summary { padding:.85rem 1rem;font-size:.88rem;font-weight:600;cursor:pointer;list-style:none }
.faq-q::-webkit-details-marker,.faq-item summary::-webkit-details-marker { display:none }
.faq-a,.faq-item .faq-answer { padding:0 1rem .85rem;font-size:.82rem;line-height:1.7;color:var(--text-2) }

/* ── Source Box ──────────────────────────────────────────── */
.source-box { background:var(--bg-alt);border-radius:var(--radius);padding:1rem 1.25rem;font-size:.75rem;color:var(--text-3);margin:1.5rem 0 }
.source-box a { color:var(--blue) }

/* ── Cross Links ─────────────────────────────────────────── */
.cross-links { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:2rem 0 }
.cross-link { display:block;padding:1.25rem;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:all .15s }
.cross-link:hover { border-color:var(--red);box-shadow:var(--shadow) }
.cross-link-title { font-size:.9rem;font-weight:700;margin-bottom:.25rem }
.cross-link-desc { font-size:.78rem;color:var(--text-3) }

/* Footer styles come from hub.css (F3 fix — no duplicates) */

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:768px) {
  .xray-kpis { grid-template-columns:repeat(2,1fr) }
  .ss-grid { grid-template-columns:1fr }
  .page-nav { grid-template-columns:1fr }
  .cross-links { grid-template-columns:1fr }
  .check-grid { grid-template-columns:repeat(2,1fr) }
  .nav-links { display:none }
}