/* ============================================================================
   PiensPlekjes, ontwerp Paspoort. Zie ONTWERPPLAN.md.
   13 september 2026: groen en rosé-bruin eruit, luchtpostpapier, balpeninkt,
   stempelrood en postblauw erin. Newsreader weg, Figtree draagt ook Piens tekst.
   De tokens houden hun oude naam (--paper, --ink, --wine), omdat het
   beheerscherm dezelfde stijl laadt; --wine wijst nu naar het stempelrood.
   Vaste maten per containerquery, geen clamp(), zie de typeschaal in het plan.
   ========================================================================== */
:root{
  --paper:#F5F6F8;        /* luchtpostpapier: koel en licht, zodat eten op foto's straalt */
  --paper-deep:#E6E8EE;
  --card:#FFFFFF;
  --ink:#17181F;          /* balpeninkt, 16,4:1 op papier */
  --ink-soft:#5E6275;     /* meta, 5,6:1 */
  --ink-faint:#676B7E;    /* hints en tellers, 4,9:1; was #8A9A92 met 2,56:1 */
  --line:#DFE2E9;         /* alleen decoratief */
  --line-strong:#80859A;  /* randen van velden, 3,4:1 */
  --stempel:#C8321A;      /* Pien was hier, de hoofdknop, focus; 4,95:1 */
  --stempel-zacht:#FBE7E3;
  --post:#2A45CC;         /* Pien wil hierheen, tekstlinks; 6,9:1 */
  --post-zacht:#E3E8FC;
  --zon-zacht:#FFF1D6;
  --wine:var(--stempel);
  --gold:#E9A529; --gold-rand:#B07A12;
  --ext:#EEF0F4;
  --display:"Gloock", "Iowan Old Style", Georgia, serif;
  --ui:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --voice:var(--ui);
  --r:6px;
  --tik:44px;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--stempel);outline-offset:3px;border-radius:3px}
::selection{background:var(--ink);color:var(--card)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.site{min-height:100vh;container:site / inline-size}
.binnen{padding:0 16px}
@container site (min-width:720px){.binnen{padding:0 32px;max-width:1180px;margin:0 auto}}

/* ---------- kop ---------- */
header.kop{display:flex;align-items:center;gap:12px;padding:14px 0 10px}
.merk{font-family:var(--display);font-size:22px;letter-spacing:-.01em;text-decoration:none;line-height:1}
.merk small{display:none;font-family:var(--ui);font-size:13.5px;color:var(--ink-soft);margin-left:10px;letter-spacing:0}
.kopknoppen{margin-left:auto;display:flex;gap:8px}
.rondje{display:inline-flex;align-items:center;gap:7px;min-height:var(--tik);padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none;position:relative}
.rondje svg{width:17px;height:17px;flex:none}
.rondje:hover{border-color:var(--ink)}
.rondje[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.rondje .teller{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--stempel);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 5px}
@container site (min-width:720px){header.kop{padding:24px 0 14px}.merk{font-size:28px}.merk small{display:inline}}

/* ---------- opening ---------- */
.opening{padding:22px 0 8px}
.vraag{font-family:var(--display);font-weight:400;font-size:38px;line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance}
.opening .onder{font-size:16px;color:var(--ink-soft);margin:10px 0 16px;max-width:46ch}
.zoekzin-kort{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);padding:9px 9px 9px 14px;margin:0 0 14px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.zoekzin-kort:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.zk-zin{flex:1;min-width:0;font-family:var(--display);font-size:18px;line-height:1.35;letter-spacing:-.005em}
.zk-zin u{text-decoration:none;color:var(--stempel);border-bottom:2px solid var(--stempel)}
.zk-knop{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border-radius:9px;background:var(--ink);color:#fff;font-family:var(--ui);font-weight:700;font-size:15px}
.zk-knop svg{width:16px;height:16px}
.zoekzin-kort .teller{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--stempel);color:#fff;font-family:var(--ui);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.steden{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-left:16px}
.steden::-webkit-scrollbar{display:none}
.steden button{flex:none;scroll-snap-align:start;min-height:var(--tik);padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);font-size:15px;font-weight:600;white-space:nowrap}
.steden button b{font-weight:500;color:var(--ink-faint);margin-left:6px}
.steden button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.steden button[aria-pressed="true"] b{color:rgba(255,255,255,.72)}
.actief{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);padding:10px 0 0}
.actief b{color:var(--ink);font-weight:600}
.linkknop{background:none;border:0;padding:0;min-height:var(--tik);color:var(--post);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@container site (min-width:720px){
  .opening{padding:48px 0 12px}
  .vraag{font-size:64px}
  .opening .onder{font-size:18px;margin:14px 0 22px}
  .zoekzin-kort{max-width:680px;margin-bottom:18px;padding:10px 10px 10px 18px}
  .zk-zin{font-size:25px}
  .steden{margin:0;padding:2px 0 6px;flex-wrap:wrap;overflow:visible;scroll-padding-left:0}
}

/* ---------- hoofdstukken per stad ---------- */
.hoofdstuk{padding:18px 0 8px}
.hs-kop{position:sticky;top:0;z-index:6;background:var(--paper);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 0 8px;border-bottom:1.5px solid var(--ink);margin:0 0 16px}
.hs-kop h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0;letter-spacing:-.01em}
.hs-kop span{font-size:13px;color:var(--ink-soft);font-weight:500}
.plekken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
@container site (min-width:600px){.plekken{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px}}
@container site (min-width:900px){
  .hoofdstuk{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;padding:34px 0 16px;border-top:1.5px solid var(--ink)}
  .hs-kop{position:sticky;top:24px;align-self:start;display:block;border-bottom:0;padding:14px 0 0;margin:0;background:transparent}
  .hs-kop h2{font-size:44px}
  .hs-kop span{display:block;margin-top:8px;font-size:13.5px}
  .plekken{gap:38px 22px}
}
@container site (min-width:1100px){.plekken{grid-template-columns:repeat(4,minmax(0,1fr))}}
.leeg{padding:60px 0;text-align:center;font-size:19px;color:var(--ink-soft)}

/* ---------- een plek in de lijst ---------- */
/* Tegels van gelijke maat, staand 4:5, twee naast elkaar op de telefoon. Tot de
   eerste proef van 13 september 2026 was dat één kolom met foto's over de volle
   breedte; Maurits vond de beelden toen te groot en uit verhouding met de tekst. */
.kaart{display:block;color:inherit;text-decoration:none;min-width:0}
.kaart .foto{aspect-ratio:4/5;border-radius:var(--r)}
.kaart:hover .foto>img{transform:scale(1.03)}
.kaart h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;margin:9px 0 2px;overflow-wrap:break-word}
.kaart .meta{font-size:12px;color:var(--ink-soft);font-weight:500;line-height:1.35}
.kaart p{font-size:14px;line-height:1.4;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart .stempel{--m:64px;font-size:8.5px;letter-spacing:.04em;padding:6px}
.kaart .foto .stempel{right:6px;bottom:6px}
@container site (min-width:600px){.kaart h3{font-size:21px}.kaart .meta{font-size:12.5px}.kaart p{font-size:15px}.kaart .stempel{--m:76px;font-size:9.5px;padding:8px}}

/* ---------- beeld ---------- */
.foto{position:relative;overflow:hidden;background:var(--paper-deep)}
.foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.foto .label{position:absolute;right:10px;bottom:8px;z-index:2;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);background:rgba(255,255,255,.9);padding:2px 7px;border-radius:4px}
.bron{position:absolute;left:0;right:0;bottom:0;z-index:2;font-size:11px;line-height:1.35;padding:22px 12px 8px;color:#fff;background:linear-gradient(to top,rgba(10,12,20,.8),transparent)}
.bron a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* De ansichtkaart: het beeld van een plek zonder foto van Pien of van Wikimedia.
   Een kaartuitsnede zegt in een lijst weinig; een kaart met "Groeten uit" en het
   soort plek zegt wat het is en waar. Drie tinten wisselen elkaar af (tint 0 tot 2,
   gekozen uit de id, zodat een plek altijd dezelfde houdt). */
.ansicht{container-type:inline-size;display:flex;flex-direction:column;padding:16px 8% 7%;background:var(--post-zacht);color:var(--ink)}
.ansicht.tint1{background:var(--stempel-zacht)}
.ansicht.tint2{background:var(--zon-zacht)}
.ansicht::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(135deg,var(--stempel) 0 9px,var(--card) 9px 15px,var(--post) 15px 24px,var(--card) 24px 30px)}
.ansicht .groet{font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);line-height:1.3;max-width:calc(100% - 34px);margin-bottom:auto}
.ansicht .woord{font-family:var(--display);font-size:22px;line-height:1;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.ansicht .woord.lang{font-size:17px}
.ansicht .adres{font-size:10.5px;color:var(--ink-soft);margin-top:5px;font-weight:500;line-height:1.3}
.ansicht .lijnen{position:absolute;right:8%;top:16px;width:24px;height:16px;border-top:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong)}
.ansicht .lijnen::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--line-strong)}
/* staat er een stempel op, dan zit die waar op een echte kaart de postzegel zit */
.ansicht:has(.stempel) .lijnen{display:none}
.ansicht:has(.stempel) .groet{max-width:calc(100% - 62px)}
.foto.ansicht .stempel{top:12px;right:6px;bottom:auto}
@container (min-width:260px){
  .ansicht .groet{font-size:11px;max-width:calc(100% - 70px)}
  .ansicht .woord{font-size:40px}
  .ansicht .woord.lang{font-size:30px}
  .ansicht .adres{font-size:13px;margin-top:8px}
  .ansicht .lijnen{top:22px;width:46px;height:30px}
}

