/* Flexbox Cool Mom */
:root {
    --balken: #c4c4c4;
    --silver: #bcc6cc;
    --hg1:    #004535;
    --llg:    #a9db92;
    --lg:     #7cb87c;
    --mg:     #4f9465;   /*#1c7662; */
    --dg:     #478e62; /*#0c604d; */
    --ddg:    #1f6e4e;
    --hell:   #aeda92;
    --mittel: #81b75e;
    --link:   #164451;
    --link2:  #f4c430;
    --test:   #008560;   /* tolle farbe!!!#d40931;  */
    --signal: #d40931;
}

@font-face {
    font-family: carp;
    src: url(LTCarpet.ttf);
}

@font-face {
    font-family: ink;
    src: url(Inkfree.ttf);
}


html,body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    width: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Times, serif;
    font-size: 12pt;
    background-color: var(--hell);
    /* background: url(../grafiken/background-908172_1920.jpg) no-repeat center center fixed;
    background-size: cover;
    perspective: 1000px; */
}

*, *:before, *:after {
  box-sizing: border-box;
}

.hidden {
    display: none;
}

h1 {
    font-family: carp;
    font-size: 1.8em;
    margin-bottom: -0.5em;
}

h2 {
    font-family: carp;
    font-size: 1.4em;
    margin-bottom: -0.5em;
}

a {
    text-decoration: none;
    color: var(--link);
}

.red {
    color: #FF0000;
}

.big {
    font-size: 1.8em;
}
.bigger {
    font-size: 1.2em;
}

.printOnly {
    display: none;
}

.w300 {
    width: 300px;
}

.signal {
    color: var(--signal);
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    z-index: 3;
}

.para1 {
    background-image: url(../grafiken/pub1.png);
    min-height: 400px;
}

.para2 {
    background-image: url(../grafiken/bingo.jpg);
    min-height: 400px;
}

.para3 {
    background-image: url(../grafiken/pub3.jpg);
    min-height: 400px;
}

.para4 {
    background-image: url(../grafiken/pub2.jpg);
    min-height: 400px;
}

.para5 {
    background-image: url(../grafiken/bingo2.png);
    min-height: 400px;
}

.para6 {
    background-image: url(../grafiken/fass.jpg);
    min-height: 400px;
}

.para7 {
    background-image: url(../grafiken/fragezeichen.jpg);
    min-height: 400px;
}

.para8 {
    background-image: url(../grafiken/table.jpg);
    min-height: 400px;
}

.para9 {
    background-image: url(../grafiken/pub4.jpg);
    min-height: 400px;
}


#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(20,20,20,0.8);
    display: none;
}

#overlay.open {
    display: block;
    z-index: 80;
}

#bigpic {
    z-index: 90;
    justify-self: center;
    align-self: center;
    background: #fff;
    padding: 1em;
    text-align: right;
    margin-bottom: 2em;
    display: none;
}

#plakat img {
    max-height: 600px;
}

.closer {
    margin-left: 2em;
}

span.ltrText {
    unicode-bidi: bidi-override; 
    direction: rtl;
}



#navbox {
    max-height: 60px;
    /* background: rgba(20,20,20,0.5);    */
    background: var(--hg1);
    display: flex;
    align-items: center;
}

#nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: end;
    order: 1;
}

#nav a {
    font-family: carp;
    padding-right: 1em;
    color: var(--llg);
    text-decoration: none;
}

#nav a:hover {
    color: orange;
}



#navbox > #logo img {
    width: 100%;
    position: relative;
    z-index: 99;
}

#hbox {
    flex: 0 0 50px;
    display: none;
    order: 3;
    z-index: 99;
    cursor: pointer;
}

#wrapper {
    flex: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
}


.inhalt {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.ibox {
    flex: 0 1 400px;
    text-align: justify;
    hyphens: auto;
}

#start {
    padding-top: 5em;
}
#start .ibox:nth-child(1) {
    font-family: ink;
    font-weight: bold;
    text-align: center;
    transform: rotate(-15deg);
    border: none;
}

#kalender div:not(.showA) {
    margin-top: 1em;
    border: 1px solid var(--dg);
    padding: 1em;
}

