/* =========================================
   GRUNDDESIGN – Farben, Buttons, Kopfbereich
   Lädt nach Flatsome und custom.css.
   Für wortlinie.de nur die Variablen unter :root anpassen.
   ========================================= */

/* html:root schlägt Flatsomes :root aus den Theme-Einstellungen (wird später ausgegeben) */
html:root {
  --sp-akzent: #eab308;        /* Logo-Gelb */
  --sp-akzent-hover: #ca9a06;
  --sp-dunkel: #1a1a1a;        /* Schwarz/Anthrazit */
  --sp-text: #1f2937;
  --sp-grau: #6b7280;
  --sp-linie: #e5e7eb;
  --sp-hell: #f8f8f6;
  --sp-erfolg: #16a34a;        /* nur Erfolgsmeldungen, Lieferzeit */
  --sp-fehler: #dc2626;        /* nur Fehler */
  --sp-radius: 10px;
  --sp-radius-gross: 12px;

  --fs-color-primary: var(--sp-akzent);
  --fs-color-secondary: var(--sp-dunkel);
  --fs-color-success: var(--sp-erfolg);
  --fs-color-alert: var(--sp-fehler);
  --primary-color: var(--sp-akzent);
  --fs-experimental-link-color: var(--sp-dunkel);
  --fs-experimental-link-color-hover: var(--sp-akzent-hover);
  background-color: #fff !important; /* Flatsome: rosa Seitenhintergrund */
}


/* ----- BUTTONS: Gelb mit schwarzer Schrift (Kontrast), "alert" (Pink) wie primär ----- */
html .button.primary:not(.is-outline):not(.is-link),
html .button.alert:not(.is-outline):not(.is-link),
html .eu-owb-order-withdraw-from-contract-button .button {
  background-color: var(--sp-akzent);
  border-color: var(--sp-akzent);
  color: var(--sp-dunkel);
  font-weight: 700;
}

html .button.primary:not(.is-outline):not(.is-link):hover,
html .button.alert:not(.is-outline):not(.is-link):hover,
html .eu-owb-order-withdraw-from-contract-button .button:hover {
  background-color: var(--sp-akzent-hover);
  border-color: var(--sp-akzent-hover);
  color: var(--sp-dunkel);
  box-shadow: none;
}

html .button.secondary:not(.is-outline):not(.is-link):not(.ux-search-submit) {
  background-color: var(--sp-dunkel);
  color: #fff;
}

/* Einheitliche Rundung (Flatsome-Einstellung: 1px) */
html a.button:not(.icon):not(.is-link):not(.zoom-button),
html button.button:not(.icon):not(.is-link),
html input[type="submit"].button {
  border-radius: var(--sp-radius) !important;
}


/* ----- KOPFBEREICH ----- */

/* Hauptmenü: lesbar, aktiv = schwarz mit gelber Linie */
html .header-bottom-nav.nav > li > a {
  font-size: 14px;
}

html .header:not(.transparent) .header-bottom-nav.nav > li > a:hover,
html .header:not(.transparent) .header-bottom-nav.nav > li.active > a,
html .header:not(.transparent) .header-bottom-nav.nav > li.current > a {
  color: var(--sp-dunkel);
}

html .header-bottom-nav.nav-line-grow > li > a:before,
html .header-bottom-nav.nav-line-bottom > li > a:before,
html .header-bottom-nav.nav-line > li > a:before {
  background-color: var(--sp-akzent);
  height: 3px;
}

/* Support-Link im Menü: schwarz statt Gelb auf Weiß */
html .header-button .button.primary.is-link {
  color: var(--sp-dunkel);
  font-size: 14px;
}

html .header-button .button.primary.is-link:hover {
  color: var(--sp-akzent-hover);
}

/* Desktop: Logo-Zeile niedriger (Flatsome-Einstellung: 165px) */
@media (min-width: 850px) {
  html .header-main {
    height: 100px;
  }

  html #logo {
    width: 420px;
  }

  html #logo img {
    max-height: 70px;
  }

  html .header-wrapper:not(.stuck) .header-main .header-nav {
    margin-top: 0;
  }

  html .header-top {
    min-height: 40px;
  }
}

/* Handy: Vorteile-Leiste einzeilig als Laufband statt drei Zeilen */
@media (max-width: 849px) {
  html .header-top {
    min-height: 32px;
  }

  html .header-top .mobile-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
  }

  html .header-top .mobile-nav .html_topbar_left p {
    display: inline-block;
    margin: 0;
    padding-right: 100%;
    white-space: nowrap;
    font-size: 13px;
    animation: sp-laufband 24s linear infinite;
  }
}

/* Text startet sichtbar, steht kurz, läuft dann vollständig hinaus */
@keyframes sp-laufband {
  0%, 12% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 849px) and (prefers-reduced-motion: reduce) {
  html .header-top .mobile-nav { overflow-x: auto; }
  html .header-top .mobile-nav .html_topbar_left p { padding-right: 0; animation: none; }
}


