/*
 * DIVA – Theme-Stile
 * Let's Do. Media – https://lets-do.media
 * Basiert auf Kentwood von Automattic (GPLv2 oder später).
 *
 * Mobil zuerst geschrieben. Umbruchpunkt für Spalten: 782 px (wie WordPress).
 * Inhalt:
 *  1. Farben und Grundwerte      9. Veranstaltungen
 *  2. Grundlagen, Fokus, Links  10. Kontakt: Team, Formular, Kästen, Karte
 *  3. Gold-Effekte              11. Kopfbereich Unterseiten, Navigation
 *  4. Abschnitte und Reihen     12. Fußbereich
 *  5. Startseite: Kopf (Hero)   13. Unterseiten (Impressum, Datenschutz, Event)
 *     und Markenleiste          14. Schwebende Knöpfe (Plugins)
 *  6. Banner mit Video          15. Video-Knopf (Anhalten/Abspielen)
 *  7. Willkommen, Videotexte    15b. Handy: randlose Startseite (bis 781 px)
 *  8. Social Media              16. Einblenden, reduzierte Bewegung
 */

/* =========================================================
   1. Farben und Grundwerte
   ========================================================= */
:root {
	--diva-gold: #cf9c1b;          /* Zierde: Rahmen, Flächen, Linien */
	--diva-gold-hell: #d9b96a;
	--diva-gold-text: #8a6510;     /* kleine Schrift auf Creme/Weiß: 5,28:1 */
	--diva-gold-gross: #a87a0c;    /* nur große Schrift (ab 24 px) auf Creme: 3,83:1 */
	--diva-creme: #fffff4;
	--diva-nacht: rgba(14, 12, 10, 0.78);
	--diva-schatten: 0 28px 56px -30px rgba(0, 0, 0, 0.75);
	--diva-fokus-dunkel: #1d1d1b;
	--diva-rand: clamp(12px, 3vw, 24px); /* Seitenabstand auf kleinen Bildschirmen */
}

/* =========================================================
   2. Grundlagen, Fokus, Links
   ========================================================= */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: #0b0b0e;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Hintergrund als feste Ebene: funktioniert auch auf dem iPhone
   (iOS ignoriert background-attachment: fixed). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #0b0b0e url("https://diva-weiden.de/wp-content/uploads/2025/02/72508.jpg") 50% 0 / cover no-repeat;
	pointer-events: none;
}

::selection {
	background: var(--diva-gold);
	color: #000;
}

/* Sichtbarer Fokus auf jedem Grund: weißer Innenring, dunkler Ring,
   außen ein goldener Schein (hell: dunkler Ring 16:1, dunkel: weiß 21:1) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--diva-fokus-dunkel);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(217, 185, 106, 0.75);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background: #0e0c0a;
	color: #f7f1e3;
	border: 1px solid var(--diva-gold-hell);
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-decoration: underline;
}

/* Links im Fließtext: immer unterstrichen (nicht nur über die Farbe erkennbar) */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.has-tertiary-background-color a:where(:not(.wp-element-button)) {
	text-decoration-color: rgba(140, 106, 16, 0.8);
}

.has-tertiary-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--diva-gold-text);
	text-decoration-color: currentColor;
}

a[href^="tel:"],
a[href^="mailto:"] {
	white-space: nowrap;
}

/* Kein Silbentrennungs-Chaos mitten im Wort (Kern-CSS bricht Spalten hart um) */
.wp-block-columns > .wp-block-column {
	word-break: normal;
	overflow-wrap: break-word;
}

/* Kentwood-Reste */
.wp-block-navigation ul {
	padding: unset;
}

.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
}

/* Schrift auf Creme: dunkles Gold statt Hellgold (Kontrast) */
.has-tertiary-background-color .has-secondary-color,
.has-base-background-color .has-secondary-color {
	color: var(--diva-gold-text) !important;
}

/* Überschriften in dunklem Gold sind immer groß (ab 24 px) */
.has-gold-dark-color:where(:not(h1, h2, h3, h4, .has-x-large-font-size, .has-xx-large-font-size, .has-xxx-large-font-size, .has-xxxx-large-font-size)) {
	color: var(--diva-gold-text) !important;
}

/* =========================================================
   3. Gold-Effekte
   ========================================================= */

/* Goldrahmen mit Schimmer. Reine Zierde: liegt unter dem Inhalt und
   nimmt keine Klicks an (vorher waren Telefon/E-Mail nicht antippbar). */
.gold-border {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 0;
}

.gold-border::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 6px;
	border-radius: 0;
	background: linear-gradient(45deg, #ffd700 0%, #daa520 15%, #b8860b 30%, #ffec8b 45%, #fff3a0 50%, #ffec8b 55%, #8b6914 70%, #daa520 85%, #ffd700 100%);
	background-size: 200% 200%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.9;
	pointer-events: none;
	animation: diva-schimmer 5s linear infinite;
}

@keyframes diva-schimmer {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}

/* Goldfläche. Der dunkelste Ton ist leicht aufgehellt, damit schwarze
   Schrift überall mindestens 4,5:1 erreicht. */
