/*  Universalselektor*/
* {
/*  Setzt alle Außen- und Innenabstände auf Null:*/
    padding: 0px;
	margin: 0px;
/*  Ermöglicht einfache Verwendung von rem; z.B. font-size: 2rem; = 20px (2-faches)*/
    font-size: 10px;
/*  Setzt die Boxbreite auf den eingestellten Wert; inklusive padding, margin? und border:*/
    box-sizing: border-box;
/*	border: 1px solid grey;*/
}

html {
	background-color: rgba(0,0,0,0.1);
/*    border: 1px dashed black*/
}

body {
	font-family: Open Sans, sans-serif;
    position: static;
    display: grid;
/*    grid-template-columns: 100%;*/
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

/*Erzeugt ein langsameres Scrollen "Smoothen" - ist allerdings bei Chrome sehr langsam bei langen Seiten.*/
html, body{scroll-behavior: smooth;}
@media (min-height: 900px){
    html, body{scroll-behavior: smooth;}
}

html, body, main {
    width: 100%;
    height: 100%;
}

@font-face {
	font-family: test;
	src:url(fonts/verdana.eot);
	src:local('Ø'),
	url(fonts/verdana.woff) format('woff'),
	url(fonts/verdana.ttf) format('truetype'),
	url(fonts/verdana.svg) format('svg');
}

a {
	font: normal normal 900 1.6rem/normal Open Sans, sans-serif;
	color: rgba(50,125,255,1);
	text-decoration: none;
    border-bottom: 0.1rem dashed rgba(0,0,0,0.4);
}

div > a{border-bottom: 0;}

img{border:0}

code {
	font: normal normal 500 1.6rem/2.2rem Roboto Mono, monospace;
}

.codebox {
	padding: 1.6rem;
	background-color: rgba(0,0,0,0.2);
    margin: 1rem 0 1rem 0;
}

/*derzeit nicht in Verwendung!*/
.zentriert {
    height: 100px;
	height: 10em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,1);
}

blockquote {
	font-style: italic;
	margin: 0 0 1rem 0;
}

q {font-size: 1.6rem;}

ol {margin-left: 2rem;}

ul {
	list-style-type: disc;					
	margin-left: 2rem;
}

ul li {
        line-height: normal;
        margin-bottom: 1rem;
}

li {font-size: 1.6rem;}

/*Überschriften*/

h1 {
    text-transform: uppercase;
	font-size: 2.4rem;
}
h2 {font-size: 2.2rem;}

h3,
h4,
.h4-li{
	font-size: 2.0rem;
    color: rgba(65,105,225,1);
    margin: 2rem 0 1rem 0;
}

h1,
h2 {
    color: rgba(255,255,255,1);
	padding: 1.6rem;
	background-color: rgba(65,105,225,1);
}

h4,
.h4-li{
    font-size: 1.8rem;
    font-weight: 900;
}

.h4-li > p,
.h4-li > ul{
    font: normal normal normal 1.6rem/normal Open Sans, sans-serif;
    color: rgba(0,0,0,0.8);
}
    
/*Artikel und Sektionen*/
article {
	background-color: rgba(255,255,255,1);
    border-radius: 0.9rem;
    box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.3);
    margin: 2rem 0 2rem 0;
}

section{
/*    border: 1px solid orange;*/
}

article, section {
/* Gibt an, was mit dem Inhalt passieren soll, wenn der Anzeigeplatz nicht ausreicht.*/
	overflow: auto;
}

.inhalt {
/*    color: rgba(51,51,51,1);*/
	padding: 1.6rem;
}

div {overflow: hidden;}

dd {
	font-size: 1.6rem;
	margin-left: 1.6rem;
}

p {
	font-size: 1.6rem;
	padding: 0 0 0.8rem 0;
	overflow: hidden;
}

/*HEADER*/
header {
/*  Großbuchstaben*/
    text-transform: uppercase;
	box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.3);

/*    Fallback für IE 9 und älter*/
/*    background-color: #ffffff;*/

    background-image: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(0,0,0,0.1) 100%);
/*    Behält den Header an oberster (je höher die Zahl) Ebene, damit nichts über ihn drüber scrollen kann.*/
    z-index: 3;
/*    Anordnung am grid-Raster*/
    grid-area: header;
/*    margin-bottom: 1px;*/
}

header a, #nav {
    font-family: Roboto, sans-serif;
	font-size: 2rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    border: 0;
    transition: all 300ms;}
header a:hover, a#nav:hover {opacity: 0.5;}

/*HeRoKe-Logo*/
#logo {
    text-transform: none;
    font-variant: small-caps;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 1rem;
    padding: 0.5rem;
}

