@font-face { font-family: 'Open Sans'; src: url(../fonts/OpenSans-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Open Sans'; src: url(../fonts/OpenSans-Bold.ttf) format('truetype'); font-weight: bold; }
@font-face { font-family: 'Open Sans'; src: url(../fonts/OpenSans-Italic.ttf) format('truetype'); font-style: italic; }


/* noscript-header */
#nos_header {
   position: relative; top: 0px; z-index: 999;
   width: 100%;
   min-height: 24px;
   font-size: 0.9em;
   color: red;
   background-color: #FFCCCC;
}
body {
   height: 100%;
   width: 100%;
   overflow-y: scroll; /* vertikalen Scrollbalken erzwingen */
   color: #003366; /* Schriftfarbe generell: dunkelblau #003366 */
   font-family: 'Open Sans', sans-serif;
   font-size: 17px; /* Schriftgröße generell für max-width: 1024px, alle anderen größen sind hiervon abhängig (em) */
   background: #F5F5F5 url(../images/bg_logo.png) no-repeat;
   background-position: bottom right; background-attachment: fixed;
}
#header_big {
   position: absolute; top: 40px;
   width: 100%;
   height: 180px;
   background-color: #003366;   
}
#container {
   position: relative; top: 40px;  /* top= <nav> height */
   width: 1024px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   background-color: #F5F5F5;
}
#header {
   position: relative; top: 0px; z-index: 50;
   height: 180px;
   background-color: #003366;
   overflow: hidden; /* wichtig für safari ipad! */
}
#header-name {
   position: relative; top: 30px; left: 30px; z-index: 51;
   height: 50px;
   background: url(../images/header_name.svg) no-repeat;
   background: url(../images/header_name.png) no-repeat\9;  /* für IE7 und IE8 "\9" */
   background-size: auto 50px;
   -moz-background-size: auto 50px;
   -webkit-background-size: auto 50px;
   -o-background-size: auto 50px;
}
#logo {
   position: absolute; top: 20px; right: 30px; z-index: 53;
   width: 150px;
   height: 150px;
   background: url(../images/logo.svg) no-repeat;
   background: url(../images/logo_150.png) no-repeat\9;  /* für IE7 und IE8 "\9" */
   background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   -o-background-size: cover;
}
#banner {
   position: absolute; bottom: 10px; left: 30px; z-index: 52;
}
.banner_text_0{
   position: absolute; bottom: 5px; left: 0px;
   font-size: 1.5em;
   font-weight: bold;
   color: #F5F5F5;
   /* keine automatische Silbentrennung */
   -ms-hyphens: none;
   -webkit-hyphens: none;
   hyphens: none;
}

/* nav-row   breadcrumbs, suche */
#nav_row {
   position: relative; top: 0px; left: 0px;
   width: 100%;
   height: 35px;
   text-align: left;
   font-style: italic;
   font-size: 0.9em;
   color: #999; /* grau */
}
#breadcrumbs, #breadcrumbs a {
   color: #999;
}
#breadcrumbs a:hover {
   text-decoration: underline;
}
#suche {
   position: absolute; top: 0px; right: 0px;
   height: 25px;
} 

/* Suche Eingabefeld formatieren */
.input_suche {
   width: 100px;
   height: 20px;
   vertical-align: top;
   background-color: #fff;
}
.input_suche_onfocus {
   width: 100px;
   height: 20px;
   vertical-align: top;
   background-color: #ffdab3;
   font-style: normal;
   font-size: 1.0em;
   color: #003366;
}
/* Ende nav-row, breadcrumbs, suche */


#inhalt {
   position: relative;
   padding: 10px 30px 0 30px;
   width: auto;
   height: auto;
}
.archiv {
   background-color: #EBEBEB;
   margin-top: 20px;
}
#inhalt p {
   line-height: 1.4;
   margin: 0 0 0.3em 0;
}
.clear {
   clear: both;
}