.gold-bg {
	background: linear-gradient(45deg, #ffd700 0%, #ffd700 5%, #daa520 15%, #b8860b 30%, #ffec8b 32%, #fff3a0 34%, #ffec8b 36%, #9c7718 60%, #daa520 80%, #ffd700 85%, #ffd700 100%);
	background-size: 200% 200%;
	animation: diva-gold 120s linear infinite;
}

@keyframes diva-gold {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}

/* Weiße Schrift mit dunklem Lichthof – auf Gold und Video lesbar */
.on-gold-text {
	color: #fff;
	text-shadow:
		0 0 2px rgba(0, 0, 0, 0.9),
		0 0 5px rgba(0, 0, 0, 0.8),
		0 0 10px rgba(0, 0, 0, 0.8),
		0 0 15px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   4. Abschnitte und Reihen
   ========================================================= */
.diva-section.diva-section {
	padding-left: var(--diva-rand);
	padding-right: var(--diva-rand);
}

.diva-main--start {
	padding-top: 25px;
}

/* Bild-/Text-Reihen: im Quelltext steht das Bild immer zuerst.
   Auf dem Handy also Bild, dann Text. Ab 782 px Zickzack per Klasse. */
.diva-row > .wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.diva-row > .wp-block-column > :only-child {
	flex: 1 1 auto;
}

@media (min-width: 782px) {
	.wp-block-columns.diva-row--reverse {
		flex-direction: row-reverse;
	}
}

/* Bildflächen: eigene Mindesthöhen statt Abstandshalter im Inhalt */
.wp-block-cover.diva-media {
	min-height: clamp(240px, 72vw, 460px);
}

.wp-block-cover.diva-media--marke {
	min-height: clamp(360px, 118vw, 620px);
}

.wp-block-cover.diva-media--kontakt {
	min-height: clamp(220px, 62vw, 340px);
}

.wp-block-cover.diva-media--hoch {
	min-height: clamp(300px, 85vw, 526px);
}

.wp-block-cover.diva-media--event {
	min-height: clamp(240px, 62vw, 420px);
}

@media (max-width: 781px) {
	/* Hochformat-Modefotos: Kopf im Bild behalten */
	.diva-media--marke > .wp-block-cover__image-background:not([data-object-position]) {
		object-position: 50% 18%;
	}
}

@media (min-width: 782px) {
	.wp-block-cover.diva-media { min-height: 24rem; }
	.wp-block-cover.diva-media--marke { min-height: 36.5rem; }
	.wp-block-cover.diva-media--kontakt { min-height: 18rem; }
	.wp-block-cover.diva-media--hoch { min-height: 526px; }
	.wp-block-cover.diva-media--event { min-height: 29rem; }
}

/* Logos in Bildflächen: 1:1, ohne Rundung oder Zuschnitt */
.diva-marken-logo {
	margin: 0;
}

.diva-marken-logo img {
	max-width: 100%;
	height: auto;
}

/* Textkästen */
.diva-box {
	min-width: 0;
}

.diva-box :where(h2, h3) {
	margin: 0;
	line-height: 1.12;
	overflow-wrap: break-word;
}

.diva-box h3:where(:not([class*="-font-size"])) {
	font-size: var(--wp--preset--font-size--x-large);
}

.diva-box p {
	margin: 0;
}

@media (max-width: 781px) {
	.diva-box :where(h2, h3, p) {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* Tiefe */
.diva-box.gold-border,
.diva-row .wp-block-cover,
.diva-formular {
	box-shadow: var(--diva-schatten);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.diva-row .wp-block-cover > .wp-block-cover__image-background {
		transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.diva-row .wp-block-cover:hover > .wp-block-cover__image-background {
		transform: scale(1.04);
	}
}

/* =========================================================
   5. Startseite: Kopfbereich mit Video (Hero) und Markenleiste
   ========================================================= */

/* Das Video ist der Star: Schrift steht ohne Kästen direkt darauf.
   Lesbar wird sie durch weiche Verläufe oben und unten (gemessen gegen die
   hellsten Bilder der Rotator-Videos: weißes Studio) und einen feinen
   Schatten. Mitte und Seiten des Videos bleiben unberührt. */
.wp-block-cover.diva-hero {
	--hero-rand: clamp(20px, 5.4vw, 72px);
	--hero-oben: clamp(20px, 4.4vw, 48px);
	/* unten frei für den Musik-Knopf (links) und „Zustimmung verwalten“ (rechts) */
	--hero-unten: calc(clamp(72px, 9vh, 92px) + env(safe-area-inset-bottom, 0px));
	--hero-schatten: 0 1px 2px rgba(0, 0, 0, 0.32), 0 0 22px rgba(0, 0, 0, 0.28);
	min-height: 100vh;
	min-height: 100svh;
	align-items: stretch;
	color: #fff;
}

/* Verläufe: oben rechts ein weicher Eckschatten für die Öffnungszeiten,
   oben ein leichter Schleier für das Logo, unten ein tiefer Verlauf für den Claim.
   Die Stopps stehen in px ab oberem bzw. unterem Rand – so folgen sie der Schrift,
   die oben bzw. unten verankert ist, auf jeder Bildschirmhöhe (gemessen gegen die
   hellsten Bilder der vier Rotator-Videos). */
.wp-block-cover.diva-hero > .wp-block-cover__background {
	opacity: 1 !important;
	background:
		radial-gradient(118% calc(220px + 22vw) at 100% 0%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0.2) 74%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.14) calc(60px + 12vw), rgba(0, 0, 0, 0) calc(110px + 23vw)),
		linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0, rgba(0, 0, 0, 0.66) 130px, rgba(0, 0, 0, 0.58) 210px, rgba(0, 0, 0, 0.5) 265px, rgba(0, 0, 0, 0.46) 315px, rgba(0, 0, 0, 0.24) 370px, rgba(0, 0, 0, 0) 440px) !important;
}

@media (min-width: 782px) {
	.wp-block-cover.diva-hero > .wp-block-cover__background {
		background:
			radial-gradient(640px 420px at 100% 0%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.56) 50%, rgba(0, 0, 0, 0.2) 78%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.08) 144px, rgba(0, 0, 0, 0) 234px),
			linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0, rgba(0, 0, 0, 0.62) 150px, rgba(0, 0, 0, 0.54) 230px, rgba(0, 0, 0, 0.45) 330px, rgba(0, 0, 0, 0.22) 390px, rgba(0, 0, 0, 0) 470px) !important;
	}
}

.diva-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wp-block-group.diva-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--hero-oben) var(--hero-rand) var(--hero-unten);
}

/* Logo links, Öffnungszeiten rechts – beide unten bündig */
.wp-block-group.diva-hero__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.diva-hero__logo {
	flex: 0 0 auto;
	width: clamp(84px, 23vw, 136px);
	margin: 0;
}

.diva-hero__logo img {
	display: block;
	width: 100% !important; /* Block setzt 136 px inline */
	max-width: 100%;
	height: auto;
}

