/* css for all pages */

body { margin: 0; padding: 0; font-family: Urbanist, sans-serif; font-size: 100%; overflow-x: hidden; }


@media screen and (min-width: 800px) { body {font-size: 150%;} }

:root {
    --sizF: min(40vw,max(300px,25vw));
    --colB: #119CD4;
    --colG: #B4DC00;
}

h2  { margin: 3em 0 1em 0; padding: 1em 2em 0 0; }

a.extern { color: var(--colB); font-weight: 600; }
a.email { color: var(--colB);  }

div.bubble-right { position: relative;}
div.bubble-right > img:nth-of-type(1) { float: right; margin: 0 0 1em 1em; width: 4em; background-color: var(--colG); clip-path: circle(50% at 50% 50%);}

div.pict-side > div:nth-of-type(1) img { float:right; width: 10em; margin: 0 0 1em 2em;}
@media print { div.pict-side { display: none;}}
div.pict-side.small > div:nth-of-type(1) img { width: 7.5em; }
div.pict-side.left > div:nth-of-type(1) img { float:left; margin: 0 2em 1em 0;}


div.pict-quer img { width: 100%; }
div.balken { width: 100%; height: 8rem; background-size: cover; }

div.img-width img { width: 100%;}
div.img-width div.caption { color: #444; text-align: right; font-size: 75%; font-weight: 200;}


img.circle { clip-path: circle(50% at 50% 50%);}



#main { width: 100%; max-width: 40em; margin: 0 auto 3rem auto; padding: 0; overflow-x: hidden; }
#main .page-links a {
    text-decoration: none; color: var(--colB); display: inline-block; padding-right: 1em; min-width: 7em;
}
#main .page-links > a > img { width: 0.75em; }
#main .page-links.intern a::before { content: '→ ';}


#head { display: grid; width: 100vw; }
#head a, #float a { color: white; text-decoration: none;}
#head-circle { grid-area: 1 / 1 / 2 / 2; background-color: var(--colG); clip-path: circle(250vw at 50% -242vw); }
#head-aktuell { grid-area: 1 / 1 / 2 / 2; user-select: none; text-align: center; }
#head-name { grid-area: 1 / 1 / 2 / 2; user-select: none;  text-align: center; }

#head-name > div {
    background-color: var(--colB);
    clip-path: circle(50% at 50% 50%);
    color: white;
    display: grid;
    position: relative;

    left: calc(var(--sizJ) * -0.5);
    top: calc(var(--sizJ) * -1.75);
    width: calc(var(--sizJ) * 2.5); height: calc(var(--sizJ) * 2.5);
    font-size: calc(var(--sizJ) * 0.2); 
}
#head-name > div > div { align-self: flex-end; padding-bottom: 0.5em;}
#head-name > div > div > div:nth-of-type(1) { font-weight: 600; }
#head-name > div > div > div:nth-of-type(2) { font-size: 60%; font-weight: 300;}




#menu-tr {
    text-align: center;
    position:fixed;
    user-select: none;
    background-color: var(--colB);
    color: white; 
    clip-path: circle(50% at 50% 50%);
    --sizB: min(max(5vh,10vw), max(5vw,10vh));
    width: var(--sizB); height: var(--sizB);
    font-size: calc( var(--sizB) / 1.2);
    top: calc(var(--sizB) * -0.2);
    left: calc(100vw - var(--sizB) * 0.9);
    z-index: 12;
}
#menu-tr > div { display: grid; height: 100%; }
#menu-tr > div > div { align-self: center; }

#menu-btn {  object-fit: cover; width: var(--sizB); }

#menu-list {
    background-color: rgba(0,0,0,0.5);
    display: none;
    user-select: none;
    position: fixed;
    width: 100vw;
    height: 1000%;
    top: 0;
    right: 0;
    z-index: 10;
}

#menu-items {
    --sizM: min(max(5vh,10vw), max(5vw,10vh));
    display: none;
    position: fixed;
    right: 1rem;
    text-align: center;
    top: calc(var(--sizM)*0.6);
    z-index: 14;

    background-color: var(--colB);
    border: solid 3px white;
    border-radius: 1em;
    color: white;
}
#menu-items > a { color: white; display: block; padding: 0.25rem 1rem; border-radius: 1em;}
#menu-items > a:hover { color: var(--colB); background-color: white; ;} 


