@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;

    --color-primary: #E3E6F3;
    --color-secondary: rgb(77, 77, 179);
    --color-stuffHeader: black;
    --color-dark: black;
    --color-middle: lightgrey;
    --color-bright: white;
    --color-hover: rgb(104, 166, 104);
    --color-headlines: black;
    --color-headlinesBright: var(--color-primary);
    --color-buttons: black;

    --color-textdark: black;
    --color-textbright: white;

    --color-transparent: transparent;
    
    --color-error: white;
    --color-success: #4bb544;
    /* overflow-x: hidden; */
}

body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

strong {
    color: var(--color-headlines);
}

h1 {
    font-size: 50px;
    line-height: 64px;
    color: var(--color-headlines);
    text-transform:uppercase
}

h2 {
    font-size: 46px;
    line-height: 54px;
    color: var(--color-headlines);
    text-transform:uppercase
}

h3 {
    font-size: 35px;
    line-height: 1.5;
    color: var(--color-headlines);
    text-transform:uppercase
}

h4 {
    font-size: 20px;
    color: var(--color-headlines);
    width: max-content;
    text-transform:uppercase
}
    
h6 {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-headlines);
    text-transform:uppercase
}

p,
ol li {
    font-size: 16px;
    color: var(--color-textdark);
    margin: 15px 0;
    hyphens: auto;
    text-align: justify;
    line-height: 1.5;
}

button {
    background-color: var(--color-transparent);
    border: 2px solid var(--color-buttons);
    color: var(--color-buttons);
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    padding: 15px 10px;
    cursor: pointer;
    transition: 0.5s ease;
}

button:hover {
    background-color: var(--color-buttons);
    border: 2px solid var(--color-buttons);
    color: var(--color-bright);
}

.brightButton {
    background-color: var(--color-transparent);
    border: 2px solid var(--color-bright);
    color: var(--color-bright);
}

.brightButton:hover {
    background-color: var(--color-bright);
    border: 2px solid var(--color-bright);
    color: var(--color-buttons);
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: 0.5s ease;
    color: var(--color-textdark);
    /* font-style: italic; */
}

a:hover {
    color: var(--color-hover);
}

.hover:hover {
    color: var(--color-hover);
}

.hover {
    transition: ease 0.5s;
}

.textContainer ul {
    list-style-type: none;
    padding: 0;
}
  
.textContainer ul li {
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--color-dark);
}

.textContainer ul li span {
    color: var(--color-dark);
}

.textContainer ul li span:hover {
    color: var(--color-hover);
}

.download-icon:before {
    content: "\1F4E5";
    margin-right: 5px;
}

.textContainer ol {
    padding: 0; /* Entfernt den Standardabstand der ungeordneten Liste */
}

.textContainer ol li {
    line-height: 1.5; /* Ändert den Zeilenabstand */
    margin-bottom: 10px; /* Fügt einen Abstand zwischen den Listenpunkten hinzu */
}

.textContainer ol li:before {
    margin-right: 5px; /* Fügt einen kleinen Abstand zwischen dem Symbol und dem Text hinzu */
}

/* ---------------------------- */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--color-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    z-index: 999; /*to fix it at the top*/
    position: sticky; /*to fix it at the top*/
    top: 0; /*to fix it at the top*/
    left: 0; /*to fix it at the top*/
}

.headerlogo {
    width: 80px;
    height: auto;
    padding: 0 10px;
    
}

.header i {
    cursor: pointer;
    transition: 0.5s ease;
    color: var(--color-stuffHeader);
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
}

#navbar li {
    list-style: none; /*to get rid of bullet points*/
    padding: 0 20px;
    position: relative; /*important because of the position of #navbar li a.active::after*/
    transition: 0.5s ease;
}

#navbar li a {
    text-decoration: none; /*to get rid of underscore*/
    font-size: 16px;
    font-weight: 600;
    color: var(--color-stuffHeader);
    transition: 0.5s ease; /*to have a smooth transition*/
}

#navbar li a:hover,
.header #mobile i:hover,
.header i:hover,
#navbar li a.active {
    color: var(--color-hover);
}

#navbar li a.active::after {
    content: "";
    width: 50%;
    height: 2px;
    background: var(--color-hover);
    position: absolute; /*to make sure it's right below the parent*/
    bottom: -5px; /*to have the line 5px below the word*/
    left: 20px; /*to make sure the line is right under the word according to parent #navbar li*/
}

#mobile {
    display: none;
    align-items: center;   
}

#close {
    display: none;
}

#navbar .navbar2 {
    position: absolute;
    left: 2px;
    top: 15px;
    height: fit-content;
    padding: 50px 5px 5px 5px;
    background-color: var(--color-primary);
    font-weight: 600;
    width: max-content;
    transition: 2s ease;
    line-height: 1.8;
    display: none;
}

#navbar .navbar2 li a {
    font-size: 14px;
 }

#AthletInnen:hover #navbarAthletInnen {
    display: block;
}

#Saisons:hover #navbarSaisons {
    display: block;
}

#AboutUs:hover #navbarAboutUs {
    display: block;
}

/* ---------------------------- */

.textContainer {
    padding: 40px 80px;

    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;

    width: 100%;
    height: auto;

    margin: 0 auto;
    max-width: 1400px;
}

.textdartnet {
    padding: 40px 0px;
}

.textdartnet h3, 
.textdartnet p {
    color: var(--color-headlinesBright);
}


.uppercase strong {
    text-transform:uppercase;
}

.Turnierzusammenfassung {
    padding-top: 20px;
}

/* ---------------------------- */

/* Spieltagsvideos */

.myVideoSlides {
    display: none;
    max-height: 80vh; 
    margin: auto;
}

/* Slideshow container */
.slideshow-container {
  height: auto;
  width: auto;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--color-dark);
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    transform: scale(1.20);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

