/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ============================================================
   Farben und Schriften
   ============================================================
   Die Token-NAMEN sind historisch: --sg-blue traegt heute Tannengruen.
   Umbenennen haette jede der 21 Vorlagen angefasst und genau das Risiko
   erzeugt, das dieser Aufbau vermeidet. Der Name bezeichnet eine Rolle
   ("der Akzent"), keine Farbe.

   Kontrast gegen dieselbe Messlatte geprueft wie zuvor im Dunklen:
   4,5:1 fuer Fliesstext. --sg-dim liegt knapp darueber und ist deshalb
   Rubriken und Nebenangaben vorbehalten, nie Fliesstext.
   ============================================================ */
:root {
  /* Flaechen */
  --sg-bg:             #F4F1EA;   /* warmes Creme, Grundflaeche */
  --sg-surface:        #ECE7DB;   /* abgesetzte Sektion */
  --sg-sidebar:        #EFEAE0;   /* ruhige Nebenflaeche */
  --sg-dark:           #16211F;   /* dunkle Abschluss-Sektion */

  /* Schrift, vier Stufen mit klarer Aufgabe */
  --sg-text:           #1C1B17;   /* Ueberschriften, alles Wichtige */
  --sg-mid:            #38352E;   /* Fliesstext */
  /* Eine Spur dunkler als das urspruengliche #6E685B: darauf kam --sg-dim
     auf --sg-surface nur auf 4,49:1 und verfehlte die Messlatte knapp.
     Auf --sg-bg liegt es jetzt bei rund 4,9:1, auf --sg-surface bei 4,6:1. */
  --sg-dim:            #6A6457;   /* Rubriken, Nebenangaben */
  --sg-faint:          #8A8375;   /* Bildunterschriften, Zeitangaben */
  --sg-ghost:          #B8B1A1;   /* blasse Zierziffern, sonst nichts */

  /* Auf dunklem Grund.
     Es bleiben dunkle Bereiche: der Hero ueber Bild oder Video, die
     Abschluss-Sektion, die Fusszeile und die Huelle der StereoLab-App.
     Solange die ganze Seite dunkel war, brauchten die keine eigenen Farben -
     --sg-text war hell. Jetzt ist --sg-text fast schwarz, und diese Bereiche
     brauchen ihre eigene Stufe, sonst steht dunkler Text auf dunklem Grund. */
  --sg-on-dark:        #F4F1EA;
  --sg-on-dark-mid:    rgba(244, 241, 234, 0.74);
  --sg-on-dark-dim:    rgba(244, 241, 234, 0.50);
  --sg-on-dark-line:   rgba(244, 241, 234, 0.20);

  /* Akzent */
  --sg-blue:           #1F4A47;
  --sg-blue-hover:     #143432;
  --sg-blue-on-dark:   #7FA39B;   /* derselbe Akzent auf dunklem Grund */
  --sg-amber:          #8A6A1E;   /* Warnfarbe */
  --sg-amber-dim:      #A98836;

  /* Linien */
  --sg-border:         #DFD8C9;
  --sg-border-subtle:  #E7E1D4;
  --sg-line:           #C9C1AE;

  /* Schriftrollen. Alle drei liegen lokal im Theme unter fonts/ -
     kein fonts.gstatic.com, das waere fuer einen deutschen Shop untauglich. */
  --sg-font-display:   'Newsreader', Georgia, 'Times New Roman', serif;
  --sg-font-body:      'Instrument Sans', system-ui, -apple-system, sans-serif;
  --sg-font-mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ============================================================
   Typografie
   ============================================================
   Newsreader traegt die Ueberschriften im Magerschnitt, Instrument Sans
   den Fliesstext, IBM Plex Mono die Rubriken und alle Zahlen. Technische
   Angaben bekommen dadurch ihre eigene Stimme.
   ============================================================ */

h1, h2, h3, h4,
.entry-title, .page-title, .product_title,
.sg-cart__title, .sg-account__title {
  font-family: var(--sg-font-display);
  font-weight: 300;
  color: var(--sg-text);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: none;
}
h1, .sg-cart__title, .product_title { font-size: clamp(38px, 5.2vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.14; }
h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 400; line-height: 1.25; }
h4 { font-size: 20px; font-weight: 400; }

/* Die kursive Akzentzeile - das tragende Stilmittel. */
h1 em, h2 em, h3 em { font-style: italic; color: var(--sg-blue); }

/* Rubriken: Mono, Versalien, weiter Sperrsatz. Die alten Klassennamen
   bleiben, damit die Vorlagen unberuehrt bleiben. */
.eyebrow, .sg-eyebrow, .sg-cart__eyebrow, .sg-account__eyebrow,
.woocommerce-breadcrumb, .posted_in, .sku_wrapper {
  font-family: var(--sg-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-dim);
  font-weight: 400;
}

/* Zahlen, Masse, Preise */
.price, .amount, .woocommerce-Price-amount, .sg-num,
.sg-cart__item-price, .sg-cart__item-subtotal, figcaption {
  font-family: var(--sg-font-mono);
}
figcaption { font-size: 11px; color: var(--sg-faint); letter-spacing: 0.08em; }

a { color: var(--sg-blue); text-decoration: none; }
a:hover { color: var(--sg-blue-hover); }
::selection { background: var(--sg-blue); color: var(--sg-bg); }

/* Der Claim unter der Bildmarke. Flatsome gibt ihn aus und faerbt ihn passend
   zum dunklen Kopfbereich weiss - auf Creme war er dadurch unsichtbar. */
.logo-tagline,
#logo .tagline,
.header-logo + .tagline {
  color: var(--sg-dim) !important;
  font-family: var(--sg-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-style: normal;
  /* Sonst bricht der Claim unter der Bildmarke auf zwei Zeilen um und
     schiebt den Kopfbereich auseinander. */
  white-space: nowrap;
}


/*************** ADD CUSTOM CSS HERE.   ***************/

/* ══════════════════════════════════════
   SOULGATE — Global & WooCommerce Styles
   ══════════════════════════════════════ */

/* ════════════════════════════════
   GLOBALE SCHRIFTGRÖSSE
   Standard für Fließtext = 1rem
   Eyebrows / Labels / Status = 0.6rem
   Kleine Navigation / Meta = 0.62–0.65rem
════════════════════════════════ */

/* Alle Absätze und Fließtexte global auf 1rem */
.sg-intro p,
.sg-section__body,
.sg-pair__body,
.sg-card__text,
.sg-woo__desc p,
.sg-woo__desc,
.sg-legal__p,
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description,
.sg-products__subtitle,
.sg-about p,
.sg-kontakt__text,
.entry-content p {
  font-size: 1rem !important;
  line-height: 1.85 !important;
}

/* ── Global ── */
html,
body {
  background: var(--sg-bg) !important;
  background-color: var(--sg-bg) !important;
  /* Fliesstext auf --sg-mid, nicht auf --sg-text: durchgehend die dunkelste
     Stufe zu lesen ermuedet. Ueberschriften holen sich --sg-text zurueck. */
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

p, li, dd, dt, blockquote { color: var(--sg-mid); }

#wrapper,
#main,
.page-wrapper {
  background: var(--sg-bg) !important;
}

/* ── Off-Canvas Cart & Account Popup ── */
.off-canvas-right .mfp-content,
.off-canvas-left .mfp-content,
.off-canvas-center .mfp-content {
  background-color: var(--sg-sidebar) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
}

/* Sidebar-Menü innen */
.off-canvas .sidebar-inner,
.off-canvas .sidebar-menu,
.off-canvas .nav-vertical {
  background-color: var(--sg-sidebar) !important;
  color: var(--sg-text) !important;
}

/* Links */
.off-canvas .mfp-content a,
.off-canvas .nav-vertical > li > a,
.off-canvas .nav-vertical > li > ul li a {
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-color: var(--sg-border) !important;
}

.off-canvas .mfp-content a:hover,
.off-canvas .nav-vertical > li > a:hover {
  color: var(--sg-text) !important;
}

/* Trennlinien */
.off-canvas .nav-vertical > li + li {
  border-color: var(--sg-border) !important;
}

/* Cart-Inhalt */
.off-canvas-cart .cart_list li,
.off-canvas-cart .woocommerce-mini-cart__empty-message {
  border-color: var(--sg-border) !important;
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
}

.off-canvas-cart .cart_list li a {
  color: var(--sg-text) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.off-canvas-cart .woocommerce-mini-cart__total {
  border-color: var(--sg-border) !important;
  background: var(--sg-surface) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.off-canvas-cart .woocommerce-mini-cart__total .amount {
  color: var(--sg-blue) !important;
}

/* Schließen-Button */
.off-canvas .mfp-close {
  color: var(--sg-dim) !important;
}

.off-canvas .mfp-close:hover {
  color: var(--sg-text) !important;
}

/* Warenkorb-Buttons */
.off-canvas-cart .woocommerce-mini-cart__buttons a {
  display: inline-block;
  background: transparent !important;
  border: 1px solid var(--sg-dim) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 1rem calc(2.5rem + 0.22em) 1rem 2.5rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.off-canvas-cart .woocommerce-mini-cart__buttons a:hover {
  background: var(--sg-surface) !important;
  border-color: var(--sg-dim) !important;
  color: var(--sg-text) !important;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .checkout {
  display: inline-block;
  background: transparent !important;
  border: 1px solid var(--sg-dim) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 1rem calc(2.5rem + 0.22em) 1rem 2.5rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

/* Produktbild im Cart */
.off-canvas-cart .cart_list li img {
  opacity: 0.8;
  border: 1px solid var(--sg-border) !important;
}

/* ── Warenkorb Hover-Dropdown deaktivieren ── */
.cart-item.has-dropdown > .nav-dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Nav-Dropdown */
.nav-dropdown {
  background-color: var(--sg-surface) !important;
  border-color: var(--sg-border) !important;
}

.nav-dropdown li:not(.html) > a,
.nav-dropdown .nav-column li:not(.html) > a {
  color: var(--sg-mid) !important;
  border-color: var(--sg-border) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.15em !important;
}

.nav-dropdown li:not(.html) > a:hover,
.nav-dropdown .nav-column li:not(.html) > a:hover {
  color: var(--sg-text) !important;
  background: var(--sg-border-subtle) !important;
}

/* ── Breadcrumb ausblenden ── */
.woocommerce-breadcrumb,
.breadcrumbs,
.woocommerce nav.breadcrumb {
  display: none !important;
}

/* ── Shop: Transparenter Header deaktivieren ── */
.post-type-archive-product #header,
.post-type-archive-product .header-wrapper,
.post-type-archive-product .header-main {
  background: var(--sg-bg) !important;
  background-color: var(--sg-bg) !important;
  position: sticky !important;
  top: 0 !important;
}

.post-type-archive-product.has-transparent #header {
  position: sticky !important;
  top: 0 !important;
  background: var(--sg-bg) !important;
}

/* ── Shop: Header fixieren, kein Gap oben ── */
.woocommerce-page #main,
.tax-product_cat #main,
.post-type-archive-product #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.post-type-archive-product #main > .page-title,
.post-type-archive-product .page-header-wrapper,
.post-type-archive-product #main > .section:first-child,
.post-type-archive-product .is-divider:first-child {
  display: none !important;
}

/* Kein extra Abstand oben durch Flatsome-Wrapper */
.post-type-archive-product #main > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Shop Page Title ausblenden ── */
.woocommerce-products-header,
.woocommerce-products-header__title,
.page-title.is-large,
.shop-page-title,
.flatsome-shop-page-title {
  display: none !important;
}

/* ── Flatsome Footer ausblenden ── */
#footer,
#footer *,
.footer-wrapper,
.footer,
.footer-1,
.footer-2,
.footer-secondary,
.absolute-footer,
.back-to-top {
  display: none !important;
}

/* ── Checkout + Cart Page Title ausblenden ── */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title,
.woocommerce-cart .page-header-wrapper,
.woocommerce-cart .page-wrapper > h1,
.woocommerce-cart .page-wrapper > h2,
.woocommerce-cart .col-inner > h1:first-child,
.woocommerce-cart .col-inner > h2:first-child {
  display: none !important;
}

/* ── Topbar ausblenden ── */
.header-top,
.top-bar,
#top-bar {
  display: none !important;
}

/* ── Flatsome Header sticky ── */
#header,
#wrapper #header,
#wrapper #header.header,
#wrapper .header.has-transparent,
#wrapper .header.transparent,
#wrapper .header.show-on-scroll {
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
  left: auto !important;
  right: auto !important;
}

/* ── Flatsome Header dunkel ── */
#header,
#header .header-wrapper,
#header .header-inner,
.header-main,
.header-bottom,
.header-top,
.sticky-header,
.is-sticky #header,
.nav-dark,
[data-sticky] {
  background: var(--sg-bg) !important;
  background-color: var(--sg-bg) !important;
  border-color: var(--sg-border-subtle) !important;
  box-shadow: none !important;
}

#header a,
#header .nav > li > a {
  color: var(--sg-mid) !important;
}

#header a:hover,
#header .nav > li > a:hover {
  color: var(--sg-text) !important;
}

#header .nav > li.active > a,
#header .nav > li.current-menu-item > a,
#header .nav > li.current_page_item > a,
#header .nav > li.current-menu-ancestor > a,
.nav-dark #header .nav > li.active > a,
.nav-dark #header .nav > li.current-menu-item > a,
.nav-dark .nav > li.current-menu-item > a,
.nav-dark .nav > li.current_page_item > a,
.nav-dark .nav > li.active > a {
  color: var(--sg-blue) !important;
}

a { color: var(--sg-blue); }
a:hover { color: var(--sg-text); }

/* ── Shop / Archive ── */
.woocommerce-page .page-title,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  color: var(--sg-mid);
  font-family: var(--sg-font-body);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  transition: border-color 0.2s;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: var(--sg-blue) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sg-text) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: var(--sg-blue) !important;
  font-family: var(--sg-font-body) !important;
}

.woocommerce ul.products li.product img {
  opacity: 0.85;
  transition: opacity 0.2s;
}

.woocommerce ul.products li.product:hover img {
  opacity: 1;
}

/* ── Single Product ── */
.woocommerce div.product .product_title {
  font-family: var(--sg-font-body) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  letter-spacing: -0.01em !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sg-blue) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1.3rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

.woocommerce div.product .woocommerce-tabs .tabs li a {
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sg-mid) !important;
}

