/* =====================================================================
   ligno-Prototyp: globale Feinschliff-Styles
   1. Luecke (blauer Streifen) zwischen Header und Inhalt entfernen
   2. Ruhiges Dropdown-Verhalten im Hauptmenue (Steuerung per JS/is-open)
   ===================================================================== */

/* --- 1. Keine Luecke zwischen Header und Inhalt, einheitlicher Hintergrund --- */
html, body{background:#fff !important;}
header.header, header.header .header-wrapper, #wrapper, .wrapper, main.content{
  background:#fff !important;box-shadow:none !important;
}
header.header{margin-bottom:0 !important;padding-bottom:0 !important;}
header.header .header-wrapper{margin-bottom:0 !important;padding-bottom:0 !important;}
header.header .header-box{padding-top:.7rem !important;padding-bottom:.45rem !important;}
#mainnav, .navbar-mega, header.header nav{
  margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important;
  box-shadow:none !important;background:transparent !important;
  border-top:1px solid #ececec;border-bottom:1px solid #ececec;border-radius:0 !important;
}
#mainnav .navbar-collapse, #mainnav .navbar-nav-mega,
#mainnav #navigation, #mainnav .nav-item, #mainnav .row{
  background:transparent !important;box-shadow:none !important;
  border:0 !important;border-radius:0 !important;
  padding:0 !important;margin:0 !important;
}
#wrapper, .wrapper{margin-top:0 !important;padding-top:0 !important;}
main.content{padding-top:.3rem;}

/* --- 1a. Header-Inhalte auf Inhaltsbreite (--wave-container = 1170px) --- */
header.header .container-xxl{
  max-width:var(--wave-container, 1170px) !important;
  margin-left:auto !important;margin-right:auto !important;
  width:auto !important;
}

/* --- 1b. Hauptmenue in EINER Zeile (wie Altshop) --- */
@media (min-width: 992px){
  #mainnav .navbar-nav-mega{
    display:flex !important;flex-wrap:nowrap !important;
    justify-content:space-between;align-items:center;width:100%;
  }
  #mainnav .nav-item{flex:0 0 auto;}
  /* Dropdown-Pfeil entfernt (wackelte durch Theme-Hover-Regeln) - Userwunsch */
  #mainnav .has-subs > .nav-link-1::after,
  #mainnav .has-subs > .nav-link-1::before{display:none !important;content:none !important;}
  #mainnav .has-subs > .nav-link-1 .caret{display:none !important;}
  #mainnav .nav-item{white-space:nowrap !important;}
  #mainnav .nav-link-1{
    white-space:nowrap !important;
    /* atmende Schriftgroesse: laesst immer Reserve, nichts kippt ueber die Kante */
    font-size:clamp(.78rem, .55vw + .45rem, .93rem) !important;
    padding:.4rem .25rem !important;
    margin:0 !important; /* Theme gab jedem Punkt 64px Rechtsabstand -> Ueberlauf */
  }
}

/* --- 2. Dropdown nur per JS-Klasse, nicht per nervoesem Sofort-Hover --- */
#mainnav .has-subs .nav-level-2{display:none !important;}
#mainnav .has-subs.is-open .nav-level-2{
  display:block !important;
  position:absolute;z-index:1050;background:#fff;
  border:1px solid #e3e6e3;border-radius:0 0 8px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  min-width:220px;padding:.4rem 0;
}
#mainnav .has-subs{position:relative;}
#mainnav .has-subs.is-open > .nav-link-1{color:#d4001a;}
#mainnav .nav-level-2 .nav-item-2 a{
  display:block;padding:.45rem 1.1rem;color:#41484a;text-decoration:none;font-size:.95rem;
}
#mainnav .nav-level-2 .nav-item-2 a:hover{background:#f6f7f5;color:#d4001a;}

/* Brotkrume dichter ans Menue */
.list-alt-breadcrumb{margin-bottom:.6rem !important;}

/* --- 3. Mobil: aufgeklapptes Menue braucht wieder festen Grund --- */
@media (max-width:991.98px){
  #mainnav .navbar-collapse{
    background:#fff !important;
    padding:.5rem 1rem 1rem !important;
    border-bottom:1px solid #e3e6e3 !important;
    box-shadow:0 10px 20px rgba(0,0,0,.15) !important;
  }
  #mainnav .nav-item{padding:.1rem 0 !important;white-space:normal !important;}
  #mainnav .nav-link-1{display:block;padding:.55rem .2rem !important;font-size:1rem !important;}
  #mainnav .has-subs .nav-level-2{position:static;box-shadow:none;border:0;padding-left:1rem;}
}

