:root {
--pjm-fein--weg: 28px;
--pjm-fein--kurve: cubic-bezier(0.25, 1, 0.5, 1);
--pjm-fein--licht-kurve: cubic-bezier(0.33, 1, 0.68, 1);
--pjm-fein--weg-zeit: 1000ms;
--pjm-fein--licht-zeit: 700ms;
--pjm-fein--setzen: 1.06;
--pjm-fein--setzen-zeit: 1400ms;
--pjm-fein--zustand: var(--wp--custom--transition--state);
--pjm-fein--zoom: 1.03;
--pjm-fein--feld-weg: 380ms;
--pjm-fein--linie: 320ms;
--pjm-fein--entrollen: 560ms;
--pjm-fein--entroll-kurve: cubic-bezier(0.4, 0, 0.1, 1);
}
html.fein-einblenden [data-fein] { will-change: opacity, transform; }
html.fein-einblenden [data-fein="da"] {
transition:
opacity var(--pjm-fein--licht-zeit) var(--pjm-fein--licht-kurve),
transform var(--pjm-fein--weg-zeit) var(--pjm-fein--kurve);
transition-delay: var(--fein-versatz, 0ms);
}
html.fein-einblenden [data-fein="wartet"] {
opacity: 0;
transform: translate3d(0, var(--pjm-fein--weg), 0);
}
html.fein-einblenden [data-fein="wartet"] :is(.tile__photo, .karte__bild, .news-card__figure img) {
transform: scale(var(--pjm-fein--setzen));
}
html.fein-einblenden [data-fein="da"] :is(.tile__photo, .karte__bild, .news-card__figure img) {
transition: transform var(--pjm-fein--setzen-zeit) var(--pjm-fein--kurve);
transition-delay: var(--fein-versatz, 0ms);
}
@media print {
html.fein-einblenden [data-fein],
html.fein-einblenden [data-fein] :is(.tile__photo, .karte__bild, .news-card__figure img) {
opacity: 1 !important;
transform: none !important;
}
}
:where(html.fein-an-bildzoom) .tile__photo,
:where(html.fein-an-bildzoom) .karte__bild,
:where(html.fein-an-bildzoom) .news-card__figure img {
transition: transform var(--wp--custom--transition--slow);
}
:where(html.fein-an-bildzoom) .tile:hover .tile__photo,
:where(html.fein-an-bildzoom) .tile:focus-visible .tile__photo,
:where(html.fein-an-bildzoom) a.karte:hover .karte__bild,
:where(html.fein-an-bildzoom) a.karte:focus-visible .karte__bild,
:where(html.fein-an-bildzoom) .news-card:hover .news-card__figure img,
:where(html.fein-an-bildzoom) .news-card:focus-visible .news-card__figure img {
transform: scale(var(--pjm-fein--zoom));
}
@media (hover: none) {
:where(html.fein-an-bildzoom) .tile:hover .tile__photo,
:where(html.fein-an-bildzoom) a.karte:hover .karte__bild,
:where(html.fein-an-bildzoom) .news-card:hover .news-card__figure img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
html.fein-an-seitenwechsel .site-head { view-transition-name: pjm-kopf; }
html.fein-wechsel .site-head { background: var(--wp--preset--color--base); }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 280ms;
animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}
}
:where(html.fein-an-zeitmass) .hero-punkte__punkt {
transition:
background-color var(--pjm-fein--zustand),
transform var(--pjm-fein--zustand);
}
:where(html.fein-an-zeitmass) .karte__laden {
transition:
background-color var(--pjm-fein--zustand),
color var(--pjm-fein--zustand);
}
:where(html.fein-an-zeitmass) .sprache__marke {
transition:
color var(--pjm-fein--zustand),
border-color var(--pjm-fein--zustand);
}
:where(html.fein-an-zeitmass) .sprache__pfeil { transition: transform var(--pjm-fein--zustand); }
.nav__grund { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; display: none; }
@media (min-width: 60.001rem) and (prefers-reduced-motion: no-preference) {
html.fein-an-menue .nav__panel {
display: block;
visibility: hidden;
opacity: 0;
transform: translate(-50%, -6px);
pointer-events: none;
transition:
opacity 160ms var(--pjm-fein--licht-kurve),
transform 160ms var(--pjm-fein--licht-kurve),
visibility 0s linear 160ms;
}
html.fein-an-menue .nav__item[data-open="true"] .nav__panel {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
transition:
opacity 240ms var(--pjm-fein--licht-kurve),
transform 360ms var(--pjm-fein--kurve),
visibility 0s;
}
html.fein-an-menue:not(.fein-morph) .nav__list:has(.nav__item[data-open="true"]) .nav__item:not([data-open="true"]) .nav__panel {
transition: none;
}
html.fein-morph .nav__panel {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border-top-color: transparent;
transform: translate(calc(-50% + var(--fein-dx, 0px)), 0);
}
html.fein-morph .nav__item[data-open="true"] .nav__panel {
transform: translate(calc(-50% + var(--fein-dx, 0px)), 0);
transition:
opacity 220ms var(--pjm-fein--licht-kurve) 60ms,
transform var(--pjm-fein--feld-weg) var(--pjm-fein--kurve),
visibility 0s;
}
html.fein-morph:not(.fein-an-gleiten) .nav__list:has(.nav__item[data-open="true"]) .nav__item:not([data-open="true"]) .nav__panel {
transition: none;
}
html.fein-morph .nav__panel.fein-geht {
visibility: visible;
opacity: 0;
transition:
opacity 160ms var(--pjm-fein--licht-kurve),
transform 300ms var(--pjm-fein--kurve),
visibility 0s linear 300ms;
}
html.fein-morph .nav__item.fein-entrollt .nav__panel-grid > li {
animation: pjm-fein-licht 420ms var(--pjm-fein--licht-kurve) 260ms both;
}
html.fein-morph .nav__item.fein-entrollt.kurz .nav__panel-grid > li {
animation-duration: 260ms;
animation-delay: 90ms;
}
html.fein-morph .nav__grund {
display: block;
background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
-webkit-backdrop-filter: blur(24px) saturate(1.08);
backdrop-filter: blur(24px) saturate(1.08);
border-top: var(--wp--custom--rule--width) solid transparent;
box-shadow: 0 1px 2px rgba(0, 48, 91, 0.05), 0 18px 40px rgba(0, 48, 91, 0.10);
opacity: 0;
visibility: hidden;
transition:
opacity 160ms var(--pjm-fein--licht-kurve),
visibility 0s linear 160ms;
}
html.fein-morph .nav__grund.ist-dicht {
background: color-mix(in srgb, var(--wp--preset--color--base) 97%, transparent);
}
html.fein-morph .nav__grund.ist-offen {
opacity: 1;
visibility: visible;
transition:
left var(--pjm-fein--feld-weg) var(--pjm-fein--kurve),
top var(--pjm-fein--feld-weg) var(--pjm-fein--kurve),
width var(--pjm-fein--feld-weg) var(--pjm-fein--kurve),
height var(--pjm-fein--feld-weg) var(--pjm-fein--kurve),
background-color 300ms var(--pjm-fein--licht-kurve),
opacity 120ms var(--pjm-fein--licht-kurve),
visibility 0s;
}
html.fein-morph .nav__grund::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(var(--wp--custom--rule--width) * -1);
height: var(--wp--custom--rule--width);
background: var(--wp--preset--color--accent-logo);
transform-origin: 50% 50%;
}
html.fein-morph .nav__grund.entrollt {
animation: pjm-fein-entrollen var(--pjm-fein--entrollen) var(--pjm-fein--entroll-kurve) 90ms both;
}
html.fein-morph .nav__grund.entrollt:not(.kurz)::before {
animation: pjm-fein-linie var(--pjm-fein--linie) var(--pjm-fein--licht-kurve) both;
}
html.fein-morph .nav__grund.entrollt.kurz {
animation-duration: 340ms;
animation-delay: 0ms;
}
html.fein-an-schleier body::after {
content: "";
position: fixed;
inset: 0;
z-index: 65;
background: rgb(28 26 23 / 0.10);
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 240ms var(--pjm-fein--licht-kurve),
visibility 0s linear 240ms;
}
html.fein-an-schleier:has(.nav__item[data-open="true"]) body::after {
opacity: 1;
visibility: visible;
transition:
opacity 480ms var(--pjm-fein--licht-kurve),
visibility 0s;
}
html.fein-an-schleier .site-head { transition: z-index 0s linear 240ms; }
html.fein-an-schleier:has(.nav__item[data-open="true"]) .site-head { z-index: 70; transition: z-index 0s; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.fein-morph .nav__grund,
html.fein-morph .nav__grund.ist-dicht { background: var(--wp--preset--color--base); }
}
@keyframes pjm-fein-entrollen {
from { clip-path: inset(-2px -60px calc(100% - 2px) -60px); }
to   { clip-path: inset(-2px -60px -80px -60px); }
}
@keyframes pjm-fein-linie {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
@keyframes pjm-fein-licht {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes pjm-fein-eintrag {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: none; }
}
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
html.fein-an-schublade .nav__list {
display: flex;
visibility: hidden;
clip-path: inset(0 0 100% 0);
pointer-events: none;
transition:
clip-path 240ms var(--pjm-fein--licht-kurve),
visibility 0s linear 240ms;
}
html.fein-an-schublade .site-head[data-nav-open="true"] .nav__list {
visibility: visible;
clip-path: inset(0 0 0 0);
pointer-events: auto;
transition:
clip-path 520ms var(--pjm-fein--entroll-kurve),
visibility 0s;
}
html.fein-an-schublade .site-head[data-nav-open="true"] .nav__list > li {
animation: pjm-fein-licht 380ms var(--pjm-fein--licht-kurve) 180ms both;
}
}
@media (max-width: 60rem) {
html.fein-an-schleierMobil body::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: calc(100vh + 160px);
height: calc(100lvh + 160px);
z-index: 65;
background: rgb(28 26 23 / 0.20);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 220ms var(--pjm-fein--licht-kurve),
visibility 0s linear 220ms;
}
html.fein-an-schleierMobil:has(.site-head[data-nav-open="true"]) body::after {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 320ms var(--pjm-fein--licht-kurve),
visibility 0s;
}
html.fein-an-schleierMobil .site-head { transition: z-index 0s linear 220ms; }
html.fein-an-schleierMobil:has(.site-head[data-nav-open="true"]) .site-head { z-index: 70; transition: z-index 0s; }
}
@media (max-width: 60rem) and (pointer: coarse) {
html.fein-an-schleierMobil:has(.site-head[data-nav-open="true"]) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
html.fein-einblenden [data-fein],
html.fein-einblenden [data-fein] :is(.tile__photo, .karte__bild, .news-card__figure img) {
opacity: 1 !important;
transform: none !important;
}
:where(html.fein-an-bildzoom) .tile:hover .tile__photo,
:where(html.fein-an-bildzoom) a.karte:hover .karte__bild,
:where(html.fein-an-bildzoom) .news-card:hover .news-card__figure img { transform: none; }
body::after { transition: none !important; }
}