.woocommerce div.product .woocommerce-tabs .tabs li.active a {
  color: var(--sg-text) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
  line-height: 1.8 !important;
  background: transparent !important;
  border-color: var(--sg-border) !important;
}

/* ── Schaltflaechen ──
   Zwei Sorten, und der Unterschied traegt Bedeutung:
   gefuellt = die Hauptsache dieser Seite (bestellen, anmelden, registrieren),
   Umriss  = alles andere. Vorher waren alle gleich: durchsichtig mit blassem
   Rahmen, in Versalien mit 0,22em Sperrsatz. Auf hellem Grund verschwanden
   sie und man sah nicht, welche die eigentliche Handlung ist. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button[type="submit"] {
  display: inline-block;
  background: transparent !important;
  border: 1px solid var(--sg-line) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 0.95rem 1.8rem !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page button[type="submit"]:hover {
  background: var(--sg-surface) !important;
  border-color: var(--sg-text) !important;
  color: var(--sg-text) !important;
}

/* Die Hauptsache: gefuellt im Akzent.
   Die Selektoren tragen absichtlich Element UND Klasse. Sonst verlieren sie:
   `.woocommerce button.button` (Umriss) ist spezifischer als
   `.woocommerce-form-login__submit`, und `!important` hilft dagegen nicht -
   bei gleichem Gewicht entscheidet die Spezifitaet, nicht die Reihenfolge.
   Gemessen: die Schaltflaechen blieben durchsichtig, obwohl die gefuellte
   Regel weiter unten stand. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce button.button.woocommerce-form-register__submit,
.woocommerce button.button.woocommerce-form-login__submit,
.woocommerce-page button.woocommerce-form-register__submit,
.woocommerce-page button.woocommerce-form-login__submit,
.woocommerce-page a.checkout-button,
.woocommerce #place_order {
  background: var(--sg-blue) !important;
  border: 1px solid var(--sg-blue) !important;
  color: var(--sg-bg) !important;
  padding: 0.95rem 2rem !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce button.button.woocommerce-form-register__submit:hover,
.woocommerce button.button.woocommerce-form-login__submit:hover,
.woocommerce-page button.woocommerce-form-register__submit:hover,
.woocommerce-page button.woocommerce-form-login__submit:hover,
.woocommerce-page a.checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--sg-blue-hover) !important;
  border-color: var(--sg-blue-hover) !important;
  color: var(--sg-bg) !important;
}

/* ── Meldungen ──
   Flatsome zeichnet Hinweise mit einem harten schwarzen Rahmen. Auf Creme
   wirkt das wie ein Fremdkoerper. Stattdessen eine ruhige Flaeche mit einer
   farbigen Kante links - Hinweis, Erfolg und Fehler unterscheiden sich an
   der Kante, nicht durch Schreien. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  border-left: 3px solid var(--sg-blue) !important;
  border-radius: 2px !important;
  color: var(--sg-mid) !important;
  padding: 1.1rem 1.4rem !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.woocommerce-error {
  border-left-color: var(--sg-amber) !important;
  color: var(--sg-text) !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { color: inherit !important; }

/* "Warenkorb aktualisieren" ist eine Nebenhandlung, kein zweiter Kaufknopf. */
.woocommerce button[name="update_cart"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--sg-dim) !important;
  text-decoration: underline !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.woocommerce button[name="update_cart"]:hover { color: var(--sg-text) !important; }

