@charset "UTF-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,400;8..144,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,400;0,8..144,700;0,8..144,900;1,8..144,100&family=Roboto:wght@900&display=swap');
*/

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-flex-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-serif-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.vgw2 {
  display: block;
  width: 10em;
  height: 2em;
  background-color: limegreen;
  content: '';
  color: white;
}

.vgw2::after {
  content: '';
  color: white;
  line-height: 2em;
  text-align: center;
  padding-left: 2em;
}

* {
    box-sizing: border-box;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

html, body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    scroll-behavior: smooth;

    /* background-color: silver; */
    background: #1a1a1a;
    /* color: hsla(0,0%,100%,.70); */
    color: white;

}

body {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: auto auto 1fr auto;

	grid-template-areas:
		"header header header"
		"steuerung main aside"
		"footer footer footer"
	;

	margin: 0 auto;
	max-width: 1400px;
	/* font-family: 'Open Sans', sans-serif; */
}

.slicknav_menu {
	display:none;
}

nav,
#breadcrumbs,
.bereich_breadcrumbs,
main,
aside,
footer {
	border: none;
}


/* nav#st_oben */
header,
#breadcrumbs, .bereich_breadcrumbs,
.slicknav_menu,
footer
{
	grid-column: 1 / -1;
}

header {
  background-color: black;
}

/*  Breadcrumbs */
div#breadcrumbs,
div.bereich_breadcrumbs {
  background-color: silver;
}

/* Steuerung */
nav.main-nav {
  /* background-color: limegreen; */
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}

main {
  /* background-color: yellow; */
  grid-row: 3 / span 1;
  grid-column: 2 / span 1;
}

aside {
  /* background-color: orange; */
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
}

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

@media (max-width: 899px) {
  /* Switch to layout tablet */
  main {
    grid-row: 3 / span 1;
    grid-column: 2 / span 2;
  }

  aside {
    /* background-color: orange; */
    grid-row: 4 / span 3;
    grid-column: 1 / span 3;
  }
}


@media (max-width: 750px) {
  /* Switch to layout handy */
  nav.main-nav {
    /* background-color: limegreen; */
    grid-row: 3 / span 1;
    grid-column: 1 / span 3;
  }

	#steuerung,
	.js #steuerung {
		display:none !important;
	}

  .slicknav_menu,
	.js .slicknav_menu {
		display:block !important;
	}

  main {
    grid-row: 4 / span 1;
    grid-column: 1 / span 3;
  }

  aside {
    /* background-color: orange; */
    grid-row: 5 / span 3;
    grid-column: 1 / span 3;
  }

  footer {
    /* grid-row: 7 / span 1; */
    grid-row: 10 / span 3;
    grid-column: 1 / span 3;
  }


}


/* Vor- und Zurück unten + Soziale Bookmarks */
div#blaettern {
  /* background-color: orange; */
}




/* -----------------------------------  */
/* Bilder / BILDBEREICH / Fotobereich mit Zusatzangaben                     */
/* -----------------------------------  */
.bild_umflossen_rechts,
.bildrechts_umflossen,
.bildrechts {
  float: right;
  margin-left: 1rem;
}

.bildbreite50zigprozent {
  width: 50%;
  height: auto;
}


figure {
  width: 100%;
  height: auto;
  border: 1px solid silver;
  color: hsla(0,0%,100%,.6);
  margin-bottom: 1.5em;
  /* font-size: .8em; */

}

.ohne_rand {
  border: 0 !important;
}


figure3:before {
    content: '\A\A';
    white-space: pre;
}


picture img,
figure img {
    width: 100%;
    height:auto;
}

/* .fotobereich figcaption,
.fotobereich dl,
.fotobereich p, */
figure figcaption,
figure dl,
figure  p
 {
  padding-left: 0.5rem;
  margin-left: 0;
  color: #aaa;
  padding-bottom: 0.4em !important;
  margin-bottom: 0;
  line-height: 1.3em !important;
  font-size: 0.9em;
}

figure p {
  /* width: 100%; */
  margin: 0 auto;
  max-width: 100% !important;
}

figure dl:after {
    content: '\A\A';
    white-space: pre;
}

figure dl {
  font-size: 80%;
  /* margin-bottom: 1.6em; */
  /* background-color: yellow; */
}

figure dt {
  float: left;
  font-weight: bold;
  color: #666;
}

figure dd {
  float: left;
  text-align: left;
  margin: 0;
  padding: 0;

  padding-left: .5em;
  padding-right: 1.5em;
}




