/* digi-gastro Global Premium Design System */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* Safe-Area Spacer — zuverlässigster Fix für PWA Notch/Status-Bar Wird als erstes Element im eingefügt, pusht alles unter die Statusleiste */ .safe-area-top-spacer { width: 100%; height: env(safe-area-inset-top, 0px); background: rgba(11, 12, 16, 0.95); flex-shrink: 0; position: relative; z-index: 60; } :root { /* Premium Dark Theme Color Palette */ --bg-obsidian: #050507; --bg-surface: #0b0c10; --bg-surface-elevated: #11131a; --bg-surface-overlay: #191c25; --border-subtle: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.12); --border-focus: rgba(201, 168, 76, 0.5); /* Gold focus */ /* Primary & Accents (Luxurious Gold) */ --color-primary: #C9A84C; /* Premium Gold */ --color-primary-hover: #A8872E; --color-primary-glow: rgba(201, 168, 76, 0.15); --color-accent-gold: #f59e0b; /* Golden Glow */ --color-accent-rose: #f43f5e; /* Rose Red */ --color-accent-indigo: #6366f1; /* Cool Indigo */ --text-on-surface: #f3f4f6; --text-on-surface-variant: #9ca3af; /* Font Families */ --font-display: 'Outfit', 'Inter', sans-serif; --font-sans: 'Inter', sans-serif; /* ── RGB triplets for Tailwind opacity modifiers (bg-surface/90 etc.) ── These mirror the hex values above and let Tailwind generate /30, /50, /90 etc. opacity-modified utility classes. DO NOT remove the original hex/rgba vars — they're still used by design_system.css and inline styles. These -rgb vars are ADDITIVE and only consumed by tailwind-built.css. */ --bg-obsidian-rgb: 5 5 7; --bg-surface-rgb: 11 12 16; --bg-surface-elevated-rgb: 17 19 26; --border-subtle-rgb: 255 255 255; /* base color; alpha applied via Tailwind */ --border-strong-rgb: 255 255 255; --color-primary-rgb: 201 168 76; --color-accent-gold-rgb: 245 158 11; --text-on-surface-rgb: 243 244 246; --text-on-surface-variant-rgb: 156 163 175; } /* Base Body Revamp */ body { background-color: var(--bg-obsidian); color: #f3f4f6; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elegant Custom Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-obsidian); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* Glassmorphism Panel styles */ .glass-panel { background: rgba(11, 12, 16, 0.65); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border-strong); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); } .glass-card { background: rgba(17, 19, 26, 0.55); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border-subtle); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .glass-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.6); } /* Accessibility & Contrast for Glassmorphism */ .glass-panel text, .glass-panel p, .glass-panel span, .glass-card text, .glass-card p, .glass-card span { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } html.dark .glass-panel, html.dark .glass-card { color: #ffffff; } html.light .glass-panel, html.light .glass-card { color: #111827; } /* Grid overlay background effect */ .grid-bg { background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 40px 40px; } /* Radial Glow Gradient background */ .radial-glow { background-image: radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%); } /* Glow Elements */ .glow-primary { box-shadow: 0 0 20px var(--color-primary-glow); } .glow-gold { box-shadow: 0 0 20px rgba(245, 158, 11, 0.15); } .glow-text-primary { text-shadow: 0 0 12px rgba(201, 168, 76, 0.4); } /* Premium Button Interaction */ .btn-premium { position: relative; font-family: var(--font-display); font-weight: 700; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .btn-premium:active { transform: scale(0.97); } /* Glassmorphism Buttons for Landing Page */ .landing-page-wrapper { color: #ffffff !important; } .landing-page-wrapper .text-on-surface-variant, .landing-page-wrapper .text-gray-200 { color: #e5e7eb !important; } .glass-btn-primary { background: rgba(201, 168, 76, 0.15) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(201, 168, 76, 0.4) !important; color: #EFD04D !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important; } .glass-btn-primary:hover { background: rgba(201, 168, 76, 0.25) !important; border-color: rgba(201, 168, 76, 0.6) !important; color: #fff !important; } .glass-btn-secondary { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #f3f4f6 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important; } .glass-btn-secondary:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #fff !important; } .btn-premium-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: #030712; box-shadow: 0 4px 14px 0 rgba(201, 168, 76, 0.25); } .btn-premium-primary:hover { box-shadow: 0 6px 20px 0 rgba(201, 168, 76, 0.4); filter: brightness(1.05); } .btn-premium-secondary { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); color: #f3f4f6; } .btn-premium-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); } /* Premium Inputs */ .input-premium { background: rgba(5, 5, 7, 0.6); border: 1px solid var(--border-subtle); color: #f3f4f6; border-radius: 12px; padding: 12px 16px; font-family: var(--font-sans); transition: all 0.2s ease; caret-color: #C9A84C; } .input-premium:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); outline: none; } /* Fix browser autofill overriding dark theme (Chrome/Edge/Safari) */ .input-premium:-webkit-autofill, .input-premium:-webkit-autofill:hover, .input-premium:-webkit-autofill:focus, .input-premium:-webkit-autofill:active, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #0b0c10 inset !important; box-shadow: 0 0 0 1000px #0b0c10 inset !important; -webkit-text-fill-color: #f3f4f6 !important; caret-color: #C9A84C !important; border-color: var(--border-subtle) !important; transition: background-color 600000s 0s, color 600000s 0s; } /* All inputs default dark text/background for non-autofill */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { color: #f3f4f6; background-color: rgba(5, 5, 7, 0.6); } /* Micro animations */ @keyframes pulse-status-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0); } } @keyframes pulse-status-amber { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } } @keyframes pulse-status-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); background-color: rgba(244, 63, 94, 0.2); } 50% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); background-color: rgba(244, 63, 94, 0.6); } } .pulse-green { animation: pulse-status-green 2s infinite; } .pulse-amber { animation: pulse-status-amber 2s infinite; } .pulse-red-card { animation: pulse-status-red 1.5s infinite; border-width: 1.5px !important; } /* Floating Lift effect */ .hover-lift { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease; } .hover-lift:hover { transform: translateY(-4px); border-color: var(--color-primary); } /* Shimmer Loading skeleton */ .shimmer { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-elevated) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: shimmer-animation 1.5s infinite; } @keyframes shimmer-animation { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Elegant categories scroll indicator */ .scroll-indicator::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, transparent, var(--bg-obsidian)); pointer-events: none; } /* Light background contrast overrides for standard inputs */ .bg-white input:not(.input-premium), .bg-white textarea:not(.input-premium), .bg-white select:not(.input-premium), [class*="bg-zinc-"] input:not(.input-premium), [class*="bg-gray-"] input:not(.input-premium), [class*="bg-slate-"] input:not(.input-premium) { color: #000000 !important; background-color: #ffffff !important; border-color: #d1d5db !important; } /* Fallback: if body itself is not dark, ensure inputs have dark text */ html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select { color: #000000 !important; } /* Disable double-tap zoom globally to ensure rapid, responsive clicks on all pages. Auf `*` statt auf body+interactive begrenzt — verhindert Pinch-Zoom nicht vollständig, aber double-tap zoom wird zuverlässig unterdrückt. Pinch-Zoom bleibt möglich (WCAG 1.4.4). */ *, *::before, *::after { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Light theme overrides */ html.light, body.light { --bg-obsidian: #f9fafb; --bg-surface: #ffffff; --bg-surface-elevated: #f3f4f6; --bg-surface-overlay: #e5e7eb; --border-subtle: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --color-primary: #A8872E; /* Darker gold for readability */ --color-primary-hover: #866A24; --color-primary-glow: rgba(168, 135, 46, 0.15); --text-on-surface: #111827; --text-on-surface-variant: #4b5563; /* RGB triplets for Tailwind opacity modifiers — light mode values */ --bg-obsidian-rgb: 249 250 251; --bg-surface-rgb: 255 255 255; --bg-surface-elevated-rgb: 243 244 246; --border-subtle-rgb: 0 0 0; --border-strong-rgb: 0 0 0; --color-primary-rgb: 168 135 46; --color-accent-gold-rgb: 245 158 11; --text-on-surface-rgb: 17 24 39; --text-on-surface-variant-rgb: 75 85 99; } html.light .grid-bg, body.light .grid-bg { background-image: none !important; } html.light .radial-glow, body.light .radial-glow { background-image: none !important; } html.light body, body.light { background-color: #ffffff !important; color: var(--text-on-surface) !important; } html.light .glass-panel, body.light .glass-panel { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(24px) saturate(200%) !important; -webkit-backdrop-filter: blur(24px) saturate(200%) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important; } html.light .glass-card, body.light .glass-card { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } html.light .glass-card:hover, body.light .glass-card:hover { border-color: var(--border-strong) !important; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08) !important; } html.light .input-premium, body.light .input-premium { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid var(--border-subtle) !important; color: #111827 !important; } html.light .btn-premium-secondary, body.light .btn-premium-secondary { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid var(--border-subtle) !important; color: #111827 !important; } html.light .btn-premium-secondary:hover, body.light .btn-premium-secondary:hover { background: rgba(0, 0, 0, 0.08) !important; border-color: var(--border-strong) !important; } /* Override text-white classes to make them readable on light background */ /* IMPORTANT: All selectors MUST exclude .landing-page-wrapper to keep landing text white */ html.light :not(.landing-page-wrapper) .text-white, body.light :not(.landing-page-wrapper) .text-white, html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #ffffff"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #ffffff"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#ffffff"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#ffffff"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #fff"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #fff"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#fff"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#fff"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: white"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: white"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:white"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:white"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: rgb(255, 255, 255)"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: rgb(255, 255, 255)"], html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:rgb(255, 255, 255)"], body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:rgb(255, 255, 255)"] { color: var(--text-on-surface) !important; } /* Ensure specific containers that explicitly have a colored background retain white text */ html.light .bg-rose-500, html.light .bg-rose-500 *, html.light .bg-red-500, html.light .bg-red-500 *, html.light .bg-green-500, html.light .bg-green-500 *, html.light .bg-emerald-500, html.light .bg-emerald-500 *, html.light .bg-gastro, html.light .bg-gastro *, html.light .bg-amber-600, html.light .bg-amber-600 *, html.light .bg-zinc-800, html.light .bg-zinc-800 *, html.light .bg-zinc-700, html.light .bg-zinc-700 *, html.light .bg-zinc-900, html.light .bg-zinc-900 *, html.light .bg-gray-800, html.light .bg-gray-800 *, html.light .bg-gray-900, html.light .bg-gray-900 * { color: #ffffff !important; } /* Popup headers always have dark gradient backgrounds — keep white text */ html.light .popup-header, html.light .popup-header *, html.light .popup-header [style*="color"], html.light .popup-header [style*="color:"] { color: #ffffff !important; } /* Table selection tiles always have dark background */ html.light .table-sel-tile, html.light .table-sel-tile * { color: #ffffff !important; } /* Colored buttons with inline style color:#fff must keep white text */ html.light [style*="background:#ef4444"], html.light [style*="background: #ef4444"], html.light button[style*="background:#ef4444"], html.light button[style*="background: #ef4444"] { color: #ffffff !important; } /* Sidebar profile card always has dark gradient background */ html.light .profile-card, html.light .profile-card * { color: #ffffff !important; } /* Admin dash-header is always light background, text stays dark — no override needed */ html.light .glass-btn-primary { background: rgba(201, 168, 76, 0.15) !important; border: 1px solid rgba(201, 168, 76, 0.5) !important; color: #866A24 !important; } html.light .glass-btn-primary:hover { background: rgba(201, 168, 76, 0.25) !important; color: #433512 !important; } html.light .glass-btn-secondary { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #111827 !important; } html.light .glass-btn-secondary:hover { background: rgba(0, 0, 0, 0.1) !important; border-color: rgba(0, 0, 0, 0.35) !important; } /* Re-adjust text gray elements to have enough contrast */ html.light :not(.landing-page-wrapper) .text-zinc-300, html.light :not(.landing-page-wrapper) .text-zinc-400, html.light :not(.landing-page-wrapper) .text-gray-400, html.light :not(.landing-page-wrapper) .text-slate-400, html.light :not(.landing-page-wrapper) .text-on-surface-variant { color: var(--text-on-surface-variant) !important; } /* Light text colors that are invisible on light backgrounds */ html.light :not(.landing-page-wrapper) .text-amber-200 { color: #92400e !important; /* amber-800 for readability */ } html.light :not(.landing-page-wrapper) .text-amber-400 { color: #b45309 !important; /* amber-700 */ } html.light :not(.landing-page-wrapper) .text-emerald-400 { color: #047857 !important; /* emerald-700 */ } /* ===== LANDING PAGE EXCEPTIONS — MUST be LAST to win specificity battles ===== */ /* Landingpage texts MUST remain white over the background slideshow in light mode */ /* Nuclear approach: force ALL children white, then add back gray exceptions */ /* Using id-level specificity hack (#id) to guarantee landing text always wins */ html.light .landing-page-wrapper, html.light .landing-page-wrapper#landing-page-wrapper, html.light .landing-page-wrapper.landing-page-wrapper *, html.dark .landing-page-wrapper, html.dark .landing-page-wrapper * { color: #ffffff !important; } /* Explicitly force all text-white/heading elements white in both modes */ html.light .landing-page-wrapper .text-white, html.light .landing-page-wrapper h1, html.light .landing-page-wrapper h2, html.light .landing-page-wrapper h3, html.light .landing-page-wrapper h4, html.light .landing-page-wrapper p, html.light .landing-page-wrapper span, html.light .landing-page-wrapper strong, html.light .landing-page-wrapper a:not(.glass-btn-primary):not(.glass-btn-secondary), html.light .landing-page-wrapper strong.text-on-surface, html.dark .landing-page-wrapper h1, html.dark .landing-page-wrapper h2, html.dark .landing-page-wrapper h3, html.dark .landing-page-wrapper h4, html.dark .landing-page-wrapper p, html.dark .landing-page-wrapper span, html.dark .landing-page-wrapper strong, html.dark .landing-page-wrapper .text-white { color: #ffffff !important; } /* Gray text exceptions — subtitles, descriptions should stay light gray for readability */ html.light .landing-page-wrapper .text-gray-200, html.light .landing-page-wrapper p.text-gray-200, html.light .landing-page-wrapper p.text-sm, html.dark .landing-page-wrapper .text-gray-200, html.dark .landing-page-wrapper p.text-gray-200 { color: #e5e7eb !important; } html.light .landing-page-wrapper .text-zinc-300, html.dark .landing-page-wrapper .text-zinc-300 { color: #d4d4d8 !important; } html.light .landing-page-wrapper .text-zinc-400, html.dark .landing-page-wrapper .text-zinc-400 { color: #a1a1aa !important; } html.light .landing-page-wrapper .text-on-surface-variant, html.dark .landing-page-wrapper .text-on-surface-variant { color: #d4d4d8 !important; } /* Amber text in Happy Hour card must stay amber */ html.light .landing-page-wrapper .text-amber-400, html.light .landing-page-wrapper .text-amber-300, html.dark .landing-page-wrapper .text-amber-400, html.dark .landing-page-wrapper .text-amber-300 { color: #fbbf24 !important; } /* Button text should keep its own colors */ html.light .landing-page-wrapper .glass-btn-primary, html.light .landing-page-wrapper .glass-btn-primary span { color: #866A24 !important; } html.light .landing-page-wrapper .glass-btn-secondary, html.light .landing-page-wrapper .glass-btn-secondary span { color: #ffffff !important; } html.dark .landing-page-wrapper .glass-btn-secondary, html.dark .landing-page-wrapper .glass-btn-secondary span { color: #ffffff !important; } /* SVG icons inside buttons keep their fill */ html.light .landing-page-wrapper svg path { color: inherit !important; } /* Google review stars SVG — keep original fill colors */ html.light .landing-page-wrapper svg { color: inherit !important; } /* ── ADMIN PANEL LIGHT MODE CONTRAST FIXES ── */ /* Admin sidebar profile card always dark bg → keep white text */ html.light .profile-card, html.light .profile-card * { color: #ffffff !important; } /* Section card headers must be readable on light backgrounds */ html.light .section-card-header h3, html.light .section-card-header span { color: #111827 !important; } /* Event modal panel always needs proper contrast */ html.light #event-modal .form-label { color: #374151 !important; } /* ── GENERAL CONTRAST SAFETY NET ── */ /* Any text-white on a non-colored background gets corrected in light mode */ html.light :not(.landing-page-wrapper):not(.bg-rose-500):not(.bg-red-500):not(.bg-green-500):not(.bg-emerald-500):not(.bg-gastro):not(.bg-amber-600):not(.bg-zinc-800):not(.bg-zinc-700):not(.bg-zinc-900):not(.bg-gray-800):not(.bg-gray-900):not(.popup-header):not(.profile-card):not(.table-sel-tile) .text-white { color: var(--text-on-surface) !important; } /* Ensure popup-card children have dark text in light mode */ html.light .popup-card, html.light .popup-card * { color: #111827 !important; } /* Popup header always has dark gradient bg → white text stays */ html.light .popup-header, html.light .popup-header * { color: #ffffff !important; } /* Buttons inside popup-card with colored bg → keep white text */ html.light .popup-card .bg-gastro, html.light .popup-card .bg-gastro * { color: #ffffff !important; } /* ── CHECKBOX IMPROVEMENTS FOR CUSTOMER MENU ── */ /* Make checkboxes in the customer menu (dark theme) more visible */ input[type="checkbox"].custom-checkbox { border-width: 2.5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Product badge event labels need proper contrast in light mode */ html.light .bg-\\[\\#7c3aed\\] { background-color: #7c3aed !important; color: #ffffff !important; } /* ── EVENT PRODUCT SELECTOR CHECKBOXES ── */ /* Native checkboxes inside event modal need visibility in both themes */ html.light .ep-toggle, html.light .event-day-check { accent-color: #7c3aed !important; width: 16px !important; height: 16px !important; } html.dark .ep-toggle, html.dark .event-day-check { accent-color: #a78bfa !important; width: 16px !important; height: 16px !important; } /* ── ADMIN EVENT MODAL LIGHT MODE CONTRAST ── */ /* Ensure form labels are readable in light mode event modal */ html.light #event-modal .form-label { color: #374151 !important; } html.light #event-modal .form-field { color: #111827 !important; background-color: #f9fafb !important; border-color: #d1d5db !important; } html.light #event-modal .form-field option { color: #111827 !important; background-color: #ffffff !important; } /* ── SELECT DROPDOWN LIGHT MODE FIX ── */ /* Select options inside popup-card or admin panel need dark text in light mode */ html.light select option, html.light .popup-card select option { color: #111827 !important; background-color: #ffffff !important; } /* ── TEILRECHNUNG CHECKBOX HIGH-VISIBILITY ── */ /* Kellner partial-payment checkboxes need extra visibility in both themes */ .teilrechnung-box .custom-checkbox, .control-split-item .custom-checkbox { width: 22px !important; height: 22px !important; border-width: 3px !important; border-color: #6b7280 !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12) !important; } html.dark .teilrechnung-box .custom-checkbox, html.dark .control-split-item .custom-checkbox { border-color: #9ca3af !important; background: #1f2937 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.3) !important; } .teilrechnung-box .custom-checkbox:checked, .control-split-item .custom-checkbox:checked { background: #009900 !important; border-color: #009900 !important; box-shadow: 0 0 0 2px rgba(0,153,0,0.2), 0 2px 8px rgba(0,153,0,0.3) !important; } .teilrechnung-box .custom-checkbox:checked::after, .control-split-item .custom-checkbox:checked::after { border-width: 0 3px 3px 0 !important; } /* ── KELLNER ITEM-CARD CHECKBOX VISIBILITY ── */ /* Item cards in order popup: ensure checkboxes stand out against card background */ .item-card .custom-checkbox { width: 22px !important; height: 22px !important; border-width: 3px !important; border-color: #9ca3af !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1) !important; } html.dark .item-card .custom-checkbox { border-color: #6b7280 !important; background: #1f2937 !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.05), 0 1px 4px rgba(0,0,0,0.25) !important; } .item-card .custom-checkbox:checked { background: #009900 !important; border-color: #009900 !important; box-shadow: 0 0 0 2px rgba(0,153,0,0.2), 0 2px 8px rgba(0,153,0,0.3) !important; } /* ── POPUP-FOOTER LIGHT MODE TEXT FIX ── */ /* Ensure confirmation text in popup footer is readable in light mode */ html.light .popup-footer .text-white, html.light .popup-footer [style*="color:#fff"], html.light .popup-footer [style*="color: #fff"], html.light .popup-footer [style*="color:white"], html.light .popup-footer [style*="color: white"] { color: #111827 !important; } /* ── ADMIN SECTION CARD BODY LIGHT MODE ── */ /* Section card bodies need proper text in light mode */ html.light .section-card-body { color: #374151 !important; } html.light .section-card-body .text-zinc-400, html.light .section-card-body .text-zinc-500 { color: #6b7280 !important; } /* ── EVENT MODAL PANEL OVERLAY IN LIGHT MODE ── */ /* The event modal slide-in panel needs proper text contrast */ html.light #event-modal, html.light #event-modal *:not(.popup-header *):not(.bg-gastro):not(.bg-gastro *):not(button[style*="background:#7c3aed"]):not(button[style*="background:#7c3aed"] *) { color: #1f2937 !important; } html.light #event-modal .bg-gray-50 { background-color: #f3f4f6 !important; } html.light #event-modal .text-zinc-400, html.light #event-modal .text-zinc-500 { color: #6b7280 !important; } html.light #event-modal .text-zinc-800 { color: #1f2937 !important; } /* Event modal save button stays purple with white text */ html.light #event-modal button[style*="background:#7c3aed"], html.light #event-modal button[style*="background:#7c3aed"] * { color: #ffffff !important; } /* ── SITZPLAN TABLE TILE DARK MODE CONTRAST ── */ /* In dark mode, inline dark colors on table tiles are nearly invisible */ /* Override all inline color styles inside sitzplan-table to inherit from parent */ html.dark .sitzplan-table span[style*="color:"], html.dark .sitzplan-table a[style*="color:"] { color: inherit !important; } /* Status-specific bright colors for dark mode tiles */ html.dark .sitzplan-table.status-active { color: #34d399 !important; /* emerald-400 */ } html.dark .sitzplan-table.status-pending { color: #fca5a5 !important; /* red-300 */ } html.dark .sitzplan-table.status-calling { color: #fcd34d !important; /* amber-300 */ } html.dark .sitzplan-table.status-free { color: #a1a1aa !important; /* zinc-400 */ } /* Dark mode: tile timers and small text need visibility */ html.dark .sitzplan-table .tile-timer { color: #fca5a5 !important; background: rgba(239, 68, 68, 0.15) !important; } /* ── SITZPLAN TABLE TILE LIGHT MODE CONTRAST ── */ /* In light mode, tiles have white background with status tint - keep dark text */ html.light .sitzplan-table.status-active { color: #065f46 !important; /* emerald-800 */ } html.light .sitzplan-table.status-pending { color: #9f1239 !important; /* rose-800 */ } html.light .sitzplan-table.status-calling { color: #92400e !important; /* amber-800 */ } html.light .sitzplan-table.status-free { color: #6b7280 !important; /* gray-500 */ } /* ── MENU LIGHT MODE: SOLID WHITE BACKGROUND ── */ /* (Solid white background applied via html.light body rule near top of file) */ /* ════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ENHANCEMENTS (additive only — no overrides) These rules add mobile breakpoints that were previously missing. They only kick in below specific widths and do NOT change existing desktop behavior. Safe to layer on top of Tailwind utility classes. ════════════════════════════════════════════════════════════════════ */ /* ── Tablet breakpoint (≤1023px) ── */ @media (max-width: 1023px) { /* Slightly tighter glass panels on smaller screens for readability */ .glass-panel { backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .glass-card { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } } /* ── Mobile breakpoint (≤768px) ── */ @media (max-width: 768px) { /* Reduce shadow intensity to save GPU on mobile */ .glass-panel { box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4); } .glass-card { transition: transform 0.2s ease, border-color 0.2s ease; } .glass-card:hover { /* Hover-lift disabled on touch devices (no hover anyway, saves repaints) */ transform: none; } /* Premium buttons: slightly tighter padding for narrow viewports */ .btn-premium { letter-spacing: 0.01em; } /* Inputs: ensure 16px font-size to prevent iOS auto-zoom on focus (also handled per-template via @media below — defense in depth) */ .input-premium, .input-premium input, .input-premium select, .input-premium textarea { font-size: 16px; } } /* ── Small phone breakpoint (≤480px) ── */ @media (max-width: 480px) { /* Disable heavy backdrop-filter on very small screens for performance (older phones struggle with blur+saturate combos) */ .glass-panel { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(11, 12, 16, 0.85); } .glass-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(17, 19, 26, 0.78); } /* Reduce scrollbar size further */ ::-webkit-scrollbar { width: 4px; height: 4px; } } /* ── Reduced motion: respect user preference ── */ @media (prefers-reduced-motion: reduce) { .glass-card, .btn-premium, .btn-premium-primary, .btn-premium-secondary, .glass-btn-primary, .glass-btn-secondary { transition: none !important; animation: none !important; } .glass-card:hover { transform: none !important; } } /* ── Print styles (for receipts, invoices, reports) ── */ @media print { body { background: #fff !important; color: #000 !important; } .glass-panel, .glass-card { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #ccc !important; color: #000 !important; } .btn-premium, .glow-primary, .glow-gold { box-shadow: none !important; } } /* ════════════════════════════════════════════════════════════════════ IMAGE LOADING OPTIMIZATIONS ════════════════════════════════════════════════════════════════════ */ img { /* Native lazy-loading fallback: decode async to avoid blocking main thread */ decoding: async; } /* Prevent layout shift while images load — smooth mobile scroll */ img[loading="lazy"] { content-visibility: auto; } /* Image error state: subtle placeholder instead of broken icon */ img:not([src]), img[src=""] { opacity: 0; } /* ════════════════════════════════════════════════════════════════════ FOCUS VISIBLE: keyboard navigation accessibility ════════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } /* Remove default outline only when focus-visible is supported (modern browsers) */ :focus:not(:focus-visible) { outline: none; } /* ════════════════════════════════════════════════════════════════════ HIGH CONTRAST MODE support ════════════════════════════════════════════════════════════════════ */ @media (prefers-contrast: high) { .glass-panel, .glass-card { border-width: 2px !important; border-color: var(--text-on-surface) !important; } .text-on-surface-variant { color: var(--text-on-surface) !important; } } /* ════════════════════════════════════════════════════════════════════ BILDSCHUTZ — Verhindert Download von Bildern/Videos/Produktfotos ════════════════════════════════════════════════════════════════════ Verhindert: - Desktop: Rechtsklick → "Bild speichern unter..." - iOS Safari: Long-Press → "Bild zu Fotos sichern" / "Kopieren" - Android Chrome: Long-Press → "Bild herunterladen" - Drag-and-Drop von Bildern in andere Apps - Textauswahl auf Bild-Alt-Texten - Image-Caching im Browser für offline-Zugriff (via Cache-Control Header) Ausnahmen: - Logo im Header (.header-logo, .avatar) → darf weiterhin gespeichert werden - Admin-Bereich Bilder (für Personal zum Bearbeiten) WICHTIG: 100% Schutz gibt es clientseitig nie (Screenshot, View Source, DevTools). Aber die typischen "Hobby-Klau"-Pfade werden blockiert. ════════════════════════════════════════════════════════════════════ */ /* Alle Bilder und Videos im Body schützen — außer im Admin */ body img:not(.header-logo):not(.avatar):not(.no-protect):not([src*="digigastrologo"]), body video:not(.no-protect), body picture:not(.no-protect) { /* iOS Safari: Long-Press-Kontextmenü komplett unterdrücken */ -webkit-touch-callout: none !important; /* Standard: Kontextmenü unterdrücken */ -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; /* Drag-and-Drop verhindern */ -webkit-user-drag: none !important; -khtml-user-drag: none !important; -moz-user-drag: none !important; -o-user-drag: none !important; user-drag: none !important; /* Pointer-Events: Bild kann nicht direkt angeklickt/targeted werden (Long-Press löst nichts aus). ABER: Wrapper-Elemente erhalten Klicks. */ pointer-events: auto; /* Verhindert, dass Bild als Link agiert */ -webkit-tap-highlight-color: transparent; } /* Verstärkter Schutz für Produktbilder und Galerie-Bilder */ .product-item img, .product-card img, img[loading="lazy"], #lightbox img, #cart-modal img, #product-grid-container img { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; user-drag: none !important; } /* Videos schützen (z.B. Hero-Video, Shisha-Tutorials) */ video { /* DisablePictureInPicture verhindert Download via PiP */ -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } /* Kontextmenü (Rechtsklick) global unterdrücken — außer in Input-Feldern */ body:not(.admin-context) { -webkit-touch-callout: none; } /* Erlaube Kontextmenü in Admin-Bereich (für Kellner/Bedienung) */ .admin-context, .admin-context img, .admin-context video { -webkit-touch-callout: auto !important; -webkit-user-select: auto !important; user-select: auto !important; -webkit-user-drag: auto !important; user-drag: auto !important; } /* Hintergrund-Bilder schützen (z.B. Slideshow, Hero-Video-Overlay) */ .bg-cover, .bg-contain { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } /* ════════════════════════════════════════════════════════════════════ Phase 5: Modern CSS Features (2026 Baseline) ════════════════════════════════════════════════════════════════════ */ /* ── Container Queries: Komponenten reagieren auf Container-Größe ── Ermöglicht dass Produktkarten in Grid (schmal) und Listenansicht (breit) unterschiedlich reagieren — unabhängig vom Viewport. */ .product-card-container { container-type: inline-size; } @container (min-width: 400px) { .product-card-adaptive { flex-direction: row; gap: 1rem; } .product-card-adaptive .product-image { width: 120px; height: 120px; flex-shrink: 0; } } @container (max-width: 399px) { .product-card-adaptive { flex-direction: column; } .product-card-adaptive .product-image { width: 100%; aspect-ratio: 4/3; } } /* ── :has() Selector: Bedingte Styles ohne JavaScript ── Form-Fehler-Zustand, aktive Tisch-Hervorhebung, leere Listen ausblenden. */ /* Form mit ungültigem Input → roter Rahmen */ form:has(input:invalid) .form-submit-btn { opacity: 0.5; pointer-events: none; } /* Bestellung mit unbezahltem Status → amber Glow */ .order-card:has(.badge-aktiv) { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3); } /* Produktkarte mit Bild → kein Padding-Top (Bild füllt aus) */ .product-tile:has(img) { padding-top: 0; } /* Leere Liste → Empty-Hint anzeigen */ .product-list:not(:has(.product-tile)) .empty-hint { display: block; } /* ── Popover API: Light-Dismiss Overlays ohne JavaScript ── ersetzt z-index-Hack für Quick-Actions, Tooltips */ [popover] { background: var(--gastro-card-bg, #ffffff); border: 1px solid var(--gastro-border, #e5e7eb); border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); margin: auto; inset: auto; } [popover]::backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); } /* ── Scroll-Driven Animations (Progressive Enhancement) ── Header verkleinert beim Scrollen — nur in Browsern mit Support */ @supports (animation-timeline: scroll()) { .dash-header { animation: shrink-on-scroll linear; animation-timeline: scroll(); } @keyframes shrink-on-scroll { to { padding-top: 0.5rem; padding-bottom: 0.5rem; } } } /* ── Hover nur auf Geräten mit Hover-Support (verhindert iOS Sticky-Hover) ── */ @media (hover: hover) { .hover-lift:hover { transform: translateY(-4px); } .glass-card:hover { transform: translateY(-2px); } } /* Auf Touch-Geräten: :active als visuelles Tap-Feedback */ @media (hover: none) { .hover-lift:active { transform: scale(0.98); } .glass-card:active { transform: scale(0.98); } }