/* Clarity – Newsletter-Balken (draggo_clarity_newsletter)
   1:1 nach Startseite Abschnitt 08. Textteile mit Spezifität (0,1,2) wie "div h2.teil": schlägt
   Draggos Canvas-Typografie (.draggo-canvas h2/p = 0,1,1) und verliert immer gegen die
   Stil-Tab-Teile (.draggo-el-X .teil = 0,2,0) – unabhängig von der Ladereihenfolge. */
/* flow-root: die negative Überlappung soll nicht durch den Wurzelknoten kollabieren (Stil-Tab-Hintergrund bleibt im Abschnitt) */
.cl-newsletter { display: flow-root; position: relative; z-index: 2; padding: 0 10px; }
.cl-newsletter__box {
    position: relative; box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding: 50px;
    border-radius: var(--cl-nl-radius, 20px); overflow: hidden; display: flex; flex-wrap: nowrap; gap: 20px;
    background-color: var(--cl-nl-to, #8f0815);
    background-image: var(--cl-nl-img, none), linear-gradient(90deg, var(--cl-nl-from, #e10419) 0%, var(--cl-nl-to, #8f0815) 100%);
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cl-newsletter__box.is-overlap { margin-top: -11%; }
.cl-newsletter__text, .cl-newsletter__form { flex: var(--cl-nl-l, 50) 1 0; min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.cl-newsletter__form { flex-grow: var(--cl-nl-r, 50); }

div p.cl-newsletter__kicker { display: flex; align-items: center; margin: 0; color: #fff; font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 400; }
.cl-newsletter .cl-newsletter__icon { flex: none; width: 28px; font-size: 22px; line-height: 1; }
div :is(h1, h2, h3, h4, p).cl-newsletter__title { margin: 0; padding: 0; color: #fff; font-family: var(--cl-display); font-size: 46px; line-height: 63px; font-weight: 500; }

/* Formular (Formulargenerator) im Balken-Stil */
.cl-newsletter__form .ce_form, .cl-newsletter__form form { margin: 0; }
.cl-newsletter__form .formbody { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cl-newsletter__form .widget { margin: 0; }
.cl-newsletter__form input.text { box-sizing: border-box; width: 100%; height: 88px; margin: 0; padding: 30px 180px 30px 20px; border: 0; border-radius: 8px; background: #fff; color: #000; font-family: var(--cl-sans); font-size: 20px; line-height: 28px; font-weight: 400; box-shadow: none; }
.cl-newsletter__form input.text::placeholder { color: #000; opacity: .8; font-family: var(--cl-sans); }
.cl-newsletter__form input.text:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cl-newsletter__form .widget-submit { position: absolute; top: 17px; right: 11px; margin: 0; }
.cl-newsletter__form button.submit { height: 40px; margin: 0; padding: 0 24px; border: 0; border-radius: 3px; background: #e10419; color: #fff; font-family: var(--cl-display); font-size: 15px; line-height: 15px; font-weight: 500; text-transform: none; letter-spacing: normal; cursor: pointer; }
.cl-newsletter__form button.submit:hover, .cl-newsletter__form button.submit:focus-visible { background: #000; color: #fff; }
.cl-newsletter__form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-newsletter__form .checkbox_container > span { position: relative; display: block; padding-left: 35px; }
.cl-newsletter__form input.checkbox { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; margin: 0; accent-color: #fff; }
.cl-newsletter__form .checkbox_container label { display: inline; margin: 0; color: #fff; font-family: var(--cl-sans); font-size: 18px; line-height: 26px; font-weight: 400; }
.cl-newsletter__form p.error { margin: 6px 0 0; color: #fff; font-family: var(--cl-sans); font-weight: 700; }
/* Fehlermeldung unter das Feld, damit der integrierte Button bündig im E-Mail-Feld bleibt */
.cl-newsletter__form .widget-text { display: flex; flex-direction: column; }
.cl-newsletter__form .widget-text > p.error { order: 1; }
/* Labels nur für Screenreader (wie draggo-site.css – auch in der Arbeitsfläche) */
.cl-newsletter__form .widget.label-sr > label, .cl-newsletter__form .widget-checkbox.label-sr legend, .cl-newsletter__form .invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Einblenden: Text von links, Formular von rechts (wie Draggo slide-left/right, 900 ms) – nur wenn JS läuft */
.cl-newsletter.cl-nl-js .cl-nl-anim { opacity: 0; transition: opacity 900ms ease, transform 900ms ease; }
.cl-newsletter.cl-nl-js .cl-nl-anim--left { transform: translateX(-40px); }
.cl-newsletter.cl-nl-js .cl-nl-anim--right { transform: translateX(40px); }
.cl-newsletter.cl-nl-js .cl-nl-anim.is-in { opacity: 1; transform: none; }

@media (max-width: 991px) {
    .cl-newsletter__box { flex-direction: column; padding: 30px; }
    .cl-newsletter__text, .cl-newsletter__form { flex: 0 0 auto; }
}
@media (max-width: 767px) {
    .cl-newsletter__box.is-overlap { margin-top: -120px; }
    div :is(h1, h2, h3, h4, p).cl-newsletter__title { font-size: 30px; line-height: 40px; }
    .cl-newsletter__form input.text { padding-right: 20px; }
    .cl-newsletter__form .widget-submit { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-newsletter.cl-nl-js .cl-nl-anim { opacity: 1; transform: none; transition: none; }
}

/* Draggo-Editor: keine Überlappung in den vorherigen Abschnitt (Element-Rahmen und Inhalt deckungsgleich, nichts liegt übereinander) */
.draggo-canvas .cl-newsletter__box.is-overlap { margin-top: 0; }

/* Bestätigung nach dem Absenden (Formular per Ajax): gut sichtbare Box an der Stelle des Formulars */
.cl-newsletter__form .form-confirmation { position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: 88px; padding: 20px 24px 20px 76px; border-radius: 8px; background: #fff; animation: cl-nl-confirm .5s ease both; }
.cl-newsletter__form .form-confirmation::before { content: ""; position: absolute; left: 22px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #e10419 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
div.cl-newsletter__form .form-confirmation, div.cl-newsletter__form .form-confirmation p { margin: 0; color: #000; font-family: var(--cl-sans); font-size: 20px; line-height: 28px; font-weight: 600; }
div.cl-newsletter__form .form-confirmation p + p { margin-top: 4px; font-size: 16px; line-height: 24px; font-weight: 400; }
@keyframes cl-nl-confirm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cl-newsletter__form .form-confirmation { animation: none; } }
/* Link in der Einwilligung (Datenschutzerklärung) */
div.cl-newsletter__form .checkbox_container label a { color: #fff; font-family: var(--cl-sans); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
div.cl-newsletter__form .checkbox_container label a:hover, div.cl-newsletter__form .checkbox_container label a:focus-visible { text-decoration: none; }