/*
Theme Name: PressureHub
Template: chromax
Version: 1.0.0
Text Domain: pressurehub
*/

/* =========================================================
   1) Fonts
   ========================================================= */
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/*
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}*/
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat/Montserrat-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('/wp-content/themes/pressurehub/assets/fonts/material-symbols/MaterialSymbolsOutlined.woff2')
       format('woff2');
  font-display: swap;
}


/* =========================================================
   2) Root Variables (NUR EINMAL!)
   ========================================================= */
:root{
  --dt-main-color:#00a7b5;
  --dt-secondary-color:#003661;

  --bs-primary:#00a7b5;
  --bs-secondary:#003661;
  --bs-third:#F28C1D;

  --dt-title-family:"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --dt-base-family:"Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.hidden{ display:none; }

/* =========================================================
   3) Base Typography
   ========================================================= */
h2{
  font-size:24px;
  font-weight:700;
  text-transform:inherit;
}
@media (max-width: 480px){
  h2{ font-size:20px; }
}

/* =========================================================
   4) Gutenberg Content Spacing (Frontend ≈ Editor)
   ========================================================= */
.entry-content p{
  margin-bottom:1.1em;
  line-height:1.7;
}
.entry-content ul{
  margin:1em 0 1.2em 1.2em;
}
.entry-content li{
  margin-bottom:0.6em;
}
.entry-content h2,
.entry-content h3{
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.3;
}

/* =========================================================
   5) Chromax Page Title Tweaks
   ========================================================= */
.dt_pagetitle_content .title{ display:none; }
.dt_pagetitle .dt_pagetitle_bigtitle{ bottom:80px; }

.dt_pagetitle .breadcrum-item,
.dt_pagetitle .breadcrum-item.active{
  color:var(--dt-main-color);
}
.dt_pagetitle .dt_pagetitle_bgimage::before{
  background-color:var(--dt-secondary-color);
}
.dt_pagetitle_bgimage{
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* =========================================================
   6) Buttons (Theme + Gutenberg)
   ========================================================= */
.wp-block-button__link,
.wp-element-button{
  display:inline-block;
  font-weight:500;
  text-align:center;
  border:none;
  border-radius:0.375rem;
  padding:0.6rem 1.2rem;
  color:#fff;
  background-color:var(--bs-primary);
  text-decoration:none;
  transition:all .25s ease !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover{
  background-color:var(--bs-secondary);
  color:#fff;
  text-decoration:none;
}

/* =========================================================
   7) Cards / Service Boxes
   ========================================================= */
.service-wrapper{ display:flex; flex-wrap:wrap; align-items:stretch; }
.service-wrapper .col-lg-3{ display:flex; }

.service-inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:100%;
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
  padding:20px;
  transition:all .3s ease;
}
.service-inner:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.service-content{
  flex-grow:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0 5px 20px 5px;
}
.service-thumb img{
  max-height:120px;
  object-fit:contain;
  margin-bottom:15px;
}
.fbox-number{ display:none !important; }

/* =========================================================
   8) Sidebar / Widgets
   ========================================================= */
.sidebar h2.wp-block-heading,
.sidebar .widget-title{
  margin-bottom:0;
  padding:16px 18px;
  line-height:1.2;
  text-align:center;
  overflow:hidden;
  font-size:22px;
  font-weight:500;
  color:var(--bs-secondary);
  background-color:var(--bs-white);
}
.sidebar h3.wp-block-heading{ margin-bottom:0; font-size:1rem; }

.wp-block-woocommerce-product-filter-taxonomy,
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-price{
  padding:16px 18px;
}
.wp-block-search__label{
  font-weight:700;
  padding:16px 0;
}

/* =========================================================
   9) Accordion
   ========================================================= */
.accordion-button{
  display:block;
  width:100%;
  transition:all .25s ease !important;
}
.accordion-button:not(.collapsed){
  background-color:var(--bs-secondary);
  color:#fff;
}
.accordion-button::after{ filter:brightness(0) invert(1); }

.accordion-body{
  background:#fff;
  border:1px solid #e5e5e5;
  border-top:none;
  border-radius:0 0 6px 6px;
  padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.accordion-item{
  margin-bottom:14px;
  border:none;
  background:transparent;
}

/* =========================================================
   10) Utility
   ========================================================= */
.obj-margined img{
  display:block;
  max-width:100%;
  height:auto;
  padding:1.5rem;
  box-sizing:border-box;
}


/* =========================================================
   Responsive Typography Fixes (Mobile)
   ========================================================= */
@media (max-width: 768px){

  .dt_slider--two .active .dt_slider-content .title{
    font-size: 26px;
    line-height: 1.1;
  }

  .dt_slider--two .active .dt_slider-content .text{
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    height: auto !important;
    max-height: none !important;
  }

  .section-title-two .section-title .title{
    font-size: 24px;
    line-height: 1.1;
  }

  .section-title-two .section-title .sub-title{
    font-size: 18px;
    line-height: 1.1;
  }

  h4{
    font-size: 20px;
  }

  .dt_information--five .item-inner .title{
    font-size: 20px;
    font-weight: 600;
  }
}


/* =========================================================
   #dt_about – Pattern NICHT fullwidth
   Theme setzt background-image inline -> daher: background killen
   ========================================================= */

/* A) Theme-Shape-DIV komplett neutralisieren (INLINE background aushebeln) */
#dt_about > .bg-shape-image{
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* B) Pattern innerhalb des Containers zeichnen */
#dt_about .dt-container{
  position: relative !important;
  z-index: 1 !important;
}

