/* * { border: 1px solid  red; } */
ol {
  margin-top: 4rem;
}
ol li {
  margin-bottom: 1.5rem;
  
}

/*
 * JOB STÖRER
———————————————————————————————————————————————
 */
.hero-line {
  position: relative;
  }
.job-cta {
  position: absolute;
  z-index: 999;
  top: var(--copy);
  left: var(--copy);
  width: calc( var(--copy) * 10 );
  height: auto;
  }
  @media screen and (orientation:portrait) { 
    .job-cta {
      /* background: red; */
      margin-bottom:  calc( var(--copy) * 4 )!important;
    }
  }
.job-cta img {
 width: 100%; 
 }
 
.normal-edi25 .case-intro {
  display: none!important;
 }
/* footer .job-cta {
  width: calc( var(--copy) * 9 );
  top: var(--copy);
  left: var(--copy);
  } */

.projektleiterin-60-100 footer .job-cta,
.case footer .job-cta {
  display: none;
  }

  


/*
 * HIDE ACTIVE CASE TEASER
———————————————————————————————————————————————
 */
body.vlog-weisst-du section.vlog-weisst-du {
  display: none;
  }
body.yousee-unframe section.yousee-unframe {
  display: none;
  }
body.gorilla-freestyleschule section.gorilla-freestyleschule {
  display: none;
  }
body.zhaw-mach-was-draus section.zhaw-mach-was-draus {
  display: none;
  }
body.denner-grillfieber section.denner-grillfieber {
  display: none;
  }
body.schloss-freudenfels-website section.schloss-freudenfels-website {
  display: none;
  }
body.drivelock-in-the-spheres-of-your-it section.drivelock-in-the-spheres-of-your-it {
  display: none;
  }
body.arpina-lebensfreude section.arpina-lebensfreude {
  display: none;
  }
body.raina-treehugger section.raina-treehugger {
  display: none;
  }
body.rh-make-things-better section.rh-make-things-better {
  display: none;
  }
body.fairtrade-wirallesindfairtrade section.fairtrade-wirallesindfairtrade {
  display: none;
  }
body.kunstplanet-interaktivesterne section.kunstplanet-interaktivesterne {
  display: none;
  }
body.budgetcomputer-vomlebengetestet section.budgetcomputer-vomlebengetestet {
  display: none;
  }
body.radclette-ontour section.radclette-ontour {
  display: none;
  }
body.fairtrade-fairbruary section.fairtrade-fairbruary {
  display: none;
  }
body.gummilove-sport section.radclette-sport {
  display: none;
  }
body.swiss-connecting-cultures section.swiss-connecting-cultures {
  display: none;
  }
body.raina-auftritt section.raina-auftritt {
  display: none;
  }


/*
 * SOME RESETS
———————————————————————————————————————————————
 */

::-moz-selection {
  background: var(--akzent-color);
  text-shadow: none;
  }
::selection {
  background: var(--akzent-color);
  text-shadow: none;
  }

/*
 * Remove the gutter between images, videos, audio and canvas and the bottom@import("main.css"); of@import("main.css");
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
    vertical-align: middle;
  }

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
  }
  
/*
 *  RESET SPACINGS
 */
html, body,
h1, h2, h3, h4,
p, ul, li, strong,
header, nav, section, footer, .danke {
  margin: 0; padding: 0;
  }
  
/*
 * BOXSIZE FOR EVERYTHING!
 */

* {
  box-sizing: border-box;
  }

/*
 * Eliminate h-Scroller on Windows
 */
 body { overflow-x: clip; }
 
/*
 * SETTINGS
———————————————————————————————————————————————
 */
html {
  scroll-behavior: smooth;
  }

:root {

/* FONT SIZES
 —————————————————————————————— */
/* https://clamp.font-size.app/ */
/* Minimum viewport width 375px */
/* Maximum viewport width 90rem */

/* Minimum font size 20 Px */
/* Maximum font size 32 Px */
--copy: clamp(1.1875rem, 0.9014rem + 1.2207vw, 2rem);


/* COLORS
—————————————————————————————— */

/* Light mode */
--dunkel:   12, 12, 11;
--hell:     255, 255, 244;
--akzent:   287, 199, 254;


/* Default mode */
--text-color:   rgb( var(--dunkel) );
--bg-color:     rgb( var(--hell)   );
--akzent-color: rgb( var(--akzent) );
  }

