/* ============================================================
   KONTAKTFORMULAR – Styles (v2.0, refined editorial)
   Einbindung: wp_enqueue_style() in functions.php
   Nur auf der Kontakt-Seite laden (is_page-Check in functions.php)
   Version: wird über ALEX_THEME_VERSION in functions.php gesteuert
   ============================================================ */

/* Design-Tokens – nur lokal im Formular gültig
   ============================================================ */
.ak-kontaktform,
.ak-form-success,
.ak-form-fehler {
    --ak-text:           #1a1a1a;
    --ak-text-soft:      #595959;  /* WCAG AA: 7:1 auf #fff */
    --ak-border:         #e5e2dd;
    --ak-border-strong:  #c9c5be;
    --ak-border-focus:   #1a1a1a;
    --ak-bg:             #ffffff;
    --ak-bg-soft:        #faf9f7;
    --ak-bg-tag:         #f2f0eb;
    --ak-accent-error:   #b94838;
    --ak-accent-success: #4a6b4a;
    --ak-radius:         4px;
    --ak-radius-lg:      6px;
    --ak-radius-pill:    999px;
    --ak-transition:     0.2s ease;
}

/* Wrapper
   ============================================================ */
.ak-kontaktform {
    max-width: 720px;
    margin: 0 auto;
}

.ak-form-success,
.ak-form-fehler {
    max-width: 720px;
    margin: 0 auto 24px;
}

/* Erfolgs- und Fehlerboxen
   ============================================================ */
.ak-form-success {
    background: var(--ak-bg-soft);
    border: 1px solid var(--ak-border);
    border-left: 3px solid var(--ak-accent-success);
    border-radius: var(--ak-radius-lg);
    padding: 24px 28px;
}

.ak-form-success p {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--ak-text);
}

.ak-form-fehler {
    background: #fdf6f4;
    border: 1px solid #f1d9d3;
    border-left: 3px solid var(--ak-accent-error);
    border-radius: var(--ak-radius-lg);
    padding: 16px 20px;
}

.ak-form-fehler p {
    margin: 4px 0;
    color: var(--ak-accent-error);
    font-family: Lato, sans-serif;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Pflichtfeld-Hinweis (neu: ganz oben)
   ============================================================ */
.ak-pflicht-hint {
    font-family: Lato, sans-serif;
    font-size: 0.85em;
    color: var(--ak-text-soft);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Felder
   ============================================================ */
.ak-field {
    margin-bottom: 20px;
}

.ak-field:last-child {
    margin-bottom: 0;
}

/* Sektionen mit Trenner
   ============================================================ */
.ak-form-section {
    padding-top: 28px;
    margin-top: 28px;
    border-top: 1px solid var(--ak-border);
}

.ak-form-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

/* Card-Gruppe (z. B. Kontaktblock)
   ============================================================ */
.ak-field-group {
    background: var(--ak-bg-soft);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-lg);
    padding: 22px 24px 6px;
    margin-bottom: 20px;
}

/* Labels
   ============================================================ */
.ak-group-label {
    font-family: Playfair, Georgia, serif;
    font-size: 1.05em;
    color: var(--ak-text);
    margin: 0 0 16px;
    line-height: 1.3;
}

.ak-field label,
.ak-label {
    display: block;
    font-family: Playfair, Georgia, serif;
    font-size: 1em;
    color: var(--ak-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Hilfstexte
   ============================================================ */
.ak-hinweis-inline {
    font-family: Lato, sans-serif;
    font-size: 0.8em;
    color: var(--ak-text-soft);
    font-weight: normal;
}

.ak-hinweis {
    display: block;
    font-family: Lato, sans-serif;
    font-size: 0.85em;
    color: var(--ak-text-soft);
    margin-top: 6px;
    line-height: 1.5;
}

.ak-hinweis--indent {
    margin-left: 26px;
    margin-top: 4px;
}

.ak-hinweis a {
    color: var(--ak-text);
    border-bottom: 1px solid var(--ak-border-strong);
    transition: border-color var(--ak-transition);
}

.ak-hinweis a:hover {
    border-bottom-color: var(--ak-text);
}

/* Eingabefelder
   ============================================================ */
.ak-field input[type="text"],
.ak-field input[type="email"],
.ak-field input[type="tel"],
.ak-field select,
.ak-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ak-border-strong);
    border-radius: var(--ak-radius);
    padding: 12px 14px;
    font-family: Lato, sans-serif;
    font-size: 1em;
    color: var(--ak-text);
    background: var(--ak-bg);
    line-height: 1.5;
    transition: border-color var(--ak-transition), box-shadow var(--ak-transition);
}

.ak-field input::placeholder,
.ak-field textarea::placeholder {
    color: #a8a6a3;
}

.ak-field input:hover,
.ak-field select:hover,
.ak-field textarea:hover {
    border-color: #8e8b86;
}

.ak-field input:focus,
.ak-field select:focus,
.ak-field textarea:focus {
    outline: none;
    border-color: var(--ak-border-focus);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.ak-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Inline-Radios (Legacy)
   ============================================================ */
.ak-field--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
}

.ak-field--inline .ak-label {
    flex: 0 0 100%;
    margin-bottom: 6px;
}

.ak-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Lato, sans-serif;
    font-size: 1em;
    color: var(--ak-text);
    cursor: pointer;
}

.ak-radio input { width: auto; margin: 0; cursor: pointer; }

/* Stil-Auswahl als Pills
   ============================================================ */
.ak-checkboxen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ak-check {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: var(--ak-bg);
    border: 1px solid var(--ak-border-strong);
    border-radius: var(--ak-radius-pill);
    font-family: Lato, sans-serif;
    font-size: 0.95em;
    color: var(--ak-text);
    cursor: pointer;
    user-select: none;
    transition: background var(--ak-transition),
                border-color var(--ak-transition),
                color var(--ak-transition);
}