#dt_about .dt-container::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image: url("https://pressurehub.de/wp-content/uploads/2026/01/backround_shape-1.webp") !important;
  background-repeat: no-repeat !important;
  /*background-position: center center !important;*/
  background-position: 70% 180% !important;
  /*background-size: cover !important; /* ggf. contain */
  background-size: min(500px, 50%) !important;



}

/* C) Inhalt über das Pattern */
#dt_about .dt-container > *{
  position: relative !important;
  z-index: 1 !important;
}
/* SECTION soll keine Fullwidth-"Karte" mehr sein */
#dt_about{
  background: transparent !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Die "Karte" sitzt auf dt-container Breite */
#dt_about .dt-container{
  background: rgb(230, 233, 241) !important; /* dein Grau */
  border-radius: 50px !important;
  overflow: hidden !important;              /* wichtig für runde Ecken + Hintergründe */
}

/* optional: falls das Theme dem Container keinen Innenabstand gibt */
#dt_about .dt-container{
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
#dt_about > div.dt-container > div > div:nth-child(1) > div.section-title.dt-mb-6 > h2 {
	font-size:3em;
}


/* =========================================================
   WooCommerce Loop Cards (PressureHub / Chromax)
   Desktop: 4 pro Zeile | Mobile: 2 pro Zeile
   Einheitliche Card + Bild + Button + Sale
   ========================================================= */

/* ---------- GRID ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ---------- THEME FLOAT FIX ---------- */
.woocommerce ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Leeres Theme-Element entfernen */
.woocommerce ul.products > *:not(li.product){
  display: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  display: none !important;
  content: none !important;
}

/* ---------- CARD ---------- */
.woocommerce ul.products li.product .loop-product-wrap{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
}

/* ---------- BILD ---------- */
.woocommerce ul.products li.product .woo-thumb-wrap{
  position: relative !important;
  height: 220px !important;
  margin-bottom: 10px !important;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden !important;
}

@media (max-width: 768px){
  .woocommerce ul.products li.product .woo-thumb-wrap{
    height: 170px !important;
  }
}

.woocommerce ul.products li.product .woo-thumb-wrap img{
  position: absolute !important;
  inset: 10px !important;
  width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
  object-fit: contain !important;
  display: block !important;
}

