/* -----  Reset    ----- */

*, *:before, *:after {
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.invisible {
    display: none;
}

sub, sup {
	  font-size: 0.7em;
    line-height: 0.5;
}

figure {
    line-height: 0.1;
    text-align: center;                  		/* alle Fotos in Figure-Box zentrieren */
}

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


/* -----  Layout    ----- */

@media (min-width: 1601px) {
    #header {
        padding-top: 60px;
    }
}

@media (max-width: 1600px) {
    #header {
        padding-top: 3.75vw;                    /* 60px bei 1600px Breite */
    }
}

#wrapper {
    position: relative;                         /* vor den fixed HG-Container setzen */
}

#container {
    position: relative;                         /* vor den fixed Footer setzen */
    z-index: 10;
    min-height: 30vh;                           /* Navi-legal auch bei kurzem Content unterhalb der SM-Icons positionieren */
}

#header, #container {
    width: 75%;
    max-width: 1400px;
}

/*body.ios.mobile html, body.ios.mobile #header {
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}*/


/* -----  HG-Bilder, Seitenformat 2zu1    ----- */

#hg-container {
    background-image: url("css-img/HGs/hg_20180325-NIK_5337_2000x1000.jpg");
    background-position: 48% 55%;
}

body.projekte #hg-container {
    background-image: url("css-img/HGs/hg_20180325-IMG_0142_2000x1000.jpg");
    background-position: 77% 31%;
}

body.videos #hg-container, body.booking #hg-container {
    background-image: url("css-img/HGs/hg_20170922-NIK_5396_2000x1000.jpg");
    background-position: 68% 12%;
}

body.dritter-mittwoch #hg-container {
    background-image: url("css-img/HGs/hg_IMG_20180117_201225-01_2000x1000.jpg"); /* url("css-img/HGs/hg_wundertute_strasse-farbe.jpg") */
    background-position: 37% 24%;
}

body.roger #hg-container {
    background-image: url("css-img/HGs/hg_roger_bandfoto.jpg");
    background-position: 49% 20%;
}

body.newsletter #hg-container {
    background-image: url("css-img/HGs/hg_newsletter_2000x1000.jpg");
    background-position: 65% 70%;
}

body.bonus #hg-container {
    background-image: url("css-img/HGs/hg_bonus_2000x1000.jpg");
    background-position: 50% 90%;
}

body.triode #hg-container {
    background-image: url("css-img/HGs/Die _Triode _- _Layoutfoto _| _Rechte _Patrick _Martin _Unsplash.jpg");
    background-position: 50% 45%;
}


#hg-container {
    position: fixed;
    width: 100%;
    height: 480px;                              /* für < mobile Safari 8 */
    background-size: cover;
}

body:not(.sf6):not(.sf7) #hg-container {
    height: 80vh;
    min-height: 450px;
}

@media (max-width: 1050px), (max-height: 1050px) {
	body:not(.sf6):not(.sf7) #hg-container {
		background-size: auto 80vmax;          /* HG-Fotos in Quer- und Hochformat gleich groß */
	}
}

#hg-container .inside {
    background-image: linear-gradient(3deg,
    	rgba(0,0,0,1.0) 0%,
    	rgba(0,0,0,1.0) 10%,
    	rgba(0,0,0,0.1) 40%,
    	rgba(0,0,0,0.0) 50%,
    	rgba(0,0,0,0.0) 100%);
    height: 100%;
}


/* -----    Navi    ----- */

.navi.mobil, #navitoggle, #naviclose {
    display: none;
}

.navi.logo ul, .navi.sub ul, .navi.legal ul {
	max-width: 1800px;
}

@media (min-width: 2250px) {
	.navi.logo ul, .navi.sub ul, .navi.legal ul {
		width: 80%;
	}
}

.navi li {
    list-style-type: none;
}


  /* -----    Logo + Burger + Closer   ----- */

.navi.logo, #navitoggle, #naviclose {
    position: fixed;
    width: 93.75%;                              /* 100% - 6.25% */
    font-size: 0.001em;                         /* Logo + Hauptnavi oben bündig */
    z-index: 10;                                /* auch unteren Logo-Teil VOR Navi sub */
}

.navi.logo {
    left:  6.25%;                               /* in der 12,5%-breiten Spalte zentrieren */
}

#navitoggle, #naviclose {
    right: 6.25%;                               /* in der 12,5%-breiten Spalte zentrieren */
}

