@import url('fonts.css');
@import url('plugins.css');


* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


html,
button,
input,
select,
textarea {
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #333;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: antialiased
}

body {
  margin: 0;
  padding: 0;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

img {
  border: none;
  outline: none;
  vertical-align: middle;
}

ul,
li {
  margin: 0;
  padding: 0;
}

ul.liste,
ul.aufzaehlung {
  list-style-type: square;
  padding: 0 0 0 15px;
}
ul.liste li,
ul.aufzaehlung li {
  padding:0 0 6px 0;
}





/* allgemeine Schriftendefinitionen */

a {
  color: inherit;
  text-decoration: underline;
}
a:hover {
  text-decoration: underline;
}
a:focus,
button:focus{
  outline: none;
}


h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
  margin: 0 0 15px 0;
  padding: 0;
}

h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 26px;
  margin: 0 0 10px 0;
  padding: 0;
}

h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 22px;
  margin: 0 0 8px 0;
  padding: 0;
}

h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  margin: 0 0 5px 0;
  padding: 0;
}

p {
  margin: 0 0 20px 0;
}







/* Formulare */
form,
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 0 0 30px 0;
}

/* Clearfix */
fieldset:before,
fieldset:after {
  content: " ";
  display: table;
}
fieldset:after {
  clear: both;
}
fieldset {
  *zoom: 1;
}


/* Formularaufteilung und Feldbreiten */
fieldset .halb {
  width: 49%;
}

input,
textarea,
select,
.select2,
.cke_textarea_inline {
  width: 98%;
  font-size: 16px;
  line-height: 20px;
}

.feld .b80 {
  width: 78%;
}
.feld .dreiviertel, .feld .b75 {
  width: 73%;
}
.feld .zweidrittel, .feld .b66 {
  width: 64%;
}
.feld .b60 {
  width: 58%;
}
.feld .halb, .feld .b50 {
  width: 48%;
}
.feld .b40 {
  width: 38%;
}
.feld .b30 {
  width: 28%;
}
.feld .drittel, .feld .b33 {
  width: 31%;
}
.feld .viertel, .feld .b25 {
  width: 23%;
}
.feld .fuenftel, .feld .b20 {
  width: 18%;
}
.feld .b15 {
  width: 13%;
}

.feld .b80, 
.feld .dreiviertel, .feld .b75, 
.feld .zweidrittel, .feld .b66, 
.feld .b60, 
.feld .halb, .feld .b50, 
.feld .b40, 
.feld .b30, 
.feld .drittel, .feld .b33, 
.feld .viertel, .feld .b25, 
.feld .fuenftel, .feld .b20,
.feld .b15 {
  margin-right: 2%;
  float: left; /* damit die Leerzeichen im Quelltext zwischen den Feldern keine Breite einnehmen (wie bei inline-block), muss gefloatet werden */
}

.feld .abstand {
  margin-bottom: 10px;
}
.feld .abstand_oben {
  margin-top: 10px;
}



.feld {
  margin: 0 20px 15px 0;
}
.feld:after {
  clear: both;
  content: " ";
  display: table;
}
fieldset.einspaltig .feld {
  margin-right: 0;
  margin-left: 0;
}

.feld > label {
  display: block;
  width: 160px;
  float: left;
  line-height: 20px;
  padding: 5px 0 5px 0; /* Ausgleich für den oberen und unteren Innenabstand der Eingabefelder plus Rahmenlinie */
}
fieldset.einspaltig .feld > label {
  width: auto;
  float: none;
}

.feld .eingabe {
  margin-left: 170px;
}
.feld .eingabe + .eingabe {
  margin-top: 5px;
}
fieldset.einspaltig .feld .eingabe {
  margin-left: 0;
}
.feld .eingabe label,
.check label,
label.check {
  position: relative;
  display: inline-block;
  padding-top: 5px;
  padding-left: 30px;
  margin-right: 30px;
  width: auto;
}
.check input[type=radio],
.check input[type=checkbox] {
  position: absolute;
  left: 0;
  margin-top: 3px;
}
.feld .eingabe.eingerueckt {
  margin-left: 200px;
}
.feld .eingabe .eingerueckt {
  margin-left: 30px;
}

.feld .eingabe label + label,
.feld .eingabe .hinweis + label,
.feld .eingabe .hinweis + input,
.feld .eingabe .hinweis + textarea {
  margin-top: 5px;
}

/* Felder um eine Reihe nach unten versetzen */
.feld.versatz {
  margin-top: 45px;
}