/* ---------- BUTTON ---------- */
.woocommerce ul.products li.product .product-icons-pack{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.woocommerce ul.products li.product .product-icons-pack > a.button{
  pointer-events: auto !important;
  width: calc(100% - 20px) !important;
  margin: 0 auto !important;
  text-align: center !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* ---------- TITEL ---------- */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 6px 0 8px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  min-height: calc(14px * 1.25 * 3) !important;
}

/* ---------- PREIS ---------- */
.woocommerce ul.products li.product .woocommerce-Price-amount,
.woocommerce ul.products li.product .german-market-from-price-prefix{
  font-size: 14px !important;
  font-weight: 600 !important;
}

.woocommerce ul.products li.product .loop-product-wrap > *:last-child{
  margin-top: auto !important;
}

/* =========================================================
   SALE BADGE – KATALOG
   ========================================================= */

.woocommerce ul.products li.product .woo-thumb-wrap .onsale{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 70px solid #e30613 !important;
  border-right: 70px solid transparent !important;
  background: transparent !important;
  color: transparent !important;
  z-index: 10 !important;
}

.woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
  content: "Angebot" !important;
  position: absolute !important;
  top: -30px !important;
  left: 5px !important;
  transform: rotate(-45deg) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

@media (max-width: 768px){
  .woocommerce ul.products li.product .woo-thumb-wrap .onsale{
    border-top-width: 62px !important;
    border-right-width: 62px !important;
  }
  .woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
    top: -26px !important;
    font-size: 9px !important;
  }
}

/* =========================================================
   SALE BADGE – SINGLE PRODUCT
   ========================================================= */

