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;
 }
.projektleiterin-60-100 footer .job-cta,
.case footer .job-cta {
  display: none;
  }

  


/*
 * HIDE ACTIVE CASE TEASER
———————————————————————————————————————————————
 */
body.zhaw-studiere-umdenken section.zhaw-studiere-umdenken {
 display: none;
 }
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
———————————————————————————————————————————————
 */

::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;
  overflow-x: hidden;
  }

: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 );

  /* Grid system */
  --grid-max-width: 1440px;
  --grid-gap: 2rem;
  --grid-margin: 2rem;
  --grid-columns: 4;
  --grid-template: repeat(4, 1fr);
  }
@media (max-width: 767px) {
  :root {
    --grid-gap: 1rem;
    --grid-margin: 1rem;
    --grid-columns: 2;
    --grid-template: repeat(2, 1fr);
  }
  #hero-line div,
  #case-hero,
  .cloud-hero {
    padding-left: var(--grid-margin);
  }
  #case-hero .headline,
  .cloud-hero .headline {
    left: 0;
    padding-left: var(--grid-margin);
  }
  #case-hero .headline h3,
  #case-hero .headline h1,
  .cloud-hero .headline h1 {
    margin-left: 0;
  }
}



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

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



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

h1, h2, h3, h4 {
  font-weight: normal;
  }

h1, h2, h3, h4,
a, p, blockquote,
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;
  }
  
.all-cases-button {
  text-align: center;
  padding-top: 5rem;
}
.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%;
  }


/* LINK Fx 
 ——————————————————— */

section a,
.case-elements 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,
.glassbutton button {
  color: var(--text-color);

  position: relative;

  text-decoration: none;
  border: none;

  padding: calc( var(--copy) * .4 ) calc( var(--copy) * .7 );
  }
nav a::after,
.glassbutton a::after,
.glassbutton button::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,
.glassbutton button: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);
  isolation: isolate;
  }
.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;
  }

/* Main content covers the fixed footer */
main {
  background-color: var(--bg-color);
  position: relative;
  z-index: 3;
  }

#hero,
#hero-bg,
#hero-line {
  opacity: 0;
  position: relative;
  /* position: absolute; */
  top: 0;
  width: 100%; height: 100svh;

  z-index: 2;
  
  overflow: hidden;
  
  /* animation: fade-in 1s 1.5s linear forwards; */
  }
  
#hero-line {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  opacity: 0;
  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(38, 97, 184, 0.5), 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; 
  color: white;
  }
  
#hero {
  position: absolute;
  }

#hero-bg {
  opacity: 1;
  }
#hero.is-visible {
  opacity: 1;
  transform-origin: center bottom;
  animation: intro-slide 3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
#hero-line {
  animation: intro-slide-text 3s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

@keyframes fade-in {
      0%   { opacity: 0; }
      100% { opacity: 1; }
  }
@keyframes intro-slide {
      0%   { transform: perspective(1200px) translateY(110%) rotateX(-25deg); }
      100% { transform: perspective(1200px) translateY(0) rotateX(0deg); }
  }
@keyframes intro-slide-text {
      0%   { opacity: 0; transform: translateY(60%); }
      100% { opacity: 1; transform: translateY(0); }
  }
@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);
      }
  }

#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;
  color: var(--bg-color);
  }
.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,
#hero-bg .cloud-canvas,
footer video,
footer .cloud-canvas,
.danke video,
.danke .cloud-canvas,
.newsletter video,
.newsletter .cloud-canvas {
    margin: 0; padding: 0;
    position: absolute;
    inset: 0;
    z-index: -1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
    image-rendering: auto;
  }
#hero-bg .cloud-canvas {
    opacity: 0;
    transition: opacity 1s ease-out;
  }

/* FOOTER
   ——————————————————— */  
footer,
.danke,
.newsletter {
  padding: var(--gutter);
  }

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


/* CONTENT-VISIBILITY
  ——————————————————— */
/* content-visibility: auto entfernt — verursacht holpriges Scrolling */

/* GENERAL
  ——————————————————— */
.normal-intro {
  position: relative;
  min-height: 65vh;
  padding: calc( var(--gutter) * 2 ) var(--grid-margin);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  background: var(--bg-color);
  }
