:root {
  color-scheme: light dark;	
  /* 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);
  --gold-darkest:  oklch(0.4 0.15 50);	

  /* Akzent 2 – Mint */
  --mint2:        oklch(0.98 0.14 170);
  --mint1:        oklch(0.90 0.14 170);
  --mint:         oklch(0.80 0.13 170);
  --mint-darker:  oklch(0.60 0.14 170);
  --mint-darkest: oklch(0.40 0.14 170);

  /* 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: light-dark(var(--charcoal), var(--whitesmoke));
	--navColor: var(--whitesmoke);
	--navWidth: 12em;
	--mainWidth: min(48em, calc(100% - var(--navWidth)));
	--headerLineHeight: 3em;	
}

body {
	width: calc(100% - 0em);
	min-height: calc(100vh - 0em);
	margin: 0;
	padding: 0;
	font-family: Avenir, Arial, sans-serif; 
	display: grid;
	color: var(--textColor);
	background-color: light-dark(var(--whitesmoke), var(--charcoal)) ;	
}

header {
	grid-area: head;
	padding: 2em;
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 0.5em;
	
	img {width:5em; }
}

header .titel {
  align-self: center;
  text-align: center;
  font: bold 2em sans-serif;
  color: var(--lila);
  text-decoration: none;    
	width: 10em;
}


nav {
	grid-area: nav;	
	background: linear-gradient(90deg, var(--lila1), var(--lila));
	
	ul {
		list-style: none;
		margin: 0.5em;
		padding: 0;
	}

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

	li a:hover,
	li a:focus{
		color: var(--mint2);
		background: var(--lila1); 
	}	
}






@media (width > 30em) {
  body { 
    grid-template:	". nav head ." min-content
			". nav rule ." var(--headerLineHeight)
                    ". nav main ." auto
                    ". nav foot ." min-content /
			1fr var(--navWidth) var(--mainWidth) 1fr;
    } 
    body::before {
        content: '';
        grid-row: rule;
        grid-column: 1 / 1;
        background: linear-gradient(to right, var(--lila), var(--lila1));
    }
    body::after {
        content: '';
        grid-row: rule;
        grid-column: rule-start / -1;
        background-image: linear-gradient(to right, var(--lila), var(--lila-darker));
   }
	nav {
		padding-top: 10em;
	
		li a {
        font-size: 1rem;  /* jetzt wieder auf Standardschriftgröße */
    }
	}
	main {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		
		:not(aside) {
		grid-column: 1 / -1;
		}
		aside {
		grid-column: span 1;
		}
	}		
}

main {
	grid-area: main;		
	padding: 1em;
}

footer {
	grid-area: foot;		
		padding: 1em;
}
aside {
	background: var(--mint);
	padding: 1em;
		
	h2,h3 {
			 color: var(--lila);
	}
}	

main {
	border-color: var(--gold);
	
	h2,h3 {
		 color: light-dark(var(--lila), var(--lila2)) ;	
	}
	aside {
		background: light-dark(var(--mint), var(--mint-darker)) ;	
	}	
	.warning {
		background: light-dark(var(--gold1), var(--gold-darker)) ;	
		border-color: var(--gold-darkest);
	}
}
blockquote {
  font: 1.2em/1.4 Georgia, serif;
  font-size: clamp(1em, 4cqi, 2em);
  text-align: center;
  margin: 0;
	
	h2,h3 {
  	font-size: clamp(1.5em, 2cqi, 2em);
  	margin: 0;
  	word-break: keep-all;
	  white-space: normal;
	}

	p {
  	font-style: italic;
  	margin: 0;
	}
	.content {
		 color: steelBlue;
	}
}

@media (prefers-color-scheme: dark) {
  a {
    color: skyblue;
  }
  h1,h2,h3 {
    color: var(--lila2);
  } 
	
	aside {
		color: var(--charcoal);
		
		a {
			color: var(--lila);
		}
	}
}

.css,.html {
	background: var(--lila);
	color: white;
	border-radius: 0 0.2em 0.2em;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.1em 0.25em;
}
.html {
	background: var(--gold);
}

