/*
  sv-newsletter.css - die Newsletter-Anmeldung ueber dem Fussbereich (seit 23.09.2026)

  Anlass (Norman, 23.09.2026): "Baue den newsletter auf jeder seite ueber den footer ein."
  Bis dahin stand die Anmeldung nur auf der Startseite; Blog, Rechtliches, Buch, Produkte und
  alle statischen Seiten hatten keine. Wer ueber die Suche auf einem Blogartikel landete - und
  das ist der haeufigste Einstieg - konnte sich nirgends eintragen.

  Die Farbfuehrung steht weiter unten am Kasten selbst - vier Fassungen, drei davon falsch.

  Die Klassen tragen das Praefix svn-, damit sie mit dem gewachsenen CSS der einzelnen Seiten
  nicht kollidieren - dieselbe Vorsichtsmassnahme wie bei svf- im Fussbereich. Geschrieben wird
  der Block von scripts/sync-newsletter.mjs, geprueft vom Gate newsletter-sync.
*/
.svn{
  /* KEINE eigene Flaeche (Norman, 24.09.2026: "Nur den Kasten einbauen, egal welcher
     Hintergrund"). Vorher malte dieser Abschnitt einen hellen Streifen ueber die volle
     Breite - auf dunklen Seiten ein Fremdkoerper. Der Kasten steht jetzt direkt auf dem
     Untergrund der jeweiligen Seite. Genau dafuer ist die Farbe gewaehlt: Petrol haelt
     gegen beide (4,96:1 hell, 3,11:1 dunkel). */
  background:transparent;
  padding:56px 28px;
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
  text-align:center;
}
/* EIGENE FARBE STATT HELL-AUF-HELL ODER DUNKEL-AUF-DUNKEL (24.09.2026).
   Vier Fassungen, drei davon falsch, und der Fehler war jedes Mal derselbe Denkfehler:
   1. dunkles Band ueber die volle Breite - Aussage und Feld zu weit auseinander
   2. dasselbe dunkle Band, mittig - Norman: "in dem dunklen Bereich geht die Maske unter"
   3. heller Kasten auf heller Flaeche - Norman: "und dann baust du hell auf hell und
      findest das besser?" Gemessen: Creme auf Papier ist 1,07:1. Der Kasten war
      buchstaeblich unsichtbar.
   Normans Analyse traf den Kern: Der Kasten steht mal auf heller, mal auf dunkler
   Flaeche - eine Farbe vom Rand des Spektrums verschwindet deshalb IMMER auf einer der
   beiden. Gebraucht wird eine Farbe aus der MITTE. Gewaehlt ist das Petrol-Blau der
   Marke in aufgehellter Form: 4,96:1 gegen die helle Flaeche, 3,11:1 gegen den dunklen
   Grund - der ausgeglichenste Wert unter den Kandidaten, die weder rot noch rosa sind,
   und der Gegenpol zum Messing der Knoepfe.

   Drei Werte haengen daran und wurden nachgerechnet, nicht geschaetzt:
   - Text auf dem Kasten braucht volle Deckkraft (0,78 ergab nur 3,70:1, AA verlangt 4,5).
   - Der Knopf ist das HELLE Messing #D9BE87: das normale #C4A567 kam auf dem Petrol nur
     auf 2,42:1 Kantenkontrast, noetig sind 3,0.
   - Das Eingabefeld bleibt mit 5,50:1 das hellste Element im Kasten. Genau das war
     Normans Beschwerde von Anfang an: "die Maske geht unter". */