#full {
    min-height: 100vh;
    display: grid;
    grid-template-rows: max(10vw,0.8 * var(--sizJ)) 1fr calc(var(--sizF) * 0.5);
    grid-template-columns: minmax(5vw,1fr) minmax(89vw, 4rem) minmax(5vw,1fr);
}
#full > div:nth-of-type(1) { grid-area: 1 / 1 / 2 / 4; }
#full > div:nth-of-type(2) { grid-area: 3 / 1 / 4 / 4; }
#full > div:nth-of-type(3) { grid-area: 2 / 2 / 3 / 3; max-width: 50rem; }


/* Elemente unten ============================================================ */

#jm-br {
    position: fixed;
    background-color: var(--colB);
    clip-path: circle(50% at 50% 50%);
    color: white; 
    text-align: center;
    font-weight: 700;
    z-index: 21;
    opacity: 0;

    width: var(--sizF); height: var(--sizF);
    bottom: calc(var(--sizF) * -0.4);
    left: calc(100vw - var(--sizF) * 0.85);
    font-size: calc(var(--sizF) * 0.1);
}
#jm-br > div { margin-top: 1em;}


#glp-br {
    background-image: url('../media/pictures/layout/glp_br.png');
    background-size: cover;
    position:fixed;
    z-index: 22;
    width: calc(var(--sizF) * 1.28); height: calc(var(--sizF) * 0.32);
    bottom:0px;
    qright: 0px;
    left: calc(100vw - var(--sizF) * 1.28);
    clip-path: circle(135% at 65% 395%);
}

#foot {
    background-color: var(--colG);
    clip-path: circle(calc(var(--sizF) * 10) at 50% calc(var(--sizF) * 10));
    --nS: 5; /* number of some items */
    --sizS: max(50vw,calc(100vw - var(--sizF) * 0.9));
    --icnS: max(1rem,min(2rem, calc(var(--sizS) / var(--nS) / 4)));
}

#foot div.some { text-align: center; padding-top: calc(var(--sizF) * 0.2); width: var(--sizS); }
#foot div.some a {
    display: inline-block; margin-right: calc(var(--icnS) * 0.75); color: white; text-decoration: none;
    transition: margin-left 1s;
}
#foot div.some img { width: var(--icnS);}



div.index {
    user-select: none; font-size: smaller; text-align: right; margin-top: 5em; border-bottom: solid 1px black;
}
div.index > a { display: inline-block; margin-left: 1em; color: var(--colB); text-decoration: none;}
div.index > a:hover { color: black;}
div.index > span { display: inline-block; margin-left: 1em; color: grey; }


div.lay.quer { margin: 2em 0; width: 100%;  background-size: cover; border-radius: 3rem; }

div.zitat {
    width: 80%; padding: 1em; margin: 2em auto; border-radius: 4em; text-align: center;
    background-color: var(--colB); color: white; font-weight: bold;
}


/* ------------------------------------------------------------
   Print / no screen
   ------------------------------------------------------------ */ 
@media screen  {
    #head-print { display: none;}
}
@media not screen {
    #full { display: block;}
    #head > div { display: none;}
    #head > #head-print { display: block;}
    #foot { display: none; }
    #float { display: none; }
    div.lay.quer { display: none;}
}


div.themen-block {  padding-bottom: 1em; margin-bottom: 1em; border-bottom: solid 4px var(--colB);}
div[data-kind='sub-thema'] {
    padding: 1em 2em; color: #444; margin-top: 1em;
    border-radius: 2em;
    background-color: #F8F9FB;
}


cite { color: #444; font-size: smaller; margin: 0 0.25em; font-family: mono-space;}

div.references { font-size: smaller;}
div.references span.nr { display: inline-block; color: #444; margin-right: 0.25em; min-width: 1.5em;}
div.references span.src { display: none; color: #444; margin: 0 0.25em; }
div.references span.date { display: inline-block; color: #444; margin-left: 1em;}
@media not screen { div.references span.src { display: inline-block; }}

.hide { visibility: hidden;}



dl.parolen dt { font-weight: bold; margin-top: 1em; margin-bottom: 0.5em;}
span.parole { display: inline-block; margin: 0.125em 0.25em; padding: 0 0.5em;font-weight: bold; background-color: #DDD}
span.parole.ja { background-color: #9ACD32; color: white; }
span.parole.nein { background-color: #DC143C; color: white;  }