/* Hintergrund komplett auf Weiß setzen */
body {
    background-color: #ffffff !important;
}

/* Alle Container und Sektionen angleichen */
.page-content,
.container,
.section,
#wrapper,
#content {
    background-color: #ffffff !important;
}

/* Einheitliche Breadcrumbs für Kategorie- und Produktseiten */

/* Kategorie-Seiten (Creative Elements) */
.ce-breadcrumbs,
.elementor-widget-breadcrumb,
.category .breadcrumb {
    background-color: #f9f9f9 !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
}

/* Produkt-Seiten (Classic Template Breadcrumbs) */
body.product .breadcrumb,
#wrapper .breadcrumb {
    background-color: #f9f9f9 !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
}

/* Links & Textfarbe einheitlich */
.breadcrumb a,
.ce-breadcrumbs a,
.elementor-widget-breadcrumb a,
body.product .breadcrumb a {
    color: #555555 !important;
}

.breadcrumb li,
.breadcrumb span {
    font-size: 12px !important;
    color: #555555 !important;
}

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

/* Überschreibt den Standard .btn-primary aus kit-41.css */
.btn-primary {
  background: linear-gradient(135deg, #0e65af, #2c9ffd) !important;
  border: none !important;
  color: #fff !important;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

/* Hover-Effekt */
.btn-primary:hover {
  background: linear-gradient(135deg, #094a7e, #0e65af) !important;
  color: #fff !important;
  transform: translateY(-2px);
}


/* Mengen erhöhen / verringern Buttons */
.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
  background: linear-gradient(135deg, #0e65af, #2c9ffd) !important;
  border: none !important;
  color: #fff !important;   /* Farbe der Pfeile */
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

/* Hover-Effekt */
.bootstrap-touchspin-up:hover,
.bootstrap-touchspin-down:hover {
  background: linear-gradient(135deg, #094a7e, #0e65af) !important;
  color: #fff !important;
}
.attachment-separator {
  border: none;
  border-top: 1px solid #ddd;
  margin: 15px 0;
}

.product-attachments {
  background-color: #f9f9f9;   /* hellgrau */
  border: 1px solid #ddd;      /* dezente Umrandung */
  border-radius: 6px;          /* leicht abgerundet */
  padding: 15px;
  margin: 15px 0;
}
.product-attachments .attachment p {
  margin-bottom: 8px;          /* etwas mehr Luft */
}
.product-attachments .attachment h4 {
  margin-top: 0;
}


.btn-comment.post-product-comment {
  background: linear-gradient(90deg, #0e65af 0%, #2c9ffd 100%);
  color: #fff !important;
  border-radius: 6px;
  padding: 8px 16px;
  border: none;
  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;
}

/* --- Breadcrumb + Titel auf CMS-Seiten hart ausblenden --- */
/* Body hat auf CMS-Seiten id="cms" (Classic/8.x) */
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 {
  display: none !important;
  visibility: hidden !important;
}

/* Fallback: falls dein Theme 'page-cms' als Body-Klasse nutzt */
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;
}

/* Restabstände killen, damit oben kein Leerraum bleibt */
body#cms .page-header,
body.page-cms .page-header {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}