/* Entwurf A · Editorial: ruhig, fotografisch, viel Luft (Hopaal, Fixa, Rich Roll) */

/* Kopf als schwebende Pille */
.kopf--a { position: fixed; top: 14px; left: 0; right: 0; }
.kopf__pille {
	width: min(100% - 2 * var(--rand), 1120px); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-radius: 999px; padding: 12px 14px 12px 26px; box-shadow: 0 10px 40px rgb(0 0 0 / .1);
}
.kopf--a .kopf__logo img { width: clamp(160px, 16vw, 210px); }
@media (max-width: 900px) { .kopf__pille { padding: 10px 18px 10px 20px; } .kopf--a .kopf__logo img { width: 150px; } }

/* Bühne: oben zwei Drittel, wechselt zwischen den neuesten Inhalten; darunter die Leiste mit allen vier */
.buehne { --buehne-h: clamp(460px, 64svh, 860px); position: relative; background: var(--creme); }
.buehne__folien { display: grid; touch-action: pan-y; }
.folie { grid-area: 1 / 1; position: relative; display: flex; align-items: flex-end; min-height: var(--buehne-h); overflow: hidden; background: var(--creme); opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.folie.aktiv { z-index: 1; opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.folie__text, .folie__rahmen { position: relative; z-index: 1; padding-block: 112px clamp(32px, 5.5vh, 60px); }
.folie__inhalt { max-width: 44%; }
.folie__titel { font-size: clamp(3.2rem, 7vw, 7.6rem); line-height: .84; margin: .16em 0 .1em -.04em; }
.folie__titel--gross { font-size: clamp(4.4rem, 11.5vw, 12rem); line-height: .78; }
.folie .unterzeile { font-size: clamp(1.2rem, 2.1vw, 1.85rem); max-width: 16em; margin-bottom: .75em; }
/* Zeile unter der Handschrift: gleiche Schrift, gleicher Schnitt, gleiche Laufweite wie das Etikett über der Headline */
.folie__meta, .folie .kanal__countdown { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; font: 700 .8rem/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.folie__knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.folie .hinweis-klick { margin: 14px 0 0; }

/* Foto-Folien: Bild rechts, läuft nach links weich in die Fläche aus */
.folie--foto .folie__bild { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); transform: scale(1.05); transform-origin: var(--fokus, 50% 50%); transition: transform 9s ease-out; }
.folie--foto.aktiv .folie__bild { transform: none; }
/* <picture> um ein Folienbild: der Rahmen selbst soll das Layout nicht beeinflussen */
.folie__bildrahmen { display: contents; }

/* Podcast- und Video-Folien: Cover bzw. Vorschaubild vollständig, ohne Beschnitt */
.folie__rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.folie__rahmen .folie__inhalt { max-width: none; }
.folie__medium { position: relative; display: block; margin: 0; align-self: center; }
.folie__medium img { width: 100%; border-radius: 6px; box-shadow: 0 30px 70px rgb(0 0 0 / .28); }
.folie__medium--quadrat { justify-self: center; width: min(100%, calc(var(--buehne-h) - 180px)); }
.folie__medium--video .karte__dauer { right: 14px; bottom: 14px; font-size: .85rem; padding: 7px 9px; }
.folie__medium--video:hover img { transform: translateY(-3px); }
.folie__medium--video img { transition: transform .3s ease; }
.folie--podcast { background: radial-gradient(55% 75% at 78% 45%, rgb(170 176 218 / .38) 0%, transparent 70%), radial-gradient(60% 70% at 100% 100%, rgb(69 87 149 / .65) 0%, transparent 70%), var(--violett); color: var(--creme); }
.folie--podcast .etikett, .folie--podcast .werbung { color: var(--lavendel); }
.folie--podcast .unterzeile, .podcast .unterzeile { color: var(--rosa); }
.folie--video { background: radial-gradient(60% 85% at 76% 50%, var(--lavendel) 0%, transparent 72%), var(--hellblau); }
.folie--video .etikett { color: var(--blau); }
.knopf--dunkel { background: transparent; color: var(--creme); border-color: var(--creme); }
.knopf--dunkel:hover { background: var(--creme); color: var(--violett); }
.hoeren--gross { gap: 14px; font-size: .95rem; letter-spacing: .12em; }
.hoeren--gross .hoeren__kreis { width: 64px; height: 64px; background: var(--rosa); border-color: var(--rosa); color: var(--schwarz); transition: transform .15s ease; }
.hoeren--gross:hover .hoeren__kreis { transform: scale(1.06); }
.hoeren--gross .hoeren__kreis::before { border-left-width: 17px; border-block-width: 11px; margin-left: 6px; }
.hoeren--gross[aria-pressed="true"] .hoeren__kreis::before { width: 16px; height: 19px; background: linear-gradient(90deg, currentColor 0 5px, transparent 5px 11px, currentColor 11px 16px); }

/* Leiste: alle vier auf einen Blick, der Balken zeigt, wann die nächste Folie kommt */
.leiste { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding-block: 22px 30px; }
.leiste__kopf { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding-top: 14px; }
.leiste__name { margin: 0; font: 400 clamp(3rem, 5vw, 4.4rem)/.85 var(--f-titel); }
.leiste__kopf .unterzeile { margin: .3em 0 0; font-size: 1.05rem; }
.buehne__schalter { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 700 .72rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.buehne__schalter-bild { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; }
.buehne__schalter-bild::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 3.5px, transparent 3.5px 6.5px, currentColor 6.5px 10px); }
.buehne:not(.buehne--laeuft) .buehne__schalter-bild::before { width: 0; height: 0; margin-left: 3px; background: none; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
/* Jede Karte belegt vier gemeinsame Zeilen (Bild, Etikett, Titel, Datum): so stehen die Texte nebeneinander auf einer Höhe,
   auch wenn ein Titel eine Zeile kürzer ist */
/* So viele Spalten wie Folien (Karten reihen sich nebeneinander) */
.leiste__karten { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 7px 20px; }
.leiste__karte { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: start; align-content: start; padding: 14px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.leiste__balken { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgb(0 0 0 / .14); }
.leiste__balken::after { content: ""; position: absolute; inset: 0; background: var(--schwarz); transform: scaleX(0); transform-origin: left; }
.leiste__karte[aria-current="true"] .leiste__balken::after { transform: scaleX(1); }
.buehne--laeuft .leiste__karte[aria-current="true"] .leiste__balken::after { animation: buehne-zeit 7s linear forwards; }
.buehne--wartet .leiste__karte[aria-current="true"] .leiste__balken::after { animation-play-state: paused; }
@keyframes buehne-zeit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.leiste__bild { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--sand); margin-bottom: 4px; align-self: start; }
.leiste__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.leiste__karte:hover .leiste__bild img { transform: scale(1.04); }
/* Quadratisches Cover mittig, links und rechts läuft sein Hintergrund weich weiter (unscharfe Kopie desselben Bildes) */
.leiste__bild--podcast { display: grid; place-items: center; background: var(--violett); }
/* Seiten: der äußerste Rand des Covers wird in die Breite gezogen und weichgezeichnet, so läuft sein Hintergrund nach außen weiter */
.leiste__rand { position: absolute; top: -12px; bottom: -12px; width: 51%; background-repeat: no-repeat; background-size: 4000% 100%; filter: blur(5px); }
.leiste__rand--links { left: -6px; background-position: 0 50%; }
.leiste__rand--rechts { right: -6px; background-position: 100% 50%; }
.leiste__bild.leiste__bild--podcast img { position: absolute; inset: 0; width: auto; height: 100%; aspect-ratio: 1; margin-inline: auto; object-fit: cover; }
.leiste__karte .etikett { font-size: .7rem; color: var(--blau); }
.leiste__titel { font: 700 1.02rem/1.25 var(--f-text); }
.leiste__karte:hover .leiste__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.leiste__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; }
.leiste__meta .werbung { font-size: .62rem; }

/* Die Schrift im Knopf sitzt mittig im 34-px-Kreis, die Datumszeile hat 1,55 Zeilenhöhe: 7 px tiefer, dann liegen beide auf einer Grundlinie */
@media (min-width: 1101px) { .buehne__schalter { margin-bottom: -7px; } }

@media (max-width: 1100px) {
	.folie__inhalt { max-width: 52%; }
	.folie--foto .folie__bild { width: 58%; }
	.leiste { grid-template-columns: 1fr; gap: 14px; }
	.leiste__kopf { flex-direction: row; align-items: center; padding-top: 0; }
	.buehne__schalter { align-self: center; }
	.leiste__karten { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 38%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); scrollbar-width: none; }
	.leiste__karten::-webkit-scrollbar { display: none; }
	.leiste__karte { scroll-snap-align: start; }
}
@media (max-width: 760px) {
	/* Auf dem Handy: feste Höhe, das Bild füllt den Platz über dem Text, Vorschaubilder und Cover bleiben vollständig */
	/* Das Foto beginnt unter der schwebenden Kopfzeile (kein Gesicht dahinter), die Bühne ist dafür 70 px höher */
	.buehne { --buehne-h: clamp(570px, calc(76svh + 70px), 730px); }
	.folie { flex-direction: column; align-items: stretch; height: auto; min-height: var(--buehne-h); }
	.folie--foto .folie__bild { position: relative; top: auto; right: auto; flex: 1 1 0; min-height: 0; width: 100%; height: auto; margin-top: 70px; -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 40px, #000 calc(24% + 40px)); mask-image: linear-gradient(to top, transparent 0, transparent 40px, #000 calc(24% + 40px)); }
	.folie__text { flex: none; margin-top: -36px; padding-block: 0 24px; }
	.folie__inhalt { max-width: none; }
	.folie__rahmen { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-block: 84px 24px; }
	.folie__rahmen .folie__inhalt { flex: none; }
	.folie__medium { order: -1; flex: 1 1 0; min-height: 0; width: 100%; }
	.folie__medium--quadrat { width: 100%; }
	.folie__medium img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; border-radius: 0; box-shadow: none; }
	.folie__medium--video .karte__dauer { display: none; }
	/* 12,5vw: „Hausbesuch in Girona“ passt auch auf 360 px breiten Handys in eine Zeile */
	.folie__titel { font-size: clamp(2.8rem, 12.5vw, 4.2rem); }
	.folie__titel--gross { font-size: clamp(3.8rem, 19vw, 6rem); }
	.folie .unterzeile { font-size: 1.3rem; }
	.folie .etikett, .folie__meta, .folie .kanal__countdown { font-size: .85rem; }
	.folie__meta, .folie .kanal__countdown { margin-bottom: 16px; }
	.hoeren--gross .hoeren__kreis { width: 54px; height: 54px; }
	.leiste__karten { grid-auto-columns: 72%; }
	.leiste__karte .etikett { font-size: .76rem; }
	.leiste__titel { font-size: 1.12rem; }
	.leiste__meta { font-size: .92rem; }
}

