/* Styles for Mobil < 480px */

:root {

/* :root Dimensionen margin, width, ...*/

  /* Einrücken des Hauptinhalts auf Desktop, nicht aber am Handy */
--margin-mitte: 0;

} /* Ende :root */

/* HTML Elements general */

* {
  background-color: white;
  font-size: 16px;
}

/* Ende HTML Elements general */

/* Regions */

body {
background-color: #DDD;
  margin: 0;
  padding: 0;
}

header {
  background-color: #DDD;
  border-bottom: darkred solid 2px;
  margin: 0;
  padding: 0 0 1ex 0;
  width: 100%;
}

#access {
  background-color: red;
display: none;
}

#logo {
  background: darkred;
  font-size: 125%;
  float: none;
  margin: 0;
  padding: 0 0 .2ex 0;
  position: fixed;
  text-align: center;
  top: 0px;
  width: 100%;
}

#logo a {
background-color: transparent;
  padding: .3ex 1em;
}

#logo a:link>span, #logo a:visited>span {
  background-color: inherit;
  color: #DDD;
}

#logo img {
  border: solid #DDD 5px;
  height: 3.7ex;
}

/* wf noch für moblile realisieren */

#keyterm {
  background: #DDD;
  margin: 4ex 0 1ex 0;
  padding-left: .5em;
  padding-top: 2ex;
  width: 100%;
}

#keyterm p {
  background: #DDD;
}

#keyterm label {
background: transparent;
}

#keyterm select {
  width: 70%;
}

#keyterm input[type=submit] {
  background-color: white;
}

/* Hauptnavigation  */
#mainnav {
  display: none;
}

#mobilNav {
background: transparent;
  margin: 0 0 1ex 0;
  padding-left: .5em;
}

#mobilNav a {
  font-size: 16px;
  padding: .2ex .1em;
}

.burgerBtn {
background: #DDD;
  padding: 0;
}

.navPanel {
  width: 100%;
}

.menuOpen {
  margin-left: 0;
}

/* Ende Hauptnavigation */

#breadcrumbs {
  display: none;
}

/* Übergeordnete Seite als mobile Breadcrumb */
/* Auf Desktop ausgeblendet */

#parentLnk {
  display: block;
  margin-left: .5em;
}

#parentLnk a {
  background-color: #DDD;
  border: solid 1px #DDD;
  color: darkred;
  display: block;
}

#parentLnk a::before {
 content:'< ';
}

#parentLnk a:hover, #parentLnk a:focus {
  background-color: yellow;
  border: dotted 1px black;
  color: black;
}

#skip a, #skip a:focus { 
  display: none;
}


main {
background-color: white;
  margin: 0;
  padding: .1ex .63em;
  width: 100%;
}

/* Linke Spalte nur für Desktop, ansonsten ausgeblendet 
mainleft bei Review durch desktop-only ersetzen
*/
.desktop-only, .mainLeft {
  display: none;
}

#pageContent {
  background: #676767;
  margin: .5ex 0;
  padding: 1px;
  position: relative;
  width: 100%;
}

#pageContent h2 {
}

#pageContent ul {
}

#pageContent li {
}

#pageContent a {
  font-size: 2ex;
}

#pageContent a:link, #pageContent a:visited {
}

#pageContent a:focus, #pageContent a:hover {
}

main caption {
font-size: 100%;
  padding: .2ex 1em;
}

aside {
background-color: #DDD;
  border-top: darkred solid 2px;
  margin: 0;
  padding: .8ex .5em;
  width: 100%;
}

aside a {
  padding: .3ex .2em .2ex .2em;
  text-decoration: none;
}

aside dd {
background: #DDD;
  padding: .3ex .2em .2ex .3em;
}

aside time {
  background: #DDD;
}

footer {
  background: darkred;
  margin: 0;
  padding: .3ex .2em;
  text-align: center;
  width: 100%;
}

footer nav {
  background: #DDD;
}

footer ul {
background: transparent;
  padding: .63ex .5em;
}

footer a {
}

footer a:link, footer a:visited {
background-color: #DDD;
  color: darkred;
}

footer a:hover {
  background-color: white;
  color: black;
}

footer a:focus {
  background-color: yellow;
  color: black;
}


/* Ende Regions */

/* HTML Elements individual */

/* Definition Lists*/

dl {
background: transparent;
  padding-left: .3em;
}

dt {
  font-weight: bolder;
}

dd {
  margin: .3ex 0 .6ex .25em;
}

h1 {
  font-size: 16px;
  margin: 0;
}

main h2, main h3, main p {
  font-size: 16px;
  margin: 0;
}

main img {
border: solid 2px var(--grey3-1);
float: left;
margin-bottom: 2ex;
padding: .8ex;
w_idth: 16%;
}

/* Ende HTML Elements individual */

/* Classes */

.h1sub {
  font-size: 100%;
}

/* Desktop-Mitte ist mobil links  */
.mitte, *[role="note"] {
  margin-left: 0%;
}

.mainLeft {
  float: left;
  width: 5%;
}

.mobileHidden {
  display: none;
}

.imgLeft {
  float: none;
  width:100%;
}

.linklist {
  margin: 0 1em 1.6ex 0;
}

.gallery li {
  float: none;
}

.left {
  float: none;
  width: 100%;
}

.right {
  margin-left: 0;
}

.sr-only {
  position: absolute;
  left: -1000em;
}

.textRight {
  margin-left: 0;
}

/* Bilder für Hauptinhalt-Mitte */
.main_img { 
  float: none;
  width: 100%;
}

.main_img img { 
  width: 60%;
}

.example img {  
  border: darkred solid 1px;
  margin: .8ex 5px .2ex 0;
  padding: 0;
}

/* Ende Classes */