/* ==========================================================================
   /comedy-slam/ im Stil von Comedy Slam Deluxe (seit 0.186.0)
   ==========================================================================
   Nur auf dieser Seite geladen (karli_enqueue_assets() in functions.php),
   Markup in page-comedy-slam.php und template-parts/comedy-slam/, Texte,
   Farben und Bilder in karli_comedy_slam_config().

   FARBEN: kommen als --csd-* vom style-Attribut von .csd-page (Werte nur in
   der Konfiguration). Gold gefuellt NUR fuer den Ticketweg
   (.csd-knopf--gold), sonst Gold-Umriss. Keine Animationen, nur
   Farbuebergaenge mit 180ms.

   Kontrast (WCAG): Text #ECEEE9 auf Petrol 8,3 / auf Karte 9,0 / auf
   Karte-Hover 7,3; gedaempft #CED5D2 auf Petrol 6,5 / Karte 7,1; Gold
   #DCB861 auf Petrol 5,1 / Karte 5,6 / Dunkel 7,4; Ticketknopf #462623
   auf Gold 5,3 (Hover 6,1, gedrueckt 4,8); helles Band #152F34 auf
   #ECEEE9 12,1, Dachzeile #094B59 8,3; Weiss auf dem Instagram-Verlauf
   5,3-6,5.

   SCHRIFTEN: selbst gehostet (assets/fonts/csd/, OFL-Lizenzdateien
   daneben), Playfair Display 700 fuer Ueberschriften, Source Sans 3 fuer
   Text und Knoepfe. Vorgeladen in karli_comedy_slam_font_preload().

   UMBRUCHGRENZE UND SCHRAEGE KANTEN wie die Formatbloecke der Startseite
   (.front-blocks in style.css): unter 1140px gestapelt und mittig, ab
   1140px Bild und Text nebeneinander; --slant = min( 4.4vw, 80px ), die
   hellen Baender schneiden Ober- und Unterkante per clip-path schraeg ab
   und schieben sich um --slant unter bzw. ueber die Nachbarn. Media
   Queries koennen keine Variablen lesen - beim Aendern alle 1139px/1140px
   in dieser Datei mitziehen.

   SPEZIFITAET: Zwei-Klassen-Selektoren (.csd-page .csd-...) fuer h1-h3, p
   und a, damit sie gegen "body.wp-theme-karli-comedy h1/h2", die globalen
   p-/h3-Regeln und die mobile nowrap-Regel fuer Ueberschriften (siehe
   heading-autofit.js) gewinnen. Die Terminkarten tragen fuer main.js
   (mobiler Karten-Tipp) die Klasse .ticket-card - deren ungescopte
   Basisregeln in style.css werden unten unter .csd-page zurueckgesetzt.
   ========================================================================== */

@font-face {
	font-family: 'CSD Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/csd/neu-playfair.woff2') format('woff2-variations'),
		url('../fonts/csd/neu-playfair.woff2') format('woff2');
}

@font-face {
	font-family: 'CSD Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('../fonts/csd/neu-sourcesans3.woff2') format('woff2-variations'),
		url('../fonts/csd/neu-sourcesans3.woff2') format('woff2');
}

/* --- Grundlagen --------------------------------------------------------- */

.csd-page {
	--csd-titel-schrift: 'CSD Playfair Display', Georgia, 'Times New Roman', serif;
	--csd-text-schrift: 'CSD Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--csd-linie: color-mix( in srgb, var(--csd-text) 18%, transparent );
	--csd-linie-stark: color-mix( in srgb, var(--csd-text) 38%, transparent );
	--csd-kontur: color-mix( in srgb, var(--csd-text) 55%, transparent );
	--csd-goldverlauf: linear-gradient( 135deg, var(--csd-gold-linie) 0%, var(--csd-gold-hell) 50%, var(--csd-gold-linie) 100% );
	--csd-dachfarbe: var(--csd-gold-text);
	--csd-fokus: var(--csd-text);
	--csd-rand: 20px;
	--slant: min( 4.4vw, 80px );
	/* Kein seitliches Scrollen durch Fotos und schraege Kanten; clip statt
	   hidden, damit kein Scroll-Container entsteht. */
	overflow-x: clip;
	background: var(--csd-grund);
	color: var(--csd-text);
	font-family: var(--csd-text-schrift);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
}

