:root {
	color-scheme: light dark; /* both supported */
	--me-background: hsl(50,17%,98%);
	--me-color: hsl(50,17%,91%);
	--me-header-color: hsl(50,17%,30%);
	--me-xxlight-color: hsl(50,17%,95%);
	--pre-background: repeating-linear-gradient(#efefef,#efefef 20px, white 20px, white 40px);
	--pre-border: #ccc;
	--pre-html-background: ivory;
	--me-highlight: red;
	--me-text-color: #333;
	--me-dim: #666;
	--me-dim-background: #eee;
	--me-deep-background: cornflowerblue;
	--me-link: hsl(271,90%,20%);
	--me-link-visited: hsl(271,90%,30%);
	--me-link-hover: hsl(290,90%,40%);
	--shadow-deep: #ccc;
	--me-error-bg: mistyrose;
	--me-error-color: firebrick;
}

@media (prefers-color-scheme: dark) {
	:root {
		--me-background: #333;
		--me-color: hsl(185,70%,40%);
		--me-header-color: hsl(185,60%,70%);
		--me-xxlight-color: hsl(185,40%,85%);
		--pre-background: repeating-linear-gradient(#444,#444 20px, #333 20px, #333 40px);
		--pre-border: #888;
		--pre-html-background: #444;
		--me-highlight: gold;
		--me-text-color: #eee;
		--me-dim: #ccc;
		--me-dim-background: #444;
		--me-deep-background: cornflowerblue;
		--me-link:pink;
		--me-link-visited: seashell;
		--me-link-hover: mistyrose;
		--shadow-deep: #000;
	}
}

html {scroll-behavior: smooth}
.skip-link {display:none}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 0;
	font-weight: 300;
	background: var(--me-background);
	
	line-height: 1.6;
	font-size: 1.1rem;
		
	@media (prefers-color-scheme: dark) {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	@media (max-device-width: 480px) {
		& { -webkit-text-size-adjust: 100% }
	}
}

body>img {
	display: none;
}

b {
	font-weight: 500;
}

& a {
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	color: var(--me-link);
	
	&:visited {
		color: var(--me-link-visited);
	}
	
	&:hover {
		color: var(--me-link-hover);
	}
}

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

& kbd {
	background: #efefef;
	color: #000;
	padding: 1px 4px;
	border-radius: 6px;
	border: 1px solid silver;
	text-transform: uppercase;
	font-size: 0.9rem;
}

#spacer {
	height: 0;
	overflow: hidden;
}

/***********************************************************************************

console, code

***********************************************************************************/
.codebox p {
	background: var(--me-deep-background);
	margin-bottom: 0;
	padding-left: 6px;
	box-sizing: border-box;
	font-size: 0.8;
	line-height:1.2;
	color: #fff;
}

pre {
	margin-top: 0;
	
	&.copysel {
		position: relative;
		cursor:pointer;
	}
}

pre, .grayframe {
	border-block:2px solid var(--pre-border);
	overflow:auto;
	background-image: var(--pre-background);
	font-size:0.8rem;
	line-height:20px;
	font-family: Menlo, 'Roboto Mono', 'Andale Mono', 'Lucida Console', monospace;
	color: var(--pre-color);
	tab-size:3;
	-moz-tab-size:3;
	padding-left:6px;
	margin-top: 2rem;
	margin-bottom: 2rem;

	&.console {
		margin-top: 0px;
		background-image: url("/javascript/svg/chrome-console-bar.svg");
		background-position-y: top;
		background-repeat: no-repeat;
		background-color: var(--me-dim-background);
		border-bottom: 1px solid silver;
		border-left: 1px solid silver;
		border-right: 1px solid silver;
		border-top: none;
		padding: 32px 0 0 6px;
	}
	&.html {
		background: var(--pre-html-background);
		padding: 4px 4px;
		
		&::before {
			content: "HTML";
			display:block;
			background: var(--pre-border);
			color: var(--me-text-color);
			padding-left: 0.5rem;
			margin-bottom: 0.5rem;
			letter-spacing: 1px;
		}
	}
	&.css {
		background: var(--pre-html-background);
		padding: 4px 4px;
		
		&::before {
			content: "CSS";
			display:block;
			background: var(--pre-border);
			color: var(--me-text-color);
			padding-left: 1rem;
			margin-bottom: 0.5rem;
		}
	}
}

layout-header {
	display:block; 
	.top-menu {
		padding: 2rem 0 1rem 0;
		margin-bottom: 1rem;
		letter-spacing: 1px;
		background: hsl(50,17%,85%);

		.reframe {
			list-style-type: none;
			margin: 0 auto 0 auto;
			width: 95vw;
			
			@media (max-width: 699px) {
				display: flex; 
				margin-left: -0.5rem;
				li:nth-child(1) { max-width: 80px; };
				li:nth-child(2) {display: none};
				li:nth-child(3) {display: none};
			}
			
			@media (min-width: 700px) {
				max-width:720px;
				display: grid;
				& 	{grid-template-areas: "logo kontakt impressum search";}

    			gap: 28px;
    			li:nth-child(2),
				li:nth-child(3) {font-size: 1.1rem; };
				li:nth-child(4) {min-width: 280px };
			}

			padding-left: 1em;

			justify-content:center;

			li:first-child{
				padding-right:1rem;
			}

			a { 
				text-decoration: none;
				text-transform: uppercase;
				font-size: 1rem;
				color: var(--me-header-color);
			}
		}

		@media (max-width:500px) {
			a[href="/anfrage.html"] { display: none; }
			a[href="/impressum.html"] { display: none; }
		}
	}
	.branding {
		margin-bottom: 2rem;
		text-align: center;
		& .site-title a {
			font-size: clamp(1rem, -0.60rem + 8.00vw, 2.2rem);
			text-decoration: none;
			color: var(--me-header-color);
		}
	}

	.topbar { 
		input#hamburg {display:none}
		
		.drawer { list-style-type: none; padding-left: 0;}
		
		@media (max-width: 920px) {
			& .drawer {
				position: absolute;
				width:100%;
				transform: translateX(-102%);
				background: hsla(0,0%,0%,0.75);
				
				& li {
					height: 2.6rem;
					padding-left: 1rem;
					display: flex; 
					flex-direction: column;
					justify-content: center;
					border-bottom: 1px solid white;
					box-sizing: border-box;
					margin-bottom: 6px;
					font-size: 1.6rem;
					
					& a {
						color: white;
						font-size: 1.1rem;
						text-decoration: none;
						padding-top: 4px;
						padding-bottom: 4px;
					}
					&:last-child {
						border: none;
					}
				}
			}
			
			& label.hamburg {
				display: block;
				background: #555;
				width: 80px;
				height: 56px;
				position: relative;
				margin: auto;
				
				.hamburg-line1 {top:12px}
				.hamburg-line2 {top:24px}
				.hamburg-line3 {top:36px}
				.hamburg-line1,
				.hamburg-line2,
				.hamburg-line3 {
					position: absolute;
					left:12px;
					height: 5px;
					width: 56px;
					background: #fff;
					transition: transform 0.5s;
					transform-origin: center;
				}
			}

			#hamburg:checked + .hamburg .hamburg-line1{transform: translateY(12px) rotate(-45deg);}
			#hamburg:checked + .hamburg .hamburg-line2{opacity:0;}
			#hamburg:checked + .hamburg .hamburg-line3{transform: translateY(-12px) rotate(45deg);}
		
			#hamburg:checked ~ .drawer {
				transform: translateX(0%);
				transition: transform 0.5s;
			}
		}
		
		@media (min-width: 921px) {
			background: var(--me-xxlight-color);
			.drawer {
				display: flex;
				max-width: 1300px;
				margin: 0 auto 2rem auto;
				border-top: 1px solid var(--me-color);
				border-bottom: 1px solid var(--me-color);
				z-index: 1000;

				li {
					display: flex;
					flex-direction: column;
					text-align: center;
					padding-top: 0.5rem;
					box-sizing: border-box;
					font-size: clamp(1rem, 0.8rem + 1.30vw, 1.1rem);
					background: var(--me-xxlight-color);
					border-right: 1px solid var(--me-color);
					height: 86px;
					width: 16.6%;
				&:first-child {
					border-left: 1px solid var(--me-color);
				}

					& a {
						font-size: 1.2em;
						text-decoration: none;
						color: black;
					}
				}
			}
		}
	}
} /** **/

