/*
 Theme Name:     Metzgerei Gross
 Theme URI:      https://metzger-gross.de/
 Description:    Ein Child Theme
 Author:         Pascal Thurow
 Template:       salient
 Version:        1.0.0
 License:        GNU General Public License v2 or later
 License URI:    http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:    mein-child

*/
/* --- Design-Variante 6: Die Angebotskarte --- */

/* Allgemeines Reset für Listen, wichtig für die Kartendarstellung */
.weekly-offer-content ul,
.weekly-offer-content li,
.weekly-offer-content ol {
    margin: 0;
    padding: 0;
    list-style: none; /* Entfernt Standard-Listenpunkte */
    text-align: center; /* Zentriert die Liste als Block */
}

/* Hauptbereich der Angebotskarte - der "Rahmen" der Karte */
.weekly-offer-section {
    background-color: #f8f8f8; /* Sehr helles Grau, fast Weiß */
    padding: 40px 25px; /* Angemessener Innenabstand */
    margin: 50px auto; /* Zentriert die Karte horizontal und gibt vertikalen Abstand */
    max-width: 650px; /* Definierte, nicht zu breite Kartenbreite */
    border: 3px solid #e0e0e0; /* Mittlerer grauer Rahmen, sauber */
    border-radius: 10px; /* Sanft abgerundete Ecken der Karte */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Deutlicherer, weicher Schatten, lässt die Karte schweben */
    text-align: center; /* Zentriert den gesamten Textinhalt der Karte */
    font-family: 'Roboto', sans-serif; /* Moderne, lesbare Schriftart (ggf. Google Fonts einbinden) */
    color: #333; /* Dunkler Text für guten Kontrast */
    position: relative; /* Für mögliche zukünftige dekorative Elemente */
    overflow: hidden; /* Stellt sicher, dass Schatten etc. nicht überlaufen */
}

/* Titel des Wochenangebots - der "Headline" der Karte */
.weekly-offer-title {
    color: #4a4a4a; /* Dunkleres Grau */
    font-size: 2.6em; /* Große, prägnante Schrift */
    font-weight: 700; /* Fett für maximale Wirkung */
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 2px dashed #cccccc; /* Eine dezente gestrichelte Linie als Trenner */
    letter-spacing: 0.04em; /* Leichter Zeichenabstand für bessere Lesbarkeit */
    text-transform: uppercase; /* Titel in Großbuchstaben für einen starken Look */
}

/* Inhalt des Wochenangebots - die eigentlichen Angebote auf der Karte */
.weekly-offer-content {
    font-size: 1.1em; /* Gute Basis-Schriftgröße */
    line-height: 1.7; /* Angenehmer Zeilenabstand */
    margin-bottom: 30px; /* Abstand zum Beitragsbild oder Schluss-Text */
}

/* Absätze im Inhalt (z.B. der Schluss-Text) */
.weekly-offer-content p {
    margin-bottom: 1.2em;
    padding: 0 10px; /* Leichter Innenabstand */
}

/* Listenelemente der Angebote - die "Artikel" auf der Karte */
.weekly-offer-content li {
    background-color: #ffffff; /* Weißer Hintergrund für jedes Angebot */
    border: 1px solid #eeeeee; /* Sehr dezenter Rahmen um jedes einzelne Angebot */
    padding: 15px 20px; /* Mehr Polsterung für die Angebote */
    margin-bottom: 10px; /* Abstand zwischen den einzelnen Angeboten */
    font-size: 1.05em; /* Leicht kleinere Schrift als Gesamt-Content */
    font-weight: 500; /* Mittelstark fett */
    color: #555; /* Mittleres Grau für den Text */
    border-radius: 5px; /* Leichte Abrundung der einzelnen Angebote */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sehr leichter Schatten pro Angebot */
    transition: all 0.2s ease-in-out; /* Sanfter Übergang bei Hover */
}
.weekly-offer-content li:hover {
    background-color: #fefefe; /* Leicht aufgehellter Hintergrund beim Hover */
    transform: translateY(-2px); /* Hebt sich leicht an beim Hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Schatten verstärkt sich leicht */
}
.weekly-offer-content li:last-child {
    border-bottom: none; /* Kein Rahmen unten am letzten Listeneintrag */
}

/* Der letzte Absatz (z.B. "Besuchen Sie uns...") */
.weekly-offer-content p:last-of-type {
    font-size: 1.2em;
    font-weight: 600;
    color: #6a6a6a; /* Dunkleres Grau für den Aufruf */
    margin-top: 30px; /* Mehr Abstand zur Liste */
    line-height: 1.5;
}

/* Beitragsbild - als Teil der Karte */
.weekly-offer-image {
    margin-top: 40px; /* Deutlicher Abstand zum Inhalt */
    margin-bottom: 20px;
}

.weekly-offer-image img {
    max-width: 80%; /* Etwas kleiner, um auf die Karte zu passen */
    height: auto;
    display: block;
    margin: 0 auto; /* Zentriert das Bild */
    border-radius: 8px; /* Passende Abrundung der Bildecken */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Guter Schatten für das Bild */
    border: 4px solid #fff; /* Ein dezenter weißer Rahmen um das Bild */
    transition: transform 0.3s ease; /* Sanfte Animation beim Hover */
}

.weekly-offer-image img:hover {
    transform: scale(1.02); /* Leichter Zoom-Effekt */
}

/* Anpassungen für kleinere Bildschirme (Mobile Optimierung) */
@media (max-width: 768px) {
    .weekly-offer-section {
        padding: 30px 15px; /* Weniger Polsterung auf kleinen Geräten */
        margin: 30px auto;
        border-radius: 8px;
    }
    .weekly-offer-title {
        font-size: 2.2em;
        margin-bottom: 20px;
    }
    .weekly-offer-content {
        font-size: 1em;
    }
    .weekly-offer-content li {
        padding: 12px 15px;
        margin-bottom: 8px;
    }
    .weekly-offer-image img {
        max-width: 90%;
        border-radius: 6px;
    }
}