/*
Theme Name: Milan Slick
Theme URI: https://milanslick.com
Author: dineo
Description: Block-Theme fuer Milan Slick. Schwarz/Weiss, League Gothic + Archivo Narrow.
Version: 1.5.1
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: milanslick
*/

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* ---------- Layout ---------- */

/*
 * Inhalt linksbuendig an der Kante von Logo und Footer (wide size) statt zentriert.
 * Lesespalte bleibt 760px breit, steht aber links in der 1200px-Flaeche.
 */
:root .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Seitentitel nur für Screenreader und Suchmaschinen; sichtbar führt die Navigation (Startseite ohne Titel, Beiträge mit Titel) */
.ms-page-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Kein Block-Abstand nach dem versteckten Titel: alle Seiten beginnen gleich weit unter dem Header */
.ms-page-title + * {
	margin-block-start: 0 !important;
}

/* Überschriften gehören zum folgenden Text: mehr Luft davor, wenig danach */
.wp-block-post-content :is(h2, h3, h4):not(:first-child) {
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-post-content :is(h2, h3, h4) + * {
	margin-top: var(--wp--preset--spacing--10);
}

/* Über: Text oben bündig mit dem Foto */
.ms-about .wp-block-media-text__content {
	padding-top: 0;
	padding-bottom: 0;
}

.ms-about .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

/* Startseite: «Hören» so breit wie Konzertliste und News */
:root .is-layout-constrained > .ms-listen__link {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* ---------- Header ---------- */

/* Kein Block-Abstand zwischen Header und Inhalt, damit der Header oben und unten gleich viel Luft hat */
.wp-site-blocks > .wp-block-template-part:first-child + * {
	margin-block-start: 0;
}

.ms-logo {
	margin: 0;
	line-height: 0;
}

.ms-logo a {
	display: inline-block;
	color: var(--wp--preset--color--contrast);
}

/* Logo ist sehr breit (ca. 8:1): Grösse über die Breite steuern */
.ms-logo svg {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.ms-footer .ms-logo {
	width: min(680px, 85vw);
}

.ms-footer .ms-logo a {
	display: block;
}

.ms-footer .ms-logo svg {
	width: 100%;
}

@media (max-width: 600px) {
	.ms-logo svg {
		width: 220px;
	}

	.ms-footer .ms-logo {
		width: 85vw;
	}
}

.ms-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

.ms-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-bottom: 0.1em;
	border-bottom: 2px solid transparent;
}

.ms-header .wp-block-navigation-item__content:hover,
.ms-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
}

/* Sprachumschalter: Dropdown (details/summary) */
.ms-lang {
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
}

.ms-lang summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--contrast);
}

.ms-lang summary::-webkit-details-marker {
	display: none;
}

.ms-lang summary svg {
	transition: transform 0.2s ease;
}

.ms-lang[open] summary svg {
	transform: rotate(180deg);
}

.ms-lang ul {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 100;
	min-width: 9.5rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.ms-lang li a {
	display: block;
	padding: 0.45rem 1rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	white-space: nowrap;
}

.ms-lang li a:hover,
.ms-lang li a:focus-visible {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

.ms-lang li a[aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* Kleine Desktops: Navigation kompakter, damit sie auch auf Französisch einzeilig bleibt */
@media (min-width: 900px) and (max-width: 1100px) {
	.ms-header .wp-block-navigation {
		font-size: 1.1rem;
		--wp--style--block-gap: 0.65rem;
		gap: 0.65rem;
		letter-spacing: 0.02em;
	}

	.ms-header .ms-logo svg {
		width: 180px;
	}
}

/* Sprachwahl im Burger-Menü (nur mobil, im geöffneten Overlay) */
.ms-nav-lang {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .ms-nav-lang {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem 1.25rem;
	width: 100%;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--display-s) !important;
}

.ms-nav-lang a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ms-nav-lang a[aria-current],
.ms-nav-lang a:hover {
	color: var(--wp--preset--color--contrast);
}

/*
 * Burger-Menü bis 900px (Core schaltet fix bei 600px um). Navigation steht auf «always»,
 * ab 900px wird sie wie die normale Desktop-Navigation angezeigt.
 */
@media (min-width: 900px) {
	.ms-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: inherit;
	}

	.ms-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close,
	.ms-header .wp-block-navigation__responsive-container-open.always-shown {
		display: none;
	}
}

/* Bis 900px steckt die Sprachwahl im Burger-Menü */
@media (max-width: 899px) {
	.ms-header .ms-lang {
		display: none;
	}
}

/* Mobile-Overlay: grosse Schrift, linksbuendig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

/* ---------- Hero ---------- */

.ms-hero {
	padding-bottom: var(--wp--preset--spacing--40);
}

.ms-hero .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.1);
}