span.active, .dot:hover {
  background-color: var(--color-dark);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* ---------------------------- */
  
.StartAnimation {
    height: 100vh;
    width: 100%;
    position: relative;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    background-color: black;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: relative;
    padding: 80px;
}

.StartAnimation .ComeFirst {
    width: 60%;
}

.StartAnimation h1 {
    font-size: 150px;
    color: var(--color-headlinesBright);
    width: 100%;
    z-index: 10;
    opacity: 1;
    position: relative;
    line-height: 1;
}
  
.H1Nr1 {
    animation: 3s slideIn ease-in-out forwards 0s;
    transform: translateY(-300%);
}

.H1Nr2 {
    animation: 3s slideIn ease-in-out forwards 0.5s;
    transform: translateX(-100%);
}

.H1Nr3 {
    animation: 3s slideIn ease-in-out forwards 1s;
    
    transform: translateX(250%);
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-dark); 
    background-size: cover;
    background-image: url('/Images/Alles_Moegliche/Gruppenfoto24.jpg');
    background-position: center;
    animation: 7s slideIn ease-in-out forwards, 7s skewBg ease-in-out;
}

.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark); 
    opacity: 10%;
    transition: background-color 0.3s ease;
}


  
@keyframes skewBg {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes underline {
    100% {
        width: 100%;
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.StartAnimation .ComeSecond {
    width: 40%;
    z-index: 10;
    opacity: 1;
    animation: 3s slideIn ease-in-out forwards 2s;
    transform: translateX(+200%);
}

.StartAnimation span,
.StartAnimation section {
    display: flex;
    flex-direction: column;
    align-items:flex-end;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

.ComeSecond {
color: var(--color-bright);
text-transform: uppercase;
font-size:40px;
font-weight:bold;
}

#flip {
    height:50px;
    overflow:hidden;
}

#flip > div > div {
    color: var(--color-textdark);
    padding:4px 12px;
    height:45px;
    margin-bottom: 52px;
    display:inline-block;
    font-family: none;
}

#flip div:first-child {
    animation: show 7s linear infinite;
}

#flip div div {
    background: var(--color-primary);
    border-radius: 4px;
}

#flip div:first-child div {
    background: white;
    color: var(--color-textdark);
}

#flip div:last-child div {
    background: var(--color-dark);
}

@keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
}

.startBanner {
    height: 91vh;
    width: 100%;
    background-size: cover; /*to make sure it comes with the full size*/
    background-position: center;
    padding: 0 80px;
    display: flex; /* display flex is by default row, therefore we need to include a column flex direction*/
    flex-direction: column;
    align-items: flex-start;
    animation: 2s slideIn ease-in-out forwards, 2s skewBg ease-in-out;
    background-color: white;
    flex-direction: row;
    align-items: flex-end;
}



.athleten {background-image: url("/Images/Alles_Moegliche/Gruppenfoto_TeamCopa23.JPG");}
.CUA {background-image: url("/Images/Alles_Moegliche/CUA-Binde.JPG");}
.CPI {background-image: url("/Images/Alles_Moegliche/CPI2r.png");}
.Club {background-image: url('/Images/ImagesOldWebsite/Hunter\ 180.JPG');}


