/*
Theme Name: Munter Rezepte
Theme URI: https://rezepte.munter.ch
Author: Espace Health Group
Description: Landingpage der Munter Rezeptplattform (rezepte.munter.ch). Basiert inhaltlich auf dem rezeptplattform-wp-theme und nutzt das Designsystem von munter.ch (wk-theme). Footer und Styles werden automatisch von munter.ch synchronisiert (Design → Munter-Sync). Texte: inc/content.php.
Version: 2.0.0
Requires PHP: 8.1
Text Domain: munter-rezepte
*/

/* ==========================================================================
   Grundlage: assets/munter/app.css = Designsystem von munter.ch.
   Hier nur die Bausteine der Rezepte-Landingpage, ausschliesslich mit den
   Munter-Tokens (--color-red-500, --radius-card, --text-h2 …).
   ========================================================================== */

:root {
    --mr-section-space: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
    --mr-card-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

body.munter-rezepte {
    background: var(--color-white);
    color: var(--color-black);
}

.munter-rezepte main a:not([class]) { color: var(--color-red-500); text-underline-offset: 3px; }
.munter-rezepte main a:not([class]):hover { color: var(--color-red-800); }

/* ---------- Topbar (wie munter.ch) ---------- */
.mr-topbar p { flex: 1 1 auto; }
.mr-topbar-close { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: none; border: 0; cursor: pointer; padding: 0; }
.mr-topbar.is-dismissed { display: none; }

/* ---------- Header: invers zu munter.ch (weiss, Logo rot) ---------- */
.mr-header { transition: transform .25s ease-out; }
.mr-logo { height: 3rem; width: auto; display: block; }
@media (width >= 64rem) { .mr-logo { height: 3.75rem; } }

.mr-nav { display: none; align-items: center; gap: 2rem; margin-inline: auto; font-weight: var(--font-weight-medium); }
.mr-nav a { color: var(--color-black); text-decoration: none; transition: color .2s; }
.mr-nav a:hover, .mr-nav a[aria-current="page"] { color: var(--color-red-500); }

.mr-lang { display: none; align-items: center; gap: .75rem; font-weight: var(--font-weight-medium); }
.mr-lang a { color: var(--color-black); text-decoration: none; }
.mr-lang a.is-active { color: var(--color-red-500); text-decoration: underline; text-underline-offset: 4px; }

.mr-cta { display: none; }

.mr-burger { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 0; background: var(--color-red-500); color: var(--color-white); cursor: pointer; }
.mr-burger .mr-burger-close { display: none; }
.mr-burger[aria-expanded="true"] .mr-burger-open { display: none; }
.mr-burger[aria-expanded="true"] .mr-burger-close { display: block; }

.mr-mobile-menu { padding-block: 1rem .5rem; display: flex; flex-direction: column; gap: 1rem; }
.mr-mobile-menu[hidden] { display: none; }
.mr-mobile-menu nav { display: flex; flex-direction: column; }
.mr-mobile-menu nav a { padding-block: .75rem; border-bottom: 1px solid var(--color-grey-600); color: var(--color-black); text-decoration: none; font-size: var(--text-lead); }
.mr-mobile-menu .btn-filled { justify-content: center; text-align: center; }
.mr-mobile-menu .mr-lang-mobile { display: flex; }

@media (width >= 64rem) {
    .mr-nav, .mr-lang { display: flex; }
    .mr-cta { display: inline-flex; }
    .mr-burger, .mr-mobile-menu { display: none !important; }
}

/* ---------- Hero (wie der Hero-Slider auf munter.ch) ---------- */
.mr-hero { margin-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--mr-section-space); }
.mr-hero-inner {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: minmax(80px, 1fr) max-content;
    min-height: 27.5rem;
    overflow: hidden;
    border-radius: var(--radius-2xl);
}
@media (width >= 64rem) { .mr-hero-inner { min-height: 32rem; border-radius: var(--radius-card); } }

