/*  Es werden 4 verschiedene Display-Groessen betrachtet:
    1. Grosser Desktop:         >=1200 px
    2. Kleiner Desktop:     992 - 1199 px
    3. Tablet         :     768 -  991 px
    4. Smartphone     :           <768 px

    Alles was 'altlast' im Namen hat, hat etwas mit den Seiten zu tun, die
    vorerst mal fast unveraendert bleiben.

*/
/*  Schriftgroessen/Zeilenhoehen  */
/*                           Riesig       big = Gross
                 <h1>         <h2>          <h3>        Standard        Mittel        Klein
    >1200px:  35px/42px     28px/35px     22px/30px     20px/28px     18px/24px     16px/20px
    > 992px:  30px/38px     25px/33px     22px/30px     20px/28px     18px/24px     16px/20px
    > 768px:  25px/33px     22px/30px     20px/28px     18px/26px     16px/22px     14px/18px
              20px/26px     19px/25px     18px/23px     16px/24px     14px/20px     12px/16px
*/

/*  Global benutzte Farben  */
/*
  Normale Schriftfarbe:
  color:            #5c5a55;     Sehr dunkles Grau (Fast Schwarz) = Hintergrundfarbe Checkbox

  Header-Background interner Bereich      Vorstand
  background-color: #ddecf3;              #8ee6e6;

  <h1>- und <h2>-Ueberschriftfarbe = Farbe vom Back-Link
  color:            #426375;     Dunkles Blau

  Farbe fuer Fettschrift
  color:            #202020;     Schwarz

  Hintergrund von Tabellenheadern = Farbe von Buttons = Farbe von Links = Farbe von Icons = Farbe vom Strich unter angewähltem Manü = Footer = Farbe von 'big-numbers__number'
  background-color: #549bbf;     Dunkelblau mit weisser Schrift

  Buttonfarben
  background-color: #549bbf;     Dunkelblau mit weisser Schrift (s.o.)
  background-color: #5caad2;     dito. falls selektiert
  background-color: #a8a7a5;     Grauer Button UND Disabled Button
  background-color: #c0bfbc;     dito. falls selektiert (helleres Grau)

  Checkboxen
  background-color: #d0d0d0;     Hintergrundfarbe Hellgrau, wenn selektiert
  background-color: #ffffff;     Hintergrundfarbe Weiss   , wenn nicht selektiert
  border-color:     #e0e0e0

  Tabellen
  background-color: #549bbf;     Dunkelblau mit weisser Schrift (s.o.)
  background-color: #f5f5f5;     Hellgrau (Gerade   Zeilen)
  background-color: #ffffff;     Weiss    (Ungerade Zeilen)
  background-color: #cccccc;     Helles Grau     Farbe der Zeile auf die der Cursor zeigt

  Hintergrund von Neuigkeiten
  background-color: #f5f5f5;     Hellgrau        <section class="section section--highlight">  (s.o.)
  oder
  background-color: #f5f5f5;     Hellgrau        <section class="section section--highlight2">  (s.o.)

  Date-Input
  color:            #adacaa;     Warum nicht '#a8a7a5' ?
  
  
*/

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* CONTAINER */