.AthletePages {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.ImagesAthletePages {
    width: 33%;
    margin: 0.33% auto auto;
    border-top: 2px solid var(--color-dark);
    border-right: 2px solid var(--color-dark);
    border-left: 2px solid var(--color-dark);
}

.champions {
    display:none; 
    width: auto; 
    margin: auto;
    text-align: center;
}

.champions img {
    /* height: 400px; */
    max-width: 310px; 
    margin: 0 auto;
    animation: 1.5s slideIn ease-in-out forwards 0s;
}

.champions figcaption,
.mySlidesTurnier figcaption {
    text-align: center;
    /* max-width: 310px; */
    width: 320px;
    padding: 5px;
    margin: auto;
    background-color: var(--color-dark);
    color: var(--color-textbright);
    font-weight: 600;
}

.SubCaption {
    font-size: 12px;
}

.dartnet {
    background-image: url("/Images/Alles_Moegliche/dartnet.jpeg");
}

.startBanner div {
    padding: 20px;
    margin-top: 50px;
}

.athleten div {
    margin-bottom: 10%;
}

.startBanner h4, 
.startBanner h2,
.startBanner h1,
.startBanner button {
    margin: 5px;
}

.startBanner h4,
.startBanner h1 {
    color: var(--color-headlinesBright);
}

/* .Saisons {background-image: url('/Images/Alles_Moegliche/Hintergrund5.jpg');} */
.Saisons {background-image: url('/Images/Alles_Moegliche/HintergrundDartBoards.jpg');}
    /* .S2021 {background-image: url("https://media4.giphy.com/media/Cn44PUsTVimwBAtIRx/giphy.gif?cid=ecf05e47bgx1om4d34y2xda9g62tgstgpbpefumhrqre3na3&rid=giphy.gif&ct=g");}
    .S2022 {background-image: url('https://media3.giphy.com/media/Q5gYwgsTe2ixRthGO9/giphy.gif?cid=ecf05e47r1ybn8g3rvkzeq67rqwfg8kjr764bs4o562lv2t6&rid=giphy.gif&ct=g');}
    .S2023 {background-image: url('https://media4.giphy.com/media/W4eYGtkSCe11nXvkNS/giphy.gif?cid=ecf05e47lw7xqengdvz2dart2bnjr0zqn8xxzek95afpbwq8&rid=giphy.gif&ct=g');} */
.Regelwerk {background-image: url('/Images/Alles_Moegliche/hammer.jpg');}
.Masters {background-image: url('/Images/Alles_Moegliche/Masters_Titelbild.jpeg');}
.Masters_BlueBG {background-image: url('/Images/Alles_Moegliche/Masters_Logo_BlueBG.png');}
.Hammer_BlueBG {background-image: url('/Images/Alles_Moegliche/Hammer_BlueBG.png');}

.aboutUs {background-image: url('/Images/Alles_Moegliche/Team.jpeg');}
    .Gesundheit {background-image: url('/Images/Alles_Moegliche/Gesundheit.jpg');}
        .HealthBenefits {background-image: url('/Images/Alles_Moegliche/vegetables.jpg'); width: 48%;}
        .Scale {background-image: url('/Images/Alles_Moegliche/Scale.jpg'); width: 48%;}
    .Mitarbeiter {background-image: url('/Images/MitarbeiterFotos/Mitarbeiterfoto.JPG');}
    .Partnerschaften {background-image: url('/Images/Alles_Moegliche/handshake.jpg');}
    .Karriere {background-image: url('/Images/Alles_Moegliche/Karriere.jpg');}
        .Bewerbung {background-image: url('/Images/Alles_Moegliche/Bewerbung.jpg');}
   

.video {
    background-size: cover;
    background-position: center;
}

.video video {
    width: 100%;
}

.video2 {
    transition: 0.5 ease;
    width: 32.5%;
    
}

.video3 {
    border: 2px solid var(--color-dark);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    padding: 200px 50px 50px;
    margin: 1% auto;
}

.OneImage {
    border: 2px solid var(--color-dark);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    padding: 200px 50px 50px;
    margin: 1% auto;
    width: 30%; 
    height: 30%; 
    padding: 80px
}

.video3 h2 {
   margin-top: 20%;
}

.video2 video {
    width: 100%;
    transition: 0.5s ease;
    border: 2px solid var(--color-dark);
}

.video2 video:hover {
   transform: scale(1.01);
}

.Images {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.Images1 img {
    width: 60%;
    margin: 0 auto;
} 

.Images2 img {
    width: 48%;
} 

.Diashow {
    height: 600px;
}

.Turnier {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mySlidesTurnier {
    height: fit-content;
    text-align: center;
}

.mySlidesTurnier img {
    height: 300px;
    max-width: 320px;
    animation: 1.5s slideIn ease-in-out forwards 0s;
}

.mySlidesTurnier .AbSaison4 {
    height: 258px;
}

.Column1 {
    width: 30%;
}

.Column1_Eingebettet {
    width: auto;
    /* min-width: 200px; */
    margin: auto;
}

.Column1 h4,
.Column1_Eingebettet h4 {
    padding: 5px 0;
}


.Column2 {
    width: 40%;
    margin: auto;
    text-align: center;
}

.Column2 img {
    transition: 0.5s ease;
}

.Column2 img:hover {
    transform: scale(1.01);
}

.Column3 {
    width: 30%;
    margin: auto;
    text-align: right;
}

.Column3 i,
.Column3 p {
    color: var(--color-dark);
    margin: auto 0 auto 10px;
    font-weight: 700;
    transition: 0.5s ease;
    text-align: right;
}

.Column3 i {
    font-size: 25px;
}

.Column3 i:hover,
.Column3 p:hover {
    color: var(--color-hover);
    transform: scale(1.02);
}



.Column2_Eingebettet{
    width: 50%;
}

.Column3_Eingebettet{
    width: 300px;
    /* width: 310px; */
}

.Eingebettet {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.Eingebettet h3 {
    width: 100%;
    text-align: center;
}

.GoogleTabelle {
    width: 320px; 
    height: 500px; 
    margin: 40px auto;
    border: 2px solid var(--color-dark);
}

.EventImage {
    width: 320px; 
    height: 320px; 
    margin: 40px auto;
}

.Terminkalender {
    border-width:0;
    margin: 40px auto;
    display: block; 
    width: 1400px; 
    height: 500px;
}

.Trophy {
    width: 50%;
}

.ImageTrophy {
    height: 250px; 
    margin: 55px auto auto; 
    display: block;  
}

.PartnerschaftenImages  {
    width: 20%; 
    margin: auto;
    cursor: pointer;
    transition: ease 0.5s;
}

.PartnerschaftenImages:hover  {
   transform: scale(1.03);
}

#AktuellesTurnier h5,
.Column1 h5,
.Column2 h5,
.Column3 h5,
.Column1_Eingebettet h5,
.Column2_Eingebettet h5,
.Column3_Eingebettet h5 {
    font-size: 20px;
    padding-bottom: 10px;
}

.Column1 h3,
.Column1 h5,
.Column1_Eingebettet h3,
.Column1_Eingebettet h5 {
    text-align: left; 
}



.Column2 h3,
.Column2 h5,
.Column2_Eingebettet h3,
.Column2_Eingebettet h5 {
    text-align: center;
}


.Column3 h3,
.Column3 h5,
.Column3_Eingebettet h3
.Column3_Eingebettet h5  {
    text-align: right;
}

/* ---------------------------- */

.section-fe {
    padding: 40px 80px;
    background-color: var(--color-primary);
}

.feature {
    display: flex;
    align-items: center;
    justify-content: space-between; /*nice flexible space between the boxes */
    flex-wrap: wrap; /* goes into the row below if not enough space */
}

.feature .fe-box {
    width: 210px;
    text-align: center;
    padding: 15px 12px;
    background-color: var(--color-primary);
    box-shadow: 0 20px 20px 34px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-bright);
    border-radius: 4px;
    margin: 15px 0px;
    transition: 0.5s ease;
}

.feature .fe-box:hover {
    box-shadow: 0 10px 40px 10px rgba(0, 0, 0, 0.14);
    transform: scale(1.02);
    cursor: pointer;
    
}

.feature .FixedSize {
    width: auto;
    height: 200px;
    background-image: url('/Images/Alles_Moegliche/Set-UpCaféKlatsch.jpeg');
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    border: 1px solid var(--color-bright);
    border-radius: 4px;
}

/* .feature .FixedSize {
    position: relative;
}

.feature .FixedSize::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:var(--color-dark);
    opacity: 50%;
    pointer-events: none;
}

.feature .FixedSize:hover::after {
    background-color: transparent; 
}

/* .feature .fe-box:nth-child(3) .FixedSize {
    background-image: url('/Images/Alles_Moegliche/Gruppenbild2.JPG');
}

.feature .fe-box:nth-child(4) .FixedSize {
    background-image: url('/Images/Alles_Moegliche/dartnet.jpeg');
}

.feature .fe-box:nth-child(5) .FixedSize {
    background-image: url('/Images/Alles_Moegliche/Emotionen2.JPG');
}

.feature .fe-box:nth-child(6) .FixedSize {
    background-image: url('/Images/Alles_Moegliche/VideoGameScreenshot.png');
}

.feature .fe-box:nth-child(7) .FixedSize {
    background-image: url('/Images/Alles_Moegliche/Bier.JPG');
} */

.feature .fe-box h6 {
    padding: 9px 8px 6px 8px;
    line-height: 1.5;
    border-radius: 4px;
    color: var(--color-headlinesBright);
    /* background-color: gold; */
    background-color: var(--color-dark);
}

/* .feature .fe-box:nth-child(2) h6 {
    background-color: rgb(139, 139, 214);
}

.feature .fe-box:nth-child(3) h6 {
    background-color: rgb(66, 90, 70);
}

.feature .fe-box:nth-child(4) h6 {
    background-color: rgb(143, 87, 138);
}

.feature .fe-box:nth-child(5) h6 {
    background-color: rgb(223, 130, 69);
}

.feature .fe-box:nth-child(6) h6 {
    background-color: rgb(165, 45, 45);
} */

.feature h1 {
    width: 100%;
    padding: 20px 0 25px;
}

/* ---------------------------- */

.section-p1 {
    padding: 40px 80px 20px 80px;
    background-image: url('/Images/Alles_Moegliche/dartnet.jpeg');
    animation: 2s slideIn ease-in-out forwards, 2s skewBg ease-in-out;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

.Oben {
    display: inline-block;
    flex-direction: column;
}

.pro-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /*nice flexible space between the boxes */
    flex-wrap: wrap; /* goes into the row below if not enough space */
    margin: 60px auto;
    max-width: 1400px;
}

.pro-container .pro {
    width: 21%;
    padding: 10px 12px;
    background-image: url('/Images/Alles_Moegliche/dartnethalbiert.jpeg');
    background-size: cover;
    border: 1px solid var(--color-bright);
    border-radius: 10px;
    box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
    margin: 30px auto;
    transition: 0.5s ease;
    position: relative;
}

.pro-container .pro:hover {
    box-shadow: 0 5px 40px 10px rgba(255, 255, 255, 0.34);
    transform: scale(1.02);
}

.pro-container .pro img {
    width: 100%;
    cursor: pointer;
}

.pro-container .pro .des {
    text-align: start;
    padding: 10px;
}



.price {
    cursor: pointer;
}
.price:hover {
    transform: scale(1.01);
}

.pro-container .pro .des span {
    color: var(--color-textbright);
    font-size: 13px;
}

.pro-container .pro .des h5 {
    padding-top: 8px;
    color: var(--color-headlinesBright);
    font-size: 15px;
}

.pro-container .pro .des h4 {
    padding: 15px 0 5px;
    color: var(--color-headlinesBright);
    font-size: 18px;
    font-weight: 700;
}

.Bewertung {
    display: flex;
    align-items: flex-start;
}

.star {
    font-size: 15px;
    color: gold;
    margin: 10px 0 2px;
}

.pro-container .pro .cart,
.pro-container .pro .info {
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: var(--color-bright);
    color: var(--color-dark);
    border: 1px solid var(--color-bright);
    position: absolute; 
    bottom: 16px;
    transition: ease 0.5s;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}

.pro-container .pro .cart {
    /* background-color: #e8f6ea;
    color: #088178; */
    right: 16px;
}

.pro-container .pro .info {
    /* background-color: #e8f6ea;
    color: #ad8347; */
    right: 70px;
}

.pro-container .pro i:hover {
    transform: scale(1.07);
    background-color: var(--color-dark);
    border: 1px solid var(--color-dark);
    color: var(--color-bright);
}

.innerText {
    width: 100%;
    padding: 10px;
}

.section-p1 h1 {
    color: var(--color-headlinesBright);
    padding-top: 10px;
}

.section-p1 a {
    color: var(--color-bright);
}

.section-p1 h4 {
    text-align: left;
    color: var(--color-headlinesBright);
    padding-top: 30px;
}

.bigButton {
    padding: 20px;
    margin-top: 20px;
    font-size: 30px;
    font-weight: 700;
}

/* #dartnet:hover {
    color: black;
} */

.countdown-timer {
    width: 100%;
    margin-top: 50px;
}

#confirmPro1,
#confirmPro2,
#confirmPro3,
#confirmPro4,
#confirmPro5,
#confirmPro6,
#confirmPro7,
#confirmPro8,
#confirmPro9,
#confirmPro10,
#confirmPro11,
#confirmPro12 {
   display: none;
   background-size: cover;
   border: 2px solid var(--color-dark);
   height: fit-content;
   padding: 0 15px 15px 15px;
   box-sizing: border-box;
   /* color: var(--color-textdark); */
   margin: 20px auto;
}

.pro-container .BackgroundDartnet {
    background-image: url('/Images/Alles_Moegliche/dartnethalbiert.jpeg');
    width: 70%;
}

.messageText {
   color: var(--color-textbright);
   margin-top: 20px;
}

.confirmPro {
   color: var(--color-textbright);
   margin: 15px auto 0 auto;
   padding: 0;
   font-size: 16px;
   transition: ease 0.5s;
   cursor: pointer;
}

.confirmPro:hover {
    color: var(--color-bright);
}

#confirmPro1 button,
#confirmPro2 button,
#confirmPro3 button,
#confirmPro4 button,
#confirmPro5 button,
#confirmPro6 button,
#confirmPro7 button,
#confirmPro8 button,
#confirmPro9 button,
#confirmPro10 button,
#confirmPro11 button,
#confirmPro12 button {
   display: block;
   cursor: pointer;
   float: right;   
}

.info {
    text-align: center;
    width: 16px;
    height: 16px;
    line-height: 12px;
    border-radius: 50px;
    background-color: var(--color-transparent);
    color: var(--color-textdark);
    /* background-color: #e8f6ea;
    color: #ad8347; */
    border: 1px solid var(--color-textdark);
    font-weight: 900;
    font-size: 10px;
    transition: ease 0.5s;
}

.info:hover {
    background-color: var(--color-dark);
    border: 1px solid var(--color-dark);
    color: var(--color-bright);
    transform: scale(1.07);
}

.pro-container div {
    width: 100%;
    text-align: center;
}

.pro-container div h3 {
    color: var(--color-headlinesBright);
    margin: 40px auto 20px;
}

.pro-container .mitarbeiterCard {
    background-color: transparent;
    background-image: none;
    border: 0px;
    width: 39%;
    margin: 40px auto;
}

.pro-container .mitarbeiterCard:hover {
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.15);
}

