/*
Theme Name: vollbewegt
Description: Child-Theme von Twenty Twenty-Five für vollbewegt.at (Sarah-Nikita Kröger: Artistin, Luftakrobatik, Aerial Hoop, Gesundheitstraining). Gestaltungsmotiv „Luftring“.
Template: twentytwentyfive
Version: 1.2.7
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: vollbewegt
License: GNU General Public License v2 or later
*/

/* Kopfzeile bleibt beim Scrollen sichtbar (sticky muss am Template-Teil sitzen) */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
/* Hintergrund mit Weichzeichner auf ::before: backdrop-filter direkt an .vb-header
   würde das Vollbild-Menü (position: fixed) auf die Höhe der Kopfzeile beschneiden */
.vb-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.vb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vb-logo a { text-decoration: none; }
.vb-logo .vb-logo-dot { color: var(--wp--preset--color--accent-1); }

/* Navigation: aktuelle Seite markieren */
.vb-header .wp-block-navigation-item.current-menu-item > a,
.vb-header .wp-block-navigation-item a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Kleine Überzeile über Überschriften */
.vb-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* Karten */
.vb-card {
	background: var(--wp--preset--color--base);
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 2px rgb(30 42 35 / 6%), 0 8px 24px rgb(30 42 35 / 6%);
}
.vb-card .wp-block-image { margin: 0; }
.vb-card .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Bilder mit runden Ecken */
.vb-rounded img { border-radius: 20px; }

/* Stundenplan */
.vb-schedule { border-top: 1px solid var(--wp--preset--color--accent-6); }
.vb-schedule > .wp-block-group {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.vb-badge {
	display: inline-block;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}
.vb-badge--frei { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--base); }
.vb-badge--voll { background: #F3E8E4; color: #8A3B22; }

/* Häkchen-Liste */
.vb-checklist { list-style: none; padding-left: 0; }
.vb-checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.vb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* FAQ (Details-Block) */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 1rem 0;
}
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}
.wp-block-details[open] summary { margin-bottom: 0.6rem; }

/* Zitat / Motto */
.vb-motto {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	line-height: 1.25;
}

/* Hero-Cover: Text lesbar halten */
.vb-hero .wp-block-cover__inner-container { max-width: 1200px; }

/* Tastaturfokus gut sichtbar (WCAG 2.2, 1.4.11: mindestens 3:1).
   Dunkelgrün (accent-2) hat auf Weiß 5,05:1, auf Creme 4,75:1 und auf Hellgrün 4,46:1.
   Der weiße Innenring (box-shadow füllt den Abstand) hält den Fokus auch auf dunklen Flächen
   (Dunkel, Dunkelgrün, Grau) und auf Bildern sichtbar: Weiß hat dort 14,9:1 bzw. 5,1:1 und 5,9:1. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base);
}

/* Listen ohne Aufzählungszeichen (Fußzeile) */
.vb-plainlist { list-style: none; }

/* Fußzeile: Logo in Weiß */
footer .vb-logo a { color: var(--wp--preset--color--base); }
footer .vb-footer-titel { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; line-height: 1.15; }

/* Menü: bis 1279 px als Hamburger-Menü (sonst bricht die Zeile um, seit „Ferien-Camp“ im Menü steht) */
@media (min-width: 600px) and (max-width: 1279px) {
	.vb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.vb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Volle Menüzeile: etwas enger, damit 7 Einträge ab 1280 px in eine Zeile passen */
@media (min-width: 1280px) {
	.vb-header .wp-block-navigation .wp-block-navigation__container { gap: 1.25rem; }
	.vb-header .wp-block-navigation .wp-block-navigation-item { font-size: 1.0625rem; }
}

/* Menü-Knopf (Handy/Tablet): umrandet, mit Beschriftung „Menü“ */
.vb-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.8rem 0.4rem 0.55rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
}
.vb-header .wp-block-navigation__responsive-container-open::after { content: "Menü"; }
.vb-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
.vb-header .wp-block-navigation__responsive-container-open:hover,
.vb-header .wp-block-navigation__responsive-container-open:focus-visible {
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
}

/* Geöffnetes Menü: große Einträge mit Trennlinien */
.vb-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right, 1.5rem);
}
.vb-header .wp-block-navigation__responsive-container-close svg { width: 34px; height: 34px; }
.vb-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60) !important;
}
.vb-header .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}
.vb-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.vb-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0 !important;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
}
.vb-header .is-menu-open .wp-block-navigation-item.current-menu-item > a,
.vb-header .is-menu-open .wp-block-navigation-item a[aria-current="page"] {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

/* Farbige Abschnitte ohne weiße Lücken aneinanderreihen */
.wp-block-post-content > .alignfull,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}
.wp-site-blocks > main { margin-block-end: 0; }

