*, *::before, *::after {
  box-sizing: border-box;
}
/* NEU */
.wrapper {
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pageHeader {
	height:87px;
}

.page.body-content,
.aggregation,
.dashboard {
	height:auto;
	min-height:calc(100vh - 87px);
}

.notranslate .page.body-content {
  font-size: calc(14px + (40 - 14) * ((100vw - 320px) / (1600 - 320)));
  padding-top: 0;
}

.aggregation {
  background: #4a4a4a;
  position: relative;
  text-transform: uppercase;
  width: 100vw;
}

.aggregation .dashboard {
  text-transform: none;
}

/* Counter */
.aggregation .total {
  color: rgba(255, 255, 255, 1);
  font-size: 2rem;
  position: absolute;
  top: -58px;
  right: 0;
  margin: 0 110px 0 auto;
  display: block;
  height: 0;
}

.aggregation .total .title {
  color: var(--primary);
  font-family: var(--font-bold);
}

.aggregation .total .glyph, 
.odometer-formatting-mark:after {
  display: none;
}

span.day.odometer.odometer-auto-theme {
  color: #fff;
}

.aggregation .total .day, 
.aggregation .total .person, 
.aggregation .total .votes {
  display: inline-block;
  font-family: var(--font-bold);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
  color: #fff;
  padding: 0 5px;
}

.total .day::before, 
.total .person::before, 
.total .votes::before, 
.total .day::after, 
.total .person::after, 
.total .votes::after {
  color: rgba(255, 255, 255, .5);
  display: block;
  font-family: var(--font-primary);
  font-size: 1rem;
  text-align: center;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 99;
}

.total .day::before, 
.total .person::before, 
.total .votes::before {
  top: -13px;
  padding-bottom: 5px;
  margin-right: 5px;
}

.total .day::after, 
.total .person::after, 
.total .votes::after {
  margin-top: 5px;
}

.total .day::before {
  content: "HEUTE";
  left: -5px;
}

.total .person::before {
  content: "GESAMT";
}

.total .votes::before {
  content: "ANTWORTEN";
  left: 5px;
  right: 0px;
  padding: 0 5px 5px;
}

.total .day::after {
  content: "today";
  left: -5px;
}

.total .person::after {
  content: "total";
}

.total .votes::after {
  content: "answers";
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-minimal .odometer-digit {
  padding-bottom: 10px;
}

.odometer-digit {
  border-right: 1px solid rgba(255, 255, 255, .5);
  padding-left: 5px;
}

.votes .odometer-digit:last-child {
  border-right: none;
}

.odometer-formatting-mark:after {
  font-size: 2rem !important;
  font-weight: 400;
  position: relative;
  top: 12px;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
  padding: 0 5px 0 0;
  overflow: hidden !important;
  line-height: 0 !important;
  height: 0 !important;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
  text-align: center !important;
  bottom: -3px !important;
  top: 6px !important;
}

/* Responsive position for total votes */

@media screen and (max-width: 999px) {
  .dashboard {
    margin-bottom: 150px;
  }
  .aggregation .total {
    top: auto;
    bottom: -20px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}

@media screen and (min-width: 480px) and (max-width: 600px) {
  .notranslate .noNavi .appBrand {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .55rem
  }
}

@media screen and (max-width: 479px) {
  .aggregation .total {
    top: auto;
    bottom: -20px;
    right: 20px;
    left: auto;
    transform: translateX(-0%);
    margin: 0;
  }
}

/* Dashboard with cards */
.aggregation .dashboard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding:10px 60px;
    gap: 20px;
    font-size:16px;
}

@media screen and (max-width: 420px) {
	.aggregation .dashboard {
		padding:10px 30px;
	}
}

.aggregation .question {
    position: relative;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
    padding: 20px;
    width:70%;
	min-width:300px;
    min-height:380px;
    background: #000;
    color: #fff;
	justify-self:center;
}

	@media screen and (max-width: 420px) {
		.aggregation .question {
			width:100%;
			min-width: auto;
		}
	}

	.aggregation .question .title {
		color: var(--white);
		margin: 0 0 20px;
		line-height: 1;
		overflow-wrap: break-word;
		font-family: var(--font-bold);
		text-transform: uppercase;
		font-size:2em;
		z-index:2;
	}

	.aggregation .question .result-group {
		/*position:relative;*/
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr auto;
	}

		.aggregation .question .result-group .percent {
			position:relative;
			display:block;
			grid-column: 1 / 2;
			grid-row:2 / 3;
			align-self:end;
			color: #fff;
			font-size: 7rem;
			font-family: var(--font-bold);
			z-index:2;
		}

		.aggregation .question .result-group .result0,
		.aggregation .question .result-group .result1 {
			/*position:relative;*/
			grid-column: 1 / 3;
			grid-row: 3 / 4;
			display:flex;
			justify-content:space-between;
			font-size:1.2em;
			z-index:2;
		}
		
			.aggregation .question .result-group .result0 .result::after,
			.aggregation .question .result-group .result1 .result::after {
				content:"%";
				font-size:75%;
			}

		.aggregation .question .result-group .top-rank {
			position:relative;
			top:-30px;
			grid-row: 1/2 !important;
			font-size: 2.1em;
			font-family: var(--font-bold);
			line-height:1;
		}

		.aggregation .question .result-group .top-rank .result {
			display:none;
		}

		.aggregation .question .result-group .graph {
			/*
			display:block;
			grid-column: 2 / 3;
			grid-row:2 / 3;
			*/
		}
		
	.aggregation .question .total-votes {
		height: auto;
		min-width: 50px;
		background: var(--primary);
		color: rgba(255, 255, 255, 1);
		font-size: 1.2rem;
		font-weight: 700;
		text-align: right;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		padding: .5em;
		position: absolute;
		top: 0px;
		right: 0px;
	}



/* dashboard-resizing */
/* ($repeat * $q-min-width) + (($repeat-1) * $gap) + padding-left + padding-right */
@media screen and  (min-width: 660px) {
    /* (2 * 300) + ((2-1) * 20) + 20 + 20 */
    .aggregation .dashboard {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    }
	
	.aggregation .dashboard > :nth-child(odd) {
		justify-self: end;
	}

	.aggregation .dashboard > :nth-child(even) {
		justify-self: start;
	}
}

@media screen and (min-width: 1000px) {
    /* (3 * 300) + ((3-1) * 20) + 20 + 20 */
    .aggregation .dashboard {
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    }
	
	.aggregation .dashboard .question {
        max-width:none;
		width:auto;
    }
	
	.aggregation .dashboard > :nth-child(odd),
	.aggregation .dashboard > :nth-child(even)	{
		justify-self: initial;
	}
}

@media screen and (min-width: 1550px) {
    /* (4 * 300) + ((4-1) * 20) + 20 + 20 */
    .aggregation .dashboard {
        grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    }
}

@media screen and (min-height: 1080px) {
	
	body {
		overflow:hidden;
	}
	
	.page.body-content,
	.aggregation,
	.dashboard {
		height:calc(100vh - 87px) ;
	}

    .aggregation .dashboard {
		padding:10px 20px;
        grid-template-rows: repeat(3, 1fr); /* 3 Zeilen */
		gap:15px;
    }

    .aggregation .question {
        min-height:auto;
		max-height:312px; /* bugfix to fit children in parent grid */
    }
	
	.aggregation .question .result-group .top-rank {
		position:relative;
		top:-20px;
	}
}


/* Heartbeat Animation */
.dashboard .heartBeat {
	position: absolute;
}
.dashboard .reaction {
  /* display: none; */
  width: 150px;
  height: 150px;
  position: absolute;
  top:-60px;
  right:-53px;
  z-index: 99;
  background: var(--primary);
  background: radial-gradient(var(--primary), var(--primary-light));
  border-radius: 50%;
  animation: flash 1s ease-in-out, pulse 1s ease-in-out;
  opacity: 1;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pulse {
  from {
    transform: scale3d(.1, .1, .1);
  }
  to {
    transform: scale3d(1.5, 1.5, 1.5);
  }
}

/* Aggregation dark mode */
.notranslate .pageHeader {
  color: #fff;
}

.aggregation .question {
  background: #000;
  color: #fff;
}

.aggregation .question .total-votes {
  border: none;
}

.notranslate .pageHeader.noNavi .exit {
  background: #4a4a4a url(/images/exit-white.svg) no-repeat center;
  border: 2px solid #4a4a4a;
}

.notranslate .pageHeader.noNavi .exit:hover, .notranslate .pageHeader.noNavi .exit:focus {
  background: transparent url(/images/exit.svg) no-repeat center;
  border: 2px solid #4a4a4a;
}

.pageHeader.noNavi, .notranslate .pageHeader.noNavi {
  position: static;
  margin-top: 0;
  box-shadow: none;
}

.pageHeader.noNavi .exit {
  display: block;
  text-indent: -999999px;
  width: 30px;
  height: 30px;
  background: url(/images/exit-white.svg) no-repeat center;
  background-size: contain;
  cursor: pointer;
  position: absolute;
  top: 22px;
  right: 15px;
  top: 15px;
  right: 10px;
}

.appBrand {
  font-size: 2.2rem;
}

/* Cards */

/* Votes big Number */

.percent::after {
  content: "%";
  font-size: .6em;
}
  
.graph {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	z-index:0;
}

.circular-chart {
	background-color: var(--grey);
	display: block;
	width: 100%;
	max-width: 140px;
	border-radius: 100%;
	
	@media screen and (min-width: 1000px) {
		max-width: 160px;
	}
}

	.circle {
	  stroke: var(--primary);
	  fill: var(--grey);
	  stroke-width: 4;
	  stroke-linecap: round;
	}

	svg.circular-chart.circle-bg {
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 0;
	}

	.circle-bg .circle {
	  stroke: var(--grey);
	  stroke-dasharray: 100, 100;
	}


.dome {
	display:block;
	position: absolute;
	bottom: 30px; right: 65px;
	width: 40px;
	height: 0;
	background: var(--primary);
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	z-index: 1;
}

	.dome::before {
		content: "";
		display: block;
		height: 160px;
		width: 40px;
		border-top-left-radius: 50px;
		border-top-right-radius: 50px;
		border: .7rem solid var(--grey);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
	

.mask-box {
  height: 140px;
  width: 140px;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100%;
  position: absolute;
  bottom:0;
  z-index: 100;
  
	@media screen and (min-width: 1000px) {
		height: 160px;
		width: 160px;
	}
}
/* Cards with different graphs */

/* mask-boxes */
.question-301 .graph, 
.question-400 .graph, 
.question-401 .graph,
.question-500 .graph {
	top:auto; right:15px; left:auto; bottom:30px;
	height: 140px;
	width: 140px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom right;
	
	@media screen and (min-width: 1000px) {
		top:auto; right:30px; left:auto; bottom:30px;
		height: 160px;
		width: 160px;
	}
}

/* circular-chart */
.question-202 .graph, 
.question-302 .graph {
	top:auto; right:15px; left:auto; bottom:30px;
	height: 140px;
	width: 140px;
	
	@media screen and (min-width: 1000px) {
		top:auto; right:30px; left:auto; bottom:30px;
		height: 160px;
		width: 160px;
	}
}

/* dome */
.question-201 .graph, 
.question-501 .graph {
	top:auto; right:30px; left:auto; bottom:30px;
	height: 160px;
	width: 160px;
}

/* images */
.question-200 .graph .big-img,
.question-300 .graph .big-img,
.question-402 .graph .big-img,
.question-502 .graph .big-img {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom right;
}

/* img-boxes */
.question-200 .graph .big-img._w0 {
  background-size: 80%;
  background-image: url(/images/ww_maus.png);
}
.question-200 .graph .big-img._w1 {
  background-size: 80%;
  background-image: url(/images/ww_elefant.png);
}

.question-300 .graph .big-img {
	background-size:63%;
}
.question-300 .graph .big-img._w0 {
  background-image: url(/images/ww_juergenvonderlippe.png);
}
.question-300 .graph .big-img._w1 {
  background-image: url(/images/ww_domian.png);
}

.question-402 .graph .big-img._w0 {
  background-image: url(/images/ww_wahrzeichen-kampfbahn.png);
}
.question-402 .graph .big-img._w1 {
  background-image: url(/images/ww_wahrzeichen-park.png);
}

.question-502 .graph .big-img {
	/*background-size:48%;
	background-position:77% 85%;*/
}
.question-502 .graph .big-img._w0 {
  background-image: url(/images/ww_schalke04.png);
}
.question-502 .graph .big-img._w1 {
  background-image: url(/images/ww_bvb.png);
}

/* mask-boxes */
.question-301 .graph {
  background-image: url(/images/ww_iconEyeBack.png);
}
.question-301 .graph .mask-box {
  background-image: url(/images/ww_iconEyeFront.png);
}

.question-400 .graph {
  background-image: url(/images/ww_iconMessageBack.png);
}
.question-400 .graph .mask-box {
  background-image: url(/images/ww_iconMessageFront.png);
}

.question-401 .graph {
  background-image: url(/images/ww_iconClockBack.png);
}
.question-401 .graph .mask-box {
  background-image: url(/images/ww_iconClockFront.png);
}

.question-500 .graph {
  background-image: url(/images/ww_iconThumbBack.png);
}
.question-500 .graph .mask-box {
  background-image: url(/images/ww_iconThumbFront.png);
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .circular-chart {
    height: 90px;
  }
}

/* new for wonderwall */
@media screen and (min-height: 1080px) {
	.question-200 .graph .big-img {
		bottom:-22px;
		background-position: bottom center;
	}
	
	.question-200 .graph .big-img._w0 {
	  background-size: 65%;
	}
	.question-200 .graph .big-img._w1 {
	  background-size: 70%;
	}

}

/* End of Cards */

.notranslate .pageHeader.noNavi .exit {
  top: 15px;
  right: 10px;
}

@media screen and (max-width: 420px) {
  .notranslate .noNavi .appBrand {
    font-size: 1rem;
  }
  .notranslate .pageHeader.noNavi .exit {
    top: 5px;
    right: 10px;
    width: 20px;
    height: 20px;
  }
}

/* Kiosk Mode FullHD + 4K */
.kiosk-hd-16-9.notranslate,
.kiosk-4k-16-9.notranslate {
  overflow: hidden;
}
.kiosk-only {
  display: none;
}
.kiosk-hd-16-9 .kiosk-only,
.kiosk-4k-16-9 .kiosk-only{
  display: inline-block;
  position: absolute;
  top: 0;
  z-index: 100;
}

/* FullHD Kiosk Mode - 1920x1080 */
@media (min-width: 1920px) and (min-height: 1080px) {

  /* Header */
    .kiosk-hd-16-9 .appBrand a {
      font-size: 3.5rem;
    }
  
    .kiosk-hd-16-9 .appBrand {
      text-align: center;
      margin-left: -183px;
      position: relative;
    }
  
    .kiosk-hd-16-9 .appBrand a {
      display: inline-block;
      width: auto;
    }
  
    .kiosk-hd-16-9 .appBrand > a:nth-child(1) > span:nth-child(2) {
      color: var(--primary);
    }
  
    .kiosk-hd-16-9 .kiosk-only.www {
      text-transform: none;
      color: #fff !important;
    }
  
    .kiosk-hd-16-9 .www > span {
      color: var(--primary);
    }

    .kiosk-hd-16-9 .appBrand a span:nth-of-type(1),
    .kiosk-hd-16-9 .appBrand a span:nth-of-type(2) {
      text-transform: none;
      position: unset;
    }

    .kiosk-hd-16-9.notranslate .pageHeader.noNavi .exit,
    .kiosk-hd-16-9.notranslate .noNavi + nav,
    .kiosk-hd-16-9.notranslate .noNavi + nav label {
      display: none;
    }
  
  /* Dashboard */
    .kiosk-hd-16-9 .question {
      min-height: unset !important;
      max-height: 315px;
    }
  
    .kiosk-hd-16-9 .aggregation .question .title {
      margin: 1rem 0;
    }
  
    .kiosk-hd-16-9 .top-rank {
      min-height: unset;
      padding: 1rem 0;
    }
  
    .kiosk-hd-16-9 .graph {
      justify-self: flex-start !important;
      transform: scale(.7);
      bottom: auto !important;
      top: 0;
      margin-top: 0;
    }
  
    .kiosk-hd-16-9 .percent {
      align-self: center;
      justify-self: end;
    }
  
    .kiosk-hd-16-9 .result0:not(.top-rank),
    .kiosk-hd-16-9 .result1:not(.top-rank) {
      padding-top: 0;
      padding-bottom: .5rem;
    }
  
  }
  
  /* 4K Kiosk Mode - 3840x2160 */
  @media (min-width: 3800px) and (min-height: 2100px) {
    .kiosk-4k-16-9 .brand .logoLink img {
      width: 400px;
    }
    .kiosk-4k-16-9 .appBrand {
      text-align: center;
    }
    .kiosk-4k-16-9 .appBrand a {
      font-size: 11rem;
      display: inline-block;
      width: auto;
      margin-left: -430px;
    }
    .kiosk-4k-16-9 .appBrand a span:nth-of-type(1),
    .kiosk-4k-16-9 .appBrand a span:nth-of-type(2) {
      text-transform: none;
      position: unset;
    }
    .kiosk-4k-16-9 .aggregation .total {
      top: -140px;
    }
    .kiosk-4k-16-9 .aggregation .total .day, 
    .kiosk-4k-16-9 .aggregation .total .person, 
    .kiosk-4k-16-9 .aggregation .total .votes {
      font-size: 6rem;
    }
    .kiosk-4k-16-9 .total .day::before, 
    .kiosk-4k-16-9 .total .person::before, 
    .kiosk-4k-16-9 .total .votes::before, 
    .kiosk-4k-16-9 .total .day::after, 
    .kiosk-4k-16-9 .total .person::after, 
    .kiosk-4k-16-9 .total .votes::after {
      font-size: 2rem;
    }

    .kiosk-4k-16-9.notranslate .pageHeader.noNavi .exit,
    .kiosk-4k-16-9.notranslate .noNavi nav,
    .kiosk-4k-16-9.notranslate .noNavi + nav label {
      display: none !important;
    }

    .kiosk-4k-16-9 .aggregation {
      margin-top: 40px;
    }
    .kiosk-4k-16-9 .notranslate {
      overflow: hidden;
    }
    .kiosk-4k-16-9 .aggregation .dashboard {
      gap: 1vw;
    }
    .kiosk-4k-16-9 .aggregation .question {
      min-height: 28vh;
      background-color: #111;
      width: calc(25% - 2vw);
      box-shadow: 1rem 1rem 30px #11111180;
      border: none;
      /*ToDo: border ist gap-Fallback fuer IE,
        muss in media query für high contrast
        geschrieben werden und aus der regulären
        .question entfernt werden.*/
    }
    .kiosk-4k-16-9 .graph {
      align-self: start;
      margin-top: 0;
    }
    .kiosk-4k-16-9 .question-300 .graph, 
    .kiosk-4k-16-9 .question-200 .graph, 
    .kiosk-4k-16-9 .question-400 .graph, 
    .kiosk-4k-16-9 .question-500 .graph {
      justify-self: center;
      transform: scale(2);
      margin-top: 0;
    }
    .kiosk-4k-16-9 .circular-chart {
      transform: scale(1.4);
      margin-left: 5rem;
    }
    .kiosk-4k-16-9 .graph .dome {
      transform: scale(1.4);
    }
    .kiosk-4k-16-9 .percent {
      align-self: center;
      font-size: 14rem;
      justify-self: right;
      margin-right: 0;
    }
    .kiosk-4k-16-9 .percent::after {
      font-size: 5rem;
    }
    .kiosk-4k-16-9 .top-rank {
      padding-bottom: 2rem;
    }
    .kiosk-4k-16-9 .top-rank .result {
      justify-self: center;
      transform: scale(2);
    }

    .kiosk-4k-16-9 .aggregation .question .total-votes {
      font-size: 3rem;
    }
    .kiosk-4k-16-9 .aggregation .question,
    .kiosk-4k-16-9 .top-rank {
      font-size: 5rem;
    }
  }

/*
CTA Banner Animation in Kiosk Mode

Duration: 12 seconds
Step1: ctaBanner + badge (opacity:1) 3s
Step2: badge (opacity:0) rect1, rect2, url (opacity:1) 6s delay: .3s
Step3: hand (opacity: 1) 3s delay: 2s

*/

.ctaBanner {
  /* opacity: 0; */
}
.ctaBanner .badge,
.ctaBanner .mitmachen,
.ctaBanner .rect1, 
.ctaBanner .rect2, 
.ctaBanner .url, 
.ctaBanner .hand {
  opacity: 0;
}

.ctaBanner .badge,
.ctaBanner .mitmachen {animation: opacity 9s linear forwards;}

.ctaBanner .mitmachen {animation: opacity 3s linear forwards;}

.ctaBanner .rect1,
.ctaBanner .rect2,
.ctaBanner .url       {animation: opacity 5.8s linear 3.2s forwards;}

.ctaBanner .hand      {animation: opacity 4.6s linear 4.2s forwards,
                                  scale 4.6s linear 4.2s forwards;}

@keyframes opacity {
  0%   {opacity: 0;}
  1%   {opacity: 1;}
  99%  {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes scale {
  0%   {transform: scale(1);}
  20%  {transform: scale(1);}
  30%  {transform: scale(1);}
  35%  {transform: scale(1.2);}
  40%  {transform: scale(1);}
  45%  {transform: scale(1.2);}
  50%  {transform: scale(1);}
  55%  {transform: scale(1.2);}
  60%  {transform: scale(1);}
  90%  {transform: scale(1);}
  100% {transform: scale(1);}
}