/* -----------------------------------  */
/* Bilder nebeneinander in gleich hohen Bereichen  */
/* -----------------------------------  */


/*  .simpleflex -> .bilder_leiste_a */
.bilder_leiste_a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: stretch;
    margin-top: 0rem;
    margin-bottom: 2rem;

    flex-direction: row;
}

.bilder_leiste_a > * {
    flex: 1;
    min-width: 23%;
    max-width: 23%;
    /* margin-right: 1em; */
    margin-right: 2%;
    /* box-shadow: 10px 10px 100px lightgrey; */
    margin-bottom: 1rem;
}

/* @media only screen and (max-width: 650px ) { */
@media only screen and (max-width: 800px /* 29.8125rem 477px */) {
  .bilder_leiste_a > * {
      flex: 1;
      min-width: 31%;
      max-width: 31%;
      min-width: 47%;
      max-width: 47%;
  }
}

@media only screen and (max-width: 450px /* 29.8125rem 477px */) {
  .bilder_leiste_a > * {
      flex: 1;
      min-width: 47%;
      max-width: 47%;
      min-width: 95%;
      max-width: 95%;
  }
}

@media only screen and (max-width: 330px /* 29.8125rem 477px */) {
  .bilder_leiste_a > * {
      flex: 1;
      min-width: 95%;
      max-width: 95%;
  }
}


.bilder_leiste_a > * > *
{
    height: 100%;
}

.bilder_leiste_a > * > * > *
{
    height: 100%;
    /* background-color: yellow; */
}

/* .simplebox.simplebox--top ->  .bilder_leiste_bereich_oben */
.bilder_leiste_bereich_oben {
    padding-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* border-top: 5px solid #3e8ee9; */

    /* transition: transform .5s ease; */

    position: relative;
    /* padding: 1rem; */
    /* border-radius: 3px; */
    height: 100%;
    background-color: #fff;
    background-color: #000;
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.09); */
}



/* .bilder_leiste_a a:nth-child(4n+1) .bilder_leiste_bereich_oben {
  border-color: #3e8ee9;
}

.bilder_leiste_a a:nth-child(4n+2) .bilder_leiste_bereich_oben {
  border-color: orange;
}

.bilder_leiste_a a:nth-child(4n+3) .bilder_leiste_bereich_oben {
  border-color: #fecc02;
}

.bilder_leiste_a a:nth-child(4n+4) .bilder_leiste_bereich_oben {
  border-color: #00c853;
} */


.bilder_leiste_bereich_oben:hover {
  /* transform: scale(1.02); */
}


.bilder_leiste_a .produktbildK {
  width: 100%;
  height: 100%;
  padding: 0 0em;
  object-fit: contain;
}

.bilder_leiste_a figcaption {
  line-height: 1.2em;
  /* margin-bottom: 1em; */
  font-size: 0.9em;
  /* text-align: center; */
  /* border: 1px solid yellow; */
  text-align: left;
  padding: .5em;
}

.bilder_leiste_a a {
  text-decoration: none;
  /* color: limegreen; */
}

.bilder_leiste_a a:hover {
  /* text-decoration: none; */
  /* text-decoration: underline; */
}

.bilder_leiste_a figure {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bilder_leiste_a figure p {
  padding-left: 0rem;
}


.kursdatumsanzeige {
  margin-top: 1em;
}

.kursdatumsanzeige a {
  text-decoration: underline;
}


/* -----------------------------------  */
/* feedbackmodels                */
/* -----------------------------------  */

.feedbackmodels {
  margin-bottom: 1em;
}

.feedbackmodels {
  position: relative;
}

.feedbackmodels legend  {
  font-style: italic;
  padding-bottom: 0em;
  background-color: silver;
  padding: 0 1em;
  color: black;
  border-radius: 0 0 0.5em 0;
  position: absolute;
  top: 0;
  left: 0;
}
.feedbackmodels figure {
  border: 0;
}

.feedbackmodels p {
  padding: 0 1em 1em 1em;
}

.feedbackmodels ul {
  padding-left: 1em;
}




/* -----------------------------------  */
/* Fotolexikon                */
/* -----------------------------------  */

.fotolexionauflistung h2 {
  margin-top: 1em;
}

#fotolexikonindex {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px dashed #666;
}

#fotolexikonindex a {
  display: inline-block;
  border: 1px solid silver;
  padding: 0.5em;
  margin: 0 1em 0.5em 0;
  background-color: #666;
  font-size: 1.1em;
  font-weight: bold;
}