.pro-container .mitarbeiterCard .info {
    right: 16px;
    border: 1px solid var(--color-dark);
}

.pro-container .mitarbeiterCard img {
    background-color: rgb(241, 234, 234);
    border-radius: 50%;
    width: 70%;
    height: auto;
}

.pro-container .mitarbeiterCard .des {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }

.pro-container .mitarbeiterCard .des span {
    color: var(--color-textdark);
    margin: auto;
}

.pro-container .mitarbeiterCard .des h5 {
    color: var(--color-headlines);
}

.pro-container .mitarbeiterCard img {
    cursor: default;
}

.pro-container .BackgroundMitarbeiterText {
    background-color: var(--color-textbright);
    width: 50%;
}

.pro-container .BackgroundMitarbeiterText .messageText {
    color: var(--color-textdark);
}

.pro-container .BackgroundMitarbeiterText .confirmPro {
    color: var(--color-dark);
    background-color: var(--color-bright);
}

.pro-container .BackgroundMitarbeiterText .confirmPro:hover {
    color: var(--color-bright);
    background-color: var(--color-dark);
 }

/* .pro-container .BackgroundMitarbeiterText button {
    color: var(--color-dark);
    background-color: var(--color-bright);
    border: 2px solid var(--color-dark);
}

.pro-container .BackgroundMitarbeiterText button:hover {
    color: var(--color-bright);
    background-color: var(--color-dark);
} */

