/* Immerlootour — schermen: tussenformaat, desktop en mediaqueries
   Onderdeel van de gesplitste opzet. Zie index.html voor de koppeling. */

/* ═══ smalle telefoons (≤390px, bv. veel Androids en de iPhone SE) ═══
   Iets minder ruimte in de bovenbalk zodat logo + "Etappe X" + profiel er
   samen in passen zonder dat de pagina horizontaal gaat schuiven. */
@media (max-width:390px){
  .top{padding:12px 13px}
  .admin-top{padding:12px 13px}
  .wordmark{font-size:18px;letter-spacing:.05em}
  .top .tag{font-size:12px;letter-spacing:.06em}
  .terug{padding:6px 10px;letter-spacing:.06em}
}
/* Beheer-kop op telefoons: kleinere merknaam zodat "Beheer · Immerlootour" én de
   Sluiten-knop samen passen, van smalle Androids tot grote iPhones. */
@media (max-width:559px){
  .admin-top .wordmark{font-size:16px;letter-spacing:.04em}
}

/* ═══ desktop ═══ */
/* Tussen telefoon en desktop: laat de kolom meegroeien in plaats van een
   smalle strook midden op het scherm te laten staan. */
@media (min-width:560px) and (max-width:819px){
  .app{max-width:620px;box-shadow:0 0 0 1px var(--lijn)}
  .nav,.vastbalk,.balk{max-width:620px}
  .rij,.regel,.renner,.profielregel,.kopieer,.stapregel{padding-left:22px;padding-right:22px}
  .kaart-kop,.blok,.voetnoot,.zoekbalk,.tegels,.puntentabel{padding-left:22px;padding-right:22px}
  .bord{padding:22px 22px 24px}
  .plek{font-size:82px}
}

