/*  Grundeinstellungen  */

body    		{ margin:0 1em; padding:1em 0; }
body    		{ font-family:verdana, tahoma, arial, roboto; }
body    		{ line-height:1.4em; }

@media print	{ body { background-color:none; } }

main			{ max-width:1200px; margin:0 auto; border-radius:2em; }
main			{ border-width:1px; border-style:solid; }

article			{ background-color:#fff; column-count:auto; }
article			{ margin-top:1px; }
article			{ padding:4em 3em; column-gap:3em; column-width:14em; }
article 		{ orphans:2; widows:2; }
section			{ break-inside:avoid; }


/*  Schriftgrößen mit variabler Einstellung  */

body       	 	{ font-size: clamp(0.6875rem, 0.4848rem + 0.8537vw, 1.125rem); }
h2         	 	{ font-size:1.9em; }
h3          	{ font-size:1.5em; }
h4          	{ font-size:1.0em; }
header, nav 	{ font-size:1.1em; }
.titel div		{ font-size:3.0em; }
.titel span		{ font-size:1.8em; }
figcaption		{ font-size:0.6em; }
.codex			{ font-size:0.8em; }
.data			{ font-size:0.9em; }


/*  Überschriften  */

h2, h3, h4  { line-height:1.4em; }
h2, h3      { column-span:all; font-weight:normal; }
h2          { margin:0 0 1em 0; }
h3          { margin:2em 0 1em 0; }
h4          { margin:0 0 1em 0; font-weight:bold; }


/*  CSS-Angaben für unterschiedliche Medien  */

header, footer, nav	{ padding:0 2em; }
img { max-width:100%; }


/*  Text, Absatz und Listen  */

p, table		{ text-align:justify; hyphens:auto; }
p, ol, ul		{ margin:0 0 1em 0; }

ul				{ padding-left:1.1em; hyphens:auto; }
ol				{ padding-left:2.3em; margin-left:0; }
li				{ margin:0 0 0.4em 0; break-inside:avoid; }
ol li::marker	{ content:counter(list-item)".  " }
ol li::marker	{ font-weight:bold; }

.wide li 	{ margin-bottom:1.0em; text-align:left; }
.zutat		{ break-inside:avoid; }
.zutat li	{ margin:0 0 0.2em 0; }
.tip 		{ font-weight:bold; }

figure		{ width:100%; margin:0 0 1em 0; position:relative; }
figcaption	{ position:absolute; bottom:0.5em; right:0.5em; }
.figw		{ color:#fff; }
.figb		{ color:#000; }

header		{ border-radius:1.5em 1.5em 0 0; }
header div	{ background-repeat:no-repeat; background-position:right center; background-size:auto 1.8em; }
header div	{ text-align:right; padding:0 3em; }
footer		{ line-height:3.0em; border-radius:0 0 1.5em 1.5em; }
footer a	{ line-height:3.0em; display:inline-block; padding:0 1.0em; color:#FFF; text-decoration:none; }

header, footer, nav, nav a { color:#fff; }
header, nav ul li	{ line-height:2.5em; }


/*  CSS-Angaben für den Navigatitonsbereich  */

nav							{ border-top:1px solid #fff; }

nav ul 						{ list-style:none; padding-left:0; margin:0; }
nav a 						{ padding:0 0.5em; }
nav a 						{ text-decoration:none; display:block; }

nav li						{ margin:0; }
nav li li					{ border-top:1px solid #fff; }

nav ul						{ position:relative; z-index:1; }
nav ul ul					{ position:absolute; }
nav ul ul ul				{ position:relative; }

nav ul li					{ width:6.0em; }
nav ul ul li				{ width:13.0em; }
nav ul ul ul li				{ width:13.0em; }

nav ul li					{ display:inline-block; position:relative; }
nav ul ul li				{ display:list-item; position:relative; }
nav ul ul ul li				{ display:list-item; position:relative; }

nav ul ul					{ display:none; }
nav ul ul ul				{ display:block; }

nav ul li:hover > ul		{ display:inherit; }
nav li > a:after			{ content:''; }
nav li > a:only-child:after	{ content:''; }


/*  CSS-Angaben für die Titel-Bilder  */

.titel				{ margin:0; background-repeat:no-repeat; border-width:0; border-style:none; }
.titel table		{ table-layout:fixed; width:100%; border-collapse:collapse; background-size:contain; position:relative; }
.titel td			{ padding:2em; }
.titel figcaption	{ bottom:0; }
.titel div			{ line-height:1.2em; }
.titel span			{ line-height:1.4em; }


/*  CSS-Angaben für Daten-Tabellen  */

.data				{ line-height:1.2em; overflow-x:auto; }
.data				{ table-layout:auto; width:auto; border-collapse:collapse; margin-bottom:2em }
.data .name			{ text-align:left; }
.data .text			{ text-align:left; vertical-align:top; }
.data td, .data th	{ text-align:right; padding:0.3em 0.6em; }
.data td, .data th	{ white-space:wrap; border-width:0 0 1px 0; border-style:solid; }


/*  CSS-Angaben für Mittelinien  */

hr          { column-span:all; margin:4em 0 2em 0; border-width:0px; }
hr          { height:26px; background-image:url(../7_system/hr.png); background-repeat:no-repeat; background-position:center; }


/*  CSS-Angaben für die Fotogalerie  */

.galery { column-span:all; max-width:648px; margin-left:auto; margin-right:auto; }
.thumbnail { padding:0 3px; }
.thumbnail img { width:20%; margin:0; padding:0; float:left; }
.fullimage { width:100%; height:405px; border:0; margin:1.4em 0; }


/*  CSS-Angaben zur Sitemap  */

.chapter { width:auto; }
.chapter { break-inside:avoid-column; padding-left:1.2em;  }
.chapter li { list-style:none; margin:0; padding:0; line-height:1.3em; }	
.chapter li li { list-style:square; }
.chapter li li li { list-style:square; }
.chapter a { display:block; padding:0.5em 0.5em; text-decoration:none; border-bottom:2px solid #fff; }
.chapter ul { margin-bottom:0; }


/*  CSS-Angaben für PRE-Formatierungen  */

.codex		{ text-align:left; column-span:all; table-layout:auto; width:100%; border-collapse:collapse; margin:1.0em 0 1.5em 0; hyphens:auto; }
.codex th	{ font-weight:normal; padding:0.2em 0.5em; }
.codex td	{ vertical-align:top; padding:0.5em; border-width:1px; border-style:solid; }
.codex pre	{ border-style:none; padding:0; margin:0; white-space:pre-wrap; line-height:1.2em; background-color:#fff; }
.codex .one	{ width:25%; }


/*  CSS-Angaben für die Tabelle zum "goldenen Schnitt"  */

.goldenerschnitt { table-layout:fixed; border-collapse:collapse; width:100%; border:1px solid #fff; break-inside:avoid; }
.goldenerschnitt { margin:1em 0 1.0em 0; }
.goldenerschnitt th, .goldenerschnitt td { text-align:center; vertical-align:middle; border:1px dotted #fff; }

.GridSystem { overflow-x: }
.GridSystem table { column-span:all; width:100%; border-collapse:separate; border-spacing:0.5em; margin-top:2em; }
.GridSystem td { border:1px solid; text-align:center; vertical-align:middle; background-color:#f7dbbf; }


/*  CSS-Angaben für den Ausdruck  */

@media print { 
body { margin:0; padding:0; }
body { background-color:none; }
header, nav, footer, .titel { display:none; } 
figure { max-width:25%; }
article { font-size:14px; page-break-after:always; border-style:none; } 
article	{ column-count:auto; column-gap:4em; column-width:16em; }
.data { break-inside:auto; }
img { display:none; }
}