.container {             /* Abschnitt */
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

@media print {
  .container {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1199px) {
  .container {
    max-width: 100%;
    margin-left: 30px;
    margin-right: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    max-width: 1000px;  /* QWER: Das macht doch keinen Sinn!??? */
    margin-left: 10px;
    margin-right: 10px;
  }
}

.container--popup {             /* Abschnitt */
  max-width: 100%;
  margin-left: 10px;
  margin-right: 10px;
}

@media print {
  .container--popup{
    max-width: 100%;
  }
}

/*  'container--big' ist ein ueberbreiter Container. Typische Anwendung sind ueberbreite Tabellen.  */
/*  Die ebenfalls ueberbreiten Lärmgraphen werden mit Spezial-Containern dargestellt (s.u.)        */

.container--big {
  max-width: 1520px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  padding: 0 0;
}
@media print {
  .container--big{
    max-width: 100%;
  }
}

/*  Am Ende jedes Containers wird wieder der Default hergestellt  */
.container:after {      /* Das Web sagt: Insert content after element, and style the inserted content */
  content: " ";         /* Nach jedem Conatiner 1 Blank mit den Eigenschaften ... */
  display: block;       /* 1. Neue Zeile */
  clear: both;          /* 2. Loescht evtl. vorhandene 'floating' Elemente */
}

/*================================================================================*/
/*  Grid: Die zur Verfuegung stehende Nettobreite wird in 12 'Spalten' aufgeteilt  */
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
/*padding-top: 10px;                 Das 'padding-top' ist von der 'row' in die 'col' gewandert  */
}

@media only screen and (max-width: 767px) {
  .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.row [class^="col-"] {
  margin: 0px 10px 0px 0px;
  padding: 0px;
  padding-top: 10px;              /* Das 'padding-top' ist von der 'row' in die 'col' gewandert  */
}

@media only screen and (max-width: 1199px) {
  .row [class^="col-"] {
/*  margin: 0px 5px 0px 0px;         Das gehoert zur Aktion "Das 'padding-top' ist von der 'row' in die 'col' gewandert"  */
  }
}

@media only screen and (max-width: 767px) {
  .row [class^="col-"] {
    width: 100%;
    margin: 0px;
    padding-top: 5px;             /* Das 'padding-top' ist von der 'row' in die 'col' gewandert  */
  }
}

.row [class^="col-"]:last-child {
  margin-right: 0;
}

.row [class^="col-"]:first-child {
  margin-left: 0;
}

@media only screen and (min-width: 768px) {
	.row .rechts {
		text-align: right;
	}
}

.col-1 {
  width: -webkit-calc(100% * 1/12);
  width: calc(100% * 1/12);
}

.col-2 {
  width: -webkit-calc(100% * 2/12);
  width: calc(100% * 2/12);
}

.col-3 {
  width: -webkit-calc(100% * 3/12);
  width: calc(100% * 3/12);
}

.col-4 {
  width: -webkit-calc(100% * 4/12);
  width: calc(100% * 4/12);
}

.col-5 {
  width: -webkit-calc(100% * 5/12);
  width: calc(100% * 5/12);
}

.col-6 {
  width: -webkit-calc(100% * 6/12);
  width: calc(100% * 6/12);
}

.col-7 {
  width: -webkit-calc(100% * 7/12);
  width: calc(100% * 7/12);
}

.col-8 {
  width: -webkit-calc(100% * 8/12);
  width: calc(100% * 8/12);
}

.col-9 {
  width: -webkit-calc(100% * 9/12);
  width: calc(100% * 9/12);
}

.col-10 {
  width: -webkit-calc(100% * 10/12);
  width: calc(100% * 10/12);
}

.col-11 {
  width: -webkit-calc(100% * 11/12);
  width: calc(100% * 11/12);
}

.col-12 {
  width: 100%;
}

/*==========================================*/
/* Layout: Allgemeine Layout Eigenschaften  */

* {                     /* Das '*' sagt aus, dass sich die folgenden Eigenschaften auf ALLE Elemente auswirken */
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*::-moz-selection {     /* ??? */
  color: #ffffff;
  background-color: #549bbf;
}

*::selection {          /* Die folgenden Eigenschaften wirken sich auf alle vom User ausgewaehlten Elemente aus */
  color: #ffffff;
  background-color: #549bbf;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {                   /* Basiseigenschaften, die an alles vererbt werden */
  padding: 0;           /* Dynamisch für die 4 Screengroessen: 0,0,0,0 / 20,0,0,0 / 15,0,0,0 / 0,0,0,0 */
  margin: 0;
  font-family: Open Sans, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;      /* Dynamisch für die 4 Screengroessen: 20/20/18/16 */
  line-height: 28px;    /* Dynamisch für die 4 Screengroessen: 28/28/26/24 */
  color: #5c5a55;
  display: -webkit-box; /* Wieso fehlen hier die Gecko-basierten Browser ??? */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media only screen and (max-width: 1199px) {
  body {
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  body {
    font-size: 18px;
    line-height: 26px;
    padding-bottom: 15px;
  }
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 24px;
  }
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

footer {
/* QWER
Max: Flex-Box kapier ich nicht wirklich. Aber wenn man das hier weglaesst scheint der Footer nur noch die Hoehe zu haben die notwendig ist. Kann aber sein, dass es aus anderen Gruenden wichtig ist!!!
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
*/
  margin-top: 70px;                /* Max ist gegen meine 35px. Wenn 35px dann auch im naechsten Block verkleinern */
}

@media only screen and (max-width: 1199px) {
  footer {
    margin-top: 60px;             /*Wenn im 'footer' kleiner, dann auch hier */
  }
}

@media only screen and (max-width: 991px) {
  footer {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  footer {
    margin-top: 30px;
  }
}

/*  Alle <hx> muessen verdoppelt werden zu <Titelx> und ansonsten inhaltlich glich sein (Altlast)  */  
h1 {
  font-size:     35px;
  line-height:   42px;
  font-weight:   600;
  color:         #426375;
}

.Titel1 {
  font-size:     35px;
  line-height:   42px;
  font-weight:   600;
  color:         #426375;
}

@media only screen and (max-width: 1199px) {
  h1 {
    font-size:   30px;
    line-height: 38px;
  }
}
@media only screen and (max-width: 1199px) {
  .Titel1 {
    font-size:   30px;
    line-height: 38px;
  }
}

@media only screen and (max-width: 991px) {
  h1 {
    font-size:   25px;
    line-height: 33px;
  }
}
@media only screen and (max-width: 991px) {
  .Titel1 {
    font-size:   25px;
    line-height: 33px;
  }
}

@media only screen and (max-width: 767px) {
  h1 {
    font-size:   20px;
    line-height: 26px;
  }
}
@media only screen and (max-width: 767px) {
  .Titel1 {
    font-size:   20px;
    line-height: 26px;
  }
}

h2 {
  font-size:     28px;
  line-height:   35px;
  font-weight:   600;
  padding-top:   30px;
  color:         #426375;
}
.Titel2 {
  font-size:     28px;
  line-height:   35px;
  font-weight:   600;
  padding-top:   30px;
  color:         #426375;
}

@media only screen and (max-width: 1199px) {
  h2 {
    font-size:   25px;
    line-height: 33px;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 1199px) {
  .Titel2 {
    font-size:   25px;
    line-height: 33px;
    padding-top: 20px;
  }
}

@media only screen and (max-width: 991px) {
  h2 {
    font-size:   22px;
    line-height: 30px;
    padding-top: 15px;
  }
}
@media only screen and (max-width: 991px) {
  .Titel2 {
    font-size:   22px;
    line-height: 30px;
    padding-top: 15px;
  }
}

@media only screen and (max-width: 767px) {
  h2 {
    font-size:   19px;
    line-height: 25px;
    padding-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .Titel2 {
    font-size:   19px;
    line-height: 25px;
    padding-top: 10px;
  }
}

h3 {
  font-size:     22px;
  line-height:   30px;
  padding-top:   30px;
  font-weight:   600;
}
.Titel3 {
  font-size:     22px;
  line-height:   30px;
  padding-top:   30px;
  font-weight:   600;
}

@media only screen and (max-width: 1199px) {
  h3 {
    font-size:   22px;
    line-height: 30px;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 1199px) {
  .Titel3 {
    font-size:   22px;
    line-height: 30px;
    padding-top: 20px;
  }
}

@media only screen and (max-width: 991px) {
  h3 {
    font-size:   20px;
    line-height: 28px;
    padding-top: 15px;
  }
}
@media only screen and (max-width: 991px) {
  .Titel3 {
    font-size:   20px;
    line-height: 28px;
    padding-top: 15px;
  }
}

@media only screen and (max-width: 767px) {
  h3 {
    font-size:   18px;
    line-height: 23px;
  }
}
@media only screen and (max-width: 767px) {
  .Titel3 {
    font-size:   18px;
    line-height: 23px;
  }
}

h4 {
  padding-top:   20px;
  font-weight:   600;
}
.Titel4 {
  padding-top:   20px;
  font-weight:   600;
}

@media only screen and (max-width: 991px) {
  h4 {
    padding-top: 18px;
  }
}
@media only screen and (max-width: 991px) {
  .Titel4 {
    padding-top: 18px;
  }
}
@media only screen and (max-width: 767px) {
  h4 {
    padding-top: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .Titel4 {
    padding-top: 16px;
  }
}

.h5 {
  padding-top:   0px;
  font-weight:   600;
}

@media only screen and (max-width: 991px) {
  .h5 {
    padding-top: 0px;
  }
}

.padbottom {            /* Falls man mal ein 'padding_bottom' braucht */
  padding-bottom: 10px;
}
.nopadtop {             /* Falls man mal ein 'padding_top' eliminieren will */
  padding-top: 0px;
}
.NoPaddingTop {
    padding-top: 0px;
}
.nopadbottom{          /* Falls man mal ein 'padding_bottom' eliminieren will */
  padding-bottom: 0px;
}

i {
  font-style: italic;
}

b {
/* color: #202020;         Warum soll sich die Schriftfarbe bei <b> aendern?  */
  font-weight: 600;
}
.Fett          {    /*  Wie '<b>'  */
  font-weight  : 600;
}

/* Links in Erlaeuterungen, die so aussehen als ob sie ein Link waeren, aber keiner sind: */
/* realisieren mit: '<a class="Fett">Link</a>'                                            */
a {
  text-decoration: none;
  font-family: Open Sans, Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
  color: #549bbf;
}

a.disabled {
  cursor: default;
}
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.PfeilVor:before {                /* Links mit Pfeil Vor/Zurueck mit                                       */
  content: "\00bb\a0";            /*       <a href="#" class="PfeilVor">Link mit Pfeil vorwaerts</a>       */
  display:inline-block;           /*  oder <a href="#" class="PfeilZurueck">Link mit Pfeil rueckwaerts</a> */
  text-decoration: none;          /* konstruieren                                                          */
}
.PfeilVor:hover:before{
  text-decoration: none;
}
.PfeilZurueck:before {
  content: "\00ab\a0";
  display:inline-block;
  text-decoration: none;
}
.PfeilZurueck:hover:before{
  text-decoration: none;
}

a.anchor {
  line-height: 1px;
  position: relative;
  top: -130px;                     /* section-Wert minus ca. 30px  */
  visibility: hidden;
}

@media only screen and (max-width: 991px) {
  a.anchor {
  top: -50px;                     /* section-Wert minus ca. 30px  */
  }
}

p {
  padding-top: 10px;
}

@media only screen and (max-width: 991px) {
  p {
    padding-top: 5px;
  }
}

ul {
  padding: 6px 0px 18px 24px;
}
ol {
  padding: 6px 0px 18px 24px;
}

@media only screen and (max-width: 991px) {
  ul {
    padding-left: 20px;
  }
  ol {
    padding-left: 20px;
  }
}

li {
  padding-top: 6px;
}

blockquote {
  padding-top     : 18px;
  padding-bottom  : 18px;
  padding-left    : 40px;
  padding-right   : 40px;
  background-color: #e0e0e0;
}

img.responsive {   /* Nur fuer <img src="... Damit das Bild bei kleinen Breiten auch kleiner wird   */
  max-width:100%;
  height:auto;
}

/*  'FixedTable' ist zwar keine CSS-Klasse, aber es wird so benutzt, als ob es eine waere!          */
/*  Wenn man '<table class="table_layout FixedTable">' schreibt                                     */
/*  und die folgende Konstruktion hat:                                                              */
/*     <table class="table_layout FixedTable">                                                      */
/*       <thead>                                                                                    */
/*         <tr><th>...</th>                                                                         */
/*             ...                                                                                  */
/*         </tr>                                                                                    */
/*       </thead>                                                                                   */
/*       <tbody>                                                                                    */
/*         ...                                                                                      */
/*       </tbody>                                                                                   */
/*     </table                                                                                      */
/*  bleibt der Tabellen-Header am oberen Bildschirmrand bestehen, wenn man nach unten scrollt       */
.fixed{                    /*  Fuer Tabellen mit einer Kopfzeile die nicht weggescrollt werden kann */
  top:0;                   /*  siehe: https://codepen.io/jgx/pen/wiIGc und 'main.js'                */
  position:fixed;
  width:auto;
  display:none;
  border:none;
  padding-top: 122px;      /* Header = 132px = margin-top (10) + padding-top (122)                  */
}
@media only screen and (max-width: 991px) {
  .fixed{                  /*  Fuer Tabellen mit einer Kopfzeile die nicht weggescrollt werden kann */
    top:0;                 /*  siehe: https://codepen.io/jgx/pen/wiIGc und 'main.js'                */
    position:fixed;
    width:auto;
    display:none;
    border:none;
    padding-top: 45px;     /* Header =  55px = margin-top (10) + padding-top (45)                   */
  }
}

/* TABLE MIT STANDARD-LAYOUT: Zeilen abwechselnd gefaerbt + Zeile highlight sobald Corsor drueber ist */

table.table_layout {
  margin-top: 10px;
}

table.table_layout tr {
  border-bottom: #fff 1px solid;
}

table.table_layout tr:nth-child(even) {
  background: #f5f5f5;
}

table.table_layout tr:nth-child(odd) {
  background: #FFF;
}

table.table_layout tbody tr:hover {
  background-color: #cccccc;
}

table.table_layout th {
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
  padding-top: 10px;
}

table.table_layout td, table.table_layout th {
  padding: 5px;
}

table.table_layout tr td:first-child, table.table_layout tr th:first-child {
}

table.table_layout td.title, table.table_layout th.title {
  font-weight: 600;
}

table.table_layout th small {
  color: #fff;
  font-weight: 600;
}

table.table_layout tbody tr.trenner {
  border-bottom: #888 2px solid;
}
/* TABLE MIT PADDING-LAYOUT: Entspricht 'cellpadding="6"' */

table.table_padding {
  border-collapse: collapse; 
  line-height: 22px;
  margin-top: 10px;
}

table.table_padding th {
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
}

table.table_padding td, table.table_padding th {
  padding: 2px 6px;
}

@media only screen and (max-width: 991px) {
  table.table_padding td, table.table_padding th {
    padding: 2px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_padding td, table.table_padding th {
    padding: 2px 3px;
  }
}

/* TABLE MIT Linien-LAYOUT: Horizontale Linie nach jeder Zeile */

table.table_lines {
  border-collapse: collapse; 
  line-height: 22px;
  margin-top: 10px;
}
    
table.table_lines tbody tr, table.table_lines thead th {
  border-bottom: #888 1px solid;
}

table.table_lines tbody tr.trenner {
  border-bottom: #888 2px solid;
  padding: 0px 10px;
}

table.table_lines th {
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
}

table.table_lines td, table.table_lines th {
  padding: 5px 10px;
}

@media only screen and (max-width: 991px) {
  table.table_lines td, table.table_lines th {
    padding: 2px 10px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_lines td, table.table_lines th {
    padding: 0px 10px;
  }
}

table.table_lines td.title, table.table_lines th.title {
  font-weight: 600;
}

table.table_lines tr.tag {
  background:#ffffff;
}

table.table_lines tr.abend {
  background:#aaffff; /* Max schlaegt '#ddecf3;' vor */
}

table.table_lines tr.nacht {
  background:#5af0f0;
}

table.table_lines tr.kernnacht {
  background:#3ae0e0;
}

/* TABLE 'ohne Alles' */

table.table_neutral {
  border-collapse: none; 
  line-height: 22px;
  margin-top: 10px;
}
    
table.table_neutral td {
  line-height: 22px;
  padding: 6px 6px;
}

@media only screen and (max-width: 991px) {
  table.table_neutral td {
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_neutral td {
    padding: 6px 6px;
  }
}

table.table_neutral th {
  line-height: 22px;
  padding: 6px 6px 6px 6px;
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
}

@media only screen and (max-width: 991px) {
  table.table_neutral th {
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_neutral th {
    padding: 6px 6px;
  }
}

table.table_neutral tr.trenner, table.table_neutral td.trenner {
  line-height: 2px;
  border-bottom: #888 2px solid;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 1px;
  vertical-align: middle;
}

/* TABLE 'ohne Alles', aber Zeilen abwechselnd gefaerbt */

table.table_neutral_lines {
  border-collapse: none; 
  line-height: 22px;
  margin-top: 10px;
}
    
table.table_neutral_lines td {
  line-height: 22px;
  padding: 6px 6px;
}

@media only screen and (max-width: 991px) {
  table.table_neutral_lines td {
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_neutral_lines td {
    padding: 6px 6px;
  }
}

table.table_neutral_lines tr:nth-child(even) {
  background: #f5f5f5;
}

table.table_neutral_lines tr:nth-child(odd) {
  background: #FFF;
}

table.table_neutral_lines th {
  line-height: 22px;
  padding: 6px 6px;
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
}

@media only screen and (max-width: 991px) {
  table.table_neutral_lines th {
    padding: 6px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_neutral_lines th {
    padding: 6px 6px;
  }
}

table.table_neutral_lines tr.trenner, table.table_neutral_lines td.trenner {
  line-height: 2px;
  border-bottom: #888 2px solid;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 1px;
  vertical-align: middle;
}

/* TABLE für Balkendiagramme */

table.table_balken {
  border-collapse: none; 
  line-height: 0px;
  margin-top: 0px;
  border-spacing: 0px;
}
    

table.table_balken td {
  padding: 0px 0px;
}

@media only screen and (max-width: 991px) {
  table.table_balken td {
    padding: 0px 0px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_balken td {
    padding: 0px 0px;
  }
}

table.table_balken th {
  padding: 0px 0px 0px 0px;
}

@media only screen and (max-width: 991px) {
  table.table_balken th {
    padding: 0px 0px 0px 0px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_balken th {
    padding: 0px 0px 0px 0px;
  }
}

/* TABLE ganz speziell nur für das Regions-Menu */

table.table_regmen {
  border-collapse: collapse; 
  line-height: 22px;
  margin-top: 10px;
}

table.table_regmen td {
  padding: 8px 6px;
}

@media only screen and (max-width: 991px) {
  table.table_regmen td {
    padding: 2px 6px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_regmen td {
    padding: 2px 3px;
  }
}

table.table_regmen th {
  padding: 0px 6px 8px 6px;
}

@media only screen and (max-width: 991px) {
  table.table_regmen th {
    padding: 0px 3px 8px 3px;
  }
}

@media only screen and (max-width: 767px) {
  table.table_regmen th {
    padding: 0px 3px 4px 3px;
  }
}


@media print {
  main {
    margin-top: 0 !important;
  }
}

.small {
  font-size:     16px;
  line-height:   20px;
}

@media only screen and (max-width: 991px) {
  .small {
    font-size:   14px;
    line-height: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .small {
    font-size:   12px;
    line-height: 16px;
  }
}
.Klein {     /*  Wie 'small'  */
  font-size:     16px;
  line-height:   20px;
}
@media only screen and (max-width: 991px) {
  .Klein  {
    font-size:   14px;
    line-height: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .Klein  {
    font-size:   12px;
    line-height: 16px;
  }
}

.Mittel      {
  font-size:     18px;
  line-height:   24px;
}
@media only screen and (max-width: 991px) {
  .Mittel  {
    font-size:   16px;
    line-height: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .Mittel  {
    font-size:   14px;
    line-height: 20px;
  }
}

.Std         {
  font-size:     20px;
  line-height:   28px;
}
@media only screen and (max-width: 991px) {
  .Std  {
    font-size:   18px;
    line-height: 26px;
  }
}
@media only screen and (max-width: 767px) {
  .Std  {
    font-size:   16px;
    line-height: 24px;
  }
}
big         {
  font-size:     22px;
  line-height:   30px;
}
@media only screen and (max-width: 991px) {
  big  {
    font-size:   20px;
    line-height: 28px;
  }
}
@media only screen and (max-width: 767px) {
  big  {
    font-size:   18px;
    line-height: 23px;
  }
}
.Gross         {
  font-size:     22px;
  line-height:   30px;
}
@media only screen and (max-width: 991px) {
  .Gross  {
    font-size:   20px;
    line-height: 28px;
  }
}
@media only screen and (max-width: 767px) {
  .Gross  {
    font-size:   18px;
    line-height: 23px;
  }
}
.Riesig    {
  font-size:     28px;
  line-height:   35px;
}
@media only screen and (max-width: 1199px) {
  .Riesig  {
    font-size:   25px;
    line-height: 33px;
  }
}
@media only screen and (max-width: 991px) {
  .Riesig  {
    font-size:   22px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .Riesig  {
    font-size:   19px;
    line-height: 25px;
  }
}

/* Nur wg. Altlasten. Das '<small>' steht ansonsten auf dem Index !!!*/
small {
  font-size: 17px;
  line-height: 22px;
}
@media only screen and (max-width: 991px) {
  small {
    font-size: 15px;
    line-height: 20px;
  }
}
@media only screen and (max-width: 767px) {
  small {
    font-size: 13px;
    line-height: 18px;
  }
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.top {
  vertical-align: top;
}
.middle {
  vertical-align: middle;
}
.bottom {
  vertical-align: bottom;
}

.show-scrollbar {
  _overflow: auto;
  padding-bottom: 5px;
}

.show-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.show-scrollbar::-webkit-scrollbar-thumb {
  -webkit-border-radius: 8px;
          border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
}

@font-face {
  font-family: 'IconFontDFLD';
  src: url("../fonts/IconFontDFLD.eot?e8ddp2");
  src: url("../fonts/IconFontDFLD.eot?e8ddp2#iefix") format("embedded-opentype"), url("../fonts/IconFontDFLD.ttf?e8ddp2") format("truetype"), url("../fonts/IconFontDFLD.woff?e8ddp2") format("woff"), url("../fonts/IconFontDFLD.svg?e8ddp2#IconFontDFLD") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"], .DFLDfont {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'IconFontDFLD' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-forum:before {
  content: '\e900';
}
.icon-add-location:before {
  content: '\e901';
}
.icon-donate:before {
  content: '\e902';
}
.icon-plane:before {
  content: '\e903';
}
.icon-sprache:before {
  content: '\e904';
}
.icon-login2:before {
  content: '\e905';
}
.icon-pfeil-down:before {
  content: '\e906';
}
.icon-pfeil-up:before {
  content: '\e907';
}
.icon-drop-down:before {
  content: '\e908';
}
.icon-drop-up:before {
  content: '\e909';
}
.icon-close:before {
  content: '\e90a';
}
.icon-menu:before {
  content: '\e90b';
}
.icon-check:before {
  content: '\e90c';
}
.icon-date:before {
  content: '\e90d';
}
.icon-time:before {
  content: '\e90e';
}
.icon-warning:before {
  content: '\e90f';
}
.icon-right:before {    /* Wird z.Zt. nicht benutzt */
  content: '\e910';
}
.icon-left:before {     /* Wird z.Zt. nicht benutzt */
  content: '\e911';
}
.icon-zoom-out:before { /* ACHTUNG: An Stelle von 'icon-zoom-out' benutze ich 'icon-circle-remove' */
  content: '\e912';
}
.icon-zoom-in:before {  /* ACHTUNG: An Stelle von 'icon-zoom-in'  benutze ich 'icon-circle-add' */
  content: '\e913';
}
.icon-circle-remove:before {
  content: '\e914';
}
.icon-circle-add:before {
  content: '\e915';
}
.icon-Abflug:before {
  content: '\e916';
}
.icon-Ankunft:before {
  content: '\e917';
}
.icon-help:before {
  content: '\e918';
}
.icon-unbekannt:before {
  content: '\e918';
}
.icon-pfeil-ll:before {
  content: '\e919';
}
.icon-pfeil-l:before {
  content: '\e91a';
}
.icon-pfeil-r:before {
  content: '\e91b';
}
.icon-pfeil-rr:before {
  content: '\e91c';
}
.icon-mitglied-werden:before {
  content: '\e91d';
}
.icon-clock:before {
  content: '\e91e';
}
.icon-login:before {
  content: '\e91f';
}
.icon-logout:before {
  content: '\e920';
}
.icon-search:before {
  content: '\e925';
}

.back-link {
  display: inline-block;
  color: #426375;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 20px;
  margin-bottom: 0px;
}

.big-numbers .col-2 {
  padding-top: 40px;
}
@media only screen and (max-width: 991px) {
  .big-numbers .col-2 {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .big-numbers .col-2 {
    padding-top: 20px;
  }
}

.big-numbers__number {
  display: block;
  font-size: 50px;
  font-weight: 300;
  color: #549bbf;
  text-align: center;
  line-height: 34px;
}
@media only screen and (max-width: 991px) {
  .big-numbers__number {
    font-size: 40px;
    line-height: 30px;
  }
}

/* Grosser Button */
.button_gross{
  background-color: #549bbf;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 10px 35px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  -webkit-border-radius: 25px;
          border-radius: 25px;
  cursor: pointer;
  -webkit-box-sizing: initial;
          box-sizing: initial;
  font-size:inherit;
  font-family: Open Sans, Arial, sans-serif;
  margin-top: 20px;
}

@media only screen and (max-width: 991px) {
  .button_gross {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .button_gross {
    padding: 5px 10px;
    margin-top: 5px;
  }
}
.button_gross:hover {
  background-color: #5caad2;
  outline: none;
}
.button_gross:disabled {
  background-color: #eee;
  color:#bbb;
  cursor: default;
}

.button_gross:focus, .button_gross:active, .button_gross:hover {
  outline: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

.button_gross--gray {
  background-color: #a8a7a5;
}

.button_gross--gray:hover {
  background-color: #c0bfbc;
}

.button_gross--hollow {
  border: 2px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
  -webkit-border-radius: 28px;
          border-radius: 28px;
}

@media only screen and (max-width: 991px) {
  .button_gross--hollow {
    -webkit-border-radius: 23px;
            border-radius: 23px;
  }
}

/* Mittelgrosser Button - Genauso gross wie die Radio-Buttons (Default) */
.button {
  background-color: #549bbf;
  color: #fff;
  line-height: 28px;
  font-weight: 600;
  border: none;
  padding: 0 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  height: 30px;
  -webkit-border-radius: 15px;
          border-radius: 15px;
  cursor: pointer;
  -webkit-box-sizing: initial;
          box-sizing: initial;
  font-family: Open Sans, Arial, sans-serif;
  margin-top: 0px;
}

@media only screen and (max-width: 1199px) {
  .button {
    line-height: 28px;
    height: 28px;
    -webkit-border-radius: 15px;
            border-radius: 15px;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 991px) {
  .button {
    line-height: 26px;
    height: 26px;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .button {
    line-height: 24px;
    height: 24px;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    margin-top: 6px;
  }
}
.button:disabled {
  background-color: #a8a7a5;
}
.button:hover {
  background-color: #5caad2;
  outline: none;
}

.button:focus, .button:active, .button:hover {
  outline: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

.button--gray {
  background-color: #a8a7a5;
}

.button--gray:hover {
  background-color: #c0bfbc;
}

.button--hollow {
  border: 3px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
  -webkit-border-radius: 28px;
          border-radius: 28px;
}

/* Mini-Button - nur fuer die Hoehenlegende bei den Flugspurbildern */
.button_klein {
  background-color: #549bbf;
  color: #fff;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  padding: 0 5px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  height: 20px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  cursor: pointer;
  -webkit-box-sizing: initial;
          box-sizing: initial;
  font-family: Open Sans, Arial, sans-serif;
  margin-top: 0px;
}
.button_klein:disabled {
  background-color: #a8a7a5;
}
.button_klein:hover {
  background-color: #5caad2;
  outline: none;
}

.button_klein:focus, .button_klein:active, .button_klein:hover {
  outline: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

.button_klein--gray {
  background-color: #a8a7a5;
}

.button_klein--gray:hover {
  background-color: #c0bfbc;
}

.button_klein--hollow {
  border: 3px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
  -webkit-border-radius: 28px;
          border-radius: 28px;
}

@media only screen and (max-width: 991px) {
  .button_klein--hollow {
    -webkit-border-radius: 23px;
            border-radius: 23px;
  }
}

.icon-button {
  color: #549bbf;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  padding:5px;
}

.icon-button-NoRadius {
  color: #549bbf;
  -webkit-border-radius: 0px;
          border-radius: 0px;
  padding:5px;
}

.icon-button:hover {
  background-color: #549bbf;
  color: #fff;
  outline: none;
  text-decoration:none;
}

.icon-button:focus, .button:active, .button:hover {
  outline: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  text-decoration:none;
}

.icon-button.disabled {
  color: #a8a7a5;
}

.icon-button.disabled:hover {
  color: #a8a7a5;
  background-color: #fff;
}

.dropdown {
  background-color: inherit;
}

.menu_intern__item__link.dropdown__toggle, .menu__item__link.dropdown__toggle, .menu_vorstand__item__link.dropdown__toggle {
  cursor:default;
}

.dropdown__menu {
  display: none;
  list-style: none;
  text-align: left;
  z-index: 999;
  background-color: inherit;
  padding: 0;
}

@media only screen and (min-width: 992px) {
  .dropdown__menu {
    -webkit-box-shadow: 0 0 10px darkgray;
            box-shadow: 0 0 10px darkgray;
    position: absolute;
    top: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .dropdown__menu {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@media only screen and (min-width: 992px) {
  .dropdown__menu:hover {
    display: block;
  }
}

.dropdown__menu--right {
  right: 0;
}

.dropdown__menu__item {
  list-style: none;
  width: 100%;
}

.dropdown__menu__item:first-child {
  margin-top: 0px;
}

.dropdown__menu__item:last-child {
  margin-bottom: 8px;
}

.dropdown__menu__item__link {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-bottom: 0px;
  padding-left: 30px;
  padding-right: 30px;
  text-decoration: none;
  line-height: 40px;
  color: #5c5a55;
}

@media only screen and (max-width: 991px) {
  .dropdown__menu__item__link {
    line-height: 30px;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 3px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

.dropdown__menu__item__link:focus, .dropdown__menu__item__link:hover {
  text-decoration: none;
  background-color: #549bbf;
  color: #ffffff;
}

.dropdown__toggle {
  height: 100%;
  vertical-align: bottom;
}

.dropdown__toggle:after {
  content: '\e908';
  font-family: 'IconFontDFLD';
  position: relative;
  top: 3px;
}

@media only screen and (max-width: 991px) {
  .dropdown__toggle:after {
    display: inline-block;
    float: right;
    position: static;
    font-size: 28px;
  }
}

@media only screen and (min-width: 992px) {
  .dropdown__toggle:hover + .dropdown__menu {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .dropdown__toggle:hover:after, .dropdown__toggle:focus:after, .dropdown__toggle:active:after {
    content: '\e909';
  }
}

.dropdown--open .dropdown__toggle {
  opacity: 1;
}

.dropdown--open .dropdown__toggle:after {
  content: '\e909';
}

@media only screen and (max-width: 991px) {
  .dropdown--open .dropdown__menu {
    display: block;
  }
}

.footer {
  text-align: center;
  background-color: #549bbf;
  color: #ffffff;
  padding-bottom: 20px;
}

@media print {
  .footer {
    display: none;
  }
}

@media only screen and (max-width: 1199px) {
  .footer {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .footer {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.footer h1 {
  padding-top: 15px;
  color: #ffffff;
  font-weight: normal;
}

.footer a {
  text-decoration: underline;
  color: #ffffff;
  opacity: 1;
}

.footer a:hover {
  opacity: 0.75;
}

.footer__content {
  padding-top: 0px;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media only screen and (max-width: 767px) { /* (max-width: 1199px) { */
  .footer__content {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.footer__subline {
  font-size: 17px;
  padding-top: 10px;  /* War vorher 40px */
  max-width: 900px;
}

.footer__row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.footer__sidenote {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

@media only screen and (max-width: 1199px) {
  .footer__sidenote {
    padding-top: 0px;
  }
}

.footer_impressum {
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
}

@media print {
  .footer_impressum {
    display: none;
  }
}

@media only screen and (max-width: 1199px) {
  .footer_impressum {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .footer_impressum {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .footer_impressum {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.footer_impressum a {
  text-decoration: none;
  color: #000000;
  opacity: 1;
}

.footer_impressum a:hover {
  opacity: 0.5;
}

.footer_impressum__content {
  padding-top: 40px;
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media only screen and (max-width: 1199px) {
  .footer_impressum__content {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.form {
  background-color: #0; /* #f5f5f5; */
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.form__inner {         /* Nur für 'echte' Forumlare / Nie bei meinen normalen Eingabeformularen        */
  margin: 0 auto 0 0;
  max-width: 800px;   /* Genauso breit wie der Container -> Lieber nicht. Ansonsten wird es sehr breit */
}

.form__inner input, .form__inner select {
  width: 100%;
}

@media only screen and (max-width: 991px) {
  .form__inner {
    max-width: 80%;
  }
}

@media only screen and (max-width: 767px) {
  .form__inner {
    max-width: 100%;
  }
}

.form fieldset {    /* Das 'fieldset'-Tag sorgt dafuer, dass die Eingabefelder immer max. Breite haben. */
  border: none;     /* D.h. für mich: 'fieldset' ist tabu                                               */
  padding-top: 10px;/* Gedacht ist es um einen Rahmen um die Eingabeelemente zu machen                  */
}

.form label {
  display: inline-block;
  padding-top: 5px;
  cursor: pointer;
}

.form input {
  display: inline-block;
}

.form input::-webkit-input-placeholder {
  color: #adacaa;
  font-style: italic;
}

.form input::-moz-placeholder {
  color: #adacaa;
  font-style: italic;
}

.form input:-ms-input-placeholder {
  color: #adacaa;
  font-style: italic;
}

.form input::placeholder {
  color: #adacaa;
  font-style: italic;
}

.form input[disabled] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form input[type="text"], .form input[type="date"], .form input[type="time"], .form input[type="password"], .form input[type="number"], .form input[type="email"] {
  -webkit-border-radius: 2px;
          border-radius: 2px;
  border: 1px solid #adacaa;
  font-size: inherit;
  font-family: inherit;
  height: 40px;
  padding: 5px;
}

@media only screen and (max-width: 1199px) {
  .form input[type="text"], .form input[type="date"], .form input[type="time"], .form input[type="password"], .form input[type="number"], .form input[type="email"] {
    height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .form input[type="text"], .form input[type="date"], .form input[type="time"], .form input[type="password"], .form input[type="number"], .form input[type="email"] {
    height: 30px;
  }
}

.date-input input[type="text"] {
  padding-right:15px;
}

.form input[type="text"].form__error, .form input[type="date"].form__error, .form input[type="time"].form__error , .form input[type="number"].form__error , .form input[type="email"].form__error  {
  border-color: #d90000;
}

.form textarea {
  height: 200px;
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  font-family: inherit;   /* Das ist mein Vorschlag / Im Original ist der Eingabefont ein fixed Font -> Ist gut  */
  padding: 5px;
  border-color: #adacaa;
}

@media only screen and (max-width: 991px) {
  .form textarea {
    padding: 2px 5px;
  }
}

.form textarea.form__error {
  border-color: #d90000;
}

.form select {
  background: #ffffff;
  border: 1px solid #adacaa;
  -webkit-border-radius: 2px;
          border-radius: 2px;
  line-height: inherit;
  padding: 0px 5px;
  padding-right: 35px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: -25px;  /* QWER: Original: -25px In Firefox kleben aber die 3 rechten Drop-Boxen im Beispiel "Beispiel einer 1-zeiligen 'form'" total aufeinander */
  /* -25px passt. Ich habe es jetzt anders geloest */
  font-size: inherit;
  font-family: inherit;
  height: 40px;
  color: #5c5a55;
  cursor: pointer;
}

@media only screen and (max-width: 1199px) {
  .form select {
    height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .form select {
    height: 30px;
    padding-right: 30px;
  }
}

.form select option {
  color: #5c5a55;
}

.form select.form__error {
  border-color: #d90000;
}

.form select:focus {
  font-size: inherit;
}

.form select:disabled {
  color: #adacaa;
}

.form select::-ms-expand {
  display: none;
}

.form .select-wrapper {           /* Setzt den 'Ausklapp-Pfeil' bei Select-Boxen */
  position: relative;
  white-space: nowrap;
}

.form .select-wrapper.einzeilig { /* Wie 'select-wrapper' aber für 1-zeilige Anwendungen */
  display: inline-block;
  padding-right:20px;
}

/* Baut am rechten Rand von DropDownBox den Pfeil nach unten ein. */
.form .select-wrapper:after { 
  content: '\e908';
  font-family: 'IconFontDFLD';
  pointer-events: none;
  width: 0;
  color: #adacaa;
  font-size: 40px;
  line-height: 38px;
  position: absolute;
  -webkit-transform: translateX(-16px);
      -ms-transform: translateX(-16px);
          transform: translateX(-16px);
}

@media only screen and (max-width: 1199px) {
  .form .select-wrapper:after { 
    font-size: 36px;
    line-height: 34px;
  -webkit-transform: translateX(-13px);
      -ms-transform: translateX(-13px);
          transform: translateX(-13px);
  }
}

@media only screen and (max-width: 991px) {
  .form .select-wrapper:after { 
    font-size: 34px;
    line-height: 30px;
  -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
          transform: translateX(-10px);
  }
}

.form input[type="text"]:focus, .form input[type="number"]:focus, .form input[type="email"]:focus, .form select:focus, .form textarea:focus {
  -webkit-appearance: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.form input[type="radio"] {
  display: none;
}

.form input[type="radio"] ~ label {
  position: relative;
  cursor: pointer;
  padding-top: 0px;
  line-height: 24px;
  vertical-align: top;
  display: inline-block;
}

.form input[type="radio"] ~ label > .radio {
  display: inline-block;
  border: 1px solid #adacaa;
  background-color: #ffffff;
  width: 26px;
  height: 26px;
  line-height: 0;
  margin-right: 10px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: relative;
  vertical-align: top;
}

.form input[type="radio"]:disabled ~ label > .radio {
  background-color: #f5f5f5;
}

.form__group.disabled label {
  color:#adacaa;
}
.form__group.disabled input[type="radio"] ~ label {
  cursor:default;
}

.form input[type="radio"]:checked ~ label > .radio:before {
  content: ' ';
  display: inline-block;
  border-color: #5c5a55;
  background-color: #5c5a55;
  width: 12px;
  height: 12px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media only screen and (max-width: 991px) {
  .form input[type="radio"] ~ label > .radio {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .form input[type="radio"]:checked ~ label > .radio:before {
    width: 10px;
    height: 10px;
  }
}

.form input[type="checkbox"] {
  display: none;
}

/*  QWER: Von mir analog zum Radio-Button neu eingefuegt, damit ich auch Checkboxen disablen kann.
          Funktioniert aber nicht !!! */
/*
.form input[type="checkbox"]:disabled ~ label > .checkbox {
  background-color: #f5f5f5;
}
.form__group.disabled input[type="checkbox"] ~ label {
  cursor:default;
}
*/

/* So gehts: */
.form input[type="checkbox"]:disabled ~ label > .check {
  background-color: #f5f5f5;
}

.form__group.disabled input[type="checkbox"] ~ label {
  cursor:default;
}


.form input[type="checkbox"] ~ label {
  position: relative;
  cursor: pointer;
  padding-top: 0px;
  line-height: 24px;
  vertical-align: top;
  display: inline-block;
}

.form input[type="checkbox"] ~ label > .check {
  content: ' ';
  display: inline-block;
  border: 1px solid #adacaa;
  background-color: #ffffff;
  width: 26px;
  height: 26px;
  line-height: 0;
  margin-right: 10px;
  position: relative;
  vertical-align: top;
  -webkit-border-radius: 2px;
          border-radius: 2px;
}

.form input[type="checkbox"]:checked ~ label > .check {
  background-color: #5c5a55;
}

.form input[type="checkbox"]:checked ~ label > .check:before {
  content: '\e90c';
  font-family: 'IconFontDFLD';
  display: inline-block;
  border-color: #e0e0e0;
  background-color: #d0d0d0;
  color: #ffffff;
  width: 100%;
  text-align: center;
  line-height: 100%;
  font-size: 24px;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media only screen and (max-width: 991px) {
  .form input[type="checkbox"] ~ label > .check {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .form input[type="checkbox"]:checked ~ label > .check:before {
    font-size: 18px;
  }
}

.form__error-message {
  color: #d90000;
  display: block;
}

.form__group {
  /* width: 100%;   Ist dieses Width=100% ein Problem? -> JA */
}

.date-input {
/* Warum ich 'display: inline-block;' eingefuegt habe:

   1. Naeherung:
      <div class="inline-block">
        <a href="#" class="icon-button" title="24h zurück">&#xe919;</a>
        <div class="date-input">
          <input onChange="location='#?D='+form1.D.value" type="text" name="D" id="Datum" value="25.03.2017" size="8" maxlength="10">
          <i class="date-input__icon icon-date js-picker-toggle"></i><div class="date-input__container"></div>
        </div>
        <a class="icon-button disabled" title="24h vorw&auml;rts">&#xe91c;</a>
      </div>
      Ergebnis: Unerwünschter Zeilenumbruch nach Datumseingabefeld

   2. Näherung:
      <div class="inline-block">
        <a href="#" class="icon-button" title="24h zurück">&#xe919;</a>
        <div class="date-input inline-block">
          <input onChange="location='#?D='+form1.D.value" type="text" name="D" id="Datum" value="25.03.2017" size="8" maxlength="10">
          <i class="date-input__icon icon-date js-picker-toggle"></i><div class="date-input__container"></div>
        </div>
        <a class="icon-button disabled" title="24h vorw&auml;rts">&#xe91c;</a>
      </div>
      Ergebnis: Abstand zwischen Datumseingabefeld und Pfeil/Rechts zu groß, wg. geschachtelter Klasse 'inline-block'
                (zweimal 'margin-right: 20px;)

   3. Näherung:
      <div class="inline-block">
        <a href="#" class="icon-button" title="24h zurück">&#xe919;</a>
        <div class="date-input inline-block" style="margin-right: 0px;"> -->
        <div class="date-input">
          <input onChange="location='#?D='+form1.D.value" type="text" name="D" id="Datum" value="25.03.2017" size="8" maxlength="10">
          <i class="date-input__icon icon-date js-picker-toggle"></i><div class="date-input__container"></div>
        </div>
        <a class="icon-button disabled" title="24h vorw&auml;rts">&#xe91c;</a>
      </div>
      Ergebnis: OK, aber in der Anwendung sehr kompliziert

   Das eingefügte 'display: inline-block;' löst das Problem si, dass Variante 1. problemlos funktioniert
*/
/*  display: inline-block; Von mir eingefügt, wg. der Problematik in "Beispiel einer 1-zeiligen 'form'" */
/* MAX: Nicht generell, da ansonsten in der 'echten' Form was kaputt geht */
  position: relative;
}

.date-input__icon {
  cursor: pointer;
  color: #adacaa;
  display: inline-block;
  font-size: 28px;
  line-height: 40px;
  padding-right: 5px;
  position: absolute;
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%, -100%);
      -ms-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}

@media only screen and (max-width: 1199px) {
  .date-input__icon {
    font-size: 26px;
    line-height: 36px;
  }
}

@media only screen and (max-width: 991px) {
  .date-input__icon {
    font-size: 22px;
    line-height: 32px;
  }
}

.date-input__container {
  position: absolute;
  z-index: 9999;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding-top: 10px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  z-index: 996;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

@media print {
  .header {
    display: none;
  }
}

.header__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  .header__logo-wrapper {
    z-index: 999;
  }
}

.header__logo {
  padding: 13px 0 8px;
}

@media only screen and (max-width: 991px) {
  .header__logo {
    padding: 6px 0 10px;
  }
}

@media only screen and (max-width: 767px) {
  .header__logo {
    padding-bottom: 10px;
  }
}

.header__logo img, .header__logo svg {
  height: 50px;
}

@media only screen and (max-width: 991px) {
  .header__logo img, .header__logo svg {
    height: 23px;
  }
}

.header__subline {
  display: block;
  padding-bottom: 16px;
}

@media only screen and (max-width: 991px) {
  .header__subline {
    display: none;
  }
}

.icon-logo {
  display: inline-block;
  width: 80px;             /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
  height: 80px;            /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80px;  /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
      -ms-flex: 0 0 80px;  /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
          flex: 0 0 80px;  /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
  margin-right: 40px;
}

@media only screen and (max-width: 767px) {
  .icon-logo {
    margin: 0 auto;
  }
}

.footer__content .icon-logo {
	margin-top:40px;
}

.icon-logo__icon {
  display: block;
  width: 100%;
  line-height: 80px;       /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
  background-color: #426375;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  color: #ffffff;
  font-size: 50px;        /* Ich habe das Icon nochmal kleiner gemacht (Von 70px auf 50px) */
  text-align: center;
}

.section--teaser .icon-logo {
  width: 120px;             
  height: 120px;            
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 120px;  
      -ms-flex: 0 0 120px;  
          flex: 0 0 120px;  
  margin-left:30px;
}
.section--teaser .icon-logo__icon {
  width: 100%;
  line-height: 120px;       
  font-size: 75px;        
}
@media only screen and (max-width: 1199px) {
  .section--teaser .icon-logo {
    margin-left:15px;
  }
}
@media only screen and (max-width: 991px) {
  .section--teaser .icon-logo {
    width: 70px;             
    height: 70px;            
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 70px;  
        -ms-flex: 0 0 70px;  
            flex: 0 0 70px;  
    margin:0 auto;
  }
  .section--teaser .icon-logo__icon {
    width: 100%;
    line-height: 70px;       
    font-size: 40px;        
  }
}

.icon-logo--inverted .icon-logo__icon {
  background-color: #ffffff;
  color: #426375;
}

.layer-image {
  width: 100%;
  position: relative;
/* margin: 20px auto; */
  margin-top: 10px;
  margin-bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

.layer-image img {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  display: block;
}

.layer-image img:not(:first-child) {
  position: absolute;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.inline-block {    /* Dient dazu mehrere 'div's in einer Zeile zu halten */
  display: inline-block;
  margin-right:25px;
  margin-top:10px;
}

@media only screen and (max-width: 1199px) {
  .inline-block {
    margin-right:20px;
  }
}

@media only screen and (max-width: 991px) {
  .inline-block {
    margin-right:15px;
  }
}

@media only screen and (max-width: 767px) {
  .inline-block {
    margin-right:10px;
    margin-top:5px;
  }
}

/*  spalten fliegt raus und wird durch #inline-block' ersetzt
.spalten {
  display: inline-block;
  margin-right: 10px;
  padding: 0 5px;
  margin-bottom: 10px;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  color: #000000;
}
*/

.legend {
  display: inline-block;
  margin-right: 10px;
  padding: 0 5px;
  margin-top: 10px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
}
.legend.small{
  font-size: 10px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 5px;
  margin-right: 5px;
}

.menu {
  text-align: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  bottom: 0;
  background-color: #ffffff;
}

@media only screen and (max-width: 991px) {
  .menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.menu__item {
  margin-left: 40px;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
}

.menu__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .menu__item {
    margin-left: 0;
    margin-bottom: 8px;
    display: block;
  }
}

.menu__item__link {
  display: inline-block;
  text-decoration: none;
  color: #5c5a55;
  padding-bottom: 12px;
  border-bottom: 4px solid transparent;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .menu__item__link {
    padding: 0 18px;
    border-bottom: none;
    border-left: 4px solid transparent;
    width: 100%;
    line-height: 40px;
  }
}

.menu__item__link:focus, .menu__item__link:active, .menu__item__link:hover {
  text-decoration: none;
}

.menu__item:hover .menu__item__link, .menu__item:focus .menu__item__link, .menu__item:active .menu__item__link {
  border-color: #549bbf;
  opacity: 1;
}

.modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  color: #333333;
}

.modal__inner {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  padding: 80px 20px 20px 20px;
  background-color: #ffffff;
  max-width: 1200px;    /* Max. Containerbreite */
  margin-left: auto;
  margin-right: auto;
  max-height: 80vh;
}

@media only screen and (max-width: 1199px) {
  .modal__inner {
    max-width: 100%;
    margin-left: 30px;
    margin-right: 30px;
    left: 0;
    width: initial;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

@media only screen and (max-width: 991px) {
  .modal__inner {
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__inner {
    max-width: 1000px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

.modal__content {
  width: 100%;
  max-height: 60vh;
  overflow-y: scroll;
}

.modal__close {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: auto;
  width: 50px;
  line-height: 50px;
  font-size: 50px;
}

.modal__close:hover, .modal__close:focus {
  text-decoration: none;
  cursor: pointer;
}

.navigation {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.navigation__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
/*  height: 100%; Diese Anweisung fuehrt zu einer sehr kleinen Hoehe der scrollable list im dropdown des Burger-Menüs bei Apples Safari (nur etwa 1 listitem hoch) */
}

@media only screen and (max-width: 991px) {
  .navigation__content {
    display: none;
    min-width: 300px;
  }
}

.navigation__toggle {
  display: none;
  height: 36px;
  width: 36px;
  line-height: 36px;
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  .navigation__toggle {
    display: block;
    text-align: right;
  }
  .navigation__toggle:before {
    content: '\e90b';
    font-family: 'IconFontDFLD' !important;
    vertical-align: top;
    line-height: 36px;
    font-size: 36px;
  }
}

@media only screen and (max-width: 991px) {
  .navigation--open {
    max-height: 100%;
    z-index: 998;
    background-color: #ffffff;
    position: fixed;
    right: 0;
    top: 0;
    margin: 0 0 auto;
  }
  .navigation--open .navigation__content {
    display: block;
    overflow-y: scroll;
    padding-top: 20px;
  }
  .navigation--open .navigation__toggle {
    margin: 10px 20px 0 auto;
    height: 36px;
    width: 36px;
    line-height: 36px;
  }
}

@media only screen and (max-width: 991px) and (max-width: 1199px) {
  .navigation--open .navigation__toggle {
    margin-right: 30px;
  }
}

@media only screen and (max-width: 991px) and (max-width: 991px) {
  .navigation--open .navigation__toggle {
    margin-right: 20px;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 991px) and (max-width: 767px) {
  .navigation--open .navigation__toggle {
    margin-right: 10px;
    margin-bottom: 13px;
  }
}

@media only screen and (max-width: 991px) {
  .navigation--open .navigation__toggle:before {
    content: '\e90a';
    vertical-align: top;
    line-height: 36px;
    font-size: 36px;
  }
}

@media only screen and (max-width: 767px) {
  .navigation--open {
    width: 100%;
    height: 100%;
  }
}

.navigation-shadow {
  position: fixed;
  z-index: 997;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  color: #333333;
  -webkit-transition: visibility 1s linear, opacity 1s;
  transition: visibility 1s linear, opacity 1s;
}

@media only screen and (max-width: 767px) {
  .navigation-shadow {
    display: none;
    -webkit-transition: none;
    transition: none;
  }
}

@media only screen and (min-width: 992px) {
  .navigation-shadow {
    display: none;
    -webkit-transition: none;
    transition: none;
  }
}

.section {
  margin: 0 auto;
}
main .section:first-child {
  padding-top: 180px;             /* Abstand vom oberem Rand bei großem  Desktop / Achtung: Bei Aenderung auch a.anchor anpassen !!! */
}
@media only screen and (max-width: 1199px) {
  main .section:first-child {
    padding-top: 160px;           /* Abstand vom oberem Rand bei kleinem Desktop / Achtung: Bei Aenderung auch a.anchor anpassen !!! */
  }
}
@media only screen and (max-width: 991px) {
  main .section:first-child {
    padding-top: 80px;            /* Abstand vom oberem Rand bei Tablet          / Achtung: Bei Aenderung auch a.anchor anpassen !!! */
  }
}

.section--highlight {
  background-color: #f5f5f5;
  padding-bottom:50px;
  padding-top:10px;
  margin-top:20px;
  margin-bottom:10px;
}
.section--highlight2 {
  background-color: #f5f5f5;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}
@media only screen and (max-width: 991px) {
  .section--highlight2 {
    background-color: #f5f5f5;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

.section--gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
  background-image: -webkit-linear-gradient(#fff, #f5f5f5);
  background-image: linear-gradient(#fff, #f5f5f5);
  padding-top: 30px;
  padding-bottom: 50px;
}

.section--teaser {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media only screen and (max-width: 991px) {
  .section--teaser {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .section--teaser {
    padding-top: 10px;
  }
}

.section__image {
  margin: 0 auto;
  max-width: 100%;
  display: block;
}

.section__image--vertical-middle {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media only screen and (min-width: 768px) {
  .section__image-text h2 {
    padding-top: 0;
  }
}

.section--folded__opener {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 10px 15px;
  background-color: #549bbf;
  line-height: 28px;

  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1px;
}

@media only screen and (max-width: 1199px) {
  .section--folded__opener {
    line-height: 28px;
  }
}

@media only screen and (max-width: 991px) {
  .section--folded__opener {
    line-height: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .section--folded__opener {
    line-height: 24px;
  }
}

.section--folded__opener:after {
  content: '\e906';
  font-family: 'IconFontDFLD' !important;
  font-size: 30px;
  display: inline-block;
}

.section--folded__opener:hover {
  text-decoration: none;
  background-color: #5caad2;
}

.section--folded__opener--open {
  margin-bottom: 0;
}

.section--folded__opener--open:after {
  content: '\e907';
}

.section--folded__opener--open + .section--folded__content {
  display: block;
}

.section--folded__content {
  padding: 0px;
  display: none;
}

.table-container {
  width: 100%;
  overflow-y: auto;
}

.toolbar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0px;
  text-align: right;
  background-color: #ffffff;
  margin-top: 1px;
}

@media only screen and (max-width: 991px) {
  .toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    margin: 0;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background-color: #f5f5f5;
  }
}

.toolbar__item {
  margin-left: 40px;
  overflow: visible;
  background-color: #ffffff;
}

.toolbar__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .toolbar__item {
    margin-left: 0;
    margin-bottom: 8px;
    background-color: #f5f5f5;
  }
  .toolbar__item:first-child {
    margin-top: 20px;
  }
  .toolbar__item:last-child {
    margin-bottom: 20px;
  }
}

.toolbar__item__link {
  text-decoration: none;
  color: #5c5a55;
  line-height: 50px;
  height: 100%;
  display: inline-block;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .toolbar__item__link {
    width: 100%;
    display: inline-block;
    padding: 0 10px 0 18px;
    line-height: 40px;
  }
}

.toolbar__item__link:hover, .toolbar__item__link:active, .toolbar__item__link:focus {
  text-decoration: none;
  opacity: 1;
}

.toolbar__item__link__icon {
  margin-right: 6px;
  line-height: 28px;
  vertical-align: middle;
}


/*  ====================================================================================================  */
/*  Header fuer den internen Bereich  /  Einziger Unterschied: Andere Hintergrundfarbe                    */

.header_intern{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ddecf3;
  padding-top: 10px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  z-index: 996;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

@media print {
  .header_intern {
    display: none;
  }
}

.menu_intern {
  text-align: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  bottom: 0;
  background-color: #ddecf3;
}

@media only screen and (max-width: 991px) {
  .menu_intern {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.menu_intern__item {
  margin-left: 40px;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ddecf3;
}

.menu_intern__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .menu_intern__item {
    margin-left: 0;
    margin-bottom: 8px;
    display: block;
  }
}

.menu_intern__item__link {
  display: inline-block;
  text-decoration: none;
  color: #5c5a55;
  padding-bottom: 12px;
  border-bottom: 4px solid transparent;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .menu_intern__item__link {
    padding: 0 18px;
    border-bottom: none;
    border-left: 4px solid transparent;
    width: 100%;
    line-height: 40px;
  }
}

.menu_intern__item__link:focus, .menu_intern__item__link:active, .menu_intern__item__link:hover {
  text-decoration: none;
}

.menu_intern__item:hover .menu_intern__item__link, .menu_intern__item:focus .menu_intern__item__link, .menu_intern__item:active .menu_intern__item__link {
  border-color: #549bbf;
  opacity: 1;
}

.toolbar_intern {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0px;
  text-align: right;
  background-color: #ddecf3;
  margin-top: 1px;
}

@media only screen and (max-width: 991px) {
  .toolbar_intern {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    margin: 0;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background-color: #f5f5f5;
  }
}

.toolbar_intern__item {
  margin-left: 40px;
  overflow: visible;
  background-color: #ddecf3;
}

.toolbar_intern__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .toolbar_intern__item {
    margin-left: 0;
    margin-bottom: 8px;
    background-color: #f5f5f5;
  }
  .toolbar_intern__item:first-child {
    margin-top: 20px;
  }
  .toolbar_intern__item:last-child {
    margin-bottom: 20px;
  }
}

.toolbar_intern__item__link {
  text-decoration: none;
  color: #5c5a55;
  line-height: 50px;
  height: 100%;
  display: inline-block;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .toolbar_intern__item__link {
    width: 100%;
    display: inline-block;
    padding: 0 10px 0 18px;
    line-height: 40px;
  }
}

.toolbar_intern__item__link:hover, .toolbar_intern__item__link:active, .toolbar_intern__item__link:focus {
  text-decoration: none;
  opacity: 1;
}

.toolbar_intern__item__link__icon {
  margin-right: 6px;
  line-height: 28px;
  vertical-align: middle;
}



/*  ====================================================================================================  */
/*  Header fuer den Mitgliederbereich /  Einziger Unterschied: Andere Hintergrundfarbe                    */

.header_mitglied{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ddecf3;
  padding-top: 10px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  z-index: 996;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

@media print {
  .header_mitglied {
    display: none;
  }
}

.menu_mitglied {
  text-align: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  bottom: 0;
  background-color: #ddecf3;
}

@media only screen and (max-width: 991px) {
  .menu_mitglied {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.menu_mitglied__item {
  margin-left: 40px;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ddecf3;
}

.menu_mitglied__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .menu_mitglied__item {
    margin-left: 0;
    margin-bottom: 8px;
    display: block;
  }
}

.menu_mitglied__item__link {
  display: inline-block;
  text-decoration: none;
  color: #5c5a55;
  padding-bottom: 12px;
  border-bottom: 4px solid transparent;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .menu_mitglied__item__link {
    padding: 0 18px;
    border-bottom: none;
    border-left: 4px solid transparent;
    width: 100%;
    line-height: 40px;
  }
}

.menu_mitglied__item__link:focus, .menu_mitglied__item__link:active, .menu_mitglied__item__link:hover {
  text-decoration: none;
}

.menu_mitglied__item:hover .menu_mitglied__item__link, .menu_mitglied__item:focus .menu_mitglied__item__link, .menu_mitglied__item:active .menu_mitglied__item__link {
  border-color: #549bbf;
  opacity: 1;
}

.toolbar_mitglied {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0px;
  text-align: right;
  background-color: #ddecf3;
  margin-top: 1px;
}

@media only screen and (max-width: 991px) {
  .toolbar_mitglied {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    margin: 0;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background-color: #f5f5f5;
  }
}

.toolbar_mitglied__item {
  margin-left: 40px;
  overflow: visible;
  background-color: #ddecf3;
}

.toolbar_mitglied__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .toolbar_mitglied__item {
    margin-left: 0;
    margin-bottom: 8px;
    background-color: #f5f5f5;
  }
  .toolbar_mitglied__item:first-child {
    margin-top: 20px;
  }
  .toolbar_mitglied__item:last-child {
    margin-bottom: 20px;
  }
}

.toolbar_mitglied__item__link {
  text-decoration: none;
  color: #5c5a55;
  line-height: 50px;
  height: 100%;
  display: inline-block;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .toolbar_mitglied__item__link {
    width: 100%;
    display: inline-block;
    padding: 0 10px 0 18px;
    line-height: 40px;
  }
}

.toolbar_mitglied__item__link:hover, .toolbar_mitglied__item__link:active, .toolbar_mitglied__item__link:focus {
  text-decoration: none;
  opacity: 1;
}

.toolbar_mitglied__item__link__icon {
  margin-right: 6px;
  line-height: 28px;
  vertical-align: middle;
}


/*  ====================================================================================================  */
/*  Header fuer den Vorstands-Bereich  /  Einziger Unterschied: Andere Hintergrundfarbe                   */

.header_vorstand{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding-top: 10px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  z-index: 996;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

@media print {
  .header_vorstand {
    display: none;
  }
}

.menu_vorstand {
  text-align: right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  bottom: 0;
  background-color: #ffffff;
}

@media only screen and (max-width: 991px) {
  .menu_vorstand {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.menu_vorstand__item {
  margin-left: 40px;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
}

.menu_vorstand__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .menu_vorstand__item {
    margin-left: 0;
    margin-bottom: 8px;
    display: block;
  }
}

.menu_vorstand__item__link {
  display: inline-block;
  text-decoration: none;
  color: #5c5a55;
  padding-bottom: 12px;
  border-bottom: 4px solid transparent;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .menu_vorstand__item__link {
    padding: 0 18px;
    border-bottom: none;
    border-left: 4px solid transparent;
    width: 100%;
    line-height: 40px;
  }
}

.menu_vorstand__item__link:focus, .menu_vorstand__item__link:active, .menu_vorstand__item__link:hover {
  text-decoration: none;
}

.menu_vorstand__item:hover .menu_vorstand__item__link, .menu_vorstand__item:focus .menu_vorstand__item__link, .menu_vorstand__item:active .menu_vorstand__item__link {
  border-color: #549bbf;
  opacity: 1;
}

.toolbar_vorstand {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0px;
  text-align: right;
  background-color: #ffffff;
  margin-top: 1px;
}

@media only screen and (max-width: 991px) {
  .toolbar_vorstand {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    margin: 0;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    background-color: #f5f5f5;
  }
}

.toolbar_vorstand__item {
  margin-left: 40px;
  overflow: visible;
  background-color: #ffffff;
}

.toolbar_vorstand__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 991px) {
  .toolbar_vorstand__item {
    margin-left: 0;
    margin-bottom: 8px;
    background-color: #f5f5f5;
  }
  .toolbar_vorstand__item:first-child {
    margin-top: 20px;
  }
  .toolbar_vorstand__item:last-child {
    margin-bottom: 20px;
  }
}

.toolbar_vorstand__item__link {
  text-decoration: none;
  color: #5c5a55;
  line-height: 50px;
  height: 100%;
  display: inline-block;
  opacity: 0.75;
}

@media only screen and (max-width: 991px) {
  .toolbar_vorstand__item__link {
    width: 100%;
    display: inline-block;
    padding: 0 10px 0 18px;
    line-height: 40px;
  }
}

.toolbar_vorstand__item__link:hover, .toolbar_vorstand__item__link:active, .toolbar_vorstand__item__link:focus {
  text-decoration: none;
  opacity: 1;
}

.toolbar_vorstand__item__link__icon {
  margin-right: 6px;
  line-height: 28px;
  vertical-align: middle;
}

/*  ====================================================================================================  */
/*  Anfang:  Ueberbreite Laermgraphen                                                                     */

/*  1. Die Container (ehemals 'container--big'                                                            */
/*     ACHTUNG: In den Bild-Containern darf keinerlei Text verwendet werden. Nur Bilder sind erlaubt, da  */
/*              font-size und line-height beide auf 1px sitzen !!!                                        */

.container--24h {       /* Ueberbreiter Container fuer Laermgraph (Ganztags Ansicht) */
  max-width: 1520px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  padding: 0 0;
  font-size: 1px;
  line-height: 1px;
}
@media print {
  .container--24h{
    max-width: 100%;
  }
}

.container--2h {        /* Ueberbreiter Container fuer Laermgraph (2 Stunden Ansicht) */
  max-width: 1280px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  padding: 0 0;
  font-size: 1px;
  line-height: 1px;
}
@media print {
  .container--2h{
    max-width: 100%;
  }
}

.container--30min {     /* Ueberbreiter Container fuer Laermgraph (30 min Ansicht) */
  max-width: 1880px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  padding: 0 0;
  font-size: 1px;
  line-height: 1px;
}
@media print {
  .container--30min{
    max-width: 100%;
  }
}

.container--Kamera{    /* Ueberbreiter Container fuer Kamerabilder (864x420) */
  max-width: 864px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0;
  padding: 0 0;
}
@media print {
  .container--Kamera{
    max-width: 100%;
  }
}

.image-Kamera {
  width: 100%;
  display: block;
  overflow-x: scroll;
  _overflow: auto;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .image-Kamera {
    height: 440px;  /* Originalbild:390px / 2 + 35px fuer Legende   / Vorher: 195px */
    margin-bottom: 30px;
    margin-top: 10px;
    padding-left: 10px;
  }
}


/*  2. Die ueberbreiten Laermgraphiken  */

.image-LaermGraph {
  width: 100%;
  display: block;
  overflow-x: scroll;
  _overflow: auto;
  margin-top: 20px;
}

@media only screen and (max-width: 767px) {
  .image-LaermGraph {
    height: 230px; /* Originalbild:390px / 2 + 35px fuer Legende   / Vorher: 195px */
    margin-bottom: 30px;
    margin-top: 10px;
    padding-left: 10px;
  }
}

.image-LaermGraph__image {
  height: 100%;
  max-height: 100%;
  min-width: 100%;
  display: block;
}

@media only screen and (max-width: 767px) {
  .image-LaermGraph__image {
    height: 195px;
    max-height: 195px;
    padding-right: 10px;
    min-width: auto;
  }
}

/*  Fuer die Windrichtungs- / Betriebsrichtungsanzeige unter den Laermgraphen  */

.LaermGraphLegende--24h {
  width: 1520px;
  padding-top: 2px;
}
.LaermGraphLegende--2h {
  width: 1280px;
  padding-top: 2px;
}
.LaermGraphLegende--30min {
  width: 1880px;
  padding-top: 2px;
}

.LaermGraphLegendeStart {
  height: 5px;
  width: 40px;
}

.LaermGraphLegendeBild--24h {
  height: 5px;
  width: 30px;
}
.LaermGraphLegendeBild--2h {
  height: 5px;
  width: 300px;
}
.LaermGraphLegendeBild--30min {
  height: 5px;
  width: 1800px;
}

@media only screen and (max-width: 767px) {
  .LaermGraphLegende--24h {
    width: 760px;
  }
  .LaermGraphLegende--2h {
    width: 640px;
  }
  .LaermGraphLegende--30min {
    width: 940px;
  }
  .LaermGraphLegendeStart {
    width: 20px;
  }
  .LaermGraphLegendeBild--24h {
    width: 15px;
  }
  .LaermGraphLegendeBild--2h {
    width: 150px;
  }
  .LaermGraphLegendeBild--30min {
    width: 900px;
  }
}

/*  Ende:  Ueberbreite Laermgraphen                                                                       */
/*  ====================================================================================================  */

/* NEU Google-Maps */
#map_container{
  position: relative;
}
#map_canvas{
    height: 0;
    overflow: hidden;
    padding-bottom: 50%;
    padding-top: 30px;
    position: relative;
}

@media only screen and (max-width: 767px) {
  #map_canvas{
      padding-bottom: 125%;
  }
}

/*  Fuer Startseite DFLD  */
.BildFlugspur {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background-color:#f5f5f5;
  text-align: center;
  
  color: #adacaa;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .BildFlugspur {
    height: 100px;
  }
}
.BildFlugspur img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
  height: auto;
}

.Trenner {                        /*  Ersetzt ein '<br><hr><br>'  */
  border-top-style: solid;
  border-top-width: 2px;
  border-color: #888;
  margin-top: 28px;               /* Das habe ich angepasst auf '<br><hr>' (vorher war's '<br><br><hr>' und ein folgende '<br>' )  */
  padding-top: 28px;
}
@media only screen and (max-width: 1199px) {
  .Trenner {
    margin-top: 25px;
    padding-top: 25px;
  }
}

.TrennerOhneBR {          /*  Ersetzt ein '<hr><br>'  */
  border-top-style: solid;
  border-top-width: 2px;
  border-color: #888;
  margin-top: 0px;
  padding-top: 28px;
}
@media only screen and (max-width: 1199px) {
  .TrennerOhneBR {
    margin-top: 0px;
    padding-top: 28px;
  }
}

@media only screen and (max-width: 991px) {
  .Trenner {
    margin-top: 20px;
    padding-top: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .Trenner {
    margin-top: 15px;
    padding-top: 15px;
  }
}

.trennerlinie {         /*  Das hat noch gefehlt  */
  border-top-style: solid;
  border-top-width: 2px;
  border-color: #000;
}

/*  Uebernahme von Stilmitteln aus der alten DFLD-Webseite  */
.Fix             {
	font         : 'Courier New', Courier, monospace;
}

.Rot              {
	color        : #c10d0d;
}
.Orange        {
	color        : #ff8040;
}
.Gelb           {
	color        : #d0c000;
}
.LightGruen{   /* Abgekuendigt = Altlast /  Durch 'LilaDark' ersetzen */
	color        : #99cc00;
}
.GruenH {       /* Abgekuendigt = Altlast /  Durch 'GruenH' ersetzen */
	color        : #99cc00;
}
.Gruen          {
	color        : #008800;
}
.HBlau {       /* Abgekuendigt = Altlast /  Durch 'BlauH' ersetzen */
	color        : #0080ff;
}
.BlauH {
	color        : #0080ff;
}
.Blau            {
	color        : #2459c4;
}
.BlauSystem  {
	color        : #549bbf;
}
.Lila            {
	color        : #DD00DD;
}
.DarkLila{     /* Abgekuendigt = Altlast /  Durch 'LilaDark' ersetzen */
	color        : #ff3399;
}
.LilaDark{
	color        : #ff3399;
}
.Weiss       {
	color        : #ffffff;
}
.HGrau    {      /* Abgekundigt = Altlast /  Durch 'GruenH' ersetzen */
	color        : #A5A5A5;
}
.GrauH    {      /* Abgekuendigt = Altlast /  Durch 'GrauH' ersetzen */
	color        : #A5A5A5;
}
.Grau        {
	color        : #808080;
}
.Schwarz     {
	color        : #000000;
}

/*   Hintergrundfarbe der Tabellenheader  */
.TabHeader  {
	color        : #549bbf;
}

/*   Farbdefinitionen fuer Tag/Tagesrand/Nacht/Kernnacht/Ganztag NUR fuer die Balkengraphik in allen Tabellen  */
.Tag    {
	color        : #008800;    /* Weiß   */
}
.TagR  {
	color        : #aaffff;    /* Blau 1 */
}
.Nacht  {
	color        : #5af0f0;    /* Blau 2 */
}
.KNacht  {
	color        : #3ae0e0;    /* Blau 3 */
}
.GTag  {
	color        : #cdcdcd;    /* Grau   */
}
/*   Farbdefinitionen fuer Tag/Tagesrand/Nacht/Kernnacht/Ganztag NUR fuer die Balkengraphik in den Laermstatistiken  */
.Tag2  {
	color        : #008800;    /* Gruen  */
}
.TagR2 {
	color        : #d0c000;    /* Gelb   */
}
.Nacht2  {
	color        : #c10d0d;    /* Rot    */
}
.KNacht2  {
	color        : #dd00dd;    /* Lila   */
}
.GTag2  {
	color        : #cdcdcd;    /* Grau   */
}

.Kursiv       {
  font-style   : italic;
}
.Nil           {}

/*   styles fuer Presse   */
.PresseRubrik  {    /*  Wie '<b>'  */
  font-weight   : 600;
  padding-bottom: 12px;
}
@media only screen and (max-width: 1199px) {
  .PresseRubrik  {
    font-weight   : 600;
    padding-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .PresseRubrik  {
    font-weight   : 600;
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .PresseRubrik  {
    font-weight   : 600;
    padding-bottom: 6px;
  }
}
.PresseTitel1 {    /*  Wie '<h1>'  */
  font-size:      35px;
  line-height:    42px;
  font-weight:    600;
  padding-bottom: 12px;
  color:          #426375;
}
@media only screen and (max-width: 1199px) {
  .PresseTitel1 {
    font-size:      30px;
    line-height:    38px;
    padding-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .PresseTitel1 {
    font-size:      25px;
    line-height:    33px;
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .PresseTitel1 {
    font-size:      20px;
    line-height:    26px;
    padding-bottom: 6px;
  }
}
.PresseTitel2 {    /*  Wie '<h2>'  */
  font-size:      28px;
  line-height:    35px;
  font-weight:    600;
  padding-bottom: 12px;
  color:          #426375;
}
@media only screen and (max-width: 1199px) {
  .PresseTitel2 {
    font-size:      25px;
    line-height:    33px;
    padding-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .PresseTitel2 {
    font-size:      22px;
    line-height:    30px;
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .PresseTitel2{
    font-size:      19px;
    line-height:    25px;
    padding-bottom: 6px;
  }
}
.PresseAutor  {    /*  Wie '<b><i>'  */
  font-weight   : 600;
  font-style    : italic;
  padding-bottom: 12px;
}
@media only screen and (max-width: 1199px) {
  .PresseAutor {
    font-weight   : 600;
    font-style    : italic;
    padding-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .PresseAutor {
    font-weight   : 600;
    font-style    : italic;
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .PresseAutor{
    font-weight   : 600;
    font-style    : italic;
    padding-bottom: 6px;
  }
}
.PresseAnfang  {    /*  Wie '<b>'  */
  font-weight   : 600;
  padding-top   : 10px;
  padding-bottom: 12px;
}
@media only screen and (max-width: 1199px) {
  .PresseAnfang {
    font-weight   : 600;
    padding-top   : 10px;
    padding-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .PresseAnfang {
    font-weight   : 600;
    padding-top   : 10px;
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) {
  .PresseAnfang{
    font-weight   : 600;
    padding-top   : 10px;
    padding-bottom: 6px;
  }
}