@charset "UTF-8";
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

/* =============================================================================
      Base
      ========================================================================== */
/*
    * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
    * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
    */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, button, input, select, textarea {
  font-family: sans-serif;
  color: #222;
}

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}

/*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection declarations have to be separate
    * Also: hot pink! (or customize the background color to match your design)
    */
::-moz-selection {
  background: #d2d2d2;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #d2d2d2;
  color: #fff;
  text-shadow: none;
}

/* =============================================================================
      Links
      ========================================================================== */
a {
  color: #111;
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: none;
}

/*.main a, .main a:visited, .main a:hover 
   { 
       color: #fff; 
   }*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active {
  outline: 0;
}

/* =============================================================================
      Typography
      ========================================================================== */
abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

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

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

/* Improve readability of pre-formatted text in all browsers */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* =============================================================================
      Lists
      ========================================================================== */
ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}

dd {
  margin: 0 0 0 40px;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

/* =============================================================================
      Embedded content
      ========================================================================== */
/*
    * 1. Improve image quality when scaled in IE7: h5bp.com/d
    * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
    */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

/*
    * Correct overflow not hidden in IE9
    */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
      Figures
      ========================================================================== */
figure {
  margin: 0;
}

/* =============================================================================
      Forms
      ========================================================================== */
form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer;
}

/*
    * 1. Correct color not inheriting in IE6/7/8/9
    * 2. Correct alignment displayed oddly in IE6/7
    */
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal;
}

/*
    * 1. Correct font-size not inheriting in all browsers
    * 2. Remove margins in FF3/4 S5 Chrome
    * 3. Define consistent vertical alignment display in all browsers
    */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

/*
    * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
    */
button, input {
  line-height: normal;
}

/*
    * 1. Display hand cursor for clickable form elements
    * 2. Allow styling of clickable form elements in iOS
    * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
    */
button, input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}

/*
    * Re-set default cursor for disabled elements
    */
button[disabled], input[disabled] {
  cursor: default;
}

/*
    * Consistent box sizing and appearance
    */
input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
    * Remove inner padding and border in FF3/4: h5bp.com/l
    */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
    * 1. Remove default vertical scrollbar in IE6/7/8/9
    * 2. Allow only vertical resizing
    */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/* Colors for form validity */
input:invalid, textarea:invalid {
  background-color: #f0dddd;
}

/* =============================================================================
      Tables
      ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

/* =============================================================================
      Chrome Frame Prompt
      ========================================================================== */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}

:root {
  --main-color: #e30713;
  --secondary-color:#fae301;
  --contrast-color:#fff;
}

.grayFont {
  color: #a9a9a9;
}

.redFont {
  color: #e30713;
}

* {
  box-sizing: border-box;
}

.positioned {
  float: left;
  width: 100%;
  position: relative;
  display: block;
  clear: both;
  box-sizing: border-box;
}

.fullHeight {
  height: 100%;
}

.fullWidth {
  width: 100%;
}

.padding {
  float: left;
  width: 100%;
  position: relative;
  display: block;
  clear: both;
  box-sizing: border-box;
}

.padding {
  padding: 1.4268292683vw;
}
@media only screen and (min-width: 1640px) {
  .padding {
    padding: 1.4625rem;
  }
}
@media only screen and (max-width: 820px) {
  .padding {
    padding: 0.73125rem;
  }
}
@media only screen and (min-width: 768px) {
  .padding.paddingMobile {
    padding: 0px;
  }
}

.noPaddingLeft {
  padding-left: 0 !important;
}

.noPaddingRight {
  padding-right: 0 !important;
}

.noPaddingTop {
  padding-top: 0 !important;
}

.noPaddingBottom {
  padding-bottom: 0 !important;
}

.section {
  float: left;
  width: 25%;
  margin-right: 5%;
  margin-bottom: 1em;
  display: block;
  position: relative;
  min-height: 10px;
  line-height: 1.5em;
}
.section.zweispaltig {
  width: 50%;
  margin-right: 50%;
}
.section.zweispaltig.right {
  float: right;
  width: 25%;
  margin-left: 5%;
  margin-right: 20%;
}