input[type="text"], input[type="password"], input[type="email"], textarea, select {
  padding: 4px 6px 4px 6px;
  margin: 0 0 0 0;
  border: 1px solid #ccc;
  background: #f5f5f5;
  outline: none;
}
.select2-input {
  padding: 0;
  height: 26px;
  border: none !important;
  background: #f5f5f5 !important;
  box-shadow: none !important;
}
select {
  height: 30px;  /* Höhe festlegen, sonst kommt es zu kleinen Abweichungen (vermutlich weil line-heigth ignoriert wird */
}
/* Farbe der Select-Options festlegen, sonst ist unter Umtänden weißer Text auf weißem Hintergrund (Chrome) */
option {
  color: #333;
  background-color: #fff;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}

input,
textarea,
select,
.select2 {
  width: 100%;
  font-size: 16px;
  line-height: 20px;
}

input[type=radio],
input[type=checkbox] {
  width: auto;
  border: none;
}

textarea {
  resize: vertical;
  /* min-height: 120px; */
  min-height: 75px;
}
textarea.reihen2 {
  /* 45px pro Reihe inkl. Margin abzüglich 15px Margin der Textarea */
  height: 75px;
}
textarea.reihen3 {
  height: 120px;
}
textarea.reihen4 {
  height: 165px;
}
textarea.reihen5 {
  height: 210px;
}

::-webkit-input-placeholder { color: #aaa; }
::-moz-placeholder { color: #aaa; }
:-ms-input-placeholder { color: #aaa; }


.datepicker {
  width: 130px;
  padding-right: 28px !important;
}
.Zebra_DatePicker_Icon_Wrapper {
  margin-right: 2%;
}












/* Schaltflächen */

button,
a.sf {
  padding: 0 15px 0 15px;
  margin: 4px 8px 4px 0;
  font-size: 18px;
  line-height: 36px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  color: #fff;
  background-color: #888;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}
button.rechts,
a.sf.rechts {
  margin: 4px 0 4px 8px;
}
a.sf {
  text-decoration: none;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
button:hover,
a.sf:hover {
  background-color: #727272;
}

button.keintext span,
a.sf.keintext span {
  display: none;
}

button.mini,
a.sf.mini {
  font-size: 13px;
  line-height: 20px;
}

button.klein,
a.sf.klein {
  font-size: 16px;
  line-height: 28px;
}

button.gross,
a.sf.gross {
  font-size: 20px;
  line-height: 42px;
}

button.betont,
a.sf.betont {
  color: #fff;
  background-color: #71C44D;
}
button.betont:hover,
a.sf.betont:hover {
  background-color: #61B53C;
}

button.warnung,
a.sf.warnung {
  padding: 0 15px 0 15px;
  background-color: #D54E21;
}
button.warnung:hover,
a.sf.warnung:hover {
  background-color: #C1471D;
}

button.hell,
a.sf.hell {
  color: #333;
  background-color: #fff;
}
button.hell:hover,
a.sf.hell:hover {
  background-color: #eee;
}

button.dunkel,
a.sf.dunkel {
  background-color: #555;
}
button.dunkel:hover,
a.sf.dunkel:hover {
  background-color: #444;
}

button.hell:active,
a.sf.hell:active {
  color: #666;
}

button:active,
a.sf:active {
  color: #ddd;
}

button[disabled],
input[disabled] {
  cursor: default;
  color: #999;
  background-color: #ddd;
}

button.icon,
a.sf.icon {
  padding-left: 15px;
  padding-right: 15px;
}

button.icon span,
a.sf.icon span {
  padding-left: 15px;
}

button.sehrgross.icon:before,
a.sf.sehrgross.icon:before {
  margin: 5px 0 5px 0;
}





/* Symbole */

/* die icon-Klasse wird verwendet, wenn ein Symbol zusätzlich zu anderem Inhalt eingefügt werden soll,
 die symbol-Klasse wird verwendet, wenn ein Symbol der einzige Inhalt ist */

.icon:before {
  content: "";  /* notwendig, damit das Pseudo-Element sichtbar wird */
  background-image: url('/media/vlg/symbole.png');
  background-size: 500px 600px;
  background-repeat: no-repeat;
  
  /* Grafikgröße im Sprite */
  width: 18px;
  height: 18px;
  
  /* unbeabsichtigte Icon-Anzeige verhindern, falls i-Klasse fehlt */
  background-position: -500px -600px;
  
  /* Positionierung */
  float: left;
  
  /* Ausrichtungshilfe */
  /* background-color: #999; */
}
.icon.i-rechts:before {
  float: right;
}
.icon.i-gross:before {
  width: 28px;
  height: 28px;
}

.symbol {
  display: inline-block;
  
  background-image: url('/media/vlg/symbole.png');
  background-size: 500px 600px;
  background-repeat: no-repeat;
  
  /* Grafikgröße im Sprite */
  width: 18px;
  height: 18px;
  
  /* unbeabsichtigte Icon-Anzeige verhindern, falls i-Klasse fehlt */
  background-position: -500px -600px;
}


.i-pfeil-links:before { background-position: -313px -245px; }
.i-pfeil-links:hover:before { background-position: -313px -305px; }
.i-pfeil-links-hell:before { background-position: -313px -185px; }
.i-pfeil-links-hell:hover:before { background-position: -313px -245px; }
.i-pfeil-links-dunkel:before { background-position: -313px -305px; }
.i-pfeil-links-dunkel:hover:before { background-position: -313px -245px; }

.i-pfeil-rechts:before { background-position: -163px -245px; }
.i-pfeil-rechts:hover:before { background-position: -163px -305px; }
.i-pfeil-rechts-hell:before { background-position: -163px -185px; }
.i-pfeil-rechts-hell:hover:before { background-position: -163px -245px; }
.i-pfeil-rechts-dunkel:before { background-position: -163px -305px; }
.i-pfeil-rechts-dunkel:hover:before { background-position: -163px -245px; }

.i-pfeil-oben:before { background-position: -263px -245px; }
.i-pfeil-oben:hover:before { background-position: -263px -305px; }
.i-pfeil-oben-hell:before { background-position: -263px -185px; }
.i-pfeil-oben-hell:hover:before { background-position: -263px -245px; }
.i-pfeil-oben-dunkel:before { background-position: -263px -305px; }
.i-pfeil-oben-dunkel:hover:before { background-position: -263px -245px; }

.i-pfeil-unten:before { background-position: -213px -245px; }
.i-pfeil-unten:hover:before { background-position: -213px -305px; }
.i-pfeil-unten-hell:before { background-position: -213px -185px; }
.i-pfeil-unten-hell:hover:before { background-position: -213px -245px; }
.i-pfeil-unten-dunkel:before { background-position: -213px -305px; }
.i-pfeil-unten-dunkel:hover:before { background-position: -213px -245px; }

.i-x:before { background-position: -112px -245px; }
.i-x:hover:before { background-position: -112px -305px; }
.i-x-hell:before { background-position: -112px -185px; }
.i-x-hell:hover:before { background-position: -112px -245px; }
.i-x-dunkel:before { background-position: -112px -305px; }
.i-x-dunkel:hover:before { background-position: -112px -245px; }

.i-x.i-gross:before { background-position: -9px -422px; }
.i-x.i-gross:hover:before { background-position: -9px -482px; }
.i-x-hell.i-gross:before { background-position: -9px -362px; }
.i-x-hell.i-gross:hover:before { background-position: -9px -422px; }
.i-x-dunkel.i-gross:before { background-position: -9px -482px; }
.i-x-dunkel.i-gross:hover:before { background-position: -9px -422px; }

.i-bearbeiter:before, .s-bearbeiter { background-position: -14px -32px; }
.i-bearbeiter:hover:before, .s-bearbeiter:hover { background-position: -14px -57px; }
.i-bearbeiter-hell:before, .s-bearbeiter-hell { background-position: -14px -7px; }
.i-bearbeiter-hell:hover:before, .s-bearbeiter-hell:hover { background-position: -14px -32px; }
.i-bearbeiter-dunkel:before, .s-bearbeiter-dunkel { background-position: -14px -57px; }
.i-bearbeiter-dunkel:hover:before, .s-bearbeiter-dunkel:hover { background-position: -14px -32px; }

.i-kontakt:before, .s-kontakt { background-position: -38px -32px; }
.i-kontakt:hover:before, .s-kontakt:hover { background-position: -38px -57px; }
.i-kontakt-hell:before, .s-kontakt-hell { background-position: -38px -7px; }
.i-kontakt-hell:hover:before, .s-kontakt-hell:hover { background-position: -38px -32px; }
.i-kontakt-dunkel:before, .s-kontakt-dunkel { background-position: -38px -57px; }
.i-kontakt-dunkel:hover:before, .s-kontakt-dunkel:hover { background-position: -38px -32px; }

.i-kommentar:before, .s-kommentar { background-position: -62px -32px; }
.i-kommentar:hover:before, .s-kommentar:hover { background-position: -62px -57px; }
.i-kommentar-hell:before, .s-kommentar-hell { background-position: -62px -7px; }
.i-kommentar-hell:hover:before, .s-kommentar-hell:hover { background-position: -62px -32px; }
.i-kommentar-dunkel:before, .s-kommentar-dunkel { background-position: -62px -57px; }
.i-kommentar-dunkel:hover:before, .s-kommentar-dunkel:hover { background-position: -62px -32px; }

.i-zitat:before, .s-zitat { background-position: -87px -32px; }
.i-zitat:hover:before, .s-zitat:hover { background-position: -87px -57px; }
.i-zitat-hell:before, .s-zitat-hell { background-position: -87px -7px; }
.i-zitat-hell:hover:before, .s-zitat-hell:hover { background-position: -87px -32px; }
.i-zitat-dunkel:before, .s-zitat-dunkel { background-position: -87px -57px; }
.i-zitat-dunkel:hover:before, .s-zitat-dunkel:hover { background-position: -87px -32px; }

.i-info:before, .s-info { background-position: -115px -32px; width: 13px; }
.i-info:hover:before, .s-info:hover { background-position: -115px -57px; width: 13px; }
.i-info-hell:before, .s-info-hell { background-position: -115px -7px; width: 13px; }
.i-info-hell:hover:before, .s-info-hell:hover { background-position: -115px -32px; width: 13px; }
.i-info-dunkel:before, .s-info-dunkel { background-position: -115px -57px; width: 13px; }
.i-info-dunkel:hover:before, .s-info-dunkel:hover { background-position: -115px -32px; width: 13px; }

.i-aufgaben:before, .s-pin { background-position: -139px -32px; }
.i-aufgaben:hover:before, .s-pin:hover { background-position: -139px -57px; }
.i-aufgaben-hell:before, .s-pin-hell { background-position: -139px -7px; }
.i-aufgaben-hell:hover:before, .s-pin-hell:hover { background-position: -139px -32px; }
.i-aufgaben-dunkel:before, .s-pin-dunkel { background-position: -139px -57px; }
.i-aufgaben-dunkel:hover:before, .s-pin-dunkel:hover { background-position: -139px -32px; }

.i-flagge:before, .s-flagge { background-position: -163px -32px; }
.i-flagge:hover:before, .s-flagge:hover { background-position: -163px -57px; }
.i-flagge-hell:before, .s-flagge-hell { background-position: -163px -7px; }
.i-flagge-hell:hover:before, .s-flagge-hell:hover { background-position: -163px -32px; }
.i-flagge-dunkel:before, .s-flagge-dunkel { background-position: -163px -57px; }
.i-flagge-dunkel:hover:before, .s-flagge-dunkel:hover { background-position: -163px -32px; }

.i-komponente:before, .s-komponente { background-position: -188px -31px; }
.i-komponente:hover:before, .s-komponente:hover { background-position: -188px -56px; }
.i-komponente-hell:before, .s-komponente-hell { background-position: -188px -6px; }
.i-komponente-hell:hover:before, .s-komponente-hell:hover { background-position: -188px -31px; }
.i-komponente-dunkel:before, .s-komponente-dunkel { background-position: -188px -56px; }
.i-komponente-dunkel:hover:before, .s-komponente-dunkel:hover { background-position: -188px -31px; }

.i-zahnrad:before, .s-zahnrad { background-position: -213px -32px; }
.i-zahnrad:hover:before, .s-zahnrad:hover { background-position: -213px -57px; }
.i-zahnrad-hell:before, .s-zahnrad-hell { background-position: -213px -7px; }
.i-zahnrad-hell:hover:before, .s-zahnrad-hell:hover { background-position: -213px -32px; }
.i-zahnrad-dunkel:before, .s-zahnrad-dunkel { background-position: -213px -57px; }
.i-zahnrad-dunkel:hover:before, .s-zahnrad-dunkel:hover { background-position: -213px -32px; }

.i-blatt:before, .s-blatt { background-position: -239px -32px; }
.i-blatt:hover:before, .s-blatt:hover { background-position: -239px -57px; }
.i-blatt-hell:before, .s-blatt-hell { background-position: -239px -7px; }
.i-blatt-hell:hover:before, .s-blatt-hell:hover { background-position: -239px -32px; }
.i-blatt-dunkel:before, .s-blatt-dunkel { background-position: -239px -57px; }
.i-blatt-dunkel:hover:before, .s-blatt-dunkel:hover { background-position: -239px -32px; }

.i-stern:before, .s-stern { background-position: -262px -32px; }
.i-stern:hover:before, .s-stern:hover { background-position: -262px -57px; }
.i-stern-hell:before, .s-stern-hell { background-position: -262px -7px; }
.i-stern-hell:hover:before, .s-stern-hell:hover { background-position: -262px -32px; }
.i-stern-dunkel:before, .s-stern-dunkel { background-position: -262px -57px; }
.i-stern-dunkel:hover:before, .s-stern-dunkel:hover { background-position: -262px -32px; }

.i-anhang:before, .s-anhang { background-position: -288px -32px; }
.i-anhang:hover:before, .s-anhang:hover { background-position: -288px -57px; }
.i-anhang-hell:before, .s-anhang-hell { background-position: -288px -7px; }
.i-anhang-hell:hover:before, .s-anhang-hell:hover { background-position: -288px -32px; }
.i-anhang-dunkel:before, .s-anhang-dunkel { background-position: -288px -57px; }
.i-anhang-dunkel:hover:before, .s-anhang-dunkel:hover { background-position: -288px -32px; }

.i-lupe:before, .s-lupe { background-position: -313px -32px; }
.i-lupe:hover:before, .s-lupe:hover { background-position: -313px -57px; }
.i-lupe-hell:before, .s-lupe-hell { background-position: -313px -7px; }
.i-lupe-hell:hover:before, .s-lupe-hell:hover { background-position: -313px -32px; }
.i-lupe-dunkel:before, .s-lupe-dunkel { background-position: -313px -57px; }
.i-lupe-dunkel:hover:before, .s-lupe-dunkel:hover { background-position: -313px -32px; }

.i-loeschen:before, .s-loeschen { background-position: -338px -32px; }
.i-loeschen:hover:before, .s-loeschen:hover { background-position: -338px -57px; }
.i-loeschen-hell:before, .s-loeschen-hell { background-position: -338px -7px; }
.i-loeschen-hell:hover:before, .s-loeschen-hell:hover { background-position: -338px -32px; }
.i-loeschen-dunkel:before, .s-loeschen-dunkel { background-position: -338px -57px; }
.i-loeschen-dunkel:hover:before, .s-loeschen-dunkel:hover { background-position: -338px -32px; }

.i-ansicht-klein:before, .s-ansicht-klein { background-position: -15px -108px; }
.i-ansicht-klein:hover:before, .s-ansicht-klein:hover { background-position: -15px -133px; }
.i-ansicht-klein-hell:before, .s-ansicht-klein-hell { background-position: -15px -83px;}
.i-ansicht-klein-hell:hover:before, .s-ansicht-klein-hell:hover { background-position: -15px -108px;}
.i-ansicht-klein-dunkel:before, .s-ansicht-klein-dunkel { background-position: -15px -133px; width: 23px; }
.i-ansicht-klein-dunkel:hover:before, .s-ansicht-klein-dunkel:hover { background-position: -15px 108px;}

.i-ansicht-normal:before, .s-ansicht-normal { background-position: -40px -108px; }
.i-ansicht-normal:hover:before, .s-ansicht-normal:hover { background-position: -40px -133px; }
.i-ansicht-normal-hell:before, .s-ansicht-normal-hell { background-position: -40px -83px; }
.i-ansicht-normal-hell:hover:before, .s-ansicht-normal-hell:hover { background-position: -40px -108px; }
.i-ansicht-normal-dunkel:before, .s-ansicht-normal-dunkel { background-position: -40px -133px; }
.i-ansicht-normal-dunkel:hover:before, .s-ansicht-normal-dunkel:hover { background-position: -40px 108px; }

.i-ansicht-gross:before, .s-ansicht-gross { background-position: -68px -108px; width: 23px; }
.i-ansicht-gross:hover:before, .s-ansicht-gross:hover { background-position: -68px -133px; width: 23px; }
.i-ansicht-gross-hell:before, .s-ansicht-gross-hell { background-position: -68px -83px; width: 23px; }
.i-ansicht-gross-hell:hover:before, .s-ansicht-gross-hell:hover { background-position: -68px -108px; width: 23px; }
.i-ansicht-gross-dunkel:before, .s-ansicht-gross-dunkel { background-position: -68px -133px; width: 23px; }
.i-ansicht-gross-dunkel:hover:before, .s-ansicht-gross-dunkel:hover { background-position: -68px 108px; width: 23px; }

.i-ansicht-liste:before, .s-ansicht-liste { background-position: -101px -108px; }
.i-ansicht-liste:hover:before, .s-ansicht-liste:hover { background-position: -101px -133px; }
.i-ansicht-liste-hell:before, .s-ansicht-liste-hell { background-position: -101px -83px; }
.i-ansicht-liste-hell:hover:before, .s-ansicht-liste-hell:hover { background-position: -101px -108px; }
.i-ansicht-liste-dunkel:before, .s-ansicht-liste-dunkel { background-position: -101px -133px; }
.i-ansicht-liste-dunkel:hover:before, .s-ansicht-liste-dunkel:hover { background-position: -101px 108px; }

.i-ansicht-doppelseiten:before, .s-ansicht-doppelseiten { background-position: -128px -108px; width: 28px; }
.i-ansicht-doppelseiten:hover:before, .s-ansicht-doppelseiten:hover { background-position: -128px -133px; width: 28px; }
.i-ansicht-doppelseiten-hell:before, .s-ansicht-doppelseiten-hell { background-position: -128px -83px; width: 28px; }
.i-ansicht-doppelseiten-hell:hover:before, .s-ansicht-doppelseiten-hell:hover { background-position: -128px -108px; width: 28px; }
.i-ansicht-doppelseiten-dunkel:before, .s-ansicht-doppelseiten-dunkel { background-position: -128px -133px; width: 28px; }
.i-ansicht-doppelseiten-dunkel:hover:before, .s-ansicht-doppelseiten-dunkel:hover { background-position: -128px 108px; width: 28px; }










/* Logo */
#logo {
  margin: 4%;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 36px;
}


/* Hauptnavigation */
#hauptnavigation {
  margin: 0 2.5% 0 2.5%;
  background-color: #dcdcdc;
  border-radius: 6px;
  transition: all .2s;
  
  position:relative;
  z-index:9999;
}
#hauptnavigation a {
  padding: 0 20px 0 20px;
  line-height: 40px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-decoration: none;
}
#hauptnavigation a:hover,
#hauptnavigation a.highlighted {
  background-color: #C1C1C1;
  text-decoration: none;
}
#hauptnavigation > li:nth-child(2) > a {
  border-radius: 6px 0 0 6px;
}
#hauptnavigation > li:nth-last-child(3) > a {
  border-radius: 0 6px 6px 0;
}
#hauptnavigation li.logo {
  display: none;
}
#hauptnavigation li.logo a {
  font-weight: 400;
  padding: 0 40px 0 40px;
}
#hauptnavigation li.aktiv > a,
#hauptnavigation li a.current {
  color: #fff;
  background-color: #D54E21;
}
#hauptnavigation li.marginal {
  float: right;
}
#hauptnavigation li.marginal {
  font-size: 14px;
}

