/* ============================================================
   Lettinis — Rezept-Detailseite
   Ergänzt rezepte.css. Grosse Typografie ist Absicht: sie hilft
   der Lesbarkeit und der Barrierefreiheit. Alle Titel stehen als
   echter Text über dem Bild, nie eingebrannt — sonst sieht die
   Suchmaschine nichts.
   ============================================================ */

/* --- Kopfbereich --------------------------------------------------- */

/* Die Buchfotos sind Hochformat (870 x 1106). Statt sie in ein Querformat
   zu beschneiden, steht das Bild links und der Text rechts daneben —
   so bleibt das Motiv vollständig und der Titel ist echter Text. */
.rezeptkopf {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    padding-top: var(--raum);
}

@media (max-width: 899px) {
    .rezeptkopf { grid-template-columns: 1fr; }
}

.rezeptkopf__bildrahmen { margin: 0; }

.rezeptkopf__bild {
    width: 100%;
    height: auto;
    display: block;
    background: var(--gray-050);
}

.rezeptkopf__quelle {
    font-size: .688rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-top: 10px;
}

.rezeptkopf__text h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    max-width: 16ch;
    margin-top: 4px;
}

/* --- Herkunft: Karte und Buchhinweis -------------------------------- */

.herkunft {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--gray-100);
}

.herkunft__karte {
    width: 150px;
    height: auto;
    flex: none;
}

@media (max-width: 599px) {
    .herkunft { flex-direction: column; }
    .herkunft__karte { width: 120px; }
}

.herkunft__text p {
    font-size: .938rem;
    line-height: 1.6;
    color: var(--gray-700);
    margin: 0 0 10px;
    max-width: var(--lesebreite);
}

.herkunft__buch { font-size: .875rem !important; color: var(--gray-600) !important; }
.herkunft__buch a { color: var(--karo-red); font-weight: 700; text-decoration: none; }
.herkunft__buch a:hover { text-decoration: underline; }

.intro--gross {
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    color: var(--gray-700);
}

/* --- Rezeptkarte --------------------------------------------------- */

.karte-rezept {
    border: 1px solid var(--gray-200);
    background: var(--gray-050);
    padding: clamp(22px, 4vw, 40px);
    margin-top: 44px;
}

.karte-rezept__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.karte-rezept__kopf h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }

.ikon {
    font-family: inherit;
    font-size: .688rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: none;
    border: 1px solid var(--gray-200);
    padding: 10px 14px;
    min-height: 40px;
    color: var(--gray-600);
    cursor: pointer;
}
.ikon:hover { border-color: var(--akzent); color: var(--akzent); }

/* Portionenrechner: die meistgenutzte Funktion auf Rezeptseiten. */
.portionen {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 26px 0 34px;
}

.portionen button {
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
    font-family: inherit;
    background: var(--white);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    color: var(--near-black);
}
.portionen button:hover { border-color: var(--akzent); color: var(--akzent); }

.portionen span#anzahl {
    min-width: 62px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    background: var(--white);
    font-weight: 700;
    font-size: 1.125rem;
}

.portionen__label {
    margin-left: 16px;
    font-weight: 700;
    font-size: .938rem;
}

.karte-rezept__spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 44px;
}

.karte-rezept h3 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 12px;
    max-width: none;
}

.zutaten__gruppe {
    font-weight: 700;
    color: var(--near-black);
    border-bottom: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}

.menge { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--near-black); }

.zutaten a { color: var(--akzent); text-decoration: underline; }
.zutaten a:hover { color: var(--karo-red); }

.schlicht { list-style: none; padding: 0; margin: 0 0 30px; }
.schlicht li { padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: .938rem; }

.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: .938rem; }
.zeiten dt { font-weight: 700; }
.zeiten dd { margin: 0; color: var(--gray-600); }

/* --- Warenkunde ---------------------------------------------------- */

.warenkunde { border-top: 1px solid var(--gray-100); }

.warenkunde h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.018em;
    margin: 34px 0 8px;
    max-width: var(--lesebreite);
}

.warenkunde p { max-width: var(--lesebreite); }

.warenkunde__liste { margin: 18px 0 0; max-width: var(--lesebreite); }
.warenkunde__liste dt {
    font-weight: 700;
    color: var(--akzent);
    margin-top: 20px;
}
.warenkunde__liste dd { margin: 6px 0 0; color: var(--gray-700); }

/* --- Produkte am Rezept --------------------------------------------- */