.zweidrittel {
  width: 66% !important;
  margin-right: 33%;
  margin-bottom: 1em;
}

.eindrittel {
  width: 33% !important;
  margin-right: 66%;
  margin-bottom: 1em;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.archivuebersicht .padding {
  padding: 30px !important;
  box-sizing: border-box;
}

.noPaddingBottom {
  padding-bottom: 0px;
}

.pure-g.archivuebersicht {
  margin-left: -30px;
  margin-right: -30px;
  width: calc(100% + 60px);
}

.inhaltsmodule.pure-g [class*=pure-u] {
  padding-top: 0 !important;
}

.anim750 {
  transition: all 750ms ease-in-out;
}

#Awesome {
  position: absolute;
  width: 180px;
  height: 180px;
  right: 5%;
  top: 5%;
  z-index: 1000000000000;
  backface-visibility: hidden;
  rotate: 15deg;
}

#Awesome .sticky {
  transform: rotate(45deg);
}

#Awesome:hover .sticky {
  transform: rotate(10deg);
}

#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}

#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.15);
  line-height: 1.2em;
  text-align: center;
  cursor: pointer;
  padding-top: 20%;
  font-size: 0.8em;
}

#Awesome .reveal .circle {
  background: #fafafa;
  rotate: 10deg;
}

#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}

#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}

#Awesome .back {
  height: 10px;
  top: 30px;
}

#Awesome:hover .back {
  height: 90px;
  top: 110px;
}

#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, 0), rgba(255, 255, 255, 0.8));
}

#Awesome:hover .back .circle {
  margin-top: -50px;
}

#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, 0.3);
}

#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, 0.1);
}

#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, 0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, 0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, 0) 75%, #f7bb37 95%);
}

#Awesome h4 {
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 1.2em;
  top: 33%;
  transition: opacity 50ms linear 400ms;
  font-size: 0.9em;
}

#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}

#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}

/* ==|== primary styles =====================================================
      Author: isiCore GmbH www.isicore.de



       Color Scheme:

                      #c8dfed helles blau
                   #b1d2e6 dunkles blau
                   #aacc7e grün
                   #d2d5d0 grau für aktiv balken

      ========================================================================== */
/***************************************


           Main Styles


   ***************************************/
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  position: relative;
  float: left;
  clear: both;
  display: block;
  width: 100%;
  min-height: 100%;
  background-color: #fff;
}

.bg1 {
  background-color: #fff;
}

.bg2 {
  background-color: #fff;
}

.bg3 {
  background-color: #fff;
}

.wrapper.startWrapper {
  background-color: #fff;
}

/*.footer, .push {
     height: 4em;
   }*/
.wrapper {
  color: #111;
  font-family: SwiftNeueLTPro-Book;
  font-weight: normal;
  font-style: normal;
}

.wrapper,
body {
  font-size: 1.28270042vw;
}

#tinymce {
  font-size: 1em;
}

.wrapper strong,
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
.wrapper h6 {
  font-family: SwiftNeueLTPro-Bold;
  font-weight: normal;
  font-style: normal;
}

p {
  margin-bottom: 1em;
}

input,
select,
textarea {
  font-family: SwiftNeueLTPro-Book;
  font-weight: normal;
  font-style: normal;
}

.positioned {
  box-sizing: border-box;
  float: left;
  width: 100%;
  clear: both;
  display: block;
  position: relative;
}

/***************************************


           Header Styles


   ***************************************/
.headerContent,
.main,
.footerContent {
  max-width: 1660px;
}

header {
  width: 100%;
  float: left;
  clear: both;
  background-color: var(--main-color);
  display: block;
  position: relative;
  border-bottom: 2px solid #fff;
}

#ajax .header {
  opacity: 0;
}

.header.headroom {
  position: fixed;
  left: 0px;
  right: 0px;
  top: -1px;
  z-index: 100;
}

.headroom--pinned {
  -moz-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}

.headroom--unpinned {
  /*-moz-transform: translate(0%, -100%);
     -webkit-transform: translate(0%, -100%);
     -o-transform: translate(0%, -100%);
     -ms-transform: translate(0%, -100%);
     transform: translate(0%, -100%);*/
}

