
/* NUR FOOTER */
@media screen and (max-width: 1530px)
{
  #footer-btn-enable
  {
    display: none;
  }
  
  #footer
  {
    text-align: center;
  }

  #footer-btn-spacer
  {
    display: none;
  }

  #footer-mobile
  {
    display: block; 
    text-align: center;
  }

  #footer-social
  {
    display: block; 
  }

  #footer-mobile-klammer
  {
    height: 100%;
    width: 100%; 
    background: url(../images/DGB-Jugend_Klammerlogo_02_2024_mitClaim.png) no-repeat center center; background-size: 405px;
    cursor: pointer;
  }
}


/* DESKTOP */
/* @media screen and (min-width: 1300px) */
@media screen and (min-width: 1480px)
{
  .tabquer { display: none; }
  .tabhoch { display: none; }
  .phone { display: none; }
  .desktop { display: block; }

  #size_desktop { display: inline; }
  #size_tabquer { display: none; }
  #size_tabhoch { display: none; }
  #size_phone { display: none; }
}

/* DESKTOP SMALL ZWISCHENSTUFE */
@media screen and (min-width: 1024px) and (max-width: 1279px)
{

}


/* TABLET QUER */
/* @media screen and (max-width: 1299px) */
@media screen and (max-width: 1479px)
{
  body
  {
    font-size: 24px;
  }

  h1_ { margin-bottom: 24px; padding: 0px; font-size: 40px; line-height: 40px; font-family: CeraPro-Bold; font-weight: 800 }

  .desktop { display: none; }
  .tabhoch { display: none; }
  .phone { display: none; }
  .tabquer { display: block; }

  #size_desktop { display: none; }
  #size_tabquer { display: inline; }
  #size_tabhoch { display: none; }
  #size_phone { display: none; }

  .header-text
  {
    padding-left: 0px;
  }

  /*
  #index-image
  {
    background-image: url(../images/index_tabquer.jpg?version=2); 
  }
  */

  /*
  #footer-btn-enable
  {
    display: none;
  }

  #footer
  {
    text-align: center;
  }

  #footer-btn-spacer
  {
    display: none;
  }

  #footer-mobile
  {
    display: block; 
    text-align: center;
  }

  #footer-social
  {
    display: block; 
  }

  #footer-mobile-klammer
  {
    height: 100%;
    width: 100%; 
    background: url(../images/DGB-Jugend_Klammerlogo_02_2024_mitClaim.png) no-repeat center center; background-size: 405px;
    cursor: pointer;
  }
  */

  .contentbox
  {
    width: calc(100% - 210px);
    font-size: 18px;
  }

  .contentbox-impressum
  {
    font-size: 14px; 
    line-height: 24px;
  }

  .contentbox-datenschutz
  {
    font-size: 14px; 
    line-height: 24px;
  }  
  
  .btn-anchor
  {
    height: 50px;
    font-size: 19px;
    line-height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
  }
  .btn-anchor-lastitem
  {
    margin-right: 0px;
  }

  #kontaktformular-inner
  {
    width: calc(100% - 200px);
    top: 70px;
    height: auto;
    max-height: calc(100% - 80px);
  }

  .kontakt-input
  {
    width: calc(100% - 140px);
  }
  .kontakt-input-area
  {
    width: calc(100% - 140px);
  }
  .kontakt-message
  {
    width: calc(100% - 140px);
  }

  #kontaktformular-inner-inputs
  {
    margin: 20px; margin-left: 140px;
  }

  .gew-header-javlogo 
  { 
    left: 105px; 
    top: 110px; 
    width: 229px; 
  }
  /*
  .gew-header-arrow 
  { 
    left: calc(50% - 125px); 
    top: -653px; 
    width: 1525px; 
    height: 1206px; 
  }
  */
  
  .gew-header-arrow { top: 70px; height: 500px; background-size: 1525px 1206px; background-position-y: -723px; }
  /* .gew-header-igm-arrow {  } */

  .gew-header-igm-text { left: calc(50% - 198px); top: 210px; width: 395px; }
  .gew-header-bce-text { left: calc(50% - 162px); top: 210px; width: 346px; }
  .gew-header-bau-text { left: calc(50% - 118px); top: 230px; width: 260px; }
  .gew-header-ngg-text { left: calc(50% - 108px); top: 230px; width: 250px; }
  .gew-header-evg-text { left: calc(50% - 134px); top: 215px; width: 300px; }

  .btn-backtotop
  {
    left: calc(100% - 60px); 
    bottom: 180px;
  }

  .gew-header-igm-logo { left: auto; right: 30px; top: 100px; width: 80px }
  .gew-header-ngg-logo { left: auto; right: 30px; top: 75px; width: 150px }
  .gew-header-bce-logo { left: auto; right: 30px; top: 105px; width: 170px }
  .gew-header-evg-logo { left: auto; right: 30px; top: 85px; width: 130px }
  .gew-header-bau-logo { left: auto; right: 30px; top: 70px; width: 150px }

  /*
  .gew-header-igm-logo { position: absolute; left: calc(50% + 322px); top: 70px; width: 80px }
  .gew-header-ngg-logo { position: absolute; left: calc(50% + 270px); top: 75px; width: 150px }
  .gew-header-bce-logo { position: absolute; left: calc(50% + 240px); top: 80px; width: 170px }
  .gew-header-evg-logo { position: absolute; left: calc(50% + 290px); top: 85px; width: 130px }
  .gew-header-bau-logo { position: absolute; left: calc(50% + 265px); top: 70px; width: 150px }
  */

  #teilen
  {
    right: calc(50% - 160px);
    bottom: 60px;
  }
}


