. Die mag niet reageren alsof je erop kunt klikken. */
.bl3 .fkaart--stil:hover{border-color:var(--rand);transform:none}
/* ---- tegels2.css ---- */
/* bl3 — aanvulling op 1op1.css voor de fototegels, de merkenwolk en het
verderblok. Alleen regels die NIET in 1op1.css staan.
Alle opmaak van .fotovak, .soortkaart, .smaakvak, .krat, .soortraster,
.smaakwijzer, .kratraster en .wolkje staat al 1 op 1 in 1op1.css
(schermen/deel2.html, blok "FOTOTEGEL"). Hieronder staan vier dingen die
daar niet in konden staan, elk met de reden erbij. Dit blok hoort NA
1op1.css geladen te worden; de selectors hebben dezelfde zwaarte, dus de
volgorde beslist — net als bij kop2.css.
========================================================================== */
/* 1. De maatbalk zonder JavaScript.
Het prototype zet .smaakvak .maat span op width:0 en laat het script
(deel3.js, de .vul-lus) er daarna de klasse 'aan' op zetten, die de balk
naar var(--deel) laat groeien. Draait dat script niet, dan blijft elke balk
op nul staan en is het maatbalkje weg. CONTRACT.md is daar hard over: de
eindtoestand is de standaard, niets mag op nul of op opacity:0 blijven
hangen als het script niet draait. Deze regel zet de eindbreedte terug als
standaard. De regel .maat span.aan uit 1op1.css blijft gewoon werken en
geeft nog steeds dezelfde breedte, dus mét script verandert er niets. */
.bl3 .smaakvak .maat span{width:var(--deel,10%)}
/* 2. De 44px lucht boven een tweede sectiekop binnen dezelfde sectie.
Het prototype schrijft dat als style="margin-top:44px" op de tweede
in .soorten en in .kratje (schermen_wb.py). De kop
komt hier uit bl3_sectiekop(), die geen inline stijl meegeeft; dit doet
precies hetzelfde en alleen daar waar het prototype het ook doet: op een
sectiekop die direct op een tegelraster volgt. */
.bl3 .soortraster + .sectiekop,
.bl3 .smaakwijzer + .sectiekop,
.bl3 .kratraster + .sectiekop{margin-top:44px}
/* 3. De naad tussen de tegels en de merkenwolk.
In het prototype staan de stijltegels en de merkenwolk in ÉÉN
, gescheiden door alleen die 44px. Hier zijn het
twee losse functies (bl3_tegels en bl3_merken) en dus twee secties, en dan
zou er een streep en tweemaal de sectiepadding tussen komen te staan. Deze
regel haalt dat weg zodra de tweede sectie direct op de eerste volgt: de
negatieve marge neemt precies de onderpadding van de vorige sectie terug
(clamp(50px,8vw,96px), dezelfde waarde als in 1op1.css) en de bovenpadding
wordt de 44px uit het prototype. Staat het blok los, dan gebeurt er niets
en is het een gewone sectie. */
.bl3 .soorten + .vervolg,
.bl3 .kratje + .vervolg,
.bl3 .vervolg + .vervolg{
border-top:0;
margin-top:calc(-1 * clamp(50px,8vw,96px));
padding-top:44px;
}
/* 4. Twee eisen uit CONTRACT.md die het prototype niet invult.
a) Zichtbare focus op alles wat met het toetsenbord bereikbaar is. .fotovak
heeft die al (1op1.css); de links in .wolkje niet. Zelfde omlijning als
bij de vakken, zodat het één geheel blijft.
b) Lange namen. Twee eisen die elkaar bij één uitzondering bijten: een naam
mag niet middenin een woord breken, en hij mag niet onder de fles door
lopen. Voor elke echte naam gaan ze samen: word-break:normal en
hyphens:manual houden de afbreking op een spatie (Avada zet op veel
plaatsen word-break:break-all; die regel wordt hier teruggedraaid), en
de max-width per variant — 62%, 64% en 74%, staat al in 1op1.css —
houdt de tekst naast de fles.
Blijft over: één woord dat op zichzelf al breder is dan die kolom.
overflow-wrap:break-word grijpt alleen dán in, en breekt dat ene woord
in plaats van het onder de fles door te laten lopen en tegen de rand van
het vak af te kappen (wat het prototype doet). Een naam met spaties
raakt dit nooit. */
.bl3 .wolkje a:focus-visible{outline:2px solid var(--knop);outline-offset:3px}
.bl3 .soortkaart b,
.bl3 .smaakvak b,
.bl3 .krat b{word-break:normal;hyphens:manual;overflow-wrap:break-word}
/* bl3 — aanvulling op 1op1.css voor de landingspagina van de slijterij.
Alleen wat NIET in 1op1.css staat.
Alle opmaak van .hero--licht, .hero__fles--trio, .trio, .kast6 (met de zes
kleurwerelden), .tegels, .raster, .tegel, .muur, .kast, .spoor, .rail2,
.kaartje, .sectiekop, .nix en .winkel staat al 1 op 1 in 1op1.css
(schermen/deel2.html). Er blijft één regel over, en die is er alleen omdat
er beweging geschrapt is.
Dit blok hoort NA 1op1.css geladen te worden: de selector heeft dezelfde
zwaarte als de regel daar en wint alleen doordat hij later komt — net als
bij kop2.css, tegels2.css en blokken2.css.
========================================================================== */
/* De streepjes onder de tegels lopen ook zonder script vol.
In 1op1.css staat .tegel__vul op width:0 en pas .tegel__vul.aan zet de
breedte op --deel. Die klasse zette deel3.js (functie "vullen", die ook
.balk2__vul en .trede__vul deed); van dat script is alleen het invaren
overgebleven (bl3_script), dus komt 'aan' er nooit meer op en zou elk
streepje leeg blijven — terwijl de sectiekop de lezer er juist op wijst
("Het streepje laat zien hoe groot een soort is..."). CONTRACT.md is daar
hard over: de eindtoestand is de standaard, zonder JavaScript staat alles
goed. Deze regel zet die eindtoestand terug. Wordt 'aan' later alsnog
gezet, dan verandert er niets — het is dezelfde breedte.
Zelfde ingreep als .balk2__vul in blokken2.css. */
.bl3 .tegel__vul{width:var(--deel,4%)}
/* ---------- Blogband op de slijterijpagina (8 september 2026) ----------
Volle-breedte donkere band met beeld links en uitleg rechts, die naar
/blog/ wijst. Zand alleen op donkere grond, radius 2px, niets beweegt. */
.bl-blogband{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;background:var(--green-d);color:#d9d6cd}
.bl-blogband__inner{max-width:1160px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:center}
.bl-blogband__beeld{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;margin:clamp(2rem,3.6vw,3.2rem) 0}
.bl-blogband__beeld img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.bl-blogband__tekst{padding:clamp(2rem,3.6vw,3.2rem) 0}
.bl-blogband__kicker{display:block;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin:0 0 .9em}
.bl-blogband h2.bl-blogband__kop{color:#fff;margin:0 0 .55em}
.bl-blogband p{color:#c2beb4;max-width:46ch}
.bl-blogband__lijst{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.45rem}
.bl-blogband__lijst li{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);border:1px solid rgba(201,185,141,.45);border-radius:2px;padding:.32rem .6rem .34rem}
.bl-blogband .bl-btn{background:var(--btn);border-color:var(--btn)}
@media(max-width:820px){
.bl-blogband__inner{grid-template-columns:1fr;gap:0}
.bl-blogband__beeld{aspect-ratio:16/9;margin:clamp(1.6rem,4vw,2.2rem) 0 0}
.bl-blogband__tekst{padding:1.4rem 0 clamp(1.8rem,4vw,2.4rem)}
.bl-blogband p{max-width:none}
}
/* bln-start - Nieuw in het schap.
Alles hieronder hoort bij /nieuw-in-het-schap/ en hangt aan
.bl3[data-bl3-cat="nieuw"] of aan een eigen bln-klasse.
Terugweg: alles vanaf deze markering weghalen. */
.bl3[data-bl3-cat="nieuw"]{--bln-messing:#7a6430}
@media (prefers-color-scheme: dark){
.bl3[data-bl3-cat="nieuw"]:not([data-theme="light"]){--bln-messing:var(--zand)}
}
.bl3[data-bl3-cat="nieuw"][data-theme="dark"]{--bln-messing:var(--zand)}
.bl3 .sectiekop h1{font-family:Archivo,\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:700;
font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.022em}
/* DE KOP. Loopt van donkergroen links traag naar wit rechts. De flesfoto's
uit de webshop staan op een witte studio-achtergrond; op dat wit valt die
achtergrond gewoon weg, dus hoeft er niets uitgesneden te worden en zie je
nergens een omlijning. De tekst staat links op het groen, de fles rechts
op het wit. */
.bl3 .hero--nieuw{min-height:78vh;background:linear-gradient(90deg,
#101809 0%, #131c0d 20%, #1c2814 29%, #4a5738 38%, #97a086 46%,
#d8dad2 53%, #f6f6f4 58%, #ffffff 63%, #ffffff 100%)}
/* De waas is een verticaal donker verloop over de HELE kop; die zou de witte
kant vuil maken. Hier alleen een zachte verdieping aan de groene kant. */
.bl3 .hero--nieuw .hero__waas{background:linear-gradient(90deg,
rgba(10,15,6,.55) 0%, rgba(10,15,6,.30) 26%, rgba(10,15,6,0) 46%)}
/* De wolkenlaag knipt zichzelf af (overflow:hidden), en op een halve breedte
gaf dat een zichtbare verticale naad midden in het verloop. Op deze kop
draagt het verloop de diepte al, dus de wolken kunnen hier weg. */
.bl3 .hero--nieuw .sfeer{display:none}
@media (max-width:900px){
/* Smal scherm: alles onder elkaar, dus het verloop van boven naar onder. */
.bl3 .hero--nieuw{background:linear-gradient(180deg,
#101809 0%, #131c0d 34%, #4a5738 52%, #b9beae 64%, #ffffff 76%, #ffffff 100%)}
.bl3 .hero--nieuw .hero__waas{background:linear-gradient(180deg,
rgba(10,15,6,.5) 0%, rgba(10,15,6,0) 44%)}
}
/* Een haarlijn in messing boven de kicker, en een ruimere, iets lichtere
titel: zwaar vet leest als een aanbieding, niet als een kast met whisky. */
.bl3[data-bl3-cat="nieuw"] .hero__tekst .kicker{display:inline-block;padding-top:20px;
border-top:1px solid rgba(201,185,141,.45);letter-spacing:.24em}
.bl3[data-bl3-cat="nieuw"] .hero h1{font-size:clamp(2.5rem,6.6vw,5rem);max-width:13ch;
font-weight:600;letter-spacing:-.018em}
.bl3[data-bl3-cat="nieuw"] .hero__lead{max-width:46ch;font-size:1.12rem;color:#cfcdc0}
.bl3[data-bl3-cat="nieuw"] .hero__rooster{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:0 56px}
/* DE FLES op de witte kant. Vast vak, altijd even hoog, altijd gecentreerd:
daardoor staat elke fles op dezelfde plek, hoe de foto ook is bijgesneden.
Geen schaduw en geen rand: die zouden het vak van de foto juist verraden. */
.bl3 .bln-fles{display:flex;flex-direction:column;align-items:center;gap:16px;
text-decoration:none;color:var(--tekst);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bl3 .bln-fles:hover{transform:translateY(-5px)}
.bl3 .bln-fles:focus-visible{outline:1px solid var(--bln-messing);outline-offset:14px}
.bl3 .bln-fles__beeld{position:relative;display:flex;align-items:center;justify-content:center;
width:100%;height:clamp(260px,34vw,440px)}
/* De studiofoto is niet overal spierwit; daardoor tekende zich een lichtgrijs
kader af tegen het wit van de kop. Dit waas legt wit OVER de randen van de
foto, van doorzichtig in het midden naar dicht wit aan de rand, zodat de
foto in de achtergrond overloopt en er nergens een lijn staat.
(Een mask-image werkte niet: samen met mix-blend-mode verdween de fles.) */
.bl3 .bln-fles__beeld::after{content:"";position:absolute;inset:-2px;pointer-events:none;
background:radial-gradient(ellipse 72% 74% at 50% 47%,
rgba(255,255,255,0) 58%, rgba(255,255,255,.75) 84%, #ffffff 100%)}
.bl3 .bln-fles__beeld img{max-height:100%;max-width:100%;width:auto;height:auto;
object-fit:contain;display:block}
.bl3 .bln-fles__label{text-align:center;display:flex;flex-direction:column;gap:7px;max-width:32ch}
.bl3 .bln-fles__net{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bln-messing);font-weight:700}
.bl3 .bln-fles b{font-size:1rem;font-weight:600;color:#22241e;line-height:1.35}
.bl3 .bln-fles__note{font-size:.82rem;color:#63645c;line-height:1.55}
.bl3 .bln-fles__prijs{font-size:1.05rem;font-weight:700;color:var(--bln-messing);font-variant-numeric:tabular-nums}
/* Ruimere flessenkaarten: er staat nu een uitleg in, dus ze mogen groter. */
.bl3[data-bl3-cat="nieuw"] .fkaart__beeld{height:224px;padding:18px}
.bl3[data-bl3-cat="nieuw"] .fkaart__beeld img{height:188px}
.bl3[data-bl3-cat="nieuw"] .fkaart__tekst{padding:16px 18px 18px;gap:7px}
.bl3[data-bl3-cat="nieuw"] .fkaart .note{font-size:.845rem;line-height:1.62}
.bl3[data-bl3-cat="nieuw"] .fkaart .prijs{color:var(--bln-messing)}
.bl3[data-bl3-cat="nieuw"] .kaarten .sectiekop .kicker{color:var(--bln-messing)}
/* De tussenkopjes per soort. */
.bl3 .bln-groep{display:flex;align-items:baseline;gap:12px;margin:34px 0 16px;
font-family:Archivo,\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.015em;font-size:1.12rem;line-height:1.2;
padding-bottom:9px;border-bottom:1px solid var(--rand)}
.bl3 .bln-groep:first-of-type{margin-top:6px}
.bl3 .bln-groep i{font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.06em;
color:var(--bln-messing);font-variant-numeric:tabular-nums}
.bl3 .bln-groeprij{margin-bottom:6px}
/* De blokkoppen ("Nieuw binnen", "Weer op voorraad") staan midden op het
scherm in plaats van links; de kaarten eronder staan al gecentreerd. */
.bl3[data-bl3-cat="nieuw"] .kaarten .sectiekop{align-items:center;text-align:center;
max-width:66ch;margin-left:auto;margin-right:auto}