/* CSS Document */
@import url('/global/fonts/fontawesome/css/all.min.css') print, screen;
@font-face {
  font-family: 'MaterialIconsTwoTone';
  src: url('/global/fonts/MaterialIconsTwoTone-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MaterialIconsRound';
  src: url('/global/fonts/MaterialIconsRound-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'RobotoFlex';
  src: url('/global/fonts/RobotoFlex-var.ttf') format('opentype');
}
:root {
	
	--c1: #e2234c;
	--c2: #ba183b;
	--c3: #dee3ed;
	--alert:var(--c1);
	--c4: rgba(226, 35, 76, 0.1);
	--cGo:#1C9322;
	--btnHigh: #ba183b;
	--btnText: white;
	--fieldBg: rgba(255, 255, 255, 0.5);
	--fieldBgText: white;
	--fieldBorder: 1px solid white;
	--fieldBorderRadius: 8px;
	--borderRadius: 5px;
	--shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	--bodyBg: #1a1a1a url('/global/img/bg1.jpg') 0 0 no-repeat;
		/*#1a1a1a;*/
	--infoBg: blue;
	--bfont: "RobotoFlex", serif;
	--bfontC: white;
	--bfontWeight: 100;
	--bfontBoldWeight: 300;
	--onDarkTitle:white;
	--borderRadiusInput:20px;
	--btnBg: url('img/SVG/button-bg.svg') no-repeat 0 0 / 100% 100%;
	--btnBgRound:url('img/SVG/button_round.svg') no-repeat 0 0 / 100% 100%;
	--btnShadow:0 0 0 1px white;
	--btnBorder: 2px solid #560A1E;
	--inputActive:1px solid var(--cGo);
	--fa:"Font Awesome 6 Free";
	--fontBig:17px;
}
body {
 	 background: var(--bodyBg);
  	margin: 30px;
  	background-size: cover;
  	background-position: center;
  	background-attachment: fixed;
  	background-repeat: no-repeat;
	transition: all 0.5s;


}

input[type="text"], select {
	border-radius: var(--borderRadiusInput);
	text-align: center;
	font-size:1.5em;
}
body, h1, h2, h3, h4 {
  font-family: var(--bfont);
  font-weight: var(--bfontWeight);
}
h1, h2, h3 {
  font-weight: var(--bfontBoldWeight);
}
.box {
  border-radius: var(--borderRadius);
  background-color: beige;
  margin-bottom: 10px;
  padding: 10px;
}
.button,
input[type="button"],
button{
	display: inline-block;
	text-align: center;
	font-size:18px;
	padding: 20px 25px;
	border: var(--btnBorder);
	border-radius: var(--borderRadiusInput);
	background: var(--btnBg);
	background-color:var(--c1);
	box-shadow: var(--btnShadow);
	color: white;
	text-decoration: none;
	font-weight: var(--bfontBoldWeight);
  &:hover {
    background-color: var(--btnHigh);
  }
  &.start {
    font-size: 35px;
  }
}
.abstand-1, .abstand-2 {
  display: block;
  clear: both;
  height: 1px;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}
.abstand-2 {
  height: 20px;
}
.timer {
  font-size: 28px;
  left: 0px;
  right: 0px;
  width: auto;
  display: block;
  color: white;
  text-align: center;
  background-color: var(--c1);
  padding: 18px;
  &.fix {
    position: fixed;
    top: 0px;
  }
}
.mehrfachwahl {
  background-color: var(--fieldBg);
  border-radius: var(--fieldBorderRadius);
  border: var(--fieldBorder);
  display: block;
  position: relative;
  padding: 10px;

  legend {
    position: absolute;
    top: -20px;
    color: white;
    left: 5px;
  }
  label {
    display: inline-flex;
    align-items: center;
    margin: 10px 0;
    font-size: 12px;
    background-color: #CFCFCF;
    margin: 3px;
    border-radius: var(--fieldBorderRadius);
    padding: 2px 10px 2px 20px;
	  &:has(input[type="checkbox"]:checked){
		  background-color:white;
	  }
    input[type="checkbox"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: var(--fieldBorderRadius);
      background-color: transparent;
      border: 1px solid #7C7C7C;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      cursor: pointer;
      margin-left: 5px;
    }
    input[type="checkbox"]:checked { /*aktiv status */
      background-color: white;
      border: 1px solid darkgray;
      &::before { /* aktivpunkt */
        content: "";
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 40%;
        color: white;
        background-color: black;
        font-size: 18px;
        text-align: center;
      }
    }
  }
}
.btn-plus {
	width: auto;
	height: 50px;
	display: inline-flex;
	align-items: center;
	text-align: center;
	color: var(--c3);
	border-radius: 30px;
	border: 2px solid var(--c3);
	font-size: 15px;
	padding:5px 45px 5px 40px;
	text-decoration: none;
	font-weight: normal;
	i{
	font-size:40px;
		margin-right:20px;
		font-style: normal;
	}
	align-items: center;
	justify-content: center;
}
.code {
  white-space: pre;
  color: white;
  text-align: left;
  width: 100%;
  display: block;
}
fieldset {
  position: relative;
  border: 1px dotted white;
  border-radius: var(--fieldBorderRadius);
  legend {
    position: absolute;
    top: -20px;
    color: white;
    left: 5px;
  }
}
.ondark,.ondark p,.ondark div{
	color:var(--onDarkTitle);
}

.user{
	width:100%;
	padding:10px;
	border-radius:var(--borderRadius);
	color:black;
	text-align: center;
	margin-bottom: 2px;
	box-sizing: border-box !important;
}
.red {
  background-color: #e2234c;
  color: #ffffff;
}

.black {
  background-color: #2f2f2f;
  color: #ffffff;
}

.green {
  background-color: #228B22;
  color: #ffffff;
}

.blue {
  background-color: #1e90ff;
  color: #ffffff;
}

.yellow {
  background-color: #d2b48c;
  color: #000000;
}

.purple {
  background-color: #800080;
  color: #ffffff;
}

.orange {
  background-color: #ff8c00;
  color: #ffffff;
}

.pink {
  background-color: #ff69b4;
  color: #ffffff;
}

.brown {
  background-color: #a52a2a;
  color: #ffffff;
}

.white {
  background-color: #f5f5f5;
  color: #000000;
}

.gray {
  background-color: #808080;
  color: #ffffff;
}

.cyan {
  background-color: #00bfff;
  color: #000000;
}

.magenta {
  background-color: #ff00ff;
  color: #ffffff;
}

.teal {
  background-color: #008080;
  color: #ffffff;
}

.navy {
  background-color: #000080;
  color: #ffffff;
}
.alert b{
	background-color:var(--alert);
	color:white;
	width:100%;
	display: block;
	border-radius:var(--borderRadius);
	padding:5px;
	box-sizing: border-box;
}
button.alert:before{
	content:'\f071 ';
	font-family: "Font Awesome 6 Free";
	font-weight: bold;	
	margin-right:10px;
}
.go{
	background-color:var(--cGo);	
}
.disclaimer{
	padding: 20px 40px;
	border: var(--btnBorder);
	box-sizing: border-box;
	border-radius: var(--borderRadiusInput);
	max-height:50vh;
	overflow: auto;
	width:100%;	
	background-color:white;
	box-shadow: var(--btnShadow);
	color:black !important;
	font-size:18px;
}
.mini{
	margin:auto;
}
body.centerAll{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
    align-items: center;
	min-height: calc(100dvh - 60px);
	box-sizing: border-box;
	margin:30px;
}
.center{
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.usercard{
	padding:20px;
	border-radius:var(--fieldBorderRadius);
	border:var(--fieldBorder);
	box-sizing: border-box;
	width:100%;
}
 .flip-box {
	background-color: transparent;
	width: 100%;
	max-width: 300px; /* für größere Bildschirme */
	height: 200px;
	perspective: 1000px;
	box-sizing: border-box;

	.flip-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
	}
	.flip-front, .flip-back {
		padding:22px;
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-radius: var(--fieldBorderRadius);
		font-size:var(--fontBig);
		box-shadow: var(--btnShadow);
		border:var(--btnBorder);
		border-radius:var(--fieldBorderRadius);
		font-weight: 300;
		i:before{
			font-size:2em;
		}
	}
	.flip-front {
		background-color: white;
		color: black;
	}
	.flip-back {
		background-color: #2980b9;
		color: white;
		transform: rotateY(180deg);
		font-size:20px;
		font-weight:200;
	}
}
.flip-close {
		font-family: var(--fa);
		position: absolute;
		top: 10px;
		right: 10px;
		background:var(--btnBg);
		box-shadow: var(--btnShadow);
		border:var(--btnBorder);
		border-radius:var(--fieldBorderRadius);
		background-color: var(--c1);
		color: white;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		font-weight: bold;		
		padding:5px 8px;
}

.task{
	background-color: white;
	border-radius: var(--fieldBorderRadius);
	font-size:var(--fontBig);
	box-shadow: var(--btnShadow);
	border:var(--btnBorder);
	border-radius:var(--fieldBorderRadius);	
	padding:20px;
	box-sizing: border-box;
}


/* Hintergrund der Lightbox */
        .lightbox-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8); /* Halbdurchsichtiger Hintergrund */
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .lightbox-overlay.active {
            display: flex;
        }

        /* iframe-Container */
        .lightbox-content {
            position: relative;
			width:calc(100vw - 30px);
			height:calc(100dvh - 30px);
            border-radius: 8px;
            /*overflow: hidden;*/
			border:1px solid var(--c1);
			&:before{
				content:'Minispiel';
				font-size:0.8em;
				width:auto;
				height: auto;
				position: absolute;
				color:white;
				top:2px;
				left:2px;	
				z-index:99;
			}
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
			overflow: hidden;
			border-radius: 8px;
        }

        /* Schließen-Button */
        .close-btn {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 40px;
            height: 40px;
			z-index:999;
        }
.title-img{
	margin:-30px;
	width:100vw;
	top:-30px;
	height:auto;	
}
.ghostButton{
	padding:5px 20px;
	border: 1px dotted black;
	color:black;
}
span.name{
	display:inline-block;
	padding:2px 5px;
	border-radius:4px;
}
.qrcode {	
	background-color:white;
	padding:10px;
	border-radius:var(--fieldBorderRadius);
}
.span{
	width:100%;
	box-sizing: border-box;
}
.btn-deakt{
	/*background-color:black;*/
	border:2px solid black;
	color:black;
	background-color:transparent;
	font-size: 0.8em;
}

.btn-next,
.btn-minispiel{
	&:after{
		content:'\f0a4';
		font-family: var(--fa);
		font-weight: bold;
		margin-left:10px;
		font-size:1.2em;
		line-height:1.2em;
	}
}
.btn-minispiel:after{
	content:'\f522';
}
.btn-akt{
	
}
.small{
	font-size:0.8em;
	opacity:0.8;
}
hr{
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	margin-right:-30px;
	margin-left:-30px;
	position: relative;
	overflow: visible;
	&:after{
        content: '';
        height: 1px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(220, 220, 220, 0.75), rgba(255, 255, 255, 0));
        display: block;
        position: absolute;
        top: 1px;
        left: 0px;
        width: 100%;
	}
}
@media only screen and (min-width: 900px) {
	body,
	body.centerAll{
		max-width: 800px;
		margin-left:auto;
		margin-right:auto;
	}
	.title-img{
	margin:-30px;
	max-width:100%;
	height:auto;	
	}
	
}