. JS-Helper window.flipCard(el). */
.card-flip {
perspective:1200px;
position:relative;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.card-flip-inner {
position:relative;
width:100%; min-height:100%;
transform-style:preserve-3d;
transition:transform .65s cubic-bezier(.16,1,.3,1);
}
.card-flip.is-flipped .card-flip-inner { transform:rotateY(180deg); }
.card-flip .card-front,
.card-flip .card-back {
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.card-flip .card-back {
position:absolute; inset:0;
transform:rotateY(180deg);
}
@media (prefers-reduced-motion:reduce){
.card-flip-inner { transition:none; }
.card-flip.is-flipped .card-flip-inner { transform:none; }
.card-flip .card-front { display:none; }
.card-flip:not(.is-flipped) .card-back { display:none; }
.card-flip .card-back { position:relative; inset:auto; transform:none; }
}
/* ── Expand-to-Detail (Vol2-08) — View-Transitions API ──────────────────────
Quell-Karte und Ziel-Modal bekommen den gleichen view-transition-name,
dann macht document.startViewTransition() automatisch das shared-element-
Morph. Fallback (Browser ohne API): klassische Modal-Animation.
Pattern:
…
…
JS:
openDetail(card) {
if (document.startViewTransition) {
document.startViewTransition(() => renderModal(card.dataset.vt));
} else { renderModal(card.dataset.vt); }
}
CSS legt die view-transition-name nur an, wenn das Attribut gesetzt ist. */
[data-vt] { view-transition-name:auto; }
/* Fallback ohne View-Transitions API: smoothes Fade+Scale beim Modal-Open. */
@supports not (view-transition-name:auto){
.modal-detail.is-open,
.adm-modal-overlay.is-open .adm-modal-box {
animation:modalDetailIn .35s cubic-bezier(.16,1,.3,1);
}
}
@keyframes modalDetailIn {
from { opacity:0; transform:scale(.92) translateY(8px); }
to { opacity:1; transform:scale(1) translateY(0); }
}
/* ── Pill-to-Card-Morph (Vol3-05) ───────────────────────────────────────────
Pill-Button expandiert zu einer Detail-Karte. Reine CSS-Variante über
einen Wrapper, der zwischen .as-pill und .as-card umschaltet.
Pattern:
*/
.morph-pc {
display:inline-flex; flex-direction:column; align-items:stretch;
background:var(--neon); color:var(--navy); border:none;
border-radius:99px; padding:11px 22px;
font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
cursor:pointer; overflow:hidden;
clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
transition:border-radius .45s cubic-bezier(.16,1,.3,1),
padding .45s cubic-bezier(.16,1,.3,1),
max-width .45s cubic-bezier(.16,1,.3,1),
background .25s, clip-path .45s;
max-width:260px;
}
.morph-pc .mpc-label {
display:flex; align-items:center; justify-content:center; gap:8px;
white-space:nowrap; line-height:1;
}
.morph-pc .mpc-details {
max-height:0; opacity:0; padding-top:0; overflow:hidden;
text-align:left; font-size:13px; font-weight:600; text-transform:none;
letter-spacing:normal; line-height:1.5;
transition:max-height .45s cubic-bezier(.16,1,.3,1),
opacity .25s, padding-top .25s;
}
.morph-pc.as-card {
border-radius:14px; padding:18px 22px; max-width:480px;
clip-path:none;
}
.morph-pc.as-card .mpc-details {
max-height:320px; opacity:1; padding-top:12px;
}
@media (prefers-reduced-motion:reduce){
.morph-pc, .morph-pc .mpc-details { transition:none; }
}
/* ── Icon-Morph Padel ↔ Tennis (Vol3-04) ────────────────────────────────────
Pattern: zwei .ic Icons gestapelt in einem .icon-morph, mit data-sport
auf dem Container. Wechsel = CSS-Fade + Mini-Drehung.
JS: container.dataset.sport = 'tennis' (oder andere). */
.icon-morph {
display:inline-flex; align-items:center; justify-content:center;
position:relative; width:1.1em; height:1.1em;
vertical-align:middle;
}
.icon-morph > .ic {
position:absolute; inset:0;
opacity:0; transform:scale(.5) rotate(-180deg);
transition:opacity .35s cubic-bezier(.16,1,.3,1),
transform .45s cubic-bezier(.34,1.56,.64,1);
}
.icon-morph[data-sport="padel"] > .ic-padel,
.icon-morph[data-sport="tennis"] > .ic-tennis,
.icon-morph[data-sport="beerpong"] > .ic-beer,
.icon-morph[data-sport="mixed"] > .ic-padel {
opacity:1; transform:scale(1) rotate(0);
}
@media (prefers-reduced-motion:reduce){
.icon-morph > .ic { transition:opacity .15s; }
.icon-morph > .ic { transform:none; }
}
/* ============================================================================
PHASE 7 · Cinematic (Sponsoren-Marquee · Winner-Spotlight · Trophy-Reveal)
============================================================================ */
/* ── Sponsoren-Marquee (Vol2-14) ────────────────────────────────────────────
Endlos-Lauf, pausiert beim Hover. Pattern:
Geschwindigkeit über --marquee-duration; aria-label bleibt für Screenreader. */
.marquee {
overflow:hidden; position:relative;
--marquee-duration:40s;
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display:flex; gap:36px; width:max-content;
animation:marqueeScroll var(--marquee-duration) linear infinite;
align-items:center;
}
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state:paused; }
.marquee-track > * {
flex-shrink:0;
font-weight:800; color:var(--muted);
text-transform:uppercase; letter-spacing:.8px; font-size:13px;
}
@keyframes marqueeScroll {
from { transform:translateX(0); }
to { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
.marquee-track { animation:none; }
}
/* ── Winner-Spotlight (App-weit-18) ─────────────────────────────────────────
Pulse-Glow auf Siegerzelle/-Karte/-Pille. Reine Klasse + Sport-Akzent:
…
…
Goldener Schein für Tournament Champion, neon für „aktuell führend". */
.winner-spot {
position:relative;
animation:winnerSpotPulse 2.2s ease-in-out infinite;
}
.winner-spot::after {
content:""; position:absolute; inset:-6px; border-radius:inherit;
background:radial-gradient(circle, var(--neon-glow) 0%, transparent 70%);
z-index:-1; pointer-events:none;
animation:winnerSpotHalo 2.2s ease-in-out infinite;
}
.winner-spot--gold {
animation-name:winnerSpotPulseGold;
}
.winner-spot--gold::after {
background:radial-gradient(circle, rgba(245,158,11,.55) 0%, transparent 70%);
animation-name:winnerSpotHaloGold;
}
@keyframes winnerSpotPulse {
0%, 100% { box-shadow:0 0 0 0 var(--neon-glow); }
50% { box-shadow:0 0 28px var(--neon-glow); }
}
@keyframes winnerSpotHalo {
0%, 100% { opacity:.5; transform:scale(1); }
50% { opacity:1; transform:scale(1.06); }
}
@keyframes winnerSpotPulseGold {
0%, 100% { box-shadow:0 0 0 0 rgba(245,158,11,.45); }
50% { box-shadow:0 0 32px rgba(245,158,11,.7); }
}
@keyframes winnerSpotHaloGold {
0%, 100% { opacity:.55; transform:scale(1); }
50% { opacity:1; transform:scale(1.08); }
}
@media (prefers-reduced-motion:reduce){
.winner-spot, .winner-spot::after { animation:none; }
}
/* ── Trophy-Reveal (Vol3-18) ────────────────────────────────────────────────
Cinematic-Reveal für Ceremony/Season-End. Mehrstufige Animation:
1) Backdrop fadet ein (dunkler Vignette)
2) Trophäen-Icon schnellt mit Bounce hoch
3) Konfetti-Strahl von der Mitte (CSS-Strahlen + Rotation)
4) Spieler-Namen liegen sich beruhigt an
Pattern:
Ruwen S.
Champion · Frühlings-Cup 2026
Triggert beim Einfügen ins DOM (animation: both). */
.trophy-reveal {
position:relative; padding:48px 24px 40px;
text-align:center;
display:flex; flex-direction:column; align-items:center; gap:18px;
overflow:hidden;
border-radius:var(--radius);
background:radial-gradient(circle at center, var(--navy) 0%, var(--navy-h) 70%, #050615 100%);
color:#fff;
animation:trophyBackdrop .8s ease-out both;
}
.trophy-reveal-back {
position:absolute; inset:0;
background:radial-gradient(circle at center, rgba(201,232,28,.18) 0%, transparent 60%);
animation:trophyBackdropPulse 3.5s ease-in-out infinite;
pointer-events:none;
}
.trophy-reveal-trophy {
position:relative; width:96px; height:96px;
border-radius:50%;
background:radial-gradient(circle, #FFC906 0%, #E7B400 80%);
display:flex; align-items:center; justify-content:center;
box-shadow:0 0 0 6px rgba(255,201,6,.18), 0 20px 60px rgba(255,201,6,.35);
animation:trophyPop 1.1s cubic-bezier(.34,1.56,.64,1) .35s both;
}
.trophy-reveal-trophy .ic { width:46px; height:46px; color:var(--navy); }
.trophy-reveal-rays {
position:absolute; top:48%; left:50%; width:600px; height:600px;
margin:-300px 0 0 -300px; pointer-events:none;
background:conic-gradient(
from 0deg,
transparent 0deg, rgba(255,201,6,.18) 8deg, transparent 16deg,
transparent 32deg, rgba(255,201,6,.14) 40deg, transparent 48deg,
transparent 64deg, rgba(255,201,6,.18) 72deg, transparent 80deg,
transparent 96deg, rgba(255,201,6,.14) 104deg, transparent 112deg,
transparent 128deg, rgba(255,201,6,.18) 136deg, transparent 144deg,
transparent 160deg, rgba(255,201,6,.14) 168deg, transparent 176deg,
transparent 192deg, rgba(255,201,6,.18) 200deg, transparent 208deg,
transparent 224deg, rgba(255,201,6,.14) 232deg, transparent 240deg,
transparent 256deg, rgba(255,201,6,.18) 264deg, transparent 272deg,
transparent 288deg, rgba(255,201,6,.14) 296deg, transparent 304deg,
transparent 320deg, rgba(255,201,6,.18) 328deg, transparent 336deg,
transparent 352deg, rgba(255,201,6,.14) 360deg
);
border-radius:50%;
opacity:0;
animation:trophyRaysIn .9s ease-out .45s forwards,
trophyRaysSpin 26s linear .45s infinite;
}
.trophy-reveal-name {
position:relative;
font-size:clamp(24px, 6vw, 38px); font-weight:900;
text-transform:uppercase; letter-spacing:-.5px; margin:0;
background:linear-gradient(135deg, var(--neon) 0%, #FFC906 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
animation:trophyTextIn .7s cubic-bezier(.16,1,.3,1) .65s both;
}
.trophy-reveal-sub {
position:relative;
font-size:14px; color:rgba(255,255,255,.7); font-weight:600;
text-transform:uppercase; letter-spacing:.8px; margin:0;
animation:trophyTextIn .7s cubic-bezier(.16,1,.3,1) .85s both;
}
@keyframes trophyBackdrop {
from { opacity:0; }
to { opacity:1; }
}
@keyframes trophyBackdropPulse {
0%, 100% { opacity:.7; }
50% { opacity:1; }
}
@keyframes trophyPop {
0% { opacity:0; transform:scale(0) rotate(-45deg); }
60% { opacity:1; transform:scale(1.2) rotate(8deg); }
100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes trophyRaysIn {
from { opacity:0; }
to { opacity:1; }
}
@keyframes trophyRaysSpin {
from { transform:rotate(0); }
to { transform:rotate(360deg); }
}
@keyframes trophyTextIn {
from { opacity:0; transform:translateY(14px); }
to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
.trophy-reveal,
.trophy-reveal-back,
.trophy-reveal-trophy,
.trophy-reveal-rays,
.trophy-reveal-name,
.trophy-reveal-sub { animation:none; opacity:1; transform:none; }
.trophy-reveal-rays { display:none; }
}
/* ============================================================================
PHASE 8 · Gesten (Pull-to-Refresh · Swipe-to-Action · Drag-Reorder)
----------------------------------------------------------------------------
JS in gestures.js (opt-in: window.Gestures.*). CSS hier zentral.
============================================================================ */
/* ── Pull-to-Refresh ────────────────────────────────────────────────────────
Container kriegt .ptr-indicator als erstes Kind. translateY wird per JS
gesetzt. Bei .ptr-ready färbt sich der Spinner neon (Schwelle erreicht). */
.ptr-indicator {
position:relative; display:flex; align-items:center; justify-content:center;
height:48px; margin-top:-48px; opacity:0;
color:var(--muted);
pointer-events:none;
}
.ptr-spinner {
width:24px; height:24px; border-radius:50%;
border:2.5px solid var(--border); border-top-color:currentColor;
animation:none;
}
.ptr-indicator.ptr-pulling .ptr-spinner { color:var(--muted); }
.ptr-indicator.ptr-ready .ptr-spinner { color:var(--neon); }
.ptr-indicator.ptr-busy .ptr-spinner {
animation:ptrSpin .9s linear infinite;
color:var(--neon);
}
@keyframes ptrSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
.ptr-indicator.ptr-busy .ptr-spinner { animation:none; }
}
/* ── Swipe-to-Action ────────────────────────────────────────────────────────
Layered: zwei .swipe-bg darunter (rechts/links), .swipe-front darüber.
Bei armed-* glüht der Hintergrund neon/rot. */
.swipe-wrap { position:relative; overflow:hidden; }
.swipe-bg {
position:absolute; inset:0; display:flex; align-items:center;
padding:0 18px; font-weight:900; text-transform:uppercase; letter-spacing:.6px;
font-size:13px; color:#fff;
}
.swipe-bg-left { justify-content:flex-start; background:var(--neon); color:var(--navy); }
.swipe-bg-right { justify-content:flex-end; background:var(--red); }
.swipe-front {
position:relative; z-index:1; background:var(--card);
transition:transform .25s cubic-bezier(.16,1,.3,1);
touch-action:pan-y;
}
.swipe-armed-right .swipe-bg-left { box-shadow:inset 0 0 0 3px rgba(17,20,45,.18); }
.swipe-armed-left .swipe-bg-right { box-shadow:inset 0 0 0 3px rgba(0,0,0,.2); }
/* ── Drag-Reorder ───────────────────────────────────────────────────────────
.reorder-item bekommt einen Lift bei .is-dragging, Placeholder ist eine
gestrichelte Box mit gleicher Höhe an der Ziel-Stelle. */
.reorder-list .reorder-item {
transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
touch-action:pan-y; user-select:none;
}
.reorder-list .reorder-item.is-dragging {
box-shadow:0 16px 40px rgba(17,20,45,.22);
transform:scale(1.02);
background:var(--card);
}
.reorder-placeholder {
border:2px dashed var(--neon);
border-radius:10px;
background:rgba(201,232,28,.08);
margin:4px 0;
}
[data-drag-handle] { cursor:grab; touch-action:none; }
[data-drag-handle]:active { cursor:grabbing; }
@media (prefers-reduced-motion:reduce){
.reorder-list .reorder-item, .swipe-front { transition:none; }
}
/* ============================================================================
PHASE 9 · Premium-Eye-Candy (Coverflow · Spring-Slider · Number-Path-Morph)
============================================================================ */
/* ── Coverflow-Carousel 3D (Vol3-11) ────────────────────────────────────────
Horizontal-Scroll-Container, Items in der Mitte werden groß, an den Seiten
gekippt + verkleinert. JS in coverflow.js setzt --pos (Distanz zur Mitte
in Item-Breiten, signed) auf jedes sichtbare Item.
Pattern:
*/
.coverflow {
position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
perspective:1400px;
padding:24px 0;
scrollbar-width:none;
}
.coverflow::-webkit-scrollbar { display:none; }
.coverflow-track {
display:flex; gap:24px; padding:0 50%;
transform-style:preserve-3d;
}
.coverflow-card {
flex:0 0 auto; width:240px;
scroll-snap-align:center;
transform-origin:center center;
transform:rotateY(calc(var(--pos, 0) * -22deg)) scale(calc(1 - min(.32, abs(var(--pos, 0)) * .18)));
transition:transform .35s cubic-bezier(.16,1,.3,1);
opacity:calc(1 - min(.5, abs(var(--pos, 0)) * .25));
filter:brightness(calc(1 - min(.2, abs(var(--pos, 0)) * .12)));
}
.coverflow-card[data-pos="0"] { z-index:2; }
@media (prefers-reduced-motion:reduce){
.coverflow-card {
transform:none !important; opacity:1; filter:none;
transition:none;
}
.coverflow { perspective:none; }
}
/* ── Spring-Slider (Vol3-14) ────────────────────────────────────────────────
Range-Input mit Spring-Bounce auf dem Thumb beim Loslassen. Über CSS
reicht: bei :not(:active) bekommt der Thumb eine kurze Bounce-Animation.
Style ersetzt den nativen Slider rein optisch (Track + Thumb). */
.spring-slider {
appearance:none; -webkit-appearance:none;
width:100%; height:36px; background:transparent;
--val:50; /* per JS oder inline: width-Anteil 0..100 */
cursor:pointer;
}
.spring-slider::-webkit-slider-runnable-track {
height:6px; border-radius:3px;
background:linear-gradient(90deg,
var(--neon) 0%, var(--neon) calc(var(--val) * 1%),
var(--border) calc(var(--val) * 1%), var(--border) 100%);
}
.spring-slider::-moz-range-track {
height:6px; border-radius:3px;
background:linear-gradient(90deg,
var(--neon) 0%, var(--neon) calc(var(--val) * 1%),
var(--border) calc(var(--val) * 1%), var(--border) 100%);
}
.spring-slider::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:22px; height:22px; border-radius:50%;
background:var(--navy); border:2px solid var(--neon);
margin-top:-8px;
box-shadow:0 4px 12px rgba(17,20,45,.25);
transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.spring-slider::-moz-range-thumb {
width:22px; height:22px; border-radius:50%;
background:var(--navy); border:2px solid var(--neon);
box-shadow:0 4px 12px rgba(17,20,45,.25);
transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.spring-slider:active::-webkit-slider-thumb { transform:scale(1.25); }
.spring-slider:active::-moz-range-thumb { transform:scale(1.25); }
/* Bounce nach Loslassen (Klasse .is-released wird per JS gesetzt) */
.spring-slider.is-released::-webkit-slider-thumb {
animation:springBounce .55s cubic-bezier(.34,1.56,.64,1);
}
.spring-slider.is-released::-moz-range-thumb {
animation:springBounce .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes springBounce {
0% { transform:scale(1.25); }
60% { transform:scale(.85); }
100% { transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
.spring-slider::-webkit-slider-thumb,
.spring-slider::-moz-range-thumb { transition:none; animation:none; }
}
/* ── Number-Path-Morph (Vol3-06, vereinfacht) ───────────────────────────────
Notiz: „Ziffern müssen klar bleiben". Daher KEIN echtes Path-Morphing,
stattdessen vertikales Crossfade zwischen zwei tabular-num-Ziffern, die
in einem festen Slot übereinanderliegen — die alte Ziffer fadet nach
oben raus, die neue von unten rein. Klar lesbar, kein Zwischenzustand
wirkt verschwommen.
Pattern (per JS aus numbers.js):
7
Wechsel via window.setNumPath(span, 8) → fügt neue Ziffer ein, animiert.
Optional: aufeinanderfolgende Ziffern als Inline-Container für Multi-
stelligen Score (z.B. 23 → 24).
*/
.num-path {
display:inline-flex; align-items:baseline;
position:relative; overflow:hidden;
font-variant-numeric:tabular-nums;
line-height:1;
}
.num-path-digit {
display:inline-block; min-width:.6em; text-align:center;
position:relative; transition:transform .42s cubic-bezier(.34,1.56,.64,1),
opacity .3s;
}
.num-path-digit.num-path-out {
position:absolute; inset:0;
transform:translateY(-100%); opacity:0;
}
.num-path-digit.num-path-in-start {
transform:translateY(100%); opacity:0;
}
@media (prefers-reduced-motion:reduce){
.num-path-digit { transition:none; }
.num-path-digit.num-path-out { display:none; }
}
/* ─── UI-Dialogs (ui-dialogs.js) ─────────────────────────────────────────── */
/* Stil-Disziplin: keine eigenen Farben / Button-Formen.
- Box nutzt --card / --radius / --shadow (wie .card)
- Buttons nutzen .btn-primary / .btn-ghost / .btn-danger (App-Klassen,
inkl. Skew-clip-path) — wir setzen sie im JS, nicht hier nochmal. */
.ui-dlg-overlay {
position:fixed; inset:0; z-index:10000;
background:rgba(10,12,30,.55);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
display:flex; align-items:center; justify-content:center;
padding:24px;
animation:ui-dlg-fade-in .15s ease-out;
}
.ui-dlg-overlay.is-closing { animation:ui-dlg-fade-out .14s ease-in forwards; }
.ui-dlg-box {
background:var(--card); color:var(--text);
border-radius:var(--radius);
border:1px solid var(--border);
box-shadow:var(--shadow);
width:100%; max-width:460px;
padding:22px 22px 18px;
animation:ui-dlg-pop-in .22s cubic-bezier(.16,1,.3,1);
}
.ui-dlg-overlay.is-closing .ui-dlg-box { animation:ui-dlg-pop-out .14s ease-in forwards; }
.ui-dlg-title {
font-weight:900; text-transform:uppercase; letter-spacing:-.2px;
font-size:18px; color:var(--navy);
margin:0 0 10px;
}
.ui-dlg-body { font-size:15px; line-height:1.5; color:var(--text); }
.ui-dlg-body p { margin:0 0 10px; }
.ui-dlg-body p:last-child { margin-bottom:0; }
.ui-dlg-input-wrap { margin-top:14px; }
.ui-dlg-input {
width:100%; box-sizing:border-box;
padding:10px 12px; font-size:15px;
border:2px solid var(--border); border-radius:8px;
background:#fff; color:var(--text);
font-family:inherit;
}
.ui-dlg-input:focus {
outline:none; border-color:var(--neon);
box-shadow:0 0 0 4px var(--neon-glow);
}
.ui-dlg-actions {
display:flex; gap:10px; justify-content:flex-end;
margin-top:20px; flex-wrap:wrap;
}
/* Die Buttons (.btn-primary / .btn-ghost / .btn-danger) bringen ihren Stil
selbst mit. Wir geben ihnen nur eine konsistente Mindesthöhe + Padding,
ohne die App-Farben oder die Skew-Form anzufassen. */
.ui-dlg-actions .btn-primary,
.ui-dlg-actions .btn-ghost,
.ui-dlg-actions .btn-danger {
padding:10px 22px; min-height:40px;
font-size:13px; cursor:pointer;
}
html.ui-dlg-open, html.ui-dlg-open body { overflow:hidden; }
@keyframes ui-dlg-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes ui-dlg-fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes ui-dlg-pop-in {
from { transform:translateY(8px) scale(.96); opacity:0; }
to { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes ui-dlg-pop-out {
from { transform:translateY(0) scale(1); opacity:1; }
to { transform:translateY(4px) scale(.98); opacity:0; }
}
@media (max-width:480px) {
.ui-dlg-overlay { padding:14px; align-items:flex-end; }
.ui-dlg-box { max-width:none; }
.ui-dlg-actions { flex-direction:column-reverse; }
.ui-dlg-actions .btn-primary,
.ui-dlg-actions .btn-ghost,
.ui-dlg-actions .btn-danger { width:100%; }
}
@media (prefers-reduced-motion:reduce){
.ui-dlg-overlay, .ui-dlg-box { animation:none !important; }
}
/* ── Auth-Hint: kein Login-Aufblitzer beim Seitenwechsel ──────────
bekommt im Head-Script .auth-user oder .auth-guest aus dem
Hint-Cookie padel_uid, lange BEVOR me.php zurueckkommt. Elemente
mit .auth-only-user / .auth-only-guest werden CSS-seitig vor dem
ersten Paint korrekt ein-/ausgeblendet. */
html.auth-user .auth-only-guest,
html.auth-guest .auth-only-user { display:none !important; }