.wp-block-group.diva-hero__meta {
	min-width: 0;
}

.diva-hours {
	margin: 0;
	color: #fff;
	font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.08rem);
	line-height: 1.5;
	letter-spacing: 0.015em;
	text-align: right;
	text-shadow: var(--hero-schatten);
	white-space: nowrap;
}

.diva-hours strong {
	font-weight: 500;
	letter-spacing: 0.03em;
}

.diva-hours__label {
	display: inline-block;
	margin: 0 -0.3em 0.55rem 0; /* Laufweite rechts ausgleichen */
	padding-bottom: 0.6rem;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	/* feine Goldlinie unter dem Etikett */
	background: linear-gradient(var(--diva-gold-hell), var(--diva-gold-hell)) calc(100% - 0.3em) 100% / 2.25rem 1px no-repeat;
}

/* Claim: groß, ruhig, zentriert über dem unteren Verlauf */
.wp-block-group.diva-hero__claim {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

h1.diva-hero-claim {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	color: #fff;
	font-weight: 400;
	text-shadow: var(--hero-schatten);
}

.diva-claim__titel {
	display: block;
	font-size: clamp(2.85rem, 13vw, 3.6rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.diva-claim__titel em {
	font-style: italic;
	font-weight: 300;
	word-spacing: -0.06em; /* kursiver Wortabstand fällt sonst zu weit aus */
}

/* Der Gedankenstrich bleibt für Screenreader im Satz, sichtbar ersetzt ihn die Zeile darunter */
.diva-claim__strich {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.diva-claim__zusatz {
	display: flex;
	align-items: center;
	gap: 0.95em;
	margin-top: 1.15rem;
	padding-left: 0.3em; /* Laufweite rechts ausgleichen */
	font-size: clamp(0.8rem, 0.74rem + 0.3vw, 0.95rem);
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.diva-claim__zusatz::before,
.diva-claim__zusatz::after {
	content: "";
	flex: 0 0 auto;
	width: clamp(1.25rem, 6vw, 2.75rem);
	height: 1px;
	background: var(--diva-gold-hell);
	box-shadow: none;
}

/* sehr schmale Geräte (iPhone SE 1. Gen.): Zusatzzeile ohne Seitenlinien, einzeilig */
@media (max-width: 359px) {
	.diva-claim__zusatz {
		gap: 0;
		padding-left: 0.22em;
		letter-spacing: 0.22em;
		white-space: nowrap;
	}

	.diva-claim__zusatz::before,
	.diva-claim__zusatz::after {
		content: none;
	}
}

/* Handy quer (niedrige Höhe): alles kompakter, damit der Kopfbereich
   in einen Bildschirm passt und nichts unter die schwebenden Knöpfe rutscht */
@media (orientation: landscape) and (max-height: 540px) {
	.wp-block-cover.diva-hero {
		--hero-oben: 16px;
		--hero-unten: calc(60px + env(safe-area-inset-bottom, 0px));
	}

	/* kürzerer Verlauf unten, damit das niedrige Video nicht ganz im Schatten liegt */
	.wp-block-cover.diva-hero > .wp-block-cover__background {
		background:
			radial-gradient(640px 420px at 100% 0%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.56) 50%, rgba(0, 0, 0, 0.2) 78%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 120px),
			linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.58) 120px, rgba(0, 0, 0, 0.5) 180px, rgba(0, 0, 0, 0.45) 225px, rgba(0, 0, 0, 0.2) 265px, rgba(0, 0, 0, 0) 320px) !important;
	}

	.wp-block-group.diva-hero__top {
		align-items: flex-start;
	}

	.diva-hero__logo {
		width: 76px;
	}

	.diva-claim__titel.diva-claim__titel {
		font-size: min(13vh, 3.4rem);
		white-space: nowrap;
	}

	.diva-claim__zusatz.diva-claim__zusatz {
		margin-top: 0.7rem;
	}

	.diva-hero .diva-hero__arrow {
		margin-top: 0.4rem;
	}

	.diva-hero .diva-hero__arrow a {
		height: 48px;
	}
}

/* quer und breit: Musik-Knopf sitzt oben rechts – Öffnungszeiten darunter */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 782px) {
	.wp-block-group.diva-hero__meta {
		padding-top: 64px;
	}
}

@media (min-width: 782px) {
	.diva-claim__titel {
		font-size: clamp(4rem, 6.4vw, 6.4rem);
		line-height: 1;
		white-space: nowrap;
	}

	.diva-claim__zusatz {
		margin-top: 1.4rem;
	}
}

/* Scroll-Hinweis: feine Linie mit Pfeilspitze, auf der ein Lichtpunkt
   ruhig nach unten wandert. Inhalt bleibt das „↓“ (für den Editor). */
.diva-hero__arrow {
	margin: clamp(1.25rem, 3.6vh, 2.25rem) 0 0;
	line-height: 0;
}

.diva-hero__arrow a {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 60px;
	color: transparent;
	font-size: 0;
	text-decoration: none;
	text-shadow: none;
	/* Pfeilspitze */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M.5.5 6 6 11.5.5' fill='none' stroke='%23e7cf8f' stroke-width='1'/%3E%3C/svg%3E") 50% calc(100% - 6px) / 12px 7px no-repeat;
}

.diva-hero__arrow a::before,
.diva-hero__arrow a::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
}

.diva-hero__arrow a::before {
	top: 6px;
	bottom: 7px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(231, 207, 143, 0.9));
}

.diva-hero__arrow a::after {
	top: 6px;
	height: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
	animation: diva-scrollhinweis 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes diva-scrollhinweis {
	0% { transform: translateY(0); opacity: 0; }
	20% { opacity: 1; }
	75% { transform: translateY(28px); opacity: 1; }
	100% { transform: translateY(28px); opacity: 0; }
}

.diva-hero__arrow a:hover::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), #fff);
}

/* Ohne Bewegung: stehende Linie mit Pfeilspitze */
.diva-bewegung-aus .diva-hero__arrow a::after {
	content: none;
}

/* Markenleiste unter dem Video: Weiß mit feinen Goldlinien.
   Die Logo-Dateien haben einen halbtransparenten weißen Grund – auf Weiß
   verschwindet die Kachel, das Logo steht frei (Datei unverändert, kein Zuschnitt). */
.wp-block-group.diva-brandbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0.25rem max(var(--diva-rand), 20px);
	background: #fff;
	border-top: 1px solid var(--diva-gold);
	border-bottom: 1px solid var(--diva-gold);
}

.diva-brandbar > .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid rgba(207, 156, 27, 0.32);
}

.diva-brandbar > .wp-block-image:nth-child(odd) {
	border-right: 1px solid rgba(207, 156, 27, 0.32);
}

/* fünftes Logo: allein in der letzten Reihe, mittig */
.diva-brandbar > .wp-block-image:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	border-right: 0;
	border-bottom: 0;
}

.diva-brandbar img {
	display: block;
	width: min(100%, 158px);
	height: auto;
}

@media (min-width: 600px) {
	.wp-block-group.diva-brandbar {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 0 max(var(--diva-rand), 24px);
	}

	.diva-brandbar > .wp-block-image,
	.diva-brandbar > .wp-block-image:last-child:nth-child(odd) {
		grid-column: auto;
		padding: clamp(1rem, 2.4vw, 1.75rem) clamp(0.4rem, 1.4vw, 1.25rem);
		border-bottom: 0;
		border-right: 1px solid rgba(207, 156, 27, 0.32);
	}

	.diva-brandbar > .wp-block-image:last-child {
		border-right: 0;
	}

	.diva-brandbar img {
		width: min(100%, 180px);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.diva-brandbar img {
		transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.diva-brandbar > .wp-block-image:hover img {
		transform: scale(1.04);
	}
}

/* =========================================================
   6. Banner mit Hintergrundvideo
   ========================================================= */
.wp-block-cover.diva-banner > .wp-block-cover__background.has-background-dim-0.has-background-gradient {
	opacity: 0.5;
}

.wp-block-cover.diva-banner > .wp-block-cover__inner-container {
	box-sizing: border-box;
	padding: clamp(2.5rem, 6vw, 4rem) max(var(--diva-rand), 20px);
	/* weiche Abdunkelung hinter Titel und Untertitel, ohne sichtbare Kanten */
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.48) 55%, rgba(0, 0, 0, 0) 100%) 50% 50% / min(100%, 64rem) 100% no-repeat;
}

@media (max-width: 781px) {
	.wp-block-cover.diva-banner > .wp-block-cover__inner-container {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0) 100%);
	}
}

.diva-banner__titel {
	margin: 0 0 0.12em;
	line-height: 1.05;
	text-wrap: balance;
}

.diva-banner__text {
	margin: 0;
	text-wrap: balance;
}

@media (max-width: 599px) {
	.diva-banner__text br {
		display: none;
	}
}

/* Vorschaubild und Video füllen die Fläche identisch */
.wp-block-cover__video-background[poster] {
	background: #0d0c0b;
}

/* =========================================================
   7. Willkommen, Texte auf Videos
   ========================================================= */
.diva-video-text {
	margin: 0 0 var(--wp--preset--spacing--40);
	line-height: 1.15;
	text-wrap: balance;
}

.diva-media--hoch > .wp-block-cover__inner-container {
	width: 100%;
}

/* Max-Mara-Video: dunkler Verlauf unten, damit der Text darauf lesbar ist */
.wp-block-cover.diva-media--hoch > .wp-block-cover__background {
	opacity: 1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0) 60%) !important; /* Inline-Farbe des Blocks */
}

.wp-block-group.diva-video-zeile {
	align-items: flex-end;
	gap: 1rem 1.5rem;
}

.diva-video-zeile > .wp-block-image {
	flex: 0 1 247px;
	margin: 0;
}

.diva-video-zeile > .diva-video-text {
	flex: 1 1 14rem;
	margin: 0;
}

@media (max-width: 599px) {
	.diva-video-zeile > .diva-video-text {
		text-align: left;
	}
}

/* =========================================================
   8. Social Media
   ========================================================= */
.diva-social > * + * {
	margin-block-start: 25px;
}

.diva-social p {
	margin-block-end: 0;
}

.wp-block-columns.diva-social__links {
	gap: var(--wp--preset--spacing--40);
	margin-bottom: 0;
}

.diva-social__links .wp-block-image {
	margin: 0;
}

.diva-social__links img {
	max-width: 100%;
	height: auto;
}

/* Facebook-Feed (Plugin „Easy Facebook Likebox“): wischbare Reihe mit
   gleich großen Kacheln. Das Plugin setzt eigene Breiten – daher !important. */
.diva-social .efbl_feeds_holder.efbl_feeds_row {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: auto !important;
	margin: 0 auto !important;
	padding: 6px 0 14px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 1100px) {
	.diva-social .efbl_feeds_holder.efbl_feeds_row {
		justify-content: center !important;
	}
}

.diva-social .efbl_feeds_holder.efbl_feeds_row > .efbl-row-content {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	scroll-snap-align: start;
}

.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-wrapper,
.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-content {
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-content > p:empty,
.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-wrapper > p:empty,
.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box:not(:has(img)),
.diva-social .efbl-overlay,
.diva-social .efbl-feed-content,
.diva-social .efbl-post-footer {
	display: none !important;
}

.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box {
	display: block;
	position: relative;
	width: 150px !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid rgba(217, 185, 106, 0.55);
	background: #0d0c0b;
	box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8);
}

@media (min-width: 782px) {
	.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box {
		width: 168px !important;
	}
}

.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
}

.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box br {
	display: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box img {
		transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box:hover img {
		transform: scale(1.05);
	}
}

/* =========================================================
   9. Veranstaltungen
   ========================================================= */
.diva-events__intro {
	margin: 0;
	text-wrap: balance;
}

.wp-block-group.diva-event .diva-box,
.diva-event .diva-box {
	gap: 0.5rem;
}

.diva-event .diva-box h3 {
	margin-bottom: 0.15em;
}

.diva-kicker {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--diva-gold-text);
}

.diva-event .wp-block-buttons {
	margin-top: 0.5rem;
}

.diva-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 14px 30px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(135deg, #e3c06a 0%, #cf9c1b 45%, #a87a0c 100%);
	color: #111;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.55);
}

.diva-btn .wp-block-button__link:hover,
.diva-btn .wp-block-button__link:focus-visible {
	background: linear-gradient(135deg, #ebcc7c 0%, #d8a826 45%, #b4840f 100%);
	color: #000;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.diva-btn .wp-block-button__link {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.diva-btn .wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
	}
}

/* =========================================================
   10. Kontakt: Team, Formular, Kästen, Karte
   ========================================================= */
.diva-team > * + *,
.diva-formular > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.diva-formular > p {
	margin-block-start: 0.35rem;
}

/* Team (Plugin MetaSlider) als ruhiges Raster statt Endlos-Karussell.
   MetaSlider setzt Breiten und Verschiebungen per Skript – daher !important. */
html body #metaslider_561.flexslider .flex-viewport {
	overflow: visible !important;
	height: auto !important;
}

html body #metaslider_561.flexslider .flex-viewport > ul.slides {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 34px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 24px !important;
	transform: none !important;
	animation: none !important;
}

@media (min-width: 600px) {
	html body #metaslider_561.flexslider .flex-viewport > ul.slides {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

html body #metaslider_561.flexslider .flex-viewport > ul.slides > li {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	opacity: 1 !important;
	text-align: center;
}

/* MetaSlider verdoppelt die Fotos für das Karussell – Kopien ausblenden */
html body #metaslider_561.flexslider .flex-viewport > ul.slides > li.clone,
html body #metaslider_561.flexslider .flex-viewport > ul.slides > li.diva-doppelt {
	display: none !important;
}

#metaslider_561 .slides > li img {
	width: min(62%, 230px) !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0 auto !important;
	border: 1px solid rgba(207, 156, 27, 0.55);
	box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55);
}

@media (min-width: 600px) {
	#metaslider_561 .slides > li img {
		width: min(78%, 240px) !important;
	}
}

#metaslider_container_561,
#metaslider_561 .flex-viewport,
#metaslider_561 .slides,
#metaslider_561 .slides li {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

#metaslider_561 .caption-wrap {
	position: static !important;
	border: 0 !important;
	box-shadow: none !important;
	margin-top: 16px;
	padding: 0;
	background: none !important;
	opacity: 1 !important;
	text-align: center;
}

#metaslider_561 .caption-wrap .caption {
	padding: 0 !important;
	color: #1d1d1b !important;
	background: transparent !important;
}

#metaslider_561 .caption h2,
#metaslider_561 .caption h3 {
	margin: 0 0 4px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #1d1d1b;
}

#metaslider_561 .caption p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #4f5256;
}

#metaslider_561 .flex-control-nav,
#metaslider_561 .flex-direction-nav {
	display: none !important;
}

/* Kontaktformular (Plugin Forminator) */
.forminator-ui.forminator-custom-form .forminator-label {
	font-size: 0.875rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4f5256 !important;
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea {
	font-size: 16px !important; /* verhindert das Hineinzoomen auf dem iPhone */
	color: #111 !important;
	border: 1px solid #8b8161 !important; /* Feldrand 3,9:1 */
	border-radius: 0 !important;
	background: #fff !important;
	padding: 12px 14px !important;
}

.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder {
	color: #6b6b6b !important;
	opacity: 1;
}

.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
	border-color: var(--diva-gold-text) !important;
	outline: 2px solid var(--diva-gold-text) !important;
	outline-offset: 1px;
	box-shadow: none !important;
}

.forminator-ui.forminator-custom-form .forminator-button-submit {
	min-height: 48px;
	padding: 15px 34px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: linear-gradient(135deg, #e3c06a 0%, #cf9c1b 45%, #a87a0c 100%) !important;
	color: #111 !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.55);
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
	filter: brightness(1.06);
}

.forminator-ui.forminator-custom-form .forminator-button-submit:focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px;
}

/* Pflichtfelder und Fehlermeldungen: dunkleres Rot (6,5:1) */
.forminator-ui.forminator-custom-form .forminator-required,
.forminator-ui.forminator-custom-form .forminator-error-message {
	color: #b3203a !important;
}

.forminator-ui.forminator-custom-form .forminator-error-message {
	font-size: 0.875rem !important;
}

.diva-pflicht {
	color: #4f5256;
}

/* Kontaktkästen */
.diva-kontakt-box p {
	margin: 0;
}

.diva-kontakt-box > p:last-child {
	margin-top: 0.35rem;
}

.diva-sep {
	display: inline;
}

@media (max-width: 781px) {
	/* Öffnungszeiten auf dem Handy zweizeilig: „ | “ wird zum Zeilenumbruch */
	.diva-sep {
		display: block;
		height: 0;
		overflow: hidden;
	}

	/* „Boutique DIVA P. E.“: auf dem Handy einheitlich linksbündig */
	.wp-block-group.diva-kontakt-box--rechts {
		align-items: flex-start;
	}

	.diva-kontakt-box--rechts .has-text-align-right {
		text-align: left;
	}
}

/* Telefon und E-Mail: Tippfläche mindestens 44 px hoch */
@media (max-width: 781px), (pointer: coarse) {
	.diva-kontakt-box a[href^="tel:"],
	.diva-kontakt-box a[href^="mailto:"],
	.diva-fuss a[href^="tel:"],
	.diva-fuss a[href^="mailto:"],
	.diva-inhalt a[href^="tel:"],
	.diva-inhalt a[href^="mailto:"] {
		display: inline-block;
		padding-block: 0.55em;
	}
}

/* Karte: Höhe hängt am iFrame, damit unter dem Cookie-Platzhalter keine Lücke bleibt */
.diva-karte .wp-block-template-part {
	margin: 0;
}

