/* .bg{
    height: 100%;
    width: 100%;
    backdrop-filter: blur(10px); 
    background-color: rgba(201, 66, 66, 0.7); 
    z-index: 2;
} */



.hero {
    display: flex;
    flex-direction: row;
    background: rgba(235, 228, 228, 0.7);
    backdrop-filter: blur(10px);
    height: 100vh;
    width: 100%;
    align-items: center;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.3"/></svg>'),
        rgba(235, 228, 228, 0.7);
    /* background-size: 100px; */
    padding-left: 3vw;
    overflow: hidden;
}

@media (min-width:451px) and (max-width: 899px) {
    .title .break {
        display: block; /* Zeigt "folio" in einer neuen Zeile an */
         margin-top: 200px;
    }
    .title span:first-child {
        display: inline; /* Zeigt "-" nur auf kleinen Bildschirmen */
    }
}
@media (max-width:450px){
    .title{
        font-size: 80pt;
        /* margin-top: 80px; */
        /* text-align: center; */
        /* justify-content: center; */
    }

    .title .break {
        display: block; /* Zeigt "folio" in einer neuen Zeile an */
         margin-top: 85px;
    }
    .title span:first-child {
        display: inline; /* Zeigt "-" nur auf kleinen Bildschirmen */
    }

}

.floating-bg {
    filter: blur(20px);
    position: absolute;
    width: 15vw;
    /* Größe anpassen */
    height: auto;
    opacity: 0.3;
    /* Leicht transparent */
    z-index: -1;
    /* Hinter dem Hero-Inhalt */
    animation: float 15s infinite ease-in-out;
    /* Animation */
}

/* Zufällige Startpositionen für jedes Bild */
/* .floating-bg:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.floating-bg:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
.floating-bg:nth-child(3) { top: 30%; left: 30%; animation-delay: 4s; }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, 15px);
    }
    50% {
        transform: translate(-15px, -10px);
    }
    75% {
        transform: translate(10px, 20px);
    }
} */


.collabsible {
    padding: 3vw;
    padding-right: 3vw;
    padding-top: 2vh;
}

.grafikdesign,
.dreid,
.fotografie,
.malen {
    padding-top: 3vh;
    border-bottom: 5vh;
}

/* .active, .grafikdesign:hover, .dreid:hover, .fotografie:hover, .malen:hover {
  background-color: rgba(235, 228, 228, 0.7);
} */

.line {
    width: 100%;
    margin: 0;
    border: 1px solid black;
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.collapsible.active+.content {
    max-height: 5000px;
    /* groß genug, damit alle Bilder reinpassen */
    overflow: visible;
}

/* Standard-Symbol: "/" */
.numbersymbol::after {
    content: "/ ";
}

/* Symbol beim Ausklappen: "-" */
.collapsible.active .numbersymbol::after {
    content: "--- ";
}

@media(min-width:900px) {
    .content {
        width: 80%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        margin-top: 30px;
        gap: 20px;
        row-gap: 2vw;
        grid-template-columns: 1fr 1fr 1fr;
        /* grid-auto-rows: 30vw; */

    }
}

@media(max-width:899px) {
    .content {
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        margin-top: 30px;
        margin-bottom:5vw;
        gap: 20px;
        row-gap: 5vw;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 30vw;
    }
}

@media(max-width:600px) {
    .content {
        display: grid;
        width: 80%;
        height: 100%;
        margin-left: auto;
        margin-right: auto; 
        margin-top: 30px;
        gap: 20px;
        row-gap: 7vw;
        grid-template-columns: 1fr;
        grid-auto-rows: 30vw;

    }

}






.contentbox {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
}

.imgs {
    width: 100%;
    height: 100%;
    /* max-height: 80vh; */
    object-fit:cover;
    transition-delay: 1s;
    transition: ease-out 0.3s;
}

.miniinfo {
    /* margin-top: auto; */
    padding: 5px;
    text-align: center;
    /* background: rgba(255, 255, 255, 0.8); */
}

.imgs:hover {
    filter: grayscale(100);
}