.normal-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  min-height: 200vh;
  height: 100%;
  background: inherit;
  z-index: -1;
  }
.case-intro {
  min-height: 65vh;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: calc( var(--gutter) * 2 ) var(--grid-margin);
  background: var(--bg-color);
  }
.case-elements .case-intro {
  min-height: auto;
  max-width: none;
  margin-inline: 0;
  padding: 0;
  margin-top: calc( var(--copy) * 10 );
  margin-bottom: calc( var(--copy) * 2 );
  }
.case-elements .text-block + .case-intro {
  margin-top: 0;
  }
.case-elements .case-intro::before {
  display: none;
  }
.case-elements .case-intro > h2 {
  background: #ffff00;
  display: inline-block;
  padding: .1em .3em;
  margin-top: 0;
  margin-bottom: 0;
  }
.case-intro::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: inherit;
  z-index: -1;
  }
  .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);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  }
 /* section > section {
   padding: var(--gutter) 0;
   } */
   
.normal-quotes {
  padding-left: 0;
  padding-right: 0;
  }
.normal-quotes > h2 {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  padding-top: var(--v-space);
  }

h1,
h2 {
  margin-bottom: calc( var(--copy) * 2 );
  text-transform: uppercase;
  }
  
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%;
  object-fit: cover;
  }
  @media screen and (orientation:portrait) {
    .founder-picture-container img {
      object-position: 42%;  
    }
  }
  
.founder-portrait-container {
  display: grid;
  grid-template-columns: var(--grid-template);
  column-gap: var(--grid-gap);
  row-gap: calc(var(--gutter) * 2);
  margin-top: var(--gutter);
  }

.portrait-container {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: var(--grid-gap);
  }

.einzel-portrait {
  grid-column: 1 / -1;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  max-width: 50%;
  }

.portrait-container > div:last-child {
  grid-column: 1 / -1;
  align-self: start;
  padding-right: 2rem;
  }
.portrait-container h3 {
  margin-bottom: calc(var(--copy) * .5);
  }
.einzel-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  
  

.mugshot {
  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%;
  object-fit: cover;
  }

/* REFERENZEN
 ——————————————————— */
.referenzen .logo-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  }
.referenzen .logo-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  }
.referenzen .logo-container > div img {
  width: 100%;
  height: auto;
  }
.referenzen .logo-container > div a {
  border: none;
  }
@media screen and (orientation:portrait) {
  .referenzen .logo-container {
    grid-template-columns: repeat(4, 1fr);
    }
}


/* QUOTE SWIPER
 ——————————————————— */
.normal-quotes {
  padding-bottom: var(--gutter);
  }
 
.swiper {
 width: 45vw;
 height: auto;

 margin: calc( var(--gutter) * 2 ) 0;
 }
 @media screen and (orientation:portrait) {

   .swiper {
     width: 100vw;
     height: auto;
   }    
   
 }
.quote-headline {
 width: 80%;
 margin: 0 auto;
 padding-bottom: calc(var(--gutter) / 2);
 position: relative;
 z-index: 99;
 }
.quote {
 position: relative;
 padding: var(--gutter);
 background-color: var(--bg-color);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 }
.quote blockquote {
 display: block;
 margin: 0;
 }
.quote blockquote::before {
 content: '«';
 }
.quote blockquote::after {
 content: '»';
 }
.quote-person {
   width: 90%;
   margin-top: calc(var(--gutter) / 2);
 }
.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%);
 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;
    }

/* Element Carousel
 ——————————————————— */

.element-carousel {
  position: relative;
  /* Break out of case-elements padding into full width */
  width: calc(100% + var(--grid-margin) * 2);
  margin-left: calc(var(--grid-margin) * -1);
  /* Pfeile sitzen im Margin, Swiper dazwischen */
  display: grid;
  grid-template-columns: var(--grid-margin) 1fr var(--grid-margin);
  align-items: center;
  }
.element-carousel .swiper {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  }
.element-carousel .swiper::after,
.element-carousel .swiper::before {
  display: none;
  }
.element-carousel .swiper-slide {
  height: auto;
  }
.element-carousel .swiper-slide img {
  position: relative;
  left: 0; top: 0;
  transform: none;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  }