form.search {
	position: relative;
	display: inline-block;
	max-width: 300px;
	input,
	button {
		box-sizing: border-box;
		-webkit-appearance: none; /* Safari: Standarddarstellung weg */
		appearance: none;
		border: 1px solid #ccc;
		line-height: 1;
		font-size: 14px;
	}

	/* Eingefügt für ein Suchfeld oben im top-menu */
	input.keyword {
		padding-right: 2.5rem; /* Platz für den Button */
		height: 2rem;
		max-width: 270px;
	}
	
	button {
		position: absolute;
		top: 50%;
		right: 0.5rem;
		transform: translateY(-50%);
		border: none;
		background: transparent;
		cursor: pointer;
		font-size: 1rem;
	}
}

.entry-header {
	margin: 1rem auto;
	max-width: 960px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "heading"
						 "timestamp" 
						 "excerpt" 
						 "figure" 
						 "sitelinks";
	
	& h1 {
		grid-area: heading;
		font-size: clamp(1rem, -0.60rem + 7.00vw, 1.7rem);
		font-weight: 400;
		margin-bottom: 0;
		overflow: hidden;
		line-height: 1.4cap;
		margin: 1rem 0;
		text-wrap: balance;
	}
	
	& time {
		grid-area: timestamp;
		display: inline-block;
		margin: 0.5rem 0 0.5rem 0;
	}
	
	& figure { 
		grid-area: figure;
		max-width: 960px;
		margin-bottom: 1rem;
	}
	
	& .excerpt {
		grid-area: excerpt;
		margin: 0;
	}
	
	& #sitelinks {
		grid-area: sitelinks;
		max-width:200px;
		margin: 2rem auto;
	}
	
	@media (min-width: 1380px) {
		border-bottom: 1px dotted darkcyan;
		padding-bottom: 1rem;
		margin: 0 0 0 auto;
		height: 605px;
		max-width: 920px;
		margin-right: 30px;
		
		& #sitelinks {
			display:none;
		}
		h1, time, .excerpt, .headsvg {

			margin: 0rem 0rem;
			/**border-right: 1px dotted silver;**/
		}
		
		& .headsvg { 
			max-width: 100%;
			display: flex;
			flex-direction: column;
			align-self: end;
			justify-content: end;
			
			& img { aspect-ratio: 966/444; }
		}
	
		& .excerpt { 
			margin: 0rem;
			
			p {
				margin-top: 0;
			}
		}

		& a[title="Sitemap"] { display: none; }
	}
}