.single-product div.product .woocommerce-product-gallery{
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.single-product div.product span.onsale{
  display: none !important;
}

.single-product div.product.sale .woocommerce-product-gallery::before{
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 120px !important;
  height: 120px !important;
  background: #e30613 !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  z-index: 20 !important;
}

.single-product div.product.sale .woocommerce-product-gallery::after{
  content: "Angebot" !important;
  position: absolute !important;
  top: 60px !important;
  left: 6px !important;
  transform: rotate(-45deg) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  z-index: 25 !important;
}

@media (max-width: 768px){
  .single-product div.product .woocommerce-product-gallery{
    border-radius: 14px !important;
  }
  .single-product div.product.sale .woocommerce-product-gallery::before{
    width: 96px !important;
    height: 96px !important;
  }
  .single-product div.product.sale .woocommerce-product-gallery::after{
    top: 50px !important;
    font-size: 12px !important;
  }
}
/* =========================================================
   OVERRIDE: "Angebot" Text-Positionen wieder wie im Original
   ========================================================= */

/* KATALOG: Text im Dreieck */
.woocommerce ul.products li.product .woo-thumb-wrap .onsale::after,
.woocommerce-page ul.products li.product .woo-thumb-wrap .onsale::after{
  top: -30px !important;
  left: 5px !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* KATALOG Mobile */
@media (max-width: 768px){
  .woocommerce ul.products li.product .woo-thumb-wrap .onsale::after,
  .woocommerce-page ul.products li.product .woo-thumb-wrap .onsale::after{
    top: -26px !important;
    left: 5px !important;
    font-size: 9px !important;
  }
}

/* SINGLE: Text im Dreieck */
.single-product div.product.sale .woocommerce-product-gallery::after{
  top: 60px !important;
  left: 6px !important;
  transform: rotate(-45deg) !important;
  transform-origin: left top !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* SINGLE Mobile */
@media (max-width: 768px){
  .single-product div.product.sale .woocommerce-product-gallery::after{
    top: 50px !important;
    left: 5px !important;
    font-size: 12px !important;
  }
}
/* =========================================================
   FINAL OVERRIDE: "Angebot" Texte wieder sichtbar (Katalog + Single)
   ========================================================= */

/* ---------------- KATALOG ---------------- */
.woocommerce ul.products li.product .woo-thumb-wrap .onsale{
  display: block !important;
  overflow: visible !important;
  z-index: 10 !important;
}

/* Text im Dreieck (Katalog) */
.woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
  content: "Angebot" !important;
  position: absolute !important;
  top: -30px !important;
  left: 5px !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;

  color: #fff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

@media (max-width: 768px){
  .woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
    top: -26px !important;
    left: 5px !important;
    font-size: 9px !important;
  }
}

/* ---------------- SINGLE PRODUCT ---------------- */
/* Text auf das Dreieck (Single) */
.single-product div.product.sale .woocommerce-product-gallery::after{
  content: "Angebot" !important;
  position: absolute !important;
  top: 60px !important;
  left: 6px !important;

  transform: rotate(-45deg) !important;
  transform-origin: left top !important;

  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .4px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  z-index: 25 !important;
  pointer-events: none !important;
}

/* =========================================================
   iOS Safari (KATALOG): Sale-Badge ohne Border-Dreieck (kein Halbkreis-Artefakt)
   ========================================================= */
@supports (-webkit-touch-callout: none){

  .woocommerce ul.products li.product .woo-thumb-wrap .onsale{
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;

    width: 74px !important;
    height: 74px !important;

    /* Dreieck via Gradient (iOS-sauber) */
    background: linear-gradient(135deg, #e30613 0 50%, transparent 50% 100%) !important;

    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    z-index: 9999 !important;
    pointer-events: none !important;
    overflow: visible !important;

    /* echten Text verstecken (gegen iOS Auswahl/Artefakte) */
    text-indent: -9999px !important;
    white-space: nowrap !important;
  }

  .woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
    content: "Angebot" !important;
    position: absolute !important;
    top: 14px !important;
    left: -6px !important;

    transform: rotate(-45deg) !important;
    transform-origin: left top !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .4px !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    z-index: 10000 !important;
    pointer-events: none !important;
  }

  @media (max-width: 768px){
    .woocommerce ul.products li.product .woo-thumb-wrap .onsale{
      width: 66px !important;
      height: 66px !important;
      top: -1px !important;
      left: -1px !important;
    }
    .woocommerce ul.products li.product .woo-thumb-wrap .onsale::after{
      top: 12px !important;
      left: -8px !important;
      font-size: 9px !important;
    }
  }
}

/* Ab hier WooCommerce Single-Product view verändern/anpassen */

.product_meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    font-size: 13px !important;       /* anpassen wenn du willst */
   
   
}

.product_meta > span {
    display: contents; /* GANZ WICHTIG */
}

/* Labels fett */
.product_meta > span::before {
    font-weight: 600;
}


/* Werte normal */
.product_meta a,
.product_meta .sku,
.product_meta .gtin {
    font-weight: 400;
    font-size: 13px !important;       /* anpassen wenn du willst */
}
/* Eigener Wrapper als Box */
.ph-product-meta-box{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
}

/* Table-Layout für den Meta-Block */
.ph-product-meta-box .product_meta{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: baseline;
  
}

/* Woo gibt oft spans als Zeilen aus – wir machen sie zu "Row items" */
.ph-product-meta-box .product_meta > span{
  display: contents;
  font-size: 13px !important;       /* anpassen wenn du willst */
}

/* Label + Value: gleiche Schriftgröße */
.ph-product-meta-box .product_meta,
.ph-product-meta-box .product_meta *{
  font-size: 13px !important;       /* anpassen wenn du willst */
  line-height: 1.35;
}

/* Labels optisch klar */
.ph-product-meta-box .product_meta > span::before{
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

/* Werte */
.ph-product-meta-box .product_meta .sku,
.ph-product-meta-box .product_meta .gtin,
.ph-product-meta-box .product_meta a{
  font-weight: 400;
}

/* Verhindert "Buchstaben untereinander" */
.ph-product-meta-box .product_meta a,
.ph-product-meta-box .product_meta .sku,
.ph-product-meta-box .product_meta .gtin{
  word-break: normal;
  overflow-wrap: anywhere; /* lange GTIN/SKU bricht sauber um */
}

.woocommerce select, .page div.product form.cart .variations select {
    height: 40px !important;
}
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    line-height: 40px !important;

}
/* --- PressureHub: Single Product Layout (links Gallery+Meta, rechts Summary) --- */

/* Grid nur auf den Top-Wrapper legen (nicht auf .product) */
.single-product div.product #ph_woo_single-top{
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
}

/* beide Spalten dürfen nicht wegen breiten Inhalten sprengen */
.single-product div.product #ph_woo_top_left,
.single-product div.product #ph_woo_top_right{
  min-width: 0;
}

/* Linke Spalte */
.single-product div.product #ph_woo_top_left{
  grid-column: 1;
  width: 100%;
}

/* Rechte Spalte (Summary) */
.single-product div.product #ph_woo_top_right{
  grid-column: 2;
  width: 100%;
}

/* Wichtig: alte Float/Width Regeln aus Woo/Theme neutralisieren */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary{
  float: none !important;
  clear: none !important;
  max-width: 100% !important;
  width: 100% !important; /* überschreibt Woo Standard 48% */
}

