@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*/
    /*border:1px solid orange;*/

    /*
    background: url(https://www.foto-kurs.com/bilder/dotcom-sw.png) no-repeat top right;
    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 h2 {
  margin-top: 1em;
}

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"],
a[href^="http://www.php-kurs.com"],
a[href^="https://www.php-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;
  }
}

/*  fancybox.css  */

.fancybox__backdrop::after {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  filter: blur(2px);
  left: 50%;
  top: 50%;
  transform: scale(11);
  opacity: 0.3;
  background-image: var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.fancybox__toolbar {
  padding: 16px;
}

.fancybox__toolbar,
.fancybox__nav {
  --f-button-border-radius: 50%;
  --f-button-bg: rgb(91 78 76 / 64%);
  --f-button-hover-bg: rgb(91 78 76 / 74%);
  --f-button-active-bg: rgb(91 78 76 / 84%);
}

.fancybox__nav {
  --f-button-svg-width: 22px;
  --f-button-svg-height: 22px;
}

.fancybox__thumbs.is-classic {
  --f-thumb-width: 48px;
  --f-thumb-height: 48px;
  --f-thumb-gap: 16px;

  --f-thumb-border-radius: 6px;
  --f-thumb-outline: 0;
}

:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-zoomInUp{animation:.2s cubic-bezier(0.215, 0.61, 0.355, 1) .1s both f-zoomInUp}.f-zoomOutDown{animation:.3s cubic-bezier(0.16, 1, 0.3, 1) both f-zoomOutDown}@keyframes f-zoomInUp{from{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}}.f-throwOutUp{animation:.175s ease-out both f-throwOutUp}.f-throwOutDown{animation:.175s ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0, -150px, 0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0, 150px, 0);opacity:0}}.f-fadeIn{animation:.2s ease both f-fadeIn;z-index:2}.f-fadeOut{animation:.2s ease both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeOut{100%{opacity:0}}.f-fadeSlowIn{animation:.5s ease both f-fadeSlowIn;z-index:2}.f-fadeSlowOut{animation:.5s ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeSlowOut{100%{opacity:0}}.f-fadeFastIn{animation:.2s ease-out both f-fadeFastIn;z-index:2}.f-fadeFastOut{animation:.2s ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}100%{opacity:1}}@keyframes f-fadeFastOut{100%{opacity:0}}.f-crossfadeIn{animation:.2s ease-out both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:.1s linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-crossfadeOut{100%{opacity:0}}.f-slideIn.from-next{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext}.f-slideIn.from-prev{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev}.f-slideOut.to-next{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext}.f-slideOut.to-prev{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translateX(100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideInNext{0%{transform:translateX(-100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideOutNext{100%{transform:translateX(-100%)}}@keyframes f-slideOutPrev{100%{transform:translateX(100%)}}.f-classicIn.from-next{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;z-index:2}.f-classicIn.from-prev{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;z-index:2}.f-classicOut.to-next{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;z-index:1}.f-classicOut.to-prev{animation:.85s cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translateX(-75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translateX(75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicOutNext{100%{transform:translateX(-75px);opacity:0}}@keyframes f-classicOutPrev{100%{transform:translateX(75px);opacity:0}}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}.f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}.f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}.f-button:focus:not(:focus-visible){outline:none}.f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}.f-button[disabled]{cursor:default}.f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}html.with-fancybox{scroll-behavior:auto;width:auto;overflow:visible}html.with-fancybox body{touch-action:none}html.with-fancybox body.compensate-for-scrollbar{width:auto;overflow:hidden !important;overscroll-behavior-y:none;margin-right:var(--fancybox-scrollbar-compensate, 0)}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:1050;outline:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}.fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__viewport{width:100%;height:100%}.fancybox__track{display:flex;margin:0 auto;height:100%}.fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden}.fancybox__slide.has-image{overflow:hidden}.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}.fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}.is-loading .fancybox__content{opacity:0}.is-draggable .fancybox__content{cursor:move;cursor:grab}.can-zoom_in .fancybox__content{cursor:zoom-in}.can-zoom_out .fancybox__content{cursor:zoom-out}.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto}.fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__slide.is-animating>.fancybox__content{filter:blur(0px);will-change:transform,width,height}.fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}.hide-image .fancybox-image{opacity:0}.fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}.is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden}.is-compact .fancybox__caption{padding-bottom:0}.f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}.fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}.is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}.is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}.fancybox__content>.f-button.is-close-btn:hover{opacity:1}.fancybox__footer{padding:0;margin:0;position:relative}.fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}.is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)}.is-compact .fancybox__footer .fancybox__caption{padding:12px}.is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}.fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}.fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1}.is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}.is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer}.fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none}.fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none}.fancybox-focus-guard{position:fixed;top:1px;left:1px;width:1px;height:0px;padding:0px;margin:-1px;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);white-space:nowrap;border-width:0px}.fancybox__container:not([aria-hidden]){opacity:0}.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:.25s ease .1s backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:.35s ease backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:.15s ease forwards f-fadeOut}.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:.35s ease forwards f-fadeOut}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:100%;height:100%}.fancybox__container:not(.is-compact) .has-iframe .fancybox__content,.fancybox__container:not(.is-compact) .has-map .fancybox__content,.fancybox__container:not(.is-compact) .has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 20px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden}.f-thumbs__track{display:flex;will-change:transform}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);min-width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--left, 0)*1px);width:calc(100% - var(--width, 0)*1px);cursor:pointer}.is-modern .f-thumbs__slide{--clip-path: inset( 0 calc( (var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * 0.5 * (1 - var(--progress, 0)) ) round var(--f-thumb-border-radius, 0) );transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern .f-thumbs__slide:focus-within:not(.is-selected){filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.is-modern .f-thumbs__slide>*{clip-path:var(--clip-path)}.is-modern.in-touch .f-thumbs__slide{filter:none}.is-modern.is-resting .f-thumbs__slide{transition:all .33s ease}.is-modern.is-resting .f-thumbs__slide>*{transition:all .33s ease}.f-thumbs__slide__button{appearance:none;width:100%;height:100%;margin:0;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{position:absolute;overflow:hidden;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover}.f-thumbs.is-horizontal .f-thumbs__track{margin:0 auto;padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;margin:auto 0;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}.fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)}.fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 20px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}.fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}.is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}.fancybox__thumbs.is-hidden{max-height:0px !important}.is-closing .fancybox__thumbs{transition:none !important}.fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20}.fancybox__toolbar :focus-visible{z-index:1}.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}.is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}.fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none}.fancybox__infobar span{padding:0 5px}.fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}[data-fancybox-toggle-slideshow]{position:relative}[data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}[data-fancybox-toggle-slideshow] svg g:first-child{display:flex}[data-fancybox-toggle-slideshow] svg g:last-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:last-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}.f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none}




