/* ==========================================================================
   SOLARORAKEL · NEXA — One-Page Theme (Quantum Glow)
   Sections: #hero (Landing/Video), #chat (Chat+Earth+Checklist), #results, #info
   Assets expected in /assets/
   ========================================================================== */

/* ===================== */
/* TOKENS & FOUNDATIONS  */
/* ===================== */
:root{
  /* Light theme */
  --bg: #f6f8fe;          /* page background */
  --bg-elev: #ffffff;     /* cards/panels */
  --panel: #ffffff;
  --fg: #0b0d13;          /* main text */
  --fg-weak: #0a0d18;     /* headings */
  --muted: #4a556b;       /* secondary text */
  --line: #ced5ea;        /* borders */
  --accent: #1e49d9;      /* primary blue */
  --accent-2: #1f9d55;    /* solar green */

  --glow-shadow: 0 10px 30px rgba(30,73,217,.18);

  /* Typo (fluid) */
  --fs-xxl: clamp(28px, 3.2vw, 40px);
  --fs-xl:  clamp(22px, 2.4vw, 28px);
  --fs-lg:  clamp(18px, 1.8vw, 20px);
  --fs-md:  16px;
  --fs-sm:  14px;

  /* Layout */
  --maxw: 1200px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(9,12,28,.06), 0 0 0 1px rgba(9,12,28,.03) inset;
  --inset:  0 0 0 1px rgba(9,12,28,.06) inset;

  /* Spacing */
  --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 18px; --s-5: 24px; --s-6: 32px;

  /* Section background fallbacks (you can swap these files) */
  --bg-hero:    url("/assets/bg-hero.jpg");
  --bg-chat:    url("/assets/bg-chat.jpg");
  --bg-results: url("/assets/bg-results.jpg");
  --bg-info:    url("/assets/bg-info.jpg");
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--fg);
  font:var(--fs-md)/1.55 ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
       Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* One-page slides */
  scroll-snap-type: y mandatory;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 var(--s-3) 0; }
strong{ color:var(--fg-weak); font-weight:800; }
.muted{ color:var(--muted); }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s-4) 0; }
[id]{ scroll-margin-top:86px; } /* sticky header offset */

/* ===================== */
/*  TOPBAR               */
/* ===================== */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:grid; grid-template-columns: 1fr auto auto;
  align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.logo{ font-weight:900; letter-spacing:.3px; font-size:var(--fs-lg); color:var(--fg-weak); }
