/**
Theme Name: Speicherguru-Child-Template
Author: Iwan Zarembo
Author URI: https://speicherguru.de
Description: A child template for additional features.
Version: 1.0.0
Text Domain: speicherguru-child-template
Template: astra
*/
/* Standard-Styling für die Attribut-Tabelle */
.woocommerce table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Hilft, Spalten gleichmäßig zu verteilen */
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ddd; /* Optional: Für bessere Sichtbarkeit */
}

/* Kein Zeilenumbruch in Eigenschaftsnamen auf großen Bildschirmen */
@media (min-width: 768px) { /* Ab Tablet-Größe, passe bei Bedarf an */
    .woocommerce table.shop_attributes th {
        white-space: nowrap; /* Verhindert Umbrüche */
        width: 15%; /* Passe den Platz für Namen an, z. B. 40% für Namen, Rest für Werte */
    }
    
    .woocommerce table.shop_attributes td {
        width: 85%; /* Weniger Platz für Werte, um es kompakter zu machen */
        word-break: break-word; /* Erlaubt Umbrüche in langen Werten, falls nötig */
    }
}

/* Auf kleinen Bildschirmen: Erlaube Umbrüche für bessere Lesbarkeit */
@media (max-width: 767px) {
    .woocommerce table.shop_attributes th {
        white-space: normal; /* Erlaubt Umbrüche */
    }
    
    /* Optional: Stacke die Tabelle für Mobile (wie eine Liste) */
    .woocommerce table.shop_attributes th,
    .woocommerce table.shop_attributes td {
        display: block;
        width: 100%;
    }
    
    .woocommerce table.shop_attributes th {
        font-weight: bold;
    }
}
/* Wrapper für die gesamte Specs-Tabelle */
.dwspecs-product-table {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

/* Group-Titles hervorheben – gleiche Farbe wie Tabs (passe #f2994a an deine genaue Tab-Farbe an, z.B. aus Astra Customizer) */
.dwspecs-product-table-group .group-title {
    color: var(--ast-global-color-1); /* Orange/Gelb wie aktive Tabs */
    font-size: 100%;
    padding: 10px;
    margin: 20px 0 10px;
    border-bottom: 2px solid #f2994a; /* Unterstrich in Tab-Farbe für mehr Hervorhebung */
}

/* Tabellen-Styling – ähnlich wie alte .shop_attributes */
.dwspecs-product-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Feste Layout für gleichmäßige Spalten */
}

.dwspecs-product-table table td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ddd; /* Grenzen wie in der alten Tabelle */
}


/* Kein Zeilenumbruch in Eigenschaftsnamen auf großen Bildschirmen (wie in deiner alten Anfrage) */
@media (min-width: 768px) {
    .dwspecs-product-table table td:first-child {
        white-space: nowrap; /* Verhindert Umbrüche */
        width: 20%; /* 40% für Namen, Rest für Werte */
    }
    
    .dwspecs-product-table table td:last-child {
        width: 80%;
        word-break: break-word; /* Umbrüche in langen Werten erlauben */
    }
}

/* Auf kleinen Bildschirmen: Erlaube Umbrüche und stacke für Mobile */
@media (max-width: 767px) {
    .dwspecs-product-table table td:first-child {
        white-space: normal;
    }
    
    .dwspecs-product-table table td {
        display: block;
        width: 100%;
    }
    
    .dwspecs-product-table table td:first-child {
        font-weight: bold;
        
    }
}

/* Wrapper für die Specs-Tabelle – Dark Mode BG */
.dwspecs-product-table {
    width: 100%;
    margin: 0 auto;
    border: none; /* Keine äußere Grenze */
    padding: 0;
}

/* Group-Titles – Orange wie aktive Tabs, mit Unterlinie */
.dwspecs-product-table-group .group-title {
    color: var(--ast-global-color-1); /* Orange Akzent */
    font-size: 100%;
    font-weight: bold;
    padding: 10px 0;
    margin: 20px 0 10px;
    border-bottom: 2px solid #f2994a; /* Orange Unterlinie */
}

/* Tabellen-Styling – Dark Mode, nur horizontale Linien */
.dwspecs-product-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.dwspecs-product-table table tbody tr {
    border-bottom: 1px solid #333; /* Dunkle horizontale Linien */
}

.dwspecs-product-table table td {
    padding: 10px 15px; /* Mehr Padding für Luftigkeit */
    text-align: left;
    vertical-align: top;
    border: none; /* Keine vertikalen Grenzen */
    background: transparent; /* Kein alternierender BG, alles dunkel */
}

.dwspecs-product-table table td:first-child {
    font-weight: normal; /* Normale Schrift für Eigenschaften */
}

/* Kein Zeilenumbruch auf großen Screens */
@media (min-width: 768px) {
    .dwspecs-product-table table td:first-child {
        white-space: nowrap;
        width: 20%; /* Etwa gleichmäßig, passe an (im Bild ca. 40-60) */
    }
    
    .dwspecs-product-table table td:last-child {
        width: 80%;
        word-break: break-word;
    }
}

/* Mobile: Erlaube Umbrüche und stacke */
@media (max-width: 767px) {
    .dwspecs-product-table table td:first-child {
        white-space: normal;
    }
    
    .dwspecs-product-table table td {
        display: block;
        width: 100%;
    }
    
    .dwspecs-product-table table td:first-child {
        font-weight: bold;
    }
    
    .dwspecs-product-table table tbody tr {
        border-bottom: 1px solid #444; /* Etwas hellere Linie für Mobile */
    }
}