body.welt-gross {
--seite: #eef5fb;
--papier: #ffffff;
--sand: #dfeaf4;
--tinte-weich: #4c6075;
--linie-ruhig: rgba(23, 50, 77, .14);
--schatten-ruhig: 0 24px 48px -28px rgba(23, 50, 77, .45);
--nacht: #14273a;
}
.kopf--ruhig {
--kopf-text: var(--tinte);
}
.kopf--ruhig.ist-gescrollt {
background: color-mix(in srgb, var(--seite) 60%, transparent);
backdrop-filter: blur(4px) saturate(1.15);
-webkit-backdrop-filter: blur(4px) saturate(1.15);
box-shadow: 0 1px 0 var(--linie-ruhig), 0 8px 24px -16px rgba(23, 50, 77, .3);
}
.kopf--ruhig .kopf__nav a {
font-weight: 500;
}
.kopf--ruhig .kopf__nav--klein a:not([class]) {
display: flex;
align-items: center;
gap: 8px;
}
.kopf--ruhig .kopf__nav--klein a:not([class])::before,
.kopf--ruhig .kopf__nav--breit a:not([class])::before {
content: "";
flex: 0 0 auto;
width: 13px;
height: 13px;
background: url(../images/blumen/wiese-rot-1.webp) center / contain no-repeat;
filter: drop-shadow(0 1px 1px rgba(23, 50, 77, .25));
}
.kopf--ruhig .kopf__nav a:nth-child(2 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-2.webp); }
.kopf--ruhig .kopf__nav a:nth-child(3 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-3.webp); }
.kopf--ruhig .kopf__nav a:nth-child(4 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-4.webp); }
.kopf--ruhig .kopf__nav a:nth-child(5 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-5.webp); }
.kopf--ruhig .kopf__nav a:nth-child(6 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-6.webp); }
.kopf--ruhig .kopf__nav a:nth-child(7 of :not([class]))::before { background-image: url(../images/blumen/wiese-rot-7.webp); }
.kopf--ruhig .kopf__nav--breit a:not([class]) {
display: inline-flex;
align-items: center;
gap: 5px;
padding-left: 6px;
padding-right: 12px;
}
.kopf--ruhig .kopf__nav a:hover {
background: rgba(23, 50, 77, .06);
}
.buehne__mausi {
position: absolute;
right: max(32px, 5vw);
bottom: 6%;
z-index: 3;
}
.mausi-ruft {
position: relative;
display: flex;
align-items: flex-start;
color: var(--tinte);
text-decoration: none;
zoom: 1.55;
}
.mausi-ruft {
--ruf-start: 1.3s;
}
body.welt-gross:has(.buehne) .mausi-ruft {
--ruf-start: 3.1s;
}
.mausi-ruft__ansage {
position: relative;
z-index: 2;
display: flex;
align-items: center;
margin-top: 34px;
transform: rotate(-6deg);
transform-origin: 100% 50%;
}
.mausi-ruft__ruf {
display: flex;
align-items: center;
margin-right: -20px;
color: var(--tinte);
font: 800 1rem/1 var(--titel);
white-space: nowrap;
text-shadow: 0 0 10px rgba(255, 196, 110, .55);
transform-origin: 100% 50%;
animation: ruf-raus .8s cubic-bezier(.3, 1.5, .5, 1) calc(var(--ruf-start) - .8s) both;
}
.mausi-ruft__teil {
display: flex;
align-items: center;
}
.mausi-ruft__teil--kinder {
margin-right: 2px;
transform: rotate(22deg);
transform-origin: 100% 85%;
}
.mausi-ruft__teil > span {
display: inline-block;
font-size: calc(1.08em + var(--n) * .028em);
letter-spacing: .045em;
animation: ruf-welle 4s ease-in-out calc(var(--ruf-start) + .3s + var(--n) * 55ms) infinite;
}
.kids-vorrat {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.kids-zeichen {
display: block;
height: 1.2em;
margin-inline: .035em;
overflow: visible;
}
.kids-zeichen__kontur {
fill: #141414;
stroke: #141414;
stroke-width: 300;
stroke-linejoin: round;
}
.kids-zeichen__farbe {
fill: #f2281f;
stroke: #f2281f;
stroke-width: 70;
stroke-linejoin: round;
}
@keyframes ruf-raus {
from { opacity: 0; transform: translateX(16px) scale(.15); }
to { opacity: 1; transform: none; }
}
@keyframes ruf-raus-nochmal {
from { opacity: .3; transform: translateX(12px) scale(.3); }
to { opacity: 1; transform: none; }
}
@keyframes ruf-welle {
0%, 14%, 100% { transform: none; }
6% { transform: translateY(-4px) scale(1.08); }
}
.mausi-ruft:hover .mausi-ruft__ruf,
.mausi-ruft:focus-visible .mausi-ruft__ruf {
animation: ruf-raus-nochmal .6s cubic-bezier(.3, 1.6, .5, 1);
}
.mausi-ruft__mausi {
width: 133px;
height: auto;
margin: -8px -10px -6px 2px;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3));
scale: -1 1;
}
@media (max-width: 900px) {
.buehne__mausi {
top: calc(min(68svh, 560px) - 122px);
right: 6px;
bottom: auto;
}
.mausi-ruft {
zoom: .85;
}
}
@media (max-width: 430px) {
.kopf--ruhig .kopf__logo {
width: 100px;
}
}
.kopf__shop {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
margin-left: -14px;
padding: 8px 14px;
border-radius: 999px;
color: inherit;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition: background-color .2s;
}
.kopf__shop:hover {
background: rgba(23, 50, 77, .06);
}
body.welt-gross:has(.buehne) .kopf--ruhig:not(.ist-gescrollt) .kopf__shop:hover {
background: rgba(255, 255, 255, .45);
}
.kopf__nav a.kopf__shop {
display: flex;
align-items: center;
gap: 8px;
margin-left: 0;
}
.kanaele {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.kanaele a {
display: grid;
place-items: center;
border-radius: 8px;
transition: transform .2s;
}
.kanaele a:hover,
.kanaele a:focus-visible {
transform: translateY(-1px) scale(1.08);
}
.kanaele__zeichen {
display: block;
}
.buehne__schluss {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 12px;
row-gap: 4px;
margin-top: 14px;
}
.buehne__schluss .buehne__absatz--schluss {
margin-top: 0;
}
.buehne__kanaele {
gap: 8px;
align-self: center;
}
.kanaele--einfarbig a {
color: #fff;
}
.buehne__kanaele a {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--tinte);
transition: transform .2s, background-color .2s;
}
.buehne__kanaele a:hover,
.buehne__kanaele a:focus-visible {
background: var(--rot-dunkel);
}
@media (max-width: 1199px) {
.kopf__inner > .kopf__shop {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1339px) {
.kopf--ruhig .kopf__inner {
gap: 10px;
}
.kopf--ruhig .kopf__logo {
width: 140px;
}
.kopf--ruhig .kopf__nav--breit {
gap: 2px;
}
.kopf--ruhig .kopf__nav--breit a:not([class]) {
gap: 4px;
padding-left: 4px;
padding-right: 9px;
font-size: 15.5px;
}
.kopf--ruhig .kopf__inner > .kopf__shop {
margin-left: 2px;
font-size: 15.5px;
}
}
.kopf__nav a.kopf__mausi {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
background: #fff4cf;
font: 800 1.05rem/1.1 var(--titel);
}
.kopf__nav a.kopf__mausi:hover {
background: #ffe9a3;
}
.kopf__mausi img {
width: 40px;
height: auto;
margin: -6px 0;
}
@media (prefers-reduced-motion: reduce) {
.mausi-ruft__mausi,
.mausi-ruft__ruf,
.mausi-ruft__teil > span {
animation: none !important;
}
}
.ruhig-abschnitt {
padding: clamp(64px, 8vw, 120px) 0;
}
.ruhig-kopf {
max-width: 780px;
margin: 0 0 clamp(28px, 4vw, 48px);
}
.ruhig-kopf h2,
.portraet__text h2 {
margin: 0 0 .4em;
font: 500 clamp(2rem, 4.2vw, 3.3rem)/1.08 var(--titel);
letter-spacing: -.015em;
text-wrap: balance;
}
.ruhig-lead {
max-width: 38em;
margin: 0;
color: var(--tinte-weich);
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
text-wrap: pretty;
}
.taste {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
min-height: 50px;
padding: 12px 24px;
border: 1.5px solid transparent;
border-radius: 999px;
font: 600 1rem/1.15 var(--schrift);
text-decoration: none;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.taste:hover {
transform: translateY(-1px);
}
.taste--rot {
background: var(--rot-dunkel);
color: #fff;
}
.taste--rot:hover {
background: #a80f14;
}
.taste--linie {
border-color: rgba(23, 50, 77, .35);
background: transparent;
color: var(--tinte);
}
.taste--linie:hover {
border-color: var(--tinte);
background: var(--papier);
}
.taste--klein {
min-height: 40px;
padding: 8px 16px;
font-size: .92rem;
}
.taste img {
width: 28px;
height: auto;
margin: -8px 0 -6px -6px;
}
.foto {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.foto-quellen {
display: contents;
}
.platzhalter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
padding: 18px;
border: 2px dashed rgba(23, 50, 77, .4);
background: repeating-linear-gradient(135deg, #efe5d6 0 14px, #f7f0e5 14px 28px);
color: var(--tinte);
text-align: center;
line-height: 1.35;
}
.platzhalter svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linejoin: round;
opacity: .7;
}
.platzhalter strong {
font: 700 .8rem/1.2 var(--schrift);
letter-spacing: .14em;
text-transform: uppercase;
}
.platzhalter span {
max-width: 26em;
font: 500 1rem/1.35 var(--titel);
}
.platzhalter small {
color: var(--tinte-weich);
font-size: .8rem;
}
.buehne {
--buehne-grund: #8cc2ea;
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: clamp(680px, 100svh, 980px);
padding: 116px 0 72px;
overflow: hidden;
background: var(--buehne-grund);
color: var(--tinte);
}
.buehne__bild {
position: absolute;
inset: 0;
z-index: -1;
}
.buehne__bild .platzhalter {
border: 0;
}
.buehne__inner {
width: min(1320px, 100% - 2 * clamp(64px, 8vw, 128px));
margin-inline: auto;
}
.buehne__text {
max-width: min(560px, 42vw);
}
.buehne__titel {
margin: 0 0 24px;
}
.buehne__logo {
display: block;
width: min(100%, 400px);
height: auto;
margin-left: -6px;
filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 2px 0 rgba(255, 255, 255, .8));
}
.buehne__absatz {
max-width: 34em;
margin: 14px 0 0;
color: #1f3a55;
font-size: clamp(1.02rem, 1.2vw, 1.12rem);
line-height: 1.55;
text-wrap: pretty;
}
.buehne__absatz--schluss {
font-weight: 600;
color: var(--tinte);
}
.buehne__gruss {
margin: 0 0 6px;
color: var(--tinte);
font: 500 clamp(2rem, 3.5vw, 3.3rem)/1.12 var(--titel);
letter-spacing: -.01em;
text-wrap: balance;
}
.konzert-kachel {
display: flex;
align-items: center;
gap: 16px;
max-width: 520px;
margin-top: 30px;
padding: 10px 14px 10px 10px;
border-radius: 22px;
background: rgba(255, 255, 255, .9);
box-shadow: 0 18px 40px -22px rgba(23, 50, 77, .6);
color: var(--tinte);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.konzert-kachel:hover,
.konzert-kachel:focus-visible {
transform: translateY(-2px);
box-shadow: 0 22px 44px -20px rgba(23, 50, 77, .7);
}
.konzert-kachel__bilder {
position: relative;
flex: 0 0 auto;
width: 136px;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 14px;
background: var(--sand);
}
.konzert-kachel__bilder video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.konzert-kachel__text {
display: grid;
gap: 4px;
min-width: 0;
}
.konzert-kachel__titel {
color: var(--rot-dunkel);
font: 600 clamp(1.25rem, 1.6vw, 1.45rem)/1.15 var(--titel);
}
.konzert-kachel__naechstes {
color: #1f3a55;
font-size: .95rem;
line-height: 1.4;
}
.konzert-kachel__naechstes strong {
color: var(--tinte);
}
.konzert-kachel__wann {
margin-left: 4px;
color: var(--rot-dunkel);
font-weight: 600;
white-space: nowrap;
}
.konzert-kachel__wann:empty {
display: none;
}
.konzert-kachel__pfeil {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-left: auto;
border-radius: 50%;
background: var(--rot-dunkel);
color: #fff;
font-size: 1.2rem;
}
body.welt-gross:has(.buehne) .kopf--ruhig:not(.ist-gescrollt) {
--kopf-text: var(--tinte);
}
body.welt-gross:has(.buehne) .kopf--ruhig:not(.ist-gescrollt) .kopf__nav--breit a:hover {
background: rgba(255, 255, 255, .45);
}
body.welt-gross:has(.buehne) .kopf--ruhig:not(.ist-gescrollt) .kopf__logo img {
filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 2px 0 rgba(255, 255, 255, .7));
}
.vorhang {
--raff: .34;
--weg: -22%;
--schwung: 4deg;
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: 51%;
pointer-events: none;
background: url('../images/vorhang-links.webp') center / 100% 100% no-repeat, #5e070c;
will-change: translate, scale, transform;
animation:
vorhang-auf 2s cubic-bezier(.5, 0, .2, 1) .25s both,
vorhang-schwingt 2s ease-in-out .25s both;
}
.vorhang--links {
left: 0;
transform-origin: 0 0;
box-shadow: 16px 0 30px rgba(0, 0, 0, .5);
}
.vorhang--rechts {
--weg: 22%;
--schwung: -4deg;
right: 0;
transform-origin: 100% 0;
background-image: url('../images/vorhang-rechts.webp');
box-shadow: -16px 0 30px rgba(0, 0, 0, .5);
}
@keyframes vorhang-auf {
from { translate: 0 0; scale: 1 1; }
to { translate: var(--weg) 0; scale: var(--raff) 1; }
}
@keyframes vorhang-schwingt {
0%, 100% { transform: skewX(0); }
45% { transform: skewX(var(--schwung)); }
}
.scheinwerfer {
position: absolute;
top: -12%;
right: 14%;
z-index: 1;
width: 44%;
height: 124%;
background: linear-gradient(180deg, rgba(255, 236, 190, .22), rgba(255, 236, 190, 0) 90%);
clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
filter: blur(26px);
-webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 38%);
mask-image: linear-gradient(180deg, transparent 8%, #000 38%);
mix-blend-mode: screen;
pointer-events: none;
transform-origin: 50% 0;
animation: licht-an 1.4s ease-out 1.1s both, schwenken 11s ease-in-out 2.5s infinite alternate;
}
@keyframes licht-an {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes schwenken {
from { transform: rotate(-2.5deg); }
to { transform: rotate(2.5deg); }
}
.rampe {
position: absolute;
inset: auto 0 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-around;
height: 24px;
padding-inline: 7%;
background: linear-gradient(180deg, #24170e, #0f0905);
box-shadow: 0 -1px 0 rgba(255, 214, 140, .22);
}
.rampe span {
width: 12px;
height: 6px;
border-radius: 6px 6px 2px 2px;
background: #ffeab4;
box-shadow: 0 0 6px 2px rgba(255, 214, 120, .85), 0 -16px 30px 8px rgba(255, 196, 110, .22);
animation: licht-an .5s ease-out calc(1.5s + var(--i) * 45ms) both;
}
.buehne__inner {
position: relative;
z-index: 2;
}
.begruessung__inner {
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
align-items: center;
gap: clamp(32px, 6vw, 88px);
}
.begruessung__bild {
margin: 0;
}
.begruessung__foto {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 24px;
box-shadow: var(--schatten-ruhig);
}
.begruessung__text {
max-width: 40em;
}
.begruessung__text h2 {
margin: 0 0 .6em;
font: 500 clamp(2rem, 4vw, 3rem)/1.1 var(--titel);
letter-spacing: -.015em;
}
.begruessung__text > p {
color: var(--tinte-weich);
font-size: 1.05rem;
line-height: 1.65;
}
.begruessung__text h2 + p::first-letter {
float: left;
margin: .06em .1em 0 0;
color: var(--rot-dunkel);
font: 600 3.4em/.8 var(--titel);
}
.begruessung__text > p.begruessung__gruss {
margin: 1.4em 0 0;
color: var(--tinte);
font: 500 1.2rem/1.4 var(--titel);
}
.begruessung__text > p.begruessung__unterschrift {
display: inline-block;
margin: .3em 0 0;
color: var(--rot-dunkel);
font: 500 clamp(2.6rem, 5vw, 3.4rem)/1.2 var(--hand);
transform: rotate(-4deg);
transform-origin: 0 50%;
}
.foto-nachweis {
margin-top: 10px;
color: var(--tinte-weich);
font-size: .8rem;
}
.reihen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: clamp(20px, 3vw, 36px);
}
.reihe {
overflow: hidden;
border-radius: 24px;
background: var(--papier);
box-shadow: 0 0 0 1px var(--linie-ruhig), var(--schatten-ruhig);
}
.reihe__bild {
aspect-ratio: 4 / 5;
background: var(--sand);
}
.reihe__bild .platzhalter {
border-width: 0 0 2px;
}
.reihe__kopf {
padding: 24px 28px 6px;
}
.reihe__kopf h3 {
margin: 0 0 4px;
font: 600 clamp(1.4rem, 2vw, 1.65rem)/1.15 var(--titel);
}
.reihe__info {
display: none;
margin: 0 0 10px;
color: var(--rot-dunkel);
font-size: .92rem;
font-weight: 600;
}
.reihe__uhrzeit:not(:empty)::before {
content: ' · ';
}
.reihe__kopf p:last-child {
color: var(--tinte-weich);
}
.termine {
display: grid;
gap: 12px;
margin: 0;
padding: 8px 22px 16px;
list-style: none;
}
.termin {
--abriss: 76px;
--karte: #fff5d1;
--stub: var(--rot-dunkel);
position: relative;
display: grid;
grid-template-columns: var(--abriss) minmax(0, 1fr) auto;
align-items: center;
gap: 0 18px;
min-height: 96px;
padding-right: 16px;
border-radius: 12px;
background:
linear-gradient(var(--karte-schleier), var(--karte-schleier)),
var(--karte-bild) 50% 45% / cover no-repeat,
var(--karte);
box-shadow: 0 10px 20px -16px rgba(23, 50, 77, .6);
}
.termin {
--karte-bild: url(../images/karte-sommer.webp);
--karte-schleier: rgba(255, 255, 255, .5);
}
.reihe--winter .termin {
--karte: #e9eef9;
--stub: #1f3a68;
--karte-bild: url(../images/karte-winter.webp);
--karte-schleier: rgba(255, 255, 255, .55);
}
.termin::before,
.termin::after {
content: '';
position: absolute;
left: calc(var(--abriss) - 9px);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--papier);
}
.termin::before { top: -9px; }
.termin::after { bottom: -9px; }
.termin__datum {
display: grid;
align-content: center;
justify-items: center;
align-self: stretch;
border-right: 2px dashed rgba(255, 255, 255, .55);
border-radius: 12px 0 0 12px;
background: var(--stub);
color: #fff;
line-height: 1;
}
.termin__wtag,
.termin__monat {
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .9;
}
.termin__tag {
margin: 4px 0;
font: 600 1.9rem/1 var(--titel);
}
.termin__ort {
padding: 12px 0;
}
.termin__ort strong {
display: block;
font: 600 1.25rem/1.2 var(--titel);
}
.termin__ort > span {
display: block;
color: var(--tinte-weich);
font-size: .9rem;
line-height: 1.4;
}
.termin__ort .termin__bald {
margin-bottom: 2px;
color: var(--rot-dunkel);
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.termin.hinweis--abgesagt strong {
text-decoration: line-through;
}
.termin.hinweis--neuelocation .termin__halle,
.termin__ort .termin__alt {
color: #8a97a5;
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.termin__ort .termin__neu,
.termin__ort .termin__jetzt {
color: var(--rot-dunkel);
font-weight: 700;
}
.termin__ort .termin__neu {
font-size: .95rem;
}
.termin__ort .termin__alt,
.termin__ort .termin__jetzt,
.termin__einlass {
white-space: nowrap;
}
.termin__stempel {
position: absolute;
top: -12px;
right: 150px;
padding: 5px 12px 4px;
border: 3px solid var(--rot-dunkel);
border-radius: 6px;
background: rgba(255, 255, 255, .85);
color: var(--rot-dunkel);
font: 800 .95rem/1 var(--titel);
letter-spacing: .04em;
text-transform: uppercase;
transform: rotate(-7deg);
pointer-events: none;
}
.termin.ist-vorbei .termin__stempel {
display: none;
}
.termin.hinweis--ausverkauft .termin__stempel,
.termin.hinweis--abgesagt .termin__stempel {
right: 22px;
}
.termin__folgen {
color: var(--tinte-weich);
font-size: .86rem;
font-weight: 600;
white-space: nowrap;
}
.termin__ticket {
border-color: transparent;
background: var(--stub);
color: #fff;
}
.termin__ticket:hover {
border-color: transparent;
background: color-mix(in srgb, var(--stub) 85%, #000);
color: #fff;
}
.termin__bald:empty,
.termin__vorbei {
display: none !important;
}
.termin.ist-naechstes {
box-shadow: 0 14px 28px -14px rgba(23, 50, 77, .55);
}
.termin.ist-vorbei {
--stub: #9aa5b1;
opacity: .7;
}
.termin.ist-vorbei .termin__ticket {
display: none;
}
.termin.ist-vorbei .termin__vorbei {
display: inline-block !important;
padding: 4px 10px;
border: 2px solid rgba(23, 50, 77, .35);
border-radius: 6px;
color: var(--tinte-weich);
font-size: .74rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
transform: rotate(-6deg);
}
html.js .termine:not(.zeigt-vergangene) .termin.ist-vorbei {
display: none;
}
.termine__mehr,
.termine__leer {
margin: 0 28px 22px;
padding: 4px 0;
color: var(--tinte-weich);
font: 600 .9rem/1.3 var(--schrift);
}
.termine__mehr {
border: 0;
background: none;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.termine-hinweis {
max-width: 780px;
margin: 32px 0 0;
padding: 16px 20px;
border-left: 3px solid var(--sonne);
border-radius: 0 14px 14px 0;
background: var(--papier);
}
.fragen-abschnitt {
--faq-blau: #1f3a68;
padding-block: clamp(32px, 4.5vw, 60px);
border-top: 4px solid var(--sand);
background: var(--faq-blau);
color: #fff;
}
.galerie-abschnitt {
padding-bottom: clamp(40px, 5vw, 72px);
}
.faq-flaeche {
position: relative;
color: #fff;
}
.faq-abschnitt__kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
cursor: pointer;
list-style: none;
}
.faq-abschnitt__kopf::-webkit-details-marker {
display: none;
}
.faq-abschnitt__kopf h2 {
margin: 0;
color: #fff;
font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--titel);
}
.faq-abschnitt__kopf:focus-visible {
outline: 2px solid #fff;
outline-offset: 6px;
border-radius: 8px;
}
.faq-abschnitt__schalter::before {
content: "Anzeigen ▾";
display: inline-block;
padding: 5px 12px;
border: 1px solid transparent;
border-radius: 999px;
background: var(--papier);
color: var(--faq-blau);
font: 600 .85rem/1.2 var(--schrift);
}
.faq-abschnitt[open] .faq-abschnitt__schalter::before {
content: "Ausblenden ▴";
}
.faq-abschnitt__kopf:hover .faq-abschnitt__schalter::before,
.faq-abschnitt__kopf:focus-visible .faq-abschnitt__schalter::before {
border-color: var(--faq-blau);
box-shadow: 0 0 0 2px #fff;
}
.faq-abschnitt[open] > .faq-abschnitt__kopf {
margin-bottom: 18px;
}
.faq__einleitung {
max-width: 72ch;
margin: 0 0 18px;
color: rgba(255, 255, 255, .85);
line-height: 1.55;
}
.faq {
display: grid;
gap: 10px;
}
.faq__eintrag {
border: 1px solid var(--linie-ruhig);
border-radius: 14px;
background: var(--papier);
color: var(--tinte);
box-shadow: 0 6px 16px -14px rgba(23, 50, 77, .45);
transition: border-color .2s, box-shadow .2s, translate .2s;
}
.faq__eintrag:hover {
border-color: color-mix(in srgb, var(--faq-blau) 45%, transparent);
box-shadow: 0 12px 24px -16px rgba(23, 50, 77, .6);
translate: 0 -1px;
}
.faq__eintrag[open] {
border-color: color-mix(in srgb, var(--faq-blau) 35%, transparent);
}
.faq__frage {
position: relative;
padding: 14px 18px 14px 58px;
border-radius: 14px;
cursor: pointer;
list-style: none;
font: 600 1rem/1.4 var(--schrift);
}
.faq__frage::-webkit-details-marker {
display: none;
}
.faq__frage::before {
content: "+";
position: absolute;
top: 50%;
left: 16px;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--faq-blau);
color: #fff;
font: 500 1.25rem/1 var(--schrift);
translate: 0 -50%;
transition: rotate .2s;
}
.faq__eintrag[open] > .faq__frage::before {
rotate: 45deg;
}
.faq__frage:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.faq__antwort {
max-width: calc(72ch + 76px);
padding: 0 18px 16px 58px;
color: var(--tinte-weich);
font-size: .98rem;
line-height: 1.55;
}
.faq__antwort p {
margin: 0 0 10px;
}
.faq__antwort ul {
margin: 0 0 10px;
padding-left: 1.2em;
}
.faq__antwort strong {
color: var(--tinte);
}
.tuer-abschnitt {
padding: 0 0 clamp(56px, 7vw, 100px);
}
.tuer {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
min-height: 420px;
padding: clamp(92px, 9vw, 112px) clamp(64px, 8vw, 112px) clamp(72px, 8vw, 112px);
overflow: hidden;
border-radius: 32px;
background: linear-gradient(180deg, #2fb0ee 0%, #8fd6fb 58%, #d8f2ff 100%);
color: var(--tinte);
}
.tuer::before {
content: '';
position: absolute;
inset: 0 0 auto;
z-index: 4;
height: 90px;
background: url('../images/schabracke.webp') center top / 216px 90px repeat-x;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3));
pointer-events: none;
}
.vorhang--klein {
--raff: .4;
--weg: -26%;
z-index: 3;
animation: none;
translate: var(--weg) 0;
scale: var(--raff) 1;
transition: translate .9s cubic-bezier(.5, 0, .2, 1), scale .9s cubic-bezier(.5, 0, .2, 1);
}
.vorhang--rechts.vorhang--klein {
--weg: 26%;
}
.tuer:hover .vorhang--links.vorhang--klein,
.tuer:focus-within .vorhang--links.vorhang--klein {
--weg: -31%;
}
.tuer:hover .vorhang--rechts.vorhang--klein,
.tuer:focus-within .vorhang--rechts.vorhang--klein {
--weg: 31%;
}
.tuer__schild {
display: inline-block;
margin: 0 0 14px;
padding: 6px 16px;
border-radius: 10px;
background: var(--sonne);
font: 800 .95rem/1.2 var(--titel);
letter-spacing: .02em;
transform: rotate(-2deg);
box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}
.tuer h2 {
margin: 0 0 .45em;
font: 800 clamp(1.9rem, 3.6vw, 3rem)/1.05 var(--titel);
text-wrap: balance;
}
.tuer__text p {
max-width: 30em;
font-weight: 500;
}
.tuer__text .knopf {
margin-top: 8px;
}
.tuer__figuren {
position: absolute;
right: 3%;
bottom: 22px;
z-index: 1;
width: 46%;
height: 76%;
pointer-events: none;
}
.tuer__figur {
position: absolute;
bottom: 0;
width: auto;
filter: drop-shadow(0 10px 8px rgba(10, 30, 60, .22));
transform-origin: 50% 100%;
animation: atmen 3.4s ease-in-out infinite;
}
.tuer__figur--einhorn { left: 0; height: 56%; animation-delay: -1.2s; }
.tuer__figur--mausi { left: 31%; height: 68%; }
.tuer__figur--frosch { left: 66%; height: 48%; animation-delay: -2.1s; }
.tuer__figur--vogel { right: 12%; top: 0; bottom: auto; height: 34%; animation: fliegen 7s ease-in-out infinite; }
.tuer__wiese {
position: absolute;
inset: auto 0 0;
z-index: 0;
width: 100%;
height: clamp(56px, 9vw, 110px);
}
.tuer__huegel2 { fill: #80c94c; }
.tuer__huegel1 { fill: #5db532; }
.tuer__text {
position: relative;
z-index: 2;
}
.neues-abschnitt {
background: var(--sand);
}
.neues-abschnitt {
padding-top: 0;
}
.musik-kopf {
--kopf-h: clamp(440px, 40vw, 720px);
--unter-band: calc(var(--kopf-h) * .19 + 18px);
display: grid;
align-items: center;
min-height: var(--kopf-h);
margin-bottom: calc(var(--unter-band) * -1);
background: var(--sand) url(../images/musik-himmel-1600.webp) right top / cover no-repeat;
}
.musik-kopf__rahmen {
position: relative;
padding-block: clamp(40px, 5vw, 72px) calc(clamp(40px, 5vw, 72px) + var(--unter-band));
}
.musik-kopf .ruhig-kopf {
max-width: min(520px, 40%);
margin: 0;
}
.musik-kopf .ruhig-lead {
color: var(--tinte);
}
.musik-kopf__nachweis {
position: absolute;
top: 12px;
right: 0;
margin: 0;
color: rgba(23, 50, 77, .5);
font-size: .7rem;
}
@media (min-width: 1500px) {
.musik-kopf {
background-image: url(../images/musik-himmel-2560.webp);
}
}
@media (max-width: 1100px) {
.musik-kopf {
--bild: min(200vw, 1400px);
display: block;
min-height: 0;
margin-bottom: 0;
padding-top: calc(var(--bild) / 2.5 * .86);
background-size: var(--bild) auto;
}
.musik-kopf .ruhig-kopf {
max-width: 640px;
}
.musik-kopf__rahmen {
padding-block: 0 clamp(32px, 5vw, 56px);
}
.musik-kopf__nachweis {
position: static;
margin-top: 10px;
text-align: right;
}
}
.alben {
--cover: 72px;
--luecke: 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.alben::-webkit-scrollbar {
display: none;
}
.alben.ist-laufend {
overflow: hidden;
overflow: clip;
}
.alben__spur {
display: flex;
gap: var(--luecke);
width: max-content;
margin: 0;
padding: 8px 16px 12px;
list-style: none;
}
.alben.ist-laufend .alben__spur {
padding-inline: 0 var(--luecke);
animation: laufband var(--dauer, 300s) linear infinite;
}
.alben:hover .alben__spur,
.alben.ist-angehalten .alben__spur,
.alben.ist-ausser-sicht .alben__spur {
animation-play-state: paused;
}
.alben__eintrag {
flex: none;
}
.alben__eintrag a {
display: block;
border-radius: 6px;
transition: transform .2s ease;
}
.alben__eintrag a:hover {
transform: translateY(-2px) scale(1.06);
}
.alben__eintrag img {
display: block;
width: var(--cover);
height: var(--cover);
border-radius: 6px;
box-shadow: 0 6px 14px -8px rgba(23, 50, 77, .55);
}
.alben__zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
margin: 12px 0 clamp(40px, 6vw, 72px);
}
.alben__satz {
margin: 0;
color: var(--tinte);
font: 600 1rem/1.3 var(--schrift);
}
.dienste {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.dienste a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 14px 5px 6px;
border: 1.5px solid rgba(23, 50, 77, .2);
border-radius: 999px;
background: var(--papier);
color: var(--tinte);
font: 600 .9rem/1.2 var(--schrift);
text-decoration: none;
transition: border-color .2s, transform .15s, box-shadow .2s;
}
.dienste a:hover,
.dienste a:focus-visible {
border-color: var(--tinte);
transform: translateY(-1px);
}
.dienste__zeichen {
display: block;
flex: none;
width: 22px;
height: 22px;
border-radius: 6px;
}
.dienste--zeichen a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border-color: rgba(23, 50, 77, .16);
border-radius: 50%;
box-shadow: 0 6px 14px -10px rgba(23, 50, 77, .6);
}
.dienste--zeichen a:hover,
.dienste--zeichen a:focus-visible {
box-shadow: 0 10px 18px -10px rgba(23, 50, 77, .7);
transform: translateY(-2px);
}
.dienste--zeichen .dienste__zeichen {
width: 26px;
height: 26px;
border-radius: 7px;
}
.alben__zeile .laufband__taste {
width: 28px;
height: 28px;
border-color: rgba(23, 50, 77, .3);
color: var(--tinte-weich);
}
.alben__zeile .laufband__taste:hover,
.alben__zeile .laufband__taste:focus-visible {
border-color: currentColor;
color: var(--tinte);
}
.alben__zeile .laufband__taste:focus-visible {
outline-color: var(--tinte);
}
.erfolg {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 4vw, 56px);
padding: clamp(22px, 3vw, 36px);
border-radius: 24px;
background: var(--papier);
box-shadow: var(--schatten-ruhig);
}
.erfolg__bild {
position: relative;
}
.erfolg__bild img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 18px 32px -16px rgba(23, 50, 77, .6);
}
.erfolg__band {
position: relative;
display: inline-block;
margin: 0 0 16px -10px;
padding: 10px 46px 18px;
color: #fff;
font: 700 clamp(1rem, 1.5vw, 1.15rem)/1 var(--schrift);
letter-spacing: .2em;
text-transform: uppercase;
white-space: nowrap;
filter: drop-shadow(0 6px 10px rgba(23, 50, 77, .3));
}
.erfolg__band svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.erfolg__band span {
position: relative;
margin-right: -.2em;
}
.erfolg__text p:not([class]) {
max-width: 58ch;
margin: 0;
color: var(--tinte-weich);
font-size: 1.05rem;
line-height: 1.6;
}
.erfolg__danke {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 20px;
color: var(--rot-dunkel);
font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--handschrift);
}
.erfolg__herz {
flex: none;
fill: var(--rot);
transform: rotate(8deg);
}
.erfolg .dienste,
.neu-karte .dienste {
justify-content: flex-start;
}
.neu-karte .dienste {
margin: 4px 0 16px;
}
.musik__titel {
margin: clamp(40px, 5vw, 60px) 0 18px;
font: 500 clamp(1.4rem, 2.2vw, 1.8rem)/1.2 var(--titel);
}
.musik-reihe {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto auto;
column-gap: clamp(20px, 3vw, 32px);
margin-top: clamp(40px, 5vw, 60px);
}
.musik-reihe__spalte {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
}
.musik-reihe .musik__titel {
align-self: end;
margin-top: 0;
text-wrap: balance;
}
.musik-reihe .neues {
max-width: none;
}
.auch__karte.video-karte {
overflow: hidden;
gap: 0;
padding: 0;
border-radius: 24px;
}
.musik-reihe .neu-karte {
align-items: center;
}
.video-karte__bild {
position: relative;
z-index: 1;
display: block;
aspect-ratio: 16 / 9;
}
.video-karte__bild img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-karte__bild svg {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
transition: scale .2s ease;
}
.video-karte__bild:hover svg,
.video-karte__bild:focus-visible svg {
scale: 1.1;
}
.video-karte__bild:focus-visible {
outline: 3px solid var(--tinte);
outline-offset: -3px;
}
.video-karte__text {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 18px 24px 22px;
}
.video-karte h4 {
font-size: 1.25rem;
}
.auch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: clamp(40px, 5vw, 60px) 0 0;
padding: 0;
list-style: none;
}
.auch__karte {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 20px 18px;
border-radius: 20px;
background: var(--papier);
transition: transform .2s ease, box-shadow .2s ease;
}
.auch__karte:hover,
.auch__karte:focus-within {
box-shadow: var(--schatten-ruhig);
transform: translateY(-2px);
}
.auch__marke {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--rot-dunkel);
font: 700 .8rem/1.2 var(--schrift);
letter-spacing: .02em;
}
.auch__karte h4 {
margin: 0;
font: 600 1.15rem/1.25 var(--titel);
text-wrap: balance;
}
.auch__karte p:not([class]) {
flex: 1;
margin: 0;
color: var(--tinte-weich);
font-size: .95rem;
line-height: 1.5;
}
.auch__weiter {
margin-top: 4px;
color: var(--tinte);
font-weight: 600;
text-underline-offset: 4px;
}
.auch__weiter::after {
content: ' →';
}
.auch__taste {
align-self: flex-start;
min-height: 40px;
margin-top: 6px;
padding: 8px 18px;
font-size: .95rem;
}
.auch__weiter::before,
.auch__taste::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.auch__weiter:focus-visible,
.auch__taste:focus-visible {
outline: none;
}
.auch__karte:has(:focus-visible) {
outline: 2px solid var(--tinte);
outline-offset: 3px;
}
.neues {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 760px;
gap: clamp(20px, 3vw, 32px);
}
.neu-karte {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
align-items: start;
gap: 24px;
padding: 26px;
border-radius: 24px;
background: var(--papier);
}
.neues .neu-karte:first-child {
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}
.platte {
position: relative;
width: 100%;
aspect-ratio: 1;
}
.platte__huelle {
position: relative;
z-index: 1;
height: 100%;
overflow: hidden;
border-radius: 4px;
background: var(--sand);
box-shadow: 0 16px 28px -14px rgba(23, 50, 77, .6);
}
.platte__huelle .platzhalter {
padding: 10px;
}
.platte__huelle .platzhalter span {
font-size: .86rem;
}
.buch-abschnitt {
background: var(--papier);
}
.buch {
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
.buch__bild {
position: relative;
margin: 0;
}
.buch__bild figcaption {
position: absolute;
right: 0;
bottom: 14px;
left: 0;
margin: 0;
color: var(--rot);
font: 600 .82rem/1.2 var(--schrift);
letter-spacing: .02em;
text-align: center;
}
.buch__bild .foto {
height: auto;
border-radius: 18px;
box-shadow: var(--schatten-ruhig);
}
.buch__text h2 {
margin: 0 0 18px;
font: 500 clamp(2rem, 4.2vw, 3.3rem)/1.08 var(--titel);
letter-spacing: -.015em;
}
.buch__shop {
margin: 18px 0 0;
}
.buch__shop .taste {
display: inline-flex;
align-items: center;
gap: 8px;
}
.buch__lied {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 14px;
padding: 12px 20px 12px 14px;
border: 1px solid var(--linie-ruhig);
border-radius: 18px;
background: var(--seite);
color: var(--tinte);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.buch__lied:hover,
.buch__lied:focus-visible {
border-color: #1db954;
box-shadow: 0 12px 24px -16px rgba(23, 50, 77, .55);
transform: translateY(-1px);
}
.buch__lied-marke {
flex: none;
}
.buch__lied-text {
display: grid;
gap: 2px;
}
.buch__lied-text strong {
font: 600 1.05rem/1.2 var(--titel);
}
.buch__lied-text span {
color: var(--tinte-weich);
font-size: .88rem;
}
.buch__text p:not([class]) {
max-width: 62ch;
margin: 0 0 14px;
color: var(--tinte-weich);
font-size: 1.05rem;
line-height: 1.6;
}
.neu-karte__marke {
margin: 0 0 8px;
color: var(--rot-dunkel);
font: 700 .74rem/1.2 var(--schrift);
letter-spacing: .14em;
text-transform: uppercase;
}
.neu-karte h4 {
margin: 0 0 10px;
font: 600 1.45rem/1.2 var(--titel);
}
.neu-karte__klein {
margin: 0;
color: var(--tinte-weich);
font-size: .9rem;
}
.kennzahlen__titel {
margin: clamp(40px, 5vw, 64px) 0 0;
padding-top: 24px;
border-top: 1px solid var(--linie-ruhig);
color: var(--tinte-weich);
font: 700 .74rem/1.2 var(--schrift);
letter-spacing: .14em;
text-transform: uppercase;
}
.kennzahlen {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.kennzahlen strong {
display: block;
font: 500 clamp(2rem, 3.4vw, 2.8rem)/1 var(--titel);
}
.kennzahlen span {
display: block;
margin-top: 6px;
color: var(--tinte-weich);
font-size: .92rem;
}
.portraet {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: clamp(32px, 6vw, 96px);
}
.spiegel {
padding: 30px;
border-radius: 30px;
background:
radial-gradient(circle, #fff9e6 0 4px, rgba(255, 226, 150, .8) 5px, rgba(255, 210, 120, 0) 14px) center / 46px 46px space,
linear-gradient(145deg, #5c3f25, #2e1e12);
box-shadow: 0 34px 60px -30px rgba(23, 50, 77, .7), inset 0 0 0 2px rgba(255, 214, 140, .22);
}
.portraet__figur {
margin: 0;
}
.portraet__bild {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 8px;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25);
}
.portraet__bild .platzhalter {
border-radius: 8px;
}
.portraet__text > p {
color: var(--tinte-weich);
}
.galerie__zitat footer {
font-size: .9rem;
font-weight: 600;
letter-spacing: .04em;
}
.galerie__zitat footer::before {
content: '– ';
}
.galerie-abschnitt {
position: relative;
background: #1f3a68 url(../images/lichtstimmung-2000.webp) right top / max(100%, 1300px) auto no-repeat;
color: #f3ede4;
}
@media (max-width: 900px) {
.galerie-abschnitt {
background-image: url(../images/lichtstimmung-1200.webp);
background-size: max(100%, 760px) auto;
}
}
.galerie-abschnitt h2 {
color: #fff;
}
.galerie__zitat {
max-width: 720px;
margin: 0;
}
.galerie__zitat p {
margin: 0;
color: rgba(255, 255, 255, .92);
font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.4 var(--handschrift);
}
.galerie__zitat footer {
margin-top: 4px;
color: #fff;
font: 400 clamp(1.6rem, 2.5vw, 2rem)/1 var(--handschrift);
letter-spacing: 0;
text-align: right;
}
.galerie__zitat footer::before {
content: none;
}
.laufband {
--reihe: clamp(150px, 15vw, 220px);
--luecke: 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--luecke);
}
.laufband .laufband__video {
height: calc(var(--reihe) * 2 + var(--luecke));
aspect-ratio: 960 / 864;
}
.laufband__reihen {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--luecke);
min-width: 0;
}
.laufband__reihe {
height: var(--reihe);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.laufband__reihe::-webkit-scrollbar {
display: none;
}
.laufband__spur {
display: flex;
gap: var(--luecke);
width: max-content;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.laufband__eintrag {
flex: none;
height: 100%;
scroll-snap-align: start;
}
.laufband.ist-laufend .laufband__reihe {
overflow: hidden;
overflow: clip;
}
.laufband.ist-laufend .laufband__spur {
padding-inline-end: var(--luecke);
animation: laufband var(--dauer, 90s) linear infinite;
}
.laufband.ist-laufend .laufband__reihe--rechts .laufband__spur {
animation-direction: reverse;
}
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur,
.laufband.ist-angehalten .laufband__spur,
.laufband.ist-ausser-sicht .laufband__spur {
animation-play-state: paused;
}
@keyframes laufband {
to {
translate: -50% 0;
}
}
.laufband__ganz {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 12px;
border-radius: inherit;
color: #1f3a68;
text-decoration: none;
}
.laufband__pille {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
border-radius: 999px;
background: #fff;
box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
font: 700 .9rem/1.2 var(--schrift);
transition: transform .2s ease;
}
.laufband__pille svg {
fill: currentColor;
}
.laufband__dauer {
color: #5a6b85;
font-weight: 600;
}
.laufband__ganz:hover .laufband__pille,
.laufband__ganz:focus-visible .laufband__pille {
transform: scale(1.05);
}
.laufband__ganz:focus-visible {
outline: 3px solid #fff;
outline-offset: -3px;
}
.konzertvideo {
width: min(100vw - 32px, (100vh - 110px) * 9 / 16);
width: min(100vw - 32px, (100dvh - 110px) * 9 / 16);
max-width: none;
padding: 0;
border: 0;
border-radius: 16px;
background: #000;
overflow: visible;
}
.konzertvideo::backdrop {
background: rgba(12, 22, 42, .86);
}
.konzertvideo video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 9 / 16;
border-radius: 16px;
background: #000;
}
.konzertvideo__zu {
position: absolute;
top: -46px;
right: 0;
display: grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 50%;
background: transparent;
color: #fff;
font: 400 1.6rem/1 var(--schrift);
cursor: pointer;
}
.konzertvideo__zu:hover,
.konzertvideo__zu:focus-visible {
border-color: #fff;
}
.laufband__fuss {
display: flex;
justify-content: center;
margin-top: 16px;
}
.laufband__taste {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
background: transparent;
color: rgba(255, 255, 255, .75);
cursor: pointer;
transition: color .2s, border-color .2s;
}
.laufband__taste[hidden] {
display: none;
}
.laufband__taste svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.laufband__taste .laufband__zeichen-weiter {
display: none;
fill: currentColor;
stroke-width: 1.2;
}
.laufband__taste.ist-angehalten .laufband__zeichen-pause {
display: none;
}
.laufband__taste.ist-angehalten .laufband__zeichen-weiter {
display: block;
}
.laufband__taste:hover,
.laufband__taste:focus-visible {
border-color: currentColor;
color: #fff;
}
.laufband__taste:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.galerie__link {
position: relative;
display: block;
height: 100%;
overflow: hidden;
border-radius: 16px;
color: #fff;
}
.galerie__link .foto {
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.galerie__video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.galerie__link:hover .foto,
.galerie__link:focus-visible .foto {
transform: scale(1.04);
}
.galerie__titel {
position: absolute;
inset: auto 0 0;
padding: 32px 14px 10px;
background: linear-gradient(transparent, rgba(0, 0, 0, .62));
font-size: .92rem;
font-weight: 600;
}
.galerie-abschnitt .foto-hinweis {
margin: 18px 0 0;
color: rgba(243, 237, 228, .55);
font-size: .78rem;
text-align: right;
}
.fnd-lightbox {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: rgba(10, 18, 28, .94);
}
.fnd-lightbox[hidden],
.fnd-lightbox__locate,
.fnd-lightbox__counter[hidden],
.fnd-lightbox__mapbar[hidden],
.fnd-lightbox__nav[hidden] {
display: none;
}
.fnd-lightbox__figure {
display: flex;
flex-direction: column;
align-items: center;
gap: .7rem;
max-width: 95vw;
max-height: 92vh;
margin: 0;
}
.fnd-lightbox__row {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(95vw, 1400px);
}
.fnd-lightbox__stage {
position: relative;
display: flex;
min-width: 0;
}
.fnd-lightbox__img {
display: block;
max-width: calc(min(95vw, 1400px) - 7rem);
max-height: 82vh;
border-radius: 10px;
object-fit: contain;
}
.fnd-lightbox__cap {
color: rgba(243, 237, 228, .6);
font: 400 .82rem/1.4 var(--schrift);
letter-spacing: .02em;
text-align: center;
}
.fnd-lightbox__close,
.fnd-lightbox__nav {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
line-height: 1;
cursor: pointer;
}
.fnd-lightbox__close:hover,
.fnd-lightbox__nav:hover {
background: rgba(255, 255, 255, .28);
}
.fnd-lightbox__close {
right: 0;
bottom: calc(100% + .5rem);
width: 2.6rem;
height: 2.6rem;
font-size: 1.8rem;
}
.fnd-lightbox__nav {
top: 50%;
width: 3rem;
height: 3rem;
font-size: 2.2rem;
transform: translateY(-50%);
}
.fnd-lightbox__nav--prev { left: 0; }
.fnd-lightbox__nav--next { right: 0; }
.fnd-lightbox__nav[disabled] {
opacity: .25;
cursor: default;
}
.gastspiele {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 3vw, 36px);
}
.gastspiel {
overflow: hidden;
border: 1px solid var(--linie-ruhig);
border-radius: 20px;
background: var(--papier);
}
.gastspiel__bild {
aspect-ratio: 3 / 2;
background: var(--sand);
}
.gastspiel__text {
padding: 22px 26px 24px;
}
.gastspiel__art {
margin: 0 0 6px;
color: var(--rot-dunkel);
font: 700 .74rem/1.2 var(--schrift);
letter-spacing: .14em;
text-transform: uppercase;
}
.gastspiel h3 {
margin: 0 0 8px;
font: 600 1.4rem/1.2 var(--titel);
}
.gastspiel__text > p:not(.gastspiel__art):not(.foto-nachweis):not(.gastspiel__folgt) {
color: var(--tinte-weich);
}
.gastspiel__folgt {
display: inline-block;
padding: 6px 12px;
border: 1.5px dashed rgba(23, 50, 77, .35);
border-radius: 999px;
color: var(--tinte-weich);
font-size: .88rem;
font-weight: 600;
}
.entwurf-notiz {
margin: 18px 0 0;
color: var(--tinte-weich);
font-size: .86rem;
font-style: italic;
}
@media (max-width: 760px) {
.gastspiele {
grid-template-columns: 1fr;
}
}
.stimmenband {
--fans-blau: #1f3a68;
position: relative;
isolation: isolate;
overflow: hidden;
margin-top: clamp(56px, 7vw, 96px);
padding: clamp(28px, 4vw, 52px) clamp(16px, 3.5vw, 44px) clamp(20px, 2.6vw, 32px);
border-radius: clamp(20px, 2.4vw, 32px);
background: var(--fans-blau);
box-shadow: var(--schatten-ruhig);
color: #fff;
}
.stimmenband__hintergrund {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.stimmenband::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--fans-blau) 42%, transparent) 0%,
color-mix(in srgb, var(--fans-blau) 70%, transparent) 42%,
color-mix(in srgb, var(--fans-blau) 90%, transparent) 100%);
}
.stimmenband__titel {
margin: 0;
color: #fff;
font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--titel);
}
.stimmenband__stimme {
color: var(--tinte);
}
.stimmenband__fenster {
display: flex;
gap: 18px;
padding: 44px 2px 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.stimmenband__stimme {
position: relative;
flex: 0 0 min(320px, 82%);
margin: 0;
padding: 36px 26px 22px;
border: 1px solid var(--linie-ruhig);
border-radius: 20px;
background: var(--papier);
box-shadow: 0 10px 24px -20px rgba(23, 50, 77, .5);
scroll-snap-align: center;
}
.stimmenband__stimme::before {
content: '„';
position: absolute;
top: 0;
left: 20px;
color: var(--rot);
font: 600 4.2rem/1 var(--titel);
transform: translateY(-34px);
}
.stimmenband__stimme:lang(en)::before {
content: '“';
transform: translateY(4px);
}
.stimmenband__stimme p {
margin: 0;
font: 400 1rem/1.55 var(--titel);
overflow-wrap: break-word;
hyphens: auto;
}
.stimmenband__fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 16px;
margin-top: 4px;
}
.stimmenband__tasten {
display: flex;
gap: 6px;
}
.stimmenband__tasten[hidden] {
display: none;
}
.stimmenband__taste {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
background: transparent;
color: rgba(255, 255, 255, .75);
cursor: pointer;
transition: color .2s, border-color .2s;
}
.stimmenband__taste svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.stimmenband__taste .stimmenband__zeichen-weiter {
fill: currentColor;
stroke-width: 1.2;
}
.stimmenband__taste:hover,
.stimmenband__taste:focus-visible {
border-color: currentColor;
color: #fff;
}
.stimmenband__taste:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.stimmenband__taste .stimmenband__zeichen-weiter,
.ist-angehalten .stimmenband__taste .stimmenband__zeichen-pause {
display: none;
}
.ist-angehalten .stimmenband__taste .stimmenband__zeichen-weiter {
display: block;
}
html.js .stimmenband:not(.ist-laufend) .stimmenband__fenster {
visibility: hidden;
animation: stimmen-zeigen 0s 2s forwards;
}
@keyframes stimmen-zeigen {
to { visibility: visible; }
}
.stimmenband.ist-laufend .stimmenband__fenster {
position: relative;
display: block;
height: var(--band-hoehe, 340px);
padding: 0;
overflow: hidden;
overflow: clip;
scroll-snap-type: none;
touch-action: pan-y;
}
.stimmenband.ist-laufend .stimmenband__stimme {
position: absolute;
top: 50%;
left: 50%;
width: var(--breite-gross, 480px);
opacity: 0;
translate: calc(-50% + var(--x, 0px)) -50%;
scale: var(--s, .6);
cursor: pointer;
transition: translate .9s cubic-bezier(.45, 0, .2, 1), scale .9s cubic-bezier(.45, 0, .2, 1),
opacity .7s ease, box-shadow .9s ease;
}
.stimmenband.ist-laufend .stimmenband__stimme p {
font-size: 1em;
line-height: 1.45;
}
.stimmenband.ist-laufend .stimmenband__stimme {
padding-inline: clamp(16px, calc(var(--breite-gross, 480px) * .06), 26px);
}
.stimmenband.ist-laufend .stimmenband__stimme--kurz {
font-size: clamp(1.05rem, calc(var(--breite-gross, 480px) * .075), 1.9rem);
}
.stimmenband.ist-laufend .stimmenband__stimme--mittel {
font-size: clamp(.95rem, calc(var(--breite-gross, 480px) * .056), 1.45rem);
}
.stimmenband.ist-laufend .stimmenband__stimme--lang {
font-size: clamp(.9rem, calc(var(--breite-gross, 480px) * .047), 1.2rem);
}
.stimmenband.ist-laufend .stimmenband__stimme[data-abstand="-1"],
.stimmenband.ist-laufend .stimmenband__stimme[data-abstand="1"] {
opacity: .85;
}
.stimmenband.ist-laufend .stimmenband__stimme[data-abstand="0"] {
opacity: 1;
cursor: auto;
box-shadow: 0 24px 44px -28px rgba(23, 50, 77, .55);
}
@media (prefers-reduced-motion: reduce) {
.stimmenband.ist-laufend .stimmenband__stimme {
transition: none;
}
.stimmenband__taste--pause {
display: none;
}
}
.post-abschnitt {
background: var(--sand);
}
.briefkasten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 28px);
}
.brief {
padding: 26px 26px 22px;
border-radius: 22px;
background: var(--papier);
}
.brief h3 {
margin: 0 0 10px;
font: 600 1.35rem/1.2 var(--titel);
}
.brief__adresse {
padding: 14px 18px;
border-left: 3px solid var(--rot);
border-radius: 0 12px 12px 0;
background: var(--seite);
font: 500 1.08rem/1.5 var(--titel);
font-style: normal;
}
.brief__zeile {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.brief__zeile input {
flex: 1 1 180px;
min-width: 0;
min-height: 40px;
padding: 8px 16px;
border: 1.5px solid rgba(23, 50, 77, .3);
border-radius: 999px;
background: #fff;
color: var(--tinte);
font: inherit;
font-size: .95rem;
}
.brief__meldung:empty {
display: none;
}
.brief__meldung,
.brief__klein {
margin: 10px 0 0;
color: var(--tinte-weich);
font-size: .86rem;
}
.brief--autogramm {
position: relative;
display: flex;
align-items: center;
min-height: 440px;
overflow: hidden;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.brief__karte {
position: absolute;
inset: 0 0 0 auto;
width: auto;
max-width: none;
height: 100%;
-webkit-mask-image: linear-gradient(to right, transparent, #000 32%);
mask-image: linear-gradient(to right, transparent, #000 32%);
}
.brief__text {
position: relative;
max-width: min(52%, 440px);
}
.brief__nachweis {
position: absolute;
right: 14px;
bottom: 8px;
margin: 0;
color: rgba(255, 255, 255, .85);
font-size: .7rem;
text-shadow: 0 1px 2px rgba(23, 50, 77, .6);
}
.brief__logo {
display: block;
width: 207px;
max-width: 100%;
height: auto;
margin: 4px 0 14px;
}
body.welt-gross .fuss {
--fuss-grund: #16304a;
margin-top: 0;
}
.seiten-titel {
margin: 0 0 .35em;
font: 500 clamp(2.2rem, 4.6vw, 3.5rem)/1.06 var(--titel);
letter-spacing: -.015em;
text-wrap: balance;
}
.seite--presse .presse-kopf {
align-items: center;
}
.presse-kopf__bild {
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 20px;
box-shadow: var(--schatten-ruhig);
}
.seite--presse .presse-karte,
.seite--presse .pressefotos li {
border: 1px solid var(--linie-ruhig);
background: var(--papier);
box-shadow: none;
}
.seite--presse .presse-karte {
border-radius: 20px;
}
.seite--presse .pressefotos li {
border-radius: 14px;
}
.seite--presse .presse-karte h2 {
font: 600 1.35rem/1.2 var(--titel);
}
.seite--presse .presse-karte h3 {
margin: 1.2em 0 .3em;
color: var(--tinte-weich);
font: 700 .74rem/1.2 var(--schrift);
letter-spacing: .14em;
text-transform: uppercase;
}
.seite--presse .presse-karte h3:first-of-type {
margin-top: 0;
}
.seite--presse .presse-bio p:first-child {
font: 500 1.25rem/1.4 var(--titel);
}
.seite--presse .presse-kopiert {
color: var(--rot-dunkel);
}
.pressefotos--druck img {
aspect-ratio: 3 / 4;
object-position: 50% 20%;
}
.presse-unterzeile {
margin: clamp(48px, 6vw, 72px) 0 14px;
font: 500 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--titel);
}
.seite--presse .presse-paket {
justify-content: flex-start;
margin: 0 0 22px;
}
.rahmen--text {
max-width: 760px;
}
.rahmen--text h2 {
margin-top: 1.6em;
font-size: 1.5rem;
font-weight: 800;
}
.welt-gross .rahmen--text h2 {
font: 600 1.4rem/1.25 var(--titel);
}
body.welt-gross .back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 90;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
border: 1px solid var(--linie-ruhig);
border-radius: 50%;
background: var(--papier);
color: var(--rot-dunkel);
box-shadow: 0 12px 26px -12px rgba(23, 50, 77, .55);
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
transition: opacity .2s ease, transform .2s ease, visibility .2s, box-shadow .2s;
}
body.welt-gross .back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
body.welt-gross .back-to-top__icon {
width: 26px;
height: 26px;
margin-block: -7px -6px;
transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
body.welt-gross .back-to-top::after {
content: '';
width: 24px;
height: 24px;
background: url(../images/blumen/wiese-rot-1.webp) center / contain no-repeat;
transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
body.welt-gross .back-to-top:focus-visible {
outline: 3px solid var(--tinte);
outline-offset: 4px;
}
@media (hover: hover) {
body.welt-gross .back-to-top:hover {
box-shadow: 0 16px 30px -12px rgba(23, 50, 77, .6);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
body.welt-gross .back-to-top:hover .back-to-top__icon {
transform: translateY(-3px);
}
body.welt-gross .back-to-top:hover::after {
transform: translateY(-3px) rotate(30deg);
}
}
@media (max-width: 640px) {
body.welt-gross .back-to-top {
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
width: 48px;
height: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
body.welt-gross .back-to-top {
transform: none;
transition: opacity .2s ease, visibility .2s;
}
}
@media (max-width: 1100px) {
.musik-reihe {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
.musik-reihe__spalte {
display: block;
grid-row: auto;
}
.musik-reihe__spalte + .musik-reihe__spalte {
margin-top: clamp(40px, 5vw, 60px);
}
}
@media (min-width: 641px) and (max-width: 1100px) {
.auch__karte.video-karte {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
align-items: center;
}
}
@media (max-width: 1000px) {
.neues,
.reihen {
grid-template-columns: 1fr;
}
.buch {
grid-template-columns: 1fr;
}
.buch__bild {
width: min(100%, 360px);
}
.briefkasten {
grid-template-columns: 1fr 1fr;
}
.brief--autogramm {
grid-column: 1 / -1;
grid-row: auto;
min-height: 380px;
}
}
@media (max-width: 900px) {
.buehne {
--buehne-grund: #e4f2d4;
display: block;
min-height: 0;
padding: 0 0 48px;
}
.buehne__bild {
position: relative;
inset: auto;
width: 100%;
height: min(68svh, 560px);
-webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.buehne__bild .foto {
object-position: 79% 50% !important;
}
.buehne__inner {
position: relative;
width: min(1320px, 100% - 32px);
margin-top: -72px;
}
.buehne__text {
max-width: none;
}
.konzert-kachel {
max-width: none;
gap: 12px;
}
.konzert-kachel__bilder {
width: 112px;
}
.buehne__logo {
width: min(72%, 300px);
}
.scheinwerfer {
right: 6%;
width: 80%;
height: min(80svh, 640px);
}
.rampe span:nth-child(odd) {
display: none;
}
.tuer {
padding: 88px 52px 0;
}
.portraet,
.begruessung__inner {
grid-template-columns: 1fr;
}
.begruessung__bild {
width: min(100%, 340px);
}
.spiegel {
width: min(100%, 380px);
padding: 24px;
}
.tuer {
grid-template-columns: 1fr;
padding-bottom: 0;
}
.tuer__figuren {
position: relative;
right: auto;
bottom: auto;
width: min(100%, 440px);
height: 190px;
margin: 20px auto 0;
}
.laufband {
--reihe: clamp(130px, 34vw, 180px);
grid-template-columns: minmax(0, 1fr);
}
.laufband .laufband__video {
width: 100%;
height: auto;
}
.kennzahlen {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 540px) {
.konzert-kachel {
flex-wrap: wrap;
}
.konzert-kachel__bilder {
width: 100%;
aspect-ratio: 16 / 9;
}
.konzert-kachel__text {
flex: 1 1 0;
padding-left: 4px;
}
}
@media (max-width: 640px) {
.briefkasten {
grid-template-columns: 1fr;
}
.brief--autogramm {
display: block;
min-height: 0;
padding: min(78vw, 330px) 12px 30px;
}
.brief__karte {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 0;
-webkit-mask-image: none;
mask-image: none;
}
.brief__text {
max-width: none;
padding: 18px 18px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, .92);
}
.alben {
--cover: 60px;
}
.erfolg {
grid-template-columns: 1fr;
}
.erfolg__bild {
width: min(100%, 240px);
margin: 8px auto 0;
}
.auch {
grid-template-columns: 1fr;
}
.neu-karte {
grid-template-columns: 1fr;
gap: 18px;
padding: 20px;
}
.neu-karte__bild {
width: 170px;
}
.neues .neu-karte:first-child {
grid-template-columns: 1fr;
}
.platte {
width: 150px;
}
.termine {
padding: 6px 14px 14px;
}
.reihe__kopf {
padding: 20px 20px 4px;
}
.termine__mehr,
.termine__leer {
margin-inline: 20px;
}
.termin {
--abriss: 62px;
grid-template-columns: var(--abriss) minmax(0, 1fr);
gap: 0 14px;
padding-right: 12px;
}
.termin__ort {
padding-bottom: 6px;
}
.termin__ticket,
.termin.ist-vorbei .termin__vorbei {
grid-column: 2;
justify-self: start;
margin-bottom: 12px;
}
.termin__datum {
grid-row: span 2;
}
.termin.hat-hinweis .termin__stempel {
top: -12px;
right: 12px;
padding: 4px 8px 3px;
font-size: .78rem;
}
}
@media (prefers-reduced-motion: reduce) {
.tuer__figur,
.scheinwerfer,
.rampe span {
animation: none !important;
}
.vorhang {
animation: none !important;
translate: var(--weg) 0;
scale: var(--raff) 1;
transform: none;
transition: none !important;
}
.galerie__link .foto,
.taste {
transition: none;
}
}