/************************************************************************
style-index, Verwendung auf alle Seiten
Stand 13.12.2023
Fabian Roelker Medien und Technik - info (at) roelkermedien (dot) de
************************************************************************/


/*********************************
  Allgemein ANFANG 
*********************************/
body {
  text-align: center;                                       /* Zentrierung IE */
  background-color: rgb(217,235,224);                       /* Hintergrundfarbe */  
}

p,
li {
  font-size: 0.9em;
  color: rgb(185,007,056);
  font-family: Helvetica, Arial, Sans-Serif;
}

h1 {
  font-size: 1.5em;
  color: rgb(185,007,056);
  font-family: Helvetica, Arial, Sans-Serif;
  margin-bottom: 2em;
}

h2  {
  font-size: 1.2em;
  color: rgb(185,007,056);
  margin-top: 2em;
  color: rgb (185,007,056);
  font-family: Helvetica, Arial, Sans-Serif;
}

h3  {
  font-size: 1.0em;
  color: rgb(185,007,056);
  margin-top: 2em;
  color: rgb (185,007,056);
  font-family: Helvetica, Arial, Sans-Serif;
}

h4  {
  font-size: 0.8em;
  color: rgb(185,007,056);
  margin-top: 2em;
  color: rgb (185,007,056);
  font-family: Helvetica, Arial, Sans-Serif;
}

a:link { 
  color: rgb(000,118,050);
  text-decoration:none;
}

a:hover {
  color: rgb(000,118,050);
  text-decoration:underline;
}

a:visited {
  color: rgb(000,118,050);
  text-decoration:none;
}

a:active {
  color: rgb(000,118,050);
  text-decoration:none;
}

#mainbox {
  zoom: 1;                                                  /* IE Problemloesung Seite zentriert */
  position: relative; 
  width: 80%;                                               /* Breite der Seite im Verhaeltniss zum Browserfenster */
  min-width: 300px;                                         /* Mindestbreite der Seite */
  max-width: 1200px;                                        /* Maximalbreite der Seite */
  min-height: 50em;                                         /* Mindesthoehe der Seite */
  text-align:left;                                          /* Inhalt wieder links wegen Zentrierung IE */
  margin: 0 auto;                                           /* Zentrierung mitte */ 
  padding: 9em 0em 0em 0em;                                 /* Abstand nach oben - Wert muss groesser als Titelleiste sein */
}
/*********************************
  Allgemein Ende 
*********************************/

#headerbild {
  background: url(../img/header.jpg) no-repeat;          

  float: left;       
  width: 100%;                                       
  min-height: 500px;
  object-fit: contain;
  margin: 0 0 3em 0;
} 




/*********************************
  Titelleiste feststehend ANFANG 
*********************************/
#navigatorleiste_background {
  position:fixed;                                           /* Fixierung oben */
  background-color: #FFFFFF;                                /* Farbe Navi-Leiste */
  width: 100%;                                              /* Breite Navi-Leiste */
  height: 5.8em;                                            /* Hoehe Navi-Leiste */
  text-align:left;                                          /* Inhalt wieder links wegen Zentrierung IE */
  z-index: 50;                                              /* Leiste im Vordergrund */
}

#navigatorleiste_content  {
  position:fixed;
  top:0px;
  width: 80%;                                               /* Breite Navi-Leiste Inhalt */
  min-width: 300px;                                         /* Mindestbreite Navi-Leiste Inhalt */
  max-width: 1200px;                                        /* Maximalbreite Navi-Leiste Inhalt */
  text-align:left;                                          /* Inhalt wieder links wegen Zentrierung IE */
  margin: 0 auto;                                           /* Zentrierung mitte */ 
  z-index: 60;                                              /* Content vor Leiste */
}

