/*
 * Design-Token-System "Reflector bei Nacht":
 * - Hintergrund: tiefes Nachtblau, wie eine dunkle Straße
 * - Akzent: warmes Reflektor-Amber, wie ein Katzenauge/Reflektor im Scheinwerferlicht
 * - Schrift: bewusst die System-Schriftart des Hosts (keine externen Font-Requests
 *   für ein Plugin, das auf beliebigen Themes eingebettet wird)
 * - Keine Schatten/Farbverläufe als Dekoration; Abgrenzung nur über dünne Linien
 */
.rc-map-embed,
.rc-place-embed {
	--rc-bg: #121627;
	--rc-surface: #1a2036;
	--rc-border: #2c3457;
	--rc-amber: #f0b542;
	--rc-amber-dim: #a9832f;
	--rc-text: #ece7da;
	--rc-text-dim: #8991b3;
	--rc-success: #7fb08a;
	--rc-danger: #d98b7c;
	--rc-radius: 3px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rc-text);
	box-sizing: border-box;
}

.rc-map-embed *,
.rc-place-embed * {
	box-sizing: border-box;
}

/* ---------- Community-Karte ---------- */

.rc-map-embed {
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	overflow: hidden;
	background: var(--rc-bg);
}

/* Weltkugel-Form: rund statt eckig, skaliert über aspect-ratio zuverlässig
   auch auf dem Handy mit. Ein sanftes Schweben beim Darüberfahren mit der
   Maus macht sie etwas lebendiger. Da MapLibres eigene Bedienelemente
   (Zoom, Vollbild) in die Ecken des quadratischen Rahmens gesetzt werden,
   liegen sie außerhalb des sichtbaren Kreises und werden mit
   abgeschnitten – Scrollen/Pinch-Zoom und Klicks auf die Katzen
   funktionieren aber ganz normal weiter. */
.rc-map-embed-globe {
	border-radius: 50%;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	width: min(90vw, 90vh);
	height: auto;
	margin: 0 0 18px;
	box-shadow: 0 16px 46px rgba(0, 0, 0, 0.4);
	transition: box-shadow 0.3s ease;
	animation: rc-map-float 6s ease-in-out infinite;
}

.rc-map-embed-globe .rc-map-canvas {
	height: 100%;
}

.rc-map-embed-globe:hover {
	box-shadow: 0 22px 55px rgba(0, 0, 0, 0.48);
}

@keyframes rc-map-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* Reduziert den großen, theme-bedingten Abstand zwischen Header und Karte,
   aber ausschließlich auf Seiten, die tatsächlich die Weltkugel-Karte
   enthalten (über :has() erkannt) – betrifft also nie andere Seiten oder
   den eckigen Karten-Modus. Die Werte überschreiben Inline-Styles des
   Block-Themes, daher !important; das ist hier kein Fehlgriff, sondern
   die einzige Möglichkeit, Inline-Styles gezielt zu übersteuern. */
main:has( .rc-map-embed-globe ) {
	margin-top: 0.1rem !important;
}

main:has( .rc-map-embed-globe ) > .wp-block-group.has-global-padding {
	padding-top: 0.1rem !important;
}

/* Die Seiten-Überschrift ("Katzen Karte") wirkt direkt über der Kugel
   überflüssig und kostet echten Platz – aber bewusst nur auf Seiten mit
   der Weltkugel-Karte ausgeblendet, nicht site-weit (H1 bleibt auf allen
   anderen Seiten für SEO/Barrierefreiheit erhalten). */
main:has( .rc-map-embed-globe ) h1.wp-block-post-title {
	display: none;
}

/* Weltkugel-Modus: Zähler-Kachel und OSM-Hinweis liegen außerhalb des
   Kreis-Zuschnitts, unten links/rechts direkt an der Kugel – mit eigenem,
   bewusst abweichendem Schwebe-Rhythmus (andere Dauer, eine Richtung
   sogar umgekehrt), damit es nicht wirkt wie eine exakte Kopie der
   Kugel-Animation. */
.rc-map-outer {
	position: relative;
}

.rc-map-outer-globe {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 10px;
}