/* Menü-Ebene */
#hauptnavigation ul {
  border:1px solid #bbb;
  padding:5px 0;
  background:#fff;
  border-radius:4px;
  box-shadow:0 5px 9px rgba(0,0,0,0.2);
  width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
}
/* Pfeil der auf den Eintrag der Hauptebene zeigt */
#hauptnavigation > li > ul:before {
  content:'';
  position:absolute;
  top:-18px;
  left:30px;
  width:0;
  height:0;
  overflow:hidden;
  border-width:9px;
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent #bbb transparent;
}
#hauptnavigation > li > ul:after {
  content:'';
  position:absolute;
  top:-16px;
  left:31px;
  width:0;
  height:0;
  overflow:hidden;
  border-width:8px;
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent #fff transparent;
}

/* Untermenü-Pfeile */
#hauptnavigation a.has-submenu {
  padding-right:25px;
}
#hauptnavigation ul a {
  line-height: 25px;
  padding: 10px 20px;
  font-size:16px;
}
#hauptnavigation ul a.has-submenu {
  padding-right: 40px;
}
#hauptnavigation a span.sub-arrow {
  position:absolute;
  right:12px;
  top:50%;
  margin-top:-3px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
  width:0;
  height:0;
  overflow:hidden;
  border-width:4px; /* tweak size of the arrow */
  border-style:solid dashed dashed dashed;
  border-color:#333 transparent transparent transparent;
}
#hauptnavigation li.aktiv a span.sub-arrow,
#hauptnavigation a.current span.sub-arrow {
  border-color:#fff transparent transparent transparent;
}
#hauptnavigation ul a span.sub-arrow {
  right:15px;
  top:50%;
  margin-top:-5px;
  border-width:5px;
  border-style:dashed dashed dashed solid;
  border-color:transparent transparent transparent #333;
}
#hauptnavigation ul li.aktiv a span.sub-arrow,
#hauptnavigation ul a.current span.sub-arrow {
  border-color:transparent transparent transparent #fff;
}

