/* Farbdefinitionen (#hexadezimal) */
/* Farbdefinitionen 01.05.2024 */

/*	spd_rot (Text): #e3000f */
/*	spd_rot (Fläche): #d10a10 */
/*	spd_grau (Fläche): #ececec */
/*	spd_purpur: #980267 */
/*	spd_cyanblau: #00b4cc */
/*	spd_dunkelrot: #b61c3e */
/*	hellgrau: #f7f7f7 */
/*	mittelgrau: #a0a0a0 */
/*	dunkelgrau: #303030 */
/*	weiss: #ffffff */
/*	schwarz: #000000 */
/* trans: rgba(0,0,0,1.0); */

/* 
Grundsätzliche Reihenfolge:
Element: body (global), header, nav, article, aside, footer
innerhalb: Hintergrundfarbe, Rahmen, Abstände, Flex, Schriftart, -farbe und -größe, Klassen
*/


/* Einbinden besonderer Schriften */
/* woff Format damit IE die eingebundenen Schriftarten benutzt. Bei TTF werden die meisten Schriftarten 
im IE gesperrt und nicht benutzt.*/

@font-face {
	font-family: thesans;
	src: url(../fonts/TheSans_B5_Plain.woff);
	format('woff');
}

@font-face {
	font-family: thesans;
	src: url(../fonts/TheSans_B6_SemiBold_Italic.woff);
	format('woff');
	font-style: italic;
}

@font-face {
	font-family: thesans;
	src: url(../fonts/TheSans_B7_Bold_Plain.woff);
	format('woff');
	font-weight: bold;
} 


/*=========================*/
/*         Global          */
/*=========================*/

body {
	background-color: #ffffff;
	-webkit-display: flex;
	display: flex;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	font-family: thesans, sans-serif;
	color: #000000; /* Standard Schriftfarbe */
	font-size: 0.9em;
}

header, nav, article, aside, footer {
	margin: 1.0em;
	border-style: none;
	padding: 0;
}

