/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina "Beheerpaneel"

   Laadt ná style.css en gebruikt dezelfde tokens (--ember, --ink,
   --ash …). Alleen wat deze pagina extra nodig heeft staat hier;
   de homepage wordt hier niet door geraakt.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero van deze pagina ───────────────────────────── */
/* Lager dan de hero op de homepage: dit is een leespagina, geen
   openingsbeeld. De bezoeker moet meteen kunnen beginnen lezen. */
.bp-hero{
  position:relative; overflow:hidden;
  padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,6vw,4.5rem);
}
.bp-hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(140vw,1300px); aspect-ratio:1; left:50%; top:-46%;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(245,37,31,.26), rgba(245,37,31,.06) 46%, transparent 70%),
    radial-gradient(closest-side at 60% 60%, rgba(255,106,43,.14), transparent 60%);
  filter:blur(30px);
}
.bp-hero .wrap{ position:relative; z-index:2; }
.bp-hero__title{
  font-size:clamp(2.6rem,7.5vw,5.4rem);
  margin:1.1rem 0 1.4rem; max-width:16ch;
}
.bp-hero__title em{ color:var(--ember); }
.bp-hero__lead{ max-width:56ch; font-size:clamp(1.04rem,.6vw + .92rem,1.24rem); color:var(--ash-2); }
.bp-hero__acties{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* ── 2. Strook met de kernbelofte ──────────────────────── */
.bp-belofte{ border-block:1px solid var(--line); background:var(--ink-2); }
.bp-belofte__grid{ display:grid; grid-template-columns:1fr 1fr; }
.bp-belofte__blok{
  padding:clamp(2rem,4vw,3rem) clamp(1.3rem,2.6vw,2.4rem);
  border-left:1px solid var(--line);
}
.bp-belofte__blok:first-child{ border-left:0; }
.bp-belofte__blok h2{ font-size:clamp(1.3rem,2.4vw,1.75rem); margin-bottom:.7rem; }
.bp-belofte__blok p{ font-size:.97rem; max-width:44ch; }

/* ── 3. Op maat van jouw zaak: het schermvoorbeeld ─────── */
.bp-soorten{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.bp-soort{
  padding:.6rem 1.2rem; border-radius:999px;
  border:1px solid var(--line); background:var(--glass);
  font-size:.88rem; font-weight:500; color:var(--ash-3);
  transition:border-color .3s, color .3s, background .3s, transform .3s var(--ease);
}
.bp-soort:hover{ color:var(--ash); border-color:var(--line-2); }
.bp-soort[aria-selected="true"]{
  color:#fff; border-color:transparent; background:var(--grad-ember);
  box-shadow:0 8px 26px -12px rgba(245,37,31,.7);
}

/* Nagebootst venster. Bewust geen schermafbeelding: die veroudert
   zodra ik iets aan het paneel wijzig, en op een telefoon is een
   schermafbeelding van een scherm onleesbaar klein. */
.bp-venster{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2); box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
}
.bp-venster__balk{
  display:flex; align-items:center; gap:.5rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--line);
  background:rgba(10,9,8,.6);
}
.bp-venster__stip{ width:9px; height:9px; border-radius:50%; background:var(--line-2); flex-shrink:0; }
.bp-venster__naam{
  margin-left:.6rem; font-size:.78rem; letter-spacing:.02em; color:var(--ash-3);
}
.bp-venster__lijf{ display:grid; grid-template-columns:210px 1fr; min-height:330px; }

.bp-zijbalk{ border-right:1px solid var(--line); padding:1rem .8rem; background:rgba(10,9,8,.35); }
.bp-zijbalk__titel{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-3); padding:0 .6rem; margin-bottom:.8rem;
}
.bp-knop{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .7rem; border-radius:10px; margin-bottom:.2rem;
  font-size:.88rem; color:var(--ash-2);
}
.bp-knop--aan{ background:rgba(245,37,31,.12); color:var(--ash); }
.bp-knop__stip{
  width:6px; height:6px; border-radius:50%; background:var(--ash-3); flex-shrink:0;
}
.bp-knop--aan .bp-knop__stip{ background:var(--ember); }

.bp-inhoud{ padding:clamp(1.2rem,2.4vw,1.8rem); }
.bp-inhoud__kop{ font-family:var(--f-display); font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.35rem; }
.bp-inhoud__uitleg{ font-size:.86rem; color:var(--ash-3); margin-bottom:1.2rem; }
.bp-veld{
  border:1px solid var(--line); border-radius:12px; padding:.75rem .9rem;
  margin-bottom:.6rem; background:var(--ink);
}
.bp-veld__lbl{ display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-3); margin-bottom:.35rem; }
.bp-veld__waarde{ font-size:.92rem; color:var(--ash); }
.bp-veld__balk{ height:8px; border-radius:4px; background:var(--line); }
.bp-veld__balk i{ display:block; height:100%; border-radius:4px; background:var(--line-2); }

