/* INKiESS Smart App Banner
   Oben angedockter, dezenter Banner. Sichtbar erst, wenn JS die Klasse
   .iab-visible setzt (verhindert Aufblitzen beim Laden).
   Farben kommen aus den Einstellungen als CSS-Variablen (--iab-*),
   hier stehen nur die Fallback-Werte. */

.iab-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	display: block;
	box-sizing: border-box;
	padding: 10px 14px;
	background: var(--iab-bg, #f7f7f9);
	color: var(--iab-title, #1a1a1a);
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	transform: translateY(-100%);
	transition: transform .35s ease;
}

/* Vor dem Einblenden (und nach dem Schließen) komplett aus dem Layout. */
.iab-banner[hidden] {
	display: none;
}

/* Das JS blendet Teile per hidden-Attribut aus (Button auf dem Desktop,
   QR-Bereich auf dem Handy, leere Untertitel-Zeilen). Die Browser-Regel
   [hidden]{display:none} hat fast keine Spezifität und würde von jeder
   display-Angabe weiter unten überstimmt – deshalb hier verbindlich. */
.iab-banner [hidden] {
	display: none !important;
}

.iab-banner.iab-visible {
	transform: translateY(0);
}

/* Der Balken geht über die volle Breite, der Inhalt sitzt als zentrierte
   Spalte darin – sonst kleben die Elemente auf breiten Monitoren an den
   Fensterrändern. Breite über die Einstellungen (0 = ohne Begrenzung).
   Innerhalb der Spalte verteilen sich die Elemente über die ganze Breite:
   Icon und Text links, Button bzw. QR-Bereich rechts. */
.iab-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--iab-max-width, 1200px);
	margin: 0 auto;
}

/* Schließen (x) */
.iab-close {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(127, 127, 127, .15);
	color: var(--iab-close, #555);
	font-size: 20px;
	line-height: 24px;
	cursor: pointer;
}
.iab-close:hover { background: rgba(127, 127, 127, .3); }

/* Icon */
.iab-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* Text */
.iab-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.iab-title {
	font-weight: 600;
	font-size: var(--iab-fs-title, 15px);
	color: var(--iab-title, #1a1a1a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Untertitel – Zeile 1 und optionale Zeile 2 (gleiche Farbe/Größe) */
.iab-subtitle {
	font-size: var(--iab-fs-subtitle, 12px);
	color: var(--iab-subtitle, #5a5a5a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iab-subtitle + .iab-subtitle {
	margin-top: 1px;
}

/* Call-to-Action-Button (mobil) */
.iab-cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--iab-btn-bg, #0a84ff);
	color: var(--iab-btn-text, #fff) !important;
	font-size: var(--iab-fs-button, 14px);
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .15s ease;
}
.iab-cta:hover { filter: brightness(.92); }

/* QR-Bereich (Desktop) */
.iab-qr {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
}
.iab-qr-hint {
	font-size: var(--iab-fs-qr-hint, 12px);
	color: var(--iab-qr-hint, #5a5a5a);
	line-height: 1.25;
	max-width: 200px;
	text-align: right;
}
.iab-qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.iab-qr-item svg {
	width: 64px;
	height: 64px;
	display: block;
	background: #fff;
	padding: 3px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, .1);
}
/* Store-Beschriftung unter dem QR-Code (reiner Text, kein Link). */
.iab-qr-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--iab-qr-hint, #5a5a5a);
	letter-spacing: .02em;
}

/* Auf schmalen Bildschirmen QR-Hinweistext ausblenden */
@media (max-width: 600px) {
	.iab-qr-hint { display: none; }
}