/* ifV Anmeldungsformular */

/* ── "Anmelden"-Button in der Durchführungsliste ── */
.ifv-anm-df-btn {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--primary, #2E49C2);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ifv-anm-df-btn:hover {
    background: #0081bc;
}

.ifv-anm-df-btn--aktiv {
    background: #27ae60;
}

.ifv-anm-df-btn--aktiv:hover {
    background: #1e8e4e;
}

.ifv-df-ausgebucht-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Anmeldung Wrap ── */
#ifv-anm-wrap {
    max-width: 860px;
    margin: 0 auto;
    font-family: inherit;
}

/* ── Formular-Überschrift ── */
.ifv-anm-heading {
    font-size: 1.4rem;
    color: var(--wp--preset--color--primary, #2E49C2);
    margin: 32px 0 16px;
    padding-top: 24px;
    border-top: 3px solid var(--wp--preset--color--primary, #2E49C2);
}

/* ── Terminauswahl-Info ── */
.ifv-anm-termin-info {
    background: var(--wp--preset--color--light-bg, #F4F6F9);
    border: 1px solid var(--wp--preset--color--primary, #2E49C2);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.ifv-anm-termin-placeholder {
    color: #555;
}

.ifv-anm-termin-selected {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ifv-anm-termin-label {
    font-weight: 700;
    color: var(--wp--preset--color--primary, #2E49C2);
}

.ifv-anm-termin-preis {
    color: #333;
}

.ifv-anm-termin-reset {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    margin-left: auto;
}

.ifv-anm-termin-reset:hover {
    color: #e74c3c;
}

/* ── Erfolgsmeldung ── */
#ifv-anm-success {
    display: none;
    background: #eafaf1;
    border: 2px solid #27ae60;
    border-radius: 6px;
    padding: 28px 32px;
    text-align: center;
}

#ifv-anm-success .ifv-anm-success-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 12px;
}

#ifv-anm-success h3 {
    margin: 0 0 10px;
    font-size: 1.3rem;
    color: #1a7340;
}

#ifv-anm-success p {
    margin: 0;
    color: #333;
}

/* ── Fehlermeldung ── */
.ifv-anm-error {
    background: #fdecea;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    padding: 14px 18px;
    color: #c0392b;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* ── Hinweis ueber dem Formular (Pruefung, Storno) ──
   Der Kasten war bisher voellig ungestylt und lief als nackter Fliesstext
   zwischen Terminwahl und Formular unter. Er traegt aber die beiden Aussagen,
   die vor dem Absenden Unsicherheit nehmen: die Anmeldung ist noch nicht
   verbindlich, und ein Ruecktritt ist geregelt. */
.ifv-anm-notice {
    background: var(--wp--preset--color--light-bg, #F4F6F9);
    border-left: 4px solid var(--wp--preset--color--primary, #2E49C2);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #333;
}

.ifv-anm-notice-storno {
    display: block;
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--wp--preset--color--text-medium, #687080);
}

.ifv-anm-notice-storno a {
    color: var(--wp--preset--color--primary, #2E49C2);
    text-decoration: underline;
}

.ifv-anm-notice-storno a:hover {
    color: var(--wp--preset--color--primary-dark, #22358E);
}

/* ── Abschnitt-Boxen ── */
.ifv-anm-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 20px;
}

.ifv-anm-section h3 {
    margin: 0 0 18px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wp--preset--color--primary, #2E49C2);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Raster ── */
.ifv-anm-row {
    display: grid;
    gap: 16px;
    margin-bottom: 14px;
}

.ifv-anm-row:last-child {
    margin-bottom: 0;
}

.ifv-anm-row-1 {
    grid-template-columns: 1fr;
}

.ifv-anm-row-2 {
    grid-template-columns: 1fr 1fr;
}

.ifv-anm-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
    .ifv-anm-row-2,
    .ifv-anm-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ── Felder ── */
.ifv-anm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ifv-anm-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #444;
}

.ifv-anm-field label span {
    color: #e74c3c;
    margin-left: 2px;
}

.ifv-anm-field input[type="text"],
.ifv-anm-field input[type="email"],
.ifv-anm-field input[type="tel"],
.ifv-anm-field select,
.ifv-anm-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.ifv-anm-field input[type="text"]:focus,
.ifv-anm-field input[type="email"]:focus,
.ifv-anm-field input[type="tel"]:focus,
.ifv-anm-field select:focus,
.ifv-anm-field textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary, #2E49C2);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

/* Ungültige E-Mail (client-seitige Vorab-Validierung) */
.ifv-anm-field input.ifv-anm-input-error,
input.ifv-anm-input-error {
    border-color: #c0392b !important;
    background: #fdf3f2;
}
.ifv-anm-field input.ifv-anm-input-error:focus,
input.ifv-anm-input-error:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.ifv-anm-field-error {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #c0392b;
    font-weight: 500;
}

.ifv-anm-field textarea {
    resize: vertical;
    min-height: 90px;
}

.ifv-anm-field 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 d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Pflichtfeld-Hinweis ── */
.ifv-anm-required-note {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 16px;
}

/* ── Checkbox-Reihe ── */
.ifv-anm-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ifv-anm-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--wp--preset--color--primary, #2E49C2);
    flex-shrink: 0;
    cursor: pointer;
}

.ifv-anm-checkbox-row label {
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
}

/* ── Teilnehmer ── */
.ifv-anm-tn-block {
    background: #fff;
    border: 1px solid #dde;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 12px;
    position: relative;
}

.ifv-anm-tn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ifv-anm-tn-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wp--preset--color--primary, #2E49C2);
}

.ifv-anm-tn-remove {
    background: none;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    color: #e74c3c;
    font-size: 0.8rem;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ifv-anm-tn-remove:hover {
    background: #e74c3c;
    color: #fff;
}

/* Hinweis: min. 1 Teilnehmer */
#ifv-anm-tn-hint {
    display: none;
    background: #fff8e1;
    border: 1px solid #f0ad4e;
    border-radius: 5px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #7a5800;
    margin-bottom: 12px;
}

/* ── Teilnehmer hinzufügen ── */
.ifv-anm-add-tn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 2px dashed var(--wp--preset--color--primary, #2E49C2);
    border-radius: 6px;
    color: var(--wp--preset--color--primary, #2E49C2);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-top: 4px;
}

.ifv-anm-add-tn:hover {
    background: var(--wp--preset--color--primary, #2E49C2);
    color: #fff;
}

/* ── Abweichende Rechnungsadresse ── */
.ifv-anm-rechnung-block {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #ccc;
}

/* ── AGB / Datenschutz ──
   Markup nutzt .ifv-anm-fieldset-legal (fieldset) + .ifv-anm-checkbox-label
   (Checkbox liegt IM Label → Label ist der Flex-Container, nicht die Row). */
.ifv-anm-fieldset-legal {
    background: var(--wp--preset--color--light-bg, #F4F6F9);
    border: 1px solid var(--wp--preset--color--border, #c8e4f5);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0 0 20px;
}

.ifv-anm-checkbox-label {
    display: flex;
    align-items: flex-start; /* Checkbox oben, mehrzeiliger Text mit Haengeeinzug */
    gap: 10px;
}

.ifv-anm-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
}

.ifv-anm-fieldset-legal .ifv-anm-checkbox-row label a {
    color: var(--wp--preset--color--primary, #2E49C2);
    text-decoration: underline;
}

.ifv-anm-fieldset-legal .ifv-anm-checkbox-row label a:hover {
    color: var(--wp--preset--color--primary-dark, #22358E);
}

/* ── Absende-Button ── */
.ifv-anm-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #2e7d2e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 18px 42px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    width: 100%;
    box-shadow: 0 2px 6px rgba(46, 125, 46, 0.25);
}

.ifv-anm-submit:hover:not(:disabled) {
    background: #266b26;
    box-shadow: 0 3px 10px rgba(46, 125, 46, 0.35);
}

.ifv-anm-submit:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(46, 125, 46, 0.25);
}

.ifv-anm-submit:disabled {
    background: #9aae9a;
    opacity: 0.85;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Einbettung in Durchführungs-Accordion ── */
.ifv-df-anmeldung {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px solid var(--wp--preset--color--primary, #2E49C2);
}

.ifv-df-anmeldung-titel {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary, #2E49C2);
    margin: 0 0 16px;
}

.ifv-df-ausgebucht {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    color: #c0392b;
    font-size: 0.9rem;
}

.ifv-df-ausgebucht a {
    color: #c0392b;
    font-weight: 600;
}

/* ── Honeypot ── */
.ifv-anm-hp {
    display: none !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
    .ifv-anm-section {
        padding: 18px 16px;
    }

    .ifv-anm-submit {
        font-size: 1rem;
        padding: 14px 24px;
    }
}

/* Hinweiszeilen im Formular (19.08.2026) --------------------------------------
   .ifv-anm-hint hatte bis heute KEINE Regel — die Hinweise sahen wie normaler
   Fliesstext aus und wurden entsprechend uebersehen. Genau das war Christians
   Beschwerde: der Hinweis zur Anschrift muss gelesen werden, sonst kommt die
   Rechnung weiter an Privatadressen.
   Kleiner und gedaempft, damit es als Erlaeuterung erkennbar ist und die
   Feldbeschriftungen nicht ueberstimmt. Betrifft auch die zwei bestehenden
   Hinweise (Anmelder-Erklaerung, Pflichtfeld-Legende) — die sehen dadurch
   erstmals wie Hinweise aus. */
.ifv-anm-hint {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wp--preset--color--text-medium, #687080);
    margin: 0 0 0.75rem;
    max-width: 68ch;   /* Lesbarkeit: sonst laeuft der Satz ueber die ganze Breite */
}

/* #204 (19.08.2026): Wartelisten-Hinweis im Termin-Kasten.
   Er ist Flex-Kind von .ifv-anm-termin-selected (display:flex, flex-wrap:wrap) —
   ohne flex-basis:100% setzt er sich neben Preis und Reset-Button und die Zeile
   bricht unkontrolliert. Optik kommt aus .ifv-anm-hint, hier nur die Position. */
.ifv-anm-warteliste-hinweis {
    flex-basis: 100%;
    margin: 4px 0 0;
}