/* ==========================================================================
   Dark Energy Rental (DER) huisstijl
   Veel wit, magenta voor koppen en knoppen, signaalgroen alleen voor status.
   Scherpe hoeken (max 4px), geen verlopen, lichte schaduw.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Logokleuren, gemeten uit het logobestand */
  --der-magenta: #D60283;
  --der-groen: #01CB2F;
  --der-zwart: #000000;

  /* Afgeleide kleuren voor leesbaarheid */
  --der-magenta-diep: #A80167;
  --der-groen-donker: #007A27;
  --der-tekst: #1A1A1A;
  --der-antraciet: #2B2B33;
  --der-grijs: #5C5C66;
  --der-grijs-licht: #B4B4BE;
  --der-lijn: #D9D9DE;
  --der-lijn-donker: #3E3E48;
  --der-lichtgrijs: #F4F4F6;
  --der-magenta-tint: #FBE0F0;
  --der-groen-tint: #E0F9E6;
  --der-wit: #FFFFFF;

  --radius: 4px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, .08);
  --font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font);
  color: var(--der-tekst);
  background: var(--der-wit);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--der-magenta); }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--der-tekst); }
p { max-width: 72ch; }

a { color: var(--der-magenta-diep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--der-magenta); }
:focus-visible { outline: 2px solid var(--der-magenta-diep); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.label {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--der-grijs);
  font-weight: 600;
  margin-bottom: 8px;
}

