* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html, body {
/*    height: 100%;*/
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: sans-serif;
    background: #666;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/*
    background-image: url(bilder/black-friday-spezial-b-text.jpg);

Interessant wegen Kopfbereich, dass DVDs komplett angezeigt werden
html, body {
    height: 100%;
}
*/

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;

    max-width: 1200px;
    margin: 0 auto;
}

.dsteu1,
.dsteu2,
.dsteu3,
.dsteu4,
.dsteu5,
.dsteu6,
.dsteu7,
.dsteu8,
.dsteu9,
.dsteu10,
.dsteu11,
.dsteu12,
.dsteu13,
.dsteu14 {
    list-style-type: none;
}

/*  ===================================  */
/*  kopfbereich */
/*  ===================================  */
    header {
        position: relative;
        background-image: linear-gradient(10deg, #051937, #00375e, #00556a, #00714f, #008901);
    }






    #kopfSteuerungUnten,
    #kopfSteuerungOben {
        position: absolute;
        top: 0;
        color: #ccc;
        background-color: hsla(200, 100%, 20%, 0.8);
        font-size: 80%;
        padding-left: 10px;
        padding-right: 10px;

        width: 100%;
        display: flex;
        justify-content:space-between;

        height: 2.4em;
        line-height: 2.4em;
        overflow: hidden;   /* TESTEN !!!! */

    }

    #kopfSteuerungUnten {
        top: auto;
        bottom: 0;
    }

    #kopfSteuerungUnten div:nth-child(1),
    #kopfSteuerungOben div:nth-child(1) {
        /* overflow: hidden;  */  /* TESTEN !!!! */
    }

    #kopfSteuerungUnten div:nth-child(2),
    #kopfSteuerungOben div:nth-child(2) {
        flex: 1;
        text-align: right;
        /* border: 1px solid yellow;*/
    }

    #kopfSteuerungUnten a,
    #kopfSteuerungOben a {
        color: white;
        text-decoration:none;
    }

    #kopfSteuerungUnten a:hover,
    #kopfSteuerungOben a:hover {
        color: white;
        text-decoration: underline;
    }

    #kopfSteuerungOben .trennstrich {
      border-right: 1px solid #bbb;
      padding-right: 1em;
      margin-right: 1em;
    }

    #htmlseminarlogo {
        margin-top: 2em;
        margin-left: 10px;
        margin-bottom: 3em;
        color: #ddd;
        font-style: italic;
        text-decoration: overline underline;
    }

    #htmlseminarlogo a {
        color: silver;
    }

    .blur {
        text-shadow: 0px 0 4px skyblue;
        padding-left: 2em;
    }

    .blur:hover {
        text-shadow: none;
        text-decoration: underline;
    }

    #kopfbereichVideotext,
    #htmlseminarlogo {
        float: left;
    }

    #kopfbereichVideos {
        float: right;
        background-image: url(https://www.html-seminar.de/bilder/html-seminar-4-dvds-230.png);
        background-repeat: no-repeat;
        /* height: 100%;*/
        /* overflow: hidden;  */
        height: 100%;
        top: 0;
        right: 0px;
        position: absolute;
    }

    #kopfbereichVideotext {
        margin-top: 3em;
        margin-right: 20px;
        text-align: right;
        color: white;
        font-size: .9em;
        line-height: 1.5em;
        padding: 4px 14px;

        background-color: hsla(200, 100%, 35%, 0.8);
        line-height: 1.2em;
        box-shadow: 2px 2px 2px black;
        filter: hue-rotate(0deg);
        animation: farb-animation 1s 1;
        animation-delay: 1s;
    }

    #kopfbereichVideotext a {
        color: white;
    }

    #kopfbereichVideotext strong {
        font-size: 1.2em;
        color: white;
        text-shadow: 1px 1px 1px black;
        display: inline-block;
        padding-bottom: 10px;
    }

    @keyframes farb-animation {
      0% {
          -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
      }
      50% {
          -webkit-filter: hue-rotate(-150deg);
          filter: hue-rotate(-150deg);
      }
      100% {
          -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
      }
    }


    #suche {
        position: absolute;
        bottom: 0;
        background-color: #8b0000;
        width: 100%;
    }

/*
@media screen and (max-width:1000px) { #kopf_link_bild_dvds img {  height: 200px; width: auto; } }
@media screen and (max-width:900px) { #kopf_link_bild_dvds img {  height: 180px; width: auto; } }
@media screen and (max-width:800px) { #kopf_link_bild_dvds img {  height: 160px; width: auto; } }
@media screen and (max-width:700px) { #kopf_link_bild_dvds img {  height: 140px; width: auto; } }
*/

@media screen and (max-width:1000px) {
    #kopf_link_bild_logo img {  height: 121px; width: auto; }
}
@media screen and (max-width:900px) {
    #kopf_link_bild_logo img {  height: 100px; width: auto; }
    #htmlseminarlogo { font-size: 85%; }
}
@media screen and (max-width:800px) {
    #kopf_link_bild_logo img {  height: 80px; width: auto; }
    #htmlseminarlogo { font-size: 70%; }
    #htmlseminarlogo .blur { padding-left: 2em;}
}
@media screen and (max-width:700px) {
    #kopf_link_bild_logo img {  height:  60px; width: auto; }
    #htmlseminarlogo { font-size: 65%; }
    #htmlseminarlogo .blur { padding-left: 0.5em;}
}

@media screen and (max-width:900px) {
    #kopfbereichVideotext { font-size: 85%; }
}

@media screen and (max-width:800px) {
    #kopfbereichVideotext { font-size: 80%; }
}

@media screen and (max-width:700px) {
    #kopfbereichVideotext { font-size: 70%; }
}

@media screen and (max-width:320px) {
    #kopfbereichVideos { display: none; }
}




@media screen and (max-width:850px) {
    .MD_ausblenden,
    .MD_ausblenden_2 {
      display: none;
    }
}

@media screen and (max-width:650px) {
    .MD_ausblenden_3 {
        display: none;
    }
}



#mehrspaltig {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
	background-color: white;
}

nav {
    flex: 1;
    /*    background-color: darkgray; */
    margin-bottom: 1em;
}

article {
    position:relative;
    flex: 5;
    /* background-color: orange; */
}

#rechtespalte,
aside {
	flex: 1 1 70px;
    /* background-color: gray; */
    margin-bottom: 1em;
}

footer {
/*	background-color: limegreen; */
}

/* wird NOCH nicht verwendet !!!! */
    #schwebeteil {
        position: absolute;
        /* background-color: red; */ /* Colour Contrast Check */
        background-color: #EC0000;

        top:0;
        right: 0;
    }

/*  ===================================  */
/*  fussbereich */
/*  ===================================  */

footer {
    font-size: 80%;
}

#wprojekte,
#footerEbookVideos {
    /* Abstand zum Rand */
    padding: 10px;
}

#footerEbookVideos {
    background-color: #eee;
    display: flex;
}

#footerEbookVideos div {
    flex: 1;
}

#footerEbookVideos div p:nth-child(1) {
    padding-bottom: 1em;
}

#footerEbookVideos div:nth-child(2) {
    text-align: right;
}


/* 300 152 */
@media screen and (max-width:750px) { #footerEbookVideos img {  width: 250px; height:  auto; } }
@media screen and (max-width:550px) { #footerEbookVideos img {  width: 200px; height:  auto; } }
@media screen and (max-width:420px) { #footerEbookVideos img {  width: 150px; height:  auto; } }
@media screen and (max-width:330px) { #footerEbookVideos img {  width: 110px; height:  auto; } }



@media only screen and ( max-width: 50px ) {
    #footerEbookVideos {
        flex-direction: column;
    }

    .bildebookvideofussbereich {
        max-width: 300px;
    }

    #footerEbookVideos img {
        object-fit: contain;
        width: 100%;
    }

    #footerEbookVideos div:nth-child(2) {
        margin-top: 20px;
        text-align: left;
    }
}


#wprojekte,
#copyright,
#copyright a {
    color: #f0f0f0;
}

#wprojekte {
    background-color: #115a88;
}

#wprojekte strong {
    color: #d0d0d0;
    letter-spacing: .1em;
}

#wprojekte b {
    font-weight: normal;
    border-bottom: 1px dashed silver;
}

#wprojekte a {
    color: #fff;
    text-decoration: none;
}

#wprojekte a:hover {
    text-decoration: underline;
}

#wprojekte #spalten {
    display: flex;
}

#wprojekte #spalten div {
    flex: 1;
}

#wprojekte #spalten ul {
    margin-left: 0em; /* 1.2em */
    margin-top: .3em;
    padding-left: 1.1em;
    list-style-type: square;
}

#wprojekte a[href^="https://"] {
    background: none;
    padding-left: 0px;
}

@media only screen and ( max-width: 600px ) {
    #wprojekte #spalten {
        flex-direction: column;
    }

    #wprojekte #spalten div:nth-child(2) {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    #wprojekte #spalten ul {
        display: inline-block;
        padding-left: 0;
    }

    #wprojekte li {
        display: inline-block;
        padding-right: 1em;
        margin-right: 1em;
        border-right: 1px solid silver;
    }

    #wprojekte li:last-child {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }
}





