/* -----------------------
Base styles
------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');
/* -----------------------------------------------------------------------------
   Google Fonts 
 
   Für Flora Box Titel / Navigation / Fussnote
   Schrift:   Poppins
   Styles:    Regular 400 / Medium 500 / Semi-bold 600 / Bold 700
   CSS rukes: font-family: 'Poppins', sans-serif;

   Restlicher Seiten Text
   Schrift:   Open Sans
   Styles:    Regular 400 / Regular 400 italic / Semi-bold 600 / Bold 700
   CSS rules: font-family: 'Open Sans', sans-serif;  
------------------------------------------------------------------------------*/

body
{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #eee;
	font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	line-height: 1.1;
}

h1 { font-size: 1.75em; }    /* 28px */
h2 { font-size: 1.56em; }    /* 25px */
h3 { font-size: 1.375em; }   /* 22px */
h4 { font-size: 1.125em; }   /* 18px */
h5 { font-size: 1em; }       /* 16px */
h6 { font-size: .875em; }    /* 14px */

p
{
	margin: 0 0 1.5em;
	line-height: 1.5;
}

blockquote
{
	color: #000000;  /* black font */
	background-color: #eeeeee;
	padding: 1em 2em;
	margin: 0 0 2em;
	border-left: 5px solid #eee;
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 2em;
	border: 0;
	border-top: 1px solid #ddd;
}

table
{
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
}

th, td
{
	padding: .5em 1em;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

li
{
  padding-bottom: 0.7em;
}




a:link { color: #00665A; }       /* Balken dunkel, petrol	 App-Drawer dunkel RGB: 000, 102, 090 */
a:visited { color: #5C3C92; }    /* Dunkles Violett aus App Titel, RGB: 92, 60, 146 */
a:focus { color: black; }
a:hover { color: #5C3C92; }      /* Dunkles Violett aus App Titel, RGB: 92, 60, 146 */
a:active { color: #815DBB;; }    /* Helles Violett aus App-Titel, RGB: 129, 93, 187 */

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 60em;
	margin: 0 auto;
	background-color: #fff;
}

.header
{
	color: #00665A;
	background: #fff;      /* weisser Balken */
	padding: 1em 1.25em;
}

.header-heading 
{
	 margin: 0;
	 font-family: 'Poppins', sans-serif;
	 font-weight: 700;	 
}

.nav-bar
{
	background: #fff;     /* weisse Nav Bar */
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;      
}

.content { padding: 1em 1.25em; }

.annotation
{
	font-size: 0.8em;
}



/* -----------------------
footer
------------------------*/
.footer
{
	color: #fff;
	background: #00665A;       /* Balken dunkel, petrol, App-Drawer dunkel, RGB: 000, 102, 090 */
	padding: 1em 1.25em;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}

.footer a
{
	color: #fff;
	text-decoration: none;
}

.footer a:link { color: white; }
.footer a:visited { color: white; }

.footer a:focus
{
	color: black;
	background-color: white;
}

.footer a:hover
{
	color: white;
	background-color: #268E83;      /* Balken Farbe zwischen den beiden Balken Farben, RGB: 38, 142, 131 */
}

.footer a:active
{
	color: white;
	background-color: #4CB5AB;      /* Balken hell, tuerkis-gruen, App-Drawer hell, RGB: 076, 181, 171 */
}


/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: block;
	padding: .7em 1.25em;
	color: #00665A;
	text-decoration: none;
	border-bottom: 1px solid gray;
}

.nav a:link { color: #00665A; }
.nav a:visited { color: #00665A; }

.nav a:focus
{
	color: #268E83;             /* Balken Farbe zwischen den beiden Balken Farben, RGB: 38, 142, 131 */
	background-color: #fff;
}

.nav a:hover
{
	color: #268E83;              /* Balken Farbe zwischen den beiden Balken Farben, RGB: 38, 142, 131 */
	background-color: #fff;      /* hintergrund der Schrift bleibt weiss */
}

.nav a:active
{
	color: #4CB5AB;              /* Balken hell,   türkis-grün  App-Drawer hell   RGB: 076, 181, 171 */
	background-color: #fff;      /* hintergrund der Schrift bleibt weiss */
}

/* -----------------------
Single styles
------------------------*/

.img-responsive { max-width: 100%; }


.img-res-border 
{
	max-width: 100%;
	border:1px solid black;
}


.btn
{
	color: #fff !important;
	background-color: #268E83;   /* Balken Farbe zwischen den beiden Balken Farben, RGB: 38, 142, 131 */
	border-color: #222;
	display: inline-block;
	padding: .5em 1em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn:hover
{
	color: #fff !important;
	background-color: #4CB5AB;     /* Balken hell, tuerkis-gruen, App-Drawer hell, RGB: 076, 181, 171 */
}

.btn:focus
{
	color: #fff !important;
	background-color: black;
}

.btn:active
{
	color: #fff !important;
	background-color: #00665A;     /* Balken dunkel, petrol	 App-Drawer dunkel RGB: 000, 102, 090 */
}

.table-data
{
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

.list-unstyled
{
	padding-left: 0;
	list-style: none;
}

.list-inline
{
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
}

.list-inline > li
{
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}



/* -----------------------
Flex Box Layout for images
https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
------------------------*/

.flex-container {
  display:flex;
}

.flex-item-a {
	order:1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis:  47%;
 }
 
.flex-item-b {
	order:2;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 6%;
 } 
 

.flex-item-c {
	order:3;
	flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 47%;	
}


/* -----------------------
Wide styles
------------------------*/

@media (min-width: 42em)
{
	.header { padding: 1.5em 3em; }
	.nav-bar { padding: 1em 3em; }
	.content { padding: 2em 3em; }
	.footer { padding: 2em 3em; }
	
	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}
	
	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}