/* ==========================================================================
   SightQuest Player — Frame-Styles
   Used by: tpl-quest-player.php, tpl-tour-player.php
   Tokens: kommen aus app.css (sind im Theme schon definiert)
   ========================================================================== */

/* Player-spezifische Tokens — die im app.css fehlen, hier ergänzen ---------- */
:root {
	--gold-100: #fcf2d3;
	--gold-200: #f9e5b1;
	--green-100: #e8f5ec;
	--green-200: #c5e6cd;
	--green-500: #1f7a30;
	--green-700: #155a23;
	/* Wegbeschreibung-Akzent: dezentes Stahl-Blau, klar abgehoben vom
	 * grünlichen Audio-Teal */
	--dir-50:  #eef3f8;
	--dir-100: #dde8f1;
	--dir-200: #c0d3e3;
	--dir-500: #2c5b87;
	--dir-700: #1f4366;
}

/* Mobile-only Player-Container ---------------------------------------------- */
[x-cloak] { display: none !important; }

#sq-player {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--paper);
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	color: var(--ink-700);
	/* `overflow-x: clip` statt `hidden` — `hidden` macht overflow-y zu `auto`
	   und richtet damit eine eigene Scroll-Box ein, was `position: sticky` für
	   die App-Bar bricht (Body scrollt, aber Sticky-Pin reagiert auf den
	   Scroll-Container, nicht auf Body). `clip` schneidet horizontal ab, ohne
	   Scroll-Box zu eröffnen — Sticky bleibt am Body angedockt. */
	overflow-x: clip;
}

#sq-player .sq-loading {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 60vh; gap: 18px; color: var(--ink-400);
}
#sq-player .sq-loading-pulse {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--orange-500);
	animation: sq-pulse 1.4s ease-in-out infinite;
}
@keyframes sq-pulse { 0%,100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }

/* App Bar -------------------------------------------------------------------- */
/* Grid `1fr auto 1fr` hält das Titel-Center perfekt zentriert, egal ob auf einer
   Seite 1 oder 2 Buttons stehen. Die 1fr-Spalten links/rechts bekommen exakt
   die gleiche Breite, der mittlere `auto`-Bereich (Crumb + H1) sitzt mittig. */
