/* ==========================================================================
   newsletter_add — Modul-CSS (MKS-W7, 06.10.2026)
   --------------------------------------------------------------------------
   Inline-Style-Diät nach register_user-Präzedenz: der bisherige 65-Zeilen-
   Inline-<style>-Block aus module/newsletter_add/index.php ist hier 1:1
   übernommen (Selektoren, Deklarationen und die Light-Kompensations-
   selektoren unverändert — kanonisch html[data-bs-theme="light"] plus
   Legacy-Spiegel html.light/body.light; die d6_light_zweich-Vertrags-
   ausnahme bleibt inhaltlich erhalten, nur der Ort ändert sich).
   Zusätzlich: statische style="-Attribute (Input-Group-, Badge-, Button-,
   Glow- und Honeypot-Styles) in .nl-*-Klassen überführt. Dynamisch und
   damit INLINE bleibt nur der Wrapper-style=" mit den $styleAttr-Branding-
   Vars. CSS reist mit dem Modul (similar-Präzedenz), Versionierung über
   ?v=filemtime im Renderer; es lädt NACH Theme-CSS (Link im Modul-Body).
   !important nur wie im Original (nl-trust-bar) bzw. — als Replikat der
   früheren Inline-Style-Stärke gegen Bootstrap-Verträge (.form-control:
   focus 0,2,0, .was-validated 0,3,0, .form-check-input:checked) — an
   nl-field/nl-consent-input (register_user-.ru-input-Muster).
   ========================================================================== */

/* ==== Aus dem Inline-<style>-Block übernommen (1:1) ====================== */

.tsec-newsletter-module-wrapper .form-check-input{width:1.5rem;height:1.5rem;margin-top:.15rem;cursor:pointer}
.tsec-newsletter-module-wrapper .form-check-label{min-height:44px;display:flex;align-items:center;cursor:pointer;padding-left:.25rem}
.tsec-newsletter-module-wrapper button[type="submit"]{font-size:1rem}

/* Mobile-First: DSGVO-Consent mit 44px-Hit-Area (Label als Klickflaeche) —
   die rechtlich Pflicht-Zustimmung darf nicht das kleinste Tap-Target sein. */

/* R9c (19.09.): Social-Proof-Badge theme-faehig — der fruehere Inline-
   Hardcode (#10b981 auf 12%-Emerald) trug im Light auf weisser Karte
   2.5:1 (Walk v5). Dark: emerald-400; Light: emerald-700. */