#navigatorleiste_logo {
  background: url(../img/head_logo.jpg) no-repeat;          /* Link auf Logo */ 
  background-size: contain;
  float: left;                                              /* Logo links */
  height: 3.6em;                                            /* Logo Hoehe - Navi_mobile-Schalter muss angepasst werden*/
  width: 14em;                                              /* Logo Breite - muss mit Hoehe passen*/
  margin: 1.2em 0em 1.2em 0em;                              /* Logo Schutzraum oben und unten - Navi_mobile-Schalter muss angepasst werden*/
  text-indent: -1000px;                                     /* Logo Linktext ausblenden */
} 

/******* Navi Desktop *******/
nav.navi_desktop {                                                      
  background-color: rgb(255,255,255);                       /* Hintergrundfarbe */
  position: relative;
  height: 5.8em;
  float: right;
} 

ul.navi_desktop li a:link {                                 /* Hintergrundfarbe */
  display: block;
  height: 1em;
	padding: 39px 20px 7px 20px;
	font-size: 15px;                                          /* Schriftgroesse */
  border-right-width: 1px;                                  /* Linie als Trennung */
  border-right-style: solid;                                /* Linie als Trennung - Linientyp */
  border-right-color: rgb(000,118,050);                     /* Linie als Trennung - Linienfarbe */
}

ul.navi_desktop li a:hover {                                        
	background-color: rgb(217,235,224);                       /* Farbe nach hover */
  text-decoration:none;                                     /* keine Linie unter Link bei hover */
}  
  
li.navi_desktop {
  display: inline-block;                                    /* horizontal */
}

nav.navi_desktop a:link {
  color: rgb(000,118,050);                                  /* Schriftfarbe Link */
}

nav.navi_desktop a:visited {
  color: rgb(000,118,050);                                  /* Schriftfarbe besuchter Link */
}

nav.navi_desktop a:active {
  color: rgb(000,118,050);                                  /* Schriftfarbe aktiver Link */
}

.navis_aktuell  {
  color: rgb(185,007,056) !important;
  z-index: 20000;
}

#navis_aktuell    {
  color: rgb(185,007,056) !important;
  z-index: 20000;
}


/******* Navi Mobil *******/

#navi_mobile_schalter  {
  display: none;                                            /* Schalter normalerweise ausgeblendet - Eingeblendet mit media query*/
  float: right;                                             /* Schalter rechts*/
  background: url(../img/head_nav_klein.jpg) no-repeat;     /* Schalter Bild*/
  background-size: contain;
  height: 2.2em;                                            /* Schalter Bildhoehe - wie Logohoehe - Breite muss auch angepasst werden*/
  width: 2.2em;                                             /* Schalter Bildbreite*/
  margin: 1.8em 0em 1.8em 0em;                              /* Freiraum nach oben und unten - wie Schutzraum Logo*/
  text-indent: -1000px;                                     /* Linktext ausgeblendet*/
}

#toggle {
  display: none;                                            /* Menue - normalerweise ausgeblendet, per JS mit Knopf aktivierbar*/
}

nav.navi_mobile {
  background-color: rgb(255,255,255);                       /* Hintergrundfarbe*/
} 

nav.navi_mobile a:link {
  color: rgb(000,118,050);                                  /* Farbe Link*/
}

nav.navi_mobile a:visited {
  color: rgb(000,118,050);                                  /* Farbe besuchter Link*/
}

nav.navi_mobile a:active {                                  /* Farbe aktiver Link*/
  color: rgb(000,118,050);
}

ul.navi_mobile {
  padding: 0px 0px;
  margin: 5.9em 0em 0em 0em ;                               /* Men� - Entfernung zu oben */
}

li.navi_mobile  {
  display: inline;
}

li.navi_mobile a:link {
  display: block;
  height: 1em;
  padding: 15px 0px;                                        /* Abstand Men�punkte untereinander */
  margin: 0 100% 0 0;                                       /* Schriftgr��e*/
  font-size: 12px;
  background-color: rgb(255,255,255);
  width: 100%;
  border-bottom-width: 1px;                                 /* Linie als Trennung - Linienst�rke */
  border-bottom-style: solid;                               /* Linie als Trennung - Linientyp */
  border-bottom-color: rgb(200,200,200);                    /* Linie als Trennung - Linienfarbe */
}

