/*
* Herne Impulse – Custom CSS
* =====================================================================
*
* Wer zum ersten Mal hier reinschaut: erstmal keine Panik.
* Die Datei sieht groß aus, ist aber in nummerierte Blöcke unterteilt
* (siehe Inhaltsverzeichnis unten). Am Anfang jedes Blocks steht, was
* er macht und wo die Schrauben sind, an denen man dreht.
*
* ---------------------------------------------------------------------
* INHALT
* ---------------------------------------------------------------------
* 0) Globale Tokens (Farben, Animations-Timings, Header-Höhe)
* 1) Impulse-Hover – Bilder mit Brand-Streifen beim Hovern
* 2) Globaler Button-Hover
* 3) Fullscreen Hero (die großen Bühnen am Seitenanfang)
* 4) Swipe-Galerie (horizontal scrollbar)
* 5) Accordion (FAQ-Stil, mit Swirl-Unterstrich)
* 6) Navbar – Icons + Swirl-Underline
* 7) Timeline (die abwechselnd links/rechts angeordneten Cards)
* 8) Kontaktkarten
* 9) Inline-Icons für Headings/Text
* 10) Partner-Logos (Basis + Row-Layout, Normal + Wide)
* 11) Buttons mit Inline-Bild
* 12) Single Post / Featured Image
* 13) Utility Classes (hi-hover-impulse, hi-shadow-natural, hi-media-card)
* 14) hi-underline – universeller Swirl-Link
* 15) hi-stretch-underline – Icon-Unterstrich in Stretch-Cards
* 16) Aspect-Ratio Utilities (Opt-in: 16:9 für Mobile/Tablet)
* 17) Media & Text – Radius am Bildbereich
* 18) Team Card Fix + Always-Stacked
* 19) Lightbox – uncropped + zentriert
* 20) Sticky Header + Compact Header
* 21) Mobile Menu Overlay (Fullscreen-Burger)
* 22) Mobile Menu – Premium Motion (Slide-Animation)
* 23) Phone Landscape – Fallback + Opt-in Utilities
* 24) Accordion-Slow (eigene Cascade-Layer)
* 25) WP Defaults (ganz unten, Reihenfolge wichtig)
*
* ---------------------------------------------------------------------
* PHONE-LANDSCAPE – wie es zusammenspielt
* ---------------------------------------------------------------------
* Im Plugin liegt noch ein kleines JS-Snippet (landscape-viewport.php
* bzw. direkt in der Plugin-Haupt-PHP), das im flachen Phone-Landscape
* das Viewport-Meta auf width=1280 umschreibt. Heißt: das Handy im
* Querformat glaubt, es sei ein kleiner Desktop, und der Browser
* skaliert das Ganze auf die echte Displaybreite runter. Kein
* Stacking, nichts versteckt – sieht aus wie Desktop, nur kleiner.
*
* Wenn das JS läuft, setzt es die Klasse hi-landscape-desktop-mode
* auf . Alle Landscape-Regeln hier sind mit
* html:not(.hi-landscape-desktop-mode)
* gated – greifen also nur, wenn JS aus ist (Fallback).
*
* Für den Fallback-Fall gibt's drei Opt-in-Klassen, die man im
* Block-Editor unter „Zusätzliche CSS-Klassen" an einzelne Blöcke
* hängen kann:
* .keep-landscape-row → Spalten bleiben nebeneinander (kein Stack)
* .show-in-landscape → Block wird trotz display:none sichtbar
* .landscape-full-width → Block nutzt die volle Viewportbreite
*
* ---------------------------------------------------------------------
* HINTERGRUND
* ---------------------------------------------------------------------
* Das Theme ist Extendable (Block-Theme) plus Twentig-Plugin. Viele
* Regeln brauchen !important, um die Theme-Defaults zu übersteuern –
* ist hässlich, aber bei Block-Themes leider Standard. Nicht
* wegkürzen, auch wenn der Linter meckert.
*
* CI-Farben ändern: siehe Block 0, Variable --hi-swirl. Einmal dort
* geändert und es wirkt an allen sechs Stellen mit dem Swirl-Effekt
* (Navbar, Accordion, Timeline-Marker, beide Underlines, Mobile-Menü).
* =====================================================================
*/
/* =====================================================================
0) GLOBALE TOKENS
---------------------------------------------------------------------
Zentrale Werte. Hier drehen bedeutet: es wirkt überall in der Datei,
wo die Variable genutzt wird. Einstieg für „ich will die CI-Farbe
ändern" oder „der Header ist mir zu hoch".
===================================================================== */
:root {
/* Header-Höhe – wird vom Hero für die min-height-Berechnung
gebraucht (siehe Block 3). Wenn der Header irgendwann anders
hoch wird, hier anpassen, dann passt der Hero mit.
170px = Default oben auf der Seite, Compact beim Scrollen
übernimmt Block 20. */
--header-height: 170px;
/* CI Swirl-Farbverläufe.
--hi-swirl: der 3-Farb-Strich unter Links/Buttons/usw.
--hi-swirl-impulse: die 4-Farb-Variante, nur für .impulse-hover.
Wenn die Markenfarben wechseln: HIER ändern, wirkt dann überall. */
--hi-swirl: linear-gradient(90deg, #04A5D5, #4CAF50, #F6C300);
--hi-swirl-impulse: linear-gradient(90deg, #0093D3, #04A5D5, #27AE60, #FFD500);
/* Swirl-Animations-Timings.
-in = wenn der Strich reinfährt (Hover, Aktiv-State)
-out = wenn er sich wieder zurückzieht
Wenn die Animation zu schnell/langsam wirkt: Werte hier erhöhen
bzw. reduzieren. Betrifft alle 6 Stellen gleichzeitig. */
--hi-swirl-in:
opacity 180ms ease,
transform 260ms ease,
background-position 420ms ease;
--hi-swirl-out:
opacity 260ms ease,
transform 360ms cubic-bezier(.4,0,.2,1),
background-position 0ms linear;
}
/* Phone-Landscape-Korrektur der Header-Höhe.
Im JS-Desktop-Mode nicht aktiv (siehe html:not(...)-Guard).
Greift nur als Fallback, wenn JS aus ist. */
@media (orientation: landscape) and (max-height: 500px) {
html:not(.hi-landscape-desktop-mode) { --header-height: 60px; }
}
/* =====================================================================
1) IMPULSE-HOVER (Bild-Hover mit Streifen)
---------------------------------------------------------------------
Klasse: .impulse-hover auf wp-block-image.
Bild senkt sich leicht beim Hovern, unten fährt ein 4-farbiger
Streifen rein (der --hi-swirl-impulse). Radius ist fest 12px –
falls breiter/schmaler nötig, hier anpassen.
===================================================================== */
.wp-block-image.impulse-hover {
display: inline-block;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.wp-block-image.impulse-hover img {
display: block;
width: 100%;
border-radius: 12px;
transition: transform 0.35s ease, filter 0.35s ease;
}
.wp-block-image.impulse-hover:hover img {
transform: translateY(5px);
filter: brightness(1.05);
}
.wp-block-image.impulse-hover::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background: var(--hi-swirl-impulse);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
}
.wp-block-image.impulse-hover:hover::after {
transform: scaleX(1);
}
/* =====================================================================
2) GLOBALER BUTTON-HOVER
---------------------------------------------------------------------
Greift auf alle WP-Buttons. Wenn die Hover-Farbe anders sein soll:
hier einzeiliger Change.
===================================================================== */
.wp-block-button__link:hover {
background-color: #114c5f !important;
color: #ffffff !important;
}
/* =====================================================================
3) FULLSCREEN HERO (Extendable/Extendify Cover Block)
---------------------------------------------------------------------
Klasse: .hero-fullscreen auf wp-block-cover.
Das ist die große Bühne oben auf jeder Seite (Start, Ausbildungswege,
Über uns). Typo skaliert per clamp() automatisch von Mobile bis
Desktop. Wenn der Hero insgesamt kleiner/größer werden soll: an den
clamp-Werten unten drehen (h1 und p).
Struktur:
- Base: min-height minus Header, Typo via clamp, zentriert
- Mobile Portrait: kleineres Padding
- Mobile Landscape (Fallback für JS-aus): Padding rundum minimal
- Tablet Landscape: moderate Anpassung
===================================================================== */
.hero-fullscreen {
min-height: calc(100svh - var(--header-height));
min-height: calc(100vh - var(--header-height)); /* fallback */
display: flex;
align-items: center;
}
.hero-fullscreen .wp-block-cover__image-background,
.hero-fullscreen .wp-block-cover__video-background {
object-fit: cover;
object-position: center;
}
.hero-fullscreen .wp-block-cover__inner-container {
/* max-width = wie breit der Text im Hero werden darf.
1200 ist für Desktop ok, bei breiteren Heros anpassen. */
max-width: 1200px;
padding: clamp(2rem, 5vw, 4rem);
}
.hero-fullscreen h1 {
/* clamp(min, ideal, max). Wenn der h1 insgesamt größer/kleiner werden
soll: mittleren Wert anpassen, der skaliert mit der Viewportbreite. */
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.15;
}
.hero-fullscreen p {
/* Lauftext unter der h1. 60ch = ca. 60 Zeichen pro Zeile
(lesefreundlich). Breiter wird's schwer zu lesen. */
font-size: clamp(1rem, 1.6vw, 1.25rem);
line-height: 1.6;
max-width: 60ch;
}
/* ------- Mobile Portrait ------- */
@media (max-width: 767px) {
.hero-fullscreen .wp-block-cover__inner-container {
padding: 2rem 1.5rem;
}
}
/* ------- Phone Landscape (Minimal-Fix, Fallback-Mode) -------
Greift nur, wenn der Viewport-JS-Hack NICHT aktiv ist (z.B. JS
deaktiviert). Im Desktop-Mode übernimmt der gescale-te Desktop-
Viewport das Layout; die Media-Query hier würde dort durch das
dann größere CSS-viewport-height ohnehin nicht mehr matchen, aber
der html-Guard macht die Trennung explizit und robust. */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {
html:not(.hi-landscape-desktop-mode) .hero-fullscreen .wp-block-cover__inner-container {
padding: clamp(1rem, 2vw, 1.5rem) !important;
max-width: none;
}
html:not(.hi-landscape-desktop-mode) .hero-fullscreen img[style*="width:96px"],
html:not(.hi-landscape-desktop-mode) .hero-fullscreen img[style*="width: 96px"] {
width: 56px !important;
max-width: 56px !important;
}
}
/* Tablet-Landscape (Höhe >500px) bekommt die moderate Original-Anpassung,
damit sich iPads nicht wie Phones verhalten. */
@media (max-width: 926px) and (orientation: landscape) and (min-height: 501px) {
.hero-fullscreen .wp-block-cover__inner-container {
padding: 1.5rem 2rem;
}
.hero-fullscreen h1 {
font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.hero-fullscreen p {
font-size: 1rem;
}
}
/* =====================================================================
4) SWIPE-GALERIE (horizontal scrollbar, 2:3 Preview)
---------------------------------------------------------------------
Klasse: .swipe-gallery auf wp-block-gallery.
Kartenbreite per --card-Variable (unten im Selector). Wenn du die
Karten größer/kleiner willst: Werte in den jeweiligen Media-Queries
anpassen, nicht am einzelnen wp-block-image.
Karten-Polish-Variante: zusätzlich .hi-gallery-cards dranhängen →
gibt Rundung und Shadow. Lightbox-Override in Block 19 verhindert,
dass diese Karten-Styles auch im Lightbox-View aktiv bleiben.
===================================================================== */
.wp-block-gallery.swipe-gallery {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 14px !important;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
touch-action: auto;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
/* Default: Mobile Portrait */
--card: clamp(240px, 70vw, 420px);
}
/* Handy quer */
@media (max-width: 900px) and (orientation: landscape) {
.wp-block-gallery.swipe-gallery {
--card: clamp(220px, 42vw, 300px);
}
}
/* Tablet / Surface */
@media (min-width: 901px) and (max-width: 1280px) {
.wp-block-gallery.swipe-gallery {
--card: clamp(240px, 28vw, 320px);
}
}
/* Desktop */
@media (min-width: 1281px) {
.wp-block-gallery.swipe-gallery {
--card: clamp(260px, 22vw, 360px);
}
}
.wp-block-gallery.swipe-gallery .wp-block-image {
flex: 0 0 var(--card) !important;
margin: 0 !important;
scroll-snap-align: center;
aspect-ratio: 2 / 3;
overflow: hidden !important;
border-radius: 14px;
}
.wp-block-gallery.swipe-gallery .wp-block-image a {
display: block;
}
.wp-block-gallery.swipe-gallery a,
.wp-block-gallery.swipe-gallery img {
-webkit-tap-highlight-color: transparent;
}
.wp-block-gallery.swipe-gallery .wp-block-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 0;
}
/* Karten-Polishing */
.wp-block-gallery.swipe-gallery.hi-gallery-cards figure.wp-block-image {
margin: 0 !important;
line-height: 0;
font-size: 0;
border-radius: 30px;
overflow: hidden;
box-shadow: var(--wp--preset--shadow--natural);
}
.wp-block-gallery.swipe-gallery.hi-gallery-cards figure.wp-block-image > a,
.wp-block-gallery.swipe-gallery.hi-gallery-cards figure.wp-block-image > div {
display: block;
border-radius: inherit;
overflow: hidden;
}
.wp-block-gallery.swipe-gallery.hi-gallery-cards figure.wp-block-image img {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
object-fit: cover;
}
/* iOS/Safari – saubere Unterkante (Radial-Mask-Hack) */
@media (hover: none) and (pointer: coarse) {
.wp-block-gallery.swipe-gallery.hi-gallery-cards figure.wp-block-image img {
-webkit-mask-image: -webkit-radial-gradient(white, black);
transform: translateZ(0);
}
}
/* =====================================================================
5) ACCORDION (Gutenberg/Extendify)
---------------------------------------------------------------------
Nutzt den Core-Accordion-Block von WP. Dazu:
- Swirl-Strich (CI-Unterstrich) erscheint beim Öffnen unterm Titel
- Icon am Titel wird auf 1.4em gezwungen (WP setzt sonst inline 150px)
- Soft-Open-Animation über Panel + Inhalt getrennt
Wenn du die Unterstrich-Länge ändern willst: im ::after die `width`
(unten in 5.5). Wenn die Animation zu schnell/langsam ist: die
--hi-swirl-*-Tokens aus Block 0 anpassen.
Reduzierte Motion (OS-Einstellung): wird respektiert, Animation aus.
Siehe auch Block 24 (accordion-slow) – das ist eine zusätzliche
Opt-in-Variante mit langsamer Grid-Rows-Animation für Panels.
===================================================================== */
/* 5.1 Titel: Icon + Text zentriert */
.wp-block-accordion-heading__toggle-title {
display: inline-flex;
align-items: center;
gap: 0.45em;
position: relative;
overflow: visible; /* für ::after-Unterstrich */
}
/* 5.2 Titel-Icon (PNG) – überschreibt WP Inline width:150px */
.wp-block-accordion-heading__toggle-title img {
height: 1.4em !important;
width: auto !important;
object-fit: contain;
max-width: none;
}
/* 5.3 SOFT OPEN via inert-Attribut (Panel + Inhalt) */
.wp-block-accordion-panel:not([inert]) {
animation: acc-panel-in 420ms cubic-bezier(.2,.8,.2,1) both;
}
.wp-block-accordion-panel:not([inert]) > * {
animation: acc-content-in 480ms cubic-bezier(.2,.8,.2,1) both;
animation-delay: 90ms;
}
@keyframes acc-panel-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes acc-content-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.wp-block-accordion-panel:not([inert]),
.wp-block-accordion-panel:not([inert]) > * {
animation: none !important;
transform: none !important;
}
}
/* 5.4 Default-Unterstreichungen im Titel entfernen (inkl. Hover/Focus) */
.wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title strong,
.wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title a,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title strong,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title a,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title strong,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title a {
text-decoration: none !important;
border-bottom: 0 !important;
}
/* 5.5 Swirl-Linie (Toggle-Effekt) */
.wp-block-accordion-heading__toggle-title::after {
content: "";
position: absolute;
/* Startet hinter dem Icon: Icon-Höhe (1.25em) + gap (0.45em) */
left: calc(1.25em + 0.45em);
bottom: -0.25em;
width: 3.8rem;
height: 2px;
background: var(--hi-swirl);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transform: translateX(-0.6rem);
transition: var(--hi-swirl-in);
pointer-events: none;
z-index: 1;
}
/* Geöffnet: Linie fährt rein */
.wp-block-accordion-heading__toggle[aria-expanded="true"]
.wp-block-accordion-heading__toggle-title::after {
opacity: 1;
transform: translateX(0);
background-position: 100% 0;
}
/* 5.6 Dezenter Desktop-Hover (Preview-State) */
@media (hover: hover) and (pointer: fine) {
.wp-block-accordion-heading__toggle[aria-expanded="false"]:hover
.wp-block-accordion-heading__toggle-title::after {
opacity: 0.55;
transform: translateX(-0.2rem);
background-position: 60% 0;
}
}
/* 5.7 CLOSE-State: weicherer Rückzug */
.wp-block-accordion-heading__toggle[aria-expanded="false"]
.wp-block-accordion-heading__toggle-title::after {
transition: var(--hi-swirl-out);
}
/* 5.8 MOBILE: eleganteres Verschwinden beim Schließen */
@media (hover: none) and (pointer: coarse) {
.wp-block-accordion-heading__toggle[aria-expanded="false"]
.wp-block-accordion-heading__toggle-title::after {
transition:
opacity 220ms ease 140ms,
transform 380ms cubic-bezier(.4,0,.2,1) 0ms,
background-position 0ms linear 0ms;
opacity: 0;
transform: translateX(-0.35rem);
background-position: 0% 0%;
}
.wp-block-accordion-heading__toggle[aria-expanded="true"]
.wp-block-accordion-heading__toggle-title::after {
transition: var(--hi-swirl-in);
opacity: 1;
transform: translateX(0);
background-position: 100% 0;
}
/* Grauer Tap-Schimmer / Active-Overlay entfernen */
.wp-block-accordion-heading__toggle {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
outline: none;
}
.wp-block-accordion-heading__toggle:active {
background: transparent !important;
box-shadow: none !important;
filter: none !important;
}
}
/* =====================================================================
6) NAVBAR – Inline-Img Icons + Swirl-Underline
---------------------------------------------------------------------
Wenn ein Menüpunkt als Icon+Text gebaut ist (Bild direkt ins Label
eingefügt im Block-Editor), sitzt das Icon jetzt ordentlich inline
und wird proportional zur Schrift skaliert (1em).
Aktiver Menüpunkt bzw. Parent vom aktiven: bekommt automatisch den
Swirl-Unterstrich (ohne Hover). Desktop-Hover zeigt dezente Preview.
===================================================================== */
/* 6.1 Layout: Icon + Text inline */
.wp-block-navigation .wp-block-navigation-item__content {
display: inline-flex;
align-items: center;
gap: 0.25em;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* 6.2 Icon (PNG) – relative Größe zur Schrift */
.wp-block-navigation .wp-block-navigation-item__content img {
height: 1em !important;
width: auto !important;
max-width: none !important;
object-fit: contain;
flex-shrink: 0;
display: inline-block;
margin-right: .4em;
}
/* 6.3 Label als Referenz für Linie */
.wp-block-navigation .wp-block-navigation-item__label {
position: relative;
}
/* 6.4 Swirl-Linie unter dem Text */
.wp-block-navigation .wp-block-navigation-item__label::after {
content: "";
position: absolute;
left: 0;
bottom: -0.25em;
width: 2.6rem;
height: 2px;
background: var(--hi-swirl);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transform: translateX(-0.45rem);
transition: var(--hi-swirl-out);
pointer-events: none;
}
/* 6.5 Desktop-Hover */
@media (hover: hover) and (pointer: fine) {
.wp-block-navigation .wp-block-navigation-item__content:hover
.wp-block-navigation-item__label::after {
opacity: 0.55;
transform: translateX(0);
background-position: 60% 0;
transition: var(--hi-swirl-in);
}
}
/* 6.6 Aktueller Menüpunkt + Parent eines Unterpunkts */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content
.wp-block-navigation-item__label::after,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content
.wp-block-navigation-item__label::after {
opacity: 1;
transform: translateX(0);
background-position: 100% 0;
transition: var(--hi-swirl-in);
}
/* 6.7 Tastatur-Fokus (barrierefrei) */
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
@media (hover: none) and (pointer: coarse) {
.wp-block-navigation a.wp-block-navigation-item__content:focus,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
outline: none !important;
box-shadow: none !important;
}
}
/* =====================================================================
7) HI TIMELINE
---------------------------------------------------------------------
Zick-zack-Timeline: Cards abwechselnd links/rechts, verbunden durch
mittige Achse mit swirl-conic-Marker. Auf Mobile stacked es zu einer
linksbündigen Linie mit Cards rechts daneben.
HTML-Struktur (wichtig, sonst funktioniert die Grid-Zuweisung nicht):
Schrauben an der Optik:
- --hi-card-max: wie breit eine Card maximal wird
- --hi-axis-col: wie breit der Mittelstreifen ist
- --hi-gap: Abstand zwischen den Items
- --hi-marker-*: Größe + Farbring vom conic-Swirl-Marker
- --hi-marker-shift-odd/-even: Höhen-Nudge falls die Marker nicht
auf derselben Linie wie der Card-Inhalt sitzen (Design hat oft
1-2px Offset – hier nachjustieren).
===================================================================== */
.hi-timeline {
--hi-line: rgba(0,0,0,.18);
--hi-herne-blue: #0AA5D7;
--hi-herne-green: #047D36;
--hi-herne-yellow:#FBBA23;
--hi-gap: clamp(1.25rem, 2.2vw, 2.25rem);
--hi-axis-col: 56px;
--hi-card-max: 620px;
--hi-marker-size: 14px;
--hi-marker-ring: 4px;
/* HÖHEN-KORREKTUR: Links (odd) sitzt zu hoch, per transform nach unten */
--hi-marker-shift-odd: 8px;
--hi-marker-shift-even: 0px;
position: relative;
padding: var(--hi-gap) 0;
isolation: isolate;
overflow: visible;
}
/* Achse */
.hi-timeline::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 3px;
transform: translateX(-50%);
background: var(--hi-line);
border-radius: 999px;
pointer-events: none;
z-index: 0;
}
/* Item = Grid */
.hi-timeline > .hi-timeline_item {
position: relative;
display: grid;
grid-template-columns: 1fr var(--hi-axis-col) 1fr;
align-items: start;
margin: var(--hi-gap) 0;
z-index: 1;
overflow: visible;
}
/* Content links */
.hi-timeline > .hi-timeline_item > .hi-timeline_content {
grid-column: 1;
justify-self: end;
overflow: visible;
}
/* Jede zweite Box rechts */
.hi-timeline > .hi-timeline_item:nth-child(even) > .hi-timeline_content {
grid-column: 3;
justify-self: start;
}
/* Card-Style */
.hi-timeline .hi-timeline_content {
width: min(var(--hi-card-max), 100%);
background: #fff;
border: 1px solid rgba(0,0,0,.10);
border-radius: 16px;
padding: clamp(1rem, 1.6vw, 1.25rem);
box-shadow: 0 10px 30px rgba(0,0,0,.10);
overflow: visible;
display: flow-root;
}
/* First-child-margin killen */
.hi-timeline .hi-timeline_content > *:first-child { margin-top: 0 !important; }
.hi-timeline .hi-timeline_content figure { margin-top: 0 !important; }
/* Bilder in Cards */
.hi-timeline .hi-timeline_content img {
max-width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
/* Marker (Soft-blended conic swirl + Glow) */
.hi-timeline > .hi-timeline_item::before {
content: "";
grid-column: 2;
justify-self: center;
align-self: start;
width: var(--hi-marker-size);
height: var(--hi-marker-size);
border-radius: 999px;
border: var(--hi-marker-ring) solid #fff;
background:
radial-gradient(circle at 30% 30%,
rgba(255,255,255,.20) 0 22%,
rgba(255,255,255,0) 24% 100%
),
conic-gradient(
from -90deg,
var(--hi-herne-blue) 0%,
var(--hi-herne-green) 33.333%,
var(--hi-herne-yellow) 66.666%,
var(--hi-herne-blue) 100%
);
box-shadow:
0 2px 10px rgba(0,0,0,.12),
0 0 0 6px rgba(10,165,215,.10);
pointer-events: none;
z-index: 2;
}
/* Marker-Höhenkorrektur per transform */
.hi-timeline > .hi-timeline_item:nth-child(odd)::before {
transform: translateY(var(--hi-marker-shift-odd));
}
.hi-timeline > .hi-timeline_item:nth-child(even)::before {
transform: translateY(var(--hi-marker-shift-even));
}
/* Mobile */
@media (max-width: 900px) and (orientation: portrait) {
.hi-timeline {
padding-left: 1.25rem;
--hi-marker-shift-odd: 0px;
--hi-marker-shift-even: 0px;
}
.hi-timeline::before {
left: 1.25rem;
transform: none;
}
.hi-timeline > .hi-timeline_item {
grid-template-columns: 1.25rem 1fr;
column-gap: 1.25rem;
}
.hi-timeline > .hi-timeline_item::before {
grid-column: 1;
transform: none !important;
}
.hi-timeline > .hi-timeline_item > .hi-timeline_content {
grid-column: 2 !important;
justify-self: stretch;
width: 100%;
}
}
/* =====================================================================
8) KONTAKTKARTEN (Gutenberg Columns)
---------------------------------------------------------------------
Klasse: .hi-contact-cards auf wp-block-columns.
Macht aus dem Columns-Block ein auto-fit-Grid: Karten werden so
breit wie nötig, springen automatisch in neue Reihen wenn sie
kleiner als 320px wären. min-width-Schwelle hier anpassbar.
===================================================================== */
.hi-contact-cards,
.wp-block-columns.hi-contact-cards {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
align-items: start;
}
/* Flex-Reste des Columns-Blocks gezielt neutralisieren */
.wp-block-columns.hi-contact-cards > .wp-block-column,
.wp-block-columns.hi-contact-cards > .wp-block-column.hi-contact-card,
.hi-contact-cards > .hi-contact-card {
min-width: 0;
width: 100% !important;
max-width: 720px;
justify-self: start;
align-self: start;
margin: 0;
flex-basis: auto !important;
flex-grow: 0 !important;
}
.wp-block-columns.hi-contact-cards > .wp-block-column > *,
.hi-contact-card > * {
margin-left: 0;
margin-right: 0;
}
.wp-block-columns.hi-contact-cards > .wp-block-column > *:first-child,
.hi-contact-card > *:first-child {
margin-top: 0 !important;
}
.wp-block-columns.hi-contact-cards > .wp-block-column > *:last-child,
.hi-contact-card > *:last-child {
margin-bottom: 0 !important;
}
/* =====================================================================
9) INLINE-ICON FÜR ÜBERSCHRIFTEN / FREITEXT
---------------------------------------------------------------------
Nutzung: Klasse .hi-inline-icon auf Heading- oder Paragraph-Block,
dann im Editor direkt am Anfang des Textes ein Bild einfügen.
Das Bild wird inline vor den Text gesetzt und auf Schrifthöhe
skaliert (1em bei Paragraph, 1.4em bei Heading).
===================================================================== */
.hi-inline-icon {
text-decoration: none !important;
}
.hi-inline-icon img {
display: inline-block;
vertical-align: middle;
height: 1em !important;
width: auto !important;
max-width: none !important;
object-fit: contain;
margin-right: .35em;
margin-left: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Etwas größer für Headings */
.wp-block-heading.hi-inline-icon img {
height: 1.4em !important;
}
/* Paragraphen etwas ruhiger */
p.hi-inline-icon img,
.wp-block-paragraph.hi-inline-icon img {
height: 1em !important;
}
/* =====================================================================
10) PARTNER-LOGOS
---------------------------------------------------------------------
Zwei Layout-Modi:
a) Einzeln verteilt (Inline-Block):
.partner-logo auf jedes wp-block-image.
→ auf Desktop nebeneinander, auf Mobile 3 bzw. 2 pro Reihe.
b) Als Zeile (Flex-Row):
.partner-logos-row auf den wp-block-columns oder Group-Block,
.partner-logo auf jedes Image drin.
→ 3 Logos pro Reihe (Desktop), 2 pro Reihe (Mobile).
Breite Logos (z.B. ESF-Logo mit Text): zusätzlich .partner-logo--wide
dran. Dann wird es größer skaliert als die schmalen.
Schrauben: max-height-Werte in den Media-Queries. Wenn dir Logos zu
groß/klein vorkommen, da justieren.
===================================================================== */
/* 10.1 Basis – Einzel-Logo */
.partner-logo {
padding: 10px 20px;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
.partner-logo img {
max-height: 100px;
max-width: 100%;
width: auto !important;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
}
/* 10.2 Mobile: kleiner + 3 pro Reihe */
@media (max-width: 767px) {
.partner-logo {
width: 32%;
padding: 6px;
}
.partner-logo img {
max-height: 70px;
}
}
/* 10.3 Sehr kleine Displays: 2 pro Reihe */
@media (max-width: 480px) {
.partner-logo {
width: 50%;
}
.partner-logo img {
max-height: 70px;
}
}
/* 10.4 Breite Logos (Opt-in via --wide) */
.partner-logo.partner-logo--wide img {
max-height: 122px;
}
.partner-logo.partner-logo--wide {
padding-left: 26px;
padding-right: 26px;
}
@media (max-width: 1024px) {
.partner-logo.partner-logo--wide img {
max-height: 100px;
}
}
@media (max-width: 767px) {
.partner-logo.partner-logo--wide img {
max-height: 90px;
}
.partner-logo.partner-logo--wide {
padding-left: 14px;
padding-right: 14px;
}
}
/* 10.5 Row-Layout (wenn mehrere Logos in einem Row-Block stehen)
Voraussetzung: .partner-logos-row auf Zeilen-Block,
.partner-logo auf jedem Image-Block. */
.partner-logos-row,
.partner-logos-row.is-layout-flex {
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 12px !important;
}
/* Standard: ~3 Logos pro Zeile */
.partner-logos-row > .partner-logo,
.partner-logos-row > .wp-block-image.partner-logo {
flex: 0 0 calc(33.333% - 8px) !important;
max-width: calc(33.333% - 8px) !important;
box-sizing: border-box;
/* vertikal zentrieren */
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 110px;
margin: 0 !important;
}
.partner-logos-row > .partner-logo img,
.partner-logos-row > .wp-block-image.partner-logo img {
display: block;
margin: 0 auto;
}
/* Mobile Row: ~2 pro Reihe + etwas kompakter */
@media (max-width: 767px) {
.partner-logos-row,
.partner-logos-row.is-layout-flex {
gap: 10px !important;
}
.partner-logos-row > .partner-logo,
.partner-logos-row > .wp-block-image.partner-logo {
flex: 0 0 calc(50% - 5px) !important;
max-width: calc(50% - 5px) !important;
min-height: 90px;
}
}
/* Breite Logos im Row-Layout */
.partner-logos-row > .partner-logo.partner-logo--wide,
.partner-logos-row > .wp-block-image.partner-logo.partner-logo--wide {
padding-left: 26px;
padding-right: 26px;
}
.partner-logos-row > .partner-logo.partner-logo--wide img,
.partner-logos-row > .wp-block-image.partner-logo.partner-logo--wide img {
max-height: 118px;
}
@media (max-width: 1024px) {
.partner-logos-row > .partner-logo.partner-logo--wide img,
.partner-logos-row > .wp-block-image.partner-logo.partner-logo--wide img {
max-height: 96px;
}
}
@media (max-width: 767px) {
.partner-logos-row > .partner-logo.partner-logo--wide,
.partner-logos-row > .wp-block-image.partner-logo.partner-logo--wide {
padding-left: 14px;
padding-right: 14px;
}
.partner-logos-row > .partner-logo.partner-logo--wide img,
.partner-logos-row > .wp-block-image.partner-logo.partner-logo--wide img {
max-height: 86px;
}
}
/* 10.6 Größerer Zeilenabstand für Desktop ab 4. Logo
(ursprünglich zweimal exakt gleich deklariert – hier nur einmal) */
@media (min-width: 1024px) {
.partner-logos-row > .partner-logo:nth-child(n+4),
.partner-logos-row > .wp-block-image.partner-logo:nth-child(n+4) {
margin-top: 20px !important;
}
}
/* =====================================================================
11) BUTTONS MIT INLINE-BILD
---------------------------------------------------------------------
Nutzung: .btn-icon an Button-Block oder Link.
Dann im Editor ein Bild in den Button-Text einfügen (geht in
Gutenberg direkt, wenn man den Text markiert und Bild einfügt).
Icon kommt standardmäßig links. Wenn das Icon rechts soll:
zusätzlich .btn-icon-right dranhängen.
Die writing-mode/text-orientation-Overrides sind dafür da, dass
einzelne WP/Extendable-Defaults das Icon nicht ins Vertikale
schubsen. Nicht entfernen, auch wenn es redundant wirkt.
===================================================================== */
.wp-block-button .wp-block-button__link.btn-icon,
.wp-block-button.btn-icon .wp-block-button__link,
a.wp-element-button.btn-icon,
.btn-icon a.wp-element-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
white-space: nowrap !important;
/* Schutz gegen "vertikalen" Text */
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.wp-block-button .wp-block-button__link.btn-icon img,
.wp-block-button.btn-icon .wp-block-button__link img,
a.wp-element-button.btn-icon img,
.btn-icon a.wp-element-button img {
height: 1.4em !important;
width: auto !important;
max-width: none !important;
object-fit: contain;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
margin-top: 0 !important;
margin-bottom: 0 !important;
/* Default: Icon links */
margin-right: .4em !important;
margin-left: 0 !important;
}
/* Icon rechts: zusätzlich btn-icon-right vergeben */
.wp-block-button .wp-block-button__link.btn-icon-right img,
.wp-block-button.btn-icon-right .wp-block-button__link img,
a.wp-element-button.btn-icon-right img,
.btn-icon-right a.wp-element-button img {
margin-left: .4em !important;
margin-right: 0 !important;
}
/* =====================================================================
12) SINGLE POST / FEATURED IMAGE
---------------------------------------------------------------------
Nur auf Single-Post-Views: das Beitragsbild wird auf Desktop
mittig zentriert auf 980px limitiert. Klasse am Template-Block:
.post-featured-desktop.
===================================================================== */
@media (min-width: 1024px) {
.single .post-featured-desktop {
max-width: 980px;
margin: 0 auto;
}
.single .post-featured-desktop .wp-block-post-featured-image img {
width: 100%;
height: auto;
display: block;
}
}
/* =====================================================================
13) UTILITY CLASSES
---------------------------------------------------------------------
Kleine Helfer, die an beliebige Bilder/Wrapper dran können:
.hi-hover-impulse → Bild hebt sich leicht beim Hovern (2px),
kein Streifen, einfach nur dezenter Motion-Hint.
Für den Strich-Hover stattdessen .impulse-hover
nutzen (Block 1).
.hi-shadow-natural → Gibt dem Bild den WP-„Natural"-Shadow und
runde Ecken. Entfernt gleichzeitig Shadows/Filter
vom img selbst, damit's nicht doppelt aussieht.
.hi-media-card → Card ohne Baseline-Gap (der blöde Abstand unter
inline-block-Bildern), saubere Rundung. Als
figure-Wrapper oder direkt am wp-block-image.
===================================================================== */
/* 13.1 Hi-Hover-Impulse (für Bilder mit drop-shadow) */
.hi-hover-impulse {
position: relative;
display: inline-block;
}
.hi-hover-impulse img {
transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) and (pointer: fine) {
.hi-hover-impulse:hover img {
transform: translateY(-2px);
}
}
/* 13.2 Hi-Shadow-Natural (WP "Natural" Shadow Preset über Wrapper) */
.hi-shadow-natural {
box-shadow: var(--wp--preset--shadow--natural) !important;
border-radius: 30px;
overflow: hidden;
}
.hi-shadow-natural img {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
box-shadow: none !important;
filter: none !important;
}
/* 13.3 Hi-Media-Card (Card ohne Baseline-Gap, saubere Rundung) */
.hi-media-card {
display: inline-block;
line-height: 0;
font-size: 0;
border-radius: 30px;
overflow: hidden;
}
.hi-media-card img {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
}
figure.hi-media-card {
margin: 0 !important;
}
@media (hover: none) and (pointer: coarse) {
.hi-media-card img {
-webkit-mask-image: -webkit-radial-gradient(white, black);
transform: translateZ(0);
}
}
/* =====================================================================
14) HI-UNDERLINE – Universaler Swirl-Link
---------------------------------------------------------------------
Klasse: .hi-underline an einem Link/Button/inline-Element.
Bekommt den CI-Swirl als Unterstrich, ohne Default-Textdecoration.
Hover-Preview nur auf Desktop (pointer:fine). Focus-visible für
Tastaturnutzer.
Variante für zentrierte Icons in Cards: .hi-stretch-underline
(siehe Block 15, anderes Verhalten).
===================================================================== */
.hi-underline {
position: relative;
display: inline-flex;
align-items: center;
gap: .25em;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.hi-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -0.25em;
width: 2.6rem;
height: 2px;
background: var(--hi-swirl);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transform: translateX(-0.45rem);
pointer-events: none;
transition: var(--hi-swirl-out);
}
/* Hover-Preview nur Desktop */
@media (hover: hover) and (pointer: fine) {
.hi-underline:hover::after {
opacity: .55;
transform: translateX(0);
background-position: 60% 0;
transition: var(--hi-swirl-in);
}
}
/* Tastatur-Fokus */
.hi-underline:focus-visible::after {
opacity: 1;
transform: translateX(0);
background-position: 100% 0;
}
/* =====================================================================
15) HI-STRETCH-UNDERLINE (Icon-Unterstrich zentriert in Stretch-Cards)
---------------------------------------------------------------------
Spezialvariante für den Fall: Card mit Stretched Link (Twentig),
Icon mittig, Unterstrich soll mittig drunter animieren – beim Hover
auf der ganzen Card (nicht nur beim Icon).
Nutzung:
...
iOS-Tap-Feedback ist hier speziell behandelt: Tap zeigt sofort den
Strich (mit kurzer Dauer), Fokus-Weg blendet weich aus. Wenn das
Verhalten auf Touchgeräten komisch wirkt, in 15.6 drehen.
===================================================================== */
/* 15.1 Default-Unterstreichung in Stretch-Cards deaktivieren */
.hi-stretch-underline,
.hi-stretch-underline a,
.tw-stretched-link:has(.hi-stretch-underline) a,
.tw-stretched-link:has(.hi-stretch-underline) a:hover,
.tw-stretched-link:has(.hi-stretch-underline) a:focus,
.tw-stretched-link:has(.hi-stretch-underline) a:focus-visible {
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* 15.2 Bezugspunkt */
.hi-stretch-underline {
position: relative;
display: inline-block;
}
/* 15.3 Strich mittig unter dem Icon */
.hi-stretch-underline::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.35em;
width: 2.6rem;
height: 2px;
background: var(--hi-swirl);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transform: translateX(calc(-50% - .6rem));
pointer-events: none;
transition:
opacity 180ms ease,
transform 260ms cubic-bezier(.4,0,.2,1),
background-position 420ms ease;
}
/* 15.4 Desktop-Hover über gesamte Card */
@media (hover: hover) and (pointer: fine) {
.tw-stretched-link:hover .hi-stretch-underline::after {
opacity: .55;
transform: translateX(-50%);
background-position: 60% 0;
}
}
/* 15.5 Tastatur-Fokus in Card */
.tw-stretched-link:focus-within .hi-stretch-underline::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
background-position: 100% 0;
}
/* 15.6 iOS/Safari – Tap + Afterglow (CSS-only) */
@media (hover: none) and (pointer: coarse) {
/* Tap: sofort sichtbar */
.tw-stretched-link:has(a:active) .hi-stretch-underline::after {
opacity: .90;
transform: translateX(calc(-50% - .15rem));
background-position: 100% 0;
transition:
opacity 120ms ease,
transform 180ms cubic-bezier(.2,.8,.2,1),
background-position 180ms ease;
}
/* Afterglow solange Fokus in Card */
.tw-stretched-link:focus-within .hi-stretch-underline::after {
opacity: .55;
transform: translateX(-50%);
background-position: 100% 0;
transition:
opacity 800ms ease,
transform 260ms ease,
background-position 420ms ease;
}
/* Fokus weg: weich ausblenden */
.tw-stretched-link:not(:focus-within) .hi-stretch-underline::after {
transition:
opacity 520ms ease,
transform 360ms cubic-bezier(.4,0,.2,1),
background-position 0ms linear;
}
}
/* =====================================================================
16) ASPECT-RATIO UTILITIES (Opt-in)
---------------------------------------------------------------------
Für Bilder in Image-Blocks oder Media-Text-Blocks, die auf Mobile
oder Tablet ein definiertes Seitenverhältnis bekommen sollen.
.hi-tablet-16x9 / .hi-mobile-16x9 → 16:9 mit cover (Ausschnitt)
.hi-tablet-contain / .hi-mobile-contain → 16:9 mit contain (volles
Bild, evtl. mit Letterbox)
Muss als zusätzliche Klasse im Block-Editor gesetzt werden.
Beide Breakpoints greifen unabhängig – auf Mobile + Tablet
gleichzeitig geht also beides kombinieren.
===================================================================== */
/* 16.1 TABLET 16:9 (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.wp-block-image.hi-tablet-16x9,
.hi-tablet-16x9.wp-block-image,
.wp-block-media-text__media.hi-tablet-16x9,
.wp-block-media-text.hi-tablet-16x9 .wp-block-media-text__media {
width: 100% !important;
overflow: hidden !important;
border-radius: inherit;
}
.wp-block-image.hi-tablet-16x9 img,
.hi-tablet-16x9.wp-block-image img,
.wp-block-media-text__media.hi-tablet-16x9 img,
.wp-block-media-text.hi-tablet-16x9 .wp-block-media-text__media img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Contain-Variante */
.wp-block-image.hi-tablet-contain,
.hi-tablet-contain.wp-block-image,
.wp-block-media-text__media.hi-tablet-contain,
.wp-block-media-text.hi-tablet-contain .wp-block-media-text__media {
overflow: hidden !important;
border-radius: inherit;
}
.wp-block-image.hi-tablet-contain img,
.hi-tablet-contain.wp-block-image img,
.wp-block-media-text__media.hi-tablet-contain img,
.wp-block-media-text.hi-tablet-contain .wp-block-media-text__media img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: contain !important;
object-position: center center !important;
}
}
/* 16.2 MOBILE 16:9 (bis 767px) */
@media (max-width: 767px) {
.wp-block-image.hi-mobile-16x9,
.hi-mobile-16x9.wp-block-image,
.wp-block-media-text__media.hi-mobile-16x9,
.wp-block-media-text.hi-mobile-16x9 .wp-block-media-text__media {
overflow: hidden !important;
border-radius: inherit;
}
.wp-block-image.hi-mobile-16x9 img,
.hi-mobile-16x9.wp-block-image img,
.wp-block-media-text__media.hi-mobile-16x9 img,
.wp-block-media-text.hi-mobile-16x9 .wp-block-media-text__media img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Contain-Variante */
.wp-block-image.hi-mobile-contain,
.hi-mobile-contain.wp-block-image,
.wp-block-media-text__media.hi-mobile-contain,
.wp-block-media-text.hi-mobile-contain .wp-block-media-text__media {
overflow: hidden !important;
border-radius: inherit;
}
.wp-block-image.hi-mobile-contain img,
.hi-mobile-contain.wp-block-image img,
.wp-block-media-text__media.hi-mobile-contain img,
.wp-block-media-text.hi-mobile-contain .wp-block-media-text__media img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: contain !important;
object-position: center center !important;
}
}
/* =====================================================================
17) MEDIA & TEXT – Radius für Bildbereich
---------------------------------------------------------------------
Gibt allen Media-Text-Blöcken einen 30px-Radius am Bild.
Wenn das auf einzelnen Blöcken nicht gewünscht ist (z.B. für
bewusst eckige Bilder), diese Regel per zusätzlicher Klasse
überschreiben – nicht hier wegnehmen.
===================================================================== */
.wp-block-media-text .wp-block-media-text__media {
overflow: hidden;
border-radius: 30px;
}
.wp-block-media-text .wp-block-media-text__media img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
}
/* =====================================================================
18) TEAM CARD FIX + ALWAYS-STACKED
---------------------------------------------------------------------
.cover-width-limit-opt-in: Cover-Block bekommt max-width 420px und
zentriert. Gut für Team-Member-Cards,
die sonst zu breit werden.
.always-stacked: Columns-Block, der NIE horizontal werden soll –
auch auf Desktop nicht. Opt-in für Fälle, wo man
aus semantischen Gründen Columns nutzt, aber immer
untereinander darstellen will.
===================================================================== */
.wp-block-cover.cover-width-limit-opt-in {
width: 100%;
max-width: 420px;
margin-inline: 0 auto;
overflow: hidden;
}
.wp-block-cover.cover-width-limit-opt-in .wp-block-cover__image-background,
.wp-block-cover.cover-width-limit-opt-in img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.always-stacked.wp-block-columns {
flex-direction: column !important;
}
.always-stacked.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
margin-inline-start: 0 !important;
}
/* =====================================================================
19) LIGHTBOX – uncropped + centered
---------------------------------------------------------------------
Der WP-Core-Lightbox-Dialog (wenn User auf ein Bild klickt) rendert
das Bild in einem Container, der manche Theme-Styles erbt – z.B.
den 2:3-Crop aus der Swipe-Gallery oder die Rundungen aus
.hi-gallery-cards. Das ist im Vollbild unerwünscht.
Dieser Block killt alle diese Erbstile aggressiv (deswegen die viele
!important) und erzwingt: Bild bleibt unbeschnitten, zentriert, mit
2rem Padding zum Viewportrand. dvh/svh-Fallbacks drin für iOS.
===================================================================== */
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay) {
overflow: visible !important;
}
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
.lightbox-image-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
:is(figure, figure.wp-block-image, .wp-block-image) {
margin: 0 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
overflow: visible !important;
flex: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
.lightbox-image-container :is(figure, figure.wp-block-image, .wp-block-image) {
max-width: calc(100vw - 2rem) !important;
max-height: calc(100vh - 2rem) !important;
max-width: calc(100dvw - 2rem) !important;
max-height: calc(100dvh - 2rem) !important;
}
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
:is(figure, figure.wp-block-image, .wp-block-image) img,
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
.lightbox-image-container img {
display: block !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: calc(100vw - 2rem) !important;
max-height: calc(100vh - 2rem) !important;
max-width: calc(100dvw - 2rem) !important;
max-height: calc(100dvh - 2rem) !important;
object-fit: contain !important;
object-position: center center !important;
aspect-ratio: auto !important;
border-radius: 0 !important;
}
/* Falls Gallery-Klassen in die Lightbox mitwandern */
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
.wp-block-gallery.swipe-gallery .wp-block-image {
aspect-ratio: auto !important;
overflow: visible !important;
flex: none !important;
border-radius: 0 !important;
}
:is(dialog.wp-lightbox-overlay, dialog.wp-lightbox-container, .wp-lightbox-overlay)
.wp-block-gallery.swipe-gallery .wp-block-image img {
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 0 !important;
}
/* =====================================================================
20) STICKY HEADER + COMPACT HEADER
---------------------------------------------------------------------
Macht den Header sticky (bleibt beim Scrollen oben kleben) und
schaltet zwischen zwei Größen um:
- Oben auf der Seite: groß, Logo 170px, viel Padding
- Gescrollt (nicht oben): kompakt, Logo 142px, wenig Padding
Das Umschalten geschieht via @container mit scroll-state. Das ist
ein neueres CSS-Feature (Chrome 133+, Feb 2025). Browser, die es
nicht können, sehen einfach IMMER den kompakten Header – funktional
ok, nur halt weniger Showoff.
Admin-Bar-Offsets (32px bzw. 46px mobile): damit der Header nicht
unter der WP-Admin-Bar verschwindet.
20.5 = spezifisch für Phone-Landscape im Fallback-Mode (wenn JS aus
ist). Im Desktop-Mode-JS wird der Guard html:not(...) aktiv und der
Header rendert normal groß.
===================================================================== */
/* 20.1 Sticky-Träger */
.wp-block-template-part-header:has(>.is-position-sticky),
header.wp-block-template-part:has(>.is-position-sticky) {
position: sticky !important;
top: 0 !important;
z-index: 9990 !important;
background-color: var(--wp--preset--color--background) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
translate: none !important;
transform: none !important;
}
.wp-block-template-part-header:has(>.is-position-sticky):hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
/* 20.2 Admin-Bar Desktop/Mobile */
#wpadminbar {
z-index: 10000 !important;
position: fixed !important;
}
body.admin-bar .wp-block-template-part-header:has(>.is-position-sticky),
body.admin-bar header.wp-block-template-part:has(>.is-position-sticky) {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar .wp-block-template-part-header:has(>.is-position-sticky),
body.admin-bar header.wp-block-template-part:has(>.is-position-sticky) {
top: 46px !important;
}
}
/* 20.3 COMPACT HEADER – Fallback: IMMER kompakt
(doppelter box-shadow aus Original entfernt – war identisch zu 20.1) */
.wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding-top: 0.65rem !important;
padding-right: clamp(1rem, 3vw, 1.4rem) !important;
padding-bottom: 0.65rem !important;
padding-left: clamp(1rem, 3vw, 1.4rem) !important;
transition: padding 0.25s ease;
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 142px;
max-width: 142px;
height: auto !important;
transition: width 0.25s ease, max-width 0.25s ease;
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-navigation-item__content,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-navigation-item__content {
padding-top: 0.22rem;
padding-bottom: 0.22rem;
transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
}
/* Mobile: kompakt, etwas luftiger */
@media (max-width: 782px) {
.wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding-top: 0.5rem !important;
padding-right: 1rem !important;
padding-bottom: 0.5rem !important;
padding-left: 1rem !important;
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 146px;
max-width: 146px;
}
}
/* 20.4 Enhancement: ganz oben wieder groß (moderne Browser) */
@supports (container-type: scroll-state) {
html {
container-type: scroll-state;
}
@container not scroll-state(scrollable: top) {
.wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding-top: clamp(1.5rem, 5vw, 2rem) !important;
padding-right: clamp(1.5rem, 5vw, 2rem) !important;
padding-bottom: clamp(1.5rem, 5vw, 2rem) !important;
padding-left: clamp(1.5rem, 5vw, 2rem) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 170px;
max-width: 170px;
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-navigation-item__content,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-navigation-item__content {
padding-top: 0.45rem;
padding-bottom: 0.45rem;
}
}
@media (max-width: 782px) {
@container not scroll-state(scrollable: top) {
.wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding-top: clamp(1.2rem, 4vw, 1.5rem) !important;
padding-right: clamp(1.2rem, 4vw, 1.5rem) !important;
padding-bottom: clamp(1.2rem, 4vw, 1.5rem) !important;
padding-left: clamp(1.2rem, 4vw, 1.5rem) !important;
}
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 170px;
max-width: 170px;
}
}
}
}
/* 20.5 MOBILE-LANDSCAPE FIX (Fallback-Mode):
Im flachen Landscape (max-height: 500px) bleibt der Header IMMER
kompakt – auch oben. Sonst würde das Enhancement aus 20.4 den Header
auf ~110–130px aufblähen, was bei 400px Viewport-Höhe fast 1/3 frisst.
Guard: Wenn der Viewport-JS-Hack aktiv ist, ist das gesamte Layout
im Desktop-Modus – dann greift 20.4 regulär und dieser Fix ist nicht
nötig. */
@media (orientation: landscape) and (max-height: 500px) {
html:not(.hi-landscape-desktop-mode) .wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
html:not(.hi-landscape-desktop-mode) header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding: 0.4rem 1rem !important;
}
html:not(.hi-landscape-desktop-mode) .wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
html:not(.hi-landscape-desktop-mode) header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 120px;
max-width: 120px;
}
@supports (container-type: scroll-state) {
@container not scroll-state(scrollable: top) {
html:not(.hi-landscape-desktop-mode) .wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
html:not(.hi-landscape-desktop-mode) header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky {
padding: 0.4rem 1rem !important;
}
html:not(.hi-landscape-desktop-mode) .wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
html:not(.hi-landscape-desktop-mode) header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo {
width: 120px;
max-width: 120px;
}
}
}
}
/* =====================================================================
21) MOBILE MENU OVERLAY – fullscreen sobald offen
---------------------------------------------------------------------
Sobald der Burger geklickt wird (WP fügt .is-menu-open an den
Navigation-Responsive-Container), wird das Menü auf Fullscreen
gestellt: fixed, inset 0, hohe z-index, scrollbar wenn nötig.
Besonderheiten:
- Close-Button (X) wird auf fixed gesetzt, sitzt immer oben rechts
am Viewport – nicht mit dem Menü-Content mitscrollen
- Logo oben mit Padding-right, damit's nicht unters X rutscht
- Admin-Bar-Offsets in 3 Varianten (Desktop/Mobile/sehr klein),
damit das Menü unter der Admin-Bar startet
- Swirl-Underline an Menüpunkten, gleiches System wie Navbar
- Header-Styles werden eingefroren, solange Menü offen ist
(sonst flackert der Sticky-Header-State beim Öffnen)
===================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
inset: 0 !important;
z-index: 10001 !important;
background: var(--wp--preset--color--background) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding:
calc(0.75rem + env(safe-area-inset-top))
var(--wp--preset--spacing--30)
calc(10rem + env(safe-area-inset-bottom)) !important;
box-sizing: border-box !important;
}
/* Admin-Bar Offsets */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
top: 32px !important;
inset: auto 0 0 0 !important;
height: calc(100vh - 32px) !important;
height: calc(100svh - 32px) !important;
height: calc(100dvh - 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
top: 46px !important;
inset: auto 0 0 0 !important;
height: calc(100vh - 46px) !important;
height: calc(100svh - 46px) !important;
height: calc(100dvh - 46px) !important;
}
}
/* Inneren Content nicht selbst scrollen lassen */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Logo oben: Platz rechts fürs X */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo {
margin: 0 0 0.75rem 0 !important;
padding-right: 64px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img,
.wp-block-navigation__responsive-container.is-menu-open .mobile-logo {
max-width: 220px !important;
height: auto !important;
display: block !important;
}
/* Close-Button immer am Viewport */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
position: fixed !important;
inset: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
top: calc(var(--wp--preset--spacing--30) + env(safe-area-inset-top)) !important;
right: calc(var(--wp--preset--spacing--30) + env(safe-area-inset-right)) !important;
inset-inline-start: auto !important;
inset-inline-end: calc(var(--wp--preset--spacing--30) + env(safe-area-inset-right)) !important;
width: 44px !important;
height: 44px !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: none !important;
z-index: 10002 !important;
}
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
top: calc(32px + var(--wp--preset--spacing--30) + env(safe-area-inset-top)) !important;
}
@media (max-width: 782px) {
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
top: calc(46px + var(--wp--preset--spacing--30) + env(safe-area-inset-top)) !important;
}
}
/* 21.1 Menü-Layout */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
gap: .25rem !important;
margin: 0 !important;
padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
a.wp-block-navigation-item__content {
display: block !important;
width: 100% !important;
padding: .85rem 0 !important;
text-decoration: none !important;
}
/* 21.2 HI-Underline-Look im Mobile-Menü */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__label {
position: relative;
display: inline-flex;
align-items: center;
gap: .25em;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__label::after {
content: "";
position: absolute;
left: 0;
bottom: -0.25em;
width: 2.6rem;
height: 2px;
background: var(--hi-swirl);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transform: translateX(-0.45rem);
pointer-events: none;
transition: var(--hi-swirl-out);
}
@media (hover: hover) and (pointer: fine) {
.wp-block-navigation__responsive-container.is-menu-open
a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after {
opacity: .55;
transform: translateX(0);
background-position: 60% 0;
transition: var(--hi-swirl-in);
}
}
.wp-block-navigation__responsive-container.is-menu-open
a.wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after {
opacity: 1;
transform: translateX(0);
background-position: 100% 0;
}
/* 21.3 Submenus */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
margin-top: .25rem !important;
padding-left: .75rem !important;
border-left: 1px solid rgba(0,0,0,.12);
}
/* 21.4 Header-Zustandswechsel einfrieren, solange Menü offen */
body:has(.wp-block-navigation__responsive-container.is-menu-open)
.wp-block-template-part-header:has(>.is-position-sticky) > .is-position-sticky,
body:has(.wp-block-navigation__responsive-container.is-menu-open)
header.wp-block-template-part:has(>.is-position-sticky) > .is-position-sticky,
body:has(.wp-block-navigation__responsive-container.is-menu-open)
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
body:has(.wp-block-navigation__responsive-container.is-menu-open)
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-site-logo img.custom-logo,
body:has(.wp-block-navigation__responsive-container.is-menu-open)
.wp-block-template-part-header:has(>.is-position-sticky) .wp-block-navigation-item__content,
body:has(.wp-block-navigation__responsive-container.is-menu-open)
header.wp-block-template-part:has(>.is-position-sticky) .wp-block-navigation-item__content {
transition: none !important;
}
/* =====================================================================
22) MOBILE MENU – Premium Motion
---------------------------------------------------------------------
Beim Öffnen: Overlay fadet rein (320ms), Content slided von rechts
rein (520ms, leichter Easing-Overshoot). Reduzierte Motion wird
respektiert (dann sofort da, ohne Animation).
===================================================================== */
@media (max-width: 1024px) {
.wp-block-navigation__responsive-container.is-menu-open {
animation: hiOverlayInPremium 320ms cubic-bezier(.22,.61,.36,1) both;
will-change: opacity;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
animation: hiMenuContentInPremium 520ms cubic-bezier(.22,.61,.36,1) both;
transform: translate3d(0,0,0);
backface-visibility: hidden;
contain: paint;
will-change: transform, opacity;
}
@keyframes hiOverlayInPremium {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes hiMenuContentInPremium {
0% { transform: translate3d(22px,0,0); opacity: 0; }
40% { opacity: 1; }
100% { transform: translate3d(0,0,0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
animation: none !important;
}
}
}
/* =====================================================================
23) PHONE LANDSCAPE – FALLBACK-BASIS + OPT-IN UTILITIES
---------------------------------------------------------------------
Das ist der CSS-Fallback für den Fall, dass das JS-Snippet aus dem
Plugin nicht läuft (JS deaktiviert, oder der User hat's geblockt).
Wenn das JS läuft, setzt es die Klasse `hi-landscape-desktop-mode`
auf und die meisten Regeln hier werden per :not() inaktiv.
Die Seite rendert dann normal im Desktop-Layout, nur runterskaliert.
Was in JEDEM Fall greift (auch wenn JS läuft):
- text-size-adjust:100% – damit iOS die Schrift im Landscape nicht
automatisch vergrößert (ohne das wird's teilweise riesig)
Was nur als Fallback greift (wenn JS aus ist):
- Minimale Seitenränder auf den Outer-Containern (1rem statt der
Theme-Defaults von oft 40px+), damit im flachen Phone-Landscape
nicht so viel Platz durch Leerraum frisst
- Die drei Opt-in-Klassen unten, die man im Block-Editor gezielt
an einzelne Blöcke hängt, wenn der Fallback nicht reicht
Die drei Opt-in-Klassen (Block-Editor → Zusätzliche CSS-Klassen):
.keep-landscape-row → Columns-Block bleibt nebeneinander,
stapelt nicht wie Extendable-Default
.show-in-landscape → Block wird sichtbar, auch wenn er
sonst auf Mobile/Tablet versteckt ist
.landscape-full-width → Block nutzt volle Viewportbreite
(entfernt max-width + Margins)
Realistisch: diese drei Klassen braucht man nur, wenn JS aus ist.
Wenn jemand mit aktivem JS eine Seite baut und die Klassen setzt,
passiert einfach nichts – stört also nicht.
===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
/* iOS-Auto-Inflation verhindern – auch im Desktop-Mode gültig. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* --- Ab hier nur im Fallback-Mode (JS nicht aktiv) --- */
/* Theme-Gutter-Variablen minimieren */
html:not(.hi-landscape-desktop-mode) {
--wp--style--root--padding-left: 1rem;
--wp--style--root--padding-right: 1rem;
}
/* Nur OUTER-Container, nicht Inner-Layouts. .has-global-padding und
.wp-site-blocks sind beide reine Gutter-Wrapper. */
html:not(.hi-landscape-desktop-mode) .wp-site-blocks,
html:not(.hi-landscape-desktop-mode) .has-global-padding {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* ----- Opt-in: Columns nebeneinander halten ----- */
html:not(.hi-landscape-desktop-mode) .keep-landscape-row.wp-block-columns {
display: flex !important;
flex-wrap: nowrap !important;
gap: clamp(12px, 2vw, 24px) !important;
}
html:not(.hi-landscape-desktop-mode) .keep-landscape-row.wp-block-columns > .wp-block-column {
flex: 1 1 0 !important;
flex-basis: 0 !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
}
/* ----- Opt-in: Im Landscape sichtbar machen ----- */
html:not(.hi-landscape-desktop-mode) .show-in-landscape,
html:not(.hi-landscape-desktop-mode) .show-in-landscape.wp-block-image,
html:not(.hi-landscape-desktop-mode) .show-in-landscape.wp-block-group,
html:not(.hi-landscape-desktop-mode) .show-in-landscape.wp-block-columns,
html:not(.hi-landscape-desktop-mode) .show-in-landscape.wp-block-column {
display: revert !important;
visibility: visible !important;
}
/* ----- Opt-in: Einzelne Blöcke volle Breite ----- */
html:not(.hi-landscape-desktop-mode) .landscape-full-width {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =====================================================================
24) ACCORDION-SLOW – eigene Kaskadenschicht
---------------------------------------------------------------------
Opt-in-Variante des Accordions mit langsamer, smooth Grid-Animation
(Klasse: .accordion-slow auf wp-block-accordion).
Trick: die Panels nutzen grid-template-rows 0fr → 1fr als Open/Close,
das animiert weich ohne JS-Height-Berechnung. Dauer: --duration
(standardmäßig 1400ms, also wirklich langsam – bewusst so). Wenn
das zu viel ist, oben im .accordion-slow an --duration drehen.
Warum @layer? Die Cascade-Layer sorgt dafür, dass diese Regeln auch
dann greifen, wenn irgendein späteres Update oder ein anderes Plugin
versucht, die WP-Core-Accordion-Styles zu reactivieren. Nicht
entfernen – klingt akademisch, hat aber schon mal einen Konflikt
abgefedert.
prefers-reduced-motion: wird respektiert, dann geht's praktisch
instant (0.01ms).
===================================================================== */
@layer wp-core-accordion-slow-final {
.wp-block-accordion.accordion-slow {
--duration: 1400ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--panel-space: 1rem;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-panel {
display: grid !important;
grid-template-rows: 0fr !important;
overflow: hidden !important;
transition: grid-template-rows var(--duration) var(--ease) !important;
/* WP-Flow-Abstände neutralisieren */
--wp--style--block-gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-item.is-open .wp-block-accordion-panel {
grid-template-rows: 1fr !important;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-panel > * {
min-height: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Gutenberg-Flow-Gap zwischen p + ul killen */
.wp-block-accordion.accordion-slow .wp-block-accordion-panel.is-layout-flow > * + * {
margin-block-start: 0 !important;
}
/* Abstand selbst setzen */
.wp-block-accordion.accordion-slow .wp-block-accordion-panel > p {
margin: 0 !important;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-panel > ul,
.wp-block-accordion.accordion-slow .wp-block-accordion-panel > ol {
margin: var(--panel-space) 0 0 !important;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-panel > :last-child {
margin-block-end: 0 !important;
}
/* Plus-Zeichen stabilisieren */
.wp-block-accordion.accordion-slow .wp-block-accordion-heading__toggle-icon {
display: inline-grid !important;
place-items: center !important;
inline-size: 1em !important;
block-size: 1em !important;
line-height: 1 !important;
flex: 0 0 1em !important;
transform-origin: center !important;
transition: transform var(--duration) var(--ease) !important;
}
.wp-block-accordion.accordion-slow .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
transform: rotate(135deg) !important;
}
@media (prefers-reduced-motion: reduce) {
.wp-block-accordion.accordion-slow .wp-block-accordion-panel,
.wp-block-accordion.accordion-slow .wp-block-accordion-heading__toggle-icon {
transition-duration: 0.01ms !important;
}
}
}
/* =====================================================================
25) WP DEFAULTS
---------------------------------------------------------------------
Kleine Defaults für Navigation, Separator, Template-Part.
MUSS am Ende der Datei stehen – diese Regeln gewinnen gegen die
Theme-Defaults durch ihre Position in der Kaskade. Wenn du sie
weiter oben einbaust, sind sie wirkungslos.
===================================================================== */
:root :where(.wp-block-navigation) { font-size: var(--wp--preset--font-size--small); }
:root :where(.wp-block-separator) { color: var(--wp--preset--color--foreground); }
:root :where(.wp-block-template-part) { margin-top: 0px; }