/* Verschiedene Div-Container */

@font-face {font-family:rcl; src:url(fonts/RobotoCondensed-Light.ttf);}
@font-face {font-family:rcli; src:url(fonts/RobotoCondensed-LightItalic.ttf);}
@font-face {font-family:rcb; src:url(fonts/RobotoCondensed-Bold.ttf);}



/*Farben*/

/*Layoutfarbe 1
Schatten (#515d68)	100% (#748493)	90% (#808f9f)	80% (#8d9baa)	70% (#9aa7b5)	60% (#a8b3c0)	40% (#c4ccd5)	20% (#e0e5ea)	10% (#eff2f5)	*/

/*Orange
(0/46/97/0)	100% (#ffa000)	90% ()	80% ()	70% (#fab962)	20% ()	10% ()	*/


html {background-color:#e0e5ea; font-family:rcl, arial, helvetica, sans-serif; font-weight:normal; line-height:0px; margin:0; padding:0px;}
body {margin-top:0; margin-left:auto; margin-right:auto; padding:0; line-height:0px;}
.main {width:976px; height:auto; margin-left:auto; margin-right:auto; background-color:transparent; overflow:hidden; padding:0px 5px 0px 5px; line-height:0px;}
.kopf {position:relative; width:976px; height:120px; margin-top:0px; margin-bottom:-20px; margin-left:auto; margin-right:auto; float:left;}
.logo {display:block; width:120px; height:18px; margin-top:43px; background-image:url(images/sunlion_logo.png); float:left;}
.logo:hover {background-image:url(images/sunlion_logo.png); background-position:0px -18px;}
.logo:active {background-image:url(images/sunlion_logo.png); background-position:0px -36px;}



/* Navigation */

.navigation {position:relative; width:auto; height:30px; margin:40px 0 0 68px; padding:0; float:right; z-index:+100;}

a.naviindex {width:100px; height:30px; float:left; font-family:rcl, arial, helvetica, sans-serif; color:#748493; font-size:14px; line-height:30px; font-weight:bold; text-align:center; border-right-width:1px; border-right-style:solid; border-right-color:#c4ccd5;}
a.naviindex:hover {color:#8d9baa;}
a.naviindex:active {color:#ffa000;}
a.naviindex:last-child {border-right:none}

a.navi {width:100px; height:30px; float:left; font-family:rcl, arial, helvetica, sans-serif; color:#748493; font-size:14px; line-height:30px; font-weight:bold; text-align:center;border-right-width:1px; border-right-style:solid; border-right-color:transparent;}
a.navi:hover {color:#8d9baa;}
a.navi:active {color:#ffa000;}
a.navi:last-child {border-right:none}
a.naviactive {width:100px; height:30px; float:left; font-family:rcl, arial, helvetica, sans-serif; color:#8d9baa; font-size:14px; line-height:30px; font-weight:bold; text-align:center; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#ffa000; border-right-width:1px; border-right-style:solid; border-right-color:transparent;}
a.naviactive:last-child {border-right:none}

.knopf {width:auto; height:38px; background-image:linear-gradient(#fab962 0%, #ffa000 100%); color:#fff; text-align:center; font-size:16px; line-height:39px; font-weight:bold; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; border-radius:5px; margin:7px 0 0 0}



/* Layouts; Der Width-Wert entspricht der maximal möglichen Breite des Inhalts */

.inhaltsbereich {position:relative; width:976px; height:auto; margin-top:0px; margin-bottom:10px; margin-left:auto; margin-right:auto; background-color:#fff; float:left; z-index:3; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;}
.layoutrahmen {width:976px; margin:0px; padding:0px; float:left;}
.layoutrahmen_rundschatten {position:relative; z-index:+1; width:976px; height:8px; margin:0px; padding:0px; line-height:0px;}
.layoutrahmen_rundschatten_oben {position:relative; z-index:+1; width:976px; height:8px; margin:0 0 -8px 0px; padding:0px; line-height:0px; border-radius:4px 4px 0 0;}
.layoutrahmen_rundschatten_unten {position:relative; z-index:+1; width:976px; height:8px; margin:-8px 0 0 0; padding:0px; line-height:0px; border-radius:0 0 4px 4px;}
.layout1spalte {width:200px; margin:26px -45px 0px 66px; float:left;}
.layout1spalte_hintergrund {width:160px; background-image:linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); background-image:-webkit-linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); margin:24px -45px 0px 66px; padding:0 20px 0 20px; float:left;}
.layout2spalten {width:421px; margin:26px -45px 0px 66px; float:left;}
.layout2spalten_hintergrund {width:381px; background-image:linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); background-image:-webkit-linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); margin:24px -45px 0px 66px; padding:0 20px 0 20px; float:left;}
.layout3spalten {width:642px; margin:26px -45px 0px 66px; float:left;}
.layout4spalten {width:863px; margin:26px 0px 0px 66px; float:left;}
.layout1drittelspalte {width:273px; margin:26px -44px 0px 66px; float:left;}
.layout1drittelspalte_hintergrund {width:233px; background-image:linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); background-image:-webkit-linear-gradient(90deg, #f6f4f0 0%, #ece9e3 50%, #f6f4f0 100%); margin:26px -44px 0px 66px; float:left; padding:0 20px 0 20px;}
.layout2drittelspalte {width:568px; margin:26px -44px 0px 66px; float:left;}
.halbrundkappe_1spalte {width:200px; height:30px; background-image:linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); border-radius:10px 10px 0 0;}
.halbrundkappe_2spalten {width:421px; height:30px; background-image:linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); border-radius:10px 10px 0 0;}
.halbrundkappe_1drittelspalte {width:273px; height:30px; background-image:linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); border-radius:10px 10px 0 0;}
.preis_klein {width:120px; height:70px; float:right; background-image:linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); -ms-transform:rotate(10deg); -webkit-transform:rotate(10deg); transform:rotate(10deg); box-shadow:rgba(0,0,0,0.5) 0 2px 3px; border-radius:10px;}
.trainer {width:160px; height:70px; margin-bottom:20px; border-style:solid; border-width:1px; border-color:#bc2701; background-image:linear-gradient(180deg, #d6bb78 0%, #b6a167 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); box-shadow:rgba(0,0,0,0.5) 0 2px 3px; border-radius:10px;}
div.preis_gross {width:200px; height:130px; float:right; background-image:linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); background-image:-webkit-linear-gradient(180deg, #bc2701 0%, #8a1e00 100%); transform:rotate(10deg); box-shadow:rgba(0,0,0,0.5) 0 2px 3px; border-radius:10px;}
.inforahmen {margin:18px 18px 0px 18px; overflow:hidden;}



/* Textformate */

h1 {color:#555; font-size:30px; line-height:80px; font-weight:normal; margin:2px 0 29px 0px; padding:0px;}
h2 {color:#666; font-size:20px; line-height:26px; font-weight:normal; margin:-1px 0 27px 0; padding:0px; letter-spacing:0}
h2.daten {color:#666; font-size:12px; line-height:18px; font-weight:bold; margin:16px 0 0 0; padding:0px; letter-spacing:0}
h3 {color:#666; font-size:16px; line-height:26px; font-weight:bold; margin:26px 0 0 0; padding:0px; letter-spacing:0}
h3:first-child {margin:0 0 0 0}
/* h6 siehe „Persönliche Startseite“ weiter unten*/


p {font-size:16px; line-height:26px; text-align:left; color:#565655; margin:0; padding:0;}
p.einzug {font-size:16px; line-height:26px; text-indent:24px; margin:0; padding:0;}
p.einleitung {font-size:24px; line-height:34px; text-indent:0px; color:#565655; margin:0; padding:0px; font-weight:normal;}
p.daten {color:#565655; font-size:12px; line-height:18px; text-align:center; margin:0px; padding:0px;}
p.fussnote {color:#565655; font-size:12px; line-height:16px; text-align:left; margin:0px; padding:0px;}
p.zitat {font-family:handschrift; color:#00477e; font-size:50px; line-height:40px; text-align:left; margin:0px; padding:0px; text-shadow: 0px 2px 2px #aaa}
p.zitat:before {content:"\201E"; font-family:times new roman, times, serif; color:#bc2701; font-size:50px; line-height:0px; font-weight:bold;text-align:left; margin:0 5px 0 0; padding:0px;}
p.zitat:after {content:"\201C"; font-family:times new roman, times, serif; color:#bc2701; font-size:50px; line-height:0px; font-weight:bold;text-align:left; margin:0 0 0 2px; padding:0px;}

a {text-decoration:none;}

a.text {color:#6e6e6e; font-size:16px; line-height:26px; font-weight:normal; text-decoration:none;}
a.text:hover {text-decoration:underline;}
a.text:before {content:">" "\00A0"; color:#dea624; font-weight:normal;}

a.bildunterschrift {color:#67676b; font-size:12px; line-height:16px; font-weight:normal;}
a.bildunterschrift:hover {text-decoration:underline;}
a.bildunterschrift:before {content:">" "\00A0"; color:#bc2701; font-weight:normal;}

ul.aufzaehlung {color:#ffa000; font-size:16px; line-height:26px; list-style-type:circle; list-style-position:outside; margin:0px 0px 26px 15px; padding:0px}
li span{color:#565655;}

ul.daten {color:#bc2701; font-size:12px; line-height:18px; list-style-type:circle; list-style-position:outside; margin:0px 0px 26px 15px; padding:0px}
li span{color:#565655;}

hr {width:auto; height:1px; border:none; border-top:1px dotted #cfc7b9; background-color:none; margin:26px 0 25px 0; padding:0;}
.punkte {width:auto; height:1px; border:none; border-top:2px dotted #cfc7b9; background-color:none; margin:26px 0 25px 0; padding:0;}

address {font-style:normal}



/* Bilder */

img.hauptbild {position:relative; z-index:-1;}
.textbereich {}
p.bildunterschrift {font-family:rcl, arial, helvetica, sans-serif; color:#67676b; font-size:12px; font-weight:normal; line-height:16px; text-align:left; margin:12px 0px 0px 0px; padding:0px;}
.buchreihe {background-color: #eff2f5; display: flex; justify-content: center; align-items: center;}
.buch {height: 205px; box-shadow: rgba(0,0,0,0.5) 0 2px 5px}
.buchlink {margin: 30px 12px 25px 12px}

/* Modal-Overlays */

.modalimage {position:fixed; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.8); z-index:99999; opacity:0; transition:opacity 200ms ease-in; pointer-events:none;}
.modalimage:target {opacity:1; pointer-events:auto;}
.modalimage > div {width:700px; position:relative; margin:2% auto; padding:0; background-color:none;}


.close {background:#666; color:#ccc; line-height:25px; position:absolute; right:-12px; text-align: center; top:-10px; width:24px; text-decoration:none; font-weight:bold; border-radius:12px; box-shadow: 1px 1px 3px #000;}
.close:hover {background:#666; color:#dea624; text-shadow:#333 0 1px 0px; box-shadow:rgba(255,255,255,0.3) 0 0px 10px;}



/* Fußzeile */

.fusszeile {width:976px; height:auto; margin-top:50px; padding-bottom:20px; background-image:linear-gradient(#748493 0%, #515d68 100%); display:block; float:left;} 
.fussspalte {width:178px; height: 120px; margin:0px; padding:0; float:left; border-right-width:1px; border-right-style:solid; border-right-color:#aaa;}
.fussspalte:first-child {margin-left:66px}

a.fuss {display:block; font-family:rcl, arial, helvetica, sans-serif; color:#ccc; font-size:11px; line-height:16px; font-weight:bold; text-shadow:#333 0 -1px 0px; margin-left:20px;}
a.fuss:first-child {font-size:12px; line-height:28px; text-transform:uppercase;}

a.fuss:hover {color:#fff;}
a.fuss:active {color:#dea624}




/* Bannerrotation auf der Startseite */

#slideBannerWrapper {width: 976px; height: 460px; position: relative; overflow: hidden; margin:0px; padding:0px; border:0px; z-index:-1;}
#slideBanner {list-style: none; margin:0px; padding:0px; position: absolute; left:0px; top:0px; z-index:0; border:0px; background-color:#222}
#slideBanner {width:10000px; border:0px}
#slideBanner li {float:left; border:0px}

#slideBannerHelper {position: absolute; list-style:none; margin:0px; padding:0px; z-index:1; bottom:0px; left:66px;}
#slideBannerHelper li {margin-right:1px; padding-top:8px; width:168px; height:22px; float:left; cursor:pointer; opacity:0.9; background-image:linear-gradient(#748493 0%, #515d68 100%); font-family:rcl; text-align:center; font-size:14px; line-height:16px; color:#fff;  border-bottom-width:3px; border-bottom-style:solid; border-bottom-color:#515d68;}
#slideBannerHelper li:first-child {border-radius:5px 0 0 0;}
#slideBannerHelper li:last-child {margin-right:0; border-radius:0 5px 0 0;}
#slideBannerHelper li:hover {background-image:linear-gradient(#808f9f 0%, #748493 100%); color:#fff;  border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#748493;}
#slideBannerHelper li.slideBannerHelperItemActive {color: #fff; background-image:linear-gradient(#808f9f 0%, #748493 100%); border-bottom-width:3px; border-bottom-style:solid; border-bottom-color:#ffb433;}



/* Fotostapel */

.left, .right {width: 25%;}
.center {margin-left: auto; margin-right: auto; width: 50%;}
.ps_overlay {z-index:90; background:#000; width:100%; height:100%; position:fixed; top:0px; left:0px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.loading {background-image:url(images/loading.gif); background-repeat:no-repeat; background-position:50% 50%; position:fixed; top:0px; left:0px; width:100%; height:100%; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}



/* Image container style */

.ps_container {position:fixed; width:70vw; height:70dvh; object-fit:scale-down; top:50%; left:50%;z-index:100;transform: translate(-50%, -50%);}
.ps_container img {position:absolute; max-width:70vw; max-height:70dvh; object-fit:scale-down; border:10px solid #fff; top:50%; left:50%; box-shadow:1px 1px 10px #000; transition:transform .25s cubic-bezier(.4,0,.2,1);}



/* Close button for preview mode */

a.ps_close {background:#cdcdcd url(images/close.png) no-repeat center center; cursor:pointer; position:fixed; top:80px; left:85%; width:30px; height:30px; z-index:1000; border-radius:4px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); transition:opacity 0.5s; box-shadow:rgba(0,0,0,0.5) 0 2px 3px}



/* Next photo button for preview mode */

a.ps_next_photo {position:absolute; left:50%; width:100%; height:100%; z-index:200; cursor:pointer; background-image:url(images/next.png); background-repeat:no-repeat; background-position:center center; opacity:0; transition:opacity 0.5s;}
a.ps_prev_photo {position:absolute; left:-50%; width:100%; height:100%; z-index:200; cursor:pointer; background-image:url(images/prev.png); background-repeat:no-repeat; background-position:center center; opacity:0; transition:opacity 0.5s;}
a.ps_next_photo:hover, a.ps_prev_photo:hover, a.ps_close:hover {opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);} 
.ps_albums {display: block; width: 976px;}
.ps_album {width:200px; margin:24px -45px 0px 66px; display: block; float: left; cursor:pointer;}
.ps_desc {margin-left: auto; margin-right: auto;}
.ps_desc p {margin-left: auto; margin-right: auto; width: 200px; text-overflow:clip; word-wrap: break-word; text-align:center}



/* Persönliche Startseite */

.rahmen {text-align:center; margin:0; padding:0; margin-left:auto; margin-right:auto; width:280px;}
.spalte {display:inline-block; vertical-align:top; width:280px; background-color:#eff2f5; margin:0; padding:0; height:auto;}
.spaltenkopf {display:inline-block; height:30px; width:240px; margin:0 0 20px 0; padding:0; background-color:none;}
h6 {color:#666; font-size:14px; line-height:40px; text-align:center; margin:0;}
hr.ps {border:none; width:auto; border-top:1px dashed; height:1px; color:#ccc; margin:-5px 0 0 0; padding:0}

.link {background-color:none; display:inline-block; width:74px; height:98px; margin:0 0 5px 0; padding:0; overflow:hidden; border-radius:8px;}
.linkimage {display:inline-block; width:60; height:60px; margin:0 0 6px 0; padding:0}
img.ps {display:inline-block; width:58px; height:58px; border-radius:8px; margin:2px 0 3px 0; padding:0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
img.ps:hover {box-shadow:rgba(0,0,0,1.0) 0 2px 5px;}
.linktext {background-color:none; height:30px; display:inline-block; vertical-align:top; font-family:newsgotic, arial, helvetica, sans-serif; color:#565655; font-size:11px; line-height:14px; text-align:center; text-decoration:none; } 

a.ps {text-decoration:none; color:#888;}