/** Anpassungen auf Auflösungen 480px, 768px, 1024px, 1280px, 1440px, 1920px **/
/** Mobile & IPad Portrait **/

@media only screen and (max-width: 768px) and (min-width: 481px) {

.image h1 {
  /*font-size: calc(90px - 3vw);*/
  font-size: 50px;
}
}

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

/** Verschieben von Hintergrundbildern im Aufmacher NUR für Mobile **/


.bg-position-10 {
  background-position: 10% center !important;
}
.bg-position-20 {
  background-position: 20% center !important;
}
.bg-position-30 {
  background-position: 30% center !important;
}
.bg-position-40 {
  background-position: 40% center !important;
}
.bg-position-50 {
  background-position: 50% center !important;
}
.bg-position-60 {
  background-position: 60% center !important;
}
.bg-position-70 {
  background-position: 70% center !important;
}
.bg-position-80 {
  background-position: 80% center !important;
}
.bg-position-90 {
  background-position: 90% center !important;
}
.bg-position-100 {
  background-position: 100% center !important;
}


body {
  background: #fff;
}
h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

header.logo .letter {
  fill: #ffffff;
  transition: all 1.5s;
}
/** Schrift Logo schwarz für Kontrast? 
header.logo.active .letter {   
  fill: #000000;
  transition: all 0.5s;
}
Schrift Logo schwarz für Kontrast? **/

/* Toggle **/
.header-logo {
    float: left;
    //width: 40% !important;
 	width: 270px !important;
    z-index: 999;
    position: absolute;
}

#navbar {
    float: right;
    width: 100%;
    position: absolute;
    margin-top: 0;
    z-index: 1;
}

#respmenue-toggle {
    padding-top: 0px !important;
    z-index: 999;
    position: absolute;
    right: 0;
}

#respnav {
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0px;
}

#respmenue {
    display: block;
    padding-top: 100px;
}

/** Animation Hamburger **/
#respmenue-toggle {
  width: 35px;
  height: 50px;
  top: 30px;
  right: 15px;
}
#respmenue-toggle > div {
  background: #fff;
  position: absolute;
  top: 50%;
  /*left: 50%;*/
  width: 35px;
  height: 4px;
  transform: translate (-50%, -50%);
  /*box-shadow: 0 2px 5px rgba(0,0,0, .2);*/
  transition: .5s;
}
#respmenue-toggle > div:nth-of-type(1) {
  top: 0px;
  }
#respmenue-toggle > div:nth-of-type(2) {
  top: 10px;  
  }
#respmenue-toggle > div:nth-of-type(3) {
  top: 20px;  
  }
header.logo.active #respmenue-toggle {
  width: 50px;
  top: 40px;
  right: 15px;
}
header.logo.active #respmenue-toggle > div:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 25%;
  transform: rotate(45deg);
}
header.logo.active #respmenue-toggle > div:nth-of-type(2) {
  position: absolute;
  top: 50%;
  left: 25%;
  background-color: transparent;
  box-shadow: 0 2px 5px rgba(0,0,0,0);
  transition: .5s;
}
header.logo.active #respmenue-toggle > div:nth-of-type(3) {
  position: absolute;
  top: 0;
  left: 25%;
  transform: rotate(135deg);
}
/** Animation Hamburger **/

.breadcrumb {
  margin: 0;
  padding: 10px 20px;
}


/* Toggle **/


.play-video-th:after {
  top: 0;
  }

.standard > div > p, .standard ol, .standard ul {
  padding: 10px 20px;
}

ul.imagenavigation{
  top: initial;
  bottom: 5px;
  z-index: 51;
}
  
ul.imagenavigation li.right,
ul.imagenavigation li.left {
  /*width: calc(50% - 5px);*/
  /*display: none;*/
  transform: translate(0%,-100%);
}
ul.imagenavigation li.left{
  padding-left: 5px;
  left: 0px;
}
ul.imagenavigation li.right {
  padding-right: 5px;
  right: 0px;
}
  
ul.imagenavigation li.left a img,
ul.imagenavigation li.right a img {
  width: 33px;
  height: 33px;
}
ul.imagenavigation li.right {
  padding-right: 5px;
  right: 0px;
}
  
ul.imagenavigation_down {
    bottom: 0px;
}
.image .ce-bodytext {
  bottom: 60px;
  top: inherit;
  transform: inherit;
  -ms-transform: inherit;
}
.image .ce-bodytext p {
  padding: 0 10%;
} 
.image_link header h1,
.image_link header h1 a {
  /*font-size: calc(70px - 6vw);*/
  font-size: 50px;
  padding: 0 10px;
  }

