/* ============================================
 * main (css entry point)
 * ============================================ */
 
/*
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 *
 * Needs postcss plugin
 *
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
 
/* imports need to go first! */
 
/* mixins
============================================ */
 
/** 
 * 1. use flex to align icons an text
 */
 
/* ============================================
 * mixins: focus
 * ============================================ */
 
/* focus styles */
 
/* 
ATTENTION: make sure these styles don't collide
with the basic styling of the referred elements. * /

/* no focus styles
---------------------------------------- */
 
/* focus styles for pointer devices focusable elements
---------------------------------------- */
 
/* 
Subtle effect, as you don't really need focus styles
for pointer device users */
 
/* @define-mixin focus-pointer($color: null) {
  $color: if($color, $color, rgb(get-color('focus'), 0.15));
  --yukocss-focus-color: #{$color};
  box-shadow: 0 0 0 4px var(--yukocss-focus-color);
  outline: none;
} */
 
/* focus styles for keyboard focusable elements
---------------------------------------- */
 
/* strong visual indicator of focused elements are important for keyboard users */
 
/* @mixin focus-keyboard($color: null) {
  $color: if($color, $color, get-color('focus'));
  --yukocss-focus-visible-color: #{$color};
  outline-offset: 0.1em;
  outline: 3px dashed var(--yukocss-focus-visible-color);
} */
 
/* focus styles for forms
---------------------------------------- */
 
/* 
As focus styles for mouse and keyboard get applied globally
to all elements in _base.elements.scss we need to override these
styles. */
 
/* @mixin focus-form($color: null) {
  $color: if($color, $color, rgb(red, 0.15));
  --yukocss-focus-color: #{$color};
  box-shadow: 0 0 0 4px var(--yukocss-focus-color);
  outline: none;
} */
 
/* ============================================
 * mixins: grid
 * ============================================ */
 
/*
this grid is used to distribute content across the page
*/
 
/*
4 col grid 
*/
 
/* ============================================
 * mixins: list inline
 * ============================================ */
 
/* ============================================
 * mixins: visually hidden
 * ============================================ */
 
/*  Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) */
 
/* base
============================================ */
 
/* base
---------------------------------------- */
 
/* raleway-300italic - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 300;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/* raleway-regular - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/* raleway-600 - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/* raleway-600italic - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 600;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/* raleway-700 - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/* raleway-700italic - latin */
 
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 700;
    src: url('./assets/webfonts/raleway-v29-latin/raleway-v29-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 
/** 
 * A modern CSS reset by Andy Bell – modified!
 * https://piccalil.li/blog/a-modern-css-reset/
 * https://github.com/hankchizljaw/modern-css-reset/blob/master/src/reset.css 
 * Updated based on https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
 */
 
/* Box sizing rules */
 
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* This makes it so iPhones don’t dork up the font size in landscape mode */
 
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
 
/* Remove default margin */
 
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
 
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
 
/* Set core root defaults */
 
html:focus-within {
  scroll-behavior: smooth;
}
 
/* Set core body defaults */
 
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
 
/* A elements that don't have a class get default styles */
 
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
 
/* Make images easier to work with */
 
img,
picture {
  display: block;
  height: auto;
  max-width: 100%;
}
 
/* Inherit fonts for inputs and buttons */
 
input,
button,
textarea,
select {
  font: inherit; 
}
 
/* Remove all animations and transitions for people that prefer not to see them */
 
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
 
/* base: shared
---------------------------------------- */
 
/* Shared declarations for certain elements. */
 
/* Box-sizing border-box */
 
*,
*:before,
*:after {
  box-sizing: border-box;
}
 
/* Single-direction margin declarations for block level elements */
 
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
  margin-bottom: var(--koka-spacing-rg);
}
 
h4,
h5,
h6 {
  margin-bottom: var(--koka-spacing-xs);
}
 
/* Consistent indentation for lists. */
 
dd,
ol,
ul {
  margin-left: var(--koka-spacing-rg);
}
 
/* ============================================
 * base: elements
 * ============================================ */
 
/* 1. responsive font-size */
 
html {
  scroll-behavior: smooth;

  /* font-size: 75%; 

  @media (--koka-lg-viewport) {    
      font-size: 100%;
  }   */
}
 
@media (prefers-reduced-motion: reduce) {
 
html {
    scroll-behavior: auto;
}
  }
 
body {
  color: var(--koka-color-white);
  background-color: var(--koka-color-black);
  font-family: var(--koka-font-family);
  font-size: var(--koka-font-size-rg);
  line-height: var(--koka-line-height);
}
 
a {
  color: var(--koka-color-white);
}
 
ul {
  padding-left: 1.5rem; 
}
 
/* layout
============================================ */
 
/* ============================================
 * layout: site
 * ============================================ */
 
/* sticky footer
============================================ */
 
body, 
.site-wrapper {
    min-height: 100vh;
}
 
.site-wrapper {
    display: flex;
    flex-direction: column;
}
 
.site-content__outer {
    flex: 1;
}
 
/* footer
============================================ */
 
.site-footer__outer {
    color: var(--koka-color-black);
    background-color: var(--koka-color-theme-primary);
    font-size: var(--koka-font-size-xs);
    padding: 1em 0;
    text-align: center;
}
 
@media (min-width: 992px) {
 
.site-footer__outer {      
      font-size: var(--koka-font-size-rg);
      padding: 1em 0;
      text-align: left;
}
    }
 