/* SlickNav */

/*!
 * SlickNav Responsive Mobile Menu v1.0.10
 * (c) 2016 Josh Cope
 * licensed under MIT
 */
.slicknav_btn {
  position: relative;
  display: block;
  vertical-align: middle;
  float: right;
  padding: 0.438em 0.625em 0.438em 0.625em;
  line-height: 1.125em;
  cursor: pointer; }
  .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: 0.188em; }

.slicknav_menu {
  *zoom: 1; }
  .slicknav_menu .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left; }
  .slicknav_menu .slicknav_icon {
    float: left;
    width: 1.125em;
    height: 0.875em;
    margin: 0.188em 0 0 0.438em; }
    .slicknav_menu .slicknav_icon:before {
      background: transparent;
      width: 1.125em;
      height: 0.875em;
      display: block;
      content: "";
      position: absolute; }
  .slicknav_menu .slicknav_no-text {
    margin: 0; }
  .slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
  .slicknav_menu:before {
    content: " ";
    display: table; }
  .slicknav_menu:after {
    content: " ";
    display: table;
    clear: both; }

.slicknav_nav {
  clear: both; }
  .slicknav_nav ul {
    display: block; }
  .slicknav_nav li {
    display: block; }
  .slicknav_nav .slicknav_arrow {
    font-size: 0.8em;
    margin: 0 0 0 0.4em; }
  .slicknav_nav .slicknav_item {
    cursor: pointer; }
    .slicknav_nav .slicknav_item a {
      display: inline; }
  .slicknav_nav .slicknav_row {
    display: block; }
  .slicknav_nav a {
    display: block; }
  .slicknav_nav .slicknav_parent-link a {
    display: inline; }

