/**
Theme Name: MixMyMeals Astra Child
Author: Timo Fricke
Author URI: https://www.mixmymeals.de
Description: Child Theme für MixMyMeals auf Basis von Astra.
Version: 1.3.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mixmymeals-astra-child
Template: astra
*/

/* ==========================================================
   DESIGN-TOKENS — eine einzige Quelle (system.css aufgelöst).
   Kanonisch sind die --mmm-*-Tokens. Unpräfixierte Namen und
   Legacy-Aliase zeigen darauf, damit Bestandsregeln laufen.
   „Stopf nicht!"-Palette: Fredoka (Display) + Nunito Sans (Text).
   ========================================================== */
:root {

    /* --- Brand & Akzente --- */
    --mmm-green-700: #3F6F1E;   /* dunkle Schrift auf hellgrün */
    --mmm-green-600: #5C9E2E;   /* Primär: Buttons, Links, aktiv */
    --mmm-green-500: #74B73E;   /* Hover / Brand hell */
    --mmm-green-100: #E7F2D8;   /* Chip-/Badge-Hintergrund */
    --mmm-green-50:  #F3F8EA;   /* zarte Flächen */

    --mmm-carrot-600: #D2622C;  /* Sekundär dunkel */
    --mmm-carrot-500: #E8743B;  /* Akzent (Aktionen, Highlights) */
    --mmm-carrot-100: #FBE6DB;  /* zarter Akzent-Hintergrund */

    /* --- Neutrale (warm getönt) --- */
    --mmm-ink:    #2C2A24;      /* Haupttext */
    --mmm-ink-2:  #6B665B;      /* Sekundärtext / Meta */
    --mmm-ink-3:  #9A9485;      /* Tertiär / Platzhalter */
    --mmm-cream:   #FBF8F1;     /* Seitenhintergrund */
    --mmm-cream-2: #F4EFE4;     /* abgesetzte Flächen / Streifen */
    --mmm-surface: #FFFFFF;     /* Karten */
    --mmm-line:    #ECE6D9;     /* Rahmen / Trenner */
    --mmm-line-2:  #E0D9C9;     /* stärkerer Rahmen */

    /* --- Radius --- */
    --mmm-r-sm: 10px;
    --mmm-r: 16px;
    --mmm-r-lg: 22px;
    --mmm-r-pill: 999px;

    /* --- Schatten --- */
    --mmm-shadow-sm: 0 1px 2px rgba(44,42,36,.05), 0 2px 6px rgba(44,42,36,.05);
    --mmm-shadow-md: 0 2px 4px rgba(44,42,36,.04), 0 10px 28px rgba(44,42,36,.07);
    --mmm-shadow-lg: 0 8px 16px rgba(44,42,36,.06), 0 24px 60px rgba(44,42,36,.12);

    /* --- Typo --- */
    --mmm-font-display: "Fredoka", system-ui, sans-serif;
    --mmm-font-text: "Nunito Sans", system-ui, sans-serif;

    /* --- Spacing-Skala (4er) --- */
    --mmm-s1: 4px;  --mmm-s2: 8px;   --mmm-s3: 12px;  --mmm-s4: 16px;  --mmm-s5: 20px;
    --mmm-s6: 24px; --mmm-s8: 32px;  --mmm-s10: 40px; --mmm-s12: 48px; --mmm-s16: 64px;

    --mmm-maxw: 980px;

    /* --- Relative Font-Skala (Bestandskomponenten, Astra-aligned) --- */
    --mmm-font-sm: 0.82em;   /* Meta, Labels, Pills, Icons */
    --mmm-font-md: 1em;      /* Body */
    --mmm-font-lg: 1.1em;    /* Sub-headings, Card Titles */
    --mmm-font-xl: 1.25em;   /* Section Headlines */

    --mmm-header-height: 70px;

    /* --- Legacy-Aliase (gleiche Farbwerte, zeigen auf die Palette) --- */
    --mmm-primary: var(--mmm-green-600);
    --mmm-secondary: var(--mmm-carrot-500);
    --mmm-text: var(--mmm-ink);
    --mmm-white: #fff;
    --mmm-grey: var(--mmm-cream-2);
    --mmm-shadow: var(--mmm-shadow-sm);
    --mmm-shadow-hover: var(--mmm-shadow-md);

    /* --- Unpräfixierte Aliase (Kompatibilität, → Palette) --- */
    --green-700: var(--mmm-green-700);
    --green-600: var(--mmm-green-600);
    --green-500: var(--mmm-green-500);
    --green-100: var(--mmm-green-100);
    --green-50:  var(--mmm-green-50);
    --carrot-600: var(--mmm-carrot-600);
    --carrot-500: var(--mmm-carrot-500);
    --carrot-100: var(--mmm-carrot-100);
    --ink:   var(--mmm-ink);
    --ink-2: var(--mmm-ink-2);
    --ink-3: var(--mmm-ink-3);
    --cream:   var(--mmm-cream);
    --cream-2: var(--mmm-cream-2);
    --surface: var(--mmm-surface);
    --line:   var(--mmm-line);
    --line-2: var(--mmm-line-2);
    --r-sm:   var(--mmm-r-sm);
    --r:      var(--mmm-r);
    --r-lg:   var(--mmm-r-lg);
    --r-pill: var(--mmm-r-pill);
    --shadow-sm: var(--mmm-shadow-sm);
    --shadow:    var(--mmm-shadow-md);
    --shadow-lg: var(--mmm-shadow-lg);
    --font-display: var(--mmm-font-display);
    --font-text:    var(--mmm-font-text);
    --s1: var(--mmm-s1);  --s2: var(--mmm-s2);   --s3: var(--mmm-s3);  --s4: var(--mmm-s4);  --s5: var(--mmm-s5);
    --s6: var(--mmm-s6);  --s8: var(--mmm-s8);   --s10: var(--mmm-s10); --s12: var(--mmm-s12); --s16: var(--mmm-s16);
    --maxw: var(--mmm-maxw);
}

/* ==========================================================
   Weekdays
   ========================================================== */

.mmm-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-bottom: 0.75em;
}

.mmm-weekday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    padding: 0.25em 0.5em;
    font-family: var(--ast-global-body-font-family);
    font-size: var(--mmm-font-sm);
    line-height: 1;
    border-radius: var(--ast-border-radius);
    background-color: var(--mmm-grey);
    color: var(--ast-global-color-3);
    user-select: none;
}

.mmm-weekday-in-plan {
    background-color: color-mix(
            in srgb,
            var(--ast-global-color-0) 12%,
            transparent
    );
    color: var(--ast-global-color-0);
}

.mmm-weekday-active {
    background-color: var(--ast-global-color-0);
    color: var(--mmm-white);
    font-weight: 500;
    box-shadow: var(--mmm-shadow);
}


/* ==========================================================
   Meal Types
   ========================================================== */

.mmm-mealtypes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.5em;
    padding-top: 0.6em;
    border-top: 1px solid var(--mmm-grey);
    margin-bottom: 0.75em;
}

.mmm-mealtype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em 0.5em;
    font-family: var(--ast-global-body-font-family);
    font-size: var(--mmm-font-sm);
    line-height: 1;
    border-radius: var(--ast-border-radius);
    background-color: transparent;
    border: 1px solid var(--mmm-grey);
    color: var(--ast-global-color-3);
    user-select: none;
}

.mmm-mealtype-in-plan {
    border-color: color-mix(in srgb, var(--ast-global-color-0) 40%, transparent);
    background-color: color-mix(in srgb, var(--ast-global-color-0) 8%, transparent);
    color: var(--ast-global-color-0);
    font-weight: 500;
}

.mmm-mealtype-not-in-plan {
    text-decoration: line-through;
    opacity: 0.45;
}

.mmm-mealtype::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: var(--mmm-font-sm);
    line-height: 1;
    margin-right: 0.3em;
}

.mmm-mealtype--breakfast::before { content: "\f0f4"; color: var(--mmm-green-500); } /* mug-hot */
.mmm-mealtype--lunch::before     { content: "\f185"; color: var(--mmm-green-500); } /* sun */
.mmm-mealtype--dinner::before    { content: "\f186"; color: var(--mmm-green-500); } /* moon */
.mmm-mealtype--snack::before     { content: "\f5d1"; color: var(--mmm-green-500); } /* apple-whole */
.mmm-mealtype--other::before     { content: "\f141"; color: var(--mmm-green-500); } /* ellipsis */

/* ==========================================================
   Meal Plan – Single View
   ========================================================== */

.mmm-meal-plan-section {
    margin: 2.5em 0;
}

/* Day */

.mmm-meal-plan-day {
    margin-bottom: 2.5em;
}

/* Meal Type */

.mmm-meal-plan-type-group {
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.mmm-meal-plan-type-label {
    margin-bottom: 0.75em;
    font-size: var(--mmm-font-sm);
    letter-spacing: 0.05em;
    color: var(--ast-global-color-3);
}

/* Meal Item */

.mmm-meal-plan-overview-item {
    display: flex;
    gap: 0;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}

.mmm-meal-plan-overview-item:hover {
    box-shadow: var(--mmm-shadow-hover);
    transform: translateY(-2px);
}

.mmm-meal-plan-overview-item--missing {
    opacity: 0.55;
    background: color-mix(in srgb, var(--mmm-grey) 40%, transparent);
    box-shadow: none;
}

/* Thumbnail */
.mmm-meal-thumb-link {
    display: block;
    flex-shrink: 0;
}

.mmm-meal-plan-overview-item-thumb {
    width: 96px;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Content */

.mmm-meal-content {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    flex: 1;
    min-width: 0;
    padding: 0.75em 1em;
}

/* Categories */

.mmm-meal-plan-overview-item-recipe-behind-meal-categories-list {
    display: flex;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
}

.mmm-meal-plan-overview-item-recipe-behind-meal-categories-list li {
    background-color: var(--mmm-grey);
    padding: 0.15em 0.45em;
    border-radius: 999px;
}

/* Title */

.mmm-meal-plan-overview-item-meal-title a {
    color: var(--ast-global-color-2);
    text-decoration: none;
}

.mmm-meal-plan-overview-item-meal-title a:hover {
    color: var(--ast-global-color-0);
}

/* Meta wrapper */
.mmm-meal-plan-overview-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
}

.mmm-meal-plan-overview-item-meal-servings,
.mmm-meal-plan-overview-item-meal-prep-time {
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    display: flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

.mmm-meal-plan-overview-item-meal-servings::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f0c0";
    color: var(--ast-global-color-0);
    font-size: var(--mmm-font-sm);
}

.mmm-meal-plan-overview-item-meal-prep-time::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f017";
    color: var(--ast-global-color-0);
    font-size: var(--mmm-font-sm);
}

/* ==========================================================
   Shopping List
   ========================================================== */

.mmm-simple-shopping-list {
    margin-top: 1.5em;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 0.25em 1.25em 1.25em;
}

.mmm-shopping-category {
    margin: 1.5em 0 0.25em;
    font-size: var(--mmm-font-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ast-global-color-3);
    border-bottom: 2px solid var(--ast-global-color-0);
    padding-bottom: 0.25em;
}

.mmm-shopping-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mmm-shopping-item {
    padding: 0.55em 0;
    border-bottom: 1px solid var(--mmm-grey);
    font-size: var(--mmm-font-md);
    line-height: 1.5;
}

.mmm-shopping-item:last-child {
    border-bottom: none;
}

.mmm-shopping-item details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

.mmm-shopping-item details summary::-webkit-details-marker {
    display: none;
}

.mmm-shopping-item details summary::before {
    content: none;
}

.mmm-shopping-item details[open] summary {
    color: var(--ast-global-color-0);
}

.mmm-shopping-item details ul {
    list-style: none;
    margin: 0.4em 0 0.2em 0;
    padding-left: 0.75em;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    border-left: 2px solid var(--mmm-grey);
}

.mmm-shopping-item details ul li {
    list-style: none;
    padding: 0.15em 0;
}

/* Nutrition Overview (Meal Plan) */

.mmm-meal-plan-nutrition {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1em;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em;
}

.mmm-meal-plan-nutrition .mmm-nutrition-table {
    min-width: 540px;
}

/* ==========================================================
   Single Meal (Recipe)
   ========================================================== */

.mmm-meal-back-to-meal-plan-link {
    display: inline-block;
    margin-bottom: 0.5em;
    font-size: var(--mmm-font-sm);
    text-decoration: none;
}

.mmm-meal-back-to-meal-plan-link::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f060";
    font-size: var(--mmm-font-sm);
    margin-right: 7px;
}

.mmm-meal-section {
    margin: 2.5em 0;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em 1.5em;
}

/* Steps */

.mmm-recipe-section {
    margin: 2.5em 0;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em 1.5em;
}

/* Meal-plan page: every block (heading included) sits in its own card,
   matching the recipe/meal section cards. Blocks that already carry their own
   card (nutrition, shopping list, subscribe form) are flattened here so we
   never render a card inside a card. */
.mmm-plan-section {
    margin: 2.5em 0;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em 1.5em;
}

.mmm-plan-section > .mmm-section-head:first-child {
    margin-top: 0;
}

.mmm-plan-section .mmm-meal-plan-nutrition,
.mmm-plan-section .mmm-simple-shopping-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.mmm-plan-section .mmm-subscribe-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.mmm-recipe-steps {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 1.5em;
}

.mmm-step {
    padding-left: 1.25em;
    border-left: 3px solid var(--mmm-grey);
}

.mmm-step-title {
    font-size: var(--mmm-font-lg);
    font-weight: 500;
    color: var(--ast-global-color-0);
}

.mmm-step-description {
    line-height: 1.6;
    color: var(--ast-global-color-3);
}

/* ==========================================================
   Step Ingredients
   ========================================================== */

.mmm-step-ingredients {
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    margin-top: 1rem;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.mmm-step-ingredients li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35em 0;
    border-bottom: 1px solid var(--mmm-grey);
}

.mmm-step-ingredients li:last-child {
    border-bottom: none;
}

.mmm-step-ingredients .mmm-ingredient-name {
    font-weight: 500;
    color: var(--ast-global-color-2);
    white-space: nowrap;
}

.mmm-step-ingredients .mmm-ingredient-amount {
    font-weight: 400;
    color: var(--ast-global-color-3);
    white-space: nowrap;
}

/* ==========================================================
   Nutrition Table
   ========================================================== */

.mmm-meal-nutrition {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1em;
}

.mmm-recipe-nutrition {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mmm-nutrition-table {
    width: 100%;
    min-width: 420px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--mmm-font-sm);
}

.mmm-nutrition-table thead th {
    padding: 0.75em 0.75em;
    text-align: left;
    border-bottom: 2px solid var(--ast-global-color-0);
    color: var(--ast-global-color-0);
    font-weight: 500;
    white-space: nowrap;
}

.mmm-nutrition-table tbody td {
    padding: 0.65em 0.75em;
    border-bottom: 1px solid var(--mmm-grey);
    color: var(--ast-global-color-3);
    vertical-align: middle;
}

.mmm-nutrition-table tbody td:first-child {
    font-weight: 500;
    color: var(--ast-global-color-2);
}

.mmm-nutrition-table td:not(:first-child),
.mmm-nutrition-table th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.mmm-nutrition-table tbody tr:nth-child(even) td {
    background-color: color-mix(
            in srgb,
            var(--mmm-grey) 40%,
            transparent
    );
}

.mmm-nutrition-table tbody tr:last-child td {
    border-bottom: none;
}

/* ==========================================================
   Mobile Tweaks
   ========================================================== */