.element-carousel .swiper-button-prev,
.element-carousel .swiper-button-next {
  grid-row: 1;
  z-index: 10;
  color: var(--text-color);
  position: static;
  width: var(--grid-margin);
  display: flex;
  align-items: center;
  justify-content: center;
  }
.element-carousel .swiper-button-prev {
  grid-column: 1;
  }
.element-carousel .swiper-button-next {
  grid-column: 3;
  }
.element-carousel .swiper-button-prev::after,
.element-carousel .swiper-button-next::after {
  font-size: clamp(1rem, 2vw, 1.5rem);
  }
.element-carousel .swiper-pagination {
  grid-column: 2;
  }
 
/* HERO CASES GRID (Homepage)
 ——————————————————— */
.hero-cases-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  padding-inline: var(--gutter);
  }
.hero-cases-grid .nofx {
  display: none;
  }
.hero-cases-grid .case-teaser {
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
  }
.hero-cases-grid .case-teaser:nth-of-type(1) { z-index: 7; }
.hero-cases-grid .case-teaser:nth-of-type(2) { z-index: 6; }
.hero-cases-grid .case-teaser:nth-of-type(3) { z-index: 5; }
.hero-cases-grid .case-teaser:nth-of-type(4) { z-index: 4; }
.hero-cases-grid .case-teaser:nth-of-type(5) { z-index: 3; }
.hero-cases-grid .case-teaser:nth-of-type(6) { z-index: 2; }
.hero-cases-grid .case-teaser:nth-of-type(7) { z-index: 1; }
.hero-cases-grid .case-teaser:nth-of-type(-n+3) {
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: calc(100vh - var(--gutter) * 2);
  }
.hero-cases-grid .case-teaser:nth-of-type(n+4) {
  width: calc(50% - var(--gutter) / 2);
  aspect-ratio: 4 / 3;
  }
@media (max-width: 767px) {
  .hero-cases-grid .case-teaser:nth-of-type(-n+3),
  .hero-cases-grid .case-teaser:nth-of-type(n+4) {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .hero-cases-grid .case-teaser:nth-of-type(-n+3) .case-badges--teaser {
    right: calc(var(--gutter) * 2);
  }
}
.hero-cases-grid .case-teaser .video-container {
  padding: 0;
  }
.hero-cases-grid .case-teaser .teaser-text {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 0;
  }

/* CASES OVERVIEW
 ——————————————————— */
/* Cloud hero — shared by cases + impressum, mirrors #case-hero at 50vh */
.cloud-hero {
  position: relative;
  width: 100vw;
  height: 50vh;
  z-index: 2;
  padding: var(--gutter);
  }
.cloud-hero .headline {
  color: var(--bg-color);
  position: absolute;
  bottom: 0;
  z-index: 9999;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  left: 0; right: 0;
  padding-inline: var(--grid-margin);
  padding-bottom: var(--gutter);
  }
.cloud-hero video,
.cloud-hero .cloud-canvas {
  margin: 0; padding: 0;
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  }
.cases-grid {
  display: grid;
  grid-template-columns: var(--grid-template);
  gap: var(--grid-gap);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: calc(var(--gutter) * 2) var(--grid-margin);
  }
.cases-grid .nofx {
  display: none;
  }
.cases-grid .case-teaser {
  grid-column: span 2;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: visible;
  }
.cases-grid .case-teaser .video-container {
  padding: 0;
  }
.cases-grid .case-teaser .teaser-text {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 0;
  }

/* 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: visible;
  }

.case-teaser .video-container a:not(.badge-ribbon) {
  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,
.case-teaser .video-container .video-frame picture,
.case-teaser .video-container .video-frame picture img {
  margin: 0; padding: 0;

  position: absolute;
  left: 0; top: 0;

  width:  100%;
  height: 115%!important;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
  }

.case-teaser .teaser-text {
  display: inline-block;
  position: relative;
  z-index: 101;
  }
  
.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;

  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 {
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--grid-margin);
    }
  .more-cases .more-cases-container {
    display: grid;
    grid-template-columns: var(--grid-template);
    gap: var(--grid-gap);
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--grid-margin);
    }
  .more-cases .nofx {
    display: none;
    }
  .more-cases .case-teaser {
    grid-column: span 2;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: visible;
    }
  .more-cases .case-teaser .video-container {
    padding: 0;
    }
  .more-cases .case-teaser .teaser-text {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0;
    }
  .more-cases .case-teaser .teaser-text p {
    margin-top: calc( var(--copy) * -.2 );
    }
  
.case section img,
.case .case-elements > img,
.case .case-elements > div > img,
.pitch .case-elements img {
  margin-top: 0; padding: 0;
  width: 100%;
  max-height: calc(100vh - var(--grid-gap) * 2);
  object-fit: cover;
  }
.case .case-elements .full-height img {
  max-height: none;
  object-fit: contain;
  }
.case .case-elements .full-width video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--grid-gap) * 2);
  object-fit: cover;
  }
.case .case-elements .full-width img {
  width: 100%;
  object-fit: cover;
  }

/* 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-teaser .teaser-text {
    opacity: 0;
    transform: scale(.9) translateY(20%);
    }
  .case-teaser .teaser-text.appearfx {
    animation: smooth-appear .4s .15s ease-out forwards;
    }


/* CONTENT GRID
  ——————————————————— */
.case-elements {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  padding-top: var(--grid-gap);
  }
.pitch .case-elements {
  padding-bottom: var(--grid-gap);
  }
.pitch .normal-intro {
  min-height: auto;
  padding-bottom: 0;
  }
.case-elements > * {
  margin-bottom: var(--grid-gap);
  }
.case-elements > .text-block {
  margin-bottom: calc(var(--copy) * 5);
  }
.case-elements ul {
  list-style: none;
  padding-left: 0;
  }
.case-elements ul li {
  margin-top: .4em;
  display: flex;
  }
.case-elements ul li::before {
  content: '–';
  flex-shrink: 0;
  margin-right: .4em;
  }
.case-elements > img,
.case-elements > video {
  margin-bottom: var(--grid-gap);
  }
.case .case-elements > video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  }