/* =========================================================
   Gestaltungsmotiv „Luftring“ (persönliche Note)
   ========================================================= */

/* Handschrift für persönliche Akzente */
.vb-script {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent-2);
	transform: rotate(-2deg);
	transform-origin: left center;
	margin-bottom: 0.2em;
}
.has-text-align-center.vb-script { transform-origin: center; }
.has-contrast-background-color .vb-script { color: var(--wp--preset--color--accent-1); }
.has-accent-2-background-color .vb-script { color: var(--wp--preset--color--base); }

/* Foto im Ring – wie ein Aerial Hoop, mit Aufhängung */
.wp-block-image.vb-ring {
	position: relative;
	max-width: 440px;
	margin: 72px auto 24px;
}
.wp-block-image.vb-ring img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	border-radius: 50%;
}
.wp-block-image.vb-ring::before {
	content: "";
	position: absolute;
	inset: -16px;
	border: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 50%;
	pointer-events: none;
}
.wp-block-image.vb-ring::after {
	content: "";
	position: absolute;
	left: calc(50% - 1px);
	top: -72px;
	width: 2px;
	height: 56px;
	background: var(--wp--preset--color--contrast);
	opacity: 0.7;
}

/* Seitenkopf der Unterseiten: Welle als Übergang */
.vb-hero {
	position: relative;
	padding-bottom: calc(var(--wp--preset--spacing--80) + 40px) !important;
}
.vb-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 60px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 36C160 8 320 0 480 14s320 44 480 42 320-30 480-40v48H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* Kurse & Termine am Handy: Kurs-Auswahl gleich sichtbar. Nur die H1 bleibt im Seitenkopf,
   „Sei dabei! / Termine & Anmeldung“ nur für Screenreader (wiederholt die H1). */
@media (max-width: 781px) {
	.vb-hero:has(+ .vb-buchung-abschnitt) {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: calc(var(--wp--preset--spacing--40) + 24px) !important;
	}
	.vb-hero:has(+ .vb-buchung-abschnitt)::after { height: 28px; }
	.vb-hero:has(+ .vb-buchung-abschnitt) > :not(h1) { display: none; }
	.vb-hero:has(+ .vb-buchung-abschnitt) > h1 { margin: 0; }
	.vb-buchung-abschnitt { padding-top: 0 !important; }
	.vb-buchung-abschnitt > .wp-block-group > .vb-script:first-child { display: none; }
	.vb-buchung-abschnitt > .wp-block-group > h2:first-of-type {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Startseite: großer Einstieg mit Foto und Ring über der Kante */
.vb-hero-home {
	position: relative;
	overflow: hidden;
	margin-block-start: 0 !important;
	gap: 0 !important;
	padding: 0 !important; /* WordPress setzt bei Spalten mit Hintergrund sonst Innenabstand */
}
.vb-hero-home > .wp-block-column:first-child {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) var(--wp--preset--spacing--80) max(var(--wp--style--root--padding-left, 1.5rem), calc((100vw - 1200px) / 2));
	position: relative;
	z-index: 2;
}
.vb-hero-home > .wp-block-column:last-child {
	align-self: stretch;
	position: relative;
	min-height: clamp(460px, 80vh, 760px);
}
.vb-hero-home .vb-fill { position: absolute; inset: 0; margin: 0; }
.vb-hero-home .vb-fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	display: block;
}
/* H1 = Suchbegriff als Überzeile, der Slogan darunter sieht aus wie die frühere H1 */
.vb-hero-home .vb-hero-h1 {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-1);
	margin-block-end: 0;
}
.vb-hero-home .vb-hero-slogan {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: clamp(2.8rem, 1.8rem + 4vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin-block-start: var(--wp--preset--spacing--30);
}
.vb-hero-home::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: min(30vw, 400px);
	aspect-ratio: 1;
	left: calc(55% + min(8vw, 110px));
	top: 50%;
	transform: translate(-50%, -50%);
	border: 4px solid var(--wp--preset--color--accent-1);
	border-radius: 50%;
	pointer-events: none;
}
.vb-hero-home .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); }
@media (max-width: 1099px) {
	.vb-hero-home::after { display: none; }
}
@media (max-width: 781px) {
	.vb-hero-home > .wp-block-column:first-child {
		padding: var(--wp--preset--spacing--70) var(--wp--style--root--padding-right, 1.5rem);
	}
	.vb-hero-home > .wp-block-column:last-child { min-height: 0; }
	.vb-hero-home .vb-fill { position: static; }
	.vb-hero-home .vb-fill img { aspect-ratio: 3 / 4; height: auto; object-position: 50% 8%; }
	/* Foto eingebunden statt angehängt: oben fließt das Dunkel in einer Welle hinein,
	   unten Welle ins Weiß, der grüne Ring wie am PC über der Kante */
	.vb-hero-home > .wp-block-column:last-child::before,
	.vb-hero-home > .wp-block-column:last-child::after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		height: 48px;
		pointer-events: none;
	}
	.vb-hero-home > .wp-block-column:last-child::before {
		top: -1px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%231E2A23' d='M0 0h1440v22C1280 46 1120 60 960 52S640 8 480 10 160 50 0 30z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
	}
	.vb-hero-home > .wp-block-column:last-child::after {
		bottom: -1px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 36C160 8 320 0 480 14s320 44 480 42 320-30 480-40v48H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	}
	.vb-hero-home::after {
		display: block;
		z-index: 2;
		width: min(46vw, 210px);
		left: auto;
		right: max(-10vw, -46px);
		top: auto;
		bottom: calc(133.33vw - min(26vw, 150px));
		transform: none;
		border-width: 3px;
	}
}

