*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(
        135deg,
        #f2f2f2 0%,
        #d7d7d7 50%,
        #bdbdbd 100%
    );
    overflow:hidden;
}

.container{
    text-align:center;
    padding:50px;
    border-radius:24px;
    background:rgba(255,255,255,0.35);
    backdrop-filter:blur(12px);
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    max-width:700px;
    width:90%;
}

.logo{
    font-size:3rem;
    font-weight:700;
    color:#111;
    margin-bottom:10px;
}

.logo span{
    color:#ff7a00;
}

.subtitle{
    font-size:1.2rem;
    color:#222;
    margin-bottom:15px;
}

.text{
    color:#444;
    font-size:1rem;
    margin-bottom:50px;
}

.countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.time-box{
    width:120px;
    height:120px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-radius:18px;
    background:#ffffff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.number{
    font-size:2.5rem;
    font-weight:700;
    color:#ff7a00;

    /* Alle Zahlen gleich breit */
    font-variant-numeric: tabular-nums;
}

.label{
    margin-top:8px;
    color:#333;
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:1px;
    text-align:center;
}

@media(max-width:600px){

    .countdown{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
    }

    .time-box{
        width:100%;
        height:90px;
        min-width:0;
    }

    .number{
        font-size:1.8rem;
    }

    .label{
        font-size:.7rem;
        letter-spacing:0;
    }
}

.footer{
    margin-top:40px;
    color:#555;
    font-size:.9rem;
}

@media(max-width:600px){

    .logo{
        font-size:2rem;
    }

    .time-box{
        min-width:90px;
        padding:15px;
    }

    .number{
        font-size:2rem;
    }
}
.fadein {
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
   }

@keyframes fadeInAnimation
{
   0%
   { 
   opacity: 0;
   }

   100% 
   {
   opacity: 1;
   }
}
.text2{
	margin-left: 50%;
	min-width: 300px;
	width: 100%;
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.8s ease-out forwards;
}

@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}
.text4{
	margin-left: 50%;
	min-width: 300px;
	width: 100%;
	
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 3s ease-out forwards;
}
@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}