/* ============================================================================= mydsbowl-dashboard.css — Retheme-Layer für das eingebettete alte Dashboard Lädt NACH mydsbowl-page.css. Nur Farben/Hintergründe/Rahmen/Schatten/Font werden ans neue Design angepasst (dunkel + Gold #F2B01E, Poppins); Layout, Abstände und Mobile-Verhalten bleiben unveraendert. ============================================================================= */ /* ============================================================ MyDSBowl Dashboard — DARK + GOLD RETHEME LAYER Load AFTER mydsbowl-page.css. Scope: .page-mydsbowl (on ). Recolors only — layout/spacing/grids/breakpoints untouched. ============================================================ */ /* ---- 1. Tokens ---- */ .page-mydsbowl { --mdb-bg: #0A0E1A; --mdb-surface: #121829; --mdb-surface-2: #1A2236; --mdb-surface-3: #232C44; --mdb-gold: #F2B01E; --mdb-gold-soft: #FFD27A; --mdb-grad: linear-gradient(135deg, #FFD27A 0%, #F2B01E 55%, #C9881A 100%); --mdb-text: #FFFFFF; --mdb-text-dim: rgba(255, 255, 255, 0.72); --mdb-text-mute: rgba(255, 255, 255, 0.50); --mdb-text-faint:rgba(255, 255, 255, 0.34); --mdb-border: rgba(255, 255, 255, 0.10); --mdb-border-2: rgba(255, 255, 255, 0.16); --mdb-gold-tint: rgba(242, 176, 30, 0.12); --mdb-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); --mdb-shadow-hover: 0 16px 50px rgba(0, 0, 0, 0.60); --mdb-gold-glow: 0 8px 26px rgba(242, 176, 30, 0.32); /* Override originals so token-driven rules retone automatically */ --mydsbowl-pink: #F2B01E; --mydsbowl-orange: #FFD27A; --mydsbowl-purple: #C9881A; --mydsbowl-blue: #8A6A12; --mydsbowl-gradient: linear-gradient(135deg, #FFD27A 0%, #F2B01E 55%, #C9881A 100%); --mydsbowl-dark: #FFFFFF; --mydsbowl-light: #1A2236; --mydsbowl-card-bg: #121829; --mydsbowl-glass: rgba(255, 255, 255, 0.06); --mydsbowl-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); --mydsbowl-shadow-hover: 0 16px 50px rgba(0, 0, 0, 0.60); background-color: var(--mdb-bg); color: var(--mdb-text); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .page-mydsbowl .mydsbowl-user-view, .page-mydsbowl .mydsbowl-main { color: var(--mdb-text); } .page-mydsbowl .gradient-text { background: var(--mdb-grad); } /* ---- 2. Header / user bar ---- */ .page-mydsbowl .mydsbowl-welcome { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-username { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-user-avatar { border-color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-icon-btn { background: var(--mdb-surface); border: 1px solid var(--mdb-border); box-shadow: var(--mdb-shadow); } .page-mydsbowl .mydsbowl-icon-btn i { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-icon-btn:hover { box-shadow: var(--mdb-shadow-hover); } .page-mydsbowl .mydsbowl-icon-btn:hover i { color: var(--mdb-gold); } /* ---- 3. Cards / sections ---- */ .page-mydsbowl .mydsbowl-points-card, .page-mydsbowl .mydsbowl-section, .page-mydsbowl .mydsbowl-mobile-actions, .page-mydsbowl .mydsbowl-stamps-section, .page-mydsbowl .mydsbowl-bonus-section, .page-mydsbowl .mydsbowl-activities-section { background: var(--mdb-surface); border: 1px solid var(--mdb-border); box-shadow: var(--mdb-shadow); } .page-mydsbowl .mydsbowl-activities-section { background: linear-gradient(135deg, var(--mdb-surface) 0%, var(--mdb-surface-2) 100%); } .page-mydsbowl .mydsbowl-points-label, .page-mydsbowl .mydsbowl-points-hint, .page-mydsbowl .mydsbowl-section-hint, .page-mydsbowl .mydsbowl-activities-info { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-points-value { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-section-header h3, .page-mydsbowl .mydsbowl-stamps-section h3, .page-mydsbowl .mydsbowl-bonus-section h3 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-stamps-section h3 i, .page-mydsbowl .mydsbowl-bonus-section h3 i, .page-mydsbowl .mydsbowl-activities-section h3 i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-points-icon i { color: var(--mdb-gold); } /* ---- 4. Progress bars ---- */ .page-mydsbowl .mydsbowl-milestone-bar, .page-mydsbowl .stamp-track, .page-mydsbowl .mydsbowl-stats-bar, .page-mydsbowl .mydsbowl-rank-progress-bar, .page-mydsbowl .source-bar-container { background: rgba(255, 255, 255, 0.10); } .page-mydsbowl .mydsbowl-milestone-fill, .page-mydsbowl .stamp-fill, .page-mydsbowl .mydsbowl-rank-progress-fill, .page-mydsbowl .chart-bar-fill { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-milestone-labels { color: var(--mdb-text-faint); } /* ---- 5. Buttons / pills ---- */ .page-mydsbowl .mydsbowl-action-btn.primary, .page-mydsbowl .mydsbowl-submit-btn, .page-mydsbowl .mydsbowl-btn-primary, .page-mydsbowl .mydsbowl-bonus-btn { background: var(--mdb-grad); color: #1A1206; font-weight: 700; } .page-mydsbowl .mydsbowl-action-btn.primary:hover, .page-mydsbowl .mydsbowl-submit-btn:hover, .page-mydsbowl .mydsbowl-btn-primary:hover, .page-mydsbowl .mydsbowl-bonus-btn:hover { box-shadow: var(--mdb-gold-glow); } .page-mydsbowl .mydsbowl-action-btn.secondary { background: transparent; border: 2px solid var(--mdb-border-2); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-action-btn.secondary:hover { border-color: var(--mdb-gold); color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-toggle-btn { background: var(--mdb-surface-2); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-toggle-btn:hover { background: var(--mdb-surface-3); } .page-mydsbowl .mydsbowl-toggle-btn.active { background: var(--mdb-gold); color: #1A1206; } .page-mydsbowl .mydsbowl-upload-btn { background: var(--mdb-surface-2); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-upload-btn:hover { background: var(--mdb-surface-3); } .page-mydsbowl .mydsbowl-bonus-btn-outline { border: 2px solid var(--mdb-gold); color: var(--mdb-gold); background: transparent; } .page-mydsbowl .mydsbowl-bonus-btn-outline:hover { background: var(--mdb-gold); color: #1A1206; } .page-mydsbowl .mydsbowl-bonus-btn-outline:disabled, .page-mydsbowl .mydsbowl-bonus-btn:disabled { border-color: var(--mdb-border-2); color: var(--mdb-text-faint); background: transparent; box-shadow: none; } /* ---- 6. Slider + cards ---- */ .page-mydsbowl .mydsbowl-slider-arrow { background: var(--mdb-surface); border: 1px solid var(--mdb-border); color: var(--mdb-text-dim); box-shadow: var(--mdb-shadow); } .page-mydsbowl .mydsbowl-slider-arrow:hover { background: var(--mdb-gold); color: #1A1206; } .page-mydsbowl .mydsbowl-slider-dots .dot { background: rgba(255, 255, 255, 0.20); } .page-mydsbowl .mydsbowl-slider-dots .dot.active { background: var(--mdb-gold); } .page-mydsbowl .mydsbowl-card { background: var(--mdb-surface-2); border: 1px solid var(--mdb-border); } .page-mydsbowl .mydsbowl-card img { background: #fff; } .page-mydsbowl .mydsbowl-card-title { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-card-subtitle { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-card-desc { color: var(--mdb-text-mute); } /* ---- 7. Rewards ---- */ .page-mydsbowl .mydsbowl-reward-card { background: var(--mdb-surface-2); border: 1px solid var(--mdb-border); } .page-mydsbowl .mydsbowl-reward-card img { background: #fff; } .page-mydsbowl .mydsbowl-reward-card h4 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-reward-card .points { color: var(--mdb-gold); } /* ---- 8. Stempelkarte ---- */ .page-mydsbowl .mydsbowl-stamp { background: var(--mdb-surface-2); border: 2px dashed var(--mdb-border-2); } .page-mydsbowl .mydsbowl-stamp i { color: var(--mdb-text-faint); } .page-mydsbowl .mydsbowl-stamp.filled { background: var(--mdb-grad); border: none; box-shadow: var(--mdb-gold-glow); } .page-mydsbowl .mydsbowl-stamp.filled i { color: #1A1206; } .page-mydsbowl .mydsbowl-stamps-progress { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-stamps-progress span { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-stamp-reward { background: var(--mdb-gold-tint); border: 2px dashed rgba(242, 176, 30, 0.45); } .page-mydsbowl .mydsbowl-stamp-reward i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-stamp-reward span { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-stamp-reward.unlocked { background: var(--mdb-grad); border: none; box-shadow: var(--mdb-gold-glow); } .page-mydsbowl .mydsbowl-stamp-reward.unlocked i, .page-mydsbowl .mydsbowl-stamp-reward.unlocked span { color: #1A1206; } /* ---- 9. Bonus ---- */ .page-mydsbowl .mydsbowl-bonus-card { background: var(--mdb-surface-2); border: 1px solid var(--mdb-border); } .page-mydsbowl .mydsbowl-bonus-card:hover { box-shadow: var(--mdb-shadow-hover); } .page-mydsbowl .mydsbowl-bonus-icon { background: var(--mdb-gold-tint); } .page-mydsbowl .mydsbowl-bonus-icon i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-bonus-card h4 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-bonus-desc { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-bonus-points { color: var(--mdb-gold-soft); } /* ---- 10. Activities ---- */ .page-mydsbowl .mydsbowl-activity-card { background: var(--mdb-surface-2); border: 1px solid var(--mdb-border); } .page-mydsbowl .mydsbowl-activity-card:hover { box-shadow: var(--mdb-shadow); } .page-mydsbowl .mydsbowl-activity-icon { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-activity-icon i { color: #1A1206; } .page-mydsbowl .mydsbowl-activity-info h4 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-activity-info p { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-activity-btn { background: var(--mdb-surface-3); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-activity-btn:hover { background: var(--mdb-gold); color: #1A1206; } /* ---- 11. Mobile action bar ---- */ .page-mydsbowl .mydsbowl-mobile-action-item { background: var(--mdb-surface-2); } .page-mydsbowl .mydsbowl-mobile-action-item i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-mobile-action-item span { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-mobile-action-item:active, .page-mydsbowl .mydsbowl-mobile-action-item.touch-active { background: var(--mdb-gold); } .page-mydsbowl .mydsbowl-mobile-action-item:active i, .page-mydsbowl .mydsbowl-mobile-action-item.touch-active i, .page-mydsbowl .mydsbowl-mobile-action-item:active span, .page-mydsbowl .mydsbowl-mobile-action-item.touch-active span { color: #1A1206; } /* ---- 12. Check-in banner ---- */ .page-mydsbowl .mydsbowl-checkin-section { background: linear-gradient(135deg, #2A1E05 0%, var(--mdb-surface) 100%); border: 1px solid rgba(242, 176, 30, 0.30); color: var(--mdb-text); } .page-mydsbowl .mydsbowl-checkin-icon { background: var(--mdb-gold-tint); } .page-mydsbowl .mydsbowl-checkin-icon i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-checkin-info h4 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-checkin-info p { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-checkin-btn { background: var(--mdb-grad); color: #1A1206; } /* ---- 13. Modals ---- */ .page-mydsbowl .mydsbowl-modal { background: rgba(4, 6, 12, 0.72); } .page-mydsbowl .mydsbowl-modal-content, .page-mydsbowl #detail-modal .mydsbowl-modal-content, .page-mydsbowl .mydsbowl-rankup-content, .page-mydsbowl .mydsbowl-permission-content { background: var(--mdb-surface); border: 1px solid var(--mdb-border); color: var(--mdb-text); box-shadow: var(--mdb-shadow-hover); } .page-mydsbowl .mydsbowl-modal-content h2, .page-mydsbowl .mydsbowl-permission-content h3 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-permission-content p, .page-mydsbowl .mydsbowl-rankup-subtitle, .page-mydsbowl .mydsbowl-rankup-benefits { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-modal-content img, .page-mydsbowl #detail-modal .mydsbowl-modal-content img { background: #fff; } .page-mydsbowl .mydsbowl-modal-close { background: var(--mdb-surface-3); } .page-mydsbowl .mydsbowl-modal-close:hover { background: var(--mdb-gold); } .page-mydsbowl .mydsbowl-modal-close i { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-modal-close:hover i { color: #1A1206; } .page-mydsbowl .mydsbowl-code-display { background: var(--mdb-surface-2); border: 2px dashed var(--mdb-border-2); color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-code-hint { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-mycode-icon { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-mycode-icon i { color: #1A1206; } .page-mydsbowl .mydsbowl-detail-conditions { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-rankup-title { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-rankup-benefits i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-permission-icon, .page-mydsbowl .mydsbowl-points-icon-big { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-permission-icon i, .page-mydsbowl .mydsbowl-points-icon-big i { color: #1A1206; } .page-mydsbowl .mydsbowl-points-overlay, .page-mydsbowl .mydsbowl-rankup-modal, .page-mydsbowl .mydsbowl-permission-modal { background: rgba(4, 6, 12, 0.80); } .page-mydsbowl .mydsbowl-points-reason { color: var(--mdb-text-dim); } /* ---- 14. History ---- */ .page-mydsbowl .mydsbowl-history-item { background: var(--mdb-surface-2); } .page-mydsbowl .mydsbowl-history-title { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-history-subtitle { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-history-date { color: var(--mdb-text-faint); } .page-mydsbowl .mydsbowl-history-points.positive { background: rgba(76, 175, 80, 0.16); color: #6CD47A; } .page-mydsbowl .mydsbowl-history-points.negative { background: rgba(244, 67, 54, 0.16); color: #FF7A6E; } /* ---- 15. Statistics ---- */ .page-mydsbowl .mydsbowl-stat-card { background: var(--mdb-surface-2); } .page-mydsbowl .mydsbowl-stat-card .stat-value { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-stat-card .stat-label { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-stat-card .stat-icon.earned { color: #6CD47A; } .page-mydsbowl .mydsbowl-stat-card .stat-icon.spent { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-stat-card .stat-icon.rewards { color: var(--mdb-gold-soft); } .page-mydsbowl .mydsbowl-stat-card .stat-icon.advantages { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-stats-bar-container h3, .page-mydsbowl .mydsbowl-chart-section h3 { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-chart-section { border-top-color: var(--mdb-border); } .page-mydsbowl .mydsbowl-stats-bar .bar-spent { background: var(--mdb-grad); } .page-mydsbowl .mydsbowl-stats-legend .legend-item { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-stats-legend .legend-dot.spent { background: var(--mdb-gold); } .page-mydsbowl .chart-bar-value, .page-mydsbowl .chart-bar-label, .page-mydsbowl .prognose-label, .page-mydsbowl .source-value { color: var(--mdb-text-mute); } .page-mydsbowl .source-name { color: var(--mdb-text-dim); } .page-mydsbowl .source-bar-container { background: rgba(255, 255, 255, 0.08); } .page-mydsbowl .no-data { color: var(--mdb-text-faint); } .page-mydsbowl .mydsbowl-prognose-section { background: var(--mdb-gold-tint); border: 1px solid rgba(242, 176, 30, 0.22); } .page-mydsbowl .mydsbowl-prognose-section h3 { color: var(--mdb-gold); } .page-mydsbowl .prognose-value { color: var(--mdb-text); } .page-mydsbowl .prognose-next-rank { background: var(--mdb-surface-2); color: var(--mdb-text-dim); } .page-mydsbowl .prognose-next-rank i { color: var(--mdb-gold); } .page-mydsbowl .prognose-next-rank.max-rank { background: var(--mdb-grad); color: #1A1206; } .page-mydsbowl .prognose-next-rank.max-rank i { color: #1A1206; } /* ---- 16. Settings / legal / danger ---- */ .page-mydsbowl .mydsbowl-settings-section { border-bottom-color: var(--mdb-border); } .page-mydsbowl .mydsbowl-settings-section h4 { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-settings-section h4 i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-settings-btn { background: var(--mdb-surface-2); border: 1px solid var(--mdb-border); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-settings-btn:hover { background: var(--mdb-surface-3); } .page-mydsbowl .mydsbowl-settings-btn i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-settings-hint, .page-mydsbowl .mydsbowl-profile-upload p, .page-mydsbowl #file-chosen { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-legal-link { background: var(--mdb-surface-2); color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-legal-link:hover { background: var(--mdb-surface-3); } .page-mydsbowl .mydsbowl-legal-link i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-danger-zone { background: rgba(244, 67, 54, 0.10); } .page-mydsbowl .tier-benefit { background: var(--mdb-surface-3); color: var(--mdb-text-mute); } /* ---- 17. Form inputs ---- */ .page-mydsbowl .mydsbowl-form-group input { background: var(--mdb-surface-2); border: 2px solid var(--mdb-border-2); color: var(--mdb-text); font-family: inherit; } .page-mydsbowl .mydsbowl-form-group input:focus { border-color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-form-group label { color: var(--mdb-text-mute); background: var(--mdb-surface-2); } .page-mydsbowl .mydsbowl-form-group input:focus + label, .page-mydsbowl .mydsbowl-form-group input:not(:placeholder-shown) + label { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-checkbox { color: var(--mdb-text-dim); } .page-mydsbowl .mydsbowl-checkbox .checkmark { border-color: var(--mdb-border-2); } .page-mydsbowl .mydsbowl-checkbox input:checked + .checkmark { background: var(--mdb-gold); border-color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-checkbox input:checked + .checkmark::after { color: #1A1206; } /* ---- 18. Rank badges / modal ---- */ .page-mydsbowl .mydsbowl-rank-label, .page-mydsbowl .mydsbowl-rank-badge { background: var(--mdb-surface-3); color: var(--mdb-text); box-shadow: var(--mdb-shadow); } .page-mydsbowl .mydsbowl-rank-progress-text, .page-mydsbowl .mydsbowl-rank-multiplier { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-rank-multiplier i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-rank-modal-header, .page-mydsbowl .mydsbowl-rank-tiers { border-color: var(--mdb-border); } .page-mydsbowl .mydsbowl-rank-modal-icon, .page-mydsbowl .mydsbowl-rank-modal-badge { background: var(--mdb-grad); color: #1A1206; } .page-mydsbowl .mydsbowl-rank-modal-icon i { color: #1A1206; } .page-mydsbowl .mydsbowl-rank-multiplier-display, .page-mydsbowl .mydsbowl-rank-benefits-display { background: var(--mdb-gold-tint); color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-rank-tiers h4 { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-rank-tier { background: rgba(255, 255, 255, 0.03); } .page-mydsbowl .mydsbowl-rank-tier.current { background: var(--mdb-gold-tint); border: 2px solid var(--mdb-gold); } .page-mydsbowl .mydsbowl-rank-tier-info .tier-name { color: var(--mdb-text); } .page-mydsbowl .mydsbowl-rank-tier-info .tier-points { color: var(--mdb-text-mute); } .page-mydsbowl .mydsbowl-rank-tier .tier-multiplier { color: var(--mdb-gold); } /* ---- 19. Loading overlay ---- */ .page-mydsbowl .mydsbowl-loading { background: rgba(10, 14, 26, 0.94); } .page-mydsbowl .mydsbowl-loading-spinner i { color: var(--mdb-gold); } .page-mydsbowl .mydsbowl-loading p { color: var(--mdb-text-dim); } /* ---- 20. Slider scrollbar polish ---- */ .page-mydsbowl .mydsbowl-slider { scrollbar-color: var(--mdb-gold) transparent; } /* ============================================================ MANUELLE NACHBESSERUNGEN (Julian-Feedback) ============================================================ */ /* 1) Punkte-Icon: voller Bowlingball statt Gold-Quadrat (background-clip:text raus) */ .page-mydsbowl .mydsbowl-points-icon i, .page-mydsbowl .mydsbowl-points-icon i.gradient-text{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:var(--mdb-gold) !important; color:var(--mdb-gold) !important; } /* 2) Modale: zuverlässig scrollbar, passt IMMER unter den Header */ .page-mydsbowl .mydsbowl-modal{ padding:16px; align-items:center; } .page-mydsbowl .mydsbowl-modal-content{ max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } @media (max-width:760px){ /* Bottom-Sheet: beginnt unter dem Header, füllt die SICHTBARE Höhe (100dvh), scrollt intern. Behebt „Modal größer als der Bildschirm / unter dem Header / nicht scrollbar". */ .page-mydsbowl .mydsbowl-modal{ align-items:flex-end; justify-content:center; padding:0; } .page-mydsbowl .mydsbowl-modal-content, .page-mydsbowl .mydsbowl-modal-large{ width:100%; max-width:none; max-height:calc(90vh - var(--nav-h, 66px)); max-height:calc(100dvh - var(--nav-h, 66px) - 10px); border-radius:24px 24px 0 0; padding:26px 20px calc(env(safe-area-inset-bottom) + 26px); overflow-y:auto; -webkit-overflow-scrolling:touch; } .page-mydsbowl .mydsbowl-modal-close{ top:14px; right:14px; } } /* 3) Bilder zentriert & vollständig sichtbar (Prämien / Vorteile / Deals) */ .page-mydsbowl .mydsbowl-reward-card img{ width:90px; height:90px; object-fit:contain; background:#fff; display:block; margin:0 auto 12px; padding:8px; border-radius:14px; } .page-mydsbowl .mydsbowl-card > img{ width:100%; height:158px; object-fit:cover; object-position:center; display:block; background:#0c0a16; }