/* css/overzicht.css — overzichtspagina (index.html) van de zes productgroepen. Bouwt voort op css/showcase.css
   (kop, held, zegel, knoppen, slot, voet). Mobiel eerst (iPhone 14 Pro Max = 430 px). Rood alleen voor zegels en nummers. */

/* ---------- held ---------- */
.ov-held{padding-bottom:64px}
.ov-held .held-tekst h1{font-size:clamp(2.2rem,1.2rem + 4.2vw,4rem)}
.ov-teller{grid-column:1/-1;margin:14px 0 0;font:400 .8rem/1.6 var(--f-mono);color:var(--grijs1)}
@media (max-width:699px){.ov-held .tak{display:none}.ov-held .lead{font-size:1.12rem}}
.ov-teller b{font-weight:600;color:var(--rood)}
.ov-teller i{font:italic 400 1.05em/1 var(--f-serif)}

.ov-tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.ov-tegels a{position:relative;display:block;text-decoration:none;background:var(--rijst);
  border:1px solid var(--lijn-goud);box-shadow:var(--schaduw-kaart);overflow:hidden;
  transition:transform var(--duur) var(--ease),box-shadow var(--duur) var(--ease),border-color var(--duur) var(--ease)}
.ov-tegels a::after{content:"";position:absolute;inset:4px;border:1px solid var(--lijn-goud-zacht);pointer-events:none}
.ov-tegels img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;transform:scale(1.04);transition:transform var(--duur-lang) var(--ease)}
.ov-tegel-onder{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:22px 10px 10px;
  background:linear-gradient(rgba(var(--rijst-rgb),0),rgba(var(--rijst-rgb),.92) 45%,rgba(var(--rijst-rgb),.98))}
.ov-tegel-onder .num{flex:none}
.ov-tegel-onder b{font:500 .74rem/1.2 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt);hyphens:manual}
.ov-tegels a:hover{transform:translateY(-3px);border-color:var(--dgoud);box-shadow:0 1px 0 rgba(176,138,50,.35),0 14px 32px rgba(26,26,26,.14)}
.ov-tegels a:hover img{transform:scale(1.09)}
@media (min-width:600px){.ov-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .ov-held-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .ov-tegels{gap:14px}
  .ov-tegels li:nth-child(3n+2){translate:0 22px}   /* lichte waaier, als losse prenten op tafel */
  .ov-tegel-onder b{font-size:.78rem}
}

/* ---------- groepsecties ---------- */
.ov-groep{position:relative;padding:56px 0;border-top:1px solid var(--lijn-goud-zacht);scroll-margin-top:var(--kop-hoogte)}
.ov-groep[data-kant=rechts]{background:linear-gradient(rgba(var(--goud-rgb),.06),rgba(var(--goud-rgb),0) 70%)}
.ov-raster{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.ov-raster>*{min-width:0}

.ov-plaat{position:relative;display:block;margin:0;background:var(--rijst);border:1px solid var(--lijn-goud);text-decoration:none;
  box-shadow:0 1px 0 rgba(176,138,50,.25),0 18px 40px rgba(26,26,26,.12),0 2px 6px rgba(26,26,26,.06);
  transition:transform var(--duur-lang) var(--ease),box-shadow var(--duur-lang) var(--ease)}
.ov-plaat img{width:100%;height:auto;aspect-ratio:3/2}
.ov-plaat:hover{transform:translateY(-4px) rotate(-.25deg);box-shadow:0 1px 0 rgba(176,138,50,.35),0 28px 56px rgba(26,26,26,.16),0 2px 6px rgba(26,26,26,.06)}
.ov-onder{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px;
  border-top:1px solid var(--lijn-goud-zacht);background:linear-gradient(90deg,rgba(var(--goud-rgb),.10),rgba(var(--goud-rgb),0) 70%)}
.ov-naam{min-width:0;font:500 .78rem/1.35 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.ov-naam i{display:block;font:italic 400 .92rem/1.3 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs1)}
.ov-3d{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--dgoud);background:rgba(var(--rijst-rgb),.94);color:var(--inkt);
  font:500 11px/1 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.ov-3d svg{width:16px;height:16px;stroke:var(--dgoud);fill:none;stroke-width:1.5}
.ov-plaat:hover .ov-3d{background:var(--goudlicht)}

.ov-tekst{position:relative;display:grid;gap:12px;align-content:start}
.ov-tekst .rubriek{padding-right:70px}
.ov-tekst h2{margin:0;padding-right:70px;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt);hyphens:manual}
.ov-tekst .kalli{position:absolute;right:0;top:-4px;font:400 clamp(56px,14vw,88px)/1 var(--f-kalli);color:var(--inkt);opacity:.9;pointer-events:none}
.ov-tekst .tekst{margin:0;max-width:var(--max-tekst);color:var(--inkt2)}
.ov-tekst .knoppen{margin-top:6px;gap:8px}

.ov-producten{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ov-producten.vijf{grid-template-columns:repeat(5,minmax(0,1fr))}
.ov-producten a{display:grid;gap:6px;text-decoration:none;color:var(--inkt)}
.ov-producten img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--rijst2);border:1px solid var(--lijn-goud-zacht);
  transition:border-color var(--duur) var(--ease),transform var(--duur) var(--ease)}
.ov-producten span{font:500 11px/1.25 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--grijs1);text-align:center;hyphens:manual;min-height:2.5em}
.ov-producten a:hover img{border-color:var(--dgoud);transform:translateY(-2px)}
.ov-producten a:hover span{color:var(--dgoud)}
@media (max-width:420px){.ov-producten.vijf{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (min-width:900px){
  .ov-groep{padding:96px 0}
  .ov-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:center}
  .ov-groep[data-kant=rechts] .ov-plaat{order:2}
  .ov-tekst h2{font-size:1.9rem}
  .ov-groep[data-kant=rechts] .ov-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ov-naam i{display:inline}.ov-naam i::before{content:"· "}
}

/* ---------- werkwijze ---------- */
.ov-werkwijze{padding:56px 0;border-top:1px solid var(--lijn-goud-zacht)}
.ov-werkwijze h2{margin:12px 0 26px;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt)}
.ov-stappen{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.ov-stappen li{position:relative;display:grid;gap:6px;padding:18px 18px 20px 64px;background:rgba(var(--rijst-rgb),.7);
  border:1px solid var(--lijn-goud-zacht);box-shadow:var(--schaduw-kaart)}
.ov-stappen b{font:500 .9rem/1.3 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.ov-stappen li>span:last-child{color:var(--grijs1);font-size:var(--fs-s)}
.ov-stap-nr{position:absolute;left:16px;top:16px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--dgoud);font:500 .95rem/1 var(--f-mono);color:var(--dgoud);background:var(--goudlicht)}
@media (min-width:700px){.ov-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ov-stappen{grid-template-columns:repeat(4,minmax(0,1fr))}.ov-werkwijze{padding:88px 0}}

/* ---------- slot ---------- */
.ov-noot{margin:22px auto 0;max-width:60ch;font-size:var(--fs-s);color:var(--grijs1)}
.ov-noot b{font-weight:600;color:var(--inkt2)}

@media (prefers-reduced-motion:reduce){
  .ov-tegels a:hover,.ov-plaat:hover,.ov-producten a:hover img{transform:none}
  .ov-tegels a:hover img{transform:scale(1.04)}
}