.diva-map__rahmen {
	width: 100%;
	overflow: hidden;
}

.diva-map__rahmen > *,
.diva-map__rahmen iframe {
	display: block;
	width: 100% !important;
	height: clamp(300px, 60vw, 450px) !important; /* Complianz setzt sonst eigene Höhen */
	padding-top: 0 !important;
}

/* =========================================================
   11. Kopfbereich der Unterseiten, Navigation
   ========================================================= */
.wp-block-group.diva-header__bar {
	align-items: center;
	gap: 1rem;
}

.diva-header__links,
.diva-header__rechts {
	flex: 1 1 0;
	min-width: 0;
}

.diva-header__logo {
	flex: 0 0 auto;
}

.diva-header .wp-block-site-logo img {
	display: block;
}

/* Leere Navigation (Menü „Links“ hat derzeit keine Einträge): ausblenden,
   sonst öffnet der Menüknopf ein leeres Fenster. */
.wp-block-navigation:not(:has(.wp-block-navigation-item)) {
	display: none;
}

@media (max-width: 599px) {
	.diva-header__links:not(:has(.wp-block-navigation-item)) {
		display: none;
	}
}

.diva-nav {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.diva-nav .wp-block-navigation__container {
	gap: 0 1rem;
}

.diva-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.35rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1rem, 5vw, 2rem);
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding: 0.6rem 0;
}

@media (max-width: 599px) {
	.diva-header .diva-nav {
		font-size: 0.85rem;
	}

	.diva-header .diva-nav .wp-block-navigation__container {
		justify-content: flex-end;
		gap: 0 0.6rem;
	}
}

/* =========================================================
   12. Fußbereich
   ========================================================= */
.wp-block-group.diva-cta__zeile {
	align-items: center;
	gap: 1rem 2rem;
}

.diva-cta__zeile > p {
	flex: 1 1 18rem;
	margin: 0;
}

/* Schrift mindestens 24 px: weiß mit Lichthof gilt dann als große Schrift (3:1) */
.diva-cta__zeile > p.has-large-font-size {
	font-size: max(1.5rem, var(--wp--preset--font-size--large)) !important;
	line-height: 1.25;
}

@media (max-width: 599px) {
	.wp-block-group.diva-cta__zeile {
		justify-content: center;
	}

	.diva-cta__zeile > p.has-text-align-left {
		text-align: center;
	}
}

/* „Anrufen“: dunkler Knopf mit weißem Rand – auf jeder Stelle des Goldverlaufs lesbar */
.diva-anrufen .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	background: #141210;
	text-shadow: none;
}

.diva-anrufen .wp-block-button__link:hover {
	background: #fff !important;
	color: #000 !important; /* Farbklasse des Blocks ist !important */
}

/* Telefon als feine Linie (statt Emoji), nimmt die Schriftfarbe an */
.diva-anrufen .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.35em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.diva-fuss > .alignwide:first-child .wp-block-site-title {
	margin: 0;
}

.diva-fuss__adresse {
	margin-top: 0.5rem;
}

.diva-fuss__adresse p {
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

.diva-fuss__nav {
	margin-bottom: 0.75rem;
}

.wp-block-group.diva-fuss__zeile {
	align-items: center;
	gap: 0.5rem 1rem;
}

.diva-fuss__zeile p {
	margin: 0;
}

.diva-fuss .wp-block-social-links {
	gap: 0.25rem;
	margin: 0;
}

.diva-fuss .wp-block-social-link a {
	padding: 14px;
}

@media (max-width: 599px) {
	.wp-block-group.diva-fuss__zeile {
		flex-direction: column;
		justify-content: center;
	}

	.diva-fuss__zeile p a {
		display: inline-block;
		padding: 0.9em 0.25em;
	}

	/* Platz für die schwebenden Knöpfe am unteren Rand */
	.diva-fuss::after {
		content: "";
		display: block;
		height: 56px;
	}
}

/* =========================================================
   13. Unterseiten (Impressum, Datenschutz, Event-Seite, 404)
   ========================================================= */
.diva-inhalt {
	overflow-wrap: break-word;
}

.diva-inhalt :where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (max-width: 781px) {
	.diva-inhalt :where(p, li) {
		overflow-wrap: anywhere;
	}

	/* Event-Seite: Kästen mit Video und Galerie nutzen die volle Breite */
	.diva-inhalt .wp-block-group.has-background.is-layout-constrained > * {
		max-width: 100%;
	}
}

/* 404: Wegweiser zu den wichtigsten Zielen */
.wp-block-list.diva-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.75rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}

.diva-404-links li {
	margin: 0;
}

.diva-404-links a {
	display: inline-block;
	padding: 0.65rem 0.15rem; /* Tippfläche mind. 44 px */
	text-decoration-color: rgba(217, 185, 106, 0.8);
}

.diva-seite .wp-block-search {
	max-width: 32rem;
	margin-inline: auto;
}

.wp-block-search__inside-wrapper {
	border: 1px solid var(--diva-gold-hell);
	background: #fff;
}

.wp-block-search__input {
	min-height: 44px;
	border: 0;
	font-size: 16px;
	color: #111;
}

.wp-block-search__button {
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	background: var(--diva-gold);
	color: #000;
}

.diva-karte-beitrag a {
	color: inherit;
}

/* =========================================================
   14. Schwebende Knöpfe der Plugins (nur Lage/Größe)
   ========================================================= */
/* Nach-oben-Knopf (WPFront Scroll Top): über „Zustimmung verwalten“, nicht daneben */
#wpfront-scroll-top-container {
	right: 16px !important;
	bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(217, 185, 106, 0.85) !important;
	background: var(--diva-nacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7cf8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / 20px no-repeat !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7);
}

#wpfront-scroll-top-container img {
	opacity: 0 !important;
}

#wpfront-scroll-top-container:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--diva-fokus-dunkel), 0 10px 26px -10px rgba(0, 0, 0, 0.7);
}

