/*****************************
				STORYLINE
*****************************/
#story {width: 500px;height: 600px;background: #222b30;border-top: 5px solid #1c2225;border-bottom: 25px solid #1c2225;}
.story-head {font-family: 'Beyond';font-size: 48px;text-align: center;;background: linear-gradient(to bottom, #92b0bb 0%, #25423d 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 2;margin-top: -54px;font-weight: 100;}
.story-line1 {width: 318px;height: 5px;background: #2b383e;margin: 0px 91px;}
.story-line2 {width: 201px;height: 5px;background: #41545b;margin: 0px 149px;margin-top: 5px;}
.story-line3 {width: 108px;height: 5px;background: #445854;margin: 0px 196px;margin-top: 5px;}

.tabbed {width: 500px;margin: 40px auto;}
.tabbed > input {display: none;}
.tabbed > label {box-sizing: border-box;width: 70px;padding: 17.5px 0px;margin: 0px 6.67px;border-radius: 50%;color: #bbb;font-size: 35px;background: #1e262b;float: left;text-align: center;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.tabbed > label:hover,.tabbed > input:checked + label {background: #41545b;color: #0a0c0e;}
.tabs {clear: both;perspective: 600px;}
.tabs > div {width: 440px;position: absolute;border: 30px solid #222b30;line-height: 1.4em;opacity: 0;transform: rotateX(-20deg);transform-origin: top center;transition: opacity .3s, transform 1s;z-index: 0;height: 330px;overflow: auto;font-family: Arial;font-weight: 400;font-size: 14px;}
.tabs > div .s-tit {font-family: 'Beyond';font-size: 30px;;background: linear-gradient(to bottom, #92b0bb 0%, #25423d 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 2;font-weight: 100;}
.tabs > div ul {list-style-type: disclosure-closed;}
.tabs > div a:link, a:visited, a:active {text-decoration: none;color: #79979e;padding: 0px 15px;;}
.tabs > div a:hover {color: #bbbbbb;text-decoration: none;}
#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4),
#tab-nav-5:checked ~ .tabs > div:nth-of-type(5),
#tab-nav-6:checked ~ .tabs > div:nth-of-type(6){transform: rotateX(0);opacity: 1;z-index: 1;}
@media screen and (max-width: 700px) {
.tabbed { width: 400px }
.tabbed > label { display: none }
.tabs > div {width: 400px;border: none;padding: 0;opacity: 1;position: relative;transform: none;margin-bottom: 60px;}
.tabs > div h2 {border-bottom: 2px solid #4EC6DE;padding-bottom: .5em;}
}

.story_bottomline1 {width: 305px;height: 5px;position: relative;top: 350px;right: -166px;background: #41545b;}
.story_bottomline2 {position: relative;width: 162px;height: 5px;right: -309px;top: 355px;background: #445854;}

/*****************************
				Gesuche
*****************************/
#Orden1{ margin: 0 auto;border: 1px solid #1c2225; height: 100%; width: 500px; margin-top: -40px;padding: 5px;}
#Orden{width: 475px;height: auto;padding: 10px;text-align: justify;margin: 0 auto;background-image: var(--bgimg); color: #bbb;} 
.Orden-title {font-family: Playfair Display;letter-spacing: 1px;line-height: 100%;color: #445a53;font-size: 39px;text-align: center;margin-top: 10px;font-style: italic;text-shadow: -2px -1px 2px #1e262b;} 
.Orden-sub {font-size: 9px;letter-spacing: 2px;text-transform: uppercase;width: 365px;margin: auto;font-family: open sans;text-align: center;font-weight: bold;} 
.Orden-Text {background-color: rgb(34 43 48 / 75%);text-align: justify;font-size: 10px;line-height: 1.3;font-family: open sans;border-top: 1px solid #1c2225;;border-bottom: 1px solid #1c2225;;margin: 0px 15px;padding: 15px;margin-top: 10px;} 
.Orden-Leute{text-align: justify;font-size: 10px;line-height: 1.3;font-family: open sans;margin: 0px 15px;padding: 6px 0px;margin-top: 10px;border-bottom: 1px solid #1c2225;;margin-bottom: -16px;padding-bottom: 16px;}
.Orden-bildbox{width: 180px;height: 250px;} 
.Orden-textbox {padding: 23px 33px;width: 199px;height: 204px;background-color: rgb(30 38 43 / 80%);} 
.Orden-Name{font-family: Playfair Display;letter-spacing: 1px;line-height: .7;color: #bdc9c7;font-size: 35px;text-align: center;margin-top: -8px;font-style: italic;width: 289px;margin-left: -33px;} 
.Orden-Name span {font-style: normal;font-size: 17px;color: #96b099;;text-transform: uppercase;letter-spacing: 4px;} 
.Orden-Sub-Name{display: block;font-size: 7px;font-style: normal;color: #bbb;line-height: 1;font-family: open sans;text-transform: uppercase;margin-top: 4px;margin-bottom: 4px;font-weight: bold;letter-spacing: 2px;}#orden-scrollinfo{color: #bbb;height: 145px;overflow: auto;text-align: justify;font-size: 10px;line-height: 1.3;font-family: open sans;padding-right: 5px;} 
.Orden-InUnten {font-family: Playfair Display;letter-spacing: 1px; line-height: .7;color: #bbc7c8;; font-size: 13px; text-align: center;font-style: italic; margin-top: 7px;} .Vergeben { color: #886d65;} .Reserviert { color: #105374;} 
.Orden-Unten{background-color: rgb(34 43 48 / 50%);text-align: justify;font-size: 10px;line-height: 1.3;font-family: open sans;margin: 0px 15px;padding: 15px;margin-top: 4px;}

/*****************************
				PLOT
*****************************/
#plot {border: 25px solid;border-image: linear-gradient(to bottom, rgba(var(--mre),.1) 0%, var(--mcly) 100%) 25 repeat;padding: 15px;}
#plot .puber {text-align: center;font-family: var(--font2);font-weight: 100;font-size: 25px;line-height: 1;}
#plot .psub {font-weight: 100;text-align: center;font-size: 12px;text-transform: lowercase;margin-bottom: 10px;}
#plot .pbox {margin: 10px;font-weight: normal;border: 5px solid var(--border1);padding: 10px;height: 400px;overflow: auto;}

/*****************************
				REGELNWERK
*****************************/
#rules {border: 25px solid;border-image: var(--bgimg) 25 repeat;background: var(--bgc1);padding: 14px;width: 490px;margin-left: -35px;}
#rules .tit {background: linear-gradient(to bottom, #425852 0%, #3e5259 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: var(--font2);font-size: 65px;text-align: center;line-height: 1.8;}
#rules .sub {text-transform: uppercase;letter-spacing: 2px;font-size: 12px;text-align: center;}
#rules .sub1 {margin-top: 22px;padding-top: 22px;padding-bottom: 10px;border-top: 1px solid;text-transform: uppercase;letter-spacing: 2px;font-size: 20px;text-align: center;line-height: 1;}
#rules .tit1 {background: linear-gradient(to bottom, #425852 0%, #3e5259 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: var(--font1);font-size: 32px;text-align: center;line-height: 1.2;text-transform: lowercase;font-weight: 600;border-bottom: 1px solid;}
#rules .uberschrift {font-family: var(--font2);text-align: right;font-size: 26px;line-height: 1;padding-top: 25px;}
#rules .box {padding: 25px;padding-top: 0px;}
#rules .uberschrift1 {font-family: var(--font2);text-align: left;font-size: 26px;line-height: 1;padding-top: 25px;}
#rules .box1 {padding: 25px;padding-top: 0px;width: 438px;height: auto;position: relative;left: 0px;right: 0;overflow: unset;background: transparent;margin: 0px;border-radius: 0;margin-top: 0;margin-bottom: 0;}

/*****************************
				VORLAGEN
*****************************/
.info_box{width:450px;padding:20px;background: var(--border1);opacity:.7;color: var(--color);border:2px solid #105374;border-image: linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%) 2 repeat;margin:auto;text-align:justify;font-family: var(--font1);font-size:13px;position:relative;font-weight: normal;}
.info_box:before{pointer-events: none;background:0;border:2px solid #105374;border-image: linear-gradient(to top, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%) 2 repeat;content:"";display:block;position:absolute;top:4px;left:4px;right:4px;bottom:4px}
.info_box_title{text-align:center;font-size: 34px;font-family: var(--font2);text-transform: lowercase;margin-bottom:5px;line-height: 1;}


/*****************************
				NEWSTIME
*****************************/
.speech-bubble_l { width: 500px; margin: auto; padding: 10px; box-sizing: border-box; background: linear-gradient(0deg, #42575e, #435750); -moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px; } 
.speech-bubble_l:before { content:""; position: absolute; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid #425750; border-bottom: 13px solid transparent; margin: 13px 0 0 -30px;} 
.newsbox_l { padding: 10px; margin: auto; box-sizing: border-box; background: #1e262b; -moz-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px;} 
.newsdatum_l { box-sizing: border-box; padding: 5px; margin: auto; background: #0d1012; font-family: 'Beyond'; font-size: 24px; color: #bdc9c7; text-transform: lowercase; font-style: italic; text-align: center; font-weight: 100;}
.newsinhalt_l { height: 100px; padding: 10px; margin: auto; box-sizing: border-box; background: #2d3940;  font-size: 12px; color: #bbbbbb; text-align: justify; line-height: 1.0; overflow: auto; } 
.newsinhalt_l::-webkit-scrollbar { width: 5px; background: #42575e; } 
.newsinhalt_l::-webkit-scrollbar-thumb { background: #435750; } 
.newsinhalt_l::-webkit-scrollbar-corner { background: #435750; }

/*****************************
				STECKI
*****************************/
#stecki {border: 25px solid;border-image: var(--bgimg) 25 repeat;margin-left: -35px;width: 520px;}
#stecki img {width: 520px;height: 260px;object-fit: cover;}
#stecki .charakter {font-family: var(--font1);padding: 10px;text-align: justify;font-size: 14px;max-height: 150px;overflow: auto;border-bottom: double 4px var(--mcly);margin: 0px 10px;margin-bottom: 20px;}
#stecki .info {padding-left: 15px;font-family: var(--font2);font-size: 25px;font-weight: 100;background: linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 2;}
#stecki .info:nth-child(2n) {text-align: right;padding-right: 15px;font-family: var(--font2);font-size: 25px;font-weight: 100;background: linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 2;}
#stecki .info1 {width: 490px;margin: 0px auto;padding: 10px;font-size: 12px;line-height: 1.5;padding-bottom: 0px;}
#stecki .info1 b {padding: 3px 10px;font-family: var(--font1);font-size: 10px;text-transform: uppercase;letter-spacing: 1px;text-align: center;line-height: 11px;margin: 0px 1px;display: table-caption;width: max-content;background: linear-gradient(to left, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);color: var(--bgc);}
#stecki .leben {width: 18%;color: var(--bgd);margin: 0px auto;padding: 0px 10px;line-height: 1.2;font-family: calibri, arial;font-size: 10px;}
#stecki .vergangenheit {background-color: var(--accent);padding: 3px 10px;color: var(--bgd);font-family: calibri, arial;font-size: 10px;text-transform: uppercase;letter-spacing: 1px;text-align: center;line-height: 11px;margin: 1px 1px;display: inline-block;}
#stecki .team {width: 490px;display: flex;flex-direction: row-reverse;justify-content: flex-start;align-items: center;align-content: center;}
#stecki .team b {background: #000 linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: var(--font2);font-weight: 100;font-size: 28px;line-height: 1.8;padding-left: 15px;}

/*****************************
				LISTEN
*****************************/
.list_box1 {height: 288px;overflow: auto;font-size: 12px;font-family: var(--font1);}
.list_box1 > div {padding: 5px;margin-bottom:1px;}
.list_box {height: 118px;overflow: auto;font-size: 12px;font-family: var(--font1);}
.list_box > div {padding: 5px;margin-bottom:1px;}
h3 {margin: 0px;padding: 0px;text-align: center;font-family: var(--font1);font-size: 20px;text-transform: uppercase;background: #000 linear-gradient(to bottom, rgba(var(--mre),.75) 0%, rgba(var(--mclt),1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
h4 {text-align: right;padding-right: 5px;margin: 0px;font-weight: 600;font-size: 16px;}

/**********************************
			GRUPPEN UND RASSEN
**********************************/
.dny4 {width: 442px;background: var(--bgc);margin: 5px;display: flex;border-radius: 5px;position: relative;overflow: hidden;text-align: center;float: left;}
.dny4 .j1b {width: 30px;padding: 15px;height: 268px;background: linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);display: flex;justify-content: center;align-items: center;}
.dny4 .j1b lick {display: inline-block;writing-mode: vertical-lr;background: var(--bgc1);border-radius: 5px;transform: rotate(180deg);padding: 12px 0px;width: 25px;font: 400 13px/28px var(--font1);text-transform: uppercase;letter-spacing: 1px;color: var(--color);}
.dny4 .j1b lick:before {content: 'True Legend';margin-bottom: 5px;display: inline-block;}
.dny4 .j2 {flex: 1;position: relative;overflow: hidden;}
.dny4 .j7 {width: 218px;height: 298px;padding: 0px 50px;position: absolute;top: 0px;left: 0px;overflow: hidden;display: flex;justify-content: center;align-items: center;}
.dny4 .j7 hold {width: 115px;display: block;margin-left: 15px;}
.dny4 .j7 hold .img1 {width: 100px;height: 100px;display: block;box-shadow: -15px -15px 0px 0px rgba(var(--mclr).35);border-radius: 5px;object-fit: cover;}
.dny4 .j7 hold line1 { width: 100px; height: 5px; border-radius: 5px; margin: 20px auto 10px auto; background: var(--gclr); display: block;}
.dny4 .j7 hold line2 { width: 70px; height: 5px; border-radius: 5px; margin: 10px auto 10px auto; background: var(--hclr); display: block;}
.dny4 .j7 hold line3 { width: 40px; height: 5px; border-radius: 5px; margin: 10px auto 0px auto; background: var(--mclr); display: block;}
.dny4 .j7 spa {width: 1px;height: 50px;background: var(--hclr);margin: 0px 20px;display: inline-table;}
.dny4 .j7 hold2 {flex: 1;text-align: left;}
.dny4 .j7 hold2 nick {font: 100 21px/.6 var(--font1);text-transform: lowercase;background: linear-gradient(to bottom, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);display: inline-block;-webkit-background-clip: text;-webkit-text-fill-color: transparent;padding-bottom: 7px;border-bottom: 1px solid;margin-bottom: 15px;width: 161.13px;}
.dny4 .j7 hold2 k {display:block;max-width:161.13px;font: 400 13px/1.2 var(--font1);}
.dny4 .j7 hold2 k b {background: linear-gradient(to right, rgba(var(--mre),1) 0%, rgba(var(--mclt),1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.dny4 .j3b {height: 298px;width: 60px;position: relative;background: rgb(55 69 78);}
.dny4 .j4b {width: 318px;height: 60px;position: absolute;top: 129px;left: -129px;transform: rotate(90deg);display: flex;justify-content: center;align-items: center;font: 400 14px/100% var(--font1);text-transform: uppercase;}
.dny4 .j4b x {margin-left: 5px;color: rgba(var(--hclr)1);font-weight: 500;}