/* zusatz CSS: Rezepte Seite */

/* ===================== DESKTOP ===================== */

.rezepte-wrapper {
    max-width: 800px;      /* Desktop-Breite */
    width: 100%;
    margin: 0 auto;        /* zentriert */
}




/* EIN kariertes Blatt als Hintergrund */
/* ============================================
   PAPIER – nur Layout, KEINE Filter hier!
   ============================================ */

.papier {
    background: url("../images/deko/Blatt_Papier_Kariert.png") center top no-repeat; /* Papierbild */
    background-size: cover;             /* füllt Container */
    background-position: -5px top;      /* "left top" >> links und oben werden zu referenzkanten. 
                        So bleibt die Lochung links trotz evtl. Beschnitt durch "cover" auf jeden Fall sichtbar,
                        auch wenn der Container schmaler ist als das Papierbild */
    padding: 80px 50px 20px 50px;               /* Abstand innen */
    border-radius: 20px;                       
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);  /* moderner Schatten */
    position: relative;                         /* Anker für Tape + Layer */
}



/* ============================================
   PAPIER-LAYER – NUR hier wird gefärbt/entsättigt
   ============================================ */

.papier::before {
    content: "";
    position: absolute;
    inset: 0;                                    /* füllt kompletten Bereich */

    background: inherit;                         /* nutzt DEIN Papierbild */
    background-size: inherit;                    /* übernimmt cover */
    background-position: inherit;                /* übernimmt center top */
    background-repeat: inherit;                  /* übernimmt no-repeat */

    background-color: rgba(240, 245, 255, 0.3);  /* Weißfilm, leicht bläulich */
    background-blend-mode: lighten;              /* Gelbstich neutralisieren */
    filter: saturate(40%) brightness(1.03);      /* nur Papier wird entsättigt */

    opacity: 1;                                  /* volle Sichtbarkeit */
    z-index: 0;                                  /* ganz hinten */
}

/* Inhalt über Papier */
.papier > * {
    position: relative;
    z-index: 1;                                   /* Inhalt über Papier */
}


/* ============================================
   TAPE – volle Farbe, voller Kontrast
   (NICHT vom Papier-Filter betroffen)
   ============================================ */

.tape {
    position: absolute;                           /* frei positionierbar */
    width: 150px;                                 /* 👉 Größe */
    opacity: 0.9;                                 /* realistischer Look */
    pointer-events: none;                         /* blockiert keine Klicks */
    z-index: 2;                                   /* über allem */

}

/* Beispielpositionen */
.tape.oben {
    top: -20px;                                   /* 👉 y-Position */
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);    /* leichte Schräglage */
}

.tape.unten {
    bottom: -35px;                                /* 👉 y-Position */
    left: 50%;
    transform: translateX(-50%) rotate(2deg);     /* leichte Schräglage */
}



/* ============================================
   Überschrift auf dem Blatt
   ============================================ */

.papier::after {
    content: "Gabis Rezepte";
    position: absolute;
    top: -5px;                                    /* 👉 y-Position */
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);    /* leicht schräg */

    width: 100%;                 /* verhindert Umbruch */
    text-align: center;          /* sauber zentriert */
    white-space: nowrap;         /* kein Zeilenumbruch */

    font-family: 'Caveat';
    font-size: 4.2rem;
    color: rgba(109, 0, 0, 0.08);                 /* sehr dezent */
}








/* ===================== LISTE ===================== */


/* Schriftart >> Spezielle Schriftarten wie Caveat sind über Haupt-CSS eingebunden */

.rezepte {
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    line-height: 1.4;
}




/* ===================== DESKTOP: 2 Spalten ===================== */

ul.rezepte {
    columns: 2;              /* Anzahl der Spalten (Zeitungs-Layout) */
    column-gap: 20px;        /* Abstand zwischen den beiden Spalten */
}


/* ===================== Grundlayout der Liste ===================== */

ul.rezepte {
    list-style: none;        /* keine Standard-Bullets */
    margin: 0;               /* kein Außenabstand */
    padding: 0;              /* kein Innenabstand */
}

