/* Nieuwsbriefbox naast/onder de NTR-iframespellen (assets/js/spel-zijbox.js).
   Indeling volgt het weekbord van Ozosnel-springconcours: vanaf 1140px staat
   het zijvak rechts naast het spel, smaller eronder. Bij 1140px is de
   contentbreedte 1026px; min 280px vak en 26px tussenruimte houdt het spel op
   720px breed, dat is het minimum waarbij de NTR-spellen goed speelbaar zijn.
   De kolommen staan in de HTML (geen JS nodig voor de indeling) en het vak
   heeft een gereserveerde hoogte, dus er verschuift niets als het gevuld wordt. */
.ntr-kolommen{display:block;max-width:820px}
.spel-hoofd{min-width:0}
.spel-zijbox{margin-top:22px;min-height:262px}
.spel-zijbox[hidden]{display:none}
@media(min-width:1140px){
  .ntr-kolommen{display:grid;max-width:none;grid-template-columns:minmax(0,820px) 280px;gap:26px;align-items:start}
  .spel-zijbox{margin-top:0;min-height:0}
}

.spel-zijbox-kaart{box-sizing:border-box;padding:18px 18px 16px;background:#fffaf0;border:2px solid #d4a44c;
  border-radius:18px;box-shadow:0 6px 16px rgba(57,43,27,.12);color:#27342f}
.spel-zijbox-kaart *{box-sizing:border-box}
.spel-zijbox-kop{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px}
.spel-zijbox-kop h2{margin:0;flex:1 1 auto;min-width:0;font:800 24px/1.08 "Alegreya",Georgia,serif;letter-spacing:-.01em;color:#315744}
.spel-zijbox-brief{flex:0 0 auto;width:34px;height:auto;margin-top:2px}
.spel-zijbox-kaart p{margin:0 0 12px;max-width:none;font-size:15px;line-height:1.45;color:#3d4a43}
.spel-zijbox-label{display:block;margin:0 0 5px;font-size:14px;font-weight:700}
.spel-zijbox-rij{display:flex;flex-direction:column;gap:10px}
.spel-zijbox-invoer{width:100%;min-width:0;margin:0;padding:11px 12px;border:2px solid rgba(39,52,47,.35);
  border-radius:10px;background:#fff;color:#27342f;font:400 16px/1.2 "Source Sans 3",system-ui,sans-serif}
.spel-zijbox-invoer:focus-visible{outline:3px solid #315744;outline-offset:1px}
.spel-zijbox-knop{width:100%;margin:0;justify-content:center;text-align:center;white-space:nowrap;cursor:pointer}
.spel-zijbox-knop:focus-visible{outline:3px solid #315744;outline-offset:3px}
a.spel-zijbox-knop{display:inline-flex;text-decoration:none}
.spel-zijbox-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.spel-zijbox-status{margin:0;font-size:14px;font-weight:600;line-height:1.35}
.spel-zijbox-status:not(:empty){margin-top:10px}
.spel-zijbox-status p{margin:0 0 8px;font-size:14px;color:inherit}
.spel-zijbox-status button:focus-visible,.spel-zijbox-status a:focus-visible{outline:3px solid #315744;outline-offset:2px}
.spel-zijbox-kaart p.spel-zijbox-klein{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#53615a}
.spel-zijbox-kaart p.spel-zijbox-klein a{color:#315744;font-weight:700;text-decoration:underline}
.spel-zijbox-kaart a:focus-visible{outline:2px solid #315744;outline-offset:2px}

/* Tweede plek voor later (cadeautip of partner). Leeg = onzichtbaar. */
.spel-zijbox-slot{margin-top:16px}
.spel-zijbox-slot:empty{display:none}

/* Onder het spel is er breedte genoeg voor veld en knop naast elkaar. */
@media(max-width:1139px){
  .spel-zijbox-rij{flex-direction:row;flex-wrap:wrap}
  .spel-zijbox-invoer{flex:1 1 220px;width:auto}
  .spel-zijbox-knop{flex:0 0 auto;width:auto;padding-left:26px;padding-right:26px}
}
@media(max-width:480px){
  .spel-zijbox{min-height:388px}
  .spel-zijbox-kaart{padding:16px 15px 14px;border-radius:16px}
  .spel-zijbox-rij{flex-direction:column}
  .spel-zijbox-invoer,.spel-zijbox-knop{width:100%;flex:0 0 auto}
}
@media print{.spel-zijbox{display:none!important}}

/* De pagina-kolom was 820px breed; het raster met zijvak heeft meer ruimte
   nodig, al het andere (terug-link, tips, uitleg) blijft op 820px. */
.ntr-pagina{max-width:1126px}
.ntr-pagina>:not(.ntr-kolommen){max-width:820px}

/* Instagram-kaart (proefgroep ig, zelfde loting als eindframe.js). */
.spel-zijbox-kaart a.eig-profiel{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:inherit;text-decoration:none}
.spel-zijbox-kaart .eig-ring{flex:0 0 auto;display:block;width:50px;height:50px;padding:2.5px;border-radius:50%;
  background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.spel-zijbox-kaart img.eig-foto{display:block;width:100%;height:100%;margin:0;border:2.5px solid #fffaf0;border-radius:50%;background:#fbf1dc}
.spel-zijbox-kaart .eig-naam{display:flex;flex-direction:column;min-width:0}
.spel-zijbox-kaart .eig-titel{font:800 20px/1.1 "Alegreya",Georgia,serif;color:#315744}
.spel-zijbox-kaart .eig-handle{margin-top:2px;font:700 14px/1.2 "Source Sans 3",system-ui,sans-serif;color:#53615a}
.spel-zijbox-kaart a.eig-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 12px;border-radius:9px;overflow:hidden;text-decoration:none}
.spel-zijbox-kaart a.eig-tegels img{display:block;width:100%;height:auto;aspect-ratio:4/5;margin:0;object-fit:cover;object-position:top;background:#f4e2bd}
.spel-zijbox-kaart a.eig-tegels:focus-visible,.spel-zijbox-kaart a.eig-profiel:focus-visible{outline:3px solid #315744;outline-offset:2px}
.spel-zijbox-kaart .eig-onder{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.spel-zijbox-kaart .btn.eig-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.spel-zijbox-kaart .btn.eig-knop svg{display:block;width:20px;height:20px;flex:0 0 auto}
.spel-zijbox-kaart .eig-qr{display:flex;align-items:center;gap:10px;font:600 13px/1.25 "Source Sans 3",system-ui,sans-serif;color:#53615a}
.spel-zijbox-kaart .eig-qr img{display:block;width:64px;height:64px;margin:0;border-radius:6px;border:1px solid rgba(39,52,47,.15)}
.spel-zijbox-kaart p.eig-bedankt{margin:0;font:700 14.5px/1.35 "Source Sans 3",system-ui,sans-serif;color:#1f6b3f}
/* Onder het spel (smaller dan 1140px): knop en QR naast elkaar, posts niet te hoog. */
@media(max-width:1139px){
  .spel-zijbox-kaart--ig{max-width:560px}
  .spel-zijbox-kaart .eig-onder{flex-direction:row;align-items:center;flex-wrap:wrap}
  .spel-zijbox-kaart .btn.eig-knop{flex:1 1 auto}
}
@media(max-width:480px){
  .spel-zijbox-kaart a.eig-tegels img{aspect-ratio:1/1}
}

/* Winactie Happy Socks van Sokken.nl (t/m 8 nov 2026, spel-zijbox.js). Het
   touw staat in sokkenactie.css; hier de twee dozen als keuzeknoppen. */
.szs-kampen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.szs-kamp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;margin:0;padding:6px 6px 8px;
  border:3px solid #d9cfbd;border-radius:14px;background:#fff;color:#27342f;cursor:pointer;font:inherit;line-height:1.1}
.szs-kamp img{display:block;width:100%;max-width:170px;height:auto;aspect-ratio:1/1;border-radius:9px;object-fit:cover}
.szs-naam{font:800 17px/1.1 "Alegreya",Georgia,serif;color:#3f6f86}
.szs-kamp--kat .szs-naam{color:#c4762a}
.szs-pil{display:inline-block;padding:4px 10px;border-radius:999px;background:#f1ebe0;color:#4c5a52;font:700 13px/1.2 "Source Sans 3",system-ui,sans-serif;white-space:nowrap}
.szs-kamp--hond.is-gekozen{border-color:#3f6f86;background:#e3eef3}
.szs-kamp--kat.is-gekozen{border-color:#c4762a;background:#f8e8d4}
.szs-kamp.is-gekozen .szs-pil{background:#315744;color:#fff}
.szs-kamp:focus-visible{outline:3px solid #315744;outline-offset:2px}
.spel-zijbox-kaart .szs-stand{margin:4px 0 12px}
.spel-zijbox-kaart .szs-stand .sok-stand-cijfers b{font-size:22px}
.spel-zijbox-kaart .szs-stand .sok-touw{height:38px;margin:0 44px}
.spel-zijbox-kaart .szs-stand .sok-touw::before{top:15px;height:9px}
.spel-zijbox-kaart .szs-stand .sok-trekker{width:38px;height:38px;border-width:2px}
.spel-zijbox-kaart .szs-stand .sok-trekker--hond{left:-44px}
.spel-zijbox-kaart .szs-stand .sok-trekker--kat{right:-44px}
.spel-zijbox-kaart .szs-stand .sok-knoop{top:4px;width:24px;height:29px}