/* ==========================================================================
   KA KONTAKT SECTION — V1.0
   ==========================================================================
   Author:  Marco Blindenbacher / Kreagency
   Stack:   WordPress + Bricks 2.2 + ATF

   Bricks-Struktur:
   ─────────────────────────────────────────────────────────────────────────
   SECTION   .contact                   data-ka-theme
     DIV     .contact__inner            data-ka-container="xl"
       DIV   .contact__grid
         DIV   .contact__form-wrapper   ← Bricks Formular-Element
         DIV   .contact__sidebar
           A     .contact-info-card     (3×, je Adresse / Tel / Mail)
           DIV   .contact__map          ← iframe Google Maps
   ─────────────────────────────────────────────────────────────────────────

   INDEX
   ─────────────────────────────────────────────────────────────────────────
   00. TOKENS
   01. SECTION & INNER
   02. GRID  (3fr + 2fr)
   03. FORMULAR-WRAPPER
   04. BRICKS FORMULAR-FELDER
   05. KONTAKT-INFO KARTE
   06. MAP
   ─────────────────────────────────────────────────────────────────────────
========================================================================== */

/* ==========================================================================
   00. TOKENS
   ========================================================================== */

.contact {

    /* ── Wrapper ───────────────────────────────────────── */
    --ct-radius:            var(--at-radius--s, 8px);
    --ct-padding:           var(--at-space--l, 2.5rem);
    --ct-gap:               var(--at-content-gap, 1rem);
    --ct-bg:                var(--card-bg);
    --ct-border:            1px solid var(--card-border, rgba(255,255,255,0.08));

    /* ── Formular-Felder ───────────────────────────────── */
    --ct-input-bg:          var(--input-bg);
    --ct-input-text:        var(--at-primary-d-5);
    --ct-input-border:      1px solid var(--input-border, rgba(255,255,255,0.12));
    --ct-input-radius:      var(--at-radius--s, 6px);
    --ct-input-padding:     0.65em 1em;
    --ct-input-focus:       var(--at-accent);

    /* ── Info-Karte Icon ───────────────────────────────── */
    --ct-icon-size:         48px;
    --ct-icon-bg:           var(--icon-wrap-bg);
    --ct-icon-bg-hover:     var(--icon-wrap-bg-hover);
    --ct-icon-color:        var(--icon-color);

    /* ── Map ───────────────────────────────────────────── */
    --ct-map-ratio:         4 / 3;
    --ct-map-filter:        saturate(1.1) contrast(1.05) brightness(1.0);
}

/* ==========================================================================
   01. SECTION & INNER
   ========================================================================== */

.contact__inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--at-container-gap, 3rem);
}

/* ==========================================================================
   02. GRID — 3fr Formular + 2fr Sidebar
   ========================================================================== */

.contact__grid {
    display:               grid;
    grid-template-columns: 3fr 2fr;
    gap:                   var(--at-grid-gap--l, 3rem);
    align-items:           start;
}

@media (max-width: 1023px) {
    .contact__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   03. FORMULAR-WRAPPER
   ========================================================================== */

.contact__form-wrapper {
    background-color: var(--ct-bg);
    border:           var(--ct-border);
    border-radius:    var(--ct-radius);
    padding:          var(--ct-padding);
    display:          flex;
    flex-direction:   column;
    gap:              var(--ct-gap);
}

/* Einleitungstext */
.contact__intro-headline {
    font-size: var(--at-heading--s, 1.75rem );
    text-wrap: pretty;
}
.contact__intro-lede {
    font-size:   var(--at-text--s, 0.875rem);
    line-height: 1.7;
}

/* Zweispaltiges Namens-Feld */
.contact__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--at-grid-gap, 1.25rem);
}

@media (max-width: 599px) {
    .contact__row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   04. BRICKS FORMULAR-FELDER
   ========================================================================== */

/* Label */
.contact__form-wrapper label {
    display:     block;
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--heading-color);
    margin-block-end: 0.4rem;
}

/* Input, Textarea, Select */
.contact__form-wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact__form-wrapper textarea,
.contact__form-wrapper select {
    inline-size:        100%;
    padding:            var(--ct-input-padding);
    background-color:   var(--ct-input-bg);
    border:             var(--ct-input-border);
    border-radius:      var(--ct-input-radius);
    color:              var(--ct-input-text);
    font-size:          var(--at-text--s, 0.9rem);
    outline:            none;
    transition:
        border-color  0.3s ease,
        box-shadow    0.3s ease;
    appearance:         none;
    -webkit-appearance: none;
}