ul.rezepte li {
    margin: 0 0 12px 0;      /* nur unten Abstand → verhindert Abstand oben beim 1. Eintrag */
    break-inside: avoid;     /* verhindert, dass ein <li> über zwei Spalten zerrissen wird */
}


/* NEU – eigene Rahmenfarbe + leichte Tiefe */
ul.rezepte li.neu a {
    border-color: rgba(151, 0, 0, 0.5);                  /* dezenter, eigener Rand */
    box-shadow: 0 2px 2px rgba(0,0,0,0.15); /* leichte Tiefe */
    /* KEINE Hintergrundfarbe! */
}





/* ============= Button-Styling der Rezeptlinks =================== */

ul.rezepte li a {
    display: block;                      /* macht den Link zum Block → klickbarer Button */
    padding: 0.4em 0.1em;                /* Innenabstand für angenehme Lesbarkeit */
    background: rgba(255,255,255,0.1);   /* leicht transparentes Weiß über dem Papier */
    backdrop-filter: blur(2px);          /* moderner „Glas“-Effekt */
    border-radius: 4px;                  /* abgerundete Ecken */
    border: 1px solid rgba(121, 0, 0, 0.164); /* dezente Rahmenfarbe */
    color: #663333;                      /* Textfarbe passend zum Papier-Look */
    font-family: 'Caveat', sans-serif;   /* Handschrift-Font, sans-serif als Fallback */
    font-weight: 700;                    /* kräftiger Schriftzug */
    font-size: 1.4rem;                   /* Textgröße Desktop */
    line-height: 1;                      /* kompakte Zeilenhöhe für Mehrzeiler */
    text-decoration: none;               /* keine Unterstreichung */
    transition: all 0.2s ease;           /* weiche Hover-Animation */
}


/* ===================== Hover-Effekt ===================== */

ul.rezepte li a:hover {
    background: rgba(255,255,255,0.9);   /* hellerer Button beim Hover */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* leichter Schatten */
    transform: translateY(-2px);         /* Button hebt sich minimal an */
}













/* --------------------------------------- 
                     STICKER 
   --------------------------------------- */

/* NEU‑Rezepte: Basis-Setup für den Sticker
   → position: relative = Ankerpunkt für ::after + ::before */
.rezepte li.neu {
    position: relative;
}

/* NEU‑Sticker selbst (rotes Label oben rechts)
   → absolut positioniert
   → kleiner roter Kasten mit Text "NEU"
   → leichte Rotation für „Sticker-Look“ */
.rezepte li.neu::after {
    content: "NEU";                     /* Text im Sticker */
    position: absolute;                 /* Position relativ zum <li> */
    top: -4px;                          /* leicht oberhalb des Buttons */
    right: -10px;                        /* rechts außen */
    background: #c03737;                /* Stickerfarbe */
    color: white;                       /* Textfarbe */
    font-family: 'Arial Black', sans-serif; /* fette, kompakte Schrift */
    font-size: 0.7rem;                  /* kleine Stickergröße */
    font-weight: 700;
    padding: 2px 4px;                   /* Innenabstand */
    border-radius: 4px;                 /* abgerundete Ecken */
    transform: rotate(20deg);           /* Sticker leicht gedreht */
    box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* Schatten für Tiefe */
    letter-spacing: 0.5px;              /* etwas breitere Buchstaben */
    z-index: 3;                         /* Sticker immer ganz oben */
}

/* Hover-Effekt für den NEU‑Sticker
   → wird heller + größer beim Überfahren des Buttons */
.rezepte li.neu:hover::after,
.rezepte li.neu a:hover + ::after {
    background: #df5050;                /* helleres Rot beim Hover */
    transform: rotate(20deg) scale(1.05); /* leicht vergrößert */
    box-shadow: 0 3px 10px rgba(0,0,0,0.35); /* stärkerer Schatten */
}






/* ============================================================
   NEU – statt Hintergrundfarbe → halbtransparenter Overlay
   → Vorteil: GRÜNKOST bleibt sichtbar, NEU bleibt sichtbar
   ============================================================ */