#kalender .art {
    font-weight: bold;
    font-size: 2.2em;
    color: var(--link);
}

#kalender .datum {
    font-weight: bold;
    color: var(--link);
}

#kalender .zeit,#kalender .wtag {
    font-weight: bold;
    color: var(--link);
}

#kalender .ort {
    font-family: Verdana;

}

#tempel {
    background-image: url(../grafiken/halloffame.png);
    background-size: cover;
    font-family: Tahoma;
    margin: 1em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;    
}

figure img {
    height: 200px;
    cursor: pointer;    
}
figcaption {
    display: none;
}

fieldset {
    border: 3px solid var(--lg);
}

legend {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0 1em;
    color: var(--lg);
}

button, .button,.druck {
    background-color: var(--lg);
    border: 2px outset var(--dg);
    border-radius: 5px;
    padding: 0.4em;
    margin-top: 1em;
    cursor: pointer;
}

button:hover,.button:hover {
    border-style: inset;
}

#meldeform label {
    display: block;
    font-size: 0.9em;
    min-width: 200px;
    margin-top: 0.5em;
}

::placeholder,.inputinfo {
    font-size: 8pt;
    font-style: italic;
}

.errorfield {
    border: 2px solid red;
}

.showA {
    background-color: var(--mg);
    border: 2px solid var(--ddg);
    border-radius: 5px;
    display: inline;
    padding: 0.5em;
    line-height: 3em;
    cursor: pointer;
}

.smile {
    padding: 3em;
    font-family: ink;
    font-size: 1.5em;
    font-weight: bold;
}

#adminhead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2em;
}

#adminhead img {
    width: 150px;
}

.h3 {
    font-family: ink;
    font-size: 18pt;
}

.h5 {
    font-size: 9pt;
}

hr {
    width: 90%;
    border: 2px solid var(--hg1);
}

#workbox,#adminnav {
    width: 1000px;
    margin: 0 1em 3em 25em;  
}

label {
    width: 150px;
    display: inline-block;
    margin-bottom: 0.6em;
}

.tliste {
    width: 150px;
    display: inline-block;
}

/* Smartphones */
@media screen and (max-width: 600px) {
    body {
        font-size: 10pt;
    }
    
    #nav {
        display: none;
    }
    
    #nav.showM {
        position: absolute;
        top: 0;
        margin-top: 60px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--hg1);
        z-index: 99;
    }
    
    #nav.showM a {
        padding: 0.5em;
        border-bottom: 1px solid var(--lg);
        text-align: center;
        width: 100%;
        justify-self: center;
        
    }
    
    
    #navbox {
        justify-content: space-between;
    }
    
    #nav a {
        font-size: 1.2em;    }
    
    #hbox {
        display: block;
    }
    
    #logo {
        flex: 0 0 100px;
        margin: 3em 0 0 1em;
        z-index: 100;
    }
    
    .flipbox {
        flex: 0 1 140px;
        height: 180px;
        margin: 1em;
    }
    
    .ibox {
        margin: 0.5em 1em;
    }
    
    #start .ibox:nth-child(1) {
        font-size: 1.6em;
        width: 300px;    
    }
    
    .back {
        font-size: 1.3em;
    }
    
    #kalender .datum {
        font-size: 1.4em;
    }
    
    #kalender .wtag, #kalender .zeit {
        font-size: 1.2em;
    }

.boxImg:not(.miniPic) img {
    width: 80%;
    padding: 0 3em;
}

    #tempel {
        width: 280px;
        height: 220px;
    }
    
    .big {
        font-size: 10pt;
    }
    


    :root {
        --cBox: 200px;
        --cubeW: 100px;
        --persp: 400px;
        --perspO: 50% -100px;
        --cubeH: 50px;
        --cubeHM: -50px;
        --cShadow: -100px;
    }

    #cubeBox {
        padding-top: 3em;
        align-items: flex-start;
    }
}