.rc-map-count-external,
.rc-map-attrib-external,
.rc-map-controls-external {
	position: absolute;
	z-index: 2;
}

.rc-map-count-external,
.rc-map-attrib-external {
	bottom: 0;
}

.rc-map-count-external {
	left: 3%;
	animation: rc-external-float 4.5s ease-in-out infinite;
}

.rc-map-attrib-external {
	right: 3%;
	animation: rc-external-float 5.5s ease-in-out infinite reverse;
}

.rc-map-controls-external {
	top: 4%;
	right: 4%;
	animation: rc-external-float 5s ease-in-out infinite;
}

/* Der Kreis wächst auf breiten Bildschirmen deutlich (min(90vw, 90vh)),
   wodurch derselbe Eck-Versatz dort unverhältnismäßig groß wirkt. Ab
   Tablet-/Desktop-Breite rücken die drei Elemente deshalb viel weiter
   diagonal Richtung Kreiskurve, statt an der Quadrat-Ecke zu bleiben. */
@media ( min-width: 768px ) {
	.rc-map-outer-globe {
		padding-bottom: 0;
	}

	.rc-map-count-external,
	.rc-map-attrib-external {
		bottom: 15%;
	}

	.rc-map-count-external {
		left: 15%;
	}

	.rc-map-attrib-external {
		right: 15%;
	}

	.rc-map-controls-external {
		top: 15%;
		right: 15%;
	}
}

.rc-map-count-external .rc-map-count-badge {
	position: static;
	color: #fff;
}

.rc-map-count-external .rc-map-count-badge strong {
	color: #fff;
}

.rc-map-attrib-external .maplibregl-ctrl-attrib {
	background: rgba(18, 22, 39, 0.85);
	border: 1px solid var(--rc-border, #2c3457);
	border-radius: var(--rc-radius, 4px);
	padding: 8px 12px;
	font-size: 13px;
}

.rc-map-attrib-external .maplibregl-ctrl-attrib a {
	color: var(--rc-text-dim, #8991b3);
}

@keyframes rc-external-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

.rc-map-embed:fullscreen,
.rc-map-embed:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	border-radius: 0;
}

.rc-map-embed:fullscreen .rc-map-canvas,
.rc-map-embed:-webkit-full-screen .rc-map-canvas {
	height: 100%;
}

.rc-fullscreen-ctrl {
	font-size: 16px;
	line-height: 1;
}

.rc-map-consent-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 220px;
	padding: 24px;
	text-align: center;
	background: var(--rc-bg, #121627);
	color: var(--rc-text, #ece7da);
}

.rc-map-consent-box p {
	max-width: 420px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rc-text-dim, #8991b3);
	margin: 0;
}

.rc-map-canvas {
	width: 100%;
	height: var(--rc-map-height, 520px);
}

.rc-map-count-badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(18, 22, 39, 0.85);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	padding: 8px 12px;
	font-size: 13px;
	color: var(--rc-text);
	z-index: 5;
}

.rc-map-count-badge strong {
	color: var(--rc-amber);
}

.rc-map-embed .maplibregl-popup-content {
	background: var(--rc-surface);
	color: var(--rc-text);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	box-shadow: none;
	font-size: 13px;
	padding: 10px 12px;
}

.rc-map-embed .maplibregl-popup-tip {
	border-top-color: var(--rc-surface);
	border-bottom-color: var(--rc-surface);
}

/* ---------- Platzierungs-Flow ---------- */

.rc-place-embed {
	max-width: 640px;
}

.rc-place-message {
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	background: var(--rc-surface);
	padding: 20px;
}

.rc-place-message-error {
	border-color: var(--rc-danger);
}

.rc-place-message-success {
	border-color: var(--rc-success);
}

.rc-place-message h3 {
	margin-top: 0;
	color: var(--rc-amber);
}

.rc-place-loading {
	color: var(--rc-text-dim);
}

.rc-place-app {
	background: var(--rc-surface);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	padding: 18px;
}

.rc-search-row {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.rc-search-row input[type="text"] {
	flex: 1;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	color: var(--rc-text);
	padding: 9px 11px;
	font-size: 14px;
}

.rc-search-row input[type="text"]:focus {
	outline: none;
	border-color: var(--rc-amber);
}

.rc-search-row button,
.rc-place-app button.rc-submit {
	background: var(--rc-amber);
	border: 1px solid var(--rc-amber);
	color: #1a1305;
	font-weight: 600;
	border-radius: var(--rc-radius);
	padding: 9px 16px;
	cursor: pointer;
}

.rc-search-row button:hover,
.rc-place-app button.rc-submit:hover {
	background: var(--rc-amber-dim);
	border-color: var(--rc-amber-dim);
}

.rc-search-results {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	overflow: hidden;
}

.rc-search-results li {
	padding: 9px 11px;
	font-size: 13px;
	border-bottom: 1px solid var(--rc-border);
	cursor: pointer;
}

.rc-search-results li:last-child {
	border-bottom: none;
}

.rc-search-results li:hover {
	background: var(--rc-bg);
	color: var(--rc-amber);
}

.rc-place-map {
	width: 100%;
	height: 340px;
	border-radius: var(--rc-radius);
	overflow: hidden;
	margin-bottom: 10px;
	border: 1px solid var(--rc-border);
}

.rc-drag-hint,
.rc-confirm-hint {
	font-size: 12px;
	color: var(--rc-text-dim);
	margin: 6px 0 14px;
}

.rc-privacy-hint {
	font-size: 12px;
	color: var(--rc-text);
	background: rgba(240, 181, 66, 0.1);
	border: 1px solid var(--rc-amber-dim);
	border-radius: var(--rc-radius);
	padding: 10px 12px;
	margin-bottom: 14px;
	line-height: 1.5;
}

.rc-place-app input.rc-name-input {
	width: 100%;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	color: var(--rc-text);
	padding: 10px 11px;
	font-size: 14px;
	font-family: inherit;
	margin-bottom: 2px;
}

.rc-place-app input.rc-name-input:focus {
	outline: none;
	border-color: var(--rc-amber);
}

.rc-place-app textarea {
	width: 100%;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	color: var(--rc-text);
	padding: 10px 11px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 80px;
}

.rc-place-app textarea:focus {
	outline: none;
	border-color: var(--rc-amber);
}

.rc-char-count {
	text-align: right;
	font-size: 12px;
	color: var(--rc-text-dim);
	margin: 4px 0 14px;
}

.rc-name-generate-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--rc-amber);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	margin-top: -8px;
	margin-bottom: 8px;
	display: block;
}