.headerContent {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 90%;
  clear: both;
}

.breadcrumb {
  position: relative;
  float: left;
  width: 100%;
  clear: both;
  display: block;
  margin-bottom: 2em;
}

.breadcrumb,
.breadcrumb a {
  color: #a9a9a9;
}

.breadcrumb ul,
.breadcrumb li,
.breadcrumb a,
.breadcrumb .divider {
  float: left;
  display: inline-block;
  clear: none;
}

.breadcrumb .divider {
  margin: 0px 0.5em;
}

.headroom {
  will-change: transform;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  -moz-transition: -moz-transform 200ms ease-in-out;
  -o-transition: -o-transform 200ms ease-in-out;
  -ms-transition: -ms-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
}

.logo {
  float: left;
  clear: both;
  margin-right: 5vw;
  margin-top: 1.5vw;
  margin-bottom: 1.5vw;
  width: 40%;
}

@media screen and (max-width: 767px) {
  .logo {
    width: 70%;
  }
}
.logo img {
  max-width: 100%;
  width: 100%;
  opacity: 60%;
}

.suche {
  /*float:right;
     margin-bottom:20px;
     width:100%;
     clear:both;*/
  position: absolute;
  z-index: 1000;
  padding: 20px 0px 20px 0px;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1050px;
}

.suchBox {
  float: right;
  clear: both;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 2px;
}

.suchBox input {
  float: left;
  background-color: transparent;
  border: solid 0px #fff;
  margin-left: 0px;
  padding: 3px 5px;
  font-family: SwiftNeueLTPro-Book;
  font-weight: normal;
  font-style: normal;
  font-size: 0.85em;
  color: #a3c3da;
}

.suchBox input[type=submit] {
  /*background-color:#fff;*/
  border-left: 1px solid #fff;
}

.suchBox input[type=submit]:hover {
  background-color: #fff;
}

.socialIcon {
  float: right;
  width: 1.5em;
  display: inline-block;
  margin-left: 0.5em;
}

.socialIcon path {
  fill: var(--contrast-color);
}

.rot > a {
  color: red;
}

.submenu {
  font-size: 0.9em;
}

.menu {
  max-width: 580px;
}

body,
.pure-g [class*=pure-u] {
  font-family: SwiftNeueLTPro-Book;
}

.mfp-wrap {
  z-index: 5000000;
}

.mfp-bg {
  opacity: 0.85;
}

/***************************************


           Navigation Styles


   ***************************************/
.showNav {
  position: fixed;
  top: 0px;
  margin-top: 1.5vw;
  right: 5%;
  z-index: 1000000;
  width: 50px;
  height: 40px;
}

#nav-icon {
  width: 100%;
  height: 75%;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #111;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
  top: 40%;
}

#nav-icon span:nth-child(4) {
  top: 80%;
}

#nav-icon.open span:nth-child(1) {
  top: 40%;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 40%;
  width: 0%;
  left: 50%;
}

.navigation {
  position: fixed;
  top: 5vw;
  bottom: 5vw;
  left: 5vw;
  max-width: 90vw;
  right: 30vw;
  width: auto;
  background-color: rgba(245, 245, 245, 0.9);
  z-index: 100000;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 50px;
  font-size: 1.5em;
  font-family: SwiftNeueLTPro-Book;
  box-sizing: border-box;
}

.menu {
  max-width: 530px;
  border-bottom: solid 1px #000;
}

.navigation.opened {
  display: block;
}

.level1a {
  border-top: solid 1px #000;
  font-family: SwiftNeueLTPro-Bold;
}

.submenu {
  display: none;
  border-top: solid 1px #000;
  color: #838682;
}

.submenu a {
  color: #838682;
}

/***************************************


           General Styles


   ***************************************/
.main.plakat {
  max-width: none;
  width: 100%;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 2px;
  min-height: 100vh;
  padding-top: 0px;
}

