/* Container für die drei Spalten */
.custom-post-container {
    display: flex;
    flex-wrap: wrap;
    /* Für responsives Verhalten */
    gap: 20px;
    /* Abstand zwischen den Spalten */
    justify-content: space-between;

    font-size: 15px;
    width: auto;
}

/* Allgemeine Stildefinition für jede Spalte */
.post-element {
    flex: 1;
    /* Jede Spalte nimmt gleich viel Platz ein */
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    width: 100%;
    margin: 40px 40px 40px 40px;
}

/* Container mit festgelegtem quadratischem Seitenverhältnis */
.image-column {
    aspect-ratio: 1 / 1;
    /* Quadrat mit Seitenverhältnis 1:1 */
    /* width: 200px; */
    overflow: hidden;
    border-radius: 50%;
    /* Optional: Kreisform */
    border: 0px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: auto;*/
    margin: 40px auto auto auto;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.entry-content {
    padding-left: 140px;
    padding-right: 140px;
    margin-top: 20px
}

/* Text-Spalten (Text kann hier angepasst werden) */
.text-column {
    padding: 10px;
	color: #0C0C0C !important;
}

.text-column a:hover,
.text-column a:focus,
.text-column a:active {
    color: #0C0C0C !important;
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .custom-post-container {
        flex-direction: column;
        /* Spalten untereinander anordnen */
    }

    .entry-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .post-element {
        /*margin: 15px 15px 15px 15px;*/
        margin: 0px;
    }
}

.custom-post-title {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    line-height: normal;
    /* Jede Spalte nimmt 100% der Breite ein */
}


/* artist list css */

/*body{
  background-color: #E5E3DC;
  font-family: "roboto", san-serif;
  color: #141414;
}*/

.artist-span {
  margin-right: 10px;
  font-family: "roboto", san-serif;
  font-weight: 700; 
  font-size: 20px;
  line-height: 1.6; 
  color: #E5E3DC;

  text-decoration-skip-ink: none;
  text-decoration-thickness : 28px;
  text-decoration-color: #141414;
  text-decoration-line: underline;
  text-underline-offset: -21px;
  
  white-space: nowrap;
  display: inline-block !important;

  /* chrome thin line issue */
  background-clip: text;
  background-color: #141414;
}

.artist-span::before, .artist-span::after {
  content: "\00a0";
  /*background-color: #141414;
  border-color: #141414;*/
}

.c2o-event-date {
    margin-bottom: 20px;
}

.content-div {
    font-size: 15px;
}

.wp-block-table {
    width: 100%;
    border-collapse: collapse;
    border-width: 0px;
}

.wp-block-table colgroup col:first-child {
    width: 30% !important;
}

.wp-block-table colgroup col:last-child {
    width: 70% !important;
}

.wp-block-table,
.wp-block-table th,
.wp-block-table td {
    border: 0px solid black;
    text-align: left;
}

.add_to_cart_button {
    text-indent: -9999px;
    line-height: 0;
    font-size: 0px
        /* Collapse the original line */
}

.add_to_cart_button::after {
    content: "";
    text-indent: 0;
    display: block;
    line-height: initial;

    visibility: visible;
    content: "\f132";

    font-family: "Dashicons";
    display: inline-block;
    font-size: 20px;
    color: rgb(20, 20, 20);
    vertical-align: middle;
    /* New content takes up original line height */
}


.wc-forward {
    text-indent: -9999px;
    line-height: 0;
    font-size: 0px;
    /* Collapse the original line */
}

.wc-forward::after {
    content: "AA";
    text-indent: 0;
    display: block;
    line-height: initial;
    visibility: visible;
    content: "\f174";
    color: rgb(20, 20, 20);

    font-family: "Dashicons";
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    /* New content takes up original line height */
}

.ticket-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    color: rgb(12, 12, 12);
    font-size: 15px;
    flex-wrap: wrap;
}

.ticket {
    position: relative;
    padding: 20px;
    text-align: center;
    height: 200px;
    width: 140px;
    background: rgb(229, 227, 220);
    /* Ticket color */
    border: 2px solid rgb(12, 12, 12);
    /* Main border */
    overflow: hidden;
}

.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 42px;
    /* Slightly larger to fully erase */
    height: 22px;
    background: rgb(229, 227, 220);
    /* Matches ticket */
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border: 2px solid rgb(12, 12, 12);
    /* Redraw border */
}

.ticket::before {
    top: -11px;
    /* Moves up to erase top border */
    border-bottom: none;
    /* Removes bottom half */
}

.ticket::after {
    bottom: -11px;
    /* Moves down to erase bottom border */
    border-top: none;
    /* Removes top half */
}

.ticket h3 {
    padding-top: 18px;
}

.ticket p {
    padding-top: 12px;
    padding-bottom: 10px;
}

.ticket-button,
.ticket-button button:disabled {
    font-size: 20px !important;
    cursor: pointer;
    border: 1px solid rgb(12, 12, 12);
    color: rgb(12, 12, 12) !important;
    background-color: transparent !important;
    fill: transparent;
    color: #141414;
    padding: 12px 16px 12px 16px !important;
    /*display: contents;*/
    /* added as input*/
}

.ticket-button:disabled {
    padding: 12px 16px 12px 16px !important;
}

.ticket-button:hover {
    background-color: #141414 !important;
    color: rgb(229, 227, 220) !important;
}

.ticket-button button:focus .ticket-button button:active .ticket-button button:active {
    background-color: transparent !important;
}

.ticket-button-nav {
    border-style: solid !important;
    border-color: #141414 !important;
    border-radius: 30px !important;

    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px 0px 20px;

}

.my-nav-button-container {
    right: 180px;
    position: absolute;
    display: flex;
}

@media (max-width: 768px) {
    .my-nav-button-container {
        display: contents;

    }

}

.ticket-container h3 {
    font-size: 20px !important;
}

.ticket-container p {
    font-size: 15px;
}

.counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0 0;
    /*padding: 12px 12px 12px 12px !important;*/

}

.summary {
    margin-top: 20px;
    display: contents;
    justify-content: center;
}

input[type="submit"]:hover {
    background-color: rgb(12, 12, 12);
    color: rgb(229, 227, 220);
}

.summary table td:nth-child(3) {
    text-align: right;
}

.summary table td:nth-child(2) {
    text-align: right;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: red;
}

.summary table {
    border-collapse: collapse;
    width: 100%;
    /*margin-top: 10px;*/
}

.summary th,
.summary td {
    padding: 10px;
    text-align: left;
}