/* für alle internen Links, Reihenfolge :link, :visited, :hover, :focus, :active */
a {font-style: italic; font-weight: normal;}
a:link, a:visited { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; color: #003399; }
a:focus, a:active  { text-decoration: none; color: #666666; }

/* für externe Links */
a.extern  {
/*   font-style: italic; */
   font-weight: normal;
   padding: 0 1.0em 0 0;
   background: url(../images/external_link.png) no-repeat 100% 0px;   
}
a.extern:link, a.extern:visited { text-decoration: none; color: #666699; }
a.extern:hover { text-decoration: underline; color: #003399; }
a.extern:focus, a.extern:active  { text-decoration: none; color: #666666; }

/* für interne Links */
a.intern  {
/*   font-style: italic; */
   font-weight: normal;
   padding: 0 1.0em 0 0;
   background: url(../images/internal_link.png) no-repeat 100% 0px;   
}
a.intern:link, a.extern:visited { text-decoration: none; color: #666699; }
a.intern:hover { text-decoration: underline; color: #003399; }
a.intern:focus, a.extern:active  { text-decoration: none; color: #666666; }


/* Überschriften */
h1, h2, h3 {font-weight: bold;}
h1 {
   font-size: 1.3em;
   margin: 0 0 0.4em 0;
}
h2 {
   font-size: 1.2em;
   margin: 0 0 0.2em 0;
}
h3 {
   font-size: 1.1em;
   font-style: italic;
   margin: 0 0 0.2em 0;
}
h4 {
   font-size: 1.0em;
   margin: 0 0 0.2em 0;
}

/* linie horizontal */
hr {
   border: none 0;
   margin: 0.65em 0 0.65em 0;
   border-top: 1px solid #6E7EA2;
   clear: both;
}


/* boxen */
.box {
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   padding: 20px 23px 20px 20px;
   margin-bottom: 30px;
   background: #fff;
}
.top {
   /* box-top für Seitenüberschrift */
   background-color: #FFF;
}
.box-open {
   background-color: #FFF;
}
.box-details {
   display: none;
   clear: both;
}
.box-hidden {
   display: none;
   clear: both;
}
.aktuell {
   /* box aktuell z.B Weihnacht*/
   color: #000033;
   background: #336699;
}
.pic-aktuell {
   float: right;
   width: 220px;
   height: auto;
   position: relative;
   right: -10px;
}

/* Rahmen für box */
.border {
   border: 1px solid #D3D3D3;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   -khtml-box-shadow: none;
}

/* div 2-spaltig */
.box-2-spalten {
   position: relative;
   overflow: hidden;
   margin: 0 0 20px 0;
   width: 100%;
}
.border-box {
   padding: 5px;
   border: 1px solid #D3D3D3;
}
.box-2-spalten .spalte1 {
   position: relative;
   overflow: hidden;
   float: left;
   width: 47%;
   left: 0%;
}
.box-2-spalten .spalte2 {
   position: relative;
   overflow: hidden;
   float: left;
   width: 47%;
   left: 2%;
}
/* box für Auflistungen*/
.box ul {
   list-style-type: square;
   padding-left: 5px;
}
.box li {
   margin: 0.3em 0 0.6em 1em;
}


/* trigger */
.trigger, .trigger a, .trigger_all, .trigger_all a {
   position: absolute; bottom: 0px; right: 10px;
   display: none;    /* wird erst mit js wieder sichtbar */
   width: 0px;
   height: 0px;
   cursor: pointer;
   caret-color: transparent;
}
   /* Pfeil nach unten */
.trigger, .trigger_all {
   border-top: 15px solid #333366;
   border-bottom: 10px solid transparent;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
}
.trigger a:hover, .trigger_all a:hover {
}
   /* Pfeil nach oben */
.close, .closed {
   margin-bottom: 10px;
   border-top: 10px solid transparent;
   border-bottom: 15px solid #333366;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
}
.close a:hover, .closed a:hover {
}


/* thumbs */
.thumb-left, .thumb-right {
   background-color: #FFF;
   width: 127px;
   border: 1px solid #D3D3D3;
   margin: 0 10px 10px 0;
}
.thumb-left {
   float: left;
}
.thumb-right {
   float: right;
}
.thumb-box-top-left, .thumb-box-top-right {
   background-color: #FFF;
   width: 150px;
   border: 1px solid #D3D3D3;
}
.thumb-box-top-left {
   float: left;
   margin: 0 10px 10px 0;
}   
.thumb-box-top-right {
   float: right;
   margin: 0 0 10px 10px;
}
.thumb-small {
   width: 75px;   
}
.portrait {
   width: 220px;
   height: 280px;
   float: right;
   margin: 10px 10px 10px 20px;
   background-color: #FFF;
}
.portrait-mitarbeiter {
   width: 100px;
   height: 120px;
   margin: 0 10px 10px 0;
   padding: 0px;
   float: left;
   background-color: #FFF;
}
.qr-code {
   position: absolute; top: 50px; right: 20px;
   float: right;
   width: 200px;
}

.desktop {display: block;}
.mobile {display: none;}


/* Telefonnummer <href="tel" für Desktop-Geräte deaktivieren; aktivieren bei @media screen and (max-device-width: 480px) */
a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
   text-decoration: none;
   font-style: normal;
   pointer-events: none;
}

#footer {
   position: relative;
   border-top: 3px solid #003366;
   clear: both;
   font-size: 0.95em;   
}
#footer-left {
   position: absolute; top: 10px; left: 0px;
   text-align: left;
}
/* #footer-middle {
   position: absolute; top: 10px; left: 115px;
   text-align: center;
} */
#footer-right {
   position: absolute; top: 10px; right: 0px;
   text-align: right;
}
#button-top {
   position: fixed; bottom: 0px; z-index: 101;
   width: 100px;
   height: 100px;
   margin-left: 1024px;  /* =width #container */
   background-color: grey;
   cursor: pointer;
   display: none;    /* wird erst mit js wieder sichtbar */
}








/* @media max-device-width: 1024px *******************************************/
@media screen and (max-width: 1024px) {
body {
   background-image: none;
}
#container {
   width: 100%;
}
#inhalt p {
   /* automatische Silbentrennung für normale Absaetze*/
   hyphens: auto;
   hyphenate-limit-chars: 7 3 2; /* min. Anzahl Buchstaben im Wort, bei der getrennt wird */
   hyphenate-limit-lines: 2; /* max. Silbentrennungen in Folge */
   -ms-hyphens: auto;
   -ms-hyphenate-limit-chars: 7 3 2;
   -ms-hyphenate-limit-lines: 2;
   -moz-hyphens: auto;
   -moz-hyphenate-limit-chars: 7 3 2;
   -moz-hyphenate-limit-lines: 2;
   -webkit-hyphens: auto;
   -webkit-hyphenate-limit-chars: 7 3 2;
   -webkit-hyphenate-limit-lines: 2;
}
}


/* @media max-device-width: 767px  *******************************************/
@media screen and (max-width: 767px) {
body {font-size: 17px;}
#header_big {
   display: none;
}
#header {
   height: 130px;
}
#header-name {
   height: 45px;
   background-size: auto 45px;
   -moz-background-size: auto 45px;
   -webkit-background-size: auto 45px;
   -o-background-size: auto 45px;
}
#banner {
   position: absolute; bottom: 0px; left: 10px;
}
#inhalt {
   padding: 10px 5px 0 5px;
}
#logo {
   position: absolute; top: 5px; right: 5px;
   width: 120px;
   height: 120px;
}
#header-name {
   position: relative; top: 10px; left: 5px;
}
.box {
    padding: 15px 10px 15px 10px;
}
.thumb-left, .thumb-right {
   width: 100px;
}
.thumb-box-top-left, .thumb-box-top-right {
   width: 100px;
}
/* div 2-spaltig */
.box-2-spalten{
   width: 100%;
}
.box-2-spalten .spalte1{
   width: 100%;
   left: 0%;
}
.box-2-spalten .spalte2{
   width: 100%;
   left: 0%;
}
.pic-aktuell {
  float: right;
  width: 180px;
  height: auto;
  position: relative;
  right: -10px;
}
.desktop {display: none;}
.mobile {display: block;}
.qr-code {display: none;}
}