/* ----- AKZENTE: nur Gelb, Schwarz, Grau ----- */

/* Häkchen in Vorteils-Listen: Gelb mit schwarzem Haken statt Grün */
body.single-product .product-short-description ul.sp-usps,
body.single-product .product-short-description ul,
body.single-product ul.sp-usps {
  background: var(--sp-hell) !important;
  border-color: var(--sp-linie) !important;
}

body.single-product .product-short-description ul li::before,
body.single-product ul.sp-usps li::before,
.sp-usp-list li::before,
.sp-trust-check {
  background-color: var(--sp-akzent) !important;
  color: var(--sp-dunkel) !important;
}

/* Fußbereich: Rechtliche Links größer */
html .footer-wrapper .stack .button.white.is-link,
html .absolute-footer .button.white.is-link {
  font-size: 13px;
}


/* =========================================
   PRODUKTSEITE – Kaufbereich
   ========================================= */

/* Rechner: Galerie/Vorschau halbe Breite statt ein Drittel (Layout-Block: large-4 + large-8) */
@media (min-width: 850px) {
  .single-product .row > .col.large-4:has(.product-images) {
    flex-basis: 50%;
    max-width: 50%;
  }
  .single-product .row > .col.large-4:has(.product-images) + .col.large-8 {
    flex-basis: 50%;
    max-width: 50%;
  }
  /* Prozent-Abstände aus dem Layout-Block (10 % + 2 × 10 %) fressen die halbe Spalte auf */
  .single-product .row > .col.large-4:has(.product-images) + .col.large-8 > .col-inner {
    padding-left: 40px !important;
  }
}

@media (max-width: 849px) {
  .single-product .row > .col.large-4:has(.product-images) + .col.large-8 > .col-inner {
    padding-left: 0 !important;
  }
}

.single-product .row > .col.large-4:has(.product-images) + .col.large-8 .col-inner.text-left {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Menge + Button in einer Zeile, Button füllt den Rest */
.single-product form.cart:has(> .single_add_to_cart_button) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 12px;
}
.single-product form.cart:has(> .single_add_to_cart_button) > * {
  flex: 0 0 100%;
}
.single-product form.cart > .ux-quantity {
  flex: 0 0 auto;
  display: inline-flex;
  margin: 8px 0 0;
  border: 1px solid #d1d5db;
  border-radius: var(--sp-radius);
  overflow: hidden;
}
.single-product form.cart > .ux-quantity > * {
  height: 52px;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: #fff;
  box-shadow: none;
}
.single-product form.cart > .ux-quantity .ux-quantity__button {
  width: 40px;
  font-size: 18px;
}
.single-product form.cart > .ux-quantity input.qty {
  width: 48px;
  font-size: 16px;
  font-weight: 600;
}
html .single-product form.cart > .single_add_to_cart_button {
  flex: 1 1 0;
  min-height: 54px;
  white-space: nowrap;
  margin: 8px 0 0;
  font-size: 17px;
}

/* Vertrauensleiste unter dem Button: Häkchen statt Sternen (sahen nach Bewertung aus) */
body.single-product .sp-trust-bar span {
  font-size: 13px;
  color: #374151;
}
body.single-product .sp-trust-bar span::before {
  content: "\2713";
  color: var(--sp-dunkel);
  font-size: 12px;
  font-weight: 700;
}


/* =========================================
   PRODUKTSEITE – Beschreibung unterhalb
   ========================================= */

/* Icons in Inhalten: <div class="sp-icon sp-icon-schere"></div> – Linien-Icons in der Akzentfarbe */
.sp-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  background-color: var(--sp-akzent);
  -webkit-mask: var(--sp-icon) center / contain no-repeat;
  mask: var(--sp-icon) center / contain no-repeat;
}
.sp-icon-schere {
  --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E");
}
.sp-icon-palette {
  --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.1 0 1.5-.8 1.5-1.6 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.5 1.6-1.5H16a5 5 0 0 0 5-5c0-4.4-4-7.5-9-7.5z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='9.5' cy='7.5' r='1'/%3E%3Ccircle cx='14.5' cy='7.5' r='1'/%3E%3Ccircle cx='17' cy='11' r='1'/%3E%3C/svg%3E");
}
.sp-icon-schirm {
  --sp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12a10 10 0 0 0-20 0z'/%3E%3Cpath d='M12 12v7a2 2 0 0 0 4 0M12 2v1'/%3E%3C/svg%3E");
}

/* Service-Kästen (Versand/Support/Verarbeitung) im Stil der Karten darüber: weiß, weicher Schatten */
.single-product .col-inner.box-shadow-1,
.single-product .col-inner:has(> .icon-box.icon-box-center) {
  background: #fff !important;
  border-radius: var(--sp-radius-gross);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 24px 20px !important;
}
.single-product .col-inner.box-shadow-1:hover,
.single-product .col-inner:has(> .icon-box.icon-box-center):hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
}

