@charset "UTF-8";

iframe body{
	background-color: #ff0000;
}



body{
	/* margin-top:30px !important;   nur im debug-mode !!!!! */
}
.debug-info{
	/* display:block;  debug mode ON  */
	display:none;	 /* debug mode OFF */
	
	position:fixed;
	top:0px;
	left:0px;
	margin:0px;	
	width:100%;
	height:30px;
	background-color:#00ffff;
	border: 3px dashed red;
	padding-left: 5px;
	
}


/* livestream*/
iframe body{
	overflow:hidden !important;
}









/* Höhenanpassung eines iframes,nach www.maddesigns.de
iframe {
	max-width:100%
}
.iframe-container {
	position:relative;
	padding-bottom:56.25%; /*Seitenverhältnis 16:9 
	height:0;
	overflow:hidden;
	width:100%;
	height:auto;
}
.iframe-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
*/

/*--------------*/
/*--- resets ---*/
/*--------------*/
html, body, table, tr, td, div, img, a, ul, li, h1, h2, h3, h4, h5, h6, i, span, div {
	padding:0;
	margin:0;
	border-style:none;
}
div{
	box-sizing:border-box;
}
a {
	text-decoration:none;
}
img {
	display:block;
}
table{
	border-collapse: collapse;
}



/*-------------------*/
/*--- Allgemeines ---*/
/*-------------------*/

body{
	width:100%;
	max-width:960px;
	margin:auto;
	padding: 20px 0px 0px 0px;
	font-size: 100%;
	font-family:Arial;
	background-color:#c0c0c0;
}

.the-site{
	width:100%;
	padding: 0px;
}
a{
	color:#0484ae;
}


/* --- Navigation (default: horizontal) ---*/
.nav-container{
	width:100%;
	background-color:#5f5f5f;
	padding:4px 0px 4px 0px;
}
.nav-container a{
	color:#FFffff; 
}
.nav-container a:hover{
	color:#FFffff; 
	background-color:#035e7c;
}


/*- horizontales Menue -*/
.nav-hor-container {
	width:100%;
	background-color:#5f5f5f;
	border-spacing: 2px;
	list-style-type: none;

}
.inner-nav {
	width:100%;
	background-color:#5f5f5f;
	border-spacing: 2px;
	list-style-type: none;
}
.nav-left{
	position:relative;
	left:0px;
	display:block;
}
.nav-right{
	position:absolute;
	right:0px;
	bottom:0px;
	display:block;
}
.nav-left, .nav-right {
	background-color:#5f5f5f;
	border-spacing: 2px;
	list-style-type: none;
}
.nav-left li, .nav-right li{
	display:inline;
}
.nav-left li a, .nav-right li a{
	padding:3px;
	vertical-align: baseline;
}
.nav-item-highlighted{
	color:#ffffff;
	background-color:#06bcf9;
	width:100%;
}

/*-- vertikales Menue -*/
.nav-vert-container{
	position:relative;
	display:none;
	background-color:#5f5f5f;
	color:#ffffff;
	font-size:15px;
	height:32px;
}
.menuesymbol-container{
	position:absolute;
	right:7px;
	bottom:6px;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/3lines-5f5f5f-tr.png");
	background-size: 100% 100%;
	width:20px;
	height:18px;
}
.whatsappsymb-container{
	position:absolute;
	left:103px;
	bottom:5px;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/WhatsApp_Logo_5f5f5f.png");
	background-size: 100% 100%;
	width:22px;
	height:22px;
	
}
.threemasymb-container{
	position:absolute;
	left:140px;
	bottom:0px;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/Threema512px.png");
	background-size: 100% 100%;
	width:30px;
	height:30px;
	
}
.whatsappsymb-container-1{
	position:relative;
	left:0px; 
	bottom:-5px; 
	display:inline-block;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/WhatsApp_Logo_31.png");
	background-size: 100% 100%;
	width:22px;
	height:22px;	
}
.threemasymb-container-1{
	position:relative;
	left:0px; 
	bottom:-5px; 
	display:inline-block;
	background-color:#606060;
	border-radius: 5px;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/Threema512px.png");
	background-size: 100% 100%;
	width:22px;
	height:22px;
	
}
.telsymb-container{
	position:absolute;
	left:8px;
	bottom:5px;
	-background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/telefon-ffffff-404040.png");
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/TelHoerer-ffffff-5f5f5f.png");
	background-size: 100% 100%;
	background-color:#8080ff;
	width:21px;
	height:21px;
	
}
.telsymb{         /* benutzt im topper */
	font-size:15px;
	color:#ffff99;
	display:none;
}
.teltext{		/* benutzt im topper */
	display:inline;
}



