/* = = = = = = = = = = = = = = = = = Datei boxfenster.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* Diese Datei enthält die BOX-FENSTER mit Box-Fenster öffnen/schliessen Funktionen */



/* ############################################################ */
/* BOX-FENSTER 													*/
/* ############################################################ */

/* - - - - - INFOFENSTER FORMATIERUNG - - - - - */

.schalter {
	position:relative;
}

.boxfenster  {
	display: block;
	font-size: 15px;
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	box-shadow: 0 0 1px black;
	text-align: left;
	font-size: 1.7rem;
	line-height: 2.5rem;
	height: 100vh;
	width: 100vw;
	margin-top: -260vh;
	overflow: hidden;
}

.boxinhalt {
	display: block;
	overflow: auto;
	position: relative;
	background: #222222;
	color: #B0BEC5;
	height: 100%;
	padding: 7rem 5.5rem 0rem 2.5rem ;
	margin: 0;
}

.boxinhalt h1, .boxinhalt h2, .boxinhalt h3 {
	color:#B0BEC5;
}

.boxinhalt a {
	color:#B0BEC5;
	text-decoration: none;
}

.boxinhalt a:hover {
	color:#FFF;
}


/* - - - Style Schließen-Schalter für Box-Fenster -  - - - */

.schalter label.button-close {
	display: inline-block;
	position: absolute;
	top: 2.8rem;
	right: 2.5rem;
	z-index: 3;
	cursor: pointer;
	background: transparent;
}

/* Icons  */

.schalter .button-close .fas,
.schalter .button-close .fab,
.schalter .button-close .far  {
	display: inline-block;
	background: transparent;
	position: fixed;
	color: grey;
	margin: -1.5rem -2.5rem ;
	padding: 0rem;
	font-size: 3rem;
	width: 5rem;
	height: 5rem;
	line-height: 5rem;
	border-radius: 100%;
}

.schalter .button-close .fas:hover,
.schalter .button-close .fab:hover,
.schalter .button-close .far:hover {
	color:#FFF;
}


/* - - - Toggle-Funkton mit CHECKED - - - */

/* Checkboxen versteckt */
.schalter input[type=checkbox]{
	display: none;
}


/* Boxfenster Schaltfunktion AN / AUS */

input#open-projekt-westmc002:checked ~ .boxfenster,
input#open-projekt-ksk:checked ~ .boxfenster,
input#open-projekt-as-wohnbau:checked ~ .boxfenster,
input#open-projekt-plenk-schmiermittel:checked ~ .boxfenster,
input#open-projekt-vogl-energietechnik:checked ~ .boxfenster,
input#open-projekt-central:checked ~ .boxfenster,
input#open-projekt-dominik-wasem:checked ~ .boxfenster,
input#open-projekt-gotchaspielfeld:checked ~ .boxfenster,
input#open-projekt-ksk-radio:checked ~ .boxfenster,
input#open-projekt-ruschbergfuchsen:checked ~ .boxfenster,
input#open-projekt-sincomp:checked ~ .boxfenster,
input#open-projekt-werners-fahrschule:checked ~ .boxfenster,
input#open-projekt-zur-lueften:checked ~ .boxfenster,
input#open-hobbys-auto:checked ~ .boxfenster,
input#open-hobbys-auto-vorgaenger:checked ~ .boxfenster,
input#open-hobbys-motorrad:checked ~ .boxfenster,
input#open-hobbys-motorrad-vorgaenger:checked ~ .boxfenster,
input#open-hobbys-computer:checked ~ .boxfenster,
input#open-hobbys-rc:checked ~ .boxfenster,
input#open-hobbys-kart:checked ~ .boxfenster,
input#open-hobbys-paintball:checked ~ .boxfenster {
	margin: 0;
	z-index: 4;
	background: rgba(0,0,0,.7);
}




/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN	*/
/* ############################################################ */



/* ==================================== ab 960 Pixel ================================== */

@media (min-width: 960px) {

.boxinhalt {
	width: 90%;
    max-width: 1300px;
	height: 84vh;
	margin: 0 auto;
	margin-top: 8vh;
	margin-bottom: 8vh;
}

}


/* = = = = = = = = = = = = = = = = = = = = = Code ENDE = = = = = = = = = = = = = = = = = = = = = */