/* Wrapper – äußerer Container des Kontaktbereichs */
.clinic-contact {
    max-width: 500px;        /* Maximale Breite des gesamten Kontaktbereichs */
    margin: 0 auto;          /* Zentriert den Bereich horizontal */
    padding: 10px 5px;      /* Innenabstand oben/unten 50px, links/rechts 20px */
}

/* 2-Spalten Layout für Formular & Infos */
.clinic-contact .contact-grid {
    display: grid;                       /* Aktiviert Grid-Layout */
    grid-template-columns: 1fr 1fr;      /* Zwei gleich breite Spalten */
    gap: 5px;                           /* Abstand zwischen den Spalten */
}

/* Grundlayout des Formulars */
.wpcf7-form {
    display: flex;                /* Flexbox aktivieren */
    flex-direction: column;       /* Elemente untereinander anordnen */
    gap: 4px;                     /* Abstand zwischen Formularfeldern (enger zusammen) */
}

/* Entfernt Standard-Abstände von Contact Form 7 */
.wpcf7-form p {
    margin: 0;                    /* Entfernt automatische Abstände der <p>-Tags */
}

/* Styling für die Beschriftungen (Labels) */
.wpcf7-form label {
    font-weight: 450;     /* Mittlere Schriftstärke */
    font-size: 13px;      /* Kleinere Schriftgröße */
    margin-bottom: 2px;   /* Abstand unter dem Label (kompakter) */
    display: block;       /* Label nimmt ganze Zeile ein */
}

/* Wrapper von Contact Form 7 Feldern */
.wpcf7-form-control-wrap {
    margin-bottom: 6px;   /* Weniger Abstand unter jedem Eingabefeld */
    display: block;       /* Saubere Block-Darstellung */
}

/* Eingabefelder, Textarea & Select (Dropdown) – einheitliches Styling */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;                 /* Volle Breite innerhalb des Containers */
    padding: 6px 12px;           /* Innenabstand (Felder in der Höhe schmaler) */
    border-radius: 6px;          /* Abgerundete Ecken */
    border: 1px solid #999;      /* Grauer Rahmen */
    background: #e0dbd3;         /* Leicht dunkler Hintergrund */
    font-size: 14px;             /* Textgröße im Feld */
    font-family: inherit;        /* gleiche Schriftart wie bei „Ihr Name“ */
    color: #333;                 /* einheitliche Textfarbe */
    transition: all 0.3s ease;   /* Sanfte Animation bei Hover/Focus */
    box-sizing: border-box;      /* Padding wird sauber mitgerechnet */
}

/* Select: Browser-Standard-Design reduzieren + Pfeil Platz geben */
.wpcf7-form select {
    appearance: none;            /* Entfernt Standard-Select-Design (Browser) */
    -webkit-appearance: none;    /* Safari/Chrome Support */
    -moz-appearance: none;       /* Firefox Support */
    padding-right: 44px;         /* Platz für Dropdown-Pfeil rechts */
    cursor: pointer;             /* Mauszeiger wird zur Hand */
}

/* Eigener Dropdown-Pfeil für Select (über Background-Grafik) */
.wpcf7-form select {
    background-image: linear-gradient(45deg, transparent 50%, #6f5a44 50%),
                      linear-gradient(135deg, #6f5a44 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; /* Pfeil-Position */
    background-size: 6px 6px, 6px 6px;       /* Pfeil-Größe */
    background-repeat: no-repeat;            /* Kein Wiederholen */
}

/* Focus Effekt für Input, Textarea & Select */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    background: #d5cec4;     /* Hintergrund wird etwas dunkler */
    border-color: #9f8566;   /* Rahmenfarbe ändert sich */
    box-shadow: none;        /* Kein zusätzlicher Schatten */
    outline: none;           /* Entfernt Standard-Browser-Rahmen */
}

/* Speziell für das Nachrichtenfeld */
.wpcf7-form textarea {
    min-height: 70px;   /* Mindesthöhe des Textfelds (deutlich kompakter) */
    resize: none;        /* Benutzer kann Größe nicht verändern */
}

/* Absende-Button */
.wpcf7-submit {
    background: #9f8566;       /* Hintergrundfarbe */
    color: #fff;               /* Textfarbe weiß */
    border: none;              /* Kein Rahmen */
    padding: 8px;              /* Innenabstand (kompakter) */
    border-radius: 6px;        /* Abgerundete Ecken */
    font-weight: 450;          /* Schriftstärke */
    font-size: 14px;           /* Schriftgröße */
    cursor: pointer;           /* Mauszeiger wird zur Hand */
    transition: all 0.3s ease; /* Sanfte Hover-Animation */
    margin-top: 8px;           /* Weniger Abstand zum letzten Feld */
}

/* Hover-Effekt für Button */
.wpcf7-submit:hover {
    background: #8a735a;          /* Dunklere Hintergrundfarbe */
    transform: translateY(-1px);  /* Button bewegt sich leicht nach oben */
}

/* Responsive Design für Tablets & Smartphones */
@media (max-width: 768px) {
    .clinic-contact .contact-grid {
        grid-template-columns: 1fr; /* Nur noch eine Spalte */
        gap: 20px;                  /* Etwas kleinerer Abstand */
    }
}