/**
* @license
*
* Font Family: Clash Display
* Designed by: Indian Type Foundry
* URL: https://www.fontshare.com/fonts/clash-display
* © 2025 Indian Type Foundry
*
* Clash Display Extralight 
* Clash Display Light 
* Clash Display Regular 
* Clash Display Medium 
* Clash Display Semibold 
* Clash Display Bold 
* Clash Display Variable (Variable font)

*
*/
@font-face {
  font-family: 'ClashDisplay-Extralight';
  src: url('../fonts/ClashDisplay-Extralight.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Extralight.woff') format('woff'),
       url('../fonts/ClashDisplay-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Light';
  src: url('../fonts/ClashDisplay-Light.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Light.woff') format('woff'),
       url('../fonts/ClashDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Regular';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Regular.woff') format('woff'),
       url('../fonts/ClashDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Medium';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Medium.woff') format('woff'),
       url('../fonts/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Semibold.woff') format('woff'),
       url('../fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Bold.woff') format('woff'),
       url('../fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'ClashDisplay-Variable';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Variable.woff') format('woff'),
       url('../fonts/ClashDisplay-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 { 
    margin-top: 2rem; 
    font-family: "ClashDisplay-Semibold", "Helvetica Neue", sans-serif; 
    color: #5f67a1; 
}

a {
  color: #0aadc0;
}

a:hover {
  color: #0aadc0;
  text-decoration: underline;
}


body {
    font-family: "ClashDisplay-Regular", -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    color: #222;
    line-height: 1.5rem;
    font-size: 1rem;
}

#header {
    border: none
}

#header .logo svg {
    width: 220px;
    height: auto;
    margin-left: -0.6rem;
}

#header .logo svg path {
    fill: #5f67a1;
}

#header.scrolled .logo svg path {
    fill: #f5f5f7!important;
}

.header-transparent #header {
    background-color: #5f67a1;
}

.header-transparent #header a {
    color: #f5f5f7;
    font-family: "ClashDisplay-Semibold";
    font-size: 1rem;
}

#header a {
    font-family: "ClashDisplay-Semibold";
    font-size: 1rem;
}

#header.scrolled a, #header.scrolled a.active, #header.scrolled a:hover{
    color: #f5f5f7!important;
}

#header a.active, #header a:hover {
    color: #5f67a1!important;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 2px;
}

#header a:not(.scrolled) {
    color: #5f67a1;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero h2 {
    color: #5f67a1;
}

.hero-logo {
  mix-blend-mode: color-burn;
  max-width: 35vmax;
  margin: 0 auto;
}

.hero-logo svg path {
  fill: #50BF80!important;
}

.bottom-mushroom {
  position: absolute;
  margin: -10rem 0;
  mix-blend-mode: multiply;
  width: 32vmax;
}

.hero-side {
  mix-blend-mode: multiply;
  position: absolute;
  width: 32vmax;
  min-width: 420px;
  top: 20vh;
}

.hero-side--left {
  left: 0;
}

.hero-side--right {
  right: 0;
}

.btn, .accordion-wrapper label {
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
  font-family: "ClashDisplay-Semibold";
  text-decoration: none;
  background-color: #50BF80!important;
  color: #f5f5f7!important;
  border: none;
  min-height: 2.5rem;
  font-size: 1.2rem;
}

.accordion-wrapper label {
  padding: 0.4rem 1.6rem!important;
}

.accordion-wrapper label::after {
  all: unset!important;
}

.accordion-wrapper article {
  border: none!important;
  background-color: unset!important;
  margin: .4rem 0!important;
}

.btn:hover, .accordion-wrapper label:hover {
  background: #5f67a1!important;
  color: #f5f5f7;
}

.centered {
  text-align: center;
}

.mobile-menu .button_container span {
  background-color: #5f67a1;
}

body.scrolled .mobile-menu .button_container span {
  background-color: #f5f5f7!important;
}


.overlay {
  background-color: #5f67a1!important;
}

.overlay.open {
  opacity: 100;
}

.mobile-logo {
  display: none;
}
.toggler {
  display: none;
}

.treemenu li a, .treemenu li a:hover, .treemenu li a:focus, .treemenu li a.active {
  color: #f5f5f7!important;
  font-family: "ClashDisplay-Bold";
  font-size: 1.4rem;
}

.treemenu li a:hover {
  text-decoration: underline;
}

.treemenu li {
  padding: 1rem 0;
}

.bg-purple {
  background-color: #dadee4;
}

#footer {
  display: none;
  padding: 1.5rem 0;
}

#footer li a {
  color: #0aadc0!important;/* #9e7daa!important; */
  font-family: "ClashDisplay-Regular";
  font-size: 0.9rem;
}

.footer-nav {
  list-style: none;        
  margin: 0;
  padding: 0;
  display: flex;            
  gap: 2rem;               
}

.footer-nav li a {
  text-decoration: none;
  color: inherit;            /* Farbe vom Footer erben */
}

.footer-nav li a:hover {
  text-decoration: underline;
}


.star {
  position: absolute;
  color: rgba(255, 255, 255, 0.95);
  font-family: Georgia, serif;
  user-select: none;
  will-change: transform, opacity;
  filter: blur(.2px) brightness(1.5);
  pointer-events: none;  /* Sterne blockieren keine Klicks */
  z-index: 1;  /* Hinter dem Header */
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .hero-side {
    display: none;
  }
  .hero h2 {
    font-size: 1.6rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
  .hero-side {
    width: 32vmax;
    min-width: 220px;
    top: 20vh;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .accordion-wrapper {
    margin: 0 auto!important;
    max-width: 66%;
  }
  #footer {
    display: unset;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

/* PayPal Consent Banner */

#consent-banner {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9fafb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 600px;
  z-index: 10;
}

#consent-banner p {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

#consent-banner a {
  color: #0070ba; /* PayPal Blau */
  text-decoration: underline;
}

#consent-banner button {
  margin: 0.2rem;
  width: 100%;
}

#reject-consent {
  opacity: 40%;
}

/* PayPal Placeholder */

#paypal-placeholder {
  margin-top: 1.5rem;
  padding: 0;
  border: 0;
  text-align: left;
  background: #fff;
  max-width: 520px;
  transition: opacity 3s ease, transform 3s ease;
}

#paypal-placeholder p {
  font-size: 0.95rem;
  color: #555;
}

#paypal-placeholder form {
/*  display: flex;
  justify-content: left; */
}

#paypal-placeholder input[type="submit"] {
  margin: 0 auto;
}

strong {
  font-family: "ClashDisplay-Semibold";
}