/* === ALLGEMEINE STILE & RESET === */
/* Setzt Standard-Abstände, Box-Modell und Schriftart für alle Elemente */
* {
    margin: 0; /* Entfernt Standard-Außenabstand */
    padding: 0; /* Entfernt Standard-Innenabstand */
    box-sizing: border-box; /* Box-Modell: padding und border werden in der Breite/Höhe eingerechnet */
    font-family: 'Arial', sans-serif; /* Standardschriftart für die gesamte Seite */
}

/* Stellt sicher, dass html und body die volle Höhe einnehmen */
html, body {
    height: 100%;
}

/* Grundlegende Stile für den Körper der Seite */
body {
    background-color: #f5f5f5; /* Hellgrauer Fallback-Hintergrund, falls Bilder nicht laden */
    color: #333; /* Dunkelgraue Standard-Schriftfarbe */
    line-height: 1.6; /* Verbessert die Lesbarkeit durch mehr Zeilenabstand */
    display: flex; /* Aktiviert Flexbox für das Body-Element */
    flex-direction: column; /* Stapelt Kindelemente vertikal (Header, Main, Footer) */
}

/* === HINTERGRUND-CONTAINER === */
/* Container, der das feststehende (fixed) Hintergrundbild für die ganze Seite hält */
.background-container {
    flex: 1 0 auto; /* Füllt den verfügbaren Platz zwischen Header und Footer (flex: grow shrink basis) */
    background-size: cover; /* Skaliert das Bild, um den Container vollständig zu bedecken */
    background-position: center; /* Zentriert das Hintergrundbild */
    background-attachment: fixed; /* Bild scrollt nicht mit (Parallax-Effekt) */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
}

/* === HEADER-BEREICH === */
/* Stil für den Kopfbereich der Seite */
.header-section {
    padding: 20px 0; /* Innenabstand oben und unten */
    color: white; /* Schriftfarbe im Header */
    position: relative; /* Positionierungskontext für das ::before-Pseudoelement */
    background: transparent; /* Transparenter Hintergrund, da das BG-Bild durchscheinen soll */
}
/* Overlay für bessere Lesbarkeit des Headertextes über dem Hintergrundbild */
.header-section::before {
    content: ''; /* Notwendig für Pseudoelemente */
    position: absolute; /* Positioniert sich über dem Header */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1); /* Leichtes, dunkles Transparent-Overlay */
    z-index: 1; /* Liegt unter der .header-inner (z-index: 2) */
}
/* Container für Logo und Headline, zentriert den Inhalt */
.header-inner {
    display: flex; /* Aktiviert Flexbox für die Anordnung von Logo und Headline */
    justify-content: space-between; /* Verteilt Logo (links) und Headline (rechts) */
    align-items: center; /* Zentriert Elemente vertikal */
    max-width: 1200px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container auf der Seite */
    padding: 0 20px; /* Innenabstand links/rechts */
    position: relative; /* Positionierungskontext für z-index */
    z-index: 2; /* Stellt sicher, dass der Inhalt über dem ::before-Overlay liegt */
}
/* Stil für den Logo-Bereich */
.logo {
    flex: 0 0 auto; /* Verhindert, dass das Logo wächst oder schrumpft */
}
/* Stil für das Logo-Bild selbst */
.logo img {
    max-width: 150px; /* Begrenzt die maximale Breite des Logos */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
}
/* Stil für die Hauptüberschrift/den Titel der Seite */
.headline {
    flex: 1; /* Nimmt den verfügbaren Platz ein, um die Headline zu zentrieren */
    text-align: center; /* Zentriert den Text */
}
/* Stil für den Link in der Headline (falls er verlinkt ist) */
.headline a {
    color: #F7EB95; /* Spezifische Gelbton-Farbe */
    text-decoration: none; /* Entfernt die Standard-Unterstreichung des Links */
    font-size: 48px; /* Sehr große Schriftgröße */
    font-weight: bold; /* Fettgedruckt */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Schatten für bessere Lesbarkeit auf dem BG */
}

