/**
 * CS Forms — Theme: Basis
 *
 * Minimales Layout. Gibt dem WordPress-Theme volle Kontrolle
 * über das visuelle Erscheinungsbild.
 */

.cs-forms-theme-base .cs-forms-field-wrap {
    display: block;
    margin-bottom: 1em;
}

.cs-forms-theme-base label {
    display: block;
    margin-bottom: 0.25em;
}

.cs-forms-theme-base .cs-forms-field {
    width: 100%;
    padding: 0.5em 0.75em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    line-height: 1.5;
}

.cs-forms-theme-base textarea.cs-forms-field {
    resize: vertical;
    min-height: 6em;
}

.cs-forms-theme-base select.cs-forms-field {
    appearance: auto;
}

.cs-forms-theme-base .cs-forms-submit {
    padding: 0.6em 1.5em;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
}
.cs-forms-theme-base .cs-forms-submit:hover,
.cs-forms-theme-base .cs-forms-submit:focus {
    background: #555;
}

.cs-forms-theme-base .cs-forms-field-error {
    display: block;
    color: #b91c1c;
    font-size: 0.875em;
    margin-top: 0.25em;
}

.cs-forms-theme-base .cs-forms-response {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 4px;
}
.cs-forms-theme-base .cs-forms-response-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.cs-forms-theme-base .cs-forms-response-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── 12-Spalten-Grid (Bootstrap-Style) ────────────────────────────
   Jede Zeile besteht aus 12 Grid-Spalten. Kinder bekommen eine
   .cs-forms-col-N-Klasse (N = 1..12) und spannen N Spalten.

   Beispiele:
     col-6 + col-6   = 2 gleiche Spalten
     col-8 + col-4   = 66/33 Split
     col-4 × 3       = 3 gleiche Spalten
     col-3 col-6 col-3 = zentrale Spalte doppelt so breit

   Auf Screens < 600px fallen alle Spalten automatisch auf volle
   Breite zurueck (col-12), damit Formulare mobil lesbar bleiben.
*/
.cs-forms-theme-base .cs-forms-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1em;
    margin-bottom: 1em;
}

.cs-forms-theme-base .cs-forms-col-1  { grid-column: span 1; }
.cs-forms-theme-base .cs-forms-col-2  { grid-column: span 2; }
.cs-forms-theme-base .cs-forms-col-3  { grid-column: span 3; }
.cs-forms-theme-base .cs-forms-col-4  { grid-column: span 4; }
.cs-forms-theme-base .cs-forms-col-5  { grid-column: span 5; }
.cs-forms-theme-base .cs-forms-col-6  { grid-column: span 6; }
.cs-forms-theme-base .cs-forms-col-7  { grid-column: span 7; }
.cs-forms-theme-base .cs-forms-col-8  { grid-column: span 8; }
.cs-forms-theme-base .cs-forms-col-9  { grid-column: span 9; }
.cs-forms-theme-base .cs-forms-col-10 { grid-column: span 10; }
.cs-forms-theme-base .cs-forms-col-11 { grid-column: span 11; }
.cs-forms-theme-base .cs-forms-col-12 { grid-column: span 12; }

/* Auto-Sizing fuer Spalten, die sich nach Inhalt richten sollen */
.cs-forms-theme-base .cs-forms-col-auto { grid-column: auto; }

/* Offsets — leere Spalten links vor dem Inhalt */
.cs-forms-theme-base .cs-forms-offset-1  { grid-column-start: 2;  }
.cs-forms-theme-base .cs-forms-offset-2  { grid-column-start: 3;  }
.cs-forms-theme-base .cs-forms-offset-3  { grid-column-start: 4;  }
.cs-forms-theme-base .cs-forms-offset-4  { grid-column-start: 5;  }
.cs-forms-theme-base .cs-forms-offset-6  { grid-column-start: 7;  }

/* Innere Felder brauchen keinen extra margin-bottom — Grid-gap reicht */
.cs-forms-theme-base .cs-forms-row > div > label,
.cs-forms-theme-base .cs-forms-row > div .cs-forms-field-wrap,
.cs-forms-theme-base .cs-forms-row > label,
.cs-forms-theme-base .cs-forms-row .cs-forms-field-wrap {
    margin-bottom: 0;
}

/* Mobile: alle Spalten auf volle Breite */
@media (max-width: 600px) {
    .cs-forms-theme-base .cs-forms-row > [class*="cs-forms-col-"] {
        grid-column: span 12 !important;
    }
    .cs-forms-theme-base .cs-forms-row > [class*="cs-forms-offset-"] {
        grid-column-start: auto !important;
    }
}