/* Leere Bild-Platzhalter aus dem UX-Builder ("Upload Image...") nie zeigen */
.uxb-no-content {
  display: none !important;
}

/* Handy: keine Tabs, Inhalte offen untereinander, ohne Rahmen-in-Rahmen */
@media (max-width: 849px) {
  .single-product .woocommerce-tabs ul.tabs {
    display: none;
  }
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    display: block !important;
    padding: 0;
    border: none;
  }
  .single-product .woocommerce-tabs .tab-panels {
    padding: 0;
    border: none;
  }
  .single-product .woocommerce-Tabs-panel .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .single-product .woocommerce-Tabs-panel h2[style] {
    font-size: 22px !important;
    line-height: 1.25;
  }
  .single-product .woocommerce-Tabs-panel + .woocommerce-Tabs-panel {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--sp-linie);
  }
}


/* =========================================
   PRODUKTLISTEN + FUSSBEREICH
   ========================================= */

/* Preisangaben in Produktlisten: kompakt unter dem Preis statt großer Abstände */
.product-small .price-wrapper .price {
  font-weight: 700;
  color: var(--sp-dunkel);
}
.product-small .wc-gzd-additional-info-loop {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-grau);
}
.product-small .wc-gzd-additional-info-loop:first-of-type {
  margin-top: 2px !important;
}

/* "Vertrag widerrufen": Das Plugin hängt den Button zusätzlich unter den Fuß.
   Nur ausblenden, wenn der Fuß schon einen Link auf dieselbe Seite hat. */
body:has(.footer-wrapper a[href*="vertrag-widerrufen"]) > .eu-owb-order-withdraw-from-contract-button {
  display: none;
}

/* Zahlungsarten nur einmal (unterste Fußzeile, Flatsome-Einstellung) */
.footer-wrapper .stack .payment-icons {
  display: none;
}

/* Rechtliche Links: normal statt fett, mit Luft dazwischen, kein Umbruch */
html .footer-wrapper .stack:has(> .button.white.is-link) {
  flex-wrap: wrap;
  gap: 2px 4px;
}
html .footer-wrapper .stack .button.white.is-link {
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  white-space: nowrap;
}

/* =========================================
   PRODUKTTEXTE (Beschreibung der Designer-Seiten)
   Bausteine für die Inhalte, damit dort keine Inline-Styles nötig sind.
   ========================================= */

.sp-intro {
  text-align: center;
}
.sp-intro h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}
.sp-intro p {
  color: #555;
  max-width: 680px;
  margin: 0 auto 10px;
}
.sp-box {
  padding: 24px;
  background: #fff;
  border-radius: var(--sp-radius-gross);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  height: 100%;
  text-align: center;
}
.sp-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.sp-box p {
  font-size: 14px;
  color: #666;
  margin: 0;
}
.sp-text h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}
.sp-text h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 8px;
}
.sp-text p,
.sp-text li {
  color: #444;
  font-size: 15px;
}
.sp-text ul {
  padding-left: 20px;
}

/* Größen-Tabelle */
.sp-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: var(--sp-radius);
  overflow: hidden;
}
.sp-tabelle th,
.sp-tabelle td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--sp-linie);
  text-align: left;
  vertical-align: top;
}
.sp-tabelle th {
  background: var(--sp-dunkel);
  color: #fff;
  font-weight: 700;
}
.sp-tabelle td:last-child {
  white-space: nowrap;
  font-weight: 700;
}
.sp-hinweis {
  font-size: 13px !important;
  color: var(--sp-grau) !important;
}

/* Farbempfehlungen mit Farbpunkt */
.sp-farbliste {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 12px;
}
.sp-farbliste li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sp-punkt {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--farbe);
  border: 1px solid rgba(0, 0, 0, .2);
  margin-top: 1px;
}

/* Montage-Schritte */
.sp-schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  counter-reset: sp-schritt;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-schritte li {
  counter-increment: sp-schritt;
  text-align: center;
  font-size: 14px;
  color: #444;
  margin: 0;
}
.sp-schritte li::before {
  content: counter(sp-schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--sp-akzent);
  color: var(--sp-dunkel);
  font-size: 18px;
  font-weight: 800;
}
@media (max-width: 549px) {
  .sp-schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Verweise auf die anderen Designer */
.sp-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.sp-links a {
  display: block;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--sp-linie);
  border-radius: var(--sp-radius);
  color: var(--sp-dunkel);
  font-size: 14px;
  line-height: 1.4;
}
.sp-links a strong {
  display: block;
  font-size: 15px;
}
.sp-links a:hover {
  border-color: var(--sp-akzent);
}
.sp-mitte {
  text-align: center;
}
/* Faktentabelle (zwei Spalten, normale Schrift rechts) */
.sp-tabelle.sp-fakten td:first-child {
  font-weight: 700;
  width: 38%;
}
.sp-tabelle.sp-fakten td:last-child {
  white-space: normal;
  font-weight: 400;
}