/*NAVIGATION - Mobile Device Menü - "mobile first"*/
nav {
/*    Macht aus dem Element einen Container mit Flex-Box-Eigenschaften.*/
    display: flex;
/*    Verteilt die Boxen links mittig und rechts.*/
    justify-content: space-around;
/*    Lässt für die Elemente oben und unten den gleichen Abstand.*/
    align-items: center;
    padding: 20px 20px;
/*    border: 1px solid red;*/
}
nav a {display: none;}

#logo, #mini-nav, .scrollicon {display: block;}

/*Auf Extranavigationsseite nav.php für kleine Smart Devices*/
#nav {
    display: block;
	background-color: rgba(255,255,255,1);
    font-size: 3rem;
}
a#nav {
/*    Inhalte rutschen nicht über das Elternelement hinaus*/
    overflow: hidden;
    border-bottom: 1px solid gray;
}

/*Home-Butten Häuschenbild*/
nav img {
/* 	height: 45px;*/
    height: 3.5rem;
/*zentriert das Icon/Bild vertikal im a-Tag, der im li bzw. in der ul und im nav ist*/
 	vertical-align: middle;
 }

/*=======================================================================*/
/*für größere Endgeräte wie PC usw. - ansonsten "mobile first"!*/
@media only screen and (min-width: 1050px) {

#mini-nav {display: none;}
nav a {display: block}
    
#nav {
    font-size: 2rem;
    display: flex;
    justify-content: space-around;
}
a#nav {
    margin-right: 1rem;
    border: none;
    }

nav img {
 	height: 24px;
    height: 2.4rem;
/*  zentriert das Icon/Bild im a-Tag, der im li bzw. in der ul und im nav ist*/
/* 	vertical-align: middle;*/
 }
    
#img01 {float: left;}

}
/*==================================================================*/

/*Der "Nach oben" Button:*/
.scrollicon {
	text-decoration: none;
	width:35px;
	height:35px;
	background:rgba(200,200,200,0.7);
	border-radius:0.5rem;
	box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
	position:fixed;
	bottom:25px;
	right:25px;
	text-align: center;
	border:1px solid rgba(0,0,0,0.5);
}

.scrollicon div {
	font-weight:600;
	font-size:38px;
	color:rgba(0,0,0,0.5);
	padding: 2px 0px 0px 0px;
}

main {
	padding: 0;
	margin: 0 auto;
    max-width: 1050px;
    z-index: 1;
    grid-area: main;
    color: rgba(0,0,0,0.8);
/*    border: 1px solid blue;*/
}

.einleitend {font-weight: 900;}

.daten {
	font-size: 1.6rem;
	font-weight: 900;
    font-style: italic;
}

#img01 {
    height: auto;
    width: 150px;
	margin: 0 1.6rem 1.6rem 0;
    transition: all 300ms;
}

#img01:hover {
    transform: scale(1.05);
    box-shadow: 1rem 1rem 0.5rem rgba(0,0,0,0.3);
}

.woerterbuchverzeichnis a {
	color: rgb(50,125,255);
	text-align: center;
	border: 1px solid rgba(0,0,0,0.3);
	padding: 10px;
	min-width: 50px;
	float: left;
    
    /*    Fallback für IE 9 und älter*/
    background-color: #ffffff;
	
	background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0.2) 100%);
	border-radius: 0.1rem;
	box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
	margin-bottom: 1rem;
}

.woerterbuchverzeichnis a:hover {
    
    /*    Fallback für IE 9 und älter*/
    background-color: #ffffff;
	
	background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0.5) 100%);
}

#quellenlink {
    text-decoration: none;
    padding: 1rem 0 0 0;
	background-image: none;
	box-shadow: none;
    border: none;
    border-bottom: grey dotted 1px;
}

.woerterbuch dl {margin-bottom: 1.6rem;}

.woerterbuch dt,
.woerterbuch .wortverwandtschaft {
    font-family: Merriweather, serif;
	font-size: 1.6rem;
	font-weight: 900;
	color: rgba(0,0,0,0.8);
	margin-bottom: 0.5rem;
	text-decoration: none;
    border: 0;
}

.woerterbuch .wortverweis {
	color: rgba(50,125,255,1);
	font-weight: 900;
	text-decoration: none;
}

.personen {
	font-size: 1.6rem;
	font-variant: small-caps;
}

/*FOOTER*/
footer {
	box-shadow: 0.2rem -0.2rem 0.2rem rgba(0,0,0,0.3);
  
    /*    Fallback für IE 9 und älter*/
/*    background-color: #ffffff;*/
	
    background-image: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(0,0,0,0.1) 100%);
    min-height: 10rem;
/*    Einstellungen für die Kind-Elemente im FOOTER*/
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2;
    position: static;
    grid-area: footer;
/*	border: 1px solid red;*/
}