/*
 * Muster „Webcam-Bild“ (patterns/seite-14-webcam.php, 22.10.2026).
 *
 * Das aktuelle Bild der Kamera groß im Rahmen, auf einer Bühne wie die Bild-Text-Module (Variante „Bühne“):
 * Fläche in Heu hinter dem Bild, tiefer gesetzt und zur linken Außenseite bis zum Bildschirmrand
 * (border-image-outset: reine Malfläche, kein seitliches Scrollen), Goldwinkel an der oberen rechten Ecke.
 * Darunter die Leiste mit Aufnahmezeit und den Knöpfen. webcam.js setzt Zeit, Ring (nächste Prüfung),
 * Überblenden beim neuen Bild und die Vollbild-Ansicht; ohne JavaScript steht der Hinweissatz da, das Bild
 * und „Vollbild“ öffnen die Bilddatei, „Bild aktualisieren“ lädt die Seite neu.
 */
.ps-inhalt > .ps-webcam {
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
	margin-block: 0;
}
.ps-webcam.wp-block-group {
	--ps-wc-y: clamp(28px, 4.4vw, 64px);
	--ps-wc-ecke: clamp(44px, 4.6vw, 72px);
	--ps-wc-abstand: clamp(12px, 1.3vw, 18px);
	position: relative;
	isolation: isolate;
	display: grid;
	gap: clamp(36px, 4.4vw, 64px);
	padding: clamp(8px, 2vw, 24px) max(var(--gutter), calc((100% - var(--container)) / 2)) clamp(64px, 8.5vw, 120px);
}
.ps-webcam > * { margin-block: 0; }

/* Rahmen und Bild */
.ps-webcam__bild.wp-block-image { position: relative; margin: 0; }
.ps-webcam__bild a {
	position: relative;
	display: block;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--tanne-900);
	box-shadow: var(--shadow-md);
	cursor: zoom-in;
}
.ps-webcam__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Bühne und Goldwinkel (dekorativ, im Block-Editor ausgenommen) */
.ps-webcam__bild:not(.block-editor-block-list__block)::before,
.ps-webcam__bild:not(.block-editor-block-list__block)::after { content: ""; position: absolute; pointer-events: none; }
.ps-webcam__bild:not(.block-editor-block-list__block)::before {
	z-index: -1;
	inset: 16% 16% calc(-1 * var(--ps-wc-y)) 0;
	border-image: linear-gradient(var(--heu) 0 0) fill 0 / 0 / 0 0 0 100vw;
}
.ps-webcam__bild:not(.block-editor-block-list__block)::after {
	z-index: 1;
	top: calc(-1 * var(--ps-wc-abstand));
	right: calc(-1 * var(--ps-wc-abstand));
	width: var(--ps-wc-ecke);
	height: var(--ps-wc-ecke);
	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;
}

/* Neues Bild: liegt über dem alten und blendet ein (webcam.js), dazu eine Linie in Sonne am unteren Rand */
.ps-webcam__neu-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ps-webcam__neu-bild.ist-da { opacity: 1; transition: opacity 1200ms var(--ease-out), transform 2400ms var(--ease-out); }
.ps-bw .ps-webcam__neu-bild { transform: scale(1.025); }
.ps-bw .ps-webcam__neu-bild.ist-da { transform: none; }
.ps-webcam__blende {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--sonne-400);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.ps-bw .ps-webcam__blende.ist-an { animation: ps-wc-blende 1600ms var(--ease-in-out) both; }
@keyframes ps-wc-blende { 0% { transform: scaleX(0); transform-origin: left center; } 55% { transform: scaleX(1); transform-origin: left center; } 56% { transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } }

/* Lupe beim Überfahren (nur mit JavaScript eingefügt, rein dekorativ) */
.ps-webcam__lupe {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(20, 38, 30, .62);
	color: var(--schnee);
	opacity: 0;
	transform: translateY(6px) scale(.92);
	transition: opacity var(--dur-base) var(--ease-out), transform 420ms var(--ease-out);
	pointer-events: none;
}
.ps-webcam__bild a:is(:hover, :focus-visible) .ps-webcam__lupe { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
	.ps-bw .ps-webcam__bild img { transition: transform var(--dur-image) var(--ease-out); }
	.ps-bw .ps-webcam__bild a:hover img { transform: scale(1.012); }
}
.ps-webcam__bild a:focus-visible { outline: 2px solid var(--sonne-500); outline-offset: 4px; }