/* ── Cart / Checkout ── */
.woocommerce table.shop_table {
  border-color: var(--sg-border) !important;
  font-family: var(--sg-font-body) !important;
  color: var(--sg-mid) !important;
}

.woocommerce table.shop_table th {
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sg-dim) !important;
  border-color: var(--sg-border) !important;
}

.woocommerce table.shop_table td {
  border-color: var(--sg-border-subtle) !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  background: var(--sg-surface) !important;
  border: none !important;
}

/* ── Formularfelder ──
   Vorher: Grund --sg-border-subtle, Rahmen --sg-border. Auf Creme lagen beide
   dicht beieinander, das Feld war vom Papier kaum zu unterscheiden - man sah
   nicht, wo man tippen soll. Jetzt weisses Feld mit deutlicher Linie.

   Die Auswahlfelder brauchen ausserdem eine ausdrueckliche Hoehe und ein
   eigenes Pfeilsymbol: mit appearance:none faellt der Pfeil des Systems weg,
   und ohne Hoehe schneidet das Feld die Schrift an. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="tel"],
.woocommerce-page select {
  background: #FFFFFF !important;
  border: 1px solid var(--sg-line) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 15px !important;
  border-radius: 2px !important;
  padding: 0.8rem 0.9rem !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.woocommerce form .form-row select,
.woocommerce-page select {
  -webkit-appearance: none;
  appearance: none;
  height: auto !important;
  min-height: 3rem;
  padding-right: 2.4rem !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sg-dim) 50%),
    linear-gradient(135deg, var(--sg-dim) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  background-color: #FFFFFF !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page select:focus {
  border-color: var(--sg-blue) !important;
  box-shadow: 0 0 0 1px var(--sg-blue) !important;
  outline: none !important;
}

.woocommerce form .form-row label,
.woocommerce-page form label {
  font-family: var(--sg-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sg-dim) !important;
}

/* ── Page wrapper ── */
.woocommerce,
.woocommerce-page {
  background: var(--sg-bg) !important;
  padding-top: 0 !important;
}

