<layout src="main"/>

<section>

<h1>Kontakt</h1>


<form action="/kontakt" method="post">

    <!-- Feld ist für Bots gedacht – normaler User sieht es nicht -->
    <div style="position: absolute; left: -10000px; top: auto;" aria-hidden="true">
        <label for="website">Ihre Website:</label>
        <input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
    </div>


    <label for="name">Name:</label>
    <input type="text" name="name" id="name">

    <label for="email">E-Mail:</label>
    <input type="email" name="email" id="email">

    <label for="subject">Betreff:</label>
    <select name="subject" id="subject">
        <option value="1">Anfrage</option>
        <option value="2">Beschwerde</option>
        <option value="3">Anregung</option>
        <option value="4">Sonstiges</option>
    </select>

    <label for="message">Nachricht:</label>
    <textarea name="message" id="message"></textarea>


    <input type="submit" value="Senden">

</form>

</section>

<x-counter count="5"/>

<x-search/>

<style>
    div.box {
        background: red;

    }

    div.outer {
        --outer-radius: 24px;
        --padding: 8px;
        --inner-radius: calc(var(--outer-radius) - var(--padding));

        border-radius: var(--outer-radius);
        padding: var(--padding);

        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        box-sizing: border-box;

    }

    .inner {
        border-radius: var(--inner-radius);
        --padding: 1rem;
        padding:inherit;
    }
</style>

<div class="box outer" style="background: grey;">
    Testbox
</div>

