/* ============================================================
   Stanlie Motorsport — hoofdstylesheet
   Zwart, rood en wit. Donker thema als standaard, licht thema
   erbij, en alles werkt van telefoon tot breed scherm.
   ============================================================ */

:root {
    --rood: #e10600;
    --rood-fel: #ff2b23;
    --rood-diep: #a80400;

    --bg: #0b0b0d;
    --bg-2: #121216;
    --kaart: #16161b;
    --kaart-2: #1d1d23;
    --rand: #2a2a33;
    --tekst: #ffffff;
    --tekst-zacht: #b8b8c2;
    --tekst-dim: #83838f;
    --op-accent: #ffffff;

    --maxw: 1240px;
    --radius: 4px;
    --schaduw: 0 18px 40px rgba(0, 0, 0, .45);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --kop-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

[data-accent="oranje"] { --rood: #ff6a00; --rood-fel: #ff8c33; --rood-diep: #c24f00; }
[data-accent="wit"]    { --rood: #ffffff; --rood-fel: #ffffff; --rood-diep: #d5d5d5; --op-accent: #0b0b0d; }

[data-thema="licht"] {
    --bg: #ffffff;
    --bg-2: #f4f4f6;
    --kaart: #ffffff;
    --kaart-2: #f7f7f9;
    --rand: #e3e3e8;
    --tekst: #0b0b0d;
    --tekst-zacht: #42424c;
    --tekst-dim: #6a6a76;
    --schaduw: 0 12px 30px rgba(0, 0, 0, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0; background: var(--bg); color: var(--tekst);
    font: 16px/1.65 var(--font);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tekst); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--kop-font); line-height: 1.15; margin: 0 0 .5em;
    letter-spacing: -.01em; font-weight: 800;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); text-transform: uppercase; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; }
h3 { font-size: 1.05rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.smal { max-width: 720px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.klein { font-size: .86rem; color: var(--tekst-dim); }
.leeg { color: var(--tekst-dim); padding: 30px 0; }

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

.knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 24px; border: 2px solid var(--rood); background: var(--rood);
    color: var(--op-accent); font-weight: 800; font-size: .92rem;
    text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius);
    cursor: pointer; transition: .16s ease; text-decoration: none;
}
.knop:hover { background: var(--rood-fel); border-color: var(--rood-fel); text-decoration: none; transform: translateY(-1px); }
.knop-leeg { background: transparent; color: var(--tekst); border-color: var(--rand); }
.knop-leeg:hover { background: transparent; border-color: var(--rood); color: var(--rood); }
.knop-groot { padding: 15px 30px; font-size: 1rem; }

/* ---------------- Kop van de site ---------------- */

.kop {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--rand);
}
.kop-binnen { display: flex; align-items: center; gap: 20px; min-height: 74px; }

.merk { display: flex; align-items: center; gap: 12px; flex: none; }
.merk:hover { text-decoration: none; }
.merk-naam {
    font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap;
}
.merk-naam b { color: var(--rood); font-weight: 900; }

/* Twee logo's in de kop: één voor de donkere achtergrond, één voor de lichte.
   Allebei staan ze in de pagina, zodat de themaknop meteen het goede laat zien
   zonder de pagina opnieuw op te halen. Is er maar één logo ingesteld, dan
   heeft dat geen van beide klassen en blijft het gewoon staan. */
img.merk-logo-licht { display: none; }
[data-thema="licht"] img.merk-logo-donker { display: none; }
[data-thema="licht"] img.merk-logo-licht { display: inline; }

.hoofdmenu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hoofdmenu a {
    padding: 9px 14px; font-weight: 700; font-size: .9rem; color: var(--tekst-zacht);
    text-transform: uppercase; letter-spacing: .04em; border-radius: var(--radius);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
/* Wordt de balk te krap, dan mogen de menu-items iets kleiner worden voordat
   het menu naar de knop rechts verhuist. */
@media (max-width: 1180px) {
    .hoofdmenu a { padding: 9px 9px; font-size: .84rem; letter-spacing: .02em; }
    .zoekje input { width: 150px; }
    .talen a { padding: 4px 4px; }
    .talen .vlag { width: 22px; height: 15px; }
}
.hoofdmenu a:hover { color: var(--tekst); text-decoration: none; }
.hoofdmenu a.actief { color: var(--tekst); border-bottom-color: var(--rood); }

/* ---- Uitklapper met de merken ----
   Op een groot scherm klapt hij open als je er met de muis overheen gaat of
   met de tab-toets in het menu belandt. De losse knop ernaast is er voor de
   telefoon; die verbergen we hier. */
.menu-groep { position: relative; display: flex; align-items: center; }
.klap-pijl { font-size: .7em; margin-left: 5px; opacity: .8; }
.klap-knop { display: none; }

.submenu {
    position: absolute; top: 100%; left: 0; z-index: 70;
    display: none; grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0 4px; padding: 12px; min-width: 460px;
    background: var(--kaart); border: 1px solid var(--rand);
    border-top: 2px solid var(--rood); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--schaduw);
}
.menu-groep:hover .submenu,
.menu-groep:focus-within .submenu { display: grid; }
.submenu a {
    padding: 6px 10px; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    text-transform: none; border-bottom: 0; border-radius: var(--radius);
    color: var(--tekst-zacht);
}
.submenu a:hover { background: var(--kaart-2); color: var(--tekst); }
.submenu a.actief { color: var(--rood); }
.submenu-alles {
    grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--rand); color: var(--rood) !important; font-weight: 800;
}

