<style>
 /* General styles */
    html {
      scroll-behavior: smooth;
    }
	
    body {
	  font-family: 'Mulish', sans-serif;
      height: 100vh;
      align-items: center;
      justify-content: center;
      margin: 0px;
	  overflow: auto;
    }

    a {
      font-family: 'Mulish', sans-serif;
      text-decoration: none;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      color: black;
	  transition: color 0.3s, background-color 0.3s;
	}
	
    a:hover {
	  color: #555;
      background-color: #e0e0e0;
	}
	
	p {
      font-family: 'Mulish', sans-serif;
	  padding-right: 5%;
	  padding-left: 5%;
      text-decoration: none;
      text-align: justify;
      display: flex;
      align-items: center;
      margin: 0 0 0.3em 0;
      color: black;
	  transition: color 0.3s, background-color 0.3s;
	}
	
/* language toggle button in navbar */
	.language-toggle {
    display: block;
    padding: 4px 6px;
    margin: 0 10px;
    color: black;
    text-decoration: none;
    border: none;
    font-weight: bold;
    background: none;
}

	.language-toggle:hover {
    background-color: #e0e0e0;
}
	

/* Image styles */
    img {
      width: 100vw;
      height: auto;
      display: block;
      margin: 0 auto;
      max-width: 90%; 
      padding: 20px 0; 
      text-align: center; 
      box-sizing: border-box;
    }
	
	.impr-img {
	  max-width: 100%; 
	  padding: 10px 0; 
	  text-align: center; 
	  box-sizing: border-box; 
	  border: 5vw solid #f7f7f7; 
	  display: block; 
	  margin: 0 auto;
	}

	.impr-img img {
	  max-width: 900px;
	  width: 100%;
	  height: auto;
	}
	
	.flyer-img {
	  max-width: 900px;
	  width: 100%;
	  height: auto;
	  display: block;
	  margin: 0 auto;
	}
	
	.flyer-pdf-link a {
	  display: inline-block; /* override the global flex */
	  margin: 0 auto;        /* let it center inside the <p> */
}

	.white-text {
	  font-family: 'Quattrocento', serif; 
	  text-align: center; 
	  padding: 1.5vw 0;
	  font-size: 14vw;
      color: white;
	  position: absolute;
	  bottom: 0; /* Align it to the bottom of the viewport */
      left: 0; /* Align it to the left edge */
      width: 100%; /* Make it span the entire viewport width */
	}
	
    .parallax {
      background-image: url("bg_t.jpg");
      min-height: 100%;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
	
	.parallax-space {
	  background-color: white;
      min-height: 0.5%;
      background-attachment: scroll;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
	}
	
    .parallax-text {
      background-color: #f7f7f7;
      color: black;
      font-size: 2em;
      padding: 1em 2em;
	  text-align: justify;
    }

	.parallax-text .course-link {
	  display: block;
	  background-color: #e76f51;
	  text-align: center;
	  text-decoration: none;
	  padding: 5px;
	  border: 2px solid #eee;
      border-radius: 5px;
	}

	.parallax-text .course-link:hover {
	  background-color: #264653;
	}

	.parallax-text .course-title {
	  font-family: Quattrocento, serif;
	  font-size: 2em;
	  font-weight: bold;
	  word-wrap: break-word; /* Ensures long words wrap */
      overflow-wrap: break-word; /* Alternative for better compatibility */
      white-space: normal; /* Allows wrapping */
	  display: block; /* Ensures it takes full width */
      max-width: 100%; /* Prevents overflowing */
	  hyphens: auto;
	}
	
	.testimonials-section {
	  text-align: left;
	}
	
	 .center-letter {
	  text-align: center;
	  color: #f50057;
	  padding: 0.1em 1em 1em 1em;
	}
	
/* Start accordion center-aligned */
	.accordion {
      display: flex;
      flex-direction: column;
    }

    .accordion-item {
      margin: 0;
      overflow: hidden;
    }

    .accordion-heading {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

	.accordion-content p {
	  display: block;
	}

    .accordion-input {
      display: none;
    }

    .accordion-label {
      cursor: pointer;
    }
	
	.accordion-sign::before {
    content: '+';
	}

	.accordion-input:checked + .accordion-label .accordion-sign::before {
    content: '\2212';
	}
	
	.accordion-input:checked + .accordion-label {
	color: #2a9d8f;
	letter-spacing: 2px;
}
	
    .accordion-input:checked ~ .accordion-content {
      max-height: 12000px; /* Adjust as needed */
    }
	
/* end accordion center-aligned */

/* start faq accordion */
	.faq-heading {
      font-size: 2.5em;
      margin: 20px 0;
	  text-align: center;
    }
	
    .accordionfaq {
      display: flex;
      flex-direction: column;
	  align-items: flex-start;
    }

    .accordionfaq-item {
      margin: 10px 5%;
      overflow: hidden;
    }

    .accordionfaq-heading {
      display: flex;
      align-items: left;
      justify-content: left;
      cursor: pointer;
    }

    .accordionfaq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      text-align: justify;
	  padding-left: 7%;
    }

    .accordionfaq-input {
      display: none;
    }

    .accordionfaq-label {
      cursor: pointer;
    }

    .accordionfaq-sign::before {
      content: '+';
    }

    .accordionfaq-input:checked + .accordionfaq-label .accordionfaq-sign::before {
      content: '\2212';
    }
	
	.accordionfaq-input:checked ~ .accordionfaq-label {
	  color: #2a9d8f;
}

    .accordionfaq-input:checked ~ .accordionfaq-content {
      max-height: 4400px; /* Adjust as needed */
    }

/* end faq accordion */

  /* Navbar styles */
	.navbar {
	  font-size: 1.5em;
	  background-color: white;
	  color: black;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	  font-family: 'Mulish', sans-serif;
	   position: fixed;
	  top: 0;
	  width: 100%;
	  z-index: 1000;
	}

	.navbar a {
	  display: block;
	  color: black;
	  text-align: center;
	  padding: 4px 6px;
	  margin: 0 10px;
	  text-decoration: none;
	  transition: background-color 0.3s;
	}

	.navbar a:hover {
	  background-color: #555;
	}

	  
/* Media query for small screens (max-width: 600px) */
@media screen and (max-width: 600px) {
    /* Hide the desktop navbar */
    .navbar {
        display: none;
    }

    .parallax {
        background-image: url("bg_t_mob.jpg");
        min-height: 60%;
        background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .parallax-text {
        font-size: 1em;
        padding: 1em 1em;
    }
	
	/*make text fit better on small screens*/
	.faq-heading {
        margin: 10px 0;
        text-align: center;
    }

    .accordionfaq-content {
        padding-left: 5%;
        padding-right: 5%;
        word-break: break-word;
    }

    .accordionfaq-item {
        margin: 10px 3%;
    }

    /* Show mobile menu container and hamburger menu */
    .mobile-menu-container {
        display: block;
    }

    .hamburger-menu {
        font-size: 2em;
        cursor: pointer;
		padding-top: 0px;
		padding-right: 5px;
		padding-bottom: 2px;
		padding-left: 5px;
        position: fixed;
        top: 10px;
        right: 10px;
		color: #444;
        background: white;
        border: 2px solid #ccc;
        border-radius: 5px;
        z-index: 1001;
    }

    /* Mobile menu links */
    .mobile-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 50px;
        right: 10px;
        background: white;
        border: 2px solid #ccc;
		border-radius: 5px;
        padding: 10px;
        z-index: 1000;
    }

    .mobile-menu a {
		font-size: 1.2em;
        display: block;
        padding: 10px;
        text-decoration: none;
        color: black;
    }

    .mobile-menu a:hover {
        background-color: #e0e0e0;
    }

    /* Make the mobile menu visible when toggled */
    .show-menu {
        display: flex;
    }
}

/* Media query for larger screens (min-width: 601px) */
@media screen and (min-width: 601px) {
    .mobile-menu-container {
        display: none !important; /* Hide the hamburger menu on larger screens */
    }
}

/* footer with social links */
	.social-footer {
	  text-align: center;
	  padding: 2rem;
	  background: #f8f8f8;
	}

	.social-icons {
	  display: flex;
	  justify-content: center;
	  gap: 1rem;
	  margin-bottom: 10px;
	}

	.social-icons a {
	  outline: none; /* Removes the default outline */
	  box-shadow: none; /* Removes any box shadow */
	  background: transparent; /* Ensures no background color appears */
}

	.social-icons a svg {
	  width: clamp(20px, 2.5vw, 32px);
	  height: clamp(20px, 2.5vw, 32px);
	  stroke: #333;
	  transition: stroke 0.3s ease;
	}

	.social-icons a:hover svg {
	  stroke: #000;
	  cursor: pointer;
	}

	.footer-text {
	  font-size: clamp(12px, 1.2vw, 16px);
	  color: #777;
	  margin: 0 5px;
	  display: inline-block;
	  text-align: center;
	}

	.footer-text a {
	  display: inline; /* Stellt sicher, dass Links inline bleiben */
	  margin: 0 5px; /* Fügt Abstand zwischen den Links hinzu */
}

    .datenschutz-text {
		max-width: 900px; 
		margin: 0 auto; 
		padding: 2rem; 
		line-height: 1.2;
		}
		
	.datenschutz-text h1, .datenschutz-text h2 {
		font-size: 1.2em;
		margin-bottom: 0.2rem;
		}

	.datenschutz-text ul {
	  margin-top: 0.3rem; /* Reduziert den oberen Abstand der Liste */
	  margin-bottom: 0.3rem; /* Optional: Reduziert den unteren Abstand der Liste */
	}

	.datenschutz-text li {
	  margin-top: 0.2rem; /* Reduziert den Abstand zwischen Listeneinträgen */
	  margin-bottom: 0.2rem; /* Optional: Für Konsistenz */
    
 </style>


