/*!
 * rotate360.css v1.5.0 - © 2026 Jan Overwaul · https://playground.jan-overwaul.de/rotate360/
 * Lizenziert unter der MIT-Lizenz: https://opensource.org/licenses/MIT
 */
/* Diese Datei enthält AUSSCHLIESSLICH Tokens (CSS Custom Properties). Das
 * gesamte Painting steckt gekapselt im Shadow Root jeder Instanz
 * (Konstante SHADOW_CSS in rotate360.js). Die Tokens vererben über die
 * Shadow-Grenze und bleiben am .rotate360-Host überschreibbar.
 *
 * Seiten-CSS auf innere Klassen (.r360-*) wirkt nicht. Anpassungen also
 * immer als --r360-*-Overrides auf .rotate360 (oder einer eigenen Klasse
 * am selben Element) schreiben.
 */
.rotate360 {
	/* Rahmen */
	--r360-bg: #f2f2f4;
	--r360-fs-bg: #111;
	--r360-fg: #333;
	--r360-radius: 0;
	--r360-border: none;
	--r360-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--r360-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.6);
	/* Größe: Die Breite kommt vom umgebenden CSS. Eine Höhe direkt am Host
	 * wirkt nicht - dafür sind die folgenden drei Tokens da. Freie Fläche
	 * zeigt --r360-bg, das Bild wird immer eingepasst (contain). */
	/* Seitenverhältnis: leer = vom ersten Bild übernehmen; sonst z.B. 4 / 3 */
	/* --r360-aspect: 4 / 3; */
	/* Feste Höhe; das Seitenverhältnis fällt dann weg. 100% holt die Höhe
	 * vom Host (der muss dann selbst eine haben, z.B. in einer Grid-Zelle). */
	/* --r360-height: 320px; */
	/* Deckel bei erhaltenem Seitenverhältnis - dvh statt vh, sonst springt
	 * es auf iOS beim Ein- und Ausblenden der Browserleiste. */
	/* --r360-max-height: 70dvh; */
	--r360-cursor: grab;
	--r360-cursor-active: grabbing;

	/* Ladeanzeige */
	--r360-loader-height: 3px;
	--r360-loader-track: rgba(0, 0, 0, 0.08);
	--r360-loader-color: #3b82f6;

	/* Hinweis „Ziehen zum Drehen" */
	--r360-hint-bg: rgba(0, 0, 0, 0.6);
	--r360-hint-fg: #fff;
	--r360-hint-size: 0.85rem;

	/* Button-Leiste */
	--r360-btn-size: 36px;
	--r360-btn-gap: 8px;
	--r360-btn-offset: 12px;
	--r360-btn-bg: rgba(238, 238, 238, 0.92);
	--r360-btn-bg-hover: #ffffff;
	--r360-btn-fg: #555;
	--r360-btn-border: none;
	--r360-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	--r360-btn-opacity: 1;      /* z.B. 0.35 = erst bei Hover voll sichtbar */

	/* Points of Interest */
	--r360-poi-size: 18px;
	--r360-poi-bg: #3b82f6;
	--r360-poi-bg-hover: #2563eb;
	--r360-poi-border: 2px solid #fff;
	--r360-poi-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	--r360-poi-label-bg: rgba(0, 0, 0, 0.8);
	--r360-poi-label-fg: #fff;
	--r360-poi-label-size: 0.8rem;

	/* Sprechblasen (--r360-leader-*, --r360-callout-*) und Detailbild
	 * (--r360-detail-*) haben Fallbacks in rotate360.js; hier nur die
	 * Fußzeile „Detailbild" und der angeheftete Zustand als Beispiel. */
	/* --r360-callout-detail-fg: #c0392b; */
	/* --r360-callout-detail-size: 0.92em; */
	/* --r360-callout-pinned-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); */
}