/**
 * Ersteller    : Dominik Jeni
 * Datum        : 12/2017
 * Beschreibung : Standard Desktop/PC Styles
 * Historie     : 08.01.2018 je1do wrapper_header bearbeitet: align-items flex-start, damit Logo oben sitzt
 *                                 Schriftarten upgedatet und für kursiv eine eigene Schriftart integriert
 *				  11.01.2018 je1do Downloadlink Style hinzugefügt (Speiseplan)
 *				  16.01.2018 je1do Downloadlink Style bearbeitet für Feedback Formular
 *				  17.01.2018 je1do .ContentWrap img geändert => eigene Klasse "leftIMG", da sonst jedes Bild links gefloatet wird
 *								   Formular Feedback CSS integriert
 *				  18.01.2018 je1do Klasse .schutz eingeführt, die versteckt wird. Schickt man ein Formular ab, wird dieses Input vom Spambot gefüllt, was jedoch serverseitig nicht erlaubt wird
 *								   line-height auch bei textarea eingeführt
 *			      22.01.2018 je1do Fonts überarbeitet, InfoDisplay ist nun der Name als Array mit verschiedenen Font-Styles/Weights 
 *								   Feedback Input Text hinzugefügt
 *				  24.01.2018 je1do Schatten bei .leftIMG hinzugefügt
 *                28.02.2018 je1do Speiseplan PDF Object hinzugefügt
 *				  07.03.2018 je1do h3 line-height hinzugefügt
 */



/**
 *  STYLES RESETTEN UND SPEZIELLE SCHRIFTART IMPORTIEREN
 */
 
@import url('style_reset.css'); 
@import url('fonts.css');

 


/**
 *
 *  ALLGEMEINE STYLES
 *  
 */
 
input::-moz-focus-inner { /* im FF haben z.B. submit Buttons trotz css reset 2px größeren Textabstand als sie sollten */
 border: 0;
 padding: 0;
}

select::-ms-expand {             /* PFEIL AUSBLENDEN IE */
 display: none;
}

select:focus::-ms-value {        /* Ausgewählte Select-Option ist normal blau, allerdings nicht bis zum Rand, hier zurücksetzen */
 background: none;
 color: rgb(86,89,92);
}

select {                         /* PFEIL AUSBLENDEN REST */
 -webkit-appearance: none;
    -moz-appearance: none;
     -ms-appearance: none;
      -o-appearance: none;
         appearance: none;
 outline : none;
 overflow : hidden;
 text-indent : 0.01px;
 text-overflow : '';           
}

input, textarea, select, option {
 -ms-box-sizing: content-box;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box; 
 box-sizing: content-box;
}

a {
 word-break: break-all;    /* Wörter umbrechen, falls sie zu lang sind */
 /* ### Silbentrennung noch nicht bei Chrome ### Stand 09.11.17 ###
 word-wrap: break-word;    
 -moz-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto; */
}

h1 {                                                                                                                           /* Default h1 Style */
 font-size: 120%;
 color: #fff;
 margin: 0;
 font-weight: normal;
}

h2 {                                                                                                                           /* Default h2 Style */
 font-size: 130%;
 font-weight: normal;
 padding: 0;
 padding-top: 0.5rem;
}

h3 {
 font-size: 100%;
 font-weight: bold;
 line-height: 130%;
}

hr {
 border: none;
 border-bottom: 1px solid silver;
}

.shorelines {
 font-family: 'ShorelinesScript', 'InfoDisplay', 'Arial', sans-serif;
 font-weight: bold;
 margin-top: 0.3rem;     /* Die Shorelines Schriftart hat einen größeren Abstand nach unten! Dies wird hiermit wieder ausgeglichen :: ein wenig oben dazu */
 margin-bottom: -0.3rem; /* Die Shorelines Schriftart hat einen größeren Abstand nach unten! Dies wird hiermit wieder ausgeglichen :: ein wenig unten weg */
 word-spacing: 0.6rem;   /* Abstand der Wörter */
}




/**
 *
 *  WRAPPER STYLES MAIN PAGE
 *
 */


html  {
 width: 100%;
 height: 100%;
 font-size: 100%;  /* An dieser Textgröße orientieren sich alle anderen Angaben (rem = root em bei den anderen Klassen) */
 background-color: #fff; 
}

body {                                                                                                                         /* fungiert als Content Wrapper */
 width: 100%;
 height: auto;
 overflow-y: scroll;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -ms-flex-direction: column;
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
}







.wrapper_header {                                                                                                              /* Wrapper um den Kopfbereich (100% Breite mit grauem Hintergrund) */
 width: 100%;
 height: 22rem;
 z-index: 1;
 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 
 color: #fff;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 -webkit-box-align: start;
 -moz-box-align: start;

 -ms-flex-align: flex-start;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 
 background-size: cover !important;
}