.site-footer__outer a {
      color: inherit;
      text-decoration: none;
    }
 
.site-footer__outer ul {
      margin-left: 0;
      list-style: none;
      padding-left: 0;

      margin: 0;
    }
 
.site-footer__outer ul > li {
        display: inline;
    }
 
.site-footer__outer ul > li:not(:first-child) {
            margin-left: 0.35em;
        }
 
:is(.site-footer__outer ul) > li  + li {
        padding-left: 0.65em;
        position: relative;
      }
 
:is(.site-footer__outer ul) > li  + li:before {
          background-color: var(--koka-color-black);
          content: '';
          display: block;
          height: 1.25em;
          left: 0;
          position: absolute;
          top: 0;
          width: 1.5px;
        }
 
.site-footer__outer footer {
      font-size: inherit;
    }
 
/* site header
============================================ */
 
/* has grid */
 
.site-header,
#site-header {  
  grid-template-rows: var(--koka-site--pad) auto auto auto; 
  position: relative;
}
 
@media (min-width: 992px) {
 
.site-header,
#site-header {
    grid-template-rows: var(--koka-site--pad) auto 110px auto auto auto;
} 
  }
 
/* navigation */
 
.site-header .site-header__nav,
#site-header .site-header__nav {
  grid-column: 1 / 6;
  grid-row: 1;

}
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container {
    background-color: rgba(0, 0, 0, 43%);
    min-height: 92px;
  }
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container:has(.active) {
      background-color: rgba(0, 0, 0, 100%);
      box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 43%);
    }
 
@media (min-width: 992px) {
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container:has(.active) {
        background-color: rgba(0, 0, 0, 43%);
        box-shadow: none;
    }
      }
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container > .c-nav {
      grid-column: 3 / 4;  
      margin-top: 60px;
      padding-bottom: 60px;
    }
 
@media (min-width: 992px) {
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container > .c-nav {
        margin-top: 0;
        padding-bottom: 0;
    }        
      }
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container > .menu-toggle {
      position: relative;
      order: -1;
      align-self: start;
      justify-self: end;
      grid-column: 3 / 4;  
      margin-top: var(--koka-spacing-rg);
    }
 
@media (min-width: 992px) {
 
:is(.site-header .site-header__nav,#site-header .site-header__nav) > .o-container > .menu-toggle {
        display: none;
    }
      }
 
/* image-top – photo */
 
.site-header .site-header__img-top {  
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  height: 50rem; /* 800px */
  position: relative;
  width: 100%;
  z-index: -1;
}
 
@media (min-width: 992px) {
 
.site-header .site-header__img-top {
    height: 41.0625rem; /* 657px */
    grid-row: 1 / 4;
}
  }
 
.site-header .site-header__img-top picture {
    height: 100%;   
  }
 
.site-header .site-header__img-top img {
    height: 100%;   
    width: 100%; 
    -o-object-fit: cover; 
       object-fit: cover;
    -o-object-position: 47% center;
       object-position: 47% center;
  }
 
.site-header .site-header__img-top:before {    
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 13.22%, rgba(0, 0, 0, 0) 23.05%, rgba(0, 0, 0, 0.75) 92.54%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;

  }
 
@media (min-width: 992px) {
 
.site-header .site-header__img-top:before {      
      background: linear-gradient(136.55deg, rgba(0, 0, 0, 0.75) 20.97%, rgba(0, 0, 0, 0) 45.57%);

  }
    }
 
/* image-bottom – map */
 
.site-header  .site-header__img-bottom {
  grid-column: 1 / 6; 
  grid-row: 3 / 5;
  position: relative;
  z-index: -1;
  max-height: 50.5rem; /* 808px */
}
 
@media (min-width: 992px) {
 
.site-header  .site-header__img-bottom {    
    grid-row: 4 / 6;
    max-height: 61.9375rem; /* 991px */
}
  }
 
.site-header  .site-header__img-bottom picture {
    display: flex;
    justify-content: flex-end;    
    height: 100%;
  }
 
@media (max-width: 576px) {
 
.site-header  .site-header__img-bottom picture img {   
        width: 100%;
        height: 100%;            
        -o-object-fit: cover;            
           object-fit: cover;

    }
      }
 
@media (min-width: 576px) {
 
.site-header  .site-header__img-bottom picture img {    
        -o-object-fit: contain;    
           object-fit: contain;

    }
      }
 
/* logo */
 
/* 1. move in front of nav */
 
/* 2. don't spann complete grid (and cover nav) */
 
.site-header__logo {
  grid-row: 2;
  height: 3.25rem;
  max-width: -moz-fit-content;
  max-width: fit-content; /* 2 */
  position: relative; /* 1 */
  z-index: 100; /* 1 */
}
 
.site-header__logo * {
    height: 3.25rem; /* 84px */
    width: auto;
  }
 
@media (min-width: 576px) {
 
.site-header__logo {   
    height: 5.25rem; /* 84px */
}
  
    .site-header__logo * {
      height: 5.25rem; /* 84px */
      width: auto;
    }
  }
 
.site-header__logo a {
    position: relative;
  }
 
/* title */
 
@media (max-width: 991px) {
 
.site-header__title {    
    border: 0 !important;    
    clip: rect(0 0 0 0) !important;    
    height: auto !important;    
    margin: 0 !important;    
    overflow: hidden !important;    
    padding: 0 !important;    
    position: absolute !important;    
    width: 1px !important;    
    white-space: nowrap !important; /* hide in small viewports*/
}
  }
 
