/* Theme Name: Wonnegau-Berggemeinden Theme URI: https://wonnegau-berggemeinden.de Author: Gesamtkirchengemeinde Wonnegau-Berggemeinden Description: Eigenes Block-Theme der GKG Wonnegau-Berggemeinden. Kantig, flächig, ohne Schatten. Alle Werte stammen aus theme.json, das aus 07_Design/design-system/tokens.css abgeleitet ist. Version: 2.12.2 Requires at least: 6.5 Tested up to: 6.6 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: wonnegau */ /* ============================================================ BAUSTEINE Kein Farbwert, keine Schriftgröße, kein Abstand steht hier als Zahl. Alles kommt aus theme.json (Konvention 1). Ausnahmen sind reine Formwerte ohne Gestaltungsaussage: 0, 50%, 100%, 1fr und dergleichen. ============================================================ */ :root{ --wbg-rand: clamp(1rem, 4vw, 3rem); } *,*::before,*::after{ box-sizing:border-box; } /* `hidden` muss stärker sein als jede eigene `display`-Regel. Der Browser setzt für `[hidden]` nur `display: none` in seinem eigenen Stylesheet — jede Klasse von uns mit `display: flex` oder `grid` schlägt das. Am 10.09.2026 zweimal am selben Tag erlebt: die versteckte Personengruppe blieb sichtbar, und danach der Knopf „Pat:in hinzufügen", der nach der vierten Person verschwinden sollte (`hidden = true`, gerechnet aber `display: flex`, 164 × 44 px). Wer `element.hidden` setzt und nur das Attribut nachliest, misst nicht, was der Browser daraus macht (Konvention 16 und 48). */ [hidden]{ display: none !important; } body{ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* Sichtbarer Fokus überall, auch dort, wo theme.json nicht hinreicht. Konvention 10: zu jedem :hover gehört ein :focus-visible. */ /* ============================================================ RÜCKMELDUNG BEIM ZEIGEN — die Regel, festgelegt 11.09.2026 Anlass: Nils hat gezählt bekommen, was hier gewachsen war — 18 Regeln mit ACHT verschiedenen Verhaltensweisen. Einmal wurde die Schrift dunkel, einmal die Fläche, einmal geschah nichts. Drei davon hatte ich am selben Tag dazugelegt, indem ich Einzelfälle reparierte, statt die Regel aufzuschreiben. Der erste Versuch war die KANTE: ein 2-px-Rand erscheint, die Fläche geht eine Stufe. Nils hat sie am Bildschirm verworfen, und die Zahlen gaben ihm recht — die Zeigefläche setzt sich vom Grund nur um 1,094 (hell) und 1,039 (dunkel) ab. Das sieht man nicht. Entschieden wurde am Musterblatt 07_Design/entwuerfe/hover-systeme.html, an dem drei Systeme nebeneinander standen. DIE REGEL: Beim Zeigen und bei Tastaturfokus TAUSCHEN Fläche und Schrift. Die Fläche wird --tinte-tief, die Schrift --grund. Das gilt für ALLES Bedienbare, ohne Ausnahme — auch auf dem Aufmacher und im Fuß. Genau das ist der Grund für diese Wahl: die stärkste Tinte ist per Definition der größte Abstand zum Grund, in beiden Fassungen. Gemessen 15,96:1 (hell) und 13,84:1 (dunkel); die Zeigefläche selbst setzt sich mit 15,96 bzw. 15,91 vom Grund ab. Es gibt hier nichts mehr, was je nach Untergrund anders wäre. In der dunklen Fassung ist --tinte-tief hell und --grund dunkel. Der Tausch dreht sich also mit, ohne dass eine zweite Regel nötig wäre. Wer hier etwas Neues baut, nimmt den Tausch. Wer davon abweicht, schreibt den gemessenen Grund daneben. ============================================================ */ /* Sichtbarer Fokus überall, auch dort, wo theme.json nicht hinreicht. */ :where(a, button, input, select, textarea, summary):focus-visible{ outline: 3px solid var(--wp--preset--color--rost); outline-offset: 2px; border-radius: var(--wp--custom--radius); } /* ---------- Nur für Vorlesesoftware ---------- Sichtbar ausgeblendet, aber weiterhin vorgelesen. Gebraucht dort, wo ein Knopf am Telefon nur sein Zeichen zeigt, seinen Namen aber behalten muss. `clip-path` statt `display:none`, sonst wäre der Name auch für die Vorlesesoftware weg. */ .wbg-nur-sr{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Bedienhilfe: größere Schrift ---------- Der Wert steht in theme.json, abgeleitet aus tokens.css. Er wirkt auf alles, was in rem gerechnet ist; die vw-Anteile der clamp()-Werte bleiben unberührt — sonst sprengen die Aufmacher schmale Geräte. Der Zustand hängt am Wurzelelement, damit ein einziges Attribut genügt und nichts nachgerechnet werden muss. */ :root[data-schrift="gross"]{ font-size: var(--wp--custom--schrift-gross); } /* ---------- Dunkle Fassung ---------- Entschieden am 11.09.2026 von Nils; hebt den Beschluss vom 08.09.2026 auf. Die Werte stehen in tokens.css und abgeleitet in theme.json — hier steht KEIN Farbwert, nur die Umhängung (Konvention 1). Warum nur EIN Block und keiner zusätzlich in @media (prefers-color-scheme: dark): zwei Blöcke mit denselben Werten laufen früher oder später auseinander. Das Kopfskript setzt data-farbe vor dem Zeichnen auch dann, wenn die Systemeinstellung gilt. Preis: ohne JavaScript bleibt es hell — ein Verzicht auf eine Annehmlichkeit, kein Ausfall. color-scheme ist der Teil, den kein Hintergrund erreicht: Rollbalken, Überzieh-Bereich und die nativen Bedienelemente im Formular richten sich danach. */ :root{ color-scheme: light; } :root[data-farbe="dunkel"]{ color-scheme: dark; --wp--preset--color--grund: var(--wp--custom--dunkel--grund); --wp--preset--color--grund-ruhig: var(--wp--custom--dunkel--grund-ruhig); --wp--preset--color--tinte: var(--wp--custom--dunkel--tinte); --wp--preset--color--tinte-tief: var(--wp--custom--dunkel--tinte-tief); --wp--preset--color--tinte-still: var(--wp--custom--dunkel--tinte-still); --wp--preset--color--auf-farbe: var(--wp--custom--dunkel--auf-farbe); --wp--preset--color--bordeaux: var(--wp--custom--dunkel--bordeaux); --wp--preset--color--petrol: var(--wp--custom--dunkel--petrol); --wp--preset--color--navy: var(--wp--custom--dunkel--navy); --wp--preset--color--gold: var(--wp--custom--dunkel--gold); --wp--preset--color--rost: var(--wp--custom--dunkel--rost); --wp--custom--auf-gold: var(--wp--custom--dunkel--auf-gold); /* Gold ist in BEIDEN Fassungen eine helle Fläche — die Schrift darauf bleibt also dunkel. Ohne dieses Token griffe hier --tinte-tief, und das ist im Dunkeln hell: gemessen 2,39:1 am Merker „Für alle" im Kalender, gefunden beim Nachmessen auf Staging. */ --wp--custom--auf-gold-tinte: var(--wp--custom--dunkel--auf-gold-tinte); --wp--custom--monat-anteil: var(--wp--custom--dunkel--monat-anteil); --wp--custom--bordeaux-hell: var(--wp--custom--dunkel--bordeaux-hell); --wp--custom--kante-auf-gold: var(--wp--custom--dunkel--kante-auf-gold); --wp--custom--linie: var(--wp--custom--dunkel--linie); --wp--custom--linie-zart: var(--wp--custom--dunkel--linie-zart); --wp--custom--linie-hell: var(--wp--custom--dunkel--linie-hell); --wp--custom--feld: var(--wp--custom--dunkel--grund-ruhig); } /* Der Bereich um die Seite herum. Sie ist auf 90 rem gedeckelt; jenseits davon liegt Rand. Der Hintergrund stand bisher nur am body — das genügt meistens, aber nicht überall (kurze Seiten, Überziehen am Telefon). Ausdrücklich ist sicherer. */ html{ background: var(--wp--preset--color--grund-ruhig); } /* ---------- Bahn und Band ---------- */ .wbg-bahn{ max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-inline: var(--wbg-rand); } .wbg-bahn--weit{ max-width: var(--wp--style--global--wide-size); } .wbg-band{ padding-block: var(--wp--preset--spacing--70); } .wbg-band--bordeaux{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } .wbg-band--petrol { background: var(--wp--preset--color--petrol); color: var(--wp--preset--color--auf-farbe); } .wbg-band--navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--auf-farbe); } .wbg-band--ruhig { background: var(--wp--preset--color--grund-ruhig); } /* Auf Farbfläche erben Überschriften die helle Schrift, statt bordeauxrot auf Bordeaux zu stehen. */ .wbg-band--bordeaux :is(h1,h2,h3,h4), .wbg-band--petrol :is(h1,h2,h3,h4), .wbg-band--navy :is(h1,h2,h3,h4){ color: inherit; } .wbg-kappe{ font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; font-weight: 600; margin: 0 0 var(--wp--preset--spacing--30); } .wbg-lead{ font-size: var(--wp--preset--font-size--satz); max-width: 34em; margin-top: var(--wp--preset--spacing--30); } /* ---------- Knopf ---------- */ .wbg-knopf{ display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--ziel); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); border: var(--wp--custom--kante-stark) solid var(--wp--preset--color--bordeaux); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); font-weight: 700; text-decoration: none; text-align: center; } /* Alle vier Knopfvarianten, eine Regel. Der Tausch funktioniert auf jedem Untergrund, deshalb braucht keine Variante eine eigene Zeile mehr — bis zum 11.09.2026 hatte jede eine andere. */ .wbg-knopf:hover, .wbg-knopf:focus-visible{ background: var(--wp--preset--color--tinte-tief); border-color: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } /* `--leer` trug die volle Kante schon in Ruhe — dann kann sie beim Zeigen nicht mehr erscheinen. Sie steht jetzt zurückgenommen und wird beim Zeigen voll. */ .wbg-knopf--leer{ background: transparent; color: var(--wp--preset--color--bordeaux); border-color: var(--wp--custom--linie); } /* ZWEI MÄNGEL, gefunden am 11.09.2026 — den ersten hat Nils gesehen, den zweiten das Nachmessen daneben. 1. `--hell` hatte gar keine eigene Zeigeregel. Damit griff die des Grundknopfes: die Fläche wechselte auf bordeaux-hell, die SCHRIFT blieb aber bordeaux. Gemessen 1,26:1 hell und 1,16:1 dunkel — die Beschriftung verschwand beim Zeigen praktisch. Das ist kein fehlender Effekt, das ist ein Mangel nach WCAG 1.4.3. 2. `--leer` füllte beim Zeigen mit --linie-zart. In der dunklen Fassung ist das ein heller Schleier, der den Grund aufhellt und die bordeauxfarbene Schrift auf 3,21:1 drückt. Beide bekommen eine ruhige Füllung; was darauf den Wechsel trägt, ist je nach Untergrund verschieden — siehe die beiden Regeln unten. Zu jedem :hover gehört ein :focus-visible (Konvention 10). */ .wbg-knopf--hell{ background: var(--wp--preset--color--auf-farbe); color: var(--wp--preset--color--bordeaux); border-color: var(--wp--preset--color--auf-farbe); } .wbg-knopf--linie{ background: transparent; color: var(--wp--preset--color--auf-farbe); border-color: var(--wp--custom--linie-hell); } /* ---------- 0 Bedienleiste ---------- Eine eigene, schmale Zeile über dem Kopf. Sie ist bewusst nicht Teil der Kopfzeile: die ist mit Bildmarke und Navigation bereits voll — gemessen am 11.09.2026 auf Staging, wo schon die 47 px der Bildmarke die Menüzeile in der Tablet-Breite auf eine zweite Zeile drücken. Ein weiterer Punkt IN der Kopfzeile hätte dasselbe getan. Hier ist Platz für Sprachumschalter und, falls er je beschlossen wird, einen Umschalter hell/dunkel. Beide sind nicht gebaut. Der Knopf bekommt die vollen 44 px (--ziel). Das ist hier keine Kür: eine Bedienhilfe mit einem zu kleinen Bedienelement wäre ein Widerspruch in sich. WCAG 2.2 AA verlangte nur 24 px. */ .wbg-bedienleiste{ background: var(--wp--preset--color--grund-ruhig); border-bottom: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); } .wbg-bedienleiste__inhalt{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); } .wbg-schriftschalter, .wbg-farbschalter{ display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--ziel); padding-inline: var(--wp--preset--spacing--30); background: none; border: 0; border-radius: var(--wp--custom--radius); font: inherit; font-size: var(--wp--preset--font-size--klein); font-weight: 700; color: var(--wp--preset--color--bordeaux); /* 9,20:1 auf ruhiger Fläche */ cursor: pointer; } /* Konvention 10: zu jedem :hover gehört ein :focus-visible, und die Zustandsanzeige steht außerhalb von prefers-reduced-motion — sie ist Rückmeldung, nicht Bewegung. Hier gibt es ohnehin keine. */ .wbg-schriftschalter, .wbg-farbschalter{ border: var(--wp--custom--kante-stark) solid transparent; } .wbg-schriftschalter:hover, .wbg-schriftschalter:focus-visible, .wbg-farbschalter:hover, .wbg-farbschalter:focus-visible{ background: var(--wp--preset--color--tinte-tief); border-color: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } /* Eingeschaltet: gefüllt. Nicht allein über Farbe erkennbar — der Zustand steht zusätzlich in aria-pressed und wird vorgelesen. */ .wbg-schriftschalter[aria-pressed="true"], .wbg-farbschalter[data-zustand="dunkel"]{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); /* 10,06:1 */ } .wbg-schriftschalter__zeichen, .wbg-farbschalter__zeichen{ font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--satz); font-weight: 800; line-height: 1; } .wbg-schriftschalter__zeichen sup{ font-size: .6em; line-height: 1; } /* Am Telefon bleibt nur das Zeichen stehen. Das Wort verschwindet sichtbar, NICHT aus dem Zugänglichkeitsbaum — sonst hätte der Knopf keinen Namen mehr. */ @media (max-width: 30rem){ .wbg-schriftschalter__wort, .wbg-farbschalter__wort{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- 1 Kopfleiste ---------- */ .wbg-kopf{ background: var(--wp--preset--color--grund); border-bottom: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); } .wbg-kopf__inhalt{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); flex-wrap: wrap; padding-block: var(--wp--preset--spacing--30); } /* Bewusste Ausnahme von der 44-px-Regel: die Wortmarke misst 35–38 px. WCAG 2.2 AA verlangt 24 px, das ist erfüllt. Sie auf 44 zu zwingen würde den Kopf auseinanderziehen, und sie ist kein Bedienelement, das man wiederholt trifft. Gemessen am 08.09.2026. */ .wbg-marke{ display: flex; align-items: center; gap: var(--wp--preset--spacing--30); line-height: 1.15; text-decoration: none; } /* Die Bildmarke ist 3:2. Die Höhe kommt aus der Abstandsleiter, damit hier keine freie Zahl steht (Konvention 1); 2 rem ergeben 47 × 32 px neben einem 36 px hohen Schriftzug. `flex: none`, sonst staucht sie die Flexbox, wenn es eng wird — und eine gestauchte Marke wäre eine andere Marke. */ .wbg-marke__zeichen{ display: block; flex: none; height: var(--wp--preset--spacing--60); width: auto; } .wbg-marke__ober{ display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--klein); font-weight: 400; color: var(--wp--preset--color--tinte-still); } .wbg-marke__haupt{ display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--satz); font-weight: 800; color: var(--wp--preset--color--tinte-tief); letter-spacing: var(--wp--custom--enge--display); } .wbg-nav{ display: flex; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); flex-wrap: wrap; font-size: var(--wp--preset--font-size--klein); font-weight: 600; } /* Gemessen am 08.09.2026: mit padding allein wurden die Punkte 40 px hoch. Erst min-height plus align-items bringt sie auf das Ziel. */ .wbg-nav a{ display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); text-decoration: none; border-bottom: var(--wp--custom--kante-stark) solid transparent; } /* Der Innenabstand steht schon in Ruhe da und wird durch einen negativen Außenabstand ausgeglichen: so bekommt die Zeigefläche einen Körper, ohne dass sich beim Zeigen etwas verschiebt. */ .wbg-nav a{ padding-inline: var(--wp--preset--spacing--20); margin-inline: calc(var(--wp--preset--spacing--20) * -1); border-radius: var(--wp--custom--radius); } .wbg-nav a:hover, .wbg-nav a:focus-visible{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); border-bottom-color: var(--wp--preset--color--tinte-tief); } /* Keine Sonderregel mehr für den Knopf im Menü: er ist ein Knopf und bekommt den cremefarbenen Ring wie jeder andere. */ /* ---------- Mobilmenü ---------- Der Entwurf zeigt am Telefon einen Schalter mit dem Wort „Menü" daneben — nicht nur drei Striche. Das Wort bleibt, weil ein Symbol allein nicht benannt ist. */ .wbg-menue-schalter{ display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--ziel); padding-inline: var(--wp--preset--spacing--20); background: none; border: 0; border-radius: var(--wp--custom--radius); font: inherit; font-weight: 700; color: var(--wp--preset--color--bordeaux); cursor: pointer; } .wbg-menue-schalter__striche{ display: grid; gap: 4px; width: 1.4rem; } .wbg-menue-schalter__striche span{ display: block; height: 2px; background: currentColor; } @media (max-width: 47.999rem){ .wbg-menue-schalter{ display: inline-flex; } .wbg-nav{ display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); margin-top: var(--wp--preset--spacing--30); } /* Eingeklappt wird NUR, wenn das Skript das Attribut gesetzt hat. Andersherum — display:none als Ausgangszustand — wäre die Navigation ohne JavaScript verschwunden und die Seite am Telefon unbedienbar. Beim ersten Schreiben genau so falsch gemacht und beim Gegenlesen gefunden, 08.09.2026. */ .wbg-nav[data-offen="nein"]{ display: none; } .wbg-nav a{ border-bottom: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); padding-inline: 0; } .wbg-nav .wbg-knopf{ margin-top: var(--wp--preset--spacing--30); justify-content: center; border-bottom-color: var(--wp--preset--color--bordeaux); } } @media (min-width: 48rem){ .wbg-menue-schalter{ display: none; } .wbg-nav{ display: flex !important; } } /* ---------- 2 Aufmacher ---------- */ .wbg-hero{ display: grid; grid-template-columns: 1fr; background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } .wbg-hero__text{ padding: var(--wp--preset--spacing--60) var(--wbg-rand); display: flex; flex-direction: column; justify-content: center; } .wbg-hero__text > h1{ margin: 0 0 var(--wp--preset--spacing--30); color: inherit; } .wbg-hero__text > p{ margin: 0 0 var(--wp--preset--spacing--50); max-width: 26em; } /* Am Telefon laufen die beiden Knöpfe über die volle Breite und untereinander — so steht es im Mobil-Entwurf, und zwei halbe Knöpfe nebeneinander wären bei 320 px ohnehin zu schmal. */ .wbg-hero__knoepfe{ display: flex; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; } .wbg-hero__knoepfe .wbg-knopf{ flex: 1 1 100%; } @media (min-width: 30rem){ .wbg-hero__knoepfe .wbg-knopf{ flex: 0 1 auto; } } .wbg-hero__bild{ position: relative; min-height: 14rem; } .wbg-hero__bild img{ display: block; width: 100%; height: 100%; object-fit: cover; } /* Die Handschrift ist Zierde. Sie liegt nur über einer Abdeckung, nie direkt auf dem Bild, und ist für Screenreader unsichtbar. */ /* Die Abdeckung ist nicht Zierde, sondern Bedingung: ein Schlagschatten allein trägt auf einem hellen Motiv nicht, und der Weinstock ist hell. Der Verlauf liegt UNTER der Schrift und deckt nur die untere Ecke ab. */ .wbg-hero__bild::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(30,20,24,.62), rgba(30,20,24,0)); pointer-events: none; } .wbg-hand{ position: absolute; z-index: 1; right: var(--wp--preset--spacing--50); bottom: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--mittel); line-height: 1.15; color: var(--wp--preset--color--auf-farbe); pointer-events: none; } /* Ohne Bild entfällt beides ersatzlos. */ .wbg-hero__bild:not(:has(img))::after, .wbg-hero__bild:not(:has(img)) .wbg-hand{ display: none; } @media (min-width: 48rem){ .wbg-hero{ grid-template-columns: 1fr 1fr; } .wbg-hero__bild{ min-height: 22rem; } } /* ---------- 3 Zielgruppen-Kacheln ---------- */ .wbg-kacheln{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--wp--preset--spacing--30); } .wbg-kachel{ display: flex; flex-direction: column; text-decoration: none; min-height: var(--wp--custom--ziel); } /* height:auto MUSS dabeistehen. Das height-Attribut am ist eine Darstellungsvorgabe des Browsers; sie gibt dem Bild eine feste Höhe, und gegen eine feste Höhe kommt aspect-ratio nicht an. Ergebnis auf Staging am 08.09.2026: Kacheln 190 x 800 px statt 4:3, die Gesichter oben abgeschnitten. Gefunden erst am gerenderten Bild, nicht im Code. */ .wbg-kachel__bild{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* Seit dem 08.09.2026 zweizeilig: der Name, darunter klein die Jahre. Deshalb Spalte statt Zeile — der Pfeil sitzt jetzt in der Namenszeile. */ .wbg-kachel__leiste{ display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: var(--wp--preset--spacing--30); /* 1,2 rem ist die Schwelle, ab der Weiß auf Gold zulässig ist. Wer sie verkleinert, muss auf --tinte-tief umstellen. */ font-size: var(--wp--preset--font-size--kachel); font-family: var(--wp--preset--font-family--display); font-weight: 800; line-height: 1.15; min-height: 3.25rem; flex: 1; } .wbg-kachel--bordeaux .wbg-kachel__leiste{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } .wbg-kachel--petrol .wbg-kachel__leiste{ background: var(--wp--preset--color--petrol); color: var(--wp--preset--color--auf-farbe); } .wbg-kachel--navy .wbg-kachel__leiste{ background: var(--wp--preset--color--navy); color: var(--wp--preset--color--auf-farbe); } .wbg-kachel--gold .wbg-kachel__leiste{ background: var(--wp--preset--color--gold); color: var(--wp--custom--auf-gold); } /* Die Umkehr der Kachelleiste war schon vor dem 11.09.2026 hier — sie ist jetzt nicht mehr die Ausnahme, sondern die Regel für alles. */ .wbg-kachel:hover .wbg-kachel__leiste, .wbg-kachel:focus-visible .wbg-kachel__leiste{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } /* Ohne Bild wird die Farbfläche höher und trägt allein. Kein Platzhalter, keine Lücke. */ .wbg-kachel--ohne-bild .wbg-kachel__leiste{ min-height: 7.5rem; justify-content: flex-end; } .wbg-kachel__name{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); } /* Die Altersangabe ist eine Beiläufigkeit, keine zweite Überschrift: normale Stärke, kleiner Grad, etwas zurückgenommen. */ .wbg-kachel__alter{ display: block; font-family: var(--wp--preset--font-family--text); font-weight: 400; font-size: var(--wp--preset--font-size--mini); line-height: 1.3; opacity: .85; } /* Auf Gold trägt Weiß nur ab 1,2 rem fett (gemessen 3,20:1). Die kleine Zeile steht deshalb dort in --auf-gold-tinte, in der hellen Fassung 5,62:1. Auf Bordeaux, Petrol und Navy liegt --auf-farbe zwischen 8,1 und 10,3. Bis zum 11.09.2026 stand hier --tinte-tief. Das ist in der dunklen Fassung HELL, und die Zeile fiel auf 2,39:1 — gefunden beim flächendeckenden Nachmessen auf Staging, nicht beim Hinsehen. */ .wbg-kachel--gold .wbg-kachel__alter{ color: var(--wp--custom--auf-gold-tinte); opacity: 1; } /* ---------- 4 Programmband ---------- */ .wbg-programm__kopf{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; } .wbg-programm{ display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); } .wbg-karte{ background: var(--wp--preset--color--grund); color: var(--wp--preset--color--tinte); display: flex; flex-direction: column; text-decoration: none; } .wbg-karte__bild{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* Am Telefon liegt das Bild links neben dem Text, nicht darüber — so steht es im Mobil-Entwurf. Drei hohe Karten untereinander wären sonst ein sehr langer Weg bis zum nächsten Abschnitt. */ /* Waagerechte Karte NUR zwischen 26 und 48 rem. Bei 320 px lassen 38 % Bildbreite noch 178 px für den Text übrig — „Dorn-Dürkheim-Hillesheim-Wintersheim" braucht 269. Gemessen am 08.09.2026 auf Staging: die Karten wurden 710 und 1157 px hoch und die Seite lief 106 px über. Unter 26 rem bleibt die Karte deshalb senkrecht, so wie sie dort auch nachweislich funktioniert. */ @media (min-width: 26rem) and (max-width: 47.999rem){ .wbg-karte{ flex-direction: row; align-items: flex-start; } /* Der Flex-Gegenstand ist das , nicht das darin. Wer die Breite am Bild setzt, setzt 38 % von einem Elternteil, das selbst keine Breite hat — das Ergebnis waren Karten von 710 und 1157 px Höhe. Gemessen am 08.09.2026 auf Staging, zweimal: erst bei 320, dann bei 430 px. Die Breite gehört an das . */ .wbg-karte > picture{ display: block; flex: 0 0 38%; width: 38%; } .wbg-karte__bild{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* flex MUSS hier zurückgesetzt werden, nicht nur margin-top. Die Desktop-Regel gibt der bildlosen Karte flex:0 0 auto, damit ihr Text unten sitzt. In der waagerechten Mobilfassung heißt dasselbe flex-basis:auto aber „nicht schrumpfen" — gemessen am 08.09.2026 auf Staging: 306 px Inhalt in einer 288 px breiten Karte. Beim ersten Anlauf nur margin-top zurückgesetzt und den Überlauf dadurch vergrößert statt behoben. */ .wbg-karte--ohne-bild .wbg-karte__inhalt{ margin-top: 0; flex: 1 1 auto; } /* min-width:0 MUSS sein. Ein Flex-Element bekommt von sich aus min-width:auto und schrumpft deshalb nicht unter seinen längsten Inhalt — hier unter „Dorn-Dürkheim-Hillesheim-Wintersheim". Auf Staging bei 320 px gemessen: 2 px Überlauf der ganzen Seite. Der Umbruch an den Bindestrichen greift erst, wenn das Element überhaupt schrumpfen darf. */ .wbg-karte__inhalt{ min-width: 0; } .wbg-wo > span{ overflow-wrap: break-word; } } .wbg-karte__inhalt{ padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); flex: 1; } .wbg-karte h3{ font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--tinte-tief); margin: 0; } .wbg-wann{ font-weight: 700; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--bordeaux); } /* Raum und Gemeinde stehen IMMER untereinander. Ein Mittelpunkt dazwischen bliebe bei „Dorn-Dürkheim-Hillesheim-Wintersheim" am Zeilenende hängen (Konvention 9). */ .wbg-wo{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } .wbg-wo > span{ display: block; } /* Der Text im Inneren trägt eigene Farben (Überschrift, Wann, Wo). Beim Tausch müssen sie die geerbte annehmen, sonst bleibt die Überschrift dunkel auf dunkel. Beim ersten Bauen des Tauschs übersehen und am Bildschirm gesehen. */ .wbg-karte:hover .wbg-karte__inhalt, .wbg-karte:focus-visible .wbg-karte__inhalt{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } .wbg-karte:hover .wbg-karte__inhalt :is(h3, .wbg-wann, .wbg-wo), .wbg-karte:focus-visible .wbg-karte__inhalt :is(h3, .wbg-wann, .wbg-wo){ color: inherit; } /* Ohne Bild sitzt der Text sonst oben, während er bei den Nachbarkarten unten steht — drei Karten, drei verschiedene Grundlinien. Gemessen am 08.09.2026. Der Text rückt nach unten, die leere Fläche darüber liest sich als Luft, nicht als Loch. */ .wbg-karte--ohne-bild .wbg-karte__inhalt{ flex: 0 0 auto; margin-top: auto; } .wbg-stand{ font-size: var(--wp--preset--font-size--mini); margin-top: var(--wp--preset--spacing--40); opacity: .9; } /* ---------- 5 Lebensmomente ---------- */ .wbg-zwei{ display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70); align-items: start; } @media (min-width: 48rem){ .wbg-zwei{ grid-template-columns: 1fr 1fr; } } .wbg-momente{ display: flex; flex-direction: column; } .wbg-momente a{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--mittel); letter-spacing: var(--wp--custom--enge--display); color: var(--wp--preset--color--bordeaux); text-decoration: none; padding-block: var(--wp--preset--spacing--30); min-height: var(--wp--custom--ziel); border-bottom: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); } .wbg-momente a:first-child{ border-top: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); } /* Rückmeldung. Bis zum 11.09.2026 hatte diese Liste gar keine — weder beim Zeigen noch eine eigene Fokusregel (Konvention 10). Nils hat es gefunden. WARUM KEIN ZUSÄTZLICHER UNTERSTRICH AM TEXT: Jede Zeile trägt bereits eine 2-px-Linie direkt darunter. Ein Unterstrich stünde wenige Pixel darüber und läse sich als doppelte Linie. Verstärkt wird deshalb die Linie, die schon da ist. WAS TRÄGT UND WAS BEIWERK IST, gemessen am 11.09.2026: Die volle Linie steht mit 10,06:1 (hell) und 4,77:1 (dunkel) gegen den Grund — sie ist das Signal. Die Füllung allein trüge nicht: sie unterscheidet sich vom Grund nur um 1,094 (hell) und 1,039 (dunkel), in der dunklen Fassung also fast gar nicht. Sie gibt der Zeile Körper, mehr nicht. Der Fokusring aus der globalen Regel bleibt zusätzlich stehen. */ .wbg-momente a:hover, .wbg-momente a:focus-visible{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); border-bottom-color: var(--wp--preset--color--tinte-tief); } /* Die Zeile „Seelsorge" trägt einen kleinen Nachsatz in --tinte-still. Er muss beim Tausch mitgehen. */ .wbg-momente a:hover small, .wbg-momente a:focus-visible small{ color: inherit; } .wbg-momente a:first-child:hover, .wbg-momente a:first-child:focus-visible{ border-top-color: var(--wp--preset--color--tinte-tief); } .wbg-momente small{ display: block; font-family: var(--wp--preset--font-family--text); font-weight: 400; font-size: var(--wp--preset--font-size--klein); letter-spacing: 0; color: var(--wp--preset--color--tinte-still); } /* ---------- 6 Gemeindenfuß ---------- */ .wbg-fuss{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); } .wbg-fuss__oben{ display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); align-items: start; } @media (min-width: 48rem){ .wbg-fuss__oben{ grid-template-columns: 1fr 1fr; } } .wbg-fuss h2{ color: inherit; margin: 0; } /* Die Bildmarke im Fuß steht in derselben Rasterzelle wie die Überschrift — deshalb der Umschlag `__aufmacher`. Ohne ihn wäre sie ein eigenes Rasterfeld geworden und hätte die Gemeindenamen unter sich geschoben (beim ersten Einsetzen genau so passiert). */ .wbg-fuss__zeichen{ display: block; height: var(--wp--preset--spacing--70); width: auto; margin-bottom: var(--wp--preset--spacing--40); } /* GEMESSEN am 08.09.2026, nicht geschätzt: „Dorn-Dürkheim-Hillesheim- Wintersheim" ist bei 0,9 rem genau 269 px breit. Meine erste Vorgabe von 13 rem (208 px) war geraten — der Name brach um, und dann standen die Unterstriche der Nachbarspalte versetzt. 17 rem = 272 px halten ihn sicher in einer Zeile. Folge: Bei 1280 px stehen im Fuß 484 px zur Verfügung; zwei Spalten bräuchten 568. Also eine Spalte — länger, aber es bricht nie ein Name. Wird die Bahn breiter, entstehen zwei Spalten von selbst. */ .wbg-gemeinden{ display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 var(--wp--preset--spacing--50); } /* Seit dem 09.09.2026 sind die sechs Namen Text statt Verweise — es gibt noch keine Gemeindeseiten. Die Regel gilt für beides, damit der Fuß gleich aussieht, wenn die Verweise zurückkommen. */ .wbg-gemeinden a, .wbg-gemeinden span{ display: block; text-decoration: none; padding-block: var(--wp--preset--spacing--30); min-height: var(--wp--custom--ziel); font-size: var(--wp--preset--font-size--klein); border-bottom: var(--wp--custom--kante) solid var(--wp--custom--linie-hell); } /* Als Absatz braucht es die Randlosigkeit, die das Raster erwartet. */ p.wbg-gemeinden{ margin: 0; } /* Die Regel für `.wbg-gemeinden a` ist am 11.09.2026 entfallen: seit dem 09.09.2026 stehen die sechs Gemeindenamen im Fuß als , weil ihre Seiten nicht existieren. Gemessen: der Selektor trifft auf keiner der sieben geprüften Seiten ein einziges Element. Eine tote Regel, die niemandem auffällt, bis jemand die Namen wieder verlinkt und sich über eine Rückmeldung wundert, die er nie geschrieben hat. */ .wbg-fuss__unten{ border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-hell); margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; } /* Die Rechtslinks waren 20 px hoch — gemessen am 08.09.2026. Das ist auch für WCAG 2.2 AA (24 px) zu wenig und am Telefon nicht zu treffen. Die Zeilen bleiben klein, die Trefferfläche wird es nicht. */ .wbg-fuss__links{ display: flex; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50); flex-wrap: wrap; font-size: var(--wp--preset--font-size--mini); } .wbg-fuss__links a{ display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); } .wbg-hand-gross{ font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--mittel); line-height: 1; } /* ---------- Kleinteile ---------- */ .wbg-nachsatz{ margin-top: var(--wp--preset--spacing--50); } .wbg-kacheln{ margin-top: var(--wp--preset--spacing--50); } /* Der Herkunftshinweis zu den KI-Bildern. Er muss lesbar sein — die Bilder sollen als Symbolbilder erkennbar sein, nicht als Aufnahmen der Gemeinden (Bedingung aus BILDHERKUNFT_UND_NUTZUNG.txt). */ .wbg-bildhinweis{ margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--mini); color: var(--wp--preset--color--tinte-still); } .wbg-band--petrol .wbg-bildhinweis, .wbg-band--bordeaux .wbg-bildhinweis{ color: inherit; opacity: .9; } .wbg-momente__bild{ margin-top: var(--wp--preset--spacing--50); } /* Am Telefon ein hohes, aber nicht turmhohes Bild. Am Schreibtisch fuellt es stattdessen den Rest seiner Spalte — siehe unten. */ .wbg-momente__bild img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; max-width: 26rem; } /* Fließtext auf Unterseiten */ .wbg-fliess :is(h2,h3,h4){ margin-top: var(--wp--preset--spacing--60); } .wbg-fliess p + p{ margin-top: var(--wp--preset--spacing--40); } /* ---------- Bewegung ---------- Konvention 10: In diesen Block gehören NUR transform, animation und transition. Jede Zustandsanzeige steht davor und gilt immer. */ @media (prefers-reduced-motion: no-preference){ /* Nur der Pfeil bewegt sich. Fläche und Linie stehen außerhalb dieses Blocks und gelten auch dann, wenn Bewegung abgeschaltet ist. */ .wbg-momente a > span:last-child{ transition: transform .15s ease; } .wbg-momente a:hover > span:last-child, .wbg-momente a:focus-visible > span:last-child{ transform: translateX(.22em); } .wbg-knopf, .wbg-nav a, .wbg-momente a, .wbg-gemeinden a, .wbg-kachel__leiste, .wbg-karte__inhalt{ transition: background-color .15s ease, color .15s ease, border-color .15s ease; } } /* ---------- Druck ---------- */ @media print{ /* Die dunkle Fassung darf nicht aufs Papier: Hintergründe druckt der Browser meist nicht mit, helle Schrift auf weissem Papier wäre also unsichtbar. Deshalb hier zurück auf Schwarz auf Weiss — unabhängig davon, welche Fassung am Bildschirm gilt. */ :root{ color-scheme: light; } html, body, .wp-site-blocks{ background: #fff !important; } body *{ color: #000 !important; } .wbg-band--bordeaux, .wbg-band--petrol, .wbg-band--navy, .wbg-fuss, .wbg-hero{ background: none !important; color: #000 !important; } .wbg-hand, .wbg-hand-gross, .wbg-kopf__inhalt nav{ display: none; } } /* ============================================================ KALENDER Der Block kommt aus dem Plugin, die Gestaltung aus dem Theme. So bleibt das Plugin austauschbar und das Theme bestimmt das Aussehen — dieselbe Trennung wie überall sonst. ============================================================ */ .wbg-nur-vorlesen{ position: absolute; left: 0; width: 1px; max-width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wbg-kalender__auf h1{ margin: 0; } .wbg-kalender__auf .wbg-lead{ color: inherit; } /* ---------- Steuerband ---------- */ .wbg-kalender__steuerung{ padding-block: var(--wp--preset--spacing--50); } .wbg-kalender__zeile{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; } .wbg-kalender__monat{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--mittel); margin: 0; } .wbg-kalender__blaettern{ display: flex; gap: var(--wp--preset--spacing--20); } .wbg-kalender__blaettern .wbg-knopf{ padding-inline: var(--wp--preset--spacing--40); } .wbg-kalender__umschalter{ display: flex; border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie-hell); border-radius: var(--wp--custom--radius); overflow: hidden; } .wbg-kalender__ansicht{ display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); padding-inline: var(--wp--preset--spacing--40); text-decoration: none; font-weight: 700; font-size: var(--wp--preset--font-size--klein); } .wbg-kalender__ansicht--aktiv{ background: var(--wp--preset--color--auf-farbe); color: var(--wp--preset--color--petrol); } /* ---------- Wochenleiste ---------- Zahlen statt Farbpunkte. Bei fünf Terminen an einem Sonntag wird aus Punkten ein Brei, und ohne Farbwahrnehmung sagen sie gar nichts. */ .wbg-woche{ display: grid; grid-template-columns: repeat(7, 1fr); margin-top: var(--wp--preset--spacing--40); } .wbg-woche__tag{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10); min-height: var(--wp--custom--ziel); text-decoration: none; border: var(--wp--custom--kante) solid var(--wp--custom--linie-hell); text-align: center; } .wbg-woche__tag[aria-current="date"]{ background: var(--wp--preset--color--auf-farbe); color: var(--wp--preset--color--petrol); font-weight: 700; } .wbg-woche__wt{ font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; } .wbg-woche__zahl{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--kachel); line-height: 1.1; } .wbg-woche__anzahl{ font-size: var(--wp--preset--font-size--kappe); } /* ---------- Monatsleiste ---------- Das Gegenstueck zur Wochenleiste in der Monatsansicht: zwoelf Monate ab dem laufenden, damit man in einem Klick durchs Jahr kommt. auto-fit statt fester Spaltenzahl — bei 320 px passen vier Felder nebeneinander, am Schreibtisch alle zwoelf. */ .wbg-monatsleiste{ display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); margin-top: var(--wp--preset--spacing--40); } .wbg-monatsleiste__monat{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10); min-height: var(--wp--custom--ziel); text-decoration: none; border: var(--wp--custom--kante) solid var(--wp--custom--linie-hell); text-align: center; } .wbg-monatsleiste__monat--offen{ background: var(--wp--preset--color--auf-farbe); color: var(--wp--preset--color--petrol); font-weight: 700; } .wbg-monatsleiste__name{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--klein); line-height: 1.1; } .wbg-monatsleiste__jahr, .wbg-monatsleiste__anzahl{ font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); } /* Wie bei der Wochenleiste steht das Wort in einem eigenen Span und verschwindet, wo die Spalte zu schmal wird — vorgelesen wird es trotzdem. */ @media (max-width: 62rem){ .wbg-monatsleiste__wort{ display: none; } } /* ---------- Filterspalte ---------- Im Entwurf steht sie links neben der Liste und arbeitet mit Ankreuzfeldern. Ohne JavaScript braucht das einen Knopf „Filter anwenden" — ein Haken, der erst nach einem Klick woanders wirkt, wäre unbedienbar. */ .wbg-kalender__spalten{ display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); align-items: start; } /* 13rem statt 17rem, und die Luecke 2 statt 3 rem. Gemessen am 08.09.2026: die Spalte war 272 px breit und 1014 px hoch, die Ankreuzzeilen 44 px — der Monat bekam davon zu wenig ab. Kompakt sind es 208 px Breite und 766 px Hoehe, die ganze Spalte steht damit ohne Rollen da. minmax(0,1fr) statt 1fr: sonst drueckt der laengste Gemeindename die Inhaltsspalte auf und das Monatsraster ragte 79 px ueber den rechten Seitenrand hinaus. */ @media (min-width: 64rem){ .wbg-kalender__spalten{ grid-template-columns: 13rem minmax(0, 1fr); gap: var(--wp--preset--spacing--60); } } .wbg-kalender__filterknopf{ display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--ziel); padding-inline: var(--wp--preset--spacing--30); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); font-weight: 700; cursor: pointer; list-style: none; } .wbg-kalender__filterknopf::-webkit-details-marker{ display: none; } .wbg-kalender__filterzahl{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); border-radius: 50%; min-width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--wp--preset--font-size--kappe); } @media (min-width: 64rem){ /* Auf dem Schreibtisch ist die Spalte immer offen; der Knopf entfällt. */ .wbg-kalender__filterknopf{ display: none; } .wbg-kalender__filterspalte > .wbg-filter{ display: grid; } } .wbg-filter{ display: grid; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--20); } .wbg-filter__titel{ font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--bordeaux); margin: 0; } .wbg-filter__suche input[type="search"]{ width: 100%; min-height: 2.375rem; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); font: inherit; color: var(--wp--preset--color--tinte); background: var(--wp--custom--feld); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); } .wbg-filter__gruppe{ border: 0; border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); padding: var(--wp--preset--spacing--30) 0 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--10); /* Die Zeilen dürfen NICHT auf die verfügbare Höhe verteilt werden. Ohne das streckt das Raster „Was?" (fünf Zeilen) auf die Höhe von „Für wen?" (sechs Zeilen): Die Beschriftung blieb 22 px hoch, die Zeile wuchs auf 49 px, und es sah aus wie ein zu großer Abstand. Genau das hatte Nils am 09.09.2026 bemängelt — der Grund war nicht der Abstand, sondern die Streckung. Gemessen und behoben. */ align-content: start; } .wbg-filter__name{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--text); color: var(--wp--preset--color--bordeaux); padding: 0; margin: 0 0 var(--wp--preset--spacing--10); } /* 2,125 rem = 34 px statt der 44 px aus --ziel. Das unterschreitet den Richtwert des Projekts und haelt WCAG 2.2 AA (2.5.8) ein, der 24 px verlangt; die Zeile ist ausserdem ueber ihre ganze Breite anklickbar. Entschieden von Nils am 08.09.2026 nach dem Vergleich dreier Dichten. */ .wbg-haken{ display: flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: 2.125rem; padding-block: 2px; } /* Eine Zeile OHNE Altersangabe ist einzeilig und braucht die 34 px nicht — bei „Was?" standen fünf einzeilige Zeilen so weit auseinander wie die zweizeiligen bei „Für wen?" (Nils, 09.09.2026). 28 px bleiben deutlich über den 24 px aus WCAG 2.2 AA (2.5.8), und die Zeile ist weiterhin über ihre ganze Breite anklickbar. */ .wbg-haken:not(:has(.wbg-haken__alter)){ min-height: 1.75rem; } .wbg-haken input[type="checkbox"]{ width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--wp--preset--color--bordeaux); } /* „Für wen?" und „Was?" nebeneinander, sobald die Breite es hergibt. Kein Umschaltpunkt: 2 × 9,5 rem = 304 px. In der 208 px schmalen Filterspalte des Schreibtischs bleibt es einspaltig, im Klappfilter am Telefon (343 px innen bei 375 px Gerät) wird es zweispaltig, bei 320 px wieder einspaltig — dort ist der Platz wirklich nicht da. */ .wbg-filter__doppel{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); align-items: start; } .wbg-haken label{ font-size: var(--wp--preset--font-size--klein); cursor: pointer; } /* Die Altersangabe unter der Beschriftung — klein, zurückgenommen, und sie darf die Zeile nicht wieder auseinanderziehen. */ .wbg-haken__alter{ display: block; font-size: var(--wp--preset--font-size--kappe); color: var(--wp--preset--color--tinte-still); line-height: 1.2; } .wbg-filter__gruppe select{ width: 100%; min-height: 2.375rem; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); font: inherit; color: var(--wp--preset--color--tinte); background: var(--wp--custom--feld); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); } .wbg-filter__fuss{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); padding-top: var(--wp--preset--spacing--30); } .wbg-filter__fuss button{ font: inherit; font-weight: 700; cursor: pointer; } .wbg-filter__zuruecksetzen{ display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); font-size: var(--wp--preset--font-size--klein); } .wbg-stand{ margin-top: var(--wp--preset--spacing--40); } .wbg-stand--alt{ font-weight: 700; color: var(--wp--preset--color--rost); } /* ---------- Tagesliste ---------- */ .wbg-tage{ margin-top: var(--wp--preset--spacing--50); } .wbg-tag + .wbg-tag{ margin-top: var(--wp--preset--spacing--60); } .wbg-tag__kopf{ font-size: var(--wp--preset--font-size--mittel); border-bottom: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); padding-bottom: var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--30); } .wbg-tag--heute .wbg-tag__kopf::after{ content: "heute"; font-family: var(--wp--preset--font-family--text); font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; background: var(--wp--preset--color--gold); color: var(--wp--custom--auf-gold-tinte); border: var(--wp--custom--kante) solid var(--wp--custom--kante-auf-gold); border-radius: var(--wp--custom--radius); padding: .1rem .4rem; margin-left: var(--wp--preset--spacing--30); vertical-align: middle; } /* Der liturgische Tag über der Tagesliste. Er kommt aus kirchenjahr_tag und gilt für alle Termine des Tages, nicht für einen einzelnen. hyphens: auto, weil „Sonntag nach Trinitatis" bei 320 px sonst über die Spalte hinausläuft — derselbe Fall wie bei den Rechtstexten (Konvention 34). */ .wbg-tag__anlass{ font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--bordeaux); margin: calc(-1 * var(--wp--preset--spacing--20)) 0 var(--wp--preset--spacing--30); hyphens: auto; } .wbg-tag__liste{ list-style: none; margin: 0; padding: 0; } .wbg-tag__liste > li + li{ border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); } /* ---------- Absage — „Entfällt" ---------- Wortgleich mit blocks/termine/stil.css im Plugin. Die Verdopplung ist nötig, nicht bequem: Jene Datei hängt über block.json am Terminblock und wird auf der Kalenderseite gar nicht geladen. Gemessen am 09.09.2026: --auf-farbe auf --rost misst 5,85:1 (verlangt sind 4,5:1). Keine Kante um die Pille — die Schrift trägt die Aussage, nicht die Fläche, und eine Vorsorge ohne anschlagende Gegenprobe ist eine Vermutung (Konvention 21). */ .wbg-absage{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--10); } .wbg-absage__wort{ background: var(--wp--preset--color--rost); color: var(--wp--preset--color--auf-farbe); border-radius: var(--wp--custom--radius); padding: 2px 8px; font-size: var(--wp--preset--font-size--kappe); font-weight: 700; letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; white-space: nowrap; } .wbg-absage__grund{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); overflow-wrap: anywhere; } /* Der Strich allein sagt nichts — er steht neben dem Wort, nicht an seiner Stelle (WCAG 1.4.1, Abnahmeliste A8). */ .wbg-gestrichen{ text-decoration: line-through; text-decoration-thickness: 0.09em; } .wbg-termin{ display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--10); padding-block: var(--wp--preset--spacing--30); } @media (min-width: 30rem){ .wbg-termin{ grid-template-columns: 5rem 1fr; gap: var(--wp--preset--spacing--30); } } .wbg-termin__zeit{ font-weight: 700; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--bordeaux); margin: 0; } .wbg-termin__ganztag{ font-size: var(--wp--preset--font-size--mini); color: var(--wp--preset--color--tinte-still); } .wbg-termin__merker{ display: flex; gap: var(--wp--preset--spacing--20); flex-wrap: wrap; margin: 0 0 var(--wp--preset--spacing--10); } .wbg-termin__titel{ font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--tinte-tief); margin: 0; } .wbg-termin__unter{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); margin: 0; } .wbg-termin .wbg-wo{ margin: var(--wp--preset--spacing--10) 0 0; } /* Umbenannt am 08.09.2026: .wbg-marke ist schon die Wortmarke im Kopf. Zwei Bedeutungen unter einem Namen sind ein Fehler, der erst auffällt, wenn jemand die eine Regel ändert und die andere kaputtgeht. */ .wbg-merker{ display: inline-flex; align-items: center; font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; font-weight: 700; padding: .15rem .45rem; border-radius: var(--wp--custom--radius); } .wbg-merker--gd{ background: var(--wp--preset--color--navy); color: var(--wp--preset--color--auf-farbe); } .wbg-merker--kasual{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } /* Gold gegen Creme misst 2,84:1 — die Kante ist Bedingung, nicht Zierde. */ .wbg-merker--badge{ background: var(--wp--preset--color--gold); color: var(--wp--custom--auf-gold-tinte); border: var(--wp--custom--kante) solid var(--wp--custom--kante-auf-gold); } .wbg-zg{ display: flex; gap: var(--wp--preset--spacing--10); flex-wrap: wrap; margin: var(--wp--preset--spacing--20) 0 0; } .wbg-chip-zg{ font-size: var(--wp--preset--font-size--kappe); font-weight: 700; color: var(--wp--preset--color--bordeaux); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); padding: .1rem .45rem; } .wbg-chip-zg--mehr{ color: var(--wp--preset--color--tinte-still); border-style: dashed; border-color: var(--wp--custom--linie-zart); } .wbg-chip-zg--alle{ background: var(--wp--preset--color--gold); color: var(--wp--custom--auf-gold-tinte); border-color: var(--wp--custom--kante-auf-gold); } /* ---------- Kopfzeile der Inhaltsspalte ---------- Zeitraum und Umschalter stehen im Entwurf ueber dem Raster, nicht im petrolfarbenen Band. */ .wbg-kalender__kopf{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--40); } .wbg-kalender__zeitraum{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--gross); color: var(--wp--preset--color--bordeaux); margin: 0; } /* Der Umschalter steht hier auf der Grundflaeche, nicht mehr auf Petrol — die hellen Kanten und die weisse Fuellung waeren dort unsichtbar. */ .wbg-kalender__kopf .wbg-kalender__umschalter{ border-color: var(--wp--custom--linie); } .wbg-kalender__kopf .wbg-kalender__ansicht{ color: var(--wp--preset--color--tinte-tief); } .wbg-kalender__kopf .wbg-kalender__ansicht--aktiv{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } /* ---------- Monatsraster ---------- */ .wbg-monat{ margin-top: var(--wp--preset--spacing--50); } .wbg-monat__kopf{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--tinte-still); text-align: center; } .wbg-monat__kopf > span{ padding-block: var(--wp--preset--spacing--20); } .wbg-monat__gitter{ display: grid; /* minmax(0,1fr), nicht 1fr: eine 1fr-Spur ist nach unten durch ihren Inhalt begrenzt. „Dorn-Duerkheim-Hillesheim-Wintersheim" machte den Montag 161 px und den Freitag 110 px breit, und das Raster lief 79 px ueber den rechten Seitenrand hinaus (gemessen 08.09.2026). */ grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); border-left: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); } .wbg-monat__zelle{ border-right: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); border-bottom: var(--wp--custom--kante) solid var(--wp--custom--linie-zart); min-height: 3.5rem; padding: var(--wp--preset--spacing--10); } .wbg-monat__zelle--leer{ background: var(--wp--preset--color--grund-ruhig); } /* Die Tage der Nachbarmonate stehen grau mit da (Entwurf 03_Kalender_Monat). Sie sind aria-hidden, tragen keine Eintraege und keinen Verweis. */ .wbg-monat__zelle--fremd{ background: var(--wp--preset--color--grund-ruhig); } .wbg-monat__zelle--fremd .wbg-monat__zahl{ font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--wp--preset--color--tinte-still); opacity: .45; } /* Der heutige Tag traegt einen gefuellten Kreis um die Zahl — so steht es im Entwurf. Ein Rahmen um die ganze Zelle war meine eigene Idee. */ .wbg-monat__zelle--heute .wbg-monat__zahl{ background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); border-radius: 50%; min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; } .wbg-monat__tag{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--10); min-height: var(--wp--custom--ziel); text-decoration: none; } .wbg-monat__zahl{ font-family: var(--wp--preset--font-family--display); font-weight: 800; } .wbg-monat__anzahl{ font-size: var(--wp--preset--font-size--kappe); font-weight: 700; color: var(--wp--preset--color--auf-farbe); background: var(--wp--preset--color--petrol); border-radius: 50%; min-width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; } .wbg-monat__anzahl:empty{ background: none; } .wbg-monat__liste{ list-style: none; margin: var(--wp--preset--spacing--10) 0 0; padding: 0; display: none; } /* Gefuellte Pille mit farbigem Balken links — so steht es im Entwurf. Vorher stand hier nur ein Rahmenstrich auf der Grundflaeche. Der Ton entsteht als Mischung aus der Rollenfarbe und der Grundflaeche; es steht deshalb KEIN Farbwert hier (Konvention 1), nur ein Anteil — und auch der kommt aus theme.json, weil er sich zwischen heller und dunkler Fassung unterscheidet: hell 12 %, dunkel 6 %. Auf dunklem Grund hellt derselbe Anteil die Pille staerker auf, und die Zeit in --ton fiel damit auf 4,27:1 (gemessen 11.09.2026 an den Kasualien- Eintraegen). Mit 6 % liegen alle fuenf Toene bei mindestens 4,53. */ .wbg-monat__eintrag{ --ton: var(--wp--preset--color--tinte-still); /* Zeit und Titel stehen NEBENEINANDER, die Gemeinde darunter buendig mit dem Titel — so steht es im Entwurf. Untereinander gestapelt war die Pille 60 px hoch; nebeneinander sind es 34. */ display: grid; grid-template-columns: auto 1fr; column-gap: 0.45em; align-items: baseline; font-size: var(--wp--preset--font-size--kappe); background: color-mix(in oklab, var(--ton) var(--wp--custom--monat-anteil), var(--wp--preset--color--grund)); border-left: 3px solid var(--ton); border-radius: var(--wp--custom--radius); padding: 3px var(--wp--preset--spacing--10); margin-bottom: 3px; } .wbg-monat__eintrag--navy{ --ton: var(--wp--preset--color--navy); } .wbg-monat__eintrag--bordeaux{ --ton: var(--wp--preset--color--bordeaux); } .wbg-monat__eintrag--petrol{ --ton: var(--wp--preset--color--petrol); } .wbg-monat__eintrag--gold{ --ton: var(--wp--preset--color--gold); } /* Rost gemessen am 09.09.2026: auf seiner eigenen 12-Prozent-Pille (#EFDBCA) misst die Signalfarbe 4,91:1 — sie trägt dort also auch Schrift, anders als Gold mit 2,53:1. */ .wbg-monat__eintrag--rost{ --ton: var(--wp--preset--color--rost); } /* Die Absage steht in der Zeile, in der sonst die Gemeinde steht. Sie ersetzt sie, statt sich dazuzudrängen: Bei 45 px Spaltenbreite ist für beides kein Platz. */ .wbg-monat__absage{ grid-column: 2; grid-row: 2; color: var(--ton); font-weight: 700; letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; } .wbg-monat__zeit{ grid-column: 1; grid-row: 1; font-weight: 700; color: var(--ton); white-space: nowrap; } /* Ausnahme Gold: gemessen 08.09.2026 steht Gold auf seinem eigenen Ton bei 2,55:1 und faellt damit unter 4,5:1 durch. Die uebrigen vier liegen zwischen 6,7 und 8,4. Die Farbe traegt dort der Balken, nicht die Schrift — die Zuordnung geht dadurch nicht verloren. */ .wbg-monat__eintrag--gold .wbg-monat__zeit{ color: var(--wp--preset--color--tinte-tief); } /* Gemessen am 09.09.2026: „Ewigkeitssonntag" schob die Pille auf 122 px in einer Spur von 114 — ein Wort, das nirgends brechen darf, wenn man es nicht trennt. Derselbe Fall wie bei den Rechtstexten (Konvention 34); in einer Zelle von 114 px ist er der Regelfall, nicht die Ausnahme. */ .wbg-monat__titel{ grid-column: 2; grid-row: 1; color: var(--wp--preset--color--tinte-tief); hyphens: auto; overflow-wrap: anywhere; } .wbg-monat__wo{ grid-column: 2; grid-row: 2; color: var(--wp--preset--color--tinte-still); } /* Die beiden langen Gemeinden stehen hier als Kürzel im . Der gepunktete Standardstrich der Browser wird bei 11,5 px zu Matsch und ist in einer Pille von 45 px Breite nur Unruhe; die Auflösung steckt im title und im Markup, nicht im Strich. */ abbr.wbg-monat__wo{ text-decoration: none; cursor: help; } .wbg-monat__mehr{ display: none; margin: var(--wp--preset--spacing--10) 0 0; font-size: var(--wp--preset--font-size--kappe); } /* Der Verweis „+ n weitere" war 17 px hoch — gemessen 08.09.2026. */ .wbg-monat__mehr a{ display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); } /* Am Telefon steht in der Zelle nur die Zahl — für zwei Termine plus „+n weitere" ist bei 45 px Spaltenbreite kein Platz. Ab 48 rem erscheinen die Einträge. */ @media (min-width: 48rem){ .wbg-monat__zelle{ min-height: 7rem; padding: var(--wp--preset--spacing--20); } .wbg-monat__liste{ display: block; } .wbg-monat__mehr{ display: block; } /* Am Schreibtisch stehen die Eintraege selbst in der Zelle; die Zahl daneben waere eine zweite Auskunft ueber dieselbe Sache. Im Entwurf steht sie nicht. Am Telefon bleibt sie, dort gibt es keine Liste. */ .wbg-monat__anzahl{ display: none; } } .wbg-leer{ margin-top: var(--wp--preset--spacing--50); max-width: 40em; } .wbg-leer h2{ font-size: var(--wp--preset--font-size--mittel); } .wbg-leer p{ margin-top: var(--wp--preset--spacing--30); } .wbg-kalender__weiter{ margin-top: var(--wp--preset--spacing--60); } /* ---------- Kalender bei sehr schmalen Geräten ---------- Gemessen am 08.09.2026 auf Staging bei 320 px: die Wochenleiste lief auf 343 px, das Monatsraster auf 400. Sieben Spalten lassen dort je 45 px — das reicht für eine Zahl, nicht für ein Wort und nicht für Polster. */ @media (max-width: 26rem){ .wbg-woche__wort{ display: none; } .wbg-woche__tag{ padding-inline: 0; } .wbg-woche__zahl{ font-size: var(--wp--preset--font-size--text); } .wbg-woche__wt, .wbg-woche__anzahl{ font-size: 0.65rem; letter-spacing: 0; } } @media (max-width: 48rem){ .wbg-monat__zelle{ min-width: 0; padding: 2px; min-height: 3rem; } .wbg-monat__tag{ flex-direction: column; align-items: center; gap: 0; min-height: var(--wp--custom--ziel); } .wbg-monat__zahl{ font-size: var(--wp--preset--font-size--klein); } .wbg-monat__anzahl{ min-width: 1.1rem; height: 1.1rem; font-size: 0.65rem; } .wbg-monat__kopf{ font-size: 0.65rem; letter-spacing: 0; } } /* ============================================================ FORMULAR Aufbau und Texte kommen aus dem Portal, das Aussehen von hier. ============================================================ */ /* Die Spalte war bis zum 08.09.2026 auf 34 rem gedeckelt: 27 Felder untereinander, Blockhöhe 3388 px bei 1440 px Fenster, rund 880 px rechts ungenutzt. Jetzt trägt die ganze Bahn — der Fließtext bleibt trotzdem schmal, weil er im Kopf und in den Spalten steht. */ .wbg-formularblock{ max-width: none; } .wbg-formularblock h1{ font-size: var(--wp--preset--font-size--gross); } /* --- Kopf mit Bildplatz --------------------------------------------- Solange kein Motiv da ist, liefert wonnegau_bild() nichts und der Kopf steht einspaltig — die Klasse --bild kommt dann gar nicht erst ans Element. */ .wbg-formularkopf__text{ max-width: 34rem; } .wbg-formularkopf--bild{ display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--wp--preset--spacing--70); align-items: center; } /* Der Rahmen liegt am Bild, nicht am Kasten — sonst stünde der Herkunftshinweis mit im Rahmen, und er gehört daneben, nicht hinein. */ .wbg-formularkopf__bild{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); } .wbg-formularkopf__rahmen .wbg-bildhinweis{ margin-top: var(--wp--preset--spacing--20); } /* ============================================================ BILDMARKE Der Nachweis steht seit dem 09.09.2026 IM Bild, unten rechts, statt als Absatz darunter. Nils: „möglichst klein, möglichst unscheinbar." Unscheinbar heißt nicht unlesbar. Weiße Schrift auf einem beliebigen Foto ist nicht messbar, deshalb liegt ein dunkler Grund darunter: Bei 65 % Deckkraft ergibt sich selbst über reinem Weiß ein Grau von etwa rgb(89,89,89) — Weiß darauf misst 6,9:1 und hält damit auch im ungünstigsten Fall die 4,5:1 aus WCAG 2.2 AA. Der Text kommt aus `data-marke` und ist damit für Vorlesewerkzeuge unsichtbar — richtig so: Was das Bild zeigt, sagt sein Alternativtext, und der vollständige Nachweis steht im Impressum. ============================================================ */ picture.wbg-mitmarke{ position: relative; display: block; } picture.wbg-mitmarke::after{ content: attr(data-marke); position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 0.15em 0.5em; background: rgba(20, 12, 15, 0.65); color: #fff; font-size: 0.62rem; line-height: 1.5; letter-spacing: 0.01em; border-top-left-radius: var(--wp--custom--radius); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Auf sehr schmalen Geräten darf sie umbrechen statt abgeschnitten zu werden — ein halber Urhebername ist kein Nachweis. */ @media (max-width: 30rem){ picture.wbg-mitmarke::after{ white-space: normal; max-width: 70%; } } /* ============================================================ LANGE WÖRTER Am 09.09.2026 bei 320 px gemessen: „Vertretungsberechtigt" ragte 32 px über seine Spalte, „Datenschutzaufsicht" und „Haftungsausschluss" ebenso — die Seite bekam dadurch waagerechten Überlauf (332 statt 316 px). Deutsche Komposita in großer Displayschrift sind auf schmalen Geräten der Regelfall, nicht die Ausnahme. Silbentrennung statt hartem Umbruch: sie trennt an erlaubten Stellen und braucht dafür die Sprachangabe, die WordPress am setzt. `overflow-wrap` bleibt als Netz darunter, falls ein Wort auch getrennt nicht passt (etwa eine lange Adresse ohne Trennstellen). ============================================================ */ :is(h1, h2, h3, h4), .wbg-frage > summary, .wbg-kontaktdaten dd{ hyphens: auto; overflow-wrap: break-word; } /* ============================================================ TRAUERFALL UND LEBENSMOMENTE Die Rufnummer steht auf beiden Seiten vor jedem Text — wer hier landet, soll nicht erst lesen müssen, um anrufen zu können. ============================================================ */ .wbg-trauer, .wbg-trauerfall{ display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--wp--preset--spacing--70); align-items: center; } .wbg-trauer__text{ min-width: 0; max-width: 40rem; } .wbg-trauer__bild{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); } .wbg-trauer__rahmen .wbg-bildhinweis{ margin-top: var(--wp--preset--spacing--20); } .wbg-trauer__ruf{ margin: var(--wp--preset--spacing--50) 0; padding: var(--wp--preset--spacing--40); border-left: 4px solid var(--wp--preset--color--bordeaux); background: var(--wp--preset--color--grund-ruhig); } .wbg-trauer__nummer, .wbg-trauerfall__nummer{ margin: var(--wp--preset--spacing--10) 0 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--mittel); line-height: var(--wp--custom--zeile--eng); } .wbg-trauer__nummer a, .wbg-trauerfall__nummer a{ display: inline-block; min-height: var(--wp--custom--ziel); color: var(--wp--preset--color--bordeaux); } .wbg-trauer__klein{ margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } .wbg-trauerfall__text{ min-width: 0; } .wbg-verweise{ margin: var(--wp--preset--spacing--40) 0 0; padding-left: 1.2rem; } .wbg-verweise li{ margin-top: var(--wp--preset--spacing--30); } .wbg-verweise a{ min-height: var(--wp--custom--ziel); display: inline-block; } .wbg-quelle{ margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } @media (max-width: 60rem){ .wbg-trauer, .wbg-trauerfall{ grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); } } /* ============================================================ HÄUFIGE FRAGEN `
`/``, kein eigenes Aufklappwerk: klappt ohne JavaScript, ist mit der Tastatur bedienbar, und der Antworttext steht auch zugeklappt im Dokument — auffindbar für Seitensuche und Vorlesewerkzeuge. ============================================================ */ .wbg-fragen__liste{ margin-top: var(--wp--preset--spacing--50); } .wbg-frage{ border-top: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); padding: 0; } .wbg-fragen__liste .wbg-frage:last-of-type{ border-bottom: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); } .wbg-frage > summary{ display: flex; align-items: center; gap: var(--wp--preset--spacing--40); min-height: var(--wp--custom--ziel); padding: var(--wp--preset--spacing--30) 0; cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--bordeaux); list-style: none; } /* Der eigene Marker ersetzt das Dreieck des Browsers, das je nach System anders aussieht und sich nicht einfärben lässt. */ .wbg-frage > summary::-webkit-details-marker{ display: none; } .wbg-frage > summary::after{ content: "+"; margin-left: auto; flex: none; width: 1.6rem; text-align: center; font-size: var(--wp--preset--font-size--mittel); line-height: 1; } .wbg-frage[open] > summary::after{ content: "\2212"; } /* Zustandsanzeige steht VOR der Bewegungsabfrage und gilt immer (Konvention 10). */ /* Hier war bis zum 11.09.2026 ein Unterstrich — an einem Aufklapper mit Dreieck sah der nach nichts aus (Nils). Jetzt der Tausch wie überall. Der Innenabstand steht in Ruhe da und wird ausgeglichen, damit die Fläche einen Körper bekommt, ohne dass etwas springt. */ .wbg-frage > summary{ padding-inline: var(--wp--preset--spacing--20); margin-inline: calc(var(--wp--preset--spacing--20) * -1); border-radius: var(--wp--custom--radius); } .wbg-frage > summary:hover, .wbg-frage > summary:focus-visible{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } .wbg-frage > :not(summary){ margin-top: var(--wp--preset--spacing--20); max-width: 44rem; } .wbg-frage > :last-child{ margin-bottom: var(--wp--preset--spacing--40); } .wbg-fragen__mehr{ margin-top: var(--wp--preset--spacing--50); } /* ============================================================ KONTAKT ============================================================ */ .wbg-kontakt{ display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: var(--wp--preset--spacing--70); align-items: center; } .wbg-kontakt__text{ min-width: 0; } .wbg-kontakt__bild{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); } .wbg-kontakt__rahmen .wbg-bildhinweis{ margin-top: var(--wp--preset--spacing--20); } /* Beschreibungsliste statt Tabelle: Anschrift, Telefon, E-Mail sind Begriff und Erläuterung, keine Matrix. */ .wbg-kontaktdaten{ margin: var(--wp--preset--spacing--50) 0 0; } .wbg-kontaktdaten dt{ font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--bordeaux); margin-top: var(--wp--preset--spacing--40); } .wbg-kontaktdaten dd{ margin: var(--wp--preset--spacing--10) 0 0; font-size: var(--wp--preset--font-size--satz); line-height: var(--wp--custom--zeile--text); } /* Telefonnummer und Adresse sind Bedienziele — sie müssen die Zielgröße halten, auch wenn sie mitten im Fließtext stehen. */ .wbg-kontaktdaten a{ display: inline-block; min-height: var(--wp--custom--ziel); padding: var(--wp--preset--spacing--10) 0; word-break: break-word; } .wbg-kontakt__hinweis{ margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } @media (max-width: 60rem){ .wbg-kontakt{ grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); } } /* Der Kalenderaufmacher trägt sein Bild im Band, nicht darüber. */ .wbg-kalender__auf--bild{ display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--wp--preset--spacing--70); align-items: center; } .wbg-kalender__aufbild{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wp--custom--radius); } .wbg-kalender__auf--bild .wbg-bildhinweis{ margin-top: var(--wp--preset--spacing--20); } @media (max-width: 60rem){ .wbg-kalender__auf--bild{ grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); } } /* --- Die zwei Schritte über dem Formular ---------------------------- 01 Gemeinde (Radiogruppe, gehört per form-Attribut zum Formular), 02 Anlass (drei Verweise auf die drei Seiten). */ .wbg-schritt{ border: 0; border-top: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); padding: var(--wp--preset--spacing--40) 0 0; margin: var(--wp--preset--spacing--60) 0 0; } .wbg-schritt > legend, .wbg-schritt__legende{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--bordeaux); padding: 0; margin: 0; } /* Gold als SCHRIFT auf der Grundfläche misst 2,84:1 und fällt durch (gemessen 08.09.2026, verlangt sind 4,5:1). Das Mockup setzt die Schrittzahl genau so — deshalb steht sie hier als goldene Fläche mit dunkler Schrift: 5,62:1. Dieselbe Falle wie bei der Altersangabe auf den Startseitenkacheln. Gold trägt als Fläche, nicht als Text. */ .wbg-schritt__zahl{ display: inline-block; padding: 0.1em 0.45em; border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--gold); color: var(--wp--custom--auf-gold-tinte); font-size: var(--wp--preset--font-size--kappe); letter-spacing: var(--wp--custom--sperre--kappe); vertical-align: 0.15em; } .wbg-schritt__hilfe{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); margin: var(--wp--preset--spacing--10) 0 0; } .wbg-schritt--fehler{ border-top-color: var(--wp--preset--color--rost); } /* Die Spaltenzahl ergibt sich aus der Breite, nicht aus Stufen. Maßgeblich ist der längste Gemeindename: „Dorn-Dürkheim-Hillesheim-Wintersheim" misst 269 px (gemessen 08.09.2026, deshalb steht auch im Fuß 17 rem). Mit festen Spalten bricht er um oder drückt die Kachel auf. */ .wbg-wahlreihe{ display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--30); } .wbg-wahlreihe--anlass{ grid-template-columns: repeat(auto-fit, minmax(7rem, 12rem)); } .wbg-wahlkachel{ display: flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--ziel); padding: var(--wp--preset--spacing--30); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--grund); color: var(--wp--preset--color--tinte); font-size: var(--wp--preset--font-size--klein); font-weight: 700; text-decoration: none; cursor: pointer; } .wbg-wahlkachel input[type="radio"]{ width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--wp--preset--color--bordeaux); } /* Zustand steht vor der Bewegungsabfrage und gilt immer — Konvention 10. */ /* Nur die bedienbaren Wahlkacheln. Drei von dreißig sind ein mit `aria-current="page"` — der Anlass, auf dessen Seite man gerade steht. Der ist absichtlich kein Verweis, und eine Rückmeldung darauf verspräche einen Klick, den es nicht gibt. Gemessen am 11.09.2026, nachdem Nils denselben Fehler an der Personenkarte gefunden hatte. */ label.wbg-wahlkachel:hover, label.wbg-wahlkachel:focus-within, a.wbg-wahlkachel:hover, a.wbg-wahlkachel:focus-visible{ background: var(--wp--preset--color--tinte-tief); border-color: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } .wbg-wahlkachel:has(input:checked), .wbg-wahlkachel--jetzt{ background: var(--wp--preset--color--bordeaux); border-color: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--auf-farbe); } /* Der eigene Anlass ist kein Verweis, sondern der Ort, an dem man steht. */ .wbg-wahlkachel--jetzt{ cursor: default; } .wbg-formular__hinweis{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); margin-top: var(--wp--preset--spacing--50); } .wbg-pflicht{ color: var(--wp--preset--color--rost); font-weight: 700; } .wbg-formular{ margin-top: var(--wp--preset--spacing--40); } /* Die sieben Abschnitte laufen in zwei Spalten. Mehrspaltensatz, nicht Raster: so bleibt die Lesereihenfolge gleich der Tab-Reihenfolge (WCAG 2.2 AA, 2.4.3) — ein Raster würde sie auseinanderziehen. */ .wbg-formular__haupt{ column-count: 2; column-gap: var(--wp--preset--spacing--70); } .wbg-abschnitt{ border: 0; border-top: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); padding: var(--wp--preset--spacing--30) 0 0; margin: 0 0 var(--wp--preset--spacing--50); break-inside: avoid; /* Sechser-Raster: halb = 3, Straße = 4, Hausnummer = 2, voll = 6. */ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--30); } .wbg-abschnitt > legend{ font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--kachel); color: var(--wp--preset--color--bordeaux); padding: 0; } /* `min-width: 0` hebt die Vorgabe `auto` für Raster- und Flexkinder auf. Ohne sie darf das Feld nicht unter die Mindestbreite seines breitesten Kindes schrumpfen — und ein Datumsfeld nennt in WebKit die volle Feldbreite als Minimum. Siehe die Regel unter 40 rem. */ .wbg-feld{ display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); grid-column: span 3; min-width: 0; } .wbg-feld--voll{ grid-column: 1 / -1; } /* ---------- Personengruppen (Pat:innen, Trauzeug:innen) ---------- Das Portal liefert vier feste Personen als acht bzw. acht Felder mit durchnummerierten Beschriftungen. Auf der Seite stehen sie als verschachtelte Gruppen; das Skript blendet die zweite bis vierte aus und legt einen Knopf darunter. OHNE SKRIPT stehen alle vier da — das Verstecken ist Zutat, nicht Voraussetzung. */ .wbg-personen{ grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); min-width: 0; } .wbg-personen__eintrag{ border: 0; border-left: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); padding: 0 0 0 var(--wp--preset--spacing--30); margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--30); } .wbg-personen__eintrag > legend{ padding: 0; font-weight: 700; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--bordeaux); } /* Das Verstecken erledigt die allgemeine `[hidden]`-Regel ganz oben. Hier stand bis zum 10.09.2026 eine eigene Zeile nur für diese Klasse — sie half der Gruppe und ließ den Knopf daneben weiter stehen. */ .wbg-personen__mehr{ align-self: flex-start; } .wbg-feld--breit{ grid-column: span 4; } .wbg-feld--schmal{ grid-column: span 2; } .wbg-feld > label{ font-weight: 700; font-size: var(--wp--preset--font-size--klein); } .wbg-feld__zusatz{ font-size: var(--wp--preset--font-size--mini); color: var(--wp--preset--color--tinte-still); margin: 0; } .wbg-feld input[type="text"], .wbg-feld input[type="email"], .wbg-feld input[type="tel"], .wbg-feld input[type="date"], .wbg-feld input[type="time"], .wbg-feld select, .wbg-feld textarea{ font: inherit; font-size: var(--wp--preset--font-size--text); color: var(--wp--preset--color--tinte); background: var(--wp--custom--feld); border: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); min-height: var(--wp--custom--ziel); width: 100%; max-width: 100%; min-width: 0; } .wbg-feld textarea{ min-height: 6rem; resize: vertical; } /* ---------- Datum und Uhrzeit auf dem iPhone ---------- BELEGT am 10.09.2026 durch Nils auf dem Gerät: nach diesen Zeilen läuft nichts mehr über, die Seite lässt sich nicht mehr seitlich schieben. Die Zeilen standen zuvor als Vermutung hier — ein WebKit zum Messen habe ich nicht, der Beleg kommt vom iPhone selbst. *Was weiterhin offen ist:* welche der beiden Regeln es trägt. Sie sind zusammen ausgeliefert und zusammen bestätigt worden; wer eine davon herausnehmen will, misst vorher auf einem echten WebKit nach. Was ausgeschlossen ist: - Die Rasterspalte. `minmax(0, 1fr)` und `min-width: 0` sind seit dem 10.09.2026 ausgeliefert und kamen mit frischem Cache-Schlüssel an (`style.css?ver=` folgt der Änderungszeit) — es läuft trotzdem über. Der Überlauf sitzt also IM Feld, nicht in der Spalte. - Der Zoom beim Antippen. Den macht iOS erst unter 16 px Schriftgröße; gemessen sind genau 16 px. Was bleibt: das Widget selbst. WebKit setzt für `input[type=date]` und `[type=time]` ein eigenes Aussehen mit einem Wertfeld, das seine Inhaltsbreite behält und über den Kasten hinausragen kann. `appearance: none` nimmt dem Feld dieses Aussehen; `min-width: 0` am Wertfeld erlaubt ihm zu schrumpfen. In Chromium gemessen, damit es dort nichts kaputtmacht: Breite unverändert (319 px), Kalendersymbol und Wertfeld bleiben gerendert (`::-webkit-calendar-picker-indicator` und `::-webkit-date-and-time-value` je `display: block`). */ .wbg-feld input[type="date"], .wbg-feld input[type="time"]{ -webkit-appearance: none; appearance: none; } .wbg-feld input[type="date"]::-webkit-date-and-time-value, .wbg-feld input[type="time"]::-webkit-date-and-time-value{ min-width: 0; text-align: left; } .wbg-feld__frei{ margin-top: var(--wp--preset--spacing--20); } .wbg-feld--fehler :is(input, select, textarea){ border-color: var(--wp--preset--color--rost); border-width: 3px; } .wbg-fehler{ display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; color: var(--wp--preset--color--rost); font-weight: 700; font-size: var(--wp--preset--font-size--klein); margin: 0; } /* Der Fehler trägt ein Zeichen, nicht nur Farbe. */ .wbg-fehler::before{ content: "\2715"; } .wbg-wahl{ display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; } .wbg-wahl input[type="checkbox"]{ width: 1.4rem; height: 1.4rem; flex: none; margin-top: .15rem; accent-color: var(--wp--preset--color--bordeaux); } .wbg-wahl label{ font-size: var(--wp--preset--font-size--klein); } /* Für Menschen unsichtbar, aber vorhanden — nicht display:none. */ .wbg-honig{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wbg-formular__fuss{ border-top: var(--wp--custom--kante-stark) solid var(--wp--custom--linie); margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--40); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); align-items: flex-start; } .wbg-formular__fuss button{ font: inherit; font-weight: 700; cursor: pointer; } .wbg-formular__klein{ font-size: var(--wp--preset--font-size--mini); color: var(--wp--preset--color--tinte-still); margin: 0; } .wbg-meldung{ border-left: 4px solid var(--wp--preset--color--rost); background: var(--wp--preset--color--grund-ruhig); padding: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); } .wbg-meldung h2{ font-size: var(--wp--preset--font-size--mittel); margin: 0; color: var(--wp--preset--color--rost); } .wbg-meldung p{ margin-top: var(--wp--preset--spacing--20); } .wbg-meldung ul{ margin: var(--wp--preset--spacing--20) 0 0; padding-left: 1.2rem; } .wbg-meldung--danke{ border-left-color: var(--wp--preset--color--petrol); } .wbg-meldung--danke h2{ color: var(--wp--preset--color--petrol); } /* Unter 60 rem steht alles wieder in einer Spalte — das Formular war am Telefon nie das Problem (3989 px vorher, 3463 px jetzt), gekürzt werden sollte der Schreibtisch. */ @media (max-width: 60rem){ .wbg-formularkopf--bild{ grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); } .wbg-formular__haupt{ column-count: 1; } } /* `minmax(0, 1fr)` statt `1fr` — und das ist kein Feinschliff. `1fr` ist die Kurzform von `minmax(auto, 1fr)`: Die Spalte darf so breit werden wie die Mindestbreite ihres breitesten Kindes. Chromium lässt `input[type=date]` beliebig schrumpfen, WebKit nicht — dort nennt das Datumsfeld seine volle Feldbreite als Minimum und zog die Spalte über den Bildschirmrand hinaus. Gemeldet von Nils am 10.09.2026 für iPhone/iPad; in der Sandbox (Chromium) trat der Fehler nicht auf. Die Sechser-Fassung oben hatte `minmax(0, 1fr)` von Anfang an und war deshalb heil. */ @media (max-width: 40rem){ .wbg-abschnitt, .wbg-personen__eintrag{ grid-template-columns: minmax(0, 1fr); } .wbg-feld, .wbg-feld--voll, .wbg-feld--breit, .wbg-feld--schmal{ grid-column: 1 / -1; } } /* ============================================================ GROSSE MONITORE Nils am 08.09.2026: auf einem sehr großen Monitor rücken die Elemente auseinander, die Kacheln wirken zu klein, und die Seite soll „pixelgenau" sein. Also eine feste Obergrenze für die ganze Seite — jenseits davon wächst nur noch der Rand, nichts mehr am Inhalt. Das macht jede Ansicht ab dieser Breite identisch. ============================================================ */ :root{ --wbg-seite: 90rem; } /* 1440 px */ .wp-site-blocks{ max-width: var(--wbg-seite); margin-inline: auto; background: var(--wp--preset--color--grund); } body{ background: var(--wp--preset--color--grund-ruhig); } /* Der Aufmacher ist vollflächig, sein INHALT aber nicht: sonst steht die Überschrift bei 1440 px ganz links und das Bild ganz rechts, mit einem Loch dazwischen. */ .wbg-hero__text{ max-width: calc(var(--wp--style--global--content-size) / 2); margin-left: auto; width: 100%; } @media (max-width: 47.999rem){ .wbg-hero__text{ max-width: none; margin-left: 0; } } /* Fünf Kacheln in der schmalen Bahn ergeben je 12,5 rem — zu klein. Der Kachelabschnitt läuft deshalb in der weiten Bahn. */ /* Sechs Einstiege statt fünf (08.09.2026). Bei 11 rem Mindestbreite brauchten sie 66 rem plus fünf Lücken — mehr als die weite Bahn hergibt, also wären sie in zwei Reihen gebrochen. 9,5 rem lässt alle sechs in einer Reihe stehen; darunter greift wieder der Umbruch. */ .wbg-kacheln{ grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } /* Das Bild bei „Das Leben feiern" stand deutlich unter der Liste nebenan. Statt es nach unten zu schieben, fuellt es jetzt den Rest seiner Spalte: die Spalten sind gleich hoch (stretch), der Rahmen nimmt den uebrigen Platz (flex:1) und das Bild fuellt ihn. align-items:start hatte das vorher verhindert — ohne Streckung greift weder height:100% noch margin-top:auto. Seit dem 08.09.2026 steht dort ein Hochformat (Kirchenschiff, 2:3), das den Platz auch traegt. */ @media (min-width: 48rem){ .wbg-zwei{ align-items: stretch; } .wbg-zwei > div:first-child{ display: flex; flex-direction: column; } /* Der Rahmen bekommt den Restplatz, das Bild liegt darin absolut. Ohne das Herausnehmen aus dem Fluss bestimmt das Bild die Hoehe des Rahmens, aus der es seine eigene ableiten soll — gemessen wurden am 08.09.2026 1500 px statt der erwarteten rund 700. */ .wbg-momente__bild{ position: relative; flex: 1 1 auto; min-height: 20rem; } .wbg-momente__bild picture{ position: absolute; inset: 0; display: block; } .wbg-momente__bild img{ width: 100%; height: 100%; aspect-ratio: auto; max-width: none; object-fit: cover; } } /* Der Hover über den Gemeindenamen im Fuß lief bis an die Trennlinie und hatte keinen Innenabstand. Der Abstand steht jetzt IMMER da, nicht erst beim Überfahren — sonst springt die Zeile. */ .wbg-gemeinden a{ padding-inline: var(--wp--preset--spacing--30); margin-inline: calc(var(--wp--preset--spacing--30) * -1); border-radius: var(--wp--custom--radius); } /* ============================================================ TEAMSEITE — /team/ Gebaut nach 07_Design/mockups/desktop/05-teamseite.png. Angelegt am 09.09.2026. ============================================================ */ /* ---------- Aufmacher ---------- */ .wbg-team-auf{ display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: 1fr; align-items: center; } .wbg-team-auf__zier{ display: flex; flex-wrap: wrap; /* Konvention 9: Abstand trennt, kein Zeichen */ align-items: center; gap: var(--wp--preset--spacing--40); } .wbg-team-auf__grafik{ display: block; width: 12rem; height: auto; aspect-ratio: 1 / 1; } /* Eigene Klasse statt `.wbg-hand`. Die trägt `position: absolute` und gehört in den Aufmacher der Startseite, wo ein Bildkasten sie hält. Hier gab es keinen positionierten Vorfahren — die Handschrift landete auf Staging 611 px weiter unten, quer über dem Verkündigungsteam. Gefunden am 09.09.2026 am gerenderten Bild, nicht beim Bauen: eine fremde Klasse bringt mit, was sie mitbringt (Konvention 19). */ .wbg-team-auf__spruch{ margin: 0; font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--gross); line-height: 1.15; color: var(--wp--preset--color--auf-farbe); transform: rotate(-3deg); } .wbg-sprungmarken{ display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--50); } @media (min-width: 48rem){ .wbg-team-auf{ grid-template-columns: 1fr auto; } .wbg-team-auf__grafik{ width: 16rem; } } /* ---------- Abschnittskopf ---------- */ .wbg-team__kopf{ margin-bottom: var(--wp--preset--spacing--60); } /* ---------- Die Karten ---------- */ .wbg-leute{ display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); /* Ohne `start` streckt das Raster jede Karte auf die Höhe der höchsten und verteilt den Rest auf die Innenabstände — derselbe Fehler wie am 09.09.2026 in der Filterspalte, wo das wie zu große `gap` aussah und keines war. */ align-items: start; list-style: none; margin: 0; padding: 0; } .wbg-person{ /* Die Karte ist eine Insel: eigene Fläche UND eigene Schriftfarbe. Ohne die Farbzeile erbt sie im Petrolband --auf-farbe, und die Namen stünden cremefarben auf Creme — im Entwurf gemessen: 1,00:1, also unsichtbar (Konvention 22). */ background: var(--wp--preset--color--grund); color: var(--wp--preset--color--tinte); border: var(--wp--custom--kante) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); overflow: hidden; /* die Grafik sitzt bündig in der Kante */ display: flex; flex-direction: column; } /* Und die Gegenrichtung zur Regel „auf Farbfläche erben Überschriften die helle Schrift" weiter oben: in der Karte gilt sie nicht. */ .wbg-band--petrol .wbg-person :is(h1,h2,h3,h4), .wbg-band--bordeaux .wbg-person :is(h1,h2,h3,h4){ color: var(--wp--preset--color--bordeaux); } .wbg-person__grafik{ display: block; width: 100%; height: auto; aspect-ratio: 29 / 10; /* Maß der gelieferten Grafiken */ object-fit: cover; } .wbg-person__inhalt{ padding: var(--wp--preset--spacing--40); } .wbg-person__name{ margin: 0; color: var(--wp--preset--color--bordeaux); } .wbg-person__amt{ margin: var(--wp--preset--spacing--10) 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } .wbg-person__feldname{ margin: var(--wp--preset--spacing--40) 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tinte-still); } .wbg-person__aufgabe{ margin: 0; font-size: var(--wp--preset--font-size--klein); } .wbg-person__marken{ display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--20) 0 0; padding: 0; list-style: none; } /* Die Gemeinde steht als umrandete Marke, NICHT als Farbfläche. Farbe steht in diesem Projekt für die Sache, nie für eine Gemeinde (theme.json/tokens.css, Flächenfarben). */ .wbg-marke-gemeinde{ font-size: var(--wp--preset--font-size--mini); border: var(--wp--custom--kante) solid var(--wp--custom--linie); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); /* „Dorn-Dürkheim-Hillesheim-Wintersheim" misst 269 px und muss in einer 17-rem-Karte umbrechen dürfen. */ overflow-wrap: break-word; } .wbg-person__daten{ margin: var(--wp--preset--spacing--40) 0 0; padding-top: var(--wp--preset--spacing--30); border-top: var(--wp--custom--kante) solid var(--wp--custom--linie); font-size: var(--wp--preset--font-size--klein); } .wbg-person__daten a, .wbg-person__daten span{ display: flex; align-items: center; gap: var(--wp--preset--spacing--30); /* WCAG 2.2 AA (2.5.8) verlangt 24 px; --ziel ist unser Richtwert von 44 px (Konvention 28). */ min-height: var(--wp--custom--ziel); overflow-wrap: anywhere; } .wbg-person__daten a{ text-decoration: none; color: inherit; } .wbg-person__daten a{ padding-inline: var(--wp--preset--spacing--10); margin-inline: calc(var(--wp--preset--spacing--10) * -1); border-radius: var(--wp--custom--radius); } .wbg-person__daten a:hover, .wbg-person__daten a:focus-visible{ background: var(--wp--preset--color--tinte-tief); color: var(--wp--preset--color--grund); } .wbg-person__zeichen{ flex: 0 0 auto; width: 1.1em; height: 1.1em; color: var(--wp--preset--color--bordeaux); } /* Solange das Portal keine Personen liefert. */ .wbg-team__leer{ max-width: 34em; margin-top: var(--wp--preset--spacing--40); } /* ---------- Schlussband ---------- */ .wbg-team-schluss{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50); } /* ---------- Rückmeldung ---------- Konvention 10: Die Zustandsanzeige gilt immer, nur Bewegung hängt an der Bewegungsabfrage. */ /* KEINE Zeigeregel für die Personenkarte. Sie ist ein
  • und kein Verweis — gemessen am 11.09.2026: zehn Stück auf /team/, keines bedienbar. Eine Rückmeldung auf etwas, das man nicht anklicken kann, verspricht eine Bedienbarkeit, die es nicht gibt. Gefunden von Nils. Die Telefon- und Mailverweise IN der Karte sind Verweise und behalten ihren Tausch; ihre Regel steht weiter unten. Nebenbei kam dabei ein zweiter Fehler heraus: Der Tausch machte die Karte dunkel, aber die Namen blieben bordeaux — weil `.wbg-band--petrol .wbg-person :is(h1,h2,h3,h4)` weiter unten steht und spezifischer ist als mein `color: inherit`. Die spätere Regel gewinnt (Konvention 48). Mit der gestrichenen Zeigeregel ist das erledigt, aber es gehört notiert. */ @media (prefers-reduced-motion: no-preference){ .wbg-person{ transition: background .15s ease, border-color .15s ease; } }