/* Cookie-Hinweis (Complianz): Farben mit ausreichendem Kontrast */
:root:root {
	--cmplz_button_accept_background_color: #8a6510;
	--cmplz_button_accept_border_color: #8a6510;
	--cmplz_button_accept_text_color: #ffffff;
	--cmplz_hyperlink_color: #8a6510;
	--cmplz_slider_active_color: #8a6510;
	--cmplz_text_font_size: 14px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
}

.cmplz-blocked-content-notice {
	background: #1d1d1b !important;
	color: #fff !important;
}

/* Cookie-Hinweis (Complianz): Schließen-Kreuz groß genug zum Tippen */
.cmplz-cookiebanner .cmplz-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* =========================================================
   15. Knopf zum Anhalten/Abspielen der Hintergrundvideos
   ========================================================= */
.diva-video-toggle {
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(217, 185, 106, 0.85);
	border-radius: 50%;
	background: rgba(14, 12, 10, 0.72);
	color: #f3e3b5;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.diva-video-toggle:hover {
	background: var(--diva-gold-hell);
	color: #111;
}

/* Fokus auf Video: dunkel – weiß – dunkel, auf hellen wie dunklen Bildern sichtbar */
.diva-video-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--diva-fokus-dunkel), 0 0 0 8px var(--diva-fokus-dunkel);
}

.diva-video-toggle svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.diva-video-toggle__play,
.diva-video-toggle.is-angehalten .diva-video-toggle__pause {
	display: none;
}

.diva-video-toggle.is-angehalten .diva-video-toggle__play {
	display: block;
}

/* Im Kopfbereich: dezent unten rechts, auf Höhe des Scroll-Hinweises –
   über „Zustimmung verwalten“, nicht daneben */
.diva-video-toggle.diva-video-toggle--hero {
	top: auto;
	right: var(--hero-rand, 20px);
	bottom: calc(var(--hero-unten, 76px) + 8px);
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(10, 9, 8, 0.28);
	color: #fff;
	box-shadow: none;
}

.diva-video-toggle.diva-video-toggle--hero:hover {
	border-color: var(--diva-gold-hell);
	background: rgba(10, 9, 8, 0.55);
	color: #f3e3b5;
}

.diva-video-toggle--hero svg {
	width: 13px;
	height: 13px;
}

/* =========================================================
   15b. Handy: ruhige, randlose Gestaltung der Startseite
   Bild über die volle Breite, Text direkt darunter auf Creme, feine
   Goldlinien statt dicker Rahmen, ein Abstandsmaß, eine Schriftskala.
   Der Desktop bleibt unverändert.
   ========================================================= */
