/*
 * Muster „360°-Rundgänge als Karten“ (patterns/seite-15-rundgaenge.php, 22.10.2026).
 *
 * Kopf mit Frage (H2) und Zitierabsatz, darunter je Rundgang eine Karte: Foto, Art (Dachzeile), Titel, eine
 * Zeile, Knopf „Rundgang starten“. Die große Variante (Klasse ps-rundgaenge--gross, Haus und Wellness) steht
 * auf einer Bühne wie die Bild-Text-Module (Heu, Goldwinkel). Micro-Interaction: Beim Überfahren hebt sich
 * die Karte und das Foto schwenkt langsam seitlich wie ein Blick im Raum (Hinweis auf 360°); das Symbol
 * dreht sich. rundgang.js öffnet die Vollbild-Ansicht, lädt das iframe erst dann und macht die ganze
 * Karte klickbar; ohne JavaScript führt der Knopf zu vivis3d (neuer Tab).
 */
.ps-rundgaenge.wp-block-group { display: grid; gap: clamp(32px, 4vw, 52px); padding-block: clamp(56px, 8vw, 112px); }
.ps-inhalt > .ps-rundgaenge { margin-block: 0; }
.ps-rundgaenge > * { margin-block: 0; }
.ps-rundgaenge + .ps-rundgaenge { padding-top: clamp(16px, 3vw, 40px); }
.ps-rundgaenge__kopf.wp-block-group { display: grid; gap: 16px; max-width: 780px; }
.ps-rundgaenge__kopf > * { margin: 0; }
.ps-rundgaenge__kopf h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
.ps-rundgaenge__kopf p:not(.is-style-ps-dachzeile, .ps-zitierabsatz) { color: var(--text-muted); font-size: var(--fs-small); }

/* Raster: kleine Karten (Zimmer, Ferienwohnungen) bzw. zwei große Karten */
.ps-rundgaenge__raster.wp-block-group {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
	gap: 24px;
}
.ps-rundgaenge--gross .ps-rundgaenge__raster.wp-block-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(24px, 3vw, 40px); }
/* Bühne hinter den großen Karten: Heu, unten versetzt, zur linken Außenseite bis zum Bildschirmrand; Goldwinkel oben rechts */
.ps-rundgaenge--gross .ps-rundgaenge__raster:not(.block-editor-block-list__block)::before,
.ps-rundgaenge--gross .ps-rundgaenge__raster:not(.block-editor-block-list__block)::after { content: ""; position: absolute; pointer-events: none; }
.ps-rundgaenge--gross .ps-rundgaenge__raster:not(.block-editor-block-list__block)::before {
	z-index: -1;
	inset: 22% 10% calc(-1 * clamp(28px, 4vw, 56px)) 0;
	border-image: linear-gradient(var(--heu) 0 0) fill 0 / 0 / 0 0 0 100vw;
}
.ps-rundgaenge--gross .ps-rundgaenge__raster:not(.block-editor-block-list__block)::after {
	z-index: 1;
	top: calc(-1 * clamp(12px, 1.3vw, 18px));
	right: calc(-1 * clamp(12px, 1.3vw, 18px));
	width: clamp(44px, 4.6vw, 72px);
	height: clamp(44px, 4.6vw, 72px);
	background:
		linear-gradient(var(--sonne-500) 0 0) right top / 100% 1.5px no-repeat,
		linear-gradient(var(--sonne-500) 0 0) right top / 1.5px 100% no-repeat;
}

/* Karte */
.ps-rundgang.wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 0 24px;
	background: var(--weiss);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}
/* Übergänge: Einblenden (seite.js, ps-rv mit transform/opacity) und Heben beim Überfahren (translate) getrennt */
.ps-rundgaenge .ps-rundgang.wp-block-group {
	transition: opacity 800ms var(--ease-out) var(--ps-d, 0ms), transform 1000ms var(--ease-out) var(--ps-d, 0ms), translate 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
}
.ps-rundgang > * { margin: 0 22px; }
.ps-rundgang > .wp-block-image { position: relative; margin: 0 0 12px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--fels-200); }
.ps-rundgaenge--gross .ps-rundgang > .wp-block-image { aspect-ratio: 16 / 10; }
.ps-rundgang > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ps-rundgang .is-style-ps-dachzeile { color: var(--text-accent); font: 600 var(--fs-eyebrow)/1.2 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.ps-rundgang h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--text-strong); }
.ps-rundgaenge--gross .ps-rundgang h3 { font-size: var(--fs-h3); }
.ps-rundgang h3 + p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.55; }
.ps-rundgang .wp-block-buttons { margin-top: auto; padding-top: 12px; }
.ps-rundgang .wp-block-button__link { gap: 10px; }
.ps-rundgang .wp-block-button__link .ps-i--rotate-3d { transition: transform 900ms var(--ease-out); }

/* 360°-Marke im Foto (Symbol, dekorativ) */
.ps-rundgang__marke {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(252, 250, 245, .92);
	color: var(--tanne-700);
	box-shadow: var(--shadow-sm);
	pointer-events: none;
}
.ps-rundgang__marke::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dashed var(--sonne-500);
	border-radius: 50%;
	transition: transform 1600ms var(--ease-out);
}