.rc-name-generate-btn:hover {
	color: var(--rc-amber-dim);
}

.rc-practice-count {
	font-size: 14px;
	font-weight: 600;
	color: var(--rc-amber);
	margin: 4px 0 10px;
}

.rc-badge-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rc-badge-pill {
	background: rgba(240, 181, 66, 0.12);
	border: 1px solid var(--rc-amber-dim);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	color: var(--rc-text);
	white-space: nowrap;
}

.rc-sticker-label {
	font-size: 12px;
	color: var(--rc-text-dim);
	margin: 10px 0 6px;
}

.rc-sticker-row {
	display: flex;
	gap: 8px;
	margin-bottom: 4px;
}

.rc-sticker-btn {
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	font-size: 18px;
	line-height: 1;
	padding: 7px 10px;
	cursor: pointer;
}

.rc-sticker-btn:hover {
	border-color: var(--rc-amber);
}

.rc-sticker-btn-active {
	border-color: var(--rc-amber);
	background: rgba(240, 181, 66, 0.15);
}

.rc-form-error {
	color: var(--rc-danger);
	font-size: 13px;
	margin-bottom: 10px;
}

.rc-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--rc-text-dim);
	margin-bottom: 14px;
	cursor: pointer;
}

.rc-consent-row input[type="checkbox"] {
	margin-top: 2px;
	flex: 0 0 auto;
	cursor: pointer;
}

.rc-consent-row a {
	color: var(--rc-amber);
}

.rc-place-app button.rc-submit {
	width: 100%;
	padding: 12px;
	font-size: 15px;
}

.rc-place-app button.rc-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.rc-marker-preview {
	width: 40px;
	height: 42px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
	transform-origin: bottom center;
}

.rc-marker-preview img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}