#copyright {
    color: #fff;
    text-align: center;
    background-color: #1472a7;
    padding: .5em 0;
    border-radius: 0 0 1em 1em;
}

#copyright a {
    text-decoration: none;
}

#copyright a:hover {
    color: white;
    text-decoration: underline;
}





/* -----------------------------------  */
/* Hamburger-Icon */
/* -----------------------------------  */

.menu_icon {
    position: absolute;
    left: 6px;
    margin-top: 6px !important;
    z-index: 15;
}

.menu_icon:hover {
    box-shadow: 3px 3px 3px black;
    cursor: pointer;
}

label.menu_icon {
   display: block;
   width: 54px;
   height: 44px;

   width: 28px;
   height: 22px;

   margin: 0 auto;
   border-radius: .5em;
   /* background-color: limegreen; */
/*   background-color: red; */
   background-color: #EC0000;
}

input#menu_check_box {display:none}

.menu_icon span {
   position: absolute;
   height: 3px;
   margin: 0 15%;
   width: 70%;
   background: #fff;
   display: block;
   transition: 0.5s;
   transform-origin: center;
}

.menu_icon span:nth-child(1) {
    /* top: 10px; */
    top: 4px;
    /* transform: translateY(10px) rotate(-45deg);    */
    transform: translateY(6px) rotate(-45deg);
}

.menu_icon span:nth-child(2) {
    /* top: 20px; */
    top: 10px;
    opacity:0;
}

.menu_icon span:nth-child(3) {
    /* top: 30px; */
    top: 16px;
    /* transform: translateY(-10px) rotate(45deg);*/
    transform: translateY(-6px) rotate(45deg);
}

#menu_check_box:checked + .menu_icon span:nth-child(1){
    transform: translateY(0px) rotate(0deg);
}

#menu_check_box:checked + label.menu_icon {
    /* background-color: red;*/
    background-color: limegreen;

}

#menu_check_box:checked + .menu_icon span:nth-child(2){
   opacity:1;
}

#menu_check_box:checked + .menu_icon span:nth-child(3){
   transform: translateY(0px) rotate(0deg);
}


#steuerungsbereich {
    transition: 0.05s;
    left: 0px;
/*    top: 0;*/
    display: inline-block;
    /*  background-color: yellow;*/
    margin-right: 1em;
    margin-top: 2px;

    border-top: 30px solid black;
/*    flex: 310px;*/
    order:1;
    z-index: 10;
}

#menu_check_box:checked~#steuerungsbereich{
    position: absolute;
    left: -2550px;
/*    top: -2550px;*/
/*    top: -50px;*/
   background-color: white;
}


/* -----------------------------------  */
/* Hamburger-Steuerung - bei schmäleren Fensterbreite */
/* -----------------------------------  */
@media only screen and ( max-width: 950px ) {
    /* mobile Geräte */
    /*    body { background-color: green;}*/

    #steuerungsbereich {
        left: -450px;
        position: absolute;
    }

    label.menu_icon {
        background-color: limegreen;
    }

    #menu_check_box:checked~#steuerungsbereich{
        left: 0px;
    }

    #menu_check_box:checked + label.menu_icon {
/*        background-color: red;*/
        background-color: #EC0000;
    }

    .menu_icon span:nth-child(1) {
        /* top: 10px; */
        top: 4px;
        transform: translateY(0px) rotate(0deg);
    }
    .menu_icon span:nth-child(2) {
        /* top: 20px; */
        top: 10px;
        opacity:1;
    }
    .menu_icon span:nth-child(3) {
        /* top: 30px; */
        top: 16px;
        transform: translateY(0px) rotate(0deg);
    }

    #menu_check_box:checked + .menu_icon span:nth-child(1){
       /* transform: translateY(10px) rotate(-45deg); */
       transform: translateY(6px) rotate(-45deg);
    }

    #menu_check_box:checked + .menu_icon span:nth-child(2){
       opacity:0;
    }

    #menu_check_box:checked + .menu_icon span:nth-child(3){
       /* transform: translateY(-10px) rotate(45deg); */
       transform: translateY(-6px) rotate(45deg);
    }
}


/* -----------------------------------  */
/* REIHENFOLGE Inhalt */
/* -----------------------------------  */

#steuerungsbereich {
    order:1;
}

article {
    order:2;
}

#rechtespalte {
    order:3;
}



/* -----------------------------------  */
/* STEUERUNG */
/* -----------------------------------  */

#steuerung {
    width: 250px;
    box-shadow: 10px 10px 25px black;
/*    border-right: 1px solid black;*/
    /* margin-bottom: 20px; */

/*    margin-top: 30px;*/
}

#steuerung {
  line-height: .9em;
}

#steuerung ul {
  list-style-type: none;
  background-color: white;
  line-height: 1.2em;
  /* background-color: orange !important; */
}

/* #steuerung ul ul {
  line-height: 0.9em !important;
  background-color: limegreen !important;
} */


#steuerung li {
  /* padding: 0.2em 0.4em; */
  /* background-color: orange; */

/*  background-image: url(bilder/verlauf.png) !important;*/
/*  background-size: 100% 100%;*/
}

#steuerung li li {
  /* padding: 0.2em 0 0.2em 0.4em; */
  padding: 0 0 4px 0;
  font-weight: normal;
  font-size: 80%;
  letter-spacing: 0em;
}

#steuerung a {
  padding: 0.3em 0.4em;
  width: 100%;
  display: inline-block;
  text-decoration: none;
  color: black;
}

#steuerung ul ul li {
/*   margin-left: 1.3em; */
  line-height: 1.2em;
/*  background-image: url(https://www.html-seminar.de/bilder/icon-aufzaehlung.gif);*/
  background-repeat: no-repeat;
  background-position: 0px 0.92em;

/*  list-style-position: inside;*/
/*  list-style-type: square;*/
}

#steuerung ul ul ul li {
  /* background-image: url("bilder/icon-aufzaehlung-2.gif"); */
  /* background-image: url(bilder/icon-aufzaehlung-2.gif); */
  /* list-style: square; */
  /* margin-left: 1em; */
  /* border-left: 5px dotted red; */

}

#steuerung ul ul ul li a {
  padding-left: 15px;
/*  background-image: url(bilder/icon-aufzaehlung.gif);*/
    background-image: url(https://www.html-seminar.de/bilder/icon-aufzaehlung.gif);
  background-position: 4px 5px;
  background-repeat: no-repeat;
}

#steuerung ul ul ul ul li a {
  padding-left: 30px;
  /* background-image: url(bilder/icon-aufzaehlung-2.gif); */
  background-image: url(bilder/icon-aufzaehlung-2.gif);
  background-position: 14px 5px;
  background-repeat: no-repeat;
}

#steuerung ul ul ul li .dsteu_hight>a,
#steuerung ul ul ul li a:hover {
  background-image: url(bilder/icon-aufzaehlung.gif) !important;
}


#steuerung ul ul ul ul li .dsteu_hight>a,
#steuerung ul ul ul ul li a:hover {
  background-image: url(bilder/icon-aufzaehlung-2.gif) !important;
}

#steuerung ul ul li a:hover {}

#steuerung ul ul .dsteu_normal>a {
  border-right: 5px solid white;
}

.dsteu_hight>a {
  background-image: none;
  text-decoration: underline !important;
  border-right: 5px solid red !important;
  background-color: hsla(90, 0%, 70%, .4);
}

#steuerung a:hover {
  background-color: hsla(30, 100%, 60%, 0.8);
  border-right: 5px solid black !important;
}

.dsteu_hight>a {
    pointer-events: none;
    cursor: default;
}

.dsteu1>a,
.dsteu2>a,
.dsteu3>a,
.dsteu4>a,
.dsteu5>a,
.dsteu6>a,
.dsteu7>a,
.dsteu8>a,
.dsteu9>a,
.dsteu10>a,
.dsteu11>a,
.dsteu12>a {
/*  background-image: url(bilder/verlauf.png);*/
  background-size: 100% 100%;
  border-right: 5px solid #666;
  margin-top: 10px;
}

/*.dsteu1 > a { background-color: hsla(30, 100%, 50%, .5); }*/
.dsteu1>a {
  background-color: hsla(50, 100%, 50%, .5);
}

/*.dsteu2 > a { background-color: hsla(70, 100%, 50%, .5); }*/
.dsteu2>a {
  background-color: hsla(90, 100%, 50%, .3);
}

.dsteu3>a {
  background-color: hsla(110, 100%, 50%, .3);
}

.dsteu4>a {
  background-color: hsla(130, 100%, 50%, .3);
}

.dsteu5>a {
  background-color: hsla(150, 100%, 50%, .3);
}

.dsteu6>a {
  background-color: hsla(170, 100%, 50%, .3);
}

.dsteu7>a {
  background-color: hsla(190, 100%, 50%, .3);
}

.dsteu8>a {
  background-color: hsla(210, 100%, 50%, .3);
}

.dsteu9>a {
  background-color: hsla(230, 100%, 50%, .3);
}

.dsteu10>a {
  background-color: hsla(250, 100%, 50%, .3);
}

.dsteu11>a {
  background-color: hsla(270, 100%, 50%, .3);
}

.dsteu12>a {
  background-color: hsla(300, 100%, 50%, .3);
}

.dsteu2 {
  margin-top: 14px;
}

.dsteu5 {
  margin-top: 20px;
}