.nav a{
  display:inline-block; padding:8px 10px; margin:0 4px;
  border-radius:9px; color:var(--fg);
}
.nav a:hover{ background:rgba(9,12,28,.06); text-decoration:none; }
.status{ display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; }
.dot{ width:10px; height:10px; border-radius:999px; background:#ff5c5c; display:inline-block; }

/* ===================== */
/*  SLIDES               */
/* ===================== */
.slide{
  min-height:100vh;
  scroll-snap-align:start;
  display:grid; align-content:center;
  position:relative; overflow:hidden;
}
.stage{ max-width:var(--maxw); margin:0 auto; padding:var(--s-5) var(--s-4) var(--s-4); }

/* Quantum Glow */
.glow::before, .glow::after{
  content:""; position:absolute; inset:auto; pointer-events:none;
  filter: blur(42px) saturate(130%); opacity:.55; mix-blend-mode:screen; border-radius:50%;
}
/* Per-section glow placements */
#hero.glow::before{ width:42vw; height:42vw; left:-10vw; top:-8vh; background:radial-gradient(closest-side, rgba(248,204,87,.32), transparent 65%); }
#hero.glow::after { width:46vw; height:46vw; right:-14vw; top:-10vh; background:radial-gradient(closest-side, rgba(143,255,195,.28), transparent 65%); }
#chat.glow::before{ width:36vw; height:36vw; left:-12vw; top:30vh; background:radial-gradient(closest-side, rgba(248,204,87,.26), transparent 65%); }
#chat.glow::after { width:34vw; height:34vw; right:-10vw; top:12vh; background:radial-gradient(closest-side, rgba(30,73,217,.20), transparent 65%); }
#results.glow::before{ width:32vw; height:32vw; left:-10vw; top:20vh; background:radial-gradient(closest-side, rgba(248,204,87,.22), transparent 65%); }
#results.glow::after { width:36vw; height:36vw; right:-10vw; bottom:-10vh; background:radial-gradient(closest-side, rgba(31,157,85,.18), transparent 65%); }
#info.glow::before{ width:30vw; height:30vw; left:-8vw; top:10vh; background:radial-gradient(closest-side, rgba(248,204,87,.18), transparent 65%); }
#info.glow::after { width:30vw; height:30vw; right:-8vw; bottom:-6vh; background:radial-gradient(closest-side, rgba(30,73,217,.16), transparent 65%); }

/* ===================== */
/*  SECTION BACKDROPS    */
/* ===================== */
/* Each section gets its own full-bleed background */
#hero{
  background-image: var(--bg-hero);
  background-image: image-set(
    url("/assets/bg-hero-1280.jpg") type("image/jpeg") 1x,
    url("/assets/bg-hero-1920.jpg") type("image/jpeg") 1.5x,
    url("/assets/bg-hero.jpg") type("image/jpeg") 2x
  );
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#chat{
  background-image: var(--bg-chat);
  background-image: image-set(
    url("/assets/bg-chat-1280.jpg") type("image/jpeg") 1x,
    url("/assets/bg-chat.jpg") type("image/jpeg") 2x
  );
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#results{
  background-image: var(--bg-results);
  background-image: image-set(
    url("/assets/bg-results-1280.jpg") type("image/jpeg") 1x,
    url("/assets/bg-results.jpg") type("image/jpeg") 2x
  );
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#info{
  background-image: var(--bg-info);
  background-image: image-set(
    url("/assets/bg-info-1200.jpg") type("image/jpeg") 1x,
    url("/assets/bg-info.jpg") type("image/jpeg") 1.5x
  );
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* ===================== */
/*  PANELS / CARDS       */
/* ===================== */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s-4);
  margin:var(--s-4) 0;
  box-shadow:var(--shadow);
}
.panel.wide{ padding:var(--s-5); }
.panel-head{ display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-3); }
.panel-head h2{ margin:0; font-size:var(--fs-xl); color:var(--fg-weak); }
.panel-grid{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.card{
  background:#ffffff; border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-3); box-shadow:var(--inset), var(--shadow);
}
.card h3{ margin:0 0 var(--s-2) 0; font-size:var(--fs-lg); color:var(--fg-weak); }

/* ===================== */
/*  BUTTONS / PILLS      */
/* ===================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  user-select:none; cursor:pointer;
  padding:10px 16px; border:1px solid var(--line); border-radius:12px;
  font-weight:900; letter-spacing:.2px; color:#fff;
  background:linear-gradient(180deg, #2a5be9, #1e49d9);
  box-shadow:var(--inset);
  transition:transform .06s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover{ transform:translateY(-1px); filter:saturate(110%); box-shadow:var(--inset), var(--glow-shadow); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; color:var(--accent); border-color:var(--line); }
.btn.ghost:hover{ background:rgba(30,73,217,.08); }

.pill{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:#f0f3ff; color:#0b0d13; font-weight:800; cursor:pointer;
}
.pill:hover{ box-shadow:0 8px 24px rgba(30,73,217,.12); }

/* ===================== */
/*  HERO / LANDING       */
/* ===================== */
#hero .stage.inner{ padding-top:8px; }
.hero{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5) var(--s-4) var(--s-4); margin:12px 0;
  background:rgba(255,255,255,.88); /* readable layer on background */
  box-shadow:var(--shadow);
}
/* Remove any legacy pseudo background on hero panel */
.hero::before{ content:none !important; }

.hero-title{ margin:0 0 6px 0; font-size:var(--fs-xxl); line-height:1.15; color:var(--fg-weak); }
.hero .sub{ margin:0; color:var(--muted); }

