*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Auth-Gate (DEC-2026-08-24-strict-session-gate) ────────────────── Ohne Session (Login oder Invite) zeigt die PWA KEIN App-Layout — nur den Splash in #modalRoot. trägt statisch .no-auth (auch ohne JS) und JS entfernt es erst, wenn eine Session bestätigt ist (index.html head-Script / init.js-Boot). So ist das Layout nie sichtbar, bevor Zugang besteht. #modalRoot (Splash/Login) und #toastContainer bleiben sichtbar. */ html.no-auth .skip-link, html.no-auth .top, html.no-auth .page, html.no-auth .ft, html.no-auth .stt, html.no-auth .bnav, html.no-auth #filterDrawer, html.no-auth #filterDrawerOverlay, html.no-auth #cookieBanner { display: none !important; } :root { --bg: #ffffff; /* QR-Code: Kontrast physikalisch nötig (heller Grund, dunkle Module) — deshalb bewusst Theme-unabhängige Fix-Werte (DEC-2026-08-16-qr-codec-library) */ --qr-fg: #000000; --qr-bg: #ffffff; --c: #f8f9fa; --c2: #f0f2f5; --b: #e8eaed; --bh: #e2e5e9; --a: #0a0a0a; --a2: #1a1a2e; --ag: rgba(0, 0, 0, 0.02); --t: #1a1a2e; --t2: #4a4a68; --t3: #525252; --t4: #848a94; --g: #10b981; --gl: rgba(16, 185, 129, 0.08); --r: 12px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06); --accent: #0a0a0a; --accent-dark: #1a1a2e; --accent-soft: rgba(10, 10, 10, 0.06); --accent-glow: rgba(10, 10, 10, 0.12); --surface: rgba(255, 255, 255, 0.88); --surface-solid: #ffffff; --overlay: rgba(0, 0, 0, 0.4); --surface-hover: rgba(0, 0, 0, 0.03); --glow: rgba(16, 185, 129, 0.08); --glow-border: rgba(16, 185, 129, 0.15); --today: #3b82f6; --today-soft: rgba(59, 130, 246, 0.12); --card: var(--c); --muted: var(--t3); --text: var(--t); --bg2: var(--c2); --red: #ef4444; --color-inverse: #ffffff; --color-bookmark: #f59e0b; --color-bookmark-bg: rgba(245, 158, 11, 0.06); --color-bookmark-bg-active: rgba(245, 158, 11, 0.12); --color-score-recommended: #059669; --color-score-popular: #d97706; --color-pink: #ec4899; --color-pink-bg: rgba(236, 72, 153, 0.06); --color-pink-bg-active: rgba(236, 72, 153, 0.12); --color-emerald-dark: #059669; /* ── Semantic aliases (rename-safe) ── */ --text-primary: var(--t); --text-secondary: var(--a); --text-muted: var(--t3); --text-tertiary: var(--t4); --border: var(--b); --border-hover: var(--bh); --surface-secondary: var(--c); --surface-tertiary: var(--c2); --text-on-accent: var(--a); --accent-secondary: var(--a2); --accent-ghost: var(--ag); --success: var(--g); --success-soft: var(--gl); --radius: var(--r); /* ── Spacing Scale (4px base) ── */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --space-256: 256px; /* ── Text Scale (Tailwind-compatible) ── */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; /* ── Semantic Status Colors ── */ --success-bg: #065f46; --success-text: #065f46; --success-text-dark: #6ee7b7; --error-bg: #7f1d1d; --error-text: #7f1d1d; --error-text-dark: #fca5a5; --warning-bg: rgba(245, 158, 11, 0.1); --warning-text: #78350f; --warning-text-dark: #fbbf24; --info-bg: rgba(59, 130, 246, 0.1); --info-text: #1e40af; --info-text-dark: #93c5fd; --error-bg-light: rgba(239, 68, 68, 0.08); --error-border: rgba(239, 68, 68, 0.2); --success-bg-light: rgba(16, 185, 129, 0.2); --success-border: rgba(16, 185, 129, 0.2); --focus-ring: rgba(59, 130, 246, 0.1); --color-surface-dark: #1a1a2e; --color-surface-dark-alt: #2a2a4e; --color-error-surface: #fee2e2; } /* Dark mode */ body.dark { --bg: #0a0a0f; /* --qr-fg/--qr-bg bewusst nicht überschrieben: QR-Code bleibt schwarz auf weiß (Scanner-Kontrast), Karten-Wrapper sorgt für den Rand */ --c: #12121a; --c2: #1a1a25; --b: #2a2a3a; --bh: #33334a; --a: #f0f0f5; --a2: #a3e635; --ag: rgba(255, 255, 255, 0.03); --t: #e8e8f0; --t2: #b0b0c8; --t3: #8888a8; --t4: #666680; --g: #34d399; --gl: rgba(52, 211, 153, 0.1); --accent: #f0f0f5; --accent-dark: #d0d0e0; --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow: 0 4px 12px rgba(0,0,0,0.25); --shadow-lg: 0 12px 40px rgba(0,0,0,0.4); --accent-soft: rgba(240, 240, 245, 0.06); --accent-glow: rgba(240, 240, 245, 0.12); --surface: rgba(10, 10, 15, 0.92); --surface-solid: #0a0a0f; --overlay: rgba(0, 0, 0, 0.7); --surface-hover: rgba(255, 255, 255, 0.03); --glow: rgba(52, 211, 153, 0.06); --glow-border: rgba(52, 211, 153, 0.2); --today: #f59e0b; --today-soft: rgba(245, 158, 11, 0.14); --card: var(--c); --muted: var(--t3); --text: var(--t); --bg2: var(--c2); /* ── Semantic aliases (dark mode) ── */ --text-primary: var(--t); --text-secondary: var(--t2); --text-muted: var(--t3); --text-tertiary: var(--t4); --border: var(--b); --border-hover: var(--bh); --surface-secondary: var(--c); --surface-tertiary: var(--c2); --text-on-accent: var(--a); --accent-secondary: var(--a2); --accent-ghost: var(--ag); --success: var(--g); --success-soft: var(--gl); --radius: var(--r); /* ── Spacing Scale (dark mode) ── */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --space-256: 256px; /* ── Text Scale (dark mode) ── */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; /* ── Semantic Status Colors (dark mode) ── */ --success-bg: #065f46; --success-text: #065f46; --success-text-dark: #6ee7b7; --error-bg: #7f1d1d; --error-text: #7f1d1d; --error-text-dark: #fca5a5; --warning-bg: rgba(245, 158, 11, 0.1); --warning-text: #78350f; --warning-text-dark: #fbbf24; --info-bg: rgba(59, 130, 246, 0.1); --info-text: #1e40af; --info-text-dark: #93c5fd; --error-bg-light: rgba(239, 68, 68, 0.08); --error-border: rgba(239, 68, 68, 0.2); --success-bg-light: rgba(16, 185, 129, 0.2); --success-border: rgba(16, 185, 129, 0.2); --focus-ring: rgba(59, 130, 246, 0.1); --color-surface-dark: #1a1a2e; --color-surface-dark-alt: #2a2a4e; --color-error-surface: #fee2e2; } body.dark .top { background: var(--surface); border-bottom-color: var(--b); } /* Logo: invert black SVG fill for dark mode */ body.dark .logo img { filter: invert(1); } body.dark .bnav { background: rgba(26, 26, 46, 0.95); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } body.dark .bnav-in::before { background: transparent; } body.dark .bnav-i.act { color: var(--a); } body.dark .bnav-i .ico { color: var(--t3); } body.dark .bnav-i.act .ico { color: var(--a); } body.dark #cookieBanner { background: var(--surface); } body.dark .discover-card:hover { box-shadow: 0 4px 16px var(--accent-glow); } /* Dark mode: onboarding banner */ body.dark .onboard { background: linear-gradient(135deg, var(--ag), rgba(99,102,241,0.06)); border-color: var(--b); } body.dark .onboard .step { background: var(--c); } /* Dark mode: help panel */ body.dark .help-panel { background: var(--bg); box-shadow: var(--shadow-lg); } /* Dark mode: guest banner */ body.dark .gvb { background: linear-gradient(135deg, var(--glow), transparent); border-color: var(--glow-border); } /* Dark mode: today header */ body.dark .hs { background: linear-gradient(135deg, var(--gl), transparent); border-color: var(--glow-border); } /* Dark mode: nav items */ body.dark .nv-i:hover { background: var(--surface-hover); } /* Dark mode: sidebar panels */ body.dark .rb { background: transparent; } /* Dark mode: skeleton */ body.dark .sk-c { background: var(--c); } /* Dark mode: event cards */ body.dark .po { background: var(--bg); } body.dark .po:hover { background: var(--c); } /* Dark mode: login button — dark text on light accent */ body.dark .lb { color: var(--bg); } body.dark .lb:hover { color: var(--bg); } body { font-family: var(--font-body); font-size: 16px; background: var(--bg); color: var(--t); line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sticky needs a real scroll container — `overflow: clip` prevents * horizontal scroll WITHOUT creating a scroll container (unlike `hidden`). * iOS Safari fallback to `hidden` is handled by the line below. */ overflow-x: hidden; overflow-x: clip; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, var(--bg) 0%, var(--c) 100%); } html { overflow-x: clip; -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; } .mono { font-family: monospace; } .serif { font-family: Georgia, serif; } /* Safe area for notched devices */ .top { padding-top: env(safe-area-inset-top, 0); } @supports (padding-top: env(safe-area-inset-top)) { body { padding-bottom: env(safe-area-inset-bottom, 0); } } ::selection { background: var(--accent); color: var(--a); } /* Focus-visible for keyboard navigation */ :focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } button:focus-visible, select:focus-visible, input:focus-visible, .nv-i:focus-visible, .bnav-i:focus-visible, .po:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Crawl status/metrics banners */ .crawl-status { background: var(--gl); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; padding: 6px 12px; margin-bottom: 4px; font-size: 12px; color: var(--g); } .crawl-metrics { background: var(--bg2); border: 1px solid var(--b); border-radius: 8px; padding: 4px 12px; margin-bottom: 8px; font-size: 11px; color: var(--t3); } /* Skip-link (accessible focus target) */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; background: var(--a); color: var(--bg); padding: 8px 16px; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; top: 0; } /* Offline dot */ .offline-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 4px; vertical-align: super; } /* User avatar in header */ .header-avatar { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: var(--c); border: 2px solid var(--b); flex-shrink: 0; } /* Dark mode toggle switch (o== → ==o) */ .dm-toggle { background: var(--c2); border: 1px solid var(--b); width: 48px; border-radius: 14px; cursor: pointer; font-size: 0; display: inline-flex; align-items: center; padding: 3px; transition: all 0.2s; flex-shrink: 0; /* margin-left:auto liegt jetzt an .tr — der rechte Cluster (Selects + Avatar + Anmelden-CTA) wird nach rechts geschoben, das Toggle folgt. */ position: relative; } .dm-toggle::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--t3); transition: transform 0.2s; transform: translateX(0); } body.dark .dm-toggle { background: var(--accent-dark); border-color: var(--accent-dark); } body.dark .dm-toggle::after { background: var(--c); transform: translateX(20px); } /* Search input */ .search-input { width: 100%; padding: 8px 12px; border: 1px solid var(--b); border-radius: var(--r); background: var(--bg); color: var(--t); font-size: 14px; outline: none; } /* Icon fill (decorative) */ .ico-fill { font-size: 13px; opacity: 0.2; } /* Score legend button */ .score-legend-btn { background: var(--c); border: 1px solid var(--b); border-radius: 50%; width: 44px; height: 44px; font-size: 16px; color: var(--a2); cursor: pointer; vertical-align: middle; margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; } .score-legend-btn:hover { border-color: var(--a); color: var(--t); } /* Welcome icon */ .welcome-icon { display: inline; width: 18px; height: 18px; vertical-align: middle; } /* Loading text */ .loading-text { font-style: italic; opacity: 0.6; } /* ===== Filter Drawer (bottom sheet) ===== * Base styles are GLOBAL on purpose: the trigger button shows from * ≤1080px (and the fixed scroll-reveal rule applies at any width), so * the sheet must be styled at every viewport where it can open — * not only ≤760px. Mobile-only fine-tuning lives in the 760px block. */ .filter-drawer-overlay { position: fixed; inset: 0; z-index: 300; background: var(--overlay); backdrop-filter: blur(4px); display: none; } .filter-drawer-overlay.open { display: block; animation: fdOverlayIn 0.25s ease; } .filter-drawer-overlay.closing { animation: fdOverlayOut 0.22s ease forwards; } .filter-drawer { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 480px; z-index: 301; background: var(--bg); border-radius: 20px 20px 0 0; max-height: 80vh; display: none; flex-direction: column; box-shadow: 0 -8px 32px rgba(0,0,0,0.15); } .filter-drawer.open { display: flex; animation: fdIn 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .filter-drawer.closing { animation: fdOut 0.22s ease-in forwards; } @keyframes fdIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fdOut { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes fdOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fdOverlayOut { from { opacity: 1; } to { opacity: 0; } } .filter-drawer-handle { width: 40px; height: 4px; background: var(--b); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } .filter-drawer-header { position: relative; padding: 12px 20px 0; flex-shrink: 0; } .filter-drawer-header h3 { font-size: 18px; margin: 0; color: var(--t); text-align: center; } .filter-drawer-close { position: absolute; top: 4px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--c2); color: var(--t2); cursor: pointer; transition: background 0.15s ease; } .filter-drawer-close:hover { background: var(--bh); } .filter-drawer-close svg { width: 16px; height: 16px; } .filter-drawer-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 16px; } .filter-drawer-actions { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--b); } .filter-drawer-actions button { flex: 1; padding: 14px; border-radius: var(--r); font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s; } .filter-reset { background: var(--c2); color: var(--t2); border: 1px solid var(--b); } /* Drawer section styles */ .filter-section { margin-bottom: 20px; } .filter-section-header { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--t3); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .filter-section-header i { width: 14px; height: 14px; opacity: 0.7; } .filter-radio-group { display: flex; flex-direction: column; gap: 4px; } .filter-radio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); cursor: pointer; transition: background 0.15s ease; } .filter-radio:hover { background: var(--c2); } .filter-radio input[type="radio"] { appearance: none; width: 20px; height: 20px; border: 2px solid var(--b); border-radius: 50%; flex-shrink: 0; transition: all 0.15s ease; position: relative; } .filter-radio input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg); } .filter-radio-label { font-size: 15px; color: var(--t); font-weight: 500; } .filter-chip-group { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--b); border-radius: 999px; background: var(--surface); color: var(--t2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; font-family: 'Mona Sans', sans-serif; min-height: 40px; } .filter-chip i { width: 14px; height: 14px; opacity: 0.6; transition: opacity 0.18s ease; } .filter-chip:hover { border-color: var(--accent); background: var(--accent-soft); } .filter-chip.active { border-color: var(--accent); background: var(--accent); color: var(--bg); } .filter-chip.active i { opacity: 1; } .filter-chip:active { transform: scale(0.95); } /* Cookie banner */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; padding: 8px 14px; font-size: 12px; display: none; align-items: center; gap: 10px; max-width: 100%; } .cookie-text { flex: 1; min-width: 0; } .cookie-text a { color: var(--a2); text-decoration: underline; } .cookie-btn { background: var(--a); color: var(--bg); border: none; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; } h1, h2, h3 { font-weight: 700; line-height: 1.2; } .top { background: rgba(255, 255, 255, 1); border-bottom: 1px solid var(--b); box-shadow: 0 1px 0 var(--ag); } .top-in { display: flex; align-items: center; height: 56px; max-width: 1200px; margin: 0 auto; padding: 0 40px; gap: 10px; } /* Fixed header and sidebars on desktop — stays in flow on mobile */ @media (min-width: 768px) { .top { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } body { padding-top: 56px; } /* Timeline day header docks below the fixed topbar on desktop. `.tl-day .tl-head` raises specificity so it wins over the base `.tl-head { top: 0 }` rule further down (same class specificity, later source order wins) and stops the header hiding behind the fixed topbar (z-index: 100). */ .tl-day .tl-head { top: 56px; } /* Sticky sidebars — stay in flex flow, align with centered .page */ .lc { position: sticky; top: 56px; left: auto; width: 200px; height: calc(100vh - 56px); align-self: flex-start; z-index: 10; overflow-y: auto; /* Fester Abstand zur Topbar, wenn die Sidenav andockt */ padding-top: 16px; } .rc { position: sticky; top: 72px; right: auto; width: 200px; height: calc(100vh - 72px); } .main-content { flex: 1; max-width: 640px; min-width: 0; } } .logo { display: flex; align-items: center; flex-shrink: 0; color: var(--a); text-decoration: none; } .logo img { height: 18px; width: auto; } .tr { display: flex; gap: 6px; align-items: center; /* Rechter Cluster (Filter-Selects + Avatar + Anmelden-CTA) wird ans Header-Rechtsende geschoben (2026-08-29: CTA & avatar nach rechts). */ margin-left: auto; } .tr select { background: var(--bg); border: 1px solid var(--b); color: var(--t); padding: 6px 28px 6px 12px; border-radius: 18px; font-size: 12px; cursor: pointer; font-weight: 500; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tr select:hover { border-color: var(--a); } .tr select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* #sort shares .tr select styles — no overrides needed */ .lb { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg); border: none; height: 36px; padding: var(--space-8) var(--space-16); border-radius: 20px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; letter-spacing: 0.01em; } .lb:hover { background: var(--accent-dark); color: var(--bg); } /* Icon shows only in the compact mobile variant */ .lb .lb-icon { display: none; } .lb:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .user-menu { position: relative; display: none; } .user-btn { background: transparent; border: none; color: var(--t2); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r); transition: all 0.15s ease; } .user-btn:hover { background: var(--c2); color: var(--t); } .user-btn:active { transform: scale(0.96); } .user-btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .flyout { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); width: 220px; padding: 0; box-shadow: var(--shadow-lg); display: none; flex-direction: column; z-index: 1000; animation: flyoutIn 0.2s ease; } @keyframes flyoutIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .flyout.show { display: flex; } .flyout-header { padding: 14px 14px 10px; border-bottom: 1px solid var(--b); } .flyout-name { font-weight: 700; font-size: 14px; color: var(--t); } .flyout-subtitle { font-size: 12px; color: var(--t4); margin-top: 2px; } .flyout-links { padding: 6px 0; } .flyout-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; color: var(--t); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; transition: all 0.15s; min-height: 44px; } .flyout-link:hover { background: var(--c2); color: var(--a); } .flyout-link:active { transform: scale(0.98); } .flyout-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; } .flyout-link:hover .flyout-icon { opacity: 1; } .flyout-divider { height: 1px; background: var(--b); margin: 4px 0; } /* Admin-only elements — hidden until updateUserUI() reveals them */ .admin-divider { display: none; } #adminLink { display: none; } .flyout-logout { width: 100%; padding: 10px 14px; min-height: 44px; background: transparent; border: none; color: var(--red); border-radius: 0; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; margin: 0; } .flyout-logout:hover { background: rgba(239, 68, 68, 0.06); color: var(--red); } .flyout-logout:active { transform: scale(0.98); } .flyout-logout .flyout-icon { color: var(--red); } /* ── Event Modal: Metadata Header ─────────────────── */ .modal .mh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .modal .mh .md { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1; } .modal .mh .md .mdd { font-size: 24px; } .modal .mh .md .mdm { font-size: 12px; text-transform: uppercase; opacity: 0.85; } .modal .mh .mi { flex: 1; } .modal .mh .mi .mcat { font-size: 13px; font-weight: 700; color: var(--accent-dark); } .modal .mh .mi .mtime { font-size: 12px; color: var(--a); font-weight: 500; } /* ── Event Modal: Title & Content ───────────────────── */ .modal h2 { font-size: 22px; margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.3; color: var(--t); } .modal .mdsc { color: var(--a); line-height: 1.3; font-weight: 500; margin-bottom: 14px; } .modal .mloc { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--a); font-weight: 500; padding: 10px 0; border-top: 1px solid var(--b); border-bottom: 1px solid var(--b); margin-bottom: 14px; } /* ── Event Modal: Attendee Avatars ──────────────────── */ .modal .ms { display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-bottom: 6px; } .ms { display: flex; align-items: center; } .mav { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--t); flex-shrink: 0; background: var(--c2); border: 1px solid var(--b); margin-left: -8px; } .mav:first-child { margin-left: 0; } .mav-more { background: var(--c2); color: var(--t2); font-size: 9px; border-style: dotted; } .modal .ms .mav { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--t); flex-shrink: 0; background: var(--c2); } .modal .ms .mav:first-child { margin-left: 0; } .modal .ms .mav.c1 { background: linear-gradient(135deg, #6366f1, #818cf8); } .modal .ms .mav.c2 { background: linear-gradient(135deg, #10b981, #34d399); } .modal .ms .mav.c3 { background: linear-gradient(135deg, #ec4899, #f472b6); } .modal .ms .mav.c4 { background: linear-gradient(135deg, #06b6d4, #22d3ee); } .modal .ms .mav.c5 { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .modal .ms .mav.c6 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); } .modal .ms .mav.c7 { background: linear-gradient(135deg, #ef4444, #f87171); } .modal .ms .mt { font-size: 14px; color: var(--t2); font-style: italic; } .modal .ms .mt b { color: var(--a2); font-style: normal; font-weight: 700; } /* ── Event Modal: Action Buttons (eventcard style) ── */ .modal .mbtn { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .modal .mbtn button { flex: 1; min-width: 120px; padding: var(--space-8) var(--space-12); border-radius: 999px; border: 1px solid var(--t); background: transparent; color: var(--t); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: all 0.15s ease; font-family: var(--font-heading); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .modal .mbtn button:hover { background: var(--a); color: var(--bg); border-color: var(--a); } .modal .mbtn .mbp { background: var(--a); color: var(--bg); border-color: var(--a); } .modal .mbtn .mbp:hover { background: var(--a); color: var(--bg); border-color: var(--a); } .modal .mbtn .mbp.on { background: var(--a); color: var(--bg); border-color: var(--a); } .modal .mbtn .mbp.di { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .modal .mbtn .mbs { background: transparent; color: var(--t); border-color: var(--t); } .modal .mbtn .mbs:hover { background: var(--a); color: var(--bg); border-color: var(--a); } .modal .mbtn .mbs:hover { background: var(--bh); color: var(--t); } /* ── Event Modal: Image ─────────────────────────────── */ .modal-img { width: 100%; max-height: 300px; overflow: hidden; margin-bottom: 16px; border-radius: var(--r); } .modal-img img { width: 100%; height: 300px; object-fit: cover; display: block; } /* ── Event Modal: Interest Button States ────────────── */ .modal .mbtn button:hover { opacity: 0.85; } .modal .mbtn .mbp.loading { opacity: 0.6; pointer-events: none; } .modal .mbtn .mbp.on { background: var(--gl); color: var(--g); border: 1px solid rgba(16, 185, 129, 0.2); } /* ── Event Modal: "Neu" Badge ───────────────────────── */ .modal-badge { position: absolute; top: 12px; left: 12px; background: var(--g); color: var(--a); font-size: 10px; font-weight: 900; padding: 3px 8px; border-radius: var(--r); letter-spacing: 0.05em; animation: pulse 2s ease-in-out infinite; z-index: 1; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } /* Login */ .lm { background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); max-width: 380px; width: 100%; padding: 32px 24px 24px; box-shadow: var(--shadow-lg); } .lm h2 { font-size: 22px; margin-bottom: 2px; } .lm .lms { font-size: 16px; color: var(--t3); font-weight: 500; line-height: 1.25; margin-bottom: 16px; } .lm .lmi { font-size: 14px; color: var(--a); line-height: 1.25; font-weight: 500; margin-bottom: 12px; } .lm label { display: block; font-size: 14px; font-weight: 600; color: var(--a); margin-bottom: 3px; font-family: var(--font-body); } .lm input { width: 100%; padding: 12px 14px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--b); background: var(--bg); color: var(--t); font-size: 15px; margin-bottom: 12px; outline: none; font-family: var(--font-body); } .reg-birthdate-hint { margin-bottom: 12px; } .lm input:focus { border-color: var(--a); box-shadow: 0 0 0 3px var(--accent-soft); } /* "Dauerhaft eingeloggt" — inline checkbox row. Overrides the generic .lm label/input rules above (block label, full-width input). */ .lm .auth-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--a); margin-bottom: 12px; cursor: pointer; user-select: none; } .lm .auth-remember input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--a); cursor: pointer; } .lm .auth-remember span { line-height: 1.25; } /* Hint unter der „Dauerhaft eingeloggt“-Checkbox: wie lange die Session ohne erneute Anmeldung hält (TTL = auth.remember_me_ttl_days). */ .lm .auth-remember-hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--t3); line-height: 1.3; } /* Privacy checkbox in registration — must not inherit the full-width .lm input rule (width:100%, min-height:44px). Keep it 16px, left-aligned, inline. */ .lm .auth-checkbox { display: flex; align-items: center; gap: 8px; width: auto; margin: 0; margin-bottom: 12px; cursor: pointer; user-select: none; font-size: 14px; font-weight: 500; color: var(--a); text-align: left; } .lm .auth-checkbox input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--a); cursor: pointer; } /* Date input — normalise browser-default appearance so bg/color match the text inputs (helles Grau). */ .lm input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--bg); color: var(--t); } .lm .lmb { width: 100%; padding: 12px; min-height: 44px; border-radius: 100px; border: none; background: var(--a); color: var(--bg); font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s ease; } .lm .lmb:hover { opacity: 0.85; } .lm .lmb:active { transform: scale(0.97); } .lm .lmb.loading { opacity: 0.6; pointer-events: none; position: relative; } .lm .lmb.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: ptrSpin 0.6s linear infinite; } .lm .lmt { text-align: center; font-size: 12px; color: var(--t4); margin-top: 12px; cursor: pointer; } .lm .lmt:hover { color: var(--a2); } .lm .lmc { background: none; border: none; color: var(--t4); font-size: 12px; cursor: pointer; margin-top: 6px; display: block; width: 100%; text-align: center; } .lm .err { color: var(--red); font-size: 12px; margin-bottom: 8px; text-align: center; } /* ── Brand claim (Onboarding + Login/Registrierung) ── Wordmark „MONO NO“ (thin space U+2009, uppercase); claim follows the brand line from docs/concept/. Colors via vars → dark mode OK. */ .claim-block { text-align: center; } .claim-line { display: block; color: var(--t); } .claim-wordmark { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.08em; } .claim-tag { display: block; font-style: italic; color: var(--t3); } /* Login modal: claim between welcome text and form */ .lm-claim { margin-bottom: 18px; padding: 14px 0; border-top: 1px solid var(--b); border-bottom: 1px solid var(--b); } .lm-claim .claim-line { font-size: 13px; font-weight: 600; line-height: 1.4; } .lm-claim .claim-wordmark { font-size: 14px; } .lm-claim .claim-tag { margin-top: 4px; font-size: 12px; } /* First-visit onboarding banner: claim as closing line */ .onboard-claim { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--b); } .onboard-claim .claim-line { font-size: 11px; font-weight: 700; line-height: 1.5; } .onboard-claim .claim-tag { margin-top: 2px; font-size: 10px; } /* Onboarding step flow: claim footer on every step */ .onboarding-claim { margin-top: 24px; } .onboarding-claim .claim-line { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--t2); } .onboarding-claim .claim-wordmark { font-size: 13px; } .onboarding-claim .claim-tag { margin-top: 3px; font-size: 11px; } @media (max-width: 640px) { /* Top bar — single row: Logo + Filter + Dark Mode (Suche lebt in der Navigation — bnav/Sidebar, kein Topbar-Button mehr, DEC-2026-08-29-search-topbar-button-removed) */ .top-in { flex-wrap: nowrap; height: auto; padding: var(--space-8) var(--space-12); gap: 8px; align-items: center; } .logo img { height: 16px; } /* Filter button — fixed bottom right, above the bottom nav (mobile only). Swapped with the scroll-to-top button: the filter opens a bottom sheet, so it belongs at the bottom near the thumb. Always visible — it no longer sits under the topbar, so the old scroll-reveal (`.is-scrolled`) is not needed. `.top .filter-btn` keeps the higher specificity so this position wins over the ≤1080px in-header rule. */ .top .filter-btn { position: fixed; top: auto; bottom: 17px; right: 16px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--surface-solid); border: 1px solid var(--surface-solid); border-radius: 100px; color: var(--t2); box-shadow: var(--shadow); opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } /* Dark mode toggle — hidden on mobile (removed from the topbar) */ #darkModeToggle { display: none !important; } /* Keep the account/login area, but move the filter selects to the drawer */ .tr { display: flex; gap: 8px; } .tr .header-filter-select { display: none; } /* Login button — compact icon, matching filter / dark-mode buttons */ .lb { min-height: 0; padding: 6px 12px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .lb .lb-text { display: none; } .lb .lb-icon { display: block; width: 18px; height: 18px; } /* User menu — compact on mobile */ .user-menu { display: flex; } .user-btn { padding: 4px; font-size: 0; } .user-btn span:last-child { display: none; } /* Page layout — more breathing room */ .page { padding: 12px 12px 100px; } /* Feed header compact */ .fh { padding: 8px 0; margin-bottom: 8px; top: 0; z-index: 10; background: var(--bg); } .fh h1 { font-size: 22px; } .fh .fi { font-size: 11px; } /* Onboarding banner — stacked vertically, compact */ .onboard { padding: 14px 14px; margin-bottom: 10px; border-radius: var(--r); } .onboard h4 { font-size: 14px; } .onboard p { font-size: 12px; } .onboard .steps { flex-direction: column; gap: 8px; } .onboard .step { min-width: auto; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .onboard .step-num { width: 22px; height: 22px; font-size: 11px; } .onboard .step-title { font-size: 12px; } .onboard .step-desc { font-size: 10px; } .onboard .step-num { margin-bottom: 0; flex-shrink: 0; } .onboard .step-title, .onboard .step-desc { margin-bottom: 0; } /* Onboarding close button — larger touch target on mobile */ .onboard-close { width: 44px; height: 44px; font-size: 20px; } /* Event cards — compact, more content visible */ .po { margin-bottom: 6px; border-radius: var(--r); } .po:hover { transform: none; } .ph { padding: 10px 12px 0; gap: 8px; } .ps { padding: 4px 12px 0; } .pb { padding: 4px 12px 0; } .pb h3 { font-size: 16px; } .pd { font-size: 13px; -webkit-line-clamp: 2; } .pm { font-size: 11px; gap: 8px; } .pa { padding: 6px 12px 8px; gap: 6px; } .pa .ac { padding: 7px 12px; font-size: 12px; min-height: 40px; border-radius: 16px; } .pa .ac .ic { font-size: 13px; } .pa .icnt { font-size: 11px; } /* Date badge — compact */ .ph .da { width: 38px; height: 38px; border-radius: var(--r); } .ph .da .dd { font-size: 16px; } .ph .da .dm { font-size: 6px; } .ph .pi .pc { font-size: 12px; } .ph .pi .pt { font-size: 11px; } /* Event Modal — full-screen slide-in on mobile */ .modal-img { border-radius: 20px 20px 0 0 !important; max-height: none !important; margin-bottom: 12px !important; } .modal-img img { height: 180px; border-radius: 20px 20px 0 0 !important; } .modal h2 { font-size: 20px; } .modal .mloc { font-size: 14px; } .modal .mbtn { flex-direction: column; gap: 8px; } .modal .mbtn button { min-height: 48px; padding: 12px 16px; font-size: 15px; } /* Login modal — bottom sheet too */ .lm { border-radius: 20px 20px 0 0 !important; max-width: 100vw !important; width: 100% !important; padding: 24px 20px 32px !important; } .lm h2 { font-size: 20px; } .lm input { min-height: 44px; font-size: 16px; } /* Bottom nav — floating pill, thumb-friendly */ .bnav { padding: 0; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); border-top: none; position: fixed; bottom: 8px; left: 0; right: 0; width: fit-content; margin: 0 auto; z-index: 100; border-radius: 100px; } .bnav-in { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 6px 6px; position: relative; } .bnav-in::before { content: ''; position: absolute; inset: 0; background: transparent; border-radius: 100px; z-index: -1; transition: all 0.3s ease; } .bnav-in.home-only::before { left: 0; right: auto; width: 44px; height: 44px; border-radius: 50%; inset: auto; } .bnav-i { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, transform 0.3s ease; } .bnav-in.home-only .bnav-i:not(.act) { opacity: 0; transform: scale(0.5); pointer-events: none; } .bnav-i .ico { width: 24px; height: 24px; transition: transform 0.2s ease; } .bnav-i .ico svg { width: 100%; height: 100%; display: block; } .bnav-i.act { background: transparent; color: var(--a); } .bnav-i.act .ico { opacity: 1; transform: scale(1.15); color: var(--a); } .bnav-i.act::after { display: none; } /* Toast — above bottom nav */ .toast-container { bottom: 80px; } .toast { font-size: 13px; padding: 10px 16px; } /* Scroll-to-top — top right on mobile (swapped with the filter button, which now sits bottom right). `#sttBtn` keeps the specificity over the global `.stt` rule (bottom: 24px) that comes later in the file. Appears after 300px of scroll via `.stt.sh` (init.js). */ #sttBtn { top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; right: var(--space-16); } /* Cookie banner — above bottom nav */ #cookieBanner { bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; padding: 8px 12px !important; font-size: 11px; border-radius: 10px 10px 0 0 !important; gap: 8px !important; flex-wrap: nowrap !important; } #cookieBanner span { min-width: 0 !important; } #cookieBanner a { display: none; } #cookieBanner button { padding: 6px 12px; font-size: 12px; min-height: 36px; flex-shrink: 0; } /* Skeleton cards — tighter */ .sk-c { padding: 10px 12px; margin-bottom: 6px; } .sk .sk-a { width: 40px; height: 40px; } /* Score badge compact */ .scp { font-size: 13px; padding: 3px 8px; } /* Install banner — above bottom nav */ #installBanner { top: auto !important; bottom: 72px !important; left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important; flex-wrap: wrap; padding: 10px 14px !important; border-radius: 12px !important; font-size: 12px; } } /* ===== Sub-mobile breakpoint — screens <375px (e.g. iPhone SE 320px) ===== */ /* ===== Phone-optimized breakpoint — 674px width (e.g. monono phone display) ===== */ @media (min-width: 641px) and (max-width: 674px) { /* Full-height layout for 2400px screens */ body { min-height: 100vh; -webkit-tap-highlight-color: transparent; } /* Top bar — larger touch targets */ .top-in { height: 64px; padding: 0 12px; } .logo img { height: 16px; } .ts input { padding: 10px 16px; font-size: 16px; border-radius: var(--r); } .tr select, #sort { padding: 8px 12px; font-size: 14px; } .lb { padding: 8px 16px; font-size: 14px; } /* Page — use full width */ .page { padding: 12px 10px 100px; max-width: 674px; } /* Feed header — larger for phone */ .fh h1 { font-size: 26px; } .fh .fi { font-size: 14px; } /* Onboarding — stacked, larger touch area */ .onboard { padding: 16px 18px; } .onboard .steps { flex-direction: column; gap: 10px; } .onboard .step { min-width: auto; padding: 12px 16px; } .onboard-close { width: 48px; height: 48px; font-size: 22px; } /* Event cards — optimized for phone reading */ .po { margin-bottom: 8px; } .ph { padding: 14px 16px 0; gap: 12px; } .ps, .pb { padding: 6px 16px 0; } .pa { padding: 4px 12px 8px; } /* Date badge — larger */ .ph .da { width: 48px; height: 48px; } .ph .da .dd { font-size: 20px; } .ph .da .dm { font-size: 10px; } /* Title — readable on phone */ .pb h3 { font-size: 19px; line-height: 1.3; } /* Description — 3 lines max */ .pd { -webkit-line-clamp: 3; font-size: 15px; } /* Action bar — larger touch targets */ .ac { min-height: 52px; padding: 8px 12px; font-size: 14px; } .ac button { min-height: 44px; padding: 10px 14px; font-size: 14px; } /* Bottom nav — larger for phone */ .bnav-i { padding: 8px 10px; font-size: 13px; } .bnav-i .ico { font-size: 20px; } /* Event Modal — full-screen on phone */ .modal-img { border-radius: 20px 20px 0 0 !important; max-height: none !important; margin-bottom: 12px !important; } .modal-img img { height: 180px; border-radius: 20px 20px 0 0 !important; } .modal h2 { font-size: 20px; } .modal .mdsc { font-size: 14px; } .modal .mloc { font-size: 13px; } .modal .mbtn { flex-direction: column; gap: 8px; } .modal .mbtn button { min-height: 48px; padding: 12px 16px; font-size: 15px; } /* Toast — above bottom nav */ .toast-container { bottom: 112px; } /* Scroll-to-top */ .stt { bottom: 112px; right: 16px; width: 48px; height: 48px; font-size: 20px; } /* Skeleton cards */ .sk-c { padding: 12px 16px; margin-bottom: 8px; } /* Score badge */ .scp { font-size: 13px; padding: 3px 8px; } /* Install banner */ #installBanner { bottom: 92px !important; padding: 12px 16px !important; } /* Cookie banner */ #cookieBanner { bottom: 76px !important; padding: 12px 16px; font-size: 13px; } } @media (max-width: 374px) { /* Top bar — fully stacked, all controls visible */ .top-in { flex-wrap: wrap; height: auto; padding: 6px 10px 8px; gap: 0; } .logo img { height: 14px; } .ts::after { content: ''; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c2); border: 1px solid var(--b); border-radius: 12px; cursor: pointer; } /* Controls row — wrap children vertically for visibility. Content is right-aligned: Avatar + Anmelden-CTA gehören ans Header-Rechtsende (2026-08-29: CTA & avatar nach rechts — gilt auch im gestapelten Layout). */ .tr { order: 4; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-left: 0; margin-top: 6px; width: 100%; } /* Make selects and login button share the row */ .tr > *, #cat, #sort { flex-shrink: 1; min-width: 0; } #cat, #sort { font-size: 11px; padding: 6px 8px; min-height: 32px; } /* Onboarding close button — larger touch target */ .onboard-close { width: 48px; height: 48px; font-size: 20px; } /* Feed header compact */ .fh h1 { font-size: 22px; } /* Event cards — optimized for very small screens */ .ph { padding: 10px 12px 0; gap: 10px; } .ps, .pb { padding-left: 12px; padding-right: 12px; } .pa { padding: 4px 8px 8px; } /* Date badge */ .ph .da { width: 36px; height: 36px; border-radius: var(--r); } .ph .da .dd { font-size: 16px; } /* Title readable even on tiny screens */ .pb h3 { font-size: 16px; } /* Bottom nav adjusted for tiny screens */ .bnav-i { padding: 6px 8px; font-size: 9px; } .bnav-i .ico { width: 24px; height: 24px; } .bnav-i .ico svg { width: 100%; height: 100%; display: block; } } .page { display: flex; flex-direction: row; max-width: 1200px; margin: 0 auto; padding: 32px 24px 100px; gap: 32px; align-items: flex-start; } .lc { flex: 0 0 200px; position: sticky; top: 56px; height: calc(100vh - 56px); align-self: flex-start; z-index: 10; overflow-y: auto; /* Fester Abstand zur Topbar, wenn die Sidenav andockt */ padding-top: 16px; } .main-content { flex: 1; max-width: 640px; min-width: 0; } .rc { flex: 0 0 200px; position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; } @media (max-width: 720px) { /* Single column on mobile — sidebars hidden */ .page { max-width: 640px; padding: 8px 8px 80px; } .lc, .rc { display: none; } .main-content { margin: 0; } .nv-i { padding: 8px 12px; font-size: 13px; } /* Feed header compact on mobile */ .fh h1 { font-size: 24px; } } @media (min-width: 721px) and (max-width: 1199px) { /* Tablet — left sidebar only */ .rc { display: none; } .lc { width: 160px; } .main-content { flex: 1; } } @media (min-width: 1024px) { /* Feed bleibt einspaltig — Tages-Sektionen und Karten untereinander */ #feedRoot { display: block; } .main-content { max-width: none; } } /* ===== Desktop ab 1200px — zentriertes Layout ===== */ @media (min-width: 1200px) { .page { max-width: 1200px; padding: 24px 24px 80px; gap: 24px; } .lc { width: 200px; } .main-content { max-width: none; } .rc { width: 220px; } /* Legal links live in the right sidebar on desktop — hide the (unreachable) footer copy */ .ft .ft-links { display: none; } /* Event cards wider on desktop */ .po { margin-bottom: 14px; } .ph { padding: 16px 22px 0; } .ps, .pb { padding-left: 22px; padding-right: 22px; } .pa { padding: 4px 10px 8px; } /* Right sidebar panels wider */ .rb { padding: 16px; } } .nv { background: transparent; border-radius: var(--r); border: 1px solid var(--b); overflow: hidden; backdrop-filter: blur(200px); } .nv-i { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--t2); font-size: 14px; font-weight: 600; font-family: var(--font-heading); transition: all 0.12s; cursor: pointer; border-left: 3px solid transparent; } .nv-i:hover { background: var(--bg); color: var(--t); } .nv-i.act { background: transparent; color: var(--a); border-left-color: var(--a); font-weight: 600; } .nv-i .ico { font-size: 18px; width: 20px; text-align: center; opacity: 0.4; } .nv-i.act .ico { opacity: 1; } .nv-d { height: 1px; background: var(--b); margin: 4px 12px; } /* Onboarding banner */ .onboard { display: none; background: linear-gradient(135deg, var(--ag), rgba(99, 102, 241, 0.08)); border: 1px solid var(--b); border-radius: var(--r); padding: 16px 20px; margin-bottom: 16px; position: relative; } .onboard.show { display: block; animation: slideDown 0.3s ease-out; } .onboard h4 { font-size: 15px; margin-bottom: 6px; color: var(--t); } .onboard p { font-size: 13px; color: var(--t2); line-height: 1.4; margin-bottom: 8px; } .onboard .steps { display: flex; gap: 16px; flex-wrap: wrap; } .onboard .step { flex: 1; min-width: 140px; background: var(--c); border-radius: var(--r); padding: 12px; } .onboard .step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--a); color: var(--bg); font-size: 12px; font-weight: 700; margin-bottom: 6px; } .onboard .step-title { font-size: 13px; font-weight: 700; color: var(--t); margin-bottom: 2px; } .onboard .step-desc { font-size: 11px; color: var(--t4); } .onboard-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--t4); font-size: 18px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } /* Guest Value Proposition Banner */ .gvb { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--gl), rgba(157, 255, 32, 0.05)); border: 1px solid rgba(157, 255, 32, 0.2); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; animation: slideDown 0.3s ease-out; } .gvb-icon { font-size: 28px; flex-shrink: 0; } .gvb-text { flex: 1; min-width: 0; } .gvb-title { font-size: 14px; font-weight: 700; color: var(--t); line-height: 1.3; } .gvb-desc { font-size: 12px; color: var(--t3); line-height: 1.4; } .gvb-btn { padding: 8px 16px; background: var(--a); color: var(--bg); border: none; border-radius: var(--r); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .gvb-btn:hover { opacity: 0.85; transform: scale(1.02); } /* Help tooltip system */ .help-btn { position: fixed; bottom: 80px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--a); color: var(--bg); border: none; font-size: 20px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); z-index: 50; transition: all 0.2s; } .help-btn:hover { transform: scale(1.1); } .help-panel { position: fixed; bottom: 132px; right: 16px; width: 280px; background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); z-index: 50; display: none; animation: slideUp 0.3s ease-out; } .help-panel.show { display: block; } .help-panel h3 { font-size: 16px; margin-bottom: 12px; color: var(--t); } .help-panel .help-step { display: flex; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--b); } .help-panel .help-step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .help-panel .help-num { width: 24px; height: 24px; border-radius: 50%; background: var(--a); color: var(--bg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .help-panel .help-text { font-size: 13px; color: var(--t2); line-height: 1.4; } .help-panel .help-text strong { color: var(--t); } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .help-panel { right: 8px; left: 8px; width: auto; bottom: 120px; } .help-btn { bottom: 72px; right: 8px; } } @media (max-width: 640px) { .gvb { flex-wrap: nowrap; padding: 8px 10px; margin-bottom: 6px; gap: 8px; } .gvb-icon { font-size: 22px; } .gvb-text { min-width: 0; } .gvb-title { font-size: 13px; } .gvb-desc { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .gvb-btn { width: auto; padding: 6px 12px; font-size: 12px; flex-shrink: 0; white-space: nowrap; } .discover-card { min-width: 100% !important; } } .rb { background: transparent; border-radius: var(--r); border: 1px solid var(--b); padding: 14px 16px 12px; margin-bottom: 10px; backdrop-filter: blur(200px); } /* Legal links pinned to the bottom of the right sidebar (desktop) */ .rc .rb-legal { margin-top: auto; border: none; background: transparent; padding: 4px 2px; text-align: center; } .rc .rb-legal .ft-links { font-size: 12px; } .rc .rb-legal .ft-links a { color: var(--t4); text-decoration: none; } .rc .rb-legal .ft-links a:hover, .rc .rb-legal .ft-links a:focus-visible { color: var(--a2); text-decoration: underline; } .rb .rh { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); font-weight: 700; margin-bottom: 10px; } .rb .rv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; } .rb .rv .rl { color: var(--t3); } .rb .rv .rr { color: var(--a2); font-weight: 700; } .rb .rbp { font-size: 13px; color: var(--t3); line-height: 1.5; } /* Trend items */ .trend-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; transition: all 0.15s; border-bottom: 1px solid var(--b); } .trend-item:last-child { border-bottom: none; } .trend-item:hover { color: var(--t); } .trend-item .trend-emoji { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; } .trend-item .trend-title { font-weight: 600; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trend-item .trend-count { margin-left: auto; font-size: 11px; color: var(--t4); font-weight: 700; flex-shrink: 0; } /* P2.4: Social badge in trend sidebar (replaces score) */ .trend-item .trend-badge { margin-left: auto; font-size: 11px; color: var(--accent); font-weight: 600; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; } .trend-badge .ico-fill { width: 12px; height: 12px; } /* Trend empty state */ .trend-empty { padding: 8px 0; } .trend-empty .te-icon { font-size: 24px; text-align: center; margin-bottom: 6px; opacity: 0.3; } .trend-empty .te-text { font-size: 12px; color: var(--t4); text-align: center; line-height: 1.4; } .fh { display: flex; /* center, not baseline: the row now also carries the view toggle */ align-items: center; flex-wrap: wrap; gap: 12px; padding: 4px; margin-bottom: 2px; top: 0; z-index: 10; background: var(--bg); } .fh h1 { font-size: 24px; letter-spacing: -0.02em; } /* margin-left:auto here right-groups .fi and everything after it, including the view toggle — empty or not. */ .fh .fi { font-size: 12px; color: var(--t4); font-style: italic; margin-left: auto; } .hs { background: linear-gradient( 135deg, rgba(217, 119, 6, 0.05), transparent ); border: 1px solid rgba(217, 119, 6, 0.15); border-radius: var(--r); padding: 14px 16px 10px; margin: 6px 0 4px; position: relative; } .hs::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, var(--a), var(--g), var(--a)); border-radius: var(--r) var(--r) 0 0; opacity: 0.6; } .hsh { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .hsh .pp { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 6px var(--g); animation: pp 2s ease-in-out infinite; } @keyframes pp { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.25); } } .hsh h2 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--g); font-weight: 700; } .hsh .sn { font-size: 10px; color: var(--t4); font-style: italic; } .hsh .ln { flex: 1; height: 1px; background: linear-gradient( 90deg, rgba(16, 185, 129, 0.15), transparent ); } .sc { margin: 2px 0; } .sh { display: flex; align-items: center; gap: 8px; padding: 18px 4px 6px; } .sh h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t4); font-weight: 700; } .sh .sn { font-size: 11px; color: var(--t4); font-style: italic; } .sh .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--b), transparent); } /* ── Legacy calendar styles (kept for backwards compat) ── */ .cal-section { margin-bottom: 8px; } .cal-sh { display: flex; align-items: center; gap: 8px; padding: 12px 4px 6px; } .cal-grid { padding: 0 0 8px; } .po { background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; transition: all 0.2s ease; cursor: pointer; box-shadow: var(--shadow-sm); } .po:hover { border-color: var(--b); background: var(--bg); box-shadow: var(--shadow); transform: translateY(-2px); } .ph { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; } .ph .da { width: 48px; height: 48px; border-radius: var(--r); flex-shrink: 0; background: var(--a); color: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 700; position: relative; box-shadow: 0 2px 8px var(--accent-glow); } .ph .da.tdy { background: var(--g); box-shadow: 0 2px 12px var(--glow); } .ph .da .dd { font-size: 19px; margin-top: -2px; line-height: 1; } .ph .da .dm { font-size: 7px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-top: 0; font-weight: 700; } .ph .pi { flex: 1; min-width: 0; } .ph .pi .pc { font-size: 13px; font-weight: 700; color: var(--a2); } .ph .pi .pt { font-size: 12px; color: var(--t4); } .scp { margin-left: 4px; padding: 3px 10px; border-radius: 16px; font-size: 13px; font-weight: 700; background: var(--c2); color: var(--t3); border: 1px solid var(--b); flex-shrink: 0; transition: all 0.2s ease; cursor: default; letter-spacing: 0.01em; } .scp.h { color: var(--color-emerald-dark); border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.08); } .scp.m { color: var(--color-score-popular); border-color: rgba(217, 119, 6, 0.2); background: rgba(217, 119, 6, 0.08); } .scp.l { color: var(--t4); border-color: var(--b); background: var(--c); } .scp:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .score-popover { position: absolute; top: 100%; right: 0; z-index: 100; background: var(--bg); border: 1px solid var(--b); border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 10px 14px; min-width: 200px; margin-top: 4px; font-size: 13px; color: var(--t3); transition: opacity 0.2s ease, transform 0.2s ease; } .score-popover.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .score-popover:not(.show) { opacity: 0; transform: translateY(-4px); pointer-events: none; } .sp-header { font-weight: 700; color: var(--t1); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--b); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; } .sp-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; } .sp-k { color: var(--t4); font-weight: 500; } .sp-v { color: var(--t3); font-weight: 600; } .ph { position: relative; } .ps { display: flex; align-items: center; gap: 8px; padding: 6px 18px 0; min-height: 26px; } .ps .pv { display: flex; } .ps .pv .pa { width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--b); margin-left: -7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--t); flex-shrink: 0; background: var(--bg); transition: all 0.15s; cursor: default; } .ps .pv .pa:first-child { margin-left: 0; } .ps .pv .pa:hover { transform: scale(1.2); z-index: 2; background: var(--a); color: var(--bg); } .ps .pv .pa.c1, .ps .pv .pa.c2, .ps .pv .pa.c3, .ps .pv .pa.c4, .ps .pv .pa.c5, .ps .pv .pa.c6, .ps .pv .pa.c7 { background: var(--bg); color: var(--t); border-color: var(--b); } .ps .pt { font-size: 14px; color: var(--t2); font-style: italic; line-height: 1.3; } .ps .pt b { color: var(--a2); font-style: normal; font-weight: 700; } .ps .pb { margin-left: auto; background: var(--gl); color: var(--g); padding: 2px 10px; border-radius: var(--r); font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid rgba(16, 185, 129, 0.06); } .ps .pn { font-size: 14px; color: var(--t4); font-style: italic; padding: 2px 0; } .pb { padding: 8px 20px 0; } .pb h3 { font-size: 19px; line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.015em; color: var(--t); } .pb .pd { font-size: 14px; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; line-height: 1.5; } .pb .pm { display: flex; gap: 14px; font-size: 12px; color: var(--t3); } .pb .pm span { display: flex; align-items: center; gap: 4px; } .pb .cd { display: inline-block; font-size: 11px; font-weight: 700; color: var(--g); background: var(--gl); padding: 2px 10px; border-radius: var(--r); margin-bottom: 3px; } .pb .lm { font-size: 11px; color: var(--t4); font-style: italic; margin-top: 2px; } .pa { display: flex; align-items: center; gap: 6px; padding: 10px 20px 12px; margin-top: 4px; border-top: 1px solid var(--b); } .pa .ac { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--b); font-size: 13px; font-weight: 600; color: var(--t2); cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap; } .pa .ac:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px var(--accent-glow); } .pa .ac.pr { color: var(--g); } .pa .ac.pr:hover { background: var(--gl); } .pa .ac .ic { width: 16px; height: 16px; opacity: 0.6; } .pa .ac.pr .ic { opacity: 1; } .pa .ac.tg.on { background: var(--gl); color: var(--g); } .pa .ac.tg.on .ic { opacity: 1; animation: hb 0.3s ease; } .pa .ac.di { opacity: 0.4; cursor: not-allowed; pointer-events: none; background: var(--c); color: var(--t4); border-color: var(--b); } .pa .ac.di::before { content: ""; } .pa .icnt { margin-left: 4px; font-size: 12px; color: var(--t4); } @keyframes hb { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(0.85); } 100% { transform: scale(1); } } /* ── Poster fallback ── */ .event-poster-fb { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c2), var(--b)); border-radius: var(--r) var(--r) 0 0; } .event-poster-fb .fb-emoji { z-index: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)); } .event-poster-fb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--bg) 100%); opacity: 0.3; } .event-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--r) var(--r) 0 0; } /* ── Action buttons (Teilnehmen / Interessiert / Absage) ── */ .c-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cact { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--b); border-radius: 18px; background: transparent; color: var(--t2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; line-height: 1; min-height: 32px; } .cact:hover { transform: translateY(-1px); } .cact:active { transform: translateY(0); } /* Interessiert - Heart */ .cact-heart { padding: 6px 12px; } .cact-heart:hover { border-color: var(--color-pink); color: var(--color-pink); background: var(--color-pink-bg); } .cact-heart.on { background: var(--color-pink-bg-active); border-color: var(--color-pink); color: var(--color-pink); } /* Teilnehmen - Green */ .cact-go { padding: 6px 14px; background: var(--g); border-color: var(--g); color: var(--color-inverse); font-weight: 700; } .cact-go:hover { background: var(--color-emerald-dark); border-color: var(--color-emerald-dark); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .cact-go.on { background: var(--gl); border-color: var(--g); color: var(--g); } .cact-go.on:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--red); color: var(--red); box-shadow: none; } /* Absagen - Red link */ .cact-decline { padding: 6px 10px; border: none; background: transparent; color: var(--t4); font-size: 11px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; } .cact-decline:hover { color: var(--red); text-decoration-color: var(--red); background: transparent; transform: none; } /* ── I3: Card Redesign classes ── */ .ph-sc { display: flex; align-items: center; } .score-tier { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; line-height: 1.5; } .st-top { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald-dark); } .st-mid { background: var(--c2); color: var(--t3); } .st-low { background: var(--ag); color: var(--t4); font-size: 10px; } /* I4: Modal source transparency */ .msrc { font-size: 13px; color: var(--t3); margin-top: 8px; } .morg { font-size: 13px; color: var(--t3); margin-top: 4px; } .morg a { color: var(--accent); text-decoration: none; } .morg a:hover { text-decoration: underline; } /* I4: Quality score bar in modal */ .mscore { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 12px; background: var(--c2); border-radius: 8px; } .mscore-label { font-size: 12px; font-weight: 600; color: var(--t2); min-width: 55px; } .mscore-bar { flex: 1; height: 6px; background: var(--b); border-radius: 3px; overflow: hidden; } .mscore-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .mscore-fill.high { background: var(--color-score-recommended); } .mscore-fill.medium { background: var(--color-score-popular); } .mscore-fill.low { background: var(--t4); } .mscore-val { font-size: 11px; color: var(--t3); min-width: 70px; text-align: right; } /* I4: Enhanced empty state */ .em-hint { margin-top: 12px; font-size: 12px; color: var(--t4); font-style: italic; } .cbadge { font-size: 12px; font-weight: 700; padding: 4px 12px; } .cb-friends { color: var(--g); } .cb-ed { color: var(--t2); } .cb-taste { color: var(--color-score-popular); } .cb-trend { color: var(--red); } .cb-past { color: var(--t3); opacity: 0.7; } .cb-kinder { color: var(--color-score-popular); } .cb-exhibition { color: #7c3aed; } .cint { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1.5px solid var(--b); border-radius: 20px; background: transparent; color: var(--t2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; min-height: 36px; margin-left: auto; line-height: 1; } .cint:hover:not(.di) { border-color: var(--g); color: var(--g); } .cint.on { background: var(--g); border-color: var(--g); color: var(--color-inverse); font-weight: 600; } .cint.on .ic { animation: hb 0.3s ease; } .cint.loading { opacity: 0.7; pointer-events: none; cursor: wait; } .cint .ic { width: 16px; height: 16px; } .cint .icnt { font-size: 11px; opacity: 0.7; } /* Event Cards UI/UX Improvements */ .c-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .cact { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1.5px solid var(--b); border-radius: 16px; background: transparent; color: var(--t2); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; line-height: 1; } .cact:hover { border-color: var(--g); color: var(--g); } .cact.on { background: var(--g); border-color: var(--g); color: var(--color-inverse); font-weight: 600; } .cact-login { opacity: 0.6; } .unk-badge { display: inline-block; font-size: 11px; color: var(--t4); margin-left: 8px; font-style: italic; } /* Skeleton */ .sk { padding: 20px 0; } .sk-c { background: var(--c); border: 1px solid var(--b); border-radius: var(--r); padding: 16px 20px; margin-bottom: 10px; display: flex; gap: 14px; box-shadow: var(--shadow-sm); } .sk .sk-a { width: 48px; height: 48px; border-radius: var(--r); background: var(--b); flex-shrink: 0; animation: sk 1.5s ease-in-out infinite; } .sk .sk-b { flex: 1; } .sk .sk-l { height: 13px; background: var(--b); border-radius: var(--r); margin-bottom: 6px; width: 30%; animation: sk 1.5s infinite; } .sk .sk-m { height: 13px; background: var(--b); border-radius: var(--r); margin-bottom: 4px; width: 80%; animation: sk 1.5s infinite 0.08s; } .sk .sk-s { height: 11px; background: var(--b); border-radius: var(--r); width: 50%; animation: sk 1.5s infinite 0.15s; } .sk .sk-ss { height: 24px; background: var(--b); border-radius: var(--r); margin-top: 8px; width: 55%; animation: sk 1.5s infinite 0.2s; } @keyframes sk { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } .ld { text-align: center; padding: 60px 16px; color: var(--t3); } .ld .sp { width: 24px; height: 24px; border: 2px solid var(--b); border-top-color: var(--a); border-radius: 50%; animation: s 0.7s linear infinite; margin: 0 auto 8px; } @keyframes s { to { transform: rotate(360deg); } } /* Skeleton loading */ .skel-row { display: flex; gap: 12px; padding: 0 16px 16px; } .skel-card { flex: 1; min-height: 140px; border-radius: var(--r); background: var(--c2); position: relative; overflow: hidden; } .skel-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: skelShimmer 1.5s infinite; } body.dark .skel-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); } @keyframes skelShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skel-card .skel-line { position: absolute; background: var(--b); border-radius: 4px; } .skel-card .skel-line:nth-child(1) { top: 12px; left: 12px; width: 60%; height: 14px; } .skel-card .skel-line:nth-child(2) { top: 34px; left: 12px; width: 40%; height: 10px; } .skel-card .skel-line:nth-child(3) { top: 52px; left: 12px; width: 80%; height: 10px; } .em, .er { text-align: center; padding: 60px 16px; } .em .ic, .er .ic { width: 24px; height: 24px; margin-bottom: 10px; opacity: 0.1; } .em h3, .er h3 { color: var(--t2); font-size: 20px; } .em p, .er p { color: var(--t3); font-size: 14px; } .er code { font-size: 13px; color: var(--a2); background: var(--ag); padding: 3px 10px; border-radius: var(--r); } .er .btn { display: inline-block; margin-top: 12px; padding: 8px 20px; background: var(--a); color: var(--bg); border: none; border-radius: var(--r); font-weight: 700; font-size: 14px; cursor: pointer; } .er .btn:hover { opacity: 0.85; } .ft { text-align: center; padding: 24px; color: var(--t4); font-size: 13px; border-top: 1px solid var(--b); max-width: 1080px; margin: 0 auto; } .ft-links a { color: var(--t4); text-decoration: underline; text-underline-offset: 2px; } .ft-links a:hover, .ft-links a:focus-visible { color: var(--a2); } .ft-sep { margin: 0 6px; opacity: 0.7; } .stt { position: fixed; bottom: 24px; right: 24px; z-index: 50; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--a); color: var(--bg); border: none; font-size: 18px; cursor: pointer; transition: transform 0.2s, opacity 0.2s; opacity: 0; pointer-events: none; } .stt.sh { opacity: 1; pointer-events: auto; } .stt:hover { transform: scale(1.1); } @media (max-width: 760px) { .stt { bottom: 24px; } } .bnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: none; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(200px) saturate(180%); border-top: 1px solid var(--b); padding: 0px; margin-bottom: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,0.05); } .bnav-in { display: flex; justify-content: space-evenly; max-width: 500px; margin: 0 auto; } .bnav-i { display: flex; align-items: center; justify-content: center; padding: 8px 10px; color: var(--t4); cursor: pointer; transition: all 0.2s ease; border-radius: 100px; position: relative; } .bnav-i .ico { width: 24px; height: 24px; opacity: 0.5; transition: all 0.2s ease; } .bnav-i .ico svg { width: 100%; height: 100%; display: block; } .bnav-i.act { color: var(--a); background: var(--accent-soft); } .bnav-i.act .ico { opacity: 1; transform: scale(1.15); } .bnav-i.act::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--a); border-radius: 2px; } .bnav-i:hover { color: var(--t); background: var(--accent-soft); } @media (max-width: 720px) { .bnav { display: block; } .page { padding-bottom: 96px; } } /* Toast */ .toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } @media (max-width: 760px) { .toast-container { bottom: 100px; } } .toast { background: var(--c); border: 1px solid var(--b); border-radius: var(--r); padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--t2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards; pointer-events: auto; max-width: 90vw; text-align: center; display: flex; align-items: center; gap: 8px; } .toast.s { border-color: rgba(16, 185, 129, 0.2); color: var(--g); } .toast.e { border-color: rgba(239, 68, 68, 0.2); color: var(--red); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } } @keyframes u { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .po { animation: u 0.25s ease both; } .po:nth-child(1) { animation-delay: 0.01s; } .po:nth-child(2) { animation-delay: 0.03s; } .po:nth-child(3) { animation-delay: 0.05s; } /* ===== Profil Page ===== */ .prof-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 18px; background: var(--c); border: 1px solid var(--b); border-radius: var(--r); } .prof-info h2 { font-size: 20px; margin-bottom: 2px; } .prof-info .prof-username { font-size: 13px; color: var(--t4); margin-bottom: 2px; } .prof-info .prof-email { font-size: 12px; color: var(--t3); } /* Profile stats grid */ .prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .prof-stat { background: var(--c); border: 1px solid var(--b); border-radius: var(--r); padding: 12px 8px; text-align: center; } .prof-stat .stat-val { font-size: 24px; font-weight: 900; color: var(--a2); } .prof-stat .stat-label { font-size: 10px; text-transform: uppercase; color: var(--t4); margin-top: 2px; } /* Profile section card */ .prof-section { background: var(--c); border: 1px solid var(--b); border-radius: var(--r); padding: 16px; margin-bottom: 12px; } .prof-section h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); margin-bottom: 12px; font-weight: 700; } /* Profile form */ .prof-form label { display: block; font-size: 12px; font-weight: 600; color: var(--t3); margin-bottom: 4px; } .prof-form input, .prof-form select { width: 100%; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--b); background: var(--bg); color: var(--t); font-size: 14px; margin-bottom: 12px; outline: none; transition: border-color 0.2s; } .prof-form input:focus, .prof-form select:focus { border-color: var(--a); } /* Profile phone section (magic-link / phone-change) */ .prof-phone-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .prof-phone-val { display: flex; align-items: center; gap: 8px; font-size: 15px; } .prof-phone-verified, .prof-phone-unverified { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .prof-phone-verified { background: rgba(16, 185, 129, 0.15); color: #10b981; } .prof-phone-unverified { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .prof-phone-btn { background: none; border: 1px solid var(--b); color: var(--t2); border-radius: var(--r); padding: 6px 12px; font-size: 13px; cursor: pointer; transition: all 0.15s; } .prof-phone-btn:hover { border-color: var(--a); color: var(--a); } .avatar-upload-zone { border: 2px dashed var(--b); border-radius: var(--r); padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; } .avatar-upload-zone:hover, .avatar-upload-zone.dragover { border-color: var(--a2); background: var(--accent-soft); } .avatar-upload-preview { display: none; margin-bottom: 12px; } .avatar-upload-preview img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--b); } .avatar-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; } .aup-icon { font-size: 28px; margin-bottom: 4px; } .aup-text { font-size: 14px; font-weight: 600; color: var(--t2); } .aup-sub { font-size: 12px; color: var(--t4); } .avatar-url-row { display: flex; gap: 8px; margin-top: 10px; } .avatar-url-row input { flex: 1; } .aup-url-btn { padding: 6px 14px; border: 1px solid var(--b); border-radius: 6px; background: var(--c); color: var(--t2); font-size: 12px; cursor: pointer; white-space: nowrap; } .aup-url-btn:hover { background: var(--bh); color: var(--t); } .avatar-remove-btn { display: inline-block; margin-top: 8px; padding: 4px 12px; font-size: 11px; color: var(--t4); background: transparent; border: 1px solid var(--b); border-radius: 4px; cursor: pointer; } .avatar-remove-btn:hover { color: var(--red); border-color: rgba(239, 68, 68, 0.3);} /* Avatar section layout */ .prof-section h3 { margin-bottom: 8px; } /* Crop Modal */ .crop-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; padding: 20px; animation: mo 0.25s ease; } .crop-modal-content { background: var(--bg); border-radius: 16px; max-width: 90vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .crop-header { padding: 16px 20px; border-bottom: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; } .crop-header h3 { margin: 0; font-size: 16px; font-weight: 700; } .crop-body { padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; gap: 12px; } .crop-hint { font-size: 12px; color: var(--t4); text-align: center; user-select: none; -webkit-user-select: none; } .crop-container { position: relative; /* Shrinks on narrow viewports instead of pushing the modal wider than the screen. openCropModal() measures the result, so the crop maths follows the actual size rather than assuming 300. */ width: min(300px, 72vw); height: min(300px, 72vw); overflow: hidden; border-radius: 50%; /* Clipping a transformed child is the fragile part here, and the crop image always carries one. Firefox in particular lets a transformed descendant escape a border-radius + overflow:hidden clip. clip-path masks the painted subtree, and translateZ(0) puts the container on its own layer so the clip is applied at composite time — together they hold while the image is scaled. */ clip-path: circle(50%); transform: translateZ(0); cursor: grab; user-select: none; -webkit-user-select: none; } /* The ring lives on a wrapper, not on .crop-container itself. Two reasons: a border there would shrink the content box under the global border-box reset (294px visible while the JS derived cover-fit size, pan clamp and canvas output from 300 — image 3px off centre on each axis, and pannable far enough to pull background into the circle), and clip-path on the container would clip a box-shadow ring away as well. Separated, the container is a pure mask whose clientWidth is exactly the diameter. */ .crop-ring { border-radius: 50%; box-shadow: 0 0 0 3px var(--a); font-size: 0; transition: box-shadow 0.18s ease; } .crop-ring:hover { box-shadow: 0 0 0 3px var(--a2); } .crop-container:active { cursor: grabbing; } .crop-container img { position: absolute; top: 50%; left: 50%; /* Explicit width/height are assigned in openCropModal() once the natural size is known: the image is laid out at its cover-fitted size, which is precisely what performCanvasCrop() draws. It used to size itself (min-width/min-height 300px, max-width none) and so rendered at natural size while the canvas cover-fitted it — a 1200x800 photo was shown at 1200x800 but cropped as 450x300, so the saved avatar bore no relation to the visible selection. object-fit is deliberately NOT used here: it would clip the content to the element box before the transform, whereas the canvas clips only at the circle, and the two would drift apart while panning. */ max-width: none; transform-origin: center center; pointer-events: none; } .crop-controls { padding: 16px 20px; border-top: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crop-zoom { flex: 1; } .crop-zoom input[type="range"] { width: 100%; } .crop-zoom-label { font-size: 12px; color: var(--t4); margin-bottom: 4px; } .crop-actions { display: flex; gap: 8px; } .crop-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--b); background: var(--c); color: var(--t2); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .crop-btn:hover { background: var(--bh); color: var(--t); } .crop-btn.primary { background: var(--a); color: var(--bg); border-color: var(--a); } .crop-btn.primary:hover { background: var(--a2); border-color: var(--a2); } .crop-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .crop-btn[disabled]:hover { background: var(--c); color: var(--t2); } .crop-btn.primary[disabled]:hover { background: var(--a); color: var(--bg); } /* Save button */ .prof-save { width: 100%; padding: 10px; border-radius: var(--r); border: none; background: var(--a); color: var(--bg); font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity 0.15s; } .prof-save:hover { opacity: 0.85; } .prof-save:disabled { opacity: 0.4; pointer-events: none; } /* P2-163: DSGVO export button (profile page) */ .prof-export { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border-radius: var(--r); border: 1px solid var(--b); background: var(--c); color: var(--t); font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity 0.15s; } .prof-export:hover { opacity: 0.85; } .prof-export:disabled { opacity: 0.4; pointer-events: none; } .prof-export svg { width: 16px; height: 16px; } /* Discover page cards */ .discover-card { display: flex; align-items: center; gap: 16px; padding: 20px 18px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .discover-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; } .discover-card:hover { border-color: var(--t); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .discover-card:hover::before { opacity: 1; } .discover-card .dc-icon { width: 52px; height: 52px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; position: relative; z-index: 1; } .discover-card .dc-info { flex: 1; min-width: 0; position: relative; z-index: 1; } .discover-card .dc-name { font-size: 17px; font-weight: 700; color: var(--t); margin-bottom: 2px; } .discover-card .dc-hint { font-size: 13px; color: var(--t4); } .discover-card .dc-arrow { font-size: 20px; color: var(--t4); transition: all 0.2s; position: relative; z-index: 1; } .discover-card:hover .dc-arrow { color: var(--t); transform: translateX(3px); } /* Category chips */ .cat-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cat-chip { padding: 6px 12px; border-radius: var(--r); font-size: 13px; font-weight: 600; background: var(--bg); color: var(--t3); border: 1px solid var(--b); } .cat-chip .chip-count { margin-left: 4px; color: var(--a2); font-weight: 700; } /* Profile action buttons */ .prof-actions { display: flex; gap: 8px; margin-top: 16px; } .prof-actions button { flex: 1; padding: 10px; border-radius: var(--r); border: 1px solid var(--b); background: transparent; color: var(--t2); font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.15s; } .prof-actions button:hover { background: var(--bg); color: var(--t); } /* Profile page — mobile adjustments */ @media (max-width: 640px) { .prof-header { padding: 14px; gap: 12px; }.prof-info h2 { font-size: 18px; } .prof-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } .prof-stat { padding: 10px 4px; } .prof-stat .stat-val { font-size: 20px; } } /* Chat UI removed (2026-08-03) — chat.js module deleted */ .user-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--b); } .avatar-circle { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } /* Cookie Banner */ .cookie-banner { background: var(--bg); border-top: 1px solid var(--b); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); color: var(--t2); backdrop-filter: blur(200px); } .cookie-banner a { color: var(--a2); } body.dark .cookie-banner { background: rgba(15, 15, 20, 0.96); box-shadow: 0 -4px 16px rgba(0,0,0,0.3); } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Freunde (Friends) ───────────────────────────── */ .ab-section { margin-bottom: 24px; } .ab-section-title { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .ab-import-card { background: var(--card); border-radius: 16px; padding: 20px; text-align: center; border: 2px dashed var(--accent); margin-bottom: 16px; } .ab-import-card p { font-size: 14px; color: var(--muted); margin: 8px 0 16px; } .ab-import-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--color-inverse); border: none; padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; } .ab-import-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ab-import-btn:active { transform: scale(0.97); } .ab-contact-list { list-style: none; padding: 0; margin: 0; } .ab-contact-item { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .ab-contact-info { flex: 1; min-width: 0; } .ab-contact-hash { font-family: monospace; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-contact-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-left: 8px; } .ab-contact-badge.matched { background: rgba(16, 185, 129, 0.15); color: var(--g); } .ab-contact-badge.unmatched { background: rgba(107, 114, 128, 0.15); color: var(--t4); } .ab-contact-delete { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .ab-contact-delete:hover { background: rgba(239, 68, 68, 0.1); color: var(--red); } .ab-friend-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .ab-friend-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--color-inverse); flex-shrink: 0; } .ab-friend-avatar.grp { background: linear-gradient(135deg, #6366f1, #818cf8); } .ab-friend-info { flex: 1; min-width: 0; } .ab-friend-name { font-weight: 700; font-size: 15px; color: var(--text); } .ab-friend-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .ab-friend-strength { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .ab-privacy-card { background: var(--card); border-radius: 12px; padding: 16px; margin-bottom: 8px; } .ab-privacy-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; } .ab-privacy-row:not(:last-child) { border-bottom: 1px solid rgba(128,128,128,0.1); } .ab-privacy-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; } .ab-privacy-label { font-weight: 700; font-size: 13px; color: var(--text); } .ab-privacy-desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .ab-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .ab-stat-card { background: var(--card); border-radius: 12px; padding: 16px 12px; text-align: center; } .ab-stat-value { font-size: 28px; font-weight: 800; color: var(--accent); } .ab-stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .ab-empty { text-align: center; padding: 32px 16px; color: var(--muted); font-size: 14px; } .ab-empty-icon { font-size: 40px; margin-bottom: 8px; opacity: 0.5; } body.dark .ab-contact-badge.matched { background: rgba(16, 185, 129, 0.2); } body.dark .ab-contact-badge.unmatched { background: rgba(107, 114, 128, 0.2); } body.dark .ab-import-card { border-color: rgba(255,255,255,0.15); } /* ── Friends Redesign: Search + Activity + Invite ── */ .ab-search-row { display: flex; gap: 8px; margin-bottom: 16px; } .ab-search-input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); padding: 0 14px; font-size: 15px; color: var(--text); outline: none; transition: border-color 0.2s; } .ab-search-input:focus { border-color: var(--accent); } .ab-search-input::placeholder { color: var(--muted); } .ab-search-result { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .ab-search-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--color-inverse); flex-shrink: 0; } .ab-search-info { flex: 1; min-width: 0; } .ab-search-name { font-weight: 700; font-size: 14px; color: var(--text); } .ab-search-badge { font-size: 11px; color: var(--muted); margin-top: 2px; } .ab-search-badge.is-friend { color: var(--g); } .ab-search-actions { display: flex; gap: 6px; flex-shrink: 0; } .ab-search-actions button { height: 36px; min-width: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; } .ab-search-actions button:active { transform: scale(0.95); } .ab-search-actions button.ab-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .ab-activity-item { background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; } .ab-activity-event { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; } .ab-activity-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .ab-activity-avatars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ab-activity-chip { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; padding: 4px 10px 4px 4px; font-size: 12px; color: var(--text); } .ab-activity-chip.signal-declined { opacity: 0.6; } .ab-activity-chip-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--color-inverse); } .ab-activity-chip-label { color: var(--muted); } .ab-invite-card { background: var(--card); border-radius: 12px; padding: 20px 16px; text-align: center; margin-bottom: 8px; } .ab-invite-card p { font-size: 14px; color: var(--muted); margin: 8px 0 16px; } .ab-invite-btn { height: 44px; padding: 0 24px; border-radius: 12px; background: var(--accent); color: #fff; border: none; font-size: 15px; font-weight: 700; cursor: pointer; } .ab-invite-btn:active { transform: scale(0.97); } .ab-contact-import { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .ab-contact-textarea { width: 100%; min-height: 100px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); padding: 12px 14px; font-size: 14px; color: var(--text); font-family: inherit; resize: vertical; outline: none; transition: border-color 0.2s; } .ab-contact-textarea:focus { border-color: var(--accent); } .ab-contact-textarea::placeholder { color: var(--muted); } .ab-section-desc { font-size: 13px; color: var(--muted); margin-bottom: 12px; } .ab-friend-card-actions { display: flex; gap: 6px; flex-shrink: 0; } .ab-friend-card-actions button { height: 36px; min-width: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; } .ab-friend-card-actions button:active { transform: scale(0.95); } .ab-friend-card-actions button.ab-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } body.dark .ab-search-input { border-color: rgba(255,255,255,0.15); } body.dark .ab-activity-chip { background: rgba(255,255,255,0.08); } .prof-avatar-fallback { width: 80px; height: 80px; border-radius: 50%; background: var(--a); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; } /* ── Friends Redesign: Tab-basierte Struktur ── */ .fr-page { } .fr-tabs { display: flex; gap: 4px; background: var(--surface); border-radius: var(--r); padding: 4px; } .fr-tab { flex: 1; padding: 10px 12px; border: none; border-radius: calc(var(--r) - 4px); background: transparent; color: var(--t2); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-family: var(--font-heading); } .fr-tab:hover:not(.act) { color: var(--t); background: rgba(0,0,0,0.04); } .fr-tab.act { background: var(--bg); color: var(--t); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .fr-search-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .fr-search-input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); padding: 0 14px; font-size: 15px; color: var(--text); outline: none; transition: border-color 0.2s; } .fr-search-input:focus { border-color: var(--accent); } .fr-search-input::placeholder { color: var(--muted); } .fr-result-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .fr-result-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--color-inverse); flex-shrink: 0; } .fr-result-name { font-weight: 700; font-size: 14px; color: var(--text); } .fr-result-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .fr-result-badge.friend { background: rgba(16, 185, 129, 0.15); color: var(--g); } .fr-result-badge.not-circle { background: rgba(107, 114, 128, 0.15); color: var(--t4); } .fr-result-badge.pending { background: var(--today-soft); color: var(--today); } .fr-btn-sent { opacity: 0.55; cursor: default; } .fr-result-actions { display: flex; gap: 6px; flex-shrink: 0; } .fr-result-actions button { height: 36px; min-width: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; } .fr-result-actions button:active { transform: scale(0.95); } .fr-result-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .fr-result-actions button:disabled { opacity: 0.4; cursor: not-allowed; } .fr-friend-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .fr-friend-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--color-inverse); flex-shrink: 0; } .fr-friend-info { flex: 1; min-width: 0; } .fr-friend-name { font-weight: 700; font-size: 15px; color: var(--text); } .fr-friend-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .fr-friend-strength { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .fr-friend-card-actions { display: flex; gap: 6px; flex-shrink: 0; } .fr-friend-card-actions button { height: 36px; min-width: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; } .fr-friend-card-actions button:active { transform: scale(0.95); } .fr-friend-card-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .fr-activity-item { background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; } .fr-activity-event { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; } .fr-activity-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; } .fr-activity-meta svg { width: 12px; height: 12px; } .fr-activity-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fr-activity-chip { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; padding: 4px 10px 4px 4px; font-size: 12px; color: var(--text); } .fr-activity-chip.declined { opacity: 0.6; } .fr-activity-chip-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--color-inverse); } .fr-activity-chip-label { color: var(--muted); } .fr-empty { text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14px; } .fr-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; } .fr-empty-title { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 6px; } .fr-empty-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .fr-empty-cta { display: flex; gap: 8px; justify-content: center; } .fr-empty-cta button { height: 40px; padding: 0 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; } .fr-empty-cta button.primary { background: var(--accent); color: #fff; } .fr-empty-cta button.secondary { background: transparent; color: var(--t2); border: 1px solid var(--border); } .fr-action-bar { position: sticky; bottom: 0; left: 0; right: 0; background: var(--bg); padding: 12px 16px 16px; border-top: 1px solid var(--b); display: flex; gap: 8px; z-index: 10; } .fr-action-btn { flex: 1; height: 44px; border-radius: 12px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .fr-action-btn.primary { background: var(--accent); color: #fff; } .fr-action-btn.secondary { background: transparent; color: var(--t2); border: 1px solid var(--border); } body.dark .fr-result-badge.not-circle { background: rgba(107, 114, 128, 0.2); } body.dark .fr-activity-chip { background: rgba(255, 255, 255, 0.08); } /* ── Friends Redesign: Tab Panels + Slide Animation ── */ .fr-tab-content { position: relative; min-height: 200px; overflow: hidden; } .fr-tab-panel { display: none; animation: frSlideIn 0.3s ease; } .fr-tab-panel.act { display: block; } .fr-tab-panel.slide-in-right { animation: frSlideInRight 0.3s ease; } .fr-tab-panel.slide-in-left { animation: frSlideInLeft 0.3s ease; } @keyframes frSlideInRight { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes frSlideInLeft { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── Loading Skeleton ─────────────────────────────────── */ .discover-skeleton { padding: 16px; } .ds-header { margin-bottom: 16px; } .ds-line { background: linear-gradient(90deg, var(--c) 25%, var(--c2) 50%, var(--c) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } .ds-title { height: 18px; width: 60%; margin-bottom: 12px; } .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .ds-card { background: var(--bg); border: 1px solid var(--b); border-radius: 12px; padding: 16px; } .ds-icon { width: 40px; height: 40px; border-radius: 8px; margin-bottom: 10px; } .ds-info { margin-top: 8px; } .ds-name { height: 14px; width: 80%; margin-bottom: 6px; } .ds-hint { height: 12px; width: 50%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Mobile Filter Drawer ===== * The drawer base (sheet, overlay, sections, pinned actions) lives in * the global block above — it must style every viewport where the * trigger can open it. Only the mobile-only trigger button stays here. */ /* Filter button — mobile only */ .filter-btn { display: none; background: var(--c2); border: 1px solid var(--b); color: var(--t2); width: 44px; height: 44px; border-radius: var(--r); cursor: pointer; font-size: 20px; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; } .filter-btn:active { transform: scale(0.92); background: var(--bh); } /* Header filter selects — city / category / sort. * This rule used to be a bare `display: none` outside any media query, * despite the comment claiming it was mobile-only, so the three * filters were invisible on every viewport. Mobile hides them via * `.tr { display: none }` in the max-width:640px block and offers the * filter drawer behind `.filter-btn` instead. */ .header-filter-select { display: inline-flex; align-items: center; height: 36px; max-width: 170px; padding: 0 30px 0 12px; border: 1px solid var(--b); border-radius: var(--ec-pill-radius, 999px); background-color: var(--c2); color: var(--t); font-family: var(--font-heading); font-size: 13px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px; text-overflow: ellipsis; transition: border-color 0.15s ease, background-color 0.15s ease; } .header-filter-select:hover { border-color: var(--t3); } .header-filter-select:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } /* An active (non-default) filter reads as set, not as a placeholder. */ .header-filter-select.is-active { border-color: var(--t); background-color: var(--bg); color: var(--t); } /* Hide sort select from header — accessible via filter drawer. */ .hidden-header-select { display: none !important; } /* Below the desktop breakpoint the header runs out of room long before * the mobile rules kick in — drop sort first, then category. The * filter drawer button appears at the same breakpoint, so whatever is * dropped from the header stays reachable rather than disappearing. */ @media (max-width: 1080px) { #sort.header-filter-select { display: none; } .filter-btn { display: flex; width: 36px; height: 36px; font-size: 17px; border-radius: var(--ec-pill-radius, 999px); /* Not visible by default — revealed by the scroll listener (`.is-scrolled`) once the user has scrolled past the topbar, same behavior as the fixed mobile button. */ opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .filter-btn.is-scrolled { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } @media (max-width: 900px) { #cat.header-filter-select { display: none; } } @media (max-width: 760px) { .header-filter-select { max-width: 132px; font-size: 12px; } } /* ===== Card Touch Feedback ===== */ .po { transition: transform 0.15s ease, opacity 0.3s ease; animation: cardFadeIn 0.4s ease both; } .po:active { transform: scale(0.97); } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Stagger card animations */ .po:nth-child(1) { animation-delay: 0.05s; } .po:nth-child(2) { animation-delay: 0.1s; } .po:nth-child(3) { animation-delay: 0.15s; } .po:nth-child(4) { animation-delay: 0.2s; } .po:nth-child(5) { animation-delay: 0.25s; } .po:nth-child(n+6) { animation-delay: 0.3s; } /* ===== Page Transitions ===== */ .main-content { transition: opacity 0.2s ease, transform 0.25s ease; } .main-content.page-enter-right { animation: slideInRight 0.25s ease both; } .main-content.page-enter-left { animation: slideInLeft 0.25s ease both; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* Pull-to-Refresh-Indicator entfernt (2026-08-29, DEC-2026-08-29-manual-refresh-entfernt) — Auto-Refresh ersetzt den manuellen Trigger; #ptrIndicator/.ptr-* sind weg. */ /* ===== Bottom Nav Improvements ===== */ .bnav-i { transition: all 0.2s ease; position: relative; } .bnav-i:active { transform: scale(0.88); } .bnav-i.act { background: var(--accent-soft); } .bnav-i.act .ico { opacity: 1; transform: scale(1.25); transition: transform 0.2s ease; } .bnav-i.act::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--accent); border-radius: 2px; } /* ===== Notification Badge ===== */ .bnav-badge { position: absolute; top: 2px; right: 50%; transform: translateX(12px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: var(--color-inverse); background: var(--red); border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } /* ===== Improved Empty States ===== */ .em { text-align: center; padding: 40px 20px; animation: cardFadeIn 0.4s ease both; } .em .ic { font-size: 48px; margin-bottom: 16px; opacity: 0.6; } .em h3 { font-size: 18px; margin-bottom: 8px; color: var(--t); } .em p { font-size: 14px; color: var(--t3); line-height: 1.5; max-width: 280px; margin: 0 auto; } .em .em-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } .em .em-tip { margin-top: 20px; padding: 12px 16px; background: var(--c2); border-radius: var(--r); font-size: 13px; color: var(--t2); text-align: left; max-width: 300px; margin-left: auto; margin-right: auto; } .em .em-tip b { color: var(--t); } /* User Menu Flyout */ .um { display: none; position: absolute; top: 100%; right: 0; width: 240px; background: var(--bg); border: 1px solid var(--b); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 1000; overflow: hidden; } .um-header { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--b); } .um-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--color-inverse); } .um-info { flex: 1; min-width: 0; } .um-name { font-weight: 600; font-size: 14px; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .um-handle { font-size: 12px; color: var(--t3); } .um-items { padding: 8px 0; } .um-item { display: block; padding: 10px 16px; font-size: 14px; color: var(--t); text-decoration: none; transition: background 0.15s; } .um-item:hover { background: var(--ag); } /* ── Attendance Dropdown ── * Styled once in eventcard-base.css. The legacy block that used to live * here set `bottom: 100%` while the base file sets `top`, and index.css * loads last — so both offsets applied at once and, with the * `overflow: hidden` from this block, squashed the menu to a 10px * sliver that clipped every item. Do not re-add it here. */ @keyframes dropdownIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── Larger Avatars ── */ .mav { width: 32px; height: 32px; font-size: 12px; } /* ── Event Info Row ── */ .event-info-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; margin-top: 4px; border-top: 1px solid var(--b); font-size: 12px; color: var(--t3); } .event-info-row a { color: var(--g); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .event-info-row a:hover { text-decoration: underline; } .event-price { font-weight: 700; color: var(--t); } .event-price.free { color: var(--g); } .payment-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--c2); font-size: 12px; font-weight: 500; color: var(--a); } /* ── Ticket Button ── */ .ticket-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--a); border-radius: 12px; background: var(--a); color: var(--bg); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; } .ticket-btn:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: 0 2px 8px var(--accent-glow); } .ticket-btn svg { width: 14px; height: 14px; } /* ── Bookmark Icon ── */ .cact-bookmark { padding: 6px 12px; } .cact-bookmark:hover { border-color: var(--color-bookmark); color: var(--color-bookmark); background: var(--color-bookmark-bg); } .cact-bookmark.on { background: var(--color-bookmark-bg-active); border-color: var(--color-bookmark); color: var(--color-bookmark); } /* ── Bookmarks Page ── */ .bm-empty { text-align: center; padding: 40px 16px; } .bm-empty .ic { font-size: 48px; margin-bottom: 12px; opacity: 0.2; } .bm-empty h3 { color: var(--t2); margin-bottom: 8px; } .bm-empty p { color: var(--t3); font-size: 14px; } /* ── Modal Attendance Dropdown ── */ .modal-att-dropdown { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c2); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.15s; } .modal-att-dropdown:hover { background: var(--bh); } .modal-att-label { font-size: 13px; font-weight: 600; color: var(--t2); flex: 1; } .modal-att-value { font-size: 13px; font-weight: 700; color: var(--g); } /* ── Modal Extra Info ── */ .modal-extra-info { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--b); margin-top: 12px; } .modal-extra-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .modal-extra-row a { color: var(--g); text-decoration: none; font-weight: 600; } .modal-extra-row a:hover { text-decoration: underline; } .modal-ticket-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: none; border-radius: 12px; background: var(--a); color: var(--bg); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; margin-top: 8px; } .modal-ticket-btn:hover { opacity: 0.85; } /* ── Onboarding ── */ .onboarding-container { max-width: 400px; margin: 40px auto; padding: 20px; text-align: center; } .onboarding-subtitle { color: var(--t3); font-size: 14px; margin-bottom: 24px; } .onboarding-step { display: flex; align-items: center; gap: 16px; padding: 16px; margin: 12px 0; background: var(--c); border: 1px solid var(--b); border-radius: 12px; cursor: pointer; transition: transform 0.2s; } .onboarding-step:hover { transform: scale(1.02); } .onboarding-icon { font-size: 32px; min-width: 48px; } .onboarding-step-info { text-align: left; flex: 1; } .onboarding-step-info h3 { margin: 0 0 4px; font-size: 15px; } .onboarding-step-info p { margin: 0; font-size: 12px; color: var(--t3); } .onboarding-container .btn { display: block; width: 100%; padding: 14px; margin-top: 16px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; } .onboarding-container .btn-app { background: var(--a); color: var(--bg); } .onboarding-container .btn-sec { background: transparent; color: var(--t2); border: 1px solid var(--b); } /* ── Onboarding Step-by-Step ── */ .onboarding-step-view { text-align: center; padding: 32px 20px; max-width: 480px; margin: 0 auto; } .onboarding-progress { width: 100%; height: 4px; background: var(--c2); border-radius: 2px; margin-bottom: 8px; overflow: hidden; } .onboarding-progress-bar { height: 100%; background: var(--a); border-radius: 2px; transition: width 0.3s ease; } .onboarding-step-counter { font-size: 12px; color: var(--t4); margin-bottom: 24px; } .onboarding-icon-lg { font-size: 56px; margin-bottom: 16px; } .onboarding-desc { font-size: 15px; color: var(--t2); margin-bottom: 24px; line-height: 1.5; } .onboarding-privacy-hint { font-size: 13px; color: var(--t4); background: var(--c); border: 1px solid var(--b); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; text-align: left; line-height: 1.4; } .onboarding-action { display: block; width: 100%; padding: 14px; margin-bottom: 10px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; } .onboarding-action:active { opacity: 0.7; } .onboarding-city-select { margin-bottom: 20px; } .onboarding-city-select select { width: 100%; padding: 12px; border: 1px solid var(--b); border-radius: 10px; font-size: 16px; background: var(--bg); color: var(--t); appearance: none; -webkit-appearance: none; } .onboarding-interests { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; } .onboarding-interest-chip { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--b); border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.15s ease; user-select: none; } .onboarding-interest-chip input { display: none; } .onboarding-interest-chip.selected { background: var(--a); color: var(--bg); border-color: var(--a); } .onboarding-skip { display: block; width: 100%; padding: 10px; border: none; background: transparent; color: var(--t4); font-size: 14px; cursor: pointer; margin-top: 8px; } .onboarding-result { text-align: center; padding: 32px 20px; max-width: 480px; margin: 0 auto; } /* ===== Circle Page: Stats ===== */ .stat-row { display: flex; gap: 8px; margin-bottom: 16px; } .stat-card { flex: 1; background: var(--c); border: 1px solid var(--b); border-radius: 8px; padding: 10px; text-align: center; } .stat-num { font-size: 22px; font-weight: 900; } .stat-num--accent { color: var(--a2); } .stat-num--green { color: var(--g); } .stat-label { font-size: 10px; color: var(--t4); text-transform: uppercase; } /* ===== Circle Page: Info Card ===== */ .info-card { background: var(--c); border: 1px solid var(--b); border-radius: 10px; padding: 16px; margin-bottom: 16px; } .info-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .info-card-icon { font-size: 20px; } .info-card-title { font-size: 14px; font-weight: 700; margin: 0; } .info-card-desc { font-size: 12px; color: var(--t3); margin-bottom: 12px; line-height: 1.5; } /* ===== Circle Page: Contact Form ===== */ .contact-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .contact-input { flex: 1; padding: 10px 12px; border: 1px solid var(--b); border-radius: 8px; font-size: 13px; } .contact-add-btn { padding: 10px 14px; border: 1px solid var(--b); border-radius: 8px; background: var(--bg); cursor: pointer; font-size: 14px; font-weight: 700; } .contact-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .upload-btn { width: 100%; padding: 10px; border: none; border-radius: 8px; background: var(--a); color: var(--bg); cursor: pointer; font-size: 13px; font-weight: 700; } .circle-member-info { font-size: 11px; color: var(--t4); margin-top: 8px; } /* ===== Circle Page: Category Hint ===== */ .cat-hint { font-size: 12px; color: var(--t3); margin-bottom: 14px; font-style: italic; } /* ===== Buttons: Secondary ===== */ .btn-secondary { background: var(--c2); color: var(--t); border: 1px solid var(--b); } /* ===== Score Legend ===== */ .score-legend { display: flex; flex-direction: column; gap: 10px; } .score-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: var(--c); border: 1px solid var(--b); } .score-legend-icon { font-size: 20px; } .score-legend-label { font-weight: 700; } .score-legend-desc { font-size: 12px; color: var(--t3); } /* ===== Error Message ===== */ .error-msg { color: var(--t4); margin-top: 8px; } /* ===== Auth UI Extras ===== */ .reg-fields { display: none; } /* 2-step invite registration (P2-247/248): step 2 back button */ .reg-back { background: none; border: none; padding: 0; margin-bottom: 8px; color: var(--t2); font-size: 13px; cursor: pointer; text-align: left; } .reg-back:hover { color: var(--t); } .reg-city-select { width: 100%; padding: 10px 12px; background: var(--c); border: 1px solid var(--b); border-radius: 8px; color: var(--t); font-size: 14px; } .auth-toggle-wrap { text-align: center; margin-top: 12px; } .auth-toggle-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 14px; } .login-status { margin-top: 12px; text-align: center; } /* ===== Score Legend Extras ===== */ .score-legend-intro { font-size: 14px; color: var(--t2); margin-bottom: 16px; line-height: 1.5; } .score-legend-item--recommended { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.2); } .score-legend-item--popular { background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.2); } .score-legend-label--recommended { color: var(--color-score-recommended); } .score-legend-label--popular { color: var(--color-score-popular); } .score-legend-label--standard { color: var(--t2); } .score-legend-label--low { color: var(--t4); } .score-legend-icon--low { color: var(--t4); } /* ===== Bookmarks Summary ===== */ .bm-summary { margin-bottom: 12px; padding: 12px; background: var(--c); border-radius: 10px; border: 1px solid var(--b); display: flex; align-items: center; gap: 6px; } /* ===== Utility: Text Colors ===== */ .text-secondary { color: var(--t3); } .text-muted { color: var(--t4); } .text-green { color: var(--g); } /* ===== Utility: Button Danger ===== */ .btn-danger { color: var(--red); border-color: rgba(239, 68, 68, 0.3); } /* ===== Utility: Hidden Input ===== */ .hidden-input { display: none; } /* ===== Profile: Section Description ===== */ .prof-section-desc { font-size: 12px; color: var(--t4); margin-bottom: 12px; } /* ===== Profile: Invite codes (launch phase) ===== */ .invite-quota { font-size: 12px; font-weight: 600; color: var(--t3); margin-bottom: 8px; } .invite-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .invite-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--b); border-radius: var(--radius-sm, 8px); flex-wrap: wrap; } .invite-code { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--t1); background: none; border: none; padding: 0; } .invite-copy-btn { padding: 4px 10px; font-size: 11px; } .invite-status { margin-left: auto; font-size: 11px; color: var(--t4); } .invite-status-active { color: var(--green, #22c55e); } .invite-status-redeemed { color: var(--t4); } .invite-status-revoked { color: var(--red); } /* ===== Profile: Avatar Info ===== */ .avatar-info { font-size: 11px; color: var(--t4); margin-top: 4px; } /* ===== Profile: About Text ===== */ .about-text { font-size: 13px; color: var(--t3); line-height: 1.5; } /* ===== Utility: Font Weight ===== */ .fw-bold { font-weight: 700; } /* ===== Utility: Emoji Large ===== */ .emoji-lg { font-size: 32px; } /* ===== Contact: Tag Chip ===== */ .contact-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--b); border-radius: 12px; font-size: 11px; } /* ===== Contact: Remove Button ===== */ .contact-remove-btn { cursor: pointer; font-weight: 700; color: var(--t3); } /* ===== Modal: Contact Fallback ===== */ .contact-fallback-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); } .contact-fallback-card { background: var(--bg); border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; } .contact-fallback-card h3 { margin: 0 0 8px; font-size: 16px; } .contact-fallback-info { font-size: 12px; color: var(--t4); margin-bottom: 12px; } .contact-fallback-textarea { width: 100%; padding: 10px; border: 1px solid var(--b); border-radius: 8px; font-size: 14px; resize: vertical; font-family: inherit; } .contact-fallback-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; } .contact-fallback-cancel { padding: 8px 16px; border: 1px solid var(--b); border-radius: 8px; background: transparent; cursor: pointer; } .contact-fallback-submit { padding: 8px 16px; border: none; border-radius: 8px; background: var(--a); color: var(--bg); cursor: pointer; font-weight: 700; } /* ===== Onboarding: Interests Hint ===== */ .onboarding-hint { font-size: 13px; color: var(--t4); margin-bottom: 12px; } /* ===== Discover: Section Header ===== */ .discover-section-header { margin-bottom: 16px; } .discover-section-header h3 { font-size: 14px; font-weight: 700; color: var(--t); margin-bottom: 10px; } .discover-section-wrapper { display: flex; gap: 8px; flex-wrap: wrap; } /* ===== Discover: Card ===== */ .discover-card { flex: 1; min-width: 120px; } /* ===== Discover: Description ===== */ .discover-desc { font-size: 13px; color: var(--t4); margin-bottom: 16px; font-style: italic; } /* ===== Profile: Login Button ===== */ .prof-login-btn { margin-top: 16px; display: inline-block; padding: 8px 24px; font-size: 15px; cursor: pointer; background: var(--a); color: var(--bg); border: none; border-radius: 8px; font-weight: 700; } /* ===== Profile: No Categories ===== */ .no-categories { color: var(--t4); font-style: italic; font-size: 13px; } /* ===== Avatar Image ===== */ .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* ===== Ticket Button Wrap ===== */ .ticket-btn-wrap { margin-top: 8px; } /* ══════════════════════════════════════════════════════════ Iteration-1 Design: Timeline-Feed + Pastell-Cards (Entwurf: features/monono - Iteration 1@2x.png) Überschreibt bewusst ältere Card-Regeln per Kaskade. ══════════════════════════════════════════════════════════ */ /* ── Timeline (Tages-Gruppen) ── */ .tl-day { position: relative; /* Left gutter carries the dotted timeline rail; the right side * needs its own breathing room so cards are not flush to the edge. * 2026-08-27: Rail war kurz entfernt (Breiten-Fix) und vom User * zurueckgewünscht — nur in der Timeline, nie in der Feed- * (Bubble-)View; Bubble nutzt kein .tl-day, bleibt also voll breit. */ padding: 0 12px 6px 26px; } .tl-day::before { content: ""; position: absolute; left: 5px; top: 30px; bottom: -8px; border-left: 2px dotted var(--b); } .tl-day:last-of-type::before { bottom: 8px; } .tl-head { display: flex; align-items: center; gap: 10px; padding: 12px 0px; position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, transparent 100%); flex-wrap: wrap; } .tl-head::before { content: ""; position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--a); } .tl-pill { background: var(--a); color: var(--bg); font-weight: 700; font-size: 13px; line-height: 1; padding: 6px 14px; border-radius: 999px; white-space: nowrap; } .tl-date { font-weight: 700; color: var(--t); font-size: 14px; } .tl-time { color: var(--t2); font-size: 14px; } /* ── Chain Hint (P3.3) ── */ .chain-hint { font-size: 12px; color: var(--t3); font-style: italic; margin: 4px 0 8px 0; padding: 4px 8px; background: var(--surface); border-radius: 6px; display: inline-block; } .week-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: 0 0 12px 0; border-bottom: 1px solid var(--b); position: sticky; top: 0; background: var(--bg); z-index: 50; } .week-day { background: transparent; border: 1px solid var(--b); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--t2); cursor: pointer; white-space: nowrap; transition: all 0.15s; } .week-day.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; } .week-day:hover { border-color: var(--bh); } /* P1-131: Tages-Sektionen landen beim scrollToDay-Ankerwurf direkt unter dem sticky Week-Strip (Sonst würde der Tag-Header hinter dem Strip verschwinden). */ .tl-day, .cal-day { scroll-margin-top: 46px; } /* ── Pastell-Card ── */ .ncard { display: grid; grid-template-columns: 240px 1fr; border: none; border-radius: 16px; overflow: hidden; box-shadow: none; background: var(--cat-default); margin-bottom: 18px; } .ncard:hover { border-color: transparent; background: var(--cat-default); box-shadow: var(--shadow); transform: translateY(-2px); } .ncard.cat-music, .ncard.cat-music:hover { background: var(--cat-music); } .ncard.cat-film, .ncard.cat-film:hover { background: var(--cat-film); } .ncard.cat-community, .ncard.cat-community:hover { background: var(--cat-community); } .ncard.cat-arts, .ncard.cat-arts:hover { background: var(--cat-arts); } .ncard.cat-tech, .ncard.cat-tech:hover { background: var(--cat-tech); } .ncard.cat-nightlife, .ncard.cat-nightlife:hover { background: var(--cat-nightlife); } .ncard.cat-food, .ncard.cat-food:hover { background: var(--cat-food); } .ncard.cat-kinder, .ncard.cat-kinder:hover { background: var(--cat-kinder); } .ncard.cat-education, .ncard.cat-education:hover { background: var(--cat-education); } .ncard.cat-sports, .ncard.cat-sports:hover { background: var(--cat-sports); } .nc-media { position: relative; overflow: hidden; min-height: 230px; } .ncard .nc-media .event-poster, .ncard .nc-media .event-poster-fb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; min-height: 0; } .nc-cat { position: absolute; top: 12px; left: 12px; background: var(--cat-badge-bg); color: var(--t); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; z-index: 2; } .nc-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .nc-title { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--t); font-family: 'Mona Sans SemiExtended', sans-serif; } .nc-desc { font-size: 15px; color: var(--t); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Mona Sans', sans-serif; } .nc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--t); } .nc-dot { font-size: 7px; color: var(--t); } .nc-pin { font-size: 13px; } .nc-venue { border: 1.5px solid var(--t); border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 600; color: var(--t); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .nc-multiday { background: var(--accent); color: var(--bg); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nc-badge-wrap { margin-left: auto; } .nc-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .nc-social { display: flex; align-items: center; gap: 10px; } .nc-social .ms { flex-shrink: 0; } .nc-social-txt { font-size: 13px; color: var(--t); font-weight: 600; line-height: 1.35; font-family: 'Mona Sans', sans-serif; } /* ── Sozialer Grund (SF1-1.3) ── */ .nc-reason { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--t); font-weight: 600; line-height: 1.35; font-family: 'Mona Sans', sans-serif; } .nc-reason .ms { flex-shrink: 0; } .nc-reason-txt { font-size: 13px; color: var(--t); font-weight: 600; line-height: 1.35; } /* P2.2: Thematic reason — subtle distinguishing style */ .nc-reason.nc-reason-thematic .nc-reason-txt { color: var(--t2); font-weight: 500; font-style: italic; } /* ── Bubble Empty State (SF2-1.1) ── */ .bubble-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; gap: 16px; } .be-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--t2); } .be-icon i { width: 28px; height: 28px; } .bubble-empty h3 { font-size: 18px; font-weight: 700; margin: 0; } .bubble-empty p { font-size: 14px; color: var(--t2); margin: 0; max-width: 300px; } .be-actions { margin: 8px 0; } .be-divider { font-size: 13px; color: var(--accent); font-weight: 700; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; } .be-events { width: 100%; max-width: 600px; } /* ── Bubble Invite Sheet (SF2-1.3) ── */ .bubble-invite-sheet { max-width: 480px; padding: 24px 20px 28px; } .bis-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; gap: 12px; } .bis-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); } .bis-icon i { width: 24px; height: 24px; } .bis-header h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--t); } .bis-header p { font-size: 14px; color: var(--t2); margin: 0; line-height: 1.4; } /* Tastemaker placeholder (SF2-1.6) */ .bis-tastemaker { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px dashed var(--b); border-radius: var(--r); margin-bottom: 20px; font-size: 13px; color: var(--t2); line-height: 1.4; } .bis-tm-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff3cd; display: flex; align-items: center; justify-content: center; color: #856404; } .bis-tm-icon i { width: 16px; height: 16px; } /* Action buttons */ .bis-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .bis-action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; border-radius: var(--r); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; font-family: 'Mona Sans', sans-serif; min-height: 48px; } .bis-action i { width: 20px; height: 20px; flex-shrink: 0; } .bis-action--primary { background: var(--accent); color: #fff; } .bis-action--primary:hover { background: var(--accent-hover, #2563eb); } .bis-action--secondary { background: var(--surface); color: var(--t); border: 1px solid var(--b); } .bis-action--secondary:hover { background: var(--border); } /* Manual invite section */ .bis-manual { border-top: 1px solid var(--b); padding-top: 20px; } .bis-manual h3 { font-size: 14px; font-weight: 600; color: var(--t); margin: 0 0 12px; } .bis-manual-input { width: 100%; padding: 12px; border: 1px solid var(--b); border-radius: var(--r); font-size: 14px; font-family: 'Mona Sans', sans-serif; resize: vertical; min-height: 80px; background: var(--bg); color: var(--t); box-sizing: border-box; } .bis-manual-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .bis-manual-btn { width: 100%; margin-top: 12px; padding: 12px; background: var(--surface); color: var(--t); border: 1px solid var(--b); border-radius: var(--r); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; font-family: 'Mona Sans', sans-serif; min-height: 44px; } .bis-manual-btn:hover { background: var(--border); } /* ── Context Chips (SF3-2.1) ── */ .context-chips { display: flex; gap: 8px; margin: 8px 0; padding: 0 16px; flex-wrap: wrap; } .ctx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--b); border-radius: 999px; background: var(--surface); color: var(--t); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; font-family: 'Mona Sans', sans-serif; } .ctx-chip:hover { background: var(--c); } .ctx-chip i { width: 12px; height: 12px; } /* ── Feed View Toggle (SF1-2.1) ── A segmented control living in the feed title row. It used to be two detached pills on a dedicated row (~53px with its margins) rendered above every page; joining them in one track states "one of two" more clearly and costs no vertical space at all. */ .feed-view-toggle { display: inline-flex; gap: 2px; margin: 0; padding: 2px; flex: none; background: var(--c); border: 1px solid var(--b); border-radius: 999px; } .fv-toggle-btn { padding: 5px 12px; border: none; border-radius: 999px; background: transparent; color: var(--t3); font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: 'Mona Sans', sans-serif; } .fv-toggle-btn:hover { color: var(--t); } .fv-toggle-btn.act { background: var(--bg); color: var(--t); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* Feed-only chrome. These live in the app shell above #feedRoot, which every page renders into, so without this they follow the user onto Kalender, Pläne, Freunde, Chats and Profil. Scoped in CSS rather than by toggling inline styles so each element keeps its own show/hide logic when the feed is active. */ .main-content:not(.is-feed) .feed-view-toggle, .main-content:not(.is-feed) #contextChips, .main-content:not(.is-feed) #bubbleStrip, .main-content:not(.is-feed) #crawlStatus, .main-content:not(.is-feed) #onboardBanner, .main-content:not(.is-feed) #guestBanner { display: none !important; } .fv-badge { background: var(--accent); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; min-width: 18px; text-align: center; } /* ── Weekly Curator Header (SF1-2.2) ── */ .weekly-curator { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 12px 16px; padding: 14px 18px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(99, 102, 241, 0.04)); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: var(--r); cursor: pointer; transition: all 0.2s ease; font-family: 'Mona Sans', sans-serif; } .weekly-curator:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08)); border-color: rgba(59, 130, 246, 0.3); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08); } .weekly-curator:active { transform: translateY(0); } .wc-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .wc-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--a), #6366f1); color: white; flex-shrink: 0; font-size: 18px; } .wc-text { flex: 1; min-width: 0; } .wc-title { font-size: 14px; font-weight: 700; color: var(--t); line-height: 1.3; } .wc-subtitle { font-size: 11px; color: var(--t3); margin-top: 2px; } .wc-right { flex-shrink: 0; } .wc-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--a); transition: gap 0.15s ease; } .weekly-curator:hover .wc-cta { gap: 6px; } .wc-cta i { font-size: 14px; } /* Dark mode adjustments for weekly curator */ .dark .weekly-curator { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08)); border-color: rgba(59, 130, 246, 0.25); } .dark .weekly-curator:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.12)); border-color: rgba(59, 130, 246, 0.4); } /* Mobile responsive */ @media (max-width: 720px) { .weekly-curator { margin: 8px 8px 12px; padding: 12px 14px; } .wc-icon { width: 32px; height: 32px; font-size: 16px; } .wc-title { font-size: 13px; } .wc-subtitle { font-size: 10px; } .wc-cta { font-size: 11px; } } /* Aktions-Pills: Teilnehmen (Dropdown) + Speichern */ .nc-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ncard .att-dropdown-btn, .ncard .cact { border: 1.5px solid var(--t); border-radius: 999px; background: transparent; color: var(--t); font-size: 14px; font-weight: 600; padding: 9px 18px; min-height: 38px; line-height: 1; cursor: pointer; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 6px; font-family: 'Mona Sans SemiExtended', sans-serif; } .ncard .att-dropdown-btn:hover, .ncard .cact:hover { background: var(--t); color: var(--bg); border-color: var(--t); transform: none; } .ncard .cact.on, .ncard .cact-bookmark.on { background: var(--t); color: var(--bg); border-color: var(--t); } .ncard .att-dropdown-btn .chevron { font-size: 9px; opacity: 0.7; } /* ── Header-Polish (Logo + Pill-Chips) ── */ .top .ts input { border: 1.5px solid var(--b); border-radius: 999px; } .top .tr select { border: 1.5px solid var(--b); border-radius: 999px; font-weight: 600; font-size: 13px; padding: 7px 30px 7px 14px; color: var(--t); } /* ── Sidebar im Entwurfs-Stil: schlichte Liste ── */ .nv { border: none; background: transparent; backdrop-filter: none; overflow: visible; } .nv-i { border-left: none; border-radius: 10px; color: var(--t); font-weight: 600; padding: 10px 14px; } .nv-i:hover { background: var(--c); color: var(--t); } .nv-i.act { border-left: none; background: var(--c2); color: var(--t); font-weight: 600; } .nv-i .ico { opacity: 0.75; } /* Mobile: Bild oben, Inhalt darunter */ @media (max-width: 640px) { .ncard { grid-template-columns: 1fr; } .nc-media { min-height: 0; height: 180px; } .nc-body { padding: 14px 16px; } .tl-day { padding-left: 20px; padding-right: 12px; } .tl-head::before { left: -20px; width: 10px; height: 10px; } .tl-date, .tl-time { font-size: 13px; } } /* Desktop-Grid (>1024px): Feed bleibt einspaltig — Timeline-Layout ersetzt das 3-Spalten-Grid aus F16 */ @media (min-width: 1025px) { #feedRoot { display: block; } } /* Lucide icons */ [data-lucide] { width: 18px; height: 18px; stroke-width: 2; } .nv-i .ico [data-lucide], .bnav-i .ico [data-lucide] { width: 18px; height: 18px; } .ico [data-lucide] { display: inline-block; vertical-align: middle; } .ico { display: flex; justify-content: center; align-items: center; padding-bottom: 2px; } .stat-card-icon [data-lucide] { width: 24px; height: 24px; } .ic [data-lucide] { width: 24px; height: 24px; } /* Icons that sit inline with a text label: size follows the label and the glyph rides its optical baseline. The 18px default above keeps applying to standalone and nav icons. */ [data-lucide].ico-txt, [data-lucide].cat-ico { width: 1em; height: 1em; vertical-align: -0.125em; } .ico-row { display: inline-flex; align-items: center; gap: 6px; } /* Solid counterpart of an outline icon (former ★ / ◆ / ❤ glyphs). */ [data-lucide].ico-fill { fill: currentColor; } /* Status dots: filled and reduced, so they read as dots rather than rings. */ [data-lucide].dot { width: 0.7em; height: 0.7em; fill: currentColor; stroke: none; vertical-align: 0.05em; } .dot-ok { color: var(--g); } .dot-idle { color: var(--t4); } .ctx-item { padding: 8px 16px; cursor: pointer; } .ctx-item-sep { border-top: 1px solid var(--c3); } /* ── Friends Page (extracted from pages.js inline styles, P2-39) ── */ .ab-invite-icon { font-size: 32px; margin-bottom: 8px; } /* ── Bubble-Feed v1 „Was lohnt sich“ (DEC-2026-08-22-card-rhythm-bubble, Iteration B) ── */ /* Flat-List auf dem bestehenden curated-Ranking: eigener Kopf + kompakte „Warum“-Chips über jeder Medium-Card. Kein Week-Strip, kein Größen-Plan — beides bleibt Domäne der Timeline. Karten-Abstand kommt von .ec (base). */ .bub-head { padding: 4px 2px 14px; } .bub-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--t); } .bub-head p { margin: 4px 0 0; font-size: 13px; color: var(--t2); } .bub-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; margin-bottom: 6px; } .bub-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--bg); border: 1px solid var(--b); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--t2); white-space: nowrap; } .bub-chip i { width: 12px; height: 12px; color: var(--a2); } /* ── Feed End (SF1-2.5, SF1-2.6) — "Das war diese Woche" Abschluss-Screen ── */ .feed-end { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 16px; } .feed-end-icon { width: 48px; height: 48px; color: var(--t4); opacity: 0.5; } .feed-end-title { font-size: 20px; font-weight: 700; color: var(--t); line-height: 1.3; } .feed-end-subtitle { font-size: 15px; color: var(--t2); line-height: 1.5; max-width: 320px; } .feed-end-cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; min-height: 44px; border-radius: 999px; border: 1px solid var(--b); background: var(--bg); color: var(--t); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.15s ease; } .feed-end-cta:hover { border-color: var(--a); background: var(--accent-soft); color: var(--a); } .feed-end-cta:active { transform: scale(0.97); } .feed-end-cta .fe-cta-icon { width: 16px; height: 16px; } /* ── Suchseite /suche (2026-09-13, DEC-2026-08-29-search-dedicated-page) ── Dedizierte Suchseite: sticky Suchleiste + flache Ergebnisliste (gleiche Card-Größenlogik wie der Timeline-Feed). Ersetzt das alte Topbar-Input. */ .suche { display: flex; flex-direction: column; min-height: calc(100vh - 56px); } .suche-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--b); } .suche-ico { width: 18px; height: 18px; color: var(--t4); flex-shrink: 0; } .suche-input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; background: var(--c2); border: 1px solid transparent; border-radius: 22px; color: var(--t); font-family: inherit; font-size: 15px; outline: none; transition: all 0.2s ease; } .suche-input:focus { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); } .suche-input::placeholder { color: var(--t4); font-style: normal; /* 2026-08-29: User-Wunsch — Schrift in der Suchleiste normal, nicht kursiv */ } .suche-clear { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--c2); color: var(--t4); cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; } .suche-clear:hover { color: var(--t); background: var(--b); } .suche-clear svg { width: 16px; height: 16px; } .suche-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 24px; } .suche-count { font-size: 12px; color: var(--t4); font-style: italic; } .suche-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 16px; } .suche-empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c2); color: var(--t4); margin-bottom: 6px; } .suche-empty-icon svg { width: 24px; height: 24px; } .suche-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--t); } .suche-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--t2); max-width: 320px; } @media (max-width: 640px) { .bub-head { padding: 4px 0 12px; } .bub-head h2 { font-size: 17px; } .bub-head p { font-size: 12px; } .bub-chip { padding: 2px 9px; font-size: 11px; } .feed-end { padding: 36px 20px; } .feed-end-title { font-size: 18px; } .feed-end-subtitle { font-size: 14px; } } /* ── Meine Pläne Page (SF5 Phase 1) ── */ .plans-header { margin-bottom: 16px; } .plans-tabs { display: flex; gap: 4px; background: var(--surface); border-radius: var(--r); padding: 4px; margin-bottom: 12px; } .plans-tab { flex: 1; padding: 10px 12px; border: none; border-radius: calc(var(--r) - 4px); background: transparent; color: var(--t2); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-family: var(--font-heading); } .plans-tab:hover { color: var(--t); background: rgba(0,0,0,0.04); } .plans-tab--active { background: var(--bg); color: var(--t); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .plans-tab-count { font-size: 11px; background: var(--border); color: var(--t2); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; font-weight: 700; } .plans-tab--active .plans-tab-count { background: var(--accent-soft); color: var(--a); } .plans-summary { padding: 10px 14px; background: var(--accent-soft); border-radius: var(--r); font-size: var(--text-sm); color: var(--a); font-weight: 500; margin-bottom: 8px; } .plans-content { min-height: 200px; } /* Plans event card */ .plans-event-card { display: flex; gap: 14px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; transition: all 0.2s ease; cursor: default; } .plans-event-card:hover { border-color: var(--a); box-shadow: var(--shadow); } .plans-event-card:active { transform: scale(0.99); } .pec-left { display: flex; gap: 12px; align-items: center; cursor: pointer; flex-shrink: 0; } .pec-date { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border); } .pec-date--committed { background: var(--green-soft); border-color: var(--green); } .pec-date--past { background: var(--surface); opacity: 0.6; } .pec-day { font-size: 18px; font-weight: 800; line-height: 1; color: var(--t); } .pec-month { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--t2); margin-top: 2px; } /* P2-243: pec-info moved to the card end (JS renderers) so titles always start at the same x — after the fixed-width date block. Right-aligned at the card edge. Clickable (own openModal handler, P2-243). */ .pec-info { display: flex; flex-direction: column; gap: 2px; align-self: center; text-align: right; flex-shrink: 0; cursor: pointer; } .pec-cat { font-size: 12px; font-weight: 600; color: var(--t2); } .pec-time { font-size: 11px; color: var(--t3); } .pec-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pec-title { font-size: var(--text-base); font-weight: 700; color: var(--t); margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pec-location { font-size: var(--text-xs); color: var(--t2); display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pec-location i { width: 12px; height: 12px; flex-shrink: 0; } /* Bald marker */ .plans-event--bald { border-left: 3px solid var(--amber); } .pec-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; } .pec-badge--bald { background: var(--amber-soft); color: var(--amber); } .pec-badge--conflict { background: var(--red-soft); color: var(--red); } /* Conflict warning */ .plans-event--conflict { border-left: 3px solid var(--red); } /* Signal text */ .pec-signal { font-size: 12px; color: var(--a); font-weight: 500; display: flex; align-items: center; gap: 4px; } /* Soziale Schicht: social signal bubble */ .pec-social-signal { font-size: 12px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 4px; background: var(--green-soft); border-radius: 999px; padding: 2px 8px; width: fit-content; } /* Kollision warning with specific event title */ .pec-collision { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; background: var(--red-soft); color: var(--red); cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Social memory */ .pec-social-memory { font-size: 12px; color: var(--t2); font-style: italic; } /* Bridge button */ .pec-bridge { font-size: 12px; font-weight: 600; color: var(--a); background: var(--accent-soft); border: 1px solid transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: all 0.15s ease; width: fit-content; margin-top: 4px; } .pec-bridge:hover { border-color: var(--a); background: var(--bg); } .pec-bridge:active { transform: scale(0.95); } /* Past tab header */ .plans-past-header { padding: 12px 14px; background: linear-gradient(135deg, var(--purple-soft), var(--pink-soft)); border-radius: var(--r); font-size: var(--text-base); font-weight: 600; color: var(--purple); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .pph-emoji { font-size: 20px; } /* Empty state */ .plans-empty { text-align: center; padding: 40px 20px; } .pe-icon { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--t2); } .pe-icon i { width: 24px; height: 24px; } .plans-empty h3 { font-size: var(--text-lg); font-weight: 700; color: var(--t); margin: 0 0 8px; } .plans-empty p { font-size: var(--text-sm); color: var(--t2); margin: 0 0 20px; line-height: 1.5; } .plans-empty .lb { padding: 10px 20px; } /* Past event card styling */ .plans-event--past { opacity: 0.85; } .plans-event--past:hover { opacity: 1; } @media (max-width: 640px) { .plans-tab { padding: 8px 6px; font-size: 12px; min-height: 40px; } .plans-tab-count { font-size: 10px; padding: 0 5px; } .plans-event-card { padding: 12px; gap: 10px; } .pec-date { width: 42px; height: 42px; border-radius: 10px; } .pec-day { font-size: 16px; } .pec-title { font-size: 14px; } } /* ── Friends Redesign: Tab-basierte Struktur ── */ .fr-page { } .fr-tabs { display: flex; gap: 4px; background: var(--surface); border-radius: var(--r); padding: 4px; } .fr-tab { flex: 1; padding: 10px 12px; border: none; border-radius: calc(var(--r) - 4px); background: transparent; color: var(--t2); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-family: var(--font-heading); } .fr-tab:hover:not(.act) { color: var(--t); background: rgba(0,0,0,0.04); } .fr-tab.act { background: var(--bg); color: var(--t); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .fr-tab-content { width: 100%; } .fr-search-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .fr-search-input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); padding: 0 14px; font-size: 15px; color: var(--text); outline: none; transition: border-color 0.2s; } .fr-search-input:focus { border-color: var(--accent); } .fr-result-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .fr-result-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--color-inverse); flex-shrink: 0; } .fr-result-name { font-weight: 700; font-size: 14px; color: var(--text); } .fr-result-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .fr-result-badge.friend { background: rgba(16, 185, 129, 0.15); color: var(--g); } .fr-result-badge.not-circle { background: rgba(107, 114, 128, 0.15); color: var(--t4); } .fr-result-badge.pending { background: var(--today-soft); color: var(--today); } .fr-btn-sent { opacity: 0.55; cursor: default; } .fr-result-actions { display: flex; gap: 6px; flex-shrink: 0; } .fr-result-actions button { height: 36px; min-width: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; } .fr-result-actions button:active { transform: scale(0.95); } .fr-result-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .fr-result-actions button:disabled { opacity: 0.4; cursor: not-allowed; } .fr-friend-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .fr-friend-strength { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .fr-activity-item { background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; } .fr-activity-event { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; } .fr-activity-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .fr-activity-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fr-activity-chip { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; padding: 4px 10px 4px 4px; font-size: 12px; color: var(--text); } .fr-activity-chip.declined { opacity: 0.6; } .fr-activity-chip-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--color-inverse); } .fr-empty { text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14px; } .fr-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; display: flex; justify-content: center; } /* Lucide SVGs inside empty-state icons (P2-241): size to the old emoji size */ .fr-empty-icon svg { width: 40px; height: 40px; stroke-width: 1.5; } .fr-empty-title { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 6px; } .fr-empty-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .fr-empty-cta { display: flex; gap: 8px; justify-content: center; } .fr-empty-cta button { height: 40px; padding: 0 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; } .fr-empty-cta button.primary { background: var(--accent); color: #fff; } .fr-empty-cta button.secondary { background: transparent; color: var(--t2); border: 1px solid var(--border); } .fr-action-bar { position: sticky; bottom: 0; left: 0; right: 0; background: var(--bg); padding: 12px 16px; border-top: 1px solid var(--b); display: flex; gap: 8px; z-index: 10; } .fr-action-btn { flex: 1; height: 44px; border-radius: 12px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .fr-action-btn.primary { background: var(--accent); color: #fff; } .fr-action-btn.secondary { background: transparent; color: var(--t2); border: 1px solid var(--border); } /* ── Profile Modal ── */ .prof-modal-body { text-align: center; padding: 24px 16px; } .prof-modal-avatar { margin-bottom: 16px; } .prof-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; } .prof-avatar-fallback { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; color: var(--t); border: 2px solid var(--border); } .prof-modal-info h2 { font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--t); } .fr-stat { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--t2); margin-top: 8px; } /* ── QR Code Modal ── */ .qr-modal-body { text-align: center; padding: 24px 16px; } .qr-code-wrapper { display: inline-block; background: #fff; padding: 12px; border-radius: 8px; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .qr-svg { display: block; background: var(--qr-bg); border-radius: 4px; } .qr-svg rect { fill: var(--qr-fg); } .qr-scan-body { text-align: center; padding: 20px 16px; } #qrVideoContainer { display: inline-block; background: #000; border-radius: 12px; overflow: hidden; } #qrVideo { width: 280px; height: 280px; object-fit: cover; display: block; } .qr-scan-canvas { display: none; } .qr-scan-prompt { margin-top: 12px; color: var(--t2); font-size: 13px; } .qr-scan-hint { margin-top: 12px; color: var(--t2); font-size: 13px; } .qr-token-desc { margin: 0 0 12px; color: var(--t2); font-size: 13px; } .qr-token-input { width: 100%; box-sizing: border-box; margin-bottom: 16px; } .qr-token-send { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .qr-token-send:active { transform: scale(0.97); } .qr-loading .spinner { border: 3px solid var(--b); border-top: 3px solid var(--accent); border-radius: 50%; width: 32px; height: 32px; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Friend Request Cards ── */ .fr-requests-list { margin-bottom: 16px; } .fr-request-card { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--b); } .fr-request-header { display: flex; align-items: center; gap: 10px; flex: 1; } .fr-request-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .fr-request-info { flex: 1; } .fr-request-name { font-size: 14px; font-weight: 500; color: var(--t); } .fr-request-time { font-size: 11px; color: var(--t2); } .fr-request-actions { display: flex; gap: 6px; } .fr-req-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--b); font-size: 13px; cursor: pointer; } .fr-req-accept { background: var(--accent); color: #fff; border-color: var(--accent); } .fr-req-decline { background: transparent; color: var(--t2); } .fr-requests-empty { text-align: center; padding: 24px 16px; } .fr-circle-header { margin-bottom: 8px; } /* ── Privacy Settings Form ── */ .privacy-form { padding: 16px; } .privacy-group { margin-bottom: 20px; } .privacy-group:last-child { margin-bottom: 0; } .privacy-label { display: block; font-size: 14px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .privacy-desc { margin: 4px 0 8px; } .switch { position: relative; display: inline-block; width: 40px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--b); border-radius: 22px; transition: 0.2s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; border-radius: 50%; background: var(--t2); transition: 0.2s; } input:checked + .slider { background: var(--accent); } input:checked + .slider:before { transform: translateX(18px); } /* ── Quiet icon button ── */ .quiet-icon-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--b); background: transparent; color: var(--t2); font-size: 13px; cursor: pointer; } .quiet-icon-btn:hover { background: var(--bh); } .quiet-icon-btn .qib-label { display: inline-block; } /* Feed Calendar Mode — Time-slot based feed layout */ .cal-day { position: relative; /* 2026-08-27: volle Containerbreite statt 12px-Innenkanten — Cards * in allen Feed-Ansichten (Feed/Timeline/Kalender) gleich breit. */ padding: 0 0 16px; margin-bottom: 24px; } /* Hide the timeline rail (dotted line + dot) on the calendar view */ .cal-day::before { display: none; } .cal-day .tl-head::before { display: none; } /* Day header (weekday + date) — spans full width */ .cal-day-header { z-index: 30; background: var(--bg); padding: 12px 4px 8px; margin-bottom: 12px; border-bottom: 1px solid var(--b); display: flex; align-items: center; gap: 10px; } /* The feed-calendar header shares its class with the SF4 calendar page, whose .cal-day-header rule above docks sticky below the app bar. In this view it must behave like the timeline's .tl-head (SOT): pinned to the very top (top: 0 — not under the scroll-to-top arrow) with the same soft gradient backdrop and no hard bottom line. */ .cal-day .cal-day-header { position: sticky; top: 0; z-index: 10; margin-bottom: 0; padding: 12px 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, transparent 100%); border-bottom: none; } .cal-day-pill { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } /* 13px/700 — identical to the timeline's .tl-date (SOT). */ .cal-day-date { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--t); white-space: nowrap; } /* Calendar timeline container */ .cal-timeline { display: flex; flex-direction: column; gap: 20px; } /* Time row: time label + events side by side */ .cal-time-row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; } /* Time label on the left */ .cal-time-label { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; text-align: right; padding-top: 4px; white-space: nowrap; background: var(--bg); padding-left: 4px; } /* All-day label: muted color, NOT italic (upright like the time labels) */ .cal-time-label--all-day { font-style: normal; font-weight: 600; color: var(--t4); font-variant-numeric: normal; } /* Events container: cards side by side (narrow cards → multiple per row) */ .cal-time-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; min-width: 0; } /* Card wrapper in the timeline */ .cal-event-card { min-width: 0; } /* Cards in the calendar: remove bottom margin (grid gap handles spacing) */ .cal-event-card > .ecs, .cal-event-card > .ecm, .cal-event-card > .po.ncard-lg { margin-bottom: 0; } /* Ensure cards fill their grid cell nicely */ .cal-event-card > .ecs { max-width: 100%; } /* Compact description in side-by-side calendar cards (full text in the modal) */ .cal-event-card .ecs-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Responsive: single column on narrow screens */ @media (max-width: 640px) { .cal-day { padding: 0 8px 12px 8px; margin-bottom: 16px; } .cal-day .tl-head { padding: 10px 2px 6px; margin-bottom: 8px; } .cal-time-row { grid-template-columns: 1fr; gap: 6px; } .cal-time-label { text-align: left; font-size: 13px; padding: 0 0 4px 0; position: static; background: none; } /* Two cards side by side on phones (compact, action-less cards) */ .cal-time-events { grid-template-columns: repeat(2, 1fr); gap: 8px; } .cal-timeline { gap: 16px; } } /* ── Laufende-Ausstellungen-Rail (features/15.md B1, 2026-08-24) ── Horizontal lane above the timeline: long-running exhibitions rank by remaining time and live in their own rail instead of competing with one-day events in the daily feed. */ .expo-rail { margin: 4px 0 18px; } .expo-rail-head { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--t); } .expo-rail-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .expo-card { flex: 0 0 200px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--b); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .expo-card:hover, .expo-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); outline: none; } .expo-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .expo-card-fb { display: flex; align-items: center; justify-content: center; background: var(--c2); font-size: 28px; } .expo-card-body { padding: 8px 10px 10px; } .expo-card-title { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; } .expo-card-sub { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); min-width: 0; } .expo-chip { background: rgba(124, 58, 237, 0.1); color: #7c3aed; font-weight: 700; padding: 2px 8px; border-radius: var(--ec-pill-radius); white-space: nowrap; } .expo-venue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Veranstalter-Profilseite (P1-251, 2026-08-28, DEC-2026-08-28-organizer-profil-follow) ── */ .org-profile { background: var(--surface-solid); border: 1px solid var(--b); border-radius: var(--r); padding: 20px 16px; margin-bottom: 8px; box-shadow: var(--shadow-sm); } .org-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .org-name { font-size: 22px; font-weight: 700; color: var(--t); margin: 0; line-height: 1.25; } .org-city { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t3); } .org-city i { width: 14px; height: 14px; } .org-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .org-followers { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t3); } .org-followers i { width: 14px; height: 14px; } .org-follow { display: inline-flex; align-items: center; gap: 6px; } .org-follow i { width: 14px; height: 14px; } .org-desc { font-size: 14px; line-height: 1.55; color: var(--t2); margin: 0 0 12px; } .org-field { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--t2); padding: 6px 0; } .org-field i { width: 14px; height: 14px; color: var(--t4); flex-shrink: 0; margin-top: 2px; } .org-field-label { color: var(--t4); font-weight: 500; flex-shrink: 0; } .org-website { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; } .org-website i { width: 13px; height: 13px; } .org-events-title { font-size: 16px; font-weight: 700; color: var(--t); margin: 20px 0 12px; } .org-empty { font-size: 14px; color: var(--t4); text-align: center; padding: 32px 0; } .org-loadmore-row { display: flex; justify-content: center; margin: 16px 0 24px; } .org-notfound { padding: 48px 16px; }