/* Leiste: Aufnahmezeit links, Knöpfe rechts */
.ps-webcam__leiste.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	position: relative;
	z-index: 1;
}
.ps-webcam__leiste > * { margin: 0; }
.ps-webcam__stand { max-width: 56ch; color: var(--text-body); font-size: var(--fs-body); line-height: 1.6; }
.ps-webcam__knoepfe.wp-block-buttons { flex-wrap: wrap; gap: 12px; }
.ps-webcam__neu .ps-webcam__neu-icon { transition: transform 700ms var(--ease-out); }
.ps-webcam__neu .wp-block-button__link:hover .ps-webcam__neu-icon { transform: rotate(-60deg); }
.ps-webcam__neu .ist-pruefend .ps-webcam__neu-icon { animation: ps-wc-dreh 900ms linear infinite; }
@keyframes ps-wc-dreh { to { transform: rotate(360deg); } }

/* Mit JavaScript: Aufnahmezeit (Dachzeile + Zeit in Newsreader), Ring = Weg bis zur nächsten Prüfung */
.ps-webcam__stand.ist-zeit {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 16px;
	row-gap: 2px;
	max-width: none;
}
.ps-webcam__ring { grid-row: 1 / span 3; width: 44px; height: 44px; color: var(--sonne-500); }
.ps-webcam__ring circle { fill: none; stroke-width: 2; }
.ps-webcam__ring .ps-webcam__ring-grund { stroke: var(--fels-200); }
.ps-webcam__ring .ps-webcam__ring-lauf { stroke: currentColor; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ps-webcam__ring .ps-webcam__ring-punkt { fill: var(--tanne-600); stroke: none; transform-origin: 50% 50%; transition: transform var(--dur-base) var(--ease-out); }
.ps-webcam.ist-alt .ps-webcam__ring .ps-webcam__ring-punkt { fill: var(--fels-500); }
.ps-bw .ps-webcam.ist-pruefend .ps-webcam__ring-punkt { animation: ps-wc-puls 900ms var(--ease-in-out) infinite alternate; }
@keyframes ps-wc-puls { to { transform: scale(1.6); } }
.ps-webcam__dach {
	font: 600 var(--fs-eyebrow)/1.2 var(--font-sans);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}
.ps-webcam__zeit {
	font: 300 clamp(24px, 2.4vw, 30px)/1.15 var(--font-display);
	letter-spacing: -0.01em;
	color: var(--text-strong);
	font-variant-numeric: tabular-nums lining-nums;
}
.ps-webcam__zeit em { font-style: italic; }
.ps-webcam__hinweis { min-height: 1.4em; font-size: var(--fs-small); color: var(--text-muted); }
.ps-webcam__hinweis:empty::before { content: "\00a0"; }

/* Vollbild-Ansicht der Webcam (Dialog aus vollbild.js) */
.ps-vollbild--webcam .ps-vollbild__buehne { display: grid; }
.ps-vb-bild {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: grid;
	place-items: center;
	cursor: zoom-in;
	touch-action: pan-x pan-y pinch-zoom;
}
.ps-vb-bild:focus-visible { outline: 2px solid var(--sonne-400); outline-offset: -4px; }
.ps-vb-bild img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
/* Originalgröße: 1 Bildpunkt = 1 CSS-Pixel, Verschieben per Ziehen, Rad oder Pfeiltasten */
.ps-vb-bild.ist-original { display: block; overflow: auto; cursor: grab; place-items: initial; }
.ps-vb-bild.ist-original.ist-ziehen { cursor: grabbing; }
.ps-vb-bild.ist-original img { max-width: none; max-height: none; width: auto; height: auto; margin: auto; }
.ps-vb-bild.ist-original .ps-vb-bild__flaeche { display: grid; place-items: center; min-width: 100%; min-height: 100%; width: max-content; height: max-content; }
.ps-vb-bild__flaeche { display: contents; }

@media (max-width: 781px) {
	.ps-webcam.wp-block-group { --ps-wc-y: 28px; gap: 40px; padding-top: 0; }
	.ps-webcam__bild:not(.block-editor-block-list__block)::before { inset: 20% 10% calc(-1 * var(--ps-wc-y)) 0; }
	.ps-webcam__bild:not(.block-editor-block-list__block)::after { --ps-wc-ecke: 40px; --ps-wc-abstand: 10px; }
	.ps-webcam__leiste.wp-block-group { display: grid; gap: 20px; }
	.ps-webcam__knoepfe.wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; }
	.ps-webcam__knoepfe .wp-block-button__link { width: 100%; padding-left: 12px; padding-right: 12px; }
	.ps-webcam__lupe { right: 10px; bottom: 10px; width: 40px; height: 40px; }
}
@media (max-width: 359px) {
	.ps-webcam__knoepfe.wp-block-buttons { grid-template-columns: 1fr; }
}