.image_link .ce-bodytext {
  top: inherit; 
  bottom: 10%;
  padding: 0 10px;
  box-sizing: border-box;
}
.image_link .ce-bodytext > div > * {
  width: 100%;
}
.image_link .ce-bodytext p {
  /*font-size: calc(40px - 3vw);*/
  font-size: 40px;
  padding: 0;
  }
.image_link .ce-bodytext p a {
  /*font-size: calc(24px - 3vw);*/
  font-size: 30px;
  }
 
.image_article {
margin-bottom: 20px;
}
.image_article .ce-bodytext {
  padding: 0 20px 0 20px;
  position: relative;
  bottom: 5px;
  background: rgba(62, 150, 190,0.2);
}
.image_article .ce-bodytext p {
  font-size: calc(55px - 6vw);
}
.image_small figure.imagefigure {
  width: 100%;
  float: none;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 0;
}
.image_small p {
  padding: 10px 20px;
}
.hervorhebung {}
.hervorhebung > div > p {
  padding: 10px 20px;
}
.hervorhebung > div > p:first-of-type {
  float: none;
  padding-top: 0;  
  max-width: inherit;
  margin-left: 0;
}
.hervorhebung > div > p {
  margin-left: 0;
}
.autorenkasten > div > p:first-of-type {
  float: none;  
  padding: 10px 20px;  
  max-width: inherit;
}
.autorenkasten > div > p, .autorenkasten ul, .autorenkasten ol {
  padding: 10px 20px;
}
.video .imagefigure button > svg {
  /*width: 30%;*/	
}
.video-header {
  top: 1rem;
  padding-left: 0;
  box-sizing: border-box;
  width: auto;
}
.video-header > h2 {
  font-size: 30px;
}
.linkkasten_bilder .ce-columns-2 .ce-column,
.linkkasten_bilder .ce-columns-3 .ce-column,
.linkkasten_bilder .ce-columns-4 .ce-column {
  width: calc(100%);
}
.linkkasten_bilder .ce-column {
   margin-right: 0;
}
.video.aufmacher.image h1 {
    margin-bottom: 10px;
}
.linkkasten_bilder header h2, .slider header h2 {
    /*font-size: calc(65px - 8vw);
    font-size: calc(50px + 1vw);*/
  font-size: 40px;
}
  
  .linkkasten_bilder .imagefigure .image-caption {
    overflow-x: scroll;
    -ms-overflow-style: none;
  	scrollbar-width: none;
  }
  
  .linkkasten_bilder .imagefigure .image-caption figcaption,
  .linkkasten_bilder .imagefigure .image-caption figcaption p {
   padding-top: 0;
    padding-bottom: 0;
  }
  
  .linkkasten_bilder .imagefigure .image-caption::-webkit-scrollbar {
  display: none;
}
  
.audio header,
.ansprechpartner header {
  padding: 0 20px;
}
.ansprechpartner header h2 {
  font-size: calc(70px - 5vw);
}
.ansprechpartner .ce-textpic {
  display: inherit;
}
.ansprechpartner .ce-gallery {
  width: 100%;
  margin-right: 0;
}
.ansprechpartner .ce-bodytext {
  width: 100%;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}
.ansprechpartner .ce-bodytext > div {
  position: relative;
}
.ansprechpartner .ce-bodytext p {
  padding: 5px 0px 5px 0px
}
.formular label, .formular .powermail_fieldwrap > div {
  width: auto;
  float: none;
}
.formular .layout2 > div {
  width: 80%;
  margin: 20px auto;  
}
.formular .layout2 > div .btn-primary,
.formular .layout2 > div a{
  width: 100%;
}
.infokasten > div {
max-width: inherit;
  margin-right: 0;
  float: none;
}

.standard h2, .autorenkasten h2 {
  padding: 10px 20px;
}

.teaser p,
.linkkasten_bilder .ce-bodytext p,
h3, .ansprechpartner header h3,
.formular header h3,
.image .ce-bodytext p,
.image_link h2,
.formular label {
  font-size: 20px;
}

.linkkasten_bilder h2,
.linkkasten_bilder p {
  padding-left: 20px;
  padding-right: 20px;
}

.teaser {
  padding: 0 20px;
}
.slider header,
.slider header figcaption,
  .slider  figcaption,