.Link {
    cursor: pointer;
    transition: ease 0.5s;
}

.Link:hover {
    color: var(--color-hover);
}

/* ---------------------------- */

.section-bannerMiddle {
    margin: 0 0;
    padding: 40px 80px;
    display: flex;
    justify-content: center;
    background-image: url('/Images/Alles_Moegliche/Bar2.JPG');
    /* background-image: url('/Images/Alles_Moegliche/Gruppenfoto24.jpg'); */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    animation: 2s slideIn ease-in-out forwards, 2s skewBg ease-in-out;  
    vertical-align: sub;
}

.section-bannerMiddle2 {
    background-image: url('/Images/Alles_Moegliche/Hintergrund.JPG');
}

.section-bannerMiddle3 {
    background-image: url('/Images/Alles_Moegliche/Gaming.png');
}

.section-bannerMiddle4 {
    background-image: url('/Images/Alles_Moegliche/Dartist180korrigiertKopfDran.JPG');
    /* background-image: url('/Images/Team.jpeg'); */
}

.section-bannerMiddleKlatsch {
    background-image: url('/VideoGame/Images/Klatsch.jpeg');
}

.BachelorOfDarts {
    background-image: url('/Images/ImagesOldWebsite/BachelorOfDarts.jpeg');
    height: fit-content;
    padding: 20% 10% 10%;
}

.Gaming {
    background-image: url('/Images/Alles_Moegliche/Gaming.png');
    height: fit-content;
    padding: 10% 10%;
}

.Team1 {background-image: url('/Images/TeamAlbum/Captain\ Cook.JPG');}
.Team2 {background-image: url('/Images/TeamAlbum/Copa\ de\ Dartist.png')}
.Team3 {background-image: url('/Images/TeamAlbum/Darty\ Ducks.JPG');}
.Team4 {background-image: url('/Images/TeamAlbum/Der\ Olymp.JPG');}
.Team5 {background-image: url('/Images/TeamAlbum/Dichtkîpfe.JPG');}
.Team6 {background-image: url('/Images/TeamAlbum/Dick\ und\ Doof.JPG');}
.Team7 {background-image: url('/Images/TeamAlbum/Die\ Downies.JPG');}
.Team8 {background-image: url('/Images/TeamAlbum/die\ gepflegte\ jackydose.JPG');}
.Team9 {background-image: url('/Images/TeamAlbum/Die\ Stumpfen\ Spitzen.png');}
.Team10 {background-image: url('/Images/TeamAlbum/GralshÅter.png');}
.Team11 {background-image: url('/Images/TeamAlbum/hsv\ hammdurst.JPG');}
.Team12 {background-image: url('/Images/TeamAlbum/ice\ cold.JPG');}
.Team13 {background-image: url('/Images/TeamAlbum/Intim\ im\ Team.JPG');}
.Team14 {background-image: url('/Images/TeamAlbum/Jattas\ JÅnger.JPG');}
.Team15 {background-image: url('/Images/TeamAlbum/jo\ starr\ auf\ mein\ pferd.JPG');}
.Team16 {background-image: url('/Images/TeamAlbum/King\ of\ Queens.png');}
.Team17 {background-image: url('/Images/TeamAlbum/Long\ long\ dou.JPG');}
.Team18 {background-image: url('/Images/TeamAlbum/Madhouse.JPG');}
.Team19 {background-image: url('/Images/TeamAlbum/Ngolo\ Molge.JPG');}
.Team20 {background-image: url('/Images/TeamAlbum/THC.JPG');}
.Team21 {background-image: url('/Images/TeamAlbum/thekenpower.JPG');}
.Team22 {background-image: url('/Images/TeamAlbum/vereinigte\ dartische\ emirate.JPG')}
.Team23 {background-image: url('/Images/TeamAlbum/Yorkstrasse\ 8.JPG');}

/* .Masters_Logo {background-image: url('/Images/Logos/Masters.png');} */


.bannerMiddle {
    margin: 30% auto 10%;
    width: fit-content;
    
}

.section-bannerMiddle h4, 
.section-bannerMiddle h2,
.section-bannerMiddle h1,
.section-bannerMiddle button {
    margin-top: 10px;
}

.section-bannerMiddle h3 {
    color: var(--color-headlinesBright);
    font-size: 20px;
}

.section-bannerMiddle h2 {
    font-size: 50px;
    padding: 10px 0;
    color: var(--color-headlinesBright);
}

/* ---------------------------- */

.section-bannerValues {
    padding: 0px 80px 40px;
    margin: 0 auto;
    max-width: 1400px;
}

.section-banner {
    margin: 0 auto;
    padding: 40px 80px;
    max-width: 1400px;
}

.section-banner:nth-child(2) {
    padding-top: 40px;
}

.banner2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.banner2 .banner-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* background-color: black; */
    border: 2px solid var(--color-dark);
    min-width: 47.5%;
    height: 50vh;
    background-size: cover;
    background-position: center;
    padding: 30px;
    /* margin: 0px 0px 40px; */
}