/* Blatt unter der Bühne */
.blatt { position: relative; z-index: 2; background: var(--creme); }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 110px); }
.intro__satz { font: 600 clamp(2.3rem, 9vw, 3.9rem)/1.06 var(--f-text); letter-spacing: -.01em; max-width: 21ch; margin: 0; }
.intro__notiz { display: flex; align-items: center; gap: 14px; font-size: 1.15rem; color: var(--violett); margin: 0 0 .6em; white-space: nowrap; }
.intro__notiz .el { width: 90px; transform: scaleX(-1) rotate(-8deg); }
@media (max-width: 800px) {
	.intro { grid-template-columns: 1fr; }
	.intro__notiz { white-space: normal; flex-wrap: wrap; font-size: 1rem; }
	.intro__notiz .el { width: 64px; }
}

.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.abschnitt-kopf h2 { font-size: clamp(3.2rem, 8vw, 7rem); margin-bottom: .08em; }
.abschnitt-kopf .unterzeile { margin-bottom: 0; }
.mehr { font: 700 .85rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; margin-bottom: 1em; display: inline-flex; gap: 10px; }

/* Videos nach Rubrik (Hopaal-Kacheln mit Zähler) */
.rubriken { padding-bottom: var(--abstand); }
.podcast + .rubriken { padding-top: var(--abstand); }
.rubriken__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.rubrik { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); color: var(--weiss); text-decoration: none; border-radius: 4px; }
.rubrik img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rubrik::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / 0) 45%); }
.rubrik:hover img { transform: scale(1.05); }
.rubrik__name { position: absolute; z-index: 1; left: 20px; right: 84px; bottom: 18px; font: 400 clamp(1.7rem, 2.8vw, 2.7rem)/.95 var(--f-titel); }
.rubrik__play { position: absolute; z-index: 1; right: 18px; bottom: 18px; width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; transition: background .15s ease, color .15s ease; }
.rubrik__play::before { content: ""; border-left: 14px solid currentColor; border-block: 9px solid transparent; margin-left: 5px; }
.rubrik:hover .rubrik__play { background: var(--weiss); color: var(--schwarz); }
@media (max-width: 900px) { .rubriken__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rubrik { aspect-ratio: 3 / 4; } .rubrik__name { left: 14px; right: 54px; bottom: 14px; font-size: 1.5rem; } .rubrik::after { background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .4) 40%, rgb(0 0 0 / 0) 72%); } .rubrik__play { right: 12px; bottom: 12px; width: 34px; height: 34px; } .rubrik__play::before { border-left-width: 10px; border-block-width: 6.5px; margin-left: 4px; } }

