/* ====================================================  GLOBAL DEFINITION  ==================================================== */

/* alternatives Boxmodell */

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0em;
  font-size: 1em;
  font: Times New Roman, Times, serif;
  color: #050567; /* wird als currentColor für die Akzentfarbe verwendet. */
  background-color: #FFFFFF;
}

p, ol, ul, dl {color: #000000;}


/* ====================================================  HEADER  ==================================================== */

header {
  margin: 0em;
  padding: 1em;
  background-color: #050567;
}

header a {
  padding: .5em .5em .5em 1em;
  height: 3em;
  text-decoration: none;
  border: 1px solid transparent;
}

header p {
  font-variant: small-caps;
  font-size: 1em;
}

header span {
  font-weight: bold;
}

.akzentfarbe1 {
  color: white; 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}

.akzentfarbe2 {
  color: white; 
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
}





/* ====================================================  CONTENT  ==================================================== */






* {
   box-sizing: border-box;
}

img {
  max-width: 100%;
}

.details-wrapper {
  width: 75vw;
  margin: 0 auto;
  background-color: #BFBFBF;
  /* box-shadow:0 -1px 1px 5px #BFBFBF;*/
}
details {
  padding: .2rem;
  font: 1rem/1.2 sans-serif;
}



zeiten {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bolder; 
  color: #000000;
}

preise {
  font-size: 16pt;  color: #050567;
}



sm {
  font-size: 10pt;  color: #000000;
}


picture {
    cursor: -moz-zoom-out; 
    cursor: -webkit-zoom-out; 
    cursor: zoom-out;
}



a {
  color: currentColor;
  font-weight: bold;
}
a:hover, a:focus {
  color: #050567;
}

a:focus,
a:hover {
  //background-color: #050567;
}

a.more {
  float: right;
}
a.more::before {
  margin-right: .5em;
}
a.more:hover, a.more:focus {
  color: #050567;
}
a.more:hover::before, a.more:focus::before {
  color: white;
}

h2.img {
  padding-left: 2.5em;
  
}


img, a img {
  border: 0 none;
}

article > h2 {
  clear: both;
}
article > h2 + p > img {
	width: 33%;
  float: left;
  margin: .15em 1.5em 1.5em 0;
}
article > h2:nth-of-type(odd) + p > img {
  float: right;
  margin: .15em 0 1.5em 1.5em;
}


dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1em 2em;
  margin-bottom: 3em;
}
dl > * {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dt::after {
  content: ":";
}

.news {
  background: no-repeat top .0em right .1em #FFFFFF;
  border: 0.0em solid #050567;
  //border-bottom: 0.1em solid #050567;
  /* Fenster Rahmen */
  padding: 0 1em 1em;
}

weiss {color: #ffffff; }
a.weiss:link {color: #ffffff; }
a.weiss:visited {color: #ffffff; }
a.weiss:hover {color: #ffffff; }
a.weiss:focus {color: #ffffff; }
a.weiss:active {color: #ffffff; }   


aside ul,
.news ul {
  margin: 1em 0;
  padding: 0;
  color: #000000;
  list-style-position: inside;
}
aside li,
.news li {
  font-size: 11pt;
  padding: .1em 0;
}
.news li span {
  font: Times New Roman, Times, serif;
  color: #050567;
}
aside ul {
  font: Times New Roman, Times, serif;
  color: #050567;
}

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


/* Extra small screen / smartphone / 280px to 479px */

@media (max-width: 479px) {

.mobile {display: block !important;}

.no-mobile {display: none !important;}
/* Global Styles - Teil 1 */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
   
}
nav ul li {
    position: relative;
}

/* Global Styles - Teil 2 */
nav ul li:hover {
    background-color: #050567;
    
    
}

nav a:hover,
nav a:focus {
  background-color: #000000;
  color: #ffffff;
}

/* Global Styles - Teil 3 */
nav ul a {
    font-size: 10pt;
    color: #ffffff;
    text-decoration: none;
    padding-left: 5px;
    display: block;
    padding: 10px 5px;
    padding-left: 5px;
}

/* Global Styles - Teil 4 */
nav ul a:after {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: 18px;
}

/* Main-Wrapper - Teil 1 */
nav {
    position: fixed;
    width: 160px; /* Diese Breite kannst du ändern */
    left: -160px; /* Vergiss nicht diesen Wert anzupassen, wenn du die Breite änderst! */
    top: 18px;
    bottom: 0;
    background-color: #050567;
    padding: 10px 0;
    transition: left 1s ease-in 0.5s; /* Das ist der Verlauf zwischen left: -150px und left: 0 (Im Code-Block "Main-Wrapper - Teil 3" erfährst du mehr dazu) */
}

/* Main-Wrapper - Teil 2 */
nav:after {
    content: "" url('img/menu.png');
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    color: #ffffff;
    position: absolute;
    left: 100%;
    top: 15px;
    padding: 15px;
    /* background-color: #050567;*/
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

/* Main-Wrapper - Teil 3 */
nav:hover {
    left: 0;
    transition: left 1s ease-in 0s;
}
nav:hover:after {
    content: "" url('img/menu.png');
}


/* Main-Wrapper - Teil 4 */
/* First-Level Navigation */
nav > ul {
    margin-top: 50px;
}




/* Multi-Level Navigation - Teil 1 */
nav ul li > ul {
    position: absolute;
    background-color: rgba( 0, 0, 0, .9 );
    width: 100%;
    top: 1999px;
    left: 100%;
    transition: top .5s;
}
/* Multi-Level Navigation - Teil 2 */
nav ul li > ul li {
    min-width: 120px;
}

/* Multi-Level Navigation - Teil 3 */
nav ul li:hover > ul,
nav ul li > ul:hover {
    top: 0%;
}    
  

}

u1 {
  
  font-size: 10pt;
  font-weight: bold;
  font: Times New Roman, Times, serif;
  
}

.info {
  background: no-repeat top .0em right .1em #FFFFFF;
  //border: 0.1em solid #050567;
  border-bottom: 0.1em solid #050567;
  /* Fenster Rahmen */
  padding: 0 1em 1em;
}


h1 {
  font-size: 1.2em;
  color: #050567;
  font: Times New Roman, Times, serif;
}

h2 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h3 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h4 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h5 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h6 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}







u_schrift {
  font-size: 0.9em;
  color: #000000;
  font-weight: bolder;
  
}

big_schrift_blau {
font-size: 0.9em;  
color: #050567;
font-weight: bolder;
}


big_schrift {
font-size: 0.8em;  color: #000000;
font-weight: bolder;
}


/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 15em) {
  header {
   background: #050567;
   //background: #050567 url('img/banner_500_250.jpg');
   background-repeat: no-repeat;
   background-size: auto;
   //height: 12.5em;
  }
}




/* ====================================================  NAV tablet+phone ANSICHT ==================================================== */



/* Smaller screen / tablet+phone / 480px to 759px */

@media (max-width: 719px) {

.mobile {display: block !important;}

.no-mobile {display: none !important;}

/* Global Styles - Teil 1 */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
   
}
nav ul li {
    position: relative;
}

/* Global Styles - Teil 2 */
nav ul li:hover {
    background-color: #050567;
    
    
}

nav a:hover,
nav a:focus {
  background-color: #000000;
  color: #ffffff;
}

/* Global Styles - Teil 3 */
nav ul a {
    font-size: 10pt;
    color: #ffffff;
    text-decoration: none;
    padding-left: 5px;
    display: block;
    padding: 10px 5px;
    padding-left: 5px;
}

/* Global Styles - Teil 4 */
nav ul a:after {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
}

/* Main-Wrapper - Teil 1 */
nav {
    position: fixed;
    width: 160px; /* Diese Breite kannst du ändern */
    left: -160px; /* Vergiss nicht diesen Wert anzupassen, wenn du die Breite änderst! */
    top: 0;
    bottom: 0;
    background-color: #050567;
    padding: 10px 0;
    transition: left 1s ease-in 0.5s; /* Das ist der Verlauf zwischen left: -150px und left: 0 (Im Code-Block "Main-Wrapper - Teil 3" erfährst du mehr dazu) */
}

/* Main-Wrapper - Teil 2 */
nav:after {
    content: "" url('img/menu.png');
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    color: #ffffff;
    position: absolute;
    left: 100%;
    top: 0;
    padding: 15px;
    /* background-color: #050567;*/
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

/* Main-Wrapper - Teil 3 */
nav:hover {
    left: 0;
    transition: left 1s ease-in 0s;
}
nav:hover:after {
    content: "" url('img/menu.png');
}


/* Main-Wrapper - Teil 4 */
/* First-Level Navigation */
nav > ul {
    margin-top: 50px;
}




/* Multi-Level Navigation - Teil 1 */
nav ul li > ul {
    position: absolute;
    background-color: rgba( 0, 0, 0, .9 );
    width: 100%;
    top: 1999px;
    left: 100%;
    transition: top .5s;
}
/* Multi-Level Navigation - Teil 2 */
nav ul li > ul li {
    min-width: 120px;
}

/* Multi-Level Navigation - Teil 3 */
nav ul li:hover > ul,
nav ul li > ul:hover {
    top: 10%;
}    

}

u1 {
  
  font-size: 10pt;
  font-weight: bold;
  font: Times New Roman, Times, serif;
  
}



h1 {
  font-size: 1.2em;
  color: #050567;
  font: Times New Roman, Times, serif;
}

h2 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h3 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h4 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h5 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h6 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}



u_schrift {
  font-size: 1.0em;
  color: #000000;
  font-weight: bolder;
  
}

big_schrift_blau {
font-size: 1.0em;  
color: #050567;
font-weight: bolder;
}


big_schrift {
font-size: 0.8em;  color: #000000;
font-weight: bolder;
}


/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 30em) {
  header {
   background: #050567;
   //background: #050567 url('img/banner_751_250.jpg');
   background-repeat: no-repeat;
   background-size: auto;
   //height: 15.5em;
  }
}

footer {
        text-align: left;
        font-size: 0.9em; color: #FFFFFF;
	background-color: #050567;
	border: 1px solid #FFFFFF;
        flex: 0 0 100%;
}
/* ====================================================  NAV PC ANSICHT ==================================================== */




/* Desktopscreen 992px to ... */

@media screen and (min-width: 720px){


nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

nav li {
	margin: 0.5em;
	padding: 0;
	font-size: 1.5rem;
	flex: 1 1 0%;
}

@media (min-width: 45em) {
	nav > ul {
		flex-direction: row;
		height: 3em;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}
}

nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: thin solid #050567;
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: #FFFFFF;
	background-color: #050567;
	transition: all .25s ease-in;
}

nav li[aria-current] a {
	background-color: #050567;
	color: #FFFFFF;
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: black;
	background-color: #FFFFFF;
}
/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 45em) {
  header {
   background: #050567 url('img/banner_1200_250.jpg');
   background-repeat: no-repeat;
   background-size: auto;
   height: 15.5em;
  }
  
big_schrift_blau {
font-size: 3.0em;  
color: #050567;
font-weight: bolder;
}


  
footer {
        text-align: left;
        font-size: 1em; color: #FFFFFF;
	background-color: #050567;
	border: 1px solid #BFBFBF;
        flex: 0 0 100%;
}
  
/* --------------------------------NAV ENDE---------------------------------------------------------------------- */



u1 {
  
  font-size: 10pt;
  font-weight: bold;
  font: Times New Roman, Times, serif;
  
}

.info {
  background: no-repeat top .0em right .1em #F2F2F2;
  border: 0.1em solid #050567;
  //border-bottom: 0.1em solid #050567;
  /* Fenster Rahmen */
  padding: 0 1em 1em;
}


h1 {
  font-size: 2.0em;
  color: #050567;
  font: Times New Roman, Times, serif;
}

h2 {
  font-size: 1.8em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h3 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h4 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h5 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}

h6 {
  font-size: 1.0em;
  color: #000000;
  font: Times New Roman, Times, serif;
}




u_schrift {
  font-size: 1.2em;
  color: #000000;
  font-weight: bolder;
  
}

big_schrift_blau {
font-size: 1.2em;
color: #050567;
font-weight: bolder;
}


big_schrift {
font-size: 1em;  color: #000000;
font-weight: bolder;
}


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

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

  /* Main wird zum Flex-Container */
  main {
    display: flex;
    flex-flow: row wrap;
  }

  main > * {
    flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
  }

  section {
    flex: 1 48%;  /* Diese Elemente erhalten eine halbe Breite */
    margin: 1%;
  }
}

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

  article {
    flex: 0 0 100%;
    margin: 1%;
  }

/*   article p, */
  article li,
  article blockquote {
    max-width: 40em;
  }

  aside p {
    margin-bottom: 3em;
  }
  aside p:last-child {
    margin-bottom: 1.2em;
  }
}