h1 {
	font-size: 1.6em;
	font-weight: bold;
	color: #E3000F;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

h2 {
	font-size: 1.0em;
	font-style: italic;
	color: #000000;
	margin-top: 0.3em;
}

h3 {
	font-size: 1.0em;
	color: #E3000F;
	/*line-height: 1.0;*/
	margin-bottom: 0;
}

a, a:visited a:hover, a:focus, a:active {
	color: #E3000F;
}

a, a:visited {
	transition-duration: 0.2s;
	text-decoration: none;
}

a:hover, a:focus, a:active {
	transition-duration: 0.2s;
	text-decoration: underline;
}

img {
	max-width: 100%;
}

figcaption {
	font-style: italic;
}
 
/* Grafik List Item */
li {
	list-style-image: url(../img/list_item.png);
}

table {
	min-width: 18.0em;
}

tfoot {
	font-size: 0.6em;
	font-style: italic;
	color: #ececec;
	background-color: #ffffff;
}

th {
	background-color: #ececec;
	color: #ffffff;
	text-align: center;
}

tbody tr {
	background-color: #ffffff;
	color: #ececec;
}

tbody tr:nth-child(odd) {
	background-color: #f7f7f7;
}

tbody tr:hover {
	background-color: #a0a0a0;
	color: #ffffff;
}

td {
	padding-left: 0.5em;
}

.video_center {
	text-align: center;
	margin: 1.0em 1.5em 1.0em 0;
}

.figure_left {
	float: left;
	margin: 1.0em 1.5em 1.0em 0;
}

.figure_right {
	float: right;
	margin: 1.0em 0 1.0em 1.5em;
}

.figure_center {
	text-align: center;
	margin: 1.0em 0 1.0em 0;
}

 .portrait-icon {
	margin: 1.0em;
	padding: 0.5em;
	width: 160px;
}
 
 .reihe-umbruch {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
 
.spd_rot {
	color: #e3000f;
}

.spd_cyanblau {
	color: #00b4cc;
}

.spd_grau {
	color: #ececec;
}

/* Grafik List Item mit Pfeil */
.arrow li {
	list-style-image: url(../img/list_arrow.png);
}

.calendar {
	font-size: 0.7em;
}

.minor {
	font-size: 0.7em;
}

/* Listen mit Icon Bilder */
.list_img li {
	list-style-image: none;
	list-style-type: none;
}

.list_img li img {
	margin-right: 1.0em;
}

.list_img li a {
	color: #ececec;
}

/* Grafik List Item für pdf Listen*/
.pdf li {
	list-style-image: url(../img/list_pdf.png);
}

.table_left {
	float: left;
	margin: 1.0em 1.5em 1.0em 0;
}

.table_right {
	float: right;
	margin: 1.0em 0 1.0em 1.5em;
}

.table_center {
	text-align: center;
	margin: 1.0em 1.5em 1.0em 1.5em;
}


/*================================*/
/*             Kopf               */
/*================================*/

header {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	display: flex;
	-webkit-display: flex;
	flex-flow: row nowrap;
	webkit-order: 1;
	order: 1;
	align-items: left;
}

header img {
	max-height: 7.5em;
}

/*================================*/
/*          Navigation            */
/*================================*/

nav {
	flex: 1 1 100%;
	-webkit-order: 2;
	order: 2;
	-webkit-display: flex;
	display: flex;
	flex-flow: column nowrap;
	max-height: auto;
	margin-top: 0;
	padding-bottom: 1.0em;
	margin-bottom: 0;
	border-bottom: 4px solid #e3000f;
	font-size: 0.9em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	-webkit-display: flex;
	display: flex;
	flex-flow: column nowrap;
}

nav li {
	margin: 0px;
	padding: 0px;
	flex: 1 1 100%;
	-webkit-display: flex;
	display: flex;
	flex-flow: column nowrap;
	list-style-type: none;
	position: relative;
	list-style: none;
	text-decoration: none;
}

nav a {
	display: inline-block;
	flex: 1 1 100%;
	background-image: linear-gradient(#ececec,#ececec); /*grau, grau*/
	border-width: 1px;
	border-style: solid;
	border-color: #ececec; /*dunkelgrau*/
	max-height: 1.1em;
	margin: 0px;
	padding: 0.5em;
	color: #000000; /*dunkelgrau*/
	text-decoration: none;
	text-align: center;
	/*transition-duration: 0.2s;*/
}

nav a:hover, 
nav a:focus, 
nav a:active {
	background-image: linear-gradient(#e3000f,#e3000f); /*SPD-Rot*/
	color: #ffffff;
	/*transition-duration: 0.2s;*/
	text-decoration: none;
}

nav ul ul {
   /* Unternavigation ausblenden */
	display: none;   
   font-size: 0;
   position: relative;
   width: 100%;
   z-index: -1;
   border-width: 0;
}

nav ul li:hover ul, nav ul li:hover ul a {
   /*  Unternavigation einblenden */
   display: inline-block;
   font: inherit;
   z-index: 2;  
   border-width: 0; 
}

/*================================*/
/*            Artikel             */
/*================================*/

article {
	flex: 1 1 100%;
	-webkit-order: 4;
	order: 4;
	-webkit-display: flex;
	display: flex;
	flex-flow: column nowrap;
}

article div {
	margin-bottom: 1.0em;
}

article div:last-child {
	margin-bottom: 0;
}

article ul {
	list-style-position: outside;
	/*text-indent: 1.0em;*/
	overflow: auto;
	margin-left: 4.0em;
}

article li {
	font-size: 1.3em;
	font-style: italic;
	color: #303030;
	margin-top: 0.5em;
}

article li li {
	font-size: 0.8em;
}

article li p {
	font-size: 0.7em;
	font-style: normal;
	margin-top: 0.5em;
	margin-bottom: 0.8em;
}

/*================================*/
/*         Rand Kolummne          */
/*================================*/

aside {
	-webkit-order: 4;
	order: 4;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	-webkit-display: flex;
	display: flex;
	flex-flow: column nowrap;
}


/*================================*/
/*        Einzelne Kolummne       */
/*================================*/

section {
	margin-bottom: 1.0em;
	border: 2px solid #e3000f;
	padding: 0;
}

section:last-child {
	margin-bottom: 0em;
}

section h1 {
	font-size: 1.1em;
	color: #ffffff;
	background-color: #e3000f;
	margin: 0;
	padding: 0.5em;
	text-align: center;
}

section a {
	color: #000000;
}

section figure {
	margin: 1.0em;
	padding: 0;
}

/*================================*/
/*           Fußzeile            */
/*================================*/

footer {
	background-color: #e3000f;
	padding: 1.0em;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	flex: 1 1 100%;
	webkit-order: 5;
	order: 5;
	color: #ffffff;
}

footer * {
	flex: 1 1 auto;
	justify-content: space-around;
	text-align: center;
	margin: 0.4em;
}

footer a {
	color: #ffffff;
}


/* ================================================================== */
/* ================================================================== */
/* Smart Phones und Tablets mit mittlerer Auflösung                   */
/* ================================================================== */

@media all and (min-width: 52em) {
	
	body {
		flex-flow: row wrap;
		font-size: 1.1em;
	}
	
	h1 {
		font-size: 2.4em;
	}
	
	h2 {
		font-size: 1.3em;
	}
	
	h3 {
		font-size: 1.1em;
	}
	
	nav {
		max-height: 2.0em;
		margin-bottom: 0.3em;
	}

	nav ul {
		flex-flow: row nowrap;
	}
	
	nav ul li:hover ul a {
		font-size: 0.75em;
	}
	
	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		-webkit-flex: 5 1 0%;
		flex: 5 1 0%;
	}
	
	aside {
		-webkit-flex: 2 1 0%;
		flex: 2 1 0%;
	}

}


/* ================================================================== */
/* ================================================================== */
/* Smart Phones und Tablets mit großer Auflösung                   */
/* ================================================================== */

@media all and (min-width: 65em) {
	
	nav {
		font-size: 1.1em;
	}

}


/* ================================================================== */
/* ================================================================== */
/* Smart Phones und Tablets mit sehr großer Auflösung                 */
/* ================================================================== */

@media all and (min-width: 75em) {
	
	nav ul li:hover ul a {
		font-size: 1.0em;
	}
	
}



/* ================================================================== */
/* ================================================================== */
/*                           Gallery Styles                           */
/* ================================================================== */

/* {box-sizing:border-box} */
.mySlides {
	display:none;
	text-align: center;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(100,100,100,0.8);
}

/* Caption text */
.text {
  background-color: rgba(100,100,100,0.25);
  color: #f7f7f7;
  font-size: 15px;
  /*padding: 8px 12px;*/
  position: absolute;
  bottom: 2.0em;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f7f7f7;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #e0e0e0;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

/* Bilder Formatierung */
.gallery {
	/*width: 100%;*/
	max-height: 800px;
	border-style: none;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}