/*
 * SET COLORS
 ———————————————————————————————————————————————
 */

html {
  color:            var(--text-color);
  background-color: var(--bg-color);
  }  
  
    
/* VALUES (Default)
  —————————————————————————————— */
:root { 
  --gutter:   calc( var(--copy) * 1.6 );
  --v-space:  calc( var(--copy) * 5 );
  }

/* Values (Landscape)
  —————————————————————————————— */
/* @media screen and (orientation:landscape) {

  :root { 
    --gutter:   var(--big-copy);
    --v-space:  var(--headline);
    }

  } */

  
/*
 * TYPOGRAPHY
 ———————————————————————————————————————————————
 */

/*
 * LOAD & APPLY FONT
 */
@font-face {
  font-family: 'fkdisplay-alt';
  src: url('/css/fonts/FKDisplay-RegularAlt.woff2?v=.02') format('woff2');  
  font-weight: 600;
  font-style:  normal; 
  }



body,
label, button {  
  font-family:  'fkdisplay-alt', Helvetica, Arial; 
  text-rendering: optimizeLegibility;
  font-size: 1rem;
  
  /* font-variant-ligatures: none;  */
  }

/*
 * SIZES
 */
h1 {
  /* font-family:  'Rubik Mono One';  */
  } 
 
h1, h2, h3, h4 {
  font-weight: normal;
  }

h1, h2, h3, h4,
a, p,
ul, li,
header, nav,
footer, .danke,
label, input, button {
  font-size:    var(--copy);
  line-height:  calc( var(--copy) * 1.3 );
  }


#hero-line h1,
.normal-intro h1,
.about-normal h1,
.about-normal h2,
.case .headline h1,
.copy-blocks h3 {
  text-transform: uppercase;
  }

  
.ooh h3 {
  text-transform: uppercase;
  }
.ooh h1 {
  text-transform: none!important;
  }
  
/* .normal-intro, */
.all-cases-button {
  text-align: center;
}
.about-normal h1,
.about-normal h2 {
  /* text-align: center; */
  }
.more-cases .all-cases-button div {
  margin: var(--v-space) auto;
}
  
.left-align {
  text-align: left;
  padding: var(--gutter);
}

.about-normal h1,
.about-normal h2 {
  margin-bottom: calc( var(--copy) * 3 );
  }

.versal {
  text-transform: uppercase;
  }
.versal-ausgleich {
  font-size: 87%;
  }


/* .case h2 + h3 {
  margin-top: calc( -1 * var(--copy) );
  margin-bottom: calc( 1 * var(--copy) ); 
} */
  
/* LINK Fx 
 ——————————————————— */

section a,
details p a,
details p a:visited {
  text-decoration: none;
  color: var(--text-color);
  border-bottom: 1px solid var(--text-color);
  }
.website-screenrecording a {
  border: none;
  }

nav a,
nav a:visited,
.glassbutton a,
.glassbutton a:visited {
  color: var(--text-color);

  position: relative;

  text-decoration: none;
  border: none;
  
  padding: calc( var(--copy) * .4 ) calc( var(--copy) * .7 );
  }
nav a:hover,
nav a:active {
  }
nav a::after,
.glassbutton a::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  
  display: block;
  width: 100%;
  height: 100%;
  
  border: 1px solid rgba(var(--dunkel),.1);
  
  background-color: rgba(var(--hell),.1);
  border-radius: var(--copy);
  
  -webkit-backdrop-filter: blur(16px);
  
  backdrop-filter: blur(16px);
  transition: background-color .5s ease-out;
  }
nav a:hover::after,
.glassbutton a:hover::after {
  border: 1px solid rgba(var(--dunkel),.3);
  background-color: rgba(var(--hell),.6);
  transition: background-color .1s ease-in;
  }
  
.glassbutton {
  position: relative;
  left: calc( var(--copy) * .7 * -1);
  }