@media (max-width: 544px) {

    .mmm-step-ingredients li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25em;
    }

    .mmm-step-ingredients .mmm-ingredient-amount {
        font-size: var(--mmm-font-sm);
    }

    /* min-width muss mobil auf 0, sonst drückt die 420px-Basisregel die
       Tabelle über den Viewport. Das Scrollen übernimmt der Wrapper
       (.mmm-meal-nutrition / .mmm-recipe-nutrition), damit die Tabelle
       display:table bleibt und width:100% die Karte voll ausfüllt. */
    .mmm-nutrition-table {
        font-size: var(--mmm-font-sm);
        min-width: 0;
    }

    /* Desktop-min-width (540px) hat höhere Spezifität und muss hier
       explizit neutralisiert werden, sonst bleiben die kollabierten
       Karten 540px breit und die Werte liegen unsichtbar außerhalb. */
    .mmm-meal-plan-nutrition .mmm-nutrition-table {
        min-width: 0;
    }

    .mmm-nutrition-table thead th,
    .mmm-nutrition-table tbody td {
        padding: 0.6em 0.6em;
    }

    /* The 4-column meal-plan table collapses into stacked cards: each row
       becomes a card, each value sits on its own line with its column label
       (from the td's data-label). No horizontal scrolling needed. */
    .mmm-nutri-table {
        display: block;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mmm-nutri-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mmm-nutri-table tbody,
    .mmm-nutri-table tbody tr,
    .mmm-nutri-table tbody td {
        display: block;
    }

    .mmm-nutri-table tbody tr,
    .mmm-nutri-table tbody tr:nth-child(even),
    .mmm-nutri-table tbody tr:hover {
        background: var(--mmm-surface);
        border: 1px solid var(--mmm-line);
        border-radius: var(--mmm-r);
        box-shadow: var(--mmm-shadow-sm);
        padding: var(--mmm-s2) var(--mmm-s4) var(--mmm-s3);
        margin-bottom: var(--mmm-s3);
    }

    .mmm-nutri-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--mmm-s3);
        padding: 8px 0;
        text-align: right;
        border-top: 1px solid var(--mmm-line);
    }

    .mmm-nutri-table tbody td:not(:first-child)::before {
        content: attr(data-label);
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--mmm-ink-2);
    }

    .mmm-nutri-table tbody td:first-child {
        text-align: left;
        border-top: 0;
        padding: 0 0 6px;
        font-family: var(--mmm-font-display);
        font-size: 16px;
        font-weight: 700;
        color: var(--mmm-green-700);
    }

    :root {
        --mmm-font-lg: 1em;
        --mmm-font-xl: 1.15em;
    }

    .mmm-meal-plan-overview-item {
        flex-direction: column;
    }

    .mmm-meal-plan-overview-item:hover {
        transform: none;
    }

    .mmm-meal-plan-overview-item-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* ==========================================================
   Archive Cards (Meal Plan, Recipe, Ingredient)
   ========================================================== */

.ast-article-post.type-mmm_meal_plan,
.ast-article-post.type-mmm_recipe,
.ast-article-post.type-mmm_ingredient {
    background: var(--mmm-white);
    border-radius: var(--ast-border-radius);
    box-shadow: var(--mmm-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}

.ast-article-post.type-mmm_meal_plan:hover,
.ast-article-post.type-mmm_recipe:hover,
.ast-article-post.type-mmm_ingredient:hover {
    box-shadow: var(--mmm-shadow-hover);
    transform: translateY(-2px);
}

.ast-article-post.type-mmm_meal_plan .ast-article-inner,
.ast-article-post.type-mmm_recipe .ast-article-inner,
.ast-article-post.type-mmm_ingredient .ast-article-inner {
    padding: 1.1em 1.25em 1.25em;
}

/* Bild bündig am oberen Rand, kein Padding */
.ast-article-post.type-mmm_recipe .ast-blog-featured-section,
.ast-article-post.type-mmm_ingredient .ast-blog-featured-section {
    margin: -1.1em -1.25em 1em;
    width: calc(100% + 2.5em);
}

@media (max-width: 544px) {
    .ast-article-post.type-mmm_meal_plan:hover,
    .ast-article-post.type-mmm_recipe:hover,
    .ast-article-post.type-mmm_ingredient:hover {
        transform: none;
    }
}

/* ==========================================================
   Archive Description (generic)
   ========================================================== */

.mmm-archive-description {
    margin: 0.75em 0 2em;
}

.mmm-archive-description p {
    margin: 0 0 0.75em;
}

.mmm-archive-description p:last-child {
    margin-bottom: 0;
}

/* Category terms list at the foot of the recipe archive: boxed so it isn't
   bare on the background. Scoped wrapper — the same list stays unboxed in the
   footer widget area. */
.mmm-archive-terms {
    margin: 2.5em 0 0;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em 1.5em;
}

.mmm-archive-terms__title {
    margin: 0 0 var(--mmm-s4);
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--mmm-ink);
}

/* ==========================================================
   Standard pages & blog posts
   The site runs in Astra's plain container, so normal page/post content would
   sit bare on the background. Box it (title inside the card). Pages embedding
   the meal-plan builder get the same single card — the builder renders as a
   day rail inside it (like the meals-in-a-plan view), not as inner cards.
   ========================================================== */
.ast-plain-container.page .ast-article-single,
.ast-plain-container.single-post .ast-article-single {
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: var(--mmm-s8);
}

/* Content lists: indent bullets/numbers so the marker sits clearly inside the
   text column instead of hugging the left edge of the card. */
.ast-article-single .entry-content ul,
.ast-article-single .entry-content ol {
    padding-left: var(--mmm-s8);
    margin: var(--mmm-s4) 0;
}

.ast-article-single .entry-content li {
    margin-bottom: var(--mmm-s2);
}

/* Nested lists: keep the extra indent but drop the vertical spacing. */
.ast-article-single .entry-content li > ul,
.ast-article-single .entry-content li > ol {
    margin: var(--mmm-s2) 0;
}

/* ==========================================================
   Meal Plan Builder – Layout (Tages-Rail nach Design-Vorlage)
   ========================================================== */

/* Sitzt in der normalen Seiten-Karte (padding s8), daher ohne
   eigenen Außenabstand. */
.mmm-plan-builder {
    margin: var(--mmm-s4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--mmm-s8);
}

.mmm-plan-builder-title {
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: 28px;
    color: var(--mmm-ink);
    margin: 0 0 var(--mmm-s2);
}

/* ---------- Unassigned: Sammel-Pool oben (schlichte Section, die
   Seiten-Karte liefert den Rahmen) ---------- */
.mmm-plan-unassigned h3 {
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: 21px;
    color: var(--mmm-ink);
    margin: 0 0 var(--mmm-s3);
}

/* ---------- Hinweis in der leeren Ablagefläche ---------- */
.mmm-plan-empty {
    padding: var(--mmm-s3) var(--mmm-s2);
    text-align: center;
    font-size: var(--mmm-font-sm);
    color: var(--mmm-ink-2);
}

.mmm-plan-empty__link {
    font-weight: 700;
    color: var(--mmm-green-600);
    white-space: nowrap;
}

.mmm-plan-unassigned .mmm-plan-day-list {
    min-height: 40px;
    border: 1.5px dashed var(--mmm-line-2);
    padding: var(--mmm-s3);
}

/* ---------- Starttag-Auswahl je Tag ---------- */
.mmm-plan-day-start {
    margin-bottom: var(--mmm-s2);
    color: var(--mmm-ink-3);
    font-size: var(--mmm-font-sm);
    font-weight: 600;
    user-select: none;
}

/* Style the start-day radio like a checkbox (square box + checkmark). */
.mmm-plan-day-start input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    border: 1px solid var(--mmm-line);
    border-radius: 4px;
    background: var(--mmm-surface);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mmm-plan-day-start input[type="radio"]::before {
    content: "";
    width: 0.62em;
    height: 0.62em;
    background: #fff;
    transform: scale(0);
    transition: transform 0.12s ease;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.mmm-plan-day-start input[type="radio"]:checked {
    background: var(--mmm-green-500);
    border-color: var(--mmm-green-500);
}

.mmm-plan-day-start input[type="radio"]:checked::before {
    transform: scale(1);
}

.mmm-plan-day-start input[type="radio"]:focus-visible {
    outline: 2px solid var(--mmm-green-500);
    outline-offset: 2px;
}

.mmm-plan-day-start:hover {
    color: var(--mmm-ink-2);
}

.mmm-plan-day-start:has(input:checked) {
    color: var(--mmm-green-700);
}

/* ---------- Tages-Rail wie in der "Meals in a plan"-Ansicht:
   keine Karte je Tag, sondern Punkt + vertikale Linie
   (Spiegel von .mmm-rail-day) ---------- */
.mmm-plan-days {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mmm-plan-day {
    position: relative;
    padding: 0 0 0 var(--mmm-s8);
    margin-bottom: var(--mmm-s6);
}

/* Vertikale Timeline-Linie */
.mmm-plan-day::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: -26px;
    width: 3px;
    border-radius: 3px;
    background: var(--mmm-line);
}

.mmm-plan-day:last-child::before {
    display: none;
}

/* Tages-Punkt */
.mmm-plan-day::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--mmm-surface);
    border: 3px solid var(--mmm-green-500);
}

.mmm-plan-day-title {
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: 21px;
    color: var(--mmm-ink);
    margin: 0 0 var(--mmm-s3);
}

/* ==========================================================
   Drop-Zonen
   ========================================================== */

.mmm-plan-day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: var(--mmm-s3);
    border-radius: var(--mmm-r);
    transition: background 0.2s ease, outline-color 0.2s ease;
}

/* ==========================================================
   Rezept-Karten (Items)
   ========================================================== */

.mmm-plan-item {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--mmm-s4);
    padding: var(--mmm-s3);
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mmm-plan-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--mmm-shadow);
    border-color: var(--mmm-line-2);
}

.mmm-plan-item:active {
    cursor: grabbing;
}

/* Drag Handle */
.mmm-plan-item-drag {
    color: var(--mmm-ink-3);
    font-size: 16px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    padding: 0 2px;
}

/* Thumbnail – quadratisch wie die Rezept-Karte der Vorlage */
.mmm-plan-item-thumb {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 12px;
    background: var(--mmm-cream-2);
}

/* Content */
.mmm-plan-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mmm-s2);
}

.mmm-plan-item-title {
    font-family: var(--mmm-font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: var(--mmm-ink);
}

.mmm-plan-item:hover .mmm-plan-item-title {
    color: var(--mmm-green-700);
}

/* ==========================================================
   Controls – als Pills/Chips
   ========================================================== */

.mmm-plan-item-controls {
    display: flex;
    align-items: center;
    gap: var(--mmm-s2);
    flex-wrap: wrap;
}

.mmm-plan-item-type,
.mmm-plan-item-servings {
    font-weight: 700;
    font-size: 13.5px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--mmm-r-pill);
    border: 1px solid var(--mmm-line);
    background: var(--mmm-surface);
    color: var(--mmm-ink);
}

.mmm-plan-item-type:focus,
.mmm-plan-item-servings:focus {
    outline: none;
    border-color: var(--mmm-green-500);
}

.mmm-plan-item-servings {
    width: 64px;
    text-align: center;
}

.mmm-plan-item-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mmm-carrot-500);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(232, 116, 59, 0.26);
    transition: background 0.15s ease, transform 0.12s ease;
}

.mmm-plan-item-remove:hover {
    background: var(--mmm-carrot-600);
}

.mmm-plan-item-remove:active {
    transform: translateY(1px);
}

/* ==========================================================
   Drag & Drop Visual Feedback
   ========================================================== */

.mmm-plan-item.dragging {
    opacity: 0.45;
}

.mmm-plan-day-list.drop-target {
    background: var(--mmm-green-50);
    outline: 2px dashed var(--mmm-green-500);
    outline-offset: 2px;
}

.mmm-create-meal-plan-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mmm-s2);
    padding: 11px 18px;
    background: var(--mmm-green-600);
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--mmm-r-pill);
    font-family: var(--mmm-font-text);
    font-weight: 800;
    text-decoration: none;
    line-height: 1.2;
    box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.mmm-create-meal-plan-link:hover {
    background: var(--mmm-green-700);
    color: #fff;
    transform: translateY(-1px);
}

.mmm-create-meal-plan-link:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ==========================================================
   Collapsible List — shared by the meal's ingredients list
   (.mmm-ingredients-list) and the "Required Equipment" list
   (.mmm-equipment) on recipe/meal/meal-plan pages, so both look
   and behave identically.
   ========================================================== */

.mmm-collapsible-list {
    margin: 1.25em 0;
}

.mmm-collapsible-list .mmm-collapsible-toggle {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.mmm-collapsible-list .mmm-collapsible-toggle > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0 0.25em 0;
    padding: 0;
    font-size: var(--mmm-font-md);
    font-weight: 400;
    color: var(--ast-global-color-2);
    user-select: none;
}

.mmm-collapsible-list .mmm-collapsible-toggle > summary::-webkit-details-marker {
    display: none;
}

.mmm-collapsible-list .mmm-collapsible-toggle > summary::before {
    content: "\f078";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    line-height: 1;
    transition: transform 0.15s ease;
    margin-right: 0.4em;
}

.mmm-collapsible-list .mmm-collapsible-toggle[open] > summary::before {
    transform: rotate(180deg);
}

.mmm-collapsible-list .mmm-collapsible-toggle ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmm-collapsible-list .mmm-collapsible-toggle li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0.45em 0;
    border-bottom: 1px solid var(--mmm-grey);
    font-size: var(--mmm-font-md);
    line-height: 1.4;
}

.mmm-collapsible-list .mmm-collapsible-toggle li:last-child {
    border-bottom: none;
}

.mmm-collapsible-list .mmm-ingredient-name,
.mmm-collapsible-list .mmm-ingredient-amount,
.mmm-collapsible-list .mmm-equipment-name {
    font-size: inherit;
    color: var(--ast-global-color-2);
    white-space: nowrap;
}

.mmm-collapsible-list .mmm-ingredient-name,
.mmm-collapsible-list a.mmm-equipment-name {
    font-weight: 500;
}

.mmm-collapsible-list a.mmm-equipment-name {
    text-decoration: none;
}

.mmm-collapsible-list a.mmm-equipment-name:hover {
    color: var(--mmm-green-600);
}

/* Single Page Hero — Kasten und Blob kommen aus dem gemeinsamen Block
   „SEITENKÖPFE" weiter unten. Hier bleibt nur, was nur hier gilt. */

/* Titel: Typografie aus „EINHEITLICHE SEITENTITEL"; hier nur Layout. */
.mmm-meal-plan-single .entry-header .entry-title,
.mmm-single-recipe .entry-header .entry-title,
.mmm-single-meal .entry-header .entry-title {
    position: relative;
    z-index: 1;
}

/* Alle direkten Kinder über dem Blob */
.mmm-meal-plan-single .entry-header > *,
.mmm-single-recipe .entry-header > *,
.mmm-single-meal .entry-header > * {
    position: relative;
    z-index: 1;
}

/* Excerpt-Trennlinie an Hero-Farbe anpassen */
.mmm-single-recipe .entry-header .mmm-recipe-excerpt {
    border-bottom-color: var(--mmm-line);
}

@media (max-width: 544px) {
    .mmm-meal-plan-single .entry-header,
    .mmm-single-recipe .entry-header,
    .mmm-single-meal .entry-header {
        padding: var(--mmm-s5);
    }
}

/* =========================================
   Wrapper für Meta + Actions
   ========================================= */

.mmm-meta-action-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
    margin: 0.75em 0 1em;
}

/* =========================================
   Recipe Excerpt
   ========================================= */

