/**
 * Rundgang («?»-Knopf, Hervorhebung, Sprechblase). Seit 0.37.0.
 *
 * Nur Tokens aus osw-pa.css; die Wurzel trägt .osw-pa, damit Schrift,
 * Farben und Knöpfe des Plugins gelten.
 */

/* Der Knopf unten rechts */
.osw-pa-rundgang-knopf {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--os-red);
	color: #fff;
	font-family: var(--os-font-heading);
	font-size: 1.45rem;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}

.osw-pa-rundgang-knopf:hover,
.osw-pa-rundgang-knopf:focus-visible { background: var(--os-black); transform: scale(1.06); }
.osw-pa-rundgang-knopf:focus-visible { outline: 3px solid var(--os-red); outline-offset: 3px; }

/* Einmaliger Hinweis, solange der Knopf nie benutzt wurde */
.osw-pa-rundgang-knopf.ist-neu { animation: oswPaRgPuls 1.6s ease-out 3; }

@keyframes oswPaRgPuls {
	0% { box-shadow: 0 0 0 0 rgba(226, 0, 26, .55), 0 6px 18px rgba(0, 0, 0, .22); }
	100% { box-shadow: 0 0 0 18px rgba(226, 0, 26, 0), 0 6px 18px rgba(0, 0, 0, .22); }
}

/* Ebene über der Seite */
.osw-pa-rg { position: fixed; inset: 0; z-index: 100000; }

.osw-pa-rg__schutz { position: absolute; inset: 0; background: transparent; }
.osw-pa-rg__schutz.ist-dunkel { background: rgba(0, 0, 0, .55); }

.osw-pa-rg__spot {
	position: fixed;
	border-radius: 8px;
	outline: 3px solid var(--os-red);
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
	pointer-events: none;
	transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}

/* Sprechblase */
.osw-pa-rg__blase {
	position: fixed;
	width: min(360px, calc(100vw - 32px));
	padding: 18px 20px 16px;
	border-top: 4px solid var(--os-red);
	border-radius: 8px;
	background: var(--os-bg);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
	transition: left .25s ease, top .25s ease;
}

.osw-pa-rg__blase.ist-mitte { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }

.osw-pa-rg__zaehler {
	margin: 0 0 4px;
	color: var(--os-red);
	font-family: var(--os-font-heading);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.osw-pa .osw-pa-rg__titel { margin: 0 28px 6px 0; font-size: 1.15rem; }
.osw-pa-rg__text { margin: 0 0 14px; font-size: .95rem; }

.osw-pa-rg__knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.osw-pa-rg__knoepfe [hidden] { display: none !important; }
.osw-pa .osw-pa-rg__knoepfe .osw-pa-btn,
.osw-pa .osw-pa-rg__knoepfe .osw-pa-btn-leer { cursor: pointer; font-size: .9rem; }

.osw-pa-rg__zu {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--os-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.osw-pa-rg__zu:hover,
.osw-pa-rg__zu:focus-visible { background: var(--os-bg-muted); }

@media (prefers-reduced-motion: reduce) {
	.osw-pa-rg__spot,
	.osw-pa-rg__blase,
	.osw-pa-rundgang-knopf { transition: none; animation: none; }
}

@media print {
	.osw-pa-rundgang-knopf,
	.osw-pa-rg { display: none !important; }
}