<!--


html, body {margin:0; color:#444; font-family:'Cormorant Garamond', serif}
html {height:100%}
body {}



h1 {font-weight:300; font-size:38px; margin:0 0 40px 0; line-height:50px}
h2 {font-weight:300; font-size:30px; margin:50px 0 30px 0; letter-spacing:0.2px}
h3 {font-weight:300; font-size:24px; margin:50px 0 30px 0; letter-spacing:0.2px}
p {font-weight:400; font-size:18px; line-height:27px; margin:0 0 25px 0}
a {text-decoration:none; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s}
#content p a, #content dd a {color:#9D1A1A; border-bottom:1px solid #9D1A1A}
#content p a:hover, #content dd a:hover {color:#E51212; border-bottom:1px solid #E51212}
#content li a {color:#9D1A1A; border-bottom:1px solid #9D1A1A; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s}
#content li a:hover {color:#E51212; border-bottom:1px solid #E51212}
a:hover, a:active, a:focus {outline:0}
a.extern:after {content:'\279A'; border-bottom:1px solid #fff; padding-left:3px}
img {vertical-align:middle}
strong {font-weight:600}
.clear {clear:both}
ul {margin:20px 0 40px 18px; padding:0}
li {line-height:40px; font-weight:400; font-size:18px; list-style-type:none; position:relative}
#content ul li:before {content:'\276F'; font-size:14px; margin-right:8px; position:absolute; top:0; margin-left:-18px}
ol {margin:0; padding:0 0 25px 25px}
ol li {list-style-type:decimal}
p, li, dl, ol {letter-spacing:0px}

#buch h2, .anchorspace {scroll-margin-top:25px}



/* PORTAL */

#eingangsportal {background-image:url(images/eingangsportal.jpg); background-position:center -100px; background-repeat:no-repeat; background-attachment:fixed; min-height:100%; overflow-y:scroll; background-color:#fff; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
#eingangsportal #efooter-wrap {position:absolute; bottom:0; width:100%; text-align:center}
#eingangsportal #eingang {display:table; margin:0 auto}
#eingangsportal #eingang a {color:#aa0000; background-color:#fff; display:table; font-weight:600; font-size:20px; padding:12px 90px; text-decoration:none;
border-top-left-radius:28px; border-top-right-radius:28px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s}
#eingangsportal #eingang a:hover {padding:12px 90px 52px 90px}
#eingangsportal #efooter {padding:22px 25px; background-color:#9D1A1A}
#eingangsportal #efooter h1 {color:#fff; margin:0 0 10px 0; font-weight:600; font-size:23px; letter-spacing:1px; line-height:30px}
#eingangsportal #efooter p {color:#fff; margin:0; font-size:16px; line-height:22px}
#eingangsportal #efooter a {color:#9D1A1A; text-decoration:none}
#eingangsportal #efooter strong {color:#fff; font-weight:500}

@media (min-width:1400px) and (min-height:100px) and (max-height:800px) {
#eingangsportal {background-position:center -200px}
}
@media (min-width:1400px) and (min-height:800px) and (max-height:900px) {
#eingangsportal {background-position:center -175px}
}
@media (min-width:1400px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -125px}
}
@media (min-width:1400px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -75px}
}
@media (min-width:1400px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -50px}
}
@media (min-width:1500px) and (min-height:100px) and (max-height:800px) {
#eingangsportal {background-position:center -250px}
}
@media (min-width:1500px) and (min-height:800px) and (max-height:900px) {
#eingangsportal {background-position:center -200px}
}
@media (min-width:1500px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -125px}
}
@media (min-width:1500px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -100px}
}
@media (min-width:1500px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -75px}
}
@media (min-width:1600px) and (min-height:100px) and (max-height:800px) {
#eingangsportal {background-position:center -275px}
}
@media (min-width:1600px) and (min-height:800px) and (max-height:900px) {
#eingangsportal {background-position:center -225px}
}
@media (min-width:1600px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -200px}
}
@media (min-width:1600px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -150px}
}
@media (min-width:1600px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -125px}
}
@media (min-width:1700px) and (min-height:100px) and (max-height:800px) {
#eingangsportal {background-position:center -300px}
}
@media (min-width:1700px) and (min-height:800px) and (max-height:900px) {
#eingangsportal {background-position:center -275px}
}
@media (min-width:1700px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -250px}
}
@media (min-width:1700px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -200px}
}
@media (min-width:1700px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -150px}
}
@media (min-width:1800px) and (min-height:100px) and (max-height:850px) {
#eingangsportal {background-position:center -315px}
}
@media (min-width:1800px) and (min-height:850px) and (max-height:900px) {
#eingangsportal {background-position:center -300px}
}
@media (min-width:1800px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -275px}
}
@media (min-width:1800px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -250px}
}
@media (min-width:1800px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -225px}
}
@media (min-width:1900px) and (min-height:100px) and (max-height:850px) {
#eingangsportal {background-position:center -335px}
}
@media (min-width:1900px) and (min-height:850px) and (max-height:900px) {
#eingangsportal {background-position:center -325px}
}
@media (min-width:1900px) and (min-height:900px) and (max-height:1000px) {
#eingangsportal {background-position:center -300px}
}
@media (min-width:1900px) and (min-height:1000px) and (max-height:1050px) {
#eingangsportal {background-position:center -275px}
}
@media (min-width:1900px) and (min-height:1050px) and (max-height:1100px) {
#eingangsportal {background-position:center -250px}
}
@media (min-width:1800px) and (min-height:1100px) {
#eingangsportal {background-position:center bottom}
}