.normal-intro .glassbutton a::after, 
.all-cases-button .glassbutton a::after {
  /* right: 0; */
  left: 0;  
  }
  
footer a,
.danke a {
  color: var(--bg-color);
  text-decoration: none;
  } 


/*
 * LAYOUT
 ———————————————————————————————————————————————
 */
body {
  position: relative;
  }
 
section {
  background-color: var(--bg-color);
  
  position: relative;
  z-index: 10;
  }

/* HERO + INTRO & FOOTER
  ——————————————————— */ 
body {
  position: relative;
  }  

#hero,
#hero-bg,
#hero-line {
  opacity: 0;
  position: relative;
  /* position: absolute; */
  top: 0;
  width: 100vw; height: 100svh;
  
  z-index: 1;
  
  overflow: hidden;
  
  /* animation: fade-in 1s 1.5s linear forwards; */
  }
  
#hero-line {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  opacity: 1;
  pointer-events: none;
  }

#hero-line:not('.denner')::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;

  height: 100%;
  width:  100%;
  z-index: 1;
  
  background: linear-gradient(45deg,rgba(var(--hell),.6), 30%, transparent);
  right: 0;
  }
  
#hero-line div {
  margin: 0;
  /* color: var(--bg-color); */
  
  /* display: block; */
  position: absolute;
  z-index: 9;
  bottom: 0;
  padding: var(--gutter);
  
  pointer-events: auto;

  }
#hero-line h1 {
  margin-bottom: 0; 
  }
  
#hero {
  position: absolute;
  }

#hero {
  animation: move-in 1.25s 1s ease-in-out forwards;
  }
#hero-bg {
  animation: fade-in 2s ease-out forwards;
  }

@keyframes fade-in {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
@keyframes move-in {
      0% {
          opacity: 0;
          transform: scale(2.5) translateY(25%);
      }
      50% {
          opacity: 1;
          /* transform: scale(1); */
      }
      100% {
          opacity: 1;
          transform: scale(1) translateY(0);
      }
  }

/* #flag-anim {
  position: absolute;
  opacity: 0;
  left: -999px;
  } */

#pre-footer {
  height: 100vh;
  pointer-events: none;
  }
 
footer,
.danke {
  position: fixed;
  /* z-index: -1; */
  top: 100vh;
  /* bottom: -100vh; */
  width: 100vw;
  height: 100vh;
  
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  
  overflow: clip;
  }
.danke {
  top: 0;
  }
.showOnMobile {
  display: none;
  }
  @media screen and (orientation:portrait) { 
    
    footer,
    .danke {
      display: flex;
      flex-direction: column;
      align-content: flex-end;
      align-items: flex-end;
      justify-content: flex-start;
    }
    footer div,
    .danke div {
      margin-right: auto;
    }
    
    footer div:first-of-type,
    .danke div:first-of-type  {
      margin-top: auto;
    }
    footer div:nth-of-type(2),
    .danke div:nth-of-type(2) {
      margin-top: calc( var(--copy) * 3 ); 
    }
    
    .showOnMobile {
      display: block;
    }


  }
  
  
#hero-bg video,
footer video,
.danke video,
.newsletter video {
    margin: 0; padding: 0;
    position: absolute;
    left: 0; top: 0;
    z-index: -1;
    
    width: 100%;
    height: 100%;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    -o-object-fit: cover;
    
    object-fit: cover;
    pointer-events: none;
  }  
 
/* FOOTER
   ——————————————————— */  
footer,
.danke,
.newsletter {
  padding: var(--gutter);
  }

.meta-block {
  padding-right: calc( var(--copy) * 1.25 );
}


/* GENERAL
  ——————————————————— */  
.normal-intro,
.case-intro {
  min-height: 65vh;
  /* padding: calc( var(--v-space) * 1 ) var(--gutter); */
  padding: calc( var(--gutter) * 2 ) var(--gutter);
  background: var(--bg-color);
  }
  .left-align {
    background: #ff001c;
    color: white;
  }

.normal-intro {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  }  
  @media screen and (orientation:portrait) { 
    .normal-intro {
      min-height: 46vh;
      /* padding: calc( var(--v-space) * 1.4 ) var(--gutter); */
    }
  }

