:root {
  --clr-accent-400: hsla(200, 15%, 54%, 1);
  --clr-accent-300: ;

  --clr-primary-850: rgb(39, 31, 56);
  --clr-primary-900: hsla(200, 19%, 18%, 1);
  --clr-primary-950: hsla(200, 19%, 25%, 1);

  --clr-neutral-100: hsla(0, 0%, 100%, 1);
  --clr-neutral-125: hsla(0, 0%, 95%, 1);
  --clr-neutral-150: hsla(0, 0%, 80%, 1);

  --font-family-primary: 'Roboto', 'sans-serif';

  --font-family-body: var(--font-family-primary);
  --font-family-heading: var(--font-family-primary);

  --font-weight-regular: 400;
  --font-weight-bold: 500;

  --font-size-300: 1.25rem;
  --font-size-400: 1.5rem;
  --font-size-500: 1.75rem;
  --font-size-550: 2rem;
  --font-size-600: 2.25rem;
  --font-size-700: 2.5rem;
  --font-size-800: 3.125rem;
  --font-size-850: 4rem;
  --font-size-900: 5.625rem;

  --font-size-body: var(1rem);
  --font-size-primary-heading: var(--font-size-700);
  --font-size-secondary-heading: var(--font-size-600);
  --font-size-tertiary-heading: var(--font-size-500);
  --font-size-nav: var(--font-size-400);
  --font-size-button: var(--font-size-400);

  --size-100: .25rem;
  --size-200: .5rem;
  --size-300: .75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

@media (min-width: 60em) {
  :root {   
    --font-size-primary-heading: var(--font-size-800);
    --font-size-secondary-heading: var(--font-size-700);
    --font-size-tertiary-heading: var(--font-size-600);
    --font-size-body: var(--font-size-300);
    --font-size-nav: var(--font-size-400)
  }
}

@media (min-width: 110em) {
  :root {   
    --font-size-primary-heading: var(--font-size-900);
    --font-size-secondary-heading: var(--font-size-850);
    --font-size-tertiary-heading: var(--font-size-700);
    --font-size-body: var(--font-size-300);
    --font-size-nav: var(--font-size-500)
  }
}

a.anchor {
  display: block;
  position: relative;
  top: -122px;
  visibility: hidden;
}

a.anchor1 {
  display: block;
  position: relative;
  top: -150px;
  visibility: hidden;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
*{
  margin: 0;
  padding: 0;
  font: inherit;
}

/* 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 */
html,
body {
  height: 100%;
}

a {
 text-decoration: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}



/* Remove all animations, transitions and smooth scroll 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;
  }
}


/* general styling*/
/*@media (min-width: 50em){
  .float1 {
    
 } 
} 
*/

body {
  font-size: var(--font-size-body);
  font-family: var(--font-family-body);
  color: var(--clr-primary-900)
}

main {
  min-height:100vh;
}

article {
  min-height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

article .inner {
  text-align: center;
  max-width: 800px;
  padding-left: 20px;
  padding-right: 20px;
}

article .inner a{
  color: rgb(0, 183, 183);
}

.Sprind-body {
  max-width: 1340px;
  padding-bottom: 35px;
}

.right-aligned-footer {
  padding-bottom: 2vh;
}

.img-right-aligned {
  margin-top: 150px;
}

@media (min-width: 56em){
  .img-right-aligned {
    position: absolute;
    top: 90%;
    right: 15px;
    margin-top: 0;
    transform: translateY(-90%);
  }

  .right-aligned-footer {
    padding-left: 60vw;
    padding-bottom: 3vh;
  }
  
  .txt-left-aligned {
    position: absolute;
    top: 92%;
    left: 15px;
    transform: translateY(-79%);
  }
  
  .txt-left-aligned1 {
    position: absolute;
    top: 83%;
    left: 15px;
    transform: translateY(-70%);
  }

  .container2 {
    position: relative;
    --max-width: 1806px;
    --padding: 1rem;
  
    width: min(var(--max-width), 100% - (var(--padding)*2));
    margin-inline: auto;
    height: 100vh;
  }
  }
@media (min-width:50) {
  .txt-left-aligned {
    position: absolute;
    top: 83%;
    left: 15px;
    transform: translateY(-79%);
  }
  
  .txt-left-aligned1 {
    position: absolute;
    top: 84%;
    left: 15px;
    transform: translateY(-70%);
  }
}

@media (min-width:55) {
  .txt-left-aligned {
    position: absolute;
    top: 82%;
    left: 15px;
    transform: translateY(-79%);
  }
  
  .txt-left-aligned1 {
    position: absolute;
    top: 90%;
    left: 15px;
    transform: translateY(-70%);
  }
}

/* button */
@media (min-width: 50){
  .img-aligned-txt {
    display: inline;
  }
}

.button {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-radius: 100vmax;
  padding: 1em 1.75em;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-400);
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-900);
  box-shadow: 0 1em 1em -1em var(--clr-primary-900);
  margin-bottom: 16px;
  margin-top: 16px;
  max-width: 250px;
  max-height: 72px;

}


.button[data-type="inverse"] {
  background-color: var(--clr-neutral-100);
  color: var(--clr-primary-900);
  font-weight: var(--font-weight-bold);
}

.button:hover,
.button:focus-visible {
  background-color: var(--clr-primary-950);
}

.button[data-type="inverse"]:hover,
.button[data-type="inverse"]:focus-visible {
  background-color: var(--clr-neutral-150);
}

@media (min-width: 56em) {
  .button {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    border-radius: 100vmax;
    padding: 1em 1.75em;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-400);
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary-900);
    box-shadow: 0 1em 1em -1em var(--clr-primary-900);
    margin-bottom: 16px;
    margin-top: 16px;
  }
}

