@font-face {
font-family: 'Bricolage Grotesque';
src: url('../schrift/bricolage.woff2?v=083a8351') format('woff2-variations');
font-weight: 200 800;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Bodoni Moda';
src: url('../schrift/bodoni.woff2?v=bff0e5bb') format('woff2-variations');
font-weight: 400 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Asap';
src: url('../schrift/asap.woff2?v=b05be867') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Bricolage Ersatz';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 97%;
ascent-override: 96%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Asap Ersatz';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 96%;
ascent-override: 94%;
descent-override: 24%;
line-gap-override: 0%;
}
:root {
--papier: #f4f2ee;
--tinte: #14171a;
--leise: #5a6068;
--linie: #d6d2cb;
--akzent: #0a72b6;
--dunkel: #0e1013;
--kreide: #f0eeea;
--titel: 'Bricolage Grotesque', 'Bricolage Ersatz', system-ui, sans-serif;
--zier: 'Bodoni Moda', 'Bricolage Ersatz', Georgia, serif;
--text: 'Asap', 'Asap Ersatz', system-ui, sans-serif;
--gross: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
--mittel: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
--klein: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
--a1: 4px;
--a2: 8px;
--a3: 16px;
--a4: 24px;
--a5: 40px;
--a6: 64px;
--r-knopf: 4px;
--r-karte: 12px;
--r-feld: 8px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--tempo: 1;
--d-druck: calc(160ms * var(--tempo));
--d-hinweis: calc(180ms * var(--tempo));
--bahn: 76rem;
--kopf-hoehe: 77px;
--band-hoehe: clamp(72px, 8vw, 124px);
--rand: 20px;
}
@media (max-width: 46rem) {
:root {
--band-hoehe: 46px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
color-scheme: light;
scrollbar-gutter: stable;
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--kopf-hoehe) + 7px);
}
body {
position: relative;
margin: 0;
background: var(--papier);
color: var(--tinte);
font-family: var(--text);
font-size: 1.0625rem;
line-height: 1.6;
overflow-x: clip;
}
h1,
h2,
h3 {
font-family: var(--titel);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
text-wrap: balance;
overflow-wrap: break-word;
hyphens: auto;
}
h1 {
font-size: var(--gross);
letter-spacing: -0.03em;
}
h2 {
font-size: var(--mittel);
}
h3 {
font-size: var(--klein);
line-height: 1.25;
}
p {
margin: 0;
max-width: 62ch;
color: var(--leise);
text-wrap: pretty;
}
p,
li,
dd,
address {
overflow-wrap: break-word;
}
img {
display: block;
max-width: 100%;
height: auto;
}
::selection {
background: color-mix(in oklab, var(--akzent) 26%, transparent);
}
a {
text-underline-offset: 0.22em;
}
:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 3px;
}
a,
button,
summary {
touch-action: manipulation;
}
.lebensraum {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100vh;
height: 100dvh;
pointer-events: none;
-webkit-mask-image:
linear-gradient(
100deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 42%,
rgba(255, 255, 255, 0.5) 62%,
#fff 82%
),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 80px, #fff 168px),
linear-gradient(180deg, #fff 0, #fff 40%, rgba(255, 255, 255, 0) 76%);
mask-image:
linear-gradient(
100deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 42%,
rgba(255, 255, 255, 0.5) 62%,
#fff 82%
),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 80px, #fff 168px),
linear-gradient(180deg, #fff 0, #fff 40%, rgba(255, 255, 255, 0) 76%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
@media (max-width: 60rem) {
.lebensraum {
opacity: 0.42;
-webkit-mask-image:
linear-gradient(
104deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 40%,
rgba(255, 255, 255, 0.46) 64%,
#fff 88%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 28%,
#fff 52%,
#fff 88%,
rgba(255, 255, 255, 0) 98%
);
mask-image:
linear-gradient(
104deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 40%,
rgba(255, 255, 255, 0.46) 64%,
#fff 88%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 28%,
#fff 52%,
#fff 88%,
rgba(255, 255, 255, 0) 98%
);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
}
body > main,
body > footer {
position: relative;
z-index: 1;
}
.bahn {
width: min(100% - var(--rand) * 2, var(--bahn));
margin-inline: auto;
}
.zum-inhalt {
position: absolute;
left: -9999px;
top: 0;
background: var(--akzent);
color: #fff;
padding: var(--a3) var(--a4);
font-weight: 600;
z-index: 100;
}
.zum-inhalt:focus {
left: 0;
}
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--a5);
font-family: var(--text);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--r-knopf);
cursor: pointer;
transition:
transform var(--d-druck) var(--ease-out),
background-color var(--d-hinweis) ease,
border-color var(--d-hinweis) ease;
}
.knopf:active {
transform: scale(0.97);
}
.knopf-haupt {
background: var(--akzent);
color: #fff;
}
.knopf-neben {
background: transparent;
color: var(--tinte);
border-color: var(--linie);
}
@media (hover: hover) and (pointer: fine) {
.knopf-haupt:hover {
background: color-mix(in oklab, var(--akzent) 86%, var(--tinte));
}
.knopf-neben:hover {
border-color: var(--tinte);
}
}
header {
position: sticky;
top: 0;
z-index: 20;
background: var(--papier);
border-bottom: 1px solid var(--linie);
transition:
background-color 260ms ease,
border-color 260ms ease;
}
.kopf {
display: flex;
align-items: center;
gap: var(--a4);
height: 76px;
width: min(100% - var(--rand) * 2, var(--bahn));
margin-inline: auto;
}
.marke {
position: relative;
display: flex;
align-items: center;
gap: var(--a3);
flex-shrink: 0;
text-decoration: none;
color: inherit;
min-height: 44px;
}
.marke img {
width: 148px;
}
.marke-auf-film {
position: absolute;
left: 0;
top: 50%;
translate: 0 -50%;
opacity: 0;
transition: opacity 260ms ease;
}
html.js[data-kopf='film'] header {
background: transparent;
border-bottom-color: transparent;
}
html.js[data-kopf='film'] header::before {
content: '';
position: absolute;
inset: 0 0 -56px 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgb(14 16 19 / 0.92) 0%,
rgb(14 16 19 / 0.84) 58%,
rgb(14 16 19 / 0.48) 76%,
rgb(14 16 19 / 0) 100%
);
}
html.js[data-kopf='film'] .marke-auf-papier {
opacity: 0;
}
html.js[data-kopf='film'] .marke-auf-film {
opacity: 1;
}
html.js[data-kopf='film'] .marke-ort {
color: rgb(240 238 234 / 0.88);
border-left-color: rgb(240 238 234 / 0.3);
}
html.js[data-kopf='film'] .kopf nav a {
color: var(--kreide);
}
html.js[data-kopf='film'] .menue-knopf {
color: var(--kreide);
border-color: rgb(240 238 234 / 0.42);
}
.marke-auf-papier {
transition: opacity 260ms ease;
}
.marke-ort {
display: flex;
align-items: center;
flex-shrink: 0;
min-height: 44px;
font-size: 0.8125rem;
color: var(--leise);
letter-spacing: 0.04em;
white-space: nowrap;
padding-left: var(--a3);
border-left: 1px solid var(--linie);
text-decoration: none;
transition: color var(--d-hinweis) ease;
}
.marke-ort[aria-current='page'] {
color: var(--tinte);
}
@media (hover: hover) and (pointer: fine) {
.marke-ort:hover {
color: var(--akzent);
}
}
.kopf nav {
margin-left: auto;
}
.kopf-rechts {
display: flex;
align-items: center;
gap: var(--a2);
flex-shrink: 0;
}
.sprachwechsel {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
font-family: var(--titel);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--leise);
text-decoration: none;
border-radius: 999px;
transition:
color var(--d-hinweis) ease,
background-color var(--d-hinweis) ease;
}
.sprachwechsel:active {
scale: 0.97;
}
@media (hover: hover) and (pointer: fine) {
.sprachwechsel:hover {
color: var(--tinte);
background: rgb(20 23 26 / 6%);
}
}
html.js[data-kopf='film'] .sprachwechsel {
color: rgb(240 238 234 / 0.88);
}
@media (hover: hover) and (pointer: fine) {
html.js[data-kopf='film'] .sprachwechsel:hover {
color: #fff;
background: rgb(255 255 255 / 12%);
}
}
.kopf nav ul {
display: flex;
align-items: center;
gap: var(--a3);
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.kopf nav a {
color: var(--tinte);
text-decoration: none;
font-size: 0.9375rem;
padding: var(--a2) 0;
border-bottom: 1px solid transparent;
transition:
color var(--d-hinweis) ease,
border-color var(--d-hinweis) ease;
}
@media (hover: hover) and (pointer: fine) {
.kopf nav a:hover {
color: var(--akzent);
border-bottom-color: var(--akzent);
}
}
@media (max-width: 77rem) {
.kopf {
gap: var(--a3);
justify-content: space-between;
}
}
.menue-sprache {
display: none;
}
@media (max-width: 30rem) {
.kopf .sprachwechsel {
display: none;
}
.menue-sprache {
display: block;
}
.kopf {
gap: var(--a2);
}
.marke img {
width: 96px;
}
.marke {
gap: var(--a2);
min-width: 0;
}
.marke-ort {
font-size: 0.6875rem;
padding-left: 6px;
}
}
.film-titel {
width: min(100% - var(--rand) * 2, 44rem);
margin-inline: auto;
text-align: center;
color: var(--kreide);
pointer-events: auto;
transform: scale(var(--titel-zoom, 1));
transform-origin: 50% 46%;
opacity: var(--titel-deckung, 1);
}
.film-titel h1 {
color: var(--kreide);
max-width: 16ch;
margin: 0 auto var(--a4);
text-wrap: balance;
}
.film-titel p {
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
color: var(--kreide);
opacity: 0.88;
max-width: 44ch;
margin-inline: auto;
}
.film-titel-knoepfe {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--a3);
margin-top: var(--a5);
}
.knopf-film {
background: rgb(14 16 19 / 0.62);
color: var(--kreide);
border-color: rgb(240 238 234 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
.knopf-film:hover {
background: rgb(14 16 19 / 0.8);
border-color: var(--kreide);
}
}
.film-hinweis {
position: absolute;
left: 50%;
bottom: clamp(var(--a5), 5vh, var(--a6));
translate: -50% 0;
width: 1px;
height: 34px;
background: linear-gradient(180deg, rgb(240 238 234 / 0), var(--kreide));
opacity: calc(0.72 * var(--tg, 1));
pointer-events: none;
}
.filmstrecke {
position: relative;
background: var(--dunkel);
}
.film {
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
overflow: hidden;
background: var(--dunkel);
}
.film canvas {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate3d(var(--schub-x, 0%), var(--schub-y, 0%), 0) scale(var(--zoom, 1.045));
transform-origin: 50% 50%;
will-change: transform;
}
.film canvas[data-oben] {
opacity: var(--blende, 0);
will-change: transform, opacity;
}
.film::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
rgb(14 16 19 / 0.55) 0%,
rgb(14 16 19 / 0.1) 36%,
rgb(14 16 19 / 0.75) 100%
);
}
.film-seiten,
.film-schleier,
.film-graphit {
position: absolute;
inset: 0;
pointer-events: none;
}
.film-seiten {
z-index: 3;
opacity: var(--lg, 1);
background: linear-gradient(
90deg,
rgb(14 16 19 / 0.84) 0%,
rgb(14 16 19 / 0.56) 50%,
rgb(14 16 19 / 0.84) 100%
);
}
.film-schleier {
z-index: 4;
opacity: var(--tg, 0.4);
background: radial-gradient(
132% 96% at 50% 46%,
rgb(14 16 19 / 0.34) 0%,
rgb(14 16 19 / 0.52) 44%,
rgb(14 16 19 / 0.82) 100%
);
}
.film-graphit {
z-index: 5;
opacity: var(--tiefdunkel, 0);
background: rgb(14 16 19);
will-change: opacity;
}
.laden {
position: absolute;
inset: auto 0 0 0;
z-index: 6;
display: flex;
align-items: center;
gap: var(--a3);
padding: var(--a4) var(--rand);
color: var(--kreide);
font-size: 0.8125rem;
letter-spacing: 0.06em;
transition: opacity 280ms var(--ease-out);
}
.film[data-zustand='bereit'] .laden,
.film[data-zustand='standbild'] .laden {
opacity: 0;
visibility: hidden;
}
.laden-schiene {
flex: 1;
height: 2px;
background: rgba(240, 238, 234, 0.2);
position: relative;
overflow: hidden;
}
.laden-schiene::after {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: var(--anteil, 0%);
background: var(--akzent);
transition: width 200ms linear;
}
.kapitel {
position: relative;
z-index: 3;
overflow-x: clip;
min-height: 145vh;
min-height: 145dvh;
display: grid;
align-content: center;
pointer-events: none;
}
.film-vorlauf {
position: relative;
z-index: 4;
overflow-x: clip;
min-height: 100vh;
min-height: 100dvh;
margin-top: -100vh;
margin-top: -100dvh;
display: grid;
align-content: center;
pointer-events: none;
}
.kapitel-inhalt {
opacity: calc(1 - var(--auslauf, 0));
width: min(100% - var(--rand) * 2, var(--bahn));
margin-inline: auto;
max-width: 46rem;
padding-block: var(--a6);
}
.kapitel-wort {
display: block;
font-family: var(--titel);
font-weight: 900;
font-size: min(6rem, 13.5vw);
line-height: 0.92;
letter-spacing: -0.03em;
text-transform: uppercase;
white-space: nowrap;
color: var(--kreide);
margin: 0 0 var(--a4);
}
@media (max-width: 30rem) {
.kapitel-wort {
font-size: 13vw;
letter-spacing: -0.02em;
}
}
@media (min-width: 60rem) {
.kapitel-inhalt {
display: grid;
}
.kapitel--links .kapitel-inhalt {
justify-items: start;
}
.kapitel--rechts .kapitel-inhalt {
justify-items: end;
}
.kapitel--rechts .kapitel-wort {
transform-origin: right center;
}
}
.kapitel-satz {
font-size: clamp(1.125rem, 1rem + 0.7vw, 1.6rem);
line-height: 1.35;
color: var(--kreide);
max-width: 30ch;
font-weight: 500;
}
.kapitel-karte {
margin-top: var(--a5);
padding: var(--a4);
max-width: 30rem;
border-radius: var(--r-karte);
background: rgba(240, 238, 234, 0.08);
border: 1px solid rgba(240, 238, 234, 0.16);
pointer-events: auto;
}
.kapitel-karte p {
color: var(--kreide);
font-size: 1rem;
opacity: 0.86;
}
.kapitel-inhalt {
transform: translate(0, var(--y, 0px)) scale(var(--tiefe, 1));
transform-origin: 50% 50%;
}
.kapitel-wort {
position: relative;
transform: scale(calc(0.93 + 0.07 * var(--ein, 1) + 0.18 * var(--aus, 0)));
transform-origin: left center;
}
.zeichen {
display: inline-block;
--f: clamp(0, calc(var(--ein, 1) * (var(--n, 8) + 5) - var(--i, 0)), 1);
clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0);
opacity: calc((0.13 + 0.87 * var(--f)) * (1 - var(--aus, 0)));
}
.kapitel-wort::after {
content: '';
position: absolute;
top: 6%;
bottom: 6%;
left: calc(var(--ein, 1) * 100%);
width: 2px;
background: var(--akzent);
opacity: calc(
clamp(0, calc(var(--ein, 1) * 8), 1) * clamp(0, calc((1 - var(--ein, 1)) * 8), 1) *
(1 - var(--aus, 0))
);
}
.kapitel-satz,
.kapitel-karte {
--fs: clamp(0, calc((var(--ein, 1) - 0.34) / 0.52), 1);
clip-path: inset(0 calc((1 - var(--fs)) * 100%) 0 0);
opacity: calc(var(--fs) * (1 - var(--aus, 0)));
}
@media (min-width: 60rem) {
.kapitel--rechts .kapitel-satz,
.kapitel--rechts .kapitel-karte {
clip-path: inset(0 0 0 calc((1 - var(--fs)) * 100%));
}
.kapitel--rechts .zeichen {
clip-path: inset(0 0 0 calc((1 - var(--f)) * 100%));
}
.kapitel--rechts .kapitel-wort::after {
left: auto;
right: calc(var(--ein, 1) * 100%);
}
}
.kapitel[data-offen] .zeichen,
.kapitel[data-offen] .kapitel-satz,
.kapitel[data-offen] .kapitel-karte {
clip-path: none;
}
@media (prefers-reduced-motion: reduce) {
.zeichen,
.kapitel-wort,
.kapitel-satz,
.kapitel-karte,
.kapitel-inhalt,
.film-titel {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
.kapitel-wort::after {
display: none;
}
.film {
position: relative;
}
.film-auslauf,
.film-rest,
.film-hinweis {
display: none;
}
.reise-im-film {
display: none;
}
.film canvas {
transform: none !important;
}
.kapitel {
margin-top: 0;
min-height: auto;
padding-block: var(--a6);
}
}
.abschnitt {
padding-block: clamp(var(--a6), 8vw, 112px);
}
.abschnitt-kopf {
margin-bottom: var(--a6);
}
.abschnitt-kopf p {
margin-top: var(--a4);
}
.verzeichnis {
border-top: 1px solid var(--linie);
}
.eintrag {
display: grid;
gap: var(--a2);
padding-block: var(--a5);
border-bottom: 1px solid var(--linie);
}
@media (min-width: 52rem) {
.eintrag {
grid-template-columns: 20rem 1fr auto;
gap: var(--a5);
align-items: baseline;
}
}
.eintrag h3 {
font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
}
.eintrag p {
font-size: 1rem;
max-width: 46ch;
}
.abgrenzung {
background: var(--tinte);
color: var(--kreide);
}
.abgrenzung-inhalt {
padding-block: clamp(var(--a6), 8vw, 104px);
}
.abgrenzung h2 {
max-width: 22ch;
}
.abgrenzung h2 {
margin-bottom: var(--a4);
}
.abgrenzung p {
color: var(--kreide);
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
.abgrenzung p + p {
margin-top: var(--a4);
font-size: 1rem;
opacity: 0.78;
}
.anfrage-inhalt {
display: grid;
gap: var(--a5);
padding-block: clamp(var(--a6), 8vw, 112px);
}
.anfrage-inhalt .knopf {
justify-self: start;
}
.fuss {
border-top: 1px solid var(--linie);
padding-block: var(--a6);
font-size: 0.9375rem;
}
.fuss-raster {
display: grid;
gap: var(--a5);
}
@media (min-width: 48rem) {
.fuss-raster {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.fuss-raster {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
}
.klein-titel {
font-family: var(--text);
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--leise);
margin-bottom: var(--a3);
font-weight: 700;
}
.fuss ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--a2);
}
.fuss a {
color: var(--tinte);
text-decoration: none;
display: flex;
align-items: center;
min-height: 44px;
line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
.fuss a:hover {
color: var(--akzent);
text-decoration: underline;
}
}
.fuss-schluss {
margin-top: var(--a6);
padding-top: var(--a4);
border-top: 1px solid var(--linie);
color: var(--leise);
font-size: 0.875rem;
max-width: none;
text-align: center;
}
.fuss-schluss a {
color: var(--tinte);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.menue-knopf {
display: none;
margin-left: auto;
align-items: center;
gap: var(--a2);
min-height: 44px;
padding: 0 var(--a3);
background: transparent;
color: var(--tinte);
font-family: var(--text);
font-size: 0.9375rem;
font-weight: 600;
border: 1px solid var(--linie);
border-radius: var(--r-knopf);
cursor: pointer;
transition:
transform var(--d-druck) var(--ease-out),
border-color var(--d-hinweis) ease;
}
.menue-knopf:active {
transform: scale(0.97);
}
.menue-strich {
width: 16px;
height: 9px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
}
@media (max-width: 77rem) {
.menue-knopf {
display: inline-flex;
}
.kopf nav {
display: block;
position: absolute;
top: 68px;
right: var(--rand);
z-index: 60;
margin-left: 0;
min-width: 14rem;
padding: var(--a2);
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
box-shadow: 0 12px 28px rgb(20 23 26 / 14%);
transform-origin: top right;
transform: scale(0.95);
opacity: 0;
visibility: hidden;
transition:
transform 190ms var(--ease-out),
opacity 140ms var(--ease-out),
visibility 0s linear 190ms;
}
.kopf nav[data-offen] {
transform: scale(1);
opacity: 1;
visibility: visible;
transition:
transform 190ms var(--ease-out),
opacity 190ms var(--ease-out),
visibility 0s;
}
.kopf nav ul {
display: grid;
gap: 0;
}
.kopf nav a {
display: block;
padding: var(--a3);
border-bottom: none;
border-radius: var(--r-feld);
}
html.js[data-kopf='film'] .kopf nav a {
color: var(--tinte);
}
.kopf nav li + li {
border-top: 1px solid var(--linie);
}
html:not(.js) .menue-knopf {
display: none;
}
html:not(.js) .kopf nav {
position: static;
transform: none;
opacity: 1;
visibility: visible;
box-shadow: none;
border: none;
padding: 0;
margin-left: auto;
}
html:not(.js) .kopf nav ul {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
}
html:not(.js) .kopf nav li + li {
border-top: none;
}
}
.kopf {
position: relative;
}
.kopf nav a[aria-current='page'] {
color: var(--akzent);
border-bottom-color: var(--akzent);
}
.seitenkopf {
padding-block: var(--a5) clamp(var(--a5), 6vw, 80px);
}
.seitenkopf h1 {
max-width: 18ch;
}
@media (min-width: 64rem) {
.seitenkopf {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
column-gap: clamp(32px, 5vw, 96px);
align-items: end;
}
.seitenkopf > .krume,
.seitenkopf > .ueberzeile {
grid-column: 1 / -1;
}
.seitenkopf > h1 {
grid-column: 1;
margin-bottom: 0;
max-width: 14ch;
}
.seitenkopf > .vorspann,
.seitenkopf > .vorspann-mehr {
grid-column: 2;
margin: 0 0 0.35em;
padding-left: clamp(24px, 2.6vw, 44px);
border-left: 1px solid var(--linie);
}
.seitenkopf > .vorspann:has(+ .vorspann-mehr) {
margin-bottom: 0;
padding-bottom: var(--a3);
}
.seitenkopf > .hinweiszeile,
.seitenkopf > :not(.krume):not(.ueberzeile):not(h1):not(.vorspann):not(.vorspann-mehr) {
grid-column: 1 / -1;
}
}
.krume {
margin-bottom: var(--a5);
}
.krume ol {
display: flex;
flex-wrap: wrap;
gap: var(--a2);
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
color: var(--leise);
}
.krume li + li::before {
content: '/';
margin-right: var(--a2);
color: var(--linie);
}
.krume a {
color: var(--leise);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.krume a:hover {
color: var(--akzent);
text-decoration: underline;
}
}
.vorspann {
margin-top: var(--a4);
font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
color: var(--tinte);
max-width: 46ch;
}
.vorspann-mehr {
margin-top: var(--a3);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--leise);
max-width: 46ch;
}
.sprachhinweis {
margin: 0 0 var(--a5);
padding: var(--a3) var(--a4);
border: 1px solid var(--linie);
border-radius: 14px;
background: rgb(20 23 26 / 4%);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--leise);
}
.hinweiszeile {
padding-bottom: var(--a5);
font-size: 0.9375rem;
}
.eintrag {
position: relative;
}
.eintrag h2,
.eintrag h3 {
font-family: var(--titel);
font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
}
.eintrag h2 a,
.eintrag h3 a {
color: var(--tinte);
text-decoration: none;
}
.eintrag h2 a::after,
.eintrag h3 a::after {
content: '';
position: absolute;
inset: 0;
}
.eintrag-pfeil {
align-self: center;
justify-self: end;
width: 22px;
height: 1px;
background: var(--leise);
transition:
width var(--d-hinweis) var(--ease-out),
background-color var(--d-hinweis) ease;
}
@media (hover: hover) and (pointer: fine) {
.eintrag:hover h2 a,
.eintrag:hover h3 a {
color: var(--akzent);
}
.eintrag:hover .eintrag-pfeil {
width: 36px;
background: var(--akzent);
}
}
.eintrag:focus-within {
outline: 2px solid var(--akzent);
outline-offset: 6px;
}
.eintrag h2 a:focus-visible,
.eintrag h3 a:focus-visible {
outline: none;
}
.worum {
padding-block: 0 clamp(var(--a6), 7vw, 96px);
border-top: 1px solid var(--linie);
padding-top: clamp(var(--a5), 5vw, 64px);
}
.worum .klein-titel,
.weiter .klein-titel {
margin-bottom: var(--a4);
}
.worum-satz {
font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
line-height: 1.35;
color: var(--tinte);
max-width: 34ch;
font-family: var(--titel);
font-weight: 500;
letter-spacing: -0.01em;
}
.umfeld {
margin-top: var(--a4);
font-size: 1rem;
}
.strichliste {
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
border-top: 1px solid var(--linie);
max-width: 54rem;
}
.strichliste li {
padding-block: var(--a4);
border-bottom: 1px solid var(--linie);
color: var(--leise);
max-width: 68ch;
}
.lagen {
background: var(--tinte);
color: var(--kreide);
padding-block: clamp(var(--a6), 8vw, 104px);
}
.lagen h2 {
color: var(--kreide);
margin-bottom: var(--a5);
max-width: 24ch;
}
.lagen-liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--a5);
}
@media (min-width: 52rem) {
.lagen-liste {
grid-template-columns: repeat(3, 1fr);
gap: var(--a5);
}
}
.lagen-liste li {
padding-top: var(--a4);
border-top: 2px solid rgb(240 238 234 / 28%);
}
.lagen-liste h3 {
font-family: var(--titel);
font-weight: 700;
font-size: 1.0625rem;
color: var(--kreide);
margin: 0 0 var(--a2);
}
.lagen-liste p,
.lagen-satz {
color: var(--kreide);
opacity: 0.86;
}
.lagen-satz {
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
max-width: 52ch;
}
.klaerliste {
margin: var(--a5) 0 0;
display: grid;
gap: var(--a5) var(--a6);
}
@media (min-width: 48rem) {
.klaerliste {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.klaerliste dt {
font-family: var(--titel);
font-weight: 700;
font-size: 1.0625rem;
margin-bottom: var(--a2);
}
.klaerliste dd {
margin: 0;
color: var(--leise);
max-width: 46ch;
}
.vorteil-blatt {
max-width: 44rem;
}
.vorteil-satz {
font-family: var(--titel);
font-weight: 700;
font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--tinte);
max-width: 34ch;
margin: var(--a3) 0 0;
}
.einwilligung {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
background: var(--papier);
border-top: 1px solid var(--linie);
box-shadow: 0 -18px 40px -28px rgb(20 23 26 / 34%);
padding: var(--a4) 0 calc(var(--a4) + env(safe-area-inset-bottom));
}
.einwilligung[hidden] {
display: none;
}
body {
padding-bottom: var(--band-raum, 0px);
}
.einwilligung-innen {
display: grid;
gap: var(--a3) var(--a5);
align-items: center;
}
@media (min-width: 56rem) {
.einwilligung-innen {
grid-template-columns: minmax(0, 1fr) auto;
}
.einwilligung-wege {
grid-column: 1 / -1;
}
}
.einwilligung-wort h2 {
margin-bottom: var(--a2);
}
.einwilligung-wort p {
max-width: 68ch;
font-size: 0.9375rem;
line-height: 1.55;
}
.einwilligung-wahl {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
}
.knopf-wahl {
flex: 1 1 0;
min-width: 12rem;
justify-content: center;
background: var(--tinte);
color: var(--kreide);
border: 1px solid var(--tinte);
}
@media (hover: hover) and (pointer: fine) {
.knopf-wahl:hover {
background: transparent;
color: var(--tinte);
}
}
.einwilligung-wege {
font-size: 0.8125rem;
color: var(--leise);
}
.einwilligung-wege a {
color: var(--leise);
}
.wahlstand {
margin-top: var(--a5);
padding: var(--a5);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
}
.wahlstand p[data-einwilligung-stand] {
font-family: var(--titel);
font-weight: 700;
color: var(--tinte);
margin-bottom: var(--a4);
}
.wahlstand-knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
}
.wahlstand-knoepfe button[disabled] {
opacity: 0.45;
cursor: default;
}
.grenzen {
padding-bottom: clamp(var(--a6), 8vw, 104px);
}
.grenzen {
border-top: 2px solid var(--akzent);
margin-top: clamp(var(--a6), 8vw, 104px);
}
.grenzen h2 {
margin-block: var(--a5) var(--a4);
}
.grenzen p {
max-width: 62ch;
}
.grenzen p + p {
margin-top: var(--a4);
}
.fragen {
margin-top: var(--a5);
border-top: 1px solid var(--linie);
max-width: 54rem;
}
.fragen details {
border-bottom: 1px solid var(--linie);
}
.fragen summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--a4);
min-height: 44px;
padding-block: var(--a4);
padding-right: calc(var(--a4) + 15px);
font-family: var(--titel);
font-weight: 700;
font-size: 1.0625rem;
cursor: pointer;
list-style: none;
}
.fragen summary::-webkit-details-marker {
display: none;
}
.fragen summary::before,
.fragen summary::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 15px;
height: 2px;
background: var(--leise);
transition:
transform 190ms var(--ease-out),
background-color var(--d-hinweis) ease;
}
.fragen summary::before {
transform: translateY(-50%);
}
.fragen summary::after {
transform: translateY(-50%) rotate(90deg);
}
.fragen details[open] summary::after {
transform: translateY(-50%) rotate(90deg) scaleX(0);
}
.fragen details p {
padding-bottom: var(--a4);
max-width: 62ch;
}
@media (hover: hover) and (pointer: fine) {
.fragen summary:hover {
color: var(--akzent);
}
.fragen summary:hover::before,
.fragen summary:hover::after {
background: var(--akzent);
}
}
.weiter {
padding-bottom: clamp(var(--a5), 6vw, 80px);
}
.weiter-liste {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
list-style: none;
margin: 0;
padding: 0;
}
.weiter-liste a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--a4);
border: 1px solid var(--linie);
border-radius: var(--r-knopf);
color: var(--tinte);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
transition: border-color var(--d-hinweis) ease;
}
@media (hover: hover) and (pointer: fine) {
.weiter-liste a:hover {
border-color: var(--tinte);
}
}
.aufruf {
padding-block: clamp(var(--a6), 8vw, 112px);
border-top: 1px solid var(--linie);
}
.abgrenzung + .aufruf {
border-top: none;
}
.aufruf h2 {
max-width: 20ch;
}
.aufruf h2 {
margin-bottom: var(--a4);
}
.aufruf-knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
margin-top: var(--a5);
}
.abgrenzung-weiter {
margin-top: var(--a5);
}
.abgrenzung-weiter a {
color: var(--kreide);
text-underline-offset: 0.3em;
}
.schritte {
counter-reset: schritt;
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
display: grid;
gap: var(--a5);
max-width: 54rem;
}
.schritte li {
counter-increment: schritt;
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--a3) var(--a4);
align-items: baseline;
padding-top: var(--a4);
border-top: 1px solid var(--linie);
}
.schritt-nr {
display: none;
}
.schritte li::before {
content: counter(schritt);
font-family: var(--titel);
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 1.125rem;
color: var(--akzent);
}
.schritt-titel {
font-family: var(--titel);
font-weight: 700;
font-size: 1.125rem;
}
.schritte p {
grid-column: 2;
max-width: 62ch;
}
.ablauf-buehne {
padding-block: var(--a6);
}
.ablauf-inhalt > h2 {
max-width: 20ch;
}
.ablauf-balken {
display: none;
}
@media (max-width: 60rem) {
.ablauf-inhalt > h2 {
position: sticky;
top: var(--kopf-hoehe);
z-index: 2;
background: var(--papier);
padding-block: var(--a3);
margin-block: 0;
border-bottom: 1px solid var(--linie);
}
.ablauf-inhalt .schritte {
margin-top: var(--a4);
}
.ablauf-inhalt .schritte li::before {
color: var(--leise);
transition: color 240ms var(--ease-out);
}
.ablauf-inhalt .schritte li .schritt-titel {
transition: color 240ms var(--ease-out);
}
.ablauf-inhalt .schritte li[data-aktiv]::before,
.ablauf-inhalt .schritte li[data-aktiv] .schritt-titel {
color: var(--akzent);
}
}
@media (min-width: 64rem) and (min-height: 44rem) {
@supports (animation-timeline: view()) {
.ablauf {
position: relative;
height: 400vh;
height: 400dvh;
view-timeline-name: --ablauf;
view-timeline-axis: block;
}
.ablauf-buehne {
position: sticky;
top: var(--kopf-hoehe);
height: calc(100dvh - var(--kopf-hoehe));
display: flex;
align-items: center;
padding-block: 0;
}
.ablauf-inhalt {
width: min(100% - var(--rand) * 2, var(--bahn));
}
.ablauf-inhalt .schritte {
grid-template-columns: repeat(3, 1fr);
gap: var(--a5) var(--a5);
max-width: none;
}
.ablauf-inhalt .schritte li {
grid-template-columns: 1fr;
gap: var(--a2);
opacity: 0.2;
transform: translateY(22px);
animation: schritt-an linear both;
animation-timeline: --ablauf;
}
.ablauf-inhalt .schritte li::before {
content: none;
}
.ablauf-inhalt .schritt-nr {
display: block;
font-family: var(--titel);
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 0.9375rem;
letter-spacing: 0.06em;
color: var(--akzent);
}
.ablauf-inhalt .schritte p {
grid-column: auto;
max-width: none;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--leise);
}
.ablauf-inhalt .schritte li:nth-child(1) {
animation-range: cover 21% cover 28%;
}
.ablauf-inhalt .schritte li:nth-child(2) {
animation-range: cover 28% cover 36%;
}
.ablauf-inhalt .schritte li:nth-child(3) {
animation-range: cover 36% cover 43%;
}
.ablauf-inhalt .schritte li:nth-child(4) {
animation-range: cover 43% cover 51%;
}
.ablauf-inhalt .schritte li:nth-child(5) {
animation-range: cover 51% cover 59%;
}
.ablauf-inhalt .schritte li:nth-child(6) {
animation-range: cover 59% cover 67%;
}
.ablauf-balken {
display: block;
margin-top: var(--a6);
height: 1px;
background: var(--linie);
}
.ablauf-balken i {
display: block;
height: 1px;
background: var(--akzent);
transform: scaleX(0);
transform-origin: left center;
animation: balken-auf linear both;
animation-timeline: --ablauf;
animation-range: cover 21% cover 69%;
}
}
}
@keyframes schritt-an {
to {
opacity: 1;
transform: none;
}
}
@keyframes balken-auf {
to {
transform: scaleX(1);
}
}
@media (prefers-reduced-motion: reduce) {
.ablauf {
height: auto !important;
}
.ablauf-buehne {
position: static !important;
height: auto !important;
padding-block: var(--a6) !important;
}
.ablauf-inhalt .schritte li {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.ablauf-balken i {
animation: none !important;
transform: scaleX(1) !important;
}
}
.anfrage-raster {
display: grid;
gap: var(--a6);
padding-bottom: clamp(var(--a6), 8vw, 112px);
align-items: start;
}
@media (min-width: 60rem) {
.anfrage-raster {
grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.9fr);
gap: var(--a6) clamp(var(--a6), 6vw, 88px);
}
}
.formular {
display: grid;
gap: var(--a5);
}
.feld {
display: grid;
gap: var(--a2);
}
.feld-paar {
display: grid;
gap: var(--a5);
}
@media (min-width: 40rem) {
.feld-paar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.feld label {
font-weight: 600;
font-size: 0.9375rem;
}
.pflicht {
margin-left: var(--a2);
font-weight: 400;
font-size: 0.8125rem;
color: var(--leise);
}
.feld input,
.feld select,
.feld textarea {
width: 100%;
min-height: 48px;
padding: var(--a2) var(--a3);
font-family: var(--text);
font-size: 1rem;
color: var(--tinte);
background: #fff;
border: 1px solid var(--linie);
border-radius: var(--r-feld);
caret-color: var(--akzent);
transition: border-color var(--d-hinweis) ease;
}
.feld textarea {
min-height: 9rem;
padding: var(--a3);
line-height: 1.6;
resize: vertical;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
border-color: var(--akzent);
}
.feld [aria-invalid='true'] {
border-color: #a4262c;
}
.feld-hilfe {
font-size: 0.875rem;
}
.feld-fehler[hidden] {
display: none;
}
.feld-fehler {
display: flex;
gap: var(--a2);
font-size: 0.875rem;
color: #a4262c;
max-width: none;
}
.feld-fehler::before {
content: 'Fehler:';
font-weight: 700;
}
.honigtopf {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formular button {
justify-self: start;
}
.formular button[disabled] {
opacity: 0.6;
cursor: progress;
}
.formular-meldung {
padding: var(--a4);
border-radius: var(--r-karte);
font-weight: 600;
max-width: none;
}
.formular-meldung[data-art='fehler'] {
color: #7a1c21;
background: #fbeceb;
border: 1px solid #e3b8b6;
}
.formular-meldung[data-art='erfolg'] {
color: #17492c;
background: #e9f4ec;
border: 1px solid #b6d6c1;
}
.formular[data-gesendet] .feld,
.formular[data-gesendet] .feld-paar,
.formular[data-gesendet] button,
.formular[data-gesendet] .formular-fuss {
display: none;
}
.formular-fuss {
font-size: 0.875rem;
}
.direktweg {
padding: var(--a5);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
}
.direktweg ul {
list-style: none;
margin: 0 0 var(--a4);
padding: 0;
display: grid;
gap: var(--a2);
}
.direktweg a {
display: inline-flex;
align-items: center;
min-height: 44px;
line-height: 1.3;
font-family: var(--titel);
font-weight: 700;
font-size: 1.125rem;
color: var(--tinte);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.direktweg a:hover {
color: var(--akzent);
text-decoration: underline;
}
}
.direktweg-zeit,
.direktweg-ort {
font-size: 0.9375rem;
}
.direktweg-ort {
margin-top: var(--a3);
}
.rechtstext {
padding-bottom: clamp(var(--a6), 8vw, 112px);
}
.rechtstext nav {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
padding-bottom: var(--a5);
margin-bottom: var(--a5);
border-bottom: 1px solid var(--linie);
}
.rechtstext nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--a3);
border: 1px solid var(--linie);
border-radius: var(--r-knopf);
color: var(--tinte);
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
}
.rechtstext h2 {
font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
margin-top: var(--a6);
margin-bottom: var(--a4);
scroll-margin-top: var(--a5);
}
.rechtstext h3 {
margin-top: var(--a5);
margin-bottom: var(--a3);
}
.rechtstext p,
.rechtstext ul,
.rechtstext ol,
.rechtstext address {
color: var(--leise);
max-width: 62ch;
}
.rechtstext p + p,
.rechtstext ul,
.rechtstext ol,
.rechtstext address,
.rechtstext dl {
margin-top: var(--a4);
}
.rechtstext address {
font-style: normal;
}
.rechtstext li {
margin-bottom: var(--a2);
}
.rechtstext strong {
color: var(--tinte);
}
.rechtstext a {
color: var(--akzent);
}
.rechtstext dt {
font-weight: 700;
color: var(--tinte);
margin-top: var(--a4);
}
.rechtstext dd {
margin: var(--a2) 0 0;
color: var(--leise);
}
.fehlt {
padding: 2px var(--a2);
background: #fbf2d8;
border-bottom: 2px solid #c9a227;
color: var(--tinte);
font-weight: 600;
}
.fuss-zeit {
color: var(--leise);
line-height: 32px;
}
@supports (animation-timeline: view()) {
@keyframes aufklaren {
from {
opacity: 0;
transform: scale(0.985);
}
to {
opacity: 1;
transform: none;
}
}
.auftritt {
animation: aufklaren linear both;
animation-timeline: view();
animation-range: entry 6% entry 48%;
}
}
html.kein-scrollzeitstrahl .auftritt {
opacity: 0;
transform: scale(0.985);
transition:
opacity 280ms var(--ease-out),
transform 280ms var(--ease-out);
}
html.kein-scrollzeitstrahl .auftritt.sichtbar {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.auftritt,
html.kein-scrollzeitstrahl .auftritt {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.lebensraum {
opacity: 0.85;
}
}
@supports (animation-timeline: view()) {
@keyframes band-aufdecken {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.aufdecken {
animation: band-aufdecken linear both;
animation-timeline: view();
animation-range: entry 0% entry 62%;
}
}
html.kein-scrollzeitstrahl .aufdecken {
clip-path: inset(100% 0 0 0);
transition: clip-path 700ms var(--ease-out);
}
html.kein-scrollzeitstrahl .aufdecken.sichtbar {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.aufdecken,
html.kein-scrollzeitstrahl .aufdecken {
animation: none !important;
clip-path: none !important;
transition: none !important;
}
}
.film-auslauf {
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
opacity: var(--auslauf, 0);
background: linear-gradient(180deg, rgb(244 242 238 / 0%) 12%, var(--papier) 82%);
}
.film-rest {
height: 70vh;
height: 70dvh;
}
.bildband {
position: relative;
margin-block: var(--a5) 0;
overflow: hidden;
}
.bildband img {
width: 100%;
height: clamp(18rem, 24vw, 34rem);
object-fit: cover;
object-position: center 38%;
}
.bildband-folge {
--takt: 7s;
background: var(--tinte);
}
.bildband-folge img + img {
position: absolute;
inset: 0;
height: 100%;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.bildband-folge img {
animation: bandblende var(--takt) linear infinite;
animation-delay: calc((var(--n, 1) - var(--i, 0)) * var(--takt) / var(--n, 1) * -1);
}
}
@keyframes bandblende {
0% {
opacity: 1;
transform: scale(1);
animation-timing-function: linear;
}
12% {
opacity: 1;
transform: scale(1.012);
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
}
25% {
opacity: 0;
transform: scale(1.02);
animation-timing-function: linear;
}
87% {
opacity: 0;
transform: scale(1.05);
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.werke {
position: relative;
padding-block: clamp(var(--a6), 8vw, 112px);
}
.lebensraum-feld {
height: 100%;
-webkit-mask-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0,
#fff 14%,
#fff 86%,
rgba(255, 255, 255, 0) 100%
);
mask-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0,
#fff 14%,
#fff 86%,
rgba(255, 255, 255, 0) 100%
);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.werke > .bahn {
position: relative;
z-index: 1;
}
.werke-raster {
display: grid;
gap: var(--a5);
}
@media (min-width: 60rem) {
.werke-raster {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(var(--a6), 5vw, 80px);
align-items: start;
}
}
.werke-halt {
position: sticky;
top: calc(var(--kopf-hoehe) + var(--a5));
}
.bandzone .werke-halt {
top: calc(var(--kopf-hoehe) + var(--band-hoehe) + var(--a5));
}
.werke-buehne {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--r-karte);
background: var(--tinte);
}
@media (max-width: 60rem) {
.werke-raster {
display: block;
}
.werke-halt {
position: sticky;
top: var(--kopf-hoehe);
z-index: 2;
}
.bandzone .werke-halt {
top: calc(var(--kopf-hoehe) + var(--band-hoehe));
}
.werke-halt {
background: var(--papier);
padding-block: var(--a3);
margin-bottom: var(--a3);
}
.werke-buehne {
aspect-ratio: 2 / 1;
max-height: 26dvh;
}
}
.werk-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 260ms var(--ease-out);
}
.werke:not([data-bereit]) .werk-bild[data-zuerst],
.werk-bild[data-sichtbar] {
opacity: 1;
}
.werke-liste {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--linie);
}
.werk {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--a2) var(--a4);
padding-block: clamp(var(--a5), 4vw, 56px);
border-bottom: 1px solid var(--linie);
transition: opacity 240ms var(--ease-out);
}
.werk h2,
.werk h3 {
font-family: var(--titel);
font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
transition: color 240ms var(--ease-out);
}
.werk h2 a,
.werk h3 a {
color: var(--tinte);
text-decoration: none;
}
.werk h2 a::after,
.werk h3 a::after {
content: '';
position: absolute;
inset: 0;
}
.werk p {
grid-column: 1;
font-size: 1rem;
max-width: 44ch;
}
.werk-pfeil {
grid-row: 1;
grid-column: 2;
align-self: center;
width: 22px;
height: 1px;
background: var(--linie);
transition:
width 240ms var(--ease-out),
background-color 240ms var(--ease-out);
}
.werke[data-bereit] .werk[data-aktiv] h2 a,
.werke[data-bereit] .werk[data-aktiv] h3 a {
color: var(--akzent);
}
.werk[data-aktiv] .werk-pfeil {
width: 44px;
background: var(--akzent);
}
@media (hover: hover) and (pointer: fine) {
.werk:hover {
opacity: 1;
}
.werk:hover h2 a,
.werk:hover h3 a {
color: var(--akzent);
}
}
.werk:focus-within {
opacity: 1;
outline: 2px solid var(--akzent);
outline-offset: 6px;
}
.werk h2 a:focus-visible,
.werk h3 a:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.werk-bild {
transition: opacity 200ms linear;
}
.werk {
transition: none;
}
}
.zweispalt > .spalte > * + * {
margin-top: var(--a4);
}
.zweispalt > .spalte > .worum-satz + p {
margin-top: var(--a5);
}
.zweispalt > .spalte > :first-child {
margin-top: 0;
}
.zweispalt > .spalte > p + .klaerliste,
.zweispalt > .spalte > p + .strichliste,
.zweispalt > .spalte > p + .umgebungen {
margin-top: var(--a5);
}
@media (min-width: 64rem) {
.zweispalt > .spalte > .kachelliste,
.zweispalt > .spalte > .bedarfliste,
.zweispalt > .spalte > .schritte,
.zweispalt > .spalte > .umgebungen,
.zweispalt > .spalte > .klaerliste,
.zweispalt > .spalte > .strichliste {
margin-top: 0;
}
.zweispalt {
display: grid;
grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
gap: clamp(var(--a5), 5vw, 88px);
align-items: start;
}
.zweispalt > h2 {
margin: 0;
max-width: 14ch;
}
.zweispalt.abschnitt > h2 + * {
margin-top: 0;
}
.zweispalt > .spalte > .worum-satz {
max-width: 44ch;
}
.zweispalt > .spalte > p:not(.worum-satz),
.zweispalt > .spalte > .hinweis {
max-width: 58ch;
}
}
.ueberzeile {
font-family: var(--text);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--akzent);
margin-bottom: var(--a3);
}
.hinweis {
margin-top: var(--a4);
max-width: 62ch;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--leise);
}
.abschnitt > h2 + *,
.abschnitt > .klein-titel + * {
margin-top: var(--a5);
}
.abschnitt > .klein-titel + * {
margin-top: var(--a4);
}
.abschnitt > p + p,
.abschnitt > .worum-satz + p {
margin-top: var(--a4);
max-width: 62ch;
}
.lagen .hinweis {
color: var(--kreide);
opacity: 0.72;
margin-top: var(--a5);
}
.kachelliste {
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
display: grid;
gap: var(--a2);
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.kachelliste a {
display: flex;
flex-direction: column;
gap: var(--a1);
height: 100%;
min-height: 76px;
justify-content: center;
padding: var(--a3) var(--a4);
background: color-mix(in oklab, var(--papier) 60%, #fff);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
color: var(--tinte);
text-decoration: none;
transition:
border-color var(--d-hinweis) ease,
background-color var(--d-hinweis) ease,
color var(--d-hinweis) ease;
}
.kachel-name {
font-family: var(--titel);
font-size: 1.0625rem;
font-weight: 600;
}
.kachel-zusatz {
font-size: 0.8125rem;
color: var(--leise);
}
@media (hover: hover) and (pointer: fine) {
.kachelliste a:hover {
background: color-mix(in oklab, var(--akzent) 7%, #fff);
border-color: var(--akzent);
color: var(--akzent);
}
.kachelliste a:hover .kachel-zusatz {
color: var(--akzent);
}
}
.kachelliste a:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 2px;
}
.bedarfliste {
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
display: grid;
gap: 0;
}
.bedarfliste li + li {
border-top: 1px solid var(--linie);
}
.bedarfliste a {
display: grid;
gap: var(--a1);
padding: var(--a4) 0;
color: var(--tinte);
text-decoration: none;
}
@media (min-width: 48rem) {
.bedarfliste a {
grid-template-columns: 18rem 1fr;
gap: var(--a4);
align-items: baseline;
}
}
.bedarf-titel {
font-family: var(--titel);
font-size: 1.125rem;
font-weight: 600;
transition: color var(--d-hinweis) ease;
}
.bedarf-text {
color: var(--leise);
font-size: 0.9375rem;
line-height: 1.55;
}
@media (hover: hover) and (pointer: fine) {
.bedarfliste a:hover .bedarf-titel {
color: var(--akzent);
}
}
.bedarfliste a:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 4px;
}
.umgebungen {
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
display: grid;
gap: var(--a4);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
@media (min-width: 64rem) {
.umgebungen {
grid-template-columns: repeat(3, 1fr);
}
.umgebungen-breit {
grid-template-columns: repeat(5, 1fr);
margin-top: 0;
}
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
.umgebungen-breit {
grid-template-columns: repeat(3, 1fr);
}
}
.umgebung {
position: relative;
--mx: 50%;
--my: 0%;
--licht: 0;
display: flex;
flex-direction: column;
gap: var(--a3);
padding: var(--a4);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
background: color-mix(in oklab, var(--papier) 60%, #fff);
transition:
border-color var(--d-hinweis) var(--ease-out),
transform var(--d-hinweis) var(--ease-out);
}
.umgebung > * {
position: relative;
z-index: 1;
}
.umgebung::before,
.beleg::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
opacity: var(--licht);
transition: opacity var(--d-hinweis) var(--ease-out);
background: radial-gradient(
15rem circle at var(--mx) var(--my),
color-mix(in oklab, var(--akzent) 24%, transparent),
color-mix(in oklab, var(--akzent) 8%, transparent) 34%,
transparent 58%
);
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
.umgebung::after,
.beleg::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
pointer-events: none;
opacity: var(--licht);
transition: opacity var(--d-hinweis) var(--ease-out);
background: radial-gradient(
10rem circle at var(--mx) var(--my),
var(--akzent),
color-mix(in oklab, var(--akzent) 30%, transparent) 42%,
transparent 72%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
}
}
.umgebung h3 {
font-family: var(--titel);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.umgebung h3 a {
color: var(--tinte);
text-decoration: none;
}
.umgebung p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--leise);
margin: 0;
}
.umgebung-feld {
margin-top: auto !important;
}
.umgebung-feld a {
color: var(--tinte);
}
.umgebung-anfrage {
align-self: start;
min-height: 44px;
display: inline-flex;
align-items: center;
padding-inline: 0;
font-weight: 600;
color: var(--akzent);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.nur-lesen {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.umgebung:hover,
.beleg:hover {
border-color: color-mix(in oklab, var(--akzent) 22%, var(--linie));
transform: translateY(-2px);
--licht: 1;
}
@media (prefers-reduced-motion: reduce) {
.umgebung,
.beleg {
transition: border-color var(--d-hinweis) var(--ease-out);
}
.umgebung:hover,
.beleg:hover {
transform: none;
}
}
.umgebung h3 a:hover,
.umgebung-feld a:hover {
color: var(--akzent);
}
}
.umgebung:focus-within,
.beleg:focus-within {
border-color: color-mix(in oklab, var(--akzent) 38%, var(--linie));
--licht: 1;
}
.verirrt {
display: flex;
min-height: 60vh;
min-height: 60dvh;
align-items: center;
}
.verirrt .aufruf-knoepfe {
margin-top: var(--a5);
}
.reise {
position: fixed;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
mask-image: linear-gradient(180deg, transparent 0, #fff 9%, #fff 88%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #fff 9%, #fff 88%, transparent 100%);
}
.reise-im-film {
position: sticky;
inset: auto;
top: 0;
z-index: 2;
display: block;
width: 100%;
height: 100vh;
height: 100dvh;
margin-top: -100vh;
margin-top: -100dvh;
}
.filmstrecke,
.werke,
.aufruf,
.fuss {
position: relative;
z-index: 1;
}
.abgrenzung {
background: none;
color: var(--kreide);
min-height: 100vh;
min-height: 100dvh;
display: grid;
align-content: center;
position: relative;
}
.abgrenzung-inhalt {
position: relative;
z-index: 1;
}
.abgrenzung::before {
content: '';
position: absolute;
inset: -1px 0;
z-index: -1;
background: linear-gradient(
180deg,
rgb(20 23 26 / 0%) 0%,
var(--tinte) 26%,
var(--tinte) 74%,
rgb(20 23 26 / 0%) 100%
);
}
@media (prefers-reduced-motion: reduce) {
.abgrenzung {
min-height: 0;
}
.abgrenzung::before {
background: var(--tinte);
inset: 0;
}
}
.weltgrund {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.52;
-webkit-mask-image: linear-gradient(
102deg,
rgba(255, 255, 255, 0.26) 0%,
rgba(255, 255, 255, 0.4) 30%,
rgba(255, 255, 255, 0.7) 56%,
#fff 80%
);
mask-image: linear-gradient(
102deg,
rgba(255, 255, 255, 0.26) 0%,
rgba(255, 255, 255, 0.4) 30%,
rgba(255, 255, 255, 0.7) 56%,
#fff 80%
);
}
.weltgrund canvas {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 60rem) {
.weltgrund {
opacity: 0.2;
}
}
@media (prefers-reduced-motion: reduce) {
.weltgrund {
opacity: 0.4;
}
}
body > main,
body > footer {
position: relative;
z-index: 1;
}
@supports (animation-timeline: view()) {
@keyframes zeile-auftauchen {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: none;
}
}
.klaerliste > div,
.beleg {
animation: zeile-auftauchen linear both;
animation-timeline: view();
animation-range: entry 2% entry 42%;
}
.auftritt:has(.klaerliste),
.auftritt:has(.belege) {
animation: none;
opacity: 1;
transform: none;
}
}
html.kein-scrollzeitstrahl .klaerliste > div,
html.kein-scrollzeitstrahl .beleg {
opacity: 0;
transform: translateY(26px);
transition:
opacity 300ms var(--ease-out),
transform 300ms var(--ease-out);
}
html.kein-scrollzeitstrahl .klaerliste > div.sichtbar,
html.kein-scrollzeitstrahl .beleg.sichtbar {
opacity: 1;
transform: none;
}
html.kein-scrollzeitstrahl .auftritt:has(.klaerliste),
html.kein-scrollzeitstrahl .auftritt:has(.belege) {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.klaerliste > div,
.beleg,
html.kein-scrollzeitstrahl .klaerliste > div,
html.kein-scrollzeitstrahl .beleg {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.belege {
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
display: grid;
gap: var(--a4);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
@media (min-width: 58rem) {
.belege {
grid-template-columns: repeat(3, 1fr);
}
}
.beleg {
position: relative;
--mx: 50%;
--my: 0%;
--licht: 0;
display: flex;
flex-direction: column;
gap: var(--a2);
padding: var(--a4);
border: 1px solid var(--linie);
border-radius: var(--r-karte);
background: color-mix(in oklab, var(--papier) 60%, #fff);
transition:
border-color var(--d-hinweis) var(--ease-out),
transform var(--d-hinweis) var(--ease-out);
}
.beleg > * {
position: relative;
z-index: 1;
}
.beleg-wort {
font-family: var(--titel);
font-weight: 900;
font-size: clamp(1.5rem, 1.15rem + 1.05vw, 2rem);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--tinte);
hyphens: auto;
}
.beleg-was {
font-family: var(--titel);
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.3;
color: var(--tinte);
}
.beleg p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--leise);
margin: 0;
}
.belege-block > h2 {
max-width: 22ch;
}
.belege-einstieg {
margin-top: var(--a4);
max-width: 58ch;
}
.belege-einstieg p {
margin: 0;
}
.flug {
position: relative;
z-index: 2;
height: 180dvh;
--f: 0.46;
--schrift-an: clamp(0, calc((var(--f) - 0.1) / 0.1), 1);
--schrift-weg: clamp(0, calc((var(--f) - 0.5) / 0.07), 1);
--himmel: clamp(0, calc((var(--f) - 0.68) / 0.16), 1);
--dienste-weg: clamp(0, calc((var(--f) - 0.84) / 0.07), 1);
--buehne-weg: clamp(0, calc((var(--f) - 0.89) / 0.09), 1);
margin-bottom: -176dvh;
}
html:not(.js) .flug {
height: 100dvh;
margin-bottom: 0;
}
.flug-buehne {
position: sticky;
top: var(--kopf-hoehe);
height: calc(100dvh - var(--kopf-hoehe));
overflow: hidden;
background: linear-gradient(180deg, #b6daf1 0%, #cfe6f6 100%);
opacity: calc(1 - var(--buehne-weg, 0));
}
.flug-bild {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: max(100%, calc((100dvh - var(--kopf-hoehe)) * 16 / 9));
aspect-ratio: 16 / 9;
transform-origin: 50% 38%;
transform: scale(calc(1 + var(--himmel, 0) * 0.3));
}
.flug-bild::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: var(--papier);
opacity: calc(var(--himmel, 0) * 0.46);
}
.flug-erstbild,
.flug-film {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.flug-erstbild {
z-index: 0;
}
.flug-film {
z-index: 1;
opacity: 0;
transition: opacity 320ms var(--ease-out);
}
.flug-film[data-bereit] {
opacity: 1;
}
.flug-buehne::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgb(244 242 238 / 0%) 62%,
rgb(244 242 238 / 18%) 80%,
rgb(244 242 238 / 66%) 93%,
rgb(244 242 238 / 100%) 100%
);
}
.flug-schleier {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
78% 58% at 50% 43%,
rgb(246 245 242 / 82%) 0%,
rgb(246 245 242 / 62%) 44%,
rgb(246 245 242 / 18%) 72%,
rgb(246 245 242 / 0%) 92%
);
opacity: calc(var(--schrift-an, 0) * (1 - var(--schrift-weg, 0)));
}
.flug-frage {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
align-content: start;
justify-items: center;
gap: clamp(14px, 2vh, 30px);
padding: clamp(4.5rem, 24vh, 15rem) var(--a5) 0;
text-align: center;
pointer-events: none;
opacity: calc(1 - var(--dienste-weg, 0));
}
.flug-frage::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(
56% 30% at 50% 34%,
rgb(246 245 242 / 34%) 0%,
rgb(246 245 242 / 18%) 52%,
rgb(246 245 242 / 0%) 86%
);
}
.flug-frage > * {
--an: clamp(0, calc((var(--f, 0) - var(--ab, 0)) / var(--dauer, 0.06)), 1);
position: relative;
margin: 0;
max-width: 24ch;
}
.flug-frage h2 {
--ab: 0.585;
--dauer: 0.035;
padding-top: clamp(10px, 1.4vh, 20px);
font-size: clamp(1.6rem, 0.95rem + 2.3vw, 3.2rem);
line-height: 1.08;
letter-spacing: -0.022em;
color: var(--tinte);
clip-path: inset(calc((1 - var(--an)) * 110%) -12% 0 -12%);
transform: translateY(calc((1 - var(--an)) * 0.2em));
}
.flug-frage h2::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: rgb(20 23 26 / 42%);
transform: scaleX(var(--an));
}
.flug-frage p {
--ab: 0.62;
--dauer: 0.035;
max-width: 46ch;
font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.35rem);
line-height: 1.55;
color: var(--tinte);
opacity: var(--an);
transform: translateY(calc((1 - var(--an)) * 0.5em));
}
.flug-lauf {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
height: 3px;
background: rgb(20 23 26 / 10%);
pointer-events: none;
}
.flug-lauf span {
display: block;
height: 100%;
width: 100%;
background: var(--akzent);
transform-origin: 0 50%;
transform: scaleX(var(--f, 0));
}
.flug-mitte {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
align-content: center;
justify-items: center;
gap: clamp(14px, 1.4vw, 24px);
padding: 0 var(--a5);
text-align: center;
opacity: calc(1 - var(--schrift-weg, 0));
transform: scale(calc(1 + var(--schrift-weg, 0) * 0.14));
}
.flug-mitte[data-weg] {
visibility: hidden;
}
.flug-mitte > *,
.flug-worte li {
--an: clamp(0, calc((var(--f, 0) - var(--ab, 0)) / var(--dauer, 0.12)), 1);
}
.flug-marke {
--ab: 0.1;
--dauer: 0.1;
width: min(50rem, 58vw);
margin: 0;
opacity: var(--an);
transform: scale(calc(1.09 - 0.09 * var(--an)));
filter: blur(calc((1 - var(--an)) * 8px));
}
.flug-marke img {
display: block;
width: 100%;
height: auto;
}
.flug-worte {
display: grid;
justify-items: center;
gap: clamp(2px, 0.5vh, 10px);
list-style: none;
margin: 0;
padding: 0;
}
.flug-worte li {
--dauer: 0.05;
position: relative;
padding-top: clamp(8px, 1.1vh, 18px);
font-family: var(--zier);
font-optical-sizing: auto;
font-size: clamp(1.35rem, 0.75rem + 2.2vw, 3rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.005em;
color: var(--tinte);
clip-path: inset(calc((1 - var(--an)) * 110%) -12% 0 -12%);
transform: translateY(calc((1 - var(--an)) * 0.22em));
}
.flug-worte li::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: rgb(20 23 26 / 42%);
transform: scaleX(var(--an));
}
.flug-worte li:nth-child(1) {
--ab: 0.24;
}
.flug-worte li:nth-child(2) {
--ab: 0.28;
}
.flug-worte li:nth-child(3) {
--ab: 0.32;
}
.flug-worte li:nth-child(4) {
--ab: 0.36;
}
.flug-worte li:nth-child(5) {
--ab: 0.4;
}
@media (max-width: 46rem) {
.flug-marke {
width: 80vw;
}
.flug-mitte {
gap: 16px;
padding: 0 var(--a4);
}
}
.bandzone {
position: relative;
z-index: 1;
}
.werke-kopf {
position: relative;
overflow: clip;
padding-bottom: clamp(32px, 6dvh, 72px);
}
.werke-wort {
position: relative;
z-index: 1;
margin-top: clamp(120px, 58dvh, 560px);
}
.leit-kasten {
position: relative;
max-width: 54rem;
margin-inline: auto;
padding: clamp(28px, 4.2vw, 68px) clamp(24px, 4vw, 64px);
border-radius: var(--r-karte);
background: rgb(250 249 247 / 92%);
box-shadow: 0 34px 70px -34px rgb(20 23 26 / 30%);
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.leit-kasten {
view-timeline-name: --kasten;
view-timeline-axis: block;
animation: kasten-herein linear both;
animation-timeline: --kasten;
animation-range: cover 0% cover 28%;
}
}
}
@keyframes kasten-herein {
from {
opacity: 0;
transform: translateY(2.4rem) scale(0.985);
}
}
@media (prefers-reduced-motion: reduce) {
.leit-kasten {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.band-lauf {
position: sticky;
top: var(--kopf-hoehe);
z-index: 4;
height: var(--band-hoehe);
display: flex;
align-items: center;
overflow: clip;
pointer-events: none;
user-select: none;
background: var(--papier);
border-bottom: 1px solid var(--linie);
}
.band-spur {
display: flex;
width: max-content;
font-family: var(--titel);
font-size: clamp(3.4rem, 10vw, 9.5rem);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.03em;
text-transform: uppercase;
white-space: nowrap;
color: transparent;
-webkit-text-fill-color: rgb(20 23 26 / 7%);
animation: band-zieht 54s linear infinite;
will-change: transform;
}
.band-spur::before,
.band-spur::after {
content: var(--band, '');
white-space: pre;
}
@media (max-width: 46rem) {
.band-spur {
font-size: clamp(2rem, 8.5vw, 3rem);
}
}
.vorspann-gross {
font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
line-height: 1.5;
color: var(--tinte);
max-width: 46ch;
margin: var(--a5) 0 0;
text-wrap: pretty;
}
.werke-kopf h2 {
margin: 0;
font-size: clamp(2rem, 1.1rem + 3.4vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.032em;
max-width: 21ch;
text-wrap: balance;
}
.werke-kopf h2 span {
display: inline-block;
}
@supports (animation-timeline: view()) {
.werke-kopf {
view-timeline-name: --kopf;
view-timeline-axis: block;
}
.werke-kopf h2 span {
animation: wort-auf linear both;
animation-timeline: --kasten;
animation-range: cover calc(10% + var(--i, 0) * 1.8%) cover calc(30% + var(--i, 0) * 1.8%);
}
.vorspann-gross {
animation: vorspann-auf linear both;
animation-timeline: --kasten;
animation-range: cover 34% cover 52%;
}
}
@keyframes band-zieht {
to {
transform: translateX(-50%);
}
}
@keyframes wort-auf {
from {
clip-path: inset(110% -10% 0 -10%);
transform: translateY(0.28em);
}
}
@keyframes vorspann-auf {
from {
opacity: 0;
transform: translateY(0.6em);
}
}
@media (prefers-reduced-motion: reduce) {
.band-spur,
.werke-kopf h2 span,
.vorspann-gross {
animation: none !important;
clip-path: none !important;
transform: none !important;
opacity: 1 !important;
}
}
.flug-band {
display: flex;
flex-wrap: wrap;
gap: var(--a2) var(--a3);
list-style: none;
margin: 0;
padding: 0;
}
.flug-band li {
color: var(--tinte);
font-family: var(--titel);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.78;
}
.flug-band li + li::before {
content: '·';
margin-right: var(--a3);
color: var(--akzent);
}
.knopf-rand {
background: rgb(246 245 242 / 94%);
color: var(--tinte);
border: 1px solid rgb(20 23 26 / 26%);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.knopf-rand:hover {
background: rgb(255 255 255 / 98%);
border-color: rgb(20 23 26 / 52%);
}
}
.flug-knoepfe {
--ab: 0.42;
--dauer: 0.04;
margin-top: clamp(10px, 2.2vh, 30px);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--a3);
margin-top: var(--a2);
opacity: var(--an);
transform: translateY(calc((1 - var(--an)) * 0.6em));
}
@media (prefers-reduced-motion: reduce) {
.flug {
height: auto !important;
}
.flug-buehne {
position: relative !important;
top: 0 !important;
height: auto !important;
aspect-ratio: 16 / 9;
overflow: clip;
}
.flug {
overflow-x: clip;
}
.flug-bild,
.flug-mitte,
.flug-mitte > *,
.flug-worte li {
animation: none !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
}
.flug {
height: auto !important;
margin-bottom: 0 !important;
}
.uebergang {
padding-top: var(--a7, 96px);
background: var(--papier);
}
}
:root {
--alarm: #b3261e;
--alarm-hell: #d13b31;
}
.sos-knopf {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 44px;
padding: 0 var(--a3);
border: 0;
border-radius: 999px;
background: var(--alarm);
color: #fff;
font-family: var(--titel);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition:
background-color 140ms var(--ease-out),
transform 120ms var(--ease-out);
}
.sos-knopf::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
}
.sos-knopf:active {
transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
.sos-knopf:hover {
background: var(--alarm-hell);
}
}
@media (max-width: 40rem) {
.kopf .sos-knopf span {
display: none;
}
.kopf .sos-knopf::after {
content: 'SOS';
}
}
.sos-klappe {
width: min(100% - 2rem, 34rem);
padding: 0;
border: 1px solid var(--linie);
border-radius: var(--r-karte);
background: var(--papier);
color: var(--tinte);
}
.sos-klappe::backdrop {
background: rgb(14 16 19 / 62%);
}
.sos-kopf {
padding: var(--a4) var(--a4) var(--a3);
border-bottom: 1px solid var(--linie);
background: var(--alarm);
color: #fff;
border-radius: calc(var(--r-karte) - 1px) calc(var(--r-karte) - 1px) 0 0;
}
.sos-kopf h2 {
margin: 0;
font-size: 1.25rem;
color: #fff;
}
.sos-kopf p {
margin: var(--a2) 0 0;
font-size: 0.9375rem;
color: #fff;
opacity: 0.95;
}
.sos-leib {
padding: var(--a4);
display: grid;
gap: var(--a3);
}
.sos-leib label {
display: grid;
gap: 0.35rem;
font-size: 0.9375rem;
font-weight: 600;
}
.sos-leib input,
.sos-leib textarea {
font: inherit;
font-weight: 400;
padding: 0.7rem 0.8rem;
border: 1px solid var(--linie);
border-radius: var(--r-feld);
background: #fff;
color: var(--tinte);
}
.sos-leib textarea {
min-height: 5.5rem;
resize: vertical;
}
.sos-fuss {
display: flex;
flex-wrap: wrap;
gap: var(--a3);
align-items: center;
justify-content: space-between;
padding: 0 var(--a4) var(--a4);
}
.sos-anruf {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 700;
color: var(--alarm);
}
.sos-zu {
position: absolute;
top: var(--a3);
right: var(--a3);
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 18%);
color: #fff;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.sos-band {
background: var(--dunkel);
color: var(--kreide);
}
.sos-band .bahn {
display: grid;
gap: var(--a4);
padding-block: var(--a6);
align-items: center;
}
@media (min-width: 52rem) {
.sos-band .bahn {
grid-template-columns: 1fr auto;
gap: var(--a6);
}
}
.sos-band h2 {
color: var(--kreide);
margin: 0 0 var(--a2);
}
.sos-band p {
margin: 0;
max-width: 58ch;
color: var(--kreide);
opacity: 0.86;
}
.sos-band .sos-knopf {
min-height: 52px;
font-size: 1.0625rem;
}
.orte-band {
padding-block: clamp(var(--a6), 8vw, 112px);
}
.orte-raster {
list-style: none;
margin: var(--a5) auto 0;
padding: 0;
display: grid;
gap: var(--a4);
}
@media (min-width: 52rem) {
.orte-raster {
grid-template-columns: repeat(3, 1fr);
}
}
.ort-karte a {
display: grid;
gap: var(--a2);
text-decoration: none;
color: var(--tinte);
border-radius: var(--r-karte);
padding: var(--a3);
margin: calc(var(--a3) * -1);
transition: background-color 200ms var(--ease-out);
}
.ort-karte picture {
display: block;
overflow: hidden;
border-radius: var(--r-karte);
background: var(--dunkel);
}
.ort-karte img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.ort-name {
font-family: var(--titel);
font-weight: 700;
font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
margin-top: var(--a2);
}
.ort-region,
.ort-umland {
color: var(--leise);
font-size: 0.9375rem;
}
.ort-umland {
font-size: 0.875rem;
}
@media (hover: hover) and (pointer: fine) {
.ort-karte a:hover {
background: rgb(10 114 182 / 7%);
}
.ort-karte a:hover .ort-name {
color: var(--akzent);
}
}
.ort-karte a:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 4px;
}
.breitbild {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-karte);
aspect-ratio: 16 / 9;
object-fit: cover;
}
.teambild {
aspect-ratio: 3 / 2;
}
.nur-vorlesen {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.menschen-reihe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 20rem));
justify-content: start;
gap: var(--a5) var(--a4);
margin-top: var(--a5);
}
@media (max-width: 48rem) {
.menschen-reihe {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--a4) var(--a3);
}
}
@media (min-width: 28.0625rem) and (max-width: 48rem) {
.mensch-karte:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: min(100%, 20rem);
}
}
@media (max-width: 28rem) {
.menschen-reihe {
grid-template-columns: minmax(0, 1fr);
}
}
.mensch-karte {
display: flex;
flex-direction: column;
margin: 0;
}
.mensch-karte img {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-karte);
}
.mensch-karte figcaption {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: var(--a2);
margin-top: var(--a4);
}
.mensch-karte b {
font-family: var(--titel);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tinte);
}
.mensch-karte span {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--leise);
}
.mensch-karte .knopf {
margin-top: var(--a2);
}
.karte-wege {
display: flex;
flex-wrap: wrap;
gap: var(--a2);
margin-top: auto;
padding-top: var(--a3);
width: 100%;
}
.karte-wege .knopf {
flex: 1 1 auto;
margin-top: 0;
text-align: center;
}
.brief-schau {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: var(--a4);
padding-bottom: calc(var(--a4) + var(--band-raum, 0px));
visibility: hidden;
opacity: 0;
transition:
opacity 200ms var(--ease-out),
visibility 0s linear 200ms;
}
.brief-schau:target,
.brief-schau[data-offen] {
visibility: visible;
opacity: 1;
transition:
opacity 240ms var(--ease-out),
visibility 0s;
}
.brief-grund {
position: absolute;
inset: 0;
background: rgb(20 23 26 / 52%);
}
.brief-blatt {
position: relative;
width: min(48rem, 100%);
max-height: min(calc(84dvh - var(--band-raum, 0px)), 52rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: clamp(24px, 4vw, 56px);
background: var(--papier);
border-radius: var(--r-karte);
box-shadow: 0 30px 70px -26px rgb(20 23 26 / 52%);
transform: scale(0.96);
transition: transform 240ms var(--ease-out);
}
.brief-schau:target .brief-blatt,
.brief-schau[data-offen] .brief-blatt {
transform: scale(1);
}
html:has(.brief-schau:target) .einwilligung,
html:has(.brief-schau[data-offen]) .einwilligung {
display: none;
}
.brief-schau:target,
.brief-schau[data-offen] {
--band-raum: 0px;
}
.brief-zu {
position: absolute;
top: clamp(8px, 1.4vw, 18px);
right: clamp(8px, 1.4vw, 18px);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 999px;
font-size: 1.5rem;
line-height: 1;
text-decoration: none;
color: var(--tinte);
background: rgb(20 23 26 / 6%);
transition:
background-color 160ms var(--ease-out),
transform 160ms var(--ease-out);
}
.brief-zu:active {
transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
.brief-zu:hover {
background: rgb(20 23 26 / 12%);
}
}
.brief-kopf {
display: grid;
gap: var(--a2);
margin-bottom: var(--a5);
padding-right: 52px;
}
.brief-kopf img {
display: block;
width: clamp(88px, 16vw, 132px);
height: auto;
margin-bottom: var(--a3);
border-radius: var(--r-karte);
}
.brief-kopf h3 {
margin: 0;
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
.brief-kopf .funktion {
margin: 0;
color: var(--leise);
}
.brief-text p {
margin: 0 0 var(--a4);
max-width: 62ch;
}
.brief-text p:last-child {
margin-bottom: 0;
}
.brief-gruss {
margin-top: var(--a5);
padding-top: var(--a4);
border-top: 1px solid var(--linie);
line-height: 1.6;
color: var(--tinte);
}
.brief-post {
margin: var(--a3) 0 0;
}
.brief-gruss + .brief-post {
margin-top: var(--a2);
}
.brief-post a {
color: var(--tinte);
text-underline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.brief-schau,
.brief-blatt {
transition: opacity 120ms linear;
}
.brief-blatt {
transform: none;
}
}
.arbeitsweise {
padding-block: clamp(var(--a6), 9vw, 128px);
}
.blatt {
position: relative;
padding: clamp(28px, 4vw, 60px);
border-radius: var(--r-karte);
background: rgb(250 249 247 / 92%);
box-shadow: 0 30px 64px -32px rgb(20 23 26 / 28%);
}
.arbeit-blatt {
max-width: 44rem;
margin-top: var(--a5);
}
.arbeit-leitsatz {
margin: 0;
max-width: 26ch;
font-family: var(--titel);
font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.75rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--tinte);
text-wrap: balance;
}
.arbeit-folge {
margin: var(--a4) 0 0;
max-width: 48ch;
font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.35rem);
line-height: 1.55;
color: var(--leise);
text-wrap: pretty;
}
.arbeit-dreiklang {
list-style: none;
margin: clamp(40px, 7vh, 88px) 0 0;
padding: 0;
display: grid;
gap: clamp(16px, 2.4vh, 28px);
}
.arbeit-dreiklang li {
position: relative;
padding: clamp(18px, 2.4vw, 34px) clamp(22px, 3vw, 44px);
border-radius: var(--r-karte);
background: rgb(250 249 247 / 86%);
box-shadow: 0 18px 40px -26px rgb(20 23 26 / 26%);
}
@media (min-width: 52rem) {
.arbeit-dreiklang li {
width: 76%;
}
.arbeit-dreiklang li:nth-child(even) {
margin-left: auto;
text-align: right;
}
}
.arbeit-dreiklang span {
display: block;
font-family: var(--titel);
font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.024em;
color: var(--tinte);
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.arbeitsweise {
view-timeline-name: --arbeit;
view-timeline-axis: block;
}
.arbeit-blatt {
animation: blatt-herein linear both;
animation-timeline: view();
animation-range: cover 0% cover 32%;
}
.arbeit-dreiklang li {
animation: von-links linear both;
animation-timeline: view();
animation-range: cover 0% cover 34%;
}
.arbeit-dreiklang li:nth-child(odd) {
animation-name: von-rechts;
}
}
}
@keyframes blatt-herein {
from {
opacity: 0;
transform: translateY(2.2rem) scale(0.985);
}
}
.arbeit-dreiklang li {
--anlauf: clamp(0.75rem, 2.5vw, 2.6rem);
}
@keyframes von-links {
from {
opacity: 0;
transform: translateX(calc(var(--anlauf, 2.6rem) * -1));
}
}
@keyframes von-rechts {
from {
opacity: 0;
transform: translateX(var(--anlauf, 2.6rem));
}
}
@media (prefers-reduced-motion: reduce) {
.arbeit-blatt,
.arbeit-dreiklang li {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.portraet {
display: block;
width: 100%;
max-width: 20rem;
height: auto;
border-radius: var(--r-karte);
margin-bottom: var(--a4);
}
.person > .spalte > p + p {
margin-top: var(--a4);
}
.person > .spalte > p {
max-width: 62ch;
}
.schwerpunkte {
margin-top: var(--a5);
padding-top: var(--a4);
border-top: 1px solid var(--linie);
}
.schwerpunkte ul {
margin: var(--a3) 0 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: var(--a5);
}
.schwerpunkte li {
break-inside: avoid;
padding: 0.18rem 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--tinte);
}
@media (max-width: 34rem) {
.schwerpunkte ul {
columns: 1;
}
}
.person-kopf h2 {
margin: 0;
}
.person-kopf .funktion {
margin-top: var(--a2);
margin-bottom: 0;
}
@media (min-width: 64rem) {
.person {
display: grid;
grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
gap: clamp(var(--a5), 5vw, 88px);
align-items: start;
}
.person.abschnitt > .person-kopf + .spalte {
margin-top: 0;
}
.person-kopf {
position: sticky;
top: calc(var(--kopf-hoehe) + var(--a5));
}
}
@media (max-width: 63.99rem) {
.person > .spalte {
margin-top: var(--a5);
}
.portraet {
max-width: 14rem;
}
}
.feld-frei {
font-weight: 400;
color: var(--leise);
}
.sos-meldung {
margin: 0;
padding: var(--a3);
border-radius: var(--r-feld);
background: rgb(10 114 182 / 9%);
font-size: 0.9375rem;
}
@media (max-width: 46rem) {
.flug-buehne::after {
background: linear-gradient(
180deg,
rgb(244 242 238 / 0%) 58%,
rgb(244 242 238 / 42%) 80%,
rgb(244 242 238 / 90%) 100%
);
}
}
@media (max-width: 30rem) {
.kopf .sos-knopf {
padding: 0 0.55rem;
font-size: 0.875rem;
}
.kopf .sos-knopf::before {
width: 7px;
height: 7px;
}
.kopf .menue-knopf {
padding: 0 0.45rem;
}
}
@media (max-width: 20rem) {
.kopf {
gap: var(--a2);
width: calc(100% - 24px);
}
.marke img {
width: 84px;
}
}
@media (max-width: 23rem) {
.menue-wort {
display: none;
}
.kopf .menue-knopf {
justify-content: center;
min-width: 44px;
padding: 0;
}
}
.dreiklang {
list-style: none;
margin: var(--a4) 0 0;
padding: 0;
display: grid;
gap: 0.15em;
}
.dreiklang li {
font-family: var(--titel);
font-weight: 700;
font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
line-height: 1.2;
}
.dreiklang li + li {
color: var(--leise);
}
.dreiklang li:last-child {
color: var(--akzent);
}
.leise {
color: var(--leise);
}
.funktion {
margin-top: calc(var(--a2) * -1);
margin-bottom: var(--a5);
font-family: var(--titel);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--leise);
}
.flug-marke {
margin: 0;
}
@media (min-width: 46rem) and (max-height: 820px) {
.flug-marke {
width: min(50rem, 58vw, 88vh);
}
.flug-worte li {
font-size: clamp(1.15rem, 0.75rem + 2.2vw, 4.8vh);
}
}
@media (min-width: 46rem) and (max-height: 680px) {
.flug-marke {
width: min(50rem, 58vw, 74vh);
}
.flug-worte li {
font-size: clamp(1rem, 0.75rem + 2.2vw, 4.2vh);
}
.flug-mitte {
gap: clamp(8px, 1vh, 16px);
}
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.auftritt.zweispalt {
animation: none;
view-timeline-name: --spalt;
view-timeline-axis: block;
}
.auftritt.zweispalt > h2,
.auftritt.zweispalt > .spalte > * {
animation: zeile-herein linear both;
animation-timeline: view();
animation-range: cover 0% cover 30%;
}
.auftritt.zweispalt > .spalte > :nth-child(2) {
animation-range: cover 3% cover 33%;
}
.auftritt.zweispalt > .spalte > :nth-child(3) {
animation-range: cover 6% cover 36%;
}
.auftritt.zweispalt > .spalte > :nth-child(n + 4) {
animation-range: cover 9% cover 39%;
}
}
}
@keyframes zeile-herein {
from {
opacity: 0;
transform: translateY(1.1rem);
}
}
.zweispalt > h2::before {
content: '';
display: block;
width: clamp(32px, 4vw, 56px);
height: 2px;
margin-bottom: var(--a4);
background: var(--tinte);
opacity: 0.32;
}
@media (prefers-reduced-motion: reduce) {
.auftritt.zweispalt > h2,
.auftritt.zweispalt > .spalte > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.ortzone {
overflow: clip;
}
.ortkarten {
list-style: none;
margin: var(--a6) 0 0;
padding: 0;
display: grid;
gap: var(--a4);
}
@media (min-width: 52rem) {
.ortkarten {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ortkarten a {
display: grid;
gap: var(--a2);
height: 100%;
padding: clamp(20px, 2.6vw, 34px);
border-radius: var(--r-karte);
background: rgb(250 249 247 / 88%);
box-shadow: 0 18px 40px -26px rgb(20 23 26 / 26%);
text-decoration: none;
color: inherit;
transition:
transform 180ms var(--ease-out),
box-shadow 180ms var(--ease-out);
}
.ortkarten b {
font-family: var(--titel);
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tinte);
}
.ortkarten span {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--leise);
}
.ortkarten a:active {
transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
.ortkarten a:hover {
transform: translateY(-4px);
box-shadow: 0 26px 54px -26px rgb(20 23 26 / 34%);
}
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ortzone {
view-timeline-name: --orte;
view-timeline-axis: block;
}
.ortkarten li {
animation: ortkarte-herein linear both;
animation-timeline: view();
animation-range: cover calc(2% + var(--i, 0) * 5%) cover calc(32% + var(--i, 0) * 5%);
}
}
}
@keyframes ortkarte-herein {
from {
opacity: 0;
transform: translateY(1.6rem);
}
}
@media (prefers-reduced-motion: reduce) {
.ortkarten li,
.ortkarten a {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.werkzone {
padding-top: var(--a5);
}
.werkzone > .krume {
margin-bottom: var(--a5);
}
.wz-spalte {
min-width: 0;
}
.wz-halt h1 {
margin: 0 0 clamp(24px, 3vw, 44px);
}
@media (max-width: 59.99rem) {
.wz-halt {
position: static;
}
}
.wz-vorspann {
margin: 0 0 var(--a5);
max-width: none;
}
@media (min-width: 60rem) {
.werkzone-raster {
align-items: start;
}
.wz-halt {
position: sticky;
top: calc(var(--kopf-hoehe) + var(--a5));
align-self: start;
}
.wz-halt h1 {
margin: 0 0 clamp(24px, 3vw, 44px);
max-width: 12ch;
}
.wz-vorspann {
position: sticky;
top: var(--kopf-hoehe);
z-index: 2;
margin: 0;
padding: var(--a5) 0 var(--a5) clamp(20px, 2.2vw, 36px);
border-left: 1px solid var(--linie);
background: var(--papier);
}
.wz-vorspann::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: clamp(20px, 3.2vh, 40px);
background: linear-gradient(180deg, var(--papier) 0%, rgb(244 242 238 / 0%) 100%);
pointer-events: none;
}
}
.gebietzone {
position: relative;
z-index: 2;
margin-top: clamp(-96px, -6vw, -40px);
padding-bottom: clamp(var(--a6), 7vw, 96px);
}
.gebiet-blatt {
max-width: 52rem;
margin-left: auto;
}
.gebiet-blatt h2 {
margin: 0;
}
.gebiet-satz {
margin: var(--a4) 0 0;
max-width: 52ch;
}
.gebiet-orte {
display: flex;
flex-wrap: wrap;
gap: var(--a2) var(--a3);
list-style: none;
margin: var(--a5) 0 0;
padding: 0;
}
.gebiet-orte li {
padding: 0.45em 0.9em;
border: 1px solid var(--linie);
border-radius: 999px;
font-size: 0.9375rem;
line-height: 1.3;
color: var(--tinte);
}
.gebiet-blatt .hinweis {
margin: var(--a5) 0 0;
max-width: 52ch;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.gebietzone {
view-timeline-name: --gebiet;
view-timeline-axis: block;
}
.gebiet-blatt {
animation: blatt-herein linear both;
animation-timeline: view();
animation-range: cover 0% cover 30%;
}
}
}
@media (prefers-reduced-motion: reduce) {
.gebiet-blatt {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}