/* =========================================================================
   essali – Feinheiten des Bereichs „Daheim“ (Rezepte, Korb, Einkaufszettel).

   Warum eine eigene Datei statt <style> im Template: dieselben Bausteine
   (Portionen-Umschalter, Schrittliste, Nährwerte, Teilen-Kasten) kommen auf
   vier Seiten vor – im Template stünden sie viermal da. Alles hier ist mit
   `kochen-` benannt und nutzt ausschließlich die Tokens aus essali.css.
   Keine neuen Farben, Abstände oder Radien.
   ========================================================================= */

/* == Bild-Platzhalter mit dem Emoji der Kategorie ========================
   essali.css setzt für .card__media--placeholder den Teller; hier darf das
   Rezept sein eigenes Zeichen mitbringen (--kochen-emoji am Element). */

.card__media--placeholder.kochen-media::after {
    content: var(--kochen-emoji, "🍽");
}

/* == [hidden] muss wirken ================================================
   .empty und .grid setzen ein eigenes display und stechen damit die
   Browser-Regel `[hidden] { display: none }` aus. Hier die Stellen, an
   denen wir Bereiche per JavaScript ein- und ausblenden.
   (Agent A: gehört eigentlich einmal global nach essali.css.) */

.empty[hidden],
.grid[hidden],
.kochen-saved[hidden],
[data-basket-content][hidden] {
    display: none;
}

/* == Übersicht =========================================================== */

.kochen-search {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.kochen-search .search { flex: 1 1 auto; }

.kochen-section-title {
    font-size: var(--fs-lg);
    margin: var(--space-5) 0 var(--space-3);
}

.kochen-saved .kochen-section-title { margin-top: var(--space-4); }

.kochen-card-actions {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.kochen-card-actions .btn--block { flex: 1 1 auto; }

.kochen-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
}

/* == Rezeptseite ========================================================= */

.kochen-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--space-3);
}

.kochen-hero {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.kochen-hero__media {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.kochen-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kochen-hero h1 { margin: 0; }

.kochen-teaser {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
}

.kochen-facts .pill { font-weight: var(--fw-medium); }

.kochen-actions { margin-top: var(--space-2); }

.kochen-columns {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.kochen-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.kochen-panel > .kochen-section-title:first-child,
.kochen-panel .flex-between .kochen-section-title { margin-top: 0; }

/* Portionen-Umschalter */

.kochen-portions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kochen-portions__value {
    min-width: 2.5ch;
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.kochen-ingredients { margin-top: var(--space-3); }

.kochen-ingredients .basket__group-title { margin-top: var(--space-4); }

/* Nährwerte */

.kochen-nutrition {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

.kochen-nutrition__kcal {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    line-height: 1.1;
    color: var(--c-primary);
}

.kochen-nutrition__kcal span {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
}

.kochen-nutrition__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-2) 0 var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.kochen-nutrition__list span {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

/* Schritte */

.kochen-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.kochen-step {
    counter-increment: schritt;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--c-border);
    break-inside: avoid;
}

.kochen-step:last-child { border-bottom: 0; }

.kochen-step::before {
    content: counter(schritt);
    grid-row: span 2;
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}

.kochen-step__text {
    margin: 0;
    font-size: var(--fs-lg);
    align-self: center;
}

.kochen-timer { justify-self: start; }

.kochen-crosslink {
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-bg-alt);
    font-weight: var(--fw-medium);
}

.kochen-crosslink a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
}

/* == Korb ================================================================ */

.kochen-basket-recipes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.kochen-basket-recipes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.kochen-basket-recipes .kochen-basket-title {
    flex: 1 1 10rem;
    font-weight: var(--fw-medium);
}

.kochen-list-tools {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kochen-extra {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

.kochen-extra .field { flex: 1 1 auto; }

.kochen-share {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
}

.kochen-share__row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    margin: var(--space-3) 0;
}

.kochen-share__row .field { flex: 1 1 auto; }

.kochen-qr {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.kochen-qr svg {
    width: 180px;
    height: 180px;
    background: #fff;           /* QR-Codes brauchen Weiß, auch im Dunkelmodus */
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

/* == Geteilter Zettel ==================================================== */

.kochen-shared-recipes { margin-top: 0; }

.kochen-shared-note { margin-top: var(--space-5); }

/* == Breitere Schirme ==================================================== */

@media (min-width: 720px) {
    .kochen-hero {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 900px) {
    .kochen-columns { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
    .kochen-list-tools { grid-template-columns: auto 1fr; align-items: end; }
}

/* == Druck =============================================================== */

@media print {
    .kochen-panel {
        border: 0;
        padding: 0;
    }

    .kochen-columns { display: block; }

    .kochen-hero { display: block; }

    .kochen-step::before {
        background: transparent;
        color: #000;
        width: auto;
        height: auto;
        margin-right: 4pt;
    }

    .kochen-step__text { font-size: 11pt; }

    .kochen-nutrition__kcal { color: #000; }
}