*{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:Arial, Helvetica, sans-serif;
    }

    body{
		background-size: cover;
		background-repeat: no-repeat;
        overflow:hidden;
        position:relative;
        color:white;
    }

    /* Dunkler Overlay für bessere Lesbarkeit */
    body::before{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,0.35);
        z-index:0;
    }

    /* Titel oben */
    header{
        position:absolute;
        top:25px;
        left:30%;
        transform:translateX(-50%);
        z-index:2;
        font-size:44px;
        font-weight:bold;
        letter-spacing:2px;
        text-shadow:0 3px 10px rgba(0,0,0,0.8);
        background:rgba(0,0,0,0.35);
        padding:12px 40px;
        border-radius:14px;
        backdrop-filter:blur(4px);
    }
	

/* MUSEUM TITLE */

    .association-title{
        font-size:1.2rem;
        font-weight:bold;
        letter-spacing:2px;
    }
    .museum-title{
        font-size:2rem;
        font-weight:700;
        letter-spacing:2px;
		text-shadow:0 3px 12px rgba(0,0,0,0.7);
		margin-right: auto;
		margin-left: auto;
    }

    /* Hauptlayout */
    .main{
        position:relative;
        z-index:2;
        display:flex;
		height: 100vh;	
        padding-top:80px;
        padding-bottom:80px;
    }

    /* Linke vertikale Auswahl */
    .sidebar{
        width:140px;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;
        padding-top:10px;
    }

    .thumb{
        min-width:80px;
        min-height:80px;
        position:relative;
        border-radius:12px;
        overflow:hidden;
        cursor:pointer;
        border:2px solid rgba(255,255,255,0.8);
        transition:0.25s;
        box-shadow:0 4px 10px rgba(0,0,0,0.5);
    }

    .thumb:hover{
        transform:scale(1.08);
        border-color:#ffffff;
    }
	
	.thumb.active{
		border: 4px solid rgba(62,183,179,0.8);
        transform:scale(1.08);
    }

    .thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .thumb-title{
        position:absolute;
        bottom:0;
        width:100%;
        background:rgba(0,0,0,0.65);
        text-align:center;
        font-size:12px;
        padding:4px 2px;
    }


    /* Rechter Hauptbereich wenig */
    .gallery{
        flex:1;
        display:grid;
        grid-template-columns:repeat(5, 1fr);
        grid-template-rows:repeat(2, 1fr);
        gap:40px;
		row-gap: 80px;
        padding:60px 40px 0 10px;
        align-content:center;
    }


    /* Rechter Hauptbereich viel */
    .gallery10{
        flex:1;
        display:grid;
        grid-template-columns:repeat(8, 1fr);
        grid-template-rows:repeat(5, 1fr);
        gap:10px;
		row-gap: 20px;
        padding:20px 40px 0 10px;
        align-content:center;
    }
	
	
    .card{
		height: 290px;
		width: 290px;
        position:relative;
        aspect-ratio:1 / 1;
        border-radius:22px;
        overflow:hidden;
        cursor:pointer;
        border:3px solid rgba(255,255,255,0.85);
        transition:0.3s;
        box-shadow:0 8px 20px rgba(0,0,0,0.45);
    }
	
	
    .card:hover{
        transform:scale(1.03);
        border-color:white;
        box-shadow:0 12px 28px rgba(0,0,0,0.6);
    }

    .card img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .card10{
		height: 180px;
		width: 180px;
        position:relative;
        aspect-ratio:1 / 1;
        border-radius:22px;
        overflow:hidden;
        cursor:pointer;
        border:3px solid rgba(255,255,255,0.85);
        transition:0.3s;
        box-shadow:0 8px 20px rgba(0,0,0,0.45);
    }

    .card10:hover{
        transform:scale(1.03);
        border-color:white;
        box-shadow:0 12px 28px rgba(0,0,0,0.6);
    }

    .card10 img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .card-title{
        position:absolute;
        bottom:0;
        width:100%;
        background:rgba(0,0,0,0.6);
        padding:14px;
        font-size:18px;
        font-weight:bold;
        text-align:center;
        text-shadow:0 2px 6px rgba(0,0,0,0.8);
    }

    .cardBack{
		height: 290px;
		width: 290px;
        position:relative;
        aspect-ratio: 1 / 1;
        border-radius:22px;
        overflow:hidden;
        cursor:pointer;
        background:rgba(0,0,0,0.45);
        border:3px solid rgba(255,255,255,0.85);
        transition:0.3s;
        box-shadow:0 8px 20px rgba(0,0,0,0.45);
		display: table-cell;
		vertical-align: middle;
		text-align: center;
    }
	
	
    .cardBack:hover{
        transform:scale(1.03);
        border-color:white;
        box-shadow:0 12px 28px rgba(0,0,0,0.6);
    }

    .cardBack10{
		height: 180px;
		width: 180px;
        position:relative;
        aspect-ratio:1 / 1;
        border-radius:22px;
        overflow:hidden;
        cursor:pointer;
        background:rgba(0,0,0,0.45);
        border:3px solid rgba(255,255,255,0.85);
        transition:0.3s;
        box-shadow:0 8px 20px rgba(0,0,0,0.45);
		vertical-align: middle;
		text-align: center;
    }
	
	
    .cardBack10:hover{
        transform:scale(1.03);
        border-color:white;
        box-shadow:0 12px 28px rgba(0,0,0,0.6);
    }

    .spanCenter{
		position: relative;
		top: 45%;
		font-size: 24px;
	}

    /* Hinweis unten */
    .hintlang{
        position:absolute;
        bottom:22px;
        left:40%;
        transform:translateX(-40%);
        z-index:2;
        background:rgba(0,0,0,0.45);
        padding:14px 36px;
        border-radius:14px;
        font-size:28px;
        letter-spacing:1px;
        backdrop-filter:blur(4px);
        text-shadow:0 2px 6px rgba(0,0,0,0.8);
    }
	
    /* Pfad unten */
    .breadcrumb{
        position:absolute;
        bottom:22px;
        left:10%;
        z-index:2;
        background:rgba(0,0,0,0.45);
        padding:14px 36px;
        border-radius:14px;
        font-size:24px;
        letter-spacing:1px;
        backdrop-filter:blur(4px);
        text-shadow:0 2px 6px rgba(0,0,0,0.8);
    }
	
	.subpathgrey {
		color: white;
	}
	
	.subpath {
		color: silver;
		cursor: pointer;
	}
	
	.subpath:hover {
		color: cornflowerblue;
	}
	
	

#goOneBackBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 26px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
}

#goOneBackBtn:hover {
    background-color: #000000;
    transform: scale(1.1);
}

#goOneBackBtn.show {
    opacity: 1;
    visibility: visible;
}