.woocommerce,
.woocommerce.woocommerce-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.woocommerce .page-title {
  font-family: var(--sg-font-body) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  color: var(--sg-text) !important;
  letter-spacing: -0.01em !important;
}

/* ── Produktkachel ── */
.sg-product-card {
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-border) !important;
  list-style: none;
  transition: border-color 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
}

.sg-product-card:hover {
  border-color: var(--sg-blue) !important;
  transform: translateY(-3px);
}

.sg-product-card__inner {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.sg-product-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.sg-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.4s, transform 0.5s;
  display: block;
}

.sg-product-card:hover .sg-product-card__img {
  opacity: 1;
  transform: scale(1.04);
}

.sg-product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--sg-blue);
  color: var(--sg-bg);
  font-family: var(--sg-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.sg-product-card__info {
  padding: 1.5rem 1.5rem 0.75rem;
}

.sg-product-card__title {
  font-family: var(--sg-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sg-text) !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.4 !important;
}

.sg-product-card__price {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  color: var(--sg-blue) !important;
  letter-spacing: 0.06em;
}

.sg-product-card__price .woocommerce-Price-amount {
  color: var(--sg-blue) !important;
}

.sg-product-card__price del .woocommerce-Price-amount {
  color: var(--sg-dim) !important;
}

.sg-product-card__btn {
  display: inline-block;
  background: transparent !important;
  border: 1px solid var(--sg-dim) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 1rem calc(2.5rem + 0.22em) 1rem 2.5rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.sg-product-card__btn:hover {
  background: var(--sg-surface) !important;
  border-color: var(--sg-dim) !important;
  color: var(--sg-text) !important;
}

/* ── Header Cart Dropdown (Hover-Popup) ── */
.nav-dropdown .widget_shopping_cart,
.nav-dropdown .widget_shopping_cart_content {
  background: var(--sg-surface) !important;
  color: var(--sg-text) !important;
}

/* Cart items */
.nav-dropdown .woocommerce-mini-cart.cart_list,
.nav-dropdown .product_list_widget {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.nav-dropdown .mini_cart_item {
  padding: 0.7rem 1rem !important;
  border-bottom: 1px solid var(--sg-border) !important;
  background: transparent !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
}

.nav-dropdown .mini_cart_item a:not(.remove) {
  color: var(--sg-text) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.nav-dropdown .mini_cart_item a:not(.remove):hover {
  color: var(--sg-blue) !important;
}

.nav-dropdown .mini_cart_item .quantity {
  color: var(--sg-dim) !important;
  font-size: 0.7rem !important;
  font-family: var(--sg-font-body) !important;
  display: block !important;
  margin-top: 0.2rem !important;
}

.nav-dropdown .mini_cart_item img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  opacity: 0.8;
  border: 1px solid var(--sg-border) !important;
}

/* Empty message */
.nav-dropdown .ux-mini-cart-empty,
.nav-dropdown .woocommerce-mini-cart__empty-message {
  color: var(--sg-dim) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 1.2rem 1rem !important;
  margin: 0 !important;
  background: var(--sg-surface) !important;
}

/* Footer: total + buttons */
.nav-dropdown .ux-mini-cart-footer {
  background: var(--sg-sidebar) !important;
  border-top: 1px solid var(--sg-border) !important;
}

.nav-dropdown .woocommerce-mini-cart__total {
  background: transparent !important;
  border-bottom: 1px solid var(--sg-border) !important;
  padding: 0.7rem 1rem !important;
  font-family: var(--sg-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sg-mid) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
}

.nav-dropdown .woocommerce-mini-cart__total strong {
  font-weight: 400 !important;
  color: var(--sg-mid) !important;
}

.nav-dropdown .woocommerce-mini-cart__total .amount {
  color: var(--sg-blue) !important;
}

.nav-dropdown .woocommerce-mini-cart__buttons {
  padding: 0.7rem 1rem !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  margin: 0 !important;
}

/* Alle Buttons im Dropdown — transparent, kein blauer Hintergrund */
.nav-dropdown .woocommerce-mini-cart__buttons a,
.nav-dropdown .woocommerce-mini-cart__buttons a.button,
.nav-dropdown .woocommerce-mini-cart__buttons .button,
.nav-dropdown .woocommerce-mini-cart__buttons .checkout,
.nav-dropdown .woocommerce-mini-cart__buttons .wc-forward {
  background: var(--sg-blue) !important;
  border: 1px solid var(--sg-blue) !important;
  color: var(--sg-bg) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 1rem calc(2.5rem + 0.22em) 1rem 2.5rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.nav-dropdown .woocommerce-mini-cart__buttons a:hover,
.nav-dropdown .woocommerce-mini-cart__buttons a.button:hover,
.nav-dropdown .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--sg-blue) !important;
  border-color: var(--sg-blue) !important;
  color: var(--sg-bg) !important;
}

/* Delete button */
.nav-dropdown .mini_cart_item a.remove {
  color: var(--sg-dim) !important;
  font-size: 1rem !important;
  background: transparent !important;
}

.nav-dropdown .mini_cart_item a.remove:hover {
  color: var(--sg-mid) !important;
  background: transparent !important;
}

/* ── Account Seite ── */
.woocommerce-account #main,
.woocommerce-cart #main,
.woocommerce-checkout #main,
.woocommerce-order-received #main,
.post-type-archive-product #main,
.single-product #main,
.woocommerce-account #main,
.tax-product_cat #main {
  padding-top: 0 !important;
  overflow: hidden; /* verhindert margin collapse */
}

/* Content-Abstand wie Account-Seite */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.single-product .entry-content,
.tax-product_cat .woocommerce {
  padding-top: 4rem !important;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.single-product .woocommerce,
.single-product .product,
.post-type-archive-product .woocommerce {
  padding-top: 4rem !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
  line-height: 2 !important;
  letter-spacing: 0.06em !important;
  font-size: 0.9rem !important;
}

.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content a {
  line-height: 2 !important;
  letter-spacing: 0.06em !important;
  font-size: 0.9rem !important;
}

/* Account Nav — Shop-Sidebar-Stil */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--sg-sidebar) !important;
  border-right: 1px solid var(--sg-border-subtle) !important;
  padding: 1.5rem 0 3rem !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-top: 1px solid var(--sg-border-subtle) !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 0.7rem 1.5rem !important;
  font-family: var(--sg-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sg-dim) !important;
  text-decoration: none !important;
  /* Der Streifen des aktiven Eintrags ist immer da, nur durchsichtig -
     sonst springt der Text beim Wechsel um 2 px zur Seite. */
  border-left: 2px solid transparent !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
  background: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--sg-text) !important;
  background: var(--sg-surface) !important;
}