.plakat {
  width: 100%;
  position: relative;
  float: left;
  clear: both;
  margin: 0px;
  background-color: var(--main-color);
  margin-top: 0;
  overflow-x: hidden;
}
.plakat .buttonStart {
  position: absolute;
  right: 5%;
  top: 5%;
  cursor: pointer;
  z-index: 10000;
  width: 10%;
}
@media screen and (max-width: 767px) {
  .plakat .buttonStart {
    position: relative;
    width: 33%;
    right: auto;
    top: auto;
    margin-left: 5%;
    margin-top: 5%;
  }
  .plakat .buttonStart img {
    width: 100%;
    transform: none;
    margin: 0;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.plakat img,
.plakat video {
  /*animation: 2s ease-out 0s 1 slideInFromRight;*/
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  float: none;
  clear: both;
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  clip-path: inset(1px 1px);
}
.plakat img :focus,
.plakat video :focus {
  outline: none;
}

.plakat img.raupe {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  width: 3vw;
}

.textUeberPlakat {
  position: relative;
  float: left;
  display: block;
  padding-top: 1em;
  width: 90%;
  max-width: 1660px;
  min-height: 1000px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--contrast-color);
  -webkit-font-feature-settings: "onum" 1;
  -moz-font-feature-settings: "onum" 1;
  -ms-font-feature-settings: "onum" 1;
  font-feature-settings: "onum" 1;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .textUeberPlakat {
    min-height: 10px;
  }
}

.textUeberPlakat {
  font-size: 2.5766871166vw;
  line-height: 1.3em;
}

@media screen and (min-width: 2000px) {
  .textUeberPlakat {
    font-size: 3.2208588957rem;
  }
}
@media screen and (max-width: 892.619047619px) {
  .textUeberPlakat {
    font-size: 1.4375rem;
  }
}
.textUeberPlakat h1 {
  font-family: SwiftNeueLTPro-Book;
  font-size: 1.422107787em;
  line-height: 1.3em;
  margin-bottom: 0.5em;
}
.textUeberPlakat h1 a {
  color: #fff;
  text-decoration: none;
}

.textUeberPlakat p {
  margin-bottom: 1em;
}

.textUeberPlakat a {
  text-decoration: none !important;
}

.textUeberPlakat p:nth-last-child(-n+3), a > .textUeberPlakat p:nth-last-child(-n+3) {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0px 0px 0px var(--main-color);
}

.hinweisStartseite {
  background-color: transparent;
  width: 100%;
  max-width: 1660px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8em;
  line-height: 1.3em;
  padding-right: 25%;
}
.hinweisStartseite p, .hinweisStartseite a {
  color: #fff !important;
}

.main {
  width: 90%;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 80px 0px;
  clear: both;
  position: relative;
  display: block;
  overflow: auto;
}

.main a {
  text-decoration: underline;
}

#ajax {
  float: left;
  width: 100%;
  clear: both;
}

#loading {
  width: 24px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0px 0px -12px;
  position: absolute;
  display: none;
  z-index: 10000000;
  background-image: url(/media/1192/loading.gif);
  background-position: center center;
  background-repeat: no-repeat;
}

.section {
  float: left;
  width: 25%;
  margin-right: 5%;
  display: block;
  position: relative;
  min-height: 10px;
  line-height: 1.5em;
}

.lt-ie8 .section {
  margin-right: 4%;
}

.section.zweispaltig {
  width: 50%;
  margin-right: 50%;
}

.section h1 {
  font-size: 2em;
  margin-bottom: 10px;
  line-height: 1.3em;
  /*font-family: SwiftNeueLTPro-Book;*/
}

.section h2 {
  float: left;
  display: inline;
  font-size: 1em;
  margin: 0px 5px 0px 30px;
}

.section h2.subheadline {
  float: none;
  display: block;
  font-size: 1em;
  margin: 0px;
}

.section h2.audioheadline {
  float: none;
  display: block;
  margin-bottom: 5px;
  font-size: 1em;
  margin: 0px 0px 0px 0px;
}

.section img.hauptbild {
  width: 100%;
  margin: 0px 0px 1em 0px;
  padding-bottom: 10px;
}

.white {
  color: #fff;
  /*background-color:#aacc7e;*/
}

.bildergalerie {
  float: left;
  width: 100%;
  clear: both;
  margin: 0px 0px 10px 0px;
}