.slicknav_brand {
  float: left; }

.slicknav_menu {
  font-size: 16px;
  box-sizing: border-box;
  background: #4c4c4c;
  padding: 5px; }
  .slicknav_menu * {
    box-sizing: border-box; }
  .slicknav_menu .slicknav_menutxt {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000; }
  .slicknav_menu .slicknav_icon-bar {
    background-color: #fff; }

.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #222; }

.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  list-style: none;
  overflow: hidden; }
  .slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 0 0 20px; }
  .slicknav_nav .slicknav_row {
    padding: 5px 10px;
    margin: 2px 5px; }
    .slicknav_nav .slicknav_row:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: #ccc;
      color: #fff; }
  .slicknav_nav a {
    padding: 5px 10px;
    margin: 2px 5px;
    text-decoration: none;
    color: #fff; }
    .slicknav_nav a:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: #ccc;
      color: #222; }
  .slicknav_nav .slicknav_txtnode {
    margin-left: 15px; }
  .slicknav_nav .slicknav_item a {
    padding: 0;
    margin: 0; }
  .slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0; }

.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 12px;
  height: 44px; }



  /* -----------------------------------  */
/* 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-php"]::before, 
pre code[class*="language-sql"]::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-php"]::before {
    content: 'PHP';
    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-sql"]::before {
    content: 'SQL';
    background-color: #32cd32 !important;
}

code[class*="language-sql"] {
    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;
}



.glasboxkopf {
  text-align: left;
  }

.glasboxkopf span {
  font-weight: bold;
}


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



/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+markup-templating+php+sql */
/**
 * 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;
  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;
  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;
}

.token.punctuation {
  color: #5F6364;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
  color: #c92c2c;
}

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

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





/* DOPPELT !!!!! */






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

.token.comment {
/*    color: silver;    */
    color: #aaa;    
}

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

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
/*  color: #c92c2c;*/
  color: hsl(220, 50%, 50%);   /* blau */
    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;  /* grün */
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
/*  color: #a67f59;*/
    color: mediumvioletred;
  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.keyword {
    color: hsl(220, 50%, 50%);    /* blau für PHP-Befehle und <p> */
}

.token.double-quoted-string.string {
    color: #e2a029;    /* orange für PHP zwischen Anführungszeichen */
}

.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.delimiter.important {
    color: black;
}

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




/* PrismJS 1.30.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+php+sql */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;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[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{/*padding:1em;margin:.5em 0;*/overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{/*background:#f5f2f0*/}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}



/* -----------------------------------  */
/* fuer externe Videos */
/* -----------------------------------  */
.videobereich,
#videobereich {
  position: relative;
  height: 0;
/*  padding-bottom: 56.25%;*/
  padding-bottom: 64%;
    
}

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


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;
    max-width: 100% !important;
}
.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;
}

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

footer {
    font-size: 80%;
}

#wprojekte,    
#footerEbookVideos {
    /* Abstand zum Rand */
    padding: 10px;
}
    
#footerEbookVideos {
/*    background-color: #eee;*/
    background-color: #666;
    display: flex;
}

#footerEbookVideos div {
    flex: 1;
}

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

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



@media screen and (max-width:750px) { footer img {  width: auto; height:  150px; } }    
@media screen and (max-width:550px) { footer img {  width: auto; height:  130px; } }    
@media screen and (max-width:420px) { footer img {  width: auto; height:  100px; } }    
@media screen and (max-width:330px) { footer img {  width: auto; height:  80px; } }  

@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: #ddd;    
}
    
#wprojekte {
    background-color: #115a88;
}
    
#wprojekte strong {
    color: silver;
    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;
    }
}