/*
:root {

  --primaer-color: #11121a;
  --hover-color: #272832;
  --accent-color: #0071ff;
  --text-color: #c9c9c9;
  --text-footer: #281a21;
} */

.rajdhani-light {
  font-family: "Rajdhani", serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", serif;
  font-weight: 700;
  font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {
 font-family: "Rajdhani", serif;
 max-width: 2000px;
    font-weight: 400;
    font-style: normal;
      scroll-behavior: smooth;
}
a {
    text-decoration: none;
}

/*   Modal  */
#id01 {
display:none;
}

/* Header Styling */


.banner-team {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
    font-size: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Fade Slider Container */
.fade-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fade-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeSlideShow 15s infinite; /* 15s für 3 Bilder = 5s pro Bild */
}

.fade-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Optional: Ken Burns Effekt für mehr Dynamik */
    animation: kenBurns 15s infinite;
}

/* Timing für die verschiedenen Slides */
.fade-slide:nth-child(1) {
    animation-delay: 0s;
}

.fade-slide:nth-child(2) {
    animation-delay: 5s;
}

.fade-slide:nth-child(3) {
    animation-delay: 10s;
}

/* Fade Animation */
@keyframes fadeSlideShow {
    0% { opacity: 0; }
    6.67% { opacity: 1; } /* Fade in */
    33.33% { opacity: 1; } /* Sichtbar bleiben */
    40% { opacity: 0; } /* Fade out */
    100% { opacity: 0; }
}

/* Optional: Ken Burns Effekt (leichter Zoom) */
@keyframes kenBurns {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Content über dem Slider */
.shape-inset1,
nav {
    position: relative;
    z-index: 2;
}

/* Animation pausieren bei Hover */
.banner-team:hover .fade-slide,
.banner-team:hover .fade-slide img {
    animation-play-state: paused;
}


.logo {
position: absolute;
top:50px;
left:5vw;
width: auto;
height: 200px;
background-size: contain;

    display: inline-block;
border-radius: 50%; /* Rundes Bild */
padding: 0px; /* Abstand für den Rand */
animation: pulse 3s infinite; /* Pulsierende Animation */

}

/* Pulsierender Rand */
.logo:after {
content: '';
position: absolute;
top: -5px; /* Positionierung des Randes */
left: -5px; /* Positionierung des Randes */
right: -5px; /* Positionierung des Randes */
bottom: -5px; /* Positionierung des Randes */
border-radius: 50%;
border: 60px solid rgba(255, 255, 0, 0.7); /* Gelber Rand mit Transparenz */
animation: pulse 3s infinite; /* Pulsierende Animation */
z-index: -1; /* Hinter das Bild legen */
}

/* Pulsierende Animation */
@keyframes pulse {
0% {
box-shadow: 0 0 10px rgba(255, 255, 0, 0.5), 0 0 20px rgba(255, 255, 0, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 40px rgba(255, 255, 0, 1);
}
100% {
box-shadow: 0 0 10px rgba(255, 255, 0, 0.5), 0 0 20px rgba(255, 255, 0, 0.5);
}
}


.header-text {
position: absolute;
top:60px; /* mittig höhe  */
left:350px;
}

.shape-inset1 {
    /*  vorderer Kreis   */
    width: 230px;
    height: 230px;
    -webkit-shape-margin: 0em;
    shape-margin: 0px;
    -webkit-shape-outside: circle() border-box;
    shape-outside: circle() border-box;
    border: 0px solid transparent;
    /*   shape-outside: circle(50%); */
    transform: rotate(-2deg);
    box-shadow: 10px 10px 20px silver;
    border-radius: 300px;
    /* css auf seite */
    background-color: #50842c;
    margin-left:100px;
}

.shape-inset1 h1 {
font-size:24px;
text-align:center;
padding-top:50px;
}

header h1 {
    color: rgba(250, 250, 250, 0.9);
    text-align: left;
    font-size: clamp(1.3rem, 3vw, 37px);
  /*  padding-right:3vw;  */
       line-height: 2.5rem;
}
header h2 {
    color: rgba(250, 250, 250, 0.9);
    line-height: 2.4rem;
    width:75%;
  color: #132639;
  font-size:20px;
/*  font-size: clamp(1rem, 0.8542rem + 0.6667vw, 1.4375rem);  */
    font-family: "Rajdhani", serif;
  font-weight: 600;
}
header h3 {
    color: rgba(250, 250, 250, 0.9);
    text-align: left;
    font-size: clamp(1.2rem, 2.2vw, 27px);
    padding-right:50px;
    font-style:italic;
    padding-top:20px;
    font-family: "Rajdhani", serif;
  font-weight: 600;
}

/* Navigation */

nav {
  position: absolute;
        top:240px; /* mittig höhe  */
        right:10vw;

}
nav ul {
    display: flex;
    justify-content: left;
    list-style: none;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.2);
  font-family: "Rajdhani", serif;
  font-weight: 600;
  font-style: normal;
}
nav ul li  {
       margin:0; padding: 0;  border:0px solid red;
}
nav ul li a {
    color: white;
    padding: 1rem;
    display: block;
    text-decoration: none;
    font-size:1.15rem;
 font-family: "Rajdhani", serif;
  font-weight: 600;
  font-style: normal;
}
nav ul li a:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.4);
}


/* Inhalt 	margin-left: min(6rem, 8%);

  margin-right: clamp(12px, 5rem, 6%);

   */

main .content {

  margin-left: min(6rem, 8%);
  margin-right: 5vw; 
  max-width:75%;
  border:0px solid red;
   font-family: "Rajdhani", serif;
  font-weight: 500;
}
.content hr.details {
     width: 100%;
    margin: 20px auto 20px 0;
border:2px solid grey;
}