.mr-hero-media { position: relative; grid-column: 1 / -1; grid-row: 1 / -1; margin: 0; }
.mr-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, #0006, #0000); }
.mr-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.mr-hero-shape {
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    height: 100%;
    background: color-mix(in oklab, var(--color-red-500) 72%, transparent);
    backdrop-filter: blur(1.5px);
    border-top-right-radius: clamp(160px, 20vw, 300px);
}
.mr-hero-content {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 5.5rem 3rem clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (width >= 48rem) {
    .mr-hero-shape, .mr-hero-content { grid-column: 1 / 19; }
    .mr-hero-content { padding-right: clamp(2rem, 1rem + 3vw, 4rem); padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
@media (width >= 64rem) { .mr-hero-shape, .mr-hero-content { grid-column: 1 / 15; } }

.mr-hero-badge {
    position: absolute;
    z-index: 4;
    top: clamp(1rem, .5rem + 2vw, 2rem);
    right: clamp(1rem, .5rem + 2vw, 2rem);
    width: clamp(7.5rem, 6rem + 5vw, 10.5rem);
    aspect-ratio: 1;
    border-radius: 9999px;
    background: var(--color-yellow-100);
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    line-height: 1.15;
    transform: rotate(10deg);
    box-shadow: var(--shadow-xl);
}
.mr-hero-badge-small { font-size: var(--text-extra-small); }
.mr-hero-badge-big { font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-red-500); margin-block: .15rem; white-space: nowrap; }
.mr-hero-badge-text { font-size: var(--text-small); font-weight: var(--font-weight-semibold); }

/* ---------- Sektionen ---------- */
.mr-section { padding-block: var(--mr-section-space); }
.mr-hero + .mr-section { padding-top: 0; }
.mr-band { width: 100%; }

.mr-section-heading { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; max-width: 54rem; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem); }
.mr-section-heading .is-style-lead { color: var(--color-grey-800); }
.mr-section-heading.is-inverse { align-items: flex-start; text-align: left; margin: 0; }
.mr-section-heading.is-inverse .tag { background: var(--color-white); color: var(--color-red-500); }
.mr-section-heading.is-inverse h2, .mr-section-heading.is-inverse .is-style-lead { color: var(--color-white); }

.mr-section-cta { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

.mr-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (width >= 48rem) { .mr-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (width >= 64rem) { .mr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Vorteile */
.mr-benefit { display: flex; flex-direction: column; gap: .75rem; padding: var(--mr-card-pad); border-radius: var(--radius-card); background: var(--color-grey-500); transition: background-color .2s, color .2s; }
.mr-benefit p { color: var(--color-grey-800); }
.mr-benefit-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: .5rem; border-radius: 9999px; background: var(--color-white); color: var(--color-red-500); }
.mr-benefit-icon svg { width: 2.25rem; height: 2.25rem; }

/* So funktioniert's (Karten wie Blog-Teaser auf munter.ch) */
.mr-step-card { display: flex; flex-direction: column; padding: .5rem; border-radius: var(--radius-card); background: var(--color-white); }
.mr-step-card-media { position: relative; }
.mr-step-card-media figure { margin: 0; overflow: hidden; border-radius: var(--radius-card-inner); aspect-ratio: 16 / 10; background: var(--color-grey-600); }
.mr-step-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.mr-step-card:hover .mr-step-card-media img { transform: scale(1.05); }
.mr-step-card-media .tag { position: absolute; left: 1rem; bottom: 1rem; }
.mr-step-card-body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; }
.mr-step-card-body p { color: var(--color-grey-800); }

/* Generika (wie Marken-Teaser auf munter.ch) */
.mr-generics { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 1rem + 3vw, 4rem); border-radius: var(--radius-card); background: linear-gradient(90deg, var(--color-red-500), var(--color-red-600)); color: var(--color-white); }
@media (width >= 64rem) { .mr-generics { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 3rem; align-items: center; } }
.mr-generics-items { display: grid; gap: 1rem; }
@media (width >= 40rem) { .mr-generics-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-generics-item { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border: 1px solid var(--color-white); border-radius: var(--radius-2xl); }
.mr-generics-item p { opacity: .92; }

/* FAQ (Akkordeon wie munter.ch) */
.mr-accordion-item { border-radius: 32px; padding: .75rem clamp(1.25rem, 1rem + 1vw, 1.5rem); background: var(--color-red-200); transition: background-color .2s, color .2s; }
.mr-accordion-item + .mr-accordion-item { margin-top: .75rem; }
.mr-accordion-item:not(:has([aria-expanded="true"])):hover { background: var(--color-red-500); color: var(--color-white); }
.mr-accordion-item button { background: none; border: 0; padding: .25rem 0; color: inherit; font: inherit; }
.mr-accordion-item [aria-expanded="true"] .mr-accordion-icon { transform: rotate(180deg); }
.mr-accordion-body { padding: 1rem 0 .5rem; }
.mr-accordion-body > :first-child { margin-top: 0; }
.mr-accordion-body > :last-child { margin-bottom: 0; }

/* Shop-Teaser (Kategorie-Kachel von munter.ch) */
.mr-shop-teaser { display: grid; overflow: hidden; border-radius: var(--radius-card); background: var(--color-yellow-100); color: var(--color-black); text-decoration: none; }
@media (width >= 48rem) { .mr-shop-teaser { grid-template-columns: 1fr 1fr; } }
.mr-shop-teaser-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem; padding: clamp(1.5rem, 1rem + 3vw, 4rem); }
.mr-shop-teaser-media { margin: 0; min-height: 16rem; position: relative; }
.mr-shop-teaser-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.mr-shop-teaser:hover .mr-shop-teaser-media img { transform: scale(1.05); }
.mr-shop-teaser:hover .link-icon-end { color: var(--color-red-800); }

/* Rezept einreichen: Schritte */
.mr-steps-intro { color: var(--color-grey-800); margin: 0 0 2.5rem; }
.mr-steps { list-style: none; margin: 0; padding: 0; }
.mr-steps-item { position: relative; display: grid; gap: 1rem; padding-bottom: 2rem; }
@media (width >= 40rem) {
    .mr-steps-item { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2rem; }
    .mr-steps-item:not(:last-child)::before { content: ""; position: absolute; left: 4.25rem; top: 3rem; bottom: 0; border-left: 2px dashed var(--color-red-400); }
}
.mr-steps-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 8.5rem; height: 3rem; padding-inline: 1.25rem; border-radius: 9999px; background: var(--color-red-500); color: var(--color-white); font-weight: var(--font-weight-bold); font-size: var(--text-lead); }
.mr-steps-card { display: flex; flex-direction: column; gap: 1rem; padding: var(--mr-card-pad); border-radius: var(--radius-card); background: var(--color-grey-500); }

