/*
 * phlqr - Ergaenzungen zum Site-Bootstrap.
 *
 * Das Layout kommt vollstaendig aus Bootstrap 5.3, das die Site global ueber
 * bootstrap-package ausliefert. Hier steht nur, was Bootstrap nicht abdeckt:
 * die Darstellung der Code-Grafik selbst. Kein Grid, keine Buttons, keine
 * Farben - das gehoert ins Theme, nicht hierher.
 */

.tx-phlqr {
	width: 100%;
}

/* Die Grafik fuellt ihren Container und bleibt quadratisch. */
.tx-phlqr-code__img,
.tx-phlqr-code__svg > svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/*
 * QR-Codes brauchen einen hellen Hintergrund und eine ruhige Zone am Rand
 * ("quiet zone"), sonst scheitern Scanner. Beides gilt auch im Dark Mode -
 * deshalb bewusst fest weiss und nicht ueber eine Theme-Variable.
 */
.tx-phlqr-code__img,
.tx-phlqr-code__svg {
	background-color: #fff;
	border-radius: var(--bs-border-radius, .375rem);
	padding: .75rem;
}

/* Lange URLs im Inhaltsfeld duerfen umbrechen, statt die Karte zu sprengen. */
.tx-phlqr-properties code {
	overflow-wrap: anywhere;
}

@media print {
	.tx-phlqr .btn,
	.tx-phlqr .alert {
		display: none !important;
	}

	.tx-phlqr-code__img,
	.tx-phlqr-code__svg {
		padding: 0;
	}
}