.mailsymb-container{
	position:absolute;
	bottom:5px;
	left:53px;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/umschlag-ffffff-5f5f5f-duenn.png");
	background-color:#8080ff;
	width:25px;
	height:21px;
	background-size: 100% 100%;
}

.mailsymb{         /* benutzt im topper */
	font-size:15px;
	color:#ffff99;
	display:none;
}
.mailtext {			/* benutzt im topper */
	display:inline;
}

.homelogo-container{
	position:absolute;
	left:8px;
		
	background-size: 100% 100%;
	background-image:url("https://www.mathe-nachhilfe-langen.de/mySymbols/home-ffffff-404040b.png"); 
	width:28px;
	height:22px;
	bottom:5px;
}






/*--- footer ---*/
.footer-container{
	width:100%;
	background-color:#5f5f5f;
	padding:4px 0px 4px 0px;
}
.footer{
	border-spacing: 2px;
	list-style-type: none;
}
.footer a{
	color:#ffffff;
}
.footer-container a:hover { 
	background-color:#035e7c;
}
.footer-container .footer .nav-left li a,
.footer-container .footer .nav-right li a{
	display:inline;
}
.footer-domain-info-n{
	position:relative; 
	left:186px;
}
.footer-domain-info-r{
	position:relative; 
	left:200px;
}


/*--- content ---*/
/* zentrale Steuerung Background-color und Text-color im content-Bereich */
.content-container{
	color:#5f5f5f;
	background-color:#ffffff;
	-border:4px solid #ffac33;
	border-top:0px;
}
h1, h2, h3, h4 {
	color:#808080;
}

.content-pic{
	border-color:#ffffff;
}



/*Hintergrundgrafiken */
.bgBundR{
	background-size: 100% 100%;
	background-position:center;
	background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/BleistiftUndRadiergummi1000x750.jpg');
}
.bgimage-l{
	background-size: 110% 110%;
	/*background-size: 100% 100%; */
	background-repeat: no-repeat;
	background-position:center;
	background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/Ebene1000mal750.png');
}
.bgimage{
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	background-position:center;
	/*background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/FarbigerKuli1200mal750.jpg');*/
	/*background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/ebay-taschenrechner-1000x750rand.jpg');*/
}
.bgimage-b{
	background-size: 102% 104%;
	background-position:center;
	/*background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/Blatt1000mal750.png');*/
}
.bgimage-r{
	background-size: 100% 100%;
	background-position:center;
	background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/sesselgrafik.png');
}
/* Schatteneffekt */
.shadow-deaktiviert{
	border:1px solid #c0c0c0;
	box-shadow:-5px 5px 5px #c0c0c0;
}
.content{
	margin-top:5px;
	height:96%;
	overflow:auto;
	margin:auto;
	text-align:justify;
	
	opacity:1.0; 
	padding:10px; 
	position:relative; 
	top:10px;  
	width:98%; 
	background-color:#ffffff;
	
	/* silbentrennung */
  	hyphens: auto;
}
.content-n{
	margin-top:5px;
	height:90%;
	overflow:auto;
	margin:auto;
	text-align:justify;
	opacity:1.0; 
	padding:10px; 
	position:relative; 
	top:34px;  
	width:97%; 
	background-color:#ffffff;
	
	/* silbentrennung */
  	hyphens: auto;
}
.content-pic{
	margin:auto;
	width:100%;
}
.inner-nav a:hover { 
	text-decoration:none;
	color:#FF8135;
	background-color:#FFFF99;
}