/* Podcast (Rich Roll) */
.podcast { background: var(--violett); color: var(--creme); padding-block: var(--abstand); }
.podcast .etikett { color: var(--lavendel); }
.podcast__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; margin-bottom: 48px; }
.podcast__etikett { grid-column: 1 / -1; margin: 0 0 10px; }
.podcast__kopf h2 { font-size: clamp(3.2rem, 8vw, 7rem); margin: 0 0 .08em; }
.podcast__kopf .unterzeile { margin-bottom: 0; }
/* Rechte Spalte genau so breit wie die drei Knöpfe; der Text bricht auf diese Breite um und beginnt auf Höhe der Headline */
.podcast__rechts { grid-column: 2; grid-row: 2; width: min-content; padding-top: 1px; }
.podcast__text { font-size: 1.25rem; margin: 0 0 24px; }
.podcast__plattformen { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0; }
.podcast__plattformen .knopf { white-space: nowrap; }
.shows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin-bottom: 64px; }
.show img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.show h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-top: 16px; }
.show .unterzeile { margin: .2em 0 .3em; font-size: 1.05rem; }
.show p { margin: 6px 0 0; }
.podcast__liste-titel { font-size: clamp(2.5rem, 4vw, 3.4rem); }
.podcast__liste-titel + .unterzeile { margin-bottom: 18px; }
.folgen { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.folge { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid rgb(244 246 233 / .22); }
.folge img { width: 76px; height: 76px; object-fit: cover; border-radius: 4px; }
.folge h4 { font: 700 1.15rem/1.25 var(--f-text); margin: 8px 0; }
.folge .etikett { font-size: .72rem; }
.folge .werbung { color: var(--lavendel); }
.podcast .hinweis-klick { margin: 0; }
@media (max-width: 900px) {
	.podcast__kopf { grid-template-columns: 1fr; }
	.podcast__titel, .podcast__rechts { grid-column: 1; grid-row: auto; }
	.podcast__rechts { width: auto; padding-top: 22px; }
	.podcast__plattformen { flex-wrap: wrap; }
	.folgen { grid-template-columns: 1fr; }
}
/* Handy: zwei Shows nebeneinander, die dritte mittig darunter */
@media (max-width: 560px) { .shows { grid-template-columns: 1fr 1fr; } .shows li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); } }

