/* =========================================================================
 * DIE TOKENS — Ecken und Linien für den ganzen Shop
 *
 * DER BEFUND (16.09.2026, gemessen über Startseite, Kategorie, Produktseite
 * und Montagepreise): ZWÖLF verschiedene Eckenradien im Einsatz —
 * 4, 6, 7, 8, 9, 10, 11, 12, 14, 16, 500 und 999 Pixel — und SIEBEN kaum
 * unterscheidbare Grautöne für ein und dieselbe Haarlinie.
 *
 * 9 und 10 Pixel standen je 25 mal nebeneinander. Den Unterschied sieht
 * niemand, aber die Summe wirkt unruhig: Kacheln neben Kacheln, die nicht
 * ganz gleich sind.
 *
 * Dazu kam: `var(--sg-radius-m, 8px)` wurde an mehreren Stellen benutzt,
 * aber die Variable war NIRGENDS definiert. Es griff immer der Ersatzwert.
 * Hier steht sie jetzt — an genau einer Stelle, die auf jeder Seite lädt.
 *
 * Die Leiter ist bewusst kurz. Wer eine neue Ecke braucht, nimmt die
 * nächstliegende Stufe statt eines neuen Werts.
 * ==================================================================== */
:root{
  --sg-radius-s:4px;    /* Plättchen, kleine Marken             */
  --sg-radius-m:8px;    /* Knöpfe, Eingabefelder                */
  --sg-radius-l:12px;   /* Karten, Kacheln, Kästen              */
  --sg-radius-xl:16px;  /* grosse Flächen, Passepartout         */
  --sg-radius-pille:999px;

  --sg-linie:#ececf1;   /* Haarlinie, kaum sichtbar — trennt    */
  --sg-rand:#d9d9e0;    /* sichtbarer Rand — fasst ein          */
  --sg-rand-stark:#c9c9d1;
}

/*
 * ZWEI FREMDE ECKEN AUF DIE LEITER.
 *
 * Breakdance rundet sein Klappmenue mit 6 px, FiboSearch sein Suchfeld mit
 * 10 px. Beides steht im Kopf, direkt nebeneinander — und damit standen dort
 * drei verschiedene Rundungen auf einem Bildschirmabschnitt: 6, 8 und 10.
 * Den einzelnen Unterschied sieht niemand, die Summe wirkt unruhig.
 *
 * Nur diese beiden: sie sind gross, sichtbar und sitzen nebeneinander. Die
 * uebrigen fremden Werte (500 px an Breakdance-Pillen, 6 px an
 * Galeriebildern) bleiben unangetastet — 500 px und 999 px sehen an einem
 * kleinen Element ohnehin gleich aus.
 */
.breakdance-dropdown-body{border-radius:var(--sg-radius-m,8px)}
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input{border-radius:var(--sg-radius-m,8px)}

/* =========================================================================
 * Mega-Menue — Aussehen
 *
 * Alle Werte stammen aus der Vermessung von 13 Fachhandels-Menues
 * (Digitec, Galaxus, Fust, MediaMarkt, expert, Otto, Miele, V-ZUG, Quooker,
 * Geberit, Richner, Sabag, Hornbach), nicht aus dem Bauchgefuehl:
 *   Eintrag       14 px / Zeilenhoehe 20 / Gewicht 400   (Median der 13)
 *   Gruppentitel  15 px / Gewicht 600, normale Schreibweise, KEINE Versalien
 *   Zeilensprung  32 px
 *   Spaltenrinne  32 px mit 1 px Haarlinie mittig
 *   Kein Schatten, keine Karten, keine Rundungen im Panel
 *   Farbe an genau drei Stellen: aktive Rubrik, "Gesamtes Sortiment", "Aktionen"
 * ========================================================================= */

/*
 * Sicherung gegen unerreichbare Panels.
 *
 * Ein Aufklappmenue scrollt nicht mit der Seite: was unter dem Fensterrand
 * liegt, ist weg. Am 14.09.2026 ragte auf 1280x800 jedes der sechs Panels
 * hinaus, Quooker um 376px. Die Straffung oben loest den Normalfall — dies
 * hier ist das Netz darunter, falls eine Kategorie spaeter waechst.
 *
 * 210px sind Kopfleiste plus Menuezeile plus etwas Luft.
 */
