/* ═══════════════════════════════════════════════════════════════
   STANDORTE.CSS — Modul „Unsere Standorte“ (_standorte.php)
   ─────────────────────────────────────────────────────────────
   Grätzl in WebGL unter dem echten Himmel über der Baumgasse (Labor V31,
   bestätigt von Anis 2026-10-26). Eingebunden über $pageAsyncCSS in
   index.php; js/standorte-3d.js und js/standorte-himmel.js messen erst,
   wenn die Bühne ihre Größe hat (ResizeObserver).
   Die Sektion trägt data-perf-eigen: Die Viewport-Engine aus
   js/pages/index.js und ihre Regeln in css/pages/index.css gelten hier
   nicht; Pausen außerhalb des Bildes steuert das Modul selbst.
   Klassen tragen durchgehend das Präfix std-, keine Klasse trägt „glass“
   im Namen (index.css setzt dort isolation).
   Ohne JavaScript, ohne WebGL2 oder Importmap und in der Vorschau der
   Plätze-Verwaltung (data-std-ruhig) stehen statt Bühne und Kacheln die
   vier Karten mit Fassadenfoto da (.std ohne std-an).
   ═══════════════════════════════════════════════════════════════ */

/* Sektion mit Wellen oben und unten in der Wellensprache der Seite (index.php, .wave-container): gleiche Kurve
   (Periode 176, Hub 18 von 28 Einheiten, viewBox 0 24 150 28 über die volle Breite), drei Lagen mit Versatz 0/3/5,
   Deckkraft .3×.3, .6×.5 und 1, Dauer 7/10/13 s, gleiche Kurve der Bewegung, Höhe 28 px, ab 1024 px 52 px.
   Anders als dort sind die Lagen HTML-Flächen mit der Welle als Hintergrundbild: Bewegt wird nur transform, das läuft
   auf der GPU ohne Neuzeichnen (bewegte SVG-use-Elemente erzwangen 60 Haupt-Frames je Sekunde, deshalb stehen die
   übrigen Wellen der Startseite). Oben: Grund in der Farbe des Nachbarn, Welle in der Himmelsfarbe; der Himmel
   beginnt 2 px über der Wellenunterkante unter der deckenden Lage (gleiche Farbe, keine Naht). Unten: Welle in der
   Farbe des nächsten Nachbarn über dem Himmel. Pause außerhalb des Bildes (js-paused), still bei reduzierter Bewegung.
   Bewegt auf ausdrücklichen Wunsch von Anis (2026-10-25), abweichend von den stehenden Wellen der Startseite. */
.std { --std-bereit: 1; --std-welle: 28px; --std-band: 120px; --std-umfeld-oben: #F8FBFD;
  /* Himmelsfarben bis zum ersten Takt von js/standorte-himmel.js (und ohne JavaScript): die Nacht */
  --std-himmel-oben: #041939; --std-himmel-unten: #0A2047; --std-himmel-fuss: #0c2350;
  --std-dunkel: #1E293B; --std-text: #dbe4f3; --std-leise: #a9b8d2;
  /* Weißer Streifen unter der unteren Welle: Abstand zum Laufband. Die Werte spiegeln das bisherige Polster unter der
     Sektion (pb-16, ab 768 px bzw. im Querformat main > section in css/pages/index.css); .amina-marquee-wrap in
     css/pages/index.css gleicht seinen Abstand oben und unten darauf ab (--dk-nachbar-oben). Ändert sich ein Wert,
     wird er dort mitgezogen. */
  --std-nachbar: 4rem;
  position: relative; overflow: hidden; isolation: isolate; color: var(--std-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(var(--std-umfeld-oben) 50%, #fff 50%); }
@media (max-width: 767px) and (orientation: landscape) { .std { --std-nachbar: 0.75rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .std { --std-nachbar: 1.5rem; } }
@media (min-width: 1024px) { .std { --std-welle: 52px; --std-nachbar: 3.5rem; } }
/* Innenabstände der Sektion. css/pages/index.css setzt für main > section je nach Breite padding mit !important; die
   Sektion bringt ihre Wellen und den Platz für die Bahn von Sonne und Mond selbst mit, deshalb gelten hier ihre Werte
   (gleiche Wichtigkeit, höhere Spezifität). */
main > section.std, .std { padding-top: calc(var(--std-welle) + var(--std-band)) !important;
  padding-bottom: calc(var(--std-welle) + 32px + var(--std-nachbar)) !important; }
.std [hidden]:not([hidden="until-found"]) { display: none !important; }
.std::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--std-welle) - 2px); bottom: var(--std-nachbar); z-index: -1;
  background: linear-gradient(var(--std-himmel-oben), var(--std-himmel-unten) var(--std-horizont-y, 40%), var(--std-himmel-fuss)); }
.std-welle { position: absolute; left: 0; width: 100%; height: var(--std-welle); overflow: hidden; pointer-events: none; }
.std-welle--oben { top: 0; }
/* Obere Welle in der Himmelsfarbe des Augenblicks (--std-himmel-oben, web/himmel.js): Form als Maske, Farbe als Grund */
.std-welle--oben i { background-color: var(--std-himmel-oben); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: calc(100% * 176 / 326) 100%; mask-size: calc(100% * 176 / 326) 100%; }
.std-welle--unten { bottom: var(--std-nachbar); }
.std-welle i { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% * 326 / 150); background-repeat: repeat-x;
  background-size: calc(100% * 176 / 326) 100%; animation: std-wogen 13s cubic-bezier(.55, .5, .45, .5) -4s infinite; }
.std-welle i:nth-child(1) { opacity: .3; animation-duration: 7s; animation-delay: -2s; }
.std-welle i:nth-child(2) { opacity: .6; animation-duration: 10s; animation-delay: -3s; }
.std-welle--oben i:nth-child(1) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.3' d='M0 44c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.3' d='M0 44c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
.std-welle--oben i:nth-child(2) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.5' d='M0 47c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.5' d='M0 47c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
.std-welle--oben i:nth-child(3) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 49c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 49c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
.std-welle--unten i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.3)' d='M0 44c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
.std-welle--unten i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 47c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
.std-welle--unten i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 176 28' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 49c30 0 58-18 88-18s58 18 88 18V52H0z'/%3E%3C/svg%3E"); }
/* eine Periode (176 Einheiten = 176/326 der Fläche) nach rechts, wie move-forever in index.css */
@keyframes std-wogen { from { transform: translate3d(calc(-100% * 176 / 326), 0, 0); } to { transform: translate3d(0, 0, 0); } }
.std-welle.js-paused i { animation-play-state: paused; }

/* ── Himmel: echte Sterne und echter Mond (web/himmel.js) ──
   Mond (Variante B): Bahn über der Überschrift, links Aufgang, rechts Untergang, Höhe echt. --std-band ist der Platz
   dafür (vorher 92 px; 120 px geben der Bahn 42 px Hub). Helle Sterne einzeln mit eigenem Funkeln, schwache in drei
   Flächen mit langsamem Schimmern. Nur opacity und transform; Pause außerhalb des Bildes (js-paused). */
.std-himmel { position: absolute; left: 0; right: 0; top: var(--std-welle); height: 460px; pointer-events: none;
  --std-mond-d: 62px; --std-bahn-rand: 16px; }
/* Einblenden nach dem Laden (ist-bereit) je Ebene, nicht über die Deckkraft der ganzen Himmelsebene: Deckkraft unter 1
   macht .std-himmel zu einer isolierten Gruppe. Das Sonnenbild (schwarzer Grund, screen) addiert sich dann nicht mehr
   zum Himmel, sondern zu Transparenz, und sein Grund stand während des Einblendens als dunkles Quadrat über dem Kopf
   (Bildschirmvideo Anis 2026-10-26, in Chromium mit Deckkraft 0,6 nachgestellt). Sonne und Mond blenden über ihre
   eigene Deckkraft ein, die vor dem Mischen wirkt und für screen unkritisch ist. */
.std-sternbild { opacity: 0; transition: opacity 1.6s ease; }
.std-himmel.ist-bereit .std-sternbild { opacity: 1; }
.std-himmel:not(.ist-bereit) :is(.std-sonne, .std-mond, .std-wolken) { opacity: 0 !important; }
.std-sternflaeche, .std-sternhell, .std-mond { position: absolute; left: 0; top: 0; }
.std-sternflaeche--0 { animation: std-schimmern 7.3s ease-in-out infinite; }
.std-sternflaeche--1 { animation: std-schimmern 9.1s ease-in-out -3.1s infinite; }
.std-sternflaeche--2 { animation: std-schimmern 11.7s ease-in-out -6.4s infinite; }
@keyframes std-schimmern { 0%, 100% { opacity: 1; } 31% { opacity: .7; } 52% { opacity: .96; } 77% { opacity: .78; } }
.std-stern { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); animation: std-funkeln 4s linear infinite; }
.std-stern b { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--c)) 0, rgb(var(--c)) 20%, rgba(var(--c), .42) 42%, rgba(var(--c), 0) 100%); }
/* Glanz der hellsten Sterne (heller als 1,2 mag): feines Kreuz, funkelt mit */
.std-stern--glanz b::before, .std-stern--glanz b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 360%; height: 1px;
  translate: -50% -50%; background: linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .55) 50%, rgba(var(--c), 0)); }