/* reine Symboleinträge */
#hauptnavigation > li > ul div.symbol {
  margin: 10px 20px 10px 0;
}
#hauptnavigation > li > ul div.symbol:first-child {
  margin-left: 20px;
}

/* Scroller für lange Untermenüs */
#hauptnavigation span.scroll-up, #hauptnavigation span.scroll-down {
  position:absolute;
  display:none;
  visibility:hidden;
  overflow:hidden;
  background:#fff;
  height:20px;
  /* width and position will be automatically set by the script */
}
#hauptnavigation span.scroll-up:hover, #hauptnavigation span.scroll-down:hover {
  background:#eee;
}
#hauptnavigation span.scroll-up-arrow, #hauptnavigation span.scroll-down-arrow {
  position:absolute;
  top:0;
  left:50%;
  margin-left:-6px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
  width:0;
  height:0;
  overflow:hidden;
  border-width:6px; /* tweak size of the arrow */
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent #555 transparent;
}
#hauptnavigation span.scroll-up:hover span.scroll-up-arrow {
  border-color:transparent transparent #D54E21 transparent;
}
#hauptnavigation span.scroll-down-arrow {
  top:8px;
  border-style:solid dashed dashed dashed;
  border-color:#555 transparent transparent transparent;
}
#hauptnavigation span.scroll-down:hover span.scroll-down-arrow {
  border-color:#D54E21 transparent transparent transparent;
}

