@media only screen and ( max-width: 640px ) {
    /* Handy */

html {
	font-size: 100%; /* 12 */
}

/* Grundeinstellungen für die Webseite */    
* {
    margin: 0;
    padding: 0;
}
    
body {
    font-family: Verdana, sans-serif;
    font-size: 1.3em;
    line-height:1.7em;
	
	
}
    
/* Grundeinstellungen für Text */

p {
    padding-bottom: 1em;
    padding-top: 1em;
}    
    
h1 {  
    padding-top: 0.5em;
    padding-bottom: 0.4em;
    color: #dd9661;
}
  
h2 {
    padding-top: 1em;
    padding-bottom: 0.7em;
    color: #dd9661;
}  
    
header, aside, main, article, section, footer{
    border-radius: 10px;
    height: auto;
    width: auto;
    background-color: bisque; 
    text-align: center;
}
    

/* Styles für den Kontainer, der das Grid bereitstellt */
.grid-container {
  display: grid;
   grid-template-columns: 2fr;
  /* grid-auto-rows: minmax(80px, auto); */
  grid-template-rows: 20% 10% 2fr 10%; 
  grid-gap: 1em;
  max-width: 100vw;
  /* margin: auto; */
    /* padding: 0.5em;  */   
  grid-template-areas:
    "nav nav"
   /* "logo logo" */
    "main main"
    "footer footer";
}    


/* Styles für die verschiedenen Bereiche in dem Kontainer */    
/* header {
    grid-area: header;
    background: rgb(9,41,121);
    background: -webkit-linear-gradient(rgba(9,41,121,1) 0%, rgba(19,77,183,1) 41%, rgba(0,212,255,1) 100%);
    background: -o-linear-gradient(rgba(9,41,121,1) 0%, rgba(19,77,183,1) 41%, rgba(0,212,255,1) 100%);
    background: linear-gradient(rgba(9,41,121,1) 0%, rgba(19,77,183,1) 41%, rgba(0,212,255,1) 100%);  
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
} */
    
header {
	display: none;
}
  
#header_mobile {
	 display: flex; 
    justify-content: space-between; 
    align-items: center;
	border-style: solid;
	border-radius: 10px;
	border-width:  1.5px;
	border-color: grey;
	box-shadow: 0px 0px 25px 1px 
}
  
 #logo {
	 grid-area: logo;
 width: calc(5vw + 5vh + .5vmin); 
    padding: calc(0.5vw + 0.5vh + .5vmin); 
    margin: 1em; 
    background-color: white; 
    border-radius: 100em;
  display: block;
  -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
  
 } 
#nav_desktop {
	display: none;
}
 
#nav_mobile {
	grid-area: nav;
}

 
main {
    grid-area: main;
	/* width: 100vw; */
	/* margin: auto; */
    background-color: lightgray
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
}
    
/* aside {
    display: none;
    grid-area: aside;
    background-color: white;
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
} */
    
article {
    /*grid-area: article;*/
    background-color: white;
   /*  margin: auto; */
    /*padding: 5px;*/
    text-align: left;
    padding: 2em 3% 2em 3%;
}
    
	/* Grundeinstellungen für Listen */    
main ul {
    padding-left: 1.5em;
}    
/* aside ul {
    padding-left: 1em;
} */

main li {
    padding-bottom: 0.2em;
}

/* ANFANG - Styles für verschiedene Bildgrößen */ 
.standardformat {
            display: block;
			width: 90%; 
			height: auto;
            margin: 1em auto 1.5em auto;
   
}
    
.quader {
            display: block;
			width: 60%; 
			height: auto;
            margin: 1em auto 1.5em auto;
   
} 
/* ENDE - Styles für verschiedene Bildgrößen */
	
section {
    /*grid-area: section;*/
    background-color: white;
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
    width: 90%;
    margin: 1em auto 1.5em auto;
    padding: 5px;
}

footer {
    grid-area: footer;
    background-color: black;
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
}





/* Styles für die Darstellung von Code */ 
/*pre {text-align: left; font-size: 1.2rem;}*/
    
pre code {
  max-width: 70vw;
   
}     
    
    
kbd {
    border: 2px solid rgb(220, 220, 220);
	background-color: rgb(243, 243, 243);
	padding-right: .2em;
	padding-left: .2em;
	border-radius: .25em;
	color: rgb(0,0,0);
	font-size: 1rem;
    font-weight: bold;
}    



/* ANFANG - Styles für die Tableiste  */
.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  display: block;
  padding: 0rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background:  bisque;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 10px 50px 0px 0px;
}


.tabname {
	fontsize: 2em; 
	padding-top: 1em;
    padding-bottom: 0.7em;
    color: #dd9661;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: white;
}