@media (min-width:820px){
  .app{max-width:1120px;background:var(--papier)}
  .auth{max-width:460px;border-radius:0}
  .top{padding:14px 28px}
  .top-nav button{background:none;border:0;color:rgba(250,250,248,.6);cursor:pointer;
    font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;padding:7px 15px;border-radius:2px}
  .top-nav button[aria-current="page"]{background:rgba(250,250,248,.13);color:var(--krijt)}
  /* Tussen 820 en 1000px (staande tablet) blijft de onderbalk-navigatie staan —
     de bovenbalk-tabs passen daar nog niet naast het logo. Onderbalk wel volle breedte. */
  .nav{max-width:none}
  .inhoud{padding:22px 28px 84px}
  .twee{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
  /* Alleen het krijtbord náást het klassement blijft plakken. Deed hij dat
     overal, dan schoof hij bij het afschermscherm over de betaalgegevens heen. */
  .bord{border-radius:3px}
  #p-stand .twee>.standlinks{position:sticky;top:82px}
  .kaart,.lijst{border:1px solid var(--lijn);border-radius:3px;overflow:hidden}
  .tabs{top:52px;padding:0 28px}
  .tabs button{flex:none;padding:13px 16px 11px}
  .balk,.vastbalk{position:sticky;max-width:none;margin:0;border-radius:3px;
    border:1px solid var(--lijn);margin-top:14px}
  .zone,.bestand,details,.tegels,.puntentabel{margin-left:0;margin-right:0}
  .tegels{grid-template-columns:repeat(4,1fr)}
  .adminvak{padding:22px 28px 84px}
  .kiezer-kop{padding:26px 28px}
  .telbalk{top:0}
  .breed{display:table-cell}

  /* Losse kaarten niet over de volle breedte uitrekken: regels van 1100 pixels
     lezen slecht. Alleen lijsten en tabellen mogen breed worden. */
  #p-ploeg,#p-etappe{max-width:780px;margin:0 auto}
  #p-hulp.on{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  /* Subscherm (formulier/score-opbouw) vol-breed op één kolom, max 780px. */
  #p-hulp.on.enkel{display:block;max-width:780px;margin:0 auto}
  #p-nieuws.on{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #p-nieuws>.nieuwsitem:first-child{grid-column:1/-1}
  #p-meer.on{max-width:760px;margin:0 auto}
  .teamlijst{grid-template-columns:1fr 1fr}
  .nieuwsbanner{border-radius:3px}
  #p-hulp>.voetnoot{grid-column:1/-1}
  .hulp-let{grid-column:1/-1;border-radius:3px}
  .hulp-breed{grid-column:1/-1}

  /* Klassement krijgt op een breed scherm meer lucht en een extra kolom. */
  .rij{padding:13px 22px;gap:16px}
  .rang{width:52px;font-size:23px}
  .naam{font-size:15.5px}
  .naam em{font-size:12.5px}
  .ptn{width:74px;font-size:23px}
  .delta{width:52px;font-size:16px}
  .plek{font-size:88px}
  .bord{padding:24px 22px 26px}

  .renner,.regel,.profielregel,.kopieer,.stapregel{padding-left:22px;padding-right:22px}
  .kaart-kop{padding:16px 22px 12px}
  .blok,.voetnoot{padding-left:22px;padding-right:22px}

  /* Beheer: de twee kaarten bovenaan naast elkaar. */
  .beheerkop{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
    padding:0 0 4px}
  .beheerkop>div>.kaart{margin:0!important}
  /* Alle beheer-kaarten even breed: op desktop levert .adminvak de zijmarge, dus
     de losse 18px-zijmarges van sommige kaarten eruit — zo heeft elke sectie op
     de Deelnemers-, Inhoud- en Status-tab exact dezelfde breedte. */
  .adminvak .kaart,.adminvak .status-kop,.adminvak .bestand,
  .adminvak .melding,.adminvak .schakelrij{margin-left:0!important;margin-right:0!important}
  /* Zeven beheer-tabs passen niet altijd op een smal tabletscherm (820–999px);
     laat de balk dan horizontaal scrollen i.p.v. de pagina te laten overlopen. */
  .tabs{overflow-x:auto}
  .zoekbalk input{max-width:420px}
}

/* Vanaf 1000px is er ruimte voor de bovenbalk-tabs naast het logo; dan verdwijnt
   de onderbalk en krijgt de inhoud weer minder bodemruimte. */
@media (min-width:1000px){
  .top-nav{display:flex;gap:2px}
  .nav{display:none}
  .inhoud{padding-bottom:60px}
  .adminvak{padding-bottom:60px}
  .plakker{bottom:0}
}

@media (min-width:1180px){
  .twee{grid-template-columns:380px 1fr;gap:22px}
  .inhoud{padding:26px 34px 60px}
  .adminvak{padding:26px 34px 60px}
  .tabs{padding:0 34px}
  .top{padding:15px 34px}
}
/* Telefoon/tablet (<1000px): deelnemer-navigatie bovenin de header, net als op
   desktop en net als de Beheer-tabs. De aparte onderbalk vervalt. De tabs krijgen
   een eigen regel onder logo+profiel en scrollen horizontaal als ze niet passen. */
@media (max-width:999px){
  .top{flex-wrap:wrap}
  .top>.wordmark{order:1}
  .top>.top-rechts{order:2;margin-left:auto}
  .top-nav{order:3;display:flex;width:100%;gap:2px;overflow-x:auto;
    margin-top:11px;padding-top:9px;border-top:1px solid rgba(250,250,248,.14);
    -webkit-overflow-scrolling:touch}
  .top-nav button{flex:none;background:none;border:0;cursor:pointer;white-space:nowrap;
    font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:rgba(250,250,248,.6);padding:8px 13px;border-radius:2px}
  .top-nav button[aria-current="page"]{background:rgba(250,250,248,.13);color:var(--krijt)}
  .nav{display:none}
  .inhoud{padding-bottom:26px}
}
@media (max-width:819px){.breed{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}