/* Gallery darf nicht "rausfloaten" */
.single-product div.product .woocommerce-product-gallery{
  margin: 0 !important;
}

/* Meta unter der Gallery im linken Container */
.single-product div.product #ph_woo_top_left .product_meta{
  margin-top: 16px;
}

/* Mobile: untereinander */
@media (max-width: 900px){
  .single-product div.product #ph_woo_single-top{
    grid-template-columns: 1fr;
  }

  .single-product div.product #ph_woo_top_left,
  .single-product div.product #ph_woo_top_right{
    grid-column: 1;
    width: 100% !important;
    float: none !important;
  }
}

/* Grundtabelle */
/* Tabelle */
.variations {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}

/* Jede Zeile = Grid */
.variations tr {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 16px;
  align-items: center;
}

/* Label: Theme-Standard */
.variations th.label {
  padding: 0;
  margin: 0;
  text-align: left;
  white-space: nowrap;

  /* WICHTIG: nichts erzwingen */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Value */
.variations td.value {
  padding: 0;
  margin: 0;
}

/* Select: volle TD-Breite */
.variations td.value select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Reset-Zeile */
.variations .variation-reset-row {
  grid-template-columns: 160px 1fr;
}

.variations .variation-reset-row th {
  visibility: hidden;
}

.variations .variation-reset-row td {
  text-align: right;
}
/* TD soll wirklich die volle Restbreite bekommen */
.variations td.value{
  width: 100% !important;
  min-width: 0;               /* wichtig bei grid/flex */
}

/* Select + Woo-Wrapper auf volle Breite zwingen */
.variations td.value select,
.variations td.value .value select{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

/* Manche Themes packen den Select in einen Wrapper (z.B. .value, .select, .wgm-select etc.) */
.variations td.value > *{
  width: 100% !important;
  max-width: 100% !important;
}

/* Wenn Select2 aktiv ist (Dropdown ersetzt) */
.variations td.value .select2,
.variations td.value .select2-container{
  width: 100% !important;
  max-width: 100% !important;
}

/* Optional: wenn irgendein Theme "max-width: 200px" o.ä. setzt */
.variations select{
  min-width: 0 !important;
}

.woocommerce.single .product .woocommerce-Price-amount, .woocommerce.single .product .price {
    font-size: 25px !important;
    line-height: 36px !important;
    font-weight: 600;
    text-align: start;
}
.woocommerce-page div.product .woocommerce-tabs .panel table.shop_attributes {
    font-size: 14px !important;
}
.woocommerce ul.products li.product a.button {
    max-width: 100%;
    word-break: break-word;
    text-transform: uppercase;
    font-weight: 500;
  }

/* --- PressureHub: Mobile Button Text kleiner im Produkt-Grid --- */
@media (max-width: 768px) {
    


  /* Variable Produkte (Ausführung wählen) */
  .woocommerce ul.products li.product 
  a.button.product_type_variable.add_to_cart_button,

  /* Externe Produkte (Anfrage stellen) */
  .woocommerce ul.products li.product 
  a.button.product_type_external,

  /* Sicherheitshalber Simple auch mitnehmen */
  .woocommerce ul.products li.product 
  a.button.product_type_simple {
    
    font-size: 12px !important;
    line-height: 1.2;
    padding: 8px 10px;
    letter-spacing: .02em;
    white-space: normal; /* erlaubt Umbruch */
    text-align: center;
  }
}
/**** Für Produkte mit Massanfertigung ****/
.ph-made-to-order-notice {
    margin:20px 0;
    padding:16px;
    border:1px solid #d6b25e;
    background:#fff8e6;
    border-radius:6px;
    font-size:14px;
}

.ph-mto-button {
    margin-top:15px;
}

/* ================================
   PHWEX Preisliste – dynamische Spalten
================================= */
/* Wrapper: kein horizontaler Scroll */
.phwex-price-list{
  overflow-x: hidden;
}

/* Tabelle bleibt in 100% und verteilt fix */
.phwex-price-list table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;          /* wichtig: verhindert “wächst nach rechts” */
}

/* Zellen dürfen schrumpfen */
.phwex-price-list th,
.phwex-price-list td{
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* Artikel + Kategorie dürfen umbrechen */
.phwex-price-list th:nth-child(1),
.phwex-price-list td:nth-child(1),
.phwex-price-list th:nth-child(3),
.phwex-price-list td:nth-child(3){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hersteller + Codes eher kompakt (nicht umbrechen) */
.phwex-price-list th:nth-child(2),
.phwex-price-list td:nth-child(2),
.phwex-price-list th:nth-child(4),
.phwex-price-list td:nth-child(4),
.phwex-price-list th:nth-child(5),
.phwex-price-list td:nth-child(5),
.phwex-price-list th:nth-child(6),
.phwex-price-list td:nth-child(6){
  white-space: nowrap;
}

/* Preise: kompakt + rechtsbündig */
.phwex-price-list th:nth-child(7),
.phwex-price-list td:nth-child(7),
.phwex-price-list th:nth-child(8),
.phwex-price-list td:nth-child(8),
.phwex-price-list th:nth-child(9),
.phwex-price-list td:nth-child(9),
.phwex-price-list th:nth-child(10),
.phwex-price-list td:nth-child(10){
  white-space: nowrap;
  text-align: right;
}

/* ✅ Breiten (Summe ~100%) */
.phwex-price-list th:nth-child(1),
.phwex-price-list td:nth-child(1){ width: 24%; } /* Artikel */

.phwex-price-list th:nth-child(2),
.phwex-price-list td:nth-child(2){ width: 10%; } /* Hersteller */

.phwex-price-list th:nth-child(3),
.phwex-price-list td:nth-child(3){ width: 12%; } /* Kategorie */

.phwex-price-list th:nth-child(4),
.phwex-price-list td:nth-child(4){ width: 8%; }  /* SKU */

.phwex-price-list th:nth-child(5),
.phwex-price-list td:nth-child(5){ width: 10%; } /* GTIN */

.phwex-price-list th:nth-child(6),
.phwex-price-list td:nth-child(6){ width: 8%; }  /* MPN */

.phwex-price-list th:nth-child(7),
.phwex-price-list td:nth-child(7){ width: 7%; }  /* Limit */

.phwex-price-list th:nth-child(8),
.phwex-price-list td:nth-child(8){ width: 7%; }  /* UVP */

.phwex-price-list th:nth-child(9),
.phwex-price-list td:nth-child(9){ width: 7%; }  /* POS */

.phwex-price-list th:nth-child(10),
.phwex-price-list td:nth-child(10){ width: 7%; } /* Online */



.phwex-price-list table {
    font-size: 12px;
}

.phwex-price-list th,
.phwex-price-list td {
    padding: 6px 8px;
}

.phwex-price-list table {
    border-collapse: collapse;
}

.phwex-price-list th {
    background: #f6f7f7;
    color:#000;
}
.phwex-price-list a{
    color:#000;
}
/* PHWEX Preisliste Tabelle */
.phwex-price-list {
    font-family: Arial, sans-serif; /* oder deine Theme Secondary Font */
    font-size: 13px;
    color: #1e1e1e;
    background: #ffffff;
    border-collapse: collapse;
    width: 100%;
}

/* Header */
.phwex-price-list thead th {
    background: #f4f6f8;
    color: #0a2c40;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-bottom: 2px solid #d8dde3;
    text-transform: uppercase;
}

/* Zellen */
.phwex-price-list td {
    padding: 7px 10px;
    border-bottom: 1px solid #e5e7ea;
    vertical-align: top;
}

/* Zebra für bessere Lesbarkeit */
.phwex-price-list tbody tr:nth-child(even) {
    background: #fafbfc;
}

/* Artikelname */
.phwex-price-list td:first-child {
    font-weight: 500;
    color: #0b5c75;
}

/* Preise */
.phwex-price-list td:nth-last-child(-n+4) {
    text-align: right;
    font-weight: 600;
    color: #002c45;
}
/* Standard */
.phwex-price-list .phwex-row td{
  background: #fff;
}

/* Elternartikel (variable parent) */
.phwex-price-list .phwex-row--parent td{
  background: #f4f8ff;   /* leicht blau */
}

/* Simple Produkte */
.phwex-price-list .phwex-row--simple td{
  background: #f4fff4;   /* leicht grün */
}

/* Varianten */
.phwex-price-list .phwex-row--variation td{
  background: #ffffff;   /* leicht grau */
}

/* optional: Variation etwas „eingezogen“ wirken lassen */
.phwex-price-list .phwex-row--variation td:first-child{
  padding-left: 20px;
}
/* default: alle varianten eingeklappt */
.phwex-price-list tr.phwex-row--variation{
  display:none;
}

.phwex-toggle{
  all: unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  border:1px solid rgba(0,0,0,.55);
  border-radius:3px;
  margin-right:6px;
  cursor:pointer;
  background:#fff;
  line-height:1;
}
.phwex-toggle:hover{ background:#f2f2f2; }

.phwex-toggle__icon{
  position:relative;
  width:10px;height:10px;
  display:block;
}
.phwex-toggle__icon::before,
.phwex-toggle__icon::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:10px; height:2px;
  background:#111;
  transform:translateY(-50%);
}
.phwex-toggle__icon::after{
  transform:translateY(-50%) rotate(90deg);
}
.phwex-toggle.is-open .phwex-toggle__icon::after{
  display:none; /* + wird zu – */
}

.phwex-toggle-spacer{
  display:inline-block;
  width:18px; height:18px;
  margin-right:6px;
}
@media (max-width: 768px) {

.phwex-price-list th,
.phwex-price-list td {
    font-size: 10px;
    padding: 2px 2px;
}
.phwex-price-list th:nth-child(1),
.phwex-price-list td:nth-child(1){ width: 32%; } /* Artikel */

.phwex-price-list th:nth-child(2),
.phwex-price-list td:nth-child(2){ display: none; } /* Hersteller */

.phwex-price-list th:nth-child(3),
.phwex-price-list td:nth-child(3){ display: none; } /* Kategorie */

.phwex-price-list th:nth-child(4),
.phwex-price-list td:nth-child(4){ display: none; }  /* SKU */

.phwex-price-list th:nth-child(5),
.phwex-price-list td:nth-child(5){ display: none; } /* GTIN */

.phwex-price-list th:nth-child(6),
.phwex-price-list td:nth-child(6){ display: none; }  /* MPN */

.phwex-price-list th:nth-child(7),
.phwex-price-list td:nth-child(7){ width: 17%; }  /* UVP */

.phwex-price-list th:nth-child(8),
.phwex-price-list td:nth-child(8){ width: 17%; }  /* POS */

.phwex-price-list th:nth-child(9),
.phwex-price-list td:nth-child(9){ width: 17%; }  /* MIN POS */

.phwex-price-list th:nth-child(10),
.phwex-price-list td:nth-child(10){ width: 17%; } /* Online */
    
}

/* =========================================================
   PressureHub – Information Cards (Premium, Text oben)
   ========================================================= */

/* 1) Wrapper/Panel des Themes entfernen (weißer Hintergrund + Shadow) */
#dt_information,
#dt_information .dt-container,
#dt_information .dt_information-row{
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Gutter ohne Layout-Bruch (statt gap) */
#dt_information .dt_information-row{
  margin-left: -12px;
  margin-right: -12px;
}
#dt_information .dt_information-row > [class*="dt-col-"]{
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

/* 3) Card Grundlayout */
#dt_information .ph-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 380px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* ✅ Text nach oben */
  padding: 36px 28px;

  background: #0f2c3f;          /* fallback */
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Hintergrundbild (über ph-card-bg Div) */
#dt_information .ph-card-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.82) contrast(1.08);
}

/* 4) Overlay: oben dunkel → unten heller */
#dt_information .ph-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,12,24,0.96) 0%,
    rgba(0,12,24,0.88) 28%,
    rgba(0,12,24,0.55) 58%,
    rgba(0,12,24,0.18) 100%
  );
  z-index: 2;
}

/* Theme-Shapes innerhalb der Cards deaktivieren */
#dt_information .ph-card::after{
  content: none !important;
}
#dt_information .ph-card .item-image,
#dt_information .ph-card .item-image::before,
#dt_information .ph-card .item-image::after{
  display: none !important;
}

/* 5) Content Layer */
#dt_information .ph-card-content{
  position: relative;
  z-index: 3;
  color: #fff;

  display: flex;
  flex-direction: column;
  flex: 1;              /* nimmt komplette Höhe ein */
}

/* Icon bleibt (Customizer steuerbar) */
#dt_information .ph-card .item-icon{
  position: relative;
  z-index: 4;
}

/* 6) Typografie (mehr Kontrast + Premium-Lesbarkeit) */
#dt_information .ph-card .title,
#dt_information .ph-card .title a{
  color:#fff;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 10px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#dt_information .ph-card .text{
  color: rgba(255,255,255,0.90);
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 18px;
  text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

/* 7) CTA Button – volle Breite + unten ausgerichtet */
#dt_information .ph-info-cta{
  margin-top: auto;     /* schiebt Button nach unten */
  margin-bottom: 4px;   /* fixer Abstand vom unteren Rand */

  display: block;
  width: 100%;
  padding: 13px 18px;
  border-radius: 8px;
  background: #00bcd4;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
}