/* De rechterkant mag krimpen in plaats van uit de balk te lopen: het
   zoekveld wordt dan smaller voordat het menu naar de knop verhuist. */
.kop-rechts { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }

.zoekje { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.zoekje input {
    width: 190px; min-width: 90px; padding: 9px 12px; font: inherit; font-size: .88rem;
    background: var(--kaart); border: 1px solid var(--rand); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius); color: var(--tekst);
}
.zoekje input::placeholder { color: var(--tekst-dim); }
.zoekje input:focus { outline: 2px solid var(--rood); outline-offset: -2px; }
.zoekje button {
    padding: 9px 13px; font-size: 1.1rem; line-height: 1; cursor: pointer;
    background: var(--rood); color: var(--op-accent); border: 1px solid var(--rood);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.talen { display: flex; gap: 3px; }
.talen a {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 7px; line-height: 1; border-radius: var(--radius);
    border: 1px solid transparent; transition: .15s;
}
.talen a .vlag { opacity: .55; transition: opacity .15s; }
.talen a:hover, .talen a.actief { background: var(--kaart); text-decoration: none; border-color: var(--rand); }
.talen a:hover .vlag, .talen a.actief .vlag { opacity: 1; }
.talen a.actief { border-color: var(--rood); }
.vlag { display: block; border-radius: 2px; flex: none; }

.menuknop {
    display: none; width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer;
    background: var(--kaart); border: 1px solid var(--rand); color: var(--tekst);
    border-radius: var(--radius);
}

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

.hero {
    position: relative; padding: clamp(50px, 9vw, 100px) 0;
    background: linear-gradient(160deg, #000 0%, var(--bg-2) 60%, #000 100%);
    border-bottom: 1px solid var(--rand); overflow: hidden;
}
/* Hier stond een rode schuine streep over de hele kop. Die is eruit: over een
   foto liep hij dwars door de auto's en de titel heen, en zonder foto voegde
   hij weinig toe. De ::after blijft wel bestaan — daar hangt de donkere waas
   over de achtergrondfoto aan (zie .hero.met-beeld::after hieronder). */
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
}
/* De foto als achtergrond van de kop.
   Hij staat op 60% in plaats van 30%: zo zie je de auto's écht, en toch blijft
   de tekst leesbaar doordat er links een donkere waas overheen ligt (zie
   .hero.met-beeld::after hieronder). De foto schuift bij het laden heel licht
   in — een seconde, en dan staat hij stil. */
.hero.met-beeld::before {
    content: ""; position: absolute; inset: -2%;
    background: var(--hero) center/cover no-repeat;
    opacity: .9;
    animation: heroIn 1.1s ease-out both;
}
@keyframes heroIn {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: .9; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero.met-beeld::before { animation: none; opacity: .9; }
}

/* De waas over de foto: links zwart zodat de titel staat als een huis, naar
   rechts toe doorzichtig zodat de foto daar vol in beeld blijft. Onderaan loopt
   hij in het zwart over, zodat de kop niet met een harde rand ophoudt. */
/* De waas over de foto. Die moest anders nu de tekst in het midden staat: een
   donkere linkerhelft helpt dan niets meer. Drie lagen:
     1. een zachte ovaal achter de tekst, zodat de letters daar rusten;
     2. een lichte verdonkering van boven en onderen, voor de menubalk erboven
        en de overgang naar de pagina eronder;
     3. verder zo min mogelijk, zodat de auto's links en rechts vol in beeld
        blijven staan.
   Zo is de foto duidelijk te zien en de tekst toch leesbaar. */
.hero.met-beeld::after {
    background:
        radial-gradient(ellipse 62% 70% at 50% 48%,
            rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.22) 75%, transparent 100%),
        linear-gradient(to bottom,
            rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 22%,
            rgba(0,0,0,.12) 72%, rgba(0,0,0,.72) 100%);
    opacity: 1;
}
/* Op een telefoon een lichtere foto downloaden: scheelt bijna 200 kB. */
@media (max-width: 760px) {
    .hero.met-beeld::before { background-image: var(--hero-klein, var(--hero)); }
    .hero.met-beeld::after {
        background:
            radial-gradient(ellipse 95% 62% at 50% 45%,
                rgba(0,0,0,.8) 0%, rgba(0,0,0,.66) 55%, rgba(0,0,0,.4) 100%),
            linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.8) 100%);
    }
}

/* Met een foto erachter mag de kop wat hoger zijn: dan komt de foto tot zijn
   recht in plaats van dat het een strookje wordt. */
.hero.met-beeld { padding: clamp(64px, 11vw, 132px) 0; }