/* -----------------------------------  */
/* fehlermeldung */
/* -----------------------------------  */
.visually-hidden {
    opacity: 0;
}

.fehlermeldung{
/*    background-color:red;*/
    background-color:#EC0000;
    color:white;
}

.fehlerschliessen {
    border: 1px solid silver;
    box-shadow: 2px 2px 5px silver;
    display: inline-block;
    text-align: center;
    float: right;
    font-size: 2em;
    width: 1.1em;
    height: 1.1em;
    line-height: 1em;
    border-radius: 5px;
    color: white;
    background-color: black;
    transition: 0.2s;
}

.fehlerschliessen:hover {
    color: white;
    background-color: red;
    box-shadow: 2px 2px 5px black;
}

article {
    position: relative;
    overflow: hidden;
}

#fehlermeldung {
    position:absolute;
    border:1px solid black;
    border-bottom-left-radius: 1em;
    right:-250px;
    top:36px;

/*    opacity: 0;*/

    /* height:420px;*/
    width:250px;
    background-color:yellow;
/*    position:fixed;*/
    z-index:100;

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#schwebeteil {
    position: absolute;
    top: 0;
    /* right: 12em; */

    font-size: 0.8em !important;
    line-height: 1.3em;
    color: white;
    padding: 6px 1em;
    letter-spacing: .03em;
    text-decoration: none;
    /*    background-color: black;*/
/*    background-color: red;*/
    background-color: #EC0000;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
    margin-right: 3em;
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-left:1px solid black;
    box-shadow: 0px 0px 20px black;
    cursor: pointer;
    transition: .4s;
}

#schwebeteil span {
    text-decoration: underline;
}

#schwebeteil:hover {
    background-color: hsl(80, 100%, 39%);
    cursor: pointer !important;
}


.schrifthochkant {
    position: absolute;
    top:0;
    left:-23px;
/*    float: left;*/
    font-size: 0.8em !important;
    line-height: 1.3em;
    writing-mode: vertical-rl;
    color: #999;
    color: white;
    padding: 6px 3px;
    letter-spacing: .1em;
    text-decoration: none;
    /*    background-color: black;*/
    background-color: red;
    border-bottom-left-radius: 1em;
    margin-right: .5em;
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-left:1px solid black;
    box-shadow: -5px 5px 20px black;
    margin-top: 10px;

    display: none;
}

/*
#fehlermeldung:hover {
    right:0px;
}
*/

#form_feldermeldung {
    padding: 0.5em;
    font-size: 0.75em;
}

#form_feldermeldung p {
    padding-bottom: 0.5em;
    line-height: 1.2em;
}

#fehlermelderbereich {
/*
    border:solid 1px black;
    position:absolute;
    left:0px;
    top:170px;
    height:400px;
    width:250px;
    padding:10px;
    background-color:hsla(0, 0%, 50%, .95);
    position:fixed;
    z-index:100;
*/
    display:none;
/*
    box-shadow:-10px 10px 50px black;
    border-radius:10px 0 0 10px;
*/
}

#fehlermeldung_toggle {
    position: absolute;
    top:0;
    right:0;
    width: 2em;
    height: 2em;
}

#fehlermeldung_toggle:checked ~ #fehlermeldung {
/*    left:0px;*/
    right:0px;

/*    opacity: 1;*/
}


/* -----------------------------------  */
/* Projekt unterstützen  */
/* -----------------------------------  */

#schwebeteil_support {
    position: absolute;
    top: 0;
    right: 1em;

    font-size: 0.8em !important;
    line-height: 1.3em;
    color: white;
    padding: 6px 1em;
    letter-spacing: .03em;
    text-decoration: none;
    /*    background-color: black;*/
/*    background-color: hsl(80, 100%, 29%);*/
    background-color: hsl(80, 100%, 25%);
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
    margin-right: 3em;
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-left:1px solid black;
    box-shadow: 0px 0px 20px black;
    cursor: pointer;
    transition: .4s;

    z-index: 1;
}

#schwebeteil_support span {
    text-decoration: underline;
}

#schwebeteil_support:hover {
/*    background-color: hsl(80, 100%, 39%);*/
    background-color: hsl(80, 100%, 20%);
    cursor: pointer !important;
}

#projektsupport {
    z-index: 5;
}

#projektsupport_toggle {
    position: absolute;
    top: 0px;
    right: 50px;
}

#rechtespalte,
#projektsupport {
/*    opacity: .8;*/
    transition: .4s;
}


#projektsupport_toggle:checked ~ #rechtespalte
/* , #projektsupport_toggle:checked ~ #projektsupport */
{
/*    right:0px;    */
/*    opacity: 1;*/
    display: none;
}




/* -----------------------------------  */
/* rechte Spalte  */
/* -----------------------------------  */

#rechtespalte {
    transition: 0.5s;
    left: 0px;
    display: inline-block;
/*
    margin-left: 1em;
    margin-top: 200px;
    margin-right: 2em;
*/

    border-top: 30px solid black;
}

.infospalteblock {
    background-color: #bbb;
    background-color: #eee;
    font-size: .9em;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 5px;
    color: #333;
}

.infospalte h2,
#infospalte h2 {
/*    background-color: yellowgreen;*/
    background-color: #333;
    padding: 5px;
    width: 100%;
    font-size: 1.2em;
    color: yellow;
}


#rechtespalte ul,
#rechtespalte p {
    padding-bottom: 1em;
}

#rechtespalte ul {
    margin-left: 1.2em;
    list-style-type: square;
}

.ohneAbstandNachUnten {
    padding-bottom: 0 !important;
}

#rechtespalte hr {
    height: 2px;
    width: 80%;
    text-align: center;
    margin: 0em auto 1em auto;
}

#rechtespalte a {
    color: black;
}

#rechtespalte details {
    padding-bottom: 6px;
}

#rechtespalte summary {
    font-weight: bold;
}

#rechtespalte summary b {
    text-decoration: underline;
}

#rechtespalte summary:focus {
    outline: none;
}

#rechtespalte summary:hover {
    text-decoration: underline;
}

#rechtespalte summary + div {
    padding-top: .4em;
    padding-left: 1rem;
    font-size: 90%;
    padding-bottom: .3em;
}


@keyframes invisiblyGrowFontSize {
	0% {
    font-size: 0;
    opacity: 0;
	}
	100% {
    font-size: 1em;
    opacity: 0;
	}
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
	100% {
		opacity: 1;
	}
}

#rechtespalte details + p {
    margin-top: .7em;
}

#rechtespalte details[open] div {
	animation-name: invisiblyGrowFontSize, fadeIn;
  animation-duration: 300ms, 200ms;
  animation-delay: 0ms, 300ms;
}




@media only screen and ( max-width: 600px ) {
    #rechtespalte {
        position: absolute;
        right: -1000px;
        width: 400px;
        display: none;
    }
}



#form_feldermeldung h2 {
    margin-bottom: 0;
}

#form_feldermeldung p {
    /* border: 1px solid red; */
    margin-bottom: 0;
}

#form_feldermeldung details {
   margin-bottom: .5em;
}

#form_feldermeldung summary b {
   text-decoration: underline !important;
}




/* -----------------------------------  */
/* Vor-Zurück-Steuerung nach Inhalt     */
/* -----------------------------------  */
#nav_unten {
  padding-top: 20px;
  display: flex;
  width: 95%;
  font-size: 80%;
}

#nav_unten a {
  text-decoration: none;
  color: #666;
}

#nav_unten a:hover {
  text-decoration: underline;
  color: black;
}

#nav_unten_zurueck {
  display: block;
/*  width: 40%;*/
  background-color: #EFEFEF;
  border: 10px solid #EFEFEF;
/*  border-right: dotted 1px silver;*/
  flex: 50%;
  order: 1;
  margin-right: 10px;
  border-radius: 10px 0 0 10px;
  box-shadow: 2px 2px 10px silver;
}

#nav_unten_zurueck span+span {
  display: block;
  margin-left: 22px;
}

#nav_unten_zurueck_pfeil {
  float: left;
  width: 0px;
  height: 0px;

  border-top: 8px solid transparent;
  border-right: 8px solid #333;
  border-bottom: 8px solid transparent;
  border-left: 0px solid transparent;
}

a:hover #nav_unten_zurueck {
  background-color: #DBDBDB;
}

a:hover #nav_unten_zurueck_pfeil {
    border-right: 8px solid red;
}


#nav_unten_weiter {
  display: block;
  width: 45%;
  background-color: #EFEFEF;
  border: 10px solid #EFEFEF;
  border-left: dotted 1px silver;
  /* float: right; */
  flex: 50%;
  order: 3;
  margin-left: 10px;
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 2px 10px silver;
}

#nav_unten_weiter span+span {
  display: block;
  text-align: right;
  margin-right: 22px;
}

#nav_unten_weiter_pfeil {
    float: right;
    width: 0px;
    height: 0px;

    border-top: 8px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #333;
}

a:hover #nav_unten_weiter_pfeil {
    border-left: 8px solid red;
}

#nav_unten_anfang {
    flex: 40px;
    text-align: center;
    order: 2;
}

#nav_unten_anfang_pfeil {
    /* display: absolut; */
    text-align: center;

    width: 0px;
    height: 0px;

    border-top: 0px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #333;
    border-left: 8px solid transparent;
}

