/* Shared public website theme. Loaded after page styles; never used by CRM or print brochures. */
body.site-premium {
  --bg-0:#ffffff;
  --bg-1:#ffffff;
  --bg-2:#ffffff;
  --ink:#13292b;
  --ink-soft:#4d5f60;
  --ink-faint:#4d5f60;
  --line:rgba(19,41,43, .14);
  --line-strong:rgba(19,41,43, .28);
  --accent:#0f6b6b;
  --accent-2:#413f3c;
  --accent-3:#0f6b6b;
  --volt:#0f6b6b;
  --volt-soft:#0f6b6b;
  --grad:linear-gradient(120deg, #0f6b6b, #0f6b6b);
  --r-lg: 16px;
  --r-xl: 22px;
  background: var(--bg-0);
  color: var(--ink);
  color-scheme:light;
}
.site-premium ::selection { background:#0f6b6b; color:#ffffff; }
.site-premium .aurora, .site-premium .grid-overlay, .site-premium .noise { display: none; }
.site-premium .container { width: min(1320px, calc(100% - 80px)); }
.site-premium :where(a) { color:var(--accent); text-underline-offset: 4px; }
.site-premium :where(h1,h2,h3,h4) { color: var(--ink); }
.site-premium :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--accent); outline-offset: 4px; }
.site-premium :where(input,select,textarea) { accent-color:#0f6b6b; }
/* Native inputs that are visually hidden (opacity:0): draw the keyboard ring on the visible card instead. */
.site-premium .fase-opt input:focus-visible + .fase-box, .site-premium .type-opt input:focus-visible + label { outline:3px solid var(--accent); outline-offset: 3px; }
.site-premium :is(.calc-radio,.calc-check,.ep-drop):has(input:focus-visible), .site-premium #foto-drop:has(+ #fotos:focus-visible) { outline:3px solid var(--accent); outline-offset: 3px; }
.site-premium input[type="range"].calc-slider:focus-visible { outline:3px solid var(--accent); outline-offset: 6px; }
/* Text fields whose own :focus rule sets outline:none keep the keyboard ring. */
.site-premium .form-field :is(input,select,textarea):focus-visible, .site-premium :is(.ere-check-form,.ep-form) :is(input,textarea):focus-visible, .site-premium .ep-vraag input[type=number]:focus-visible { outline:3px solid var(--accent); outline-offset: 2px; }
/* FAQ toggles fill an item that clips its overflow: keep the ring inside the item. */
.site-premium .faq-q:focus-visible { outline-offset: -3px; border-radius: inherit; }
.site-premium .nav { background:#fffffff2; border-color: var(--line); backdrop-filter: blur(20px); }
.site-premium .nav-row { min-height: 84px; }
.site-premium .brand { color: var(--ink); }
.site-premium .brand-text span { color: var(--ink-faint); }
.site-premium .nav-links a { color: var(--ink-soft); }
.site-premium .nav-links a[aria-current=page] { color: var(--accent); background:#0f6b6b0d; }
.site-premium .nav .nav-cta { background:#0f6b6b !important; color:#ffffff !important; }
.site-premium .nav .nav-cta:hover { background:#0b5656 !important; }
.site-premium .nav-spoed { animation: none; }
.site-premium .nav-dropdown-panel { background:#ffffff; border-color: var(--line-strong); }
.site-premium .nav-dropdown-col a.nav-dropdown-heading { color:var(--accent) !important; }
.site-premium .nav-dropdown-heading { opacity: 1; }
.site-premium .btn { min-height: 48px; border-radius: 8px; }
.site-premium .btn-primary { background:#0f6b6b; color:#ffffff; box-shadow:0 10px 26px #0001; }
.site-premium .btn-primary:hover { background:#0b5656; box-shadow:0 14px 32px #0001; }
.site-premium .btn-ghost { color: var(--ink); background:#0f6b6b07; border-color: var(--line-strong); }
.site-premium .page-hero, .site-premium .blog-hero { padding: 64px 0 56px; background:radial-gradient(ellipse at 85% 25%, #ffffff48, transparent 65%); border-bottom: 1px solid var(--line); }
.site-premium .page-title { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.06; letter-spacing: -.055em; }
.site-premium .section-title { letter-spacing: -.04em; line-height: 1.12; }
.site-premium .page-sub, .site-premium .section-sub { color: var(--ink-soft); line-height: 1.75; }
.site-premium .hero-tag { color: var(--accent); background:#0f6b6b08; border-color: var(--line-strong); }
.site-premium .section { padding-top: 76px; padding-bottom: 76px; }
.site-premium .eyebrow { color:var(--accent); }
.site-premium .eyebrow::before { background:var(--accent-fill,#0f6b6b); }
.site-premium .battery-grad { background:var(--grad); background-clip: text; -webkit-background-clip: text; color: transparent; }
.site-premium .solar-grad { background:var(--grad); background-clip: text; -webkit-background-clip: text; color: transparent; }
.site-premium.brand-accent, .site-premium .brand-accent { --merk:#0f6b6b; --merk-soft:rgba(15,107,107,.1); --merk-line:rgba(15,107,107,.4); }
.site-premium .reco-eyebrow { color: var(--accent); }
.site-premium .btn-offerte { background:#0f6b6b; color:#ffffff; border-radius: 8px; min-height: 44px; }
.site-premium .btn-offerte:hover { background:#0b5656; }
.site-premium .btn-spoed { color:#fff; background:#c92121; }
.site-premium .testi-google { background:#2864c7; color:#fff; }
.site-premium .step-shot figcaption { color: var(--ink-soft); background: #1e1e1f; }
.site-premium .service-card, .site-premium .route-card, .site-premium .usp-card,
.site-premium .product-card, .site-premium .merk-card, .site-premium .review-card,
.site-premium .step-card, .site-premium .link-card, .site-premium .blog-card,
.site-premium .compare-card, .site-premium .proj-card, .site-premium .contact-card {
  background:linear-gradient(145deg, #ffffff, #ffffff);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 16px;
  box-shadow:0 18px 42px #0001;
}
.site-premium :is(.service-card,.route-card,.product-card,.merk-card,.blog-card,.link-card):hover { border-color:#4f4d4a70; box-shadow:0 22px 45px #0002; }
.site-premium .service-thumb { height: 240px; }
.site-premium .service-thumb img { filter: none; }
.site-premium :is(.step-icon,.service-icon,.usp-icon) { color: var(--accent); background:#0f6b6b0d; border-color: var(--line-strong); }
.site-premium .trust-proof { background:#ffffff; color: var(--ink); border-color: var(--line); padding: 56px 0; }
.site-premium .trust-proof .eyebrow { color:var(--accent); }
.site-premium .trust-proof .eyebrow::before { background:var(--accent-fill,#0f6b6b); }
.site-premium .trust-proof-copy h2 { color: var(--ink); letter-spacing: -.035em; }
.site-premium .trust-proof-copy p, .site-premium .trust-proof-item p { color: var(--ink-soft); }
.site-premium .trust-proof-item { background:#ffffff; border-color: var(--line-strong); border-radius: 12px; box-shadow:0 14px 28px #0001; padding: 20px 16px; }
.site-premium .trust-proof-item strong { color:#0f6b6b; }
.site-premium .trust-proof-kicker { color:#4d5f60; }
.site-premium .calc-wrap, .site-premium .wizard-card, .site-premium .form-card { background:#ffffff; border-color: var(--line-strong); border-radius: 18px; box-shadow:0 24px 60px #0001; }
.site-premium .calc-result, .site-premium .price-cta-card { background:linear-gradient(135deg, #ffffff, #ffffff); color: var(--ink); border-color: var(--line-strong); }
.site-premium .calc-radio-content, .site-premium .wiz-row { background:#ffffff; border-color: var(--line-strong); }
.site-premium .calc-radio input:checked + .calc-radio-content, .site-premium .wiz-row.is-selected { border-color:var(--accent); background:#ffffff; }
.site-premium .form-field :is(input,select,textarea), .site-premium .wiz-input { background:#ffffff; color: var(--ink); border-color:#c3dcd8; }
.site-premium .form-field :is(input,select,textarea)::placeholder { color:#4d5f60; opacity: 1; }
.site-premium select option { background:#ffffff; color: var(--ink); }
.site-premium .form-field :is(input,select,textarea):focus { background:#ffffff; border-color:var(--accent); }
/* Page-specific fields (ERE checker, energieplan): edge and placeholder at the shared field contrast. The edge rule has
   the same specificity as the page's own rule on purpose (this file loads later), so the page's :focus colour still wins. */
.ere-check-form input, .ep-form input, .ep-form textarea, .ep-vraag input[type=number] { border-color:#c3dcd8; }
.site-premium .ere-check-form input::placeholder { color:#4d5f60; opacity: 1; }
.site-premium .stat-strip, .site-premium .usp-strip { background:#ffffff; border-color: var(--line-strong); }
.site-premium .cost-table, .site-premium .price-table { border-color: var(--line-strong); }
.site-premium .cost-table-row.head { background:#ffffff; }
.site-premium .faq-item { border-color: var(--line-strong); }
.site-premium .faq-question { color: var(--ink); }
.site-premium .brand-tile, .site-premium .cert-logo-tile { --accent:#3c3c3d; --ink:#13292b; --ink-soft:#4d5f60; background:#f0f7f6; border-color:#c3dcd8; }
.site-premium .photo-band { padding: 100px 0; }
.site-premium .photo-band::before { background: linear-gradient(90deg, #0d0d0eeb, #0d0d0e65); }
.site-premium .photo-band :is(h2,h3) { color: #f4f1eb; }
.site-premium .photo-band p { color: #e8e4dc; }
.site-premium .cta-section { background:radial-gradient(ellipse at 50% 80%, #ffffff, #ffffff 70%); border-color: var(--line); }
.site-premium .foot, .site-premium footer { background:#ffffff; border-color: var(--line); }
.site-premium .foot a { color: var(--ink-soft); }
.site-premium .foot a:hover { color:var(--accent); }
.site-premium .scroll-progress { background:#0f6b6b; box-shadow: none; }
.site-premium .reveal, .site-premium .reveal-up, .site-premium .reveal-left, .site-premium .reveal-right, .site-premium .reveal-scale { opacity: 1; transform: none; }
/* Light editorial panel owns its text tokens; it cannot inherit pale text from a dark section. */
.site-premium .energy-collection { --ink:#13292b; --ink-soft:#4d5f60; --ink-faint:#4d5f60; --accent:#3c3c3d; color-scheme: light; }
.site-premium .energy-card { --ink: #f4f1eb; --ink-soft: #e8e4dc; color: #f4f1eb; }
/* Cookiebalk: maten en vorm (pil) komen uit privacy-controls.js; hier alleen kleur en letter.
   Geen max-width/padding/min-height meer: die hoorden bij de oude kaart en drukten de
   knoppen buiten de pil ("Nee" werd een rondje). */
.site-premium #am-cookie-panel { background:#ffffff; color:#13292b; border-color:#c3dcd8; font-family:'Inter',sans-serif; }
.site-premium #am-cookie-panel button { background:#ffffff; color:#13292b; border-color:#7f7d7a; font-family:'Inter',sans-serif; }
.site-premium #am-cookie-panel a { color:#0f6b6b; opacity:1; }
/* Tot 768px staat onderin de knoppenbalk (cta-widgets.js); de cookiebalk lag daar half
   overheen. Nu staat hij erboven, links naast de chatknop. */
@media (max-width:768px) {
  body.site-premium:has(.am-mobile-cta) #am-cookie-panel { left:12px; right:92px; bottom:calc(88px + env(safe-area-inset-bottom)); transform:none; width:auto; max-width:none; border-radius:16px; }
  body.site-premium:has(.am-mobile-cta) #am-cookie-panel p { white-space:normal; }
}
/* "Ja, prima": privacy-controls.js zet hem zwart; op de site petrol (geen zwarte knoppen). */
.site-premium #am-cookie-panel button[data-choice=yes] { background:#0f6b6b; border-color:#0f6b6b; color:#ffffff; }
.site-premium #am-cookie-settings { background:#ffffff; border:1px solid #c3dcd8; color:#13292b; border-radius: 8px; }
.site-premium .am-chat-fab, .site-premium .am-chat-window { background:#ffffff; border-color:#777572; }
.site-premium .am-chat-fab svg { stroke:#0f6b6b; }
.site-premium .am-chat-fab-badge { background:#0f6b6b; border-color:#c3dcd8; }
.site-premium .am-chat-header, .site-premium .am-chat-footer { background:#ffffff; border-color: var(--line-strong); }
.site-premium .am-chat-avatar, .site-premium .am-chat-send { background:#0f6b6b; color:#ffffff; }
.site-premium .am-chat-header-status, .site-premium .am-chat-quick-btn { color:#0f6b6b; }
.site-premium .am-chat-quick-btn { background:#ffffff; border-color:#c3dcd8; }
.site-premium .am-chat-msg.bot, .site-premium .am-chat-typing { background:#ffffff; color:#13292b; }
.site-premium .am-chat-msg.user { background:#ffffff; color:#13292b; border-color:#c3dcd8; }
.site-premium .am-chat-input { background:#ffffff; color:#13292b; border-color:#c3dcd8; }
.site-premium .am-chat-input::placeholder { color:#4d5f60; }
.site-premium .am-mobile-cta { background:#fffffff5; border-color:#c3dcd8; }
.site-premium .am-mobile-cta a:first-child { background:#0f6b6b; color:#ffffff; }
.site-premium .am-mobile-cta a:last-child { background:#ffffff; border-color:#c3dcd8; color:#13292b; }
/* Photographic service and product introductions. The stats keep their full row below. */
.site-premium .wiz-panel { background:#ffffff; border:1px solid #c3dcd8; box-shadow:0 20px 50px #0001; }
.site-premium .wiz-row { background:#ffffff; border-color:#c3dcd8; }
.site-premium .wiz-row:hover { background:#ffffff; border-color:#6fb8b2; }
.site-premium .wiz-row.selected, .site-premium .wiz-row.wiz-row-multi.selected { background:#ffffff; border-color:#0f6b6b; box-shadow:0 0 0 1px #0f6b6b30; }
.site-premium .wiz-row-icon { background:#ffffff; border-color:#c3dcd8; color:#0f6b6b; }
.site-premium .wiz-row.selected .wiz-row-icon, .site-premium .wiz-row.wiz-row-multi.selected .wiz-row-icon { background:#0f6b6b; border-color:#0f6b6b; color:#ffffff; }
.site-premium .wiz-arr-a { color:#4d5f60; }
.site-premium .wiz-row-grid .wiz-row { margin-bottom: 0; }
.site-premium .wiz-bar-fill { background:#0f6b6b; }
.site-premium .btn-whatsapp { color:#cef5d7; background:#19452a; }
.site-premium .premium-page-hero > .container { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 38px 54px; align-items: center; }
.premium-hero-copy { min-width: 0; }
.site-premium .premium-page-hero .page-title { font-size: clamp(38px,4.35vw,62px); }
.site-premium .premium-page-hero .page-sub { font-size: 16px; max-width: 54ch; }
.premium-hero-visual { position: relative; margin: 0; min-width: 0; perspective: 1200px; }
.premium-hero-frame { position: relative; border-radius: 20px; border: 1px solid #e8e4dc40; box-shadow: 0 30px 60px #0006; transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,-3deg)); transition: transform .35s ease; overflow: hidden; background: #2a2a2b; }
.premium-hero-frame > img { display: block; width: 100%; height: 470px; object-fit: cover; }
.premium-product-frame > img { object-fit: contain; padding: 28px 28px 96px; background:radial-gradient(ellipse at 50% 35%, #ffffff, #ffffff 70%); }
.premium-hero-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,#0f0f10d9); pointer-events: none; }
.premium-hero-frame figcaption { position: absolute; bottom: 26px; left: 28px; right: 28px; z-index: 1; color: #f4f1eb; }
.premium-hero-frame figcaption span { display: block; font: 10px 'JetBrains Mono',monospace; letter-spacing: .12em; color: #6fb8b2; margin-bottom: 9px; text-transform: uppercase; }
.premium-hero-frame figcaption strong { display: block; max-width: 25ch; font: 500 26px/1.2 'Space Grotesk',sans-serif; letter-spacing: -.025em; }
.premium-hero-visual::before { content: ''; position: absolute; inset: 28px -12px -12px 24px; border:1px solid #0f6b6b28; border-radius: 22px; pointer-events: none; }
.site-premium .premium-page-hero > .container > :is(.stat-strip,.usp-strip) { grid-column: 1/-1; margin-top: 0; }
@media(min-width:981px) { .site-premium .nav-has-dropdown:focus-within .nav-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } }
@media(max-width:1100px) { .site-premium .container { width: calc(100% - 48px); } .site-premium .premium-page-hero > .container { gap: 30px; } .premium-hero-frame > img { height: 440px; } .site-premium .trust-proof-inner { grid-template-columns: 1fr; } }
@media(max-width:980px) { .site-premium .nav-row { min-height: 76px; } .site-premium .nav-links { background:#ffffff; max-height: calc(100dvh - 90px); overflow-y: auto; } .site-premium .nav-dropdown-panel { background: transparent; } .site-premium .premium-page-hero > .container { grid-template-columns: 1fr; } .premium-hero-visual { width: 100%; max-width: 700px; justify-self: center; } .premium-hero-frame { transform: none; } .premium-hero-frame > img { height: 420px; } }
@media(max-width:600px) { .site-premium .container { width: calc(100% - 40px); } .site-premium .page-hero, .site-premium .blog-hero { padding: 40px 0; } .site-premium .section { padding-top: 52px; padding-bottom: 52px; } .site-premium .page-title { font-size: 39px; overflow-wrap: anywhere; } .site-premium .premium-page-hero .page-title { font-size: 39px; } .site-premium .trust-proof { padding: 40px 0; } .site-premium .trust-proof-grid { grid-template-columns: 1fr 1fr; } .site-premium .trust-proof-item { padding: 17px 14px; min-width: 0; } .site-premium .trust-proof-item strong { font-size: 20px; } .site-premium .trust-proof-item p { font-size: 13px; } .premium-hero-frame > img { height: 330px; } .premium-hero-frame figcaption { left: 22px; bottom: 23px; } .premium-hero-frame figcaption strong { font-size: 23px; } .premium-hero-visual::before { inset: 18px -7px -9px 20px; } .site-premium .breadcrumb { flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto !important; } .site-premium *, .site-premium *::before, .site-premium *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .premium-hero-frame { transform: none !important; } }
@media(max-width:600px) { .site-premium .process { grid-template-columns: minmax(0,1fr); } .site-premium .step { min-width: 0; } }

/* Ankersprongen: de nav is sticky (85px desktop, 76px mobiel). Zonder deze regel
   verdwijnt het kopje van de aangesprongen sectie achter de balk. */
html { scroll-padding-top: 100px; }
@media(max-width:980px) { html { scroll-padding-top: 92px; } }

/* Three energy specialisms in the shared menu. */
@media(min-width:981px){.site-premium .nav-dropdown-panel{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Skip link: first element in <body>. Off-screen until it receives focus, then top-left above the sticky nav. */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10010; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 8px; background:#ffffff; color:#13292b; font: 600 14px/1.3 'Inter', system-ui, sans-serif; text-decoration: none; transform: translateY(-200%); }
a.skip-link:focus, a.skip-link:focus-visible { transform: none; outline:3px solid #0f6b6b; outline-offset: 3px; box-shadow:0 12px 30px #0003; }
/* The skip target is a container, not a control: no ring around the whole page content. */
.site-premium main[tabindex="-1"]:focus { outline: none; }

/* Privacy note under a form's submit button. The colour follows the surface tokens:
   #c5c0bb on the dark form cards, #49494a inside the light panels (both above 4.5:1). */
.site-premium .form-privacy { grid-column: 1 / -1; margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.site-premium .form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-premium .form-privacy a:hover { color:var(--accent); }

/* licht-thema: aanvullingen (palet petrol, sinds 15-10-2026 op de hele publieke site; zie THEME.md) */
:root{--accent-fill:#0f6b6b}
.photo-band .btn-ghost{color:#fff;border-color:#ffffff55}
.eco-card,.energy-card,.photo-band,.scene-photo,.premium-hero-frame{--ink:#f4f1eb;--ink-soft:#e8e4dc;--ink-faint:#c5c0bb}
body.site-premium,.home-premium{--grad:linear-gradient(120deg,#0f6b6b,#0b5656);--grad-fill:linear-gradient(120deg,#0b5656,#0f6b6b);--accent:#0f6b6b;--accent-2:#4d5f60;--accent-3:#0f6b6b;--volt:#0f6b6b;--volt-soft:#0b5656}
.site-premium .btn-primary,.site-premium .btn-offerte,.site-premium .nav .nav-cta,.home-premium .nav-cta,.home-premium .btn-primary{background:#0f6b6b!important;color:#fff!important;border-color:#0f6b6b!important}
.site-premium .btn-primary:hover,.site-premium .btn-offerte:hover,.site-premium .nav .nav-cta:hover,.home-premium .btn-primary:hover{background:#0b5656!important}
.site-premium .btn-ghost,.site-premium .btn-secondary{background:#fff;border-color:#c3dcd8;color:#13292b}
.site-premium .hero-tag,.site-premium .eyebrow{color:#0f6b6b}
.site-premium ::selection{background:#0f6b6b;color:#fff}
.rating-stars,.testi-stars,.testi-rating-stars,.review-stars,.stars{color:#edb96a!important}

/* Hoofdmenu 20-10: drie losse dropdowns (Zonnepanelen / Energieopslag / Laadoplossingen) i.p.v. één Diensten-megamenu */
@media(min-width:981px){
  .site-premium .nav-dropdown-panel.nav-dropdown-single,.nav-dropdown-panel.nav-dropdown-single{grid-template-columns:1fr;min-width:260px;padding:1.1rem 1rem 1rem}
  .nav-dropdown-single .nav-dropdown-col{padding:0;border-right:none}
}
@media(min-width:981px){.site-premium .nav-links > a,.site-premium .nav-links .nav-dropdown-trigger{white-space:nowrap}}
@media(min-width:981px) and (max-width:1199px){
  .site-premium .nav-links > a:not(.nav-cta),.site-premium .nav-links .nav-dropdown-trigger{padding-left:.55rem;padding-right:.55rem}
  .site-premium .nav-links > a.nav-cta{padding-left:.9rem;padding-right:.9rem}
}
@media(min-width:981px) and (max-width:1099px){
  .site-premium .nav-links > a:not(.nav-cta),.site-premium .nav-links .nav-dropdown-trigger{padding-left:.4rem;padding-right:.4rem}
  .site-premium .nav-links > a.nav-cta{padding-left:.75rem;padding-right:.75rem}
}
@media(min-width:981px) and (max-width:1059px){
  .site-premium .nav-links > a:not(.nav-cta),.site-premium .nav-links .nav-dropdown-trigger{padding-left:.28rem;padding-right:.28rem}
}