/* assetbias – Design C "Bold Contrast" */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-400.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #111214;
  --panel: #1a1c20;
  --panel-2: #212329;
  --line: #2a2d33;
  --text: #f4f4f2;
  --muted: #a7abb3;
  --accent: #ff8a3d;
  --accent-text: #1c0d02;
  --bull: #4da3ff;
  --bull-bg: rgba(77, 163, 255, .16);
  --bear: #ff8a3d;
  --bear-bg: rgba(255, 138, 61, .16);
  --star: #ffd25e;
  --danger: #e5484d;
  --radius: 18px;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); }
a { color: var(--accent); }
a:hover { color: var(--text); }
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: 32px; margin: 0 0 18px; }
h2 { font-size: 24px; margin: 28px 0 12px; }
small, .meta { color: var(--muted); }
.meta { font-size: 14px; }
.mono { font-family: var(--mono); }
.mt { margin-top: 14px; }

/* Testmodus, Kopf, Fuß */
.testbar { background: var(--accent); color: var(--accent-text); text-align: center; padding: 7px 16px; font-size: 13px; font-weight: 700; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px clamp(16px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 24px; letter-spacing: -0.04em; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
.top nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--text); }
.top nav a.btn { color: var(--accent-text); }
main { padding: 28px clamp(16px, 5vw, 72px) 56px; max-width: 1440px; margin: 0 auto; }
main.wide { padding-top: 0; }
.foot { border-top: 1px solid var(--line); padding: 28px clamp(16px, 5vw, 72px) 40px; color: var(--muted); font-size: 13px; display: grid; gap: 12px; }
.foot p { margin: 0; max-width: 980px; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); }
.foot .copy { opacity: .7; }
.foot .claim { margin: 4px 0 0; font-weight: 700; font-size: 20px; letter-spacing: -0.045em; text-transform: uppercase; color: var(--text); }
.foot .social a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.foot .social a:hover { color: var(--bear, #ff8a3d); }
.inline { display: inline; margin: 0; }

/* Buttons & Formulare */
.btn, button { display: inline-block; font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 13px 24px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); text-decoration: none; text-align: center; }
.btn:hover, button:hover { filter: brightness(1.08); color: var(--accent-text); }
.btn.small { padding: 8px 16px; font-size: 14px; }
.btn.ghost, button.secondary { background: transparent; border-color: var(--line); color: var(--text); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 400; border-radius: 0; }
.linkbtn:hover { color: var(--text); filter: none; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; padding: 0; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.stack label.row { display: flex; align-items: center; gap: 10px; color: var(--text); }
input:focus, select:focus { outline: 2px solid var(--bull); outline-offset: 1px; }
label { color: var(--muted); font-size: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.card h2 { margin-top: 0; }
.stack { display: grid; gap: 12px; max-width: 440px; }
.stack label { display: grid; gap: 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row label { display: flex; align-items: center; gap: 8px; }
.flash { padding: 12px 16px; border-radius: 12px; margin: 18px 0; background: var(--bull-bg); border: 1px solid var(--bull); }
.flash.err { background: rgba(229, 72, 77, .14); border-color: var(--danger); }
.narrow { max-width: 460px; margin: 40px auto; }

/* Badges */
.badge { display: inline-block; min-width: 52px; text-align: center; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.badge.bull { background: var(--bull-bg); color: var(--bull); }
.badge.bear { background: var(--bear-bg); color: var(--bear); }
.badge.none { color: var(--muted); }
.badge.solid.bull { background: var(--bull); color: #fff; }
.badge.solid.bear { background: var(--bear); color: #fff; }
.up { color: var(--bull); }
.near { color: var(--star); font-weight: 700; }
.down { color: var(--bear); }

/* ---------- Startseite ---------- */
.hero { padding: 88px 0 64px; max-width: 920px; display: grid; gap: 22px; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.hero h1 { font-size: clamp(44px, 8vw, 88px); font-weight: 700; letter-spacing: -0.045em; line-height: .98; margin: 0; text-transform: uppercase; }
.hero p { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); margin: 0; max-width: 700px; }
.section { padding: 32px 0 56px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0; }
.usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.usp { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; align-content: start; }
.usp .num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.usp h3 { font-size: 19px; margin: 0; letter-spacing: -0.02em; }
.usp p { margin: 0; color: var(--muted); font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { border-top: 2px solid var(--accent); padding-top: 16px; }
.step h3 { margin: 0 0 6px; font-size: 19px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.pricing { display: flex; gap: 16px; flex-wrap: wrap; }
.price { flex: 1 1 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: grid; gap: 12px; }
.price.featured { border-color: var(--accent); }
.price .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.price .tag { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; }
.price .amount { font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price .amount span { font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.price ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; display: grid; gap: 4px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.faq p { color: var(--muted); margin: 10px 0 0; max-width: 820px; }

/* Vorschau mit Blur */
.preview { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.preview .scroll { overflow-x: auto; }
.preview tr.locked td { filter: blur(6px); user-select: none; }
.preview .gate { position: absolute; inset: auto 0 0 0; height: 62%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 16px 34px; text-align: center; background: linear-gradient(180deg, rgba(26, 28, 32, 0), var(--panel) 52%); }
.preview .gate strong { font-size: 21px; }

/* ---------- Liste (Dashboard + Vorschau) ---------- */
.toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input[type=search] { flex: 1 1 180px; }
.filters .days { display: flex; align-items: center; gap: 6px; }
.filters .days input { width: 72px; }
.filters .check { display: flex; align-items: center; gap: 6px; color: var(--text); }
.list { width: 100%; border-collapse: collapse; font-size: 15px; }
.list th, .list td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.list th { position: sticky; top: 0; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.preview .list th { background: var(--panel); position: static; }
.list th[data-sort] { cursor: pointer; user-select: none; }
.list th.asc::after { content: " ▲"; }
.list th.desc::after { content: " ▼"; }
.list tbody tr:hover { background: var(--panel); }
.num { text-align: right !important; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.c-sym strong { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.c-sym small { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pair span { display: block; }
.pair i { font-style: normal; color: var(--muted); font-size: 11px; margin-right: 6px; font-family: var(--mono); }
.star { background: none; border: 0; padding: 4px 6px; font-size: 19px; color: #4a4e57; border-radius: 6px; min-height: 0; }
.star.on { color: var(--star); }
.star:hover { filter: none; color: var(--star); }
.empty { color: var(--muted); text-align: center; padding: 30px; }

/* Testphase-Hinweis & Sortierauswahl */
.trial { background: var(--bull-bg); border: 1px solid var(--bull); color: var(--text); border-radius: 12px; padding: 12px 16px; max-width: 700px; margin: 0 0 4px; }
.sort-sm { display: none; }

/* Admin */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 14px; }
.tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple th, .simple td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.simple th { color: var(--muted); font-size: 12px; }
.simple button { padding: 6px 12px; font-size: 13px; }
.simple input { min-height: 34px; padding: 6px 10px; }
.inactive td { opacity: .5; }
.scroll { overflow-x: auto; }
pre.log { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: 10px; font-family: var(--mono); font-size: 13px; }

/* Tutorial & Tour */
.tutorial { max-width: 980px; }
.toc { display: grid; gap: 6px; margin: 18px 0 8px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.tstep { padding: 36px 0 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.tstep h2 { margin: 6px 0 16px; font-size: clamp(22px, 3vw, 30px); }
.shot { display: block; width: 100%; height: auto; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ttext { margin-top: 16px; max-width: 760px; }
.ttext li { margin: 6px 0; }
.ttext code { font-family: var(--mono); font-size: 13px; background: var(--panel); padding: 2px 6px; border-radius: 6px; }
.tour { display: grid; gap: 18px; }
.tour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tour-grid h3 { margin: 0 0 6px; font-size: 18px; }
.tour-grid p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } }

/* Indikator-Code */
.codebox { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.codebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.codebox pre { margin: 0; padding: 16px; max-height: 460px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: #d5d7db; background: var(--bg); }

/* Playbook */
.part { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--accent); }
.notice { background: var(--bear-bg); border: 1px solid var(--bear); border-radius: 14px; padding: 16px 18px; margin: 12px 0 8px; color: var(--text); font-size: 15px; }
.notice strong { display: block; margin-bottom: 4px; }
.pbsvg { display: block; width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); }
.simple.pb td:first-child { color: var(--muted); }

/* Sprachumschalter */
.langs { display: inline-flex; gap: 6px; align-items: center; }
.langs .flag { display: inline-flex; padding: 3px; border-radius: 4px; opacity: .45; line-height: 0; }
.langs .flag.on, .langs .flag:hover { opacity: 1; outline: 1px solid var(--line); }

/* Rechtstexte */
.legal { max-width: 820px; }
.legal h1 { font-size: 40px; }
.legal h2 { font-size: 22px; }
.legal p, .legal li { color: #d5d7db; }

/* Handy */
@media (max-width: 860px) {
  .usps, .steps { grid-template-columns: minmax(0, 1fr); }
  .hide-sm { display: none; }
}
@media (max-width: 760px) {
  .sort-sm { display: block; flex: 1 1 100%; }
  .list thead { display: none; }
  .list, .list tbody { display: block; }
  .list tr { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 4px 10px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .list td { display: block; border: 0; padding: 0; white-space: normal; }
  .list .c-star { grid-row: 1 / span 2; }
  .list .c-sym { grid-column: 2; }
  .list .c-price { grid-column: 3 / span 2; }
  .list .c-cat { display: none; }
  .list .c-td, .list .c-tw { grid-row: 2; }
  .list .c-td::before, .list .c-tw::before { content: attr(data-l) " "; color: var(--muted); font-size: 11px; }
  .list td.pair { grid-column: 2 / span 3; display: flex; gap: 14px; text-align: left !important; font-size: 13px; }
  .list td.pair::before { content: attr(data-l); color: var(--muted); font-size: 11px; min-width: 70px; font-family: var(--sans); }
  .list td.pair span { display: inline; }
  .list .c-tv { grid-column: 2 / span 3; }
  .preview .gate { height: 70%; }
  /* Vorschau hat keine Stern-Spalte */
  .preview .list tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .preview .list .c-sym { grid-column: 1; }
  .preview .list .c-price { grid-column: 2 / span 2; }
  .preview .list .c-td { grid-column: 2; grid-row: 2; }
  .preview .list .c-tw { grid-column: 3; grid-row: 2; }
  .preview .list td.pair { grid-column: 1 / -1; }
}