/* StoffwechselFit R64 | SWF-QM-R64-003
 * Scoped newsletter end layer. Source: actual .connect/.nl-form templates.
 * Tests: 06_TESTS/r64/newsletter-browser.py. No change to article imagery.
 */
.connect-wrap .connect { background: #17683f; }
.connect .nl-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.connect .nl-form > * { min-width: 0; }
.connect .nl-form input[type="email"] {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px;
  background: #fff; color: #173c2b; font-size: 16px;
}
.connect .nl-form input[type="email"]::placeholder { color: #52645a; opacity: 1; }
.connect .nl-form .nl-consent {
  box-sizing: border-box; min-height: 44px; padding: 8px 0;
  font-size: 16px !important; line-height: 1.5 !important; color: #fff;
}
.connect .nl-form .nl-consent input[type="checkbox"] {
  width: 20px !important; height: 20px !important; min-width: 20px !important;
  accent-color: #fff;
}
.connect .nl-form .nl-consent a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.connect .nl-form .swf-form-protection-note,
.connect .nl-form .swf-form-protection-note small,
.connect .nl-note, .connect .soc .s, .connect .soc .h { font-size: 16px; line-height: 1.5; }
.connect .nl-form .swf-form-protection-note { color: #fff; margin: 0; }
.connect .nl-form button { min-height: 48px; font-size: 16px; justify-self: stretch; }
.connect .nl-note[role="status"] {
  position: relative; box-sizing: border-box; padding: 12px 16px; border-radius: 12px;
  background: #fff; color: #173c2b; font-weight: 600;
}
.connect .nl-note[data-swf-nl-result="err"] { color: #793813; }
.connect :focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.connect .nl-form input[type="email"]:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-color: #173c2b; }
@media (max-width: 480px) {
  .connect-wrap .connect { padding: 28px 20px; margin-left: 12px; margin-right: 12px; }
}
/* Override older language-specific brand/focus colors only inside this dark panel. */
html body .connect .eyebrow { color: #fff !important; }
html body .connect :focus-visible { outline-color: #fff !important; outline-offset: 4px !important; }