#fotolexikonindex a:hover {
  background-color: limegreen;
  color: black;
}

#fotolexikonindex .aktiv
{
  color: orange !important;
  background-color: #333 !important;
  font-size: 1.5em !important;
  text-decoration: none;
  cursor: default;
}


.indexbegriffe {
   display: inline-block;
   border: 1px solid #666;
   padding: .1em .4em;
   margin: 0 1em 0.7em 0;
   background-color: #333;
   border-radius: .3em;
 }

 .indexbegriffe:hover {
   border: 1px solid white;
 }


 a.indexbegriffe:hover {
   color: yellow !important;
 }



dl.fotolexikon  {
  display: grid;
  grid-template-columns: 13em calc(100% - 13em);
}

.fotolexikon dd {
  margin: 0;
  padding-left: 1em;

  border: 1px solid silver;
  padding: .1em .4em;
  margin: 0 1em 0.7em 0;
  background-color: #333;
  border-radius: .3em;
  margin-bottom: 1em;
}

.fotolexikon h2 {
  margin-top: 0 !important;
}

@media only screen and ( max-width: 820px ) {
    dl.fotolexikon {
      display: inline-block !important;
    }

    .fotolexikon dt {
      background-color: silver;
      color: black;
      font-size: 1.4em;
      padding: .1em .7em;
      margin-bottom: 0;
    }

    .fotolexikon dd {
      margin: 0 0 2em 0;
      border-radius: 0 0 .3em .3em;
    }

    .fotolexikon dd h2 {
      padding-top: .5em;
    }
}

/* -----------------------------------  */
/* Videos im 16/9 Format  */
/*
<figure style="--aspect-ratio:16/9;">
  <iframe class="videoextern" width="900" height="506" src="https://www.youtube.com/embed/iWJcyhzl-ak?rel=0"></iframe>
</figure>
*/
/* -----------------------------------  */

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {
  height: auto;
}
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }


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

  #sitemap {
    -moz-column-count: auto;
    -webkit-column-count: auto;
    column-count: auto;
    column-width: 16em;
  }

  #sitemap a {
    color: white;
  }

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

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

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

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


  #sitemap .ein1 a {
    color: silver !important;
  }

  #sitemap .einr2 {
    font-size: 90%;
  }

  #sitemap .einr3 {
    font-size: 80%;
  }

  #sitemap .einr4 {
    font-size: 80%;
  }


  #sitemap .einr3::before,
  #sitemap .einr4::before
  {
    content: "\002022 \000020";
    color: white;
    padding-left: .3em;
  }

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



/* -----------------------------------  */
/* Auswahl-Schaltflächen                */
/* -----------------------------------  */

.kapitelbuttons {
  display: flex;
  flex-wrap: wrap;
}

.inhaltsauswahl {
  display: flex;

    width: 202px;
    margin-right: 11px;
    float: left;
    color: white;
    /* height: 70px; */
    display: inline-block;
    padding-right: 0px;
    line-height: 1.6em;
    margin-bottom: 20px;

    /* border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black; */
    border: 1px solid #666;
}

.inhaltsauswahl img {
    width: 200px;
    float: left;
}

a.inhaltsauswahl {
    color: white;
    text-decoration: none;
    text-align: center;
    padding-right: 5px;
    background-color: black;
    font-size: .8em;
    line-height: 1.2em;
}

a.inhaltsauswahl:hover {
    color: white;
    text-decoration: none;
    /* background-color: #444; */
    background-color: hsla(24, 100%, 50%, 1);
    text-decoration: underline;
    border: 1px solid hsla(24, 100%, 50%, 1); /* orange */
}

.kapitelbuttons::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}


/* -----------------------------------  */
/* LOGO-Bereich oben */
/* -----------------------------------  */

#logobereich {
    float: left;
    margin: 10px 0;
    /*margin-bottom: 20px;*/
    /*background-color: yellow;*/
    /*border: 1px solid yellow;*/
}

#logo {
  display: inline-block;
    text-align: left;
    font-family: "Arial", Arial,  sans-serif;
    /*width: 365px;*/
    text-transform: uppercase;
    font-weight: bold;
    font-size: 38px;
    line-height: 32px;
    /*background-color: yellow !important;*/
    /*background: url(../bilder/dotcom.png) no-repeat top right;*/
    /*111px breit   32px hoch*/
    background: url(https://www.foto-kurs.com/bilder/dotcom-sw.png) no-repeat top right;
    /*border:1px solid orange;*/
    padding-right: 114px;
}

