@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
html { 	width:100%; margin:0px; }
body { height: auto; width: 90%; max-width:800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; font-family: 'Muli', sans-serif; font-size:16px; }

iframe body {margin:0px;}

a { color: inherit;}

/* Kopf */
#kopf { position:fixed; }

#head { position:relative; width:100%; text-align:center; color:#006079; font-size:10px; }
#head img { width:100% }
#logo { position:absolute; width:20%; margin:auto; top:-100px; }
#logo img { width:auto; }

/* Bilder */
img {width:100%; position:relative;}

/* Störer */
#stoerer-aktuelles { background-color:#3A8598; color:#fff; font-size:15px; padding:7px; border-radius:6px; margin-bottom:10px; padding-left: 16px; padding-right:16px; margin-top: -3px; margin-left: 4px; margin-right: 4px;}
#stoerer-aktuelles a {color:#C0D8DE;}

#stoerer-neues { background-color:#f2f7f8; color:#006079; font-size:15px; padding:7px; border-radius:6px; margin-bottom:10px; padding-left: 16px; padding-right:16px; margin-left: 4px; margin-right: 4px;}
#stoerer-neues a {}

.trennlinie {min-width:100%; min-height: 4px; border-style:solid; border-width:4px; border-left:none; border-right:none; border-top:none;border-color:#cdd400; padding:0px;margin-bottom:10px; display: table; z-index:100;}

/* Editor Textareas */
textarea, .cke_editable { width:99%; height:auto; margin-top:10px; }
.abschnitt-test{ background-color:#fff; color:#006079; font-size:16px; margin:6px; padding:6px; border-radius:6px; }

a { }
p { margin-top:0px; margin-bottom:10.5px; line-height: 21px; }

kleiner { font-size:80%; }

.clear { clear:both; text-align:right; height:20px; }

/* Content & Masonry-Items */
#content { height: auto; width: 800px; line-height:20px; margin-bottom:20px; }
.kapitel { display:none; }
.grid-sizer{ width:400px; }

.abschnitt { background-color:#f2f7f8; border-radius:6px; padding:10px; float:left; margin-right:4px; margin-left:4px; margin-bottom:10px; width:372px; height:auto; }
.abschnitt img { width:100%; margin-bottom:10px; }
.abschnitt-voll { background-color:#f2f7f8; border-radius:6px; padding:10px; float:left; margin-right:4px; margin-left:4px; margin-bottom:10px; width:772px; clear:both; }
.abschnitt.voll {width:772px; }
.abschnitt.klein { width:172px; }

/* Adresse/Footer */
.adresse { text-align:center; color:#116b82; font-size:14px; margin-top:5px; font-weight:300; font-style: normal;}
.impr { text-align:center; font-size:11px; color:#116b82; margin-bottom: 30px;}

/* Navigation */
#navigation { position:relative; width:100%; height:30px; border-style:solid; border-width:4px; border-left:none; border-right:none; border-color:#cdd400; padding:0px; padding-top:6px; padding-bottom:6px; margin-top:5px; display: table; z-index:100;}

#navigation li { display: table-cell; table-layout: fixed; border-style:solid; border-width:2px; border-top:none; border-bottom:none; border-color:#fff; background-color:#f2f7f8; 	text-align:center; font-size:18px; font-weight:300; text-decoration:none; line-height: 30px; }
#navigation li a { text-decoration:none; color:#006079; }

/* Headlines */
.headline{ position:relative; font-size:190%; font-weight:800; color:#006079; min-width:100%; clear:left; margin-bottom:10px; margin-top:10px; }
.headline-klein{ position:relative; font-size:125%; font-weight:800; color:#006079; min-width:100%; clear:left; margin-bottom:5px; margin-top:5px; }

/* iFrame */
iframe {border:none; max-height:500px; width:100%;}

/* Form */
fieldset { 	border:none; }

/* Editor Info & Dateiboxen */
.edit-info { position:absolute; width: 300px; height:150px; margin:auto; background-color:#cdd400; color:#FFF; font-size:14px; font-weight:800; text-align:center; vertical-align:middle; }
.datei-box { padding:10px; margin:3px; width:auto; height:35px; overflow:hidden; float:left; background-color:#fff; border-radius:4px; }

/* Elternratgeber */
.elternratgeber {font-size:16px;}
.elternratgeber ul {-webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; }

/* Footerbar */
#footer { position:relative; width:100%; height:30px; border-style:solid; border-width:4px; border-left:none; border-right:none; border-color:#cdd400; padding:0px; padding-top:6px; 	padding-bottom:6px; margin-top:5px; margin-bottom: 5px; display: table; z-index:100; }

/* Hervorgehobene Box (grün) */
.hervor { background-color: rgb(226, 238, 201);}

/* Farbauswahl (Aktuelles) */
input[type="radio"] { display:none;}
input[type="radio"] + label { display:inline-block; width:40px; height:40px; border-radius: 5px; border: 1px rgba(0,0,0,.2) solid; }
input[type="radio"]:checked + label { border: 4px rgba(0,0,0,.4) solid; }

.blau {background-color: #3a8598; color: #f2f7f8;}
.gruen  {background-color: #cdd400; color: #f2f7f8;}
.hellblau  {background-color: #f2f7f8; color: #3a8598;}
.orange  {background-color: #e15c3a; color: #f2f7f8;}
.rosa  {background-color: #ebbecd; color: #3a8598;}

/* ====== Zusätze für die neue Anfragen-Infobox (Bilirubin) ====== */
.anfragen-infobox{
  background:#fff6cc;
  border:none;
  border-radius:6px;
  padding:3px 10px 10px 10px;
}
.anfragen-infobox h3{
  margin:0 0 .4em 0;
  color:#2e6b7f;
  font-size:22px;
  line-height:1.2;
}

/* Kompakte Variante für einzelne Kacheln */
.abschnitt.schmal { padding:8px; margin-bottom:8px; }              /* statt 10px/10px */
.abschnitt.schmal .headline-klein,
.abschnitt.schmal header { margin:4px 0 6px 0; }                   /* dichter */
.abschnitt.schmal p { margin:0 0 6px 0; }                          /* dichter */
.abschnitt.schmal .bt_weiter { margin-top:6px; }                   /* kleiner Abstand */

/* Letztes Element in einer Kachel bekommt keinen unteren Abstand */
.abschnitt > p:last-child { margin-bottom: 0; }


/* Media Queries */
@media (max-width: 800px) {
  body { width:100%; margin:0; }
  #content { width:100%; }
  .abschnitt { width:93%;}
  .abschnitt.voll { width:93%; }
  .headline{ font-size:140%;}
  .headline-klein{ margin-top:13px; }
  #navigation { width: 100%; margin-left:auto; margin-right:auto; padding:2px;}
  #navigation li { width:auto; height:auto; display:list-item; list-style:none; margin:2px; border:none;}
  .elternratgeber li {margin-bottom:5px; list-style:none}
  .elternratgeber  {margin-bottom:20px;}
  .impressum {  font-size:13px; color:#116b82; }
}