/* ==========================================================================
   Autorijschool Ruud Monsuwé
   Palet en vormtaal komen van het dakbord op de lesauto: navy bord, oranje
   logomerk, blauw L-bordje. Het L-bordje is het signature-element, de
   oranje wegmarkering is de scheidingslijn.
   ========================================================================== */

@font-face {
  font-family: 'Chivo';
  src: url('/assets/fonts/chivo-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('/assets/fonts/chivomono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Asap';
  src: url('/assets/fonts/asap-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --nacht: #131a24;
  --nacht-2: #1d2731;
  --asfalt: #2f3d4c;
  --krijt: #f0f1ef;
  --wit: #ffffff;
  --oranje: #ef8332;
  --oranje-diep: #c96716;
  --lblauw: #298edd;
  --lblauw-diep: #14639f;
  --tekst: #18202a;
  --tekst-zacht: #55616f;
  --lijn: #dbdedb;

  --display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Asap', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1180px;
  --r: 10px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--krijt);
  padding-bottom: 60px;               /* ruimte voor de mobiele actiebalk */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--lblauw-diep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--oranje-diep); }

:focus-visible {
  outline: 3px solid var(--lblauw);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); font-weight: 900; line-height: 1.03; }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.3rem); }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--oranje); color: #141a22; padding: .7rem 1.1rem;
  font-family: var(--display); font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- structuur ----------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.wrap--smal { max-width: 820px; }

.sec { padding-block: clamp(3rem, 6.5vw, 5.25rem); }
.sec--nacht { background: var(--nacht); color: #eef1f4; }
.sec--nacht h2, .sec--nacht h3 { color: #fff; }
.sec--wit { background: var(--wit); }
.sec--rand { border-top: 1px solid var(--lijn); }

.lood { max-width: 62ch; color: var(--tekst-zacht); font-size: 1.14rem; }
.sec--nacht .lood { color: #b9c4cf; }

/* de oranje wegmarkering: scheidingslijn en herhalend merkdetail */
.baan { height: 4px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--oranje) 0 32px, transparent 32px 64px); }

/* het L-bordje: signature-element */
.lbord {
  --s: 1.5rem;
  display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s);
  background: var(--lblauw); color: #fff;
  font-family: var(--display); font-weight: 900;
  font-size: calc(var(--s) * .66); line-height: 1;
  border-radius: calc(var(--s) * .13);
  padding-bottom: .04em;
}

.opschrift {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--mono); font-weight: 600;
  font-size: .715rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--oranje-diep); margin: 0 0 1.1rem;
}
.sec--nacht .opschrift { color: var(--oranje); }
.opschrift .lbord { --s: 1.15rem; }

/* --- knoppen ------------------------------------------------------------- */

