:root {
    --bg: #252020;
    --text: #999d99;
    --text2: #bbbebb;
}

i {
    font-style: normal;
}

a {
    text-decoration: none;
    color: var(--text2);
}

html,
body {
    position: relative;
    color: var(--text);
    background-color: var(--bg);
}

body {
    min-height: 100vh;
    font-family: Roboto, sans-serif;
    line-height: 1.5;
}

/* zentriere grob den Inhalt */
main {
    display: flex;
    flex-direction: column;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

@media (width >= 40rem) {
    main > nav {
        position: absolute;
        right: 40px;
        top: 39px;

        & > a {
            padding: 0 6px 0 8px;
        }
        & > a:not(:first-of-type) {
            border-left: 1px solid white;
        }
    }
	a#burger {
		display: none;
	}
}
@media (width < 40rem) {

	a#burger {
		position: absolute;
		top: 23px; right: 20px;
		display: block;
		width: 40px;
		height: 40px;
		background: url( /images/sprites.svg );
		background-position: 0 0;
		z-index: 9999;
	}

    main > nav {
		display: block;
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		z-index: 9999;

		opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
        transition:
            transform 180ms ease-out,
			opacity 500ms ease-out;

		padding: 6px;
		overflow: hidden;

		border-radius: 8px;
		background-color: var(--bg);

		& > a {
			display: block;
			font-size: 28px;
			font-weight: 300;
			padding: 6px;
			margin: 6px;
			color: var(--text2);
		}

		&.hide {
			opacity: 0;
            transform: translate3d(110%, -300%, 0) scale(.1);
		}

    }
}

body.start #al {
    text-align: center;
}
#al {
    text-align: left;
    margin-left: 20px;

    & > a {
		color: var(--text2);
        text-decoration: none;
        font: inherit;
        i:nth-of-type(1) {
            font-weight: 300;
			margin-right: 3px;
        }
        i:nth-of-type(2) {
            font-weight: 300;
            /*color: var(--text2);*/
        }
    }
}

body.start {
	section {
		margin-top: 4rem;
		h1 {
			font-weight: 300;
		}
	}
}

section#termine {

	h1 {
		text-align: center;
	}

	dl {
		max-width: 500px;
		display: grid;
		grid-template-columns: 12rem 1fr;
		gap: .5rem 1.25rem;
		margin: 1rem auto 0 auto;
	}

	dt {
		color: var(--text2);
		white-space: nowrap;
	}

	dd {
		margin: 0;
	}

	@media (width < 40rem) {
		dl {
			grid-template-columns: 1fr;
		}
		dt {
			white-space: normal;
			margin-top: .75rem;
		}
	}
}

section#news {
	text-align: center;
}

section#kontakt {
	text-align: center;
	margin-top: 8rem;
}

