/* --- BASIS --- */
.gig-wrapper { margin-bottom: 30px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; background: #fff; }


/* --- DESKTOP DESIGN --- */
.gig-desktop-card { display: table; width: 100%; table-layout: fixed; }

/* --- DESKTOP SIDEBAR FIX --- */
.gig-dt-sidebar { 
    display: table-cell; 
    width: 160px; 
    background: #333; 
    color: #fff; 
    vertical-align: middle; 
}

.sidebar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px; /* Verhindert das Zusammenquetschen bei wenig Content rechts */
}

/* Hält die 3 Elemente kompakt zusammen */
.sidebar-bundle {
    display: block;
    text-align: center;
    line-height: 1.2;
}

.icon-cal-dt { 
    font-size: 1.5rem !important; 
    margin-bottom: 18px; 
    display: inline-block;
}

.dt-date-text {
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.dt-time-text {
    font-weight: normal;
    font-size: 1.1rem;
    opacity: 0.8;
}

.gig-dt-content { display: table-cell; padding: 25px; vertical-align: top; }

/* Location Styling Desktop */
.loc-box-dt { display: flex; gap: 12px; margin-top: 10px; }
.icon-pin { color: #000; padding-top: 4px; }
.addr-text { line-height: 1.3; font-size: 1.15rem; }

.btn-ticket { 
    display: inline-block; 
    padding: 4px 8px; 
    background: #d00; 
    color: #fff !important; 
    text-decoration: none; 
    border-radius: 4px; 
    margin-top: 20px; 
    font-size: 1.1rem;
    font-weight: normal;
}




/* --- MOBILE DESIGN --- */
.gig-mobile-card { display: none; }

@media screen and (max-width: 600px) {
    .gig-desktop-card { display: none !important; }
    .gig-mobile-card { display: block !important; }
    
    .gig-mob-header { background: #333; color: #fff; padding: 12px 20px; font-size: 1rem; }
    .mob-time { font-weight: normal; font-size: 0.85rem; opacity: 0.8; } /* Kleiner & nicht fett */
    
    .gig-mob-body { padding: 20px; }
    
    .loc-box-mob { display: flex; gap: 10px; margin-top: 15px; }
    
    .btn-ticket-mob { 
        display: block; 
        text-align: center;
        padding: 12px; 
        background: #d00; 
        color: #fff !important; 
        text-decoration: none; 
        border-radius: 4px; 
        margin-top: 15px; 
        font-weight: bold;
    }
}


/* --- GEMEINSAME TYPO --- */
.title-area { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin-bottom: 5px; }
.title-area a { color: #222; text-decoration: none; }


/* Filter entfernen, damit Farben im Inneren funktionieren! */
.is-cancelled { 
    opacity: 0.8; /* Etwas weniger transparent als 0.6, damit es lesbar bleibt */
    /* border-color: #d00; /* Optional: Roter Rahmen für die Karte */
    /* filter: grayscale(1);  <-- Diese Zeile MUSS raus oder auskommentiert werden */
}

/* Erhöhte Spezifität: Wir sagen "Ein Link innerhalb der Title-Area eines abgesagten Gigs" */
.is-cancelled .title-area a {
    text-decoration: line-through !important;
    color: #999 !important;
    opacity: 0.6;
}

/* Falls der Titel kein Link ist, brauchen wir auch das: */
.is-cancelled .title-area {
    text-decoration: line-through;
    color: #999;
}
/* --- CANCEL NOTICE TUNING --- */
.cancel-notice { 
    display: block; 
    text-align: center;
    padding: 8px; 
    background: #d00 !important; /* Kräftiges Rot */
    color: #fff !important; 
    margin: 10px 0; 
    font-size: 1.1rem; 
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
}

/* Falls du die Location bei Absage doch grau willst, mach es gezielt: */
.is-cancelled .addr-text, 
.is-cancelled .dt-date-text {
    color: #777;
}

/* Das rote X vor dem Titel */
.cancel-x-icon {
    color: #d00;
    margin-right: 8px;
    font-size: 1.1em;
    vertical-align: middle;
}

.cancel-arrow-icon {
    color: #d00;
    /*margin: 8px 0; /* Abstand links und rechts */
    margin-left: 8px;
    font-size: 0.9em;
    /*vertical-align: middle;*/
}

/* Der Absagegrund am Ende der Zeile */
.cancel-reason-suffix {
    color: #d00 !important;
    font-weight: 800;
    /*margin-left: 10px;*/
    text-transform: uppercase; /* Macht es noch deutlicher */
    font-size: 0.9em;
}



.archive-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
    transition: background-color 0.2s ease; /* Kleiner Bonus: Hover-Effekt */
}

.archive-date {
    flex: 0 0 120px; 
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 1.0rem; /* Etwas kleiner wirkt oft edler für Badges */
    
    /* Hier kommt das Badge-Styling */
    background: #f0f0f0;    /* Dezent grauer Hintergrund */
    color: #444;            /* Dunkelgraue Schrift */
    padding: 4px 10px;      /* Innenabstand für die Box-Optik */
    border-radius: 4px;     /* Abgerundete Ecken */
    text-align: center;     /* Datum im Badge zentrieren */
    margin-right: 15px;     /* Abstand zum restlichen Content */
    border: 1px solid #e0e0e0; /* Ganz feine Outline */
}

.archive-content {
    flex: 1;
    /*display: flex;*/
    display: block;
    /*align-items: center;*/
}

.archive-title {
    margin-right: 5px; /* Kleiner Abstand zum @-Zeichen */
    white-space: nowrap; /* Verhindert den Umbruch innerhalb des Titels, falls gewünscht */
}

.archive-loc {
    white-space: nowrap; /* Verhindert den Umbruch innerhalb des Titels, falls gewünscht */
    color: #888;
    font-style: italic;
}

/* --- MOBILE OPTIMIERUNG FÜR DAS ARCHIV --- */
@media screen and (max-width: 600px) {
    /* Die Reihe muss flexibel nach unten wachsen können */
    .archive-row {
        display: block !important; /* Wir schalten Flexbox komplett aus */
        width: 100% !important;
        height: auto !important;
        /*margin-bottom: 4px !important; */
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee;        
    }

    /* Der Inhalts-Container */
    .archive-content {
        display: block !important;
        width: 100% !important;
        white-space: normal !important; /* Das ist der 'Killer' für den Überhang */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        line-height: 1.4;
    }

    .archive-date {
        display: inline-block !important; /* inline-block erlaubt margin-bottom */
        margin-bottom: 5px !important;   /* Abstand zum Text DARUNTER in derselben Zeile */
        margin-top: 5px !important;      /* Zusätzlicher Puffer nach OBEN zur Trennlinie */
        font-size: 1.1rem; 
    }

    /* Der Titel und die Location als fließende Elemente */
    .archive-title, 
    .archive-loc,
    .cancel-reason-suffix {
        display: inline !important; 
        white-space: normal !important;
    }
}