/* =====================================================================
   Preisübersicht Granitsteine – READ-ONLY, ganze Tabelle als Klickziel.
   Server-gerenderte Preistabellen (generateSmartTable) werden NUR optisch
   aufgewertet: Desktop = kompakte, ruhige Tabelle; Handy = gestapelte Karten
   (data-label aus dem Spaltenkopf, per preisuebersicht-chip.js). Jede Tabelle
   ist als Ganzes ein Link zur Produktseite (Rechner & Anfrage).
   Kein eigener Rechner, kein Popup.

   Scope = table.preis-chip-table (per JS gesetzt; die globalen .table-Klassen
   werden per JS entfernt → konfliktfreies Styling, kein !important-Wettrüsten).
   Grün-Theme identisch zu den Chip-Karten.
   © HOCH-M.D. NATURSTEINE UG – eigenständiges Werk (§ 69a UrhG).
   ===================================================================== */

table.preis-chip-table {
    --pc-gruen: #68AB03;
    --pc-gruen-dunkel: #2d5016;
    --pc-bg: #f1f8e7;
    --pc-border: #dcebc6;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 14px;
    background: #fff;
}

/* Granitpflaster-Tabellen: so breit wie der TEXT des „Mindestabnahmemenge…"-Satzes
   darunter (der Text endet vor dem Container-Rand, ~745px), NICHT die volle Breite.
   Spalten gleichmäßig verteilt (table-layout: fixed). max-width:100% → auf schmalen
   Schirmen schrumpft die Tabelle mit. Handy (<768px) = gestapelte Karten → ohne Wirkung. */
table.preis-chip-table.preis-chip-table-pflaster {
    table-layout: fixed;
    width: 745px;
    max-width: 100%;
}

/* Produkt-Beschreibung neben dem Foto ebenfalls klickbar → Produktseite (wie die Tabelle). */
.preis-titel-link {
    cursor: pointer;
    transition: color 0.12s ease;
}
.preis-titel-link:hover {
    color: #0066cc; /* Menü-Hover-Blau (Konsistenz mit der oberen Navigation) */
}

/* Button „ZUM PRODUKT / BEDARFSRECHNER" unter der Beschreibung – Stil wie der
   „In Anfrage übernehmen"-Knopf in den Chip-Karten (.ptc-submit). */
.preis-produkt-btn {
    display: inline-block;
    margin: 4px 0 10px;          /* sitzt über der Tabelle: etwas Luft nach oben + Abstand zur Tabelle */
    padding: 5px 16px;           /* schmaler in der Höhe (weniger vertikales Padding) */
    border: 1px solid transparent;
    border-radius: 4px;          /* weniger runde Ecken */
    background: #5EA53F;
    color: #ffffff;
    font-size: 14px;             /* Schriftgröße unverändert */
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.preis-produkt-btn:hover {
    background: #4f9034;
    color: #ffffff;
    text-decoration: none;
}
.preis-produkt-btn:active {
    transform: scale(0.99);
}
.preis-produkt-btn i {
    margin-left: 7px; /* kleiner Abstand zwischen „BEDARFSRECHNER" und dem Taschenrechner-Icon */
}

/* Ganze Tabelle klickbar → Produktseite */
table.preis-chip-table.preis-tabelle-link {
    cursor: pointer;
    position: relative;          /* Basis für den Schleier + Clipping */
    overflow: hidden;
    /* Umrandung per outline (nicht box-shadow!): outline-offset negativ → liegt INNEN
       und wird vom overflow des .table-responsive-Wrappers NICHT abgeschnitten →
       konsistent auf ALLEN 4 Seiten (box-shadow wurde je nach Tabellenbreite gekappt). */
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.12s ease;
}
table.preis-chip-table.preis-tabelle-link:hover {
    outline-color: var(--pc-gruen);
}
/* Diagonaler weißer Schleier: wandert beim Maus-Over einmal von links-oben nach
   rechts-unten durch die Tabelle (moderate Geschwindigkeit). */
table.preis-chip-table.preis-tabelle-link::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent 44%, rgba(255, 255, 255, 0.5) 50%, transparent 56%);
    transform: translate(-55%, -55%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
table.preis-chip-table.preis-tabelle-link:hover::after {
    animation: pc-schleier 3s ease;
}
@keyframes pc-schleier {
    0% {
        transform: translate(-55%, -55%);
        opacity: 1;
    }
    100% {
        transform: translate(55%, 55%);
        opacity: 1;
    }
}

/* Hinweis-Zeile (caption) über der Tabelle: grünes „+" + Text, echter Link */
table.preis-chip-table caption.pc-hint {
    caption-side: top;
    text-align: left;
    padding: 0 0 6px;
}
table.preis-chip-table caption.pc-hint .pc-hint-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--pc-gruen-dunkel);
    font-size: 12.5px;
}
table.preis-chip-table caption.pc-hint .pc-hint-link:hover .pc-hint-text {
    text-decoration: underline;
}

/* Kopfzeile */
table.preis-chip-table thead th {
    background: var(--pc-bg);
    color: var(--pc-gruen-dunkel);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.2;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--pc-border);
    vertical-align: middle;
}
table.preis-chip-table thead th small {
    display: block;
    font-weight: 400;
    font-size: 10.5px;
    color: #7a8a5f;
}
/* Das grüne „+"-Icon aus dem „Artikel-Nr."-Kopf (alte Popup-Affordance von
   generateSmartTable) hier ausblenden – die Tabelle ist ohnehin ganz klickbar. */
