/* Customized CSS for Projekt: COIN (https://globalforfuture.org)
* Copyright 2025 Quellcodekunst
*/

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       Customized CSS for Projekt: KulturGuru'S (https://kulturguru.de) Copyright 2019 - 2024 Quellcodekunst       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/**** xs Extra small devices (portrait phones, less than 576px) ****/
@media (max-width: 575px) { ... }

/**** sm Small devices (landscape phones, 576px and up) ****/
@media (min-width: 576px) and (max-width: 767px) { ... }

/**** md Medium devices (tablets, 768px and up) ****/
@media (min-width: 768px) and (max-width: 991px) { ... }

/**** lg Large devices (desktops, 992px and up) ****/
@media (min-width: 992px) and (max-width: 1199px) { ... }

/**** xl Extra large devices (large desktops, 1200px and up) ****/
@media (min-width: 1200px) { ... }

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       VARIABLEN       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


:root {
	--animate-duration: 1800ms;
	--animate-delay: 0.9s;
	--main:#fff;
	--main-bg:transparent;
	--error:#cc0000;
	--ok:#81C81E;
	--fa:#fff;
	--ci:#81C81E;
	--ci-bg:rgba(129,200,30,.7);
	--white:rgba(255,255,255,1);
	--white-bg:rgba(255,255,255,.7);
	--black:rgba(0,0,0,1);
	--black-bg:rgba(0,0,0,.3);
	--hint:#aaa;


	--bubble-bg:rgba(0,0,0,.7);
	--bubble-border:rgba(255,255,255,.3);

	--button-bg:rgba(0,0,0,.5);
	--button-border:rgba(255,255,255,.5);

	--btn-close:#fff;
	--btn-close-bg:#cc0000;

	/* input */
	--input:#fff;
	--input-bg:rgba(158,146,96,.9);
	--input-border:rgba(158,146,96,1);
	--input-border-width:5px;
	--input-h:#81C81E;
	--input-bg-h:#000;
	--input-border-h:rgba(158,146,96,1);
	/* input INACTIVE*/
	--input-inactive:#fff;
	--input-inactive-bg:#111;
	/* input ERROR */
	--input-err:#FFF;
	--input-border-err:#333;
	--input-border-err-h:#333;
	--input-bg-err:rgba(231,52,63,.3);
	--input-bg-err-h:rgba(231,52,63,.3);
	/* input VALID */
	--input-val:#FFF;
	--input-border-val:rgba(158,146,96,1);
	--input-border-val-h:rgba(158,146,96,1);
	--input-bg-val:rgba(0,0,0,.3);
	--input-bg-val-h:rgba(0,0,0,.3);
	/* input PLACEHOLDER */
	--placeholder:rgba(255,255,255,.5);
	--placeholder-h:transparent;
	--placeholder-border:transparent;
	--placeholder-err:#CC0000;
	--placeholder-err-h:transparent;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       FONTS       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@charset "UTF-8";
@font-face {font-family: 'Special Elite';src: url('/fonts/Special_Elite/SpecialElite-Regular.ttf') format('truetype');}
@font-face {font-family: 'Roboto';src: url('/fonts/roboto/RobotoFlex-VariableFont.ttf') format('truetype');}
@font-face {font-family: 'Fuzzy Bubbles Regular';src: url('/fonts/Fuzzy_Bubbles/FuzzyBubbles-Regular.ttf') format('truetype');}
@font-face {font-family: 'Fuzzy Bubbles Bold';src: url('/fonts/Fuzzy_Bubbles/FuzzyBubbles-Bold.ttf') format('truetype');}
@font-face {font-family: 'Schoolbell';src: url('/fonts/Schoolbell/Schoolbell-Regular.ttf') format('truetype');}

.elite{font-family: 'Special Elite';}
.roboto{font-family: 'Roboto';}
.comic-bold{font-family: 'Fuzzy Bubbles Bold', sans-serif;font-weight:700;text-transform:uppercase;}
.comic-regular{font-family: 'Fuzzy Bubbles Bold', sans-serif;font-size: clamp(1.8rem, 5vw, 2.1rem);/*font-size:2.3rem;*/font-weight:400;letter-spacing:-1px;line-height:1;text-transform:uppercase;color:var(--black);}
.schoolbell{font-family: 'Schoolbell', sans-serif;font-weight:700;text-transform:uppercase;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       webEdition HACK       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

a[href="https://www.webEdition.org"],
a[title="This page was created with webEdition CMS"]{display:none;font-size:0px;position:absolute;z-index:-1;bottom:0;height:0;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       SCROLLBAR ENTFERNEN       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

::-webkit-scrollbar {display: none;}
*, ::after, ::before {scrollbar-width: none;-ms-overflow-style: none;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       MISC       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

html{background: var(--black);height:100%;min-height:100%;overflow:hidden;scrollbar-width: none;-ms-overflow-style: none;font-size:1rem;-webkit-font-smoothing: antialiased;}

body{margin:0px;background: var(--black);color:var(--main);font-family:'Roboto';line-height:1.3;font-weight:normal;font-style:normal;/*-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;*/height:100%;min-height:100%;}
header .container{position:relative;}

.siteload.ani{animation-name: fadeIn;animation-duration: 6s;animation-delay: 0s;/*animation-iteration-count: infinite;*/animation-fill-mode: both;display: block;backface-visibility: visible !important;}

.ci{color:var(--ci);}
.ani.pulse{animation-name:pulse;animation-duration:2s;animation-delay:0s;animation-iteration-count:infinite;animation-fill-mode:both;display:block;backface-visibility:visible !important;}
.loginout .checkCoin.ani.pulse,
.logscreen .checkCoin.ani.pulse{animation-name:none;}
main{overflow-x:hidden;overflow-y:auto;}
.img-responsive{width:100%;height:auto;}
img{transition: transform .5s ease-out;}
ul{margin:0;padding:0;list-style-type: none;}
legend{display:none;}
a{color:inherit;}
p.strong{text-transform:uppercase;}
.relative{position:relative;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-justify{text-align:justify;}
.strong,
.bold{font-weight:bold;}
.hint{font-size:.9rem;color:var(--hint);line-height:1;}
input[type=checkbox]{}
select{-webkit-appearance:none;}

.font-size-dynamic{font-size: clamp(1.8rem, 5vw, 4rem);}

.usericon img,
img.usericon{width:100%;height:100%;}

.error{color:var(--error);}
.ok{color:var(--ok);}
.ko{color:var(--error);font-size:.8rem;line-height:.8rem;}
.blur{filter: blur(10px);}
.blur-bg{backdrop-filter: blur(10px);}
.clearfix:after {content: ".";display: block; height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
.clearfix[class] { /* ie6 hack */ display: block;overflow: hidden;}
.button-close{display:none;}
.button-close{position:absolute;z-index:1000;top:59px;right:2px;padding-left: 10px;padding-right: 10px;text-align:center;min-width:2.2rem;height:2.2rem;border-radius:10rem;color: var(--white);background-color: var(--btn-close-bg);border:1px solid var(--btn-close)-bg;cursor:pointer;font-size:1.4rem;font-weight:normal;opacity:1;}
.button-close.active{top:71px;display:inline-block;z-index:1000;animation-name:bounceInDown;animation-duration:1s;animation-delay:0s;}
.profilbild .button-close{top: -7px;right: auto;left:87px;animation-name:none;}

.loadingprocess{display:none;position:fixed;top:0;z-index:9999999;background:var(--black-bg);}
.loadingprocess img{width:30px;height:auto;position: absolute;z-index: 1;}

.faqcloser,
.buycloser,
.statusCheckcloser,
.rulescloser,
.menucloser,
.editcloser,
.wellcomecloser{}

.loginout .button-close{display:none;}
.uppercase{text-transform:uppercase;}
.link-to-faq,
.link-to-rules{white-space:nowrap;color:var(--input-border);text-decoration:underline;font-weight:bold;cursor:pointer;text-decoration:underlined;}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	padding-right: 0;
	padding-left:0;
}
.row{--bs-gutter-x: 0;}
.row,
main:nth-child(1) .container{margin-left:0;margin-right:0;padding-left:0;padding-right:0;}


.history ul{z-index: 1;position: relative;width:100%;}
.history .text{color:var(--black);background:url(/img/layout/Schriftrolle-mitte.png);background-size:100%;background-position: 0px 50px;}
.history .texttop{position:relative;top:-1rem;padding-top:6rem;background:url(/img/layout/Schriftrolle_oben.png);background-size:100%;background-position: 0px 0px;background-repeat: no-repeat;}
.history .textbottom{position:relative;bottom:-5rem;height:100px;background:url(/img/layout/Schriftrolle_unten.png);background-size:100%;background-position: center bottom;background-repeat: no-repeat;}

.brand{font-size:1.2rem;font-family:'Special Elite';text-transform:uppercase;white-space: nowrap;font-style: normal;letter-spacing: 0px;position:relative;text-align:center;line-height:1;display:inline-block;}
.fa{position:absolute;color:var(--fa);}

h1,
.h1,
h2,
.h2{text-align:center;font-family:'Special Elite';font-size:1.5rem;text-transform:uppercase;line-height:1.5rem;margin:0;padding:0;}
h2,
.h2{font-size:1.3rem;}

.comic h1 {margin-top:8.5rem;}
.lifeline h1 {margin:8rem 0 2rem 0;}

.button{backdrop-filter: blur(7px);/*text-transform:uppercase;*/position:absolute;z-index:1;margin:.5rem;padding:.43rem 1rem;display:inline-block;text-decoration:none;white-space: nowrap;border: 1px solid var(--button-border);border-radius: 1rem;background: var(--black-bg);color: var(--button-border);cursor:pointer;outline:none;animation-name: bounceIn;animation-duration: 2s;animation-delay: 0;/*animation-iteration-count: infinite;*/animation-fill-mode: both;display: inline-block;backface-visibility: visible !important;transform: scale(1);}
.button:hover,
.button:focus,
.button:active,
.button.active{z-index:2;animation-name: bounceIn;animation-duration: 2s;animation-delay: 0;animation-iteration-count:1;animation-fill-mode: both;display: inline-block;backface-visibility: visible !important;transform: scale(1);position:absolute;z-index:2;background: var(--ci-bg);color: #fff;border-color:var(--ci);}

.button.log{position: relative;}

.button.more{animation-delay: 1s;}
.button.fast{animation-delay: 1.5s;}
.button.skip{animation-delay: 2s;}

.bubble .button{position:relative;}
.bubble .button.skip{width:auto;left:auto;right:0;bottom:0;}

.faq.inactive,
.rules.inactive,
.statusCheck.inactive,
.buy.inactive,
.menu.inactive,
.edit.inactive,
.wellcome.inactive{display:none;}

.faq,
.rules,
.statusCheck,
.buy,
.menu,
.edit,
.wellcome{position:absolute;z-index:999;overflow-y:auto;text-align:center;border: 1px solid rgba(255,255,255,.3);border-radius: 1rem;animation-name:bounceInDown;animation-duration:1.1s;animation-delay:0s;}
.wellcome{padding-bottom:3rem;}


.faq,
.rules,
.statusCheck,
.buy,
.wellcome,
.menu,
.edit,
.bubble{backdrop-filter: blur(10px);padding:3rem 1.7rem;background:var(--bubble-bg);border: 1px solid var(--bubble-border);border-radius: 1rem;text-align:center;}

.list .bubble{z-index: 2;padding:2rem 1rem 2rem 1rem;}
.bubble.last{padding-bottom:0;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       MENU  / BUBBLE     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.menu{top:0;background:transparent;backdrop-filter: blur(4px);border:0;animation-name:fadeIn;padding: 2rem 0rem 2rem 0rem;}
.menu .label,
.bubble .label{margin-top:25px;font-size:80%;text-transform:uppercase;}

.bubble .ul,
.menu ul{border-top:1px solid var(--black);}

.menu .link-to-faq,
.services .link-to-rules,
.services .link-to-faq,
.menu .link-to-rules{white-space:normal;text-decoration:none;font-weight:normal;color:var(--black);}
.register .bubble .link-to-rules{color:var(--ci);}

.menu .services .link-to-faq:hover,
.menu .services .link-to-rules:hover,
.bubble .services .link-to-faq:hover,
.bubble .services .link-to-rules:hover{color:var(--white);}

.menu li,
.bubble li{width:100%;border-bottom:1px solid var(--black);padding:20px 10px;text-align:left;line-height:1;cursor:pointer;}

.menu .usericon,
.bubble .usericon{position:absolute;left:0px;top:0px;width:50px;height:50px;border-radius:10rem;}
.edit .usericon{width:100px;height:100px;border-radius:10rem;}
.menu .coinicon,
.bubble .coinicon,
.edit .coinicon,
.coinsets.teaser .coinicon{float:left;width:45px;height:45px;border-radius:10rem;}
.edit .coinicon{width:100px;height:100px;}
.others .menu .coinicon,
.others .bubble .coinicon,
.coinsets.teaser .coinicon{width:70px;height:70px;}
.coinsets.teaser{margin-bottom:3rem;}

.menu .editopener,
.bubble .editopener{display:none;position:absolute;width: max-content;left: 0px;top: 0rem;backdrop-filter: blur(10px);background:var(--black-bg);color:var(--white);text-align:center;padding:7px 12px;font-size:70%;border:1px solid var(--ci);color:va(--white);background:var(--ci-bg);border-radius:10rem;}

.menu form,
.bubble form{width:100%;}
.menu .goforit,
.bubble .goforit{animation-name:none;}

.menu li:hover .editopener,
.menu li:active .editopener,
.menu li:focus .editopener,
.bubble li:hover .editopener,
.bubble li:active .editopener,
.bubble li:focus .editopener{display:inline-block;}

.menu li:hover .usericon,
.menu li:hover .coinicon,
.bubble li:hover .usericon,
.bubble li:hover .coinicon{filter:blur(2px);}

.menu li:hover,
.menu li:active,
.menu li:focus,
.bubble li:hover,
.bubble li:active,
.bubble li:focus{backdrop-filter: blur(10px);color:var(--black-bg);}

.list .menu li,
.list .bubble li{text-align:left;}

.menu li .icon,
.bubble li .icon{float:left;margin-right:1rem;}
.menu .options .icon,
.bubble .options .icon{font-size:1.3rem;}

.menu .services .icon,
.bubble .services .icon{font-size:2.2rem;font-weight:bold;position:absolute;left:0px;margin-top:-3px;}

.menu .services li,
.bubble .services li{padding-left:45px;}

.menu .stats,
.edit .stats,
.bubble .stats{font-size:80%;line-height:1.1;display: inline-block;}
.item .stats{z-index:1;position:absolute;right:0px;top:0;}
.stats .icon{float:left;font-size:1.7rem;}
.stats .dates{float:left;line-height: 2.5;}
.item .hint{color:var(--black);font-size:80%;}
.item.active .stats,
.item.active .hint{color:var(--white);}

.menu .history .text{margin:30px 0px 0px;/*padding:40px 0 50px 0;*/}
.menu .history .texttop{padding-top:60px;position: fixed;min-height: 150px;width: 100%;top: 20px;background-position:100% 27px;color:var(--black);}
.menu .history .textbottom{width: 100%;bottom:0;}
.bubble .history .text{margin:-25px 0px 0px;padding-top:20px;}
.bubble .history .texttop{width: 100%;background-position:0px 0px;}
.bubble .history .textbottom{width: 100%;bottom:0;}

.coinlist{}
.coinlist a{color:var(--white);}
.coinlist a:hover{transform: scale(2);}
.coinlist a.active img{background:var(--ok);border-radius:10rem;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       LIST     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


.list{position:relative;}

.list li{position:relative;text-align:center;}

.list .brand{margin-top:3rem;display:block;background:var(--black);padding:.4rem 0 .1rem;border-radius:10rem;}
.list li:first-child .brand{padding-bottom:0;}

.list .date{z-index: 2;font-size:.8rem;padding:.2rem 1rem;display:inline-block;margin:1rem 0;color:#000;background:#fff;border-radius:1rem;}
.date.today{background:var(--input-border);border:3px solid var(--input-bg);color:var(--white);}


body.lifeline main .container{}
body.lifeline main .container article{/*min-height:4800px;*/}
.timeline{position: absolute;z-index:1;left: 50%;height:100%;min-height:100%;border-left:2px dotted var(--white);}
.lifeline nav{margin-bottom:3rem;}
.lifeline .comic-regular.title{margin-top:60px;text-align:center;z-index: 2;padding:65px 0px 75px;background:url(/img/layout/bg_title.png);background-size:100% 100%;background-repeat:no-repeat;}

.lifeline .texttop{/*position:relative;top:-1rem;padding-top:6rem;background:url(/img/layout/Schriftrolle_oben.png);background-size:100%;background-position: 0px 0px;background-repeat: no-repeat;*/}
.lifeline .textbottom{/*position:relative;bottom:-5rem;height:7rem;background:url(/img/layout/Schriftrolle_unten.png);background-size:100%;background-position: center bottom;background-repeat: no-repeat;*/}

.lifeline .intro{background:url(/img/layout/bg-lifeline-01.png);background-size:100%;background-repeat:no-repeat;background-position:100% 350px;/*min-height:900px;*/}
.lifeline .intro  .bubble{margin:600px 0 0;}
.lifeline .iffound ul{background:url(/img/layout/bg-lifeline-02.png);background-size:100%;background-repeat:no-repeat;background-position:100% 0px;}
.lifeline .iffound ul{padding-top:570px;}
.lifeline .list  li#today{z-index:2;background:url(/img/layout/bg-lifeline-hero.png);background-size:100%;background-repeat:no-repeat;background-position:0px 280px;/*min-height:600px;*/}
.lifeline .list  li#today .comic-regular.title.second{margin-top:45rem;}
.lifeline .list  li#today .bubble{padding: 3rem 8px 0;margin-top:570px;border:0;background:transparent;backdrop-filter: none;}

.lifeline li.item{padding:1rem 0;}

.lifeline .list .item .bubble{background:var(--input-border);min-height:150px;}
.lifeline .list .item.active .bubble{padding-top:200px;border: 10px solid var(--input-bg);height:400px;background:url(/img/layout/bg-lifeline-listitem.png);background-size:cover;background-repeat:no-repeat;background-position:100% 0px;}
.lifeline .list .item .bubble.error {text-transform: uppercase;margin-top:1.5rem;border-radius:1rem;border:1px solid var(--white);background:var(--input-bg);color:var(--white);}
.lifeline .list .item .bubble.error a{color:var(--white);}



.lifeline .list .item .user{position:relative;line-height:1.1;display:inline-block;text-align: left;color:var(--black);}
.lifeline .list .item.active .user{}
.lifeline .list .item .user div.dates{border: 1px solid var(--input-bg);padding:1rem 1rem .5rem 5rem;}
.lifeline .list .item.active .user div.dates{backdrop-filter:blur(10px);color:var(--white);background-color:var(--black-bg);border-radius:1rem;}
.lifeline .list .item .user .usericon{z-index:1;border-radius: 10rem;width:70px;height:70px;position:absolute;}
.lifeline .list .item.active .user .usericon{top:-10px;left:-10px;}
.lifeline .iffound ul.list li:nth-last-child(1){padding-bottom:6rem ;}

.lifeline .yourtime{background:url(/img/layout/bg-lifeline-04.png);background-size:auto 100%;background-repeat:no-repeat;background-position:100% 0px;min-height:0px;}
.lifeline .yourtime .item .bubble{margin:30rem 0 0;}

.lifeline nav .sitetitle{margin-top:100px;}

.register .button-logout{display:none;}
.register .bubble{z-index:999;margin-top:37px;}

.buy .button{position: relative;bottom:0;background: var(--ci);color: #fff;left: 50%;margin-left: -45%;width:90%;padding: .7rem;border-radius:.3rem;}

.buy ul li{width:100%;list-style-type:disc;padding:0 0 .25 .5rem;margin-left:1rem;}

form.checkCoin{width:auto;padding-bottom:2rem;}
.checkCoin input{width:auto;}
.checkCoin .logo{position: absolute;z-index: 1;left:-10px;top:-6px;width:auto;height:60px;}
.checkCoin .coinnr{position: absolute;z-index: 2;top: -15px;left: 36px;color:var(--white-bg);font-size:.7rem;}

.goforit{display:none;text-align:center;width:100%;border-radius:1rem;margin-top:.8rem;font-weight:bold;padding: .7rem 2rem;background: var(--ci-bg);border-color:var(--ci);color:rgba(158,146,96,1);color:var(--white);position:relative;z-index:1;padding-left:2rem;padding-right:3rem;animation-name:bounceInDown;animation-duration:1s;animation-delay:0s;cursor:pointer;white-space:nowrap;}
.goforit.active{display:inline-block;}
.goforit span{font-size:3rem;position:absolute;top:-1rem;margin-left:1rem;}

article .logo{height:50px;}
article a{color:var(--ci);text-decoration:none;}


.table{padding:1.1rem .5rem;width:auto;position:relative;margin:0;border-left: 1px solid var(--bubble-border);border-right: 1px solid var(--bubble-border);border-radius: 1rem;}
.table div{font-size:.9rem;padding:.5rem;}
.table div strong{font-size:1.1rem;line-height:1;}
.table div:nth-child(2){padding:.5rem;}
.table div:nth-child(3){padding:0;}
.table a{color:#fff;}
.table .amount{position:absolute;z-index:1;top:1.7rem;right:2rem;font-size:85%;color:var(--hint);}
.table .cond{position:absolute;z-index:1;bottom:0;right:2rem;font-size:85%;color:var(--hint);}
.table .price{font-size: 3.5rem;margin-top:1.6rem;font-weight: bold;display: inline-block;letter-spacing: -5px;}
.table .price span{font-size: 1.6rem;color:var(--white);background:transparent;}
.table div:nth-child(1){background-color:transparent;border:0;}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       HEADER       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* Header Hide & Show while scolling  ( requires headroom.js & headroom.init.js ) */

header.slide--reset{-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
header.slide--up{-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);}
header.slide{transition: all 0.25s ease-in-out 0s;}

header{min-height:50px;width:100%;position:fixed;top:0;right:0;left:0;z-index:999;color:#fff;}
header .button.logout{position:absolute;top:4rem;right:0;}

.button.check,
.button.more{cursor:pointer;}
.button.check{padding-left:2.7rem;z-index:2;}
.button.check.title{position:relative;font-size: 80%;margin-bottom: 1.5rem;}
.menu .button.check.title{top:-30px;}
nav .button.check.title{position:relative;}
.button.more{padding-right:3rem;position:absolute;right:0;cursor:pointer;}
.button.more.last,
.bubble .button.more{position:relative;text-align:center;margin-top:5rem;}
.bubble .button.more.last{margin-top:1rem;}

.button.check img{top:-4px;left:-7px;width:auto;height:43px;position:absolute;}
.button.check.title img{top:-6px;}
.button.more img{top:-4px;right:-8px;width:auto;height:44px;position:absolute;}

header .menu-opener{text-shadow: 0px 1px 0px var(--button-border);color:var(--input-bg);font-size:2.9rem;top:54px;right:5px;position:absolute;z-index:9;cursor:pointer;}
header .menu-opener{animation-name:heartBeat;animation-duration:3s;animation-delay:0s;animation-iteration-count:infinite;animation-fill-mode:both;display:block;backface-visibility:visible !important;}
.button.logout {left:3px;font-size:.8rem;text-decoration:none;padding-top:9px;position:relative;width:max-content;background-color:var(--error);border-color:transparent;}
.register header .button.logout {display:none;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       FOOTER       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* footer Hide & Show while scolling ( requires headroom.js & headroom.init.js ) */

footer .container{position:relative;}
footer.slide--reset{-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
footer.slide--up{-webkit-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%)}
footer.slide{transition: all 0.25s ease-in-out 0s;}

footer{min-height:50px;width:100%;color: var(--footer);position:fixed;bottom:0;right:0;left:0;z-index:2;background:var(--footer-bg);}

footer a.skip{text-decoration:none;position:absolute;z-index:1;right:0;top:0;}
footer a.back{right:auto;left:0;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       SLOW AUTOSCROLL       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

ul.scroller {position: relative;bottom: 0px;left: 0;width:auto;}
ul.scroller li {text-align: center;}
ul.scroller li.autoscroll{display:none;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       BG SLIDESHOW (HERO)       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.bgslide{z-index:0;animation-name:fadeIn;animation-duration:2s;animation-delay:0s;/*animation-iteration-count:1;*/animation-fill-mode:both;display:block;backface-visibility:visible !important;background-position: 50% 50%;background-repeat:no-repeat;background-size:cover;}
.bgslide{position:fixed;left:0;top:0;z-index:0;}
.bgslide .opacity{background:var(--hero-opacity);}
.jquery-bg-slideshow-wrap-bg-element{position:fixed;left:0;top:0;z-index:0;}
.popup .jquery-bg-slideshow-wrap-bg-element{display:none;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       STARWARS    /   404      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.star-wars{perspective: 100px;position:fixed;z-index:0;overflow:hidden;}
.crawl {transform: rotateX(23deg);animation: crawl 200s linear infinite;}
.crawl p{font-size: 3rem;font-weight: bold;color:var(--main);}

@keyframes crawl {
	0% {transform: rotateX(23deg) translateY(2000px) translateZ(0); }
	100% {transform: rotateX(23deg) translateY(-2000px) translateZ(0); }
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       FORM-Control       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

form,
form div{position:relative;}
form input.hidden,
form input.hidden,
form input:focus.hidden,
form input:active.hidden{right:1rem;top:1rem;width:0;height:0;border:0;background: transparent;position:absolute;z-index:-1;}
form.registerForm div.last{margin-top:1rem;}
.loginForm div{float:left;width:100%;}

label{display:none;}
label.checkbox,
label.filebild{cursor:pointer;display:inline-block;}
.loginForm .button{position:relative;z-index:0;margin:1px 0 0 0;border-radius:var(--bs-border-radius);border-top-left-radius:0;border-bottom-left-radius:0;}

.loginForm input:active label,
.loginForm input:focus label{display:inline-block;position:absolute;top:0;left:0;}
label.error{font-size:.8rem;}

.registerForm .checkbox .hint{display: block;text-align: left;}
.registerForm #plz{background:transparent;}
.registerForm #plz:focus,
.registerForm #plz:active{background:var(--black);}
.registerForm  input{text-transform:uppercase;}

input.form-control{padding-left:1rem;cursor:pointer;text-transform:uppercase;}
input.form-control.ort{padding-left:6rem;}
.checkCoin input{padding-left:2.5rem;text-transform:uppercase;}
input[type=checkbox]{float:left;width:1.6rem;height: 1.6em;padding: 0;margin:0 .3rem 1rem 0;}

.form-control,
form select{text-align:center;color: var(--input);background-color: var(--input-bg);border-color:var(--input-border);border-width:var(--input-border-width);outline: 0;box-shadow:none;transition:none;}

form select:focus,
.form-control:focus{color: var(--input-h);background-color: var(--input-bg-h);border-color: var(--input-border-h);outline: 0;box-shadow:none;transition:none;}

form select.active,
.form-control.active{color: var(--header);background-color: var(--input-bg-val);border-color:var(--input-border);border-width:var(--input-border-width);}

form select.valid,
.form-control.valid{color: var(--input-val);border-color: var(--input-border-val);background:var(--input-bg-val);}
.form-control.valid:focus{border-color: var(--input-border-val-h);background:var(--input-bg-val-h);}

form select.error,
.form-control.error{background:var(--input-bg-err);border-color:var(--input-border-err);/*box-shadow: 0px 0px 3px 3px var(--color28);-webkit-box-shadow: 0px 0px 3px 3px var(--color28);-moz-box-shadow: 0px 0px 3px 3px var(--color28);*/}
.form-control.error:focus{background:var(--input-bg-err-h);border-color:var(--input-border-err-h)}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       PLACEHOLDER       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* CSS Trick: Wenn der Placeholder nicht zu sehen sein soll, dann die font-color auf background-color setzen */

.placeholder.form-control{color:var(--placeholder);border-color:var(--placeholder-border);width:50%;float:left;background:inherit;}

.form-control::-webkit-input-placeholder{color:var(--placeholder);}
.form-control::-moz-placeholder{color:var(--placeholder);}
.form-control::-ms-input-placeholder{color:var(--placeholder);}

.form-control:focus::-webkit-input-placeholder{color:var(--placeholder-h);}
.form-control:focus::-moz-placeholder{color:var(--placeholder-h);}
.form-control:focus::-ms-input-placeholder{color:var(--placeholder-h);}

.form-control.error::-webkit-input-placeholder{color:var(--placeholder-err);}
.form-control.error::-moz-placeholder{color:var(--placeholder-err);}
.form-control.error::-ms-input-placeholder{color:var(--placeholder-err);}

.form-control.error:focus::-webkit-input-placeholder{color:var(--placeholder-err-h);}
.form-control.error:focus::-moz-placeholder{color:var(--placeholder-err-h);}
.form-control.error:focus::-ms-input-placeholder{color:var(--placeholder-err-h);}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       CAPTCHA       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.captcha{margin-top:1.5rem;}
.captcha #Code{text-transform:uppercase;}
.captcha img{background:var(--input-border);border-top-left-radius:.3rem;border-top-right-radius:.3rem;}
.captcha .hint{display:block;}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       ACCORDEON       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.accordeon{margin:0;border-radius:0rem;}
.accordeon li {margin-bottom: 1rem;border-radius:0rem;max-height:none;width:100%;}
.accordeon .trigger{cursor:pointer;font-weight:bold;}
.accordeon .trigger span.active{display:inline-block;}
.accordeon .trigger span{display:none;}
.accordeon .trigger:hover{color:var(--btn);text-decoration:none;}

.accordeon .toggle_container{display:none;line-height:1.3;padding:1rem .6rem 1rem 1.5rem;font-size:90%;}
.accordeon .toggle_container.active{display:block;animation-name:fadeIn;animation-duration:1s;animation-delay:0s;}
.accordeon .toggle_container li{padding-left:1.5rem;font-size: 1rem;background: inherit;}

.bubble .accordeon li{border:1px solid var(--bubble-border);border-radius:1rem;}
.bubble .accordeon li:hover,
.menu .accordeon li:hover{backdrop-filter:none;color:inherit;background:transparent;}