.skip {
  position: absolute; left: 16px; top: -48px;
  background: var(--der-antraciet); color: #fff; padding: 8px 12px; border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { top: 12px; color: #fff; }

/* Knoppen ---------------------------------------------------------------- */

.knop, .knop-secundair {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 16px/1.2 var(--font);
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knop { background: var(--der-magenta); color: #fff; padding: 12px 20px; border: 0; }
.knop:hover { background: var(--der-magenta-diep); color: #fff; }
.knop-secundair { background: transparent; color: var(--der-tekst); border: 1.5px solid var(--der-tekst); padding: 10.5px 18.5px; font-weight: 600; }
.knop-secundair:hover { background: var(--der-tekst); color: #fff; }
.knop svg, .knop-secundair svg { width: 18px; height: 18px; flex: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Signaal: groen vlak met zwarte tekst, nooit groene tekst op wit */
.signaal {
  display: inline-block;
  background: var(--der-groen); color: #000;
  font-weight: 600; font-size: 14px;
  padding: 2px 8px; border-radius: var(--radius);
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--der-wit);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--der-lijn); box-shadow: var(--schaduw); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.site-header .logo { display: block; flex: none; }
.site-header .logo img { height: 60px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: var(--der-tekst); text-decoration: none; font-weight: 500; font-size: 15px; }
.main-nav a:hover { color: var(--der-magenta-diep); }
.main-nav .knop { color: #fff; padding: 10px 16px; font-size: 16px; }

.nav-toggle {
  display: none;
  background: none; border: 1.5px solid var(--der-lijn); border-radius: var(--radius);
  width: 44px; height: 44px; color: var(--der-tekst); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 84px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--der-wit); border-bottom: 1px solid var(--der-lijn);
    padding: 8px 24px 20px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--der-lichtgrijs); }
  .main-nav .knop { margin-top: 12px; justify-content: center; border: 0; }
}

/* Secties ---------------------------------------------------------------- */

.sectie { padding: 88px 0; }
.sectie--grijs { background: var(--der-lichtgrijs); }
.sectie-kop { max-width: 72ch; margin-bottom: 40px; }
.sectie-kop h2 { margin-bottom: 12px; }
.sectie-kop h2::after {
  content: ""; display: block;
  width: 48px; height: 3px; background: var(--der-magenta);
  margin-top: 14px;
}
.sectie-kop p { color: var(--der-grijs); font-size: 17px; }

/* Hero ------------------------------------------------------------------- */

.hero { padding: 64px 0 88px; border-bottom: 1px solid var(--der-lijn); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--der-magenta); }
.hero .intro { font-size: 18px; margin-bottom: 32px; }
.hero .noot { margin-top: 20px; font-size: 14px; color: var(--der-grijs); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Vanaf-kaart in de hero */
.vanaf {
  background: var(--der-wit);
  border: 1px solid var(--der-lijn);
  border-top: 3px solid var(--der-magenta);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 28px;
}
.vanaf-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.vanaf-titel h2 { font-size: 17px; color: var(--der-tekst); }
.vanaf-titel span { font-size: 13px; color: var(--der-grijs); }
.vanaf ul { list-style: none; }
.vanaf li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--der-lijn);
}
.vanaf li:last-child { border-bottom: 0; padding-bottom: 0; }
.vanaf svg { width: 24px; height: 24px; color: var(--der-magenta); }
.vanaf strong { display: block; font-weight: 600; }
.vanaf li span { font-size: 14px; color: var(--der-grijs); }
.vanaf .bedrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.vanaf .bedrag small { display: block; font-size: 12px; font-weight: 400; color: var(--der-grijs); }

/* Aanbod ----------------------------------------------------------------- */

.aanbod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kaart {
  background: var(--der-wit);
  border: 1px solid var(--der-lijn);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kaart:hover { border-color: var(--der-magenta); box-shadow: var(--schaduw); }
.kaart .icoon { width: 28px; height: 28px; color: var(--der-magenta); margin-bottom: 16px; }
.kaart h3 { margin-bottom: 8px; }
.kaart p { color: var(--der-grijs); font-size: 15px; }
.kaart ul { list-style: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--der-lijn); display: grid; gap: 4px; font-size: 14px; }

/* Gelegenheden ----------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 32px; }
.tags li {
  background: var(--der-wit); border: 1px solid var(--der-lijn);
  border-radius: var(--radius); padding: 8px 14px; font-size: 15px; font-weight: 500;
}

/* Prijslijst ------------------------------------------------------------- */

.tabel-wrap { overflow-x: auto; border: 1px solid var(--der-lijn); border-radius: var(--radius); background: var(--der-wit); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { background: var(--der-antraciet); color: #fff; text-align: left; padding: 12px 16px; font-weight: 600; font-size: 14px; }
td { border-bottom: 1px solid var(--der-lijn); padding: 12px 16px; vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--der-lichtgrijs); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; }
.opm { color: var(--der-grijs); }
.bedrag-kol { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.groep td { background: var(--der-wit) !important; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--der-magenta-diep); font-weight: 600; padding-top: 18px; }

.aandacht {
  margin-top: 20px;
  background: var(--der-magenta-tint);
  border-left: 4px solid var(--der-magenta);
  padding: 14px 18px;
  font-size: 15px;
  max-width: none;
}

/* Werkwijze -------------------------------------------------------------- */

.stappen { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stappen li { border-top: 3px solid var(--der-tekst); padding-top: 16px; }
.stappen li:first-child { border-top-color: var(--der-magenta); }
.stappen .nr { font-size: 13px; font-weight: 600; color: var(--der-grijs); display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stappen h3 { margin-bottom: 6px; }
.stappen p { font-size: 15px; color: var(--der-grijs); }

/* Waarom ----------------------------------------------------------------- */

.usp { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.usp li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--der-lijn); }
.usp svg { width: 22px; height: 22px; color: var(--der-groen-donker); margin-top: 2px; }
.usp strong { display: block; font-weight: 600; margin-bottom: 2px; }
.usp span { color: var(--der-grijs); font-size: 15px; }

/* Contact (donker) ------------------------------------------------------- */

.donker { background: var(--der-antraciet); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.contact h2 { font-size: 28px; color: #fff; margin-bottom: 14px; }
.contact h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--der-groen); margin-top: 14px; }
.contact p { color: var(--der-grijs-licht); font-size: 17px; margin-bottom: 28px; }
.contact dl { display: grid; gap: 16px; border-left: 1px solid var(--der-lijn-donker); padding-left: 32px; }
.contact dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--der-grijs-licht); font-weight: 600; }
.contact dd { font-size: 17px; }
.contact dd a { color: var(--der-groen); }
.contact dd a:hover { color: #fff; }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--der-zwart); color: #fff; padding: 48px 0 32px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.site-footer img { height: 72px; width: auto; margin-bottom: 14px; }
.site-footer p { color: var(--der-grijs-licht); }
.site-footer h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--der-grijs-licht); font-weight: 600; margin-bottom: 10px; }
.site-footer ul { list-style: none; display: grid; gap: 6px; }
.site-footer a { color: var(--der-groen); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-onder { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--der-lijn-donker); color: var(--der-grijs-licht); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Onthullen bij scrollen (alleen met JavaScript) ------------------------- */

.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Responsief ------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .aanbod, .stappen { grid-template-columns: 1fr 1fr; }
  .stappen { row-gap: 32px; }
  .contact dl { border-left: 0; padding-left: 0; border-top: 1px solid var(--der-lijn-donker); padding-top: 24px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .sectie { padding: 64px 0; }
  .hero { padding: 40px 0 64px; }
  .aanbod, .stappen, .usp, .footer-grid { grid-template-columns: 1fr; }
  .vanaf { padding: 20px; }
  .site-header .logo img { height: 52px; }
  th, td { padding: 10px 12px; }
}