table.preis-chip-table thead .fa-circle-plus {
    display: none !important;
}

/* Datenzeilen/-zellen */
table.preis-chip-table tbody td {
    background: #fff;
    color: #333;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--pc-border);
    vertical-align: middle;
}
table.preis-chip-table tbody tr:nth-child(even) td {
    background: #fafcf6;
}

/* Größe/Bezeichnung: schlichter Text (normal), grün – KEIN Button-Look
   (die ganze Tabelle ist das Klickziel, nicht einzelne Chips). */
table.preis-chip-table td.pc-size .pc-size-wert {
    color: var(--pc-gruen-dunkel);
    /* Lange Maßangaben (z. B. „zw. 5-45 cm / 5-25 cm / 5-250 cm") dürfen umbrechen,
       damit sie auf dem Handy nicht abgeschnitten werden. Kurze Größen bleiben einzeilig. */
    white-space: normal;
}

/* Preis-Spalten (SEO-Text bleibt) – normale Schrift, dunkle Farbe */
table.preis-chip-table td.pc-price {
    color: #111;
    white-space: nowrap;
}

/* Artikel-Nr. dezent */
table.preis-chip-table tbody td:first-child {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

/* KEINE Fettschrift in den Tabellen (Nutzer-Vorgabe) – auch etwaiges <b>/<strong>
   aus der Tabellen-Ausgabe (z. B. Artikel-Nr.) auf normal setzen. */
table.preis-chip-table,
table.preis-chip-table td,
table.preis-chip-table th,
table.preis-chip-table b,
table.preis-chip-table strong {
    font-weight: 400;
}

/* =====================================================================
   HANDY (<768px): Tabelle → gestapelte Karten
   ===================================================================== */
@media (max-width: 767px) {
    table.preis-chip-table,
    table.preis-chip-table tbody {
        display: block;
        width: 100%;
    }
    table.preis-chip-table thead {
        display: none;
    }
    /* caption bleibt oben sichtbar */
    table.preis-chip-table caption.pc-hint {
        display: block;
        padding: 0 0 8px;
    }
    table.preis-chip-table tbody tr {
        display: block;
        border: 1px solid var(--pc-border);
        border-radius: 10px;
        background: var(--pc-bg);
        padding: 10px 12px;
        margin: 0 0 10px;
    }
    table.preis-chip-table tbody td {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 8px;
        border: none !important;
        background: transparent !important;
        padding: 3px 0 !important;
        /* ALLES linksbündig (überschreibt Bootstrap .text-center !important) */
        text-align: left !important;
        white-space: normal;
    }
    /* gerade Zeilen: nur Hintergrund vereinheitlichen (nicht das Layout) */
    table.preis-chip-table tbody tr:nth-child(even) td {
        background: transparent !important;
    }
    /* Label links (aus data-label) mit Doppelpunkt; lange Labels dürfen umbrechen */
    table.preis-chip-table tbody td::before {
        content: attr(data-label) ":";
        color: #666;
        font-weight: 400;
        text-align: left;
        flex: 0 1 auto;
        white-space: normal;
    }
    /* Größe: eigene Zeile oben, links, kräftig – kein Chip/Button */
    table.preis-chip-table tbody td.pc-size {
        display: block;
        margin: 0 0 6px;
        padding: 0 !important;
        text-align: left !important;
    }
    table.preis-chip-table tbody td.pc-size::before {
        content: attr(data-label) ":";
        display: block;
        color: #666;
        font-weight: 400;
        font-size: 14px;
        white-space: normal;
        margin-bottom: 1px;
    }
    table.preis-chip-table tbody td.pc-size .pc-size-wert {
        font-size: 16px;
    }
    /* Artikel-Nr.: Label + Wert zusammen (kein großer Abstand), gut lesbar */
    table.preis-chip-table tbody td:first-child {
        font-size: 14px;
        justify-content: flex-start;
        gap: 5px;
    }
    table.preis-chip-table tbody td.pc-price {
        font-size: 15px;
    }
    /* Sorten-Bild-Zelle (nur manuelle „Weitere Granite"-Tabellen): eigener Block, links, ohne Label */
    table.preis-chip-table tbody td.pc-img {
        display: block;
        text-align: left !important;
        width: auto !important;
        padding: 2px 0 4px !important;
    }
    /* auch das <a>/<img> in der Bild-Zelle links (nicht zentriert) */
    table.preis-chip-table tbody td.pc-img a,
    table.preis-chip-table tbody td.pc-img img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    table.preis-chip-table tbody td.pc-img::before {
        content: none;
    }
}

/* Tabellen-Scroll-Pfeile (die runden ‹ ›-Knöpfe, nur Handy) sind auf der read-only
   Preisübersicht nutzlos – die Tabellen werden hier zu gestapelten Karten. Ausblenden.
   Gilt NUR auf dieser Seite (diese CSS wird nur hier geladen); Sandstein-Tabellen mit
   echtem Horizontal-Scroll bleiben unberührt. */
.mobile-scroll-buttons {
    display: none !important;
}