/* Breakpoint für Tablets (max-width: 1280px) */

@media (max-width: 1280px) {
    /* Burger Menu - versteckt bei Tablets (wird bei kleinen Tablets sichtbar) */
    .burger-menu-btn {
        display: none;
    }
    
    .mobile-menu {
        display: none;
    }
    
    /* Hero Section */   


    .hero-content {
        padding-top: 80px;
    }
    
    /* Event Cards */
    .event-card {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 24px;
        max-width: 500px;
    }
    
    .event-image {
        width: 150px;
        height: 150px;
    }
    
    /* Countdown & Tickets */
    .countdown-container h2,
    .ticket-container h2 {
        font-size: 2.4rem;
    }
    
    #countdown {
        font-size: 1.8rem;
    }
    
    .tickets-btn {
        padding: 2rem;
        font-size: 1.8rem;
    }
    
    /* CD Styling */
    .cd:hover {
        width: 900px;
    }
    
    /* Content Padding */
    main .content,
    .zwei-button-likedivs {
        width: 90%;
        padding: 40px 30px;
    }
    
    /* Navigation */
    .navbar-list {
        padding: 0rem 1em 6em 1em;
        gap: 0rem;
    }
    
    /* Footer */
    .footer-left, .footer-right {
        max-width: 45%;
        font-size: 1rem;
    }
    
    .band-liste {
        font-size: 1.5rem;
    }
    
    body {
        font-size: 12pt;
    }

    
    .left-info, .countdown-container , .right-info {
       width: 260px;
    }
    .left-info, .right-info {
       line-height: 2rem;
    }

    .date-btn {
        padding: 0rem 1rem 0rem 1.5rem;
        font-size: 1.5rem;
        border-radius: 5px;
    }

    .date-day, .date-month {
        font-size: 1.6em;
    }

    .date-year {
        font-size: 1.8em;
        line-height: 0.8em;
    }

    .cdright {
        right: 8px;
    }
    .navbar-top {
        height: 400px;
    }

    .navbar-right {
      padding: 5rem 0em 0em 0em;
      line-height: 1.5em;
    }


    .navbar-row {
        gap: 0rem;
    }
}


@media (max-width: 880px) {
    
    .navbar-right a {
        font-size: 0rem;
        padding: 0px 3px;
    }
    .cd {
    left: 5px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);

    filter: brightness(1) drop-shadow(0 0 8px var(--SRLB-green2));
        transform: scale(1.08);
        -webkit-transform: scale(1.08);
        transition: all 0.2s;
        cursor: pointer;
        width: 100%;    
    }
    .countdown-container {
        width: 100%;  
        font-size: 1.7rem;
    }
    .hero-section {
        min-height: calc(62vw + 320px);    
    }   
    .row {
        width: 100%;
    }
    .left-info, .right-info {
        padding-left: 3px;
        width: 32%;
    }
}