section {
 padding: var(--gutter);
 }
 .about-normal {
  padding-top: var(--v-space);
  }
 /* section > section {
   padding: var(--gutter) 0;
   } */
   
.normal-quotes {
  padding-left: 0;
  padding-right: 0;
  }

h1 {
  margin-bottom: calc( var(--copy) * 2 );
  }
  
p,
ul {
  margin-bottom: calc( var(--copy) * 1 );
  }  
 
/* NAV
 ——————————————————— */  
header {
  position: fixed;
  top: 0;
  z-index: 99999;
  width: 100vw;
  padding: var(--gutter);
  
  pointer-events: none;
  }
nav p {
  pointer-events: auto;
}
nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  }
nav p:nth-of-type(1) {
  position: fixed;
  left: calc( var(--gutter) - ( var(--copy) * .7) );
  z-index: 999;
  }
nav p:nth-of-type(2) {
  position: fixed;
  right: calc( var(--gutter) - ( var(--copy) * .7) );
  z-index: 999;
  }

/* ABOUT
 ——————————————————— */  
.about {
  /* min-height: 100vh; */
  margin-bottom: var(--v-space);
  }
  
.founder-picture-container {
    width: 100%;
    height: 70vh;
    
    overflow: clip;
    }
    
.founder-picture-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  }
  @media screen and (orientation:portrait) { 
    .founder-picture-container img {
      -o-object-position: 42%;
      object-position: 42%;  
    }
  }
  
.founder-portrait-container {
  display: flex;
  }
.portrait-container {
  padding-right: var(--gutter);
  }
.portrait-container:first-of-type {
  margin-right: var(--gutter);
  }
  @media screen and (orientation:portrait) { 

    .founder-portrait-container {
      flex-direction: column;
      }
      
    .portrait-container:first-of-type {
      margin-right: 0;
      }
    
  }

.portrait-container {
  margin-top: calc( var(--gutter) * 1);
  /* margin-bottom: calc( var(--gutter) * 2); */
  
  display: flex;
  align-items: flex-start;
  }
  @media screen and (orientation:portrait) { 
    .portrait-container {
      display: block;
      }
    
  }
  
.portrait-container {
  display: flex;
  flex-direction: column;
  }

.portrait-container img {
  width: 60%;
  margin-bottom: calc( var(--v-space) * .25 );
  }
  
  

.portrait-container div:nth-of-type(2) {
  /* width: 50%; */
  }
  
.mugshot {
  /* position: relative; */
  
  
  margin-right: var(--gutter);
  margin-bottom: var(--gutter);
  
  width:  50%;
  height: calc( 100vh - ( var(--gutter) * 2 ) );

  overflow: hidden;
  
  /* margin: 0 var(--gutter); */
  }
.mugshot img {
  width: 100%;
  height: 100%;
  
  -o-object-fit: cover;
  
  object-fit: cover;
  }
  
  /* @media screen and (orientation:portrait) { 
    .mugshot {
      width:  100%;
      height: auto;
      }
    .portrait-container div:nth-of-type(2) {
      width: 100%;
      }
  } */

/* REFERENZEN
 ——————————————————— */ 
/* .referenzen a {
  display: block;
  }
.referenzen a::before,
.referenzen a::after {
  display: none;
  } */
.referenzen {
  /* padding-top: 0; */
  }
  
.referenzen .logo-container > div {
  display: block;
  width:  auto;
  height: 14rem;
  
  /* background-size: 100%;
  background-repeat: no-repeat; */
  
  /* border: 1px solid red; */
  
  flex: 0 0 auto;
  margin-right: 5rem;
  }
.referenzen .logo-container > div img {
  height: 100%;
  }
.referenzen .logo-container > div img:first-of-type {
  position: absolute;
  transition: opacity 1s;
  }
.referenzen .logo-container > div img:first-of-type:hover {
  opacity: 0;
  transition: opacity .15s;
  }
.referenzen .logo-container > div a {
  border: none; 
  }
  
.referenzen .logo-container {
  display: flex;
  animation: marquee 10s linear infinite;
  }

.logo-container-wrapper {
    left: calc( var(--gutter) * -1 );
    width: 100vw;
    
    overflow: hidden;
    position: relative;
    
    display: flex;
    /* background: red; */
    }

