/* Gemeinsames Erscheinungsbild für Newsletter-Anmeldung und -Abmeldung. */
.nl-seite { padding: 0 0 72px; background: #faf8f5; color: #3c3a38; }
.nl-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 48px 20px 76px; background-position: center; background-size: cover; }
.nl-hero::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.50); }
.nl-hero-inhalt { position: relative; max-width: 660px; text-align: center; }
.nl-hero-symbol { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; margin-bottom: 10px; border: 1px solid rgba(58,55,51,.45); border-radius: 50%; color: #3a3733; font-size: 21px; }
.nl-hero-ueberzeile { margin: 0 0 4px; color: #514d47; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nl-hero h1 { margin: 0; color: #393633; font-family: Georgia, 'Times New Roman', serif; font-size: 48px; font-weight: 700; line-height: 1.08; }
.nl-hero-schriftzug { display: block; margin-top: 3px; color: #c9362b; font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-style: italic; font-weight: 400; line-height: 1.15; }
.nl-hero-text { max-width: 510px; margin: 20px auto 0; color: #4d4944; font-size: 18px; line-height: 1.45; }
.nl-bereich { position: relative; z-index: 1; max-width: 1140px; margin: -42px auto 0; padding: 0 20px; }
.nl-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.nl-karten-einzel { max-width: 540px; margin: 0 auto; }
.nl-karte { position: relative; min-height: 100%; padding: 56px 42px 36px; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(44,37,31,.12); }
.nl-karte-icon { position: absolute; top: -30px; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-left: -31px; border: 4px solid #fff; border-radius: 50%; background: #c9362b; box-shadow: 0 2px 8px rgba(0,0,0,.18); color: #fff; font-size: 25px; }
.nl-karte-abmelden .nl-karte-icon { background: #bbb5aa; }
.nl-karte h2 { margin: 0 0 8px; color: #3b3834; font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 700; text-align: center; }
.nl-karte-einleitung { max-width: 370px; margin: 0 auto 28px; color: #68635d; line-height: 1.45; text-align: center; }
.nl-formular { max-width: 440px; margin: 0 auto; }
.nl-feld { margin-bottom: 16px; }
.nl-feld > label, .nl-anrede-legende { display: block; margin: 0 0 7px; color: #403c37; font-size: 14px; font-weight: 700; }
.nl-anrede { margin: 0 0 17px; padding: 0; border: 0; }
.nl-anrede .nl-anrede-legende { float: left; width: 92px; padding-top: 7px; }
.nl-anrede-auswahl { display: flex; flex-wrap: wrap; gap: 13px; min-height: 34px; }
.nl-anrede label { margin: 0; color: #58534c; font-weight: 400; }
.nl-anrede input { margin-right: 4px; }
.nl-feld input[type="text"], .nl-feld input[type="email"] { width: 100%; height: 45px; padding: 9px 12px; box-sizing: border-box; border: 1px solid #ddd8d1; border-radius: 5px; background: #fff; color: #393633; font-size: 15px; }
.nl-feld input:focus { border-color: #c9362b; outline: 2px solid rgba(201,54,43,.13); outline-offset: 0; }
.nl-datenschutz { display: flex; align-items: flex-start; gap: 9px; margin: 22px 0; color: #655f58; font-size: 13px; line-height: 1.55; }
.nl-datenschutz input { flex: 0 0 auto; margin-top: 3px; }
.nl-datenschutz a { color: #c9362b; }
.nl-knopf { display: block; width: 100%; min-height: 48px; padding: 11px 18px; border: 0; border-radius: 5px; background: linear-gradient(135deg, #5ca858, #3e8c43); box-shadow: 0 3px 8px rgba(48,122,53,.24); color: #fff; font-size: 17px; font-weight: 700; text-align: center; }
.nl-knopf:hover, .nl-knopf:focus { background: linear-gradient(135deg, #4e9b4c, #347a3a); color: #fff; }
.nl-knopf-abmelden { background: linear-gradient(135deg, #c7c1b7, #aaa397); box-shadow: 0 3px 8px rgba(91,83,72,.18); }
.nl-knopf-abmelden:hover, .nl-knopf-abmelden:focus { background: linear-gradient(135deg, #b6aea3, #968f84); }
.nl-hinweis { margin: 22px 0; padding: 15px 17px; border: 1px solid #e6dfd4; border-radius: 5px; background: #faf7f1; color: #686159; line-height: 1.45; }
.nl-hinweis i { margin-right: 8px; color: #a89f91; }
.nl-hinweis-fehler { border-color: #e4b3af; background: #fff1ef; color: #8f2d25; }
.nl-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.nl-vorteile { margin: 54px auto 0; }
.nl-vorteile h2 { margin: 0 0 30px; color: #3b3834; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 700; text-align: center; }
.nl-vorteile h2::after { content: ''; display: block; width: 52px; height: 3px; margin: 12px auto 0; background: #c9362b; }
.nl-vorteil-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.nl-vorteil { display: grid; grid-template-columns: 62px 1fr; gap: 15px; align-items: start; }
.nl-vorteil-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #f8e9e6; color: #c9362b; font-size: 24px; }
.nl-vorteil h3 { margin: 4px 0 6px; color: #3c3834; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 700; }
.nl-vorteil p { margin: 0; color: #666059; font-size: 14px; line-height: 1.45; }
.nl-status { max-width: 650px; margin: -42px auto 0; padding: 50px 42px; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(44,37,31,.12); text-align: center; }
.nl-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 15px; border-radius: 50%; background: #438d45; color: #fff; font-size: 28px; }
.nl-status h1 { margin: 0 0 15px; color: #3b3834; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; }
.nl-status p { margin: 0 0 13px; color: #615b54; font-size: 17px; line-height: 1.5; }
@media (max-width: 767px) { .nl-hero { min-height: 300px; padding: 40px 18px 66px; } .nl-hero h1 { font-size: 36px; } .nl-hero-schriftzug { font-size: 29px; } .nl-hero-text { font-size: 16px; } .nl-bereich { margin-top: -30px; padding: 0 13px; } .nl-karten, .nl-vorteil-liste { grid-template-columns: 1fr; } .nl-karten { gap: 46px; } .nl-karte { padding: 52px 23px 28px; } .nl-anrede .nl-anrede-legende { float: none; width: auto; padding-top: 0; } .nl-status { margin: -30px 13px 0; padding: 42px 24px; } }