@charset "UTF-8";
/* CSS Document */



@font-face {
    font-family: lcd-cabb-monop-01_bb;
    src: url("font/lcd-cabb-monop-02_bb.ttf");
}


@font-face {
  font-family: lcd-cabb-monop-01_bb;
  src:  url('fonts/lcd-cabb-monop-02_bb.eot?fp1cs2');
  src:  url('fonts/lcd-cabb-monop-02_bb.eot?fp1cs2#iefix') format('embedded-opentype'),
    url('fonts/lcd-cabb-monop-02_bb.ttf?fp1cs2') format('truetype'),
    url('fonts/lcd-cabb-monop-02_bb.woff?fp1cs2') format('woff'),
    url('fonts/lcd-cabb-monop-02_bb.svg?fp1cs2#lcd-cabb-monop-01_bb') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
    font-family: 'Ebert';
    src: url('font/Ebert-bg.woff2') format('woff2'),
         url('font/Ebert-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Ebert';
    src: url('font/Ebert-Headline.woff2') format('woff2'),
         url('font/Ebert-Headline.woff') format('woff');
    font-weight: 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Ebert';
    src: url('font/Ebert-Bold.woff2') format('woff2'),
         url('font/Ebert-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }


  .ebert-regular {
    font-family: 'Ebert', sans-serif;
    font-weight: normal;
  }
  
  .ebert-headline {
    font-family: 'Ebert', sans-serif;
    font-weight: bold;
  }
  
  .ebert-bold {
    font-family: 'Ebert', sans-serif;
    font-weight: bold;
  }




* {
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 2vw;
}
body {
    transition: background .4s ease-in;
}
input[type="radio"] {
    margin: 0.5vw 0vw -6vw 0.5vw !important;
	position: absolute;
}
.card {
    position: absolute;
    width: 34vw;
    height: 26vw;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
}
.infograph {
/*    background-image: url(bilder/WZZ-Farbverlauf_50_hoch_RZ_06_bb.jpg);
    background-color: #fff;*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 12vw;
	position: relative;
}
.container {
    width: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 500px;
    margin-left: 50%;
    transform: translate(-50%);
    flex-wrap: wrap;
}
.cards {
    position: absolute;
    width: 100vw;
    height: 27vw;
}
img {
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    object-fit: cover;
}
	
	
	
#gemeinitem-1:checked ~ .cards #gemein-wert-3, 
#gemeinitem-2:checked ~ .cards #gemein-wert-1, 
#gemeinitem-3:checked ~ .cards #gemein-wert-2 {
    transform: translate(-34.5vw, -1vw) scale(.55);
    width: 60vw;
    z-index: 0;
    padding-left: 27vw;
    background-image: url("bilder/l-aro-blau.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left;
}
#gemeinitem-1:checked ~ .cards #gemein-wert-2, 
#gemeinitem-2:checked ~ .cards #gemein-wert-3, 
#gemeinitem-3:checked ~ .cards #gemein-wert-1 {
   transform: translate(34.5vw, -1vw) scale(.55);
    width: 60vw;
    z-index: 0;
    padding-right: 27vw;
    background-image: url("bilder/r-aro-blau.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
}

#gemeinitem-1:checked ~ .cards #gemein-wert-1, 
#gemeinitem-2:checked ~ .cards #gemein-wert-2, 
#gemeinitem-3:checked ~ .cards #gemein-wert-3 {
    opacity: 1;
    z-index: 1;
    background-image: url("bilder/r-aro-blau.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;

}
	
	
	/*karusell oben*/
	


	
#item-1:checked ~ .cards #wert-3, 
#item-2:checked ~ .cards #wert-1, 
#item-3:checked ~ .cards #wert-2 {
    transform: translate(-34.5vw, 11vw) scale(.55);
    width: 60vw;
    z-index: 0;
    padding-left: 27vw;
    background-image: url("bilder/l-aro-mint.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left;
}
#item-1:checked ~ .cards #wert-2, 
#item-2:checked ~ .cards #wert-3, 
#item-3:checked ~ .cards #wert-1 {
    transform: translate(34.5vw, 11vw) scale(.55);
    width: 60vw;
    z-index: 0;
    padding-right: 27vw;
    background-image: url("bilder/r-aro-mint.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
}
#item-1:checked ~ .cards #wert-1, 
#item-2:checked ~ .cards #wert-2, 
#item-3:checked ~ .cards #wert-3 {
    opacity: 1;
    z-index: 1;
    background-image: url("bilder/l-aro-mint.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;

}
	
	
	

.player {
/* border-radius: 10px 10px 10px 10px;*/
padding: 22vw 2vw 0vw 2vw;
width: 34vw;
margin-top: 11vw;
height: 40vw;
z-index: 0;
}
.upper-part {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 16vw;
}
.wert-info {
/*    width: calc(100% - 32px);*/
    display: block;
      /*border-radius: 0;]*/

}
.wert-info .title {
    color: #403d40;
    font-size: 14px;
    line-height: 24px;
}
.sub-line {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.subtitle, .time {
    font-size: 12px;
    line-height: 16px;
    color: #c6c5c6;
}
.info-area {
    width: 100%;
    position: absolute;
    top: 0;
    transition: transform .4s ease-in;
}
	
	
#item-1:checked ~ .player #test {
    transform: translateY(5.5vw);
}
#item-2:checked ~ .player #test {
    transform: translateY(-7vw);
}
#item-3:checked ~ .player #test {
    transform: translateY(-19.5vw);
}

	
#gemeinitem-1:checked ~ .player #gemein-test {
    transform: translateY(5.5vw);
}
#gemeinitem-2:checked ~ .player #gemein-test {
    transform: translateY(-7vw);
}
#gemeinitem-3:checked ~ .player #gemein-test {
    transform: translateY(-19.5vw);
}

	
	
	
.nip-numb {
    font-family: 'lcd-cabb-monop-01_bb', sans-serif;
    font-size: 5vw;
}
.steuhr {
font-family: 'lcd-cabb-monop-01_bb', sans-serif;
font-size: 9vw;
color: red;
width: 86vw;
padding: 0vw 0px 14vw 2.5vw;
/* border-radius: 2vw;*/
margin-left: auto;
margin-right: auto;
background: linear-gradient(0deg, rgba(0,0,0,1) 49%, rgba(79,79,79,1) 53%);
border: solid 1.5vw black;
position: relative;
height: 14vw;
letter-spacing: 1.5vw;
}