.video-wrap{
  border-radius:var(--radius); border:1px solid var(--line);
  overflow:hidden; box-shadow:var(--shadow); background:#fff;
}
.video-wrap video{ display:block; width:100%; height:auto; max-height:62vh; object-fit:cover; }

/* ===================== */
/*  #CHAT LAYOUT         */
/* ===================== */
#chat.stage{ gap:12px !important; align-items:stretch !important; }
#chatEqualRow{ display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; }
@media (min-width:1024px){
  #chatEqualRow{ grid-template-columns: minmax(420px,1fr) minmax(560px,1.25fr); }
}
/* columns equal height via JS minHeight; both panels styled: */
.chat, .visual{
  background:var(--bg-elev);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-4); box-shadow:var(--shadow);
}

/* Chat */
.log{
  min-height:190px; max-height:440px; overflow:auto;
  background:#f2f5ff; color:var(--fg);
  border:1px solid var(--line); border-radius:12px; padding:var(--s-3);
  box-shadow:var(--inset);
}
.msg{ display:flex; gap:10px; margin:var(--s-2) 0; align-items:flex-start; }
.bubble{
  color:var(--fg);
  background:#ffffff; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;
}
.msg-user .bubble{ background:#eef3ff; border-color:#cfd8f6; }
.msg-assistant .bubble{ background:#ffffff; border-color:#dfe5f5; }
.who{ min-width:42px; color:var(--muted); font-weight:800; font-size:12px; }
.msg-user .who{ color:#2442d3; }
.msg-assistant .who{ color:#1f9d55; }

.composer{ display:block; margin-top:12px; }
#chatInput{
  width:100%; min-height:56px; resize:vertical; padding:11px 12px;
  border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--fg); font:inherit;
}
.composer-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
#micBtn svg{ display:block; width:18px; height:18px; }

/* Visual */
.visual-grid{ display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; }
@media (min-width:1200px){
  .visual-grid{ grid-template-columns: minmax(560px,1.3fr) minmax(280px,.8fr); }
}
.maps-embed{ margin:var(--s-2) 0; }
.map-stats{ display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:800; margin-bottom:8px; }
#solar-map{
  width:100%; height:480px; background:#eef3ff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
#spaceOverlay{
  position:absolute; inset:0; border-radius:12px; z-index:2;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(248,204,87,.08), transparent 60%),
    radial-gradient(900px 700px at 80% 80%, rgba(30,73,217,.10), transparent 60%),
    #000 url("/assets/starfield.webp") center/cover no-repeat;
  display:none; pointer-events:none;
}
/* optional canvas overlay is absolutely positioned in index.html */

/* Roof tool */
.roof{ margin-top:var(--s-3); }
.roof-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-2); }
.roof-actions .btn{ padding:8px 12px; }
.roof-canvas{ display:none; }

