/* Theme Name: Moser Author: Patrick Pehl Description: Block-Theme für die Website von Christian Moser MdB. Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 Version: 0.19.3 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: moser */ /* =============================================================== STRUKTURELLES CSS Farben, Schriften und Abstände liegen in theme.json und sind für die Redaktion im Site Editor sichtbar und änderbar. Diese Datei enthält ausschließlich, was theme.json nicht abbilden kann: Breakpoints, Sticky-Verhalten, Tabellensatz, Unterstreichungsfarben und die Kontaktblöcke. Gliederung 1 Eigene Variablen 2 Vertikaler Rhythmus 3 Fließtext 4 Links 5 Bilder und Videos 6 Bildunterschriften 7 Listen 8 Zitate 9 Tabellen 10 Dachzeile 11 Kontaktblöcke 12 Pressemitteilung: Zweispaltigkeit 13 Kopfbereich: Sticky und Logo-Overhang 14 Dossier 15 Ansprechperson-Card 16 Menüs 17 Pagination 18 Barrierefreiheit: Skip-Link 19 Fußbereich 20 H2-Scroll-Marker 21 Kontaktseite: Abschnitt, Chip, Ausklappbares Formular =============================================================== */ /* --------------------------------------------------------------- 1 EIGENE VARIABLEN Ergänzen die Presets aus theme.json um Werte, die WordPress nicht als Preset kennt. Zentral änderbar an dieser Stelle. --------------------------------------------------------------- */ /* Farben, Schriften, Kartenradius und Zeilenhöhen stehen bewusst NICHT hier, sondern in theme.json: WordPress erzeugt daraus --wp--preset--color--*, --wp--preset--font-family--* sowie, aus settings.custom, --wp--custom--radius--card und --wp--custom--line-height--tight auf :root - eine einzige Quelle für diese Werte, keine Zweitdefinition hier. Der Kartenradius ließe sich über settings.border.radius nicht pauschal auf Bilder anwenden (WordPress bietet das nur je Block mit eigener Radius-Steuerung), deshalb settings.custom statt eines Presets. Was folgt, sind nur Werte, die theme.json überhaupt nicht kennt: Positionsversätze, feste Pixelgrößen für Logo/Overhang, der mobile Seitenabstand. */ :root { --underline-offset: 0.16em; --underline-width: 2px; --logo-size: 88px; /* Logo im Header, Abschnitt 13 */ /* Sichtbarer Überhang unter der Trennlinie (0.15.1, per transform statt negativem Rand - siehe Abschnitt 13): reiner Bleed-Betrag, ohne Verrechnung mit dem Kopfzeilen-Polster. */ --logo-overhang: 9px; --gutter-mobile: 1rem; /* Seitenabstand unter 768px */ /* Gemeinsamer Card-Schatten (0.15.0), Licht von oben rechts: negativer x-Versatz, positiver y-Versatz. Aus "contrast" bei niedriger, gestaffelter Deckkraft - dieselbe rgba()-Ausnahme wie bei den Karten selbst dokumentiert. Verwendung: Materialien-Kachel und Ansprechperson-Card (Trägerfläche), Abschnitt 14/15. */ --shadow-card: -2px 1px 3px rgba(31, 41, 55, 0.06), -6px 14px 32px rgba(31, 41, 55, 0.05); /* Tatsächliche Header-Höhe, aus denselben Werten berechnet, die den Header aufbauen (Logo + Kopfzeilen-Padding + Trennlinie) - keine zweite, von Hand nachgeführte Zahl. Ändert sich --logo-size (z. B. unten im 768px-Umbruch), rechnet sich das automatisch durch. Verwendung: sticky-Versatz der Kontaktspalte, Abschnitt 12. */ --header-height: calc(var(--logo-size) + (2 * var(--wp--preset--spacing--30)) + 1px); } /* Unter 768px: engerer Seitenabstand als die 2rem aus theme.json (0.18.0, vorher 1.5rem - Tabletrand wirkte randlos), kleineres Logo, geringerer Überstand. Der Seitenabstand wird über die WordPress-eigene Variable gesetzt, nicht über eine eigene Regel - so ziehen alle Blöcke mit, die useRootPaddingAwareAlignments auswerten. */ @media (max-width: 767px) { :root { --logo-size: 64px; --logo-overhang: 6px; /* etwas knapper, auf die kleinere Logohöhe bezogen */ --wp--style--root--padding-left: var(--gutter-mobile); --wp--style--root--padding-right: var(--gutter-mobile); } } /* --------------------------------------------------------------- 2 VERTIKALER RHYTHMUS DER ÜBERSCHRIFTEN Eine Überschrift gehört zu dem Text, der ihr folgt: viel Luft davor, wenig danach. WordPress setzt sonst gleiche Abstände in beide Richtungen, wodurch Überschriften zwischen den Absätzen schweben statt zu gliedern. Gilt auch außerhalb von .wp-block-post-content (0.11.0): "Aktuelles zum Thema", "Anstehende Termine" und "Materialien" in page-dossier.html sitzen als eigene Abschnitte direkt in main, nicht im post-content, saßen bislang also anders. Selektoren erweitert statt einer zweiten Regel - eine Fundstelle für den Rhythmus. Der Freiraum VOR diesen H2 kommt weiterhin vom margin-top des jeweiligen Abschnitts selbst (Abschnitt 14); deshalb auch der :first-child- Reset erweitert, sonst addierten sich beide Abstände. */ .wp-block-post-content h2, .moser-dossier-aktuelles h2, .moser-dossier-termine h2, .moser-dossier-downloads h2 { margin-block-start: 3rem; margin-block-end: 0.9rem; } .wp-block-post-content h3, .wp-block-post-content h4, .wp-block-post-content h5, .wp-block-post-content h6 { margin-block-start: 2.25rem; margin-block-end: 0.5rem; } .wp-block-post-content > *:first-child, .moser-dossier-aktuelles > *:first-child, .moser-dossier-termine > *:first-child, .moser-dossier-downloads > *:first-child { margin-block-start: 0; } /* --------------------------------------------------------------- 3 FLIESSTEXT Flattersatz (kein Blocksatz), normale Laufweite, keine Sonderauszeichnung bei Zeichen- oder Wortabständen. Schriftstärke 350 - Crimson Pro ist ein Variable Font, der Zwischenwerte zwischen Light und Regular zulässt. Keine eigene Zeilenhöhe hier: styles.typography.lineHeight in theme.json setzt 1.65 bereits global auf body, Absatz und Liste erben das ohne weiteres Zutun - eine lokale Regel wäre eine Zweitdefinition desselben Werts gewesen. Silbentrennung (0.18.0, vorher hyphens:none): hyphens:auto braucht lang="de" am Dokument, das WordPress aus der Spracheinstellung setzt. hyphenate-limit-chars (Wortlänge min 6, vor der Trennung min 3, danach min 3) verhindert unschöne Kurztrennungen. Wirkt vor allem in schmalen, mobilen Spalten - auf breiten Zeilen greift die Trennung kaum. */ .wp-block-post-content p, .wp-block-post-content li { font-weight: 350; text-align: left; letter-spacing: normal; word-spacing: normal; hyphens: auto; hyphenate-limit-chars: 6 3 3; } .wp-block-post-content p { margin-block-end: 1.5rem; } /* Textmarkierung in Türkis statt der Browser-Standardfarbe (0.16.0), kleiner, globaler Effekt. Textfarbe "contrast" auf "accent" liegt deutlich über WCAG AA. */ ::selection { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } /* --------------------------------------------------------------- 4 LINKS Text in CSU-Blau, Unterstreichung in Signalgrün. Die Farbe der Unterstreichung kennt der Site Editor nicht, deshalb steht sie hier; Linkfarbe und Hover sind in theme.json gesetzt und dort für die Redaktion sichtbar. Die Kontaktblöcke (.moser-kontakt) sind seit 0.11.0 nicht mehr Teil dieser Regel - dort soll die Linkfarbe der Textfarbe des Umfelds folgen, nicht dem Akzentblau. Eigene Regeln in Abschnitt 11. */ .wp-block-post-content a:where(:not(.wp-element-button)), .wp-block-post-excerpt a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); text-decoration-skip-ink: auto; } .wp-block-post-content a:where(:not(.wp-element-button)):hover { text-decoration-color: var(--wp--preset--color--accent-dark); } /* --------------------------------------------------------------- 5 BILDER UND VIDEOS Karten-Anmutung: abgerundete Ecken, kein Rahmen. Der Radius liegt in theme.json unter settings.custom.radius.card (--wp--custom--radius--card). --------------------------------------------------------------- */ .wp-block-image img, .wp-block-post-featured-image img, .wp-block-gallery .wp-block-image img, .wp-block-media-text__media img, .wp-block-video video, .wp-block-embed iframe, .wp-block-cover { border-radius: var(--wp--custom--radius--card); } /* Einbettungen (YouTube, Vimeo) tragen den Radius am Wrapper, damit das iframe nicht darüber hinausragt. */ .wp-block-embed__wrapper { border-radius: var(--wp--custom--radius--card); overflow: hidden; } .wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery { margin-block: 2.5rem; } /* Unter 768px bleiben Wide-Medien auf Textbreite: der Überstand von je 15 Prozent hätte dort keinen Raum und würde nur den Seitenrand auffressen. Die Blockeinstellung "Breit" bleibt erhalten und greift wieder, sobald genug Platz da ist. */ @media (max-width: 767px) { .wp-block-post-content .alignwide { max-width: 100%; margin-inline: 0; } } /* --------------------------------------------------------------- 6 BILDUNTERSCHRIFTEN Serifenlos als bewusster Kontrast zum Fließtext, kleiner und in gedämpfter Farbe (contrast-2), linksbündig zur Bildkante. Keine eigene Zeilenhöhe hier: theme.json setzt sie unter styles.elements.caption.typography.lineHeight (1.45, aus settings.custom.lineHeight.tight) bereits für jede figcaption - diese Blöcke tragen die Klasse wp-element-caption, über die WordPress diesen Stil automatisch zuweist. */ .wp-block-image figcaption, .wp-block-video figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-audio figcaption, .wp-block-table figcaption, .wp-block-post-featured-image figcaption { font-family: var(--wp--preset--font-family--inter); font-size: 0.875rem; font-weight: 400; /* Hauch heller als contrast-2 (0.15.0), tritt dadurch stärker zurück - von der Preset-Farbe abgeleitet statt eines neuen Fixwerts, zieht bei einer Paletten-Änderung automatisch mit. */ color: color-mix(in srgb, var(--wp--preset--color--contrast-2) 80%, white); text-align: left; margin-block-start: 0.7rem; margin-block-end: 0; } .wp-block-image figcaption a, .wp-block-video figcaption a { color: inherit; text-decoration-thickness: 1px; } /* --------------------------------------------------------------- 7 LISTEN Aufzählung und nummerierte Liste. Der Text hängt an einer gemeinsamen Achse, mehrzeilige Punkte rücken nicht unter die Marke zurück. --------------------------------------------------------------- */ .wp-block-post-content ul, .wp-block-post-content ol { margin-block: 1.25rem; padding-left: 1.4em; } .wp-block-post-content li { margin-block-end: 0.5rem; padding-left: 0.3em; } .wp-block-post-content li:last-child { margin-block-end: 0; } /* Verschachtelte Listen enger an den Elternpunkt. */ .wp-block-post-content li > ul, .wp-block-post-content li > ol { margin-block: 0.5rem; } .wp-block-post-content ul { list-style-type: disc; } .wp-block-post-content ul ul { list-style-type: circle; } .wp-block-post-content ol { list-style-type: decimal; } /* Die Listenmarke in gedämpfter Farbe - die Aufzählung soll den Text gliedern, nicht mit ihm konkurrieren. */ .wp-block-post-content li::marker { color: var(--wp--preset--color--contrast-2); } /* --------------------------------------------------------------- 8 ZITATE Klassische, zentrierte Variante (0.11.0): Kursiv, Schriftgröße und der großzügige Weißraum davor/danach kommen aus theme.json (styles.blocks.core/quote) - hier nur, was die Oberfläche nicht abdeckt: Zentrierung (kein textAlign-Key in theme.json), das Anführungszeichen als einziges Ornament und die Quellenangabe. Keine linke Linie mehr, kein eigener font-style auf dem Absatz - beides wird bereits vom Block selbst vererbt. Schriftgröße 0.13.0 von "Groß" (1.375rem) auf das Preset "Tabelle" (1.12rem) verkleinert - eine sachte Stufe, spürbar unter der vorherigen Größe, aber bewusst nicht auf Fließtextgröße (1.2rem- 1.45rem fluid). Kein neuer Wert: "Tabelle" ist ein vorhandenes Preset, hier zweckfremd für seine Größe genutzt, nicht seinen Namen. Weißraum davor/danach 0.15.0 von spacing-60/50 auf spacing-50/40 verringert - wirkte zu großzügig. */ .wp-block-quote { text-align: center; } /* Gedämpftes, großes Anführungszeichen als einziges Ornament - deutsche Anführung (unten öffnend), rein dekorativ und deshalb als CSS-Inhalt statt echtem Zeichen im Text. Wirkt es im Zusammenspiel mit dem Zitat unruhig, genügt das Entfernen dieser einen Regel. */ .wp-block-quote::before { content: "\201E"; display: block; font-family: var(--wp--preset--font-family--crimson-pro); font-style: normal; font-size: 3.5rem; line-height: 1; color: var(--wp--preset--color--contrast-2); margin-block-end: 0.25rem; } .wp-block-quote cite { display: block; margin-block-start: 0.9rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.875rem; font-style: normal; font-weight: 500; color: var(--wp--preset--color--contrast-2); } /* --------------------------------------------------------------- 9 TABELLEN Ruhiger Satz ohne Gitternetz: nur waagerechte Linien, 2px unter der Kopfzeile, 1px zwischen den Datenzeilen, letzte Zeile ohne. Dieselbe Serifenschrift wie der Fließtext, Größe 1.12rem (Preset "Tabelle" in theme.json), Körper mit Gewicht 350, Kopf fett (660). Keine Versalien, linksbündig, Spaltenbreite dynamisch aus dem Inhalt. Linie unter der Kopfzeile 1.5px. Auf schmalen Bildschirmen wird die Tabelle waagerecht scrollbar; ein Schatten am rechten Rand zeigt an, dass weitere Spalten folgen. --------------------------------------------------------------- */ .wp-block-table { margin-block: 2.5rem; } /* Ab 768px darf eine Tabelle über die Textspalte hinausragen, bis zur wideSize - ohne dass die Redaktion sie auf "Breit" stellen muss. fit-content nimmt nur den Raum, den der Inhalt braucht: schmale Tabellen bleiben schmal und mittig, breite wachsen bis 1196px. margin-inline: auto zentriert in beiden Fällen, sodass der Überstand gleichmäßig nach beiden Seiten geht. Nur im Fließtext, nicht in den Spalten der Pressemitteilung - dort wäre für einen Überstand kein Raum. */ @media (min-width: 768px) { .wp-block-post-content > .wp-block-table:not(.alignwide):not(.alignfull) { width: fit-content; max-width: var(--wp--style--global--wide-size); margin-inline: auto; } } /* Nicht width: 100% - das zwingt auch schmale Tabellen auf die volle Spaltenbreite und hebt das fit-content der Desktop-Regel auf. min-width sorgt dafür, dass die Tabelle den Textblock mindestens ausfüllt, ohne ihn überschreiten zu müssen. */ .wp-block-table table { min-width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--crimson-pro); font-size: var(--wp--preset--font-size--table); font-variant-numeric: lining-nums tabular-nums; line-height: 1.5; } /* WordPress zeichnet über sein Block-Stylesheet um jede Zelle einen Rahmen. Der muss weg: nur die waagerechten Linien aus den Regeln unten sollen bleiben, kein Gitternetz. */ .wp-block-table table, .wp-block-table th, .wp-block-table td { border: 0; } /* Kopfzeile: gleiche Serifenschrift wie der Körper, nur fett (660). Keine Versalien, keine Sperrung - abgesetzt allein durch das Gewicht und die kräftigere Linie darunter. */ .wp-block-table th { font-weight: 660; font-size: inherit; color: var(--wp--preset--color--contrast); text-align: left; vertical-align: bottom; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1.5px solid var(--wp--preset--color--contrast); } .wp-block-table td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; font-weight: 350; } .wp-block-table th:last-child, .wp-block-table td:last-child { padding-right: 0; } .wp-block-table tr:last-child td { border-bottom: none; } /* Gestreifte Variante (Blockstil "Streifen" im Editor). */ .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--base-2); } .wp-block-table.is-style-stripes td { border-bottom: none; padding-inline: 0.75rem; } /* Waagerechtes Scrollen auf schmalen Bildschirmen. scroll-shadow zeigt an, dass rechts weitere Spalten liegen. */ @media (max-width: 767px) { .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--wp--preset--color--base) 30%, transparent), linear-gradient(to right, transparent, var(--wp--preset--color--base) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .wp-block-table table { min-width: 34rem; } } /* --------------------------------------------------------------- 10 DACHZEILE Über dem Titel: Rubrik, Verfahrensstand oder Datum. Klein, in Versalien, gedämpft. Als Blockstil "Dachzeile" für Absätze verfügbar (siehe functions.php). --------------------------------------------------------------- */ .moser-dachzeile, .is-style-moser-dachzeile { font-family: var(--wp--preset--font-family--inter); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.4; color: var(--wp--preset--color--contrast-2); margin-block-end: 0.5rem; } .moser-dachzeile { display: flex; flex-wrap: wrap; gap: 1rem; } .moser-dachzeile a { color: inherit; text-decoration: none; } .moser-dachzeile a:hover, .moser-dachzeile a:focus-visible { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* Eyebrow-Variante: eigenes Muster "Dachzeile" (patterns/dachzeile.php), in den Beitragsvorlagen bereits über core/post-title platziert. Elegantere Anmutung statt Farbkasten (0.8.1): reiner Text in "deep", wie eine klassische Dachzeile - eine Farbfläche wirkte auf einer sachlichen Amtsseite zu plakativ, und ein Kasten hätte einen neuen, vom Kartenradius entkoppelten Radius gebraucht. "deep" auf "base" hat sehr hohen Kontrast, anders als das vorherige Signalgrün auf Akzentblau (2,97:1). Richtet sich nach der H1 aus, nicht fest zentriert: Standard ist linksbündig, wie core/post-title ohne eigene Ausrichtung. Erhält der Titel im Editor die Ausrichtung "zentriert", trägt er die WordPress-eigene Klasse has-text-align-center - dieselbe Klasse an der Dachzeile zentriert dort den Text, aus demselben Grund wie beim Titel selbst (siehe unten). Bugfix 0.8.1, abgelöst durch 0.12.2: Die erste Fassung machte die Dachzeile zu einem schrumpfenden inline-block-Element mit erzwungenem margin-inline-start:0, um sie in der Columns-Spalte der Pressemitteilung linksbündig zu halten. Als direktes Kind eines Containers mit layout:constrained (main in page-dossier.html, single.html) erzeugte genau dieser erzwungene Nullrand aber einen neuen Versatz: WordPress zentriert dort unausgerichtete Kinder wie den Titel über automatische Ränder auf Inhaltsbreite - ein block-level-Element wie core/post-title bekommt dadurch links UND rechts denselben Rand, ein auf 0 fixiertes inline-block-Element dagegen sitzt an der wirklichen Kante von main, die (je nach Root-Padding) weiter außen liegt als die zentrierte Inhaltsspalte des Titels - die Dachzeile "flog" nach links. Lösung 0.12.2: Kein inline-block, kein erzwungener Rand mehr. Die Dachzeile bleibt ein normales Blockelement im Fluss (wie core/ post-title selbst) und erhält exakt dieselbe automatische Zentrierung auf Inhaltsbreite - beide Geschwister richten sich dadurch in jedem Container gleich aus, unabhängig davon, ob dieser eine Columns-Spalte oder ein layout:constrained main ist. */ .moser-eyebrow { margin-block-end: 0; font-family: var(--wp--preset--font-family--inter); font-size: 0.8125rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--deep); } /* Der allgemeine Blockabstand (blockGap, theme.json) setzt sonst volle 1.5rem Durchschuss vor den Titel - hier deutlich enger, die Dachzeile soll unmittelbar über der H1 sitzen. rem, nicht em: em wäre relativ zur riesigen H1-Schriftgröße (xxx-large) gewesen und hätte trotz kleiner Zahl einen auffällig großen Abstand ergeben - der eigentliche Grund für den zu großen Durchschuss zuvor. */ .moser-eyebrow + .wp-block-post-title { margin-block-start: 0.25rem; } /* --------------------------------------------------------------- 10b METAZEILE Unter dem Titel: Datum und Rubrik. Ordnet den Beitrag zeitlich und thematisch ein, nachdem der Titel gelesen wurde. Anders als die Dachzeile (darüber, in Versalien) bleibt sie zurückhaltend in gemischter Schreibweise. Der Autor wird bewusst nicht ausgegeben: Auf der Website eines Abgeordneten ist die Urheberschaft gesetzt. --------------------------------------------------------------- */ .moser-meta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline; font-family: var(--wp--preset--font-family--inter); font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--wp--preset--color--contrast-2); margin-block: 0.9rem 0; } /* Trennpunkt zwischen den Angaben. */ .moser-meta > * + *::before { content: "·"; margin-inline-end: 0.9rem; color: var(--wp--preset--color--line); } .moser-meta a { color: inherit; text-decoration: none; } .moser-meta a:hover, .moser-meta a:focus-visible { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* --------------------------------------------------------------- 11 KONTAKTBLÖCKE Gemeinsame Semantik für alle Kontaktangaben - Pressekontakt, Wahlkreisbüro, Büro Berlin. Die Redaktion legt sie als synchronisierte Vorlagen an und weist die Klasse "moser-kontakt" im Block-Editor unter "Erweitert > Zusätzliche CSS-Klasse" zu. Aufbau: Überschrift, dann ein Absatz je Adressgruppe. Innerhalb eines Absatzes stehen die Zeilen eng zusammen (Zeilenumbruch mit Umschalt+Eingabe), zwischen den Absätzen liegt Luft. So bilden Name/Funktion, Anschrift und Rufnummern jeweils eine optische Einheit. Durchgängig serifenlos (0.11.0), auch wenn ein einzelner Absatz- oder Überschriftblock im Editor versehentlich eine eigene Schriftart erhält: WordPress vergibt Preset-Schriftklassen wie has-crimson-pro-font-family mit !important (derselbe Mechanismus, der schon bei .moser-dossier-downloads dokumentiert ist), eine normale Regel würde also nicht durchgreifen. */ .moser-kontakt, .moser-kontakt * { font-family: var(--wp--preset--font-family--inter) !important; } .moser-kontakt { font-size: 1rem; line-height: var(--wp--custom--line-height--tight); color: var(--wp--preset--color--contrast); } /* Überschrift des Blocks: benennt ihn, ohne ihn zu betonen. */ .moser-kontakt :is(h2, h3, h4) { font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; color: var(--wp--preset--color--contrast-2); margin-block: 0 1rem; padding-block-end: 0.5rem; border-bottom: 1px solid var(--wp--preset--color--line); } /* Absatz statt Überschrift (0.15.0): Kastenüberschrift ist keine Dokumentgliederung, sondern ein Etikett - dieselbe Gestaltung wie oben, nur auf .moser-kontakt-titel statt der Heading-Tags. Die h2/h3/h4-Regel bleibt bestehen (bereits angelegte synchronisierte Vorlagen könnten noch Überschriften nutzen). */ .moser-kontakt-titel { font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; color: var(--wp--preset--color--contrast-2); margin-block: 0 1rem; padding-block-end: 0.5rem; border-bottom: 1px solid var(--wp--preset--color--line); } /* Absatzgruppen: innen eng, außen Luft. Zeilenabstand 1.3 statt der geteilten "engen" 1.45 (0.11.0) - enger als sonst im Theme, damit die Zeilen einer Adressgruppe (Straße/PLZ, Name/Funktion) sichtbar als Einheit lesen. Der Absatzabstand selbst (margin-block) bleibt unverändert, nur der Zeilenabstand innerhalb einer Gruppe wird enger - dieselbe Größenordnung wie beim Namensfeld der Ansprechperson-Card (Abschnitt 15). Der Abstand zwischen den Gruppen bleibt unangetastet. */ .moser-kontakt p { font-weight: 400; line-height: 1.3; margin-block: 0 1.15rem; } .moser-kontakt p:last-child { margin-block-end: 0; } /* Name und Kennzeichnungen wie TEL, FAX in halbfett. */ .moser-kontakt strong { font-weight: 600; } /* Links: Farbe wie der umgebende Text, keine Dauer-Unterstreichung - erst bei Hover/Fokus (0.11.0). Dasselbe Muster wie .moser-meta und .moser-dachzeile (Abschnitt 10/10b), hier für den Kasten insgesamt, betrifft auch eine verlinkte E-Mail-Adresse. */ .moser-kontakt a { color: inherit; text-decoration: none; } .moser-kontakt a:hover, .moser-kontakt a:focus-visible { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* --------------------------------------------------------------- 12 PRESSEMITTEILUNG: ZWEISPALTIGKEIT Kontaktspalte links, Mitteilung rechts. Journalistinnen und Journalisten sollen den Kontakt ohne Suchen erreichen, deshalb läuft die Spalte beim Scrollen mit. Ab 768 Pixel zweispaltig - Tablets im Querformat bleiben damit zweispaltig. Darunter einspaltig: erst die Mitteilung, dann der Kontakt. --------------------------------------------------------------- */ @media (min-width: 768px) { .moser-kontaktlayout { flex-wrap: nowrap; } /* Eigene Klasse statt Verschachtelung (0.12.0, vorher .moser-pm-kontakt > .wp-block-group): Das Sticky-Verhalten hing bislang daran, dass die Gruppe zufällig das einzige direkte Kind der Spalte war - eine zweite Gruppe (etwa ein Hinweistext daneben) hätte den Selektor treffen können, ohne sticky zu sollen. top an die tatsächliche Header-Höhe gekoppelt (--header-height, Abschnitt 1) statt eines festen Werts - sonst schiebt sich die oberste Zeile unter den Sticky-Header, sobald dessen Höhe sich ändert. Kleiner Puffer (spacing-20) darüber hinaus. */ .moser-kontakt-sticky { position: sticky; top: calc(var(--header-height) + var(--wp--preset--spacing--20)); } /* Kein Kasten, keine Trennlinie - die Kontaktspalte steht durch den Abstand für sich, ohne strichweise Abgrenzung. */ .moser-kontaktspalte { padding-right: var(--wp--preset--spacing--50); } } @media (max-width: 767px) { .moser-kontaktlayout { flex-wrap: wrap; } .moser-kontaktlayout .moser-inhaltsspalte { order: 1; flex-basis: 100% !important; } .moser-kontaktlayout .moser-kontaktspalte { order: 2; flex-basis: 100% !important; margin-block-start: 3rem; padding-block-start: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); } } /* --------------------------------------------------------------- 13 KOPFBEREICH: STICKY UND LOGO-OVERHANG Der Header bleibt beim Scrollen oben. Bugfix 0.7.1: position: sticky stand auf .moser-site-header selbst - dem inneren Element aus parts/header.html. core/template-part verpackt jeden Vorlagenteil zusätzlich in einen eigenen Wrapper (hier tagName "header", siehe die Einbindung in den Templates), und genau dieser Wrapper ist die direkte Elternbox des sticky-Elements, nicht .wp-site-blocks. Der Wrapper ist nur so hoch wie der Header selbst - sticky hatte darin keinen Weg, blieb beim Laden oben stehen und verließ das Bild, sobald man über die Wrapper-Höhe hinaus scrollte. Fix: sticky auf den Wrapper selbst, ausgewählt über :has() (wie zuvor schon beim Social-Band im Header), statt auf das innere Element. Der Wrapper ist direktes Kind von .wp-site-blocks und spannt sich über die ganze Seite - der Header bleibt jetzt über den gesamten Scrollweg stehen. .moser-site-header selbst trägt nur noch overflow: visible, damit der Logo-Overhang nicht beschnitten wird. Bugfix 0.15.1: Das Logo ragt sichtbar unten über die Trennlinie hinaus (--logo-overhang, Abschnitt 1), per transform: translateY auf das Bild selbst. Ein negativer margin-block-end (bis 0.15.0) verkleinerte stattdessen die Beitragshöhe des Logos im Flex-Layout der Kopfzeile - die Kopfzeile schrumpfte um das Logo herum, statt dass das Logo sichtbar überstand. transform ändert die Layoutbox nicht, nur die Darstellung: Kopfzeilenhöhe bleibt unverändert, das Bild schiebt sich rein optisch nach unten. position: relative und z-index heben es über den nachfolgenden Seiteninhalt. Kein zusätzlicher Breakpoint: die Anpassung für schmale Bildschirme nutzt die bestehende Grenze bei 768px (siehe Abschnitt 12). Unterschied zur Referenz zoe-mayer.de: Dort wechselt der Header beim Scrollen die Farbe (transparent auf Grün) und schrumpft von 126 auf 62 Pixel. Das geschieht über einen Scroll-Listener, der eine Klasse am body umschaltet - also mit JavaScript. Hier bleibt der Header in einem Zustand; der Overhang wirkt durchgehend. Siehe ROADMAP R10, falls der Zustandswechsel gewünscht wird. --------------------------------------------------------------- */ header.wp-block-template-part:has(.moser-site-header) { position: sticky; top: 0; z-index: 30; overflow: visible; } .moser-site-header { overflow: visible; } /* Abhebung im gescrollten Zustand: ein feiner Schatten trennt den Header vom durchlaufenden Inhalt. Gelöst über eine Scroll-Timeline, also ohne JavaScript. animation-timeline: scroll() koppelt den Fortschritt der Animation an die Scrollposition des Dokuments. animation-range begrenzt sie auf die ersten 120 Pixel - danach bleibt der Endzustand. Browser ohne Unterstützung (Safari, Stand 2026) ignorieren die Eigenschaften und zeigen den Header ohne Schatten. Kein Fallback nötig: Die Navigation funktioniert in beiden Fällen, allein die optische Trennung entfällt. Bewusst nicht umgesetzt: Farbwechsel und Schrumpfen wie auf zoe-mayer.de. Beides braucht dort einen Scroll-Listener, der eine Klasse am body umschaltet. Siehe ROADMAP R10. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .moser-site-header { animation: moser-header-schatten linear both; animation-timeline: scroll(); animation-range: 0 120px; } } } /* Die Trennlinie selbst liegt als border-bottom im Vorlagenteil und bleibt dort für die Redaktion sichtbar. Der Schatten setzt nur darunter an, damit keine doppelte Kante entsteht. */ @keyframes moser-header-schatten { from { box-shadow: 0 4px 12px -6px rgb(0 0 0 / 0); } to { box-shadow: 0 4px 12px -6px rgb(0 0 0 / 0.18); } } .moser-brand { gap: var(--wp--preset--spacing--20); } /* Kopfzeile darf nicht umbrechen: Marke links, Menü rechts. */ .moser-header-row { gap: var(--wp--preset--spacing--30); } /* Die zwei Textzeilen nutzen gemeinsam die Logohöhe aus und fluchten links an derselben Kante - Websitetitel und Claim stehen als Block neben dem Logo, nicht darum herum verteilt. Eigene Zeilenhöhe statt der geteilten "engen" Zeilenhöhe (1.45, theme.json settings.custom.lineHeight.tight): Bei blockGap 0 (parts/header.html) blieb der Abstand zwischen den beiden Zeilen mit 1.45 größer als der Abstand des ganzen Blocks zum Logo (--spacing-20) - Titel und Claim wirkten nicht als Einheit. 1.15 zusammen mit blockGap 0 hält den Zeilenabstand spürbar unter dem Abstand zu Logo und Navigation. */ .moser-brand-text { line-height: 1.15; align-items: flex-start; text-align: left; } .moser-brand-text > * { margin: 0; text-align: left; /* 0.15.0: Tagline fluchtete nicht mit dem Titel */ } /* Websitetitel: Link ohne Unterstreichung, Farbe wie Fließtext. */ .moser-brand-text .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .moser-logo { position: relative; z-index: 1; margin: 0; } /* core/site-logo setzt die Breite als Inline-Style aus dem Blockattribut; hier zaehlt die Hoehe, damit der Overhang stimmt. */ .moser-logo, .moser-logo .wp-block-site-logo, .moser-logo img { width: auto !important; max-width: none; height: var(--logo-size); } /* Weicher, flacher Schatten (0.12.0) statt eines Kastens - drop-shadow folgt der Silhouette des SVG (anders als box-shadow, das den rechteckigen Rahmen schattieren würde), macht das Logo plastischer, ohne aufzutragen. rgba() aus "contrast" bei niedriger Deckkraft, dieselbe Ausnahme wie bei den Card-Schatten (Abschnitt 14/15). */ .moser-logo img { display: block; object-fit: contain; filter: drop-shadow(-2px 3px 4px rgba(31, 41, 55, 0.2)); transform: translateY(var(--logo-overhang)); /* 0.15.1: Bleed über die Trennlinie, siehe Abschnitt 13 */ } /* --------------------------------------------------------------- 14 DOSSIER Seitenvorlage templates/page-dossier.html. Aufbau analog single-pressemitteilung.html, hier nur die drei Bausteine, die theme.json nicht abdeckt: der abgesetzte Kasten, das Ausblenden des leeren "Aktuelles"-Abschnitts und die Downloadliste. --------------------------------------------------------------- */ /* Abgesetzter Kasten im post-content: Standard-Gruppenblock mit backgroundColor "base-2" (liefert die Fläche bereits als Klasse, hier nur, was der Block nicht selbst mitbringt). Kein Textumlauf: ein float wäre für eine Redaktion ohne CSS-Kenntnis zu fragil (Clearfix, Kollisionen mit anderen Blöcken) - volle abgesetzte Zeile stattdessen, der Umlauf bliebe ein späterer, separater Schritt. */ .moser-dossier-kasten { font-family: var(--wp--preset--font-family--inter); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--50); } /* "Aktuelles zum Thema": blendet Überschrift und Query gemeinsam aus, sobald die Abfrage nichts liefert - sonst stünde eine leere Überschrift über einer leeren Liste. Dieselbe :has()-Technik wie zuvor beim Social-Band im Header. Wide (0.9.0): align:wide sitzt jetzt am äußeren Group-Block selbst, nicht mehr nur an der Query darin - vorher blieb die Überschrift auf Inhaltsbreite (920px), während die Query auf wideSize (1196px) auslief, beide liefen also auseinander. Der äußere Block trägt dafür kein eigenes layout mehr (Standard-Flow statt constrained), sonst hätte er seine Kinder erneut auf die globale Inhaltsbreite zurückgestutzt und denselben Versatz nur eine Ebene tiefer erzeugt. */ .moser-dossier-aktuelles:not(:has(.wp-block-post-template > *)) { display: none; } /* Grid mit Wrapper-Group je Beitrag (wie archive.html), dort als dezente Card - dieselbe deep-Ableitung wie die Materialien-Card, damit die Seite als System wirkt. Kein Schatten hier: bei mehreren Cards nebeneinander wäre das schnell unruhig, anders als bei der einzelnen Materialien-Fläche. */ .moser-dossier-card { background-color: rgba(11, 30, 60, 0.04); border: 1px solid rgba(11, 30, 60, 0.1); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--40); } @media (max-width: 767px) { .moser-dossier-aktuelles .wp-block-post-template { grid-template-columns: 1fr; } } /* Ruhigere Teaser-Überschrift: core/post-title trägt unabhängig vom level-Attribut immer dieselbe Klasse wie die echte Artikel-H1 (styles.blocks.core/post-title in theme.json, seit 0.5.2 bewusst auf "groß und 800 Gewicht" gesetzt) - im Grid hier lief die Karte dadurch als überdimensionierter blauer Titel statt als Teaser. fontSize "large" kommt bereits über die Preset-Klasse am Block selbst (mit !important, siehe WordPress-Kernstile); hier nur, was die Oberfläche nicht abdeckt: Gewicht, Zeilenhöhe, Laufweite sowie die Linkfarbe - "contrast" statt dem globalen Linkblau, Akzent erst beim Hover. */ .moser-dossier-aktuelles .wp-block-post-title { font-weight: 600; line-height: 1.35; letter-spacing: normal; margin-block: 0 var(--wp--preset--spacing--10); } .moser-dossier-aktuelles .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .moser-dossier-aktuelles .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; } /* Anreißer: Fließtext-Skala, aber gedämpfter als der Artikeltext. */ .moser-dossier-aktuelles .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } /* Downloadliste und Termine: gemeinsame Grundform (ohne Marken, mit Trennlinie), da beide zeitbezogene bzw. listenartige Statusblöcke sind - ein Ort für die geteilte Struktur statt zweier Kopien. */ .moser-dossier-downloads .wp-block-list, .moser-dossier-termine .wp-block-list { list-style: none; margin: 0; padding: 0; } /* Geordneter Zeilensatz (0.11.0): Inter statt geerbtem Crimson Pro (beide Listen sitzen außerhalb von .wp-block-post-content, ohne eigene Schriftangabe bislang), engerer Zeilenabstand für ruhigere Zeilen. Führendes Element bleibt jeweils in normaler Textfarbe - der Downloadlink über die globale Akzentfarbe (theme.json), der Termin-Anlass, weil dort kein Link vorhanden ist -, die Meta danach (Dateiangabe bzw. Datum) gedämpft in contrast-2. */ .moser-dossier-downloads li, .moser-dossier-termine li { font-family: var(--wp--preset--font-family--inter); font-size: 1rem; line-height: var(--wp--custom--line-height--tight); padding-block: var(--wp--preset--spacing--20); border-bottom: 1px solid var(--wp--preset--color--line); } .moser-dossier-downloads li:last-child, .moser-dossier-termine li:last-child { border-bottom: none; } /* Downloadliste: Dateiangabe gedämpft, der Link selbst bleibt in Akzentfarbe - die kommt global aus theme.json (styles.elements.link) und wird hier nicht wiederholt. */ .moser-dossier-downloads li { color: var(--wp--preset--color--contrast-2); } /* Termine: nur das Datum gedämpft, Anlass und Ort bleiben in normaler Textfarbe. Inter kommt bereits von der li-Regel oben. */ .moser-dossier-termine li strong { color: var(--wp--preset--color--contrast-2); } /* Materialien als dezente Card (0.8.3). Alle drei Tönungen (Fläche, Rand, Schatten) aus "deep" bei niedriger, gestaffelter Deckkraft abgeleitet statt neutralem Grau/Schwarz - eine einzige Farbfamilie wirkt ruhiger als mehrere Grauwerte nebeneinander. rgba() ist hier bewusst die Ausnahme von "nur theme.json-Slugs", weil Presets keine Deckkraft kennen. Kein backgroundColor-Attribut mehr am Block in page-dossier.html - die Fläche kommt jetzt ausschließlich von hier, sonst hätte die eigene, per !important gesetzte Preset-Klasse des Blocks diese Tönung überdeckt. */ .moser-dossier-downloads { border-radius: var(--wp--custom--radius--card); background-color: rgba(11, 30, 60, 0.04); border: 1px solid rgba(11, 30, 60, 0.07); /* 0.15.1: einen Hauch heller */ box-shadow: var(--shadow-card); /* vereinheitlicht mit .moser-ansprechperson, 0.15.0 */ padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } /* Bild-Cards in Materialien-Spalten (0.16.0): eigener, kleinerer Radius statt des globalen Kartenradius (Abschnitt 5) - flacher, da die Bilder selbst schon in der größeren Materialien-Card sitzen. Core-Spalten funktionieren innerhalb von .moser-dossier-downloads ohne weitere Anpassung; diese Regel greift nur den Bildzuschnitt auf. */ .moser-dossier-downloads .wp-block-image img { border-radius: 5px; } @media (max-width: 767px) { .moser-dossier-downloads { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); } } /* Gesetzesstand: Fortschrittsleiste aus einer Standard-Liste. Jede Station traegt eine Zustandsklasse (moser-schritt--erledigt, --aktuell, --offen), die die Redaktion unter "Erweitert > Zusätzliche CSS-Klasse" setzt, wie bei .moser-kontakt. Barrierefrei: Der Zustand steht als echter Text in der Station selbst ("... - erledigt/aktueller Stand/offen"), nicht nur in der Farbe. Punkt und Trennlinie sind rein dekorativ und ergänzen das nur für sehende Nutzerinnen und Nutzer per Form (gefüllt/größer/ leer). Kein Bild, kein Inline-SVG. */ .moser-schritte { display: flex; flex-wrap: wrap; list-style: none; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; } .moser-schritte li { position: relative; flex: 1 1 8rem; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) 0; border-block-start: 2px solid var(--wp--preset--color--line); text-align: center; font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } .moser-schritte li::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--line); } .moser-schritt--erledigt { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); font-weight: 600; } .moser-schritt--erledigt::before { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } /* Aktuell: größerer, hohler Punkt - unterscheidet sich von "erledigt" zusätzlich über die Form, nicht nur über Farbe/Fettung. */ .moser-schritt--aktuell { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); font-weight: 700; } .moser-schritt--aktuell::before { width: 16px; height: 16px; top: -9px; background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent); } .moser-schritt--offen { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--contrast-2); } @media (max-width: 767px) { .moser-schritte li { flex-basis: 45%; } } .moser-schritt--offen::before { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--line); } @media (max-width: 767px) { .moser-schritte li { flex-basis: 45%; } } /* --------------------------------------------------------------- 15 ANSPRECHPERSON-CARD Muster patterns/ansprechperson.php, Kategorie "Moser": Bild, Name und Kontaktdaten stehen im Beitragsinhalt, Rahmen und Card-Optik hier - Trennung wie beim Dossier-Kasten (Abschnitt 14). Zwei gestaffelte Flächen: die äußere Trägerfläche ("Infofläche", base-2, trägt Columns-Block und Klasse zugleich) und darin die weiße Portrait-Card, deren Schatten minimal kräftiger ausfällt, damit sie sichtbar über der Trägerfläche liegt. Beide Schatten aus "contrast" (Fastschwarz) bei niedriger, gestaffelter Deckkraft abgeleitet, wie beim Materialien-Kasten in Abschnitt 14 - rgba() bleibt bewusst die Ausnahme von "nur theme.json-Slugs", weil Presets keine Deckkraft kennen. Aus demselben Grund ist auch der Verlauf unten (0.10.1) aus "pure-white" bei Deckkraft abgeleitet statt eines neu registrierten Farbwerts. */ /* Trägerfläche: base-2 bleibt die eigentliche Fläche, der Verlauf liegt nur als sehr sanfte, transluzente Auflage darüber - base-2 schimmert überall durch, nirgends vollständig gedeckt. 225deg: heller Ausgangspunkt oben rechts, verblasst nach unten links - dieselbe Lichtrichtung wie --shadow-card (Abschnitt 1, negativer x-Versatz), einheitlich mit allen Karten und dem Logo-Schatten. */ .moser-ansprechperson { background-color: var(--wp--preset--color--base-2); background-image: linear-gradient( 225deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 65% ); border-radius: var(--wp--custom--radius--card); /* Vertikal knapper als horizontal (0.11.0, vorher spacing-40 auf beiden Achsen) - die Trägerfläche soll nicht mehr Höhe beanspruchen, als Portrait-Card und Infoblock brauchen. */ padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); box-shadow: var(--shadow-card); /* vereinheitlicht mit .moser-dossier-downloads, 0.15.0 */ border: 1px solid rgba(11, 30, 60, 0.07); /* 0.15.1: gleiche feine Linie wie .moser-dossier-downloads */ } /* Spaltenabstand: Das Muster setzt kein eigenes blockGap, die Karte nutzt also den globalen Wert (spacing-40, theme.json) - seit 0.12.2 auch auf dem Desktop unverändert (vorher spacing-50). Die schmalere Portrait-Spalte (180px, siehe Muster) braucht neben sich weniger Luft, sonst wirkt der Abstand zum Infoblock unausgewogen groß. Kein Zurücksetzen für Schmalbild nötig: column-gap wirkt nur zwischen Spalten in derselben Reihe, im gestapelten Zustand (unten, flex-basis 100%) gibt es keine gemeinsame Reihe mehr. */ /* Weiße Bildkarte: Bild und Namensfeld bilden eine gemeinsame Fläche. overflow:hidden rundet beide gemeinsam am Kartenrand, statt sie einzeln zu runden. max-width hält die Karte auf der schmaleren Spaltenbreite (0.12.2, vorher 240px/keine eigene Obergrenze), unabhängig von der Spaltenbreite selbst. */ .moser-ansprechperson-bildkarte { max-width: 180px; background-color: var(--wp--preset--color--pure-white); border-radius: var(--wp--custom--radius--card); overflow: hidden; box-shadow: -2px 2px 6px rgba(31, 41, 55, 0.08), -6px 16px 36px rgba(31, 41, 55, 0.07); } .moser-ansprechperson-bildkarte .wp-block-image { margin: 0; } /* Obergrenze der Bildhöhe, bewusst flacher als echtes 3:4 (seit 0.11.1): width:100% + height:auto rendert das Bild zunächst in seiner eigenen Proportion, max-height deckelt das darauf - ein höheres Bild wird begrenzt (object-fit:cover beschneidet), ein flacheres bleibt unangetastet in seiner eigenen, kleineren Höhe. 220px statt der 260px aus 0.11.1 (0.12.2, weitere Verkleinerung): Kartenbreite (180px), Bildhöhe und Namensfeld-Polster ergeben zusammen keinen exakt herleitbaren Wert mehr - zugunsten einer kompakten, ruhigen Gesamtwirkung gerundet statt strikt aus 180px im 3:4-Verhältnis (das wären 240px) abgeleitet. 165px Spaltenbreite im Schmalbild, Bildhöhe proportional auf 200px. Ersetzt die Bild-Attribute aspectRatio/scale bewusst: die Zuschnittslogik gehört wie der Kartenradius (Abschnitt 5) in die Theme-Ebene. */ .moser-ansprechperson-bildkarte img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; /* überschreibt den globalen Bildradius, Abschnitt 5 */ } /* Feste Höhe gilt nur nebeneinander (0.17.1, vorher ungescopt) - im gestapelten Zustand unter 600px greift stattdessen das Querformat 3:2 (siehe media query unten). min-width statt eines gemeinsamen Selektors hält beide Regeln sauber getrennt. */ @media (min-width: 601px) { .moser-ansprechperson-bildkarte img { max-height: 12rem !important; /* 0.15.1: harte Vorgabe, überschreibt Block-eigene Inline-Maße */ } } /* Ragt ins Bild: negativer oberer Rand zieht das Namensfeld über den unteren Bildrand, statt bündig darunter abzuschließen. Braucht eine eigene, deckende Hintergrundfarbe (statt der von der Bildkarte geerbten), sonst schiene das Bild im Überstand durch. !important überschreibt den block-eigenen blockGap-Abstand zwischen Bild und Namensfeld (beides Kinder derselben Gruppe). Polster oben deutlich größer als unten/seitlich (0.12.2, vorher spacing-40 auf allen Seiten): Das Namensfeld ragt ohnehin per negativem Rand ins Bild, ein größeres oberes Polster gibt dem Namen dabei genug Abstand zur überlappten Bildkante, ohne die Karte insgesamt höher zu machen als ein gleichmäßiges Polster. */ .moser-ansprechperson-name { position: relative; background-color: var(--wp--preset--color--pure-white); margin-block-start: calc(var(--wp--preset--spacing--30) * -1) !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); text-align: center; } .moser-ansprechperson-name p { margin: 0; font-family: var(--wp--preset--font-family--inter); line-height: 1.3; color: var(--wp--preset--color--contrast); } /* Namensabsatz in den Kontakt-Mustern (0.19.3), patterns/kontakt-*.php: eigene Klasse statt .moser-ansprechperson-name - die trägt bereits Hintergrund, Innenpolster und den negativen Rand des Karten-Wrappers oben und würde das an einem einzelnen Absatz falsch wiederholen (ein Klassenselektor wirkt unabhängig vom Element). Eine Stufe über Fließtext (Preset "Groß"), fett, enge Zeilenhöhe, kein unterer Rand - die umgebende Gruppe (blockGap) regelt den Abstand zur Rollenzeile darüber. Das im Inhalt bleibt die eigentliche Fettungs-Auszeichnung, font-weight hier nur zur Absicherung. */ .moser-ansprechperson-name-text { margin-bottom: 0; font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: var(--wp--custom--line-height--tight); } /* "Skip a weight": Nachname und Vorname eine Gewichtsstufe auseinander (600/400, Medium bewusst ausgelassen), statt nur über die Schriftgröße zu unterscheiden. Die Fettung des Nachnamens steht zusätzlich als im Mustermarkup selbst (0.10.1) - Inhaltsauszeichnung, die einen Themewechsel übersteht; die Gewichtsstufe hier bleibt als Absicherung bestehen, falls die Auszeichnung im Editor verlorenginge. Eine Stufe größer (0.11.1, vorher 1.0625rem/1rem), Verhältnis der beiden Größen zueinander unverändert gehalten. */ .moser-ansprechperson-nachname { font-size: 1.2rem; font-weight: 600; } .moser-ansprechperson-vorname { font-size: 1.0625rem; font-weight: 400; margin-block-start: 0.15rem !important; } .moser-ansprechperson-info { font-family: var(--wp--preset--font-family--inter); font-size: 1rem; line-height: var(--wp--custom--line-height--tight); color: var(--wp--preset--color--contrast); /* 0.17.1: lange E-Mail-Adressen brachen ohne Vorgabe mitten im Wort um ("bundestag.d e") - overflow-wrap statt Zeichen-für- Zeichen-Umbruch (word-break: break-all), bricht nur, wenn die Zeile es wirklich braucht. */ overflow-wrap: anywhere; } /* Bezeichner-Zeile, nach dem Vorbild von .moser-kontakt (Abschnitt 11) - eigene Regeln statt gemeinsamer Klasse, da hier ein Absatz mit festem Text steht, keine Überschrift: mehrere Ansprechpersonen auf einer Seite sollen nicht mehrfach denselben Überschriftentext ins Dokument-Gliederung einbringen. Ohne Trennlinie (0.11.0, vorher 1px line): Auf der ohnehin sehr ruhigen Card - sanfter Verlauf statt Fläche, kein Rand an der Bildkarte - wirkte eine zusätzliche Linie unter dem Bezeichner unruhiger als der Verzicht darauf. Die gesperrte Versalzeile trägt die Abgrenzung zum Fließtext bereits durch sich selbst. */ .moser-ansprechperson-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; color: var(--wp--preset--color--contrast-2); margin-block: 0 1rem; } .moser-ansprechperson-info p { margin-block: 0 1.15rem; } .moser-ansprechperson-info p:last-child { margin-block-end: 0; } .moser-ansprechperson-info strong { font-weight: 600; } /* Ab Schmalbild: Informationsblock unter die Portrait-Card, die jetzt die volle Spaltenbreite nutzt statt wie zuvor auf 165px begrenzt zu bleiben (0.17.1, vorher schmales Hochformat mit viel Leerraum daneben). Bild wechselt dafür ins Querformat 3:2 - schneidet vom stehenden Porträt weniger weg als 16:9; object-position: center top verhindert, dass der Kopf beschnitten wird. Ersetzt die feste Höhe aus 0.15.1, die ab hier nicht mehr gilt (siehe min-width-Regel oben). !important überschreibt die feste flex-basis aus dem Muster, wie beim Pressekontakt (moser-kontaktlayout, Abschnitt 12). Eigener, engerer Breakpoint statt der site-weiten 767px-Grenze (0.16.0): Bei 767px stapelte die Card bereits auf Tablet-Breiten ohne Not - das kleine Portrait lässt beide Spalten dort noch bequem nebeneinander zu (Tablet bleibt unverändert, siehe oben). 600px trifft nur noch echte Smartphone-Breiten. */ @media (max-width: 600px) { .moser-ansprechperson { flex-wrap: wrap; padding: var(--wp--preset--spacing--30); } .moser-ansprechperson-portrait { flex-basis: 100% !important; } .moser-ansprechperson-bildkarte { max-width: none; } .moser-ansprechperson-bildkarte img { aspect-ratio: 3 / 2; object-position: center top; } .moser-ansprechperson-info { flex-basis: 100% !important; margin-block-start: var(--wp--preset--spacing--40); } } /* --------------------------------------------------------------- 16 MENÜS Gilt für jeden core/navigation-Block im Theme - Hauptmenü im Header, Footer-Hauptmenü und Rechtliches-Menü im Footer (parts/header.html, parts/footer.html, seit 0.12.0) gleichermaßen, da alle drei denselben Blocktyp nutzen. Schrift und Größe stehen bereits an den einzelnen Blöcken (fontFamily "inter", fontSize "small"/"x-small"); das Gewicht (500, bewusst zwischen Fließtext 350 und Überschriften 600-800) steht in theme.json (styles.blocks.core/navigation) - hier nur Hover und aktive Seite, die die Oberfläche nicht abdeckt. Dieselbe Signalfarben-Unterstreichung wie im übrigen Theme (Abschnitt 4, 10b, 11): Hover zeigt sie vorübergehend allen drei Menüs gleichermaßen. Die dauerhafte Markierung der aktiven Seite gilt seit 0.13.0 dagegen nur noch im Hauptmenü (auf .moser-nav- hauptmenue gescopt) - im Footer, mit mehreren gleichrangigen Links dicht beieinander, wirkte sie zu auffällig; die Footer-Links bleiben dort einheitlich. Kein zusätzliches Symbol, kein Farbkasten. Bewusst zurückgestellt: ein Kipp-/Zerr-Effekt beim Hover (Transform, wie auf Referenzseiten gesehen) - eigene Menü-Feinschliff-Runde, siehe ROADMAP. --------------------------------------------------------------- */ .wp-block-navigation a.wp-block-navigation-item__content { color: inherit; text-decoration: none; } .wp-block-navigation a.wp-block-navigation-item__content:hover, .wp-block-navigation a.wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* Aktive Seite: WordPress markiert den Listeneintrag selbst mit current-menu-item, wie beim klassischen Menü. Nur im Hauptmenü (Abschnitt 3, moser-nav-hauptmenue in parts/header.html) - im Footer bleibt sie bewusst aus, siehe oben. */ .moser-nav-hauptmenue .current-menu-item > a.wp-block-navigation-item__content { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); text-decoration-skip-ink: auto; } /* Suche im Hauptmenü (0.15.0): core/search als reines Icon, letztes Element im Navigation-Block - Core-Verhalten (Klick klappt das Feld auf), kein eigenes JavaScript. Schlanker als die Button-Fläche aus theme.json (styles.elements.button), passend neben den Menülinks. */ .moser-nav-hauptmenue .wp-block-search__button-only { background: none; border: none; padding: 0; color: var(--wp--preset--color--contrast); } .moser-nav-hauptmenue .wp-block-search__button-only svg { fill: currentColor; } .moser-nav-hauptmenue .wp-block-search__button-only:hover, .moser-nav-hauptmenue .wp-block-search__button-only:focus-visible { color: var(--wp--preset--color--accent); } /* Mobiles Overlay-Menü (0.17.0): Core-Overlay bleibt unangetastet (kein Ersatz, keine eigene Öffnen/Schließen-Logik), nur über die eigenen Overlay-Klassen sauberer gestaltet - großzügigere Zeilenabstände und Tap-Flächen, ruhige Position des Schließen- Symbols, ein dezentes Ein-/Ausblenden per CSS-Transition. Die aktive Seite bleibt über dieselbe Regel wie oben markiert (der Selektor .moser-nav-hauptmenue trifft weiterhin zu, das Overlay ist nur ein Kind desselben Blocks). Kein JavaScript unsererseits - das Core-Skript schaltet ausschließlich is-menu-open um. Bugfix 0.17.2: Derselbe Container steht auf dem Desktop inline im Hauptmenü, ohne is-menu-open - das setzt ausschließlich das mobile Overlay-Skript. Ein globales opacity:0 traf deshalb auch den Desktop-Zustand und blendete das Menü dauerhaft aus. Fix: kein Grundzustand mehr auf dem Container selbst, die Einblendung läuft nur noch als kurze Animation auf .is-menu-open. */ @keyframes moser-menu-overlay-einblenden { from { opacity: 0; } to { opacity: 1; } } .wp-block-navigation__responsive-container.is-menu-open { animation: moser-menu-overlay-einblenden 0.25s ease both; } /* Großzügiger Zeilenabstand und Tap-Fläche je Menüpunkt, statt der engen Standardabstände - im Overlay steht jeder Punkt für sich, nicht dicht neben anderen wie im Hauptmenü. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 44px; /* 0.18.0: Trefferfläche statt reinem padding-block */ } /* Burger-Umschalter: Symbol bleibt in Originalgröße (24px), padding bringt die Trefferfläche auf 44x44px (0.18.0). */ .wp-block-navigation__responsive-container-open { padding: 10px; } /* Schließen-Symbol: gleicher Randabstand wie die Kopfzeile (--wp--preset--spacing--30, Abschnitt 13), statt der abweichenden Core-Vorgabe - fügt sich damit optisch in den übrigen Header ein. */ .wp-block-navigation__responsive-container-close { top: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); } /* --------------------------------------------------------------- 17 PAGINATION Blätternavigation in Archiv und Suche (templates/archive.html, search.html). Schrift und Größe stehen bereits am Block (fontFamily/fontSize, wie beim Hauptmenü); hier nur Farbe und Zustände - dieselben Tokens wie überall im Theme, kein neues Farbsystem. --------------------------------------------------------------- */ .wp-block-query-pagination-numbers a, .wp-block-query-pagination-previous, .wp-block-query-pagination-next { color: var(--wp--preset--color--contrast-2); text-decoration: none; } .wp-block-query-pagination-numbers a:hover, .wp-block-query-pagination-numbers a:focus-visible, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-previous:focus-visible, .wp-block-query-pagination-next:hover, .wp-block-query-pagination-next:focus-visible { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* Aktuelle Seite: WordPress rendert sie als span.page-numbers.current ohne Link. */ .wp-block-query-pagination-numbers .page-numbers.current { color: var(--wp--preset--color--contrast); font-weight: 600; } /* --------------------------------------------------------------- 18 BARRIEREFREIHEIT: SKIP-LINK Sprunglink an den Seitenanfang (ausgegeben über wp_body_open in functions.php), erlaubt es, Header und Menü per Tastatur zu überspringen. Normal unsichtbar, erscheint erst beim Fokus - Standardmuster, kein Bild, kein Skript. Sprungziel ist id="main" an der main-Ausgabe jeder Vorlage. Vorhandene Fokus-Umrandungen des Browsers bleiben unangetastet: Diese Datei setzt an keiner Stelle outline auf 0 oder none. Eigene Fokus-Stile sind vorerst bewusst nicht Teil dieses Auftrags, siehe ROADMAP. --------------------------------------------------------------- */ .skip-link { position: absolute; top: -3rem; left: var(--wp--preset--spacing--20); z-index: 100; padding: 0.75em 1.25em; background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--small); text-decoration: none; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); } .skip-link:focus { top: var(--wp--preset--spacing--20); } /* --------------------------------------------------------------- 19 FUSSBEREICH Baukasten, Standardzustand schlicht (parts/footer.html): Marken-/ Bildzeile, waagerechtes Hauptmenü, Rechtliches-Zeile. Der optionale Spaltenblock (Kurzvita, Themen, Social-Media) lebt bewusst als eigenes Muster (patterns/footer-spalten.php, Kategorie "Moser"), nicht fest im Footer-Part - er lässt sich einfügen und wieder entfernen, ohne den Standardzustand zu berühren. Hover-Zustand beider Footer-Menüs kommt bereits aus Abschnitt 16 (.wp-block-navigation, nicht auf den Header beschränkt), die dauerhafte Aktiv-Markierung dort dagegen bewusst nicht (siehe Abschnitt 16) - hier nur, was die Blockattribute selbst nicht abdecken: Fläche, Ausrichtung, Farbe, Stapel-Breakpoint. */ /* Eigener, wärmerer Hintergrund statt base-2 (0.13.0) - base-2 bleibt für Cards und Kästen im Beitragsinhalt unverändert. #EEF0E2 als Literalwert statt Preset: ein einmaliger, auf den Footer beschränkter Farbton, kein Kandidat für die globale Palette (die Redaktion kann ihn deshalb nicht im Site Editor umstellen - bei Bedarf hier). Kontrast von "contrast" (#1F2937) auf #EEF0E2 liegt weit über WCAG AA. position/overflow (0.14.0) sind der Rahmen für die Adler-Grafik direkt darunter: overflow:hidden beschneidet sie, position:relative verankert ihre absolute Positionierung an dieser Fläche. */ .moser-footer-flaeche { position: relative; overflow: hidden; background-color: #EEF0E2; } /* Adler-Grafik (0.14.0), rein dekorativ - institutioneller Rahmen im Hintergrund, kein Blickfang. Ganzes Quell-SVG (assets/images/ Deutscher_Bundestag_logo.svg) unverändert eingesetzt (siehe parts/footer.html), nur Kontur statt Füllung: fill:none, gezeichnet über stroke. Kein Pfad wird zugeschnitten - der Ausschnitt entsteht allein durch die Position der Grafik und overflow:hidden am Container oben. So platziert, dass Körper, Kopf, Krallen/Füße, rechte Schwinge und Schwanz jenseits der unteren rechten Ecke liegen; nur die linke Schwinge mit etwas Bauch ragt herein, Federspitzen nach innen weisend. Farbe über das Preset "deep", nicht als Fixwert im SVG - die Redaktion kann sie im Site Editor ändern, ohne die Datei anzufassen. stroke-width in Pixel plus vector-effect:non-scaling-stroke: der Strich bleibt bei jeder Skalierung fein und gleich dick, statt mit der Grafik mitzuwachsen. */ .moser-footer-adler { position: absolute; right: -315px; bottom: -38px; /* 0.16.0: ~1rem höher (vorher -54px) */ width: 500px; height: auto; fill: none; stroke: var(--wp--preset--color--deep); stroke-width: 1px; opacity: 0.25; pointer-events: none; } .moser-footer-adler path { vector-effect: non-scaling-stroke; } /* Ab Schmalbild kleiner und näher an die Ecke gerückt, derselbe Bildausschnitt (Breite, Rand und unterer Versatz im selben Verhältnis skaliert) - kein neuer Breakpoint. */ @media (max-width: 767px) { .moser-footer-adler { width: 340px; right: -214px; bottom: -26px; /* 0.16.0: proportional angehoben */ } } /* Zeilenabstand (spacing-10) steht am Block selbst (blockGap in parts/footer.html), nicht hier - konsistent mit den übrigen Gruppen im Theme (z. B. .moser-brand-text). Hier nur die Ausrichtung, die der Block nicht selbst anbietet. */ .moser-footer-marke { align-items: center; text-align: center; } /* Feste Höhe statt fester Breite (0.15.1, vorher width:40 am Block) - width:auto lässt das Logo in eigener Proportion mitwachsen. */ .moser-footer-marke .wp-block-site-logo img { max-height: 12rem; width: auto; } /* Schmalbild (0.16.0): Breite statt Höhe als Obergrenze, sonst wirkt das Logo neben Unterzeile/Anschrift zu groß auf schmalen Screens. */ @media (max-width: 767px) { .moser-footer-marke .wp-block-site-logo img { max-height: none; width: 50%; } } /* Schmal und gedämpft: Anschrift/Copyright und Rechtliches-Menü teilen sich eine Zeile, beide in derselben zurückhaltenden Farbe - die Navigation übernimmt sie über color: inherit (Abschnitt 16). */ .moser-footer-rechtliches { color: var(--wp--preset--color--contrast-2); } /* Social-Band: Wie dokumentiert blendet sich die Gruppe aus, sobald die Icon-Liste leer ist (Redaktion hat noch keine Profile eingetragen) - kein Leerraum, ohne dass die Gruppe gelöscht werden müsste. */ .moser-social-band:has(.wp-block-social-links:empty) { display: none; } /* Footer-Spalten (Muster footer-spalten.php), 0.13.0: linksbündig statt zentriert - Überschrift, Fließtext und Liste in jeder Spalte sollen wie im Referenzvorbild (Anthropic-Footer) an einer gemeinsamen linken Kante fluchten. */ .moser-footer-spalten { text-align: left; } /* H4 serifenlos und aufrecht statt der globalen kursiven Serifenüberschrift (theme.json styles.elements.h4, für Zwischenüberschriften im Fließtext gedacht) - im Footer wirkte das fremd. fontFamily/fontStyle stehen zusätzlich am Block selbst (Muster), diese Regel sichert es zusätzlich ab, falls die Blockattribute im Editor verändert werden. */ .moser-footer-spalten h4 { font-family: var(--wp--preset--font-family--inter); font-style: normal; } /* Liste ohne Marken, ohne Einzug - reine Linkliste, keine Aufzählung. */ .moser-footer-spalten ul { list-style: none; margin: 0; padding: 0; } /* Linkfarbe Fastschwarz statt Akzent, keine Dauer-Unterstreichung - dasselbe Muster wie .moser-meta/.moser-dachzeile/.moser-kontakt (Abschnitt 4, 10b, 11), hier mit "contrast" statt "inherit", da die Spalte selbst keine abweichende Textfarbe trägt. */ .moser-footer-spalten a { color: var(--wp--preset--color--contrast); text-decoration: none; } .moser-footer-spalten a:hover, .moser-footer-spalten a:focus-visible { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); } /* Kurzvita-Foto: eigene Proportion statt erzwungenem Quadrat. Die Blockgröße "medium" schneidet WordPress standardmäßig nicht hart zu (anders als "thumbnail", vorher genutzt) - das Bild behält das Format, das ihm im Editor zugewiesen wurde. Radius deutlich schwächer als der globale Kartenradius (Abschnitt 5), nur eine dezente Andeutung. max-width hält es in der schmalen Spalte kompakt, ohne die Fläche zu dominieren. */ .moser-footer-spalten .wp-block-image img { max-width: 140px; border-radius: 0.25rem; } /* Ab Schmalbild: Spalten stapeln, wie überall im Theme bei 768px. !important überschreibt Cores eigene, abweichende Stapel-Bedingung (aus dem Block-Stylesheet, andere Schwelle als unser einheitlicher Breakpoint) - derselbe Grund wie beim Pressekontakt (Abschnitt 12) und der Ansprechperson-Card (Abschnitt 15). */ @media (max-width: 767px) { .moser-footer-spalten .wp-block-column { flex-basis: 100% !important; } } /* --------------------------------------------------------------- 20 H2-SCROLL-MARKER Zarter Textmarker-Effekt (0.17.0): Ein Pseudo-Element hinter dem H2-Text zieht beim Einscrollen von links nach rechts auf, wie ein Textmarker - der Text selbst bleibt unverändert dunkel und lesbar. Nur H2 im Fließtext (.wp-block-post-content), nicht H3/H4 und nicht die übrigen H2-Selektoren aus Abschnitt 2 (Aktuelles/Termine/ Materialien) - zurückhaltender Effekt, kein Muster über die ganze Seite. display: inline-block lässt die Box der Überschrift ihren eigenen Text umschließen (shrink-to-fit) statt die volle Blockbreite einzunehmen - der Marker liegt dadurch nur hinter der tatsächlichen Textzeile, nicht über die ganze Spaltenbreite. isolation: isolate hält den negativen z-index des Markers innerhalb der Überschrift selbst, statt ihn gegen den Rest der Seite stapeln zu lassen. transform: scaleX() statt einer Breiten- oder background-size- Animation - GPU-Compositing statt Layout/Paint bei jedem Scroll-Frame. transform-origin: left zieht von links auf, wie eine Lesebewegung. rgba() ist hier bewusst die Ausnahme von "nur theme.json-Slugs", wie bei den Card-Verläufen: Presets kennen keine Deckkraft, "accent" bei 30% ergibt den geforderten Richtwert. animation-timeline: view() koppelt den Fortschritt an die Position der Überschrift im Sichtbereich (statt an die ganze Dokumentlänge wie animation-timeline: scroll() beim Header-Schatten, Abschnitt 13) - jede H2 zieht für sich auf, sobald sie einläuft. Startzustand scaleX(0) ist unsichtbar; ohne Animation (Browser ohne Unterstützung, siehe @supports) oder bei reduzierter Bewegung bleibt der Marker deshalb einfach aus - kein zusätzlicher Deaktivierungspfad nötig, wie beim Header-Schatten. */ .wp-block-post-content h2 { position: relative; isolation: isolate; display: inline-block; } .wp-block-post-content h2::before { content: ""; position: absolute; inset: -0.05em -0.2em; background-color: rgba(25, 200, 195, 0.30); transform: scaleX(0); transform-origin: left; z-index: -1; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .wp-block-post-content h2::before { animation: moser-h2-marker linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } } } @keyframes moser-h2-marker { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --------------------------------------------------------------- 21 KONTAKTSEITE: ABSCHNITT, CHIP, AUSKLAPPBARES FORMULAR Blockstile "Abschnitt" (core/group) und "Chip" (core/button), Registrierung in functions.php. Bausteine für die Kontaktseite (Muster patterns/kontakt-*.php), aber nicht auf sie beschränkt - beide Blockstile stehen im Inserter für jeden core/group- bzw. core/button-Block zur Wahl. Nur diese drei Bereiche liegen hier in eigenem CSS. Alles, was theme.json abbilden kann (Farben, Schriftgrößen, Abstände als Presets), steht dort - diese Datei ergänzt nur, was die Editor-Oberfläche nicht bietet: Blockstil-Selektoren, Zustände (Hover, Fokus, offen/geschlossen) und den Ankerversatz. --------------------------------------------------------------- */ /* Abschnitt: Oberlinie statt Separator-Block oder
- die Linie gehört zum Abschnitt, nicht zu einem eigenen Element dazwischen. Polster oben knapper als unten (wie bei den bestehenden Sektionsabständen, siehe Abschnitt 2), damit der Abschnitt optisch näher an seiner eigenen Überschrift hängt als am vorigen Inhalt. scroll-margin-block-start auf --header-height (Abschnitt 1) statt eines Festwerts: Genau dieser Wert hält bereits die Kontaktspalte der Pressemitteilung unter dem Sticky-Header frei (Abschnitt 12) - dieselbe Kennzahl, derselbe Zweck, hier für Sprungmarkenziele statt für position: sticky. */ .is-style-abschnitt { border-top: 2px solid var(--wp--preset--color--contrast); padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); scroll-margin-block-start: var(--header-height); } /* Chip: ruhiger Verweis, keine Handlungsaufforderung - anders als der gefüllte Standard-Button (theme.json styles.elements.button), der für echte Aktionen wie "Pressemitteilungen" reserviert bleibt (siehe patterns/kontakt-presse.php). Kein Fokusring-Entzug: der Browser-Standard bleibt sichtbar, hier nur Rahmen/Fläche im Hover-/Fokuszustand zusätzlich abgesetzt. Der Abstand zwischen mehreren Chips kommt aus dem Buttons-Block selbst (blockGap), nicht von hier - deshalb kein margin/gap in dieser Regel. */ .wp-block-button.is-style-chip > .wp-block-button__link { background: none; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); font-size: 0.8rem; font-weight: 400; color: var(--wp--preset--color--contrast-2); } .wp-block-button.is-style-chip > .wp-block-button__link:hover { background-color: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--contrast-2); color: var(--wp--preset--color--contrast); } .wp-block-button.is-style-chip > .wp-block-button__link:focus-visible { color: var(--wp--preset--color--contrast); } /* Ausklappbares Formular (core/details): dünner Rahmen um den gesamten Block, abgesetzte Kopfzeile als Klickfläche. Reiner CSS-Trick, kein Skript - details/summary bringen Öffnen/Schließen und Tastaturfokus bereits selbst mit. Eigener Marker (Plus/Minus) statt der Browser-Dreiecke: list-style entfernt ihn in Firefox/Chrome, ::-webkit-details-marker zusätzlich in älteren WebKit-Versionen. summary bleibt dabei ein natives, fokussierbares Element - kein tabindex, kein eigener Tastatur-Handler nötig, der Browser-Fokusring bleibt unangetastet. */ .wp-block-details { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); } .wp-block-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); min-height: 44px; font-weight: 600; background-color: var(--wp--preset--color--base-2); border-radius: var(--wp--custom--radius--card); } .wp-block-details > summary::-webkit-details-marker { display: none; } .wp-block-details > summary::after { content: "+"; font-weight: 400; font-size: 1.15rem; color: var(--wp--preset--color--contrast-2); } .wp-block-details[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; } .wp-block-details[open] > summary::after { content: "\2013"; /* Halbgeviertstrich (–) statt Plus im geöffneten Zustand */ } /* Geöffneter Inhalt: eigenes Innenpolster, da er außerhalb der summary-Klickfläche direkt im details-Element liegt. */ .wp-block-details > :not(summary) { margin-block-start: 0; padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }