/* ========================================================================== 1. Grundlegende Layout-Struktur ========================================================================== */ /* NEU: Stabiles Flexbox-Layout als Basis für die App-Struktur */ .layout { display: flex; flex-direction: column; /* GEÄNDERT: Vertikales Layout für Sidebar + Main */ height: 100%; /* GEÄNDERT: Von 100vh auf 100%, um die korrigierte Höhe von zu erben */ } /* KORRIGIERT: Layout für Desktop mit Sidebar */ @media (min-width: 901px) { .layout { flex-direction: row; /* Desktop: Sidebar links, Main rechts */ } } /* Stellt sicher, dass der Hauptinhalt korrekt neben der Sidebar positioniert ist */ .main-content { margin-left: 0; /* Mobile first: Kein Sidebar-Abstand */ flex-grow: 1; /* Füllt den restlichen Platz in der Breite */ display: flex; flex-direction: column; overflow-y: auto; /* DIESER BEREICH WIRD NUN SCROLLBAR */ -webkit-overflow-scrolling: touch; /* Für flüssiges Scrollen auf iOS */ padding-bottom: 0; /* GEÄNDERT: Kein Padding unten, damit Footer bündig ist */ min-height: 100vh; /* Sorgt dafür, dass Flexbox funktioniert */ } /* Desktop: Sidebar-Abstand hinzufügen */ @media (min-width: 901px) { .main-content { margin-left: 80px; } } /* NEU: Stellt sicher, dass der
-Container den verfügbaren Platz ausfüllt */ .main-content > main { flex-grow: 1; display: flex; flex-direction: column; } /* ========================================================================== 2. Desktop-Header (Topbar) ========================================================================== */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 2rem 2.5rem 1.5rem 2.5rem; background: var(--color-bg-light, var(--color-bg-accent)); border-bottom: 1px solid var(--color-bg-accent); position: sticky; top: 0; z-index: 99; } .app-title { font-size: 1.3rem; color: var(--color-primary); font-weight: 700; letter-spacing: 0.02em; text-align: center; } .topbar-left, .topbar-right { flex: 1; } .topbar-right { display: flex; justify-content: flex-end; } .search-input { background: var(--color-bg-accent); border: 1px solid var(--color-bg-accent); border-radius: 8px; padding: 0.7rem 1.2rem; font-size: 1rem; width: 260px; transition: border 0.2s; color: var(--color-text); } .search-input:focus { outline: none; border-color: var(--color-primary); } .user-greeting { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } /* Logout-Link Styling - identisch mit user-greeting */ .logout-link { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: color 0.2s; } .logout-link:hover { color: var(--color-accent); } .logout-text { font-weight: 600; /* Gleiche Schriftgewichtung wie user-greeting */ font-size: 1.1rem; /* Gleiche Schriftgröße wie user-greeting */ } /* NEU: News Button Styling - identisch mit logout-link und user-greeting */ .open-news-popup { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: color 0.2s; } .open-news-popup:hover { color: var(--color-accent); } .news-text { font-weight: 600; /* Gleiche Schriftgewichtung wie user-greeting */ font-size: 1.1rem; /* Gleiche Schriftgröße wie user-greeting */ } /* Responsive: Text auf kleinen Bildschirmen ausblenden */ @media (max-width: 768px) { .logout-text { display: none; } .logout-link { margin-right: 0.5rem; } .news-text { display: none; } .open-news-popup { font-size: 1.3rem; /* Größeres Icon auf Mobile */ } } /* ========================================================================== 3. Desktop-Navigation (Sidebar) ========================================================================== */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 80px; background: var(--color-bg-light, var(--color-bg-accent)); border-right: 1px solid var(--color-bg-accent); display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0; z-index: 100; } .sidebar-logo { width: 48px; height: 48px; margin-bottom: 2.5rem; margin-top: 0.5rem; } .sidebar-logo img { width: 100%; height: auto; } .sidebar-menu { display: flex; flex-direction: column; gap: 2rem; list-style: none; padding: 0; margin: 0; } .sidebar-link { color: var(--color-primary); /* Gleiche Farbe wie die Button-Icons */ font-size: 1.7rem; display: flex; align-items: center; position: relative; padding: 0.7rem; border-radius: 10px; text-decoration: none; transition: color 0.2s; opacity: 0.6; /* Macht nicht-ausgewählte Icons heller */ } .sidebar-link.active, .sidebar-link:hover { color: var(--color-primary); /* Klassisches V3IME Blau für ausgewählt/hover */ background: none; /* Kein Hintergrund mehr */ opacity: 1; /* Volle Deckkraft für ausgewählte/hover Items */ } .sidebar-tooltip { position: absolute; left: 110%; top: 50%; transform: translateY(-50%); background: var(--color-primary); color: #fff; padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.95rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 110; } .sidebar-link:hover .sidebar-tooltip { opacity: 1; } /* ========================================================================== 4. Desktop-Footer (Komplett neu) ========================================================================== */ /* Footer update with improved vertical alignment */ .footer { /* Fixed dimensions and positioning */ height: 60px !important; /* Explicit fixed height */ min-height: 60px !important; max-height: 60px !important; width: 100% !important; /* Full width within its container */ margin: 0 !important; /* No margin needed within flexbox */ /* Box model consistency */ box-sizing: border-box !important; padding: 0 2.5rem !important; margin-top: auto !important; /* Pushes footer to bottom in flexbox */ /* Visual style */ background: var(--color-bg-light, var(--color-bg-accent)) !important; color: var(--color-primary) !important; border-top: 1px solid var(--color-bg-accent) !important; /* Perfect alignment with flexbox */ display: flex !important; align-items: center !important; justify-content: space-between !important; /* Flexbox item properties */ flex-shrink: 0 !important; /* Don't shrink the footer */ } /* Copyright text */ .footer p { /* Remove all spacing */ margin: 0 !important; padding: 0 !important; /* Typography */ font-size: 1.1rem !important; font-weight: 500 !important; line-height: 1 !important; /* Prevent wrapping */ white-space: nowrap !important; } /* Navigation container */ .footer nav { /* Layout */ display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 30px !important; /* Remove all spacing */ margin: 0 !important; padding: 0 !important; /* Prevent wrapping */ white-space: nowrap !important; } /* Navigation links */ .footer a { /* Typography */ color: var(--color-primary) !important; font-size: 1.1rem !important; line-height: 1 !important; font-weight: 400 !important; text-decoration: none !important; /* Prevent wrapping */ white-space: nowrap !important; /* Remove any box model spacing */ margin: 0 !important; padding: 0 !important; /* Hover effect */ transition: color 0.2s !important; } .footer a:hover { color: var(--color-accent) !important; } /* Override for auth pages */ body.auth-page .footer { margin-left: 0 !important; width: 100% !important; } /* Ensure footer is visible on desktop by default */ .footer.desktop-only { display: flex !important; } /* ============================================================ PWA STANDALONE MODE STYLING This handles all PWA/mobile-specific layout requirements ============================================================ */ /* Base mobile nav styling */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100vw; /* Use vw instead of % */ height: 70px; /* GEÄNDERT: Von 85px auf 70px reduziert */ background: var(--color-bg-light, var(--color-bg-accent)); border-top: 1px solid var(--color-bg-accent); z-index: 1001; justify-content: space-around; align-items: flex-start; /* GEÄNDERT: Von center auf flex-start */ padding: 0.5rem 0; /* GEÄNDERT: Von 0.8rem auf 0.5rem reduziert */ box-sizing: border-box; } .mobile-bottom-nav a { color: var(--color-primary); /* Gleiche Farbe wie die Button-Icons */ font-size: 1.7rem; padding: 0.5rem; /* GEÄNDERT: Von 0.7rem auf 0.5rem reduziert */ border-radius: 10px; transition: color 0.2s, opacity 0.2s; text-decoration: none; display: flex; flex-direction: column; align-items: center; opacity: 0.6; /* Macht nicht-ausgewählte Icons heller */ margin-top: 0.3rem; /* NEU: Zusätzlicher Abstand nach oben */ } .mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: var(--color-primary); /* Klassisches V3IME Blau für ausgewählt/hover */ background: none; /* Kein Hintergrund mehr */ opacity: 1; /* Volle Deckkraft für ausgewählte/hover Items */ } /* Simplified mobile media query */ @media (max-width: 900px) { .sidebar { display: none !important; } .mobile-bottom-nav { display: flex !important; } .topbar { display: none !important; /* Hide header on mobile */ } .footer.desktop-only { display: none !important; /* Hide footer on mobile */ } .main-content { margin-left: 0 !important; /* GEÄNDERT: Abstand für die niedrigere mobile Navigation angepasst */ padding-bottom: 70px !important; } } /* Very simplified PWA style override */ @media all and (display-mode: standalone) { /* Hide desktop elements */ .sidebar, .footer.desktop-only, .topbar { display: none !important; } /* Force mobile nav display */ .mobile-bottom-nav { display: flex !important; height: 70px !important; /* GEÄNDERT: Von 85px auf 70px */ bottom: 0 !important; left: 0 !important; width: 100vw !important; } /* NEU: Hauptinhalt für PWA anpassen (Notch & Navigationsleiste) */ .main-content { margin-left: 0 !important; width: 100% !important; /* Fallback-Abstand oben für Geräte ohne Safe-Area-Unterstützung */ padding-top: 20px !important; /* GEÄNDERT: Abstand für die niedrigere untere Navigationsleiste */ padding-bottom: 70px !important; } /* Safe area handling */ @supports (padding: env(safe-area-inset-bottom)) { .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom) !important; height: calc(70px + env(safe-area-inset-bottom)) !important; /* GEÄNDERT: Von 85px auf 70px */ } /* NEU: Passt die Abstände an die Safe Areas des Geräts an */ .main-content { padding-top: env(safe-area-inset-top) !important; padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; /* GEÄNDERT: Von 85px auf 70px */ } } /* ENTFERNT: Die alten, fehlerhaften PWA-Layout-Regeln wurden durch die neuen .main-content Regeln ersetzt. */ }