li.navi_mobile a:visited {
  border-bottom-width: 1px;                                 /* Linie als Trennung - Linienst�rke auch nach Besuch*/
  border-bottom-style: solid;                               /* Linie als Trennung - Linienst�rke auch nach Besuch */
  border-bottom-color: rgb(200,200,200);                    /* Linie als Trennung - Linienst�rke auch nach Besuch */
}


li.navi_mobile a:hover {
	background-color: rgb(217,235,224);                       /* Farbe nach hover */
  text-decoration:none;                                     /* keine Linie unter Link bei hover */
}  

span.navi_mobile {
  padding: 0em 0em 0em 10%; 
  vertical-align: center;                                   /* Text mittig */
}
/*********************************
  Titelleiste feststehend ENDE 
*********************************/


/*********************************
  Content mit MS ANFANG 
*********************************/
#content  {
  margin: 0 auto;                                           /* Zentrierung mitte */
}

#content-left {                                             /* Spalte 1 */
  width: 60%;    
  float: left;
  min-width: 10px;
  max-width: 780px;
  position: relative;
  margin: 0% 5% 0% 0%;
}

#content-right {    
  width: 35%;                                            /* Spalte 2 */
  float: left;
  min-width: 10px;
  max-width: 420px;
  position: relative;
  margin: 0% 0% 0% 0%;
}
/*********************************
  Content mit MS ENDE
*********************************/


/*********************************
  Responsive Design ANFANG 
*********************************/
@media only screen and (max-width:920px){                   /* Tablets, Netbooks, Desktop - halbe Breite */
      .navi_desktop {
      display: none;                                        /* Navi Desktop ausgeblendet */
      }
      
      #navi_mobile_schalter  {
      display: block;                                       /* Navi Mobile eingeblendet */
      }
}

@media only screen and (max-width:599px) {                  /* Smartphones */
      #navigatorleiste_logo {
        height: 1.8em;                                      /* Logo kleiner */
        width: 12em;                                         /* Logo kleiner */
        margin: 0.5em 0em 0.5em 0em;                        /* Logo Schutzraum kleiner */
      }
      
      ul.navi_mobile {
    		padding: 0px 0px;
        margin: 2.8em 0 0 0 ;                               /* Navi-Mobile Abstand von oben */
      } 
      
      #navigatorleiste_background {
        height: 2.8em;                                      /* Leiste Hintergrund kleiner */
      }
      
      #navi_mobile_schalter  {
        height: 1.8em;                                      /* Schalter Navi kleiner */
        width: 1.8em;                                       /* Schalter Navi kleiner */
        margin: 0.5em 0em 0.5em 0em;                        /* Freiraum oben und unten kleiner */
      }
        
      #mainbox  {
        padding: 3.5em 0em 0em 0em;                         /* Anfang vom Inhalt weiter oben */
      }
        
      #content  {
        padding: 0em 0em 1.5em 0em;
      }
      
      .fancybox-low-res {
        width: 100%;
        min-width: 10px;
        max-width: 599px;
        margin: 0.5% 0;                                             /* Abstand zwischen den Zeilen */
      }
      
      
      #content-left,
      #content-right,
      #content-center {
        width: 100%;                                            /* Breite alle Spalten */
      }
      
      #content-left {                                             /* Spalte 1 */
        max-width: 599px;
      }
      
      #content-center {                                           /* Spalte 2 */
        max-width: 599px;
        margin: 0% 0%;                                            /* Abstand zwischen den Spalten */
        padding: 0% 0%;
      }
      
      #content-right {                                            /* Spalte 2 */
        max-width: 599px;
      }
      
}
/*********************************
  Responsive Design ENDE
*********************************/