.navi.logo li {
    height: 1px;								/* soll nicht Navi sub überdecken */
}

.navi.logo li a, .navi.logo li strong, #navitoggle, #naviclose {
    width: 2.105rem;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.navi.logo li a, .navi.logo li strong {
    display: inline-block;
    height: 22.737rem;
    margin-left: -1.053rem;                     /* Textmitte in der Mitte der Spalte zentrieren */
    background-image: url("css-img/Logo_STEFANHANSEL.svg");
}

#navitoggle, #naviclose {
  	margin-right: -1.053rem;                     /* Textmitte in der Mitte der Spalte zentrieren */
  	height: 2.105rem;
}

#navitoggle {
    background-image: url("css-img/Burger.svg");
}

#naviclose {
    background-image: url("css-img/Closer.svg");
    top: 3.5vw;
    z-index: 25;
}

body:not(.sf6):not(.sf7) .logo li a, body:not(.sf6):not(.sf7) .logo li strong {
    max-height: 80vh;
    max-height: calc(100vh - 7.5vw);
}

#seitentitel {
	  display: none;
}

@media (max-width: 1070px) {
    .navi.main, .navi.sub, .navi.legal {
      display: none;
    }

    .navi.mobil {
    	display: block;
    }

    #naviclose, #navitoggle {
      display: inline-block;
    }

    .navi.mobil, #naviclose {
    	opacity: 0;
      transform: scaleY(0);
	    transition: transform 0s 0.7s, opacity 0.7s;
    }

    body.active .navi.mobil,  body.active #naviclose {
      transform: scaleY(1);
  		opacity: 1;
  	  transition: transform 0s 0s, opacity 0.7s;
    }

    body.active #navitoggle {
    	opacity: 0;
      transition: opacity 0.7s;
    }

    #container {
        padding-top: 100px;
    }

    body:not(.sf6):not(.sf7) #container {
    	padding-top: 30vh;
    }

    #seitentitel {
  		display: inline-block;
  		margin-bottom: 7rem;
  		font-size: 2rem;
      line-height: 0.8;
      font-weight: normal;
  		text-transform: uppercase;
	   }

	body.ios #seitentitel {
		margin-top: -0.07em;
	   }

	body.sub #seitentitel {
		text-transform: none;
	   }
}


  /* -----    Navi main    ----- */

.navi.main {
    line-height: 0.8;
    padding-bottom: 150px;						/* für < Safari 8 */
    z-index: 15;
}

body.ios .navi.main {
    line-height: 0.5;
}

body:not(.sf6):not(.sf7) .navi.main {
    padding-bottom: 60.2vh;
}

body.sub:not(.sf6):not(.sf7) .navi.main {
    padding-bottom: 47.7vh;
}

.navi.main ul.level_1 > li:not(:last-child) {
    margin-right: 4.8%;
}

/*
wenns eng in der Navi wird:
@media (max-width: 900px) {
    .navi.main ul.level_1 li.home {
        display: none;
    }
}
*/

.navi.main ul.level_1 li {
    display: inline-block;
    text-transform: uppercase;
    margin-top: 0;
}

.navi.main ul.level_2 li {
    text-transform: initial;
}

.navi.main li {
    transition: transform 0.7s;
}

.navi.main li.active {
  	transform-origin: 0 100%;
  	-webkit-animation: navi-active 0.8s cubic-bezier(.46,.03,.52,.96)  forwards;
              animation: navi-active 0.8s cubic-bezier(.46,.03,.52,.96)  forwards;
  	/*transform: translateY(50vh) scale(2);*/		/* zum Testen der Keyframe-Parameter */
    margin-left: -0.2em;
}

.navi.main :nth-child(n+5).active {
	 transform-origin: 100% 100%;
}

@keyframes navi-active {
	to {
		transform: translateY(50vh) scale(2.9);
	}
}


  /* -----    Navi sub    ----- */

.navi.sub {
    position: fixed;
    right: 6.25%;                               /* in der 12,5%-breiten Spalte zentrieren */
    width: 93.75%;                              /* 100% - 6.25% */
    bottom: 3.4rem;
    text-align: right;
    margin-bottom: 1rem;
}

.navi.sub li {
    margin-right: -1rem;                      /* Textmitte in der Mitte der Spalte zentrieren */
    margin-bottom: 1.5rem;
}