.ak-check:hover {
    background: var(--ak-bg-tag);
    border-color: #8e8b86;
}

.ak-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.ak-check:has(input:checked) {
    background: var(--ak-text);
    border-color: var(--ak-text);
    color: var(--ak-bg);
}

/* Tastatur-Fokus auf die Pill */
.ak-check:focus-within {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

/* Zustimmungs-Block (TFP, Alter, DSGVO)
   ============================================================ */
.ak-form-zustimmungen {
    background: var(--ak-bg-soft);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.ak-form-zustimmungen .ak-field {
    margin-bottom: 12px;
}

.ak-form-zustimmungen .ak-field:last-child {
    margin-bottom: 0;
}

/* Einzelne Checkbox-Felder
   ============================================================ */
.ak-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: Lato, sans-serif;
    font-size: 0.95em;
    color: var(--ak-text);
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 0;
}

.ak-field--checkbox label > span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1;
}

.ak-field--checkbox input[type="checkbox"] {
    /* display explizit setzen – überschreibt globale Regel
       input[type=checkbox]{display:none} aus style.css (Mobile-Menü-Hack) */
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 2px 0 0;
    border: 1px solid var(--ak-border-strong);
    border-radius: 3px;
    background: var(--ak-bg);
    cursor: pointer;
    position: relative;
    transition: border-color var(--ak-transition), background var(--ak-transition);
}

.ak-field--checkbox input[type="checkbox"]:hover {
    border-color: var(--ak-text);
}

.ak-field--checkbox input[type="checkbox"]:checked {
    background: var(--ak-text);
    border-color: var(--ak-text);
}

.ak-field--checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ak-field--checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

.ak-field--checkbox a {
    color: var(--ak-text);
    border-bottom: 1px solid var(--ak-border-strong);
    transition: border-color var(--ak-transition);
}

.ak-field--checkbox a:hover {
    border-bottom-color: var(--ak-text);
}

/* Submit
   ============================================================ */
.ak-form-submit {
    margin-top: 8px;
}

.ak-submit {
    display: inline-block;
    padding: 14px 36px;
    background: var(--ak-text);
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 0.95em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--ak-text);
    border-radius: var(--ak-radius);
    cursor: pointer;
    transition: background var(--ak-transition),
                transform var(--ak-transition),
                box-shadow var(--ak-transition);
}

.ak-submit:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ak-submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ak-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.25);
}

/* Pflichtfeld-Hinweis (alte Position – bleibt für Abwärtskompatibilität)
   ============================================================ */
.ak-pflicht {
    font-family: Lato, sans-serif;
    font-size: 0.85em;
    color: var(--ak-text-soft);
    margin-top: 12px;
    line-height: 1.5;
}

/* Honeypot
   ============================================================ */
.ak-hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Upload-Bereich – Drop-Zone-Optik
   ============================================================ */
.ak-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: var(--ak-bg);
    color: var(--ak-text);
    font-family: Lato, sans-serif;
    font-size: 0.95em;
    border: 1.5px dashed var(--ak-border-strong);
    border-radius: var(--ak-radius-lg);
    cursor: pointer;
    transition: background var(--ak-transition),
                border-color var(--ak-transition);
    margin-bottom: 12px;
    text-align: center;
}

.ak-upload-btn:hover {
    background: var(--ak-bg-soft);
    border-color: var(--ak-text);
    border-style: solid;
}

.ak-upload-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

.ak-upload-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ak-upload-btn:disabled:hover {
    background: var(--ak-bg);
    border-color: var(--ak-border-strong);
    border-style: dashed;
}

.ak-bilder-liste {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ak-bilder-liste:empty {
    margin: 0;
}

.ak-bild-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ak-bg-soft);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-lg);
    padding: 8px 12px;
    transition: border-color var(--ak-transition);
}

.ak-bild-item:hover {
    border-color: var(--ak-border-strong);
}

.ak-bild-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--ak-radius);
    flex-shrink: 0;
}

.ak-bild-name {
    font-family: Lato, sans-serif;
    font-size: 0.88em;
    color: var(--ak-text-soft);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ak-bild-entf {
    background: none;
    border: none;
    color: var(--ak-text-soft);
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ak-radius);
    flex-shrink: 0;
    transition: background var(--ak-transition), color var(--ak-transition);
}

.ak-bild-entf:hover {
    background: #fdf6f4;
    color: var(--ak-accent-error);
}

.ak-bild-entf:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

/* Responsive
   ============================================================ */
@media (max-width: 768px) {
    .ak-field input[type="text"],
    .ak-field input[type="email"],
    .ak-field input[type="tel"],
    .ak-field select,
    .ak-field textarea {
        font-size: 16px;  /* verhindert Auto-Zoom auf iOS */
    }

    .ak-field-group,
    .ak-form-zustimmungen {
        padding: 18px 18px 4px;
    }

    .ak-form-zustimmungen {
        padding: 18px;
    }

    .ak-form-section {
        padding-top: 24px;
        margin-top: 24px;
    }

    .ak-submit {
        width: 100%;
        text-align: center;
        padding: 16px;
    }

    .ak-checkboxen {
        gap: 8px;
    }

    .ak-form-success {
        padding: 20px;
    }
}

/* Sehr schmale Viewports
   ============================================================ */
@media (max-width: 380px) {
    .ak-field-group,
    .ak-form-zustimmungen {
        padding: 16px 14px 4px;
    }

    .ak-form-zustimmungen {
        padding: 16px 14px;
    }

    .ak-check {
        padding: 9px 14px;
        font-size: 0.9em;
    }
}