html {
	scroll-behavior: smooth;
}

body {
	font-family: system-ui, sans-serif;
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 300;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

body > img {
	position: absolute;
}

h1, h2, h3, h4 {
	font-weight: 500;
}

table {
	max-width: 980px; margin: 1rem auto 2rem auto; 
	border-collapse: collapse;
	
	td, th {
		padding: 6px; 
	}
	
	th {
		background: #aaa; color: white; 
		font-weight: 500;
		text-align: left;
	}
	
	tr:nth-child(even) {
		background: #efefef;
	}
	
	caption { 
		caption-side: bottom; 
		margin-top: 1em; 
		border-top: 1px solid silver; 
		font-style: italic;
	}
}

.primary {
	position: relative;
	background: hsl(0,0%,10%);

	.logo {
		width: clamp(100px, 12vw, 150px);
		height: auto;
	}
	
	form {
		grid-area: search;
		display:flex;
		margin-top: 1rem;
		margin-left: auto;
		margin-right:auto;
		
		input.top {
			font-size: 1rem;
			padding: 4px;
			max-width: 90%;
			height:40px;
			box-sizing: border-box;
			border-radius:0;
			border:none;
		}
		
		button {
			background: white;
			border: none;
			padding: 0.4em;
			cursor: pointer;
			color: #333;
			height: 40px;
		}
	
	}
	
	input#hamburg {
		display: none
	}

	@media (max-width:919px) {
		label.hamburg { 
			display: block;
			width: 62px; 
			position: relative;  
		}
	
		.line { 
			position: absolute; 
			left:6px;
			height: 4px; 
			width: 50px; 
			background: #fff; border-radius: 2px;
			display: block; 
			transition: 0.5s; 
			transform-origin: center; 
		}
	
		.line:nth-child(1) { top: 28px; }
		.line:nth-child(2) { top: 40px; }
		.line:nth-child(3) { top: 52px; }
		
		.hamburg {}
	
		#hamburg:checked + .hamburg .line:nth-child(1){
			transform: translateY(12px) rotate(-45deg);
		}
	
		#hamburg:checked + .hamburg .line:nth-child(2){
			opacity:0;
		}
	
		#hamburg:checked + .hamburg .line:nth-child(3){
			transform: translateY(-12px) rotate(45deg);
		}
	
		nav.primary-nav {
			height: auto;
			max-height: 0;
			overflow: hidden;
			transition: all 0.5s;
			width:100%;
			position: absolute;
			z-index: 200;
			top: 85px;
		}
	
		#hamburg:checked + .hamburg + nav.primary-nav { 
			max-height: 600px; 
		}
		
		.primary-menu {
			display: grid;
			
			grid-template-columns: clamp(100px, 15vw, 180px) 1fr 70px;
			grid-template-areas: "logo search hamburger"
								"navmenu navmenu navmenu";
		}
		
		.primary-nav {
			width: 100%;
			background: hsla(0,0%,0%,0.7);
			grid-area: navmenu;
			
			a {
				color: white;
				text-decoration:none;
				padding-top:5px;
				padding-bottom: 5px;
				display: inline-block;
				border-bottom: 1px dotted silver;
				width: 90%
			}
		}

		label.hamburg {
			margin-right: 0;
			justify-self: end;
		}
		
		label.hamburg:last-child {
			background: red;
		}
	}
	
	@media (min-width: 920px) {
		.primary-menu {
			display: grid;
			grid-template-areas: "logo nav search";
			grid-template-columns: clamp(100px, 12vw, 180px) 1fr minmax(auto, 320px);
			gap: 1rem;
			max-width: 1440px;
			height: 92px;
			margin: auto;
			font-size:1.1rem;
			
			a {
				color: #fff;
				text-decoration: none;
			}
			
			.logo {
				grid-area: logo;
			}
			
			input.top {
				width: clamp(110px, 80%, 320px);
			}
			
			nav.primary-nav {
				grid-area: nav;
				
				#menu-top-menu {
					display: flex;
					gap:2rem;
					padding: 6px;
					
					margin-left: 0;
					padding-left: 0;
					list-style-type: none;
					
					li { width: 25%}
					
					.menu-item-has-children {
				
						/* Dropdown-Menü */
						.sub-menu {
							position: absolute;
							top: 100%;
							left: 0;
							z-index: 1000;
						
							opacity: 0;
							transform: translateY(-10px);
							visibility: hidden;
							pointer-events: none;
							transition: opacity 1s ease, transform 1s ease;
						
							background: lavender;
							padding: 0.5em;
						}
						
						.sub-menu.open {
							opacity: 1;
							transform: translateY(0);
							visibility: visible;
							pointer-events: auto;
							
							display: flex;
							gap: 18px;
							justify-content: center;
							height: 100px;
							background: hsla(0,0%,90%,0.5);
							width: 100vw;
				
							li {
								max-width: 200px;
								height: 180px;
								border:1px solid green;
								background: ivory;
								margin-left: 0;
								padding-left: 0;
								list-style-type: none;
								background: tomato;
								background-size: cover;	
								display:flex;
								flex-direction: column;
								justify-content: center;
								text-align: center;
							}

							li:nth-child(1) {
								background: url(/assets/start/bilddatenbanken.webp)
							}
							li:nth-child(2) {
								background: url(/assets/start/bildbearbeitung.webp)
							}
							li:nth-child(3) {
								background: url(/assets/start/fototechnik.webp)
							}
							li:nth-child(4) {
								background: url(/assets/start/bildgestaltung.webp)
							}
							
							a {
								padding-top:20px;
								padding-bottom: 20px;
								display:inline-block;
								width:100%;
							}
						}
				
						.sub-menu.closing {
							opacity: 0;
							transform: translateY(-10px);
							visibility: hidden;
							pointer-events: none;
						}
					}
				}
			}
		}
	}
}