a:hover #nav_unten_anfang_pfeil {
    border-bottom: 8px solid red;
}



/* -----------------------------------  */
/* Social-Bookmarks                     */
/* -----------------------------------  */

.twitter {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>');
}

.whatsapp {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp icon</title><path d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411"/></svg>');
}

.facebook {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/></svg>');
}

.pinterest {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pinterest icon</title><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>');
}

.linkedin {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>');
}

.xing {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Xing icon</title><path d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z"/></svg>');
}

.tumblr {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Tumblr icon</title><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"/></svg>');
}

.flattr {
  background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Flattr icon</title><path d="M1.906 12C1.906 6.432 6.432 1.906 12 1.906c.048 0 4.003 0 5.455.002L14.53 4.834l1.344 1.344L21.903 0H12C5.373 0 0 5.373 0 12v9.331l1.91-1.759v-.096c-.002-.244-.004-7.404-.004-7.476zM24 2.668l-1.91 1.76v.096L22.093 12c0 5.568-4.528 10.094-10.093 10.094-.048 0-4.003 0-5.455-.002l2.925-2.926-1.344-1.344L2.097 24H12c6.627 0 12-5.373 12-12V2.668z"/></svg>');
}

.reddit {
  background-image:
  url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Reddit icon</title><path d="M2.204 14.049c-.06.276-.091.56-.091.847 0 3.443 4.402 6.249 9.814 6.249 5.41 0 9.812-2.804 9.812-6.249 0-.274-.029-.546-.082-.809l-.015-.032c-.021-.055-.029-.11-.029-.165-.302-1.175-1.117-2.241-2.296-3.103-.045-.016-.088-.039-.126-.07-.026-.02-.045-.042-.067-.064-1.792-1.234-4.356-2.008-7.196-2.008-2.815 0-5.354.759-7.146 1.971-.014.018-.029.033-.049.049-.039.033-.084.06-.13.075-1.206.862-2.042 1.937-2.354 3.123 0 .058-.014.114-.037.171l-.008.015zm9.773 5.441c-1.794 0-3.057-.389-3.863-1.197-.173-.174-.173-.457 0-.632.176-.165.46-.165.635 0 .63.629 1.685.943 3.228.943 1.542 0 2.591-.3 3.219-.929.165-.164.45-.164.629 0 .165.18.165.465 0 .645-.809.808-2.065 1.198-3.862 1.198l.014-.028zm-3.606-7.573c-.914 0-1.677.765-1.677 1.677 0 .91.763 1.65 1.677 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm7.233 0c-.914 0-1.678.765-1.678 1.677 0 .91.764 1.65 1.678 1.65s1.651-.74 1.651-1.65c0-.912-.739-1.677-1.651-1.677zm4.548-1.595c1.037.833 1.8 1.821 2.189 2.904.45-.336.719-.864.719-1.449 0-1.002-.815-1.816-1.818-1.816-.399 0-.778.129-1.09.363v-.002zM2.711 9.963c-1.003 0-1.817.816-1.817 1.818 0 .543.239 1.048.644 1.389.401-1.079 1.172-2.053 2.213-2.876-.302-.21-.663-.329-1.039-.329v-.002zm9.217 12.079c-5.906 0-10.709-3.205-10.709-7.142 0-.275.023-.544.068-.809C.494 13.598 0 12.729 0 11.777c0-1.496 1.227-2.713 2.725-2.713.674 0 1.303.246 1.797.682 1.856-1.191 4.357-1.941 7.112-1.992l1.812-5.524.404.095s.016 0 .016.002l4.223.993c.344-.798 1.138-1.36 2.065-1.36 1.229 0 2.231 1.004 2.231 2.234 0 1.232-1.003 2.234-2.231 2.234s-2.23-1.004-2.23-2.23l-3.851-.912-1.467 4.477c2.65.105 5.047.854 6.844 2.021.494-.464 1.144-.719 1.833-.719 1.498 0 2.718 1.213 2.718 2.711 0 .987-.54 1.886-1.378 2.365.029.255.059.494.059.749-.015 3.938-4.806 7.143-10.72 7.143l-.034.009zm8.179-19.187c-.74 0-1.34.599-1.34 1.338 0 .738.6 1.34 1.34 1.34.732 0 1.33-.6 1.33-1.334 0-.733-.598-1.332-1.347-1.332l.017-.012z"/></svg>');
}

#sobookmarks {
    padding-top: 30px;
    text-align: center;
}

#sobookmarks a {
    border: 1px solid black;
    background-color: #ccc;
    background-image: none !important;
    color: black;
    text-decoration: none;

    padding: 5px 10px;
    display: inline-block;
    margin: 4px 10px 4px 0;
    margin: 0px 10px 0px 0;
    float: left;
    border-radius: 6px;

    border-radius: 50%;
    height: 40px;
    width: 40px;
    overflow: hidden;
    padding: 10px 10px;
    border: 0px solid black;
}

#sobookmarks a:hover {
    background-color: yellow;
    text-decoration: underline;
}

#sobookmarks ul,
#sobookmarks li {
    display: inline-block;
    padding-left: 0;
}

#sobookmarks span {
    /*background-color: orange;*/
    line-height: 22px;
}

#sobookmarks .ico_sob {
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    vertical-align: top;
    /*width: 20px;*/

    background-repeat: no-repeat;
    padding-left: 25px;
    padding-left: 35px;
}

#sobookmarks h2 {
    width: 100%;
    margin: 0 !important;
/*    padding: 0 !important;*/
    color: #666;
    padding-bottom: .7em;
    font-size: 110%;
    text-align: center;
    font-weight: normal;
    text-decoration: overline silver;
}


/* -----------------------------------  */
/* css-warnschild */
/* -----------------------------------  */

.css-warnschild {
    display: inline-block;
    width: 200px;
    height: 170px;
    background-color: transparent;
    font-family: serif;
    font-size: 8em;
    line-height: 170px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 16px;
}

.css-warnschild:before {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 170px solid red;
    border-left: 100px solid transparent;
    position: absolute;
    content: "";
    left: 0;
}

.css-warnschild span:after {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 75px;
    content: "!";
}

.css-warnschild:after {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 120px solid white;
    border-left: 70px solid transparent;
    position: absolute;
    content: "";
    left: 30px;
    top: 34px;
}



/* -----------------------------------  */
/* Sitemap */
/* -----------------------------------  */

#sitemap {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}


#sitemap span:hover {
  background-color: orange;
}

.einr1, .einr2, .einr3, .einr4, .einr5 {
  display: block;
  padding: 0.2em 0.2em;
  margin-bottom: .1em;
}

.einr1 {
  background-color: #DADADA;
  font-weight: bold;
}

.einr2 + .einr1,
.einr3 + .einr1 {
  margin-top: 1em;
}


.ein1 a {
  color: white !important;
}

.einr2 {
  font-size: 90%;
}

.einr3 {
  font-size: 80%;
  color: blue;
}

#sitemap .einr3::before {
  content: "\002022 \000020";
}

.einr3 + .einr2 {
  margin-top: .8em;
}

/* -----------------------------------  */
/* Aufzählungsnummer im Kreis */
/* -----------------------------------  */

ol.kreis {
    list-style-type: none;
    list-style-type: decimal !ie;
    margin: 0;
    margin-left: 1.3em;
    padding: 0;
    counter-reset: li-counter;

    margin-top: -.95em;
    margin-bottom: 1.5em;
}

ol.kreis > li {
    position: relative;
/*    margin-bottom: 1em;*/
    margin-bottom: .5em;
    padding-left: .7em;
    min-height: 1em;
/*    line-height: 1.6em;*/
}

ol.kreis > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    content: counter(li-counter);
    counter-increment: li-counter;

    margin-right: .5em;
    content: counter(li-counter);
    color: white;
    background: black;

    border-radius: 50%;
    font-size: 1em;

    width: 1.2em;
    height: 1.2em;
    line-height: 1.3em;

    text-align: center;
    display: inline-block;
}

/* -----------------------------------  */
/* Tabelle */
/* -----------------------------------  */

table {
/*  width: 100%;*/
    max-width: 100%;
    margin-bottom: 1.5em;
    color: #333;
}

thead th {
  background-color: black !important;
  color: white;
  text-align: left;
  padding: 0.2em;
}

/*
td, th {
  border-bottom: 1px solid #ddd;
  line-height: 1.7em;
  padding: 0.3em 0.2em 0.1em 0.2em;
  vertical-align: top;
}
*/

td {
  transition: all 0.5s ease-in-out 0s;
}

/*
tbody tr:nth-child(odd) td, th {
  background-color: #f4f4f4;
}
*/
/*
tbody tr:nth-child(even) td, th {
  background-color: hsla(0, 0%, 88%,.5);
}
*/


tr:hover td {
  background-color: orange !important;
}


table {
    border-bottom: 1px solid rgba(65, 121, 173, 1);
    border-spacing: 0;
/*    width: 100%;*/
    border-collapse: separate;
    border-spacing: 2px;
}

table tr:not(:last-child) > td {
    border-bottom: 1px solid hsl(0, 0%, 88%);
}

table td {
    display: table-cell;
    vertical-align: inherit
}

table td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}


/* -----------------------------------  */
/* Links -> Icons */
/* -----------------------------------  */