/*Animationen*/
.popup{
	top:17px; height:94%; width:98%;
	position:relative;
	animation-name: message;
	-webkit-animation-name: message;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-delay:0s;
	-webkit-animation-delay:0s;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	opacity:0.0;
	-top:-90.5%;
	-top:3.5%;
	-left:1%;
	-left:24.5%;
	-width:49%;
	-height:94%;
	-padding:15px;
	opacity:0.0;
	background-color:#ffffff;
}
.popup-l{
	position:relative;
	animation-name: message;
	-webkit-animation-name: message;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-delay:2s;
	-webkit-animation-delay:2s;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	opacity:0.0;
	top:18px;
	-left:1%;
	left:-24.5%;
	width:49%;
	height:94%;
	padding:15px;
	opacity:0.0;
	background-color:#ffffff;
}
@keyframes message{
	  0%{opacity:0.0;}
	100%{opacity:1.0;}
	
}
@-webkit-keyframes message{
	  0%{opacity:0.0;}
	100%{opacity:1.0;}
	
}

.popup-r{
	-overflow:hidden;
	position:relative;
	animation-name: message;
	-webkit-animation-name: message;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	opacity:0.0;
	top:10px;
	-left:1%;
	width:98%;
	height:96%;
	padding:15px;
	opacity:0.0;
	background-color:#ffffff;
}
@keyframes message{
	  0%{opacity:0.0;}
	100%{opacity:1.0;}
	
}
@-webkit-keyframes message{
	  0%{opacity:0.0;}
	100%{opacity:1.0;}
	
}

.popup-n{
	-overflow:hidden;
	position:relative;
	animation-name: message-n;
	-webkit-animation-name: message-n;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-delay:1s;
	-webkit-animation-delay:1s;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	opacity:0.0;
	top:5%; 
	left:5%;
	width:95%;
	padding:10px;
	background-color:#ffffff;
}
@keyframes message-n{
	  0%{ opacity: 0.0; }
	100%{ opacity: 1.0; }
	
}
@-webkit-keyframes message-n{
	  0%{opacity:0.0;}
	100%{opacity:1.0;}
	
}

.inversPopup{
	width:100%; height:108.4%; border: 1px solid #808080;top:-21px;
	-overflow:hidden;
	position:relative;
	animation-name: iMessage;
	-webkit-animation-name: iMessage;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-delay:2s;
	-webkit-animation-delay:2s;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	opacity:1.0;
	-top:-90.5%;
	-top:3.5%;
	-left:1%;
	-left:24.5%;
	-width:49%;
	-height:94%;
	-padding:15px;
	opacity:1.0;
	background-color:#ffffff;
}

@keyframes iMessage{
	  0%{opacity:1.0;}
	100%{opacity:0.0;}
	
}
@-webkit-keyframes iMessage{
	  0%{opacity:1.0;}
	100%{opacity:0.0;}
	
}



.myList{
   margin:5px 0px 5px 20px;
   list-style-type:square;
   color:#06BCF9;
}
.myList li span{
	color:#5f5f5f;
}
.myOverflowHidden{
	overflow: hidden;
}





/*-------------------*/
/*--- Hilfsmittel ---*/
/*-------------------*/


/* Quelle: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition */
.tooltip {
    position: relative;
    display: inline-block;
    -border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    -width: 200px;
	width:0px;
    background-color: white;
    color: #5f5f5f;
    text-align: center;
    border-radius: 0px;
	border-style:solid;
	border-width:1px;
	border-color:#000000;
    padding: 5px;
    position: absolute;
	-position:relative;
    z-index: 1;
    -bottom: 100%;
    -left: 50%;
    -margin-left: -60px;
	
	
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 5s;
}
.tooltip:hover  .tooltiptext{
    visibility: visible;
    opacity: 1;
	width:100%;
	height:100%;
	-left:25%;
	background-color:red;
	z-index:999;
	margin:auto;
}