.lead {
	position: relative;
	max-height: 50vh;
	overflow: hidden;

	
	img {
		object-fit: cover;
		margin-bottom: 0;
		object-position: bottom;
		max-height: 50vh;
		width: 100vw;
		display: block;
	}
		
	@media (max-width: 460px) {

	}
	header {
		position: absolute;
		text-align: center;
		color: white;
		width: 70%;
		left: 15%;
		bottom: 1rem;
		backdrop-filter: brightness(80%);
		border-top: 1px solid white;
		
		h1 {
			font-weight: 400;
			margin-top:0.4rem;
			margin-bottom: 0.4rem;
			font-size: clamp(1.4rem, 1.17rem + 1.03vw, 2.1rem);
		}
	}
}

/** morebees ist der Abschnitt unter dem Beitrag, mit Suchformular
    vier Beitragsbildern (lead)
**/
.morebees {
	background: hsl(0,0%,70%);
	
	h3 {
		text-align: center;
		font-weight: 400;
		padding-top: 2rem;
	}
	
	form {
		margin-bottom: 2rem;
		text-align: center;
		display:flex;
		justify-content: center;
	}
	input[name="query"] {
		width: 300px;
		padding: 0.5rem;
		font-size: 1.1rem;
		height: 50px;
		box-sizing: border-box;
	}
	
	button {
		height: 50px;
		font-size:1.8rem;
	}
	
	.wp-block-columns.has-2-columns.alignfull.hero {
		width: 100%;
		display:grid;
	}
	
	.wp-block-column {
		box-sizing: border-box;
		height:100%;
		position:relative;
		border-bottom:1px solid white;
		border-right:1px solid white;
	}

	@media (max-width: 499px) {
		.wp-block-columns.has-2-columns.alignfull.hero {
			grid-template-columns: 1fr;
			grid-template-areas: "cell1"
								"cell2";
		}
		
		.wp-block-column {
			width:100vw;
		}
	}
	
	@media (min-width: 500px) {
		.wp-block-columns.has-2-columns.alignfull.hero {
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "cell1 cell2";
		}
		
		.wp-block-column {
			width:calc(50vw - 1px);
		}
	}
		
	.wp-cover {
		max-height:500px;
		overflow: hidden;
		img {
			width:100% !important;
			object-fit:cover;
		}
	}
	
	.wp-block-cover__inner-container:hover {
			backdrop-filter: brightness(100%);
			transition: backdrop-filter 0.5s ease;
	}
	
	.wp-block-cover__inner-container {
		position:absolute;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		top:0;
		left:0;
		width:100%;
		height:100%;
		align-items: center;
		align-content: center;
		justify-content: center;
		backdrop-filter: brightness(50%);
		transition: backdrop-filter 0.5s ease;
		gap:1rem;
		
		&:hover {
			backdrop-filter: brightness(100%);
			transition: backdrop-filter 0.5s ease;
		}
		
		time {
			color: white;
			width:100%;
			text-transform: uppercase;
			font-size: 1.5rem;
			letter-spacing:0.1rem;
			text-align:center;
		}
		
		h4 {
			text-align: center;
			font-size: clamp(0.9rem, -0.10rem + 4.56vw, 1.8rem);
			font-weight:400;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 99%;
			text-transform: uppercase;
			margin-top: 0;
			margin-bottom: 0;
			letter-spacing:0.1rem;
		}
		h4 a {
			color: white;
			text-decoration: none;
		}
		.btn {
			text-align: center;
		}
		
		.btn a {
			color: white;
			padding: 10px;
			border:1px solid #fff;
			text-decoration: none;
		}
	}
}

