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

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

/*
 * Remove the gutter between images, videos, audio and canvas and the bottom of
 * 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 {
  margin: 0; padding: 0;
  }
  
/*
 * BOXSIZE FOR EVERYTHING!
 */
* {
  box-sizing: border-box;
  }

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

:root {

/* COLORS
  —————————————————————————————— */
  
  --white: white;
  
  /* Light mode */
  --text:  #32341A;
  --bg:    #F2F6FE;
  --akzent:#F5FF88;
  
  /* Default mode */
  --text-color:   var(--text);
  --bg-color:     var(--bg);
  --akzent-color: var(--akzent);  
  }

/*
  START-UP EFFECT
  ——————————————————— */

/* .branding a {
  color: var(--text-color);
  animation: branding-col 1s ease-in-out 1s forwards;
  } */

/* VALUES (Default)
  —————————————————————————————— */

:root { 
  --gutter:   15vw;
  --v-space:   5vh;
  }


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

  :root { 
    --gutter:   10vw;
    --v-space:  6vh;
    }

  }

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

/*
 * LOAD and INIT FONT
 */
@font-face {
  font-family: 'SL-Grotesk';
  src: url('font/ESKlarheitGrotesk-Book.woff2') format('woff2');  
  font-weight:normal;
  font-style: normal; 
  }
  
html, 
body, h1, p {
  font-family: 'SL-Grotesk', 'Helvetica-Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 1em;

  text-rendering: optimizeLegibility;  
  }


h1, p, ul {
  margin-bottom: 1em;
  width: 85%;
  }
  @media screen and (orientation:landscape) { 
    h1, p, ul {
    width: 26em;
  }
    
  }

/* ul {
  position: relative;
  }   */
  li {
    list-style: none;
    }  
  li:before {
    content: '·';
    position: relative;
    left: -.75em;
    }
  
/*
 * SET COLORS
 ———————————————————————————————————————————————
 */

html {
  color:            var(--text-color);
  background-color: var(--bg-color);
  }
  
/*
 * Standard Links
 */
a,
a:visited {
  color: var(--text-color);
  position: relative;
  z-index: 5;
  
  text-decoration: none;
  
  padding: .15em 0;
  
  transition: color .4s ease-out 0s;
  }
a,
a:visited {
  border-bottom: 1px dotted var(--text-color);
  }
a:hover:not(.scroll-to-content),
a:active:not(.scroll-to-content) {
  color: var(--bg-color);
  text-decoration: none;
  }
  
a:not(.scroll-to-content)::before {  
  -webkit-transform: scaleX(0);  
  transform: scaleX(0);
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  }
a:hover:not(.scroll-to-content)::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  }
a:not(.scroll-to-content)::before {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: var(--text-color);
  z-index: -1;
  transition: -webkit-transform .15s ease;
  transition: transform .15s ease;
  transition: transform .15s ease, -webkit-transform .15s ease;
  }
a.no-deco {
  text-decoration: none;
  border: none;
  }
  
/* p span:not(.l, .versal) {
  background: rgba(255,224,214,.5);
  } */

/*
 * CUSTOM LAYOUT
 ———————————————————————————————————————————————
*/ 

.nowrap {
  white-space: nowrap;
  }

/*
 * Layout
 */ 

 /* Hero
 ——————————————————— */  

.hero {
  padding: 0!important;
  overflow-x: hidden;
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 150vh; 
  overflow-x: hidden;
  }
.parallax {
  position: absolute;  
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  }
  .hero-bg {
    height: 70%;
    background-image: url('../media/SL-Hero-BG.webp');
    background-position: center 80%;
    background-size: cover;
    }
  .hero-cl {
    height: 60%;
    background-image: url('../media/Cloud(12).webp');
    background-position: center center;
    background-size: 110%;
    }
  .hero-fg {
    height: 70%;
    background-image: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 85%, 
      var(--bg-color) 100%), 
      url('../media/SL-Hero-FG.webp');
    background-position: bottom, center 80%;
    background-size: 100%, cover;
    }
    
  .cloud1 {
    background-image: url('../media/Cloud(10).webp');
    background-position: center 150%;
    background-size: 160%;
    background-repeat: repeat;
    }
  .cloud2 {
    background-image: url('../media/Cloud(17).webp');
    background-position: center 170%;
    background-size: 140%;
    background-repeat: repeat;
    }
    
  @media screen and (min-width: 1200px) {  
    .cloud1 {
      background-position: center -30%;
      background-size: 160%;
      }
    .cloud2 {
      background-position: center -10%;
      background-size: 140%;
      }
  }
  .cloud3 {
    background-image: url('../media/Cloud(17).webp');
    background-position: 90% 30%;
    background-size: 70%;
    background-repeat: repeat-y;
  }
  @media screen and (max-width: 420px) { 
    .hero-cl {
      background-position: center 80%;
      background-size: 150%;
      }
    .cloud1 {
      background-position: center 70%;
      background-size: 160%;
      background-repeat: no-repeat;
      }
    .cloud2 {
      background-position: center 70%;
      background-size: 240%;
      background-repeat: repeat;
      }
    .cloud3 {
      background-position: 0% 10%;
      background-size: 160%;
      background-repeat: repeat-y;
    }  
    
  }
  
  

.info {
  position: relative;  
  }
  
header,
section,
footer {
  padding: var(--v-space) var(--gutter);
  }

header {
  height: 100svh;
  position: relative;
  z-index: 100;
  
  display: flex;
  align-items: center;
  }

.info h1 {
  padding-top: 4em;
  }

  
footer {
    position: relative;
    }
  
  .footer-img {
    position: absolute;
    width: 100vw; height: 90vh; 
    top: -18em; left: 0;
    overflow: hidden;
    z-index: -1;
    
    background-image: url('../media/SL-Footer.webp');
    background-position: center 40%;
    background-size: cover;
    } 
    
footer div:nth-of-type(1) {
  margin-bottom: 4rem;
  }


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

/*
 * Image replacement
 */

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

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

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

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

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

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

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

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

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

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

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

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

.clearfix:after {
    clear: both;
}

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

.clearfix {
    *zoom: 1;
}

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