.bildergalerie img.galerieImg {
  width: 23%;
  margin-right: 2%;
  float: left;
  margin-bottom: 2%;
}

.navSection .bildergalerie img.galerieImg {
  width: 100%;
  margin-right: 0%;
}

.bildergalerieHauptbild {
  width: 100%;
}

.bildergalerieHauptbild a {
  width: 100%;
  display: block;
}

/***************************************


           Startpage Styles


   ***************************************/
.ankuendigungStart {
  float: left;
  width: 100%;
  color: #fff;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 40px 0px 0px 0px;
}

.hinweisStart {
  float: left;
  width: 100%;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: 0px;
}

body,
.wrapper.startWrapper {
  background-color: #fff;
  color: var(--main-color);
}

.startWrapper .zweispaltig {
  width: 60%;
  clear: none;
  margin-right: 0;
}

.ankuendigungStart {
  color: var(--main-color);
  font-size: 2em;
  line-height: 1.2em;
}

.zweispaltigRechts {
  width: 40%;
  padding-left: 5%;
  float: right;
  clear: none;
  display: block;
  position: relative;
  box-sizing: border-box;
}

.hinweisStart {
  font-size: 1.3em;
}

.linkMapContainer {
  position: relative;
  float: left;
  display: inline-block;
  clear: both;
  margin-top: 2em;
}

.linkMap {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 100%;
  z-index: 100;
}

.linkMap a {
  display: block;
  float: left;
  clear: none;
  position: relative;
  height: 100%;
}

a.first {
  width: 31%;
}

a.second {
  width: 31%;
}

a.third {
  width: 18%;
}

a.fourth {
  width: 20%;
}

/*
.flex-direction-nav a.flex-next:before {
    content: '\f002';
} 

.flex-direction-nav a:before {
    color: #fff;
    font-size: 50px;
    display: inline-block;
    content: '';
}*/
.flex-control-nav {
  bottom: -60px;
}

@media only screen and (max-width: 768px) {
  .startWrapper .zweispaltig,
  .zweispaltigRechts {
    width: 100%;
    margin-top: 2em;
  }
}
/***************************************


           Detailpage Styles


   ***************************************/
