/* landbouw/css/landbouw.css — pagina "Landbouwwerktuigen" bovenop ../css/showcase.css (tokens uit ../assets/dsd-tokens.css).
   Mobiel eerst (iPhone 14 Pro Max = 430 px). Rood alleen voor zegels en nummers; inkt nooit als groot vlak. */

/* ---------- held: groot stilleven van de hele groep ---------- */
.lb-held .held-raster{align-items:center}
.lb-held h1{font-size:clamp(2rem,1.1rem + 4.2vw,4rem)}
.lb-heldbeeld{position:relative;margin:0;border:1px solid var(--lijn-goud);box-shadow:var(--schaduw-kaart);background:var(--rijst)}
.lb-heldbeeld img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
@media (min-width:641px){.lb-heldbeeld img{aspect-ratio:3/2}}
.lb-heldbeeld .podium-knop{bottom:14px}
/* de pagina-pruimentak botste rechtsboven met het gouden kader van het heldbeeld (dat zelf al een tak draagt): weg */
.lb-held .tak{display:none}

/* ---------- atelier: producttabs boven het podium ---------- */
.lb-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.lb-tab{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;padding:6px 4px 8px;cursor:pointer;
  border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.75);color:var(--inkt2);
  font:500 11px/1.15 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;transition:border-color var(--duur-kort),background var(--duur-kort)}
.lb-tab img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--lijn-goud),0 0 0 3px var(--rijst)}
.lb-tab[aria-checked=true]{border-color:var(--dgoud);background:var(--goudlicht);box-shadow:inset 0 -2px 0 var(--dgoud)}
.lb-tab:hover{border-color:var(--dgoud)}
.lb-tab:focus-visible{outline:2px solid var(--dgoud);outline-offset:2px}
@media (min-width:641px){.lb-tab{flex-direction:row;justify-content:center;gap:10px;font-size:12px;padding:6px 10px}.lb-tab img{width:40px;height:40px}}
.podium.wisselt .podium-beeld{opacity:.35}
.knop[data-actie]{border-color:var(--dgoud)}
.knop[data-actie][aria-pressed=true]{background:var(--goudlicht)}
#lb-omschrijving{min-height:3em}

/* ---------- collectie: kaarten met medaillon (zoals de offerte) ---------- */
.lb-collectie,.lb-werkwijze{position:relative;padding:56px 0}
.lb-collectie{background:linear-gradient(rgba(var(--goud-rgb),.05),rgba(var(--goud-rgb),0) 60%)}
.lb-sectiekop{display:grid;gap:10px;margin-bottom:28px}
.lb-sectiekop h2{margin:0;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.lb-kaarten{list-style:none;margin:0;padding:0;display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.lb-kaarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}}
.lb-kaart{display:grid;gap:14px;align-content:start}
.lb-kaart figure{position:relative;margin:0 0 18px}
.lb-kaart picture img{width:100%;height:auto;aspect-ratio:1/1;border:1px solid var(--lijn-goud-zacht);box-shadow:var(--schaduw-kaart);background:var(--rijst)}
.lb-detail.medaillon{position:absolute;right:-6px;bottom:-22px;width:min(38%,170px);margin:0;border-radius:50%;overflow:visible;box-shadow:none}
.lb-detail.medaillon img{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(26,26,26,.18))}
.lb-kaart-tekst{display:grid;gap:8px;padding-right:4px}
.lb-kaart h3{margin:0;font:500 1.05rem/1.25 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.lb-kaart p{margin:0}
.lb-kaart .knop{justify-self:start}

/* ---------- werkwijze ---------- */
.lb-stappen{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);counter-reset:stap}
@media (min-width:760px){.lb-stappen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lb-stappen li{position:relative;display:grid;gap:8px;align-content:start;padding:18px 16px 18px;border:1px solid var(--lijn-goud-zacht);
  background:rgba(var(--rijst-rgb),.7)}
.lb-stappen li::before{content:"";position:absolute;inset:4px;border:1px solid rgba(var(--dgoud-rgb),.18);pointer-events:none}
.lb-stappen h3{margin:0;font:500 .95rem/1.3 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.lb-stappen p{margin:0;font-size:var(--fs-s);color:var(--inkt2)}
@media (min-width:900px){.lb-collectie,.lb-werkwijze{padding:88px 0}}

/* ---------- ronde 2: typografie zoals de offerte (Oswald voor labels, Cormorant voor waarden; geen monospace) ---------- */
.lb-held .held-tekst>.label{text-wrap:balance}
.lb-held .watermerk{opacity:.045;left:auto;right:-18%;top:6%}
.lb-atelier .bijschrift{font:500 var(--fs-xs)/1.5 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt2);text-wrap:balance}
.lb-atelier .bijschrift .w{font:italic 500 1.06rem/1.3 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs1)}
.lb-atelier .keuze span{font:500 12px/1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase}
.lb-atelier .keuze span small{font:italic 500 13px/1 var(--f-serif);letter-spacing:0;text-transform:none}

