/* BKC Living Lab (25-10-2026): bovenop css/ons-huis-nieuw.css. Rustig, mobiel eerst, geen horizontale scroll vanaf 320 px.
   Kleuren: huisverbruik blauw, zon oranje, groen voor BKC. Betekenis staat altijd ook in tekst, niet alleen in kleur. */
.ll{--huis:#235d9c;--huis-l:#e8f1fb;--zon-v:#f59e0b;--zon-l:#fff4dc}

/* ── Hero ── */
.ll-hero{position:relative;margin-top:20px;border-radius:20px;overflow:hidden;background:#f3f1e8;border:1px solid var(--rand);box-shadow:var(--schaduw)}
.ll-hero-foto{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:50% 40%}
.ll-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f3f1e8 0%,#f3f1e8 36%,rgba(243,241,232,.72) 54%,rgba(243,241,232,0) 78%)}
.ll-hero-in{position:relative;z-index:2;display:grid;gap:20px;padding:28px 24px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.ll-label{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #bfe0cc;color:var(--gd);border-radius:999px;padding:4px 12px 4px 8px;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ll-label .ohn-ico{width:16px;height:16px}
.ll-hero h1{font-family:var(--font-serif);font-size:clamp(1.8rem,4.6vw,2.7rem);line-height:1.06;letter-spacing:-.02em;color:var(--gd);margin-top:12px}
.ll-hero h1 em{font-style:normal;color:var(--ink)}
.ll-lead{font-size:clamp(1rem,2.3vw,1.2rem);margin-top:10px;color:#2d4150;max-width:46ch}
.ll-kenmerken{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ll-kenmerken li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border:1px solid var(--rand);border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:650}
.ll-kenmerken .ohn-ico{width:18px;height:18px;color:var(--g)}
.ll-predict{background:#fff;border:1px solid var(--rand);border-radius:16px;box-shadow:0 8px 28px rgba(16,35,50,.16);padding:18px 20px;display:grid;gap:10px}
.ll-predict-kop{display:flex;align-items:center;gap:12px}
.ll-predict h2{font-size:1.2rem;font-family:var(--font-sans);font-weight:800}
.ll-icoonrond{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--gl);color:var(--g)}
.ll-pil{display:inline-block;background:var(--gl);color:var(--gd);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;margin-top:2px}
.ll-pil--grijs{background:#eef0f2;color:#41525e}
.ll-pil--blauw{background:var(--huis-l);color:#1b4a7d}
.ll-pil--oranje{background:var(--zon-l);color:#7a4a00}
.ll-vinkjes li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;padding:3px 0}
.ll-vinkjes .ohn-ico{width:18px;height:18px;color:var(--g);flex:none;margin-top:3px}
.ll-predict-status{font-size:.86rem;color:var(--muted)}
.ll-let{margin-top:14px}

/* ── Periodekeuze ── */
.ll-keuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;scroll-margin-top:var(--ohn-sticky,96px)}
.ll-keuze-knop{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rand);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink)!important;min-height:64px;box-shadow:var(--schaduw)}
.ll-keuze-knop .ohn-ico{width:30px;height:30px;flex:none;color:var(--g)}
.ll-keuze-knop strong{display:block;font-size:1.05rem}
.ll-keuze-knop small{display:block;font-size:.8rem;color:var(--muted);line-height:1.3}
.ll-keuze-knop:hover{background:var(--gl)}
.ll-keuze-knop[aria-current="true"]{background:var(--g);border-color:var(--g);color:#fff!important}
.ll-keuze-knop[aria-current="true"] small{color:#e3f3ea}
.ll-keuze-knop[aria-current="true"] .ohn-ico{color:#fff}

/* ── Hoofdraster: voorspelling links, betekenis + nauwkeurigheid rechts ── */
.ll-raster{display:grid;gap:18px;margin-top:18px;grid-template-columns:minmax(0,1fr)}
.ll-zij{display:grid;gap:18px;align-content:start;min-width:0}
.ll-onder{display:grid;gap:18px;margin-top:18px;grid-template-columns:minmax(0,1fr)}
.ll-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;justify-content:space-between}
.ll-kop h2{font-family:var(--font-sans);font-size:1.2rem;font-weight:800}
.ll-datum{color:var(--muted);font-size:.92rem}
.ll-getallen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ll-getal{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--rand);border-radius:14px;padding:14px;background:#fcfbf9;min-width:0}
.ll-getal .ohn-bol{flex:none}
.ll-g-l{display:block;font-size:.88rem;color:var(--muted);font-weight:600}
.ll-getal strong{display:block;font-family:var(--font-serif);font-size:clamp(1.7rem,4.4vw,2.2rem);line-height:1.1;font-variant-numeric:tabular-nums}
.ll-getal strong small{font-family:var(--font-sans);font-size:.9rem;font-weight:700;color:var(--muted)}
.ll-g-b{display:block;font-size:.84rem;color:var(--muted);margin:2px 0 6px;font-variant-numeric:tabular-nums}
.ll-uitleg{margin-top:12px;font-size:.88rem;color:var(--muted)}
.ll-figuur{margin:14px 0 0}
.ll-svg{display:block;width:100%;height:auto}
.ll-svg .ll-raster{stroke:#ebe6dc;stroke-width:1}
.ll-svg .ll-as{font-size:15px;fill:#4e6270;font-family:inherit}
.ll-svg .ll-eenheid{font-weight:700}
.ll-huis-lijn{fill:none;stroke:var(--huis);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.ll-zon-lijn{fill:none;stroke:var(--zon-v);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ll-zon-vlak{fill:rgba(245,158,11,.16);stroke:none}
.ll-band--huis{fill:rgba(35,93,156,.13)}
.ll-band--zon{fill:rgba(245,158,11,.13)}
.ll-punt--huis{fill:var(--huis)}
.ll-punt--zon{fill:var(--zon-v)}
.ll-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--muted);margin-top:8px}
.ll-leg::before{content:"";display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--huis)}
.ll-leg--zon::before{background:var(--zon-v)}
.ll-leg--band::before{height:10px;background:rgba(35,93,156,.2)}
.ll-tabel{margin-top:12px}
.ll-tabel .ohn-tabel{min-width:0}

/* ── Kaarten ── */
.ll-kaart{display:grid;gap:10px;align-content:start}
.ll-kaart-kop{display:flex;align-items:center;gap:12px}
.ll-kaart-kop h2{font-family:var(--font-sans);font-size:1.1rem;font-weight:800;line-height:1.2}
.ll-batterijzin{font-size:1.02rem;font-weight:600}
.ll-nauw-rij{display:grid;gap:4px;padding:6px 0}
.ll-nauw-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.ll-nauw-kop span{font-weight:700;font-variant-numeric:tabular-nums}
.ll-balk{height:10px;border-radius:999px;background:#eceae3;overflow:hidden}
.ll-balk-vul{display:block;height:100%;border-radius:999px}
.ll-balk-vul--huis{background:var(--huis)}
.ll-balk-vul--zon{background:var(--zon-v)}
.ll-trend{display:flex;gap:8px;align-items:flex-start;background:var(--aqua-l);border-radius:12px;padding:10px 12px;font-size:.9rem}
.ll-trend .ohn-ico{width:18px;height:18px;flex:none;margin-top:3px;color:var(--aqua)}
.ll-bewezen{font-size:.95rem}
.ll-leerlijst{display:grid;gap:10px}
.ll-leerlijst li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.ll-leerlijst .ll-pil{margin-top:0;white-space:nowrap}
.ll-live-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.ll-live-lijst>div{border:1px solid var(--rand);border-radius:12px;padding:10px 12px;background:#fcfbf9}
.ll-live-lijst dt{display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--muted);font-weight:600}
.ll-live-lijst dt .ohn-ico{width:16px;height:16px}
.ll-live-lijst dd{margin:2px 0 0;font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.ll-leeg h2{font-family:var(--font-serif)}

/* ── Hoe werkt het ── */
.ll-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ll-stappen li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--rand);border-radius:14px;padding:14px;box-shadow:var(--schaduw)}
.ll-stappen p{font-size:.86rem;color:var(--muted);margin-top:2px}
.ll-nr{width:32px;height:32px;border-radius:50%;background:var(--huis);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.ll-nr--2{background:var(--g)}
.ll-nr--3{background:var(--zon-v);color:#3b2400}
.ll-nr--4{background:#7c3aed}

/* ── Rapport-koppeling ── */
.ll-rapport{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.ll-rapport h2{font-family:var(--font-serif);font-size:clamp(1.25rem,3vw,1.6rem);color:var(--gd);margin-bottom:6px}
.ll-rapport-links{display:grid;gap:4px;margin-top:10px}
.ll-rapport-links a{display:inline-flex;gap:8px;align-items:center;font-weight:650;min-height:32px}
.ll-rapport-links .ohn-ico{width:16px;height:16px}
.ll-rapport-acties{display:grid;gap:10px}
.ll-beperkingen{display:grid;gap:8px;padding-left:20px!important}
.ll-beperkingen li{list-style:disc}

/* ── Breedtes ── */
@media(min-width:1000px){
  .ll-raster,.ll-onder{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}
@media(max-width:999px){
  .ll-hero-in{grid-template-columns:1fr}
  .ll-hero-foto{width:100%;opacity:.35}
  .ll-hero::before{background:linear-gradient(180deg,rgba(243,241,232,.9),rgba(243,241,232,.78))}
  .ll-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ll-rapport{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ll-hero-in{padding:20px 16px}
  .ll-keuze{grid-template-columns:1fr;gap:8px}
  .ll-keuze-knop{padding:10px 14px;min-height:56px}
  .ll-getallen{grid-template-columns:1fr}
  .ll-stappen{grid-template-columns:1fr}
}
@media(max-width:380px){.ll-live-lijst{grid-template-columns:1fr}.ll-leerlijst li{grid-template-columns:1fr}}
@media print{.ll-keuze{display:none}.ll-paneel[hidden]{display:block!important}}

/* ── Ontwerpronde 25-10-2026: vormgeving volgens het voorbeeld (hero over de volle breedte, tabs, grote kaarten, compacte blokken) ── */
.ll-hero{min-height:340px;background:#f6f4ec}
.ll-hero-foto{width:68%;object-position:50% 12%}
.ll-hero::before{background:linear-gradient(90deg,#f6f4ec 0%,#f6f4ec 34%,rgba(246,244,236,.7) 50%,rgba(246,244,236,0) 72%)}
.ll-hero-in{grid-template-columns:minmax(0,1fr);padding:34px 28px;max-width:640px}
.ll-label{background:none;border:0;padding:0;color:var(--huis);letter-spacing:.2em;font-size:.76rem}
.ll-hero h1{font-family:var(--font-sans);font-weight:800;color:#0f2540;font-size:clamp(1.9rem,4.8vw,3rem);line-height:1.08;margin-top:10px}
.ll-lead{color:#3f5160}
.ll-kenmerken li{background:rgba(255,255,255,.9);font-size:.84rem}

.ll-keuze{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.ll-keuze-knop{min-height:44px;padding:9px 18px;border-radius:999px;box-shadow:none;font-weight:700;gap:8px;font-size:.95rem}
.ll-keuze-knop .ohn-ico{width:18px;height:18px}
.ll-keuze-knop[aria-current="true"]{background:#1769d6;border-color:#1769d6}
.ll-predict-pil{margin-left:auto;font-size:.82rem;color:var(--muted);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:6px 14px}

.ll-paneel{display:grid;gap:14px;min-width:0}
.ll-paneel[hidden]{display:none}
.ll-kop{align-items:baseline}
.ll-getallen{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.ll-getal{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--schaduw)}
.ll-getal--huis{background:linear-gradient(135deg,#f1f6fd,#fff)}
.ll-getal--zon{background:linear-gradient(135deg,#f0faf3,#fff)}
.ll-getal strong{font-family:var(--font-sans);font-weight:800;font-size:clamp(2rem,5vw,2.7rem)}
.ll-figuur{margin:0;padding:14px 16px}
.ll-fig-kop{font-weight:800;font-size:1.02rem;margin-bottom:6px}
.ll-tabel{margin-top:0}

.ll-raster{align-items:start}
.ll-batterij{background:linear-gradient(180deg,#f2faf5,#fff)}
.ll-onder{grid-template-columns:minmax(0,1fr);gap:14px}
.ll-onder .ohn-kaart{margin:0}
.ll-nauw-sub{font-size:.88rem;color:var(--muted)}
.ll-nauw-pct{font-size:1.5rem;font-weight:800;line-height:1}
.ll-nauw-pct small{font-size:.74rem;font-weight:600;color:var(--muted)}
.ll-opbouw{margin-top:0;background:var(--zon-l);border-radius:10px;padding:8px 12px;color:#5c3b00}
.ll-meer summary{cursor:pointer;font-size:.86rem;font-weight:700;color:var(--gd);padding:4px 0}
.ll-leren .ll-stappen{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ll-leren .ll-stappen li{display:grid;justify-items:start;gap:4px;box-shadow:none;padding:12px;align-content:start}
.ll-leren .ll-stappen strong{font-size:.95rem}
.ll-leren .ll-stappen p{font-size:.8rem}
.ll-rapport{background:linear-gradient(90deg,#eef6fd,#fff)}

@media(min-width:1000px){
  .ll-raster{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
  .ll-paneel{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:stretch}
  .ll-kop,.ll-tabel{grid-column:1/-1}
  .ll-getallen{grid-template-columns:1fr;align-content:stretch}
  .ll-onder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:999px){
  .ll-hero-foto{width:62%;opacity:1}
  .ll-hero::before{background:linear-gradient(90deg,#f6f4ec 0%,#f6f4ec 40%,rgba(246,244,236,.55) 62%,rgba(246,244,236,0) 85%)}
  .ll-hero-in{padding:24px 18px}
}
@media(max-width:640px){
  .ll-hero{min-height:0}
  .ll-hero-in{padding:20px 16px;max-width:none}
  .ll-hero h1{font-size:1.75rem;max-width:11em}
  .ll-lead{max-width:15em;font-size:.95rem}
  .ll-keuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ll-keuze-knop{padding:9px 6px;justify-content:center;font-size:.9rem}
  .ll-keuze-knop .ohn-ico{display:none}
  .ll-predict-pil{grid-column:1/-1;margin:0;text-align:center}
  .ll-getallen{grid-template-columns:1fr}
  .ll-leren .ll-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
}