.navi.sub li:not(.img-rep) {
    font-size: 0.9rem;
    text-transform: uppercase;
}

.navi.sub a.img-rep, .navi.mobil a.img-rep {
    display: inline-block;
    width:  2rem;
    height: 2rem;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.navi.sub a.img-rep.youtube, .navi.mobil a.img-rep.youtube,
.content-youtube button:after {
    background-image: url("svg/youtube.svg");
}

.navi.sub a.img-rep.tiktok, .navi.mobil a.img-rep.tiktok {
    background-image: url("svg/tiktok.svg");
    height: 1.9rem;
}

.navi.sub a.img-rep.facebook, .navi.mobil a.img-rep.facebook {
    background-image: url("svg/facebook-square.svg");
}


.navi.sub a.img-rep.soundcloud, .navi.mobil a.img-rep.soundcloud {
    background-image: url("svg/soundcloud.svg");
    width:  1.4rem;                             /* gibt dem SoundCloud-Icon etwas mehr Fläche */
}

.navi.sub a.img-rep.instagram, .navi.mobil a.img-rep.instagram {
    background-image: url("svg/instagram.svg");
}



.navi.sub a.img-rep.facebook {
    height: 1.7rem;
}

  /* -----    Navi legal    ----- */

.navi.legal {
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    padding-right: 6.25%;                  /* in der 12,5%-breiten Spalte zentrieren */
    font-size: 0.9rem;
    text-align: right;
    text-transform: uppercase;
}

.navi.legal li {
    display: inline-block;
    margin-left: 2rem;
}

.navi.legal li:last-child {
    margin-right: -0.85rem;                 /* Textende rechtsbündig unter Icons */
}


  /* -----    Navi mobil    ----- */

.navi.mobil {
    text-transform: uppercase;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
}

.navi.mobil ul.level_2 {
    text-transform: none;
}

.navi.mobil ul.level_1 {
    margin-left:  19.88%;
    margin-right: 19.88%;
    padding:  1.5em 0.16rem 2.5em;
}

.navi.mobil li {
    margin-top: 1.5em;
    }

.navi.mobil .level_2 li {
    margin-top: 1em;
    margin-left:  10%;
    margin-right: 10%;
}

.navi.mobil li.img-rep {
  	display: inline-block;
  	margin-top: 2.5em;
    margin-bottom: 1.2em;
}

.navi.mobil li.img-rep:not(:last-child) {
    margin-right: 2em;
}

body.active  {
    overflow: hidden;           /* Content bei geöffneter Mobilnavi nicht scrollbar */
    }


/* -----    Content    ----- */

.mod_article .content-text {
    direction: ltr;
}

.mod_article {
  	margin-bottom: 7rem;
  	overflow: hidden;				/* für schräge Teaser-Bilder */
    border-radius: 0.3rem;
}

.mod_article, .content-gallery {
    font-size: 0.001px;
    text-align: center;
}

.mod_article .content-text, .mod_article .content-download,
.mod_article .mod_registration, .mod_article .mod_subscribe, .mod_article .mod_eventlist {
    font-size: 1rem;				/* font-size von .mod_article zurücksetzen */
}

.mod_article .content-text, .mod_article .content-headline, .mod_article .content-download,
.content-gallery h1, .content-gallery h2, .mod_subscribe p {
    text-align: left;               /* center von .mod_article zurücksetzen */
}

.mod_article:not(.teaser) .content-text:not(:first-child),
.content-headline:not(:first-child),
.content-gallery:not(:first-child),
.mod_article:not(.teaser) .content-image:not(:first-child),
.content-youtube:not(:first-child),
iframe:not(:first-child) {
	  padding-top: 1rem;
}

.mod_article:not(.teaser) .mod_subscribe.invisible + .content-text:not(:first-child) {
    padding-top: 0;
}

.mod_article.teaser:not(.video):nth-child(2n):not(.zweispaltig) {
    direction: rtl;
}

.teaser .content-youtube + .content-text {
    padding-top: 3%;
}

@media (min-width: 1201px) {

	.mod_article:not(.teaser), .mod_article.teaser.video {
    padding-top: 5%;					/* 3.3rem */
    padding-bottom: 5%;
	}

	.mod_article.teaser:not(.video) .content-text {
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 1.3%;
	}

  .content-text, .content-headline, .content-download,
  .mod_article:not(.teaser) .content-image, .content-youtube,
  .mod_subscribe p, iframe {
    width: 90%;
  }

  .content-gallery {
    width: 90.9%;
	}

  .teaser .content-image, .teaser .content-image + .content-text {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
  }

  .teaser:not(.video) figure {
    transform: skewX(-5deg);
	  overflow: hidden;
	}

	.teaser:not(.video):nth-child(2n+1) figure {
		margin-left: -4%;
		padding-left: 4%;
	}

	.teaser:not(.video):nth-child(2n) figure {
		margin-right: -4%;
		padding-right: 4%;
	}

	.teaser:not(.video) figure img {
    transform: skewX(5deg);
		width: 104%
	}
}

@media (max-width: 1200px) {
  	.mod_article:not(.teaser) {
  	   padding-top: 6.5%;
  	}

  	.mod_article:not(.teaser) .content-youtube:first-child {
  		margin-top: -6.5%;
      padding-top: 0.5%;
  	}

    /* .mod_article.teaser .content-youtube:first-child {
      margin-top: 0;
    } */

    .teaser {
        max-width: 460px;
    }

    .content-text:last-child, .mod_subscribe:last-child {
    	padding-bottom: 10%;
    }

    .teaser .content-image + .content-text {
    	padding-top: 10%;
    }

    .content-text, .content-headline, .content-gallery h1, .content-gallery h2, .content-download, .mod_subscribe p {
        width: 80%;
    }

    .mod_article:not(.teaser) .content-image, .content-youtube, iframe {
        width: 99%;
    }

    .mod_article:not(.teaser) .content-image:last-child, .content-youtube:last-child, iframe {
        padding-bottom: 0.5%;
    }

  .teaser:not(.video) figure {
	  transform: skewY(-3deg);
		overflow: hidden;
    padding-top: 4%;
    margin-top: -4.5%;
	}

  .teaser figure img {
		margin-bottom: -2.3%;
	}

	.teaser:not(.video) figure img {
    transform: skewY(3deg);
	}
}

@media (max-width: 610px) {
	.teaser:not(.video) figure {
		margin-left:  calc(13.79vw - 84.14px);		/* -40px bei 320 px Breite, 0px bei 610px */
		margin-right: calc(13.79vw - 84.14px);
	}
}

.mod_article.teaser {
	 position: relative;								/* Bezugspunkt für klickbaren Link */
}

.mod_article.teaser p a:after {
  	content: "";
  	display: block;
  	position: absolute;
  	height: 100%;
  	width: 100%;
  	top: 0;
  	left: 0;
}


  /* -----    Galerie    ----- */

.content-gallery ul:last-child {
    margin-bottom: 0.25%;
}

.content-gallery ul > * {
    font-size: 1rem;
}

.content-gallery li {
    display: inline-block;
    vertical-align: top;
    margin: 0.25%;				/* gutter 0.5% breit */
}

@media (min-width: 1201px) {
	.content-gallery h1, .content-gallery h2 {
		margin-left: 0.5%;			/* margin der LIs + Abstände des UL */
		margin-right: 0.5%;
	}
}

@media (min-width: 901px) {
    .content-gallery li {
        width: 32.65%;
    }
}

@media (max-width: 900px) {
    .content-gallery li {
        width: 49.25%;
    }
    .content-gallery li:nth-child(2n+1):last-child {
	    display: none;
	}
}

#cboxCurrent {
	 display: none !important;
}

