/*
 * SIMVERSE · bezirk.css – Foto-Karte (v2, ohne WebGL) – 1:1 aus mockups/m3-simverse/css/bezirk.css (V2-START.md),
 * nur der Abschnitt „Kleinere Bildschirme“ ist für das Theme ausgebaut (Panel unter dem Foto, Pins als Leiste).
 * Gemeinsam für Startseite, Kategorie und Bezirk: großes Tilt-Shift-Foto als Karte,
 * Nadeln (Pins) genau auf den Motiven, Hover-Karten, ziehende Wolkenschatten.
 * Setzt seiten.css voraus (.sv-held, .sv-held__panel, .sv-kicker, .sv-h1, .sv-chip, .sv-held__hinweis).
 *
 * Ebenen im Held (z-index): .sv-foto 0 (Foto + Wolken) · .sv-held__panel / .sv-held__hinweis 3 · .sv-held__pins 4.
 * .sv-foto und .sv-held__pins haben dieselbe Geometrie (Foto deckt den Held ab wie object-fit: cover, +4 % Rand).
 * Nadel-Position: --x / --y = Anteil an Breite / Höhe des Original-Fotos (2688 × 1520), gemeint ist die Spitze.
 * Stabile Trefferfläche: Das klickbare .sv-nadel__schild ändert nie Größe oder Lage; Hover-Effekte laufen
 * nur auf den inneren Elementen (.sv-nadel__pille, .sv-nadel__stift) mit pointer-events: none.
 */

/* ---------- Held als Foto-Karte ---------- */
/* --fy: welcher Teil des Fotos beim Beschneiden sichtbar bleibt (0 = oben, .5 = Mitte, 1 = unten) – wie object-position */
.sv-held--foto { --fy: .25; container-type: size; height: clamp(520px, 70vh, 1500px); min-height: 0; background: #cfe0c4; overflow: visible; z-index: 3; }
/* Rahmen schneidet nur das Foto auf die Kartenform zu – Hover-Karten dürfen über den Rand hinausragen */
.sv-held__rahmen { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: calc(clamp(26px, 2vw, 64px) - 3px); }
.sv-foto, .sv-held__pins { position: absolute; left: 50%; top: 0; width: calc(max(100cqw, 100cqh * 1.76842) * 1.04); aspect-ratio: 2688 / 1520; translate: -50% calc((100cqh - 100%) * var(--fy) + var(--py, 0px)); }
.sv-foto { z-index: 0; overflow: hidden; }
.sv-foto__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 46%; user-select: none; -webkit-user-drag: none; }
.sv-held--foto .sv-held__panel, .sv-held--foto .sv-held__hinweis { z-index: 3; }
.sv-held--foto .sv-held__hinweis:empty { display: none; }

/* Ziehende Wolkenschatten (nur transform, keine Repaints) */
.sv-foto__wolken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.sv-foto__wolken i { position: absolute; left: -48%; width: 46%; aspect-ratio: 1.7; border-radius: 50%; background: radial-gradient(closest-side, rgba(28, 44, 70, .26), rgba(28, 44, 70, .1) 55%, rgba(28, 44, 70, 0)); animation: svWolkenzug 84s linear infinite; will-change: transform; }
.sv-foto__wolken i:nth-child(1) { top: -6%; }
.sv-foto__wolken i:nth-child(2) { top: 34%; width: 38%; animation-delay: -30s; animation-duration: 96s; }
.sv-foto__wolken i:nth-child(3) { top: 62%; width: 52%; animation-delay: -58s; }
@keyframes svWolkenzug { from { transform: translateX(0); } to { transform: translateX(340%); } }
.sv-ruhig .sv-foto__wolken { display: none; }
@media (prefers-reduced-motion: reduce) { .sv-foto__wolken i { animation: none; } }

