/* Blätter-Pfeile: alle Werte kommen als Variablen aus den Einstellungen (Inline-Style am <nav>). */
.blaetter-pfeile .bp-pfeil {
	position: fixed;
	top: var(--bp-hoehe);
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bp-groesse);
	height: var(--bp-groesse);
	transform: translateY(-50%);
	color: var(--bp-symbol);
	background: rgba(var(--bp-grund), var(--bp-deckkraft));
	text-decoration: none;
	transition: background-color .2s ease, opacity .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.blaetter-pfeile .bp-zurueck { left: var(--bp-abstand); }
.blaetter-pfeile .bp-weiter { right: var(--bp-abstand); }
.blaetter-pfeile .bp-pfeil:hover,
.blaetter-pfeile .bp-pfeil:focus-visible {
	background: rgba(var(--bp-grund), var(--bp-deckkraft-hover));
	color: var(--bp-symbol);
}
.blaetter-pfeile .bp-pfeil:focus-visible { outline: 2px solid var(--bp-symbol); outline-offset: 2px; }

.blaetter-pfeile.bp-form-kreis .bp-pfeil { border-radius: 50%; }
.blaetter-pfeile.bp-form-quadrat .bp-pfeil { border-radius: 8px; }
.blaetter-pfeile.bp-form-ohne .bp-pfeil,
.blaetter-pfeile.bp-form-ohne .bp-pfeil:hover { background: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.blaetter-pfeile.bp-form-ohne .bp-pfeil { opacity: calc(.4 + var(--bp-deckkraft)); }
.blaetter-pfeile.bp-form-ohne .bp-pfeil:hover { opacity: 1; }

.blaetter-pfeile .bp-symbol { display: flex; width: 55%; height: 55%; }
.blaetter-pfeile .bp-symbol svg { width: 100%; height: 100%; }
.blaetter-pfeile .bp-zurueck .bp-symbol { transform: scaleX(-1); }

/* Titel des Ziels: erscheint beim Darüberfahren neben dem Pfeil. */
.blaetter-pfeile .bp-titel {
	position: absolute;
	top: 50%;
	max-width: 16em;
	padding: .35em .7em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	line-height: 1.3;
	color: var(--bp-symbol);
	background: rgba(var(--bp-grund), var(--bp-deckkraft-hover));
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity .2s ease;
}
.blaetter-pfeile .bp-zurueck .bp-titel { left: calc(100% + 8px); }
.blaetter-pfeile .bp-weiter .bp-titel { right: calc(100% + 8px); }
.blaetter-pfeile .bp-pfeil:hover .bp-titel,
.blaetter-pfeile .bp-pfeil:focus-visible .bp-titel { opacity: 1; }

@media (max-width: 767px) {
	.blaetter-pfeile .bp-pfeil { width: var(--bp-mobil-groesse); height: var(--bp-mobil-groesse); }
	.blaetter-pfeile.bp-mobil-seitlich .bp-pfeil { top: var(--bp-mobil-hoehe); }
	.blaetter-pfeile.bp-mobil-seitlich .bp-zurueck { left: var(--bp-mobil-abstand); }
	.blaetter-pfeile.bp-mobil-seitlich .bp-weiter { right: var(--bp-mobil-abstand); }
	.blaetter-pfeile.bp-mobil-unten .bp-pfeil { top: auto; bottom: calc(var(--bp-mobil-abstand) + env(safe-area-inset-bottom, 0px)); transform: none; }
	.blaetter-pfeile.bp-mobil-unten .bp-zurueck { left: var(--bp-mobil-abstand); }
	.blaetter-pfeile.bp-mobil-unten .bp-weiter { right: var(--bp-mobil-abstand); }
	.blaetter-pfeile.bp-mobil-aus { display: none; }
}

@media print {
	.blaetter-pfeile { display: none; }
}

/* Vorschau in den Einstellungen: Pfeile im Kasten statt am Fenster. */
.bp-admin-vorschau {
	position: relative;
	max-width: 760px;
	height: 160px;
	margin: 1em 0 2em;
	overflow: hidden;
	background: linear-gradient(135deg, #afb7a8 0%, #e9ede5 55%, #7d8377 100%);
	border-radius: 6px;
}
.bp-admin-vorschau .blaetter-pfeile .bp-pfeil { position: absolute; top: 50%; }
.bp-admin-vorschau .bp-admin-vorschau-text { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: #2d3748; font-size: 12px; }