.content ol {
	margin-top: 7px;
    list-style-type: disc;
  	list-style-position: outside;
    margin-bottom:2rem;
}
.content li {
    display: list-item;
  	min-height: 1.6em;
	padding-left: min(2rem, 2%);
        font-size:110%;
  font-weight: 500;

}
.content h1 {
	padding-top: 90px;
  padding-bottom: 15px;
      line-height: 2.6rem;
 font-family: "Rajdhani", serif;
  font-weight: 700;
  font-style: normal;

}
.content h2  {
	padding-top: 40px;
  padding-bottom: 15px;
  font-size:25px;
    line-height: 2.3rem;
  font-family: "Rajdhani", serif;
  font-weight: 600;
  font-style: normal;
}

.content h5 {
  font-size:22px;
  line-height:1.8rem;
  margin-top:30px;
padding-top:20px;
  font-weight: 600;
}
 .content h6 {
  font-size:26px;
    line-height: 2.3rem;
  font-weight: 600;
  margin-top:30px;
  margin-bottom:20px;
  padding: 10px;
}
.content p  {
	padding-top: 12px;
    line-height: 1.8rem;
        color: #132639;
            font-size:110%;
  font-weight: 500;
}

/* Accordion */

        @keyframes highlightSection {
            0% { background-color: #fff; }
            50% { background-color: #fff3cd; }
            100% { background-color: #fff; }
        }

        .highlight-section {
            animation: highlightSection 2s ease-in-out;
        }

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  text-align: left;
  outline: none;
  border:none;
    transition: max-height 1s ease-in-out, opacity 1s ease-in-out;
  border-bottom: 3px solid white;
  border-top: 1px solid #AFC6CC;
   border-radius: 0px;
   margin-bottom:5px;
}

.active, .accordion:hover {
  background-color: #d9e6f2;
}

.panel {
  padding: 0; margin:0px;
  display: none;
  background-color: white;
  overflow: hidden;

}

.panel p {
	margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: min(5rem, 4%);     margin-right: clamp(12px, 5rem, 30px);
    line-height: 1.8rem;
}
  /*  inset: 10px; min max position aboslute vom erletern elemt*/

/* accordian lietz   */

  .trainer-lietz {
      display: flex;
      gap: 20px; /* Abstand zwischen den Boxen */
      margin: 0 auto;
      margin-bottom: 30px;   margin-top: 30px;
            background-color: #f0f0f0;
      Padding-left:4vw;
      border:0px solid red;
  }

  .box-left {
      flex: 1; /* nimmt einen Teil des verfügbaren Platzes ein */

      padding: 20px 0 20px 0;
  }

  .box-right {
      flex: 2; /* nimmt zwei Teile des verfügbaren Platzes ein */

      padding: 20px 0 20px 0;
  }
  .socials-container{
    display: flex;
    gap: 20px;
    padding-top:70px;
    padding-bottom:50px;
  }
  .socials-container a{
    background-color: white;
    padding: 1em;
    border-radius: 50%;
    height: 64px;
    width: 64px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  }
  .socials-container a svg{
    height: 32px;
  }
  .socials-container a::before{
    content: attr(data-social);
    position: absolute;
    background-color: var(--accent-color);
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 100px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-30px) rotate(25deg);
    opacity: 0;
    transition: 200ms cubic-bezier(.42,0,.44,1.68);
  }
  .socials-container a:hover{
    background-color: var(--accent-color);
    fill: white;
  }
  .socials-container a::after{
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--accent-color);
    transform: translateY(0) rotate(25deg);
    opacity: 0;
    transition: 200ms cubic-bezier(.42,0,.44,1.68);
    /*    transition: 200ms cubic-bezier(.42,0,.44,1.68);  */
  }
  .socials-container a:hover::before{
    transform: translateY(-65px) rotate(0);
    opacity: 1;
  }
  .socials-container a:hover::after{
    transform: translateY(-42px) rotate(0);
    opacity: 1;
  }
        /* 2 Spalten   */
.column-2sp {
            width: 48%;
            padding: 0 20px;
            border:0px solid red;
        }
.right, .left {
            border: 1px solid rgb(85, 0, 255);
        }
 .trainings-links a {
           color:#ca740b;

        }
 .trainings-links a:hover {
          color: #C70039;
        }
 .trainings-rechts li {
        padding-bottom: 7px;
        }
 .trainings-rechts li a {
  color: dodgerblue;        
}
 .trainings-rechts li a:hover {
  color: #C70039;        
}

/* Footer Flex Boxes */
footer {
margin-bottom:2rem;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    color:#C70039;
}



.flex-box {
    flex: 1;
    margin: 10px;
    padding: 20px 12px 20px 12px;
    background: #f4f4f4;
     border:0px solid blue;
       line-height: 1.8rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: row;
    }
nav ul li a {
  color: white;
  padding: 1rem .3rem;
  display: block;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Rajdhani", serif;
  font-weight: 600;
  font-style: normal;
}
    .flex-container {
        flex-direction: column;
    }

.shape-inset1 {
  width:170px;
  height:170px;
  -webkit-shape-margin: 0em;
  shape-margin: 0px;
  -webkit-shape-outside: circle() border-box;
  shape-outside: circle() border-box;
  border: 0px solid transparent;
  shape-outside: circle(50%);
  transform: rotate(-2deg);
  box-shadow: 10px 10px 20px silver;
  border-radius: 300px;
  margin-left:25px;
}
.shape-inset1>h1 {
  font-size:18px;text-align:center;padding-top:30px;line-height:30px;
}

}

hr.trenner {
 
    border: none;
    border-top: 2px solid #434445; 
    width:85%;
}