/************ video ***************/
.mediaSection {
  float: left;
  width: 100%;
  margin: 10px 0px 30px 0px;
  background-color: #000;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/************ Übersichtsseite  ***************/
.subPage {
  float: left;
  width: 100%;
  clear: both;
  margin-bottom: 30px;
}

.subPage a {
  color: #111;
}

.subPage .vortragender {
  width: 100%;
}

.section .subPage .hauptbild {
  margin: 0px 0px 5px 0px;
  float: left;
  width: 48%;
  margin-right: 52%;
  clear: both;
}

.subPage .galerieImg {
  float: left;
  width: 48%;
  margin-right: 2%;
  margin-bottom: 5px;
}

.subPage .bild {
  margin: 10px 0px 0px 0px;
  float: left;
  width: 100%;
  clear: both;
}

.termine,
.vortragende {
  float: left;
  width: 100%;
  clear: both;
  margin-top: 0.5em;
}

/************ Buchseite  ***************/
.buch,
.cd {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  min-height: 10px;
  float: left;
  clear: both;
  padding: 0px;
  margin-bottom: 20px;
}

.section .buch img.hauptbild,
.section .cd img.hauptbild {
  margin: 0px;
}

.buchNavigation {
  float: left;
  clear: both;
  width: 90%;
  padding: 10px 5%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  height: 50px;
  overflow: auto;
}

/************ Archivseiten  ***************/
.main {
  overflow-x: hidden;
}

.border {
  border-bottom: solid 1px #000;
  border-top: solid 1px #000;
}

.archivGalerieImg {
  margin-bottom: 0px;
}

.archivIcons {
  position: absolute;
  z-index: 90;
  width: auto;
  right: 10px;
  top: 10px;
}

.archivIcon {
  width: 30px;
  margin-right: 0px;
  clear: none;
}

.overlay {
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(215deg, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 30%);
}

.archiv {
  float: left;
  width: 100%;
  clear: both;
}

.archivReferenten {
  width: 100%;
  float: left;
  clear: both;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.archivReferenten li {
  width: 100%;
  float: left;
  clear: both;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-bottom: solid 1px #fff;
  padding: 10px 0px;
  margin-bottom: 10px;
}

.archivReferenten a {
  display: block;
  width: 100%;
  clear: both;
  float: left;
  position: relative;
}

.archivBild {
  width: 20%;
  float: left;
}

.archivGalerieImg {
  width: 100%;
  margin-bottom: 5px;
}

.archivTitle {
  float: right;
  width: 68%;
  margin-top: -5px;
}

.archivIcons {
  float: right;
  width: 6%;
  margin-left: 1%;
  min-height: 10px;
  max-width: 32px;
}

.archivIcon {
  float: left;
  width: 100%;
  clear: both;
}

.archivIcon img {
  float: left;
  clear: both;
  width: 100%;
  margin-bottom: 5px;
  max-width: 32px !important;
}

/************ Audioplayer  ***************/
.audioContainer {
  float: left;
  width: 100%;
  clear: both;
  margin-bottom: 20px;
}

.audiojs audio {
  position: absolute;
  left: -1px;
}

.audiojs {
  width: 100%;
  height: 36px;
  margin-bottom: 5px;
  background: #404040;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
  background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
  margin: 10px 0px 5px 0px;
}

.audiojs .play-pause {
  width: 10%;
  height: 40px;
  padding: 4px 6px;
  margin: 0px;
  float: left;
  overflow: hidden;
  border-right: 1px solid #000;
}

.audiojs p {
  display: none;
  width: 25px;
  height: 40px;
  margin: 0px;
  cursor: pointer;
}

.audiojs .play {
  display: block;
}

.audiojs .scrubber {
  position: relative;
  float: left;
  width: 60%;
  background: #5a5a5a;
  height: 14px;
  margin: 10px;
  border-top: 1px solid #3f3f3f;
  border-left: 0px;
  border-bottom: 0px;
  overflow: hidden;
}

.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 14px;
  width: 0px;
  background: #ccc;
  z-index: 1;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
  background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%);
}

.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 14px;
  width: 0px;
  background: #000;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
  background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%);
}

.audiojs .time {
  float: right;
  height: 36px;
  line-height: 36px;
  margin: 0px 0px 0px 6px;
  padding: 0px 6px 0px 12px;
  border-left: 1px solid #000;
  color: #ddd;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.audiojs .time em {
  padding: 0px 2px 0px 0px;
  color: #f9f9f9;
  font-style: normal;
}

.audiojs .time strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;
}

.audiojs .error-message {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 36px;
  width: 400px;
  overflow: hidden;
  line-height: 36px;
  white-space: nowrap;
  color: #fff;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.audiojs .error-message a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: wrap;
}

.audiojs .play {
  background: url("/AudioPlayer/player-graphics.gif") -2px -1px no-repeat;
}

.audiojs .loading {
  background: url("/AudioPlayer/player-graphics.gif") -2px -31px no-repeat;
}

.audiojs .error {
  background: url("/AudioPlayer/player-graphics.gif") -2px -61px no-repeat;
}

.audiojs .pause {
  background: url("/AudioPlayer/player-graphics.gif") -2px -91px no-repeat;
}

.playing .play,
.playing .loading,
.playing .error {
  display: none;
}

.playing .pause {
  display: block;
}

.loading .play,
.loading .pause,
.loading .error {
  display: none;
}

.loading .loading {
  display: block;
}

.error .time,
.error .play,
.error .pause,
.error .scrubber,
.error .loading {
  display: none;
}

.error .error {
  display: block;
}

.error .play-pause p {
  cursor: auto;
}

.error .error-message {
  display: block;
}

/********************* Anmeldung ************************/
.anmeldung,
.anmeldung strong {
  float: left;
  clear: both;
  width: 100%;
}

.anmeldung h3 {
  float: left;
  clear: both;
  width: 100%;
  padding-top: 1.5em;
}

.anmeldung textarea {
  float: left;
  width: 90%;
  clear: both;
  margin: 10px 0px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 0px #fff;
  padding: 5px;
  font-size: 0.9em;
}