/* @media max-device-width: 600px  *******************************************/
@media screen and (max-width: 600px) {
.portrait {
   width: 110px;
   height: 140px;
   padding: 0;
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
   border: none;
}
.mitarbeiter {
   width: 29%;
   padding: 5px;
   float: left;
   margin: 0;
   border: none;
}
.portrait-mitarbeiter {
   border: none;
}
.pic-aktuell {
  float: right;
  width: 130px;
  height: auto;
  position: relative;
  right: -10px;
}
.thumb-maps {
   position: absolute; bottom: 25px; right: 15px;
   width: 100px;
}
#footer-left {
   position: relative; top: 10px; left: 10px;
}
#footer-right {
   position: relative; top: 30px; left: 10px;
   text-align: left;
}
}


/* @media max-device-width: 480px  *******************************************/
@media screen and (max-width: 480px) {
#inhalt {
   padding: 10px 0 0 0;
}
.banner_text_0{
   font-size: 1.4em;
}
#logo, #breadcrumbs, #footer-middle {
   display: none;
}
.thumb-left, .thumb-right {
   width: 99px;
}
.thumb-box-top-left, .thumb-box-top-right {
   width: 99px;
}
}

/* Telefonnummer <href="tel" für Smartphone (max-device-width) aktivieren */
@media screen and (max-device-width: 480px) {
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
   text-decoration: underline;
   font-style: italic;
   pointer-events: auto;
}
}


/* @media max-device-width: 400px  *******************************************/
@media screen and (max-width: 400px) {
#header-name {
   position: relative; top: 10px; left: 5px;
   width: 310px;
   height: 46px;
   background: url(../images/header_name2.svg) no-repeat;
   background-size: 310px 46px;
   -moz-background-size: 310px 46px;
   -webkit-background-size: 310px 46px;
   -o-background-size: 310px 46px;
}
.thumb-left, .thumb-right {
   width: 82px;
}
.thumb-box-top-left, .thumb-box-top-right {
   width: 82px;
}

.pic-aktuell {
  float: right;
  width: 110px;
  height: auto;
  position: relative;
  right: -10px;
}
}


/* @media prefers-color-scheme **********************************************
@media (prefers-color-scheme: dark)  {
body{
   color: blue;
   background: steelblue;
}

#container {
   background-color: red;
}

.box {
   background: yellow;
}
}
*********************/