#cboxContent {
	 margin: auto;
}

#cboxLoadedContent {
	 border-style: none;
}

#cboxPrevious, #cboxPrevious:hover,
#cboxNext, #cboxNext:hover,
#cboxClose, #cboxClose:hover {
  	width: 2rem;
  	background-position: 50% 50%;
}

#cboxPrevious,
#cboxNext,
#cboxClose {
	 opacity: 0.6;
}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover {
	 opacity: 0.95;
}

#cboxPrevious {
  	height: 64px;
  	background-image: url("css-img/previous.svg");
}

#cboxNext {
  	height: 64px;
  	background-image: url("css-img/next.svg");
}

#cboxClose {
  	height: 2rem;
  	background-image: url("css-img/close.svg");
}


  /* -----    Video    ----- */

 .content-youtube {
   	display: inline-block;
    vertical-align: top;
   	margin: 0.25%;
    position: relative;   /* für z-index */
    z-index: 10;
 }

.content-youtube h1 {
    display: none;
}

 .content-youtube > * {
    font-size: 1rem;
}

.content-youtube + .content-youtube {
    padding-top: 0;
}

.content-youtube + .content-youtube {
  vertical-align: bottom;
}

@media (min-width: 1201px) {
	.content-youtube.videoeinhalb:not(.videogross) {
	    width: 44.75%;
	}
}