/* HEADER */

#header-mobil {display:none}

@media (max-width:399px) {
#header-wrap, #header-wrap img {width:100%; height:auto}
#header-mobil {display:block; background-image:url(images/header-background-mobil.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover}
}
@media (min-width:400px) and (max-width:1919px) {
#header-wrap {width:100%; height:250px; background-image:url(images/header-background.jpg); background-position:center center; background-repeat:no-repeat}
}
@media (min-width:1920px) and (max-width:2289px) {
#header-wrap {width:100%; height:300px; background-image:url(images/header-background.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover}
}
@media (min-width:2290px) {
#header-wrap {width:100%; height:350px; background-image:url(images/header-background.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover}
}
@media (max-width:399px) {
#header {margin:0 auto; width:100%; padding:0}
}
@media (min-width:400px) and (max-width:1080px) {
#header {margin:0 auto; width:88%; padding:0 6% 0 6%}
}
@media (min-width:1080px) {
#header {margin:0 auto; width:980px; padding:0 50px 0 50px}
}

@media (max-width:399px) {
#title {background-color:#9D1A1A; display:block; padding:12px 24px; text-align:center}
#title p.author {font-weight:300; font-size:18px; margin-left:0px}
}
@media (min-width:400px) {
#title {background-color:#9D1A1A; display:table; padding:12px 24px; border-bottom-left-radius:20px; border-bottom-right-radius:20px}
#title p.author {font-weight:300; font-size:18px; margin-left:55px}
}
#title p, #title p strong {color:#fff; margin:0; line-height:26px}
#title p strong {font-weight:600; font-size:22px}


#navigation-wrap {width:100%; background-color:#fff; display:inline-block;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15)}

@media (max-width:799px) {
#navigation {padding:0; position:relative; width:100%}
}
@media (min-width:800px) and (max-width:1080px) {
#navigation {margin:0 auto; width:90%; padding:0 5% 0 5%}
}
@media (min-width:1080px) {
#navigation {margin:0 auto; width:980px; padding:0 50px 0 50px}
}
#navigation .active a {color:#9D1A1A}