/* Laufband im Verlauf */
.laufband--verlauf { background: var(--verlauf); color: var(--schwarz); }

/* Projekt */
.projekt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: var(--abstand); }
.projekt__bild { margin: 0; position: sticky; top: 100px; }
.projekt__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.projekt__bild figcaption { margin-top: 12px; color: var(--violett); }
.projekt__text h2 { font-size: clamp(3.4rem, 8vw, 7.4rem); margin: 10px 0 .08em; }
.projekt__text .unterzeile { margin-bottom: 20px; }
.projekt__text > p:not(.etikett):not(.unterzeile) { font-size: 1.25rem; max-width: 40ch; }
.projekt__folgen { list-style: none; padding: 0; margin: 32px 0; }
.projekt__folge { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid rgb(0 0 0 / .15); }
.projekt__folge .karte__bild { aspect-ratio: 16 / 9; border-radius: 3px; }
.projekt__folge .etikett { display: block; margin-bottom: 8px; color: var(--blau); }
.projekt__frueher { margin-top: 8px; }
.projekt__frueher .etikett { display: block; margin-bottom: 10px; }
.projekt__frueher ul { margin: 0 0 22px; }
.projekt__frueher li { border-top: 1px solid rgb(0 0 0 / .15); }
.projekt__frueher li a { display: block; padding: 14px 0; font: 700 1.25rem/1.2 var(--f-text); text-decoration: none; transition: color .15s ease; }
.projekt__frueher li a:hover { color: var(--blau); }
@media (max-width: 900px) {
	.projekt { grid-template-columns: 1fr; }
	.projekt__bild { position: static; }
	.projekt__bild img { aspect-ratio: 4 / 3; }
	.projekt__folge { grid-template-columns: 130px minmax(0, 1fr); }
}