.mmm-recipe-excerpt {
    font-size: var(--mmm-font-md, 1rem);
    color: var(--ast-global-color-3);
    line-height: 1.6;
    margin: 0 0 1.25em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid var(--ast-border-color, #e0e0e0);
}

.mmm-recipe-excerpt p:last-child {
    margin-bottom: 0;
}

/* =========================================
   Actions
   ========================================= */

.mmm-meal-plan-actions, .mmm-recipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    flex: 0 0 auto;
    margin: 0.75em 0 1em;
}

.mmm-meal-plan-actions__item, .mmm-recipe-actions__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-0);
    cursor: pointer;
    text-decoration: underline;
}

.mmm-meal-plan-actions__item::before, .mmm-recipe-actions__item::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

.mmm-meal-plan-actions__item--mail::before {
    content: "\f0e0";
}

.mmm-meal-plan-actions__item--bring::before {
    content: "\f3ce";
}

.mmm-recipe-actions__item--cart::before {
    content: "\f07a";
}

.mmm-recipe-archive-item-meta .mmm-recipe-actions__item--cart {
    color: var(--ast-global-color-0);
    cursor: pointer;
}

/* =========================================
   Recipe Meta
   ========================================= */

.mmm-meal-meta .mmm-meta__item {
    text-decoration: none;
}

/* =========================================
   Responsive – kleine Bildschirme
   ========================================= */

@media (max-width: 544px) {
    .mmm-meta-action-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .mmm-meal-plan-actions,
    .mmm-recipe-actions {
        margin-top: 0.25em;
    }
}

/* ==========================================================
   Unified Meta System (Meal Plan + Recipe)
   ========================================================== */

.mmm-meta,
.mmm-meal-meta,
.mmm-meal-plan-meta,
.mmm-meal-plan-archive-item-meta,
.mmm-recipe-archive-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 1.25em;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    margin: 0.75em 0 1em;
}

.mmm-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
    opacity: 0.9;
}

.mmm-meta__item::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-0);
    line-height: 1;
}

/* Meal Plan */
.mmm-meta__item--days::before     { content: "\f073"; color: #FBBF24; }
.mmm-meta__item--meals::before    { content: "\f2e7"; color: #838383; }
.mmm-meta__item--servings::before { content: "\f0c0"; color: #507caf; }

/* Recipe */
.mmm-meta__item--calories::before  { content: "\f7e4"; color: #F97316; }
.mmm-meta__item--prep-time::before { content: "\f017"; color: #FBBF24; }
.mmm-meta__item--category::before  { content: "\f02b"; color: var(--ast-global-color-0); }
.mmm-meta__item--tag::before       { content: "\f02c"; color: #bdcc2a; }
.mmm-meta__item--cost::before      { content: "\f543"; color: #507caf; }
.mmm-meta__item--diet::before      { content: "\f06c"; color: #16A34A; }
.mmm-meta__item--community::before { content: "\f0c0"; color: #9333EA; }

.mmm-meal-plan-meta .mmm-meta__item--cost::before {
    content: "Ø";
    font-family: inherit;
    font-weight: 600;
}

/* ==========================================================
   Recipe Category Term List (Shortcode)
   ========================================================== */

.mmm-recipe-category.mmm-term-list {
    list-style: none;
    margin: 1em 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.mmm-recipe-category .mmm-term-list__item {
    margin: 0;
    padding: 0;
    line-height: 1em;
}

.mmm-recipe-category .mmm-term-list__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    font-size: var(--mmm-font-md);
    color: var(--ast-global-color-2);
    padding: 0.25em 0;
}

.mmm-recipe-category .mmm-term-list__link:hover {
    color: var(--ast-global-color-0);
    text-decoration: underline;
}

/* Top-level categories arranged as side-by-side, responsively
   wrapping columns; each holds its children stacked beneath. */
.mmm-recipe-category.mmm-term-list--level-1 {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5em 2em;
}

.mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item {
    flex: 1 1 12em;
    min-width: 10em;
    max-width: 18em;
    padding: 0;
}

.mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__link {
    font-weight: 600;
    font-size: var(--mmm-font-lg);
    padding-bottom: 0.4em;
}

.mmm-recipe-category.mmm-term-list--level-2,
.mmm-recipe-category.mmm-term-list--level-3,
.mmm-recipe-category.mmm-term-list--level-4 {
    list-style: none;
    margin: 0.4em 0 0;
    padding: 0.2em 0 0.2em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.mmm-recipe-category.mmm-term-list--level-2 .mmm-term-list__link,
.mmm-recipe-category.mmm-term-list--level-3 .mmm-term-list__link,
.mmm-recipe-category.mmm-term-list--level-4 .mmm-term-list__link {
    font-size: var(--mmm-font-md);
    font-weight: 400;
    color: var(--ast-global-color-3);
}

.mmm-recipe-category .mmm-term-list__link::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--ast-global-color-0);
    line-height: 1;
}

.mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__link::before {
    content: "\f07b";
    font-size: var(--mmm-font-sm);
}

.mmm-recipe-category.mmm-term-list--level-2 .mmm-term-list__link::before {
    content: "\f02b";
    font-size: var(--mmm-font-sm);
}

.mmm-recipe-category.mmm-term-list--level-3 .mmm-term-list__link::before,
.mmm-recipe-category.mmm-term-list--level-4 .mmm-term-list__link::before {
    content: "\f105";
    font-size: var(--mmm-font-sm);
}

.mmm-recipe-category .mmm-term-list__count {
    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    opacity: 0.8;
}

@media (max-width: 544px) {
    .mmm-recipe-category.mmm-term-list--level-2,
    .mmm-recipe-category.mmm-term-list--level-3,
    .mmm-recipe-category.mmm-term-list--level-4 {
        padding-left: 0.75em;
    }

    /* Stack the columns on narrow screens */
    .mmm-recipe-category.mmm-term-list--level-1 {
        flex-direction: column;
        gap: 1em;
    }

    .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item {
        flex-basis: auto;
        max-width: none;
    }
}

.mmm-recipe-category .mmm-term-list__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0 0.4em;
    font-weight: var(--ast-blog-title-font-weight, normal);
    font-size: var(--mmm-font-lg);
    color: var(--ast-global-color-2);
    line-height: 1.2em;
}

.mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__title::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f07b";
    color: var(--ast-global-color-0);
    font-size: var(--mmm-font-sm);
    line-height: 1;
}

/* ----------------------------------------------------------
   Recipe Category Term List — Footer widget variant
   The side-by-side column layout is inherited from the base
   rules above; the footer only tightens spacing and tones the
   colours/sizes down to match the rest of the footer widgets.
   ---------------------------------------------------------- */

.footer-widget-area .mmm-recipe-category.mmm-term-list,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list {
    margin: 0;
}

/* Slightly narrower columns for the tighter footer width */
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item {
    flex-basis: 11em;
    min-width: 9em;
    max-width: 16em;
}

/* Column heading: smaller than the archive heading */
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__link,
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__title,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__link,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__title {
    font-size: var(--mmm-font-md);
}

.footer-widget-area .mmm-recipe-category .mmm-term-list__link,
.footer-widget-area-inner .mmm-recipe-category .mmm-term-list__link {
    color: var(--ast-global-color-3);
    gap: 0.4em;
    padding: 0.1em 0;
}

.footer-widget-area .mmm-recipe-category .mmm-term-list__link:hover,
.footer-widget-area-inner .mmm-recipe-category .mmm-term-list__link:hover {
    color: var(--ast-global-color-0);
    text-decoration: none;
}

.footer-widget-area .mmm-recipe-category.mmm-term-list--level-2 .mmm-term-list__link,
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-3 .mmm-term-list__link,
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-4 .mmm-term-list__link,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-2 .mmm-term-list__link,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-3 .mmm-term-list__link,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-4 .mmm-term-list__link {
    font-size: var(--mmm-font-xs, 0.8rem);
    opacity: 0.85;
}

/* Subtle, smaller icons in the footer */
.footer-widget-area .mmm-recipe-category .mmm-term-list__link::before,
.footer-widget-area .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__title::before,
.footer-widget-area-inner .mmm-recipe-category .mmm-term-list__link::before,
.footer-widget-area-inner .mmm-recipe-category.mmm-term-list--level-1 > .mmm-term-list__item > .mmm-term-list__title::before {
    color: var(--ast-global-color-3);
    font-size: var(--mmm-font-xs, 0.75rem);
    opacity: 0.7;
}

.footer-widget-area .mmm-recipe-category .mmm-term-list__count,
.footer-widget-area-inner .mmm-recipe-category .mmm-term-list__count {
    font-size: var(--mmm-font-xs, 0.75rem);
    opacity: 0.6;
}

/* ==========================================================
   Home Masthead (Shortcode: [mmm_home_masthead])
   ========================================================== */

.mmm-masthead {
    border-radius: var(--ast-border-radius);
    background: color-mix(in srgb, var(--mmm-grey) 35%, transparent);
    overflow: hidden;
}

.mmm-masthead__inner {
    width: 100%;
    max-width: none;
    margin: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25em;
    align-items: stretch;

    min-height: calc(100vh - var(--mmm-header-height, 70px));
}

@media (min-width: 922px) {
    .mmm-masthead__inner {
        grid-template-columns: 33% 1fr;
        gap: 1.75em;
    }
}

/* ==========================================================
   Masthead Media
   ========================================================== */

.mmm-masthead__media {
    display: block;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--mmm-shadow);
    background: var(--mmm-grey);
    height: 100%;
    min-height: 100%;
}

.mmm-masthead__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.mmm-masthead__media:hover {
    box-shadow: var(--mmm-shadow-hover);
}

/* ==========================================================
   Masthead Content
   ========================================================== */

.mmm-masthead__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75em;

    width: 100%;
    max-width: 620px;
    margin: 0 auto;

    padding: 1.25em;
    min-width: 0;
}

@media (min-width: 922px) {
    .mmm-masthead__content {
        padding: 1.75em 2.25em;
    }
}

.mmm-masthead__eyebrow {
    margin: 0;
    font-size: var(--mmm-font-sm);
    font-weight: 600;
    color: var(--mmm-text);
    font-family: 'Roboto', sans-serif;
}

.mmm-masthead__title {
    margin: 0;
    line-height: 1.15;
    color: var(--ast-global-color-2);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-family: 'Roboto Condensed', sans-serif;
}

.mmm-masthead__recipe {
    display: inline;
    font-weight: 600;
    color: var(--ast-global-color-1);
    font-family: var(--mmm-font-display);
}

/* ==========================================================
   Masthead Meta
   ========================================================== */

.mmm-masthead__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 1em;
    margin: 0.15em 0 0.25em;

    font-size: var(--mmm-font-sm);
    color: var(--ast-global-color-3);
    font-family: 'Roboto', sans-serif;
}

.mmm-masthead__meta .mmm-meta__item {
    opacity: 1;
    font-weight: 500;
}

.mmm-masthead__meta .mmm-meta__item--category,
.mmm-masthead__meta .mmm-meta__item--tag {
    background-color: color-mix(in srgb, var(--mmm-grey) 55%, transparent);
    padding: 0.18em 0.55em;
    border-radius: 999px;
    line-height: 1.2;
}

.mmm-masthead__meta .mmm-meta__item::before {
    color: var(--ast-global-color-1);
}

/* ==========================================================
   Masthead CTA Buttons
   ========================================================== */

.mmm-masthead__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 0.35em;
}

.mmm-masthead__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;

    padding: 0.7em 1.1em;
    border-radius: var(--mmm-r-pill);
    text-decoration: none;
    font-family: var(--mmm-font-text);
    font-size: var(--mmm-font-sm);
    font-weight: 800 !important;
    line-height: 1.2;

    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mmm-masthead__cta > .mmm-masthead__btn--primary {
    background: var(--mmm-green-600);
    color: var(--mmm-white);
    box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
    text-decoration: none !important;
}

.mmm-masthead__cta > .mmm-masthead__btn--primary:hover {
    background: var(--mmm-green-700);
    transform: translateY(-1px);
    box-shadow: var(--mmm-shadow-md);
    color: var(--mmm-white);
}

.mmm-masthead__cta > .mmm-masthead__btn--secondary {
    color: var(--ast-global-color-2);
}

.mmm-masthead__cta > .mmm-masthead__btn--secondary:hover {
    transform: translateY(-1px);
}

/* ==========================================================
   Masthead Responsive
   ========================================================== */

@media (max-width: 921px) {
    .mmm-masthead__inner {
        grid-template-columns: 1fr;
    }

    .mmm-masthead__content {
        max-width: 720px;
        padding: 1.25em;
    }
}

@media (max-width: 544px) {
    .mmm-masthead__inner {
        gap: 1.25em;
        min-height: auto;
    }

    .mmm-masthead__media {
        height: auto;
        min-height: 0;
    }

    .mmm-masthead__img {
        height: auto;
        min-height: 0;
    }

    .mmm-masthead__title {
        font-size: clamp(1.4rem, 7vw, 2.1rem);
    }

    .mmm-masthead__meta .mmm-meta__item--category,
    .mmm-masthead__meta .mmm-meta__item--tag {
        padding: 0.15em 0.45em;
    }
}

/* ==========================================================
   Masthead Mobile Overlay
   ========================================================== */

@media (max-width: 544px) {

    .mmm-masthead {
        position: relative;
    }

    .mmm-masthead__content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;

        width: 100%;
        max-width: none;
        margin: 0;
        padding: 1em;

        background: rgba(255,255,255,0.82);
    }

    .mmm-masthead__content::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -32px;
        height: 32px;
        pointer-events: none;

        background: linear-gradient(
                to top,
                rgba(255,255,255,0.82) 0%,
                rgba(255,255,255,0.00) 100%
        );
    }
}

.mmm-cart-badge--error {
    font-weight: 700;
}

/* ==========================================================
   Featured Image (Recipe + Meal)
   ========================================================== */

.mmm-single-recipe .mmm-recipe-feature-image,
.mmm-single-meal .mmm-meal-feature-image {
    margin: 1.25rem 0 1.75rem;
    overflow: hidden;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
}

.mmm-single-recipe .mmm-recipe-feature-image img,
.mmm-single-meal .mmm-meal-feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

@supports (aspect-ratio: 3 / 4) {
    .mmm-single-recipe .mmm-recipe-feature-image,
    .mmm-single-meal .mmm-meal-feature-image {
        aspect-ratio: 3 / 4;
    }

    .mmm-single-recipe .mmm-recipe-feature-image img,
    .mmm-single-meal .mmm-meal-feature-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 922px) {
    .mmm-single-recipe .mmm-recipe-feature-image,
    .mmm-single-meal .mmm-meal-feature-image {
        margin-top: 1.5rem;
    }
}

/* Plan-Hero-Bild: nur das eigene Beitragsbild des Plans, breites Banner */
.mmm-meal-plan-single .mmm-plan-feature-image {
    margin: 1.25rem 0 1.75rem;
    overflow: hidden;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
}

.mmm-meal-plan-single .mmm-plan-feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

@supports (aspect-ratio: 21 / 9) {
    .mmm-meal-plan-single .mmm-plan-feature-image {
        aspect-ratio: 21 / 9;
    }

    .mmm-meal-plan-single .mmm-plan-feature-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================
   Meal Plan Switcher
   ========================================================== */

.meal-plan-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.25em;
    background: var(--mmm-grey);
    border-radius: 999px;
    font-size: var(--mmm-font-sm);
}

.meal-plan-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.9em;
    text-decoration: none;
    color: var(--ast-global-color-3);
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.meal-plan-switcher a:hover {
    color: var(--ast-global-color-2);
}

.meal-plan-switcher a.active {
    background: var(--ast-global-color-0);
    color: var(--mmm-white);
    box-shadow: var(--mmm-shadow);
}

@media (max-width: 544px) {
    .meal-plan-switcher {
        font-size: var(--mmm-font-sm);
    }

    .meal-plan-switcher a {
        padding: 0.35em 0.7em;
    }
}