@media (max-width: 1200px) {
	.mod_article:not(.teaser) .content-youtube.videoeinhalb:not(.videogross) {
	    width: 49.25%;
	}
}

.content-youtube figure {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.content-youtube button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.content-youtube figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.content-youtube button span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    font-size: 0.85em;
    line-height: 1.2;
    padding: 0.4em 0 0.32em;
}

.content-youtube button:hover span {
    opacity: 1;
}

.content-youtube button:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 12%;
    opacity: 0.6;
}

.content-youtube button:hover:after,
.content-youtube button:focus:after,
.content-youtube button:active:after {
    opacity: 0.95;
    filter: drop-shadow(0.1em 0.3em 0.5em #000);
}

.content-youtube figcaption {
  position: absolute;
  bottom: -0.1em;
  left: 0;
  max-width: 90%;
  text-align: left;
  font-size: 0.85em;
  line-height: 1;
  padding: 0.2em 0.5em 0 0;
}


/* -----    Formulare    ----- */

input, textarea, form button, input[type="submit"] {
    display: inline-block;
    padding: 0.3em 0.7em 0.2em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.2rem;
}

input, textarea {
    width: 100%;
}

form button, input[type="submit"] {
    text-align: center;
    cursor: pointer;
}

.widget + .widget {
    padding-top: 1rem;
}

form button:hover {
    box-shadow: 0.5px 1.5px 3px #0003;
    transform: translate(0.5px, -1px);
}

form button:focus, form button:active {
    box-shadow: inset 0.5px 1.5px 3px #0003;
    transform: translate(0.5px, -1px);
}


/* -----    Rahmen    ----- */

.mod_article {
	 box-shadow: 0 0.2rem 1.1rem rgba(0, 0, 0, 0.8);
}


/* -----    Farben    ----- */

html {
    background-color: #000;
}

html, a, .video_container.video_container a:hover:before,
.mod_article.blau.blau, .blau .mod_article,
.mod_article.orange.orange, .orange .mod_article,
.mod_article.roger-rot.roger-rot, .roger-rot .mod_article,
.mod_article.nepal.nepal, .nepal .mod_article,
.mod_article.gruen.gruen, .gruen .mod_article,
.mod_article.moos.moos, .moos .mod_article {
    color: #fff;
}

.mod_article.blau.blau a, .blau .mod_article a,
.mod_article.orange.orange a, .orange .mod_article a,
.mod_article.roger-rot.roger-rot a, .roger-rot .mod_article a,
.mod_article.nepal.nepal a, .nepal .mod_article  a,
.mod_article.gruen.gruen a, .gruen .mod_article a,
.mod_article.moos.moos a, .moos .mod_article a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.navi:not(.sub) a {
    border-bottom: 2px solid rgba(255, 255, 255, 0);
}

.mod_article.blau.blau a:hover, .blau .mod_article a:hover,
.mod_article.blau.blau a:focus, .blau .mod_article a:focus,
.mod_article.blau.blau a:active, .blau .mod_article a:active,
.mod_article.orange.orange a:hover, .orange .mod_article a:hover,
.mod_article.orange.orange a:focus, .orange .mod_article a:focus,
.mod_article.orange.orange a:active, .orange .mod_article a:active,
.mod_article.roger-rot.roger-rot a:hover, .roger-rot .mod_article a:hover,
.mod_article.roger-rot.roger-rot a:focus, .roger-rot .mod_article a:focus,
.mod_article.roger-rot.roger-rot a:active, .roger-rot .mod_article a:active,
.mod_article.nepal.nepal a:hover, .nepal .mod_article a:hover,
.mod_article.nepal.nepal a:focus, .nepal .mod_article a:focus,
.mod_article.nepal.nepal a:active, .nepal .mod_article a:active,
.mod_article.gruen.gruen a:hover, .gruen .mod_article a:hover,
.mod_article.gruen.gruen a:focus, .gruen .mod_article a:focus,
.mod_article.gruen.gruen a:active, .gruen .mod_article a:active,
.mod_article.moos.moos a:hover, .moos .mod_article a:hover,
.mod_article.moos.moos a:focus, .moos .mod_article a:focus,
.mod_article.moos.moos a:active, .moos .mod_article a:active,
.navi:not(.logo):not(.sub):not(.mobil) a:hover,
.navi:not(.logo):not(.sub):not(.mobil) a:focus,
.navi:not(.logo):not(.sub):not(.mobil) a:active {
    border-bottom: 2px solid rgba(255, 255, 255, 1);
}

.navi.mobil {
    background-color: rgba(0, 0, 0, 0.85);
}

.mod_article,
#cboxOverlay, .content-youtube figcaption {
	background-color: hsla(0, 0%, 98%, 0.95);
}