/* Responsive video embed */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  }
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  }

/* CASE
  ——————————————————— */
#case-hero {
  position: relative;

  width: 100vw;
  height: 100svh;
  z-index: 2;
  
  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 video,
#case-hero picture,
#case-hero picture img,
.fullscreen video {
 margin: 0; padding: 0;
 position: absolute;
 left: 0; top: 0;

 width: 100%;
 height: 100%;

 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

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

/* ── Case Badges (ribbon + holographic orb) ── */
.case-badges {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.5vw, 32px);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  }
#case-hero > .case-badges {
  animation: fade-in 1s .8s linear forwards;
  transition: none;
  }
.badge-ribbon:nth-child(1) { z-index: 32; }
.badge-ribbon:nth-child(2) { z-index: 31; }
.badge-ribbon:nth-child(3) { z-index: 30; }
.case-badges--hero {
  position: absolute;
  top: 0;
  right: calc(var(--gutter) * 7);
  }
.case-badges--teaser {
  position: absolute;
  top: 0;
  right: calc(var(--gutter) * 2);
  overflow: visible;
  }
@media (min-width: 768px) {
  .hero-cases-grid .case-teaser:nth-of-type(-n+3) .case-badges--teaser {
    right: calc(var(--gutter) * 7);
    }
  }
@media (max-width: 767px) {
  #case-hero > .case-badges--hero {
    right: 42%;
    left: auto;
    }
  }

/* ── Badge structure (identical for ALL badge types) ── */
.badge-ribbon {
  --badge-gap: clamp(8px, 1vw, 14px);
  --badge-ribbon-w: clamp(100px, 12vw, 145px);
  --badge-orb-size: clamp(162px, 20vw, 265px);
  --badge-notch: clamp(28px, 3.8vw, 50px);

  all: unset;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--badge-gap);
  padding-top: var(--badge-gap);
  width: var(--badge-ribbon-w);
  max-width: var(--badge-ribbon-w);
  flex-shrink: 0;
  color: white;
  overflow: visible;
  position: relative;
  cursor: default;
  user-select: none;
  box-sizing: border-box;
  }
