:root {
	--color-orange:rgb(234,91,12); /* A - Für bessere Arbeitsbedingungen */
	--color-orange2:rgb(230,51,18); /* B - Für die Einhaltung der Klimaziele Zusatzfarbe */
	--color-red:rgb(228,5,33); /* C - Für eine humanere Asylpolitik */
	--color-alertred:rgb(194,27,28); /* D - Für den Atomausstieg */
	--color-pink:rgb(221,0,126); /* E - Für die Rechte queerer Menschen */
	--color-purple:rgb(167,22,128); /* F - Für den Frieden */
	--color-purple2:rgb(124,1,77); /*  */
	--color-yellow:rgb(253,233,0); /* G - Extra */
	--color-blue:rgb(59,64,96); /* #242F5E */
	--buzzer-size:460px;
	--hand-size:400px;
	--counter-size:100px;
	
	--alternative-width:0;
	
	--color-work:var(--color-orange); /* 1 */
	--color-clima:var(--color-orange2); /* 2 */
	--color-asylum:var(--color-red); /* 3 */
	--color-nuclear:var(--color-alertred); /* 4 */
	--color-lgbtq:var(--color-pink); /* 5 */
	--color-peace:var(--color-purple); /* 6 */
	--color-extra:var(--color-yellow); /* - */
	
	--buzzer-text-color:#000;
	
}

* {
	box-sizing:border-box;
}

@font-face {
  font-family: 'Meta Regular';
  src:url('fonts/FFMetaProRegular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Meta Thin';
  src:url('fonts/FFMetaProThin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Meta Bold';
  src:url('fonts/FFMetaProBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Meta Light';
  src:url('fonts/FFMetaProLight.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  width:100%;
  min-height: 100%;
}

body {
	width:100%;
	margin:0;
	padding:0;
	font-size:18px;
	font-family:"Meta Light";
}

body.buzzer {
	overflow:hidden;
	background-color:var(--color-blue);
}

h1, h2, h3, h4, h5, h6 {
	font-style:normal;
	font-weight:normal;
	font-family:"Meta Bold";
	color:#fff;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
	font-family:"Meta Light";
}

h1 {
	font-size: 2.375rem;
	line-height: 1.1578947368;
}

h2 {
	font-size: 2rem;
	line-height: 1.125;
}


h3 {
	font-size: 1.5rem;
	line-height: 1.1666666667;
}

.Distance .key {
    width: 30%;
    height: 100vh;
    background: red;
    border: 1px solid blue;
    float: left;
}
.Distance .key.yellow{
    background:yellow;
}
.Distance .key.green {
    background: green;
}
.Distance .key.red {
    background: red;
}

.Distance .counter {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(225,225,225);
    display: none;
    padding-top: 10%;
    font-size: 40px;
    text-align: center;
}
    .Distance .counter .state1, .counter.done .state2, .counter.warn .state3 {
        display: inline-block
    }
    .Distance .counter .state2, .counter .state3, .counter.warn .state1, .counter.done .state1 {
        display: none
    }
    .Distance .counter.warn {
        background: rgba(225,225,225,0.5);
    }
	
/*	
.Status .counter{
    width:100%;
    height:30vh;
    overflow:hidden;
    padding:0;
}
.Status .counter .state1, .Status .counter .state2, .Status .counter .state3 {
    padding-top: 45px;
}

.Status .key-list {
    position: relative;
}
.Status .key{
    height:30vh;
}

.target {
    background: yellow;
    font-style: italic;
}

.target .state1, .target.done .state2{display:none}
.target.current {
    border: 1px solid blue;
    background: gray;
    color: white;
    font-style: normal;
    font-size: larger;
}

.target.done {
    background: lime;
}
.target.done .state1 {
    display: inline
}
*/