/* Stylesheet responsives Layout mit Grid Layout ab Z. 210 */

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* Alternatives Boxmodell */
html {
box-sizing: border-box;
background: #1F3855;	
}

*, ::before, ::after {
box-sizing: inherit;
}

body {
max-width: 75em;
margin: 0 auto;
padding: 0;
background: #111111;
color: #E0E0E0;
font: normal 1em Arial, Helvetica, Sans-Serif; /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

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

header {
position: relative;
height: 210px;
margin: 0 0 0 3em;
background: #CCCCCC url("../BILDER/header-djextravagant.jpg") no-repeat right;
background-size: auto;		 
padding: 0 0 0.5em;
}

header h1 { /* Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
font-family: Arial, Helvetica, Sans-Serif;
color: #EEEEEE;
border-left: 0;
padding: 0;
display: table; /* Überschriften und Absätze sind sonst immer 100% breit, durch display: table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
}

.ribbon {
display: inline-block;
position: relative;
margin: 2em 0 2em -1em;
padding: 0.5em 1em;
background: #1F3855;
}

.ribbon::before {
display: block;
width: 1em;
height: 0;
position: absolute;
bottom: -1em;
left: 0em;
content: "";
border-bottom: 1em solid transparent;
border-right: 1em solid rgb(0, 80, 120);
}

/** CONTENT **/

main {
margin: 0 0 1em;
padding: 1em;
background: #111111;
}

h1 span {
font-size: 0.48em;
color: #E0E0E0;
text-transform: none;
}

h2 {
font-family: Arial, Helvetica, Sans-Serif;
padding-left: 1em;
color: #E0E0E0;
border-left: 5px solid #1F3855;
}

h3 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 1.25em;
font-weight: bold;
padding: 0px;
margin: 0px;
color: #E0E0E0;
}

h4 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
padding: 0px;
margin: 0px;
color: #E0E0E0;
}

p {
text-align: left;
line-height: 1.6em;
padding: 20px 0px;
}

a { 
color: #888888;
outline: none;
text-decoration: none;
}

a:hover, /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht. */
a:focus {
color: #E25303;
text-decoration: none;
background-color: #111111;	
}

a.more {
float: right;
font-weight: bold;
}

a.more: after {
content: " \2192 ";
font-size: 1.2em;
font-weight: bold;
}

ul.square {
list-style-type: square;
color: #111111;
margin: 0 0 0.5em 0.5em;
font-size: 0.8em;
font-weight: bold;
}

ul.square li{
padding: 10px;	
}

img {
max-width: 100%;
height: auto;
border: 0;
border-radius: 10px;
}

span {
font-size: 0.8em;
}

/* DL, DT, DD Datenliste */
dl.grid {
display: grid;
grid-template-columns: 1fr 100%;
}

dd {
margin: 0;
padding-left: 1em;
}

dd span: first-child {
display: inline-block;
width: 4em;
}

dl.grid dd {
margin-bottom: 1em;
}

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

ul#footer-nav li {
list-style-type: none;  
display: inline;
padding: 0;
border-right: 1px solid #111111; 
}

footer {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 1em;
}

ul#footer-nav  li: last-child { 
border: none; 
}

ul#footer-nav img {
width: 1.5em;
}

ul#footer-nav a:hover,
ul#footer-nav a:focus,
ul#footer-nav a:active {
background: #111111;
}

footer p {
text-align: right;
}

/** Navigation **/
	
#navigation ul {
list-style-type: none;
width: 100%;
margin-bottom: 30px;
}

#navigation ul li.first-child	{ border-top: 1px #111111 solid; }

#navigation ul li a {
display: block;
border-bottom: 1px solid #111111;
font-size: 1.1em;
line-height: 1.5em;
padding: 1em 10px;
text-decoration: none;
width: 15em;
}

#navigation ul li a:before {
content: " ";
display: inline-block;
width: 1em;
height: 1em;
border-left: 5px solid #1F3855;
}
	
nav a {
background: #222222;
}

/* ========== Responsives Grid-Layout ========== */

/* Mobile first - auf schmalen Bildschirmen wird alles untereinander platziert. */

/* Ab einer Breite von 30em haben zwei Spalten nebeneinander Platz. */

@media (min-width: 40em) {
main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}

nav {
grid-column: 1 / 2;
}

#intro {
grid-column: 2 / 3;
grid-row: 1 / 2;					
}

article {
grid-column: 2 / 3;
}

.spalte img {
max-width: 50%;
height: auto;
border: 0;
float: left;
margin-right: 0.5em;
}
}

@media (min-width: 60em) {
main {
grid-template-columns: repeat(3, 1fr);
}

nav {
grid-row: 1 / 4;
}

#intro {
grid-column: 2 / 4;
grid-row: 1 / 2;					
}

article {
grid-column: 2 / 4;
}

aside {
grid-column: 3 / 4;
grid-row: 1 / 2;	
}

.spalte {
grid-row: 2 / 3;					
}

.spalte img {
max-width: 50%;
height: auto;
border: 0;
}
}