.csd-page a:focus-visible {
	outline: 3px solid var(--csd-fokus);
	outline-offset: 3px;
}

.csd-abschnitt {
	padding: 36px 0 40px;
}

.csd-inner {
	max-width: calc( 1080px + 2 * var(--csd-rand) );
	margin: 0 auto;
	padding: 0 var(--csd-rand);
}

/* Lesespalte, unter 1140px mittig. */
.csd-spalte {
	max-width: 760px;
	margin: 0 auto;
}

.csd-page .csd-dachzeile {
	margin: 0 0 10px;
	color: var(--csd-dachfarbe);
	font-family: var(--csd-text-schrift);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.csd-page .csd-titel {
	margin: 0 0 18px;
	color: inherit;
	font-family: var(--csd-titel-schrift);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

.csd-page .csd-text {
	margin: 0 0 0.8em;
	color: inherit;
	font: inherit;
}

.csd-page .csd-text:last-child {
	margin-bottom: 0;
}

.csd-aktionen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
	margin-top: 24px;
}

/* --- Knoepfe und Textlinks ---------------------------------------------- */

.csd-page .csd-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 6px;
	font-family: var(--csd-text-schrift);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* Ticketweg: Gold gefuellt. */
.csd-page .csd-knopf--gold {
	background: var(--csd-knopf);
	color: var(--csd-knopf-text);
}

.csd-page .csd-knopf--gold:hover {
	background: var(--csd-knopf-hover);
}

.csd-page .csd-knopf--gold:active {
	background: var(--csd-knopf-aktiv);
}

/* Alles andere: Gold-Umriss. */
.csd-page .csd-knopf--umriss {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--csd-gold-text);
	color: var(--csd-gold-text);
}

.csd-page .csd-knopf--umriss:hover {
	background: color-mix( in srgb, var(--csd-text) 8%, transparent );
}

.csd-page .csd-knopf--klein {
	min-height: 44px;
	padding: 0 16px;
	font-size: 16px;
}

/* Instagram-Verlauf, weisse Schrift; Handy volle Breite. */
.csd-page .csd-knopf--instagram {
	width: 100%;
	min-height: 56px;
	background: linear-gradient( 45deg, var(--csd-instagram-1) 0%, var(--csd-instagram-2) 50%, var(--csd-instagram-3) 100% );
	color: #FFFFFF;
	font-size: 19px;
}

.csd-page .csd-knopf--instagram:hover {
	filter: brightness( 1.08 );
}

.csd-page .csd-knopf--instagram svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.csd-page .csd-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: color-mix( in srgb, currentColor 38%, transparent );
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: text-decoration-color 180ms ease;
}

.csd-page .csd-textlink:hover {
	text-decoration-color: currentColor;
}

@media ( prefers-reduced-motion: reduce ) {
	.csd-page .csd-knopf,
	.csd-page .csd-textlink {
		transition: none;
	}
}

/* --- Kopf ----------------------------------------------------------------- */

/* Zieht sich wie .page-hero unter den halbtransparenten Karli-Kopf
   (--header-overlap aus style.css); der Inhalt beginnt unterhalb davon. */
.csd-kopf {
	position: relative;
	margin-top: var(--header-overlap);
	text-align: center;
}

.csd-kopf__foto {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: calc( -1 * var(--header-overlap) + 250px );
	overflow: hidden;
}

.csd-kopf__foto::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Verlauf ins Petrol wie bei CSD (--kopf-verlauf). */
	background: linear-gradient( to bottom, transparent 34%, color-mix( in srgb, var(--csd-grund) 62%, transparent ) 64%, var(--csd-grund) 98% );
}

.csd-page .csd-kopf__bild {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos);
}

.csd-kopf__inhalt {
	position: relative;
	padding: calc( -1 * var(--header-overlap) + 170px ) var(--csd-rand) 8px;
}

.csd-kopf__logo {
	display: block;
}