@media (min-width: 992px) {
 
.site-header__title {
    grid-row: 3 / 5;
}
  }
 
.site-header__title picture {
    max-width: 45rem; /* 720px */
  }
 
.site-header__title span {
    display: block;
    font-size: 2.5rem;/* 40px */
    font-weight: 600;
    line-height: 1.175;
    margin-left: 20rem; /* 320px */
    margin-top: 2rem; /* 320px */
  }
 
/* register */
 
.site-header__register {
  grid-row: 2;
  align-self: flex-end;
}
 
@media (min-width: 992px) {
 
.site-header__register {
    grid-row: 5;
    /* margin-top: 21.875rem; /* 350px
    /* margin-top: 15.625rem; /* 250px */
}
  }
 
/* sponsors */
 
.site-header__sponsors {
  grid-row: 4;
  margin-bottom: 20rem; /* 320px */
  margin-top: 20rem; /* 320px */
}
 
@media (min-width: 992px) {
 
.site-header__sponsors {
    grid-row: 6;
    margin-bottom: 0;
    margin-top: 12.5 rem; /* 200px */
}
  }
 
/* flow
============================================ */
 
.site-content .o-container + .o-container {
  margin-top: var(--koka-spacing-xl);
}
 
@media (min-width: 992px) {
 
.site-content .o-container + .o-container {
    margin-top: var(--koka-spacing-2xl);
}
  }
 
/* who (our partners)
============================================ */
 
@media (min-width: 1200px) {
 
.l-who-switcher {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--koka-spacing-lg);
}    
  }
 
/* join us
============================================ */
 
.site-content .o-container.l-join-us {
  grid-template-rows: auto auto;
  margin-top: 0;
}
 
.o-container.l-join-us .l-join-us__image {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  height: 62.5rem; /* 1000px */
  position: relative;
  z-index: -1;

}
 
.o-container.l-join-us .l-join-us__image picture {
    height: 100%;
  }
 
.o-container.l-join-us .l-join-us__image picture img {
      -o-object-fit: cover;
         object-fit: cover;
      height: 100%;
      min-height: 100%;
      width: 100%;
    }
 
@media (min-width: 576px) {
 
.o-container.l-join-us .l-join-us__image picture img {
        -o-object-fit: contain;
           object-fit: contain;
    }
      }
 
.l-join-us__content {  
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  grid-row: 1 / -1;
  margin-top: var(--koka-spacing-rg);
}
 
.l-join-us__content .c-button {
    max-width: 100%;
    width: 25.3125rem; /* 405px */
  }
 
@media (max-width: 576px) {
 
.l-join-us__content .c-button {
      align-self: start;
      width: auto;
  }
    }
 
.l-join-us__content .c-heading-2 {
    margin-top: var(--koka-spacing-2xl); 
  }
 
.l-join-us__content .c-heading-2 + * {
    margin-top: var(--koka-spacing-2xl);
  }
 
@media (min-width: 992px) {
 
.l-join-us__content .c-heading-2 + * {
      margin-top: var(--koka-spacing-lg);
  } 
    }
 
.l-join-us__content .c-button + .c-button {
    margin-top: var(--koka-spacing-rg);
  }
 
/* components
============================================ */
 
