/* aliceblue ver 2020 upd ccm19 march 2023 */
	
/* Elemente */

/* column = spalten ltr, row = zeilen ttd */

* 	{
        margin:0;
        padding:0;
}

html	{
	height: 100%; /* full browser height 1 */
}

body	{
	min-height: 100%; /* full browser height 2 */
	font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; /* Schriftfamilie */
	font-size: calc(16px + (17 - 16) * ((100vw - 320px) / 1600)); /* aliceblue responsive once for all | W3C CSS3 OK */
}

/* grid-template-areas, bilder und eingabe mit punkt klassenselektor */

header {
	grid-area: header;
  	background: #006699; /* logoblau | background color wird nur bei mobile gezeigt */
	justify-self: stretch; /* content horizontal lks */
	align-self: start; /* content vertikal, ohne height überhang unten hintergrund 200px x 204 px, auch bei center end stretch */
	height: 200px; /* see align-self */
}
.bilder {
	grid-area: bilder;
  	background: #FF9900; /* logobraun */
	justify-self: stretch; /* content horizontal stretch, hintergrund über ganze breite */
	align-self: stretch; /* content vertikal stretch, hintergrund über ganze breite */
}
.eingabe {
	grid-area: eingabe;
	background: #FFFFF0; /* ivory */
	border: 1px solid;
	border-radius: 0px 0.5em 0.5em; /* drei runde ecken */
	border-color: #FFCC66; /* ocker */
	justify-self: stretch; /* content horizontal stretch, hintergrund über ganze breite */
	align-self: stretch; /* content vertikal stretch, hintergrund über ganze breite */
}
nav {
	grid-area: nav;
	/* background: Moccasin; /* test */
	justify-self: stretch; /* content horizontal stretch, hintergrund über ganze breite, content lks */	
}
nav ul {
	list-style: none;
	padding-left: 2%; /* ausrichtung inc see also tablet and desktop */
	line-height: normal; /* vgl p größerer zeilenabstand */
}
main {
	grid-area: main;
	background: #FFFFF0; /* ivory */
	border: 1px solid;
	border-radius: 0px 0.5em 0.5em;  /* drei runde ecken */
	border-color: #FFCC66; /* ocker */
	padding: 30px;
	justify-self: stretch; /* content horizontal links, hintergrund fix = max breite des items */
	text-align: start; /* content linksbündig */
	display: grid; /* container for img */
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* grid for img : quelle 250px oder 300px */
}
img {
  max-width: 100%; /* img responsive see also main display and grid-template-colums */
}
.figure {
	margin: 0% 2% 2% 2%; /* aussenabstände einzeln: top right bottom left - 40px without margin */
}
footer {
	grid-area: footer;
	/* background: Moccasin; /* test */
	justify-self: stretch; /* content horizontal stretch, hintergrund über ganze breite, content lks */
}
footer ul {
	list-style: none;
	padding-left: 2%; /* ausrichtung inc see also tablet and desktop */
	line-height: normal; /* vgl p größerer zeilenabstand */
}

/* mobile version demo chrome zoom 110% or chrome dev-tool */

.container {
  height:100vh; 
  display: grid; 
  grid-template-columns: 1fr;
  grid-template-rows: 200px auto 100px auto auto 200px; /* fixe höhe header, eingabe, bilder */
  grid-gap: 10px 10px; /* abstände horizontal vertikal */
  grid-template-areas:  
	"header"
    "nav"
    "eingabe"
    "main"
    "footer"
	"bilder";
}

/* tablet version */

@media screen and (min-width: 650px) { 
  .container { 
	height:100vh; 
	display: grid; 
	grid-template-columns: 200px 1fr; /* 1fr statt auto */
	grid-template-rows: auto 200px 200px auto auto auto; /* fixe höhe bilder, eingabe; flexible höhe header see content main */
	grid-gap: 20px 10px; /* abstände horizontal vertikal */
    grid-template-areas:  
      "nav nav" 
      "bilder main" 
	  "eingabe main"
	  "header main"
      "footer footer"
	  "... ...";
	justify-content:center; /* items horizontal mittig */
	margin: 3% 3% 5% 3%; /* tablet aussenabstände einzeln: top right bottom left - without bottom */
  }
	nav ul, footer ul {
		display: grid;
		grid-auto-flow: column; /* li horizontal */
		grid-auto-columns: max-content; /* li content = breite column */
		grid-gap: 3%; /* li abstand zwischen columns*/
		padding: 0%; /* ausrichtung inc */
	}
	footer {
		padding: 0% 0% 3% 0%; /* tablet innenabstände einzeln: top right bottom left - only bottom | margin > padding w firefox */
	}
} /* end tablet */

/* desktop version */