#dt_information .ph-info-cta:hover{
  background: #0097a7;
  transform: translateY(-2px);
}

/* 8) Card Hover */
#dt_information .ph-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

#dt_information .ph-subtitle{
  margin: 4px 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

#dt_information { margin-bottom: 0; padding-bottom: 40px; }

#dt_service .ph-service-cta{
  display:inline-block;
  margin-top:14px;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
#dt_service .ph-service-cta:hover{
  transform:translateY(-2px);
}

#dt_service .ph-service-subline{
  margin-top:6px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--bs-secondary);
}

/* Service-Kacheln: Bildbereich fixieren + sauber croppen */
#dt_service .item-inner .item-image{
  height: 160px;              /* ← hier Höhe einstellen (z.B. 150–190) */
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#dt_service .item-inner .item-image a,
#dt_service .item-inner .item-image img{
  width: 100%;
  height: 100%;
  display: block;
}

#dt_service .item-inner .item-image img{
  object-fit: cover;
  object-position: center;
}
/* =========================================
   Service Section: gleiche Kachelhöhen
   ========================================= */

/* 1) Owl-Carousel Items gleich hoch machen */
#dt_service .dt_owl_carousel .owl-stage{
  display: flex;
}
#dt_service .dt_owl_carousel .owl-item{
  display: flex;
}
#dt_service .dt_owl_carousel .owl-item > *{
  width: 100%;
  display: flex;
}

