/*
 * 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;
}

/* ── Anpassbare Spaltenbreiten ───────────────────────────────
 * flex-grow-Verhältnis pro Spalte, gesteuert über die Variablen
 * --pt-col-N auf .c4mulo5-pt-table (im Customizer einstellbar).
 * flex-grow ist PROPORTIONAL → bleibt auf allen Bildschirmgrößen
 * responsiv (kein festes px). Default 1 = alle gleich breit.
 * Die nth-child-Regel gilt gleichermaßen für Header (th) und Body
 * (cell), sodass Spaltenbreiten automatisch synchron bleiben. */
.c4mulo5-pt-th:nth-child(1),  .c4mulo5-pt-cell:nth-child(1)  { flex-grow: var(--pt-col-1,  1); }
.c4mulo5-pt-th:nth-child(2),  .c4mulo5-pt-cell:nth-child(2)  { flex-grow: var(--pt-col-2,  1); }
.c4mulo5-pt-th:nth-child(3),  .c4mulo5-pt-cell:nth-child(3)  { flex-grow: var(--pt-col-3,  1); }
.c4mulo5-pt-th:nth-child(4),  .c4mulo5-pt-cell:nth-child(4)  { flex-grow: var(--pt-col-4,  1); }
.c4mulo5-pt-th:nth-child(5),  .c4mulo5-pt-cell:nth-child(5)  { flex-grow: var(--pt-col-5,  1); }
.c4mulo5-pt-th:nth-child(6),  .c4mulo5-pt-cell:nth-child(6)  { flex-grow: var(--pt-col-6,  1); }
.c4mulo5-pt-th:nth-child(7),  .c4mulo5-pt-cell:nth-child(7)  { flex-grow: var(--pt-col-7,  1); }
.c4mulo5-pt-th:nth-child(8),  .c4mulo5-pt-cell:nth-child(8)  { flex-grow: var(--pt-col-8,  1); }
.c4mulo5-pt-th:nth-child(9),  .c4mulo5-pt-cell:nth-child(9)  { flex-grow: var(--pt-col-9,  1); }
.c4mulo5-pt-th:nth-child(10), .c4mulo5-pt-cell:nth-child(10) { flex-grow: var(--pt-col-10, 1); }
.c4mulo5-pt-th:nth-child(11), .c4mulo5-pt-cell:nth-child(11) { flex-grow: var(--pt-col-11, 1); }
.c4mulo5-pt-th:nth-child(12), .c4mulo5-pt-cell:nth-child(12) { flex-grow: var(--pt-col-12, 1); }

/* ── 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) {
    /* Sehr kleine Screens: eingestellte Spalten-Verhältnisse bleiben erhalten
     * (flex-grow ist proportional). Wird es zu eng für lange Inhalte, kann
     * die Tabelle horizontal gescrollt werden, statt Text zu zerquetschen. */
    .c4mulo5-pt-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .c4mulo5-pt-header-inner,
    .c4mulo5-pt-cells {
        min-width: 320px;
    }
}