#logobereich a  {
    color: white;
    text-decoration: none;
}

#logo .rot {
    color: #A9121C;
}

#motto {
    font-family: Arial, sans-serif;
    color: #878787;
    /*margin-top: 8px;*/
    padding: 2px 2px;
    font-size: 10pt;
    /*font-weight: bold;*/
    text-transform: none;
    /*line-height: 1em;*/
    /*text-align: center;*/
    clear: both;
}



/* -----------------------------------  */
/* Kopfbereich rechts */
/* -----------------------------------  */

#linksheader {
	float: right;
    text-align: right;
	padding-top: 6px;
}

.suchbutton {
	display: inline-block;
	line-height: 1.4em;
}

.suchbereich input[type="submit"] {
	padding: 0 1em;
}

#linksheader a {
    text-decoration: none;
    color: silver;
    font-size: 0.8em;
}

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


#linksheader a {
    border-right: 1px solid silver;
    padding-right: 1em;
}

#linksheader a {
    padding-left: 1em;
    font-size: .9em;
    padding-top: 7px;
    padding-bottom: 7px;
    /*  border: 1px solid silver; */
     line-height: 2em;
}

#linksheader a:last-child {
    border-right: 0px solid silver;
    padding-right: 0em;
}








/* -----------------------------------  */
/* HAUPT-INHALT */
/* -----------------------------------  */

main {
  padding: 0 2em 1em 2em;
}

/* font-family: 'Roboto Flex', sans-serif; */
/* font-family: 'Roboto Serif', serif; */

main {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 100;
}

main a {
  color: white;
}


main h1,
main h2,
main h3,
main h4,
main h5
 {
  font-family: 'Roboto Serif', serif;
  /* font-style: italic; */
  font-weight: 400;
  color: white;
  padding-bottom: .3em;
}

main p,
main ul,
main ol {
  font-size: .95em;
  line-height: 1.7em;
  max-width: 40em;
  padding-bottom: 1.2em;
}

main strong,
main b {
  font-weight: 900;
  color: white;
}

main ul,
main ol {
  margin-left: 1em;
  padding-bottom: 2em:
}

main li {
  list-style-type: square;
  padding-bottom: .5em;
}

main li a {
  color: hsla(0,0%,100%,.70);
}

main a:hover {
  color: hsla(24, 100%, 50%, 1); /* orange */
}

main hr {
  clear: both;
  margin-bottom: 1rem;
}

.outdoor {
  background-color: limegreen;
  color: black;
}


kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #eeeeee;
    color: black;
    border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-style: solid;
    border-width: 0.2em;
    font-size: 0.9em;
    padding: 0 0.4em;
    white-space: nowrap;
}

table td kbd {
  display: inline-block;
  margin: 5px 3px !important;
}


.auflistung_ueberschrift {
  padding-bottom: 0;
  /* font-weight: bold; */
}

.auflistung_ueberschrift > ul {
  background-color: silver;
}




/* -----------------------------------  */
/* 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;

    /* fill:red; */
    /* stroke-width:1px; */
    /* color: orange; */
    /* filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); */

    background-image:
    url('data:image/svg+xml;utf8,<svg role="img" fill="silver" 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^="https://www.digistore24.com"],
a[href^="https://www.youtube-nocookie.com"],
/* a[href^="https://www.youtube.com"], */
a[href^="https://www.photocourse.info"],
a[href^="https://www.Foto-Kurs.com"],
a[href^="http://www.foto-kurs.com"],
a[href^="https://www.foto-kurs.com"] {
  background: none;
  padding-left: 0px;
}



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


.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" fill="white" 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>');
}



/* -----------------------------------  */
/* footer */
/* -----------------------------------  */

footer ul {
  list-style: none;
  padding-left: 0;
}
footer {
  background-color: #555;
  color: #bbb;
  line-height: 1.5;
}
footer a {
  text-decoration: none;
  color: #eee;
}
footer a:hover {
  text-decoration: underline;
}
.ft-title {
  color: #fff;
  /* font-family: "Merriweather", serif; */
  font-size: 1.375rem;
  padding-bottom: 0.625rem;
}

/* Footer main */
.ft-main {
  /* padding: 1.25rem 1.875rem; */
  /* display: flex; */
  /* display: grid; */
  /* flex-wrap: wrap; */
}

@media only screen and (min-width: 29.8125rem /* 477px */) {
  .ft-main {
    justify-content: space-evenly;
  }
}

