/* Stylesheet für Selfhtml Design 03
  responsives Layout mit Grid Layout ab Z. 210   */

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

/* alternatives Boxmodell */
html {
  box-sizing: border-box;
  background: #E7D1FF;
}

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

body {
        max-width: 75em;
        margin:0 auto;
        padding: 0;
        background: #E7D1FF;
        color: #333;
        font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */

}


#losch {
         background-color: red;
         }


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

header {
        position: sticky;
        position: fixed;
        top:0pt;
        background-size: contain;
        background-color:#E7D1FF;
        width:100%;
}

header a h1,
header a p {                        /*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
        color: white;
        border-left: 0;
        padd<a href="../"></a>ing: 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 -1.5em;
        padding: 0.5em 1em;
        background: #4e7a92;
        box-shadow: 0px 1px 3px rgba(0,0,0,.8);
}

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

/** CONTENT **/

main {
        margin: 0 0 1em;
        padding: 3em;
        background: #fff;
}
 h1 {
         font-size: 1.7em;
         }
h1,
h2 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        padding-left: 0.70em;
        padding-top: 1em;
        color: #666;
        text-transform: uppercase;
        border-left:5px solid #E7D1FF;
        border-bottom:5px solid #E7D1FF;
}

h2 span {
        font-size: 0.70em;
        color: #818181;
        text-transform: none;
}

h3        {
        font-size: 1.20em;
        font-weight: bold;
        padding: 2px;
        margin: 2px;
        color: #871F78;
}


h4        {
        font-size: 0.75em;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        color: #3366DD;
}


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

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

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: #999999;
    margin: 0 0 0.5em 0.5em;
        font-size: 0.8em;
        font-weight: bold;
}

ul.square li{
        padding:10px;
}

/*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 0.5em;
        border-right: 1px  solid #ACACAC;
}

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: white;
}

footer p {
        text-align: right;
}

/** Navigation **/
/*
nav#navigation{
color: #000000;
}

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

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


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

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

nav a[aria-current=page]{
 background: #aaa;
}

*/

/* ========== repsonsives Grid-Layout ========== */

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

/* ab einer Breite von 30em haben zwei Spalten nebeneinander Platz: */

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

  nav {
    grid-column: 1 / 2;
  }

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

  article {
    grid-column: 1 / 1;
  }

  .spalte img {
     width: 50%;
         float: left;
         margin-right: 0.5em;
  }
}



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

  nav {
    grid-row: 0 / 4;
  }

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

  article {
    grid-column: 1 / 3;
  }

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

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

  .spalte img {
     width: 35%;
  }
}

/* ANFANG NAVIGATION*/
/* Add a black background color to the top navigation */
.topnav {
  background-color: #ccc;
  overflow: hidden;
  color: black;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: #333333;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #eee;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #eee;
  color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* ENDE NAVIGATION*/


a.training {
font-weight:bold;
color:red;
}