.image_small figcaption,
.image_article figcaption,
  .standard .imagefigure figcaption.image-caption {
  padding: 0 20px;
}
  .video.full .image-caption,
  .video figcaption{
  padding: 5px 20px;
}
  
  
.linkkasten_bilder .imagefigure .image-caption {
  padding: 15px 20px;
}
.slidewrap-B {
  padding: 10px 0 10px 0;
}
.sliderButtonLeft {
  background-position: 10px;
}
.sliderButtonRight {
  background-position: 25px;
}
.zitat p:first-child {
  /*font-size: calc(40px - 3vw);*/
  font-size: 30px;
}
.zitat p:last-child {
  /*font-size: calc(18px - 1vw);*/
}
.keInfografik .bildunterzeile {
  padding: 10px;
}

footer .box {
  float: left;
  padding: 0;
  margin: 0 20px;
  max-width: inherit;
  width: calc(100% - 50px);
}
footer .box img {
  max-width: 250px;
}
/** Abstand nach unten Kontrollieren **/
.teaser {
  margin-top: 20px;
  margin-bottom: 20px;
}
.standard > div,
.autorenkasten > div,
.zitat > div,
.hervorhebung > div,
.image_small,
.video,
.slider,
.linkkasten_bilder,
.image.audio,
.ansprechpartner,
.formular
 {    
  margin-bottom: 20px;
}
.image:not(.aufmacher) {    
  margin-bottom: 20px;
}

/** Elemente einrücken **/
.hervorhebung > div > p:first-of-type {  
  padding: 10px 20px 20px 30px;
  box-sizing: border-box;
}
.zitat > div {
    padding: 0px 20px 0px 30px;    
  box-sizing: border-box;
}
 
.infokasten > div {  
  padding: 10px 20px 10px 30px;
  box-sizing: border-box;
}
  
.formular > div {
  padding: 0 10px;
  box-sizing: border-box;
}
.formular label + div {
  margin-top: 5px;
  }

.image header {
  top: 10%;
}
.image header h1 {
  font-size: 24px;
  margin-top: 5px;
}

#back-top a i {
  font-size: 2em !important;
  background: rgba(62, 150, 190,0.2);
  padding: 2px 10px 10px 10px;
  border-radius: 5px;
}
#back-top a span {
  display: none;
}
#back-top.footeron a i {
  background: rgba(255, 255, 255,0.4);
  z-index:1;
}

.breadcrumb + .teaser {
  margin-bottom: 40px;
}

.video-embed-standalone {
  margin-bottom: 40px;
}

.video .video-embed-standalone {
  margin-bottom: 0px;
}

.linkkasten_bilder.frame-blue,
.linkkasten_bilder {
  padding: 20px 0;

}
.contenttable {
    width: calc(100% - 40px);
  }
  div.accordion > div,
  .button-tel > div{
    margin: 10px 20px;
  }
  
  .button-tel > div {
    margin-bottom: 20px;
  }
  
  .interview_breit h1 {
    font-size: 40px;
  }
  .podcast-box h2 {
    padding: 0;
}
  
}
/************************/

@media only screen and (max-width: 480px) {
.header-logo {
  float: left;
  //width: 60% !important;
  width: 200px !important;
  z-index: 999;
  position: absolute;
}
#respmenue {
    display: block;
    padding-top: 80px;
}
#respmenue-toggle {
    //padding-top: 20px !important;
    z-index: 999;
    position: absolute;
  	top: 17px;
}
  header.logo.active #respmenue-toggle {
 
    top: 25px;
 
}
.image h1 {
  //font-size: calc(90px - 14vw);
  font-size: 30px;
  padding-left: 20px;
  padding-right: 20px;
}
  
  .image_link header h1,
.image_link header h1 a {
  	font-size: 30px;
  }

  .linkkasten_bilder header h2, .slider header h2 {
  font-size: 30px;
}
  .interview_breit h1 {
    font-size: 30px;
  }
  h1, h2, h3 {
    word-break: break-word;
  }
  
}

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


@media only screen and (max-width: 1023px) and (min-width: 769px) {
#head-logo {
  left: 20px;
}
#navbar ul {
    margin-right: 90px;
}
#navbar ul li {
  padding: 15px 15px;
}
#respmenue-toggle {
  padding-top: 5px !important;
}
#respmenue > ul > li > ul li a span {
  font-size: 26px;
  line-height: 1.3;
}
.standard > div > p,
.standard h2, .standard ul, .standard ol,
.autorenkasten > div > p, .autorenkasten h2, .autorenkasten ul, .autorenkasten ol,
.hervorhebung > div > p,
.image_small p {
  padding: 10px 10% 10px 10%;
}
.image h1 {
  font-size: 60px;
}
.aufmacher h1 {
  padding: 0 80px;
}
.image .ce-bodytext p {
  padding: 0 20%;
  font: 26px "NotoSans Regular", sans-serif;
}
.play-video-th:after {
  top: 0;
  }