a.badge-ribbon { cursor: pointer; }
div.badge-ribbon { pointer-events: none; }
a.badge-ribbon:hover .badge-orb {
  transform: scale(1.1);
  }

/* Black stripe with notch */
.badge-stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--badge-notch)), 0 100%);
  }

/* N logo */
.badge-ribbon::before {
  content: '\0418';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 200;
  font-size: clamp(26px, 3.4vw, 43px);
  line-height: 1;
  letter-spacing: .15em;
  color: var(--badge-accent);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding-top: 1.5px;
  margin-bottom: -1.5px;
  }

/* Orb */
.badge-orb {
  width: var(--badge-orb-size);
  min-width: var(--badge-orb-size);
  height: var(--badge-orb-size);
  min-height: var(--badge-orb-size);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 2.5vw, 30px);
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: transform .25s ease, filter .1s linear;
  flex-shrink: 0;
  }

/* Orb text */
.badge-big {
  display: block;
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: #000;
  white-space: nowrap;
  }
.badge-small {
  display: block;
  font-weight: 600;
  font-size: clamp(14px, 1.75vw, 22px);
  line-height: 1.25;
  letter-spacing: .01em;
  color: #000;
  white-space: nowrap;
  }

/* TOTAL NORMAL */
.badge-ribbon::after {
  content: 'TOTAL\a NORMAL';
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  font-weight: 800;
  font-size: clamp(12px, 1.4vw, 17px);
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--badge-accent);
  width: 100%;
  padding-bottom: calc(var(--badge-gap) + var(--badge-notch));
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  }

/* ── Badge colors (ONLY colors, no dimensions) ── */

/* Default: iridescent */
.badge-ribbon { --badge-accent: hsl(280,50%,75%); }
.badge-orb {
  --orb-c1: hsl(300,60%,75%); --orb-c2: hsl(200,70%,75%); --orb-c3: hsl(120,50%,75%);
  --orb-c4: hsl(60,60%,80%); --orb-c5: hsl(330,60%,75%); --orb-c6: hsl(220,60%,75%);
  background: conic-gradient(
    from 0deg,
    var(--orb-c1), var(--orb-c2), var(--orb-c3),
    var(--orb-c4), var(--orb-c5), var(--orb-c6),
    var(--orb-c1)
  );
  }

/* Gold */
.badge-ribbon--gold { --badge-accent: hsl(45,75%,55%); }
.badge-orb--gold {
  --orb-c1: hsl(43,70%,50%); --orb-c2: hsl(48,80%,65%); --orb-c3: hsl(38,60%,40%);
  --orb-c4: hsl(45,75%,55%); --orb-c5: hsl(50,85%,70%); --orb-c6: hsl(40,65%,45%);
  }
.badge-orb--gold .badge-big,
.badge-orb--gold .badge-small { color: hsl(40,90%,15%); }

/* Silver */
.badge-ribbon--silver { --badge-accent: hsl(210,15%,75%); }
.badge-orb--silver {
  --orb-c1: hsl(210,10%,65%); --orb-c2: hsl(210,15%,80%); --orb-c3: hsl(210,8%,55%);
  --orb-c4: hsl(210,12%,70%); --orb-c5: hsl(210,18%,85%); --orb-c6: hsl(210,6%,60%);
  }
.badge-orb--silver .badge-big,
.badge-orb--silver .badge-small { color: hsl(210,10%,15%); }

/* Bronze */
.badge-ribbon--bronze { --badge-accent: hsl(28,55%,50%); }
.badge-orb--bronze {
  --orb-c1: hsl(25,55%,45%); --orb-c2: hsl(30,60%,55%); --orb-c3: hsl(20,50%,35%);
  --orb-c4: hsl(28,58%,50%); --orb-c5: hsl(32,65%,60%); --orb-c6: hsl(22,52%,40%);
  }
.badge-orb--bronze .badge-big,
.badge-orb--bronze .badge-small { color: hsl(25,60%,12%); }



.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%);
  object-fit: cover;
  }

