:root {
    --swiper-theme-color: #fff;
}
* {
  box-sizing: border-box;
  font-family: "sauna-new", 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  font-weight: 400;
  font-style: italic;
  color: #fff;
}



  html, body {
    background: #000;
    padding: 0;
    height: 100%;
    margin: 0;
    
  }
  
  #wrapper {
    position: relative;
    min-height: 85%;
    border-radius: 0 0 40px 40px;
    background: radial-gradient(100% 100% at var(--12-x-position) var(--12-y-position),
                                #fb6a1a 0%, #005df9 100%), 
                radial-gradient(100% 100% at var(--13-x-position) var(--13-y-position),
                                #edad88 0%, #e06e6a 100%), #f27f18;
    animation-name: main;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transition-timing-function: ease-in;

    /* Workarounds gegen Scanlines */
    background-size: 200% 200%;
    background-attachment: fixed;
  }

  /* Optional: leichtes Noise-Layer gegen Rest-Banding */
/*   body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,0.2) 0,
      rgba(255,255,255,0.2) 1px,
      transparent 1px,
      transparent 2px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
  } */

  #wrapper::after {
    content: "";
    position: fixed;
    inset: 0;
    background: url(pat1.png);
    pointer-events: none;
    z-index: 1;
    opacity: 0.1;
  }  
  
  
  h1 {
    font-family: system-ui, sans-serif;
    font-style: normal;
    font-size: clamp(1.5rem, 1.5rem + 2vw, 4rem);
    padding: 1.5rem 1rem 1.5rem 1rem;
    font-weight: bold;
    margin: 0;
  }

  h2 {
    font-family: system-ui, sans-serif;
    font-style: normal;
    font-size: clamp(1.5rem, 1.5rem + 1vw, 3rem);
    padding: 2em 0 1em 0;
    font-weight: bold;
    margin: 0;
  }

a {
    font-size: clamp(1.5rem, 1.5rem + 2vw, 3rem);
    padding: 0;
    margin: 0;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 3px;
  text-decoration-color: #ffffff54;
  transition: all 0.3s;
  }

a:hover {
  text-decoration-color: #005df9;
  }

  p, ul {
    font-size: clamp(1.5rem, 1.5rem + 2vw, 3rem);
    max-width: 50ch;
    padding: 1rem 0;
    margin: 0;
  }

  main {
    padding-block-end: 1.5rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }

h1,
.text {
  max-width: 900px;
  margin: 0 auto;
}

.text {
  padding: 0 1rem;
}

.mail.text {
  padding: 1rem;
}

.small {
    font-size: clamp(0.5rem, 0.5rem + 1vw, 1rem);
}





  @property --12-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40.70312499999999%;
  }
  @property --12-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55.00000000000001%;
  }
  @property --13-x-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
  }
  @property --13-y-position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
  }

  :root {
    --12-x-position: 40.70312499999999%;
    --12-y-position: 55.00000000000001%;
    --13-x-position: 80%;
    --13-y-position: 80%;
  }

  @keyframes main {
    25% {
      --12-x-position: 15%;
      --12-y-position: 15%;
    }
    50% {
      --12-x-position: 80%;
      --12-y-position: 15%;
      --13-x-position: 20%;
      --13-y-position: 20%;
    }
  }



.swiper {
  max-width: calc(900px - 2rem);
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 40px 40px;
  margin-block: 2rem 1rem;
}

.swiper-slide img {
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  float: left;
}

.swiper-slide:nth-child(3) img {
  float: right;
}

footer {
    padding-block-end: 1rem;
}

div.contact-logo-container {
  display: flex;
  max-width: 900px;
  margin: 1rem auto 0 auto;
  height: 7vh;
  align-content: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 1rem 1rem 1rem;
}

img.logo {
  height: 100%;
}