@media only screen and (min-width: 77.5rem /* 1240px */) {
  .ft-main {
    justify-content: space-evenly;
  }
}

.ft-main-item {
  padding: 1.25rem;
  min-width: 12.5rem;
  /* border: 1px solid red; */
}

/* Footer main | Newsletter form */
footer form {
  display: flex;
  flex-wrap: wrap;
}
input[type="email"] {
  border: 0;
  padding: 0.625rem;
  margin-top: 0.3125rem;
}
input[type="submit"] {
  background-color: #00d188;
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 0.9375rem;
  margin-top: 0.3125rem;
}
/* Footer social */
.ft-social {
  padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
  display: flex;
  justify-content: center;
  border-top: 1px #777 solid;
  padding-top: 1.25rem;
}
.ft-social-list li {
  margin: 0.5rem;
  font-size: 1.25rem;
}
/* Footer legal */
.ft-legal {
  padding: 0.9375rem 1.875rem;
  background-color: #333;
}

.liste_nebeneinander {
  padding-right: 2rem;
}

.liste_nebeneinander_listenpunkte {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.liste_nebeneinander_listenpunkte li {
  margin-left: 1em;
  margin-right: 1.625rem;
  white-space: nowrap;
  list-style-type: square;

}


.ft-legal-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.ft-legal-list li {
  margin: 0.125rem 0.625rem;
  white-space: nowrap;
}

/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
    flex: 1;
}
.container {
    clear: both;
    margin-bottom: 4em;
}


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

#steuerung {
    /* width: 250px; */
   /* border-right: 1px solid black; */

   /* margin-top: 0;
   padding-top: 0; */
}

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

#steuerung ul {
  list-style-type: none;
  background-color: white;
  background-color: #444;
  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;
  color: #eee;
}

#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 #666;
}

.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 white !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);
  margin-top: 0;
}

/*.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; */
}



/* -----------------------------------  */
/* fancybox */
/* -----------------------------------  */

.fancybox__caption {
  max-width: 90% !important;
}





/* -----------------------------------  */
/* 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>');
}

.pinterest-w {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M12,2C6.477,2 2,6.477 2,12C2,17.523 6.477,22 12,22C17.523,22 22,17.523 22,12C22,6.477 17.523,2 12,2ZM12,4C16.418,4 20,7.582 20,12C20,16.418 16.418,20 12,20C11.264,20 10.555,19.893 9.879,19.707C10.092,19.278 10.283,18.826 10.387,18.426C10.502,17.986 10.973,16.191 10.973,16.191C11.279,16.775 12.173,17.271 13.125,17.271C15.958,17.271 18,14.666 18,11.428C18,8.323 15.467,6 12.207,6C8.152,6 6,8.722 6,11.686C6,13.064 6.733,14.779 7.906,15.326C8.084,15.409 8.18,15.373 8.221,15.201C8.253,15.07 8.411,14.432 8.482,14.135C8.505,14.041 8.495,13.958 8.418,13.865C8.03,13.394 7.719,12.53 7.719,11.723C7.719,9.65 9.288,7.645 11.961,7.645C14.269,7.645 15.885,9.218 15.885,11.467C15.885,14.008 14.602,15.768 12.932,15.768C12.01,15.768 11.317,15.006 11.539,14.07C11.804,12.953 12.318,11.747 12.318,10.941C12.318,10.22 11.933,9.619 11.131,9.619C10.188,9.619 9.43,10.593 9.43,11.9C9.43,12.732 9.711,13.295 9.711,13.295C9.711,13.295 8.78,17.232 8.609,17.965C8.525,18.327 8.496,18.755 8.494,19.184C5.836,17.883 4,15.159 4,12C4,7.582 7.582,4 12,4Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/svg%3E");
}

.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;
}

#sobookmarks {
    margin-bottom: 1.2em;
}


/* -----------------------------------  */
/* Blättern unten                     */
/* -----------------------------------  */

#blaettern {
	clear: both;
	margin-bottom: 2em;
}

#nav_unten {
    margin-top: 20px;
    /*border-top : 1px solid silver ;*/
    padding-top: 20px;
    z-index: 5;
    position: relative;    
}

#nav_unten_zurueck {
    display: block;
    width: 45%;
    /*background-color: #EFEFEF;*/
    background-color: #191919;
    padding: 10px 4px;
	 /*border: 1px solid #EFEFEF;*/
    border: solid 1px black;
    float: left;
}

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

