/* * Newsletter-Anmeldung — mitgelieferte Grundstile. * * Reines CSS, kein Build noetig. Alle Werte ueber var() mit Rueckfallwert, * damit Projektangaben immer gewinnen — unabhaengig davon, in welcher * Reihenfolge die Stylesheets geladen werden. Deshalb werden hier auch * KEINE Variablen auf der Wurzel definiert. * * Das dunkle Feld ist bewusst nicht randlos: Inhaltselemente liegen in * diesem Projekt in einem .container. Ein randloses Band braucht die * Seitenvorlage "Homepage" — das ist eine eigene Entscheidung, siehe * README.md. */ /* * Randloses Band. Das Element bringt KEINE eigene Breitenbegrenzung mit — * die kommt aus dem .container darin. Voraussetzung ist eine Seitenvorlage * ohne umschliessenden Container ("Homepage"); sonst sitzt das Band in der * Inhaltsbreite und der Text darin steht versetzt. * * Das Raster stammt von Bootstrap (.row / .col-xl-*), nicht aus eigenem * grid-template — nur so steht der Text auf derselben Flucht wie die * uebrigen Abschnitte der Seite. */ .cb-newsletter-signup { background: var(--cb-newsletter-signup-bg, #083A2D); color: var(--cb-newsletter-signup-color, #E4EDE2); padding-block: var(--cb-newsletter-signup-padding-block, clamp(2.75rem, 7vw, 6rem)); } .cb-newsletter-signup-inner { row-gap: var(--cb-newsletter-signup-gap, 1.75rem); } /* * ⚠ BEIDE SPALTEN AN DER UNTERKANTE (Vorgabe Axel, 14.09.2026: „das * Eingabeformular, was jetzt an der oberen Kante ausgerichtet ist, an der * Unterseite ausrichten"). * * Vorher stand die Beschriftungsspalte auf `start` und das Feld begann * oben; die beiden Saeulen hingen ungleich hoch. Jetzt schliessen sie * unten buendig ab — die Ueberschrift darf nach oben wachsen, die * Grundlinie bleibt. * * ⚠ NUR AB xl. Darunter liegen die Spalten untereinander, und `end` haette * keine Wirkung ausser einem unnoetigen Sonderfall. */ @media (min-width: 1200px) { .cb-newsletter-signup-label, .cb-newsletter-signup-body { align-self: end; } } /* ---------- Beschriftungsspalte ---------- */ .cb-newsletter-signup-eyebrow { margin: 0 0 .55rem; font-family: var(--cb-newsletter-signup-mono, var(--bs-font-monospace)); font-size: var(--cb-newsletter-signup-eyebrow-size, .7rem); letter-spacing: var(--cb-newsletter-signup-eyebrow-spacing, .14em); text-transform: uppercase; color: var(--cb-newsletter-signup-eyebrow-color, #8AA693); } .cb-newsletter-signup-heading { margin: 0; text-wrap: balance; /* die Spalte ist schmal, sonst haengen einzelne Woerter */ font-size: var(--cb-newsletter-signup-heading-size, clamp(1.6rem, 3.4vw, 2.35rem)); color: var(--cb-newsletter-signup-heading-color, #FFFFFF); } .cb-newsletter-signup-text { margin-top: .9rem; font-size: var(--cb-newsletter-signup-text-size, .98rem); color: var(--cb-newsletter-signup-text-color, #B8C9BB); } .cb-newsletter-signup-text > :last-child { margin-bottom: 0; } /* ---------- Feld ---------- */ /* * ⛔ DIE BREITENGRENZE GEHOERT AN DAS FELD, NICHT AN DEN BLOCK. Sie stand * frueher hier auf 26 rem und galt damit auch fuer die Zeile aus * Schaltflaeche und Hinweis darunter. 🛠 Gemessen: Schaltflaeche 207 px, * Hinweis mindestens 256 px — zusammen mehr als 416 px, also brachen sie * um und standen untereinander statt nebeneinander. * * Jetzt begrenzt sie Beschriftung und Eingabefeld; die Aktionszeile * bekommt ihre eigene, groessere Grenze. */ .cb-newsletter-signup-field { display: grid; gap: .45rem; max-width: var(--cb-newsletter-signup-block-width, 42rem); } .cb-newsletter-signup-field-label, .cb-newsletter-signup-input { max-width: var(--cb-newsletter-signup-field-width, 26rem); } .cb-newsletter-signup-field-label { font-size: var(--cb-newsletter-signup-label-size, .9rem); font-weight: 600; color: var(--cb-newsletter-signup-label-color, #FFFFFF); } .cb-newsletter-signup-input { width: 100%; min-height: 44px; /* Zielgroesse fuer Finger und Zeigegeraet */ padding: .75rem .9rem; font-family: inherit; font-size: 1rem; color: var(--cb-newsletter-signup-input-color, #FFFFFF); background: var(--cb-newsletter-signup-input-bg, #051F17); border: 1px solid var(--cb-newsletter-signup-input-border, #5E9077); border-radius: var(--cb-newsletter-signup-radius, 2px); } .cb-newsletter-signup-input::placeholder { color: var(--cb-newsletter-signup-placeholder-color, #9DB3A4); } .cb-newsletter-signup-hint { /* `min-inline-size` statt einer festen Breite: Der Hinweis nimmt, was neben der Schaltflaeche uebrig ist, und rueckt darunter, sobald es enger als 16 rem wird. */ flex: 1 1 16rem; margin: 0; font-size: var(--cb-newsletter-signup-hint-size, .84rem); line-height: 1.5; color: var(--cb-newsletter-signup-hint-color, #A8BDAC); } /* Der erste Satz traegt die Nachricht und steht deshalb in eigener Zeile. */ .cb-newsletter-signup-hint-stark { display: block; color: var(--cb-newsletter-signup-label-color, #FFFFFF); } .cb-newsletter-signup-hint-link { color: var(--cb-newsletter-signup-button-bg, #94B622); text-underline-offset: .2em; } /* * Fehlerzustand nach der Hausvorgabe: roter Rahmen, Symbol rechts im Feld, * konkrete Meldung. :user-invalid statt :invalid — sonst faerbt sich das * Feld schon rot, bevor jemand etwas eingegeben hat. */ .cb-newsletter-signup-error { display: none; margin: 0; font-size: var(--cb-newsletter-signup-error-size, .88rem); color: var(--cb-newsletter-signup-error-color, #FFB4A8); } .cb-newsletter-signup-input:user-invalid { border-color: var(--cb-newsletter-signup-error-border, #FF8A7A); box-shadow: 0 0 0 3px var(--cb-newsletter-signup-error-glow, rgba(255, 138, 122, .22)); padding-right: 2.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23B3261E'/%3E%3Crect x='9' y='4.6' width='2' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='10' cy='14.4' r='1.2' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 20px 20px; } .cb-newsletter-signup-input:user-invalid ~ .cb-newsletter-signup-error { display: block; } .cb-newsletter-signup-input:user-invalid ~ .cb-newsletter-signup-hint { display: none; } /* * Schaltflaeche und Hinweis nebeneinander, an der Unterkante des Feldes. * * Vorgabe Axel, 14.09.2026: „Der Button soll bei der Unterkante vom Text * links daneben stehen." Also: Schaltflaeche links, Hinweis rechts, beide * auf derselben Grundlinie. * * ⚠ `align-items: end` UND NICHT `center`. Der Hinweis ist mehrzeilig, die * Schaltflaeche nicht; zentriert saehe sie aus, als schwebe sie in der * Mitte des Absatzes. An der Grundlinie sitzt sie dort, wo der Text * aufhoert. * * ⚠ DIE SCHALTFLAECHE SCHRUMPFT NICHT. `flex-shrink: 0` — ohne das quetscht * der laengere Hinweis sie zusammen, bis die Beschriftung umbricht. */ .cb-newsletter-signup-aktion { display: flex; flex-wrap: wrap; align-items: end; gap: .9rem 1.1rem; margin-top: .35rem; } /* ---------- Schaltflaeche ---------- */ .cb-newsletter-signup-button { flex: 0 0 auto; min-height: 44px; padding: .72rem 1.35rem; font-family: inherit; font-size: .93rem; font-weight: 600; color: var(--cb-newsletter-signup-button-color, #083A2D); background: var(--cb-newsletter-signup-button-bg, #94B622); border: 1px solid transparent; border-radius: var(--cb-newsletter-signup-radius, 2px); cursor: pointer; } .cb-newsletter-signup-button:hover:not(:disabled) { background: var(--cb-newsletter-signup-button-bg-hover, #A4C449); } /* * ---------- Stillgelegt ---------- * * ⚠ ES MUSS ZU SEHEN SEIN, NICHT NUR ZU ERFAHREN. Ein Feld, das aussieht wie * ein Feld und nichts tut, ist eine Falle. Gedaempfte Farbe und der * Zeiger „nicht erlaubt" sagen es, bevor jemand tippt; der Hinweis daneben * sagt, warum. * * ⛔ NICHT UNTER DEN KONTRAST GEDAEMPFT. `opacity` auf dem ganzen Element * waere der kurze Weg und wuerde den Text mit abschwaechen — bei .55 * reisst er AA. Stattdessen sind Farben einzeln gesetzt und nachgerechnet. */ .cb-newsletter-signup-input[readonly] { cursor: not-allowed; color: var(--cb-newsletter-signup-input-ruhe-color, #C6D6C9); background: var(--cb-newsletter-signup-input-ruhe-bg, #0A2A20); border-color: var(--cb-newsletter-signup-input-ruhe-border, #3F6153); } /* * 🛠 Nachgerechnet am 14.09.2026 gegen den Grund #083A2D: * Hinweistext 6,37 : 1 * erster Satz 12,70 : 1 * Verweis 5,43 : 1 * Feldinhalt 10,16 : 1 * Alle ueber der AA-Schwelle von 4,5. * * ⚠ DIE SCHALTFLAECHE LIEGT BEI 3,92 : 1 — UND DAS IST IN ORDNUNG. WCAG * 1.4.3 nimmt Text in INAKTIVEN Bedienelementen ausdruecklich von der * Kontrastanforderung aus. Sie soll gedaempft aussehen; genau das ist ihre * Aussage. Die Information, warum sie nicht geht, steht im Hinweis daneben * — und der hat 6,37. */ .cb-newsletter-signup-button:disabled { cursor: not-allowed; color: var(--cb-newsletter-signup-button-ruhe-color, #0E2A20); background: var(--cb-newsletter-signup-button-ruhe-bg, #6C8A4A); border-color: transparent; }