/* Zitat-Band */
.vb-quote-big {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	font-weight: 600;
	line-height: 1.15;
}

/* Grundsätze: Handschrift groß */
.vb-motto-script {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	font-weight: 600;
	line-height: 1.2;
}

/* Wochenprogramm */
.vb-slot { gap: 1.25rem !important; }
.vb-day {
	flex: 0 0 auto;
	width: 3.4rem;
	height: 3.4rem;
	margin: 0 !important;
	display: grid;
	place-items: center;
	border: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 1rem;
	background: var(--wp--preset--color--base);
}
/* Uhrzeit statt Wochentag (Aerial Hoop Camp) */
.vb-day--zeit { width: 4.2rem; height: 4.2rem; font-size: 0.9rem; }
.vb-slot__body { flex: 1 1 14rem; }
.vb-slot__body > * { margin: 0 !important; }
.vb-slot__meta { color: var(--wp--preset--color--accent-4); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 600px) {
	.vb-slot .vb-badge { margin-left: 4.65rem !important; }
}

/* Startseite: Aktuelle Kurse als Karten mit Tages-Ring; eigene Kurse ganz anklickbar (Link im Kursnamen) */
.vb-kurse__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60) !important;
}
@media (min-width: 1000px) {
	.vb-kurse__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vb-kurse__liste > * { margin: 0 !important; }
.vb-kurs {
	position: relative;
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.4rem 1.4rem 1.5rem;
	border-radius: 24px;
	background: var(--wp--preset--color--accent-5);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.vb-kurs > * { margin: 0 !important; }
.vb-kurs .vb-day { width: 3.1rem; height: 3.1rem; font-size: 0.95rem; }
.vb-kurs__text { padding-top: 0.3rem; }
.vb-kurs__text { flex: 1 1 auto; min-width: 0; }
.vb-kurs__text > * { margin: 0 !important; }
.vb-kurs__zeit {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-2);
	letter-spacing: 0.02em;
}
.vb-kurs__name {
	margin-top: 0.2rem !important;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem) !important;
	line-height: 1.3;
}
.vb-kurs__name a { color: inherit; text-decoration: none; }
.vb-kurs__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vb-kurs__ort {
	margin-top: 0.35rem !important;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.vb-kurs__mehr {
	margin-top: 0.8rem !important;
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.vb-kurs__mehr::after { content: " →"; display: inline-block; transition: transform 0.25s ease; }
.vb-kurs.is-link { background: var(--wp--preset--color--accent-3); }
@media (max-width: 599px) {
	.vb-kurse__liste { gap: 0.75rem; }
	.vb-kurs { gap: 0.9rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 20px; }
	.vb-kurs .vb-day { width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
	.vb-kurs__text { padding-top: 0.15rem; }
}
.vb-kurs.is-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(30 42 35 / 0.1); }
.vb-kurs.is-link:hover .vb-kurs__mehr::after { transform: translateX(4px); }
.vb-kurs.is-link:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }
.vb-kurs.is-link a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
	.vb-kurs, .vb-kurs__mehr::after { transition: none; }
	.vb-kurs.is-link:hover { transform: none; }
}

/* Kopfzeile: Instagram und Button */
.vb-header .wp-block-social-links { margin: 0; }
.vb-header .wp-block-button__link { padding: 0.55rem 1.2rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 599px) {
	.vb-header .vb-header-cta { display: none; }
}