.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.01em;
  padding: .85rem 1.35rem; border-radius: 7px;
  text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--vol { background: var(--oranje); color: #141a22; }
.btn--vol:hover { background: #ffa055; color: #141a22; }
.btn--nacht { background: var(--nacht); color: #fff; }
.btn--nacht:hover { background: var(--asfalt); color: #fff; }
.btn--rand { border-color: rgba(255,255,255,.34); color: #fff; }
.btn--rand:hover { border-color: #fff; color: #fff; }
.btn--randdonker { border-color: #c3c8c3; color: var(--tekst); }
.btn--randdonker:hover { border-color: var(--nacht); color: var(--tekst); }
.btn__nr { font-family: var(--mono); font-weight: 600; }

/* --- header -------------------------------------------------------------- */

.kop {
  position: sticky; top: 0; z-index: 50;
  background: var(--nacht); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.kop__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px;
}
.merk {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none; margin-right: auto;
}
.merk .lbord { --s: 2rem; }
.merk__naam { font-family: var(--display); line-height: 1.05; letter-spacing: -0.03em; }
.merk__klein { display: block; font-family: var(--mono); font-weight: 400;
  font-size: .6rem; letter-spacing: .17em; text-transform: uppercase; color: #93a1af; }
.merk__groot { display: block; font-size: 1.22rem; font-weight: 900; }

.nav { display: none; }
.nav ul { display: flex; flex-wrap: nowrap; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .5rem .58rem; border-radius: 5px;
  color: #cdd6de; text-decoration: none; white-space: nowrap;
  font-size: .94rem; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--oranje); }

.kop__bel { display: none; white-space: nowrap; }

.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 40px; padding: 0 10px;
  background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
  cursor: pointer;
}
.hamburger span { display: block; height: 2px; background: #fff; border-radius: 2px; }

.lade { display: none; border-top: 1px solid rgba(255,255,255,.12); }
.lade[data-open="true"] { display: block; }
.lade ul { list-style: none; margin: 0; padding: .5rem 0 1rem; }
.lade a {
  display: block; padding: .72rem .2rem; color: #dbe2e9; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lade a[aria-current="page"] { color: var(--oranje); }

@media (min-width: 1120px) {
  .nav { display: block; }
  .hamburger, .lade { display: none !important; }
  .kop__bel { display: inline-flex; }
}

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; background: var(--nacht); color: #eef1f4; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--oranje) 0 32px, transparent 32px 64px);
}
.hero__in { padding-block: clamp(2.6rem, 6vw, 4.75rem); }
.hero__grid { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.12fr .88fr; } }
.hero h1 { color: #fff; }
.hero .lood { color: #b9c4cf; margin-bottom: 1.6rem; }

.hero__fig { position: relative; margin: 0; }
.hero__fig img { display: block; width: 100%; border-radius: 12px; }
.hero__plate {
  position: absolute; left: -12px; bottom: -18px; --s: 4.6rem;
  transform: rotate(-7deg);
  box-shadow: 0 16px 34px rgba(0,0,0,.42);
}
.hero__cap {
  font-family: var(--mono); font-size: .74rem; color: #8fa0b0;
  margin: 1.55rem 0 0; padding-left: 4.4rem;
}

.feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(255,255,255,.13); border-radius: 9px; overflow: hidden;
}
.feit { background: var(--nacht); padding: 1rem 1.1rem; }
.feit__w { display: block; font-family: var(--display); font-weight: 900;
  font-size: 1.42rem; color: #fff; letter-spacing: -0.03em; line-height: 1.1; }
.feit__l { display: block; font-family: var(--mono); font-size: .69rem;
  letter-spacing: .1em; text-transform: uppercase; color: #8fa0b0; margin-top: .35rem; }

/* --- paginakop (subpagina's) --------------------------------------------- */

.pkop { position: relative; background: var(--nacht); color: #eef1f4; overflow: hidden; }
.pkop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--oranje) 0 32px, transparent 32px 64px);
}
.pkop__in { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.pkop h1 { color: #fff; margin-bottom: .5em; }
.pkop .lood { color: #b9c4cf; }

.kruimels { font-family: var(--mono); font-size: .74rem; margin: 0 0 1.4rem; color: #8fa0b0; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.kruimels a { color: #b9c4cf; }
.kruimels li + li::before { content: "/"; margin-right: .45rem; color: #5c6b7a; }

/* --- kaarten ------------------------------------------------------------- */

.raster { display: grid; gap: 1.1rem; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 1.35rem 1.4rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.kaart h3 { margin-bottom: .45em; }
.kaart p:last-child { margin-bottom: 0; }
.kaart--link:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(19,26,36,.11); }
.kaart__meer { font-family: var(--display); font-weight: 700; text-decoration: none; }
.sec--nacht .kaart { background: var(--nacht-2); border-color: rgba(255,255,255,.11); color: #c6d0da; }
.sec--wit .kaart { background: var(--krijt); }

.kaart--dienst { display: flex; flex-direction: column; gap: .5rem; }
.kaart--dienst .lbord { --s: 1.35rem; margin-bottom: .3rem; }

/* --- lijst met L-bordjes ------------------------------------------------- */

.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.lijst li { display: flex; gap: .7rem; align-items: flex-start; }
.lijst .lbord { --s: 1.18rem; margin-top: .28rem; }

/* --- stappen (echte volgorde, dus genummerd) ---------------------------- */

.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.sec--nacht .stappen { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.11); }
.stap { background: var(--wit); padding: 1.3rem 1.4rem 1.35rem; display: grid; gap: .35rem;
  grid-template-columns: auto 1fr; column-gap: 1.1rem; }
.sec--nacht .stap { background: var(--nacht-2); }
.sec--wit .stap { background: var(--wit); }
.stap__n {
  grid-row: 1 / span 2;
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  color: var(--oranje-diep); padding-top: .18rem;
}
.sec--nacht .stap__n { color: var(--oranje); }
.stap h3 { margin: 0; }
.stap p { margin: 0; color: var(--tekst-zacht); }
.sec--nacht .stap p { color: #aab6c2; }

/* --- tabellen ------------------------------------------------------------ */

.tabelbak { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); }
table.prijs { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.prijs caption {
  caption-side: top; text-align: left; padding: 1.05rem 1.2rem .3rem;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
}
table.prijs th, table.prijs td { padding: .72rem 1.2rem; text-align: left; border-top: 1px solid var(--lijn); }
table.prijs thead th {
  font-family: var(--mono); font-weight: 600; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-zacht);
}
table.prijs tbody th { font-weight: 500; font-family: var(--body); }
table.prijs .euro { font-family: var(--mono); font-weight: 600; text-align: right; white-space: nowrap; }
table.prijs tbody tr:hover { background: #fafbfa; }
table.prijs tfoot th, table.prijs tfoot td {
  font-family: var(--display); font-weight: 800; background: var(--krijt);
}
table.prijs tfoot .euro { font-family: var(--mono); font-weight: 700; }

/* --- geslaagden ---------------------------------------------------------- */

.ges { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ges figure { margin: 0; background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--r); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.ges img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--krijt); }
.ges figcaption { padding: .85rem .95rem 1rem; }
.ges b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.02rem; }
.ges span { display: block; font-size: .92rem; color: var(--tekst-zacht); margin-top: .25rem; }

.plaatsen { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.plaats { background: var(--wit); padding: 1rem 1.15rem 1.15rem; }
.plaats h3 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .4rem; font-size: 1.04rem; }
.plaats h3 span { font-family: var(--mono); font-weight: 600; font-size: .8rem; color: var(--oranje-diep); }
.plaats p { margin: 0; font-size: .93rem; color: var(--tekst-zacht); line-height: 1.55; }

/* --- vraag en antwoord --------------------------------------------------- */

.vragen { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn);
  border-radius: var(--r); overflow: hidden; }
.vraag { background: var(--wit); padding: 1.25rem 1.4rem; }
.vraag h2, .vraag h3 { margin: 0 0 .4em; font-size: clamp(1.08rem, 1.7vw, 1.24rem); }
.vraag p { margin: 0; }
.vraag p + p { margin-top: .6em; }
.sec--nacht .vragen { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.sec--nacht .vraag { background: var(--nacht-2); }
.sec--nacht .vraag p { color: #b6c2ce; }

/* --- citaat -------------------------------------------------------------- */

.citaat { margin: 0; background: var(--nacht-2); color: #e6ebf0; border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.1rem); border-left: 5px solid var(--oranje); }
.citaat blockquote { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.55; }
.citaat figcaption { margin-top: .9rem; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .04em; color: #9fadba; }
.sec--wit .citaat, .sec:not(.sec--nacht) .citaat { background: var(--nacht); color: #e6ebf0; }

/* --- twee kolommen met foto --------------------------------------------- */

.duo { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo--klein-rechts { }
@media (min-width: 860px) { .duo--klein-rechts { grid-template-columns: 1.25fr .75fr; } }
.duo figure { margin: 0; }
.duo figure img { display: block; width: 100%; border-radius: var(--r); }
/* kleine bronbestanden nooit opblazen: ze komen van de oude site */
.fig--smal { max-width: 340px; margin-inline: auto; }
.fig--portret { max-width: 380px; margin-inline: auto; }
.duo figcaption { font-family: var(--mono); font-size: .74rem; color: var(--tekst-zacht); margin-top: .6rem; }
.sec--nacht .duo figcaption { color: #8fa0b0; }

/* --- contact ------------------------------------------------------------- */

.nap { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.nap li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.nap .lbord { --s: 1.25rem; margin-top: .3rem; }
.nap b { display: block; font-family: var(--mono); font-size: .69rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-zacht); font-weight: 600; }
.sec--nacht .nap b { color: #8fa0b0; }
.nap a, .nap span { font-family: var(--display); font-weight: 700; font-size: 1.08rem; }

.kaartlink { display: inline-block; text-decoration: none; }
.kaartlink img { display: block; border-radius: var(--r); border: 1px solid var(--lijn); }
.kaartlink span { display: inline-flex; align-items: center; gap: .4rem; margin-top: .65rem;
  font-family: var(--display); font-weight: 700; }

/* --- slotband: Ruuds eigen afsluiting ----------------------------------- */

.slot { background: var(--asfalt); color: #fff; }
.slot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem;
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem); }
.slot__tekst { font-family: var(--display); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: -0.025em; margin: 0; margin-right: auto; }
.slot .lbord { --s: 2.6rem; }

/* --- footer -------------------------------------------------------------- */

.voet { background: var(--nacht); color: #a9b6c2; padding-block: clamp(2.4rem, 5vw, 3.4rem); font-size: .97rem; }
.voet__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
.voet h2 { font-size: .72rem; font-family: var(--mono); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #7d8b99; margin-bottom: .9rem; }
.voet a { color: #d3dbe2; text-decoration: none; }
.voet a:hover { color: var(--oranje); text-decoration: underline; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.voet address { font-style: normal; line-height: 1.75; }
.voet__naam { font-family: var(--display); font-weight: 900; color: #fff; font-size: 1.1rem;
  letter-spacing: -0.03em; display: block; margin-bottom: .5rem; }
.voet__onder { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .85rem; color: #7d8b99; }

/* --- mobiele actiebalk --------------------------------------------------- */

.actiebalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; background: var(--nacht); border-top: 1px solid rgba(255,255,255,.16);
}
.actiebalk a {
  flex: 1; padding: .9rem .4rem; text-align: center; text-decoration: none; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .97rem;
}
.actiebalk a + a { border-left: 1px solid rgba(255,255,255,.16); }
.actiebalk a:first-child { background: var(--oranje); color: #141a22; }
@media (min-width: 1000px) {
  .actiebalk { display: none; }
  body { padding-bottom: 0; }
}

/* --- kleine hulpjes ------------------------------------------------------ */

.mt { margin-top: clamp(1.6rem, 3.4vw, 2.6rem); }
.mt-klein { margin-top: 1.1rem; }
.klein { font-size: .9rem; color: var(--tekst-zacht); }
.sec--nacht .klein { color: #8fa0b0; }
.mono { font-family: var(--mono); }
.vzr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.middel { max-width: 68ch; }

/* --- beweging ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .op {
    opacity: 0;
    animation: op .55s cubic-bezier(.22,.7,.28,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes op {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .kaart--link:hover { transform: none; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .kop, .actiebalk, .slot, .hero__plate { display: none !important; }
  body { background: #fff; padding: 0; }
}