/* TRAI STEP 98 – Premium Full Website Direction
   Ziel: einheitliches Premium-SaaS/Dashboard-Design für alle öffentlichen Seiten.
   Nur Layout/Optik. Keine API-Logik, keine Finanzberatung, keine Fake-Daten.
*/

:root{
  --trai-bg-0:#030712;
  --trai-bg-1:#07111f;
  --trai-bg-2:#0b1324;
  --trai-glass:rgba(8,13,25,.72);
  --trai-glass-strong:rgba(12,19,34,.88);
  --trai-line:rgba(105,136,190,.22);
  --trai-line-strong:rgba(83,168,255,.34);
  --trai-blue:#38bdf8;
  --trai-blue-2:#2563eb;
  --trai-green:#22c55e;
  --trai-red:#ef4444;
  --trai-text:#eaf4ff;
  --trai-muted:#9fb1ca;
  --trai-card-shadow:0 24px 80px rgba(0,0,0,.38);
}

html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(circle at 18% 6%,rgba(56,189,248,.15),transparent 28%),
    radial-gradient(circle at 78% 2%,rgba(34,197,94,.10),transparent 24%),
    radial-gradient(circle at 52% 88%,rgba(37,99,235,.12),transparent 32%),
    linear-gradient(180deg,var(--trai-bg-0),var(--trai-bg-1) 48%,#030712)!important;
  color:var(--trai-text)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
  z-index:-1;
}

header,
.topbar,
.nav{
  background:rgba(5,10,20,.72)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(85,120,180,.18)!important;
}

header{position:sticky!important;top:0!important;z-index:1000!important}

.nav{
  max-width:1240px!important;
  margin:auto!important;
  padding:10px 18px!important;
}

.brand{
  letter-spacing:.2px!important;
  color:var(--trai-green)!important;
  text-shadow:0 0 20px rgba(34,197,94,.14)!important;
}

.brand img{
  border-radius:14px!important;
  border:1px solid rgba(56,189,248,.22)!important;
  background:rgba(2,6,23,.9)!important;
  box-shadow:0 0 25px rgba(56,189,248,.10)!important;
}

.navlinks a,
.nav a,
header a{
  transition:.18s ease!important;
}

.navlinks a:not(.brand),
.nav a:not(.brand),
header .navlinks a{
  border:1px solid rgba(148,163,184,.10)!important;
  background:rgba(15,23,42,.24)!important;
  border-radius:12px!important;
  padding:8px 10px!important;
}

.navlinks a:hover,
.nav a:hover,
header a:hover{
  border-color:rgba(56,189,248,.38)!important;
  background:rgba(14,165,233,.10)!important;
  color:#dff7ff!important;
}

/* Hero überall in Richtung Premium-Produktpräsentation */
.hero,
.premium-hero,
main.wrap > .hero{
  max-width:none!important;
  position:relative!important;
  overflow:hidden!important;
  padding:52px 20px 44px!important;
  background:
    radial-gradient(circle at 16% 18%,rgba(34,197,94,.16),transparent 30%),
    radial-gradient(circle at 82% 20%,rgba(56,189,248,.20),transparent 32%),
    linear-gradient(135deg,rgba(6,13,26,.96),rgba(3,7,18,.98))!important;
  border-bottom:1px solid rgba(80,115,175,.20)!important;
}

.hero::after,
.premium-hero::after,
main.wrap > .hero::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0 0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.45),transparent)!important;
}

.hero-grid{
  max-width:1240px!important;
  margin:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)!important;
  gap:34px!important;
  align-items:center!important;
}

.kicker,
.eyebrow{
  display:inline-flex!important;
  gap:8px!important;
  align-items:center!important;
  color:#8fffc0!important;
  border:1px solid rgba(34,197,94,.30)!important;
  background:rgba(34,197,94,.07)!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  margin:0 0 12px!important;
}

h1{
  color:#f8fbff!important;
  text-shadow:0 12px 40px rgba(56,189,248,.10)!important;
}

.hero h1,
.premium-hero h1,
main.wrap > .hero h1{
  font-size:clamp(2.3rem,4.6vw,5.5rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  margin:0 0 14px!important;
}

.hero-text,
.lead,
.hero .lead,
.hero p{
  color:#b9c9df!important;
}

.hero .lead,
.hero-text{
  font-size:clamp(.96rem,1.15vw,1.15rem)!important;
  line-height:1.45!important;
  max-width:760px!important;
}

.hero-image,
.hero-img,
.showcase img{
  border-radius:24px!important;
  border:1px solid rgba(56,189,248,.22)!important;
  background:linear-gradient(135deg,rgba(2,6,23,.96),rgba(15,23,42,.92))!important;
  box-shadow:0 34px 120px rgba(0,0,0,.48),0 0 46px rgba(56,189,248,.10)!important;
  transform:translateZ(0);
}

.hero-img,
.hero-image{
  max-height:360px!important;
  object-fit:contain!important;
}

/* Geräte-/Plattform-Leiste */
.trai-platform-mini{
  width:min(1240px,calc(100% - 32px));
  margin:18px auto 8px;
  padding:14px;
  border:1px solid rgba(56,189,248,.22);
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(10,18,34,.86),rgba(2,6,23,.78));
  box-shadow:0 18px 70px rgba(0,0,0,.26);
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}
.trai-platform-mini h2{
  margin:0 0 4px!important;
  font-size:1.05rem!important;
  color:#eaf4ff!important;
}
.trai-platform-mini p{
  margin:0!important;
  color:#9fb1ca!important;
  font-size:.82rem!important;
  line-height:1.4!important;
}
.trai-device-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.trai-device-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(56,189,248,.28);
  background:rgba(14,165,233,.08);
  color:#dff7ff;
  border-radius:999px;
  padding:7px 10px;
  font-size:.74rem;
  font-weight:800;
  white-space:nowrap;
}