/* Tablets */
@media screen and (min-width: 601px) and (max-width: 900px) {
    #nav {
        display: none;
    }

    #navbox {
        justify-content: space-between;
    }

    
    #nav.showM {
        position: absolute;
        top: 0;
        margin-top: 60px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--hg1);
        z-index: 99;
    }

    #nav.showM a {
        padding: 0.5em;
        border-bottom: 1px solid var(--lg);
        text-align: center;
        width: 100%;
        justify-self: center;

    }
    
    #nav a {
        font-size: 1.2em;
    }
    
    #logo {
        flex: 0 0 150px;
        margin: 3em 0 0 1em;
    }

    #hbox {
        display: block;
    }
    
    .flipbox {
        flex: 0 1 180px;
        height: 210px;
        margin-left: 3em;
    }
    
    .ibox {
        margin: 0.5em 1em;
    }

    #start .ibox:nth-child(1) {
        font-size: 1.5em;
    }
    
    .back {
        font-size: 1.6em;
    }
    
    #kalender .datum {
        font-size: 1.8em;     
    }
    #kalender .wtag, #kalender .zeit {
        font-size: 1.4em;
    }
    .boxImg:not(.miniPic) img {
        width: 80%;
        padding: 0 3em;
    }   

    #tempel {
        width: 600px;
        height: 500px;
    }

    :root {
        --cBox: 600px;
        --cubeW: 200px;
        --persp: 800px;
        --perspO: 20% 80px;
        --cubeH: 100px;
        --cubeHM: -100px;
        --cShadow: 150px;
    }

}


/* PC */
@media screen and (min-width: 901px) {
    :root {
        --cBox: 600px;
        --cubeW: 200px;
        --persp: 800px;
        --perspO: 50% 80px;
        --cubeH: 100px;
        --cubeHM: -100px;
        --cShadow: 150px;
    }


    #nav a {
        font-size: 1.6em;
    }

    #logo {
        flex: 0 0 180px;
        margin: 3em 0 0 1em;
    }
    
    .flipbox {
        flex: 0 1 220px;
        height: 300px;
        margin-left: 3em;
    }
    
    .ibox {
        min-height: 400px;
        margin: 1em;    
    }
    
    #start .ibox:nth-child(1) {
        font-size: 3em;
    }

    #pubflip {
        margin-top: 3em;
    }
    
    .back {
        font-size: 1.8em;
    }
    
    #kalender .datum {
        font-size: 2em;         
    }
    
    #kalender .wtag, #kalender .zeit {
        font-size: 1.6em;     
    }
    
    .boxImg:not(.miniPic) img {
        width: 70%;
        padding: 0 3em;
    }
    
    #tempel {
        width: 900px;
        height: 750px;
    }
    

}

/* -----------------------------------------------------------------*/
/* Hamburger */
.hamburg {
    display: block;
    width: 35px;
    height: 35px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    transition: border-radius: .5s;
}

.line {
    position: absolute;
    left: 0px;
    height: 4px;
    width: 25px;
    background: var(--lg);
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 30px; }

.hamburg.checked .line:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
}

.hamburg.checked .line:nth-child(2) {
    opacity: 0;
}

.hamburg.checked .line:nth-child(3) {
    transform: translateY(-10px) rotate(45deg);
}
/* ------------------- */

/* Flip-Card */


.flipbox img {
    width: 100%;
}


.karte {
    transition: transform 8s;
    transform-style: preserve-3d;
    transform-origin: center center;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.flipper {
    transform: translateX(-100%) rotateY(-180deg);
}


.front,.back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    padding: 1em;
    border-radius: 15px;
    border: 8px solid rgba(20,20,20,0.5);
}

.front {
    background: var(--dg);
}

.front img {
    width: 100%;
}

.back {
    transform: rotateY(180deg);
    background: var(--mg);
    font-family: ink;
    text-align: center;
    display: flex;
    align-items: center;
}

.flipper1 {
    transform: rotateY(-360deg);
    transition: transform 10s;
}

.flipper2 {
    transform: rotateY(-360deg);
    transition: transform 8s;
}




/* Tooltip */
.qtip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted black;
    cursor: help;
    box-sizing: border-box;
    transition: all .25s ease-in-out;
}

.qtip:before {
    content: attr(data-tip);
    font-size: 8pt;
    position: absolute;
    background: var(--hg1);
    border: 2px solid #fff;
    color: var(--silver);
    padding: 0.8em;
    line-height: 1.2em;
    min-width: 200px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;

}