.rezepte li.neu::before {
    content: "";
    position: absolute;
    inset: 0;                           /* füllt kompletten Button */
    background: rgba(0, 0, 0, 0.06);       /* leichte Abdunklung */
    border-radius: inherit;             /* gleiche Rundung wie Button */
    pointer-events: none;               /* Klicks gehen durch */
    z-index: 1;                         /* unter dem Sticker, über dem Button */
}

/* Der eigentliche Button-Inhalt bleibt oben */
.rezepte li.neu a {
    position: relative;
    z-index: 2;
}



/* ============================================================
   GRÜNKOST – dezente grüne Tönung
   → bleibt sichtbar, auch wenn NEU zusätzlich aktiv ist
   ============================================================ */
ul.rezepte li.gruenkost {
    background-color: rgba(0, 148, 20, 0.08); /* dezente Tönung */
}

/* Süße Rezepte – dezente warme Tönung */
ul.rezepte li.suess {
    background-color: rgba(200, 120, 0, 0.12); /* warmes Orange, sehr dezent */
}














/* -------------- ⭐-Sticker ------------- */
/*          für spezielle ?? Rezepte       */


/* ------------------------  in Arbeit :-)  kollidiert nohch mit NEU-Sticker -------
.rezepte li.star {
    position: relative;
}

.rezepte li.star::after {
    content: "⭐";
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: rem;
    transform: rotate(12deg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

 */








/* ================================================= 
                SMARTPHONE, MOBILE
   ================================================= */

@media (max-width: 1000px) {

    .rezepte-wrapper {
        max-width: none;      /* volle Breite auf Mobile – kein zentrierter Container */
        margin: 0;            /* kein Außenabstand */
    }

    .papier {
        padding: 20px;        /* mehr Innenabstand für Fingerfreundlichkeit */
        padding-top: 130px;
        background-size: cover; /* Hintergrundbild füllt Fläche komplett */
        border-radius: 20px;  /* optional: abgerundete Ecken auf Handy */
    }



    /*  Überschrift auf dem Blatt >> MOBIL */
    .papier::after {
        top: 3px;                                    /* leicht über Papier */
        font-size: 6rem;
    }




    /* Klebestreifen >> MOBILE */
    .tape {
        position: absolute;                           /* frei positionierbar */
        width: 270px;                                 /* Größe */
    }

    /* Beispielpositionen */
    .tape.oben {
        top: -50px;                                   /* leicht über Papier */
        left: 50%;
        transform: translateX(-50%) rotate(-3deg);    /* leichte Schräglage */
    }

    .tape.unten {
        bottom: -88px;                                /* unten überstehend */
        left: 50%;
        transform: translateX(-50%) rotate(2deg);     /* leichte Schräglage */
    }












    ul.rezepte li a {
        font-size: 2.6rem;                 /* größere Schrift für Touch-Geräte */
        font-weight: 1000;                 /* sehr kräftige Schrift */
        padding: 0.3em 0.1em;              /* kompakterer Innenabstand */
        border-radius: 8px;                /* stärker abgerundet für Mobile */
        background: rgba(99, 67, 0, 0.062); /* etwas dunklerer Button-Hintergrund */
        box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* deutlicherer Schatten für Tiefe */
    }





    /* NEU-Sticker – Mobile-Version */
    .rezepte li.neu::after {
        font-size: 1.4rem;   /* größerer Sticker auf Mobile */
        border-radius: 7px;  /* stärker abgerundet */

        top: -5px;                          /* leicht oberhalb des Buttons */
        right: -16px;                        /* rechts außen */
        padding: 2px 4px;                   /* Innenabstand */

    }








    ul.rezepte {
        columns: 2;          /* auch auf Mobile 2 Spalten (falls gewünscht) */
        column-gap: 20px;    /* Abstand zwischen den Spalten */
    }

    ul.rezepte li {
        margin: 0 0 20px 0;  /* größerer Abstand zwischen Einträgen */
    }

}