.verkauf { border-top: 1px solid var(--gray-100); }

.produkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin: 26px 0 18px;
}

.produkt {
    border: 1px solid var(--gray-200);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.produkt:hover { border-color: var(--akzent); }

.produkt__bild { aspect-ratio: 1; background: var(--gray-050); margin-bottom: 14px; }
.produkt__name { font-weight: 700; font-size: 1.063rem; }
.produkt__preis { font-size: .875rem; color: var(--gray-500); margin-top: 4px; }

/* --- Slider ---------------------------------------------------------- */

.slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-top: 26px;
    /* Auf schmalen Geräten waagerecht wischbar, statt umzubrechen */
    scrollbar-width: thin;
}

.slider__karte {
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Ohne background-size steht das Foto in Originalgroesse an der oberen
   linken Ecke — man sieht dann Tischkante statt Gericht. */
.slider__bild {
    aspect-ratio: 4/5;
    background-color: var(--gray-050);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--gray-200);
}

/* Die Marke steht in Verde, nicht in Karo-Rot — sie ist eine Auszeichnung,
   keine Aktion. */
.slider__marke {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 10px;
}

.slider__titel {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.018em;
    margin-top: 14px;
}
.slider__karte:hover .slider__titel { color: var(--karo-red); }

.slider__text { font-size: .875rem; color: var(--gray-600); margin: 6px 0 0; }


/* --- Buchkasten ------------------------------------------------------ */

/* Das Buch ist der Beleg, dass hinter dem Rezept mehr steht als ein
   Blogeintrag. Die Auszeichnungen stecken in der Grafik, der Text daneben
   ist HTML — Suchmaschinen lesen keine Bilder. */
.buchkasten {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 26px;
    padding: 24px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    text-decoration: none;
    color: inherit;
}

.buchkasten:hover { border-color: var(--akzent); }

@media (max-width: 599px) {
    .buchkasten { grid-template-columns: 1fr; }
    .buchkasten__bildrahmen { max-width: 220px; }
}

/* Die Vorlage hat viel Weissraum und unten eine Textzeile, die hier doppelt
   waere. Statt die Datei zu beschneiden — sips verrechnet sich dabei
   zuverlaessig — wird der Ausschnitt hier gesetzt: verlustfrei, exakt und
   jederzeit aenderbar. Werte aus dem Original 1080 x 1116 gerechnet. */
/* Kein fester Zuschnitt: Die beiden Cover haben verschiedene Formate
   (Gusto 668 x 725, Puglia 438 x 558). Ein Rahmen mit festem Verhaeltnis
   schnitt beim zweiten Buch oben und seitlich ab. */
.buchkasten__bildrahmen { display: block; }

.buchkasten__bildrahmen img {
    display: block;
    width: 100%;
    height: auto;
}

.buchkasten__text { display: block; }

.buchkasten__titel {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.25;
    margin-top: 6px;
}

.buchkasten__seite {
    display: block;
    font-size: .938rem;
    color: var(--gray-700);
    margin-top: 8px;
}

.buchkasten__preise {
    display: block;
    font-size: .75rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-top: 10px;
}

.buchkasten__aktion {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    font-size: .875rem;
    color: var(--karo-red);
    border-bottom: 2px solid var(--karo-red);
    padding-bottom: 2px;
}

/* --- Zubereitung mit Bild ------------------------------------------- */

/* Schritte links, Foto rechts. Das Bild laeuft mit, statt am Ende zu
   stehen — es zeigt das Ziel, waehrend man die Schritte liest. */
.zubereitung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

@media (max-width: 899px) {
    .zubereitung { grid-template-columns: 1fr; }
}

/* Ohne zweites Foto laeuft der Text ueber die volle Breite — sonst bliebe
   rechts eine leere Spalte stehen und die Schritte waeren grundlos schmal.
   Die Lesebreite haelt trotzdem die Zeilenlaenge im Zaum. */
.zubereitung--einspaltig { grid-template-columns: minmax(0, 1fr); }
.zubereitung--einspaltig .zubereitung__text { max-width: 68ch; }

.zubereitung__text h2 { margin-top: 0; }

.zubereitung__bild {
    margin: 0;
    position: sticky;
    top: 24px;
}

.zubereitung__bild img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--gray-050);
    border: 1px solid var(--gray-100);
}

.zubereitung__bild figcaption {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--gray-500);
    margin-top: 10px;
    max-width: 46ch;
}

/* --- Druckfassung ---------------------------------------------------- */