@media (prefers-color-scheme: dark) {	
	.imgfx { filter: invert(100%) }
}

.scrollbar {
	text-align: right;
	color: silver;
	margin-top: -1.5rem;
	font-size: 0.9rem;
}

main {
	margin: 2rem auto 2em auto;
	padding: 0 1rem;
	max-width: 910px;
	
	& section {
		margin-bottom: 3rem;
		& p {
			font-size: 1.2rem;
		}
	}

	& .btn {
		padding: 4px; 
		text-transform: uppercase;
		border-radius: 4px;
		border:1px solid silver;
		letter-spacing: 1px;
		cursor:pointer;
		font-size:1rem;
		color: #000;
		background:var(--me-dim-background);
		color: var(--me-text-color);
	}
	
	& .compare {
		font-size: smaller;
		border-collapse: collapse;
		margin: 2rem auto; 
		& th { font-weight: 400; background: var(--me-dim-background); }
		& td, & th { padding: 3px 6px; text-align: left; vertical-align: top; border: 1px solid var(--me-dim-background) }
		& code { font-size: 0.9rem}
	}

	& .entry-content a:not(h2)[href^="https://"]:before {
		content: "➚ ";
	}

	& h2 {
		font-size: clamp(1rem, 0.00rem + 5.00vw, 1.4rem);
		font-weight: 400;
		margin-top: 2rem;
		border-bottom: 1px solid var(--me-header-color);
		text-wrap: balance;
		color: var(--me-header-color);
	} 
	
	& figure {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 2rem;
		&.svginside {
			margin: 1rem auto 2rem auto;
		}
	}
	& figcaption {
		font-size: 1rem;
		line-height: 1.3;
	}
	
	& h3 {
		font-weight: 400;
		margin-top: 0.5rem;
	}

	& h4 {
		font-size: clamp(1rem, 0.91rem + 0.44vw, 1.1rem);
		font-weight: 400;
		margin-bottom: 0.1rem;
		margin-top: 0.5rem;
		cursor: pointer;
		&::before { content: "▶ " }
	}
	
	& .rangeSlider {
		appearance: none;
		background-color:#9CAFBC;
		height:12px;width:100%;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;

		&::-webkit-slider-thumb {
			appearance: none;
			background-color:var(--me-xxlight-color);
			height:30px;width:30px;
			border-radius:50%;
			border: 1px solid var(--me-color);
		}

		&::-moz-range-thumb {
			appearance: none;
			background-color:var(--me-xxlight-color);
			height:30px;
			width:30px;
			border-radius:50%;
			border: 1px solid var(--me-color);
		}
	}

	& .secondary {
		@media (max-width: 1379px) {
			li { 
				font-size: 1.2rem; 
				margin-bottom: 0.8rem;
			}
			
			h4 {
				font-size: 1.4rem;
			}
		}
		@media (min-width: 1380px) {
			li {
				font-size: 1rem; 
				margin-bottom: 0.4rem;
			}
		}
		max-width: 970px;
		margin: 2rem auto;
		display:flex;
		flex-direction: column;

		& nav {
			& header {
				max-width:200px;
				margin: 1rem auto;
				
			}
		}

		& i {font-style: normal}
		
		& ul {
			max-height: 0;
			height: 600px;
			overflow: hidden;
			transition: 1s all;
			padding-left: 0;
			margin-top:0.4rem;
			margin-bottom: 0;
		}
		
		& li {
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			
			
			& a {
				display: inline-block;
				width: 100%;
				border-left: 4px solid var(--me-link);
				padding-left: 8px;
				text-decoration: none;
			}
		}

		& .open {
			max-height: 600px;
			transition: 1s all;
		}
	}
	
	& .highlight {
		color: var(--me-highlight);
		fill: var(--me-highlight);
	}
	
	& .error {
		color: var(--me-error-color);
		background-color: var(--me-error-bg);
	}

	@media (min-width: 1380px) {
		max-width: 100%;
		display: grid;
		grid-template-columns: calc(50% - 649px + 980px) 40px 348px calc(50% - 649px);
		grid-template-areas: "entry-content . secondary .";

		& .entry-content {
			border-right: 1px dotted darkcyan;
			grid-template-columns: calc(100% - 980px) 980px;
			grid-area: ". entry-content";

			section, aside, nav {
				width: 920px;
				padding-right:40px;
				float: right;
			}

			& section.full { width: 94%; }
		}
		
		& .secondary {
			grid-area: secondary;
			width: clamp(300px, 380px, 440px);
			max-width:25vw;
			overflow:hidden;
			margin: 0 -1rem;
			
			& .open {
				max-height: 600px;

			}
		}
	}
}

