/* De publieke voorkant van deConcessieman.
 *
 * Eigen opmaak, bewust los van style.css: die is van de applicatie achter de inlog en moet
 * daar kunnen veranderen zonder dat de site meebeweegt. Wat de twee delen is de huisstijl,
 * en die is opgemeten aan deconcessieman.nl: #112337 tekst, #203E60 koppen, #5696DA accent,
 * #335A97 beeldmerk, #28A745 knoppen (hoek 8 px), #E8F4FB vlakken, #DADBDD lijnen, Rubik.
 *
 * DE OPZET VOLGT NU WEL DIE VAN deconcessieman.nl. Eerst stond hier het tegenovergestelde:
 * eigen ontwerp, alleen de kleuren geleend. Rodney vond het resultaat naast de echte site
 * verbleken, en had gelijk -- kleur en letter delen maakt twee pagina's nog geen familie.
 * Wat de echte site doet en wij niet deden: een donkere opening met het beeldmerk als groot
 * motief, schuine overgangen tussen de vlakken in plaats van rechte lijnen, en kaarten met
 * een pictogramtegel. Dat is hieronder overgenomen. De teksten en de indeling van de inhoud
 * blijven van onszelf.
 *
 * Geen enkele externe bron: het Content-Security-Policy van deze server staat alleen
 * 'self' toe. Rubik komt van de server zelf (/fonts/), niet van Google Fonts. */

@font-face{font-family:Rubik;src:url(/fonts/rubik-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/rubik-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/rubik-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --tekst:#112337; --kop:#203E60; --accent:#5696DA; --merk:#335A97;
  --knop:#28A745; --vlak:#E8F4FB; --lijn:#DADBDD; --grijs:#5d6b7a; --wit:#ffffff;
  font-family:Rubik,'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  color:var(--tekst); background:var(--wit); font-size:17px;
}
*{box-sizing:border-box}
body{margin:0;line-height:1.65;background:var(--wit)}
img{max-width:100%}

/* --- balk bovenaan --- */
.sitebalk{position:sticky;top:0;z-index:10;background:var(--wit);border-bottom:1px solid var(--lijn)}
.sitebalk .binnen{max-width:1120px;margin:auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--kop);margin-right:auto}
.merk .beeldmerk{width:26px;height:35px;flex:none}
.merk b{font-size:20px;font-weight:700;letter-spacing:-.5px;display:block;line-height:1.1}
.merk span{display:block;font-size:9.5px;font-weight:500;color:var(--accent);letter-spacing:.14em}
.sitemenu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sitemenu a{color:var(--tekst);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:6px}
.sitemenu a:hover{background:var(--vlak);color:var(--kop)}
.sitemenu a.nu{color:var(--merk)}
.sitemenu a.inlog{background:var(--kop);color:var(--wit);padding:9px 18px;border-radius:8px}
.sitemenu a.inlog:hover{background:var(--merk);color:var(--wit)}

/* --- opening -----------------------------------------------------------------
   Een donker vlak over de volle breedte met het beeldmerk als groot motief rechts, en een
   schuine onderrand. Dat laatste doet de echte site ook: de vlakken lopen niet recht in
   elkaar over maar met een flauwe helling. Met clip-path kost dat geen enkele afbeelding. */
