/* Brede schermen (wens Naty 3-11-2026): de site vult het scherm, de telefoonweergave blijft zoals hij is. */
.nav-breed{display:none}
@media (min-width:900px){
  /* kopbalk met het menu uitgeschreven */
  .navbar{padding:12px clamp(24px,4vw,64px); gap:24px}
  .navbar img{height:30px}
  .nav-breed{display:flex; align-items:center; gap:4px; flex:1; font-size:15px; font-weight:700}
  .nav-breed a, .nb-kop{padding:8px 12px; border-radius:10px; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap}
  .nav-breed a:hover, .nb-kop:hover{background:#FDEDF1; color:var(--rose-dark)}
  .nb-groep{position:relative}
  .nb-kop::after{content:" ▾"; font-size:11px; opacity:.6}
  .nb-sub{display:none; position:absolute; top:100%; left:0; z-index:60; min-width:230px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(58,42,46,.14)}
  .nb-sub a{display:block; font-weight:600}
  .nb-groep:hover .nb-sub, .nb-groep:focus-within .nb-sub{display:block}
  .nb-rechts{margin-left:auto}
  .nb-konto{background:linear-gradient(135deg,var(--rose),var(--orange)); color:#fff!important}
  .nb-konto:hover{opacity:.9; background:linear-gradient(135deg,var(--rose),var(--orange))}

  /* breedte: overzichten breed, lopende tekst leesbaar. Een eigen breedte in de pagina (inlogformulieren e.d.) blijft gelden. */
  main{max-width:1040px; padding-left:32px; padding-right:32px}
  .s-main{max-width:1180px; padding-left:32px; padding-right:32px}
  .a-scherm{max-width:1180px; padding-left:32px; padding-right:32px}
  .s-juridisch{max-width:820px}
  main.sg:not(.sl){max-width:860px}
  main.sl{max-width:560px}
  main.du{max-width:860px}
  main.lv{max-width:720px}
  main.wz-main{max-width:1000px}
  main.pr-art{max-width:800px}

  /* koppen en tekst groeien mee */
  .s-hero{padding-top:30px; padding-bottom:26px}
  .s-hero-inner{max-width:900px}
  .s-hero h1{font-size:30px; margin-bottom:8px}
  .s-hero p{font-size:15.5px; max-width:680px}
  .s-hero .s-knoppen, .s-snel{display:inline-flex; vertical-align:middle}
  .s-snel{margin:0 0 0 10px; padding:0; overflow:visible; flex-wrap:wrap; justify-content:center}
  .s-hero.klein h1{font-size:28px}
  .hero{padding-top:36px; padding-bottom:36px}
  .hero-inner{max-width:900px}
  .hero h1{font-size:30px; line-height:1.2}
  .hero p{font-size:16px}
  .s-main h2{font-size:30px}
  .s-groepkop{font-size:15px; margin-top:26px}
  .s-gids-tip{max-width:520px}

  /* homepage: aanbod in twee kolommen, elk spel een balk */
  #oferta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  #oferta > *{grid-column:1/-1}
  #oferta > .s-kaart{grid-column:auto; margin:0}
  #oferta .s-kaart p{font-size:15px}
  #oferta > h2{margin-bottom:0}
  .sp-balken{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .sp-balken > :only-child{grid-column:1/-1}
  .sp-balk{padding:16px 18px}
  .sp-ik{width:54px; height:54px}
  .sp-tekst b{font-size:17px}
  .sp-tekst small{font-size:13.5px}
  #poradnik{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  #poradnik > *{grid-column:1/-1}
  #poradnik > .s-kaart, #poradnik > a{grid-column:auto; margin:0}
  #kontakt form{max-width:680px}

  .op-balken{grid-template-columns:repeat(3,minmax(0,1fr))}
  .op-balken-alle{grid-column:1/-1}

  /* startscherm in de browser */
  .a-bento{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* winkel */
  .sklep-sectie{max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .sklep-sectie > *{grid-column:1/-1}
  .sklep-sectie > .pakket-kaart{grid-column:auto; margin:0}
  .gids-raster{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

  /* spellen */
  main.sl .sl-bord{max-width:360px}
  main.sl .sl-t{max-width:52px; height:56px; font-size:17px}
  main.sl .sl-t.breed{max-width:78px}
  main.sl .sl-t.sl-ok{max-width:none; height:60px; font-size:19px}
  /* Sprint over de hele pagina: de tekening schaalt vanzelf mee (gra.js: resize) */
  #gra{padding:10px 20px}
  #gra .g-stage{max-width:min(1400px,100%); border-radius:24px}
  html:not(.app) #gra .g-stage{height:calc(100dvh - 76px)}
  #gra .screen > *{width:100%; max-width:680px; margin-left:auto; margin-right:auto}
  #gra .screen > p{text-align:center}
}

/* Grote schermen: tegels naast elkaar in plaats van lange balken (wens Naty) */
@media (min-width:1100px){
  .sp-balken{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp-balken > :only-child{grid-column:auto}
  .sp-rij{flex-direction:column; gap:8px}
  .sp-balk{flex:1; flex-direction:column; align-items:flex-start; gap:12px; padding:20px}
  .sp-balk::after{display:none}
  .sp-beker{width:100%; flex-direction:row; gap:6px; padding:9px}
  .sp-beker small{font-size:13px}
  #oferta{grid-template-columns:repeat(3,minmax(0,1fr))}
  #oferta > .s-kaart{flex-direction:column; gap:12px}
  .a-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .a-tegel, .a-tegel.breed, .a-tegel.hoog{flex-direction:column; align-items:flex-start; padding:20px}
  .a-tegel:not(.breed)::after, .a-tegel .a-pijl{display:none}
  .sklep-sectie > .pakket-kaart{flex-direction:column; align-items:flex-start}
  .a-verder{max-width:760px; margin-left:auto; margin-right:auto}
}