.grad-bg {
   

/* background: linear-gradient(45deg, #198C6F, #1dab7c, #00739A, #3bd1bc); */
background: #005597;

background-size: auto;
background-size: 400% 400%;
animation: gradient 15s ease infinite;


width: 100%;

z-index: -2;

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




.abstand {
    width: 100%;
}
h2 {
       font-size: max(15px, 2.5vw);
    max-width: 82vw;
    margin-left: auto;
    margin-right: auto;

}

.infograph h2 {
  margin-bottom: 0 !important;
}

.goldit {
    background-color: #87ccc9;
}
.partner {
    width: clamp(90px, 15vw, 153px);
    float: left;
}
.bag-cont {
    background-image: url("bilder/WZZ-Farbverlauf_50_RZ_06_bb.jpg");
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 4vw;
}
.blauiit {
    background-color: #005597;
}
.gemein-wert-info {
    color: white;
}
.table_counter {
    border: 0px !important;
    text-align: right !important;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0) !important;
}
    tbody{
    border: 0px !important;
}
    
    tr{
    border: 0px !important;
}
    
th, caption {
    color: #fff !important;
    font-weight: 700;
    text-align: right !important;
    border: 0px !important;
}
	
	

#myradio{
position:relative;
width:40%;
margin:0 auto;
}

.slider{
position: absolute;
top: 0;
width: 2vw;
background: #fff;
transition: transform 2s;
 border-radius: 60%; 
animation-timing-function: ease-in-out;
transition: 0.3s left .06s ease-in-out;
height: 2vw;
transform: translate(0, 4vw) scale(0.5);
}
	

	
#item-1:checked  ~ #slider{ animation-name: one; transform: translate(-5.5vw, 4vw) scale(0.5); }
#item-2:checked  ~ #slider{ animation-name: two; transform: translate(-0.5vw, 4vw) scale(0.5); }
#item-3:checked  ~ #slider{ animation-name: three; transform: translate(4.5vw, 4vw) scale(0.5); }

	

#gemeinitem-1:checked  ~ #slider2{ transform: translate(-5.5vw, 4vw) scale(0.5); }
#gemeinitem-2:checked  ~ #slider2{ transform: translate(-0.5vw, 4vw) scale(0.5); }
#gemeinitem-3:checked  ~ #slider2{ transform: translate(4.5vw, 4vw) scale(0.5); }
	

	
@keyframes one{ 20%, 80% { transform:scale(0.6); } }
@keyframes two{ 20%, 80% { transform:scale(0.6); } }
@keyframes three{ 20%, 80% { transform:scale(0.6); } }
@keyframes four{ 20%, 80% { transform:scale(0.6); } }
@keyframes five{ 20%, 80% { transform:scale(0.6); } }	
	

	
	.label {
float: left;
height: 2vw;
background: #87ccc9;
 border-radius: 60%;
cursor: pointer;
transform: translate(0, 4vw);
}
	
	.lab-blue {
float: left;
height: 2vw;
background: #291010;
/* border-radius: 60%; */
cursor: pointer;
transform: translate(0, 4vw);
}
	

/* Objekttitel */

/* .verobj:after { 

  font-family: FontAwesome;
  content: " \f05a";
}*/

.verobj {
  color: inherit;
	font-size: 3vw;
    
}

.verobj:hover {
  color: red; /* Makes the text red when hovered */
  transition: color 0.3s ease; /* Adds a smooth transition effect */
}
	

.logotitle {
  display: block;
}


@media (max-width: 560px){


	
	.logo-container {
		  display: grid;
  grid-template-columns: auto auto auto;
		max-width: 350px;
		margin-left: auto;
margin-right: auto;
	}
	
	.logotitle {
	
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;

	}
	
}