/* Überfahren, Fokus: Karte hebt sich, Foto schwenkt (360°), Ring und Symbol drehen */
.ps-js .ps-rundgang { cursor: pointer; }
.ps-rundgang:is(:hover, :focus-within) { box-shadow: var(--shadow-md); translate: 0 -4px; }
.ps-rundgang:focus-within { outline: 2px solid var(--sonne-500); outline-offset: 3px; }
.ps-rundgang:focus-within .wp-block-button__link:focus-visible { outline: none; }
.ps-rundgang:is(:hover, :focus-within) .ps-rundgang__marke::before { transform: rotate(180deg); }
.ps-rundgang:is(:hover, :focus-within) .wp-block-button__link .ps-i--rotate-3d { transform: rotate(-30deg); }
.ps-bw .ps-rundgang > .wp-block-image img { transform: scale(1.001); transition: transform var(--dur-image) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.ps-bw .ps-rundgang:is(:hover, :focus-within) > .wp-block-image img { animation: ps-rg-schwenk 7s var(--ease-in-out) infinite alternate; }
}
@keyframes ps-rg-schwenk {
	0% { transform: scale(1.12) translateX(0); }
	30% { transform: scale(1.12) translateX(-3.6%); }
	100% { transform: scale(1.12) translateX(3.6%); }
}

/* Reduzierte Bewegung: kein Schwenk, kein Heben */
@media (prefers-reduced-motion: reduce) {
	.ps-rundgang, .ps-rundgang:is(:hover, :focus-within) { transform: none !important; translate: none !important; }
	.ps-rundgang img, .ps-rundgang__marke::before, .ps-rundgang .ps-i { animation: none !important; transform: none !important; }
	.ps-rundgaenge__raster::before, .ps-rundgaenge__raster::after { transition: none !important; clip-path: none !important; }
}

/* Erscheinen beim Scrollen der großen Variante (rundgang.js): Bühne wischt herein, Winkel zeichnet sich */
.ps-bw .ps-rundgaenge--gross.ps-rg-rv .ps-rundgaenge__raster::before { clip-path: inset(0 0 0 -100vw); transition: clip-path 1500ms var(--ease-in-out) 120ms; }
.ps-bw .ps-rundgaenge--gross.ps-rg-rv:not(.ist-sichtbar) .ps-rundgaenge__raster::before { clip-path: inset(0 100% 0 -100vw); }
.ps-bw .ps-rundgaenge--gross.ps-rg-rv .ps-rundgaenge__raster::after { transition: background-size 900ms var(--ease-out) 900ms; }
.ps-bw .ps-rundgaenge--gross.ps-rg-rv:not(.ist-sichtbar) .ps-rundgaenge__raster::after { background-size: 0 1.5px, 1.5px 0; }

/* Vollbild-Ansicht eines Rundgangs (Dialog aus vollbild.js) */
.ps-vollbild--rundgang .ps-vollbild__buehne iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--tanne-950);
	opacity: 0;
	transition: opacity 700ms var(--ease-out);
}
.ps-vollbild--rundgang.ist-geladen .ps-vollbild__buehne iframe { opacity: 1; }

@media (max-width: 781px) {
	.ps-rundgaenge--gross .ps-rundgaenge__raster:not(.block-editor-block-list__block)::before { inset: 10% 6% -28px 0; }
	.ps-rundgang > * { margin: 0 18px; }
	.ps-rundgang__marke { width: 40px; height: 40px; left: 10px; bottom: 10px; }
}

/* Knopf „Rundgang starten“ als Umriss (bestand.css färbt Buttons im Inhalt sonst Tanne 600, gedacht für alte Inhalte) */
.ps-inhalt .ps-rundgang .wp-block-button.is-style-ps-umriss .wp-block-button__link {
	background-color: transparent;
	color: var(--tanne-700);
	border: 1.5px solid var(--tanne-600);
}
.ps-inhalt .ps-rundgang .wp-block-buttons { margin-top: auto; }
/* Erster Abschnitt direkt unter dem Seitenkopf: kein doppelter Abstand */
.ps-inhalt > .ps-rundgaenge:first-child { padding-top: clamp(8px, 2vw, 24px); }

/* Mobil: kleine Karten quer (Foto links, Text rechts, Knopf darunter), halbiert die Länge der Seite */
@media (max-width: 599px) {
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgaenge__raster.wp-block-group { gap: 14px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang.wp-block-group {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-auto-rows: auto;
		align-content: start;
		column-gap: 16px;
		row-gap: 4px;
		padding: 12px 12px 14px;
	}
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang > * { grid-column: 2; margin: 0; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang > .wp-block-image { grid-column: 1; grid-row: 1 / span 3; align-self: start; aspect-ratio: 1; margin: 0; border-radius: var(--radius-image); }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang h3 { font-size: 19px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang h3 + p { font-size: 14px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang .wp-block-buttons { grid-column: 1 / -1; padding-top: 10px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang .wp-block-button { width: 100%; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang .wp-block-button__link { width: 100%; min-height: 44px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang__marke { width: 32px; height: 32px; left: 6px; bottom: 6px; }
	.ps-rundgaenge:not(.ps-rundgaenge--gross) .ps-rundgang__marke svg { width: 16px; height: 16px; }
}

/* Hinweis vor dem Laden (rundgang.js, ohne Einwilligung „Externe Medien“): Text und Knopf mittig auf der dunklen Bühne */
.ps-rundgang__zustimmung { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 24px; padding: clamp(20px, 5vw, 48px); text-align: center; color: var(--schnee); }
.ps-rundgang__zustimmung p { max-width: 58ch; margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.ps-rundgang__zustimmung a { color: var(--sonne-200); text-decoration: underline; text-underline-offset: 3px; }
.ps-rundgang__laden { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 28px; border: 0; border-radius: var(--radius-button, 999px); background: var(--sonne-500); color: var(--tanne-950); font: 600 var(--fs-small)/1.2 var(--font-sans); letter-spacing: 0.04em; cursor: pointer; transition: background-color 240ms var(--ease-out); }
.ps-rundgang__laden:hover { background: var(--sonne-300, var(--sonne-500)); }
.ps-rundgang__laden:focus-visible { outline: 2px solid var(--schnee); outline-offset: 3px; }