.fullwidth,
.fullwidth video {
 width: 100%!important;
 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 {
  display: grid;
  grid-template-columns: var(--grid-template);
  gap: var(--grid-gap);
  }

.gameslist .game a:not(.gameslist .game p a),
.gameslist .game a img {
  text-decoration: none;
  border: none;
  }
.gameslist .game img {
  width: 100%;
  height: auto;
  display: block;
  }
.case-elements .gameslist .game p {
  margin-top: calc( var(--copy) / 2 );
  }

.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  }
@media (max-width: 767px) {
  .image-pair {
    grid-template-columns: 1fr;
    }
  }
.image-pair img,
.image-pair video {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  }

.portrait-gallery {
  display: grid;
  grid-template-columns: var(--grid-template);
  gap: var(--grid-gap);
  }
.portrait-gallery img,
.portrait-gallery video {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  border-radius: 0;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  }
.portrait-gallery.natural-aspect img,
.portrait-gallery.natural-aspect video {
  aspect-ratio: auto;
  object-fit: contain;
  }

.youtube-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  }
  .youtube-gallery .video-embed {
  aspect-ratio: 9 / 16;
  }
  @media (max-width: 767px) {
    .youtube-gallery {
      grid-template-columns: 1fr;
      }
  }

  .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),
.pitch h3 + video,
.pitch h3 + p:not(.copy-blocks p) {
  margin-top: var(--copy);
  }

.case section h2,
.case .case-elements h2,
.pitch .case-elements h2 {
  margin-top: calc( var(--copy) * 3 );
  margin-bottom: var(--copy);
  }
.case-elements .case-intro > h2 {
  margin-top: 0;
  }
.case section p:not(.case-intro p),
.case .case-elements p:not(.copy-blocks p),
.pitch .case-elements p:not(.copy-blocks p) {
  margin-top: var(--copy);
  }
  @media (max-width: 767px) {
    .copy-blocks h3 {
      margin-top: var(--copy);
      margin-bottom: calc( var(--copy) * .25 );
    }
  }


.case section video:not(.fullscreen video) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  }
.pitch .case-elements video {
  display: block;
  width: 100%;
  height: auto;
  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 {
  max-width: none;
  }

.copy-blocks {
  padding-top: calc( var(--grid-gap) / 2 );
  }

.copy-blocks div {
  display: grid;
  grid-template-columns: var(--grid-template);
  gap: var(--grid-gap);
  margin-bottom: calc( var(--grid-gap) / 2 );
  }
.copy-blocks div > *:not(h3) {
  grid-column: 2 / -1;
  }
@media (max-width: 767px) {
  .copy-blocks div > *:not(h3) {
    grid-column: 1 / -1;
    }
}  


div.newsletter {
  position: fixed;
  inset: 0;
  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: var(--copy) !important;
  line-height: calc(var(--copy) * 1.3) !important;
  margin-top: 1rem !important;
  padding: calc(var(--copy) * .4) calc(var(--copy) * .7) !important;
  height: auto !important;
  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;
  cursor: pointer;
  transition: background-color .1s ease-in;
  color: var(--text-color) !important;
  }
#mc-embedded-subscribe:hover {
  background-color: rgba(var(--hell), .6) !important;
  border-color: rgba(var(--dunkel), .3) !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;
}

.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;
}

/*
 * 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;
}

.impressum-content {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: calc(var(--gutter) * 2) var(--grid-margin);
  overflow-wrap: break-word;
  word-break: break-word;
  }

.impressum h1,
.impressum h2 {
  text-transform: uppercase;
  column-span: all;
  }

.impressum h2 {
  margin-top: var(--v-space);
  margin-bottom: calc( var(--v-space) / 3 );
}

/* ————— Pitch Form ————— */

.case-elements > .text-block + .pitch-form {
  margin-top: calc(var(--copy) * -5);
  }
.pitch-form {
  padding-top: 1px;
  padding-bottom: calc(var(--copy) * 5);
  }
.pitch .case-elements .pitch-form h2 {
  margin-top: calc(var(--copy) - 1px);
  margin-bottom: var(--copy);
  text-transform: none;
  }
.pitch-form-options {
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: var(--copy);
  }
  @media (min-width: 768px) {
    .pitch-form-options {
      grid-template-columns: 1fr 1fr;
    }
  }
