@media only screen and ( min-width: 640px ) {
    /* breites Browserfenster */

/* Grundeinstellungen für die Webseite */    

html {
	font-size: 100%;
}
* {
    margin: 0;
    padding: 0;
}
    
body {
    font-family: Verdana, sans-serif;
    font-size: 1.1em;
    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: 1fr 1fr 1fr 1fr;
	/* grid-auto-rows: minmax(80px, auto); */
	grid-template-rows: 25vh calc(0.2 x 100vh) 2fr /* 2fr */ 10vh; 
	grid-gap: 1em;
	max-width: 100vw;
	margin: auto;
    padding: 0.5em;    
	grid-template-areas:
		"header header header header"
		"nav nav nav nav"
		"main main main main"
		"footer footer footer footer";
}    
    
	
/* ANFANG - Styles für die verschiedenen Bereiche im grid-container */    
header {
    grid-area: header;
	background-color: transparent;
   /*  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); */
}
   

nav {
	grid-area: nav;
}

#header_mobile {
	display: none;
}

   
/* Hauptinhalt */    
main {
    grid-area: main;
	width: 70vw;
	margin: auto;
    background-color: bisque;
    -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 {
    
    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);
} */
 
/* Artikel */ 
article {
    /*grid-area: article;*/
    background-color: white;
    margin: auto;
    text-align: left;
    padding: 2em 10% 2em 10%;
}

img.standardformat{
	            display: block;
			width: 90%; 
			height: auto;
            margin: 1em auto 1.5em auto;
}

/* Sektion */    
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: 100%;
    margin: 1em auto 1.5em auto;
    padding: 5px;
}

/* Fußzeile */
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);
}
/* ENDE - Styles für die verschiedenen Bereiche in dem Kontainer */ 


/* Überschrift für Prism-Highlighter Codeblöcke */    
.prism-headline {
	font-size: 1.2rem;
	/* font-weight: bold; */
	font-variant: small-caps;
	padding: 0;
}	
	

/* ANFANG - Styles für die Darstellung von Code */
/* Diese beiden Tag sind notwendig damit der Prism-Highlighter funktioniert */     
pre code {
  max-width: 70vw;
}     

code {
  white-space: pre-wrap !important; /* ist für den Prism-Highlighter erforderlich */ 
}
   

kbd { /* Hervorheben von Code im Text, z. B. für Tastatureingaben (leser soll die Tasten Strg + f drücken). */ 
    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: 1.2rem;
    font-weight: bold;
}    
/* ENDE - Styles für die Darstellung von Code */ 
 
 
/* ANFANG - Styles für verschiedene Bildgrößen */ 
article .standardformat {
            display: block;
			width: 90%; 
			height: auto;
            margin: 1em auto 1.5em auto;
   
}
    
article .quader {
            display: block;
			width: 60%; 
			height: auto;
            margin: 1em auto 1.5em auto;
   
} 
/* ENDE - Styles für verschiedene Bildgrößen */
 
 
/* 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: 100%;
    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-row; 
    justify-content: center; 
    align-items: center;
	border-style: solid;
	border-radius: 10px;
	border-width:  1.5px;
	border-color: grey;
	box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.5);
}

/* 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 des Logos 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: Verdana, sans-serif;
        font-weight: 600;
		font-stretch: expanded;
        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 ANFANG - 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);}
}      
/* ANIMATION ENDE - für den Logo-Text */   
  


						/* ++++++++++ Momentan nicht in Verwendung ++++++++++ */


/* ANFANG Inhaltsnavigation - Inhaltsverzeichnis für den Inhalt des Artikels */
#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;
}

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

#mozToc li a {
    text-decoration: none;
    color: black;
}
/* ENDE Inhaltsnavigation - Inhaltsverzeichnis für den Inhalt des Artikels */


/* ANFANG - 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;
}
/* ENDE - Font Styles für die Klasse Bereichstitel */


/* ANFANG Gallery Container - 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;
}
/* ENDE Gallery Container - Der Gridcontainer für die Flexboxen */


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

}