@media screen and (max-width: 599px) and (orientation: portrait) 
{
    #topbalkmobiel {
        height: 80px;
    }
    #topbalkmobiel2
    {
        height: px;
        background-color: ;
    }
    #menucontainermob, #menumob {
         height: 80px;
	     background-color: #ffffff;
    }
    #menu-responsive
    {
	     background-color: #ffffff;
    }
    #menucontainermob
    {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    height: 80px;
	    z-index: 1212;
	    margin-bottom: 80px;
        background-image:  none;
    }
    #menumob
    {
	    display: none;
    }
    #menu-responsive {
        position: absolute;
        top: 60px;
        width: 96%;
        min-height: 100px;
        z-index: 1210;
	    border-top: 2px solid #ffffff;
	    padding: 2%;
    }
    #boventitelmob
    {
	    position: absolute;
	    z-index: 2;
	    display: block;
	    width: 100%;
	    text-align: center;
    }
    #menu-responsive ul 
    {
        padding-left:  20px;
    }
    #menu-responsive ul li a
    {
	    display: inline-block;
	    width: 86%;
	    color: #ca0136;
	    text-decoration: none;
	    line-height: 36px;
	    font-weight: normal;
	    font-size: 18px;
        padding-left: 3%;
        padding-right: 3%;
    }
    #menu-responsive ul li a.selected
    {
	    color: #ffffff;
        background-color: #ca0136;
    }

    #menu-responsive ul > li
    {
	    list-style-type:none;
	    padding:0px;
    }
    #menu-responsive ul li ul li:last-child
    {
	    border-bottom:  0;
    }

    a.mymenu {
        display: block;
        width: 28px;
        height: 28px;
        position: absolute;
        top: 22px;
        left: 10px;
	    z-index: 100;
    }
    a.mymenu:before
    {
        font-family: "Font Awesome\ 5 Free";
        content: "\f0c9"; 
        font-size: 28px;  
        font-weight: 900;
        color: #ca0136;
    }
    
    #mylogo
    {
	    top:  0;
	    right:  0;
	    position: absolute;
	    width:  89px;
	    height:  80px;
	    background: url(/siteimg/basbadminton/logobasbmob.png) no-repeat;
        background-size: contain;
    }
    
    #mobilecontent
    {
        width: 95%;
        margin: auto;
    }
    #mobilecontent img, #mobilecontent img.border
    {
        width: 100%;
        max-width: 740px;
    }
    #mobilecontent a.ilinkli
    {
        font-size: 16px;
    }
    #bottom, #contentcontainer
    {
    background-size: contain;
    }
    .showmobile
    {
	    display:block;
    }
    .removemobile
    {
	    display: none !important;
    }
    #pagecontainer, .pagecontainer
    {
        width: 95%;
    }
    .pagecontainerfull
    {
        width: 100%;
    }
    #rightcontainer
    {
        display: none;
    }
    #contentbackground
    {
        width: 100%;
    }
    #textcontainer
    {
        width: 100%;
        padding-left: 3% !important;
        padding-right: 3% !important;
        min-height: 300px;
        height: 300px;
    }
    a.foto img, img.foto1
    {
    max-width: 100% !important;
    }

    .rechtsfoto
    {
    max-width: 100%;
    margin-bottom: 14px;
    width: 100%;
    }


    .picsslideshowmob
    {
	    padding: 0;
	    margin: 0;
	    width: 100%;
	    z-index: 1;
	    text-align: center;
    }
    .picsslideshowmob img
    {
	    max-width: 100%;
        
	    max-height: 31%;
        
	    text-align: center;
	    margin: auto;
	    display: block;
    }
    img.bovenfoto
    {
	    max-width: 100%;
        
	    max-height: 31%;
        
    }

    table.sponsorlijst tr td img, table.sponsorlijst tr td span
    {
    max-width: 100%;
    }
    input.txt, textarea.txtarea
    {
    width: 100%;
    }
    div.txtimgklein
    {
    float: none !important;
    }
    div.txtimgklein:after
    {
        content: '';
        display: block;
        clear: both;
    }
    img.nwslijstimage
    {
    
    }
    div.nwslijstimageblock
    {
    width: 100%;
    }
    .nwslijstimageblock
    {
        display: inline-block;
    }

    .filecontainer
    {
    overflow-x: hidden;
    }
    div.smoelenboekcontainer
    {
        width: 100%;
        text-align: center;
    }
    div.smoelenboekitem
    {
        width: 100%;
        display: block;

    }
    img.smoelenboekimg
    {
    
    }
    div.youtubevideo iframe
    {
        width: 100%;
    }

    .parcontainer
    {
    width: 98%;
    }

    div.par_tekst div.txtimgklein
    {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    }
    div.par_tekst div.txtimgklein img
    {
    margin-left: 0 !important;
    margin-right: 0 !important;
    }



  /* ":"-kolom verbergen */
  .wsfreeform td.wsdp { display: none !important; }

  /* Elke rij onder elkaar laten vallen */
  .wsfreeform tr { display: block; margin: 12px 0; }
  .wsfreeform td { display: block; width: 100%; padding: 0; }

  /* Kopregels/separators krijgen wat ruimte */
  .wsfreeform .frmvrijkop { margin-top: 16px; }

  /* Label boven veld */
  

  /* Velden volle breedte */
  .wsfreeform input.txt,
  .wsfreeform .frmvrijtext,
  .wsfreeform select.slct,
  .wsfreeform textarea.txtarea {
    width: 100%;
    box-sizing: border-box;
  }

  /* Submitknop ook breed */
  #VerstuurKnop { width: 100%; }



    /* ====================================== */

      .h1tekstafbeelding {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
      }

      /* Fluid titelmaat i.p.v. vaste 66px */
      .h1tekstafbeelding h1 {
        font-size: clamp(28px, 6vw, 42px);
        line-height: 1.2;
        margin: 0;
      }

      /* Afbeelding onder de titel, volle breedte */
      .h1afbeelding {
	    width: 100%;
	    float: right;
      }
    div.h1standaard h1 {
        margin-bottom: 0.5em;
    }
}


