/* routerproject */

	@media (min-width:320px) and (max-width : 991px) {

	.mobile-header-hytar-resize img {margin: 2rem 0 0;}
.mobile-header-author-resize {margin-top: 3rem;}
.mobile-footer-meta-resize {margin-right: 3rem;}

.mobile-footer-meta-resize {
    display: flex;
    justify-content: flex-end;
    gap: 18px;

    margin-bottom: 14px;
    padding-bottom: 12px;

    border-bottom: 1px dotted #888;

    font-size: 10px;
}

.mobile-footer-meta a {
    color: #777;
    text-decoration: none;
}

.mobile-header-author-resize {
    flex: 1;

    margin-left: 16px;

    padding-top: 4px;

    text-align: right;
}



/* ==========================================================================
	   1. SPALTEN-LAYOUT & WRAPPER
	   ========================================================================== */
	.layout-wrapper {
	    display: flex;
	    align-items: flex-start;
	    gap: 0rem; /* Flexibler Abstand zwischen Menü und Text */
	    width: 100%;
	}

	/* Fixiert die linke Menü-Spalte exakt auf Ihre gewünschten 18rem */
	.menu-spalte {
	    width: 18rem;
	    flex-shrink: 0;
	}

	/* Der Textbereich rechts nutzt den gesamten restlichen Platz */
	#contentbox {
	    flex-grow: 1;
	}
	
	 .systemnachricht{ font-family: verdana, sans-serif; font-size: 0.75rem;
	    background: #f5f5f5;
	   	
	    border-width: 1px 1px 1px 0;
		border-color: #e1e1e1;
		border-style: solid;
	    padding: 1rem 2rem;
		    width: 100%;
	}
    #nav-trigger-bar,
      #nav-container,
      .menu-spalte {
          display: none !important;
      }
	 #dplsabobtn{ display: none; float: right; font-family: verdana, sans-serif; font-size: 0.7rem;}
		#flipmobilebig{  position:relative; top: -40px;}
		#stevenmobilebig{  position:relative; top: 0px;}

		#flopnmobilebig{  position:relative; top: -42px;}
		#impressumlink{float:right;}
				.flash-success {
				    background: #d4edda;
				    padding: 10px;
				    margin-bottom: 10px;
				}

				.error {
				    color: red;
				    font-size: 0.9em;
				}
				#maxwrap{text-align:center; width:100%; margin: 0;padding:0; min-height:100vh;}
				.security{margin: 16rem 2rem 0 auto; display: none;}
		
				body{ 
				   background-color: #f5f5f5;
					color: #727272; /* #7bae16; *//*#9ee01c*/
					/*
					background-image: url('../../img/headerBgStripe.png');
					background-position: top left;
					background-repeat: repeat-x;
					*/
					font-family: 'KalamRegular';
					font-size: 3rem;
					padding: 0;margin:0;
					line-height: 4rem;
				}
				#schnittstellelink{display: none; width:6rem;text-align: center;}