/* 2) Card Layout: immer gleiche Höhe + CTA unten */
#dt_service .item-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

#dt_service .item-content{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 3) Bild fix (falls noch nicht gesetzt) */
#dt_service .item-image{
  height: 160px;
  overflow: hidden;
}
#dt_service .item-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4) Titel/Subline/Text auf feste “Zeilenanzahl” begrenzen,
      damit Karten überall gleich enden */
#dt_service .item-content .title{
  margin-bottom: 8px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* max 2 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.15em * 2);    /* reserviert Platz für 2 Zeilen */
}

/* Subline: einheitlich (optional 1 Zeile) */
#dt_service .item-content .ph-subline{
  color: var(--bs-secondary);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 2px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;           /* max 1 Zeile */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.2em;
}

/* Text: max 3 Zeilen (passt meist sehr gut) */
#dt_service .item-content .text{
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* max 3 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 3);
}

/* CTA immer nach unten */
#dt_service .item-content a.ph-service-cta,
#dt_service .item-content a.dt-more,
#dt_service .item-content a:last-child{
  margin-top: auto;
  padding-top: 14px; /* Abstand über dem CTA */
}
#dt_service .dt-text-center > .text{
    font-size: 30px;
    line-height: 1.65;
    font-weight: 700;
    color:var(--bs-secondary);
    letter-spacing: 0.2px;
}
#dt_service .dt-btn-primary{
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
}
body.taxonomy-ph_ep_agency #ep_single_frontend_view_container,
body.tax-ph_ep_agency #ep_single_frontend_view_container{
  margin-top: 60px !important;
}


/* Bild selbst: keine Rundung, kein Zuschnitt, keine Fixgrößen */
body.taxonomy-ph_ep_agency img.ph-ep-agency-logo,
body.tax-ph_ep_agency      img.ph-ep-agency-logo{
  background: #fff !important;     /* falls Box-Styling irgendwo greift */

}
.padding-20{
    padding:20px;
}
}