.logo-container-wrapper::after,
.logo-container-wrapper::before {
    content: '';
    position: absolute;
    top: 0;

    height: 100%;
    width: 5rem;
    z-index: 1;
}
.logo-container-wrapper::after {
  background: linear-gradient(to left, var(--bg-color), transparent);
  right: 0;
  }
.logo-container-wrapper::before {
  background: linear-gradient(to right, var(--bg-color), transparent);
  left: 0;
  }


@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (orientation:portrait) { 
  .referenzen {
    display: none;
  } 
}


/* QUOTE SWIPER
 ——————————————————— */  
body {
   overflow-x: clip;
 }
 
.normal-quotes {
  padding-bottom: var(--gutter);
  }
 
.swiper {
 width: 45vw;
 height: 700px;
 
 margin: calc( var(--gutter) * 2 ) 0;
 }
 @media screen and (orientation:portrait) { 

   .swiper {
     width: 100vw;
     height: 70vh;
   }    
   
 }
.quote-headline {
 /* margin-bottom: auto; */
 /* margin-bottom: 2rem; */
 height: 40%;
 width: 80%;
 margin: auto;
 position: relative;
 z-index: 99;
 /* background: red; */
 display: flex;
 align-items: center;
 }
.quote {
 position: relative;
 padding: var(--gutter);
 
 background-color: var(--bg-color);
 /* border: 1px solid rgba(0,0,0,.1);
 border-radius: var(--gutter); */
 
 /* display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 align-content: space-between; */
 text-align: center;
 }
.quote h4 {
 display: block;
 }
.quote h4::before {
 content: '«';
 }
.quote h4::after {
 content: '»';
 }
.quote-person {
   /* margin-top: auto; */
   width: 90%;
   margin-bottom: var(--gutter);
   
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   
   /* background: red; */
 }
.quote-portrait-container {
 margin: 0 auto;
 position: relative;
 width: 13vw;
 height: 15vw;
 
 /* border-radius: 25%; */

 overflow: clip;
 margin-bottom: calc( var(--copy) / 4 );
 }
 @media screen and (orientation:portrait) { 
   .quote-portrait-container {
     width: 35vw;
     height: 40vw;    
   }    
 }
.swiper-slide img {
 margin: 0; padding: 0;
 position: absolute;
 left: 0; top: 0;
 
 width: 100%;
 height: 100%;
 
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 
 -o-object-fit: cover;
 
 object-fit: cover;
 }

.swiper {
  position: relative;
  }
.swiper::after,
.swiper::before {
    content: '';
    position: absolute;
    top: 0;

    height: 100%;
    width: 5rem;
    z-index: 5;
}
.swiper::after {
    background: linear-gradient(to left, var(--bg-color), transparent);
    right: 0;
    }
.swiper::before {
    background: linear-gradient(to right, var(--bg-color), transparent);
    left: 0;
    }

/* rh Feedback SWIPER
 ——————————————————— */  

.rh-feedback .swiper {
  width: 100vw;
  height: 80vh;
  
  position: relative;
  left: calc( var(--gutter) * -1 );
  
  margin-top: 0;
  margin-bottom: calc( var(--gutter) * 2 );
  }
.rh-feedback .swiper-slide {

  }

  @media screen and (orientation:portrait) { 
  
    .rh-feedback .swiper {
      width: 100vw;
      height: 70vh;
    }
    .rh-feedback .swiper-slide {
      
    }
     
  }

.rh-feedback .swiper-slide img {
   margin: 0; padding: 0;
   position: relative;
   left: 0; top: 0;
   transform: translate(0, 0);
   width: auto;
   height: 100%;
   }
.rh-feedback .swiper::after,
.rh-feedback .swiper::before {
   content: '';
   position: absolute;
   background: none;
   }
 
/* CASETEASER 
 ——————————————————— */  
.case-teaser a {
  text-decoration: none;
  border: none;
  }
  
