/* ==========================================================
   SOUNDSOFT – KONTAKTFORMULAR
   ========================================================== */


/* ----------------------------------------------------------
   Formular-Grundbereich
   ---------------------------------------------------------- */

.cms-element-form:has(#cms-form-contact) .card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cms-element-form:has(#cms-form-contact) .card-body {
    padding: 0;
}


/* ----------------------------------------------------------
   Überschrift "Kontaktformular"
   ---------------------------------------------------------- */

.cms-element-form:has(#cms-form-contact) .card-title {
    position: relative;

    margin: 0 0 22px !important;
    padding: 0 0 10px;

    color: #17263a;

    font-size: 1rem;
    font-weight: 700;
}

.cms-element-form:has(#cms-form-contact) .card-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    content: "";

    background: linear-gradient(
        90deg,
        #8fa4b8 0%,
        #29c7ff 58%,
        rgba(41, 199, 255, 0) 100%
    );
}


/* ----------------------------------------------------------
   Feldabstände
   ---------------------------------------------------------- */

#cms-form-contact .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 14px;
}

#cms-form-contact .form-content > .row + .row {
    margin-top: 4px;
}


/* ----------------------------------------------------------
   Labels
   ---------------------------------------------------------- */

#cms-form-contact .form-label {
    margin-bottom: 6px;

    color: #24384f;

    font-size: .88rem;
    font-weight: 600;
}


/* ----------------------------------------------------------
   Eingabefelder / Select / Textarea
   ---------------------------------------------------------- */

#cms-form-contact .form-control,
#cms-form-contact .form-select {
    min-height: 44px;

    color: #24384f;
    background-color: #ffffff;

    border: 1px solid #ccd9e5;
    border-radius: 9px;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

#cms-form-contact .form-control {
    padding: 10px 13px;
}

#cms-form-contact .form-select {
    padding-top: 10px;
    padding-bottom: 10px;
}

#cms-form-contact textarea.form-control {
    min-height: 135px;
    resize: vertical;
}


/* Hover */

#cms-form-contact .form-control:hover,
#cms-form-contact .form-select:hover {
    border-color: #b5c8d9;
}


/* Fokus */

#cms-form-contact .form-control:focus,
#cms-form-contact .form-select:focus {
    border-color: rgba(25, 118, 210, .58);

    box-shadow:
        0 0 0 3px rgba(46, 200, 255, .10);

    outline: none;
}


/* Placeholder */

#cms-form-contact .form-control::placeholder {
    color: #7c8da0;
    opacity: 1;
}


/* ----------------------------------------------------------
   Datenschutz
   ---------------------------------------------------------- */

#cms-form-contact .privacy-notice {
    margin-top: 24px;
    margin-bottom: 0;
}

#cms-form-contact .privacy-notice-title {
    position: relative;

    display: block;
    float: none;

    width: 100%;

    margin: 0 0 10px !important;
    padding: 0 0 10px !important;

    color: #17263a;

    font-size: .88rem;
    font-weight: 700;
}

#cms-form-contact .privacy-notice-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    content: "";

    background: linear-gradient(
        90deg,
        #8fa4b8 0%,
        #29c7ff 58%,
        rgba(41, 199, 255, 0) 100%
    );
}


/* Shopware setzt nach Datenschutz ein <br> */

#cms-form-contact .privacy-notice-title + br {
    display: none !important;
}

#cms-form-contact .data-protection-information {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   Pflichtfeld-Hinweis
   ---------------------------------------------------------- */

#cms-form-contact .privacy-notice + .form-text {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}


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

#cms-form-contact button[type="submit"].btn-primary {
    float: none !important;

    display: block;

    width: 410px;
    max-width: 100%;

    min-height: 46px;

    margin: 24px auto 0;

    color: #ffffff;

    font-weight: 700;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(
        90deg,
        #1f6fc1 0%,
        #29c7ff 100%
    );

    box-shadow:
        0 7px 16px rgba(20, 91, 155, .12);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

#cms-form-contact button[type="submit"].btn-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 9px 20px rgba(20, 91, 155, .17);

    filter: brightness(1.03);
}

#cms-form-contact button[type="submit"].btn-primary:active {
    transform: translateY(0);
}


/* ----------------------------------------------------------
   Validierungsfehler
   ---------------------------------------------------------- */

#cms-form-contact .is-invalid {
    border-color: #dc3545;
}

#cms-form-contact .invalid-feedback {
    margin-top: 5px;

    font-size: .82rem;
}


/* ----------------------------------------------------------
   Mobil
   ---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .cms-element-form:has(#cms-form-contact) .card-title {
        margin-bottom: 18px !important;
    }

    #cms-form-contact .privacy-notice {
        margin-top: 20px;
    }

    #cms-form-contact button[type="submit"].btn-primary {
        width: 100%;
        margin-top: 20px;
    }
}


/* ==========================================================
   SOUNDSOFT KONTAKTFORMULAR
   Titel-Linie wie Datenschutz
   ========================================================== */

.cms-element-form:has(#cms-form-contact) .card-title::after {
    background: linear-gradient(
        90deg,
        #8fa4b8 0%,
        #29c7ff 58%,
        rgba(41, 199, 255, 0) 100%
    ) !important;
}


/* ==========================================================
   SOUNDSOFT KONTAKTFORMULAR
   Standard-Border unter Kontaktformular entfernen
   ========================================================== */

.cms-element-form:has(#cms-form-contact) .card-title {
    border-bottom: 0 !important;
}

.cms-element-form:has(#cms-form-contact) .card-title::after {
    height: 1px !important;

    background: linear-gradient(
        90deg,
        #8fa4b8 0%,
        #29c7ff 58%,
        rgba(41, 199, 255, 0) 100%
    ) !important;
}


/* ==========================================================
   SOUNDSOFT KONTAKTFORMULAR
   Abstand unter Navigation reduzieren
   ========================================================== */

.cms-section:has(#cms-form-contact) .cms-section-default {
    padding-top: 24px !important;
}

.cms-block:has(#cms-form-contact) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cms-element-form:has(#cms-form-contact) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ==========================================================
   SOUNDSOFT KONTAKTFORMULAR
   Erfolgsmeldung nach erfolgreichem Versand
   ========================================================== */

.cms-block .confirm-message {
    position: relative;

    width: 100%;
    max-width: 720px;

    margin: 70px auto;
    padding: 82px 42px 38px;

    color: #24384f;
    background: #ffffff;

    border: 1px solid #d7e4ef;
    border-radius: 12px;

    text-align: center;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;

    box-shadow:
        0 8px 28px rgba(23, 38, 58, .06);
}


/* Blauer Bestätigungs-Kreis */

.cms-block .confirm-message::before {
    position: absolute;
    top: 28px;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    content: "✓";

    transform: translateX(-50%);

    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2879c7 0%,
        #29c7ff 100%
    );

    border-radius: 50%;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 5px 14px rgba(41, 160, 220, .20);
}


/* Mobil */

@media (max-width: 767.98px) {

    .cms-block .confirm-message {
        margin: 40px auto;
        padding: 76px 22px 30px;

        font-size: .95rem;
    }
}