:root {
  --bg: #0b0f19;
  --card: #161f30;
  --card2: #1c2740;
  --input: #0f1624;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.16);
  --accent: #f59e0b;
  --accent2: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.16);
  --text: #f3f4f6;
  --sub: #b3bccb;
  --muted: #8f99aa;
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.16);
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.16);
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.16);
  --display: "Arial Black", "Segoe UI Black", "Helvetica Neue", system-ui, sans-serif;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.4; min-height: 100vh; }
a { color: var(--accent2); }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 800; }
.hidden { display: none !important; }
.muted { color: var(--sub); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- Buttons & Inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 16px; border-radius: 12px; border: 1px solid transparent; font-weight: 800; font-size: 0.98rem; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; transition: transform 0.1s, opacity 0.2s; min-height: 46px; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--accent); color: #111; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25); }
.btn-ghost { background: rgba(255, 255, 255, 0.07); border-color: var(--line2); color: var(--text); }
.btn-blue { background: #2563eb; color: #fff; }
.btn-green { background: var(--green); color: #051b12; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger-soft { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }
.btn-wa { background: #22c55e; color: #04220f; }
.btn-ig { background: #e1306c; color: #fff; }
.btn-snap { background: #fffc00; color: #111; }
.btn-sm { padding: 8px 12px; min-height: 36px; font-size: 0.88rem; border-radius: 10px; }
.btn-xs { padding: 6px 10px; min-height: 32px; font-size: 0.82rem; border-radius: 8px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1; min-width: 0; }
.icon-btn { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; text-decoration: none; color: var(--text); }
.lbl { display: block; font-size: 0.8rem; color: var(--sub); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; margin: 12px 0 6px; }
.input, select.input, textarea.input { width: 100%; padding: 12px 13px; border-radius: 10px; background: var(--input); border: 1px solid var(--line2); color: #fff; font-size: 1rem; font-family: inherit; }
.input:focus { outline: 2px solid rgba(245, 158, 11, 0.55); outline-offset: 1px; }
textarea.input { min-height: 84px; resize: vertical; }
.input.saving { border-color: rgba(245, 158, 11, 0.6); }
.input.saved { border-color: rgba(16, 185, 129, 0.8); }
.input.error { border-color: var(--red); }
.row-form { display: flex; gap: 8px; margin-top: 10px; }
.row-form .input { flex: 1; min-width: 0; }
.form-error { color: #fca5a5; font-weight: 700; margin: 8px 0; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.hint { font-size: 0.85rem; color: var(--sub); margin-top: 4px; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card-h { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card-sub { font-size: 0.9rem; color: var(--sub); margin-bottom: 10px; }
.card.accent-amber { border-color: rgba(245, 158, 11, 0.45); }
.card.accent-blue { border-color: rgba(59, 130, 246, 0.45); }
.card.accent-red { border-color: rgba(239, 68, 68, 0.5); }
.card.accent-green { border-color: rgba(16, 185, 129, 0.45); }
.tag { display: inline-block; background: var(--accent-soft); color: var(--accent2); padding: 2px 8px; border-radius: 6px; font-weight: 800; font-size: 0.8rem; margin-right: 4px; }
.pill { display: inline-block; font-size: 0.8rem; background: rgba(255, 255, 255, 0.08); padding: 3px 8px; border-radius: 999px; color: #dde3ec; font-weight: 700; white-space: nowrap; }
.pill-green { background: var(--green-soft); color: #6ee7b7; }
.pill-red { background: var(--red-soft); color: #fca5a5; }
.pill-amber { background: var(--accent-soft); color: var(--accent2); }
.pill-blue { background: var(--blue-soft); color: #93c5fd; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 0.95rem; }

/* ---------- Simple pages (Public, FAQ, Fehler) ---------- */
.page-simple { display: flex; justify-content: center; padding: calc(20px + var(--safe-t)) 16px 40px; }
.simple-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 20px; max-width: 440px; width: 100%; text-align: center; margin-top: 8vh; }
.simple-card h1 { font-family: var(--display); font-size: 1.5rem; margin: 6px 0 10px; }
.simple-card p { color: var(--sub); margin-bottom: 16px; }
.simple-card form { text-align: left; }
.simple-card form .btn { width: 100%; margin-top: 12px; }
.simple-emoji { font-size: 2.4rem; }
.pub-wrap { width: 100%; max-width: 520px; }
.brand-head { text-align: center; margin: 6px 0 16px; }
.brand-title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.75rem; line-height: 1.05; background: linear-gradient(90deg, #fbbf24, #f97316 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-motto { color: var(--sub); font-size: 0.92rem; margin-top: 4px; }
.night-badge { display: inline-block; background: #dc2626; color: #fff; font-size: 0.75rem; font-weight: 900; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; margin-bottom: 6px; animation: pulse 1.5s infinite; }
.pub-list { list-style: none; }
.pub-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pub-row:last-child { border-bottom: 0; }
.pub-rank { width: 26px; text-align: center; font-weight: 900; color: var(--accent2); }
.pub-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #2a374f; }
.pub-name { flex: 1; font-weight: 800; }
.pub-score { text-align: right; min-width: 52px; }
.pub-score b { display: block; color: var(--accent2); font-size: 1.1rem; }
.pub-score small { color: var(--muted); font-size: 0.75rem; }
.pub-score.dim b { color: #93c5fd; }
.link-muted { display: block; text-align: center; color: var(--sub); margin-top: 8px; text-decoration: none; }
.faq p { color: #d6dce6; margin-bottom: 8px; }
.faq p:last-child { margin-bottom: 0; }

/* ---------- App-Rahmen ---------- */
body.app { padding: 0; }
.boot-loader { text-align: center; padding: 30vh 20px; color: var(--sub); font-weight: 700; }
.app-top { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 25, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: calc(8px + var(--safe-t)) 16px 8px; border-bottom: 1px solid var(--line); }
.app-top-inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.app-top .brand-title { font-size: 1.25rem; text-align: left; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-top .night-badge { margin: 0; font-size: 0.7rem; }
.sun-stripe { height: 3px; background: linear-gradient(90deg, #fbbf24, #f97316, #ec4899, #8b5cf6); }
.app-main { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(96px + var(--safe-b)); }
.view { display: none; }
.view.active { display: block; animation: fadeIn 0.18s ease-out; }
.view-title { font-family: var(--display); font-style: italic; text-transform: uppercase; font-size: 1.2rem; margin: 6px 0 12px; letter-spacing: -0.01em; }

/* ---------- Banner ---------- */
.banners:empty { display: none; }
.banner { border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.banner .b-ico { font-size: 1.4rem; line-height: 1; }
.banner .b-body { flex: 1; min-width: 0; }
.banner .b-title { font-weight: 900; }
.banner .b-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.banner-sos { background: linear-gradient(135deg, rgba(220, 38, 38, 0.35), rgba(127, 29, 29, 0.55)); border: 2px solid #ef4444; animation: sosPulse 1.2s infinite; }
.banner-meet { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(120, 53, 15, 0.35)); border: 1px solid rgba(245, 158, 11, 0.7); }
.banner-offline { background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.5); font-size: 0.88rem; }

/* ---------- Bottom-Nav ---------- */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(11, 15, 25, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--safe-b)); }
.bottom-nav-inner { max-width: 560px; margin: 0 auto; display: flex; }
.nav-item { flex: 1; background: none; border: 0; color: #8d97a8; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; cursor: pointer; position: relative; min-width: 0; }
.nav-item .n-ico { font-size: 1.35rem; line-height: 1.2; }
.nav-item .n-lbl { font-size: 0.72rem; font-weight: 800; }
.nav-item.active { color: var(--accent); }
.nav-item.active::before { content: ""; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.nav-dot { position: absolute; top: 2px; right: calc(50% - 20px); background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 900; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; line-height: 16px; }

/* ---------- Segmented ---------- */
.seg { display: flex; background: var(--card); padding: 4px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--line); gap: 2px; }
.seg button { flex: 1; padding: 9px 4px; border: 0; background: transparent; color: var(--sub); font-weight: 800; font-size: 0.9rem; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.seg button.active { background: var(--accent); color: #111; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(245, 158, 11, 0.65); border-radius: 16px; padding: 10px 12px; margin-bottom: 14px; }
.hud-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); background: #2a374f; flex-shrink: 0; }
.hud-t { font-weight: 900; font-size: 1rem; }
.hud-s { font-size: 0.86rem; font-weight: 700; color: var(--accent2); }

/* ---------- Podium ---------- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.pod { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 0; background: none; border: 0; }
.pod-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #6b7280; margin-bottom: 6px; background: #2a374f; }
.pod-1 .pod-av { width: 70px; height: 70px; border-color: var(--accent); box-shadow: 0 0 18px rgba(245, 158, 11, 0.45); }
.pod-2 .pod-av { border-color: #94a3b8; }
.pod-3 .pod-av { border-color: #b45309; }
.pod-crown { font-size: 1.5rem; margin-bottom: -6px; z-index: 2; }
.pod-block { width: 100%; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; }
.pod-1 .pod-block { height: 100px; background: linear-gradient(180deg, #f59e0b, #b45309); color: #111; }
.pod-2 .pod-block { height: 78px; background: linear-gradient(180deg, #94a3b8, #475569); color: #fff; }
.pod-3 .pod-block { height: 62px; background: linear-gradient(180deg, #d97706, #78350f); color: #fff; }
.pod-name { font-size: 0.88rem; font-weight: 900; max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.pod.is-me .pod-av { outline: 3px solid var(--accent2); outline-offset: 2px; }

/* ---------- Ranking-Liste ---------- */
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; width: 100%; text-align: left; }
.rank-row:active { transform: scale(0.99); }
.rank-row.is-me { border: 2px solid var(--accent); background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--card)); }
.rank-row.is-last { border-color: rgba(239, 68, 68, 0.6); }
.rank-num { width: 28px; text-align: center; font-weight: 900; color: var(--sub); font-size: 1.05rem; flex-shrink: 0; }
.rank-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #2a374f; flex-shrink: 0; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: 0.84rem; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub.penalty { color: #fca5a5; font-weight: 700; }
.rank-score { font-size: 1.4rem; font-weight: 900; color: var(--accent2); min-width: 44px; text-align: right; }
.me-bar { height: 6px; background: rgba(0, 0, 0, 0.4); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.me-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 4px; }
.you { background: var(--accent); color: #111; font-size: 0.7rem; font-weight: 900; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; }

/* ---------- Historie ---------- */
.hof-day { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hof-day:last-child { border-bottom: 0; }
.hof-badge { background: var(--accent-soft); color: var(--accent2); font-weight: 900; border-radius: 10px; padding: 6px 8px; text-align: center; min-width: 60px; font-size: 0.85rem; line-height: 1.15; }
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recap { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.recap .r-ico { font-size: 1.3rem; }
.recap .r-t { font-size: 0.8rem; color: var(--sub); font-weight: 700; text-transform: uppercase; }
.recap .r-v { font-weight: 900; font-size: 1rem; }

/* ---------- Feed ---------- */
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.thumb { position: relative; padding-bottom: 100%; border-radius: 10px; overflow: hidden; background: var(--card); cursor: pointer; border: 1px solid var(--line); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .t-badge { position: absolute; background: rgba(0, 0, 0, 0.72); font-size: 0.75rem; padding: 2px 6px; border-radius: 6px; color: #fff; font-weight: 700; }
.thumb .t-br { bottom: 4px; right: 4px; } .thumb .t-tr { top: 4px; right: 4px; } .thumb .t-tl { top: 4px; left: 4px; }
.fab { position: fixed; right: 18px; bottom: calc(84px + var(--safe-b)); z-index: 90; background: var(--accent); color: #111; border: 0; border-radius: 999px; padding: 14px 18px; font-weight: 900; font-size: 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); cursor: pointer; }

/* ---------- Sheets / Modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.15s; }
.overlay.center { align-items: center; padding: 14px; }
.sheet { width: 100%; max-width: 560px; background: var(--card); border-radius: 22px 22px 0 0; border: 1px solid var(--line2); padding: 12px 18px calc(22px + var(--safe-b)); max-height: 90vh; overflow-y: auto; animation: slideUp 0.22s ease-out; position: relative; }
.sheet-grip { width: 44px; height: 5px; background: rgba(255, 255, 255, 0.25); border-radius: 3px; margin: 0 auto 12px; }
.sheet-close { position: absolute; top: 10px; right: 12px; }
.sheet h2 { font-size: 1.25rem; margin-bottom: 6px; padding-right: 44px; }
.dialog { background: var(--card); border: 1px solid var(--line2); border-radius: 18px; padding: 20px; max-width: 400px; width: 100%; animation: popIn 0.15s ease-out; }
.dialog p { color: var(--sub); margin: 6px 0 16px; }
.toast-wrap { position: fixed; left: 0; right: 0; bottom: calc(92px + var(--safe-b)); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 16px; }
.toast { background: #111827; color: #fff; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation: popIn 0.15s; max-width: 100%; }
.toast.ok { border-color: rgba(16, 185, 129, 0.7); }
.toast.err { border-color: rgba(239, 68, 68, 0.8); }

/* ---------- User-Sheet ---------- */
.u-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.u-av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); background: #2a374f; flex-shrink: 0; }
.stat-row { display: flex; gap: 8px; margin-bottom: 12px; }
.stat { flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 12px; padding: 9px 6px; text-align: center; }
.stat .v { display: block; font-size: 1.35rem; font-weight: 900; color: var(--accent2); }
.stat .l { font-size: 0.75rem; color: var(--sub); text-transform: uppercase; font-weight: 700; }
.info-box { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; font-size: 0.95rem; }
.info-box.clickable { cursor: pointer; }
.info-box.green { border-color: rgba(16, 185, 129, 0.5); background: var(--green-soft); }
.info-box.amber { border-color: rgba(245, 158, 11, 0.5); background: var(--accent-soft); }
.info-box.red { border-color: rgba(239, 68, 68, 0.6); background: var(--red-soft); }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 250; display: flex; flex-direction: column; }
.lb-img-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; touch-action: pan-y; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.55); color: #fff; border: 0; font-size: 1.8rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.lb-left { left: 8px; } .lb-right { right: 8px; }
.lb-close { position: absolute; top: calc(10px + var(--safe-t)); right: 10px; z-index: 2; }
.lb-panel { background: var(--card); border-top: 1px solid var(--line2); padding: 12px 16px calc(14px + var(--safe-b)); max-height: 46vh; overflow-y: auto; }
.lb-meta { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--sub); }
.lb-cap { font-size: 1rem; font-weight: 700; margin: 4px 0 10px; }
.comments { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.comment { background: rgba(0, 0, 0, 0.28); padding: 7px 10px; border-radius: 10px; font-size: 0.93rem; }
.comment .c-a { font-weight: 800; color: var(--accent2); margin-right: 6px; }
.comment .c-t { float: right; font-size: 0.78rem; color: var(--muted); margin-left: 6px; }

/* ---------- Cockpit ---------- */
.hero { background: linear-gradient(135deg, #1e293b, #161f30); border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 20px; padding: 16px; margin-bottom: 14px; }
.hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hero-av { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue); background: #2a374f; flex-shrink: 0; }
.hero-av.leader { border-color: var(--accent); }
.hero-av.last { border-color: var(--red); }
.hero-name { font-size: 1.4rem; font-weight: 900; line-height: 1.15; }
.hero-badge { font-size: 0.88rem; font-weight: 800; padding: 6px 10px; border-radius: 10px; text-align: center; margin-bottom: 12px; }
.badge-leader { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent2); }
.badge-penalty { background: var(--red-soft); border: 1px solid var(--red); color: #fca5a5; }
.badge-chaser { background: var(--blue-soft); border: 1px solid var(--blue); color: #93c5fd; }
.safety-row { display: flex; gap: 8px; margin-bottom: 14px; }
.safety-row .btn { flex: 1; }
.btn-sos { background: #dc2626; color: #fff; font-size: 1.05rem; box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35); }
details.acc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
details.acc > summary { list-style: none; cursor: pointer; padding: 15px 16px; font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: 10px; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "›"; margin-left: auto; font-size: 1.4rem; color: var(--muted); transition: transform 0.2s; }
details.acc[open] > summary::after { transform: rotate(90deg); }
details.acc > summary .s-sub { font-weight: 600; font-size: 0.85rem; color: var(--sub); }
.acc-body { padding: 0 16px 16px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-btn { background: var(--input); border: 1px solid var(--line2); color: #fff; padding: 14px 8px; border-radius: 12px; font-size: 0.98rem; font-weight: 800; cursor: pointer; }
.status-btn.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent2); }
.switch { display: inline-flex; background: #1e293b; padding: 3px; border-radius: 10px; gap: 3px; }
.switch button { border: 0; background: transparent; color: var(--sub); font-weight: 900; font-size: 0.85rem; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.switch button.on { background: var(--green); color: #04150e; }
.switch button.off { background: var(--red); color: #fff; }
.beacon-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--input); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; }
.vote-card { background: var(--input); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.preview-box { background: rgba(0, 0, 0, 0.45); border: 1px dashed rgba(245, 158, 11, 0.5); border-radius: 12px; padding: 12px; margin-top: 8px; }
.preview-q { text-align: center; font-weight: 900; font-size: 1.05rem; margin-top: 8px; }
.preview-btn { background: #222d44; padding: 10px 12px; border-radius: 10px; font-weight: 800; text-align: center; border: 1px solid var(--line2); margin-top: 6px; font-size: 0.95rem; }
.upload-preview { width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px; margin: 10px 0 4px; }

/* ---------- Crew / Map / Buddy ---------- */
#crew-map { height: 330px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: #0f1624; }
.map-ph { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--sub); padding: 20px; text-align: center; }
.map-marker { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--green); background: #2a374f center/cover; color: var(--accent2); font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.map-marker.stale { border-color: var(--accent); }
.map-marker.old { border-color: #6b7280; filter: grayscale(0.6); }
.map-marker.sos { border-color: var(--red); animation: sosPulse 1s infinite; }
.map-meet { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.leaflet-popup-content { font-weight: 700; color: #111; }
.buddy-group { margin-bottom: 12px; }
.buddy-group h3 { font-size: 0.86rem; text-transform: uppercase; color: var(--sub); margin-bottom: 6px; letter-spacing: 0.03em; }
.buddy { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.buddy:last-child { border-bottom: 0; }
.buddy img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #2a374f; }
.buddy .b-n { font-weight: 800; }
.buddy .b-s { font-size: 0.84rem; color: var(--sub); }

/* ---------- Taxi ---------- */
.taxi-box { background: linear-gradient(135deg, #1e293b, #0f1624); border: 2px solid var(--accent); border-radius: 20px; padding: 20px 16px; text-align: center; margin-bottom: 14px; }
.taxi-tag { display: inline-block; background: var(--accent); color: #111; font-weight: 900; font-size: 0.82rem; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; margin-bottom: 10px; }
.taxi-es { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.taxi-hotel { font-size: 1.85rem; font-weight: 900; line-height: 1.12; margin-bottom: 12px; word-break: break-word; }
.taxi-addr { background: rgba(0, 0, 0, 0.5); border: 2px dashed rgba(245, 158, 11, 0.65); padding: 14px; border-radius: 14px; margin-bottom: 12px; font-size: 1.4rem; font-weight: 800; color: var(--accent2); line-height: 1.3; word-break: break-word; }
.taxi-room { display: inline-block; font-size: 1.15rem; font-weight: 900; color: #93c5fd; background: var(--blue-soft); padding: 6px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid rgba(59, 130, 246, 0.35); }
.taxi-full { position: fixed; inset: 0; z-index: 300; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b)); text-align: center; }
.taxi-full .tf-es { color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: 18px; }
.taxi-full .tf-hotel { color: #fff; font-size: 2.4rem; font-weight: 900; line-height: 1.1; margin-bottom: 18px; word-break: break-word; }
.taxi-full .tf-addr { color: #fde047; font-size: 2rem; font-weight: 900; line-height: 1.2; word-break: break-word; }
.taxi-full .tf-room { color: #93c5fd; font-size: 1.6rem; font-weight: 900; margin-top: 18px; }
.taxi-full .tf-actions { position: absolute; bottom: calc(18px + var(--safe-b)); left: 16px; right: 16px; display: flex; gap: 8px; }
.taxi-full .tf-actions .btn { flex: 1; }
.crew-hotel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.loc-chip { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 0.88rem; font-weight: 800; }
.loc-live { background: var(--green-soft); border: 1px solid var(--green); color: #6ee7b7; }
.loc-old { background: var(--accent-soft); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--accent2); }

/* ---------- Tour ---------- */
.ch-item { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ch-item:last-child { border-bottom: 0; }
.ch-pts { background: var(--accent); color: #111; font-weight: 900; border-radius: 10px; padding: 6px 8px; min-width: 50px; text-align: center; font-size: 0.9rem; }
.bal-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.bal-row:last-child { border-bottom: 0; }
.pos { color: #6ee7b7; } .neg { color: #fca5a5; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line2); color: var(--text); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent2); }
.ledger-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ledger-item:last-child { border-bottom: 0; }
.info-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-item:last-child { border-bottom: 0; }
.info-item .ii-ico { font-size: 1.5rem; }
.info-item .ii-when { color: var(--accent2); font-weight: 800; font-size: 0.9rem; }
.info-item .ii-det { color: var(--sub); font-size: 0.92rem; white-space: pre-wrap; margin-top: 2px; }
.em-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.em-row:last-child { border-bottom: 0; }

/* ---------- QR Vollbild ---------- */
.qr-full { position: fixed; inset: 0; background: #fff; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #111; }
.qr-full h2 { font-size: 1.4rem; font-weight: 900; }
.qr-full canvas { width: min(78vw, 360px); height: auto; margin: 16px 0; image-rendering: pixelated; }
.qr-full .btn { width: 100%; max-width: 300px; margin-top: 8px; }

/* ---------- Admin ---------- */
.admin .app-main { padding-bottom: 40px; }
.adm-user { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.adm-user:last-child { border-bottom: 0; }
.adm-user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #2a374f; }
.sys-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.sys-row:last-child { border-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sub-box { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 12px; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes sosPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 420px) { .feed-grid { gap: 8px; } }

/* Fixes: Textüberlauf in Ranking & Podium */
.rank-info { display: block; overflow: hidden; }
.rank-name, .rank-sub { display: block; }
.pod-block > span { display: block; max-width: 100%; text-align: center; }
.pod-3 .pod-block { height: 70px; }
.grow { flex: 1; min-width: 0; }

/* ---------- Urlaubs-Countdown ---------- */
.cd-wrap { margin-bottom: 14px; }
.cd-card { position: relative; overflow: hidden; border-radius: 20px; padding: 16px 14px 14px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 55%, #7c3aed 100%); box-shadow: 0 10px 30px rgba(236, 72, 153, 0.25); }
.cd-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.28), transparent 55%); pointer-events: none; }
.cd-deco { position: absolute; font-size: 2rem; opacity: 0.9; animation: cdFloat 3.5s ease-in-out infinite; }
.cd-deco-l { left: 8px; top: 6px; }
.cd-deco-r { right: 10px; top: 8px; animation-delay: 1.2s; animation-name: cdSpin; animation-duration: 12s; animation-timing-function: linear; }
.cd-label { position: relative; font-family: var(--display); font-style: italic; text-transform: uppercase; font-weight: 900; font-size: clamp(1rem, 4.6vw, 1.3rem); letter-spacing: -0.01em; margin: 2px 34px 12px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.cd-tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-tile { background: rgba(11, 15, 25, 0.38); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; padding: 10px 2px 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cd-num { display: block; font-size: clamp(1.9rem, 9vw, 2.6rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.cd-num.flip { animation: cdFlip 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.cd-unit { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }
.cd-big { position: relative; font-size: clamp(2rem, 10vw, 2.8rem); font-weight: 900; margin: 4px 0 6px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.cd-track { position: relative; height: 10px; background: rgba(11, 15, 25, 0.35); border-radius: 999px; margin: 18px 22px 6px 6px; }
.cd-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #fde047, #fff); transition: width 1s linear; }
.cd-plane { position: absolute; top: -13px; left: -14px; font-size: 1.5rem; transition: left 1s linear; animation: cdBob 1.6s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.cd-dest { position: absolute; right: -22px; top: -12px; font-size: 1.4rem; }
.cd-sub { position: relative; font-size: 0.9rem; font-weight: 700; margin-top: 8px; opacity: 0.95; }
.cd-soon { animation: cdGlow 1.6s ease-in-out infinite; }
.cd-live { background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #f59e0b 100%); }
.cd-done { background: linear-gradient(135deg, #334155, #1e293b); }
.cd-confetti { position: absolute; top: -40px; animation-name: cdFall; animation-timing-function: linear; animation-fill-mode: forwards; pointer-events: none; }
.pub-wrap .cd-wrap { margin-bottom: 14px; }
@keyframes cdFlip { 0% { transform: translateY(-35%) scale(0.85); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
@keyframes cdFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes cdSpin { to { transform: rotate(360deg); } }
@keyframes cdBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes cdGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.55); } 50% { box-shadow: 0 0 0 10px rgba(253, 224, 71, 0); } }
@keyframes cdFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } }
.cd-card [hidden] { display: none !important; }

/* ---------- Malle-Modus: größer & daumenfreundlich (überschreibt die Grundwerte) ---------- */
body { font-size: 17px; }
.btn { min-height: 54px; font-size: 1.08rem; border-radius: 14px; }
.btn-sm { min-height: 46px; font-size: 1rem; padding: 10px 14px; }
.btn-xs { min-height: 42px; font-size: 0.95rem; padding: 8px 12px; }
.icon-btn { width: 46px; height: 46px; font-size: 1.3rem; }
.small, .hint, .card-sub, .rank-sub, .buddy .b-s, .comment, .lb-meta { font-size: 0.95rem; }
.pill, .tag { font-size: 0.9rem; }
.lbl { font-size: 0.88rem; }
.nav-item .n-ico { font-size: 1.6rem; }
.nav-item .n-lbl { font-size: 0.8rem; }
.bottom-nav { padding-top: 8px; }
.status-btn { padding: 18px 8px; font-size: 1.1rem; }
.seg button { padding: 12px 4px; font-size: 1rem; }
.rank-row { padding: 12px 14px; }
.rank-name { font-size: 1.12rem; }
.rank-score { font-size: 1.6rem; }
.chip { padding: 10px 14px; font-size: 1rem; }
.switch button { padding: 11px 16px; font-size: 0.95rem; }
.check input { width: 26px; height: 26px; }
.input, select.input, textarea.input { font-size: 1.05rem; padding: 14px; }
details.acc > summary { padding: 18px 16px; font-size: 1.1rem; }
.hud-s { font-size: 0.95rem; }
.toast { font-size: 1.05rem; padding: 12px 18px; }
.fab { padding: 16px 22px; font-size: 1.1rem; }
.app-main { padding-bottom: calc(108px + var(--safe-b)); }
.fab { bottom: calc(96px + var(--safe-b)); }
.toast-wrap { bottom: calc(104px + var(--safe-b)); }

/* Karte bleibt unter Kopf- und Navigationsleiste */
#crew-map { position: relative; z-index: 0; isolation: isolate; }

/* ===== Admin: Tabs, Dashboard, Klappbereiche ===== */
.adm-main { padding-bottom: calc(108px + var(--safe-b)) !important; }
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.dash-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 4px; color: var(--text); cursor: pointer; font: inherit; }
.dash-ico { font-size: 1.05rem; line-height: 1.2; }
.dash-val { font-size: 1.05rem; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lbl { font-size: 0.66rem; font-weight: 700; color: var(--sub); line-height: 1.15; }
.dash-warn { border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.dash-alarm { border-color: var(--red); background: rgba(239, 68, 68, 0.18); animation: pulse 1.4s infinite; }
.adm-user.is-new { background: rgba(34, 197, 94, 0.14); border-radius: 12px; padding-left: 8px; padding-right: 8px; box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.55); }
.adm-user.is-sos { background: rgba(239, 68, 68, 0.14); border-radius: 12px; }
details.acc.acc-danger { border-color: rgba(239, 68, 68, 0.55); }
details.acc.acc-danger > summary { color: #fca5a5; }
/* Bottom-Sheet: lange Links dürfen die Breite nicht sprengen */
.sheet { min-width: 0; overflow-x: hidden; }
.sheet p, .sheet .small, .sheet .hint { overflow-wrap: anywhere; }

/* ===== Cockpit aufgeräumt ===== */
.grp-h { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); margin: 18px 4px 8px; }
#view-ich .hero { padding: 14px; }
#view-ich .hero-top { margin-bottom: 10px; }
#view-ich .hero-av { width: 58px; height: 58px; }
#view-ich .hero-badge { padding: 5px 8px; margin-bottom: 10px; font-size: 0.82rem; }
#view-ich .stat-row { margin-bottom: 10px; }
#view-ich .stat { padding: 6px 4px; }
#view-ich .stat .v { font-size: 1.15rem; }
#view-ich .stat .l { font-size: 0.68rem; }
#view-ich details.acc > summary .s-sub { margin-left: 4px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Ranking: noch ohne Punkte ===== */
.zero-sec { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.zero-sec.is-last { border-color: rgba(239, 68, 68, 0.55); }
.zero-h { font-weight: 900; font-size: 1.02rem; }
.zero-sub { font-size: 0.85rem; font-weight: 700; color: #fca5a5; margin-top: 2px; }
.zero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.zero-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; color: var(--text); font: inherit; cursor: pointer; }
.zero-card.is-me { border-color: var(--accent); box-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
.zero-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #2a374f; }
.zero-name { font-weight: 900; font-size: 0.98rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zero-st { font-size: 0.75rem; color: var(--sub); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Ranking-Karten wie in v1 (Medaille, Balken, Abstand) ===== */
.rank-card { flex-direction: column; align-items: stretch; gap: 6px; position: relative; }
.rank-main { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.rank-card .rank-num { font-size: 1.35rem; }
.rank-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.rank-score small { font-size: 0.62rem; font-weight: 800; color: var(--sub); text-transform: uppercase; margin-top: 3px; }
.rank-slug { color: #6b7280; font-size: 0.78rem; }
.rank-banner { display: inline-block; margin-top: 3px; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-banner.lead { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.5); }
.rank-banner.pen { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.5); }
.rank-bar { display: block; height: 8px; background: rgba(0, 0, 0, 0.4); border-radius: 5px; overflow: hidden; }
.rank-bar > span { display: block; height: 100%; border-radius: 5px; }
.rank-bar .b-today { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rank-bar .b-total { background: linear-gradient(90deg, #3b82f6, #38bdf8); }
.rank-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--sub); font-weight: 700; }
.rank-card.is-lead { border-color: rgba(245, 158, 11, 0.7); }
.rank-card.is-me { box-shadow: 0 0 18px rgba(245, 158, 11, 0.35); animation: meGlow 2.4s ease-in-out infinite; }
@keyframes meGlow { 0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.25); } 50% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.55); } }
.me-pointer { position: absolute; top: -9px; left: 12px; background: var(--accent); color: #111; font-size: 0.66rem; font-weight: 900; padding: 1px 7px; border-radius: 6px; }
.pod.is-me .pod-av { animation: meGlow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rank-card.is-me, .pod.is-me .pod-av { animation: none; } }
.rank-list { gap: 12px; }

/* ===== Admin: Scan-Historie ===== */
.sl-sum { margin: 10px 0 6px; font-size: 0.9rem; }
.sl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sl-row:last-child { border-bottom: 0; }
.sl-row.sl-no { opacity: 0.75; }
.sl-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.85rem; color: var(--sub); width: 64px; flex-shrink: 0; }
.sl-loc { text-align: right; flex-shrink: 0; }

/* ===== Feed: Kamera & Galerie direkt ===== */
.fab-row { position: fixed; right: 14px; left: 14px; bottom: calc(96px + var(--safe-b)); z-index: 90; display: flex; justify-content: flex-end; gap: 10px; pointer-events: none; }
.fab-row .fab { position: static; pointer-events: auto; }
.fab-gal { background: #1f2a40; color: #fff; border: 1px solid var(--line2); }
#view-feed { padding-bottom: 70px; }

/* ===== Vollbild: kleines ✕ oben rechts ===== */
.fs-x { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.1); color: #111; font-size: 1.4rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.fs-x-dark { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lb-close { width: 46px; height: 46px; font-size: 1.3rem; }

/* ===== Startseite: Teaser-Modus & Hervorhebung ===== */
.teaser-box { position: relative; border-radius: 12px; overflow: hidden; }
.teaser-blur { filter: blur(6px); opacity: 0.55; pointer-events: none; user-select: none; }
.pub-ph { display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--sub); }
.teaser-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; gap: 6px; background: radial-gradient(circle, rgba(11, 15, 25, 0.55), rgba(11, 15, 25, 0.85)); }
.teaser-lock b { font-size: 1.2rem; }
.teaser-lock p { font-size: 1rem; line-height: 1.4; max-width: 320px; }
.teaser-ico { font-size: 2.4rem; }
.pub-unlock { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.45); border-radius: 10px; padding: 8px 10px; font-size: 0.92rem; font-weight: 700; margin-bottom: 8px; }
.pub-row.pub-hl { background: rgba(245, 158, 11, 0.14); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.6); padding-left: 6px; padding-right: 6px; }
.pub-tag { display: inline-block; font-size: 0.72rem; font-weight: 900; background: var(--accent); color: #111; border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }

/* ===== Startseite: Code-Feld & dezenter Crew-Login ===== */
.code-form { margin-top: 12px; }
.code-form .input { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
details.crew-login { margin-top: 18px; padding: 10px 4px; color: var(--sub); }
details.crew-login > summary { cursor: pointer; font-weight: 800; font-size: 0.9rem; text-align: center; list-style: none; }
details.crew-login > summary::-webkit-details-marker { display: none; }
details.crew-login[open] > summary { margin-bottom: 8px; }
#ch-warn[hidden] { display: none !important; } #ch-warn { margin-bottom: 8px; }
.rank-st { display: inline-block; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--sub); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }

/* ===== Spruch-Vorlagen: doppelte Sprüche markieren ===== */
.vote-card.vote-dup { border-color: var(--red); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }
.vote-dup-msg { background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.55); color: #fca5a5; border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; }
.vote-dup-msg[hidden] { display: none; }
.vote-card textarea.input { resize: vertical; min-height: 60px; }
.vote-card select.input option:disabled { color: #6b7280; }

/* ===== Admin: QR-Farbe & Transparenz ===== */
.qr-prev { display: inline-block; padding: 8px; border-radius: 12px; margin: 10px auto; }
.qr-prev.qr-transp { background-color: #fff; background-image: linear-gradient(45deg, #d1d5db 25%, transparent 25%), linear-gradient(-45deg, #d1d5db 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d1d5db 75%), linear-gradient(-45deg, transparent 75%, #d1d5db 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.qr-style { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; text-align: left; }
.qr-opt { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--sub); }
.qr-opt[hidden] { display: none; }
.qr-opt input[type="color"] { width: 64px; height: 42px; border: 1px solid var(--line2); border-radius: 10px; background: none; padding: 2px; cursor: pointer; }
.qr-opt select.input { min-width: 140px; }
.qr-prev.qr-transp.qr-dark { background-color: #111827; background-image: linear-gradient(45deg, #374151 25%, transparent 25%), linear-gradient(-45deg, #374151 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #374151 75%), linear-gradient(-45deg, transparent 75%, #374151 75%); }

/* ===== Super-Admin (Gruppen) ===== */
.super .card { margin-bottom: 14px; }
.super-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.super-stats span { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 0.85rem; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.super-off { opacity: 0.7; border-style: dashed; }
.super-pin { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.06em; color: var(--accent2); }
.super-prefix { align-self: center; font-size: 0.8rem; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.super-more { margin-top: 10px; }
.super-more > summary { cursor: pointer; font-weight: 700; color: var(--sub); font-size: 0.9rem; }
.super-more form { margin-top: 8px; }
.super .btn-row form { display: contents; }

/* ===== Scan-Seiten-Editor (WYSIWYG) ===== */
.se-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.se-title { font-weight: 900; }
.se-seg { display: flex; background: var(--input); border: 1px solid var(--line2); border-radius: 10px; padding: 3px; gap: 2px; }
.se-seg button { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; cursor: pointer; color: var(--sub); }
.se-seg button.on { background: var(--accent); color: #111; }
.se-hint { display: block; font-size: 0.8rem; color: var(--muted); margin: 6px 0; font-weight: 600; }
.se-phone { container-type: inline-size; max-width: 380px; margin: 8px auto 4px; border-radius: 26px; border: 3px solid #2a374f; background: #0b0f19; color: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.se-phone button { font-family: inherit; cursor: pointer; }
.se-phone .wm-btn, .se-phone .wm-q, .se-phone .wm-way { width: 100%; }
.se-phone .wm-q { background: transparent; border: 0; color: #fff; padding: 1cqw 8cqw; border-radius: 3cqw; }
.se-phone .wm-av { padding: 0; }
.se-el { position: relative; }
.se-el:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.se-phone .se-el:hover { filter: brightness(1.08); }
.se-phone .wm-q.se-el { outline: 1.5px dashed rgba(251, 191, 36, 0.55); outline-offset: -1px; }
.se-pen { position: absolute; top: -2cqw; right: -1cqw; width: 8cqw; height: 8cqw; border-radius: 50%; background: #111827; border: 0.6cqw solid var(--accent2); font-size: 4cqw; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.4); }
.se-phone .wm-q .se-pen { top: 50%; right: 0; transform: translateY(-50%); }
.se-ghosts { display: flex; flex-direction: column; gap: 2cqw; }
.se-ghost { width: 100%; border: 0.8cqw dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.03); color: #cbd5e1; border-radius: 4cqw; padding: 3cqw; font-weight: 800; font-size: 4.4cqw; text-align: center; }
.se-ghost small { font-weight: 600; color: #8f99aa; }
.se-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.se-sec .se-hint { margin: 0; }
.se-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.se-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 2px solid var(--line2); background: var(--input); cursor: pointer; font-weight: 800; font-size: 0.8rem; min-width: 0; }
.se-chip-i { font-size: 1.4rem; line-height: 1; }
.se-chip b { font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; }
.se-chip.is-on { border-color: rgba(16, 185, 129, 0.7); }
.se-chip.is-on b { background: var(--green-soft); color: #6ee7b7; }
.se-chip.is-off { opacity: 0.75; }
.se-chip.is-off b { background: var(--red-soft); color: #fca5a5; }
.se-chip.is-miss { border-style: dashed; opacity: 0.8; }
.se-chip.is-miss b { background: var(--accent-soft); color: var(--accent2); }
.se-more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.se-more summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.se-more summary::-webkit-details-marker { display: none; }
.se-more summary .se-hint { margin: 0; }
.se-more[open] summary { margin-bottom: 6px; }
.se-bg { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.15s; }
.se-sheet { width: 100%; max-width: 560px; max-height: 72vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5); animation: slideUp 0.2s ease-out; }
.se-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; font-size: 1.1rem; }
.se-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card2); cursor: pointer; font-weight: 900; flex: 0 0 auto; }
.se-sheet-b { padding: 0 16px 8px; overflow-y: auto; min-height: 0; }
.se-sheet-f { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.se-switch { display: flex; align-items: center; gap: 10px; font-weight: 800; padding: 10px 12px; margin-top: 4px; background: var(--input); border: 1px solid var(--line2); border-radius: 12px; cursor: pointer; }
.se-switch input { width: 22px; height: 22px; accent-color: var(--accent); flex: 0 0 auto; }
.se-sheet select.input.se-pick { margin: 0 0 6px; font-size: 0.88rem; min-height: 40px; padding-top: 8px; padding-bottom: 8px; color: var(--accent2); background: rgba(245, 158, 11, 0.07); border-style: dashed; }
.se-lbl-note { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.se-avwrap { position: relative; flex: 0 0 auto; display: block; }
.se-phone .se-pen.se-pen-av { top: auto; bottom: 0; right: 0; width: 9cqw; height: 9cqw; font-size: 4.6cqw; cursor: pointer; }
.av-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 14px; border: 2px solid var(--line2); background: var(--input); font-weight: 800; cursor: pointer; }
.av-opt span { font-size: 2rem; line-height: 1; }
.av-opt.av-del { border-color: rgba(239, 68, 68, 0.45); color: #fca5a5; }
.av-prev { width: 112px; height: 112px; border-radius: 50%; margin: 4px auto 12px; display: flex; align-items: center; justify-content: center; font-size: 64px; border: 4px solid rgba(255, 255, 255, 0.25); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.av-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.av-e { aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; background: var(--input); font-size: 1.5rem; cursor: pointer; padding: 0; }
.av-e.on { border-color: var(--accent); background: var(--accent-soft); }
.av-colors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.av-c { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); cursor: pointer; padding: 0; }
.av-c.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* ===== Night-Design ===== */
@keyframes nightShift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.night-glow .sun-stripe, .night-party .sun-stripe { height: 4px; background: linear-gradient(90deg, #a855f7, #ec4899, #38bdf8, #a855f7); background-size: 300% 100%; animation: nightShift 6s linear infinite; }
.night-glow .app-top { box-shadow: 0 6px 24px rgba(168, 85, 247, 0.2); }
.night-party { --card: #1d1236; --card2: #26184a; --input: #140c28; --line: rgba(240, 171, 252, 0.14); --line2: rgba(240, 171, 252, 0.26); --accent-soft: rgba(236, 72, 153, 0.18);
  background: radial-gradient(120% 60% at 50% 0%, #3b0764 0%, #1a0b33 45%, #0a0616 100%) fixed; }
.night-party .app-top { background: rgba(26, 11, 51, 0.92); box-shadow: 0 6px 26px rgba(236, 72, 153, 0.25); }
.night-party .card, .night-party details.acc { box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.08), 0 8px 28px rgba(168, 85, 247, 0.12); }
.night-party .brand-title { text-shadow: 0 0 14px rgba(236, 72, 153, 0.6); }
.night-party .bottom-nav { background: rgba(20, 8, 40, 0.95); }
.info-box.night-now { background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)); border: 1px solid rgba(240, 171, 252, 0.4); color: #f5d0fe; border-radius: 12px; padding: 10px 12px; font-weight: 800; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .night-glow .sun-stripe, .night-party .sun-stripe { animation: none; } }

/* ===== Bier-Roulette ===== */
.rl-ov { align-items: stretch; }
.rl { width: 100%; max-width: 560px; margin: 0 auto; background: radial-gradient(120% 60% at 50% 30%, #2a1a05 0%, #0b0f19 70%); overflow-y: auto; padding: 12px 16px calc(24px + var(--safe-b)); position: relative; }
.rl-head { display: flex; align-items: center; justify-content: space-between; }
.rl-head h2 { font-family: var(--display); font-size: 1.5rem; color: var(--accent2); }
.rl-sub { color: var(--sub); font-weight: 700; margin: 2px 0 10px; }
.rl-players { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid var(--line2); background: var(--input); font-weight: 800; font-size: 0.85rem; cursor: pointer; opacity: 0.55; }
.rl-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rl-chip.on { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.rl-wheel { position: relative; width: min(86vw, 380px); aspect-ratio: 1; margin: 18px auto 6px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0 38%, rgba(255, 255, 255, 0.03) 39% 100%); border: 2px dashed rgba(251, 191, 36, 0.25); }
.rl-seat { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.rl-seat-in { position: absolute; left: 50%; top: 0; width: 64px; margin-left: -32px; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: rotate(calc(-1 * var(--a))); transition: transform 0.3s; }
.rl-seat-in img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.2); background: var(--card2); }
.rl-seat-in span { font-size: 0.72rem; font-weight: 900; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.rl-seat.rl-win .rl-seat-in img { border-color: var(--accent2); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.35), 0 0 26px rgba(251, 191, 36, 0.9); animation: rlPop 0.6s ease-out 2; }
.rl-seat.rl-win .rl-seat-in span { color: var(--accent2); }
@keyframes rlPop { 50% { transform: scale(1.25); } }
.rl-mug { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; padding: 0; }
.rl-mug:disabled { opacity: 0.5; cursor: default; }
.rl-rot { position: absolute; inset: 0; display: block; transition: transform 4.2s cubic-bezier(.12,.72,.14,1); }
.rl-beer { position: absolute; inset: 14%; display: flex; align-items: center; justify-content: center; font-size: min(22vw, 96px); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
.rl-arrow { position: absolute; left: 50%; top: -14%; width: 0; height: 0; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 26px solid var(--accent2); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)); }
.rl-mug:not(:disabled) .rl-beer { animation: rlWobble 2.4s ease-in-out infinite; }
@keyframes rlWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.rl-min { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-weight: 800; color: #fca5a5; font-size: 0.85rem; }
.rl-result { text-align: center; margin: 6px 0 4px; animation: popIn 0.25s; }
.rl-win-t { font-family: var(--display); font-size: 1.9rem; color: var(--accent2); text-shadow: 0 0 18px rgba(251, 191, 36, 0.5); }
.rl-win-s { color: var(--sub); font-weight: 800; }
.rl-result .btn-row { justify-content: center; flex-wrap: wrap; }
.rl-sec { margin: 14px 0 6px; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rl-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-count { background: var(--card2); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 0.85rem; }
.rl-count b { color: var(--accent2); }
.rl-hist { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.rl-hist b { flex: 1; }
.rl-fair { margin-top: 14px; font-size: 0.8rem; color: var(--muted); font-weight: 600; text-align: center; }
.rl-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 450; overflow: hidden; }
.rl-confetti span { position: absolute; top: -40px; animation: rlFall 2.6s ease-in forwards; }
@keyframes rlFall { to { transform: translateY(110vh) rotate(540deg); opacity: 0.2; } }
.rl-cta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(251, 191, 36, 0.45); background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(236, 72, 153, 0.12)); cursor: pointer; }
.rl-cta-i { font-size: 2rem; }
.rl-cta b { display: block; font-size: 1.05rem; }
.rl-cta small { color: var(--sub); font-weight: 600; }
.banner-rl { border: 1px solid rgba(251, 191, 36, 0.55); background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(22, 31, 48, 0.9)); }
@media (prefers-reduced-motion: reduce) { .rl-mug .rl-beer { animation: none !important; } .rl-confetti { display: none; } }

/* ===== Malle Wrapped ===== */
.wr-ov { position: fixed; inset: 0; z-index: 420; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wr-load { color: #fff; text-align: center; font-weight: 800; }
.wr-spin { font-size: 4rem; animation: wrSpin 1.4s ease-in-out infinite; margin-bottom: 10px; }
@keyframes wrSpin { 50% { transform: scale(1.2) rotate(8deg); } }
.wr-stage { position: relative; width: min(100vw, calc((100dvh - 86px) * 0.5625)); aspect-ratio: 9 / 16; max-height: calc(100dvh - 86px); }
.wr-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 14px; user-select: none; -webkit-user-drag: none; }
.wr-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.wr-bars span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.wr-bars i { display: block; height: 100%; width: 0; background: #fff; }
.wr-x { position: absolute; top: 24px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.wr-nav { position: absolute; top: 70px; bottom: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.wr-prev { left: 0; width: 33%; }
.wr-next { right: 0; width: 67%; }
.wr-actions { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 520px; }
.wr-actions .btn { flex: 1; min-height: 44px; }
.wr-cta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 16px; border: 0; cursor: pointer; background: linear-gradient(120deg, #f59e0b, #ec4899 55%, #7c3aed); color: #fff; box-shadow: 0 8px 26px rgba(236, 72, 153, 0.35); }
.wr-cta-i { font-size: 2.2rem; }
.wr-cta b { display: block; font-family: var(--display); font-size: 1.15rem; }
.wr-cta small { font-weight: 700; opacity: 0.9; }
.banner-wr { border: 1px solid rgba(236, 72, 153, 0.6); background: linear-gradient(120deg, rgba(245, 158, 11, 0.25), rgba(236, 72, 153, 0.25), rgba(124, 58, 237, 0.25)); }
.pb-prog { margin-top: 10px; }
.pb-bar { height: 10px; border-radius: 10px; background: var(--input); overflow: hidden; border: 1px solid var(--line2); }
.pb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fbbf24, #ec4899); transition: width 0.3s; }
.info-box.green { background: var(--green-soft); border: 1px solid rgba(16, 185, 129, 0.5); color: #6ee7b7; border-radius: 12px; padding: 10px 12px; font-weight: 800; }
.btn-wallet { background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; }
.taxi-lang { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 6px 4px 10px; max-width: 58%; }
.taxi-lang select { background: transparent; color: #fff; border: 0; font-weight: 800; font-size: 0.85rem; max-width: 100%; min-width: 0; padding: 4px 2px; }
.taxi-lang select option { color: #111; }
.btn-game { background: linear-gradient(120deg, #22c55e, #14b8a6 55%, #0ea5e9); color: #fff; border: 0; }
.gm-admin { display: grid; grid-template-columns: 1fr; gap: 4px; }
.gm-admin .check { padding: 6px 0; }
.super-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--sub); font-weight: 700; }
/* 💧 Wasser / 🚕 Heimweg / 🎯 Challenges */
.banner-water { border: 1px solid rgba(56, 189, 248, 0.6); background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(22, 31, 48, 0.92)); }
.banner-home { border: 1px solid rgba(250, 204, 21, 0.6); background: linear-gradient(135deg, rgba(250, 204, 21, 0.16), rgba(22, 31, 48, 0.92)); }
.banner-ch { border: 1px solid rgba(236, 72, 153, 0.55); background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(22, 31, 48, 0.92)); }
.nav-dot.nav-dot-ch { background: #f59e0b; color: #111; }
.ch-teaser { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); color: var(--text, #fff); font: inherit; text-align: left; cursor: pointer; }
.ch-teaser b { display: block; font-size: 0.92rem; }
.ch-teaser small { display: block; color: var(--sub); font-weight: 700; font-size: 0.78rem; line-height: 1.25; }
.ch-teaser .ch-t-i { font-size: 1.4rem; }
.ch-teaser .ch-t-go { font-size: 1.4rem; font-weight: 900; color: #fbbf24; }
.ch-teaser.big { margin: 0 0 12px; padding: 12px 14px; border-width: 2px; }
.ch-teaser.big b { font-size: 1rem; }
.hud + .ch-teaser { margin: -6px 0 14px; }
/* 🎶 Songs der Tour */
.sg-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sg-item:last-child { border-bottom: 0; }
.sg-rank { width: 22px; text-align: center; font-weight: 900; color: var(--accent2, #fbbf24); flex-shrink: 0; }
.sg-cover { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #1e293b; }
.sg-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.sg-txt { min-width: 0; }
.sg-txt b, .sg-txt span, .sg-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-txt b { font-size: 0.95rem; }
.sg-txt span { font-size: 0.85rem; color: var(--text); opacity: 0.85; }
.sg-txt small { font-size: 0.75rem; color: var(--sub); font-weight: 700; }
.sg-fire { border: 1px solid rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.1); color: var(--text); font: inherit; font-weight: 900; font-size: 0.85rem; border-radius: 999px; padding: 6px 10px; cursor: pointer; flex-shrink: 0; min-height: 36px; }
.sg-fire.on { background: #f97316; border-color: #f97316; color: #111; }
.sg-fire:disabled { opacity: 0.6; }
.sg-play { flex-shrink: 0; text-decoration: none; }
.sg-hit { border-color: rgba(249, 115, 22, 0.6); background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(22, 31, 48, 0.9)); }
.sg-day { font-size: 0.78rem; font-weight: 900; color: var(--sub); text-transform: uppercase; margin-top: 8px; }
.sg-prev { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.sg-prev img, .sg-prev .sg-ph { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: #1e293b; flex-shrink: 0; }
.seg button { white-space: nowrap; }
.sg-item .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 1rem; flex-shrink: 0; }
.sg-item .sg-cover { width: 44px; height: 44px; }
/* 🎬 Videos */
.fab-vid { background: #2563eb; color: #fff; }
.fab-row .fab { padding: 13px 15px; font-size: 0.98rem; }
.thumb .t-bl { bottom: 4px; left: 4px; }
.thumb .t-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 3px; pointer-events: none; border: 2px solid rgba(255, 255, 255, 0.8); }
video.upload-preview { background: #000; object-fit: contain; }
video.lb-img { width: 100%; height: 100%; background: #000; }
.up-prog { margin-top: 12px; }
.up-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #ec4899); transition: width 0.3s; }
/* 📦 ZIP-Download */
.zip-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); text-decoration: none; }
.zip-row b { display: block; }
.zip-row small { display: block; color: var(--sub); font-weight: 700; font-size: 0.8rem; }
.zip-dl { font-size: 1.3rem; }
.bal-det { display: block; font-size: 0.74rem; color: var(--sub); font-weight: 700; margin-top: 2px; }
/* Mehrere auf einmal */
.many-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; max-height: 42vh; overflow-y: auto; }
.many-it { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #0b0f19; }
.many-it img, .many-it video { width: 100%; height: 100%; object-fit: cover; display: block; }
.many-it.off { opacity: 0.25; }
.many-v { position: absolute; left: 4px; bottom: 3px; font-size: 0.9rem; }
.many-x { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-weight: 900; font-size: 0.8rem; cursor: pointer; }
.many-st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; pointer-events: none; }
.many-it[data-st="busy"] .many-st, .many-it[data-st="done"] .many-st, .many-it[data-st="fail"] .many-st { background: rgba(0, 0, 0, 0.45); }
.banner-upd { border: 1px solid rgba(167, 139, 250, 0.7); background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(22, 31, 48, 0.92)); }
/* AUTOMATISCH ERZEUGT aus wingman.css (tools/gen_preview_css.py) – nicht von Hand ändern */
.se-phone .wm{width:100%;min-height:178cqw;display:flex;flex-direction:column;gap:3cqw;padding:calc(4cqw + 0px) 4cqw calc(4cqw + 0px)}
.se-phone .wm-head{display:flex;align-items:center;gap:4cqw;text-align:left;flex:0 0 auto}
.se-phone .wm-av{flex:0 0 auto;width:26cqw;height:26cqw;border-radius:50%;border:1cqw solid #f59e0b;overflow:hidden;background:#2a374f;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 0 0 1.5cqw rgba(245,158,11,.18)}
.se-phone .wm-av img{width:100%;height:100%;object-fit:cover}
.se-phone .wm-av span{font-size:12cqw;font-weight:900;color:#f59e0b}
.se-phone .wm-name{min-width:0}
.se-phone .wm-name h1{margin:0;font-size:12cqw;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:-.02em;word-break:break-word}
.se-phone .wm-name div{font-size:6.6cqw;font-weight:900;color:#fbbf24;margin-top:1cqw}
.se-phone .wm-q{flex:0 0 auto;margin:0;font-size:6.6cqw;font-weight:900;line-height:1.15;text-align:center}
.se-phone .wm-actions{flex:1 1 auto;display:flex;flex-direction:column;gap:3cqw}
.se-phone .wm-btn,.se-phone .wm-row{flex:1 1 0;min-height:19cqw;max-height:40cqw}
.se-phone .wm-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:2cqw 3cqw;border-radius:5cqw;text-decoration:none;font-weight:900;font-size:7.4cqw;line-height:1.1;color:#111;border:.8cqw solid rgba(255,255,255,.25);box-shadow:0 1.5cqw 0 rgba(0,0,0,.35)}
.se-phone .wm-btn:active{transform:translateY(1cqw);box-shadow:0 .5cqw 0 rgba(0,0,0,.35)}
.se-phone .wm-c0{background:#f59e0b}
.se-phone .wm-c1{background:#ec4899;color:#fff}
.se-phone .wm-c2{background:#38bdf8}
.se-phone .wm-alt-title{flex:0 0 auto;margin:1cqw 0 0;font-size:5.6cqw;font-weight:900;color:#dbe1ea;text-align:center}
.se-phone .wm-row{display:flex;gap:3cqw}
.se-phone .wm-row{padding:2.8cqw 0}
.se-phone .wm-row .wm-btn{flex:1 1 0;min-height:0;max-height:none;margin:-2.8cqw 0}
.se-phone .wm-wa{background:#22c55e}
.se-phone .wm-ig{background:#e1306c;color:#fff}
.se-phone .wm-snap{background:#fffc00}
.se-phone .wm-full{display:none;position:absolute;inset:0;background:#000;z-index:10;align-items:center;justify-content:center;flex-direction:column;text-decoration:none}
.se-phone .wm-full:target{display:flex}
.se-phone .wm-board{flex:0 0 auto;display:block;text-align:center;color:#fbbf24;font-weight:800;font-size:5cqw;padding:2cqw 0 0;text-decoration:underline;text-underline-offset:1cqw}
.se-phone .wm-x{position:absolute;top:calc(3cqw + 0px);right:3cqw;width:12cqw;height:12cqw;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:6.5cqw;font-weight:900;display:flex;align-items:center;justify-content:center}
.se-phone .wm-full img{max-width:100%;max-height:80vh;object-fit:contain}
.se-phone .wm-close{color:#111;background:#f59e0b;font-weight:900;margin-top:5cqw;padding:4cqw 9cqw;border-radius:999px;font-size:7cqw}
.se-phone .wm-card{flex:1 1 0;min-height:19cqw;max-height:40cqw;display:flex;flex-direction:column;border-radius:5cqw}
.se-phone .wm-card>.wm-btn{flex:1 1 0;min-height:0;max-height:none}
.se-phone .wm-card.is-open{flex:0 0 auto;max-height:none;gap:2.5cqw;padding:2cqw;background:rgba(255,255,255,.07);border:.6cqw solid rgba(255,255,255,.18)}
.se-phone .wm-card.is-open>.wm-btn{flex:0 0 auto;min-height:17cqw;box-shadow:none;transform:none}
.se-phone .wm-ways{display:none}
.se-phone .wm-card.is-open .wm-ways{display:flex;flex-direction:column;gap:2cqw}
.se-phone .wm-ways-t{margin:0;text-align:center;font-weight:900;font-size:4.8cqw;color:#e5e7eb}
.se-phone .wm-ways-row{display:flex;gap:2.5cqw}
.se-phone .wm-way{flex:1 1 0;min-width:0;min-height:22cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;border-radius:4cqw;text-decoration:none;font-weight:900;font-size:4.2cqw;color:#111;border:.8cqw solid rgba(255,255,255,.25);box-shadow:0 1.2cqw 0 rgba(0,0,0,.35)}
.se-phone .wm-way:active{transform:translateY(.8cqw);box-shadow:0 .4cqw 0 rgba(0,0,0,.35)}
.se-phone .wm-way-i{font-size:8.5cqw;line-height:1}
.se-phone .wm-ways-h{margin:0;text-align:center;font-size:3.5cqw;font-weight:700;color:#cbd5e1;line-height:1.3}
.se-phone .wm-w-wa{background:#22c55e}
.se-phone .wm-w-ig{background:#e1306c;color:#fff}
.se-phone .wm-w-snap{background:#fffc00}
.se-phone .wm-plain{background:#334155;color:#fff}
.se-phone .wm-toast{position:absolute;left:4cqw;right:4cqw;bottom:calc(5cqw + 0px);z-index:20;background:#111827;color:#fff;border:.6cqw solid #22c55e;border-radius:4cqw;padding:3.5cqw;text-align:center;font-weight:900;font-size:4.4cqw}
.se-phone .wm-toast[hidden]{display:none}
.se-phone .wm-ev-malle{background:radial-gradient(120% 55% at 50% 0%,#3b2208 0%,#1a1206 38%,#0b0f19 75%)}
.se-phone .wm-ev-oktoberfest{background:linear-gradient(180deg,rgba(8,26,54,.25),rgba(8,26,54,.92) 30%,#081a36 100%),linear-gradient(135deg,rgba(255,255,255,.14) 25%,transparent 25%) -4cqw 0/8cqw 8cqw,linear-gradient(225deg,rgba(255,255,255,.14) 25%,transparent 25%) -4cqw 0/8cqw 8cqw,linear-gradient(315deg,rgba(255,255,255,.14) 25%,transparent 25%) 0 0/8cqw 8cqw,linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%) 0 0/8cqw 8cqw,#1f5fa8}
.se-phone .wm-ev-jga{background:radial-gradient(circle at 20% 15%,rgba(251,207,232,.18) 0 1.2cqw,transparent 1.3cqw) 0 0/18cqw 18cqw,radial-gradient(circle at 70% 60%,rgba(253,230,138,.16) 0 .8cqw,transparent .9cqw) 0 0/14cqw 14cqw,radial-gradient(120% 60% at 50% 0%,#6b1d4f 0%,#3b0a2a 45%,#170611 100%)}
.se-phone .wm-ev-apres{background:radial-gradient(circle,rgba(255,255,255,.55) 0 .45cqw,transparent .55cqw) 0 0/11cqw 13cqw,radial-gradient(circle,rgba(255,255,255,.3) 0 .3cqw,transparent .4cqw) 5cqw 6cqw/9cqw 10cqw,linear-gradient(180deg,#0c2a52 0%,#0a1b36 55%,#0b0f19 100%)}
.se-phone .wm-ev-party{background:radial-gradient(circle,rgba(236,72,153,.35) 0 .5cqw,transparent .6cqw) 0 0/13cqw 13cqw,radial-gradient(circle,rgba(56,189,248,.35) 0 .45cqw,transparent .55cqw) 6cqw 4cqw/11cqw 12cqw,radial-gradient(circle,rgba(251,191,36,.35) 0 .4cqw,transparent .5cqw) 3cqw 8cqw/15cqw 14cqw,radial-gradient(120% 60% at 50% 0%,#3b1466 0%,#1e1033 50%,#0b0f19 100%)}
.se-phone .wm-ev-oktoberfest .wm-name div{color:#bfdbfe}
.se-phone .wm-ev-jga .wm-name div{color:#fbcfe8}
.se-phone .wm-ev-apres .wm-name div{color:#bae6fd}
.se-phone .wm-ev-party .wm-name div{color:#f0abfc}
.se-phone .wm-game{background:linear-gradient(120deg,#22c55e,#14b8a6 55%,#0ea5e9);color:#fff;text-shadow:0 .4cqw 1cqw rgba(0,0,0,.35)}
.se-phone .wm-night{background:radial-gradient(130% 70% at 50% 0%,#4c1d95 0%,#240b45 45%,#0a0616 100%);color:#fff}
.se-phone .wm-night .wm{position:relative;isolation:isolate}
.se-phone .wm-night .wm::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 .35cqw,transparent .55cqw),radial-gradient(circle,rgba(236,72,153,.95) 0 .3cqw,transparent .5cqw),radial-gradient(circle,rgba(56,189,248,.95) 0 .3cqw,transparent .5cqw);background-size:37cqw 41cqw,53cqw 47cqw,61cqw 67cqw;background-position:5cqw 9cqw,21cqw 30cqw,40cqw 3cqw;animation:wmTwinkle 3.2s ease-in-out infinite alternate}
@keyframes wmTwinkle{from{opacity:.25}to{opacity:.75}}
@keyframes wmPulse{from{filter:brightness(1)}to{filter:brightness(1.13) saturate(1.15)}}
.se-phone .wm-night .wm-av{border-color:#ec4899;box-shadow:0 0 0 1.5cqw rgba(236,72,153,.25),0 0 7cqw rgba(236,72,153,.65)}
.se-phone .wm-night .wm-name h1{text-shadow:0 0 3cqw rgba(236,72,153,.85),0 0 9cqw rgba(168,85,247,.7)}
.se-phone .wm-night .wm-name div{color:#f0abfc;text-shadow:0 0 3cqw rgba(240,171,252,.75)}
.se-phone .wm-night .wm-q{color:#fdf4ff;text-shadow:0 0 3cqw rgba(168,85,247,.95)}
.se-phone .wm-night .wm-btn,.se-phone .wm-night .wm-way{border-color:rgba(255,255,255,.6);animation:wmPulse 2.6s ease-in-out infinite alternate}
.se-phone .wm-night .wm-c0{box-shadow:0 1.5cqw 0 rgba(0,0,0,.45),0 0 7cqw rgba(245,158,11,.75)}
.se-phone .wm-night .wm-c1{box-shadow:0 1.5cqw 0 rgba(0,0,0,.45),0 0 7cqw rgba(236,72,153,.8)}
.se-phone .wm-night .wm-c2{box-shadow:0 1.5cqw 0 rgba(0,0,0,.45),0 0 7cqw rgba(56,189,248,.8)}
.se-phone .wm-night .wm-w-wa{box-shadow:0 1.2cqw 0 rgba(0,0,0,.45),0 0 6cqw rgba(34,197,94,.75)}
.se-phone .wm-night .wm-w-ig{box-shadow:0 1.2cqw 0 rgba(0,0,0,.45),0 0 6cqw rgba(225,48,108,.8)}
.se-phone .wm-night .wm-w-snap{box-shadow:0 1.2cqw 0 rgba(0,0,0,.45),0 0 6cqw rgba(255,252,0,.6)}
.se-phone .wm-night .wm-plain{background:#5b21b6;box-shadow:0 1.5cqw 0 rgba(0,0,0,.45),0 0 7cqw rgba(168,85,247,.8)}
.se-phone .wm-night .wm-card.is-open{background:rgba(168,85,247,.14);border-color:rgba(240,171,252,.5)}
.se-phone .wm-night .wm-card.is-open>.wm-btn{box-shadow:none}
.se-phone .wm-night .wm-ways-t,.se-phone .wm-night .wm-ways-h{color:#f5d0fe}
.se-phone .wm-night .wm-board{color:#f0abfc}
.se-phone .wm-song{display:block;text-align:center;margin-top:1cqw;padding:3cqw 4cqw;border-radius:9cqw;border:.5cqw dashed rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:4.2cqw;text-decoration:none;background:rgba(255,255,255,.06)}
.se-phone .wm-night .wm-song{border-color:rgba(240,171,252,.55);color:#f5d0fe}
.se-phone .wm-song-f{display:flex;flex-direction:column;gap:3cqw}
.se-phone .wm-song-in{width:100%;font:inherit;font-size:4.6cqw;font-weight:700;padding:4cqw;border-radius:4cqw;border:.6cqw solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff}
.se-phone .wm-song-in::placeholder{color:rgba(255,255,255,.5)}
.se-phone .wm-song-h{margin:0;font-size:3.4cqw;color:rgba(255,255,255,.7);font-weight:600;text-align:center}
.se-phone .wm-song-err{margin:0;text-align:center;font-weight:800;color:#fde68a;font-size:4.2cqw}
.se-phone .wm-song-ok{text-align:center;display:flex;flex-direction:column;gap:2cqw}
.se-phone .wm-song-ok h2{margin:0;font-size:9cqw;color:#fbbf24}
.se-phone .wm-song-ok p{margin:0;font-size:4.6cqw;font-weight:700;line-height:1.35}
.se-phone .wm-song-e{font-size:22cqw;line-height:1}
.se-phone .wm-about{margin-top:auto;padding-top:2cqw;text-align:center;color:rgba(255,255,255,.5);font-size:3.4cqw;font-weight:700}
.se-phone .wm-about summary{list-style:none;cursor:pointer;display:inline-block;padding:1.5cqw 3cqw;border-radius:9cqw}
.se-phone .wm-about summary::-webkit-details-marker{display:none}
.se-phone .wm-about[open] summary{color:rgba(255,255,255,.75)}
.se-phone .wm-about-b{margin-top:1.5cqw;padding:3.5cqw 4cqw;border-radius:4cqw;background:rgba(0,0,0,.28);border:.3cqw solid rgba(255,255,255,.12);color:rgba(255,255,255,.82);text-align:left;font-weight:600;line-height:1.35}
.se-phone .wm-about-b b{color:#fff}
.se-phone .wm-about-b ul{margin:2cqw 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1cqw}
.se-phone .wm-about-cta{display:block;margin-top:3cqw;text-align:center;padding:2.8cqw;border-radius:3cqw;background:rgba(37,211,102,.16);border:.3cqw solid rgba(37,211,102,.45);color:#86efac;font-weight:900;text-decoration:none}
.se-phone .wm-about-hint{border:0;background:none;color:rgba(255,255,255,.6);font:inherit;font-weight:800;font-size:3.6cqw;text-decoration:underline;text-underline-offset:1cqw;cursor:pointer;padding:1cqw}
@media (prefers-reduced-motion:reduce){.se-phone .wm-night .wm::before,.se-phone .wm-night .wm-btn,.se-phone .wm-night .wm-way{animation:none}}