.externerLinkIcon,
a[href^="http://"],
a[href^="https://"] {
/*  background: url(bilder/extern-link.gif) no-repeat;*/
    padding-left: 20px;
    vertical-align: top;
    background-repeat: no-repeat;

    background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Externer Link icon</title><path d="M 3 3 L 3 21 L 21 21 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 3 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z"/></svg>');

}

a[href^="http://www.html-seminar.de"] {
  background: none;
  padding-left: 0px;
}

a[href^="https://www.html-seminar.de"] {
  background: none;
  padding-left: 0px;
}

a[href$="pdf"] {
  background: url(bilder/icon-pdf.gif) no-repeat right;
  padding-right: 20px;
}

.browserfenster a[href^="http://"] {
  background: none;
  padding-left: 0px;
}

.browserfenster a[href^="https://"] {
  background: none;
  padding-left: 0px;
}

.externerLinkIcon {
    padding-left: 20px !important;
    vertical-align: top !important;
    background-repeat: no-repeat !important;

    background-image:
    url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Externer Link icon</title><path d="M 3 3 L 3 21 L 21 21 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 3 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z"/></svg>') !important;

}



article a {
    color: #406abf;
}

article a:visited {
    /* color: hsla(220, 50%, 50%, 0.78); */
    color: hsl(220, 100%, 35%, 0.78);
}

article a:hover {
    color: black;
}

/* -----------------------------------  */
/* für Suchfunktion */
/* -----------------------------------  */

.topsuchtreffer {
    background-color: black;
    display: inline-block;
    float: right;
    margin-right: 1em;
    font-size: 1em !important;
    clear: both;
    margin-top: 1px;
}

.topsuchtreffer a {
    background-color: black;
    float: right;
    font-size: 0.8em !important;
    writing-mode: vertical-rl;
    color: #999 !important;
    padding: 0.7em 0.1em;
    text-decoration: none;
}

.topsuchtreffer_befehl {
    text-align: center;
    display: inline-block;
    color: white;
    height: 100%;
    border-right: 1px solid #999;
    padding: 0 0.2em;
    letter-spacing: 0.1em;
    font-weight: bold;
}

/* -----------------------------------  */
/* advance organizer */
/* -----------------------------------  */
#advorganizer {
  float: right;
  width: 18em;
  padding: 10px 5px 12px 5px;
  margin: 0 0% 10px 10px;
  border-left: silver 6px solid;
  border-right: silver 6px solid;
  background: #eeeeee;
  font-size: .83em;
  color: white;
  background: -webkit-linear-gradient(150deg, #b08d10 0%, #a87227 54%, #ffee00 100%);
  background: linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%);
  background: -webkit-linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%);
  background: -o-linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b08d10, endColorstr=#ffee00, GradientType=1);
}

#advorganizer b {
  color: #009E00;
  color: white;
  font-size: 14pt;
  line-height: 20pt;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

#advorganizer strong, #advorganizer b, #advorganizer a, #advorganizer p, #advorganizer li {
  color: white;
}

/* -----------------------------------  */
/* INHALT selber */
/* -----------------------------------  */

article {
    padding: 2.5em 2.5em;
    transition: 0.5s;
}

article h1 {
/*
  color: hsl(35, 100%, 45%);
  color: #cc8800;
*/
/*  color: #c78500;*/
  font-size: 2em;
  font-weight: bold;
/*  font-weight: normal;*/
  letter-spacing: -0.01em;
  padding-bottom: 0.2em;
  /* text-shadow: 0 0 1px black; */
}

article p {
/*  width: 90%;*/  /* hat Nebenwirkung auf Fehlermelder */
  line-height: 1.6em;
  color: #333;
  margin-bottom: 1.5em;
  max-width: 40em;
}

article p b,
article p strong {
  color: black;
}

p + ol,
p + ul {
/*  margin-top: -1.2em;*/
}

.ohneabstand {
    padding-bottom: 0;
    margin-bottom: 0;
}






article h1 {
  margin-bottom: 0;
}

article h1 code,
article h2 code,
article h3 code,
article h4 code
{
    color: inherit;
    text-decoration-skip: ink;
/*    text-decoration-color: #c78500;*/
    text-decoration-color: #557f01;
/*    text-decoration-color: hsla(40, 100%, 39%, 0.4);*/
    text-decoration-color: rgba(85, 127, 1, 0.5);
    text-decoration-line: underline overline;
    text-decoration-style: dashed;
}

h1+p {
  margin-top: 0;
}

article h2 {
  margin-bottom: 0;
  font-size: 1.6em;
  margin-top: 1.8em;
}

h2+p {
  margin-top: 0.5em;
}

h1, h2, h3, h4 {
  width: 90%;
  /* background-color: skyblue; */

/*  color: #cc8800;*/
/*  color: #c78500;*/
  color: #557f01;
/*  font-weight: normal;*/
}

h2, h3, h4 {
    color: #555;
}

h3 {
/*    color: black;*/
    font-weight: bold;
    font-size: 1.3em;
    margin-top: 1.6em;
    padding-bottom: .3em;
}

h4 {
    color: black;
    font-weight: bold;
}

h1+h2,
h2+h3 {
  margin-top: .6em !important;
  /*color: orange !important;*/
}

article h1 {
  line-height: 1.3em;
}

article h2 {
  line-height: 1.3em;
}


article ul,
article ol {
  padding-left: 1.2em;
  line-height: 1.6em;
  margin-bottom: 1em;
  width: 90%;
  max-width: 40em;
  color: #333;
}

article ul {
  list-style-type: square;
}

article li {
  padding-bottom: 0.25em;
}

kbd {
    border: solid 1px;
    padding: 0pt 0.4em;
    white-space: nowrap;
    background-color: #EEEEEE;
    border-radius: 0.3em;
    box-shadow: 1px 1px 3px silver;
    border-color: #666;
    font-family: inherit;
    font-size: 0.8em;
    margin: 0 0.3em;
}


.listePlus {
    list-style-image: url(bilder/plus.gif);
    list-style-position: inside;
    text-indent: -1.6em;
    padding-left: 2em;
}

.listeMinus {
    list-style-image: url(bilder/minus.gif);
    list-style-position: inside;
    text-indent: -1.6em;
    padding-left: 2em;
}


.align-left,
.bildlinks {
  max-width: 99%;
  float: left;
  border: 0px;
  padding-right: 0.5em;
}

.align-right,
.bildrechts {
  display: inline-block;
  /* max-width: 99%; */
  float: right;
  border: 0px;
  margin-left: 20px !important;
  margin-right: 20px;
}

.zentriert {
  text-align: center;
}


.leserkommentare {
  padding: 1em;
  margin-bottom: 2.5em;
}

.tabelle_hervorhebung {
  color: white;
  background-color: #00ab00;
 }




figure {
  border: 1px solid black;
  margin-bottom: 1em;
  box-shadow: 8px 8px 50px #666;
  margin-top: 30px;
  margin-bottom: 40px;
  width: 95% !important;
}

figure {
  display: grid;
  position: relative;
  overflow: hidden;
}

figure img {
  max-width: 100%;
  height: auto;
}

figcaption {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 8px 16px;
  opacity: 0.85;
  bottom: 0;
  left: 0;
  border-radius: 0 20px 0 0;
  border-top: 3px solid black;
  border-right: 3px solid black;
}

figure:hover figcaption {
  opacity: 0;
  background-color: red;
  bottom: -10%;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}




.videobereich,
#videobereich {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 4em;
}

.videoExtern {
  position: absolute;
  top: 0;
  left: 0;
  width: 97%;
  height: 97%;
}


.keinetrennung {
    white-space: nowrap;
    word-spacing: -0.2em;
}

/* zur Kontrolle von  rel="noreferrer" */
a[rel="noreferrer"] {
/*	font-weight: bold;*/
/*  	font-style: italic;*/
/*    text-decoration: underline;*/
  }


.fehler {
    color: red;
}


/* -----------------------------------  */
/* Kacheln Zeichenreferenz */
/* -----------------------------------  */

.zkacheln {
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    align-items: stretch;
}

.zkacheln div {
    display: inline-block;
    width: 9.5em;
    height: 13em;
    border: 1px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 1em;
    position: relative;
    background-color: #eeeeef;
    box-shadow: 3px 3px 8px silver;
    margin-right: 1em;
    transition: 0.2s;
}

.zkacheln div:hover {
    box-shadow: 3px 3px 8px black;
}

.zkacheln p {
    margin: 0;
}

.zkacheln p:first-child {
    padding-top: 30px;
    margin: 0;
    height: 70px;
    height: 84px;
    line-height: 2em;
    line-height: 32px;
    background-color: yellow;
    background-color: white;
    font-size: 2em;
    transition: 0.2s;
    text-align: center;
}

.zkacheln div:hover p:first-child {
    font-size: 5em;
}

.zkacheln small {
    font-size: .6em;
    color: #999;
    display: inline-block;
}

.zkacheln p:nth-child(2),
.zkacheln p:nth-child(3),
.zkacheln p:nth-child(4) {
    margin: 0;
    font-size: 0.9em;
    padding: .5em 0.5em 0 0.5em;
}

.zkacheln p:nth-child(2):before {
    content: "Unicode: ";
    font-size: .6em;
    color: #999;
    line-height: 2em;
}