.opening{position:relative;overflow:hidden;background:#12314f;color:var(--wit);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%)}
.opening .binnen{position:relative;z-index:1;max-width:1120px;margin:auto;padding:78px 24px 96px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}

/* Het motief: hetzelfde beeldmerk, groot en half doorschijnend, rechts uit beeld lopend.
   pointer-events uit, want er staat niets te bedienen -- het is decor. */
.opening .motief{position:absolute;right:-14%;top:-34%;height:200%;width:auto;opacity:.34;
  pointer-events:none;z-index:0}
.opening .motief path{fill:#1e4a7c}
.opening .motief path.licht{fill:#2a5f99}

.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--merk);margin:0 0 14px}
.opening .eyebrow{color:#7fb6e8}
h1{font-size:clamp(31px,4.4vw,46px);line-height:1.12;letter-spacing:-1.2px;margin:0 0 18px;color:var(--kop)}
.opening h1{color:var(--wit)}
.opening p{font-size:18px;color:rgba(255,255,255,.84);margin:0 0 26px;max-width:34em}
/* Op donker werkt een omlijnde knop alleen in wit; met de donkerblauwe rand van elders
   verdwijnt hij in de achtergrond. */
.opening .knop.tweede{color:var(--wit);border-color:rgba(255,255,255,.55)}
.opening .knop.tweede:hover{background:var(--wit);color:var(--kop);border-color:var(--wit)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knop{display:inline-block;background:var(--knop);color:var(--wit);text-decoration:none;
  font-weight:600;font-size:15.5px;padding:14px 24px;border-radius:8px;border:0;cursor:pointer;
  font-family:inherit;line-height:1.3}
.knop:hover{background:#22913c}
.knop.tweede{background:transparent;color:var(--kop);border:1.5px solid var(--kop)}
.knop.tweede:hover{background:var(--kop);color:var(--wit)}

/* Het kaartje naast de openingstekst: wat een rapport in één oogopslag beantwoordt. */
.proefkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:24px 26px;
  box-shadow:0 14px 34px rgba(17,35,55,.09)}
.proefkaart h2{font-size:12px;letter-spacing:.14em;color:var(--grijs);margin:0 0 16px;font-weight:700}
.proefkaart dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:13px 16px;align-items:baseline}
.proefkaart dt{font-size:14.5px;color:#31465e}
.proefkaart dd{margin:0;font-weight:700;font-size:15.5px;color:var(--kop);text-align:right}
.proefkaart dd.ja{color:#1c7a34}
.proefkaart dd.nee{color:#a3312a}
.proefkaart .voet{margin:18px 0 0;font-size:12.5px;color:var(--grijs);line-height:1.5;
  border-top:1px solid var(--lijn);padding-top:14px}

/* --- secties --- */
section{scroll-margin-top:76px}
.strook{max-width:1120px;margin:auto;padding:66px 24px}
.strook.smal{max-width:840px}
.strook h2{font-size:clamp(24px,3vw,31px);letter-spacing:-.6px;color:var(--kop);margin:0 0 10px}
.strook .onder{font-size:17px;color:#31465e;margin:0 0 34px;max-width:52em}
/* Een gevuld vlak loopt schuin in het wit erboven en eronder over, net als bij de echte
   site. De extra padding vangt op wat de schuine rand wegneemt, anders raakt de bovenste
   regel tekst de rand. */
.gevuld{position:relative;background:var(--vlak);
  clip-path:polygon(0 44px, 100% 0, 100% calc(100% - 44px), 0 100%)}
.gevuld .strook{padding-top:96px;padding-bottom:96px}

.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.diensten li{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:24px 22px}
.gevuld .diensten li{background:var(--wit)}
.diensten h3{margin:0 0 9px;font-size:17.5px;color:var(--kop);line-height:1.3}
.diensten p{margin:0;font-size:15px;color:#41546b;line-height:1.6}
.nummer{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin:0 0 12px}

.tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.tweeluik p{font-size:16.5px;color:#31465e}
.feitjes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.feitjes li{border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.feitjes b{display:block;font-size:22px;color:var(--kop);line-height:1.2}
.feitjes span{font-size:14.5px;color:var(--grijs)}

/* --- stappen --- */
.stappen{list-style:none;counter-reset:stap;margin:0;padding:0;display:grid;gap:22px}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.stappen li::before{content:counter(stap);display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--kop);color:var(--wit);font-weight:700;font-size:17px}
.stappen h3{margin:8px 0 5px;font-size:17.5px;color:var(--kop)}
.stappen p{margin:0;font-size:15.5px;color:#41546b}

/* --- formulier --- */
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:30px}
.formulier h3{font-size:17px;color:var(--kop);margin:0 0 4px}
.formulier h3+.velden{margin-bottom:8px}
.formulier .velden+h3{margin-top:28px}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.veld{display:block;font-size:14px;font-weight:600;color:var(--kop)}
.veld input,.veld select{display:block;width:100%;margin-top:7px;padding:12px;font:16px inherit;
  border:1px solid #c3c6ca;border-radius:6px;background:var(--wit);color:var(--tekst)}
.veld input:focus,.veld select:focus{outline:2px solid var(--knop);outline-offset:2px}
.veld .hint{display:block;font-weight:400;font-size:13px;color:var(--grijs);margin-top:6px}
.prijsregel{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--lijn);margin-top:26px;padding-top:22px}
.prijs{font-size:30px;font-weight:700;color:var(--kop);letter-spacing:-1px}
.prijs small{font-size:14px;font-weight:400;color:var(--grijs);letter-spacing:0;margin-left:10px;white-space:nowrap}

/* --- meldingen --- */
.let{background:#fff6e0;border-left:4px solid #cb9526;padding:15px 18px;border-radius:0 8px 8px 0;
  font-size:14.5px;color:#6b4d0c;margin:0 0 26px}
.fout{background:#fdeceb;border-left:4px solid #a3312a;padding:15px 18px;border-radius:0 8px 8px 0;
  font-size:14.5px;color:#7d211c;margin:0 0 26px}
.goed{background:#eaf7ee;border-left:4px solid var(--knop);padding:15px 18px;border-radius:0 8px 8px 0;
  font-size:14.5px;color:#17612b;margin:0 0 26px}
.demolint{background:var(--kop);color:var(--wit);text-align:center;font-size:13.5px;padding:9px 24px}
.demolint b{color:#8fd6a3}

/* --- afrekenen --- */
.bon{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:26px 28px;margin:0 0 28px}
.bon dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:11px 18px}
.bon dt{color:#41546b;font-size:15px}
.bon dd{margin:0;font-weight:600;text-align:right;font-size:15px;color:var(--kop)}
.bon .totaal{border-top:1px solid var(--lijn);padding-top:12px;margin-top:5px}
.codeblok{font-family:'Courier New',monospace;font-size:19px;letter-spacing:1px;background:var(--wit);
  border:1px dashed var(--merk);border-radius:8px;padding:16px 18px;text-align:center;color:var(--kop);
  word-break:break-all}

/* --- teller --- */
.teller{display:flex;gap:36px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.teller li{min-width:150px}
.teller b{display:block;font-size:38px;line-height:1.1;color:var(--kop);letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums}
.teller span{font-size:14.5px;color:var(--grijs)}

/* --- contact --- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:0;padding:0;list-style:none}
.contact li{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:22px}
.contact h3{margin:0 0 6px;font-size:13px;letter-spacing:.12em;color:var(--grijs);font-weight:700}
.contact a{color:var(--merk);text-decoration:none;font-size:17px;font-weight:500}
.contact a:hover{text-decoration:underline}

/* --- voet --- */
.sitevoet{background:var(--tekst);color:#b8c6d6;font-size:14px}
.sitevoet .binnen{max-width:1120px;margin:auto;padding:34px 24px;display:flex;gap:20px;
  flex-wrap:wrap;justify-content:space-between;align-items:center}
.sitevoet a{color:#a6d5f1;text-decoration:none}
.sitevoet a:hover{text-decoration:underline}
.sitevoet .klein{font-size:12.5px;color:#7f92a6}

@media(max-width:840px){
  .opening{clip-path:none}
  .gevuld{clip-path:none;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
  .gevuld .strook{padding-top:46px;padding-bottom:46px}
  .opening .motief{display:none}
  .opening .binnen{grid-template-columns:1fr;padding:44px 20px 56px;gap:34px}
  .tweeluik{grid-template-columns:1fr;gap:28px}
  .strook{padding:46px 20px}
  .contactpaar{grid-template-columns:1fr;gap:26px}
  .sitebalk .binnen{padding:12px 20px;gap:12px}
  .merk span{display:none}
}

/* --- klantportaal --- */
.bestellijst{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.bestellijst li{display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:20px 22px}
.bestellijst h3{margin:0 0 4px;font-size:17px;color:var(--kop)}
.bestellijst .klein{margin:0;font-size:13.5px;color:var(--grijs)}
.bestellijst .rechts{margin-left:auto}
.vervallen{font-size:14px;color:var(--grijs);font-style:italic}


/* --- contact: formulier links, gegevenskaart rechts --------------------------
   Zoals op deconcessieman.nl. De kaart is geen sierrand maar een antwoord op de vraag
   "bel ik, of schrijf ik?" -- daarom staat er naast het nummer ook binnen hoeveel tijd
   er op een bericht wordt geantwoord. */
.contactpaar{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:34px;align-items:start;margin-top:30px}
.contactpaar .contactform{margin:0;max-width:none}

.contactkaart{background:var(--vlak);border-radius:12px;padding:26px 28px}
.contactkaart h3{margin:0 0 8px;font-size:18px;color:var(--kop);letter-spacing:-.3px}
.contactkaart .klein{margin:0 0 22px;font-size:13.5px;color:var(--grijs);line-height:1.55}
.contactkaart ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.contactkaart li{display:flex;gap:14px;align-items:flex-start}
.contactkaart .tegel{flex:none;width:38px;height:38px;border-radius:9px;background:#d3e7f7;
  display:flex;align-items:center;justify-content:center}
.contactkaart .tegel svg{width:19px;height:19px;fill:var(--merk)}
.contactkaart .tekst{font-size:14.5px;line-height:1.5;color:#31465e}
.contactkaart .tekst strong{display:block;font-size:13px;color:var(--kop);margin-bottom:2px}
.contactkaart a{color:var(--merk);text-decoration:none;font-weight:500}
.contactkaart a:hover{text-decoration:underline}

/* --- contactformulier -------------------------------------------------------
   De val voor robots staat in de HTML als gewoon veld en wordt hier uit beeld gehaald.
   Niet met display:none: sommige robots slaan verborgen velden juist over. Zo staat het er
   voor hen als een normaal veld, terwijl een mens het nooit ziet of met tab bereikt. */
.contactform .val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contactform{margin:32px 0 0;max-width:640px}
.contactform .velden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contactform label{display:block;font-size:13px;font-weight:600;color:#112337;margin-top:16px}
.contactform .velden label{margin-top:0}
.contactform .optioneel{font-weight:400;color:#7b8592}
.contactform input,.contactform textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;
  border:1px solid #d3d8de;border-radius:8px;background:#fff;color:#112337;
  font:400 15px/1.5 Rubik,'Segoe UI',system-ui,Arial,sans-serif}
.contactform textarea{resize:vertical;min-height:120px}
.contactform input:focus,.contactform textarea:focus{outline:2px solid #28a745;outline-offset:2px;border-color:#28a745}
.contactform button{margin-top:18px;background:#28a745;color:#fff;border:0;border-radius:8px;
  padding:13px 26px;font:600 15px Rubik,'Segoe UI',system-ui,Arial,sans-serif;cursor:pointer}
.contactform button:hover{background:#23913d}
.contactform .fout{background:#fdeceb;border-left:3px solid #d44347;color:#8f2d30;
  padding:11px 14px;border-radius:0 3px 3px 0;font-size:14px;margin:0 0 18px}
.contactform .klein{margin-top:12px}

/* --- de twee producten in de webwinkel --------------------------------------
   Twee kaarten naast elkaar met een keuzerondje: het is het een of het ander, en dat hoort
   te zien te zijn vóórdat iemand de rest van het formulier invult. */
.producten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 6px}
.productkaart{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid #dadbdd;
  border-radius:10px;padding:20px 22px;cursor:pointer;margin:0}
.productkaart:hover{border-color:#5696da}
.productkaart:has(input:checked){border-color:#28a745;box-shadow:0 0 0 1px #28a745}
.productkaart input{width:auto;margin:0;accent-color:#28a745}
.productkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.productkop strong{font-size:19px;color:#203e60}
.productprijs{font-size:21px;font-weight:700;white-space:nowrap;color:#112337}
.productprijs small{display:block;font-size:11.5px;font-weight:400;color:#606266;text-align:right}
.productonder{font-size:12.5px;color:#606266}
.producttekst{font-size:14.5px;line-height:1.55}
.productlijst{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#3a4c60}
.productlijst span{padding-left:19px;position:relative}
.productlijst span::before{content:"\2713";position:absolute;left:0;color:#28a745;font-weight:700}
@media screen and (max-width:720px){.producten{grid-template-columns:1fr}}