/* === HAUPTNAVIGATION (MENÜ DER ERSTEN EBENE) === */
/* Stil für die Navigationsleiste des Hauptmenüs */
.main-navigation {
    background-color: rgba(51, 51, 51, 0.8); /* Dunkelgrau, transparent */
    padding: 10px 0; /* Innenabstand oben/unten */
    position: relative; /* Positionierungskontext */
    z-index: 10; /* Hoher Wert, um über anderen Inhalten zu liegen */
}
/* Container für die Navigationsliste, zentriert den Inhalt */
.nav-inner {
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 20px; /* Innenabstand links/rechts */
}
/* Stil für die unsortierte Liste der Navigationspunkte */
.nav-list {
    display: flex; /* Listenelemente nebeneinander anordnen */
    list-style: none; /* Entfernt die Aufzählungspunkte */
    flex-wrap: wrap; /* Erlaubt Umbruch bei vielen Einträgen oder kleiner Bildschirmbreite */
}
/* Stil für die einzelnen Listenelemente (Menüpunkte) */
.nav-list li {
    margin-right: 20px; /* Abstand nach rechts zwischen den Menüpunkten */
    position: relative; /* Positionierungskontext für eventuelle Dropdowns */
}
/* Stil für die Links im Hauptmenü */
.nav-list a {
    color: #e9932b; /* Orange Hauptfarbe für Links */
    text-decoration: none; /* Entfernt Unterstreichung */
    padding: 10px 0; /* Innenabstand oben/unten für größere Klickfläche */
    display: block; /* Macht den gesamten Linkbereich klickbar */
    font-weight: bold; /* Fettgedruckt */
}
/* Stil für Hover- und aktuellen (aktiven) Link im Hauptmenü */
.nav-list a:hover,
.nav-list a.current { /* Stil für den aktiven Link */
    color: #ccc; /* Hellgraue Farbe beim Drüberfahren oder wenn aktiv */
}

/* === SUBNavigation (MENÜ DER ZWEITEN EBENE) === */
/* Stil für die Navigationsleiste der zweiten Ebene (z.B. unter "Music from the Past") */
.sub-navigation {
    background-color: rgba(68, 68, 68, 0.8); /* Etwas helleres Grau als Hauptnav, transparent */
    padding: 10px 0; /* Innenabstand oben/unten */
    position: relative; /* Positionierungskontext */
    z-index: 10; /* Hoher Wert, um über anderen Inhalten zu liegen */
}
/* Stil für die unsortierte Liste der Sub-Navigationspunkte */
.sub-nav-list {
    display: flex; /* Listenelemente nebeneinander anordnen */
    list-style: none; /* Entfernt Aufzählungspunkte */
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert die Liste */
    padding: 0 20px; /* Innenabstand links/rechts */
    flex-wrap: wrap; /* Erlaubt Umbruch */
}
/* Stil für die einzelnen Listenelemente in der Sub-Nav */
.sub-nav-list li {
    margin-right: 25px; /* Abstand nach rechts zwischen den Punkten */
}
/* Stil für die Links in der Sub-Navigation */
.sub-nav-list a {
    color: #e9932b; /* Orange Hauptfarbe */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-size: 14px; /* Etwas kleinere Schriftgröße als Hauptnav */
    font-weight: bold; /* Fettgedruckt */
}
/* Stil für Hover- und aktuellen Link in der Sub-Navigation */
.sub-nav-list a:hover,
.sub-nav-list a.current { /* Stil für den aktiven Link */
    color: #ccc; /* Hellgrau bei Hover/Aktiv */
}

