/* = = = = = = = = = = = = = = = = = 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: #fff;
	color: #000;
	height: 100%;
	padding: 7rem 5.5rem 0rem 2.5rem ;
	margin: 0;
}

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

.boxinhalt a {
	color:#000;
}



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

.schalter label.button-close {
	display: inline-block;
	position: absolute;
	top: 2rem;
	right: 3rem;
	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: #f44334;
	margin: -1.5rem -2.5rem ;
	padding: 0rem;
	font-size: 4rem;
	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:#000;
}


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

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


/* Boxfenster Schaltfunktion AN / AUS */

input#open-home:checked ~ .boxfenster,
input#open-ueberuns:checked ~ .boxfenster,
input#open-leistungen:checked ~ .boxfenster,
input#open-aktuelles:checked ~ .boxfenster,
input#open-referenzen:checked ~ .boxfenster,
input#open-kontakt: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 = = = = = = = = = = = = = = = = = = = = = */