/* -----------------------------------------------------------
   Zusatz-CSS: Bauernbrot-/Holzofenbrot-Seite
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   BROTKARTE: Grundlayout + Papier-Hintergrund
   ----------------------------------------------------------- */
.brotkarte {
    position: relative;        /* Bezugspunkt für Papier + Foto + Klammer */
    padding: 2rem;
    margin-bottom: 4rem;
    border-radius: 6px;
}

/* Papierfetzen als eigenes Layer */
.brotkarte::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/deko/Blatt_PapierALT01_frei_quer.png");
    background-size: 100% 100%;   /* streckt das Blatt auf volle Containerhöhe */
    background-repeat: no-repeat;
    background-position: top center;
    filter: brightness(1.2) grayscale(80%) drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    z-index: 0;
}

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



/* -----------------------------------------------------------
   TEXTBEREICH
   ----------------------------------------------------------- */
.brotkarte-text {
    max-width: 75%;            /* TEXTBREITE – frei anpassbar */
}

.brotkarte-text h3 {
    font-family: "Caveat", cursive;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.brotkarte-text p {
    font-family: "Caveat", cursive;
    font-size: 1.5rem;
    line-height: 1.2;
}



/* -----------------------------------------------------------
   FOTO + KLAMMER (ABSOLUT AM BLATT)
   ----------------------------------------------------------- */
.brotkarte-foto {
    position: absolute;        /* WICHTIG: komplett unabhängig vom Text */
    top: 16px;                 /* Y-POSITION – frei anpassbar */
    right: -15px;               /* X-POSITION – frei anpassbar */
    width: 220px;              /* feste Größe → kein Umbruch */
    height: 200px;             /* Arbeitsfläche für absolutes Foto */
}


/* POLAROID-EFFEKT für neue Brot-Fotos  */
/* -----------------------------------------------------------
   POLAROID-GRUNDBLOCK (gemeinsam für alle Formate)
   ----------------------------------------------------------- */

.brotfoto {
    position: absolute;
    top: -10px;
    left: 25px;

    background: #fff;
    padding: 12px 12px 40px;      /* Polaroid-Rand */
    box-shadow: 0 10px 18px rgba(0,0,0,0.35);
    border-radius: 2px;
    transform: rotate(-3deg);
    z-index: 2;

    display: block;
    object-fit: cover;
}

/* img Größenanpassung */
.polaroid-quer { width: 180px; height: 140px; }
.polaroid-hoch { width: 145px; height: 180px; }
.polaroid-quadrat { width: 175px; height: 175px; }


/* Optional: leichte Variation für mehrere Karten */
.brotkarte:nth-child(even) .brotfoto {
    transform: rotate(7deg);
}

            /* ZUVOR: bei grafisch schon vorgefertigten "Polaroid-Fotos" (ALTE VERSION) ---/
            .brotfoto {
                position: absolute;
                top: -20px;                  /* Feinjustierung ---/
                left: 25px;
                width: 200px;              /* feste Größe ---/
                height: auto;
                filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
                z-index: 2;
            } */

.klammer {
    position: absolute;
    top: -40px;                /* Feinjustierung */
    right: 80px;
    width: 48px;
    height: auto;
    pointer-events: none;
    z-index: 3;
}


.stuehlinger-grafik {
    width: 220px;        /* Desktop-Größe */
    height: auto;
    margin-top: -0.5rem;
}






/* -----------------------------------------------------------
   MOBILE OPTIMIERUNG (NEU, KOMMENTIERT)
   ----------------------------------------------------------- */
@media (max-width: 1000px) {

    .brotkarte {
        padding: 2.5rem;                 /* etwas mehr Luft auf Mobile */
    }

    .brotkarte-text {
        max-width: 72%;                  /* Textbreite – verhindert Überlappung mit Foto */
    }

    .brotkarte-text p {
        font-size: 2.7rem;               /* größere Schrift für Mobile */
        line-height: 1.25;               /* kompakter, aber gut lesbar */
    }

    .brotkarte-text h3 {
        font-size: 3.5rem;               /* Überschrift größer */
        margin-bottom: 0.4rem;           /* engerer Abstand */
    }

    /* -------------------------------------------------------
       FOTO-BEREICH (Arbeitsfläche für Polaroid + Klammer)
       ------------------------------------------------------- */
    .brotkarte-foto {
        top: 10px;                       /* vertikale Position */
        right: 40px;                     /* Abstand vom rechten Rand */
        width: 220px;                    /* Gesamtfläche für Polaroid */
        height: 180px;                   /* Höhe der Arbeitsfläche */
    }

    /* -------------------------------------------------------
       POLAROID-GRUNDEINSTELLUNG (Mobile)
       ------------------------------------------------------- */
    .brotfoto {
        top: 5px;                      /* Feinjustierung im Container */
        left: 15px;                      /* horizontale Position */
        transform: rotate(-2deg);        /* leichte Drehung – Mobile ruhiger */
        padding: 14px 14px 26px;         /* Polaroid-Rand – unten mehr Platz */
        padding: 15px 15px 50px;      /* Polaroid-Rand */

    }

    /* -------------------------------------------------------
       FORMATVARIANTEN (Quer / Hoch / Quadrat)
       → Hier stellst du die Bildgrößen ein
       ------------------------------------------------------- */

    .polaroid-quer {
        width: 270px;                    /* Breite Querformat */
        height: 200px;                   /* Höhe Querformat */
    }

    .polaroid-hoch {
        width: 200px;                    /* Breite Hochformat */
        height: 290px;                   /* Höhe Hochformat */
    }

    .polaroid-quadrat {
        width: 220px;                    /* Breite Quadrat */
        height: 220px;                   /* Höhe Quadrat */
    }

    /* -------------------------------------------------------
       BÜROKLAMMER 
       ------------------------------------------------------- */
    .klammer {
        top: -35px;                      /* sitzt etwas tiefer als Desktop */
        right: 50px;                     /* leicht nach außen versetzt */
        width: 55px;                     /* etwas größer für Mobile */
    }



    .stuehlinger-grafik {
        width: 400px;                    /* Mobile-Zoom */
        margin-top: -1rem;               /* optische Korrektur */
    }





}