/* === SUB-SUB-NAVIGATION (MENÜ DER DRITTEN EBENE) === */
/* Stil für die Navigationsleiste der dritten Ebene (z.B. unter "Mihalis") */
.sub-sub-navigation {
    background-color: rgba(99, 99, 99, 0.7); /* Noch helleres Grau, transparent */
    padding: 10px 0; /* Innenabstand oben/unten */
    text-align: center; /* Zentriert den Inhalt der Navigation */
}
/* Stil für die unsortierte Liste der Sub-Sub-Navigationspunkte */
.sub-sub-nav-list {
    display: flex; /* Listenelemente nebeneinander anordnen */
    list-style: none; /* Entfernt Aufzählungspunkte */
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert die Liste */
    padding: 0 20px; /* Innenabstand links/rechts */
    flex-wrap: wrap; /* Erlaubt Umbruch */
    gap: 35px; /* Abstand zwischen den Elementen (moderne Alternative zu margin-right) */
}
/* Stil für die einzelnen Listenelemente in der Sub-Sub-Nav (Kann evtl. durch 'gap' ersetzt werden) */
.sub-sub-nav-list li {
    margin-right: 0px; /* Abstand nach rechts zwischen den Punkten */
}
/* Stil für die Links in der Sub-Sub-Navigation */
.sub-sub-nav-list a {
    color: #e9932b; /* Orange Hauptfarbe */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-size: 13px; /* Noch etwas kleinere Schriftgröße */
}
/* Stil für Hover- und aktuellen Link in der Sub-Sub-Navigation */
.sub-sub-nav-list a:hover,
.sub-sub-nav-list a.current { /* Stil für den aktiven Link */
    color: #ccc; /* Hellgrau bei Hover/Aktiv */
}

/* === HAUPTINHALTSBEREICH (MAIN) === */
/* Container für den Hauptinhalt der Seite */
.main-content {
    max-width: 1200px; /* Maximale Breite des Inhalts */
    margin: 60px auto; /* Hoher Außenabstand oben/unten, zentriert horizontal */
    padding: 0 20px; /* Innenabstand links/rechts für kleine Bildschirme */
    background-color: rgba(255, 255, 255, 0.2); /* Sehr transparenter weißer Hintergrund */
    backdrop-filter: blur(1px); /* Leichter Weichzeichner-Effekt für das Hintergrundbild dahinter */
    border-radius: 12px; /* Abgerundete Ecken */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Schatten für Tiefe */
    padding: 40px; /* Innenabstand für den Content */
    position: relative; /* Positionierungskontext */
    z-index: 5; /* Liegt über dem Hintergrund, aber unter den Navigationsleisten */
}

/* === INTRO-TEXT / EINLEITUNG === */
/* Stil für einen hervorgehobenen Intro-Textbereich (z.B. "Under Construction") */
.intro-text {
    background-color: rgba(51, 51, 51, 0.85); /* Dunkelgrau, transparent */
    color: #F7EB95; /* Gelbton-Schriftfarbe (wie Headline) */
    padding: 5px; /* Wenig Innenabstand */
    border-radius: 10px; /* Abgerundete Ecken */
    margin-bottom: 40px; /* Großer Abstand nach unten zum folgenden Content */
    text-align: center; /* Zentrierter Text */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
}
/* Stil für den Paragraph innerhalb des Intro-Textes */
.intro-text p {
    font-size: 30px; /* Große Schriftgröße */
    margin: 0; /* Entfernt Standard-Abstand des Paragraphs */
}