/* Menü-Button für kleine Geräte */
#hauptnavigation-button {
  display:none;
}
#hauptnavigation-button:after {
  content:' -';
}
#hauptnavigation-button.collapsed:after {
  content:' +';
}

/* Hauptnavigation fixieren */
.js-clingify-locked {
  position: fixed;
  left: 0;
  top: 0;	
  width: 100%;
  z-index: 40000;
}
.js-clingify-locked #hauptnavigation {
  margin: 0;
  border-radius: 0;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.js-clingify-locked #hauptnavigation a {
  line-height: 35px;
}
.js-clingify-locked  #hauptnavigation > li > a {
  border-radius: 0;
}
.js-clingify-locked #hauptnavigation .logo {
  display: inline;
}





/* Inhaltsbereich */
#inhalt {
  /* margin: 40px 40px 40px 50px; */
  margin: 4%;
}









/* Listen */

.liste {
  display: table;
  border-collapse: collapse;
  margin: 50px -1% 50px -1%;
  width: 102%;
  border-top: 1px solid #ccc;
}

.liste .eintrag {
  border-bottom: 1px solid #ccc;
  display: table-row;
}

.liste .eintrag:hover {
  background-color: #f5f5f5;
}

.liste .eintrag .bezeichnung {
  display: table-cell;
  padding: 10px 1% 10px 1%;
  vertical-align: middle;
}

.liste .vorschau {
  float: left;
  margin: 0 15px 0 0;
  border: 1px solid #ccc;
  background-color: #fff;
  height: 100px; /* Seitenverhältnis 0,726666 */
  width: 73px;
}
.liste .vorschau img {
  max-width: 100%;
  max-height: 100%;
}

.liste .eintrag .schaltflaechen {
  display: table-cell;
  padding: 10px 1% 10px 1%;
  margin: 0;
  text-align: right;
  vertical-align: middle;
}
.liste .eintrag .schaltflaechen button,
.liste .eintrag .schaltflaechen a.sf {
  margin: 4px 0 4px 8px;
}
.liste.reduziert {
  margin-top: 25px;
}
.liste.reduziert .detail {
  display: none;
  color: #777;
}
.liste .datum {
  color: #777;
  font-weight: 700;
  padding-right: 10px;
}





/* Akkordeon */

.akkordeon {
}
.akkordeon .akkordeon {
  margin: 0 0 30px 30px;
}

.akkordeon_titel {
  cursor:pointer;
  font-weight: 700;
  padding: 10px 10px 5px 0;
  margin-bottom: 0;
  border-bottom: 1px solid #dcdcdc;
}
.akkordeon_titel:before {
  content: "";  /* notwendig, damit das Pseudo-Element sichtbar wird */
  background: url(/media/vlg/symbole.png) no-repeat -166px -245px;
  background-size: 500px 600px;
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 10px;
}

.akkordeon_titel.aktiv {
  border-bottom: none;
}
.akkordeon_titel.aktiv:before {
  background-position: -213px -243px;
}

.akkordeon_inhalt {
  padding: 10px 0 5px 0;
  border-bottom: 1px solid #dcdcdc;
}
.akkordeon.listeninhalt .akkordeon_inhalt {
  padding: 0;
}
.akkordeon.eingerueckt .akkordeon_inhalt {
  padding-left: 30px;
}
.akkordeon_inhalt:after {
  clear: both;
}








/* Seiten */

.seiten {
  margin: 60px -20px 30px 0;
}
.seiten .nicht-zugeordnet {}

.seite {
  position: relative;
  display: inline-block;
  width: 220px;
  margin: 0 20px 40px 0;
  padding: 5px;
  background: #fff;
  cursor: pointer;
}
.seite:hover {
  background: #f5f5f5;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}

.seiten .doppelseite {
  display: inline-block;
  overflow-x: hidden;
  width: 440px;
  margin: 0 20px 40px 0;
}
.seiten .doppelseite .seite {
  float: left;
  margin: 0 0 0 0;
}
.seiten .doppelseite .seite:first-child .nr {
  float: left;
  margin-right: 5px;
}
.seiten .doppelseite.rechtsstehend .seite {
  float: right;
}
.seiten .doppelseite.rechtsstehend .seite .nr {
  float: right;
  margin-right: 0;
}
.seiten .doppelseite:hover {
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}
.seiten .doppelseite .seite:hover {
  box-shadow: none;
}

.seite .vorschau {
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
  height: 288px; /* Breite 210, Seitenverhältnis 0,726666 */
}
.seite.unbelegt .vorschau {
}
.seite.aufgaben .vorschau:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 25px 0 0;
  border-color: #FDB303 transparent transparent transparent;
}
.seite.aufgaben.selbst .vorschau:before {
  border-color: #CC3333 transparent transparent transparent;
}
.seite.anzeigen .vorschau:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 30px 0;
  border-color: transparent #FDB303 transparent transparent;
}
.seite.zweite_bogenhaelfte {
  border-left: 1px dotted #CC3333;
}
.seite .vorschau img {
  max-width: 100%;
  max-height: 100%;
}

.seite .bezeichnung {
  overflow: hidden;
  height: 20px;
  margin: 10px 0 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.seite .nr,
#supra-hilfe .nr {
  float: right;
  width: 35px;
  padding: 2px 3px 2px 3px;
  text-align: center;
  font-weight: 700;
  line-height: 14px;
  color: #fff;
  background-color: #bcbcbc;
  border-radius: 12px;
}
#supra-hilfe .nr {
  float: left;
}

.seite .status {
  overflow: hidden;
  height: 20px;
  margin: 10px 0 0 0;
  font-size: 13px;
  line-height: 18px;
}
.seite .status .symbol,
.seite .status .icon {
  margin: 0 10px 0 0;
}
.seite .status .icon {
  float: left;
}

.seite .datum {
  float: right;
  padding: 0 0 5px 10px;
  color: #888;
}

.seite .status .statustext {
  display: none;
}

.seite .beschreibung {
  display: none;
  font-size: 14px;
}
.seite .beschreibung label {
  display: block;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  margin-top: 15px;
}


.seite .bezeichnung:before,
.seite .status:before,
.seite .bezeichnung:after,
.seite .status:after {
  content: " ";
  display: table;
}
.seite .bezeichnung:after,
.seite .status:after {
  clear: both;
}
.seite .bezeichnung,
.seite .status {
  *zoom: 1;
}

