/* ========================================================================== Block „Lucyris Spalten" Aufbau: .wp-block-lucyris-split Raster > * zwei oder drei Felder Die Felder sind seit 2026-09-21 gewöhnliche `core/group`-Blöcke. Die Regeln sprechen deshalb die direkten Kinder an und nicht mehr eine eigene Klasse; `.wp-block-lucyris-split-spalte` kommt nur noch dort vor, wo es um den Vorgängerblock geht (Altinhalte aus Revisionen). Schemata: .is-schema-zwei A | B .is-schema-abc A B / A C – das erste Feld läuft über beide Zeilen, rechts stehen zwei Felder übereinander („Mehrwert") Die Regler schreiben Custom Properties in den Inline-Stil: --aufteilung Breite der linken Spalte --spalte-rechts Breite der rechten Spalte (fehlt = Rest) --mehr-text Beschriftung der Hover-Leiste Hintergrundfarbe des Rasters, Innenabstand und Mindesthoehe der Felder sowie der Abstand zwischen den Feldern (`gap`) kommen aus der Standard-Steuerung und stehen als gewoehnliche Inline-Stile im Markup. Animation und Hover hängen an Klassen am Raster, nicht an den Kacheln. `ist-offen` setzt `split-frontend.js` beim Klick auf eine aufklappbare Zeile (`is-hover-zeile`). ========================================================================== */ .wp-block-lucyris-split { --aufteilung: 50%; } .wp-block-lucyris-split { display: grid; grid-template-columns: var(--aufteilung, 50%) var(--spalte-rechts, 1fr); align-items: stretch; } /* A B / A C: linkes Feld über beide Zeilen, die übrigen füllen rechts auf. */ .wp-block-lucyris-split.is-schema-abc > *:first-child { grid-row: 1 / span 2; } .wp-block-lucyris-split > * { position: relative; /* Anker der Hover-Leiste */ min-width: 0; /* sonst sprengt langer Text das Raster */ /* Das Raster streckt die Kachel auf die Zeilenhoehe. Hat sie ein Seitenverhaeltnis und ist die Zeile hoeher, als es zur Spaltenbreite passt, leitet der Browser aus der festen Hoehe eine groessere Breite ab und die Kachel laeuft aus ihrer Spalte in die Nachbarspalte. */ max-width: 100%; } /* Geklippt wird nur dort, wo die Leiste „Mehr anzeigen" unterhalb des Randes wartet. Sonst fällt die Klippkante mit der Unterkante des Kastens zusammen, beide auf gebrochenen Pixelpositionen — dieselbe Rundung, ein sichtbarer Saum. */ .wp-block-lucyris-split.is-hover-mehr > * { overflow: hidden; } /* Der Vorgängerblock hatte seinen Innenabstand aus dieser Datei. Gruppen tragen ihn als eigene Einstellung; die Migration hat ihn dort eingetragen. */ .wp-block-lucyris-split > .wp-block-lucyris-split-spalte { padding: var(--wp--preset--spacing--50, 2.5rem); } /* ========================================================================== Blockstil „Inhalt mittig" (`core/group`) Eine Kachel wird auf die Höhe der Zeile gestreckt; ihr Inhalt beginnt dann oben. Dieser Stil rückt ihn in die Mitte. `align-content` wirkt seit Chrome 123, Firefox 125 und Safari 17.4 auch auf Blockcontainer; ältere Browser ignorieren die Zeile, der Inhalt bleibt oben. Bewusst nicht über ein Flex-Layout: dort schrumpft ein Kasten mit Hintergrundfarbe auf seine Textbreite, weil `align-items` für die senkrechte Ausrichtung auf `flex-start` steht und `stretch` nur bei waagerechter Ausrichtung angeboten wird (`block-supports/layout.php`). ========================================================================== */ .wp-block-group.is-style-lucyris-mitte { align-content: center; } /* ========================================================================== Textabstände in den Kacheln Der Vorgängerblock war ein `div` ohne Layout. Überschrift und Absätze behielten darin ihre normalen Abstände (1em, vom Browser). `core/group` bringt ein Flow-Layout mit, und dessen Regel `:where(.is-layout-flow) > * { margin-block-start: 0 }` räumt die weg – nach der Migration klebte der Text unter der Überschrift. Die Regel hier stellt den vorherigen Zustand wieder her. `:not([class*="wp-container-"])` ist der Schalter: sobald an einer Kachel ein Blockabstand eingestellt wird, vergibt WordPress dafür eine eigene Container-Klasse, diese Regel greift nicht mehr und der eingestellte Wert gilt. Die Vorgabe lässt sich also überschreiben, ohne sie zu kennen. `:not(div)` bildet die Browser-Vorgaben nach, die hier wiederhergestellt werden: Überschriften, Absätze, Listen und Zitate haben 1em Abstand, ein `div` hat keinen. Ohne diese Einschränkung bekäme eine Kachel in einer Kachel einen Abstand, den sie vorher nicht hatte. ========================================================================== */ .wp-block-lucyris-split .wp-block-group:not([class*="wp-container-"]) > :not(div) { margin-block: 1em; } /* Überschriften erben die Textfarbe des Feldes. Ohne das setzen die globalen Stile ihre eigene Farbe und eine helle Überschrift auf dunklem Feld bleibt dunkel. */ .wp-block-lucyris-split > .has-text-color :where( h1, h2, h3, h4, h5, h6 ) { color: inherit; } /* ========================================================================== Hintergrundbild je Feld – nur noch für den Vorgängerblock Gruppen bringen ihr Hintergrundbild seit WordPress 6.5/6.7 selbst mit, samt Größe, Fokuspunkt, Wiederholung und fixiertem Scrollen. Die Regeln hier gelten nur `.wp-block-lucyris-split-spalte`, also Altinhalten. Die Bild-URL reist als Custom Property im Inline-Stil mit, die Darstellung hängt an der Klasse: .is-bild-fuellen auf Kachelgröße gebracht, beschneidet (cover) .is-bild-voll ganz sichtbar, Kachel nimmt die Form des Bildes an .is-bild-original Originalgröße, mittig, nicht gekachelt Eine über die Standard-Steuerung gesetzte Hintergrundfarbe bleibt darunter sichtbar, solange das Bild sie nicht überdeckt. Zum Unterschied zwischen `fuellen` und `voll`: `cover` vergrößert das Bild, bis die Kachel gefüllt ist, und schneidet den Überstand ab. `voll` setzt `contain` und zusätzlich das Seitenverhältnis des Bildes als `aspect-ratio` auf die Kachel. Damit wächst die Rasterzeile auf die Höhe, die das Bild bei der gegebenen Spaltenbreite braucht, und es ist weder etwas abgeschnitten noch bleibt etwas frei. Das Verhältnis steht als `--bild-seiten` im Inline-Stil und wird beim Auswählen aus der Mediathek übernommen. Fehlt es (Bilder aus der Zeit vor dieser Erweiterung), greift `auto` – die Kachel behält dann die Höhe der Zeile und `contain` lässt oben und unten oder links und rechts Streifen frei. Ist das Nachbarfeld höher als die Bildhöhe, zieht das Raster die Kachel trotzdem auf die Zeilenhöhe; dann bleiben oben und unten Streifen frei. ========================================================================== */ .wp-block-lucyris-split-spalte.hat-bild { background-image: var(--bild); background-repeat: no-repeat; background-position: center; } .wp-block-lucyris-split-spalte.is-bild-fuellen { background-size: cover; } .wp-block-lucyris-split-spalte.is-bild-voll { background-size: contain; aspect-ratio: var(--bild-seiten, auto); /* Das Raster streckt die Kachel auf die Zeilenhoehe. Ist die Zeile hoeher, als das Seitenverhaeltnis zur Spaltenbreite passt, leitet der Browser aus der festen Hoehe eine groessere Breite ab und die Kachel laeuft aus ihrer Spalte heraus — auf /de/expertise/packaging/ waren das 115 px in den Nachbartext hinein. `max-width` deckelt das auf die Spaltenbreite; dann bleibt statt des Ueberlaufs oben und unten ein Streifen frei. */ max-width: 100%; } .wp-block-lucyris-split-spalte.is-bild-original { background-size: auto; } /* Schmale Bildschirme: alles untereinander. */ @media (max-width: 781px) { .wp-block-lucyris-split { grid-template-columns: 1fr; } .wp-block-lucyris-split.is-schema-abc > *:first-child { grid-row: auto; } /* Der Einflug von den Seiten setzt die Kacheln vor dem Einblenden um 4rem nach links und rechts. Auf einem 390 px breiten Schirm sind das 64 px: die Kacheln standen bei x=-44 und x=84 statt bei 20, und die Seite ließ sich 45 px seitlich schieben. Untereinander gibt es keine Seiten mehr, an denen etwas hereinfliegen könnte – der Weg kommt deshalb von unten, wie bei der anderen Variante. */ .wp-block-lucyris-split.is-animation-seiten:not(.ist-sichtbar) > *:first-child, .wp-block-lucyris-split.is-animation-seiten:not(.ist-sichtbar) > *:nth-child(n+2) { transform: translateY(3rem); } } /* ========================================================================== 1. Einflug beim Scrollen `@media (scripting: enabled)`: ohne JavaScript wird nichts versteckt, der Inhalt bleibt sichtbar statt unsichtbar zu hängen. Und es greift schon beim ersten Aufbau der Seite – eine per JavaScript gesetzte Klasse würde den Inhalt kurz aufblitzen lassen. ========================================================================== */ @media (scripting: enabled) { /* Nur wenn wirklich eine Animation gewählt ist. Im Editor steht keine dieser Klassen am Raster – dort bleibt also alles sichtbar. */ .wp-block-lucyris-split.is-animation-seiten > *, .wp-block-lucyris-split.is-animation-unten > * { opacity: 0; transition: opacity .7s ease, transform .7s ease; } .wp-block-lucyris-split.is-animation-seiten > *:first-child { transform: translateX(-4rem); } .wp-block-lucyris-split.is-animation-seiten > *:nth-child(n+2) { transform: translateX(4rem); } .wp-block-lucyris-split.is-animation-unten > * { transform: translateY(3rem); } /* Die rechten Felder kommen versetzt – wirkt weniger mechanisch. */ .wp-block-lucyris-split > *:nth-child(2) { transition-delay: .12s; } .wp-block-lucyris-split > *:nth-child(3) { transition-delay: .24s; } /* Die Auswahl muss so spezifisch sein wie die Regeln, die verstecken. `> *:first-child` und `> *:nth-child(n+2)` zaehlen eine Pseudoklasse mehr als ein blosses `> *`; ohne die beiden Zeilen hier behalten die Kacheln ihr `translateX(±4rem)` dauerhaft — das Bild stand 64 px zu weit links, der Kasten daneben 64 px zu weit rechts. */ .wp-block-lucyris-split.ist-sichtbar > *, .wp-block-lucyris-split.ist-sichtbar > *:first-child, .wp-block-lucyris-split.ist-sichtbar > *:nth-child(n+2) { opacity: 1; transform: none; } } /* ========================================================================== 2. Überfahren mit dem Zeiger `:focus-within` hält die Tastatur mit; wo es keinen Zeiger gibt (Touch), steht alles dauerhaft da. ========================================================================== */ /* 2a. Leiste „Mehr anzeigen" fährt von unten hoch. */ .wp-block-lucyris-split.is-hover-mehr > *::after { content: var(--mehr-text, "Mehr anzeigen"); position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem; text-align: center; font-size: .95rem; background: var(--logo-red, #b11f29); color: #fff; transform: translateY(100%); transition: transform .35s ease; pointer-events: none; } .wp-block-lucyris-split.is-hover-mehr > *:hover::after, .wp-block-lucyris-split.is-hover-mehr > *:focus-within::after { transform: translateY(0); } /* 2b. Alles außer dem ersten Block fährt von unten ein. */ .wp-block-lucyris-split.is-hover-unten > * > *:not(:first-child) { opacity: 0; transform: translateY(1.5rem); transition: opacity .35s ease, transform .35s ease; } .wp-block-lucyris-split.is-hover-unten > *:hover > *:not(:first-child), .wp-block-lucyris-split.is-hover-unten > *:focus-within > *:not(:first-child) { opacity: 1; transform: none; } /* 2c. Zeile aufklappen: sichtbar ist nur der erste Block jeder Kachel (die Überschrift). Alles Weitere klappt auf, sobald die Zeile überfahren, angeklickt oder mit der Tastatur betreten wird – und zwar in **beiden** Kacheln gleichzeitig, weil der Zustand am Raster hängt. Die Zeile wird dabei wirklich höher; der Inhalt darunter rückt nach. Das unterscheidet diese Variante von „Inhalt fliegt von unten ein": dort bleibt der Platz reserviert und die Zeile steht halbleer da. `max-height` ist der Weg, der überall funktioniert. Wo der Browser `interpolate-size` kennt, wird stattdessen die echte Höhe animiert – dann stimmt auch das Tempo, unabhängig davon, wie lang der Text ist. */ /* Die Auswahl nennt `.wp-block-group` mit, damit sie spezifischer ist als die Regel „Textabstände in den Kacheln" weiter oben. Ohne das behalten die eingeklappten Blöcke ihren Außenabstand von 1em: die Zeile war dadurch 193 px hoch, obwohl die Überschrift nur 93 px misst. */ .wp-block-lucyris-split.is-hover-zeile > .wp-block-group > *:not(:first-child) { max-height: 0; margin-block: 0; padding-block: 0; opacity: 0; /* `clip` statt `hidden`: beschneidet genauso, macht aber keinen Scrollcontainer auf. Das war die Quelle des Flimmerns an den Rändern. */ overflow: clip; transition: max-height .65s cubic-bezier(.25, .8, .25, 1), padding-block .65s cubic-bezier(.25, .8, .25, 1), margin-block .65s cubic-bezier(.25, .8, .25, 1), opacity .45s ease; } .wp-block-lucyris-split.is-hover-zeile.ist-gehovert > .wp-block-group > *:not(:first-child), .wp-block-lucyris-split.is-hover-zeile:focus-within > .wp-block-group > *:not(:first-child), .wp-block-lucyris-split.is-hover-zeile.ist-offen > .wp-block-group > *:not(:first-child) { max-height: 100rem; margin-block: 1em; opacity: 1; /* Kurze Verzögerung beim Aufklappen: ein Zeiger, der beim Scrollen nur über die Zeile wandert, löst nichts aus. Beim Zuklappen keine. */ transition-delay: .15s; } @supports (interpolate-size: allow-keywords) { .wp-block-lucyris-split.is-hover-zeile { interpolate-size: allow-keywords; } .wp-block-lucyris-split.is-hover-zeile > .wp-block-group > *:not(:first-child) { max-height: none; height: 0; transition: height .65s cubic-bezier(.25, .8, .25, 1), padding-block .65s cubic-bezier(.25, .8, .25, 1), margin-block .65s cubic-bezier(.25, .8, .25, 1), opacity .45s ease; } .wp-block-lucyris-split.is-hover-zeile.ist-gehovert > .wp-block-group > *:not(:first-child), .wp-block-lucyris-split.is-hover-zeile:focus-within > .wp-block-group > *:not(:first-child), .wp-block-lucyris-split.is-hover-zeile.ist-offen > .wp-block-group > *:not(:first-child) { height: auto; } } /* Aufgeklappt wird ueber Klassen, nicht ueber `:hover`: `ist-gehovert` setzt `split-frontend.js` bei echter Mausbewegung, `ist-offen` beim Klick. Beim Scrollen bewegt sich die Maus nicht — die Zeile unter dem ruhenden Zeiger bleibt deshalb zu. */ /* Der Zeiger gehört auf die ganze Zeile, sie ist anklickbar. */ .wp-block-lucyris-split.is-hover-zeile { cursor: pointer; } .wp-block-lucyris-split.is-hover-zeile a, .wp-block-lucyris-split.is-hover-zeile button { cursor: auto; } @media (hover: none) { .wp-block-lucyris-split.is-hover-mehr > *::after { transform: translateY(0); } .wp-block-lucyris-split.is-hover-unten > * > *:not(:first-child) { opacity: 1; transform: none; } } /* ========================================================================== 3. Reduzierte Bewegung: Inhalte erscheinen ohne Weg. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .wp-block-lucyris-split:not(.is-hover-zeile) > *, .wp-block-lucyris-split:not(.is-hover-zeile) > * > *:not(:first-child) { opacity: 1 !important; transform: none !important; transition: none !important; } .wp-block-lucyris-split.is-hover-zeile > * { opacity: 1 !important; transform: none !important; } .wp-block-lucyris-split.is-hover-mehr > *::after { transition: none; } /* „Zeile aufklappen" bleibt zugeklappt – das ist kein Effekt, sondern der Zweck. Nur der Weg dorthin entfällt. */ .wp-block-lucyris-split.is-hover-zeile > .wp-block-group > *:not(:first-child) { transition: none !important; } } /* ========================================================================== 4. Editor: das Raster steht dort genauso wie im Frontend (die Felder liegen per useInnerBlocksProps direkt darin). Animation und Hover bleiben aus – ihre Klassen setzt erst save(). ========================================================================== */ .editor-styles-wrapper .wp-block-lucyris-split { min-height: 8rem; }