/* === FOOTER (FUSSZEILE) === */
/* Stil für die Fußzeile der Seite */
.footer {
    background-color: rgba(51, 51, 51, 0.9); /* Dunkelgrau, weniger transparent */
    color: #fff; /* Weiße Schriftfarbe */
    padding: 30px 0 20px; /* Innenabstand oben | links/rechts | unten */
    margin-top: auto; /* Schiebt den Footer an den unteren Rand, wichtig für flex: column auf body */
    position: relative; /* Positionierungskontext */
    z-index: 10; /* Hoher Wert, um über anderen Inhalten zu liegen */
}
/* Container für den Footer-Inhalt, zentriert und arrangiert die Elemente */
.footer-inner {
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 20px; /* Innenabstand links/rechts */
    display: flex; /* Aktiviert Flexbox für die Anordnung der Footer-Blöcke */
    flex-wrap: wrap; /* Erlaubt Umbruch */
    justify-content: space-between; /* Verteilt Links (links) und Social Icons (rechts) */
    align-items: center; /* Zentriert Elemente vertikal */
}
/* Container für die Textlinks im Footer (Impressum, Datenschutz etc.) */
.footer-links {
    display: flex; /* Links nebeneinander anordnen */
    flex-wrap: wrap; /* Erlaubt Umbruch */
    gap: 20px; /* Abstand zwischen den Links */
    margin-bottom: 15px; /* Abstand nach unten zu den Social Icons / Copyright */
}
/* Stil für die Textlinks im Footer */
.footer-links a {
    color: #e9932b; /* Orange Hauptfarbe */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-weight: medium; /* Schriftstärke */
}
/* Hover-Effekt für Textlinks im Footer */
.footer-links a:hover {
    color: #ccc; /* Hellgrau bei Hover */
    text-decoration: none; /* Stellt sicher, dass keine Unterstreichung erscheint */
}
/* Container für die Social-Media-Icons */
.footer-social {
    display: flex; /* Icons nebeneinander anordnen */
    gap: 15px; /* Abstand zwischen den Icons */
    margin-bottom: 0px; /* Abstand nach unten */
    margin-right: 60px; /* Abstand nach rechts (für Ausrichtung) */
}
/* Grundlegender Stil für alle Social-Media-Icons */
.social-icon {
    display: inline-flex; /* Flexbox für einfache Zentrierung des Icons */
    justify-content: center; /* Icon horizontal zentrieren */
    align-items: center; /* Icon vertikal zentrieren */
    width: 40px; /* Feste Breite */
    height: 40px; /* Feste Höhe (Kreis) */
    background-color: #e9932b; /* Orange Hintergrundfarbe */
    color: white; /* Weiße Icon-Farbe */
    border-radius: 50%; /* Macht das Element zu einem Kreis */
    margin: 0 10px; /* Außenabstand links/rechts (könnte durch 'gap' im Parent ersetzt werden) */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-size: 20px; /* Größe des Icons */
    transition: all 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
}
/* Allgemeiner Hover-Effekt für Social-Icons (Bewegung) */
.social-icon:hover {
    transform: translateY(-5px); /* Bewegt das Icon nach oben */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Fügt Schatten hinzu */
}
/* Spezifische Hintergrundfarben für verschiedene Social-Media-Plattformen beim Hover */
.social-icon.facebook:hover { background-color: #1877F2; } /* Facebook Blau */
.social-icon.x-twitter:hover { background-color: #000000; } /* Twitter/Schwarz */
.social-icon.soundcloud:hover { background-color: #ff7700; } /* Soundcloud Orange */
.social-icon.email:hover { background-color: #d44638; } /* E-Mail Rot */
.social-icon.apple:hover { background-color: #000000; } /* Apple Schwarz */
.social-icon.spotify:hover { background-color: #1DB954; } /* Spotify Grün */
.social-icon.youtube:hover { background-color: #FF0000; } /* YouTube Rot */
.social-icon.amazon:hover { background-color: #0DBFF5; } /* Amazon Blau */
.social-icon.qobuz:hover { background-color: #844269; } /* Qobuz Lila */
/* Stil für den Copyright-Text im Footer */
.footer-copyright {
    text-align: left; /* Linksbündig ausgerichtet */
    width: 100%; /* Nimmt die volle Breite ein, um in neue Zeile zu gehen */
    margin-top: 0px; /* Abstand nach oben */
    font-size: 14px; /* Kleine Schriftgröße */
    color: #ccc; /* Hellgraue Schriftfarbe */
}

/* === NACH-OBEN-BUTTON (GOTO-TOP) === */
/* Stil für den Button, der zurück zum Seitenanfang scrollt */
.go-to-top {
    position: fixed; /* Im Viewport fixierte Position */
    bottom: 30px; /* Abstand vom unteren Bildschirmrand */
    right: 30px; /* Abstand vom rechten Bildschirmrand */
    width: 50px; /* Feste Breite */
    height: 50px; /* Feste Höhe (Quadrat, wird durch border-radius zum Kreis) */
    background-color: rgba(233, 147, 43, 0.8); /* Orange, transparent */
    color: white; /* Weißes Pfeil-Icon */
    border-radius: 50%; /* Macht den Button rund */
    text-align: center; /* Zentriert das Icon horizontal */
    line-height: 50px; /* Zentriert das Icon vertikal (muss Höhe entsprechen) */
    font-size: 20px; /* Größe des Pfeil-Icons */
    cursor: pointer; /* Zeigt Mauszeiger als Hand an */
    z-index: 100; /* Sehr hoher Wert, liegt über allem */
    transition: all 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
    display: none; /* Standardmäßig ausgeblendet, wird per JS eingeblendet */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
}
/* Hover-Effekt für den Nach-oben-Button */
.go-to-top:hover {
    background-color: #e9932b; /* Volle Orange-Farbe */
    transform: translateY(-5px); /* Bewegt den Button nach oben */
}

/* === SEITENSPEZIFISCHE HINTERGRUNDBILDER === */
/* Weist den verschiedenen Seiten (erkennbar an body class) unterschiedliche Hintergrundbilder zu */
body.bg-home .background-container { background-image: url('images/background/background-01.jpg'); }
body.bg-releases .background-container { background-image: url('images/background/background-02.jpg'); }
body.bg-artists .background-container { background-image: url('images/background/background-03.jpg'); }
body.bg-shop .background-container { background-image: url('images/background/background-04.jpg'); }
body.bg-gear .background-container { background-image: url('images/background/background-05.jpg'); }
body.bg-gallery .background-container { background-image: url('images/background/background-06.jpg'); }
body.bg-music-from-the-past .background-container { background-image: url('images/background/background-07.jpg'); }
body.bg-references .background-container { background-image: url('images/background/background-08.jpg'); }
body.bg-contact .background-container { background-image: url('images/background/background-09.jpg'); }
body.bg-footer-pages .background-container { background-image: url('images/background/background-10.jpg'); }

/* === NEWSFEED / ARTIKEL-LISTE === */
/* Container für eine Liste von Feed-Items/Artikeln */
.newsfeed {
    display: flex; /* Aktiviert Flexbox */
    flex-direction: column; /* Stapelt Items vertikal */
    gap: 30px; /* Abstand zwischen den Feed-Items */
    margin-top: 20px; /* Abstand nach oben zum Intro-Text */
}
/* Verschiedene Grid-Layouts für die Feed-Items (1, 2, 3, 4 Spalten) */
.gridfeed-1 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; margin-top: 20px; }
.gridfeed-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 20px; }
.gridfeed-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; }
.gridfeed-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 20px; }
/* Stil für ein einzelnes Feed-Item (Artikel, News, etc.) */
.feed-item {
    background-color: rgba(255, 255, 255, 0.7); /* Weißer, transparenter Hintergrund */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 25px; /* Innenabstand */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Hover */
}
/* Hover-Effekt für ein Feed-Item */
.feed-item:hover {
    transform: translateY(-5px); /* Hebt das Item leicht an */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Verstärkter Schatten beim Anheben */
}
/* Stil für das Datum in einem Feed-Item */
.feed-date {
    color: #e9932b; /* Orange */
    font-weight: bold; /* Fettgedruckt */
    margin-bottom: 10px; /* Abstand nach unten zur Überschrift */
    font-size: 14px; /* Kleine Schriftgröße */
}
/* Stil für den Titel in einem Feed-Item */
.feed-title {
    color: #333; /* Dunkelgrau */
    margin-bottom: 15px; /* Abstand nach unten zum Inhalt */
    font-size: 24px; /* Große Schriftgröße */
    border-bottom: 2px solid #e9932b; /* Orangefarbene Unterstreichung */
    padding-bottom: 10px; /* Abstand zwischen Text und Linie */
}
/* Container für den Hauptinhalt eines Feed-Items (Text und Bild) */
.feed-content {
    display: flex; /* Text und Bild nebeneinander */
    gap: 20px; /* Abstand zwischen Text und Bild */
    align-items: flex-start; /* Obere Ausrichtung der Elemente */
}
/* Stil für den Textbereich innerhalb des Feed-Items */
.feed-text {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    color: #555; /* Mittleres Grau für den Fließtext */
    line-height: 1.6; /* Guter Zeilenabstand für Lesbarkeit */
}
/* Entfernt den unteren Abstand von Paragraphs im Feed-Text für konsistentere Abstände */
.feed-text p {
    margin-bottom: 0;
}
/* Stil für den Bildbereich innerhalb des Feed-Items */
.feed-image {
    flex: 0 0 300px; /* Feste Breite von 300px, soll nicht wachsen/schrumpfen */
}
/* Stil für das Bild selbst */
.feed-image img {
    width: 100%; /* Bild füllt den Container (300px) */
    height: auto; /* Erhält das Seitenverhältnis */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
}

/* === RESPONSIVE STILE (MOBILE OPTIMIERUNGEN) === */
/* Stile, die nur auf Bildschirmen mit max. 768px Breite angewendet werden */
@media (max-width: 768px) {
    /* Header: Stapelt Logo und Headline vertikal */
    .header-inner { flex-direction: column; text-align: center; }
    .logo { margin-bottom: 15px; } /* Abstand unter dem Logo */
    /* Navigation: Stapelt Menüpunkte vertikal */
    .nav-list, .sub-nav-list { flex-direction: column; }
    .nav-list li, .sub-nav-list li { margin-right: 0; margin-bottom: 5px; } /* Abstand unten statt rechts */
    /* Für Tabellen: Ermöglicht horizontales Scrollen bei zu breitem Inhalt */
    .gear-table { display: block; overflow-x: auto; }
    /* Filter: Stapelt Filterelemente vertikal */
    .filter-container { flex-direction: column; }
    /* Deaktiviert fixed background auf Mobilgeräten für Performance/UX */
    .background-container { background-attachment: scroll; }
    /* Kleinere Headline-Schriftgröße auf Mobilgeräten */
    .headline a { font-size: 36px; }
    /* Footer: Stapelt Elemente vertikal und zentriert sie */
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; } /* Zentriert die Textlinks */
    /* Kleinere Position und Größe für den Nach-oben-Button auf Mobil */
    .go-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; line-height: 40px; font-size: 16px; }

    /* Mobile Optimierungen für Feed */
    /* Stapelt Text und Bild in Feed-Items vertikal statt nebeneinander */
    .feed-content { flex-direction: column; }
    /* Erzwingt 1-spaltiges Layout für alle Grids auf Mobilgeräten */
    .gridfeed-2, .gridfeed-3, .gridfeed-4 { grid-template-columns: 1fr; }
    /* Bild im Feed: Nimmt die volle Breite ein, begrenzt auf max. 300px und zentriert */
    .feed-image { flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0 auto; }
    /* Kleinere Titel-Schriftgröße auf Mobil */
    .feed-title { font-size: 20px; }
    /* Weniger Innenabstand in Feed-Items auf Mobil */
    .feed-item { padding: 20px; }
}

/* === OPTIONALE STILE FUR UNGLEICHE FEED-AUFTEILUNG === */
/* Ermöglicht eine breitere Textspalte (.wide) neben einer schmaleren Bildspalte */
.feed-content { display: flex; flex-wrap: wrap; } /* Basisstil (ist schon oben definiert) */
.feed-text { flex: 1; min-width: 200px; } /* Basisstil für Text (ist schon oben definiert) */
.feed-text.wide { flex: 2; } /* Klasse für eine Textspalte, die doppelt so breit ist */

/* Stellt sicher, dass auf Mobilgeräten beide Spalten volle Breite einnehmen */
@media (max-width: 768px) {
    .feed-content { flex-direction: column; } /* Stapelt Elemente */
    .feed-text, .feed-text.wide { flex: 1 1 100%; width: 100%; } /* Beide nehmen volle Breite ein */
}