#headline{
	
}
#frankfurt{
	border: solid 1px black;
	background-color:#808080;
	color:#ffffff;
	border-radius:5px;
	text-align:center;
	width:30%;
	margin:auto;
}
#neuIsenburg{
	border: solid 1px black;
	background-color:#808080;
	color:#ffffff;
	border-radius:5px;
	text-align:center;
	width:30%;
	margin:auto;
}
#dreieich{
	border: solid 1px black;
	background-color:#808080;
	color:#ffffff;
	border-radius:5px;
	text-align:center;
	width:30%;
	margin:auto;
}
#langen{
	border: solid 1px black;
	background-color:#808080;
	color:#ffffff;
	border-radius:5px;
	text-align:center;
	width:30%;
	margin:auto;
}
#darmstadt{
	border: solid 1px black;
	background-color:#808080;
	color:#ffffff;
	border-radius:5px;
	text-align:center;
	width:30%;
	margin:auto;
	position:relative;
	top:-33px;
}
.vertLine2{
	width:20px;
	height:20px;
	margin:auto;
	border-left: solid 2px green;
	border-right: solid 2px orange;
}
.vertLine1{
	width:20px;
	height:18px;
	margin:auto;
	border-left: solid 2px green;
	position:relative;
	top:-20px;
}
#s3{
	width:20px;
	height:20px;
	margin:auto;
	text-align:center;
	margin-left:20px;
	margin-top:-3px;
	border-bottom: solid 2px green;
}
#s4{
	width:20px;
	height:20px;
	margin:auto;
	text-align:center;
	margin-top:20px;
	margin-left:20px;
	border-bottom: solid 2px orange;
	
}
#legende{
	width:30%;
	margin:auto;
	margin-top:20px;
	position:relative;
	top:-33px;
}


.opac{
	opacity: 0.3;
}

.centered{
	text-align:center;
}
.telnr{
	color:#404040 !important;
}

.flexible{
	display:flex;
	display:-webkit-flex;
	display:-moz-flex;
	margin-bottom:15px;
}
.flexible-item {
	width:100%; 
}
.flexible-item-l {
	width:70%; 
	padding-right: 20px;
}
.flexible-item-r {
	width:27%; 
	padding-left:20px;
}
.flexible-item:first-child { 
	margin-right:20px;
}
.flexible-item-on-bottom{
	position:relative; 
	-border:1px solid red;
}
.flexible-item-on-bottom-content{
	position:absolute;
	bottom:0px;
}




.iframe-container{
	padding:10px 10px 10px 10px;
	width:100%;
	height:100%;
}


.livestreamIframe{
	width:640px;
	height:480px;
	max-width:640px;
	max-height:480px; 
	border:1px solid #06bcf9; 
	overflow:hidden;
	background:#06bcf9;
}
.livestreamIframeFullscreen{
	-width:640px;
	-height:480px;
	-max-width:640px;
	-max-height:480px; 
	border:1px solid #06bcf9; 
	-overflow:hidden;
	-background:#06bcf9;
}					










/*---------------------------------------------
  --- @media-querys ---
  
	(P-s) orientation:portrait , Smartphone
	(P-t) orientation:portrait , Tablet
	(P-d) orientation:portrait , Desktop
	
	(L-s) orientation:landscape , Smartphone
	(L-t) orientation:landscape , Tablet
	(L-d) orientation:landscape , Desktop

----------------------------------------------*/

/*--- P-s --- 0 <= device-width <= 420 -------*/

@media screen and (orientation:portrait) and (max-device-width:420px){
			
	
	/*----- (Un)Sichtbarkeiten -----*/
	.nav-hor-container		{	display:none;		}
	.nav-vert-container		{	display:block;		}
	.footer-container		{	display:block;	position:absolute;bottom:0px;}
	
	/* modifizierter header */
	.header-container{
		border-bottom:1px solid #60a0a0;
	}
	.header-container .header-l{
		width:30%;
	}
	.header-container .header-r{
		width:50%;
		bottom:5px;
	}
	.headerText{
		font-size:15px;
		line-height:15px;
	}
	
	#QR-Code-Kontakt{
		display:none;
	}
	#Threema-Kontakt{
		/*display:none;*/
	}
	
	
	/*------ Navigation ------*/
	/*- Navigation: vertikal -*/
	.nav-container{
		position:fixed;
		top:0px;
		z-index:998;
	}
	.nav-left li, .nav-right li{
		display:block;
	}
	.nav-right{ 
		top:0;
	}
	.nav-right li{ 
	    text-align:right;
	}
	/*- Navigation: Grössen und Abstände -*/
	.nav-left li, .nav-right li{ 
		padding:3px;
	}
	.nav-left, .nav-right {
		font-size:14px;
		line-height:18px;
		padding:1px;
		margin:1px;
	}
	.mailsymb{
		font-size:15px;
	}
	.nav-hor-container{
		border-top:1px solid #06bcf9;
	}
	.nav-container a:hover, .footer-container a:hover{
		background-color:#06bcf9;
	}

	/*nur wg. Designänderung unsichtbar geschaltet */
	.nav-vert-container .threemasymb-container{
		display: none;
	}
	.nav-vert-container .telsymb-container{
		display: none;
	}
	.nav-vert-container .mailsymb-container{
		display: none;
	}
	.nav-vert-container .whatsappsymb-container{
		display: none;
	}
	
	
	/*--- sonstige Anpassungen ---*/
	body{
		padding: 0px 0px 0px 0px;
		margin:  0px 0px 0px 0px;
		height:  auto;
	}
	
	.nav-left .footer-domain-info-n{
		display:none; 
	}
	.nav-left .footer-domain-info-r{
		display:none;
	}
	
	.shadow-deaktiviert{
	border:1px solid #c0c0c0;
	box-shadow:10px 5px 5px #52527a;
}
	.theSite{
		margin:0px;
		padding:0px;
	}
	.bgimage-b{
		background-image: url('');
	}
	.bgimage-r{
	background-size: 100% 60%;
	background-position:center;
	background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/sesselgrafik.png');
	background-repeat: no-repeat;
}
	.bgimage{
	background-size: 100% 100%;
	background-position:center;
	/*background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/EbeneGerade750mal1000.png');*/
	/*background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/ebay-taschenrechner-1000x750-rand-gedreht.jpg');*/
}

.bgBundR{
	background-size: 100% 100%;
	background-position:center;
	background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/BleistiftUndRadiergummi1000x750vertikal.png');
}

	.content-container {
		-padding:4px 4px 4px 4px;
		position:absolute;
		top:40px;
		bottom:0px;
		left:0px;
		right:0px;
	}
	.content-n {
		padding:10px 10px 10px 10px;
		font-size:15px;
		text-align:left;
		top:10px;
		height:96%;
	}

	.popup{
		top:10px;
		height:96%;
	}
	.flexible{
		display:block;
	}
	.flexible-item-l {
		width:100%; 
		padding-right: 15px;
	}
	.flexible-item-r {
		width:95%; 
		padding-left:15px;
	}
	.flexible-item:first-child { 
		margin-bottom:20px;
	}
	.flexible-item-r:last-child { 
		margin-bottom:40px;
	}
	.flexible-item-on-bottom-content{
		position:static;
		bottom:0px;
		padding-top:10px;
	}
	.flexible-item-on-bottom-content{
		position:static;
		bottom:0px;
		padding-top:10px;
	}
	.img-float-left, .img-float-right {
		float:none;
		width:100%; 
		margin:auto;
		height:auto; 
	}
	.myOverflowHidden{
		overflow: auto;
	}
	
	.iframe-container{
		padding-bottom: 10px;
	}
	.livestreamIframe{
		height:96%;
	}
	
	.login-position{
		margin:5%; 
		width:90%;
	}
	
	
	
		
	/*--- für debug-mode ---*/
	.debug-info::after{
		content:"P-s";
	}
	
}



/*--- P-t --- 421 <= device-width <= 1020 -------*/