#nav_unten_zurueck_pfeil {
    display: block;
    float: left;
    width: 16px;
    height:19px;
    background-image:url(bilder/icons-links-hoch-rechts.gif);
    background-position: 0px 2px;
    background-repeat: no-repeat;
    vertical-align:text-top;
}

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

a:hover #nav_unten_zurueck_pfeil {
    background-position: 0px -30px;
}


#nav_unten_weiter {
    display: block;
    width: 45%;
    /*background-color: #EFEFEF;*/
        background-color: #191919;


  /*border: 10px solid #EFEFEF;*/
  padding: 10px 4px;
	/*border: 1px solid #EFEFEF;*/
    border: solid 1px black;
    float: right;
}

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

#nav_unten_weiter_pfeil {
    display: block;
    float: right;
    width: 16px;
    height:19px;
    background-image:url(bilder/icons-links-hoch-rechts.gif);
    background-position: -32px 2px;
    background-repeat: no-repeat;
    vertical-align:text-top;
}

a#nav_unten_anfang {
    border: 0 !important;
    background-color: transparent;
}

a#nav_unten_zurueck,
a#nav_unten_weiter  {
    border: 0 !important;
    background-color: #494949;
    color: silver;
}

a:hover #nav_unten_weiter {
    color: white;
    background-color: #DBDBDB;
}

a:hover #nav_unten_weiter_pfeil {
    background-position: -32px -30px;
}

#nav_unten_anfang {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 16px;
    height:19px;
    padding: 10px;
	    background-color: #191919;

    /*border: 10px solid white;*/
		border: 1px solid black;

}

#nav_unten_anfang_pfeil {
    display: block;
    width: 16px;
    height:19px;
    background-image:url(bilder/icons-links-hoch-rechts.gif);
    background-position: -16px 2px;
    background-repeat: no-repeat;
    vertical-align:text-top;
}

a:hover #nav_unten_anfang_pfeil {
    background-position: -16px -30px;
}



/* -------------------------------------------------------------------------- */
/* FAQ-Bereich für Design */
/* -------------------------------------------------------------------------- */

details.faq-card {
  /* margin-left: 0 !important; */
}

.faq-card {
  border: 1px solid #dce0e8;
  background-color: #333;
  border-radius: 6px;
  padding: 1em 1em 0 0;
	margin-top: 1em;
  margin-bottom: .5em;
  list-style: none;
  position: relative;
  cursor: pointer;

	padding-left: 1em;
  padding-bottom: 1em;

}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* details summary h3, */
details summary {
  /* font-weight: 300; */
	color: white;
  font-size: 1em;
	margin-left: 1em;
	padding-bottom: 1em;
  text-decoration: underline;
	font-weight: bold;
}


details[open] summary h3,
details[open] summary {
  color: orange !important;
  text-decoration: none;
  /* font-weight: 300; */
}


details[open] {
	border: 1px solid orange ;
	transition: 0.7s ease;
}

details[open] summary {
	text-decoration: underline;
}

/* details[open] .faq-card-spoiler, */
details[open] div {
  display: inline-block;
  padding-top: 8px;
  /* color: #8b8b9a; */
}


/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
  font-family: "Hiragino Mincho ProN","Open Sans", sans-serif;
  content: "▶";
  position: absolute;
  top: 1rem;
  left: 0.8rem;
  transform: rotate(0);
  transform-origin: center;
  transition: 0.2s transform ease;
}
details[open] > summary:before {
  transform: rotate(90deg);
  transition: 0.45s transform ease;
}




/* -------------------------------------------------------------------------- */
/* Tabellen-Bereich für Design */
/* -------------------------------------------------------------------------- */

table {
  margin-bottom: 1em;
  border-collapse: collapse;
}

thead {
  background-color: silver;
  color: black;
  font-weight: bold;
  text-align: left;
}

th,
td {
  padding: 0 .5em;
  vertical-align: top;
  border-right: 2px solid #1a1a1a;
}

th:last-child,
td:last-child {
  border-right: none;
}


tbody tr:nth-child(odd) {
  background-color: #444;
}

tbody tr:nth-child(even) {
  background-color: #666;
}

tbody tr:hover {
  background-color: hsla(120, 30%, 50%, 0.4);
}



/* -------------------------------------------------------------------------- */
/* INFO-Box */
/* -------------------------------------------------------------------------- */


.umfliessenbereinigen {
  clear: both !important;
  }

