/* Kontaktformular.
   ------------------------------------------------------------------
   Alle Werte stammen aus dem Original (Wix' Formular-Komponenten).
   Der Versand laeuft ueber FormSubmit.co, das Aussehen bleibt unveraendert.

   Farbbezuege:
     --color_11 = 245,245,245   Feldflaeche
     --color_36 = 245,245,245   Feldflaeche bei Fokus, Schrift der Schaltflaeche
     --color_37 =  30, 30, 30   Beschriftung, Text und Unterlinie
     --color_40 =  86, 86, 86   Platzhaltertext
     --color_15 =  30, 30, 30   Rahmen des Kaestchens
*/

/* Das Formular ist im Original ein Raster. Das ist nicht nur Formsache:
   "Email" und "Fon" liegen nebeneinander in derselben Zeile. Ohne das
   Raster wuerde "Fon" darunter rutschen und alles Weitere verschieben. */

.form {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: min-content;
    width: 100%;
}

/* ---------- Textfeld und mehrzeiliges Feld ---------- */

.field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Die Beschriftung nutzt zwar font_8 (15px/1.88em), Wix setzt die
   Zeilenhoehe aber auf die Schriftgroesse zurueck — daraus ergeben sich
   genau 15px Hoehe. Ohne das waere jedes Feld 13px zu hoch. */
.field__label {
    font: var(--font_8);
    line-height: 15px;
    color: rgb(var(--color_37));
    margin-bottom: 9px;
    padding: 0px 20px 0px 0px;
    display: block;
}

/* Der Eingabekasten hat eine feste Hoehe; das Feld darin darf darueber
   hinausragen, genau wie im Original. */
.field__box {
    height: var(--eingabe-hoehe, 26px);
    display: block;
}

.field__input,
.field__textarea {
    font: var(--font_8);
    color: rgb(var(--color_37));
    background-color: rgb(var(--color_11));
    border: 0px solid rgb(var(--color_37));
    border-bottom-width: 1px;
    border-radius: 0px;
    padding: 3px 3px 3px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.5s ease 0s, border 0.5s ease 0s, color 0.5s ease 0s;
}

.field__input {
    height: auto;
    line-height: 1.88em;
}

.field__textarea {
    height: var(--eingabe-hoehe, 126px);
    padding: 3px 10px 3px 16px;
    line-height: 1.88em;
    resize: none;
    display: block;
}

.field__input::placeholder,
.field__textarea::placeholder {
    color: rgb(var(--color_40));
}

/* Bei Fokus verdoppelt Wix die Unterlinie und hellt die Flaeche auf. */
.field__input:focus,
.field__textarea:focus {
    outline: none;
    background-color: rgb(var(--color_36));
    border-bottom-width: 2px;
}

/* ---------- Kaestchen ---------- */

.check {
    display: flex;
    align-items: flex-start;
    font: var(--font_8);
    color: rgb(var(--color_37));
    cursor: pointer;
}

.check__input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    background-color: rgb(var(--color_11));
    border: 1px solid rgb(var(--color_15));
    border-radius: 0;
    cursor: pointer;
    position: relative;
}

.check__input:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 10px;
    height: 6px;
    border-left: 2px solid rgb(var(--color_15));
    border-bottom: 2px solid rgb(var(--color_15));
    transform: rotate(-45deg);
}

.check__label {
    margin-inline-start: 10px;
    line-height: 18px;
}

.check__label a {
    color: inherit;
}

/* ---------- Absenden ---------- */

.submit {
    font: var(--font_9);
    color: rgb(var(--color_36));
    background-color: rgba(135, 133, 117, 0.53);
    border: 0px solid rgb(var(--color_15));
    border-radius: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.2s ease, visibility 0s;
}

.submit:hover {
    background-color: rgba(135, 133, 117, 0.53);
}

/* Bestaetigungstext. Erscheint erst nach dem Absenden, deshalb im
   Ausgangszustand ausgeblendet — im Original macht das JavaScript. */
.form__danke {
    display: none;
}

.form__danke.is-visible {
    display: block;
}

/* Falle fuer Spam-Programme. Fuer Menschen unsichtbar, FormSubmit verwirft
   Einsendungen, bei denen sie ausgefuellt ist. */
.honey {
    display: none !important;
}

/* ---------- Karte ----------
   Im Original eine eingebettete Google-Karte ueber die volle Breite. */

.karte {
    width: 100%;
    height: var(--karte-hoehe, 470px);
    margin: var(--mt, 0px) 0 var(--mb, 0px);
    position: relative;
}

.karte iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}