.std-stern--glanz b::after { rotate: 90deg; }
.std-stern--tief { animation-name: std-funkeln-tief; }
@keyframes std-funkeln { 0%, 100% { opacity: 1; } 7% { opacity: .62; } 13% { opacity: 1; } 34% { opacity: .86; } 41% { opacity: .55; }
  47% { opacity: .96; } 69% { opacity: .78; } 76% { opacity: 1; } 88% { opacity: .7; } }
/* In Horizontnähe (unter 18°) funkeln Sterne stärker: mehr Luft im Strahlengang */
@keyframes std-funkeln-tief { 0%, 100% { opacity: 1; } 6% { opacity: .38; } 11% { opacity: .95; } 29% { opacity: .7; } 36% { opacity: .3; }
  43% { opacity: 1; } 63% { opacity: .6; } 71% { opacity: .92; } 86% { opacity: .42; } }
/* Mondlicht wird zum Himmel addiert (screen): Die unbeleuchtete Seite zeigt den Himmel davor (Streulicht der Luft liegt
   vor dem Mond), mit leisem Erdschein, statt als schwarze Scheibe */
.std-mond { opacity: 0; transition: opacity 1.2s ease; mix-blend-mode: screen; }
.std-stern.ist-gleiten { transition: transform 60s linear; }
.std-mond.ist-gleiten { transition: transform 60s linear, opacity 1.2s ease; }
.std-himmel.js-paused :is(.std-stern, .std-sternflaeche, .std-wolke-zug) { animation-play-state: paused; }
.std-sternbild { position: absolute; inset: 0; }
/* Sternschnuppe (js/standorte-himmel.js): Lage und Richtung am äußeren Element, Flug und Deckkraft an .std-schnuppe-flug,
   Länge des Schweifs per scaleX vom Kopf aus. Schweif keilförmig (clip-path): am Kopf 2,6px, nach hinten spitz, Farbe
   von Weiß über kühles Blau ins Transparente. Kopf mit leicht grünlich-weißem Kern (Leuchten von Magnesium und Nickel).
   Ohne Animation (reduzierte Bewegung) erscheint keine. */