/* Der aktive Eintrag.
   Hier stand `color` UND `background` auf demselben Akzent - gruener Text auf
   gruener Flaeche, Kontrast 1:1, also schlicht unsichtbar. Entstanden ist das
   beim Umstellen: der Hintergrund war ein durchsichtiges Cyan
   (rgba(60,175,210,0.08)), und die Ersetzungsregel hat daraus den vollen
   Akzent gemacht. Jetzt traegt der Streifen links die Auszeichnung, der Text
   bleibt lesbar. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  color: var(--sg-text) !important;
  background: var(--sg-surface) !important;
  border-left-color: var(--sg-blue) !important;
}

/* ── Mengen-Input ── */
input[type=number].qty,
input.qty,
input.input-text.qty,
.quantity input.qty,
.quantity input.input-text,
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty,
.single-product .quantity input.qty,
#main input[type=number],
#main input.qty {
  color: var(--sg-text) !important;
  background: var(--sg-surface) !important;
  border: 1px solid var(--sg-dim) !important;
  border-radius: 0 !important;
  font-family: var(--sg-font-body) !important;
  -webkit-text-fill-color: var(--sg-text) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.woocommerce .quantity button,
.woocommerce-page .quantity button {
  color: var(--sg-text) !important;
  background: transparent !important;
  border-color: var(--sg-dim) !important;
}