/* Angebot: vier Ringe hängen an einer Stange und schwingen leicht */
.vb-hoops {
	position: relative;
	padding-top: 6px;
}
.vb-hoops::before {
	content: "";
	position: absolute;
	top: 0;
	left: 6%;
	right: 6%;
	height: 5px;
	border-radius: 3px;
	background: var(--wp--preset--color--contrast);
}
.vb-hoop {
	position: relative;
	text-align: center;
}
.vb-hoop > * { margin-left: auto; margin-right: auto; }
.vb-hoop p:not(.vb-hoop__more) {
	max-width: 30ch;
	color: var(--wp--preset--color--accent-4);
}
.wp-block-image.vb-hoop__ring {
	--rope: 44px;
	position: relative;
	width: min(80%, 250px);
	margin-top: calc(var(--rope) + 18px);
	margin-bottom: 40px;
	transform-origin: 50% calc(-1 * var(--rope) - 18px);
	animation: vb-sway 7s ease-in-out infinite;
}
.vb-hoops > .wp-block-column:nth-child(2) .vb-hoop__ring { --rope: 104px; animation-delay: -2.3s; }
.vb-hoops > .wp-block-column:nth-child(3) .vb-hoop__ring { --rope: 76px; animation-delay: -4.6s; }
.vb-hoops > .wp-block-column:nth-child(4) .vb-hoop__ring { --rope: 56px; animation-delay: -1.2s; }
.wp-block-image.vb-hoop__ring img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	transition: transform 0.4s ease;
}
.vb-hoops > .wp-block-column:nth-child(2) .vb-hoop__ring img { object-position: 50% 30%; }
.wp-block-image.vb-hoop__ring::before {
	content: "";
	position: absolute;
	inset: -14px;
	border: 5px solid var(--wp--preset--color--accent-1);
	border-radius: 50%;
	pointer-events: none;
}
.wp-block-image.vb-hoop__ring::after {
	content: "";
	position: absolute;
	left: calc(50% - 1px);
	top: calc(-1 * var(--rope) - 18px);
	width: 2px;
	height: calc(var(--rope) + 4px);
	background: var(--wp--preset--color--contrast);
}
/* Handschriftlicher Aufkleber am Ring */
.wp-block-image.vb-hoop__ring figcaption {
	position: absolute;
	right: -18%;
	bottom: 2%;
	margin: 0;
	padding: 0.15em 0.75em 0.25em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-5);
	border: 2px solid var(--wp--preset--color--contrast);
	box-shadow: 3px 3px 0 var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--caveat);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	transform: rotate(-7deg);
}
.vb-hoops > .wp-block-column:nth-child(2) figcaption { right: auto; left: -16%; transform: rotate(6deg); }
.vb-hoops > .wp-block-column:nth-child(3) figcaption { transform: rotate(-4deg); }
.vb-hoops > .wp-block-column:nth-child(4) figcaption { right: auto; left: -16%; transform: rotate(4deg); }
.vb-hoop h3 { margin-top: 0; }
/* Ganze Karte klickbar */
.vb-hoop__more a {
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.vb-hoop__more a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.vb-hoop__more a::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.25s ease; }
.vb-hoop:hover .vb-hoop__more a::after { transform: translateX(5px); }
.vb-hoop:hover .vb-hoop__ring { animation: vb-swing 1.4s ease-in-out; }
.vb-hoop:hover .vb-hoop__ring img { transform: scale(1.04); }
@keyframes vb-sway {
	0%, 100% { transform: rotate(-1.2deg); }
	50% { transform: rotate(1.2deg); }
}
@keyframes vb-swing {
	0% { transform: rotate(0); }
	20% { transform: rotate(5deg); }
	45% { transform: rotate(-3.5deg); }
	70% { transform: rotate(1.8deg); }
	100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-image.vb-hoop__ring,
	.vb-hoop:hover .vb-hoop__ring { animation: none; }
}
/* Tablet: zwei Reihen zu je zwei Ringen */
@media (min-width: 782px) and (max-width: 1099px) {
	.vb-hoops.wp-block-columns { flex-wrap: wrap !important; row-gap: var(--wp--preset--spacing--50); }
	.vb-hoops > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--60) / 2) !important; flex-grow: 0; }
	.vb-hoops::before { display: none; }
	.vb-hoops > .wp-block-column .vb-hoop__ring { --rope: 36px !important; }
}
@media (max-width: 781px) {
	.vb-hoops::before { display: none; }
	.vb-hoops > .wp-block-column + .wp-block-column { margin-top: var(--wp--preset--spacing--50); }
	.vb-hoops > .wp-block-column .vb-hoop__ring { --rope: 36px !important; }
}

/* „Kontakt“ steht nur im aufgeklappten Menü (sonst gibt es den Kontakt-Knopf) */
.vb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .vb-nav-kontakt { display: none; }