@media screen and (orientation:portrait) and (min-device-width:421px) and (max-device-width:1020px){
    
	/*----- (Un)Sichtbarkeiten -----*/
	.nav-hor-container		{	display:block;		}
	.nav-vert-container		{	display:none;		}
	.footer-container		{	display:block;		}
	
	
	
	
	
	/*--- Navigation ---*/
	.nav-container a:hover, .footer-container a:hover{
		background-color:#06bcf9;
	} 
	
	
	
	/*--- sonstige Anpassungen ---*/
	body{
		padding-top:0px;
	}
	.the-site{
		width:90%;
		margin:auto;
	}
	
	.nav-hor-container, .nav-left, .nav-right {
		font-size:13px;
		line-height:13px;
	}
	
	.login-position{
		margin:20%; 
		width:60%;
	}
	
	/* Abstände und Textausrichtung */
	.content-container{
		height:500px;
	}
		
	/*--- für debug-mode ---*/	
	.debug-info::after{
		content:"P-t";
	}
	
}


/*--- P-d --- 1021 <= device-width --------------*/

@media screen and (orientation:portrait) and (min-device-width:1021px){
	
	/*----- (Un)Sichtbarkeiten -----*/
	.topper-container		{	display:block;		}
	.header-container		{	display:block;		}
	.bildleisten-container	{	display:block;		}
	.nav-hor-container		{	display:block;		}
	.nav-vert-container		{	display:none;		}
	.footer-container		{	display:block;		}
	
	/*--------------- Navigation ---------*/
	/*- Navigation: horizontal (default) -*/
	
	/*- Navigation: Grössen und Abstände -*/
	.nav-hor-container, .nav-left, .nav-right {
		line-height:13px;
		font-size:13px;
	}
	
	/*--- sonstige Anpassungen ---*/
	body{
		padding-top:0px;
	}
	
	/* Abstände und Textausrichtung */
	.content-container{
		height:500px;
	}
	
	.content-container {
		padding:20px 20px 20px 20px;
	}

	.flexible-item:first-child { 
		margin-bottom:20px;
	}
	.flexible-item-on-bottom-content{
		position:static;
		bottom:0px;
		padding-top:10px;
	}
	
	.login-position{
		margin:20%; 
		width:60%;
	}
	
	
	/*--- für debug-mode ---*/
	.debug-info::after{
		content:"P-d";
	}
	
}



/*---L-s --- 0 <= device-width <= 700 -------*/

@media screen and (orientation:landscape) and (max-device-width:700px){
	
	/*----- (Un)Sichtbarkeiten -----*/
	.topper-container		{	display:none;		}
	.header-container		{	display:block;		}
	.bildleisten-container	{	display:none;		}
	.nav-hor-container		{	display:none;		}
	.nav-vert-container		{	display:block;		}
	.footer-container		{	display:block;		}
	
	
	/* modifizierter header */
	.header-container{
		border-bottom:1px solid #ffff99;
	}
	
	#QR-Code-Kontakt{
		display:none;
	}
	#Threema-Kontakt{
		/*display:none;*/
	}
	
	
	
	
	/*------ Navigation ------*/
	/*- Navigation: vertikal -*/	
	.nav-container{
		position:fixed;
		top:0px;
		z-index:998;
	}
	.nav-container a:hover, .footer-container a:hover{
		background-color:#06bcf9;
	}
	.menuesymbol{
		-display:inline;
		-margin-bottom:10px;
	}
	.nav-left li, .nav-right li{ 
		display:block;   /* für vertikales Menue nötig,  none für horizontales Menue  */
	}
	
	.nav-right{
		top:0;
	}
	.nav-right li{ 
	    text-align:right;
	}

	/*- Navigation: Grössen und Abstände -*/
	.nav-hor-container{
		padding-top:2px;
	}
	.nav-hor-container{
		border-top:1px solid #06bcf9;
	}
	.nav-left li, .nav-right li{ 
		padding:3px;
	}
	.nav-hor-container, .nav-left, .nav-right {
		font-size:14px;
		line-height:18px;
		padding:1px;
		margin:1px;
	}
	
	/*nur wg. Designänderung unsichtbar geschaltet */
	.nav-vert-container .threemasymb-container{
		display: none;
	}
	.nav-vert-container .telsymb-container{
		display: none;
	}
	.nav-vert-container .mailsymb-container{
		display: none;
	}
	.nav-vert-container .whatsappsymb-container{
		display: none;
	}
	
	
	/* Abstände und Textausrichtung */
	.content-container{
		height:500px;
	}
	
	/*--- sonstige Anpassungen ---*/
	body{
		padding-top:0px;
	}
	.bgimage-b{
		background-image: url('');
	}
	.content-container {
		padding-top:40px;
	}
	
	
	.flexible{
		-display:block;
	}
	.flexible-item:first-child { 
		margin-bottom:20px;
	}
	.flexible-item-on-bottom-content{
		position:static;
		bottom:0px;
		padding-top:10px;
	}
	
	.popup{
		top:-7px;
		height:100%;
	}
	
	.login-position{
		margin:5%; 
		margin-top:5%; 
		width:90%;
	}
	
	.bgimage-r{
		background-size: 70% 70%;
		background-position:center;
		background-image: url('https://www.mathe-nachhilfe-langen.de/Grafiken/sesselgrafik.png');
		background-repeat: no-repeat;
	}
	
	.nav-left .footer-domain-info-n{
		display:none; 
	}
	.nav-left .footer-domain-info-r{
		display:none;
	}
		
	/*--- für debug-mode ---*/	
	.debug-info::after{
		content:"L-s";
	}
		
}