/* Fliesstext aus content.php / Block-Editor */
.mr-rich > * { margin-block: 0 1rem; }
.mr-rich > :last-child { margin-bottom: 0; }
.mr-rich ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .75rem; list-style: disc; }
.mr-rich li::marker { color: var(--color-red-500); }
.mr-rich a { color: var(--color-red-500); text-underline-offset: 3px; }
.mr-rich h2 { font-size: var(--text-h2); font-weight: var(--font-weight-semibold); margin-top: 2rem; }
.mr-rich h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); margin-top: 1.5rem; }

/* ---------- Shop/Rezepte-Toggle (Gegenstück zu munter.ch, invers) ---------- */
.mr-toggle-wrap { position: fixed; left: 50%; bottom: clamp(1rem, .6rem + 1.5vw, 2rem); transform: translateX(-50%); z-index: var(--z-pseudo-toggle); }
.mr-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .5rem; border-radius: 9999px; background: var(--color-red-500); box-shadow: var(--shadow-xl); text-decoration: none; }
.mr-toggle-indicator { position: absolute; z-index: 0; top: .5rem; bottom: .5rem; left: calc(50% + .125rem); width: calc(50% - .625rem); border-radius: 9999px; background: var(--color-white); box-shadow: var(--shadow-sm); transition: transform .4s cubic-bezier(.88, 0, .565, 1.35); }
.mr-toggle-option { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: 9999px; text-align: center; transition: color .2s .2s; }
.mr-toggle-shop { color: var(--color-white); }
.mr-toggle-recipes { color: var(--color-black); }
.mr-toggle:hover .mr-toggle-indicator, .mr-toggle:focus-visible .mr-toggle-indicator { transform: translateX(calc(-100% - .25rem)); }
.mr-toggle:hover .mr-toggle-shop, .mr-toggle:focus-visible .mr-toggle-shop { color: var(--color-black); }
.mr-toggle:hover .mr-toggle-recipes, .mr-toggle:focus-visible .mr-toggle-recipes { color: var(--color-white); }
.mr-toggle:focus-visible { outline: 2px solid var(--color-red-800); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .mr-toggle-indicator, .mr-hero-media img, .mr-step-card-media img, .mr-shop-teaser-media img { transition: none; }
}