/* Events in Pattaya – Karussell (Startseite + /go/), Logik static/js/pevents.js, Aufbau tools/pattaya-events.mjs.
   Liquid Glass ohne teure Unschärfe auf dem Handy: Glas = winzige vorgerechnete Unschärfe-Kopie des Fotos (-b.webp) + Tönung + Lichtkante;
   echtes backdrop-filter nur auf Geräten mit Maus. Bewegung nur transform/opacity. Eigenständig (eigene Variablen) – funktioniert ohne site.css.
   Startseite = kompakte Leiste (.pev--compact/.pev-k, unten): Mini-Foto -t + Datum, Bildnachweise hinter „Foto ©“ (.pev-crd). Nach Änderung CSS_V in tools/pattaya-events.mjs erhöhen. */
.pev{--g1:#f3dcaa;--g2:#d6b270;--g3:#a8854a;--tx:#f4efe6;--mu:rgba(244,239,230,.7);--pg:var(--gut,16px);--pw:var(--wrap,1240px);--cw:min(calc(100vw - 56px),380px);--dur:6.5s;--e:cubic-bezier(.2,.7,.2,1);
  position:relative;isolation:isolate;overflow:hidden;color:var(--tx);padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px)}
.pev[hidden]{display:none}
.pev-bg{position:absolute;inset:0;z-index:-1;background:#07090d;pointer-events:none}
.pev-bg i{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease}
.pev-bg i.on{opacity:.95}
.pev-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(110% 70% at 50% 45%,rgba(7,9,13,.25),rgba(7,9,13,.78) 75%),linear-gradient(180deg,#07090d,rgba(7,9,13,.4) 22%,rgba(7,9,13,.45) 72%,#07090d)}
.pev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,3vw,32px)}
.pev-head .h2{margin-bottom:.5rem}
.pev-sub{margin:0;max-width:620px;color:var(--mu);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.55}
.pev-nav{display:none;gap:10px;flex:none}
@media (hover:hover) and (pointer:fine){.pev-nav{display:flex}}
.pev-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;color:var(--tx);border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px -12px rgba(0,0,0,.7);transition:transform .25s var(--e),border-color .25s}
.pev-btn:hover{border-color:rgba(243,220,170,.55)}.pev-btn:active{transform:scale(.94)}
.pev-btn:focus-visible,.pev-track:focus-visible,.pev-dot:focus-visible,.pev-c a:focus-visible{outline:2px solid var(--g2);outline-offset:3px}
.pev-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .pev-prev svg,[dir=rtl] .pev-next svg{transform:scaleX(-1)}
/* Spur: natives Wischen + Einrasten; zieht die Seite nicht seitlich (overscroll-behavior), keine Scrollleiste */
.pev-track{--pad:max(var(--pg),calc((100% - var(--pw))/2 + var(--pg)));display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scroll-padding-inline:var(--pad);padding:8px var(--pad) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.pev-track::-webkit-scrollbar{display:none}
.pev-c{position:relative;flex:0 0 var(--cw);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;border-radius:26px;scroll-snap-align:start;scroll-snap-stop:always;
  isolation:isolate;box-shadow:0 34px 60px -34px rgba(0,0,0,.9)}
.pev-c::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.13);pointer-events:none;transition:border-color .5s}
.pev-c.on::after{border-color:rgba(243,220,170,.55)}
.pev-ph{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;background:#141a22 var(--b) center/cover}
.pev-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 7s var(--e)}
.pev-c.on .pev-ph img{transform:scale(1.09)}
.pev-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,10,.5),rgba(5,7,10,0) 26%,rgba(5,7,10,0) 42%,rgba(5,7,10,.62))}
.pev-top{position:absolute;top:12px;inset-inline:12px;display:flex;align-items:flex-start;gap:8px}
.pev-dt{display:grid;place-items:center;min-width:56px;padding:7px 10px 6px;border-radius:16px;background:rgba(10,12,18,.5);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.pev-dt b{font-size:23px;line-height:1;font-weight:800;color:var(--g1);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pev-dt small{font-size:10.5px;line-height:1.2;margin-top:3px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.pev-rel{align-self:center;padding:6px 10px;border-radius:99px;font-size:11.5px;font-weight:800;line-height:1.1;background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));color:#16120a;box-shadow:0 6px 18px -8px rgba(214,178,112,.8)}
.pev-rel.now{display:inline-flex;align-items:center;gap:6px}
.pev-rel[hidden]{display:none} /* 19.10.: .pev-m>span (display:-webkit-box) überschrieb [hidden] → leere Goldpille bei Events in > 30 Tagen */
.pev-rel.now::before{content:'';width:7px;height:7px;border-radius:50%;background:#178a4c;box-shadow:0 0 0 0 rgba(23,138,76,.6);animation:pevPing 1.8s infinite}
.pev-cat{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(10,12,18,.5);border:1px solid rgba(255,255,255,.2);white-space:nowrap}
.pev-cat svg{width:15px;height:15px;fill:none;stroke:var(--g1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Glas-Tafel */
.pev-body{position:relative;z-index:0;border-radius:19px;padding:15px 16px 11px;border:1px solid rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -16px rgba(0,0,0,.75)}
.pev-body::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 38%),linear-gradient(rgba(9,11,16,.5),rgba(9,11,16,.68)),var(--b) center 85%/cover}
@media (hover:hover) and (pointer:fine){@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pev-body{-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
  .pev-body::before{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),linear-gradient(rgba(9,11,16,.4),rgba(9,11,16,.58))}}}
.pev-t{margin:0 0 8px;font-size:clamp(18px,1.5vw,20px);line-height:1.2;font-weight:800;letter-spacing:-.01em;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pev-m{display:flex;align-items:flex-start;gap:7px;margin:0 0 4px;font-size:12.8px;line-height:1.35;color:var(--mu)}
.pev-m>span{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pev-m svg{width:15px;height:15px;flex:none;margin-top:1px;fill:none;stroke:var(--g2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pev-free{flex:none;margin-inline-start:auto;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:99px;color:var(--g1);border:1px solid rgba(243,220,170,.45);white-space:nowrap}
.pev-d{margin:8px 0 12px;font-size:13.4px;line-height:1.45;color:rgba(244,239,230,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pev-a{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.pev-go{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;font-size:13px;font-weight:800;line-height:1;text-decoration:none;color:#16120a;
  background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:0 10px 24px -12px rgba(214,178,112,.7);transition:transform .25s var(--e)}
.pev-go:active{transform:scale(.96)}
.pev-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .pev-go svg{transform:scaleX(-1)}
.pev-wa{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--g1);text-decoration:none;padding:4px 0;opacity:.92}
.pev-wa span{border-bottom:1px solid rgba(243,220,170,.35)}.pev-wa:hover span{border-color:var(--g1)}
.pev-wa svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pev-cr{margin:9px 0 0;font-size:10px;line-height:1.3;color:rgba(244,239,230,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pev-cr a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(244,239,230,.3)}
/* Fortschritt: Segmente wie Stories (nur transform), Pause-Knopf, Zähler */
.pev-foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 var(--pg)}
.pev-foot .pev-btn{width:36px;height:36px}
.pev-foot .pev-btn svg{width:16px;height:16px}
.pev-play svg+svg,.pev.stopped .pev-play svg:first-child{display:none}.pev.stopped .pev-play svg+svg{display:block}
.pev-dots{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.pev-dot{position:relative;flex:1 1 26px;width:26px;min-width:8px;max-width:26px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.pev-dot::before,.pev-dot i{content:'';position:absolute;inset-inline:0;top:10px;height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
.pev-dot i{background:linear-gradient(90deg,var(--g1),var(--g2));transform:scaleX(0);transform-origin:left center}
[dir=rtl] .pev-dot i{transform-origin:right center;background:linear-gradient(270deg,var(--g1),var(--g2))}
.pev-dot.done i{transform:none}
.pev-dot.on i{animation:pevFill var(--dur) linear forwards}
.pev.paused .pev-dot.on i{animation-play-state:paused}
.pev.static .pev-dot.on i{animation:none;transform:none}
.pev-n{min-width:44px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--mu);font-variant-numeric:tabular-nums}
.pev-one .pev-foot,.pev-one .pev-nav{display:none}
.pev-note{margin:14px auto 0;padding:0 var(--pg);max-width:720px;text-align:center;font-size:11.5px;line-height:1.45;color:rgba(244,239,230,.5)}
@keyframes pevFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pevPing{70%{box-shadow:0 0 0 7px rgba(23,138,76,0)}100%{box-shadow:0 0 0 0 rgba(23,138,76,0)}}
@media (min-width:900px){.pev-c{padding:12px}.pev-body{padding:17px 18px 12px}}
@media (max-width:370px){.pev{--cw:calc(100vw - 44px)}.pev-d{-webkit-line-clamp:2}}
@media (prefers-reduced-motion:reduce){.pev-bg i,.pev-ph img,.pev-c::after{transition:none}.pev-c.on .pev-ph img{transform:scale(1.02)}.pev-rel.now::before{animation:none}.pev-dot.on i{animation:none;transform:none}}
/* /go/ (Team-Linkseite): ohne eigenen Abschnitts-Hintergrund, Spur bis an den Rand (Handy), Karten ohne Blur */
.pev--go{--pg:0px;--cw:min(calc(100vw - 64px),340px);padding:0 0 4px;overflow:visible;margin-bottom:6px}
.pev--go .pev-bg{display:none}
.pev--go .pev-track{padding:6px 0 18px;scroll-padding-inline:0}
@media (max-width:540px){.pev--go .pev-track{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}}
.pev--go .pev-note{padding:0 4px;margin-top:10px;font-size:11px}
.pev--go .pev-body{-webkit-backdrop-filter:none;backdrop-filter:none}
.pev--go .pev-body::before{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 38%),linear-gradient(rgba(9,11,16,.5),rgba(9,11,16,.68)),var(--b) center 85%/cover}
.pev--go .pev-t{font-size:17px}
/* Startseite kompakt (17.10., Wunsch Danial: weniger prominent, weit unten): kleine Glas-Karten mit Datum, Titel, Zeitraum (+ „in N Tagen“),
   ganze Karte = Link zur offiziellen Quelle; kein Hintergrundbild, kein Auto-Weiter (Fortschritt ausgeblendet → kein animationend).
   19.10. (Danial: „bildlich, aber innerhalb des Rahmens – nicht größer“): Mini-Foto links (rechts bei RTL) statt Datumskachel, Datum unten auf dem Foto,
   Goldhaarlinie; Höhe der Karte bleibt (84 px), Bildnachweise gesammelt hinter „Foto ©“ am Hinweis (Glas-Liste ÜBER der Leiste, Seite wächst nicht). */
.pev--compact{--pad:max(var(--pg),calc((100% - var(--pw))/2 + var(--pg)));padding:clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px);overflow:visible}
.pev--compact .pev-head{margin-bottom:12px;align-items:center}
.pev--compact .pev-head .kicker{margin-bottom:.35rem}
.pev--compact .pev-h{margin:0;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2;letter-spacing:-.01em}
.pev--compact .pev-foot{display:none}
.pev--compact .pev-note{position:relative;margin-top:4px;font-size:10.5px;text-align:start;max-width:none;padding:0 var(--pad);color:rgba(244,239,230,.64)} /* Review 19.10.: .5 → .64 (Kontrast ≥ 5:1 bei 12 px) */
.pev--compact .pev-track{gap:10px;padding-top:4px;padding-bottom:12px;scroll-snap-type:x proximity}
/* Review 19.10.: Desktop – Leiste läuft bis an den Bildschirmrand (unter der Bereichs-Navigation durch) → weich ausblenden, nur im Seitenrand außerhalb des Inhalts
   (--fd = Rand − 24 px, max. 84 px; bei 1100 px = 0), beide Seiten (Rückwärts-Wischen/RTL). Fokus in der Leiste → ohne Maske (Fokusrahmen bleibt sichtbar) */
@media (min-width:900px){.pev--compact .pev-track{--fd:max(0px,min(84px,calc(var(--pad) - 24px)));-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fd),#000 calc(100% - var(--fd)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fd),#000 calc(100% - var(--fd)),transparent)}
  .pev--compact .pev-track:focus-within{-webkit-mask-image:none;mask-image:none}}
.pev-k{flex:0 0 min(80vw,312px);aspect-ratio:auto;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:84px;padding:6px;padding-inline-end:8px;border-radius:20px;scroll-snap-stop:normal;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%),rgba(12,16,22,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 34px -22px rgba(0,0,0,.9);transition:transform .25s var(--e)}
.pev-k::after{border-color:rgba(255,255,255,.1)}
.pev-k:hover{transform:translateY(-2px)}.pev-k:hover::after{border-color:rgba(243,220,170,.45)}
/* Mini-Foto: img + Datum (.pev-dt) liegen in derselben Rasterzelle (ohne Hüll-Element); konzentrische Ecken (20 − 6 = 14 px),
   .pev-dt trägt Verlauf + Goldhaarlinie + Lichtkante über dem Foto, Datum unten */
.pev-k>.pev-kph,.pev-k>.pev-dt{grid-area:1/1/2/2;align-self:stretch;border-radius:14px} /* Enden ausdrücklich: bei absolut positionierten Kindern hieße „auto“ = bis zum Rand der Karte */
.pev-k>.pev-kb{grid-area:1/2}.pev-k>.pev-kgo{grid-area:1/3}
/* Foto absolut in der Rasterzelle (Zelle = Bezugsrahmen) → bestimmt die Zeilenhöhe nicht mit, Karte bleibt 84 px */
.pev-k>.pev-kph{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:linear-gradient(160deg,#1d2632,#0c1117);transition:filter .4s var(--e)}
.pev-k:hover .pev-kph{filter:brightness(1.1) saturate(1.08)}
.pev-k>.pev-dt{position:relative;z-index:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;align-items:baseline;gap:0 4px;min-width:0;min-height:72px;padding:0 3px 5px;border:0;line-height:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,10,0) 52%,rgba(5,7,10,.5) 70%,rgba(5,7,10,.9));box-shadow:inset 0 0 0 1px rgba(243,220,170,.42),inset 0 1px 0 rgba(255,255,255,.22)}
/* Datum als eine Zeile unten auf dem Foto („17 OCT“) – lange Monatsnamen (ru „нояб“) brechen in 2 Zeilen um */
.pev-k>.pev-dt b{font-size:17px;line-height:1;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.7)}
.pev-k>.pev-dt small{margin:0;line-height:1.1;color:var(--g1);letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.7)}
[dir=rtl] .pev-k>.pev-dt{flex-direction:column;flex-wrap:nowrap;justify-content:flex-end;align-items:center} /* RTL: Tag über Monat – lange Monatsnamen (دسامبر) sonst mal 1, mal 2 Zeilen */
[dir=rtl] .pev-k>.pev-dt small{letter-spacing:0;margin-top:2px} /* arabische Schrift: keine Sperrung (verbundene Buchstaben) */
[dir=rtl] .pev-k>.pev-dt{background:linear-gradient(180deg,rgba(5,7,10,0) 30%,rgba(5,7,10,.55) 52%,rgba(5,7,10,.92))} /* Review 19.10.: Datum RTL zweizeilig (bis ~45 % hoch) → Verlauf beginnt früher, Tag nie auf hellem Himmel */
.pev-kb{min-width:0}
.pev-k .pev-t{margin:0 0 4px;font-size:14.5px;line-height:1.25;color:#fff}
.pev-k .pev-m{align-items:center;flex-wrap:wrap;margin:0;font-size:12px;gap:4px 6px}
.pev-k .pev-m>span:not(.pev-rel){display:inline;-webkit-line-clamp:unset}
.pev-k .pev-m svg{width:14px;height:14px;margin:0}
.pev-k .pev-rel{padding:3px 8px;font-size:10.5px}
.pev-kgo{position:static;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--g1);border:1px solid rgba(243,220,170,.3);background:rgba(255,255,255,.04)}
.pev-kgo::before{content:'';position:absolute;inset:0;border-radius:20px} /* ganze Karte tippbar */
.pev-kgo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .pev-kgo svg{transform:scaleX(-1)}
.pev-k:has(.pev-kgo:focus-visible){outline:2px solid var(--g2);outline-offset:3px}.pev-kgo:focus-visible{outline:none}
/* Bildnachweise: „Foto ©“ im Hinweis (inline, keine eigene Zeile), Liste schwebt über der Leiste */
.pev-crd{display:inline}
.pev-crd summary{display:inline;cursor:pointer;list-style:none;color:rgba(243,220,170,.78);white-space:nowrap;border-bottom:1px dotted rgba(243,220,170,.4);line-height:1.35;-webkit-tap-highlight-color:transparent}
.pev-crd summary::-webkit-details-marker{display:none}
.pev-crd summary{position:relative}.pev-crd summary::after{content:'';position:absolute;inset:-13px -10px} /* Review 19.10.: Tippfläche ≥ 44 px hoch, ohne die Zeile zu vergrößern */
.pev-crd summary:hover,.pev-crd[open] summary{color:var(--g1);border-bottom-color:var(--g1)}
.pev-crd summary:focus-visible{outline:2px solid var(--g2);outline-offset:2px;border-radius:4px}
.pev-crd summary svg{width:13px;height:13px;margin-inline-end:4px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pev-crl{position:absolute;z-index:5;bottom:calc(100% + 8px);inset-inline-start:var(--pad);width:min(calc(100% - 2 * var(--pg)),560px);max-height:min(60vh,340px);overflow:auto;overscroll-behavior:contain;
  margin:0;padding:12px 14px;list-style:none;border-radius:16px;border:1px solid rgba(243,220,170,.32);color:rgba(244,239,230,.82);font-size:12px;line-height:1.45;
  background:linear-gradient(160deg,#181e27,#0b0f15 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px -20px rgba(0,0,0,.9)}
.pev-crl li+li{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.pev-crl b{display:block;color:#fff;font-weight:700}
[dir=rtl] .pev-k .pev-t,[dir=rtl] .pev-crl b{text-align:right} /* Review 19.10.: englische Titel (dir=auto) auf RTL-Seiten bündig mit Datum/Bildnachweis statt links */
.pev-crl a{color:var(--g1);text-decoration:none;border-bottom:1px dotted rgba(243,220,170,.4)}
@media (max-width:540px){.pev-crl{inset-inline:var(--pg);width:auto}}
@media (prefers-reduced-motion:reduce){.pev-k{transition:none}.pev-k:hover{transform:none}.pev-kph{transition:none}}