.rc-marker-preview.rc-marker-pending {
	animation: rc-pulse 1.6s ease-in-out infinite;
}

@keyframes rc-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.rc-marker-preview.rc-marker-pending {
		animation: none;
	}
}

.rc-name-toggle {
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin: 8px 0 10px;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	color: var(--rc-amber);
	cursor: pointer;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}

.rc-name-toggle:hover {
	color: var(--rc-amber-dim);
}

.rc-missing-badge {
	color: var(--rc-danger);
	font-weight: 600;
}

.rc-missing-toggle {
	margin-top: 12px;
	background: transparent !important;
	color: var(--rc-amber) !important;
	border: 1px solid var(--rc-amber) !important;
}

.rc-missing-toggle:hover {
	background: rgba(240, 181, 66, 0.12) !important;
}

.rc-speech-bubble {
	font-size: 13px;
	line-height: 1.4;
}

.rc-speech-bubble .rc-speech-name {
	font-weight: 700;
	color: var(--rc-amber);
	display: block;
	margin-bottom: 3px;
}

.rc-speech-bubble .rc-speech-missing {
	display: inline-block;
	margin-top: 6px;
	color: var(--rc-danger);
	font-weight: 600;
	font-size: 12px;
}

.rc-finder-ok-badge {
	display: inline-block;
	margin-top: 6px;
	color: var(--rc-success);
	font-weight: 600;
	font-size: 13px;
}

.rc-map-badge-stack {
	display: flex;
	margin-top: 8px;
	cursor: pointer;
	width: fit-content;
}

.rc-map-badge-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rc-surface);
	border: 2px solid var(--rc-bg);
	font-size: 14px;
	transition: margin 0.15s ease;
}

.rc-map-badge-chip:not(:first-child) {
	margin-left: -12px;
}

.rc-map-badge-stack[data-expanded="true"] .rc-map-badge-chip:not(:first-child) {
	margin-left: 4px;
}

.rc-sighting-toggle-btn {
	margin-top: 10px;
	width: auto;
	padding: 8px 14px;
	font-size: 13px;
}

.rc-sighting-form-slot {
	margin-top: 8px;
}

.rc-sighting-form-slot textarea {
	width: 100%;
	box-sizing: border-box;
}

.rc-speech-friends {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--rc-border, #2c3457);
}

.rc-speech-friend-item {
	display: flex;
	flex-direction: column;
}

.rc-speech-friend-name {
	font-weight: 600;
	color: var(--rc-amber);
	font-size: 13px;
}

.rc-speech-friend-comment {
	font-size: 12px;
	margin-top: 2px;
}

.rc-speech-friends .rc-report-btn {
	align-self: flex-end;
	margin-top: 2px;
}

.rc-speech-bubble {
	display: flex;
	flex-direction: column;
}

.rc-popup-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.rc-report-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--rc-text-dim);
	font-size: 10px;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.7;
}

.rc-report-btn:hover {
	opacity: 1;
	color: var(--rc-danger);
}

.rc-report-btn:disabled {
	cursor: default;
	text-decoration: none;
	opacity: 0.6;
}

.rc-view-link {
	display: inline-block;
	margin-top: 10px;
	color: var(--rc-amber);
	text-decoration: underline;
}

/* ---------- Katzenfreundschaften ---------- */

.rc-friends-section {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--rc-border);
}

.rc-friends-heading {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--rc-amber);
}

.rc-friends-subheading {
	margin: 14px 0 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rc-text-dim);
}

.rc-friends-none {
	font-size: 13px;
	color: var(--rc-text-dim);
}

.rc-friend-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	margin-bottom: 6px;
}

.rc-friend-item-accepted,
.rc-friend-item-request {
	flex-direction: column;
	align-items: stretch;
}

.rc-friend-toprow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rc-friend-message {
	font-size: 13px;
	font-style: italic;
	color: var(--rc-text-dim);
	margin: 4px 0 0;
}

.rc-friend-current-comment {
	font-size: 13px;
	color: var(--rc-text);
	background: rgba(240, 181, 66, 0.08);
	border-radius: var(--rc-radius);
	padding: 6px 9px;
	margin: 2px 0 8px;
}

