/* 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:1px solid rgba(250,250,248,.22);color:rgba(250,250,248,.72);
    cursor:pointer;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;padding:6px 14px;border-radius:999px;transition:background .12s,color .12s,border-color .12s}
  .top-nav button:hover{color:var(--krijt);border-color:rgba(250,250,248,.45)}
  .top-nav button[aria-current="page"]{background:var(--geel);color:var(--asfalt);border-color:var(--geel)}
  /* 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:9px 28px}
  .tabs button{padding:8px 15px}
  .vastbalk{position:sticky;max-width:none;margin:0;border-radius:3px;
    border:1px solid var(--lijn);margin-top:14px}
  /* De uitslag-actiebalk niet laten plakken op desktop: met de overgeërfde
     bottom:0 + z-index:40 viel de "Uitslag bijwerken"-knop over de vaste
     bovenbalk heen. Op desktop staat hij gewoon onderin de etappekaart. */
  .balk{position:static;max-width:none;margin:14px 0 0;border-radius:3px;
    border:1px solid var(--lijn);box-shadow:none}
  .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:9px 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}
  /* Alle tabbladen zichtbaar op twee regels: de balk wikkelt i.p.v. horizontaal te
     scrollen, zodat je niet meer hoeft te vegen om Hall of Fame en Hulp te vinden. */
  .top-nav{order:3;display:flex;flex-wrap:wrap;width:100%;gap:7px;
    margin-top:11px;padding-top:11px;padding-bottom:2px;border-top:1px solid rgba(250,250,248,.14)}
  .top-nav button{flex:0 1 auto;background:none;cursor:pointer;white-space:nowrap;
    border:1px solid rgba(250,250,248,.22);
    font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:rgba(250,250,248,.72);padding:7px 14px;border-radius:999px;
    transition:background .12s,color .12s,border-color .12s}
  .top-nav button[aria-current="page"]{background:var(--geel);color:var(--asfalt);border-color:var(--geel)}
  .nav{display:none}
  .inhoud{padding-bottom:26px}
}
@media (max-width:819px){.breed{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}