/* Optie1 Hoogeveen — basisstijl
Geen externe afhankelijkheden: geen CDN, geen tracking.
--- Lettertype ---
De site gebruikt Manrope (SIL Open Font License 1.1), lokaal gehost als
één variable .woff2-bestand dat de gewichten 400–700 dekt — dus geen
aparte download per gewicht. Licentietekst staat naast het fontbestand in
assets/fonts/manrope-OFL.txt. Geen CDN: er gaat geen IP-adres naar een
externe lettertype-server.
De volledige typografie — schaal, gewichten, regelafstand en letterafstand —
staat centraal geregeld in het TYPOGRAFIE-blok in :root hieronder. Pas je die
variabelen aan, dan verandert de hele site mee. */
/* Eén variable font-bestand voor alle gewichten (400–700): de browser kiest
zelf het juiste punt op de gewichtsas, dus geen vier losse bestanden nodig.
font-display: swap voorkomt onzichtbare tekst tijdens het laden — de
systeemletter toont meteen en wisselt door zodra Manrope klaar is. */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/manrope-variable.woff2") format("woff2");
}
/* Open Sans (Apache License 2.0), lokaal gehost — geen CDN — voor de
hoofdnavigatie. Alleen gewicht 700 en 800 zijn nodig (nav-tekst en de
"Reparaties"-knop), dus geen volledige variable font. Twee subsets
(latin + latin-ext) dekken Nederlands en de talen met accenttekens
(Frans, Duits, Turks) die in namen/adressen kunnen voorkomen; licentie
staat naast de fontbestanden in assets/fonts/open-sans-LICENSE.txt. */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/open-sans-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/open-sans-700-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/open-sans-800-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/open-sans-800-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* Huisstijlblauw op verzoek vervangen door het blauw van de Vodafone-banner
(#1976D2, zoals nu op de homepage-hero). Om één toon te houden zonder de
leesbaarheid te breken gebruiken we de Material Blue-familie — die deelt
exact dezelfde kleurtoon:
#2196F3 (500) helder accent · #1976D2 (700) primair · #1565C0 (800) diep.
Wit op #1976D2 haalt 4,6:1, boven de norm van 4,5:1 voor lopende tekst. */
--blauw-accent: #2196f3;
--blauw-kop: #1976d2;
--blauw: #1976d2;
--blauw-knop: #1976d2;
/* Een tint dieper (#1565C0): nodig om op de grijze kaartachtergrond (#f4f5f5)
en op de lichtblauwe tinten de 4,5:1 te halen voor kleine koppen en links. */
--blauw-kop-klein: #1565c0;
--blauw-donker: #1565c0;
--blauw-zacht: #eaf4fe;
--grijs-zacht: #f4f5f5;
/* Eigen lichte tint voor het herovlak en rustige secties. Blijft licht (dit is
géén vol vlak): een lichte versie van hetzelfde blauw. */
--hero-vlak: #e3f2fd;
/* Voorheen twee aparte merkblauwen; nu allebei het primaire #1976D2. Als vol
vlak met witte tekst (hero, seniorenkaart, bovenbalk) haalt wit hierop 4,6:1
en dus de leesnorm van 4,5:1. */
--merkblauw: #1976d2;
--merkblauw-diep: #1976d2;
--tekst: #333333;
--tekst-zacht: #5f5f5f;
/* Bijna-zwart voor koppen, kaarttitels en links. Op verzoek is de blauwe
tékstkleur sitebreed vervangen door deze rustige tint (zoals op de
aanmeldpagina). Blauw blijft alleen waar het structuur/functie is: de
hero-vlakken (witte tekst), de footer, knoppen, iconen en accenten — die
hebben hun eigen, specifiekere kleurregels en blijven dus ongemoeid. */
--ink: #1d1d1f;
--lijn: #d9e6ee;
--wit: #ffffff;
--achtergrond: var(--grijs-zacht);
--radius: 10px;
--max: 1100px;
/* ============================================================
TYPOGRAFIE — centraal geregeld
Eén plek voor lettertype, schaal, gewichten, regelafstand en
letterafstand. Alle koppen en tekst op de site erven hiervan, zodat
de typografie overal consistent is. Apple dient enkel als inspiratie
voor de rustige hiërarchie en leesbaarheid — kleur, layout en merk
blijven die van Optie1.
============================================================ */
/* Manrope als primaire letter, met dezelfde robuuste systeem-fallback als
voorheen: als het font-bestand om wat voor reden dan ook niet laadt, valt
elk apparaat terug op zijn eigen scherpste sans-serif. --letter-hero
blijft apart zodat de hero later een eigen letter kan krijgen zonder de
rest te raken. */
--letter: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
--letter-hero: var(--letter);
/* Open Sans alleen voor de hoofdnavigatie (op verzoek, naar voorbeeld van
restaurantpizzeriamario.nl); de rest van de site blijft Manrope. */
--letter-nav: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
/* Typografische schaal. clamp(min, groei, max): de max is de maat op een
ruim scherm, de min wat een telefoon te zien krijgt; daartussen schaalt
het vloeiend mee met de schermbreedte. In rem, zodat een bezoeker die zijn
browser groter zet alles mee ziet groeien. */
--fs-hero: clamp(2.5rem, 1.6rem + 4.0vw, 3.75rem); /* 40 → 60 px hero-titel */
--fs-pagina: clamp(2rem, 1.45rem + 2.6vw, 3rem); /* 32 → 48 px paginatitel */
--fs-sectie: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); /* 25,6 → 36 px sectietitel */
--fs-subtitel: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22 → 28 px subtitel (h3) */
--fs-lead: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); /* 19,2 → 22 px introtekst */
--fs-body: 1.25rem; /* 20 px lopende tekst (o.a. tekst in kaarten/boxen) */
--fs-knop: 1.0625rem; /* 17 px knoppen */
/* Verlaagd van 18px: de navigatie stond in hoofdletters, die optisch kleiner
lezen dan gewone tekst — vandaar de hogere maat. Nu de navigatie in
gewone schrijfwijze staat (zie .site-nav a), leest dezelfde 16px even
duidelijk zonder de balk onnodig groot te maken. */
--fs-nav: 1rem; /* 16 px navigatie */
--fs-klein: 0.9375rem; /* 15 px kleine tekst */
--fs-footer: 0.9375rem; /* 15 px footer */
/* Gewichten. Zwaar waar het telt (titels), rustig voor de rest. */
--gewicht-hero: 700;
--gewicht-kop: 700;
--gewicht-subtitel: 600;
--gewicht-body: 400;
/* Regelafstand: ruim voor lopende tekst (prettig lezen), strak voor koppen.
H1 het strakst, H3 het ruimst — elke kop krijgt zo de regelhoogte die bij
zijn plek in de hiërarchie past in plaats van één gedeelde waarde. */
--lh-body: 1.65;
--lh-h1: 1.1;
--lh-kop: 1.15;
--lh-h3: 1.25;
--lh-hero: 1.07;
/* Letterafstand. Grote koppen mogen iets dichter op elkaar (oogt strakker en
premium); lopende tekst blijft normaal. Subtiel, nooit opvallend. */
--ls-hero: -0.022em;
--ls-kop: -0.014em;
--ls-subtitel: -0.006em;
--ls-body: 0;
/* Breedte van de openingstijdentabel. Staat hier zodat de tabel en de kop
erboven niet uit elkaar kunnen lopen. */
--tijden-max: 420px;
--schaduw: 0 2px 12px rgba(25, 118, 210, 0.10);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Dun balkje bovenaan elke pagina, in dezelfde tint als het herovlak. Als rand
op de body in plaats van een extra element: scheelt opmaak in zes bestanden. */
border-top: 6px solid var(--merkblauw-diep);
font-family: var(--letter);
/* Basis-leesgrootte en regelafstand komen uit de centrale schaal (zie :root).
Lopende tekst en de introparagrafen erven deze maat; koppen hebben een eigen
maat. */
font-size: var(--fs-body);
font-weight: var(--gewicht-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
color: var(--tekst);
background: var(--achtergrond);
/* Rondere, gelijkmatige letters op scherpe schermen — geeft de rustige,
premium uitstraling die bij deze systeem-fontstapel hoort. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Koppen in de huisstijlblauwe tint. Maat, gewicht, regel- en letterafstand
komen uit de centrale schaal, zodat de hiërarchie overal gelijk loopt:
paginatitel (h1) → sectietitel (h2) → subtitel (h3). */
h1, h2, h3 { margin: 0 0 .5em; }
h1 {
font-size: var(--fs-pagina);
font-weight: var(--gewicht-hero);
line-height: var(--lh-h1);
letter-spacing: var(--ls-kop);
color: var(--ink);
}
h2 {
font-size: var(--fs-sectie);
font-weight: var(--gewicht-kop);
line-height: var(--lh-kop);
letter-spacing: var(--ls-kop);
color: var(--ink);
}
/* h3 dient als subtitel. In een iets donkerder blauw zodat de kleinere kop op
de grijze en lichtblauwe vlakken de leesnorm (4,5:1) blijft halen. */
h3 {
font-size: var(--fs-subtitel);
font-weight: var(--gewicht-subtitel);
line-height: var(--lh-h3);
letter-spacing: var(--ls-subtitel);
color: var(--ink);
}
p { margin: 0 0 1em; }
/* Links: zwart in plaats van blauw. De onderstreping (browserstandaard) blijft,
zodat een link herkenbaar blijft zónder kleur. Footer- en navigatielinks
hebben eigen, specifiekere regels en veranderen niet mee. */
a { color: var(--ink); }
a:hover { color: #000000; }
img { max-width: 100%; height: auto; display: block; }
.container {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: 20px;
}
/* --- Toegankelijkheid: skiplink --- */
.skiplink {
position: absolute;
left: -9999px;
background: var(--blauw);
color: var(--wit);
padding: 12px 18px;
z-index: 100;
}
.skiplink:focus { left: 12px; top: 12px; }
/* Voor tekst die alleen voor schermlezers bedoeld is: visueel onzichtbaar,
maar wel voorleesbaar. Bijvoorbeeld een kopje boven een kaart die het al
via een logo-afbeelding laat zien. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 3px solid var(--blauw-accent);
outline-offset: 2px;
}
/* --- Header / navigatie --- */
.site-header {
background: var(--wit);
border-bottom: 1px solid var(--lijn);
position: sticky;
top: 0;
z-index: 50;
}
.site-header .container {
/* Header mag breder dan de 1100px van de rest van de site: het menu komt
zo dichter bij de rand van het scherm te staan, los van de leesbreedte
die de rest van de pagina's inhoud wél moet houden. */
max-width: 1500px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 14px;
flex-wrap: wrap;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
/* Hoogte stuurt de weergave; width/height in de HTML voorkomen dat de pagina
verspringt terwijl het logo nog laadt. */
.logo img {
height: 64px;
width: auto;
}
.logo-plaats {
font-size: 1.05rem;
font-weight: 700;
color: var(--tekst-zacht);
border-left: 2px solid var(--lijn);
padding-left: 12px;
white-space: nowrap;
}
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
/* Gewone schrijfwijze in het menu ("Abonnementen" i.p.v. "ABONNEMENTEN"): dat
leest voor iedereen net iets rustiger en vertrouwder, ook voor oudere
bezoekers — en dat past bij Optie1's toegankelijke, persoonlijke toon. De
ruimere padding is geen versiering: zo wordt elk menu-item ruim 44px hoog en
dus goed raakbaar op een telefoon. */
.site-nav a {
display: block;
padding: 10px 15px;
border-radius: var(--radius);
color: var(--tekst);
text-decoration: none;
font-family: var(--letter-nav);
font-weight: 700;
font-size: var(--fs-nav);
}
.site-nav a:hover { background: var(--blauw-zacht); color: var(--blauw-knop); }
.site-nav a[aria-current="page"] { background: var(--blauw-knop); color: var(--wit); }
/* "Reparaties" krijgt een vaste, uitnodigende knopkleur in de navigatie —
net als de blijvend groene "Reserveren"-knop bij restaurantpizzeriamario.nl.
Zelfde rood als de bestaande .knop-rood ("Reparatie Aanmelden" op de
homepage), dus geen nieuwe kleur in de huisstijl. Blijft ook zo bij hover
en op de eigen pagina (aria-current), in tegenstelling tot de andere
nav-items. */
.site-nav a.nav-reparaties,
.site-nav a.nav-reparaties:hover,
.site-nav a.nav-reparaties[aria-current="page"] {
background: #e60000;
color: var(--wit);
font-weight: 800;
}
.site-nav a.nav-reparaties:hover { background: #bd0000; }
/* --- Knoppen --- */
.knop {
display: inline-block;
padding: 13px 24px;
border-radius: var(--radius);
font-size: var(--fs-knop);
/* 600 in plaats van 700: op de nieuwe fontstapel oogt 700 wat schreeuwerig.
600 houdt de knop duidelijk maar rustig — passend bij de premium look. */
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
border: 2px solid transparent;
transition: background .15s ease, color .15s ease;
}
/* .knop-primair (lichtblauw vlak met donkerblauwe tekst) is hier weggehaald:
de laatste twee knoppen die hem gebruikten staan nu op .knop-blauw. Twee
knopstijlen die zo op elkaar lijken hield alleen maar de vraag levend welke
je waar moest pakken. Terughalen kan uit de Git-geschiedenis. */
.knop-secundair { background: var(--wit); color: var(--blauw); border-color: var(--blauw); }
.knop-secundair:hover { background: var(--blauw); color: var(--wit); }
.knop-whatsapp { background: #25d366; color: var(--wit); }
.knop-whatsapp:hover { background: #1eb455; color: var(--wit); }
/* Vol blauw vlak met witte tekst — dezelfde look als `.knop-secundair` in
hover, maar dan als vaste staat. Bewust --blauw-knop (#0077b3) en niet
--blauw (#008bcb): wit op --blauw haalt maar 3,8:1 en dat is te weinig voor
knoptekst van deze grootte. Op --blauw-knop is het 4,9:1. Het kleurverschil
is nauwelijks te zien, het leesbaarheidsverschil wel. */
.knop-blauw { background: var(--blauw-knop); color: var(--wit); }
.knop-blauw:hover { background: var(--blauw-donker); color: var(--wit); }
/* Merkrood van Vodafone (#E60000), hetzelfde rood als `.tijden .gesloten`
verderop, zodat de site niet twee net iets verschillende roden krijgt.
Wit op #E60000 haalt 4,8:1, boven de norm van 4,5:1 voor gewone tekst;
de hovertint #BD0000 is donkerder en haalt 6,6:1. */
.knop-rood { background: #e60000; color: var(--wit); }
.knop-rood:hover { background: #bd0000; color: var(--wit); }
/* Zwevende contactknop, rechtsonder in beeld. Blijft staan tijdens het
scrollen, als vaste snelkoppeling naar de contactpagina. Kleur en hover
komen van .knop-rood; deze regels doen alleen de plaatsing, de pilvorm en
de schaduw die hem van de pagina laat loskomen. Staat alleen op de
homepage. */
.knop-zwevend {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.knop-zwevend:hover,
.knop-zwevend:focus-visible { transform: translateY(-2px); }
.knop-zwevend:focus-visible { outline: 3px solid var(--wit); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.knop-zwevend:hover,
.knop-zwevend:focus-visible { transform: none; }
}
/* Op smalle schermen iets compacter, zodat hij niet te veel van het scherm
inneemt en geen invoerveld of knop onder zich bedekt. */
@media (max-width: 480px) {
.knop-zwevend { right: 12px; bottom: 12px; padding: 12px 18px; }
}
/* --- Ronde contactknoppen ---
Overgenomen van de coming soon-pagina. De iconen zijn inline SVG: geen
iconenlettertype en geen extra bestanden, zodat de site zonder externe
afhankelijkheden blijft werken. */
/* Gecentreerd boven de iconenrij. Beide staan in dezelfde container en zijn
allebei op het midden uitgelijnd, dus de kop komt precies boven de middelste
knop uit — ook als de rij op een smal scherm afbreekt. */
.contact-iconen {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(24px, 6vw, 56px);
}
.icoon-knop {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
}
.icoon-cirkel {
width: clamp(70px, 12vw, 90px);
height: clamp(70px, 12vw, 90px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
transition: transform .15s ease;
}
.icoon-knop:hover .icoon-cirkel,
.icoon-knop:focus-visible .icoon-cirkel { transform: scale(1.08); }
/* Beweging uitzetten voor wie daar in de systeeminstellingen om vraagt. */
@media (prefers-reduced-motion: reduce) {
.icoon-cirkel { transition: none; }
.icoon-knop:hover .icoon-cirkel { transform: none; }
}
.cirkel-whatsapp { background: #25d366; }
.cirkel-bellen { background: #29aae1; }
.cirkel-email { background: #e60000; }
.icoon-label {
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
color: var(--ink);
text-align: center;
}
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
/* --- Hero ---
De volle merkblauwe balk, zoals op optie1.nl. --merkblauw-diep en niet
--merkblauw: op de diepe tint haalt witte lopende tekst 4,7:1, ruim boven de
norm. Op de lichtere merkblauw zou de introtekst maar 3,5:1 halen. Eén tint
voor de hele balk oogt rustiger dan een kop in een net iets ander blauw.
Gecentreerd: zonder afbeelding ernaast leest links uitgelijnde tekst als een
halfleeg vlak; gecentreerd vult de hero zichzelf optisch op. */
.hero {
background: var(--merkblauw-diep);
border-bottom: 0;
padding-block: clamp(48px, 8vw, 88px);
text-align: center;
}
/* Standaard krijgt een hero-titel de paginatitel-maat (48px): rustig en
passend voor de secundaire pagina's (Contact, Over ons, Senioren …). De
homepage-hero hieronder gaat naar de volle hero-maat (60px). */
.hero :is(h1, h2.dia-kop) {
color: var(--wit);
max-width: 20ch;
margin-inline: auto;
/* Eigen variabele, al staat daar nu dezelfde letter in als in --letter.
Zo blijft het één plek om aan te draaien als de hero ooit een eigen
letter moet krijgen. */
font-family: var(--letter-hero);
font-size: var(--fs-pagina);
font-weight: var(--gewicht-hero);
line-height: var(--lh-hero);
letter-spacing: var(--ls-hero);
}
/* Alleen de homepage-hero (de slider zónder split-layout) krijgt de grootste
maat van de site: dat is de etalage. De reparatiepagina deelt de slider maar
heeft een split-layout en houdt daarom de rustiger paginatitel-maat. */
.hero-slider:not(.hero-split) :is(h1, h2.dia-kop) {
font-size: var(--fs-hero);
max-width: 16ch;
}
/* Tweekleurige kop op de homepage, nu op de blauwe balk: het sterke deel vol
wit, het zachte deel een lichte blauwtint zodat het onderscheid blijft
zonder de leesbaarheid te schaden. #cfe9f7 op --merkblauw-diep haalt 3,6:1,
ruim boven de 3:1 voor deze grote tekst. */
.hero :is(h1, h2.dia-kop) .kop-sterk { color: var(--wit); }
.hero :is(h1, h2.dia-kop) .kop-zacht { color: #cfe9f7; }
/* De twee delen staan op eigen regels zonder
: dat laat de tussenruimte
hieronder los instellen. Met een
zou die vastzitten aan line-height, en
dan schuift de regelafstand bínnen een deel net zo hard mee. In em, zodat de
ruimte meeschaalt met de kopgrootte. */
.hero :is(h1, h2.dia-kop) .kop-sterk,
.hero :is(h1, h2.dia-kop) .kop-zacht { display: block; }
.hero :is(h1, h2.dia-kop) .kop-zacht { margin-top: 0.28em; }
/* "Uw eerste keus" (de sterke regel van de eerste dia, het enige ) in
hoofdletters. Via text-transform blijft de bron gewoon "Uw eerste keus", zodat
schermlezers en zoekmachines de normale tekst houden. */
.hero h1 .kop-sterk { text-transform: uppercase; }
/* --- Hero-slider (alleen op de homepage) ---
De dia's liggen alle vier in dezelfde grid-cel, dus op elkaar. Daardoor is
het vak altijd zo hoog als de langste dia en springt de pagina niet op bij
het wisselen — de klassieke ergernis van een slider.
Verbergen gebeurt met visibility en niet met display: zo blijven de dia's
meetellen voor de hoogte, terwijl ze wél uit de voorleesvolgorde en uit de
tabvolgorde verdwijnen. Een verborgen dia mag geen link bevatten die je met
Tab kunt bereiken maar niet kunt zien. */
.dias { display: grid; }
.dia {
grid-area: 1 / 1;
visibility: hidden;
opacity: 0;
transition: opacity .45s ease;
}
.dia.is-actief {
visibility: visible;
opacity: 1;
}
/* Wie bewegende beelden heeft uitgezet in zijn systeeminstellingen, krijgt
geen overvloeier. Het script zet ook het automatisch doorschuiven uit. */
@media (prefers-reduced-motion: reduce) {
.dia { transition: none; }
}
.hero-knoppen { justify-content: center; margin-top: 26px; }
/* Witte knop op het blauwe vlak, met zwarte tekst: 21:1, het hoogste contrast
dat er te halen valt. Stond eerder op --blauw-knop (4,9:1). */
.knop-op-blauw {
background: var(--wit);
color: #000000;
}
.knop-op-blauw:hover {
background: var(--hero-vlak);
color: #000000;
}
/* --- Bediening onder de dia's --- */
.slider-bediening {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 32px;
}
.slider-bediening[hidden] { display: none; }
/* Ruim bemeten: 44px is de ondergrens voor iets wat je met een vinger moet
raken, en dit zijn de kleinste knoppen van de site. */
.slider-pijl,
.slider-pauze {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid transparent;
border-radius: 50%;
background: transparent;
color: var(--wit);
cursor: pointer;
}
.slider-pijl:hover,
.slider-pauze:hover { background: rgba(255, 255, 255, .18); }
/* Pauze- en afspeelicoon wisselen via een klasse op de knop. Het `hidden`-
attribuut werkt niet op elementen binnen een SVG, vandaar deze regels. */
.slider-pauze .icoon-afspelen { display: none; }
.slider-pauze.is-gepauzeerd .icoon-pauze { display: none; }
.slider-pauze.is-gepauzeerd .icoon-afspelen { display: inline; }
/* De stippen zitten in een eigen rij zodat de pijlen ernaast blijven staan,
ook als er ooit een dia bij komt. */
.slider-stippen {
display: flex;
align-items: center;
gap: 4px;
}
/* De stip zelf is klein, maar de knop eromheen is 44px: het raakvlak mag niet
zo klein zijn als wat je ziet. */
.slider-stip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.slider-stip::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
transition: background .2s ease, transform .2s ease;
}
.slider-stip:hover::before { background: rgba(255, 255, 255, .75); }
.slider-stip[aria-current="true"]::before {
background: var(--wit);
transform: scale(1.25);
}
/* Zichtbare focusrand: wie met Tab door de pagina gaat moet kunnen zien waar
hij is. Wit, want dit staat allemaal op het blauwe vlak. */
.slider-pijl:focus-visible,
.slider-pauze:focus-visible,
.slider-stip:focus-visible {
outline: 3px solid var(--wit);
outline-offset: 2px;
}
.hero p { font-size: var(--fs-lead); line-height: 1.5; max-width: 55ch; color: var(--wit); margin-inline: auto; }
.hero .knoppen { margin-top: 28px; justify-content: center; }
/* Bovenregel boven een hero-h1 (bijv. "iPad-reparatie in Hoogeveen"): kleiner
dan de H1, in de zachte blauwtint die elders in de hero al wordt gebruikt
(#cfe9f7 op --merkblauw-diep haalt 3,6:1, ruim boven de 3:1-norm voor deze
tekstgrootte). Hoofdletters + lichte letterafstand geven het label-gevoel
van een "eyebrow", los van de gewone lopende hero-tekst (.hero p). */
.hero p.hero-eyebrow {
display: block;
color: #cfe9f7;
font-size: var(--fs-klein);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
max-width: none;
margin-bottom: 10px;
}
/* Modifier: dezelfde bovenregel, maar visueel verborgen (standaard "visually
hidden"-techniek — niet display:none). De tekst blijft zo in de broncode
staan voor schermlezers en zoekmachines, maar toont niet aan bezoekers.
Alleen de iPhone-reparatiepagina gebruikt dit vandaag. */
.hero p.hero-eyebrow.hero-eyebrow--verborgen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Secties --- */
.sectie { padding-block: clamp(40px, 6vw, 72px); }
.sectie-wit { background: var(--wit); }
.sectie-kop { max-width: 60ch; margin-bottom: 32px; }
/* Introtekst onder een sectietitel: iets groter dan de lopende tekst (lead),
in de zachtere tekstkleur. Geeft lucht en leidt rustig het onderwerp in. */
.sectie-kop p,
.sectie-kop-midden p { font-size: var(--fs-lead); line-height: 1.55; color: var(--tekst-zacht); }
/* --- Kaartenraster --- */
.raster {
display: grid;
/* 230px zodat de vier dienstenkaartjes op een breed scherm op één rij passen
in plaats van dat er één alleen op de tweede rij achterblijft. */
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
}
/* Vast aantal kolommen in plaats van auto-fit. Voor de zes providerkaarten:
auto-fit maakt er op een breed scherm vier van, en dan blijven er twee
alleen op de tweede rij achter. Drie kolommen geeft 3 + 3, twee geeft
3 x 2 — bij elke breedte dus een volle rij. minmax(0, 1fr) en niet 1fr:
anders kan een brede afbeelding de kolom oprekken. */
.raster-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Vier kolommen voor een dichter productraster (toestellenoverzicht per merk,
naar het voorbeeld van grote telecomwinkels). Zelfde auto-fit-redenering
als raster-drie hierboven, maar dan met vier. */
.raster-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }
@media (max-width: 900px) {
.raster-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.raster-vier { grid-template-columns: minmax(0, 1fr); }
}
.kaart {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--schaduw);
}
.sectie-wit .kaart { background: var(--achtergrond); }
/* Klachtenkaarten op reparaties.html in de huisstijltint van de hero, zodat de
rij aansluit op het vlak erboven. Staat ná `.sectie-wit .kaart` omdat die
regel even specifiek is; de laatste wint dan. Tekstkleuren zijn nagemeten op
deze ondergrond: de kopjes halen 5,0:1 en de lopende tekst 11:1. */
.raster-klachten .kaart { background: var(--hero-vlak); text-align: center; }
.kaart h3 { color: var(--ink); }
/* De dienstkaarten zijn smal (±248px). Een lang woord als "Softwareproblemen"
liep bij de grote koptekst buiten de kaart. Een iets kleinere kop plus het
afbreken van te lange woorden houdt de tekst altijd binnen de box. */
.kaart-dienst h3 {
font-size: 1.2rem;
overflow-wrap: break-word;
hyphens: auto;
}
.kaart p:last-child { margin-bottom: 0; }
/* Stapkaarten van "Hoe het werkt": zelfde blauwe streepje boven als bij de
vinklijst- en openingstijdenkaart. */
.kaart-stap { border-top: 4px solid var(--blauw); }
/* --- Dienstkaarten ---
Kaart met een rond icoon erboven, alles gecentreerd. Het icoon is inline SVG,
net als bij de contactknoppen: geen iconenlettertype, geen extra bestanden. */
.kaart-dienst {
text-align: center;
/* Zelfde tijd en curve als de contactcirkels hierboven, zodat de site
overal even snel reageert. */
transition: transform .15s ease, box-shadow .15s ease;
}
/* In de huisstijltint, dezelfde als het herovlak. Even specifiek als de regel
`.sectie-wit .kaart` hierboven, anders wint die en blijft de kaart grijs. */
.sectie-wit .kaart-dienst { background: var(--hero-vlak); }
/* De kaart komt iets omhoog en de schaduw wordt dieper, alsof hij van de pagina
loskomt. `focus-within` staat erbij omdat de kaart een link bevat: wie met de
tab-toets navigeert krijgt dan hetzelfde signaal als met de muis. */
.kaart-dienst:hover,
.kaart-dienst:focus-within {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
/* Beweging uitzetten voor wie daar in de systeeminstellingen om vraagt. De
schaduw blijft wel: dat is geen beweging en houdt de kaart aanwijsbaar. */
/* "Veel voorkomende reparaties" op reparaties.html: dezelfde grijze kaart met
blauw streepje boven als de diensten-kaart op de homepage, in plaats van de
lichtblauwe .kaart-dienst-tint. Eigen klasse erbovenop, zodat de gedeelde
.kaart-dienst-stijl op de andere pagina's (batterij-vervangen,
scherm-vervangen, enz.) ongemoeid blijft. */
.sectie-wit .kaart-probleem { background: #f2f4f7; }
.kaart-probleem {
border-top: 4px solid var(--blauw);
/* Zelfde grote radius als .diensten-kaart: bij een kleine radius oogt de
rechte hoek waar de blauwe rand een andere kleur heeft als een naad. */
border-radius: 40px;
}
@media (prefers-reduced-motion: reduce) {
.kaart-dienst { transition: box-shadow .15s ease; }
.kaart-dienst:hover,
.kaart-dienst:focus-within { transform: none; }
}
/* Op deze tint haalt --blauw-knop nog maar 4,3:1 en zakt daarmee onder de
4,5:1 die gewone tekst nodig heeft. --blauw-donker haalt 6,6:1. */
.kaart-dienst a { color: var(--ink); }
.dienst-icoon {
width: 56px;
height: 56px;
border-radius: 50%;
/* Witte cirkel met een zwart symbool. Een subtiele rand tekent de witte
cirkel af, ook op de lichtblauwe tintkaarten (waar wit-op-tint anders te
zwak zou zijn). Op een eventueel blauw vlak valt de lichte rand weg. */
background: var(--wit);
border: 1px solid var(--lijn);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
/* De iconen dragen inline `fill="white"`; deze regel overschrijft dat naar
zwart (CSS wint van het presentatie-attribuut), zodat het symbool op de
witte cirkel leesbaar is. */
.dienst-icoon svg { fill: #000000; }
.sectie-kop-midden {
text-align: center;
max-width: 55ch;
margin: 0 auto 32px;
}
/* --- "Waarmee kunnen we u helpen?" (homepage) ---
Eigen, aan deze sectie gebonden klassen (diensten-*) in plaats van de
gedeelde .kaart-dienst/.dienst-icoon/.raster: die gedeelde klassen worden
ook gebruikt op zes andere pagina's (reparaties, batterij-vervangen,
scherm-vervangen, oplaadpoort-reparatie, data-overzetten,
tablet-reparatie) en mochten niet meeveranderen. Vervangt de lichtblauwe
kaarten door rustige grijze servicekaarten op een witte sectie-achtergrond
(zelfde grijstint als de openingstijden-kaart) — hetzelfde contrast-
principe als AMAC's kaarten, maar met de bestaande Optie1-kleuren. Geldt
ook voor reparaties.html en senioren.html, die dezelfde klassen
hergebruiken voor een consistente uitstraling. */
.diensten-sectie { background: var(--wit); }
.diensten-raster {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.diensten-kaart {
display: flex;
flex-direction: column;
background: #f2f4f7;
border: 1px solid var(--lijn);
border-top: 4px solid var(--blauw);
/* Zelfde grote radius als .openingstijden-kaart (contactpagina): bij 12px
was de curve zo klein dat de bovenhoek, waar de blauwe rand een andere
kleur heeft dan de zijranden, als een rechte naad oogde. Bij 40px domineert
de curve zichtbaar over die naad, zoals op de contactpagina. */
border-radius: 40px;
padding: 28px;
box-shadow: var(--schaduw);
transition: transform .15s ease, box-shadow .15s ease;
}
.diensten-kaart:hover,
.diensten-kaart:focus-within {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(25, 118, 210, .16);
}
@media (prefers-reduced-motion: reduce) {
.diensten-kaart { transition: box-shadow .15s ease; }
.diensten-kaart:hover,
.diensten-kaart:focus-within { transform: none; }
}
/* Zacht lichtblauw vierkant met afgeronde hoeken (geen volle cirkel): rustiger
en zakelijker dan de oude ronde iconen. currentColor + --blauw laat het
lijn-icoon in dezelfde tint als de bovenrand van de kaart mee-kleuren. */
.diensten-icoon {
width: 48px;
height: 48px;
border-radius: 10px;
background: var(--hero-vlak);
color: var(--blauw);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.diensten-icoon svg { width: 24px; height: 24px; }
/* Reparatie-icoon op de homepage in omgekeerde kleuren: zwart vlak, witte
steeksleutel — op verzoek, ter onderscheid van de andere twee (lichtblauw
vlak, blauw icoon). */
.diensten-icoon--zwart { background: #000000; color: var(--wit); }
.diensten-kaart h3 { margin-bottom: .4em; }
/* Voor kaarten zonder knop (bijv. "Welk toestel heeft u?" op reparaties.html
na het verwijderen van de knoppen): titel en tekst gecentreerd, anders
staan ze links uitgelijnd in een verder lege kaart. */
.diensten-kaart--centrum { align-items: center; text-align: center; }
/* De beschrijving vult de ruimte op, zodat de knop op alle drie de kaarten
op dezelfde hoogte staat, ook als de teksten iets in lengte verschillen. */
.diensten-kaart p { flex: 1; color: var(--tekst-zacht); }
.diensten-kaart p a { color: var(--ink); }
.diensten-link-zonder-streep { text-decoration: none; }
.diensten-knop {
align-self: center;
min-height: 44px;
margin-top: 8px;
}
/* Voor langere knopteksten (bijv. "iPhone reparatie in Hoogeveen"): volle
kaartbreedte in plaats van content-breedte, zodat de tekst rustig op één
of twee gelijke regels past in plaats van willekeurig af te breken. Een
vaste hoogte + gecentreerde tekst houdt alle knoppen op dezelfde rij even
hoog, ook als de ene tekst wél en de andere niet afbreekt (bijv. "iPad
reparatie" past op één regel, "Samsung reparatie" op twee). */
.diensten-knop--breed {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
/* 86px dekt het langste label (bijv. "Samsung reparatie") op twee regels in
de vier-koloms variant; kortere labels worden door
align-items: center netjes verticaal gecentreerd binnen dezelfde hoogte,
zodat alle knoppen op een rij altijd even hoog blijven. */
min-height: 86px;
}
@media (max-width: 860px) {
.diensten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.diensten-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Modifier voor secties met vier kaarten in plaats van drie (bijv. "Welk
toestel heeft u?" op reparaties.html: iPhone/Samsung/iPad/Tablet). Alleen
op ruime schermen vier naast elkaar; de 860px/560px-afbraak hierboven
geldt via de gedeelde `.diensten-raster`-klasse al net zo goed. */
@media (min-width: 1000px) {
.diensten-raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Providerkaarten blijven wit, ook in een witte sectie. De algemene regel
`.sectie-wit .kaart` maakt kaarten daar juist grijs, maar dat werkt hier
averechts: hollandsnieuwe is een JPG en heeft dus een witte achtergrond
die je niet weg kunt maken. Op een grijze kaart tekent die zich af als een
wit blok. Rand én schaduw zijn er bewust af: een vlakke, rustige weergave
waarbij alleen het logo en de tekst op wit staan. */
.sectie-wit .kaart-provider { background: var(--wit); border: 0; box-shadow: none; }
/* Voetnoot onder de providerkaarten: kleiner en zachter dan lopende tekst,
zodat hij duidelijk als kanttekening leest en niet als vervolgalinea. */
.providers-voetnoot {
margin-top: 28px;
font-size: var(--fs-klein);
color: var(--tekst-zacht);
}
/* --- Providerkaarten (abonnementenpagina) ---
Het merkvlak heeft een vaste hoogte, zodat de kaarten even hoog blijven of er
nu tekst of straks een logo in staat. Wisselt de inhoud naar een ![]()
, dan
schaalt die mee binnen dezelfde ruimte en verspringt de opmaak niet. */
.provider-merk {
display: flex;
align-items: center;
justify-content: center;
/* Vaste hoogte voor alle zes, zodat de koppen van de kaarten op één lijn
blijven. De aangeleverde logo's verschillen sterk in verhouding — van
vierkant (Ben, Odido, Lebara) tot liggend (KPN, Vodafone) — en zonder
vaste hoogte zou elke kaart een andere maat krijgen. */
height: 120px;
margin: 0 0 14px;
padding: 6px;
/* Geen eigen vlak en geen rand: het logo staat direct op de kaart. Een kader
om een logo dat zelf al een gekleurd vlak heeft (KPN, Ben, Odido) levert
een rand om een rand op. De vaste hoogte hierboven houdt de kaarten
alsnog even hoog. */
/* Opmaak voor de alt-tekst, zichtbaar als een afbeelding niet laadt. */
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
}
/* `contain` en niet `cover`: bijsnijden zou bij een liggend logo als KPN de
merknaam half wegsnijden. Zo blijft elk logo altijd volledig zichtbaar. */
.provider-merk img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* Losse kaart onder het raster: valt op als afsluiter en niet als zevende
provider. Grijze kaart met een blauwe rand, zodat hij opvalt zonder de
lichtblauwe vlaktint te gebruiken. */
.kaart-overstap {
margin-top: 22px;
background: #f2f4f7;
border: 2px solid var(--blauw);
}
/* Nodig omdat `.sectie-wit .kaart` twee klassen telt en `.kaart-overstap`
maar één: die regel is specifieker en wint dus altijd, ongeacht de volgorde
in dit bestand. Deze selector is even specifiek én staat erna, en houdt de
kaart daarmee grijs met een blauwe rand in een witte sectie. */
.sectie-wit .kaart-overstap { background: #f2f4f7; }
/* --- Openingstijden --- */
.tijden {
width: 100%;
border-collapse: collapse;
max-width: var(--tijden-max);
}
/* Kop gecentreerd bóven de tabel. Dezelfde max-width als .tijden zelf: zonder
die begrenzing centreert de kop over de hele kolom en staat hij scheef
boven een tabel die smaller is. */
.tijden-kop {
max-width: var(--tijden-max);
text-align: center;
}
.tijden th, .tijden td {
text-align: left;
padding: 9px 4px;
border-bottom: 1px solid var(--lijn);
}
.tijden th { font-weight: 600; }
/* Zelfde gewicht én kleur als de dagen ernaast, zodat de twee kolommen even
zwaar wegen. `.tijden .gesloten` verderop is specifieker en houdt zijn rood. */
.tijden td { text-align: right; color: var(--tekst); font-weight: 600; }
.tijden .gesloten { color: #e60000; }
/* --- "Openingstijden"-kaart op contact.html ---
Rustige, sterk afgeronde kaart (geïnspireerd op AMAC's openingstijdenkaart,
in een eigen uitvoering met de Optie1-kleuren): een zeer lichte neutrale
achtergrond in plaats van een vol blauw vlak, met alleen een subtiel blauw
accent bovenaan. Eigen klassen (openingstijden-*), zodat de oude
.tijden-stijl hierboven — nergens anders gebruikt, maar met rust gelaten —
niet meeverandert. */
.openingstijden-kaart {
max-width: 500px;
/* .kolommen (de omringende grid, ook gebruikt op andere pagina's) heeft
align-items: start, waardoor grid-items normaal hun eigen inhoudshoogte
aanhouden. align-self hier overschrijft dat alleen voor deze kaart, zodat
de "Gegevens"- en "Openingstijden"-kaart naast elkaar even hoog worden
(gelijk aan de hoogste van de twee) zonder .kolommen zelf aan te raken. */
align-self: stretch;
/* "Gegevens" is van de drie kaarten van nature net zo hoog als de rij zelf
(544px) — zonder deze extra ruimte is er dus geen "over" om de laatste
regel via margin-top: auto naar de onderkant te duwen (zie
.openingstijden-kaart--onder-uitgelijnd). Iets hoger dan de langste
natuurlijke inhoud geeft alle kaarten wat ademruimte. */
min-height: 620px;
background: #f2f4f7;
color: #1d1d1f;
border-top: 4px solid var(--blauw);
border-radius: 40px;
padding: clamp(34px, 3vw, 40px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
/* var(--letter) is Manrope (de sitebrede letter, zie :root) met dezelfde
systeem-fallback als de gevraagde Inter-stapel. Inter is nergens op de
site gehost; hardcoderen zou hier alleen de geladen letter negeren en
stil terugvallen op het systeemlettertype — dat wijkt juist af van de
rest van de pagina in plaats van hem te laten aansluiten. */
font-family: var(--letter);
}
.openingstijden-kaart h2 {
font-size: clamp(28px, 3vw, 34px);
font-weight: 700;
line-height: 1.15;
margin: 0 0 20px;
color: #1d1d1f;
}
.openingstijden-tabel { width: 100%; border-collapse: collapse; }
/* Elke rij als eigen tweekoloms grid (dag | tijd) in plaats van een
tabelbrede kolomindeling: dat houdt de tijden rechts netjes onder elkaar,
ook al staat de tabel zelf smaller dan zijn kaart. Geen randen tussen de
rijen — alleen verticale ruimte scheidt de dagen. */
.openingstijden-tabel tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 16px;
padding-block: 7px;
}
.openingstijden-tabel th,
.openingstijden-tabel td {
padding: 0;
border: 0;
font-size: 17px;
line-height: 1.5;
}
.openingstijden-tabel th { text-align: left; font-weight: 700; }
.openingstijden-tabel td {
text-align: right;
font-weight: 500;
color: #1d1d1f;
/* Cijfers op vaste breedte, zodat de dubbele punt en de streep tussen begin-
en eindtijd bij elke rij op precies dezelfde plek vallen. */
font-variant-numeric: tabular-nums;
}
.openingstijden-tabel .gesloten { color: #c62828; font-weight: 600; }
.openingstijden-noot {
font-size: 15px;
color: #62666d;
margin: 20px 0 0;
}
/* "Gegevens" en "Openingstijden" zijn (via align-self: stretch) even hoog
als de langste kaart in de rij, maar hun eigen inhoud is verschillend lang
— zonder ingrijpen blijft de laatste regel dan op verschillende hoogte
hangen. Deze modifier maakt de kaart een flex-kolom en duwt alleen het
laatste kind-element (de feestdagen-noot / de e-mailregel) naar de
onderkant, zodat beide op dezelfde hoogte uitkomen. De routekaart met de
ingesloten Google Maps krijgt deze klasse niet — die heeft al zijn eigen,
volledig gevulde opmaak. */
.openingstijden-kaart--onder-uitgelijnd {
display: flex;
flex-direction: column;
}
.openingstijden-kaart--onder-uitgelijnd > :last-child {
margin-top: auto;
/* .gegevens p heeft standaard margin-bottom: 1.5em; zonder deze reset
kwam dat laatste stukje ruimte er nog steeds onder te staan en sloot de
regel niet gelijk aan de .openingstijden-noot ernaast (die al op 0 stond). */
margin-bottom: 0;
}
@media (max-width: 640px) {
.openingstijden-kaart { border-radius: 28px; padding: 24px; }
.openingstijden-tabel th,
.openingstijden-tabel td { font-size: 16px; }
}
/* Zelfde grijze kaartstijl als .openingstijden-kaart (contactpagina), maar
zonder de vaste breedte/hoogte die daar dient om naast een tweede kaart
even hoog te blijven — hier staat de kaart los in een enkele kolom. */
.vinklijst-kaart {
background: #f2f4f7;
color: #1d1d1f;
border-top: 4px solid var(--blauw);
border-radius: 40px;
padding: clamp(34px, 3vw, 40px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.vinklijst-kaart h2 {
/* Bewust een lage vw-factor: bij ~640-750px breed staat de kaart kort na
de kolommen-omslag (.kolommen, minmax(280px,1fr)) op zijn smalst, smaller
zelfs dan op mobiel. Deze curve blijft op elke breedte onder wat op dat
smalste punt past, zodat de kop altijd op één regel blijft staan. */
font-size: clamp(19px, 10px + 1.6vw, 30px);
font-weight: 700;
line-height: 1.15;
margin: 0 0 20px;
color: #1d1d1f;
white-space: nowrap;
}
@media (max-width: 640px) {
.vinklijst-kaart { border-radius: 28px; padding: 24px; }
}
/* Routekaart met live Google Maps-insluiting: de kaart vult de hele box,
randje tot randje. Alleen déze kaartvariant krijgt padding: 0 en
overflow: hidden (zodat de rechthoekige iframe toch de afgeronde hoeken
volgt) — de andere twee kaarten behouden hun gewone binnenruimte. */
.openingstijden-kaart--kaart-route {
position: relative;
padding: 0;
overflow: hidden;
}
.route-kaart {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
border: 0;
}
/* De H2 blijft in de broncode voor de kopvolgorde en schermlezers, maar is
visueel verborgen: de kaart moet de hele box vullen, zonder titel erboven.
Standaard "visually hidden"-techniek, geen display:none. */
.route-kaart-titel {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Kleine, ronde knop over de kaart heen in plaats van een aparte knoprij
eronder: zo blijft er een toegankelijk tekstalternatief zonder dat de
kaart ruimte hoeft af te staan. */
.route-kaart-link {
position: absolute;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
background: var(--blauw-knop);
color: var(--wit);
font-weight: 600;
font-size: 0.9rem;
padding: 10px 16px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.route-kaart-link:hover { background: var(--blauw-donker); }
/* --- Lijst met vinkjes --- */
.vinklijst { list-style: none; padding: 0; margin: 0 0 1em; }
.vinklijst li {
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
.vinklijst li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--blauw-accent);
font-weight: 800;
}
/* Pagina waarvan de inhoud volledig wit is (afspraak.html, reparaties.html). De footer
houdt `margin-top: 40px`; in die strook kijk je door naar de paginakleur.
Staat die op het gebruikelijke grijs, dan zie je vlak boven de footer een
grijze band onder een verder witte pagina. Vandaar hier wit. */
.pagina-wit { background: var(--wit); }
/* --- Formulier (afspraak.html) ---
Eén kolom, ook op een breed scherm: velden naast elkaar zetten leest
slechter en levert op een telefoon toch weer één kolom op. De maat is
afgestemd op de langste invoer (merk en model), niet op de paginabreedte. */
.formulier {
max-width: 34rem;
margin-inline: auto;
}
.veld { margin-bottom: 20px; }
.veld label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: var(--ink);
}
.veld-optioneel { font-weight: 400; color: var(--tekst-zacht); }
/* Uitleg onder een invoerveld. Bewust bijna zo groot als de lopende tekst en
in de gewone tekstkleur: dit is geen kleine lettertjes maar informatie die
iemand nodig heeft om het veld goed in te vullen. Op .9rem in --tekst-zacht
las het als een voetnoot die je mocht overslaan. */
.veld-uitleg {
font-size: 1.05rem;
color: var(--tekst);
margin: 8px 0 0;
}
/* 16px is hier geen smaakkwestie: op iOS zoomt Safari automatisch in zodra
een invoerveld kleiner dan 16px scherpstelt, en dan springt de hele
pagina scheef. */
.veld input,
.veld select,
.veld textarea {
width: 100%;
font: inherit;
font-size: 16px;
padding: 12px 14px;
border: 2px solid var(--lijn);
border-radius: var(--radius);
background: var(--wit);
color: var(--tekst);
}
.veld textarea { resize: vertical; min-height: 120px; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus { border-color: var(--blauw); }
/* Staat de lijst met tijden nog uit, dan hoort hij daar ook uit te zien.
Zonder dit verschil lijkt het veld gewoon leeg en gaan mensen erop klikken. */
.veld select:disabled {
background: var(--achtergrond);
color: var(--tekst-zacht);
cursor: not-allowed;
}
/* --- Toestelkaarten op de webshoppagina ---
Opbouw en verhoudingen zijn afgekeken van de moedersite optie1.nl: merk
groot en blauw, model kleiner en grijs eronder, dan de foto, dan de
gegevens, en onderaan de knop. De kleuren komen uit onze eigen variabelen
en niet uit hun stylesheet, zodat deze pagina bij de rest van de site blijft
passen en niet los gaat zweven.
Flexkolom zodat de reserveerknop onderaan uitlijnt, ook als de ene kaart een
langere modelnaam heeft dan de andere. Zonder dit zweeft elke knop op een
eigen hoogte en oogt de rij rommelig. */
.kaart-toestel {
display: flex;
flex-direction: column;
text-align: center;
/* Ruimere ronding dan de andere kaarten, zoals op optie1.nl. */
border-radius: 22px;
}
/* De laatste alinea bevat de knop. `margin-top: auto` duwt die naar beneden;
de ruimte die overblijft komt dus bóven de knop terecht. */
.kaart-toestel > p:last-child {
margin-top: auto;
margin-bottom: 0;
padding-top: 16px;
}
/* Merk en model staan samen in één h3: een kop hoort het product te benoemen,
en een schermlezer leest zo "Samsung Galaxy S26" in één keer voor. Het
verschil in grootte en kleur is puur opmaak. */
.toestel-naam { margin-bottom: 14px; }
.toestel-merk,
.toestel-model { display: block; }
.toestel-merk {
font-size: 1.4rem;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.toestel-model {
font-size: 1.05rem;
font-weight: 400;
color: var(--tekst-zacht);
margin-top: 2px;
}
/* Vak waar de productfoto komt. Een vaste verhouding houdt de kaarten even
hoog zolang de foto's er nog niet zijn, zodat de rij nu al klopt. Zodra er
een ![]()
in staat, valt de stippellijn en de tekst vanzelf weg. */
.toestel-foto {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
margin-bottom: 14px;
border: 2px dashed var(--lijn);
border-radius: var(--radius);
color: var(--tekst-zacht);
font-size: .85rem;
}
.toestel-foto img {
width: 100%;
height: 100%;
object-fit: contain;
}
.toestel-foto:has(img) {
border: 0;
}
/* Fotoslider: staan er meerdere ![]()
's in één .toestel-foto, dan worden ze
op elkaar gestapeld en zet toestel-slider.js er twee pijlknoppen bij
waarmee de bezoeker zelf wisselt. Bij precies één foto verandert er niets
— position: static houdt het grid-centreren van hierboven dan intact. */
.toestel-foto:has(img + img) {
position: relative;
}
.toestel-foto:has(img + img) img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .3s ease;
}
.toestel-foto:has(img + img) img.foto-actief {
opacity: 1;
}
/* Pijlknoppen die toestel-slider.js toevoegt bij meerdere foto's. */
.foto-pijl {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .85);
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: var(--ink);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.foto-pijl:hover { background: var(--wit); }
.foto-pijl-vorige { left: -14px; }
.foto-pijl-volgende { right: -14px; }
.toestel-specs {
font-size: var(--fs-klein);
color: var(--tekst-zacht);
margin-bottom: 10px;
}
.toestel-prijs {
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 12px;
}
.toestel-vraag {
font-weight: 700;
color: var(--ink);
margin-bottom: 0;
}
/* De knop vult de kaart in de breedte: zes kaarten naast elkaar met elk een
even brede knop leest rustiger dan zes knoppen op modelnaamlengte. */
.kaart-toestel .knop-reserveer { width: 100%; }
/* De twee knoppen onder het afspraakformulier even breed, naast elkaar en
samen gecentreerd. `flex: 1 1 12rem` doet het werk: gelijke basisbreedte
plus gelijke groei betekent dat ze even breed eindigen, hoe lang de tekst
erin ook is. Anders wordt de knop met het langste opschrift de breedste en
staat het paar scheef onder het formulier.
De 12rem is ook de omslag naar onder elkaar: passen ze samen niet meer op
een regel, dan breekt de rij en neemt elke knop zijn eigen regel. Op een
telefoon hoeft daar dus geen media query voor. */
.knoppen-formulier { justify-content: center; }
.knoppen-formulier .knop {
flex: 1 1 12rem;
text-align: center;
}
/* --- Dag en tijd op het afspraakformulier ---
Een fieldset omdat de twee velden samen één vraag beantwoorden; een
schermlezer noemt de legend dan bij allebei. De browserstandaard voor
fieldset (rand, eigen marges) staat uit, zodat het blok er hetzelfde
uitziet als de andere velden eromheen. */
.veld-groep {
border: 0;
padding: 0;
margin-inline: 0;
min-width: 0;
}
.veld-groep legend {
padding: 0;
font-weight: 600;
margin-bottom: 6px;
color: var(--ink);
}
/* De twee velden naast elkaar, en onder elkaar zodra dat niet meer past.
Geen media query nodig: onder de 22rem valt de tweede kolom vanzelf weg. */
.veld-duo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 14px;
}
/* Kleiner dan de legend erboven: dit zijn onderdelen van die ene vraag, geen
losse vragen. */
.veld-duo label {
display: block;
font-weight: 400;
font-size: .9rem;
margin-bottom: 4px;
color: var(--tekst-zacht);
}
/* Buiten beeld maar wél invulbaar voor een bot. Bewust niet `display: none`
of `hidden`: veel bots slaan velden over die echt verborgen zijn, en dan
vangt de honeypot niets. */
.honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formulier-fout {
background: #fdecea;
border-left: 5px solid #e60000;
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 20px;
color: #7a1a14;
font-weight: 600;
}
/* Toelichting onder de verzendknoppen. Zelfde maat en kleur als .veld-uitleg:
hier staat wat er gebeurt als je op de knop drukt en wat er met je gegevens
gebeurt, en juist dat moet iemand kunnen lezen voordat hij klikt. */
.formulier-klein {
font-size: 1.05rem;
color: var(--tekst);
margin-top: 18px;
}
.formulier-gelukt {
max-width: 34rem;
margin-inline: auto;
background: var(--blauw-zacht);
border-left: 5px solid var(--blauw-accent);
border-radius: var(--radius);
padding: 28px;
}
.formulier-gelukt h3 { margin-top: 0; }
.formulier-gelukt p:last-child { margin-bottom: 0; }
/* Korte uitleg boven het aanmeldformulier: hoe de aanvraag verloopt. */
.aanvraag-uitleg {
max-width: 34rem;
margin: 0 auto 32px;
background: var(--blauw-zacht);
border-radius: var(--radius);
padding: 18px 20px;
}
.aanvraag-uitleg p { margin: 0; }
/* Samenvatting van het bij de reparatiekeuze gekozen toestel + reparatie. */
.aanvraag-keuze {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 30px;
padding: 14px 18px;
background: var(--wit);
border: 2px solid #dddddd;
border-radius: var(--radius);
}
.aanvraag-keuze-kop {
display: block;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--tekst-zacht);
margin-bottom: 2px;
}
.aanvraag-keuze-waarde { display: block; font-size: 1.1rem; }
.aanvraag-keuze-wijzig { flex: none; font-size: .9rem; }
/* --- Twee kolommen --- */
.kolommen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 36px;
align-items: start;
}
/* De contactpagina heeft drie kaarten (Optie1 Hoogeveen, Openingstijden,
Route) i.p.v. de gewone twee-koloms indeling elders — die mag breder
uitwaaieren en meer lucht tussen de kaarten hebben. Scoped via :has(), dus
.container en .kolommen op andere pagina's (index, over-ons, senioren)
blijven ongewijzigd. */
.container:has(.openingstijden-kaart) { max-width: 1500px; }
.kolommen:has(.openingstijden-kaart) { gap: 56px; }
/* --- Contactgegevens op contact.html ---
Bewust groter dan de lopende tekst elders: dit is waarvoor mensen de pagina
openen, en een adres of telefoonnummer moet je in één oogopslag kunnen
overnemen — vaak terwijl je al aan het bellen bent. */
.gegevens p {
font-size: 1.15rem;
line-height: 1.7;
margin-bottom: 1.5em;
/* Zwart in plaats van de --tekst-grijs (#333) van de rest van de site.
Op wit is dat 21:1 contrast, het maximum dat er te halen valt. */
color: #000000;
}
/* Ook de links zwart. Ze blijven onderstreept, en dat is wat een link
herkenbaar maakt — kleur alleen is nooit genoeg, want daar heeft iemand die
kleuren slecht onderscheidt niets aan. Let op: dit geldt alleen binnen dit
blok; elders op de site blijven links blauw. */
.gegevens a {
color: #000000;
text-decoration: underline;
}
.gegevens a:hover { color: #000000; }
/* Het label op een eigen regel, met lucht eronder. Zo vallen de vier blokjes
uit elkaar in plaats van één grijze massa te vormen. De
die hier eerst
achter stond is uit de HTML gehaald; die zou nu een lege regel geven. */
.gegevens strong {
display: block;
margin-bottom: 1px;
}
/* Het telefoonnummer is de belangrijkste regel van de pagina: de meeste
klanten bellen liever dan dat ze een formulier invullen. */
.gegevens .nummer {
font-size: 1.35rem;
font-weight: 700;
}
/* --- Oproepblok --- */
.oproep {
background: var(--wit);
border: 1px solid var(--lijn);
/* De blauwe accentbalk links blijft; die houdt het blok bij de merkkleur.
Een dunne rand eromheen erbij, zodat het witte blok zich losmaakt van de
grijze sectie eronder. */
border-left: 5px solid var(--blauw-accent);
border-radius: var(--radius);
padding: 28px;
}
.oproep h2 { margin-top: 0; }
/* --- Prijstabel --- */
.prijzen { width: 100%; border-collapse: collapse; }
.prijzen th, .prijzen td {
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid var(--lijn);
}
.prijzen thead th { background: var(--blauw-zacht); color: var(--ink); }
/* --- Footer ---
Dezelfde tint als het herovlak, zodat pagina-boven en pagina-onder op elkaar
rijmen. De tekst stond hier al donker; op deze lichtere achtergrond wordt dat
alleen maar beter leesbaar. De randlijn scheidt de footer van de body: die
twee kleuren liggen dicht bij elkaar en lopen anders in elkaar over. */
.site-footer {
/* Zelfde merkblauw als de hero en het balkje bovenaan, zodat de pagina
boven en onder in dezelfde kleur wordt afgesloten. Witte tekst haalt op
deze tint 4,7:1. */
background: var(--merkblauw-diep);
border-top: 0;
color: var(--wit);
/* Smalle balk: er staat alleen nog het webadres in. */
padding-block: 10px;
margin-top: 40px;
font-size: var(--fs-footer);
}
.site-footer h3 { color: var(--wit); font-size: 1rem; }
.site-footer a { color: var(--wit); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
}
/* Het webadres tot aan de echte rechterrand van de blauwe balk. De footer laat
daarvoor de contentbreedte van 1100px los: anders stopt de tekst bij die
grens en blijft er op brede schermen blauw naast staan. De padding van
.container (20px) houdt hem net van de rand af. */
.site-footer .container { max-width: none; }
.copyright {
margin: 0;
text-align: right;
font-size: var(--fs-footer);
color: var(--wit);
}
/* --- Invulmarkering: MOET vervangen worden voor livegang --- */
.invullen {
background: #fff3cd;
color: #7a5b00;
border: 1px dashed #b58900;
padding: 2px 7px;
border-radius: 4px;
font-weight: 700;
font-size: .9em;
}
/* --- Providerbalk --- */
.providerbalk {
background: var(--wit);
border-bottom: 1px solid var(--lijn);
padding-block: 22px;
}
.providerbalk .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 16px;
}
.providerbalk p {
margin: 0;
font-weight: 600;
color: var(--tekst-zacht);
}
.provider {
background: var(--blauw-zacht);
border: 1px solid #cfe9f7;
border-radius: 999px;
padding: 7px 18px;
font-weight: 600;
color: var(--ink);
font-size: var(--fs-klein);
}
/* Merken op de homepage: dezelfde pil-vorm als .provider, maar als lijst zodat
het ook zonder opmaak een nette opsomming blijft. */
.merkenlijst {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Kaart die de seniorentoestellen apart licht uit. Vol merkblauw met witte
tekst, zodat hij op de witte sectie eruit springt. --merkblauw-diep en niet
--merkblauw: op de diepe tint haalt de witte lopende tekst 4,7:1, ruim boven
de leesnorm. Met de sectie-prefix omdat `.sectie-wit .kaart` twee klassen
telt en die anders wint (net als bij .kaart-dienst en .kaart-provider). */
.sectie-wit .kaart-senioren {
background: var(--wit);
border-color: var(--lijn);
}
.kaart-senioren + .kaart-senioren { margin-top: 16px; }
/* Logo's van de gevoerde merken, in een witte kaart. */
.merklogos {
list-style: none;
margin: 0;
padding: 20px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-items: center;
gap: 28px 20px;
}
.merklogos img {
height: 56px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* --- Uitgelichte band (donkere sectie voor ritme in de pagina) --- */
.band {
background: var(--blauw-donker);
color: #dbeef8;
padding-block: clamp(40px, 6vw, 64px);
}
.band h2, .band h3 { color: var(--wit); }
.band .kaart {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .18);
box-shadow: none;
color: #dbeef8;
}
.band .kaart h3 { color: var(--wit); }
.stappen {
list-style: none;
counter-reset: stap;
padding: 0;
margin: 0;
}
.stappen li {
counter-increment: stap;
position: relative;
padding-left: 46px;
margin-bottom: 18px;
}
.stappen li::before {
content: counter(stap);
position: absolute;
left: 0;
top: -1px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--blauw-accent);
color: #04283a;
font-weight: 800;
display: grid;
place-items: center;
}
/* --- Menuknop voor smalle schermen ---
De knop staat in de HTML op hidden en wordt pas door site.js zichtbaar
gemaakt. Zo blijft het menu zonder JavaScript gewoon volledig zichtbaar
in plaats van onbereikbaar achter een knop die niets doet. */
.menu-knop {
display: none;
align-items: center;
gap: 9px;
background: var(--wit);
border: 2px solid var(--blauw-knop);
color: var(--blauw-knop);
border-radius: var(--radius);
padding: 10px 16px;
font: inherit;
font-weight: 700;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
/* Minimaal 44px hoog: kleiner is lastig te raken met een vinger. */
min-height: 44px;
}
.menu-knop:hover { background: var(--blauw-knop); color: var(--wit); }
.menu-streepjes { display: grid; gap: 4px; }
.menu-streepjes span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
}
@media (max-width: 992px) {
/* Omslagpunt naar het hamburger-menu. Op 992px in plaats van 860px: de
navigatie staat nu op 18px (grotere, rustiger letter) en heeft samen met
het logo ruim 990px nodig om op één regel te passen. Zou het menu pas bij
860px inklappen, dan viel de navigatie er net boven op een tweede regel —
een rommelige, tweeregelige header. Nu blijft de kop boven 992px strak op
één regel en verschijnt eronder het nette uitklapmenu.
Blijft `wrap` (net als op breed scherm). Met `nowrap` kan het uitgeklapte
menu niet naar een eigen regel: het blijft dan naast de knop staan op
dezelfde rij en drukt het logo samen tot een paar pixels breed. De
`width: 100%` en `order: 3` op .site-nav hieronder rekenen op wrap. */
.site-header .container {
justify-content: space-between;
gap: 12px;
}
.menu-knop[hidden] { display: none; }
.menu-knop { display: inline-flex; }
/* Alleen inklappen als het script draait; anders blijft het menu staan. */
.js-menu .site-nav {
display: none;
width: 100%;
order: 3;
}
.js-menu .site-nav.is-open { display: block; }
.js-menu .site-nav ul {
flex-direction: column;
gap: 2px;
padding-top: 10px;
border-top: 1px solid var(--lijn);
margin-top: 12px;
}
.js-menu .site-nav a {
padding: 13px 14px;
font-size: var(--fs-nav);
}
.logo img { height: 52px; }
.logo-plaats { font-size: .95rem; padding-left: 10px; }
/* Links in de kaartjes zijn als tekstregel maar ~22px hoog. Met extra
ruimte eromheen worden ze 44px en dus met een vinger te raken. */
.kaart a {
display: inline-block;
padding-block: 11px;
}
.raster-drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
/* Lopende tekst blijft ook op de telefoon de volle 18px (--fs-body): rustig
en goed leesbaar, ook voor de seniorendoelgroep. De koppen schalen al
vloeiend mee via clamp(). */
.knoppen .knop { flex: 1 1 auto; text-align: center; }
.providerbalk p { width: 100%; text-align: center; }
.logo img { height: 42px; }
.logo { gap: 8px; }
.logo-plaats { font-size: .88rem; padding-left: 8px; }
.kaart { padding: 20px; }
.oproep { padding: 22px; }
.stappen li { padding-left: 42px; }
/* Tabellen mogen nooit de pagina breder maken dan het scherm. */
.tijden, .prijzen { display: block; overflow-x: auto; }
.raster-drie { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
/* Op de smalste toestellen wordt "Hoogeveen" naast het logo te krap. */
.logo-plaats { display: none; }
}
/* ============================================================
Reparatiepagina — herontwerp
Een visuele, uitnodigende opzet bovenop de bestaande bouwstenen.
Alle kleuren komen uit de variabelen bovenin; er komt geen externe
afbeelding en geen script bij, in lijn met de rest van de site.
============================================================ */
/* Lichtblauwe sectie, dezelfde tint als het herovlak. Voor een rustig
gekleurd blok tussen twee witte secties, zodat de pagina ademt. */
.sectie-tint { background: var(--hero-vlak); }
/* --- 1. Hero met illustratie ernaast ---
De standaard-hero is gecentreerd (zie `.hero`). Hier staat links de
tekst en rechts de illustratie. Onder 760px klapt het naar één kolom
en centreert de tekst weer, zodat het op een telefoon net zo rustig
oogt als de hero's op de andere pagina's. */
/* Links de tekst, rechts de illustratie, en de knop op een eigen rij
eronder die over de volle breedte loopt. Zo staat de knop gecentreerd
ten opzichte van de hele pagina, niet alleen onder de tekstkolom. */
.hero-split .container {
display: grid;
grid-template-columns: 1.1fr .9fr;
grid-template-areas:
"tekst beeld"
"knop knop";
gap: clamp(24px, 5vw, 56px);
align-items: center;
text-align: left;
}
.hero-tekst { grid-area: tekst; }
.hero-beeld { grid-area: beeld; }
/* De algemene hero centreert h1 en p met auto-marges; hier moeten ze
juist links aansluiten. */
.hero-split h1,
.hero-split p { margin-inline: 0; max-width: 22ch; }
.hero-split p { max-width: 46ch; }
/* De knop over de volle breedte gecentreerd. `margin-top: 0` haalt de
standaardmarge van `.hero .knoppen` weg; de rij-gap zorgt al voor ruimte. */
.hero-knoppen {
grid-area: knop;
justify-content: center;
margin-top: 0;
}
/* Vinklijst op de blauwe hero: witte tekst in plaats van de donkere
tekstkleur van de gewone `.vinklijst`, anders valt hij weg op het blauw.
Het vinkje krijgt een lichte tint; die is decoratief. */
.hero-usp {
list-style: none;
padding: 0;
margin: 24px 0 4px;
display: grid;
gap: 9px;
}
.hero-usp li {
position: relative;
padding-left: 30px;
color: var(--wit);
font-weight: 600;
}
.hero-usp li::before {
content: "✓";
position: absolute;
left: 0;
color: #9fe3ff;
font-weight: 800;
}
.hero-beeld { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* De illustratie schaalt mee maar wordt nooit onnodig groot. */
.hero-beeld svg { width: 100%; max-width: 290px; height: auto; }
/* Staat er een foto in plaats van de illustratie, dan mag die breder: een
liggende foto op 290px wordt te klein om de barsten nog te zien. */
.hero-beeld img {
width: 100%;
max-width: 440px;
height: auto;
border-radius: var(--radius);
}
/* Afbeeldingslider in de reparatie-hero. De dia's liggen via de bestaande
.dias/.dia-regels op elkaar (grid-cel 1/1), zodat het vak niet verspringt bij
het wisselen. De beelden hebben verschillende verhoudingen (van 1,6:1 tot bijna
5:1); een vast 3:2-kader met object-fit:cover trekt ze gelijk. De kern van elk
beeld zit in het midden, dus center-crop houdt het belangrijkste in beeld. Wil
je een andere kaderverhouding, pas dan alleen de aspect-ratio hieronder aan. */
.hero-beeld .dias { width: 100%; max-width: 440px; }
.hero-beeld .dia img {
max-width: none;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center;
display: block;
}
/* Vierkante logo's (transparante achtergrond) niet bijsnijden maar volledig
tonen: het kader blijft 3:2, het logo past er gecentreerd in. */
.hero-beeld .dia-logo img { object-fit: contain; }
@media (max-width: 760px) {
/* Eén kolom: eerst de tekst, dan de knop, dan de illustratie — zo staan de
titel en de belangrijkste actie als eerste in beeld op een telefoon. */
.hero-split .container {
grid-template-columns: 1fr;
grid-template-areas:
"tekst"
"knop"
"beeld";
text-align: center;
}
.hero-split h1,
.hero-split p { margin-inline: auto; }
.hero-usp { justify-items: center; }
/* De illustratie blijft bescheiden van maat onder de knop. */
.hero-beeld svg { max-width: 210px; }
.hero-beeld img { max-width: 320px; }
}
/* --- 2. Merkkaarten ---
Grote, klikbare kaarten met een gekleurd rond vlakje en de merknaam.
Zelfde optillende hover als `.kaart-dienst`, zodat ze bij de rest van
de site passen. */
.merkraster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
}
.merkkaart {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
text-decoration: none;
background: var(--wit);
/* 2px in plaats van 1px: op wit was de rand van één pixel in --lijn zo licht
dat de kaart eerder zweefde dan dat hij een vlak was. */
border: 2px solid var(--lijn);
border-radius: var(--radius);
padding: 40px 22px;
box-shadow: var(--schaduw);
color: var(--ink);
font-weight: 700;
font-size: 1.2rem;
transition: transform .15s ease, box-shadow .15s ease;
}
.merkkaart:hover,
.merkkaart:focus-visible {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
@media (prefers-reduced-motion: reduce) {
.merkkaart { transition: box-shadow .15s ease; }
.merkkaart:hover,
.merkkaart:focus-visible { transform: none; }
}
/* Het ronde vlakje met de eerste letter van het merk. De achtergrondkleur
staat inline in de HTML per merk; deze regels bepalen alleen de vorm en
de witte letter. De tinten zijn bewust wat donker gekozen, zodat de witte
letter ook op de gekleurde vlakken goed leesbaar blijft. */
.merk-badge {
width: 84px;
height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blauw);
color: var(--wit);
/* Fors, en dat moet ook: een plusteken heeft veel minder inkt dan zijn
lettergrootte doet vermoeden. Op 2,1rem was het beeldje 18px breed, naast
een Apple-logo van 44px — dat oogde als een vergissing. Op deze maat is het
plusje ongeveer 37px en staat het gelijk met de twee merktekens ernaast. */
font-size: 4.25rem;
font-weight: 800;
line-height: 1;
}
/* De twee merktekens zijn geen los te schalen iconen: Apple vult zijn viewBox
helemaal, het Samsung-woordmerk staat met veel lucht eromheen in een vierkant
van 100 bij 100. Eén maat voor allebei zou de een te klein en de ander te
groot maken, dus staat de maat per stuk in de HTML. */
/* Korte omschrijving onder de merknaam op een merkkaart (bijv. "Kies uw
iPhone en bekijk de reparatiemogelijkheden."). Was op vier plekken
(apple-/samsung-reparatie-hoogeveen.html) als identieke inline style
herhaald; nu één centrale regel. */
.merkkaart-omschrijving {
font-weight: 400;
font-size: 1rem;
color: var(--tekst-zacht);
max-width: 34ch;
}
/* --- 4. Tijdlijn "Zo werkt het" ---
Vijf stappen naast elkaar, met een verbindingslijn ertussen. Onder 720px
kantelt de rij naar een verticale lijst met de cirkels links. */
.tijdlijn {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.tijdlijn li {
position: relative;
text-align: center;
}
.tijd-cirkel {
position: relative;
z-index: 1;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--blauw);
display: grid;
place-items: center;
margin: 0 auto 14px;
}
/* De lijn loopt vanaf de vorige cirkel naar deze; hij ligt op de hoogte van
het midden van de cirkels (30px) en onder de cirkels (z-index 0). */
.tijdlijn li:not(:first-child)::before {
content: "";
position: absolute;
top: 30px;
left: -50%;
width: 100%;
height: 3px;
background: var(--lijn);
z-index: 0;
}
.tijd-stap {
display: block;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 700;
color: var(--tekst-zacht);
}
.tijd-titel {
display: block;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
@media (max-width: 720px) {
.tijdlijn {
grid-template-columns: 1fr;
gap: 0;
max-width: 420px;
margin-inline: auto;
}
.tijdlijn li {
display: grid;
grid-template-columns: 60px 1fr;
gap: 18px;
text-align: left;
padding-bottom: 26px;
}
.tijd-cirkel { margin: 0; }
/* De verbindingslijn wordt verticaal: van deze cirkel omhoog naar de vorige. */
.tijdlijn li:not(:first-child)::before {
top: -26px;
left: 29px;
width: 3px;
height: 26px;
}
.tijd-inhoud { align-self: center; }
}
/* --- 5. Waarom kiezen voor Optie1 ---
Icoon links, tekst rechts. Geen kaart eromheen: dat houdt de sectie licht
naast de twee kaartenrasters erboven. De ronde iconen hergebruiken
`.dienst-icoon`. */
.usp-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
}
.usp {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
align-items: start;
}
/* Het icoon staat hier links en niet gecentreerd, dus de auto-marge van
`.dienst-icoon` moet eraf. */
.usp .dienst-icoon {
width: 52px;
height: 52px;
margin: 0;
}
.usp h3 { margin-bottom: .25em; }
.usp p { margin: 0; color: var(--tekst-zacht); }
/* --- 6. Reviews ---
Sterbeoordeling boven een kort citaat. De kaart zelf is de bestaande
`.kaart`; hier alleen de sterren en het citaat. */
.reviews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 22px;
}
.review { margin: 0; }
.sterren {
color: #f5a623;
letter-spacing: 3px;
font-size: 1.15rem;
margin-bottom: 10px;
}
.review blockquote {
margin: 0;
font-size: 1.08rem;
font-weight: 600;
color: var(--tekst);
}
.review figcaption {
margin-top: 12px;
font-size: var(--fs-klein);
color: var(--tekst-zacht);
}
/* --- 7. Grote CTA ---
Vol merkblauw vlak met witte tekst en de rode knop, zodat de oproep om
aan te melden er duidelijk uitspringt. --merkblauw-diep omdat witte
lopende tekst daarop 4,7:1 haalt, ruim boven de leesnorm. */
.cta-blok {
background: var(--merkblauw-diep);
color: var(--wit);
border-radius: 22px;
padding: clamp(32px, 6vw, 56px);
text-align: center;
box-shadow: var(--schaduw);
}
.cta-blok h2 { color: var(--wit); margin-top: 0; }
.cta-blok p {
color: #dbeef8;
max-width: 48ch;
margin: 0 auto 4px;
}
.cta-blok .knoppen { justify-content: center; margin-top: 22px; }
/* --- 8. FAQ ---
Native /: klapt open en dicht zonder JavaScript, zodat
de vragen ook zonder script gewoon te lezen zijn. */
.faq {
max-width: 760px;
margin-inline: auto;
display: grid;
gap: 12px;
}
.faq details {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.faq summary {
cursor: pointer;
padding: 18px 22px;
font-weight: 600;
color: var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
/* De standaard-driehoek weg; we tonen zelf een + / – rechts. */
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 400;
color: var(--ink);
line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p {
margin: 0;
padding: 0 22px 20px;
color: var(--tekst-zacht);
}
.faq summary:focus-visible {
outline: 3px solid var(--blauw-accent);
outline-offset: 2px;
}
/* De volle-blauwe kaartvariant (.kaart-vol) is verwijderd: de dienstkaarten op
de homepage gebruiken nu dezelfde lichtblauwe tint (via `.sectie-wit
.kaart-dienst`) als de reparatiekaarten, met een witte cirkel en een zwart
symbool. Terughalen kan uit de Git-geschiedenis. */
/* Merkpillen op de homepage in vol merkblauw met witte tekst. Alleen binnen
de merkenlijst; de providerbalk (dezelfde .provider-klasse) houdt zijn
lichte stijl. --merkblauw-diep: witte tekst haalt daarop 4,7:1. */
.merkenlijst .provider {
background: var(--merkblauw-diep);
border-color: var(--merkblauw-diep);
color: var(--wit);
}
/* Apple en Samsung linken door naar hun toestellenpagina. De link vult de
hele pil, zodat je niet precies op de tekst hoeft te klikken, en oogt
verder hetzelfde als de niet-klikbare merken ernaast. Eigen klasse in
plaats van `:has(a)`: die pseudoklasse werkt niet in browsers van vóór
eind 2023 (bijv. Safari <15.4, Firefox <121). */
.merkenlijst .provider--klikbaar { padding: 0; }
.merkenlijst .provider a {
display: block;
padding: 7px 18px;
color: inherit;
text-decoration: none;
}
.merkenlijst .provider a:hover,
.merkenlijst .provider a:focus-visible {
background: var(--blauw-donker);
border-radius: inherit;
}
/* ============================================================
REPARATIE-AANMELDPAGINA (afspraak.html) — premium & monochroom
------------------------------------------------------------
Een rustige, zakelijke uitstraling in wit/zwart/grijs, geïnspireerd op de
eenvoud en typografie van Apple (uitsluitend als inspiratie). Doel: de
bezoeker moet direct voelen dat hier zorgvuldig met zijn toestel wordt
omgegaan. Kleur wordt alleen functioneel ingezet (validatie/focus).
Alles staat gescoped onder `.pagina-aanmelden`, zodat de rest van de site
zijn blauwe huisstijl behoudt. De paginaklasse staat op de .
============================================================ */
.pagina-aanmelden {
/* Eigen, ingetogen palet — losgekoppeld van het blauwe sitepalet. */
--pm-zwart: #1d1d1f;
--pm-grijs: #3c3c43;
--pm-licht: #f5f5f7;
--pm-rand: #d2d2d7;
--pm-plch: #6e6e73; /* placeholder: lichtgrijs maar goed leesbaar (±4,6:1) */
--pm-kolom: 720px; /* gedeelde kolombreedte voor titel én formulier */
background: var(--wit);
color: var(--pm-zwart);
/* Het blauwe balkje bovenaan neutraliseren: een strakke, kleurloze start. */
border-top: 0;
}
/* De menuknop (smalle schermen) meekleuren: geen blauw kader op deze pagina. */
.pagina-aanmelden .menu-knop {
border-color: var(--pm-rand);
color: var(--pm-zwart);
}
.pagina-aanmelden .menu-knop:hover {
background: var(--pm-licht);
color: var(--pm-zwart);
}
/* --- Hero: zelfde huisstijlblauw als de formulierkaart eronder, witte tekst --- */
.pagina-aanmelden .hero {
background: var(--blauw);
padding-block: clamp(36px, 6vw, 72px);
text-align: center;
}
/* Titel en subtitel delen exact dezelfde kolom en linkerrand als het
formulier eronder — alles lijnt op één lijn uit. */
.pagina-aanmelden .hero .container,
.pagina-aanmelden #afspraak .container { max-width: var(--pm-kolom); }
.pagina-aanmelden .hero h1 {
color: var(--wit);
font-weight: 700;
font-size: clamp(2rem, 1.5rem + 1.8vw, 2.625rem); /* 32 → 42 px */
line-height: 1.1;
letter-spacing: -0.02em;
max-width: none;
margin: 0 0 .35em;
}
.pagina-aanmelden .hero p {
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem); /* 19 → 22 px */
line-height: 1.5;
max-width: 60ch;
margin: 0;
}
/* --- Formulier: blauwe kaart, ruime kolom, veel verticale lucht ---
Op verzoek: het formulier zelf als gekleurd, afgerond vlak (huisstijlblauw)
met witte tekst en pil-vormige invoervelden — de titel/subtitel erboven
(in .hero) blijft wit/zwart, alleen het formulier zelf wordt de kaart. */
.pagina-aanmelden .formulier {
max-width: var(--pm-kolom);
margin-inline: auto;
background: var(--blauw);
color: var(--wit);
border-radius: 24px;
padding: clamp(28px, 5vw, 44px);
box-shadow: 0 12px 32px -12px rgba(25, 118, 210, 0.35);
}
.pagina-aanmelden .veld { margin-bottom: 30px; }
/* --- Labels: wit, met lucht eronder --- */
.pagina-aanmelden .veld label,
.pagina-aanmelden .veld-groep legend,
.pagina-aanmelden .veld-duo label {
display: block;
color: var(--wit);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 10px;
}
.pagina-aanmelden .veld-groep legend { margin-bottom: 14px; }
/* "(optioneel)" rustig en terughoudend naast het label. */
.pagina-aanmelden .veld-optioneel {
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
}
/* --- Invoervelden: ondoorzichtig wit, pil-vormig, veel padding, ±56px hoog ---
Bewust géén doorzichtig "glas"-effect: volledig witte velden met donkere
tekst lezen het best tijdens het typen, ook in fel licht op een telefoon. */
.pagina-aanmelden .veld input,
.pagina-aanmelden .veld select,
.pagina-aanmelden .veld textarea {
width: 100%;
font: inherit;
font-size: 18px;
color: var(--pm-zwart);
background: var(--wit);
border: 2px solid transparent;
border-radius: 999px;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.pagina-aanmelden .veld input,
.pagina-aanmelden .veld select {
height: 56px;
padding: 0 22px;
}
/* Een volledige pil werkt niet voor meerdere regels tekst; de klachtomschrijving
krijgt daarom een ruime, maar geen volledig ronde, afronding. */
.pagina-aanmelden .veld textarea {
min-height: 168px;
padding: 16px 22px;
line-height: 1.6;
resize: vertical;
border-radius: 24px;
}
/* Placeholder: lichtgrijs en toch leesbaar op de witte velden. */
.pagina-aanmelden .veld ::placeholder { color: var(--pm-plch); opacity: 1; }
/* --- Focus: donkere rand, geen felblauwe systeemrand --- */
.pagina-aanmelden .veld input:focus,
.pagina-aanmelden .veld select:focus,
.pagina-aanmelden .veld textarea:focus {
outline: none;
border-color: var(--pm-zwart);
box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.18);
}
/* --- Dag & tijd: premium invoervelden i.p.v. kale browsercontrols --- */
/* Select met een eigen, subtiele chevron in plaats van de systeempijl. */
.pagina-aanmelden .veld select {
appearance: none;
-webkit-appearance: none;
padding-right: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233c3c43' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
cursor: pointer;
}
/* Nog geen dag gekozen: rustig uitgegrijsd, duidelijk niet-actief. */
.pagina-aanmelden .veld select:disabled {
background-color: var(--pm-licht);
color: var(--pm-plch);
cursor: not-allowed;
}
/* De datumkalender-knop meekleuren met het palet. */
.pagina-aanmelden .veld input[type="date"]::-webkit-calendar-picker-indicator {
opacity: .55;
cursor: pointer;
}
.pagina-aanmelden .veld input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* Datumtekst (dd-mm-jjjj) vet weergeven. */
.pagina-aanmelden .veld input[type="date"] { font-weight: 700; }
.pagina-aanmelden .veld input[type="date"]::-webkit-datetime-edit { font-weight: 700; }
/* De twee velden onder de legend met wat meer lucht ertussen. */
.pagina-aanmelden .veld-duo { gap: 20px; }
/* --- Helptekst: klein, rustig wit op het blauw --- */
.pagina-aanmelden .veld-uitleg,
.pagina-aanmelden .formulier-klein {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.82);
margin-top: 10px;
}
.pagina-aanmelden .formulier-klein { margin-top: 20px; }
/* --- Knoppen: pil-vormig, zelfde ronding als de invoervelden --- */
.pagina-aanmelden .knop {
font-size: 17px;
font-weight: 600;
letter-spacing: 0;
border-radius: 999px;
padding: 0 28px;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
/* Primaire actie: zwart vlak, witte tekst, subtiele lift bij hover. */
.pagina-aanmelden .knop-rood {
background: var(--pm-zwart);
color: var(--wit);
border-color: var(--pm-zwart);
}
.pagina-aanmelden .knop-rood:hover {
background: #000000;
color: var(--wit);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Tweede route (WhatsApp): groen vlak met witte tekst, in de WhatsApp-huisstijl. */
.pagina-aanmelden .knop-whatsapp {
background: #25d366;
color: var(--wit);
border-color: #25d366;
}
.pagina-aanmelden .knop-whatsapp:hover {
background: #1eb455;
color: var(--wit);
border-color: #1eb455;
}
/* Terugknop: blauw vlak met witte tekst. */
.pagina-aanmelden .knop-blauw {
background: var(--blauw-knop);
color: var(--wit);
border-color: var(--blauw-knop);
}
.pagina-aanmelden .knop-blauw:hover {
background: var(--blauw-donker);
color: var(--wit);
border-color: var(--blauw-donker);
}
.pagina-aanmelden .knop:focus-visible {
outline: 3px solid var(--pm-zwart);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.pagina-aanmelden .knop-rood:hover { transform: none; }
}
/* --- Bevestiging na verzenden: monochroom i.p.v. blauw --- */
.pagina-aanmelden .aanvraag-uitleg {
max-width: var(--pm-kolom);
background: var(--pm-licht);
border-left: 4px solid var(--pm-zwart);
border-radius: 12px;
padding: 18px 22px;
margin: 0 auto 34px;
color: var(--pm-grijs);
font-size: 16px;
line-height: 1.6;
}
/* Zit ín het blauwe formulier (afspraak.js zet 'm als eerste kind van
.formulier), dus wit-op-blauw i.p.v. het donker-op-licht van elders. */
.pagina-aanmelden .aanvraag-keuze {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px 18px;
}
.pagina-aanmelden .aanvraag-keuze-kop { color: rgba(255, 255, 255, 0.75); }
.pagina-aanmelden .aanvraag-keuze-waarde {
color: var(--wit);
font-weight: 700;
font-size: 18px;
}
.pagina-aanmelden .aanvraag-keuze-wijzig {
color: var(--wit);
text-decoration: underline;
font-size: 15px;
font-weight: 600;
}
.pagina-aanmelden .aanvraag-keuze-wijzig:hover { color: rgba(255, 255, 255, 0.75); }
.pagina-aanmelden .formulier-gelukt {
max-width: var(--pm-kolom);
background: var(--pm-licht);
border-left: 4px solid var(--pm-zwart);
}
.pagina-aanmelden .formulier-gelukt h2 { color: var(--pm-zwart); }
.pagina-aanmelden .formulier-gelukt a,
.pagina-aanmelden .formulier a {
color: var(--pm-zwart);
text-decoration: underline;
}
.pagina-aanmelden .formulier-gelukt a:hover,
.pagina-aanmelden .formulier a:hover { color: var(--pm-grijs); }
/* ============================================================
TOEVOEGINGEN — SEO/UX-ronde
Rijke NAW-footer, breadcrumbs, mobiele actiebalk en de
ondersteunende stukjes voor de dienst-landingspagina's.
============================================================ */
/* --- Rijke footer met bedrijfsgegevens en interne links ---
.footer-raster stond al klaar; hier alleen de ruimte en de
afsluitende regel eromheen. Elke pagina toont nu deze footer,
dus de vroegere smalle balk (padding 10px) mag ruimer. */
.site-footer { padding-block: 34px; }
.footer-raster { margin-bottom: 24px; }
.footer-kolom h3 { margin: 0 0 12px; }
.footer-kolom p { margin: 0; line-height: 1.75; }
.footer-kolom a { text-decoration: none; }
.footer-kolom a:hover { text-decoration: underline; }
.site-footer .copyright {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.28);
padding-top: 16px;
margin: 0;
}
/* --- Breadcrumbs (kruimelpad) ---
Klein, rustig, boven de hero. Ook als BreadcrumbList in JSON-LD. */
/* Broodkruimel-navigatie bewust verborgen op alle pagina's. De markup en de
BreadcrumbList-structured-data blijven in de HTML staan (voor zoekmachines);
alleen de zichtbare balk is uit. Weer tonen? Verwijder de display: none. */
.kruimels { display: none; padding: 16px 0 0; font-size: 0.85rem; }
.kruimels ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
}
.kruimels li { display: flex; align-items: center; gap: 6px; color: var(--tekst-zacht); }
.kruimels li:not(:last-child)::after { content: "\203A"; color: var(--tekst-zacht); }
.kruimels a { color: var(--blauw-kop-klein); text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }
.kruimels [aria-current="page"] { color: var(--tekst-zacht); }
/* --- Mobiele actiebalk: vast onderin op smartphones ---
80% van de bezoekers is mobiel; Bellen/WhatsApp/Afspraak/Route
altijd binnen duimbereik. Op desktop verborgen. */
.mobiele-balk { display: none; }
@media (max-width: 640px) {
.mobiele-balk {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: var(--wit);
border-top: 1px solid var(--lijn);
box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.09);
padding-bottom: env(safe-area-inset-bottom);
}
.mobiele-balk a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 9px 4px 8px;
font-size: 0.72rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
min-height: 56px;
}
.mobiele-balk a + a { border-left: 1px solid var(--lijn); }
.mobiele-balk svg { width: 22px; height: 22px; }
.mobiele-balk .mb-bellen svg { color: var(--blauw-kop); }
.mobiele-balk .mb-whatsapp svg { color: #1eb455; }
.mobiele-balk .mb-afspraak svg { color: #e60000; }
.mobiele-balk .mb-route svg { color: var(--tekst); }
/* Ruimte onderaan zodat de balk niets afdekt. */
body { padding-bottom: 68px; }
/* De zwevende homepage-knop botst met de balk: op mobiel weg. */
.knop-zwevend { display: none; }
/* Behalve op de homepage en de contactpagina: die hebben geen mobiele
onderbalk, dus daar blijft de rode zwevende knop ook op de telefoon staan. */
.home .knop-zwevend,
.contact .knop-zwevend { display: inline-block; }
}
/* --- Dienst-landingspagina's ---
Hergebruiken zoveel mogelijk bestaande klassen. Deze paar
extra's houden de knoppenrij in de hero netjes en geven de
"omgeving"-regel een rustige toon. */
.hero-cta { margin-top: 22px; }
.hero-cta.knoppen { flex-wrap: wrap; }
.omgeving-tekst { color: var(--tekst-zacht); }
.dienst-uitleg { max-width: 68ch; }
.dienst-uitleg p { margin-bottom: 1em; }
/* ============================================================
iPhone-modelselectie
Alleen gebruikt op iphone-reparatie-hoogeveen.html (modelkeuze) en
op de reparatietype-keuze. Nieuwe klassen; raken geen andere pagina.
Bouwt voort op de bestaande .merkkaart-uitstraling: witte kaart,
zachte rand, rustige hover en een duidelijke focus-state.
============================================================ */
/* Modelpagina's mogen breder dan de standaard leesbreedte (1100px): met
tientallen toestellen is de kaartenwand gebaat bij de volle schermbreedte,
zodat er meer kolommen naast elkaar passen en de lege randen links/rechts
verdwijnen. Alleen containers mét een modelraster worden verbreed, dus de
gewone tekstpagina's blijven ongemoeid. */
.container:has(.model-raster) {
max-width: 1760px;
}
.model-raster {
display: grid;
/* Vult automatisch bij: op desktop meerdere kaarten naast elkaar, op
tablet minder kolommen en op de telefoon twee per rij — nooit een
horizontale scroll. De 150px-ondergrens houdt op smalle telefoons
precies twee kaarten per rij. */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
/* Ruimere tussenruimte die meeschaalt met het scherm: rustig op de telefoon,
veel lucht op een breed beeldscherm. */
gap: clamp(18px, 2.4vw, 36px);
}
/* Vanaf tablet/desktop grotere kaarten (bredere ondergrens), zodat de
toestellen met de extra schermbreedte meer lucht krijgen zonder dat de
telefoonweergave naar één kolom terugvalt. */
@media (min-width: 700px) {
.model-raster {
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}
}
.model-kaart {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
text-decoration: none;
cursor: pointer;
background: var(--wit);
border: 2px solid var(--lijn);
border-radius: var(--radius);
padding: 18px 14px;
color: var(--ink);
box-shadow: var(--schaduw);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.model-kaart:hover,
.model-kaart:focus-visible {
transform: translateY(-4px);
border-color: var(--blauw);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
.model-kaart:focus-visible {
outline: 3px solid var(--blauw);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.model-kaart { transition: box-shadow .15s ease, border-color .15s ease; }
.model-kaart:hover,
.model-kaart:focus-visible { transform: none; }
}
.model-foto {
width: 100%;
height: 160px;
}
/* Vaste hoogte + object-fit:contain begrenst de afbeelding betrouwbaar
(een percentage-max-height op een grid-item groeit anders met de rij mee).
De portret-render wordt netjes passend geschaald, gecentreerd, zonder
vervorming en zonder over de modelnaam heen te lopen. */
.model-foto img {
width: 100%;
height: 100%;
object-fit: contain;
}
.model-naam {
font-weight: 600;
font-size: 1rem;
line-height: 1.25;
color: var(--ink);
}
.model-hint {
margin-top: 22px;
text-align: center;
color: var(--tekst-zacht);
}
/* Verplichte CC BY-SA-bronvermelding bij de modelafbeeldingen. Bewust klein
en rustig, maar wel zichtbaar en met werkende links. */
.model-credit {
margin-top: 10px;
text-align: center;
font-size: var(--fs-klein);
color: var(--tekst-zacht);
}
/* Klikbare dienstkaart (reparatietype-keuze). Neemt de bestaande
.kaart/.kaart-dienst-opmaak over, maar gedraagt zich als link:
geen onderstreping, wel een rustige hover en duidelijke focus. */
.kaart-link {
display: block;
text-decoration: none;
color: inherit;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kaart-link:hover,
.kaart-link:focus-visible {
transform: translateY(-4px);
border-color: var(--blauw);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
.kaart-link:focus-visible {
outline: 3px solid var(--blauw);
outline-offset: 3px;
}
.kaart-link h3 { color: var(--ink); }
.kaart-link p { color: var(--tekst-zacht); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.kaart-link { transition: box-shadow .15s ease, border-color .15s ease; }
.kaart-link:hover,
.kaart-link:focus-visible { transform: none; }
}
.opties-terug { margin-top: 18px; }
.opties-terug a { color: var(--wit); }
/* ============================================================
Reparatiekeuze — tegels met icoon
Grid van veelvoorkomende reparaties op de reparatiekeuze-pagina.
Line-iconen (Lucide, ISC) in merkblauw op een lichtblauwe cirkel in
de huisstijltint. Nieuwe klassen; raken geen andere pagina.
============================================================ */
/* Reparatiekeuze-pagina's mogen — net als de modelpagina's — breder dan de
standaard leesbreedte (1100px), zodat de tegelwand de volle schermbreedte
benut en de lege randen links/rechts verdwijnen. Alleen containers mét een
reparatieraster worden verbreed. */
.container:has(.rep-raster) {
max-width: 1760px;
}
.rep-raster {
display: grid;
/* 148px-ondergrens houdt op smalle telefoons twee tegels per rij. */
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
/* Ruimere tussenruimte die meeschaalt met het scherm. */
gap: clamp(16px, 2.4vw, 36px);
}
/* Vanaf tablet/desktop grotere tegels (bredere ondergrens), zodat ze met de
extra schermbreedte meer lucht krijgen zonder dat de telefoonweergave naar
één kolom terugvalt. */
@media (min-width: 700px) {
.rep-raster {
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}
}
.rep-kaart {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
text-decoration: none;
cursor: pointer;
background: var(--wit);
border: 2px solid var(--lijn);
border-radius: var(--radius);
padding: 20px 12px;
color: var(--ink);
box-shadow: var(--schaduw);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rep-kaart:hover,
.rep-kaart:focus-visible {
transform: translateY(-4px);
border-color: var(--blauw);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
.rep-kaart:focus-visible {
outline: 3px solid var(--blauw);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.rep-kaart { transition: box-shadow .15s ease, border-color .15s ease; }
.rep-kaart:hover,
.rep-kaart:focus-visible { transform: none; }
}
.rep-icoon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--hero-vlak);
color: var(--blauw);
}
.rep-icoon svg {
width: 32px;
height: 32px;
}
.rep-naam {
font-weight: 600;
font-size: .95rem;
line-height: 1.25;
color: var(--ink);
}
/* Kop op één regel houden. De lettergrootte schaalt mee met het venster,
zodat de zin bij elke breedte binnen de container blijft. Op smalle
telefoons (<=420px) mag hij alsnog over twee regels breken, zodat hij
nooit van het scherm loopt. */
.kop-inline {
white-space: nowrap;
font-size: clamp(1.4rem, 5.4vw, 2.6rem);
}
@media (max-width: 420px) {
.kop-inline { white-space: normal; }
}
/* "Ander model kiezen": omlijnde pill-knop in merkblauw met terugpijl.
Hover/focus vult hem licht in de huisstijltint. */
.terug-wrap { margin-top: 28px; text-align: center; }
.terug-knop {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 2px solid var(--blauw);
border-radius: 999px;
background: var(--blauw);
color: var(--wit);
font-weight: 600;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.terug-knop svg { width: 18px; height: 18px; }
.terug-knop:hover,
.terug-knop:focus-visible {
background: var(--blauw-donker);
border-color: var(--blauw-donker);
}
.terug-knop:focus-visible {
outline: 3px solid var(--blauw-accent);
outline-offset: 2px;
}