/* Club in Markengelb */
.club { background: var(--gelb); padding-block: var(--abstand); }
.club__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.club__text h2 { font-size: clamp(3.2rem, 7.5vw, 6.6rem); margin: 10px 0 .08em; }
.club__text .unterzeile { margin-bottom: 20px; }
.club__liste { margin: 0 0 32px; }
.club__liste li { position: relative; padding: 12px 0 12px 44px; border-top: 1.5px solid var(--schwarz); font-size: 1.15rem; }
.club__liste li::before { content: ""; position: absolute; left: 0; top: 17px; width: 30px; height: 14px; background: currentColor; -webkit-mask: url(../svg/el-fast.svg) center / contain no-repeat; mask: url(../svg/el-fast.svg) center / contain no-repeat; }
.club__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.club__bild { position: relative; margin: 0; }
.club__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.club__smiley { position: absolute; right: 28px; top: 28px; width: 120px; transform: rotate(-12deg); }
@media (max-width: 900px) { .club__raster { grid-template-columns: 1fr; } .club__smiley { right: 18px; top: 18px; width: 96px; } }

/* Über uns */
.ueber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-block: var(--abstand); }
.ueber__karte { position: relative; z-index: 1; background: var(--weiss); padding: clamp(28px, 4.5vw, 64px); margin-right: -96px; border-radius: 6px; box-shadow: 0 20px 60px rgb(0 0 0 / .08); }
.ueber__etikett { background: var(--lavendel); padding: 7px 10px; }
.ueber__karte h2 { font-size: clamp(3rem, 6.6vw, 6.4rem); margin: 18px 0 .08em; }
.ueber__karte .unterzeile { margin-bottom: 18px; }
.ueber__karte p:not(.etikett):not(.unterzeile) { font-size: 1.25rem; max-width: 60ch; }
.ueber__bild { margin: 0; }
.ueber__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
@media (max-width: 900px) { .ueber { grid-template-columns: 1fr; } .ueber__karte { order: 1; margin: -64px 14px 0; } .ueber__karte h2 { font-size: clamp(2.6rem, 12vw, 3.4rem); } .ueber__bild { order: 0; } }

