:root {
      --bg:#040810; --panel:#080f1e; --panel2:#0d1628;
      --border:rgba(0,212,255,0.12); --accent:#00d4ff;
      --green:#00ff88; --red:#ff3355; --gold:#ffd700;
      --text:#e8eaf0; --dim:#6b7a99;
      --font:'Rajdhani',sans-serif; --mono:'Share Tech Mono',monospace;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;min-height:100vh}
    body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}

    /* ── Header ── */
    header{position:sticky;top:0;z-index:200;background:rgba(4,8,16,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:54px}
    .header-left{display:flex;align-items:center;gap:16px}
    .logo{font-family:var(--mono);font-size:17px;color:var(--accent);letter-spacing:2px;text-decoration:none}
    .wiki-badge{background:rgba(255,215,0,0.1);border:1px solid rgba(255,215,0,0.3);color:var(--gold);font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:3px 9px;border-radius:3px}
    .header-right{display:flex;align-items:center;gap:10px}
    .hdr-search{background:rgba(0,212,255,0.05);border:1px solid var(--border);border-radius:6px;padding:7px 14px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;width:220px;transition:border-color .2s}
    .hdr-search:focus{border-color:rgba(0,212,255,0.4)}
    .btn-link{font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--dim);text-decoration:none;border:1px solid var(--border);padding:6px 14px;border-radius:4px;transition:all .2s;text-transform:uppercase;cursor:pointer;background:none}
    .btn-link:hover{color:var(--accent);border-color:var(--accent)}
    .btn-gold{border-color:rgba(255,215,0,0.3);color:var(--gold)}
    .btn-gold:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,215,0,0.05)}

    /* ── Layout ── */
    .layout{position:relative;z-index:1;display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 54px)}
    nav{position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto;border-right:1px solid var(--border);background:rgba(8,15,30,0.6);padding:16px 0}
    nav::-webkit-scrollbar{width:3px}
    nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
    .nav-search{margin:0 12px 14px;padding:7px 12px;background:rgba(0,212,255,0.05);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:12px;width:calc(100% - 24px);outline:none}
    .nav-search:focus{border-color:rgba(0,212,255,0.4)}
    .nav-sector-label{padding:8px 12px 4px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-top:6px}
    .nav-item{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;border-left:2px solid transparent;transition:background .15s}
    .nav-item:hover{background:rgba(0,212,255,0.05)}
    .nav-item.active{background:rgba(0,212,255,0.08);border-left-color:var(--accent)}
    .nav-ticker{font-family:var(--mono);font-size:11px;color:var(--accent);min-width:50px}
    .nav-name{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    /* ── Main ── */
    main{padding:36px 44px;max-width:1000px}

    /* ── Hero ── */
    .hero{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--border)}
    .hero-tag{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:8px}
    .hero h1{font-size:44px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:12px}
    .hero p{color:var(--dim);font-size:14px;max-width:560px}
    .hero-stats{display:flex;gap:28px;margin-top:20px}
    .hero-stat-val{font-family:var(--mono);font-size:26px;color:var(--accent);font-weight:700}
    .hero-stat-lbl{font-size:10px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-top:2px}

    /* ── Sector bar ── */
    .sector-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px}
    .sec-btn{padding:4px 13px;background:transparent;border:1px solid var(--border);border-radius:20px;color:var(--dim);font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:1px;cursor:pointer;transition:all .2s;text-transform:uppercase}
    .sec-btn:hover{border-color:rgba(0,212,255,0.4);color:var(--text)}
    .sec-btn.active{background:rgba(0,212,255,0.1);border-color:var(--accent);color:var(--accent)}

    /* ── Loading ── */
    .loading{text-align:center;padding:80px;color:var(--dim);font-family:var(--mono);font-size:13px}
    .spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
    @keyframes spin{to{transform:rotate(360deg)}}
    .no-results{text-align:center;padding:60px;color:var(--dim);font-family:var(--mono);font-size:13px;display:none}

    /* ── Company Card ── */
    .company-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:24px 28px;margin-bottom:18px;position:relative;overflow:hidden;transition:border-color .2s;scroll-margin-top:74px}
    .company-card:hover{border-color:rgba(0,212,255,0.22)}
    .company-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px}
    .company-card[data-sector="FOOD"]::before      {background:linear-gradient(90deg,#ff9800,transparent)}
    .company-card[data-sector="FINANCE"]::before   {background:linear-gradient(90deg,#00ff88,transparent)}
    .company-card[data-sector="TECH"]::before      {background:linear-gradient(90deg,#00d4ff,transparent)}
    .company-card[data-sector="TRANSPORT"]::before {background:linear-gradient(90deg,#aa88ff,transparent)}
    .company-card[data-sector="RETAIL"]::before    {background:linear-gradient(90deg,#ff3355,transparent)}
    .company-card[data-sector="ENERGY"]::before    {background:linear-gradient(90deg,#ffd700,transparent)}
    .company-card[data-sector="PHARMA"]::before    {background:linear-gradient(90deg,#00ffcc,transparent)}
    .company-card[data-sector="MEDIA"]::before     {background:linear-gradient(90deg,#ff66aa,transparent)}
    .company-card.hidden{display:none}

    .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
    .card-tl{}
    .card-ticker-row{display:flex;align-items:center;gap:10px;margin-bottom:3px}
    .card-ticker{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--accent)}
    .card-sector-badge{font-size:10px;font-weight:700;letter-spacing:1.5px;padding:3px 8px;border-radius:3px;text-transform:uppercase}
    .badge-FOOD      {background:rgba(255,152,0,.12);color:#ff9800;border:1px solid rgba(255,152,0,.3)}
    .badge-FINANCE   {background:rgba(0,255,136,.10);color:#00ff88;border:1px solid rgba(0,255,136,.3)}
    .badge-TECH      {background:rgba(0,212,255,.10);color:#00d4ff;border:1px solid rgba(0,212,255,.3)}
    .badge-TRANSPORT {background:rgba(170,136,255,.10);color:#aa88ff;border:1px solid rgba(170,136,255,.3)}
    .badge-RETAIL    {background:rgba(255,51,85,.10);color:#ff3355;border:1px solid rgba(255,51,85,.3)}
    .badge-ENERGY    {background:rgba(255,215,0,.10);color:#ffd700;border:1px solid rgba(255,215,0,.3)}
    .badge-PHARMA    {background:rgba(0,255,204,.10);color:#00ffcc;border:1px solid rgba(0,255,204,.3)}
    .badge-MEDIA     {background:rgba(255,102,170,.10);color:#ff66aa;border:1px solid rgba(255,102,170,.3)}
    .card-name{font-size:22px;font-weight:700;color:var(--text)}
    .card-tagline{font-size:13px;color:var(--dim);font-style:italic;margin-top:2px}
    .card-price-box{text-align:right;background:rgba(0,212,255,0.04);border:1px solid var(--border);border-radius:8px;padding:10px 16px;min-width:120px;flex-shrink:0}
    .card-price{font-family:var(--mono);font-size:20px;color:var(--green);font-weight:700}
    .card-price-lbl{font-size:10px;letter-spacing:1px;color:var(--dim);margin-top:2px}
    .vol-indicator{margin-top:6px;font-size:10px;color:var(--dim)}

    .card-desc{color:var(--dim);font-size:14px;line-height:1.7;margin-bottom:18px}

    .card-mgmt{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:18px}
    .mgmt-item{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:9px 13px}
    .mgmt-role{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--dim)}
    .mgmt-name{font-size:13px;font-weight:700;color:var(--text);margin-top:2px}

    .card-stats{display:flex;gap:0;background:var(--panel2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
    .card-stat{flex:1;padding:10px 14px;border-right:1px solid var(--border);text-align:center}
    .card-stat:last-child{border-right:none}
    .stat-val{font-family:var(--mono);font-size:13px;color:var(--text);font-weight:700}
    .stat-lbl{font-size:10px;letter-spacing:1px;color:var(--dim);margin-top:2px;text-transform:uppercase}
    .rival-link{color:var(--accent);cursor:pointer;text-decoration:underline}
    .rival-link:hover{color:var(--gold)}

    /* footer */
    footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:18px 44px;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim)}
    footer a{color:var(--dim);text-decoration:none}
    footer a:hover{color:var(--accent)}

    @media(max-width:860px){.layout{grid-template-columns:1fr}nav{display:none}main{padding:20px 16px}}
/* ── Financials ───────────────────────────────────────── */
.card-financials {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(0,212,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.fin-item {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-right: 1px solid var(--border);
}
.fin-item:last-child { border-right: none; }
.fin-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.fin-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.fin-val.yield { color: var(--green); }
.fin-val.pos   { color: var(--green); }
.fin-val.neg   { color: var(--red); }

/* ── History Timeline ─────────────────────────────────── */
.card-history {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.history-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.history-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
}
.history-item:last-child { border-bottom: none; }
.history-year {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  min-width: 36px;
  font-weight: 700;
}
.history-event { color: var(--dim); line-height: 1.5; }

/* ── Scale 150% ─────────────────────────────────────── */
html { zoom: 1.5; }

/* ── Fix: Rechte Seite nav-items klickbar ───────────── */
/* Das layout war 240px + 1fr — bei 150% zoom wird die
   nav Sidebar zu schmal und überlappt main content.
   Fix: pointer-events explizit setzen + z-index */
nav { 
  position: sticky; 
  z-index: 10;
  pointer-events: all;
}
nav .nav-item { 
  pointer-events: all;
  cursor: pointer;
}
/* Main content bekommt overflow-x: hidden damit keine
   horizontale Scrollbar durch zoom entsteht */
main { overflow-x: hidden; }
body { overflow-x: hidden; }

/* Bei 150% zoom: layout anpassen */
.layout {
  grid-template-columns: 200px 1fr;
}
