/* ---------- 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%}

/* ---------------------------------------------------------------------
 * ABSTAND ZWISCHEN DEN KOPFZEILEN-ICONS
 *
 * Breakdance setzt dort `gap:5px` (Handy) bzw. 6.8px (Grossbild). Die
 * Ziele sind aber je 44x44 Pixel gross — zwischen zwei Fingerzielen sind
 * sieben Pixel zu wenig, man trifft das falsche. Gemessen am 03.11.2026.
 *
 * Thomas: „Abstand Icons ist auch sehr schlecht."
 *
 * `:has()` statt der Instanzklasse `.bde-div-102-597`: die Nummer haengt an
 * dieser einen Kopfvorlage und waere nach einem Neubau eine andere. Der
 * Warenkorb im Inneren ist das verlaessliche Merkmal.
 * ------------------------------------------------------------------ */
.bde-header-builder .bde-div:has(> .bde-mini-cart){gap:14px}

/* Fuer Browser ohne :has() — dann greift wenigstens die Instanzklasse. */
.bde-div-102-597{gap:14px}

/* ---------------------------------------------------------------------
 * SERVICELINKS NUR IN DER MENUE-SCHUBLADE
 *
 * Am Telefon war die Serviceleiste 0 Pixel hoch: Ratgeber, Montagepreise,
 * Bestellstatus, Kontakt, Team, Newsletter und Anmelden standen im HTML,
 * aber unsichtbar. Oeffnungszeiten gab es dort gar nicht. Wer unterwegs
 * anrufen oder nachsehen wollte, ob offen ist, musste bis in die
 * Fusszeile scrollen.
 *
 * Thomas: „im mobilen Menu muessen wir irgendwie auch noch Kontakt usw
 * einbauen."
 *
 * Vier Eintraege sind dafuer in die Menueleiste gekommen (Post 102):
 * die Telefonnummer ganz oben, dann Oeffnungszeiten, Kontakt,
 * Bestellstatus. Nicht alle acht — in der Schublade stehen schon neun
 * Sortimentspunkte, und Ratgeber oder Newsletter sucht am Telefon
 * niemand unterwegs.
 *
 * Auf dem Grossbild haben sie nichts verloren: dort traegt die
 * Serviceleiste sie bereits, und die Menueleiste soll ihre neun Punkte
 * behalten.
 *
 * Zielt auf die ADRESSE, nicht auf die Instanznummer — die waere nach
 * einem Neubau der Vorlage eine andere.
 * ------------------------------------------------------------------ */
@media (min-width:1024px){
  .breakdance-menu-list > li:has(> a[href^="tel:"]),
  .breakdance-menu-list > li:has(> a[href*="/oeffnungszeiten/"]),
  .breakdance-menu-list > li:has(> a[href*="/kontakt/"]),
  .breakdance-menu-list > li:has(> a[href*="/bestellstatus/"]){display:none!important}
}

/* ---------------------------------------------------------------------
 * DIE TELEFONNUMMER IST DIE WICHTIGSTE HANDLUNG AM TELEFON
 *
 * Sanigroup beraet, liefert und montiert selbst — wer unterwegs etwas
 * wissen will, ruft an. Darum steht die Nummer ganz oben in der
 * Schublade und sieht anders aus als die Sortimentspunkte darunter:
 * Markenfarbe, halbfett, leicht getoent. Kein Knopf — es bleibt ein
 * Menueeintrag, nur einer, den man zuerst sieht.
 *
 * Oeffnungszeiten steht als eigener Punkt daneben, weil „haben die noch
 * offen" und „ich rufe an" zwei verschiedene Fragen sind.
 * ------------------------------------------------------------------ */
