.jev-abschnitt--weiss { background: var(--jev-flaeche-weiss); }
.jev-abschnitt--warm  { background: var(--jev-flaeche-warm); }
.jev-abschnitt--hell  { background: var(--jev-flaeche-hell); }
.jev-abschnitt--kuehl { background: var(--jev-flaeche-kuehl); }
.jev-abschnitt--tief  { background: var(--jev-flaeche-tief); color: var(--jev-text-invers); }
.jev-abschnitt--nacht { background: var(--jev-flaeche-nacht); color: var(--jev-text-invers); }
.jev-abschnitt--tief :where(h1, h2, h3, h4),
.jev-abschnitt--nacht :where(h1, h2, h3, h4) { color: var(--jev-text-invers); }
.jev-abschnitt--tief .jev-fliess,
.jev-abschnitt--nacht .jev-fliess { color: var(--jev-text-invers-leise); }
.jev-eyebrow {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jev-signal);
margin: 0 0 var(--jev-a-2);
}
.jev-abschnitt--tief .jev-eyebrow,
.jev-abschnitt--nacht .jev-eyebrow { color: var(--jev-duene); }
.jev-fliess { max-width: var(--jev-breite-text); color: var(--jev-text-leise); }
.jev-fliess > p + p { margin-top: var(--jev-a-3); }
.jev-kopfgruppe { margin-bottom: var(--jev-a-5); }
.jev-kopfgruppe--mitte { text-align: center; margin-inline: auto; }
.jev-kopfgruppe--mitte .jev-fliess { margin-inline: auto; }
.jev-knopfzeile {
display: flex;
flex-wrap: wrap;
gap: var(--jev-a-3);
margin-top: var(--jev-a-4);
}
.jev-fussnote {
font-size: var(--jev-t-s);
color: var(--jev-text-leise);
margin-top: var(--jev-a-4);
}
.jev-hinweis {
border-left: 3px solid var(--jev-signal);
background: var(--jev-flaeche-warm);
padding: var(--jev-a-3) var(--jev-a-4);
border-radius: var(--jev-radius);
font-size: var(--jev-t-s);
margin-top: var(--jev-a-4);
}
.jev-abschnitt--tief .jev-hinweis,
.jev-abschnitt--nacht .jev-hinweis {
background: color-mix(in srgb, var(--jev-grund) 10%, transparent);
border-left-color: var(--jev-duene);
color: var(--jev-text-invers);
}
.jev-abschnitt.jev-buehne { padding-block: 0; }
.jev-buehne__raster { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 74rem) {
.jev-buehne__raster {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
min-height: 640px;
}
}
.jev-buehne__text {
display: flex;
align-items: center;
padding-block: var(--jev-a-7);
padding-inline: var(--jev-band-rand);
}
@media (max-width: 62rem) {
.jev-buehne__text { padding-inline: var(--jev-a-4); }
}
.jev-buehne__inner {
width: 100%;
max-width: 40rem;
}
.jev-buehne__leiste > .jev-huelle,
.jev-buehne__beleg > .jev-huelle {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: var(--jev-band-rand);
}
@media (max-width: 62rem) {
.jev-buehne__leiste > .jev-huelle,
.jev-buehne__beleg > .jev-huelle { padding-inline: var(--jev-a-4); }
}
.jev-buehne__kopf { margin-bottom: var(--jev-a-4); }
.jev-buehne__titel {
font-size: clamp(2.05rem, 1.2rem + 3.6vw, var(--jev-t-4xl));
margin: 0;
}
.jev-buehne__text .jev-fliess { margin: 0; max-width: 44ch; }
.jev-buehne__betont {
font-size: var(--jev-t-l);
font-weight: 500;
color: var(--jev-text-titel);
margin: var(--jev-a-4) 0 0;
}
.jev-buehne .jev-knopfzeile { margin-top: var(--jev-a-5); }
.jev-abschnitt.jev-buehne .jev-eyebrow { margin-bottom: var(--jev-a-3); }
.jev-buehne__medium {
position: relative;
overflow: hidden;
min-height: 26rem;
background: var(--jev-platzhalter);
}
.jev-buehne__medium > *,
.jev-buehne__medium img,
.jev-buehne__medium video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.jev-buehne__medium img { object-fit: cover; display: block; border-radius: 0; }
.jev-buehne__medium .jev-video--datei {
border-radius: 0;
background: none;
}
.jev-buehne__medium video { object-fit: cover; }
.jev-buehne__leiste { border-bottom: 1px solid var(--jev-rand); }
.jev-buehne__leiste > .jev-huelle { padding-block: var(--jev-a-3); }
.jev-buehne__leiste .jev-brotkrumen ol { font-size: var(--jev-t-xs); }
.jev-buehne__beleg {
background: var(--jev-flaeche-nacht);
color: var(--jev-text-invers);
}
.jev-buehne__beleg .jev-buehne__zahl b { color: var(--jev-text-invers); }
.jev-buehne__beleg .jev-buehne__zahl span { color: var(--jev-text-invers-leise); }
.jev-buehne__beleg .jev-buehne__zahl + .jev-buehne__zahl {
border-left-color: var(--jev-rand-invers);
}
.jev-buehne__beleg > .jev-huelle {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--jev-a-4);
padding-block: var(--jev-a-5);
}
@media (min-width: 48rem) {
.jev-buehne__beleg > .jev-huelle { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 47.999rem) {
.jev-buehne__beleg > .jev-huelle {
padding-block: var(--jev-a-4);
gap: var(--jev-a-3) var(--jev-a-4);
}
}
.jev-buehne__zahl { display: grid; gap: var(--jev-a-1); margin: 0; max-width: none; }
.jev-buehne__zahl b {
font-family: var(--jev-schrift-titel);
font-weight: 400;
font-size: var(--jev-t-2xl);
line-height: 1;
color: var(--jev-text-titel);
}
.jev-buehne__zahl span { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
@property --jev-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@keyframes jev-hochzaehlen { from { --jev-n: 0; } to { --jev-n: var(--jev-ziel); } }
.jev-zaehler { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
.jev-zaehler {
position: relative;
-webkit-text-fill-color: transparent;
counter-reset: jev-n var(--jev-n);
animation: jev-hochzaehlen 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.jev-zaehler::before {
content: counter(jev-n);
content: counter(jev-n) / "";
position: absolute;
left: 0;
-webkit-text-fill-color: currentColor;
}
}
.jev-buehne__zahl + .jev-buehne__zahl {
border-left: 1px solid var(--jev-rand);
padding-left: var(--jev-a-4);
}
@media (max-width: 47.999rem) {
.jev-buehne__beleg > .jev-huelle > .jev-buehne__zahl:nth-child(odd) {
border-left: 0;
padding-left: 0;
}
}
@property --jev-kopf-grund        { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --jev-kopf-vorder       { syntax: "<color>"; inherits: true; initial-value: #154c59; }
@property --jev-kopf-linie        { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --jev-kopf-leise        { syntax: "<color>"; inherits: true; initial-value: #a1928a; }
@property --jev-kopf-leise-grund  { syntax: "<color>"; inherits: true; initial-value: transparent; }
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
--jev-kopf-grund:        var(--jev-nacht);
--jev-kopf-vorder:       var(--jev-weiss);
--jev-kopf-linie:        color-mix(in srgb, var(--jev-weiss) 12%, transparent);
--jev-kopf-leise:        var(--jev-text-invers-leise);
--jev-kopf-leise-grund:  color-mix(in srgb, var(--jev-weiss) 16%, transparent);
background: var(--jev-kopf-grund);
border-bottom: 1px solid var(--jev-kopf-linie);
color: var(--jev-kopf-vorder);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__logo,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__symbol,
body:has(.jev-main > .jev-buehne:first-child) .jev-burger .jev-icon,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__rechts .jev-icon {
color: var(--jev-kopf-vorder);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__logo:hover,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__symbol:hover {
color: var(--jev-signal);
}
@media (min-width: 62.01rem) {
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a {
color: var(--jev-kopf-vorder);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a:hover,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a:focus-visible {
color: var(--jev-signal);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav .current-menu-item > a {
color: var(--jev-kopf-vorder);
}
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__korb--leer .jev-icon {
color: var(--jev-kopf-leise);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__korb--leer.jev-kopf__korb .jev-kopf__zahl {
background: var(--jev-kopf-leise-grund);
color: var(--jev-kopf-leise);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf {
background: var(--jev-signal);
border-color: var(--jev-signal);
color: var(--jev-nacht);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf:hover,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf:focus-visible {
background: var(--jev-signal-tief);
border-color: var(--jev-signal-tief);
color: var(--jev-nacht);
}
@supports (animation-timeline: scroll()) and (timeline-scope: --jev-buehne) {
body:has(.jev-main > .jev-buehne:first-child) { timeline-scope: --jev-buehne; }
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne { view-timeline: --jev-buehne block; }
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
animation: jev-kopf-aufhellen linear both;
animation-duration: auto;
animation-timeline: --jev-buehne;
animation-range: exit 76% exit 91%;
}
@keyframes jev-kopf-aufhellen {
to {
--jev-kopf-grund:        var(--jev-grund);
--jev-kopf-vorder:       var(--jev-text-titel);
--jev-kopf-linie:        var(--jev-rand);
--jev-kopf-leise:        var(--jev-platzhalter);
--jev-kopf-leise-grund:  var(--jev-rand);
}
}
}
@supports (animation-timeline: scroll()) {
body:has(.jev-main > .jev-buehne:first-child) {
--jev-kopf-hoehe: 71px;
--jev-krume-hoehe: 53px;
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
position: fixed;
inset-inline: 0;
}
body:has(.jev-main > .jev-buehne:first-child):has(.jev-navschalter:checked) .jev-kopf {
-webkit-backdrop-filter: none;
backdrop-filter: none;
z-index: 45;
}
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne { position: relative; }
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__leiste {
position: absolute;
inset-inline: 0;
top: var(--jev-kopf-hoehe);
z-index: 2;
border-bottom: 0;
}
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__text {
padding-top: calc(var(--jev-a-7) + var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
}
@media (max-width: 47.999rem) {
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__text {
padding-top: calc(var(--jev-a-5) + var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
}
}
}
.jev-kennzahlen__raster {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--jev-a-4);
text-align: center;
}
@media (min-width: 48rem) {
.jev-kennzahlen__raster { grid-template-columns: repeat(4, 1fr); }
}
.jev-kennzahl__wert {
display: block;
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-3xl);
line-height: 1.1;
color: var(--jev-signal);
font-variant-numeric: tabular-nums;
}
.jev-kennzahl__text {
display: block;
font-size: var(--jev-t-s);
color: var(--jev-text-leise);
margin-top: var(--jev-a-1);
}
.jev-abschnitt--tief .jev-kennzahl__text,
.jev-abschnitt--nacht .jev-kennzahl__text { color: var(--jev-text-invers-leise); }
.jev-abschnitt--tief .jev-kennzahl__wert,
.jev-abschnitt--nacht .jev-kennzahl__wert { color: var(--jev-duene); }
.jev-gegenueber__raster {
display: grid;
gap: var(--jev-a-4);
margin-top: var(--jev-a-5);
}
@media (min-width: 52rem) {
.jev-gegenueber__raster { grid-template-columns: 1fr 1fr; }
}
.jev-gegenueber__spalte {
padding: var(--jev-a-5);
border-radius: var(--jev-radius);
background: var(--jev-flaeche-weiss);
}
.jev-gegenueber__spalte--nein {
background: transparent;
box-shadow: inset 0 0 0 1px var(--jev-rand);
}
@media (max-width: 51.99rem) {
.jev-gegenueber__spalte { padding: var(--jev-a-4); }
.jev-gegenueber__spalte .jev-gegenueber__marke { margin-bottom: var(--jev-a-4); }
}
.jev-gegenueber__marke {
margin: 0 0 var(--jev-a-3);
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-s);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.jev-gegenueber__spalte--ja   .jev-gegenueber__marke { color: var(--jev-text-titel); }
.jev-gegenueber__spalte--nein .jev-gegenueber__marke { color: var(--jev-text-leise); }
.jev-gegenueber__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--jev-a-3);
}
.jev-gegenueber__liste li {
position: relative;
padding-left: 1.8rem;
font-size: var(--jev-t-m);
line-height: 1.35;
}
.jev-gegenueber__liste li::before {
position: absolute;
left: 0;
}
.jev-gegenueber__spalte--ja li { color: var(--jev-text); }
.jev-gegenueber__spalte--ja li::before {
content: "\2713";
top: 0;
font-size: 0.95em;
line-height: 1.5;
font-weight: 500;
color: var(--jev-ja);
}
.jev-gegenueber__spalte--nein li { color: var(--jev-text-leise); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja   .jev-gegenueber__marke,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja   .jev-gegenueber__marke { color: var(--jev-text-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein .jev-gegenueber__marke,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein .jev-gegenueber__marke { color: var(--jev-text-invers-leise); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja   li,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja   li { color: var(--jev-text-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein li,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein li { color: var(--jev-text-invers-leise); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja li::before,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja li::before { color: var(--jev-ja-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein li::before,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein li::before { color: var(--jev-nein-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte,
.jev-abschnitt--tief  .jev-gegenueber__spalte {
background: color-mix(in srgb, var(--jev-duene) 8%, transparent);
}
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein {
background: transparent;
box-shadow: inset 0 0 0 1px var(--jev-rand-invers);
}
.jev-gegenueber__spalte--nein li::before {
content: "\2715";
top: 0;
font-size: 0.8em;
line-height: 1.7;
color: var(--jev-nein);
}
.jev-karten__raster {
display: grid;
gap: var(--jev-a-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.jev-karten__raster:has(.jev-karte:nth-child(6):last-child) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 56rem) {
.jev-karten__raster:has(.jev-karte:nth-child(6):last-child) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
}
.jev-karte {
background: var(--jev-karte-grund);
border: 1px solid var(--jev-karte-rand);
border-radius: var(--jev-radius);
padding: var(--jev-a-4);
}
.jev-karte h3 { font-size: var(--jev-t-l); margin: 0 0 var(--jev-a-2); }
.jev-karte p  { margin: 0; color: var(--jev-text-leise); font-size: var(--jev-t-s); }
.jev-angebot__argumente {
list-style: none;
margin: var(--jev-a-6) 0 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
.jev-angebot__argumente {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--jev-a-6);
}
.jev-angebot__argumente li + li {
border-left: 1px solid var(--jev-rand-stark);
padding-left: var(--jev-a-6);
}
}
@media (max-width: 45.99rem) {
.jev-angebot__argumente li + li {
border-top: 1px solid var(--jev-rand-stark);
margin-top: var(--jev-a-4);
padding-top: var(--jev-a-4);
}
}
.jev-angebot__muster {
width: 3rem;
aspect-ratio: 1;
margin-bottom: var(--jev-a-3);
border-radius: var(--jev-radius);
--jev-muster-kachel: 16px;
}
.jev-angebot__titel {
font-size: var(--jev-t-l);
line-height: 1.2;
margin: 0 0 var(--jev-a-2);
}
.jev-angebot__text {
margin: 0;
font-size: var(--jev-t-s);
line-height: 1.55;
color: var(--jev-text-leise);
}
.jev-angebot__ueberleitung {
margin: var(--jev-a-7) 0 var(--jev-a-4);
font-size: var(--jev-t-xl);
max-width: 34ch;
}
.jev-angebot__aufruf { margin-top: var(--jev-a-6); }
.jev-angebot .jev-fussnote { margin-top: var(--jev-a-5); }
.jev-kacheln__raster {
display: grid;
gap: var(--jev-a-4);
grid-template-columns: repeat(2, 1fr);
}
.jev-kachel { display: flex; flex-direction: column; }
.jev-kachel__bild {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--jev-radius);
background: var(--jev-platzhalter);
}
.jev-kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jev-kachel__muster { position: absolute; inset: 0; display: block; }
.jev-kachel__name {
font-family: var(--jev-schrift-titel);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--jev-t-m);
margin-top: var(--jev-a-3);
}
.jev-kachel__unter { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin-top: var(--jev-a-1); }
.jev-kachel__bild > :where(img, .jev-kachel__muster) { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jev-kachel__name { transition: color 0.25s ease-out; }
@media (hover: hover) and (pointer: fine) {
.jev-kachel:hover .jev-kachel__name { color: var(--jev-signal); }
@media (prefers-reduced-motion: no-preference) {
.jev-kachel:hover .jev-kachel__bild > :where(img, .jev-kachel__muster) { transform: scale(1.05); }
}
}
@media (min-width: 62rem) {
.jev-kacheln__raster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 46rem) {
.jev-kacheln__raster {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
padding-bottom: var(--jev-a-3);
margin-inline: calc(var(--jev-a-4) * -1);
padding-inline: var(--jev-a-4);
}
.jev-kacheln__raster .jev-kachel {
flex: 0 0 72%;
scroll-snap-align: start;
}
.jev-kacheln__raster .jev-kachel:first-child {
scroll-margin-left: var(--jev-a-4);
}
}
.jev-leistungen__liste { list-style: none; margin: 0; padding: 0; }
.jev-leistungen__punkt {
display: grid;
gap: var(--jev-a-3) var(--jev-a-5);
padding-block: var(--jev-a-4);
border-top: 1px solid var(--jev-rand-stark);
align-items: start;
}
.jev-leistungen__punkt:last-child { border-bottom: 1px solid var(--jev-rand-stark); }
@media (min-width: 46rem) { .jev-leistungen__punkt { grid-template-columns: 4.5rem 1fr; } }
@media (min-width: 68rem) { .jev-leistungen__punkt { grid-template-columns: 4.5rem 19rem 1fr; } }
.jev-leistungen__kachel {
width: 4.5rem;
aspect-ratio: 1;
border-radius: var(--jev-radius);
--jev-muster-kachel: 22px;
}
.jev-leistungen__titel {
font-size: var(--jev-t-l);
margin: 0;
line-height: 1.2;
}
.jev-leistungen__text { margin: 0; color: var(--jev-text-leise); }
.jev-leistungen__zusatz {
display: block;
margin-top: var(--jev-a-2);
font-size: var(--jev-t-s);
color: var(--jev-text);
}
@media (min-width: 46rem) and (max-width: 67.99rem) {
.jev-leistungen__titel { margin-bottom: var(--jev-a-2); }
.jev-leistungen__text { grid-column: 2; }
}
.jev-abschnitt.jev-leistungen--kacheln { padding-block: 0; }
.jev-leistungen--kacheln .jev-leistungen__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
.jev-leistungen--kacheln .jev-leistungen__raster {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.jev-leistungen--kacheln .jev-leistungen__titel,
.jev-leistungen--kacheln .jev-leistungen__text {
grid-column: auto;
}
.jev-leistungen__bild {
position: relative;
overflow: hidden;
min-height: 20rem;
background: var(--jev-flaeche-nacht);
}
.jev-leistungen__bild img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jev-leistungen__seite {
padding-block: var(--jev-a-7);
padding-inline-start: var(--jev-a-6);
padding-inline-end: max(var(--jev-a-4), calc((100vw - var(--jev-breite)) / 2));
}
@media (max-width: 63.99rem) {
.jev-leistungen__seite { padding-inline: var(--jev-a-4); }
}
.jev-leistungen--kacheln .jev-leistungen__liste { margin-top: var(--jev-a-5); }
.jev-leistungen--kacheln .jev-leistungen__punkt {
display: grid;
gap: var(--jev-a-2);
padding-block: var(--jev-a-4);
border-top: 1px solid var(--jev-rand-stark);
grid-template-columns: minmax(0, 1fr);
}
.jev-leistungen--kacheln .jev-leistungen__punkt:last-child {
border-bottom: 1px solid var(--jev-rand-stark);
}
.jev-leistungen--kacheln .jev-leistungen__titel {
font-size: var(--jev-t-m);
margin: 0;
}
.jev-leistungen--kacheln .jev-leistungen__text {
font-size: var(--jev-t-s);
line-height: 1.55;
}
.jev-pakete__raster {
display: grid;
gap: var(--jev-a-4);
align-items: stretch;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
grid-template-rows: auto auto auto auto;
}
.jev-pakete__raster--knopf { grid-template-rows: auto auto auto 1fr auto; }
.jev-pakete__raster--knopf .jev-paket { grid-row: span 5; }
.jev-paket {
background: var(--jev-karte-grund);
border: 1px solid var(--jev-karte-rand);
border-radius: var(--jev-radius);
padding: var(--jev-a-4);
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
align-content: start;
height: 100%;
}
.jev-paket__name { font-size: var(--jev-t-l); margin: 0; }
.jev-paket__fuer {
font-size: var(--jev-t-s);
color: var(--jev-text-leise);
margin: var(--jev-a-2) 0 0;
}
.jev-paket__preis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--jev-a-3);
margin-top: var(--jev-a-4);
padding-block: var(--jev-a-3);
border-block: 1px solid var(--jev-rand);
}
.jev-paket__wert { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.jev-paket__wert + .jev-paket__wert {
padding-left: var(--jev-a-3);
border-left: 1px solid var(--jev-rand);
}
.jev-paket__wert span:last-child { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-paket__zahl {
font-family: var(--jev-schrift-titel);
font-size: clamp(0.95rem, 0.72rem + 1.05vw, 1.4rem);
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--jev-text-titel);
}
.jev-paket__liste {
list-style: none;
margin: var(--jev-a-4) 0 0;
padding: 0;
font-size: var(--jev-t-s);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.jev-paket__liste li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; }
.jev-paket__haken { color: var(--jev-lagune); }
.jev-paket__aktion { margin: var(--jev-a-4) 0 0; align-self: end; }
.jev-paket__aktion .jev-knopf { width: 100%; }
@media (max-width: 46rem) {
.jev-pakete__raster,
.jev-pakete__raster--knopf {
display: flex;
grid-template-rows: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scroll-padding-left: 0;
padding-bottom: var(--jev-a-3);
}
.jev-pakete__raster .jev-paket,
.jev-pakete__raster--knopf .jev-paket {
display: flex;
flex-direction: column;
grid-row: auto;
flex: 0 0 85%;
scroll-snap-align: start;
height: auto;
}
.jev-paket__aktion { margin-top: auto; padding-top: var(--jev-a-4); }
}
.jev-kacheln__raster,
.jev-pakete__raster,
.jev-bewegung__klein { scrollbar-width: none; }
.jev-kacheln__raster::-webkit-scrollbar,
.jev-pakete__raster::-webkit-scrollbar,
.jev-bewegung__klein::-webkit-scrollbar { display: none; }
.jev-preise__raster {
display: grid;
gap: var(--jev-a-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
align-items: stretch;
}
.jev-preis {
background: var(--jev-karte-grund);
border: 1px solid var(--jev-karte-rand);
border-radius: var(--jev-radius);
padding: var(--jev-a-4);
display: flex;
flex-direction: column;
height: 100%;
}
.jev-preis__name { font-size: var(--jev-t-l); margin: 0; }
.jev-preis__fuer { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin-top: var(--jev-a-1); }
.jev-preis__betrag {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-2xl);
color: var(--jev-lagune);
font-variant-numeric: tabular-nums;
margin-top: var(--jev-a-3);
}
.jev-preis__zusatz { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-preis__punkte {
list-style: none;
margin: var(--jev-a-3) 0 0;
padding: var(--jev-a-3) 0 0;
border-top: 1px solid var(--jev-rand);
font-size: var(--jev-t-s);
}
.jev-preis__punkte li { padding-block: var(--jev-a-1); }
.jev-ablauf__kopf { margin-bottom: var(--jev-a-5); }
.jev-ablauf__kopf h2 { margin: 0; }
.jev-ablauf__kopf--mitte {
text-align: center;
margin-inline: auto;
}
.jev-ablauf__kopf--mitte .jev-fliess {
max-width: 68ch;
margin-inline: auto;
}
.jev-ablauf__kopf--mitte .jev-fliess :where(ul, ol) {
display: table;
margin-inline: auto;
text-align: left;
}
.jev-ablauf__bild {
position: relative;
margin: 0 0 var(--jev-a-6);
aspect-ratio: 21 / 7;
overflow: hidden;
border-radius: var(--jev-radius);
background: var(--jev-platzhalter);
}
.jev-ablauf .jev-ablauf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jev-ablauf__bild .jev-video--datei { border-radius: 0; background: none; }
.jev-ablauf__bild :where(.jev-video__start, .jev-video__standbild, video) {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.jev-ablauf__bild :where(.jev-video__start, .jev-video__standbild) { display: block; }
.jev-ablauf__bild .jev-video--datei,
.jev-ablauf__bild .jev-video__start { position: absolute; inset: 0; }
.jev-ablauf--hochformat .jev-ablauf__bild {
aspect-ratio: 9 / 16;
max-width: var(--jev-breite-text);
margin-inline: 0;
}
@media (min-width: 62rem) {
.jev-ablauf--hochformat > .jev-huelle {
display: grid;
grid-template-columns: minmax(0, 1fr) 22rem;
grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
column-gap: var(--jev-a-6);
align-items: center;
}
.jev-ablauf--hochformat .jev-ablauf__kopf {
grid-column: 1;
grid-row: 2;
margin-bottom: 0;
}
.jev-ablauf--hochformat .jev-ablauf__bild {
grid-column: 2;
grid-row: 1 / -1;
margin: 0;
max-width: none;
}
.jev-ablauf--hochformat .jev-ablauf__liste { grid-column: 1; grid-row: 3; }
.jev-ablauf--hochformat .jev-ablauf__fussnote { grid-column: 1; grid-row: 4; }
.jev-ablauf--hochformat .jev-ablauf__liste { margin-top: var(--jev-a-6); }
}
@media (min-width: 62rem) and (max-width: 79.99rem) {
.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__liste { display: block; }
.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt {
grid-template-columns: 4rem 1fr;
gap: var(--jev-a-2) var(--jev-a-4);
padding-block: var(--jev-a-4);
}
.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt:last-child { border-bottom: 1px solid var(--jev-rand); }
.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt::before { grid-row: span 2; }
.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__titel { align-self: center; }
}
@media (hover: hover) and (pointer: fine) {
.jev-ablauf__bild .jev-video__knopf {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.jev-ablauf__bild .jev-video__start:hover .jev-video__knopf,
.jev-ablauf__bild .jev-video__start:focus-visible .jev-video__knopf {
opacity: 1;
transform: none;
}
.jev-ablauf__bild .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls {
opacity: 0;
transition: opacity 0.18s ease;
}
.jev-ablauf__bild .jev-video--datei:not(.jev-video--laeuft) video:hover::-webkit-media-controls {
opacity: 1;
}
}
.jev-ablauf__bild .jev-video__text {
position: absolute;
left: auto;
bottom: auto;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 44rem) { .jev-ablauf__bild { aspect-ratio: 3 / 2; } }
.jev-ablauf__liste { list-style: none; counter-reset: jev-schritt; margin: 0; padding: 0; }
.jev-ablauf__fussnote {
max-width: 68ch;
margin-top: var(--jev-a-6);
padding-top: 0;
border-top: 0;
font-size: var(--jev-t-xs);
line-height: 1.7;
}
@media (min-width: 62rem) {
.jev-ablauf--neben .jev-ablauf__liste {
display: grid;
grid-template-columns: repeat(var(--jev-ablauf-spalten, 3), minmax(0, 1fr));
gap: var(--jev-a-6);
}
.jev-ablauf--neben .jev-ablauf__schritt {
grid-template-columns: minmax(0, 1fr);
gap: var(--jev-a-2);
padding-block: var(--jev-a-3) 0;
border-bottom: 0;
}
.jev-ablauf--neben .jev-ablauf__schritt:last-child { border-bottom: 0; }
.jev-ablauf--neben .jev-ablauf__schritt::before {
grid-row: auto;
font-size: var(--jev-t-l);
color: var(--jev-signal);
}
.jev-ablauf--neben .jev-ablauf__titel { align-self: start; }
}
.jev-ablauf__schritt {
counter-increment: jev-schritt;
display: grid;
grid-template-columns: 4rem 1fr;
gap: var(--jev-a-2) var(--jev-a-4);
padding-block: var(--jev-a-4);
border-top: 1px solid var(--jev-rand);
}
.jev-ablauf__schritt:last-child { border-bottom: 1px solid var(--jev-rand); }
.jev-ablauf__schritt::before {
content: counter(jev-schritt, decimal-leading-zero);
grid-row: span 2;
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xl);
font-variant-numeric: tabular-nums;
line-height: 1.1;
color: var(--jev-platzhalter);
transition: color 0.25s ease-out;
}
.jev-ablauf__titel { font-size: var(--jev-t-m); margin: 0; align-self: center; transition: color 0.25s ease-out; }
.jev-ablauf__text  { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin: 0; }
.jev-ablauf__schritt:hover::before,
.jev-ablauf__schritt:focus-within::before { color: var(--jev-signal); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes jev-ablauf-hervor {
0%, 100% { opacity: 0.4; }
42%, 58% { opacity: 1; }
}
@keyframes jev-ablauf-ziffer {
0%, 100% { color: var(--jev-platzhalter); }
42%, 58% { color: var(--jev-signal); }
}
.jev-ablauf__titel,
.jev-ablauf__text {
animation: jev-ablauf-hervor linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
.jev-ablauf__schritt::before {
animation: jev-ablauf-ziffer linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
.jev-ablauf--neben .jev-ablauf__titel,
.jev-ablauf--neben .jev-ablauf__text,
.jev-ablauf--neben .jev-ablauf__schritt::before { animation: none; }
}
}
.jev-textmedien__raster {
display: grid;
gap: var(--jev-a-5);
align-items: center;
}
@media (min-width: 62rem) {
.jev-textmedien__raster { grid-template-columns: 1fr 1fr; gap: var(--jev-a-6); }
.jev-textmedien--links .jev-textmedien__medium { order: -1; }
}
.jev-textmedien__medium img { width: 100%; height: auto; border-radius: var(--jev-radius); }
.jev-textmedien--nurtext .jev-textmedien__raster { grid-template-columns: minmax(0, 1fr); }
.jev-textmedien--nurtext .jev-textmedien__text { max-width: 68ch; }
.jev-stimmen .jev-stimmen__schieber {
--jev-schieber-rand: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
--jev-schieber-luecke: var(--jev-a-4);
list-style: none;
margin: 0;
padding: 0 var(--jev-schieber-rand);
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * var(--jev-schieber-luecke)) / 3);
gap: var(--jev-schieber-luecke);
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scroll-padding-inline: var(--jev-schieber-rand);
scrollbar-width: none;
}
.jev-stimmen .jev-stimmen__schieber::-webkit-scrollbar { display: none; }
@media (max-width: 62rem) {
.jev-stimmen .jev-stimmen__schieber { grid-auto-columns: calc((100% - var(--jev-schieber-luecke)) / 2); }
}
@media (max-width: 40rem) {
.jev-stimmen .jev-stimmen__schieber { grid-auto-columns: 82%; }
}
.jev-stimme {
scroll-snap-align: start;
display: grid;
align-content: start;
gap: var(--jev-a-3);
margin: 0;
}
.jev-stimme__bild {
display: block;
width: 4.5rem;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
background: var(--jev-platzhalter);
}
.jev-stimme .jev-stimme__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.jev-stimme__sterne { font-size: var(--jev-t-xs); letter-spacing: .18em; color: var(--jev-signal); }
.jev-stimme blockquote {
margin: 0;
max-width: none;
font-size: var(--jev-t-m);
line-height: 1.65;
color: var(--jev-text);
}
.jev-stimme__wer { display: grid; gap: 1px; margin: 0; max-width: none; }
.jev-stimme__name {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-s);
font-weight: 400;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-stimme__ort { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-stimmen .jev-fussnote { margin-top: var(--jev-a-5); }
.jev-bewegung__raster { display: grid; gap: var(--jev-a-5); }
@media (min-width: 62rem) {
.jev-bewegung__raster { grid-template-columns: 1fr 1fr; gap: var(--jev-a-6); align-items: start; }
}
.jev-bewegung__marke { display: grid; gap: var(--jev-a-5); align-content: start; }
.jev-bewegung__marke h2 { margin: 0 0 var(--jev-a-3); }
@media (min-width: 62rem) {
.jev-bewegung__raster:not(:has(.jev-bewegung__stimmen)) { grid-template-columns: minmax(0, 1fr); }
.jev-bewegung__raster:not(:has(.jev-bewegung__stimmen)) .jev-bewegung__marke {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--jev-a-6);
align-items: center;
}
}
.jev-bewegung__gruenderinnen { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--jev-radius); }
.jev-bewegung__haupt .jev-video,
.jev-bewegung__haupt > img { aspect-ratio: 16 / 9; display: block; }
.jev-bewegung__zeile .jev-video,
.jev-bewegung__zeile > img { aspect-ratio: 1 / 1; display: block; }
.jev-bewegung :where(.jev-video__start, .jev-video__standbild, img, video) {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jev-bewegung__zeile:not(:has(img)):not(:has(.jev-video)) { grid-template-columns: 1fr; }
.jev-bewegung__haupt {
margin: 0;
background: var(--jev-flaeche-nacht);
color: var(--jev-text-invers-leise);
border-radius: var(--jev-radius);
overflow: hidden;
}
.jev-bewegung__haupt .jev-bewegung__text { padding: var(--jev-a-4); }
.jev-bewegung__haupt .jev-bewegung__zitat { color: var(--jev-text-invers); font-size: var(--jev-t-xl); }
.jev-bewegung__haupt .jev-bewegung__wer { color: var(--jev-text-invers-leise); }
.jev-bewegung__haupt .jev-bewegung__wer b { color: var(--jev-text-invers); }
.jev-bewegung__haupt .jev-video__hinweis { padding: 0 var(--jev-a-4) var(--jev-a-3); color: var(--jev-text-invers-leise); }
.jev-bewegung__klein { display: grid; gap: var(--jev-a-4); margin-top: var(--jev-a-4); }
@media (min-width: 46rem) {
.jev-bewegung__klein { grid-template-columns: 1fr 1fr; }
.jev-bewegung__klein > .jev-bewegung__haupt { grid-column: 1 / -1; }
}
@media (max-width: 45.99rem) {
.jev-bewegung__klein {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
gap: var(--jev-a-3);
padding-bottom: var(--jev-a-3);
margin-inline: calc(var(--jev-a-4) * -1);
padding-inline: var(--jev-a-4);
}
.jev-bewegung__klein > * {
flex: 0 0 82%;
scroll-snap-align: start;
}
.jev-bewegung__klein > :first-child { scroll-margin-left: var(--jev-a-4); }
.jev-bewegung__klein > .jev-bewegung__zeile { grid-template-columns: 1fr; align-content: start; }
}
.jev-bewegung__zeile {
margin: 0;
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--jev-a-3);
align-items: start;
}
.jev-bewegung__zeile .jev-video { border-radius: var(--jev-radius); overflow: hidden; }
.jev-bewegung__zeile .jev-bewegung__zitat { font-size: var(--jev-t-s); }
.jev-bewegung__zitat { margin: 0; font-size: var(--jev-t-l); line-height: 1.4; }
.jev-bewegung__wer { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin: var(--jev-a-2) 0 0; }
.jev-bewegung__wer b { display: block; color: var(--jev-text); font-weight: 500; }
.jev-bewegung__zeile .jev-video__knopf { width: 2.25rem; height: 2.25rem; }
.jev-bewegung__zeile .jev-video__knopf::after { border-width: 0.4rem 0 0.4rem 0.62rem; }
.jev-bewegung__zeile .jev-video__text { display: none; }
.jev-bewegung__zwischen {
margin: 0 0 var(--jev-a-5);
font-size: var(--jev-t-xl);
max-width: 34ch;
}
.jev-abschnitt.jev-territorium .jev-eyebrow,
.jev-abschnitt.jev-gegenueber .jev-eyebrow,
.jev-abschnitt.jev-aufruf .jev-eyebrow {
color: var(--jev-signal);
margin-bottom: var(--jev-a-4);
}
.jev-gegenueber__titel { margin: 0; max-width: 34ch; text-wrap: balance; }
.jev-gegenueber__akzent { display: block; color: var(--jev-signal); }
.jev-territorium__titel { margin: 0; max-width: 24ch; }
.jev-territorium__akzent { display: block; color: var(--jev-signal); }
.jev-territorium .jev-fliess { margin-top: var(--jev-a-4); }
.jev-territorium__liste {
list-style: none;
margin: var(--jev-a-5) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--jev-a-3);
}
.jev-territorium__ort {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 0 var(--jev-a-4);
border: 1px solid var(--jev-rand-invers);
border-radius: var(--jev-knopf-radius);
font-size: var(--jev-t-s);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.jev-territorium__nachsatz {
margin-top: var(--jev-a-4);
max-width: 54ch;
font-size: var(--jev-t-s);
color: var(--jev-text-invers-leise);
}
.jev-territorium .jev-knopfzeile { margin-top: var(--jev-a-5); }
.jev-territorium__knopf { padding: var(--jev-a-3) var(--jev-a-5); }
.jev-faq {
background: linear-gradient(to bottom, var(--jev-grund) 0%, var(--jev-mondschein) 100%);
position: relative;
}
.jev-faq::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: var(--jev-rand);
}
.jev-faq__liste { max-width: var(--jev-breite-text); }
.jev-faq__punkt { border-bottom: 1px solid var(--jev-rand); }
.jev-faq__frage {
cursor: pointer;
list-style: none;
padding-block: var(--jev-a-3);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--jev-a-3);
}
.jev-faq__frage::-webkit-details-marker { display: none; }
.jev-faq__frage::after {
content: "+";
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-l);
line-height: 1;
color: var(--jev-signal);
flex: none;
}
.jev-faq__punkt[open] .jev-faq__frage::after { content: "–"; }
.jev-faq__antwort { padding-bottom: var(--jev-a-3); color: var(--jev-text-leise); }
.jev-bildband { padding-block: 0; }
.jev-bildband img { width: 100%; height: auto; display: block; }
.jev-video { position: relative; }
.jev-video__start {
display: block;
position: relative;
cursor: pointer;
list-style: none;
border-radius: var(--jev-radius);
overflow: hidden;
}
.jev-video__start::-webkit-details-marker { display: none; }
.jev-video__standbild { width: 100%; height: auto; display: block; }
.jev-video__knopf {
position: absolute;
inset: 0;
margin: auto;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: var(--jev-signal);
display: block;
}
.jev-video__knopf::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0.7rem 0 0.7rem 1.1rem;
border-color: transparent transparent transparent var(--jev-text-invers);
transform: translateX(0.15rem);
}
.jev-video__text {
position: absolute;
left: var(--jev-a-3);
bottom: var(--jev-a-3);
background: var(--jev-flaeche-nacht);
color: var(--jev-text-invers);
font-size: var(--jev-t-xs);
padding: var(--jev-a-1) var(--jev-a-3);
border-radius: var(--jev-knopf-radius);
}
.jev-video[open] .jev-video__start { display: none; }
.jev-video__rahmen {
position: relative;
aspect-ratio: 16 / 9;
background: var(--jev-flaeche-nacht);
border-radius: var(--jev-radius);
overflow: hidden;
}
.jev-video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jev-video__hinweis { font-size: var(--jev-t-xs); color: var(--jev-text-leise); margin-top: var(--jev-a-2); }
@media (prefers-reduced-motion: reduce) {
.jev-video__start { transition: none; }
}
.jev-abschnitt.jev-formularblock {
padding-block: 0;
padding-left: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
padding-right: 0;
}
.jev-bewerbung__raster { display: grid; grid-template-columns: 1fr; }
@media (min-width: 46rem) {
.jev-bewerbung__raster {
grid-template-columns: minmax(0, 1fr) clamp(7rem, 12vw, 12rem);
gap: var(--jev-a-5);
}
}
.jev-bewerbung__inhalt {
min-width: 0;
max-width: 58rem;
padding-block: var(--jev-a-7);
padding-right: var(--jev-a-4);
}
.jev-abschnitt.jev-formularblock .jev-eyebrow {
color: var(--jev-signal);
margin-bottom: var(--jev-a-2);
}
.jev-bewerbung__titel { margin: 0 0 var(--jev-a-4); max-width: 24ch; }
.jev-bewerbung__akzent { display: block; color: var(--jev-signal); }
.jev-bewerbung__zaehler {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jev-text-leise);
margin: 0 0 var(--jev-a-3);
}
.jev-bewerbung__zaehler b { color: var(--jev-text-titel); font-weight: 400; }
.jev-bewerbung__frage {
font-family: var(--jev-schrift-text);
text-transform: none;
font-weight: 500;
font-size: var(--jev-t-l);
color: var(--jev-text-titel);
margin: 0 0 var(--jev-a-5);
}
.jev-bewerbung__block { display: none; }
.jev-bewerbung__felder { display: flex; flex-direction: column; gap: var(--jev-a-4); }
.jev-bewerbung__paar,
.jev-bewerbung__ort { display: grid; gap: var(--jev-a-3); align-items: start; }
@media (min-width: 40rem) {
.jev-bewerbung__paar { grid-template-columns: 1fr 1fr; }
.jev-bewerbung__ort  { grid-template-columns: 8rem 1fr; }
}
.jev-bewerbung__steuer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--jev-a-3);
margin-top: var(--jev-a-5);
padding-top: var(--jev-a-4);
border-top: 1px solid var(--jev-rand);
}
.jev-bewerbung__zurueck {
cursor: pointer;
font-size: var(--jev-t-s);
color: var(--jev-text-leise);
text-decoration: underline;
text-underline-offset: 3px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.jev-bewerbung__zusage,
.jev-bewerbung__wink-fest {
font-size: var(--jev-t-xs);
color: var(--jev-text-leise);
margin: 0;
max-width: 40ch;
}
.jev-bewerbung__wink { display: none; font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-bewerbung__schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--1,
#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--2,
#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--3 { display: block; }
.jev-bewerbung__block--1:not(:has(input[name="jev_situation"]:checked)) .jev-bewerbung__weiter,
.jev-bewerbung__block--1:not(:has(input[name="jev_modell"]:checked)) .jev-bewerbung__weiter,
.jev-bewerbung__block--2:has(textarea:placeholder-shown) .jev-bewerbung__weiter {
pointer-events: none;
opacity: 0.45;
}
.jev-bewerbung__block--1:not(:has(input[name="jev_situation"]:checked)) .jev-bewerbung__wink,
.jev-bewerbung__block--1:not(:has(input[name="jev_modell"]:checked)) .jev-bewerbung__wink,
.jev-bewerbung__block--2:has(textarea:placeholder-shown) .jev-bewerbung__wink { display: inline; }
.jev-bewerbung__streifen { position: relative; min-height: 120px; align-self: stretch; }
.jev-bewerbung__streifen::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: color-mix(in srgb, var(--jev-grund) 84%, transparent);
border-top: 2px solid var(--jev-signal);
transition: height 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.jev-bewerbung__streifen::after { transition: none; }
}
#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 66.7%; }
#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 33.3%; }
#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 0; border-top-width: 0; }
@media (max-width: 45.99rem) {
.jev-bewerbung__streifen {
min-height: 84px;
order: -1;
margin-left: calc(var(--jev-a-4) * -1);
}
.jev-bewerbung__streifen::after {
left: auto; right: 0; top: 0; bottom: 0; height: auto !important;
border-bottom: 0; border-left: 2px solid var(--jev-signal);
transition: width 0.35s ease-out;
}
#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 66.7%; }
#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 33.3%; }
#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 0; border-left-width: 0; }
}
.jev-feld {
display: flex;
flex-direction: column;
gap: var(--jev-a-2);
margin: 0;
max-width: none;
}
.jev-feld label,
.jev-feldgruppe legend {
font-size: var(--jev-t-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-feld input,
.jev-feld textarea {
font: inherit;
font-size: var(--jev-t-s);
min-height: 44px;
padding: var(--jev-a-2);
background: color-mix(in srgb, var(--jev-flaeche-warm) 28%, transparent);
color: var(--jev-text);
border: 1px solid var(--jev-rand-stark);
border-radius: var(--jev-radius);
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.jev-feld textarea { min-height: 5.5rem; }
.jev-feld input:focus-visible,
.jev-feld textarea:focus-visible { outline: 2px solid var(--jev-signal); outline-offset: 1px; }
.jev-feldgruppe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
.jev-feldgruppe legend { margin-bottom: var(--jev-a-2); }
.jev-wahl { display: flex; flex-wrap: wrap; gap: var(--jev-a-2); }
.jev-wahl label {
display: inline-flex;
align-items: center;
gap: var(--jev-a-2);
min-height: 44px;
padding: 0 var(--jev-a-3);
border: 1px solid var(--jev-rand-stark);
border-radius: var(--jev-knopf-radius);
font-size: var(--jev-t-s);
cursor: pointer;
}
.jev-wahl label:has(input:checked) {
border-color: var(--jev-text-titel);
box-shadow: inset 0 0 0 1px var(--jev-text-titel);
background: color-mix(in srgb, var(--jev-lagune) 6%, transparent);
}
.jev-zustimmung { display: grid; gap: var(--jev-a-2); }
@media (min-width: 52rem) {
.jev-zustimmung:has(> label + label) { grid-template-columns: 1fr 1fr; }
}
.jev-zustimmung label {
display: grid;
grid-template-columns: 1.25rem 1fr;
gap: var(--jev-a-3);
align-items: start;
min-height: 44px;
padding: var(--jev-a-2) var(--jev-a-3);
border: 1px solid var(--jev-rand);
border-radius: var(--jev-radius);
font-size: var(--jev-t-s);
cursor: pointer;
}
.jev-zustimmung label:has(input:checked) { border-color: var(--jev-text-titel); }
.jev-zustimmung input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--jev-lagune); }
.jev-honig { position: absolute; left: -9999px; }
.jev-meldung { padding: var(--jev-a-3); border-radius: var(--jev-radius); font-size: var(--jev-t-s); margin-bottom: var(--jev-a-4); }
.jev-meldung--erfolg { background: color-mix(in srgb, var(--jev-lagune) 12%, transparent); }
.jev-meldung--fehler { background: color-mix(in srgb, var(--jev-bluete) 18%, transparent); }
.jev-video--datei { border-radius: var(--jev-radius); overflow: hidden; background: var(--jev-flaeche-nacht); }
.jev-video--datei video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jev-video--direkt { display: block; }
.jev-video--direkt .jev-video__rahmen { border-radius: var(--jev-radius); }
.jev-vergleich__netto {
margin: 0 0 var(--jev-a-4);
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jev-text-leise);
}
.jev-vergleich__kacheln {
display: grid;
gap: var(--jev-a-4);
align-items: stretch;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: auto auto auto;
}
.jev-vergleich__kacheln--knopf { grid-template-rows: auto auto 1fr auto; }
@media (max-width: 74.99rem) {
.jev-vergleich__kacheln {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, auto auto auto);
}
.jev-vergleich__kacheln--knopf { grid-template-rows: repeat(2, auto auto 1fr auto); }
}
@media (max-width: 45.99rem) {
.jev-vergleich__kacheln {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-inline: calc(var(--jev-a-4) * -1);
padding: 0 var(--jev-a-4) var(--jev-a-3);
}
.jev-vergleich__kacheln::-webkit-scrollbar { display: none; }
.jev-vergleich__kacheln > .jev-vergleich__kachel {
flex: 0 0 84%;
height: auto;
scroll-snap-align: start;
grid-template-rows: auto auto 1fr;
}
.jev-vergleich__kacheln--knopf > .jev-vergleich__kachel { grid-template-rows: auto auto 1fr auto; }
.jev-vergleich__kacheln > .jev-vergleich__kachel:first-child { scroll-margin-left: var(--jev-a-4); }
}
.jev-vergleich__kachel {
background: var(--jev-grund);
border: 1px solid var(--jev-rand);
border-radius: var(--jev-radius);
padding: var(--jev-a-4);
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
grid-row: span 3;
align-content: start;
height: 100%;
}
.jev-vergleich__kacheln--knopf .jev-vergleich__kachel { grid-row: span 4; }
.jev-vergleich__kachel--hervor {
border-color: transparent;
box-shadow: inset 0 0 0 2px var(--jev-signal);
}
.jev-vergleich__marke {
display: block;
margin-bottom: var(--jev-a-2);
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jev-signal);
}
.jev-vergleich__name {
margin: 0;
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-m);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-vergleich__fuer {
margin: var(--jev-a-2) 0 0;
font-size: var(--jev-t-s);
line-height: 1.4;
color: var(--jev-text-leise);
}
.jev-vergleich__kachelpreis {
margin: var(--jev-a-3) 0;
padding-bottom: var(--jev-a-3);
border-bottom: 1px solid var(--jev-rand);
}
.jev-vergleich__zahl {
display: block;
font-family: var(--jev-schrift-text);
font-weight: 500;
font-size: var(--jev-t-xl);
line-height: 1.1;
color: var(--jev-text);
font-variant-numeric: tabular-nums;
}
.jev-vergleich__plus { color: var(--jev-signal); white-space: nowrap; }
.jev-vergleich__unter {
display: block;
margin-top: var(--jev-a-1);
font-size: var(--jev-t-xs);
color: var(--jev-text-leise);
}
.jev-vergleich__punkte {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: calc(var(--jev-a-3) * 0.75);
align-content: start;
font-size: var(--jev-t-s);
line-height: 1.4;
}
.jev-vergleich__punkt {
display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr);
gap: var(--jev-a-2);
color: var(--jev-text);
}
.jev-vergleich__haken {
color: var(--jev-text-titel);
line-height: inherit;
}
.jev-vergleich__kachelaktion { margin: var(--jev-a-4) 0 0; align-self: end; }
.jev-vergleich__kachelaktion .jev-knopf { width: 100%; justify-content: center; }
.jev-vergleich__kachelaktion .jev-knopf--signal {
background: var(--jev-flaeche-nacht);
color: var(--jev-knopf-text);
}
.jev-vergleich__kachelaktion .jev-knopf--signal:hover,
.jev-vergleich__kachelaktion .jev-knopf--signal:focus-visible {
background: color-mix(in srgb, var(--jev-nacht) 85%, #000);
}
.jev-vergleich__zusatz {
margin: var(--jev-a-5) 0 0;
max-width: 46rem;
padding: var(--jev-a-3) var(--jev-a-4);
background: var(--jev-grund);
border: 1px solid var(--jev-rand);
border-left: 3px solid var(--jev-signal);
border-radius: var(--jev-radius);
font-size: var(--jev-t-s);
line-height: 1.5;
color: var(--jev-text);
}
.jev-vergleich .jev-fussnote { margin-top: var(--jev-a-4); }
.jev-verzeichnis__raster {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
gap: var(--jev-a-5);
}
.jev-verzeichnis__raster::before {
content: "";
grid-column: 2;
grid-row: 1;
background: var(--jev-rand);
}
.jev-verzeichnis__text { grid-column: 1; }
.jev-verzeichnis__listen { grid-column: 3; }
.jev-verzeichnis__text .jev-fliess { margin-top: var(--jev-a-3); max-width: 46ch; }
.jev-verzeichnis__gruppe + .jev-verzeichnis__gruppe { margin-top: var(--jev-a-4); }
.jev-verzeichnis__marke {
margin: 0;
font-family: var(--jev-schrift-text);
font-size: var(--jev-t-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jev-text-leise);
}
.jev-verzeichnis__liste {
list-style: none;
margin: var(--jev-a-2) 0 0;
padding: 0;
columns: 2;
column-gap: var(--jev-a-4);
}
.jev-verzeichnis__liste li { break-inside: avoid; }
.jev-verzeichnis__liste a,
.jev-verzeichnis__liste span {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--jev-a-2);
min-height: 44px;
padding-block: var(--jev-a-2);
border-bottom: 1px solid var(--jev-rand);
font-size: var(--jev-t-s);
color: var(--jev-text);
text-decoration: none;
transition: color 0.18s ease, border-color 0.18s ease;
}
.jev-verzeichnis__liste a:hover,
.jev-verzeichnis__liste a:focus-visible {
color: var(--jev-text-titel);
border-color: var(--jev-text-titel);
}
.jev-verzeichnis__liste [aria-current] {
color: var(--jev-text-titel);
font-weight: 500;
border-color: var(--jev-text-titel);
}
.jev-verzeichnis__liste b {
font-weight: 400;
color: var(--jev-platzhalter);
font-variant-numeric: tabular-nums;
}
@media (max-width: 53.75rem) {
.jev-verzeichnis__raster { grid-template-columns: minmax(0, 1fr); gap: var(--jev-a-4); }
.jev-verzeichnis__raster::before { display: none; }
.jev-verzeichnis__text,
.jev-verzeichnis__listen { grid-column: 1; }
.jev-verzeichnis__listen { grid-row: 2; }
.jev-verzeichnis__liste { columns: 1; }
}
.jev-eckdaten__raster {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.jev-eckdaten__wort :is(h1, h2) {
margin: 0 0 var(--jev-a-3);
font-size: clamp(1.6rem, 6.2vw, var(--jev-t-4xl));
overflow-wrap: break-word;
}
.jev-eckdaten__einzug p {
font-size: var(--jev-t-l);
line-height: 1.6;
color: var(--jev-text);
}
.jev-eckdaten__taten {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: var(--jev-a-4) 0 0;
}
.jev-eckdaten__liste {
display: grid;
gap: var(--jev-a-3);
margin: 0;
padding: var(--jev-a-4);
border-radius: var(--jev-radius);
background: var(--jev-flaeche-weiss);
}
.jev-eckdaten__paar {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: 0.9rem;
align-items: start;
}
.jev-eckdaten__paar dt {
font-size: var(--jev-t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jev-platzhalter);
line-height: 1.5;
}
.jev-eckdaten__paar dd {
margin: 0;
font-size: var(--jev-t-s);
}
.jev-eckdaten__paar dd b {
display: block;
font-weight: 500;
color: var(--jev-text-titel);
}
.jev-eckdaten__paar dd span {
display: block;
margin-top: 2px;
font-size: var(--jev-t-xs);
line-height: 1.5;
color: var(--jev-text-leise);
}
@media (max-width: 56rem) {
.jev-eckdaten__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26rem) {
.jev-eckdaten__paar { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.jev-gegenstellung__rolle {
overflow-x: auto;
border-radius: var(--jev-radius);
-webkit-overflow-scrolling: touch;
}
.jev-gegenstellung__tabelle {
width: 100%;
min-width: 34rem;
border-collapse: collapse;
background: var(--jev-flaeche-weiss);
}
.jev-gegenstellung__tabelle th,
.jev-gegenstellung__tabelle td {
padding: 0.8rem 1.1rem;
border-bottom: 1px solid var(--jev-rand);
font-size: var(--jev-t-s);
line-height: 1.6;
text-align: left;
vertical-align: top;
}
.jev-gegenstellung__tabelle thead th {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-gegenstellung__tabelle tbody th {
font-weight: 400;
color: var(--jev-platzhalter);
}
.jev-gegenstellung__tabelle tr:last-child th,
.jev-gegenstellung__tabelle tr:last-child td {
border-bottom: 0;
}
.jev-behandlungspreise__einzel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: var(--jev-a-3);
}
.jev-behandlungspreis {
padding: var(--jev-a-4);
border-radius: var(--jev-radius);
background: var(--jev-flaeche-weiss);
}
.jev-behandlungspreis--betont {
background: var(--jev-text-titel);
color: var(--jev-weiss);
}
.jev-behandlungspreis h3 {
margin: 0 0 var(--jev-a-2);
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-s);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.jev-behandlungspreis__betrag {
margin: 0;
font-size: 1.9rem;
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.jev-behandlungspreis__zusatz {
margin: var(--jev-a-2) 0 0;
font-size: var(--jev-t-xs);
line-height: 1.6;
color: var(--jev-text-leise);
}
.jev-behandlungspreis--betont .jev-behandlungspreis__zusatz {
color: color-mix(in srgb, var(--jev-weiss) 78%, transparent);
}
.jev-behandlungspreise__zwischentitel {
margin: var(--jev-a-4) 0 var(--jev-a-2);
font-family: var(--jev-schrift-text);
font-size: var(--jev-t-m);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--jev-text-titel);
}
.jev-behandlungspreise__pakete {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.jev-paketzeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "name summe" "je je";
gap: 4px var(--jev-a-3);
align-items: baseline;
margin: 0;
padding: 0.9rem 1.2rem;
border-radius: var(--jev-radius);
background: var(--jev-flaeche-weiss);
font-size: var(--jev-t-s);
}
.jev-paketzeile b { grid-area: name; font-weight: 500; color: var(--jev-text-titel); }
.jev-paketzeile__summe {
grid-area: summe;
font-size: var(--jev-t-m);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.jev-paketzeile__je {
grid-area: je;
font-variant-numeric: tabular-nums;
color: var(--jev-text-leise);
}
.jev-paketzeile__spart { color: #3c7a5e; }
@media (max-width: 44rem) {
.jev-behandlungspreise__pakete { grid-template-columns: minmax(0, 1fr); }
}
.jev-textpreise__raster {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.jev-textpreise__wort .jev-fliess p { max-width: none; }
.jev-kosten {
padding: var(--jev-a-4);
border-radius: var(--jev-radius);
background: var(--jev-flaeche-weiss);
}
.jev-kosten__kopf,
.jev-kosten__gruppe > p {
margin: 0 0 var(--jev-a-2);
font-size: var(--jev-t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jev-platzhalter);
}
.jev-kosten dl { display: grid; margin: 0; }
.jev-kosten__gruppenname {
margin: var(--jev-a-3) 0 0;
font-size: var(--jev-t-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--jev-text-leise);
}
.jev-kosten__kopf + .jev-kosten__gruppenname { margin-top: 0; }
.jev-kosten dl > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--jev-rand);
}
.jev-kosten dl > div:last-child { border-bottom: 0; }
.jev-kosten dt { font-size: var(--jev-t-s); color: var(--jev-text-titel); }
.jev-kosten dt small {
display: block;
margin-top: 2px;
font-size: var(--jev-t-xs);
line-height: 1.5;
color: var(--jev-text-leise);
}
.jev-kosten dd {
margin: 0;
font-size: var(--jev-t-m);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--jev-text-titel);
white-space: nowrap;
}
.jev-kosten__betont dt { font-weight: 500; }
.jev-kosten__betont dd { color: var(--jev-signal); }
.jev-kosten__gruppe {
margin-top: var(--jev-a-4);
padding-top: var(--jev-a-3);
border-top: 1px solid var(--jev-rand);
}
.jev-kosten__spar { color: #3c7a5e; }
.jev-kosten__fuss {
margin: var(--jev-a-3) 0 0;
max-width: none;
font-size: var(--jev-t-xs);
line-height: 1.55;
color: var(--jev-platzhalter);
}
.jev-stadtbilder--band img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 24 / 7;
object-fit: cover;
}
.jev-stadtbilder--mosaik {
display: grid;
grid-template-columns: repeat(var(--jev-mosaik-spalten, 4), 1fr);
gap: 6px;
}
.jev-stadtbilder--mosaik img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
.jev-studios .jev-gegenstellung .jev-kopfgruppe,
.jev-studios .jev-gegenueber .jev-kopfgruppe,
.jev-studios .jev-faq .jev-kopfgruppe { margin-bottom: var(--jev-a-4); }
.jev-studios .jev-gegenstellung .jev-kopfgruppe .jev-fliess,
.jev-studios .jev-gegenueber .jev-kopfgruppe .jev-fliess { max-width: 62ch; }
.jev-studios .jev-gegenstellung h2,
.jev-studios .jev-gegenueber h2,
.jev-studios .jev-faq h2 { max-width: 24ch; text-wrap: balance; }
.jev-studios .jev-abschnitt + .jev-abschnitt { padding-top: 0; }
.jev-studios .jev-abschnitt + .jev-abschnitt > .jev-huelle {
border-top: 1px solid var(--jev-rand);
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.jev-studios .jev-finder + .jev-abschnitt { padding-top: clamp(2.5rem, 5vw, 4rem); }
.jev-studios .jev-finder + .jev-abschnitt > .jev-huelle {
border-top: 0;
padding-top: 0;
}
.jev-studios .jev-stadtbilder + .jev-abschnitt { padding-top: clamp(2.5rem, 5vw, 4rem); }
.jev-studios .jev-stadtbilder + .jev-abschnitt > .jev-huelle {
border-top: 0;
padding-top: 0;
}
@media (max-width: 56rem) {
.jev-textpreise__raster { grid-template-columns: minmax(0, 1fr); }
.jev-stadtbilder--mosaik { grid-template-columns: 1fr 1fr; }
.jev-stadtbilder--band img { aspect-ratio: 16 / 9; }
}
.jev-studios .jev-finder { border-bottom: 1px solid var(--jev-rand); }
.jev-studios .jev-abschnitt .jev-eyebrow { margin-bottom: var(--jev-a-3); }
.jev-studios .jev-faq__liste {
max-width: none;
columns: 2;
column-gap: clamp(2rem, 5vw, 4rem);
}
.jev-studios .jev-faq__punkt {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
@media (max-width: 56rem) {
.jev-studios .jev-faq__liste { columns: 1; }
}
.jev-studios .jev-abschnitt.jev-verzeichnis { background: var(--jev-flaeche-weiss); }
.jev-studios .jev-abschnitt.jev-verzeichnis > .jev-huelle { border-top: 0; }
.jev-studios > .jev-abschnitt:last-child {
background: linear-gradient(
to bottom,
var(--jev-grund) 0%,
var(--jev-grund) 40%,
var(--jev-mondschein) 100%
);
}
.jev-studios > .jev-abschnitt.jev-verzeichnis:last-child {
background: linear-gradient(
to bottom,
var(--jev-flaeche-weiss) 0%,
var(--jev-flaeche-weiss) 40%,
var(--jev-mondschein) 100%
);
}
.jev-studios .jev-gegenstellung__tabelle { --jev-tab-luft: var(--jev-a-4); }
.jev-studios .jev-gegenstellung__tabelle th:first-child,
.jev-studios .jev-gegenstellung__tabelle td:first-child { padding-left: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle th:last-child,
.jev-studios .jev-gegenstellung__tabelle td:last-child { padding-right: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle thead th { padding-top: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle tbody tr:last-child th,
.jev-studios .jev-gegenstellung__tabelle tbody tr:last-child td { padding-bottom: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle thead th {
font-family: var(--jev-schrift-text);
font-size: var(--jev-t-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jev-platzhalter);
}
.jev-studios .jev-gegenstellung__tabelle tbody th {
font-size: var(--jev-t-xs);
color: var(--jev-platzhalter);
}
.jev-studios .jev-gegenstellung__tabelle tbody td:last-child { color: var(--jev-text-titel); }
.jev-studios .jev-gegenstellung .jev-fussnote {
padding-left: var(--jev-a-4);
font-size: var(--jev-t-xs);
line-height: 1.55;
color: var(--jev-platzhalter);
}
.jev-studios .jev-gegenstellung__tabelle th,
.jev-studios .jev-gegenstellung__tabelle td { border-bottom: 0; }
.jev-studios .jev-gegenstellung__tabelle thead tr,
.jev-studios .jev-gegenstellung__tabelle tbody tr:not(:last-child) {
background-image: linear-gradient(var(--jev-rand), var(--jev-rand));
background-repeat: no-repeat;
background-size: calc(100% - 2 * var(--jev-tab-luft)) 1px;
background-position: var(--jev-tab-luft) bottom;
}
.jev-abschnitt.jev-buehne {
background: var(--jev-nacht);
color: var(--jev-text-invers);
overflow: hidden;
}
.jev-buehne .jev-buehne__titel,
.jev-buehne .jev-buehne__betont { color: var(--jev-weiss); }
.jev-buehne .jev-fliess { color: var(--jev-text-invers-leise); }
.jev-buehne .jev-buehne__leiste,
.jev-buehne .jev-buehne__beleg { border-color: var(--jev-rand-invers); }
.jev-buehne .jev-brotkrumen,
.jev-buehne .jev-brotkrumen a { color: var(--jev-text-invers-leise); }
.jev-buehne .jev-brotkrumen [aria-current] { color: var(--jev-weiss); }
.jev-buehne__medienfeld {
position: relative;
align-self: stretch;
justify-self: stretch;
width: 100%;
}
.jev-buehne__medium {
min-height: 26rem;
height: 100%;
background: none;
width: 100%;
border-radius: 0;
overflow: hidden;
}
.jev-buehne__kachel {
position: absolute;
right: 1.5rem;
bottom: 2.5rem;
width: 96px;
height: 96px;
border-radius: var(--jev-radius);
}
@media (max-width: 73.99rem) {
.jev-buehne__kachel { right: 1rem; bottom: 1rem; }
}
@media (max-width: 73.99rem) {
.jev-buehne__medienfeld { margin-inline: auto; margin-bottom: var(--jev-a-6); }
}
@media (max-width: 47.999rem) {
.jev-buehne__raster:has(+ .jev-buehne__beleg) > .jev-buehne__medienfeld {
margin-bottom: 0;
}
}
@supports (animation-timeline: scroll()) {
@media (min-width: 74rem) {
body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__medienfeld {
margin-top: calc(var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
}
}
}
.jev-buehne .jev-knopf--leise { color: var(--jev-weiss); }
.jev-buehne .jev-knopf--leise:hover,
.jev-buehne .jev-knopf--leise:focus-visible {
background: color-mix(in srgb, var(--jev-weiss) 12%, transparent);
}
.jev-buehne__beleg b,
.jev-buehne__beleg strong { color: var(--jev-weiss); }
@supports (animation-timeline: scroll()) {
body:has(.jev-main > .jev-buehne--ohnekrume:first-child) { --jev-krume-hoehe: 0px; }
}
@media (min-width: 74rem) {
.jev-buehne--ohnemedium .jev-buehne__raster {
grid-template-columns: minmax(0, 1fr);
padding-right: 0;
}
}
@media (min-width: 48rem) and (max-width: 73.99rem) {
.jev-buehne__raster {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
min-height: 28rem;
padding-right: var(--jev-a-4);
}
.jev-buehne__titel { font-size: clamp(1.75rem, 3.3vw, 2.5rem); }
.jev-buehne__inner { max-width: none; }
.jev-buehne__text { padding-right: var(--jev-a-4); }
.jev-buehne__medienfeld { margin-inline: 0; margin-bottom: 0; }
.jev-buehne--ohnemedium .jev-buehne__raster {
grid-template-columns: minmax(0, 1fr);
padding-right: 0;
}
.jev-buehne--ohnemedium .jev-buehne__inner { max-width: 40rem; }
}
.jev-abschnitt.jev-weiche { padding-block: 0; }
.jev-weiche__kopf {
padding-block: var(--jev-a-6) var(--jev-a-4);
text-align: center;
}
.jev-weiche__kopf > :last-child { margin-bottom: 0; }
.jev-weiche__kopf .jev-fliess { margin-inline: auto; }
.jev-weiche__band {
display: grid;
border-block: 1px solid var(--jev-rand);
}
@media (min-width: 62rem) {
.jev-weiche__band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.jev-weiche__weg {
display: grid;
align-content: start;
gap: var(--jev-a-3);
padding: var(--jev-a-6) var(--jev-band-rand);
}
@media (min-width: 62rem) {
.jev-weiche__weg + .jev-weiche__weg { border-left: 1px solid var(--jev-rand); }
}
@media (max-width: 61.99rem) {
.jev-weiche__weg + .jev-weiche__weg { border-top: 1px solid var(--jev-rand); }
.jev-weiche__weg { padding: var(--jev-a-5) var(--jev-a-4); }
}
.jev-weiche:not(:has(.jev-weiche__kopf)) .jev-weiche__band { border-top: 0; }
.jev-weiche__weg--haupt { background: var(--jev-flaeche-weiss); }
.jev-weiche__titel {
margin: 0;
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-l);
line-height: 1.15;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-weiche__text { margin: 0; font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-weiche .jev-knopfzeile { margin-top: var(--jev-a-2); }
.jev-weiche__weg:not(:has(.jev-weiche__titel)) {
justify-items: center;
padding-block: var(--jev-a-5);
}
.jev-aufruf__text > :last-child { margin-bottom: 0; }
.jev-aufruf .jev-fliess { max-width: 62ch; }
.jev-aufruf .jev-knopfzeile { margin-top: var(--jev-a-5); }
.jev-aufruf__liste {
list-style: none;
margin: var(--jev-a-5) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--jev-a-3);
}
.jev-aufruf__ort {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 0 var(--jev-a-4);
border: 1px solid var(--jev-rand-invers);
border-radius: var(--jev-knopf-radius);
font-size: var(--jev-t-s);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jev-text-invers);
}
.jev-aufruf__nachsatz {
margin: var(--jev-a-4) 0 0;
max-width: 54ch;
font-size: var(--jev-t-s);
color: var(--jev-text-invers-leise);
}
.jev-aufruf__knopf { padding: var(--jev-a-3) var(--jev-a-5); }
.jev-marke {
position: relative;
top: -0.42em;
font-size: 0.5em;
line-height: 0;
letter-spacing: 0;
vertical-align: baseline;
}
.jev-produkte .jev-kopfgruppe { max-width: 62ch; }
.jev-produkte .jev-shop__foto {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jev-produkte .jev-shop__bild { border-radius: var(--jev-radius); overflow: hidden; }
.jev-produkte .jev-shop__name { transition: color 0.25s ease-out; }
.jev-produkte .jev-shop__bild:focus-visible .jev-shop__name { color: var(--jev-signal); }
@media (hover: hover) and (pointer: fine) {
.jev-produkte .jev-shop__bild:hover .jev-shop__name { color: var(--jev-signal); }
}
@media (prefers-reduced-motion: no-preference) {
.jev-produkte .jev-shop__bild:focus-visible .jev-shop__foto { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
.jev-produkte .jev-shop__bild:hover .jev-shop__foto { transform: scale(1.05); }
}
}
@media (prefers-reduced-motion: reduce) {
.jev-produkte .jev-shop__bild:is(:hover, :focus-visible) .jev-shop__foto { transform: none; }
}
.jev-produkte .jev-produkte__schieber {
--jev-schieber-rand: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
--jev-schieber-luecke: var(--jev-a-4);
list-style: none;
margin: 0;
padding: 0 var(--jev-schieber-rand);
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * var(--jev-schieber-luecke)) / 3);
gap: var(--jev-schieber-luecke);
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scroll-padding-inline: var(--jev-schieber-rand);
scrollbar-width: none;
}
.jev-produkte .jev-produkte__schieber::-webkit-scrollbar { display: none; }
.jev-produkte .jev-produkte__schieber > * { scroll-snap-align: start; }
@media (max-width: 62rem) {
.jev-produkte .jev-produkte__schieber { grid-auto-columns: calc((100% - var(--jev-schieber-luecke)) / 2); }
}
@media (max-width: 40rem) {
.jev-produkte .jev-produkte__schieber { grid-auto-columns: 78%; }
}
.jev-produkte__weiter {
display: grid;
align-content: center;
gap: var(--jev-a-3);
margin: 0;
padding: var(--jev-a-5);
aspect-ratio: 3 / 4;
background: var(--jev-flaeche-warm);
}
.jev-produkte__weiter h3 {
margin: 0;
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-l);
line-height: 1.15;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-produkte__weiter p { margin: 0; font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-produkte__weiter .jev-knopfzeile { margin-top: var(--jev-a-2); }
.jev-studioauswahl__raster {
list-style: none;
margin: 0 0 var(--jev-a-5);
padding: 0;
display: grid;
gap: var(--jev-a-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 56rem) { .jev-studioauswahl__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .jev-studioauswahl__raster { grid-template-columns: minmax(0, 1fr); } }
.jev-studioauswahl__karte { margin: 0; }
.jev-studioauswahl__karte a {
display: grid;
gap: 5px;
text-decoration: none;
color: inherit;
}
.jev-studioauswahl__bild {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
margin-bottom: var(--jev-a-3);
border-radius: var(--jev-radius);
background: var(--jev-platzhalter);
}
.jev-studioauswahl__bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jev-studioauswahl__art {
justify-self: start;
font-size: var(--jev-t-xs);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--jev-signal);
}
.jev-studioauswahl__name {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-m);
line-height: 1.2;
text-transform: uppercase;
color: var(--jev-text-titel);
}
.jev-studioauswahl__ort { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-studioauswahl__karte a:hover .jev-studioauswahl__name,
.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__name { color: var(--jev-signal); }
.jev-studioauswahl__bild img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jev-studioauswahl__name { transition: color 0.25s ease-out; }
.jev-studioauswahl__weiter {
justify-self: start;
margin-top: var(--jev-a-1);
font-size: var(--jev-t-s);
color: var(--jev-signal);
opacity: 0;
transform: translateX(-0.5rem);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jev-studioauswahl__weiter::after { content: " \2192"; content: " \2192" / ""; }
.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__weiter { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
.jev-studioauswahl__karte a:hover .jev-studioauswahl__weiter { opacity: 1; transform: none; }
}
@media (hover: none) {
.jev-studioauswahl__weiter { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__bild img { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
.jev-studioauswahl__karte a:hover .jev-studioauswahl__bild img { transform: scale(1.05); }
}
}
@media (prefers-reduced-motion: reduce) {
.jev-studioauswahl__weiter { transform: none; }
}
.jev-textmedien__paar,
.jev-bewegung__paar {
display: grid;
gap: var(--jev-a-4);
grid-template-columns: repeat(var(--jev-paar-spalten, 2), minmax(0, 1fr));
align-items: start;
}
@media (max-width: 40rem) {
.jev-textmedien__paar,
.jev-bewegung__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jev-a-3); }
}
.jev-textmedien__portraet,
.jev-bewegung__portraet { display: grid; gap: 6px; margin: 0; }
.jev-textmedien__portraet img,
.jev-bewegung__portraet img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: 50% 22%;
border-radius: var(--jev-radius);
}
.jev-textmedien__portraet figcaption,
.jev-bewegung__portraet figcaption { display: grid; gap: 2px; }
.jev-textmedien__name,
.jev-bewegung__name {
font-family: var(--jev-schrift-titel);
font-size: var(--jev-t-s);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--jev-text-titel);
}
.jev-textmedien__rolle,
.jev-bewegung__rolle { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-textmedien--band { padding-block: 0; overflow: hidden; }
.jev-textmedien--band .jev-textmedien__raster {
width: 100%;
max-width: none;
margin: 0;
padding-left: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
gap: 0;
}
@media (min-width: 62rem) {
.jev-textmedien--band .jev-textmedien__raster {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
align-items: center;
}
}
.jev-textmedien--band .jev-textmedien__text {
padding-block: var(--jev-a-7);
padding-right: var(--jev-a-6);
}
@media (max-width: 61.99rem) {
.jev-textmedien--band .jev-textmedien__raster { padding-inline: 0; }
.jev-textmedien--band .jev-textmedien__text { padding-inline: var(--jev-a-4); padding-bottom: var(--jev-a-5); }
}
.jev-textmedien--band .jev-textmedien__paar {
gap: 0;
align-self: stretch;
align-items: stretch;
}
.jev-textmedien--band .jev-textmedien__portraet { gap: 0; position: relative; overflow: hidden; }
.jev-textmedien--band .jev-textmedien__portraet img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.jev-textmedien--band .jev-textmedien__portraet:hover img { transform: scale(1.03); }
}
.jev-textmedien--band .jev-textmedien__portraet img {
border-radius: 0;
height: 100%;
aspect-ratio: auto;
}
.jev-textmedien--band .jev-textmedien__portraet figcaption,
.jev-bewegung__portraet figcaption {
position: absolute;
inset: auto 0 0 0;
z-index: 1;
padding: var(--jev-a-6) var(--jev-a-4) var(--jev-a-4);
background: linear-gradient(
180deg,
transparent,
color-mix(in srgb, var(--jev-nacht) 16%, transparent) 28%,
color-mix(in srgb, var(--jev-nacht) 58%, transparent) 66%,
color-mix(in srgb, var(--jev-nacht) 78%, transparent)
);
}
.jev-textmedien--band .jev-textmedien__name,
.jev-bewegung__portraet .jev-bewegung__name { color: var(--jev-weiss); }
.jev-textmedien--band .jev-textmedien__rolle,
.jev-bewegung__portraet .jev-bewegung__rolle { color: var(--jev-text-invers-leise); }
.jev-fliess ul {
list-style: none;
margin-block: var(--jev-a-3);
padding-left: 0;
display: grid;
gap: var(--jev-a-2);
}
.jev-fliess ul li {
display: grid;
grid-template-columns: 1.75rem 1fr;
align-items: baseline;
}
.jev-fliess ul li::before {
content: "";
align-self: center;
width: 14px;
height: 14px;
--jev-muster-grund: transparent;
--jev-muster-kachel: 14px;
background-color: transparent;
background-size: 14px 14px;
background-position: 7px 7px;
}
.jev-fliess small {
display: block;
max-width: 62ch;
margin-top: var(--jev-a-4);
padding-top: var(--jev-a-3);
border-top: 1px solid var(--jev-rand);
font-size: var(--jev-t-xs);
line-height: 1.7;
color: var(--jev-text-leise);
}
.jev-abschnitt--tief .jev-fliess small,
.jev-abschnitt--nacht .jev-fliess small {
border-top-color: var(--jev-rand-invers);
color: var(--jev-text-invers-leise);
}
@media (min-width: 74rem) {
.jev-buehne--medienband .jev-buehne__raster { padding-right: 0; }
}
.jev-buehne--medienband .jev-knopfzeile:not(:has(*)) { display: none; }
@media (max-width: 47.999rem) {
.jev-buehne--medienband .jev-buehne__text { padding-bottom: 40px; }
}
@media (min-width: 48rem) {
.jev-buehne--medienband .jev-buehne__text { padding-right: 60px; }
}
.jev-buehne--medienband .jev-buehne__medienfeld {
width: 100%;
max-width: none;
margin: 0;
align-self: stretch;
}
.jev-buehne--medienband .jev-buehne__medium {
width: 100%;
height: 100%;
min-height: 22rem;
aspect-ratio: auto;
border-radius: 0;
}
@media (max-width: 73.99rem) {
.jev-buehne--medienband .jev-buehne__medium { aspect-ratio: 3 / 2; height: auto; }
}
@supports (animation-timeline: scroll()) {
@media (min-width: 74rem) {
body:has(.jev-main > .jev-buehne--medienband:first-child) .jev-buehne__medienfeld {
margin-top: 0;
}
}
}
@media (min-width: 48rem) and (max-width: 73.99rem) {
.jev-buehne--medienband .jev-buehne__raster { padding-right: 0; }
.jev-buehne--medienband .jev-buehne__medium {
height: 100%;
aspect-ratio: auto;
}
}
@media (min-width: 48rem) {
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) {
grid-template-columns: minmax(0, 1fr);
min-height: 32rem;
padding-right: 0;
}
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text,
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
grid-column: 1;
grid-row: 1;
}
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
z-index: 0;
align-self: stretch;
margin-inline: 0;
margin-bottom: 0;
}
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text {
position: relative;
z-index: 1;
padding-bottom: var(--jev-a-6);
max-width: 38rem;
pointer-events: none;
}
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text :where(a, button, summary, input, label) {
pointer-events: auto;
}
.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to right,
color-mix(in srgb, var(--jev-nacht) 88%, transparent) 0,
color-mix(in srgb, var(--jev-nacht) 70%, transparent) 26%,
color-mix(in srgb, var(--jev-nacht) 24%, transparent) 52%,
transparent 72%
);
}
}
@media (min-width: 48rem) {
.jev-buehne .jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
margin-top: 0;
}
}
.jev-buehne__medium :where(.jev-video__start, .jev-video__standbild, video) {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.jev-buehne__medium :where(.jev-video__start, .jev-video__standbild) { display: block; }
.jev-buehne__medium .jev-video__text {
position: absolute;
left: auto;
bottom: auto;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.jev-buehne__medium .jev-video__knopf {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.jev-buehne__medium .jev-video__start:hover .jev-video__knopf,
.jev-buehne__medium .jev-video__start:focus-visible .jev-video__knopf {
opacity: 1;
transform: none;
}
.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls {
opacity: 0;
transition: opacity 0.18s ease;
}
.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video:hover::-webkit-media-controls,
.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video:focus-within::-webkit-media-controls {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.jev-buehne__medium .jev-video__knopf,
.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls { transition: none; }
}
.jev-bewegung__portraet { position: relative; }
.jev-bewegung__portraet figcaption {
gap: 0;
border-radius: 0 0 var(--jev-radius) var(--jev-radius);
}