#manifestelink{display: none;}
				#wmxsfz{display: inline-block; text-align: center; margin: 0 auto; width: fit-content;}
				#readmelink{display: none; width:5rem;text-align: center;}
		
		
				.singledisplay{
					margin: 1rem 5%;
					Width: 90%;
					
				}
				
		
				#as{ display: inline-block; width: 8rem; float: right; cursor: pointer;}
		
						h1, h2, h3, h4, h5, h6{ font-size: 3.75rem; line-height: 4.75rem;font-weight: normal; margin: 1rem 2%;}
						#logoarea{ display: none;width: 25%; text-align: center;}
						#mainnavigation{    
							 display: none;
		    margin: 1.3rem 0 0;
		    width: 18rem;
		vertical-align: top;
		}
		
	img.vignette{ margin: 4rem auto 0; display: block; width:100px;}
					#mainnavigation ul{ list-style:none; margin: 0rem;}
					#mainnavigation ul li { border-bottom: 1px #727272 solid; margin: 0rem; vertical-align: middle;}
					#mainnavigation ul li:hover { background-color: #fff; transition: all 0.3s; border-bottom: 1px #727272 solid; margin: 0rem; vertical-align: middle;}
			
					#mainnavigation ul li img { vertical-align: middle; margin: 1rem;}
					#mainnavigation ul li a:link{ color: #000; text-decoration: none;}
					#mainnavigation ul li a:visited{color: #000; text-decoration: none;}
					#mainnavigation ul li a:active{color: #000; text-decoration: none;}
					#mainnavigation ul li a:hover{color: #000; text-decoration: none; transition: all 0.5s; opacity: 0.6;}
			
		
					a:link{color: #727272; text-decoration: none;}
					a:visited{color: #727272; text-decoration: none;}
					a:active{color: #727272; text-decoration: none;}
					a:hover{color: #727272; text-decoration: none; transition: all 0.5s ; opacity: 0.6;}

					.clr{
							clear: both;
						}
						.essaydisplay, .singledisplay, #contentbox {text-align: center;}
						.essaydisplay h1, 
						.essaydisplay p,
						.singledisplay h1,
						.singledisplay p,
						.singledisplay ul li,
						#contentbox h1,
						#contentbox p
						{ text-align: left;}
						.essaydisplay img,
				.singledisplay img{ position: relative; top: -4rem;}
				#contentbox img { position: relative; top: -3rem;}
				#contentbox img#flop{position: relative; top: -2.3rem; width:100px;}
				.pagebox{
				    background: #f5f5f5; /*#64d125;*/ /*#793312;*//*#10120b;*/
		    
					color: #727272;
					width: 100%;
					margin: 0 auto;
				
				}
.mobile-header-resize{display: block;}
				#headerbox{display: none;}
				.textbox{ background-color: #fff; border-color: #e1e1e1;}
		
					#bashbar{
					display: none;background-color: #10120b; height:4rem; padding: 0.5rem;text-align:left;
				}
				#bashbar p, #bashbar p a{
					color: #7bae16;
					    font-size: 2rem;
					    margin: 0.5rem;
				}
				
		
				#Mainnavigation ul{
					list-style: none;
					margin: 2rem 0 0; 
			
					display: inline-block;
					width: 85%;

				}
		
		
				h2{
		
				  color:#727272;
				  text-align:center;
				  font-size:3rem;
				  line-height: 4rem;
				}
				#logoicon{transform: rotate(180deg); margin: -1px 0 0 0;}
				h3{ color: #727272; font-size: 3rem; line-height:4rem; /* #aaa; */ 
				}
				#contentbox{
					background-color: #fff;
					border: 1px #e1e1e1 solid;
					width: 94%;
					margin: 6rem auto;
					padding: 0 3%;
					display: inline-block;
				}
		
				
				#aufdieHandSubnavigation{
					display: inline-block;
				 	text-align: center;
					width: 100%;
					vertical-align: top;
				
					margin: 0 0 2rem 0;
					padding: 1rem;
				}
				#aufdieHandSubnavigation ul{
					display: inline;
					list-style: none;
					margin: 0;
					padding: 0;
				}
				#aufdieHandSubnavigation a li{
					display: inline;
					list-style: none;
					margin: 0rem;
					padding: 0.45rem 1rem 0;
					text-decoration: none!important;
				}	
			#aufdieHandSubnavigation a {
				text-decoration: none;
			}
		
			#contentbox h2{ background-color: #727272; color: #fff;}
				.thirdColumn{
					display: inline-block;
					margin: 1rem 2rem;
					vertical-align: top;
					width: 80%;
				}
				.thirdColumn h3{
					color: #727272;
				}
				.thirdColumn:hover, .thirdColumn h3:hover{
					transition: all 0.5s; 
					opacity: 0.6;
		
				}
		
		
				.entries, .secondBox{
					display: inline-block;
					margin: 2rem;
					vertical-align: top;
					width: 100%;
				}
				.entries ul{
					list-style: none;
					margin: 0;
					padding: 0;
				}
				.entries ul li{ margin: 1rem 0;}
				.entries ul li a:hover{ transform: all; opacity: 0.5;}
				.terminal-window {
					display: none;
				}
				.firstbox{
			
			   
					    display: inline-block;
					    margin: 2rem;
					    vertical-align: top;
					    width: 68rem;
					    padding: 2rem;
			   	
				}
	
				.essaydisplay, .vitatextbox{
					background-color: #fff;
					border: 1px #e1e1e1 solid;
				    display: inline-block;
				    margin: 6rem 0rem;
				    vertical-align: top;
				    width: 90%;
				    padding: 2rem;
				}
				.vitatextbox{
					width: 100%;
				}
				.footer{
					
					display:none;
				}
		
			
				/* ==========================================================================
				   PERFEKTE MOBILE REPARATUR (Für Smartphones & Tablets unter 992px)
				   ========================================================================== */
				
				    /* 1. Versteckt die gesamte linke Spalte restlos auf dem Smartphone */
				    .menu-spalte, 
				    #nav-trigger-bar, 
				    #nav-container, 
				    #foto-modul,
				    .terminal-window {
				        display: none !important;
				    }

				    /* 2. Löst das Spalten-Layout auf:
				       Schaltet den Wrapper von 'flex' auf ein normales Block-Element um.
				       Dadurch kann der Text die volle Displaybreite einnehmen. */
				    .layout-wrapper {
				        display: block !important;
				        width: 100% !important;
				    }

				    /* 3. Korrigiert die Contentbox (Ihre Geschichten):
				       Gibt dem Text die volle Breite und verhindert das zu weite Hochspringen. */
				    #contentbox {
				        display: block !important;
				        width: 100% !important;
				        max-width: 100% !important;
				        flex-grow: 0 !important;
        
				        /* Schafft harmonische Luft zum oberen Browserrand, da das Menü fehlt */
				        margin-top: 3.5rem !important; 
        
				        /* WICHTIG: Schöner seitlicher Abstand (Padding), damit die Buchstaben 
				           auf dem Handy nicht direkt an die Display-Glaskante klatschen */
				        padding-left: 1.5rem !important;
				        padding-right: 1.5rem !important;
				        box-sizing: border-box !important;
				    }

				    /* 4. Text-Fluss absichern:
				       Zwingt alle Überschriften und Absätze dazu, sich flexibel zu verhalten 
				       und erzeugt saubere automatische Zeilenumbrüche. */
				    #contentbox h1,
				    #contentbox p {
					/*
				        width: 100% !important;
				        max-width: 100% !important;
				        white-space: normal !important;
					*/
				    }
					
	}