.bottomadds {
	margin-top: 2rem;
}

@media (max-width: 1379px) {
	.topadds {
		max-width: 910px;
		max-height: 300px;
		overflow: hidden;
		margin: 0 auto;
		background: ivory;
	}	
}
	
@media (min-width: 1380px) {
	.topadds {
		max-width: 392px;
		height: 620px;
		margin: 0;
		border-bottom: 1px dotted silver;
		margin-bottom: 2rem;
	}
}
	
@media (max-width: 1379px) {
	.adds.underadds {
		max-width: 920px;margin-top:3rem;margin-left:auto;margin-right: auto;
		overflow: hidden;
	}
}
@media (min-width: 1380px) {
	.adds.underadds {
		max-width: 360px;margin-top:auto;
	}
}

.search-field {
	background:var(--me-dim-background);
	padding:2rem;
	margin-top:2rem;
	margin-bottom:2rem;
}
& search-field {
	max-width:520px;
	margin:auto;
	display:block;
	
	& input#keyword {
		font-size: 1.1rem;
		padding: 6px;
		max-width:80%;
		height: 26px
	}
	
	& .btn {
		padding: 8px 4px; 
		text-transform: uppercase;
		border-radius: 4px;
		border:1px solid silver;
		letter-spacing: 1px;
		cursor:pointer;
		font-size:1rem;
		height:40px;
		background:var(--me-dim-background);
		color: var(--me-text-color);
	}
}
.bottom {
	& .scrollup {
		max-width: 120px;
		margin: auto;
	}
}

#anchorSymplr {
	background: var(--me-dim-background) !important
}

footer {
	background: var(--me-dim-background);
	padding: 1rem;
	& .socialicons img { 
		width: 40px;
		height:40px;
	}
	& a {
		text-decoration: none;
	}

	@media (min-width: 920px) {
		& .footer-cols {
			display: flex;
			gap: 18px;
			max-width: 920px;
			margin: auto;
			
			& .cols {
				width: 50%;
				& ul li { margin-bottom: 0.5rem; }
			}
		}
	}
	
	&.colofon { padding-bottom: 120px; }
}


.svghide {
	display:none
}