.pitch-form-option {
  --opt-color: 0, 0, 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  column-gap: calc(var(--copy) * .75);
  padding: calc(var(--copy) * 1.5);
  border: 2px solid rgba(var(--opt-color), 1);
  border-radius: var(--copy);
  cursor: pointer;
  background: transparent;
  transition: background .3s ease-out, color .3s ease-out, border-color .3s ease-out;
  }
.pitch-form-option > div {
  display: contents;
  }
.pitch-form-option:first-child {
  --opt-color: 200, 30, 30;
  }
.pitch-form-option:last-child {
  --opt-color: 30, 80, 200;
  }
.pitch-form-option:hover {
  background: rgba(var(--opt-color), .9);
  color: #fff;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
  }
.pitch-form-option:active,
.pitch-form-option:has(input:checked) {
  background: rgba(var(--opt-color), 1);
  color: #fff;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
  }
.pitch-form-option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1;
  grid-row: 1 / 2;
  align-self: center;
  margin: 0;
  width: calc(var(--copy) * 1.6);
  height: calc(var(--copy) * 1.6);
  border: 2px solid rgba(var(--opt-color), 1);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease-out;
  }
.pitch-form-option:hover input[type="radio"],
.pitch-form-option:has(input:checked) input[type="radio"] {
  border-color: #fff;
  transition: border-color .1s ease;
  }
.pitch-form-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: #fff;
  }
.pitch-form-option strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  }
.pitch-form-option p {
  grid-column: 2;
  margin: calc(var(--copy) * .5) 0 0;
  }
.pitch-form-email {
  grid-column: 2;
  margin-top: calc(var(--copy) * .75);
  }
.pitch-form-email input {
  width: 100%;
  padding: calc(var(--copy) * .5) calc(var(--copy) * .75);
  border: 1px solid currentColor;
  border-radius: 100vw;
  font-size: var(--copy);
  font-family: inherit;
  background: rgba(255,255,255,.3);
  color: inherit;
  }
.pitch-form-email input::placeholder {
  color: inherit;
  opacity: .5;
  }
.pitch-form-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-bottom: var(--copy);
  }
.pitch-form-contact input {
  width: 100%;
  padding: calc(var(--copy) * .5) calc(var(--copy) * .75);
  border: 2px solid rgba(var(--dunkel), .3);
  border-radius: 100vw;
  font-size: var(--copy);
  font-family: inherit;
  background: rgba(255,255,255,.3);
  color: inherit;
  transition: border-color .3s ease-out;
  }
.pitch-form-contact input.has-color {
  border-color: rgb(var(--btn-color));
  }
.pitch-form-contact input::placeholder {
  color: inherit;
  opacity: .5;
  }
.pitch-form-submit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
  }
  @media (min-width: 768px) {
    .pitch-form-submit {
      grid-template-columns: repeat(4, 1fr);
    }
  }
.pitch-form-submit .glassbutton {
  grid-column: 1 / -1;
  left: 0;
  }
  @media (min-width: 768px) {
    .pitch-form-submit .glassbutton {
      grid-column: 2 / 4;
    }
  }
.pitch-form-submit .glassbutton a,
.pitch-form-submit .glassbutton button {
  display: block;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  padding-left: 0;
  padding-right: 0;
  -webkit-appearance: none;
  }
.pitch-form-submit .glassbutton button::after {
  left: 0;
  transition: background-color .3s ease-out, border-color .3s ease-out;
  }
.pitch-form-submit .glassbutton button {
  transition: color .3s ease-out;
  }
.pitch-form-submit .glassbutton button[style*="--btn-color"] {
  color: #fff;
  }
.pitch-form-submit .glassbutton button[style*="--btn-color"]::after {
  background-color: rgba(var(--btn-color), 1);
  border-color: rgba(var(--btn-color), .3);
  }
.pitch-form-submit .glassbutton button[style*="--btn-color"]:hover::after {
  background-color: rgba(var(--btn-color), .8);
  }
.pitch-form-thanks {
  text-align: center;
  padding: calc(var(--copy) * 3) 0;
  }
.pitch .case-elements .pitch-form-thanks h2 {
  text-transform: uppercase;
  }
.pitch-form-thanks .glassbutton {
  left: 0;
  display: inline-block;
  }
.pitch-form-thanks .glassbutton a::after {
  left: 0;
  }