.infobox {
    border: 2px solid #555;
    background-color: #555;
    /* width: 70%;  */
    display: block;
	position: relative;
  margin-bottom: 2em;
}

.infobox::after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

.infobox h2 {
/*  width: 100%; */
/*  max-width: 70%; */
/*  color: orange;  */
/*  transform: rotate(90deg);  */
}

.infobox p {
  margin-left: 80px;

}

.infobox h2 {
  writing-mode: vertical-rl;
  /* background-color: yellow; */
  font-size: 1.6em;
  font: bold 1.2em sans-serif !important;
  letter-spacing: .1em;
  word-spacing: 0.6em;
  text-transform: uppercase;
  text-shadow: none !important;
  color: white !important;

  margin: 0;
  padding: 0;
  padding-top: .2em;
  padding-left: .5em;
/*  width: 100%;  */
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
}


.infobox b {
  color: white !important;
}

.infobox dl {
  margin-left: 80px;
}

.infobox dt {
  font-weight: bold;
  padding-bottom: 0em;
  color: white !important;
}

.infobox dd {
  padding-left: 0;
  margin-left: 0 !important;
  padding-bottom: 1em;
  color: #ddd !important;
}

.infobox .bildboxrechts {
  display: inline-box;
  float: right;
  width: 50%;
  height: auto;
  margin-left: 1em;
  padding: 1em 1em 0 0;
  clear: both !important;
}

/* -----------------------------------  */
/* Spalten-erstellen                     */
/* -----------------------------------  */

.spaltenFlexbox {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin-bottom: 1.6em;
}

.spalteB1,
.spaltenbreite1 {
    flex: 1;
}

.spalteB2,
.spaltenbreite2 {
    flex: 2;
}



.spalten2 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}




.spalten2flex {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
    flex: 0 0 auto;
    box-sizing: border-box;
    /* border:1px solid green; */
    /* padding: 0 15px; */
}

.spalten2flex:nth-of-type(even) p,
.spalten2flex:nth-of-type(even) dl
 {
    /* background-color: limegreen; */
    margin-left: 20px ;
    padding-right: 1rem;
}



/* -----------------------------------  */
/* veranstaltungsdaten Box anzeigen                 */
/* -----------------------------------  */

.veranstaltungsdatenF {
    background-color: #333;
    border: 1px solid silver;
    padding: 1em;
    margin-bottom: 1.5em;
}

.veranstaltungsdatenF p {
    margin-bottom: 0em;
}

.veranstaltungsdatenF {
  display: grid;
  grid-template-columns: 1fr 4fr;
}


.veranstaltungsdatenF p:nth-child(2n+2) {
}

@media only screen and ( max-width: 500px ) {
    .veranstaltungsdatenF {
      display: grid;
      grid-template-columns: 1fr;
    }
    .veranstaltungsdatenF p:nth-child(2n+2) {
      padding-bottom: 1em;
    }

    .veranstaltungsdatenF b {
        width: 100%;
        text-align: left;
    }
}



/* -----------------------------------  */
/* Kursanmeldung Formular                 */
/* -----------------------------------  */

input::-webkit-input-placeholder { color:silver; transition: color 1s; }
input::-moz-placeholder { color:silver; transition: color 1s }
input:-ms-input-placeholder { color:silver; transition: color 1s}
input:-moz-placeholder { color:silver; transition: color 1s }

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
input:focus:-moz-input-placeholder { color:transparent; }

  #kursanmeldung { border: 1px solid silver; padding: 1em;}
  #kursanmeldung label { width: 23%; display: inline-block; }
  #kursanmeldung p { background-color: #333; width: 100% !important; }
  #kursanmeldung h2 { margin: 0; }

  #kursanmeldung input[type="text"],
  #kursanmeldung input[type="email"],
  #kursanmeldung input[type="tel"]
  { width: 75%; padding: 0.625rem; }

  #kursanmeldung .formfeldbeschriftung { width: 23%; display: inline-block; }

  #kursanmeldung input[type="submit"]  { border-radius: .8em; background-color: green !important;
    transition-property: background-color;
    transition-duration: 1s;
  }
  #kursanmeldung input[type="submit"]:hover  { border-radius: .8em; background-color: orange !important;
  }



/* -----------------------------------  */
/* Kartenansicht (im allgemeine Fotokurs)                 */
/* -----------------------------------  */