.case-teaser {
  position: relative;
  width:  100vw;
  height: 100vh;
    
  /* display: flex; */
  /* align-items: flex-end; */
  /* align-items: flex-start;  */
  /* align-items: center; */
  
  padding: 0;
  }
  @media screen and (orientation:portrait) { 
    .case-teaser {
      height: 75vh;
      }
    /* .case-teaser .video-container {
      padding-bottom: 0;
      } */
  }
  
.case-teaser .video-container {
  position: absolute;
  padding: calc( var(--gutter) / 1 );
  padding-top: 0;
  /* padding-bottom: 0; */
  
  width: 100%;
  height: 100%;
  
  overflow: clip;
  }

.case-teaser .video-container a {
  position: relative;
  display: block;
  
  width: 100%;
  height: 100%;
  /* background: rgba(255,0,0,.2); */
  }

.case-teaser .video-container {
  /* background: red; */
 }
.case-teaser .video-frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: var(--copy);
  /* background: greenyellow; */
  /* border: 2px solid greenyellow; */
 }

  
.case-teaser .video-container .video-frame video {
  margin: 0; padding: 0;
  
  position: absolute;
  left: 0; top: 0;
  
  width:  100%;
  height: 110%!important;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  -o-object-fit: cover;
  
  object-fit: cover;
  
  z-index: -1;
  }

.case-teaser .teaser-text {
  display: inline-block;
  position: relative;
  }
  
.case-teaser .teaser-text p {
  margin: 0;
  }

.teaser-text {
  padding-left: var(--gutter); 
  }  

.teaser-text h2 {
  text-transform: uppercase;
  text-decoration: none;
  }
.teaser-text a {
  text-decoration: none;
  color: var(--text-color);
  
  display: block;
  position: relative;
  left: calc( var(--copy) * .7 * -1);
  }

.teaser-text h2,
.teaser-text p span:not(.nowrap) {  
  position: relative;
  z-index: 99;
  /* display: inline-block; */
  top: calc( var(--copy) * .7 );
  /* bottom: calc( var(--copy) * 1.7 ); */
  
  padding: calc( var(--copy) * .4 ) calc( var(--copy) * .7 );
  margin-bottom: calc( var(--copy) * .7 );
  
  }
  @media screen and (orientation:portrait) { 
    .teaser-text h2,
    .teaser-text p span:not(.nowrap) {  
      /* bottom: calc( var(--copy) * 1 );   */
      }
  }
  
.teaser-text h2::after,
.teaser-text p span::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  
  /* display: inline; */
  width: 100%;
  height: 100%;
  
  border: 1px solid rgba(var(--hell),.1);
  
  background-color: rgba(var(--hell),.1);
  border-radius: var(--copy);
  
  -webkit-backdrop-filter: blur(16px);
  
  backdrop-filter: blur(16px);
  transition: background-color .5s ease-out;
  }

.teaser-text a:hover h2::after,
.teaser-text a:hover p span::after {
  border: 1px solid rgba(var(--hell),.3);
  background-color: rgba(var(--hell),.6);
  transition: background-color .1s ease-in;
  }


.more-cases {
    padding: 0;
    padding-bottom: var(--gutter);
    padding-top: calc( var(--v-space) * 1 );
    }
  .more-cases > p {
    padding-left: var(--gutter);
    }
  .more-cases .more-cases-container {
    display: flex;
    flex-wrap: wrap;
    }
  .more-cases .case-teaser {
    width: 50vw; 
    height: 60vh;
    /* padding-top: var(--gutter); */
    }
  .more-cases .case-teaser .teaser-text p {
    margin-top: calc( var(--copy) * -.2 );
    }  
  .more-cases .case-teaser .video-frame {
    /* border: 1px solid red; */
    }
    @media screen and (orientation:portrait) { 
      .more-cases div {
        display: block; 
      }
      .more-cases .case-teaser {
      width: 100%;
      height: 60vh;
      }
    }
  
.case section img {
  margin: 0; padding: 0;
  width: 100%;
  }

/* CASETEASER 
   ENTER VIEWPORT REVEAL Fx
   ——————————————————— */  

@keyframes smooth-appear {
    to{
      transform: scale(1) translateY(0%);
      opacity:1;
    }
  }
  .smooth-appear-fx:not(.more-cases-container .smooth-appear-fx) {
    opacity:0;
    transform: scale(.6) translateY(50%);
    }
  .appearfx {
    animation: smooth-appear .5s ease-out forwards;
    }


