/* _formate.css - Copyright Mario Haßler */
/* Stand: 07.10.2025 */

/* latin */
@font-face {
	font-family: 'Fuzzy Bubbles';
	font-style: normal;
	font-weight: 400;
	src: url(fuzzy_bubbles_lat_400.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Fuzzy Bubbles';
	font-style: normal;
	font-weight: 400;
	src: url(fuzzy_bubbles_ext_400.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Fuzzy Bubbles';
	font-style: normal;
	font-weight: 700;
	src: url(fuzzy_bubbles_lat_700.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Fuzzy Bubbles';
	font-style: normal;
	font-weight: 700;
	src: url(fuzzy_bubbles_ext_700.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: 'Asap';
	font-style: normal;
	font-weight: 400;
	src: url(asap-v34-latin-regular.woff2) format("woff2");
}

html {
	height: 100%;
	font-size: calc(0.65em + 0.44vw);
}

body {
	background: #004 url("poeppel.jpg") fixed;
	background-size: cover;
	color: #000;
	display: grid;
	grid-gap: 3rem;
	grid-auto-flow: row;
	grid-template-rows: auto auto auto auto 3.5rem auto;
	min-height: 100%;
	margin: 0 auto;
	min-width: 20rem;
	max-width: 84rem;
	font-family: 'Fuzzy Bubbles', cursive, Verdana, Arial, sans-serif;
	font-size: 1.3rem;
	padding: 0;
}

body>* {
	margin: 0 1.5rem;
}

header {
	grid-row: 1;
	margin-top: 2rem;
	display: grid;
	grid-gap: 3rem;
	grid-auto-flow: row;
}

header > div {
	border-radius: 1rem;
	padding: 1.2rem 2rem 1.8rem 2rem;
}

header > div:last-child {
	background-color: #00C;
	color: #FAFFD0;
	font-size: 250%;
	font-weight: bold;
	height: 7.3rem;
	position: relative;
	display: flex;
	align-items: center;
}

header > div:last-child > div {
	width: 100%;
	line-height: 90%;
}

header > div:last-child > a {
	position: absolute;
	right: 2rem;
	top: 0.5rem;
	font-size: 25%;
	color: inherit !important;
}

header > div:last-child span {
	position: absolute;
	right: 2rem;
	padding-top: 3px;
	background-color: #ACD;
	font-weight: normal;
	border: 2px solid #ACD;
	border-radius: 0.2rem;
	bottom: 0.5rem;
	font-size: 1rem;
	color: #000;
}

main {
	background-color: #FFE;
	border-radius: 1rem;
	grid-row: 2;
	padding: 1rem 2rem 2rem 2rem;
}

main>div {
	margin-top: 1rem;
	display: grid;
	gap: 1.5em;
	grid-template-columns: repeat(auto-fill, minmax(17.5em, 1fr));
}

main>div>div {
	padding: 0.5rem 1.5rem;
	border-radius: 1rem;
	background-color: #EFB;
	box-shadow: 3px 4px 10px 5px #CDA;
}

main>div>div h2 {
	color: #C30;
}

article {
	background-color: #FFE;
	border-radius: 1rem;
	line-height: 1.5em;
	padding: 1rem 2rem;
}

h2 {
	color: #00C;
}


footer {
	background-color: #ACD;
	border-radius: 1rem;
	color: #007;
	font-size: 60%;
	grid-row: 5;
	padding: 0.5rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

aside {
	margin-top: -1.5rem;
	color: #ACD;
	font-size: 60%;
	grid-row: 6;
	padding: 0;
	text-align: center;
}

a	{ text-decoration: none; }

.kleiner {
	font-size: 75%;
}


@media screen, handheld, projection {

	a:link, a:visited	{ color: #906; }
	
	a:hover	{ text-decoration: underline; }

	h1	{ color:#00D; }

	H1 A:link,
	H1 A:visited {
		color:#00D;
		text-decoration:none;
	}

	.bunt A, .bunt span { background-color: EEC; box-shadow: inset 0 0 2px #CCA; padding: 0 0.5ex; border-radius: 0.5ex; }
	.bunt A:nth-child(6n),   .bunt span:nth-child(6n)   { color:#22D; }
	.bunt A:nth-child(6n+1), .bunt span:nth-child(6n+1) { color:#C02; }
	.bunt A:nth-child(6n+2), .bunt span:nth-child(6n+2) { color:#07A; }
	.bunt A:nth-child(6n+3), .bunt span:nth-child(6n+3) { color:#B70; }
	.bunt A:nth-child(6n+4), .bunt span:nth-child(6n+4) { color:#92B; }
	.bunt A:nth-child(6n+5), .bunt span:nth-child(6n+5) { color:#271; }
}

@media print {

}



HR {
	border:none;
	border-top:3px dotted #00D;
}

LI {
	margin:1.0ex 0;
}