.meal-plan-switcher__individual {
    opacity: 0.5;
    font-size: var(--mmm-font-sm);
    margin-left: 0.5em;
}

.meal-plan-switcher__individual:hover {
    opacity: 0.8;
}

.meal-plan-switcher__individual.active {
    opacity: 1;
}

article.mmm_meal_plan .post-content {
    padding: 0;
}

/* ==========================================================
   Nutrition Calculator
   ========================================================== */

.mmmm-meal-nutrition-calculator {
    margin-top: 1em;
    max-width: 420px;
    font-size: var(--mmm-font-sm);
}

.mmmm-meal-nutrition-calculator label {
    display: block;
    margin-bottom: 0.25em;
    color: var(--ast-global-color-3);
}

.mmmm-meal-nutrition-calculator-grams {
    width: 100%;
    padding: 0.45em 0.6em;
    border: 1px solid var(--mmm-grey);
    border-radius: var(--ast-border-radius);
    margin-bottom: 0.5em;
    box-sizing: border-box;
}

.mmmm-meal-nutrition-calculator-grams:focus {
    outline: none;
    border-color: var(--ast-global-color-0);
}

/* Slider */

.mmmm-meal-nutrition-calculator-grams-slider {
    width: 100%;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: var(--mmm-grey);
    margin: 1em 0 !important;
}

.mmmm-meal-nutrition-calculator-grams-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--mmm-grey);
}

.mmmm-meal-nutrition-calculator-grams-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ast-global-color-0);
    cursor: pointer;
    margin-top: -5px;
}

.mmmm-meal-nutrition-calculator-grams-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--mmm-grey);
}

.mmmm-meal-nutrition-calculator-grams-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ast-global-color-0);
    border: none;
    cursor: pointer;
}

/* Result */

.mmmm-meal-nutrition-calculator-result p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 0.5em;
    margin: 0;
    border-bottom: 1px solid var(--mmm-grey);
}

.mmmm-meal-nutrition-calculator-result p:nth-child(even) {
    background-color: color-mix(in srgb, var(--mmm-grey) 40%, transparent);
}

.mmmm-meal-nutrition-calculator-result span {
    font-weight: 500;
    color: var(--ast-global-color-2);
}

.mmmm-meal-nutrition-calculator-result p:last-child {
    border-bottom: none;
}

.mmmm-meal-nutrition-calculator-cal::after {
    content: " kcal";
    opacity: 0.7;
}

.mmmm-meal-nutrition-calculator-fat::after,
.mmmm-meal-nutrition-calculator-carbs::after,
.mmmm-meal-nutrition-calculator-protein::after,
.mmmm-meal-nutrition-calculator-sugar::after,
.mmmm-meal-nutrition-calculator-fiber::after {
    content: " g";
    opacity: 0.7;
}

@media (max-width: 544px) {
    .mmmm-meal-nutrition-calculator {
        max-width: 100%;
    }
}

/* ==========================================================
   Einplanen-Dialog (Planner Dialog) – Design.
   Struktur (Overlay, Layout) liegt in der Plugin-CSS.
   ========================================================== */