.rc-friend-name {
	font-weight: 600;
	flex: 1;
}

.rc-friend-waiting {
	font-size: 12px;
	color: var(--rc-text-dim);
	margin-left: auto;
}

.rc-friend-report-btn {
	margin-left: auto;
	font-size: 11px !important;
}

.rc-friend-item-request .rc-friend-report-btn {
	margin-left: 0;
	margin-top: 6px;
	align-self: flex-end;
}

.rc-friend-btn {
	background: transparent;
	border: 1px solid var(--rc-border);
	color: var(--rc-text);
	border-radius: var(--rc-radius);
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.rc-friend-accept {
	border-color: var(--rc-success);
	color: var(--rc-success);
}

.rc-friend-accept:hover {
	background: rgba(127, 176, 138, 0.12);
}

.rc-friend-decline {
	border-color: var(--rc-danger);
	color: var(--rc-danger);
}

.rc-friend-decline:hover {
	background: rgba(217, 139, 124, 0.12);
}

.rc-friend-comment {
	width: 100%;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	color: var(--rc-text);
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	min-height: 60px;
	margin-top: 6px;
}

.rc-friend-comment:focus {
	outline: none;
	border-color: var(--rc-amber);
}

.rc-friend-save-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.rc-friend-saved-msg {
	font-size: 12px;
	color: var(--rc-success);
}

.rc-friends-find-btn {
	margin-top: 12px;
}

.rc-delete-toggle-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--rc-text-dim);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.75;
}

.rc-delete-toggle-btn:hover {
	opacity: 1;
	color: var(--rc-danger);
}

.rc-delete-panel {
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--rc-danger);
	border-radius: var(--rc-radius);
	background: rgba(217, 139, 124, 0.08);
}

.rc-delete-panel p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
}

.rc-delete-code-input {
	width: 100%;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	color: var(--rc-text);
	padding: 9px 11px;
	font-size: 14px;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rc-delete-code-input:focus {
	outline: none;
	border-color: var(--rc-danger);
}

.rc-finder-qr-wrap {
	margin-top: 12px;
	padding: 14px;
	background: #fff;
	border-radius: var(--rc-radius);
	text-align: center;
	max-width: 220px;
}

.rc-finder-qr-wrap img {
	image-rendering: pixelated;
	max-width: 100%;
	height: auto;
}

.rc-qr-url {
	margin-top: 8px;
	font-size: 11px;
	color: #333;
	word-break: break-all;
}

.rc-friends-find-status {
	font-size: 12px;
	color: var(--rc-text-dim);
	min-height: 16px;
}

.rc-friend-find-marker {
	cursor: pointer;
}

.rc-friend-find-marker-self {
	filter: drop-shadow(0 0 5px #f0b542) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.rc-friend-request-panel {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid var(--rc-amber-dim);
	border-radius: var(--rc-radius);
	background: rgba(240, 181, 66, 0.06);
}

.rc-friend-request-heading {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--rc-amber);
}

.rc-friend-request-msg-label {
	display: block;
	font-size: 12px;
	color: var(--rc-text-dim);
	margin-bottom: 4px;
}

/* ---------- PDF-Vorschau-Karte (immer sichtbar, öffnet das Overlay) ---------- */

.rc-pdf-preview {
	--rc-bg: #121627;
	--rc-surface: #1a2036;
	--rc-border: #2c3457;
	--rc-amber: #f0b542;
	--rc-amber-dim: #a9832f;
	--rc-text: #ece7da;
	--rc-text-dim: #8991b3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--rc-surface);
	border: 1px solid var(--rc-border);
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 18px;
	color: var(--rc-text);
}

.rc-pdf-preview-thumb-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
}

.rc-pdf-preview-canvas {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	border-radius: 2px;
	background: #faf6ec;
}

.rc-pdf-preview-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rc-pdf-preview-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.rc-pdf-preview-pages {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--rc-text-dim);
}

.rc-pdf-open-btn {
	align-self: flex-start;
	width: auto;
	padding: 10px 18px;
}

