/* ============================================
   Container - Mehr Abstand zum Rand
   ============================================ */

.tx-powermail {
    background: rgba(97, 99, 99, 0.05);
    padding: 4rem 10rem;
    min-height: calc(100vh - 80px);
}

.tx-powermail .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(97, 99, 99, 0.05);
    padding: 4rem 8rem;
}

.powermail_form {
    background: transparent;
    padding: 0;
}

/* Fieldset - Rahmen entfernen */
.powermail_form fieldset,
.powermail_fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.powermail_form fieldset legend,
.powermail_fieldset legend {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.powermail_form h3 {
    font-family: 'Spectral', serif;
    font-size: 2.5rem;
    color: #36362d;
    margin-bottom: 2rem;
    text-align: left;
}

/* ============================================
   GRID — Layout-basierte Breiten
   Layout 1: Links, 25% Breite
   Layout 2: Rechts, 25% Breite  
   Layout 3: 50% Breite, mittig
   ============================================ */

.powermail_form .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    margin: 0 0 2rem 0;
}

/* Container für alle Felder - Gleiche Höhe sicherstellen, keine Abstände */
.powermail_form .row .col-md-6 {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch;
}

/* Field Wrapper - Gleiche Struktur für alle, keine Abstände */
.powermail_fieldwrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.powermail_field {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Layout 1: Links, 25% Breite */
.powermail_form .row .col-md-6[class*="layout-1"],
.powermail_form .row .col-md-6.layout-1 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    min-width: 200px;
    margin-right: auto;
}

/* Layout 2: Rechts, 25% Breite */
.powermail_form .row .col-md-6[class*="layout-2"],
.powermail_form .row .col-md-6.layout-2 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    min-width: 200px;
    margin-left: auto;
}

/* Layout 3: 50% Breite, mittig */
.powermail_form .row .col-md-6[class*="layout-3"],
.powermail_form .row .col-md-6.layout-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 300px;
    margin: 0 auto;
}

/* Fallback: Standard Bootstrap col-md-6 = 50% */
.powermail_form .col-md-6:not([class*="layout"]) {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
}

/* Textarea Container - 50% Breite, mittig */
.powermail_form .row .col-md-6:has(.powermail_fieldwrap_type_textarea) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin: 0 auto;
}

/* Submit Button Container - Aus dem Grid herausnehmen, am Ende mittig */
.powermail_form .row:has(.powermail_fieldwrap_type_submit) {
    margin-top: 3rem !important;
    margin-bottom: 0 !important;
}

.powermail_form .row .col-md-6:has(.powermail_fieldwrap_type_submit) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================
   LABELS – mehr Abstand, wie im Screenshot
   ============================================ */

.powermail_label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.55rem;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: 500;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Error Messages - keine Abstände die Felder verschieben */
.powermail_error {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 0;
    font-size: 0.85rem;
    color: #a02727;
}

/* Alle Elemente innerhalb von powermail_field - keine ungewollten Abstände */
.powermail_field * {
    box-sizing: border-box;
}

.powermail_field > *:not(.powermail_label):not(input):not(select):not(textarea) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Sicherstellen, dass Input-Felder auf gleicher Höhe sind */
.powermail_form .row .col-md-6 .powermail_fieldwrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.powermail_form .row .col-md-6 .powermail_fieldwrap .powermail_field {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Input-Felder selbst - auf gleicher Höhe durch feste Positionierung */
.powermail_form .row .col-md-6 .powermail_fieldwrap input[type="text"],
.powermail_form .row .col-md-6 .powermail_fieldwrap input[type="email"],
.powermail_form .row .col-md-6 .powermail_fieldwrap input[type="tel"],
.powermail_form .row .col-md-6 .powermail_fieldwrap input[type="number"],
.powermail_form .row .col-md-6 .powermail_fieldwrap input[type="date"],
.powermail_form .row .col-md-6 .powermail_fieldwrap select {
    margin-top: auto;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* ============================================
   INPUTS — einheitliche Höhe + schönes Padding
   ============================================ */

.powermail_form input[type="text"],
.powermail_form input[type="email"],
.powermail_form input[type="tel"],
.powermail_form input[type="number"],
.powermail_form input[type="date"],
.powermail_form select,
.powermail_form .form-control:not(textarea) {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border: 1px solid #d4d0c4;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.4;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box;
    font-family: 'Commissioner', sans-serif;
    background: #fff;
    color: #36362d;
}

.powermail_form input:focus,
.powermail_form select:focus {
    border-color: #5f6b3a;
    box-shadow: 0 0 0 3px rgba(95, 107, 58, 0.15);
    outline: none;
}

/* Select Dropdown Styling */
.powermail_form select {
    appearance: none;
    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 fill='%235f6b3a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-position: calc(100% - 1rem) center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Textarea */
.powermail_form textarea {
    width: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid #d4d0c4;
    border-radius: 6px;
    min-height: 200px;
    resize: vertical;
    font-size: 1rem;
    font-family: 'Commissioner', sans-serif;
    background: #fff;
    color: #36362d;
    box-sizing: border-box;
}

.powermail_form textarea:focus {
    border-color: #5f6b3a;
    box-shadow: 0 0 0 3px rgba(95, 107, 58, 0.15);
    outline: none;
}

/* ============================================
   Submit Button - 50% Breite, Farbe #616363, mittig am Ende
   ============================================ */

.powermail_fieldwrap_type_submit {
    width: 50%;
    max-width: 50%;
    min-width: 300px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.powermail_form input[type="submit"] {
    padding: 1.2rem 2rem;
    font-size: 0.95rem;
    border-radius: 6px;
    background: #616363 !important;
    color: #fff;
    border: none;
    width: 100%;
    max-width: 100%;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Commissioner', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease;
}

.powermail_form input[type="submit"]:hover,
.powermail_form input[type="submit"]:focus {
    background: #4a4d4d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 99, 99, 0.3);
}

/* ============================================
   RESPONSIVE — 1 Spalte auf Mobile
   ============================================ */

@media (max-width: 1400px) {
    .tx-powermail {
        padding: 4rem 8rem;
    }
    
    .tx-powermail .container-fluid {
        padding: 4rem 6rem;
}
}

@media (max-width: 1200px) {
    .tx-powermail {
        padding: 3rem 6rem;
    }
    
    .tx-powermail .container-fluid {
        padding: 3rem 5rem;
    }
}

@media (max-width: 968px) {
    .tx-powermail {
        padding: 3rem 4rem;
    }
    
    .tx-powermail .container-fluid {
        padding: 3rem 4rem;
    }
}

@media (max-width: 768px) {
    .tx-powermail {
        padding: 2rem 2rem;
    }
    
    .tx-powermail .container-fluid {
        padding: 2rem 2rem;
    }
    
    .powermail_form .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .powermail_form .row .col-md-6[class*="layout-1"],
    .powermail_form .row .col-md-6[class*="layout-2"],
    .powermail_form .row .col-md-6[class*="layout-3"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .powermail_form h3 {
        font-size: 2rem;
    }
}