:root {   /* Farben */
	--link:  #2372e0;/*#21759b; */ 
	--text: #404040;
	--accent: #2372e0;
	--line: #d8d8d8; /* Balken oben und unten */
}
@font-face {font-family: "Lora"; font-style: normal; font-weight: 400; src: url('medien/Lora-Regular.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: normal; font-weight: 400; src: url('medien/latolatin-regular.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: italic; font-weight: 400; src: url('medien/latolatin-italic.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: normal; font-weight: 500; src: url('medien/latolatin-medium.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: italic; font-weight: 500; src: url('medien/latolatin-mediumitalic.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: normal; font-weight: 600; src: url('medien/latolatin-semibold.woff2') format('woff2');}
@font-face {font-family: "Lato"; font-style: normal; font-weight: 700; src: url('medien/latolatin-bold.woff2') format('woff2');}

body {
	margin: 0;
	padding: 10px;
	font: 16px/1.45 "Lato";
}

.intro {width:100%;padding-top: 10px;}

h1 {font-family:"Lora"; font-weight:normal; color:var(--accent);}
h2 {font-family:"Lora"; font-weight:normal; color:var(--accent);}
h3 {font-family:"Lora"; font-weight:normal; color:var(--accent);}

a {color: var(--link); text-decoration:none;}
a:hover {font-weight:bold;}

header {background-color: var(--line); }
.stempel {display:block; width:10em; padding:0.3em;}
footer {height:40px; margin-top:25px; background-color:var(--line);}

nav {background: var(--line);}
nav > ul {display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
nav a {display:block; padding:10px 16px; /*color:#fff; font-weight:bold;*/}
nav a:hover, nav a.current {background:var(--accent); color:#fff; font-weight:normal/*bold*/;}

.schaukasten {display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px; background:var(--line);}
.schaukasten-spalte {display:flex; flex-direction:column; gap:10px;}
.schaukasten-spalte > article {flex:1 1 auto; padding:10px; background:#fff;}
.mit-bild {display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mit-bild img {width:10em; max-width:45%; height:auto; object-fit:contain; }
@media (max-width:500px) {.schaukasten {grid-template-columns:1fr;}}


/*
.schaukasten-aussen {border-collapse:separate; border-spacing:10px; background:var(--line);}
.schaukasten-innen {border-collapse:separate; border-spacing:0}
.schaukasten-innen td {background:#fff; padding: 4px 7px;}
.schaukasten-innen tr + tr > td {border-top:10px solid var(--line);}
.schaukasten-innen td + td {border-left:10px solid var(--line);}
.schaubild > img {width:10em}

*/

/* altes styles.css
:root {
	--link: #21759b;
	--text: #404040;
	--accent: #2372e0;
	--line: #e5e5e5;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 20px 10px;
	background: #f2f2f2;
	color: var(--text);
	font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--text); text-decoration: underline; }

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

.site {
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(100, 100, 100, .3);
}

.site-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.logo img { display: block; max-height: 110px; width: auto; }
.site-title { margin: 0; font-size: 28px; font-weight: bold; line-height: 1.2; }
.site-title a { color: var(--text); }
.site-title a:hover { color: var(--link); text-decoration: none; }
.site-description { margin: 4px 0 0; font-style: italic; line-height: 1.2; }

.main-nav { background: var(--text); }
.main-nav ul { margin: 0; padding: 0; list-style: none; }
.main-nav > ul { display: flex; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 10px 16px; color: #fff; }
.main-nav a:hover, .main-nav a.current { background: var(--accent); text-decoration: none; }
.main-nav li ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 10;
	min-width: 200px;
	background: var(--text);
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul { display: block; }

.nav-toggle, .nav-button { display: none; }

.banner { display: block; width: 100%; }

main { padding: 20px 30px 30px; }
main h1 { font-size: 30px; margin: 10px 0 20px; line-height: 1.2; }
main h2 { font-size: 24px; line-height: 1.25; }
main h3 { font-size: 20px; }
main article + article { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.center { text-align: center; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 20px 10px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
.date { color: #777; margin-top: -10px; }
.toc { columns: 2; }
figure { margin: 1em 0; }
iframe { width: 100%; max-width: 800px; height: 600px; border: 1px solid #777; }
object { width: 100%; height: 800px; }
table { border-collapse: collapse; }
td, th { border: 1px solid var(--line); padding: 4px 8px; }

.site-footer { padding: 15px 30px; border-top: 1px solid var(--line); font-size: 14px; }
.site-footer p { margin: 0; }

@media (max-width: 767px) {
	.site-header { flex-direction: column; text-align: center; }
	.site-title { font-size: 22px; }
	.nav-button { display: block; padding: 10px 16px; color: #fff; background: var(--text); cursor: pointer; }
	.main-nav { display: none; }
	.nav-toggle:checked ~ .main-nav { display: block; }
	.main-nav > ul { display: block; }
	.main-nav li ul { display: block; position: static; padding-left: 16px; }
	main { padding: 15px; }
	.toc { columns: 1; }
	.alignleft, .alignright { float: none; margin: 0 0 10px; }
}

*/