/*--- L-t --- 701 <= device-width <= 1300 -------*/

@media screen and (orientation:landscape) and (min-device-width:701px) and (max-device-width:1300px){
    
	/*----- (Un)Sichtbarkeiten -----*/
	.topper-container		{	display:block;	}
	.header-container		{	display:block;		}
	.bildleisten-container	{	display:none;		}
	.nav-hor-container		{	display:block;		}
	.nav-vert-container		{	display:none;		}
	.footer-container		{	display:block;		}
	
	.nav-vert-container	.homelogo{ display:none;		}
	
	.nav-container a:hover, .footer-container a:hover{
		background-color:#06bcf9;
	}
	
	.nav-left li, .nav-right li{ 
		display:inline;   /* für vertikales Menue nötig,  inline für horizontales Menue  */
	}
	.nav-hor-container, .nav-left, .nav-right {
		font-size:13px;
		line-height:13px;
	}
	
	/* modifizierter header */
	.header-container{
		border-bottom:1px solid #ffff99;
	}
	.header-container .header-l{
		width:20%;
	}
	
	/*--- sonstige Anpassungen ---*/
	body{
		padding-top:0px;
	}
	.the-site{
		margin:auto; 
		height:auto; 
		width:80%; 
		max-width:800px;
	}
	
	/* Abstände und Textausrichtung */
	.content-container{
		height:500px;
	}
	
	.flexible-item-r{
		padding-top:10px;
	}
	
	
	/*--- fürr debug-mode ---*/	
	.debug-info::after{
		content:"L-t";
	}
}


/*--- L-d --- 1301 <= device-width --------------*/

@media screen and (orientation:landscape) and (min-device-width:1301px){
		
	/*----- (Un)Sichtbarkeiten -----*/
	.topper-container		{	display:block;		}
	.header-container		{	display:block;		}
	.bildleisten-container	{	display:block;		}
	.nav-hor-container		{	display:block;		}
	.nav-vert-container		{	display:none;		}
	.footer-container		{	display:block;		}	
		
	/*----------- Navigation -------------*/
	/*- Navigation: horizontal (default) -*/
	/*- Navigation: Grössen und Abstände -*/	
	.nav-hor-container, .nav-left, .nav-right {
		font-size:13px;
		line-height:13px;
	}
	
	/*--- sonstige Anpassungen ---*/	
	body{
		padding-top:0px; 
	}
	.the-site{
		margin:auto; 
		height:auto; 
		width:80%; 
		max-width:800px;
	}
	
	/* Abstände und Textausrichtung */
	.content-container{
		height:500px;
	}
	
		
	/*--- für debug-mode ---*/	
	.debug-info::after{
		content:"L-d";
	}
	
}