.link {
  text-decoration: none;
}

/* navigation */



.logo {
  margin: 1.1rem;
}



.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-toggle {
  display: none;
}

.nav-list {
  font-size: var(--font-size-nav);

}

.nav-list {
  display: flex;
  gap: clamp(var(--size-700), 5vw, var(--size-900));
  
}

.nav-list a {
  text-decoration: none;
  color: var(--clr-primary-900);
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-primary-150);
}

.primary-header {
  position: sticky;
}

.header {
  position: -webkit-sticky;
}

@media (max-width: 50em) {
  .primary-navigation {
    /*display: none;*/
    position: fixed;
    z-index: 1000;
    max-width: 100vh;
    color: var(--clr-neutral-100);
    background: var(--clr-primary-900);
    padding: min(20vh, 12rem) 2rem;
    transform: translateX(100%);
    transition: transform 400ms ease-in-out;
   
    
  }

  /*
      border-radius: var(--size-100);
  inset: 7rem var(--size-600) auto;
  .primary-navigation::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient();
    
  } */

  



  /*.primary-navigation[data-visible] {
    transform: translateX(0%);
    z-index: 1001;
    display: block;
    position: fixed;
    inset: 0 0 0 10%;
  }*/

  .primary-navigation[data-visible="true"] {
    transform: translateX(0%);
    z-index: 1001;
    display: block;
    position: fixed;
    inset: 0 0 0 10%;
    padding: 10rem 2em;
    
  }

  .primary-navigation[data-visible="false"] {
    display: none;
  }
  
  .mobile-nav-toggle {
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 9999;
    width: 2rem;
    background-color: transparent;
    background-repeat: no-repeat;
    aspect-ratio: 1;
    top: 2rem;
    right: 2rem;
    border: 0;
    background-image: url("bars.svg");
    /*display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0.5em;*/
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url("close.svg");
  }


  /*.mobile-nav-toggle .icon-close {
  display: none;
  }
 */
 
 .nav-list {
  display: grid;
  gap: var(--size-600);
  text-align: left;
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-bold);
  justify-content: space-between;

  }
 
}


.opened {
  display: block;
  position: fixed;
}

/* footer navigation*/

.primary-footer-form {
  grid-area: form;
  display: none;
  
}

.footer-button {
  background: transparent;
  border: none;
}

.primary-footer-form input{
  border-radius: 100vw;
  color: var(--clr-primary-900);
}