/* Erscheinen beim Scrollen (Klassen aus webcam.js): Bühne wischt von links herein, Winkel zeichnet sich */
.ps-bw .ps-webcam.ps-wc-rv .ps-webcam__bild::before { clip-path: inset(0 0 0 -100vw); transition: clip-path 1500ms var(--ease-in-out) 120ms; }
.ps-bw .ps-webcam.ps-wc-rv:not(.ist-sichtbar) .ps-webcam__bild::before { clip-path: inset(0 100% 0 -100vw); }
.ps-bw .ps-webcam.ps-wc-rv .ps-webcam__bild::after { transition: background-size 900ms var(--ease-out) 900ms; }
.ps-bw .ps-webcam.ps-wc-rv:not(.ist-sichtbar) .ps-webcam__bild::after { background-size: 0 1.5px, 1.5px 0; }

@media (prefers-reduced-motion: reduce) {
	.ps-webcam__bild::before, .ps-webcam__bild::after, .ps-webcam__neu-bild, .ps-webcam__bild img { transition: none !important; clip-path: none !important; transform: none !important; }
	.ps-webcam__blende, .ps-webcam__ring-punkt, .ps-webcam__neu-icon { animation: none !important; }
}

/* Knöpfe: Abstand und Umriss gegen bestand.css (Buttons im Inhalt sonst mit Abstand oben und Tanne 600) */
.ps-inhalt .ps-webcam .ps-webcam__knoepfe.wp-block-buttons { margin: 0; }
.ps-inhalt .ps-webcam .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);
}
@media (max-width: 781px) {
	.ps-webcam__knoepfe .wp-block-button { display: flex; }
	.ps-webcam__knoepfe .wp-block-button__link { flex: 1; white-space: normal; text-align: center; }
}

/*
 * Bergnamen im Bild (inc/webcam-berge.php, 23.10.2026): Ebene über dem Bild mit Punkt am Gipfel, feiner Linie und
 * Namen auf dunkler Pille (Kontrast unabhängig von Himmel und Wolken); Lage in Prozent des Bilds (--x/--y),
 * Linienlänge je Stufe abwechselnd. Bei einer Bildbreite bis 900 px Nummern statt Namen (darunter überdecken sich
 * die Namen trotz Stufen, gemessen 23.10.2026 von 320 bis 1920 px), die Namen stehen
 * in der Liste darunter. Klicks gehen durch die Ebene an das Bild (Vollbild).
 */
