<template>
    <div class="schoolPage">
        <HeroBox
            image="/uploads/watercolor_da8a37ce48.webp"
            :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
            overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
            overlay-alt-text="Schulmaterial"
            :overlay-width="'32%'"
            :overlay-position="{ top: '32%', right: '0' }"
            >
            <h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
            <h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
            <h3>{{ $t('pages.sectors.schools.hero.headline3') }}</h3>
        </HeroBox>


        <section class="weKnow"> 
            <div class="container"> 
                <NuxtImg
                    src="/uploads/water_dot_c2b934736e.webp"
                    provider="strapi"
                />
                <div class="textBox">
                    <h2>Und jetzt auch noch die Schulhomepage?</h2> 
                <h3>Als Schulleitung oder Lehrer stehen Sie schon jetzt unter enormem Druck?</h3>
                <p> <u>Lehrermangel</u>, 
                    steigende <u>bürokratische Aufgaben</u> und immer neue Herausforderungen rauben Zeit und Kraft. 
                    Und dann soll auch noch die Schulhomepage gepflegt werden? Nun auch noch barrierefrei? Hilfe!</p> 
                <h4>Wie wäre es, wenn Ihre Webseite so einfach zu bedienen wäre, dass Sie sich wirklich entlastet 
                    und unterstützt fühlen? </h4>
                    <p>Mit einer speziell für Schulen entwickelten, einfachen Benutzeroberfläche wird es zum Kinderspiel, 
                        <b>Termine</b>, <b>Erlebnisberichte</b> oder <b>Neuigkeiten</b> selbst zu veröffentlichen. Und das ganz ohne technische Vorkenntnisse.</p>
                    
                    <p>Und falls die Zeit trotzdem knapp ist, übernehmen wir auch das gerne für Sie. 
                    Wir pflegen Ihre Seite zuverlässig, stehen als Ansprechpartner bereit und arbeiten eng mit Ihnen 
                    und Ihrem Team zusammen, eben ganz nach Ihren Vorgaben und Bedürfnissen.</p> 
                </div>
                
            </div> 
        </section>

        <section class="accessibility">
            <NuxtImg
                provider="strapi"
                src="/uploads/watercolor_da8a37ce48.webp"
                alt=""
                class="accessibility-bg"
                sizes="100vw"
                priority
            />
            <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
            <div class="paper">
                <h2>Barrierefreiheit ist Pflicht &mdash; doch zum Glück auch unsere Stärke!</h2>
                <p>
                Schulen in Deutschland sind gesetzlich verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten, damit alle Menschen, unabhängig von Einschränkungen, gleichberechtigten Zugang zu Informationen erhalten.
                </p>
                <p>
                Wir entwickeln Ihre Schulhomepage von Beginn an nach den geltenden Richtlinien und sorgen mit einem stabilen System dafür, dass Ihre Seite auch dann barrierefrei bleibt, wenn Inhalte später von Ihnen oder dem Kollegium selbst eingepflegt werden.
                </p>
                <p>
                Dabei orientieren wir uns an:
                </p>
                <ul class="check">
                <li><strong>EU-Richtlinie 2016/2102</strong> – für barrierefreie Websites öffentlicher Stellen</li>
                <li><strong>Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)</strong> – verbindlich für Schulen in Deutschland</li>
                <li><strong>Web Content Accessibility Guidelines (WCAG) 2.1</strong> – internationaler Standard</li>
                </ul>
                <p>
                Wir nehmen Barrierefreiheit nicht nur ernst, wir machen sie praktisch und umsetzbar.</p> 
                <p> Für Sie bedeutet das konkret: 
                    <ul class="check">
                        <li><b>weniger Risiko</b></li>
                        <li><b>mehr Inklusion</b></li>
                        <li><b>bessere Kommunikation</b></li>
                    </ul>
                </p>
                <p class="pt-2"><NuxtLinkLocale class="btn" to="services-accessibility">Erfahren Sie mehr zum Thema barrierefreies Webdesign</NuxtLinkLocale></p>
            </div>
            <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
            </svg> 
            </section>



        <section class="reference">
            <div class="container-10">
                <h2>Vertrauen, das uns ehrt: Die Stadt Konstanz setzt bereits auf unsere Expertise</h2>
                <div class="reference-content">
                    <div class="reference-image">
                        <NuxtImg
                        provider="strapi"
                        src="/uploads/Image_Comp_BSK_After_b4358b0e19.png"
                        alt="Berchenschule Konstanz Webseite"
                        width="600"
                        height="400"
                        />
                    </div>
                    <div class="reference-text">
                        <p>
                        Die Berchenschule der Stadt Konstanz hat uns bereits 2024 mit der
                        <a href="https://www.digimedialoop.de/projekt/neugestaltung-schulhomepage-und-corporate-design-berchenschule" target="_blank" rel="noopener noreferrer">
                            Neugestaltung ihrer Schulhomepage
                        </a>
                        und des Corporate Designs beauftragt.</p> 
                        <p> Ein Projekt, bei dem wir passgenau auf die individuellen Bedürfnisse der Schule eingegangen sind.
                        </p>
                        <p>
                        Das Ergebnis ist eine moderne, benutzerfreundliche Webseite, die sowohl Schüler, Eltern als auch Lehrkräften den Alltag erleichtert und dadurch die Kommunikation verbessert.
                        </p>
                        <h3>Dürfen wir auch Sie entlasten?</h3>
                        <button
                            class="my-4 pinkBtn"
                            role="button"
                            aria-label="Kontaktformular öffnen"
                            @click.prevent="toggleContactBubble"
                        >
                           Kontaktieren Sie uns!
                        </button>
                    </div>
                </div>                
            </div>
        </section>

        <FAQArea
          page-link="/branchen/schulhomepage"
          headline="Fragen und Antworten zur Schulhomepage"
        />

    </div>
</template>

<script setup>

</script>

<style lang="sass">
.schoolPage
    overflow-X: hidden
    .weKnow
        position: relative
        img
            position: absolute
            top: -5%
            left: -25%
            width: 40%
            margin: 1rem 0 2rem 2rem
            z-index: 4
        .textBox
            z-index: 5
            margin-left: 15%
            
        h4
            font-family: 'Mainfont'
            line-height: 140%
            font-size: 1.3rem
          
    .accessibility
        position: relative
        padding: 5rem 0
        overflow: hidden
        
        .accessibility-bg
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            object-fit: cover
            object-position: center
            opacity: 0.15        // sehr sanft, nicht störend
            z-index: -1
            pointer-events: none
        
        .paper
            padding: 2rem 5%
            background-color: rgba(white, .8)
            margin: 4rem 10%
            transform: rotate(-1deg)
            border: 1px solid $lightgrey
            box-shadow: 2px 2px 10px 2px #EEE

            
    .reference
        margin: 5rem 0
        
        .reference-content
            display: grid
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
            gap: 2rem
            align-items: center
        
            @media (min-width: 1200px)
                grid-template-columns: 2fr 3fr
        
            .reference-image
                img
                    width: 100%
                    height: auto
        
            .reference-text
                h3
                    margin-top: 1rem
          
        
          
</style>