/* Neuer YouTube-Kanal von Nick: Hinweis mit Aufruf zum Abonnieren */
.kanal { padding-bottom: var(--abstand); }
.kanal__karte { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3.5vw, 48px); background: linear-gradient(115deg, var(--gelb) 0%, var(--lavendel) 58%, var(--hellblau) 100%); border-radius: 26px; }
.kanal__bild { position: relative; margin: 0; }
.kanal__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.kanal__stempel { position: absolute; top: -20px; right: -20px; width: 104px; height: 104px; border-radius: 50%; background: var(--rosa); display: grid; place-items: center; box-shadow: 0 10px 24px rgb(0 0 0 / .18); transform: rotate(-12deg); }
.kanal__stempel .hand { font-size: 1.45rem; }
.kanal__text h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); margin: 10px 0 .08em; }
.kanal__text .unterzeile { margin-bottom: 16px; }
.kanal__text > p:not(.etikett):not(.unterzeile):not(.kanal__countdown) { font-size: 1.2rem; max-width: 46ch; }
.kanal__text .kanal__countdown { margin: 0 0 16px; font: 700 .85rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--violett); }
.kanal__countdown a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.kanal__text .kanal__countdown a:hover { color: var(--schwarz); }
.folie .kanal__countdown a:hover { color: var(--gelb); }
.kanal__abo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.kanal__notiz { display: inline-flex; align-items: center; gap: 2px; color: var(--violett); }
.kanal__notiz .el--pfeil-bogen { width: 62px; aspect-ratio: 98 / 56; margin-right: -4px; transform: translateY(-10px); }
.kanal__oval { position: relative; display: inline-block; padding: .62em .95em .55em; font-size: 1.05rem; white-space: nowrap; }
.kanal__oval::after { content: ""; position: absolute; inset: -.1em -.3em; background: currentColor; -webkit-mask: url(../svg/el-oval.svg) center / 100% 100% no-repeat; mask: url(../svg/el-oval.svg) center / 100% 100% no-repeat; }
@media (max-width: 900px) {
	.kanal__karte { grid-template-columns: 1fr; }
	.kanal__stempel { right: 10px; top: -16px; width: 84px; height: 84px; }
	.kanal__text h2 { font-size: clamp(3rem, 13vw, 3.6rem); }
	.kanal__abo { flex-direction: column; align-items: flex-start; }
	.kanal__notiz { align-self: flex-end; margin-top: 4px; }
}

/* Verlinkte Podcast-Shows und „Alle …“-Links */
.show__link { display: block; text-decoration: none; }
.show__link img { transition: transform .3s ease; }
.show__link:hover img { transform: translateY(-4px); }
.show__mehr { display: inline-flex; gap: 8px; margin-top: 12px; color: var(--lavendel); font: 700 .8rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.podcast__alle { margin-top: 28px; }
.abschnitt-kopf__text .mehr { margin: 0 0 0 12px; }

/* Shop: Produkt der Woche oder, wenn es etwas Neues gibt, „Neu im Shop“ */
.shop { background: var(--rosa); padding-block: var(--abstand); }
.shop__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.shop__bild { position: relative; margin: 0; }
.shop__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 6px; background: var(--weiss); }
.shop__stempel { position: absolute; top: -18px; right: -18px; width: 100px; height: 100px; border-radius: 50%; background: var(--gelb); display: grid; place-items: center; box-shadow: 0 10px 24px rgb(0 0 0 / .15); transform: rotate(-10deg); }
.shop__stempel .hand { font-size: 1.35rem; text-align: center; }
.shop__text h2 { font-size: clamp(3.2rem, 6.5vw, 6rem); margin: 10px 0 .08em; }
.shop__text .unterzeile { margin-bottom: 18px; }
.shop__preis { font: 700 1.6rem/1.2 var(--f-text); margin-bottom: 22px; }
.shop__preis span { display: block; font: 400 .9rem/1.4 var(--f-text); }
.shop__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.shop__mehr-titel { font-size: clamp(2.5rem, 4vw, 3.4rem); margin: clamp(40px, 5vw, 72px) 0 18px; }
.shop__mehr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.shopkarte { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.shopkarte img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 4px; background: var(--weiss); margin-bottom: 6px; transition: transform .3s ease; }
.shopkarte:hover img { transform: translateY(-4px); }
.shopkarte__name { font: 700 1.05rem/1.25 var(--f-text); }
.shopkarte__preis { font-size: .95rem; }
@media (max-width: 900px) { .shop__raster { grid-template-columns: 1fr; } .shop__stempel { right: 10px; top: -14px; width: 84px; height: 84px; } }
@media (max-width: 760px) { .shop__mehr { grid-template-columns: 1fr 1fr; } }

