*{
        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:100%;
        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{
        width:80px;
        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 */
    .gallery{
        flex:1;
        display:grid;
        grid-template-columns:repeat(4, 300px);
        grid-template-rows:repeat(2, 1fr);
        gap:60px;
		row-gap: 5px;
        padding:60px 40px 0 10px;
        align-content:center;
    }

    .card{
        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: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);
    }

    /* Hinweis unten */
    .footer{
        position:absolute;
        bottom:22px;
        left:50%;
        transform:translateX(-50%);
        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);
    }