/* ---------- atelier: tabs als eigen rij in het raster (desktop links onder de kop) ---------- */
.lb-atelier .lb-tabs{margin:0}
@media (min-width:900px){
  .lb-atelier .groep-raster{grid-template-areas:"kop podium" "tabs podium" "paneel podium"}
  .lb-atelier .lb-tabs{grid-area:tabs;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- hulptekst als pil onderaan, verdwijnt na de eerste interactie ---------- */
.lb-atelier .podium-hint{left:50%;top:auto;bottom:14px;translate:-50% 0;max-width:calc(100% - 32px);white-space:nowrap;
  padding:7px 14px;border:1px solid var(--lijn-goud-zacht);border-radius:999px;background:rgba(var(--rijst-rgb),.92);
  box-shadow:0 4px 12px rgba(26,26,26,.08);color:var(--grijs1);letter-spacing:.16em}
.lb-atelier .podium.gebruikt .podium-hint{opacity:0}

/* ---------- medaillons: papieren rand + gouden ring (zoals pagina 2 en 3 van de offerte) ---------- */
.lb-detail.medaillon{background:var(--rijst)}
.lb-detail.medaillon img{filter:drop-shadow(0 8px 14px rgba(26,26,26,.16))}

/* ---------- iPhone: voorbeeldvenster sticky, keuzes eronder als horizontaal scrollbare chiprijen ---------- */
@media (max-width:640px){
  .lb-atelier .groep-podium{position:sticky;top:var(--kop-hoogte);z-index:5;align-self:start;margin:0 calc(-1 * var(--gutter));
    padding:6px var(--gutter) 4px;background:var(--rijst) url(../../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:512px auto;
    border-bottom:1px solid var(--lijn-goud-zacht);box-shadow:0 8px 14px -10px rgba(26,26,26,.25)}
  .lb-atelier .podium{aspect-ratio:auto;height:min(42svh,92vw)}
  .lb-atelier .bijschrift{margin-top:6px;font-size:11px;min-height:2.9em}
  .lb-atelier .bijschrift .w{font-size:.98rem}
  .lb-atelier .lb-tabs img{width:40px;height:40px}
  .lb-atelier .keuzes,.lb-atelier .knoppen.camera{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 4px;scroll-padding-inline:var(--gutter)}
  .lb-atelier .keuzes::-webkit-scrollbar,.lb-atelier .knoppen.camera::-webkit-scrollbar{display:none}
  .lb-atelier .keuze,.lb-atelier .knoppen.camera .knop{flex:none}
  .lb-atelier .varianten{gap:10px}
  .lb-atelier .paneel{padding-bottom:24px}
}
@media (max-width:640px){.lb-atelier .varianten fieldset,.lb-atelier .knoppen.camera{scroll-margin-top:calc(var(--kop-hoogte) + min(42svh,92vw) + 72px);scroll-margin-bottom:12px}}
/* de bergen (met boompje) niet achter de cursieve intro: links wegvagen op desktop */
@media (min-width:900px){.lb-held .bergen{-webkit-mask-image:linear-gradient(90deg,transparent 0 34%,#000 58%);mask-image:linear-gradient(90deg,transparent 0 34%,#000 58%)}}

/* ---------- ronde 3: iPhone — het beeld direct onder de titel, vóór de intro (eerste scherm = product) ---------- */
@media (max-width:640px){
  .lb-held{padding-top:18px}
  .lb-held .held-raster{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .lb-held .held-tekst{display:contents}
  .lb-held .held-tekst>.label{grid-column:1;grid-row:1}
  .lb-held h1{grid-column:1;grid-row:2;font-size:clamp(1.9rem,1rem + 5.4vw,2.6rem)}
  .lb-held .kalli-kolom{grid-column:2;grid-row:1/span 2;align-self:start}
  .lb-held .lb-heldbeeld{grid-column:1/-1;grid-row:3;margin-top:10px}
  .lb-held .vleugel{grid-column:1/-1;grid-row:4}
  .lb-held .lead{grid-column:1/-1;grid-row:5}
  .lb-held .held-feiten{grid-column:1/-1;grid-row:6}
  /* medaillon binnen het kaartkader, de gouden hoek blijft vrij */
  .lb-kaart .lb-detail.medaillon{right:max(12px,6.5%);bottom:max(12px,6.5%);width:min(34%,150px)}
  .lb-kaart figure{margin-bottom:0}
}

/* ---------- atelier (desktop): onder het podium een detailmedaillon en "Wat wij nodig hebben" (geen leeg vlak) ---------- */
.lb-nodig{display:none}
@media (min-width:900px){
  .lb-nodig{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;margin-top:18px;padding:16px 18px;
    border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.72);position:relative}
  .lb-nodig::before{content:"";position:absolute;inset:4px;border:1px solid rgba(var(--dgoud-rgb),.16);pointer-events:none}
  .lb-nodig .lb-detail.medaillon{position:relative;right:auto;bottom:auto;width:132px;height:132px}
  .lb-nodig .label{margin-bottom:6px}
  .lb-nodig ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
  .lb-nodig li{position:relative;padding-left:16px;font:italic 500 1.02rem/1.35 var(--f-serif);color:var(--grijs1)}
  .lb-nodig li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;rotate:45deg;background:var(--dgoud)}
}

/* ---------- ronde 13: sluitknop als rond icoon binnen de binnenrand (vrij van de gouden hoekornamenten) ---------- */
.lb-atelier .podium-knop.sluit{top:40px;right:40px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;justify-content:center;gap:0}
.lb-atelier .podium-knop.sluit svg{width:20px;height:20px;stroke:var(--inkt);stroke-width:1.6;stroke-linecap:round}
/* ---------- ronde 14: iPhone — compacte atelierkop (intro 2 regels + "Lees meer"), sluitknop op de gouden hoek ---------- */
.lb-meer{display:none}
@media (max-width:640px){
  .lb-atelier .groep-kop{gap:6px}
  .lb-atelier .groep-kop h2{font-size:clamp(1.5rem,1rem + 3vw,1.9rem);margin:0}
  .lb-atelier .groep-kop .kalli{display:none}
  .lb-atelier #lb-omschrijving{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:0}
  .lb-atelier #lb-omschrijving.open{display:block;-webkit-line-clamp:unset;line-clamp:none}
  .lb-meer{display:inline-flex;align-items:center;justify-self:start;min-height:44px;min-width:44px;padding:0 2px;margin:-8px 0 -6px;border:0;background:none;
    font:600 12px/1 var(--f-label,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--dgoud);cursor:pointer}
  .lb-atelier .podium-knop.sluit{top:4px;right:4px}
}
/* bijschrift: op de telefoon de uitvoering op een eigen regel (geen ongelukkige afbreking) */
@media (max-width:640px){
  .lb-atelier .bijschrift .sep{display:none}
  .lb-atelier .bijschrift .w{display:block;margin-top:2px}
}

/* ================= ronde 15: jurypunten ================= */
/* sectiescheidingen: gouden haarlijn die aan de uiteinden vervaagt (L02) i.p.v. een volle lijn over de hele breedte */
.lb-atelier.groep,.lb-collectie,.lb-werkwijze,.slot{border-top:0}
.lb-atelier::before,.lb-collectie::before,.lb-werkwijze::before,.slot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--dgoud-rgb),.55) 22%,rgba(var(--dgoud-rgb),.55) 78%,transparent)}
.slot{position:relative}
/* lead: gouden linkerstreep van 1,5 px (T08/L06) */
.lb-held .lead,.lb-sectiekop .lead,.slot .lead{border-left:1.5px solid #B08A32;padding-left:14px}
.slot .lead{text-align:left;max-width:34em}
/* paginakop-teken 原 op de vaste plek (laatste kolom, ≥ 24 px vrij van de titel), zegel 28 px eronder; klein zegel strak en recht */
.lb-held .held-tekst{column-gap:28px}
.lb-held .kalli-kolom{gap:28px;padding-top:6px}
.lb-held .kalli-kolom .zegel{transform:none}
/* atelier: 配置 verticaal, gedeelde subset */
.lb-atelier .kalli.lb-kalli2{writing-mode:vertical-rl;font-size:clamp(44px,8vw,64px);letter-spacing:.04em;line-height:1}

/* werkwijze: stapnummers als gouden munten op een gestippelde goudlijn (zoals de tijdlijnmedaillons) — geen rood */
.lb-stappen{position:relative}
.munt{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;position:relative;z-index:1;
  font:600 16px/1 var(--f-kop);color:#3A2C12;
  background:radial-gradient(circle at 34% 30%,#F6E3A8 0,#D9B45C 42%,#B08A32 78%,#8E6E26 100%);
  box-shadow:0 0 0 1.5px var(--inkt),0 0 0 4px var(--rijst),0 0 0 5px rgba(var(--dgoud-rgb),.7),0 4px 10px rgba(26,26,26,.18)}
.lb-stappen::before{content:"";position:absolute;left:36px;top:38px;bottom:38px;width:0;border-left:1.5px dotted rgba(var(--dgoud-rgb),.8)}
@media (min-width:760px){.lb-stappen::before{left:8%;right:8%;top:38px;bottom:auto;width:auto;height:0;border-left:0;border-top:1.5px dotted rgba(var(--dgoud-rgb),.8)}}

/* slot: maanschijf met bergen-onderrand, art-deco vleugel, groot 龍-zegel met ruwe rand op −5° (Z01) */
.slot{overflow:hidden;padding-top:72px}
.slot>.container{position:relative;z-index:1}
.lb-slot-maan{position:absolute;left:50%;top:28px;width:min(78vw,460px);aspect-ratio:1;translate:-50% 0;border-radius:50%;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 40% 38%,rgba(247,234,203,.9),rgba(237,215,162,.62) 52%,rgba(221,187,106,.22) 70%,rgba(217,180,92,0) 73%)}
.lb-slot-maan img{position:absolute;left:-12%;width:124%;max-width:none;bottom:12%;opacity:.4;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 72%);mask-image:radial-gradient(closest-side,#000 62%,transparent 72%)}
.lb-zegel-groot{width:72px;padding:0;height:72px;font:400 46px/1 var(--f-kalli);transform:rotate(-5deg);border-radius:6px;
  box-shadow:inset 0 0 0 3px var(--rood),inset 0 0 0 4.5px rgba(248,233,223,.8),0 2px 6px rgba(120,30,20,.2);
  clip-path:polygon(0.0% 1.4%,11.1% 1.6%,22.2% 1.7%,33.3% 2.1%,44.4% 1.6%,55.6% 2.0%,66.7% 0.1%,77.8% 1.0%,88.9% 2.1%,98.6% 0.0%,98.0% 11.1%,99.8% 22.2%,99.0% 33.3%,99.5% 44.4%,98.8% 55.6%,98.7% 66.7%,100.0% 77.8%,99.5% 88.9%,100.0% 99.4%,88.9% 98.0%,77.8% 98.3%,66.7% 99.6%,55.6% 98.2%,44.4% 99.7%,33.3% 98.6%,22.2% 99.7%,11.1% 100.0%,1.9% 100.0%,0.5% 88.9%,0.5% 77.8%,2.2% 66.7%,1.9% 55.6%,0.6% 44.4%,2.1% 33.3%,1.2% 22.2%,1.5% 11.1%)}
.lb-vleugel{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px auto 18px;max-width:360px;height:14px}
.lb-vleugel i{flex:1;height:7px;background:
  linear-gradient(90deg,transparent,#B08A32) 0 0/100% 1px no-repeat,linear-gradient(90deg,transparent 30%,#B08A32) 0 3px/100% 1px no-repeat,
  linear-gradient(90deg,transparent 55%,#B08A32) 0 6px/100% 1px no-repeat}
.lb-vleugel i:last-child{transform:scaleX(-1)}
.lb-vleugel b{width:12px;height:12px;rotate:45deg;border:1.5px solid #B08A32;box-shadow:inset 0 0 0 2.5px var(--rijst),inset 0 0 0 5px #D9B45C}
.lb-tel{font:500 15px/1 var(--f-mono);letter-spacing:.02em;white-space:nowrap;text-transform:none}
/* voet: bergen op ware verhouding, ondergrens als masker naar papier (geen uitgerekte band) */
.lb-voet img{height:100%;object-fit:cover;object-position:50% 100%;opacity:.3;
  -webkit-mask-image:linear-gradient(transparent,#000 45%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 45%,#000 80%,transparent)}

/* atelier desktop: podium loopt mee met de keuzes; detailmedaillon gereserveerd in maanschijfkleur */
@media (min-width:900px){.lb-atelier .groep-podium{position:sticky;top:96px;align-self:start}}
.lb-nodig .lb-detail.medaillon{background:radial-gradient(closest-side,rgba(236,214,152,.55),rgba(236,214,152,.3) 85%,var(--rijst))}

/* iPhone: lettermaten ≥ 14 px (canon §0); tabs sticky onder de kop met dekkend papier, compact zonder duimnagels */
@media (max-width:640px){
  .lb-held .label,.lb-atelier .rubriek .label,.rubriek .label,.label,.lb-nodig .label{font-size:14px}
  .lb-held .held-feiten{font-size:14px;letter-spacing:.16em}
  .lb-atelier .podium-hint{font-size:14px;letter-spacing:.1em}
  .lb-atelier .bijschrift{font-size:14px;letter-spacing:.12em}
  .lb-atelier .keuze span{font-size:14px;letter-spacing:.1em}
  .lb-atelier .keuze span small{font-size:14px}
  .lb-atelier .varianten legend{font-size:14px}
  .lb-meer{font-size:14px}
  .merk-naam{font-size:14px;letter-spacing:.24em}
  .merk-naam small{font-size:14px}
  .lb-atelier .lb-tabs{position:sticky;top:var(--kop-hoogte);z-index:6;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter);
    background:var(--rijst) url(../../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:512px auto}
  .lb-atelier .lb-tab{min-height:44px;padding:4px 2px;justify-content:center;font-size:14px;letter-spacing:.08em}
  .lb-atelier .lb-tab img{display:none}
  .lb-atelier .groep-podium{top:calc(var(--kop-hoogte) + 56px)}
  .lb-atelier .podium{height:min(38svh,88vw)}
  .lb-atelier .podium-knop.sluit{top:38px;right:38px}
  .lb-zegel-groot{width:60px;height:60px;font-size:38px}
  .knop,.podium-knop,.kop summary{font-size:14px;letter-spacing:.16em}
  .lb-tel{font-size:15px;letter-spacing:.02em}
  .voet{font-size:14px;letter-spacing:.12em}
}
@media (max-width:640px){.lb-atelier .varianten fieldset,.lb-atelier .knoppen.camera{scroll-margin-top:calc(var(--kop-hoogte) + 56px + min(38svh,88vw) + 72px)}}