.csd-kopf__logo img {
	width: 150px;
	height: auto;
	margin: 0 auto;
}

.csd-page .csd-kopf__h1 {
	margin: 16px 0 8px;
	color: var(--csd-gold-text);
	font-family: var(--csd-text-schrift);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: normal;
}

.csd-page .csd-kopf__unterzeile {
	margin: 0 auto 14px;
	max-width: 22em;
	font-family: var(--csd-titel-schrift);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

/* Faktenzeile als Text, Rauten als Trenner nur per CSS. */
.csd-page .csd-fakten {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.csd-fakten li + li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 12px;
	background: var(--csd-gold-linie);
	transform: rotate( 45deg ) translateY( -2px );
}

.csd-fakten__zahl {
	color: var(--csd-gold-text);
}

.csd-page .csd-kopf__info {
	margin: 10px 0 0;
	color: var(--csd-gedaempft);
	font-size: 15px;
}

/* --- Einleitung: ein Satz unter dem Kopf (seit 0.187.0) -------------------- */

/* Immer mittig, auch ab 1140px. */
.csd-einleitung {
	padding: 24px var(--csd-rand) 0;
	text-align: center;
}

.csd-page .csd-einleitung__text {
	max-width: 30em;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.45;
}

/* --- Termine & Tickets ----------------------------------------------------- */

/* Sprungziel #termine: nicht unter dem klebenden Karli-Kopf landen. */
.csd-termine {
	scroll-margin-top: calc( var(--nav-height) + 8px );
}

.csd-termine__kopf {
	text-align: center;
}

.csd-termine__liste {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.csd-termine__karten {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
	text-align: left;
}

/* Basisregeln von .ticket-card (style.css) zuruecksetzen. Rahmen ueber
   zwei Hintergrundebenen, damit das Finale einen Goldverlauf als Rahmen
   bekommen kann (border-image geht nicht mit runden Ecken). */
.csd-page .ticket-card.csd-termin {
	--karte-bg: var(--csd-karte);
	--karte-rand: linear-gradient( var(--karte-bg), var(--karte-bg) );
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	height: auto;
	min-height: 76px;
	padding: 10px 12px 10px 0;
	overflow: hidden;
	border: 1.5px solid transparent;
	border-radius: 16px;
	background: linear-gradient( var(--karte-bg), var(--karte-bg) ) padding-box, var(--karte-rand) border-box;
	color: var(--csd-text);
	transition: background 180ms ease;
}

.csd-page .ticket-card.csd-termin.is-finale {
	--karte-rand: var(--csd-goldverlauf);
}

.csd-page .csd-termin__datum {
	display: flex;
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	margin: 0;
	padding: 2px 0;
	border-right: 1px solid var(--csd-linie);
	line-height: 1.1;
	text-align: center;
}

.csd-termin__wochentag,
.csd-termin__monat {
	color: var(--csd-gold-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csd-termin__tag {
	margin: 1px 0;
	font-family: var(--csd-titel-schrift);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.csd-termin.is-finale .csd-termin__tag {
	color: var(--csd-gold-text);
}

.csd-termin__text {
	flex: 1 1 auto;
	min-width: 0;
}

.csd-page .csd-termin__runde {
	margin: 0;
	color: inherit;
	font-family: var(--csd-titel-schrift);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	white-space: normal;
}

.csd-page .csd-termin__meta {
	margin: 2px 0 0;
	color: var(--csd-gedaempft);
	font-size: 15px;
	line-height: 1.35;
}

.csd-page .csd-termin__status {
	display: inline-block;
	margin: 6px 0 0;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--csd-text);
	color: var(--csd-dunkel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.csd-termin__knopf {
	flex: 0 0 auto;
}

/* Bis 767px ist die ganze Karte klickbar (main.js) - nur dann Hover. */
@media ( max-width: 767px ) {
	.csd-page .ticket-card.csd-termin:hover {
		--karte-bg: var(--csd-karte-hover);
	}
}

.csd-page .csd-termine__leer {
	margin: 0 0 20px;
}

.csd-page .csd-termine__hinweis {
	margin: 0 0 4px;
	color: var(--csd-gedaempft);
	font-size: 15px;
}

/* --- Helle Baender mit schraegen Kanten ---------------------------------- */

.csd-band {
	--cut-tl: var(--slant);
	--cut-tr: 0px;
	--cut-br: var(--slant);
	--cut-bl: 0px;
	--csd-dachfarbe: var(--csd-band-dachzeile);
	--csd-fokus: var(--csd-band-text);
	position: relative;
	z-index: 1;
	margin: calc( -1 * var(--slant) ) 0;
	padding: calc( var(--slant) + 40px ) 0;
	clip-path: polygon( 0 var(--cut-tl), 100% var(--cut-tr), 100% calc( 100% - var(--cut-br) ), 0 calc( 100% - var(--cut-bl) ) );
	background: var(--csd-band);
	color: var(--csd-band-text);
}

.csd-band--gespiegelt {
	--cut-tl: 0px;
	--cut-tr: var(--slant);
	--cut-br: 0px;
	--cut-bl: var(--slant);
}

/* Nachbarn der Baender: Platz fuer die Ueberlappung. */
.csd-abschnitt:has( + .csd-band ) {
	padding-bottom: calc( var(--slant) + 40px );
}

.csd-band + .csd-abschnitt {
	padding-top: calc( var(--slant) + 36px );
}

.csd-band__inner {
	max-width: calc( 1080px + 2 * var(--csd-rand) );
	margin: 0 auto;
	padding: 0 var(--csd-rand);
	text-align: center;
}

.csd-band__body {
	max-width: 760px;
	margin: 0 auto;
}

/* Bild oben ueber die volle Breite, die schraege Kante laeuft darueber. */
.csd-band:not( .is-text-only ) {
	padding-top: 0;
}

.csd-band:not( .is-text-only ) .csd-band__inner {
	max-width: none;
	padding: 0;
}

.csd-band:not( .is-text-only ) .csd-band__body {
	padding: 28px var(--csd-rand) 0;
}

.csd-band__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--csd-dunkel);
}

.csd-page .csd-band__bild {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos);
}

.csd-page .csd-wo__adresse {
	margin: 0 0 12px;
	font-family: var(--csd-titel-schrift);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Dunkle Flaechen (mit Punktraster wie bei CSD) ----------------------- */

.csd-dunkel {
	background-color: var(--csd-dunkel);
	background-image: radial-gradient( color-mix( in srgb, var(--csd-text) 7%, transparent ) 1px, transparent 1.6px );
	background-size: 18px 18px;
}

/* --- So laeuft der Abend --------------------------------------------------- */

.csd-ablauf {
	text-align: center;
}

.csd-page .csd-schritte {
	max-width: 760px;
	margin: 8px auto 0;
	padding: 0;
	list-style: none;
}

.csd-schritt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 22px 0;
	border-top: 1px solid var(--csd-linie);
}

.csd-schritt:last-child {
	padding-bottom: 0;
}

.csd-schritt__ziffer {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--csd-gold-text);
	border-radius: 50%;
	color: var(--csd-gold-text);
	font-family: var(--csd-titel-schrift);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.csd-page .csd-schritt__titel {
	margin: 0 0 6px;
	color: inherit;
	font-family: var(--csd-titel-schrift);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	white-space: normal;
}

/* Absatz unter den Schritten ('text_unten'), mit derselben Trennlinie. */
.csd-ablauf__unten {
	max-width: 760px;
	margin: 22px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--csd-linie);
}

/* --- Vorrunden & Finale: Grafik -------------------------------------------- */

.csd-wettbewerb {
	text-align: center;
}

.csd-page .csd-runden {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.csd-runden__runde {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Verbindungslinie vor jedem Kreis ausser dem ersten. */
.csd-runden__runde + .csd-runden__runde::before {
	content: '';
	display: block;
	width: 2px;
	height: 10px;
	background: var(--csd-linie-stark);
}

.csd-runden__runde span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--csd-kontur);
	border-radius: 50%;
	font-family: var(--csd-titel-schrift);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.csd-runden__finale::before {
	background: var(--csd-gold-linie);
}

/* Groesserer Goldkreis - als Gold-Umriss, gefuellt ist nur der Ticketweg. */
.csd-runden__finale span {
	width: 88px;
	height: 88px;
	border: 2px solid var(--csd-gold-linie);
	color: var(--csd-gold-text);
	font-size: 20px;
}

/* --- Instagram ------------------------------------------------------------- */

.csd-instagram__karte {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 20px;
	overflow: hidden;
	border: 1px solid var(--csd-kontur);
	border-radius: 16px;
	background: var(--csd-karte);
	text-align: center;
}

.csd-page .csd-instagram__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos);
}

/* Foto stark abgedunkelt, damit der Text lesbar bleibt. */
.csd-instagram__karte.has-foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--csd-karte) 84%, transparent );
}