.tsec-newsletter-module-wrapper .nl-proof-badge{background:rgba(52,211,153,0.12);color:#34d399;border:1px solid rgba(52,211,153,0.3);font-family:var(--brand-font-mono)}
html[data-bs-theme="light"] .tsec-newsletter-module-wrapper .nl-proof-badge,
html.light .tsec-newsletter-module-wrapper .nl-proof-badge,
body.light .tsec-newsletter-module-wrapper .nl-proof-badge{background:rgba(4,120,87,0.1);color:#047857;border-color:rgba(4,120,87,0.32)}

/* v2.7.0 FAQ-Accordion: Bootstrap-Accordion-Vars auf Theme-Tokens gemuenzt —
   der BS-Default (weisse Items, fast schwarzer Chevron) brach auf der
   Dark-Brand-Karte auseinander; Cyan-Chevron + transparente Items lesen
   sich auf beiden Themes. Fragen >44px Tap-Target (Mobile-First).
   Visual-Gate Runde 2 (29.09.): BS-Dark setzt die Icon-Var am naeheren
   Element/[data-bs-theme=dark]-Pseudo (Chevron fiel auf #6ea8fe
   zurueck) — der Chevron wird deshalb EXPLIZIT als background-image auf
   beide ::after-Zustaende gesetzt (0,3,0 spaeter im Body schlaegt BS).
   h3.accordion-header traegt Plattform-margin-top 32px (Totraum-Band
   ueber Frage 1) und das Input-Group-Layout hat keinen Bootstrap-
   Vertrag auf dieser Seite (Children stapelten statt einer Reihe). */
.tsec-newsletter-module-wrapper .newsletter-faq .accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-color:var(--brand-text-secondary,#80b380);
  --bs-accordion-btn-color:var(--brand-text-primary,#e0f0e0);
  --bs-accordion-btn-bg:transparent;
  --bs-accordion-active-color:var(--color-accent-cyan,#06b6d4);
  --bs-accordion-active-bg:rgba(var(--color-fastpass-rgb,6,182,212),0.07);
  --bs-accordion-border-color:var(--brand-border,#1a3a1a);
  --bs-accordion-border-radius:0.75rem;
  --bs-accordion-inner-border-radius:calc(0.75rem - 1px);
  --bs-accordion-btn-focus-box-shadow:0 0 0 0.2rem rgba(var(--color-fastpass-rgb,6,182,212),0.25);
}
.tsec-newsletter-module-wrapper .newsletter-faq .accordion-button::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2306b6d4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.tsec-newsletter-module-wrapper .newsletter-faq .accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2306b6d4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.tsec-newsletter-module-wrapper .newsletter-faq .accordion-header{margin-top:0;margin-bottom:0}
.tsec-newsletter-module-wrapper .newsletter-faq .accordion-button{font-size:.875rem;font-weight:600;padding:.875rem 1rem;min-height:44px;gap:.5rem}
.tsec-newsletter-module-wrapper .newsletter-faq .accordion-body{font-size:.8125rem;line-height:1.6;padding:.25rem 1rem 1rem}
.tsec-newsletter-module-wrapper.newsletter-sidebar-view .newsletter-faq .accordion-button{font-size:.8125rem;padding:.75rem .875rem}
.tsec-newsletter-module-wrapper.newsletter-sidebar-view .newsletter-faq .accordion-body{font-size:.75rem;padding:.25rem .875rem .875rem}

/* Sidebar-Kompaktform: Eine Reihe (Icon | Feld | Button) — ohne Bootstrap-
   input-group-Vertrag (width:1% fehlt im fragmentierten CSS) nahm das Feld
   100% Breite und Icon/Button stapelten darunter. Visual-Gate R3: die BS-
   Fugen-Naht (margin-left:-1px) wirkt ohne Feld-Innenpadding unfertig —
   Separated-Look: gleichmaessiger Gap, volle Radien, Feld-Innenpadding. */
.tsec-newsletter-module-wrapper .input-group{flex-wrap:nowrap;gap:.5rem}
.tsec-newsletter-module-wrapper .input-group > *{margin-left:0;border-radius:.625rem}
.tsec-newsletter-module-wrapper .input-group > .form-control{flex:1 1 auto;width:auto;min-width:0;padding-left:.875rem;padding-right:.875rem}

/* Visual-Gate R3: Der schrumpfende Button liess das CTA-Label
   ("ABONNIEREN") mit Trennstrich zweizeilig brechen — der Button ist
   formstabil (kein Shrinking, kein Wrap), das Feld nimmt den Rest. */
.tsec-newsletter-module-wrapper .input-group > button[type="submit"]{flex:0 0 auto;white-space:nowrap}
.tsec-newsletter-module-wrapper .newsletter-btn-text{white-space:nowrap}

/* Consent-Label ist ein Flex-Container (44px-Tap-Target): Zwischen den
   Flex-Items (Textnode/Link/Textnode) frisst Flex den Whitespace — der
   Text steckt deshalb in EINEM Span (Fix: „denDatenschutz…zu"). */
.tsec-newsletter-module-wrapper .form-check-label > span{min-width:0}

/* LH1-W4 (01.10., color-contrast): Der Datenschutz-Link trug var(--color-
   accent-cyan) inline — im Light auf Weiß 3,68:1 (AA 4,5 nötig). Theme-
   Flip wie nl-proof-badge: Light sky-700, Dark bleibt Cyan-Var. */
.tsec-newsletter-module-wrapper .nl-dsgvo-link{color:var(--color-accent-cyan,#06b6d4)}
html[data-bs-theme="light"] .tsec-newsletter-module-wrapper .nl-dsgvo-link,
body.light .tsec-newsletter-module-wrapper .nl-dsgvo-link{color:#0369a1}

/* ==== Aus statischen style="-Attributen extrahierte Klassen ============== */

/* Brand-Karte (Bootstrap-.card-Basis (0,1,0) verliert gegen (0,2,0) spaeter) */
.tsec-newsletter-module-wrapper .nl-card{background:var(--brand-bg-card);border:1px solid var(--brand-border,#1a3a1a);color:var(--brand-text-primary,#e0f0e0)}

/* Dekorative Hintergrund-Glows (aria-hidden, transformieren nie) */
.tsec-newsletter-module-wrapper .nl-glow{position:absolute;width:300px;height:300px;pointer-events:none}
.tsec-newsletter-module-wrapper .nl-glow--tr{top:-100px;right:-100px;background:radial-gradient(circle, rgba(var(--color-green-rgb), 0.12) 0%, transparent 70%)}
.tsec-newsletter-module-wrapper .nl-glow--bl{bottom:-100px;left:-100px;background:radial-gradient(circle, rgba(0, 170, 255, 0.12) 0%, transparent 70%)}

/* Text-/Pill-/Heading-Chrome (Deklarationen 1:1 aus den Inline-Styles;
   nl-cms-content bewusst OHNE Fallback — Original var() ohne Fallback) */
.tsec-newsletter-module-wrapper .nl-text-secondary{color:var(--brand-text-secondary,#80b380)}
.tsec-newsletter-module-wrapper .nl-cms-content{color:var(--brand-text-secondary)}
.tsec-newsletter-module-wrapper .nl-pill{background:rgba(var(--color-fastpass-rgb),0.12);border:1px solid rgba(var(--color-fastpass-rgb),0.4);color:var(--color-accent-cyan);letter-spacing:0.05em}
.tsec-newsletter-module-wrapper .nl-hero-title{color:var(--color-accent-cyan,#00aaff);font-family:'Plus Jakarta Sans',sans-serif}
.tsec-newsletter-module-wrapper .nl-hero-lead{color:var(--brand-text-secondary,#80b380);max-width:680px}
.tsec-newsletter-module-wrapper .nl-faq-headline{color:var(--brand-text-secondary,#80b380);letter-spacing:0.05em}

/* Trust-Bar: border-color-!important stammt 1:1 aus dem Original-Inline */
.tsec-newsletter-module-wrapper .nl-trust-bar{border-color:var(--brand-border,#1a3a1a) !important}

/* Honeypot (visuell kollabiert, Original-Deklarationen 1:1) */
.tsec-newsletter-module-wrapper .nl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Input-Group-Icon-Addon (Bootstrap-.input-group-text (0,1,0) verliert) */
.tsec-newsletter-module-wrapper .nl-igt{background:var(--brand-bg-surface);border:1px solid var(--brand-border);color:var(--color-text-muted,var(--brand-text-muted))}

/* E-Mail-/Name-Feld: !important repliziert die frühere Inline-Stärke
   gegen .form-control:focus (0,2,0) und .was-validated (0,3,0) —
   register_user-.ru-input-Muster. min-width:0 war sidebar-inline und gilt
   input-group-weit schon über den 1:1-Block oben; hier samtfeldweit
   identisch. */
.tsec-newsletter-module-wrapper .nl-field{background:var(--brand-bg-surface,#0d120d) !important;color:var(--brand-text-primary,#e0f0e0);border:1px solid var(--brand-border,#1a3a1a) !important;font-size:16px;min-width:0}

/* DSGVO-Consent-Checkbox: !important gegen .form-check-input:checked/-
   :focus und .was-validated .form-check-input:valid (0,3,0) — sonst
   kippte der geprüfte/zulässige Zustand auf Bootstrap-Blau/Grün. */
.tsec-newsletter-module-wrapper .nl-consent-input{background-color:var(--brand-bg-surface) !important;border-color:var(--brand-border) !important}
.tsec-newsletter-module-wrapper .nl-consent-muted{color:var(--color-text-muted,var(--brand-text-muted))}

/* Vollform-Label über den Eingabefeldern */
.tsec-newsletter-module-wrapper .nl-form-label{color:var(--brand-text-secondary)}

/* Submit-Buttons (Gradient als background-image übersteht .btn:hover
   wie bisher; min-height 48px shared, lg-Variante fixt font-size 1rem
   gegen .btn-lg (0,2,0, früher im Cascade-Order)) */
.tsec-newsletter-module-wrapper .nl-btn-submit{background:linear-gradient(135deg,var(--color-accent-cyan,#06b6d4),var(--color-accent,#0284c7));color:#000;border:none;min-height:48px}
.tsec-newsletter-module-wrapper .nl-btn-lg-text{font-size:1rem}