@media (max-width:1023px){
  .breakdance-menu-list > li:has(> a[href^="tel:"]) > a{
    color:var(--hcl-brand-9,#141861)!important;
    font-weight:600!important;
    background:var(--hcl-brand-2,#f2f2fa)}
}

/* ---------- 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}
  /*
   * DIE HUELLE MUSS MITWACHSEN, SONST RAGT DAS ICON HERAUS.
   *
   * `min-width:44px` macht aus dem Lupensymbol ein Fingerziel — aber nur
   * das Symbol. Seine Huellen blieben bei 20 bzw. 30 Pixeln stehen, und
   * das 44 Pixel breite Icon ragte 14 Pixel nach rechts heraus: genau bis
   * an das Konto-Icon. Gemessen am 03.11.2026 bei 390px — Suche 205..249,
   * Konto 249..293. Die Luecke war NULL, waehrend Konto->Warenkorb 14 hatte.
   *
   * Thomas: „die Abstaende von Suche, Konto und Warenkorb sind immer noch
   * nicht gleichmaessig." Die Abstaende der Huellen waren es; der sichtbare
   * Abstand nicht, weil eine Huelle ihren Inhalt nicht umschloss.
   */
  .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 .dgwt-wcas-search-wrapp:has(> .dgwt-wcas-search-icon),
  .bde-header-builder .bde-shortcode:has(.dgwt-wcas-search-icon){
    width:auto!important;min-width:44px;flex:0 0 auto}

  /* ---------------------------------------------------------------------
   * ZWEITE KOPFZEILE AM TELEFON: HAMBURGER LINKS, SUCHFELD DANEBEN
   *
   * Vorher stand der Menue-Knopf allein und mittig auf einem 52-Pixel-Band,
   * und die Suche war ein Lupensymbol, das sich in Zeile 1 zwischen Konto
   * und Warenkorb draengte. Thomas mit einem Bild von fust.ch: „schau fust
   * macht es so … das wuerde schon Sinn machen auch mit der Suche!"
   *
   * Dafuer wurde in der Kopfvorlage (Post 102) ein zweites [fibosearch] als
   * Element 980 in die zweite Zeile gesetzt. Die Sichtbarkeit steht hier und
   * nicht in der Vorlage: `hide_on_breakpoint` laesst sich ueber edit-post
   * nicht setzen — die Elementpruefung weist es ab, obwohl Breakdance es
   * selbst so speichert.
   *
   * Die Selektoren zielen auf die STRUKTUR, nicht auf die Instanznummern:
   * die Kopfzeile mit dem Menue, darin die Suche. Die Nummern stehen als
   * Rueckfall daneben — nach einem Neubau der Vorlage waeren sie andere.
   * ------------------------------------------------------------------ */
  /*
   * `flex-direction:row` MUSS hier stehen.
   *
   * Die Kopfzeile hat in der Vorlage `stack_vertically_at: breakpoint_base`
   * — sie ist auf JEDER Breite eine Spalte. Ohne das Umstellen stapelten
   * sich Hamburger und Suchfeld untereinander, und mein `justify-content`
   * wirkte auf die senkrechte Achse statt auf die waagrechte. Zu sehen war
   * das erst im Bild: drei Baender statt zwei.
   */
  .bde-header-builder:has(.breakdance-menu) .bde-header-builder__container{
    flex-direction:row;flex-wrap:nowrap;align-items:center;
    justify-content:flex-start;gap:12px}
  .bde-header-builder:has(.breakdance-menu) .bde-header-builder__container > *{
    width:auto}
  .bde-header-builder:has(.breakdance-menu) .breakdance-menu{flex:0 0 auto}
  .bde-header-builder:has(.breakdance-menu) .bde-shortcode:has(.dgwt-wcas-search-wrapp),
  .bde-shortcode-102-980{flex:1 1 auto;min-width:0}
  /*
   * Huelle UND Formular muessen schrumpfen duerfen.
   *
   * Die Huelle gehorchte sofort (299px, endete bei 365 im 375 breiten
   * Band) — das Formular darin blieb bei 366px und lief bis 432, also
   * 67 Pixel aus dem Fenster. FiboSearch gibt ihm eine Mindestbreite fuer
   * den Grossbild-Einsatz; `min-width:0` loest die Flex-Sperre, die ein
   * Kind sonst nicht unter seine Inhaltsbreite schrumpfen laesst.
   */
  .bde-header-builder:has(.breakdance-menu) .bde-shortcode .dgwt-wcas-search-wrapp,
  .bde-shortcode-102-980 .dgwt-wcas-search-wrapp{width:100%!important;max-width:none;min-width:0}
  .bde-header-builder:has(.breakdance-menu) .dgwt-wcas-search-form,
  .bde-shortcode-102-980 .dgwt-wcas-search-form{
    width:100%!important;max-width:100%!important;min-width:0!important}
  .bde-header-builder:has(.breakdance-menu) .dgwt-wcas-search-input,
  .bde-shortcode-102-980 .dgwt-wcas-search-input{
    width:100%!important;min-width:0!important}

  /* ---------------------------------------------------------------------
   * EIN KOPF, NICHT ZWEI BAENDER — UND KOMPAKTER
   *
   * Thomas: „Es sieht wie separat aus. Und es muss kompakter sein."
   *
   * Gemessen bei 390px, warum es getrennt wirkte: Zeile 1 weiss
   * (255,255,255), Zeile 2 getoent (242,242,250). Zwei Farben, zwei
   * Baender. Am Grossbild ist die Toenung richtig — dort traegt sie das
   * Mega-Menue und grenzt es ab. Am Telefon gibt es kein Mega-Menue,
   * also auch keinen Grund fuer die Trennlinie.
   *
   * Und wo die Hoehe sass: das Suchfeld bringt FiboSearch mit 68 Pixeln
   * mit — das ist sein Grossbild-Mass. Daneben steht ein 44 Pixel hoher
   * Hamburger, und die hoehere der beiden bestimmt das Band. Auf 44
   * gebracht sind beide gleich hoch und das Band schrumpft von 76 auf 52.
   *
   * 54 + 52 = 106 Pixel — genau so viel wie vor dem Umbau, aber mit einem
   * benutzbaren Suchfeld statt eines versteckten Lupensymbols.
   * ------------------------------------------------------------------ */
  .bde-header-builder:has(.breakdance-menu){background:#fff!important}
  .bde-header-builder:has(.breakdance-menu) .bde-header-builder__container{
    padding-top:4px;padding-bottom:4px}

  /*
   * NUR das Eingabefeld bekommt die Hoehe, nicht Formular und Lupe.
   *
   * Erster Versuch setzte `height:44px` auf alle drei. Ergebnis gemessen:
   * Formular bei y=58, Eingabefeld bei 68, Lupe bei 79 — sie stapelten
   * sich, statt uebereinanderzuliegen. FiboSearch legt die Lupe im
   * Formular ab und erwartet, dass dieses sich nach dem Feld richtet.
   * Wer dem Formular eine feste Hoehe gibt, nimmt ihm den Bezug.
   */
  .bde-header-builder:has(.breakdance-menu) .dgwt-wcas-search-input,
  .bde-shortcode-102-980 .dgwt-wcas-search-input{
    height:44px!important;min-height:44px}

  /*
   * Das Polster des Formulars weg — nicht seine Hoehe setzen.
   *
   * Nach dem Verkleinern des Feldes auf 44 blieb das Formular 64 hoch:
   * zehn Pixel Polster oben und unten. Das Polster zu entfernen laesst
   * das Formular dem Feld folgen und nimmt dem Kopf 20 Pixel, ohne den
   * Bezug zu zerstoeren, an dem die Lupe haengt.
   */
  .bde-header-builder:has(.breakdance-menu) .dgwt-wcas-search-form,
  .bde-shortcode-102-980 .dgwt-wcas-search-form{padding-top:0;padding-bottom:0}

  /* Eine Linie unter dem GANZEN Kopf statt einer Kante mittendrin. */
  .bde-header-builder:has(.breakdance-menu){border-bottom:1px solid var(--hcl-neutral-6,#e4e6f5)}
}

/*
 * Das alte Lupensymbol in Zeile 1 (Element 635) ist am 03.11.2026 aus der
 * Kopfvorlage GELOESCHT, nicht nur ausgeblendet: ausgeblendet wurde es
 * weiter auf jeder Seite mitgeliefert. Auf der Startseite standen dadurch
 * drei Suchformulare im HTML, von denen eines nie sichtbar war.
 */

/* Und in der Breite gibt es die zweite Suche nicht — dort steht das Menue. */
@media (min-width:1024px){
  .bde-header-builder:has(.breakdance-menu) .bde-shortcode:has(.dgwt-wcas-search-wrapp),
  .bde-shortcode-102-980{display:none!important}
}

/* ---------------------------------------------------------------------
 * HIER GEHT DER HANDY-BLOCK WEITER — die @media-Falle, zum zweiten Mal.
 *
 * Beim Einfuegen des Blocks oben habe ich den Handy-Block zu frueh
 * geschlossen. Alles, was danach kam, fiel damit in `min-width:1024px`
 * und galt nur noch auf dem Grossbild: die Logo-Zentrierung, die
 * Brotkrumen-Fingerziele, die Fusszeilen-Ziele, die Produktseiten-Ziele.
 *
 * Gemerkt hat es niemand, weil nichts kaputtging — es wirkte bloss nicht
 * mehr. Thomas sah es: „Logo und Icons sind wieder nicht zentriert."
 *
 * Steht als Lehre schon im Projekt-Gedaechtnis (CSS-@media-Falle). Wer
 * hier etwas einfuegt, zaehlt vorher die Klammern.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px){
  /*
   * `justify-content` MUSS hier stehen, nicht nur `align-items`.
   *
   * Breakdance ordnet diesen Link als SPALTE an (flex-direction:column).
   * In einer Spalte regelt `align-items` die WAAGRECHTE Lage — senkrecht
   * ist `justify-content` zustaendig, und das stand auf `normal`, also oben.
   * Zusammen mit dem `min-height:44px`, das ich fuer das Fingerziel
   * hinzugefuegt habe, fiel das Logo an den oberen Rand.
   *
   * Thomas am 03.11.2026: „Logo und Icons sind nicht sauber zentriert."
   * Nachgemessen bei 390px: Logo-Mitte bei 15.8, Icon-Mitte bei 27.0 —
   * 11,2 Pixel Versatz. Der Fehler war meiner: die Mindesthoehe ohne die
   * passende Ausrichtung.
   */
  .bde-header-builder a.bde-container-link{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}

  /*
   * EIN LOGO, EINE GROESSE — auch in der Menue-Schublade.
   *
   * Breakdance haelt zwei getrennte Logos: eines im Kopf (Element 593) und
   * eines in der Kopfzeile der Menue-Schublade (mobile_menu.top_bar.logo).
   * Beide zeigen dieselbe Datei, aber in unterschiedlicher Groesse —
   * gemessen am 03.11.2026 bei 390px: Kopf 96x22, Schublade 110x25. Das
   * sind 14 Prozent Unterschied, und man sieht sie beim Oeffnen.
   *
   * Thomas: „Logo Groesse bei Menu und Logo Groesse bei Header beides im
   * Mobile sind nicht gleich gross."
   *
   * Beide auf 22 Pixel Hoehe. Die Breite folgt dem Seitenverhaeltnis
   * (300:68 in der Datei), damit nichts verzerrt.
   */
  .bde-header-builder a.bde-container-link img,
  .breakdance-menu-topbar-logo img{
    height:22px!important;width:auto!important;max-width:none!important}

  /* 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}
}