/* TABLET HOCH */

@media screen and (max-width: 839px)
/* @media screen and (min-width: 480px) and (max-width: 799px)  */
{

  /*
  #index-jav-logo
  {
    display: block;
    left: 69px;
    top: 114px;
    width: 261px;
  }
  */

  body
  {
    font-size: 24px;
  }
  .desktop { display: none; }
  .tabquer { display: none; }
  .phone { display: none; }
  .tabhoch { display: block; }

  #size_desktop { display: none; }
  #size_tabquer { display: none; }
  #size_tabhoch { display: inline; }
  #size_phone { display: none; }

  .header-text
  {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
  }
  
  /*
  #index-image
  {
    background-image: url(../images/index_tabhoch.jpg?version=2); 
    top: 50px; 
    height: calc(100% - 50px); 
  }
  */

  #arrowdown
  {
    background-image: url(../images/icons/arrow2-down-white.svg);
  }

  .btnGewerkschaft-last
  {
    margin-right: 10px;
  }

  .contentbox
  {
    width: calc(100% - 110px);
  }

  #kontaktformular-inner
  {
    width: calc(100% - 140px);
  }

  .kontakt-input
  {
    width: calc(100% - 40px);
  }
  .kontakt-input-area
  {
    width: calc(100% - 40px);
  }
  .kontakt-message
  {
    width: calc(100% - 40px);
  }

  #kontaktformular-inner-inputs
  {
    margin: 20px; margin-left: 40px;
  }

  #btn-send
  {
    width: 220px;
  }

  .gew-header-javlogo 
  { 
    left: 55px; 
    top: 114px; 
    width: 229px; 
  }
  /*  bleibt weg
  .gew-header-arrow 
  { 
    left: calc(50% - 125px); 
    top: -653px; 
    width: 1525px; 
    height: 1206px; 
  }
  */
  .gew-header-igm-text { left: calc(50% - 148px); top: 210px; width: 395px; }
  .gew-header-bce-text { left: calc(50% - 152px); top: 210px; width: 346px; }
  .gew-header-bau-text { left: calc(50% - 108px); top: 220px; width: 260px; }
  .gew-header-ngg-text { left: calc(50% - 98px); top: 215px; width: 250px; }
  .gew-header-evg-text { left: calc(50% - 126px); top: 205px; width: 300px; }
  
  .btn-backtotop
  {
    left: calc(100% - 45px); 
    bottom: 180px;
  }

  .gew-header-igm-logo { left: auto; right: 30px; top: 100px; width: 80px }
  .gew-header-ngg-logo { left: auto; right: 30px; top: 76px; width: 150px }
  .gew-header-bce-logo { left: auto; right: 30px; top: 86px; width: 170px }
  .gew-header-evg-logo { left: auto; right: 30px; top: 80px; width: 130px }
  .gew-header-bau-logo { left: auto; right: 30px; top: 70px; width: 150px }

  /*
  .gew-header-igm-logo { position: absolute; left: calc(50% + 262px); top: 70px; width: 80px }
  .gew-header-ngg-logo { position: absolute; left: calc(50% + 212px); top: 76px; width: 150px }
  .gew-header-bce-logo { position: absolute; left: calc(50% + 200px); top: 90px; width: 170px }
  .gew-header-evg-logo { position: absolute; left: calc(50% + 220px); top: 80px; width: 130px }
  .gew-header-bau-logo { position: absolute; left: calc(50% + 202px); top: 70px; width: 150px }
  */

  .bulletpoint
  {
    width: 12px;
    background-image: url(../images/icons/arrow2-right.svg); background-size: 8px auto; background-position: center 5px; background-repeat: no-repeat;
  }

  #teilen
  {
    right: calc(50% - 140px);
    bottom: 60px;
  }

  #search-input
  {
    width: 95%; 
  }
}