.anmeldung small {
  line-height: 1em;
  font-size: 0.8em;
  color: #111;
}

.veranstaltung {
  float: left;
  width: 100%;
  clear: both;
  line-height: 1.2em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: solid 1px #000;
}

.veranstaltungKategorie {
  float: left;
  width: 100%;
  clear: both;
  padding-top: 1.5em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: solid 1px #000;
  font-weight: 900;
}

.veranstaltungTitel {
  float: left;
  width: 70%;
  /*color:#fff;*/
}

.ausgebuchtHinweis {
  float: left;
  width: 100%;
  position: relative;
  clear: both;
  margin-top: 0.5em;
}

.veranstaltungTitel input {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 0px #000;
  padding: 5px 10px;
  font-size: 0.9em;
  margin-top: 5px;
}

.veranstaltungAnmeldung {
  float: left;
  width: 15%;
  text-align: right;
}

.veranstaltungAnmeldung select,
.veranstaltungPreis select {
  padding: 5px;
  width: 50px;
  margin-bottom: 5px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 0px #000;
  float: right;
}

.veranstaltungPreis {
  float: right;
  width: 15%;
  text-align: right;
}

.summe {
  float: left;
  width: 100%;
  clear: both;
  border-top: solid 2px #fff;
  border-bottom: solid 2px #fff;
  margin: 20px 0px;
  padding: 10px 0px;
}

.inputContainer {
  float: left;
  width: 100%;
  clear: both;
  margin-bottom: 10px;
}

.label {
  float: left;
  width: 40%;
  color: #222;
}

.labelError {
  color: #b654bd;
  float: left;
  width: 40%;
}

#errorText {
  float: left;
  clear: both;
  width: 100%;
  color: #b654bd;
  margin-top: 20px;
}

.inputDiv {
  float: right;
  width: 55%;
}

.inputContainer select,
.inputContainer input {
  padding: 5px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 0px #000;
  float: right;
  width: 93.5%;
}

.inputContainer input {
  width: 90%;
}

.buttonContainer {
  float: left;
  width: 100%;
  clear: both;
  margin: 30px 0px;
  padding: 20px 0px;
  border-top: solid 1px #000;
}

.buttonContainer input {
  background-color: #fff;
  border: solid 0px #fff;
  padding: 10px 20px;
  float: left;
}

input.weiter {
  float: right;
}

/************ Kalenderübersicht ***********************/
.table {
  display: table;
}

.table a {
  text-decoration: none;
}

.tableRow {
  display: table-row;
}
.tableRow.hauptevent {
  background-color: rgba(227, 7, 19, 0.0784313725);
}
.tableRow.isPastEvent {
  background-color: #fff !important;
  color: #a9a9a9;
}
.tableRow.isPastEvent a, .tableRow.isPastEvent a:hover, .tableRow.isPastEvent a:visited, .tableRow.isPastEvent .redFont {
  color: #a9a9a9;
}

.tableRow:hover {
  background-color: #efefef;
}

.tableCell {
  display: table-cell;
  padding: 0.5rem;
  border-right: solid 1px #000;
  border-top: solid 1px #000;
  vertical-align: top;
}

.tableCell p {
  margin-bottom: 0px;
}

.tableCell a {
  height: 100%;
}

.tableCell.kalenderDatum {
  border-right: solid 3px #000;
  text-align: right;
  line-height: 1em;
}

.tableCell .day {
  font-size: 2em;
  line-height: 1em;
}

.tableCell.kalenderTickets {
  border-right: solid 0px #000;
}

.spacingTableCell {
  display: table-cell;
  padding: 0.5rem;
}

@media screen and (max-width: 900px) {
  .table,
  .tableRow,
  .tableCell {
    display: block;
    position: realtive;
    width: 100%;
    float: left;
    clear: both;
    box-sizing: border-box;
  }
  .tableRow {
    margin-bottom: 1em;
  }
  .tableCell {
    border-right: solid 0px #000;
  }
  .tableCell.kalenderDatum {
    clear: none;
    width: 25%;
  }
  .kalenderKategorie {
    clear: none;
    width: 75%;
  }
}
.section h1 {
  font-size: 1.75em;
  margin: 0px 5px 0px 0em;
  line-height: 1.2em;
  /*font-family: SwiftNeueLTPro-Book;*/
}

