@font-face {
    font-family: 'pixelar';
    src: url('webfonts/pixelar_regular_w01_regular-webfont.woff2') format('woff2'),
         url('webfonts/pixelar_regular_w01_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Disket';
    src: url('webfonts/Disket-Mono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Disket-Bold';
    src: url('webfonts/Disket-Mono-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Newake';
    src: url('webfonts/NewakeFont-Demo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Archivo';
    src: url('webfonts/ArchivoNarrow-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-Light';
  src: url('webfonts/poppins/Poppins-Light.eot'),
      url('webfonts/poppins/Poppins-Light.eot?#') format('embedded-opentype'),
      url('webfonts/poppins/Poppins-Light.woff') format('woff'),
      url('webfonts/poppins/Poppins-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-Thin';
  src: url('webfonts/poppins/Poppins-Thin.eot'),
      url('webfonts/poppins/Poppins-Thin.eot?#') format('embedded-opentype'),
      url('webfonts/poppins/Poppins-Thin.woff') format('woff'),
      url('webfonts/poppins/Poppins-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Regular';
  src: url('webfonts/poppins/Poppins-Regular.eot'),
      url('webfonts/poppins/Poppins-Regular.eot?#') format('embedded-opentype'),
      url('webfonts/poppins/Poppins-Regular.woff') format('woff'),
      url('webfonts/poppins/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-SemiBold';
  src: url('webfonts/poppins/Poppins-SemiBold.eot'),
      url('webfonts/poppins/Poppins-SemiBold.eot?#') format('embedded-opentype'),
      url('webfonts/poppins/Poppins-SemiBold.woff') format('woff'),
      url('webfonts/poppins/Poppins-SemiBold.ttf') format('truetype');
}

:root {
    --landing-color: #ffffff;
    --link-blau: #668e9d;
    --link-gelb: #CE832F;
}


html {
  scroll-behavior: smooth;
}

/* bgvid-pix-1.jpg */
body {font-family:'Poppins-Regular';overflow: auto;color:#000;margin:0;padding:0;font-size:12px;}


p a, p a:visited {color:#000;border-bottom:0px solid transparent;transition: 0.6s;padding:2px 6px;}
p a:hover, p a:active {color:#fff;background:#000;}

#aktuell p a, #aktuellp a:visited {color:#fff;border-bottom:0px solid transparent;transition: 0.6s;padding:2px 10px 2px 10px!important;display: inline-block;}
#aktuell p a:hover, #aktuellp a:active {color:#000!important;background:#fff;}

#header {height:100vh;background: #000 url('img/videoloading-1.gif') center center no-repeat;background-size: cover!important;} 
/*#header {height:100vh;background: #000 url('img/tanz-bg.gif') center center no-repeat;background-size: cover!important;}*/
.header-overlay {height:25vh;width:100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));position: absolute;top:0;left:0;z-index: 5;}
#mute-button {color:var(--landing-color)!important;position:absolute;right:40px;bottom:40px;font-size:2em;/*opacity: 0.5;*/z-index: 10;cursor:pointer;}
.my-icon {color:var(--landing-color)!important;font-size:1.6em;/*opacity: 0.5;*/z-index: 10;}
#mail-icon {position:absolute;left:240px;bottom:40px;}
#bluesky-icon {position:absolute;left:40px;bottom:40px;}
#fb-icon {position:absolute;left:190px;bottom:40px;}
#mastodon-icon {position:absolute;left:90px;bottom:40px;}
#insta-icon {position:absolute;left:140px;bottom:40px;}
#vimeo-icon {position:absolute;left:240px;bottom:40px;}
#homepage-video {z-index: 1;max-height:100vh;overflow:hidden;}
#homepage-foto {animation: fadeInAnimation ease 4s;animation-iteration-count: 1;animation-fill-mode: forwards;}
#container {height:100vh;overflow: hidden;}
.sw, .sw-fx {filter: saturate(0) /*brightness(2)*/;transition: 0.4s;}
.sw-fx:hover {transition: 0.4s;filter: saturate(1);}
.sw-fx.orbit {filter: saturate(0) contrast(0.8) brightness(1.25);transition: 0.4s;}
.sw-fx.orbit:hover {transition: 0.4s;filter: saturate(1) contrast(1) brightness(1);}
#homepage-video {animation: fadeInAnimation ease 4s;animation-iteration-count: 1;animation-fill-mode: forwards;}
@keyframes fadeInAnimation {0% {opacity: 0;} 100% {opacity: 1;}}
#bio {margin-top: 30px;}
.biotext {/*margin:0 auto 0 auto!important;border:1px solid #ff0000;*/padding:4em;max-width:800px;font-family:'Poppins-Regular'!important;font-size:1.1rem;line-height:1.2;}
.biotext ul li {margin-bottom:1em;}
.projekt-infotext {padding:0 4.5em 1em 4.5em!important;font-size: 1.3em;}
.projekt-header {margin-top:44px;}
#aktuell {margin-bottom: -44px;}
.projekt-header p {padding:0 4.5em 0 5.5em!important;font-size: 1.1em;font-family:'Poppins-Light';letter-spacing: 1px;}
#aktuell h3 {background:#eee;color:#000;padding:0.5em;padding-left:3em;font-family:'Poppins-Light';}
.projekt-header h3 {background:#000;color:#fff;padding:0.5em;padding-left:3.0em;}
.projekt-subinfos.left {font-size:1.1em;padding:0 2.5em 1em 5.2em!important;}
.projekt-subinfos.right {font-size:1.1em;padding:0 5.2em 1em 2.5em!important;}
button.more-button {padding:6px 10px;background: #000;color:#fff;border-radius: 0px;font-size:12px;letter-spacing: 1px;}
button.more-button.less {margin-top: 4em!important}
button {cursor: pointer!important;}
.centered {margin:0 auto 0 auto!important;}
.portraitfoto {background: #eee url('img/portrait-jonas-vietzke.jpg') center center no-repeat;background-size: cover;min-height: 100vh!important;}


h1, h2 {/*text-shadow: 0px 0px 10px rgba(0,0,0,0.5);*/line-height:1;text-transform: lowercase;}
/*h1:before, h2:before {content:'//';}*/
h1 {font-family:'Poppins-Thin';position: absolute;top:20px;left:30px;z-index: 10;color:var(--landing-color);font-size:2em;letter-spacing: 4px;padding:2px 6px 4px 10px;}
h2 {font-family:'Poppins-Thin';position: absolute;top:80px;left:30px;z-index: 10;color:var(--landing-color);font-size:1em;letter-spacing:4px;padding:12px 12px 12px 20px;/*padding:6px 6px 6px 10px;*/}

h1 a, h1 a:visited {color:var(--landing-color);text-decoration: none;background:transparent;transition: 0.8s;padding:2px 6px 4px 10px;}
h2 a, h2 a:visited {color:var(--landing-color);text-decoration: none;background:transparent;transition: 0.8s;padding:6px 6px 6px 10px;}
h1 a:hover, h1 a:active, h2 a:hover, h2 a:active {color:#fff;background-color:var(--landing-color);color:#000;text-decoration: none;}

h2.header {color:#fff;background-color:var(--landing-color);color:#000;text-decoration: none;transition: 0.8s;padding:6px 6px 6px 10px;}
h2 span {margin-right:1em;}

h3 {font-family:'Poppins-Light';color:#000;font-size:2em;letter-spacing: 4px;font-weight:normal;text-transform: lowercase;margin-top:0;}
h3 span.aktuell {font-family:'Poppins-Thin';color:#fff;font-size:inherit;letter-spacing: 4px;font-weight:normal;text-transform: lowercase;margin-top:0;}
h3 span.aktuell::after {content: ' > ';}
h3 a.projekt-link {text-align: right;float:right;font-family: 'pixelar';text-transform: uppercase;}

span.smaller-text {display: inline-block;font-size:0.65em;line-height:1.6;vertical-align: 1px;padding-left:0px;}

nav.menue {position: absolute;z-index: 1000;}
nav.menue ul, #mobile-nav ul {margin: 0;list-style: none;text-indent: 0;padding:1em 1em 1.1em 40px;}
nav.menue ul li.home, #mobile-nav ul li.home {font-family: 'Poppins-Light';}
nav.menue li, #mobile-nav li {display: inline;font-family:'Poppins-Light';letter-spacing: 4px;margin-right:0em!important;list-style: none;text-indent: 0;}
/*nav.menue ul li::after {content: "/"!important;margin-left:1em;color:#fff;}*/
nav.menue li a, #mobile-nav li a {color:var(--landing-color);text-decoration: none;background:transparent;transition: 0.8s;padding:2px 4px 4px 8px;}
nav.menue li a:hover, #mobile-nav li a:hover {color:#fff;background-color:var(--landing-color);color:#000;text-decoration: none;}
a.menue-icon {font-size: 1.5em;line-height: inherit;float: right;margin-left:1em;}
a.menue-icon.last {font-size: 1.5em;line-height: inherit;float: right;margin-left:0em;}
a.menue-icon:hover {background:transparent!important;color:#fff!important;}
.small-topbar {font-size: 0.8em;}
nav.menue ul.small-topbar, #mobile-nav ul.small-topbar {padding:1em 1em 1em 0.5em!important;}
ul.small-topbar li a {margin-right:1em;line-height: 2;}
.small-topbar .menue-icon {float:none;margin-left:0em;}
.small-topbar .menue-icon img {height:14px;width:auto;}

#mobile-nav {filter: opacity(0);
position: fixed;z-index: 2000;
top:0;left:0;
transition: all .6s;
width:100%!important;
background: #000;
}


#navbar, #mobile-navbar {
  background: rgba(0, 0, 0, 1); /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: -50px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

#homepage-foto.orbit .orbit-slide .orbit-figure {height:100vh;width:100vw;background-size: cover!important;}

.projekt-infotext .orbit-slide .orbit-figure {border:0px solid #ff0000;width: 100%;height: 38vh;overflow:hidden;
background: #000;
display: flex;
align-items: center;
justify-content: center;}

nav.orbit-bullets {color:#000;margin-top: 0;margin-bottom: 0;padding:0 0 0.5em 0;text-align: right;}
.orbit-bullets button.is-active {background-color: #000!important;}
.orbit-bullets button {background-color:#fff!important;width:10px!important;height:10px!important;border-radius: 0!important;border:1px solid #000;}

span.swipe {display: none;font-family: 'Poppins-Light';letter-spacing:2px;margin-top:0.5em;text-align: center;font-size:0.9em;}

.projekt-infotext .orbit-figure {background-size:cover!important;}

/*.orbit-slide .orbit-figure iframe {width:100%!important;height:100%;margin:0 auto 0 -0.05em;}*/

p b, p strong {font-family: 'Poppins-SemiBold';font-weight: 100;}

.justformobile {display: none;}


.read-more-content,
.read-more {
  display: none;
  margin-top: 1rem;

  &.expanded {
    .read-more {
      display: block;
    }
  }
}



/*nav#mobile-navbar {display: none;visibility: collapse;}*/

/*h1, h2 {text-shadow: 0px 0px 10px rgba(0,0,0,0.5);line-height:1;text-transform: none;}
h1 {font-family:'Poppins-Light';position: absolute;top:-30px;left:40px;z-index: 10;color:#AFC1A6;font-size:6em;letter-spacing: 0px;}
h2 {font-family:'Poppins-Light';position: absolute;top:80px;left:40px;z-index: 10;color:#AFC1A6;font-size:2em;letter-spacing:0px;}*/

/*.glow {text-shadow: 0px 0px 10px rgba(175,193,166,0.75);}
a:hover .glow {text-shadow: 0px 0px 10px rgba(175,193,166,1);}*/

#footer {margin-top:6em;padding:2em 0 2em 0;text-align: center;text-transform: lowercase;background: #000000;color:#fff;}
#footer ul {margin: 0;list-style: none;text-indent: 0;padding:1em 0 1em 0;}
#footer ul li.home {font-family: 'Poppins-Light';}
#footer li, #footer span {font-size:0.8em;display: inline;font-family:'Poppins-Light';letter-spacing: 2px;margin-right:0em!important;list-style: none;text-indent: 0;}
#footer span {display: block;}
#footer li a {color:#fff;text-decoration: none;background:transparent;transition: 0.8s;padding:2px 4px 4px 4px;}
#footer li a:hover {color:#fff;background-color:#000;text-decoration: none;}
#footer a.menue-icon {font-size: 2em;line-height: inherit;float: none;margin-left:0;margin-right:1.5em;}
#footer a.menue-icon:hover {background:transparent!important;color:#fff!important;}
ul.footer-left {text-align: left;margin-left:40px!important;}
ul.footer-center {text-align: center;margin-top:-6px!important;}
ul.footer-right {text-align: right;margin-right:3em!important;}


.person_data {display: none;visibility: collapse;}

@media (hover: none) {
#mobile-nav li a:hover {color:#fff;background-color:var(--landing-color);text-decoration: none;}
}

@media only screen and (max-width: 600px) {
h1 {font-size:2em;letter-spacing: 4px;top:10px;left:10px;}
h2 {font-size:1em!important;letter-spacing: 3px;top:60px!important;left:10px;}
.biotext {padding:2em;font-size:1.1rem;}
#aktuell h3 {padding-left:1.5em;}
.projekt-infotext {padding: 2em!important;}
.portraitfoto {min-height:1080px;}
.projekt-infotext.orbit {height:100%!important;filter: saturate(1) contrast(1) brightness(1)!important;}
.projekt-infotext.orbit.sw-fx {height:100%!important;filter: saturate(1) contrast(1) brightness(1)!important;}
#header .sw:hover {transition:.4s;filter: saturate(1) contrast(1) brightness(1)!important;}
#homepage-video {background-size:contain!important;}
.projekt-header h3 {padding-left:1.3em;}
.projekt-header p {padding-left: 2.4em!important;}
.hideifmobile {display: none;visibility: collapse;}
.justformobile {display: block;}
.header-overlay {height:100vh;width:100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));position: absolute;top:0;left:0;z-index: 5;}
.projekt-infotext .orbit-slide .orbit-figure {width: 100%;height: 40vh;overflow:hidden;
background: #000;
display: flex;
align-items: center;
justify-content: center;}
.projekt-subinfos.left {font-size:1.1em;padding:0 2.5em 1em 2em!important;}
.projekt-subinfos.right {font-size:1.1em;padding:0 2em 1em 2.5em!important;}
ul.footer-left {text-align: center;margin-left:0!important}
ul.footer-center {text-align: center;margin-top:0!important;}
ul.footer-right {text-align: center;margin-right:0!important;}
nav.orbit-bullets {display: none;}
span.swipe {display: block;}
#footer a.menue-icon {margin:0 25px 0 0!important;}
#footer a.menue-icon.prelast {margin:0 0 0 0!important;}
#footer a.menue-icon.last {margin:10px 0 0 0!important;display:block;}
}

@media only screen and (max-width: 1023px) and (min-width: 601px) {
h1 {font-size:2em;letter-spacing: 4px;top:10px;left:10px;}
h2 {font-size:1em;letter-spacing: 4px;top:60px!important;left:10px;}
.portraitfoto.sw-fx {filter: saturate(1);}
.portraitfoto {min-height:1080px;}
.biotext {padding:2em;font-size:1.1rem;}
ul.footer-left {text-align: center;margin-left:0!important}
ul.footer-center {text-align: center;margin-top:0!important;}
ul.footer-right {text-align: center;margin-right:0!important;}
}


/* mobile menue */

.mobile-menue-wrapper{
  position: fixed;
  top: 0;
  /*left: -100%;*/
  right: -100%;
  height: 100vh!important;
  width: 100%;
  background: rgba(0, 0, 0, 1.0);
  z-index:1000;
  transition: all 0.6s ease-in-out;
}
#active:checked ~ .mobile-menue-wrapper{
  /*left: 0;*/
  right:0;
}
.menu-btn{
  background:rgba(0, 0, 0, 0.0);
  position: absolute;
  z-index: 2000;
  right:-18px;
  top:-7px;
  height: 50px;
  width: 50px;
  text-align: center;
  padding:0 0 0 0;
  line-height: 50px;
  border-radius: 0;
  font-size: 20px;
  cursor: pointer;
  /*color: #fff;*/
  /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
 /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
  transition: all 0.3s ease-in-out;
}
.menu-btn.active2:before {transform: rotate(45deg);}
.menu-btn.active2:after {transform: rotate(-45deg);}
.menu-btn.active2 span {transform: scaleX(0);}

.menu-btn span,
.menu-btn:before,
.menu-btn:after{
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 30%;
    width: 40%;
    border-bottom: 2px solid #fff;
    transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    filter:opacity(100%);
}
.menu-btn:before{
  transform: translateY(-8px);
}
.menu-btn:after{
  transform: translateY(8px);
}
.close {
    z-index: 4000;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .6s;
    position: absolute;
}

/* closing animation */
#active:checked + .menu-btn span {
    transform: scaleX(0);
    filter:opacity(0%);
}
#active:checked + .menu-btn:before {
    transform: rotate(45deg);
  border-color: #fff;
  filter:opacity(0%);
}
#active:checked + .menu-btn:after {
    transform: rotate(-45deg);
  border-color: #fff;
  filter:opacity(0%);
}
.mobile-menue-wrapper ul li {display: block;font-size:1.6em;}
input[type="checkbox"]{
  display: none;
}
#active:checked ~ .mobile-menue-wrapper ul li a{
  opacity: 1;
}
.mobile-menue-wrapper ul li a{
  transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateX(100px);
}
#active:checked ~ .mobile-menue-wrapper ul li a{
    transform: none;
    transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
   transition-delay: .6s;
  transform: translateX(-100px);
}