/* Fonts */
@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('../fonts/AtlasGrotesk-Regular-Web.woff2') format('woff2'),
  url('../fonts/AtlasGrotesk-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Cambon Light';
  src: url('../fonts/Cambon-Light.woff2') format('woff2'),
  url('../fonts/Cambon-Light.woff') format('woff');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

/* Variables */
:root {
  /* Colors */
  --background-color: #FEFEFE;
  --header-color: #F2F2F2;
  --footer-color: #E5E5E5;
  --base-color: #A9FF65;
  --second-color: #eefbea;
  --text-color: #343131;
  --grey-color: #C9C8C8;
  --black-color: #000;
  --credit-color: #3E3D40;

  /* Layout */
  --page-width: 1440px;
  --width-middle: 854px;


  /* Space */
  --margin-large: 90px;
  --margin-teaser: 60px;
  --margin-middle: 45px;
  --margin-small: 30px;
  --padding-default: 10px;

  /* Breakpoints */
  --large: 1024px;
  --medium: 860px;

  /* Fonts */
  --base-font: 'Atlas Grotesk Web', sans-serif;
  --highlight-font: 'Cambon Light', serif;

  /* iframe */
  --iframe-ratio: 16 / 6;

}


/* Page layout */
html, body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--base-font);
  scroll-behavior: smooth;
}

main {
  margin: 0 auto;
  width: 100%;
  min-height: 85vh;
  background-color: var(--background-color);
}


/* Typo */
h1 {
  text-align: center;
  font-family: var(--highlight-font);
  /*font-size: 33px;*/
  font-size: clamp(2.0625rem, -0.3255rem + 6.3679vw, 3.75rem);
  line-height: 1;
  font-weight: 300;
}
h2 {
  text-align: left;
  font-family: var(--highlight-font);
  font-size: 27px;
  line-height: 1.165;
  font-weight: 300;
}

h3 {
  text-align: left;
  font-family: var(--highlight-font);
  font-size: 27px;
  line-height: 1.165;
  font-weight: 300;
}

/*p {
  text-align: left;
  font-family: var(--base-font);
  font-size: 16px;
  line-height: 1.281;
}*/

a, a:visited, a:active {
  font-family: var(--base-font);
  color: var(--text-color);
  text-decoration: none;
}

.teaser {
  text-align: left;
  font-family: var(--base-font);
  font-size: 16px;
  line-height: 1.281;
}

date {
  text-align: left;
  font-family: var(--base-font);
  font-size: 16px;
  line-height: 1;
}

.marker {
  text-align: left;
  font-family: var(--base-font);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.04px;
}

/*
// Mobile
   Mob_Atlas_Zwischenüberschriften — Atlas fontsize=22px / Lineheight=116,5%
// Desktop
Atlas_Zwischenüberschriften — Atlas fontsize=45px / Lineheight=116,5%
*/

button {
  text-align: center;
  font-family: var(--base-font);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  background-image: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

iframe {
  width: 100%!important;
  height: auto!important;
  aspect-ratio: var(--iframe-ratio);

}

@media all and (min-width: 1024px){

  h1 {
    /*font-size: 60px;*/
    line-height: 1.165;
  }

  h2 {
    font-size: 50px;
  }

  h3 {
    font-size: 40px;
  }

  /*p {
    font-size: 30px;
    line-height: 1.433;
  }
  */


  .teaser {
    font-size: 23px;
    line-height: 1.391;
  }

  date {
    font-size: 20px;
    line-height: 1.165;
  }

  .marker {
    font-size: 28px;
  }

  /* Component overrides */
  .text, .text p {
    font-size: 23px;
    line-height: 32px;
  }


  /*
// Mobile
   Mob_Atlas_Zwischenüberschriften — Atlas fontsize=22px / Lineheight=116,5%
// Desktop
   Atlas_Zwischenüberschriften — Atlas fontsize=45px / Lineheight=116,5%
*/

}