/* ---------- HOVER: nur echte Zeigegeraete, nie auf dem Touchscreen ---------- */
@media (hover: hover) and (pointer: fine) {
  .sg-sh-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .sg-sh-card .sg-sh-card-img{transition:transform .2s ease}
  .sg-sh-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,24,97,.13)}
  .sg-sh-card:hover .sg-sh-card-img{transform:scale(1.03)}
  .sg-pdt-doc{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
  .sg-pdt-doc:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,24,97,.16)}
  .ee-gallery-item{transition:transform .2s ease,box-shadow .2s ease}
  .ee-gallery-item .breakdance-image-object{transition:transform .2s ease}
  .ee-gallery-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,24,97,.14)}
  .ee-gallery-item:hover .breakdance-image-object{transform:scale(1.03)}
  .ee-gallery-item-figure{overflow:hidden;border-radius:var(--sg-radius-s,4px)}
}
/* Tastatur: sichtbarer Fokus auf denselben Elementen */
.sg-sh-card:focus-visible,.ee-gallery-item a:focus-visible{outline:3px solid var(--hcl-brand-9,#141861);outline-offset:3px}
/* Wer weniger Bewegung eingestellt hat, bekommt keine */
@media (prefers-reduced-motion: reduce){
  .sg-sh-card,.sg-sh-card .sg-sh-card-img,.sg-pdt-doc,.ee-gallery-item,.ee-gallery-item .breakdance-image-object{transition:none}
  .sg-sh-card:hover,.sg-pdt-doc:hover,.ee-gallery-item:hover{transform:none;box-shadow:none}
  .sg-sh-card:hover .sg-sh-card-img,.ee-gallery-item:hover .breakdance-image-object{transform:none}
}

/* ---------- TEXTE: nichts unter 14px in der Produktkarte ---------- */
.sg-sh-card .woocommerce-price-suffix,.woocommerce .sg-sh-card .woocommerce-price-suffix{font-size:14px}
.sg-sh-card .sg-verf .sg-verf__text,.sg-sh-card .sg-verf__text{font-size:14px}
.sg-sh-card-brandname.sg-sh-card-brandname{font-size:14px}
.sg-sh-card-leer-marke.sg-sh-card-leer-marke{font-size:14px}
.sg-sh-card-leer-hinweis.sg-sh-card-leer-hinweis{font-size:14px}

/* ----------------------------------------------------------------------
 * DIE WARENKORBTABELLE WAR EINEN HAUCH ZU BREIT
 *
 * Gemessen am 12.09.2026 bei 320 Pixeln mit dem laengsten Produktnamen des
 * Sortiments (164 Zeichen, das Geberit-Monolith-Set): die Tabelle war 307
 * Pixel breit und begann bei 20 — Rechtskante 327 in einem 320 Pixel breiten
 * Fenster. Sieben Pixel, aber die Seite liess sich damit zur Seite schieben.
 *
 * `table-layout: fixed` zwingt die Spalten in den vorhandenen Platz, statt
 * sie am laengsten Inhalt auszurichten.
 * ---------------------------------------------------------------------- */
@media (max-width: 560px){
  .woocommerce-cart-form table.shop_table{
    width:100%!important;max-width:100%!important;
    table-layout:fixed;
  }
  .woocommerce-cart-form table.shop_table td,
  .woocommerce-cart-form table.shop_table th{
    overflow-wrap:anywhere;
  }
  .woocommerce-cart-form table.shop_table td.product-thumbnail{width:52px}
  .woocommerce-cart-form table.shop_table td.product-remove{width:32px}
}

/* ----------------------------------------------------------------------
 * DAS LOGO WAR LINKS ANGESCHNITTEN
 *
 * Gemessen am 12.09.2026 bei 320 Pixeln: das Bild ist 112 Pixel breit, sein
 * Behaelter aber nur 54 — die linke Kante lag bei -5 Pixeln, das „s" von
 * sanigroup war ab. Ursache: die Kopfzeile verteilt ihre drei Teile mit
 * `space-between`, und bei 320 Pixeln bleibt fuer das Logo zu wenig uebrig.
 *
 * Das Logo darf schrumpfen, aber nicht abgeschnitten werden. 96 Pixel sind
 * knapp, aber der Schriftzug bleibt lesbar.
 * ---------------------------------------------------------------------- */
@media (max-width: 400px){
  .bde-header-builder__container{padding-left:14px;padding-right:14px}
  .bde-header-builder a.bde-container-link{flex:0 0 auto;min-width:96px}
  .bde-header-builder a.bde-container-link img{
    max-width:100%;width:auto;height:auto;object-fit:contain;object-position:left center;
  }
}

/* ----------------------------------------------------------------------
 * „LIEFERUNG BIS VOR DIE TUER" BRACH MITTEN IM WORT
 *
 * breakdance-woocommerce.css setzt fuer die Leistungszeile
 * `word-break: break-all` — an drei Stellen: in der Bestelluebersicht, in der
 * Positionsliste und im kleinen Warenkorb im Kopf.
 *
 * Gemessen am 12.09.2026 bei 320 Pixeln: die Zeile war 44,6 Pixel breit und
 * 51 Pixel hoch, also vier Zeilen — „Liefe / rung / bis vor / die Tür".
 *
 * `break-all` ist fuer Sprachen gedacht, die keine Wortzwischenraeume haben.
 * Fuer Deutsch ist `overflow-wrap: break-word` richtig: es bricht nur dann
 * im Wort, wenn ein einzelnes Wort sonst gar nicht passt.
 * ---------------------------------------------------------------------- */
.breakdance-woocommerce ul.wc-item-meta li,
.breakdance-woocommerce dl.variation,
.breakdance-woocommerce dl.variation dt,
.breakdance-woocommerce dl.variation dd,
.bde-mini-cart .variation,
.bde-mini-cart .variation dt,
.bde-mini-cart .variation dd{
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* ----------------------------------------------------------------------
 * DER SUCHVORSCHLAG-KASTEN LIEF AUS DEM BILD
 *
 * Gemessen am 12.09.2026 nach Eingabe von „liebherr" (18 Treffer):
 * FiboSearch setzt per JavaScript `width: 500px` als Inline-Stil auf
 * .dgwt-wcas-suggestions-wrapp. Auf einem 320 Pixel breiten Bildschirm sind
 * das 180 Pixel Ueberlauf — die Seite liess sich tatsaechlich um 180 Pixel
 * zur Seite schieben. Bei 390 waren es 110, bei 430 noch 70.
 *
 * Dazu war der Kasten 600 Pixel hoch in einem 568 Pixel hohen Fenster:
 * sichtbar blieben 169 Pixel, also rund zwei Trefferzeilen.
 *
 * Das Plugin haette dafuer eine eigene Vollbild-Ansicht
 * (`enable_mobile_overlay`), die aber ausgeschaltet ist. Sie einzuschalten
 * wuerde die Suche sichtbar umbauen — und die soll bleiben, wie sie ist.
 * Deshalb wird hier nur die Breite gedeckelt. `!important` ist noetig, weil
 * der Wert als Inline-Stil kommt.
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px){
  /*
   * Auch das FORMULAR bekommt die 500 Pixel, nicht nur der Vorschlagskasten.
   * Nach dem ersten Anlauf sass der Kasten richtig (296 px, Ende bei 308),
   * die Seite lief aber weiter um 180 Pixel ueber — schuld war
   * form.dgwt-wcas-search-form mit genau 500 Pixeln.
   */
  /*
   * `min-width` IST DER SCHULDIGE, NICHT `width`.
   *
   * Das aufgeklappte Suchformular traegt `width:500px` UND
   * `min-width:500px`. Ein `max-width` kann dagegen nichts ausrichten —
   * min-width gewinnt in CSS immer gegen max-width. Der erste Anlauf setzte
   * nur `width:100%!important` und aenderte deshalb gar nichts: gemessen
   * blieben es 500 Pixel und 180 Pixel Ueberlauf bei 320.
   *
   * Das `left:-144px`, das FiboSearch per JavaScript setzt, ist dagegen
   * schon richtig gerechnet: es schiebt die linke Kante des Formulars genau
   * an den linken Bildschirmrand. Mit der richtigen Breite passt es dann
   * exakt ins Bild.
   *
   * Die Vollbild-Ansicht des Plugins (`enable_mobile_overlay`) waere der
   * vorgesehene Weg, baut die Suche aber sichtbar um. Sie bleibt aus.
   */
  form.dgwt-wcas-search-form{
    min-width:0!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    box-sizing:border-box;
  }
  .dgwt-wcas-suggestions-wrapp,
  .dgwt-wcas-details-wrapp{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    left:12px!important;
    right:auto!important;
    box-sizing:border-box;
    max-height:min(60vh, 480px)!important;
    overflow-y:auto;
  }
  .dgwt-wcas-suggestion{padding-left:12px;padding-right:12px;min-height:52px}
  .dgwt-wcas-st-title{overflow-wrap:anywhere}
}

/* ----------------------------------------------------------------------
 * DIE MENGE: MINUS LOESTE PLUS AUS
 *
 * Gemessen am 12.09.2026 auf der Produktseite bei 320 und 390 Pixeln:
 * Der Kasten .quantity ist 75 Pixel breit, die beiden Knoepfe sind je 44
 * Pixel und stehen beide auf position:absolute — bei x 25-69 und x 46-90.
 * Sie ueberdecken sich also um 23 Pixel, und weil Plus spaeter im Dokument
 * steht, gewinnt Plus.
 *
 * Nachgestellt mit Menge 5: ein Tippen bei x=46 bis x=66 erhoehte auf 6,
 * obwohl der Finger sichtbar auf dem Minus lag. Vom 75 Pixel breiten
 * Eingabefeld waren ausserdem nur 10 Pixelspalten ueberhaupt treffbar — wer
 * eine Menge eintippen wollte, landete auf einem Knopf.
 *
 * Dasselbe im kleinen Warenkorb im Kopf. Auf der Warenkorbseite selbst ist
 * es in Ordnung (dort ist genug Platz), deshalb wird hier nichts pauschal
 * ueberschrieben, sondern nur die absolute Lage aufgehoben.
 *
 * Die Loesung ist nicht mehr Platz, sondern eine echte Reihe: Knopf, Feld,
 * Knopf nebeneinander statt uebereinander.
 * ---------------------------------------------------------------------- */
form.cart .quantity.quantity--number,
.bde-mini-cart-item .quantity.quantity--number{
  display:flex;align-items:stretch;width:auto;max-width:100%;padding:0;
  border:1px solid #d9d9e0;border-radius:12px;overflow:hidden;background:#fff;
}
/*
 * `transform:none` MUSS hier stehen.
 *
 * Die Breakdance-Regel setzt die Knoepfe mit `position:absolute; top:50%;
 * transform:translateY(-50%)` in die Mitte. `position:static` allein hebt
 * nur die Lage auf — die Verschiebung um die halbe eigene Hoehe bleibt.
 *
 * Gemessen am 14.09.2026 auf der Produktseite: der Kasten stand bei y=1218,
 * die beiden Knoepfe bei y=1197. Minus und Plus ragten oben aus dem Rahmen
 * und wurden von dessen `overflow:hidden` abgeschnitten — sichtbar war nur
 * der obere Rand der Striche. `margin:0` dazu, damit die Reihe nicht doch
 * wieder auseinanderfaellt.
 */
form.cart .quantity.quantity--number .bde-quantity-button,
.bde-mini-cart-item .quantity.quantity--number .bde-quantity-button{
  position:static;transform:none;margin:0;flex:0 0 44px;width:44px;height:auto;min-height:44px;
  border:0;background:#fff;cursor:pointer;
}
form.cart .quantity.quantity--number .bde-quantity-button:hover,
.bde-mini-cart-item .quantity.quantity--number .bde-quantity-button:hover{background:#f6f7fc}
form.cart .quantity.quantity--number input.qty,
.bde-mini-cart-item .quantity.quantity--number input.qty{
  position:static;transform:none;margin:0;flex:1 1 52px;width:52px;min-width:52px;height:auto;min-height:44px;
  border:0;border-left:1px solid #ececf1;border-right:1px solid #ececf1;
  border-radius:0;text-align:center;font-size:16px;
}
/*
 * Die Montagewahl nimmt die ganze Zeile. `form.cart` ist eine Flex-Reihe
 * mit Umbruch: ohne diese Angabe bekam der Block nur seine Inhaltsbreite
 * (660 statt 810 Pixel) und stand nicht buendig mit dem Kasten darunter.
 */
form.cart .sg-mz{flex:1 1 100%}

/* ---------- KLICKZIELE: mindestens 44x44px auf Handy und Tablet ---------- */
@media (max-width: 1023px){
  /* Kopfzeile: Servicelinks, Menue-Knopf, Suche, Logo */
  .sg-mn-topleiste .bde-text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px}
  .breakdance-menu-toggle.breakdance-menu-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .dgwt-wcas-search-icon.dgwt-wcas-search-icon{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .bde-header-builder a.bde-container-link{min-height:44px;display:inline-flex;align-items:center}

  /* Brotkrumen */
  .woocommerce-breadcrumb a{display:inline-block;padding:13px 2px;line-height:1.2}

  /* Fusszeile */
  .sg-ft-link.sg-ft-link{display:inline-flex;align-items:center;min-height:44px;padding-top:10px;padding-bottom:10px}
  .sg-ft-strong-link.sg-ft-strong-link{display:inline-flex;align-items:center;min-height:44px}
  .sg-ft-legal-link.sg-ft-legal-link{display:inline-flex;align-items:center;min-height:44px;padding-top:10px;padding-bottom:10px}

  /* Produktseite: Mengenwaehler, Info-Knoepfe, Kategorielinks */
  .bde-quantity-button.bde-quantity-button{min-width:44px;min-height:44px}
  .sg-pdt-doc.sg-pdt-doc{min-height:44px}
  .woocommerce a.button.wc-forward{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .woocommerce .product_meta a{display:inline-block;padding:13px 2px;font-size:14px;line-height:1.2}

  /* Warenkorb: Zeile loeschen, Versandkosten */
  .woocommerce a.remove{width:44px;height:44px;line-height:44px;font-size:22px;display:inline-block;text-align:center}
  .woocommerce a.shipping-calculator-button{display:inline-flex;align-items:center;min-height:44px}

  /* Auswahlfelder: der Radioknopf bleibt 24px, seine Beschriftung daneben
     wird zum 44px hohen Klickziel und schaltet dasselbe Feld. */
  .woocommerce ul#shipping_method li{display:flex;align-items:center;gap:10px;min-height:44px}
  .woocommerce ul#shipping_method li input[type=radio]{width:24px;height:24px;flex:0 0 24px;margin:0}
  .woocommerce ul#shipping_method li label{display:flex;align-items:center;min-height:44px;flex:1 1 auto;margin:0;cursor:pointer}
  .woocommerce-checkout .wc_payment_method > input[type=radio]{width:24px;height:24px}
  .woocommerce-checkout .wc_payment_method > label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
  .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
  .woocommerce form .form-row input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin:0}
}