@media screen and (min-width: 1000px) { 
  .container { 
	height:100vh; 
	display: grid; 
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto 200px 200px auto auto 200px; /* fixe höhe bilder, eingabe, header */
	grid-gap: 20px 10px; /* abstände horizontal vertikal */
    grid-template-areas:  
      "nav nav" 
      "bilder main" 
	  "eingabe main"
	  "... main"
      "footer footer"
      "header ...";
	justify-content:center; /* items horizontal mittig */
	margin: 1% 19% 1% 19%; /* desktop aussenabstände einzeln: top right bottom left - left and right */
  }
	nav ul, footer ul {
		display: grid;
		grid-auto-flow: column; /* li horizontal */
		grid-auto-columns: max-content; /* li content = breite column*/
		grid-gap: 3%; /* li abstand zwischen columns*/
		padding: 0%; /* ausrichtung inc */
	}	
	nav {
		margin: 2% 0% 0% 0%; /* desktop aussenabstände einzeln: top right bottom left - top */
	}
	footer {
		margin: 0% 0% 1% 0%; /* tablet aussenabstände einzeln: top right bottom left - bottom */
		padding: 0% 0% 0% 0%; /* tablet innenabstände einzeln: top right bottom left - none | überschreiben von tablet */
	}
	header {
	padding: 0px 0px 20px 0px; /* desktop innenabstände einzeln: top right bottom left - bottom | margin > padding w firefox */
  	background: none; /* logoblau | background color wird nur bei mobile gezeigt | upd w padding instead of margin */
	}
} /* end desktop */

/* print version */

@media print { 
  .container {
	height:100vh; 
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: auto 200px 200px auto auto 200px; /* fixe höhe header, eingabe, bilder */
	grid-template-areas:  
		"main" /* elemente display: none nach den sichtbaren elementen w sonst zeilenabstand zu sehen ist */
		"header"
		"nav"
		"eingabe"
		"footer"
		"bilder";
	grid-gap: 20px 0px; /* abstände horizontal vertikal */
	}
	nav {
		display: none;
	}
	.eingabe {
		display: none;
	}
	footer {
		display: none;
	}
	.bilder {
		display: none;
	}
} /* end print */

/* Auszeichnungen */

h1 { /* Überschrift */
	color: #000033; /* dunkelblau */
}

h3.ccm-cookie-declaration--purpose--title { /* Überschrift CCM19 */
	/* color: #808000; /* olive für test */
	/* background-color: #99CCFF; /* graublau für test */
	margin-top: 2%;
}

h4.ccm-cookie-declaration--embedding--title { /* Überschrift CCM19 */
	/* color: 	#FF8C00; /* darkorange für test */
	/* background-color: #99CCFF; /* graublau für test */
	margin-top: 2%;
}

p { /* Fliesstext */
	color: #000033; /* dunkelblau */
	line-height: 1.4; /* größerer zeilenabstand als normal w lesbarkeit */
	margin-top: 1%;
}

p.ccm-cookie-declaration--change-consent { /* Fliesstext */
	/* color: #556B2F; /* darkolivegreen für test */
	/* background-color: #F0FFF0; /* honeydew für test */
	line-height: 3.0; /* größerer zeilenabstand als normal w lesbarkeit */
}

/* auszeichnung interner links auf der homepage zzgl. strong see php | 11.09.20 nix */

ul {
	list-style: none;
	padding: 0%; /* ausrichtung inc see also tablet and desktop */
	line-height: 2.2; /* größerer zeilenabstand als normal w lesbarkeit */
}

/* interne links */	 /* s. Kobert_468 incl. text-decoration 451 */

a.intern:link, a.intern:visited {
	text-decoration: none;
	color: #006699; /* Schriftfarbe Link und besuchter Link grundblau */
}

a.intern:hover, a.intern:active {
	text-decoration: none;
	color: #FFCC33; /* Schriftfarbe bei mouseover und aktiv hellsand */
}
   
/* aktuelle interne links see menu and weblinks nav seitenweise */

.aktuell {
	text-decoration: none;
	color: #FFCC33; /* Schriftfarbe aktueller Link hellsand */ 
}

/* externe links */

a.extern:link {
	text-decoration: none;
	color: #996600; /* dunkelbraun */
}

a.extern:hover, a.extern:active, a.extern:focus {
	text-decoration: none;
	color: #FFCC33; /* hellsand */
}

a.extern:visited {
	text-decoration: none;
	color: #CC9933; /* hellbraun */
}

/* datenschutz links ccm19 see externe links; interner link opt out muss ebenso dargestellt werden. */

a:link {
	text-decoration: none;
	color: #996600; /* dunkelbraun */
}

a:hover, a:active, a:focus {
	text-decoration: none;
	color: #FFCC33; /* hellsand */
}

a:visited {
	text-decoration: none;
	color: #CC9933; /* hellbraun */
}

/* projekt img w3c vorlage */

.w3c {
		border:0;
		width:88px;
		height:31px;
}

/* formular input */

label {
	font-size: 14px;
	padding-left: 5px; /* beschriftung zur mitte einrücken */
	line-height: 2.2; /* größerer zeilenabstand als normal w lesbarkeit */
}

.formsuche {
	width: 192px; /* 200px minus test */
	padding: 2px; /* eingabe nicht bis zum rand */
	height: 20px; /* test */
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC; /* grau */
	font-size: 14px; /* Schriftgröße der Eingabe */
}

.formauswahl {
	width: 198px; /* 200px minus 2px oder % */
	padding: 2px; /* eingabe nicht bis zum rand */
	height: 24px;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC; /* grau */
	font-size: 14px; /* Schriftgröße der Eingabe */
}

/* formular submit */
   
.formbutton {
	width: 198px; /* 100px minus 2px oder % */
	height: 24px;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC; /* grau */
	background: #fffff0; /* ivory */
	font-size: 14px; /* Schriftgröße der Beschriftung */
}