/* DESKTOP */
section#mainnav {
	display: grid;
	grid-template-columns: repeat(2, 200px);
	grid-template-rows: repeat(2, 200px);
	gap: 1rem;

	margin: -70px auto 0 auto;

	& > a {
		position: relative;
		overflow: hidden;
		&:hover {
			color: white;
		}
		background-size: contain;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
			transition:
				opacity 1300ms ease,
				background-size 300ms ease;
			z-index: 0;
		}

		&::before {
			opacity: 0.1;
		}
		&::after {
			opacity: 0;
		}
		&:hover {
			&::before,
			&::after {
				background-size: 115%;
			}
			&::before {
				opacity: 0;
			}
			&::after {
				opacity: 1;
			}
		}

		& > span {
			position: absolute;
			padding: 16px;
			max-width: calc(100% - 32px);
			z-index: 1;
		}

		&:nth-child(1)::before {
			background-image: url("../images/titel_klassisch_0.webp");
		}
		&:nth-child(1)::after {
			background-image: url("../images/titel_klassisch_1.webp");
		}
		&:nth-child(2)::before {
			background-image: url("../images/titel_spiel_0.webp");
		}
		&:nth-child(2)::after {
			background-image: url("../images/titel_spiel_1.webp");
		}
		&:nth-child(3)::before {
			background-image: url("../images/titel_lehre_0.webp");
		}
		&:nth-child(3)::after {
			background-image: url("../images/titel_lehre_1.webp");
		}
		&:nth-child(4)::before {
			background-image: url("../images/titel_songwriter_0.webp");
		}
		&:nth-child(4)::after {
			background-image: url("../images/titel_songwriter_1.webp");
		}

		&:nth-of-type(1) {
			border-radius: 32px 0 0 0;
		} /* oben links -> nach innen (rechts/unten) */
		&:nth-of-type(2) {
			border-radius: 0 32px 0 0;
		} /* oben links -> nach innen (rechts/unten) */
		&:nth-of-type(3) {
			border-radius: 0 0 0 32px;
		} /* oben links -> nach innen (rechts/unten) */
		&:nth-of-type(4) {
			border-radius: 0 0 32px 0;
		} /* oben links -> nach innen (rechts/unten) */

		&:nth-child(1) > span {
			right: 0;
			bottom: 0;
			text-align: right;
		} /* oben links -> nach innen (rechts/unten) */
		&:nth-child(2) > span {
			left: 0;
			bottom: 0;
		} /* oben rechts -> nach innen (links/unten) */
		&:nth-child(3) > span {
			right: 0;
			top: 0;
			text-align: right;
		} /* unten links -> nach innen (rechts/oben) */
		&:nth-child(4) > span {
			left: 0;
			top: 0;
		} /* unten rechts -> nach innen (links/oben) */
	}

	#aspiel {
		span > u {
			text-decoration: none;

			&:nth-child(6n + 1) {
				color: #e74c3c;
			}
			&:nth-child(6n + 2) {
				color: #f39c12;
			}
			&:nth-child(6n + 3) {
				color: #f1c40f;
			}
			&:nth-child(6n + 4) {
				color: #2ecc71;
			}
			&:nth-child(6n + 5) {
				color: #3498db;
			}
			&:nth-child(6n + 6) {
				color: #9b59b6;
			}
		}
	}
}



@media (width < 40rem) {
    section#mainnav {
		margin-top: -30px;
        grid-template-columns: repeat(1, 250px);
        grid-template-rows: repeat(4, 250px);
        & > a {
			border-radius: 32px !important;
		}
	}
	.start {
		h2 {
			display: none;
		}
	}
}

div.lightroom, div.lighthouse {
    --lr-min: 180px; /* minimale Kachelbreite -> bestimmt, wann eine Spalte dazu kommt */
    --lr-gap: 0;

    columns: var(--lr-min);
    column-gap: var(--lr-gap);

    border-radius: 24px 24px 0 0;
    overflow: hidden;

    & > * {
        display: block;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;

        & > img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
	&.list {
		columns: 360px;
		& > img {
			display: inline-block;
			width: 100%;
		}
		& > * {
			& > img {
			}
		}
	}
}

.overlay[hidden] {
    display: none !important;
}
.overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    padding: clamp(12px, 3vw, 32px);

    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    & > img {
        max-width: min(1100px, 92vw);
        max-height: 92vh;
        width: auto;
        height: auto;

        display: block;
        object-fit: contain;

        border-radius: 12px;
        box-shadow:
            0 18px 60px rgba(0, 0, 0, 0.55),
            0 2px 12px rgba(0, 0, 0, 0.35);
        background: rgba(0, 0, 0, 0.2);
    }

    & > a {
        position: absolute;
        top: 25px;
        right: 21px;

        display: grid;
        place-items: center;

        width: 40px;
        height: 40px;

		background: url( ../images/sprites.svg );
		background-position: 0 -40px;

        cursor: pointer;
        user-select: none;
    }

    & > a:hover {
        background: rgba(255, 255, 255, 0.18);
    }
}

section.news {
	h1 {
		text-align: center;
	}
}

footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: right;
    padding: 2rem 1.5rem 0.5rem 2rem;
}

#blind {
	position: fixed;
	inset: 0;
	z-index: 9000;

	//background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);

	opacity: 0;
	pointer-events: none;

	transition: opacity 200ms ease-out;

	&.show {
		opacity: 1;
		pointer-events: auto;
	}
}