/* CASE
  ——————————————————— */  
#case-hero {
  position: relative;
  
  width: 100vw;
  height: 100svh;
  z-index: -1;
  
  padding: var(--gutter);
  
  opacity: 0;
  animation: fade-in 1s .5s linear forwards;
  }
#case-hero .headline {
  color: var(--bg-color);
  position: absolute;
  bottom: 0;
  z-index: 9999;
  }
  
#case-hero h3 {
  /* margin-bottom: var(--copy); */
  }

#case-hero video,
.fullscreen video {
 margin: 0; padding: 0;
 position: absolute;
 left: 0; top: 0;
 
 width: 100%;
 height: 100%;
 
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 
 -o-object-fit: cover;
 
 object-fit: cover;

 }
 @media screen and (orientation:portrait) { 
   .fairtrade-fairbruary #case-hero video {
     -o-object-position: 37%;
     object-position: 37%;
     }
 }

.fullscreen {
  position: relative;
  left: calc( var(--gutter) * -1 );
  
  /* width: calc( 100% + ( var(--gutter) * 2 ) ); */
  width: 100vw;
  height: 100vh;
  
  
  overflow: hidden;
  }
  @media screen and (orientation:portrait) { 
    .fullscreen {
      height: 60vh;
    }
  }

  
.spacer {
  height: calc( var(--copy) * 3 );
  }	
    
.fullscreen img {
  margin: 0; padding: 0;
  position: absolute;
  left: 0; top: 0;
  
  width: 100vw;
  height: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  -o-object-fit: cover;
  
  object-fit: cover;
  }

.fullwidth,
.fullwidth video {
 width: 100%!important; 
 -o-object-fit: cover; 
 object-fit: cover;
 }
 
.fullwidth iframe {
  aspect-ratio: 16 / 9;
}
 

.double,
.tripple {
  display: flex;
  gap: var(--copy);
  }
.double img {
  max-width: 49%;
  height: auto;
  }
.double video {
  max-width: 49%;
  height: 100vh;
  margin: 0;
  /* margin: 0 1%; */
  }  
.tripple video,
.tripple iframe {
  max-width: 32%;
  width: 32%!important;
  height: 100vh;
  margin: 0 .4%;
  }
  @media screen and (orientation:landscape) { 
    .double video {
      width: 50%!important;
      }  
    .tripple video,
    .tripple iframe {
      width: 32%!important;
      }
      
    .double + .double,
    .double + .double video {
      margin: 0!important;
      padding: 0!important;
      /* border: 10px solid red; */
    }
    
  }
  @media screen and (orientation:portrait) { 
    .double,
    .tripple  {
      flex-wrap: wrap;
      }
    .double video,
    .double img,
    .tripple video,
    .tripple iframe  {
      max-width: 100%;
      }
    .tripple iframe  {
      width: 100%!important;
      /* height: auto; */
    }
  } 

.zhaw .tripple {  
  justify-content: space-between;
  }
.zhaw .tripple img {
  width: 31%;
  }
  @media screen and (orientation:portrait) { 
    .zhaw .tripple img {  
       width: 47%;
    }
  }
  
.yousee .tripple {  
    justify-content: space-between;
    }
  .yousee .tripple video {
    width: 32%;
    }
    @media screen and (orientation:portrait) { 
      .yousee .tripple video {  
         width: 100%!important;
      }
    }

.fairbruary .fullwidth,
.fairbruary .double {
  margin: var(--copy) 0;
  }