.svn-kasten{
  max-width:620px;margin:0 auto;
  background:#2E6F7E;
  border:1px solid rgba(196,165,103,.5);
  padding:40px 36px;
}
.svn-titel{
  font-family:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  font-size:26px;line-height:1.2;letter-spacing:-.4px;
  color:#F4EFE4;margin:0 0 10px;font-weight:400;
}
.svn-sub{margin:0 0 24px;font-size:15px;color:#F4EFE4}

/* nowrap ist Absicht. Mit `wrap` brach das Formular auf eine zweite Zeile um, obwohl Feld
   und Knopf exakt hineinpassten - eine Subpixel-Ueberschreitung reicht dafuer, und
   align-content streckte dann beide Zeilen auf volle Hoehe (Feld und Knopf 94 statt 43 px,
   gesehen am 23.09.2026 auf dem Test-Server). Das Feld schrumpft stattdessen. */
.svn-form{display:flex;gap:10px;flex-wrap:nowrap;align-items:stretch;margin:0}
/* Beschriftung fuer Screenreader. Der Platzhalter allein ist keine Beschriftung -
   er verschwindet beim Tippen, und genau dann braucht man sie. */
.svn-versteckt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.svn-form input[type=email]{
  flex:1 1 auto;min-width:0;padding:14px 16px;
  background:#FDFBF6;color:#0E1A1F;
  border:1px solid #FDFBF6;border-radius:0;
  font-family:inherit;font-size:15px;outline:none;text-align:left;
  transition:box-shadow 160ms cubic-bezier(.23,1,.32,1);
}
.svn-form input[type=email]::placeholder{color:rgba(14,26,31,.5)}
.svn-form input[type=email]:focus-visible{outline:2px solid #C4A567;outline-offset:2px}
.svn-form button{
  flex:0 0 auto;padding:14px 28px;border:none;border-radius:0;cursor:pointer;
  /* Derselbe Knopf-Verlauf wie ueberall (Norman, 25.09.2026: „Mach den Newsletter
     Kasten mit! Zurueckbauen koennen wir das immer noch").
     BEWUSSTE ABWEICHUNG VON DER KANTENREGEL, damit es spaeter niemand fuer ein
     Versehen haelt: Gegen den Petrol-Kasten #2E6F7E misst dieser Verlauf oben
     2,88:1 und unten 1,46:1 - das untere Ende liegt unter den 3,0, die ein
     Bedienelement zur Abgrenzung braucht. Vorher stand hier #D9BE87 (3,16),
     am 24.09. genau deswegen gewaehlt. Der Knopftext bleibt unkritisch
     (Ink auf dem Verlauf: 8,95 oben / 4,54 unten).
     Rueckbau = diese Regel auf linear-gradient(180deg,#FFE09F,#D9BE87). */
  background:linear-gradient(180deg,#D6B470 0%,#967E4E 100%);color:#0E1A1F;
  font-family:inherit;font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), background-color 160ms ease;
}
.svn-form button:hover{background:linear-gradient(180deg,#E3C384 0%,#A98C58 100%)}
.svn-form button:active{transform:scale(.97)}
.svn-form button:disabled{cursor:default;opacity:.85}
.svn-form button:focus-visible{outline:2px solid #FDFBF6;outline-offset:2px}
.svn[data-status=ok] .svn-form button{background:#8FB58D}

.svn-klein{
  margin:16px 0 0;
  font-size:11px;line-height:1.6;color:rgba(244,239,228,.95);
}
.svn-klein a{color:#F4EFE4;text-decoration:underline;text-underline-offset:2px}

/* Rueckmeldung. Sie ersetzt nichts, sie kommt darunter - ein Feld, das beim Absenden
   verschwindet, laesst den Nutzer raten, ob er sich vertippt hat. */
.svn-meldung{
  margin:16px 0 0;padding:10px 14px;font-size:13px;line-height:1.5;text-align:left;
  border:1px solid rgba(143,181,141,.45);background:rgba(143,181,141,.12);color:#8FB58D;
}
.svn[data-status=fehler] .svn-meldung{
  border-color:rgba(255,133,85,.45);background:rgba(255,133,85,.1);color:#FF8555;
}

@media(max-width:860px){
  .svn{padding:40px 22px}
  .svn-kasten{padding:30px 22px}
  .svn-titel{font-size:23px}
}

/* Unter 520 px wird das Feld sonst schmaler als die Platzhalteradresse. */
@media(max-width:520px){
  .svn-form{flex-direction:column}
  .svn-form button{width:100%}
}

/* Auf Papier hat ein Anmeldeformular nichts verloren - wie beim Fussbereich. */
@media print{ .svn{display:none !important} }