/* drivebro — Newsletter-Seiten (newsletter.html, newsletter-bestaetigen.html). Klassen mit Präfix nl- (Baustein: nl-box- in newsletter-box.css). */
.nl-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:start}
.nl-schmal{max-width:820px}
.nl-haupt{display:grid;gap:18px;min-width:0}
.nl-haupt>*{min-width:0}
.nl-raster.nl-einspaltig{grid-template-columns:minmax(0,820px)}

/* Formular */
.nl-form{display:grid;gap:18px;padding:clamp(22px,2.8vw,34px)}
.nl-form h2{font-size:clamp(22px,2vw,26px)}
.nl-themen{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.nl-themen legend{padding:0;margin-bottom:8px;font-size:13.5px;font-weight:600;color:var(--grau)}
.nl-thema{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--linie);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.nl-thema:hover{border-color:var(--akzent-hell)}
.nl-thema:has(input:checked){border-color:var(--akzent);background:var(--flaeche)}
.nl-thema input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--akzent)}
.nl-thema b{display:block;font-size:16px;color:var(--tinte)}
.nl-thema small{display:block;font-size:14px;color:var(--sub);margin-top:2px}
.nl-mehr{border-top:1px solid var(--linie);padding-top:2px}
.nl-mehr>summary,.nl-protokoll>summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--akzent)}
.nl-mehr>summary::-webkit-details-marker,.nl-protokoll>summary::-webkit-details-marker{display:none}
.nl-mehr>summary::after,.nl-protokoll>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--weich)}
.nl-mehr[open]>summary::after,.nl-protokoll[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.nl-mehr-inhalt{display:grid;gap:8px;padding:8px 0 4px;max-width:280px}
.nl-mehr-inhalt .feld-hinweis{margin:0;line-height:1.45}
.nl-ok{font-size:14.5px;line-height:1.5;color:var(--text)}
.nl-ok a{color:var(--akzent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.nl-fehler{margin:0;padding:10px 14px;border-radius:12px;background:#FCEBE7;font-size:14.5px;font-weight:600;color:var(--rot)}
.nl-form .knopf.breit{padding-block:15px;font-size:16px}
.nl-demo-hinweis{margin:0;text-align:center}

/* Seitenspalte */
.nl-seite h2{font-size:20px;margin-bottom:16px}
.nl-schritte{list-style:none;margin:0;padding:0;counter-reset:nl-schritt;display:grid;gap:12px}
.nl-schritte li{position:relative;display:grid;gap:2px;padding:14px 16px 14px 56px;border-radius:16px;background:var(--flaeche);counter-increment:nl-schritt}
.nl-schritte li::before{content:counter(nl-schritt);position:absolute;left:16px;top:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--akzent);color:#fff;font-size:14px;font-weight:700}
.nl-schritte b{font-size:16px;color:var(--tinte)}
.nl-schritte span{font-size:14.5px;color:var(--text);line-height:1.45}
.nl-seite-notiz{margin:18px 0 0;font-size:14.5px;color:var(--sub)}
.nl-seite-notiz a{color:var(--akzent);font-weight:600}

/* Zustände */
.nl-status{display:grid;gap:12px;justify-items:start;padding:clamp(22px,2.8vw,34px)}
.nl-status h2{font-size:clamp(22px,2.1vw,27px);line-height:1.2}
.nl-status p{margin:0;font-size:16.5px;line-height:1.55;color:var(--text);max-width:60ch}
.nl-status .knoepfe{margin-top:6px}
.nl-status .knopf{white-space:normal;text-align:center}
.nl-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--flaeche);color:var(--akzent)}
.nl-symbol.gut{background:var(--gruen-flaeche);color:var(--gruen)}
.nl-symbol .ic{width:26px;height:26px}
.nl-klein{font-size:14px!important;color:var(--grau)!important}
.nl-hinweis{margin:0}
.nl-hinweis a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.nl-angaben{display:grid;gap:0;margin:0;width:100%}
.nl-angaben div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:15.5px}
.nl-angaben div:last-child{border-bottom:0}
.nl-angaben dt{color:var(--grau)}
.nl-angaben dd{margin:0;font-weight:600;color:var(--tinte);overflow-wrap:anywhere}
.nl-liste{margin:0;padding-left:18px;font-weight:600}
.nl-abmelden{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:clamp(18px,2.4vw,26px) clamp(22px,2.8vw,34px)}
.nl-abmelden h3{font-size:18px;margin-bottom:4px}
.nl-abmelden p{margin:0;color:var(--sub);font-size:15px}
.nl-protokoll{padding:4px 18px;border-radius:16px;background:var(--flaeche)}
.nl-protokoll dl{margin:0 0 10px}
.nl-protokoll dl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--akzent) 14%,transparent);font-size:14.5px}
.nl-protokoll dt{color:var(--grau)}
.nl-protokoll dd{margin:0;color:var(--tinte)}
.nl-protokoll .nl-klein{margin:0 0 14px}

/* Demo: Vorschau der Bestätigungs-E-Mail */
.nl-demo{padding:16px;border:1.5px dashed var(--akzent-hell);border-radius:20px;background:color-mix(in srgb,var(--akzent-flaeche) 60%,transparent)}
.nl-demo-titel{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:700;color:var(--akzent-dunkel)}
.nl-demo-titel .ic{width:17px;height:17px}
.nl-mail{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.nl-mail-kopf{margin:0;padding:12px 18px;border-bottom:1px solid var(--linie);background:#F8F8F9;font-size:14px}
.nl-mail-kopf div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:2px 0}
.nl-mail-kopf dt{color:var(--grau)}
.nl-mail-kopf dd{margin:0;color:var(--tinte);overflow-wrap:anywhere}
.nl-mail-text{padding:18px 18px 4px;font-size:15.5px;line-height:1.55;color:var(--text)}
.nl-mail-text p{margin:0 0 12px}
.nl-mail-text ul{margin:0 0 12px;padding-left:20px}
.nl-mail-fuss{margin:0;padding:12px 18px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--grau)}
.nl-mail-fuss a{color:var(--grau);text-decoration:underline}

@media (max-width:1100px){
  .nl-raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .nl-angaben div,.nl-protokoll dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .nl-abmelden .knopf{width:100%}
  .nl-mail-kopf div{grid-template-columns:60px minmax(0,1fr)}
}