/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 05 2026 | 08:55:17 */
:root {
  --wave-color-pink: #fce4e7;
	--wave-color-gelb: #FFDEA0;
	--wave-color-blau: #6097BC;
}
/* DEKO ELEMENTE */
.ani-wrap  {
	position: relative;
}
.bubble-animation {
	position: absolute;
	top:0;
    z-index: -1;
}
.bubble-animation.hero {
    top: 0;
    right: 0;
    bottom: 0;
}
.bubble-animation.hero svg {
	height: auto;
	width: 100%;
	min-width: 700px;
}
.animation-right {
	right: -3.5rem;
	top:0;
}
.deko-font {
	position: absolute;
    top: 0;
	z-index: -1;
}
.deko-font svg {
	width: 100% !important;
}
.lernen {
   left: 3vw;
    max-width: 30vw;
}
.blob-container {
    position: absolute;
    top: 50%;
    right: -120px;
    width: 67vw;
    height: auto;
    z-index: -1;
    overflow: visible;
    transform: translate(0, -50%);
    min-width: 800px;
  }
 .blob-container svg {
overflow: visible;
}
  .bubble-path {
    /* Die Animation für den Flüssigkeits-Effekt */
    animation: liquid-morph 15s ease-in-out infinite alternate;
  }

  @keyframes liquid-morph {
    0% {
      /* Dein Original-Pfad */
      d: path("M0,250 C0,100 300,50 600,100 C900,150 1000,50 1000,250 C1000,450 800,500 500,450 C200,400 0,400 0,250 Z");
    }
    50% {
      /* Mittlere Phase: Kurven werden leicht verschoben für Wellenbewegung */
      d: path("M0,260 C50,120 350,20 650,120 C950,200 1000,80 1000,250 C1000,420 750,480 480,430 C180,380 -20,420 0,260 Z");
    }
    100% {
      /* Endphase: Etwas länglicher nach links gezogen */
      d: path("M-50,240 C20,80 280,70 580,80 C880,130 1000,30 1000,250 C1000,470 820,520 520,470 C220,420 20,380 -50,240 Z");
    }
  }
.wachsen {
    left: 25vw;
	top: -50px;
    max-width: 50vw;
}
.staunen {
	left: 25vw;
	top: 0;
    max-width: 50vw;
}
.pr {
	position: relative
}
.mh-200 {
	min-height: 200px;
}
.wachsen-kind img{
	position: absolute;
    right: -100px;
	bottom: 0;
    width: 15vw;
    min-width: 200px;
}
.wachsen-puzzle img{
	position: absolute;
    bottom: 0;
    left: -100px;
    top: -30%;
    width: 8vw;
    min-width: 100px;
}
 .staunen-kind img {
	position: absolute;
    left: -4vw;
    width: 15vw;
    top: -100%;
    min-width: 200px;
}
.staunen-wuerfel img {
	position: absolute;
    top: -100%;
    right: -4vw;
    width: 8vw;
    min-width: 100px;
}
.pinsel {
	position: absolute;
    right: 0;
    top: 0;
	max-width: 15vw;
}
.lernen-content {
	color: var(--darkblue);
	font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
	font-weight: 400;
	line-height: normal;
}

/* DEKO ENDE */

.wave-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wave-container {
  width: 110vw;
	margin: 0 -40px;
  height: 200px; /* Deine gewünschte Wellenhöhe */
  line-height: 0;
  overflow: hidden;
}

.wave-section.pink .section-content {
  background-color: var(--wave-color-pink);
}
.wave-section.gelb .section-content {
  background: var(--wave-color-gelb, linear-gradient(270deg, #FFDEA0 4.68%, #FCEBCB 50.05%, #FFDEA0 98.13%));
}
.wave-section.blau .section-content {
  background-color: var(--wave-color-blau);
}
.section-content {
  padding: 50px 20px;
	margin: -1px -40px;
}
.wave-section.pink .wave-path {
  fill: var(--wave-color-pink);
}
.wave-section.gelb .wave-path {
  fill: var(--wave-color-gelb, linear-gradient(270deg, #FFDEA0 4.68%, #FCEBCB 50.05%, #FFDEA0 98.13%));
}
.wave-section.blau .wave-path {
  fill: var(--wave-color-blau);
}
.wave-container svg {
  width: 120vw;
  height: 100%;
}

.wave-path {
	-webkit-animation: organic-flow 12s ease-in-out infinite;
  animation: organic-flow 12s ease-in-out infinite;
}

/* Die untere Welle braucht eine leicht andere Animation oder einen Versatz, 
   damit es nicht zu symmetrisch aussieht */
.bottom-wave .wave-path {
  animation-delay: -2s;
}

@keyframes organic-flow {
  0%, 100% {
    d: path("M0,150 C150,120 350,110 450,160 C550,210 800,80 1000,100 L1000,200 L0,200 Z");
  }
  33% {
    d: path("M0,130 C200,170 400,120 550,130 C700,140 850,160 1000,140 L1000,200 L0,200 Z");
  }
  66% {
    d: path("M0,160 C150,180 300,100 450,120 C600,140 800,180 1000,110 L1000,200 L0,200 Z");
  }
}

/* WICHTIG: Die untere Welle muss "umgedreht" animiert werden, 
   da sie den Pfad nach oben schließt. Wir nutzen hierfür einen Trick: */
body:not(.is-safari) .bottom-wave svg {
	transform: rotate(180deg);
	will-change: transform;
}


/* LERNEN */