@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

* {
  touch-action: manipulation; 
}

html, body, .app { width:100%; height:100%; padding:0; margin:0; scroll-behavior: smooth; }

body {
  font-family: var(--bs-font-sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  background: #0a2540; /* Fallback-Hintergrund */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
}

body { font-family: "Open Sans", Helvetica, Arial, sans-serif; letter-spacing: 0.025rem; } 
h1, .h1 { font-size: 3rem; }
p, ul { font-size: 1.25rem; }

.lenis.lenis-smooth {  scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] {  overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

a, a:hover, a:focus { text-decoration: none; }

#loadingscreen {  position: absolute;  z-index: 25000;  width: 100%;  height: 100vh;  background-color: black;   display: flex;  align-items: center;  justify-content: center; }
.loader {  width: 48px;  height: 48px;  border: 5px solid #36a9e1;  border-bottom-color: #1d71b8;  border-radius: 50%;  display: inline-block;  box-sizing: border-box;  animation: rotation 1s linear infinite; }
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


#scroll {
  position: absolute; width: 100%; height: 100%; z-index: 10000; }

.scroller p {
  position: absolute;
  top: 75%;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}

.scroller p span {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


#fixed-logo-wrapper { position: fixed; width: 100%; text-align: center; z-index: 100; }
#fixed-logo { position: fixed; }
#fixed-logo img { width: 30%; padding: 1rem;}
#fixed-headline-wrapper { position: fixed; width: 100%; text-align: center; z-index: 100; display: flex;justify-content: center;}
#fixed-headline { position: fixed; }

.spacer { width: 210px; height: 100px; margin: 0 auto;   padding: 20px 0;}
.spacer svg { fill: currentColor;  vertical-align: middle;}


/* NAV */

#main-nav { width: 100%; height: 100%; z-index: 20000; position: fixed; top: -100%; left: 0; opacity: 0.98; background: #e71d73; background: linear-gradient(180deg, rgba(231, 29, 115, 1) 0%, rgba(231, 29, 115, 1) 75%, rgba(163, 25, 91, 1) 100%); transition: top 0.3s ease-in-out;  overflow: clip;}
#main-nav.active { top: 0; }

.main-nav {
    display: flex;
    justify-content: center;
    transition: opacity 0.7s 0.3s ease-in-out, top 0.7s 0.1s ease-in-out;
    letter-spacing: 0.025rem;
    font-weight: 300 !important;
    padding-top: 2rem;
    opacity: 0;
}
#main-nav.active .main-nav { opacity: 1; top: 0%; }
.menu_button { width: 50px; height: 50px; cursor: pointer; display: block; position: fixed; top: 15px; left: 10px; z-index: 50000; background: #e71d73; border-radius: 5px; transition:.5s; }
.menu_button.active {background: none; }
.menu_button:before, .menu_button:after { transition:.5s;}
.menu_button:before { content: ''; display: block; width: 30px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -15px; transform-origin: center;}
.menu_button:after { content: ''; display: block; width: 30px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; margin: 4px 0 0 -15px; transform-origin: center;}
.menu_button.active:before { margin: -1px 0 0 -15px; transform: rotate(45deg);}
.menu_button.active:after { margin: -1px 0 0 -15px; transform: rotate(-45deg);}



.icon-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; background: #e71d73;  line-height: 1; padding: 10px 0; z-index: 15000; }
.icon { font-size: 2rem; padding: 0 0.5rem;  color: #fff;   margin: 10px 0 5px 0; display: inline-block; transition: 0.3s; }
.icon:hover, .icon:focus { text-decoration: none; color: #fff; transform: scale(1.1); }


.menu-wrapper { text-align: center; padding-bottom: 8rem; width: auto;}

.menu-item {
    font-size: 4rem;
    line-height: 4.5rem;
    text-decoration: none;
    display: block;
    color: #fff;
    transition: all .5s ease-in-out;
    position: relative;
    font-family: 'Burbank Big Condensed Black', 'sans-serif';
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 62.5;
}
.menu-item:hover, .menu-item:focus { text-decoration: none; color: rgba(255,255,255,0.7); scale: 1.1; }
.menu-signet { padding-bottom: 2rem; display: block;width: 50%;margin: 0 auto;}


@media (max-width: 767px) {
		.menu_button { top: 10px; left: 5px; transform: scale(0.8);}
		.menu_button ul { top: 55px;}
    .menu-item { font-size: 2rem; line-height: 2.5rem; }
	}


.bottom-links-wrapper { position: absolute; bottom: 0; padding-bottom: 1rem; display: flex; justify-content: center; }
.bottom-links { position: absolute; bottom: 0; padding-bottom: 2rem; justify-content: center; }
.bottom-links a { color: #fff; display: inline-flex; position: relative; padding: 0 1rem; }
.bottom-links a:hover, .bottom-links a:focus { color: #fff; }
.bottom-links a::after { content: ""; position: absolute; display: block; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #fff; transform: scaleX(0); transform-origin: top left; transition: transform 0.3s ease; }
.bottom-links a:hover::after { transform: scaleX(1); }


.menu-icon { color: #fff; transition: 0.5s; font-size: 3rem; display: inline-block; margin: 0 1rem;}
.menu-icon:hover, .menu-icon:focus { color: #fff; transform: scale(1.1); }

.footer-link { color: #fff; position: relative;}
.footer-link, .footer-link:hover, .footer-link:focus { color: #fff; text-decoration: none; }

.footer-link::after { content: ""; position: absolute; display: block; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #fff; transform: scaleX(0); transform-origin: top left; transition: transform 0.3s ease; }
.footer-link:hover::after { transform: scaleX(1); }





/* CONTENT */

.section { z-index: 10; }
#top-spacer { min-height: 150svh; }
#s-intro { min-height: 25svh; padding: 0 0 5rem 0; scroll-margin-top: 24rem; }
#s-angebot { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 1); color: #2d2e83; padding: 4rem 0 6rem 0; }
#s-kinder { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 0); color: #fff; padding: 4rem 0 6rem 0; }
#s-erwachsene { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 1); color: #2d2e83; padding: 4rem 0 6rem 0; }
#s-privatkurse { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 0); color: #fff; padding: 4rem 0 6rem 0; }
#s-aquafitness { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 1); color: #2d2e83; padding: 4rem 0 6rem 0; }
#s-kalender { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 0); color: #fff; padding: 4rem 0 6rem 0; }
#s-philosophie { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 1); color: #2d2e83; padding: 4rem 0 6rem 0; }
#s-badges { min-height: 25svh; scroll-margin-top: 6rem; background: rgba(255,255,255, 0); color: #fff; padding: 4rem 0 6rem 0; }
#s-daniela { min-height: 25svh; scroll-margin-top: 12rem; background: rgba(255,255,255, 1); color: #2d2e83; padding: 4rem 0 6rem 0; }
#s-bigpicture { min-height: 25svh;  }
#s-final { height: 5svh; background: #e71d73; background: linear-gradient(180deg, rgba(231, 29, 115, 1) 0%, rgba(231, 29, 115, 1) 75%, rgba(163, 25, 91, 1) 100%); }


#footer { padding: 10rem 0 0 0; display: grid; color: #fff; position: relative; overflow: clip; }
.footer-signet { width: 50%; }

.kachel { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 1em;  text-align: center; padding: 1rem;}
.kachel-wrapper { position: relative; margin-bottom: 1.5rem;}
.kachel-wrapper > a:hover > .kachel:after, .kachel-wrapper > a:focus > .kachel:after  { transform: scale(0.9); }
.kachel-wrapper > a:hover p, .kachel-wrapper > a:focus > p  { transform: scale(1.1); }
.kachel p {  z-index: 2; transition: 0.3s; }
.kachel:after{ position:absolute;  width:100%; height:100%;  left:0; top:0; content: url('../img/magischeschwimmschule-sola-bg.svg'); opacity:0.4; padding: 1rem; transition: 0.3s; }
.kachel-kids { background: #8bc7f0; }
.kachel-kids p { color: #2b447d; }
.kachel-erwachsene { background: #5688c6; }
.kachel-erwachsene p { color: #fff; }
.kachel-privatkurse { background: #4470b4; }
.kachel-privatkurse p { color: #8bc7f0; }
.kachel-aquafitness { background: #2b447d; }
.kachel-aquafitness p { color: #5688c6; }

.terminliste { list-style-type: none; padding: 1rem 0 3rem 0; }
.terminliste li a { margin: 0.5rem; padding:0; color: #fff; font-size: 2rem; transition: 0.3s; display: inline-block; }
.terminliste li a:hover, .terminliste li a:focus { transform: scale(1.2); }


/* GOOGLE KALENDER */

.calendar-wrapper {
    max-width: 1000px;  /* optionales Breitenlimit */
    margin: 0 auto;
  }
  .calendar-wrapper iframe {
    width: 100%;
    height: clamp(520px, 80vh, 900px); /* mobil bis desktop angenehm lesbar */
    border: 0;
    background: #fff;
  }

/* IMAGES */
.sola-badge { margin: 0 auto; width: 75%; padding: 0 0 4rem 0; }
.portrait { margin: 0 auto; width: 75%; padding: 0 0 4rem 0; }


/* BUTTONS */
.button-container { position: relative; font-size: 3rem; padding: 2rem 0 4rem 0;}
.button-link { font-size: 3rem; font-family: 'Burbank Big Condensed Black'; position: relative; display: inline-block; padding: 0rem 2rem; border-radius: 1rem; vertical-align: middle; text-decoration: none; color: #fff;  -webkit-transition: all 1s; transition: all 1s; background: #e71d73;}
.button-link:hover, .button-link:focus { background: #a3195b; transform: scale(1.2); }






/* TYPO */

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {  margin-top: 0;  margin-bottom: 0.5rem; font-weight: 400; line-height: 1.2; }

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  /*! margin-bottom: 1rem; */
  /*! white-space: nowrap; */
}

.philosophie-hl { text-align: left; text-transform: uppercase;  }
.philosophie-nr { text-align: right; }
.philosophie-text { }
.burbank { font-family: 'Burbank Big Condensed Black'; }
.mega {  line-height: 1; font-size: 1.25rem; }
.giga { font-size: 2rem; line-height: 0.8; }
.tera { font-size: 3.5rem; line-height: 0.8; }
.mini { font-size: 0.75em; }
.text-center-right { text-align: center; }
.text-center-left { text-align: center; }


/* SCROLLBAR MOBILE */
#scrollbar { position:fixed; right:2px; height:50px; width:6px; background:#000; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.6); z-index:90; border-radius:3px; }
.skrollr-desktop #scrollbar {display:none;}

.skrollable { z-index:90; }
/* .skrollr-mobile .skrollable { position:absolute; } */
.skrollable .skrollable { /*! position:absolute; */ }
.skrollable .skrollable .skrollable { position:static; }



/* --- WATER BACKGROUND --- */
#water-bg {
  position: fixed;
  inset: 0;
  z-index: -100;           /* hinter dem Content */
  pointer-events: none; /* Klicks an Content durchlassen */
  overflow: hidden;     /* Blasen bleiben im Rahmen */
}

/* --- Wasserfläche --- */
.water {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #7debff 0%, #2581c4 75%, #062264 100%);
}

/* --- Wellen (aus letzter Version: Linien) --- */
.water-overlay {
  --tileW: 500px;   /* Breite der Kachel */
  --tileH: 50px;    /* Höhe der Kachel */
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 35%; /* unterhalb oberer Rand */
  background-size: var(--tileW) var(--tileH);
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="50" viewBox="0 0 100 50" preserveAspectRatio="none">\
  <path d="M0,25 Q25,0 50,25 T100,25" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.25"/>\
</svg>');
  animation: wave 8s linear infinite;
  will-change: background-position;
}

.water-overlay:nth-child(2) {
  --tileW: 400px;   /* eigene Breite */
  --tileH: 50px;
  background-size: var(--tileW) var(--tileH);
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="50" viewBox="0 0 100 50" preserveAspectRatio="none">\
  <path d="M0,25 Q25,0 50,25 T100,25" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.16"/>\
</svg>');
  /* Position etwas tiefer als Welle 1 */
  background-position-y: 36%;
  animation-duration: 10s;
  animation-delay: -2s;
  filter: blur(0.2px);
}

.water-overlay:nth-child(3) {
  --tileW: 520px;   /* optional: leicht andere Länge für Parallax-Tiefe */
  --tileH: 60px;    /* 50px * 1.1 = 55px */
  background-size: var(--tileW) var(--tileH);
  /* Amplitude x1.1: viewBox-Höhe 55, Mittelachse bei 27.5, Spitze bei 0 */
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="55" viewBox="0 0 100 55" preserveAspectRatio="none">\
  <path d="M0,27.5 Q25,0 50,27.5 T100,27.5" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.22"/>\
</svg>');
  animation-duration: 12s;
  animation-delay: -4s;
  /* optional minimaler Blur für Distanzwirkung */
  filter: blur(0.15px);
}

@keyframes wave {
  from { background-position-x: 0; }
  to   { background-position-x: var(--tileW); }
}

/* --- Blasen --- */
.bubbles {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  bottom: -5vh;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  animation-name: bubbleRise, bubbleDrift;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes bubbleRise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translate3d(0, -120vh, 0) scale(1); opacity: 0; }
}

@keyframes bubbleDrift {
  0%   { left: var(--x); }
  50%  { left: calc(var(--x) + var(--drift)); }
  100% { left: var(--x); }
}




/* HELPER CLASSES */

.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.h-100 { height: 100% !important; }
.vh-100 { height: 100vh; }
.vh-125 { height: 125vh; }
.vh-150 { height: 150vh; }
.vh-200 { height: 200vh; }
.vh-250 { height: 250vh; }
.vh-300 { height: 300vh; }
.vh-350 { height: 350vh; }
.vh-375 { height: 375vh; }
.vh-500 { height: 500vh; }

.hidden { display: none!important; }
.blau0 { color: #C5FCFC; }
.blau1 { color: #36a9e1; }
.blau2 { color: #2581c4; }
.blau3 { color: #1d71b8; }
.blau4 { color: #2d2e83; }
.blau5 { color: #062264; }

.text-center { text-align: center; }
.text-left { text-align: left; }

.col-count { column-count: 1; column-gap: 5%; text-align: left; }


.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}


/* LAYOUTANPASSUNGEN RESPONSIVE */

@media (min-width: 576px) {
 #fixed-logo img { width: 30%;  }
  
  .icon-wrapper {  top: 30%; right: 10px; left: auto; bottom: auto; flex-direction: column; width: 50px; min-height: 0; border-radius: 5px;  text-align: center; padding: 0.5rem;}
  .icon { margin: 0; padding: 0;   }

}

@media (min-width: 768px) {
  .mega { font-size: 2rem; }
  .giga { font-size: 3rem; }
  .tera { font-size: 4rem; }
  #fixed-logo img { width: 25%; padding: 1.25rem; }
.footer-signet { width: 50%; }

.philosophie-hl { text-align: right;  }
.philosophie-nr { text-align: center; }
.philosophie-text { }
    
.text-center-right { text-align: right; }
.text-center-left { text-align: left; }
    .col-count { column-count: 2;  }

}

@media (min-width: 992px) {
  .mega { font-size: 2rem; }
  .giga { font-size: 3rem; }
  .tera { font-size: 5rem; }
  #fixed-logo img { width: 20%; padding: 1.5rem;  }
.footer-signet { width: 40%; }

 }

@media (min-width: 1200px) {
  .mega { font-size: 2.25rem; }
  .giga { font-size: 5rem; }
  .tera { font-size: 7rem; }
    #fixed-logo img { width: 20%; padding: 1.75rem; }
.footer-signet { width: 30%; }

}

@media (min-width: 1400px) {
  #fixed-logo img { width: 20%; padding: 2rem; }
}


@media (max-width: 575px) {
.vh-100, .vh-125, .vh-150, .vh-200, .vh-250, .vh-300, .vh-350, .vh-375, .vh-500 { height: 100svh; }
    #scrollbar { display: none; }
}