<!-- pages/index.vue -->
<template>
    <div id="page">
        <header></header>
        <main>
            <div class="heroBox">
                <div class="textBox">
                    <h1>Reflexionszeit</h1>
                    <h2>für innere Klarheit</h2>
                    <h3>Ich helfe Dir, Deinen persönlichen Flow wiederzufinden</h3>
                    <p>Im Beruf, im Leben, in Dir selbst.</p>
                    <p>Lass uns ein Stück Weg zusammen gehen!</p>
                </div>
                <div class="imageBox">
                    <img src="~/assets/images/Sabrina.webp" alt="Sabrina Hennrich" />
                </div>
                
            </div>
            <div class="whatIdo sectionStyle">
                <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    viewBox="439 1148 424 402" 
                    class="shape blue"
                    role="img"
                    aria-hidden="true"
                    >
                    <path 
                        class="shape-fill"
                        d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
                        fill-opacity="1"
                    />
                </svg>
                <h2>Was ich tue</h2>
                <p><b>Ich biete Dir einen mentalen Raum, in dem Du wieder spürst, wer Du bist.</b> </p><p>
Denn ich nehme Menschen sehr genau wahr. Nicht nur das was sie sagen, sondern vor allem auch das, was sie nicht sagen. Ich spüre Stimmungen, innere Spannungen und emotionale Blockaden, oft bevor sie selbst sie greifen können.
Das ist keine Methode. Es ist meine Art, Menschen zu begegnen: tief, ehrlich und empathisch. 
Ich sehe Zusammenhänge, wo andere sich wundern. Ich höre, was hinter den Worten mitschwingt und kann es für sie in Worte fassen. Klar. Ruhig. Ohne Urteil.
Das ist der Raum, den ich halte: ein Raum, in dem du dich wieder spüren kannst. Ein Raum, in dem du beginnst zu verstehen, was dich innerlich blockiert. Nicht durch Analyse, sondern durch Verbindung. Nicht durch Druck, sondern durch echte Resonanz.</p>
            </div>
            <div class="becomeArea">
                <div class="sectionStyle" style="max-width:60%;">
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        viewBox="439 1148 424 402" 
                        class="shape salbei"
                        role="img"
                        aria-hidden="true"
                        >
                        <path 
                            class="shape-fill"
                            d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
                            fill-opacity="1"
                        />
                    </svg>
                    <h2>Was Du von mir bekommst</h2>
                    <p>
                        <ul>
                            <li><b>Klarheitssessions:</b> Intensive 90-Minuten-Gespräche, online oder persönlich.</li>
                            <li><b>Begleitung:</b> 4 Wochen stille Begleitung mit Impulsen und Austausch.</li>
                            <li><b>Spaziergänge & Gespräche:</b> In der Natur Klarheit finden, den Kopf frei bekommen.</li>
                        </ul>
                    </p>
                </div>
                <div class="sectionStyle" style="margin-left: 15vw; margin-top: 3rem;max-width:55%;">
                    <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    viewBox="439 1148 424 402" 
                    class="shape gold"
                    role="img"
                    aria-hidden="true"
                    >
                    <path 
                        class="shape-fill"
                        d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
                        fill-opacity="1"
                    />
                </svg>
                    <h2>Was Du nicht bekommst</h2>
                    <p>
                        <ul>
                            <li><b>Keine Pseudo-Coaching-Methoden:</b></li>
                            <li><b>Kein Leistungsdruck oder Optimierungszwang:</b></li>
                            <li><b>Keine schnellen „Rezepte“:</b></li>
                            <li><b>Nur Raum für Dich – in Deinem Tempo:</b></li>
                        </ul>

                    </p>
                </div>
            </div>
            <div class="costBox">
                <div class="sectionStyle">
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        viewBox="439 1148 424 402" 
                        class="shape lavender"
                        role="img"
                        aria-hidden="true"
                        >
                        <path 
                            class="shape-fill"
                            d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
                            fill-opacity="1"
                        />
                    </svg>
                    <h2>Dein Energieausgleich, um zu Dir selbst zu finden</h2>
                    <p>Ich arbeite auf Spendenbasis. Du gibst, was es Dir wert ist. </p>
                    <p class="hint"> (Als Orientierung für Dich: Mein regulärer Stundensatz liegt bei 95 €/h)</p>
                </div>
            </div>
        </main>
        <footer>
            <div>
                <h3>Kontakt</h3>
                <p>Sabrina Hennrich</p>
                <p>Rausch 10</p>
                <p>82211 Herrsching am Ammersee</p>
                <p>Telefon: 0177 / 83 88 553</p>
            </div>
            <div></div>
            <div></div>
        </footer>
    </div>
    
  </template>
  
  <script setup>
  useHead({
  title: 'Sabrina Flow – Zurück in Deinen natürlichen Zustand',
  meta: [
    {
      name: 'description',
      content: 'Ich helfe dir, Deinen inneren Flow wiederzufinden – mit Klarheit, Tiefe und echtem Raum für Dich.'
    }
  ]
})
  </script>
  
