.unterzeile {
margin: clamp(40px, 6vw, 72px) 0 20px;
font-size: clamp(1.5rem, 2.8vw, 2.2rem);
font-weight: 900;
text-align: center;
}
.unterzeile small {
display: block;
color: var(--tinte-weich);
font: 500 1rem var(--schrift);
}
.zahlen {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0 0 clamp(36px, 5vw, 60px);
padding: 0;
list-style: none;
}
.zahlen li {
display: flex;
flex-direction: column;
align-items: center;
padding: 22px 12px;
border-radius: 26px;
background: #fff;
text-align: center;
box-shadow: var(--schatten-klein);
}
.zahlen li:nth-child(1) { --akzent: var(--rot); }
.zahlen li:nth-child(2) { --akzent: #2a9fd6; }
.zahlen li:nth-child(3) { --akzent: var(--lila); }
.zahlen li:nth-child(4) { --akzent: var(--wiese-dunkel); }
.zahlen strong {
color: var(--akzent);
font: 900 clamp(2.2rem, 4.2vw, 3.4rem)/1 var(--titel);
white-space: nowrap;
}
.zahlen li > span {
margin-top: 6px;
color: var(--tinte-weich);
font-weight: 600;
}
.neuheit {
display: grid;
grid-template-columns: 300px 1fr;
align-items: center;
gap: clamp(20px, 4vw, 48px);
padding: clamp(20px, 3vw, 34px);
border-radius: 32px;
background: linear-gradient(120deg, #fff4c2, #ffe0ee);
box-shadow: var(--schatten);
}
.neuheit__bild {
position: relative;
height: 240px;
border-radius: 24px;
background: radial-gradient(circle at 50% 80%, #ffffffaa, transparent 60%);
}
.neuheit__torte {
position: absolute;
left: 50%;
bottom: 10px;
font-size: 96px;
line-height: 1;
transform: translateX(-50%);
}
.ballon {
position: absolute;
width: 70px;
height: 84px;
border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--b);
animation: schweben-ballon 4s ease-in-out infinite;
}
.ballon::after {
content: '';
position: absolute;
left: 50%;
top: 100%;
width: 2px;
height: 70px;
background: rgba(23, 50, 77, .3);
}
.ballon--1 { --b: var(--rot); left: 12%; top: 8%; }
.ballon--2 { --b: var(--himmel); left: 40%; top: 0; animation-delay: -1.3s; }
.ballon--3 { --b: var(--sonne); left: 66%; top: 12%; animation-delay: -2.4s; }
@keyframes schweben-ballon {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-12px) rotate(3deg); }
}
.neuheit__text h3 {
margin: 0 0 .4em;
font-size: clamp(1.7rem, 3vw, 2.5rem);
font-weight: 900;
}
.hoeren {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.hoeren__knopf {
padding: 10px 18px;
border-radius: 999px;
background: #fff;
color: var(--tinte);
font-weight: 700;
text-decoration: none;
box-shadow: var(--schatten-klein);
transition: transform .15s;
}
.hoeren__knopf:hover {
transform: translateY(-2px);
}
.liedkarten {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.liedkarte {
position: relative;
perspective: 1000px;
}
.liedkarte__innen {
position: relative;
display: block;
width: 100%;
height: 250px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
transform-style: preserve-3d;
transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
}
.liedkarte__innen[aria-pressed="true"] {
transform: rotateY(180deg);
}
.liedkarte__vorn,
.liedkarte__hinten {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px;
border-radius: 26px;
backface-visibility: hidden;
box-shadow: var(--schatten-klein);
}
.liedkarte__vorn {
background: radial-gradient(circle at 50% 30%, #fff, color-mix(in srgb, var(--karte) 22%, #fff));
border: 4px solid var(--karte);
}
.liedkarte__vorn img {
width: auto;
height: 110px;
transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.liedkarte__innen:hover .liedkarte__vorn img {
transform: translateY(-6px) rotate(-5deg);
}
.liedkarte__hinten {
background: var(--karte);
color: #fff;
transform: rotateY(180deg);
}
.liedkarte__titel {
color: var(--tinte);
font: 900 1.3rem/1.15 var(--titel);
text-align: center;
}
.liedkarte__titel--klein {
color: #fff;
font-size: 1.05rem;
}
.liedkarte__tipp {
color: var(--tinte-weich);
font-size: .82rem;
font-weight: 700;
}
.liedkarte__schritte {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.liedkarte__schritte span {
padding: 7px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, .22);
font-weight: 700;
text-align: left;
}
.liedkarte__link {
position: absolute;
right: 12px;
top: 12px;
z-index: 2;
padding: 4px 10px;
border-radius: 999px;
background: #fff;
color: var(--tinte);
font-size: .8rem;
font-weight: 700;
text-decoration: none;
box-shadow: var(--schatten-klein);
}
.kanal {
display: flex;
align-items: center;
gap: 20px;
max-width: 720px;
margin: clamp(36px, 5vw, 56px) auto 0;
padding: 18px 24px;
border-radius: 26px;
background: #fff;
color: var(--tinte);
text-decoration: none;
box-shadow: var(--schatten-klein);
transition: transform .2s, box-shadow .2s;
}
.kanal:hover {
transform: translateY(-2px);
box-shadow: var(--schatten);
}
.kanal__play {
flex: 0 0 auto;
position: relative;
width: 76px;
height: 54px;
border-radius: 16px;
background: #ff0033;
}
.kanal__play::after {
content: '';
position: absolute;
left: 31px;
top: 15px;
border: 12px solid transparent;
border-left: 20px solid #fff;
border-right: 0;
}
.kanal__text strong {
display: block;
font: 800 1.2rem/1.2 var(--titel);
}
.kanal__text span {
color: var(--tinte-weich);
}
.abschnitt--simone {
background:
radial-gradient(circle at 10% 20%, rgba(255, 210, 31, .18), transparent 30%),
radial-gradient(circle at 90% 70%, rgba(255, 126, 179, .14), transparent 30%);
}
.liederpfad {
position: relative;
}
.liederpfad__steine {
display: flex;
gap: 18px;
margin: 0;
padding: 30px 44px 26px;
overflow-x: auto;
scroll-padding-inline: 44px;
list-style: none;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
background:
radial-gradient(circle, rgba(106, 191, 58, .5) 3px, transparent 4px) 0 50% / 22px 22px repeat-x;
}
.liederpfad__steine::-webkit-scrollbar {
display: none;
}
.liederpfad__steine li {
flex: 0 0 auto;
scroll-snap-align: center;
}
.liederpfad__steine li:nth-child(odd) {
margin-top: 26px;
}
.stein {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 230px;
min-height: 200px;
padding: 18px 18px 20px;
border: 0;
border-radius: 34px 26px 38px 24px;
background: #fff;
color: var(--tinte);
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: 0 8px 0 rgba(23, 50, 77, .08), var(--schatten-klein);
transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .3s;
}
.stein:hover,
.stein.ist-an {
transform: translateY(-8px) rotate(-1.5deg);
}
.stein.war-an {
background: #fff7d6;
}
.stein__bild {
font-size: 2.2rem;
line-height: 1;
}
.stein__zeit {
padding: 2px 10px;
border-radius: 999px;
background: var(--rot);
color: #fff;
font: 800 .9rem/1.4 var(--titel);
}
.stein__text {
font-size: .98rem;
line-height: 1.45;
}
.liederpfad__pfeil {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-top: -24px;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--tinte);
font: 900 1.8rem/1 var(--titel);
cursor: pointer;
box-shadow: var(--schatten);
}
.liederpfad__pfeil--zurueck { left: -12px; }
.liederpfad__pfeil--vor { right: -12px; }
html:not(.js) .liederpfad__pfeil {
display: none;
}
.zitate {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 22px;
margin-top: clamp(30px, 5vw, 56px);
}
.zitat {
position: relative;
margin: 0;
padding: 30px 30px 26px 34px;
border-radius: 30px;
background: var(--tinte);
color: #fff;
}
.zitat__wer {
margin-top: 8px;
color: var(--sonne);
font: 500 2.4rem/1 var(--hand);
text-align: right;
}
.zitat p {
margin: 0;
font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--titel);
font-style: italic;
}
.zitat--zwei {
background: var(--rot);
}
.zitat--zwei .zitat__wer {
color: #fff;
}
.polaroids {
position: relative;
height: 600px;
margin-top: 10px;
}
.polaroid {
--x: 0px;
--y: 0px;
position: absolute;
left: var(--links);
top: var(--oben);
width: clamp(220px, 26%, 300px);
margin: 0;
padding: 12px 12px 14px;
background: #fff;
box-shadow: 0 10px 26px rgba(23, 50, 77, .22);
transform: translate(var(--x), var(--y)) rotate(var(--dreh));
cursor: grab;
touch-action: none;
user-select: none;
transition: box-shadow .2s;
}
.polaroid.ist-gezogen {
cursor: grabbing;
box-shadow: 0 20px 40px rgba(23, 50, 77, .3);
}
.polaroid img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
pointer-events: none;
}
.polaroid figcaption {
margin-top: 8px;
color: var(--tinte);
font: 500 1.9rem/1 var(--hand);
text-align: center;
}
.foto-hinweis {
margin-top: 10px;
color: var(--tinte-weich);
font-size: .82rem;
text-align: center;
}
.abschnitt--post {
background: linear-gradient(#fff8ec00, #ffeccc);
}
html[data-saison="winter"] .abschnitt--post {
background: linear-gradient(#f4f7fd00, #dfe8f8);
}
.werkstatt {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: clamp(20px, 4vw, 52px);
align-items: start;
justify-content: center;
}
.werkstatt__karte canvas {
display: block;
width: 100%;
height: auto;
border-radius: 26px;
box-shadow: 0 18px 40px rgba(23, 50, 77, .25);
transform: rotate(-2deg);
}
.wahl {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
border: 0;
}
.wahl legend {
margin-bottom: 8px;
font: 800 1.05rem/1.2 var(--titel);
}
.wahl label {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 14px 6px 10px;
border: 2px solid transparent;
border-radius: 999px;
background: #fff;
font-weight: 600;
cursor: pointer;
box-shadow: var(--schatten-klein);
}
.wahl label:has(input:checked) {
border-color: var(--rot);
background: #fff4f2;
}
.wahl input {
accent-color: var(--rot);
}
.wahl__farbe {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--f);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.wahl--figuren img {
width: auto;
height: 30px;
}
.werkstatt__knoepfe {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
@media print {
html.druckt-autogramm body * {
visibility: hidden;
}
html.druckt-autogramm .werkstatt__karte canvas {
visibility: visible;
position: fixed;
left: 50%;
top: 20mm;
width: 110mm;
transform: translateX(-50%);
box-shadow: none;
}
}
.postfach {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
margin-top: clamp(56px, 8vw, 100px);
}
.umschlag {
position: relative;
aspect-ratio: 16 / 10;
padding: 34px;
border-radius: 10px;
background:
linear-gradient(155deg, transparent 49.5%, rgba(23, 50, 77, .08) 50%, transparent 50.5%) top / 100% 50% no-repeat,
linear-gradient(25deg, transparent 49.5%, rgba(23, 50, 77, .08) 50%, transparent 50.5%) top / 100% 50% no-repeat,
#fffdf7;
box-shadow: 0 16px 34px rgba(23, 50, 77, .2);
transform: rotate(2deg);
}
.umschlag::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 10px solid transparent;
border-image: repeating-linear-gradient(45deg, var(--rot) 0 14px, #fff 14px 28px, #2a6fd6 28px 42px, #fff 42px 56px) 10;
pointer-events: none;
}
.umschlag__marke {
position: absolute;
top: 26px;
right: 26px;
width: 86px;
height: 104px;
padding: 6px;
background: #fff;
outline: 3px dashed #d7dde6;
outline-offset: -3px;
box-shadow: var(--schatten-klein);
transform: rotate(4deg);
}
.umschlag__marke img {
width: 100%;
height: 100%;
object-fit: contain;
background: #ffe9a6;
}
.umschlag__stempel {
position: absolute;
top: 60px;
right: 96px;
padding: 18px 10px;
border: 3px solid rgba(23, 50, 77, .35);
border-radius: 50%;
color: rgba(23, 50, 77, .45);
font: 800 .8rem/1 var(--titel);
text-transform: uppercase;
transform: rotate(-14deg);
}
.umschlag__an {
position: absolute;
left: 14%;
bottom: 16%;
margin: 0;
color: var(--tinte);
font: 500 2.1rem/1.15 var(--hand);
}
.umschlag__an strong {
font-weight: 500;
}
.postfach__adresse {
margin: 12px 0 22px;
padding: 14px 18px;
border-left: 5px solid var(--rot);
border-radius: 0 14px 14px 0;
background: #fff;
font-style: normal;
font-weight: 700;
line-height: 1.5;
}
.newsletter {
padding: 18px 20px;
border-radius: 22px;
background: var(--tinte);
color: #fff;
}
.newsletter__titel {
margin: 0 0 4px;
color: var(--sonne);
font: 800 1.2rem/1.2 var(--titel);
}
.newsletter p {
margin-bottom: 10px;
}
.newsletter__zeile {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.newsletter input {
flex: 1 1 220px;
min-height: 44px;
padding: 8px 16px;
border: 0;
border-radius: 999px;
font: 500 1rem var(--schrift);
}
.newsletter .spiel__meldung {
color: #ffe9a6;
font-size: .9rem;
}
@media (max-width: 860px) {
.werkstatt,
.postfach {
grid-template-columns: 1fr;
}
.werkstatt__karte {
max-width: 380px;
margin-inline: auto;
}
.umschlag__an {
font-size: 1.6rem;
}
.umschlag__stempel {
display: none;
}
}
@media (max-width: 900px) {
.zahlen {
grid-template-columns: repeat(2, 1fr);
}
.neuheit {
grid-template-columns: 1fr;
}
.neuheit__bild {
height: 190px;
}
.zitate {
grid-template-columns: 1fr;
gap: 34px;
}
.polaroids {
height: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.polaroid {
position: relative;
left: auto;
top: auto;
width: auto;
}
.polaroid figcaption {
font-size: 1.5rem;
}
}
@media (max-width: 560px) {
.polaroid:nth-child(n + 5) {
display: none;
}
.liederpfad__pfeil {
display: none;
}
}
.entwurf-hinweis {
padding: 10px 14px;
border-radius: 12px;
background: #fff3c4;
font-weight: 600;
}
.presse-kopf {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 360px);
align-items: end;
gap: clamp(20px, 4vw, 48px);
margin-bottom: 36px;
}
.presse-kopf__text {
max-width: 640px;
}
@media (max-width: 700px) {
.presse-kopf {
grid-template-columns: 1fr;
}
}
.presse-raster {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.presse-karte--bio {
grid-row: span 2;
}
.presse-bio p {
max-width: 62ch;
}
.presse-bio p:first-child {
font: 700 1.25rem/1.4 var(--titel);
}
.presse-karte {
padding: 22px 24px;
border-radius: 26px;
background: #fff;
box-shadow: var(--schatten-klein);
}
.presse-karte h2 {
font-size: 1.4rem;
font-weight: 900;
}
.presse-karte h3 {
margin: 1em 0 .2em;
color: var(--rot-dunkel);
font-size: 1rem;
font-weight: 800;
}
.presse-karte h3:first-of-type {
margin-top: 0;
}
.presse-fakten {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
margin: 0;
}
.presse-fakten dt {
color: var(--tinte-weich);
font-weight: 700;
}
.presse-fakten dd {
margin: 0;
}
.presse-kopiert {
margin-left: 10px;
color: var(--wiese-dunkel);
font-weight: 700;
}
.pressefotos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.pressefotos li {
overflow: hidden;
border-radius: 20px;
background: #fff;
box-shadow: var(--schatten-klein);
}
.pressefotos img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.pressefotos__logo img {
object-fit: contain;
padding: 20px;
background: #f7f2e8;
}
.pressefotos div {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 2px 10px;
padding: 10px 14px;
font-size: .92rem;
}
.pressefotos a {
font-weight: 700;
}
.pressefotos small {
grid-column: 1 / -1;
color: var(--tinte-weich);
font-size: .8rem;
}
.presse-paket {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin: -4px 0 22px;
color: var(--tinte-weich);
font-weight: 600;
}
@media (max-width: 900px) {
.presse-raster {
grid-template-columns: 1fr;
}
}
.mausi-video {
max-width: 560px;
margin: 0 auto clamp(24px, 4vw, 40px);
padding: 10px 10px 14px;
border-radius: 26px;
background: #fff;
box-shadow: var(--schatten);
transform: rotate(-1.5deg);
}
.mausi-video video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 18px;
background: #ffe9a8;
}
.mausi-video figcaption {
margin-top: 10px;
text-align: center;
font-weight: 800;
font-size: 1.05rem;
}
.bald {
min-height: max(640px, min(100svh, 900px));
}
.bald__szene {
position: absolute;
inset: 0;
pointer-events: none;
}
.bald .held__text {
padding-top: clamp(120px, 19vh, 190px);
}
.bald__kicker {
margin-bottom: 18px;
}
.bald__mausi {
position: absolute;
left: 53%;
bottom: 6%;
height: 30%;
transform-origin: 50% 100%;
animation: atmen 3.4s ease-in-out infinite;
}
.bald__mausi img {
display: block;
width: auto;
height: 100%;
filter: drop-shadow(0 10px 8px rgba(10, 30, 60, .2));
}
.bald__ruf {
position: absolute;
left: 59%;
bottom: 37%;
margin: 0;
}
.bald__ruf span {
display: inline-block;
padding: 8px 16px;
border-radius: 18px 18px 18px 4px;
background: #fff;
color: var(--tinte);
font: 800 1.05rem/1.1 var(--titel);
white-space: nowrap;
box-shadow: var(--schatten-klein);
animation: wippen 1.8s ease-in-out infinite;
}
.bald__eimer {
position: absolute;
left: 50%;
bottom: 5%;
width: clamp(52px, 5vw, 80px);
height: auto;
filter: drop-shadow(0 6px 5px rgba(10, 30, 60, .18));
}
.bald__schild {
position: absolute;
isolation: isolate;
left: 77%;
bottom: 7%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding-bottom: clamp(70px, 11vh, 120px);
font-size: clamp(1.05rem, 1.6vw, 1.5rem);
}
.bald__schild::before {
content: '';
position: absolute;
left: 50%;
top: 10px;
bottom: 0;
z-index: -1;
width: 14px;
margin-left: -7px;
border-radius: 4px 4px 2px 2px;
background: repeating-linear-gradient(90deg, #8a5a2b 0 3px, #a7672e 3px 7px, #7a4c22 7px 9px, #9a6130 9px 14px);
box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
}
.bald__brett {
font-size: 1em;
transform: rotate(-3deg);
}
.bald__brett--zwei {
transform: rotate(2.5deg);
background:
linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .14)),
repeating-linear-gradient(177deg, #f42a22 0 5px, #e2251d 5px 8px, #f53c33 8px 14px, #dc2219 14px 17px);
border-color: #8f1210;
box-shadow: 0 4px 0 #7a0f0d, 0 9px 14px rgba(0, 0, 0, .28);
}
.kopf.kopf--bald .holzschild {
display: block;
margin-left: auto;
}
.kopf.kopf--bald .kopf__nav--breit,
.kopf.kopf--bald .kopf__menue {
display: none;
}
.bald__bus--steht {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.bald__bus--faehrt {
display: none;
}
.bald__bus--steht {
display: inline;
}
.bald__mausi,
.bald__ruf span {
animation: none;
}
}
@media (max-width: 900px) {
.bald {
min-height: 0;
}
.bald__kicker {
order: 1;
align-self: center;
margin: 86px 16px 14px;
}
.bald__szene {
position: relative;
order: 2;
height: clamp(320px, 86vw, 480px);
margin-top: -6px;
}
.bald .held__knoepfe {
margin-bottom: 64px;
}
.bald__mausi {
left: 1%;
bottom: 4%;
height: 42%;
}
.bald__ruf {
left: 6%;
bottom: 49%;
}
.bald__ruf span {
font-size: .95rem;
}
.bald__eimer {
left: auto;
right: 3%;
bottom: 4%;
width: 48px;
}
.bald__schild {
left: auto;
right: 15%;
bottom: 6%;
gap: 9px;
padding-bottom: 64px;
font-size: .95rem;
}
}