---
layout: page
permalink: '/kontakt/ok/'
---
<script src="{{ '/assets/js/kontakt.js' | relative_url }}"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container" id="section-wrapper">
    <section id="kontakt">
        <div class="center row">
            <h2 class="thin-text">Kontakt</h2>
        </div>
        <div class="row">
            <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
        </div>
        <div class="row center">
            <p class="flow-text">Deine Nachricht wurde gesendet und wird bald bearbeitet.<br>Du bekommst auch noch gleich eine Best&auml;tigungsmail.</p>
        </div>
    </section>
</div>
<style>
    .checkmark {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: block;
        stroke-width: 2;
        stroke: #fff;
        stroke-miterlimit: 10;
        margin: 5% auto;
        box-shadow: inset 0px 0px 0px #2e7d32;
        animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    }

    .checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    }

    @keyframes stroke {
        100% {
            stroke-dashoffset: 0;
        }
    }
    @keyframes scale {
        0%, 100% {
            transform: none;
        }
        50% {
            transform: scale3d(1.1, 1.1, 1);
        }
    }
    @keyframes fill {
        100% {
            box-shadow: inset 0px 0px 0px 60px #2e7d32;
        }
    }
</style>