/* ── Star ratings ── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--sg-blue) !important;
}

/* ── Notices ── */

/* Cart: alle Notices ausblenden */
.woocommerce-cart .message-container.success-color,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .message-wrapper,
.message-container.success-color,
body.woocommerce-cart .message-container,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .message-wrapper {
  display: none !important;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--sg-blue) !important;
  background: var(--sg-surface) !important;
  color: var(--sg-mid) !important;
  font-family: var(--sg-font-body) !important;
}


@media only screen and (max-width: 48em) {

  /* WooCommerce Cart/Checkout */
  .woocommerce table.shop_table { font-size: 1rem; }
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table th { padding: 0.5rem 0.3rem; }

  /* Account Navigation */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    border-right: none !important;
    border-bottom: 1px solid var(--sg-border-subtle) !important;
    padding: 1rem 0 !important;
  }

  /* Header Cart Dropdown */
  .nav-dropdown .ux-mini-cart-footer { padding: 0.5rem !important; }

  /* Produktseite */
  .sg-product__stage { padding-top: 0; }
  .sg-product__info { padding: 2rem 1.2rem 3rem; }

}
/* ── Globale Überschriften-Override (Flatsome-Reset) ── */
.sg-kontakt h1, .sg-kontakt h2, .sg-kontakt h3,
.sg-about h1, .sg-about h2, .sg-about h3,
.sg-tech h1, .sg-tech h2, .sg-tech h3,
.sg-products h1, .sg-products h2, .sg-products h3,
.sg-detail h1, .sg-detail h2, .sg-detail h3,
.sg-shop h1, .sg-shop h2, .sg-shop h3,
.sg-cart-page h1, .sg-cart-page h2,
.sg-checkout h1, .sg-checkout h2 {
  color: var(--sg-text) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBALES BUTTON-SYSTEM — Ghost
══════════════════════════════════════════════════════════════════ */
.sg-btn,
.sg-btn--primary {
  display: inline-block;
  background: transparent !important;
  border: 1px solid var(--sg-dim) !important;
  color: var(--sg-text) !important;
  font-family: var(--sg-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem 1rem calc(2.5rem + 0.22em) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.sg-btn:hover,
.sg-btn--primary:hover {
  background: var(--sg-surface) !important;
  border-color: var(--sg-dim) !important;
  color: var(--sg-text) !important;
}

/* Cart: col-inner padding entfernen damit .sg-cart volle Breite bekommt */
.woocommerce-cart .col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.woocommerce-cart .woocommerce {
  max-width: 100% !important;
  width: 100% !important;
}