/**
 * Newsletter-Formulare — Rückmeldungen am Feld (0.11.0).
 *
 * Dasselbe Konzept wie in der Kasse (Sprint 13, themes/paarzeit-b2c/assets/css/
 * checkout.css, Abschnitt „Hinweis am Feld"): Der Fehler steht direkt unter dem
 * Feld, mit Sprechblasen-Nase, Warnsymbol und Text — nie Farbe allein
 * (WCAG 1.4.1). Der Tippfehler-Vorschlag ist ein Angebot in Grün-Beige, kein
 * Tadel. Der Erfolg ersetzt Feld und Knopf durch die Bestätigung mit der
 * eingegebenen Adresse — die Double-Opt-in-Mail ist der Moment, an dem die
 * meisten verloren gehen; die Ansage „bitte bestätigen" gehört genau hierhin.
 *
 * Farben ausschließlich aus den Theme-Presets (--wp--preset--color--*), damit
 * die Formulare mit dem Theme mitgehen. Zwei Untergründe: hell (Popup, Box)
 * und invers (Footer, Section — dunkler Grund, Formular trägt data-pz-nl-invers).
 */

.pz-nl-form { position: relative; }

/* ---- Feld mit Fehler ---- */
.pz-nl-form input.pz-nl-ungueltig,
.pz-nl-form input.pz-nl-ungueltig:focus {
    border-color: var(--wp--preset--color--core-red);
    box-shadow: 0 0 0 3px var(--wp--preset--color--core-transparent-red);
}

/* ---- Hinweis am Feld: ausrollen (grid 0fr → 1fr am inneren Element) ---- */
.pz-nl-hinweis {
    display: grid;
    grid-template-rows: 1fr;
    position: relative;
    margin: 0;
    width: 100%;
    opacity: 1;
    transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out;
}
@starting-style {
    .pz-nl-hinweis { grid-template-rows: 0fr; opacity: 0; }
}
.pz-nl-hinweis .pz-nl-hinweis-text {
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 4px;
    background-color: var(--wp--preset--color--core-transparent-red);
    color: var(--wp--preset--color--core-red);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-align: left;
}
/* Warnsymbol als mask, damit die Farbe aus dem Token kommt. */
.pz-nl-hinweis .pz-nl-hinweis-text::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Sprechblasen-Nase zum Feld (eigenes Dreieck ÜBER dem Körper — halbtransparenter
   Grund würde ein gedrehtes Quadrat als dunkleren Fleck zeigen). */
.pz-nl-hinweis::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 13px;
    height: 7px;
    background-color: var(--wp--preset--color--core-transparent-red);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Hinweis unterhalb des Knopfes (Server-/Netzfehler): keine Nase, ruhigerer Ton. */
.pz-nl-hinweis.pz-nl-hinweis--allgemein::after { display: none; }
.pz-nl-hinweis.pz-nl-hinweis--allgemein .pz-nl-hinweis-text { font-weight: 600; }

/* ---- Tippfehler-Vorschlag: Angebot, kein Fehler ---- */
.pz-nl-vorschlag {
    margin: 0;
    width: 100%;
    padding: 9px 12px;
    border-radius: 4px;
    background-color: var(--wp--preset--color--core-lightgreen);
    color: var(--wp--preset--color--semantic-text-main);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}
.pz-nl-vorschlag button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    font: inherit;
    font-weight: 700;
    color: var(--wp--preset--color--semantic-buttons-primary-inactive);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pz-nl-vorschlag button:hover { color: var(--wp--preset--color--semantic-text-main); }
.pz-nl-vorschlag button.pz-nl-vorschlag-nein { font-weight: 400; }

/* ---- Erfolg (Footer, Section, Box): ersetzt Feld + Knopf ---- */
.pz-nl-erfolg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 6px;
    background-color: var(--wp--preset--color--core-lightgreen);
    color: var(--wp--preset--color--semantic-text-main);
    text-align: left;
    line-height: 22px;
}
.pz-nl-erfolg::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: var(--wp--preset--color--core-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pz-nl-erfolg strong { display: block; font-weight: 700; }
.pz-nl-erfolg .pz-nl-erfolg-adresse { font-weight: 700; overflow-wrap: anywhere; }
.pz-nl-erfolg small { display: block; margin-top: 4px; opacity: 0.85; }
.pz-nl-erfolg:focus { outline: 2px solid var(--wp--preset--color--core-green); outline-offset: 2px; }

/* ---- Inverser Grund (Footer, Section): Hinweis und Angebot auf hellem Kasten ---- */
.pz-nl-form[data-pz-nl-invers] .pz-nl-hinweis .pz-nl-hinweis-text,
.pz-nl-form[data-pz-nl-invers] .pz-nl-hinweis::after {
    background-color: var(--wp--preset--color--core-offwhite);
}
.pz-nl-form[data-pz-nl-invers] input.pz-nl-ungueltig,
.pz-nl-form[data-pz-nl-invers] input.pz-nl-ungueltig:focus {
    box-shadow: 0 0 0 3px var(--wp--preset--color--core-offwhite);
}

@media (prefers-reduced-motion: reduce) {
    .pz-nl-hinweis { transition: none; }
}