/* open-sans-regular - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* open-sans-italic - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('fonts/open-sans-v15-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v15-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

/* boogaloo-regular - latin */
@font-face {
  font-family: 'Boogaloo';
  font-style: normal;
  font-weight: 400;
  src: local('Boogaloo Regular'), local('Boogaloo-Regular'),
       url('fonts/boogaloo-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/boogaloo-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: swap;
}

html {
	--hintergrundfarbe:#e1eaec;
	--hintergrundtextfarbe:#3b4a52;
	--textfarbe:#333333;
	--mainhintergrundfarbe:#fdfdfd;
	--mainlinkfarbe:#e52c2c;
	--mainlinkhoverfarbe:#b22222;
	--schattenfarbe: rgba(0,0,0,0.2);
	--schattenfarbe2: rgba(0,0,0,0.35);
	--schattenfarbe3: rgba(0,0,0,0.7);
	font-family:"Open Sans", sans-serif;
	font-size:16px;
	line-height:1.4em;
	scroll-behavior: smooth;
}

body {
	width:clamp(320px, 100%, 50rem);
	padding:0px;
	margin:0px auto;
	background-color:#ececec;
	background-color:var(--hintergrundfarbe);
	color:#000;
	color:var(--textfarbe);
}

h1,h2,h3,.headerfont {
	line-height:1.2em;
	font-family:'Boogaloo',sans-serif;
}

h1 {
	text-align:center;
	font-size:2em;
	font-weight:normal;
	margin-bottom:40px;
}

h2 {
	text-align:center;
	font-size:1.5em;
	font-weight:normal;
	margin-top:2em;
	margin-bottom:15px;
}

h3 {
	text-align:left;
	font-size:1.2em;
	font-weight:normal;
	margin-top:2em;
	margin-bottom:5px;
}

.headerfont {
	font-size: 2em;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	border-style:none;
}

q {
  quotes: "„" "”" "‚" "’";
}

.block,.fragenblock {
	text-align:justify;
}

.links {
	text-align:left;
}

.mitte {
	text-align:center;
}

.rechts,.oben {
	text-align:right;
}

a,a:link,a:visited,a:active {
        color:#E52C2C;
        color:var(--mainlinkfarbe);
        text-decoration:none;
		transition: color 0.5s ease;
}

a:hover {
        color:firebrick;
        color:var(--mainlinkhoverfarbe);
        text-decoration:underline;
}

.klein {
	font-size:0.8em;
}

.sehrklein {
	font-size:0.6em;
}

.kursiv {
	font-style:italic;
}

.fett {
	font-weight:bold;
}

.normalfont {
	font-size:1em;
}

.unterstrichen {
	text-decoration:underline;
}

.durchgestrichen {
	text-decoration:line-through;
}

.rot {
	color:red;
}

.gruen {
	color:green;
}

.grau {
	color:gray;
}

.gold {
	color:gold;
}

.nobreak {
	white-space: nowrap;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	border-style:none;
}

hr {
	border:0;
	border-top:1px dashed #ccc; 
	height:1px; 
}

header {
	box-sizing:border-box;
	width:100%;
	padding:10px;
	border-top:4px solid firebrick;
	box-shadow:0 4px 6px var(--schattenfarbe2);
	background:radial-gradient(circle at 60px 60px, #f2f6fa, #a5c6da);
	display:flex;
	flex-flow:row nowrap;
	justify-content:flex-start;
	align-items:center;
	gap: 20px;
}

.mainlogo {
	padding:0px;
	margin:5px;
	width:120px;
	flex:0 0 120px;
}

main {
	box-sizing:border-box;
	width:100%;
	margin:10px 0px;
	padding:10px 40px;
	border:1px solid #ccc;
	background-color:#fff;
	background-color:var(--mainhintergrundfarbe);
	color:#000;
	color:var(--textfarbe);
	box-shadow:0 4px 6px var(--schattenfarbe2);
}

main p {
	text-align:justify;
}

.announcement {
	width:100%;
	max-width:100%;
	background-color:#fbe9e9;
	color:firebrick;
	padding:.7em;
	margin-top:1em;
	box-sizing:border-box;
	text-align:left;
	font-size:0.8rem;
	border-left:5px solid currentcolor;
	letter-spacing:.1em;
}

.twitterwidget {
	width:clamp(290px, 75%, 800px);
	margin:30px auto;
}

footer {
	margin:20px 0px 20px 0px;
	padding:10px;
	text-align:center;
	font-size:smaller;
	color:#555;
	color:var(--hintergrundtextfarbe);
}