@media (max-width:799px) {
ul#navigation {margin:5px 0 2px 0; padding:0; list-style-type:none}
#navigation li {background-color:#fff; margin:0; padding:0; font-weight:500; text-align:center; border-bottom:1px solid #aaa}
#navigation li:last-child {border-bottom:0px solid transparent}
#navigation li a {text-decoration:none; color:#333; line-height:44px; display:block; padding-top:1px}
#navigation li a:hover {color:#9D1A1A}
}
@media (min-width:800px) {
#navigation li {list-style-type:none; float:left; font-weight:500}
#navigation li:first-child a {padding:0 24px 0 0}
#navigation a {text-decoration:none; padding:0 24px; color:#333; line-height:56px}
#navigation a:hover {color:#9D1A1A}
}


@media (max-width:799px) {
#navimobil {display:none} /* div wichtig, ohne 1. Auf- Zuklappfehler, 2. Übergang von 760 -> 761 display:block!important Problem mit hideshow */
#navigation {opacity:100!important; display:block!important}
}
@media (min-width:800px) {
#navimobil {display:block!important}
}


@media (max-width:799px) {
#menuwrap {position:relative; width:100%} /* menu-wrap mit Strich funktioniert nicht auf Smartphone mit Javascript in Verbindung */
#menu {text-align:center; cursor:pointer; font-size:24px; margin:0; background-color:#fff; line-height:56px; display:block; font-weight:300}
#menu:before {content:"\2630"; margin-right:7px; color:#333;
display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
#navigation {display:none}
}
@media (min-width:800px) {
#menu {display:none; visibility:hidden}
}





/* CONTENT */

#content {margin:0 auto; min-height:420px}
@media (max-width:799px) {
#content {width:88%; padding:50px 6% 100px 6%}
}
@media (min-width:800px) and (max-width:1080px) {
#content {width:88%; padding:60px 6% 100px 6%}
}
@media (min-width:1080px) {
#content {width:980px; padding:60px 50px 100px 50px}
}


.imgcenter {display:table; margin:50px auto 10px auto; max-width:700px}
.imgcenter img {height:auto; border-radius:5px}
.imgcenter img.einfuehrung:first-child {float:left; margin-right:3%; width:31.65%}
.imgcenter img.einfuehrung:last-child {width:65.35%}
.imgcenter img.praesenz:first-child {float:left; margin-right:3%; width:29.9%}
.imgcenter img.praesenz:last-child {width:67.1%}
.imgcenter img.praesenz3 {width:100%}

.center {text-align:center}
@media (max-width:800px) {
.imgright, .imgleft {text-align:center; margin:40px 0 50px 0}
.imgright img, .imgleft img {max-height:400px; height:auto; width:auto; max-width:100%; margin:0; border-radius:5px}
#buchprojekte .imgright img.buchquer {max-width:380px; height:auto; width:100%; margin:0}
}
@media (min-width:800px) {
.imgright {float:right}
.imgleft {float:left}
.imgright img {max-height:400px; width:auto; margin:15px 0 40px 40px; border-radius:5px}
.imgleft img {max-height:400px; width:auto; margin:15px 40px 40px 0; border-radius:5px}
#buchprojekte .imgright img.buchquer {max-width:380px; height:auto; margin:6px 0 40px 40px}
#buchprojekte .imgleft img.buchquer {max-width:380px; height:auto; margin:6px 40px 40px 0}
}


@media (max-width:920px) {
#buecher .buecher .buch {margin:0 auto 30px auto; text-align:center}
#buecher .buecher .buch img {max-height:280px; width:auto}
#buecher .buecher div:last-child {margin:0 auto}
#buecher .buecher .buch p {margin:4px 0 0 0}
}
@media (min-width:920px) {
#buecher .buecher div {margin:0 9px}
#buecher .buecher div:first-child {margin:0 9px 0 0}
#buecher .buecher div:last-child {margin:0 0 0 15px}
#buecher .buecher .buch {float:left}
#buecher .buecher .buch p {margin:8px 0 0 0}
}
@media (min-width:530px) and (max-width:750px) {
#buecher .buecher .buch {float:left; width:50%}
}
@media (min-width:750px) and (max-width:920px) {
#buecher .buecher .buch {float:left; width:33%}
}
@media (min-width:920px) and (max-width:1020px) {
#buecher .buecher .buch img {max-height:200px; width:auto}
}
@media (min-width:1020px) {
#buecher .buecher .buch img {max-height:230px; width:auto}
}

