dml_frontend/layouts/default.vue

<!-- layouts/default.vue -->
<template>
    <div>
      <ClientOnly>
        <TrackingScripts />
      </ClientOnly>
        <PageHeader />
        <ContactForm />
        <BackToTopBtn />
        <main>
          <Breadcrumbs />
          <slot />
        </main>
  <PageFooter />
    </div>
    
  </template>
  
  <script setup>

  import { useDeferredTabFocus } from '@/composables/useDeferredTabFocus'
  useDeferredTabFocus()

  import { useMainStore } from '@/stores/main'
  const mainStore = useMainStore()
  import { usePageMeta } from '~/composables/usePageMeta'
  
  usePageMeta()

  onBeforeMount(() => {
    mainStore.setDarkHeroBack(false) // Standardmäßig false
    mainStore.syncLocaleWithI18n()
  })

  </script>

<style lang="sass">
main
  margin-top: 0 //11rem
  font-family: 'Mainfont'
  min-height: 45vh
  z-index: 3
  h1
    font-family: 'Comfortaa'
    font-size: $fontSizeLarge //calc(1.2rem + 1.2vw)
    margin-top: calc(.6rem + .6vw)
    margin-bottom: calc(1.2rem + 1.2vw)
    line-height: 150%
    font-weight: normal
    @media(max-width: $breakPointSM)
      font-size: 1.5rem
      line-height: 2rem

  h2
    font-family: 'Comfortaa'
    font-size: $fontSizeMedium //calc(.9rem + 1vw)
    margin-top: calc(.6rem + .6vw)
    margin-bottom: calc(1.2rem + 1.2vw)
    line-height: 150%
    font-weight: normal
    
  h3
    font-family: 'Comfortaa'
    font-size: calc(#{$fontSizeMedium} * 0.7) //calc(.9rem + 1vw)
    margin-top: calc(.2rem + .6vw)
    margin-bottom: calc(1.2rem + 1.2vw)
    line-height: 150%
    font-weight: normal
  p
    font-size: 1.1rem
    line-height: 150%
  
  b, bold, strong, .bold
    font-family: 'Mainfont-Bold'  

  u
    text-decoration: none
    position: relative
    &::before
      content: ""
      transform: rotate(-2deg)
      border-bottom: 3px solid rgba(103,202,172,.25)
      position: absolute
      bottom: 4px
      left: 0
      width: 100%
      box-shadow: 4px 4px 2px 1px rgba(103,202,172,.25)
  a
    color: darken($primaryColor, 20%)
  .supheadlinePink, supheadlineMint
    margin-bottom: -.5rem
    font-size: clamp(1rem, 1rem + 1vw, 1.3rem)
    line-height: 1.4
  .supheadlinePink
    color: darken($pink, 10%)    
  .supheadlineMint
    color: darken($primaryColor, 5%)
  .imgRight, .imgLeft
    width: 45%
    @media(max-width: $breakPointLG)
      float: none
      width: 80%
      margin: 1rem 10%

  .imgRight
    float: right
    margin: 2rem 0 2rem 2rem    
    @media(max-width: $breakPointLG)
      float: none
      max-width: 100%

  .imgLeft
    float: left
    margin: 2rem 2rem 2rem 0
    @media(max-width: $breakPointLG)
      float: none
      max-width: 100%

  .loopShape
    border-radius: $loopShape

  .btn
    background-color: white
    border: 1px solid $darkgrey
    border-radius: 5px
    padding: 0.5rem 1rem
    font-size: 1.2rem
    text-transform: uppercase
    position: relative
    overflow: hidden
    transition: all 0.4s ease-in-out 
    z-index: 1 
    color: $darkgrey
    text-decoration: none
    display: inline-block
    text-align: center
    margin-right: 1rem
    &::before
      content: ''
      position: absolute
      top: 50%
      left: 50%
      width: 300%
      height: 300%
      background-color: rgba($primaryColor, 0.4) 
      transition: transform 0.4s ease-in-out 
      border-radius: 50%
      transform: translate(-50%, -50%) scale(0) 
      z-index: 1 
  
    span, a 
      position: relative
      z-index: 2   

    &:hover
      box-shadow: 0 0 15px rgba($primaryColor, 0.2), 0 0 25px rgba($primaryColor, 0.2)
      border: 1px solid $primaryColor
      //letter-spacing: .05rem
      transform: scale(1.02)
      background-image: linear-gradient(to top left, $primaryColor, lighten($primaryColor, 30%))
      /*&::before
        transform: translate(-50%, -50%) scale(1) */
    &.pinkBtn
      background-color: $pink
      color: white
      border: 1px solid $pink
      &:hover
        background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
    &.mintBtn
      background-color: $primaryColor
      color: white
      border: 1px solid $primaryColor
      &:hover
        background-image: linear-gradient(to top left, $primaryColor, lighten($primaryColor, 5%))
    &.whiteBtn
      background-color: white
      color: $darkgrey
      border: 1px solid transparent
      font-family: 'Mainfont-Bold'
      &:hover
        background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
        color: white
    &.readBtn
      background-color: $primaryColor
      color: white
      font-size: .9rem
      border: none
      padding: .4rem .8rem
      margin: 0 0 1rem 0

  .check
    list-style: none
    padding: 0 0 1rem 1rem

    li
        position: relative
        padding-left: 2rem
        font-size: 1rem
        margin-bottom: 1rem

        &::before
            content: "✔"
            color: $primaryColor
            font-weight: bold
            position: absolute
            font-size: 1.4rem
            left: 0
            top: 0
    
  section
    margin-bottom: 5vh
    position: relative
    &:first-of-type
      &::before
        content: ''
        width: 12vw
        height: 80%
        min-height: 400px
        max-height: 600px
        background-color: rgba($primaryColor, .7)
        border-radius: $loopShape
        position: absolute
        top: 10vh //3%
        left: -8vw
        z-index: 20
        animation: bubble-wobble 5s infinite ease alternate
        box-shadow: $innerShadow
        transition: left 0.3s
    &.beigeBG
      background-color: $beige
      min-height: 200px
  .topSpace
    padding-top: 9rem
  .container
    width: 80%
    margin: auto 10%
  &.mobile
    margin-top: 0 //20vh
</style>