/* ============================================================
   WESSEL-Hydraulik · Produkte (CPT "produkte")
   Datei: /wp-content/themes/<child-theme>/assets/css/wh-produkte.css
   Wird nur auf Single + Archiv des CPT geladen (siehe functions.php)

   Version: 1.0.0
   ============================================================ */

/* --- CD-Farben als Variablen ------------------------------- */
:root {
    --wh-nacht:  #001744; /* Text */
    --wh-funky:  #102c65; /* Farbflächen */
    --wh-wessel: #0068ad; /* Logo / Links / Linien */
    --wh-mittag: #989eaf; /* Text sekundär */
    --wh-morgen: #dde1ec; /* Farbflächen hell */
    --wh-neon:   #c8d32d; /* Sonderfarbe, sparsam */
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 999px;              /* Pill wie im restlichen CD */
    font-family: "Inter", sans-serif;  /* entfernen, falls Theme global Inter setzt */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wh-btn .wh-btn-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    transition: transform .2s ease;
}

.wh-btn:hover .wh-btn-icon { transform: translateX(3px); }

/* Primär: WESSEL Blau, weiße Schrift */
.wh-btn-primary {
    background: var(--wh-wessel);
    border-color: var(--wh-wessel);
    color: #fff;
}
.wh-btn-primary:hover,
.wh-btn-primary:focus {
    background: var(--wh-funky);
    border-color: var(--wh-funky);
    color: #fff;
}

/* Sekundär: Outline in NACHT Blau */
.wh-btn-secondary {
    background: transparent;
    border-color: var(--wh-morgen);
    color: var(--wh-nacht);
    padding: 11px 24px;
    font-size: 15px;
}
.wh-btn-secondary:hover,
.wh-btn-secondary:focus {
    background: var(--wh-morgen);
    border-color: var(--wh-morgen);
    color: var(--wh-nacht);
}
/* Pfeil im Zurück-Button zeigt nach links */
.wh-btn-secondary:hover .wh-btn-icon { transform: translateX(-3px); }

/* Optional: Akzent-Variante FUNKY Blau + FAKE Neon (laut CD nur für Buttons)
.wh-btn-accent {
    background: var(--wh-funky);
    border-color: var(--wh-funky);
    color: var(--wh-neon);
}
.wh-btn-accent:hover { background: var(--wh-nacht); border-color: var(--wh-nacht); color: var(--wh-neon); }
*/

/* ============================================================
   SINGLE PRODUKT
   ============================================================ */
.wh-product-single {
    max-width: 1160px;
    margin: 0 auto 80px;
    color: var(--wh-nacht);
}

/* Zurück zur Übersicht – linksbündig */
.wh-product-back {
    text-align: left;
    margin: 24px 0 24px;
}

/* Produkttitel – H1 nach CD: Inter Black, Großbuchstaben, NACHT Blau */
.wh-product-title-center {
    text-align: left;                 /* auf "center" setzen, falls zentriert gewünscht */
    margin: 0 0 32px;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    line-height: 1.06;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--wh-nacht);
}

/* TOP: Bild links, Inhalt rechts */
.wh-product-top {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    margin-bottom: 56px;
}

.wh-product-left {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Bildfläche in MORGEN Grau – Produktfreisteller stehen darauf besser */
.wh-product-single .wh-product-image {
    width: 100%;
    background: var(--wh-morgen);
    padding: 24px;
    border-radius: 8px;
}

.wh-product-single .wh-product-image img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;         /* entfernen, falls Bilder transparent sind */
}

.wh-product-shop-under-image { margin-top: 20px; }

.wh-product-main-right { flex: 1; }

.wh-product-description {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--wh-nacht);
}

/* Sektions-Überschriften H2 nach CD */
.wh-product-features h2,
.wh-product-tech h2,
.wh-product-bottom h2 {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--wh-nacht);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wh-morgen);
    position: relative;
}

/* Feine Linie in WESSEL Blau als Akzent */
.wh-product-features h2::after,
.wh-product-tech h2::after,
.wh-product-bottom h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background: var(--wh-wessel);
}

/* Merkmale */
.wh-product-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wh-product-features li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.wh-product-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--wh-wessel);
}

/* ============================================================
   TECHNISCHE DATEN
   ============================================================ */
.wh-product-tech { margin-bottom: 56px; }

.wh-product-tech-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 15px;
    color: var(--wh-nacht);
}

.wh-product-tech-table th {
    background: var(--wh-funky);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 14px;
    text-align: left;
    border: none;
}

.wh-product-tech-table th:first-child { border-top-left-radius: 6px; }
.wh-product-tech-table th:last-child  { border-top-right-radius: 6px; }

.wh-product-tech-table td {
    border-bottom: 1px solid var(--wh-morgen);
    padding: 12px 14px;
    text-align: left;
}

.wh-product-tech-table tbody tr:hover td { background: rgba(221, 225, 236, .45); }

.wh-product-tech-table td p { margin: 0 0 4px; }
.wh-product-tech-table td p:last-child { margin-bottom: 0; }
.wh-product-tech-table td a { color: var(--wh-wessel); }

/* Anwendung / Ausführung */
.wh-product-extra-text {
    background: var(--wh-morgen);
    border-radius: 8px;
    padding: 20px 24px;
    line-height: 1.55;
}

.wh-product-extra-text p { margin: 0 0 4px; }

.wh-product-extra-text strong {
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--wh-funky);
}

/* ============================================================
   SCHALTSCHEMA + DOWNLOADS
   ============================================================ */
.wh-product-bottom {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.wh-product-schema,
.wh-product-downloads { flex: 1; }

.wh-product-schema a.wh-schema-lightbox-trigger {
    display: block;
    cursor: zoom-in;
    background: var(--wh-morgen);
    border-radius: 8px;
    padding: 16px;
}

.wh-product-schema a.wh-schema-lightbox-trigger img {
    display: block;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* Downloads */
.wh-download-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wh-download-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px 18px;
    background: var(--wh-morgen);
    border-left: 4px solid var(--wh-wessel);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    color: var(--wh-nacht);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wh-download-link::before {
    content: "↓";
    font-weight: 700;
    color: var(--wh-wessel);
    transition: color .2s ease;
}

.wh-download-link:hover {
    background: var(--wh-funky);
    border-left-color: var(--wh-neon);
    color: #fff;
}

.wh-download-link:hover::before { color: var(--wh-neon); }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 900px) {
    .wh-product-top,
    .wh-product-bottom {
        flex-direction: column;
        gap: 32px;
    }

    .wh-product-left { flex: 1 1 auto; width: 100%; }
    .wh-product-title-center { font-size: 28px; }
    .wh-btn { width: 100%; }
}

/* Mobile Tabellen-Karten: Farben angleichen
   (ergänzt den bestehenden Block ab @media (max-width: 900px)) */
@media (max-width: 900px) {
    .wh-product-tech-table tr {
        border: 1px solid var(--wh-morgen);
        border-radius: 6px;
    }
    .wh-product-tech-table td { border-bottom: 1px solid var(--wh-morgen); }
    .wh-product-tech-table td::before {
        font-family: "Inter", sans-serif;
        font-size: 12px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--wh-funky);
        font-weight: 700;
    }
}

/* ============================================================
   Optional: Archiv-Button auf denselben Stand bringen
   ============================================================ */
.wh-product-shop-button {
    background: var(--wh-wessel);
    color: #fff;
    border-radius: 999px;
}

.wh-product-shop-button:hover,
.wh-product-shop-button:focus,
.wh-product-shop-button:active {
    background: var(--wh-funky) !important;
    color: #fff;
}