/* Allgemeine Einstellungen */
body {
    font-family: Arial, sans-serif;
    background-color: #121212;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0;
    margin: 0;
}

/* Ticket-Stil mit weißem Glow-Effekt */
.ticket {
    background: linear-gradient(145deg, #1e1e1e, #292929);
    width: 600px; /* Etwas kleiner */
    height: 900px; /* Etwas niedriger */
    border-radius: 25px;
    padding: 50px;
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.7); /* Weißer Glow */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Gestanzte Ränder */
.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #121212;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.ticket::before {
    left: -25px;
}

.ticket::after {
    right: -25px;
}

/* Header (Titel) */
header h1 {
    font-size: 35px;
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
}

/* Ticket-Inhalt */
.ticket-body {
    padding: 30px 0;
}

/* Karteneinbettung */
.map-container {
    width: 100%;
    height: 350px; /* Höhe verringert */
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5); /* Weißer Glow */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Ticket-Infos */
.info {
    margin-top: 20px;
    font-size: 20px;
    margin-left:100px;
}

.info p {
    margin: 10px 0;
}

/* Barcode-Bereich */
.barcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

/* Kleineren Barcode mit mehr Strichen */
.barcode-generator {
    display: flex;
    width: 90%;
    height: 120px; /* Etwas kleiner */
    background: white;
    padding: 10px;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5); /* Weißer Glow */
}

/* Realistischer Barcode mit unterschiedlich dicken Strichen */
.barcode-generator::before {
    content: "";
    display: flex;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        black 0px,
        black 3px,
        white 3px,
        white 5px,
        black 5px,
        black 8px,
        white 8px,
        white 10px,
        black 10px,
        black 12px,
        white 12px,
        white 15px,
        black 15px,
        black 18px,
        white 18px,
        white 22px,
        black 22px,
        black 25px,
        white 25px,
        white 27px,
        black 27px,
        black 30px,
        white 30px,
        white 32px,
        black 32px,
        black 35px,
        white 35px,
        white 38px,
        black 38px,
        black 42px,
        white 42px,
        white 45px,
        black 45px,
        black 50px,
        white 50px,
        white 55px,
        black 55px,
        black 60px,
        white 60px,
        white 65px,
        black 65px,
        black 70px,
        white 70px,
        white 75px,
        black 75px,
        black 80px,
        white 80px,
        white 85px,
        black 85px,
        black 90px,
        white 90px,
        white 95px,
        black 95px,
        black 100px
    );
}

/* Ticket-ID unter Barcode */
.ticket-id {
    font-size: 18px;
    margin-top: 15px;
    background: white;
    color: black;
    padding: 8px 12px;
    border-radius: 
}


.logo-link {
    display: inline-block;
}

.lgd-logo {
    height: 170px; /* Passt die Logo-Größe an */
    width: auto; /* Automatische Breite für korrekte Proportionen */
    transition: transform 0.2s ease-in-out; /* Weicher Hover-Effekt */
    margin-top: 2pc;
    margin-left: 50px;
    transform: rotate(-10deg); /* Neigung nach links */
}


.lgd-logo:hover {
    transform: scale(1.1); /* Leichte Vergrößerung beim Hover */
}

.info-container {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung */
    gap: 15px; /* Abstand zwischen Logo und Info-Text */
}

.ticket-initials {
    position: absolute;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 20px; /* Abstand vom rechten Rand */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7); /* Dezente weiße Schrift mit Transparenz */
    text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben */
    letter-spacing: 2px; /* Mehr Abstand zwischen den Buchstaben */
    font-family: Arial, sans-serif; /* Passende Schriftart */
}

.contact-link {
    position: absolute;
    bottom: 20px; /* Abstand vom unteren Rand */
    left: 20px; /* Abstand vom linken Rand */
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8); /* Dezente weiße Schrift mit Transparenz */
    text-decoration: none; /* Entfernt Unterstreichung */
    background: rgba(0, 0, 0, 0.5); /* Leicht transparenter Hintergrund */
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.2s ease-in-out;
}

/* Hover-Effekt für den Link */
.contact-link:hover {
    background: rgba(255, 255, 255, 0.2); /* Leichter Glow-Effekt beim Hover */
}

.easter-egg {
    color: white; /* Farbe der Zahl */
    text-decoration: none; /* Keine Unterstreichung */
    transition: color 0.3s, transform 0.2s;
    cursor: pointer;
}

/* Altersüberprüfung Overlay */
.age-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* Unsichtbar, bis es angezeigt wird */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Altersüberprüfung Box */
.age-warning-box {
    background: rgba(18, 18, 18, 0.95);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 0 10px rgba(0, 128, 255, 0.5);
}

/* Überschrift */
.age-warning-box h2 {
    color: #0080FF;
}

/* Buttons */
.age-warning-box button {
    margin: 10px;
    padding: 10px 20px;
    background-color: #0080FF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.age-warning-box button:hover {
    background-color: #0066CC;
}