/* Mobil: Foto füllt den Bildschirm unter dem Header, oben beschnitten (weniger Wand über dem Kopf) */
@media (max-width: 899px) {
	/* Genau die Bildschirmhöhe unter dem Header (Höhe misst assets/js/milanslick.js) */
	.wp-block-cover.ms-hero {
		min-height: calc(100vh - var(--ms-header-h, 72px)) !important;
		min-height: calc(100svh - var(--ms-header-h, 72px)) !important;
		height: calc(100svh - var(--ms-header-h, 72px));
	}

	.wp-block-cover.ms-hero .wp-block-cover__image-background {
		top: auto !important;
		bottom: 0;
		/* stärker oben beschnitten (wenig Luft über dem Kopf), Gesicht horizontal mittig */
		height: 126% !important;
		object-position: 60% 100% !important;
	}
}

/* Handy: Text und Buttons tiefer und kompakter, damit mehr vom Foto sichtbar bleibt */
@media (max-width: 599px) {
	.wp-block-cover.ms-hero {
		padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
	}

	.ms-hero .ms-hero__title {
		font-size: 3.4rem !important;
		margin-bottom: 0.1em;
	}

	.ms-hero .ms-kicker {
		font-size: var(--wp--preset--font-size--small);
		margin-top: 0.5rem;
		margin-bottom: 0.9rem;
	}

	.ms-hero .wp-block-buttons {
		gap: 0.6rem;
	}
}

/*
 * Desktop: Hochformat-Foto nicht über die ganze Breite aufziehen (zu nah), sondern mittig auf knapp
 * zwei Dritteln der Breite, links und rechts weich ins Schwarz auslaufend.
 */
@media (min-width: 900px) {
	.wp-block-cover.ms-hero .wp-block-cover__image-background {
		left: 50% !important;
		right: auto;
		width: 64% !important;
		transform: translateX(-50%);
		/* oben mehr abschneiden: Gesicht über dem Namen statt dahinter */
		object-position: 50% 62% !important;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 72%, transparent 100%);
	}
}

.ms-hero__title {
	margin-bottom: 0.15em;
	text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Overlay als Verlauf nach unten, damit Titel und Buttons auf dem Foto lesbar bleiben */
.wp-block-cover.ms-hero > .wp-block-cover__background {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 45%, #000 100%) !important;
	opacity: 1 !important;
}

/* Inhalt an der Header-Kante ausrichten (Core setzt bei custom-content-position margin:0 und width:auto) */
.wp-block-cover.ms-hero > .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
}

.ms-kicker {
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.ms-lead {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.05;
}

/* Buttons: einheitliche Höhe, Text mittig */
:root .wp-block-button .wp-block-button__link {
	padding: 0.55em 1.1em 0.5em !important;
	line-height: 1;
}

/* Buttons: Outline-Variante */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-element-button,
.wp-block-button__link {
	border: 2px solid var(--wp--preset--color--contrast);
}

/* ---------- About ---------- */

@media (max-width: 600px) {
	.ms-about.is-stacked-on-mobile .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--30) 0 0;
	}
}

/* ---------- Konzerte ---------- */