/* Blog-Teaser auf der Startseite */
.blogteaser { padding-bottom: var(--abstand); }
/* Eine volle Reihe: 5 Karten auf großen Bildschirmen, 3 auf mittleren, auf dem Handy zum Wischen */
.blogteaser .vraster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .blogteaser .vraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blogteaser .vraster > li:nth-child(n+4) { display: none; } }
@media (max-width: 760px) {
	.blogteaser .vraster { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); scrollbar-width: none; }
	.blogteaser .vraster > li:nth-child(n+4) { display: flex; }
	.blogteaser .vraster > li { scroll-snap-align: start; }
}
.shop__mehr-titel + .unterzeile { margin-bottom: 18px; }
.shop__mehr-titel { margin-bottom: .08em; }

/* Club: gekennzeichnet als Werbung (Kooperation mit der Pushing Ideas GmbH) */
.club__text .etikett .werbung, .camp__text .etikett .werbung, .folie .etikett .werbung, .leiste__karte .etikett .werbung { margin-right: 8px; font-size: .62rem; vertical-align: 1px; }
.folie .etikett .werbung, .leiste__karte .etikett .werbung { padding: 0 4px; border-width: 1px; }
.club__anbieter { margin: 16px 0 0; font-size: .9rem; }

/* Bikefit-Check als erste Karte im Blog-Teaser */
.akarte--tool .akarte__etikett { width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--gelb); color: var(--schwarz); }

/* PLC Camp: Teaser zur Landingpage /trainingslager/ (gebucht wird beim Reiseveranstalter, deshalb zur Sicherheit als Werbung gekennzeichnet) */
.camp { background: var(--hellblau); padding-block: var(--abstand); }
.camp__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.camp__bild { position: relative; margin: 0; }
.camp__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.camp__stempel { position: absolute; top: -18px; right: -18px; width: 108px; height: 108px; border-radius: 50%; background: var(--gelb); display: grid; place-items: center; box-shadow: 0 10px 24px rgb(0 0 0 / .15); transform: rotate(-10deg); }
.camp__stempel .hand { font-size: 1.3rem; text-align: center; }
.camp__text h2 { font-size: clamp(3.2rem, 7.5vw, 6.6rem); margin: 10px 0 .08em; }
.camp__text .unterzeile { margin-bottom: 20px; }
.camp__text > p:not(.etikett):not(.unterzeile) { font-size: 1.2rem; max-width: 46ch; }
.camp__fakten { margin: 0 0 28px; }
.camp__fakten li { padding: 12px 0; border-top: 1.5px solid var(--schwarz); font-size: 1.15rem; }
.camp__fakten li:last-child { border-bottom: 1.5px solid var(--schwarz); }
@media (max-width: 900px) { .camp__raster { grid-template-columns: 1fr; } .camp__stempel { right: 10px; top: -14px; width: 88px; height: 88px; } }

/* Kontraste auf dem Handy: dort liegt der blaue Verlauf hinter den kleinen Zeilen (WCAG 1.4.3) */
@media (max-width: 760px) {
	.folie--podcast { background: radial-gradient(60% 32% at 80% 12%, rgb(170 176 218 / .3) 0%, transparent 70%), radial-gradient(60% 70% at 100% 100%, rgb(69 87 149 / .4) 0%, transparent 70%), var(--violett); }
	.folie--video .etikett { color: var(--violett); }
}

/* Schalter für den automatischen Wechsel als erstes Bedienelement der Bühne: nur sichtbar, wenn er den Fokus hat */
.buehne__schalter--vorne { position: absolute; z-index: 6; top: 96px; right: var(--rand); padding: 10px 16px; border-radius: 999px; background: var(--schwarz); color: var(--weiss); }
.buehne__schalter--vorne:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .buehne__schalter { display: none; } }
@media (max-width: 360px) { .rubrik__name { font-size: 1.45rem; } }
@media (max-width: 760px) { .blogteaser .vraster { padding-block: 6px; margin-block: -6px; } }