/* ============================================================
   Newsletter — Leiste über dem Fuß, Zeile auf der Produktseite,
   Häkchen in der Kasse. Tokens aus basis.css.
   ============================================================ */

/* Formular, an beiden Orten gleich */
.nl-form{margin:0}
.nl-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-zeile{display:flex;gap:10px;align-items:stretch}
.nl-feld{flex:1 1 220px;min-width:0}
.nl-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nl-feld input{width:100%;height:56px;padding:0 16px;border:1px solid var(--n20);border-radius:var(--rundung);
  background:var(--n00);color:var(--n90);font:400 16px/1 Archivo,sans-serif}
.nl-feld input:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.nl-knopf{flex:none;height:56px}
.nl-satz{margin:10px 0 0;font:400 13px/1.5 Archivo,sans-serif;color:var(--n50)}
.nl-satz a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.nl-bedingungen{display:block;margin-top:4px}
.nl-meldung{margin:10px 0 0;font:500 15px/1.5 Archivo,sans-serif;color:var(--n70)}
.nl-meldung.is-ok{color:var(--gruen)}

/* Leiste über dem Fuß */
.fuss-newsletter{background:var(--n05);color:var(--n90);border-top:1px solid var(--n10)}
.fuss-newsletter-innen{max-width:1560px;margin:0 auto;padding:26px 44px;
  display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.35fr);gap:24px 48px;align-items:start}
.fuss-newsletter-text{margin:0;align-self:center;font:400 16px/1.5 Archivo,sans-serif;color:var(--n60)}
.fuss-newsletter-text b{display:block;margin-bottom:6px;font:700 30px/1.05 Archivo,sans-serif;
  letter-spacing:-.02em;color:var(--n90)}
.fuss-newsletter .nl-feld{flex:1 1 220px;max-width:360px}
.fuss-newsletter .nl-knopf{flex:1 1 200px;max-width:280px}
.fuss-newsletter .nl-satz{color:var(--n50)}
@media (max-width:820px){
  .fuss-newsletter-innen{grid-template-columns:1fr;padding:22px 20px;gap:14px}
  .nl-zeile{flex-wrap:wrap}
  .nl-knopf{flex:1 1 100%}
}

/* Zeile auf der Produktseite */
.pr-newsletter{margin:18px 0 0;border-top:1px solid var(--n10);padding-top:14px}
.pr-newsletter summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  font:500 15px/1.4 Archivo,sans-serif;color:var(--teal-d)}
.pr-newsletter summary::-webkit-details-marker{display:none}
.pr-newsletter-plus{width:14px;height:14px;position:relative;flex:none}
.pr-newsletter-plus::before,.pr-newsletter-plus::after{content:"";position:absolute;background:currentColor;left:0;top:6px;width:14px;height:2px}
.pr-newsletter-plus::after{transform:rotate(90deg);transition:transform .2s}
.pr-newsletter[open] .pr-newsletter-plus::after{transform:rotate(0)}
.pr-newsletter .nl-form{margin-top:14px}

/* Kasse: eigener Kasten, gleiche Formensprache wie „Kundenkonto anlegen",
   nur mit Farbe — der Rabatt soll auffallen. */
.is-text .ks .form-row.ks-newsletter{margin:10px 0 26px}
.is-text .ks .ks-newsletter .woocommerce-input-wrapper{display:block}
.is-text .ks .ks-newsletter label.checkbox{display:flex;align-items:center;gap:14px;margin:0;
  padding:16px 18px;border-radius:var(--rundung);
  background:color-mix(in srgb,var(--teal) 9%,#fff);box-shadow:inset 0 0 0 1px var(--teal);
  font:600 15.5px/1.35 Archivo,sans-serif;letter-spacing:0;text-transform:none;color:var(--n90);cursor:pointer}
.is-text .ks .ks-newsletter label.checkbox::after{content:"−5 %";flex:none;margin-left:auto;
  padding:6px 12px;border-radius:999px;background:var(--teal);color:#fff;
  font:700 14px/1 Archivo,sans-serif;letter-spacing:.02em}
.is-text .ks .ks-newsletter label.checkbox .optional{display:none}
.ks .ks-newsletter label.checkbox:hover{box-shadow:inset 0 0 0 1px var(--teal-d)}
.ks .ks-newsletter:has(input:checked) label.checkbox{box-shadow:inset 0 0 0 2px var(--teal)}
/* Hinweis „Rabatt schon genutzt" — kommt als Fragment, ist sonst leer. */
.is-text .ks .ks-newsletter .ks-newsletter-hinweis{display:block;margin:8px 0 0;
  font:500 13px/1.5 Archivo,sans-serif;color:var(--ink)}
.is-text .ks .ks-newsletter .ks-newsletter-hinweis:empty{display:none}
.is-text .ks .ks-newsletter .description{display:block;margin:10px 0 0 2px;
  font:400 13px/1.5 Archivo,sans-serif;color:var(--n50)}
/* WooCommerce färbt Links in Feldbeschreibungen weiß (Sprechblasen-Optik) — hier gewinnt der Shop. */
.woocommerce form.ks .form-row.ks-newsletter .woocommerce-input-wrapper .description a{
  color:var(--teal-d);text-decoration:underline;text-underline-offset:3px}
.ks-newsletter-bedingungen{display:block;margin-top:4px}