.ps-berge {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	border-radius: var(--radius-image);
	pointer-events: none;
	container-type: inline-size;
	transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.ps-berge__marke {
	--lang: clamp(14px, 2.8cqw, 34px);
	--punkt: 7px;
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
}
.ps-berge__marke--0 { --lang: 6px; }
.ps-berge__marke--2 { --lang: clamp(36px, 6.6cqw, 80px); }
.ps-berge__marke::before,
.ps-berge__marke::after { content: ""; position: absolute; }
/* Punkt am Gipfel */
.ps-berge__marke::before {
	left: calc(var(--punkt) / -2);
	top: calc(var(--punkt) / -2);
	width: var(--punkt);
	height: var(--punkt);
	border-radius: 50%;
	background: var(--schnee);
	box-shadow: 0 0 0 1.5px rgba(20, 38, 30, .6), 0 1px 3px rgba(20, 38, 30, .35);
}
/* Linie vom Punkt zur Beschriftung */
.ps-berge__marke::after {
	left: -.5px;
	bottom: calc(var(--punkt) / 2);
	width: 1px;
	height: var(--lang);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 2px rgba(20, 38, 30, .45);
}
.ps-berge__name,
.ps-berge__nr {
	position: absolute;
	left: 0;
	bottom: calc(var(--lang) + var(--punkt) / 2);
	transform: translateX(-50%);
	white-space: nowrap;
	color: var(--schnee);
	background: rgba(20, 38, 30, .78);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 0 1px 6px rgba(20, 38, 30, .25);
}
.ps-berge__name {
	padding: .3em .72em .34em;
	border-radius: 999px;
	font: 600 clamp(11px, 1.08cqw, 14px)/1.2 var(--font-sans);
	letter-spacing: .01em;
}
.ps-berge__nr {
	display: none;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font: 600 10.5px/1 var(--font-sans);
	font-variant-numeric: tabular-nums lining-nums;
}
/* Kleines Bild: Linien in Anteilen der Bildhöhe (1,5 % bzw. 9 %; Höhe = 56,25cqw), damit Nummern im Bild bleiben */
@container (max-width: 900px) {
	.ps-berge__marke, .ps-berge__marke--0 { --lang: .84cqw; --punkt: 5px; }
	.ps-berge__marke--2 { --lang: 5.06cqw; }
	.ps-berge__name { display: none; }
	.ps-berge__nr { display: grid; width: clamp(14px, 4.6cqw, 16px); height: clamp(14px, 4.6cqw, 16px); font-size: 10px; }
}
/* Ausgeschaltet (Schalter aus webcam.js) */
.ps-webcam.ist-ohne-berge .ps-berge,
.ps-vb-bild__rahmen.ist-ohne-berge .ps-berge { opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
/* Erscheinen: Beschriftungen nacheinander von unten (beim Laden bzw. wenn das Bild ins Bild scrollt) */
.ps-bw .ps-webcam:not(.ps-wc-rv) .ps-berge__marke,
.ps-bw .ps-webcam.ist-sichtbar .ps-berge__marke { animation: ps-berge-ein 760ms var(--ease-out) calc(380ms + var(--i) * 70ms) both; }
.ps-bw .ps-webcam.ps-wc-rv:not(.ist-sichtbar) .ps-berge__marke { opacity: 0; }
@keyframes ps-berge-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Leichter Zoom beim Überfahren wie das Bild, damit die Punkte auf den Gipfeln bleiben */
@media (hover: hover) and (pointer: fine) {
	.ps-bw .ps-webcam__bild .ps-berge { transition: transform var(--dur-image) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s; }
	.ps-bw .ps-webcam__bild a:hover + .ps-berge { transform: scale(1.012); }
}

/* Liste der Berge unter der Leiste (immer sichtbar, die einzige Nennung für Screenreader) */
.ps-berge-liste { position: relative; z-index: 1; display: grid; gap: 14px; margin: 0; }
.ps-berge-liste__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; }
.ps-berge-liste__titel {
	margin: 0;
	font: 600 var(--fs-eyebrow)/1.2 var(--font-sans);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}
.ps-inhalt .ps-webcam .ps-berge-liste__namen,
.ps-berge-liste__namen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ps-inhalt .ps-webcam .ps-berge-liste__namen li,
.ps-berge-liste__namen li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	font-size: var(--fs-body);
	line-height: 1.4;
	color: var(--text-strong);
}
.ps-berge-liste__namen li::before,
.ps-berge-liste__namen li::marker { content: none; }
.ps-berge-liste__nr {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tanne-700);
	color: var(--schnee);
	font: 600 12px/1 var(--font-sans);
	font-variant-numeric: tabular-nums lining-nums;
}
/* Schalter „Bergnamen im Bild“ (nur mit JavaScript, role="switch") */
.ps-berge-liste__schalter {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: 600 var(--fs-small)/1.3 var(--font-sans);
	color: var(--text-strong);
}
.ps-berge-liste__bahn { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--fels-500); transition: background 220ms var(--ease-out); }
.ps-berge-liste__knopf { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgba(30, 29, 25, .3); transition: transform 280ms var(--ease-out); }
.ps-berge-liste__schalter[aria-checked="true"] .ps-berge-liste__bahn { background: var(--tanne-600); }
.ps-berge-liste__schalter[aria-checked="true"] .ps-berge-liste__knopf { transform: translateX(18px); }
.ps-berge-liste__schalter:focus-visible { outline: none; }
.ps-berge-liste__schalter:focus-visible .ps-berge-liste__bahn { outline: 2px solid var(--sonne-600); outline-offset: 3px; }
@media (max-width: 781px) {
	.ps-berge-liste__namen { gap: 10px 20px; }
	.ps-berge-liste__namen li { font-size: var(--fs-small); }
}

/* Vollbild: Rahmen in Bildgröße (16:9, eingepasst), darüber dieselbe Beschriftung */
.ps-vb-bild { container-type: size; }
.ps-vb-bild__rahmen { position: relative; display: block; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; }
.ps-vb-bild .ps-vb-bild__rahmen img { width: 100%; height: 100%; max-width: none; max-height: none; }
.ps-vb-bild__rahmen .ps-berge { border-radius: 0; }
.ps-vb-bild.ist-original .ps-vb-bild__rahmen { width: auto; aspect-ratio: auto; }
.ps-vb-bild.ist-original .ps-vb-bild__rahmen img { width: auto; height: auto; }

@media (prefers-reduced-motion: reduce) {
	.ps-berge, .ps-berge__marke, .ps-berge-liste__bahn, .ps-berge-liste__knopf { animation: none !important; transition: none !important; transform: none; }
}