/* Panels / Cards */
.panel,
.card,
.preview-card,
.showcase,
.post,
.comment,
.chat-panel,
.chart-box,
.stock-result-card,
.trai-live-panel,
.trai-market-widget-box,
.trai-ad-slot{
  border:1px solid var(--trai-line)!important;
  background:
    linear-gradient(180deg,rgba(16,24,40,.86),rgba(8,13,25,.88))!important;
  border-radius:20px!important;
  box-shadow:var(--trai-card-shadow)!important;
}

.panel:hover,
.card:hover,
.preview-card:hover,
.stock-result-card:hover{
  border-color:rgba(56,189,248,.32)!important;
}

.card,
.panel{
  backdrop-filter:blur(10px)!important;
}

.grid,
.grid-2,
.preview-grid{
  gap:16px!important;
}

.card h3,
.panel h2,
.preview-card h3{
  color:#eff8ff!important;
}

/* Buttons / Inputs */
button,
.button,
.pill,
.hero-buttons a button,
.toolbar button,
a.pill{
  border-radius:999px!important;
  transition:.18s ease!important;
}

button:not(.secondary):not(.red),
.hero-buttons button:not(.secondary),
.toolbar button:not(.secondary):not(.red){
  background:linear-gradient(135deg,var(--trai-green),#7ddf8d)!important;
  color:#04130a!important;
  box-shadow:0 12px 30px rgba(34,197,94,.20)!important;
}

button:hover,
.pill:hover,
a.pill:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.08)!important;
}

button.secondary,
.secondary,
.pill,
a.pill{
  background:rgba(15,23,42,.72)!important;
  color:#dbeafe!important;
  border:1px solid rgba(56,189,248,.24)!important;
}

input,
select,
textarea{
  border:1px solid rgba(148,163,184,.22)!important;
  background:rgba(2,6,23,.70)!important;
  color:#eaf4ff!important;
  border-radius:12px!important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:rgba(56,189,248,.55)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.10)!important;
}

/* Tabellen/Listen/Status */
.notice,
.risk,
.ad-box,
.trai-widget-note,
.trai-future-note{
  border-radius:16px!important;
  border-color:rgba(56,189,248,.20)!important;
}

.mini,
.muted,
small{
  color:#9fb1ca!important;
}

/* Chart + Scanner spezielle Stabilität */
.chart-layout{
  width:min(1240px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.trai-live-panel .trai-widget-frame,
#trai-tradingview-widget-container{
  background:#020617!important;
}

.trai-card-widget-tools{
  margin-top:12px!important;
}

/* Aktien-Lexikon kompakter/premium */
.alphabet a,
.hero-badges span,
.tag,
.stock-pill{
  background:rgba(14,165,233,.08)!important;
  border:1px solid rgba(56,189,248,.22)!important;
  color:#dff7ff!important;
}

/* Footer */
.footer,
.site-footer{
  border-top:1px solid rgba(80,115,175,.18)!important;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.65))!important;
  color:#8190a7!important;
}

/* Admin bleibt funktional, aber nicht überladen */
body.admin-page .hero,
body.admin-page .premium-hero{
  padding:28px 20px!important;
}

/* Mobile */
@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .hero-buttons,
  .tags,
  .toolbar{
    justify-content:center!important;
  }
  .trai-platform-mini{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .trai-device-row{
    justify-content:center!important;
  }
  .hero,
  .premium-hero,
  main.wrap > .hero{
    padding:38px 16px 34px!important;
  }
  .hero h1,
  .premium-hero h1,
  main.wrap > .hero h1{
    font-size:clamp(2rem,11vw,3.2rem)!important;
  }
  .panel,
  .card{
    border-radius:18px!important;
  }
  .nav{
    justify-content:center!important;
  }
  .brand{
    width:100%;
    justify-content:center;
  }
  .navlinks{
    justify-content:center;
  }
}

@media(max-width:560px){
  section,
  .wrap{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .trai-platform-mini{
    width:calc(100% - 20px)!important;
  }
  .trai-device-pill{
    font-size:.68rem;
    padding:6px 8px;
  }
}