:root{
  --gold:#d4af37;
  --gold-2:#b9962f;
  --bg:#0b0b0d;
  --surface:#111115;
  --text:#eaeaea;
  --muted:#b9b9c2;
  --success:#21c16b;
  --danger:#ff5c5c;
  --shadow: 0 6px 18px rgba(212,175,55,0.15), 0 2px 6px rgba(0,0,0,0.35);
  --radius:18px;
  --radius-sm:14px;
  --radius-lg:22px;
  --gap:14px;
  --font-size: 14px; /* eine Stufe kleiner */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#0a0a0c 0%, #0d0d11 100%);
  color:var(--text);
  font: 400 var(--font-size)/1.45 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* ----- Header ----- */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(10,10,12,0.78);
  border-bottom:1px solid rgba(212,175,55,0.15);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
}
.logo{ width:2.5cm; height:2.5cm; display:block }
.title-wrap{ display:flex; flex-direction:column; gap:4px }
.h-title{ font-size:20px; font-weight:700; letter-spacing:0.3px }
.h-sub{ font-size:12px; color:var(--muted) }

.actions{ display:flex; gap:10px }
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:10px 14px; border-radius:999px; color:#0b0b0d; background:var(--gold);
  font-weight:700; box-shadow: var(--shadow);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(212,175,55,.35) }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(0.99) }

/* ----- Intro ----- */
.container{ max-width:1200px; margin:0 auto; padding:16px }
.card{
  background:linear-gradient(180deg,#111115,#0e0e12);
  border:1px solid rgba(212,175,55,0.18);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}

/* ----- Ticker ----- */
.ticker{
  overflow:hidden; white-space:nowrap; border:1px solid rgba(212,175,55,0.18);
  border-radius:999px; position:relative; padding:10px;
  background:linear-gradient(90deg,rgba(212,175,55,.07),transparent 50%,rgba(212,175,55,.07));
}
.ticker-track{
  display:inline-block; will-change:transform;
  animation: ticker-move 30s linear infinite;
  padding-right:60px;
}
@keyframes ticker-move{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(-50%) }
}
.badge{ padding:2px 8px; border-radius:999px; margin-left:8px; font-weight:700; background:rgba(255,255,255,.08); color:var(--text) }
.up{ color:var(--success) } .down{ color:var(--danger) }

/* ----- Grid Top ----- */
.top-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:var(--gap);
}
.kpi-grid{
  display:grid; grid-template-columns:1fr; gap:var(--gap); height:100%;
}
.kpi-card{ padding:16px; display:flex; flex-direction:column; justify-content:center; min-height:104px }
.kpi-label{ color:var(--gold); font-size:12px }
.kpi-value{ font-size:22px; font-weight:800; margin-top:6px; color:var(--gold) }
.kpi-sub{ font-size:11px; color:var(--gold); margin-top:6px }

/* Coin tiles for mobile */
.coin-tiles{ display:none; grid-template-columns:1fr 1fr; gap:var(--gap) }
.tile{ padding:14px; border-radius:var(--radius-sm); border:1px solid rgba(212,175,55,.18); background:#0f0f13; box-shadow: var(--shadow) }
.tile .top{ display:flex; align-items:center; gap:10px }
.tile img{ width:20px; height:20px }
.tile .name{ font-weight:700 }
.tile .price{ margin-top:8px; font-weight:800 }
.tile .chg{ font-size:12px; margin-top:4px }

/* ----- Collapsible ----- */
.collapsible{ overflow:hidden }
.collapsible-header{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer;
  background:linear-gradient(90deg,rgba(212,175,55,.12),rgba(212,175,55,.04));
  border-bottom:1px solid rgba(212,175,55,.18);
  border-radius:var(--radius) var(--radius) 0 0;
}
.chevron{ transition: transform .2s ease }
.collapsible.open .chevron{ transform:rotate(180deg) }
.collapsible-body{ padding:14px; border:1px solid rgba(212,175,55,.18); border-top:none; border-radius:0 0 var(--radius) var(--radius) }

/* ----- Table ----- */
.table-wrap{ overflow:auto }
table{ width:100%; border-collapse:collapse; font-size:13px }
th,td{ padding:10px 8px; border-bottom:1px solid rgba(212,175,55,.1); text-align:left; white-space:nowrap }
th{ position:sticky; top:0; background:#0e0e12; z-index:1 }
.spark{ width:100px; height:32px }

/* ----- Tools grid ----- */
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.tool-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-radius:var(--radius-sm);
  border:1px solid rgba(212,175,55,.18); background:#0f0f13; text-decoration:none; color:var(--text);
  box-shadow: var(--shadow);
}
.tool-btn:hover{ outline:1px solid rgba(212,175,55,.35) }
.tool-btn span{ font-weight:700 }
.tool-btn .ext{ opacity:.8 }

/* ----- Converter ----- */
.converter{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end }
.input, .select{
  width:100%; background:#0f0f13; color:var(--text); border:1px solid rgba(212,175,55,.22);
  border-radius:12px; padding:10px 12px; font-size:14px;
}
.convert-btn{ padding:11px 14px }
.result{ margin-top:10px; font-weight:700; }

/* ----- Fear & Greed ----- */
.fng-bar{ width:100%; height:16px; border-radius:999px; background:linear-gradient(90deg,#ff4d4d, #d4af37 50%, #28c76f) }
.fng-pointer{ position:relative; top:-6px; width:2px; height:28px; background:var(--gold) }
.fng-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:6px }

/* ----- TradingView/Heatmap containers ----- */
.widget-card .collapsible-body{ padding:0 }
.widget-frame{ padding:12px }
.tv-wrap, .heatmap-wrap{ width:100%; min-height:480px }
.tv-wrap > div{ height:480px } /* let TV manage iframe without clipping */
@media(max-width:680px){
  .tv-wrap, .heatmap-wrap{ min-height:420px }
  .tv-wrap > div{ height:420px }
}

/* ----- Footer & Back to top ----- */
.footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px 12px }
.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:999;
  width:52px; height:52px; display:none; align-items:center; justify-content:center;
  border-radius:50%; background:var(--gold); color:#0b0b0d; font-weight:800; border:none; cursor:pointer; box-shadow: var(--shadow);
}
.back-to-top.show{ display:flex }

/* ----- Responsive rules ----- */
@media(max-width:1024px){
  .top-grid{ grid-template-columns:1fr }
  .kpi-grid{ grid-template-columns:1fr 1fr 1fr }
}
@media(max-width:680px){
  .header-inner{ grid-template-columns:auto 1fr; grid-template-rows:auto auto }
  .actions{ grid-column:1 / -1; justify-content:flex-end }
  .h-title{ font-size:18px }
  .coin-tiles{ display:grid }
  .cmc-embed{ display:none }
  .kpi-grid{ grid-template-columns:1fr }
  .converter{ grid-template-columns:1fr }
  .tools-grid{ grid-template-columns:1fr }
  .ticker-track{ animation-duration: 40s }
}