/* ═══════════════════════════════════════════════════════════════
   ABCRent.nl — huisstijl
   Donkerblauw als basis, oranje als accent. Zakelijk maar warm:
   je huurt hier gereedschap, geen kantoorsoftware.

   Eén breedte voor de hele site (--breed). Zet nergens een eigen
   max-width neer — dan verspringt dat onderdeel ten opzichte van
   de rest. Zelfde afspraak als op de andere Lotech-sites.
   ═══════════════════════════════════════════════════════════════ */

/* 🚨 `hidden` moet altijd winnen.
   De browser zet `[hidden]` op `display:none`, maar élke eigen display-regel
   (flex, grid, block) overschrijft dat weer — en dan staat er een leeg vak op
   het scherm van iets wat verborgen hoort te zijn. Dat is precies wat er
   gebeurde met de twee waarschuwingsvakken bij het rijbewijs. Deze ene regel
   dekt alles wat we met `hidden` verbergen: meldingen, de wizard-knoppen, de
   mobiele balk. */
[hidden]{display:none !important}

:root{
    --breed:1120px;
    --donker:#16283F;      /* koppen, header, footer */
    --donker-2:#0E1B2C;    /* nog een tint dieper */
    --accent:#F58220;      /* oranje — knoppen en accenten */
    --accent-d:#D96A0E;
    --tekst:#243447;
    --muted:#5B6B7C;       /* lopende tekst */
    --lijn:#DDE4EC;
    --vlak:#F4F7FA;        /* pagina-achtergrond */
    --vlak-2:#EAF0F6;
    --wit:#fff;
    --groen:#1B7A3D;
    --rood:#B42318;

    /* Eén tekstschaal. Gebruik deze — zet nergens een los getal neer. */
    --t-mini:11px;
    --t-klein:12px;
    --t-meta:12.5px;
    --t-basis:14.5px;
    --t-knop:14.5px;
    --t-lead:17px;
    --t-h3:19px;

    --rond:12px;
    --schaduw:0 2px 10px rgba(22,40,63,.07);
    --schaduw-op:0 10px 28px rgba(22,40,63,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--vlak);color:var(--tekst);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:var(--t-basis);line-height:1.7;-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;
}
img{max-width:100%}
a{color:var(--accent-d);text-decoration:none}
a:hover{text-decoration:underline}

/* Basiskleuren zonder dat je ze per pagina hoeft te zetten */
.site-main{flex:1 0 auto}
.site-main h1,.site-main h2,.site-main h3,.site-main h4{color:var(--donker);letter-spacing:-.4px;line-height:1.25}
.sectie p,.sectie li,.tekst p,.tekst li{color:var(--muted)}

/* ── Aankondigingsbalk ─────────────────────────────────────── */
.topbalk{background:var(--donker-2);color:#C9D6E4;text-align:center;
    font-size:var(--t-klein);letter-spacing:.3px;padding:7px 16px}
.topbalk span{display:inline-block}

/* ── Header ────────────────────────────────────────────────── */
.site-header{background:var(--donker);position:sticky;top:0;z-index:50;
    box-shadow:0 1px 0 rgba(255,255,255,.07)}
.kop-inner{max-width:var(--breed);margin:0 auto;padding:0 24px;
    display:flex;align-items:center;gap:22px;min-height:74px}

/* Het merk is échte tekst, geen plaatje: altijd scherp, ook op retina,
   en je kunt 'm zonder beeldbewerker aanpassen. */
/* ⚠️ `width:max-content` is hier de kern: zonder dat rekt de kolom mee met de
   ruimte in de balk, gaat de ondertitel dáárop uitvullen en wordt hij breder dan
   het woordmerk. Met max-content is de kolom precies zo breed als de breedste
   regel — het woordmerk dus — en vult de ondertitel netjes tot díe breedte. */
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex-shrink:0;
    width:max-content}
.logo:hover{text-decoration:none}
/* 🚨 De twee regels moeten even breed zijn: "ABC Rent" en "VERHUUR & VERKOOP"
   horen links én rechts gelijk te eindigen, anders steekt de onderregel eruit en
   staat het scheef. De onderregel is smaller gezet (kleinere letterafstand) en
   rekt zichzelf op tot de breedte van het woordmerk — zo blijft het kloppen, ook
   als de merknaam of de ondertitel ooit verandert. */
