nutzen: */
main.content article.item img {
width: 100%;
height: 250px; /* Feste Höhe NUR in der Grid-Übersicht! */
object-fit: cover;
display: block;
}
/* Kopfzeile (z.B. der Titel "Feuerwerk") */
article.item header {
padding: 10px 15px 0 15px;
}
article.item header h5 {
color: #FFC300; /* Gold-Akzent */
margin: 0;
font-size: 1.1em;
text-align: center;
}
/* Fußzeile (Aufnahmedaten) */
article.item footer {
padding: 10px 15px;
font-size: 0.9em;
background-color: #0A0A0A; /* Dunklere Fußzeile zur Abgrenzung */
}
/* Styling für den Zurück-Button */
article.item button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
display: block; /* Volle Breite */
margin: 15px 0 0 0;
transition: background-color 0.3s;
}
article.item button:hover {
background-color: #FFC300; /* Gold-Hover */
color: black;
}
/* Formatierung der Aufnahmedaten () */
#aufnahmedaten {
font-family: monospace;
white-space: pre-wrap; /* Wichtig, um den Textumbruch zu erlauben */
line-height: 1.4;
color: #F0F0F0;
border-top: 1px dashed #333;
padding-top: 5px;
margin-bottom: 5px;
}
/* Bildunterschrift im Footer */
article.item footer i {
display: block;
text-align: right;
color: #999;
font-size: 0.8em;
}
/* Styling für die Steuerungs-Box (Paginierung) */
#steuerung {
grid-column: 1 / -1; /* Über die gesamte Breite */
display: flex !important; /* Erzwingt Flex-Layout über Grid-Definition */
justify-content: center;
gap: 15px;
padding: 20px 0;
}
/* Styling der Links (falls es sich um Formular-Buttons handelt, müssen diese extra gestylt werden) */
#steuerung a {
/* Beispiel-Styling für Links, falls sie als Buttons dienen */
background-color: #007BFF;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
#steuerung a:hover {
background-color: #FFC300; /* Gold-Hover-Effekt */
color: black;
}
/* 1. Basis-Styling für die Erklärungstexte */
#content .story h4.Info {
cursor: pointer; /* Zeigt an, dass der Text interaktiv ist */
color: #FFC300; /* Gold-Akzentfarbe für die Begriffe */
margin-bottom: 0.5em;
padding-bottom: 3px;
border-bottom: 1px dashed #333;
}
/* 2. Styling der verborgenen Erklärung */
#content .story .hide {
display: none;
/* Verwenden Sie eine dezente, dunkle Box zur Hervorhebung des Textes */
background-color: #1A1A1A;
border-left: 4px solid #007BFF; /* Blauer Akzentstreifen */
padding: 10px 15px;
margin-top: 5px;
margin-bottom: 1.5em;
border-radius: 0 0.5em 0.5em 0;
/* Optionale CSS-Animation (funktioniert nur, wenn NICHT display:none verwendet wird) */
/* Da Sie display: none verwenden, ist die Transition hier eingeschränkt, aber der Style ist besser. */
}
/* 3. Der tatsächliche Hover-Effekt (beibehalten, aber gestylt) */
#content .story .Info:hover + .hide {
display: block; /* Einblenden */
}
/* 4. Optional: Stylen eines Icons (wenn in HTML hinzugefügt) */
.help-icon {
font-size: 0.8em;
font-weight: normal;
background-color: #007BFF;
color: white;
border-radius: 50%;
padding: 0 5px;
margin-left: 5px;
line-height: 1.2;
display: inline-block;
vertical-align: top;
}
/* Styling der EXIF-Datenliste () */
dl.exif-data {
font-family: 'Montserrat', sans-serif; /* Oder die Hauptschriftart */
display: grid;
/* Definiert zwei Spalten: eine schmale für den Begriff (dt) und eine breite für den Wert (dd) */
grid-template-columns: max-content 1fr;
gap: 0px 10px; /* Kein vertikaler, aber horizontaler Abstand zwischen Begriff und Wert */
margin: 0;
padding: 10px 0;
line-height: 1.4;
border-top: 1px dashed #333;
color: #F0F0F0;
}
/* Begriffe (Kamera, ISO, Blende, etc.) */
dl.exif-data dt {
font-weight: 500;
color: #999; /* Graue Farbe, um sich leicht vom Wert abzuheben */
text-align: right;
grid-column: 1;
}
/* Werte (Canon EOS, 100, f/8, etc.) */
dl.exif-data dd {
margin-left: 0;
font-weight: bold;
color: #F0F0F0;
text-align: left;
grid-column: 2;
}
/* Der Footer-Text (Feuerwerksbilder) sollte ebenfalls angepasst werden, falls noch nicht geschehen */
article.item footer i {
display: block;
text-align: right;
color: #999;
font-size: 0.8em;
padding-top: 5px;
}
/* Footer */
footer {
text-align: center;
font-size: 0.8em;
padding: 10px;
}
/* 1. Haupt-Container der Galerie-Liste */
#sectionLinks ul {
/* Verwendung von CSS Grid für flexible Mehrspalten-Anordnung */
display: grid;
/* Responsive Spalten: Jede Spalte ist mindestens 90px breit und füllt den verfügbaren Platz */
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 6px; /* Kleiner Abstand zwischen den Kacheln */
padding: 0;
list-style: none;
margin-top: 10px;
}
/* 2. Styling der einzelnen Links als Buttons */
#sectionLinks li {
margin: 0;
padding: 0;
}
#sectionLinks li a {
/* Stellt sicher, dass die Links die gesamte Kachel füllen */
display: block;
text-align: center;
padding: 6px 4px;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
/* Design-Anpassung */
color: #F0F0F0; /* Heller Text */
background-color: #1A1A1A; /* Dunkler Kachel-Hintergrund */
border: 1px solid #333;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}
/* 3. Hover- und Aktive-Zustände */
#sectionLinks li a:hover {
background-color: #FFC300; /* Gold-Akzent auf Hover */
color: black;
border-color: #FFC300;
}
/* 4. Aktuelle Seite hervorheben (optional) */
/* Wenn Ihre PHP-Logik der aktuellen Seite eine Klasse 'active' gibt, verwenden Sie diese.
Andernfalls können Sie hier die Gold- oder Blau-Akzentfarbe für die aktuelle Seite nutzen. */
#sectionLinks li a.active {
background-color: #007BFF; /* Blaue Akzentfarbe für die aktive Seite */
color: white;
border-color: #007BFF;
}
/* 1. Hamburger-Button Basis-Styling (Nur Mobile) */
#menu-toggle {
display: none; /* Standardmäßig auf Desktop versteckt */
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
z-index: 1000; /* Stellt sicher, dass es über allem liegt */
padding: 10px;
}
/* 2. Hamburger-Icon Linien */
#menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #FFC300; /* Gold-Akzent */
border-radius: 2px;
transition: all 0.3s ease-in-out;
}
/* 3. Mobile Navigation: Initialer Zustand (versteckt) */
#mobile-nav {
display: none; /* Standardmäßig versteckt */
position: fixed; /* Fixiert über dem gesamten Bildschirm */
top: 0;
left: 0;
width: 80%; /* Die Navigation nimmt 80% des Bildschirms ein */
height: 100%;
background-color: #0A0A0A; /* Dunkler Hintergrund */
overflow-y: auto; /* Scrollbar, falls Inhalt zu lang */
z-index: 999;
padding-top: 60px; /* Platz für das Hamburger-Icon */
}
/* 4. Zustand, wenn die Navigation sichtbar ist (wird per JS gesetzt) */
#mobile-nav.open {
display: block;
}
.fireworks-banner {
/* Feste Höhe und NEUE variable Breite (Min/Max) */
height: 50px;
min-width: 320px; /* NEU: Minimale Breite für mobile Geräte */
max-width: 768px;
width: 100%;
/* Visuelle Gestaltung */
background: linear-gradient(90deg, #ff0000, #ff8c00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); /* Regenbogenverlauf */
background-size: 150% 100%; /* Für die Animation */
color: #fff;
font-family: 'Arial Black', Gadget, sans-serif;
text-align: center;
line-height: 50px; /* Text vertikal zentrieren */
overflow: hidden;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 2px #000;
display: block;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
/* Dynamische Schriftgrößenanpassung mit VW-Einheit */
.fireworks-banner span {
/* 3vw bedeutet: 3% der aktuellen Viewport-Breite.
- Bei 320px Breite: ca. 9.6px (zu klein, daher min-font-size nötig)
- Bei 768px Breite: ca. 23px (gute Größe)
*/
font-size: 3vw;
/* Fallback und Mindestgröße mit Media Query */
min-font-size: 14px; /* Wird von manchen Browsern ignoriert, daher Media Query unten */
white-space: nowrap; /* Verhindert Zeilenumbruch */
}
#advertContainer.mobile{display:block;}
/* Feste Mindest-Schriftgröße für kleine Banner (unter 468px) */
@media (max-width: 468px) {
.fireworks-banner span {
font-size: 14px; /* Feste, gut lesbare Größe für kleine Screens */
}
}
/* Animation für den Hintergrund (optional) */
@keyframes glowing-background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.fireworks-banner:hover {
animation: glowing-background 8s ease infinite;
}
/* Ab ca. 768px (Tablet-Ansicht) */
@media (min-width: 48em) {
main.content {
/* Zwei Spalten gleicher Breite */
grid-template-columns: repeat(2, 1fr);
}
}
/* Ab ca. 1200px (Desktop-Ansicht) */
@media (min-width: 75em) {
main.content {
/* Drei Spalten für eine dichte Galerie-Ansicht */
grid-template-columns: repeat(3, 1fr);
}
}
/* Media Queries beibehalten und optimieren */
@media (min-width: 30em) {
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
}
#navBar li {
display: block; /* Wichtig für die vertikale Liste */
}
#globalNav {
text-align: left; /* Navigation linksbündig */
padding-left: 15px;
}
#sectionLinks ul {
grid-template-columns: repeat(2, 1fr); /* 2 Spalten im Desktop-Sidebar */
}
}
@media (max-width: 768px) {
header, nav, main, article, section, aside, footer {
border: none;
padding: 10px 5px; /* Etwas mehr Rand als 3px */
}
#siteName {
font-size: 1.8em;
}
#menu-toggle {
display: block;
}
/* Verstecke die Sidebar in der Standardansicht */
aside:not(#mobile-nav) {
display: none;
}
/* Stelle sicher, dass der Header das Logo und den Button gut zeigt */
header {
position: relative; /* Wichtig für die Positionierung des Icons */
padding-top: 15px;
padding-bottom: 15px;
}
/* Header-Bild und globale Nav verstecken oder anpassen */
#headerImage, #globalNav {
/* Option 1: GlobalNav wird Teil des Hamburger-Menüs */
/* display: none; */
/* Option 2: GlobalNav wird in den Header integriert */
}
/* 6. Hamburger Icon Animation (Optional) */
#menu-toggle.active .bar:nth-child(2) {
opacity: 0;
}
#menu-toggle.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#menu-toggle.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* 1. Body Padding anpassen */
body {
/* Gibt dem Content Platz über dem 50px hohen Footer. */
/* Wir nehmen 60px, um etwas Luft nach oben zu haben. */
padding-bottom: 60px;
}
/* 2. Container Höhe steuern und Bildgröße anpassen */
#advertContainer {
position: fixed; /* Fixiert es am Viewport */
bottom: 0;
left: 0;
width: 100%;
/* Design-Anpassungen */
background-color: #0A0A0A; /* Dunkler Hintergrund, passend zum Design */
border-top: 2px solid #FFC300; /* Goldene Linie als Trennung */
z-index: 998; /* Unter dem Hamburger-Menü */
text-align: center;
overflow: hidden; /* Verhindert ungewolltes Scrollen in der Box */
height: 50px; /* Die fixe Höhe des Containers */
padding: 0; /* Entfernen Sie das Padding, um die 50px Höhe exakt zu steuern */
display: flex; /* Stellt sicher, dass die Adverts zentriert sind */
align-items: center; /* Vertikal zentrieren */
justify-content: center; /* Horizontal zentrieren */
}
/* 3. Die einzelnen Werbe-Items horizontal anordnen */
#advertContainer .advert {
display: inline-block;
margin: 0 5px;
/* Die Werbeboxen im Footer kleiner machen, um mehrere anzuzeigen */
max-width: 150px;
}
/* 4. Texte und der Werbung im Footer verstecken, um Platz zu sparen */
#advertContainer pre,
#advertContainer h3 {
display: none;
}
/* Nur die Bilder sollen sichtbar bleiben */
#advertContainer img {
height: 50px;
width: auto;
}
/* 3. Bild und Text (falls vorhanden) im Footer anpassen */
#advertContainer img {
height: 40px; /* Bild etwas kleiner als der Container */
width: auto;
/* Falls Sie mehrere Ads nebeneinander zeigen: */
max-width: 100px;
}
#advertContainer h3 {
/* Kurzer Text oder Banner-ID, falls benötigt */
font-size: 14px;
color: white;
margin: 0 10px;
}
}
/* 7. Desktop-Media Query: Sidebar muss wieder sichtbar sein */
@media (min-width: 769px) {
/* Verstecke den Hamburger-Button auf dem Desktop */
#menu-toggle {
display: none;
}
/* Zeige die Sidebar wieder an der alten Position */
aside {
display: block !important; /* Überschreibt die mobile Regel */
}
#mobile-nav {
/* Zurücksetzen der mobilen Styles */
position: static;
width: auto;
height: auto;
padding: 0;
}
#advertContainer {
position: static; /* Normaler Fluss */
padding: 10px; /* Normale Desktop-Polsterung */
}
body {
padding-bottom: 0;
}
/* ... weitere Desktop-Anpassungen ... */
}