.mmm-planner-dialog {
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.mmm-planner-dialog h4 {
    margin: 0 0 16px;
}

/* ==========================================================
   Kochmodus & Heute-Badge – Design.
   Struktur liegt in der Plugin-CSS.
   ========================================================== */
.mmm-cook-mode {
    padding: 16px;
}

.mmm-cook-mode-bar {
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.mmm-cook-mode-progress {
    font-weight: 600;
}

.mmm-cook-mode-step {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 0;
}

.mmm-cook-mode-nav {
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.mmm-cook-mode-nav button {
    padding: 12px 24px;
}

.mmm-meal-plan-day--today {
    border-left: 3px solid var(--mmm-green-600);
    padding-left: 12px;
}

.mmm-meal-plan-day-today-badge {
    display: inline-block;
    background: var(--mmm-green-600);
    color: #fff;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ==========================================================
   Kochmodus-Start-Button – Design.
   ========================================================== */
.mmm-cook-mode-start {
    display: block;
    width: 100%;
    padding: 14px 24px;
    margin: 0 0 1.5em;
    font-family: var(--mmm-font-text);
    font-size: 1.05em;
    font-weight: 800;
    background-color: var(--mmm-green-600);
    color: var(--mmm-white);
    border: none;
    border-radius: var(--mmm-r-pill);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
    transition: box-shadow 0.2s ease, transform 0.18s ease, background 0.15s ease;
}

.mmm-cook-mode-start:hover {
    box-shadow: var(--mmm-shadow-hover);
    transform: translateY(-2px);
}

/* ==========================================================
   Einkaufsliste: Zutat und Menge getrennt – Design.
   ========================================================== */
.mmm-shopping-item-name {
    margin-right: 1em;
}

.mmm-shopping-item-amount {
    color: var(--ast-global-color-3);
    font-size: 0.85em;
    opacity: 0.85;
}

/* ==========================================================
   App-Bar-Look für den klassischen Astra-Header (.main-header-*).
   Ergänzt die Header-Builder-Regeln (.ast-builder-menu-1) weiter
   unten, damit beide Astra-Header-Varianten identisch aussehen.
   ========================================================== */
.main-header-bar,
.ast-primary-header-bar {
    /*background: var(--mmm-surface);*/
    border-bottom: 1px solid var(--mmm-line);
    /*box-shadow: var(--mmm-shadow-sm);*/
}

.main-header-menu .menu-item > .menu-link {
    border-radius: var(--mmm-r-pill);
    padding: 8px 16px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}

.main-header-menu .menu-item > .menu-link:hover {
    background: var(--mmm-green-50);
    color: var(--mmm-green-700);
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
    background: var(--mmm-green-100);
    color: var(--mmm-green-700);
}

/* Logo-Größe an den App-Bar-Look angleichen */
/*.site-header .site-logo-img img,
.site-header .custom-logo {
    max-height: 48px;
    width: auto;
}*/

/* „Neuer Plan"-Button: Menü-Item mit CSS-Klasse mmm-menu-new-plan
   (Selektoren decken Menü-Item und Header-Builder-Button ab) */
.mmm-menu-new-plan > a,
.main-header-menu .mmm-menu-new-plan > .menu-link {
    background: var(--mmm-carrot-500);
    color: var(--mmm-white);
    box-shadow: 0 6px 16px rgba(232, 116, 59, 0.26);
    margin-left: 8px;
}

.mmm-menu-new-plan > a:hover,
.main-header-menu .mmm-menu-new-plan > .menu-link:hover {
    background: var(--mmm-carrot-600);
    color: var(--mmm-white);
}

/* ==========================================================
   Design-Bridge: „Stopf nicht!"-Design site-weit.
   Mappt Astras globale Variablen und die Typografie auf die
   --mmm-Tokens (Single Source oben in dieser Datei).
   ========================================================== */
body {
    --ast-global-color-0: var(--mmm-green-600);  /* Primär */
    --ast-global-color-1: var(--mmm-green-700);  /* Primär dunkel */
    --ast-global-color-2: var(--mmm-ink);        /* Überschriften */
    --ast-global-color-3: var(--mmm-ink-2);      /* Sekundärtext */
    --ast-global-color-4: var(--mmm-cream);      /* Fläche hell */
    --ast-global-color-5: var(--mmm-cream-2);    /* Fläche abgesetzt */
    --ast-border-radius: var(--mmm-r);
}

h1, h2, h3, h4,
.site-title,
.entry-title {
    font-family: var(--mmm-font-display, "Fredoka", system-ui, sans-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body,
button,
input,
select,
textarea {
    font-family: var(--mmm-font-text, "Nunito Sans", system-ui, sans-serif);
}

/* Plugin-Dialoge und Kochmodus an die neuen Buttons angleichen */
.mmm-planner-dialog {
    border-radius: var(--mmm-r-lg, 22px);
}

.mmm-planner-dialog-submit,
.mmm-cook-mode-next {
    background: var(--mmm-green-600, #5C9E2E);
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--mmm-r-pill, 999px);
    padding: 11px 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
}

.mmm-planner-dialog-submit:hover,
.mmm-cook-mode-next:hover {
    background: var(--mmm-green-700, #3F6F1E);
    color: #fff;
}

.mmm-planner-dialog-cancel,
.mmm-cook-mode-prev,
.mmm-cook-mode-exit {
    background: var(--mmm-surface, #FFFFFF);
    color: var(--mmm-ink-2, #6B665B);
    border: 1.5px solid var(--mmm-line-2, #E0D9C9);
    border-radius: var(--mmm-r-pill, 999px);
    padding: 11px 18px;
    font-weight: 800;
    cursor: pointer;
}

.mmm-planner-dialog-cancel:hover,
.mmm-cook-mode-prev:hover,
.mmm-cook-mode-exit:hover {
    border-color: var(--mmm-green-500, #74B73E);
    color: var(--mmm-green-700, #3F6F1E);
    background: var(--mmm-green-50, #F3F8EA);
}

.mmm-cook-mode-bar,
.mmm-cook-mode-nav {
    border-color: var(--mmm-line, #ECE6D9);
}

/* ==========================================================
   Typo-Skala — einheitliche Schriftstärken wie in der
   Plan-Ansicht (Fredoka 600/500, Nunito-Gewichte).
   ========================================================== */
h1, .entry-title {
    font-size: clamp(36px, 5vw, 44px);
    line-height: 1.1;
}

h2 {
    font-size: 28px;
    font-weight: 600;
}

h3 {
    font-size: 21px;
    font-weight: 600;
}

h4 {
    font-size: 19px;
    font-weight: 500;
}

/* ==========================================================
   SEITENKÖPFE — Archivköpfe, Einzelseiten-Header und Plan-Hero sitzen
   wie der Startseiten-Hero direkt auf der Seite: keine Karte, kein
   Rahmen, kein Schatten. Eine Regel für alle drei Bauformen, damit sie
   nicht wieder auseinanderlaufen (vorher stand dasselbe Rezept an drei
   Stellen im Stylesheet).
   ========================================================== */
.mmm-plan-hero,
.archive .ast-archive-description,
.single-post .entry-header,
.mmm-meal-plan-single .entry-header,
.mmm-single-recipe .entry-header,
.mmm-single-meal .entry-header {
    position: relative;
    padding: 0;
    margin: 0 0 var(--mmm-s8);

    /* Grüner Schimmer rechts. Absichtlich ein Hintergrund-Verlauf statt eines
       beschnittenen Kreises: diese Köpfe sind flach, ein Pseudo-Element würde
       an den Kanten als gerade Linie abgeschnitten. Die Radien sind relativ
       zur Box und kleiner als der Abstand zu jeder Kante — so läuft der
       Verlauf bei jeder Kopfhöhe innen aus und zeigt nirgends eine Kante. */
    background: radial-gradient(22% 45% at 78% 50%,
    var(--mmm-green-100), transparent 72%);
}

/* Das Blob-Element liefert das Plugin weiterhin — es wird nicht mehr
   gebraucht, der Schimmer sitzt jetzt im Hintergrund des Kopfes. */
.mmm-plan-hero__blob {
    display: none;
}

/* ==========================================================
   EINHEITLICHE SEITENTITEL — EINE Quelle für alle großen Titel:
   Plan-/Rezept-/Meal-Hero, Archiv- und Seitentitel. Der body-Präfix
   hebt die Spezifität über Astras Defaults und macht die Regel
   unabhängig vom .archive-/.page-Vorfahren.
   ========================================================== */
body .mmm-plan-hero h1,
body .ast-archive-title,
.ast-archive-description .ast-archive-title,
body .page-title,
body .archive .ast-archive-title,
body .page .entry-header .entry-title,
body .single-post .entry-header .entry-title,
body .mmm-meal-plan-single .entry-header .entry-title,
body .mmm-single-recipe .entry-header .entry-title,
body .mmm-single-meal .entry-header .entry-title {
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: clamp(34px, 5vw, 48px);
    color: var(--mmm-link);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--mmm-s4);
}

/* Keine Linie unter dem Archiv-Header */
.ast-archive-description {
    border-bottom: 0;
}

/* Titel über dem Hero-Blob halten */
.archive .ast-archive-title,
.page .entry-header .entry-title,
.single-post .entry-header .entry-title {
    position: relative;
    z-index: 1;
}

.archive .ast-archive-description p,
.page .entry-header p,
.single-post .entry-header p {
    position: relative;
    z-index: 1;
    color: var(--mmm-ink-2, #6B665B);
    max-width: 65ch;
}

/* ==========================================================
   Archiv-Suche + Filter ([mmm_archive_search]) — sitzt im Hero
   (.ast-archive-description), ausgegeben über
   astra_after_archive_description. Pill-Felder im Brand-Stil,
   über dem Hero-Blob (z-index:1).
   ========================================================== */
.mmm-archive-search {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mmm-s3, 12px);
    margin-top: var(--mmm-s6, 24px);
    max-width: 65ch;
}

/* Suchfeld + Selects: einheitliche Pill-Felder auf weißer Fläche */
.mmm-archive-search__text,
.mmm-archive-search select {
    height: 46px;
    margin: 0;
    font-family: var(--mmm-font-text);
    font-size: 15px;
    line-height: 1.2;
    color: var(--mmm-ink, #2C2A24);
    background-color: var(--mmm-surface, #fff);
    border: 1px solid var(--mmm-line-2, #E0D9C9);
    border-radius: var(--mmm-r-pill, 999px);
    box-shadow: var(--mmm-shadow-sm, 0 1px 2px rgba(44, 42, 36, 0.05));
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mmm-archive-search__text {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 var(--mmm-s5, 20px);
}

.mmm-archive-search__text::placeholder {
    color: var(--mmm-ink-3, #9A9485);
}

/* Selects: Platz für eigenen Chevron rechts */
.mmm-archive-search select {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0 var(--mmm-s10, 40px) 0 var(--mmm-s5, 20px);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239A9485' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--mmm-s4, 16px) center;
    background-size: 12px 8px;
}

.mmm-archive-search__text:focus,
.mmm-archive-search select:focus {
    outline: none;
    border-color: var(--mmm-green-500, #74B73E);
    box-shadow: 0 0 0 3px var(--mmm-green-100, #E7F2D8);
}

/* Submit-Button im Brand-Grün */
.mmm-archive-search__submit {
    height: 46px;
    padding: 0 var(--mmm-s6, 24px);
    font-family: var(--mmm-font-text);
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: var(--mmm-green-600, #5C9E2E);
    border: 1px solid var(--mmm-green-600, #5C9E2E);
    border-radius: var(--mmm-r-pill, 999px);
    box-shadow: var(--mmm-shadow-sm, 0 1px 2px rgba(44, 42, 36, 0.05));
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.mmm-archive-search__submit:hover {
    background: var(--mmm-green-500, #74B73E);
    border-color: var(--mmm-green-500, #74B73E);
}

.mmm-archive-search__submit:active {
    transform: translateY(1px);
}

.mmm-archive-search__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mmm-green-100, #E7F2D8);
}

/* Reset-Link dezent */
.mmm-archive-search__reset {
    font-family: var(--mmm-font-text);
    font-weight: 700;
    font-size: 14px;
    color: var(--mmm-ink-2, #6B665B);
    text-decoration: none;
    white-space: nowrap;
}

.mmm-archive-search__reset:hover {
    color: var(--mmm-green-700, #3F6F1E);
    text-decoration: underline;
}

/* Handy (≤544px): Felder stapeln, volle Breite */
@media (max-width: 544px) {
    .mmm-archive-search {
        gap: var(--mmm-s2, 8px);
        margin-top: var(--mmm-s5, 20px);
    }
    .mmm-archive-search__text,
    .mmm-archive-search select,
    .mmm-archive-search__submit {
        flex: 1 1 100%;
        width: 100%;
    }
    .mmm-archive-search__reset {
        margin: var(--mmm-s1, 4px) auto 0;
    }
}

/* ============================================================
   Archiv-Redesign — Design System v2
   Archiv-Ansicht angleichen an Single-Plan-Ansicht.
   ============================================================ */

/* ---------- Layout-5-Grid: Karten ---------- */
.ast-blog-layout-5-grid .ast-article-post {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0;
    margin-bottom: var(--s5);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.ast-blog-layout-5-grid .ast-article-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--line-2);
}
.ast-blog-layout-5-grid .ast-article-inner {
    background: transparent !important;
}
.ast-blog-layout-5-grid .blog-layout-5 {
    align-items: stretch;
}
.ast-blog-layout-5-grid .ast-blog-featured-section {
    border-radius: 0;
    overflow: hidden;
    min-width: 0;
}
.ast-blog-layout-5-grid .ast-blog-featured-section img {
    border-radius: 0;
}
.ast-blog-layout-5-grid .post-content {
    padding: var(--s5) var(--s6) var(--s6) !important;
}
.ast-blog-layout-5-grid .ast-no-thumb .post-content {
    width: 100% !important;
    padding-left: var(--s6) !important;
}

/* ---------- Plan-Titel ---------- */
.mmm_meal_plan .entry-title,
.mmm_meal_plan h2.entry-title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: var(--s2) 0 var(--s3) !important;
}
.mmm_meal_plan .entry-title a {
    color: var(--ink) !important;
    transition: color .15s;
}
.mmm_meal_plan .entry-title a:hover { color: var(--green-700) !important; }

/* ---------- Thumbnail-Strip ---------- */
.mmm-mealplan-thumbs {
    display: flex;
    gap: var(--s2);
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: var(--s4);
    scrollbar-width: none;
}
.mmm-mealplan-thumbs::-webkit-scrollbar { display: none; }
.mmm-mealplan-thumbs a { flex-shrink: 0; display: block; }
.mmm-mealplan-thumbs img {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid var(--line);
    display: block;
    transition: border-color .15s;
}
.mmm-mealplan-thumbs a:hover img { border-color: var(--green-500); }

/* ---------- Wochentag-Punkte (Override) ---------- */
.mmm-weekday {
    width: 30px;
    height: 30px;
    min-width: unset;
    padding: 0;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 800;
    font-family: var(--font-text);
    background: var(--cream-2);
    color: var(--ink-3);
    border: 2px solid transparent;
    line-height: 1;
}
.mmm-weekday-in-plan {
    background: var(--green-100);
    color: var(--green-700);
    border-color: var(--green-500);
}

/* ---------- Mahlzeit-Typen (Override) ---------- */
.mmm-mealtype {
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--carrot-100);
    color: var(--carrot-600);
    border: none;
    font-size: 12.5px;
    font-weight: 700;
}
.mmm-mealtype--lunch     { background: var(--green-50);  color: var(--green-700); }
.mmm-mealtype--breakfast { background: #FFF8E1; color: #92400E; }

/* ---------- Meta-Chips (Override) ---------- */
.mmm-meal-plan-meta {
    gap: var(--s2);
    margin-bottom: var(--s3);
}
.mmm-meta__item {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    opacity: 1;
}
.mmm-meta__item--cost {
    background: var(--carrot-100);
    border-color: transparent;
    color: var(--carrot-600);
}

/* ---------- Excerpt ---------- */
.ast-blog-layout-5-grid .ast-excerpt-container p,
.mmm_meal_plan .ast-excerpt-container p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
}

/* ---------- Kategorie-Labels ausblenden ---------- */
.ast-blog-single-element.ast-taxonomy-container { display: none; }

/* ============================================================
   ============================================================
   DESIGNSYSTEM-KOMPONENTEN  (vormals system.css)
   „Stopf nicht!"-Bausteine, die von den Hero-Shortcodes und
   den Einzelansichten (Plan / Rezept / Meal) genutzt werden.
   ============================================================
   ============================================================ */

body{
  font-family:var(--mmm-font-text);
  color:var(--mmm-ink);
  background:var(--mmm-cream);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.mmm-plan-page a{color:var(--mmm-green-600); text-decoration:none;}
.mmm-plan-page a:hover{color:var(--mmm-green-700);}

/* ---------- Page / Layout ---------- */
.mmm-plan-page{max-width:var(--mmm-maxw); margin:0 auto; padding:var(--mmm-s8) var(--mmm-s6) var(--mmm-s16); box-sizing:border-box;}
.mmm-plan-page *, .mmm-plan-page *::before, .mmm-plan-page *::after{box-sizing:border-box;}

/* ---------- Buttons ---------- */
.mmm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--mmm-s2);
  font-family:var(--mmm-font-text); font-weight:800; font-size:15px;
  padding:11px 18px; border-radius:var(--mmm-r-pill);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.mmm-btn:active{transform:translateY(1px);}
.mmm-btn .mmm-icon{font-size:16px;}
.mmm-btn--primary{background:var(--mmm-green-600); color:#fff; box-shadow:0 6px 16px rgba(92,158,46,.28);}
.mmm-btn--primary:hover{background:var(--mmm-green-700); color:#fff;}
.mmm-btn--accent{background:var(--mmm-carrot-500); color:#fff; box-shadow:0 6px 16px rgba(232,116,59,.26);}
.mmm-btn--accent:hover{background:var(--mmm-carrot-600); color:#fff;}
.mmm-btn--ghost{background:var(--mmm-surface); color:var(--mmm-ink-2); border-color:var(--mmm-line-2);}
.mmm-btn--ghost:hover{border-color:var(--mmm-green-500); color:var(--mmm-green-700); background:var(--mmm-green-50);}
.mmm-btn--sm{padding:8px 14px; font-size:14px;}

/* ---------- Chips / Tags / Badges ---------- */
.mmm-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--mmm-r-pill);
  background:var(--mmm-cream-2); color:var(--mmm-ink-2);
  font-weight:700; font-size:13.5px; line-height:1; white-space:nowrap;
}
.mmm-chip .mmm-icon{font-size:14px; color:var(--mmm-ink-3);}
.mmm-chip--stat{background:var(--mmm-surface); border:1px solid var(--mmm-line); color:var(--mmm-ink);}
.mmm-chip--stat .mmm-icon{color:var(--mmm-green-600);}
.mmm-chip--price{color:var(--mmm-carrot-600);}
.mmm-chip--price .mmm-icon{color:var(--mmm-carrot-500);}

/* ---------- Inline-Icons (Font Awesome 7 Free) ---------- */
.mmm-icon{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; flex:0 0 auto;
}

.mmm-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:8px;
  background:var(--mmm-green-50); color:var(--mmm-green-700);
  font-weight:700; font-size:12.5px; line-height:1; white-space:nowrap;
}
.mmm-tag::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--mmm-green-500);}
.mmm-tag--neutral{background:var(--mmm-cream-2); color:var(--mmm-ink-2);}
.mmm-tag--neutral::before{background:var(--mmm-ink-3);}

.mmm-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:var(--mmm-r-pill);
  font-weight:800; font-size:12.5px; line-height:1;
  background:var(--mmm-green-600); color:#fff;
}
.mmm-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:#fff;}

/* ---------- Plan-Hero ---------- */
/* Kasten und Blob kommen aus dem Block „SEITENKÖPFE". */
.mmm-plan-hero h1{position:relative; z-index:1;} /* Typografie aus „EINHEITLICHE SEITENTITEL" */
/* Zurück-Link zum Plan, oberhalb des Titels */
.mmm-plan-hero__back{font-size:.9rem; font-weight:600; color:var(--mmm-ink-3); text-decoration:none; margin-bottom:var(--mmm-s2);}
.mmm-plan-hero__back:hover{color:var(--mmm-green-700);}
.mmm-plan-hero__back .mmm-icon{font-size:.8em;}
.mmm-plan-hero__meta{display:flex; flex-wrap:wrap; gap:var(--mmm-s2); margin-bottom:var(--mmm-s5); position:relative; z-index:1;}
.mmm-plan-hero__actions{display:flex; flex-wrap:wrap; gap:var(--mmm-s3); position:relative;}
.mmm-plan-hero__lead{position:relative; z-index:1; margin:0 0 var(--mmm-s5); color:var(--mmm-ink-2); max-width:65ch;}

/* ---------- Autorenbox (direkt unter dem Rezept-Hero) ---------- */
.mmm-author-box{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:var(--mmm-s5);
  background:linear-gradient(135deg, var(--mmm-cream) 0%, var(--mmm-surface) 70%);
  border:1px solid var(--mmm-line);
  border-radius:var(--mmm-r-lg);
  padding:var(--mmm-s5) var(--mmm-s6);
  margin:0 0 var(--mmm-s8);
  box-shadow:var(--mmm-shadow-sm);
}
.mmm-author-box__blob{position:absolute; right:-30px; bottom:-55px; width:175px; height:175px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--mmm-green-100), transparent 70%); pointer-events:none; z-index:0;}
.mmm-author-box__media{position:relative; z-index:1; flex:0 0 auto;}
.mmm-author-box__avatar{
  width:84px; height:84px; border-radius:50%; display:block; object-fit:cover;
  border:3px solid var(--mmm-surface);
  box-shadow:0 0 0 2px var(--mmm-green-500), var(--mmm-shadow-sm);
}
.mmm-author-box__body{position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.mmm-author-box__eyebrow{font-family:var(--mmm-font-text); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--mmm-green-700);}
.mmm-author-box__name{font-family:var(--mmm-font-display); font-weight:600; font-size:23px; line-height:1.15; color:var(--mmm-ink);}
.mmm-author-box__bio{margin:0; color:var(--mmm-ink-2); font-size:15px; line-height:1.55; max-width:65ch;}

/* Social / contact links (from the author's profile) */
.mmm-author-box__social{display:flex; flex-wrap:wrap; gap:var(--mmm-s2); margin-top:var(--mmm-s1);}
.mmm-author-box__social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--mmm-surface); border:1px solid var(--mmm-line);
  color:var(--mmm-green-700); font-size:15px; text-decoration:none;
  transition:transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.mmm-author-box__social-link:hover,
.mmm-author-box__social-link:focus-visible{
  border-color:var(--mmm-green-600);
}

@media (max-width:544px){
  .mmm-author-box{flex-direction:column; align-items:flex-start; gap:var(--mmm-s3); padding:var(--mmm-s5);}
}

/* ---------- Section-Heading ---------- */
.mmm-section-head{display:flex; align-items:center; gap:var(--mmm-s3); margin:var(--mmm-s12) 0 var(--mmm-s5);}
.mmm-section-head h2{margin:0; font-family:var(--mmm-font-display); font-weight:600; font-size:28px; color:var(--mmm-ink);}
.mmm-section-head__line{flex:1; height:2px; background:var(--mmm-line); border-radius:2px;}

/* ---------- Tages-Rail & Rezept-Karte ---------- */
.mmm-rail-day{position:relative; padding-left:var(--mmm-s8); margin-bottom:var(--mmm-s6);}
.mmm-rail-day::before{content:""; position:absolute; left:9px; top:8px; bottom:-26px; width:3px; border-radius:3px; background:var(--mmm-line);}
.mmm-rail-day:last-child::before{display:none;}
.mmm-rail-day__dot{position:absolute; left:0; top:6px; width:21px; height:21px; border-radius:50%; background:var(--mmm-surface); border:3px solid var(--mmm-green-500);}
.mmm-rail-day--today .mmm-rail-day__dot{background:var(--mmm-green-500); box-shadow:0 0 0 4px var(--mmm-green-100);}
.mmm-rail-day__head{display:flex; align-items:baseline; gap:var(--mmm-s3); flex-wrap:wrap; margin-bottom:var(--mmm-s3);}
.mmm-rail-day__name{font-family:var(--mmm-font-display); font-weight:600; font-size:21px; color:var(--mmm-ink);}
.mmm-rail-day__meal{font-size:14px; color:var(--mmm-ink-2); font-weight:700; white-space:nowrap;}
.mmm-rail-day__kcal{font-size:14px; color:var(--mmm-ink-3); font-weight:700; white-space:nowrap;}
.mmm-rail-day__sub{display:flex; align-items:baseline; gap:var(--mmm-s3); margin:var(--mmm-s3) 0 var(--mmm-s2);}

.mmm-recipe-card{
  display:grid; grid-template-columns:124px 1fr; gap:var(--mmm-s5);
  background:var(--mmm-surface); border:1px solid var(--mmm-line);
  border-radius:var(--mmm-r); padding:var(--mmm-s4);
  box-shadow:var(--mmm-shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.mmm-recipe-card + .mmm-recipe-card,
.mmm-rail-day__sub + .mmm-recipe-card{margin-top:var(--mmm-s3);}
.mmm-recipe-card:hover{transform:translateY(-2px); box-shadow:var(--mmm-shadow-md); border-color:var(--mmm-line-2);}
.mmm-recipe-card__media{width:124px; height:124px; border-radius:12px; overflow:hidden; background:var(--mmm-cream-2);}
.mmm-recipe-card__media img{width:100%; height:100%; object-fit:cover; display:block;}
.mmm-recipe-card__media--empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--mmm-ink-3); text-align:center; padding:8px;}
.mmm-recipe-card__media--empty img{width:54px; height:auto; opacity:.85; filter:grayscale(.15);}
.mmm-recipe-card__media--empty span{font-size:11px; font-weight:700; line-height:1.2;}

.mmm-recipe-card__body{min-width:0; display:flex; flex-direction:column; gap:var(--mmm-s3); padding:var(--mmm-s1) var(--mmm-s2) var(--mmm-s1) 0;}
.mmm-recipe-card__title{font-family:var(--mmm-font-display); font-weight:500; font-size:19px; color:var(--mmm-ink); margin:0; line-height:1.2;}
.mmm-recipe-card:hover .mmm-recipe-card__title{color:var(--mmm-green-700);}
.mmm-recipe-card__meta{display:flex; flex-wrap:wrap; gap:var(--mmm-s2);}
.mmm-recipe-card__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}

/* ---------- Nährwert-Übersicht (Designsystem) ---------- */
.mmm-nutri-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--mmm-s4); margin-bottom:var(--mmm-s5);}
.mmm-nutri-stat{background:var(--mmm-surface); border:1px solid var(--mmm-line); border-radius:var(--mmm-r); padding:var(--mmm-s5); box-shadow:var(--mmm-shadow-sm);}
.mmm-nutri-stat__k{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mmm-ink-3);}
.mmm-nutri-stat__v{font-family:var(--mmm-font-display); font-weight:600; font-size:30px; color:var(--mmm-green-700); line-height:1.1; margin-top:6px;}
.mmm-nutri-stat__u{font-size:13px; color:var(--mmm-ink-2); font-weight:700;}

.mmm-nutri-table{width:100%; border-collapse:separate; border-spacing:0; background:var(--mmm-surface); border:1px solid var(--mmm-line); border-radius:var(--mmm-r); overflow:hidden; box-shadow:var(--mmm-shadow-sm);}
.mmm-nutri-table thead th{background:var(--mmm-green-700); color:#fff; font-family:var(--mmm-font-text); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; padding:14px var(--mmm-s5); text-align:right;}
.mmm-nutri-table thead th:first-child{text-align:left;}
.mmm-nutri-table td{padding:13px var(--mmm-s5); text-align:right; font-weight:700; color:var(--mmm-ink); border-top:1px solid var(--mmm-line);}
.mmm-nutri-table td:first-child{text-align:left; color:var(--mmm-ink-2); font-weight:800;}
.mmm-nutri-table tbody tr:nth-child(even){background:var(--mmm-green-50);}
.mmm-nutri-table tbody tr:hover{background:var(--mmm-green-100);}

/* Tablet (≤921px): Nährwert-Kacheln 4 → 2 Spalten */
@media (max-width:921px){
  .mmm-nutri-stats{grid-template-columns:repeat(2,1fr); gap:var(--mmm-s3);}
}

/* Handy (≤544px) */
@media (max-width:544px){
  .mmm-plan-page{padding:var(--mmm-s5) var(--mmm-s4) var(--mmm-s12);}
  /* 1fr schrumpft nicht unter Inhaltsbreite → Kacheln liefen 22px über */
  .mmm-nutri-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mmm-nutri-stat{padding:var(--mmm-s4);}
  .mmm-recipe-card{grid-template-columns:84px 1fr; gap:var(--mmm-s4); padding:var(--mmm-s3);}
  .mmm-recipe-card__media{width:84px; height:84px;}
  .mmm-section-head h2{font-size:23px;}
  /* Plan-Builder: kompaktere Karten, Rail etwas schmaler */
  .mmm-plan-day{padding-left:var(--mmm-s6);}
  .mmm-plan-item{gap:var(--mmm-s3); padding:var(--mmm-s2);}
  .mmm-plan-item-thumb{width:64px; height:64px;}
}

/* ============================================================
   ASTRA-LIVE-OVERRIDES (vormals system.css) — global wirksam
   ============================================================ */

/* --- Hintergrund --- */
body,
.ast-separate-container {
  background-image: none !important;
  background-color: var(--mmm-cream) !important;
  background-attachment: unset !important;
}

/* --- Globale Links --- */
a             { color: var(--mmm-green-600); }
a:hover,
a:focus       { color: var(--mmm-green-700); }
::selection   { background: var(--mmm-green-100); color: var(--mmm-green-700); }

/* --- Astra Container-Breite --- */
@media (min-width: 922px) {
  .ast-container { max-width: var(--mmm-maxw); }
}

/* ============================================================
   HEADER & PRIMÄR-NAVIGATION (Header-Builder .ast-builder-menu-1)
   Deckt die gesamte Kopfleiste ab: Bar, Menü-Items, Icons,
   Submenüs, „Neuer Plan"-Button (.ast-header-html-1/-2) und Badge.
   ============================================================ */

/* --- Kopfleiste --- */
.ast-primary-header-bar {
  background: var(--mmm-surface) !important;
  border-bottom: 1px solid var(--mmm-line) !important;
  box-shadow: var(--mmm-shadow-sm);
}

/* Rechte Sektion: Menü + „Neuer Plan"-Button vertikal zentriert,
   mit gleichmäßigem Abstand. */
.site-header-primary-section-right {
  align-items: center;
  gap: var(--mmm-s3);
}

/* --- Menü-Container & Item-Abstände --- */
.ast-builder-menu-1 .main-header-menu.ast-nav-menu {
  gap: var(--mmm-s1);
  align-items: center;
}

/* --- Menü-Links --- */
.ast-builder-menu-1 .menu-item > .menu-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--mmm-font-text);
  font-weight: 700;
  font-size: 15px;
  color: var(--mmm-ink-2);
  border-radius: var(--mmm-r-pill);
  padding: 8px 14px;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item:focus-within > .menu-link {
  background: var(--mmm-green-50);
  color: var(--mmm-green-700) !important;
}
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link {
  background: var(--mmm-green-100);
  color: var(--mmm-green-700) !important;
}

.ast-builder-menu-1 .menu-link:focus-visible,
.ast-header-html-1 .menu-link:focus-visible,
.ast-builder-menu-2 .menu-link:focus-visible,
.ast-header-html-2 .menu-link:focus-visible {
  outline: 2px solid var(--mmm-green-500);
  outline-offset: 2px;
}

/* --- Icons in den Menü-Links (fa-solid) --- */
.ast-builder-menu-1 .menu-link i {
  font-size: 0.9em;
  color: var(--mmm-green-600);
  transition: color .15s;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link i,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link i,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link i {
  color: var(--mmm-green-700);
}

/* --- Submenüs / Dropdowns (.sub-menu, submenu-with-border) --- */
.ast-builder-menu-1 .sub-menu {
  background: var(--mmm-surface);
  border: 1px solid var(--mmm-line);
  border-radius: var(--mmm-r);
  box-shadow: var(--mmm-shadow-md);
  padding: var(--mmm-s2);
  min-width: 220px;
}
.ast-builder-menu-1 .sub-menu .menu-item > .menu-link {
  display: flex;
  width: 100%;
  border-radius: var(--mmm-r-sm);
  padding: 8px 12px;
}

/* --- „Neuer Plan"-Button (HTML-Elemente im Header: html-1 und html-2) --- */
.ast-header-html-1 .menu-link,
.ast-header-html-1 a.menu-link,
.ast-header-html-2 .menu-link,
.ast-header-html-2 a.menu-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--mmm-carrot-500) !important;
  color: #fff !important;
  border-radius: var(--mmm-r-pill);
  font-family: var(--mmm-font-text);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(232,116,59,.26);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.ast-header-html-1 .menu-link:hover,
.ast-header-html-1 a.menu-link:hover,
.ast-header-html-2 .menu-link:hover,
.ast-header-html-2 a.menu-link:hover {
  background: var(--mmm-carrot-600) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(232,116,59,.32);
  transform: translateY(-1px);
}
.ast-header-html-1 .menu-link:active,
.ast-header-html-1 a.menu-link:active,
.ast-header-html-2 .menu-link:active,
.ast-header-html-2 a.menu-link:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(232,116,59,.24);
}
.ast-header-html-1 .menu-link i,
.ast-header-html-2 .menu-link i {
  color: #fff;
  font-size: 0.95em;
}
/* Astras HTML-Element packt den Link in <p> — Abstände neutralisieren */
.ast-header-html-1 .ast-builder-html-element p,
.ast-header-html-2 .ast-builder-html-element p {
  margin: 0;
  line-height: 1;
}

/* --- Warenkorb-Badge im „Neuer Plan"-Button --- */
.mmm-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #fff;
  color: var(--mmm-carrot-600);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
/* Leerer/Null-Zustand: Badge ausblenden, damit der Button sauber bleibt */
.mmm-cart-badge:empty {
  display: none;
}

/* --- Kategorien-Switcher (Pill-Tabs) — überschreibt die ältere Toggle-Variante --- */
.meal-plan-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmm-s2);
  margin-top: var(--mmm-s5);
  padding: 0;
  background: none;
  border-radius: 0;
}
.meal-plan-switcher a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--mmm-r-pill);
  background: var(--mmm-cream-2);
  color: var(--mmm-ink-2);
  font-family: var(--mmm-font-text);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid transparent;
  transition: all .15s;
  box-shadow: none;
}
.meal-plan-switcher a:hover {
  background: var(--mmm-green-50);
  color: var(--mmm-green-700) !important;
  border-color: var(--mmm-green-500);
}
.meal-plan-switcher a.active {
  background: var(--mmm-green-100);
  color: var(--mmm-green-700) !important;
  border-color: var(--mmm-green-500);
}
.meal-plan-switcher a.meal-plan-switcher__individual {
  opacity: 0.65;
  background: none;
  color: var(--mmm-ink-3);
  border-style: dashed;
  border-color: var(--mmm-line-2);
  font-weight: 600;
  margin-left: 0;
}
.meal-plan-switcher a.meal-plan-switcher__individual:hover {
  opacity: 1;
  border-style: solid;
}

/* ============================================================
   REZEPT-ARCHIV (mmm-recipe-archive)
   Layout mit rechter Sidebar; Karten mit Beitragsbild.
   ============================================================ */
.mmm-recipe-archive .ast-blog-featured-section.post-thumb {
  width: 34% !important;
  align-self: stretch;
  margin: 0;
}
.mmm-recipe-archive .post-thumb-img-content,
.mmm-recipe-archive .post-thumb-img-content a {
  display: block;
  height: 100%;
}
.mmm-recipe-archive .post-thumb-img-content img {
  width: 100% !important;
  height: 100% !important;
  min-height: 210px;
  object-fit: cover;
  display: block;
}
.mmm-recipe-archive .post-content {
  width: 66% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mmm-recipe-archive .entry-title,
.mmm-recipe-archive h2.entry-title {
  font-family: var(--mmm-font-display) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin: 0 0 var(--mmm-s2) !important;
}
.mmm-recipe-archive .entry-title a       { color: var(--mmm-ink) !important; transition: color .15s; }
.mmm-recipe-archive .entry-title a:hover { color: var(--mmm-green-700) !important; }

.mmm-recipe-archive-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mmm-s2);
  margin: var(--mmm-s3) 0;
}
.mmm-recipe-archive-item-meta .mmm-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--mmm-r-pill);
  background: var(--mmm-surface);
  border: 1px solid var(--mmm-line);
  color: var(--mmm-ink);
  font-family: var(--mmm-font-text);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mmm-recipe-archive-item-meta .mmm-meta__item--calories { color: var(--mmm-ink); }
.mmm-recipe-archive-item-meta .mmm-meta__item--cost {
  /*background: var(--mmm-carrot-100);*/
  /*border-color: 1px solid var(--mmm-line);*/
  color: var(--mmm-ink);
}
.mmm-recipe-archive-item-meta .mmm-meta__item--category,
.mmm-recipe-archive-item-meta .mmm-meta__item--diet {
  background: var(--mmm-green-50);
  border-color: transparent;
  color: var(--mmm-green-700);
  border-radius: 8px;
}

/* „Einplanen"-Button — überschreibt die ältere Link-Variante */
.mmm-recipe-actions__item--cart {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  border-radius: var(--mmm-r-pill) !important;
  background: var(--mmm-green-600) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--mmm-font-text);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(92,158,46,.24);
  transition: background .15s, transform .12s;
  margin-left: auto;
  text-decoration: none;
}
.mmm-recipe-actions__item--cart::before {
  content: "+";
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.mmm-recipe-actions__item--cart:hover  { background: var(--mmm-green-700) !important; color: #fff !important; }
.mmm-recipe-actions__item--cart:active { transform: translateY(1px); }

.mmm-recipe-archive #secondary .widget {
  background: var(--mmm-surface) !important;
  border: 1px solid var(--mmm-line);
  border-radius: var(--mmm-r);
  padding: var(--mmm-s5) !important;
  box-shadow: var(--mmm-shadow-sm);
}
.mmm-recipe-archive #secondary .widget-title {
  font-family: var(--mmm-font-display) !important;
  font-weight: 600;
  color: var(--mmm-ink) !important;
  font-size: 18px !important;
}

/* Etwas mehr Luft nach der Pagination in den Archiven */
.archive .ast-pagination,
.archive nav.pagination,
.archive .paging-navigation {
  margin-bottom: var(--mmm-s10, 40px);
}

/* Handy (≤544px): Bild und Inhalt untereinander statt nebeneinander */
@media (max-width: 544px) {
  .mmm-recipe-archive .blog-layout-5 { flex-wrap: wrap; }
  .mmm-recipe-archive .ast-blog-featured-section.post-thumb { width: 100% !important; }
  .mmm-recipe-archive .post-content { width: 100% !important; }
  .mmm-recipe-archive .post-thumb-img-content img { min-height: 180px; }
  .mmm-recipe-actions__item--cart { margin-left: 0; }
}

/* ==========================================================
   REZEPT-ARCHIV: nach Kategorien gruppierte Übersicht
   ([mmm_recipes_index] in archive-mmm_recipe.php). Die Karten erben das
   Aussehen der bisherigen Archivkarten (.post-thumb / .post-content /
   .entry-title) über die body-Klasse .mmm-recipe-archive — hier nur die
   Gruppierung, Überschriften und die Karten-Hülle.
   ========================================================== */
.mmm-recipes-index {
  max-width: var(--mmm-maxw);
  margin: var(--mmm-s8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--mmm-s8);
}
.mmm-recipes-index__cat {
  font-family: var(--mmm-font-display) !important;
  font-weight: 600;
  font-size: 26px;
  color: var(--mmm-ink);
  margin: 0 0 var(--mmm-s4);
  padding-bottom: var(--mmm-s2);
  border-bottom: 2px solid var(--mmm-line-2);
}
.mmm-recipes-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--mmm-s5);
}
.mmm-recipes-index__card {
  display: flex;
  flex-wrap: wrap;
  background: var(--mmm-surface);
  border: 1px solid var(--mmm-line);
  border-radius: var(--mmm-r);
  box-shadow: var(--mmm-shadow-sm);
  overflow: hidden;
}
.mmm-recipes-index__card .post-content {
  padding: var(--mmm-s5) var(--mmm-s6);
}
/* Karten ohne Beitragsbild: Inhalt nimmt die volle Breite ein. */
.mmm-recipes-index__card:not(:has(.post-thumb)) .post-content {
  width: 100% !important;
}

/* ==========================================================
   Abonnement-Formular (Optik; Struktur liegt in der Plugin-CSS)
   ========================================================== */
.mmm-subscribe-form {
  /*max-width: 480px;*/
  max-width: var(--mmm-maxw);
  padding: var(--mmm-s6);
  background: var(--mmm-surface);
  border: 1px solid var(--mmm-line);
  border-radius: var(--mmm-r);
  box-shadow: var(--mmm-shadow-sm);
  font-family: var(--mmm-font-text);
}

.mmm-subscribe-form label {
  font-weight: 700;
  color: var(--mmm-ink-2);
  font-size: 14px;
}

.mmm-subscribe-form input[type="email"],
.mmm-subscribe-form input[type="text"] {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1.5px solid var(--mmm-line-2);
  border-radius: var(--mmm-r-sm);
  font: inherit;
}

.mmm-subscribe-form input[type="email"]:focus,
.mmm-subscribe-form input[type="text"]:focus {
  outline: none;
  border-color: var(--mmm-green-500);
}

/* Optional start-day picker (shortcode pick_start="1") */
.mmm-subscribe-start {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 40px 10px 12px;
  border: 1.5px solid var(--mmm-line-2);
  border-radius: var(--mmm-r-sm);
  background-color: var(--mmm-surface);
  font: inherit;
  color: var(--mmm-ink-1);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c9e2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.mmm-subscribe-start:focus {
  outline: none;
  border-color: var(--mmm-green-500);
}

.mmm-subscribe-consent label {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--mmm-ink-2);
}

.mmm-subscribe-consent a {
  color: var(--mmm-green-600);
}

.mmm-subscribe-submit {
  padding: 11px 20px;
  border: 0;
  border-radius: var(--mmm-r-pill);
  background: var(--mmm-green-600);
  color: #fff;
  font-family: var(--mmm-font-text);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
  transition: background 0.15s ease, transform 0.12s ease;
}

.mmm-subscribe-submit:hover { background: var(--mmm-green-700); }
.mmm-subscribe-submit:active { transform: translateY(1px); }
.mmm-subscribe-submit:disabled { opacity: 0.6; cursor: default; }

.mmm-subscribe-message.mmm-msg--ok { color: var(--mmm-green-700); font-weight: 700; }
.mmm-subscribe-message.mmm-msg--error { color: var(--mmm-carrot-600); font-weight: 700; }

/* Intro paragraph above the form on the single plan page */
.mmm-subscribe-intro {
  margin: 0 0 var(--mmm-s4);
  color: var(--mmm-ink-2);
  max-width: 65ch;
}

.mmm-plan-page .mmm-subscribe-form {
    max-width: var(--mmm-maxw);
}

/* ==========================================================
   Ingredients as content: single hero + archive index
   ========================================================== */

/* Recipes using this ingredient (single ingredient page) — simple link list,
   like the ingredient archive. */
.mmm-ingredient-recipes {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--mmm-s8);
}

@media (min-width: 769px) {
    .mmm-ingredient-recipes {
        columns: 3;
    }
}

.mmm-ingredient-recipes li {
    margin: 0 0 var(--mmm-s2);
    break-inside: avoid;
}

.mmm-ingredient-recipes a {
    text-decoration: none;
    color: var(--mmm-ink);
}

.mmm-ingredient-recipes a:hover {
    color: var(--mmm-primary);
    text-decoration: underline;
}

.mmm-ingredient-content {
    max-width: var(--mmm-maxw);
    margin-left: auto;
    margin-right: auto;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: 1.25em 1.5em;
}

/* Archive: category-grouped index of all ingredients. */
.mmm-ingredients-index {
    max-width: var(--mmm-maxw);
    margin: var(--mmm-s8) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--mmm-s5);
}

/* Fallback: if the per-category group wrappers aren't in the markup (e.g. the
   plugin shortcode update isn't deployed yet), card the whole index so it is
   never bare on the background. */
.mmm-ingredients-index:not(:has(.mmm-ingredients-index__group)) {
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: var(--mmm-s6) var(--mmm-s8);
}

/* Each ingredient category is its own card (heading inside). */
.mmm-ingredients-index__group {
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
    padding: var(--mmm-s6) var(--mmm-s8);
}

.mmm-ingredients-index__cat {
    margin: 0 0 var(--mmm-s4);
    padding-bottom: var(--mmm-s2);
    border-bottom: 2px solid var(--mmm-line-2);
}

/* In the single-card fallback, keep spacing between category blocks. */
.mmm-ingredients-index > .mmm-ingredients-index__cat:not(:first-child) {
    margin-top: var(--mmm-s8);
}

/* Simple, sorted links in responsive columns (no images, no cards). */
.mmm-ingredients-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--mmm-s8);
}

