﻿/*Schriften*/ 
@import url('../fonts/opensans_regular_macroman/stylesheet.css');
@import url('../fonts/opensans_extrabold_macroman/stylesheet.css');
@import url('../fonts/opensans_italic_macroman/stylesheet.css');

@import url('../fonts/opensans_semibold_macroman/stylesheet.css');
@import url('../fonts/opensans_bold_macroman/stylesheet.css');


body {font-family: open_sansregular,Arial,sans-serif;font-size: 14px; }
p {-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;}
h1, h2, h3,h4,h5 { font-weight:normal !important; margin:0px; padding:0px;}
h2 { text-transform:uppercase; color:#e1001e;font-family: open_sansextrabold,Arial,sans-serif;font-size:22px; margin-bottom:7px;}
h3 { font-size:18px; margin:0px 0px 15px 0px ; line-height:120%;}
h4 { text-transform:uppercase; color:#e1001e;font-family: open_sansextrabold,Arial,sans-serif;font-size:22px; margin-bottom:5px;}
h5 { font-size:18px; margin:0px 0px 15px 0px ; line-height:120%;}

p { margin:5px 0px 10px 0px; font-size:14px;}
strong {font-weight:normal; font-family: open_sansextrabold,Arial,sans-serif;}
.rot { color:#e1001e !important;}
#Bereich1 a {border-bottom:1px dotted #666; font-family: open_sansregular,Arial,sans-serif;}
#Bereich1 a:hover { text-decoration:none;}

.abstandklein { height:5px;}
.abstandgross { height:20px;}
.abstandgross2 { height:40px;}
.container {margin-right: auto;margin-left: 10px;padding-left: 12.5px; padding-right: 12.5px;}
.container #inhalt { border:0px solid #f00;}

.container #Bereich2   { padding-left:15px!important;}
.container #Bereich1   { padding-right:20px!important;}

.container  #Bereich1 .publikationen .BildText { width:49%!important; float:left; margin-bottom:20px; }
.container  #Bereich1 .publikationen .BildText p { font-size:0.9em;}
.container  #Bereich1 .publikationen .BildText img { border:1px solid #ccc;}
.container  #Bereich1 .publikationen .BildText:nth-child(2n+2) { clear:both;}


/*Logo -------------------------------------------------------------------------*/
#logo { margin: 25px 0px 30px 0px;        }
#logo img { width:100%; }


/*Headerbild --------------------------------------------------------------------*/
#bildheader { margin-bottom: 5px;}
#bildheader .bild1  { overflow:hidden; }
#bildheader .bild2 {overflow:hidden; border-left:12px solid #fff;  padding-left:0px; }
#bildheader .bild1 img{ height:270px; float:left;width:auto !important;}


/*Welcome-Jingle Startseite ------------------------------------------------------*/
#welcome {position:absolute;left:25px; bottom:0px; color:#fff; width:90%;}
#welcome h2 {font-size:18px;color:#fff; font-family: open_sansextrabold,Arial,sans-serif; }


/*Rückblick-Kreis -----------------------------------------------------------------*/
#rueck {float: right; margin-top: 20px;}
#rueck .rueck{color:#111; float: left; margin: 18px 5px 0px 0px; font-family: open_sansextrabold,Arial,sans-serif; font-size: 24px; }
#rueck .kreis {float: left; width: 70px; height: 70px; border: 5px solid #e1001e; border-radius: 100px; overflow: hidden;}
#rueck img {width:61px;}
#rueck .jahr {color:#e1001e; float: left; margin: 18px 0px 0px 5px; font-family: open_sansextrabold,Arial,sans-serif; font-size: 24px;}


/*Breadcrump --------------------------------------------------------------------*/
#bredcrump { margin:0px 0px 20px 0px !important; padding:0px; clear:both; height:20px; font-size:12px;font-weight:normal!important;  }
#bredcrump span { float:left; padding-right:10px; margin:0px;font-family: open_sansregular,Arial,sans-serif !important;font-weight:normal!important;}
#bredcrump span a { color:#111 !important;}
#bredcrump span.aktiv a,#bredcrump h1.aktiv a { color:#E1001E !important;}
#bredcrump h1.crump  {  float:left;  font-size:12px!important; margin:2px 0px 20px 0px !important;  height:20px; line-height:100%; }
#bredcrump span a:before,#bredcrump h1 a:before { content:"\f0da\00a0";font-family:fontAwesome;}
#bredcrump br {display:none;}
    #bredcrump b { font-weight:normal;}


/*Navigation --------------------------------------------------------------------*/
#nav {font-family: open_sansextrabold,Arial,sans-serif;text-transform: uppercase;margin-bottom: 25px;}
#nav ul {margin-top: 0px;padding-top: 0px;       }
#nav ul li {padding: 0px 0px 15px 0px;line-height: 18px;margin: 0px;}
#nav ul li:last-child {padding: 0px 0px 2px 0px;}
#nav a { margin:0px; padding:0px; font-size: 18px; color:#111; }
#nav a:hover { background-color:transparent; color:#e1001e}
#nav ul li ul li a { font-size:14px;}
#navlinks {border-left: 10px solid #000;margin-left: -20px;padding-left: 11px;margin-top: 0px !important;}
#navlinks ul li {padding: 5px 0px 0px 0px !important;list-style:none;}
 
 
/*Footer ---------------------------------------------------------------------------*/
.container #navfooter  p {font-family: open_sansregular,Arial,sans-serif !important ;font-size:12px; line-height:130% !important; margin:0px 0px 8px 0px ;}
.container #navfooter a { font-family: open_sanssemibold,Arial,sans-serif !important ; font-size:12px; color:#111; text-transform:none !important; }
.container #navfooter a.aktiv {  color:#E1001E;  }
.container #navfooter h5   {  font-size:12px;line-height:100%; margin-bottom:10px !important;}
.container #navfooter h5  a { font-family: open_sansextrabold,Arial,sans-serif !important; }
#footer {margin-bottom: 100px; margin-top: 25px; padding-left: 10px;}

/*Grundinfo im Footer*/
#grundinfF { display:none;}

/*Linke Seite Infos*/
#linkeSeite .intro { font-size: 10px;margin-top: 7px;text-transform: uppercase;font-family: open_sansextrabold,Arial,sans-serif;margin-bottom: 5px;      }
#linkeSeite p { font-size: 12px !important;   }

/*facebook links und im Footer*/
.fb { margin-top:20px;}
.fb span {float:left; margin-top:17px !important; }
.fb a { color:#111; font-size:12px;}
.fb img {display: block; float:left; margin-right:10px;}


/*Kästen / Verteiler ------------------------------------------------------------  */
.breite13 { width:33.333%;  margin-bottom:30px; } 
.breite13 a { margin:0px; padding:0px; line-height:100%; display:block;border:none;   } 
.breite13 a:after {content:'';} 

.breite13 .kastenbild { overflow:hidden; height:170px; margin-bottom: 10px;   }
.breite13 img {width:100%; height:auto;  }
.breite13 h2 { font-size:18px; margin:0px 0px 5px 0px; font-family: open_sansextrabold,Arial,sans-serif;color:#E1001E }
.breite13 h3 { font-family: open_sansextrabold,Arial,sans-serif !important;font-size:18px;  margin:0px 0px 5px 0px ; color:#E1001E;text-transform:uppercase; line-height:110%; }
.breite13 p { font-family: open_sansregular,Arial,sans-serif;line-height:120%; margin:0px; }
.breite13 p.untertitel {margin-bottom:5px; font-family:open_sanssemibold;font-size:0.95em; line-height:100%; }

.breite13.bgcolor { }
.breite13.bgcolor .bg { padding:20px 15px 25px 20px;background-color:rgba(204, 204, 204, 0.50); }

.breite13.bgcolor .bg p,
.breite13.bgcolor .bg h2,
.breite13.bgcolor .bg h1{font-family: open_sansextrabold,Arial,sans-serif;padding:0px; line-height:135%; margin: 0px 0px 10px 0px; text-transform:none!important; font-size:18px; color:#e1001e; 
    
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

#Bereich2 .breite13    { width:100%;}
#Bereich2 .breite13 .kastenbild {
    overflow:   hidden;
    height: 120px;
    margin-bottom: 5px;
}

.breite13 .mehrbutton   {  margin-top:0px !important; float:right !important;  line-height:95%; border:none !important; padding-left:0px !important; }
.breite13 .mehrbutton a { font-family: open_sansextrabold,Arial,sans-serif !important; border:none !important; font-size:13px ;}
#Bereich1 .breite13 a.mehr:after {content:"\00a0\f0da";font-family:fontAwesome;color:#E1001E; }
#Bereich1 .breite13:nth-child(3n+1) {  clear:both;   }

/*Inhalte-------------------------------------------------------------------------------------*/
/*allgemein*/
#Bereich1 a  { border-bottom:1px dotted #111 ; color:#111;  position:relative; z-index:99; margin-right:5px;    font-family: open_sansextrabold,Arial,sans-serif;  }
#Bereich1 a:after {content:"\00a0\00a0\f0da";font-family:fontAwesome;color:#E1001E;}
.breite13 a { border:none!important;   } 

#Bereich1 a.mehr,#Bereich2 a.mehr { border-bottom:1px dotted #111 !important; color:#111;  position:relative; z-index:99; margin-right:5px; font-family: open_sansextrabold,Arial,sans-serif;  }
#Bereich1 .breite13 a:after,#Bereich1 .klapp a:after, #Bereich1 .klappinh a:after{ content:'';}

#Bereich1 a[href ^="mailto:"] { font-family:open_sansregular;}
#Bereich1 a[href ^="mailto:"]:after {content:'';}
#Bereich1 a[href ^="mailto:"]:before {content:'\f003\00a0\00a0';font-family:fontAwesome;color:#E1001E;  }
#Bereich1 a[name] {display:none;}

#Bereich1 .ohneLinkicon a:after{ content:'';}

#Bereich1 .kleinerKasten h2 { font-size:20px; color:#111 !important;margin-bottom:7px;}
#Bereich1 .buchbare { margin-bottom:30px;}
#Bereich1 .buchbare h4 { color:#111; font-size:18px;}
.googlemaps { margin-bottom:20px;}

/*Bilder*/
#Bereich1 .bildtextumf   .abbkasten   {   margin-bottom:10px; }
#Bereich1 .bildtextumf   .abbkasten img { width:100% ; margin-top:4px;   }
#Bereich1 .BildText .bild { margin-bottom:10px;margin-left:0px;padding-left:0px;}
#Bereich1 .BildText .bild img { width:100% ; margin-top:4px;   }
.bu p { font-size:11px;}
.bildstrecke { margin-top:10px; margin-bottom:3px;}
.bildstrecke .bu  { margin-top:7px;}
.bildautowidth { margin-top:15px; margin-bottom:15px;}
.bildautowidth .bu p { font-size:11px;}
#Bereich1 .kasten.Bild img { width:100%;}

.Bild {margin-bottom:20px;margin-top:10px;}

.buUnten { display:table-row !important; border:0px solid #f00; }
.buUnten .bildbuU {  display:table-cell !important;     }
#Bereich1 .bildautowidth .buUnten .bildbuU  img { width:100% !important;}
.buUnten .bildbuU.w50p {padding-left:12px; width:50%;}
.buUnten .bu { padding-left:1.5%; padding-bottom:3px;  margin:0px 0px 0px 0px ; display:table-cell !important; vertical-align:bottom !important;border:0px solid #00f; }
.buUnten .bu p {font-size:10px !important;  line-height:15px;    margin-bottom:-7px; margin-top:5px; margin-left:10px;}
.buUnten .bu{     width: 30% !important;    line-height:15px;    }

/*termine*/
.veranstaltung { border-top:1px solid #ccc; padding-top:10px;}
.veranstaltung .dtKurz1 {  font-size:22px;font-family: open_sansextrabold,Arial,sans-serif !important;margin-top:3px; float:left; line-height:100%;}
.veranstaltung .dtKurz2 { font-size:16px;font-family: open_sansextrabold,Arial,sans-serif !important; margin:0px; line-height:100%;}
.veranstaltung .dtKurzImg {   margin-top:5px; float:left; line-height:100%;}
.termineKurz p { margin:0px;}
.termineKurz hr { margin:3px 0px 10px 0px ;}
  

body { border-left:0px solid yellow;}
      
.royalSlider,.rsImg   {width: 100% !important;height:auto !important; }
.rsDefault .rsGCaption {padding: 0px 0px 0px 0px; width: 100%;position: static; text-align:left !important;left: auto;bottom: auto;  text-align: center;background-color:#fff;}
.rsGCaption span {clear: both;color: #000;margin-top:0px !important;  float:left; text-align:left !important; }
.rsGCaption p  { padding-top:0px;font-size:11px;}
figure { margin:0px; padding: 0px 50px 0px 0px; }
.royalSlider #pfeile {margin-bottom:-27px;position:relative; width:100%; z-index:9999;}
.royalSlider #pfeile .rsRechts {float:right; cursor:pointer;}
.royalSlider #pfeile .rsLinks {float:right;margin-right:15px;cursor:pointer;}
 
@media (max-width:1199px) {
    body { border-left:0px solid   purple;}
    h2 { font-size:20px;}
    h4 { font-size:18px;}
    h5 { font-size:16px;}
    p { font-size:13px;}
    #Bereich1 a  {font-size:12px; }
    #Bereich1 .buchbare h4 {  font-size:16px;}

    #welcome h2 {font-size:14px;}
    #welcome  {width:90%}
    #inhalt {width:62%;}
    #inhaltverteiler { width:75%;  } 

    #bildheader .bild1 img { height:220px;  }
    #bildheader .bild2 img { height:220px; }
    #logo img { width:106%; }
    /*rückblick*/
    #rueck {  margin-top: 20px;}
    #rueck .rueck{   margin:15px 5px 0px 0px;   font-size: 20px; }
    #rueck .kreis { width: 60px; height: 60px;    }
    #rueck img { width:51px; }
    #rueck .jahr {  margin: 15px 0px 0px 5px;   font-size: 20px;}
    /*nav*/
    #navlinks li  a  { font-size:16px  ;}
    #nav ul li ul li  {  line-height:100%;}
    #nav ul li ul li a { font-size:12px; line-height:110%;}
    #navlinks ul li a { font-size:13px ;}
    #navfooter a { font-size:10px !important;}
    /*verteiler*/
    .breite13 .kastenbild {   height:145px;    }
    .breite13 h2{ font-size:14px}
    .breite13 p{ font-size:12px}
    /*Inhalte */
    .bu p { font-size:10px;}
     .veranstaltung { }
        .filter span { font-size:12px;}
        .veranstaltung .dtKurz1 {  font-size:16px; }
        .veranstaltung .dtKurz2 { font-size:13px; }
        .veranstaltung .dtKurzImg {   margin-top:5px;  }
  }

@media (max-width:991px) {
    body { border-left:0px solid red;}
    #responsive-menu { margin-top:45px; margin-left:20px;}
    #inhalt { width:80%; padding-right:0px;}
    #inhaltverteiler { width:102%;} 
    #grundinfF { display: inherit;}
    #welcome  {width:200px}
    #footer { margin-bottom:0px;}
    #grundinfF p { font-size:12px;}
        #grundinfF  .kasten { width:50%;  }
    #grundinfF .abstand20 { display:none;}

}

@media (max-width:767px) {
    body { border-left:0px solid blue;}
    .col-lg-5.breite13 {  width:50%; }
    #bildheader .inner { overflow-x:hidden;}
    #inhalt { width:100%; padding-right:10px;}
        #inhaltverteiler { width:100%;} 

    #logo { max-width:300px;}
    #responsive-menu { margin-top:0px; margin-left:0px;margin-bottom:25px;}
    .breite13 .kastenbild {   height:auto; }
    #Bereich1 .breite13:nth-child(3n+1) {  clear: inherit; }
    #Bereich1 .breite13:nth-child(2n+1) {  clear: both; }
    /*Grundinfo im Footer*/

}

@media (max-width:460px) {
    body { border-left:0px solid green;}
    /*Kästen / Verteiler    */
    .col-lg-5.breite13 { width:100%;  margin-bottom:20px; } 
}
