/* *****************************************************************************
********************************************************************************
************************    BSVPB CSS Layout    ********************************
********************************************************************************
********************************************************************************
*/

/* *****************************************************************************
*********************    Global    *********************************************
***************************************************************************** */

* { 
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

.pos-fix { position: fixed; }
.pos-abs { position: absolute; }
.pos-rel { position: relative; }

.flex { display: flex; }

nav, .subnav { 
justify-content: center;
}

nav a, footer a, .subnav a { 
align-content: center;
}

label.hambutton, #teaser:has(input:checked) h3, .subnav, .shadw-wrp { 
width: 100%;
}

#mainlogo, #logo-bsvpb, nav, label.hambutton, .shadw-wrp { 
height: 100%;
}

.img-0 { 
display: block;
margin: auto;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}

h1, h2, h3, h4, #bankverb { 
max-width: 90%;
margin: 2em auto 1em;
}

p, ul, #v-txt { 
width: 90%;
margin: 1em auto;
}

li { 
margin: auto 1em;
padding: 5px;
}

a { text-decoration: none; }

.txt-ct { text-align: center; }

nav a, footer a, .subnav a, #wip { 
text-align: center;
}

p, #v-txt dd, h3, h4, li { 
text-align: justify;
line-height: 1.5;
}

nav a, footer a, #teaser dt, .subnav a, #v-txt dt { 
font-weight: bold;
}

/* *****************************************************************************
*********************    Colors    *********************************************
***************************************************************************** */

body, .ifr-page, .line { background: #3c3d4d; }
#logo-bsvpb, #bpa-img { background: #FDF5E6; }
details { background: #DEB887; }
summary { background: #BC8F8F; }
nav, #teaser, label.hambutton, footer a, .subnav a { background: #20B2AA; }

/* ---------------------------------------- */

h1, h2, h3 { color: #FFD700; }
h4, p, ul, li, #v-txt dd { color: #FDF5E6; }
#teaser h3, #teaser a, nav a, footer a, .subnav a { color: #3c3d4d; }
#v-txt dt, .h3-spende { color: #FFDEAD; }

/* ------  :hover  ------ */
#logo-bsvpb:hover, #bpa-img:hover { background: #bfffef; }
nav a:hover, footer a:hover, .subnav a:hover { background: #80ffff; }
label.hambutton:hover { background: #d62929; }
label.hambutton:hover .line { background: #FDF5E6; }

/* ------  :active  ------ */
#logo-bsvpb:active, #bpa-img:active { background: #FFD700; }
nav a:active, footer a:active, .subnav a:active { 
background: #DAA520; color: #FDF5E6;
}
#hambutton:checked + label.hambutton { background: #d62929; }
#hambutton:checked + .hambutton .line { background: #FDF5E6; }
#teaser:has(input:checked) { background: #3c3d4d; }
#teaser:has(input:checked) h3 { color: #FFD700; }

/* *************  Links  ************** */
.std-link:link { color: #1ac6ff; text-decoration: underline; }
.std-link:visited { color: #1ac6ff; }
.std-link:hover { color: #80dfff; }
.std-link:active { color: #32CD32; }

/* *************  Border  ************* */
.subline { border-bottom: 2px solid #FFD700; }
#teaser dd { border-bottom: 2px solid #3c3d4d; }
#v-txt dt { border-bottom: 2px solid #DEB887; }

/* *************  Shadow  ************* */
#logo-bsvpb, nav, #teaser, .shadw-wrp { 
box-shadow: 0 0 2px 3px #222222 inset, 0 0 5px 3px #222222;
}
label.hambutton { 
box-shadow: 0 0 1px 1px #222222 inset, 0 0 1px 1px #222222;
}
footer a { 
box-shadow: 0 0 2px 2px #222222 inset, 0 -1px 10px 1px #222222;
}
.subnav a { 
box-shadow: 0 0 2px 2px #222222 inset, 0 0 5px 2px #222222;
}

/* ------  :hover  ------ */
nav a:hover { 
box-shadow: 0 0 1px 1px #222222 inset, 0 0 5px 3px #222222;
}

/* ------  :active  ------ */
#logo-bsvpb:active, #bpa-wrp:active > .shadw-wrp { 
box-shadow: 0 0 2px 5px #222222 inset, 0 0 5px 3px #222222;
}
nav a:active { 
box-shadow: 0 0 2px 5px #222222 inset, 0 0 1px 1px #222222;
}
footer a:active { 
box-shadow: 0 0 2px 4px #222222 inset, 0 -1px 10px 1px #222222;
}
.subnav a:active { 
box-shadow: 0 0 2px 4px #222222 inset, 0 0 5px 2px #222222;
}

/* *****************************************************************************
*******************    Main Elements    ****************************************
***************************************************************************** */

/* ***************************************
*************  |  Header  |  *************
*************************************** */

header { 
width: 99%;
height: 12vh;
margin: 4px 0.5% 0;
}
#mainlogo { width: 20%; }
#logo-bsvpb { padding: 10px; }

nav { 
width: 80%;
right: 0;
flex-wrap: wrap;
border-radius: 5px;
}
#hambu2 { 
display: none;
width: 2.5em;
height: 2.5em;
top: 3px;
right: 3px;
}
nav a { 
min-width: 10%;
padding: 1%;
flex-grow: 1;
}
.mob-menu { display: none; }

/* ***************************************
*************  |  Teaser  |  *************
*************************************** */

#teaser { 
left: 0.5%; top: 14vh;
width: 220px;
height: 80%;
transition: width 0.8s, height 0.5s, opacity 0.4s, background 1s;
border-radius: 5px;
}
#teaser h3 { 
margin-top: 1em;
}
#teaser a { float: left; margin-left: 5%; width: 90%; }
#teaser dl { margin: auto; }
#teaser dd { margin: 1% auto 5% auto; padding-bottom: 5%; }

#hambu { 
width: 2.5em;
height: 2.5em;
float: right;
}
input#hambutton, input#hambutton2 { 
display: block;
width: 0;
height: 0;
}
label.hambutton { 
display: block;
border-radius: 4px;
transition: background 0.5s;
}
.line { 
left: 15%;
width: 70%;
height: 10%;
border-radius: 2px;
transition: transform 0.4s, background 1s;
transform-origin: center;
}
.line:nth-child(1) { top: 20%; }
.line:nth-child(2) { top: 45%; }
.line:nth-child(3) { top: 70%; }

#hambutton + .hambutton .line:nth-child(1) { 
transform: translateY(250%) rotate(-45deg);
}
#hambutton + .hambutton .line:nth-child(2){ 
opacity:0;
}
#hambutton + .hambutton .line:nth-child(3){ 
transform: translateY(-250%) rotate(45deg);
}
#hambutton:checked + .hambutton .line { 
transform: none;
opacity: 1;
}
#teaser:has(input:checked) { 
width: 2.5em;
opacity: 0.4;
height: 50%;
}
#teaser:has(input:checked) h3 { 
transform: rotate(-90deg);
position: absolute;
left: 0;
top: 50%;
right: 0;
font-size: 140%;
letter-spacing: 1px;
border-bottom: none;
}
#teaser:has(input:checked) a { display: none; }
#teaser:has(input:checked):hover { opacity: 1; }