#buecher .buecher {margin:40px auto 50px auto; display:table}
#buecher .buecher img {padding:6px; border3:3px solid transparent; border-radius:10px;
-webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s}
#buecher .buecher img:hover {border3:3px solid #9D1A1A;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5)}
#buecher .buecher .buch p {text-align:center}


#buch #content {padding-top:40px}
#buch #back, #buchprojekt #back {margin-bottom:40px}
#buch #back a, #buchprojekt #back a {border-bottom:0px solid transparent}
#buch #back a:before, #buchprojekt #back a:before {content:'\00AB'; margin-right:8px}

#buch h1 {font-size:32px; line-height:40px; font-weight:300}
#buch .untertitel {font-size:24px; font-weight:300}
#buch .untertitel2 {font-size:22px; font-weight:300; line-height: 35px}
@media (max-width:999px) {
#buch .buch {margin:0 auto 50px auto; text-align:center}
#buch .buch img {margin:0 auto}
}
@media (min-width:1000px) {
#buch .buch {float:left; width:35%}
#buch .buchinfo {float:left; margin-left:5%; width:60%}
}
#buch .buch img {max-height:480px; height:auto; width:auto; max-width:100%; border-radius:5px}
#buch .buchinfo ul {margin:40px 0 40px 18px}
#buch .buchinfo .kaufen a {padding:5px 18px; border:1px solid #9D1A1A; display:table; text-decoration:none; color:#333; margin-top:60px}
#buch .buchinfo .kaufen a:hover { background-color:#9D1A1A; color:#fff}
#buch .clear {height:20px}
#buch h2::first-letter {}


#kontakt dl, #impressum dl {margin:0; line-height:28px; font-size:18px}
#kontakt dt, #impressum dt {margin:0; float:left; font-weight:400}
#kontakt dd, #impressum dd {margin:0 0 10px 100px; font-weight:300}
#kontakt .websites {line-height:35px}


#kurse dl {margin:0; line-height:28px; font-size:18px}
#kurse dt {margin:0; float:left; font-weight:400; color:#9D1A1A}
#kurse dd {margin:0 0 25px 160px; font-weight:300}

#kurse #content .tab ul {margin:0}
#kurse #content .tab ul li {float:left; margin-right:30px}
#kurse #content .tab ul li:last-child {margin-right:0px}
#kurse #content .tab ul li:before {content:''}
#kurse #content .tab ul li a {color:#333; border-bottom:0px solid transparent; cursor:pointer; font-size:18px; padding-bottom:3px}
#kurse #content .tab ul li a:hover {color:#9D1A1A}
#kurse #content .tab ul li .active {color:#9D1A1A; border-bottom:1px solid #9D1A1A}


 /* Style the tab */
.tab {overflow: hidden}
/* Style the buttons that are used to open the tab content */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s}
/* Change background color of buttons on hover */
.tab button:hover {background-color: #ddd}
/* Create an active/current tablink class */
.tab button.active {background-color: #ccc}
/* Style the tab content */
.tabcontent3 {display: none} 





/* FOOTER */

#footer-wrap {width:100%; background-color:#9D1A1A; color:#fff; text-align:center}
@media (max-width:1080px) {
#footer {margin:0 auto; width:88%; padding:65px 6% 40px 6%}
}
@media (min-width:1080px) {
#footer {margin:0 auto; width:980px; padding:65px 50px 40px 50px}
}
#footer p {font-size:16px}
#footer a {color:#fff; text-decoration:none; padding:2px 1px; margin:0 7px; border-bottom:1px solid transparent}
#footer a:hover {border-bottom:1px solid #fff}





-->