/* ---------- de stempel ---------- */
/* Rond, dubbel omrand en schuin: Pien was hier. Gestippeld en recht: ze wil er
   nog heen. Het verschil zit in de vorm, niet alleen in de kleur. De tekst staat op
   volledig wit, want over een donkere foto haalt doorschijnend wit het niet. */
.stempel{--m:88px;--k:var(--stempel);display:grid;place-content:center;text-align:center;width:var(--m);height:var(--m);border-radius:50%;
  border:2px solid var(--k);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px var(--k);background:var(--card);color:var(--k);
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.07em;line-height:1.12;text-transform:uppercase;padding:10px;transform:rotate(-9deg);flex:none}
.stempel small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;margin-top:3px;overflow-wrap:anywhere}
.stempel.wil{--k:var(--post);border-style:dashed;box-shadow:none;transform:none;padding:12px}
.foto .stempel{position:absolute;right:10px;bottom:10px;z-index:3}
.stempel.groot{--m:112px;font-size:12px}
.stempel.groot small{font-size:10.5px}

/* ---------- zoekvenster ---------- */
dialog.zoekvenster{border:0;padding:0;margin:auto auto 0;width:100%;max-width:100%;max-height:90vh;border-radius:18px 18px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 40px rgba(10,12,20,.25)}
dialog.zoekvenster::backdrop{background:rgba(23,24,31,.5)}
dialog.zoekvenster[open]{animation:omhoog .25s ease-out}
@keyframes omhoog{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:720px){dialog.zoekvenster{margin:auto;max-width:600px;border-radius:14px;max-height:86vh}}
.zv{display:flex;flex-direction:column;max-height:inherit}
.zv-kop{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.zv-kop h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0}
.zv-kop button{width:var(--tik);height:var(--tik);border-radius:50%;border:1px solid var(--line-strong);background:var(--card);display:grid;place-items:center}
.zv-kop svg{width:16px;height:16px}
.zv-romp{overflow-y:auto;padding:4px 16px 18px}
.zv-voet{display:flex;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--card)}
.zv-voet .knop{flex:1}
.zv fieldset{border:0;margin:18px 0 0;padding:0}
.zv legend,.zv .etiketje{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);padding:0;margin:0 0 8px}
.zin{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.28;margin:6px 0 0;letter-spacing:-.01em}
.zin .woord{position:relative;display:inline-block;max-width:100%}
.zin .etiket{display:inline-block;color:var(--stempel);border-bottom:2px solid var(--stempel);padding:0 1em 0 .04em;max-width:100%}
.zin select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font:inherit;cursor:pointer;border:0;padding:0;min-height:var(--tik)}
.zin .woord:focus-within .etiket{outline:2px solid var(--stempel);outline-offset:3px;border-radius:3px}
.zin .woord::after{content:"";position:absolute;right:.28em;top:50%;width:.26em;height:.26em;border-right:2px solid var(--stempel);border-bottom:2px solid var(--stempel);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.vrij{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:10px;padding:0 14px;min-height:48px;background:var(--card);margin-top:16px}
.vrij svg{width:18px;height:18px;flex:none;color:var(--ink-soft)}
.vrij input{border:0;background:transparent;font:inherit;font-size:16px;width:100%;color:var(--ink);outline:0;min-height:46px}
.vrij input::placeholder{color:var(--ink-faint)}
.vrij:focus-within{outline:2px solid var(--stempel);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:0 14px;min-height:40px;font-size:14.5px;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.segment{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;max-width:100%}
.segment button{background:var(--card);border:0;border-right:1px solid var(--line);padding:0 14px;min-height:40px;font-size:14.5px;white-space:nowrap}
.segment button:last-child{border-right:0}
.segment button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.sorteer{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);margin-top:18px}
.sorteer select{font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;background:var(--card);padding:0 10px;min-height:40px}

/* ---------- knoppen ---------- */
.knop{background:var(--ink);color:var(--card);border:1px solid var(--ink);border-radius:10px;padding:0 20px;min-height:var(--tik);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s,color .2s}
.knop:hover{background:#2C2E38}
.knop.hoofd{background:var(--stempel);border-color:var(--stempel);color:#fff}
.knop.hoofd:hover{background:#A92915}
.knop.licht{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.knop.licht:hover{border-color:var(--ink);background:var(--card)}
.knop.klein{min-height:40px;padding:0 14px;font-size:14px}
.knop.klein svg,.knop svg{width:16px;height:16px}

/* ---------- kaart van de plekken ---------- */
.wereld{padding:16px 0 40px}
.wereld .kaartvlak{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:10px 0;position:relative}
.wereld .kaartvlak::-webkit-scrollbar{display:none}
.stadskaart{position:relative;min-width:760px}
.stadskaart img{display:block;width:100%;height:auto;border-radius:4px}
.stadskaart .sp{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;border:2.5px solid var(--card);background:var(--stempel);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .15s;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.stadskaart .sp.wil{background:var(--post)}
.stadskaart .sp.stil{background:var(--ink)}
.stadskaart .sp:hover,.stadskaart .sp:focus-visible{transform:translate(-50%,-50%) scale(1.3);z-index:3}
.stadskaart .sp .tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--card);font-size:12px;font-weight:500;padding:4px 9px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.stadskaart .sp:hover .tip,.stadskaart .sp:focus-visible .tip{opacity:1}
@container site (min-width:860px){.stadskaart{min-width:0}}
.wereld svg{display:block;min-width:900px;width:100%;height:auto}
@container site (min-width:720px){.wereld svg{min-width:0}}
.wereld .land-dot{fill:var(--paper-deep)}
.wereld .speld{cursor:pointer}
.wereld .speld circle{fill:var(--stempel);stroke:var(--card);stroke-width:2.5}
.wereld .speld:hover circle,.wereld .speld:focus-visible circle{r:13}
.wereld .speld text{font-family:var(--ui);font-weight:700;font-size:11px;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.wereld .speld .naam{fill:var(--ink);font-weight:600;font-size:11.5px;dominant-baseline:auto}
.wereld .uitleg{font-size:14px;color:var(--ink-soft);margin:10px 2px 0}
.landen{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.landen button{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:0 14px;min-height:var(--tik);font-size:14.5px;display:inline-flex;gap:8px;align-items:center}
.landen button b{font-weight:500;color:var(--ink-faint)}
.landen button:hover{border-color:var(--ink)}

/* ---------- plekpagina ---------- */
.terug{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-soft);font-size:14.5px;font-weight:500;margin:4px 0 8px;min-height:var(--tik)}
.terug:hover{color:var(--ink)}
.terug svg{width:14px;height:14px}
.plek-kop .meta{font-size:13.5px;color:var(--ink-soft);font-weight:500;display:flex;gap:4px 10px;flex-wrap:wrap}
.plek-kop .meta .volgens{color:var(--ink-faint);font-weight:400}
.naamrij{display:flex;align-items:center;gap:12px 18px;margin:8px 0 6px}
.plek-kop h1{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.02;margin:0;letter-spacing:-.015em;text-wrap:balance;flex:1 1 auto;min-width:0}
.plek-kop .kort{font-size:19px;line-height:1.4;color:var(--ink-soft);margin:6px 0 18px;max-width:52ch}
.deelrij{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.deelmelding{font-size:14px;color:var(--post)}
.zusjes{font-size:14px;color:var(--ink-soft)}
.zusjes a{color:var(--post)}
/* mobiel: foto's schuiven zijwaarts, per foto vastklikkend */
.mozaiek{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scrollbar-width:none;scroll-padding-left:16px}
.mozaiek::-webkit-scrollbar{display:none}
.mozaiek .foto{flex:0 0 78%;aspect-ratio:4/5;border-radius:var(--r);scroll-snap-align:start}
.mozaiek.enkel .foto{flex-basis:100%}
.foto.leeg{background:var(--paper-deep)}
@container site (min-width:720px){
  .terug{margin:6px 0 12px}
  .plek-kop h1{font-size:72px}
  .plek-kop .kort{font-size:21px;margin-bottom:24px}
  .mozaiek{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible}
  .mozaiek .foto{flex:none}
  .mozaiek.enkel{grid-template-columns:minmax(0,420px)}
}
.twee{display:grid;grid-template-columns:1fr;gap:34px;padding:30px 0 0}
@container site (min-width:860px){.twee{grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);gap:56px;padding-top:48px}}
.sectie-kop{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.sectie-kop h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0}
.sectie-kop .sub{font-size:14px;color:var(--ink-soft)}
.pien{background:var(--card);border-radius:var(--r);padding:22px 20px;border:1px solid var(--line)}
.pien .kopregel{display:flex;align-items:flex-end;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.pien .groot{font-family:var(--display);font-size:64px;line-height:.85;letter-spacing:-.02em}
.pien .groot small{font-family:var(--ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:10px;font-weight:700}
.pien .wie{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft)}
.pien .wie .pf{width:38px;height:38px;border-radius:50%;border:2px solid var(--stempel);color:var(--stempel);display:grid;place-items:center;font-family:var(--display);font-size:18px;flex:none;background:var(--card)}
.pien .tekst{font-size:19px;line-height:1.55;margin:0}
.pien .tekst p{margin:0 0 1em}
.pien .tekst p:last-child{margin-bottom:0}
.tips{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
.tip{border-top:1.5px solid var(--ink);padding-top:10px}
.tip b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;font-weight:700}
.tip span{font-size:17px}
.geenfoto{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:15px;color:var(--ink-soft)}
@container site (min-width:720px){.pien{padding:30px 32px}.pien .groot{font-size:84px}.pien .tekst{font-size:20px}.pien .wie{margin-left:auto}.tips{grid-template-columns:1fr 1fr}}
aside.praktisch{font-size:15.5px}
aside.praktisch dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
aside.praktisch dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px;font-weight:700}
aside.praktisch dd{margin:0}
aside.praktisch dd a{color:var(--post)}
.kaartje{margin-top:20px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;position:relative;background:var(--paper-deep)}
.kaartje img{width:100%;height:100%;object-fit:cover;display:block}
aside.praktisch .knop{width:100%;margin-top:16px}

/* gastenboek */
.gastenboek{padding:48px 0 0}
.gastenboek .samen{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:15px;color:var(--ink-soft);flex-wrap:wrap}
.gastenboek .samen b{font-family:var(--display);font-weight:400;font-size:30px;color:var(--ink)}
.sterren{display:inline-flex;gap:2px;position:relative;line-height:0}
.sterren svg{width:18px;height:18px;fill:none;stroke:var(--gold-rand);stroke-width:1.4}
.sterren svg.vol{fill:var(--gold)}
.sterren.groot svg{width:24px;height:24px}
.gast{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.gast:last-of-type{border-bottom:1px solid var(--line)}
@container site (min-width:640px){.gast{grid-template-columns:150px 1fr;gap:22px;padding:22px 0}}
.gast .wie{display:flex;gap:10px;align-items:baseline}
.gast .wie b{font-weight:600}
.gast .wie time{font-size:13px;color:var(--ink-soft)}
@container site (min-width:640px){.gast .wie{display:block}.gast .wie b{display:block}}
.gast p{font-size:17px;line-height:1.5;margin:6px 0 0}
.gast .fotos{display:flex;gap:8px;margin-top:12px}
.gast .fotos .foto{width:88px;aspect-ratio:1;border-radius:6px}
form.schrijf{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;scroll-margin-top:20px}
form.schrijf h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 4px}
form.schrijf .uitleg{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px}
form.schrijf .knop{width:100%}
@container site (min-width:720px){form.schrijf{padding:26px 28px}form.schrijf .knop{width:auto}}
.veld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.veld label,.veld .labeltekst{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.veld input[type=text],.veld input[type=url],.veld input[type=number],.veld input[type=password],.veld textarea,.veld select{font:inherit;font-size:16px;padding:10px 12px;min-height:var(--tik);border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);width:100%}
.veld textarea{min-height:120px;resize:vertical;font-size:17px;line-height:1.5}
.veld .hint{font-size:13px;color:var(--ink-faint)}
.rij{display:grid;grid-template-columns:1fr;gap:0 16px}
@container site (min-width:600px){.rij{grid-template-columns:1fr 1fr}}
.kies-sterren{display:inline-flex;flex-direction:row-reverse;gap:0;align-self:flex-start}
.kies-sterren input{position:absolute;opacity:0;width:0;height:0}
.kies-sterren label{cursor:pointer;line-height:0;padding:6px;min-width:var(--tik);min-height:var(--tik);display:grid;place-items:center}
.kies-sterren svg{width:32px;height:32px;fill:none;stroke:var(--gold-rand);stroke-width:1.4;transition:fill .12s}
.kies-sterren input:checked ~ label svg,.kies-sterren label:hover svg,.kies-sterren label:hover ~ label svg{fill:var(--gold)}
.kies-sterren input:focus-visible + label{outline:2px solid var(--stempel);outline-offset:2px;border-radius:4px}
.melding{margin-top:12px;font-size:14.5px;color:var(--ink);display:none}
.melding.fout{color:var(--stempel);font-weight:600}
.nietinvullen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opmerking{font-size:15px;color:var(--ink-soft);margin:0 0 10px}
.nogniet{color:var(--ink-soft)}
.voorbeeld{margin:18px 0 0;padding-top:12px;border-top:1px dashed var(--line-strong);font-size:13px;color:var(--ink-faint)}
.voorbeeld.boven{margin:0 0 18px;padding:9px 12px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--zon-zacht);color:var(--ink-soft);font-size:13px}

/* zwevende knop naar het gastenboek, alleen op de telefoon */
.zweef{position:sticky;bottom:14px;z-index:5;display:flex;justify-content:flex-end;pointer-events:none;margin-top:-52px;height:0}
.zweef a{pointer-events:auto;background:var(--stempel);border-color:var(--stempel);color:#fff;box-shadow:0 8px 22px rgba(200,50,26,.3);border-radius:999px;transform:translateY(-44px)}
@container site (min-width:860px){.zweef{display:none}}

/* google */
.google{margin:44px 0 60px;background:var(--ext);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.google .g{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:Arial,sans-serif;font-weight:700;font-size:20px;color:#4285F4;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.google .toel{font-size:14px;color:var(--ink-soft);flex:1 1 100%}
.google a{color:var(--post);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;min-height:var(--tik);display:inline-flex;align-items:center}
@container site (min-width:720px){.google{padding:22px 28px}.google .toel{flex:1 1 280px}}

/* privacyverklaring */
.privacy{max-width:64ch;padding:8px 0 20px}
.privacy h1{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.05;margin:0 0 6px;letter-spacing:-.015em}
.privacy .kort{font-size:19px;color:var(--ink-soft);margin:0 0 6px}
.privacy .versie{font-size:13px;color:var(--ink-faint);margin:0 0 26px}
.privacy h2{font-family:var(--display);font-weight:400;font-size:24px;margin:30px 0 8px;padding-top:12px;border-top:1.5px solid var(--ink)}
.privacy p{font-size:17px;line-height:1.6;margin:0 0 12px}
.privacy a{color:var(--post)}
@container site (min-width:720px){.privacy h1{font-size:56px}}
footer.voet{border-top:1.5px solid var(--ink);margin-top:40px;padding:20px 0 36px;font-size:13.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
footer.voet .voet-merk{font-family:var(--display);font-size:20px;color:var(--ink)}
footer.voet #beeldbron{font-size:12.5px;line-height:1.5}
footer.voet a{color:inherit}
@container site (min-width:720px){footer.voet{display:grid;grid-template-columns:auto 1fr auto;gap:6px 24px;align-items:baseline}footer.voet #beeldbron{grid-column:1/-1;order:3}}