@media (min-width: 50em) {
  .footer-button {
    background: transparent;
    border: none;
    margin-left: 16px;
  }

  .primary-footer-form {
    grid-area: form;
    display: block;
  }

  .footer-img {
    padding-right: 0;
  }
}

/*
.footer-nav a {
  color: var(--clr-neutral-100);
  text-decoration: none;
  height: 40vh;
}

.footer-nav a:where(:hover, :focus) {
  color: var(--clr-neutral-150);
  text-decoration: none;
}



@media (min-width: 50em) {
  .footer-nav {
    height: 40vh;
  }
} */

/* Kontakt Formular*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--clr-primary-900);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  border-radius: 100px;
}

input[type=email] {
  width: 100%;
  color: var(--clr-neutral-150);
  padding: 12px 20px;
  box-sizing: border-box;
  margin-bottom: 16px;
  margin-top: 6px;

}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: var(--clr-primary-950);
  position: flex;
  margin-top: 6px;
}

/* Add a background color and some padding around the form */
.contact-container {
  border-radius: 5px;
  background: transparent;
  padding: 20px;
}

@media (min-width: 50em) {
  input[type=email] {
    width: 50%;

  }

  input[type=text], select, textarea{
    width: 50%;
  }
}

/*Slider*/

.slider {
  display: flex;
  gap: 100px;
  list-style: none;
}

.a11y-slider-container {
  margin-block: var(--size-700);
}

.slider > * {
  position: relative;
  flex: 0 0 auto;
  padding-left: px;
  width: 90vw;
}

.slider-content{
  padding: var(--size-900) var(--size-400) var(--size-600);
  border-radius: 2%;
  background: var(--clr-neutral-125);
  
}

@media (min-width: 34em) {
  .slider > * {
    width: 90vw;
  }

  .slider-content{
    padding: var(--size-900) var(--size-400) var(--size-600);
    border-radius: 2%;
    background: var(--clr-neutral-125);
    height: 40vh;
    
  }
}

@media (min-width: 45em) {
  .slider > * {
    width: 60vw;
    height: 60vh;
    padding-left: 35px;
    padding-right: 80px;
  }

  .slider-content{
    padding: var(--size-900) var(--size-400) var(--size-600);
    border-radius: 2%;
    background: var(--clr-neutral-125);
    height: 60vh;
    min-width: 500px
  }

}



.slider img {
  width: var(--size-800);
  position: relative;
  inset: 0;
  padding-bottom: 1em;
  top: calc(var(--size-800) / 1);
  margin-inline: auto;
  background-color: var(--clr-neutral-100);
  border-radius: 20%;
  box-shadow: 0 1em 1em -1em var(--clr-primary-900);
  border: 4px solid var(--clr-primary-900);
}

.a11y-slider-dots {
  margin-top: 16px;
  display: flex;
  margin-block: var(--size-500);
  gap: var(--size-300);
}

.a11y-slider-dots li {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0 6px;
  color: #fff;
}

