@import url('https://fonts.googleapis.com/css2?family=Arial+Nova+Cond:wght@400;700&display=swap');

body {
    margin: 0; 
    padding: 0; 
    font-family: 'Arial Nova Cond', Arial, sans-serif;
    background-color: #ffffff;
}

.container {
    text-align: center;
    margin: 0;
    padding: 20px; 
}

.vcontainer {
    text-align: center;
    margin: 0;
    padding: 20px; 
	margin: 0 auto;
	max-width: 740px;
}

.logo {
    max-width: 100%; /* Maximale Breite */
    height: auto;
    display: none; /* Alle Logos standardmäßig ausblenden */
    margin: 0 auto; /* Zentriert das Logo horizontal */
}

.logo-desktop {
    max-width: calc(1000px - 48px); /* Maximale Breite 1000px - 48px für den Abstand von 24px auf beiden Seiten */
    display: block; /* Desktop-Logo anzeigen */
    padding: 0 24px; /* Abstand von 24px auf beiden Seiten */
}

.logo-mobile {
    display: none; /* Mobiles Logo ausblenden */
}

.event-details {
    font-size: 1.8em;
    margin: 10px 0;
}

.explanatory-text {
    font-size: 1.3em;
	padding: 0 20px;
	margin-left: auto;
    margin-right: auto;
	max-width: 740px;
    color: #737476;
}

.contact-info {
    font-size: 1.3em;
    margin: 10px 0;
	color: #737476;
}

.contact-info a {
    color: #737476;
    text-decoration: none;
}

.cta-button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
	font-weight: bold; 
}

.cta-button.orange {
    background-color: #FD6925;
    color: white;
    border: 2px solid #FD6925;
}

.cta-button.orange:hover {
    background-color: white;
    color: #FD6925;
}

.cta-button.white {
    background-color: white;
    color: #FD6925;
    border: 2px solid #FD6925;
}

.cta-button.white:hover {
    background-color: #FD6925;
    color: white;
}

.button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsives Video */
.video-container {
    position: relative; 
    width: 100%; 
/*	max-width: 740px; */
    margin: 20px auto;   /* Zentriert das Video */
    padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
	height: 0; 
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    border: none;
}

@media (max-width: 600px) {
    .event-details {
        font-size: 1.8em;
    }

    .contact-info {
        font-size: 1.2em;
    }

    .logo-desktop {
		max-width: 1000px;
        display: none; /* Desktop-Logo ausblenden */
    }

    .logo-mobile {
        display: block; /* Mobiles Logo anzeigen */
    }

    .button-group {
        flex-direction: column;
        align-items: center;
    }
	
	.video-container {
		max-width: 100%;    /* Maximale Breite für mobile View */
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9/16 = 0.5625) */
	}
	
	
}