.std-schnuppe { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.std-schnuppe-flug { position: absolute; left: 0; top: 0; opacity: 0; }
.std-schnuppe-flug b { position: absolute; right: 0; top: calc(2.6px / -2); height: 2.6px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(140, 180, 255, 0) 0%, rgba(170, 200, 255, .32) 40%, rgba(220, 236, 255, .8) 82%, #fff 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.std-schnuppe-flug em { position: absolute; left: calc(11px / -2); top: calc(11px / -2); width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0, #fff 28%, rgba(215, 255, 236, .6) 55%, rgba(200, 235, 255, 0) 100%); }
/* Sonne (Fotomontage „Tag“): fotografisches Bild, ausgebrannter Kern, feiner Beugungsstern, Aureole; zum Himmel addiert.
   Tief stehend golden (zweites Bild darüber, Überblendung per opacity aus himmel.js) */
.std-sonne { position: absolute; left: 0; top: 0; width: 0; height: 0; mix-blend-mode: screen; transition: opacity 1.2s ease; }
.std-sonne.ist-gleiten { transition: transform 60s linear, opacity 1.2s ease; }
.std-sonne-bild { position: absolute; left: 0; top: 0; width: var(--std-sonne-d); height: var(--std-sonne-d); max-width: none;
  translate: -50% -50%; mix-blend-mode: screen; transition: opacity 1.2s ease; pointer-events: none; }
/* Wolken: dezente, durchscheinende Schönwetterwolken im Band über der Überschrift, ziehen langsam von rechts nach links.
   Jede Bahn (.std-wolke-zug) ist so breit wie der Himmel; sie läuft von 100 % nach −100 %, die Wolke liegt am linken Rand
   der Bahn und ist schmaler als sie, so tritt sie rechts außerhalb ein und links vollständig aus */
.std-wolken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 1.2s ease; }
.std-wolke-zug { position: absolute; inset: 0; animation: std-wolkenzug 300s linear infinite; }
@keyframes std-wolkenzug { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
.std-wolke { position: absolute; left: 0; opacity: .9; filter: brightness(var(--std-wolke-hell, 1)); }
.std-wolke img { display: block; width: 100%; height: auto; }
/* Goldene Fassung: morgens von links, abends von rechts beleuchtet (eigene Renderings, gleiche Form wie die Tagesfassung) */
.std-wolke .std-wolke-tief { position: absolute; inset: 0; height: 100%; opacity: var(--std-wolke-tief, 0); transition: opacity 1.2s ease; }
.std-kopf { position: relative; text-align: center; padding: 0 20px; z-index: 2; }
/* Eyebrow der Sektion: .eyebrow-badge plus diese Ergänzung, auch mobil sichtbar. Absolut über der Überschrift: Lage und Höhe
   der Überschrift bleiben unverändert, sie wandert mit der Überschrift (ohne Himmelskörper höher).
   Entscheidungen Anis, 2026-10-26: Die Bahn von Sonne und Mond bleibt wie sie ist, beide ziehen hinter der Eyebrow durch
   (zwischen Welle und Überschrift sind nur 42px Bahn). Ausnahme vom Eyebrow-Token: Die Token-Fassung (Blau auf hellem Glas)
   erreicht auf dem Himmel nur 1,2–2,5:1. Hier weiße Schrift auf dunklem Glas rgba(30,41,59,.5), gemessen mindestens
   5,2:1 (Wintersonne mittags direkt dahinter), sonst bis 15:1. Rand, padding, Schatten, Schrift und blur unverändert aus
   .eyebrow-badge. .std-kopf davor hebt die Spezifität über index.css, unabhängig von der Ladereihenfolge */
.std-kopf .std-eyebrow { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; margin: 0;
  white-space: nowrap; color: #fff; background: rgba(30, 41, 59, 0.5); }
.std-kopf h2 { margin: 0; font-size: 42px; line-height: 1.06; font-weight: 900; letter-spacing: -.02em; color: #fff;
  /* Bei Tag und in der Dämmerung ein leiser, dunkler Hof hinter der Schrift (Tiefe wie in der Montage, Lesbarkeit neben
     der Sonne). Nachts ohne Wirkung (--std-tag 0). Statisch, kein Neuzeichnen. */
  filter: drop-shadow(0 0 2px rgba(10, 22, 60, calc(var(--std-tag, 0) * .45))) drop-shadow(0 2px 16px rgba(10, 22, 60, calc(var(--std-tag, 0) * .35))); }
/* Farbige Wörter: nachts in den Markenfarben; vor Sonnenaufgang bis nach Sonnenuntergang zu Weiß gemischt (--std-weiss aus
   web/himmel.js, 0 bis 1 zwischen -6° und -2° Sonnenhöhe). Grund: Auf dem Dämmerungs- und Tageshimmel erreichten Pink und
   der Verlauf nur 2,3 bis 3,0:1, für große Schrift sind 3:1 nötig (gemessen, Entscheidung Anis 2026-10-25, Variante B). */
.std-kopf h2 .ein { color: color-mix(in srgb, #e36aa6, #fff calc(var(--std-weiss, 0) * 100%)); }
.std-kopf h2 .graetzl { background: linear-gradient(90deg, color-mix(in srgb, #c08be6, #fff calc(var(--std-weiss, 0) * 100%)),
  color-mix(in srgb, #7fb5f0, #fff calc(var(--std-weiss, 0) * 100%))); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Smartphone: Zeile 1 „Vier Gruppen,“, Zeile 2 „ein Grätzl“ (Wunsch Anis 2026-10-25); jede Zeile bricht nie um, die
   Schrift wird unter 42 px kleiner, wenn die erste Zeile (6,83 em in Inter Black, gemessen) sonst nicht passt:
   7 em Platz für Rundung und Ersatzschrift, 40 px = Seitenabstand 2 × 20 px. Ab 768 px wie bisher „Vier Gruppen, ein“ / „Grätzl“. */
.std-br-gross { display: none; }
@media (max-width: 767px) {
  .std-kopf h2 { font-size: min(42px, calc((100vw - 40px) / 7)); }
  .std-zeile { display: block; white-space: nowrap; }
}
@media (min-width: 768px) { .std-br-gross { display: inline; } }
/* Ohne Mond und Sonne am Himmel steht die Überschrift um den Platz der Bahn höher (Wunsch Anis 2026-10-25); erscheint ein
   Himmelskörper, gleitet sie an ihren Platz unter der Bahn. Nur transform: kein Layoutsprung, die Bühne bleibt stehen. */
.std { --std-band-frei: 28px; }
.std-kopf { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.std:not(.ist-himmelskoerper) .std-kopf { transform: translateY(calc(-1 * var(--std-band-frei))); }
.std.ist-start .std-kopf { transition: none; }
.std-kopf p { margin: 14px auto 0; max-width: 340px; color: var(--std-text-leise, #b9c6dd); font-size: 15px; line-height: 1.5; font-weight: 500; }

/* ── Bühne ── */
.std-welt { position: relative; height: 560px; margin-top: 4px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.std-welt.ist-ziehen { cursor: grabbing; }
.std-welt:focus-visible { box-shadow: inset 0 0 0 3px #fff; }
.std-welt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.std-welt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--std-himmel-unten), color-mix(in srgb, var(--std-himmel-unten) 0%, transparent)); }
.std-welt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--std-himmel-fuss) 0%, transparent), color-mix(in srgb, var(--std-himmel-fuss) 85%, transparent)); }
.std-lade { position: absolute; inset: 0; display: grid; place-items: center; color: var(--std-leise); font-size: 14px; font-weight: 600; z-index: 2; }

/* Pins: echte Knöpfe, Tropfen 34 px, Trefferfläche 44 x 52 px */
.std-pin { position: absolute; left: 0; top: 0; z-index: 3; width: 44px; height: 52px; margin: -52px 0 0 -22px; border: 0; padding: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .35s ease; }
.std-pin i { position: absolute; left: 5px; top: 3px; width: 34px; height: 34px; transform-origin: 50% 145%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.std-pin i::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c);
  box-shadow: 0 0 0 3px #fff, 0 0 18px 4px color-mix(in srgb, var(--c) 70%, transparent); }
.std-pin b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; font: 900 18px/1 'Inter', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(30, 41, 59, .45); }
.std-pin.ist-weg { opacity: 0; pointer-events: none; }
/* Lichtfleck unter der Pinspitze in Gruppenfarbe (wie in der Fotomontage), statisch, auch bei reduzierter Bewegung */
.std-pin::after { content: ""; position: absolute; left: 50%; top: 46px; width: 108px; height: 44px; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, #fff) 0%, color-mix(in srgb, var(--c) 55%, transparent) 38%, transparent 100%); }
.std-pin:focus-visible { outline: none; }
.std-pin:focus-visible i::before { outline: 3px solid #fff; outline-offset: 4px; }

/* Nahansicht-Knopf in der Bühne */
.std-zoom { position: absolute; right: 16px; top: 16px; z-index: 4; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.std-zoom:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Karte (dunkles Glas) ── */
.std-karte { position: relative; z-index: 4; margin: -40px 16px 0; padding: 18px 14px 16px; border-radius: 30px;
  background: linear-gradient(rgba(30, 52, 98, .78), rgba(16, 33, 70, .92)); box-shadow: inset 0 0 0 1px rgba(120, 170, 240, .35), 0 16px 28px -16px rgba(0, 0, 0, .6);   /* reicht 28 px nach unten, endet vor der Welle (32 px Abstand) */
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--std-text); }
.std-wahl { display: grid; gap: 12px; }
.std-wahl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.std-wahl-knopf { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; font: inherit; color: #fff;
  background: linear-gradient(110deg, rgba(255, 255, 255, .1), rgba(var(--g), .2)); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-radius .4s cubic-bezier(.34, 1.56, .64, 1); }
.std-wahl-knopf:active { transform: scale(.97); border-radius: 26px 12px 26px 12px; }
.std-wahl-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.std-wahl-kopf { display: flex; align-items: center; gap: 8px; }
.std-wahl-kopf b { font-size: 15px; font-weight: 900; }
.std-wahl-knopf small { font-size: 12px; font-weight: 600; color: var(--std-leise); white-space: nowrap; }
.std-hinweis { margin: 0; font-size: 12px; font-weight: 600; color: var(--std-leise); text-align: center; text-wrap: balance; }
.std-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 900 13px/1 'Inter', system-ui, sans-serif; color: #fff; box-shadow: 0 0 0 2px #fff; }
.std-num--gross { width: 44px; height: 44px; font-size: 20px; box-shadow: 0 0 0 3px #fff; }
.std-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.std-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 1.5px #fff; }
.std-status.ist-frei::before { background: rgb(var(--g)); box-shadow: 0 0 0 1.5px #fff, 0 0 10px 2px rgba(var(--g), .95); }
/* Sonar bei freien Plätzen (Auftrag Anis 2026-10-26): Zwei Ringe in Gruppenfarbe lösen sich nacheinander vom Punkt
   (Punkt 8px plus 1,5px weißer Rand = 11px) und laufen auf 44px aus, danach Ruhe bis zum nächsten Ping. Die Ringe sind
   in Endgröße angelegt und werden hochskaliert: nur transform und opacity. Sie liegen unter der Schrift (isolation,
   z-index -1). Pause außerhalb des Bildes über js-paused (eigener Observer in js/standorte.js): Die Animation wird
   dabei entfernt und beim Wiedereintritt im gemeinsamen Takt neu gesetzt (window.__stdSonarTakt), so pingen Kachel,
   Karte und Pin im Bild immer gleichzeitig. Ohne Animation (reduzierte Bewegung) bleibt ein ruhiger Halo stehen. */
.std-status.ist-frei { position: relative; isolation: isolate; }
.std-sonar { position: absolute; z-index: -1; left: calc(10px + 8px / 2); top: 50%; width: 0; height: 0; pointer-events: none; }
.std-sonar::before, .std-sonar::after { content: ""; position: absolute; left: calc(44px / -2); top: calc(44px / -2); box-sizing: border-box; width: 44px; height: 44px;
  border-radius: 50%; border: 2px solid color-mix(in srgb, rgb(var(--g)) 55%, #fff); background: radial-gradient(circle closest-side, transparent 35%, rgba(var(--g), .45));
  box-shadow: 0 0 12px rgba(var(--g), .6);
  transform: scale(calc(22 / 44)); opacity: .45; animation: std-sonar 3s cubic-bezier(.22, .61, .36, 1) backwards infinite; }
.std-sonar::after { opacity: 0; animation-delay: .45s; }
@keyframes std-sonar { 0% { transform: scale(calc(11 / 44)); opacity: 1; } 60%, 100% { transform: scale(1); opacity: 0; } }
.std-sonar.js-paused::before, .std-sonar.js-paused::after { animation: none; }
/* Sonar am Pin (Auftrag Anis 2026-10-26): dieselben zwei Ringe im selben Takt wie die Kachel, flach in der Ebene des
   Lichtflecks unter der Pinspitze (Mitte und Seitenverhältnis 108 : 44 wie .std-pin::after). In der Übersicht laufen
   sie von der Spitze bis auf 132px Breite aus. Als DOM-Ebene über dem Bild statt in WebGL: Die Szene zeichnet nur bei
   Bedarf, ein Ring im Modell müsste jedes Bild neu rendern. Pause außerhalb des Bildes (js-paused) und bei
   ausgeblendeten Pins (.ist-weg, Gruppenansicht). */
.std-pin-sonar { position: absolute; z-index: -1; left: 50%; top: 46px; width: 0; height: 0; pointer-events: none; }
.std-pin-sonar::before, .std-pin-sonar::after { content: ""; position: absolute; left: calc(132px / -2); top: calc(132px * 44 / 108 / -2); box-sizing: border-box;
  width: 132px; height: calc(132px * 44 / 108); border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 55%, #fff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 45%, transparent);
  transform: scale(calc(22 / 44)); opacity: .45; animation: std-sonar 3s cubic-bezier(.22, .61, .36, 1) backwards infinite; }
.std-pin-sonar::after { opacity: 0; animation-delay: .45s; }
.std-pin-sonar.js-paused::before, .std-pin-sonar.js-paused::after, .std-pin.ist-weg .std-pin-sonar::before, .std-pin.ist-weg .std-pin-sonar::after { animation: none; }

.std-gruppe { display: grid; gap: 14px; }
.std-gruppe-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.std-gruppe-kopf h3 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.std-gruppe-kopf h3:focus { outline: none; }
.std-gruppe-kopf p { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--std-leise); }
.std-rund { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); }
.std-rund:focus-visible, .std-blaettern button:focus-visible, .std-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.std-meta { display: flex; align-items: center; gap: 8px; }
.std-pillen { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.std-alter { padding: 6px 11px; border-radius: 9999px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: rgba(var(--g), .22); color: #fff; white-space: nowrap; }
.std-blaettern { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9999px; background: rgba(255, 255, 255, .08); }
.std-blaettern button { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; cursor: pointer; color: #fff; }
.std-blaettern span { min-width: 34px; text-align: center; font-size: 13px; font-weight: 800; color: var(--std-leise); font-variant-numeric: tabular-nums; }
.std-akt { display: flex; flex-wrap: wrap; gap: 10px; }
.std-knopf { flex: 1 1 auto; min-height: 48px; padding: 0 16px; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px/1 'Inter', system-ui, sans-serif; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-radius .4s cubic-bezier(.34, 1.56, .64, 1); }
.std-knopf:active { transform: scale(.97); border-radius: 26px 10px 26px 10px; }
.std-knopf--haupt { background: linear-gradient(110deg, rgba(var(--g), .4), rgba(var(--g), .6)); font-weight: 800; }
.std-knopf--rund { flex: 0 0 48px; padding: 0; }
.std-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.std-meldung { position: fixed; left: 50%; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10; padding: 10px 16px; border-radius: 9999px;
  font: 700 13px/1.2 'Inter', system-ui, sans-serif; color: #fff; background: rgba(30, 41, 59, .92); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.std-an .std-gruppe { animation: std-ein .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes std-ein { from { opacity: 0; transform: translateY(8px); } }
/* ── Ergänzungen der Website (Inhalte aus PHP, die das Labor nicht zeigte) ──
   Blättern: Knöpfe 40 px, Trefferfläche 44 px über ein unsichtbares ::before */
.std-blaettern button { position: relative; }
.std-blaettern button::before { content: ""; position: absolute; inset: -2px; }
/* Aufnahme bzw. Warteliste der Gruppe (plaetze.json), leise unter den Pillen */
.std-gruppe-zeile { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--std-leise); }
/* Schließtage (_standorte.php aus schliess.json): Hinweis in der Liste und in jeder Karte, rein typografisch.
   Kommend (.ist-bald) neutral mit Abstandsangabe; am Schließtag (.ist-heute) in der Farbe der Kategorie „Schließtage“
   (#D55A92), auf dem dunklen Glas zu Weiß gemischt */
.std-zu { display: grid; gap: 3px; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--std-text); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); text-wrap: pretty; }
.std-zu-wann { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--std-leise); }
.std-zu b { font-size: 15px; font-weight: 800; color: #fff; }
.std-zu.ist-heute { background: color-mix(in srgb, #D55A92 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D55A92 55%, transparent); }
.std-zu.ist-heute .std-zu-wann { color: color-mix(in srgb, #D55A92 35%, #fff); }
/* Fassadenfoto: nur in der Kartenliste ohne 3D */
.std-foto { display: block; width: 100%; height: auto; border-radius: 18px; }
.std-an .std-foto { display: none; }
/* Ohne 3D: keine Bühne, die Karten stehen untereinander, Bedienelemente des Modells entfallen */
.std:not(.std-an) .std-welt, .std:not(.std-an) .std-nurjs { display: none; }
.std:not(.std-an) .std-karte { margin-top: 24px; }
.std:not(.std-an) .std-wahl:not([hidden]) + .std-gruppe, .std:not(.std-an) .std-gruppe + .std-gruppe { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
  .std-pin, .std-pin i, .std-wahl-knopf, .std-knopf { transition: none; }
  .std-stern, .std-sternflaeche, .std-welle i { animation: none; }
  /* Wolken stehen still (Pause statt none, damit sie verteilt bleiben; schaltet css/pages/index.css alle Animationen ab,
     setzt js/standorte-himmel.js die Lage auf der Bahn direkt) */
  .std-wolke-zug { animation-play-state: paused; }
  .std-sonne.ist-gleiten, .std-kopf { transition: none; }
  .std-stern.ist-gleiten, .std-mond.ist-gleiten, .std-himmel { transition: none; }
  .std-an .std-gruppe { animation: none; }
  .std-sonar::before, .std-sonar::after, .std-pin-sonar::before, .std-pin-sonar::after { animation: none; }
}