address dt.mail {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewport='0 0 100 100'%3E%3Cpath stroke-width='1' fill='black' d='M276.4688 365.0625 L11.5312 365.0625 L11.5312 172.9688 L276.4688 172.9688 L276.4688 365.0625 ZM265.2188 353.5312 L265.2188 194.7656 L211.3594 240.1875 Q208.5469 233.2969 204.8906 227.8125 L255.5156 185.0625 L32.4844 185.0625 L84.7969 229.2188 Q81.1406 234.4219 77.9062 241.1719 L22.7812 194.7656 L22.7812 353.5312 L265.2188 353.5312 ZM209.8125 272.8125 Q209.8125 288.4219 203.7656 300.5156 Q196.1719 315.7031 182.1094 315.7031 Q168.75 315.7031 163.9688 301.9219 Q155.3906 316.8281 137.8125 316.8281 Q125.0156 316.8281 115.5938 311.7656 Q103.9219 305.4375 103.9219 293.7656 Q103.9219 276.0469 125.0156 266.0625 Q137.8125 260.0156 161.5781 258.75 L161.5781 258.3281 Q161.5781 248.4844 156.5156 241.5938 Q150.8906 233.8594 141.4688 233.8594 Q129.6562 233.8594 122.4844 240.6094 Q131.3438 242.4375 131.3438 251.0156 Q131.3438 255.5156 128.1719 258.6094 Q125.0156 261.7031 120.5156 261.7031 Q109.6875 261.7031 109.6875 250.875 Q109.6875 239.4844 120.5156 232.4531 Q129.9375 226.2656 141.8906 226.2656 Q160.0312 226.2656 170.7188 238.0781 Q178.4531 246.6562 178.4531 262.9688 L178.4531 297.8438 Q178.4531 306.7031 184.5 306.7031 Q191.9531 306.7031 196.0312 293.0625 Q198.8438 283.3594 198.8438 273.5156 Q198.8438 247.6406 184.7812 231.6094 Q170.0156 214.875 144.4219 214.875 Q122.2031 214.875 105.3906 232.875 Q88.5938 250.875 88.5938 273.2344 Q88.5938 300.0938 105.3906 316.3438 Q122.2031 332.5781 149.0625 332.5781 Q169.0312 332.5781 194.625 321.0469 Q196.1719 320.3438 197.0156 320.3438 Q202.2188 320.3438 202.2188 325.8281 Q202.2188 328.5 199.4062 330.3281 Q190.8281 336.0938 175.0781 339.75 Q161.0156 342.9844 149.0625 342.9844 Q117.8438 342.9844 98.0156 323.7188 Q78.1875 304.4531 78.1875 273.2344 Q78.1875 246.5156 98.0156 225.5 Q117.8438 204.4688 144.4219 204.4688 Q173.8125 204.4688 192.0938 224.1562 Q209.8125 243.2812 209.8125 272.8125 ZM161.5781 284.625 L161.5781 265.7812 Q146.3906 266.625 135.8438 272.3906 Q122.3438 279.9844 122.3438 293.4844 Q122.3438 300.2344 127.3281 304.875 Q132.3281 309.5156 139.2188 309.5156 Q149.0625 309.5156 155.5312 301.9219 Q161.5781 294.75 161.5781 284.625 Z' stroke='none'/%3E%3C/svg%3E");
}

code {
  font-size: 1rem;
}


article.textbox {
  padding: 0 2em;
}
article.textbox div {
  columns: 2 12em;  
  gap: 2em;
  -webkit-hyphens: auto;
  hyphens: auto;  
}
.textbox p {
  margin-top: 0;
}

#fliesstext figure {
	float: right;
	margin-left: 1em;
}

#fliesstext img {
  width: 10em;
}

#fliesstext figure:nth-of-type(even) {
	float: left;
	margin-right: 1em;
}

#fliesstext figure:nth-child(2n+2) {
	transform:rotate(3deg);
}

#fliesstext figure:nth-child(3n+3) {
	transform:rotate(-3deg);
}