/*Kernfarben
grün: #9fcc57;
hellgrau: #E0E0E0;
rostrot: #d14021;
*/

:root {
  --khw_blue1: #3c90dc;
  --khw_blue2: #1687bf;
  --khw_lightgray: #E0E0E0;
  --khw_red: #d14021;
  --khw_green: #9fcc57;
}

/*https://github.com/dev-ext/font-face/blob/master/%40fontface-other/calibri/calibri.html*/
@font-face {
	font-family: 'Calibri';
	src: url('calibri.eot');
	src: url('calibri.eot?#iefix') format('embedded-opentype'),
	     url('calibri.woff') format('woff'),
	     url('calibri.ttf') format('truetype'),
	     url('calibri.svg#calibri') format('svg');
	font-weight: normal;
	font-style: normal;
}

html { margin: 0 !important; padding: 0 !important; }
body { margin: 0 !important; padding: 0 !important; background-color: #fff !important; color: #666; font-size: 1rem; line-height: 1.5rem; font-family: 'Arial'; }

h1 { font-size: 2.5rem; line-height: 3.5rem; letter-spacing: 0.04rem; color: #212738; }
h2 { font-size: 1.8rem; line-height: 2.4rem; letter-spacing: 0.04rem; color: #212738; }
h3 { font-size: 1.6rem; line-height: 2.2rem; letter-spacing: 0.04rem; color: #212738; }
h4 { font-size: 1.4rem; line-height: 2.0rem; letter-spacing: 0.04rem; color: #212738; }
h5 { font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0.03rem; color: #e25c44; }
h6 { font-size: 1.3rem; line-height: 1.7rem; letter-spacing: 0.03rem; color: #e25c44; }
h1, h2, h3, h4, h5, h6 { padding: 10px 0; }

a { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; color: #555; text-decoration: none; }
a:hover { color: #1687bf !important; cursor: pointer; text-decoration: underline; }

p, ul, li { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; color: #666; }
strong {  }

img { border: 0; text-decoration: none; max-width: 100%; }

/* header, main, footer { box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(221, 221, 221, 0.8), -12px 0 15px -4px rgba(221, 221, 221, 0.8); }*/

:required { border-left: 2px solid red; }

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ###### HEADER ######################*/

/*formatiert die Größe des Logos */
.logo { width: 100%; max-width: 300px; }

.socialicon {
  width: auto !important;
  height: auto !important;
  max-height:25px !important;
}


/* blendet die Social-Media-Icons im Header auf kleinen Displays aus*/ 
@media only screen and (max-width: 600px) {
#social-header {
    display: none;
  }
}

/* blendet die Social-Media-Icons im Footer auf großen Displays aus*/ 
@media only screen and (min-width: 600px) {
#social-footer {
    display: none;
  }
}

/*stellt den Hintergrund der Suchlupe auf grün */
button#suchlupe {background: #00AC97; border-color: #00AC97; }
/*stellt den Hintergrund der Suchlupe bei Mauskontakt auf rot */
button:hover#suchlupe {background: #d14021; border-color: #d14021;  }
/* blendet die Suchlupe auf kleinen Displays aus*/ 
@media only screen and (max-width: 600px) {
#suchlupe {
    display: none;
  }
}

/* definiert die Überschrift h1 auf der Unterseite Kiho */ 
@media only screen and (max-width: 20000px) {
h1.kiho-h1  {
    margin: 5px;
    padding: 10px;
    color: #C45139 !important; 
    text-align: center;
    font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.03rem;  
  }
}

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### MAX MEGA MENU*/


/*stellt die Schriftfarbe beim Mauskontekt auf rot*/
a:hover.mega-menu-link {color: #000000 !important; }




/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### STARTSEITE*/

.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* blendet das Schnuppertag-Bild für große Displays ein*/ 
@media only screen and (min-width: 600px) {
div.bobkwbild-klein {
    display: none;
  }
}

/* blendet das das Schnuppertag-Bild für kleine Displays ein*/ 
/*@media only screen and (max-width: 600px) {
div.bobkwbild-groß {
    display: none;
  }
}*/

/* definiert den Balken für die Verlinkung in Abhängigkeit von der Screen-Größe*/ 

button.button-link-general {
  background: #00AC97;
  border: 1px solid #00AC97;
  border-radius: 2px;
  color: #FFF;
  padding:10px;
}

button:hover.button-link-general {
  background: #FFF;
  border: 1px solid;
  color: #00AC97 !important;  
}


@media only screen and (max-width: 20000px) {
a.link-general {
  text-decoration: none;
  color: #FFF;
  font-size: 1.2rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
  text-decoration: none;

}
a:hover.link-general {
  color: #00AC97 !important;  
  font-size: 1.2rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  a.link-general {
  font-size: 0.9rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
     text-decoration: none;
  }
}

/* definiert die h1-Schrift in Abhängigkeit von der Screen-Größe*/ 

@media only screen and (max-width: 20000px) {
h1.h1-schrift  {
    color: #00AC97 !important; 
    font-size: 2.2rem; line-height: 1.8rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
div.startseite-klein-thumbnail{
  display:none;
  }
}

@media only screen and (max-width: 600px) {
h1.h1-schrift  {
    color: #00AC97 !important; 
    font-size: 1.5rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
}

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### STARTSEITE*/

/* schaltet den Trennstrich je nach Displaygröße aus`*/
@media only screen and (min-width: 600px) {
hr.trennstrich  {
    display:none;
  }
}



/* definiert die Überschriftsklasse h2 für unterschiedliiche Screen-Größen*/ 
@media only screen and (max-width: 20000px) {
h2.h2-schrift  {
    color: #00AC97 !important; 
    font-size: 2.2rem; line-height: 1.8rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
}

@media only screen and (max-width: 600px) {
h2.h2-schrift  {
    color: #00AC97 !important; 
    font-size: 1.5rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
}

/* setzt die Schriftgröße bei den Themen und entfernt den Unterstrich*/
h1.thema-h1 {
     font-weight: bold;
  }

h2.thema-h1 {
     font-weight: bold;
  }

h2.startseite-thema-schrift {
     font-size: 1.2rem; line-height: 1.6rem; letter-spacing: 0.03rem; 
     text-decoration: none;
}
h2:hover.startseite-thema-schrift {color: #d14021 !important;  text-decoration: none;}

a.no-underline {text-decoration: none;}

div.publikation-thumbnail {
  border-color: #E0E0E0;
  border-width: 2px;
  border-style: solid;
 }

h2.publikation-titel {
 font-size: 1.2rem; line-height: 1.4rem; letter-spacing: 0.03rem; 
} 

p.publikation-textauszug {
   font-size: 0.6rem; line-height: 0.8rem; letter-spacing: 0.03rem; 

}


/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### SIDEBAR #####*/

/* definiert die Überschriftsklasse h2 für unterschiedliiche Screen-Größen*/ 
@media only screen and (max-width: 20000px) {
h2.h2-sidebar  {
    color: #9fcc57 !important; 
    font-size: 2.0rem; line-height: 1.8rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
}

@media only screen and (max-width: 1400px) {
h2.h2-sidebar  {
    color: #9fcc57 !important; 
    font-size: 1.6rem; line-height: 1.2rem; letter-spacing: 0.03rem; 
    border-color: #E0E0E0;
    border-width: 2px;
    border-style: solid;
    background-color:#E0E0E0;
    padding-left: 10px;
  }
}

/*erzeugt das Kalenderblatt */
div.calender {
    margin: 0px;
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #000;
    border-bottom: 6px solid #d14021;
    text-align: center;
}
div:hover.calender {
    background-color: #E0E0E0;
  }

/*definiert das Innere des Kalenderblattes */
a.no-underline-calendersheet {
  text-decoration: none;
  color: #000 !important;
}

h5.datum {
  color: #00AC97 !important; 
  text-align: center;
 
}

/* setzt die Schriftgröße bei den Veranstaltungen und entfernt den Unterstrich*/
a.sidebar-schrift {
     color: #000 !important;
     text-decoration: none;
     font-size: 1.2rem; line-height: 1.0rem; letter-spacing: 0.03rem; 

}
a:hover.sidebar-schrift {color: #d14021 !important;  text-decoration: none;}

a.no-underline {text-decoration: none;}

/* schaltet bei großen Screens die Version der Datumsanzeige 
für kleine Screens aus*/ 
@media only screen and (max-width: 20000px) {
div.sidebar-display-klein  {
    display: none;
}


/* schaltet bei kleinen Screens die Version der Datumsanzeige 
für große Screens aus und die für kleine Screens an*/ 
@media only screen and (max-width: 1000px) {
div.sidebar-display-groß {
    display: none;
  }
div.sidebar-display-klein  {
    display: inline;
  }
}

/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### FOOTER #####*/

/*footer { background: #d21a1a; }

div.footer-bar {
  padding: 10px;
  text-align: center;
}

a.link-footer {
  text-decoration: none;
  color: #FFF;
  font-size: 1.0rem; line-height: 1.2rem; letter-spacing: 0.03rem; 

}
a:hover.link-footer {color: #d21a1a !important;  text-decoration: none;}


/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### BOOTSTRAP ACCORDION #####*/


/* schaltet die Hintergurndfarbe */
/*button.accordion-button.collapsed[aria-expanded="true"] {
   background-color: #FFF;
   border: none;
   color: #000;
}

button.accordion-button.collapsed[aria-expanded="false"] {
   background-color: #FFF;
   border: none;
}

button.accordion-button[aria-expanded="true"] {
  background-color: #00AC97;
  border: none;
  color: #FFF;
}*/

/* schaltet die blaue Linie aus, Quelle: 
https://stackoverflow.com/questions/28866553/remove-border-from-bootstrap-accordion; */

:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}


.colibri-post-content figure {
  display: flex;
}


/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### ACCORDION bei Einzelpersonen #####*/
/* ####### Quelle: https://www.mediaevent.de/tutorial/css-accordeon.html #####*/

input[name="myradio2"] { display: none }

.bigbutton {
   background: #fff;
   color: white;
   border: 16px solid #28A3D7;
   transition: 0.5s;
}

input:checked~.bigbutton { 
   background: #0E6F98; 
   transition: 0.5s;
}  

.accordion input{
  display: none;
}

.accordion .panel {
  margin: 0 auto;
  height: 0;
  overflow:hidden;
  background-color: white;
  line-height: 1.4;
  padding: 0 10px;
  box-sizing: border-box;
  transition: all 0.5s;

}

.accordion input:checked~.panel {
  height: auto;
  color: #333;
  padding: 10px;
  transition: all 0.5s;
}

.accordion label {
  cursor: pointer;
  background-color:  #FFF;       
  border: 1px solid #000;
  display: block;
  padding: 10px;
  width: 100%;
  color: #000;
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
}

.accordion input:checked+label {
  background-color: #00AC97; 
  color: #FFF;    

}


/* ###### ###### ###### ###### ###### ###### ###### ###### */
/* ####### Suchleiste #####*/
/* ####### schaltet die Suchlupe im Plugin Ajay Search Lite aus #####*/

div.promagnifier {
  display: none;
}

/* blendet das Suchfeld auf kleinen Displays eigentlihc aus - wird aber durch das Plugin überschrieben*/ 
@media only screen and (max-width: 200px) {
div#suchfeld {
    display: none;
  }
}