$primaryColor: #67caac
$pink: #CA6785
$purple: #983553
$yellow: #F0AE48
$darkgrey: #373737
$lightgrey: #f9f9f9
$beige: #EEEBE5

// BREAKPOINTS like Bootstrap
$breakPointSM: 576px
$breakPointMD: 768px
$breakPointLG: 992px
$breakPointXL: 1200px
$breakPointXXL: 1400px

@font-face
    font-family: 'Mainfont'
    src: url('@/assets/fonts/woff2/Montserrat-Light.woff2') format("woff2")
    font-weight: normal
    font-style: normal
    font-display: swap

@font-face
    font-family: 'Mainfont-Bold'
    src: url('@/assets/fonts/woff2/Montserrat-Medium.woff2') format("woff2")
    font-weight: normal
    font-style: normal
    font-display: swap

@font-face
    font-family: 'Comfortaa'
    src: url('@/assets/fonts/woff2/Comfortaa-Light.woff2') format("woff2")
    font-weight: normal
    font-style: normal
    font-display: swap

@font-face
    font-family: 'Comfortaa-Bold'
    src: url('@/assets/fonts/woff2/Comfortaa-Bold.woff2') format("woff2")
    font-weight: normal
    font-style: normal
    font-display: swap

/*@font-face
    font-family: 'Typewriter'
    src: url('@/assets/fonts/ttf/JMH_Typewriter.woff2') format("woff2")
    font-weight: normal
    font-style: normal
    font-display: swap*/

$fontSizeRoot: 18px
$fontSizeLarge: calc(1.2rem + 2vw)
$fontSizeMedium: calc(1.2rem + .8vw)
$fontSizeNormal: 1.2rem
$fontSizeSmall: calc(.9rem + .2vw)

$loopShape: 51% 49% 52% 48% / 53% 38% 62% 47%

/* Varianten für die Shape */
$loopShape1: 51% 49% 52% 48% / 53% 38% 62% 47%  // Original  
$loopShape2: 49% 51% 48% 52% / 38% 53% 47% 62%  // Horizontal gespiegelt  
$loopShape3: 52% 48% 51% 49% / 62% 47% 53% 38%  // Vertikal gespiegelt  
$loopShape4: 48% 52% 49% 51% / 47% 62% 38% 53%  // Horizontal & vertikal gespiegelt  
$loopShape5: 50% 50% 53% 47% / 55% 40% 60% 45%  // Leichte Variation für Abwechslung  

$innerShadow: inset 0 0 15px rgba(255, 255, 255, 0.5)

@keyframes bubble-wobble
  0%, 100%
    transform: scale(1) translate(0, 0)
  25%
    transform: scale(1.05) translate(2px, -4px) 
  50%
    transform: scale(1.1) translate(4px, -1px) 
  75%
    transform: scale(1.1) translate(4px, 2px) 

@keyframes gradient-animation
  0%
    background-position: 0% 0%
  50%
    background-position: 50% 50%
  100%
    background-position: 100% 100%

@keyframes blobIn
  0%
      transform: scale(0)
      opacity: 0
  60%
      transform: scale(1.2)
      opacity: 1
  100%
      transform: scale(1)
      opacity: 1


body
  overflow-x: hidden  
  font-family: 'Mainfont', Arial
  margin: 0
  padding: 0

  .container-5
      width: 90%
      margin: auto 5%

  .container-10
      width: 80%
      margin: auto 10%

  .container-15
      width: 70%
      margin: auto 15%

  .container-20
      width: 60%
      margin: auto 20%

.fade-enter-active, .fade-leave-active
  transition: opacity 1.2s ease

.fade-enter-from, .fade-leave-to
  opacity: 0

*:focus
  outline: 1px solid transparent                       

/*.router-link-active
  position: relative
  text-decoration: none
  &::after
    content: ''
    position: absolute
    bottom: -4px
    left: -10%
    width: 110%
    height: 4px
    background: linear-gradient(to right, transparent, $pink, transparent)  
    transform: rotate(-1deg)   */


// Page Route transition

.fade-enter-active,
.fade-leave-active
  transition: opacity 1s, transform 1s

.fade-enter-from
  transform: translateY(200px)
  opacity: 0

.fade-enter-to
  transform: translateY(0)
  opacity: 1

.fade-leave-from
  transform: translateY(0)
  opacity: 1

.fade-leave-to
  transform: translateY(200px)
  opacity: 0

/* Welle oben */
.sectionWave.wave-top
    position: absolute
    left: 0
    width: 100%
    z-index: 1
    transform: scaleY(1) scaleX(-1)
    top: -2px
/* Welle unten */
.sectionWave.wave-bottom
    position: absolute
    left: 0
    width: 100%
    z-index: 1
    transform: scaleY(-1) 
    bottom: -2px


// +++++++++++++++++
// ANIME Animations ++++
// +++++++++++++++++

// Basiszustand
.anime
  opacity: 0
  transform: translateY(20px)
  transition: opacity 0.5s ease, transform 0.5s ease

// Sichtbarer Zustand
.visible
  opacity: 1
  transform: translateY(0)

// Fade-In-Animation
.anime_fadeIn.visible
  animation: fadeIn 3s ease forwards

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

// Pop-In-Animation
.anime_popIn.visible
  animation: popIn 0.5s ease forwards

@keyframes popIn
  from
    opacity: 0
    transform: scale(0.8)
  to
    opacity: 1
    transform: scale(1)