/* ************************************* */
/* ********* | Media Queries | ********* */
/* ************************************* */

@media only screen and (max-width: 600px) { 

#access, #teaser, #mainlogo, footer, .subnav, .bookmark::before { 
display: none !important;
}
#hambu2, .mob-menu { display: initial; }

#hambu2 { z-index: 1; }
#hambutton2 + .hambutton .line:nth-child(1) { 
transform: translateY(250%) rotate(-45deg);
}
#hambutton2 + .hambutton .line:nth-child(2){ 
opacity:0;
}
#hambutton2 + .hambutton .line:nth-child(3){ 
transform: translateY(-250%) rotate(45deg);
}
#hambutton2:checked + .hambutton .line { 
transform: none;
opacity: 1;
}

nav { 
width: 100%;
height: 100%;
}
nav a { 
width: 75%;
font-weight: normal;
flex-grow: initial;
}

header { 
width: 100%;
height: 40vh;
margin: 0;
transition: height 0.4s;
}
header:has(input:checked) { height: 0; }
header:has(input:checked) nav { overflow: hidden; }

iframe { 
width: 100vw;
height: 60vh;
top: 40vh;
transition: height 0.4s, top 0.4s;
z-index: -1;
}
header:has(input:checked) + #teaser ~ iframe { 
height: 100vh;
top: 0;
}

h1, h2, h3, h4, p, ul, #v-txt, #v-txt dt, #bankverb, #v-pic-txt { 
width: 90%;
}

#vorstand { margin-top: 2em; }
#v-pic-txt { margin-top: 1em; }

.img-wrp { 
width: 90%;
margin: 1em auto;
}
.shadw-wrp { border-radius: 5px; }
#rthpb-img, #v-pic, #bpa-img, #bpa-link { border-radius: 8px; }

#bpa-link { 
width: 30%;
margin: 0.5em 1em;
}

h1, h2, #wip { 
font-size: clamp(1em, 6vw, 1.5em);
}
h3, h4, #v-txt dt, p, ul, #v-txt dd, #bankverb { 
font-size: clamp(4vw, 1em, 1.5em);
}
* { hyphens: auto; }

#logo-bsvpb, nav, .shadw-wrp, #bpa-wrp:active > .shadw-wrp { 
box-shadow: 0 0 1px 1px #222222 inset, 0 0 1px 1px #222222;
}
label.hambutton { box-shadow: none; }

#hambutton2:checked + label.hambutton { 
box-shadow: 0 0 1px #222222 inset, 0 0 1px 1px #222222;
}

nav a { box-shadow: 0px 1px #222222; }
nav a:hover { box-shadow: none; }
nav a:active { box-shadow: 0 0 1px 1px #222222 inset, 0 0 1px 1px #222222; }

#wip { 
width: 90%;
margin: 4em auto;
}
}

@media only screen and (min-width: 1200px) { 
.ifr-page, .subnav { 
width: 80%;
margin: auto;
}
}

@media (prefers-reduced-motion: reduce) { 
* { 
animation: none !important;
transition: none !important;
}
}