.gameslist {
    margin-top: var(--copy);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
.gameslist .game {
  width: 30%;
  margin-bottom: var(--copy);
  }

.gameslist .game a:not(.gameslist .game p a),
.gameslist .game a img {
  text-decoration: none;
  border: none;
  }

  
@media screen and (orientation:portrait) { 
  
  .gameslist {
    display: block;
  }
  
  .gameslist .game {
    width: 100%;
    display: flex;
    margin-bottom: var(--copy);
  } 
  
  .gameslist .game p {
    /* display: block; */
    /* width: 45%; */
    margin-left: 5%;
  }
  
  .gameslist .game a:not(.gameslist .game p a) {
    display: block;
    width: 45%;
  }
  
}


  /* .double {
    height: auto!important;
    max-height: none!important;
    padding: 	0!important;
    margin: 	0!important;
    }	
  .double video {
    width: 50%!important;
    padding: 	0!important;
    margin: 	0!important;
    } */
  
  .website-screenrecording video {
    width: 100%!important;
    height: auto!important;
    max-height: none!important;
    }
    
.top-bottom-space {
  display: block;
  margin: calc( var(--v-space) * 1 ) 0!important;
  }    
    
    
.case h3 + video,
.case h3 + p:not(.copy-blocks p) {
  margin-top: var(--copy);
  }

.case section h2 {
  margin-bottom: var(--copy);
  }
.case section p:not(.case-intro p) {
  margin-top: var(--copy);
  }
  @media screen and (orientation:portrait) { 
    .copy-blocks h3 {
      margin-top: var(--copy);    
      margin-bottom: var(--copy);    
    }
  }


.case section video:not(.fullscreen video) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  margin: var(--copy) auto;
  }

.credits {
  min-width: 36ch;
  }
.credits ul {
  list-style-type: none;
  padding-left: 1rem;
  border-left:  1px solid var(--muted);
  }
.credits ul li {
  margin-bottom: var(--copy);
  }
  
.copy-container {
  display: flex;
  }
  @media screen and (orientation:portrait) { 
    .copy-container  {
      flex-wrap: wrap;
      }
  } 

.copy-blocks {
  padding-right: var(--gutter);
  }
  
.copy-blocks p {
  min-width: 24ch;
  }

.copy-blocks div {
  display: flex;
  /* margin-bottom: var(--gutter); */
  }
.copy-blocks div h3 {
  min-width: 13ch;
  }
@media screen and (orientation:portrait) { 
  .copy-blocks div {
    flex-wrap: wrap;
    }
}  


.newsletter {
  position: fixed;
  width: 100vw;
  height: 100vh;
  
  overflow: clip;
  }
.newsletter-anmelden {
  width: 100%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex-direction: column;
  }
  
#mc_embed_shell {
  margin: var(--gutter) 0;
  }

#mc_embed_signup {
  
  padding: var(--gutter)!important;
  max-width: 60ch;
  
  border: 1px solid rgba(var(--dunkel),.1)!important;
  background-color: rgba(var(--hell),.1)!important;
  border-radius: var(--copy)!important;
  
  -webkit-backdrop-filter: blur(16px)!important;
  
  backdrop-filter: blur(16px)!important;
  }
  @media screen and (orientation:portrait) { 
    #mc_embed_signup {
      padding: calc( var(--gutter) / 4 )!important;
    }
  }
    
    

#mc-embedded-subscribe,
#mc_embed_signup_scroll h2 {
  font-family:  'fkdisplay-alt', Helvetica, Arial; 
  text-rendering: optimizeLegibility;
  
  font-size:    var(--copy)!important;
  line-height:  calc( var(--copy) * 1.3 )!important;
  }
  
#mce-success-response {
  color: var(--dunkel)!important;
  font-size:    var(--copy)!important;
  line-height:  calc( var(--copy) * 1.3 )!important;
  
  position: relative;
  left: 0;
  }
  
#mc-embedded-subscribe {
  font-size: 1rem!important;
  margin-top: 1rem!important;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.nowrap {
   white-space: nowrap;
   }
.nofx {
  position: absolute;
  margin: 0!important; padding: 0!important;
  height: 0;
  /* background: red; */
  }
  .nofx::before {
   height: 0!important; 
  }

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

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

/* @media screen and (orientation:portrait) { 
    .hide-on-mobile {
      display: none;
    }
  } */

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* * {
  box-sizing: border-box;
  border: 1px dotted red ;
} */

.impressum .hero {
  height: 35vh;
  }

.impressum h1,
.impressum h2 {
  text-transform: uppercase;
  }
  
.impressum h2 {
  margin-top: var(--v-space);
  margin-bottom: calc( var(--v-space) / 3 );
}