.zkacheln p:nth-child(3):before {
    content: "Name: ";
    font-size: .6em;
    color: #999;
    line-height: 2em;
}


.zkacheln p:last-child {
    font-size: 0.7em;
    line-height: 1.2em;
}


/* -----------------------------------  */
/* Ausgabe Codebeispiele, Quellcode, Browserbsp. */
/*
<details class="aufgabenloesung">
  <summary>Lösung Übung</summary>
*/
/* -----------------------------------  */


.aufgabenloesung summary {
    text-decoration: underline;
    /* color: orange; */
    color: #c78500;
    font-size: 1.6em;
}

.aufgabenloesung summary:after {
   content: " (hier Klicken zum Anzeigen)";
}

.aufgabenloesung summary {
    padding-left: 60px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: bottom left;
    line-height: 80px;
    height: 80px;

background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 744.09447 1052.362179' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(1.0778 0 0 1.2008 -38.708 -137.96)'%3E%3Cpath d='m427.02 379.49a79.985 65.442 0 1 1 .00033-.02526' fill='%23ffff02' transform='matrix(2.7496 0 0 3.0749 -577.8 -680.5)'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='m440.79 671.11c42.417-17.557 135.95-74.046 136.4-189.55.4584-116.16-104.05-203.53-210.66-200.81-104.97 2.7194-217.69 66.193-218.48 200.37-.79212 133.52 121.3 198.69 312.46 244.17 114.33 27.804-276.1 24.686-230 37.904 56.843 16.301 319.52 31.547 240.4 49.997-76.091 17.742-198.01 8.9014-241.7 30.538-39.182 19.405 426.59 17.44 189.69 60.571' stroke-linejoin='round' stroke-width='38.849'/%3E%3Cpath d='m281.49 443.66c49.678 21.428 89.402 54.291 166.5-6.796' stroke-width='38.301'/%3E%3Cpath d='m85.51 279.7 47.642 52.503' stroke-width='38.242'/%3E%3Cpath d='m222.6 170.81 23.335 57.365' stroke-width='38.242'/%3E%3Cpath d='m452.06 152.34-13.612 61.254' stroke-width='38.242'/%3E%3Cpath d='m667.91 247.62-55.42 43.753' stroke-width='38.242'/%3E%3C/g%3E%3C/g%3E%3Cpath d='m310.37 548.12a28.045 52.351 0 1 1 .00012-.02021' fill='%23fff' transform='matrix(1.9932 0 0 1.1767 -281.24 -340.44)'/%3E%3C/svg%3E");

}


/* -----------------------------------  */
/* Ausgabe Codebeispiele, Quellcode, Browserbsp. */
/* -----------------------------------  */
code {
    color: #406abf;
    font-family: "Source Code Pro", Consolas, monospace;
    font-weight: 500;
    padding: 0 4px;
    letter-spacing: -0.05em;
}

.beispieltext {
    position: relative;
    padding: 0 .8em;
    border-left: silver 6px solid;
    display: block;
    overflow: auto;
    font-family: "Source Code Pro", Consolas, monospace;
    font-size: 1em;
    line-height: 1.5em;
    background: #eeeeee;
    margin-bottom: 1em;
    white-space: pre-line;
}

.browserfenster {
    position: relative;
    background-image: url(bilder/browserfenster-s.jpg);
    background-repeat: no-repeat;
    padding: 70px 16px 16px 16px;
    border: 1px solid silver;
    overflow: auto;
    margin-bottom: 40px;
    box-shadow: 5px 5px 15px 0px #cccccc;
}

pre[class*="jsvs"]::before,
pre[class*="txtvs"]::before,
pre[class*="htaccessvs"]::before,
pre code[class*="language-html"]::before,
pre code[class*="language-js"]::before,
pre code[class*="language-htaccess"]::before,
pre code[class*="language-css"]::before {
    /* content: 'HTML'; */
    font-size: 10pt !important;
    background-color: silver;
    font-weight: bold;
    color: white;
    position: absolute;
    width: 70px;
    height: 20px;
    line-height: 20px;
    /* border-radius: 20px 20px 0 0 !important; */
    border-radius: 2px 0 0 30px !important;
    text-align: center;
    /* top: -20px !important; */
    /* right: 10px; */
    right: 0;
    opacity: 0.5 !important;
}

pre code[class*="language-html"]::before {
    content: 'HTML';
    background-color: #b4c6e0 !important;
}

pre code[class*="language-css"]::before {
    content: 'CSS';
    background-color: #32cd32 !important;
}

code[class*="language-css"] {
    border-left: limegreen 10px solid !important;
}

pre code[class*="language-js"]::before {
    content: 'JavaScript';
    background-color: #bb32cd !important;
    width: 100px;
}

code[class*="language-js"] {
    border-left: #bb32cd 10px solid !important;
}


pre code[class*="language-htaccess"]::before {
    content: '.htaccess';
    background-color: #bb32cd !important;
    width: 110px;
}

code[class*="language-htaccess"] {
    border-left: #bb32cd 10px solid !important;
}


.fehlerhaftercode {
    border-left: 10px solid red !important;
}

.falschercode {
    text-decoration-line: line-through !important;
    text-decoration-color: red !important;
    text-decoration-style: dotted !important;
    border-left: 16px solid red !important;
}

/* -----------------------------------  */
/* PrismJS - Code Highlighting */
/* -----------------------------------  */

/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css */
/**
 * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
 * @author Tim  Shedor
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
/*	font-size: .9em;*/
    font-weight: normal;
/*    color: #777;*/
    color: #555;
    letter-spacing: 0em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	position: relative;
	margin: .5em 0;
	overflow: visible;
	padding: 0;
}
pre[class*="language-"]>code {
	position: relative;
	border-left: 10px solid #358ccb;
	box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
	background-color: #fdfdfd;
	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
	background-size: 3em 3em;
	background-origin: content-box;
	background-attachment: local;
}

code[class*="language-"] {
	max-height: inherit;
	height: inherit;
/*	padding: 0 1em;*/
	padding: 0 0.3em;
	display: block;
	overflow: auto;
}

/* Margin bottom to accommodate shadow */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background-color: #fdfdfd;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 1em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	position: relative;
	padding: .2em;
	border-radius: 0.3em;
	color: #c92c2c;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: inline;
	white-space: normal;
}

pre[class*="language-"]:before,
pre[class*="language-"]:after {
	content: '';
	z-index: -2;
	display: block;
	position: absolute;
	bottom: 0.75em;
	left: 0.18em;
	width: 40%;
	height: 20%;
	max-height: 13em;
	box-shadow: 0px 13px 8px #979797;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

pre[class*="language-"]:after {
	right: 0.75em;
	left: auto;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
/*	color: #7D8B99;*/
	color: #81add8;
}

.token.comment {
    color: silver;
}

.token.punctuation {
/*	color: #5F6364;*/
/*	color: black;*/
    color: hsl(220, 50%, 50%);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
/*	color: #c92c2c;*/
	color: hsl(220, 50%, 50%);
    letter-spacing: .02em;
    font-weight: bold !important;
    font-size: 1.0rem;      /* Test wegen Größe */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
	color: #2f9c0a;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
	color: #a67f59;
	background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
/*	color: #1990b8;*/
	color: hsl(30, 80%, 50%);
}

.token.regex,
.token.important {
	color: #e90;
}

.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: rgba(255, 255, 255, 0.5);
}

.token.important {
	font-weight: normal;
}

.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.namespace {
	opacity: .7;
}

@media screen and (max-width: 767px) {
	pre[class*="language-"]:before,
	pre[class*="language-"]:after {
		bottom: 14px;
		box-shadow: none;
	}

}

/* Plugin styles: Line Numbers */
pre[class*="language-"].line-numbers.line-numbers {
	padding-left: 0;
}

pre[class*="language-"].line-numbers.line-numbers code {
	padding-left: 3.8em;
}

pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
	left: 0;
}

/* Plugin styles: Line Highlight */
pre[class*="language-"][data-line] {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
}
pre[data-line] code {
	position: relative;
	padding-left: 4em;
}
pre .line-highlight {
	margin-top: 0;
}




/* -----------------------------------  */
/* fuer externe Videos */
/* -----------------------------------  */


iframe {
  display: inline-block;
}
.video-wall {
  position: relative;
  font: 400 1em/1.46 Helvetica, Arial, sans-serif;
  color: #333;
  display: inline-block;
  min-height: 18em;
  min-width: 28em;
  margin: 0;
  background-color: #eee;
  box-sizing: border-box;
/*  border: 1.5em solid #ccc;*/
  padding: 1em;

    padding-bottom: 56.25%;

    width: 100% !important;
    height: auto !important;


}
.video-wall strong {
  display: block;
  text-align: center;
  font-size: 1.1em;
  margin: 0;
}
.video-wall div {
  position: absolute;
  width: calc(100% - 2em);
  top: 3em;
  bottom: 7em;
  overflow-y: auto;

    border: 1px solid silver;
}
.video-wall p {
  font-size: 0.8em;
  margin: 0 0 1em;
}
.video-wall a {
  color: inherit;
}
.video-wall .video-link {
  display: block;
  white-space: nowrap;
  font-size: 0.8em;
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: 6em;
  transform: translateX(-50%);
}
.video-wall button {
  -webkit-appearance: none;
  cursor: pointer;
  color: #eee;
  font: 700 0.8em/1.2 Helvetica, Arial, sans-serif;
  display: block;
  width: 11.5em;
  height: 4.25em;
  border: 0 none;
  border-radius: 0.75em;
  padding: 0 0 0 5.5em;
  text-align: left;
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: 1em;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666;
  background-size: 3.5em;
  transition: background-color 0.3s;
}
.video-wall button:hover {
  background-color: #444;
}



