/* ══════════════════════════════════════════════════════
   Newsletter – Farbige Styles (Desktop)
   ══════════════════════════════════════════════════════ */

/* ── Seiten-Container ─────────────────────────────── */
.section {
    position: relative;
}

.section > h1 {
    display: flex;
    align-items: center;
    gap: .55rem;
}

/* ── Cards: Bunte Glasmorphismus-Hintergründe ─────── */
.grid--2 > .card:nth-child(1) {
    background:
        radial-gradient(500px 350px at 15% 20%, rgba(0,140,255,.12), transparent 55%),
        radial-gradient(400px 300px at 85% 75%, rgba(0,220,190,.08), transparent 55%),
        rgba(255,255,255,.04);
    border-color: rgba(0,140,255,.14);
    position: relative;
    overflow: hidden;
}
.grid--2 > .card:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 40%);
    pointer-events: none;
    border-radius: inherit;
}
.grid--2 > .card:nth-child(1):hover {
    border-color: rgba(0,140,255,.24);
}

.grid--2 > .card:nth-child(2) {
    background:
        radial-gradient(500px 350px at 85% 25%, rgba(170,80,255,.10), transparent 55%),
        radial-gradient(400px 300px at 15% 80%, rgba(255,70,170,.06), transparent 55%),
        rgba(255,255,255,.04);
    border-color: rgba(170,80,255,.14);
    position: relative;
    overflow: hidden;
}
.grid--2 > .card:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 40%);
    pointer-events: none;
    border-radius: inherit;
}
.grid--2 > .card:nth-child(2):hover {
    border-color: rgba(170,80,255,.24);
}

/* ── Card-Header: dezente farbige Akzente ─────────── */
.grid--2 > .card:nth-child(1) .card__header {
    border-bottom-color: rgba(0,140,255,.12);
}
.grid--2 > .card:nth-child(2) .card__header {
    border-bottom-color: rgba(170,80,255,.12);
}

/* ── Themen-Grid: Bunte Checkboxes ────────────────── */
.topic {
    transition: border-color .2s, background .2s, transform .15s;
}
.topic:hover {
    transform: translateY(-1px);
}
.topic:nth-child(1) {
    border-color: rgba(0,140,255,.18);
    background: linear-gradient(135deg, rgba(0,140,255,.08), var(--surface));
}
.topic:nth-child(1):hover {
    border-color: rgba(0,140,255,.32);
    background: linear-gradient(135deg, rgba(0,140,255,.14), var(--surface));
}
.topic:nth-child(2) {
    border-color: rgba(0,220,190,.18);
    background: linear-gradient(135deg, rgba(0,220,190,.08), var(--surface));
}
.topic:nth-child(2):hover {
    border-color: rgba(0,220,190,.32);
    background: linear-gradient(135deg, rgba(0,220,190,.14), var(--surface));
}
.topic:nth-child(3) {
    border-color: rgba(170,80,255,.18);
    background: linear-gradient(135deg, rgba(170,80,255,.08), var(--surface));
}
.topic:nth-child(3):hover {
    border-color: rgba(170,80,255,.32);
    background: linear-gradient(135deg, rgba(170,80,255,.14), var(--surface));
}
.topic:nth-child(4) {
    border-color: rgba(255,170,0,.18);
    background: linear-gradient(135deg, rgba(255,170,0,.08), var(--surface));
}
.topic:nth-child(4):hover {
    border-color: rgba(255,170,0,.32);
    background: linear-gradient(135deg, rgba(255,170,0,.14), var(--surface));
}

/* ── Formularfelder: Farbige Focus-States ─────────── */
.grid--2 > .card:nth-child(1) .form__input:focus {
    border-color: rgba(0,140,255,.5);
    box-shadow: 0 0 0 4px rgba(0,140,255,.12);
}
.grid--2 > .card:nth-child(2) .form__input:focus {
    border-color: rgba(170,80,255,.5);
    box-shadow: 0 0 0 4px rgba(170,80,255,.12);
}

/* ── Buttons: Farbige Akzente ─────────────────────── */
.grid--2 > .card:nth-child(1) .btn--primary {
    background: linear-gradient(135deg, rgba(0,140,255,.28), rgba(0,220,190,.18));
    border-color: rgba(0,140,255,.30);
}
.grid--2 > .card:nth-child(1) .btn--primary:hover {
    background: linear-gradient(135deg, rgba(0,140,255,.38), rgba(0,220,190,.24));
    border-color: rgba(0,140,255,.45);
    box-shadow: 0 8px 22px rgba(0,140,255,.18);
}

.grid--2 > .card:nth-child(2) .btn--ghost {
    border-color: rgba(170,80,255,.22);
    background: rgba(170,80,255,.08);
}
.grid--2 > .card:nth-child(2) .btn--ghost:hover {
    background: rgba(170,80,255,.16);
    border-color: rgba(170,80,255,.35);
    box-shadow: 0 8px 22px rgba(170,80,255,.12);
}

/* ── Alerts: Farbig passend ───────────────────────── */
.alert--success {
    border-color: rgba(0,220,190,.30);
    background:
        linear-gradient(135deg, rgba(0,220,190,.10), rgba(0,140,255,.06));
}
.alert--error {
    border-color: rgba(255,70,170,.28);
    background:
        linear-gradient(135deg, rgba(255,70,170,.10), rgba(255,170,0,.05));
}
.alert--info {
    border-color: rgba(0,140,255,.22);
    background:
        linear-gradient(135deg, rgba(0,140,255,.08), rgba(170,80,255,.04));
}

/* ── Checkbox-Akzent ──────────────────────────────── */
.topic input[type="checkbox"]:checked {
    accent-color: rgba(0,140,255,.9);
}