.image_link .ce-bodytext p {
  padding: 0 20px; 
}
.teaser, .breadcrumb {
  padding: 0 40px;
}

.hervorhebung > div > p:first-of-type,
.image_small figure.imagefigure {
  margin-left: 10px;
  margin-right: 20px;
}
.hervorhebung > div > p {
  margin-left: 0;
}
.infokasten > div {
  max-width: 300px;
  margin-left: 10px;
}
.slider header,
.slider header figcaption,
.image_small figcaption
  {
  padding: 0 20px;
}
.slidewrap-B,
.video figure,
.image_article > div {
  padding: 10px 10% 10px 10%;
  box-sizing: border-box;
}
.video.aufmacher.image figure {
  padding: 0;  
}
.sliderButtonLeft {
  background-position: 10px;
}
.sliderButtonRight {
  background-position: 25px;
}
.video-header {
  width: auto;
}
.image_article .ce-bodytext {
  width: auto;
  box-sizing: border-box;
}
.video-header > h2,
.image_article .ce-bodytext p {
  font-size: 30px;
}
.keInfografik .bildunterzeile {
  padding: 10px;
}

/** Elemente einrücken **/
.zitat > div {
  padding: 0 5%;
  box-sizing: border-box;
}
.formular > div {
  padding: 0 10px;
  box-sizing: border-box;
}

.breadcrumb ul {
    width: 100%;
  }
  .contenttable {
    width: 80%;
  }
 div.accordion > div,
  .button-tel > div {
    margin: 10px 10% 10px 10%;
  }
  
  .button-tel > div {
    margin-bottom: 60px;
  }
  
  .podcast-box h2 {
    padding: 0;
}
}

@media only screen and (max-width: 850px) and (min-width: 769px) {
	#navbar ul li {
	  	padding: 15px 7px;
	}
}

@media only screen and (max-width: 1279px) and (min-width: 1024px) {

.breadcrumb ul {
    width: 100%;
  }
.teaser, 
.linkkasten_bilder > div,
.slider header,
.video figure,
.image_article > div,
.ansprechpartner > div,
.formular > div,
.image_link .ce-bodytext,
.zitat > div,
.breadcrumb {
  padding: 0 10%;
}
.video.aufmacher.image figure {
  padding: 0;  
}
.video-header,
.video .imagefigure {
  width: auto;
}
.image_article .ce-bodytext,
.image_link .ce-bodytext {
  width: auto;
  box-sizing: border-box;
}

.hervorhebung > div > p:first-of-type,
.image_small figure.imagefigure,
.infokasten > div {
  margin-left: 80px;
  margin-right: 20px;
}
.infokasten > div {
  margin-right: 45px;
  max-width: 300px;
}
.image_link .ce-bodytext > div > * {
  width: 80%;
}
.keInfografik .bildunterzeile {
  padding: 10px;
}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { 
.image:first-of-type {
  height: calc(100vh - 55px);
}
}

/** Für Aufmacher-Video/Bild mit Text **/
@media only screen and (max-width: 1319px) and (min-width: 1024px) {
.image:not(.image_link) h1 {
  font-size: 70px;
  padding: 0 10%;
}
.image:not(.image_link) .ce-bodytext p {
  padding: 0 20%;
  font: 28px "NotoSans Regular", sans-serif;
}
}

@media only screen and (max-width: 1439px) and (min-width: 1320px) {
.image h1 {
  padding: 0 10%;
  font-size: 70px;
}
.image .ce-bodytext p {
  padding: 0 20%;
  
}
}

@media only screen and (max-width: 1920px) and (min-width: 1440px) {

}

@media only screen and (min-width: 1921px) {
.play-video-th:after {
  top: 2px;
}
}

@media only screen and (max-height: 505px) {
.image .ce-bodytext p:not(.play-video-th) {
  display: none;
}
.image h1 {
  font-size: 40px;
}
}

@media only screen and (max-height: 1023px) {
  .linkkasten_bilder header h2, .linkkasten_bilder .ce-bodytext p {
    padding-left: 20px;
    padding-right: 20px;
    
  }
  
}

/* Tooltips auf Screens > 1920px nicht auf den weißen Rand ragen lassen */
@media only screen and (min-width: 1921px) {

  .aufmacher .left .tooltip {
    left: 0 !important;
  }
  
  .aufmacher .right .tooltip {
    left: initial !important;
    right: 0;
  }
}