/* Gsm-versie: wordt als laatste geladen */

.tb-toggle,
.tb-knop {
  display: none;
}

@media (max-width: 760px) {

  /* Menubalk: knop "Menu" + iconen op één rij, menu klapt open */
  .topbalk .wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .tb-knop {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 2px solid #333;
    color: var(--wit);
    font-family: var(--kop);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }

  .tb-streepjes,
  .tb-streepjes::before,
  .tb-streepjes::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--wit);
  }

  .tb-streepjes {
    position: relative;
  }

  .tb-streepjes::before,
  .tb-streepjes::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .tb-streepjes::before { top: -6px; }
  .tb-streepjes::after { top: 6px; }

  .tb-iconen {
    order: 2;
    flex-basis: auto;
    gap: 8px;
  }

  .tb-iconen img {
    width: 28px;
    height: 28px;
  }

  .tb-menu {
    order: 3;
    display: none;
    flex-basis: 100%;
  }

  .tb-toggle:checked ~ .tb-menu {
    display: block;
  }

  .tb-toggle:checked ~ .tb-knop {
    border-color: var(--rood);
  }

  .tb-menu ul {
    display: block;
    margin: 4px 0 2px;
  }

  .tb-menu li {
    border-top: 1px solid #222;
  }

  .tb-menu a {
    display: block;
    padding: 12px 2px;
    font-size: 18px;
  }

  /* Ruimte en titels */
  .wrap {
    padding: 0 16px;
  }

  .kopblok .wrap {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  h2 {
    font-size: 26px;
  }

  .pagina {
    padding-top: 32px;
  }

  .tarieven {
    padding-top: 32px;
  }

  .dienst h2,
  .dienst h3,
  .verhaal h2 {
    font-size: 24px;
  }

  .sectiekop {
    margin-top: 36px;
  }

  .band {
    margin: 32px 0;
    padding: 14px 16px;
    font-size: 16px;
  }

  .resultaat h2 {
    font-size: 24px;
  }

  .resultaat p {
    font-size: 17px;
  }

  .citaat {
    margin-top: 32px;
    font-size: 22px;
  }

  .merk,
  .kader-licht,
  .stappen li {
    padding: 18px;
  }

  .merk h3 {
    font-size: 28px;
  }

  .teaser {
    padding: 22px 18px;
  }

  .teaser h2 {
    font-size: 28px;
  }

  .verhaaltekst {
    margin-top: -8px;
    padding-left: 14px;
    font-size: 17px;
  }

  /* Tijdlijn compacter */
  .tijdlijn {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .tijdlijn li {
    padding: 10px;
    font-size: 14px;
  }

  .tijdlijn strong {
    font-size: 22px;
  }

  /* Tabellen mogen niet buiten het scherm lopen */
  .garantie {
    overflow-x: auto;
  }

  /* Afspraakblok: knoppen over de volle breedte */
  .afspraak .wrap {
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .knop {
    display: block;
    width: 100%;
  }

  .knoppenrij .knop {
    width: auto;
    flex: 1 1 100%;
  }

  .uren th,
  .uren td {
    padding-right: 12px;
    font-size: 15px;
  }

  .lid {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .voet {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .tb-iconen img {
    width: 24px;
    height: 24px;
  }

  .tb-iconen {
    gap: 6px;
  }

  .tijdlijn {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .h1-regel {
    display: block;
  }
}

/* Logo menubalk */
.tb-logo {
  order: 0;
  flex: 0 0 auto;
}

.tb-logo img {
  display: block;
  width: 64px;
  height: 64px;
}

@media (max-width: 760px) {
  .tb-logo img {
    width: 48px;
    height: 48px;
  }

  .tb-knop {
    margin-right: auto;
  }
}
/* Groot logo titelblok, zoals op de flyers */
body .kopblok .wrap {
  display: flex;
  align-items: center;
  gap: 36px;
}

.kopblok .kop-logo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
}

@media (max-width: 760px) {
  body .kopblok .wrap {
    gap: 16px;
  }

  .kopblok .kop-logo {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 380px) {
  .kopblok .kop-logo {
    width: 80px;
    height: 80px;
  }
}
/* Menu in twee nette rijen */
.tb-breuk {
  display: none;
}

@media (min-width: 761px) {
  body .tb-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
  }

  body .tb-menu .tb-breuk {
    display: block;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Titel Home: DTVM op eigen regel, overal */
.h1-regel {
  display: block;
}

/* mobiele verfijning okt 2026 */
#e-bike-tarieven{margin-top:44px}
@media (max-width:600px){
  body .kopblok .wrap > *{min-width:0}
  body .kopblok h1{font-size:clamp(24px,7.4vw,34px);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  body .kopblok .boventitel{letter-spacing:.14em;font-size:13px}
  main .doorlink a{display:inline-block;padding:6px 0}
  main p, main li{overflow-wrap:break-word}
  main a{overflow-wrap:anywhere}
  .bereik-tabel{font-size:14px}
  .bereik-tabel th,.bereik-tabel td{padding:.4rem .3rem}
}

/* logo titelblok mobiel: nooit over de titel (okt 2026) */
.kopblok .kop-logo-link{flex:0 0 auto;display:block;line-height:0}
@media (max-width:600px){
  body .kopblok .wrap{gap:14px}
  body .kopblok .kop-logo-link{flex:0 0 60px;width:60px}
  body .kopblok .kop-logo{width:60px;height:60px}
  body .kopblok h1{font-size:clamp(22px,6.6vw,30px);-webkit-hyphens:manual;hyphens:manual}
}