/*
@media screen and (max-height: 820px)
{
  #index-jav-logo { left: 30px; top: 80px; }
}
@media screen and (max-height: 730px)
{
  #index-jav-logo { left: 20px; top: 70px; width: 230px;}
}
@media screen and (max-height: 560px)
{
  #index-jav-logo { left: 10px; top: 70px; width: 200px;}
}
@media screen and (max-height: 520px)
{
  #index-jav-logo { left: 0px; top: 60px; width: 180px;}
}
@media screen and (max-height: 480px)
{
  #index-jav-logo { width: 120px;}
}
*/

/* PHONE */
/* @media screen and (min-width: 0px) and (max-width: 479px) */
/* @media screen and (max-width: 479px) */
@media screen and (max-width: 684px)
{
  h1 { margin-bottom: 24px; padding: 0px; font-size: 32px; line-height: 32px; font-family: CeraPro-Bold; font-weight: 800 }
  h2 { margin-bottom: 14px; padding: 0px; font-size: 20px; line-height: 22px; font-family: CeraPro-Bold }
  h3 { margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; margin-bottom: 3px; font-family: CeraPro-Bold; margin-block-start: 1.2em }

  /*
  #index-jav-logo
  {
    left: 10px;
    max-width: 157px;
  }
  */


  body {
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      scrollbar-width: none;  /* Firefox */
  }
  body::-webkit-scrollbar { 
      display: none;  /* Safari and Chrome */
  }

  body
  {
    font-size: 18px;
  }
  .desktop { display: none; }
  .tabquer { display: none; }
  .tabhoch { display: none; }
  .phone { display: block; }

  #size_desktop { display: none; }
  #size_tabquer { display: none; }
  #size_tabhoch { display: none; }
  #size_phone { display: inline; }

  #header
  {
    height: 50px;
  }

  .header-text
  {
    font-size: 11px;
    line-height: 50px;
    font-family: CeraPRO-Black;
    padding-left: 0px;
  }

  .header-menu-btn
  {
    height: 50px;
  }

  #header-searchicon
  {
    display: none;
  }

  .header-searchinput
  {
    display: none;
  }

  .header-searchinput-icon
  {
    display: none;
  }

  #footer
  {
    height: 50px;
  }

  .footer-link
  {
    font-size: 10px;
    line-height: 50px;
  }

  #footer-mobile
  {
    height: 70px;
  }

  #footer-mobile-klammer
  {
    height: 100%;
    width: 100%; 
    background: url(../images/DGB-Jugend_Klammerlogo_02_2024_mitClaim.png) no-repeat center center; background-size: 290px;
    cursor: pointer;
  }

  /*
  #index-image
  {
    background-image: url(../images/index_phone.jpg?version=2); 
  }
  */

  .contentlogo
  {
    width: 226px;
  }

  .contentbox
  {
    width: calc(100% - 60px);
    font-size: 14px;
    line-height: 19px; 
  }

  /*
    .contentbox
  {
    width: calc(100% - 40px);
    max-width: 1088px;
    border: 1px solid #E0E0E0; 
    margin-left: auto;
    margin-right: auto;
    background-color: #F8F8F8;
  }
  */

  .contentbox-impressum
  {
    font-size: 10px;
    line-height: 14px;
  }

  .contentbox-datenschutz
  {
    font-size: 10px;
    line-height: 14px;
  }

  .btnGewerkschaft
  {
    float: left;
    width: 121px;
    height: 60px;
    margin-right: 13px;
    margin-bottom: 14px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btnGewerkschaft-last
  {
    margin-right: 0px;
  }

  .btnGewerkschaft-second
  {
    /* margin-right: 0px; */
  }

  #kontaktformular-inner
  {
    width: calc(100% - 30px);
  }

  .kontakt-input
  {
    width: calc(100% - 15px);
  }
  .kontakt-input-area
  {
    width: calc(100% - 15px);
  }
  .kontakt-message
  {
    width: calc(100% - 15px);
  }

  #kontaktformular-inner-inputs
  {
    margin: 20px; margin-left: 15px;
  }

  #btn-send
  {
    width: calc(100% - 0px);
  }


  #pulldownmenu
  {
    top: 50px; 
    height: calc(100% - 50px); 
  }

  #pulldownmenu-inner
  {
    top: 50px;
    width: calc(100% - 30px);
    height: calc(100% - 50px); 
  }

  .pulldownmenu-item
  {
    font-size: 12px;
    line-height: 50px;
    padding-left: 30px;
    width: calc(100% - 30px);
  }

  .pulldown-social-frame
  {
    height: 50px; 
    padding-left: 19px;
  }

  #pulldownmenu-input
  {
    max-width: 270px; 
    width: calc(100% - 90px);
    font-size: 12px; 
    line-height: 26px;  
    margin-top: 25px;
    margin-left: 28px;
  }

  .pulldown-social-btn
  {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 40px;
    width: 40px;
  }

  .gew-header-javlogo 
  { 
    left: 15px; 
    top: 75px; 
    width: 140px; 
  }
  
  /*
  .gew-header-arrow 
  { 
    left: calc(50% - 80px); 
    top: -110px; 
    width: 630px; 
    height: auto;
  }
  */

  .gew-header-arrow { top: 50px; height: 345px; background-size: 630px auto; background-position-y: -160px; }
  /* .gew-header-igm-arrow {  } */
  .gew-header-space { margin-top: 430px; }
  

  .gew-header-igm-text { left: calc(50% - 105px); top: 230px; width: 190px; }
  .gew-header-bce-text { left: calc(50% - 90px); top: 230px; width: 167px; }  
  .gew-header-bau-text { left: calc(50% - 74px); top: 235px; width: 125px; }
  .gew-header-ngg-text { left: calc(50% - 65px); top: 225px; width: 122px; }
  .gew-header-evg-text { left: calc(50% - 80px); top: 225px; width: 145px; }
  
  .gew-header-igm-logo { left: auto; right: 30px; top: 80px; width: 56px }
  .gew-header-bce-logo { left: auto; right: 30px; top: 58px; width: 100px }
  .gew-header-bau-logo { left: auto; right: 30px; top: 50px; width: 85px }
  .gew-header-ngg-logo { left: auto; right: 30px; top: 55px; width: 80px }
  .gew-header-evg-logo { left: auto; right: 30px; top: 60px; width: 80px }

  /*
  .gew-header-igm-logo { position: absolute; left: calc(50% + 55px); top: 50px; width: 56px }
  .gew-header-bce-logo { position: absolute; left: calc(50% + 35px); top: 60px; width: 100px }
  .gew-header-bau-logo { position: absolute; left: calc(50% + 30px); top: 50px; width: 85px }
  .gew-header-ngg-logo { position: absolute; left: calc(50% + 40px); top: 55px; width: 80px }
  .gew-header-evg-logo { position: absolute; left: calc(50% + 40px); top: 60px; width: 80px }
  */

  .mockup-frame
  {
    margin-left: calc(50% - 160px);
    width: 100%;
  }

  .btn-backtotop
  {
    left: calc(100% - 65px); 
    bottom: 135px;
  }

  .gew-mitglied-bottom { margin-left: calc(100% - 259px); width: 259px; height: 262px; background-size: 390px auto; background-position: left center; }

    
}

/* ----------------------------------------------------------------------  */

/* @media screen and (min-width: 1649px) */
@media screen and (min-width: 1966px)
{
  .gew-mitglied-bottom
  {
    display: none;
  }
}

/* @media screen and (max-width: 1649px) */
@media screen and (max-width: 1966px)
{
  .desktop-wide
  {
    display: none;
  }
  .desktop-wide-inv
  {
    display: block;
  }
}

/*
@media screen and (max-width: 699px)
{
  .btn-anchor
  {
    width: 130px;
    text-align: center;
    margin-bottom: 10px;
  }
  .btn-anchor-lastitem
  {
    margin-right: 0px;
  }
}
*/

@media screen and (max-width: 430px)
{
  .btn-anchor
  {
    width: calc(100% - 30px);
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
  }
  .btn-anchor-lastitem
  {
    margin-right: 0px;
  }

  .btnGewerkschaft-last
  {
    margin-right: 0px;
  }
  .btnGewerkschaft-second
  {
    margin-right: 0px;
  }

  .btnGewerkschaft
  {
    width: calc(50% - 10px);
  }
  /*
  #btn-igm { width: calc(50% - 12px); }
  #btn-bce { width: calc(50% - 12px); }
  #btn-bau { width: calc(50% - 12px); }
  #btn-ngg { width: calc(50% - 12px); }
  #btn-evg { width: calc(50% - 12px); }
  */
}


@media screen and (max-width: 360px)
{
  /*
  .btnGewerkschaft
  {
    width: calc(100% - 0px);
  }
  .btnGewerkschaft-last
  {
    margin-right: 0px;
  }
  */

  .btnGewerkschaft
  {
    float: left;
    width: 122px;
    height: 60px;
    margin-right: 15px;
    margin-bottom: 14px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btnGewerkschaft-last
  {
    margin-right: 0px;
  }
  .btnGewerkschaft-second
  {
    margin-right: 0px;
  }

  #search-input 
  {
    width: 240px;
  }
}