/* kleine Ansicht */
body.ansicht-klein .seite {
  width: 150px;
  margin: 0 15px 30px 0;
}
body.ansicht-klein .seiten .doppelseite {
  width: 300px;
  margin: 0 15px 30px 0;
}
body.ansicht-klein .seite .vorschau {
  height: 192px; /* Breite 140, Seitenverhältnis 0,726666 */
}
body.ansicht-klein .seite .bezeichnung {
  margin: 8px 0 0 0;
  font-size: 12px;
  font-weight: normal;
}
body.ansicht-klein .seite .status {
  margin: 8px 0 0 0;
  font-size: 12px;
}
body.ansicht-klein .seite .datum {
  display: none;
}

/* große Ansicht */
body.ansicht-gross .seite {
  width: 310px;
}
body.ansicht-gross .seiten .doppelseite {
  width: 620px;
}
body.ansicht-gross .seite .vorschau {
  height: 412px; /* Breite 300, Seitenverhältnis 0,726666 */
}

/* Listenansicht */
body.ansicht-liste .seite {
  width: 100%;
  margin: 0 0 50px 0;
  padding: 10px 5px 10px 5px;
  border-bottom: 1px dotted #ccc;
}
body.ansicht-liste .seiten .doppelseite.rechtsstehend .seite {
  float: left;
}
body.ansicht-liste .seiten .doppelseite {
  width: 100%;
  margin: 0 0 50px 0;
}
body.ansicht-liste .seite.zweite_bogenhaelfte {
  border-top: 1px solid #CC3333;
}
body.ansicht-liste .seite .vorschau {
  width: 100px;
  height: 137px; /* Breite 100, Seitenverhältnis 0,726666 */
  float: left;
}
body.ansicht-liste .seite .bezeichnung {
  margin: 0 0 0 130px;
}
body.ansicht-liste .seite .nr,
body.ansicht-liste .seiten .doppelseite .seite:first-child .nr,
body.ansicht-liste .seiten .doppelseite.rechtsstehend .seite .nr {
  float: left;
  margin-right: 15px;
}
body.ansicht-liste .seite .status {
  margin: 10px 0 0 130px;
}
body.ansicht-liste .seite .status .datum {
  float: left;
  padding: 0;
  color: #333;
}
body.ansicht-liste .seite .status .statustext {
  display: inline-block;
  float: left;
  margin-left: 40px;
}
body.ansicht-liste .seite .status .icon,
body.ansicht-liste .seite .status .symbol {
  display: none;
}
body.ansicht-liste .seite .beschreibung {
  display: block;
  margin: 0 0 0 130px;
}

/* Doppelseiten-Ansicht */
body.ansicht-doppelseiten .seite {
  width: 50%;
  margin: 0 0 50px 0;
  padding: 10px 5px 10px 5px;
}
body.ansicht-doppelseiten .seiten .doppelseite {
  width: 100%;
  margin: 0 0 50px 0;
}
body.ansicht-doppelseiten .seite.zweite_bogenhaelfte {
  border-top: 1px solid #CC3333;
}
body.ansicht-doppelseiten .seite .vorschau {
  width: 250px;
  height: 344px; /* Breite 250, Seitenverhältnis 0,726666 */
  margin-left: 20px;
  float: right;
}
body.ansicht-doppelseiten .seiten .doppelseite .seite:last-child .vorschau,
body.ansicht-doppelseiten .seiten .doppelseite.rechtsstehend .seite .vorschau {
  float: left;
  margin-left: 0;
}
body.ansicht-doppelseiten .seite:last-child .bezeichnung {
  margin: 0 0 0 270px;
}
body.ansicht-doppelseiten .seite .nr,
body.ansicht-doppelseiten .seiten .doppelseite .seite:first-child .nr,
body.ansicht-doppelseiten .seiten .doppelseite.rechtsstehend .seite .nr {
  float: left;
  margin-right: 15px;
}
body.ansicht-doppelseiten .seite:last-child .status {
  margin: 10px 0 0 270px;
}
body.ansicht-doppelseiten .seite .status .datum {
  float: left;
  padding: 0;
  color: #333;
}
body.ansicht-doppelseiten .seite .status .statustext {
  display: inline-block;
  float: left;
  margin-left: 40px;
}
body.ansicht-doppelseiten .seite .status .icon,
body.ansicht-doppelseiten .seite .status .symbol {
  display: none;
}
body.ansicht-doppelseiten .seite .beschreibung {
  display: block;
}
body.ansicht-doppelseiten .seite:last-child .beschreibung {
  margin: 0 0 0 270px;
}



/* Sortieren, Löschen, Leeren */

.seiten .sortable-placeholder,
.ansicht-normal .seiten .sortable-placeholder {
  display: inline-block;
  width: 220px;
  margin: 0 20px 40px 0;
  background: none;
}
.ansicht-klein .seiten .sortable-placeholder {
  width: 150px;
  margin: 0 15px 30px 0;
}
.ansicht-gross .seiten .sortable-placeholder {
  width: 310px;
}
.ansicht-liste .sortierhinweis-liste,
.ansicht-doppelseiten .sortierhinweis-liste {
  display: block;
}

.seite.loeschen {
  background-color: #c33;
}
.seite .icon.loeschen {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  padding: 4px 0 0 5px;
  background-color: #CC3333;
  border-radius: 4px;
}

.seite.leeren {
  background-color: #1e81c0;
}
.seite .icon.leeren {
  position: absolute;
  top: -6px;
  right: 28px;
  width: 26px;
  height: 26px;
  padding: 4px 0 0 6px;
  background-color: #1e81c0;
  border-radius: 4px;
}


/* Scroll-Unterstützung beim Drag-n-Drop */
#top_scroll_page,
#bottom_scroll_page {
  height: 75px !important;
  background-color: #f5f5f5;
  background:rgba(0,0,0,0.1);
}
#top_scroll_page {
  background: linear-gradient(to bottom, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);
}
#bottom_scroll_page {
  background: linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);
}







/* Detailansicht der Seiten */

.seitenansicht {}

.seitenansicht .vorschau {
  float: left;
  width: 200px;
  height: 275px;  /* Seitenverhältnis 0,726666 */
  margin: 0 3% 20px 0;
  border: 1px solid #ccc;
  background-color: #fff;
}
.seitenansicht.unbelegt .vorschau {
}
.seitenansicht .vorschau img {
  max-width: 100%;
  max-height: 100%;
}

.seitenansicht .beschreibung {
}

.seitenansicht .beschreibung label {
  display: block;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
}

.seitenansicht .nr {
  display: inline-block;
  width: 35px;
  margin: -4px 10px 0 0;
  padding: 2px 3px 2px 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  background-color: #bcbcbc;
  border-radius: 12px;
}

.seitenansicht .datum,
.seitenansicht .status {
  float: left;
  margin-right: 40px;
}

.seitenansicht .anzeigenstatus,
.seitenansicht .aufgaben,
.seitenansicht .bedingungen,
.seitenansicht .bemerkungen,
.seitenansicht .kontakt,
.seitenansicht .dateien {
  margin-top: 15px;
}

.seitenansicht .verlauf {
  display: none;
  margin-top: 15px;
}






/* Dateiliste in Seitenansicht */
.dateiliste ul {
  display: table;
  border-collapse: collapse;
  list-style-type: none;
  width: 100%;
}
.seitenansicht .beschreibung .dateiliste ul {
  width: auto;
}

