/* Theme Name: marillabax Kadence Child Description: Child-Theme für den marillabax Website-Relaunch, basierend auf Kadence. Template: kadence Version: 1.30.1 Text Domain: marillabax-child */ /* Farben/Typografie laufen bewusst über theme.json (siehe dort), damit sie im Block-Editor als Presets erscheinen. Hier nur echtes, seitenübergreifendes UI-Chrome, das nicht an einen einzelnen Block/Content-Typ gebunden ist. */ /* ===== GLOBALE BREITEN-REGEL (verbindlich, siehe Design-Dokument) ===== Ersetzt "padding: Xpx 6vw" durch "padding: Xpx var(--edge)" in JEDER neuen Sektion. Verhindert automatisch, dass Inhalte auf breiten Monitoren unbegrenzt bis zum Bildschirmrand laufen, ohne dass man selbst an ein max-width denken muss — eine Stelle, die alles steuert. */ :root { --edge: max(6vw, calc((100vw - 1320px) / 2)); /* Gemeinsame Typo-Basis (siehe theme.json-Presets Groß/Mittel/Klein) — greift als Fallback, wo kein Template eine eigene Größe setzt (z. B. künftige Standardseiten wie Kontakt, Impressum, Beratungsleistungen). */ --h1-size: clamp(1.9rem, 3.2vw, 2.75rem); --h2-size: clamp(1.4rem, 2.2vw, 1.9rem); --h3-size: 1.15rem; --h4-size: 0.95rem; --h2-margin-top: 40px; /* ===== LESBARES GRAU FÜR TEXT ===== Gemessen am 14.09.2026: Das Paletten-Grau #969696 erreicht auf Weiß ein Kontrastverhältnis von 3,0:1. WCAG AA verlangt für normalen Text 4,5:1 — alle Beschriftungen, Eyebrows, Fußnoten und Zitat-Attribute in diesem Grau waren damit unterhalb der Barrierefreiheitsschwelle. #707070 ist das hellste Grau, das auf BEIDEN Seitenhintergründen über der Schwelle liegt: 4,95:1 auf Weiß und 4,57:1 auf Paper (#F3F6FB). Ein helleres Grau hätte auf den Paper-Abschnitten wieder versagt. Bewusst NICHT das Paletten-Grau-Dunkel (#595959) — das hätte leise Beschriftungen zu laut gemacht und die Abstufung im Design verschoben. Das Paletten-Grau selbst bleibt unverändert: Es wird weiterhin für Rahmen, Flächen und Akzente verwendet, wo Kontrast keine Rolle spielt. Geändert wurden nur `color`-Angaben auf Text. */ --mb-grau-text: #707070; } /* Handgezeichneter "Wackel"-Look für die Icon-Bibliothek (Filter-Defs in inc/icon-library.php) */ .mb-icon.sk1, .mb-icon.sk2, .mb-icon.sk3 { overflow: visible; } .mb-icon.sk1 { filter: url(#sketchy1); } .mb-icon.sk2 { filter: url(#sketchy2); } .mb-icon.sk3 { filter: url(#sketchy3); } /* ===== GLOBALE ÜBERSCHRIFTEN-REGEL (verbindlich) ===== Farbe kommt zusätzlich aus theme.json (styles.elements.heading), hier nur Ausrichtung. */ h1, h2, h3, h4 { text-align: left; color: var(--wp--preset--color--blau) !important; } h1 { font-size: var(--h1-size); font-weight: 800; line-height: 1.15; } h2 { font-size: var(--h2-size); line-height: 1.25; } h3 { font-size: var(--h3-size); } h4 { font-size: var(--h4-size); } /* ===== CONTENT-TYP-FARBE: H1–H4 GRÜN AUF SERVICEWISSEN-SEITEN ===== Bisher waren Überschriften sitewide fix Blau — auf Wissensartikel/Glossar passte das nicht zur grünen Servicewissen-Achse (FAQ-Akkordeon, Nach-oben- Button, Eyebrow-Badges etc. sind dort längst Grün). Gleiches Prinzip wie bei diesen Bausteinen jetzt auch für Überschriften: Content-Typ-Farbe schlägt Standard-Farbe. */ .single-wissensartikel h1, .single-wissensartikel h2, .single-wissensartikel h3, .single-wissensartikel h4, .single-glossarbegriff h1, .single-glossarbegriff h2, .single-glossarbegriff h3, .single-glossarbegriff h4, .post-type-archive-wissensartikel h1, .post-type-archive-wissensartikel h2, .post-type-archive-wissensartikel h3, .post-type-archive-wissensartikel h4, .post-type-archive-glossarbegriff h1, .post-type-archive-glossarbegriff h2, .post-type-archive-glossarbegriff h3, .post-type-archive-glossarbegriff h4 { color: var(--wp--preset--color--gruen) !important; } /* Ausnahme: Themenblock-Subtitle bleibt bewusst Grau, unabhängig von der Content-Achse (Design-Entscheidung, siehe Design-Dokument), auch wenn der Block innerhalb eines Wissensartikels verwendet wird. */ .single-wissensartikel .mb-themenblock-h3, .single-glossarbegriff .mb-themenblock-h3, .post-type-archive-wissensartikel .mb-themenblock-h3, .post-type-archive-glossarbegriff .mb-themenblock-h3 { color: var(--mb-grau-text, #707070) !important; } /* ===== ROTER FADEN — TITEL-CONTAINER STATT H1 SELBST ===== Frühere Versuche direkt am H1-Element verworfen, siehe Chat-Verlauf: 1) gerader Balken vor jedem H1/H2 sitewide — zu hart, zu inflationär. 2) handgezeichnete Unterstreichung unterm ersten Wort per JS — Kadence- Titel-Markup unterscheidet sich von unseren eigenen Templates, Position "schwamm". 3) handgezeichneter Schwung als H1::before mit padding-left — Kadence überschreibt reine Element-Selektoren mit eigenen Klassen-Selektoren (z. B. .entry-title), auch mit !important nur mit Mühe stabil zu halten. Jetzt: roter Rahmen-Akzent am TITEL-CONTAINER (nicht am H1-Element selbst) — linke Kante der Box. Das ist der Container, den wir ohnehin über eigene Template-Klassen (.mb-article-hero etc.) oder Kadence' dokumentierte .entry-hero-Klasse ansprechen, dadurch robuster als jeder Versuch, direkt am H1 zu arbeiten. Bewusst NUR am Seitentitel-Container, nicht an jeder Überschrift im Fließtext. Durchgängig Rot — auch auf Wissensartikel/ Glossar (keine Content-Achsen-Farbe für dieses Element, Design- Entscheidung siehe Chat). .entry-hero ist Kadence' dokumentierte Klasse für generische Seitentitel (Quelle: offizielles Kadence-Support-Forum) — bitte live gegenchecken, falls eure Kadence-Version einen anderen Klassennamen nutzt. */ .entry-hero, .mb-article-hero, .mb-glossar-hero, .mb-az-hero { border-left: 5px solid var(--wp--preset--color--rot, #F00000) !important; } /* .entry-hero (Kadence, generische Seiten) hat anders als unsere eigenen Templates keine feste Breite/Zentrierung von Haus aus — dadurch hing der Rahmen bei normalen WordPress-Seiten am nackten Browser-Rand statt an der tatsächlichen Textkante (siehe Chat). Erzwingt dieselbe Breite/Zentrierung wie .mb-article-hero, damit der Rahmen überall konsistent sitzt. */ .entry-hero, .entry-hero.entry-hero-layout-standard { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Der sichtbare graue/blaue Hintergrundkasten liegt auf einem INNEREN Element, nicht auf .entry-hero selbst — der Weißraum zwischen Rahmen und Kasten kam von dessen eigenem Außenabstand, unabhängig von unserem Padding oben. Zwingt jedes direkte Kind bündig an die Rahmenkante. */ .entry-hero > * { margin-left: 0 !important; } /* Exakt gefundenes verschachteltes Element (Dev-Tools-Screenshot): bringt offenbar eine eigene Breite/Zentrierung mit (vermutlich Shorthand "margin: 0 auto"), die unsere einzelne margin-left-Regel oben nicht zuverlässig schlägt. Direkt und vollständig zurückgesetzt. */ .entry-hero-container-inner { margin: 0 !important; max-width: none !important; width: 100% !important; } /* Der wahre Übeltäter, gefunden per Dev-Tools: .site-container ist Kadence' GLOBALE Seiteninhalts-Container-Klasse (zentriert Content sitetweit auf eine eigene Maximalbreite) — läuft hier unabhängig von unserer eigenen .entry-hero-Breite und zentriert den Titel nochmal separat innerhalb unserer bereits verbreiterten Box. Deshalb der Versatz: zwei unabhängige Zentrierungen übereinander. Bewusst NUR innerhalb von .entry-hero deaktiviert, nicht sitetweit — .site-container wird vermutlich an anderer Stelle im Theme absichtlich für die normale Inhaltsbreite genutzt. */ .entry-hero .site-container { margin-left: 0 !important; max-width: none !important; width: 100% !important; } /* Zentrierung bewusst NICHT mehr überschrieben — der Titel bleibt zentriert (Kadence-Standard), nur die Breite/Position des Rahmens war das Problem, nicht die Textausrichtung. Frühere Versuche, Linksbündigkeit zu erzwingen, sind hier entfernt (siehe Chat-Verlauf). */ /* Bewusste Ausnahme: die Analysieren/Entwickeln/Befähigen-Sektion auf der Startseite bleibt zentriert (Prozess-Fluss-Darstellung, siehe Design-Doku). */ .work-model-head { text-align: center; } /* Sicherheitsnetz: Kadence setzt teils eine eigene Inhaltsbreite auf Container-Ebene, die unsere eigene (breitere) max-width sonst unwirksam machen könnte, wenn ein Elternelement schon enger ist. Betrifft nur unsere eigenen Templates (Servicewissen/Serviceglossar), keine Kadence-Seiten. */ .single-wissensartikel #content, .single-wissensartikel .content-container, .single-glossarbegriff #content, .single-glossarbegriff .content-container, .post-type-archive-wissensartikel #content, .post-type-archive-glossarbegriff #content { max-width: none !important; width: 100% !important; } /* Breadcrumb — global, damit sie auf JEDER Seite (Servicewissen, Serviceglossar, künftige Seitentypen) identisch aussieht, statt pro Template neu gestylt zu werden. */ .mb-breadcrumb { padding: 14px var(--edge); font-size: 0.82rem; color: var(--mb-grau-text, #707070); background: var(--wp--preset--color--weiss); border-bottom: 1px solid #e1e4e7; } /* Sicherheitsnetz für liegengebliebene WordPress-Kern-Zitatblöcke aus der Zeit vor der Allowlist-Umstellung auf unseren eigenen Zitat-Block (core/ quote ist seither nicht mehr neu einfügbar, ändert aber nichts an bereits vorhandenen Alt-Instanzen im Content). Statt WordPress' dunkelgrauer Werks-Formatierung (border-left: rgb(45,55,72)) hier zumindest markenkonforme Optik, falls irgendwo noch ein Exemplar auftaucht. */ .wp-block-quote { border-left: 4px solid var(--wp--preset--color--blau, #004C99) !important; padding-left: 20px !important; color: var(--wp--preset--color--ink, #0E1B26); } /* Branding für den WordPress-Kern-Tabellenblock — bisher komplett ungestylt. Blaue Kopfzeile, Zebra-Streifen, großzügiges Zellen-Padding. */ /* Mobile-Sicherheitsnetz: horizontales Scrollen statt abgeschnittenem Text auf schmalen Bildschirmen (mit echtem Playwright-Test bei 375px Breite bestätigt — ohne dies wurde Inhalt rechts stumm abgeschnitten). */ .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.92rem; } .wp-block-table thead { background: var(--wp--preset--color--blau, #004C99); } .wp-block-table thead th { color: #fff !important; font-weight: 700; text-align: left; padding: 12px 16px; border: none !important; } .wp-block-table tbody td, .wp-block-table tbody th { padding: 12px 16px; border: none !important; border-bottom: 1px solid #e1e4e7 !important; } .wp-block-table tbody tr:nth-child(even) { background: var(--wp--preset--color--paper, #F3F6FB); } /* 1.28.0 — Hilfsklasse „mb-tab-kopfspalte" für Tabellen, deren ERSTE SPALTE die Zeilen benennt statt Inhalt zu tragen (Matrizen, Vergleiche, Raster). Der Kern-Tabellenblock kennt nur eine Kopfzeile, keine Kopfspalte — ohne diese Klasse sieht die benennende Spalte aus wie jede andere Zelle, und die Tabelle liest sich falsch. Einzutragen im Editor unter Block → Erweitert → „Zusätzliche CSS-Klasse(n)". Das ist bewusst eine Klasse und keine Farbwahl je Zelle: Eine Kopfspalte ist eine Struktur, keine Dekoration. Freie Zell- und Schriftfarben sind zusätzlich vorgemerkt, aber das Häufigere ist dieser Fall. */ .wp-block-table.mb-tab-kopfspalte tbody td:first-child { background: var(--wp--preset--color--blau-hell, #EEF4FA); font-weight: 600; color: var(--wp--preset--color--blau-dunkel, #00325E); border-right: 1px solid #d6e3f0 !important; } /* Zebra-Streifen dürfen die Kopfspalte nicht überschreiben. */ .wp-block-table.mb-tab-kopfspalte tbody tr:nth-child(even) td:first-child { background: #E4EDF7; } /* Konsistenter Abstand zwischen allen Blöcken auf normalen WordPress-Seiten (Kadence' .entry-content) — dieselbe Regel wie bereits für .mb-article-body in wissensartikel.css, hier zusätzlich site-weit für alle Standardseiten, da Kadence sonst keinen verlässlichen Abstand zwischen Blöcken erzwingt. !important, weil Kadence hier teils eigene, spezifischere Abstandsregeln mitbringt (bekanntes Muster, siehe Merkzettel). */ .entry-content > * + * { margin-top: 32px !important; } .entry-content > p + p { margin-top: 1em !important; } .mb-breadcrumb a { color: var(--mb-grau-text, #707070); text-decoration: none; } .mb-breadcrumb a:hover { text-decoration: underline; } .mb-breadcrumb span { margin: 0 6px; } /* Die letzte Stufe ist seit 1.11.0 ein (vorher nackter Text). Ohne diese Zeile würde sie die 6px Trenner-Marge der Schrägstriche erben und um einen halben Leerraum zu weit rechts stehen. */ .mb-breadcrumb .mb-breadcrumb-aktuell { margin: 0; } /* Breadcrumb innerhalb des Branchenseiten-Hero (unter dem Titel statt in einer eigenen Leiste darüber) — Basis-Optik (Padding/Hintergrund/Rahmen) zurückgesetzt, da er jetzt Teil der Hero-Box ist, nicht mehr eine eigenständige Leiste. */ .mb-breadcrumb-auf-hero { padding: 0 !important; background: transparent !important; border-bottom: none !important; margin: 10px 0 16px; font-size: 0.78rem; } /* Helle Variante für den dunklen Foto-Hero — sonst unlesbar */ .mb-breadcrumb-hell, .mb-breadcrumb-hell a { color: rgba(255, 255, 255, 0.75); } .mb-breadcrumb-hell a:hover { color: #fff; } .mb-back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--blau); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: 0 8px 20px rgba(14, 27, 38, 0.2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s, transform 0.2s, background 0.15s; z-index: 50; } .mb-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .mb-back-to-top:hover { background: var(--wp--preset--color--blau-dunkel); } @media (max-width: 600px) { .mb-back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }