body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; }

hr.clear { clear: both; border-color: transparent;}

h1 { margin: 2.5em 0; text-align: center; }
h2 { margin-top: 3em; text-align: center; }
h3 { margin-top: 2em; text-align: center; }

hr.clear + h2 { margin-top: 1em;}
hr.clear + h3 { margin-top: 0em;}

a.more { text-decoration: none; color: #004B32; font-weight: bold; }
h3 a  { text-decoration: none; color: #004B32; font-weight: bold; }

a.int { font-weight: bold; text-decoration: none; color: #ABC600; letter-spacing: 1px;}
a.ext { font-weight: bold; text-decoration: none; color: #0048E0;}
a.glp { font-weight: bold; text-decoration: none; color: #ABC600;}



a.pdf {padding-right: 0.75em; background-image: url("../media/icons/pdf xs.png"); background-repeat: no-repeat; background-position: center right; }



div.text-Q div.quer { margin: 2em 0 5em 0;}
div.text-Q div.quer img { width: 100%;}
div.text-Q p { text-align: justify; line-height: 125%;}
div.text-Q li { padding-top: 0.5em; padding-bottom: 1em;}
div.text-Q sub { font-size: 66%;}
div.text-Q #opc_ref li { padding-top: 0em; padding-bottom: 0em;}

@media only screen and (min-width: 650px) {
    div.text-Q div > iframe { display: block; width: 560px; height: 315px; margin: auto; }
}

@media only screen and (max-width: 649px) {
    div.text-Q div > iframe { display: block; width: 100%; height: 50vw; margin: auto; }
}





/* ================================================================================
   Burger-Menus
   ================================================================================ */

div.burger > div {
    display: none;
    width: 10em;
    position: absolute;
    bottom: 0;
    padding: 1em 1em 2.25em 1em;
    background-color: rgba(242,246,249,0.95);
    font-size: 75%;
    border-radius: 20px;
}

div.burger:hover > div { display: block;}
div#main-nav div.burger > div a { color: #004B32; text-align: left; padding: 0.2em 0.4em; width: 90%;}

qdiv#bm-some > div { bottom: 1.5em; padding: 1em; }
div#bm-some > div > a { display: inline; padding: 0 !important; }
div#main-nav > div#bm-some > div > a:hover { background-color: transparent; animation: none;}
div#bm-some > div > a > img { width: 32px; filter: grayscale(0%); }
div#bm-some > div > div { margin-bottom: 1em; }




/* ================================================================================
   bar-top
   ================================================================================ */

div#bar-top {
    position: fixed;
    top: 0;
    background-color: rgba(171, 198, 0, 0.95);
    width: 100%;
    height: 3.75em;
    color: white;
}

div#bar-top img { height: 3em;  }
div#bar-top div#logo-glp { padding: 0.25em; }
div#bar-top div#logo-jm { padding: 0.25em; }

div#bar-top div#text { flex-grow: 1; text-align: center; font-size: 150%; }

div#bar-top a { color: white; text-decoration: none; }

div#bar-top  > div {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 65em;
    margin: auto;
}





/* ================================================================================
   bar-bottom
   ================================================================================ */

div#bar-bottom { position: fixed; bottom: 0; background-color: #ABC600; width: 100%;  }

div#bar-bottom a.small { font-size: 75%; }





div#impressum > a { color: white; text-decoration: none; }

div#main-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    justify-content: center;
}



div#main-nav > div {
    display: inline-block;
    width: 6em;
    flex-grow: 1;
    text-align: center;
}



div#main-nav a {
    display: inline-block;
    margin: 0 0.25em;
    padding: 0 0.25em;
    width: 100%;
    color: white;
    border-radius: 10px;
    text-decoration: none;
}


div#main-nav a:hover {
    background-color: #b4dc00;
    animation: ani-a;
    animation-duration: 1s;
}

@keyframes ani-a {
    from { background-color: #ABC600; }
    to   { background-color: #b4dc00; }
}





/* Responsive stuff ------------------------------------------------------------ */


@media only screen and (min-width: 1200px) {
    div#bar-bottom { font-size: 150%; height: 2em; }
    div#bar-top div#text { font-size: 225%;}
}

@media only screen and (min-width: 800px) and (max-width: 1199px) {
    div#bar-bottom { font-size: 100%; height: 2em; }
    div#impressum { display: none; }
    div#bar-top div#text { font-size: 3vw;}
}

@media only screen and (min-width: 450px) and (max-width: 799px) {
    div#bar-bottom { font-size: 100%; height: 3em; }    
    div#impressum { display: none; }
}

@media only screen and (max-width: 449px) {
    div#bar-top #logo-jm { display: none; }
    div#bar-top #logo-glp { display: none; }
    div#bar-bottom { font-size: 100%; height: 3em; }
    div#bar-bottom > div > a { display: none; }
    div#impressum { display: none; }
}






/* ================================================================================
   Bilder Arrangement
   ================================================================================ */

/* Bilderbogen */
div.tit-text-picts > div  {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
}
div.tit-text-picts > div > div  { width: 10em; margin: 0 1em 1em 1em;}
div.tit-text-picts > div > div img  { width: 100%; }



/* Bildbeschriftung  -------------------------------------------------- */
div.text-block span.caption {
    font-size: 80%; color: #888; display: block; text-align: center;
}





/* Textblöcke mit Bilder ............................................... */

@media only screen and (min-width: 800px) {
    div.text-block { clear: both; margin: 4em 0; }
    div.text-block > h2, div.text-block > h3 { text-align: center; }

    div.text-block  > div:nth-child(2) { width: 10em; }    
    div.text-block.tit-text-img  > div:nth-child(2) { float: right; margin: 0 0 1em 2em; }
    div.text-block.tit-img-text  > div:nth-child(2) { float: left; margin: 0 2em 1em 0; }

    div.text-block  > div:nth-child(2) img { display: block; width: 100%; margin: 0 0 1em 0;}
    
    dd.text-img > img { float: right; margin: 0 0 1em 2em; max-width: 15em;}

    div.img-right { float: right; margin: 0 0 2em 1em; }
    div.img-left { float: left; margin: 0 2em 0 1em; }
}


@media only screen and (max-width: 799px) {
    div.text-block > div:nth-child(2)  { margin: 1em auto 2em auto; width: 80%; max-width: 40em; }
    div.text-block img { width: 100%; margin: 0;}
    
    dd.text-img > img { display: block; width: 50%; margin: auto; }
}




/* Video ......................................................... */
div.text-video { clear: both; margin: 4em 0; }
div.text-video > div > iframe { display: block; width: 560px; height: 315px; }
div.text-video > div > span { font-size: 80%; color: #888; display: block; text-align: center;}


div.text-video-wide { clear: both; margin: 4em 0; }
div.text-video-wide > div > iframe { display: block; width: 560px; height: 315px; margin: auto; }
div.text-video-wide > div > span { font-size: 80%; color: #888; display: block; text-align: center;}

@media only screen and (min-width: 1200px) {
    div#main { max-width: 50em; margin: 0 auto 4em auto; font-size: 125%; }
    div.text-video > div  { float: right; margin: 0 0 1em 2em; }
    div.text-video > div > iframe { margin: 1em 0; }
}


@media only screen and (max-width: 1199px) {
    div.text-video > div  { text-align: center; font-size: 125%; }
    div.text-video > div > iframe { margin: auto; }
}

@media only screen and (max-width: 799px) {
    div.text-video-wide > div > iframe {  width: 100%;} 
}





@media only screen and (min-width: 800px) and (max-width: 1199px) {
    div#main { margin: 0 3em 4em 3em; font-size: 125%; }
    #main-nav div:nth-of-type(5) { display: none;}
}

@media only screen and (min-width: 450px) and (max-width: 799px) {
    div#main { margin: 0 2em 4em 2em; font-size: 125%; }
    #bar-bottom a.link-4 { display: none;}
    #main-nav div:nth-of-type(4) { display: none;}
    #main-nav div:nth-of-type(5) { display: none;}
}

@media only screen and (max-width: 449px) {
    div#main { margin: 0 1em 4em 1em; font-size: 100%; }
    div#main-nav > div { display: none;}
    div#main-nav > div#bm-more { display: inherit;}
    div#main-nav > div#bm-some { display: inherit;}
    div#main-nav > div#bm-more > div { left: 100%;  font-size: 100%; transform: translateX(-100%);}
}






/* ================================================================================
   Diverses
   ================================================================================ */

table.table-A th {text-align: right; padding: 0.25em 1em 0.25em 0; min-width: 6em;}


a.spider > img { width: 225px; padding: 1em; }

div.zitat { font-style: italic; text-align: center; color: #004B32; font-weight: bold; padding: 1em 1.5em; font-size: 125%; background-color: #F8FAFB; line-height: 150%;}
div.zitat:hover {background-color: #ABC600; line-height: 150%;}
div.zitat:before { content: "«";}
div.zitat:after { content: "»";}

span.zitat { font-style: italic;}
span.zitat:before { content: "«";}
span.zitat:after { content: "»";}


ul.list-wide li { padding: 0.2em 0;}



div.img-wide img { width: 100%;}


span.hint, i.hint, b.hint { border-bottom: 1px dashed #999; display: inline; }



span.vote { padding: 0.1em 0.2em; font-weight: bold; display: inline-block; min-width: 3em; text-align: center;}
span.vote-no { background-color: red; color: white; }
span.vote-yes { background-color: #3A9C00; color: white; }




a.more { cursor: pointer;}
a.more { display: inline-block; color: white; background-color: #004B32; padding: 0.2em 0.75em; border-radius: 15px; font-size: 75%; }

a.more:hover { color: #004B32; background-color: #ABC600;}



a[name]{ display: inline-block; position: relative; top: -50px; visibility: hidden;}






ol#opc_ref { margin-top: 1em; padding-top: 0.5em; border-top: solid 2px #999; color: #666; font-size: 75%; ;}
ol#opc_ref li a { display: inline-block; color: #66F; height: 1em; max-width: 38em; overflow: hidden; }
ol#opc_ref li.ref-unknown span { color: #B22;}
a.opc_ref { font-size: 50%;  vertical-align: super; color: #666; text-decoration: none;}


div.quer-links { text-align: center; margin: 2em 0 2em 0; line-height: 150%;}
h1 + div.quer-links { margin: -4em 0 3em 0;}
h2 + div.quer-links { margin: 0 0 3em 0;}
div.quer-links a { color: #888 !important; }


.mode-devel { display: none !important;}

span.info-sign { display: inline-block; font-size: 75%; background: url('../media/icons/icn_info.png'); background-repeat: no-repeat; background-size: 0.85em; height: 1em; width: 1em; cursor: help;}

p.claim  { font-weight: bold;  text-align: center !important; font-size: 120%; background-color: #F0F8CC; border-radius: 1em; padding: 0.5em 1em; }