/* ═══════════════════════════════════════════════════════ Veto Accessibility Mode — Senior-freundliche UI Wird aktiviert via ═══════════════════════════════════════════════════════ */ html.senior-mode { font-size: 18px !important; } html.senior-mode body { font-size: 18px; line-height: 1.6; letter-spacing: 0.01em; } /* Alle normalen Texte größer */ html.senior-mode p, html.senior-mode span, html.senior-mode div, html.senior-mode label, html.senior-mode li { font-size: inherit; } /* Headlines proportional größer */ html.senior-mode h1 { font-size: 2rem !important; } html.senior-mode h2 { font-size: 1.7rem !important; } html.senior-mode h3 { font-size: 1.4rem !important; } /* ── Buttons & Touch-Flächen ─────────────────────────── */ html.senior-mode button, html.senior-mode .btn, html.senior-mode [role="button"] { min-height: 52px !important; font-size: 16px !important; /* Kein padding override — verhindert Buttons die zu breit werden */ border-radius: 14px !important; } /* Bottom-Nav — nie überschreiben, passt immer auf Screen */ html.senior-mode .bnav-btn { min-height: unset !important; padding: 8px 12px !important; gap: 4px !important; border-radius: 0 !important; } html.senior-mode .bnav-icon { font-size: 24px !important; } html.senior-mode .bnav-label { font-size: 12px !important; } /* Swipe-Buttons (Like/Nope) */ html.senior-mode .action-btn { width: 68px !important; height: 68px !important; font-size: 28px !important; } /* ── Inputs ───────────────────────────────────────────── */ html.senior-mode input, html.senior-mode textarea, html.senior-mode select { font-size: 17px !important; min-height: 50px !important; border-radius: 14px !important; } /* ── Höherer Kontrast ─────────────────────────────────── */ html.senior-mode { --muted2: rgba(253,248,242,0.65) !important; } html.senior-mode .conv-item, html.senior-mode .match-card, html.senior-mode .profile-card { border: 1px solid rgba(255,255,255,0.12) !important; } /* Primärbutton deutlicherer Gradient */ html.senior-mode .btn-primary, html.senior-mode button[style*="gradient"] { background: linear-gradient(135deg, #e8445a, #ff6b35) !important; box-shadow: 0 4px 20px rgba(232,68,90,0.45) !important; } /* Chat-Nachrichten größer & kontrastreicher */ html.senior-mode .msg-bubble { font-size: 17px !important; padding: 13px 17px !important; line-height: 1.55 !important; } /* Badges deutlicher */ html.senior-mode .unread-badge, html.senior-mode .liked-badge, html.senior-mode #likedBadge { width: 22px !important; height: 22px !important; font-size: 13px !important; font-weight: 800 !important; } /* ── Weniger Animationen ─── */ html.senior-mode button, html.senior-mode .btn, html.senior-mode input, html.senior-mode select, html.senior-mode textarea, html.senior-mode .conv-item, html.senior-mode .card, html.senior-mode .modal, html.senior-mode .toast, html.senior-mode .sheet { transition-duration: 0.1s !important; animation-duration: 0.1s !important; } html.senior-mode #likedBadge, html.senior-mode .unread-badge, html.senior-mode [class*="badge"] { animation: none !important; } html.senior-mode .online-dot { animation-duration: 3s !important; } /* ── iOS Safe Area Fix im Senior-Modus ─────────────────── */ html.senior-mode body { /* Verhindert Overflow auf kleinen Screens */ overflow-x: hidden; } html.senior-mode .page, html.senior-mode .chat-page, html.senior-mode [class*="page"] { /* Stellt sicher dass kein Inhalt hinter Status-Bar verschwindet */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Scroll-Container nicht vergrößern */ html.senior-mode .conv-list, html.senior-mode .messages, html.senior-mode .cards-stack, html.senior-mode [class*="scroll"] { font-size: 17px; } /* ── Toggle-Button (sichtbar in Sucheinstellungen) ───── */ .senior-mode-toggle { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; } .senior-mode-toggle .toggle-info { display: flex; flex-direction: column; gap: 3px; } .senior-mode-toggle .toggle-title { font-size: 16px; font-weight: 600; color: #FDF8F2; } .senior-mode-toggle .toggle-sub { font-size: 13px; color: rgba(253,248,242,0.45); } .senior-toggle-switch { width: 52px; height: 30px; background: rgba(255,255,255,0.12); border-radius: 15px; position: relative; transition: background 0.25s; flex-shrink: 0; } .senior-toggle-switch::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform 0.25s; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .senior-toggle-switch.on { background: linear-gradient(135deg, #E8445A, #FF8C5A); } .senior-toggle-switch.on::after { transform: translateX(22px); } /* ── Viewport Fix: verhindert horizontales Scrollen auf iOS ── */ @media (max-width: 430px) { html.senior-mode button, html.senior-mode .btn { /* Buttons nie breiter als Bildschirm */ max-width: 100%; box-sizing: border-box; } html.senior-mode input, html.senior-mode textarea { max-width: 100%; box-sizing: border-box; } }