@media (max-width: 781px) {
	.diva-main--start {
		--diva-abstand: 3.5rem;  /* zwischen zwei Geschichten */
		--diva-einzug: 1.5rem;   /* Seitenabstand für Text */
		padding-top: 0;
	}

	/* Abschnitte ohne Seitenrand */
	.diva-main--start > .diva-section.diva-section:is(.diva-marken, .diva-willkommen, .diva-ueber, .diva-events, .diva-kontakt) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}

	.diva-main--start > .wp-block-cover.diva-banner {
		margin-bottom: 0 !important;
	}

	/* Bild und Text bilden eine Einheit: kein Spalt dazwischen */
	.diva-main--start .wp-block-columns.diva-row {
		gap: 0;
		margin: 0 0 var(--diva-abstand) !important;
	}

	.diva-main--start > .diva-section > :first-child {
		margin-top: 2.25rem !important;
	}

	/* Willkommen folgt direkt auf die Marken, nicht auf ein Banner */
	.diva-main--start > .diva-willkommen > :first-child {
		margin-top: 0 !important;
	}

	.diva-main--start .diva-row .wp-block-cover {
		box-shadow: none;
	}

	.wp-block-cover.diva-media--marke {
		min-height: min(125vw, 640px);
	}

	/* Tablet hochkant: stärkerer Zuschnitt – Köpfe im Bild behalten */
	@media (min-width: 600px) {
		.diva-media--marke > .wp-block-cover__image-background:not([data-object-position]) {
			object-position: 50% 6%;
		}
	}

	/* Marken-Logos auf Bildern: kleiner, Datei unverändert */
	.diva-main--start .diva-row .wp-block-cover .diva-marken-logo img {
		max-width: min(160px, 42vw);
		height: auto !important;
	}

	.diva-main--start .diva-row > .wp-block-column > .wp-block-cover + .wp-block-cover {
		margin-top: 0;
	}

	/* Textflächen: Creme, ohne Goldrahmen, ohne Schatten */
	.diva-main--start .diva-box {
		gap: 1rem;
		min-height: 0 !important;
		padding: 2.4rem var(--diva-einzug) 2.6rem !important;
		background-color: var(--diva-creme) !important;
		background-image: none !important;
		box-shadow: none !important;
		animation: none !important;
	}

	.diva-main--start .diva-box.gold-border::before {
		content: none;
	}

	.diva-main--start .diva-box > :is(h2, h3) {
		margin: 0 0 0.35rem;
		padding-bottom: 0.7rem;
		color: #1d1b18 !important;
		font-size: clamp(1.75rem, 7.6vw, 2.1rem) !important;
		font-weight: 400;
		line-height: 1.12;
		letter-spacing: 0;
		text-shadow: none;
		/* kurze Goldlinie unter der Überschrift */
		background: linear-gradient(var(--diva-gold), var(--diva-gold)) 0 100% / 2.5rem 1px no-repeat;
		-webkit-hyphens: manual;
		hyphens: manual;
		text-wrap: balance;
	}

	.diva-main--start .diva-box > :is(h2, h3) strong {
		font-weight: inherit;
	}

	.diva-main--start .diva-box p:not(.diva-kicker) {
		font-size: 1.0625rem;
		line-height: 1.7;
		color: #2a2622 !important;
	}

	.diva-main--start .diva-box p + p {
		margin-top: 0.15rem;
	}

	.diva-main--start .diva-kicker {
		font-size: 0.78rem;
		letter-spacing: 0.24em;
	}

	/* Knöpfe: schwarz, gesperrte Versalien */
	.diva-main--start .diva-btn .wp-block-button__link,
	.diva-main--start .forminator-ui.forminator-custom-form .forminator-button-submit {
		min-height: 52px;
		padding: 0 1.75rem !important;
		background: #1d1b18 !important;
		color: #fff !important;
		font-size: 0.78rem !important;
		font-weight: 500 !important;
		letter-spacing: 0.24em !important;
		box-shadow: none;
	}

	.diva-main--start .diva-btn .wp-block-button__link:hover,
	.diva-main--start .diva-btn .wp-block-button__link:focus-visible,
	.diva-main--start .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
		background: var(--diva-gold-text) !important; /* weiß darauf 5,3:1 */
		color: #fff !important;
		filter: none;
	}

	/* Banner: ruhigere Titelgröße, Goldlinie zwischen Titel und Untertitel */
	.diva-main--start .diva-banner__titel {
		font-size: clamp(2.25rem, 10.4vw, 2.75rem) !important;
		line-height: 1.04;
	}

	.diva-main--start .diva-banner__titel::after {
		content: "";
		display: block;
		width: 2.5rem;
		height: 1px;
		margin: 0.85rem auto 0.7rem;
		background: var(--diva-gold-hell);
	}

	/* Veranstaltungen: Einleitung mit Seitenabstand */
	.diva-main--start .diva-events__intro {
		max-width: 30rem;
		margin: 2.25rem auto 2.25rem !important;
		padding: 0 var(--diva-einzug);
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.diva-main--start .diva-events > .diva-row:first-of-type {
		margin-top: 0 !important;
	}

	/* Social Media: weißes Band – die Facebook-/Instagram-Kacheln verschmelzen damit */
	.diva-main--start > .diva-social {
		padding: 2.75rem var(--diva-einzug) 2.5rem !important;
		background: #fff; /* Facebook-/Instagram-Kacheln haben weißen Grund */
		color: #2a2622;
	}

	.diva-main--start > .diva-social > p {
		max-width: 26rem;
		margin-inline: auto;
		font-size: 1.0625rem;
		line-height: 1.6;
		text-wrap: balance;
	}

	.diva-social .efbl_feeds_holder.efbl_feeds_row .efbl-row-box {
		border-color: rgba(207, 156, 27, 0.5);
		box-shadow: none;
	}

	.diva-social__links img {
		width: min(100%, 170px) !important; /* Block setzt 230 px inline */
	}

	/* Kontakt: Team und Formular als eigene Flächen im gleichen Takt */
	.diva-main--start .diva-kontakt > .diva-box {
		margin: 0 0 var(--diva-abstand) !important;
	}

	.diva-main--start .diva-kontakt > .diva-box:first-child {
		margin-top: 2.25rem !important;
	}

	.diva-main--start .diva-kontakt .diva-karte {
		margin-top: 0 !important;
	}

	/* Fußbereich: Einladung dunkel mit Goldlinie, Knopf als feine Kontur */
	.wp-block-group.diva-cta.gold-bg {
		padding: 3.25rem var(--diva-einzug, 1.5rem) !important;
		background: #0e0c0a;
		border-top: 1px solid rgba(207, 156, 27, 0.6);
		border-bottom-color: rgba(255, 255, 255, 0.08) !important;
		animation: none;
	}

	.wp-block-group.diva-cta__zeile {
		flex-direction: column;
		gap: 1.6rem;
	}

	.diva-cta__zeile > p.has-large-font-size {
		flex: 0 0 auto;
		max-width: 22rem;
		font-size: 1.6rem !important;
		line-height: 1.22;
		text-shadow: none;
		text-wrap: balance;
	}

	.diva-cta .diva-anrufen {
		text-shadow: none;
	}

	.diva-cta .diva-anrufen .wp-block-button__link {
		min-height: 52px;
		padding: 0 2rem !important;
		border: 1px solid var(--diva-gold-hell) !important;
		background: transparent;
		color: #f3e3b5 !important;
		font-size: 0.8rem;
		font-weight: 500;
		letter-spacing: 0.26em;
		text-transform: uppercase;
	}

	.diva-cta .diva-anrufen .wp-block-button__link:hover {
		background: var(--diva-gold-hell) !important;
		color: #111 !important;
	}

	.wp-block-group.diva-fuss {
		padding: 3.5rem var(--diva-einzug, 1.5rem) 2.5rem !important;
	}

	.diva-fuss .wp-block-site-title {
		font-size: 1.15rem !important;
		letter-spacing: 0.02em;
		text-align: center;
		text-wrap: balance;
	}

	.diva-fuss__adresse::before {
		content: "";
		display: block;
		width: 2.5rem;
		height: 1px;
		margin: 1.25rem auto 1.5rem;
		background: var(--diva-gold);
	}

	.diva-fuss__adresse p {
		font-size: 1rem;
		line-height: 1.75;
		color: rgba(255, 255, 255, 0.88) !important;
	}

	.diva-fuss a {
		text-decoration-color: rgba(217, 185, 106, 0.75);
	}

	.diva-fuss__nav {
		font-size: 0.8rem;
		letter-spacing: 0.2em;
	}

	.diva-fuss__zeile .has-x-small-font-size {
		color: rgba(255, 255, 255, 0.72);
		font-size: 0.8rem !important;
		letter-spacing: 0.04em;
	}
}

/* =========================================================
   16. Einblenden beim Scrollen, reduzierte Bewegung
   ========================================================= */
.diva-js .diva-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.diva-js .diva-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Knopf „Hintergrundvideos anhalten“ hält auch die Gold-Animationen an */
.diva-bewegung-aus .gold-border::before,
.diva-bewegung-aus .gold-bg {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.gold-border::before,
	.gold-bg {
		animation: none;
	}

	.diva-js .diva-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Scroll-Hinweis steht still: Linie mit Pfeilspitze */
	.diva-hero__arrow a::after {
		content: none;
	}
}