/* Datei: /firebase/views/push_inpage.css
 * Version: v1.1.0 (2025-08-16)
 * Beschreibung:
 *   Zentrales Design für In-Page Toasts – vollständig flexibel (Breite/Höhe),
 *   Größenklassen (sm/md/lg/full), Hero-Ratio, Close-Button, Animation.
 *   Kompatibel mit push_inpage.js v3.9.x/v4.x (nutzt .cl-*, ratio-*, --cl-toast-max-h, --cl-hero-fit).
 *
 * Änderungen ggü. v1.0.1:
 *   - [FIX] Breite wieder flexibel: 100% auf Mobile + size-basierte Max-Breiten via vw Clamp.
 *   - [ADD] Safe-Area-Unterstützung (iOS): unterer Abstand berücksichtigt.
 *   - [ADD] Variablen für Seitenabstand/Bottom-Gap; verbesserte Max-Höhen-Logik.
 *   - [KEEP] Min-Höhe (--cl-min-h) und alle Klassennamen/Struktur unverändert.
 *
 * Hinweise:
 *   - Smartphone-First, Bootstrap 5.3 kompatibel.
 *   - Keine Funktionsverluste, keine IDs/Klassen umbenannt.
 */

/* ——— Design-Variablen ——— */
:root {
	/* Farben & Typo */
	--cl-bg: #ffd800;
	--cl-fg: #111827; /* near-black */
	--cl-muted: #6b7280; /* gray-500 */
	/* Layout */
	--cl-radius: 1rem;
	--cl-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
	--cl-z: 2147483646;
	/* Abstände */
	--cl-side-gap: .5rem;
	--cl-bottom-gap: max(12px, env(safe-area-inset-bottom, 0px));
	/* Max-Breiten pro Größe (Anhaltswerte; werden mit vw geklemmt) */
	--cl-max-sm: 28rem; /* ~448px */
	--cl-max-md: 42rem; /* ~672px */
	--cl-max-lg: 56rem; /* ~896px */
	--cl-max-full: 100vw; /* volle Breite (mit Seitengap) */
	/* Bildverhalten */
	--cl-hero-fit: cover; /* cover | contain */
	/* Höhen */
	--cl-min-h: 200px; /* Mindesthöhe Karte */
	/* JS kann --cl-toast-max-h setzen; Fallback hier via var() in .cl-body */
}

/* ——— Container & Card ——— */
#inpageToastContainer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--cl-bottom-gap);
	z-index: var(--cl-z);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 0 var(--cl-side-gap);
	pointer-events: none; /* Container klickt nicht, Karte schon */
}

.cl-toast {
	pointer-events: auto;
	background: var(--cl-bg);
	color: var(--cl-fg);
	border-radius: var(--cl-radius);
	box-shadow: var(--cl-shadow);
	border: 0;
	overflow: hidden;
	/* Breite: Mobil immer 100%; Desktop per Max-Breite limitiert */
	width: 100%;
	max-width: min(96vw, var(--cl-max-md)); /* Default (md) */
	min-height: var(--cl-min-h);
}

/* sanfte Enter-Animation */
.cl-enter {
	transform: translateY(16px);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}

	.cl-enter.cl-enter-active {
		transform: translateY(0);
		opacity: 1;
	}

/* ——— Titel/Body/Content ——— */
.cl-title {
	font-weight: 600;
	margin: .25rem 0 .25rem;
	font-size: 1rem;
}

.cl-body {
	padding: .75rem 1rem;
	/* Fallback falls JS kein --cl-toast-max-h setzt: 70vh */
	max-height: var(--cl-toast-max-h, 70vh);
	overflow: auto;
	word-wrap: break-word;
}

.cl-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: .5rem 0;
}

/* Close-Button */
.cl-close {
	position: absolute;
	top: .25rem;
	right: .5rem;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	opacity: .6;
	cursor: pointer;
}

	.cl-close:hover {
		opacity: 1;
	}

/* ——— Größen (überschreiben max-width) ——— */
.cl-size-sm {
	max-width: min(92vw, var(--cl-max-sm));
}

.cl-size-md {
	max-width: min(96vw, var(--cl-max-md));
}

.cl-size-lg {
	max-width: min(98vw, var(--cl-max-lg));
}
/* full nutzt fast die volle Breite, mit Seitengap */
.cl-size-full {
	max-width: calc(min(100vw, var(--cl-max-full)) - (2 * var(--cl-side-gap)));
	border-radius: .75rem;
}

/* ——— Hero-Bild (data.image) ——— */
.cl-hero {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #000;
}

	.cl-hero img {
		width: 100%;
		height: 100%;
		object-fit: var(--cl-hero-fit, cover);
		display: block;
	}

/* Ratio-Helfer (nutzt CSS aspect-ratio) */
.ratio-16x9 {
	aspect-ratio: 16/9;
}

.ratio-4x3 {
	aspect-ratio: 4/3;
}

.ratio-1x1 {
	aspect-ratio: 1/1;
}

.ratio-21x9 {
	aspect-ratio: 21/9;
}

/* ——— Kleine Bildschirme ——— */
@media (max-width: 480px) {
	.cl-body {
		padding: .75rem .75rem;
	}
}

/* ——— Reduced motion respektieren ——— */
@media (prefers-reduced-motion: reduce) {
	.cl-enter, .cl-enter.cl-enter-active {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}