/* --- 4. Mobil: untere Leiste im ligno-Stil (Position unten = bewusste Entscheidung) --- */
@media (min-width:992px){
  .mobile-nav{display:none !important;} /* Desktop: Leiste strikt aus */
}
@media (max-width:991.98px){
  .mobile-nav{
    background:#fff !important;border-top:1px solid #d8dbd8 !important;
    box-shadow:0 -5px 16px rgba(0,0,0,.12) !important;
    display:flex !important;justify-content:space-around;align-items:center;
    padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-nav .btn, .mobile-nav .btn:focus, .mobile-nav .btn:active,
  .mobile-nav .btn:hover, .mobile-nav .btn:not(.collapsed){
    color:#2c3133 !important;background:transparent !important;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:.15rem .5rem !important;border:0 !important;box-shadow:none !important;
  }
  .mobile-nav .btn svg{width:23px;height:23px;fill:#2c3133 !important;}
  .mobile-nav .btn .btn-text{font-size:.72rem;font-weight:500;color:inherit !important;line-height:1;}
  .mobile-nav .btn[aria-expanded="true"], .mobile-nav .btn[aria-expanded="true"] svg{color:#d4001a !important;fill:#d4001a !important;}
  .mobile-nav .badge{background:#d4001a !important;color:#fff !important;font-size:.62rem;}
}

/* Logo: nie verzerren, saubere Maximalgroesse */
header.header .logo-img{width:auto !important;height:auto !important;max-height:52px;max-width:170px;object-fit:contain;}

/* --- 5. Kopfzeile: Textlinks, Anmelden-Beschriftung, sichtbare Lupe, feiner Banner --- */
.header-textlinks{display:flex;align-items:center;gap:1.2rem;margin-left:auto;}
.header-textlinks a{color:#41484a;text-decoration:none;font-size:.9rem;white-space:nowrap;}
.header-textlinks a:hover{color:#d4001a;}

/* "Anmelden" neben dem Konto-Icon (Text kommt per CSS, Icon-Knopf ist Widget) */
.menu-dropdowns > button.btn:first-of-type::after{
  content:"Anmelden";margin-left:.3rem;font-size:.95rem;color:#41484a;
}
.menu-dropdowns > button.btn:first-of-type:hover::after{color:#d4001a;}

/* Lupe im Suchfeld sichtbar machen (war weiss auf weiss) */
.header-container .input-group .btn{
  color:#d4001a !important;background:#fff !important;
  border:1px solid #ced4da !important;border-left:0 !important;
}
.header-container .input-group .btn svg,
.header-container .input-group .btn svg path{width:17px;height:17px;fill:#d4001a !important;}
.header-container .input-group .btn:hover{color:#a80016 !important;}

/* Rabatt-Banner: rot bleibt, aber feiner statt fett */
header .header-toprow b, header .header-toprow strong{font-weight:400 !important;}
header .header-toprow{font-size:.92rem;}

/* --- 6. Schriften Inter (Text) + Outfit (Ueberschriften) - lokal gehostet, DSGVO-sicher --- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/outfit-latin-700-normal.woff2") format("woff2");}

body{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif !important;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{font-family:"Outfit","Inter",sans-serif !important;}

/* --- 7. Leerer Mini-Warenkorb: freundlicher Wagen statt Schulterzuck-Emoji --- */
.minibasket-empty svg{margin-bottom:.5rem;}
.minibasket-empty__title{color:#41484a;}
.minibasket-empty__hint{font-size:.85rem;color:#8a908e;margin-top:.25rem;}

/* --- 8. Knoepfe: weiss-auf-weiss-Faelle (Theme-Fehler in Normal- und Hover-Zustand) --- */
.btn-outline-primary{
  color:#d4001a !important;border-color:#d4001a !important;background:#fff !important;
}
/* --- 8b. Knoepfe: Hover war weiss-auf-weiss (Theme setzt Textfarbe weiss ohne roten Grund) --- */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{
  background:#d4001a !important;border-color:#d4001a !important;color:#fff !important;
}
/* Ausnahme: die Icon-Knoepfe der Kopfzeile und die mobile Leiste bleiben wie sie sind */
.menu-dropdowns > .btn:hover, .mobile-nav .btn:hover{background:transparent !important;color:#2c3133 !important;}

/* --- 9. Theme-Unterstreichungslinien dort entfernen, wo sie stoeren --- */
.start-alt .hero__box h2{border:0 !important;padding-bottom:0 !important;}
.start-alt .hero__box h2::before, .start-alt .hero__box h2::after{content:none !important;display:none !important;}
.list-alt .cat-tree__head::before, .list-alt .cat-tree__head::after{border:0 !important;background:none !important;}
h1::after, h2::after{background:none;}

/* --- 10. WURZEL-FIX: Theme setzt global a:hover auf WEISS (styles.min.css "a:hover,a:focus{color:#fff}")
   -> Ursache aller "weisse Links"-Faelle (Brotkrume, Login, FAQ, Warenkorb ...).
   Gleiche Spezifitaet, spaeter geladen = wir gewinnen; Knoepfe/Menues mit eigenen
   Klassenregeln (rot/weiss auf rotem Grund) bleiben unberuehrt. --- */
a:hover, a:focus{color:#a80016;}

/* --- 11. (ersetzt durch 25: Suchfeld ist mobil jetzt dauerhaft sichtbar) --- */

/* --- 12. Rabatt-Banner mobil: wichtig, aber leiser --- */
@media (max-width:991.98px){
  header .header-toprow{font-size:.74rem !important;line-height:1.35 !important;padding:.25rem .75rem !important;}
}

/* --- 13. Untere Leiste: praesenter (heller Grauton statt Weiss-in-Weiss) --- */
@media (max-width:991.98px){
  .mobile-nav{
    background:#f7f8f6 !important;
    border-top:2px solid #d8dbd8 !important;
    box-shadow:0 -6px 18px rgba(0,0,0,.14) !important;
  }
}

/* --- 14. LINIEN-FIX: #mainnav liegt mobil unsichtbar UEBER dem Inhalt (position:absolute);
   unsere Desktop-Trennlinien malten dort den mysterioesen Strich uebers Banner. --- */
@media (max-width:991.98px){
  #mainnav, .navbar-mega, header.header nav{border-top:0 !important;border-bottom:0 !important;}
}

/* --- 15. Suchfeld: ein sauberer roter Fokusrahmen um das GANZE Feld inkl. Lupe --- */
.header-container .form-control:focus, #searchForm .form-control:focus{
  outline:0 !important;box-shadow:none !important;border-color:#d4001a !important;
}
.header-container .input-group:focus-within .btn, #searchForm .input-group:focus-within .btn{
  border-color:#d4001a !important;
}
.header-container .input-group:focus-within, #searchForm .input-group:focus-within{
  box-shadow:0 0 0 3px rgba(212,0,26,.10);border-radius:8px;
}

/* --- 16. Footer: Social-Icons dezent (da sein, nicht auffallen - Userwunsch) --- */
footer a.btn.btn-primary, .footer a.btn.btn-primary{
  background:transparent !important;border:1px solid #c9cec9 !important;
}
footer a.btn.btn-primary svg, .footer a.btn.btn-primary svg{fill:#8a908e !important;}
footer a.btn.btn-primary:hover, .footer a.btn.btn-primary:hover{
  background:transparent !important;border-color:#d4001a !important;
}
footer a.btn.btn-primary:hover svg, .footer a.btn.btn-primary:hover svg{fill:#d4001a !important;}

/* --- 17. Footer: heller, ruhiger Abschluss (eine Flaeche, flach, Rot nur als Akzent) --- */
footer, .footer{background:#f7f8f6 !important;color:#41484a !important;border:0 !important;box-shadow:none !important;border-top:1px solid #e3e6e3 !important;margin-top:2.5rem;}
footer .h4, footer h4, footer h5, footer .h5, footer .footer-box-title{
  color:#2c3133 !important;font-size:.88rem !important;letter-spacing:.06em;text-transform:uppercase;
}
footer a{color:#5d6462 !important;text-decoration:none;}
footer a:hover{color:#d4001a !important;}
footer .badge{background:#d4001a !important;color:#fff !important;}

/* Newsletter */
footer input.form-control{background:#fff !important;border:1px solid #d8dbd8 !important;color:#2c3133 !important;}
footer input.form-control::placeholder{color:#9aa09e !important;}
footer button[type="submit"]{background:#fff !important;border:1px solid #d4001a !important;color:#d4001a !important;}
footer button[type="submit"]:hover{background:#d4001a !important;color:#fff !important;}

/* Social-Icons: dezente graue Umrisse (wie gehabt) */
footer a.btn.btn-primary, .footer a.btn.btn-primary{background:transparent !important;border:1px solid #c9cec9 !important;}
footer a.btn.btn-primary svg, .footer a.btn.btn-primary svg{fill:#8a908e !important;}
footer a.btn.btn-primary:hover{border-color:#d4001a !important;background:transparent !important;}
footer a.btn.btn-primary:hover svg{fill:#d4001a !important;}

/* MwSt-Zeile + SEO-Block: leicht abgesetzte, integrierte Zone */
footer .vat-info-text{color:#8a908e !important;font-size:.82rem;}
footer .legal, .legal{background:#eff1ee !important;color:#6a716f !important;font-size:.85rem;border:0 !important;}
footer .legal a, .legal a{color:#5d6462 !important;}
footer .legal a:hover, .legal a:hover{color:#d4001a !important;}

/* Wunschzettel-Links im Footer ausblenden (Funktion bewusst nicht angeboten) */
footer li:has(a[href*="wishlist"]), footer li:has(a[href*="unschzettel"]){display:none !important;}
footer a[href*="wishlist"], footer a[href*="unschzettel"]{display:none !important;}

/* --- 18. Meta-Zeile sichtbar machen (Theme versteckt sie mit display:none) -
   dort wohnen Magazin / Kundenservice / Hilfe --- */
header.header .meta{display:block !important;background:#fff !important;}
header.header .meta .meta-wrapper{padding:.4rem 0 .1rem;min-height:1.6rem;}

/* --- 19. Mobil-Kopf kompakt (IKEA-Muster): eine schlanke Zeile -
   Logo links, rechts Lupe / Konto / Favoriten / Warenkorb / Burger.
   Die untere fixe Leiste entfaellt komplett.
   Theme-Stolpersteine: .logo-link bekommt mobil width:50%, das Logo-Bild
   wird per Auto-Margin zentriert - beides muss ueberschrieben werden,
   sonst rutschen die Icons in eine zweite Zeile. --- */
.header-mobileactions{display:none;}
@media (max-width:991.98px){
  /* leere Zeilen weg */
  header.header .meta{display:none !important;}
  body.cl-start header .header-toprow{display:none !important;} /* Rabatt-Satz nur auf der Startseite mobil raus */

  header.header .header-box{padding:.3rem 0 .25rem !important;}
  header.header .header-container{
    display:flex !important;flex-wrap:wrap;align-items:center;justify-content:flex-start !important;
    padding:0 .7rem;gap:0;
  }
  header.header .logo-link{margin:0 auto 0 0 !important;width:auto !important;flex:0 0 auto;justify-content:flex-start;}
  header.header .logo-img{max-height:38px !important;margin:0 !important;}
  /* aufgeklapptes Suchfeld rutscht unter die Zeile */
  header.header #searchForm{order:99;flex-basis:100%;}

  /* Icon-Gruppe rechts */
  .header-mobileactions{display:flex !important;align-items:center;}
  .header-mobileactions .btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:44px;padding:0 !important;border:0 !important;
    background:transparent !important;box-shadow:none !important;
    color:#2c3133;position:relative;
  }
  .header-mobileactions .btn svg{width:22px;height:22px;fill:#2c3133;}
  .header-mobileactions .btn .btn-text{display:none !important;}
  .header-mobileactions .badge{
    position:absolute;top:3px;right:1px;background:#d4001a !important;color:#fff;
    font-size:.58rem;line-height:1;padding:.14rem .28rem;border-radius:.5rem;
  }
  .header-mobileactions .btn[aria-expanded="true"] svg{fill:#d4001a;}
  .header-mobileactions .btn[aria-expanded="true"]{color:#d4001a;}

  /* untere fixe Leiste weg + reservierten Platz freigeben */
  .mobile-nav{display:none !important;}
  body{padding-bottom:0 !important;}
}

/* --- 20. Mobile Bildergalerie (Artikelseite): Wischen + Punkte ---
   Die Theme-Galerie wechselt Bilder nur ueber die Thumbnails (CSS-Radio-Trick) -
   mobil sind die Thumbnails aber versteckt, es gab also KEINEN Bildwechsel,
   und das Nachbarbild ragte rechts ins Bild (kein overflow:hidden).
   Mobil wird die Bildleiste zum nativen Scroll-Snap-Slider (Wischgeste),
   ligno_fixes.js baut die Punkte darunter. Desktop bleibt unveraendert. --- */
.ligno-gallery-bar{display:none;}
@media (max-width:991.98px){
  .gallery .carousel{overflow:hidden;}
  .gallery .carousel .wrap{
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    transform:none !important;transition:none !important;scrollbar-width:none;
  }
  .gallery .carousel .wrap::-webkit-scrollbar{display:none;}
  .gallery .carousel .wrap figure{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;}

  .ligno-gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .1rem .15rem;}
  .ligno-gallery-count{font-size:.85rem;font-weight:600;color:#41484a;min-width:2.2rem;}
  .ligno-gallery-dots{display:flex;justify-content:center;gap:.45rem;flex:1;}
  .ligno-gallery-arrows{display:flex;gap:.45rem;}
  .ligno-gallery-arrows button{
    width:36px;height:36px;border-radius:50%;padding:0;background:#fff;
    border:1px solid #c9cecb;color:#41484a;font-size:1.5rem;line-height:32px;text-align:center;
  }
  .ligno-gallery-arrows button:active{border-color:#d4001a;color:#d4001a;}
  .ligno-gallery-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#d4d8d6;}
  .ligno-gallery-dots button.is-active{background:#d4001a;}
}

/* --- 21. Breadcrumb mobil: eine Zeile, seitlich wischbar ---
   Tiefe Kategoriepfade wickeln sich mobil auf 2-3 Zeilen. Stattdessen:
   kein Umbruch, horizontales Wischen (Scrollbar versteckt). Der Anfang
   (Haus) bleibt sichtbar; ein Ausblenden am rechten Rand zeigt, dass der
   Pfad weitergeht. Gilt fuer .breadcrumb (Theme) und .list-alt-breadcrumb. --- */
@media (max-width:991.98px){
  .breadcrumb, .list-alt-breadcrumb{
    display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .breadcrumb::-webkit-scrollbar, .list-alt-breadcrumb::-webkit-scrollbar{display:none;}
  .breadcrumb li, .breadcrumb .breadcrumb-item,
  .list-alt-breadcrumb a, .list-alt-breadcrumb span{white-space:nowrap;flex:0 0 auto;}
  .breadcrumb, .list-alt-breadcrumb{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
}

/* --- 22. Hinweistext oben (header_top) mobil: eine Zeile, antippen klappt auf ---
   Der CMS-Baustein header_top (roter Rabatt-/Hinweistext) braucht mobil bis zu
   3 Zeilen. Mobil wird er auf eine Zeile gekuerzt (Pfeil zeigt: da ist mehr),
   ein Tipp darauf klappt den ganzen Text auf. Desktop unveraendert. --- */
@media (max-width:991.98px){
  header.header .header-toprow{cursor:pointer;position:relative;}
  header.header .header-toprow .col-xs-12{padding-right:1.4rem;}
  header.header .header-toprow:not(.is-open) .col-xs-12{
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }
  header.header .header-toprow p{margin:0;font-size:.74rem;line-height:1.35;}
  header.header .header-toprow::after{
    content:"";position:absolute;right:.55rem;top:.45em;
    width:.5rem;height:.5rem;border-right:1.5px solid #a80016;border-bottom:1.5px solid #a80016;
    transform:rotate(45deg);transition:transform .2s;
  }
  header.header .header-toprow.is-open::after{transform:rotate(225deg);top:.7em;}
}

/* --- 23. #mainnav schluckt mobil alle Beruehrungen unter dem Header ---
   Das Menue (#mainnav, position:absolute) liegt mobil UNSICHTBAR ueber dem
   Bereich direkt unter dem Kopf - Breadcrumb & Co. sind dort weder klickbar
   noch wischbar (besonders auf iOS deutlich). Loesung: geschlossen ist die
   Leiste beruehrungs-durchlaessig, nur das AUFGEKLAPPTE Menue faengt Touches. --- */
@media (max-width:991.98px){
  #mainnav{pointer-events:none;}
  #mainnav .navbar-collapse.show,
  #mainnav .navbar-collapse.collapsing{pointer-events:auto;}
}

/* --- 24. Mobil-Menue als seitliche Einblendung (Off-Canvas-Drawer) ---
   Statt von oben ueber die Seite zu klappen, gleitet das Menue von rechts
   herein (heutiger Standard: IKEA, OBI & Co.). Hintergrund dunkelt ab,
   Tipp auf den Hintergrund schliesst. ligno_fixes.js steuert die Klasse
   body.ligno-drawer-open und legt den Hintergrund-Schleier an.
   Desktop bleibt komplett unveraendert (Media-Query). --- */
@media (max-width:991.98px){
  /* Burger-Icon etwas groesser als die uebrigen Icons */
  .header-mobileactions .header-mobileburger svg{width:28px;height:28px;}

  #navbarSupportedContent{
    display:block !important;position:fixed !important;top:0;bottom:0;
    left:auto !important;right:0 !important; /* Theme setzt left:0 - sonst haengt der Drawer links */
    z-index:1080;width:85%;max-width:340px;height:100dvh !important;
    background:#fff !important;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(103%);transition:transform .25s ease;
    padding:1.1rem .9rem 2.5rem;pointer-events:auto;
  }
  body.ligno-drawer-open #navbarSupportedContent{transform:translateX(0);box-shadow:-8px 0 30px rgba(0,0,0,.18);}
  .ligno-drawer-backdrop{
    position:fixed;inset:0;z-index:1070;background:rgba(20,22,21,.4);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  body.ligno-drawer-open .ligno-drawer-backdrop{opacity:1;pointer-events:auto;}
  body.ligno-drawer-open{overflow:hidden;}
}

/* --- 25. Mobile Suche: Suchfeld dauerhaft sichtbar (IKEA/OBI-Muster) ---
   Das Suchfeld steht mobil als eigene schlanke Zeile unter der Kopfzeile -
   immer sichtbar, ganz normaler Seitenfluss (KEIN Overlay, KEIN position:fixed).
   Dadurch verhaelt sich die iOS-Tastatur nativ und ruhig. Die Lupe in der
   Icon-Reihe entfaellt, der fruehere Overlay-Ansatz ist ausgebaut. --- */
@media (max-width:991.98px){
  header.header #searchForm{
    display:flex !important;order:99;flex-basis:100%;height:auto !important;
    position:static !important;top:auto !important;left:auto !important;right:auto !important;
    margin:.2rem 0 .15rem !important;padding:0 !important;overflow:visible !important;
    border:0 !important;background:transparent !important;box-shadow:none !important;
  }
  header.header #searchForm .input-group{width:100%;flex-wrap:nowrap;}
  header.header #searchForm .form-control{
    height:42px;border-radius:21px 0 0 21px !important;
    border:1px solid #d9ddda !important;border-right:0 !important;
    padding-left:1rem;font-size:.95rem;background:#f7f8f6 !important;
  }
  header.header #searchForm .btn{
    border-radius:0 21px 21px 0 !important;
    border:1px solid #d9ddda !important;border-left:0 !important;
    background:#f7f8f6 !important;
  }
  .header-mobilesearch{display:none !important;} /* Lupe oben rechts entfaellt */
}

/* --- 25b. Suchfeld-Fokus: Browser-Kaesten/-Striche weg, ruhiger roter Rand;
   Burger-Icon deutlicher --- */
@media (max-width:991.98px){
  header.header #searchForm,
  header.header #searchForm input,
  header.header #searchForm button{
    outline:0 !important;-webkit-tap-highlight-color:transparent;
  }
  header.header #searchForm .form-control:focus,
  header.header #searchForm .btn:focus,
  header.header #searchForm .btn:focus-visible{
    outline:0 !important;box-shadow:none !important;
  }
  header.header #searchForm .input-group:focus-within .form-control{
    border-color:#d4001a !important;background:#fff !important;
  }
  header.header #searchForm .input-group:focus-within .btn{
    border-color:#d4001a !important;background:#fff !important;
  }
  .header-mobileactions .header-mobileburger svg{width:31px;height:31px;}
}

/* --- 25c. iOS: native Eingabefeld-Optik abschalten (Safari malt sonst eigene
   graue Raender/Innenlinien ueber unser Suchfeld) --- */
@media (max-width:991.98px){
  header.header #searchForm .form-control,
  header.header #searchForm .btn{
    -webkit-appearance:none !important;appearance:none !important;
    background-clip:padding-box;
  }
}

/* --- 25d. Burger-Icon: eigenes Symbol (drei satte Striche, fuellt die Box) -
   das Theme-bars.svg zeichnet nur mittig mit viel Leerraum und wirkt mickrig --- */
@media (max-width:991.98px){
  .header-mobileactions .header-mobileburger svg{width:26px;height:26px;fill:none !important;}
}

/* --- 25e. Suchfeld als EINE Pille: Rahmen liegt aussen auf der Gruppe,
   Feld und Lupen-Knopf innen randlos - beendet die sichtbare Nahtstelle
   (Doppel-Rundung) am rechten Ende --- */
@media (max-width:991.98px){
  header.header #searchForm .input-group{
    border:1px solid #d9ddda;border-radius:22px;background:#f7f8f6;overflow:hidden;
  }
  header.header #searchForm .form-control,
  header.header #searchForm .form-control:focus,
  header.header #searchForm .btn,
  header.header #searchForm .btn:focus{
    border:0 !important;background:transparent !important;
    border-radius:0 !important;box-shadow:none !important;
  }
  header.header #searchForm .input-group:focus-within{border-color:#d4001a;background:#fff;}
}

/* --- 26. Warenkorb-Zaehler oben rechts (mobil) --- */
@media (max-width:991.98px){
  .ligno-cart-wrap{position:relative;display:flex;}
  .ligno-cart-count{
    position:absolute;top:2px;right:-2px;background:#d4001a;color:#fff;
    font-size:.6rem;font-weight:600;line-height:1;padding:.17rem .32rem;
    border-radius:.65rem;pointer-events:none;min-width:1rem;text-align:center;
  }
}

/* --- 27. Schrumpfender Sticky-Kopf (mobil): Logo-Zeile + Suchfeld bleiben oben,
   verschwinden beim Runterscrollen und kommen beim Hochscrollen sofort wieder.
   ligno_fixes.js setzt --ligno-topoffset (Hoehe der Hinweiszeile) und die
   Klasse ligno-headhide. --- */
@media (max-width:991.98px){
  header.header{
    position:sticky;top:calc(-1 * var(--ligno-topoffset,26px));z-index:1040;
    background:#fff;transition:transform .22s ease;
  }
  header.header.ligno-headhide{transform:translateY(-105%);}
}

/* --- 28. Footer mobil als Akkordeon: Gruppen (Service/Informationen/Newsletter/
   Soziale Medien) starten zugeklappt, Tipp auf die Ueberschrift oeffnet.
   ligno_fixes.js vergibt die Klassen. --- */
@media (max-width:991.98px){
  footer .ligno-facc > .h4, footer .ligno-facc > h4, footer .ligno-facc > .footer-box-title{
    cursor:pointer;position:relative;padding:.55rem 1.4rem .55rem 0 !important;margin:0 !important;
    border-bottom:1px solid #e3e6e3;
  }
  footer .ligno-facc > .h4::after, footer .ligno-facc > h4::after, footer .ligno-facc > .footer-box-title::after{
    content:"";position:absolute;right:.4rem;top:.75rem;width:.45rem;height:.45rem;
    border-right:1.5px solid #8a908e;border-bottom:1.5px solid #8a908e;
    transform:rotate(45deg);transition:transform .2s;
  }
  footer .ligno-facc.is-open > .h4::after, footer .ligno-facc.is-open > h4::after, footer .ligno-facc.is-open > .footer-box-title::after{
    transform:rotate(225deg);top:.95rem;
  }
  footer .ligno-facc > *:not(.h4):not(h4):not(.footer-box-title){display:none;}
  /* revert statt block: Social-Icons u.ae. behalten ihr eigenes Layout */
  footer .ligno-facc.is-open > *:not(.h4):not(h4):not(.footer-box-title){display:revert;}
  footer .ligno-facc.is-open{padding-bottom:.7rem;}

  /* alle Gruppen volle Breite untereinander (statt col-6 nebeneinander) */
  footer [class*="col-"]{flex:0 0 100% !important;max-width:100% !important;margin-bottom:0 !important;}
  footer .ligno-facc{margin-bottom:0 !important;}
  /* dunkler Theme-Strich ueber dem Newsletter weg */
  footer .footer-newsletter{border-top:0 !important;margin-top:0 !important;padding-top:0 !important;}
  footer .social-links{border-top:0 !important;}
}

/* --- 29. Drawer-Akkordeon: Untermenues klappen im seitlichen Menue inline auf.
   Die mobilen Untermenues stehen als .nav-level-2m im Menue-Template
   (Desktop sieht sie nie); das echte .nav-level-2 (% Sparen) macht mobil
   dasselbe. ligno_fixes.js steuert .ligno-open (nur eine Ebene offen). --- */
.nav-level-2m{display:none;}
@media (max-width:991.98px){
  #navbarSupportedContent .nav-item{position:relative;}
  #navbarSupportedContent .nav-item.ligno-subs > .nav-link-1{padding-right:1.8rem;}
  #navbarSupportedContent .nav-item.ligno-subs > .nav-link-1::after{
    content:"" !important;font-size:0;line-height:0;
    position:absolute;right:.55rem;top:1.05rem;width:.45rem;height:.45rem;
    border:0;border-right:1.5px solid #8a908e;border-bottom:1.5px solid #8a908e;
    margin:0;background:none;
    transform:rotate(45deg);transition:transform .2s;
  }
  #navbarSupportedContent .nav-item.ligno-open > .nav-link-1::after{transform:rotate(225deg);top:1.2rem;}

  #navbarSupportedContent .nav-level-2m,
  #navbarSupportedContent .nav-level-2{display:none;}
  /* auch wenn das alte Menue-Script is-open setzt: gleiche ruhige Inline-Optik */
  #navbarSupportedContent .has-subs.is-open > .nav-link-1{background:transparent !important;}
  #navbarSupportedContent .has-subs.is-open > .nav-level-2,
  #navbarSupportedContent .ligno-open > .nav-level-2m,
  #navbarSupportedContent .ligno-open > .nav-level-2{
    display:block;position:static !important;width:auto !important;min-width:0 !important;
    padding:.2rem 0 .5rem .9rem;margin:0 0 .3rem .2rem;
    border:0 !important;border-left:2px solid #eff1ee !important;
    background:#fff !important;box-shadow:none !important;transform:none !important;
  }
  #navbarSupportedContent .has-subs.is-open > .nav-level-2 .nav-link,
  #navbarSupportedContent .ligno-open > .nav-level-2m a,
  #navbarSupportedContent .ligno-open > .nav-level-2 .nav-link{
    display:block;padding:.5rem 0 !important;margin:0 !important;
    color:#5a615f !important;text-decoration:none;font-size:.95rem !important;
    border:0 !important;border-bottom:1px solid #f2f4f1 !important;white-space:normal;
  }
  #navbarSupportedContent .ligno-open a.ligno-sub-all{
    color:#d4001a !important;border-bottom:0 !important;font-weight:600;
  }
}

/* --- 30. Weiter-Knopf fuer Wisch-Reihen (global): weisser Kreis rechts,
   scrollt eine Kartenbreite, blendet am Reihenende aus (ligno_fixes.js).
   Genutzt auf der Startseite und bei Zubehoer/Empfehlungen der Artikelseite. --- */
@media (max-width:991.98px){
  .ligno-row-host{position:relative;}
  .ligno-row-next{
    position:absolute;right:4px;top:55%;z-index:3;
    width:38px;height:38px;border-radius:50%;padding:0;
    background:#fff;border:1px solid #c9cecb;cursor:pointer;
    color:#41484a;font-size:1.7rem;line-height:34px;text-align:center;
    transition:opacity .25s;
  }
  .ligno-row-next.is-end{opacity:0;pointer-events:none;}
  .ligno-row-next.ligno-row-prev{left:4px;right:auto;}
}

/* --- 31. Breadcrumb mobil: mittlere Ebenen als "..." eingeklappt -
   sichtbar bleiben Haus, Elternkategorie und aktuelle Seite; Tipp auf die
   drei Punkte zeigt den ganzen Pfad (ligno_fixes.js) --- */
@media (max-width:991.98px){
  .ligno-crumb-hidden{display:none !important;}
  .ligno-crumb-ell button{
    border:0;background:none;padding:0 .15rem;margin:0 .1rem;
    color:#8a908e;font-weight:700;font-size:1rem;line-height:1;cursor:pointer;
  }
  .breadcrumb li.ligno-crumb-ell{display:flex;align-items:center;}
  .breadcrumb li.ligno-crumb-ell::before{content:"/";padding:0 .35rem;color:#c3c8c5;}
}

/* --- 32. Warenkorb-Flyout: Frei-Grenze (60 EUR, DE/Paket) mit Fortschrittsbalken --- */
.free-ship-progress{margin:0 0 .8rem;}
.free-ship-progress__txt{font-size:.88rem;color:#41484a;margin-bottom:.35rem;}
.free-ship-progress__txt.is-reached{color:#1d7a36;}
.free-ship-progress__track{height:6px;border-radius:3px;background:#eff1ee;overflow:hidden;}
.free-ship-progress__track span{display:block;height:100%;border-radius:3px;background:#1d7a36;transition:width .3s ease;}

/* Frei-Grenze: i-Symbol zu den Versandkosten-Details */
.free-ship-progress .free-ship-info{color:#6a716f;margin-left:.2rem;}
.free-ship-progress .free-ship-info svg{vertical-align:-2px;}
.free-ship-progress .free-ship-info:hover{color:#d4001a;}

/* ===============================================================
   33) Warenkorb: Positions-Details aufraeumen (Lieferumfang-Zeile)
   Apex gibt den Labels eine feste Breite, dadurch bricht
   "Lieferumfang:" auf schmalen Displays mitten im Wort um
   ("Lieferumfan g:"). Label inline + nie umbrechen, Wert sauber
   dahinter; mobil steht die Zeile wie im alten Shop UNTER Art.Nr.
   =============================================================== */
.basket-item-desc .attributes li{
  display:flex;flex-wrap:wrap;column-gap:.35rem;align-items:baseline;
}
.basket-item-desc .attributes .attribute{
  display:inline !important;width:auto !important;min-width:0 !important;
  white-space:nowrap;hyphens:none;word-break:keep-all;overflow-wrap:normal;
}
.basket-item-desc .attributes .value{overflow-wrap:anywhere;}
/* Abstand nach dem Doppelpunkt auch bei Art.Nr./Einzelpreis/Gewicht */
.basket-item-desc .serial-no .attribute,
.basket-item-desc .unit-price .attribute{margin-right:.35rem;}
/* Mobil/Tablet (Spalten uebereinander): erst Art.Nr. & Preis, dann Lieferumfang */
@media (max-width: 1199.98px){
  .basket-item-desc > .row > .col-12:first-child{order:2;}
}
/* Auf Wunsch verschlankt: MwSt-Zusatz und Gewichtszeile in der Position raus
   (MwSt-Hinweis steht gesammelt unter der Uebersicht; Gewicht ist fuers
   Bestellen irrelevant). Gewicht = zweite ul.unit-price nach Einzelpreis. */
.basket-item-desc .unit-price .article-vat{display:none !important;}
.basket-item-desc ul.unit-price + ul.unit-price{display:none !important;}
/* Grundpreis (PAngV) bleibt sichtbar: ligno_fixes.js haengt ihn hier an */
.basket-item-desc .ligno-baseprice{display:inline;color:#6a716f;font-size:.9em;margin-left:.15rem;}

/* --- 34. Android/Samsung: Flackern beim Scrollen in Kategorien ---
   Der Browser blaest Texte nachtraeglich auf (Font Boosting) und lost
   damit sichtbare Layout-Spruenge aus. Abgeschaltet per text-size-adjust. */
html{-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important;}

/* --- 35. Trusted-Shops-Anzeige ohne TS-Script (Header + Footer) ---
   Statisches Badge, verlinkt aufs TS-Profil. Kein externes JavaScript. */
.ligno-ts-badge{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit;white-space:nowrap;}
.ligno-ts-badge:hover{text-decoration:none;color:inherit;opacity:.85;}
.ligno-ts-stars{color:#f0a04a;letter-spacing:.08em;line-height:1;}
.ligno-ts-badge--footer{white-space:normal;align-items:flex-start;line-height:1.4;}
.ligno-ts-badge--footer .ligno-ts-stars{font-size:1.05rem;margin-top:.1rem;}
.ligno-ts-badge--footer .ligno-ts-text{font-size:.9rem;}
/* Meta-Leiste: feine Trennstriche zwischen Badge/Magazin/Kundenservice/Hilfe */
.header-textlinks a + a{border-left:1px solid #d9d9d9;padding-left:1rem;margin-left:1rem;}
/* Footer-Badge: Sterne oben, Text darunter (schmale Spalte, kein Ueberlauf) */
.ligno-ts-badge--footer{flex-direction:column;gap:.35rem;}
.ligno-ts-badge--footer .ligno-ts-text{font-size:.875rem;}
/* Mobile TS-Zeile unter den (eingeklappten) Footer-Spalten */
.ligno-ts-mobile{padding:.9rem 1rem .25rem;}
.ligno-ts-badge--mobile{white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;font-size:.95rem;}
/* WhatsApp-Knopf im Footer: dezent umrandet, gruener Akzent nur in Icon/Schrift */
.ligno-wa-wrap{flex-basis:100%;width:100%;margin-top:.7rem;}
.ligno-wa-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;background:#fff;color:#1da851 !important;border:1px solid #cfe9d9;border-radius:2rem;text-decoration:none;font-size:.9rem;white-space:nowrap;}
.ligno-wa-btn:hover{background:#f2faf5;color:#178a43 !important;text-decoration:none;border-color:#b5dfc5;}

/* --- 36. Checkout beruhigen: keine Ausgaenge, voller Fokus aufs Bestellen ---
   body.is-checkout setzt das Theme selbst (getIsOrderStep). Sichtbar bleiben:
   Logo, Schrittanzeige, TS-Badge (Vertrauen). Weg: Rabattbanner, Kategorie-
   Navigation, Magazin-/Service-Links. */
body.is-checkout .header-toprow{display:none !important;}
body.is-checkout #mainnav{display:none !important;}
body.is-checkout .header-textlinks > a:not(.ligno-ts-badge){display:none !important;}
/* Zahlarten-Radios nativ rendern: das Theme blendet die ausgewaehlte
   Option sonst aus (gleicher Fall wie die DSGVO-Checkbox, Abschnitt 35ff.) */
.payment .form-check-input{appearance:auto !important;-webkit-appearance:radio !important;width:1.05em;height:1.05em;accent-color:#c23b3b;opacity:1 !important;position:static !important;}

/* --- 37. Danke-Seite: "Kunden kauften auch" mit kleinen, scharfen Bildern ---
   Die Kacheln nutzen sonst die grosse Zoom-Grafik (picture/img-2), die kleine
   Originalbilder unscharf hochskaliert. Hier: nur das Thumbnail, kompakte
   Kacheln, mehr Spalten. */
#alsoBoughtThankyou picture{display:none !important;}
#alsoBoughtThankyou .product-img{position:static !important;width:auto;height:auto;max-width:100px;max-height:100px;object-fit:contain;margin:0 auto;}
#alsoBoughtThankyou .product-img-wrapper{min-height:0;height:auto;padding:.5rem;text-align:center;}
#alsoBoughtThankyou .grid-row{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(130px,165px));gap:1rem;justify-content:flex-start;}
#alsoBoughtThankyou .col{width:auto;max-width:none;}
#alsoBoughtThankyou .card-title, #alsoBoughtThankyou .product-title{font-size:.9rem;}

/* --- 38. GLOBAL: ALLE Radios/Checkboxen nativ rendern ---
   Gleicher Theme-Fehler wie bei DSGVO-Checkbox und Zahlarten-Radios:
   der angehakte Zustand wird unsichtbar. Zuerst nur fuer die Kasse
   (body.is-checkout) gefixt; 31.08. auf den ganzen Shop ausgeweitet,
   nachdem der Fehler auch beim Newsletter auffiel ("Abonnieren" ohne
   Punkt). Betrifft ausserdem: Login "Angemeldet bleiben", Registrierung
   (Newsletter-Haken), DSGVO-Haken, Widerrufsformular. apex nutzt keine
   form-switch-Schalter, die Regel kann daher pauschal gelten. */
.form-check-input{appearance:auto !important;-webkit-appearance:auto !important;width:1.05em;height:1.05em;accent-color:#c23b3b;opacity:1 !important;position:static !important;}

/* --- 39. Produkt-Slider: Pfeile nur mobil (Apex-Standard), Desktop nie ---
   Mobil zeigt Apex runde Overlay-Pfeile am Slider-Rand - die bleiben.
   Am Desktop gehoeren keine Pfeile hin; das verhindert auch das Artefakt,
   dass nach dem Vergroessern des Fensters graue Kaestchen stehen bleiben. */
@media (min-width: 992px){
    .slider-nav{display:none !important;}
}

/* --- 40. Checkout: Schrittanzeige einzeilig, Gast-/Loginseite breiter ---
   a) Apex laesst die Schritte-Reihe umbrechen -> "3 Bestellen" rutscht in
      die zweite Zeile. Umbruch aus, Beschriftungen nicht trennen.
   b) Auf der Gast-/Loginseite (cl=user) bekommt jeder Block ab 1400px nur
      halbe Breite (col-xxl-6) -> viel zu schmale Felder. Auf 5/6 anheben. */
.steps{flex-wrap:nowrap !important;}
.steps .step{white-space:nowrap;}
@media (min-width:1400px){
    body.is-checkout .col-md-12.col-lg-10.col-xl-10.col-xxl-6{width:83.33333%;}
}

/* --- Pagination: apex setzt aktive Seite weiss auf weiss (--bs-pagination-active-bg:#fff
       bei active-color:#fff) - aktive Zahl war unsichtbar. Fix: Ligno-Rot. --- */
.pagination{
  --bs-pagination-active-color:#fff;
  --bs-pagination-active-bg:#d4001a;
  --bs-pagination-active-border-color:#d4001a;
}