/**
 * LC Konzert Manager Frontend Styles
 * Path: /assets/css/frontend.css
 */

/* ==========================================================================
   General Styles
   ========================================================================== */

.konzerte-liste {
    font-family: 'Verdana', Helvetica, Arial, Lucida, sans-serif;
    margin: 0;
}

.konzert-item {
    width: 100%;
    transition: all 0.3s ease;
}
.konzert-item-inner {
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 80%;
    gap: 50px;
}
.konzert-item-inner-oben {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}
/* Die Linie - initial unsichtbar */
.konzert-item-inner-oben::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background-color: #e67c29;
  transition: left 0.6s ease-in-out;
}

/* Sichtbar-Klasse für die Animation */
.konzert-item-inner-oben.visible::after {
  left: 0;
}

/* Optional: Animation beim Hochscrollen rückgängig */
.konzert-item-inner-oben.hidden::after {
  left: -100%;
}

/* Abgesagt Status */
.konzert-abgesagt {
    opacity: 0.8;
}

.konzert-titel-durchgestrichen {
    text-decoration: line-through;
}

.konzert-badge-abgesagt {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 0.5rem;
}

/* ==========================================================================
   Kompakt View
   ========================================================================== */

.konzert-kompakt {
    font-family: 'Verdana', Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    overflow: hidden;
}

.konzert-kompakt:hover {

}

.konzert-kompakt-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.konzert-kompakt .konzert-vorschaubild {
    position: relative;
    width: 100%;
    height: 239px;
    overflow: hidden;
    margin-bottom: 9.27%;
}

.konzert-kompakt .konzert-vorschaubild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.konzert-kompakt:hover .konzert-vorschaubild img {
}

.konzert-kompakt .konzert-vorschaubild .konzert-badge-abgesagt {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.konzert-kompakt-info {
    padding: 0;
}

.konzert-kompakt-info .kuenstler-gruppe {
    font-size: 19px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 9.27%;
}

.konzert-kompakt .konzert-datum {
    font-weight: 600;
    color: #666;
}

.konzert-kompakt .konzert-titel {
    margin-bottom: 9.27%;
}

/* ==========================================================================
   Minimal View
   ========================================================================== */

.konzert-minimal {
    display: flex;
    justify-content: center;
    font-family: 'Verdana', Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    padding: 50px 0;
}

.konzert-minimal:nth-child(even) {
	background-color: #f4f4f4
}

.konzert-minimal-meta {
    font-family: 'Arial',Helvetica,Arial,Lucida,sans-serif;
    display: flex;
    justify-content: start;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    font-size: 21px;
    font-weight: 600;
}
.konzert-item-inner-oben .konzert-datum-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}


.konzert-minimal .konzert-wochentag {

}

.konzert-minimal .konzert-datum {

}

.konzert-minimal .konzert-uhrzeit {

}

.konzert-minimal-content {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    gap: 1rem;
}

.konzert-minimal .konzert-ort {

}

.konzert-minimal .konzert-begegnung {
    width: 100%;
    font-size: 14px;
    margin-bottom: 0.75rem;
}

.konzert-minimal .konzert-titel {
    flex: 1;
    margin: 0;
    font-size: 26px;
    color: #e67c29;
    text-transform: uppercase;
}

.konzert-minimal .konzert-zusatz-1,
.konzert-minimal .konzert-zusatz-2 {
    flex: 1;
}
.konzert-minimal .km-button-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
}



/* ==========================================================================
   Voll View
   ========================================================================== */

.konzert-voll {
    font-family: 'Verdana', Helvetica, Arial, Lucida, sans-serif;
    display: flex;
    justify-content: center;
    padding: 50px 0;
}
.konzert-voll:nth-child(even) {
	background-color: #f4f4f4
}

.konzert-voll-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    align-items: start;
    width: 100%;
}

.konzert-voll .konzert-vorschaubild {
    width: 100%;
    height: auto;
    position: relative;
}