.csd-instagram__inhalt {
	position: relative;
	z-index: 1;
}

/* --- Logo-Block (seit 0.188.0) --------------------------------------------- */

/* Folgt auf den Karli-Seitenkopf (.page-hero mit rotem Balken). Oben genug
   Abstand, weil am Handy der transparente Karli-Kopf noch ca. 40px in den
   Block ragt. */
.csd-logo-block {
	padding: 64px 0 8px;
	text-align: center;
}

.csd-page .csd-logo-block__logo {
	margin: 0 0 24px;
	font-size: inherit;
	line-height: 0;
	white-space: normal;
}

.csd-logo-block__logo img {
	width: 170px;
	height: auto;
	margin: 0 auto;
}

.csd-logo-block__text {
	max-width: 760px;
	margin: 0 auto;
}

/* Ticketknopf zur naechsten Show und "Alle Termine" (seit 0.189.0): Handy
   volle Breite und mittig, ab 1140px linksbuendig unter dem Text. */
.csd-logo-block__aktionen {
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.csd-page .csd-logo-block__aktionen .csd-knopf {
	width: 100%;
}

.csd-page .csd-logo-block__termine {
	font-size: 15px;
}

/* --- Naechste Show: schlichtes Band am Ende (seit 0.189.0) ----------------- */

/* Petrol nach dem hellen Band "Hinkommen" (dessen schraege Unterkante
   ragt hinein), gerade Kante zum Karli-Footer. Immer mittig. */
.csd-naechste-show {
	text-align: center;
}

.csd-page .csd-naechste-show__zeile {
	margin: 0;
	font-family: var(--csd-titel-schrift);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.csd-page .csd-naechste-show .csd-knopf {
	width: 100%;
}

/* Auch ab 1140px mittig (dort sind .csd-aktionen sonst linksbuendig). */
.csd-naechste-show .csd-aktionen {
	justify-content: center;
}

/* --- Links: Instagram und comedyslamdeluxe.de (seit 0.188.0) -------------- */

.csd-links__karte {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 20px;
	border: 1px solid var(--csd-kontur);
	border-radius: 16px;
	background: var(--csd-karte);
	text-align: center;
}

/* Handy: Knoepfe untereinander in voller Breite. */
.csd-links__knoepfe {
	flex-direction: column;
	align-items: stretch;
}

.csd-page .csd-links__knoepfe .csd-knopf {
	width: 100%;
}

/* --- Letztes Band vor dem Karli-Footer: gerade Unterkante ------------------ */

.csd-band:last-child {
	--cut-br: 0px;
	--cut-bl: 0px;
	margin-bottom: 0;
	padding-bottom: 40px;
}

/* --- Mehr Infos ------------------------------------------------------------ */

.csd-mehr {
	text-align: center;
}

.csd-page .csd-mehr__nachweis {
	margin: 28px 0 0;
	color: var(--csd-gedaempft);
	font-size: 13px;
}

/* --- Ab 768px: groessere Schrift (Aufbau weiter gestapelt bis 1139px) ---- */

@media ( min-width: 768px ) {
	.csd-page {
		--csd-rand: 40px;
		font-size: 18px;
	}

	.csd-abschnitt {
		padding: 64px 0 72px;
	}

	.csd-abschnitt:has( + .csd-band ) {
		padding-bottom: calc( var(--slant) + 72px );
	}

	.csd-band + .csd-abschnitt {
		padding-top: calc( var(--slant) + 64px );
	}

	.csd-band {
		padding: calc( var(--slant) + 64px ) 0;
	}

	.csd-band:not( .is-text-only ) {
		padding-top: 0;
	}

	.csd-band:not( .is-text-only ) .csd-band__body {
		padding-top: 40px;
	}

	.csd-band__media {
		width: 100%;
		max-height: 480px;
	}

	.csd-page .csd-titel {
		font-size: 40px;
	}

	.csd-kopf__foto {
		height: calc( -1 * var(--header-overlap) + 340px );
	}

	.csd-kopf__inhalt {
		padding-top: calc( -1 * var(--header-overlap) + 250px );
	}

	.csd-kopf__logo img {
		width: 190px;
	}

	.csd-page .csd-kopf__unterzeile {
		font-size: 28px;
	}

	.csd-page .csd-fakten {
		font-size: 17px;
	}

	.csd-page .csd-termin__runde {
		font-size: 26px;
	}

	.csd-page .ticket-card.csd-termin {
		gap: 20px;
		padding-right: 16px;
	}

	.csd-page .csd-termin__datum {
		flex-basis: 76px;
	}

	.csd-page .csd-knopf--instagram {
		width: auto;
	}

	.csd-instagram__karte {
		padding: 48px 40px;
	}

	.csd-logo-block {
		padding: 72px 0 16px;
	}

	.csd-logo-block__logo img {
		width: 200px;
	}

	.csd-links__karte {
		padding: 48px 40px;
	}

	.csd-links__knoepfe {
		flex-direction: row;
		align-items: center;
	}

	.csd-page .csd-links__knoepfe .csd-knopf,
	.csd-page .csd-logo-block__aktionen .csd-knopf,
	.csd-page .csd-naechste-show .csd-knopf {
		width: auto;
	}

	.csd-page .csd-naechste-show__zeile {
		font-size: 26px;
	}

	.csd-band:last-child {
		padding-bottom: 64px;
	}

	.csd-runden__runde + .csd-runden__runde::before {
		height: 16px;
	}

	.csd-runden__runde span {
		width: 48px;
		height: 48px;
	}

	.csd-runden__finale span {
		width: 104px;
		height: 104px;
	}
}

/* --- Ab 1140px: nebeneinander, Text linksbuendig --------------------------- */

@media ( min-width: 1140px ) {
	.csd-spalte {
		margin: 0;
	}

	.csd-aktionen {
		justify-content: flex-start;
	}

	/* Kopf: Foto rechts, Verlauf nach links und unten ins Petrol, Text
	   links auf der 1080px-Linie. */
	.csd-kopf {
		text-align: left;
	}

	.csd-kopf__foto {
		left: 34%;
		height: 100%;
	}

	.csd-kopf__foto::after {
		background:
			linear-gradient( to bottom, transparent 62%, var(--csd-grund) 100% ),
			linear-gradient( 90deg, var(--csd-grund) 0%, color-mix( in srgb, var(--csd-grund) 62%, transparent ) 22%, transparent 52% );
	}

	.csd-page .csd-kopf__bild {
		object-position: var(--pos-desktop, var(--pos));
	}

	.csd-kopf__inhalt {
		max-width: calc( 1080px + 2 * var(--csd-rand) );
		/* Seit 0.187.0 niedriger (vorher clamp( 480px, 38vw, 600px ), unten
		   72px) - ohne Unterzeile und Faktenzeile blieb sonst eine Luecke
		   bis zum Satz darunter. */
		min-height: calc( -1 * var(--header-overlap) + clamp( 380px, 30vw, 460px ) );
		margin: 0 auto;
		padding-top: calc( -1 * var(--header-overlap) + 72px );
		padding-bottom: 40px;
	}

	.csd-kopf__inhalt > * {
		max-width: 560px;
	}

	.csd-kopf__logo img {
		width: 460px;
		margin: 0;
	}

	.csd-page .csd-kopf__h1 {
		margin-top: 28px;
	}

	.csd-page .csd-kopf__unterzeile {
		margin-left: 0;
	}

	.csd-page .csd-fakten {
		justify-content: flex-start;
	}

	/* Termine: Ueberschrift links, Karten rechts. */
	.csd-termine .csd-inner {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2fr );
		column-gap: 64px;
		align-items: start;
	}

	.csd-termine__kopf,
	.csd-termine__liste {
		text-align: left;
	}

	.csd-termine__liste {
		max-width: none;
		margin: 0;
	}

	/* Bild-Text-Band: Bild links ca. 40 % bis an die schraegen Kanten, Text
	   rechts mittig - wie bild-links-schmal bei den Formatbloecken. */
	.csd-band,
	.csd-band:not( .is-text-only ) {
		text-align: left;
	}

	.csd-band:not( .is-text-only ) {
		padding: 0;
	}

	.csd-band:not( .is-text-only ) .csd-band__inner {
		display: grid;
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
		align-items: stretch;
		min-height: clamp( 520px, 40vw, 640px );
		text-align: left;
	}

	.csd-band__media {
		max-height: none;
		aspect-ratio: auto;
	}

	.csd-page .csd-band__bild {
		object-position: var(--pos-desktop, var(--pos));
	}

	.csd-band:not( .is-text-only ) .csd-band__body {
		align-self: center;
		max-width: none;
		margin: 0;
		padding: calc( var(--slant) + 56px ) max( 48px, 50vw - 540px ) calc( var(--slant) + 56px ) 64px;
	}

	.csd-band:not( .is-text-only ) .csd-band__body > * {
		max-width: 600px;
	}

	.csd-band.is-text-only .csd-band__inner {
		text-align: left;
	}

	.csd-band.is-text-only .csd-band__body {
		margin: 0;
	}

	/* Ablauf: zwei Spalten, Ziffer links neben dem Text. */
	.csd-ablauf {
		text-align: left;
	}

	.csd-page .csd-schritte {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: 32px;
		max-width: none;
		margin-top: 8px;
	}

	.csd-schritt,
	.csd-schritt:last-child {
		flex-direction: row;
		align-items: flex-start;
		gap: 18px;
		padding: 24px 0;
	}

	.csd-ablauf__unten {
		max-width: none;
		margin: 0;
	}

	.csd-ablauf__unten .csd-text {
		max-width: 760px;
	}

	/* Vorrunden-Grafik waagerecht ueber die Inhaltsbreite. */
	.csd-wettbewerb {
		text-align: left;
	}

	.csd-page .csd-runden {
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 48px;
	}

	.csd-runden__runde {
		flex-direction: row;
	}

	.csd-runden__runde + .csd-runden__runde::before {
		width: clamp( 32px, 5vw, 80px );
		height: 2px;
	}

	.csd-instagram__karte {
		max-width: none;
		padding: 64px 56px;
		text-align: left;
	}

	.csd-instagram__inhalt {
		max-width: 560px;
	}

	/* Logo-Block: Logo links (mittig in seiner Spalte), Text rechts -
	   Spalten wie bild-links-schmal bei den Formatbloecken. */
	.csd-logo-block {
		text-align: left;
	}

	.csd-logo-block__inner {
		display: grid;
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
		column-gap: 64px;
		align-items: center;
	}

	.csd-page .csd-logo-block__logo {
		justify-self: center;
		margin: 0;
	}

	.csd-logo-block__logo img {
		width: 240px;
	}

	.csd-logo-block__text {
		margin: 0;
	}

	.csd-logo-block__aktionen {
		align-items: flex-start;
	}

	/* Zwischen Terminliste und "Verpass nichts" nur der Abstand unter der
	   Liste (seit 0.189.0, vorher rund doppelt so gross wie die uebrigen
	   Abstaende). Am Handy unveraendert. */
	.csd-termine + .csd-links {
		padding-top: 0;
	}

	.csd-links__karte {
		max-width: none;
		padding: 56px;
		text-align: left;
	}

	.csd-links__karte > * {
		max-width: 640px;
	}

	.csd-links__knoepfe {
		justify-content: flex-start;
	}

	.csd-mehr {
		text-align: left;
	}
}