/* ---------- Nadeln ---------- */
.sv-held__pins { z-index: 4; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.sv-nadel { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 1; translate: -50% -100%; font-size: clamp(12px, .3vw + 8.5px, 22px); transform-origin: 50% 100%; pointer-events: auto; }
.sv-nadel:hover, .sv-nadel:focus-within, .sv-nadel.ist-offen, .sv-nadel.ist-aktiv { z-index: 6; }
/* Trefferfläche: Schild + Stift + großzügiger Rand – fest, ohne Transform */
.sv-nadel__schild { display: flex; flex-direction: column; align-items: center; margin: 0; padding: .45em .55em 0; border: 0; background: none; font: inherit; font-family: var(--f-display); font-weight: 600; color: var(--tinte); text-decoration: none; cursor: pointer; border-radius: 1.4em; -webkit-tap-highlight-color: transparent; }
.sv-nadel__schild > * { pointer-events: none; }
.sv-nadel__schild:focus-visible { outline: none; box-shadow: none; }
/* Sichtbares Schild (Pille) – darf skalieren, Ursprung unten Mitte */
.sv-nadel__pille { display: flex; align-items: center; gap: .45em; padding: .35em .8em .35em .35em; border-radius: 999px; border: 2px solid #fff; background: rgba(255, 251, 242, .96); font-size: 1em; line-height: 1.15; white-space: nowrap; box-shadow: var(--plastik-klein), 0 10px 22px -10px rgba(29, 43, 69, .55); transform-origin: 50% 100%; transition: scale .3s var(--feder), background .2s, color .2s, box-shadow .2s; }
.sv-nadel__icon { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; background: var(--farbe); color: var(--auf); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.sv-nadel__icon .sv-i { width: 1.1em; height: 1.1em; }
.sv-nadel__icon img { width: 100%; height: 100%; object-fit: cover; }
.sv-nadel__zahl { background: var(--tinte); color: #fff; border-radius: 999px; padding: .1em .5em; font-size: .85em; }
.sv-nadel__pille .sv-status { font-size: .7em; padding: .3em .5em; }
.sv-nadel__schild:hover .sv-nadel__pille, .sv-nadel__schild:focus-visible .sv-nadel__pille, .sv-nadel.ist-offen .sv-nadel__pille, .sv-nadel.ist-aktiv .sv-nadel__pille, .sv-nadel__schild[aria-pressed="true"] .sv-nadel__pille { scale: 1.08; background: var(--farbe); color: var(--auf); }
.sv-nadel__schild:hover .sv-nadel__zahl, .sv-nadel__schild:focus-visible .sv-nadel__zahl, .sv-nadel.ist-offen .sv-nadel__zahl, .sv-nadel.ist-aktiv .sv-nadel__zahl, .sv-nadel__schild[aria-pressed="true"] .sv-nadel__zahl { background: #fff; color: var(--tinte); }
.sv-nadel__schild:hover .sv-nadel__icon, .sv-nadel.ist-offen .sv-nadel__icon, .sv-nadel.ist-aktiv .sv-nadel__icon { box-shadow: 0 0 0 2px #fff; }
.sv-nadel__schild:focus-visible .sv-nadel__pille { box-shadow: 0 0 0 3px var(--gelb-2), 0 0 0 6px rgba(29, 43, 69, .85); }
/* Stift: Kugelkopf, Nadel, Schatten am Boden – die Unterkante ist die Spitze (= Motiv). */
.sv-nadel__stift { position: relative; width: 3px; height: clamp(24px, 1.5vw + 6px, 68px); margin-top: .45em; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #8d96a0, #f3f5f8 45%, #7d8792); }
.sv-nadel__stift::before { content: ''; position: absolute; left: 50%; top: 0; width: .95em; height: .95em; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 9%, color-mix(in srgb, var(--farbe) 70%, #fff) 24%, var(--farbe) 58%, color-mix(in srgb, var(--farbe) 62%, #000) 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.sv-nadel__stift::after { content: ''; position: absolute; left: 50%; bottom: -.28em; z-index: -1; width: 1.7em; height: .6em; translate: -22% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 18, 30, .5), rgba(10, 18, 30, 0)); }
.sv-nadel.ist-aktiv .sv-nadel__stift::before, .sv-nadel__schild[aria-pressed="true"] .sv-nadel__stift::before { animation: svKopfPuls 1.4s var(--ease) infinite; }
@keyframes svKopfPuls { 0% { box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in srgb, var(--farbe) 70%, transparent); } 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 .9em transparent; } }
.sv-ruhig .sv-nadel__stift::before { animation: none !important; }

/* ---------- Hover-Karte an der Nadel ---------- */
.sv-nadel__karte { display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; transform: translateX(-50%); width: clamp(250px, 12vw + 48px, 560px); padding: clamp(9px, .6vw, 22px); background: var(--papier); border: 2px solid #fff; border-radius: var(--r-l); box-shadow: var(--plastik), 0 34px 70px -26px rgba(29, 43, 69, .62); color: var(--tinte); font-family: var(--f-text); font-weight: 400; font-size: var(--t-klein); line-height: 1.4; text-align: left; white-space: normal; cursor: default; }
.sv-nadel__karte.ist-platziert { left: var(--kl); top: var(--kt); bottom: auto; transform: none; }
.sv-nadel__karte::before { content: ''; position: absolute; inset: -18px; z-index: -1; } /* Brücke: Hover bleibt beim Wechsel Schild → Karte */
.sv-nadel.ist-offen .sv-nadel__karte { display: block; }
/* ohne JavaScript: reines CSS-Hover/Fokus */
.sv-held:not(.ist-fk) .sv-nadel:hover .sv-nadel__karte, .sv-held:not(.ist-fk) .sv-nadel:focus-within .sv-nadel__karte { display: block; }
.sv-nadel__kopf { display: flex; align-items: center; gap: .6em; margin: 0 0 .55em; }
.sv-nadel__kopf > div { flex: 1; min-width: 0; }
.sv-nadel__kicker { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.sv-nadel__titel { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.18em; line-height: 1.15; }
.sv-nadel__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sv-nadel__spiel { display: flex; align-items: center; gap: .55em; padding: .2em .45em .2em .2em; border-radius: var(--r-s); background: #fff; text-decoration: none; color: var(--tinte); box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06), 0 0 0 1.5px rgba(29, 43, 69, .07); transition: background .2s, box-shadow .2s; }
.sv-nadel__spiel:hover, .sv-nadel__spiel:focus-visible { background: color-mix(in srgb, var(--farbe) 12%, #fff); box-shadow: inset 0 -2px 0 rgba(29, 43, 69, .06), 0 0 0 2px var(--farbe), 0 8px 16px -8px rgba(29, 43, 69, .4); }
.sv-nadel__spiel img { width: 2.6em; aspect-ratio: 300 / 220; height: auto; object-fit: cover; border-radius: calc(var(--r-s) - 4px); flex: none; background: var(--papier-2); }
.sv-nadel__spiel span { min-width: 0; }
.sv-nadel__spiel b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1em; line-height: 1.15; }
.sv-nadel__spiel small { display: block; color: var(--tinte-3); font-weight: 700; font-size: .84em; line-height: 1.2; }
.sv-nadel__spiel .sv-status { font-size: .72em; vertical-align: .1em; margin-left: .3em; }
.sv-nadel__alle { flex: none; display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-display); font-weight: 600; text-decoration: none; background: var(--farbe); color: var(--auf); padding: .45em .75em; border-radius: 999px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sv-nadel__alle .sv-i { transition: transform .3s var(--feder); }
.sv-nadel__alle:hover .sv-i, .sv-nadel__alle:focus-visible .sv-i { transform: translateX(3px); }
/* kompakt, wenn neben der Nadel zu wenig Platz ist */
.sv-nadel__karte.ist-kompakt .sv-nadel__liste > li:nth-child(n+3), .sv-nadel__karte.ist-kompakt .sv-nadel__vorschau { display: none; }
/* Karte für ein einzelnes Spiel (Bezirksseite) */
.sv-nadel__vorschau { display: block; width: 100%; aspect-ratio: 300 / 220; height: auto; object-fit: cover; border-radius: calc(var(--r-l) - 8px); margin: 0 0 .7em; background: var(--papier-2); }
.sv-nadel__meta { margin: .3em 0 0; color: var(--tinte-3); font-weight: 700; }

/* ---------- Ohne Bewegung: alles sofort sichtbar ---------- */
.sv-ruhig .sv-nadel__schild, .sv-ruhig .sv-foto__bild { transform: none !important; opacity: 1 !important; visibility: visible !important; }

/* ---------- Kleinere Bildschirme (Laptop klein, Tablet, Smartphone) ---------- */
/* Unter 1100 px wären die Pins auf dem Foto zu eng: Das Foto steht oben im Seitenverhältnis 2688:1520, das Panel
   darunter. Die Pins werden zur Leiste unter dem Panel (Kategorie: Filterknöpfe, Bezirk: Spiele). Auf der Startseite
   übernimmt die Bezirksleiste direkt unter dem Held diese Aufgabe. Hover-Karten gibt es hier nicht (fotokarte.js). */
@media (max-width: 1099px) {
	.sv-held--foto { --held-pad: clamp(16px, 3vw, 28px); container-type: normal; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; z-index: auto; }
	.sv-held--foto .sv-held__rahmen { position: relative; inset: auto; order: 0; aspect-ratio: 2688 / 1520; max-height: 62vh; border-radius: 0; }
	.sv-held--foto .sv-foto { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; translate: none; }
	.sv-held--foto .sv-held__panel { order: 1; align-self: stretch; margin: 0; max-width: none; padding: var(--held-pad); border: 0; border-radius: 0; background: var(--papier); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
	.sv-held--foto .sv-held__panel .sv-h1 { font-size: clamp(26px, 4.4vw + 8px, 46px); }
	.sv-held--foto .sv-held__hinweis { display: none; }
	/* Pins als Leiste: gleiche Knöpfe/Links, ohne Stift und ohne Karte, umbrechend */
	.sv-held--foto .sv-held__pins { order: 2; position: static; width: auto; aspect-ratio: auto; translate: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--held-pad) var(--held-pad); background: var(--papier); pointer-events: auto; }
	.sv-held--foto .sv-nadel { position: static; translate: none; max-width: 100%; font-size: var(--t-klein); }
	.sv-held--foto .sv-nadel__schild { display: block; padding: 0; border-radius: 999px; }
	.sv-held--foto .sv-nadel__schild:focus-visible { outline: 3px solid var(--gelb-2); outline-offset: 3px; }
	.sv-held--foto .sv-nadel__pille { min-height: 44px; max-width: 100%; white-space: normal; box-shadow: var(--plastik-klein); }
	.sv-held--foto .sv-nadel__stift, .sv-held--foto .sv-nadel__karte { display: none !important; }
	.sv-held--start .sv-held__pins { display: none; }
}
/* Touch: keine Hover-Pflicht – ein Tipp auf den Pin öffnet direkt Bezirk bzw. Spiel, Karten gibt es nur mit Maus */
@media (hover: none) { .sv-nadel__karte { display: none !important; } }
@media (pointer: coarse) { .sv-nadel__schild { min-width: 44px; min-height: 44px; } .sv-nadel__spiel, .sv-nadel__alle { min-height: 44px; } }