/* -----------------------------------  */
/* Videokurs bestellen */
/* -----------------------------------  */

.spalte2 ul {
    padding-top: 1.2em !important;
}

/* -----------------------------------  */
/* fuer Ausdrucke */
/* -----------------------------------  */

@media print {
    h1, h2, h3, h4, h5 {
      page-break-after: avoid;
    }

    #kopfSteuerungOben,
    #wprojekte,
    #footerEbookVideos,
    #steuerungsbereich,
    #projektsupport_toggle,
    #schwebeteil_support,
    #rechtespalte,
    .menu_icon,
    #fehlermeldung_toggle,
    #schwebeteil,
    #fehlermeldung,
    #nav_unten,
    #sobookmarks {
        display: none !important;
    }

#kopfSteuerungUnten div:nth-child(2) {
    display: none;
}

    a {
        color: #000;
        text-decoration: underline;
    }

    a:after { content: " [" attr(href) "] ";}
}





/* Cookie Consent CSS mit K2 Anpassungen */
.cc_banner-wrapper{z-index:9001;position:relative}
.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}
.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}

@media screen and (min-width: 500px){
 .cc_container .cc_btn{font-size:0.8em}
 .cc_container .cc_message{font-size:0.8em}
}

@media screen and (min-width: 768px){
 .cc_container .cc_btn{font-size:1em}
 .cc_container .cc_message{font-size:1em;line-height:1em}
}

@media screen and (min-width: 992px){
 .cc_container .cc_message{font-size:1em}
}

@media print{
 .cc_banner-wrapper,.cc_container{display:none}
}

.cc_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px}
.cc_container .cc_btn{padding:8px 10px;background-color:#f1d600;background-color:black;
  cursor:pointer;transition:font-size 200ms;text-align:center;font-size:0.6em;display:block;width:33%;margin-left:10px;float:right;max-width:80px}
.cc_container .cc_message{transition:font-size 200ms;font-size:0.6em;display:block}

@media screen and (min-width: 500px){
 .cc_container .cc_btn{font-size:0.8em}
 .cc_container .cc_message{margin-top:0.5em;font-size:0.8em}
}

@media screen and (min-width: 768px){
 .cc_container{padding:15px 30px 15px}
 .cc_container .cc_btn{font-size:1em;padding:8px 15px}
 .cc_container .cc_message{font-size:1em}
}

@media screen and (min-width: 992px){
 .cc_container .cc_message{font-size:1em}
}