.logo .merk{font-size:32px;font-weight:800;color:#fff;letter-spacing:-1.2px;white-space:nowrap}
.logo .merk b{color:var(--accent);font-weight:800}
/* Ons logo als afbeelding, met doorzichtige achtergrond. De hoogte staat vast,
   de breedte volgt; de regel eronder rekt zich daar naartoe (zie hieronder). */
.logo-beeld{display:block;height:34px;width:auto}
/* ⚠️ Géén `white-space:nowrap` hier: dan kan de regel niet uitvullen en blijft
   hij links staan. Hij past sowieso op één regel. */
/* Zelfde letter als op het logo zelf: Bahnschrift SemiLight. Die staat op elke
   Windows-pc; heeft een bezoeker hem niet, dan valt hij terug op Inter en zie je
   alleen dat het iets smaller is. Vandaar geen webfont: één regel van tien
   pixels is een download niet waard. */
/* ⚠️ Géén `text-align-last:justify` hier. Dat rekte de regel op tot de breedte
   van het logo en duwde de woorden uit elkaar: "VERHUUR    EN    VERKOOP".
   Gewoon gecentreerd onder het logo, met normale spaties. */
.logo .onder{font-family:"Bahnschrift SemiLight","Bahnschrift Light",Bahnschrift,Inter,system-ui,sans-serif;
    font-weight:350;font-size:10px;color:#8DA2B8;letter-spacing:1.2px;text-transform:uppercase;
    margin-top:11px;width:100%;text-align:center}

/* Volle hoogte van de balk, zodat het uitklapmenu onder Verhuur straks precies
   op de onderrand van de balk hangt en niet halverwege over het blauw valt. */
.site-nav{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:4px}
.site-nav a{color:#C9D6E4;font-size:var(--t-knop);padding:9px 14px;border-radius:8px;
    text-decoration:none;transition:.15s;white-space:nowrap}
/* 🚨 Twee dingen, twee signalen, en die mogen nooit op elkaar lijken:
     muisover = een half doorzichtig oranje streepje onderaan
     actief   = hetzelfde streepje, maar vol oranje, met witte tekst
   🚨 GEEN achtergrondvlak achter de actieve pagina. Egaal, zacht of als verloop
   dat naar boven wegvalt: de linker- en rechterrand blijven altijd een harde
   rechthoek, en dan staat er een knop in de balk waar je niets mee kunt — je
   bént er al. Dat leest goedkoop. De streep onder de tekst wijst genoeg. */
.site-nav a:hover{color:#fff;background:transparent;text-decoration:none;
    box-shadow:inset 0 -2px 0 rgba(245,130,32,.55)}
.site-nav a.actief{color:#fff;background:transparent;box-shadow:inset 0 -2px 0 var(--accent)}

.nav-cart{display:flex;align-items:center;gap:8px;margin-left:8px;
    background:var(--accent) !important;color:#fff !important;font-weight:600;padding:9px 16px !important}
.nav-cart:hover{background:var(--accent-d) !important}
.nav-cart svg{width:18px;height:18px}
/* De reserveringsknop is geen winkelwagen: donkerblauw, zodat je op het eerste
   gezicht ziet dat het twee verschillende dingen zijn. */
.nav-res{background:var(--donker) !important;margin-left:8px}
.nav-res:hover{background:#0F1D2E !important}
.nav-res .cart-badge{color:var(--donker)}
.cart-badge{background:#fff;color:var(--accent-d);font-size:var(--t-mini);font-weight:700;
    min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;
    justify-content:center;padding:0 5px}

/* 🚨 Een lege winkelwagen is geen knop maar een plek waar je heen kunt: dezelfde
   rustige omlijning als Log in. Pas als er iets in ligt wordt hij oranje, en dan
   is die aandacht ook terecht. Zo blijft oranje voorbehouden aan wat er op dat
   moment te doen is — anders schreeuwt de wagen de hele dag om aandacht terwijl
   Verhuur de kern van de zaak is. */
.nav-cart.leeg{background:transparent !important;color:#C9D6E4 !important;
    border:0;padding:9px 14px !important;font-weight:400;margin-left:4px}
/* Zonder omlijning gedraagt hij zich als een gewoon menu-item: bij muisover
   alleen het streepje, net als Home en Verhuur. */
.nav-cart.leeg:hover{background:transparent !important;color:#fff !important;
    box-shadow:inset 0 -2px 0 rgba(245,130,32,.55)}

/* De uitklapper onder Verhuur. De link zelf blijft gewoon werken; dit is een
   snelkoppeling voor wie al weet wat hij zoekt. */
/* Even hoog als de balk: `top:100%` is dan de ónderrand van de balk, en niet de
   onderkant van het woord Verhuur — anders valt het paneel met zijn bovenste
   centimeters over het blauw heen. */
.nav-uit{position:relative;display:inline-flex;align-self:stretch;align-items:center}
.nav-uit > a{display:inline-flex;align-items:center;gap:6px}
.nav-uit .pijl{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;opacity:.55;transition:transform .15s}
.nav-uit:hover .pijl,.nav-uit:focus-within .pijl{transform:rotate(180deg)}
/* 🚨 Hetzelfde blauw als de balk, nooit wit. Een wit paneel dat onder een
   donkerblauwe balk uitklapt vloekt: het knalt harder in beeld dan het menu
   zelf, terwijl het maar een snelkoppeling is. Hij hangt vlak tegen de balk aan
   en is alleen onderaan afgerond, zodat hij eruit zakt in plaats van erop te
   liggen. Alles wat kleur of gewicht toevoegt gaat hier de verkeerde kant op. */
.nav-sub{position:absolute;top:100%;left:0;min-width:210px;background:var(--donker);
    border-radius:0 0 12px 12px;padding:6px;overflow:hidden;
    box-shadow:0 16px 30px rgba(0,0,0,.28);z-index:60;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .13s,transform .13s}
.nav-uit:hover .nav-sub,.nav-uit:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub a{display:block;padding:9px 14px;border-radius:7px;font-size:var(--t-klein);
    color:#C9D6E4;text-decoration:none;white-space:nowrap;transition:.13s}
.nav-sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-sub a:first-child{font-weight:600;border-bottom:1px solid rgba(255,255,255,.09);
    border-radius:7px 7px 0 0;margin-bottom:4px;padding-bottom:11px}

/* Log in / Mijn omgeving: geen gevulde knop maar een omlijnd item. De oranje
   winkelwagen is de knop waar je op moet drukken om te kopen; inloggen is iets
   wat je zoekt, niet iets wat we je aanpraten. */
/* 🚨 Geen omlijning: Log in en een lege winkelwagen zijn gewone menu-items met
   een icoontje ervoor, geen knoppen. Twee omlijnde vakjes naast de oranje
   winkelwagenknop maakten de balk onrustig, en dan strijden er drie dingen om
   dezelfde aandacht. De muisover komt van `.site-nav a:hover`, dus ze gedragen
   zich vanzelf net als Home en Verhuur. */
/* Zelfde afstand als tussen de andere menu-items (gap 4px), anders staat hij
   los en leest hij alsnog als een aparte knop. Actief-stijl komt van
   `.site-nav a.actief`: zacht vlak plus streepje, precies als Over ons. */
.nav-login{display:flex;align-items:center;gap:7px;margin-left:4px;padding:9px 14px !important}
.nav-login svg{width:17px;height:17px}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}

/* ── Meldingsbalken ────────────────────────────────────────── */
.site-uit-balk,.shop-dicht-balk{display:flex;align-items:center;justify-content:center;gap:12px;
    flex-wrap:wrap;padding:10px 20px;font-size:var(--t-meta)}
.site-uit-balk{background:#3B2A08;color:#F6D9A0}
.site-uit-balk a{color:#FFD9A0;text-decoration:underline}
.site-uit-balk .zacht{opacity:.75}
.shop-dicht-balk{background:#FDF3E3;color:#8A6A30;border-bottom:1px solid #EFD9B0}

/* ── Hero ──────────────────────────────────────────────────── */
/* De foto is de sfeer, niet de boodschap: er ligt een stevig donker
   verloop overheen zodat de tekst altijd leesbaar is — ook als de
   beheerder later zijn eigen foto uploadt. */
.hero{position:relative;background:var(--donker-2) center/cover no-repeat;
    color:#fff;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,rgba(14,27,44,.94) 0%,rgba(14,27,44,.86) 42%,rgba(14,27,44,.55) 100%)}
/* Schuine oranje streep rechtsonder — een klein merkgebaar */
.hero::after{content:'';position:absolute;right:-90px;bottom:-70px;width:320px;height:320px;
    background:var(--accent);opacity:.14;transform:rotate(28deg);border-radius:40px}
.hero-inner{position:relative;z-index:1;max-width:var(--breed);margin:0 auto;padding:78px 24px 84px}
.hero h1{color:#fff;font-size:clamp(30px,5vw,46px);font-weight:800;margin:0 0 14px;max-width:16em}
.hero .lead{color:#C9D6E4;font-size:var(--t-lead);max-width:34em;margin:0 0 28px}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.hero-pil{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);color:#DCE6F0;font-size:var(--t-klein);
    padding:5px 13px;border-radius:20px;margin-bottom:18px}
.hero-pil i{width:7px;height:7px;border-radius:50%;background:#4ADE80;display:inline-block}

/* ── USP-balk onder de hero ────────────────────────────────── */
.usp-balk{background:var(--wit);border-bottom:1px solid var(--lijn)}
.usp-inner{max-width:var(--breed);margin:0 auto;padding:20px 24px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.usp{display:flex;gap:12px;align-items:flex-start}
.usp .ico{flex:0 0 34px;height:34px;border-radius:9px;background:#FFF1E3;color:var(--accent-d);
    display:flex;align-items:center;justify-content:center;font-size:17px}
.usp b{display:block;font-size:var(--t-basis);color:var(--donker);font-weight:600;line-height:1.4}
.usp span{display:block;font-size:var(--t-meta);color:var(--muted);line-height:1.5}

/* ── Secties ───────────────────────────────────────────────── */
.sectie{max-width:var(--breed);margin:0 auto;padding:44px 24px}
.sectie.smal{max-width:760px}
.sectie.band{max-width:none;background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.sectie.band>*{max-width:var(--breed);margin-left:auto;margin-right:auto}
.pagina-kop{font-size:clamp(25px,3.6vw,34px);font-weight:800;margin:0 0 10px}
.pagina-intro{color:var(--muted);font-size:var(--t-lead);margin:0 0 26px;max-width:52em}
.sectie-kop{font-size:clamp(20px,2.6vw,27px);font-weight:700;margin:0 0 6px}
.sectie-onder{color:var(--muted);margin:0 0 24px}
.kruimel{font-size:var(--t-meta);color:var(--muted);margin:0 0 18px}
.kruimel a{color:var(--muted)}

/* ── Knoppen ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--donker);color:#fff;border:1.5px solid var(--donker);
    padding:10px 20px;border-radius:9px;font-family:inherit;font-size:var(--t-knop);
    font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;line-height:1.4}
.btn:hover{background:var(--donker-2);border-color:var(--donker-2);color:#fff;text-decoration:none}
.btn.accent{background:var(--accent);border-color:var(--accent)}
.btn.accent:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.licht{background:transparent;color:var(--donker);border-color:var(--lijn)}
.btn.licht:hover{background:var(--vlak-2);color:var(--donker);border-color:#C6D2E0}
.btn.wit{background:#fff;color:var(--donker);border-color:#fff}
.btn.wit:hover{background:#EAF0F6;color:var(--donker)}
.btn.groot{padding:13px 26px;font-size:15.5px}
.btn.klein{padding:6px 13px;font-size:var(--t-klein)}
.btn.vol{width:100%}
.btn[disabled],.btn.uit{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Meldingen ─────────────────────────────────────────────── */
.melding{padding:12px 16px;border-radius:10px;margin-bottom:20px;font-size:var(--t-basis)}
.melding.ok{background:#E7F6EC;color:var(--groen);border:1px solid #BCE3C9}
.melding.fout{background:#FDEAEA;color:var(--rood);border:1px solid #F3C2BE}
.melding.let{background:#FDF3E3;color:#8A6A30;border:1px solid #EFD9B0}
.dicht-melding{background:#FDF3E3;color:#8A6A30;border:1px solid #EFD9B0;
    padding:9px 13px;border-radius:9px;font-size:var(--t-meta);margin-top:10px}

/* ── Filterbalk in de catalogus ────────────────────────────── */
.shop-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex-wrap:wrap;margin:0 0 22px}
.cat-filter{display:flex;gap:7px;flex-wrap:wrap}
.cat-filter a{background:var(--wit);border:1px solid var(--lijn);color:var(--muted);
    padding:6px 14px;border-radius:20px;font-size:var(--t-klein);font-weight:500;text-decoration:none}
.cat-filter a:hover{border-color:var(--accent);color:var(--accent-d);text-decoration:none}
.cat-filter a.actief{background:var(--donker);border-color:var(--donker);color:#fff}
.sorteer{font-size:var(--t-meta);color:var(--muted);display:flex;align-items:center;gap:8px}
.sorteer select{padding:7px 10px;border:1px solid var(--lijn);border-radius:8px;
    font-family:inherit;font-size:var(--t-meta);background:#fff;color:var(--tekst)}

/* ── Productkaarten ────────────────────────────────────────── */
.shop-grid{display:grid;gap:18px;
    grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,248px),1fr))}
.p-card{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:12px;display:flex;flex-direction:column;transition:.18s}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op);border-color:#C6D2E0}
.p-klik{text-decoration:none;color:inherit;display:block}
.p-klik:hover{text-decoration:none}
/* Vaste 4:3-verhouding: houdt de namen en prijzen per kolom op één lijn,
   ook als het ene artikel een smalle boormachine is en het andere een aanhanger. */
/* 🚨 `contain`, niet `cover`: de hele foto moet in beeld staan. Met cover werd een
   staande of extra brede foto bijgesneden en zag de klant maar een deel van de
   aanhanger. Nu past hij altijd in het vak, met een strook achtergrond ernaast.
   De hero en de categoriekaarten op de home houden wél cover — dat zijn sfeer-
   beelden met tekst eroverheen, die moeten het vlak vullen. */
.p-foto{position:relative;aspect-ratio:4/3;border-radius:9px;background:var(--vlak-2) center/contain no-repeat;
    margin-bottom:11px;overflow:hidden}
.p-foto.leeg{display:flex;align-items:center;justify-content:center;color:#A8B6C6;font-size:var(--t-klein)}
.p-card h3{font-size:var(--t-basis);font-weight:600;margin:0 0 3px;color:var(--donker);line-height:1.35}
.p-onder{font-size:var(--t-klein);color:var(--muted);margin:0 0 8px;line-height:1.4}
.p-card .prijs{font-size:16px;font-weight:700;color:var(--donker);margin:2px 0 10px}
.p-card .prijs .per{font-size:var(--t-klein);font-weight:500;color:var(--muted)}
.p-card form,.p-card .btn{margin-top:auto}
.p-card.is-uit .p-foto{filter:grayscale(.7);opacity:.65}
.uit-label{font-size:var(--t-klein);color:var(--rood);font-weight:600;margin-bottom:7px}

/* Labelvlag op de foto */
.p-label{position:absolute;left:10px;top:10px;padding:4px 11px;border-radius:6px;
    font-size:var(--t-mini);font-weight:700;letter-spacing:.5px;text-transform:uppercase;z-index:2}

/* Prijs met actie */
.prijs.is-actie .oude-prijs{color:var(--muted);font-weight:500;font-size:var(--t-meta);
    position:relative;margin-right:5px}
.prijs.is-actie .oude-prijs::after{content:'';position:absolute;left:-2px;right:-2px;top:52%;
    height:1.5px;background:var(--muted);transform:rotate(-7deg)}
.prijs.is-actie .nieuwe-prijs{color:var(--rood)}

/* Huurprijs-blokje op de kaart */
.huur-pil{display:inline-flex;align-items:center;gap:6px;background:#FFF1E3;color:var(--accent-d);
    font-size:var(--t-mini);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    padding:3px 9px;border-radius:5px;margin-bottom:7px}
.koop-pil{background:#E7EFF8;color:#2B5C93}

/* ── Productdetail ─────────────────────────────────────────── */
/* Twee kolommen: links de foto met de kalender eronder, rechts de gegevens en
   de keuze. De kalender is het hoogste element; links onder de foto valt hij in
   de ruimte die daar toch al is, en houdt de knop rechts in beeld. */
.prod-detail{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:34px;align-items:start}
/* De hele linkerkolom: foto met de kalender eronder. Eén rasterkind, anders
   verspringt de rechterkolom een rij. */
.prod-detail-links{min-width:0}
.onder-foto{margin-top:18px}
/* De kalender krijgt hier een kader, zodat hij als één geheel met de foto leest. */
.onder-foto #kal-houder{background:var(--wit);border:1px solid var(--lijn);
    border-radius:var(--rond);padding:16px}
/* Iets platter dan vierkant: scheelt over zes rijen ruim 40 px hoogte terwijl de
   breedte — en dus het aanraakvlak op een telefoon — gelijk blijft. */
.onder-foto .kal-dag{aspect-ratio:7/6}
@media (max-width:860px){
    /* Onder elkaar: dan hoort de kalender bij de keuze, niet bij de foto. */
    .onder-foto{margin-top:22px}
}
/* Iets platter dan 4:3. De foto en de kalender delen de linkerkolom; elke pixel
   die de foto minder hoog is, is er één die de kalender wél in beeld houdt. */
.prod-detail-foto{position:relative;aspect-ratio:16/10;border-radius:var(--rond);
    background:var(--wit) center/contain no-repeat;border:1px solid var(--lijn)}
.prod-detail-foto.leeg{display:flex;align-items:center;justify-content:center;color:#A8B6C6}
.prod-detail-info h1{font-size:clamp(23px,3vw,31px);font-weight:800;margin:0 0 6px}
.detail-onder{color:var(--muted);font-size:var(--t-lead);margin:0 0 18px}
.detail-prijs{font-size:29px;font-weight:800;color:var(--donker);margin:0 0 2px}
.btw-los{font-size:var(--t-klein);color:var(--muted);margin:0 0 18px}
.detail-oms{color:var(--muted);margin:0 0 18px}
.voorraad{font-size:var(--t-meta);font-weight:600;margin:0 0 18px}
.voorraad.ja{color:var(--groen)}
.voorraad.nee{color:var(--rood)}

/* Huur- en koopblok naast/onder elkaar op de productpagina */
.keuze-blok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:20px;margin-bottom:18px}
.keuze-blok.huur{border-color:#F6D2AC;box-shadow:0 2px 12px rgba(245,130,32,.09)}
.keuze-blok h3{font-size:var(--t-h3);font-weight:700;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.keuze-blok .sub{font-size:var(--t-meta);color:var(--muted);margin:0 0 16px}
.tarief-rij{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.tarief{background:var(--vlak);border:1px solid var(--lijn);border-radius:9px;padding:9px 15px;min-width:112px}
.tarief span{display:block;font-size:var(--t-mini);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tarief b{display:block;font-size:17px;color:var(--donker);font-weight:700}
/* Het bedrag zonder btw eronder: wie zakelijk huurt rekent daarin, maar het is
   niet wat de klant afrekent — dus klein en tussen haakjes. */
.tarief i{display:block;font-size:var(--t-klein);color:var(--muted);font-style:normal;margin-top:1px}
.tarief.borg b{color:var(--accent-d)}

/* Aantalkiezer −/+ */
.aantal{display:inline-flex;align-items:center;border:1px solid var(--lijn);border-radius:9px;
    overflow:hidden;background:#fff}
.aantal button{background:var(--vlak);border:0;width:38px;height:42px;font-size:19px;
    cursor:pointer;color:var(--donker);font-family:inherit}
.aantal button:hover{background:var(--vlak-2)}
.aantal input,.aantal span{width:52px;height:42px;border:0;text-align:center;font-family:inherit;
    font-size:var(--t-basis);font-weight:600;color:var(--donker);
    display:flex;align-items:center;justify-content:center}
.aantal input{-moz-appearance:textfield}
.aantal input::-webkit-outer-spin-button,.aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.koop-rij{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 8px}

/* ── Beschikbaarheidskalender ──────────────────────────────── */
.kal{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:14px 14px 12px}
.kal-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kal-kop strong{font-size:var(--t-basis);color:var(--donker);text-transform:capitalize;font-weight:700}
.kal-pijl{width:32px;height:32px;border-radius:8px;border:1px solid var(--lijn);background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--donker);
    text-decoration:none;cursor:pointer;line-height:1}
.kal-pijl:hover{background:var(--vlak-2);text-decoration:none}
.kal-pijl.uit{opacity:.28;pointer-events:none}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kal-dagnaam{text-align:center;font-size:var(--t-mini);color:var(--muted);
    text-transform:uppercase;letter-spacing:.6px;padding-bottom:5px;font-weight:600}
.kal-dag{position:relative;aspect-ratio:1/1;border-radius:8px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:var(--t-meta);border:1px solid transparent;
    background:var(--vlak);color:var(--tekst);user-select:none}
.kal-dag.leeg{background:none}
.kal-nr{font-weight:600;line-height:1}
.kal-vrij{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1}

.kal-dag.vrij{background:#E9F7EF;color:#14532D;border-color:#C6E9D5;cursor:pointer}
.kal-dag.vrij:hover{background:#D3F0E0;border-color:var(--groen)}
.kal-dag.vrij.bijna{background:#FFF4E3;color:#8A5A12;border-color:#F3DCB8}
.kal-dag.vrij.bijna:hover{background:#FCE9CD}
.kal-dag.vol{background:#FDEAEA;color:#9B2C22;border-color:#F5CFCB;cursor:not-allowed}
.kal-dag.dicht{background:var(--vlak-2);color:#9FAEBE;cursor:not-allowed}
.kal-dag.verleden{background:transparent;color:#C2CDD9;cursor:not-allowed}
.kal-dag.tussen{background:#FFE7CE;color:#8A4A08;border-color:#F6CFA4}
.kal-dag.start,.kal-dag.eind{background:var(--accent);color:#fff;border-color:var(--accent-d);font-weight:700}
.kal-dag.start .kal-vrij,.kal-dag.eind .kal-vrij{color:rgba(255,255,255,.85)}

.kal-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
    border-top:1px solid var(--lijn);font-size:var(--t-mini);color:var(--muted)}
.kal-legenda i.bol{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;
    vertical-align:-1px;border:1px solid rgba(0,0,0,.08)}
.kal-legenda i.vrij{background:#C6E9D5}
.kal-legenda i.bijna{background:#F3DCB8}
.kal-legenda i.vol{background:#F5CFCB}
.kal-legenda i.dicht{background:var(--vlak-2)}

/* Gekozen periode + tijden */
.periode-vak{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;
    padding:14px;margin:14px 0}
.periode-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.periode-rij .veld label{display:block;font-size:var(--t-mini);color:var(--muted);
    text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}
.periode-rij .veld .datum{font-size:var(--t-basis);font-weight:600;color:var(--donker)}
.periode-rij .veld .datum.leeg{color:#A8B6C6;font-weight:500}
.periode-rij select{width:100%;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;
    font-family:inherit;font-size:var(--t-basis);background:#fff;color:var(--tekst);margin-top:6px}
/* Terugbrengen is een deadline, geen keuze: zelfde plek en hoogte als de
   keuzelijst ernaast, maar zonder pijltje — dan is meteen duidelijk dat er niets
   te kiezen valt. */
.periode-rij .vaste-tijd{width:100%;padding:8px 10px;border:1px dashed var(--lijn);
    border-radius:8px;font-size:var(--t-basis);background:var(--vlak);color:var(--donker);
    font-weight:600;margin-top:6px;box-sizing:border-box}
.periode-rij .vaste-tijd.leeg{color:#A8B6C6;font-weight:400}
.periode-tel{display:flex;justify-content:space-between;align-items:baseline;
    margin-top:12px;padding-top:11px;border-top:1px dashed var(--lijn)}
.periode-tel span{font-size:var(--t-meta);color:var(--muted)}
.periode-tel b{font-size:19px;color:var(--donker);font-weight:800}
.periode-hint{font-size:var(--t-klein);color:var(--muted);margin:8px 0 0}
.kal-fout{background:#FDEAEA;color:var(--rood);border:1px solid #F3C2BE;
    padding:9px 12px;border-radius:8px;font-size:var(--t-meta);margin-top:12px}

/* ── Informatietabel bij een product ───────────────────────── */
.prod-info{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:24px;margin-top:40px}
.prod-info h2{font-size:var(--t-h3);margin:0 0 16px}
.prod-info dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:0;margin:0}
.prod-info dt{font-weight:600;color:var(--donker);font-size:var(--t-meta);
    padding:9px 14px 9px 0;border-bottom:1px solid var(--vlak-2)}
.prod-info dd{margin:0;color:var(--muted);font-size:var(--t-meta);
    padding:9px 0;border-bottom:1px solid var(--vlak-2)}
.info-voet{font-size:var(--t-klein);color:var(--muted);margin:16px 0 0}

/* ── Formulieren ───────────────────────────────────────────── */
.form-veld{margin-bottom:15px}
.form-veld label{display:block;font-size:var(--t-meta);font-weight:600;color:var(--donker);margin-bottom:5px}
.veld-hint{font-size:var(--t-klein);color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=password],input[type=time],textarea,select{
    width:100%;padding:11px 13px;border:1px solid var(--lijn);border-radius:9px;
    font-family:inherit;font-size:var(--t-basis);background:#fff;color:var(--tekst)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(245,130,32,.14)}
textarea{min-height:110px;resize:vertical}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vink{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-meta);color:var(--muted);
    line-height:1.55;cursor:pointer}
.vink input{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--accent)}

/* ── Winkelwagen ───────────────────────────────────────────── */
.cart-tabel{width:100%;border-collapse:collapse;background:var(--wit);
    border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden}
.cart-tabel th,.cart-tabel td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--vlak-2);
    font-size:var(--t-basis);vertical-align:top}
.cart-tabel th{background:var(--vlak);font-size:var(--t-mini);text-transform:uppercase;
    letter-spacing:.5px;color:var(--muted);font-weight:600}
.cart-tabel td.rechts,.cart-tabel th.rechts{text-align:right;white-space:nowrap}
.cart-tabel tr:last-child td{border-bottom:0}
.cart-naam{font-weight:600;color:var(--donker)}
.cart-periode{font-size:var(--t-klein);color:var(--accent-d);margin-top:3px}
.cart-borg{font-size:var(--t-klein);color:var(--muted);margin-top:2px}
.cart-tabel input[type=number]{width:74px;padding:7px 9px}
.cart-tot td{background:var(--vlak);font-weight:600;color:var(--donker)}
.cart-tot.groot td{font-size:17px;font-weight:800}
.gratis-pill{background:#E7F6EC;color:var(--groen);font-size:var(--t-klein);
    font-weight:600;padding:2px 9px;border-radius:11px}
.verzend-hint{font-size:var(--t-klein);color:var(--muted);font-style:italic}
.weg-knop{background:none;border:0;color:var(--muted);cursor:pointer;font-size:17px;
    padding:2px 6px;line-height:1;font-family:inherit}
.weg-knop:hover{color:var(--rood)}

/* Borgblok: de borg staat bewust apart van het te betalen bedrag */
.borg-vak{background:#FFF7EF;border:1px solid #F6D2AC;border-radius:10px;
    padding:14px 16px;margin:18px 0;font-size:var(--t-meta);color:#8A5A12}
.borg-vak b{color:var(--accent-d)}
.borg-vak .bedrag{float:right;font-size:17px;font-weight:800;color:var(--accent-d)}

/* Het stappenplan boven de reservering. Vier stappen, de huidige gemarkeerd —
   zodat een klant weet wat er nog komt en niet halverwege denkt dat hij klaar is.
   Nummers in een rondje, want een rij woorden leest niet als een volgorde. */
.stappen{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0 0 26px;padding:0}
.stappen li{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:132px;
    background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;
    padding:9px 13px;font-size:var(--t-meta);color:var(--muted);font-weight:600}
.stappen li b{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:22px;height:22px;border-radius:11px;background:var(--wit);border:1px solid var(--lijn);
    font-size:var(--t-mini);color:var(--muted)}
.stappen li.nu{background:#FFF3E7;border-color:var(--accent);color:var(--accent-d)}
.stappen li.nu b{background:var(--accent);border-color:var(--accent);color:#fff}
/* Al gedaan: een vinkje in plaats van een cijfer, rustig groen. */
.stappen li.klaar{color:var(--donker)}
.stappen li.klaar b{background:var(--groen,#1B7A3D);border-color:var(--groen,#1B7A3D);color:#fff}

/* ── Vaste balk op de telefoon ────────────────────────────────
   Alleen op een klein scherm: daar staat de kalender bovenaan en de knop een
   halve pagina lager. Op desktop staat alles al in beeld en zou dit een balk
   zijn die nergens over gaat. */
.mob-balk{display:none}
@media (max-width:700px){
    .mob-balk:not([hidden]){display:flex;align-items:center;gap:12px;
        position:fixed;left:0;right:0;bottom:0;z-index:60;
        background:var(--wit);border-top:1px solid var(--lijn);
        box-shadow:0 -6px 20px rgba(22,40,63,.10);
        padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
    .mob-balk .mob-info{flex:1;min-width:0;line-height:1.35}
    .mob-balk .mob-info span{display:block;font-size:var(--t-mini);color:var(--muted);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mob-balk .mob-info b{font-size:17px;color:var(--donker)}
    .mob-balk .btn{flex-shrink:0;padding:12px 18px}
    /* Ruimte onder de pagina, anders valt de laatste regel achter de balk. */
    body:has(.mob-balk:not([hidden])){padding-bottom:78px}
    /* De legenda kan weg: die kleuren kun je toch niet aanklikken, en drie
       regels uitleg zijn op een telefoon net de ruimte die je mist. */
    .kal-legenda{display:none}
}

/* Elke stap in een eigen kaart met een kopbalk: dan zie je waar een onderdeel
   begint en ophoudt, in plaats van één lange sliert velden onder elkaar. De
   kopbalk is licht getint met een accentlijn eronder — een dichte balk in de
   accentkleur wordt te zwaar als er vier onder elkaar staan. */
.stap-blok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    margin-bottom:18px;overflow:hidden;box-shadow:0 2px 10px rgba(22,40,63,.05)}
.stap-blok > .blok-kop{display:flex;align-items:center;gap:11px;margin:0;
    background:#FFF6EE;border-bottom:2px solid var(--accent);
    padding:14px 22px;font-size:13.5px;font-weight:800;color:var(--donker);
    text-transform:uppercase;letter-spacing:.7px}
.stap-blok > .blok-kop svg{width:19px;height:19px;flex-shrink:0;color:var(--accent-d)}
.stap-blok > .blok-in{padding:20px 22px 22px}
.stap-blok > .blok-in > .sectie-onder{margin:-4px 0 18px}
.stap-blok > .blok-in > :last-child{margin-bottom:0}
.stap-blok .cart-tabel{margin-top:0}
@media (max-width:640px){
    .stap-blok > .blok-kop{padding:12px 16px;font-size:12.5px}
    .stap-blok > .blok-in{padding:16px}
}

/* ── Wizard ───────────────────────────────────────────────────
   Panelen zijn dezelfde kaarten als hierboven; ze verschillen alleen in wat er
   zichtbaar is. Zolang `wiz-aan` er niet op staat (geen JavaScript) staat alles
   gewoon onder elkaar. */
.wiz-paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    margin-bottom:18px;overflow:hidden;box-shadow:0 2px 10px rgba(22,40,63,.05)}
.wiz-paneel > .blok-kop{display:flex;align-items:center;gap:11px;margin:0;
    background:#FFF6EE;border-bottom:2px solid var(--accent);
    padding:14px 22px;font-size:13.5px;font-weight:800;color:var(--donker);
    text-transform:uppercase;letter-spacing:.7px}
.wiz-paneel > .blok-kop svg{width:19px;height:19px;flex-shrink:0;color:var(--accent-d)}
.wiz-paneel > .blok-in{padding:20px 22px 22px}
.wiz-paneel > .blok-in > .sectie-onder{margin:-4px 0 18px}
.wiz-paneel > .blok-in > :last-child{margin-bottom:0}
.wiz-aan .wiz-paneel{display:none;margin-bottom:0}
.wiz-aan .wiz-paneel.actief{display:block;animation:wizIn .18s ease-out}
@keyframes wizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* De tijdlijn: bolletjes met een lijn ertussen, de huidige oranje, wat je gehad
   hebt groen en aanklikbaar om terug te gaan. */
.tijdlijn{display:none;list-style:none;margin:0 0 22px;padding:0}
.wiz-aan .tijdlijn{display:flex}
/* Dezelfde balk buiten de wizard (op de huurovereenkomst), waar niets te klikken
   valt: daar staat hij vast en zijn de eerdere stappen dus geen knop. */
.tijdlijn.vast{display:flex}
.tijdlijn.vast li.klaar{cursor:default}
.tijdlijn li{flex:1;position:relative;text-align:center;padding-top:34px;
    font-size:var(--t-mini);color:var(--muted);line-height:1.3}
.tijdlijn li b{position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:26px;border-radius:13px;background:var(--wit);
    border:2px solid var(--lijn);color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:12px;z-index:1}
/* De verbindingslijn loopt tussen de bolletjes door. */
.tijdlijn li::before{content:'';position:absolute;top:13px;left:-50%;width:100%;
    height:2px;background:var(--lijn)}
.tijdlijn li:first-child::before{display:none}
.tijdlijn li.nu{color:var(--accent-d);font-weight:700}
.tijdlijn li.nu b{border-color:var(--accent);background:var(--accent);color:#fff}
.tijdlijn li.klaar{color:var(--donker);cursor:pointer}
.tijdlijn li.klaar b{border-color:var(--groen,#1B7A3D);background:var(--groen,#1B7A3D);color:#fff}
.tijdlijn li.klaar::before,.tijdlijn li.nu::before{background:var(--groen,#1B7A3D)}
/* Wat er ná deze pagina nog komt: wel zichtbaar, duidelijk nog niet aan de beurt. */
.tijdlijn li.later{color:#B7C2CE}
.tijdlijn li.later b{border-style:dashed;color:#B7C2CE}
@media (max-width:640px){
    /* Op een telefoon alleen de bolletjes — zeven woorden naast elkaar wordt brij. */
    .tijdlijn li span{display:none}
    .tijdlijn li{padding-top:30px}
}

/* Terug / Verder, met de teller ertussen. */
.wiz-nav{display:flex;align-items:center;gap:12px;margin:4px 0 30px}
.wiz-nav .wiz-tel{flex:1;text-align:center;font-size:var(--t-mini);color:var(--muted)}
.wiz-nav .btn{min-width:120px;justify-content:center}
@media (max-width:640px){ .wiz-nav .btn{min-width:0;flex:1} }

/* Het stapnummer vóór een sectiekop. */
.stap-nr{display:inline-block;margin-right:10px;padding:3px 9px;border-radius:999px;
    background:var(--accent);color:#fff;font-size:var(--t-mini);font-weight:800;
    vertical-align:middle;letter-spacing:.3px}

/* Waarom de tijdenlijst loopt zoals hij loopt. Zonder deze regel lijkt een korte
   zaterdaglijst een fout in de site. */
.tijd-hint{margin:6px 0 0;font-size:var(--t-mini);color:var(--muted);line-height:1.5}

/* Papieren in het bestelformulier. Eigen omlijsting: dit is het enige stuk waar
   iemand iets van een document overtypt, en dan helpt het als het opvalt dat het
   bij elkaar hoort. */
.doc-vak{border:1px solid var(--lijn);border-radius:12px;padding:16px 18px;
    margin:4px 0 18px;background:var(--vlak)}
.doc-vak > b{display:block;font-size:15px;color:var(--donker)}
.doc-vak .form-rij{grid-template-columns:1fr 1.2fr 1fr}
.doc-vak input:disabled{background:var(--vlak-2);color:var(--muted)}
/* De categorieën als pillen: aanvinken met de vinger moet ook op een telefoon
   lukken, en een rijtje losse hokjes leest niet. */
.doc-cats{display:flex;flex-wrap:wrap;gap:8px}
.doc-cat{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--lijn);
    background:var(--wit);border-radius:999px;padding:7px 13px;cursor:pointer;
    font-size:var(--t-meta);font-weight:600}
.doc-cat input{width:auto;margin:0}
.doc-cat:has(input:checked){border-color:var(--accent);background:#FFF3E7;color:var(--accent-d)}
/* Een vraag, geen blokkade: rustig geel vlak. Alleen de aanhef springt eruit —
   rood om je erbij te halen, oranje voor wat je moet doen. */
/* Teruggave van de waarborgsom: eigen kadertje binnen de gegevens, want het gaat
   over ná de huur en niet over de reservering zelf. Bewust géén bedrag hier —
   dat staat in het overzicht. */
.teruggaaf{background:var(--vlak);border:1px solid var(--lijn);border-radius:11px;
    padding:14px 16px;margin:4px 0 0}
.teruggaaf > b{display:block;font-size:14px;color:var(--donker)}
.teruggaaf > .veld-hint{margin:2px 0 12px}
.teruggaaf-let{margin:10px 0 0;font-size:var(--t-mini);color:#8A6A30;line-height:1.6}
.teruggaaf-let b{color:var(--accent-d)}

/* De opbouw van de waarborgsom: welk artikel welk bedrag. Alleen zichtbaar als er
   meer dan één regel is — anders herhaal je het totaal. */
.borg-opbouw{list-style:none;margin:0 0 16px;padding:12px 14px;background:var(--vlak);
    border-radius:10px;font-size:var(--t-meta)}
.borg-opbouw li{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
.borg-opbouw li i{font-style:normal;color:var(--muted)}
.borg-opbouw li.tot{margin-top:5px;padding-top:7px;border-top:1px solid var(--lijn);font-weight:700}
.borg-opbouw li.tot b{color:var(--donker)}

/* De waarschuwing over de rijbewijscategorie is een gewone alinea, geen kaart met
   icoontjes: hij staat vlak onder de vinkjes waar hij over gaat. */
.eis-let:not([hidden]){display:block;border-left-color:#C33025;background:#FEF6F5;
    border-color:#F0CFCB}
.eis-let .let-kop{color:#C33025;font-size:14px;margin-bottom:4px}
.eis-terug{display:inline-flex;margin-top:12px}

/* "Uitsluitend de huurder mag rijden": staat op het scherm én op de overeenkomst,
   in dezelfde vorm. Een kader eromheen, zodat het niet wegvalt tussen de rest. */
.bestuurder-regel{border:1.5px solid var(--donker);border-radius:9px;padding:11px 14px;
    margin:0 0 16px;font-size:var(--t-meta);color:var(--tekst);line-height:1.6}
.bestuurder-regel b{color:var(--donker)}
@media print{
    .bestuurder-regel{border:1.5px solid #000;background:#fff;
        page-break-inside:avoid;break-inside:avoid}
}
.eis-let .let-kop{display:block;color:var(--accent-d);font-weight:800;letter-spacing:.4px;
    margin-bottom:2px}

/* Vergeet je een categorie aan te vinken, dan krijgt de héle rij een rode rand.
   Het ballonnetje van de browser hangt nu eenmaal aan het eerste vakje; zo zie
   je meteen dat het over de groep gaat en niet over dat ene hokje. Alleen als
   aanwijzing bij het doorklikken, niet als vaste opmaak. */
.doc-cats.fout .doc-cat{border-color:#C33025;background:#FEF4F3}

/* ── Waarschuwing bij een verlopen document ───────────────────
   Kaart met een oranje balk links, een rond waarschuwingsicoon, en daarnaast de
   punten onder elkaar met elk een eigen icoontje. Compact gehouden: dit staat
   midden in een formulier, niet op een campagnepagina. */
.doc-let{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;
    background:var(--wit);border:1px solid #F0DEC2;border-left:3px solid var(--accent);
    border-radius:10px;padding:8px 12px;font-size:var(--t-klein);color:#4C5A69;
    line-height:1.4;box-shadow:0 1px 6px rgba(245,130,32,.06)}
.doc-let b{color:var(--donker);font-weight:700}

/* Het ronde icoon links. Verdwijnt op een smal scherm: daar telt elke pixel. */
.doc-let .dl-waarschuw{flex-shrink:0;width:26px;height:26px;border-radius:13px;
    background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
    margin-top:1px}
.doc-let .dl-waarschuw svg{width:15px;height:15px}
.doc-let .dl-body{flex:1;min-width:0}

/* Aanhef op één regel: "LET OP!" oranje, de rest donker. Twee losse regels met
   een streep eronder maakten de kaart onnodig hoog. */
.doc-let .dl-kop{font-size:13px;font-weight:800;color:var(--donker);margin:0 0 4px;
    letter-spacing:.2px}
.doc-let .dl-kop span{color:var(--accent-d);letter-spacing:.4px;margin-right:3px}

.doc-let .dl-lijst{list-style:none;margin:0;padding:0}
.doc-let .dl-lijst li{display:flex;align-items:flex-start;gap:7px;padding:1px 0}
.doc-let .dl-lijst svg{flex-shrink:0;width:12px;height:12px;margin-top:2px;
    color:var(--accent);stroke-width:2.2}

/* De enige regel die om actie vraagt: eigen vlak, zodat hij niet meeloopt met
   de opsomming erboven. */
.doc-let .dl-balk{display:flex;align-items:center;gap:7px;margin-top:6px;
    background:#FFF6EC;border-radius:7px;padding:5px 9px}
.doc-let .dl-balk svg{flex-shrink:0;width:14px;height:14px;color:var(--accent-d)}
.doc-let .dl-balk b{font-size:12.5px}

@media (max-width:560px){
    .doc-let{gap:10px;padding:12px}
    .doc-let .dl-waarschuw{display:none}
    .doc-let .dl-kop{font-size:17px}
}

/* ── Bedankt / betalen ─────────────────────────────────────── */
.bestel-vak{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:22px;margin:24px 0}
.bestel-rij{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--vlak-2)}
.bestel-rij:last-of-type{border-bottom:0}
.bestel-rij span{color:var(--muted);font-size:var(--t-meta)}
.bestel-rij b{color:var(--donker)}
/* Het reserveringsnummer: dít is wat de klant moet onthouden, dus groot. */
.bestel-rij.groot b{font-size:22px;font-weight:800;color:var(--accent-d);letter-spacing:.5px}
.bestel-regels{background:var(--vlak);border-radius:9px;padding:14px;font-size:var(--t-meta);
    color:var(--muted);white-space:pre-wrap;font-family:inherit;margin:14px 0 0;line-height:1.75}
.betaal-blok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:24px;margin-bottom:18px;text-align:center}
.betaal-blok h3{font-size:var(--t-h3);margin:0 0 6px}
.betaal-blok p{color:var(--muted);margin:0 0 18px}
.qr-vak{width:220px;max-width:100%;margin:0 auto 18px;background:#fff;padding:10px;
    border:1px solid var(--lijn);border-radius:10px}
.betaal-gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px;text-align:left;margin-top:8px}
.betaal-gegevens>div{background:var(--vlak);border-radius:9px;padding:10px 13px}
.betaal-gegevens span{display:block;font-size:var(--t-mini);color:var(--muted);
    text-transform:uppercase;letter-spacing:.5px}
.betaal-gegevens b{color:var(--donker);font-size:var(--t-meta);word-break:break-all}
.qr-hint{font-size:var(--t-klein);color:var(--muted);margin:16px 0 0}
.betaal-vooraf{background:var(--vlak);border-radius:9px;padding:11px 14px;
    font-size:var(--t-meta);color:var(--muted);margin:0 0 16px}
/* Met een kopje erboven leest het als een blokje uitleg in plaats van als één
   lange zin; de alinea's eronder houden dezelfde grootte en kleur. */
.betaal-vooraf .bv-kop{display:block;color:var(--donker);font-size:var(--t-basis);margin-bottom:6px}
.betaal-vooraf p{margin:0 0 8px}
.betaal-vooraf p:last-child{margin-bottom:0}

/* ── Stappen (1-2-3) ───────────────────────────────────────── */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:8px}
.stap{position:relative;padding-left:52px}
.stap .nr{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:10px;
    background:var(--donker);color:#fff;font-weight:800;font-size:16px;
    display:flex;align-items:center;justify-content:center}
.stap b{display:block;color:var(--donker);font-size:var(--t-basis);font-weight:700;margin-bottom:3px}
.stap p{margin:0;font-size:var(--t-meta);color:var(--muted)}

/* ── Categoriekaarten op de home ───────────────────────────── */
.cat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cat-kaart{position:relative;border-radius:var(--rond);overflow:hidden;min-height:150px;
    display:flex;align-items:flex-end;text-decoration:none;
    background:var(--donker) center/cover no-repeat;border:1px solid var(--lijn)}
.cat-kaart::before{content:'';position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(14,27,44,.88) 0%,rgba(14,27,44,.25) 60%,rgba(14,27,44,.1) 100%)}
.cat-kaart:hover{text-decoration:none}
.cat-kaart:hover::before{background:linear-gradient(0deg,rgba(217,106,14,.9) 0%,rgba(14,27,44,.3) 65%,rgba(14,27,44,.1) 100%)}
.cat-kaart .inhoud{position:relative;z-index:1;padding:16px 18px;color:#fff}
.cat-kaart b{display:block;font-size:var(--t-lead);font-weight:700}
.cat-kaart span{display:block;font-size:var(--t-klein);color:rgba(255,255,255,.82);margin-top:2px}

/* ── Huurcontract ──────────────────────────────────────────── */
.contract{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
    padding:30px;margin-bottom:22px}
/* Het bladnummer rechtsonder ("Huurovereenkomst 1/2"). Op het scherm alleen bij
   de vellen die er ook op staan; bij het printen krijgt hij zijn plek onderaan
   de pagina (zie de print-CSS in huurcontract.php). */
.vel-voet{text-align:right;font-size:var(--t-mini);color:var(--muted);margin-top:16px}
/* Onze bedrijfsgegevens staan alleen op papier in die regel; op het scherm
   staan ze al in de voettekst van de site. */
.vel-voet .gegevens{display:none}
.contract-kop{display:flex;justify-content:space-between;align-items:flex-start;
    gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--donker)}
.contract-kop h1{font-size:23px;margin:0 0 3px}
.contract-kop .nr{font-size:var(--t-meta);color:var(--muted)}
/* Twee keer zo groot als eerst (22px): op papier stond het merk er zo klein
   rechtsboven dat het eerder een voetnoot leek dan een afzender. */
.contract-kop .merk{font-size:44px;font-weight:800;color:var(--donker);letter-spacing:-1.6px;
    line-height:1;white-space:nowrap}
.contract-kop > div:last-child{flex-shrink:0}
/* 🚨 Op de documenten staat óns logo als afbeelding, niet de HTML-tekst.
   `logoabc-doc.png` is de bijgesneden versie: het origineel heeft een brede
   witrand, en daardoor lijkt het logo een stuk kleiner dan de ruimte die het
   inneemt. De hoogte staat vast, de breedte volgt vanzelf.
   In de balk bovenaan de site blijft de HTML-tekst staan: het logo heeft een
   witte achtergrond en dat wordt een wit blok op het donkerblauw. */
/* Op papier het logo mét "verhuur en verkoop" eronder (`logoabc-print.png`).
   Dat is anderhalf keer zo hoog als het woordmerk alleen, dus de hoogte staat
   hier op 62px: het woordmerk zelf blijft dan even groot als eerst. */
.doc-logo{display:block;height:62px;width:auto;margin-left:auto}
.contract-kop .merk b{color:var(--accent)}
.contract-partijen{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:20px 0;
    border-bottom:1px solid var(--vlak-2)}
.contract-lbl{font-size:var(--t-mini);font-weight:700;text-transform:uppercase;
    letter-spacing:.8px;color:var(--accent-d);margin-bottom:6px}
.contract-partijen .naam{font-weight:700;color:var(--donker);margin-bottom:2px}
.contract-partijen .regel{font-size:var(--t-meta);color:var(--muted);line-height:1.7}
.contract table.regels{width:100%;border-collapse:collapse;margin:18px 0}
.contract table.regels th{background:var(--vlak);font-size:var(--t-mini);text-transform:uppercase;
    letter-spacing:.5px;color:var(--muted);text-align:left;padding:9px 11px;border-bottom:2px solid var(--lijn)}
.contract table.regels td{padding:11px;border-bottom:1px solid var(--vlak-2);font-size:var(--t-meta)}
.contract table.regels td.r,.contract table.regels th.r{text-align:right;white-space:nowrap}
.contract-totalen{display:flex;justify-content:flex-end;margin-bottom:6px}
.contract-totalen .vak{min-width:270px}
.contract-totalen .row{display:flex;justify-content:space-between;padding:5px 0;
    font-size:var(--t-meta);color:var(--muted)}
.contract-totalen .row.groot{font-size:16px;font-weight:800;color:var(--donker);
    border-top:2px solid var(--donker);margin-top:6px;padding-top:9px}
.contract-totalen .row.borg{color:var(--accent-d);font-weight:700}

/* "Voertuig wordt toegewezen bij het ophalen" — rustig geel, direct onder wat er
   gehuurd is. Print gewoon mee: op het vel dat de klant meeneemt hoort dezelfde
   uitleg te staan als op het scherm. */
.toewijzing-let{background:#FFF6E8;border:1px solid #F3DAB0;border-left:4px solid #E9A23B;
    border-radius:10px;padding:12px 16px;margin:10px 0 4px;
    font-size:var(--t-meta);color:#7A4A00;line-height:1.6}
.toewijzing-let b{display:block;color:#5E3800;margin-bottom:2px}

.voorwaarden-vak{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;
    padding:18px 20px;max-height:330px;overflow-y:auto;font-size:var(--t-meta);
    color:var(--muted);line-height:1.75;margin:8px 0 18px}
.voorwaarden-vak h2{font-size:var(--t-basis);color:var(--donker);margin:16px 0 5px}
.voorwaarden-vak h2:first-child{margin-top:0}
.voorwaarden-vak p{margin:0 0 10px;color:var(--muted)}

.handtekening-vak{margin:6px 0 4px}
.handtekening-doek{width:100%;height:190px;background:#fff;border:2px dashed #C6D2E0;
    border-radius:10px;touch-action:none;cursor:crosshair;display:block}
.handtekening-doek.gezet{border-style:solid;border-color:var(--groen);background:#FCFEFD}
.handtekening-onder{display:flex;justify-content:space-between;align-items:center;
    gap:12px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-klein);color:var(--muted)}
/* Handtekeningvak: links en rechts precies even hoog, zodat de twee
   handtekeningen en de lijnen eronder op één hoogte staan. */
.sig-vak{height:150px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--lijn);border-radius:10px;background:#fff}
.sig-vak img{max-height:126px;width:auto}
.sig-vak canvas{width:100%;height:100%;display:block}
.getekend{border:1px solid var(--lijn);border-radius:10px;background:#fff;padding:12px;
    display:inline-block;max-width:100%}
.getekend img{display:block;max-height:150px}
/* 🚨 Het vak mét handtekening staat naast een leeg vak van dezelfde hoogte, en de
   twee lijnen eronder horen op één hoogte te staan. `inline-block` zet het vak op
   een tekstregel, en daar hoort ruimte onder voor de staart van een letter: een
   paar pixel die de linkerlijn omlaag duwden. Als flex-blok is die ruimte er niet
   en lopen beide lijnen weer gelijk. De afbeelding krijgt dan de hoogte van het
   vak min de padding, anders steekt hij eruit. */
.sig-vak.getekend{display:flex;align-items:center;justify-content:center;width:100%}
.sig-vak.getekend img{max-height:calc(100% - 4px)}
.teken-strook{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end;margin-top:10px}
.teken-strook .lijn{border-top:1px solid var(--tekst);padding-top:6px;font-size:var(--t-klein);color:var(--muted)}

.contract-stempel{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;
    border-radius:20px;font-size:var(--t-meta);font-weight:700}
.contract-stempel.getekend-ja{background:#E7F6EC;color:var(--groen);border:1px solid #BCE3C9}
.contract-stempel.getekend-nee{background:#FDF3E3;color:#8A6A30;border:1px solid #EFD9B0}

/* ── Reserveringsoverzicht (beheer + klant) ────────────────── */
.res-lijst{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:var(--rond)}
.res-lijst th,.res-lijst td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--vlak-2);font-size:var(--t-meta)}
.res-lijst th{background:var(--vlak);font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
/* 🚨 Dezelfde kleurregel als in het beheer (zie admin_header.php):
   groen = afgehandeld of opgehaald · wit = openstaand · rood = probleem ·
   grijs = vervallen. Oranje is van de knoppen en dus nooit van een statuspil. */
.status-pil{display:inline-block;padding:2px 10px;border-radius:11px;font-size:var(--t-mini);font-weight:700}
.status-pil.gereserveerd{background:#fff;color:#41556B;box-shadow:inset 0 0 0 1px #CDD8E4}
.status-pil.opgehaald{background:#E7F6EC;color:var(--groen)}
.status-pil.retour{background:#E7F6EC;color:var(--groen)}
.status-pil.laat{background:#FDEAEA;color:#B42318}
.status-pil.geannuleerd{background:var(--vlak-2);color:var(--muted)}

/* ── Informatiepagina's ────────────────────────────────────── */
.info-pagina .tekst h2{font-size:var(--t-h3);margin:26px 0 7px}
.info-pagina .tekst h2:first-child{margin-top:0}
.info-pagina .tekst p{margin:0 0 14px}
.info-terug{margin-top:34px;padding-top:18px;border-top:1px solid var(--lijn);
    font-size:var(--t-meta);color:var(--muted)}

/* ── Contact ───────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start}
.info-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:22px}
.info-kaart h3{font-size:var(--t-h3);margin:0 0 14px}
.info-kaart .regel{display:flex;gap:11px;padding:8px 0;font-size:var(--t-meta);color:var(--muted)}
.info-kaart .regel b{color:var(--donker);font-weight:600}
.tijden{width:100%;border-collapse:collapse;margin-top:6px}
.tijden td{padding:5px 0;font-size:var(--t-meta);color:var(--muted);border-bottom:1px solid var(--vlak-2)}
.tijden td:last-child{text-align:right;font-weight:600;color:var(--donker);white-space:nowrap}
.tijden tr.vandaag td{color:var(--accent-d)}
.tijden tr:last-child td{border-bottom:0}

/* ── Footer ────────────────────────────────────────────────── */
/* ⚠️ De voet is bewust laag gehouden: het is de afsluiting van de pagina, geen
   tweede menu. Ruime padding plus vier kolommen met lucht ertussen gaf een blok
   van een halve schermhoogte, en dat is precies waar niemand naar kijkt. */
/* 🚨 De voet blijft laag. Alles hieronder staat krap afgesteld: de hoogte wordt
   bepaald door de langste kolom, en dat is de merkkolom (logo, zin, knopjes).
   Wordt er iets aan toegevoegd, kijk dan eerst of het echt in de voet hoort. */
.site-footer{background:var(--donker);color:#9FB3C8;margin-top:26px}
.footer-inner{max-width:var(--breed);margin:0 auto;padding:12px 24px 2px;
    display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:8px 32px}
.footer-col h4{color:var(--accent);font-size:var(--t-mini);text-transform:uppercase;
    letter-spacing:1.1px;font-weight:600;margin:0 0 3px}
.footer-col a,.footer-col .voet-los{display:block;color:#9FB3C8;font-size:var(--t-klein);
    padding:0;line-height:1.55;text-decoration:none}
.footer-col a:hover{color:#fff;text-decoration:none}
/* Het merk als tekst in plaats van het logo uit de balk — zie de toelichting in
   footer.php. `.onder` is hier links uitgelijnd en kleiner dan bovenin: het is
   een onderschrift bij de naam, geen tweede logo. */
.footer-merk{display:inline-block;text-decoration:none}
.footer-merk:hover{text-decoration:none}
.footer-merk .merk{font-size:24px;font-weight:800;color:#fff;letter-spacing:-1px;display:block}
.footer-merk .merk b{color:var(--accent)}
.footer-merk .onder{display:block;margin-top:3px;font-family:"Bahnschrift SemiLight","Bahnschrift Light",Bahnschrift,Inter,system-ui,sans-serif;
    font-weight:350;font-size:10px;color:#8DA2B8;letter-spacing:1.2px;text-transform:uppercase}
.footer-brand p{color:#8DA2B8;font-size:var(--t-klein);margin:4px 0 0;max-width:32em;line-height:1.45}
.nowrap{white-space:nowrap}
.merk-social{display:flex;gap:8px;margin-top:8px}
.merk-social a{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;padding:0}
.merk-social a:hover{background:var(--accent)}
.merk-social svg{width:16px;height:16px;fill:#C9D6E4}
.merk-social a:hover svg{fill:#fff}
/* "ABC Rent is onderdeel van Lotech" op Over ons: een voetnoot onder het verhaal,
   niet een alinea ertussen. Klein en grijs, met een streepje ruimte erboven. */
.over-onderdeel{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--lijn);
    color:var(--muted);font-size:var(--t-klein)}
.voet-vraag p{color:#8DA2B8;font-size:var(--t-klein);margin:0 0 12px;line-height:1.7}
.footer-betaal{border-top:1px solid rgba(255,255,255,.08);padding:11px 24px;text-align:center}
.footer-betaal img{max-width:280px;opacity:.9}
/* De slotregel: links het merk, rechts de zakelijke nummers, met een haarlijn
   erboven over de breedte van de kolommen.
   ⚠️ Die streep is er ooit uit gehaald omdat de regel toen een eigen balk was en
   de voet twintig pixels hoger maakte voor vier woorden. Nu staat er aan beide
   kanten iets en scheidt de lijn twee soorten informatie: navigatie boven,
   bedrijfsgegevens onder. Krappe padding, dus die hoogte kost 'ie niet. */
.footer-bottom{max-width:var(--breed);margin:10px auto 0;padding:10px 24px 12px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 24px;
    font-size:var(--t-mini);color:#7B90A6}

/* ── Mobiel ────────────────────────────────────────────────── */
@media(max-width:900px){
    .prod-detail{grid-template-columns:1fr;gap:24px}
    .contact-grid{grid-template-columns:1fr;gap:24px}
    .footer-inner{grid-template-columns:1fr 1fr;gap:18px 26px}
}
@media(max-width:760px){
    .nav-toggle{display:flex}
    .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--donker-2);
        flex-direction:column;align-items:stretch;padding:10px 16px 16px;gap:2px;
        box-shadow:0 10px 24px rgba(0,0,0,.3)}
    body.nav-open .site-nav{display:flex}
    .site-nav a{padding:12px 14px}
    .nav-cart{margin-left:0;justify-content:center}
    .nav-res{margin-bottom:8px}
    .nav-login{margin-left:0;justify-content:center;margin-bottom:8px}
    /* 🚨 Op een telefoon bestaat hover niet. De categorieën staan daar dus gewoon
       ingesprongen onder Verhuur in het uitgeklapte menu, met een lijntje ervoor —
       een uitklapper die je moet aantikken zou een tweede tik kosten voor iets dat
       hier prima open kan staan. */
    .nav-uit{display:block}
    .nav-uit .pijl{display:none}
    .nav-sub{position:static;opacity:1;visibility:visible;transform:none;
        background:transparent;border:0;border-radius:0;overflow:visible;
        box-shadow:none;padding:0 0 6px 14px;min-width:0}
    .nav-sub a{color:#9FB3C8;font-size:var(--t-klein);padding:9px 14px;border-left:2px solid rgba(255,255,255,.14)}
    .nav-sub a:hover{background:rgba(255,255,255,.08);color:#fff}
    .nav-sub a:first-child{border-bottom:0;margin-bottom:0;padding-bottom:9px;color:#C9D6E4}
    .kop-inner{min-height:64px;position:relative}
    .hero-inner{padding:52px 20px 58px}
    .contract-partijen,.periode-rij,.form-rij,.doc-vak .form-rij,
    .teken-strook{grid-template-columns:1fr;gap:14px}
    .contract{padding:20px}
    .prod-info dl{grid-template-columns:1fr}
    .prod-info dt{border-bottom:0;padding-bottom:0}
}
@media(max-width:640px){
    /* Onder 16px zoomt de iPhone in zodra je een veld aantikt — hinderlijk
       midden in het afrekenen. Vandaar de vaste 16px op mobiel. */
    input[type=text],input[type=email],input[type=tel],input[type=number],
    input[type=date],input[type=password],textarea,select{font-size:16px}
    .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .footer-inner{grid-template-columns:1fr;gap:16px}
    /* Eén kolom: de twee helften van de slotregel onder elkaar, allebei links. */
    .footer-bottom{flex-direction:column;gap:3px}
    .sectie{padding:32px 18px}
    .kal-dag{font-size:var(--t-klein)}
    .kal-vrij{display:none}
}

/* ── Printen (contract en factuur) ─────────────────────────── */
/* Bij het ophalen wordt de overeenkomst uitgeprint en op papier getekend.
   Op het scherm staat het tekenvlak, op papier de twee handtekeningregels —
   .alleen-print / .geen-print regelen dat verschil. */
.alleen-print{display:none}
.print-voet{display:none}
@media print{
    /* ⚠️ margin:0 is bewust. De browser zet zijn eigen kop- en voetregel (de URL,
       de datum, het paginanummer) ín de paginamarge. Is die nul, dan is er geen
       ruimte voor en verdwijnt hij vanzelf — zonder dat iemand iets hoeft in te
       stellen. De witruimte komt uit de padding van .sectie hieronder. */
    @page{margin:0;size:A4}
    .site-header,.site-footer,.topbalk,.geen-print,.shop-dicht-balk,.site-uit-balk,
    #teken-form,.melding{display:none !important}
    .alleen-print{display:block !important}
    /* Voetregel links uitlijnen, niet centreren — hij hoort bij het papier en
       niet in het midden van de aandacht. */
    /* Voetregel onderaan élk vel, links uitgelijnd. Vast onderaan de pagina in
       plaats van achter de tekst aan: bij een korte overeenkomst bungelde hij
       anders halverwege. 5 mm is de bodem — lager kan een printer niet. */
    .print-voet{display:block !important;text-align:left;font-size:8.5pt;color:var(--muted);
        position:fixed;left:13mm;right:13mm;bottom:5mm;margin:0;padding-top:2mm;
        border-top:1px solid var(--lijn);background:#fff}
    body{background:#fff;font-size:11.5pt}
    .contract{border:0;padding:0;box-shadow:none;margin:0}
    /* Voorwaarden meeprinten of niet — de keuze staat boven de printknop.
       Standaard (geen class of .vw-uit) blijven ze weg: ze zijn voorgedrukt op
       de achterkant van het briefpapier. */
    body:not(.vw-achter):not(.vw-los) .vw-print-blok{display:none !important}
    body.vw-achter .vw-print-blok,body.vw-los .vw-print-blok{page-break-before:always}
    .voorwaarden-vak{max-height:none;overflow:visible;background:#fff;border:0;padding:0;
        font-size:9pt;line-height:1.5;column-count:2;column-gap:12mm}
    .voorwaarden-vak h2{font-size:9.5pt;break-after:avoid}
    /* 🚨 De onderrand van 18mm is er voor de vaste voetregel hieronder. Die
       staat op elke pagina op dezelfde plek en telt niet mee in de tekstflow —
       zonder deze ruimte loopt de inhoud er dwars doorheen en lijkt de pagina
       door te lopen tot buiten het vel. Verklein dit dus niet. */
    .sectie{padding:12mm 13mm 18mm;max-width:none}
    /* Wat er van de site zelf overblijft hoort niet op papier. */
    footer,header{display:none !important}

    /* 🚨 Een A4 is ongeveer 794 px breed, dus de mobiele media query (max-width
       760px) valt er nét buiten — maar de kolommen stonden in de afdruk tóch
       onder elkaar doordat de printbreedte kleiner uitpakt. Hier zetten we ze
       hard terug op twee: verhuurder naast huurder, en de handtekeningen naast
       elkaar. Dat scheelt een halve pagina en leest als een overeenkomst in
       plaats van als een lange lijst. */
    .contract-partijen,.periode-rij,.teken-strook{grid-template-columns:1fr 1fr !important}

    /* Blokken niet middenin afbreken. De betaalregel viel eerder middenin een
       zin over de paginarand ("Contant geld nemen wij" / "niet aan.") — dat
       leest als een fout, ook al is het er geen. */
    .contract table.regels,.contract-totalen,.borg-vak,.periode-vak,.contract-partijen,
    .qr-mid,.teken-strook,.alleen-print{break-inside:avoid}

    /* Compacter: de overeenkomst hoort op één vel te passen. */
    .contract h2{margin-top:14px;margin-bottom:6px}
    .contract table.regels th,.contract table.regels td{padding-top:5px;padding-bottom:5px}
    .borg-vak{padding:10px 14px;margin-top:8px}
    .contract-totalen{margin-top:8px}
    .teken-strook{margin-top:8mm}
    /* De papieren handtekeningregels staan los van de digitale: duidelijk
       eronder met lucht ertussen, zodat je ziet dat het een ander moment is —
       maar niet zó ver dat ze een eigen bijna lege pagina krijgen. */
    /* De ruimte boven het papieren ondertekenblok komt uit een leeg blokje met
       vaste hoogte in huurcontract.php zelf — niet uit een marge hier. */
    .alleen-print{margin-top:0 !important}
    .alleen-print .teken-strook{margin-top:4mm}
    .sig-vak{height:120px}
    a{color:inherit;text-decoration:none}
    /* De inleverkaart is een eigen vel: dat neemt de klant mee het erf op,
       los van de overeenkomst die in de map blijft. */
    .qr-vel{page-break-before:always;break-inside:avoid;border:0;padding:0;box-shadow:none}
    .qr-vak{border:1px solid #000}
}

/* Wat er meegaat en wat er gecontroleerd is: label links, waarde rechts.
   Alleen de regels die van toepassing zijn — zie huurcontract.php. */
/* Het betaalblok op de uitgiftefactuur: QR links, gegevens rechts. */
.fact-betaal{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-top:6px;
    font-size:var(--t-klein);color:var(--muted)}
/* Even groot als de code op het inleverblad (.qr-vak = 150px) — twee formaten
   naast elkaar in dezelfde stapel leest als een fout. */
.fact-betaal .qr-vak{flex:0 0 150px;width:150px}

.uitg-kop{font-size:var(--t-basis);font-weight:700;color:var(--donker);margin:20px 0 0}
.uitg-tabel{width:100%;border-collapse:collapse;margin-top:8px}
.uitg-tabel th,.uitg-tabel td{text-align:left;vertical-align:top;padding:6px 0;
    font-size:var(--t-klein);border-bottom:1px solid var(--lijn)}
.uitg-tabel tr:last-child th,.uitg-tabel tr:last-child td{border-bottom:0}
.uitg-tabel th{width:210px;font-weight:600;color:var(--muted)}
.uitg-tabel td{color:var(--donker);font-weight:600}

/* ── Bijlage bij de overeenkomst: inleveren met de QR-code ──── */
.qr-vel{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:22px 24px;
    margin-top:18px}
.qr-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    border-bottom:2px solid var(--donker);padding-bottom:12px;margin-bottom:18px}
/* ⚠️ De rechterkolom met het merk mag niet krimpen: doet hij dat wel, dan breekt
   "ABC Rent" in tweeën ("ABC" boven "Rent"). Op het inleverblad gebeurde dat,
   op de factuur niet, en dan lijken het twee verschillende logo's. */
.qr-kop > div:last-child{flex-shrink:0}
.qr-kop h2{margin:0;font-size:var(--t-h3);letter-spacing:-.4px}
.qr-kop p{margin:3px 0 0;font-size:var(--t-meta);color:var(--muted)}
/* Zelfde logo als op de overeenkomst — dit vel raakt los van de rest en moet
   er op zichzelf uitzien als een document van ons. */
.qr-kop .merk{font-size:44px;font-weight:800;color:var(--donker);letter-spacing:-1.6px;
    line-height:1;white-space:nowrap}
.qr-kop .merk b{color:var(--accent)}
.qr-nr{font-size:var(--t-meta);font-weight:700;color:var(--muted);white-space:nowrap;margin-top:4px}
.qr-mid{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.qr-vak{width:150px;flex-shrink:0;background:#fff;padding:6px;border:1px solid var(--lijn);
    border-radius:8px}
.qr-tekst{flex:1;min-width:220px}
.qr-wat b{display:block;font-size:var(--t-lead);letter-spacing:-.3px}
.qr-wat span{display:block;font-size:var(--t-meta);color:var(--muted)}
.qr-wanneer{margin-top:8px;font-size:var(--t-basis)}
.qr-stappen{margin:10px 0 0;padding-left:18px;font-size:var(--t-meta);color:var(--muted);line-height:1.8}
.qr-link{margin:10px 0 0;font-size:var(--t-mini);color:var(--muted)}
.qr-link span{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--donker);word-break:break-all}
.qr-vragen{margin-top:16px;padding:10px 14px;background:var(--vlak);border-radius:9px;
    font-size:var(--t-meta);color:var(--muted)}
.qr-vragen b{color:var(--donker)}
.qr-let{margin:14px 0 0;font-size:var(--t-meta);color:var(--muted);line-height:1.65;
    border-left:3px solid var(--accent);padding-left:12px}

/* Het waarschuwingskader boven de code: dit moet je zien vóór je de kaart
   opvouwt en in het dashboardkastje legt. Ook in zwart-wit herkenbaar door de
   dikke rand — niet alleen door de kleur. */
.qr-waarschuwing{margin:0 0 18px;padding:14px 18px;border:2.5px solid var(--accent);
    border-radius:10px;background:#FFF6EE;font-size:var(--t-klein);line-height:1.65;
    color:var(--donker)}
.qr-waarschuwing b{display:block;font-size:var(--t-meta);font-weight:900;letter-spacing:1.2px;
    color:#C4650B;margin-bottom:7px;text-transform:uppercase}
.qr-waarschuwing p{margin:0}
.qr-waarschuwing p + p{margin-top:7px}
.qr-waarschuwing strong{font-weight:800}

/* ── Printen: het inleverblad ────────────────────────────────
   🚨 Dit blok staat bewust helemaal ONDERAAN het bestand. De opmaak van
   .qr-vel hierboven komt later in het bestand dan het grote @media print-blok,
   en bij gelijke specificiteit wint de laatste regel — ook bij het printen.
   Daardoor hield het inleverblad zijn kader en zag het eruit als een kaartje
   ín de pagina in plaats van als een vel papier. Zet printregels voor iets
   wat hierboven gedefinieerd wordt dus altijd hier, niet daar. */
@media print{
    .qr-vel{border:0;border-radius:0;padding:0;box-shadow:none;margin-top:0;
        page-break-before:always;break-inside:avoid}
    /* Lucht rond het logo: het staat rechtsboven op een vel dat de klant
       meeneemt, en dan hoort het vrij te staan in plaats van klem tussen de
       titel en de scheidingslijn. */
    /* 🚨 Kop van het inleverblad en kop van de overeenkomst zijn EXACT gelijk:
       zelfde ruimte onder het logo, zelfde afstand tot de scheidingslijn. Het
       zijn twee vellen uit dezelfde map — als de een anders oogt dan de ander
       valt dat meteen op. Pas ze dus altijd samen aan. */
    /* De titel en alles eronder zakken; het LOGO blijft waar het staat.
       Het kopblok krijgt daarom ruimte erboven, en de rechterkolom (waar het
       logo in staat) haalt diezelfde ruimte er met een negatieve marge weer
       vanaf. Zo zakt alleen de tekst. Pas ze samen aan: 18mm en -18mm. */
    .qr-kop h2,.contract-kop h1{margin-top:0}
    .qr-kop,.contract-kop{margin-top:18mm;padding-bottom:16px}
    .qr-kop > div:last-child,.contract-kop > div:last-child{margin-top:-30mm}

    /* 🚨 Geen kaders op papier. Een lijst met bedragen of een huurperiode heeft
       geen doosje nodig; dat maakt het vel alleen maar druk. De enige twee
       uitzonderingen: het vak waar een handtekening in komt (dat moet je zien
       staan) en het BELANGRIJK-kader op het inleverblad. */
    .periode-vak,.contract-totalen .vak,.borg-vak,.fact-betaal,.voorwaarden-vak{
        background:#fff !important;border:0 !important;border-radius:0 !important;padding:0 !important}
    .contract-totalen .vak{padding-top:4px !important;border-top:1px solid var(--lijn) !important}
    .qr-kop{margin-bottom:18px}
    /* 🚨 GEEN kader om de QR-code. Een lijn strak om de code heen vreet de
       witrand op die een scanner nodig heeft — dan is hij op papier niet meer
       te lezen. Wel iets groter afdrukken: 45 mm leest ook met een oudere
       telefoon nog vlot. */
    /* ⚠️ Ook de flex-breedte meenemen, anders houdt de code op de uitgifte-
       factuur zijn 150px (≈40 mm) en is die zichtbaar kleiner dan die op het
       inleverblad. Twee QR-codes van verschillend formaat op één stapel oogt
       slordig; ze horen even groot te zijn. */
    .qr-vak{border:0;padding:0;width:45mm}
    .fact-betaal .qr-vak{flex:0 0 45mm;width:45mm}
}

/* ── Rekensom tegen spam ───────────────────────────────────── */
/* Smal veld: het is één getal, geen zin. Een invoervak over de volle breedte
   suggereert dat er meer verwacht wordt dan "7". */
.som-veld{max-width:260px}
.som-veld input{max-width:110px}
.som-veld .hint{display:block;margin-top:5px;font-size:var(--t-meta);color:var(--muted)}