.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}


/* Damit die Tabs bei einem kleinen Display untereinander und nicht nebeneinander angezeigt werden. 
Das hat den Vorteil, das der Leser am Ende des Inhalts zum nächsten Inhalt weitergehen kann. */

/* @media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  } */

  .tabs label {
    width: 30%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}
/* ENDE - Styles für die Tableiste  */



/* Styles für das Logo und den Titel im Header */
#logo_titel {
    display: flex; 
    justify-content: flex-start; 
    align-items: center;
}
/* Styles für das Logobild */
#logo_titel img { 
    width: calc(5vw + 5vh + .5vmin); 
    padding: calc(0.5vw + 0.5vh + .5vmin); 
    margin: 1em; 
    background-color: white; 
    border-radius: 100em;
}
    
 /* Animation - Rotation bei Mouseover - Start */
/* #logo_titel img:hover {
		transform: rotateY(360deg) scale(1.2);
		transition-property: transform;
		transition-duration: 2500ms;
}  */  
  


/* Styles für den Logo-Text */
#logo_titel p {
        font-size: calc(3vw + 3vh + .5vmin);
		font-family: Georgia;
        font-weight: bold;
        padding-top: 0.5em;
        padding-bottom: 0.4em;
		color: #FFFFFF;
		text-shadow:
			0 1px 0 #ccc, 0 2px 0 #c9c9c9,
			0 3px 0 #bbb, 0 4px 0 #b9b9b9, 
			0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 
			0 0 5px rgba(0,0,0,.1), 
			0 1px 3px rgba(0,0,0,.3), 
			0 3px 5px rgba(0,0,0,.2), 
			0 5px 10px rgba(0,0,0,.25), 
			0 10px 10px rgba(0,0,0,.2), 
			0 20px 20px rgba(0,0,0,.15);
}
    
/* Animation für den Logo-Text- nur experimentell */
    
/* #logo_titel p:hover {
transform-origin: 0% 0%;
perspective: 200;
perspective-origin: 50% 50%;
animation-name: abfallen;
animation-duration: 800ms;
	cubic-bezier-timing-function: ease-in;
	 animation-delay: 200ms;
		
		animation-direction: alternate;
		animation-iteration-count: 2;
} 


@keyframes abfallen {
	from {transform: scale(1) scaleZ(1.0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    to 	{transform: scale(1.5) scaleZ(1.0) rotateX(-45deg) rotateY(45deg) rotateZ(50deg); /*color: red; font-weight: bold;*/}

}      
    
    


/* Inhaltsverzeichnis für den Inhalt des Artikels - Inhaltsnavigation */
/* #mozToc {
    font-size: 1rem;
    text-align: left;
    background-color: lightgoldenrodyellow;
        -webkit-box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
    border-radius: 10px;
    margin: 5px;
    padding: 3px;
    font-family: Arial, Helvetica, sans-serif;
}

#mozToc li {
    list-style-type: none;
}

#mozToc li a {
    text-decoration: none;
    color: black;
} */

/* Font Styles für die Klasse Bereichstitel */    
/* .bereichstitel {
    font-size: 1.6rem;      
	font-variant: small-caps;
	color: coral;
	text-shadow:    1px  1px 2px black,
	            	1px -1px 2px black,
					-1px  1px 2px black,
					-1px -1px 2px black;
}

.bereichstitel:first-letter {
    font-size: 2rem;
	font-weight: bold;
	font-family: sans-serif;
} */

/* Gallery - Der Gridcontainer für die Flexboxen */
/* .gridcontainer_flexboxen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border-radius: 10px;
    background-color: white;
    width: 90%;
    margin: auto;
}

.karte_bild_mit_text {
    max-width: 250px;
    height: auto;
} */

/* Gallery - Figure Styles für gridcontainer_flexboxen */
/* figure {
    margin: 0;
    padding: 0;
    text-align: center; 
}
    
figcaption {
    display: inline-block; 
    text-align: left;
}
 */


/* Hover Button Styles*/

/* .overlayLeftBtn {
    padding: 12px 24px;
    background-color: hsl(222, 100%, 95%);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.overlayLeftBtn span {
    color: hsl(243, 80%, 62%);
    position: relative;
    z-index: 1;
    transition: color 0.6s cubic-bezier(0.53, 0.21, 0, 1);
}

.overlayLeftBtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 6px;
    transform: translate(-101%, -50%);
    width: 100%;
    height: 100%;
    background-color: hsl(243, 80%, 62%);
    transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);;
}

.overlayLeftBtn:hover span {
    color: hsl(222, 100%, 95%);
}

.overlayLeftBtn:hover::before {
    transform: translate(0, -50%);
}
 */
}