/* =========================================================
   DYNATAG CUSTOM.CSS
   Bereinigt, strukturiert und kompakter
   Stand: 2026-03-24
   ========================================================= */


/* =========================================================
   1. GLOBAL / BASIS
   ========================================================= */

.current-price .price {
  color: #0e65af !important;
}

body,
.page-content,
.container,
.section,
#wrapper,
#content {
  background-color: #ffffff !important;
}


/* =========================================================
   2. BREADCRUMBS
   ========================================================= */

.ce-breadcrumbs,
.elementor-widget-breadcrumb,
.category .breadcrumb,
body.product .breadcrumb,
#wrapper .breadcrumb {
  background-color: #f9f9f9 !important;
  padding: 8px 15px !important;
  font-size: 12px !important;
}

.breadcrumb a,
.ce-breadcrumbs a,
.elementor-widget-breadcrumb a,
body.product .breadcrumb a,
.breadcrumb li,
.breadcrumb span {
  color: #555555 !important;
  font-size: 12px !important;
}


/* =========================================================
   3. CMS-SEITEN: BREADCRUMB + TITEL AUSBLENDEN
   ========================================================= */

html body#cms nav.breadcrumb,
html body#cms .breadcrumb,
html body#cms header.page-header,
html body#cms .page-header,
html body#cms .page-header h1,
html body#cms h1.h1,
html body#cms h1.page-title,
html body.page-cms nav.breadcrumb,
html body.page-cms .breadcrumb,
html body.page-cms header.page-header,
html body.page-cms .page-header,
html body.page-cms .page-header h1,
html body.page-cms h1.h1,
html body.page-cms h1.page-title {
  display: none !important;
  visibility: hidden !important;
}

body#cms .page-header,
body.page-cms .page-header {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}


/* =========================================================
   4. GENERISCHE BOXEN / KOMPONENTEN
   ========================================================= */

.sos-box {
  background-color: #f9f9f9;
  border: 1px solid #dddddd;
  border-radius: 20px;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
}

.attachment-separator {
  border: none;
  border-top: 1px solid #dddddd;
  margin: 15px 0;
}

.product-attachments {
  background-color: #f9f9f9;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
}

.product-attachments .attachment p {
  margin-bottom: 8px;
}