.balken_header {
 width: 100%;
 background: rgb(120,178,43);
 margin-bottom: 2rem;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 
    -moz-box-shadow: 0.6rem 0.6rem 1rem #CCC, -0.6rem -0.6rem 1rem #CCC; /* Firefox */
 -webkit-box-shadow: 0.6rem 0.6rem 1rem #CCC, -0.6rem -0.6rem 1rem #CCC; /* Chrome, Safari */
  -khtml-box-shadow: 0.6rem 0.6rem 1rem #CCC, -0.6rem -0.6rem 1rem #CCC; /* Konqueror */
         box-shadow: 0.6rem 0.6rem 1rem #CCC, -0.6rem -0.6rem 1rem #CCC; /* CSS3 */
}

.wrapper_content {                                                                                                             /* Wrapper um die Inhalte, d.h. Buttons und Tool-Liste (damit diese mittig ausgerichtet werden) */
 width: 100%;

 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 -webkit-box-align: start;
 -moz-box-align: start;

 -ms-flex-align: start;
 -webkit-align-items: flex-start;
 align-items: flex-start; 
}




/**
 *
 *  KOPFBEREICH
 *
 */


.header {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 /*-webkit-box-pack: justify;
 -moz-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;*/
 
 -webkit-box-pack: end;
 -moz-box-pack: end;
 -ms-flex-pack: end;
 -webkit-justify-content: flex-end;
 justify-content: flex-end;

 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 
 width: 75%;
 padding: 2rem 0;
}

.subheader {
 width: calc(75% - 3rem);
 padding: 1rem 1.5rem;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}

.mobile_menu {
 display: none;
}

.logo {                                                                                                                        /* Linke Box des Headers mit Logo und Titel, vertikal mittig ausgerichtet */
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 
 background: rgba(0,0,0,0.45);
 /*background: rgba(255,255,255,0.5);*/
 padding: 1rem;
}

.logo img {                                                                                                                    /* Logo Bild */
 height: 6rem;
}
 
.content {                                                                                                                     /* Bereich mit den Tools als Liste, 75% Breite mit identischen Abständen wie der Button-Bereich darüber */
 width: calc(53% - 3.5rem);
 height: auto;
 padding-left: 1.5rem;
 padding-right: 2rem;
 padding-top: 1.5rem;
 padding-bottom: 1.5rem;
}

.content p {
 padding: 0.5rem 0;	
 line-height: 150%;
 text-align: justify;
}

.menu {
 width: calc(22% - 2rem);
 padding-top: 1.5rem;
 padding-bottom: 1.5rem;
 padding-left: 2rem;
 padding-right: 0;
 border-left: 1px solid silver;
 /*border: 1px solid silver;
 background-color: #eee;*/
}

.menu ul {
 list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* HACK für IE10/11, da es teilweise ignoriert wird bei display:none zu display:block im mobile menu */
 margin: 0;
 padding: 0;
}

.menu li {
 padding: 0.3rem 0;
}

.menu a {
 font-size: 100%;
 text-decoration: none;
 border: 2px solid silver;
 text-transform: uppercase;
 letter-spacing: 0.1rem;
 width: calc(100% - 1rem - 4px);
 display: block;
 text-align: center;
 padding: 0.5rem;
 background-color: #fff;
 
 -webkit-transition: background-color 0.5s, color 0.5s;
 -moz-transition: background-color 0.5s, color 0.5s;
 -o-transition: background-color 0.5s, color 0.5s;
 transition: background-color 0.5s, color 0.5s;
}

.menu a:hover {
 color: #fff;
 background-color: silver;
 
 -webkit-transition: background-color 0.5s, color 0.5s;
 -moz-transition: background-color 0.5s, color 0.5s;
 -o-transition: background-color 0.5s, color 0.5s;
 transition: background-color 0.5s, color 0.5s;
}

.menu a.activeMenu {
 color: #fff;
 background-color: silver;
} 


/**
 * CONTENT STYLES
 */
 
.ContentWrap {
 padding: 1rem 0;
 clear: both;
}
 
.leftIMG {
 width: 15rem;
 margin-right: 1.5rem;
 margin-bottom: 1.5rem;
 float: left;
    -moz-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Firefox */
 -webkit-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Chrome, Safari */
  -khtml-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Konqueror */
         box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* CSS3 */
}


.ContentWrap span {
 font-style: italic;
}

.red {
 color: red;
 border: 2px solid red;
 padding: 2rem !important;
}


/**
 * ZITAT STYLES
 */
 