@media (min-width: 769px) {
    .mmm-ingredients-index__list {
        columns: 3;
    }
}

.mmm-ingredients-index__item {
    margin: 0 0 var(--mmm-s2);
    break-inside: avoid;
}

.mmm-ingredients-index__item a {
    text-decoration: none;
    color: var(--mmm-ink);
}

.mmm-ingredients-index__item a:hover {
    color: var(--mmm-primary);
    text-decoration: underline;
}

/* ==========================================================
   Recipe ratings (comment-based) — design only
   (structural basics live in the plugin's frontend.css)
   ========================================================== */

/* Average display ([mmm_recipe_rating]) */
.mmm-rating {
    gap: var(--mmm-s2);
}

.mmm-rating__stars {
    gap: 2px;
    color: var(--mmm-carrot-500);
    font-size: 1.05em;
}

.mmm-rating__avg {
    font-weight: 700;
    color: var(--mmm-ink);
}

.mmm-rating__count {
    color: var(--mmm-ink-2);
    font-size: var(--mmm-font-sm);
}

.mmm-rating--empty {
    color: var(--mmm-ink-3);
    font-size: var(--mmm-font-sm);
    font-style: italic;
}

/* Prominent rating summary at the top of the ratings section. */
.mmm-recipe-ratings .mmm-rating {
    margin-bottom: var(--mmm-s5);
    font-size: var(--mmm-font-lg);
}

