@charset "utf-8";

/* --------------------
Schriften
-------------------- */

@font-face {
	font-family:'Roboto';
	src: 
		local('Roboto'),          // Erst nachsehen, ob die Schrift 
		local('Roboto-Regular'),  // beim Besucher schon installiert ist
		url(fonts/roboto-v18-latin-regular.woff2) format('woff2'), // Wenn nicht, wird die Schrift vom Webserver geladen
		url(fonts/roboto-v18-latin-regular.woff) format('woff');   // Am Ende das Schlusslicht für IE11
	font-style: normal;
	font-weight: normal;
}

/**
 * @license
 * MyFonts Webfont Build ID 3961203, 2020-10-15T17:16:49-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: TiredOfCourier-Regular by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-BoldItalic by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier-bold-italic/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-Italic by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier-italic/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-ThinItalic by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier-thin-italic/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-Thin by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier-thin/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-Bold by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/tired-of-courier-bold/
 * Copyright: Copyright (c) 1992, 1994, 2010, 2019 by Robert Schenk. All rights reserved.
 * 
 * Webfont: TiredOfCourier-SemiBoldItalic by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/semibold-italic/
 * Copyright: Copyright (c) 2019 by IngrimayneType. All rights reserved.
 * 
 * Webfont: TiredOfCourier-SemiBold by Ingrimayne Type
 * URL: https://www.myfonts.com/fonts/ingrimayne/tiredofcourier/semibold/
 * Copyright: Copyright (c) 2019 by IngrimayneType. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3c7173");
  
@font-face {
	font-family: 'TiredOfCourier-Italic';
	src: url('webfonts/TiredOfCourier-Italic/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-Italic/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-ThinItalic';
	src: url('webfonts/TiredOfCourier-ThinItalic/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-ThinItalic/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-BoldItalic';
	src: url('webfonts/TiredOfCourier-BoldItalic/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-BoldItalic/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-Thin';
	src: url('webfonts/TiredOfCourier-Thin/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-Thin/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-Regular';
	src: url('webfonts/TiredOfCourier-Regular/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-Regular/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-SemiBold';
	src: url('webfonts/TiredOfCourier-SemiBold/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-SemiBold/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-SemiBoldItalic';
	src: url('webfonts/TiredOfCourier-SemiBoldItalic/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-SemiBoldItalic/font.woff') format('woff');
}
@font-face {
	font-family: 'TiredOfCourier-Bold';
	src: url('webfonts/TiredOfCourier-Bold/font.woff2') format('woff2'), url('webfonts/TiredOfCourier-Bold/font.woff') format('woff');
}


/* --------------------
Farben
-------------------- */

:root {
	--blau: #55ffff;
	--braun: #aa5500;
	--gruen: #00aa00;
	--weiss: #ffffff;
}

/* --------------------
Grundlegende Stile
-------------------- */

body {
	background-color: var(--blau);
	color: var(--braun);
	font-family: 'TiredOfCourier-Regular';
	/* font-size: 16px; */
	/* font-size: 1rem; */
	/* font-size: 18px; */
	/* font-size: 1.125rem; */
	/* font-size: 19px; */
	/* font-size: 1.188rem; */
	/* font-size: 20px; */
	/* font-size: 1.25rem; */
	/* font-size: 21px; */
	/* font-size: 1.3125rem; */
	/* font-size: 22px; */
	font-size: 1.375rem;
	line-height: 1.4;
	margin: 0;
	padding: 0;		
}
.wrapper {
	background-color: var(--weiss);
	box-sizing: border-box;
	margin: auto;
	max-width: 960px;
	padding: 16px;
	width: 100
}
div {
	box-sizing: border-box;
}
img {
	height: auto;
	max-width: 100
}

/* --------------------
HTML5-Elemente
-------------------- */

article, aside, figure, figcaption, footer, header, hgroup,
main, menu, nav, section, summary, time {
	display: block;
}

/* --------------------
Flexbox
-------------------- */

.container {
	/* siehe auch 
	https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
	https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/
	*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* flex-direction: column; */
	/* justify-content: center; */
	/* justify-content: space-around; */
	/* justify-content: space-between; */
	justify-content: space-evenly;
}
.item {
	/* max-width: 33.34 */  /* Sonst ist die dritte Box zu schmal und die Zeilen passen nicht. */
	flex-basis: 480px;  /* vorgegebene, aber durch flex-grow und flex-shrink beeinflussbare Breite */
	flex-basis: 50  /* zweispaltiges Layout */
	flex-grow: 1;
	flex-shrink: 1;
	/* flex: 1 1 480px; */ /* = Kurzform */
}
.item {
	flex-basis: 45%;
	border: 2px solid #000;
	margin: 0 auto;
	text-align: center;
}
.item p {
	margin-top: 0;
	padding-top: 32px;
}
.item p:last-of-type {
	padding-top: 0;
}

/* --------------------
Typographie
-------------------- */

h1, h2, h3, h4, h5, h6 {
	color: var(--gruen);
	font-family: 'TiredOfCourier-Bold';
	font-weight: normal;
}
b,
strong,
.bold,
.fett {
	font-family: 'TiredOfCourier-Bold', monospace;
	font-weight: normal;
}
i,
em,
.italic,
.kursiv {
	font-family: 'TiredOfCourier-Italic', monospace;
	font-style: normal;
}

/* --------------------
Hyperlinks
-------------------- */

a {
	color: var(--braun);
	cursor: pointer;
	text-decoration: none;
}
a:hover {
	background-color: var(--blau);
}
.item a {
	display: block;
}
nav li {
	display: inline-block;
	list-style-type: none;
	margin-right: 8px;
}
nav li:last-of-type {
	margin-right: 0;
}

/* --------------------
Bereiche
-------------------- */

/* Fußbereich */
footer { 
	clear: both;
	border-top: solid 1px var(--braun);
	margin-top: 24px;
	padding-bottom: 16px;
	text-align: center;
}