.ms-concerts {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: 0.04em;
}

.ms-concert {
	display: grid;
	grid-template-columns: 6.5ch 1fr auto;
	gap: 0.2rem 1.25rem;
	align-items: baseline;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.05;
}

.ms-concert__date {
	white-space: nowrap;
}

.ms-concert__place {
	text-transform: uppercase;
}

.ms-concert__meta {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ms-concert__tickets {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: var(--wp--preset--font-size--display-s);
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 0.35em 0.8em 0.3em;
	line-height: 1;
}

.ms-concert__tickets:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ms-concerts--past .ms-concert {
	font-size: var(--wp--preset--font-size--display-s);
	color: var(--wp--preset--color--muted);
}

.ms-concerts__year {
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--muted);
}

.ms-concerts__empty {
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
}

/* Konzertlisten nutzen die ganze Breite (Logo bis Sprachwahl) statt der Lesespalte */
:root .is-layout-constrained > .ms-concerts {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* Desktop: eine Zeile pro Konzert – Datum · Ort · Besetzung/Tour · Tickets */
@media (min-width: 900px) {
	.ms-concert {
		grid-template-columns: 7ch minmax(0, 1.25fr) minmax(0, 1fr) auto;
		column-gap: 2rem;
		align-items: center;
		padding: 0.9rem 0;
	}

	.ms-concert__meta {
		grid-column: 3;
		grid-row: 1;
		flex-direction: column;
		gap: 0.15rem;
	}

	.ms-concert__tickets {
		grid-column: 4;
		grid-row: 1;
	}
}

@media (max-width: 600px) {
	.ms-concert {
		grid-template-columns: 1fr auto;
	}

	.ms-concert__date,
	.ms-concert__place,
	.ms-concert__meta {
		grid-column: 1;
		grid-row: auto;
	}

	.ms-concert__tickets {
		grid-column: 2;
		grid-row: 1 / span 3;
	}
}

/* ---------- Hören: Spotify, Apple Music, Bandcamp ---------- */

.ms-listen .ms-listen__link {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ms-listen .ms-listen__link:first-of-type {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: var(--wp--preset--spacing--20);
}

.ms-listen__link a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.7rem 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.04em;
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration: none;
}

.ms-listen__link a span {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.ms-listen__link .ms-arrow {
	width: 0.7em;
	height: 0.7em;
}

.ms-listen__link a:hover span,
.ms-listen__link a:focus-visible span {
	transform: translate(4px, -4px);
}

/* ---------- Fotos ---------- */

.ms-photoset {
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* Erstes Set direkt unter dem Header, gleicher Abstand wie auf den anderen Seiten */
.wp-block-post-content > .ms-photoset:first-child {
	margin-top: 0 !important;
}

.ms-photoset h3 {
	margin-bottom: 0.2rem;
}

.ms-photoset__meta {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ms-photoset__meta a {
	color: var(--wp--preset--color--muted);
}

.ms-photoset__meta a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Videos und Bilder im Text: Luft davor, Bildunterschrift linksbündig im Meta-Stil */
.wp-block-post-content > .wp-block-embed,
.wp-block-post-content .ms-film-still {
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-embed .wp-element-caption,
.ms-film-still .wp-element-caption {
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------- Galerie-Karussell (.ms-gallery): 4 pro Reihe, 2 mobil, mehr per Pfeil oder Wischen ---------- */

.wp-block-gallery.ms-gallery {
	--ms-gallery-gap: 1rem;
	--ms-gallery-cols: 4;
	flex-wrap: nowrap !important;
	gap: var(--ms-gallery-gap) !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.wp-block-gallery.ms-gallery::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.ms-gallery > figure.wp-block-image:not(#individual-image) {
	flex: 0 0 calc((100% - (var(--ms-gallery-cols) - 1) * var(--ms-gallery-gap)) / var(--ms-gallery-cols)) !important;
	width: auto !important;
	aspect-ratio: 4 / 3;
	margin: 0 !important;
	scroll-snap-align: start;
}

.wp-block-gallery.ms-gallery > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 600px) {
	/* Handy: ein Foto pro Ansicht, gross, durchwischen */
	.wp-block-gallery.ms-gallery {
		--ms-gallery-cols: 1;
		--ms-gallery-gap: 0.5rem;
	}
}

.ms-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0 0 0.75rem !important;
}

.ms-carousel-nav[hidden] {
	display: none;
}

.ms-carousel-nav button {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ms-carousel-nav button:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ms-carousel-nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ---------- Bilder: schwarz-weiss ---------- */

.ms-gallery img,
.wp-block-post-featured-image img {
	filter: grayscale(1);
}

/* ---------- Effekte (nur ohne «Bewegung reduzieren») ---------- */

@media (prefers-reduced-motion: no-preference) {

	/* Handgezeichnetes Burger-Icon wackelt beim Hover leicht */
	.wp-block-navigation__responsive-container-open:hover .ms-handdrawn,
	.wp-block-navigation__responsive-container-close:hover .ms-handdrawn {
		animation: ms-wiggle 0.45s ease-in-out;
	}

	@keyframes ms-wiggle {
		0%, 100% { rotate: 0deg; }
		30% { rotate: -6deg; }
		65% { rotate: 4deg; }
	}

	/* Burger-Menü: Punkte werden nacheinander «gestempelt» (leicht schräg, zu gross, dann satt) */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: ms-menu-in 0.3s ease-out both;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
		animation: ms-stamp-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
		animation-delay: calc(0.08s + var(--ms-i, 0) * 0.055s);
	}

	.is-menu-open .wp-block-navigation__container > li:nth-child(2) { --ms-i: 1; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(3) { --ms-i: 2; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(4) { --ms-i: 3; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(5) { --ms-i: 4; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(6) { --ms-i: 5; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(7) { --ms-i: 6; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(8) { --ms-i: 7; }
	.is-menu-open .wp-block-navigation__container > li:nth-child(9) { --ms-i: 8; }

	@keyframes ms-menu-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes ms-stamp-in {
		0% { opacity: 0; transform: translateX(28px) rotate(-4deg) scale(1.18); }
		55% { opacity: 1; }
		100% { opacity: 1; transform: none; }
	}

	/* Hero: Foto zoomt sanft herein, Name landet wie ein Stempel, Rest gleitet nach */
	.ms-hero .wp-block-cover__image-background {
		animation: ms-hero-zoom 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		translate: 0 var(--ms-parallax, 0px);
		will-change: translate;
	}

	.ms-hero__title {
		animation: ms-stamp-title 0.7s 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
	}

	.ms-hero .ms-kicker {
		animation: ms-rise 0.7s 0.65s ease-out both;
	}

	.ms-hero .wp-block-buttons {
		animation: ms-rise 0.7s 0.8s ease-out both;
	}

	/* Beim Scrollen: Hero-Text blendet aus, Foto bewegt sich langsamer (Parallax, per JS) */
	.wp-block-cover.ms-hero > .wp-block-cover__inner-container {
		opacity: calc(1 - var(--ms-hero-p, 0) * 1.4);
		translate: 0 calc(var(--ms-hero-p, 0) * -48px);
	}

	@keyframes ms-hero-zoom {
		from { scale: 1.12; opacity: 0; }
		to { scale: 1; opacity: 1; }
	}

	@keyframes ms-stamp-title {
		0% { opacity: 0; transform: rotate(-3deg) scale(1.25); }
		60% { opacity: 1; transform: rotate(0.5deg) scale(0.98); }
		100% { opacity: 1; transform: none; }
	}

	@keyframes ms-rise {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: none; }
	}

	/* Einblenden beim Scrollen (Klasse setzt assets/js/milanslick.js) */
	.ms-reveal {
		opacity: 0;
		translate: 0 28px;
		transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--ms-delay, 0ms);
	}

	.ms-reveal.is-visible {
		opacity: 1;
		translate: 0 0;
	}

	/* Bilder: beim Hover leicht heranzoomen, etwas mehr Kontrast */
	.ms-gallery figure.wp-block-image,
	.wp-block-post-featured-image,
	.ms-about .wp-block-media-text__media {
		overflow: hidden;
	}

	.ms-gallery figure.wp-block-image img,
	.wp-block-post-featured-image img,
	.ms-about .wp-block-media-text__media img {
		transition: scale 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s ease;
	}

	.ms-gallery figure.wp-block-image:hover img,
	.wp-block-post-featured-image:hover img,
	.ms-about .wp-block-media-text__media:hover img {
		scale: 1.05;
		filter: grayscale(1) contrast(1.15) brightness(1.05);
	}

	/* Logo kippt beim Hover leicht, wie ein Stempel */
	.ms-logo svg {
		transition: rotate 0.25s ease, scale 0.25s ease;
	}

	.ms-logo a:hover svg,
	.ms-logo a:focus-visible svg {
		rotate: -2deg;
		scale: 1.03;
	}

	/* Konzertzeilen: Ort rückt beim Hover leicht ein */
	.ms-concert__place {
		transition: translate 0.25s ease;
	}

	.ms-concert:hover .ms-concert__place {
		translate: 6px 0;
	}
}

/* ---------- News ---------- */

.ms-posts {
	padding: 0;
}

.ms-post-card {
	max-width: var(--wp--style--global--content-size);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Beitragsnavigation nur mit Nachbarbeiträgen, dann mit Linie darüber */
.ms-post-nav {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.ms-post-nav:not(:has(a)) {
	display: none;
}

.wp-block-post-excerpt__more-link {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-navigation-link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-s);
}

/* ---------- Footer ---------- */

.ms-footer .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

.ms-footer__meta {
	gap: 0.75rem 1.5rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms-footer__meta p {
	margin: 0;
}

@media (max-width: 600px) {
	.ms-footer > .alignwide {
		gap: var(--wp--preset--spacing--40);
	}
}

.ms-footer__meta a {
	color: var(--wp--preset--color--muted);
}

/* ---------- Contact Form 7 ---------- */

/* Ruhig: nur Unterstreichungen, kleine graue Labels, viel Luft */
.wpcf7-form p {
	margin: 0 0 1.75rem;
}

.ms-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
}

@media (max-width: 600px) {
	.ms-form-row {
		grid-template-columns: 1fr;
	}
}

.wpcf7-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.wpcf7-form select,
.wpcf7-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.45rem 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 0.2s ease;
}

.wpcf7-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpcf7-form select {
	appearance: none;
	cursor: pointer;
	padding-right: 1.5rem;
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 0.6rem) 55%, calc(100% - 0.25rem) 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.wpcf7-form select option {
	background: var(--wp--preset--color--surface);
}

.wpcf7-form input:hover,
.wpcf7-form select:hover,
.wpcf7-form textarea:hover {
	border-bottom-color: var(--wp--preset--color--muted);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
}

.wpcf7-form input[type="submit"] {
	cursor: pointer;
	margin-top: 0.5rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.5em 1.6em 0.45em;
	transition: background 0.2s ease, color 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
	color: #FF8A8A;
}

.wpcf7-form .wpcf7-not-valid,
.wpcf7-form input.wpcf7-not-valid:not([type="submit"]):not([type="checkbox"]) {
	border-bottom-color: #FF8A8A;
}

/* Cloudflare Turnstile (nur sichtbar, wenn Schlüssel hinterlegt sind) */
.ms-turnstile:not(:empty) {
	margin: 0 0 1.75rem;
	min-height: 65px;
}

.wpcf7-form .hidden-fields-container {
	display: none;
}

/* Meldungsliste für Screenreader (CF7-eigenes CSS ist abgeschaltet) */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpcf7-response-output:empty {
	display: none;
}

.wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wpcf7-spinner {
	display: none;
}