/* Stylesheet für Selfhtml Design 01 
  responsives Layout mit Flexbox ab Z. 240   */

/* ========================  GLOBAL DEFINITION  ========================= */
/* alternatives Boxmodell: Mit der Eigenschaft box-sizing können Sie bestimmen, worauf sich Angaben zu den Abmessungen eines Elementes beziehen.
Box kann	- Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
    		- einem Innenabstand (padding),	- einem Rahmen (border)	- einem Außenabstand (margin) (left, top, right, bottom. */

html {	box-sizing: border-box; } 

*, ::before, ::after {	box-sizing: inherit; }	/*inherit - Vererbung erzwingen */

body {	max-width: 75em;
   	margin: 0 auto; 
	padding: 0 1em;
    	font: normal 1em Helvetica, sans-serif;	/* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
    	color: #0080c0;				/* wird als currentColor für die Akzentfarbe verwendet. 2201: #006400*/
    	background: #ffffff; }

p, ol, ul, dl {color: #222222;}			/* ordered list; unordered list, definition- bzw. description list; Ausdruck zwischen 2201: #222222 <dt>…</dt> */

/* =========================  HEADER  ========================= 
header {margin: 0; padding: 1em; background: #440000; } */

header {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;}

<header>
    <div class="wrapper">
      <img src="Logo.svg" alt="logo">
      <h1>Titel</h1>
    </div>
  </header>
  
/* =========================  CONTENT  ========================= */

h1	{	color: currentColor; }
h3, h2	{	color: #333333; }

a	{	color:currentColor;     font-weight: bold; }
a:hover	{	color: #888888; }
a:focus	{	color: #888888; background-color:gold; }

#kernsatz	{	font-size: 105%; font-weight: bold;
			padding-right: 1em;
			padding-left: 1em;
			line-height: 1em; }

#kleiner	{	font-size: 85%; }
#kleinerbold	{	font-size: 100%; font-weight: bold; }

#bildernav	{	font-size: 300%; padding-left: 0.25em; padding-right: 0.25em; }
a	{	color: #999999; font-weight: bold; text-decoration: none; }
a:hover	{	color: #ffffff; background-color: #0049aa; }	/* 2201: #006400 */
a:focus	{	color: #999999; font-weight: bold; text-decoration: none; }

ul.bullets li	{width: 100%; 
		font-size: 1em; 
		padding-left: 1em;
		line-height: 1.5em; }

dl	{	margin-bottom: 1.5em;    clear: left; }
dt	{	float: left;
		font-weight: bold;
		margin-right: 5px;
		padding: 5px; 
		width: 9em; }
dd	{	margin: 2px 0;
		padding: 5px 0; }

hr 	{	width: 95%;
		height: 4px; 
		margin: 0 auto;
		color: #0049aa;		/* 2201: #006400 */
		background: #0049aa; }	/* 2201: #006400 */

.sectionbilder		{ max-width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.sectionbilder img	{ width: 90%; height: auto; margin: 0 auto; }

/* =========================  NAV  ========================= */

nav ul	{	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.5);	/* rgba(Rot, Grün, Blau, Deckkraft)*/
		font-variant: small-caps;
		text-align: center;
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex; flex-direction: column; }	/* Navigationselemente werden untereinander angezeigt border-radius: .25em; */

nav li	{	margin: 0.05em 0; flex: 1 1 100%; }

nav a	{	width:95%; margin: 0 2.5%; }

nav ul li a 	{	background: #0080c0;	/* 2201: #006400 */
			color: #ffffff;
			text-decoration: none;
			display:inline-block;
			padding: 0em 1em 0em 1em;  } /* 2201: 0.75em 0 0.5em 1em; */

nav a[aria-current=page]{ color: LightPink   ; font-weight:bold; } /* 2201: orange; font-weight */

nav  a:hover, 
nav  a:focus {	background: #c0c0c0; color: currentColor; } /* background: gold; color: currentColor; */

nav a:hover::after ,
nav a:focus::after	{	color: transparent;} 


/* =========================  SPALTEN ========================= */

mehrspaltig {	column-count: 3; gap: 1em; column-rule:  dashed; }

/* =========================  LINKTOP ========================= */
linktop {    font-size: 1em; font-weight:bold; color: #989898; } 

/* =========================  LINKKONTAKT ========================= */
linkkontakt {    font-size: 1.2em; font-weight:bold; color: #989898; } 

/* =========================  FOOTER  ========================= */
footer {    font-size: 0.8em; text-align: right; display: flex; color: #989898; } 

/* =========================  LAYOUT  ========================= */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
main	{	padding: 1em 0;	margin: 1em 0; }


/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 25em)	{header {height: 10e m; } }

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 60em)	{header {background: #e7e8ee url('../img/header.png') no-repeat right bottom ; background-size: contain; }	

/* Navigation wird nebeneinander ausgerichtet. */	
nav ul	{	flex-direction: row;
		font-size: .9em;
		background: #0080c0;	} /* 2201: #006400 */

nav li	{	margin: 0 ;
		flex: 1 1 0%;	}	

nav a::after	{	content:" | ";		/*content:" ►"; :" | "; */
			color: white;
			margin-left: 1em;	} 

/* Main wird zum Flex-Container */

main	{	display: flex;
 		flex-wrap: wrap;	}

/* main > * {	flex: 1 100%; }		/* Alle Elemente werden über die volle Breite dargestellt */
				 
section	{	flex: 1 48%;	/* Diese Elemente erhalten eine halbe Breite */
		margin: 1%; }
}

/* =========================   FIGURE TG  ========================= */
s
figure, figcaption 	{	margin: 0; padding: 0;	}

figure.bilder_schrift 	{	position: relative;s
				align-self: center;
				display: inline-block;
				align-items: center;
				flex-flow: row wrap;
				margin: 0 0.5em 1em 0.5em; max-width: 500px;
				width: 95%; 	} 
				
figure.bilder_index 	{	position: relative;s
				display: inline-block;
				width: 32.8%;	}

figure.impressum	{	max-width:300px; height:auto; }
figure.verantwortlich	{	max-width:200px; height:auto; }
figure.lageplan		{	max-width:500px; height:auto; }
figure.tuer		{	max-width:300px; width: auto; height:auto; }
figure.einzelbild	{	max-width:500px; height:auto; margin: 0 auto}
figcaption.captioneinzelbild {	position: absolute;
		bottom: 0;
		width: 50%;
		text-align: left;
		line-height: 3em;
		color: white;
		background: rgba(0,0,0,1); }

figure img {	width: 100%;
		display: block;	}

figcaption {	position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		line-height: 2em;
		color: white;
		background: rgba(0,0,0,0.5); }

@media only screen and (max-width:800px) {
body {	width: 100%;
	margin: 2% 0;
	padding: 1%; }

figure.bilder_index {	width: 100%;  }    } <!-- 2201: bei 3 bildern 48 --> 

@media only screen and (max-width:600px) {
figure.bilder_index {	width: 96%; }    } 

/* =========================    ========================= */

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 58em) {
	
section	{	flex: 1 60%;	/* Diese Elemente erhalten eine Breite von 2/3.  */
 		margin: 5%; }	

aside	{	flex: 1 28%;      
		margin: 1%; }
}

/* article ~ aside {    /* Über den Geschwisterselektor werden alle asides neben einem article-Element selektiert, aber nicht die jenigen, die neben einer section oder etwas anderem stehen. */
/*   background: #eee; border: 1px solid darkred; border-radius: 1em; padding: 1em; height: 20em; }
aside p {	margin-bottom: 50px;}
aside p:last-child {	margin-bottom: 20px; }*/

/* =========================    ========================= */