/* Groninger Sieben Newsletter · Website, Grundlage
 *
 * Was die Formulare zum Funktionieren brauchen, unabhängig von der
 * Gestaltung: Anordnung, Falle für Programme, Hinweise nur für
 * Screenreader, Adressen ohne Trennung, sichtbare Fehlermeldung.
 * Gilt immer. Mit »Gestaltung der Website verwenden« (Einstellungen ›
 * Anmeldung) ist das die einzige Stilvorlage des Moduls, Schrift, Felder
 * und Knöpfe kommen dann ganz aus der Website.
 * (c) 2026 Christ Medienproduktion */

.nwl-web form { display: grid; gap: 1.1em; margin: 0; }
/* Grid-Elemente sind sonst mindestens so breit wie ihr Inhalt; eine lange
   Adresse schöbe das Formular über den Rand. */
.nwl-web form > * { min-width: 0; }
.nwl-web__feld { display: grid; gap: .35em; }

.nwl-web__haken {
    display: flex;
    gap: .6em;
    align-items: flex-start;
    min-height: 2.25em;
    cursor: pointer;
}
/* Beschreibung einer Liste unter ihrem Namen, auch mit der Gestaltung der
   Website (vorher liefen beide zusammen: »Abtei-NewsletterVeranstaltungen«). */
.nwl-web__haken .nwl-web__leise { display: block; }

/* Nur für Screenreader (Hinweis »öffnet in neuem Tab«). */
.nwl-web__unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.nwl-web__fehler {
    margin: 0;
    padding: .7em 1em;
    border: 1px solid #b94242;
    border-radius: 6px;
    background: color-mix(in srgb, #b94242 10%, transparent);
}

/* Adressen werden nie getrennt. Ist eine breiter als der Platz, wird ihre
   Schrift kleiner (--nwl-zeichen = Zahl ihrer Zeichen aus der Vorlage,
   0,5 em = mittlere Zeichenbreite), aber nie unter 12 px: lesbar geht vor.
   Was dann noch übersteht, lässt sich im eigenen Kasten seitlich schieben;
   die Seite selbst verrutscht nicht. Gemessen 24.09.2026 bei 320 px mit
   einer Adresse von 68 Zeichen. */
.nwl-web { container-type: inline-size; }
.nwl-web__adresse {
    /* Im Satz, solange sie passt; sonst als Ganzes in die nächste Zeile
       (bis 2026.10.01.12 immer eine eigene Zeile: »Für / Adresse / ist …«). */
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    font-size: max(12px, min(1em, calc(100cqi / (var(--nwl-zeichen, 30) * .5))));
}

/* Adresse mitten im Satz: bleibt in der Zeile, wenn sie passt, sonst rückt
   sie als Ganzes in die nächste; nie getrennt. */
.nwl-web__adresse-satz {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: bottom;
    white-space: nowrap;
}

/* Falle für Programme: für Menschen unsichtbar, auch für Screenreader. */
.nwl-web__falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.nwl-web__inhalt img { max-width: 100%; height: auto; }

/* Kästchen und Auswahlknöpfe immer sichtbar. Manche Themes (HTML5 UP, so bei
   der Abtei Brauweiler) blenden jede Checkbox aus (opacity 0, appearance
   none) und zeichnen ein Ersatzkästchen über »input + label:before«. Hier
   steckt das Kästchen im Label, der Ersatz entsteht nie: Häkchen unsichtbar,
   Anmeldung unmöglich (gefunden 09.10.2026 auf abtei-brauweiler.eu). */
.nwl-web input[type="checkbox"],
.nwl-web input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    position: static;
    display: inline-block;
    float: none;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin: .2em 0 0;
    opacity: 1;
    z-index: auto;
    pointer-events: auto;
}

/* Einstellungsseite: Adresse, Ihre Angaben, Ihre Newsletter, Speichern, dann
   abgesetzt Abmelden. Die Ordnung kommt aus Überschriften und Abständen, nicht
   aus Rahmen; so trägt sie auch mit der Gestaltung der Website. */
.nwl-web [hidden] { display: none !important; }
.nwl-web__fuer { display: grid; gap: .25em; margin: 0 0 1.8em; }
.nwl-web__fuer p { margin: 0; }
.nwl-web--profil form { gap: 1.8em; }
.nwl-web__abschnitt { display: grid; gap: .9em; min-width: 0; margin: 0; padding: 0; border: 0; }
.nwl-web__zwischen { margin: 0; font-size: 1.1em; font-weight: 700; line-height: 1.3; }
/* Gefloatet verliert die Legende ihre Sonderstellung im Rahmen und steht
   wie jede Überschrift im Raster des Abschnitts. */
.nwl-web legend.nwl-web__zwischen { float: left; width: 100%; padding: 0; }
.nwl-web__abschnitt > p { margin: 0; }
/* Alle Newsletter abgewählt: muss auch mit fremder Gestaltung auffallen. */
.nwl-web__warnung {
    margin: 0;
    padding: .7em 1em;
    border: 1px solid #b94242;
    border-radius: 6px;
    background: color-mix(in srgb, #b94242 10%, transparent);
    font-weight: 700;
}
.nwl-web__ganz { display: grid; gap: .8em; margin-top: 2.6em; }
.nwl-web__ganz p,
.nwl-web__ganz form { margin: 0; }