.cc_container{background:#eee;background:black;color:#222;color:white;opacity:0.96;font-size:17px;font-family:Arial,sans-serif;box-sizing:border-box;border-top:1px solid #ccc}
.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}
.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;background-color:limegreen;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}
.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#d7bf00;color:#000}
.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}
.cc_container a:hover,.cc_container a:active{color:#555}

@-webkit-keyframes slideUp{
 0%{-webkit-transform:translateY(66px);transform:translateY(66px)}
 100%{-webkit-transform:translateY(0);transform:translateY(0)}
}

@keyframes slideUp{
 0%{-webkit-transform:translateY(66px);-ms-transform:translateY(66px);transform:translateY(66px)}
 100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

.cc_container,.cc_message,.cc_btn{animation-duration:0.8s;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;-webkit-animation-name:slideUp;animation-name:slideUp}







.modal {

    /* Overlay page content */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;

    /* Transition opacity on open */
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;

    /* Hide for now */
    opacity: 0;
    pointer-events: none;
}

/* Show modal */
.modal:target {
    opacity: 1;
    pointer-events: auto;
    /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
    min-width: 200px;
    width: 30%;
    background: #fff;
    position: relative;
    margin: 10% auto;

    /* Default minimise animation */
    -webkit-animation: minimise 500ms linear;
    -moz-animation: minimise 500ms linear;
    animation: minimise 500ms linear;

    /* Prettify */
    padding: 30px;
    border-radius: 7px;
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    background: #fff;
    background: -moz-linear-gradient(#fff, #ccc);
    background: -webkit-linear-gradient(#fff, #ccc);
    background: -o-linear-gradient(#fff, #ccc);
    background: linear-gradient(#fff, #ccc);
    text-shadow: 0 1px 0 #fff;
}

/* Override animation on modal open */
.modal:target > div {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    animation-name: bounce;
}

.modal h2 {
    font-size: 36px;
    padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
    -webkit-transform: scale3d(1,1,1);
  }
  100% {
    -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -moz-transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -moz-transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -moz-transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
    -moz-transform: scale3d(1,1,1);
  }
  100% {
    -moz-transform: scale3d(0.1,0.1,1);
  }
}

@keyframes bounce {
  0% {
    transform: scale3d(0.1,0.1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    transform: scale3d(1.08,1.08,1);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    transform: scale3d(0.95,0.95,1);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    transform: scale3d(1,1,1);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@keyframes minimise {
  0% {
    transform: scale3d(1,1,1);
  }
  100% {
    transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"] {
    position: absolute;
    right: 0;
    top: 0;
    color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
    outline: none;
}

/* Create close button */
.modal a[href="#close"]:after {
    content: 'X';
    display: block;

    /* Position */
    position: absolute;
    right: -10px;
    top: -10px;
    width: 1.5em;
    padding: 1px 1px 1px 2px;

    /* Style */
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    font-weight: bold;
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    .modal a[href="#close"]:focus:after,
    .modal a[href="#close"]:hover:after {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
    outline: 1px solid #000;
}

/* Open modal */
a.openModal {
    margin: 1em auto;
    display: block;
    width: 200px;
    background: #ccc;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #ddd);
    background: -webkit-linear-gradient(#fff, #ddd);
    background: -o-linear-gradient(#fff, #ddd);
    background: linear-gradient(#fff, #ddd);
    text-shadow: 0 1px 0 #fff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

a.openModal:hover,
a.openModal:focus {
    background: -moz-linear-gradient(#fff, #ccc);
    background: -webkit-linear-gradient(#fff, #ccc);
    background: -o-linear-gradient(#fff, #ccc);
    background: linear-gradient(#fff, #ccc);
}

    #preisaktion {
/*        position: fixed;*/
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 1em;
        background-color: black;
        color: white;
/*        margin: .5em;*/
        padding: .5em 1em;
        border: 2px solid red;
        box-shadow: 0 0 0px 6px black, 0 0 20px black;
        font-size: 1.4em;
    }

    #preisaktion a {
        color: white;
    }

    #preisaktion a:hover {
        color: orange;
    }



@media screen and (max-width: 768px){
    #preisaktion {
        font-size: 1.0em;
        padding: .2em .3em;
        border: 2px solid red;
        box-shadow: 0 0 0px 6px black, 0 0 5px black;
    }
}

@media screen and (max-width: 620px){
    #preisaktion {
        font-size: .7em;
    }
}

@media screen and (max-width: 520px){
    #preisaktion {
        display: none;
    }
}












/*
	A. Mini Reset
*/
*, *:after, *:before {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

* {
/*
  margin: 0;
  padding: 0;
*/
}

::before,
::after {
	content: "";
}

html,
body {
/*	height: 100%;*/
	-webkit-font-smoothing: subpixel-antialiased;
}

html {
/*	font-size: 100%;*/
}
.ebook {
/*    border: 1px solid red;*/
    display: inline-block;
    margin: 0 auto;
}
body {
/*
	background: #ecf0f1;
	color: #34495e;
	font-family: 'Lato', 'Arial', sans-serif;
	font-weight: 400;
	line-height: 1.2;
*/
}

.ebook ul {
	margin: 0;
	padding: 0;
	list-style: none;
    text-align: center;
}

a {
/*	color: #2c3e50;*/
/*	text-decoration: none;*/
}
/*
*/

.btn {
	display: inline-block;
	text-transform: uppercase;
	border: 2px solid #2c3e50;
	margin-top: 100px;
	font-size: 0.7em;
	font-weight: 700;
	padding: 0.1em 0.4em;
	text-align: center;
	-webkit-transition: color 0.3s, border-color 0.3s;
	-moz-transition: color 0.3s, border-color 0.3s;
	transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
	border-color: #16a085;
	color: #16a085;
}

/* basic grid, only for this demo */

.align {
	clear: both;
	margin: 90px auto 20px;
	width: 100%;
	max-width: 1170px;
	text-align: center;
}

.align > li {
	width: 500px;
	min-height: 300px;
	display: inline-block;
	margin: 30px 20px 30px 30px;
	padding: 0 0 0 60px;
	vertical-align: top;
}

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
	- Cover design
	- Ribbon
	- Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/

/*
	1. container
*/

.ebook .book {
	position: relative;
	width: 160px;
	height: 220px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.ebook .hardcover_front li:first-child {
	background-color: #eee;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* reverse */
.ebook .hardcover_front li:last-child {
	background: #fffbec;
}

/* HARDCOVER BACK */
.ebook .hardcover_back li:first-child {
	background: #fffbec;
}

/* reverse */
.ebook .hardcover_back li:last-child {
	background: #fffbec;
}

.ebook .book_spine li:first-child {
	background: #eee;
}
.ebook .book_spine li:last-child {
	background: #333;
}

/* thickness of cover */

.ebook .hardcover_front li:first-child:after,
.ebook .hardcover_front li:first-child:before,
.ebook .hardcover_front li:last-child:after,
.ebook .hardcover_front li:last-child:before,
.ebook .hardcover_back li:first-child:after,
.ebook .hardcover_back li:first-child:before,
.ebook .hardcover_back li:last-child:after,
.ebook .hardcover_back li:last-child:before,
.ebook .book_spine li:first-child:after,
.ebook .book_spine li:first-child:before,
.ebook .book_spine li:last-child:after,
.ebook .book_spine li:last-child:before {
	background: #999;
}

/* page */

.ebook .page > li {
	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
}

/*
	3. opening cover, back cover and pages
*/

.ebook .hardcover_front {
	-webkit-transform: rotateY(-34deg) translateZ(8px);
	-moz-transform: rotateY(-34deg) translateZ(8px);
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
}

.ebook .hardcover_back {
	-webkit-transform: rotateY(-15deg) translateZ(-8px);
	-moz-transform: rotateY(-15deg) translateZ(-8px);
	transform: rotateY(-15deg) translateZ(-8px);
}

.ebook .page li:nth-child(1) {
	-webkit-transform: rotateY(-28deg);
	-moz-transform: rotateY(-28deg);
	transform: rotateY(-28deg);
}

.ebook .page li:nth-child(2) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
}

.ebook .page li:nth-child(3) {
	-webkit-transform: rotateY(-32deg);
	-moz-transform: rotateY(-32deg);
	transform: rotateY(-32deg);
}

.ebook .page li:nth-child(4) {
	-webkit-transform: rotateY(-34deg);
	-moz-transform: rotateY(-34deg);
	transform: rotateY(-34deg);
}

.ebook .page li:nth-child(5) {
	-webkit-transform: rotateY(-36deg);
	-moz-transform: rotateY(-36deg);
	transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.ebook .hardcover_front,
.ebook .hardcover_back,
.ebook .book_spine,
.ebook .hardcover_front li,
.ebook .hardcover_back li,
.ebook .book_spine li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.ebook .hardcover_front,
.ebook .hardcover_back {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

.ebook .hardcover_front {
	-webkit-transition: all 0.8s ease, z-index 0.6s;
	-moz-transition: all 0.8s ease, z-index 0.6s;
	transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.ebook .hardcover_front li:first-child {
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.ebook .hardcover_front li:last-child {
	-webkit-transform: rotateY(180deg) translateZ(2px);
	-moz-transform: rotateY(180deg) translateZ(2px);
	transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.ebook .hardcover_back li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.ebook .hardcover_back li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of cover */
.ebook .hardcover_front li:first-child:after,
.ebook .hardcover_front li:first-child:before,
.ebook .hardcover_front li:last-child:after,
.ebook .hardcover_front li:last-child:before,
.ebook .hardcover_back li:first-child:after,
.ebook .hardcover_back li:first-child:before,
.ebook .hardcover_back li:last-child:after,
.ebook .hardcover_back li:last-child:before,
.ebook .book_spine li:first-child:after,
.ebook .book_spine li:first-child:before,
.ebook .book_spine li:last-child:after,
.ebook .book_spine li:last-child:before {
	position: absolute;
	top: 0;
	left: 0;
}

/* HARDCOVER front */
.ebook .hardcover_front li:first-child:after,
.ebook .hardcover_front li:first-child:before {
	width: 4px;
	height: 100%;
}

.ebook .hardcover_front li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.ebook .hardcover_front li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.ebook .hardcover_front li:last-child:after,
.ebook .hardcover_front li:last-child:before {
	width: 4px;
	height: 160px;
}

.ebook .hardcover_front li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.ebook .hardcover_front li:last-child:before {
	box-shadow: 0px 0px 30px 5px #333;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.ebook .hardcover_back li:first-child:after,
.ebook .hardcover_back li:first-child:before {
	width: 4px;
	height: 100%;
}

.ebook .hardcover_back li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.ebook .hardcover_back li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.ebook .hardcover_back li:last-child:after,
.ebook .hardcover_back li:last-child:before {
	width: 4px;
	height: 160px;
}

.ebook .hardcover_back li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.ebook .hardcover_back li:last-child:before {
	box-shadow: 10px -1px 80px 20px #666;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.ebook .book_spine {
	-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	width: 16px;
	z-index: 0;
}

.ebook .book_spine li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.ebook .book_spine li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of book spine */
.ebook .book_spine li:first-child:after,
.ebook .book_spine li:first-child:before {
	width: 4px;
	height: 100%;
}

.ebook .book_spine li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.ebook .book_spine li:first-child:before {
	-webkit-transform: rotateY(-90deg) translateZ(-12px);
	-moz-transform: rotateY(-90deg) translateZ(-12px);
	transform: rotateY(-90deg) translateZ(-12px);
}

.ebook .book_spine li:last-child:after,
.ebook .book_spine li:last-child:before {
	width: 4px;
	height: 16px;
}

.ebook .book_spine li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.ebook .book_spine li:last-child:before {
	box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.ebook .page,
.ebook .page > li {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.ebook .page {
	width: 100%;
	height: 98%;
	top: 1%;
	left: 3%;
	z-index: 10;
}

.ebook .page > li {
	width: 100%;
	height: 100%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition-property: transform;
	-moz-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}

.ebook .page > li:nth-child(1) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.ebook .page > li:nth-child(2) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.ebook .page > li:nth-child(3) {
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.ebook .page > li:nth-child(4) {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.ebook .page > li:nth-child(5) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

/*
	5. events
*/

.book:hover > .hardcover_front {
	-webkit-transform: rotateY(-145deg) translateZ(0);
	-moz-transform: rotateY(-145deg) translateZ(0);
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	-webkit-transform: rotateY(-35deg);
	-moz-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
	-webkit-transition-duration: 1.8s;
	-moz-transition-duration: 1.8s;
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	-webkit-transform: rotateY(-118deg);
	-moz-transform: rotateY(-118deg);
	transform: rotateY(-118deg);
	-webkit-transition-duration: 1.6s;
	-moz-transition-duration: 1.6s;
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	-webkit-transform: rotateY(-130deg);
	-moz-transform: rotateY(-130deg);
	transform: rotateY(-130deg);
	-webkit-transition-duration: 1.4s;
	-moz-transition-duration: 1.4s;
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	-webkit-transform: rotateY(-140deg);
	-moz-transform: rotateY(-140deg);
	transform: rotateY(-140deg);
	-webkit-transition-duration: 1.2s;
	-moz-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

/*
	6. Bonus
*/

/* cover CSS */

.coverDesign {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.coverDesign::after {
	background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.coverDesign h1 {
	color: #fff;
	font-size: 2.2em;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 54% 0 0 0;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
	color: #f8f8f8;
	font-size: 1em;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
	background-color: #f1c40f;
	background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
	background-color: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
	background-color: #f8e9d1;
	background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
	background: #c0392b;
	color: #fff;
	display: block;
	font-size: 0.7em;
	position: absolute;
	top: 11px;
	right: 1px;
	width: 40px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 0.15em;
	text-align: center;
	-webkit-transform: rotateZ(45deg) translateZ(1px);
	-moz-transform: rotateZ(45deg) translateZ(1px);
	transform: rotateZ(45deg) translateZ(1px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}

.ribbon::before,
.ribbon::after{
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	border-bottom: 20px solid #c0392b;
	border-top: 20px solid transparent;
}

.ribbon::before{
	left: -20px;
	border-left: 20px solid transparent;
}

.ribbon::after{
	right: -20px;
	border-right: 20px solid transparent;
}

/* figcaption */

.ebook figcaption {
	padding-left: 40px;
	text-align: left;
	position: absolute;
	top: 0%;
	left: 160px;
	width: 380px;
	-webkit-backface-visibility: hidden;
    border: 0;
    background-color: transparent;
}

.ebook figcaption h1 {
	margin: 0;
}

.ebook figcaption span {
	color: #000;
	padding: 0.6em 0 1em 0;
	display: block;
}

.ebook figcaption p {
	color: #4c4c4c;
	line-height: 1.3;
}

/* Media Queries */
@media screen and (max-width: 37.8125em) {
	.align > li {
		width: 100%;
		min-height: 440px;
		height: auto;
		padding: 0;
		margin: 0 0 30px 0;
	}

	.book {
		margin: 2em auto 0 auto;
	}

	.ebook figcaption {
/*		text-align: center;*/
/*		width: 320px;*/
		width: 100%;
/*		top: 250px;*/
		padding-left: 2em;
/*		left: -80px;*/
		font-size: 70%;
	}
}


.abstand_zur_aufzaehlung_0 {
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: bold;
}

.aufz_viereckig {
    list-style-type: square;
    padding: 0 1em 1em 1em;
}

.link_fuer_bild {
    border: 0;
}