/* =======================================================================
 * DAS SUCHFELD IM KOPF, AUF TABLET UND HANDY-QUER
 *
 * FiboSearch zeigt unter 1024 Pixeln ein Lupen-Symbol und klappt daraus ein
 * Suchfeld auf. Das Feld steht im Fluss in einem 20 Pixel breiten Behaelter
 * und bekommt von FiboSearch eine feste Breite — auf einem iPhone im
 * Querformat (844 Pixel) waren das 820 Pixel ab Position 569. Gemessen am
 * 15.09.2026: es lief unter dem Warenkorb-Symbol hindurch und 545 Pixel aus
 * dem Bild. Auf dem Bildschirmfoto gut zu sehen.
 *
 * Warum es trotzdem kein Querschieben gab: die Kopfleiste schneidet ab. Der
 * Fehler war also nur sichtbar, nicht messbar — ein Test, der bloss auf
 * seitliches Scrollen prueft, findet ihn nie.
 *
 * Das Feld haengt sich jetzt unter das Symbol und richtet sich nach RECHTS
 * aus, begrenzt auf die Fensterbreite. Damit kann es nicht mehr hinauslaufen,
 * egal welche Breite FiboSearch setzt.
 * ==================================================================== */
@media (max-width:1023px){
  /* `.bde-shortcode-102-635` ist der Behaelter des Tablet-/Handy-Suchfelds in
     der Kopfvorlage (Beitrag 102). Ein Versuch mit `.bde-header` griff nicht —
     diese Klasse gibt es dort nicht. Gemessene Elternkette:
     dgwt-wcas-search-wrapp → bde-shortcode-102-635 → bde-div-102-597. */
  .bde-shortcode-102-635 .dgwt-wcas-search-wrapp{position:relative}
  .bde-shortcode-102-635 .dgwt-wcas-search-wrapp .dgwt-wcas-search-form{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    position:absolute!important;
    width:min(460px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    z-index:60;
  }
}

/* Textlinks am Finger: 44 Pixel Hoehe.
 * Gemessen am 15.09.2026 auf iPhone SE und iPhone 14: die Links im Fuss und
 * in den Textabschnitten waren 22 Pixel hoch — halb so gross wie ein Finger
 * breit ist. Die Schrift bleibt, nur die Flaeche waechst. Gilt nur fuer
 * Bedienung per Finger; mit der Maus zielt man auf 20 Pixel genau. */
/*
 * ZWEI KLASSEN IM SELEKTOR, UND DAS IST ABSICHT.
 *
 * Die Menue-Eintraege stehen ZUSAETZLICH als Breakdance-Selektor in
 * selectors.css. Die Datei laedt NACH dieser hier — bei gleicher Spezifitaet
 * gewinnt sie also immer. Das hat am 21.09.2026 dazu gefuehrt, dass diese
 * Regel hier wirkungslos war: `min-height:44px` aus Breakdance galt auf dem
 * Handy genauso wie auf dem Schreibtisch, und die 48-Pixel-Regel fuer
 * Handys weiter unten galt ueberhaupt nicht.
 *
 * `.sg-mm .sg-mm__link` hat zwei Klassen und schlaegt eine. Wer hier je auf
 * eine Klasse zurueckgeht, verliert die Fingerhoehe wieder — lautlos.
 */
@media (pointer:coarse){
  .bde-f-text-link,
  .bde-text-link,
  .bde-container-link,
  .sg-mm .sg-mm__link,
  .sg-mm .sg-mm__tel,
  .sg-mm .sg-mm__alle,
  .sg-mm .sg-mm__mehr{display:inline-flex;align-items:center;min-height:44px}
}

/* =======================================================================
 * DIE 404-SEITE
 *
 * Sie bestand aus „404", „not found" und einem traurigen Gesicht — englisch,
 * ohne einen einzigen Weg weiter. Gefunden am 15.09.2026.
 *
 * Jetzt steht dort ein deutscher Satz und drei Wege: alle Geräte, die
 * Montagepreise, und uns fragen. Das Suchfeld ist ohnehin im Kopf.
 *
 * Gezielt auf die Klassen, die Breakdance selbst vergibt: freie Namen aus
 * `meta.classes` rendert es nicht — geprüft am 15.09.2026, im HTML standen
 * nur `bde-f-container-7-106` und `bde-f-text-link-7-107` bis `-109`.
 * Die Nummern gehören zur Vorlage 7 und sind stabil.
 * ==================================================================== */
.bde-section-7-100 .section-container{max-width:760px;margin-inline:auto;text-align:center}
.bde-f-container-7-106{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.bde-f-text-link-7-107,
.bde-f-text-link-7-108,
.bde-f-text-link-7-109{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:12px;
  font-weight:600;font-size:15.5px;text-decoration:none;
  transition:background .12s ease,border-color .12s ease}
.bde-f-text-link-7-107{background:var(--hcl-brand-9,#141861);color:#fff}
.bde-f-text-link-7-107:hover{background:#0f1149;color:#fff;text-decoration:none}
.bde-f-text-link-7-108,
.bde-f-text-link-7-109{background:#fff;color:var(--hcl-brand-9,#141861);
  border:1px solid var(--hcl-neutral-6,#d9d9e0)}
.bde-f-text-link-7-108:hover,
.bde-f-text-link-7-109:hover{background:var(--hcl-neutral-2,#f9f9fb);
  border-color:var(--hcl-brand-9,#141861);color:var(--hcl-brand-9,#141861);text-decoration:none}
.bde-f-text-link-7-107:focus-visible,
.bde-f-text-link-7-108:focus-visible,
.bde-f-text-link-7-109:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:3px}

.sg-mm{background:#fff}

/* Der Deckel gehoert an die Aufklappflaeche selbst, nicht an unseren Inhalt.
 * Beim Markenpanel legt Breakdance Polster um den Shortcode — ein Deckel
 * weiter innen misst daran vorbei (gemessen: Inhalt 582px, Flaeche 668px).
 *
 * Nachgemessen am 17.09.2026: das Polster sitzt auf
 * `.breakdance-dropdown-custom-content`, nicht auf `.breakdance-dropdown-body`.
 * Die alte Zeile zielte eine Ebene zu hoch und hat nie gewirkt — deshalb war
 * das Quooker-Panel 84px hoeher als noetig und scrollte auf 13-Zoll-Fenstern.
 * Die Kategorieflaechen haben dieses Polster nicht; nur die drei
 * Markenflaechen (Quooker, Boiler, Enthaertung) sind im Kopf so eingestellt. */
.breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-body,
.breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-body,
.breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-custom-content,
.breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-custom-content{padding:0}
.breakdance-dropdown-floater:has(.sg-mm),
.breakdance-dropdown-floater:has(.sg-mk){
  max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain}

/*
 * AUF DEM HANDY UND DEM TABLET DARF NICHTS GEDECKELT WERDEN.
 *
 * Die Deckelung oben ist fuer das Aufklappmenue am Rechner gedacht: dort
 * haengt das Panel frei im Fenster und darf nicht ueber die Unterkante
 * hinauslaufen. Im eingeklappten Burger-Menue ist die Lage umgekehrt — die
 * Liste steht in einer eigenen Scrollflaeche, und die Deckelung schneidet
 * den Inhalt einfach ab.
 *
 * Gemessen am 17.09.2026 auf 390x844: Rahmen 614 px, Inhalt 1813 px —
 * 1199 px unerreichbar. Von 33 Links unter „Haushaltgeräte" waren 11 zu
 * sehen. Die Liste endete nach „Kaffeemaschinen" mitten in der Ueberschrift
 * „Kühlen und Gefrieren" und sprang zu „Sanitär". Betroffen waren alle
 * sechs Menuepunkte, auf dem Handy und auf dem Tablet (768x1024: 15 von 33).
 *
 * Scrollen half nicht: der Rahmen traegt im Burger-Menue `overflow-y:hidden`
 * (von Breakdance fuer die Aufklapp-Bewegung), unsere `auto`-Regel greift
 * dort nicht durch. Also wird die Deckelung unterhalb von 1024 px ganz
 * aufgehoben — die Menueliste selbst scrollt ohnehin.
 */
@media (max-width:1023px){
  .breakdance-dropdown-floater:has(.sg-mm),
  .breakdance-dropdown-floater:has(.sg-mk){
    max-height:none!important;overflow:visible!important}
  .breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-body,
  .breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-body{
    max-height:none!important;overflow:visible!important}
}
.sg-mm__innen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 280px;
  gap:0;max-width:1406px;margin-inline:auto;padding:20px 20px 16px}

/* Spalten durch Abstand getrennt, nicht durch Striche.
 *
 * Die Haarlinien liefen ueber die volle Hoehe des Panels — auch dort, wo
 * eine Spalte nach sechs Eintraegen zu Ende war. Bei „Haushaltgeräte" stehen
 * elf Eintraege in der ersten und sechs in der zweiten Spalte: vier lange
 * Striche in einer halbleeren Flaeche. Thomas am 14.09.2026: „Mega menu
 * braucht auch noch extrem viel polish! Es muss wirklich clean sein."
 *
 * Ein Strich, der nichts trennt, weil daneben nichts mehr steht, ist Unruhe.
 * Weissraum trennt hier besser — nur die Servicespalte behaelt ihre Linie,
 * weil sie etwas anderes ist als eine Kategorieliste.
 */
.sg-mm__spalte{padding:0 26px 0 0}
/*
 * Der Showroom steht IMMER in der fuenften Spalte — der einzigen mit fester
 * Breite (280px). Ohne diese Zeile rutschte er bei Panels mit weniger als
 * vier Spalten in eine 1fr-Spalte und wurde zu schmal: bei „Sanitär" brach
 * dadurch „Montag – Donnerstag" auf zwei Zeilen um, waehrend bei
 * „Haushaltgeräte" daneben dieselbe Zeile Platz hatte. Zwei Panels, zwei
 * verschiedene Oeffnungszeiten-Bloecke — das sieht aus wie ein Fehler.
 */
.sg-mm__service{grid-column:5;padding:0 0 0 40px}
.sg-mm__spalte:first-child{padding-left:0}

/* Gruppentitel: zwei Zeilen reserviert, damit alle Listen gleich hoch beginnen */
.sg-mm__spalte-titel{display:flex;align-items:flex-start;min-height:38px;margin:0 0 4px;
  font-size:15px;font-weight:600;line-height:1.3;color:var(--hcl-neutral-12,#1c2024)}

.sg-mm__liste{list-style:none;margin:0;padding:0}
.sg-mm__liste li{margin:0}

/* Eintrag: ganze Spaltenbreite klickbar, Balken ragt ueber den Text hinaus */
.sg-mm__link{display:flex;align-items:center;gap:12px;min-height:28px;
  margin:0 -10px;padding:4px 10px;border-radius:4px;
  font-size:14px;line-height:20px;font-weight:400;
  color:var(--hcl-neutral-12,#1c2024);text-decoration:none;
  transition:background-color .12s ease}
.sg-mm__link:hover,.sg-mm__link:focus-visible{background:var(--hcl-neutral-2,#f9f9fb);
  color:var(--hcl-brand-9,#141861);text-decoration:underline;text-underline-offset:3px}
.sg-mm__link:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:-2px}
.sg-mm__name{flex:1 1 auto;min-width:0}

/* Artikelzahlen: standardmaessig aus. Keiner der 13 Referenz-Shops zeigt sie. */
.sg-mm__zahl{display:none}
.sg-mm--zahlen .sg-mm__zahl{display:block;flex:0 0 auto;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--hcl-neutral-11,#60646c)}

/* Showroom rechts — Text, keine Karte */
.sg-mm__adr{margin:0 0 10px;font-size:14px;line-height:22px;color:var(--hcl-neutral-11,#60646c)}
.sg-mm__tel{display:inline-block;margin:0 0 12px;font-size:18px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--hcl-neutral-12,#1c2024);text-decoration:none}
.sg-mm__tel:hover{color:var(--hcl-brand-9,#141861)}
.sg-mm__service .sg-oeffnung__zeile{padding:1px 0;font-size:13px}
.sg-mm__service .sg-oeffnung__tag{color:var(--hcl-neutral-11,#60646c);font-weight:400}
.sg-mm__service .sg-oeffnung__zeit{color:var(--hcl-neutral-12,#1c2024)}
.sg-mm__service .sg-oz-heute{margin:0 0 8px;font-size:13px;flex-wrap:nowrap}
.sg-mm__service .sg-oz-heute__text{flex:1 1 auto;min-width:0}
.sg-mm__mehr{display:inline-block;margin-top:12px;font-size:14px;font-weight:500;
  color:var(--hcl-brand-9,#141861);text-decoration:none}
.sg-mm__mehr:hover{text-decoration:underline;text-underline-offset:3px}

/* Fussband ueber die volle Breite — wie Fust */
.sg-mm__fuss{border-top:1px solid var(--hcl-neutral-6,#d9d9e0);
  background:var(--hcl-neutral-2,#f9f9fb)}
.sg-mm__fuss-innen{display:flex;align-items:center;justify-content:space-between;
  gap:16px;max-width:1406px;margin-inline:auto;padding:0 20px;min-height:50px}
.sg-mm__alle,.sg-mm__aktion{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:500;text-decoration:none}
.sg-mm__alle{color:var(--hcl-brand-9,#141861)}
/*
 * „Aktionen" war das einzige orange Wort im ganzen Menue und stand ohne
 * Bezug in der Ecke — es las sich wie ein Versehen, nicht wie eine
 * Hervorhebung. Als kleines Feld mit hellem Grund ist dieselbe Farbe eine
 * Auszeichnung: man sieht, dass sie gewollt ist.
 */
.sg-mm__aktion{padding:0 12px;border-radius:999px;
  background:var(--sg-accent-hell,#fff4e5);color:var(--sg-accent-dunkel,#b35c00);
  font-weight:600}
.sg-mm__aktion:hover{background:var(--sg-accent,#ff8c00);color:#fff;text-decoration:none}
.sg-mm__alle:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Baureihen: hier ist die Zahl die Auskunft -------------------------- */
.sg-mm__link--reihe{justify-content:space-between}
.sg-mm__link--reihe .sg-mm__zahl{display:inline-block!important;margin-left:auto;padding-left:10px;
  font-size:13px;color:var(--hcl-neutral-11,#60646c);font-variant-numeric:tabular-nums}
.sg-mm__trenner{height:1px;margin:7px 4px;background:var(--hcl-neutral-3,#f0f0f3);list-style:none}

/* --- Geraete aus dem Bereich: eine Reihe unter den Spalten -------------- */
.sg-mm__kachelblock{grid-column:1/-1;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hcl-neutral-3,#ececf1)}
.sg-mm__kachelblock .sg-mm__spalte-titel{min-height:0;margin-bottom:8px;
  font-size:13px;font-weight:600;color:var(--hcl-neutral-11,#60646c)}
.sg-mm__kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sg-mm__kachel{display:flex;align-items:center;gap:10px;min-height:72px;
  padding:8px 10px;border:1px solid var(--hcl-neutral-6,#d9d9e0);border-radius:12px;
  background:#fff;text-decoration:none;
  transition:border-color 120ms ease,background 120ms ease}
.sg-mm__kachel:hover{border-color:var(--hcl-brand-3,#e4e6f5);background:var(--hcl-neutral-2,#f9f9fb)}
.sg-mm__kachel:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:2px}
.sg-mm__kachel-bild{flex:0 0 56px;width:56px;height:56px;object-fit:contain;
  background:#fff;border-radius:4px}
.sg-mm__kachel-tx{min-width:0}
/*
 * Zwei Zeilen fuer den Namen statt Abschneiden.
 *
 * „MIELE Staubsauger Boost CX1 125 Gala…" sagt nicht, um welches Geraet es
 * geht. Zwei Zeilen reichen fuer fast jeden Namen; erst danach wird gekuerzt,
 * damit die drei Kacheln gleich hoch bleiben.
 */
.sg-mm__kachel-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:14px;font-weight:600;line-height:19px;
  color:var(--hcl-neutral-12,#1c2024)}
.sg-mm__kachel-tx span{display:block;font-size:13px;line-height:18px;
  color:var(--hcl-neutral-11,#60646c)}

/* --- So laeuft es bei uns ---------------------------------------------- */
/*
 * Als Band mit runden Ecken, nicht als randlose Leiste: Die beiden
 * Menuebauweisen ([sg_megamenu] und [sg_megamenu_marke]) sitzen in
 * Breakdance-Containern mit unterschiedlichem Innenabstand — gemessen 1364
 * gegen 1254 Pixel. Randlos faellt dieser Unterschied als Fehler auf, als
 * abgesetztes Band liest er sich als Layout.
 */
.sg-mm__ablauf{margin:0 16px 14px;border-radius:12px;
  background:var(--hcl-brand-2,#f2f2fa);
  border:1px solid var(--hcl-brand-3,#e4e6f5)}
.sg-mm__ablauf-innen{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;
  max-width:1406px;margin-inline:auto;padding:12px 18px}
.sg-mm__ablauf-t{margin:0;flex:0 0 auto;font-size:13px;font-weight:700;line-height:20px;
  color:var(--hcl-brand-9,#141861)}
.sg-mm__schritte{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.sg-mm__schritte li{display:flex;align-items:center;gap:9px;min-width:0}
.sg-mm__schritte li::after{content:"";flex:0 0 auto;width:14px;height:1px;
  background:var(--hcl-neutral-6,#d9d9e0);margin-left:2px}
.sg-mm__schritte li:last-child::after{display:none}
.sg-mm__schritt-n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--hcl-brand-9,#141861);color:#fff;font-size:13px;font-weight:700;
  line-height:24px;text-align:center;font-variant-numeric:tabular-nums}
.sg-mm__schritt-tx{min-width:0}
.sg-mm__schritt-tx b{display:block;font-size:14px;font-weight:600;line-height:18px;
  color:var(--hcl-neutral-12,#1c2024)}
.sg-mm__schritt-tx i{display:block;font-style:normal;font-size:12.5px;line-height:17px;
  color:var(--hcl-neutral-11,#60646c)}
.sg-mm__ablauf-tel{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:5px 14px;border-radius:12px;background:#fff;
  border:1px solid var(--hcl-brand-3,#e4e6f5);text-decoration:none;
  transition:border-color 120ms ease}
.sg-mm__ablauf-tel svg{width:19px;height:19px;flex:0 0 auto;stroke:var(--hcl-brand-9,#141861);
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sg-mm__ablauf-tel b{display:block;font-size:15.5px;font-weight:700;line-height:20px;
  color:var(--hcl-brand-9,#141861)}
.sg-mm__ablauf-tel i{display:block;font-style:normal;font-size:12.5px;line-height:17px;
  color:var(--hcl-neutral-11,#60646c)}
.sg-mm__ablauf-tel:hover{border-color:var(--hcl-brand-9,#141861)}
.sg-mm__ablauf-tel:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:2px}

/* --- schmalere Fenster ------------------------------------------------- */
/*
 * DIE GRENZE GEHOERT AUF 1120, NICHT AUF 1101.
 *
 * Breakdance schaltet die Kopfleiste bei genau 1120 Pixeln auf das
 * Klappmenue um — gemessen am 15.09.2026: bei 1119 ist der Hamburger da, bei
 * 1120 nicht mehr. Diese Regel begann aber schon bei 1101.
 *
 * In den 19 Pixeln dazwischen lag das Panel im 340 Pixel schmalen Klappmenue
 * UND bekam drei Spalten: je 97 Pixel breit, also unbrauchbar. Gemessen bei
 * 1110px.
 */
@media (max-width:1279px) and (min-width:1120px){
  .sg-mm__innen{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;padding:22px 16px 18px}
  .sg-mm__service{grid-column:1/-1;margin-top:14px;padding-top:14px;padding-left:0;
    border-left:0;border-top:1px solid var(--hcl-neutral-6,#d9d9e0)}
  .sg-mm__spalte:nth-child(3n+1){border-left:0;padding-left:0}
}
/*
 * EINSPALTIG NUR IM SCHMALEN KLAPP-PANEL — bis 1100 Pixel.
 *
 * ZWEI FEHLER NACHEINANDER, BEIDE HIER:
 *
 * 1. Am 12.09.2026 bei 1024 x 768: Breakdance zeigt dort schon den
 *    Klappknopf, das Panel ist aber nur 400 Pixel breit. Meine
 *    Einspaltigkeit endete bei 1023, also griff im Panel noch das
 *    Drei-Spalten-Raster — 28 Menuenamen liefen ueber ihren Kasten.
 *
 * 2. Die Abhilfe war falsch: die Regel haengte am Panel OHNE
 *    Breitenbedingung. Damit war das Mega-Menue auch bei 1440 Pixeln
 *    einspaltig — eine endlose Liste mit gut 900 Pixeln Leere daneben.
 *    Thomas am 14.09.2026: „Dann das Mega menü scheint kaputt zu sein".
 *
 * Nachgemessen am 14.09.2026 ueber zwoelf Fensterbreiten. Breakdance
 * klappt bei **1100 Pixeln und darunter** zu einem 400-Pixel-Panel
 * (Klappknopf sichtbar); ab 1120 ist das Panel 1073 bis 1357 Pixel breit.
 * Der Schnitt liegt also bei 1100, nicht bei 1023 und nicht „immer".
 */
@media (max-width:1119px){
  .breakdance-dropdown-floater .sg-mm__innen{
    grid-template-columns:minmax(0,1fr)!important;
    padding:8px 16px 12px;
  }
  .breakdance-dropdown-floater .sg-mm__spalte{border-left:0!important;padding-left:0!important}
  .breakdance-dropdown-floater .sg-mm__spalte+.sg-mm__spalte{
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--hcl-neutral-3,#ececf1);
  }
  .breakdance-dropdown-floater .sg-mm__kacheln{grid-template-columns:minmax(0,1fr)}
  .breakdance-dropdown-floater .sg-mm__name{overflow-wrap:anywhere}
  .breakdance-dropdown-floater .sg-mm__service{grid-column:auto}
}

@media (max-width:1023px){
  /* Im Fluss statt schwebend, Fingergroesse statt Mausgroesse. */
  .sg-mm__innen{grid-template-columns:minmax(0,1fr);padding:8px 16px 12px}
  /* Einspaltig gibt es keine fuenfte Spalte — ohne diese Zeile erzwaenge
     `grid-column:5` vier leere Rasterzeilen ueber dem Showroom. */
  .sg-mm__service{grid-column:auto}
  .sg-mm__spalte{border-left:0;padding:0}
  .sg-mm__spalte+.sg-mm__spalte{margin-top:10px;padding-top:10px;
    border-top:1px solid var(--hcl-neutral-3,#ececf1)}
  .sg-mm .sg-mm__spalte-titel{min-height:0;margin-bottom:2px;font-size:14px;
    color:var(--hcl-neutral-11,#60646c)}
  .sg-mm .sg-mm__link{min-height:48px;margin:0;padding:0 4px;font-size:16px;border-radius:0}
  .sg-mm__fuss-innen{flex-direction:column;align-items:stretch;padding:6px 16px}
  .sg-mm__alle,.sg-mm__aktion{min-height:48px;font-size:16px}

  /*
   * Auf dem Handy ist die Klappflaeche eine Liste zum Weiterkommen, keine
   * Auslage. Drei Geraetekacheln machen sie um 320 Pixel laenger, ohne bei
   * der Frage „wo will ich hin" zu helfen — deshalb bleiben sie hier weg.
   */
  .sg-mm__kachelblock{display:none}

  .sg-mm__ablauf-innen{display:block;padding:12px 16px}
  .sg-mm__ablauf-t{margin:0 0 8px}
  .sg-mm__schritte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sg-mm__schritte li::after{display:none}
  .sg-mm__ablauf-tel{display:flex;width:100%;margin-left:0;margin-top:12px;min-height:56px}
}