.dateiliste li {
  display: table-row;
  
}

.dateiliste div {
  display: table-cell;
  
}

.dateiliste .groesse,
.dateiliste .schaltflaechen {
  padding: 0 0 0 20px;
  text-align: right;
}

.dateiliste .schaltflaechen button,
.dateiliste .schaltflaechen a.sf {
  margin: 4px 0 4px 8px;
}
.dateiliste .schaltflaechen .datei-loeschen {
  width: 85px;
}





/* Farben der verschiedenen Seiten-Stati */
.status_0    { background-color: #bcbcbc !important; }
.status_1    { background-color: #CC3333 !important; } /* rot */
.status_2    { background-color: #E2541E !important; } /* hellrot */
.status_3    { background-color: #F1750F !important; } /* orange */
.status_4    { background-color: #FDB303 !important; } /* gelb */
.status_5    { background-color: #AEF10F !important; } /* hellgrün */
.status_6    { background-color: #5EC43C !important; } /* grün */

/* Farben der verschiedenen Anzeigen-Stati */
.anzeigenstatus_0 .vorschau:after    { border-right-color: #bcbcbc !important; }
.anzeigenstatus_1 .vorschau:after    { border-right-color: #CC3333 !important; } /* rot */
.anzeigenstatus_2 .vorschau:after    { border-right-color: #E2541E !important; } /* hellrot */
.anzeigenstatus_3 .vorschau:after    { border-right-color: #F1750F !important; } /* orange */
.anzeigenstatus_4 .vorschau:after    { border-right-color: #FDB303 !important; } /* gelb */
.anzeigenstatus_5 .vorschau:after    { border-right-color: #AEF10F !important; } /* hellgrün */
.anzeigenstatus_6 .vorschau:after    { border-right-color: #5EC43C !important; } /* grün */






/* Termin-Kennzeichnung */
span.termin-nah {
  font-weight: 700;
  color: #FDB303;
}
span.termin-naeher {
  font-weight: 700;
  color: #CE1A19;
}
span.termin-faellig {
  padding: 0 3px 0 3px;
  background-color: #CE1A19;
  color: #fff;
}

.seite.aufgaben.termin-nah .vorschau {
  border: 3px solid #FDB303;
}
.seite.aufgaben.termin-naeher .vorschau {
  border: 3px solid #CE1A19;
}
.seite.aufgaben.termin-faellig .vorschau {
  border: 6px solid #CE1A19;
}







/* Tags */
.tag {
  display: inline-block;
  padding: 0 5px 0 5px;
  margin: 0 0 5px 10px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  background-color: #a2a2a2;
  cursor: default;
  background-clip: padding-box;
  border-radius: 2px;
}
.tag + .tag {
  margin-left: 5px;
}
.tag.betont {
  color: #fff;
  background-color: #71C44D;
}
.tag.alternativ {
  color: #fff;
  background-color: #ECC218;
}
.tag.warnung {
  color: #fff;
  background-color: #D54E21;
}








/* Box für Fehler-/Erfolgsmeldungen */
.meldungsbox {
  border: 1px solid #ccc;
  margin: 20px 0 20px 0;
  padding: 10px;
  background-color: #f5f5f5;
}

.fehler {
  font-weight: 700;
  color:#CE1A19;
}
input.fehler,
textarea.fehler,
select.fehler,
.fehler textarea,
.fehler select,
.fehler .select2-selection--multiple {
  border: 1px solid #c00 !important;
}
.select2-container.fehler .select2-selection,
.select2-container.fehler .select2-choice,
.fehler > .select2-container .select2-selection,
.fehler > .select2-container .select2-choice {
  font-weight: bold;
  color:#CE1A19;
  border: 1px solid #c00 !important;
}
.fehler .select2-selection--single {
  font-weight: bold;
  color:#CE1A19;
  border: 1px solid #c00 !important;
}
.meldung {
  font-weight: 700;
  color:#777;
}

.erfolg {
  font-weight: 700;
  color:#509531;
}

div.fehler,
div.meldung,
div.erfolg {
  display: block;
  margin-bottom: 20px;
}
span.fehler,
span.meldung,
span.erfolg {
  display: inline;
}






.ladeblinker {
  -webkit-animation: blink 1000ms linear infinite;
  animation: blink 1000ms linear infinite;
}
@-webkit-keyframes blink {
  from { opacity: 1; }
  50%  { opacity: 0.2; }
  to   { opacity: 1; }
}
@keyframes blink {
  from { opacity: 1; }
  50%  { opacity: 0.2; }
  to   { opacity: 1; }
}





#uploader {
  min-height: 140px;
}


#rechtliches {
  position: absolute;
  bottom: 20px;
  right: 40px;
  font-size: 14px;
}
















/* folgende Klassen am Ende, um vorhergehende Definitionen überschreiben zu können */

/* Verhalten */

.ku {
  white-space:nowrap;
}

.wu {
  word-wrap: break-word;
}

.ib {
  display: inline-block;
}

.verdeckt {
  display: none;
}

.unauswaehlbar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}



/* allgemeine Formate */

.text-links {
  text-align: left;
}
.text-rechts {
  text-align: right;
}
.text-mittig {
  text-align: center;
}

.links {
  float: left;
}
.rechts {
  float: right;
}

.hinweis {
  font-size: 13px;
  line-height: 16px;
  color: #777;
}

.betont {
  color: #328A98;
}

.warnung {
  padding: 10px;
  background-color: #CE1A19;
  color: #fff;
}

.abgerundet {
  border-radius: 4px;
}

.schatten {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}



/* Breiten */

.voll, .b100 {
  width: 100%;
}
.b80 {
  width: 80%;
}
.dreiviertel, .b75 {
  width: 75%;
}
.zweidrittel, .b66 {
  width: 66%;
}
.b60 {
  width: 60%;
}
.halb, .b50 {
  width: 50%;
}
.b40 {
  width: 40%;
}
.drittel, .b33 {
  width: 33%;
}
.viertel, .b25 {
  width: 25%;
}
.fuenftel, .b20 {
  width: 20%;
}
.b15 {
  width: 15%;
}

.max-b80 {
  max-width: 80%;
}
.max-dreiviertel, .max-b75 {
  max-width: 75%;
}
.max-zweidrittel, .max-b66 {
  max-width: 66%;
}
.max-b60 {
  max-width: 60%;
}
.max-halb, .max-b50 {
  max-width: 50%;
}
.max-b40 {
  max-width: 40%;
}
.max-drittel, .max-b33 {
  max-width: 33%;
}
.max-viertel, .max-b25 {
  max-width: 25%;
}
.max-fuenftel, .max-b20 {
  max-width: 20%;
}
.max-b15 {
  max-width: 15%;
}

.max-b300 {
  max-width: 300px;
}
.max-b400 {
  max-width: 400px;
}
.max-b500 {
  max-width: 500px;
}
.max-b600 {
  max-width: 600px;
}
.max-b700 {
  max-width: 700px;
}




/* Abstände */

.keinabstand { margin: 0 !important; }

.marginalabstandlinks  { margin-left: 10px !important; }
.marginalabstandrechts { margin-right: 10px !important; }
.marginalabstandoben   { margin-top: 10px !important; }
.marginalabstandunten  { margin-bottom: 10px !important; }

.kleinerabstandlinks  { margin-left: 20px !important; }
.kleinerabstandrechts { margin-right: 20px !important; }
.kleinerabstandoben   { margin-top: 20px !important; }
.kleinerabstandunten  { margin-bottom: 20px !important; }

.abstandlinks  { margin-left: 40px !important; }
.abstandrechts { margin-right: 40px !important; }
.abstandoben   { margin-top: 40px !important; }
.abstandunten  { margin-bottom: 40px !important; }

.grosserabstandlinks  { margin-left: 80px !important; }
.grosserabstandrechts { margin-right: 80px !important; }
.grosserabstandoben   { margin-top: 80px !important; }
.grosserabstandunten  { margin-bottom: 80px !important; }
















/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 640px) {

  h1 {
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 20px 0;
  }
  
  h2 {
    font-size: 32px;
    line-height: 32px;
    margin: 0 0 15px 0;
  }
  
  h3 {
    font-size: 24px;
    line-height: 28px;
    margin: 0 0 10px 0;
  }
  
  h4 {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 5px 0;
  }
  
  .seitenansicht .vorschau {
    float: none;
    width: 300px;
    height: 413px;  /* Seitenverhältnis 0,726666 */
  }
  
  
  /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
  /* ul#hauptnavigation{width:auto !important;}
  ul#hauptnavigation ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
  ul#hauptnavigation>li{float:none;}
  ul#hauptnavigation>li>a,ul#hauptnavigation ul.sm-nowrap>li>a{white-space:normal;}
  ul#hauptnavigation iframe{display:none;} */
  
  /* Uncomment this rule to disable completely the sub menus for small screen devices */
  /*#hauptnavigation ul, #hauptnavigation span.sub-arrow, #hauptnavigation iframe {
    display:none !important;
  }*/
  
  /* show the button on small screens */
  /* #hauptnavigation-button {
    display:inline-block;
  } */
  /* hide the menu when it has the "collapsed" class set by the script */
  /* #hauptnavigation.collapsed {
    display:none;
  } */
  
  /* Menu box */
  /* #hauptnavigation {
    padding:0;
    border-radius:6px;
  }
  #hauptnavigation ul {
    border:0;
    padding:0;
    background:rgba(130,130,130,0.1);
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
  } */
  /* no carets */
  /* #hauptnavigation > li > ul:before, #hauptnavigation > li > ul:after {
    display:none;
  } */
  
  /* Menu items */
  /* #hauptnavigation a {
    padding:13px 5px 13px 28px !important;
    color:#555 !important;
    background:transparent !important;
  }
  #hauptnavigation a.current {
    color:#D23600 !important;
  } */
  /* add some text indentation for the 2+ level sub menu items */
  /* #hauptnavigation ul a {
    border-left:8px solid transparent;
  }
  #hauptnavigation ul ul a {
    border-left:16px solid transparent;
  }
  #hauptnavigation ul ul ul a {
    border-left:24px solid transparent;
  }
  #hauptnavigation ul ul ul ul a {
    border-left:32px solid transparent;
  }
  #hauptnavigation ul ul ul ul ul a {
    border-left:40px solid transparent;
  } */
  
  /* Sub menu indicators */
  /* #hauptnavigation a span.sub-arrow,
  #hauptnavigation ul a span.sub-arrow {
    top:50%;
    margin-top:-9px;
    right:auto;
    left:6px;
    margin-left:0;
    width:17px;
    height:17px;
    font:normal 16px/16px monospace !important;
    text-align:center;
    border:0;
    text-shadow:none;
    background:rgba(255,255,255,0.6);
    border-radius:50px;
  } */
  /* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
  /* #hauptnavigation a.highlighted span.sub-arrow {
    display:none !important;
  } */
  
  /* Items separators */
  /* #hauptnavigation li {
    border-top:1px solid rgba(0,0,0,0.05);
  }
  #hauptnavigation > li:first-child {
    border-top:0;
  } */
  
}

@media only screen and (min-width: 641px) {

  h1 {
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 20px 0;
  }
  
  h2 {
    font-size: 32px;
    line-height: 32px;
    margin: 0 0 15px 0;
  }
  
  h3 {
    font-size: 24px;
    line-height: 28px;
    margin: 0 0 10px 0;
  }
  
  h4 {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 5px 0;
  }
  
  #logo {
    font-size: 45px;
    line-height: 45px;
  }
  
}

@media only screen and (min-width: 900px) {
  
  #hauptnavigation a {
    line-height: 50px;
    font-size: 22px;
  }
  .js-clingify-locked #hauptnavigation a {
    line-height: 40px;
  }
  
}

@media only screen and (min-width: 1025px) {

  #logo {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  #inhalt {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .seitenansicht .vorschau {
    width: 300px;
    height: 413px;  /* Seitenverhältnis 0,726666 */
  }
  
}

@media print,
     (-o-min-device-pixel-ratio: 5/4),
     (-webkit-min-device-pixel-ratio: 1.25),
     (min-resolution: 120dpi) {

}






/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}






/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  
  * {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links for images, or javascript/internal links
   */

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
  
  
  #logo,
  .js-clingify-placeholder,
  #hauptnavigation {
    display: none;
  }
  
  .seiten {
    margin: 20px -20px 0 0;
  }
  .seite .beschreibung {
    font-size: 13px;
  }
  .seite .beschreibung label {
    font-size: 12px;
  }
  
  body.ansicht-liste .seite {
    margin: 0 0 30px 0;
    padding: 10px 0 10px 0;
    page-break-inside: avoid;
  }
  body.ansicht-liste .seiten .doppelseite {
    margin: 0 0 30px 0;
  }
  body.ansicht-liste .seite .beschreibung .aufgaben,
  body.ansicht-liste .seite .beschreibung .bedingungen,
  body.ansicht-liste .seite .beschreibung .bemerkungen,
  body.ansicht-liste .seite .beschreibung .kontakt {
    min-height: 40px;
  }
  
  body.ansicht-doppelseiten .seite {
    margin: 0;
    padding: 0 5px 0 5px;
    /* page-break-* funktioniert im Chrome (Stand Version 40) nicht, daher eine Mindesthöhe von 17cm vorgeben */
    min-height: 14cm;
  }
  body.ansicht-doppelseiten .seiten .doppelseite {
    margin: 0;
    page-break-after: always;
  }
  body.ansicht-doppelseiten .seite .beschreibung .aufgaben,
  body.ansicht-doppelseiten .seite .beschreibung .bedingungen,
  body.ansicht-doppelseiten .seite .beschreibung .bemerkungen,
  body.ansicht-doppelseiten .seite .beschreibung .kontakt {
    min-height: 80px;
  }
  
  @page {
    size: landscape;
  }
  
  
}