@charset "utf-8";
/* CSS Document */

/* vife.de – Dieter Löffler – Autor | Übersetzer | Redakteur */

/*	FARBEN:
	* Header-Hintergrund: #cccccc
	* LogoROT + HTML-Hintergrund + aktiver Link: rgb(200,0,0) = #e60014
	* Textbox-Hintergrund: #FEFEFE
	* mögliche Schriften für Fließtext: font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
*/

html {
	background: #e60014;
	color: black;
	font-family: 'Courier';
}

body {
	margin: 0 auto;
	font: normal 1em 'Courier';
	background: #F7F4E9;
	max-width: 75rem;
	display: flex;
	min-height: 100vh;
	flex-flow: row wrap;
}



/* ==================  L I N K S  ===================
===================================================== */

a {
	color: black;
	text-decoration: none;
}
a:visited {
	color: #21355A;
}
dd > a:visited {
	color: none;
}
a:hover, 
a:focus {
	color: #e60014;
}

a[aria-current="page"] {
	color: #e60014;
}

a[href^="tel"] { 
	white-space: nowrap; 
}


address {
font-style: normal;
}

/* ===================================================================
=================  F L E X B O X    M O B I L E  =====================
====================================================================== */

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, main, footer {
	padding: .5rem;
	flex: 1 1 100%;
}

/* ===================  HEADER  ===================== */

header {
	padding: 1rem;
	background-color: #ccc;
	border-bottom: 1px solid darkgrey;
	display: flex;
	flex-flow: row wrap;
}

header svg {
	width: 3rem;
	height: auto;
	fill: #e60014;
	stroke-width: .25;
	background: #CCC;
	}
header .homecircle {
	fill: #e60014;
	stroke-width: .25;
	}
header .vifede {
	font-size: 1.3rem;
	font-weight: bold;
	font-family: 'Courier';
	fill: #cccccc;
	}
	
header nav {
	width: 100%;
	margin: -2.5rem 3rem .5rem 3rem;
	padding: 0;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

header nav ul {
	margin: -1rem 0; 
	padding: 0;
	display: flex;
	flex-direction: column;
}
header nav li {
	margin-bottom: .5rem;
	list-style-type: none;
	font-family: 'Courier';
	font-size: 1.2rem;
}

header nav li:last-child {
	margin-bottom: 0;
}

header nav a {
	display: inline-block;
	border-color: transparent;	  
	width: 95%;
	margin: 0;
	text-decoration: none;
	text-align: center;
}

/* =======================  MAIN  ============= =============================================== */

main {
	width: 100%;
	height: auto;
	margin: 0;
	background: #f7f4e9;
	display: flex;
	flex: 1; 
	justify-content: center;
}

main section.overview {
	width: 90%;
	margin-top: .5rem;
	padding: .5rem;
	background-color: #FEFEFE;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	justify-content: center; 
}

main section h1 {
	margin-bottom: 0;
	padding: 0 2rem;
	}

main section ul {
	padding: 1rem 2rem; 
	display: flex;
	flex-direction: column;
}
main section li {
	margin-bottom: 1rem;
	font-size: 1.1rem;
}

main article {
	margin: 0 1rem;
	padding: 1rem;
	background-color: #FEFEFE;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

main nav.pagenav {
	margin: 0 0 3rem 0;
	width: 100%;
	display: block;
}

nav.pagenav > div.backtotoc {
	margin: 0;
	display: inline-block;
	float: left;
}

nav.pagenav > div.pageup {
	margin: 0;
	display: inline-block;
	float: right;
	text-align: right;
}

article p.doc-subtitle {
	color: darkgreen;
}

article p.book-subtitle {
	margin: -1rem 0 2rem 0;
	font-size: 1.2rem;
	font-family: "Gill Sans", sans-serif;
}

article h1 {
	margin-bottom: 2rem;
	font-size: 1.4rem;
	font-family: "Gill Sans", sans-serif;
}

article h2 {
	margin-top: 2rem;
	font-size: 1.2rem;
	font-family: "Gill Sans", sans-serif;
}

article h3 {
	font-size: 1rem;
	font-family: "Gill Sans", sans-serif;
}

article p, li {
	font-size: 1rem;
	font-family: serif;
	line-height: 1.5rem;
}

article p.doc-intro {
	line-height: 1.5rem;
	font-weight: bold;
	font-style: italic;
}

article p.cit {
	padding: 0 1.5rem 0;
}

article p.client {
	margin-bottom: 3rem;
	line-height: 1rem;
	font-size: .9rem;
	font-family: 'Courier';
	border-bottom: 1px solid black;
}

article p.client, p.source span {
	font-weight: bold;
}

article li.texttoc1 {
	margin-top: .5rem;
	list-style-type: none;
	font-size: 1rem;
	font-family: "Gill Sans", sans-serif;
	font-weight: bold;
}
main article li.texttoc2 {
	list-style-type: decimal;
	font-size: .95rem;
	font-family: "Gill Sans", sans-serif;
}

article div.box {
	margin: 0 1rem 2rem 1rem;
	padding: 1rem;
	background-color: lightgrey;
}

article div.box h2 {
	margin: 0;
}
article div.box p:last-child {
	margin-bottom: 0rem;
}


main article picture {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

main article .imgcaption {
	font-size: .8rem;
	font-family: "Gill Sans", sans-serif;
	text-align: center;
}


main > svg {
	width: 80%;
	height: auto;
	padding: 2;
}
main #backgroundcircle {
	fill: #E60014;
	stroke-width: .25; 
}
main #dl {
	font-size: .69em;
	font-family: 'Courier';
	fill: #f2f2f2;
}
main #author, #translator, #editor {
	font-size: .4em;
	font-family: 'Courier';
	fill: #cccccc;
}
main #translator-lang {
	font-size: .3em;
	font-family: 'Courier';
	fill: #cccccc;
}


dl.grid { 
	background-color: #FEFEFE;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	display: grid; 
	grid-template-columns: 1fr 60%; 
}
dt {
	margin: 2rem 0 .5rem 1rem;
	font-weight: bold;
}
dd { 
	margin: 0 0 0 1rem; 
	padding-left: 1rem; 
}
dd span {
	float: right;
}

/* ================  FOOTER  ================
============================================= */

footer {
	width: 100%;
	height: auto;
	font-size: .8rem;
	font-weight: bold;
	background: #f7f4e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

footer ul {
	list-style-type: none;
}

footer li {
	margin: 0 3em .5em 0;
	font-family: 'Courier';
	text-align: center;
	list-style-type: none;
}

footer a {
	display: inline-block;
	border-color: transparent;	  
	width: 95%;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
}


/* ==================================================================
   ===============  Smart Phones und Tablets  =======================
   ================  mit mittlerer Auflösung  =======================
   ================================================================== */

@media all and (min-width: 35em) { /* === Klammer AUF für "@media all and (min-width: 35em)" ======= */

header {
	margin: 0;
	height: 3rem;
	display: flex;
	flex-flow: row;
}

header nav {
	margin: .5rem 3rem 0 0;
	padding: 0;
	height: 2rem;
	background-color: transparent;
	display: flex;
	flex-direction: row;
	justify-content: center;
/* 	border: 1px solid lightgreen; */
}

header nav ul {
	margin: 0;
	display: flex;
	justify-content: center;
	flex-direction: row;
/*	border: 1px solid black; */
}

header nav li {
	margin: 0 1.5rem;
	flex: 1 1 0%;
/*	border: 2px solid pink; */
}


main {
	padding: 4rem 0 3rem 0;
}

main section.overview {
	width: 70%;
	margin-top: .5rem;
	padding: 1rem;
	background-color: #FEFEFE;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

main article {
	width: 70%;
	margin-top: 2rem;
	padding: 3rem;
	background-color: #FEFEFE;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

main article div.backtotoc {
	margin: -2rem 0 1.5rem -1.6rem;
}

main article p {
	font-size: 1rem;
	font-family: serif;
}

main article p:last-of-type {
	margin-bottom: 3rem;
}

main article img {
	display: block;;
}



main > svg {
	width: 50%;
	max-width: 30rem;
	height: auto;
	background: #f7f4e9;
	padding: 2;
}

footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
}




} /* === Schliessklammer für @media all and (min-width: 35em) ======= */ 
/*   ================================================================ */