/* Erbt allgemeine Variablen und Fonts aus style.css */

/* ========================================================= */
/* REZEPT SPEZIFISCHES STYLING             */
/* ========================================================= */

.recipe-container {
    background-color: white;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

/* H1 Rezepttitel */
.recipe-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--metallic-gold);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem !important;
}

.recipe-intro {
    font-style: italic;
    color: var(--secondary-color);
    font-size: calc(var(--fs-base) * 1.1);
}

/* Hauptbild des Rezepts */
.recipe-main-image {
    width: 100%;
    /* Für quadratische Darstellung auf größeren Bildschirmen */
    aspect-ratio: 1 / 1; 
    object-fit: cover;
}

/* Tabellen Styling (Zeit & Nährwerte) */
.custom-table {
    font-size: var(--fs-base);
    border-color: #ddd; 
}

.custom-table .table-header {
    background-color: var(--primary-color);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.custom-table td, .custom-table th {
    padding: 0.75rem;
    vertical-align: middle;
}

/* Zutaten und Zubereitung */
.ingredients-list, .preparation-list {
    padding-left: 2rem;
    margin-top: 1rem;
}

.ingredients-list li::before, .preparation-list li::before {
    /* Wiederverwendung des custom-list styles aus style.css */
    content: '★'; /* Anderes Icon für Zutaten/Schritte */
    color: var(--primary-color); 
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Responsive Anpassung für Handy */
@media (max-width: 767.98px) {
    .recipe-container {
        padding: 1.5rem;
    }
    .recipe-main-image {
        margin-top: 1.5rem;
    }
}