.mod_article.gelb, .gelb .mod_article,
.gelb #cboxOverlay, .gelb .content-youtube figcaption {
    background-color: hsla(45, 100%, 54%, 0.92);
}


.mod_article.roger-rot, .roger-rot .mod_article,
.roger-rot #cboxOverlay, .roger-rot .content-youtube figcaption {
    background-color: hsla(354, 100%, 18%, 0.9);
}

/* .mod_article.gruen, .gruen .mod_article,
.gruen #cboxOverlay, .gruen .content-youtube figcaption {
    background-color: hsla(354, 100%, 18%, 0.9);
} */

.mod_article.moos, .moos .mod_article,
.moos #cboxOverlay, .moos .content-youtube figcaption {
    background-color: hsla(45, 91%, 38%, 0.93);
}

.mod_article.orange, .orange .mod_article,
.orange #cboxOverlay, .orange .content-youtube figcaption {
    background-color: hsla(31, 100%, 55%, 0.95);
}

.mod_article.gruen, .gruen .mod_article,
.gruen #cboxOverlay, .gruen .content-youtube figcaption {
    background-color: hsla(53, 100%, 37%, 0.93);
}


#article-2 figure {
    background-color: hsl(31, 90%, 55%);		/* orange-HG für Teaser-Grafik */
}

.mod_article.beige, .beige .mod_article,
.beige #cboxOverlay, .beige .video_container a ~ .caption {
    background-color: hsla(34, 58%, 92%, 0.95);
}

.mod_article.hellgelb, .hellgelb .mod_article,
.hellgelb #cboxOverlay, .hellgelb .content-youtube figcaption {
    background-color: hsla(44, 100%, 84%, 0.9);
}

.mod_article.blau, .blau .mod_article,
.blau #cboxOverlay, .blau .content-youtube figcaption {
    background-color: hsla(196, 80%, 50%, 0.93);
}

.mod_article.nepal, .nepal .mod_article,
.nepal #cboxOverlay, .nepal .content-youtube figcaption {
    background-color: hsla(200, 55%, 66%, 0.95);
}

#article-19 figure /*, #article-12 figure*/ {
    background-color: hsl(200, 45%, 66%);		/* nepal-HG für Teaser-Grafik */
}

.mod_article, .mod_article a,
.gelb .mod_article, .gelb .mod_article a,
.mod_article.gelb, .mod_article.gelb a,
.beige .mod_article, .beige .mod_article a,
.mod_article.beige, .mod_article.beige a,
.textdunkel .mod_article, .textdunkel .mod_article a,
.mod_article.textdunkel, .mod_article.textdunkel .content-text a,
form button {
    color: #000;
}

