/* Theme Name: WDB Wissensdatenbank Theme URI: https://wissen.kreditreich.de/ Description: Child-Theme von Twenty Twenty-Five für die Wissensdatenbank (FAQ + Glossar) auf wissen.kreditreich.de. Eigene Gestaltung nach Entwurf C „Sprechstunde" (Betreiber-Entscheidung 2026-07-18): Papier-Beige und Tinten-Braun, drei Themenfarben als Wegleitsystem, vollständiger Dunkelmodus. Die frühere Festlegung „TT5-Optik unverändert" (Zulieferung A, 2026-07-17) ist damit überholt. Author: Kreditreich Template: twentytwentyfive Version: 2.23.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wdb-wissen Requires at least: 6.7 Requires PHP: 7.2 */ /* ============================================================================= * 1. FARB- UND SCHRIFT-TOKEN * * QUELLE DER WERTE: entwuerfe/entwurf-c-sprechstunde.html. Die dortigen Farben * sind am 2026-07-18 in 45 von 45 Faellen gegen WCAG AA gemessen worden, hell * UND dunkel (Protokoll: entwuerfe/README.md). Sie werden hier deshalb * UNVERAENDERT uebernommen - wer einen Wert anfasst, macht die Messung * ungueltig und muss sie wiederholen. * * PRAEFIX --wdb-: Twenty Twenty-Five bringt eigene Custom Properties mit * (--wp--preset--*), und mu-plugins oder spaetere Plugins koennen weitere * setzen. Ein generisches --ink oder --paper waere ein Namensraum-Konflikt mit * Ansage; --wdb- macht jede Variable dieser Datei eindeutig zuordenbar. * ========================================================================== */ :root { --wdb-ink: #2e2419; --wdb-paper: #e7ded0; --wdb-paper-raised: #fffdf8; --wdb-slate: #6b5f4d; --wdb-slate-soft: #7d735e; /* Die drei Themenfelder. Die Slugs folgen der Taxonomie wdb_themenfeld * (bf / mk / rka, siehe wdb-datenmodell.php) - der Entwurf sprach von * "rk", das Datenmodell kennt aber "rka". Hier gilt das Datenmodell, * sonst greift die Body-Klasse aus functions.php ins Leere. */ --wdb-bf: #33625a; --wdb-bf-tint: #dbe6e2; --wdb-mk: #9a6128; --wdb-mk-tint: #ece0cd; --wdb-rka: #7a4a56; --wdb-rka-tint: #e8dcdf; --wdb-ink-on-bf: #eef4f2; --wdb-ink-on-mk: #fbf3e7; --wdb-ink-on-rka: #f4eaec; --wdb-line: #d6cab0; --wdb-line-strong: #c2b393; --wdb-focus: #33625a; --wdb-shadow: 0 1px 2px rgba(46, 36, 25, 0.08), 0 10px 24px rgba(46, 36, 25, 0.07); /* Akzentfarbe der aktuellen Seite. Der Vorgabewert ist neutral; die * Body-Klassen weiter unten schalten ihn auf das Themenfeld des Eintrags * um. So braucht jede Komponente nur EINE Variable zu kennen statt drei * Faelle zu unterscheiden. */ --wdb-akzent: var(--wdb-line-strong); --wdb-akzent-tint: var(--wdb-paper-raised); --wdb-font-display: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wdb-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; /* WELTKUGEL IM SEITENKOPF (assets/globus.js liest genau diese fuenf Werte). * * Herkunft: Das Vorbild steht auf kreditreich.de (Canvas-Skript im Kopf der * Hauptseite, am 2026-07-19 gelesen). Uebernommen sind Form, Projektion und * Drehgeschwindigkeit - NICHT die Farben: Dort traegt die Kugel Marineblau * (#1A3A6B/#040C1A) und Gold (#C9A84C), die Hausfarben der Konsumentenmarke. * Hier gilt Entwurf C, also Papier und Tinte mit Petrol als Themenfarbe. * * WARUM ALS EIGENE TOKEN und nicht im Skript: So gehen die Farben den * Dunkelmodus mit, ohne dass JavaScript etwas ueber hell und dunkel wissen * muss - es liest die Variablen und zeichnet, was dasteht. * * ZUR WCAG-MESSUNG (45/45, 2026-07-18): Diese fuenf Werte sind NICHT Teil * davon und machen sie auch nicht ungueltig - sie faerben eine rein * dekorative Grafik, keinen Text. Das Canvas traegt aria-hidden; die * Information steht im Titel daneben. */ --wdb-globus-ozean-hell: #3d6f66; --wdb-globus-ozean-dunkel: #1b332f; --wdb-globus-land: #e7ded0; --wdb-globus-gitter: rgba(231, 222, 208, 0.28); --wdb-globus-rand: #c2b393; } /* Dunkelmodus auf ZWEI Wegen - das ist Absicht, nicht Redundanz: * * (a) prefers-color-scheme - greift ohne jedes Zutun und ohne JavaScript. * Wer sein Betriebssystem dunkel stellt, bekommt die Seite dunkel. Auch * dann, wenn JavaScript abgeschaltet ist. * (b) [data-theme] - die ausdrueckliche Wahl des Besuchers ueber * den Umschalter (functions.php). Sie muss (a) ueberstimmen koennen, in * BEIDE Richtungen: dunkles System + Wunsch nach hell ist genauso * gueltig wie umgekehrt. Deshalb gibt es unten auch einen * [data-theme="light"]-Block - ohne ihn koennte niemand mit dunklem * System je auf hell zurueckschalten. * * Die Reihenfolge im Stylesheet traegt das: beide [data-theme]-Bloecke stehen * NACH dem Media-Query und haben zusaetzlich hoehere Spezifitaet (:root[attr] * schlaegt :root). Ein Verschieben nach oben wuerde den Umschalter still * entwerten. */ @media (prefers-color-scheme: dark) { :root { --wdb-ink: #efe7d8; --wdb-paper: #211a13; --wdb-paper-raised: #2a221a; --wdb-slate: #c2b7a0; --wdb-slate-soft: #988a6e; --wdb-bf: #7fada4; --wdb-bf-tint: #263230; --wdb-mk: #d9a15c; --wdb-mk-tint: #322820; --wdb-rka: #c68b98; --wdb-rka-tint: #2f2429; --wdb-ink-on-bf: #10201d; --wdb-ink-on-mk: #221a10; --wdb-ink-on-rka: #241820; --wdb-line: #3a3125; --wdb-line-strong: #4c4232; --wdb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.4); --wdb-globus-ozean-hell: #2f5a53; --wdb-globus-ozean-dunkel: #101c1a; --wdb-globus-land: #d8cdb8; --wdb-globus-gitter: rgba(216, 205, 184, 0.24); --wdb-globus-rand: #7fada4; /* Fokus-Ring: eigener, hellerer Petrol-Ton fuer den Dunkelmodus. Der * Hellmodus-Wert #33625a aus :root erreicht gegen den dunklen Grund #211a13 * nur 2.48:1 und verfehlt die 3:1 aus 1.4.11 (BARRIEREFREIHEIT.md, Abschnitt 3). * #5a9d92 misst 5.46:1 gegen den Grund und 4.97:1 gegen die Such-Pille. */ --wdb-focus: #5a9d92; } } :root[data-theme="dark"] { --wdb-ink: #efe7d8; --wdb-paper: #211a13; --wdb-paper-raised: #2a221a; --wdb-slate: #c2b7a0; --wdb-slate-soft: #988a6e; --wdb-bf: #7fada4; --wdb-bf-tint: #263230; --wdb-mk: #d9a15c; --wdb-mk-tint: #322820; --wdb-rka: #c68b98; --wdb-rka-tint: #2f2429; --wdb-ink-on-bf: #10201d; --wdb-ink-on-mk: #221a10; --wdb-ink-on-rka: #241820; --wdb-line: #3a3125; --wdb-line-strong: #4c4232; --wdb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.4); --wdb-globus-ozean-hell: #2f5a53; --wdb-globus-ozean-dunkel: #101c1a; --wdb-globus-land: #d8cdb8; --wdb-globus-gitter: rgba(216, 205, 184, 0.24); --wdb-globus-rand: #7fada4; /* Fokus-Ring: heller Petrol-Ton fuer den Dunkelmodus, gleiche Begruendung wie im * Media-Query oben (1.4.11, #5a9d92 = 5.46:1 gegen #211a13). */ --wdb-focus: #5a9d92; } :root[data-theme="light"] { --wdb-ink: #2e2419; --wdb-paper: #e7ded0; --wdb-paper-raised: #fffdf8; --wdb-slate: #6b5f4d; --wdb-slate-soft: #7d735e; --wdb-bf: #33625a; --wdb-bf-tint: #dbe6e2; --wdb-mk: #9a6128; --wdb-mk-tint: #ece0cd; --wdb-rka: #7a4a56; --wdb-rka-tint: #e8dcdf; --wdb-ink-on-bf: #eef4f2; --wdb-ink-on-mk: #fbf3e7; --wdb-ink-on-rka: #f4eaec; --wdb-line: #d6cab0; --wdb-line-strong: #c2b393; --wdb-shadow: 0 1px 2px rgba(46, 36, 25, 0.08), 0 10px 24px rgba(46, 36, 25, 0.07); --wdb-globus-ozean-hell: #3d6f66; --wdb-globus-ozean-dunkel: #1b332f; --wdb-globus-land: #e7ded0; --wdb-globus-gitter: rgba(231, 222, 208, 0.28); --wdb-globus-rand: #c2b393; } /* Akzent je Themenfeld. Die Klasse setzt wdb_wissen_body_class() in * functions.php aus der Taxonomie wdb_themenfeld. Sitzt sie nicht am Body * (Seite ohne Themenfeld, etwa das Impressum), bleibt der neutrale Vorgabewert * von oben stehen - die Komponenten funktionieren dann unveraendert, nur * ohne Farbzuordnung. */ body.wdb-thema-bf { --wdb-akzent: var(--wdb-bf); --wdb-akzent-tint: var(--wdb-bf-tint); } body.wdb-thema-mk { --wdb-akzent: var(--wdb-mk); --wdb-akzent-tint: var(--wdb-mk-tint); } body.wdb-thema-rka { --wdb-akzent: var(--wdb-rka); --wdb-akzent-tint: var(--wdb-rka-tint); } /* ============================================================================= * 2. GRUNDFLAECHE * * Diese Regeln ueberschreiben die Flaechenfarben von Twenty Twenty-Five. Sie * koennen das, weil functions.php dieses Stylesheet mit dem Parent-Handle als * Abhaengigkeit und Prioritaet 20 laedt - es steht in der Kaskade also NACH * den Global Styles des Parents, bei gleicher Spezifitaet gewinnt das spaetere. * Wer die Ladereihenfolge dort anfasst, kippt diesen Abschnitt. * * EHRLICHE GRENZE: Damit sind die grossen Flaechen umgestellt, nicht jedes * Detail. Einzelne TT5-Bloecke, die ihre Farbe aus einem Preset ziehen * (--wp--preset--color--*), behalten die Parent-Farbe - am sichtbarsten * potenziell bei Buttons. Das ist an der Instanz nachzusehen und, falls * stoerend, HIER zu loesen. * * KORREKTUR 2026-07-19: Hier stand bis dahin "ueber eine theme.json im Child * zu loesen". Das ist WIDERLEGT und der Weg ist verworfen. Eine Child- * theme.json ERSETZT settings.color.palette, statt sie zu ergaenzen - an der * Instanz gemessen: eine Probe-Datei mit einem einzigen Zusatz-Preset liess * accent-1..6, base und contrast komplett ausfallen (Preset-Definitionen * 20 -> 13), waehrend diese Datei weiter auf var(--wp--preset--color--accent-4) * zeigte. Der Betreiber hat daraufhin gegen die theme.json entschieden. * Messung, korrigierte Bewertung und die Bedingungen, unter denen die * Entscheidung wieder aufginge: TASKS.md, "Befunde ohne eigene Aufgabe". * ========================================================================== */ /* SCHRIFTGEWICHT UND LAUFWEITE MIT ZURUECKSETZEN - nicht nur die Familie: * Twenty Twenty-Five setzt am body font-weight 300 und letter-spacing -0.1px * (an der Instanz aus global-styles-inline-css gelesen, 2026-07-18). Wer hier * allein die font-family ueberschreibt, erbt den Light-Schnitt weiter: Die * Seite lief dadurch komplett in Segoe UI Light und wirkte neben dem Entwurf * schmal und schraeg - der Betreiber hat es als "kursiv" gemeldet, ein * font-style: italic gibt es hier naemlich nirgends. Entwurf C setzt am body * kein Gewicht, laeuft also im Browser-Standard 400. */ body { background-color: var(--wdb-paper); color: var(--wdb-ink); font-family: var(--wdb-font-display); font-weight: 400; letter-spacing: normal; line-height: 1.58; } /* Ebenso bei den Ueberschriften: TT5 setzt h1..h6 auf font-weight 400. Entwurf * C verlangt 700 - ohne diese Zeile bleiben die Ueberschriften duenn und der * Groessenunterschied allein traegt die Gliederung nicht. * Zur Spezifitaet: TT5s Regel "h1, h2, h3, h4, h5, h6" liegt bei (0,0,1), * "body h1" hier bei (0,0,2) und gewinnt deshalb ohne !important. */ body h1, body h2, body h3, body h4 { font-family: var(--wdb-font-display); font-weight: 700; color: var(--wdb-ink); letter-spacing: -0.01em; text-wrap: balance; } /* Sichtbarer Fokus-Ring auf ALLEN bedienbaren Elementen (WCAG 2.4.7). Bewusst * :focus-visible und nicht :focus - so erscheint der Ring bei * Tastaturbedienung, stoert aber nicht bei jedem Mausklick. Die 2px-Kontur mit * Abstand bleibt auch auf farbigen Flaechen erkennbar. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--wdb-focus); outline-offset: 3px; border-radius: 3px; } /* NUR FUER VORLESEPROGRAMME SICHTBAR. * * Die Klasse steht an vier Stellen im eigenen Code (wdb-frontend.php, * wdb-admin.php:47, functions.php:349 und :484) und traegt dort die * G201-Ankuendigung "(oeffnet in neuem Tab)" hinter Quellen-Links. * * WARUM HIER, obwohl es heute schon funktioniert: Gemessen am 2026-07-19 liefert * WordPress dieselbe Regel zweifach inline aus den Core-Block-Styles mit - der * Hinweis bleibt also auch ohne diese Zeilen unsichtbar. Das ist aber eine * geliehene Abhaengigkeit: Wer die Core-Block-Styles dequeued (ein ueblicher * Performance-Schritt), stellt "(oeffnet in neuem Tab)" schlagartig hinter jeden * Quellenlink der Seite. Die Definition im eigenen Theme entkoppelt uns davon. * * KEIN display:none und KEIN visibility:hidden - beides nimmt den Text auch den * Vorleseprogrammen weg und macht den Baustein sinnlos. Die Kombination aus * 1x1px, clip-path und overflow ist der Weg, der den Text im Zugaenglichkeitsbaum * belaesst. word-wrap: normal verhindert, dass der Text in der 1px-Box zu einem * Zeichen je Zeile umbricht und die Seite in die Hoehe zieht. * * Der :focus-Block holt das Element zurueck, sobald es selbst den Fokus bekommt * (WCAG 2.4.11). Betroffen ist heute genau ein Element: der Sprunglink "Zum * Inhalt springen", den TT5 mit .skip-link.screen-reader-text ausgibt. * * position bleibt absolute mit top/left 5px - NICHT static. Gemessen am * 2026-07-19 an der Instanz: Solange die Core-Styles da sind, gewinnt deren * Regel .skip-link.screen-reader-text:focus ohnehin (zwei Klassen schlagen * eine), der Block hier ist dann wirkungslos. Er zaehlt erst im Ausfallfall -- * und dort wuerde ein static positionierter Sprunglink beim Fokussieren die * ganze Seite nach unten schieben. Absolut positioniert legt er sich darueber. * * Die Farben kommen aus den Token von oben, nicht aus den Core-Festwerten * #eee/#444: die haetten im Dunkelmodus dunkles Grau auf hellem Kasten ergeben, * losgeloest vom Rest der Seite. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); word-wrap: normal; } .screen-reader-text:focus { position: absolute; top: 5px; left: 5px; display: block; width: auto; height: auto; margin: 0; padding: 0.9rem 1.4rem; overflow: visible; clip-path: none; background-color: var(--wdb-paper-raised); color: var(--wdb-ink); border: 1px solid var(--wdb-line-strong); border-radius: 3px; font-size: 1em; line-height: normal; text-decoration: none; z-index: 100000; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================================= * 3. AUSGABE-BAUSTEINE DER MU-PLUGINS * * Die Klassen dieses Abschnitts erzeugt wdb-frontend.php, nicht das Theme. Die * Datei rendert bewusst OHNE Inline-Styles und haelt die Klassen als Anker * bereit - hier werden sie eingeloest. Wird dort eine Klasse umbenannt, faellt * die zugehoerige Regel hier still aus; die Namen sind deshalb an beiden * Stellen als zusammengehoerig gekennzeichnet. * ========================================================================== */ /* --- Antwort zuerst (Direktantwort, KONZEPT Merkmal 1) ------------------- */ /* Der Baustein traegt das meiste Gewicht der Seite: Er ist der Grund, aus dem * jemand hier ist. Deshalb abgesetzte Flaeche und der Themen-Akzent als * Kante - das ist derselbe Balken, den Entwurf C zeigt, nur dass die Farbe * hier ueber --wdb-akzent aus der Taxonomie kommt statt aus einer * handgesetzten Klasse. * * SCHRIFTART seit 2.21.0 serifenlos (Betreiber-Entscheidung 2026-07-27, * Weg (a) aus TASKS.md): Der Kasten war der einzige Serifen-Ausreisser der * Einzelansicht (gemessen per getComputedStyle an /glossar/modernisierung/, * Fliesstext und Randspalte waren bereits identisch serifenlos). Die * Absetzung tragen jetzt Flaeche, Kante und Schatten allein. Die * Serifen-Variable --wdb-font-serif bleibt fuer die uebrigen Bausteine * (Expertenzitat, FAQ-Themenseiten, Hinweise-Seite) unveraendert bestehen. */ .wdb-antwort { background: var(--wdb-paper-raised); border-left: 4px solid var(--wdb-akzent); border-radius: 14px; padding: 1.2rem 1.4rem; margin: 0 0 1.8rem; max-width: 60ch; box-shadow: var(--wdb-shadow); } .wdb-direktantwort { font-family: var(--wdb-font-display); font-size: 1.08rem; color: var(--wdb-ink); margin: 0; } /* Nur im Glossar: "Auch bekannt als ...". Kursiv waere hier die naheliegende * Wahl und ist bewusst unterblieben - Entwurf C hat die Kursive aus dem * Antwort-Block entfernt, weil ganze Passagen in Kursiv bei Leseschwaeche * schwerer zu erfassen sind. Die Absetzung traegt stattdessen die Schriftart. */ .wdb-synonyme { margin: 0.8rem 0 0; font-size: 0.94rem; color: var(--wdb-slate); } .wdb-synonyme-label { font-weight: 600; } .wdb-expertenzitat { margin: 1.2rem 0 0; padding-left: 1rem; border-left: 2px solid var(--wdb-line-strong); font-family: var(--wdb-font-serif); color: var(--wdb-ink); } /* --- Verwandte Eintraege (Topic-Cluster, KONZEPT Merkmal 4) -------------- */ .wdb-related { margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--wdb-line); } .wdb-related-titel, .wdb-quellen-titel, .wdb-cluster-titel { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wdb-slate); font-weight: 600; margin: 0 0 0.9rem; } .wdb-related-liste, .wdb-quellen-liste, .wdb-cluster-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .wdb-related-item a, .wdb-cluster-liste a { color: var(--wdb-ink); text-decoration: none; border-bottom: 1px solid var(--wdb-line-strong); } .wdb-related-item a:hover, .wdb-cluster-liste a:hover { border-bottom-color: var(--wdb-akzent); } /* Woher der Verweis fuehrt, ist eine Sachinformation und darf nicht allein an * der Farbe haengen (WCAG 1.4.1). Das Symbol traegt sie zusaetzlich; es ist * aria-hidden-freundlich rein dekorativ ueber ::before gesetzt, damit es nicht * mitvorgelesen wird - der Linktext selbst nennt bereits den Zieltitel. */ .wdb-related-item--faq::before { content: "\2753\00a0"; color: var(--wdb-slate); } .wdb-related-item--glossar::before { content: "\1F4D6\00a0"; color: var(--wdb-slate); } /* --- Belege und Stand (KONZEPT Merkmal 1/2/7) ---------------------------- */ /* Der Belegblock ist das Qualitaetsversprechen der Wissensdatenbank. Er soll * auffindbar sein, aber der Antwort nicht die Aufmerksamkeit nehmen - deshalb * gedaempfte Flaeche statt Akzentfarbe. */ .wdb-quellen-baustein { margin: 2.4rem 0 0; padding: 1.3rem 1.4rem; background: var(--wdb-paper-raised); border: 1px solid var(--wdb-line); border-radius: 14px; } .wdb-quellen-liste a { color: var(--wdb-ink); overflow-wrap: anywhere; /* lange Quell-URLs sonst ueber den Rand hinaus */ } .wdb-abgerufen, .wdb-stand { color: var(--wdb-slate); font-size: 0.86rem; } .wdb-stand { display: block; margin-top: 1rem; } /* --- Cluster-Listen der Pillar-Seiten ------------------------------------ */ .wdb-cluster-gruppe { margin: 0 0 2rem; } /* Die Pillar-Seite EINES Themenfeldes traegt dessen Farbe - auch dann, wenn * der Body sie nicht kennt (eine WP-Seite hat keine wdb_themenfeld-Zuordnung, * der Shortcode nennt das Feld aber im Klassennamen). */ .wdb-cluster--bf { --wdb-akzent: var(--wdb-bf); --wdb-akzent-tint: var(--wdb-bf-tint); } .wdb-cluster--mk { --wdb-akzent: var(--wdb-mk); --wdb-akzent-tint: var(--wdb-mk-tint); } .wdb-cluster--rka { --wdb-akzent: var(--wdb-rka); --wdb-akzent-tint: var(--wdb-rka-tint); } /* ============================================================================= * 4. UMSCHALTER HELL/DUNKEL * * Markup und Verhalten stehen in functions.php (wdb_wissen_theme_umschalter). * ========================================================================== */ .wdb-theme-umschalter { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--wdb-paper-raised); color: var(--wdb-ink); border: 1px solid var(--wdb-line-strong); border-radius: 999px; padding: 0.42rem 1rem; font: inherit; font-size: 0.86rem; cursor: pointer; } .wdb-theme-umschalter:hover { border-color: var(--wdb-akzent); } /* Ohne JavaScript kann der Knopf nichts ausrichten - dann waere er eine * Attrappe. functions.php setzt die Klasse deshalb erst per Skript; steht sie * nicht, bleibt der Knopf verborgen. */ .wdb-theme-umschalter:not(.wdb-bereit) { display: none; } /* ============================================================================= * 5. RECHTSZEILE (Pflichtangaben) * * Ausgegeben von wdb_wissen_rechtszeile() am wp_footer-Hook - also UNTER dem * TT5-Footer-Block. Die Regeln sollen allein dafuer sorgen, dass sie nicht wie * ein abgerissenes Stueck Seite wirkt. * ========================================================================== */ .wdb-rechtszeile { padding: 1.6rem 1rem 2.2rem; text-align: center; border-top: 1px solid var(--wdb-line); display: flex; flex-direction: column; align-items: center; gap: 1rem; } .wdb-rechtszeile p { margin: 0; font-size: 0.875rem; } /* Der Beratungshinweis ueber den Pflichtangaben. Bewusst NICHT kleiner oder * blasser als die Zeile darunter: Ein Hinweis, der wie Kleingedrucktes aussieht, * wird wie Kleingedrucktes gelesen - und verfehlt damit genau den Zweck, aus * dem er dort steht (Betreiber-Auftrag 2026-07-19). */ .wdb-rechtszeile-hinweis { max-width: 62ch; color: var(--wdb-slate); } .wdb-rechtszeile a { /* Farbe BEWUSST nicht gedaempft: die Zeile traegt Pflichtangaben, die gut * lesbar bleiben muessen. */ color: inherit; /* AUSDRUECKLICH gesetzt, nicht dem Parent ueberlassen: Zusammen mit * color: inherit ist die Unterstreichung das EINZIGE Merkmal, an dem diese * Links noch als Links erkennbar sind (WCAG 1.4.1 - Farbe darf nicht das * alleinige Unterscheidungsmittel sein). Twenty Twenty-Five kann ueber * theme.json -> elements.link jederzeit text-decoration: none setzen; wer * die Eigenschaft hier nicht deklariert, kann sie dann auch nicht * zurueckholen und stuende ohne jedes Merkmal da. */ text-decoration: underline; } /* ============================================================================= * 6. STARTSEITE (templates/front-page.html) UND DAS SUCHFELD * * Die Klassen dieses Abschnitts erzeugen drei Quellen: das Block-Template * (Hero), die drei Shortcodes in functions.php (Themenbloecke, "Zuletzt * ergaenzt", Glossar-Raster) und - seit 2.19.0 - parts/header.html. * * WARUM DAS SUCHFELD TROTZ UMZUG HIER STEHT: Es sass bis 2.18.0 im Hero der * Startseite, seine Regeln sind hier gewachsen. Sie wirken jetzt auf JEDER * Seite. Der Abschnitt heisst deshalb nicht mehr nur "Startseite". Ein * Verschieben in den Kopf-Abschnitt weiter unten ist moeglich und gefahrlos: * Die Feldbreite haengt seit 2.19.0 an der geerbten Variablen * "--wdb-suche-breite" und entscheidet sich ueber Spezifitaet, nicht ueber die * Reihenfolge der Regeln. * * Es gibt bewusst KEINE eigenen Farbwerte * hier - alles zieht aus den Token von Abschnitt 1, damit die 45/45-Messung * gueltig bleibt. * ========================================================================== */ /* BREITE DER STARTSEITE - warum hier und nicht in einer theme.json: * Twenty Twenty-Five setzt contentSize auf 645px (an der Instanz gelesen, * 2026-07-18: themes/twentytwentyfive/theme.json). Das ist eine gute Lesebreite * fuer einen FAQ-Artikel und zu schmal fuer Entwurf C, der 1080px vorsieht -- * daher wirkte der Kopf eingerueckt statt linksbuendig. * * Eine theme.json im Child wuerde contentSize global heben und damit auch den * Fliesstext JEDER Einzelseite auf 1080px ziehen. Genau das soll nicht * passieren: Dort ist die schmale Spalte richtig. Deshalb greift die Korrektur * ausschliesslich unter .wdb-startseite. * * Zur Spezifitaet: TT5 setzt die Begrenzung mit (0,1,0) ueber * .is-layout-constrained > :where(...) - :where() zaehlt nicht. Die Regel hier * liegt bei (0,2,0) und gewinnt deshalb ohne !important. Die Lesebreiten der * einzelnen Textbausteine stehen weiter unten mit derselben Spezifitaet und * spaeter im Stylesheet - sonst haette diese Regel sie mitgerissen. */ .wdb-startseite { --wdb-seitenbreite: 1080px; } .wdb-startseite.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .wdb-startseite .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wdb-seitenbreite); } .wdb-startseite > * + * { margin-top: 3.4rem; } /* --- Schlagzeile und Suche ----------------------------------------------- */ .wdb-hero { padding: 2.6rem 0 0.6rem; } /* Zwei Klassen tief, damit diese Lesebreiten die Layout-Regel oben ueberstimmen * (gleiche Spezifitaet, spaeter im Stylesheet). Die Werte stammen aus Entwurf C: * headline 16ch, lede 56ch. */ .wdb-startseite .wdb-hero-titel { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; margin: 0 0 1.1rem; max-width: 16ch; } .wdb-startseite .wdb-hero-text { font-size: 1.12rem; color: var(--wdb-slate); max-width: 56ch; margin: 0 0 2rem; } /* Das Suchfeld ist der wichtigste Bedienweg der Seite - entsprechend gross. * Die Regeln greifen auf die Klassen des core/search-Blocks zu; sie sind Teil * der WordPress-Block-Ausgabe und nicht selbst gesetzt. Aendert der Core sie, * faellt die Gestaltung zurueck auf TT5 - das Feld bleibt bedienbar. */ /* Die Pillenform aus Entwurf C: EINE gerahmte Flaeche, in der Feld und Knopf * sitzen - nicht zwei aneinandergesetzte Kaesten. Der Rahmen gehoert deshalb * an den inside-wrapper des Blocks, nicht an das input. */ .wdb-suche .wp-block-search__inside-wrapper { background: var(--wdb-paper-raised); border: 1px solid var(--wdb-line-strong); border-radius: 999px; padding: 0.25rem 0.25rem 0.25rem 1.3rem; max-width: var(--wdb-suche-breite); box-shadow: var(--wdb-shadow); gap: 0.7rem; } .wdb-suche .wp-block-search__input { background: transparent; color: var(--wdb-ink); border: none; padding: 0.78rem 0.2rem; font: inherit; font-size: 1.02rem; min-width: 0; } .wdb-suche .wp-block-search__input::placeholder { color: var(--wdb-slate-soft); } /* Der Fokusring sitzt am Wrapper, sonst umliefe er das randlose Feld mitten in * der Pille. :focus-within ist dafuer der passende Haken. */ .wdb-suche .wp-block-search__input:focus { outline: none; } .wdb-suche .wp-block-search__inside-wrapper:focus-within { outline: 2px solid var(--wdb-focus); outline-offset: 3px; } /* Tinte auf Papier statt Petrol: Im Entwurf ist der Knopf die dunkelste Flaeche * der Seite - er soll der eine offensichtliche naechste Schritt sein. */ .wdb-suche .wp-block-search__button { background: var(--wdb-ink); color: var(--wdb-paper-raised); border: none; border-radius: 999px; padding: 0.72rem 1.4rem; margin: 0; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .wdb-suche .wp-block-search__button:hover { opacity: 0.88; } /* --- Das Suchfeld im Seitenkopf (seit 2.19.0) ----------------------------- * * Das Feld ist aus dem Hero der Startseite in parts/header.html gewandert und * steht damit auf JEDER Seite. Die Regeln oben gelten unveraendert weiter, sie * haengen an ".wdb-suche" und nicht am Kontext der Startseite. Hier kommt nur * dazu, was die neue Position braucht. * * ZENTRIERT WIE DIE NAVIGATION DARUEBER: Das Feld sitzt in einer alignwide * breiten Gruppe und waere sonst linksbuendig, waehrend die Navigation * mittig steht. * Die Vorschlagsliste muss dieselbe Bewegung mitmachen. Sie ist absolut * positioniert (left: 0; right: 0) - erst "margin-inline: auto" zusammen mit * der Maximalbreite zentriert sie im selben Raster. Ohne diese Zeile stuende * die Liste links, das Feld mittig, und beide fluchteten nicht mehr. */ .wdb-kopf-suche .wp-block-search__inside-wrapper, .wdb-kopf-suche .wdb-suche-huelle { margin-inline: auto; } /* Ausserhalb der Startseite ist das Feld schmaler: Dort ist es ein Werkzeug im * Kopf, kein Einstieg. Auf der Startseite bleibt es bei den 560px, die es im * Hero hatte - deshalb greift diese Regel per ":not(.home)" nur woanders, * statt den grossen Wert ein zweites Mal hinzuschreiben. "home" ist die * Core-Klasse fuer die Startseite, sie kommt von WordPress, nicht von uns. * * WARUM UEBER EINE VARIABLE UND NICHT UEBER "max-width": Die Breite gilt fuer * das Feld UND fuer die Vorschlagsliste, die assets/suche.js zur Laufzeit in * denselben Block haengt - beide muessen fluchten. Eine geerbte Variable haelt * sie zusammen und macht die Breite unabhaengig von der Reihenfolge der Regeln * im Stylesheet. Vorher standen dieselben 560px an drei Stellen. * * GEMESSEN AM 2026-07-27, damit es niemand fuer einen Fehler haelt: Die Pille * ist rund 26px BREITER als der Variablenwert (420 zu 446, auf der Startseite * 560 zu 586). Grund ist das voreingestellte "content-box" - der Innenabstand * der Pille kommt zur Maximalbreite hinzu. Die Vorschlagsliste trifft den Wert * genau. Da beide mittig stehen, versetzt das ihre Kanten um rund 13px je * Seite, symmetrisch. Das war vor 2.19.0 genauso (nur linksbuendig und damit * 26px auf einer Seite) und ist bewusst nicht auf "border-box" umgestellt: Das * haette die Pille sichtbar schmaler gemacht, also eine Gestaltungsaenderung * ohne Auftrag. */ body:not(.home) .wdb-kopf-suche { --wdb-suche-breite: 420px; } /* --- Vorschlagsliste der Instant-Suche ------------------------------------ * * Wird von assets/suche.js zur Laufzeit eingehaengt und ist ohne JavaScript * gar nicht vorhanden - das Suchformular darunter funktioniert dann wie bisher * ueber die WordPress-Bordsuche. * * KEINE NEUEN FARBWERTE: Alle Regeln greifen auf die bestehenden --wdb-Token * zurueck, deren Kontraste bereits gemessen sind (BARRIEREFREIHEIT.md, * Abschnitt 3). Eine eigene Farbe hier haette eine neue Messung noetig gemacht. */ /* Die EINE Quelle der Feldbreite. Sie gilt fuer die Pille und fuer die * Vorschlagsliste darunter, damit beide fluchten. Ausserhalb der Startseite * ueberschreibt der Kopf-Block weiter oben sie auf 420px. */ .wdb-suche { position: relative; --wdb-suche-breite: 560px; } .wdb-suche-huelle { position: absolute; z-index: 20; left: 0; right: 0; max-width: var(--wdb-suche-breite); } /* Oeffnungsrichtung nach oben. Wird von assets/suche.js gesetzt, wenn unter dem * Feld zu wenig Platz bleibt (Weg C der Entscheidungsvorlage vom 2026-07-25). * Gemessen am 2026-07-25: unter dem Feld bleiben je nach Fensterhoehe 306 px, * 126 px oder nur 6 px, oberhalb sind es durchgehend rund 560 px. * bottom: 100% bezieht sich auf ".wdb-suche" - der Kasten legt sich damit * vollstaendig ueber die Sucheingabe, nicht ueber sie hinweg. */ .wdb-suche-huelle.nach-oben { top: auto; bottom: 100%; } .wdb-suche-liste { margin: 0.4rem 0 0; padding: 0.3rem; list-style: none; background: var(--wdb-paper-raised); border: 1px solid var(--wdb-line-strong); border-radius: 14px; box-shadow: var(--wdb-shadow); max-height: min(60vh, 30rem); overflow-y: auto; } /* Der Abstand wandert mit der Oeffnungsrichtung: nach oben geoeffnet gehoert er * unter die Liste, sonst klebt der Kasten am Feld. */ .wdb-suche-huelle.nach-oben .wdb-suche-liste { margin: 0 0 0.4rem; } .wdb-suche-treffer { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "art titel" ". antwort"; gap: 0.15rem 0.6rem; align-items: baseline; padding: 0.6rem 0.7rem; border-radius: 10px; cursor: pointer; } /* Hover und Tastatur-Auswahl sehen bewusst gleich aus: Wer mit den Pfeiltasten * durch die Liste geht, soll dieselbe Markierung sehen wie mit der Maus. * * Der linke Balken traegt die Markierung, nicht die Flaechenfarbe: paper gegen * paper-raised misst nur 1.31:1 (hell) bzw. 1.10:1 (dunkel) und verfehlt damit die * 3:1 aus 1.4.11 fuer den Auswahlzustand. Der Balken in var(--wdb-focus) misst * 5.19:1 (hell) bzw. 5.46:1 (dunkel) gegen die Zeile. box-shadow inset statt * border-left, damit die Zeile beim Aktivieren nicht um die Balkenbreite springt. */ .wdb-suche-treffer:hover, .wdb-suche-treffer.ist-aktiv { background: var(--wdb-paper); box-shadow: inset 3px 0 0 0 var(--wdb-focus); } .wdb-suche-art { grid-area: art; font-family: var(--wdb-font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wdb-slate); white-space: nowrap; } .wdb-suche-titel { grid-area: titel; color: var(--wdb-ink); font-weight: 600; line-height: 1.35; } .wdb-suche-antwort { grid-area: antwort; color: var(--wdb-slate); font-size: 0.88rem; line-height: 1.45; } /* Auf schmalen Geraeten steht die Art ueber dem Titel statt daneben - sonst * bleibt fuer den Titel kaum Breite. */ @media (max-width: 30rem) { .wdb-suche-treffer { grid-template-columns: 1fr; grid-template-areas: "art" "titel" "antwort"; } } /* --- Abschnittskopf ------------------------------------------------------- */ /* Ueberschrift links, kleine Marke rechts auf derselben Grundlinie - die * Gliederung, die Entwurf C ueber die ganze Seite traegt. */ .wdb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.9rem; } .wdb-section-head h2 { font-size: 1.65rem; margin: 0; } .wdb-marke { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wdb-slate); font-weight: 600; } /* --- Themenbloecke (Wegleitsystem) ---------------------------------------- */ /* Feste Dreiteilung statt auto-fit: Die drei Themenfelder sind gesetzt, nicht * eine offene Menge. auto-fit haette bei zwei belegten Feldern zwei * ueberbreite Kacheln erzeugt. Unter 760px untereinander - derselbe * Umbruchpunkt wie im Entwurf. * * minmax(0, 1fr) STATT 1fr - gemessener Befund vom 2026-07-19, aufgedeckt bei * der Nachmessung zum WCAG-Prueflauf (Protokoll: BARRIEREFREIHEIT.md * Abschnitt 7): Ein blosses "1fr" hat als Mindestbreite implizit "auto", also * min-content. Die langen FAQ-Titel in den Kacheln zogen die Spalten damit * breiter, als der Viewport hergab - die Startseite erzwang zwischen 761 und * 880 px horizontales Scrollen (bei 768 px war das Dokument 857 px breit). * Unterhalb 761 px griff die Einspalten-Regel darunter, ab 900 px war genug * Platz da: Der Fehler sass exakt in der Luecke dazwischen und blieb deshalb * bei den ueblichen Testbreiten 320/1280 unsichtbar. * * Es ist derselbe Mechanismus wie bei der Beitragsnavigation in Abschnitt 10 -- * ein Flex-/Grid-Kind mit min-content-Mindestbreite. Wirkung gegen die Live- * Instanz gemessen bei 761, 768, 800, 860, 880, 900 und 1280 px: ueberall * innerhalb des Viewports. * * NICHT geaendert wurde der Umbruchpunkt 760px - er ist eine Gestaltungs- * entscheidung des Betreibers aus dem Entwurf, kein Fehler. Bei 761px sind die * Kacheln danach 216px breit; wer das zu gedraengt findet, hebt den Breakpoint * an, statt diese Regel anzufassen. */ .wdb-register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } @media (max-width: 760px) { .wdb-register { grid-template-columns: 1fr; } } /* Vollflaechig eingefaerbte Kachel - das ist der Kern von Entwurf C. Die * Textfarbe kommt je Block aus --wdb-ink-on-*; diese Paare sind gegen WCAG AA * gemessen (entwuerfe/README.md) und duerfen nicht einzeln getauscht werden. */ .wdb-block { border-radius: 20px; padding: 1.7rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; } .wdb-block--bf { background: var(--wdb-bf); color: var(--wdb-ink-on-bf); } .wdb-block--mk { background: var(--wdb-mk); color: var(--wdb-ink-on-mk); } .wdb-block--rka { background: var(--wdb-rka); color: var(--wdb-ink-on-rka); } /* color: inherit an Ueberschrift und Links - ohne das zoege die * Grundflaechen-Regel aus Abschnitt 2 (body h1..h4 { color: var(--wdb-ink) }) * das Tinten-Braun auf die farbige Flaeche und der Kontrast braeche ein. */ .wdb-block-titel { font-size: 1.28rem; margin: 0; color: inherit; } .wdb-block-titel a { color: inherit; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, currentColor 45%, transparent); } .wdb-block-titel a:hover { border-bottom-color: currentColor; } .wdb-block-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } /* Trennlinie aus der jeweiligen Textfarbe statt aus --wdb-line: Auf Petrol, * Ocker und Altrosa muesste sonst je Block eine eigene Linienfarbe stehen. */ .wdb-block-liste li { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top: 0.65rem; } .wdb-block-liste li:first-child { border-top: none; padding-top: 0; } /* KEIN border-bottom an diesen Links - anders als bei den Cluster-Listen in * Abschnitt 3. Die FAQ-Titel laufen hier ueber drei und vier Zeilen; ein Strich * unter JEDER Zeile ergab den Streifen-Effekt, der die Auslieferung vom Entwurf * unterschied. Die Unterscheidbarkeit traegt die Kachel selbst: Der ganze Block * ist erkennbar eine Sammlung von Verweisen. */ .wdb-block-liste a { color: inherit; text-decoration: none; font-size: 0.95rem; display: block; } .wdb-block-liste a:hover { text-decoration: underline; } /* --- "Haeufige Fragen" und Glossar-Raster --------------------------------- */ /* Beide Abschnitte tragen den gemeinsamen .wdb-section-head von weiter oben -- * die fruehere Sonderregel .wdb-abschnitt-titel ist damit entfallen. */ /* Das Akkordeon aus Entwurf C: Frage als Zeile mit Plus-Zeichen, Antwort * darunter in einem eingefaerbten Kasten. Bewusst
/ und kein * JavaScript - das Auf- und Zuklappen samt Tastaturbedienung und * Vorlese-Ansage bringt der Browser mit. */ .wdb-faq-liste { display: flex; flex-direction: column; } .wdb-faq-eintrag { border-top: 1px solid var(--wdb-line); padding: 1.2rem 0; } .wdb-faq-eintrag:last-child { border-bottom: 1px solid var(--wdb-line); } .wdb-faq-eintrag summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; cursor: pointer; list-style: none; font-family: var(--wdb-font-display); font-size: 1rem; font-weight: 600; color: var(--wdb-ink); } /* Der eigene Pfeil von Safari/Chrome wuerde neben dem Plus-Zeichen stehen. */ .wdb-faq-eintrag summary::-webkit-details-marker { display: none; } .wdb-faq-zeichen { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: var(--wdb-slate); transition: transform 0.15s ease; } .wdb-faq-eintrag[open] .wdb-faq-zeichen { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .wdb-faq-zeichen { transition: none; } } .wdb-faq-antwort { margin-top: 0.9rem; padding: 0.9rem 1.1rem; background: var(--wdb-paper-raised); border-left: 3px solid var(--wdb-line-strong); } .wdb-faq-eintrag--bf .wdb-faq-antwort { border-left-color: var(--wdb-bf); } .wdb-faq-eintrag--mk .wdb-faq-antwort { border-left-color: var(--wdb-mk); } .wdb-faq-eintrag--rka .wdb-faq-antwort { border-left-color: var(--wdb-rka); } .wdb-faq-antwort p { margin: 0; font-family: var(--wdb-font-serif); font-size: 1.02rem; color: var(--wdb-ink); } /* block, nicht inline-block: Der Link steht im selben Absatz wie die Antwort * (siehe Begruendung in functions.php) und braucht die eigene Zeile deshalb * aus dem CSS. width: max-content haelt die Unterstreichung am Text. */ /* NICHT in die Sammelregel mit .wdb-glossar-item a weiter unten aufnehmen: Die * setzt color: var(--wdb-ink) und stuende bei gleicher Spezifitaet SPAETER -- * das Slate hier waere wirkungslos. Der Entwurf will an dieser Stelle * ausdruecklich Slate (entwurf-c-sprechstunde.html:159, .antwort .quelle). */ .wdb-faq-mehr { display: block; width: max-content; max-width: 100%; margin-top: 0.7rem; font-family: var(--wdb-font-display); font-size: 0.82rem; color: var(--wdb-slate); text-decoration: none; border-bottom: 1px solid var(--wdb-line-strong); } .wdb-faq-mehr:hover { border-bottom-color: var(--wdb-akzent); } /* Schriftgroesse und Schriftart ausdruecklich gesetzt (2026-07-26, Befund des * Betreibers): Ohne diese Regel erbten die Begriffe die Grundschrift des * Dokuments - an der Instanz gemessen 22px in der Serifenschrift, waehrend * jede andere Liste der Startseite bei 15,2px (.wdb-block-liste a) bis 16px * (.wdb-faq-eintrag summary) in der Display-Schrift steht. Das Glossar-Raster * stach dadurch als einziger Abschnitt aus der Seite heraus. 0.95rem * uebernimmt bewusst den Wert der Kachel-Listen: Beides sind kurze * Verweis-Zeilen, keine Ueberschriften. */ .wdb-glossar-raster { list-style: none; margin: 0; padding: 0; font-family: var(--wdb-font-display); font-size: 0.95rem; line-height: 1.5; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.7rem 1.4rem; } .wdb-glossar-item a { color: var(--wdb-ink); text-decoration: none; border-bottom: 1px solid var(--wdb-line-strong); } .wdb-glossar-item a:hover { border-bottom-color: var(--wdb-akzent); } /* ============================================================================= * 6b. KOPF-NAVIGATION * * Die Navigation ist KEIN gepflegtes Menue, sondern die automatische Seitenliste * von WordPress (core/page-list, Klasse .wp-block-pages-list__item). Reihenfolge * steuert menu_order an der Instanz (2026-07-19: 10/20/30 fuer die Themen, 90 * fuer die Hinweise) - nicht das Theme. Wer hier Regeln ergaenzt, sollte * .wp-block-navigation-item mitnehmen: Sobald jemand ein echtes Menue anlegt, * verschwindet die pages-list-Klasse, die navigation-item-Klasse bleibt. * * Betreiber-Auftrag 2026-07-19: "es muss eine optische Trennung zwischen den * einzelnen Themen sichtbar sein." * ========================================================================== */ /* AUFBAU NACH "VARIANTE 1" (entwuerfe/kopf-varianten.html, Betreiber-Wahl * 2026-07-19): Marke oben links, darunter die Themenlinks mittig ueber einer * feinen Trennlinie. Das Markup dazu steht in parts/header.html - es ersetzt * das TT5-Kopfmuster (twentytwentyfive/header) vollstaendig. * * PREIS, EHRLICH BENANNT: Der Kopf zieht ab jetzt keine TT5-Aenderungen mehr * nach. Das Muster war rund 25 Zeilen einfaches Gruppen-Markup, der Nachbau * also ueberschaubar - aber wer nach einem TT5-Update einen neuen Kopf * erwartet, wird ihn hier nicht bekommen. */ .wdb-kopf-marke { gap: 0.85rem; align-items: center; } /* Die Weltkugel. Sie darf nicht schrumpfen, wenn der Titel lang wird * (flex-shrink: 0) - eine gestauchte Kugel waere ein Ei. * * DIE GROESSE STEHT AN ZWEI STELLEN und muss zusammen gepflegt werden: hier * (sichtbare Groesse) und als width/height-Attribut in parts/header.html * (verhindert den Layoutsprung, bevor das Skript laeuft). assets/globus.js * setzt KEINE Inline-Breite - sie wuerde den 600px-Umbruch unten aushebeln, * weil inline das Stylesheet schlaegt. Das Skript liest die hier gesetzte * Groesse aus und legt nur die Zeichenflaeche danach an. */ .wdb-globus { display: block; flex-shrink: 0; width: 48px; height: 48px; } @media (max-width: 600px) { .wdb-globus { width: 38px; height: 38px; } } /* Die Navigationszeile bekommt die Trennlinie nach oben - sie setzt die Marke * vom Wegweiser ab, ohne einen weiteren Kasten einzufuehren. */ .wdb-kopf-nav { border-top: 1px solid var(--wdb-line); padding-top: 0.9rem; } /* Der Navigation-Block bringt seine eigene Ausrichtung mit; hier wird nur * sichergestellt, dass er die volle Breite nutzt und damit wirklich mittig * steht statt links am Rand zu kleben. */ .wdb-kopf-nav > .wp-block-navigation { flex: 1 1 auto; justify-content: center; } /* Der Trennstrich sitzt VOR jedem Punkt ausser dem ersten. Ueber :not(:first-child) * statt ueber ein ::after am Vorgaenger - so haengt kein Strich hinter dem * letzten Punkt, wenn die Zeile umbricht. */ .wdb-kopf-nav .wp-block-navigation-item + .wp-block-navigation-item { border-left: 1px solid var(--wdb-line-strong); padding-left: 1.1rem; } /* Der Abstand muss auf BEIDEN Seiten des Strichs stehen, sonst klebt er am * vorigen Wort. Der Navigation-Block setzt seinen Abstand ueber gap; hier kommt * die zweite Haelfte dazu. */ .wdb-kopf-nav .wp-block-navigation-item { padding-right: 0.1rem; } /* IM AUFKLAPP-MENUE (schmale Fenster) STEHEN DIE PUNKTE UNTEREINANDER - ein * senkrechter Strich links vor jedem Eintrag saehe dort aus wie ein Einzug oder * ein Zitat. Deshalb dort abgeschaltet. .is-vertical greift im Overlay, der * Media-Query faengt zusaetzlich den Fall ab, dass TT5 die Klasse aendert. */ .wdb-kopf-nav .wp-block-navigation.is-vertical .wp-block-navigation-item + .wp-block-navigation-item { border-left: none; padding-left: 0; } @media (max-width: 600px) { .wdb-kopf-nav .wp-block-navigation-item + .wp-block-navigation-item { border-left: none; padding-left: 0; } } /* DER WECHSEL-KNOPF "Zu Kreditreich wechseln" (parts/header.html, letzter Punkt) * * Er sieht bewusst anders aus als die vier Punkte davor: Die fuehren INNERHALB * des Nachschlagewerks weiter, dieser fuehrt hinaus. Die Form ist die des * Theme-Umschalters aus Abschnitt 4 (Pille, geliehene Token, gleiche Hoehe) - * eine zweite Knopf-Gestalt auf derselben Seite waere eine zweite Quelle * derselben Aussage. * * WARUM ZWEI SELEKTOR-FAMILIEN: Der Navigation-Link-Block haengt eine eigene * Klasse an das
  • - so liegt es an der Instanz vor (im ausgelieferten HTML * geprueft, 2026-07-31). Setzt WordPress sie in einer spaeteren Fassung an das * , fiele die Gestaltung lautlos aus. Deshalb ist beides abgedeckt: die * direkte Regel greift bei der Klasse am Listenpunkt, die :has()-Regel bei der * Klasse am Link. * * WARUM DIE :has()-REGELN IN EIGENEN BLOECKEN STEHEN und nicht als zweite Zeile * in derselben Selektorliste: Ein Browser, der einen Selektor der Liste nicht * versteht, verwirft die GANZE Regel - Fehlertoleranz je Selektor gibt es nur * innerhalb von :is()/:where(). Zusammengefasst haette ein Browser ohne :has() * (vor Chrome 105, Safari 15.4, Firefox 121) also ausgerechnet den heute * gebrauchten Fall mitverloren, samt des gewuenschten Abstands. Getrennt * ueberlebt die belegte Regel jede :has()-Schwaeche. * * Der Abstand (margin-left) ist der vom Betreiber gewuenschte kleine Absatz zum * Punkt "Hinweise zu diesen Inhalten"; der senkrechte Trennstrich davor faellt * weg, weil ein Knopf seine eigene Kante mitbringt. */ .wdb-kopf-nav .wp-block-navigation-item.wdb-nav-wechsel { border-left: none; padding-left: 0; margin-left: 0.75rem; } .wdb-kopf-nav .wp-block-navigation-item:has(> .wdb-nav-wechsel) { border-left: none; padding-left: 0; margin-left: 0.75rem; } .wdb-kopf-nav .wdb-nav-wechsel > .wp-block-navigation-item__content, .wdb-kopf-nav a.wdb-nav-wechsel { display: inline-flex; align-items: center; background: var(--wdb-paper-raised); color: var(--wdb-ink); border: 1px solid var(--wdb-line-strong); border-radius: 999px; padding: 0.42rem 1rem; font-size: 0.86rem; text-decoration: none; } .wdb-kopf-nav .wdb-nav-wechsel > .wp-block-navigation-item__content:hover, .wdb-kopf-nav a.wdb-nav-wechsel:hover { border-color: var(--wdb-akzent); } /* Im Aufklapp-Menue und auf schmalen Fenstern stehen die Punkte untereinander - * ein eingerueckter Knopf saehe dort aus wie ein Fehler. Aus dem Grund im Kopf * dieses Abschnitts wieder je Selektor ein eigener Block. */ .wdb-kopf-nav .wp-block-navigation.is-vertical .wp-block-navigation-item.wdb-nav-wechsel { margin-left: 0; } .wdb-kopf-nav .wp-block-navigation.is-vertical .wp-block-navigation-item:has(> .wdb-nav-wechsel) { margin-left: 0; } @media (max-width: 600px) { .wdb-kopf-nav .wp-block-navigation-item.wdb-nav-wechsel { margin-left: 0; } .wdb-kopf-nav .wp-block-navigation-item:has(> .wdb-nav-wechsel) { margin-left: 0; } } /* ============================================================================= * 7. HINWEISSEITE (Shortcode [wdb_hinweise] in functions.php) * * Ein reiner Lesetext ohne Bedienelemente. Die Regeln sollen nur eines leisten: * dass er gelesen wird. Deshalb Serifenschrift und enge Lesebreite wie beim * Antwort-Baustein - und keine eigenen Farben, alles aus den Token von * Abschnitt 1. * ========================================================================== */ .wdb-hinweise { max-width: 62ch; } .wdb-hinweise p { font-family: var(--wdb-font-serif); font-size: 1.02rem; margin: 0 0 1rem; } /* Erster Abschnittstitel ohne Vorlauf - darueber sitzt bereits die * Seitenueberschrift, die WordPress selbst ausgibt. */ .wdb-hinweise .wdb-hinweise-titel { font-size: 1.2rem; margin: 2.2rem 0 0.8rem; } .wdb-hinweise .wdb-hinweise-titel:first-child { margin-top: 0; } /* ============================================================================= * 8. THEMENSEITEN (Pillar: Baufinanzierung / Modernisierungskredit / Ratenkredit) * * Die Body-Klasse .wdb-pillar setzt wdb_wissen_body_class() in functions.php, * sobald der Seiteninhalt [wdb_cluster] enthaelt; das Themenfeld kommt als * .wdb-thema-* dazu und faerbt --wdb-akzent. * * WARUM ES DIESEN ABSCHNITT GIBT (Betreiber-Befund 2026-07-19): Die Themenseiten * liefen unveraendert in der TT5-Vorgabe - 645px schmale Spalte, Titel und Text * mittig, darunter eine nackte Linkliste mit Unterstreichungen. Neben der * Startseite mit ihren Farbkacheln und Karten sah das aus wie eine andere Website. * Das Markup dafuer liefert das mu-plugin (wdb-frontend.php, Klassen * .wdb-cluster*). Der erste Schritt kam allein aus dem CSS und liess das * mu-plugin unangetastet. * * NACHTRAG 2026-07-19 (zweiter Betreiber-Befund): Die Kartenoptik reichte nicht -- * die FAQ-Gruppe soll AUCH DAS VERHALTEN der Startseite haben, also das * Akkordeon aus "Haeufige Fragen". Das braucht den Antworttext im Markup und war * mit CSS allein nicht erreichbar; wdb_frontend_render_cluster() rendert die * FAQ-Gruppe seit diesem Tag als
    mit den .wdb-faq-*-Klassen. Die * Regeln dieses Abschnitts gelten seither NUR NOCH fuer die Glossar-Gruppe, das * Akkordeon lebt unveraendert aus Abschnitt 6. * ========================================================================== */ /* Dieselbe Breite wie die Startseite. Zur Spezifitaet gilt, was in Abschnitt 6 * fuer .wdb-startseite steht: TT5 begrenzt mit (0,1,0) ueber :where(), die * Regeln hier liegen bei (0,2,0) und gewinnen ohne !important. */ .wdb-pillar .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .wdb-pillar .wp-block-post-title { max-width: 1080px; } /* Titel linksbuendig und in der Groesse der Startseiten-Schlagzeile. TT5 zentriert * den Post-Titel; mittig ueber einer linksbuendigen Liste wirkte er verrutscht. */ .wdb-pillar .wp-block-post-title { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; text-align: left; margin-bottom: 1.1rem; } /* Der Einleitungstext ist die Lede der Seite - gleiche Rolle wie .wdb-hero-text * auf der Startseite, also auch gleiches Aussehen. Er trifft den ERSTEN Absatz * der Seite; alle weiteren blieben normaler Fliesstext. */ .wdb-pillar .entry-content > p:first-of-type { font-size: 1.12rem; color: var(--wdb-slate); max-width: 56ch; margin-bottom: 2.6rem; } /* Der Balken in der Themenfarbe macht auf den ersten Blick klar, in welchem * Themenfeld man steht - dasselbe Wegleitsystem wie die Farbkacheln der * Startseite, nur als Kante statt als Flaeche. */ .wdb-pillar .wdb-cluster-gruppe { margin-top: 3rem; } .wdb-pillar .wdb-cluster-titel { border-left: 4px solid var(--wdb-akzent); padding-left: 0.8rem; margin-bottom: 1.4rem; } /* Die FAQ-Gruppe der Pillar-Seiten ist seit 2026-07-19 KEIN Kartenraster mehr, * sondern dasselbe Akkordeon wie "Haeufige Fragen" auf der Startseite (Betreiber- * Vorgabe: ein einheitliches Design). Das Markup dafuer liefert das mu-plugin * (wdb-frontend.php, .wdb-faq-liste / .wdb-faq-eintrag), gestaltet wird es von * den Regeln in Abschnitt 6 - hier steht bewusst nichts doppelt. * * Das Kartenraster unten gilt weiter fuer die GLOSSAR-Gruppe: kurze Begriffe * ohne Antworttext, fuer die ein Akkordeon eine leere Schublade waere. Zwei * Spalten ab 760px - drei ergaeben Schlagwortsalat, eine die endlose Liste. */ .wdb-pillar .wdb-cluster-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; } @media (max-width: 760px) { .wdb-pillar .wdb-cluster-liste { grid-template-columns: 1fr; } } /* Die Karte traegt die Unterscheidbarkeit, deshalb faellt die Unterstreichung * weg - genau wie bei den Startseiten-Kacheln (.wdb-block-liste a). Sie war der * Grund fuer den Streifen-Eindruck im gemeldeten Bildschirmfoto. */ .wdb-pillar .wdb-cluster-liste li { margin: 0; } .wdb-pillar .wdb-cluster-liste a { display: block; height: 100%; background: var(--wdb-paper-raised); border: 1px solid var(--wdb-line); border-left: 3px solid var(--wdb-akzent); border-radius: 14px; padding: 1rem 1.2rem; color: var(--wdb-ink); text-decoration: none; font-size: 0.98rem; line-height: 1.45; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .wdb-pillar .wdb-cluster-liste a:hover { border-color: var(--wdb-akzent); box-shadow: var(--wdb-shadow); } @media (prefers-reduced-motion: reduce) { .wdb-pillar .wdb-cluster-liste a { transition: none; } } /* ============================================================================= * 9. EINZELANSICHT (ein FAQ-Eintrag / ein Glossar-Begriff) * * WARUM ES DIESEN ABSCHNITT GIBT (Betreiber-Befund 2026-07-19): Der Fliesstext * eines Eintrags stand deutlich groesser als die Direktantwort im Kasten * darueber - die Proportion lief dem Aufbau der Seite zuwider, denn der Kasten * traegt die eigentliche Antwort und soll nicht wie eine Randnotiz unter dem * Fliesstext wirken. * * GEMESSEN, nicht geschaetzt (theme.json von Twenty Twenty-Five auf der Instanz, * 2026-07-19): TT5 setzt die Grundschrift auf das Preset "large", also fluid * 1.125rem bis 1.375rem. Der Kasten (.wdb-direktantwort) steht auf 1.08rem -- * auf breitem Viewport lief der Fliesstext also rund ein Viertel groesser als * die Antwort, auf die er sich bezieht. * * Angeglichen wird auf den Wert des Kastens, damit beide Flaechen EINE * Schriftgroesse teilen. Der sichtbare Unterschied bleibt trotzdem bestehen und * ist gewollt: Der Kasten traegt die Serifenschrift und die abgesetzte Flaeche. * Die Ueberschriften im Inhalt sind NICHT betroffen - TT5 gibt ihnen in * theme.json eigene Groessen, sie erben hier nichts. * ========================================================================== */ /* Die Body-Klassen kommen aus dem WordPress-Kern (get_body_class), belegt am * ausgelieferten HTML der Instanz: "single single-wdb_faq". Bewusst an beide * Inhaltstypen gehaengt - ein Glossar-Begriff hat denselben Aufbau. */ .single-wdb_faq .entry-content, .single-wdb_glossar .entry-content { font-size: 1.08rem; } /* Absaetze und Listen zusaetzlich direkt adressiert: Der Wert oben wirkt nur * ueber Vererbung, und TT5 setzt einzelnen Bloecken ueber Preset-Klassen * durchaus eigene Groessen. Wo eine solche Klasse steht (has-*-font-size), soll * sie weiter gewinnen - deshalb hier KEIN !important. */ .single-wdb_faq .entry-content p, .single-wdb_faq .entry-content li, .single-wdb_glossar .entry-content p, .single-wdb_glossar .entry-content li { font-size: inherit; } /* KURZE TEXTZEILEN BLEIBEN LINKSBUENDIG (Betreiber-Befund 2026-07-27, Version 2.20.0). * * Der Befund: Die fuenf Zwischenueberschriften in Eintrag 105 ("Verkauf der Immobilie" und * vier weitere) erschienen ZENTRIERT ueber linksbuendigem Fliesstext. Im Browser gemessen: * die langen Absaetze beginnen bei x=690, die kurzen Zeilen bei 839 bis 956. * * Die Ursache liegt NICHT an der Auszeichnung, sondern am Zusammenspiel zweier Regeln. Der * Inhaltsbereich ist ab 1240px ein Raster (grid-template-columns: 700px 400px, siehe unten). * WordPress setzt ueber die Constrained-Layout-Regel auf JEDES direkte Kind * 'margin-left: auto !important; margin-right: auto !important'. Zwei Auto-Raender heben bei * einem Grid-Item die Dehnung (justify-self: stretch) auf: Das Item schrumpft auf seine * Textbreite und sitzt mittig in der Spalte. Ein langer Absatz fuellt die Spalte und merkt * davon nichts, eine kurze Zeile schrumpfte auf gemessene 182px statt 700px. * Drei Gegenproben im Browser, der Effekt haengt NICHT am Tag: als

    927px, als * 950px, als reiner Absatz 839 bis 956px. * * Deshalb wird hier nur der Auto-Rand zurueckgenommen, NICHT justify-self gesetzt. * 'justify-self: start' waere der naheliegende Griff (der Ruecksprung-Link nutzt ihn weiter * unten), macht das Element aber content-schmal - ein kurzer Direktantwort-Kasten wuerde dann * nicht mehr die Spalte fuellen. Mit 'margin-inline: 0' bleibt die Dehnung erhalten: jeder * Textblock nimmt die volle Spaltenbreite, der Text darin steht links. * * !important ist hier unvermeidbar - die Regel, die aufgehoben wird, traegt es selbst. * Bewusst NUR auf Textbloecke: Der Ruecksprung-Link (.wdb-zurueck) und die Randspalte * (.wdb-single-rail) behalten ihre eigene Ausrichtung, ebenso die ausgerichteten Bloecke * (alignleft/alignright/alignfull). */ .single-wdb_faq .entry-content > :where( p, h2, h3, h4, ul, ol ):not( .alignleft ):not( .alignright ):not( .alignfull ), .single-wdb_glossar .entry-content > :where( p, h2, h3, h4, ul, ol ):not( .alignleft ):not( .alignright ):not( .alignfull ) { margin-inline: 0 !important; } /* Titel der Einzelansichten: mitwachsend statt starr (Betreiber-Wunsch 2026-07-23, * "Ueberschriften dynamisch halten"). TT5 gibt h1 ueber theme.json das Preset * xx-large = 2.15rem, unabhaengig von der verfuegbaren Breite. * * Die OBERGRENZE ist exakt dieser bisherige Wert - am breiten Monitor aendert sich * also nichts, und genau das war die Vorgabe ("dort ist die Darstellung in Ordnung"). * Wird das Fenster schmaler, faellt die Groesse mit, statt den Titel ueber viele * Zeilen zu brechen. * * SSoT-Hinweis: assets/editor.css traegt dieselbe Spanne fuer den Block-Editor. Beide * Flaechen sollen gleich aussehen, deshalb sind sie zusammen zu aendern. */ .single-wdb_faq .wp-block-post-title, .single-wdb_glossar .wp-block-post-title { font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.15; } /* ============================================================================= * 10. BEITRAGSNAVIGATION - REFLOW BEI SCHMALEM VIEWPORT (WCAG 1.4.10) * * GEMESSENER BEFUND (axe-core-Lauf 2026-07-19, Protokoll in BARRIEREFREIHEIT.md * Abschnitt 7): Die Einzelansichten erzwangen horizontales Scrollen. Bei 320 px * Viewport war das Dokument 406 px breit, bei 360 px sogar 408 px - der Fehler * traf also nicht nur den 320-px-Grenzfall aus der WCAG-Vorgabe, sondern jedes * gaengige Handy. Die Startseite war NICHT betroffen. * * URSACHE (belegt am gerenderten HTML der Instanz, nicht vermutet): Das Pattern * twentytwentyfive/post-navigation, eingebunden in single-wdb_faq.html und * single-wdb_glossar.html, rendert seine beiden Links in einem