<layout src="main"/>

<section>
    <form style="width: 500px" action="/newsletter/register" method="post">
        <input type="email" name="email" placeholder="Email" />
        <input type="checkbox" name="consens" id="consens"/>
        <label for="consens">Ich stimme den Nutzungsbedingungen zu
        (<a href="/datenschutz" target="_blank">Datenschutz</a>)
        </label>
        <button type="submit">Anmelden</button>
    </form>
</section>




<section>
<h1>Impressum!</h1>
<p>Das ist deine Seite</p>

    <a href="{{ url('datenschutz') }}">Datenschutz</a>

    <hr>

    {{ imageslot('slot1') }}
</section>





<style>

    .image-fullwidth {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
        align-items: center;
        justify-content: center;

        &>div.overlay {
            position: absolute;
            z-index: 2;
            text-align: center;

            justify-self: center;
            align-self: anchor-center;
        }
    }


    picture {
        display: flex;
        width: 100%;

        &>img {
            scale: 1.1;
            aspect-ratio: 21/9;
            object-fit: cover;
            width: 100%;
        }
    }

</style>

<div class="image-fullwidth">
<picture>
    <img src="https://localhost/images/AN1N9E1PAKFRBV1M_2f36ee4cde5b43e02c118f4b21e5a4904d0c13597b5c2f1127097b808080622d_original.jpg"/>
</picture>
<div class="overlay">
    <p>The Overlay.</p>
</div>


</div>

<style>
    @keyframes parallax-slow {
        from { transform: translateY(0); }
        to { transform: translateY(-25vh); }
    }

    @keyframes parallax-medium {
        from { transform: translateY(0); }
        to { transform: translateY(-30vh); }
    }


    /* Basis-Setup */
    .overlay-section {
        position: relative;
        height: min(100vw, 100vh);
        overflow: hidden;
    }

    /* Picture Styling */
    .background-picture {
        position: absolute;
        top: 0;
        left: 0;

        right: 0;
        bottom: 0;
        /*width: 100%;
        height: 100%;*/
        z-index: 1;

        animation: parallax-slow linear;
        animation-timeline: scroll(root);
    }

    .background-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 100%) 70%, rgba(0, 0, 0, 0) 95%);
    }

    /* Video Element Styling */
    .background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        animation: parallax-medium linear;
        animation-timeline: scroll(root);
    }

    /* Video Styling */
    .background-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;

        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 100%) 50%, rgba(0, 0, 0, 0) 95%);

        &:hover {
            mask-image: none;
        }
    }

    /* Overlay Positioning */
    .overlay-bottom-right {
        position: absolute;
        bottom: 40px;
        right: 40px;
        z-index: 10;
    }

    .overlay-top-left {
        position: absolute;
        /*top: 40px;
        left: 40px;*/
        inset: 0;
        padding: var(--content-padding);

        z-index: 10;
    }
</style>

<p>Test</p>


<div class="overlay-section">

    <picture class="background-picture">
        <!--<source media="(max-width: 768px)" srcset="mobile.jpg">
        <source media="(max-width: 1200px)" srcset="tablet.jpg">-->
        <img src="https://localhost/images/AN1N9E1PAKFRBV1M_2f36ee4cde5b43e02c118f4b21e5a4904d0c13597b5c2f1127097b808080622d_original.jpg" alt="Background">
    </picture>

    <div class="overlay-top-left">
        <h3>Überschrift</h3>
        <p>Overlay Text.</p>
    </div>

</div>

<section>
    <h2>Hallo Welt</h2>
    <p>Hier steht ein bisschen Text.</p>
</section>


<div class="overlay-section">
    <div class="background-video">
        <video autoplay muted loop playsinline>
            <source src="https://localhost/videos/video1.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
        </video>
    </div>
    <div class="overlay-top-left">
        <p>Overlay Text.</p>
    </div>
</div>

<section id="services">
    <h2>Unsere Services</h2>
    <p>Wir bieten eine Vielzahl von Dienstleistungen an, die darauf ausgerichtet sind, Ihr Unternehmen zum Erfolg zu führen.</p>
    <div class="grid">
        <div class="card">
            <h3>Webentwicklung</h3>
            <p>Moderne, responsive Websites, die auf allen Geräten perfekt funktionieren.</p>
        </div>
        <div class="card card--success">
            <header>
                <h3>App Development</h3>
                <span role="status">Done</span>
            </header>

            <p>Native und Cross-Platform Apps für iOS und Android.</p>
        </div>
        <div class="card">
            <h3>UI/UX Design</h3>
            <p>Benutzerfreundliche Interfaces, die Ihre Nutzer begeistern.</p>
        </div>
        <div class="card">
            <h3>Consulting</h3>
            <p>Strategische Beratung für Ihre digitale Transformation.</p>
        </div>
    </div>
</section>