.sq-app-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 6px;
	position: sticky; top: 0; z-index: 20;
	background: rgba(254, 252, 248, .96);
	backdrop-filter: blur(10px);
}
.sq-app-bar h1 {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em;
	color: var(--ink-900); line-height: 1.2;
}
.sq-app-bar-left {
	display: flex; align-items: center; gap: 8px;
	justify-self: start;
}
.sq-app-bar-center {
	text-align: center;
	justify-self: center;
	min-width: 0; /* erlaubt schrumpfen, falls Titel mal länger wird */
}
.sq-app-bar-right {
	display: flex; align-items: center; gap: 8px;
	justify-self: end;
}
.sq-crumb { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-300); }
.sq-ico-btn {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px);
	border: 1px solid var(--ink-100); color: var(--ink-700);
	flex-shrink: 0; cursor: pointer;
	text-decoration: none;
}
.sq-ico-btn svg { width: 18px; height: 18px; }
.sq-ico-btn--home { color: var(--teal-500, #346861); }
.sq-ico-btn--home:hover { background: rgba(255, 255, 255, .95); border-color: var(--teal-300, #b1d3cf); }
.sq-ico-btn--back { color: var(--teal-500, #346861); }
.sq-ico-btn--back:hover { background: rgba(255, 255, 255, .95); border-color: var(--teal-300, #b1d3cf); }
.sq-ico-btn--menu { color: var(--teal-500, #346861); }
.sq-ico-btn--menu:hover { background: rgba(255, 255, 255, .95); border-color: var(--teal-300, #b1d3cf); }
/* Ausgegrauter Platzhalter-Zustand für den Zurück-Button auf Übersichts-Views.
   Bleibt sichtbar (Layout/Gewohnheit), aber klar als nicht-aktiv lesbar. */
.sq-ico-btn--disabled {
	color: var(--ink-300);
	border-color: var(--ink-100);
	background: rgba(255, 255, 255, .35);
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

/* Inline-Menu unter dem Burger ----------------------------------------------- */
/* Wrapper macht das Stack-Positioning relativ zur rechten Header-Spalte. */
.sq-menu-wrap { position: relative; }
.sq-menu-stack {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 60;
}
/* Buttons im Stack erben .sq-ico-btn-Look (38x38 weiß-blur), bekommen aber
 * etwas mehr Schatten, damit sie als schwebende Aktionen lesbar bleiben. */
.sq-menu-stack .sq-ico-btn {
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .18);
	/* transform-origin oberhalb des Buttons (Richtung Burger) → Skalierung
	 * wirkt wie "aus dem Burger ausfahren". */
	transform-origin: 50% -32px;
	animation: sq-menu-pop 360ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.sq-menu-stack .sq-ico-btn:hover {
	background: #fff;
	border-color: var(--teal-300, #b1d3cf);
}
/* Stagger: jeder Button startet ca. 60 ms später → die drei "tropfen" sichtbar
 * nacheinander aus dem Burger raus. */
.sq-menu-stack > .sq-ico-btn:nth-child(1) { animation-delay:  20ms; }
.sq-menu-stack > .sq-ico-btn:nth-child(2) { animation-delay:  80ms; }
.sq-menu-stack > .sq-ico-btn:nth-child(3) { animation-delay: 140ms; }

/* Drop-and-Settle: startet versteckt + leicht über der Endposition + klein,
 * landet bei 55% etwas zu tief / zu groß (Overshoot), settled dann sanft. */
@keyframes sq-menu-pop {
	0% {
		opacity: 0;
		transform: translateY(-26px) scale(.4);
	}
	55% {
		opacity: 1;
		transform: translateY(4px) scale(1.06);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Burger selbst bekommt einen leichten "aktiven" Look, solange das Menü offen
 * ist — visuelles Anchor für den User, dass die fliegenden Buttons hier
 * herkommen. */
.sq-ico-btn--menu[aria-expanded="true"] {
	background: var(--teal-500, #346861);
	border-color: var(--teal-500, #346861);
	color: #fff;
}

/* User mit aktivierter Reduce-Motion-Präferenz: Animation ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
	.sq-menu-stack .sq-ico-btn {
		animation: sq-menu-fade 160ms ease-out backwards;
		transform: none;
	}
	@keyframes sq-menu-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

/* Floating Home-Button für Views ohne sq-app-bar (lang, start, done, demo-pick).
   Top-right über dem Viewport, gleicher Look wie .sq-ico-btn--home. */
.sq-home-fab {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 14px);
	right: calc(env(safe-area-inset-right, 0px) + 16px);
	z-index: 50;
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
	border: 1px solid var(--ink-100); color: var(--teal-500, #346861);
	cursor: pointer; text-decoration: none;
	box-shadow: 0 2px 10px -2px rgba(0,0,0,.08);
}
.sq-home-fab svg { width: 18px; height: 18px; }
.sq-home-fab:hover { border-color: var(--teal-300, #b1d3cf); transform: translateY(-1px); transition: transform .15s, border-color .15s; }

/* Progress strip + inventory + tabs (alle sticky) --------------------------- */
.sq-progress-strip {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 16px;
	position: sticky; top: 58px; z-index: 19;
	background: rgba(254, 252, 248, .96);
	backdrop-filter: blur(10px);
}
.sq-progress-bar {
	flex: 1; height: 6px; background: var(--ink-100); border-radius: 999px; overflow: hidden;
}
.sq-progress-bar i {
	display: block; height: 100%;
	background: linear-gradient(90deg, #2da94a, #5cd576);
	border-radius: 999px; transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
/* Einheitliche Schrift, gleiches Gewicht — Main grün, Side gold-gelb */
.sq-progress-strip .sq-lbl {
	font-size: .82rem; font-weight: 700; white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: #1f7a30; /* "/7"-Teil */
}
.sq-progress-strip .sq-lbl strong { color: #155a23; } /* aktuelle Zahl, gleiches Gewicht */
/* Side-Counter: nur Stern + Zahlen in Sidequest-Gelb — kein Rahmen, kein Background.
 * Auch im All-Done-State bleibt die Farbe gelb (Sidequest-Identität). */
/* Side-Counter: warmer Gelb-Gold-Ton, harmoniert mit der Goldmünze daneben.
 * Vorher #b07a00/#7a5300 wirkten zu braun gegen das Yellow-Gold der Münze. */
.sq-progress-strip .sq-lbl--side { color: #c89a2c; display: inline-flex; align-items: center; gap: 4px; }
.sq-progress-strip .sq-lbl--side strong { color: #9b7517; }

/* Coin-Image — gemeinsame Basis fuer alle 5 Verwendungsstellen.
 * Ersetzt das frueher genutzte 🪙-Emoji durch ein einheitliches Goldmuenz-PNG
 * mit dem SightQuest-Obelisk-Logo (transparenter Hintergrund). */
.sq-coin-img {
	display: inline-block; vertical-align: middle;
	flex-shrink: 0;
	object-fit: contain;
}
.sq-coin-img--lbl   { width: 16px; height: 16px; } /* Progress-Strip neben "n/m" */
.sq-coin-img--inv   { width: 26px; height: 26px; } /* Inventar-Slot 40x40 */
.sq-coin-img--pic   { width: 30px; height: 30px; } /* Side-Quest-Liste-Pic 44x44 */
.sq-coin-img--ctrl  { width: 20px; height: 20px; } /* Bedienelemente-Box 28x28 */
.sq-coin-img--howto { width: 32px; height: 32px; } /* Start-Info Side-Quest-Block (matcht Emoji-Hoehe) */

.sq-inventory {
	display: flex; align-items: center; gap: 10px;
	padding: 4px 16px 8px;
}
.sq-inventory .sq-lbl {
	font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	color: var(--ink-400); flex-shrink: 0;
}
.sq-inv-slots { display: flex; gap: 6px; flex: 1; }
/* Inventar-Slots — Sidequest-Gold-Optik, einheitlich mit Sidequest-Liste */
.sq-inv-slot {
	width: 40px; height: 40px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--gold-100); color: #c89a2c;
	border: 1px dashed var(--gold);
	flex-shrink: 0; cursor: default; padding: 0;
}
.sq-inv-slot--filled {
	background: #fff;
	border: 1px solid var(--gold);
	border-style: solid;
	cursor: pointer;
	transition: transform .15s;
	box-shadow: inset 0 0 0 3px var(--gold-100);
	overflow: hidden;
}
.sq-inv-slot--filled .sq-inv-thumb {
	display: block; width: 100%; height: 100%; object-fit: contain;
	padding: 4px;
}
/* Text-Preview im Inventar-Slot — wenn das Reward keinen Bild-Thumb hat
 * (reiner Text-Reward, z.B. Code/Wort). Ersetzt die Coin, damit der weisse
 * Filled-Hintergrund nicht leer-mit-Coin wirkt. Eng skaliert, eine Zeile. */
.sq-inv-slot--filled .sq-inv-text {
	display: block; width: 100%; padding: 0 4px;
	font-size: .6rem; font-weight: 700;
	color: var(--ink-700, #2b2b2b);
	line-height: 1.1;
	text-align: center;
	letter-spacing: -.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-inv-q {
	font-size: 1rem; font-weight: 700;
}

/* Tabs - voll-breit */
.sq-tabs {
	display: flex; padding: 0;
	border-bottom: 1px solid var(--ink-100);
	position: sticky; top: 110px; z-index: 18;
	background: rgba(254, 252, 248, .96);
	backdrop-filter: blur(10px);
}
.sq-tab {
	flex: 1; text-align: center; justify-content: center;
	padding: 12px 0 10px; font-size: .9rem; font-weight: 600; color: var(--ink-400);
	position: relative; display: inline-flex; gap: 6px; align-items: center;
	cursor: pointer;
}
.sq-tab--active { color: var(--ink-900); }
.sq-tab--active::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px;
	background: var(--orange-500); border-radius: 2px;
}
.sq-tab--side.sq-tab--active::after { background: var(--gold); }
.sq-badge {
	padding: 2px 9px; border-radius: 999px;
	font-size: .72rem; font-weight: 700; line-height: 1.2;
	background: var(--gold-100); color: #8a6a14;
	border: 1px solid var(--gold);
	min-width: 22px; display: inline-grid; place-items: center;
	font-variant-numeric: tabular-nums;
}
/* All-Done = runder, grüner Punkt mit weißem ✓ (analog zur Itinerary-
 * Done-Markierung), damit der Abschluss-Status sichtbar abgehoben ist. */
.sq-badge.sq-badge--all-done {
	background: #1f7a30; color: #fff;
	border-color: #1f7a30;
	width: 22px; height: 22px;
	min-width: 22px; padding: 0;
	border-radius: 50%;
	font-size: .82rem;
}

/* === Itinerary (Übersicht) === */
.sq-view { padding-bottom: 28px; }
.sq-itinerary {
	position: relative; padding: 12px 16px 18px;
}
.sq-it-track {
	position: absolute; left: 29px; top: 22px; bottom: 30px;
	width: 2px; background: var(--ink-100);
}
.sq-it-track i {
	position: absolute; top: 0; left: 0; width: 100%;
	background: var(--green-500);
}
.sq-it-step {
	display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
	padding: 10px 0; position: relative; align-items: center;
}
.sq-it-actions { display: flex; gap: 6px; }
.sq-it-step .sq-it-content { cursor: pointer; }
.sq-it-step--locked .sq-it-content { cursor: default; }
.sq-it-dot {
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 2px solid var(--ink-200); margin: 0 0 0 3px;
	display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--ink-400);
	z-index: 1; position: relative;
	align-self: start; margin-top: 4px;
}
.sq-it-step--done .sq-it-dot { background: #1f7a30; border-color: #1f7a30; color: #fff; }
.sq-it-step--done .sq-it-dot::before { content: "✓"; }
.sq-it-step--active .sq-it-dot {
	background: var(--orange-500); border-color: var(--orange-500); color: #fff;
	box-shadow: 0 0 0 4px rgba(255, 131, 96, .18);
	animation: sq-pulse-dot 2s ease-in-out infinite;
}
@keyframes sq-pulse-dot {
	0%, 100% { box-shadow: 0 0 0 4px rgba(255, 131, 96, .18); }
	50% { box-shadow: 0 0 0 8px rgba(255, 131, 96, .06); }
}
.sq-it-step--locked .sq-it-dot { background: var(--paper); }

/* "STATION X" — Eyebrow je nach State:
 *   gesperrt  → grau (Default)
 *   aktiv     → orange
 *   gelöst    → teal
 * Titel bleibt immer in Standard-Schriftfarbe (ink-900). */
.sq-it-content .sq-num { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-300); }
.sq-it-step--active .sq-it-content .sq-num { color: var(--orange-600); }
.sq-it-step--done   .sq-it-content .sq-num { color: var(--teal-500); }
.sq-it-content .sq-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.05rem; font-weight: 700;
	color: var(--ink-900); line-height: 1.15; margin-top: 1px;
}

.sq-done-line {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .82rem; color: #1f7a30; font-weight: 600; margin-top: 4px;
}
.sq-done-line strong { color: #155a23; letter-spacing: .04em; }
.sq-ck {
	width: 16px; height: 16px; border-radius: 50%; background: #1f7a30; color: #fff;
	display: grid; place-items: center; font-size: .65rem;
}

/* Info-Audio Link rechts */
.sq-info-link {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: #f2f8f6;
	color: var(--teal-500);
	border: 1px solid var(--teal-100);
	align-self: center;
	transition: all .2s;
	cursor: pointer;
}
.sq-info-link:hover { background: var(--teal-100); transform: translateY(-2px); }
.sq-info-link svg { width: 18px; height: 18px; }

/* Wegbeschreibung-Icon — Stahl-Blau, klar abgehoben vom Audio-Teal */
.sq-dir-link {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--dir-50); color: var(--dir-500);
	border: 1px solid var(--dir-100);
	align-self: center;
	transition: all .2s; cursor: pointer;
}
.sq-dir-link:hover { background: var(--dir-100); transform: translateY(-2px); }
.sq-dir-link svg { width: 18px; height: 18px; }

/* === Side-Quest List — gleicher Box-Look wie Inventar === */
.sq-sq-list-item {
	display: grid; grid-template-columns: 44px 1fr auto; gap: 12px;
	padding: 14px 16px; align-items: center;
	border-bottom: 1px solid var(--ink-100);
	cursor: pointer;
}
.sq-sq-list-item:last-child { border-bottom: 0; }
.sq-sq-pic {
	width: 44px; height: 44px; border-radius: 10px;
	background: var(--gold-100);
	border: 1px dashed var(--gold);
	display: grid; place-items: center;
	color: #c89a2c;
	overflow: hidden; position: relative;
}
/* Gelöste Side-Quest: Border durchgehend (analog zum gefüllten Inventar-Slot) */
.sq-sq-list-item--done .sq-sq-pic { border-style: solid; }
.sq-sq-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sq-sq-list-item .sq-num { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-300); }
.sq-sq-list-item .sq-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.02rem; font-weight: 700;
	color: var(--ink-900); line-height: 1.15; margin-top: 1px;
}
/* Side-Quest-Title bleibt in Standardfarbe — auch im Done-State */
.sq-sq-list-item .sq-arrow { color: var(--ink-300); font-size: 1.2rem; }

.sq-not-solved {
	display: inline-block; margin-top: 4px;
	font-size: .78rem; font-weight: 600;
	color: #8a6a14; background: #fcf2d3;
	padding: 3px 10px; border-radius: 999px;
}

/* === Riddle View === */
.sq-mag { padding: 14px 18px 14px; }
.sq-eyebrow {
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
	color: var(--orange-600); display: flex; gap: 8px; align-items: center;
}
.sq-eyebrow.sq-eyebrow--side { color: #8a6a14; }
.sq-eyebrow.sq-eyebrow--done { color: #155a23; }
.sq-eyebrow .sq-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.sq-title-h1 {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 800; font-size: 2rem;
	line-height: 1.02; letter-spacing: -.025em;
	color: var(--ink-900);
	margin-top: 4px;
}

/* Wegbeschreibung-Button (Stahl-Blau) — wird sowohl auf der Rätselseite
 * unter dem Title als auch auf der Start-Info als "Karte anzeigen"-Toggle
 * verwendet. Icon-Block + Label sind via flex zentriert, Pfeil sitzt
 * absolut am rechten Rand, Pill-Form (999px). */
.sq-dir-inline {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 12px; padding: 8px 44px;
	background: var(--dir-50); color: var(--dir-700);
	border: 1px solid var(--dir-100); border-radius: 999px;
	font-weight: 700; font-size: .9rem;
	cursor: pointer; width: 100%;
	transition: all .15s;
}
.sq-dir-inline:hover { background: var(--dir-100); }
.sq-dir-inline-ico {
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--dir-500); color: #fff;
	display: grid; place-items: center; flex-shrink: 0;
}
.sq-dir-inline-ico svg { width: 18px; height: 18px; }
.sq-dir-inline-lbl { text-align: center; }
.sq-dir-inline-arrow {
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	font-size: 1rem; opacity: .65;
}
/* Variante ohne Pfeil (z.B. Start-Info-Map-Toggle) — symmetrisches Padding. */
.sq-dir-inline--no-arrow { padding: 8px 18px; }

/* Solved banner */
.sq-solved-banner {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, #e8f5ec, var(--paper) 100%);
	border: 1px solid #c5e6cd;
	display: flex; align-items: center; gap: 12px;
}
.sq-ck-big {
	width: 32px; height: 32px; border-radius: 50%;
	background: #1f7a30; color: #fff;
	display: grid; place-items: center; font-size: 1rem;
	flex-shrink: 0;
}
.sq-solved-body { flex: 1; }
.sq-solved-lbl {
	font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	color: #155a23;
}
.sq-solved-ttl {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-weight: 700;
	color: var(--ink-900); font-size: 1rem; line-height: 1.15;
}
.sq-solved-ttl strong { color: #155a23; letter-spacing: .04em; }

/* Eintritts-Marker: 🎟️-Indikator in Stations-Liste + Detail-Header.
   In der Liste: dezent rechts neben dem Titel. Im Header: prominent neben
   dem Eyebrow-Label (Mainquest X / Side Quest X). */
.sq-entry-mark {
	display: inline-block;
	margin-left: 6px;
	font-size: .95em;
	line-height: 1;
	vertical-align: -0.05em;
	cursor: default;
}
.sq-entry-mark--header {
	margin-left: 8px;
	font-size: 1em;
}

/* Alt-Template-Akkordeon: native <details>/<summary>. Klappt das Alt-Inhalt
   unter dem Rätsel auf — Rätsel bleibt sichtbar, Spieler kann beide Quellen
   parallel lesen. */
.sq-alt-acc {
	margin-top: 14px;
	border: 1px solid var(--teal-100);
	background: #f2f8f6;
	border-radius: 12px;
	overflow: hidden;
}
.sq-alt-acc-summary {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
	font-size: .92rem;
	color: var(--ink-900);
}
.sq-alt-acc-summary::-webkit-details-marker { display: none; }
.sq-alt-acc-summary::marker { display: none; }
.sq-alt-acc-ico {
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--teal-100); display: grid; place-items: center;
	font-size: 1rem; flex-shrink: 0;
}
.sq-alt-acc-ttl { flex: 1; line-height: 1.4; font-weight: 500; }
.sq-alt-acc-chev {
	flex-shrink: 0; color: var(--teal-700); font-size: 1.1rem;
	transition: transform .2s ease;
}
.sq-alt-acc[open] .sq-alt-acc-chev { transform: rotate(180deg); }

/* Info-Variante (Hintergrund-/Übersetzungs-Infos, kein Eintritt): warmer
   Akzent statt Teal, damit visuell vom Eintritts-Akkordeon unterscheidbar. */
.sq-alt-acc--info {
	border-color: var(--ink-200);
	background: #fdf8f3;
}
.sq-alt-acc--info .sq-alt-acc-ico {
	background: transparent;
}
.sq-alt-acc--info .sq-alt-acc-body {
	border-top-color: var(--ink-200);
}

.sq-alt-acc-body {
	padding: 4px 14px 16px;
	border-top: 1px solid var(--teal-100);
	background: #fff;
}

/* Elementor-Slot */
.sq-elementor-slot {
	margin-top: 14px;
	border-radius: 14px; overflow: hidden;
	background: #fff;
	border: 1px solid var(--ink-100);
	box-shadow: 0 1px 2px rgba(15, 42, 39, .06), 0 2px 6px rgba(15, 42, 39, .04);
}
.sq-elementor-slot { padding: 14px; }
/* Elementor packt Inhalte in eine Kette von Containern (.elementor →
 * .e-con-boxed → .e-con-inner → widget) mit eigenem horizontalem
 * Padding und ggf. flex-Verhalten. Diese Padding/Margin-Werte
 * verschoben das Bild-Widget vom Slot-Center weg (Diana-Quittung war
 * ~16 px nach links versetzt). Hier flach drücken: alle Container
 * füllen den Slot bündig, Bilder werden über `margin: 0 auto` direkt
 * gegenüber der Slot-Padding-Box zentriert. */
.sq-elementor-slot .elementor,
.sq-elementor-slot .e-con,
.sq-elementor-slot .e-con-inner,
.sq-elementor-slot .elementor-widget,
.sq-elementor-slot .elementor-widget-container {
	padding-left: 0; padding-right: 0;
	margin-left: 0; margin-right: 0;
	max-width: 100%;
}
.sq-elementor-slot .elementor-widget-image,
.sq-elementor-slot figure { text-align: center; }
.sq-elementor-slot .elementor-widget-image img,
.sq-elementor-slot figure img,
.sq-elementor-slot img {
	display: block;
	max-width: 100%; height: auto;
	margin-left: auto; margin-right: auto;
	border-radius: 12px;
}
/* Elementor injectet auf Bilder oft margin-bottom (.elementor-widget hat 20px
 * default plus widget-container 1.25em). Im Player zu viel. */
.sq-elementor-slot .elementor-widget {
	margin-bottom: 0 !important;
}
.sq-elementor-slot .elementor-widget-image .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Hint stack */
.sq-hint-stack {
	margin-top: 14px;
	border-radius: 14px; overflow: hidden;
	background: #fff; border: 1px solid var(--ink-100);
	box-shadow: 0 1px 2px rgba(15, 42, 39, .06), 0 2px 6px rgba(15, 42, 39, .04);
}
.sq-hint {
	padding: 12px 14px; border-bottom: 1px solid var(--ink-100);
	display: flex; align-items: center; gap: 12px;
	transition: background .25s;
	width: 100%; text-align: left;
	border-left: 0; border-right: 0; border-top: 0;
	background: transparent; cursor: pointer;
}
.sq-hint:last-child { border-bottom: 0; }
.sq-hint-ico {
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--ink-100); color: var(--ink-400);
	display: grid; place-items: center; font-size: .95rem; flex-shrink: 0;
	transition: all .25s;
}
.sq-hint-body { flex: 1; min-width: 0; }
.sq-hint-lbl { font-size: .78rem; font-weight: 700; color: var(--ink-500); }
.sq-hint-text {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: .92rem; color: var(--ink-700);
	line-height: 1.5; margin-top: 4px;
}
.sq-reveal-btn {
	font-size: .65rem; font-weight: 700; padding: 6px 12px;
	border-radius: 999px;
	text-transform: uppercase; letter-spacing: .1em;
	background: var(--orange-100);
	color: var(--orange-700);
	border: 1px solid var(--orange-200);
	flex-shrink: 0;
	transition: all .15s;
}
.sq-reveal-btn:hover { background: var(--orange-200); }

.sq-hint--open { background: #f2f8f6; }
.sq-hint--open .sq-hint-ico { background: var(--teal-100); color: var(--teal-700); }
.sq-hint--open .sq-hint-lbl { color: var(--teal-700); }

/* Lösung aufgedeckt — kräftiges, positives Violett */
.sq-hint--solution.sq-hint--open { background: #f1eafd; }
.sq-hint--solution.sq-hint--open .sq-hint-ico { background: #6a3ed4; color: #fff; }
.sq-hint--solution.sq-hint--open .sq-hint-lbl { color: #4a2799; }
.sq-hint--solution.sq-hint--open .sq-hint-text { color: #2f1965; font-weight: 600; }

/* Locked-State (vorherige Stufe noch nicht aufgedeckt) */
.sq-hint--locked { cursor: not-allowed; opacity: .55; }
.sq-hint--locked .sq-hint-lbl { color: var(--ink-300); }
.sq-hint--locked:hover { background: transparent; }

/* Reward burst */
.sq-reward-burst {
	margin: 16px 0 0; padding: 18px 16px;
	background: #fff; border-radius: 16px;
	border: 1px solid var(--ink-100);
	box-shadow: 0 1px 2px rgba(15, 42, 39, .06), 0 2px 6px rgba(15, 42, 39, .04);
	text-align: center;
}
.sq-reward-lbl {
	font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
	color: var(--orange-600);
}
.sq-reward-pic {
	margin: 14px auto 0; max-width: 240px;
	display: grid; place-items: center;
}
.sq-reward-pic img { max-width: 100%; height: auto; }

/* Answer bar */
.sq-answer-bar {
	position: sticky; bottom: 0; z-index: 15;
	border-top: 1px solid var(--ink-100);
	background: rgba(254, 252, 248, .96);
	backdrop-filter: blur(10px);
	padding: 10px 16px 14px;
}
.sq-answer-input {
	display: flex; gap: 8px;
	padding: 4px 4px 4px 14px; border-radius: 14px;
	background: #fff; border: 2px solid var(--orange-200);
	box-shadow: 0 0 0 4px rgba(255, 131, 96, 0); transition: all .2s;
}
.sq-answer-input:focus-within { border-color: var(--orange-500); box-shadow: 0 0 0 4px rgba(255, 131, 96, .14); }
.sq-answer-input.sq-shake { animation: sq-shake .35s; }
@keyframes sq-shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}
.sq-answer-input input {
	flex: 1; border: 0; background: transparent; outline: none;
	font-size: 1rem; font-weight: 600; color: var(--ink-900); padding: 8px 0;
	letter-spacing: .04em;
}
.sq-answer-input input::placeholder { color: var(--ink-300); font-weight: 500; letter-spacing: 0; }
.sq-answer-input button {
	padding: 0 14px; border-radius: 10px;
	background: var(--orange-500); color: #fff; font-weight: 700; font-size: .82rem;
	display: flex; align-items: center; gap: 4px;
	cursor: pointer; border: 0;
}
.sq-answer-helper {
	font-size: .68rem; color: var(--ink-400); margin-top: 8px; padding: 0 4px;
	line-height: 1.4;
}

/* "Nächste Station"-Button nach Lösung — dezent unter dem Hint-Stack im Content */
.sq-next-btn {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 16px; padding: 14px 18px;
	background: var(--paper);
	border: 1px solid var(--orange-200);
	border-radius: 14px;
	color: var(--orange-700);
	font-weight: 700; font-size: .92rem;
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
}
.sq-next-btn:hover {
	background: var(--orange-100);
	border-color: var(--orange-500);
	color: var(--orange-700);
}
.sq-next-btn-lbl { flex: 1; }
.sq-next-btn-arrow {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--orange-500); color: #fff;
	display: grid; place-items: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px -3px rgba(255, 131, 96, .55);
}
.sq-next-btn-arrow svg { width: 18px; height: 18px; }

/* Sidequest-Variante: Gold/Gelb-Optik */
.sq-next-btn--side {
	border-color: var(--gold);
	color: #7a5300;
}
.sq-next-btn--side:hover {
	background: var(--gold-100);
	border-color: var(--gold);
	color: #7a5300;
}
.sq-next-btn--side .sq-next-btn-arrow {
	background: var(--gold); color: #7a5300;
	box-shadow: 0 4px 12px -3px rgba(244, 197, 114, .65);
}

/* === Audio Player === */
.sq-aud {
	margin: 12px 16px 0;
	background: #fff; border-radius: 16px;
	padding: 16px; border: 1px solid var(--ink-100);
	box-shadow: 0 1px 2px rgba(15, 42, 39, .06), 0 2px 6px rgba(15, 42, 39, .04);
}
.sq-aud-ttl-row {
	display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
}
.sq-aud-ttl {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1rem; font-weight: 700;
	color: var(--ink-900); line-height: 1.2; flex: 1;
}
.sq-aud-speed {
	appearance: none; -webkit-appearance: none;
	padding: 5px 26px 5px 10px;
	border-radius: 999px;
	background: var(--ink-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%238b9ba2' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 8px center / 10px;
	font-size: .72rem; font-weight: 700; color: var(--ink-500);
	border: 0; cursor: pointer; flex-shrink: 0;
}
.sq-aud-scrub-row { position: relative; padding: 6px 0 0; }
.sq-aud-scrub {
	height: 4px; border-radius: 4px; background: var(--ink-100);
	position: relative; cursor: pointer;
	/* touch-action:none — verhindert, dass der Browser horizontale
	 * Wischer für Page-Scroll abfängt; sonst bricht der Drag ab. */
	touch-action: none;
}
.sq-aud-scrub i {
	position: absolute; top: 0; left: 0; bottom: 0;
	background: var(--teal-500); border-radius: 4px;
}
.sq-aud-knob {
	position: absolute; top: 50%;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--teal-500); transform: translate(-50%, -50%);
	box-shadow: 0 2px 6px rgba(52, 104, 97, .5), 0 0 0 4px rgba(52, 104, 97, .12);
	cursor: grab; pointer-events: none;
}
.sq-aud-time {
	display: flex; justify-content: space-between;
	font-size: .72rem; color: var(--ink-400); margin-top: 8px; padding: 0 2px;
	font-variant-numeric: tabular-nums;
}
.sq-aud-controls {
	display: flex; align-items: center; justify-content: center; gap: 26px;
	margin-top: 12px;
}
.sq-aud-ctrl {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: #f3f5f5; color: var(--ink-700);
	font-size: .72rem; font-weight: 700;
	position: relative; border: 0; cursor: pointer;
}
.sq-aud-ctrl--play {
	width: 56px; height: 56px;
	background: var(--teal-500); color: #fff;
	box-shadow: 0 6px 14px -4px rgba(52, 104, 97, .5);
}
.sq-aud-ctrl--play svg { width: 24px; height: 24px; }
.sq-aud-skip-num {
	position: absolute; bottom: 2px; right: 4px; font-size: .6rem; color: var(--ink-400); font-weight: 600;
}

.sq-aud-error {
	margin: 10px 16px 0;
	padding: 10px 14px;
	background: #fff5ec;
	color: var(--orange-700, #b85a3d);
	border: 1px solid #ffd9c4;
	border-radius: 10px;
	font-size: .88rem;
	text-align: center;
}

.sq-info-body {
	padding: 16px 18px 24px;
}
.sq-info-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.sq-info-body p { font-size: .95rem; line-height: 1.6; color: var(--ink-700); margin: 8px 0; }
.sq-info-body h2, .sq-info-body h3 { color: var(--ink-900); font-family: var(--font-editorial, 'Fraunces', Georgia, serif); }

/* Hinweis-Box wenn Info+Audio für diese Station noch fehlen */
.sq-info-empty {
	margin: 16px 16px 0;
	padding: 14px 16px; border-radius: 12px;
	background: var(--ink-100); color: var(--ink-500);
	font-size: .9rem; line-height: 1.5; text-align: center;
}

/* === Companion-Hint-Pills oben im Info-View ===
 * Sichtbarkeits-Anker direkt am Top der Info-Seite — signalisiert, dass es
 * unten einen Bonus-Block gibt. Tap → smooth-scroll zum jeweiligen Block. */
.sq-companion-pills {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 12px 16px 0;
}
.sq-companion-pill {
	display: flex; align-items: center; gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--accent-gold, #d4a93a);
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent-gold, #d4a93a) 8%, #fff);
	color: var(--ink-900);
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.sq-companion-pill:hover {
	background: color-mix(in srgb, var(--accent-gold, #d4a93a) 16%, #fff);
	transform: translateY(-1px);
}
.sq-companion-pill:active { transform: translateY(0); }
/* Eyebrow + Sight-Name nebeneinander in einer Zeile, baseline-aligned. */
.sq-companion-pill-lbl {
	display: flex; align-items: baseline;
	gap: 10px;
	flex: 1; min-width: 0;
	text-align: left;
}
.sq-companion-pill-eyebrow {
	font-size: .72rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--accent-gold, #d4a93a);
	white-space: nowrap;
}
.sq-companion-pill-name {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.05rem; font-weight: 700; color: var(--ink-900);
	line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sq-companion-pill-arrow {
	font-weight: 700; color: var(--accent-gold, #d4a93a);
	font-size: 1.1rem; line-height: 1; flex-shrink: 0;
}

/* === Companion-Sights (Bonus-Sehenswürdigkeiten an einer Quest-Station) ===
 * Visuell als untergeordneter Block — schmaler Gold-Akzent links als
 * "auch-interessant"-Hinweis, ansonsten gleicher Lese-Flow wie Haupt-Info. */
.sq-companion {
	margin: 24px 16px 0;
	padding-left: 14px;
	border-left: 3px solid var(--accent-gold, #d4a93a);
	scroll-margin-top: 80px; /* App-Bar überlappt sonst beim scrollIntoView */
}
.sq-companion-h {
	display: flex; flex-direction: column;
	gap: 2px; margin-bottom: 10px;
}
.sq-companion-lbl {
	font-size: .72rem; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--accent-gold, #d4a93a);
}
.sq-companion-name {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.15rem; font-weight: 600; color: var(--ink-900);
	line-height: 1.25;
}
/* Audio-Player im Companion-Block: gleiche Optik wie Haupt-Audio, nur ohne
 * äußeres Margin (sitzt schon im .sq-companion-Wrapper). */
.sq-aud--companion { margin: 8px 0 0; }
/* Inner Info-Body im Companion: Standard-Padding leicht reduziert. */
.sq-companion .sq-info-body { padding: 12px 0 4px; }
/* Wegbeschreibungs-Button im Companion: Inline-Style wie Haupt-Directions,
 * leicht kleiner damit die Hierarchie klar bleibt. */
.sq-dir-inline--companion {
	margin-top: 6px;
	font-size: .92rem;
}

/* === Sprachauswahl — blockierender erster Schritt === */
.sq-view--lang {
	min-height: 100vh; padding: 32px 24px;
	display: flex; align-items: center; justify-content: center;
}
.sq-lang-card {
	background: #fff; border-radius: 24px; padding: 40px 28px;
	box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100);
	text-align: center; max-width: 400px; width: 100%;
}
.sq-lang-emoji { font-size: 3.6rem; line-height: 1; }
.sq-lang-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.6rem; font-weight: 700; line-height: 1.2;
	color: var(--ink-900); margin-top: 18px;
}
.sq-lang-title-en { color: var(--ink-400); font-size: 1.05rem; font-weight: 500; }
.sq-lang-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.sq-lang-btn {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 20px; border-radius: 14px;
	background: var(--paper); color: var(--ink-900);
	border: 2px solid var(--ink-100);
	font-weight: 700; font-size: 1.02rem;
	cursor: pointer; transition: all .15s;
}
.sq-lang-btn:hover { border-color: var(--teal-500); background: var(--teal-050, #f2f8f6); }
.sq-lang-flag { font-size: 1.4rem; flex-shrink: 0; }

/* === Start-Info-Page === */
.sq-view--start { padding: 20px 18px 40px; }
.sq-start-greeting {
	background: #fff; border-radius: 16px; padding: 18px 20px;
	box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100);
}
/* Welcome-Heading im klassischen Site-Titel-Stil:
 * Teal-Farbe + italic + wavy-orange-Underline (gleiche SVG wie .section-title em
 * aus app.css, hier inline kopiert weil Player-Shell app.css nicht lädt). */
.sq-start-greeting-h {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-style: italic;
	font-size: 1.5rem; line-height: 1.2;
	color: var(--teal-500, #346861);
	margin: 0 0 12px;
	display: inline-block;
	position: relative;
}
.sq-start-greeting-h::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -0.05em;
	height: 0.18em;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 2, 198 8' stroke='%23ff8360' stroke-width='3.5' stroke-linecap='round' fill='none'/></svg>") no-repeat center / 100% 100%;
}
.sq-start-greeting-body {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.05rem; line-height: 1.55; color: var(--ink-700);
}

/* Map ist optional / lazy-loaded — Button selbst nutzt .sq-dir-inline,
 * weil Optik 1:1 dem Wegbeschreibungs-Button auf den Rätselseiten
 * entspricht (visuelle Konsistenz für „Action-Buttons"). */
.sq-start-maptoggle { margin-top: 14px; }
/* Demo-Only: Einleitungssatz über dem "Stationen auf Karte anzeigen"-Button.
   Sitzt im gleichen Schriftbild wie die How-To-Absätze, dezent grau. */
.sq-start-map-intro {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ink-700);
	margin: 0 0 10px;
	padding: 0 4px;
}
.sq-start-mapcard {
	margin-top: 12px;
	border-radius: 18px; overflow: hidden;
	box-shadow: var(--shadow-md, 0 8px 24px -10px rgba(0,0,0,.18));
	border: 1px solid var(--ink-100);
	background: #fff;
}
.sq-start-map-wrap { position: relative; }
.sq-start-map { width: 100%; height: 320px; }
@media (min-width: 720px) {
	.sq-start-map { height: 380px; }
}

/* Map-Pin — gleiche Komponente wie Deep-Dive (.sq-pin Teardrop, rotiert).
 * Wird hier dupliziert, weil app.css im Player-Shell nicht geladen ist und
 * die Pins offline-fähig sein müssen. Default Orange (statt Teal wie im
 * Deep-Dive-Default), weil Orange-Akzent zur Player-Brand passt. */
.leaflet-container { font-family: var(--font-body, inherit) !important; }
.sq-pin {
	width: 32px; height: 32px;
	border-radius: 50% 50% 50% 0;
	background: var(--orange-500);
	color: #fff;
	font-weight: 800; font-size: 0.92rem;
	display: flex; align-items: center; justify-content: center;
	transform: rotate(-45deg);
	box-shadow: 0 4px 10px -2px rgba(15, 42, 39, 0.35);
	border: 2px solid #fff;
	transition: background .2s, transform .2s;
}
.sq-pin span { transform: rotate(45deg); }
.sq-pin--sub { font-size: .68rem; }

/* Meta-Pills — Optik analog zu .pd-facts auf den Deep-Dive-Marketing-Seiten,
 * aber kompakter (kleinerer Font + Padding), damit alle 4 Pills bei
 * üblichen Mobile-Breiten in eine Zeile passen. */
.sq-start-meta {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	margin-top: 14px;
}
.sq-start-pill {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.32rem 0.68rem;
	background: #fff;
	border-radius: 999px;
	font-size: 0.78rem;
	color: var(--ink-700);
	font-weight: 500;
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
	border: 1px solid var(--ink-100);
	white-space: nowrap;
}
.sq-start-pill strong { color: var(--ink-900); font-weight: 700; }

.sq-start-entry {
	margin-top: 16px; padding: 14px 16px;
	background: var(--orange-100); border: 1px solid var(--orange-200);
	border-radius: 14px;
}
.sq-start-entry-head { display: flex; align-items: center; gap: 8px; }
.sq-start-entry-ico { font-size: 1.2rem; }
.sq-start-entry-ttl { font-weight: 700; color: var(--orange-700); font-size: .92rem; }
.sq-start-entry-list { margin-top: 8px; padding: 0; }
.sq-start-entry-list li { font-size: .9rem; color: var(--ink-900); padding: 2px 0; }
.sq-start-entry-list li strong { font-weight: 700; }
.sq-start-entry-note { font-size: .82rem; color: var(--ink-500); margin-top: 8px; line-height: 1.45; }

.sq-start-section-h {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-size: 1.05rem; color: var(--ink-900);
}
.sq-start-section-p { font-size: .9rem; color: var(--ink-500); margin-top: 4px; line-height: 1.5; }

/* Side-Quest-Beispiel-Reihen — original Pfeil-Layout (.sq-start-side-row),
 * angepasst an den white-card-Kontext: dezenter ink-50 BG, ink-100 Border.
 * Der Pfeil bleibt als visuelles Bindeglied, leicht teal-getönt für eine
 * eigene Side-Quest-Identität (kein Gold mehr — Gold gehört jetzt zu Sternen). */
.sq-start-side-list {
	margin: 12px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
}
.sq-start-side-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: var(--ink-50, #f7f5f1);
	border: 1px solid var(--ink-100);
	border-radius: 10px;
	font-size: .9rem;
}
.sq-start-side-from { font-weight: 700; color: var(--ink-900); flex: 1; }
.sq-start-side-arrow {
	color: var(--teal-500, #346861); font-weight: 700;
	flex-shrink: 0; font-size: 1rem;
}
.sq-start-side-to { color: var(--ink-700); font-weight: 600; flex: 1; text-align: right; }

/* "So funktioniert das Spiel" — strukturierte Anleitung mit Sub-Sections.
 * Jeder Block: kleines Icon-Badge links, Headline + Beschreibung rechts. */
.sq-start-howto {
	margin-top: 18px; padding: 18px 16px 6px;
	background: #fff; border: 1px solid var(--ink-100);
	border-radius: 16px;
}
.sq-start-howto-head {
	display: flex; align-items: center; gap: 10px;
	padding-bottom: 14px; border-bottom: 1px solid var(--ink-100);
	margin-bottom: 14px;
}
.sq-start-howto-ico { font-size: 1.3rem; }
.sq-start-howto-ttl {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-size: 1.1rem; color: var(--ink-900);
}
.sq-start-howto-block {
	display: flex; gap: 14px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--ink-100);
}
.sq-start-howto-block:last-child { border-bottom: 0; padding-bottom: 14px; }

.sq-start-howto-row {
	flex-shrink: 0;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	min-width: 36px; padding-top: 2px;
}
.sq-start-howto-emoji { font-size: 1.5rem; line-height: 1; }
/* Statische .sq-info-link / .sq-dir-link Kopien im howto-Block — keine
 * Hover-Animation, weil sie hier rein illustrativ sind. */
.sq-start-howto-static { cursor: default; pointer-events: none; }
.sq-start-howto-static:hover { transform: none !important; background: inherit !important; }
.sq-start-howto-badge {
	display: grid; place-items: center;
	width: 28px; height: 28px;
	border-radius: 999px; font-weight: 800; font-size: .82rem;
	color: #fff; line-height: 1;
}
.sq-start-howto-badge--main { background: var(--orange-500); }
.sq-start-howto-badge--side { background: var(--gold); color: #fff; font-size: .9rem; }

.sq-start-howto-text { flex: 1; min-width: 0; }
.sq-start-howto-text--full { padding-left: 0; }
.sq-start-howto-h {
	font-weight: 700; font-size: .95rem; color: var(--ink-900);
	margin-bottom: 4px;
}
.sq-start-howto-p {
	font-size: .88rem; line-height: 1.5; color: var(--ink-700);
	margin: 0;
}
/* Fußnote für den Eintritts-Disclaimer — kleiner, gedimmt, italic. */
.sq-start-howto-fineprint {
	margin: 6px 0 0;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--ink-500, #6b7975);
	font-style: italic;
}
/* "Zum Beispiel:" — Mini-Intro vor der Side-Quest-Pärchen-Liste. Sitzt mit
   etwas Luft nach oben gegen den vorherigen Absatz. */
.sq-start-side-example-intro {
	margin-top: 10px;
	font-weight: 600;
	color: var(--ink-700);
}

/* Bedienelemente-Liste (Mini-Icons + Beschreibungen) */
.sq-start-controls-list {
	margin: 10px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
}
.sq-start-controls-list li {
	display: flex; align-items: center; gap: 12px;
	font-size: .85rem; line-height: 1.4; color: var(--ink-700);
	padding: 8px 12px; background: var(--ink-50, #f7f5f1);
	border-radius: 10px;
}
.sq-start-ctrl-ico {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 28px; height: 28px; border-radius: 8px;
	background: #fff; border: 1px solid var(--ink-100);
	color: var(--ink-700);
}
.sq-start-ctrl-ico svg { width: 16px; height: 16px; }
.sq-start-ctrl-ico--side {
	background: var(--gold); color: #fff;
	font-weight: 800; font-size: .9rem;
	border-color: var(--gold);
}

/* Punkte-Liste: kleine farbige Bullets mit Punktwert */
.sq-start-stars-list {
	margin: 10px 0 12px; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.sq-start-stars-list li {
	display: flex; align-items: center; gap: 10px;
	font-size: .88rem; line-height: 1.4; color: var(--ink-700);
}
/* Sterne-Liste: pro Zeile drei ⭐-Emoji-Glyphs — gefüllte Sterne behalten
 * das System-Emoji (3D-Goldglanz analog zur ⭐ neben dem Heading), leere
 * Sterne werden via grayscale + opacity ausgeblasst. Same shape, gleicher
 * Glanz, dezenter Empty-Zustand. */
.sq-start-stars {
	flex-shrink: 0;
	display: inline-flex; gap: 2px;
	min-width: 64px;
	font-size: 1rem; line-height: 1;
}
.sq-star { display: inline-block; filter: grayscale(1) opacity(.35); }
.sq-star--on { filter: none; }
.sq-start-points-surprise {
	margin-top: 8px; font-style: italic; color: var(--ink-700);
}

/* Quest-Starten-Button — gleiche Optik wie Homepage-CTA (.btn .btn--primary
 * .btn--lg). Wird hier inline repliziert, weil app.css im Player-Shell nicht
 * geladen ist; die Klassen .btn/.btn--primary/.btn--lg im Markup sind nur
 * semantischer Marker. Werte aus app.css übernommen, damit visuelle Parität
 * 1:1 erhalten bleibt. */
.sq-start-go {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.65rem;
	width: 100%;
	margin-top: 24px;
	padding: 1.15rem 2rem;
	border-radius: 999px;
	border: 0;
	background: var(--orange-500);
	color: #fff;
	font-weight: 600;
	font-size: 1.06rem;
	letter-spacing: -0.005em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 20px -6px rgba(255, 131, 96, 0.6),
	            inset 0 -3px 0 rgba(201, 80, 45, 0.25);
	transition: transform .2s ease-out, box-shadow .25s ease-out, background .2s;
}
.sq-start-go:hover {
	background: var(--orange-600);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(255, 131, 96, 0.65),
	            inset 0 -3px 0 rgba(201, 80, 45, 0.25);
}
.sq-start-go:active { transform: translateY(0); }
.sq-start-go .arrow {
	display: inline-block;
	transition: transform 0.25s ease-out;
}
.sq-start-go:hover .arrow { transform: translateX(4px); }

/* Teal-Variante — spiegelt .btn--secondary aus app.css (Tour-/Demo-CTAs).
   Gleiche Form wie .sq-start-go (Pill, breit, Pressing-Inset), aber Teal-Farbwelt. */
.sq-start-go--teal {
	background: var(--teal-500, #346861);
	box-shadow: 0 6px 20px -6px rgba(52, 104, 97, 0.6),
	            inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}
.sq-start-go--teal:hover {
	background: var(--teal-600, #265149);
	box-shadow: 0 12px 32px -8px rgba(52, 104, 97, 0.65),
	            inset 0 -3px 0 rgba(38, 81, 73, 0.35);
}

/* === Quest Done — Glückwunsch-View === */
.sq-view--done {
	padding: 24px 18px 40px;
	position: relative;
	min-height: calc(100vh - 200px);
	display: flex; align-items: flex-start; justify-content: center;
}
.sq-done-card {
	background: #fff;
	border-radius: 24px;
	padding: 32px 24px;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--ink-100);
	text-align: center; max-width: 420px;
	position: relative; z-index: 2;
}
.sq-done-emoji {
	font-size: 4rem; line-height: 1;
	animation: sq-pop 1s cubic-bezier(.22,1,.36,1);
}
@keyframes sq-pop {
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.2); opacity: 1; }
	100% { transform: scale(1); }
}
.sq-done-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.8rem; font-weight: 800;
	color: var(--ink-900); margin-top: 12px;
	letter-spacing: -.02em;
}
.sq-done-text {
	font-size: .95rem; color: var(--ink-500); margin-top: 14px;
	line-height: 1.55;
}
.sq-coupon {
	margin-top: 24px; padding: 18px;
	background: linear-gradient(135deg, var(--orange-100), #fff);
	border: 2px dashed var(--orange-500);
	border-radius: 16px;
}
.sq-coupon-lbl {
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
	color: var(--orange-700);
}
.sq-coupon-row {
	display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.sq-coupon-code {
	flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.2rem; font-weight: 700;
	color: var(--ink-900); letter-spacing: .08em;
	background: #fff; padding: 10px 14px; border-radius: 10px;
	border: 1px solid var(--orange-200);
}
.sq-coupon-copy {
	padding: 10px 14px; border-radius: 10px;
	background: var(--orange-500); color: #fff;
	font-weight: 700; font-size: .82rem;
	border: 0; cursor: pointer; flex-shrink: 0;
}
.sq-done-back-btn {
	display: block; margin-top: 22px;
	padding: 14px 16px; border-radius: 14px;
	background: var(--ink-100); color: var(--ink-700);
	font-weight: 700; font-size: .9rem; text-decoration: none;
}

/* Punkte-Sterne in Mainquest-Listen-Item — inline mit der "STATION X"-Eyebrow
 * (.sq-num), in derselben Schriftgröße wie die Eyebrow (.68rem). Sterne nutzen
 * die existierenden .sq-star / .sq-star--on Klassen aus der Start-Info. */
.sq-mq-stars {
	display: inline-flex; align-items: center;
	gap: 1px; margin-left: 8px;
	font-size: inherit;
	vertical-align: middle;
}
.sq-mq-stars .sq-star { line-height: 1; }

/* Done-View — Punkte-Score, Wait-Block, Tier-Banner */
.sq-done-score {
	margin-top: 16px;
	display: inline-flex; flex-direction: column; align-items: center;
	gap: 2px;
}
.sq-done-score-num {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 2rem; font-weight: 800;
	color: var(--ink-900); letter-spacing: -.02em;
	line-height: 1;
}
.sq-done-score-num strong { color: var(--orange-500); font-weight: 800; }
.sq-done-score-lbl {
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
	color: var(--ink-400);
}

.sq-done-wait {
	margin-top: 22px; padding: 18px;
	background: var(--paper, #fafbf8);
	border: 1px solid var(--ink-100);
	border-radius: 16px;
	text-align: center;
}
.sq-done-wait-text { font-size: .95rem; color: var(--ink-700); margin: 0 0 10px; }
.sq-done-wait-counter {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 2.4rem; font-weight: 800;
	color: var(--orange-500); letter-spacing: -.02em;
	line-height: 1; margin: 6px 0;
}
.sq-done-wait-counter strong { color: var(--orange-500); font-weight: 800; }
.sq-done-wait-counter span { color: var(--ink-400); }
.sq-done-wait-help {
	font-size: .82rem; color: var(--ink-500);
	margin: 8px 0 14px; line-height: 1.45;
}
.sq-done-force-btn {
	background: transparent; border: 1px solid var(--ink-200);
	color: var(--ink-600);
	padding: 10px 14px; border-radius: 10px;
	font-size: .82rem; font-weight: 600;
	cursor: pointer; transition: all .2s;
}
.sq-done-force-btn:hover {
	background: var(--ink-50, #f4f5f1); color: var(--ink-900);
}

/* Tier-Banner: 50 % gold, 25 % teal, 10 % orange (= Standard-Coupon-Optik) */
.sq-done-tier-wrap {
	margin-top: 22px;
}
.sq-done-tier-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.45rem; font-weight: 800;
	color: var(--ink-900, #1a1a1a);
	text-align: center;
	margin: 0 0 10px;
	letter-spacing: -.01em;
}
.sq-done-tier-wrap--50 .sq-done-tier-title { color: #6e4d05; }
.sq-done-tier-wrap .sq-done-tier {
	margin-top: 0;
}
.sq-done-tier {
	margin-top: 22px; padding: 18px 16px;
	border-radius: 16px;
	display: flex; align-items: center; gap: 14px;
	text-align: left;
}
.sq-done-tier-pct {
	flex-shrink: 0;
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 2.2rem; font-weight: 800;
	letter-spacing: -.03em; line-height: 1;
}
.sq-done-tier-msg {
	font-size: .92rem; line-height: 1.4;
	font-weight: 600;
}
.sq-done-tier--50 {
	background: linear-gradient(135deg, var(--gold-200, #ffe7a8), #fff);
	border: 2px solid var(--gold, #d4a017);
}
.sq-done-tier--50 .sq-done-tier-pct { color: var(--gold, #d4a017); }
.sq-done-tier--50 .sq-done-tier-msg { color: #6e4d05; }

.sq-done-tier--25 {
	background: linear-gradient(135deg, var(--teal-100, #d6efe8), #fff);
	border: 2px solid var(--teal-500);
}
.sq-done-tier--25 .sq-done-tier-pct { color: var(--teal-500); }
.sq-done-tier--25 .sq-done-tier-msg { color: var(--ink-700); }

.sq-done-tier--10 {
	background: linear-gradient(135deg, var(--orange-100), #fff);
	border: 2px solid var(--orange-500);
}
.sq-done-tier--10 .sq-done-tier-pct { color: var(--orange-500); }
.sq-done-tier--10 .sq-done-tier-msg { color: var(--ink-700); }

/* Confetti — kleine farbige Schnipsel die runterfallen */
.sq-confetti {
	position: absolute; inset: 0; overflow: hidden;
	pointer-events: none; z-index: 1;
}
.sq-confetti span {
	position: absolute; top: -20px; width: 8px; height: 14px;
	border-radius: 2px;
	animation: sq-confetti-fall 4s linear infinite;
}
.sq-confetti span:nth-child(1) { left: 8%;  background: var(--orange-500); animation-delay: .0s; }
.sq-confetti span:nth-child(2) { left: 22%; background: var(--gold);       animation-delay: .4s; }
.sq-confetti span:nth-child(3) { left: 36%; background: var(--teal-500);   animation-delay: .8s; }
.sq-confetti span:nth-child(4) { left: 50%; background: var(--orange-400); animation-delay: .2s; }
.sq-confetti span:nth-child(5) { left: 64%; background: var(--gold-200);   animation-delay: .6s; }
.sq-confetti span:nth-child(6) { left: 78%; background: var(--teal-400);   animation-delay: 1.0s; }
.sq-confetti span:nth-child(7) { left: 90%; background: var(--orange-500); animation-delay: .3s; }
.sq-confetti span:nth-child(8) { left: 14%; background: var(--gold);       animation-delay: 1.5s; }
@keyframes sq-confetti-fall {
	0%   { transform: translateY(-20px) rotate(0deg);    opacity: 0; }
	10%  { opacity: 1; }
	100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Inventory modal */
.sq-inv-modal {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(15, 42, 39, .55);
	display: grid; place-items: center;
	padding: 20px;
}
.sq-inv-modal-card {
	max-width: 360px; width: 100%; background: #fff;
	border-radius: 18px; padding: 24px 20px;
	position: relative; text-align: center;
	box-shadow: 0 24px 48px -16px rgba(15, 42, 39, .35);
}
.sq-inv-modal-close {
	position: absolute; top: 8px; right: 8px;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--ink-100); color: var(--ink-500);
	font-size: 1.2rem; cursor: pointer; border: 0;
}

/* Offline-Pill */
.sq-offline-pill {
	position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
	z-index: 200;
	background: rgba(15, 42, 39, .9); color: #fff;
	padding: 6px 14px; border-radius: 999px;
	font-size: .72rem; font-weight: 700;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

/* Locked-page (no access) */
.sq-player-locked {
	max-width: 480px; margin: 80px auto; padding: 0 24px; text-align: center;
}
.sq-player-locked h1 { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); color: var(--ink-900); margin-bottom: 12px; }
.sq-player-locked p { color: var(--ink-500); }

/* Tour-Player special-cases — Action-Spalte muss zwei 38px-Icons + Gap fassen,
 * sonst werden die Buttons vertikal gestaucht. */
.sq-itinerary--tour .sq-it-step--tour { grid-template-columns: 28px 1fr auto; }
.sq-itinerary--tour .sq-it-step--tour .sq-it-dot {
	background: var(--teal-100); border-color: var(--teal-500); color: var(--teal-700);
}

/* Tour-Overview: gleicher Seitenabstand wie Quest-Start-Info (.sq-view--start
 * hat 18px), damit Map-Toggle, Stations-Liste und CTAs nicht am Rand kleben.
 * Die Stations-Liste bringt sonst ihre eigenen 16px mit — beim Tour-Player
 * resetten wir die seitlich, sonst landen wir bei 34px doppeltem Abstand. */
.sq-player--tour .sq-view--overview { padding-left: 18px; padding-right: 18px; }
.sq-player--tour .sq-view--overview .sq-itinerary {
	padding-left: 0;
	padding-right: 0;
}

/* ============================================================================
 * Demo-Pick-View (Tour-Demo: User wählt 2 Sights vor dem Player-Start)
 * ========================================================================== */
.sq-view--demo-pick {
	min-height: 100dvh;
	padding: 24px 18px 32px;
	background: var(--paper, #faf7f3);
	overflow-y: auto;
}
.sq-demo-pick-wrap {
	max-width: 480px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 18px;
}
.sq-demo-pick-heading {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-style: italic;
	font-size: 1.7rem; line-height: 1.2;
	color: var(--teal-500, #346861);
	margin: 8px 0 0; text-align: center;
	display: inline-block; position: relative;
	align-self: center;
}
.sq-demo-pick-heading::after {
	content: ""; position: absolute;
	left: 0; right: 0; bottom: -0.05em; height: 0.18em;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 180 2, 198 8' stroke='%23ff8360' stroke-width='3.5' stroke-linecap='round' fill='none'/></svg>") no-repeat center / 100% 100%;
}
.sq-demo-pick-subhead {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.0rem; line-height: 1.5;
	color: var(--ink-700); text-align: center;
	margin: 0;
}

/* Pick-Tiles — einspaltig, Stationen-Liste-Optik */
.sq-demo-pick-tiles {
	display: flex; flex-direction: column; gap: 10px;
	margin-top: 6px;
}
.sq-demo-pick-tile {
	position: relative;
	background: #fff; color: var(--ink-900);
	border: 2px solid var(--ink-100); border-radius: 999px;
	padding: 12px 22px;
	text-align: left; cursor: pointer;
	transition: border-color .15s, background .15s;
	display: flex; align-items: center;
	font: inherit;
}
/* Hover NUR auf nicht-selektierte Tiles, sonst überschreibt der Hover-State
 * (Spezifität: Klasse + Pseudoklasse > nur Klasse) den Selected-Rand und
 * der bleibt nach dem Tap auf Mobile in der blassen Hover-Farbe hängen,
 * bis der User woanders hin tippt. */
.sq-demo-pick-tile:not(.sq-demo-pick-tile--selected):hover {
	border-color: var(--teal-300, #b1d3cf);
}
/* Tour-Kontext: Auswahl mit Teal-Rand ohne Glow, der Haken übernimmt das
 * visuelle Highlight. */
.sq-demo-pick-tile--selected {
	border-color: var(--teal-500, #346861);
}
.sq-demo-pick-tile--dimmed { opacity: .45; }
.sq-demo-pick-tile-check {
	position: absolute; top: 50%; right: 14px;
	transform: translateY(-50%);
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--teal-500, #346861); color: #fff;
	font-size: .9rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.sq-demo-pick-tile-title {
	font-weight: 700; font-size: 1.0rem; line-height: 1.25;
}

.sq-demo-pick-empty {
	background: #fff; border: 1px dashed var(--ink-200, #d8d3cc);
	border-radius: 14px; padding: 22px 18px;
	color: var(--ink-500); text-align: center; font-size: .95rem;
}

.sq-demo-pick-max {
	background: #fff5ec; color: var(--orange-700, #b85a3d);
	border-radius: 10px; padding: 10px 14px;
	font-size: .88rem; text-align: center;
	border: 1px solid #ffd9c4;
}

.sq-demo-pick-footer {
	margin-top: 8px;
	display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.sq-demo-pick-counter {
	text-align: center; color: var(--ink-500); font-size: .9rem;
	font-weight: 600;
}
.sq-demo-pick-cta { margin-top: 4px; }
.sq-demo-pick-cta:disabled {
	opacity: .45; cursor: not-allowed; transform: none !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}

/* ============================================================================
 * Demo-Done-View (Quest + Tour)
 * ========================================================================== */
.sq-done-card--demo {
	background: #fff; border-radius: 24px;
	padding: 32px 24px 28px;
	box-shadow: var(--shadow-lg, 0 12px 32px -10px rgba(0,0,0,.15));
	border: 1px solid var(--ink-100);
	max-width: 440px; margin: 0 auto;
	text-align: center;
	display: flex; flex-direction: column; gap: 14px;
}
.sq-done-card--demo .sq-done-emoji {
	font-size: 3rem; line-height: 1;
}
.sq-done-card--demo .sq-done-title {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-weight: 700; font-style: italic;
	color: var(--teal-500, #346861);
	font-size: 1.55rem; line-height: 1.2;
	margin: 0;
}
.sq-done-card--demo .sq-done-text {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	color: var(--ink-700);
	font-size: 1.02rem; line-height: 1.5;
	margin: 0;
}
.sq-done-demo-cta {
	margin-top: 8px; text-decoration: none;
}

.sq-done-easter-egg {
	margin-top: 16px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #fffaf5, #fff5ec);
	border: 1px dashed var(--orange-400, #ffb59c);
	border-radius: 14px;
}
.sq-done-easter-egg-hint {
	font-size: .92rem; line-height: 1.5;
	color: var(--ink-700); margin: 0 0 10px;
}
.sq-done-easter-egg-link {
	display: inline-block;
	color: var(--orange-600, #d6552e);
	font-weight: 700; font-size: .92rem;
	text-decoration: underline; text-decoration-color: var(--orange-300, #ffb59c);
}
.sq-done-easter-egg-link:hover { color: var(--orange-700, #b85a3d); }

/* Tour-Demo Done-Block: kompakter, weil er IN der Info-View hängt.
 * Margin auto + width-calc → zentriert mit 16 px Mindestabstand zum Viewport-Rand,
 * deckelt aber bei max-width 440 px (geerbt von .sq-done-card--demo). */
.sq-tour-demo-done {
	margin: 28px auto 20px;
	width: calc(100% - 32px);
	padding: 22px 20px 20px;
}
.sq-tour-demo-done .sq-done-title {
	font-size: 1.35rem;
}

/* ============================================================================
 * Feedback-Station (Tour) + Feedback-Form (Quest-Done + Tour-Feedback)
 * ========================================================================== */

/* Pseudo-Station "Feedback" am Ende der Tour-Stations-Liste — Teal-Akzent,
 * gestrichelter Rahmen, damit sie sich klar von echten Stops abhebt.
 * Margin-top schafft Luft zwischen letztem echten Stop und Feedback-Eintrag. */
.sq-it-step--feedback {
	margin-top: 22px;
	background: linear-gradient(135deg, var(--teal-50, #eef7f5), #fff);
	border: 1.5px dashed var(--teal-500, #346861);
	border-radius: 14px;
	padding: 6px 8px;
	cursor: pointer;
	transition: background .15s, transform .12s;
}
.sq-it-step--feedback:hover {
	background: linear-gradient(135deg, var(--teal-100, #d6efe8), #fff);
}
.sq-it-step--feedback .sq-it-content { cursor: pointer; }
.sq-it-dot--feedback {
	background: var(--teal-500, #346861) !important;
	border-color: var(--teal-500, #346861) !important;
	color: #fff !important;
	font-weight: 800; font-size: 1rem;
	display: flex; align-items: center; justify-content: center;
}

/* Feedback-View (Tour) — nutzt sq-done-card als Container. */
.sq-view--feedback {
	padding: 18px;
	min-height: calc(100vh - 200px);
}
.sq-feedback-card {
	max-width: 460px; margin: 12px auto 0;
}
.sq-fb-demo-note {
	margin: 10px 0 0;
	font-size: .82rem; color: var(--ink-500);
	background: var(--ink-50, #f4f5f1);
	border-radius: 10px; padding: 8px 12px;
}

/* Coupon-Variante "Tour" — Teal statt Orange, damit Quest- und Tour-Coupon
 * sich visuell unterscheiden lassen. Erbt die Layout-Regeln von .sq-coupon. */
.sq-coupon--tour {
	background: linear-gradient(135deg, var(--teal-100, #d6efe8), #fff);
	border: 2px dashed var(--teal-500, #346861);
}
.sq-coupon--tour .sq-coupon-lbl {
	color: var(--teal-700, #1d4a44);
}
.sq-coupon--tour .sq-coupon-code {
	border-color: var(--teal-200, #b1d3cf);
}
.sq-coupon--tour .sq-coupon-copy {
	background: var(--teal-500, #346861);
}
.sq-coupon-msg {
	font-size: .85rem; color: var(--ink-600, #525249);
	margin: 6px 0 10px; line-height: 1.5;
	text-align: left;
}

/* Feedback-Form-Block (Quest-Done — innerhalb sq-done-card) */
.sq-feedback-block {
	margin-top: 20px;
	text-align: left;
}
.sq-feedback-divider {
	height: 1px; background: var(--ink-100, #e6e3dc);
	margin: 0 -8px 18px;
}
.sq-fb-heading {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.25rem; font-weight: 800;
	color: var(--ink-900); margin: 0 0 6px;
	text-align: center;
}
.sq-fb-sub {
	font-size: .88rem; line-height: 1.5;
	color: var(--ink-500); margin: 0 0 14px;
	text-align: center;
}

/* Form-Layout (geteilt) */
.sq-feedback-form {
	display: flex; flex-direction: column; gap: 14px;
	margin-top: 12px;
}
.sq-fb-block {
	display: flex; flex-direction: column; gap: 6px;
	text-align: left;
}
.sq-fb-label {
	font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--ink-600, #525249);
}

/* Sterne-Picker — große Touch-Targets, Hover-Vorschau */
.sq-fb-stars {
	display: flex; gap: 4px;
	align-items: center; justify-content: center;
}
.sq-fb-star {
	background: none; border: 0; padding: 4px 6px;
	cursor: pointer; line-height: 1;
	font-size: 2.2rem;
	color: var(--ink-200, #d8d3cc);
	transition: color .12s, transform .12s;
	-webkit-tap-highlight-color: transparent;
}
.sq-fb-star:hover { transform: scale(1.08); }
.sq-fb-star--on,
.sq-fb-star--hover { color: var(--gold, #d4a017); }
.sq-fb-star:focus-visible {
	outline: 2px solid var(--teal-500, #346861);
	outline-offset: 3px; border-radius: 4px;
}

.sq-fb-text {
	width: 100%;
	min-height: 96px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1.5px solid var(--ink-200, #d8d3cc);
	background: #fff;
	font: inherit; font-size: .95rem;
	color: var(--ink-900);
	resize: vertical;
	box-sizing: border-box;
}
.sq-fb-text:focus {
	outline: none;
	border-color: var(--teal-500, #346861);
	box-shadow: 0 0 0 3px rgba(52, 104, 97, .15);
}

.sq-fb-error {
	font-size: .85rem; color: #b85a3d;
	background: #fff5ec;
	border: 1px solid #ffd9c4;
	border-radius: 8px; padding: 8px 12px;
}

.sq-fb-submit {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; align-self: stretch;
	padding: 14px 18px; border-radius: 14px;
	border: 0; cursor: pointer;
	font-weight: 700; font-size: 1rem;
	color: #fff;
	background: var(--teal-500, #346861);
	transition: background .15s, transform .12s, opacity .12s;
}
.sq-fb-submit:hover:not(:disabled) {
	background: var(--teal-700, #1d4a44);
}
.sq-fb-submit:disabled {
	opacity: .5; cursor: not-allowed;
}
/* Quest-Done-Variante: orange statt teal, weil Quest-Done generell Orange-Tier ist. */
.sq-fb-submit--orange {
	background: var(--orange-500);
}
.sq-fb-submit--orange:hover:not(:disabled) {
	background: var(--orange-700, #b85a3d);
}

/* Success-State (nach Submit) */
.sq-fb-success {
	margin-top: 14px;
	padding: 22px 18px;
	text-align: center;
	background: linear-gradient(135deg, var(--teal-50, #eef7f5), #fff);
	border: 1px solid var(--teal-200, #b1d3cf);
	border-radius: 14px;
}
.sq-fb-success-ico {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--teal-500, #346861); color: #fff;
	font-size: 1.4rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 10px;
}
.sq-fb-success-h {
	font-family: var(--font-editorial, 'Fraunces', Georgia, serif);
	font-size: 1.15rem; font-weight: 800;
	color: var(--ink-900);
}
.sq-fb-success-p {
	font-size: .88rem; line-height: 1.5;
	color: var(--ink-500); margin: 6px 0 0;
}

/* ----------------------------------------------------------------------
   Offline-Audio Download — eingebettet im Howto-"Audio Guide"-Subblock.
   Vorher als eigene Karte (.sq-start-audiotoggle) mit Card-Look unter dem
   Map-Toggle, jetzt direkt unter der Audio-Erklärung im Howto-Container.
   Wrapper .sq-howto-audio-dl: kein Border, kein Card-Look — nur Spacing,
   damit der Button und die States sich optisch in den Howto-Text einfügen.
   ---------------------------------------------------------------------- */
.sq-howto-audio-dl {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sq-howto-audio-dl-explainer {
	margin: 0;
	color: var(--ink-600, #5a5550);
}
/* Teal-Variante von .sq-dir-inline für den Audio-Download-Button —
   nimmt die Audio-Guide-Optik aus .sq-info-link (#f2f8f6 bg, teal border + ink).
   .sq-dir-inline ist sonst Stahl-Blau (Wegbeschreibung-Optik), daher Modifier. */
.sq-dir-inline--audio {
	background: #f2f8f6;
	color: var(--teal-700, #007266);
	border-color: var(--teal-100, #cdeae5);
	margin-top: 0;
}
.sq-dir-inline--audio:hover { background: var(--teal-100, #cdeae5); }
.sq-dir-inline--audio .sq-dir-inline-ico {
	background: var(--teal-500, #00b3a4);
}
.sq-audio-dl-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--ink-100);
	border-radius: 12px;
	background: #fff;
}
.sq-audio-dl-row {
	display: flex; align-items: center; gap: 8px;
	font-size: .95rem;
	color: var(--ink-700);
}
.sq-audio-dl-row .sq-dir-inline-ico {
	flex: 0 0 auto;
}
.sq-audio-dl-bar {
	height: 6px;
	background: var(--ink-100, #eee);
	border-radius: 999px;
	overflow: hidden;
}
.sq-audio-dl-bar > i {
	display: block; height: 100%;
	background: var(--teal-500, #00b3a4);
	border-radius: 999px;
	transition: width .25s ease-out;
}
.sq-audio-dl-cancel {
	align-self: flex-end;
	background: transparent; border: none;
	color: var(--ink-500);
	font-size: .85rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 2px 4px;
}
.sq-audio-dl-done {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--teal-200, #b8e8e2);
	border-radius: 12px;
	background: #f1faf8;
	color: var(--teal-700, #007266);
	font-size: .95rem;
}
.sq-audio-dl-done .sq-dir-inline-ico {
	background: var(--teal-500, #00b3a4);
}
.sq-audio-dl-error {
	padding: 10px 12px;
	border: 1px solid #f3d6a0;
	border-radius: 12px;
	background: #fff8ec;
}
.sq-audio-dl-error p {
	margin: 0 0 8px;
	color: #8a5a00;
	font-size: .92rem;
}
@keyframes sq-audio-dl-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.sq-audio-dl-spin {
	animation: sq-audio-dl-spin 1s linear infinite;
	transform-origin: 50% 50%;
}