/* Theme Name: Twenty Twenty-Four Child Theme URI: https://wordpress.org/themes/twentytwentyfour/ Description: Child-Theme für Twenty Twenty-Four mit ACF Veranstaltungsverwaltung (Custom Post Type: event) Author: Dein Name Template: twentytwentyfour Version: 2.0.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: twentytwentyfour-child */ body { --wp--style--block-gap: 12px; } /* ========================================================================= * Floating Header * * Liegt absolut über dem Hero-Bild und scrollt mit dem Hero weg. KEIN * sticky/fixed — wenn der Nutzer weiterscrollt, ist der Header weg. * Das ist gewollt: Burger-Menü ist beim Wiederöffnen über das Auf- * scrollen erreichbar. * ====================================================================== */ .site-header--floating { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: transparent; pointer-events: none; /* Lässt Cover-Klicks (z. B. focal-point Drag) im Editor durch */ } .site-header--floating > .wp-block-group { pointer-events: auto; /* Logo & Nav bleiben klickbar */ } /* Logo heller über dunklen Hero-Bildern. Falls das Logo selbst bereits hell ist, kann dieser Filter über theme.json / pro Logo überschrieben werden. */ .site-header--floating .wp-block-site-logo img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } /* Mobile: Logo kleiner. Desktop ist 160×125 (per width/height-Attribut am ); hier auf 120px Breite, Höhe per height:auto proportional (~94px, Seitenverhältnis 160:125 = natürliches 192:150). Regel greift auf Wrapper UND , damit die Attribut-Maße sicher überschrieben werden und der Wrapper nicht weiterhin 160px reserviert. Scope: Das Logo sitzt im gerenderten DOM im Hero-Cover (der Header wurde im Site-Editor in den Hero verschmolzen; ein separates .site-header--floating existiert nicht mehr). .wp-block-cover trifft das Logo auf allen Seiten und schließt ein evtl. Footer-Logo aus. */ @media (max-width: 600px) { .wp-block-cover .wp-block-site-logo, .wp-block-cover .wp-block-site-logo img { width: 120px; height: auto; } } /* Burger-/Schließen-Icon größer. WP rendert das SVG mit width/height=24 als Attribut; eine CSS-Regel überschreibt das zuverlässig (Attribute haben keine Spezifität). Der Open-Button ist inline-flex und wächst mit dem SVG mit. Bewusst NICHT an .site-header--floating gehängt (existiert im DOM nicht mehr) — die Core-Klassen des Navigation-Blocks sind stabil. */ .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 40px; height: 40px; } /* Burger-Trigger heller; das Standard-Icon ist sonst dunkel und auf dunklen Bildern kaum sichtbar. */ .site-header--floating .wp-block-navigation__responsive-container-open { color: #fff; } .site-header--floating .wp-block-navigation__responsive-container-open svg { fill: currentColor; } /* ========================================================================= * Focus-Behandlung für den Navigation-Block * * Defensive Resets gegen den "Klick-Geist" — nach Mausklick auf einen * Button (Burger öffnen, X schließen, Menü-Link) bleibt sonst ein Default- * Outline sichtbar, bis irgendwo anders hingeklickt wird. Wir unter- * drücken den Maus-Fokus komplett und geben Tastatur-Nutzern über * :focus-visible einen klar sichtbaren, aber dezenten Akzent-Ring. * * Betroffen sind: * - der Open-Button (Burger), * - der Close-Button (X) im offenen Overlay, * - alle Menü-Links im Overlay (auch verschachtelte Submenu-Toggles). * ====================================================================== */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .wp-block-navigation .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-submenu__toggle { outline: none; -webkit-tap-highlight-color: transparent; } .wp-block-navigation__responsive-container-open:focus, .wp-block-navigation__responsive-container-close:focus, .wp-block-navigation .wp-block-navigation-item__content:focus, .wp-block-navigation .wp-block-navigation-submenu__toggle:focus { outline: none; } /* Tastatur-Fokus bekommt einen sichtbaren, aber dezenten Ring. Farbe per Theme-Palette (Kupfer) mit weichem Halo, damit der Ring auf dem Hero-Bild sichtbar bleibt, ohne aufdringlich zu wirken. */ .wp-block-navigation__responsive-container-open:focus-visible, .wp-block-navigation__responsive-container-close:focus-visible, .wp-block-navigation .wp-block-navigation-item__content:focus-visible, .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--kupfer, #955a23); outline-offset: 2px; border-radius: 2px; } /* ========================================================================= * Hero * * Vollbreiter Cover-Block mit Featured Image. Höhe und vertikale * Bildposition werden aus den CSS Custom Properties --hero-height bzw. * --hero-focal gelesen, die inc/hero.php pro Seite in den schreibt. * * Das !important ist nötig, weil der Cover-Block min-height und * object-position als inline style ausgibt — eine reguläre Klassen-Regel * hätte sonst geringere Spezifität. * ====================================================================== */ .site-hero { min-height: var(--hero-height, 460px) !important; margin-top: 0; /* Hero sitzt direkt unter dem Header (der absolut darüber liegt) und beginnt damit am Browserrand. Falls das Theme oder ein Plugin oben Padding draufpackt, hier hart zurückziehen. */ } .site-hero .wp-block-cover__image-background { object-position: var(--hero-focal, 50% 0%) !important; } /* Innerer Container: nimmt die VOLLE Hero-Höhe ein (align-self:stretch statt vom Cover vertikal zentriert zu werden) und verteilt seine Kinder als Flex-Spalte — Kopfzeile (Logo/Burger) oben, Kicker + Titel unten. Komfortable max-width, horizontal zentriert. */ .site-hero .wp-block-cover__inner-container { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--wp--preset--spacing--50, 1.5rem); align-self: stretch; display: flex; flex-direction: column; } /* Das erste Kind im Hero ist die Logo/Burger-Leiste. Sie sitzt damit fix am oberen Innenrand (= padding-top des Cover, unabhängig von der min-height). Ihre automatische Unter-Margin schluckt den freien Raum und schiebt alles Folgende (Kicker + Titel) an den unteren Rand — adaptiv zu jeder Hero-Höhe, ganz ohne Spacer. !important schlägt das am Group-Block im Editor gesetzte Inline- margin-bottom:0. Greift auch ohne Kicker: dann rutscht nur der Titel nach unten. Ersetzt die früheren Spacer, deren feste Höhe das min-height-Konzept ausgehebelt hat (sie skalierten nicht mit). */ .site-hero .wp-block-cover__inner-container > :first-child { margin-block-end: auto !important; } /* Kicker (post_excerpt) — klein, ruhig, über dem Titel */ .site-hero .hero-kicker { font-size: var(--wp--preset--font-size--small, 0.95rem); line-height: 1.4; letter-spacing: 0.02em; /* Schlicht weiß, wie der Hero-Titel. !important schlägt eine evtl. im Site-Editor am Block gesetzte Preset-Farbe (.has-*-color ist !important); die höhere Spezifität (.site-hero .hero-kicker) gewinnt dann zuverlässig. */ color: #fff !important; margin: 0 0 0.25rem; } /* Versteckt den "Read more"-Link, falls der Core-Block ihn doch rendert (Single-Page-Kontext rendert ihn normalerweise nicht, aber sicher ist sicher). */ .site-hero .hero-kicker .wp-block-post-excerpt__more-link { display: none; } /* Haupt-H1 — groß, Serif/Italic passt zur Vorlage */ .site-hero .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; font-style: italic; line-height: 1.15; color: #fff; /* Warm-brauner, langer Glow für Lesbarkeit auf wechselnden Hero-Bildern. Drei Layer mit steigendem Blur erzeugen einen weichen, espresso-farbenen Halo, der die Serifen von Vesper Libre nicht aufreibt. Der Farbton matcht das warme Box-Shadow-Schema der Event-Cards (rgba(40, 25, 10, …)). */ text-shadow: 0 0 16px rgba(40, 25, 10, 0.75), 0 0 32px rgba(40, 25, 10, 0.55), 0 0 48px rgba(40, 25, 10, 0.35); margin: 0; text-wrap: balance; } /* ========================================================================= * Main-Content-Bereich * * Direkt nach dem Hero soll der Content beginnen, ohne zusätzliche obere * Lücke vom Theme. * ====================================================================== */ .site-main { padding-top: 0; } /* ========================================================================= * Schriftart-Utility-Klassen * * Kurze Klassen, um pro Element die Schriftart oder das Gewicht zu wechseln, * ohne ein eigenes CSS schreiben zu müssen. Funktionieren in Blöcken über * das Feld "Zusätzliche CSS-Klasse" (Block-Sidebar → Erweitert) oder in * eigenen Templates. * * Hinweis: WordPress generiert aus theme.json zusätzlich die längeren * Klassen .has-fira-sans-font-family und .has-vesper-libre-font-family. * Beide Schemata funktionieren parallel — wähle das jeweils kürzere. * * Verfügbare Schnitte: * Fira Sans → 200 (ExtraLight), 400 (Regular), 700 (Bold), jeweils auch italic * Vesper Libre → 400 (Regular), 500 (Medium), 700 (Bold) * * Ein Gewicht, das im jeweiligen Font nicht geladen ist, wird vom Browser * synthetisch nachgerechnet (Faux-Bold/Faux-Light) und sieht meist schlechter * aus als ein passender Schnitt. Daher unten nur die wirklich vorhandenen * Gewichte. Wenn .fw-medium auf Fira Sans angewendet wird, fällt der Browser * auf den nächstgelegenen Schnitt (400) zurück. * ====================================================================== */ /* Schriftarten */ .ff-sans { font-family: var(--wp--preset--font-family--fira-sans, sans-serif) !important; } .ff-display { font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif) !important; } /* Gewichte */ .fw-extralight { font-weight: 200 !important; } /* Alias für Rückwärtskompatibilität — alte Verwendungen von .fw-thin im Editor-Inhalt sollen weiterhin funktionieren. Zeigt aber auf 200, weil 100 (Thin) auf dem Bildschirm zu dünn wirkte und nicht mehr ausgeliefert wird. */ .fw-thin { font-weight: 200 !important; } .fw-regular { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-bold { font-weight: 700 !important; } /* ========================================================================= * Text-Schatten-Utility-Klassen * * Verbessern die Lesbarkeit von Text auf Bildern (Hero, Cover-Blöcke, * Bild-mit-Überschrift). Anwendung wie die ff-/fw-Utilities: im Editor * im Feld "Zusätzliche CSS-Klasse(n)" eintragen. * * Drei Varianten in steigender Intensität: * * .text-shadow Dezenter Bodenschatten, Standardfall. * Für ruhige Bildregionen ohne starke Kontraste. * * .text-shadow-hard Klassischer harter Schlagschatten. * Präzise, etwas grafischer Look. Gut für klare, * kontrastreiche Hintergrundbilder. * * .text-shadow-glow Mehrfach-Glow rund um den Text. * Maximale Lesbarkeit auch auf unruhigen oder * wechselnd hellen/dunklen Bildregionen. * * Hinweis: Alle Varianten gehen von hellem Text auf dunklem/buntem Bild * aus. Für dunklen Text auf hellem Bild wären invertierte Schatten * (weiße statt schwarze) nötig — bei Bedarf ergänzen wir das später. * ====================================================================== */ .text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important; } .text-shadow-hard { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8) !important; } .text-shadow-glow { text-shadow: 0 0 16px rgba(40, 25, 10, 0.75), 0 0 32px rgba(40, 25, 10, 0.55), 0 0 48px rgba(40, 25, 10, 0.35); } :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; } /* ========================================================================= * Abstands-Utility-Klassen * * Entfernen den von WordPress automatisch gesetzten blockGap * (margin-block-start, default 1.2rem aus theme.json) vor einem einzelnen * Block. Anwendung wie die anderen Utilities: im Editor im Feld * "Zusätzliche CSS-Klasse(n)" eintragen. * * Nützlich, wenn zwei Sektionen direkt aneinander anschließen sollen, * ohne den globalen blockGap im theme.json zu ändern. * * Hinweis: Wirkt auf margin-block-start (logische Eigenschaft, identisch * zur generierten WP-Regel) — daher gewinnt .mt-0 zuverlässig gegen den * blockGap. Alternativ geht der Margin-Regler im Editor (Maße → oben = 0). * ====================================================================== */ .mt-0 { margin-block-start: 0 !important; } /* ========================================================================= * Vita-Umschalter (kurz <-> ausführlich) — sticky Leiste IN der Gruppe * * Zwei gleichrangige Group-Blocks .vita-kurz / .vita-lang, jeder mit eigener * inhaltlicher H2. vita-toggle.js blendet initial die Langfassung aus und * setzt an den KOPF der jeweils sichtbaren Gruppe eine STICKY Leiste * (.vita-switch__bar): bleibender Sektions-Anker (.vita-switch__title, ein * Label) plus leiser Inline-Umschalter (.vita-toggle). Ohne JS bleiben beide * Fassungen sichtbar (Progressive Enhancement). * * Anker IN der Gruppe: Die Leiste ist echtes erstes Kind der Gruppe, steht * also im Fluss und klebt erst beim Scrollen oben fest — und löst sich am * Ende der Gruppe wieder (statt als schmaler Streifen über dem vollbreiten * Pergament-Band zu schweben). Beim Umschalten hängt das Skript die Leiste * in die jeweils sichtbare Gruppe um. * * Eleganz-Prinzip: Die Leiste wirkt wie das Band, das kurz stehenbleibt, * nicht wie eine UI-Chrome-Leiste — deckendes Pergament (kein Akzent- * hintergrund), schlanke Höhe, der Schalter ein ruhiger Text-Switch statt * gefülltem CTA. Der Stuck-Schatten erscheint nur, wenn sie wirklich klebt. * * Das [hidden]-!important ist nötig, weil die Group-Layout-Klassen display * setzen und sonst das UA-Default [hidden]{display:none} überschreiben. * ====================================================================== */ .vita-kurz[hidden], .vita-lang[hidden] { display: none !important; } /* Fokus-Ziel nach dem Umschalten (Container) zeigt keinen Ring — der Fokus dient hier nur der Screenreader-/Tastatur-Navigation. */ .vita-kurz:focus, .vita-lang:focus { outline: none; } /* Anker-/Fokussprünge nicht unter die klebende Leiste rutschen lassen. */ html { scroll-padding-top: 4.5rem; } /* ---- Sticky Leiste --------------------------------------------------- */ .vita-switch__bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; /* Anker + Schalter zusammen links, nicht an die Kante */ gap: 0.15rem 0.85rem; margin-block-start: 0; /* bündig am Gruppenkopf, ohne blockGap-Versatz */ /* Deckendes Pergament wie das Band, in dem die Leiste sitzt, damit Text beim Scrollen sauber dahinter verschwindet. */ background-color: var(--wp--preset--color--pergament, #f0ece8); padding-block: 0.7rem; } /* Dezenter Hinweis aufs Kleben: Haarlinie + sehr weicher Schatten, nur im gestickten Zustand (per Sentinel/IntersectionObserver gesetzt). */ .vita-switch__bar.is-stuck { box-shadow: 0 1px 0 rgba(24, 13, 5, 0.10), 0 8px 18px -14px rgba(24, 13, 5, 0.55); } .vita-switch__sentinel { height: 1px; margin: 0; } /* Bleibender Sektions-Anker (Label, KEINE Überschrift — die echten H2 stehen im Inhalt jeder Fassung). Display-Schrift, kompakt, damit die Leiste niedrig bleibt und die inhaltliche H2 darunter führend bleibt. */ .vita-switch__title { font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif); font-size: clamp(1.4rem, 3.5vw, 1.7rem); font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--tinte, #180d05); } /* Dezenter Trenner zwischen Anker und Schalter (Mittelpunkt wie im Footer). */ .vita-switch__sep { color: var(--wp--preset--color--sandstein, #5a4a3e); opacity: 0.55; font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif); line-height: 1; } /* ---- Inline-Umschalter (leiser Text-Switch, kein gefüllter CTA) ------ */ .vita-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--wp--preset--font-family--fira-sans, sans-serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; color: var(--wp--preset--color--walnuss, #3c1400); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(149, 90, 35, 0.4); /* Kupfer, dezent */ text-underline-offset: 0.25em; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .vita-toggle:hover, .vita-toggle:focus-visible { color: var(--wp--preset--color--kupfer, #955a23); text-decoration-color: var(--wp--preset--color--kupfer, #955a23); } .vita-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--kupfer, #955a23); outline-offset: 3px; border-radius: 2px; } /* Kupfer-Chevron als Affordance: zeigt nach rechts und dreht beim Wechsel auf die Langfassung (aria-expanded="true"). */ .vita-toggle::after { content: ""; flex: 0 0 auto; width: 0.42em; height: 0.42em; border-right: 2px solid var(--wp--preset--color--kupfer, #955a23); border-bottom: 2px solid var(--wp--preset--color--kupfer, #955a23); transform: rotate(-45deg); transition: transform 0.2s ease; } .vita-toggle[aria-expanded="true"]::after { transform: rotate(135deg); } /* Bewegungsreduktion respektieren. */ @media (prefers-reduced-motion: reduce) { .vita-toggle, .vita-toggle::after, .vita-switch__bar.is-stuck { transition: none; } } /* ========================================================================= * Offset-Bilder im Anschnitt ("offset images") * * Redaktioneller Workflow: * 1. Auf die VOLLBREITE (alignfull) Gruppe, die den Text umschließt, die * Klasse "has-offset-images" setzen (Block-Sidebar -> Erweitert -> * Zusätzliche CSS-Klasse(n)). Diese Gruppe ist der Anker. * 2. Im Text an die GEWÜNSCHTE HÖHE einen Bild-Block einfügen und ihm * den Block-Style "Offset links" bzw. "Offset rechts" geben * (Block-Sidebar -> Stile). Registriert in functions.php. * * Vertikale Position = Einfügestelle im Fluss (top:auto, statische Pos.). * Horizontal sitzt das Bild am Fensterrand und ragt ~10% seiner eigenen * Breite ins Off (gestalterischer Anschnitt). * * Anker-Mathematik: Die alignfull-Gruppe ist viewport-breit, trägt aber * has-global-padding. Für ein absolut positioniertes Kind ist der Bezug * die PADDING-Box -> left:0 läge sonst um das globale Padding nach innen * versetzt. Die negative Margin in Höhe von --wp--style--root--padding-* * neutralisiert genau dieses Padding, sodass left/right:0 am echten * Fensterrand sitzt. translateX(±10%) rechnet relativ zur Bildbreite und * skaliert dadurch automatisch mit clamp()-Größe und Viewport mit. * * Scrollbalken: overflow-x:clip auf dem Anker schneidet die ins Off * ragenden 10% ab, ohne (anders als overflow:hidden) einen Scroll- * Container zu erzeugen oder die vertikale Sichtbarkeit zu beschneiden. * * Höhen-Kollaps (absolute Bilder zählen nicht zur Gruppenhöhe) liegt * bewusst in redaktioneller Hand — genügend Textlänge neben dem Bild. * ====================================================================== */ /* Anker-Kontext: nur auf eine alignfull-Gruppe anwenden. */ .has-offset-images { position: relative; /* Bezug für die absolut positionierten Bilder */ overflow-x: clip; /* schneidet den Anschnitt ab, kein X-Scrollbalken */ } /* Text in einer INNEREN Gruppe (z. B. alignwide) halten und das Offset-Bild dennoch an der äußeren, vollbreiten Bahn ankern. Problem: constrained Gruppen sind per Core-Regel :where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative} — eine innere alignwide-Textgruppe würde damit selbst zum Bezug, und der Anschnitt würde an IHREM (schmaleren) Rand abgeschnitten. Lösung: Die Gruppe, die ein Offset-Bild enthält, auf position:static setzen, damit der Bezug die äußere .has-offset-images-Bahn bleibt. :has() trifft gezielt NUR solche Gruppen — andere positionierte Geschwister (z. B. die sticky Vita-Leiste) bleiben relative/sticky und damit unberührt. Workflow dafür: äußere Gruppe = Volle Breite + has-offset-images, darin eine innere Gruppe = Weite Breite (alignwide) mit dem Text, das Bild in die innere Gruppe. (Siehe Geometrie-Hinweis unten.) */ .has-offset-images .wp-block-group:has(.is-style-offset-left, .is-style-offset-right) { position: static; } /* Geometrie-Hinweis: Der Anschnitt-Effekt braucht seitlichen Freiraum neben dem Text. Bei schmaler Textspalte (constrained, contentSize 620px) ist der Gutter groß genug. Bei alignwide-Text (bis 1280px) bleibt fast nur das globale Padding als Gutter — ein großes Bild überlappt dann den Text (absolute Bilder verdrängen keinen Textfluss). Dagegen sichert der automatische Gutter-Deckel weiter unten ab. */ /* Automatische Überlapp-Absicherung: max-width = tatsächlich vorhandener seitlicher Gutter, damit das Bild nie in die Textspalte läuft (egal welche Breite im Editor gesetzt ist — max-width schlägt die Inline-width). Der Gutter hängt von der TEXTBREITE ab — und die hängt am LAYOUT, nicht an der Ausrichtung der umgebenden Gruppe: - is-layout-constrained deckelt Kinder auf contentSize (620px), auch in einer alignwide-/alignfull-Gruppe. Das ist der Normalfall (lesbare Zeilenlänge). Die echte Spaltenbreite ist dann contentSize, NICHT die Gruppenbreite — sonst bliebe rechts unnötig Whitespace und das Bild würde grundlos klein gedeckelt. - is-layout-flow lässt Kinder die volle Gruppenbreite füllen → dann ist die Textbreite ~wideSize. Das Bild kann die eigene Spaltenbreite nicht auslesen, daher reichen wir sie als --offset-col-max über Vererbung herein: - Default: contentSize (constrained Text — deckt Vita wie alignwide-Sektion mit normalem Text ab). - In einer is-layout-flow-Gruppe: wideSize. Gutter = max(globales Padding, (Viewport - Spaltenbreite) / 2). Hinweis: Bei LINKS ausgerichtetem (justification-left) schmalem Text rechnet die Formel konservativ wie bei zentrierter Spalte — das Bild füllt bis kurz vor die zentrierte Position, ein kleiner Rest bleibt frei. Exakt bis zur Textkante zu füllen ginge nur, wenn das Bild die reale Textkante auslesen könnte (in CSS nicht zuverlässig über alle Breakpoints). */ .has-offset-images { --offset-col-max: var(--wp--style--global--content-size); } .has-offset-images .is-layout-flow { --offset-col-max: var(--wp--style--global--wide-size); } /* Offset-Bilder (Block-Style "Offset links/rechts" am Core-Bild-Block). Bewusst unter .has-offset-images gescoped: ohne gesetzten Anker bleibt der Bild-Block im normalen Fluss — der Style kann nicht "aus Versehen" irgendwo Bilder aus dem Layout reißen. */ .has-offset-images .wp-block-image.is-style-offset-left, .has-offset-images .wp-block-image.is-style-offset-right { position: absolute; top: auto; /* vertikale Position = Einfügestelle im Textfluss */ width: fit-content; /* Fallback ohne Editor-Breite; Editor-Inline-width gewinnt */ /* Obergrenze = vorhandener Gutter (siehe oben) — verhindert Textüberlapp. */ --offset-gutter: max(var(--wp--style--root--padding-right, 0px), (100vw - var(--offset-col-max)) / 2); max-width: var(--offset-gutter); margin: 0; /* Gleicher Abstand nach oben wie zwischen Absätzen (blockGap), damit das Bild die Satzlinie hält — greift auch im Anschnitt, weil top:auto die statische Position inkl. margin-block-start nutzt, und ebenso im Fluss. */ margin-block-start: var(--wp--style--block-gap, 1.2rem); z-index: 1; /* unter der sticky Vita-Leiste (z-index:5) */ } .has-offset-images .wp-block-image.is-style-offset-left { left: 0; /* Padding der Ankergruppe neutralisieren -> Anker = Fensterrand. Fallback 0px, falls die Gruppe kein has-global-padding trägt. */ margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)); transform: translateX(-10%); /* 10% der Bildbreite links ins Off */ } .has-offset-images .wp-block-image.is-style-offset-right { right: 0; margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)); transform: translateX(10%); /* 10% der Bildbreite rechts ins Off */ } .has-offset-images .wp-block-image.is-style-offset-left img, .has-offset-images .wp-block-image.is-style-offset-right img { display: block; width: 100%; height: auto; border-radius: 12px; /* abgerundete Ecken */ } /* Mobil/Tablet: zurück in den Fluss an der Einfügestelle. 1024px, weil erst darüber genug Gutter (Viewport > 620px-Textspalte) existiert, damit die 90% sichtbare Bildbreite die Spalte nicht überlappt. Darunter ist der Anschnitt nicht sinnvoll darstellbar. */ @media (max-width: 1024px) { .has-offset-images .wp-block-image.is-style-offset-left, .has-offset-images .wp-block-image.is-style-offset-right { position: static; max-width: 100%; /* im Fluss NICHT auf den Gutter schrumpfen — das Bild steht in der Spalte und darf seine volle Breite haben */ margin-inline: 0; /* Anker-Offset zurücksetzen; margin-block-start (blockGap) bleibt aus der Basisregel erhalten */ transform: none; } } /* ========================================================================= * Bildergalerie — abgerundete Ecken * * Übernimmt die 12px-Rundung der Offset-Bilder auch für die Bilder im * Core-Galerie-Block. Selektor zielt aufs , daher greift es auch bei * "is-cropped" (object-fit: cover) — die Rundung clippt das Bild korrekt, * und ebenso bei verlinkten Galerie-Bildern (Lightbox / Link zur Datei). * ====================================================================== */ .wp-block-gallery figure.wp-block-image img { border-radius: 12px; } /* ========================================================================= * Zitat-Block (core/quote) * * Quellenangabe (cite) rechtsbündig. Dazu eine softe, hängende * Anführungs-Marke oben links in der Display-Schrift (Vesper Libre), in * Kupfer mit niedriger Deckkraft — hebt das Zitat ruhig hervor, ohne * "Klischee-Lautstärke". Liegt per z-index unter dem Text, damit nichts * überdeckt wird; pointer-events:none, damit es nichts blockiert. * * Hinweis: greift auf ALLE core/quote-Blöcke. Soll nur ein einzelnes Zitat * so aussehen, den Block mit einer eigenen CSS-Klasse versehen und die * Selektoren entsprechend einschränken. Für deutsche Tiefstellung das * Zeichen \201C (“) gegen \201E („) tauschen. */ .wp-block-quote { position: relative; } .wp-block-quote::before { content: "\201C"; position: absolute; left: -0.05em; font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif); font-size: 4.5rem; line-height: 1; color: var(--wp--preset--color--kupfer, #955a23); opacity: 0.18; pointer-events: none; z-index: 0; } .wp-block-quote > * { position: relative; z-index: 1; } .wp-block-quote p { font-weight: 200; /* Fira Sans ExtraLight (im Theme geladen — kein Faux-Light) */ font-size: 22px; } .wp-block-quote cite { display: block; text-align: right; font-weight: 400; /* Quellenangabe bewusst kräftiger als der Zitattext */ } /* ========================================================================= * Karten-Gruppen mit Logo-Wasserzeichen (.av-card) * * Zweck: Die abgerundeten "Engagement"-Boxen per EINER Klasse herstellen, * statt pro Box manuell Eckenradius + Hintergrundbild zu setzen. * * Workflow (alles im Feld "Erweitert -> Zusaetzliche CSS-Klasse(n)" der * Group, mehrere Klassen mit Leerzeichen getrennt): * 1. "av-card" -> runde Ecken + Wasserzeichen, an. * 2. Hintergrundfarbe -> wie gewohnt im Farb-Panel waehlen. Die * Klasse setzt nur eine Default-Farbe * (Elfenbein) per :where() mit Spezifitaet 0, * jede gewaehlte has-*-background-color * gewinnt also problemlos. * 3. Position des Zeichens -> wm-tl oben links wm-tr oben rechts * wm-bl unten links wm-br unten rechts * wm-mid Mitte (Default ohne Klasse: br) * 4. Groesse (optional) -> wm-sm (klein) wm-lg (gross) * 5. Heller Schnitt fuer dunkle Boxen (z. B. Espresso) -> wm-light * * Das alte manuelle Hintergrundbild (background-image mit der uploads-URL) * kann entfallen -> auch migrationssicher, weil hier ein RELATIVER Asset- * Pfad ohne Domain steht. * * Technik: Das Wasserzeichen ist ein ::after, dessen FORM per CSS-mask aus * assets/img/av-logo.svg kommt; die FARBE liefert background-color, ist * also frei einfaerbbar. overflow:hidden clippt es an den runden Ecken. * * Feinjustage per Custom Property (Block-Style-Feld "Zusaetzliche CSS" gibt * es nicht fuer Vars — daher global hier oder via inline style am Block): * --av-wm-opacity Deckkraft (Default 0.07) * --av-wm-color Toenung (Default Tinte) * --av-wm-size Breite des Zeichens relativ zur Box (Default 62%) * --av-wm-inset Randabstand der Ankerecke (Default 1.25rem) * --av-wm-bleed wie weit das Zeichen in den Anschnitt ragt (Default 15%) * -> Richtung folgt der Positions-Klasse (wm-tl ragt oben * links raus usw.). Prozent = Anteil der Zeichengroesse, * per overflow:hidden der Karte sauber abgeschnitten. * ====================================================================== */ .av-card { position: relative; border-radius: 12px; overflow: hidden; padding: var(--wp--preset--spacing--20); /* WP-Abstand Stufe "2" — vorher pro Box manuell */ --av-wm-opacity: 0.1; --av-wm-color: var(--wp--preset--color--tinte, #180d05); --av-wm-size: 120%; --av-wm-inset: 0; --av-wm-bleed: 15%; } /* Default-Hintergrund mit Spezifitaet 0 -> vom Farb-Panel ueberschreibbar. */ :where(.av-card) { background-color: var(--wp--preset--color--pergament); } /* Inhalt ueber dem Wasserzeichen halten. */ .av-card > * { position: relative; z-index: 1; } /* Das Wasserzeichen selbst (Form per mask, Farbe per background-color). */ .av-card::after { content: ""; position: absolute; z-index: 0; width: var(--av-wm-size); aspect-ratio: 300 / 159; /* = viewBox des Wasserzeichen-SVG */ background-color: var(--av-wm-color); opacity: var(--av-wm-opacity); -webkit-mask-image: url("assets/img/av-logo-wasserzeichen.svg"); mask-image: url("assets/img/av-logo-wasserzeichen.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; /* Default-Position: unten rechts, mit Bleed in den Anschnitt. */ right: var(--av-wm-inset); bottom: var(--av-wm-inset); transform: translate(var(--av-wm-bleed), var(--av-wm-bleed)); } /* ---- Positions-Modifier (setzen je zwei Seiten, Rest auf auto) -------- */ /* Anker + Bleed in Richtung der benannten Ecke. Bei --av-wm-size > 100% ragt das Zeichen so an der GENANNTEN Ecke heraus (nicht an der gegen- ueberliegenden). translate() rechnet in % der Zeichengroesse. */ .av-card.wm-tl::after { top: var(--av-wm-inset); left: var(--av-wm-inset); right: auto; bottom: auto; transform: translate(calc(-1 * var(--av-wm-bleed)), calc(-1 * var(--av-wm-bleed))); } .av-card.wm-tr::after { top: var(--av-wm-inset); right: var(--av-wm-inset); left: auto; bottom: auto; transform: translate(var(--av-wm-bleed), calc(-1 * var(--av-wm-bleed))); } .av-card.wm-bl::after { bottom: var(--av-wm-inset); left: var(--av-wm-inset); right: auto; top: auto; transform: translate(calc(-1 * var(--av-wm-bleed)), var(--av-wm-bleed)); } .av-card.wm-br::after { bottom: var(--av-wm-inset); right: var(--av-wm-inset); left: auto; top: auto; transform: translate(var(--av-wm-bleed), var(--av-wm-bleed)); } .av-card.wm-mid::after { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); } /* ---- Groessen-Modifier ------------------------------------------------ */ .av-card.wm-sm { --av-wm-size: 80%; } .av-card.wm-lg { --av-wm-size: 140%; } /* ---- Heller Schnitt fuer dunkle Boxen --------------------------------- */ .av-card.wm-light { --av-wm-color: var(--wp--preset--color--weiss, #fff); --av-wm-opacity: 0.30; } /* ---- Engere Abstaende innerhalb der Karten --------------------------- * Halbiert den blockGap VOR Absaetzen und Ueberschriften (h2-h4) innerhalb * einer .av-card. Greift ueber den von WP generierten margin-block-start * (:where(), Spezifitaet 0); :not(:first-child) laesst das erste Element * wie gehabt buendig oben sitzen. */ .av-card > :is(p, h2, h3, h4):not(:first-child) { margin-block-start: calc(var(--wp--style--block-gap, 1.2rem) / 2); } /* ========================================================================= * Bilder aus der Spalte nach aussen ausbrechen lassen (.col-bleed-*) * * Zweck: In einem Columns-Block (z. B. Engagement) darf ein Bild ueber die * Spaltenkante hinaus nach AUSSEN ragen — linke Spalte nach links, rechte * Spalte nach rechts. Die Innenkante (Richtung Text) bleibt buendig. * * Workflow: * 1. Auf die VOLLBREITE Sektions-Gruppe (die alignfull-Gruppe um die * Spalten) die Klasse "has-bleed" setzen — clippt den Ueberstand am * Sektionsrand und verhindert einen horizontalen Scrollbalken * (clip statt hidden: erzeugt keinen Scroll-Container). * 2. Auf den Bild-Block in der Spalte -> Erweitert -> Zusaetzliche CSS- * Klasse(n): * col-bleed-left ragt nach links ins Off (fuer linke Spalte) * col-bleed-right ragt nach rechts ins Off (fuer rechte Spalte) * Optional weiter/enger: col-bleed-lg / col-bleed-sm * * Technik: Das Bild wird um --bleed breiter als die Spalte und per * negativer Margin auf der Aussenseite herausgezogen. --bleed ist in vw, * skaliert mit dem Viewport. Unter 1024px geht das Bild zurueck in den * normalen Fluss (darunter ist kein Aussen-Gutter mehr da). * ====================================================================== */ .has-bleed { overflow-x: clip; } .col-bleed-left, .col-bleed-right { --bleed: 6vw; max-width: none; /* size-/Core-Deckel aushebeln */ width: calc(100% + var(--bleed)); } .col-bleed-left { margin-left: calc(-1 * var(--bleed)); } .col-bleed-right { margin-right: calc(-1 * var(--bleed)); } .col-bleed-sm { --bleed: 3vw; } .col-bleed-lg { --bleed: 10vw; } /* Bild fuellt die (nun breitere) Figure-Breite. */ .col-bleed-left img, .col-bleed-right img { width: 100%; height: auto; } @media (max-width: 1024px) { .col-bleed-left, .col-bleed-right { width: 100%; margin-left: 0; margin-right: 0; } } /* ====================================================================== * YouTube-Consent-Platzhalter (Cookiebot) * * Wird per embed_oembed_html-Filter (functions.php, anna_youtube_cookiebot) * hinter jedes geblockte YouTube-iframe gesetzt. Cookiebot blendet das * Element über .cookieconsent-optout-marketing automatisch aus, sobald * Marketing-Consent vorliegt — hier nur die Optik bis dahin. * ====================================================================== */ .av-video-optout { padding: 1rem; background: var(--wp--preset--color--pergament); border: 1px solid var(--wp--preset--color--sandstein); text-align: center; font-size: .9rem; } /* ---------------------------------------------------------------------- * Poster-Variante: selbst gehostetes Thumbnail als Click-to-load-Teaser. * * Der Filter setzt das Poster als --av-poster (Mediathek-Bild, Dateiname = * YouTube-ID) und ergaenzt Play-Button + Consent-Band. * * 16:9-Rahmen am Wrapper: an der Provider-Klasse .wp-block-embed-youtube * verankert (immer vorhanden, von Cookiebot nie angefasst) plus dem Poster * als Fallback. BEWUSST NICHT an wp-embed-aspect-16-9 — die Klasse vergibt * WordPress nur, wenn die oEmbed-Antwort Dimensionen liefert; fehlt sie, * griffen Rahmen UND border:0 nicht → Wrapper kollabiert (Play-Button bzw. * Video sprang nach oben links) UND der UA-Default-Rahmen wurde als „Rand" * sichtbar. Mit dem Provider-Anker passiert das nicht mehr. * * Frueher hing der Rahmen am Platzhalter-Kind allein — sobald Cookiebot den * nach erteiltem Consent entfernt/ausblendet, kollabierte der Wrapper. Der * Provider-Anker bleibt pre- wie post-Consent stabil. * * border:0 am iframe unterdrueckt den UA-Default-Rahmen. * -------------------------------------------------------------------- */ .wp-block-embed-youtube .wp-block-embed__wrapper, .wp-block-embed__wrapper:has(> .av-video-optout--poster) { position: relative; aspect-ratio: 16 / 9; } .wp-block-embed-youtube .wp-block-embed__wrapper > iframe, .wp-block-embed__wrapper:has(> .av-video-optout--poster) > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Poster fuellt den Rahmen; ueberschreibt die Text-Fallback-Optik oben. KEIN flex-Centering: Cookiebot setzt beim Wieder-Einblenden des Platzhalters (Marketing verweigert) ein inline display:block, das ein hier gesetztes display:flex ueberschreiben wuerde — der Play-Button wird stattdessen absolut zentriert (siehe unten), unabhaengig vom display. */ .av-video-optout--poster { position: absolute; inset: 0; padding: 0; border: 0; background: var(--av-poster) center / cover no-repeat; } /* Leichte Abdunklung fuer Lesbarkeit auf hellen Postern (kein Extra-Element). */ .av-video-optout--poster::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); transition: background .2s ease; } .av-video-optout--poster:hover::before { background: rgba(0, 0, 0, .04); } /* Play-Button: echtes YouTube-SVG aus der Mediathek (120px), absolut zentriert. Absolut statt via Flex-Parent, damit die Zentrierung unabhaengig vom display der Poster-Kachel ist (Cookiebot kann es nach „Allow Selection" auf block setzen). */ .av-video-optout__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 0; border: 0; background: none; line-height: 0; /* kein Inline-Bild-Spalt unter dem SVG */ cursor: pointer; transition: transform .15s ease; } .av-video-optout__yt { display: block; width: 80px; height: auto; } /* Fallback (SVG nicht in Mediathek gefunden): schlichtes Dreieck. */ .av-video-optout__play > svg { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); } .av-video-optout__play:hover { transform: translate(-50%, -50%) scale(1.06); } .av-video-optout__play:focus-visible { outline: 2px solid var(--wp--preset--color--kupfer); outline-offset: 4px; border-radius: 4px; } /* Consent-Band unten ueber dem Poster, alpha-0.7-Weiss. */ .av-video-optout__note { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; margin: 0; padding: .55em .9em; background: rgba(255, 255, 255, .7); color: var(--wp--preset--color--espresso); text-align: center; font-size: .82rem; line-height: 1.35; } .av-video-optout__note a { color: inherit; text-decoration: underline; } /* Maus-Fokus-Ring unterdruecken: WP-Core setzt via :where(.wp-site-blocks :focus) einen Outline auch bei Mausklick. Play-Button und Link oeffnen den Cookiebot-Dialog und behalten den Fokus — der Ring bliebe sonst als „Rand" stehen. Tastatur-Fokus (:focus-visible) bleibt fuer A11y erhalten. */ .av-video-optout__play:focus:not(:focus-visible), .av-video-optout__note a:focus:not(:focus-visible) { outline: none; } /* ========================================================================= * Flache Seiten (Datenschutz, Impressum …): vertikaler Rhythmus * * Der post-content-Block trägt blockGap:0 (im Site-Editor-Template gesetzt) — * gewollt für die gestalteten Seiten, deren Sektionen dadurch bündig liegen * und ihre Abstände selbst steuern. WP gibt das als Inline-Regel aus: * .wp-container-core-post-content-is-layout-… > * { margin-block-start:0 } * .wp-container-core-post-content-is-layout-… > * + * { margin-block-start:0 } * * Auf flachen Seiten liegen Überschriften und Absätze DIREKT in post-content — * dort schluckt die 0 jeden Abstand. Hier den Rhythmus nur für diese * Text-Direktkinder zurückholen. Gruppen/Sektionen (.wp-block-group) sind NICHT * in der Auswahl und bleiben unberührt — die Designseiten ändern sich also nicht. * * Spezifität: die doppelte Klasse .entry-content.wp-block-post-content (0,2,0) * schlägt die inline generierte Container-Regel (0,1,0); :where(…) hält die * Element-Liste spezifitätsneutral. Erstes Kind bleibt bündig oben. * ====================================================================== */ .entry-content.wp-block-post-content > :where(p, ul, ol, dl, table, figure, blockquote, h1, h2, h3, h4, h5, h6) { margin-block-start: var(--wp--style--block-gap, 0.8rem); } /* Überschriften etwas mehr Luft nach oben für klare Gliederung. */ .entry-content.wp-block-post-content > :where(h2, h3, h4) { margin-block-start: 2.25rem; } /* Erstes Element bündig am oberen Rand von post-content (0,3,0 schlägt beide). */ .entry-content.wp-block-post-content > :first-child { margin-block-start: 0; } /* ========================================================================= * Sprachumschalter als Flaggen (Polylang-Navigation-Switcher) * * Der Polylang-Sprachumschalter rendert Menü-Items mit stabilen Klassen * .lang-item-de / .lang-item-en. Statt der Textlabels "DE"/"EN" zeigen wir * kleine, gleich große Flaggen-Chips (assets/img/flag-de.svg, flag-gb.svg). * Der Linktext bleibt per text-indent im DOM — Screenreader lesen weiter "DE"/"EN". * * Nebeneinander: Das Menü ist eine Flex-Spalte, die zwei Items sind normalerweise * gestapelt. lang-flags.js fasst sie in einen Zeilen-Wrapper (li > ul.lang-switch-row), * der hier als rechtsbündige Flex-Reihe ausgelegt wird. * * Gleich groß: identische Box + background-size:cover füllt beide randlos. Der * Union Jack (2:1) wird dabei an den Seiten minimal beschnitten, die deutsche * Trikolore (5:3) praktisch nicht — beide wirken dadurch gleich groß. * * Bewusst KEINE Emoji-Flaggen: Windows rendert 🇩🇪/🇬🇧 nur als Buchstaben. * Pfade relativ (migrationssicher, keine Domain). * ====================================================================== */ .lang-switch-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 0; padding: 0; list-style: none; } .lang-item-de > a.wp-block-navigation-item__content, .lang-item-en > a.wp-block-navigation-item__content { display: inline-block; width: 34px; height: 20px; padding: 0; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); /* dezenter Rahmen für helle Flaggenanteile */ text-indent: -9999px; /* Label visuell aus, für Screenreader im DOM erhalten */ white-space: nowrap; overflow: hidden; vertical-align: middle; } .lang-item-de > a.wp-block-navigation-item__content { background-image: url("assets/img/flag-de.svg"); } .lang-item-en > a.wp-block-navigation-item__content { background-image: url("assets/img/flag-gb.svg"); } /* ========================================================================= * Navigations-Gruppenüberschriften (.nav-group) * * Custom-Link-Einträge mit url="#" und Klasse "nav-group" gliedern das * Overlay-Menü in Sektionen (Konzerte / Über mich / Musik weitergeben). * Sie sind KEINE Links: Maus über pointer-events aus; href entfernt und * tabindex/role gesetzt in functions.php (anna_neutralize_nav_group_links), * damit Tastatur und Screenreader sie als Label statt als toten #-Link sehen. * * Optik: leises, gesperrtes Label in Versalien, kleiner und gedämpfter als die * Menüpunkte, mit mehr Luft nach oben (trennt von der vorigen Gruppe) als nach * unten (hält Überschrift + ihre Punkte zusammen). * ====================================================================== */ .wp-block-navigation .nav-group > .wp-block-navigation-item__content { pointer-events: none; cursor: default; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--sandstein, #5a4a3e); } /* Mehr Abstand über der Gruppe (addiert sich zum Flex-Gap des Menüs) — * trennt sie von der vorigen Sektion, während der normale Gap darunter * Überschrift und erste Punkte zusammenhält. Zusätzlich eine Trennlinie in * der Label-Farbe (Sandstein) über die volle Menübreite. * * width:100% macht das li voll breit; da das Menü rechtsbündig ist, hält * align-items:flex-end das Label am rechten Rand (sonst rutscht es nach links). * padding-block-end gibt dem Labeltext etwas Luft zur Linie. */ .wp-block-navigation .nav-group { margin-block-start: 1rem; width: 100%; align-items: flex-end; border-bottom: 1px solid var(--wp--preset--color--sandstein, #5a4a3e); padding-block-end: 0.3rem; } /* ========================================================================= * Hörproben-Seite — Video-Karten (.av-videos) * * Alle Video-Hörproben liegen auf EINER Seite (Inhalt als Block-Markup direkt * in der Seite, kein Theme-Muster), in vier Sektionen gegliedert. Layout und * Abstände macht der Columns-Block + blockGap (editor-native) — hier nur die * Kartentypografie. * * Videos sind core/embed-YouTube-Blöcke — das DSGVO-Gating (Cookiebot, * nocookie-Domain, Poster-Teaser) kommt AUTOMATISCH über den * embed_oembed_html-Filter (functions.php, anna_youtube_cookiebot). * ====================================================================== */ /* ---- Video-Karten: Styling über die Elternklasse .av-videos ----------- * EINE Hook-Klasse .av-videos auf die Gruppe setzen, die die ganze Sektion * umfasst (Überschrift, Intro und Karten-Spalten). Adressiert werden gezielt: * .av-videos :where(h3,h4) → Kartentitel * .av-videos h3 + p → Meta-Zeile (Absatz direkt unter dem Titel) * .av-videos h2 + p → Intro-Absatz (direkt unter der Sektions-H2) * So bleiben Sektions-H2 und Karten-H3 getrennt, ohne Einzelklassen pro * Element. Layout/Abstände macht der Columns-Block + blockGap. */ /* Titel (Vesper Libre). Feste 20px statt rem: 1.15rem ≈ 18,4px erzeugte krumme Subpixel, dann franst Vesper aus. Ganze Pixel rendern sauberer. */ .av-videos :where(h3, h4) { font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif); font-size: 20px; font-weight: 500; line-height: 1.3; } /* Meta-Zeile = Absatz direkt nach dem Titel (h3): Fira Sans, dezent, eng an den Titel gekoppelt (6px nach oben). */ .av-videos h3 + p { font-family: var(--wp--preset--font-family--fira-sans, sans-serif); font-size: var(--wp--preset--font-size--small, 0.9rem); line-height: 1.4; color: var(--wp--preset--color--sandstein, #5a4a3e); margin-block-start: 2px; } /* Intro = Absatz direkt nach der Sektions-Überschrift (h2). Testweise: normale Body-Farbe (nicht gesetzt = erbt den Standard), 18px, fett. */ .av-videos h2 + p { font-size: 18px; font-weight: 700; margin-block-start: .6rem; color: var(--wp--preset--color--text-color, #202124); } /* Video mit runden Ecken wie die übrigen Bilder im Theme. */ .av-videos .wp-block-embed { border-radius: 12px; overflow: hidden; }