/* ========================================================================== */
/* html                                                                       */
/* ========================================================================== */
html { 
  box-sizing: border-box; 

background:    
    radial-gradient(circle at 0% 50%, var(--custom-html_bg1)  9px, var(--custom-html_bg2) 10px, var(--custom-html_bg1)  11px) 0px 10px,
    radial-gradient(at 100% 100%,var(--custom-html_bg1)  9px, var(--custom-html_bg2) 10px, var(--custom-html_bg1)  11px), var(--custom-html_bg3);

  background-size: 20px 20px;
  color: var(--custom-body_co); 
} 

/* ========================================================================== */
/* header                                                                     */
/* ========================================================================== */
header.banner {
	padding: .5em 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 0 0 1em 1em;
    background:linear-gradient(to right,var(--custom-banner_bg1), var(--custom-banner_bg2));    
}

header a#navlink {
	display: block;
	float: right;
	color: var(--custom-banner_bg1);
	text-decoration: none;
	font-size: 2em;
	font-weight: bold;
}

/* ========================================================================== */
/* body                                                                       */
/* ========================================================================== */
body {
    max-width: 95em;
    margin: 0 auto; 
	padding: 0 1em;
    font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
    background: var(--custom-body_bg);       
    color: var(--custom-body_co);    
	position:relative;
}

/* ========================================================================== */
/* #logo                                                                      */
/* ========================================================================== */
#logo {
	margin: 22px 0 0 3%;
    background: var(--custom-banner_bg1);       
    color: var(--custom-logo_co); 
	font-size:1.7em;
	font-style:italic;
	font-weight:normal;
	text-decoration: none;
	border-radius: 1em 1em 1em 1em;    
}

/* ========================================================================== */
/* main                                                                       */
/* ========================================================================== */
main {
	padding:        1em;
	background:     var(--custom-main_bg);
	box-shadow:     0 0 10px rgba(0,0,0,0.8);
	border-radius:  1em;
}

/* ========================================================================== */
/* a                                                                          */
/* ========================================================================== */
a {
	color: var(--custom-color);
}

a:hover,a:focus {
	background: var(--custom-color_bg3);
	color: var(--custom-color_attention);    
}

a.button {
	background: var(--custom-color_bg2);
	font-weight: bold;
	box-shadow: 0 0 20px #c3d34e inset, 0 2px 1px rgba(0,0,0,0.2);
	color: white; 
	padding: 0.5em;
	border-radius: .5em;
	text-decoration: none;	
}

a.button:hover,a.button:focus {
	background: var(--custom-color_bg3);
	color: var(--custom-color_attention);    
}
/* ========================================================================== */
/* h1                                                                         */
/* ========================================================================== */
h1 span {
	color: var(--custom-logo_co);
}


h1 a:hover span {
    color: var(--custom-logo_co);
}

/* ========================================================================== */
/* h2                                                                         */
/* ========================================================================== */
aside h2, section h2 {
	color: white;
	padding: .5em;
	margin: 0;
	background: var(--custom-color_bg3);
	border-radius: .5em;
	box-shadow: 0 3px 0 var(--custom-banner_bg2);
}

/* ========================================================================== */
/* section                                                                    */
/* ========================================================================== */
aside, section {
	box-shadow: 0 0 80px rgba(0,0,0,0.1) inset, 0 3px 1px rgba(0,0,0,0.15);
	border-radius: 1em;
	position: relative;
	padding: 0 0 4em;     /* Platz für abslout positionierte Buttons */
}

section p {
	padding: 0.5em 1em;
}

section p:first-of-type {
	font-weight: bold;
	color: var(--custom-firstoftype_co);
}

section img {
  width: calc(100% - 1em);
  margin: 0.5em 0.5em 1.5em;
}


section a.button {			
	position: absolute;	/* So werden Buttons immer an der gleichen Stelle, unabhängig vom vorhandenen Inhalt, positioniert */
	right: 1em;
	bottom: 1em;
}

section ul {
	margin: 1em 0 0 3em;
}
section li {
	font-weight: bold;
	margin: 0.5em 0 1em 2em;
}
section li i {
	color: var(--custom-color);
}

/* ========================================================================== */
/*                                                                            */
/* ========================================================================== */		

dl.grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  padding: 0.5em;
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}
dl.grid dd {
  margin-bottom: 1em;
}


/* ========================================================================== */
/* .akzentfontlogo                                                               */
/* ========================================================================== */
.akzentfontlogo {
	color: var(--custom-logo_co); 
    font-weight: bold;
}

/* ========================================================================== */
/* navigation                                                                 */
/* ========================================================================== */
#navigation li {
	display: block;
	list-style: none;
	margin-right: .5em; 
	width: 90%;
}
#navigation a {
	display: block; 
	text-decoration: none;
	padding: 0.5em 1em;
    background: var(--custom-main_bg);    
	border-radius: .5em .5em 0 0;	
}
#navigation a[aria-current=page] {
	font-weight:bold;
    background: linear-gradient(var(--custom-color_bg3), #fff);
}
#navigation a:hover,
#navigation a:focus, 
#navigation a:active  {
	color: white;
    background: linear-gradient(var(--custom-color_bg2), #fff);	
}

/* ########################################################################## */
/* responsives Layout                                                         */
/* ########################################################################## */
/* ========================================================================== */
/* 1-Spaltenlayout                                                            */
/* ========================================================================== */

/* ========================================================================== */
/* 2-Spaltenlayout ab 40em                                                    */
/* ========================================================================== */
@media only screen and (min-width: 40em) {
  main {
	display:                   grid;
	grid-template-columns:     repeat(2, 1fr);
	grid-gap:                  1em;
	position:                  relative;
	margin:                    3em auto 1em;
  }
  article                      { grid-column: span 2; }
  header a#navlink             { display: none; }
  #navigation                  { position: absolute; top: -3em; }
  #navigation li               { display: inline-block; width: auto;  }
  #navigation a                { display: inline-block; }
}
/* ========================================================================== */
/* 3-Spaltenlayout, ab 60em                                                   */
/* ========================================================================== */
@media only screen and (min-width: 60em) {
  main { 
    grid-template-columns:     repeat(4,1fr);
  }
  main header, main footer     { grid-column: span 4; }
  article                      { grid-column: span 2; }
}
/* ========================================================================== */
/* Flexbox Fallback wenn der  Browser kein display:grid unterstützt.          */
/* ========================================================================== */
@supports not (display: grid) {
  main {
    display:                   flex;
    flex-flow:                 row wrap;
  }
  main > *                     { flex: 1 100%; } 
 article                       { flex: 1 64%; < margin: 1%;}
 section,aside                 { flex: 1 31%; margin: 1%;}
}