@media (max-width: 480px) {
	.rc-pdf-preview {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.rc-pdf-open-btn {
		width: 100%;
		text-align: center;
	}
}

/* ---------- PDF-Overlay (der eigentliche Buch-Betrachter) ---------- */

.rc-pdf-overlay {
	position: fixed;
	inset: 0;
	z-index: 999997;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(8, 10, 20, 0.82);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.rc-pdf-overlay.rc-pdf-overlay-visible {
	opacity: 1;
	visibility: visible;
}

body.rc-pdf-overlay-open {
	overflow: hidden;
}

.rc-pdf-overlay-inner {
	position: relative;
	width: min(1200px, 94vw);
	height: min(85vh, 950px);
	margin-bottom: 0;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.rc-pdf-overlay-close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--rc-amber);
	color: #1a1305;
	border: 2px solid #1a1305;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.rc-pdf-overlay-close:hover {
	background: var(--rc-amber-dim);
}

.rc-pdf-embed {
	--rc-bg: #121627;
	--rc-surface: #1a2036;
	--rc-border: #2c3457;
	--rc-amber: #f0b542;
	--rc-amber-dim: #a9832f;
	--rc-text: #ece7da;
	--rc-text-dim: #8991b3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rc-text);
	background: var(--rc-surface);
	border: 1px solid var(--rc-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.rc-pdf-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--rc-border);
	background: var(--rc-bg);
	flex: 0 0 auto;
}

.rc-pdf-page-indicator {
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: var(--rc-text-dim);
}

.rc-pdf-btn {
	background: transparent;
	border: 1px solid var(--rc-border);
	color: var(--rc-text);
	border-radius: 3px;
	width: 34px;
	height: 34px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.rc-pdf-btn:hover:not(:disabled) {
	border-color: var(--rc-amber);
	color: var(--rc-amber);
}

.rc-pdf-btn:active:not(:disabled) {
	transform: scale(0.92);
}

.rc-pdf-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.rc-pdf-btn-fullscreen {
	margin-left: auto;
}

.rc-pdf-canvas-wrap {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px;
	background: radial-gradient(ellipse at center, #1c2338 0%, var(--rc-bg) 75%);
	touch-action: pan-y;
	perspective: 1600px;
}

/* Die "Doppelseite" – ein oder zwei Papier-Seiten mit Falz dazwischen. */
.rc-pdf-spread {
	display: flex;
	align-items: stretch;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
	transition: opacity 0.16s ease, transform 0.16s ease;
	transform-style: preserve-3d;
}

.rc-pdf-spread.rc-pdf-turning {
	opacity: 0;
	transform: scale(0.97) rotateY(4deg);
}

.rc-pdf-page {
	background: #faf6ec;
	display: flex;
	position: relative;
}

.rc-pdf-page-canvas {
	display: block;
}

/* Sanfter Schatten der Seiten hin zur Buchmitte, wie bei echtem Papier,
   das sich zur Bindung hin leicht wölbt. */
.rc-pdf-page-left {
	border-radius: 4px 0 0 4px;
	box-shadow: inset -10px 0 16px -12px rgba(0, 0, 0, 0.45);
}

.rc-pdf-page-right {
	border-radius: 0 4px 4px 0;
	box-shadow: inset 10px 0 16px -12px rgba(0, 0, 0, 0.45);
}

.rc-pdf-spread-single .rc-pdf-page {
	border-radius: 4px;
	box-shadow: none;
}

/* Der Falz selbst: dunkler Verlauf genau in der Mitte, heller zu beiden
   Seiten hin auslaufend. */
.rc-pdf-spine {
	width: 16px;
	flex: 0 0 auto;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.32) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

.rc-pdf-embed.rc-pdf-fullscreen-active {
	width: 100vw;
	height: 100vh;
	border-radius: 0;
}

.rc-pdf-embed.rc-pdf-fullscreen-active .rc-pdf-canvas-wrap {
	flex: 1;
}

@media (max-width: 480px) {
	.rc-pdf-overlay {
		padding: 0;
	}

	.rc-pdf-overlay-inner {
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}

	.rc-pdf-overlay-close {
		top: 10px;
		right: 10px;
	}

	.rc-pdf-btn {
		width: 40px;
		height: 40px;
	}

	.rc-pdf-spine {
		width: 10px;
	}
}