/* Het venster wisselt van inhoud; dat mag zacht gaan. */
.bp-paneel[hidden]{ display:none; }
.js .bp-paneel{ animation:bpIn .45s var(--ease-out) both; }
@keyframes bpIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bp-venster__voet{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-top:1px solid var(--line);
  background:rgba(10,9,8,.6); font-size:.82rem; color:var(--ash-3);
}
.bp-venster__voet b{ color:var(--ash); font-weight:500; }
.bp-bewaar{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem 1rem; border-radius:999px;
  background:var(--grad-ember); color:#fff; font-size:.8rem; font-weight:600;
}

/* ── 4. Rasters met korte punten ───────────────────────── */
.bp-raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); }
.bp-raster--twee{ grid-template-columns:repeat(2,1fr); }
.bp-tegel{
  padding:clamp(1.4rem,2.4vw,1.9rem); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--ink-2);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.bp-tegel:hover{ border-color:var(--line-2); background:var(--ink-3); }
.bp-tegel__ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--glass); color:var(--ember);
  margin-bottom:1.1rem;
}
.bp-tegel h3{ font-size:1.12rem; margin-bottom:.55rem; }
.bp-tegel p{ font-size:.93rem; }

/* ── 5. Donkere strook ─────────────────────────────────── */
.bp-gerust{ background:var(--ink-2); border-block:1px solid var(--line); }

/* ── 6. Veiligheid ─────────────────────────────────────── */
.bp-veilig{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.bp-veilig div{ background:var(--ink-2); padding:1.4rem 1.2rem; }
.bp-veilig b{ display:block; font-family:var(--f-display); font-size:.95rem; font-weight:800;
  letter-spacing:-.01em; color:var(--ash); margin-bottom:.4rem; }
.bp-veilig span{ font-size:.85rem; color:var(--ash-3); }

/* ── 7. Wat het niet doet ──────────────────────────────── */
/* Bewust nuchter opgemaakt, niet weggestopt. Wie dit leest en er niet
   over struikelt, vertrouwt de rest van de pagina ook meer. */
.bp-niet{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(160deg, rgba(246,241,234,.04), transparent 60%);
}
.bp-niet h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:.5rem; }
.bp-niet > p{ font-size:.95rem; max-width:60ch; margin-bottom:1.6rem; }
.bp-niet ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.bp-niet li b{ display:block; font-weight:600; color:var(--ash); margin-bottom:.3rem; font-size:.98rem; }
.bp-niet li span{ font-size:.9rem; color:var(--ash-3); }

/* ── 8. Slot ───────────────────────────────────────────── */
.bp-slot{ position:relative; overflow:hidden; text-align:center; }
.bp-slot__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1000px); aspect-ratio:1; left:50%; bottom:-58%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(245,37,31,.22), transparent 68%);
  filter:blur(30px);
}
.bp-slot .wrap{ position:relative; z-index:2; }
.bp-slot h2{ font-size:clamp(1.9rem,4.6vw,3.2rem); margin-bottom:1rem; }
.bp-slot h2 em{ color:var(--ember); }
.bp-slot p{ max-width:48ch; margin-inline:auto; }
.bp-slot__acties{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }

/* ── 9. Responsive ─────────────────────────────────────── */
@media (max-width:1080px){
  .bp-raster{ grid-template-columns:1fr 1fr; }
  .bp-niet ul{ grid-template-columns:1fr 1fr; }
  .bp-veilig{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .bp-belofte__grid{ grid-template-columns:1fr; }
  .bp-belofte__blok{ border-left:0; border-top:1px solid var(--line); }
  .bp-belofte__blok:first-child{ border-top:0; }
  .bp-raster,.bp-raster--twee{ grid-template-columns:1fr; }
  .bp-niet ul{ grid-template-columns:1fr; }
  /* Zijbalk boven de inhoud in plaats van ernaast: naast elkaar wordt
     het op een telefoon te smal om nog iets van te kunnen lezen. */
  .bp-venster__lijf{ grid-template-columns:1fr; }
  .bp-zijbalk{ border-right:0; border-bottom:1px solid var(--line); }
  .bp-hero__acties .btn{ width:100%; }
}
@media (max-width:520px){
  .bp-veilig{ grid-template-columns:1fr; }
  .bp-slot__acties .btn{ width:100%; }
}