* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: #081018;
	color: lightgray !important;
	font-family: Calibri,Arial,sans-serif
}

/*.hero {
    height: 100vh;
    background: url("../images/hero/winter-reiher.jpg") center/cover;
    display: flex;
    align-items: center;
    position: relative
}
*/
.overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,.25),rgba(8,16,24,.92))
}

.hero-copy {
	position: relative;
	z-index: 2;
	padding: 0 8%;
	max-width: 850px;
	font-size: 22px !important;
	font-weight: bolder;
}

/*h1 {
    font-size: clamp(2rem,7vw,5rem);
    line-height: .9
}

a {
    display: inline-block;
    margin-top: 18px;
    padding: 14px 24px;
    border: 1px solid #fff;
    border-radius: 15px;
    color: #fff;
    text-decoration: none
}*/

.featured {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 18px;
	padding: 80px 6%
}

.card, .tile {
	border-radius: 26px;
	overflow: hidden;
	min-height: 280px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: end;
	padding: 22px;
	position: relative
}

	.card:before, .tile:before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(transparent,rgba(0,0,0,.8))
	}

	.card h3 {
		position: relative
	}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
	gap: 18px;
	padding: 0 6% 90px
}

.tile {
	min-height: 360px
}

/*footer {
    text-align: center;
    padding: 40px;
    color: #9fb2c0
}

    footer a {
        text-align: center;
        padding: 10px;
        color: #9fb2c0;
        border: none;
        font-size: 14px !important;
    }

        footer a:hover {
            background-color: transparent;
            color: #fff !important;
        }*/

@media(max-width:900px) {
	.featured {
		grid-template-columns: 1fr
	}
}

/*ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    justify-content: center;
}

    ul li {
        float: left;
        margin-right: 5px;
        font-size: 22px;
        font-weight: bolder;
    }

        ul li a {
            display: block;
            color: #9fb2c0 !important;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            border:none;*/
/*border-radius: 2px !important;
            border-color: #9fb2c0 !important;*/
/*}

            ul li a:hover {
                background-color: transparent;
                color: #fff !important;
                border-color: #fff !important;
            }*/
/* Style the buttons that are used to open and close the accordion panel */
/*https://www.websites-wolf.de/webseiten-accordion-nur-html-und-css/*/
/* Stil Akkordion (hier: mit Rahmen) */
.accordion {
	border-radius: 15px;
	width: 70vw;
	margin: 2rem auto 0;
	overflow: hidden;
	padding: 2rem 2.5rem;
	background-color: transparent;
	border-style: solid;
	border-width: 0.5px;
	border-color: #9fb2c0;
	box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.20);
}

/*Überschriften*/
.tab {
	width: 100%;
	color: #9fb2c0;
	overflow: hidden;
	margin: 1rem 0;
	border: solid;
	border-width: 0.5px;
	border-radius: 10px;
}

.tab-label {
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	background: #081018;
	color: #fff !important;
	cursor: pointer;
}

	/*Hintergrundfarbe Überschriften bei Mauskontakt*/
	.tab-label:hover {
		background: #081018;
	}

	.tab-label::after {
		content: ">";
		width: 1em;
		height: 1em;
		text-align: center;
		transition: all 0.5s;
	}

/*Aufgeklappter Text*/

.tab-content {
	max-height: 0;
	padding: 0 1em;
	line-height: 2rem;
	color: #9fb2c0;
	background: #081018;
	transition: all 0.35s;
	 display:block;	 
	 overflow:auto;
}

.tab-close {
	display: flex;
	justify-content: flex-end;
	padding: 1em;
	font-size: 0.75em;
	background: #f6f6f6;
	cursor: pointer;
}

	.tab-close:hover {
		background: #081018;
	}

/*Hintergrundfarbe Überschriften, sobald aufgeklappt*/
input:checked + .tab-label {
	background: #081018;
}

	input:checked + .tab-label::after {
		transform: rotate(90deg);
	}

input:checked ~ .tab-content {
	max-height: 100vh;
	padding: 1rem;
}