/*	Author: Sascha Milivojevic (info@hey-sascha.de):
   
		------------------------------------------------------
   
		Schwabenakademie Relaunch stylesheet
  
		----------------------------------------------------*/
		
/*	CSS Imports
  
		----------------------------------------------------*/
        
/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * 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.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #000;
    color: #FFF;
    text-shadow: none;
}

::selection {
    background: #000;
    color: #FFF;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

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

  
html, body {
  width: 100% !important;
  margin: 0  !important;
  padding: 0  !important;
}

@media screen and (max-width: 780px) {
html, body {
  position: relative;
  overflow-x:hidden;}
}

@supports (-webkit-overflow-scrolling: touch) {
html, body {
  position: relative;
  overflow-x:hidden;} 
}

body {
  overflow-x: hidden;
}
  
div img, figure img, li img {
  max-width: 100%;
  width: auto\9; /* ie8 */}
  
.video_container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  
/* ==========================================================================
   Flex Layout
   ========================================================================== */
.flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse { display: flex; flex-wrap: wrap;}   
.flex-row { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
/* 
 justify-content
 This defines the alignment along the main axis. -> horizontal zueinander
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
*/
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-around { justify-content: space-around; }
/* 
 align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line. -> zueinander in der gleichen Zeile/Spalte bei unterschiedlicher Containerhöhe
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline 
*/
.ai-stretch { align-items: stretch; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }
/* 
 align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline 
*/
.ac-stretch { align-content: stretch; }
.ac-center { align-content: center; }
.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-baseline { align-content: baseline; }
.ac-between { align-content: space-between; }
.ac-evenly { align-content: space-evenly; }
.ac-around { align-content: space-around; }



  
/* ==========================================================================
   COLORS
   ========================================================================== */
body {background-color:#FFF; color: #000; font-family: FedraSansStdNormal, Arial, Helvetica, Geneva, sans-serif; font-weight: normal; }
h1, h2, h3, h5 {font-family: FedraSansStdNormal; font-weight: normal; margin-top: 0;}
.splitscreener h1, .ueberschrift h2 { hyphens: auto;}

h4, p, div { font-family: FedraSansStdNormal; font-weight: normal; font-size: 18px; line-height: 22px;}
figcaption {font-size: 14px; line-height: 20px; margin-top: 4px;}
p { margin: 0 0 22px 0; max-width: 662px;}
.negative { color: #FFF}
ul.intern a, ul.mobile a { color: #FFF; text-decoration: none;}
ul.extern a { color: #000; text-decoration: none;} /*CHANGE*/


/* KATEGORIE */
.flieder { background-color: #CCC3E2;} /* Sprachen, Kommunikation */
.hellblau { background-color: #C6E5F1;} /* Philosophie, Religion, Geschichte */
.orange { background-color: #FF7E46;} /* Künstlerische Praxis, Theater */
.gelb { background-color: #FFD601; } /* öffentliche Veranstaltungen */
.gruen { background-color: #28C373; } /* Persönlichkeitsbildung, Gesundheit, Natur */
.chromefarben { background-color:#c5c4b9;} /* Fremdveranstaltungen */
.irsee, .splitscreener .text { background-color: #006D73;} /* Schwabenakademie */
.gold { background-color: #bfa951; } /* Kunst, Literatur, Musik */
.white { background-color: #FFF; }
.grau { background-color: #eee; }
.pink { background-color:#F191F2;}

#hamburger-icon span { background-color: #000; }
.kategorie a { 
    color: #000; 
    text-decoration: none; 
    position: relative;
    z-index: 10;}
    
.kategorie a:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120%;
    max-height: 4px;
    transition: max-height 0.25s ease-out;
    z-index: -1; }
    
.cat3 .kategorie a:before, .cat3 .kopf, .cat3 .card, .highlight .cat3 { background-color: #CCC3E2;} /* Sprachen, Kommunikation */
.cat1 .kategorie a:before, .cat1 .kopf, .cat1 .card, .highlight .cat1 { background-color: #C6E5F1;} /* Philosophie, Religion, Geschichte */
.cat4 .kategorie a:before, .cat4 .kopf, .cat4 .card, .highlight .cat4 { background-color: #FF7E46;} /* Künstlerische Praxis, Theater */
.cat2 .kategorie a:before, .cat2 .kopf, .cat2 .card, .highlight .cat2 { background-color: #FFD601; } /* öffentliche Veranstaltungen */
.cat5 .kategorie a:before, .cat5 .kopf, .cat5 .card, .highlight .cat5 { background-color: #28C373; } /* Persönlichkeitsbildung, Gesundheit, Natur */
.cat6 .kategorie a:before, .cat6 .kopf, .cat6 .card, .highlight .cat6 { background-color:#c5c4b9;} /* Fremdveranstaltungen */
.cat7 .kategorie a:before, .cat7 .kopf, .cat7 .card, .highlight .cat7 { background-color: #006D73;} /* Schwabenakademie */
.cat8 .kategorie a:before, .cat8 .kopf, .cat8 .card, .highlight .cat8 { background-color: #bfa951; } /* Kunst, Literatur, Musik */
.cat9 .kategorie a:before, .cat9 .kopf, .cat9 .card, .highlight .cat9 { background-color: #eee; } /* Akademie im Profil */
.cat10 .kategorie a:before, .cat10 .kopf, .cat10 .card, .highlight .cat10 { background-color: #F191F2; } /* Digitale Miniseminare */
.highlight .kategorie a:before, .event-detail .kategorie a:before {background-color:#FFF;}

.kategorie a:hover:before { max-height: 120%; transition: max-height 0.25s ease-in;}

/* ==========================================================================
   FONT DEFINITIONS
   ========================================================================== */
nav li { font-size: 14px; line-height: 20px;}
nav ul.mobile li { font-size: 14px; line-height: 25px;}
p { font-size: 18px; line-height: 22px; }
.intro h1 { font-size: 72px; line-height: 72px; color: #FFF; text-align: center}
strong { font-family: 'FedraSansStdMedium'; font-weight: normal;}
/* ==========================================================================
   HEADER Layout
   ========================================================================== */
header {
    position: fixed;
    width: 100%;
    height: 81px;
    border-bottom: 1px solid #000;
    top: 0;
    left: 0;
    transition: all 0.5s;
    background-color: #FFF;
    z-index: 9999;
    display:none;}
@media screen and (min-width: 1280px) {    
header.scrollUp { transform: translateY(-82px);}
}
.opener {
  display: none;
  cursor: pointer;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  position: relative;
  margin-right: 15px;
  margin-top: 20px;
  border: 1px solid #000; }

header .logo { width: 242px; height: 81px; border-right: 1px solid #000;}
header .logo .bildmarke { width: 141px;} 

nav { 
    width: calc(100% - 242px);
    background-color: #FFF;}
    
nav ul.extern, nav ul.intern {
    padding: 0;
    margin: 0;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;}
    
nav ul.mobile { 
    display:none;
    margin: 60px 15px;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none; } 
    
nav ul.extern {justify-content: space-evenly;}
nav ul.intern {justify-content: flex-start; background-color: #006D73;}
    
nav ul.extern li { padding: 10px 2px;}
nav ul.intern li { padding: 10px 2.5vw;}
nav ul.intern li.active, nav ul.intern li.active a, nav ul.intern li.trail a { text-decoration: underline;}
nav ul.intern li, nav ul.mobile li {text-transform: uppercase;}    
nav ul.extern li { 
    height: 40px;
    text-align: center;} 
nav ul.extern li a:hover, nav ul.intern li a:hover{ text-decoration: underline;}  
nav ul.extern li:nth-child(even) {border-left: 1px solid #000;} 
nav ul.intern li {border-left: 1px solid #FFF;} 
nav ul.extern li:last-child { display: none;}
nav ul.intern li:first-child { border-left: none;}
nav ul.intern li:last-child { border-right: 1px solid #FFF;}
@media screen and (max-width: 1279px) { 
.opener { display: block; }
nav { 
    width: 100%;
    max-height: 0;
    transition: max-height 0.25s ease-out;
    overflow: hidden;}
nav.expanded ul.intern, nav ul.intern { display: none; }
nav ul.extern {
    justify-content: flex-start;
    align-items: center;
    height: auto;}
nav ul.extern li a{
    display: block;
    line-height: 25px;
    padding: 0 10px; }
header .logo { width: 172px; border-right: none;}

nav ul.extern li { 
    padding: 8px 0;
    background-color: #FFF; }
nav ul.extern.irsee { }
nav.expanded ul.mobile { display: flex; flex-direction: center;}
nav.expanded {
    display:block;
    position: absolute;
    top:81px;
    width: 100%;
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
    background-color: #006D73;  }

nav ul.mobile {margin: 50px 0; }
nav ul.mobile>li { margin-bottom: 5px; padding-left: 15px; padding-right: 10px;}
nav ul.extern { background-color: #FFF;}
nav ul.extern li:nth-child(even) {border-left: none; width:0px;} 
nav ul.extern li:nth-child(odd) {border-bottom: 1px solid #000; border-right: 1px solid #000; margin-bottom: 1px; flex-grow:1;} 
}
   
/* ==========================================================================
   STARTSEITE INTRO
   ========================================================================== */   

main {
    display: block; 
    width: 100%;
    margin-top: 81px;
    min-height: 50vh;} 
    
main .intro {
    height: calc(100vh - 81px);
    width: 100%; }
    
.fullbg { 
    width: 100%;
    height: 100%;}
    
.fullbg .heading {
    width: 100%;
    padding:15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);}
    
.fullbg img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
  } 
  
.ticker-wrap {
  height: auto;
  z-index: 8999;
  margin: 0; 
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000; }

.ticker {  
  width: 100vw;
  padding: 11px 0 10px 0;
  display: inline-block; 
  white-space: nowrap;
  padding-right: 0;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: ticker;
          animation-name: ticker;
  -webkit-animation-duration: 70s;
          animation-duration: 70s;}

.ticker-item {
  display: inline-block;
  padding: 0px 20vw;
  margin: 0;
  font-size: 36px;
  line-height: 40px;}


    
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-500%, 0, 0);
    transform: translate3d(-500%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-500%, 0, 0);
    transform: translate3d(-500%, 0, 0);
  }
} 

/* ==========================================================================
   FIXED IMAGE
   ========================================================================== */
   
.fixedIMG {
    z-index: -1;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;}

/* ==========================================================================
   PARAGRAPH
   ========================================================================== */
   
.paragraph {
    width: 100%;
    padding: 30px 15px 60px 15px;
    background-color: #FFF;} 
    
.newsletterWrapper .paragraph {
    padding: 30px 15px 0px 15px;
} 
    
div#kalender { 
    width: 100%;
    padding: 30px 15px 30px 15px;
    background-color: #FFF;}
    
.paragraph .ueberschrift { width: 100%; }
    
.paragraph .ueberschrift h2 {
    font-size: 48px;
    line-height: 54px;
    margin: 5px 0 61px 0;} 
    
.ueberschrift h2 {
    font-size: 48px;
    line-height: 54px;
    margin: 5px 0 61px 0;} 
    
.paragraph h5 {font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 22px; }
    
.fliesstext {
    width: 100%;
    max-width: 690px;}
    
.fliesstext .bild { 
    width: 100%;
    border-top: 1px solid #000;
    margin-top: 10px;
    padding: 30px 0;}
    
.fliesstext h4 {margin-top: 40px !important; margin-bottom: 16px; font-size: 18px; line-height: 22px; text-transform: uppercase; width: 100%; border-bottom: 1px solid #000;}

p a, .fliesstext a, label a { color: #000; text-decoration: underline;}
p a:hover, .fliesstext a:hover, label a:hover { text-decoration: none;}    
.gap, #who-is-who { margin-bottom: 70vh;}

/* ==========================================================================
   Splitscreen
   ========================================================================== */
   
.splitscreen { 
    width: 100%; 
    border-radius: 10px;}
.splitscreen .item { width: 50%;}

@media screen and (max-width: 900px) { 
.splitscreen .item { width: 100%;}
}

/* ==========================================================================
   HIGHLIGHT
   ========================================================================== */
   
.highlight, .terminkalender, .karussel, #who-is-who, div#kalender, div#programm, .team {
    width: 100%;
    padding: 0px 5px 60px 5px;
    background-color: #FFF !important;}
    
.highlight { border-top: 1px solid #000;}

div#kalender { border-bottom: 1px solid #000; padding-bottom: 0 !important;}
    
#who-is-who .ueberschrift, .highlight .ueberschrift, .terminkalender .ueberschrift, .aktuelles .ueberschrift, #referenten .ueberschrift, #vorschau .ueberschrift, div#kalender .ueberschrift, div#programm .ueberschrift { width: 100%; padding: 30px 10px 60px 10px; }

.karussel .ueberschrift { width: 100%; padding: 30px 15px 0 15px; }
    
#who-is-who .ueberschrift h2, .highlight .ueberschrift h2, .terminkalender .ueberschrift h2, .karussel .ueberschrift h2, .aktuelles .ueberschrift h2, #referenten .ueberschrift h2, #vorschau .ueberschrift h2, div#kalender .ueberschrift h2, div#programm .ueberschrift h2 {
    font-size: 48px;
    line-height: 54px;
    margin: 0;}

@media screen and (max-width: 600px) { 
.ueberschrift h2 {
    font-size: 36px !important;
    line-height: 40px !important;}
}    

.highlight .event { 
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;}
    
.highlight .grafik, .highlight .grafik, .highlight .grafik img { 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;}
    
.highlight .grafik  {
    background-position: center center;
    background-size: cover;}

.highlight .grafik { min-height: 350px;} 
    
.highlight .event h3, .eventlist .event .card h3, .eventlist-slider .event h3 { 
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 30px;
    width: 100%;
    font-family: 'FedraSansStdMedium';}
    
.highlight .event h4 { margin: 10px 0 20px 0; padding:0;}

.highlight .event h5 { 
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 0;
    width: 100%;
    font-family: 'FedraSansStdMedium';}
    
.highlight .event .kopfzeile { padding: 0; margin:0;}

.highlight .event .kategorie,
.highlight .event .inhalt,
.highlight .event .kopfzeile { width: 100%;}

.highlight .event .datum,
.highlight .event .referent,
.highlight .event .uhrzeit,
.highlight .event .nummer { width: 50%;}

@media screen and (max-width: 900px) { 
.highlight .event .referent,
.highlight .event .uhrzeit { width: 100%;}
.highlight .event .uhrzeit { margin-bottom: 30px;}
.highlight .event { 
    padding: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;}
.highlight .grafik, .highlight .grafik, .highlight .grafik img { 
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;}
}

.highlight .event .inhalt { margin: 38px 0 60px 0;}
.highlight .event .kategorie { margin-bottom: 23px; font-family: 'FedraSerifAStdBook'; font-size: 16px; line-height: 20px; text-transform: uppercase;}
.highlight .event .datum, .highlight .event .nummer { font-family: 'FedraSansStdMedium'; margin-bottom: 10px;}

.highlight .event .inhalt a, .highlight .event .referent a { color:#000; text-decoration: underline;} 
.buttons { width: 100%; }
.btn, .submit { font-size: 14px; padding: 5px 10px; border: 1px solid #000; margin-right: 10px; background-color: #fff;   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.btn:hover, .submit:hover {background-color: #F1F1F1;}
.btn a { color: #000; text-decoration: none; font-size: 14px;}

/* ==========================================================================
   TERMINKALENDER
   ========================================================================== */
   
.terminkalender {
    width: 100%;
    padding: 0px 5px 0 5px;
    background-color: #FFF;} 
    
.datepicker { padding: 0 15px;}

.datepicker label {
    display: block;
    width: 100%;}
    
.datepicker .formbody {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;}
.datepicker .mm_multitext { width: 350px;}  
.datepicker .submit_container { width: 120px; }    
.datepicker input { width: 120px; padding: 5px 0;}

.datepicker img { margin-right: 20px; margin-left: 4px; cursor:pointer;}

#ui-datepicker-div { z-index: 100 !important;}
    
/* ==========================================================================
   MINIKALENDER
   ========================================================================== */
.invisible { display: none; }

.mod_calendar h4 {font-family: 'FedraSerifAStdBook'; font-size: 16px; line-height: 20px; text-transform: uppercase; text-align: center;}

.mod_calendar {
    width: calc(33% - 13px);
    min-width: 290px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #000;
    margin-left: 10px;}

@media screen and (min-width: 1800px) {
.mod_calendar {
    width: calc(25% - 15px);}
 }
 
 @media screen and (max-width: 1024px) {
.mod_calendar {
    width: calc(50% - 10px);}
 }
 
 @media screen and (max-width: 580px) {
.mod_calendar {
    width: 100%;}
 }     
    
		
table.minicalendar {
		width: 100%;
		margin-bottom: 10px;
		margin-left: 3px;
        border: none;	}

table.minicalendar2 {
		width: 100%;
        border-collapse: separate;
        border-spacing: 5px;
		border: none;	}
		
.mod_calendar h5 {
    text-align: center;
    font-family: 'FedraSansStdMedium';
    font-size: 18px;
    line-height: 20px;}
		
.mod_calendar h5 a {
		color: #000;
        text-decoration: none;}
		
table.minicalendar td {		
		color: #000;
		font-size: 18px;
        line-height: 22px;
	  background-color: #fff;
		color: #000;
		text-align:center;
		padding: 14px 0;
		width: 14%;}
        

table.minicalendar2 td {
	font-size: 18px;
    line-height: 22px;
	color: #000;
	width: 14%;
	position: relative;
      text-align: center;
         padding: 10px;
     border: none;}
     
table.minicalendar2 td.today div, table.minicalendar2 td.active div, table.minicalendar2 td.selected div{
    width: 40px;
    height: 40px;
    background-color #000;
    border: 1px solid #000;
    color: #000; 
    border-radius: 20px;
    padding-top: 9px;
    text-align:center;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;}
    
table.minicalendar2 td.today div {
background-color: #F1F1F1;
}
    
table.minicalendar2 td.selected div, table.minicalendar2 td.selected div a {
    background-color: #000;
    color: #FFF;}
/* ==========================================================================
   EVENTLIST
   ========================================================================== */

.eventlist, .aktuelles {
    background-color: #FFF; 
    width: 100%;
    padding: 32px 15px 60px 15px;}

.eventkarussel {
    width: 100%;
    padding: 0 15px 60px 15px;
    border-bottom: 1px solid #000;}
    
.eventlist-slider, .bild-slider { 
    width: 100%;
    padding: 32px 0 10px 0;}   

.eventlist .event {
    width: calc(33.3% - 13px);
    margin-right: 20px;
    margin-bottom: 32px;
    transition: all 0.5s ease;} 
    
.eventlist.short .event:nth-child(n + 9) {
    position: fixed; top: -9999px; left: -9999px;}
    
@media screen and (min-width: 1025px) and (max-width: 1799px){    
.eventlist .event:nth-child(3n) {
    margin-right:0;}
}
    
@media screen and (min-width: 1800px) {
.eventlist .event {
    width: calc(25% - 15px);}
.eventlist .event:nth-child(4n) {
    margin-right:0;}
 }
 
 @media screen and (max-width: 1024px) {
.eventlist .event {
    width: calc(50% - 10px);}
 }
 
@media screen and (min-width: 581px) and (max-width: 1024px){    
.eventlist .event:nth-child(2n) {
    margin-right:0;}
}
 
 @media screen and (max-width: 580px) {
.eventlist .event {
    width: 100%;
    margin-right: 0;}
 }
ÿ  㰐ظ
.eventlist .event .kategorie, .eventlist-slider .event .kategorie {font-family: 'FedraSerifAStdBook'; font-size: 16px; line-height: 20px; text-transform: uppercase; margin-bottom: 12px; } 
.eventlist .event .card, .eventlist-slider .event .card {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    height: 300px;
    position: relative;} 
    
.eventlist .event .card .datum, .eventlist-slider .event .datum { font-family: 'FedraSansStdMedium'; padding-bottom: 10px; border-bottom: 1px solid #000;}
.eventlist .event .card h4, .eventlist-slider .event h4 { margin: 10px 0 20px 0; padding:0;} 

.eventlist .event .card .buttons, .eventlist-slider .event .card .buttons {
    position: absolute;
    bottom: 10px;
    left: 10px;}  

.eventlist-slider .event { margin-right: 20px;}  

.eventlist-slider *:focus {
    outline: none;
}

.carousel-nav {
    font-size: 40px;
    margin-top: 10px;
    cursor: pointer; } 
    
/* ==========================================================================
   AKTUELLES
   ========================================================================== */
.aktuelles .news, .aktuelles .ce_youtube {
    width: calc(33% - 13px);
    margin-bottom: 32px; 
    position: relative;
    border-left: 1px solid #000;
    height: auto;
    padding-bottom: 25px;
    margin-right: 20px;
    padding-left: 10px;} 
    
.aktuelles .news.download {
    height: auto;
    padding-bottom: 60px;}
    
@media screen and (min-width: 1281px){    
.aktuelles .news:nth-child(3n), .aktuelles .ce_youtube:nth-child(3n) {
    margin-right:0;}
}
    
 @media screen and (max-width: 1280px) {
.aktuelles .news, .aktuelles .ce_youtube {
    width: calc(50% - 10px);
    margin-right: 20px;}
 }
 
@media screen and (max-width: 1280px) and (min-width: 881px){    
.aktuelles .news:nth-child(odd), .aktuelles .ce_youtube:nth-child(odd) {
    margin-right:0;}
}
 
 @media screen and (max-width: 880px) {
.aktuelles .news, .aktuelles .ce_youtube {
    width: 100%;
    margin-right: 0;}
 }
    
.aktuelles .news .thumbnail {
    width: 100%;
    height: 30vh;
    padding-bottom: 10px;
    margin: 10px 0;}  
    
.aktuelles .news .datum,
.aktuelles .news .sparte { 
    width: 50%;
    font-size: 18px; 
    line-height: 22px;}

.aktuelles .news .datum { text-align: right;}

.aktuelles .news .inhalt { width: 100%;}

.aktuelles .news .inhalt h3 { 
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 20px;
    width: 100%;
    font-family: 'FedraSansStdMedium';}
    
.aktuelles .news .buttons {
    position: absolute;
    bottom: 0px;
    left: 10px;}  
    
.aktuelles .news .thumbnail .bgcover{
    width: 100%;
    padding-bottom: 75%;}

.aktuelles .news .thumbnail img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
  }
  
.mod_newslist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;} 
/* ==========================================================================
   EVENTDETAIL PAGE
   ========================================================================== */

.event-detail, .referenten-detail {
    width:100%;
    padding: 5px 5px 60px 5px;}
    
.event-detail .kopf {
    padding: 12px 10px 0 10px;
    border-radius: 10px;
    margin-bottom: 5px;} 
    
.event-detail .kopf h4 { font-size: 18px; line-height: 22px; margin: 10px 0 20px 0; padding-top: 10px; border-top: 1px solid #000;}
.event-detail .kopf h3 { font-family: 'FedraSansStdMedium'; font-size:24px; line-height: 28px;}    
.event-detail .kopf .datum { width: calc(25% - 20px); }
.event-detail .kopf .nummer { width: 75%;}
.event-detail .kopf .datum, .event-detail .kopf .nummer { font-family: 'FedraSansStdMedium'; font-size:18px; line-height: 20px;}
.event-detail .kategorie { width: 100%; margin-bottom: 23px; font-family: 'FedraSerifAStdBook'; font-size: 16px; line-height: 20px; text-transform: uppercase;}

.event-detail .grafik { width: calc(25% - 20px); min-height: 450px;} 
.event-detail .grafik img { height: 100%; object-fit: cover; object-position: center center; width: 100%; }

.event-detail .info { width: calc(33% - 20px); position: relative;} 
.event-detail .info a { color: #000;}
.event-detail .info a:hover { text-decoration: none;}
.event-detail .beschreibung { width: 41.66%;} 

.event-detail h3, .event-detail h4 { width: 100%; }
.event-detail h5 {  font-family: 'FedraSansStdMedium'; font-size:18px; line-height: 22px; margin-bottom: 0; margin-top: 20px;}
.event-detail .inhalt { border-top: 1px solid #000; padding-top: 5px; }
.event-detail .inhalt .info .buttons { position: absolute; bottom: 0px; left: 0px;}  
.event-detail .inhalt .beschreibung { padding-top: 20px; padding-bottom: 60px; }
.event-detail .inhalt .beschreibung p {font-size:18px; line-height: 22px; margin-bottom: 20px;}
.event-detail .inhalt .info, .event-detail .inhalt .beschreibung, .event-detail .inhalt .grafik { }

@media screen and (max-width: 1023px) {  
.event-detail .grafik { width: calc(33.33333% - 20px); min-height: 400px;}
.event-detail .info { width: 66.66666%;}
.event-detail .beschreibung { width: 100%; margin-top: 30px;} 
 }
 
@media screen and (max-width: 600px) {  
.event-detail .grafik, .event-detail .info { width: 100%; min-height: 300px;} 
.event-detail .info { padding-bottom: 60px;} 
}

/* ==========================================================================
   Referent Detail
   ========================================================================== */
.referenten-detail { padding-top: 31px;}


.referenten-detail .fliesstext h1 {
    font-size: 48px;
    line-height: 54px;
    margin-bbottom: 30px;}
    
.referenten-detail .fliesstext h2 {font-family: 'FedraSansStdMedium'; font-size: 24px; line-height: 22px; margin-bottom: 30px;}    

.referenten-detail .fliesstext h3 { font-family: 'FedraSerifAStdBook'; font-size: 18px; line-height: 20px; margin-bottom: 11px; text-transform: uppercase;}

.referenten-detail .foto { width: 50%; margin-bottom: 20px;}

.referenten-detail .text-content { width: 100%;}
/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    width: 100%;
    background-color: #F1F1F1;
    padding: 30px 15px 100px 15px;
    border-top: 1px solid #000;}
    
footer h4 {margin-top: 0; margin-bottom: 16px; font-family: 'FedraSerifAStdBook'; font-size: 18px; line-height: 19px; text-transform: uppercase; width: 100%; border-bottom: 1px solid #000;}
    
footer .logo, footer .agbs, footer .toplink {
    width: calc(16.666% - 20px);} 

.toplink {text-align: center; padding: 30px 0;}
.toplink img { width: 80px;}
.toplink a { font-size: 60px; color: #000; text-decoration: none;}
    
footer .logo img, footer .traeger img { max-width: 120px; margin-bottom: 14px;}
    
footer .kontakt, footer .traeger {
    width: calc(25% - 10px);} 

footer .sitemap {
    width: 100%;}
    
footer .sitemap>ul {
    width: calc(16.66666% - 16px);
    margin:0;
    padding: 0;} 
    
footer li { font-size:14px; line-height: 16px }
    
footer .sitemap>ul li a { color: #000;}
    

    
@media screen and (max-width: 1280px) {
footer .logo, footer .agbs, footer .toplink { width: calc(25% - 20px); margin-bottom: 30px; }
footer .kontakt { width: 75%;}
footer .traeger { width: 50%;}
}
 
 @media screen and (max-width: 1024px) {
footer .sitemap>ul {
    width: calc(33.3333% - 13px);
    margin-bottom: 30px;}
 }
 
@media screen and (max-width: 780px) {
footer .sitemap>ul, footer .logo, footer .agbs{ width: calc(50% - 10px); }
footer .kontakt, footer .traeger, footer .toplink { width: 100%;} 
footer .toplink { margin-top: 30px;} 
}
 
footer .agbs ul { margin: 0; padding: 0; }
footer p { font-family: 'FedraSansStdMedium'; font-size: 14px; line-height: 21px; } 
footer ul li { list-style: none; font-size: 14px; line-height: 16px; margin-bottom: 10px; } 
footer ul li a { color: #000; text-decoration: none;  } 
footer .sitemap>ul ul { margin: 20px 0 0 0; padding: 0;} 
/* ==========================================================================
   PROGRAMM
   ========================================================================== */
.splitscreener { width: 100%; height: calc(50vh - 121px); min-height: 400px;  padding: 5px 0; background-color: #FFF;}   
.splitscreener .text, .splitscreener .bild { width: calc(50% - 8px); height: calc(50vh - 121px); min-height: 400px; margin-bottom: 5px; } 
.splitscreener .text { padding: 25px 8px 10px 10px; display: flex; }
.splitscreener .text div { width: 100%;}
.splitscreener .text h1 { font-size: 48px; line-height: 54px; color: #FFF;}
.splitscreener .text .btn { margin-top: 20px; width: auto;}
.splitscreener .text p { color: #FFF; font-size: 18px; line-height: 22px;}
.splitscreener .bild img { height: 100%; object-fit: cover; object-position: center center; width: 100%; } 
 @media screen and (max-width: 1023px) {
.splitscreener .text, .splitscreener .bild { width: calc(100% - 10px); min-height: 55vh; }
.splitscreener .text {margin-bottom: 5px;}
.splitscreener .text h1 { font-size: 36px; line-height: 40px; }   }
/* ==========================================================================
   Filter
   ========================================================================== */

.filterWrapper { padding: 5px; }

.filterWrapper .oeffnen, .filterWrapper .schliessen { height: 108px; width: 100%;}
.filterWrapper .oeffnen div img, .filterWrapper .schliessen div img { margin: 0 auto 10px auto;}
.filterWrapper .oeffnen div, .filterWrapper .schliessen div { width: 75px; text-align: center; font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 20px; cursor: pointer;}
.filterWrapper .schliessen, .filter { display: none; background-color:#F1F1F1; }
.filter { padding: 10px; height: 450px;;}
.filterWrapper .oeffnen.weg { display: none;}
.filterWrapper .schliessen.her, .filterWrapper .filter.her { display: flex;}

.programmfilterset {
    width: 100%;
    padding: 0 15px;}

.programmfilterset label {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    line-height: 16px;
    font-family: 'FedraSansStdMedium';}
    
.programmfilterset .formbody, .ref-filter .mm_text, .buttonWrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;}

select, input { font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 20px; }

.programmfilterset .mm_multitext { width: 330px;}     
.programmfilterset .mm_multitext input { width: 120px; padding: 5px 10px; border-radius: 12px;}
.programmfilterset select { padding: 5px 10px; border-radius: 20px;}
.programmfilterset .mm_select.fachbereich, .programmfilterset .submit_container { margin-right: 10px; }
.programmfilterset .mm_select.referent, .programmfilterset .mm_text { margin-right: 10px;}
.programmfilterset .mm_text { margin-right: 20px; }
.programmfilterset .mm_text input, .ref-liste .mm_text input  { width: 280px; padding: 5px 10px; border-radius: 12px;}
.programmfilterset img { margin-right: 10px; margin-left: 4px; cursor:pointer;}
.programmfilterset .buttonWrap { border-top: 1px solid #000; border-bottom: 1px solid #000; width: 100%; padding: 10px 0; margin-top: 10px; }
#ui-datepicker-div { z-index: 100 !important; }

.ref-filter .mm_select label { display: none;}
.ref-filter .mm_text { margin-right: 20px; margin-bottom:30px; }
.ref-filter .mm_text label { display: none; }
.ref-filter .mm_text>input { width: 280px; padding: 5px 10px; border-radius: 12px;}

.submit_container .submit { border-radius: 0; padding: 5px 10px;}
.submit_container .btn {}
.ref-filter .submit { margin-left: 20px;}
    
.programmfilterset .btn { width: 150px; text-align: center; margin-top: 0px; padding-bottom: 4px;}
.programmfilterset .btn a{ font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 20px; }
.submit_container .submit { font-size: 18px; line-height: 20px; padding: 6px 10px; border: 1px solid #000; margin-right: 0px; background-color: #fff;   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.submit_container .submit:hover {background-color: #F1F1F1;}

@media screen and (max-width: 480px) { 
.programmfilterset .mm_multitext, .programmfilterset .mm_select.fachbereich, .programmfilterset .mm_select.referent { width: 250px;}  
.programmfilterset .mm_multitext input { margin-bottom: 10px;}

}


/* ==========================================================================
   Position
   ========================================================================== */
.ref-filter { padding: 0 10px 30px 10px; width: 100%;}

.ref-filter ul { padding: 0; margin: 0;}
.ref-filter ul li {
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  background: #FFF;
  border: none;
  border-radius: 19px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 18px;
  line-height: 20px;
  margin-right: 10px;
  -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;} 

.ref-filter ul li:hover {background-color: #F1F1F1;}
  
.ref-filter ul li a { color: #000; text-decoration: none;}

.ref-filter ul li.active { background-color: #000;}  

.ref-filter ul li.active a{color: #FFF;}

.ref-liste .person {
    width: calc(33% - 13px);
    margin-right: 20px;
    margin-bottom: 30px; 
    position: relative;
    border-left: 1px solid #000;
    height: 25vw;
    min-height: 480px;
    padding-left: 10px;
    transition: all 0.5s ease;} 
    
.ref-liste.short .person:nth-child(n + 7) {
    position: fixed; top: -9999px; left: -9999px;
    transition: all 0.5s ease;}
    
@media screen and (min-width: 1025px){    
.ref-liste .person:nth-child(3n) {
    margin-right:0;}
}
    
.team .ref-liste .person { min-height: auto;}

.ref-liste { width: 100%; padding: 30px 15px 0 15px;}    
 
 @media screen and (min-width: 1380px) {   
.ref-liste { width: 75%; margin: 0 auto;}
}

 @media screen and (max-width: 1024px) {
.ref-liste .person {
    width: calc(50% - 10px);
    min-height: 500px;}
}
 @media screen and (max-width: 1024px) and (min-width: 481px) {
.ref-liste .person:nth-child(2n) {
    margin-right:0;}
 }
 
 @media screen and (max-width: 480px) {
.ref-liste .person {
    width: 100%;
    margin-right: 0;}
 }

.ref-liste .person .portrait {
    width: 66%;
    height: 0;
    padding-top: 66%;
    margin-bottom: 20px;
    position: relative;}
    
.ref-liste .person .portrait .aspect {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;}
    
.ref-liste .person .portrait img {
    border: 1px solid #000;
    height: 100%; 
    object-fit: cover; 
    object-position: top left; 
    width: 100%;}

.person .buttons {
    position: absolute;
    bottom: 0px;
    left: 10px;}
    
/* ==========================================================================
   Vorschau
   ========================================================================== */
#vorschau {padding: 0 5px 60px 5px; width: 100%;}
#vorschau .item { width: 100%; padding: 30px 10px 20px 10px; border: 1px solid #000; margin-bottom: 5px;}
#vorschau .item .datum { width: calc(16.666% - 20px); font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 22px;}
#vorschau .item .titel { width: calc(25% - 20px);}
#vorschau .item .teaser { width: calc(33.333% - 20px);}
#vorschau .item .info { width: 25%;}
#vorschau p, #vorschau h5, #vorschau h3 { margin-bottom: 0;}
#vorschau .item .titel h3 { font-family: 'FedraSansStdMedium'; font-size: 24px; line-height: 28px;}
#vorschau .item h5 { text-transform: uppercase; font-family: 'FedraSansStdMedium'; font-size: 18px; line-height: 20px;}

 @media screen and (max-width: 1023px) { 
 #vorschau .item .datum, #vorschau .item .titel, #vorschau .item .teaser, #vorschau .item .info  {width: 100%; margin-bottom: 20px;}
 }   
/* ==========================================================================
   Position
   ========================================================================== */
.wrapper { padding: 5px; margin-top: 25px;}
.veranstaltungsreihe { width: 100%; border: 1px solid #000; margin-bottom: 30px;}
.veranstaltungsreihe .bild { width: 33.333%; height: 67vh; }
.veranstaltungsreihe .text { width: 66.666%; padding: 20px; }
 @media screen and (max-width: 780px) { 
.veranstaltungsreihe .bild { width: 100%; height: 25vh; }
.veranstaltungsreihe .text { width: 100%; padding: 20px; } 
 }
.veranstaltungsreihe .text h2 {
    font-size: 48px;
    line-height: 54px;
    margin: 0 0 60px 0;}
    
.veranstaltungsreihe .text h3 { 
    font-family: 'FedraSansStdMedium';
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 30px;}
    
.veranstaltungsreihe .text .fliesstext h4 {
    font-size: 22px;
    line-height: 26px;
    margin: 0 0 60px 0;
    border-bottom: none;
    text-transform: none;}
.veranstaltungsreihe .bild img { height: 100%; object-fit: cover; object-position: center center; width: 100%; }
.veranstaltungsreihe .text .more { cursor:pointer;}
.veranstaltungsreihe .text .more img { margin-right: 20px; transition: transform 0.2s;}
.veranstaltungsreihe .text .more a { color: #000; text-decoration: none;} 

.veranstaltungsreihe .text .more:hover { text-decoration: underline;}

.veranstaltungsreihe .text .hiddenContent { display: none; width: 100%;}
.veranstaltungsreihe .text .hiddenContent.expand { display: block;}
.veranstaltungsreihe .text .more.rotate45 img {transform: rotate(45deg); }
.veranstaltungsreihe .text .more:hover img::after { content: ""; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 100; background-color: #000; opacity: 0.1;}
/* ==========================================================================
   GALERIE
   ========================================================================== */
   
.galerie { padding: 0 5px 60px 5px; }
.galerie .bildtext { width: 100%; margin-bottom: 30px;}
 @media screen and (min-width: 1280px) {   
.galerie .bildtext { width: 83.333%; margin: 0 auto 30px auto;}
}
.galerie .bildtext .bild { width: 56.25%; }
.galerie .bildtext .text { width: calc(43.75% - 20px); margin-left: 20px; padding: 10px 0 0 0; border-top: 1px solid #000;}
 @media screen and (max-width: 580px) {
 .galerie .bildtext .bild, .galerie .bildtext .text { width: 100%; }
  }
/* ==========================================================================
   Bild Slider
   ========================================================================== */
.bilderkarussel { background-color: #FFF; padding-bottom: 60px; }    
.imageWrap { width: 662px; margin: 0 10px 32px 10px;}
.bilderkarussel .carousel-prev { margin-right: 540px;}
 @media screen and (max-width: 665px) {
.bilderkarussel .carousel-prev {
    margin-right: calc(100% - 162px);}
}
/* ==========================================================================
   Splitscreen
   ========================================================================== */   
.publikation { padding: 0 15px;}   
.publikation {
    width: 100%;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
    margin-bottom: 10px;}
    
.ce_metamodel_content.last.block .publikation:last-child { border-bottom: none;}
    
.publikation .cover {
    width: calc(16.666% - 20px);
    padding-right: 30px;}
    
.publikation .info, .publikation .beschreibung {
    width: calc(41.666% - 10px);}
    
.publikation h5 {
    font-family: 'FedraSansStdMedium';
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 20px; }

 @media screen and (max-width: 1023px) {
 .publikation { margin-top: 30px;}
.publikation .cover { width: 33.333%; margin-bottom: 30px; } 
.publikation .info { width: calc(66.666% - 20px);} 
.publikation .beschreibung { width: 100%;}
}

 @media screen and (max-width: 540px) {
.publikation .cover { width: 66.666%;}
.publikation .info { width: 100%; } 
}

/* ==========================================================================
   Position
   ========================================================================== */

.relative { position: relative; }
.sticky { position: -webkit-sticky; position: sticky; top: 0; }
.fixed { position: fixed; }
.absolute { position: absolute;}
.borderBottom, #referenten, #programm { border-bottom: 1px solid #000;}

/* ==========================================================================
   FORMULARE
   ========================================================================== */
.mod_article { width: 100%;}   
.ce_form {
    width: 100%;
    max-width: 662px;
    margin: 0 auto;}
.ce_form legend  { width: 100%; display: inline-block;}
.ce_form h4 { font-size: 22px; line-height: 26px;}
.ce_form .veranstaltungsname { font-size: 48px; line-height: 54px; margin-bottom: 10px;}
.ce_form .veranstaltungsuntertitel, .ce_form .verdatum { font-size: 22px; line-height: 26px; margin-bottom: 30px;}
.ce_form .verdatum { }
.ce_form .widget-text label { display: block; width: 100%; font-size: 18px; line-height: 22px; margin-top: 20px;} 
.ce_form .radio_container span { display: block; width: 100%;}
.ce_form legend span { display: inline !important; width: auto;}
.ce_form .widget-radio { margin-top: 20px;}
.ce_form .widget-radio label { display: inline-block; width: auto; padding-right: 20px; padding-top: 10px;}
.ce_form input.text {
    width: 100%;
    max-width: 545px;
    border: 1px solid #000;
    border-radius: 19px;
    padding: 5px 14px;
    margin-top: 10px;}

.widget-explanation { margin-top: 60px;}

.ce_form .widget-checkbox legend { margin-bottom: 10px;}
.ce_form .widget-checkbox input.checkbox { margin-right: 10px; }
.ce_form .widget-textarea { margin-bottom: 20px;}
.ce_form .widget-submit { margin-top: 20px; }
.ce_form .widget-textarea label { display: block; width: 100%; font-size: 18px; line-height: 22px; margin-top: 20px; }
.ce_form .widget-textarea textarea { 
width: 100%;
    max-width: 545px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 19px;
    padding: 5px 14px;
    margin-top: 10px}
    
.ce_form input.radio.empty, .ce_form label.empty { display:none;}
/* ==========================================================================
   Animated Hamburger Icon Version 1
   ========================================================================== */  
#hamburger-icon {
  width: 40px;
  height: 40px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
position: relative;}       
  
#hamburger-icon span {

  display: block;
  height: 2px;
  width: 30px;
  border-radius: 2px;
  opacity: 1;
  left: 4px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;}

#hamburger-icon.open span {
  -webkit-box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
  box-shadow: 0 0 0 0;}

#hamburger-icon span:nth-child(1) { top: 12px;}
#hamburger-icon span:nth-child(2),#hamburger-icon span:nth-child(3) { top:18px; }
#hamburger-icon span:nth-child(4) { top: 24px; }

#hamburger-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%; }
  
#hamburger-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  }

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

#hamburger-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;  }  
    
.breadcrumb {
    position: -webkit-sticky; 
    position: sticky;
    top: 81px;
    height: 40px;
    width: 100%;
    padding: 0 15px;
    border-bottom: 1px solid #000;
    font-size: 14px;
    line-height: 18px;
    background-color: #FFF;
    transition: all 0.5s;
    z-index:9000;}
.breadcrumb.scrolled { top: 0;}
    
.breadcrumb ul { 
    margin: 0; 
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;}  
.breadcrumb ul li { list-style: none; margin-right: 20px;}  
.breadcrumb a { color: #000; text-decoration: none;}
.breadcrumb a:hover, .breadcrumb a.active {  text-decoration: underline;}
 @media screen and (max-width: 1023px) { 
 .breadcrumb { display: none}
 }
 
.showmore, .showlink {
    width: 100%;
    text-align: center;}
.showmore .icon, .showlink .icon {
    width: 40px;
    margin: 10px auto;
    cursor:pointer;}
.showmore .icon.rotate { transform: rotate(45deg); }
.showmore .beschriftung, .showlink .beschriftung {
    width: 100%;
    text-align: center;
    cursor:pointer; }
.showlink .beschriftung a { color: #000; text-decoration: none;}
.showmore .minus { display: none;}
.showmore.open .minus, .showmore .plus { display: inline;}  
.showmore.open .plus { display: none;}

#ref1 .showmore, #ref2 .showmore { margin-bottom: 60px; }

.kategorieKopf { 
    padding: 30px 5px;
    }
    
.kategorieKopf h1 {
    font-family: 'FedraSerifAStdBook';
    text-transform: uppercase;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 0 10px;}
    
.kategorieKopf .bgWrap {
    padding: 26px 10px 60px 10px;
    border-radius: 10px;}
    
.kategorieKopf h2 {
    font-size: 48px;
    line-height: 54px;
    margin-bottom: 0;}
    
.newsletterlink { }
    
.newsletterlink .ueberschrift h2 {
    font-size: 48px;
    line-height: 54px;
    margin: 5px 0 61px 0;}
    
.newsletterlink h3 {
    font-family: 'FedraSansStdMedium';
    font-size: 24px;
    line-height:28px;
    margin-bottom: 30px;
    text-align: center;}
    
.newsletterWrapper {
    width: 100%;
    padding: 30px 15px 60px 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 1px solid #000;}
    
.newsletterWrapper .ueberschrift {
    width: 100%;}
    
.mod_subscribe, .mod_unsubscribe { 
    width: 100%;
    max-width: 690px;}
    
.newsletterWrapper .paragraph {
    padding-left: 0;
    padding-right: 0;}
    
.mod_subscribe input.text, .mod_unsubscribe input.text {
    width: 100%;
    max-width: 545px;
    border: 1px solid #000;
    border-radius: 19px;
    padding: 5px 14px;
    margin-bottom: 10px;}
    
p.confirm { color:#006D73 !important;}
p.error { color:red;}
img.pfeil { height: 18px; margin-right: 10px;}
input.wegdamit, label.wegdamit { display: none !important; }