/*
  Theme Name: Leading Events Quiz Theme
  Author: die Gestalter
*/

@font-face {
  font-family: "U8";
  src: url("./assets/fonts/U8Web-Regular.woff2") format("woff2"),
    url("./assets/fonts/U8Web-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

@font-face {
  font-family: "U8";
  src: url("./assets/fonts/U8Web-Bold.woff2") format("woff2"),
    url("./assets/fonts/U8Web-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

:root {
  --clr-light: white;
  --clr-dark: black;
  --clr-green: #53FF8B;
  --clr-greenbg: #53ff8c33;
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --lauftext: clamp(1.13rem, calc(0.98rem + 0.71vw), 1.63rem);
  --titel: clamp(2.50rem, calc(2.14rem + 1.79vw), 3.75rem);
  --untertitel: clamp(1.5rem, calc(1.5rem + 1.5vw), 2rem);

  /* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1240,20,1.25,5,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--4: clamp(0.4825rem, 0.4698rem + 0.0543vw, 0.5119rem);
  --step--3: clamp(0.5788rem, 0.5522rem + 0.1133vw, 0.64rem);
  --step--2: clamp(0.6944rem, 0.6486rem + 0.1954vw, 0.8rem);
  --step--1: clamp(0.8331rem, 0.7608rem + 0.3087vw, 1rem);
  --step-0: clamp(1rem, 0.8916rem + 0.4624vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0428rem + 0.6705vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2175rem + 0.9491vw, 1.9531rem);
  --step-3: clamp(1.7281rem, 1.419rem + 1.3191vw, 2.4413rem);
  --step-4: clamp(2.0738rem, 1.6497rem + 1.8092vw, 3.0519rem);
  --step-5: clamp(2.4881rem, 1.9129rem + 2.4543vw, 3.815rem);

  --space-3xs: clamp(0.25rem, 0.2229rem + 0.1156vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4458rem + 0.2312vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6687rem + 0.3468vw, 0.9375rem);
  --space-s: clamp(1rem, 0.8916rem + 0.4624vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3374rem + 0.6936vw, 1.875rem);
  --space-l: clamp(2rem, 1.7832rem + 0.9249vw, 2.5rem);
  --space-xl: clamp(3rem, 2.6749rem + 1.3873vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.5665rem + 1.8497vw, 5rem);
  --space-3xl: clamp(6rem, 5.3497rem + 2.7746vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.0874rem + 0.6936vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3103rem + 0.8092vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5332rem + 0.9249vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.6207rem + 1.6185vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.0665rem + 1.8497vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.2413rem + 3.237vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.1329rem + 3.6994vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.4827rem + 6.474vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.3497rem + 2.7746vw, 2.5rem);

  --contain: 768px;
  --contain-text: 70ch;

  --titleLineHeight: 1.1;
  --defaultLineHeight: 1.4;

  --gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --trs: 0.3s;

  --flow: var(--space-m-l);
  --flow-s: var(--space-s-m);
  --flow-xs: var(--space-3xs-2xs);

  --border-radius: 60px;
  --outline: 4px;

  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --poly-start: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
  --poly-hero: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
  --poly-hero2: polygon(50% 0, 100% 0, 100% 100%, 25% 100%);
  --poly-end: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  --trs-menu: 0.9s;

  --headerspace: var(--mobileHeader);
}

@media screen and (min-width: 1024px) {
  :root {
    --headerspace: var(--desktopHeader);
    --poly-start: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

html {
  height: 100%;
  font-family: "U8", var(--system-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-margin-top: var(--mobileHeader, var(--flow));
  background-color: var(--clr-whitesmoke);
}

body.preload>* {
  transition: none !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

body.home {
  margin-top: 0;
}

address {
  font-style: normal;
}

a,
button {
  outline-offset: var(--outline);
  outline-color: var(--clr-dark);
  outline-width: 1px;
}

img[data-sizes="auto"].lazyload {
  display: block;
  width: 100%;
}

.lazy-fade {
  opacity: 0;
}

.lazy-fade.lazyloaded {
  opacity: 1;
  transition: opacity 0.75s linear;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

::-moz-selection {
  color: var(--clr-light);
  background-color: var(--clr-dark);
}

::selection {
  color: var(--clr-light);
  background-color: var(--clr-dark);
}

.hideOnLandscape {
  visibility: visible;
}

@media (orientation: landscape) {
  .hideOnLandscape {
    visibility: hidden;
  }
}

.skip {
  left: -100%;
  position: absolute;
  z-index: 3;
  font-size: var(--step-0);
  width: auto;
}

.skip:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
}

.flow>*+* {
  margin-block-start: var(--flow, 1em);
}

.flow-s>*+* {
  margin-block-start: var(--flow-s, 0.75em);
}

.flow-xs>*+* {
  margin-block-start: var(--flow-xs, 0.5em);
}

/* typography */
.step-5 {
  font-size: var(--step-5);
}

.step-4 {
  font-size: var(--step-4);
}

.step-3 {
  font-size: var(--step-3);
}

.step-2 {
  font-size: var(--step-2);
}

.step-2.submenu {
  font-size: var(--step-1);
}

.step-1 {
  font-size: var(--step-1);
}

.step--1 {
  font-size: var(--step--1);
}

.step--2 {
  font-size: var(--step--2);
}

.step--3 {
  font-size: var(--step--3);
}

.step--4 {
  font-size: var(--step--4);
}

.content-grid {
  --padding-inline: var(--gutter);
  --content-max-width: var(--contain, 80ch);
  --breakout-max-width: calc(var(--content-max-width, 80ch) * 1.2);
  --content-size: min(100% - (var(--padding-inline) * 2),
      var(--content-max-width));
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] var(--content-size) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline),
      1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid>.breakout {
  grid-column: breakout;
}

.content-grid>.breakout-left {
  grid-column: breakout / content;
}

.content-grid>.breakout-right {
  grid-column: content / breakout;
}

.content-grid>.full-left {
  grid-column: full-width / content;
}

.content-grid>.full-right {
  grid-column: content / full-width;
}

.content-grid>.full-width {
  grid-column: full-width;
}

.content-grid>.full-width.mobile-only {
  grid-column: full-width;
}

@media screen and (min-width: 640px) {
  .content-grid>.full-width.mobile-only {
    grid-column: content;
  }
}

[x-cloak] {
  display: none !important;
}

/* images */
picture img,
img {
  user-select: none;
  max-width: 100%;
  height: auto;
  /* Removes the empty space on the bottom without using 'display'. */
  vertical-align: middle;
  /* If image doesn't load, the alt text is visible in italic. */
  font-style: italic;
  /* Used on images with LQIP backgrounds: see snippet 'image-with-lqip'. */
  background-repeat: no-repeat;
  background-size: cover;
  /* In case you are using 'float' on the image. */
  shape-margin: 1rem;
}

.image {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

a:focus,
a {
  color: inherit;
}

.titel {
  font-size: var(--untertitel);
  line-height: 1.1;
}

@media screen and (min-width: 1024px) {
  .titel {
    font-size: var(--titel);
  }
}

.stretcher {
  flex-grow: 1;
}