.product-attachments .attachment h4 {
  margin-top: 0;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.btn-primary,
.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
  background: linear-gradient(135deg, #0e65af, #2c9ffd) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}

.btn-primary {
  border-radius: 6px;
}

.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
  border-radius: 4px;
}

.btn-primary:hover,
.bootstrap-touchspin-up:hover,
.bootstrap-touchspin-down:hover {
  background: linear-gradient(135deg, #094a7e, #0e65af) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-comment.post-product-comment {
  background: linear-gradient(90deg, #0e65af 0%, #2c9ffd 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-comment.post-product-comment:hover {
  background: linear-gradient(90deg, #2c9ffd 0%, #0e65af 100%);
}

.btn-comment.post-product-comment i {
  vertical-align: middle;
  margin-right: 4px;
}


/* =========================================================
   6. DYNATAG BANNER MIT ICON
   ========================================================= */

.dynatag-banner-1,
.dynatag-banner-2,
.dynatag-banner-3,
.dynatag-banner-4,
.dynatag-banner-5,
.dynatag-banner-6 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
  margin-bottom: 30px;
  border-radius: 20px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  border: none !important;
  transition: all 0.2s ease-in-out;
}

.dynatag-banner-1 img,
.dynatag-banner-2 img,
.dynatag-banner-3 img,
.dynatag-banner-4 img,
.dynatag-banner-5 img,
.dynatag-banner-6 img {
  display: block;
  margin-right: 12px;
}

.dynatag-banner-1:hover,
.dynatag-banner-2:hover,
.dynatag-banner-3:hover,
.dynatag-banner-4:hover,
.dynatag-banner-5:hover,
.dynatag-banner-6:hover {
  transform: scale(1.01);
}

.dynatag-banner-1 { background-color: #0e65af; color: #ffffff; }
.dynatag-banner-2 { background-color: #ff6b00; color: #ffffff; }
.dynatag-banner-3 { background-color: #d90429; color: #ffffff; }
.dynatag-banner-4 { background-color: #ffd60a; color: #1c1c1c; }
.dynatag-banner-5 { background-color: #2e7d32; color: #ffffff; }
.dynatag-banner-6 { background-color: #111111; color: #ffd60a; }


/* =========================================================
   7. SALE BANNER
   ========================================================= */

.dynatag-sale-banner,
.dynatag-sale-banner1 {
  display: block;
  overflow: hidden;
  position: relative;
  border: none !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  padding: 14px 22px;
  margin: 0 0 15px 0;
  text-align: center;
  transition: all 0.2s ease-in-out;
  background-color: #fdb900;
}

.dynatag-sale-banner {
  width: 100%;
  color: #ffffff;
  border-radius: 20px;
}

.dynatag-sale-banner1 {
  width: 50%;
  color: #0e65af;
  border-radius: 10px;
}

.dynatag-sale-banner:hover,
.dynatag-sale-banner1:hover {
  transform: scale(1.01);
}


/* =========================================================
   8. FREE SHIPPING OVERRIDE
   ========================================================= */

.xyfreeshipping-progress-container,
.xyfreeshipping-progress-container .xyfreeshipping-progress-bar {
  height: 28px !important;
  line-height: 28px !important;
  border-radius: 999px !important;
}

.xyfreeshipping-progress-container {
  background: #e9edf3 !important;
  color: #2b3244 !important;
  font-size: 14px !important;
}

.xyfreeshipping-progress-container .xyfreeshipping-progress-bar {
  background: linear-gradient(90deg, #0e65af, #2b3244) !important;
  box-shadow: none !important;
}

.xyfreeshipping-progress-text {
  line-height: 28px !important;
  font-weight: 500 !important;
}

.xyfreeshipping-alert {
  background: #f4f7fb !important;
  border: 1px solid #e3e8f1 !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  padding: 16px 20px !important;
}


/* =========================================================
   9. DYNATAG PDP TEMPLATES
   ========================================================= */

.dynatag-pdp-card {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6eef7;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  position: relative;
  transition: all 0.15s ease-in-out;
}

.dynatag-pdp-card:hover {
  transform: translateY(-1px);
}

.dynatag-rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 14px 0;
  border-radius: 12px;
  background: #f6fbff;
  border: 1px solid #d9eaff;
}

.dynatag-rating-stars {
  font-size: 16px;
  line-height: 1;
  color: #f5a623;
}

.dynatag-rating-text {
  font-size: 14px;
  color: #0f172a;
}

.dynatag-rating-text span {
  color: #64748b;
}

.dynatag-pdp-title {
  margin: 0 0 8px 0;
  color: #0e65af;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.dynatag-pdp-intro,
.dynatag-intro-text {
  margin: 0 0 14px 0;
  color: #334155;
  line-height: 1.5;
}

.dynatag-benefits,
.dynatag-benefit-list {
  padding: 0;
  margin: 0 0 14px 0;
}

.dynatag-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dynatag-benefit,
.dynatag-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dynatag-benefit-list {
  list-style: none;
  margin-bottom: 0;
}

.dynatag-benefit-list li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.dynatag-benefit img {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 18px;
}

.dynatag-benefit-list li img {
  flex-shrink: 0;
  margin-top: 3px;
}

.dynatag-benefit div {
  color: #0f172a;
  line-height: 1.4;
}

.dynatag-highlight {
  display: block;
  padding: 12px;
  margin: 0 0 14px 0;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  line-height: 1.4;
}

.dynatag-highlight-title {
  color: #0e65af;
  font-weight: 700;
  margin: 0 0 10px;
}

.dynatag-highlight-note {
  color: #0e65af;
  margin: 14px 0 0;
}

.dynatag-info-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
  margin: 0 0 10px 0;
}

.dynatag-info-box {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 12px;
  color: #475569;
  line-height: 1.4;
}

.dynatag-pdp-footer {
  margin: 10px 0 0 0;
  color: #0e65af;
  font-weight: 700;
}


/* =========================================================
   10. SOS PDP HERO / PREIS / FEATURE-CARDS
   ========================================================= */

.sos-pdp-hero {
  padding: 10px 0 30px;
}

.sos-pdp-container {
  max-width: 980px;
  margin: 0 auto;
}

.sos-pdp-title {
  margin: 0 0 14px;
  font-family: "Inter Tight", sans-serif;
  font-size: 54px;
  line-height: 1.05;
  font-weight: 800;
  color: #082a59;
  letter-spacing: -0.02em;
}

.sos-pdp-subtitle {
  margin: 0 0 30px;
  max-width: 920px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: #5c6f88;
}

.sos-pdp-subtitle strong {
  color: #0b1f3f;
  font-weight: 800;
}

.sos-price-box {
  display: flex;
  align-items: center;
  gap: 28px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 28px;
  padding: 26px 28px;
  margin-bottom: 30px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.04);
}

.sos-price-left {
  flex: 0 0 auto;
}

.sos-price {
  font-family: "Inter Tight", sans-serif;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: #082a59;
  letter-spacing: -0.03em;
}

.sos-price-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sos-vat {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #7c8798;
}

.sos-shipping {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #10b981;
}

.sos-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: #e9e8ff;
  color: #4b46d1;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}

.sos-feature-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 18px;
}

.sos-feature-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 124px;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.03);
}

.sos-feature-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5d7a;
}

.sos-feature-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.bg-blue   { background: linear-gradient(180deg, #d9e6ff 0%, #c7dafc 100%); }
.bg-green  { background: linear-gradient(180deg, #d8f6e8 0%, #bff0d8 100%); }
.bg-lilac  { background: linear-gradient(180deg, #ece1ff 0%, #ddd0fa 100%); }
.bg-yellow { background: linear-gradient(180deg, #f9ecb3 0%, #f4df86 100%); }

.sos-feature-content h3 {
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: #0b1f3f;
}

.sos-feature-content p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  color: #4f5f75;
}


/* =========================================================
   11. DYNATAG FEATURE GRID / KACHELN
   ========================================================= */

.dynatag-feature-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 12px;
  margin-top: 12px;
}

.dynatag-feature-box,
.dynatag-feature-box--full {
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  box-sizing: border-box;
  border-radius: 16px;
}

.dynatag-feature-box {
  background: #ffffff;
  border: 1px solid #d9dee7;
  padding: 12px 14px;
  min-height: 78px;
}

.dynatag-feature-box--full {
  grid-column: 1 / -1;
  background: #dfeafb;
  border: 1px solid #9fc1fa;
  padding: 5px 14px;
  min-height: 0px;
}

.dynatag-feature-icon,
 .dynatag-feature-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dynatag-feature-icon-full,
.dynatag-feature-box--full .dynatag-feature-icon-full {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 0px;
  height: 0px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dynatag-feature-icon-full {
  background: #e8f1ff;
}

.dynatag-feature-box--full .dynatag-feature-icon {
  background: #cfe0fb;
}

.dynatag-feature-icon img,
.dynatag-feature-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.dynatag-feature-box--full img,
.dynatag-feature-box--full  img {
  display: block;
  width: 20px;
  height: 20px;
}

.dynatag-feature-box h3,
.dynatag-feature-box h4,
.dynatag-feature-box--full h3,
.dynatag-feature-box--full h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 2px 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f2947;
}

.dynatag-feature-box p,
.dynatag-feature-box--full p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 400;
  color: #667085;
}

.dynatag-feature-box:nth-child(1) .dynatag-feature-icon { background: #dbeafe; }
.dynatag-feature-box:nth-child(2) .dynatag-feature-icon { background: #c9f2dc; }
.dynatag-feature-box:nth-child(3) .dynatag-feature-icon { background: #e9defa; }
.dynatag-feature-box:nth-child(4) .dynatag-feature-icon { background: #f7e08a; }


/* =========================================================
   12. MOBILE MENUE (ETS MEGAMENU)
   ========================================================= */

@media (max-width: 767px) {
  .ets_mm_megamenu,
  .ets_mm_megamenu_container,
  .ets_mm_menu,
  #ets_mm_megamenu,
  .ets_mm_block {
    display: none !important;
  }

  .ets_mm_mobile_menu,
  .ets_mm_mobile_toggle,
  .ets_mm_mobile {
    display: block !important;
  }
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
  .sos-pdp-title {
    font-size: 44px;
  }

  .sos-pdp-subtitle {
    font-size: 18px;
  }

  .sos-price {
    font-size: 54px;
  }

  .sos-feature-content h3 {
    font-size: 18px;
  }

  .sos-feature-content p {
    font-size: 17px;
  }

  .dynatag-feature-grid {
    gap: 10px;
    margin-top: 10px;
  }

  .dynatag-feature-box,
  .dynatag-feature-box--full {
    grid-template-columns: 44px auto;
    column-gap: 9px;
    padding: 10px 12px;
    border-radius: 15px;
    min-height: 72px;
  }

  .dynatag-feature-icon,
  .dynatag-feature-box--full .dynatag-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .dynatag-feature-icon img,
  .dynatag-feature-box--full .dynatag-feature-icon img {
    width: 18px;
    height: 18px;
  }

  .dynatag-feature-box h3,
  .dynatag-feature-box h4,
  .dynatag-feature-box--full h3,
  .dynatag-feature-box--full h4 {
    font-size: 12px;
  }

  .dynatag-feature-box p,
  .dynatag-feature-box--full p {
    font-size: 9px;
    line-height: 1.25;
  }

  .dynatag-feature-box--full {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .dynatag-info-grid {
    grid-template-columns: 100%;
  }

  .sos-pdp-title {
    font-size: 34px;
  }

  .sos-pdp-subtitle {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .sos-price-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px;
    border-radius: 22px;
  }

  .sos-price {
    font-size: 48px;
  }

  .sos-vat,
  .sos-shipping {
    font-size: 17px;
  }

  .sos-pill {
    font-size: 15px;
  }

  .sos-feature-grid {
    grid-template-columns: 100%;
    gap: 14px;
  }

  .sos-feature-card {
    min-height: auto;
    padding: 18px 16px;
    border-radius: 20px;
  }

  .sos-feature-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
  }

  .sos-feature-content h3 {
    font-size: 17px;
  }

  .sos-feature-content p {
    font-size: 16px;
  }

  .dynatag-feature-grid {
    grid-template-columns: 100%;
    gap: 8px;
    margin-top: 8px;
  }

  .dynatag-feature-box,
  .dynatag-feature-box--full {
    grid-template-columns: 40px auto;
    column-gap: 8px;
    padding: 9px 10px;
    border-radius: 14px;
    min-height: auto;
  }

  .dynatag-feature-icon,
  .dynatag-feature-box--full .dynatag-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .dynatag-feature-icon img,
  .dynatag-feature-box--full .dynatag-feature-icon img {
    width: 16px;
    height: 16px;
  }

  .dynatag-feature-box h3,
  .dynatag-feature-box h4,
  .dynatag-feature-box--full h3,
  .dynatag-feature-box--full h4 {
    font-size: 11px;
    line-height: 1.2;
  }

  .dynatag-feature-box p,
  .dynatag-feature-box--full p {
    font-size: 8.5px;
    line-height: 1.2;
  }

  .dynatag-banner-1,
  .dynatag-banner-2,
  .dynatag-banner-3,
  .dynatag-banner-4,
  .dynatag-banner-5,
  .dynatag-banner-6 {
    padding: 8px 14px;
    margin-bottom: 16px;
  }
}