@media screen and (max-width: 1024px) 
{
    /* === Mobile hamburger + panel === */
    #headerwrap { position: relative; }

    /* Hamburgerknop rechtsboven, altijd zichtbaar op mobiel */
    #burger {
      position: fixed;
      right: 12px;
      top: 12px;
      width: 40px; height: 40px;
      border: 0; background: transparent; cursor: pointer;
      z-index: 10001;
    }
    #burger .burger-lines,
    #burger .burger-lines:before,
    #burger .burger-lines:after {
      display: block;
      content: "";
      height: 2px; width: 24px; margin: 0 auto;
      background: var(--db-primair-zwart, #0a0a0a);
      position: relative; top: 0;
    }
    #burger .burger-lines:before { position:absolute; top:-7px; }
    #burger .burger-lines:after  { position:absolute; top: 7px; }

    /* Panel schuift in vanaf links */
    #mm-panel {
      position: fixed; inset: 0;
      transform: translateX(-100%);
      transition: transform .25s ease;
      background: #ffffff;
      z-index: 10000;
      padding: 16px 20px 40px;
      overflow-y: auto;
    }
    #mm-panel.open { transform: translateX(0); }

    /* Body scroll blokkeren en burger-animatie */
    body.noscroll { overflow: hidden; }
    body.menu-open #burger .burger-lines { background: transparent; }
    body.menu-open #burger .burger-lines:before {
      top: 0; transform: rotate(45deg); background: #0a0a0a;
    }
    body.menu-open #burger .burger-lines:after {
      top: 0; transform: rotate(-45deg); background: #0a0a0a;
    }

    /* Geen dimlaag */
    #mm-panel.open::before { content: none; }

    /* === Nav in panel === */
    #mobile-nav { margin-top: 8px; }
    #mobile-nav ul { list-style: none; margin: 0; padding: 0; }

    /* Hoofdrijen */
    #mobile-nav li {
      position: relative;                /* referentie voor de toggle */
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #mobile-nav li ul li {
    border-bottom: 0;
    }

    /* Link: extra rechter padding voor de toggle */
    #mobile-nav a {
      display: block;
      padding: 12px 56px 12px 8px;       /* 56px rechts voor de knop */
      text-decoration: none;
      color: #0a0a0a;
      font-size: 16px;
      line-height: 20px;
      min-height: 20px;                  /* stabiele hoogte */
    }

    /* Submenu’s */
    #mobile-nav li > ul {
      display: none;
      padding-left: 12px;
      margin: 6px 0 10px 0;              /* ruimte onder de hoofdlijn */
    }
    #mobile-nav li.open > ul { display: block; }

    /* Toggle als plus/min in vierkantje – vast naast de hoofdlijn */
    #mobile-nav .mm-sub {
      position: absolute;
      right: 8px;
      top: 8px;                          /* vaste positie t.o.v. li, verspringt niet */
      width: 28px; height: 28px;
      line-height: 26px;
      text-align: center;
      border: 1px solid rgba(0,0,0,.25);
      background: transparent;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      padding: 0;
    }

    /* Plus standaard, min bij open */
    #mobile-nav .mm-sub::after { content: "+"; }
    #mobile-nav li.open > .mm-sub::after { content: "−"; }  /* U+2212 */

}