.c-agenda {    
    font-size: var(--koka-font-size-md);
    font-weight: 600;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.c-agenda li {
        line-height: var(--koka-line-height-sm);
    }
 
@media (min-width: 576px) {
 
.c-agenda li {    
            align-items: baseline;
            display: grid;
            gap: 2rem;
            grid-template-columns: minmax(8.75rem, min-content) 1fr;
    }
        }
 
.c-agenda li + li {
        margin-top: var(--koka-spacing-lg);
    }
 
.c-agenda time, 
    .c-agenda .time {
        color: var(--koka-color-theme-primary);
        display: block;   
        font-size: var(--koka-font-size-md-plus);
    }
 
.c-agenda time + * a,
    .c-agenda .time + * a {
        font-style: italic;
    }
 
:is(.c-agenda time + * a,.c-agenda .time + * a):hover {
            color: var(--koka-color-theme-primary);
        }
 
@media (min-width: 576px) {
 
.c-agenda.c-agenda--wide li {                
            grid-template-columns: minmax(18.75rem, min-content) 1fr;
    }
        }
 
.c-button {
    /* vars */
    --koka-button-bg-color: blue;
    --koka-button-font-size: 1rem;
    --koka-button-bg-color-active: brown;
    --koka-button-color: white;
    --koka-button-padding-x: 1em;
    --koka-button-padding-y: 1em;
    /* styles */
    align-items: center;
    /* 1 */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: var(--koka-button-bg-color);
    border: none;
    border-radius: 0.75em;
    color: var(--koka-button-color);
    cursor: pointer;
    display: inline-flex;
    /* 1 */
    font-family: inherit;
    font-size: var(--koka-button-font-size);
    font-weight: bolder;
    justify-content: center;
    /* 1 */
    letter-spacing: var(--koka-letter-spacing);
    line-height: 1.2;
    min-width: 6.25rem;
    /* 100px */
    padding: var(--koka-button-padding-y) var(--koka-button-padding-x);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 250ms ease-in-out;
    /* @mixin button var(--koka-font-size) var(--koka-color-black), var(--koka-color-theme-primary), var(--koka-color-theme-primary-dark), 1em, 3em */
    --koka-button-bg-color: var(--koka-color-theme-primary);
    --koka-button-bg-color-active: var(--koka-color-theme-primary-dark);
    --koka-button-color: var(--koka-color-black);
    --koka-button-padding-x: 2em;
    --koka-button-padding-y: 0.85em;
    --koka-button-font-size: var(--koka-font-size-md);
}
 
.c-button > img,
  .c-button > svg {
    height: 1em;
    vertical-align: middle;
    width: auto;
  }
 
.c-button:hover,
  .c-button:active {
    background: var(--koka-button-bg-color-active);
  }
 
/* define custom focus styles for pointer devices */
 
.c-button:focus:not(:focus-visible) {
    /* outline-offset: 0.1em;
    outline: 3px dashed salmon; */
    box-shadow: 0 0 0 4px var(--koka-color-theme-primary);
    outline: none;
  }
 
/* define custom focus styles for keyboards etc. */
 
.c-button:focus-visible {
    /* outline-offset: 0.1em;
    outline: 3px dashed yellow; */
    outline-offset: 0.1em;
    outline: 3px dashed var(--koka-color-theme-primary);
  }
 
.c-button:disabled {
    cursor: default;
    opacity: 0.5;
  }
 
.c-button:disabled:hover {
      background: var(--koka-button-bg-color);
      text-decoration: none;
    }
 
.c-button.c-button--secondary {
    --koka-button-bg-color: var(--koka-color-theme-primary-dark);
    --koka-button-bg-color-active: var(--koka-color-theme-primary);
}
 
.c-card {
    color: var(--koka-color-theme-primary);
    font-size: var(--koka-font-size-sm);
}
 
.c-card__media {
    aspect-ratio: 262 / 285; 
    border-radius: 1rem;
    overflow: hidden;
}
 
.c-card__media img, .c-card__media picture {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
 
.c-card__title,
.c-card__subtitle {
    display: block;
    line-height: 1.35;
}
 
.c-card__title {
    font-size: var(--koka-font-size-sm);
    margin-bottom: var(--koka-spacing-xs);
    margin-top: var(--koka-spacing-sm);
}
 
.c-card__subtitle {
    font-size: var(--koka-font-size-xs);
    font-weight: 600;
}
 
.c-faq {
    line-height: var(--koka-line-height-sm);
}
 
.c-faq dt {
        color: var(--koka-color-theme-primary);
        display: block;   
        font-size: var(--koka-font-size-md-plus);
        font-weight: 600;
    }
 
.c-faq dd + dt {
        margin-top: var(--koka-spacing-lg);
    }
 
@media (min-width: 992px) {
 
.c-faq dd + dt {    
            margin-top: var(--koka-spacing-xl);
    }
        }
 
.c-faq dd {
        font-size: var(--koka-font-size-md);
        font-weight: 600;
        margin-left: 0;
        margin-top: var(--koka-spacing-rg);
    }
 
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; }
 
.hamburger:hover .hamburger-inner,
        .hamburger:hover .hamburger-inner::before,
        .hamburger:hover .hamburger-inner::after {
            background-color: var(--koka-color-theme-primary);
        }
 
.hamburger.is-active:hover .hamburger-inner,
        .hamburger.is-active:hover .hamburger-inner::before,
        .hamburger.is-active:hover .hamburger-inner::after {
            background-color: var(--koka-color-theme-primary);
        }
 
.hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
      background-color: #fff; }
 
.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; }
 
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }
 
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
      width: 40px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease; }
 
.hamburger-inner::before, .hamburger-inner::after {
      content: "";
      display: block; }
 
.hamburger-inner::before {
      top: -10px; }
 
.hamburger-inner::after {
      bottom: -10px; }
 
/*
     * Squeeze
     */
 
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
 
