/* Seite einer digitalen Karte (/k/<code>): Werbeleiste, "Inhalt melden", abgelaufene Karte */

.karte { padding-bottom: 72px; }
/* Deko unten (Tanne, Dorf, Kürbisse …) steht auf der Werbeleiste, nicht dahinter */
.karte__deko { bottom: 44px; }

.qsbk-promo {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 9px 14px;
	background: rgba(17, 19, 24, .88);
	color: #e8e8ea;
	font: 14px/1.4 'Nunito', 'Segoe UI', Arial, sans-serif;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.qsbk-promo a { color: #ffb199; font-weight: 700; text-decoration: none; }
.qsbk-promo a:hover { text-decoration: underline; }
.qsbk-promo button {
	background: none; border: 0; padding: 0;
	color: #9a9ca5; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}

.qsbk-dialog {
	width: min(440px, calc(100vw - 32px));
	border: 0; border-radius: 16px; padding: 22px;
	font: 15px/1.45 'Nunito', 'Segoe UI', Arial, sans-serif; color: #1d1f24;
}
.qsbk-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.qsbk-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.qsbk-dialog p { margin: 0 0 12px; color: #555a66; }
.qsbk-dialog label { display: block; margin: 10px 0 4px; font-weight: 700; font-size: 14px; }
.qsbk-dialog select, .qsbk-dialog textarea, .qsbk-dialog input {
	width: 100%; box-sizing: border-box; padding: 8px 10px;
	border: 1px solid #c9ccd4; border-radius: 8px; font: inherit;
}
.qsbk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.qsbk-actions button {
	padding: 8px 14px; border-radius: 8px; border: 1px solid #c9ccd4;
	background: #fff; font: inherit; cursor: pointer;
}
.qsbk-actions .is-primary { background: #c8441f; border-color: #c8441f; color: #fff; }

/* abgelaufene Karte */
.qsbk-abgelaufen {
	margin: 0; min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 24px 16px; box-sizing: border-box;
	background: radial-gradient(ellipse at 50% 0%, #2a3f86 0%, #141d45 50%, #070b1c 100%);
	color: #f4f1ea; text-align: center;
	font: 17px/1.55 'Segoe UI', Arial, sans-serif;
}
.qsbk-abgelaufen main { max-width: 480px; }
.qsbk-abgelaufen__symbol { font-size: 64px; }
.qsbk-abgelaufen h1 { margin: 8px 0 12px; font-size: 28px; color: #f2c76e; }
.qsbk-btn {
	display: inline-block; margin-top: 8px; padding: 12px 22px; border-radius: 999px;
	background: #c8441f; color: #fff; font-weight: 700; text-decoration: none;
}

/* Teilen / Bearbeiten: runde Knöpfe rechts in der Leiste (immer der /k/-Link, nie der Editor) */
.qsbk-promo__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; flex: 1; min-width: 0; }
.qsbk-promo__knoepfe { display: flex; gap: 8px; flex: none; }
.qsbk-rund {
	width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: grid; place-items: center; font-size: 20px; line-height: 1; text-decoration: none;
	background: #fff; color: #1d1f24; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.qsbk-promo .qsbk-rund--teilen { background: #ff7a59; color: #fff; text-decoration: none; }
.qsbk-promo .qsbk-rund:hover { transform: scale(1.06); text-decoration: none; }
.qsbk-kopiert {
	position: fixed; left: 50%; bottom: 84px; z-index: 11; transform: translateX(-50%); margin: 0;
	padding: 8px 16px; border-radius: 999px; background: rgba(17, 19, 24, .9); color: #fff;
	font: 600 14px/1.3 'Nunito', 'Segoe UI', Arial, sans-serif;
}

/* Seite vor einem Überraschungs-Motiv (views/karte-geheim.php) */
.qsbk-geheim button.qsbk-btn { border: 0; cursor: pointer; font: inherit; }
.qsbk-geheim__klein { font-size: 14px; }
.qsbk-geheim__klein a { color: inherit; }