/* Star input inside the comment form. */
.mmm-rating-field > label {
    margin-bottom: var(--mmm-s2);
    font-weight: 600;
    color: var(--mmm-ink-2);
}

.mmm-rating-field .required {
    color: var(--mmm-carrot-600);
}

.mmm-rating-input {
    gap: 4px;
}

.mmm-rating-input label {
    padding: 0 1px;
    font-size: 1.9em;
    color: var(--mmm-line-2);
    transition: color 0.12s ease, transform 0.12s ease;
}

.mmm-rating-input label:hover,
.mmm-rating-input label:hover ~ label,
.mmm-rating-input input[type="radio"]:checked ~ label {
    color: var(--mmm-carrot-500);
}

.mmm-rating-input label:hover {
    transform: scale(1.12);
}

.mmm-rating-input input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--mmm-carrot-500);
    outline-offset: 2px;
    border-radius: var(--mmm-r-sm);
}

/* Reviews list ([mmm_recipe_reviews]) — review cards, not comment thread. */
.mmm-reviews {
    gap: var(--mmm-s4);
    margin-top: var(--mmm-s5);
    margin-left: 0;
    list-style-type: none;
}

.mmm-review {
    margin-bottom: var(--mmm-s4);
    padding: var(--mmm-s4) var(--mmm-s5);
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r);
    box-shadow: var(--mmm-shadow-sm);
}

.mmm-review__head {
    gap: var(--mmm-s2) var(--mmm-s3);
    margin-bottom: var(--mmm-s2);
}

.mmm-review__author {
    font-weight: 700;
    color: var(--mmm-ink);
}

.mmm-review__date {
    color: var(--mmm-ink-3);
    font-size: var(--mmm-font-sm);
}

.mmm-review__text {
    color: var(--mmm-ink-2);
}

.mmm-review__text p:last-child {
    margin-bottom: 0;
}

/* Rating form sits below the reviews. */
.mmm-recipe-ratings .comment-respond {
    margin-top: var(--mmm-s6);
}

/* Subscriber rating form ([mmm_recipe_rating_form]) on the rating page. */
.mmm-subscriber-rating {
    max-width: 460px;
}

.mmm-subscriber-rating__title {
    margin-top: 0;
}

.mmm-rating-submit {
    margin-top: var(--mmm-s4);
    padding: 0.6em 1.4em;
    background: var(--mmm-green-600);
    color: #fff;
    border: 0;
    border-radius: var(--mmm-r-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mmm-rating-submit:hover {
    background: var(--mmm-green-700);
}

.mmm-rating-notice {
    padding: var(--mmm-s3) var(--mmm-s4);
    border-radius: var(--mmm-r-sm);
    font-weight: 600;
}

.mmm-rating-notice--ok {
    background: var(--mmm-green-50);
    color: var(--mmm-green-700);
}

.mmm-rating-notice--error {
    background: var(--mmm-carrot-100);
    color: var(--mmm-carrot-600);
}

/* Meal photo gallery ([mmm_recipe_photo_gallery]) on the recipe page. */
.mmm-photo-gallery__grid {
    gap: var(--mmm-s3);
}

.mmm-photo-gallery__item img {
    border-radius: var(--mmm-r-sm);
}

.mmm-photo-gallery__empty {
    color: var(--mmm-ink-400);
}

.mmm-photo-gallery__upload {
    margin-top: var(--mmm-s4);
}

.mmm-photo-gallery__upload-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mmm-s2);
    font-weight: 700;
    color: var(--mmm-green-600);
    text-decoration: none;
}

.mmm-photo-gallery__upload-link:hover {
    color: var(--mmm-green-700);
}

/* Photo upload form ([mmm_photo_upload_form]) on the upload page. */
.mmm-photo-upload {
    max-width: 460px;
}

.mmm-photo-upload__title {
    margin-top: 0;
}

.mmm-photo-upload__recipe-image img {
    border-radius: var(--mmm-r-sm);
    margin-bottom: var(--mmm-s3);
}

.mmm-photo-upload__label {
    gap: var(--mmm-s2);
    font-weight: 700;
    margin-bottom: var(--mmm-s2);
}

.mmm-photo-upload__hint {
    color: var(--mmm-ink-400);
    font-size: 0.875em;
}

/* Average rating above the recipe title (in the hero) and on archive cards. */
.mmm-plan-hero__rating {
    display: flex;
    justify-content: center;
    margin-bottom: var(--mmm-s2);
}

.mmm-recipe-archive .mmm-rating {
    margin-top: var(--mmm-s1);
}

/* ==========================================================
   Recipe archive: browse rows (newest + favorites)
   ========================================================== */
/* Own card, outside the hero, above the recipe list. */
/* Heading above the main "all recipes" loop on the recipe post-type archive. */
.mmm-recipe-archive-heading{
  margin:var(--mmm-s8) 0 var(--mmm-s5);
  font-family:var(--mmm-font-display);
  font-weight:600; font-size:26px; color:var(--mmm-ink);
}

.mmm-recipe-browse{
  margin:var(--mmm-s6) 0 var(--mmm-s8); text-align:left;
  background:linear-gradient(135deg, var(--mmm-cream) 0%, var(--mmm-surface) 80%);
  border:1px solid var(--mmm-line); border-radius:var(--mmm-r-lg);
  box-shadow:var(--mmm-shadow-sm); padding:var(--mmm-s6);
}
/* Bildwände ([mmm_recipe_image_wall], [mmm_community_photo_wall]) — Optik */
.mmm-image-wall{margin:var(--mmm-s6) 0 var(--mmm-s8);}
.mmm-image-wall__grid{gap:var(--mmm-s2);}
.mmm-image-wall__tile{
  border-radius:var(--mmm-r); background:var(--mmm-cream);
  box-shadow:var(--mmm-shadow-sm);
}
.mmm-image-wall__tile img{transition:transform .25s ease;}
.mmm-image-wall__tile:hover img{transform:scale(1.04);}
.mmm-image-wall__label{
  padding:var(--mmm-s5) var(--mmm-s3) var(--mmm-s2);
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
  color:#fff; font-family:var(--mmm-font-display);
  font-weight:600; font-size:14px;
}