.kolumnen > .keinenspaltenumbruch {
   display: inline-block !important;
  border: 2px solid orange;
}

 .galerie2 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   /* grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); */
   grid-gap: 2rem;
 /*	background-color: #eee; */
     /* padding: 1em;
     border: 1px solid black;
     padding: .4em;
     */
     margin-bottom: 2em;
 }

 .galerie2 .karte {
   display: inline-block;
   background-color: #333;
   border: 1px solid silver;
   font-size: 90%;
   line-height: 1.2em;
   text-decoration: none;
   /* text-align: center; */
   color: #333;
 }

 .galerie2 .karte .texte {
   padding: .6em;
 }

 .galerie2 .karte .texte li,
 .galerie2 .karte .texte p
 {
   color: white !important;
 }

 .galerie2 .karte .texte p b {
   color: #ccc !important;
 }

 .galerie2 .karte .texte p strong {
   color: #fff !important;
 }



 .galerie2 .karte li {
   line-height: 1.2em;
   }

 .galerie2 a:hover {
   text-decoration:underline;
 }
 .galerie2 img,
 .galerie2 .card img {
   width: 100%;
       height: auto;
 }

 .card {
   border:2px solid red;
 }


 /* -----------------------------------  */
 /* terminuebersicht (für die Kursübersichten)                 */
 /* -----------------------------------  */

 .terminuebersicht {
   width: 100% !important;
   float: none !important;
 }




 /* -----------------------------------  */
 /* breadcrumbs */
 /* -----------------------------------  */

 .bereich_breadcrumbs {
   border-top: 2px solid #a9131d;
   background-color: hsla(0, 50%, 90%, 0.2) !important;
   margin-bottom: 1.6em !important;
   font-size: 80%;
 }

 .breadcrumbs {
   /* background-color: hsla(0, 50%, 50%, 0.4); */
 }

 .breadcrumbs ol {
   margin: 0;
   padding: 0;
 }

 .breadcrumbs li {
   list-style-type: none !important;
   /* background-color: hsla(100, 70%, 50%, 0.4); */
   margin: 0;
   padding: 0;
   display: inline-block;
 }

 .breadcrumbs li a {
   text-decoration: none;
   /* padding-right: 2em; */
   padding: .2em 0;
   margin-right: 1em;
   display: inline-block;
   color: #bbb;
 }

 .breadcrumbs li a:hover {
   text-decoration: underline;
   color: white;
 }

 .breadcrumbs li::before {
     content: "» ";
 }








 /* -----------------------------------  */
 /* E-Book Design */
 /* -----------------------------------  */








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


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

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

 .ebook {
   width: 100%;
    /* border: 1px solid limegreen; */
     display: inline-block;
     margin: 0 auto;
 }

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


 #bereich_ebook .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;
  color: red;
 }

 .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;
 	width: 900px;
 	width: 100%;
 	/* min-height: 300px; */
 	display: inline-block;
 	/* margin: 30px 20px 30px 30px; */
 	margin: 20px 0px 0px 0px;
 	/* padding: 0 0 0 60px; */
 	padding: 0 0 0 360px;
 	padding: 0 0 0 50%;
 	vertical-align: top;
   /* border: 1px solid red; */
 }

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

 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; */
 	width: 320px;
 	height: 220px;
 	/* height: 120px; */
 	-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 {
   clear: both;
 	padding-left: 240px;
 	padding-left: -240px;
 	text-align: left;
 	position: absolute;
 	top: 0%;
 	left: 160px;
 	left: 0px;
 	width: 380px;
 	width: 600px;
 	-webkit-backface-visibility: hidden;
     border: 0;
     background-color: transparent;
     border: 1px solid yellow;
 }

 .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;
 }

 #bereich_ebook {
   background-color: hsla(0, 0%, 100%, .8);
   max-width: 1030px;
   height: 350px;
   margin: 0 auto;
 }

 /* .ebook {
   width: 100%;
     display: inline-block;
     margin: 0 auto;
 } */

 #bereich_ebook .link_ebook { color: #333;}
 #bereich_ebook a.link_ebook { color: #000; font-weight: bold;}
 #bereich_ebook a.link_ebook:hover { color: darkgreen;}

 #bereich_ebook legend {
   background-color: white;
   color: black;
   margin-left: -1em;
   padding: 0.2em 1em;
   font-weight: bold;
   border-radius: 1em 1em;
 }

 .ebook_kurzb {
   font-size: 90%;
   padding-top: .3em;
   color: #333;
 }



@media screen and (max-width: 37.5em) {
  main {
      padding: 0 1em 1em 1em;
  }

  .spaltenFlexbox {
     display: block;
  }
}