<style lang="sass">
@import '~/assets/styles/main.sass'

body
    margin: 0
    padding: 0
    width: 100%
    overflow-x: hidden
    
#page
    margin: 0
    max-width: 100%
    header
        background-image: url('~/assets/images/pathcorner.webp')
        background-size: 80% auto
        background-repeat: no-repeat
        background-position: right top
        width: 100%
        min-height: 40vw
        z-index: 1
        &::before
            content: ''
            position: absolute
            top: 0
            left: -25%
            width: 50%
            aspect-ratio: 1 / 1
            background-image: url('~/assets/images/Mandala.webp')
            background-size: cover
            background-repeat: no-repeat
            @media (max-width: $breakPointPad)
                top: 2rem
                width: 80%
                left: -40%
        &::after
            content: ''
            position: absolute
            top: 35%
            right: -15%
            width: 60%
            max-width: 600px
            aspect-ratio: 1 / 1
            background-image: url('~/assets/images/spirale.webp')
            background-size: cover
            background-repeat: no-repeat
            z-index: 0
            @media (max-width: $breakPointPad)
                top: 20%
                width: 80%
                right: -50%
    main
        z-index: 2
        margin-top: -35vw
        max-width: 100%
        
        .heroBox
            display: grid
            grid-template-columns: 1fr 1fr
            gap: 2rem
            width: 80%
            margin: 0 10%
            align-items: start
        
            .textBox
                background-color: rgba(255, 255, 255, 0.8)
                padding: 2rem 6vw
                border-radius: 1rem
                margin-top: 20%
                z-index: 2
        
                h1
                    color: $darkblue
            
                h2
                    margin: .5rem auto 2rem auto
            
                h3
                    font-family: $boldFont
                    font-size: clamp(1.3rem, .9rem + 2vw, 1.5rem)
                    color: $terra
            
                p
                    font-size: clamp(1.2rem, .7rem + 1vw, 1.3rem)
                    color: $terra
                    margin: .5rem 0
        
            .imageBox
                display: flex
                justify-content: right
                align-items: center
                z-index: 2

                img
                    width: 100%
                    max-width: 400px
                @media (max-width: $breakPointPad)
                    margin-bottom: -4rem
        
            // Mobile-Ansicht: eine Spalte
            @media (max-width: $breakPointPad)
                grid-template-columns: 1fr
                .textBox,
                .imageBox
                    max-width: 100%

        .sectionStyle  
            position: relative
            width: 65%
            margin: 8rem 10% 1rem 10%
            z-index: 2
            background-color: rgba(255, 255, 255, 0.8)
            border-radius: 15%
            padding: 1rem 2rem
            @media (max-width: $breakPointPad)
                width: 80%
                margin: 8rem 5vw 1rem 5vw
            .shape
                position: absolute
                top: -.5rem
                left: -.5rem
                width: 12rem
                aspect-ratio: 1 / 1
                z-index: 1
              
                &.blue 
                    .shape-fill
                        fill: $lightBlue
                
                &.salbei 
                    .shape-fill
                        fill: $salbeiLight
                
                &.gold 
                    .shape-fill
                        fill: $lightGold
                
                &.lavender 
                    .shape-fill
                        fill: $lightLavender
              

            h2, p, li
                z-index: 2
                position: relative
                color: $terra
            h2
                font-size: 180%
                z-index: 2
            p
                padding: 0 0 0 4vw
                font-size: 1.2rem
                &.hint
                    font-size: 1rem
                    margin-top: -1rem
                    margin-left: 3rem
            li
                font-size: 1.1rem
                margin: 0.5rem 0
                
        .becomeArea
            position: relative
            background-image: url('~/assets/images/waveFlow.webp')
            background-size: auto 100%
            background-repeat: no-repeat
            background-position: left bottom
            width: 100%
            padding: 1rem 0 25vw 15vw
            margin: -15vh 0 0 0
            @media (max-width: $breakPointPad)
                background-size: 100% auto

        .costBox
            margin: -10vh 0 -10vw 0

    footer
        display: grid
        align-items: end
        grid-template-columns: repeat(3, 1fr)
        gap: 2rem
        padding: 2rem 10%
        background-image: url('~/assets/images/footerWave.webp')
        background-size: 100% auto
        background-repeat: no-repeat
        background-position: right top
        width: 100%
        min-height: 20rem
        z-index: 1
        margin: 10rem 0 0 0
        position: relative
    
        div
            display: flex
            flex-direction: column
            justify-content: flex-end // Inhalt im div nach unten
            
            padding: 1rem 1rem 0 1rem
            margin: 0

            h3, p
                padding: 0 0 .2rem 0
                margin: 0
                line-height: 1.4

            h3
                color: $terra
                font-size: 1rem
                text-transform: uppercase
                font-family: $font-Header
                margin-bottom: .5rem
            p
                font-size: 1.1rem
                color: black
    
        @media (max-width: $breakPointPad)
            grid-template-columns: 1fr
            background-position: left bottom
            background-size: 150% auto
        
        
        
        
</style>
  