/* zusatz CSS: Umweltschutz Seite */

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




/* ============================================================
   HANGOVER-BEREICH (Polaroid-Effekt)
   - eigener Container, damit das alte Layout (Floats!) stabil bleibt
   - NICHT .nullpunkt verwenden, da diese an anderen Stellen genutzt wird
   - Höhe definiert, damit der Footer nicht hochrutscht
   ============================================================ */

.hangover-wrap {
    position: relative;   /* Basis für absolute Positionierung der Bilder */
    height: 200px;        /* Platz für Schriftzug + Polaroid + Abstand */
    margin-top: 20px;     /* Abstand zum vorherigen Textblock */

   /*  outline: 1px solid; */ /* debug */
}


/* ============================================================
   SCHRIFTZUG "Euer Humberg-Hof Team"
   - leicht über dem Block positioniert
   - höchste Ebene (z-index)
   ============================================================ */

 /* VARIANTE ALT >> Grafik-Text */  
.hangover-wrap .team {
    position: absolute;
    left: 180px;          /* horizontale Feinpositionierung */
    top: -5px;            /* minimaler Überhang nach oben */
    z-index: 105;         /* über Polaroid */
}

 /* VARIANTE NEU >> Echter Text */  
.hangover-wrap .team-text {
    position: absolute;
    left: 200px;      /* exakt wie vorher */
    top: -5px;        /* exakt wie vorher */
    z-index: 105;     /* über der Katze */

    font-family: 'Caveat', cursive;
    font-size: 2.4rem;       /* anpassen bis es wie die Grafik aussieht */
    color: #441100;
    line-height: 0.9;
    text-align: left;
    transform: rotate(-3deg);  /* gleiche leichte Schräglage */
    white-space: pre-line;     /* damit <br> sauber wirkt */
}






/* ============================================================
   POLAROID-BILD (Hangover-Effekt)
   - ragt bewusst über den Footer hinaus
   - z-index unter dem Schriftzug, aber über dem Hintergrund
   ============================================================ */

.hangover-wrap .katze {
    position: absolute;
    left: 380px;          /* horizontale Position */
    top: -30px;           /* NEGATIV = Hangover nach unten */
    z-index: 100;
}



/* ===================== MOBILE ===================== */
/* Ab 1000px abwärts: Hangover-Effekt deaktivieren,
   Bilder kleiner + zentriert, Blockhöhe reduziert */

@media (max-width: 1000px) {

    .hangover-wrap {
        height: 350px;          /* mehr Platz wegen größerem Bild */
        margin-top: 30px;
    }

    /* Schriftzug oben zentriert + größer */
    .hangover-wrap .team {
        left: 25%;
        top: 50px;
        transform: translateX(-50%);
        width: 280px;           /* vorher 160px → jetzt ~x1.4 */
    }

    /* Polaroid-Bild zentriert + deutlich größer */
    .hangover-wrap .katze {
        left: 70%;
        top: -50px;              /* unter dem Schriftzug */
        transform: translateX(-50%);
        width: 400px;           /* vorher 180px → jetzt ~x1.44 (optisch x2) */
    }


 /* VARIANTE NEU >> Echter Text */  
.hangover-wrap .team-text {
    position: absolute;
    left: 10px;      /* exakt wie vorher */
    top: -5px;        /* exakt wie vorher */

    font-size: 4.0rem;       /* anpassen bis es wie die Grafik aussieht */
    line-height: 0.9;
    text-align: left;
}






}