/*
 * Newsletter-Anmeldung auf Start- und Detailseite (newsletter.js).
 * Der Knopf trägt einen Briefumschlag, dessen Klappe beim Öffnen aufgeht. Darunter
 * klappt die Karte auf wie eine Buchseite, von der Oberkante her, wie im Logo.
 * Farben wie auf der Detailseite, ohne deren Variablen vorauszusetzen.
 */
.nl { display: none; width: min(100%, 30rem); margin-inline: auto; text-align: left; }
.nl.nl-bereit { display: block; }

.nl-ausloeser {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; margin-inline: auto; padding: 0 22px;
  border: 1.5px solid rgb(239 125 88 / .4); border-radius: 999px;
  background: rgb(239 125 88 / .1); color: #f4a183;
  font: 800 .9rem/1.1 "Nunito", ui-rounded, system-ui, sans-serif; letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nl-ausloeser:hover { background: rgb(239 125 88 / .18); border-color: rgb(239 125 88 / .65); }
.nl-ausloeser:focus-visible { outline: 2px solid #4db8b0; outline-offset: 3px; }
.nl.offen .nl-ausloeser { color: #f8c0a8; background: rgb(239 125 88 / .15); }

.nl-umschlag { width: 20px; height: 20px; flex: none; overflow: visible; }
.nl-umschlag .nl-klappe {
  transform-box: view-box; transform-origin: 12px 7px;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.nl.offen .nl-umschlag .nl-klappe { transform: scaleY(-1); }
.nl-umschlag .nl-brief {
  transform-box: view-box; transform: translateY(5px); opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1) .12s, opacity .2s ease .12s;
}
.nl.offen .nl-umschlag .nl-brief { transform: translateY(-1px); opacity: 1; }

/* Aufklappen: die Höhe wächst über grid-template-rows, die Karte dreht sich dabei von oben herab auf */
.nl-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1);
}
.nl.offen .nl-panel { grid-template-rows: 1fr; }
.nl-blatt { min-height: 0; overflow: hidden; perspective: 900px; }
.nl-karte {
  margin-top: 14px; padding: 22px 22px 20px;
  border: 1px solid rgb(255 255 255 / .1); border-radius: 22px;
  background: linear-gradient(160deg, rgb(13 24 41 / .96), rgb(7 14 26 / .96));
  box-shadow: 0 0 0 1px rgb(77 184 176 / .08) inset, 0 24px 60px -30px rgb(77 184 176 / .55);
  color: #f4efe4;
  font: 400 1rem/1.6 "Nunito", ui-rounded, system-ui, sans-serif;
  transform-origin: 50% 0; transform: rotateX(-78deg); opacity: 0;
  transition: transform .6s cubic-bezier(.2, .9, .25, 1), opacity .35s ease;
}
.nl.offen .nl-karte { transform: none; opacity: 1; transition-delay: .08s; }

.nl-titel {
  margin: 0; font: 700 1.2rem/1.25 "Fraunces", Georgia, serif; color: #f4efe4; text-wrap: balance;
}
.nl-versprechen { margin: 10px 0 0; color: rgb(244 239 228 / .74); font-size: .95rem; text-wrap: pretty; }

.nl-form > label { display: block; margin: 18px 0 6px; font-weight: 800; font-size: .85rem; color: #9aa9bf; }
.nl-zeile { display: flex; gap: 8px; }
.nl-zeile input {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px; padding: 0 16px;
  border: 1.5px solid rgb(255 255 255 / .42); border-radius: 14px;  /* 3:1 zum Feld, WCAG 1.4.11 */
  background: rgb(255 255 255 / .05); color: #f4efe4;
  font: 600 1rem/1 "Nunito", ui-rounded, system-ui, sans-serif;
  transition: border-color .2s ease, background-color .2s ease;
}
.nl-zeile input:focus { outline: none; border-color: #4db8b0; background: rgb(77 184 176 / .08); }
.nl-zeile input:focus-visible { box-shadow: 0 0 0 3px rgb(77 184 176 / .35); }
.nl-zeile input[aria-invalid="true"] { border-color: #ef7d58; }
.nl-senden {
  flex: none; min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #4db8b0, #7fd3c9); color: #070e1a;
  font: 800 .95rem/1 "Nunito", ui-rounded, system-ui, sans-serif;
  transition: transform .2s ease, filter .2s ease;
}
.nl-senden:hover { transform: translateY(-1px); filter: brightness(1.06); }
.nl-senden:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }
.nl-senden[aria-busy="true"] { cursor: progress; filter: saturate(.6); transform: none; }
@media (max-width: 380px) {
  .nl-zeile { flex-direction: column; }
}

/* Honigtopf für Bots: aus dem Bild, aber nicht display:none, das überspringen manche */
.nl-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nl-fehler { margin: 8px 0 0; color: #f4a183; font-weight: 700; font-size: .9rem; }
.nl-fehler:empty { display: none; }
.nl-einwilligung { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: rgb(244 239 228 / .55); }
.nl-einwilligung a, .nl-danke a { color: #7fd3c9; text-underline-offset: 3px; }

.nl-danke { outline: none; }
.nl-danke[hidden] { display: none; }
.nl-danke .nl-titel { color: #7fd3c9; }

@media (prefers-reduced-motion: reduce) {
  .nl-panel, .nl-karte, .nl-umschlag .nl-klappe, .nl-umschlag .nl-brief { transition: none !important; }
}