.hamburger--squeeze .hamburger-inner::before {
      transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
 
.hamburger--squeeze .hamburger-inner::after {
      transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
 
.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
 
.hamburger--squeeze.is-active .hamburger-inner::before {
      top: 0;
      opacity: 0;
      transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
 
.hamburger--squeeze.is-active .hamburger-inner::after {
      bottom: 0;
      transform: rotate(-90deg);
      transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
 
.c-heading-2 {
    /* font-size: 6.25rem; /* 100px */
    font-size: 4.6875rem; /* 75px */
    line-height: 0.85;
    margin-bottom: var(--koka-spacing-md);
    text-transform: uppercase;
    /* font-size: 3.125rem;  */
    
    /* @media (--koka-md-viewport) {        */
        /* beginning of two-col layout, needs to be smaller */ 
        /* font-size: 4.6875rem; /* 75px */
    /* } */
}
 
@media (min-width: 992px) {
 
.c-heading-2 {        
        font-size: 6.25rem; /* 100px */
}
    }
 
/* add line-break and three none-breaking spaces */
 
[class^="c-heading"] .break:before{
            content: "\a\00a0\00a0\00a0";
            white-space: pre;
        }
 
[class^="c-heading"] .break.break--primary {
            color: var(--koka-color-theme-primary);
        }
 
[class^="c-heading"] .break.break--primary-dark {
            color: var(--koka-color-theme-primary-dark);
        }
 
/* 
 * display long headlines 
 * For small viewports use a smaller font-size and remove indentation
 */
 
.c-heading-2.c-heading-2--long {
    font-size: 3.125rem;
}
 
.c-heading-2.c-heading-2--long .break:before{
            content: "\a";
            white-space: pre;            
        }
 
@media (min-width: 576px) {
 
.c-heading-2.c-heading-2--long {
        font-size: 4.6875rem; /* 75px */
}
            .c-heading-2.c-heading-2--long .break:before{
                content: "\a\00a0\00a0\00a0";
            }
    }
 
@media (min-width: 1200px) {
 
.c-heading-2.c-heading-2--long {        
        font-size: 6.25rem; /* 100px */
}
    }
 
@media (min-width: 992px) {
 
.c-heading-2.c-heading-2--long.c-heading-2--agenda {        
        font-size: 6.25rem; /* 100px */
}
    }
 
.c-heading-3 {
    color: var(--koka-color-theme-primary);
    font-size: var(--koka-font-size-lg);
    letter-spacing: var(--koka-letter-spacing);
    line-height: var(--koka-line-height-sm);
    text-transform: uppercase;
}
 
.c-heading-4 {
    color: var(--koka-color-theme-primary-bright);
    font-size: var(--koka-font-size-md-plus);
    line-height: var(--koka-line-height-sm);
}
 
.c-lable {
    background-color: var(--koka-color-theme-primary-dark);
    border-radius: 1em;
    font-size: var(--koka-font-size-sm);
    padding: 0.25em 1em;;
    text-transform: uppercase;
}
 
/*
* 1. hide nav on mobile 
* 2. show nav with hamburger toggle
*/
 
.c-nav {
    display: none;

    list-style-type: none;
    margin: 0;
    padding: var(--koka-spacing-rg);
    position: relative;
    text-align: center; /* 1. */
}
 
.c-nav.active {
        display: block; /* 2. */
    }
 
@media (min-width: 992px) {
 
.c-nav {    
        margin-left: 0;    
        list-style: none;    
        padding-left: 0;  

        display: block;        
        padding-bottom: 30px;
        padding-top: 30px;
        text-align: right;
}    
        .c-nav > li {
        display: inline;
    }

        .c-nav > li:not(:first-child) {
            margin-left: 2.5em;
        }
    }
 
@media (min-width: 1200px) {
 
.c-nav {    
        margin-left: 0;    
        list-style: none;    
        padding-left: 0;
}    
        .c-nav > li {
        display: inline;
    }

        .c-nav > li:not(:first-child) {
            margin-left: 4.5em;
        }  
    }
 
.c-nav li {
        line-height: 1.35;
    }
 
.c-nav li + li {
        margin-top: 1rem;
    }
 
@media (min-width: 992px) {
 
.c-nav li + li {                
            margin-top: 0;
    }
        }
 
.c-nav a {
        text-decoration: none;
        font-size: var(--koka-font-size-md);
        font-weight: 600;
    }
 
.c-nav a:hover,
        .c-nav a.active {
            color: var(--koka-color-theme-primary);
        }
 
@media (min-width: 992px) {
 
.c-nav a {     
            font-size: var(--koka-font-size-rg);
    }
        }
 
@media (min-width: 1200px) {
 
.c-nav a {     
            font-size: var(--koka-font-size-md);
    }
        }
 
/* toggle
-------------------------------------------------- */
 
@media (min-width: 992px) {
 
.c-toggle {    
        display: none;
}
    }
 
.c-register {
    line-height: 1;
}
 
.c-register .c-lable + *,
    .c-register * + .c-register__content,
    .c-register * + .c-register__cta {    
        display: block;
        margin-top: 1.5rem;
    }
 
@media (min-width: 992px) {            
        .c-register .c-register__content,
        .c-register * + .c-register__content {
            display: none;
        }

        .c-register .c-register__cta {
            transform: translateY(0);
        }
    }
 
.c-register__date {
    color: var(--koka-color-theme-primary);
    display: block;
    font-size: 3.375rem; /* 54px */
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}
 
@media (min-width: 992px) {
 
.c-register__date {    
        font-size: 5rem; /* 80px */
}
    }
 
.c-register__year {
    font-size: 3.125rem; /* 50px */
    display: block;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
 
@media (min-width: 992px) {
 
.c-register__year {    
        font-size: 6.25rem; /* 100px */
}
    }
 
.c-register__content {
    font-size: var(--koka-font-size-md);
    display: block;
    font-weight: 600;
    line-height: 1.1666666667;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
 
.c-register__cta {
    transform: translateY(50%);
}
 
/* components: skip-link */
 
.c-skip-link {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 50%;
  transform: translateY(0%);
  transition: transform 0.3s;
}
 
.c-skip-link:not(:focus) {
    transform: translateY(-100%);
    @include visually-hidden;
  }
 
.c-slider {
    font-weight: 600;    
    margin-top: var(--koka-spacing-lg);    

    /* @media (--koka-md-viewport) {
        margin-left: 9.375rem;
    } */
}
 
.c-slider__slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 1rem;
     /* min-width: 12.5rem;  */
}
 
@media (min-width: 576px) {
 
.c-slider__slide {
        /* row-gap: 2.875rem; */
        row-gap: 3rem;
}
    }
 
.c-slider__media {
    aspect-ratio: 1 / 0.75;
    /* border: 1px solid tomato; */
    /* max-width: 17.5rem; 280px */
    /*width: 17.5rem; /*280px*/
}
 
.c-slider__media picture, .c-slider__media img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
 
.c-slider__item {
    /* max-width: 12.5rem; /*200px*/
    max-width: 17.5rem; /* 280px */
}
 
/* global layout
---------------------------------------- */
 
/* attach slider to right side of viewport */
 
.c-box.c-box--attachright .c-slider {
    margin-right: calc(-1 * var(--koka-spacing-rg));
}
 
/* swiper
---------------------------------------- */
 
.c-slider .swiper {
        --swiper-pagination-bottom: 0;
        --swiper-pagination-color: var(--koka-color-theme-primary-dark);

        padding-bottom: 4rem;
    }
 
/* .swiper-wrapper {
    } */
 
.c-slider .swiper-slide {
        width: auto;  /* because of slidesPerView "auto" */
    }
 
.c-slider .swiper-pagination {
        text-align: left;
    }
 
.c-slider .swiper-pagination-bullet {
        border-radius: 0;
        height: 3px;
        width: 2.1875rem;    
    }
 
.c-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    }
 
/* components: sponsors */
 
.c-sponsors__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.c-sponsors__list li {
        max-width: 15.625rem; /* 250px */
    }
 
:is(.c-sponsors__list li) + :is(.c-sponsors__list li) {
            margin-top: 1.5rem;
        }
 
.c-sponsors__title {
    color: var(--koka-color-theme-primary);
    font-size: var(--koka-font-size-rg);
    font-weight: 300;
}
 
.c-sponsors__title + .c-sponsors__list {    
    margin-top: 1.25rem;
}
 
@media (min-width: 992px) {
 
.c-sponsors__title + .c-sponsors__list {
        display: flex;
        align-items: center;
        gap: 2rem;
}
        .c-sponsors__title + .c-sponsors__list li,
        :is(.c-sponsors__title + .c-sponsors__list) li + li  {
            margin-top: 0;
        }
    }
 
.c-teaser {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-rows: auto 5.9375rem auto auto; */
    grid-template-rows: auto 2.875rem auto auto;
    grid-template-rows: auto 1.8rem auto auto;
    row-gap: 1rem;
}
 
@media (min-width: 576px) {
 
.c-teaser {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        -moz-column-gap: 2.8125rem;
             column-gap: 2.8125rem; /* 45px */
}
    }
 
@media (min-width: 992px) {
 
.c-teaser {
        -moz-column-gap: 5.625rem;
             column-gap: 5.625rem; /* 90px */
}
    }
 
.c-teaser__title {
    grid-column: 1;
    grid-row: 1 / 3;
}
 
@media (min-width: 576px) {
 
.c-teaser__title {        
        align-self: end;
        grid-row: 1 / 2;
}
    }
 
.c-teaser__title h2 {
        margin: 0;
    }
 
.c-teaser__media {
    grid-column: 1;
    grid-row: 2 / 4;
    position: relative;
    z-index: -1;
}
 
@media (min-width: 576px) {
 
.c-teaser__media {
        grid-column: 2;       
        grid-row: 1 / 3;
        align-self: center;
}
    }
 
.c-teaser__media img {
        aspect-ratio: 413 / 253;
        border-radius: 2%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
    }
 
@media (min-width: 576px) {
 
.c-teaser__media img {
            aspect-ratio: auto;
    }            
        }
 
.c-teaser__content {
    grid-column: 1;
    grid-row: 4 / 5;
}
 
@media (min-width: 576px) {
 
.c-teaser__content {
        grid-row: 2 / 3;
}
    }
 
/* reverse modifier
---------------------------------------- */
 
@media (min-width: 576px) {
 
.c-teaser.c-teaser--reverse .c-teaser__media {
            grid-column: 1;
    }      
        }
 
@media (min-width: 576px) {
 
.c-teaser.c-teaser--reverse .c-teaser__content,
    .c-teaser.c-teaser--reverse .c-teaser__title {
            grid-column: 2;
    }     
        }
 
/* align-top modifier
---------------------------------------- */
 
@media (min-width: 576px) {
 
.c-teaser.c-teaser--aligntop .c-teaser__content {
            grid-row: 1 / -1; /* remove order inherited from teaser */
    }
        }
 
.c-teaser.c-teaser--aligntop .c-teaser__media img {
        aspect-ratio: initial; /* remove aspect ratio inherited from teaser */
    }
 
/* utilities
============================================ */
 
/* ============================================
 * utilities: text-transform
 * ============================================ */
 
.u-text-transform-uppercase {
    text-transform: uppercase;
 }
 
/* objects
============================================ */
 
.o-constrain {
    max-width: var(--koka-sizing--content);
}
 
.o-constrain-restricted {
    max-width: var(--koka-sizing-content-restricted);
}
 
/* ============================================
 * objects: container
 * ============================================ */
 
/*
Container provides the general grid

By default container children use the content column

attachright modifier: content column expanded to the right
attachleft modifier: content column expanded to the left
*/
 
.o-container {
    --koka-site--pad: 1.5rem;
    --koka-site--pad-desk: 5rem;
    --koka-sizing--content: 75rem;
    /* 1200px */
    display: grid;
    grid-template-columns: 
        1fr 
        var(--koka-site--pad) 
        minmax(auto, var(--koka-sizing--content)) 
        var(--koka-site--pad) 
        1fr;

    width: 100%;
}
 
.o-container > * {
        grid-column: 3 / 4;  
    }
 
@media (min-width: 992px) {
 
.o-container {
        grid-template-columns: 
            1fr 
            var(--koka-site--pad-desk) 
            minmax(auto, var(--koka-sizing--content)) 
            var(--koka-site--pad-desk) 
            1fr;
}    
    }
 
.o-container > * {
        grid-column: 3 / 4;
    }
 
.o-container.o-container--full > * {
            grid-column: 1 / 6;
        }
 
.o-container.o-container--attachright > * {
            grid-column: 3 / 6;            
        }
 
.o-container.o-container--attachleft > * {
            grid-column: 1 / 4;
        }
 
/* inner elemnent
--------------------------------*/
 
/*
Inner element for "attached" container
Centerd with content width
*/
 
.o-container__inner {        
    max-width: var(--koka-sizing--content);
    margin-right: var(--koka-site--pad);
}
 
@media (min-width: 992px) {
 
.o-container__inner {
        margin-right: var(--koka-site--pad-desk);
}
    }
 
/* entry container
--------------------------------*/
 
/* .o-container.o-container--entry {
    border: 1px solid red;
} */
 
.o-grid {
    -moz-column-gap: var(--koka-spacing-md);
         column-gap: var(--koka-spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: var(--koka-spacing-lg);     
}
 
@media (min-width: 576px) {
 
.o-grid {
        grid-template-columns: 1fr 1fr 1fr;     
}    
    }
 
@media (min-width: 992px) {
 
.o-grid {
        row-gap: var(--koka-spacing-xl);
        grid-template-columns: 1fr 1fr 1fr 1fr;     
}    
    }
 
@media (min-width: 1200px) {
 
.o-grid {
        -moz-column-gap: var(--koka-spacing-lg);
             column-gap: var(--koka-spacing-lg);     
}
    }
 
.o-grid.o-grid--lg-2col {
    row-gap: var(--koka-spacing-rg);
    grid-template-columns: 1fr;
}
 
@media (min-width: 992px) {
 
.o-grid.o-grid--lg-2col {
        grid-template-columns: 1fr 1fr;
}  
    }
 
/* @import '_objects.switcher'; */
 
/* @import '_objects.objectfit'; */
 
.o-visually-hidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
 
/* page
============================================ */
 
/* ============================================
 * page: page
 * ============================================ */
 
.home .o-container:has(.c-img-logo), .page .o-container:has(.c-img-logo) {
      margin-top: var(--koka-spacing-lg);
    }
 
article.page #page-content a,
      article.page #page-content h1 {
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;
      
        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
      
        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -webkit-hyphens: auto;
        hyphens: auto;
      }
 
article.page #page-content a, article.page #page-content a:hover {
        text-decoration: underline;
      }
 
@media (min-width: 992px) {
 
article.page #page-content {
        font-size: 30px; /*30px*/
    }
      }
 
body.page .site-header__logo {
    margin-top: var(--koka-font-size-md);
  }
 
body.page main.site-content {
    padding-bottom: var(--koka-spacing-xl);
  }
 
@media (min-width: 992px) {
 
body.page main.site-content {
      padding-bottom: var(--koka-spacing-2xl);
  }    
    }
 
/* agenda page
---------------------------------------- */
 
body.page.agenda {
  background-image: url("/assets/images/agenda-bg-mobile.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
 
@media (min-width: 992px) {
 
body.page.agenda {
    background-image: url("/assets/images/agenda-bg.jpg");
}
  }
 
body.page.agenda .site-header__logo {
    margin-top: 0;
    /* position: relative; */
  }
 
/* shame
============================================ */
 
.entry-title {
   color: var(--koka-color-theme-primary);
   text-transform: uppercase;
   font-size: var(--koka-font-size-lg);
   line-height: 1.1;
}
 
@media (min-width: 992px) {
 
.entry-title {
       font-size: 6.875rem; /*110px*/
}
    }
 
::-moz-selection { 
    background: var(--koka-color-theme-primary-dark);
    color: var(--koka-color-white);
 }
 
::selection { 
    background: var(--koka-color-theme-primary-dark);
    color: var(--koka-color-white);
 }
 
/* spacing – padding
-------------------------------------------- */
 
@media (min-width: 992px) {
 
.lg\:u-pl-xl {        
      padding-left: var( --koka-spacing-xl) !important;
}   
   }
 
@media (min-width: 992px) {
 
.lg\:u-py-lg {        
      padding-bottom: var( --koka-spacing-lg) !important;   
      padding-top: var( --koka-spacing-lg) !important;
}   
   }
 
.u-pt-lg {   
   padding-top: var( --koka-spacing-lg) !important;   
}
 
.u-pb-rg {   
   padding-bottom: var( --koka-spacing-rg) !important;   
}
 
/* spacing – margin
-------------------------------------------- */
 
.u-mt-2xl {
   margin-top: var( --koka-spacing-2xl) !important;
}
 
.u-mt-xl {
   margin-top: var( --koka-spacing-xl) !important;
}
 
.u-mt-lg {
    margin-top: var( --koka-spacing-lg) !important;
 }
 
.u-mt-md {
    margin-top: var( --koka-spacing-md) !important; 
 }
 
@media (min-width: 992px) {
 
.lg\:u-mt-xl {   
      margin-top: var( --koka-spacing-xl) !important;
}
   }
 
@media (min-width: 992px) {
 
.lg\:u-mt-2xl {   
      margin-top: var( --koka-spacing-2xl) !important;
}
   }
 
.u-mb-xl {
   margin-bottom: var( --koka-spacing-xl) !important;
}
 
.u-mb-lg {
   margin-bottom: var( --koka-spacing-lg) !important;
}
 
.u-mb-md {
   margin-bottom: var( --koka-spacing-md) !important; 
}
 
.u-mb-0 {
   margin-bottom: 0; 
}
 
@media (min-width: 992px) {
 
.lg\:u-mb-xl {   
      margin-bottom: var( --koka-spacing-xl) !important;
}
   }
 
/* color
-------------------------------------------- */
 
.u-color-primary {
   color: var(--koka-color-theme-primary) !important;
 }
 
.u-color-primary-bright {
   color: var(--koka-color-theme-primary-bright) !important;
 }
 
/* width
-------------------------------------------- */
 
/* .md\:u-width-50 {
   @media (--koka-md-viewport) {    
      max-width: 50% !important;
   }
} */
 
@media (min-width: 992px) {
 
.lg\:u-width-55 {    
      max-width: 55% !important;
}
   }
 
/* vars
============================================ */
 
:root { 
    /* typography */
    --koka-font-family: "Raleway", serif;    
    --koka-font-size-lg: 2.5rem; /* 40px */
    --koka-font-size-md-plus: 1.8125rem; /* 29px */
    --koka-font-size-md: 1.5rem; /* 24px */
    --koka-font-size-rg: 1.125rem; /* 18px */
    --koka-font-size-sm: calc(var(--koka-font-size-rg) * 0.8888888889); /* 16px */
    --koka-font-size-xs: calc(var(--koka-font-size-rg) * 0.6666666667); /* 12px */
    --koka-line-height: 1.7777777778; /** 32px */
    --koka-line-height-sm: 1.35;
    --koka-letter-spacing: 0.025em;

    /* colors */
    --koka-color-theme-primary: #F6E6CD;
    --koka-color-theme-primary-dark: #9F773B;
    --koka-color-theme-primary-bright: #FFDE79;
    --koka-color-black: #000;
    --koka-color-white: #F5F5F5;
    
    /* spacing */
    --koka-spacing-xs: 0.5rem;
    --koka-spacing-sm: 0.75rem;
    --koka-spacing-rg: 1.5rem;
    --koka-spacing-md: 1.875rem; /* 35px */     
    --koka-spacing-lg: 3.4375rem; /* 55px */     
    --koka-spacing-xl: 6.25rem; /* 100px */     
    --koka-spacing-2xl: 13.75rem; /* 220px */     
    
    /* sizing */
    --koka-sizing--content: 75rem; /* 1200px */
    --koka-sizing-content-restricted: 53.75rem; /* 860px */
}
 
/* custom media
============================================ */
 
/* components
============================================ */
 
.c-hero {
    width: 100%;
    grid-column: 1 / 6;
}
 
.c-hero img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
 
/* box
-------------------------------------------- */
 
.c-box {
    background-color: var(--koka-color-theme-primary);
    border-radius: 1em;
    color: var(--koka-color-black);
    padding: var(--koka-spacing-rg);
}
 
.c-box.c-box--attachright {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
 
.c-box.c-box--attachleft {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
 
/* split-teaser
-------------------------------------------- */
 
.c-split-teaser h2 {
        margin-bottom: var(--koka-spacing-md);
        /* margin-top: 0.35em; */
    }
 
.c-split-teaser img {
        border-radius: 2%;
    }
 
.c-split-teaser.c-split-teaser--reverse .c-split-teaser__content {
            order: 2;
        }
 
.c-split-teaser.c-split-teaser--reverse .c-split-teaser__content {
            order: 1;
        }
 
@media (min-width: 576px) {
 
.c-split-teaser {
        --koka-split-teaser-gap: 2.8125rem; /* 45px */
        --koka-split-teaser-gap-desk: 5.625rem; /* 90px */

        display: flex;
        gap: var(--koka-split-teaser-gap);
}
        
        .c-split-teaser .c-split-teaser__content,
        .c-split-teaser .c-split-teaser__media {
            flex: 1;
        }
    }
 
@media (min-width: 992px) {
 
.c-split-teaser {
        gap: var(--koka-split-teaser-gap-desk);
}
    }
 
/* img-logo
-------------------------------------------- */
 
.c-img-logo {
    display: grid;
    grid-template-rows: 2.5rem auto; /* 40px */
    grid-template-columns: 1fr; /* 40px */
    justify-items: center;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}
 
@media (min-width: 992px) {
 
.c-img-logo {
        grid-template-rows: 1fr;
}
    }
 
.c-img-logo__img {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: 25.625rem; /* 410px */
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}
 
.c-img-logo__img picture {        
        height: 100%;
        max-width: 100%;
        width: 100%;
    }
 
.c-img-logo__img picture img {            
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: center;
               object-position: center;
        }
 
@media (min-width: 992px) {
 
.c-img-logo__img {
        height: 40rem; /* 640px */
}
    }
 
.c-img-logo__logo {
    z-index: 10;
    position: relative;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
 
@media (min-width: 992px) {
 
.c-img-logo__logo {
        margin-top: 1rem;
}
    }
 
/* utilities
============================================ */
 
.u-bg-color-primary {
    background-color: var(--koka-color-theme-primary);
}