/* CIS Newsletter-Anmeldung – Formular und Kasse.
   Farben, Schriften, Felder und Knöpfe kommen vom Theme (WoodMart-, Elementor- oder
   Block-Theme-Variablen, input[type=email], .button). Hier nur Raster, Abstände, Zustände.
   Design-Labor: cis-newsletter-anmeldung, Fassung „Hervorgehoben“. */

.cisnla {
	--cisnla-akzent: var(--wd-primary-color, var(--e-global-color-accent, var(--wp--preset--color--primary, currentColor)));
	--cisnla-rand: var(--brdcolor-gray-300, rgba(127, 127, 127, .28));
	--cisnla-leise: var(--color-gray-500, color-mix(in srgb, currentColor 68%, transparent));
}
.cisnla *, .cisnla *::before, .cisnla *::after { box-sizing: border-box; }
.cisnla [hidden] { display: none !important; }

/* Formular */
.cisnla-form { margin: 0; }
.cisnla .cisnla-form__titel { margin: 0 0 6px; }
.cisnla .cisnla-form__text { margin: 0 0 18px; color: var(--cisnla-leise); }
.cisnla-felder { display: grid; gap: 12px; }
.cisnla .cisnla-feld { margin: 0; }
.cisnla .cisnla-feld label { display: block; margin-bottom: 6px; font-weight: 600; }
.cisnla .cisnla-feld input { width: 100%; max-width: none; }
.cisnla .cisnla-optional { font-weight: 400; color: var(--cisnla-leise); }
.cisnla .cisnla-feld[data-fehler] input { border-color: #b42318; }
.cisnla .cisnla-fehler { display: block; margin: 6px 0 0; color: #b42318; font-size: .92em; }
.cisnla .cisnla-form .button { white-space: nowrap; }
.cisnla .cisnla-einwilligung { margin: 12px 0 0; font-size: .86em; line-height: 1.55; color: var(--cisnla-leise); }
.cisnla .cisnla-einwilligung a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cisnla .cisnla-falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Eine Zeile: E-Mail und Knopf nebeneinander */
.cisnla-form--zeile .cisnla-zeile { display: flex; gap: 10px; align-items: flex-end; }
.cisnla-form--zeile .cisnla-zeile .cisnla-feld { flex: 1 1 auto; min-width: 0; }
.cisnla-form--zeile .cisnla-zeile .cisnla-form__knopf { flex: none; }
@media (max-width: 560px) {
	.cisnla-form--zeile .cisnla-zeile { flex-direction: column; align-items: stretch; }
}

/* Kasten (Vorgabe) */
.cisnla-form--karte { max-width: 560px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--cisnla-rand); border-top: 3px solid var(--cisnla-akzent); background: var(--bgcolor-white, transparent); }
.cisnla-form--karte .cisnla-felder { grid-template-columns: 1fr 1.4fr; }
.cisnla-form--karte .cisnla-felder--eins { grid-template-columns: 1fr; }
.cisnla-form--karte .cisnla-form__knopf { grid-column: 1 / -1; }
.cisnla-form--karte .cisnla-form__knopf .button { width: 100%; }
@media (max-width: 560px) { .cisnla-form--karte .cisnla-felder { grid-template-columns: 1fr; } }

/* Erfolg */
.cisnla-erfolg { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-left: 3px solid var(--cisnla-akzent); background: color-mix(in srgb, var(--cisnla-akzent) 9%, transparent); outline: none; }
.cisnla-erfolg svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: var(--cisnla-akzent); }
.cisnla .cisnla-erfolg p { margin: 0; }
.cisnla-erfolg strong { display: block; margin-bottom: 2px; }
.cisnla-erfolg[data-neu] { animation: cisnla-rein 260ms cubic-bezier(.23, 1, .32, 1); }
@keyframes cisnla-rein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cisnla-erfolg[data-neu] { animation: none; } }

/* Dunkle Themes (WoodMart „color-scheme-light“ = helle Schrift auf dunklem Grund) */
[class*=color-scheme-light] .cisnla .cisnla-fehler { color: #ff9b8f; }
[class*=color-scheme-light] .cisnla .cisnla-feld[data-fehler] input { border-color: #ff9b8f; }

/* Kasse: Kasten unter dem E-Mail-Feld */
.cisnla .cisnla-hinweis { margin: 8px 0 0; font-size: .86em; line-height: 1.55; color: var(--cisnla-leise); }
/* Kasse: klein über dem Bestellknopf, wie der Datenschutz-Hinweis von WooCommerce */
.cisnla-kasse .cisnla-hinweis { margin: 0 0 1em; font-size: .8em; }

/* Hinweis für Redakteure, wenn das Formular (noch) nichts zeigen kann */
.cisnla-hinweis-admin { padding: 10px 14px; border: 1px dashed currentColor; font-size: .9em; opacity: .75; }