/* KL Rubbellos – Frontend
 * Alle Werte hängen an CSS-Variablen. Anpassungen am besten über
 * "Eigenes CSS" in den Plugin-Einstellungen.
 */

.klr {
	--klr-columns: 3;
	--klr-min-width: 15rem;
	--klr-ratio: 180 / 168;
	--klr-gap: 1.25rem;
	--klr-radius: 0.5rem;
	--klr-padding: 1.75rem;
	/* Gilt für beide Zahlen: gesperrte Kachel und Aufdruck auf der Rubbelfläche. */
	--klr-number-size: clamp(3rem, 7vw, 4.5rem);
	--klr-cover-bg: #61c1c4;
	--klr-cover-color: #00355d;
	--klr-card-bg: #fff;
	--klr-text: #00355d;
	--klr-accent: #61c1c4;
	--klr-locked-bg: #d0eced;
	--klr-locked-color: #b2c2ce;
	--klr-button-bg: #00355d;
	--klr-button-color: #fff;
	--klr-shadow: 0 1px 2px rgba(0, 53, 93, 0.06), 0 8px 24px rgba(0, 53, 93, 0.07);
}

/* Die Spaltenzahl gilt für breite Bildschirme. Wird eine Box schmaler als
   --klr-min-width, bricht das Raster automatisch um – ohne Media Queries,
   damit eigene Werte (Shortcode, Einstellungen, eigenes CSS) nicht mit den
   Umbruchregeln kollidieren. */
.klr--grid {
	display: grid;
	gap: var(--klr-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(
				100%,
				max(
					var(--klr-min-width),
					calc((100% - (var(--klr-columns) - 1) * var(--klr-gap)) / var(--klr-columns))
				)
			),
			1fr
		)
	);
}

/* ---- Box ---- */

.klr-box {
	position: relative;
	aspect-ratio: var(--klr-ratio);
	border-radius: var(--klr-radius);
	overflow: hidden;
	background: var(--klr-card-bg);
	color: var(--klr-text);
	box-shadow: var(--klr-shadow);
	isolation: isolate;
}

/* Seitenverhältnis "auto": Höhe richtet sich nach dem Inhalt. */
.klr--auto .klr-box {
	min-height: 12rem;
}

.klr--auto .klr-box__content {
	position: relative;
	inset: auto;
}

.klr-box__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--klr-padding);
	overflow: auto;
	overscroll-behavior: contain;
}

.klr-box__content:focus {
	outline: none;
}

.klr-box__body > *:first-child {
	margin-top: 0;
}

.klr-box__body > *:last-child {
	margin-bottom: 0;
}

.klr-box__actions {
	margin: auto 0 0;
	padding-top: 1rem;
}

.klr-box__button {
	display: inline-block;
	background: var(--klr-button-bg);
	color: var(--klr-button-color);
	border-radius: calc(var(--klr-radius) * 0.75);
	padding: 0.6em 1.2em;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.klr-box__button:hover,
.klr-box__button:focus {
	color: var(--klr-button-color);
	filter: brightness(1.12);
	text-decoration: none;
}

.klr-box__button:focus-visible {
	outline: 2px solid var(--klr-accent);
	outline-offset: 2px;
}

/* ---- Gesperrt ---- */

.klr-box--locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	padding: 1.5rem;
	background: var(--klr-locked-bg);
	box-shadow: none;
}

.klr-box__number {
	font-size: var(--klr-number-size);
	font-weight: 700;
	line-height: 1;
	color: var(--klr-locked-color);
	font-variant-numeric: tabular-nums;
}

.klr-box__hint {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--klr-locked-color);
	letter-spacing: 0.02em;
	text-wrap: balance;
}

/* ---- Rubbelschicht ---- */

.klr-box__canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
	touch-action: pan-y;
	transition: opacity 0.45s ease;
}

.klr-box__canvas:active {
	cursor: grabbing;
}

/* Runde Cursor-Vorschau in Größe der Rubbelspur. */
.klr-box--cursor .klr-box__canvas {
	cursor: none;
}

.klr-box__cursor {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border: 2px solid var(--klr-cover-color);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: opacity 0.15s ease;
}

.klr-box__cursor--visible {
	opacity: 0.65;
}

.klr-box--revealed .klr-box__canvas {
	opacity: 0;
	pointer-events: none;
}

.klr-box__reveal {
	position: absolute;
	z-index: 3;
	inset: auto 0 0;
	margin: 0 auto 0.9rem;
	width: fit-content;
	border: 0;
	background: transparent;
	color: var(--klr-cover-color);
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	opacity: 0.75;
}

.klr-box__reveal:hover {
	opacity: 1;
}

/* Button global abgeschaltet: bleibt für Tastatur und Screenreader erreichbar
   und wird sichtbar, sobald er den Fokus bekommt. */
.klr-box__reveal--quiet {
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.klr-box__reveal--quiet:focus-visible {
	width: fit-content;
	height: auto;
	padding: 0.35rem 0.75rem;
	margin: 0 auto 0.9rem;
	overflow: visible;
	clip-path: none;
	background: var(--klr-card-bg);
	border-radius: calc(var(--klr-radius) * 0.75);
	opacity: 1;
}

.klr-box__reveal:focus-visible {
	outline: 2px solid var(--klr-cover-color);
	outline-offset: 2px;
	opacity: 1;
}

.klr-box--revealed .klr-box__reveal {
	display: none;
}

/* Erst sichtbar, wenn Inhalt da ist – verhindert Aufblitzen beim Nachladen. */
.klr-box--scratch[data-klr-mode="ajax"] .klr-box__content:empty {
	visibility: hidden;
}

/* Solange die Rubbelschicht noch nicht gezeichnet ist, bleibt der Inhalt
   verborgen. Die Klasse setzt ausschließlich JavaScript – ohne JS bleibt
   der Inhalt im Modus "inline" also lesbar. */
.klr-box.klr-is-pending .klr-box__content {
	visibility: hidden;
}

.klr-box__loading,
.klr-box__error {
	margin: auto;
	text-align: center;
	font-size: 0.875rem;
	opacity: 0.7;
}

.klr-box__noscript {
	position: absolute;
	z-index: 4;
	inset: auto 0 0;
	margin: 0;
	padding: 0.5rem;
	text-align: center;
	font-size: 0.75rem;
	background: var(--klr-card-bg);
	color: var(--klr-text);
}

.klr-box--preview::after {
	content: "Vorschau";
	position: absolute;
	z-index: 5;
	top: 0.5rem;
	right: 0.5rem;
	background: #dba617;
	color: #1d2327;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.2rem 0.45rem;
	border-radius: 3px;
	pointer-events: none;
}

.klr .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.klr-box__canvas,
	.klr-box__button {
		transition: none;
	}
}