/* ===========================================================================
   Newsletter-Block — steht unter der Dankeseite.

   Nach Figma 8p0x82WllP6JUZjgJ7KrGs, Nodes 39:3387 (Desktop, 1619 px) und
   39:3345 (mobil, 390 px). Gehört zu public/danke.css.

   Der Entwurf zeichnet beide Breiten mit denselben Zahlen — er bricht nur um.
   Deshalb steht hier keine Medienabfrage: das erledigen `flex-wrap` und
   `min-width` von selbst.
   =========================================================================== */

.newsletter {
  padding: 3.125rem 1.25rem 2.1875rem;
  background: var(--gruen-tief);
  color: var(--weiss);
}

/*
 * Ein einziger Umbruch für beide Breiten: Logo (252) und Formularspalte
 * (mindestens 228) passen ab rund 520 Pixeln nebeneinander, darunter stapeln
 * sie sich mit 60 Pixeln Abstand — genau die zwei Bilder aus dem Entwurf.
 */
.newsletter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 3.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
}

/*
 * 252 × 87 wie im Entwurf (Figma 39:3390) — und zwar BEIDE Maße. Das
 * Seitenverhältnis der Datei ist ein anderes (122 × 43), aber das Logo trägt
 * `preserveAspectRatio="none"`: der Entwurf zieht es selbst auf seinen Rahmen,
 * und die Fußzeile tut dasselbe. Ohne die feste Höhe wäre der ganze grüne
 * Block auf dem Telefon zwei Pixel höher als gezeichnet.
 */
.newsletter__logo {
  display: block;
  width: 252px;
  height: 87px;
}

/*
 * Die 310 Pixel stehen im Entwurf als feste Höhe der Spalte (Figma 39:3415).
 * Sie sind der Grund, warum das Logo daneben mittig sitzt und warum der grüne
 * Block auf dem Desktop nicht auf die Höhe seines Inhalts zusammenfällt.
 */
.newsletter__form {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
  min-width: min(228px, 100%);
  max-width: 600px;
  min-height: 310px;
}

.newsletter__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1875;
}

.newsletter__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/*
 * Zeilenhöhe in Pixeln, nicht als Faktor: die Felder sind im Entwurf 41 Pixel
 * hoch, und 1 + 7 + 25 + 7 + 1 trifft das. Ein Faktor auf 18 Pixeln landete
 * daneben, und ein Feld, das zwei Pixel zu hoch ist, verschiebt darunter alles.
 */
.newsletter__field {
  flex: 1 1 200px;
  min-width: min(200px, 100%);
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--weiss);
  border-radius: 5px;
  background: rgb(255 255 255 / 20%);
  color: var(--weiss);
  font: inherit;
  font-size: 1.125rem;
  line-height: 25px;
}

/* Voll deckendes Weiß: die Vorgabe der Browser blendet Platzhalter ab, und auf
   dem hellen Grün des Feldes bliebe davon zu wenig übrig. */
.newsletter__field::placeholder {
  color: var(--weiss);
  opacity: 1;
}

.newsletter__submit {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pille);
  background: var(--limette);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 27px;
  cursor: pointer;
}

.newsletter__submit:hover {
  background: #c9f24f;
}

/* Im Entwurf ist die Aufschrift auf 220 Pixel begrenzt und steht damit auch
   auf einem breiten Knopf mittig neben dem Symbol (Figma 39:3426). */
.newsletter__submit-text {
  max-width: 220px;
  text-align: center;
}

.newsletter__privacy {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.5;
  text-align: center;
}

.newsletter__privacy a {
  text-decoration: underline;
}

/* Auf den grünen Bändern ist der Fokusrahmen limettengrün (styles.css) — außer
   hier: der Knopf IST limettengrün, und der Rahmen läge mit seinen zwei Pixeln
   Abstand zwar auf dem Grün, führte den Blick aber auf eine Fläche derselben
   Farbe. Weiß trennt beides. */
.newsletter__submit:focus-visible {
  outline-color: var(--weiss);
}