main {
	margin-top: clamp(2rem, 12vw, 6rem);
	
	figcaption {
		line-height: 1.2;
		font-size: smaller;
	}
}

article {
	margin-top: 1rem; 
	margin-bottom: 1rem; 

	@media (min-width: 720px) {
		section.excerpt {
			display: flex;
			flex-wrap: wrap;
			gap: 18px;
			width: min(100% - 1rem, 1160px);
			margin: auto;
		}
		
		section.excerpt h2 {
			width: 100%;
		}
		
		section.excerpt p {
			width: 48%;
		}
	}
	
	
	
	.wp-block-columns {
		display: flex;
		gap: 1rem;
		margin: auto;
		
		&.narrow {
			max-width: 720px;
			margin: auto;
		}
		&.has-2-columns img{
			gap:18px;
		}
	}

}

article section {
	margin-top: 2rem;
	border-bottom: 1px solid firebrick;
	
	header.excerpt,
	p, h2, h3, ul, ol, figure {
		width: min(100% - 1rem, 920px);
		margin-inline: auto;
	}
	
	h2::before {
		content: "█ "; 
		color: firebrick;
	}
	
	li {
		width: 95%;
	}
	
	.group {
		width: 100vw;
		background: gainsboro;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	dl {
		max-width: 720px; margin: auto;
	}
}

.scrollup {
	background: url("/dist/texture-shapes-bg.svg"), linear-gradient(black, green);
	background-size: 300px;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

footer {
	label span {
		font-size: 0.96rem;
	}
	p, li {
		font-size: 1rem;
		margin: 0;
	}
	
	input[type="text"] {
		font-size: 1rem; 
		padding:4px;
	}
	
	button {
		font-size: 1rem;
		padding: 4px;
	}

	background: #ddd;
	
	ul { list-style-type: none; padding-left: 0;}
	a { color: #333; text-decoration: none; }
	
	.grid-container {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.grid-item {
		padding: 20px;
		border: 1px solid silver;
		max-width: 460px;
	}

	.grid-item:nth-child(5) {
		text-align: center;
		background: #333;
		max-width: 100%;
	}
	
	@media (min-width: 600px) {
		.grid-container {
			grid-template-columns: repeat(2, 1fr);
		}
	
		.grid-item:nth-child(5) {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 1160px) {
		.grid-container {
			grid-template-columns: repeat(3, 1fr);
		}
	
		.grid-item:nth-child(4) {
			grid-column: 1 / span 2;
		}
	
		.grid-item:nth-child(5) {
			grid-column: 3;
		}
	}

	@media (min-width: 1440px) {
		.grid-container {
			grid-template-columns: repeat(4, 1fr);
		}
	
		.grid-item:nth-child(4),
		.grid-item:nth-child(5) {
			grid-column: auto; /* Reset vorheriger column spans */
			display: block;    /* falls vorher display: grid gesetzt wurde */
		}
	
		.grid-item:nth-child(5) {
			grid-column: 1 / -1; /* volle Breite */
		}
	}
}