.konzert-voll .konzert-vorschaubild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.konzert-voll .konzert-vorschaubild .konzert-badge-abgesagt {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.konzert-voll-mitte {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.konzert-voll .kuenstler-gruppe {
    margin-bottom: 0;
}

.konzert-voll .kuenstler-liste li,
.entry-content .konzert-voll ul.kuenstler-liste li {
    padding:  0;
    border-bottom: 0;
}

.konzert-voll .km-button-wrap {
    padding-top: 20px;
}

.konzert-voll-ende {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.konzert-voll .konzert-reihe {
    margin-bottom: 20px;
}
.konzert-voll .konzert-item-inner-oben {
    font-size: 21px;
    font-weight: 600;
    padding-bottom: 10px;
}
.konzert-voll .konzert-datum-full .datum {
    font-weight: 600;
}

.konzert-voll .konzert-datum-full > span {
    display: inline-block;
}

.konzert-voll .konzert-datum-full .monat-jahr {
    font-weight: 600;
}

.konzert-voll .konzert-titel {
    margin: 0;
    font-size: 26px;
    color: #e67c29;
    text-transform: uppercase;
    line-height: 1.4;
}

.konzert-voll .konzert-ort,
.konzert-voll .konzert-begegnung,
.konzert-voll .konzert-moderation,
.konzert-voll .konzert-vorverkauf {
    margin-bottom: 20px;
}
.konzert-voll .preise-wrapper {
    margin: 0;
}
.konzert-voll .konzert-preise {
    border-left-width: 2px;
    border-style: solid;
    border-left-color: #e67c29;
}
.konzert-voll .preise-liste,
.entry-content .konzert-voll ul.preise-liste {
    list-style: none;
    padding: 0 0 0 5px;
    margin: 0;
}
.konzert-voll .preise-liste li,
.entry-content .konzert-voll ul.preise-liste li {
    justify-content: start;
    gap: 5px;
    border-bottom: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.et_pb_button.km-button {
    border-width: 0px !important;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif !important;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
}

.et_pb_button.km-info-button {
    background-color: #e67c29;
    color: #fff;
}

.et_pb_button.km-info-button:hover {
    background-color: #e67c29 !important;
    color: #fff;
}

.et_pb_button.km-ticket-button {
    background-color: #e67c29;
    color: #fff;
}

.et_pb_button.km-ticket-button:hover {
    background-color: #e67c29 !important;
    color: #fff;
}

/* ==========================================================================
   Single Concert Template
   ========================================================================== */

.konzert-single {
    font-family: 'Verdana', Helvetica, Arial, Lucida, sans-serif;
    margin: 0;
}

/* Header with background image */
.konzert-header {
    position: relative;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.konzert-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.konzert-header-content.km-container {
    position: absolute;
    bottom: -10px;
    right: 0;
    z-index: 1;
    color: #fff;
    padding: 30px 30px 20px;
}

.konzert-header .konzert-reihe {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.konzert-header h1.konzert-titel {
    color: #fff;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

.konzert-header .konzert-badge-abgesagt {
    margin-top: 1rem;
    font-size: 1rem;
}

/* Simple header without image */
.konzert-header-simple {
    padding: 3rem 0;
    background-color: #f8f9fa;
    text-align: center;
}

.konzert-header-simple .konzert-titel {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

/* Content Layout */
.konzert-content {
    display: flex;
    gap: 3rem;
    padding: 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.konzert-main {
    flex: 1;
    min-width: 0;
}

.konzert-sidebar {
    padding-top: 20px;
    flex-shrink: 0;
    width: 350px;
}

/* Details Box */
.konzert-details-box {
    padding: 0;
    margin-bottom: 20px;
}

.konzert-details-box h2 {
    margin-top: 30px;
    margin-bottom: 0;
    color: #ff6600;
    font-size: 23px;
    text-transform: uppercase;
}

.konzert-detail-row {
    display: flex;
        gap: 0;
    margin-bottom: 0;
}

.konzert-detail-row .label {
    font-weight: 600;
    flex-shrink: 0;
    width: 160px;
}

.konzert-detail-row .value {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
}
.konzert-detail-row .value.verantsaltungsreihe {
    padding-bottom: 20px;
}




.konzert-detail-row.konzert-begegnung {
}

/* Description */
.konzert-beschreibung {
    margin: 10px 0;
    line-height: 1.8;
    font-size: 1.0625rem;
}

/* Additional Info */
.konzert-zusatzangaben {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.7;
}

.konzert-zusatzangaben p {
    margin: 20px 0;
}

/* Artists */
.konzert-kuenstler-box {
    padding: 0;
    border-radius: 0;
    margin: 2rem 0;
}

.konzert-kuenstler-box h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.kuenstler-gruppe {
    font-size: inherit;
    margin-bottom: 1rem;
}

.kuenstler-liste,
.entry-content ul.kuenstler-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kuenstler-liste li,
.entry-content ul.kuenstler-liste li {
    padding: 1px 0;
}

.kuenstler-liste li:last-child,
.entry-content ul.kuenstler-liste li:last-child {
    border-bottom: none;
}

.kuenstler-liste .instrument,
.entry-content ul.kuenstler-liste .instrument {
    color: #666;
    font-size: 14px;
}

/* Moderation */
.konzert-moderation-box {
    margin: 10px 0 20px;
}

/* Bild */
.konzert-vorschaubild-box img {
    width: 100%;
}


/* Sidebar Boxes */
.konzert-ticket-box {
    padding: 0;
    border-top: 1px solid #e0e0e0;
    border-radius: 0;
    margin-bottom: 60px;
}
.konzert-sponsoren-box {

}
.konzert-sponsoren-danke {
    padding: 10px 0;
    font-size: 12px;
    color: #aaaaaa;
}

.konzert-ticket-box h3,
.konzert-sponsoren-box h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

/* Prices */
.preise-wrapper {
    margin: 1.5rem 0;
}

.preise-liste,
.entry-content ul.preise-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.preise-liste li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
}

.preise-liste li:last-child {
    border-bottom: none;
}

.preise-liste .kategorie {
}

.preise-liste .preis {
    font-weight: 700;
}

.preise-hinweis {
    font-size: 0.875rem;
    color: #666;
    font-style: italic;
}

.konzert-vorverkauf {
    margin-bottom: 20px;
    color: #ff6600;
    font-weight: 600;
}

.ticket-button-wrapper {
    margin-top: 1.5rem;
}

.ticket-button-wrapper .km-ticket-button {
    display: block;
    width: 100%;
    max-width: 300px;
}

/* Sponsors */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
}

.sponsor-logo:hover {
    transform: scale(1.05);
}

.sponsor-logo img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.sponsor-logo:hover img {
    filter: grayscale(0%);
}

.sponsor-logo a {
    display: block;
}


/* Sponsor-Klassen spezifische Styles */
.sponsor-gold {
    /* Gold-Sponsoren können hervorgehoben werden */
}

.sponsor-silber {
    /* Silber-Sponsoren */
}

/* Sponsor Names */
.sponsor-namen {
    margin-top: 1rem;
}

.sponsor-namen-gold,
.sponsor-namen-silber,
.sponsor-namen-bronze {
    margin-bottom: 2rem;
}

.sponsor-namen-gold ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 2rem;
}

.sponsor-namen-silber ul,
.sponsor-namen-bronze ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 3;
    column-gap: 2rem;
}

.sponsor-namen li {
    padding: 0.5rem 0;
    break-inside: avoid;
}

/* Gold-Sponsoren hervorheben */
.sponsor-namen-gold li {
    font-weight: 600;
    font-size: 1.1em;
}

.sponsor-namen-silber li {
    font-weight: 500;
}

.sponsor-namen-bronze li {
    font-size: 0.95em;
    color: #666;
}




/* Sponsor Names */
.sponsor-namen ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 2rem;
}

.sponsor-namen li {
    padding: 0.5rem 0;
    break-inside: avoid;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 992px) {
    .konzert-content {
        flex-direction: column;
    }
    
    .konzert-sidebar {
        width: 100%;
    }
    
    .konzert-voll .konzert-item-inner {
        flex-direction: column;
    }

    .konzert-voll-content {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "element2 element3"
        "element1 element1";
    }
  
    .konzert-vorschaubild { grid-area: element1; }
    .konzert-voll-mitte { grid-area: element2; }
    .konzert-voll-ende { grid-area: element3; }

    
    .konzert-voll .konzert-vorschaubild {

    }
    .konzert-ticket-box {
        margin-bottom: 0;
    }
}
@media (min-width: 993px) {
    .km-hide-desk {
        display: none;
    }
}

@media (max-width: 767px) {
    .konzert-header .konzert-titel {
        font-size: 2rem;
    }
    
    .konzert-minimal .konzert-item-inner {
        flex-direction: column;
    
    }
    
    .konzert-minimal-meta {
        width: 100%;
        text-align: left;
    }

    .konzert-voll-content {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "element1"
        "element2"
        "element3";
    }
    
    .konzert-detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .konzert-detail-row .label {
        width: 100%;
    }
    
    .sponsor-namen ul {
        column-count: 1;
    }
}




/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .konzert-kompakt .konzert-vorschaubild,
    .konzert-kompakt-info .kuenstler-gruppe,
    .konzert-kompakt .konzert-titel {
        margin-bottom: 30px;;
    }

    .konzert-item-inner {
        gap: 30px;
    }

  .konzert-minimal-content {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .konzert-titel,
  .konzert-zusatz-1 {
    flex: 1 1 45%;
  }
  
  .km-button-wrap {
    flex: 1 1 100%;
    order: 3;
    padding-top: 10px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .konzert-minimal-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .konzert-datum-wrapper {
    width: 100%;
  }
  
  .konzert-ort {
    text-align: left;
    width: 100%;
  }
  
  .konzert-minimal-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .konzert-titel,
  .konzert-zusatz-1 {
    width: 100%;
 
  }
  
  .km-button-wrap {

  }
}



/* ==========================================================================
   Utilities
   ========================================================================== */

.km-no-concerts {
    padding: 2rem;
    text-align: center;
    color: #666;
    font-style: italic;
}

.km-error {
    padding: 1rem;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.km-container {
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 0;
}


/* ==========================================================================
   Zusatz Custom Styles
   ========================================================================== */