.banner2 .banner-box1 {
    background-image: url('/Images/Alles_Moegliche/Einstein.jpg');
    opacity: 0.95;
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box2 {
    background-image: url('/Images/Alles_Moegliche/MaxPower.png');
    opacity: 0.85;
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box3 {
    background-image: url('/Images/Alles_Moegliche/Billy.JPG');
    border: 2px solid var(--color-dark);
    
}

.banner2 .banner-box4 {
    background-image: url('/Images/Alles_Moegliche/DartZugeschnitten.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box5 {
    background-image: url('/Images/Alles_Moegliche/Stars.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box6 {
    background-image: url('/Images/Alles_Moegliche/TeamgeistZugeschnitten.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box7 {
    background-image: url('/Images/Alles_Moegliche/Bier.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box8 {
    background-image: url('/Images/Alles_Moegliche/Emotionen4.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box21 {
    background-image: url('/Images/Alles_Moegliche/FanSupport.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 .banner-box22 {
    background-image: url('/Images/Alles_Moegliche/CUAS4E1.JPG');
    border: 2px solid var(--color-dark);
}

.banner2 h4 {
    color: var(--color-headlinesBright);
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
}

.banner2 h2 {
    color: var(--color-headlinesBright);
    font-size: 23px;
    font-weight: 800;
}

.quote {
    width: 250px;
}

.banner2 .banner-box.einstein {
    align-items: flex-start;
}

.quote p {
    color: var(--color-textbright);
    font-size: 14px;
    font-weight: 500;
}

.Zitat {
    min-height: 330px;
}

.CaptureBanner h2 {
    font-weight: 800;
    font-size: 50;
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-align: end;
}

.CaptureBanner h4 {
    color: var(--color-headlinesBright);
    font-weight: 700;
    text-align: end;
    line-height: 1.5;
    margin-top: 0px;
    float: right;
}

.banner2 .CaptureBanner {
    justify-content: flex-end;
}

.CopaValues h1 {
    padding: 60px 0 40px;
}


/* ---------------------------- */

.banner3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.banner3 .banner-box {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    /* background-color: black; */
    border: 2px solid var(--color-dark);
    min-width: 30%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    padding: 20px;
    /* margin-bottom: 40px; */
    transition: 0.5s ease;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.05);
}

/*  */

.banner3 .banner-box:hover {
    transform: scale(1.02);
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
}

.notClickable .banner-box:hover {
    cursor: default;
}

.notClickable .banner-box:hover {
    transform: scale(1.0);
}



.banner3 .banner-box4 {
    background-image: url('/Images/Alles_Moegliche/Spannung.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box5 {
    /* background-image: url('/Images/Alles_Moegliche/KaempferHerz.jpg'); */
    background-image: url('/Images/Alles_Moegliche/Pokale.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box6 {
    background-image: url('/Images/Alles_Moegliche/Eleganz.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box7 {
    background-image: url('/Images/Alles_Moegliche/Wettkampf.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box8 {
    background-image: url('/Images/Alles_Moegliche/Freundlichkeit.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box9 {
    background-image: url('/Images/Alles_Moegliche/Sauberkeit.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box10 {
    background-image: url('/Images/Alles_Moegliche/Pizza.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box11 {
    /* background-image: url('/Images/Alles_Moegliche/Limbo.JPG'); */
    background-image: url('/Images/Alles_Moegliche/Matrose.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box12 {
    background-image: url('/Images/Alles_Moegliche/Genuss.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box31 {
    /* background-image: url('/Images/Alles_Moegliche/Limbo.JPG'); */
    background-image: url('/Images/Alles_Moegliche/Shots.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box32 {
    background-image: url('/Images/Alles_Moegliche/Multikulti.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 .banner-box33 {
    background-image: url('/Images/Alles_Moegliche/Musikalisch.JPG');
    border: 2px solid var(--color-dark);
}

.banner3 h2 {
    color: var(--color-headlinesBright);
    font-weight: 900;
    font-size: 22px;
    font-family: sans-serif;
    /* cursor: pointer; */
}

.banner3 h3 {
    color: var(--color-headlinesBright);
    font-weight: 800;
    font-size: 15px;
    font-family: sans-serif;
    /* cursor: pointer; */
}



.athletenBanner h3 {
    margin-top: 10px;
}

.athletenBanner h2 {
    line-height: 1.3;
}

.banner-boxAboutUs {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    /* background-color: black; */
    border: 2px solid var(--color-dark);
    width: 22%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    padding: 20px;
    /* margin-bottom: 40px; */
    transition: 0.5s ease;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.05);
}

.banner3 .banner-boxAboutUs:hover {
    transform: scale(1.02);
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
}

#StartDiashow {
    text-align: center;
}

/* ---------------------------- */

.newsletter {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--color-secondary);
    /* background-color: rgb(1, 1, 9); */
    width: 100%;
}

.newsletter h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-headlinesBright);
}

.newsletter p {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-textbright);
}

.newsletter .form {
    display: flex;
    width: 50%;
}

.newsletter div input {
    height: 3.125rem;
    padding: 0 1.25em;
    font-size: 14px;
    min-width: 300px;
    border: 1px solid var(--color-bright);
    border-radius: 4px;
    outline: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.newsletter button {
    height: 3.125rem;
    white-space: nowrap;
    border-radius: none;
    border: 1px solid var(--color-bright);
    color: var(--color-bright);
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.newsletter button:hover {
    background-color: var(--color-bright);
    border: 1px solid var(--color-bright);
    color: var(--color-dark);
}

/* ---------------------------- */

.section-footer {
    padding: 40px 0 40px 80px;
}

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer .col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 20%;
}

footer .col img {
    width: 60%;
    margin: auto;
    display: block;
}

footer h4 {
    font-size: 20px;
    padding-bottom: 20px;
}

footer p {
    font-size: 13px;
    margin: 0 0 8px 0;
    line-height: 2;
}

footer a {
    text-decoration: none;
    font-size: 13px;
    color: var(--color-textdark);
    margin-bottom: 16px;
}

footer .follow img {
    padding-right: 4px;
    cursor: pointer;
    width: 100px;
    justify-content: center;
    margin: auto;
}

footer .follow i:hover,
footer a:hover {
    color: var(--color-hover);
}

.copyright {
    width: 100%;
    text-align: center;
    margin-right: 80px;
}

.chapterNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.chapterNavigation a {
    color: var(--color-dark);
}

.chapterNavigation a:hover {
    
    font-weight: bold;
}

.chapterNavigation button {
    margin: 10px 10px 20px 10px;
    padding: 6px 9px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    background-color: var(--color-tranparent);
    border: 1px solid var(--color-dark);
    color: var(--color-dark);
    transition: 0.5s ease;
    cursor: pointer;
}

.chapterNavigation button:hover {
    background-color: var(--color-dark);
    color: var(--color-bright);
}

/* ---------------------------- */

.container-form {
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    margin: 40px auto ;
}

fieldset {
    width: 100%;
    background: var(--color-textbright);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 20px solid var(--color-primary);
    border-radius: 10px;
}

.container-form legend {
    font-size: 30px;
    margin: 0px 0px 0px 20px;
}

.container-form form {
    /* background: white; */
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
}

.container-form form p {
    margin: 10px 2px 20px 5px ;
    font-size: medium;
}

.container-form form input, 
.container-form form textarea {
    border: 0;
    margin: 10px 2px 20px 2px ;
    padding: 15px;
    outline: none;
    background: var(--color-middle);
    font-size: 16px;
    border: 1px solid var(--color-dark);
}

.container-form input:hover,
.container-form textarea:hover{
    background-color: var(--color-bright);
}

.container-form input:focus,
.container-form textarea:focus {
    background: var(--color-bright);
    border: 2px solid var(--color-dark);
}

.container-form form .buttonform {
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
}

.container-form form button:hover {
    background-color: var(--color-dark);
    color: var(--color-bright);
    border: 2px solid var(--color-bright);
}

.container-form label {
    display: block;
    width: 100%;
    margin: 0px 0px 0px 5px;
    font-size: large;
}

.container-form form > *:first-child {
    margin-top: 10px;
}

.container-form form > *:last-child {
    margin-bottom: 10px;
}


.Regelwerk_Masters {
    width: 45%;
}



.logo-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
    /* animation: scroll 40s linear infinite; */
    white-space: nowrap; /* Hält den Inhalt in einer Zeile */
    box-sizing: border-box;
}

.logo-slider img {
    width: 100px;
    /* height: 100px; Sicherstellen, dass die Höhe gleich der Breite ist, um einen perfekten Kreis zu bilden */
    margin: 0 80px;
    display: inline-block;
    /* border-radius: 50%; Macht die Logos rund */
    transition: 1s ease;
}

.logo-slider img:hover {
   transform: scale(1.05);
}

/* @keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
} */

.sponsor-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 100%;
    max-width: 1000px; */
}

.sponsor-item {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

.sponsor-item img {
    width: 300px;
    /* max-height: 300px; */
    /* border-radius: 50%; */
    margin-right: 80px;
    margin-left: 80px;
    transition: 1s ease;
}

.sponsor-item img:hover {
   transform: scale(1.05);
}

/* .sponsor-item div {
    max-width: 740px;
} */

.sponsor-item h4 {
    margin: 0 0 10px 0;
}

.sponsor-item p {
    margin: 0 0 10px 0;
}



/* ---------------------------- */

@media (max-width: 1450px) {
    .feature .fe-box {
        width: 30%;
        margin: 15px auto;

    }
}

@media (max-width: 1280px) {
    .feature {
        justify-content: center;
    }

    .banner2 .banner-box {
        width: 100%;
    }

    /* .section-banner {
        padding: 40px 50px;
    } */

    .section-banner:nth-child(2) {
        padding-top: 40px;
    }

    .section-bannerValues {
        padding: 10px 50px;
    }

    .section-p1 {
        padding: 40px 80px;
    }

    .pro-container .pro {
        width: 45%;
        margin-top: 40px;
    }

    .StartAnimation h1 {
        font-size: 120px;
    }

    .ComeSecond {
        font-size:30px;
        }

    .StartAnimation {
        height: 600px;
    }

    .ImagesAthletePages {
        width: 100%;
        margin: 0;
    }
/* 
    .Column2_Eingebettet{
        width: 100%;
    }
    
    .Column3_Eingebettet{
        width: 100%;
        text-align: center;
    } */

    .Column1,
    .Column2,
    .Column3,
    .Column1_Eingebettet,
    .Column2_Eingebettet,
    .Column3_Eingebettet {
        padding: 40px 0;
        width: 100%;
    }

    .Column1,
    .Column1_Eingebettet,
    .Column2,
    .Column2_Eingebettet {
        padding-bottom: 0;
    }

    .Column2,
    .Column3,
    .Column2_Eingebettet,
    .Column3_Eingebettet {
        padding-top: 0;
    }


    .Column1 h5,
    .Column2 h5,
    .Column3 h5,
    .Column1_Eingebettet h5,
    .Column2_Eingebettet h5,
    .Column3_Eingebettet h5,
    .Column1 h3,
    .Column2 h3,
    .Column3 h3,
    .Column1_Eingebettet h3,
    .Column2_Eingebettet h3,
    .Column3_Eingebettet h3,
    .Column3,
    .Column3 p {
        text-align: center; 
    }

    .Column1_Eingebettet {
        text-align: center;
    }
    
}

@media (max-width: 1100px) {
    /* .Column1,
    .Column2,
    .Column3,
    .Column1_Eingebettet,
    .Column2_Eingebettet,
    .Column3_Eingebettet {
        padding: 40px 0 0;
        width: 100%;
    } */

    .Trophy {
        width: 100%;
    }

    .Diashow {
        height: fit-content;
    }

    .champions img {
        margin-top: 30px; 
    }

   

    

    .multimedia {
        display: block;
        margin-top: 30px;
     }
     .multimedia video {
        width: auto;
        margin: auto auto 20px;
        display: block;
     }
     .multimedia article {
        margin: 0 auto 40px;
     }

     .sponsor-item {
        flex-direction: row; /* Nebeneinander für größere Bildschirme */
        /* text-align: center; Text linksbündig */
        flex-direction: column;
        align-items: center;
    }

}



@media (max-width: 910px) {
    #navbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: -10%;
        height: 100vh;
        width: 0;
        box-shadow: 0 40px 60px rgba(0, 0, 0, 0.03);
        padding: 100px 0 0 0;
        transition: 0.5s ease;
    }

    #navbar.active {
        right: 0px;
        width: max-content;
    }

    #navbar li {
        margin: 12px 0;
    }


    #navbar .navbar2 {
        position: absolute;
        height: fit-content;
        width: 170px;
        left : -170px;
        top: -16px;
        padding: 0px;
        transition: 0.5s ease;
        line-height: 1.2;
    }

    #navbar .navbar2 li a {
       font-size: 12px;
    }


    #mobile {
        display: flex;
        align-items: center;   
    }

    #mobile i {
        color: var(--color-stuffHeader);
        font-size: 24px;
        padding-right: 20px;
    }

    #close {
        display: initial; /* to show the close button */
        position: absolute;
        top: 30px;
        left: 30px;
        color: var(--color-textdark);
        font-size: 24px;
    }

    #lg-bag {
        display: none;
    }

    .textContainer {
        margin: 0 0;
        padding: 40px 20px;
    }

    .textContainer h3 {
        font-size: 22px;
    }

    .textdartnet {
        padding: 40px 0px;
    }

    .startBanner {
        height: 50vh;
        padding: 0 20px;
        background-position: top 20% right 80%;
    }

    .section-p1 {
        padding: 40px 20px;
    }

    .section-fe {
        padding: 40px 20px;
    }

    .newsletter {
        padding: 40px 80px;
    }

    .section-m1 {
        padding: 40px 20px;
    }

    .section-banner {
        padding: 40px 20px;
    }

    .StartAnimation {
        padding: 80px 20px;
    }

    .section-bannerValues {
        padding: 0px 0px;
    }

    .section-bannerMiddle {
        padding: 40px 20px;
    }

    .section-footer {
        padding: 40px 20px 40px 20px;
    }


    footer .col {
        width: 100%;
        margin: 20px 30px;
    }

    .copyright {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    .banner3 h2 {
        color: var(--color-headlinesBright);
        font-weight: 900;
        font-size: 17px;
    }
    
    .banner3 h3 {
        color: var(--color-headlinesBright);
        font-weight: 800;
        font-size: 13px;
    }

    .StartAnimation {
        height: 600px;
    }

    .StartAnimation h1 {
        font-size: 90px;
    }

    .ImagesCUA {
        width: 100%;
        margin: auto;
    }

    /* .Diashow {
        height: 450px;
    } */

    .champions img {
        height: 300px; 
    }

    .Diashow h3 {
        font-size: 30px;
        margin: auto;
    }

    .banner-boxAboutUs {
        width: 47%;
    }

    .video2 {
        width: 80%;
        margin: auto;
    }

    .video3 {
        width: 80%;
    }

}

@media (max-width: 740px) {
    .StartAnimation .ComeFirst,
    .StartAnimation .ComeSecond {
        width: 100%;
    }

    .StartAnimation .ComeSecond {
        margin-top: 20px;
    }

    .pro-container .pro {
        width: 70%;
    }

    .pro-container .BackgroundDartnet {
        width: 70%;
    }

    .pro-container .BackgroundMitarbeiterText {
        width: 70%;
    }

    .Images1 img {
        width: 100%;
    } 

    .Images2 img {
        width: 100%;
        margin-bottom: 20px;
    } 

    /* .champions img {
        height: 200px; 
    } */

    .logo-slider img {
        width: 100px;
        margin: 30px 40px;
    }

    .logo-slider {
        animation: scroll 10s linear infinite;
    }

    .sponsor-item img {
        width: 200px;
        /* height: 200px; */
        margin-bottom: 30px;
        margin-right: 0; /* Abstand zwischen Bild und Text */
        margin-left: 0;
    }

    /* .sponsor-item h4 {
        margin: 0 0 10px 0;
    } */
    
}

@media (max-width: 615px) {

    

    .banner2 .banner-box {
        height: 30vh;
    }

    .banner3 .banner-box,
    .Regelwerk_Masters {
        width: 100%;
    }

   
    .banner3 h2 {
        color: var(--color-headlinesBright);
        font-weight: 900;
        font-size: 22px;
    }
    
    .banner3 h3 {
        color: var(--color-headlinesBright);
        font-weight: 800;
        font-size: 15px;
    }

    .feature .fe-box {
        width: 47.5%;
    }

    h1 {
        font-size: 40px;
    }

    .section-bannerMiddle h2 {
        font-size: 30px;
    }

    h4 {
        font-size: 15px;
    }

    .pro-container .pro {
        width: 90%;
    }

    .pro-container .BackgroundDartnet {
        width: 90%;
    }

    .pro-container .BackgroundMitarbeiterText {
        width: 90%;
    }

    .banner-boxAboutUs {
        width: 100%;
    }

    .video2,
    .video3 {
        width: 100%;
    }

    .newsletter {
        padding: 40px 20px;
    }

    .video3 {
        padding: 50px 20px 20px;
    }

    /* .Terminkalender {
        margin: 40px auto 20px;
    } */
    
}

@media (max-width: 450px) {

    .newsletter {
        align-items: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .newsletter button {
        margin: 20px auto 0px auto;
        width: 300px;
        border-radius: 2px;
    }
    
    .newsletter .form {
        display: block;
    }

    .newsletter p, 
    .newsletter h4 {
        width: 300px;
    }

    .section-p1 {
        padding: 40px 5px;
    }
    
    .section-fe {
        padding: 40px 5px;
    }
    
    .section-m1 {
        padding: 40px 5px;
    }
    
    .section-banner {
        padding: 40px 0;
    }

    .section-bannerValues {
        padding: 0 0;
    }

    .section-bannerMiddle {
        padding: 40px 5px;
    }

    .textContainer {
        margin: 0 0;
        padding: 40px 5px;
    }

    .textdartnet {
        padding: 40px 0px;
    }

    .startBanner {
        padding: 0 5px;
    }

    .feature .fe-box {
        width: 90%;
    }

    .StartAnimation h1 {
        font-size: 60px;
    }

    .ComeSecond {
        font-size: 20px;
    }
   

}