@charset "utf-8";

/* ==========================================================================
   C.D.S. WebApp: Website am Handy / Tablet als App installieren
   Copyright (c) by Code-Design Hechl :: www.code-design.at
   --------------------------------------------------------------------------
   Geladen von CDSWebApp::KopfTags() (class.webapp.php) auf allen Frontendseiten,
   wenn die WebApp in der Site-Config eingeschaltet ist. Die Bausteine baut
   media/com_cds_framework/js/webapp.js auf.
     .cdh-modern-webapp-banner*   = Leiste unten "Als App installieren"
     .cdh-modern-webapp-overlay / -fenster* / -schritte / -hinweis = Anleitung (iOS / Browsermenü)
     .cdh-modern-webapp-btn       = Knopf (Banner, Anleitung, Offline-Seite)
     .cdh-modern-webapp-kachel    = Kachel "App installieren" (CDSWebApp::Kachel)
     .cdh-modern-webapp-offline*  = Offline-Seite des Service Workers
   Farben über die Variablen des Templates (--cds-akzent ...), mit Ersatzwerten,
   weil die Datei auch auf Seiten ohne cds_programme_2027.css läuft.
   ========================================================================== */


/* ---------- Kachel (versteckt, bis installiert werden kann) ---------- */
.cdh-modern-webapp-kachel[hidden],
[data-cds-webapp][hidden] { display: none !important; }


/* ---------- Knopf ---------- */
.cdh-modern-webapp-btn {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--pille-radius, 999px);
	background: var(--cds-akzent, #20a2e5);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.cdh-modern-webapp-btn:hover,
.cdh-modern-webapp-btn:focus-visible { background: var(--cds-akzent-dunkel, #1786bf); }


/* ---------- Banner unten ---------- */
.cdh-modern-webapp-banner {
	position: fixed;
	z-index: 99990;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 10px 10px 10px 12px;
	border: 1px solid var(--karte-rand, var(--cds-rand, #e2e5ea));
	border-radius: var(--cds-radius, 14px);
	background: var(--cds-flaeche, #fff);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
	color: var(--cds-text, #2b2f33);
	font-size: 14px;
	line-height: 1.35;
	animation: cdh-modern-webapp-rein .25s ease-out;
}
.cdh-modern-webapp-banner-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
}
.cdh-modern-webapp-banner-text { flex: 1 1 auto; min-width: 0; }
.cdh-modern-webapp-banner-text strong,
.cdh-modern-webapp-banner-text span { display: block; overflow: hidden; text-overflow: ellipsis; }
.cdh-modern-webapp-banner-text strong { white-space: nowrap; }
.cdh-modern-webapp-banner-text span { color: var(--cds-text2, #6b7280); font-size: 13px; }
.cdh-modern-webapp-banner-zu {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cds-text2, #6b7280);
	font-size: 22px;
	line-height: 32px;
	cursor: pointer;
}
.cdh-modern-webapp-banner-zu:hover,
.cdh-modern-webapp-banner-zu:focus-visible { background: var(--cds-flaeche2, #f1f3f5); }

/* Platz unter dem Inhalt, damit der Banner nichts verdeckt */
body.cdh-modern-webapp-mit-banner { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

@keyframes cdh-modern-webapp-rein {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.cdh-modern-webapp-banner { animation: none; }
}


/* ---------- Anleitung (iOS / Browsermenü) ---------- */
.cdh-modern-webapp-overlay {
	position: fixed;
	z-index: 99995;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	background: rgba(0, 0, 0, .45);
}
@media (min-width: 600px) {
	.cdh-modern-webapp-overlay { align-items: center; }
}
.cdh-modern-webapp-fenster {
	width: 100%;
	max-width: 460px;
	max-height: 100%;
	overflow-y: auto;
	padding: 18px 18px 14px;
	border-radius: var(--cds-radius, 14px);
	background: var(--cds-flaeche, #fff);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	color: var(--cds-text, #2b2f33);
	font-size: 15px;
	line-height: 1.45;
}
.cdh-modern-webapp-fenster-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cdh-modern-webapp-fenster-kopf h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.cdh-modern-webapp-schritte { margin: 0 0 12px; padding-left: 22px; }
.cdh-modern-webapp-schritte li { margin-bottom: 8px; }
.cdh-modern-webapp-hinweis {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--cds-akzent-flaeche, #eaf6fd);
	color: var(--cds-text2, #4b5563);
	font-size: 13px;
}
.cdh-modern-webapp-fenster-fuss { display: flex; justify-content: flex-end; }


/* ---------- Offline-Seite (Service Worker) ---------- */
body.cdh-modern-webapp-offline {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	background: #f6f7f9;
	color: #2b2f33;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: center;
}
.cdh-modern-webapp-offline-box { max-width: 420px; }
.cdh-modern-webapp-offline-zeichen { font-size: 56px; line-height: 1; color: #9aa3ad; }
.cdh-modern-webapp-offline-box h1 { margin: 14px 0 8px; font-size: 22px; }
.cdh-modern-webapp-offline-box p { margin: 0 0 20px; color: #6b7280; line-height: 1.5; }