:root {
  /* Grundton – Lila */
  --lila2:        oklch(0.80 0.15 300);
  --lila1:        oklch(0.60 0.15 300);
  --lila:         oklch(0.44 0.16 300);
  --lila-darker:  oklch(0.29 0.16 300);
  --lila-darkest: oklch(0.20 0.16 300);

  /* Akzent 1 – Gold */
  --gold2:        oklch(0.95 0.17 50);
  --gold1:        oklch(0.80 0.16 50);
  --gold:         oklch(0.65 0.17 50);
  --gold-darker:  oklch(0.50 0.15 50);


  /* Neutral / Grau */
  --whitesmoke:   oklch(0.97 0 0);
  --grey1:        oklch(0.80 0 0);
  --grey:         oklch(0.65 0 0);
  --grey-darker:  oklch(0.50 0 0);
  --charcoal:     oklch(0.30 0 0);

	--textColor: var(--charcoal);
	--navColor: var(--whitesmoke);
}

body {
	width: calc(100% - 2em);
	max-width: 65em;
	min-height: calc(100vh - 2em);
	margin: 0;
	padding: 1em;
	font-family: Avenir, Arial, sans-serif; 
	/*display: grid;*/
	gap: 0.5em;
}

nav {
	background: linear-gradient(90deg, var(--lila1), var(--lila));
	color: var(--navColor);
}

header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0 0.5em 0.5em;
	border: thin solid;
	padding: 1em;
}

header {
	border-color: var(--grey1);
	background: linear-gradient(90deg, var(--lila1), var(--lila));
	color: var(--navColor);
	text-align: center;
	/* display: grid;
	-- grid-template-columns: 4em 1fr;*/
	gap: 0.5em;
	img {
		width: 2.25em;
		padding-top: 1.25em;
	}
}

nav ul {
	list-style: none;
	margin: 0.5em;
	padding: 0;
}

nav li a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	font-size: 1.5em;
	/* mobil größer */
	
	font-weight: bold;
	padding: 0.2em 1em;
}

@media (max-width < 600px) {
	header,
	nav,
	main,
	article,
	section,
	aside,
	footer {
		font-size: 3em;
	}
}

@media (width > 30em) {
	body {
		/*grid-template-columns: 12em 1fr;*/
	}
	header,
	footer {
		grid-column: 1 / -1;
	}
	nav {
		padding: 0;
		h2 {
			color: transparent;
		}
		li a {
			font-size: 1rem;
			/* jetzt wieder auf Standardschriftgröße */
		}
	}
	@media (width > 65em) {
		main {
			/*display: grid;
			grid-template-columns: 1fr 18em;*/
			: not(aside) {
				grid-column-start: 1;
			}
			aside {
				grid-column-start: 2;
				grid-row-start: 1;
			}
		}
	}
	nav li a:hover,
	nav li a:focus {
		color: gold;
		background: var(--lila1);
	}
	main {
		border-color: var(--gold);
		aside {
			background: var(--mint);
		}
	}
	footer {
		background: var(--gold2);
		border-color: var(--gold-darkest);
	}
	blockquote {
		font: 1.2em/1.4 Georgia, serif;
		font-size: clamp(1em, 4cqi, 2em);
		text-align: center;
		margin: 0;
		h3 {
			font-size: clamp(1.5em, 6cqi, 4em);
			margin: 0;
			word-break: keep-all;
			white-space: normal;
		}
		p {
			font-style: italic;
			margin: 0;
		}
		.content {
			color: steelBlue;
		}
	}
	figure {
		container-type: inline-size;
	}
	figcaption {
		margin-top: 1em;
		font-size: 0.8em;
	}
	.css,
	.html {
		background: var(--lila);
		color: white;
		border-radius: 0 0.2em 0.2em;
		font-size: 1.5rem;
		padding: 0.25em;
	}
	.html {
		background: var(--gold);
	}
	path,
	circle,
	rect,
	line {
		fill: none;
		stroke: black;
		stroke-width: 3;
		stroke-linecap: round;
	}
	#water {
		fill: steelblue;
		stroke: none;
	}