/* ***************************************
*************  |  Content  |  ************
*************************************** */

iframe { 
top: 12vh; right: 0.5%;
width: calc(98.5% - 220px);
height: calc(100% - 12vh);
transition: width 0.5s;
border: none;
z-index: -1;
}
#teaser:has(input:checked) + iframe { 
width: calc(98.5% - 2.5em);
}

/* ***************************************
*************  |  Footer  |  *************
*************************************** */

footer { 
right: 0; bottom: 0;
width: 40%; max-width: 650px;
justify-content: space-evenly;
align-items: flex-end;
flex: no-wrap;
}
footer a { 
width: 30%;
height: 1.5em;
border-radius: 20px 20px 0 0;
transition: height 0.4s, opacity 0.3s;
opacity: 0.5;
}
footer a:hover { 
height: 4em;
opacity: 1;
}

/* *****************************************************************************
*******************    Subpages    *********************************************
***************************************************************************** */

.ifr-page { 
padding-bottom: 2em;
}
.subnav { 
top: 5px;
height: 2.5em;
flex-wrap: no-wrap;
z-index: 3;
}
.subnav a { 
min-width: 20%;
margin: 0 1em;
border-radius: 0 0 20px 20px;
opacity: 0.5;
transition: opacity 0.5s;
}
#vorstand { margin-top: 2.5em; }
.subnav a:hover { opacity: 1; }

.bookmark::before { 
content: "";
display: block;
height: 3em;
margin-top: -2.5em;
}
.img-wrp { 
width: 60%;
margin: 2em auto;
}
.shadw-wrp { 
border-radius: 25px;
z-index: 2;
pointer-events: none;
}
#rthpb-img, #v-pic, #bpa-img, #bpa-link { 
border-radius: 28px;
z-index: 1;
}
#v-pic-txt { 
width: 60%;
margin: -1em auto 2em;
}
#v-txt dt { 
width: 50%;
margin-top: 2em;
padding-bottom: 5px;
}
#v-txt dd { margin: 0.5em auto; }

#bpa-link { 
float: right;
width: 20%;
margin: 1em 2em;
}

.h-li li { 
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0 5px;
border-right: 1px solid;
}

/* **********   videos   ********** */

#wip { 
margin: 5% auto;
font-size: 2em;
}

/* #videos .flex { 
flex-wrap: wrap;
width: 95%;
margin: auto;
justify-content: flex-start;
}
.vid-cont:first-child { 
width: 100%;
}
.vid-cont { width: 30%;}

video { 
width: 50%;
height: auto;
margin: auto 10%;
border-radius: 25px;
box-shadow: 10px 10px 15px;
}
@property --vid-lbhide { 
syntax: "<percentage>";
initial-value: -50%;
inherits: false;
}
#vid-lightbox { 
border: yellow solid 2px;
width: 100%;
top: var(--vid-lbhide);
}
.vid-cont a:active { 
--vid-lbhide: 150%;
} */


/* +++++++++++++++  templates  ++++++++++++++++ */

/* video { 
width: 80%;
height: auto;
margin: auto 10%;
border: 6px solid green;
border-radius: 25px;
box-shadow: 10px 10px 15px;
} */