.zitat {
 font-style: italic;
 background: url('../img/zitat.png') no-repeat;
 height: 150px;
 line-height: 150%;
 text-align: justify;
 width: 60%;
} 

.zitat p {
 font-style: normal;
 text-align: right;
 font-size: 80%;
}


/**
 * DOWNLOADLINK
 */
.download_link {
 background: rgb(120,178,43);

 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 width: 13rem;
 padding: 0.7rem;
 text-decoration: none;
 color: #fff;
 border: none;
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: 0.1rem;
 font-size: 80%;
 
    -moz-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Firefox */
 -webkit-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Chrome, Safari */
  -khtml-box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* Konqueror */
         box-shadow: 0.1rem 0.1rem 0.4rem #CCC, -0.1rem -0.1rem 0.4rem #CCC; /* CSS3 */
}

.download_link img {
  height: 1.25rem;
} 

.download_link span {
 padding-left: 1rem;
 color: #fff;
}

.download_link:hover {
 opacity: 0.6;
}



/**
 * IFRAME FÜR KARTE
 */
 
iframe {
 width: 70%;
 height: 20rem;
 border: 1px solid silver;
} 


/**
 * FEEDBACK FORMULAR
 */

#formular_feedback, #formular_feedback .btn-wrap {
 margin-top: 1.5rem;
}

#formular_feedback .top-textarea {
 background-color: #fff;
 width: calc(70% - 2rem);
 border: 1px solid #fbfbfb;
 border-bottom: 1px dotted #fbfbfb;
 border-top-left-radius: 0.25rem;
 border-top-right-radius: 0.25rem;
 padding: 0.5rem 1rem;
 margin-top: 1.5rem;
    -moz-box-shadow: 0 0.6rem 2.8rem #ccc; /* Firefox */
 -webkit-box-shadow: 0 0.6rem 2.8rem #ccc; /* Chrome, Safari */
  -khtml-box-shadow: 0 0.6rem 2.8rem #ccc; /* Konqueror */
         box-shadow: 0 0.6rem 2.8rem #ccc; /* CSS3 */
} 
 
#formular_feedback textarea {
 resize: none;
 width: calc(70% - 2rem);
 height: calc(15rem - 2rem);
 border: 1px solid #fbfbfb;
 border-top: none;
 border-bottom-left-radius: 0.25rem;
 border-bottom-right-radius: 0.25rem;
 background-color: #fff;
 padding: 1rem;
 overflow: auto;
 line-height: 150%;
 -webkit-appearance: none; /* sonst kein Schatten in Safari */
    -moz-box-shadow: 0 0.6rem 2.8rem #ccc; /* Firefox */
 -webkit-box-shadow: 0 0.6rem 2.8rem #ccc; /* Chrome, Safari */
  -khtml-box-shadow: 0 0.6rem 2.8rem #ccc; /* Konqueror */
         box-shadow: 0 0.6rem 2.8rem #ccc; /* CSS3 */
} 

#formular_feedback input[type=text] {
 width: calc(70% - 2rem);
 border: 1px solid #fbfbfb;
 border-top: none;
 border-bottom-left-radius: 0.25rem;
 border-bottom-right-radius: 0.25rem;
 background-color: #fff;
 padding: 1rem;
 overflow: auto;
 -webkit-appearance: none; /* sonst kein Schatten in Safari */
    -moz-box-shadow: 0 0.6rem 2.8rem #ccc; /* Firefox */
 -webkit-box-shadow: 0 0.6rem 2.8rem #ccc; /* Chrome, Safari */
  -khtml-box-shadow: 0 0.6rem 2.8rem #ccc; /* Konqueror */
         box-shadow: 0 0.6rem 2.8rem #ccc; /* CSS3 */
} 

#formular_feedback textarea:hover, #formular_feedback input:hover  {
 background-color: #fbfbfb;
}

#formular_feedback .btn-wrap {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

#formular_feedback #result, #formular_feedback #label  {
 padding-left: 1rem;
}

#formular_feedback .schutz {
 display: none;
}


/**
 * SPEISEPLAN PDF OBJECT
 */
object {
 width: 100%;
 height: 40rem;
} 


/**
 * BIO LOGO
 */
 
.bio-logo {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -webkit-box-pack: justify;
 -moz-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 
  -webkit-box-align: end;
 -moz-box-align: end;

 -ms-flex-align: end;
 -webkit-align-items: flex-end;
 align-items: flex-end;
}

.bio-logo-center {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -webkit-box-pack: justify;
 -moz-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 
 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
} 

.glutamat {
 font-weight: bold;
}

.startseite-logo {
 margin-top: -2rem;
}