/* Checklist (Ampel) */
.checklist{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:12px;
  padding:14px; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; gap:12px;
}
.checklist h3{ margin:0; font-size:18px; color:var(--fg-weak); }
.checklist .row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.lamp{ width:12px; height:12px; border-radius:999px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.05); }
.lamp.red{ background:#f05252; }
.lamp.yellow{ background:#f7c948; }
.lamp.green{ background:#22c55e; }
.row .label{ font-weight:800; color:var(--fg); }
.row small{ color:var(--muted); margin-left:auto; }

/* ===================== */
/*  #RESULTS             */
/* ===================== */
.kpi-hud{ display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
.kpi{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:var(--inset);
}
.kpi-label{ color:var(--muted); font-size:var(--fs-sm); margin-bottom:4px; }
.kpi-value{ color:var(--fg-weak); font-weight:900; font-size:18px; }

.scenarios{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.scenarios thead th{
  text-align:left; font-weight:900; padding:10px; color:var(--fg-weak);
  background:#eef3ff; border-bottom:1px solid var(--line);
}
.scenarios td{ padding:10px; border-bottom:1px solid rgba(9,12,28,.08); }
.scenarios tr:hover td{ background:#f8faff; }

/* ===================== */
/*  INFO                 */
/* ===================== */
/* backgrounds already set at section level */

/* ===================== */
/*  MODALS               */
/* ===================== */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
  z-index: 2000;
}
.modal{
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--line); border-radius: 14px;
  width: min(820px, 92vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  position: relative; padding: 18px 18px 12px;
}
.modal h3{ margin: 0 0 8px 0; color: var(--fg-weak); }
.modal .close{
  position: absolute; top: 10px; right: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--fg); font-weight: 900;
  padding: 6px 10px; cursor: pointer;
}

/* ===================== */
/*  FOOTER               */
/* ===================== */
.foot{
  border-top:1px solid var(--line); color:var(--muted);
  display:flex; gap:var(--s-3); justify-content:space-between;
  max-width:var(--maxw); margin:var(--s-5) auto var(--s-6); padding:var(--s-3) var(--s-4);
}

/* ===================== */
/*  RESPONSIVE           */
/* ===================== */
@media (max-width:1023px){
  .nav{ display:none; }
  .video-wrap video{ max-height:50vh; }
}

/* ===================== */
/*  DARK MODE            */
/* ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0b0f; --bg-elev:#11131b; --panel:#11131b;
    --fg:#eef1ff; --fg-weak:#ffffff; --muted:#a6adc8; --line:#23263a;
    --accent:#64a9ff; --accent-2:#8df5a6;
  }
  .topbar{ background:rgba(10,12,16,.75); }
  .hero{ background: rgba(16,18,26,.78); }
  .video-wrap{ background:#0e1118; }
  .log{ background:#0e1118; }
  .bubble{ background:#101422; color:#eef1ff; }
  .msg-user .bubble{ background:#0f1a1a; }
  #solar-map{ background:#0e0f15; }
  .scenarios{ background:#0f1118; }
  .scenarios thead th{ background:#0f1422; }
  .modal .close{ background:#161a26; color:#fff; }
}

/* --- NEXA cleanup: Checkliste weg, Map vollbreit --- */
#checklist, .checklist, .wizard .step-list, .aside, .sidebar { display:none !important; }
.map-wrap, .map-container, #map, #map_canvas, .content, .main { width:100% !important; }
.map-wrap, .map-container, #map, #map_canvas { position:relative !important; }

/* --- KPI Overlay (hell, halbtransparent) --- */
.engine-panel {
  position:absolute; top:12px; right:12px; z-index:5;
  background:rgba(255,255,255,.9); color:#111;
  border-radius:12px; padding:12px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.15); backdrop-filter:saturate(1.2) blur(2px);
  min-width:220px; font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.engine-panel .grid{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:8px}
.engine-panel .tile{background:#fff;border-radius:10px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.engine-panel .tile .h{font-weight:600;opacity:.7;margin-bottom:4px}
.engine-panel .tile .v{font-size:18px;font-weight:700}

/* Map + KPI-Side nebeneinander (nur in Step 2 aktiv) */
.nexa-map-shell {
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap:12px;
  align-items:start;
  width:100%;
}
.nexa-kpi-side {
  position:sticky;
  top:84px; /* unter der Kopfzeile */
}

/* Kachelstil hell/halbtransparent für gute Lesbarkeit */
.nexa-kpi-card {
  background:rgba(255,255,255,.9);
  color:#111;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  backdrop-filter:saturate(1.2) blur(2px);
  font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.nexa-kpi-grid { display:grid; grid-template-columns: repeat(2,minmax(90px,1fr)); gap:8px; }
.nexa-kpi-tile { background:#fff; border-radius:10px; padding:8px 10px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.nexa-kpi-tile .h { font-weight:600; opacity:.7; margin-bottom:4px; }
.nexa-kpi-tile .v { font-size:18px; font-weight:700; }

/* Alte Checkliste einklappen (nur falls noch sichtbar) */
#checklist, .checklist, .wizard .step-list, .aside, .sidebar { display:none !important; }

/* Nur KPI im Map-Fenster verstecken; Seiten-KPI bleibt sichtbar */
#map .engine-panel,
#map .kpi-dock { display: none !important; }