.a11y-slider-dots li button {
  display: block;
  font-size: 0;
  text-indent: -9999px;
  border: 2px solid var(--clr-primary-850) !important;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.a11y-slider-dots li button.active {
  background: var(--clr-primary-900);
} 

.a11y-slider-prev {
  position: relative;
}

.a11y-slider-prev::after {
  content: "test";
  display: block;
  color: black;
  left: 0;
  top: 0;
}

.a11y-slider-autoplay {
  display: none;
}

.visually-hidden {
  position: absolute;
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.text-primary-400 {
  color: var(--clr-primary-900)
}

.text-secondary-400 {
  color: var(--clr-neutral-100)
}

.text-accent-400 {
  color: var(--clr-accent-400)
}

.bg-primary-400 {
  background-color: var(--clr-primary-900)
}

.bg-secundary-400 {
  background-color: var(--clr-neutral-100)
}

.bg-accent-400 {
  background-color: var(--clr-accent-400)
}

.fw-bold { font-weight: var(--font-weight-bold)}
.fw-regular { font-weight: var(--font-weight-regular)}

.font-size-primary-heading {
  font-size: var(--font-size-primary-heading)
}

.font-size-secundary-heading {
  font-size: var(--font-size-secondary-heading)
}

.font-size-tertiary-heading {
  font-size: var(--font-size-tertiary-heading)
}

.padding-block-900 {
  padding-block: var(--size-400);
}

.display-sm-none {
  display: none;
}

@media (min-width: 50em) {
.display-md-inline-flex {
  display: inline-flex;
  }
}


.containerheader {
  --max-width: 1806px;
  --padding: 1rem;

  background-color: var(--clr-neutral-100) ;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
}

.container {
  --max-width: 1806px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
}

.container2 {
  --max-width: 1806px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
  height: 100vh;
}

.container3 {
  --max-width: 1806px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;

}

.containerfooter {
  --max-width: 1806px;
  --padding: 1rem;

  padding-top: 15px;
  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
  min-height: 30vh;
}

.containerslider {
    --max-width: 1806px;
    --padding: 1rem;
  
    width: min(var(--max-width), 100% - (var(--padding)*2));
    margin-inline: auto;
    min-height: 60vh;
  
}

:where(.flow :not(:first-child)) {
  margin-top: var(--flow-spacer, 3em);
}

.even-columns {
  display: grid;
  gap: 1rem;
}



@media (min-width: 50em) {
  .even-columns{
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

@media (min-width: 50em) {
  
  .grid {
    --max-width: 1806px;
    
    width: min(var(--max-width), 100% - (var(--padding)));
    margin-inline: auto;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 2fr));
    grid-template-rows: repeat(2, minmax(150px, 2fr));
    
  
  }
  
  .player {
    padding: 2rem
    
  }
}
@media (min-width: 50em) {
  
  .grid-2 {
    --max-width: 1806px;
    
    width: min(var(--max-width), 100% - (var(--padding)));
    margin-inline: auto;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 3fr));
    grid-template-rows: repeat(3, minmax(150px, 3fr));
    
  
  }
  
  .player2 {
    padding: 2rem;
    text-align: center;
    max-width: 10em;
    margin-top: var(--flow-spacer, 3em);
  }
}

.grid{
  grid-auto-flow: row;

}

.grid-2{
  grid-auto-flow: row;

}

footer {
  padding: 20px;
  min-height: 200px;
}

@media (min-width: 50em) {
  
  .grid-3 {
    --max-width: 1806px;
    
    width: min(var(--max-width), 100% - (var(--padding)));
    margin-inline: auto;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(77%, 2fr));
    grid-template-rows: repeat(1, minmax(33%, 1fr));
    
  
  }
  
  .player3 {
    padding: 2rem;
  }
}

.grid-3{
  grid-auto-flow: row;

}

@media (min-width: 50em) {
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.right-aligned {
  text-align: right;
}
}

.tc {color: var(--clr-primary-900) !important;}

@media only screen and (max-width: 50em) {
  .tc {
    color: var(--clr-neutral-100) !important;
  }
}

.center {
  text-align: center;
}


.img-bottompadding {
  padding-bottom: 6vh;
  display: none;
}

.img-bottompadding2 {
  padding-bottom: 6vh;
  padding-top: 3vh;
  margin-left: -5%;
}

@media (min-width: 550px) {
  .img-bottompadding2{
    display:none
  }

  .img-bottompadding {
    display: block;
  }

}

.footer-list {
  margin-top: 16px;
  margin-left: 10px;
}

.ulli {
  margin-bottom: 8px;
}



.navcontainer {
  max-width: 1806px;
  margin: 0 auto;
}

header {
  background-color: var(--clr-neutral-100);
  position: fixed;
  min-width: 100%;
  max-width: 1806px;
  z-index: 9999;
  top: 0;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo1 {
  float: left;
  padding-left: 32px;
  padding-top: 32px;
}

.nav1 {
  float: right;
}

.navul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navul li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 10px;
  position: relative;
}

.navul a {
  color: var(--clr-primary-900);
  text-decoration: none;
  font-size: var(--font-size-400);
}

.navul a:hover {
  color: var(--clr-neutral-150);
}

form {
  margin-top: 10vh;
}