/* De tekst staat in het midden, met de foto eromheen. Leesbaar blijft hij door
   de ovale schaduw hierboven, niet door de hele foto donker te maken. */
.hero.met-beeld .hero-binnen { margin-inline: auto; }
.hero.met-beeld .hero-tekstblok { max-width: 760px; margin-inline: auto; text-align: center; }
.hero.met-beeld .hero-knoppen { justify-content: center; }
.hero.met-beeld .hero-balk img { margin-inline: auto; }

/* Een zweem schaduw achter de tekst: je ziet hem niet, maar hij houdt de
   letters leesbaar op de plekken waar de foto toch lichter uitvalt. */
.hero.met-beeld .hero-tekstblok h1,
.hero.met-beeld .hero-tekstblok .hero-tekst,
.hero.met-beeld .hero-tekstblok .hero-boven { text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .9); }

/* Over een foto is zachtgrijze tekst te weinig; daar hoort wit. En de lege knop
   krijgt een donkere vulling, anders zweeft hij over de rook. */
.hero.met-beeld .hero-tekst { color: #fff; }
.hero.met-beeld .knop-leeg {
    background: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
}
.hero.met-beeld .knop-leeg:hover { background: rgba(0, 0, 0, .75); border-color: #fff; }
[data-thema="licht"] .hero { background: linear-gradient(160deg, #f7f7f9 0%, #ffffff 60%, #f2f2f4 100%); }
.hero-binnen { position: relative; z-index: 1; max-width: 760px; }

/* Met embleem staat de tekst links en het logo rechts, allebei even belangrijk. */
.hero.met-logo .hero-binnen {
    max-width: var(--maxw); display: grid; gap: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 420px); align-items: center;
}
.hero-embleem { display: grid; place-items: center; }
.hero-embleem img {
    width: 100%; max-width: 400px; height: auto;
    /* Een zachte gloed eromheen zodat het witte embleem los komt van het zwart. */
    filter: drop-shadow(0 0 40px rgba(255, 255, 255, .16)) drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
    animation: embleemop .7s ease-out both;
}

/* Een breed logo (de balk met de naam erin) staat boven de titel, over de
   volle breedte van het tekstblok. Daar is hij groot genoeg om te lezen. */
.hero-balk { margin: 0 0 22px; }
.hero-balk img {
    width: 100%; max-width: 520px; height: auto; display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
    animation: embleemop .7s ease-out both;
}
@media (max-width: 700px) { .hero-balk img { max-width: 100%; } }

/* Twee versies in de pagina, net als in de menubalk: de stijl kiest degene
   die bij de achtergrond past, zodat de themaknop meteen klopt. */
img.hero-logo-licht { display: none; }
[data-thema="licht"] img.hero-logo-donker { display: none; }
[data-thema="licht"] img.hero-logo-licht { display: block; }
@keyframes embleemop {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 900px) {
    .hero.met-logo .hero-binnen { grid-template-columns: minmax(0, 1fr); }
    .hero-embleem { order: -1; }
    .hero-embleem img { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .hero-embleem img { animation: none; } }
.hero-boven {
    margin: 0 0 12px; font-size: .82rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--rood);
}
.hero h1 { margin: 0 0 16px; }
.hero-tekst { color: var(--tekst-zacht); font-size: 1.05rem; max-width: 62ch; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ---------------- Paginakop ---------------- */

.pagkop { padding: 44px 0 10px; border-bottom: 1px solid var(--rand); background: var(--bg-2); }
.pagkop h1 { margin: 0 0 6px; }
.pagkop-sub, .kruimels { color: var(--tekst-dim); font-size: .88rem; margin: 0 0 10px; }
.kruimels a { color: var(--tekst-zacht); }
.pagkop-tekst { color: var(--tekst-zacht); max-width: 70ch; padding-bottom: 14px; }

/* ---------------- Vakken ---------------- */

.vak { padding: 46px 0; }
.vak-grijs { background: var(--bg-2); border-block: 1px solid var(--rand); }
.vak-midden { text-align: center; }
.vak-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.vak-kop h2 { margin: 0; position: relative; padding-left: 16px; }
.vak-kop h2::before {
    content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; background: var(--rood);
}
.meer { font-weight: 700; font-size: .86rem; color: var(--rood); text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- Productkaarten ---------------- */

.rooster {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.kaart {
    display: flex; flex-direction: column; background: var(--kaart);
    border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
    transition: .18s ease;
}
.kaart:hover {
    text-decoration: none; border-color: var(--rood);
    transform: translateY(-3px); box-shadow: var(--schaduw);
}
.kaart-beeld {
    position: relative; aspect-ratio: 4 / 3; background: var(--kaart-2);
    display: grid; place-items: center; overflow: hidden;
}
.kaart-beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart-leeg { font-size: 2.4rem; color: var(--rand); }
.kaart-vlag {
    position: absolute; left: 0; top: 12px; padding: 4px 10px;
    background: var(--rood); color: var(--op-accent);
    font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.kaart-tekst { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 4px; }
.kaart-merk { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rood); }
.kaart-tekst h3 { margin: 0; font-size: 1rem; }
.kaart-sku { font-size: .78rem; color: var(--tekst-dim); }
.kaart-prijs { margin-top: 6px; font-size: .84rem; font-weight: 700; color: var(--tekst-zacht); }

/* ---------------- Merken ---------------- */

.merkrij { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* De merkknoppen: zwart met een rode gloed, als een neonbordje in een
   werkplaats. In rust alleen een randje en een zweem rood van onderen; bij
   aanwijzen gaat de gloed echt aan en lichten de letters op.

   Twee dingen bewust zo gedaan: de gloed zit in een eigen laag (::before) zodat
   alleen díé laag van doorzichtigheid verandert en de browser er niet de hele
   knop voor hoeft te hertekenen, en de tekst krijgt geen harde neon-schaduw —
   dat leest beroerd. Het randje en de achtergrondgloed doen het werk. */
.merkje {
    position: relative; overflow: hidden;
    display: grid; place-items: center; min-height: 74px; padding: 12px;
    background: linear-gradient(170deg, #121216 0%, #0a0a0c 100%);
    border: 1px solid #2a2a33; border-radius: var(--radius);
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
    color: var(--tekst-zacht);
    transition: color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.merkje::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 118%, rgba(225, 6, 0, .55) 0%, rgba(225, 6, 0, 0) 70%);
    opacity: .35; transition: opacity .18s;
}
.merkje > * { position: relative; z-index: 1; }
.merkje:hover, .merkje:focus-visible {
    color: #fff; text-decoration: none;
    border-color: var(--rood);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(225, 6, 0, .35), 0 8px 26px -8px rgba(225, 6, 0, .75);
}
.merkje:hover::before, .merkje:focus-visible::before { opacity: 1; }
.merkje img { max-height: 44px; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .merkje, .merkje::before { transition: none; }
    .merkje:hover { transform: none; }
}

/* Op het lichte thema past zwart-met-neon niet; daar houden we het rustig. */
[data-thema="licht"] .merkje {
    background: var(--kaart); border-color: var(--rand); color: var(--tekst-zacht);
}
[data-thema="licht"] .merkje::before { display: none; }
[data-thema="licht"] .merkje:hover { color: var(--tekst); box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }

.groepen { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.groep-kop {
    font-size: .95rem; letter-spacing: .16em; color: var(--rood);
    padding-bottom: 8px; border-bottom: 2px solid var(--rand); margin-bottom: 4px;
}
.merklijst { list-style: none; margin: 0; padding: 0; }
.merklijst a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 4px; border-bottom: 1px solid var(--rand);
    font-weight: 700; text-transform: uppercase; font-size: .92rem; letter-spacing: .03em;
}
.merklijst a:hover { color: var(--rood); text-decoration: none; padding-left: 8px; }
.merklijst em { font-style: normal; font-size: .78rem; color: var(--tekst-dim); font-weight: 600; }

/* ---------------- Productpagina ---------------- */

.prod { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.prod-beeld img, .prod-leeg {
    width: 100%; background: var(--kaart-2); border: 1px solid var(--rand); border-radius: var(--radius);
}
.prod-leeg { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 3rem; color: var(--rand); }
.prod-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.prod-mini {
    width: 74px; height: 58px; padding: 0; cursor: pointer; overflow: hidden;
    background: var(--kaart-2); border: 1px solid var(--rand); border-radius: var(--radius);
}
.prod-mini img { width: 100%; height: 100%; object-fit: cover; }
.prod-mini.actief, .prod-mini:hover { border-color: var(--rood); }

.prod-merk { margin: 0 0 4px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rood); }
.prod-info h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.prod-prijs { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
.prod-sku { color: var(--tekst-dim); font-size: .9rem; margin: 0 0 18px; }
.prod-tekst { color: var(--tekst-zacht); margin-top: 22px; }
.prod-koptekst { font-size: 1rem; margin-top: 26px; }

.specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs th, .specs td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.specs th { width: 40%; color: var(--tekst-dim); font-weight: 700; }

/* ---------------- Formulier ---------------- */

.contact-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
/* Het regeltje boven het formulier als iemand vanaf een productpagina komt:
   "Je vraag gaat over: Opel Ascona B". Geen invulveld meer — dat hoeft niet,
   de site weet het al en stuurt het mee. */
.form-over {
    margin: 0 0 18px; padding: 10px 14px; border-radius: 10px;
    background: var(--kaart); border-left: 4px solid var(--rood);
    font-size: .95rem; color: var(--tekst-zacht);
}
.form-over strong { color: var(--tekst); }

.veld { margin-bottom: 16px; }
.veld-rij { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.veld label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 6px; color: var(--tekst-zacht); }
.veld input[type=text], .veld input[type=email], .veld input[type=tel], .veld input[type=search],
.veld input[type=number], .veld select, .veld textarea {
    width: 100%; padding: 12px 14px; font: inherit;
    background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--tekst);
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--rood); outline-offset: -2px; }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--rood); }
.veldfout { display: block; margin-top: 5px; font-size: .82rem; color: var(--rood-fel); font-weight: 600; }
.vink label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--tekst-zacht); }
.vink input { margin-top: 4px; accent-color: var(--rood); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 20px; font-weight: 600; }
.melding-goed { background: color-mix(in srgb, #17b26a 16%, transparent); border: 1px solid #17b26a; }
.melding-fout { background: color-mix(in srgb, var(--rood) 16%, transparent); border: 1px solid var(--rood); }

.contact-info { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px; }
.contact-info h2 { font-size: 1.05rem; }
.contact-info ul { list-style: none; margin: 0 0 12px; padding: 0; }
.contact-info li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); font-size: .95rem; }
.contact-info li span { color: var(--rood); }

.zoek-groot { display: flex; gap: 10px; margin: 16px 0 22px; max-width: 600px; }
.zoek-groot input {
    flex: 1; padding: 13px 15px; font: inherit;
    background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--tekst);
}
.zoek-aantal { color: var(--tekst-dim); margin-bottom: 18px; }

.tekstpagina { max-width: 74ch; color: var(--tekst-zacht); }
.tekstpagina h2, .tekstpagina h3 { color: var(--tekst); margin-top: 1.6em; }
.tekstpagina a { color: var(--rood); }

.vier-nul-vier { font-size: clamp(4rem, 16vw, 9rem); font-weight: 900; line-height: 1; color: var(--rood); margin: 0; }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vak-cta { background: linear-gradient(120deg, var(--rood-diep), var(--rood)); color: #fff; }
.vak-cta h2, .vak-cta p { color: #fff; margin: 0; }
.vak-cta .knop { background: #fff; border-color: #fff; color: var(--rood-diep); }
.vak-cta .knop:hover { background: #f1f1f1; border-color: #f1f1f1; }

/* ---------------- Talenbalk op de voorpagina ---------------- */

.talenbalk { background: var(--bg-2); border-bottom: 1px solid var(--rand); padding: 18px 0; }
.talenbalk-binnen {
    display: flex; align-items: center; justify-content: center;
    gap: 10px 26px; flex-wrap: wrap;
}
.talenbalk-kop {
    margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tekst-dim);
}
.talenkeuze { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.talenkeuze a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 15px; border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--kaart); color: var(--tekst-zacht);
    font-size: .88rem; font-weight: 700; transition: .15s;
}
.talenkeuze a:hover {
    border-color: var(--rood); color: var(--tekst); text-decoration: none;
    transform: translateY(-1px);
}
.talenkeuze a.actief { border-color: var(--rood); color: var(--tekst); background: var(--kaart-2); }
.talenkeuze .vlag { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

@media (max-width: 560px) {
    .talenbalk { padding: 14px 0; }
    .talenbalk-kop { width: 100%; text-align: center; }
    .talenkeuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .talenkeuze a { justify-content: center; padding: 10px 8px; }
}

/* ---------------- Partnerblok ---------------- */

.partnervak { background: var(--bg-2); border-block: 1px solid var(--rand); }
.partner {
    display: grid; gap: 30px; align-items: center;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
}
.partner-logo img {
    width: 100%; max-width: 300px; height: auto; border-radius: var(--radius);
    box-shadow: var(--schaduw);
}
.partner-kop {
    margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rood);
}
.partner-tekst h2 { margin: 0 0 16px; text-transform: none; font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
@media (max-width: 700px) {
    .partner { grid-template-columns: minmax(0, 1fr); }
    .partner-logo img { max-width: 240px; }
}

/* ---------------- Voet ---------------- */

.voet { background: #000; border-top: 3px solid var(--rood); padding: 44px 0 0; margin-top: 50px; color: var(--tekst-zacht); }
[data-thema="licht"] .voet { background: #0b0b0d; }
.voet-grid { display: grid; gap: 26px 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voet-blok h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.voet-blok ul { list-style: none; margin: 0; padding: 0; }
.voet-blok li { margin-bottom: 7px; font-size: .92rem; }
.voet-blok a { color: #b8b8c2; font-size: .92rem; }
.voet-blok a:hover { color: var(--rood-fel); }
.voet-twee { columns: 2; column-gap: 20px; max-width: 320px; }
.voet-twee li { break-inside: avoid; }
.voet-social a { margin-right: 12px; }
.voet-onder {
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 30px; padding-block: 16px; border-top: 1px solid #26262e;
    font-size: .84rem; color: #83838f;
}
.voet-onder p { margin: 0; }
.voet-onder a { color: #83838f; }

/* ---------------- Cookiebalk ---------------- */

.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 0 14px 14px; }
.cookiebar-inner {
    max-width: var(--maxw); margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius);
    box-shadow: var(--schaduw); padding: 16px 18px;
}
.cookiebar-text { flex: 1 1 340px; min-width: 0; font-size: .9rem; color: var(--tekst-zacht); }
.cookiebar-text strong { display: block; color: var(--tekst); margin-bottom: 3px; }
.cookiebar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookiebar .btn { padding: 10px 18px; border: 2px solid var(--rood); background: var(--rood); color: var(--op-accent);
                  font-weight: 800; font-size: .84rem; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; }
.cookiebar .btn-ghost { background: transparent; color: var(--tekst); border-color: var(--rand); }

/* ---------------- Smallere schermen ---------------- */

@media (max-width: 1000px) {
    .prod, .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .voet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zoekje input { width: 140px; }
}

@media (max-width: 1024px) {
    .menuknop { display: block; }
    .hoofdmenu {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0; padding: 10px;
        background: var(--bg); border-bottom: 1px solid var(--rand); box-shadow: var(--schaduw);
    }
    .hoofdmenu.open { display: flex; }
    .hoofdmenu a { padding: 13px 14px; border-bottom: 1px solid var(--rand); border-left: 3px solid transparent; }
    .hoofdmenu a.actief { border-bottom-color: var(--rand); border-left-color: var(--rood); }
    .kop { position: relative; }

    /* Op de telefoon geen zwevend kadertje maar een lijstje dat openschuift,
       met een eigen pijlknop ernaast. Zo kun je "Verwarmde voorruiten" nog
       steeds gewoon aantikken om naar het assortiment te gaan. */
    .menu-groep { display: grid; grid-template-columns: 1fr auto; }
    .menu-groep > a { grid-column: 1; }
    .klap-pijl { display: none; }
    .klap-knop {
        display: block; grid-column: 2; align-self: stretch;
        width: 52px; border: 0; border-bottom: 1px solid var(--rand);
        background: transparent; color: var(--tekst-zacht);
        font: inherit; font-size: 1rem; cursor: pointer;
        transition: transform .18s;
    }
    .klap-knop[aria-expanded="true"] { transform: rotate(180deg); color: var(--rood); }
    .submenu {
        position: static; grid-column: 1 / -1; min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 0; border-bottom: 1px solid var(--rand); border-radius: 0;
        box-shadow: none; background: var(--bg-2); padding: 8px 10px 10px 22px;
    }
    /* Uitklappen gaat op de telefoon per tik, niet vanzelf bij aanraken. */
    .menu-groep:hover .submenu, .menu-groep:focus-within .submenu { display: none; }
    .menu-groep.open .submenu { display: grid; }
    .submenu a { padding: 9px 8px; border-bottom: 0; border-left: 0; }
    /* Twee regels: bovenin het logo met de vlaggetjes en de menuknop,
       daaronder het zoekveld over de volle breedte. */
    .kop-binnen { flex-wrap: wrap; padding-bottom: 12px; }
    .kop-rechts { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; gap: 10px; }
    .merk { margin-right: auto; }
    .talen { order: 1; margin-left: auto; }
    .menuknop { order: 2; }
    .zoekje { order: 3; flex: 1 1 100%; min-width: 0; }
    .zoekje input { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
    .veld-rij { grid-template-columns: 1fr; }
    .voet-grid { grid-template-columns: 1fr; }
    .rooster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .vak { padding: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kaart:hover, .knop:hover { transform: none; }
}


/* Kopjes binnen het aanvraagformulier ("Jouw gegevens", "De auto").
   Ze delen het formulier in stukken op, zodat het niet één lange rij
   vakjes wordt. */
.formkop {
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kleur-dim, #9a9aa2);
    margin: 26px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kleur-rand, #2a2a31);
}
.formkop:first-of-type { margin-top: 6px; }
.veld .hint { display: block; margin-top: 4px; font-size: .85rem; color: var(--kleur-dim, #9a9aa2); }


/* Keuzelijsten krijgen hetzelfde jasje als de invoervelden, met een eigen
   pijltje: de standaardpijl van de browser is op een donkere achtergrond
   vrijwel onzichtbaar. */
.veld select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.veld input[type=number] { max-width: 140px; }


.knop-klein { padding: 8px 14px; font-size: .9rem; }

/* ---------------- Opbouwpagina ----------------
   Een product met Soort = "Opbouw / project" krijgt deze weergave: de titel,
   het filmpje naast de openingsfoto, daaronder alle foto's, en onderaan één
   knop naar het contactformulier. */

.opbouw-kop { margin: 0 0 22px; }
.opbouw-kop h1 {
    margin: 0;
    /* De titel hoort op één regel te passen. De tekst is ruwweg twintig keer zo
       breed als de letters hoog zijn, dus met 4,4vw blijft hij binnen de kolom
       tot het scherm echt smal wordt. Op een telefoon zou één regel neerkomen
       op letters van zeventien pixels — dan breekt hij liever netjes in tweeën. */
    font-size: clamp(1.5rem, 4.4vw, 3rem);
    text-wrap: balance;
}

/* De openingsfoto met het filmpje ernaast. De foto bepaalt de hoogte; het
   filmpje rekt mee, zodat de onderkanten gelijk liggen. */
.opbouw-duo {
    display: grid; gap: 16px; margin: 0 0 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: stretch;
}
.opbouw-duo-een { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 820px) { .opbouw-duo { grid-template-columns: minmax(0, 1fr); } }

.opbouw-raster {
    display: grid; gap: 14px; margin: 0 0 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) { .opbouw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Elke foto zit in een knop, zodat je hem met het toetsenbord kunt openen. */
.opbouw-beeld {
    display: block; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
    border-radius: 12px; background: var(--kaart); width: 100%;
}
.opbouw-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opbouw-beeld.plek-breed { border-radius: 14px; aspect-ratio: 16 / 9; }
.opbouw-beeld.plek-foto { aspect-ratio: 4 / 3; }
.opbouw-beeld:hover img { transform: scale(1.02); }
.opbouw-beeld img { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .opbouw-beeld img { transition: none; } }

/* Het filmpje: tot er geklikt wordt staat hier alleen de openingsfoto met een
   afspeelknop. Pas daarna wordt de speler echt geladen. */
.opbouw-film { border-radius: 14px; overflow: hidden; background: var(--kaart); min-height: 180px; }
.opbouw-duo .opbouw-film { height: 100%; }
.opbouw-duo-een .opbouw-film { aspect-ratio: 16 / 9; height: auto; }
.opbouw-film-knop {
    display: grid; place-content: center; gap: 10px; width: 100%; height: 100%;
    min-height: 180px; padding: 24px; cursor: pointer; border: 0;
    color: var(--tekst); font: inherit; font-weight: 700; text-align: center;
    background-color: #000;
    background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.6)), var(--poster, none);
    background-size: cover; background-position: center;
}
.opbouw-film .speelknop {
    width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
    background: var(--rood); color: #fff; font-size: 22px; margin: 0 auto;
    padding-left: 4px;
}
.opbouw-film-knop:hover .speelknop { filter: brightness(1.15); }
.opbouw-film iframe, .opbouw-film video { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; }

/* Alleen de knop, gecentreerd. Er stond een regel tekst boven; die is eruit. */
.opbouw-slot {
    display: grid; place-items: center;
    padding: 34px 20px 6px; text-align: center;
}

/* ---------------- Foto groot bekijken ---------------- */

.lichtbak {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    background: rgba(0, 0, 0, .92); padding: 40px 60px;
}
.lichtbak[hidden] { display: none; }
.lichtbak:focus { outline: none; }
.lichtbak img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lichtbak button {
    position: absolute; border: 0; background: transparent; color: #fff;
    cursor: pointer; line-height: 1; padding: 10px;
}
.lichtbak-sluit { top: 10px; right: 14px; font-size: 38px; }
.lichtbak-vorige, .lichtbak-volgende { top: 50%; transform: translateY(-50%); font-size: 54px; }
.lichtbak-vorige { left: 6px; }
.lichtbak-volgende { right: 6px; }
.lichtbak button:hover { color: var(--rood-fel, #ff3b30); }
@media (max-width: 600px) {
    .lichtbak { padding: 50px 10px; }
    .lichtbak-vorige, .lichtbak-volgende { font-size: 40px; }
}

/* De voet is teruggebracht tot één regel: jaartal, naam en de beheerlink.
   Zonder de vier kolommen hoeft er bovenin geen ruimte meer te zitten. */
.voet-kaal { padding-top: 0; }
.voet-kaal .voet-onder { margin-top: 0; border-top: 0; }

/* Het filmpje middenin de fotoreeks: vier kolommen, en het filmpje neemt er
   twee bij twee van in. Onder de 860 pixels worden het er twee en gaat het
   filmpje over de volle breedte. */
.opbouw-raster-mix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opbouw-raster-mix .film-vak { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) {
    .opbouw-raster-mix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opbouw-raster-mix .film-vak { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}

/* Het filmpje onder de foto's: over de volle breedte, breedbeeld. */
.opbouw-film-breed { aspect-ratio: 16 / 9; margin: 0 0 10px; }

/* Uitgelichte producten met het contactblokje ernaast. De producten krijgen de
   ruimte die overblijft; het blokje is zo breed als het nodig heeft. Onder de
   900 pixels gaat het onder de producten staan, want naast elkaar wordt het
   daar te krap voor allebei. */
.uitgelicht-met-contact {
    display: grid; gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    align-items: start;
}
@media (max-width: 900px) {
    .uitgelicht-met-contact { grid-template-columns: minmax(0, 1fr); }
}
/* auto-fit in plaats van auto-fill: lege kolommen klappen dicht, zodat de
   kaarten de ruimte opvullen in plaats van dat er rechts een gat valt als je
   drie uitgelichte producten hebt en er vier passen. Ze worden dan gewoon wat
   breder. */
.rooster-krap { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Foto's (of productkaartjes) links, het contactblokje rechts ernaast. Zelfde
   verdeling als op de voorpagina, zodat het overal even breed staat. Het
   blokje schuift mee tijdens het scrollen: wie lang door de foto's bladert
   houdt het telefoonnummer in beeld. Dat "meeschuiven" begint pas onder de
   menubalk (die is 74 pixels hoog en blijft zelf ook staan).

   Onder de 900 pixels gaat het blokje onder de foto's staan; naast elkaar
   wordt het daar te krap voor allebei. */
.beeld-met-contact {
    display: grid; gap: 20px; margin: 0 0 10px;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    align-items: start;
}
.beeld-met-contact > .contact-info { position: sticky; top: 92px; }
.beeld-kolom { min-width: 0; }
@media (max-width: 900px) {
    .beeld-met-contact { grid-template-columns: minmax(0, 1fr); }
    .beeld-met-contact > .contact-info { position: static; }
}

/* De knop onderaan het contactblokje: over de volle breedte, zodat hij leest
   als de afsluiting van het blokje en niet als een los knopje in een hoek. */
.contact-info-knop { margin: 18px 0 0; }
.contact-info-knop .knop { display: block; text-align: center; }

/* De makersregel rechtsonder. Zelfde grijs als het copyright ernaast; de link
   wordt rood als je erover gaat, net als elke andere link op de site.

   De zwevende WhatsApp-knop staat precies in die hoek. Daarom houdt de voet
   rechts ruimte vrij zodra die knop er is, anders loopt de laatste regel er
   half achter weg. */
.voet-maker a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.voet-maker a:hover,
.voet-maker a:focus-visible { color: var(--rood); border-bottom-color: currentColor; }
body:has(.wa-zweef) .voet-onder { padding-right: 92px; }
@media (max-width: 620px) { body:has(.wa-zweef) .voet-onder { padding-right: 76px; } }

/* ---------------- Foto's beschermen ----------------
   Dit zet het slepen van een foto naar het bureaublad uit, haalt het
   "bewaar afbeelding"-menu weg dat op een telefoon verschijnt als je lang op
   een foto drukt, en zorgt dat je een foto niet per ongeluk kunt selecteren.

   Wat het NIET doet: iemand tegenhouden die een schermafdruk maakt of het
   adres van de foto uit de broncode plukt. Daar helpt alleen het watermerk
   tegen (Instellingen -> Weergave -> Watermerk). */
body[data-fotos-beschermd] img {
    -webkit-user-drag: none;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
}
body[data-fotos-beschermd] .kaart-beeld,
body[data-fotos-beschermd] .opbouw-beeld { position: relative; }
/* Een doorzichtig laagje over de foto. Daardoor pakt een rechtermuisklik of
   een lange druk niet de foto maar dit laagje — en zit er dus geen "bewaar
   afbeelding" in het menu. Klikken op de foto blijft gewoon werken, want het
   laagje laat klikken door. */
body[data-fotos-beschermd] .kaart-beeld::after,
body[data-fotos-beschermd] .opbouw-beeld::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
}
body[data-fotos-beschermd] .lichtbak img { pointer-events: none; }

/* ---------------- Zwevende WhatsApp-knop ----------------
   Rechtsonder, op elke pagina. In rust een rond groen knopje; wijs je hem aan
   (of kom je er met de tab-toets op), dan schuift de tekst eruit.

   Hij staat net boven de cookiemelding: die is ook vastgezet onderaan, en
   twee dingen over elkaar heen is niets. Zodra de melding weg is, zakt de
   knop terug naar beneden. */

.wa-zweef {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: inline-flex; align-items: center; gap: 0;
    height: 58px; padding: 0 14px; border-radius: 29px;
    background: #25a24c; color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    transition: gap .22s ease, padding .22s ease, background .18s, transform .18s;
}
.wa-zweef:hover, .wa-zweef:focus-visible { background: #1f8f3b; text-decoration: none; transform: translateY(-2px); }
.wa-zweef svg, .wa-zweef img { flex: 0 0 auto; width: 30px; height: 30px; display: block; }
.wa-zweef img { border-radius: 6px; object-fit: contain; }

/* De tekst is er altijd (ook voor schermlezers), maar in rust nul pixels breed. */
.wa-zweef-tekst {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font-weight: 700; font-size: .92rem; opacity: 0;
    transition: max-width .22s ease, opacity .18s ease, margin .22s ease;
}
.wa-zweef:hover .wa-zweef-tekst,
.wa-zweef:focus-visible .wa-zweef-tekst { max-width: 200px; opacity: 1; margin-left: 10px; }

/* Staat de cookiemelding er nog, dan schuift de knop daar precies bovenop.
   Hoe hoog die balk is weet alleen de browser — dat hangt af van de taal en
   de breedte van het scherm. app.js meet hem en zet de hoogte in
   --cookiebalk; hier tellen we er de gewone marge bij op. Zonder die waarde
   (geen balk, of geen javascript) blijft het gewoon 18px. */
body:has(.cookiebar) .wa-zweef { bottom: calc(18px + var(--cookiebalk, 94px)); }
@media (max-width: 620px) {
    .wa-zweef { right: 14px; bottom: 14px; height: 54px; padding: 0 12px; }
    body:has(.cookiebar) .wa-zweef { bottom: calc(14px + var(--cookiebalk, 154px)); }
}

@media (prefers-reduced-motion: reduce) {
    .wa-zweef, .wa-zweef-tekst { transition: none; }
    .wa-zweef:hover { transform: none; }
}
@media print { .wa-zweef { display: none; } }