/* Grundlayout */
.sci-form-area {
    width: 100%;
    max-width: 840px;
    margin: 0 auto 2rem;
    font-family: inherit;
    font-size: 15px;
}

.sci-row-wrap {
    margin-bottom: 1rem;
}

/* Zwei Spalten: mobil untereinander, ab ~600px nebeneinander */
.sci-row-wrap.sci-has-2-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sci-row-wrap.sci-has-2-columns .sci-block-column {
    flex: 1 1 100%;
}

@media (min-width: 600px) {
    .sci-row-wrap.sci-has-2-columns .sci-block-column {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

/* Labels */
.sci-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333333;
}

.sci-form-required {
    color: #e02424;
    margin-left: 0.15rem;
}

/* Inputs & Textareas & Select – angelehnt an Kadence */
.sci-form-area input[type="text"],
.sci-form-area input[type="email"],
.sci-form-area input[type="url"],
.sci-form-area input[type="password"],
.sci-form-area input[type="search"],
.sci-form-area input[type="number"],
.sci-form-area input[type="tel"],
.sci-form-area input[type="range"],
.sci-form-area input[type="date"],
.sci-form-area input[type="month"],
.sci-form-area input[type="week"],
.sci-form-area input[type="time"],
.sci-form-area input[type="datetime"],
.sci-form-area input[type="datetime-local"],
.sci-form-area input[type="color"],
.sci-form-area input[type="file"],
.sci-form-area textarea,
.sci-form-area select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.4em 0.5em;
    border: 1px solid #cbd5e0;
    border-radius: 3px;
    background-color: #ffffff;
    color: #555352;
    font-size: 1rem;
    line-height: 1.6;
    font-family: inherit;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Textarea */
.sci-form-area textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.sci-form-area select {
    cursor: pointer;
}

/* Fokus-Style */
.sci-form-area input[type="text"]:focus,
.sci-form-area input[type="email"]:focus,
.sci-form-area input[type="url"]:focus,
.sci-form-area input[type="password"]:focus,
.sci-form-area input[type="search"]:focus,
.sci-form-area input[type="number"]:focus,
.sci-form-area input[type="tel"]:focus,
.sci-form-area input[type="range"]:focus,
.sci-form-area input[type="date"]:focus,
.sci-form-area input[type="month"]:focus,
.sci-form-area input[type="week"]:focus,
.sci-form-area input[type="time"]:focus,
.sci-form-area input[type="datetime"]:focus,
.sci-form-area input[type="datetime-local"]:focus,
.sci-form-area input[type="color"]:focus,
.sci-form-area input[type="file"]:focus,
.sci-form-area textarea:focus,
.sci-form-area select:focus {
    outline: none;
    border-color: #30955E;
    box-shadow: 0 0 0 1px rgba(49, 130, 206, 0.4);
}

/* DSGVO-Checkbox */
.sci-dsgvo-wrap {
    font-size: 0.9rem;
}

.sci-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    cursor: pointer;
}

.sci-form-checkbox input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.sci-form-checkbox a {
    color: #30955E;
    text-decoration: underline;
}

.sci-form-checkbox a:hover {
    text-decoration: none;
}

/* Buttons */
/* Wrapper für Progress + Button */
.sci-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Progress-Container */
.sci-progress {
    width: 100%;
    /* max-width: 260px; */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* Balken-Hintergrund */
.sci-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background-color: #e2e8f0; /* hellgrau */
    overflow: hidden;
}

/* Füllung */
.sci-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9ae6b4, #38a169);
    transition: width 0.2s ease-out;
}

/* Prozent-Label */
.sci-progress-label {
    min-width: 2.5rem;
    text-align: right;
    color: #4a5568;
}

/* Button (dein vorhandenes Styling + Zustände) */
.form-submit-button {
    display: inline-block;
    background-color: #30955E;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    position: relative;
    overflow: hidden;
}

.form-submit-button:hover {
    background-color: #257549;
    color: #ffffff;
    transform: translateY(-1px);
}

.form-submit-button:active {
    transform: translateY(0);
}

/* Disabled-Optik */
.form-submit-button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading beim Absenden (kannst du behalten, wenn du willst) */
.form-submit-button.is-loading {
    cursor: wait;
}

.form-submit-button.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1)
    );
    transform: translateX(-100%);
    animation: sci-loading-bar 1.2s linear infinite;
}

.form-submit-button .btn-label {
    position: relative;
    z-index: 1;
}

@keyframes sci-loading-bar {
    to {
        transform: translateX(100%);
    }
}

/* Fehler- & Erfolgsmeldungen */
.sci-form-messages {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.sci-form-messages ul {
    margin: 0;
    padding-left: 1.2rem;
}

.sci-form-error {
    background-color: #fed7d7;
    border: 1px solid #f56565;
    color: #742a2a;
}

.sci-form-success {
    background-color: #c6f6d5;
    border: 1px solid #30955E;
    color: #276749;
}

/* Honeypot (Fallback, zusätzlich zum inline-style) */
.sci-extra-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Kleine Abstände zwischen Gruppen */
.sci-form-area .sci-row-wrap:last-child {
    margin-bottom: 0;
}

/* Optional: Gesamt-Spacing auf sehr kleinen Screens etwas enger */
@media (max-width: 400px) {
    .sci-form-area {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}