/* ==========================================================
   Kontaktformular radtouren-opr.de
   Wird nur auf der Kontaktseite geladen.
   ========================================================== */

.contact-page {
    width: min(1250px, calc(100% - 32px));
}

.contact-layout {
    max-width: 1250px;
    margin: 0 auto;
}

.contact-intro {
    max-width: 900px;
    margin-bottom: 20px;
}

.contact-form,
.contact-success-card,
.contact-message {
    width: 100%;
    background: transparent;
    border: 3px solid transparent;
    border-radius: 18px;
    background-image:
        linear-gradient(rgba(204,255,204,0.25), rgba(204,255,204,0.25)),
        linear-gradient(135deg, #003333 0%, #99ff99 45%, #005f5f 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 8px 24px rgba(0, 51, 51, 0.12);
}

.contact-form {
    padding: clamp(18px, 3vw, 34px);
}

.contact-grid {
    display: grid;
    gap: 18px;
}

.contact-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.captcha-row {
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    align-items: end;
}

.contact-field {
    margin-bottom: 18px;
}

.contact-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 800;
    color: #003333;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    color: #001111;
    caret-color: #003333;
    font: inherit;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 14px;
    background-image:
        linear-gradient(rgba(204,255,204,0.18), rgba(204,255,204,0.18)),
        linear-gradient(135deg, #003333 0%, #99ff99 45%, #005f5f 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    outline: none;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #5c8585;
}

.contact-field input:focus,
.contact-field textarea:focus {
    box-shadow: 0 0 0 4px rgba(0, 95, 95, 0.18);
}

.contact-field textarea {
    min-height: 230px;
    resize: vertical;
}

.captcha-field input {
    max-width: 180px;
}

.required-note {
    font-size: 0.95rem;
    padding-bottom: 14px;
}

.contact-privacy {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 6px 0 22px;
}

.contact-privacy input {
    width: 21px;
    height: 21px;
    margin-top: 3px;
    accent-color: #003333;
}

.contact-privacy label {
    line-height: 1.5;
}

.contact-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 24px 10px 12px;
    border: 2px solid #003333;
    border-radius: 999px;
    background: linear-gradient(180deg, #006060 0%, #003333 100%);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(0, 51, 51, 0.22);
}

.contact-submit:hover,
.contact-submit:focus {
    background: linear-gradient(180deg, #007070 0%, #003333 100%);
    transform: translateY(-1px);
}

.button-wheel {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 3px solid #ccffcc;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ccffcc 0 3px, transparent 4px),
        conic-gradient(from 0deg, transparent 0 10deg, rgba(204,255,204,0.9) 10deg 13deg, transparent 13deg 45deg, rgba(204,255,204,0.9) 45deg 48deg, transparent 48deg 90deg, rgba(204,255,204,0.9) 90deg 93deg, transparent 93deg 135deg, rgba(204,255,204,0.9) 135deg 138deg, transparent 138deg 180deg, rgba(204,255,204,0.9) 180deg 183deg, transparent 183deg 225deg, rgba(204,255,204,0.9) 225deg 228deg, transparent 228deg 270deg, rgba(204,255,204,0.9) 270deg 273deg, transparent 273deg 315deg, rgba(204,255,204,0.9) 315deg 318deg, transparent 318deg 360deg);
}

.contact-message {
    padding: 16px 18px;
    margin: 18px 0;
}

.contact-message-error {
    background-image:
        linear-gradient(rgba(255,243,205,0.86), rgba(255,243,205,0.86)),
        linear-gradient(135deg, #003333 0%, #99ff99 45%, #005f5f 100%);
}

.contact-message ul {
    margin-bottom: 0;
}

.contact-success-card {
    padding: clamp(22px, 4vw, 42px);
}

.contact-link-button {
    color: #ffffff;
}

.website-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 760px) {
    .contact-page {
        width: min(100% - 22px, 1250px);
    }

    .contact-form {
        padding: 16px;
    }

    .contact-grid.two-columns,
    .captcha-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .required-note {
        padding-bottom: 0;
        margin-bottom: 14px;
    }

    .contact-submit {
        width: 100%;
        justify-content: center;
    }

    .contact-field textarea {
        min-height: 180px;
    }
}


/* Eingabeschrift Update */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #3f6666 !important;
}


/* update015 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #3f6666 !important;
}


/* update016 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}


/* update017 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}


/* update018 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}


/* update019 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}


/* update021 Eingabeschrift */
.contact-field input,
.contact-field textarea {
    color: #001111 !important;
}