.section.programm h1 {
  font-size: 1.36em;
  margin: 0px 5px 0px 2em;
  line-height: 1.2em;
  /*font-family: SwiftNeueLTPro-Book;*/
}

.section h2 {
  float: none;
  display: block;
  font-size: 1.75em;
  line-height: 1.2em;
  margin: 0px 5px 0px 0em;
  font-family: SwiftNeueLTPro-Book;
}

.section.programm h2 {
  float: none;
  display: block;
  font-size: 1.36em;
  margin: 0px 5px 0px 2em;
  font-family: SwiftNeueLTPro-Book;
}

.section h2.subheadline {
  float: none;
  display: block;
  font-size: 1.75em;
  line-height: 1.3em;
  margin: 0px;
  color: #e30d17;
}

.section h2.audioheadline {
  float: none;
  display: block;
  margin-bottom: 5px;
  font-size: 1em;
  margin: 0px 0px 0px 0px;
}

.section img.hauptbild {
  width: 100%;
  margin: 0px 0px 1em 0px;
  padding-bottom: 10px;
}

.white {
  color: #fff;
  /*background-color:#aacc7e;*/
}

.bildergalerie {
  float: left;
  width: 100%;
  clear: both;
  margin: 2em 0px;
}

.bildergalerie img.galerieImg {
  width: 23%;
  margin-right: 2%;
  float: left;
  margin-bottom: 2%;
}

.navSection .bildergalerie img.galerieImg {
  width: 100%;
  margin-right: 0%;
}

.bildergalerieHauptbild {
  width: 100%;
}

.bildergalerieHauptbild a {
  width: 100%;
  display: block;
}

/***************************************


           Footer Styles


   ***************************************/
.footer {
  float: left;
  width: 100%;
  clear: both;
  background-color: var(--main-color);
  padding-top: 2em;
}

.startFooter {
  background-color: var(--main-color);
}

.footerContent {
  margin: 20px auto 40px auto;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 90%;
  clear: both;
}

.footer,
.footer a {
  color: #fff;
}

.startFooter.footer,
.startFooter.footer a {
  color: #fff;
}

/* ==|== media queries ======================================================
      EXAMPLE Media Query for Responsive Design.
      This example overrides the primary ('mobile first') styles
      Modify as content requires.
      ========================================================================== */
@media screen and (max-width: 1500px) {
  .wrapper,
  body {
    font-size: 1.202531644rem;
  }
}
@media screen and (max-width: 1100px) {
  /************** navigation *******************/
  /******************** detailseiten **************/
  .section,
  .section.zweispaltig,
  .zweispaltigRechts,
  .mediaSection {
    width: 100%;
    clear: both;
  }
  .bildergalerie img.galerieImg {
    width: 48%;
  }
  .flex-control-nav {
    bottom: -80px;
  }
  .plakat img.raupe {
    width: 30px;
    height: 100px;
  }
  .main.plakat {
    margin-bottom: 0px;
  }
  .plakat {
    overflow-x: hidden;
  }
  .plakat img {
    width: 130%;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .plakat img.raupe {
    width: 20px;
    height: 67px;
  }
}
@media screen and (max-width: 860px) {
  .breadcrumb {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .showNav {
    margin-top: 2.5vw;
    width: 30px;
    height: 25px;
  }
  .navigation {
    right: 5vw;
    font-size: 1.3em;
  }
  .plakat img {
    width: 180%;
    margin-left: 50%;
    transform: translateX(-60%);
    position: relative;
  }
}
/* ==|== non-semantic helper classes ========================================
      Please define your styles before this section.
      ========================================================================== */
/* For image replacement */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
}

.ir br {
  display: none;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}

/* Contain floats: h5bp.com/q */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* ==|== print styles =======================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  /* Black prints faster: h5bp.com/s */
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  /* Don't show links for images, or javascript/internal links */
  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;
  }
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */

/*# sourceMappingURL=styles.css.map */