/* Neuester-Plan-Teaser ([mmm_latest_plan_teaser]) — Optik */
.mmm-plan-teaser{margin:var(--mmm-s6) 0 var(--mmm-s8);}
.mmm-plan-teaser__card{
  background:var(--mmm-surface); border:1px solid var(--mmm-line);
  border-radius:var(--mmm-r-lg); box-shadow:var(--mmm-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mmm-plan-teaser__card:hover{transform:translateY(-2px); box-shadow:var(--mmm-shadow-md);}
.mmm-plan-teaser__body{padding:var(--mmm-s6); gap:var(--mmm-s3);}
.mmm-plan-teaser__kicker{
  font-family:var(--mmm-font-display); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--mmm-green-700);
}
.mmm-plan-teaser__heading{
  margin:0; font-family:var(--mmm-font-display);
  font-weight:600; font-size:24px; color:var(--mmm-ink);
}
.mmm-plan-teaser__lead{margin:0; color:var(--mmm-ink-2); max-width:55ch;}
.mmm-plan-teaser--noimg .mmm-plan-teaser__body{padding:var(--mmm-s7) var(--mmm-s6);}

.mmm-recipe-row{margin:0 0 var(--mmm-s6);}
.mmm-recipe-browse .mmm-recipe-row:last-child{margin-bottom:0;}
.mmm-recipe-row__title{
  margin:0 0 var(--mmm-s3); font-family:var(--mmm-font-display);
  font-weight:600; font-size:22px; color:var(--mmm-ink);
}
.mmm-recipe-row__track{
  display:flex; gap:var(--mmm-s4); overflow-x:auto; padding-bottom:var(--mmm-s2);
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.mmm-recipe-row__card{
  flex:0 0 auto; width:210px; scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--mmm-surface); border:1px solid var(--mmm-line);
  border-radius:var(--mmm-r); overflow:hidden; box-shadow:var(--mmm-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mmm-recipe-row__card:hover{transform:translateY(-3px); box-shadow:var(--mmm-shadow-md);}
.mmm-recipe-row__media{display:block;}
.mmm-recipe-row__media img{
  display:block; width:100%; height:140px; object-fit:cover;
}
/* Body is a flex column that fills the (equal-height) card, so the action
   button can be pinned to the bottom and align across all cards. */
.mmm-recipe-row__body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:var(--mmm-s3) var(--mmm-s4);
}
.mmm-recipe-row__name{
  margin:0 0 var(--mmm-s2); font-family:var(--mmm-font-display);
  font-weight:600; font-size:16px; line-height:1.2;
}
.mmm-recipe-row__name a{color:var(--mmm-ink); text-decoration:none;}
.mmm-recipe-row__name a:hover{color:var(--mmm-green-700);}
.mmm-recipe-row__card .mmm-rating{margin-top:var(--mmm-s1); font-size:13px;}
/* Keep the slim browse cards uncluttered: stars + average only, no count. */
.mmm-recipe-row__card .mmm-rating__count{display:none;}
/* "Add to Planner" button: full-width, centred, pinned to the bottom so the
   buttons align across all cards regardless of title/rating height. */
/* margin-top:auto pins the button to the bottom (aligns across cards);
   padding-top guarantees a minimum gap above it even on full cards, since the
   auto margin collapses to 0 when the content fills the card height. */
.mmm-recipe-row__card .mmm-recipe-actions{margin-top:auto; padding-top:var(--mmm-s4);}
.mmm-recipe-row__card .mmm-recipe-actions__item--cart{
  margin-left:0 !important; width:100%; justify-content:center;
}

/* ==========================================================
   RECIPE SUBMIT FORM ([mmm_submit_recipe_form]) — look & feel
   ========================================================== */
.mmm-submit-recipe-form {
  max-width: var(--mmm-maxw);
  font-family: var(--mmm-font-text);
}

.mmm-submit-recipe-form label,
.mmm-submit-recipe-form .mmm-submit-recipe-label {
  font-weight: 700;
  color: var(--mmm-ink-2);
  font-size: 14px;
}

.mmm-submit-recipe-form input[type="text"],
.mmm-submit-recipe-form input[type="url"],
.mmm-submit-recipe-form input[type="number"],
.mmm-submit-recipe-form select {
  padding: 10px 12px;
  border: 1.5px solid var(--mmm-line-2);
  border-radius: var(--mmm-r-sm);
  font: inherit;
}

.mmm-submit-recipe-form input:focus,
.mmm-submit-recipe-form select:focus {
  outline: none;
  border-color: var(--mmm-green-500);
}

.mmm-submit-recipe-form .description {
  font-size: 13px;
  color: var(--mmm-ink-3);
  margin: 4px 0 0;
}

.mmm-submit-recipe-consent label {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--mmm-ink-2);
}

.mmm-submit-recipe-add-row {
  padding: 7px 14px;
  border: 1.5px solid var(--mmm-line-2);
  border-radius: var(--mmm-r-pill);
  background: transparent;
  color: var(--mmm-ink-2);
  font-family: var(--mmm-font-text);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.mmm-submit-recipe-add-row:hover {
  border-color: var(--mmm-green-500);
  color: var(--mmm-green-700);
}

.mmm-ing-remove {
  border: 0;
  background: transparent;
  color: var(--mmm-ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.mmm-ing-remove:hover { color: var(--mmm-carrot-600); }

.mmm-ing-suggest {
  border-color: var(--mmm-line-2);
  border-radius: var(--mmm-r-sm);
  box-shadow: var(--mmm-shadow-sm);
}

.mmm-ing-suggest li:hover {
  background: var(--mmm-green-50, #f0f7e8);
}

.mmm-submit-recipe-submit {
  margin-top: var(--mmm-s4);
  padding: 11px 20px;
  border: 0;
  border-radius: var(--mmm-r-pill);
  background: var(--mmm-green-600);
  color: #fff;
  font-family: var(--mmm-font-text);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(92, 158, 46, 0.28);
  transition: background 0.15s ease, transform 0.12s ease;
}

.mmm-submit-recipe-submit:hover { background: var(--mmm-green-700); }
.mmm-submit-recipe-submit:active { transform: translateY(1px); }
.mmm-submit-recipe-submit:disabled { opacity: 0.6; cursor: default; }

.mmm-submit-recipe-message.mmm-msg--ok { color: var(--mmm-green-700); font-weight: 700; }
.mmm-submit-recipe-message.mmm-msg--error { color: var(--mmm-carrot-600); font-weight: 700; }

/* Source link of visitor recipes ([mmm_recipe_source_link]) */
.mmm-recipe-source a {
  color: var(--mmm-green-600);
  font-weight: 700;
}

.mmm-recipe-source .mmm-recipe-source-host {
  color: var(--mmm-ink-3);
  font-weight: 400;
  font-size: 0.9em;
}

.mmm-recipe-source--pending {
  color: var(--mmm-ink-3);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Related recipes — "Dazu passt" / "Passend zu"
   Reuses the archive browse cards (.mmm-recipe-row__*), so no card
   styles are needed here.
   --------------------------------------------------------------- */
.mmm-related-recipes {
    margin: 0;
}

/* ---------------------------------------------------------------
   Summed kcal per day / person — plan rail + planner
   --------------------------------------------------------------- */

/* Plan rail: day total sits at the right of the day header. */
.mmm-rail-day__kcal--day {
    margin-left: auto;
    color: var(--mmm-green-700);
}

/* Planner: per-day total row below the day's meal list. */
.mmm-plan-day-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--mmm-s2);
    margin-top: var(--mmm-s2);
    padding-top: var(--mmm-s2);
    border-top: 1px dashed var(--mmm-line);
}

.mmm-plan-day-total[hidden] {
    display: none;
}

.mmm-plan-day-total__label {
    font-size: 13px;
    color: var(--mmm-ink-3);
}

.mmm-plan-day-total__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--mmm-green-700);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Recipes WITHOUT a photo: same card language as with a photo —
   just without the media block. Only structural adjustments here,
   no separate visual treatment (per feedback).
   --------------------------------------------------------------- */

/* Browse-row cards: body fills the card; title tops, button stays
   bottom-pinned via the existing flex rules. Nothing else differs. */
.mmm-recipe-row__card--noimg .mmm-recipe-row__name{
  text-wrap:balance;
}

/* Kompaktere Karussells & Bildwände auf Mobil: schmalere Karten, flachere
   Bilder, engere Abstände – mehr Vorschau pro Wischbewegung. */
@media (max-width:544px){
  .mmm-recipe-browse{padding:var(--mmm-s4); margin:var(--mmm-s5) 0 var(--mmm-s6);}
  .mmm-recipe-row{margin:0 0 var(--mmm-s5);}
  .mmm-recipe-row__title{font-size:18px; margin:0 0 var(--mmm-s2);}
  .mmm-recipe-row__track{gap:var(--mmm-s3);}
  .mmm-recipe-row__card{width:150px;}
  .mmm-recipe-row__media img{height:100px;}
  .mmm-recipe-row__body{padding:var(--mmm-s2) var(--mmm-s3);}
  .mmm-recipe-row__name{font-size:14px;}

  .mmm-image-wall{margin:var(--mmm-s5) 0 var(--mmm-s6);}
  .mmm-image-wall__grid{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));}
  .mmm-image-wall__label{font-size:12px; padding:var(--mmm-s4) var(--mmm-s2) var(--mmm-s1);}
}

/* Day-rail recipe cards: single column instead of the 124px media
   grid; everything else (surface, title, chips) stays identical. */
.mmm-recipe-card--noimg{
  grid-template-columns:1fr;
}
.mmm-recipe-card--noimg .mmm-recipe-card__body{
  padding-left:var(--mmm-s1);
}

/* Astra archive rows: Astra marks image-less rows with .ast-no-thumb
   but still emits an EMPTY featured-section div — hide it and let the
   content use the full row width. Same look as photo rows otherwise. */
.ast-article-post.type-mmm_recipe .ast-no-thumb .ast-blog-featured-section{
  display:none;
}
.ast-article-post.type-mmm_recipe .ast-no-thumb .post-content{
  width:100%;
}

/* ---------------------------------------------------------------
   Configurable notices on visitor-input forms (ratings, photos,
   subscription, plan creation) — [rendered by input_notice()].
   --------------------------------------------------------------- */
.mmm-input-notice{
  margin:var(--mmm-s3) 0;
  padding:var(--mmm-s3) var(--mmm-s4);
  border-left:3px solid var(--mmm-line-2);
  background:var(--mmm-cream-2);
  border-radius:var(--mmm-r-sm);
  font-size:13px;
  line-height:1.5;
  color:var(--mmm-ink-2);
}
.mmm-input-notice p{margin:0 0 var(--mmm-s1);}
.mmm-input-notice p:last-child{margin-bottom:0;}

/* ---------------------------------------------------------------
   Product polish: unified focus ring, reduced motion, busy state
   --------------------------------------------------------------- */

/* One consistent, token-based focus treatment for every interactive
   MixMyMeals element (keyboard navigation). */
[class*="mmm-"] a:focus-visible,
[class*="mmm-"] button:focus-visible,
[class*="mmm-"] input:focus-visible,
[class*="mmm-"] select:focus-visible,
[class*="mmm-"] textarea:focus-visible,
[class*="mmm-"] summary:focus-visible,
a[class*="mmm-"]:focus-visible,
button[class*="mmm-"]:focus-visible {
    outline: 2px solid var(--mmm-green-500);
    outline-offset: 2px;
    border-radius: var(--mmm-r-sm);
}

/* Respect the user's reduced-motion preference for all MixMyMeals
   transitions/animations (cards, buttons, cook mode, planner). */
@media (prefers-reduced-motion: reduce) {
    [class*="mmm-"],
    [class*="mmm-"]::before,
    [class*="mmm-"]::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Busy controls keep the brand ink but read as inactive. */
.is-busy {
    filter: saturate(.7);
}

/* ==========================================================
   Home Hero — Variante „Wochenkarte" (Shortcode: [mmm_home_hero])

   Führt mit dem Versprechen und zeigt daneben die laufende Woche als
   greifbares Objekt: eine Kachel pro Plantag plus den abgerissenen
   Einkaufszettel. Beides ist aus dem Logo geborgt (Block, Checkliste,
   Möhre). Die Kachelreihe beginnt am Starttag des Plans, nicht am Montag.

   Ergänzt den älteren [mmm_home_masthead] — der bleibt unberührt.
   ========================================================== */

.mmm-hh {
    position: relative;
    overflow: clip;
    background: var(--mmm-cream);
    border-bottom: 1px solid var(--mmm-line);
    font-family: var(--mmm-font-text);
    color: var(--mmm-ink);
}

/* Optional: aus dem Astra-Container ausbrechen. Nur benutzen, wenn kein
   Vorfahre overflow versteckt — sonst die Seite auf volle Breite stellen. */
.mmm-hh--bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.mmm-hh::before {
    content: "";
    position: absolute;
    inset: auto -10% 30% 55%;
    height: 520px;
    pointer-events: none;
    background: radial-gradient(45% 50% at 50% 50%,
    rgba(116, 183, 62, 0.20), rgba(116, 183, 62, 0) 70%);
}

.mmm-hh__inner {
    position: relative;
    /* Gleiche Spaltenbreite wie Astras .ast-container, damit Hero-Headline
       und der Seiteninhalt darunter links fluchten. */
    max-width: var(--mmm-maxw);
    margin: 0 auto;
    padding: 64px 24px 72px;

    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.mmm-hh__copy,
.mmm-hh__figure {
    min-width: 0;
}

/* Astra gibt Listenpunkten im .entry-content eigene Abstände — die Kacheln
   und Häkchenlisten regeln ihren Abstand selbst über gap. */
.mmm-hh li {
    margin: 0;
}

.mmm-hh__figure {
    padding-left: 34px;
}

/* Ohne Wochenkarte gäbe die zweite Spalte nur Leere her — dann einspaltig.
   Betrifft auch Seiten ganz ohne veröffentlichten Plan. */
.mmm-hh--no-figure .mmm-hh__inner {
    grid-template-columns: minmax(0, 1fr);
}

.mmm-hh--no-figure .mmm-hh__lead {
    max-width: 52ch;
}

/* ==========================================================
   Hero Text
   ========================================================== */

.mmm-hh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 7px 15px 7px 12px;
    border-radius: var(--mmm-r-pill);
    background: var(--mmm-green-100);
    color: var(--mmm-green-700);

    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
}

.mmm-hh h1.mmm-hh__title {
    margin: var(--mmm-s5) 0 0;
    font-family: var(--mmm-font-display);
    font-weight: 600;
    font-size: clamp(2.15rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--mmm-ink);
}

.mmm-hh h1.mmm-hh__title em {
    font-style: normal;
    color: var(--mmm-green-600);
}

.mmm-hh__lead {
    margin: var(--mmm-s5) 0 0;
    max-width: 34ch;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--mmm-ink-2);
}

.mmm-hh__lead strong {
    color: var(--mmm-ink);
    font-weight: 700;
}

/* ==========================================================
   Hero Buttons
   ========================================================== */

.mmm-hh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mmm-s3);
    margin-top: var(--mmm-s8);
}

.mmm-hh-cta,
.mmm-hh-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: var(--mmm-r-pill);

    font-family: var(--mmm-font-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition: transform 0.16s ease, box-shadow 0.16s ease,
    background 0.16s ease, border-color 0.16s ease;
}

.mmm-hh-cta {
    background: var(--mmm-carrot-500);
    color: var(--mmm-white);
    box-shadow: 0 8px 20px rgba(232, 116, 59, 0.28);
}

.mmm-hh-cta:hover,
.mmm-hh-cta:focus {
    background: var(--mmm-carrot-600);
    color: var(--mmm-white);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(232, 116, 59, 0.34);
}

.mmm-hh-ghost {
    background: transparent;
    color: var(--mmm-ink);
    border-color: var(--mmm-line-2);
}

.mmm-hh-ghost:hover,
.mmm-hh-ghost:focus {
    background: var(--mmm-surface);
    border-color: var(--mmm-ink-3);
    transform: translateY(-1px);
}

.mmm-hh a:focus-visible {
    outline: 3px solid var(--mmm-green-500);
    outline-offset: 3px;
}

/* ==========================================================
   Beweisleiste — ein Fuß über beide Spalten
   ========================================================== */

.mmm-hh__proof {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mmm-s3) var(--mmm-s10);

    margin: var(--mmm-s6) 0 0;
    padding-top: var(--mmm-s5);
    border-top: 1px solid var(--mmm-line);
    list-style: none;

    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mmm-ink-2);
}

.mmm-hh__proof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmm-hh__proof i,
.mmm-hh__eyebrow i {
    color: var(--mmm-green-600);
    font-size: 0.85em;
}

/* ==========================================================
   Wochenkarte
   ========================================================== */

.mmm-hh-wk {
    position: relative;
    padding: 18px 18px 14px;
    background: var(--mmm-surface);
    border: 1px solid var(--mmm-line);
    border-radius: var(--mmm-r-lg);
    box-shadow: var(--mmm-shadow-lg);
}

.mmm-hh-wk__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mmm-s4);
    margin-bottom: 14px;
}

.mmm-hh-wk__label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mmm-green-700);
}

.mmm-hh-wk__range {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--mmm-ink-3);
    white-space: nowrap;
}

.mmm-hh-wk__days {
    display: grid;
    /* Spaltenzahl kommt als --mmm-hh-days vom Shortcode und entspricht der
       Tagesanzahl des Plans. Die max-width deckelt die Kachelbreite, damit
       kurze Pläne nicht ein einzelnes Riesenfoto zeigen. */
    grid-template-columns: repeat(var(--mmm-hh-days, 7), 1fr);
    max-width: calc(var(--mmm-hh-days, 7) * 96px);
    gap: 7px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.mmm-hh-wk__day {
    min-width: 0;
}

.mmm-hh-wk__dow {
    display: block;
    margin-bottom: 6px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--mmm-ink-3);
}

.mmm-hh-wk__tile {
    position: relative;
    aspect-ratio: 1 / 1.22;
    border-radius: 11px;
    overflow: hidden;
    background: var(--mmm-cream-2);
    box-shadow: inset 0 0 0 1px rgba(44, 42, 36, 0.05);
}

.mmm-hh-wk__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmm-hh-wk__day--today .mmm-hh-wk__dow {
    color: var(--mmm-green-700);
}

.mmm-hh-wk__day--today .mmm-hh-wk__tile {
    box-shadow: 0 0 0 2.5px var(--mmm-green-500),
    0 4px 12px rgba(63, 111, 30, 0.18);
}

.mmm-hh-wk__foot {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--mmm-line);

    font-size: 14.5px;
    color: var(--mmm-ink-2);
}

.mmm-hh-wk__foot b {
    font-weight: 700;
    color: var(--mmm-ink);
}

.mmm-hh-wk__pin {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: var(--mmm-r-pill);
    background: var(--mmm-green-100);
    color: var(--mmm-green-700);
}

.mmm-hh-wk__pin i {
    font-size: 11px;
}

.mmm-hh-wk__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--mmm-green-600);
}

.mmm-hh-wk__more:hover {
    color: var(--mmm-green-700);
    text-decoration: underline;
}

.mmm-hh-wk__more i {
    font-size: 0.85em;
}

/* ==========================================================
   Einkaufszettel — liegt unter der Karte und überlappt ihre Schattenkante
   ========================================================== */

.mmm-hh-note {
    position: relative;
    z-index: 2;
    width: 196px;
    margin: -14px 0 0 -34px;
    padding: 13px 14px 12px;
    transform: rotate(-3.5deg);

    background: var(--mmm-cream-2);
    border: 1px solid var(--mmm-line-2);
    border-radius: 14px;
    box-shadow: var(--mmm-shadow-md);
}

/* Abrisskante */
.mmm-hh-note::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 6px;
    height: 3px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,
    var(--mmm-line-2) 0 8px, transparent 8px 15px);
}

.mmm-hh-note__t {
    margin: 6px 0 9px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mmm-ink-2);
}

.mmm-hh-note ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mmm-ink);
}

.mmm-hh-note li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mmm-hh-note li i {
    color: var(--mmm-green-600);
    font-size: 0.8em;
}

.mmm-hh-note__rest {
    margin: 7px 0 0;
    padding-left: 20px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--mmm-ink-3);
}

/* ==========================================================
   Home Hero Responsive
   ========================================================== */

@media (max-width: 1040px) {
    .mmm-hh-note {
        width: 176px;
        margin-left: -20px;
    }

    .mmm-hh__figure {
        padding-left: 20px;
    }
}

@media (max-width: 921px) {
    .mmm-hh__inner {
        grid-template-columns: 1fr;
        gap: var(--mmm-s10);
        padding: 44px 20px 52px;
    }

    .mmm-hh__figure {
        padding-left: 0;
    }

    .mmm-hh__lead {
        max-width: none;
    }

    .mmm-hh-wk__days {
        gap: 5px;
    }

    /* Der Zettel bleibt Papier wie auf dem Desktop — gedreht und angeheftet.
       Einspaltig gibt es aber keine Spalte mehr, an der er sich ausrichten
       könnte: also mittig unter der Karte statt links heraushängend. Die
       Deckelung verhindert, dass er auf Tablets zur zweiten Karte anwächst. */
    .mmm-hh-note {
        width: min(72%, 260px);
        margin: -14px auto 0;
        transform: rotate(3.5deg);
    }
}

@media (max-width: 544px) {
    .mmm-hh {
        border-bottom: none;
    }

    /* Die Woche bleibt eine Reihe — wie auf dem Desktop. Die Spaltenzahl kommt
       weiter aus --mmm-hh-days, nur das Gitter wird enger. */
    .mmm-hh-wk__days {
        gap: 4px;
    }

    .mmm-hh-wk__dow {
        font-size: 10.5px;
        letter-spacing: 0;
    }

    .mmm-hh-wk__tile {
        border-radius: 8px;
    }

    /* Buttons bleiben nebeneinander statt zwei Blöcke zu werden */
    .mmm-hh__actions .mmm-hh-cta,
    .mmm-hh__actions .mmm-hh-ghost {
        flex: 0 1 auto;
        font-size: 15px;
        padding: 13px 18px;
    }

    .mmm-hh__proof {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mmm-hh * {
        transition: none !important;
        animation: none !important;
    }
}