/* Wer ein Rezept druckt, will es in der Küche neben sich legen. Er braucht
   Zutaten, Schritte und den Tipp — nicht Warenkunde, FAQ, Buchhinweis oder
   Slider. Ziel sind ein bis zwei Blätter, keine fünf.
   Ausserdem müssen alle Rasterlayouts aufgelöst werden: In der schmalen
   Druckbreite quetschen sie den Text sonst in Spalten von drei Wörtern. */
@media print {

    /* Was in der Küche nicht hilft */
    .kopf, .fuss, .karokante,
    .herkunft, .buchkasten,
    .warenkunde, .faq, .verkauf, .slider,
    .ikon, .portionen button,
    .zubereitung__bild figcaption,
    .rezeptkopf__quelle {
        display: none !important;
    }

    /* Alle Raster auflösen */
    .rezeptkopf,
    .karte-rezept__spalten,
    .zubereitung {
        display: block !important;
    }

    body {
        font-size: 10.5pt;
        line-height: 1.45;
        color: #000;
        background: #fff;
    }

    .huelle { max-width: none; padding: 0; }
    .sektion { padding: 0 0 12pt; }

    /* Titelbild klein und neben den Titel, nicht seitenfüllend */
    .rezeptkopf__bildrahmen {
        float: right;
        width: 42mm;
        margin: 0 0 8pt 8pt;
    }

    .rezeptkopf__text h1 {
        font-size: 22pt;
        max-width: none;
        margin: 0 0 4pt;
    }

    .intro--gross { font-size: 10.5pt; margin-bottom: 10pt; }

    .karte-rezept {
        border: 1pt solid #999;
        background: none;
        padding: 8pt 10pt;
        margin: 0 0 12pt;
        page-break-inside: avoid;
    }

    .karte-rezept__kopf h2 { font-size: 13pt; }

    /* Portionenzahl bleibt sichtbar, nur die Knöpfe verschwinden */
    .portionen { margin: 6pt 0 10pt; }
    .portionen span#anzahl {
        border: 0;
        min-width: 0;
        height: auto;
        display: inline;
        font-size: 10.5pt;
    }
    .portionen__label { margin-left: 4px; }

    .zutaten li, .schlicht li { padding: 2pt 0; font-size: 10pt; }
    .zutaten a { color: #000; text-decoration: none; }

    .zeiten { font-size: 10pt; }

    /* Zutaten und Utensilien nebeneinander — spart eine halbe Seite */
    .karte-rezept__spalten > div { display: inline-block; vertical-align: top; width: 48%; }

    .zubereitung__bild {
        position: static;
        float: right;
        width: 46mm;
        margin: 0 0 8pt 8pt;
    }

    .schritte li {
        padding-left: 26pt;
        padding-bottom: 6pt;
        page-break-inside: avoid;
        max-width: none;
    }
    .schritte li::before {
        width: 18pt;
        height: 18pt;
        background: #000;
        font-size: 9pt;
    }

    .tipp {
        border: 1pt solid #999;
        background: none;
        padding: 8pt 10pt;
        margin-top: 10pt;
        page-break-inside: avoid;
        max-width: none;
    }

    /* Auf Papier kostet das Portrait nur Toner und sagt nichts, was der
       Text nicht schon sagt. Das Raster faellt mit weg, sonst bliebe die
       leere Bildspalte stehen. */
    .tipp--person { display: block; max-width: none; }
    .tipp--person .tipp__foto { display: none; }

    h2 { font-size: 13pt; margin-bottom: 4pt; page-break-after: avoid; }

    /* Herkunft als eine Zeile statt als Kasten — die Quelle gehört aufs
       Blatt, der Rest nicht. */
    .zubereitung__text::after {
        content: "Aus „Amore per Gusto — Meine italienische Küche“ von Stefania Lettini · lettinis.de";
        display: block;
        margin-top: 14pt;
        padding-top: 6pt;
        border-top: 1pt solid #999;
        font-size: 8pt;
        color: #444;
    }

    a[href]::after { content: ""; }
}

@page {
    margin: 16mm 14mm;
}

/* Zwei Rezepte im Buch haben kein Foto (Mandorle Salate, Torta d'uva).
   Ohne Bild braucht der Kopf keine zweite Spalte — sonst steht der Text
   in einer schmalen Saeule neben einer Luecke. */
.rezeptkopf--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.rezeptkopf--ohne-bild .rezeptkopf__text { max-width: 72ch; }