.qtip:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

.qtip:hover:before,.qtip:hover:after {
    visibility: visible;
    opacity: 1;
}

.qtip.tip-top:before {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 8px));
    box-sizing: border-box;
    border-radius: 3px;
}

.qtip.tip-top:after {
    position: absolute;
    border-width: 10px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
    top: -0.5em;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    transform: translate(-50%,0);
}


/* Cookie */
#cookiedingsbums_vintage { 
background-image: url(data:image/png;base64,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);
padding-top:42px; 
background-repeat:repeat-x; 
background-position:top}

#cookiedingsbums a {color:#000; text-decoration:none;}
#cookiedingsbums a:hover {
    color: var(--ddg);
    font-weight: bold;
}
#cookiedingsbums #cookieinhalt {
padding:10px;
padding-top:5px; 
padding-right:40px; 
background-image: url(data:image/png;base64,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); 
padding-bottom:25px;
}

#cookiedingsbums {
text-align:center;
position:fixed;
bottom:0px;
z-index:10000;
max-width:300px; 
font-size:10pt; 
line-height:28px;
}

#cookiedingsbumsCloser {
color: #777;
font: 10pt;
position: absolute;
right: 5px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 50px;
cursor:pointer;
padding:4px;
}

#cookiedingsbumsCloser:hover {
    color: #ff0000;
    right:3px; 
    top:48px;
    position: absolute;
}



.cubebox {
    display: flex;
}

.plakat {
    flex: 0 1 600px;
    height: 600px;
}    
.plakat img {
    margin: 2em 0;
    height: 450px;
}
    
/* Rotating Cube */

#cubeBox {
    width: var(--cBox);
    height: var(--cBox);
    display: flex;
    justify-content: center;
    perspective: var(--persp);
    perspective-origin: var(--perspO);
}

.cube {
    transform-style: preserve-3d;
    position: relative;
    animation: rotateCube 20s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cube div {
    height: var(--cubeW);
    width: var(--cubeW);
    background: aqua;
    position: absolute;
    box-shadow: 0 0 0 0px aqua inset,
                0 0 50px 10px blue inset;
    display: flex;
    justify-content: center;
    align-items: center;            
}    

.frontC {
    transform: translateZ(var(--cubeH));
}

.backC {
    transform: translateZ(var(--cubeHM)) rotateY(180deg);
}

.topC {
    transform: translateY(var(--cubeHM)) rotateX(90deg);
}

.bottomC {
    transform: translateY(var(--cubeH)) rotateX(90deg);
    bottom: var(--cShadow);                     /* 150px */
    filter: blur(50px);
    box-shadow: 0 0 120px rgba(0,255,0,0.2),
    0 0 200px rgba(0,255,0,0.4),
    0 0 300px rgba(0,255,0,0.6),
    0 0 400px rgba(0,255,0,0.8),
    0 0 500px rgba(0,255,0,1);
}

.rightC {
    transform: translateX(var(--cubeHM)) rotateY(270deg);
}

.leftC {
    transform: translateX(var(--cubeH)) rotateY(90deg);
}

.cube div img {
    width: 80%;
}

.cube div a {
    text-align: center;
}

@keyframes rotateCube {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}







/*       old
.wrap {
	width: 100%;
	display: flex;
	justify-content: center;
}

.wrap2 {
    flex: 0 1 400px;
    perspective: 800px;
    perspective-origin: 50% 30px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid blue;

}

.cube {
	position: relative;
	transform-style: preserve-3d;
}

.cube div {
	position: absolute;
	border: 2px solid var(--hg1);
	border-radius: 0px;
	background: var(--dg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: carp;
}


.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}


.front {
	transform: translateZ(100px);
}


.cube div img {
    width: 90%;
}

.top img {
    transform: rotateY(180deg);
}

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

.cube {
	animation: spin 15s infinite linear;
}


@keyframes spin-vertical {
	from { transform: rotateX(0); }
	to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
	margin: 0 auto; /* keeps the cube centered */
/*
	transform-origin: 0 100px;
	animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
	transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
	transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
	transform: rotateX(-90deg) translateY(100px);
}
 */