.contact__form-wrapper input:focus,
.contact__form-wrapper textarea:focus,
.contact__form-wrapper select:focus {
    border-color: var(--ct-input-focus);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--ct-input-focus) 35%, transparent);
}

/* Textarea */
.contact__form-wrapper textarea {
    min-block-size: 140px;
    resize:         vertical;
}

/* Select Pfeil */
.contact__form-wrapper select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 1em center;
    padding-inline-end:  2.5em;
}

/* Submit Button */
.contact__form-wrapper input[type="submit"],
.contact__form-wrapper button[type="submit"] {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              0.5em;
    padding-block:    0.75em;
    padding-inline:   2em;
    background-color: var(--at-accent);
    color:            var(--at-white);
    border:           none;
    border-radius:    9999px;
    font-weight:      600;
    font-size:        var(--at-text--s, 0.9rem);
    cursor:           pointer;
    inline-size:      auto;
    transition:
        opacity    0.3s ease,
        translate  0.3s ease,
        box-shadow 0.3s ease;
}

.contact__form-wrapper input[type="submit"]:hover,
.contact__form-wrapper button[type="submit"]:hover {
    opacity:    0.9;
    translate:  0 -1px;
    box-shadow: var(--ka-shadow-md);
}

/* Erfolgs- / Fehlermeldung */
.contact__form-wrapper .brx-form-success,
.contact__form-wrapper .brx-form-error {
    padding:       0.75em 1em;
    border-radius: var(--ct-input-radius);
    font-size:     var(--at-text--s);
    font-weight:   500;
}

.contact__form-wrapper .brx-form-success {
    background-color: color-mix(in srgb, var(--at-accent) 12%, transparent);
    color:            var(--at-accent);
}

.contact__form-wrapper .brx-form-error {
    background-color: color-mix(in srgb, #e24b4a 12%, transparent);
    color:            #e24b4a;
}

/* ==========================================================================
   05. KONTAKT-INFO KARTE
   ========================================================================== */

.contact__sidebar {
    display:        flex;
    flex-direction: column;
    gap:            var(--at-grid-gap, 1.25rem);
}

.contact__info-card {
    display:          flex;
    flex-direction:   row;
    align-items:      center;
    gap:              var(--at-space--m, 1.25rem);
    padding:          var(--at-space--m, 1.25rem);
    background-color: var(--ct-bg);
    border:           var(--ct-border);
    border-radius:    var(--ct-radius);
    text-decoration:  none;
    color:            inherit;
    transition:
        translate     0.3s ease,
        box-shadow    0.3s ease,
        border-color  0.3s ease;
}

.contact__info-card:hover {
    translate:    0 -2px;
    box-shadow:   var(--ka-shadow-md);
    border-color: var(--at-accent);
}

/* Icon */
.contact__icon-wrapper {
    overflow: hidden;
    padding: var(--at-space--xs);
    border-radius: var(--at-radius-full)
}
.contact__icon {
    inline-size:      var(--ct-icon-size);
    block-size:       var(--ct-icon-size);
    background-color: var(--ct-icon-bg);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    color:            var(--ct-icon-color);
    font-size:        2.5rem;
    transition:       background-color 0.3s ease;
}

.contact__info-card:hover .contact__icon {
    background-color: var(--ct-icon-bg-hover);
}

/* Text */
.contact__content-wrapper {
    display:        flex;
    flex-direction: column;
    line-height:    1.2;
    gap:            0.2rem;
}

.contact__headline {
    font-size:   var(--at-heading--xs, 1rem);
    font-weight: 600;
    color:       var(--heading-color);
}

.contact__detailtext {
    font-size: var(--at-text--s, 0.875rem);
    opacity:   0.75;
}

/* ==========================================================================
   06. MAP
   ========================================================================== */

.contact__map {
    border-radius: var(--ct-radius);
    overflow:      hidden;
    border:        var(--ct-border);
    aspect-ratio:  var(--ct-map-ratio);
    position:      relative;
}

.contact__map iframe {
    position:    absolute;
    inset:       0;
    inline-size: 100%;
    block-size:  100%;
    border:      0;
    filter:      var(--ct-map-filter);
}