/*
 * C4mulo5 – Preistabelle (Price Table)
 * Passt zum Screenshot: Serif-Titel, farbige Köpfe, saubere Zeilen.
 * Alle Farben über CSS-Variablen überschreibbar.
 *
 * Autor: Nico Eberhardt – https://nico-eberhardt.de
 */

/* ── CSS-Variablen (global überschreibbar) ──────────────── */
.c4mulo5-price-table {
    --pt-accent:       #c8a84b;      /* Gold/Gelb für Spaltenköpfe  */
    --pt-accent-text:  #ffffff;      /* Textfarbe auf Kopfzeile      */
    --pt-title-font:   'Playfair Display', Georgia, serif;
    --pt-title-color:  #1d2327;
    --pt-title-size:   1.6rem;
    --pt-divider:      #dcdcde;      /* Trennlinie zwischen Tabellen */
    --pt-row-odd:      #ffffff;
    --pt-row-even:     #f8f8f8;
    --pt-row-hover:    #fef9ec;
    --pt-text:         #1d2327;
    --pt-footnote:     #50575e;
    --pt-header-weight: 700;
    --pt-header-size:  0.75rem;
    --pt-cell-size:    0.9rem;
    --pt-cell-padding: 10px 14px;
}

/* ── Haupt-Layout: Tabellen nebeneinander ───────────────── */
.c4mulo5-pt-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
    align-items: flex-start;
    width:     100%;
}

.c4mulo5-pt-table-wrap {
    flex:      1 1 0;
    min-width: 0;
    padding:   0 10px;
    box-sizing: border-box;
}

/* Trennlinie zwischen Tabellen (nicht nach der letzten) */
.c4mulo5-pt-cols-2 .c4mulo5-pt-table-wrap:not(:last-child),
.c4mulo5-pt-cols-3 .c4mulo5-pt-table-wrap:not(:last-child) {
    border-right: 1px solid var(--pt-divider);
}

/* ── Titel über der Tabelle ──────────────────────────────── */
.c4mulo5-pt-title {
    font-family:   var(--pt-title-font);
    font-size:     var(--pt-title-size);
    font-style:    italic;
    font-weight:   400;
    color:         var(--pt-title-color);
    margin:        0 0 16px;
    padding-bottom: 10px;
    line-height:   1.3;
}

/* ── Kopfzeile ───────────────────────────────────────────── */
.c4mulo5-pt-header {
    margin-bottom: 0;
}

.c4mulo5-pt-header-inner {
    display:   flex;
    flex-wrap: nowrap;
}

.c4mulo5-pt-th {
    flex:          1 1 0;
    padding:       var(--pt-cell-padding);
    font-size:     var(--pt-header-size);
    font-weight:   var(--pt-header-weight);
    text-transform: uppercase;
    letter-spacing: .04em;
    color:         var(--pt-accent);
    border-bottom: 2px solid var(--pt-accent);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Datenzeilen ─────────────────────────────────────────── */
.c4mulo5-pt-body {
    display:   flex;
    flex-direction: column;
}

.c4mulo5-pt-row-data {
    border-bottom: 1px solid var(--pt-divider);
}

.c4mulo5-pt-row-data:nth-child(odd)  { background: var(--pt-row-odd); }
.c4mulo5-pt-row-data:nth-child(even) { background: var(--pt-row-even); }
.c4mulo5-pt-row-data:hover           { background: var(--pt-row-hover); }

.c4mulo5-pt-cells {
    display:   flex;
    flex-wrap: nowrap;
    width:     100%;
}

.c4mulo5-pt-cell {
    flex:       1 1 0;
    display:    block;
    padding:    var(--pt-cell-padding);
    font-size:  var(--pt-cell-size);
    color:      var(--pt-text);
    white-space: nowrap;
}

/* Erste Zelle leicht fett (Dauer) */
.c4mulo5-pt-cell:first-child {
    font-weight: 500;
}

/* ── Fußnoten ────────────────────────────────────────────── */
.c4mulo5-pt-footnotes-row {
    margin-top: 28px;
}

.c4mulo5-pt-footnotes p,
.c4mulo5-pt-footnote {
    font-size:   0.82rem;
    color:       var(--pt-footnote);
    margin:      0 0 6px;
    line-height: 1.6;
}

.c4mulo5-pt-footnotes p:last-child,
.c4mulo5-pt-footnote:last-child {
    margin-bottom: 0;
}

/* ── Customizer: Editable-Bereiche sichtbar machen ──────── */
.wp-customizer .c4mulo5-pt-th[data-type="column"],
.wp-customizer .c4mulo5-pt-row-data[data-type="column"] {
    outline: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .c4mulo5-pt-cols-3 .c4mulo5-pt-table-wrap {
        flex: 1 1 100%;
        border-right: none !important;
        border-bottom: 1px solid var(--pt-divider);
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {
    .c4mulo5-pt-row {
        flex-direction: column;
    }
    .c4mulo5-pt-table-wrap {
        flex: 1 1 100%;
        border-right: none !important;
        padding: 0 0 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--pt-divider);
    }
    .c4mulo5-pt-table-wrap:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .c4mulo5-pt-th,
    .c4mulo5-pt-cell {
        font-size: 0.78rem;
        padding: 8px 8px;
    }
}

@media (max-width: 480px) {
    /* Auf sehr kleinen Screens: erste Spalte fix, Rest flexibel */
    .c4mulo5-pt-th:first-child,
    .c4mulo5-pt-cell:first-child {
        flex: 0 0 44px;
        padding-right: 4px;
    }
}