/* ========================================================================== 1. CSS Variablen für Theming (Light & Dark Mode) ========================================================================== */ :root { --bg-color: #f4f4f9; --header-bg: #004080; --header-text: white; --nav-btn-bg: #0073e6; --nav-btn-hover-bg: #005bb5; --text-color: #333; --card-bg: white; --card-border: #e0e0e0; --card-shadow: rgba(0,0,0,0.1); --footer-bg: #4CAF50; /* Grüner Hintergrund für den Footer im Hellmodus */ --error-bg: #fbeae5; --error-text: #c0392b; --error-border: #e74c3c; --table-header-bg: #004080; --table-header-text: white; --table-border: #ddd; --table-row-even-bg: #f9f9f9; --table-row-hover-bg: #f1f1f1; } /* * Wenn das -Tag das Attribut [data-theme="dark"] hat, werden diese Variablen verwendet. */ [data-theme="dark"] { --bg-color: #121212; --header-bg: #1f2937; --header-text: #e5e7eb; --nav-btn-bg: #374151; --nav-btn-hover-bg: #4b5563; --text-color: #d1d5db; --card-bg: #1f2937; --card-border: #4b5563; --card-shadow: rgba(0,0,0,0.4); --footer-bg: #111827; /* Ein dunkleres Grau für den Footer im Dunkelmodus */ --error-bg: #4c2b2b; --error-text: #fca5a5; --error-border: #ef4444; --table-header-bg: #374151; --table-header-text: #e5e7eb; --table-border: #4b5563; --table-row-even-bg: #1f2937; --table-row-hover-bg: #374151; } /* ========================================================================== 2. Globale Stile & Layout ========================================================================== */ body, html { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; font-family: Arial, sans-serif; background-color: var(--bg-color); /* Variable verwenden */ color: var(--text-color); /* Variable verwenden */ } /* ========================================================================== 3. Header & Navigation ========================================================================== */ header { background-color: var(--header-bg); padding: 10px 0; height: auto; /* Höhe passt sich dem Inhalt an */ min-height: 100px; box-sizing: border-box; width: 100%; } .header-container { display: flex; justify-content: space-between; align-items: center; /* Zentriert Inhalte vertikal */ padding: 10px 20px; /* Weniger Padding an den Seiten für mobile Geräte */ flex-wrap: wrap; /* Erlaubt Umbruch auf kleinen Screens */ gap: 20px; box-sizing: border-box; } /* * Die Navigation wird als Grid-Layout mit 4 Spalten und 2 Zeilen dargestellt. */ .navbar { display: flex; flex-wrap: wrap; /* Buttons brechen um, wenn kein Platz ist */ gap: 10px; width: auto; justify-content: center; } .navbar a { background-color: var(--nav-btn-bg); color: var(--header-text); text-decoration: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; transition: background-color 0.3s; font-size: 20px; text-align: center; white-space: nowrap; flex: 1 0 auto; /* Wachsen, aber nicht schrumpfen, Basisgröße automatisch */ box-sizing: border-box; } .navbar a:hover { background-color: var(--nav-btn-hover-bg); } /* ========================================================================== 4. Login, Registrierung & User-Session ========================================================================== */ .header-right { display: flex; justify-content: flex-end; /* Stellt sicher, dass der Inhalt rechtsbündig ist */ align-items: center; gap: 15px; width: auto; height: auto; flex-wrap: wrap; } /* * Ein leerer Platzhalter, um das 3-spaltige Layout im Header zu erzwingen, auch wenn auf manchen Seiten rechts nichts ist. */ .header-placeholder { display: none; /* Auf mobilen Geräten nicht benötigt */ } /* Stile für die Sprachauswahl (benutzerdefiniertes Dropdown) */ .language-switcher { position: relative; width: 165px; /* Gleiche Breite wie Nav-Buttons */ } .selected-language { display: flex; align-items: center; justify-content: center; background-color: var(--nav-btn-bg); color: var(--header-text); padding: 10px; border: none; border-radius: 6px; font-weight: bold; font-size: 20px; /* Angepasst an Nav-Buttons */ cursor: pointer; width: 100%; box-sizing: border-box; gap: 10px; } .selected-language img { width: 24px; height: 18px; border-radius: 2px; object-fit: cover; } .arrow-down { border: solid var(--header-text); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(45deg); margin-left: 5px; } .language-options { display: none; /* Standardmäßig ausgeblendet */ position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; list-style: none; margin: 5px 0 0 0; padding: 0; z-index: 1000; box-shadow: 0 4px 8px var(--card-shadow); } .language-options li { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; gap: 10px; } .language-options li img { width: 24px; height: 18px; border-radius: 2px; object-fit: cover; } .language-options li span { font-size: 20px; font-weight: bold; color: var(--text-color); } .language-options li:hover { background-color: var(--nav-btn-hover-bg); } .auth-container { width: 100%; } /* * Das Registrierungsformular wird als Grid mit 2 Spalten dargestellt. */ .registration-header { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .registration-header button { grid-column: 1 / -1; /* Button erstreckt sich über beide Spalten */ } .auth-switch { font-size: 14px; text-align: center; margin: 2px 0 0 0; color: var(--header-text); } .auth-switch a { color: #87CEEB; } .login-header { display: flex; gap: 8px; } .login-header input { padding: 8px; border: none; border-radius: 5px; width: 150px; font-size: 16px; } .login-header button { padding: 10px 20px; background-color: var(--nav-btn-bg); color: var(--header-text); border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 20px; width: 165px; box-sizing: border-box; text-align: center; } .login-header button:hover { background-color: var(--nav-btn-hover-bg); } #auth-message { text-align: center; font-weight: bold; margin-top: 10px; } /* NEU: Stile für den angemeldeten Zustand */ .user-session { display: flex; align-items: center; gap: 15px; color: var(--header-text); font-size: 16px; } .user-session button { padding: 10px 20px; background-color: #c0392b; /* Rote Farbe für Logout */ color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } /* * Der Button zum Umschalten des Farbschemas. */ #theme-toggle-btn { padding: 10px 20px; background-color: var(--nav-btn-bg); color: var(--header-text); border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 20px; width: 82.5px; box-sizing: border-box; line-height: 1.5; /* Höhe an Nav-Buttons anpassen */ transition: background-color 0.3s; } /* ========================================================================== 5. Main Content Bereich ========================================================================== */ main { position: relative; display: flex; flex-direction: column; /* Standard: Kinder untereinander anordnen */ align-items: center; /* Kinder horizontal zentrieren */ flex: 1; /* Main nimmt den verfügbaren Platz zwischen Header & Footer ein */ box-sizing: border-box; overflow-y: auto; /* Ermöglicht vertikales Scrollen, wenn der Inhalt überläuft */ min-height: 0; /* Wichtig für Flexbox-Kinder, um korrekt zu schrumpfen */ } /* * Ein spezieller, mehrschichtiger Hintergrund nur für die Seite mit der Klasse .main-animationen. */ .main-animationen { position: relative; /* Wichtig, damit das #weather-overlay darin positioniert wird */ /* Der Hintergrund wird aus mehreren Ebenen aufgebaut, von oben nach unten */ background-color: #87CEEB; /* Fallback-Himmelsfarbe */ background-image: /* Baum 1 (links) */ radial-gradient(circle, #2E7D32 50px, transparent 51px), /* Baumkrone */ linear-gradient(#8D6E63, #8D6E63), /* Baumstamm */ /* Haus 1 (links) - Dach, Fenster, Tür, Körper (von oben nach unten, von vorne nach hinten) */ linear-gradient(to bottom right, transparent 50%, #A1887F 50%), linear-gradient(to bottom left, transparent 50%, #A1887F 50%), /* Dach */ linear-gradient(#FDD835, #FDD835), /* Fenster 1 */ linear-gradient(#FDD835, #FDD835), /* Fenster 2 */ linear-gradient(#A1887F, #A1887F), /* Tür */ linear-gradient(#D7CCC8, #D7CCC8), /* Hauskörper */ /* Haus 2 (rechts) - Dach, Fenster, Tür, Körper */ linear-gradient(to bottom right, transparent 50%, #795548 50%), linear-gradient(to bottom left, transparent 50%, #795548 50%), /* Dach */ linear-gradient(#FDD835, #FDD835), /* Fenster 1 */ linear-gradient(#FDD835, #FDD835), /* Fenster 2 */ linear-gradient(#795548, #795548), /* Tür */ linear-gradient(#BCAAA4, #BCAAA4), /* Hauskörper */ /* Basis-Hintergrund: Himmel und Wiese */ linear-gradient(to bottom, #87CEEB 0%, #b0e0e6 70%, #66bb6a 75%, #388e3c 100%); background-repeat: no-repeat; /* Gilt für alle Ebenen */ background-size: /* Baum 1 */ 100px 100px, /* Baumkrone */ 15px 60px, /* Baumstamm */ /* Haus 1: Dach, Fenster, Tür, Körper */ 70px 70px, 70px 70px, /* Dach */ 20px 20px, 20px 20px, /* Fenster */ 25px 40px, /* Tür */ 140px 80px, /* Hauskörper */ /* Haus 2: Dach, Fenster, Tür, Körper */ 90px 90px, 90px 90px, /* Dach */ 25px 25px, 25px 25px, /* Fenster */ 35px 50px, /* Tür */ 180px 110px, /* Hauskörper */ /* Himmel/Wiese */ 100% 100%; /* Himmel/Wiese */ background-position: /* Baum 1 */ 18% calc(100% - 140px), /* Baumkrone */ calc(18% + 30px) calc(100% - 80px), /* Baumstamm */ /* Haus 1: Dach, Fenster, Tür, Körper */ calc(30% - 20px) calc(100% - 160px), calc(30% + 50px) calc(100% - 160px), /* Dach (70px hoch, 140px breit) */ calc(30% + -15px) calc(100% - 125px), calc(30% + 70px) calc(100% - 125px), /* Fenster (20x20, 10px über Tür) */ calc(30% + 25px) calc(100% - 80px), /* Tür (25x40, mittig, am Boden des Hauses) */ 30% calc(100% - 80px), /* Hauskörper (140x80) */ /* Haus 2: Dach, Fenster, Tür, Körper */ calc(65% - 60px) calc(100% - 190px), calc(65% + 30px) calc(100% - 190px), /* Dach (90px hoch, 180px breit) */ calc(65% + -75px) calc(100% - 140px), calc(65% + 25px) calc(100% - 140px), /* Fenster (25x25, 10px über Tür) */ calc(65% + -20px) calc(100% - 80px), /* Tür (35x50, mittig, am Boden des Hauses) */ 65% calc(100% - 80px), /* Hauskörper (180x110) */ /* Himmel/Wiese */ 0 0; /* Himmel/Wiese */ overflow-x: hidden; /* Verhindert horizontales Scrollen durch die Wolken */ } /* * Pseudo-Elemente werden verwendet, um zusätzliche dekorative Elemente (hier die Wolken) hinzuzufügen, ohne das HTML zu verändern. */ .main-animationen::before, .main-animationen::after { content: ''; position: absolute; left: 0; width: 100%; z-index: -1; /* Legt die Elemente in den Hintergrund */ } /* * Die weißen Wolken, die sich über den Himmel bewegen. */ .main-animationen::after { /* Erzeugt eine flauschige Wolkenform mit box-shadow */ top: 15%; width: 100px; height: 30px; background: white; border-radius: 50px; box-shadow: /* Hauptwolkenkörper */ 100px -30px 0 0 white, /* Kleinere Wölbungen */ 30px -40px 0 -10px white, 60px -20px 0 -5px white; animation: move-clouds 25s linear infinite; } /* * Blendet die weißen Wolken aus, wenn die Klasse .is-raining hinzugefügt wird (gesteuert durch JavaScript). */ .main-animationen.is-raining::after { display: none; } /* * Keyframe-Animation für die Wolkenbewegung von links nach rechts. */ @keyframes move-clouds { from { transform: translateX(-200px); } to { transform: translateX(100vw); } } /* ========================================================================== 6. Seiten-spezifische Layouts & Komponenten ========================================================================== */ /* --- Layout für die Mathe+Wetter Seite --- */ .main-mathe-wetter { display: flex; flex-direction: row; /* Hauptrichtung ist nebeneinander */ align-items: stretch; /* Kinder strecken sich über die volle Höhe */ padding: 20px; gap: 20px; width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */ } .linke-spalte { flex-basis: 50%; /* Nimmt die linke Hälfte ein */ display: flex; flex-direction: column; gap: 20px; min-width: 0; /* Wichtig für Flexbox-Kinder */ min-height: 0; /* Erlaubt Kindern, korrekt zu schrumpfen */ } /* Spezielles Layout für die alte zweispaltige Ansicht (falls noch woanders genutzt) */ .main-zweispaltig { flex-direction: row; padding: 20px; gap: 20px; } /* * Ein einheitlicher Stil für die Kopfzeile jeder Seite im
-Bereich. */ .page-header { width: 100%; /* über gesamte Breite des Main-Bereichs */ text-align: center; /* horizontal mittig */ padding-top: 20px; /* Abstand vom oberen Rand des Main-Bereichs */ padding-bottom: 20px; /* Abstand zum restlichen Inhalt */ box-sizing: border-box; } .page-header h1 { font-size: 28px; margin: 0; } .page-header p { font-size: 18px; margin: 5px 0 0 0; } /* Stile für den Dateinamen im Diagramm-Paragraph */ .csv-filename { color: blue; /* Standardfarbe für Hellmodus */ font-weight: bold; /* Behält die Fettschrift bei */ } [data-theme="dark"] .csv-filename { color: orange; /* Farbe für Dunkelmodus */ } /* Spezifische Anpassung für die Animationen-Seite im Dark Mode */ /* Diese Regel muss NACH der allgemeinen .page-header-Regel stehen, um sie zu überschreiben. */ [data-theme="dark"] main.main-animationen .page-header h1, [data-theme="dark"] main.main-animationen .page-header p { /* Schwarze Schrift für maximalen Kontrast auf dem hellen Himmel-Hintergrund. */ color: black; } /* --- Stile für die Video-Seite --- */ .video-container { display: flex; justify-content: flex-start; /* linksbündig */ align-items: flex-start; /* oben im Main-Bereich ausrichten */ gap: 40px; /* Abstand zwischen Videos */ flex-wrap: wrap; /* Videos brechen um */ width: 100%; height: 100%; padding: 20px; box-sizing: border-box; } /* Beide Videos gleich groß */ .video-container video { width: 100%; /* Auf Mobile volle Breite */ max-width: 600px; /* Maximalbreite auf Desktop */ height: auto; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } /* --- Stile für die Mathe & Wetter Seite --- */ .wetter-bereich { flex-basis: 50%; /* Nimmt die rechte Hälfte ein */ flex-grow: 1; /* Wächst, um den Platz zu füllen */ flex-shrink: 0; /* Verhindert Schrumpfen */ padding: 15px; border: 1px solid #ccc; border-radius: 8px; text-align: center; transition: background 0.8s ease-in-out; /* Sanfter Übergang beim Wechsel */ color: #333; /* Standard-Textfarbe */ } .wetter-bereich h4 { color: inherit; } .plotter-bereich { flex: 1; /* Erlaubt dem Plotter-Bereich, den restlichen vertikalen Platz einzunehmen */ } .rechner-bereich, .plotter-bereich { display: flex; flex-direction: column; min-height: 0; /* Erlaubt Kindern, korrekt zu schrumpfen */ padding: 20px; border-radius: 8px; background-color: var(--card-bg); background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec); /* Subtiler, heller Farbverlauf */ box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Leichter Schatten für mehr Tiefe */ } .rechner-bereich input, .plotter-bereich input { width: calc(100% - 20px); padding: 8px; margin-bottom: 10px; } .rechner-bereich button, .plotter-bereich button { padding: 8px 12px; cursor: pointer; } #ergebnis { margin-top: 10px; font-weight: bold; } .plotter-bereich > p { flex-shrink: 0; } /* Verhindert, dass der Text schrumpft */ .canvas-container { flex: 1; /* Dieser Container füllt den verfügbaren Platz im Plotter-Bereich */ position: relative; /* Wichtig für die korrekte Größe des Canvas */ margin-top: 10px; max-height: 500px; /* Begrenzt die maximale Höhe des Plotters */ } /* Spezifische Anpassung für den Mathe-Bereich im Dark Mode */ [data-theme="dark"] .rechner-bereich, [data-theme="dark"] .plotter-bereich { color: black; /* Setzt die Schriftfarbe auf schwarz für besseren Kontrast */ } #funktionCanvas { width: 100%; height: 100%; } /* ========================================================================== 7. Footer ========================================================================== */ footer { height: 80px; background-color: var(--footer-bg); /* Variable verwenden */ color: white; /* Stellt sicher, dass der Text auf dem grünen Hintergrund lesbar ist */ display: grid; /* Flexbox ist hier flexibler als Grid für Mobile */ display: flex; justify-content: space-between; align-items: center; /* Vertikal zentrieren */ font-weight: bold; margin-top: auto; /* Schiebt Footer ans untere Ende */ box-sizing: border-box; } .footer-left { display: flex; gap: 20px; /* Abstand zwischen Impressum und Datenschutz */ justify-self: start; /* Richtet den Container links aus */ } .footer-center { justify-self: center; /* Zentriert den Text in der mittleren Spalte */ } .footer-left a { color: white; text-decoration: none; font-weight: normal; } /* ========================================================================== 8. Wetter-Widget Stile ========================================================================== */ #wetter-info { display: flex; flex-direction: column; align-items: center; gap: 10px; /* Abstand zwischen den Hauptblöcken */ } .wetter-hauptinfo { display: flex; align-items: center; gap: 15px; } .wetter-icon { width: 80px; /* Kleinere Icons für ein kompakteres Layout */ height: 80px; } .wetter-temp { font-size: 3em; /* Temperatur größer und präsenter */ font-weight: bold; color: inherit; /* Erbt die Farbe vom Eltern-Container */ } .wetter-beschreibung { font-size: 1.2em; text-transform: capitalize; /* "leichter regen" -> "Leichter Regen" */ color: inherit; } .wetter-details { display: flex; justify-content: space-around; width: 100%; margin-top: 15px; padding: 15px 0; border-top: 1px solid #e0e0e0; font-size: 0.9em; text-align: center; color: inherit; } /* * Dynamische Hintergrundklassen, die von JavaScript basierend auf dem Wetter gesetzt werden. */ .weather-bg-default { background-color: var(--card-bg); color: var(--text-color); } /* Tag */ .weather-bg-clear-day { background: linear-gradient(to top, #56CCF2, #2F80ED); color: white; border-color: #2F80ED; } .weather-bg-cloudy-day { background: linear-gradient(to top, #bdc3c7, #2c3e50); color: white; border-color: #2c3e50; } .weather-bg-rainy-day { background: linear-gradient(to top, #606c88, #3f4c6b); color: white; border-color: #3f4c6b; } /* Nacht */ .weather-bg-clear-night { background: linear-gradient(to top, #232526, #414345); color: white; border-color: #232526; } .weather-bg-cloudy-night { background: linear-gradient(to top, #323640, #14151a); color: white; border-color: #14151a; } .weather-bg-rainy-night { background: linear-gradient(to top, #2c3e50, #161e29); color: white; border-color: #161e29; } /* Spezialwetter */ .weather-bg-storm { background: linear-gradient(to top, #1F1C2C, #928DAB); color: white; border-color: #1F1C2C; } .weather-bg-snow { background: linear-gradient(to top, #e6dada, #a7a6cb); color: #333; border-color: #a7a6cb; } .weather-bg-mist { background: linear-gradient(to top, #acb6e5, #86fde8); color: #333; border-color: #acb6e5; } [data-theme="dark"] .wetter-bereich { border-color: var(--card-border); } [data-theme="dark"] .weather-bg-snow, [data-theme="dark"] .weather-bg-mist { color: #e5e7eb; background: #374151; border-color: #4b5563; } /* Anpassung der Text- und Detailfarben für dunkle Hintergründe */ .weather-bg-clear-day .wetter-details, .weather-bg-cloudy-day .wetter-details, .weather-bg-rainy-day .wetter-details, .weather-bg-clear-night .wetter-details, .weather-bg-cloudy-night .wetter-details, .weather-bg-rainy-night .wetter-details, .weather-bg-storm .wetter-details { border-top-color: rgba(255, 255, 255, 0.5); color: white; } /* Anpassung für helle Hintergründe (Schnee, Nebel) */ .weather-bg-snow .wetter-details, .weather-bg-mist .wetter-details { border-top-color: rgba(0, 0, 0, 0.2); color: #333; } .weather-bg-snow .wetter-temp, .weather-bg-mist .wetter-temp { color: #2c3e50; /* Dunklere Farbe für bessere Lesbarkeit */ } /* * Stile für die Wetter-Prognose (Tabelle). */ .wetter-trennlinie { border: none; height: 1px; background-color: var(--card-border); margin: 20px 0; } /* Anpassung der Trennlinie für dunkle Hintergründe */ .weather-bg-clear-day .wetter-trennlinie, .weather-bg-cloudy-day .wetter-trennlinie, .weather-bg-rainy-day .wetter-trennlinie, .weather-bg-clear-night .wetter-trennlinie, .weather-bg-cloudy-night .wetter-trennlinie, .weather-bg-rainy-night .wetter-trennlinie, .weather-bg-storm .wetter-trennlinie { background-color: rgba(255, 255, 255, 0.3); } #wetter-prognose { width: 100%; } .prognose-tabelle { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.95em; } .prognose-tabelle td { padding: 8px 5px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--card-border); } .weather-bg-clear-day .prognose-tabelle td, .weather-bg-cloudy-day .prognose-tabelle td, .weather-bg-rainy-day .prognose-tabelle td, .weather-bg-clear-night .prognose-tabelle td, .weather-bg-cloudy-night .prognose-tabelle td, .weather-bg-rainy-night .prognose-tabelle td, .weather-bg-storm .prognose-tabelle td { border-bottom-color: rgba(255, 255, 255, 0.2); } .prognose-tabelle td:nth-child(4), /* Temperatur */ .prognose-tabelle td:nth-child(5), /* Regen */ .prognose-tabelle td:nth-child(6) { /* Wind */ text-align: right; white-space: nowrap; } .prognose-wochentag { font-weight: bold; margin-bottom: 5px; } .prognose-icon { width: 40px; height: 40px; } /* ========================================================================== 9. Uhr-Seite Stile ========================================================================== */ .clocks-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 60px; flex-wrap: wrap; /* Uhren brechen auf kleinen Screens um */ width: 100%; padding: 20px; box-sizing: border-box; } .clock-container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .analog-clock { width: 300px; /* Standardgröße etwas kleiner */ height: 300px; max-width: 90vw; /* Passt sich an Bildschirmbreite an */ max-height: 90vw; border: 22px solid #5c3d2e; /* 15px * 1.5, gerundet */ border-radius: 50%; position: relative; background: radial-gradient(circle, #fdf5e6 0%, #f4e9d8 100%); box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 0 5px #5c3d2e; } .analog-clock::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 95%; border: 2px solid #bda27e; border-radius: 50%; } [data-theme="dark"] .analog-clock { border-color: #3e2723; background: radial-gradient(circle, #424242 0%, #212121 100%); box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 5px #3e2723; } .center-dot { width: 22px; /* 15px * 1.5, gerundet */ height: 22px; /* 15px * 1.5, gerundet */ background: radial-gradient(#d4af37, #a07d20); /* Messing-Effekt */ border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; border-radius: 4px; background-color: #333; } [data-theme="dark"] .hand { background-color: #e0e0e0; } [data-theme="dark"] .second-hand { background-color: #e53935; } .hour-hand { width: 10px; /* ~7px * 1.5 */ height: 25%; /* Prozentual zur Uhr */ } .minute-hand { width: 6px; /* 4px * 1.5 */ height: 35%; /* Prozentual zur Uhr */ } .second-hand { width: 3px; /* ~2px * 1.5 */ height: 38%; /* Prozentual zur Uhr */ } .number { position: absolute; width: 100%; height: 100%; text-align: center; font-family: 'Times New Roman', Times, serif; font-size: 2.25em; color: var(--text-color); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } [data-theme="dark"] .number { color: #bdbdbd; } .number div { padding-top: 15px; /* 10px * 1.5 */ } .number1 { transform: rotate(30deg); } .number1 div { transform: rotate(-30deg); } .number2 { transform: rotate(60deg); } .number2 div { transform: rotate(-60deg); } .number3 { transform: rotate(90deg); } .number3 div { transform: rotate(-90deg); } .number4 { transform: rotate(120deg); } .number4 div { transform: rotate(-120deg); } .number5 { transform: rotate(150deg); } .number5 div { transform: rotate(-150deg); } .number6 { transform: rotate(180deg); } .number6 div { transform: rotate(-180deg); } .number7 { transform: rotate(210deg); } .number7 div { transform: rotate(-210deg); } .number8 { transform: rotate(240deg); } .number8 div { transform: rotate(-240deg); } .number9 { transform: rotate(270deg); } .number9 div { transform: rotate(-270deg); } .number10 { transform: rotate(300deg); } .number10 div { transform: rotate(-300deg); } .number11 { transform: rotate(330deg); } .number11 div { transform: rotate(-330deg); } .digital-clock { font-family: 'Orbitron', sans-serif; /* Eine passende futuristische Schriftart (alternativ: system-ui) */ font-size: 2.5em; /* Etwas kleiner für Mobile */ font-weight: bold; color: #00d9ff; /* Leuchtendes Cyan */ background-color: #1a1a1a; /* Sehr dunkles Grau, fast schwarz */ padding: 15px 30px; /* Werte * 1.5 */ border-radius: 8px; text-shadow: 0 0 5px #00d9ff, 0 0 10px #00d9ff; /* Leuchteffekt für den Text */ border: 1px solid rgba(0, 217, 255, 0.3); /* Subtiler leuchtender Rand */ box-shadow: 0 0 20px rgba(0, 217, 255, 0.2); /* Äußerer Schein */ min-width: 200px; text-align: center; } .flag-image { width: 200px; height: 133px; /* Feste Höhe für einheitliche Größe (3:2) */ object-fit: cover; /* Verhindert Verzerrung */ margin-top: 15px; /* Abstand zur digitalen Uhr */ border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.15); } /* ========================================================================== 10. Animationen-Seite Stile ========================================================================== */ .animation-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 20px; text-align: center; width: 90%; /* Responsive Breite */ max-width: 400px; position: relative; /* Erforderlich, damit z-index funktioniert */ z-index: 10; /* Legt die Karte über die Wolken */ } .animation-area { height: 200px; margin: 20px 0; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; overflow: hidden; } .animation-card button { padding: 10px 15px; cursor: pointer; } /* Das universelle animierte Element */ #animated-element { width: 50px; height: 50px; background-color: #e60073; border-radius: 8px; } /* * Die folgenden Klassen und @keyframes-Regeln definieren die 10 verschiedenen CSS-Animationen. */ /* 1. Bewegung */ .anim-move { animation: move 3s ease-in-out infinite alternate; } @keyframes move { from { transform: translateX(-150px) rotate(0deg); } to { transform: translateX(150px) rotate(360deg); } } /* 2. Pulsieren */ .anim-pulse { animation: pulse 1.5s ease-in-out infinite alternate; border-radius: 50%; } @keyframes pulse { from { transform: scale(1); background-color: #00e673; } to { transform: scale(1.5); background-color: #e60073; } } /* 3. Rotation */ .anim-rotate { animation: rotate 4s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 4. Ein-/Ausblenden */ .anim-fade { animation: fade 2s ease-in-out infinite; } @keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* 5. Hüpfen */ .anim-bounce { animation: bounce 1s ease-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-80px); } } /* 6. Farbwechsel */ .anim-color-change { animation: color-change 5s linear infinite; } @keyframes color-change { 0% { background-color: #e60073; } 25% { background-color: #00e673; } 50% { background-color: #0073e6; } 75% { background-color: #e6e600; } 100% { background-color: #e60073; } } /* 7. Verzerren */ .anim-skew { animation: skew 2s ease-in-out infinite alternate; } @keyframes skew { from { transform: skew(0deg, 0deg); } to { transform: skew(30deg, 30deg); } } /* 8. Schütteln */ .anim-shake { animation: shake 0.5s linear infinite; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } /* 9. Wachsen & Schrumpfen */ .anim-grow { animation: grow 2s ease-in-out infinite alternate; } @keyframes grow { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 10. Hineingleiten */ .anim-slide-in { animation: slide-in 4s ease-in-out infinite; } @keyframes slide-in { 0% { transform: translateX(-200px); opacity: 0; } 25% { transform: translateX(0); opacity: 1; } 75% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(200px); opacity: 0; } } /* * Stile für die Auto-Animation am unteren Rand. */ .car-animation-container { width: 100vw; /* Nimmt die volle Breite des Browserfensters ein */ position: absolute; /* Löst das Element aus dem normalen Fluss */ bottom: 0; /* Positioniert es am unteren Rand des Main-Bereichs */ left: 0; /* margin-top: 60px; */ /* Nicht mehr nötig bei absoluter Positionierung */ background-color: #6c757d; /* Ein neutrales Grau für die Straße */ height: 80px; /* Genug Platz für das Auto */ } #moving-car { width: 240px; /* Größe des Autos */ position: absolute; bottom: 0; /* Auto steht auf der Straße */ left: 0; /* Startet links */ animation: drive-back-and-forth 10s linear infinite; } /* * Die Animation lässt das Auto hin und her fahren und dreht es an den Endpunkten. */ @keyframes drive-back-and-forth { 0% { transform: translateX(0) scaleX(1); /* Start links, Blick nach rechts (instant turn from 100% scaleX(-1)) */ } 50% { transform: translateX(calc(100vw - 240px)) scaleX(1); /* Fahrt bis zum rechten Bildschirmrand */ } 50.01% { /* Instant Wendemanöver auf der rechten Seite */ transform: translateX(calc(100vw - 240px)) scaleX(-1); /* Wendemanöver, Blick nach links */ } 100% { transform: translateX(0) scaleX(-1); /* Fahrt zurück nach links, Blick nach links */ } } /* ========================================================================== 11. Shopping-Seite Stile ========================================================================== */ #filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 0 20px; } .filter-btn { padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: pointer; border: 2px solid var(--nav-btn-bg); background-color: transparent; color: var(--nav-btn-bg); border-radius: 20px; transition: all 0.3s; } .filter-btn:hover, .filter-btn.active { background-color: var(--nav-btn-bg); color: var(--header-text); } .products-grid { display: grid; /* Responsives Grid: Erstellt so viele Spalten wie passen, jede mind. 180px breit */ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Teilt den verfügbaren Platz vertikal in exakt 2 gleich große Zeilen auf. */ grid-auto-rows: minmax(350px, auto); /* Automatische Zeilenhöhe */ gap: 30px; width: 100%; padding: 20px; box-sizing: border-box; flex: 1; /* Füllt den verbleibenden Platz im Main-Bereich aus */ min-height: 0; /* Wichtig für Firefox, damit das Grid nicht aus dem Flex-Container bricht */ } .product-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 4px 8px var(--card-shadow); text-align: center; padding: 20px 20px 130px 20px; /* Unten mehr Platz für Button UND Preis */ transition: transform 0.3s, box-shadow 0.3s; display: block; /* Zurück zu Block für absolute Positionierung */ position: relative; /* Wichtig: Bezugspunkt für den Button */ height: 100%; /* WICHTIG: Die Karte füllt die gesamte Höhe der Raster-Zelle aus */ box-sizing: border-box; overflow: hidden; /* Verhindert, dass Inhalt über die Karte hinausragt */ } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px var(--card-shadow); } /* Fixe Höhe für den Titel, damit Kategorie und Farbe immer an derselben Stelle stehen */ .product-card h3 { font-size: 1.2em; height: 3.6em; /* Platz für ca. 3 Zeilen */ margin: 0 0 15px 0; display: flex; align-items: flex-start; /* Text beginnt immer oben im Container */ justify-content: center; overflow: hidden; line-height: 1.2; } /* Reset für alle Paragraphen in der Karte, um ungewollte Abstände zu entfernen */ .product-card p { margin: 0; } /* Spezifische Regeln für den Beschreibungs-Text (Kategorie/Farbe) */ .product-card p:not(.product-price) { margin-bottom: 15px; /* Abstand nach unten (optisch) */ line-height: 1.5; white-space: nowrap; /* WICHTIG: Verhindert Umbruch, damit die Zeilenhöhe konstant bleibt */ overflow: hidden; /* Schneidet zu langen Text ab */ text-overflow: ellipsis; /* Fügt "..." hinzu, wenn Text abgeschnitten wird */ } .product-card img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; } .product-price { font-size: 1.5em; font-weight: bold; color: var(--header-bg); margin: 0; position: absolute; /* Absolute Positionierung */ bottom: 90px; /* Positioniert den Preis direkt über dem Button */ left: 0; width: 100%; /* Nimmt die volle Breite ein */ } .add-to-cart-btn { background-color: var(--nav-btn-bg); color: var(--header-text); border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1em; transition: background-color 0.3s; position: absolute; /* Absolute Positionierung */ bottom: 20px; /* Abstand von unten */ left: 20px; /* Abstand von links */ width: calc(100% - 40px); /* Breite anpassen (100% minus Padding) */ min-height: 3.5em; /* WICHTIG: Reserviert Platz für 2 Zeilen Text, damit der Button in allen Sprachen gleich hoch ist */ display: flex; /* Zentriert den Text im Button vertikal */ align-items: center; justify-content: center; } .add-to-cart-btn:hover { background-color: var(--nav-btn-hover-bg); } /* * Stile für den Warenkorb-Button im Header. */ .cart-header { display: flex; align-items: center; } .cart-header a { background-color: #e67e22; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 20px; /* Gleiche Schriftgröße wie Nav-Links */ font-weight: bold; transition: background-color 0.3s; text-decoration: none; text-align: center; width: 165px; box-sizing: border-box; } .cart-header a:hover { background-color: #d35400; } /* * Stile für die Warenkorb-Seite (warenkorb.html). */ .cart-content { width: 100%; max-width: 900px; padding: 20px; box-sizing: border-box; font-size: 1.2em; text-align: center; } .cart-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .cart-table th, .cart-table td { border: 1px solid var(--table-border); padding: 12px; text-align: left; vertical-align: middle; } .cart-table th { background-color: var(--table-header-bg); color: var(--table-header-text); font-weight: bold; } .cart-table img { border-radius: 5px; } .cart-table td:last-child { font-weight: bold; } .remove-from-cart-btn { background-color: #e74c3c; /* Rot */ color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .remove-from-cart-btn:hover { background-color: #c0392b; /* Dunkleres Rot */ } .cart-total { margin-top: 20px; text-align: right; font-size: 1.5em; color: var(--text-color); padding-right: 0; /* Ist nicht mehr nötig, da die Tabelle 100% Breite hat */ } .checkout-btn { background-color: #28a745; /* Grün für Erfolg/Aktion */ color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1.2em; font-weight: bold; transition: background-color 0.3s; margin-top: 20px; } .checkout-btn:hover { background-color: #218838; } /* ========================================================================== 12. Datenbanken-Seite Stile ========================================================================== */ .db-container { width: 100%; max-width: 1200px; padding: 20px; box-sizing: border-box; } .data-table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .data-table th, .data-table td { border: 1px solid var(--table-border); padding: 12px 15px; text-align: left; } .data-table th { background-color: var(--table-header-bg); color: var(--table-header-text); font-size: 1.1em; } .data-table tbody tr:nth-child(even) { background-color: var(--table-row-even-bg); } .data-table tbody tr:hover { background-color: var(--table-row-hover-bg); } .error-message { color: var(--error-text); background-color: var(--error-bg); border: 1px solid var(--error-border); padding: 15px; border-radius: 5px; } /* ========================================================================== 13. Wetter-Animationen (Regen, Sonne, Blitz) ========================================================================== */ #weather-overlay { position: absolute; /* Ändern auf absolute, um es an 'main' zu binden */ top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Wichtig: Erlaubt Klicks auf Elemente dahinter */ z-index: 1; /* Positioniert die Wettereffekte zwischen Hintergrund und Vordergrund */ overflow: hidden; } /* * Klasse für den Blitzeffekt. Wird kurz von JavaScript hinzugefügt und wieder entfernt. */ .lightning-flash { background-color: white; animation: flash 0.3s ease-out; } /* * Stil für die dunklen Regenwolken, die bei der Regen-Animation erscheinen. * Die Form wird, wie bei den weißen Wolken, durch box-shadow erzeugt. */ .dark-cloud { position: absolute; width: 150px; height: 45px; background: #556270; /* Dunkles Grau */ border-radius: 75px; box-shadow: /* Hauptwolkenkörper */ 120px -40px 0 10px #485461, /* Kleinere Wölbungen */ 40px -50px 0 -5px #556270, 70px -30px 0 0 #485461; animation: move-clouds 20s linear infinite; /* Nutzt die vorhandene Wolken-Animation */ /* z-index wird nicht mehr benötigt, da das Overlay die Schichtung steuert */ } /* * Stil für die Sonne. */ .sun { position: absolute; top: 50px; right: 50px; width: 100px; height: 100px; background-color: #FFD700; /* Goldgelb */ border-radius: 50%; box-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500; animation: pulse-sun 4s ease-in-out infinite; } /* * Stil für einen einzelnen Regentropfen. */ .raindrop { position: absolute; bottom: 100%; width: 1px; height: 20px; background: linear-gradient(to bottom, rgba(0,0,139,0), rgba(0,0,139,0.8)); /* Dunkelblau */ border-radius: 50%; animation: fall 1s linear infinite; } /* * Keyframe-Animationen für die Wettereffekte. */ @keyframes pulse-sun { 0% { transform: scale(1); box-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500; } 50% { transform: scale(1.1); box-shadow: 0 0 45px #FFD700, 0 0 90px #FFA500; } 100% { transform: scale(1); box-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500; } } @keyframes fall { to { transform: translateY(calc(100vh - 200px)); /* Fällt bis zum unteren Rand des main-Bereichs (Viewport-Höhe minus Header und Footer) */ } } @keyframes flash { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } } /* ========================================================================== 14. Spezifische Inhalts-Komponenten ========================================================================== */ /* --- Stile für den "Über Mich"-Bereich auf der index.html --- */ .about-section { background-color: #e7f5ff; /* Heller Blauton für den Hellmodus */ border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 4px 8px var(--card-shadow); padding: 30px; margin: 20px; max-width: 900px; width: 100%; box-sizing: border-box; line-height: 1.6; } /* * Stile für die Tooltips, die auf der Shopping-Seite beim Überfahren der Produkte erscheinen. */ .product-tooltip { position: fixed; background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); padding: 12px 15px; z-index: 1001; /* Muss über allem anderen liegen */ max-width: 250px; pointer-events: none; /* Sorgt dafür, dass der Tooltip nicht selbst auf Mausereignisse reagiert */ font-size: 0.9em; line-height: 1.4; } .product-tooltip h4 { margin: 0 0 10px 0; font-size: 1.1em; color: var(--header-bg); } .product-tooltip .tooltip-divider { border: none; border-top: 1px solid var(--card-border); margin: 10px 0; } .product-tooltip .tooltip-description { font-style: italic; color: var(--text-color); opacity: 0.9; margin-bottom: 10px; } .product-tooltip .tooltip-price { font-weight: bold; margin-top: 10px; } /* Stellt sicher, dass die Sektion im Dunkelmodus den korrekten dunklen Hintergrund hat */ [data-theme="dark"] .about-section { background-color: var(--card-bg); } .about-section h2 { margin-top: 0; } .disclaimer { background-color: #eeeeee; /* Grauer Hintergrund für den Hellmodus */ border-left: 4px solid var(--nav-btn-bg); padding: 15px; margin: 20px 0; } /* Stellt sicher, dass der Disclaimer im Dunkelmodus den dunklen Hintergrund behält */ [data-theme="dark"] .disclaimer { background-color: var(--bg-color); } /* --- Stile für die Impressum/Datenschutz-Seite --- */ .impressum-section { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 4px 8px var(--card-shadow); padding: 30px; margin: 20px; max-width: 900px; width: 100%; box-sizing: border-box; line-height: 1.6; } /* Spezifische Regel für den Dunkelmodus auf der Impressum-Seite */ [data-theme="dark"] .impressum-section a { color: orange; } /* ========================================================================== 16. Rainbow ========================================================================== */ .rainbow { position: absolute; top: 0; /* Positioniert den Regenbogen oben */ left: 0; /* Positioniert den Regenbogen links */ width: 400px; /* Breite des Bogens */ height: 400px; /* Höhe des Bogens */ border-radius: 0 0 400px 0; /* Macht es zu einem Viertelkreis unten rechts */ overflow: hidden; /* Versteckt Teile außerhalb des Halbkreises */ z-index: 2; /* Über den Wolken, unter der Animationskarte */ opacity: 0; /* Startet unsichtbar */ animation: rainbow-fade-in-out 6s ease-in-out forwards; /* Animation */ /* Erzeugt die Regenbogenfarben mit radial-gradient */ background: radial-gradient( circle at 0% 0%, /* Mittelpunkt des Kreises ist oben links im Element */ transparent 0, transparent 200px, /* Innerer transparenter Bereich - bleibt unverändert */ rgba(148, 0, 211, 0.5) 200px, /* Violet mit reduzierter Deckkraft */ rgba(148, 0, 211, 0.5) 208px, rgba(75, 0, 130, 0.5) 208px, /* Indigo mit reduzierter Deckkraft */ rgba(75, 0, 130, 0.5) 216px, rgba(0, 0, 255, 0.5) 216px, /* Blue mit reduzierter Deckkraft */ rgba(0, 0, 255, 0.5) 224px, rgba(0, 255, 0, 0.5) 224px, /* Green mit reduzierter Deckkraft */ rgba(0, 255, 0, 0.5) 232px, rgba(255, 255, 0, 0.5) 232px, /* Yellow mit reduzierter Deckkraft */ rgba(255, 255, 0, 0.5) 240px, rgba(255, 127, 0, 0.5) 240px, /* Orange mit reduzierter Deckkraft */ rgba(255, 127, 0, 0.5) 248px, rgba(255, 0, 0, 0.5) 248px, /* Red mit reduzierter Deckkraft */ rgba(255, 0, 0, 0.5) 256px, transparent 256px /* Äußerer transparenter Bereich */ ); } @keyframes rainbow-fade-in-out { 0% { opacity: 0; } 10% { opacity: 1; } /* Schnell einblenden */ 90% { opacity: 1; } /* Lange sichtbar bleiben */ 100% { opacity: 0; } /* Ausblenden */ } /* ========================================================================== 15. Toast Notification ========================================================================== */ .toast-notification { position: fixed; top: 90px; /* Etwas unter dem Header */ right: 20px; background-color: #28a745; /* Erfolgs-Grün */ color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1002; /* Über allen anderen Elementen */ font-size: 1em; font-weight: bold; opacity: 0; transform: translateX(100%); /* Startet außerhalb des Bildschirms rechts */ animation: slideInAndOut 4s ease-in-out forwards; } @keyframes slideInAndOut { 0% { opacity: 0; transform: translateX(100%); } 10% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(100%); } } [data-theme="dark"] .toast-notification { background-color: #34d399; /* Ein helleres Grün für den Dark Mode */ color: #111827; /* Dunkler Text für besseren Kontrast */ } /* ========================================================================== 19. Cart Counter Badge ========================================================================== */ /* Stile für den Warenkorb-Zähler in der Navigation */ .nav-link-with-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; /* NEU: Zentriert den Text im Button wieder korrekt */ } .cart-badge { position: absolute; top: -5px; right: -15px; background-color: var(--accent-color, red); /* Nutzt deine Akzentfarbe oder rot als Fallback */ color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; font-weight: bold; display: none; /* Wird per JS auf 'flex' gesetzt, wenn Artikel im Korb sind */ justify-content: center; align-items: center; border: 2px solid var(--bg-color); /* Rand in Hintergrundfarbe für besseren Kontrast */ z-index: 100; /* WICHTIG: Stellt sicher, dass der Zähler über den anderen Buttons liegt */ } /* ========================================================================== 20. Pagination (Shopping) ========================================================================== */ .pagination-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 20px 0; width: 100%; } .pagination-controls span { font-weight: bold; font-size: 1.1em; } .pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; border-color: #ccc; color: #ccc; } /* ========================================================================== 21. Search Bar (Shopping) ========================================================================== */ .search-container { width: 100%; max-width: 600px; /* Begrenzt die Breite der Suchleiste */ margin: 0 auto 20px auto; /* Zentriert die Suchleiste */ padding: 0 20px; box-sizing: border-box; } #search-input { width: 100%; padding: 12px 15px; font-size: 1em; border-radius: 20px; border: 2px solid var(--card-border); background-color: var(--card-bg); color: var(--text-color); } /* ========================================================================== 22. Product Detail Modal ========================================================================== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 2000; /* Über allem anderen */ } .modal-content { background-color: var(--card-bg); padding: 30px; border-radius: 10px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; } .modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 2em; font-weight: bold; color: var(--text-color); cursor: pointer; border: none; background: none; } /* ========================================================================== 17. Image Gallery (bilder.html) ========================================================================== */ .image-gallery { display: grid; /* Passt die Spaltenanzahl dynamisch an die verfügbare Breite an */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Automatische Spalten */ gap: 20px; padding: 20px; width: 100%; max-width: 1200px; /* Begrenzt die maximale Breite der Galerie */ box-sizing: border-box; } .image-gallery img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out; } .image-gallery img:hover { transform: scale(1.03); /* Leichtes Vergrößern beim Hover */ } /* ========================================================================== 18. Fullscreen Image Overlay (Lightbox) ========================================================================== */ .fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); /* Dunkler, halbtransparenter Hintergrund */ display: flex; justify-content: center; align-items: center; z-index: 1002; /* Stellt sicher, dass es über allem anderen liegt */ cursor: pointer; /* Zeigt an, dass man klicken kann, um es zu schließen */ } .fullscreen-overlay img { /* Das Bild darf maximal 90% der Bildschirmbreite oder -höhe einnehmen */ max-width: 90vw; max-height: 90vh; /* Verhindert, dass das Bild die Hover-Effekte aus der Galerie erbt */ transform: none; box-shadow: 0 0 25px rgba(0,0,0,0.5); border-radius: 4px; } /* ========================================================================== 23. Success Modal (Checkout) ========================================================================== */ .success-modal-content { background-color: var(--card-bg); padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); max-width: 400px; width: 90%; animation: popIn 0.3s ease-out; display: flex; flex-direction: column; align-items: center; } .success-icon { font-size: 60px; color: #28a745; margin-bottom: 20px; line-height: 1; } .success-title { font-size: 1.5em; margin: 0 0 10px 0; color: var(--text-color); } .success-close-btn { background-color: #28a745; color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: transform 0.2s, background-color 0.3s; margin-top: 20px; } .success-close-btn:hover { background-color: #218838; transform: scale(1.05); } @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* ========================================================================== 24. Media Queries für Mobile Geräte ========================================================================== */ @media (max-width: 768px) { .header-container { flex-direction: column; padding: 10px; } .navbar { width: 100%; } .header-right { justify-content: center; margin-top: 15px; } footer { flex-direction: column; height: auto; padding: 20px; gap: 10px; } }