/*
 * Hettstedt Live – PWA & Push
 * Frontend-Stylesheet für die zwei unabhängigen Banner:
 *  - .hlpwa-banner--bottom : Install-Banner (unten)
 *  - .hlpwa-banner--top    : Push-Opt-in-Banner (oben, unabhängig vom Install-Status)
 *
 * Mobile-First: Basis-Regeln gelten für kleine Bildschirme, Anpassungen
 * für größere Viewports folgen über min-width Media Queries.
 * A11y: ausreichender Kontrast (WCAG AA), sichtbare :focus-visible-Ringe,
 * Mindest-Tapgröße 44×44px, respektiert prefers-reduced-motion.
 */

.hlpwa-banner {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999999;
	box-sizing: border-box;
	width: 100%;
	background: #0f172a;
	color: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media ( prefers-reduced-motion: reduce ) {
	.hlpwa-banner {
		animation: none !important;
	}
}

/* --- Positions-Variante: unten (Install-Banner) --- */
.hlpwa-banner--bottom {
	bottom: 0;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
	animation: hlpwa-slide-up 0.3s ease-out;
}

/* --- Positions-Variante: oben (Push-Banner) --- */
.hlpwa-banner--top {
	top: 0;
	padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	animation: hlpwa-slide-down 0.3s ease-out;
}

@keyframes hlpwa-slide-up {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes hlpwa-slide-down {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.hlpwa-banner__content {
	padding-right: 32px; /* Platz für den Schließen-Button. */
}

.hlpwa-banner__title {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #f8fafc;
}

.hlpwa-banner__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #cbd5e1;
}

.hlpwa-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.hlpwa-banner__cta,
.hlpwa-banner__dismiss {
	appearance: none;
	border: 0;
	border-radius: 999px;
	min-height: 44px; /* Mindest-Tapgröße gemäß WCAG 2.5.5 / mobile Best Practice. */
	padding: 10px 20px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.hlpwa-banner__cta,
	.hlpwa-banner__dismiss {
		transition: none;
	}
}

.hlpwa-banner__cta {
	background: #38bdf8;
	color: #0f172a;
}

.hlpwa-banner__cta:hover {
	background: #0ea5e9;
}

.hlpwa-banner__cta:active {
	transform: scale(0.98);
}

.hlpwa-banner__dismiss {
	background: transparent;
	color: #cbd5e1;
	border: 1px solid rgba(248, 250, 252, 0.25);
}

.hlpwa-banner__dismiss:hover {
	background: rgba(248, 250, 252, 0.08);
}

.hlpwa-banner__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(248, 250, 252, 0.08);
	border: 0;
	border-radius: 999px;
	color: #f8fafc;
	cursor: pointer;
}

.hlpwa-banner__cta:focus-visible,
.hlpwa-banner__dismiss:focus-visible,
.hlpwa-banner__close:focus-visible {
	outline: 3px solid #f8fafc;
	outline-offset: 2px;
}

/* Ab Tablet-Breite: Banner als kompakte, zentrierte Karte statt volle Breite. */
@media ( min-width: 600px ) {
	.hlpwa-banner--bottom {
		left: 50%;
		right: auto;
		bottom: 24px;
		transform: translateX(-50%);
		width: min(420px, calc(100% - 32px));
		border-radius: 16px;
		padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	.hlpwa-banner--top {
		left: 50%;
		right: auto;
		top: 24px;
		transform: translateX(-50%);
		width: min(420px, calc(100% - 32px));
		border-radius: 16px;
		padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 20px;
	}

	.hlpwa-banner__actions {
		flex-direction: row;
	}

	.hlpwa-banner__cta,
	.hlpwa-banner__dismiss {
		width: auto;
		flex: 1 1 auto;
	}

	@keyframes hlpwa-slide-up {
		from {
			transform: translate(-50%, 100%);
			opacity: 0;
		}
		to {
			transform: translate(-50%, 0);
			opacity: 1;
		}
	}

	@keyframes hlpwa-slide-down {
		from {
			transform: translate(-50%, -100%);
			opacity: 0;
		}
		to {
			transform: translate(-50%, 0);
			opacity: 1;
		}
	}
}