.mod_article a, .content-download a,
.mod_article.textdunkel a, .textdunkel .mod_article a  {
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.mod_article a:hover,
.mod_article a:focus,
.mod_article a:active,
.mod_article.textdunkel a:hover, .textdunkel .mod_article a:hover,
.mod_article.textdunkel a:focus, .textdunkel .mod_article a:focus,
.mod_article.textdunkel a:active, .textdunkel .mod_article a:active,
.textdunkel .content-download a:hover,
.textdunkel .content-download a:focus,
.textdunkel .content-download a:active {
    border-bottom: 2px solid rgba(0, 0, 0, 1);
}

.mod_article .content-gallery figure a, .content-image figure a,
.mod_article .content-gallery figure a:hover, .content-image figure a:hover,
.mod_article .content-gallery figure a:focus, .content-image figure a:focus,
.mod_article .content-gallery figure a:active, .content-image figure a:active {
    border-bottom: none;
}


/* -----    Typo    ----- */

html, input, button {
    font-family: montserrat, Helvetica, sans-serif;
    line-height: 1.4;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
}

html, input, button {
    font-size: 19px;
}

@media (max-width: 1600px) {
    html, .content-text {
      font-size: 15px;
      font-size: calc(0.313vw + 14px);                /*bei 1600px Breite font-size 19px, bei 320px 15px */
    }
}

p, h1 + ul, .content-gallery h2 + ul,
.mod_article:not(:first-child) h2:not(:first-child) {
    margin-top: 1rem;
}

.content-download h2 ~ a {
    display: inline-block;
    line-height: 1;
    margin-top: 1.4rem;
    margin-left: 0.13em;
}

.mod_article h1 {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: bold;
}

.mod_article .content-text:first-child h1:first-child {
  margin-top: -0.2rem;
}

@media (max-width: 1600px) {
  .mod_article h1 {
      font-size: 1.6rem;
      font-size: calc(1.094vw + 20.5px);
    }
}

.mod_article h2 {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: bold;
}

.mod_article .content-text:first-child h2:first-child {
  margin-top: -0.25rem;
}

.mod_article .content-download + .content-youtube {
    padding-top: 3rem;
}

.mod_article p + h2 {
	 margin-top: 2rem;
}

h3, h4 {
  margin-top: 1em;
}

a, a:before, a:after, .content-youtube button span, .content-youtube button:after {
  transition: 0.2s ease-out;
}

a {
	 text-decoration: none;
}

.teaser a {
    font-weight: bold;
}

a.noicon.noicon, a.noicon.noicon:hover, a.noicon.noicon:focus, a.noicon.noicon:active {
    border-bottom-style: none;
}

a[href^="http://"]:not(.noicon):before, a[href^="https://"]:not(.noicon):before,
a[href^="mailto:"]:not(.noicon):before, a[href^="tel:"]:not(.noicon):before,
a[type="application/pdf"]:not(.noicon):before
 {
    font-family: fa-solid;
    font-size: 0.8em;
    margin-right: 0.5em;
}

a[href^="http://"]:not(.noicon):before, a[href^="https://"]:not(.noicon):before {
    content: "\f061";
}

a[href^="mailto:"]:not(.noicon):before {
    content: "\f0e0";
}

a[href^="tel:"]:not(.noicon):before {
    content: "\f095";
}

a[type="application/pdf"]:not(.noicon):before {
    content: "\f1c1";
}

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

li {
    list-style-type: none;
}

.content-text li {
    margin-top: 0.5em;
    margin-left: 6%; 					/* 2em */
    list-style-type: none;
}

.content-text li:before {
  	position: absolute;
  	content: "\f105";
  	font-family: fa-solid;
  	font-size: 0.7em;
  	margin-left: -1em;
  	margin-top: 0.3em;
}

form button {
    font-weight: bold;
}


/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 15, 2019 */

@font-face {
    font-family: 'montserrat-thin';
    src: url('fonts/montserrat-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-thin';
    src: url('fonts/montserrat-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat-extralight';
    src: url('fonts/montserrat-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-extralight';
    src: url('fonts/montserrat-extralightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat-light';
    src: url('fonts/montserrat-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-light';
    src: url('fonts/montserrat-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {          /* Standard */
    font-family: 'montserrat';
    src: url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat-medium';
    src: url('fonts/montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-medium';
    src: url('fonts/montserrat-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {          /* Fett */
    font-family: 'montserrat';
    src: url('fonts/montserrat-semibold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/montserrat-semibolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat-bold';
    src: url('fonts/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-bold';
    src: url('fonts/montserrat-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {          /* nur "Hansel" */
    font-family: 'montserrat-extrabold';
    src: url('fonts/montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserrat-extrabold';
    src: url('fonts/montserrat-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'montserrat-black';
    src: url('fonts/montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat-black';
    src: url('fonts/montserrat-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'fa-solid';
    src: url('fonts/fa-solid-900.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/*@font-face {
  font-family: 'fontawesome';
  src: url('fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}*/


/* -----    Test Client-Erkennung    ----- */

body.tags:before {
    content: attr(class);
    display: inline-block;
    margin: 50px;
    padding: 10px 60px 7px;
    background-color: #00a8eb;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    border: 1px solid currentcolor;
    border-radius: 100px;
}