/* TONER-WIEN V3 — visual refinement on NiceShop Pro */
:root{
  --tw-blue:#0b63ce;
  --tw-blue-dark:#084da5;
  --tw-navy:#102746;
  --tw-light:#eef6ff;
  --tw-line:#dce6f3;
  --tw-text:#172b49;
  --tw-muted:#60738c;
}

/* Header / branding */
.tw-bluebar{background:var(--tw-blue)!important;color:#fff}
.tw-bluebar a,.tw-bluebar .top-bar-item{color:#fff!important}
.main-header .container-xl{min-height:108px}
.tw-logo{
  width:480px!important;
  max-width:100%!important;
  max-height:160px!important;
  height:auto!important;
  object-fit:contain;
}
.tw-header-link{color:var(--tw-navy)!important}
.tw-nav{background:var(--tw-blue)!important}
.tw-nav .navmenu a{color:#fff!important}
.tw-nav .navmenu a:hover,.tw-nav .navmenu .active{color:#fff!important}
.tw-nav .navmenu>ul>li>a:before{background:#fff!important}

/* Hero: full Vienna skyline, without crop/focus */
.tw-hero{
  background:linear-gradient(135deg,#eef6ff 0%,#fff 54%,#f4f9ff 100%);
  position:relative;
  overflow:hidden;
}
.tw-hero:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:92%;
  background-image:url('../img/toner-wien/toner-wien-skyline.png');
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:100% auto;
  opacity:.11;
  pointer-events:none;
}
.tw-hero .hero-container,
.tw-hero .hero-content,
.tw-hero .tw-hero-visuals{position:relative;z-index:2}
.tw-eyebrow{
  display:inline-block;color:var(--tw-blue);font-size:.78rem;
  letter-spacing:.13em;font-weight:800;margin-bottom:13px
}
.tw-hero .hero-title{color:var(--tw-navy);letter-spacing:-.04em}
.tw-hero .hero-description{color:#52657e;max-width:620px}
.tw-hero .btn-primary,.tw-shop-box .btn-primary{
  background:var(--tw-blue)!important;border-color:var(--tw-blue)!important
}
.tw-hero .btn-secondary{
  border-color:var(--tw-blue)!important;color:var(--tw-blue)!important
}
.tw-hero .features-list .feature-item i{color:var(--tw-blue)}

/* Shrink the hero title ~25% */
.tw-hero-title-sm{font-size:2.6rem!important}
@media(max-width:768px){
  .tw-hero-title-sm{font-size:2.1rem!important}
}

/* Hero product: one clean product image, no competing mini-card/icons */
.tw-hero-visuals{position:relative}
.tw-skyline-bg{display:none}
.tw-hero-visuals .product-showcase{position:relative;z-index:2}
.tw-toner-feature{
  background:#fff!important;
  border:1px solid var(--tw-line);
  box-shadow:0 20px 55px rgba(16,39,70,.13);
  border-radius:20px;
}
.tw-toner-feature .product-badge{background:var(--tw-blue)!important}
.tw-toner-feature .product-info h4{color:var(--tw-navy)}
.tw-toner-feature .sale-price{color:var(--tw-blue)!important;font-size:1rem}

/* Enlarge the hero photo further and pull it closer to the card's top edge */
.tw-hero-visuals .product-showcase{max-width:560px!important}
.tw-toner-feature{padding:14px!important}
.tw-toner-feature img{height:408px!important;margin-bottom:10px!important}

/* Reduce the gap between the top menu and the hero section */
.tw-hero{padding-top:38px!important;padding-bottom:60px!important}

/* Toner Finder feature card: image and text are separate columns */
.tw-category-featured{
  border-color:var(--tw-line)!important;
  display:grid!important;
  grid-template-columns:minmax(220px,42%) minmax(0,58%);
  align-items:stretch;
  overflow:hidden;
  min-height:250px!important;
}
.tw-category-featured .category-image{
  background:#f5f9ff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  padding:28px!important;
}
.tw-category-featured .category-image img{
  width:100%!important;
  max-width:360px!important;
  height:auto!important;
  object-fit:contain!important;
  display:block!important;
}
.tw-category-featured .category-content{
  min-width:0!important;
  padding:34px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.tw-category-featured .category-tag{color:var(--tw-blue)!important}
.tw-category-featured h2{color:var(--tw-navy);line-height:1.2}
.tw-category-featured p{color:var(--tw-muted);line-height:1.65}
.tw-category-featured .card-link,.tw-category-card .card-link{color:var(--tw-blue)!important}

/* Toner Finder: two photos stacked on top of each other */
.tw-category-featured .category-image.tw-stack-images{
  position:relative!important;
  display:block!important;
  height:auto!important;
  align-self:stretch!important;
  min-height:200px!important;
}
.tw-stack-images .tw-stack-img{
  position:absolute!important;
  width:72%!important;
  max-width:250px!important;
  height:auto!important;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(16,39,70,.22);
  border:4px solid #fff;
  object-fit:cover!important;
}
.tw-stack-images .tw-stack-img-back{
  top:2%;
  left:4%;
  transform:rotate(-6deg);
  z-index:1;
}
.tw-stack-images .tw-stack-img-front{
  bottom:2%;
  right:auto;
  top:auto;
  left:4%;
  transform:rotate(5deg);
  z-index:2;
}
@media(max-width:991px){
  .tw-stack-images{min-height:260px!important;}
  .tw-stack-images .tw-stack-img{max-width:220px!important;}
}
@media(max-width:575px){
  .tw-stack-images{min-height:220px!important;}
  .tw-stack-images .tw-stack-img{max-width:170px!important;}
}

/* Secondary cards */
.tw-category-card{
  height:auto!important;
  min-height:0!important;
  background:linear-gradient(145deg,#f6faff,#fff)!important;
  border:1px solid var(--tw-line)
}
.tw-category-card .category-content{
  width:100%!important;
  height:auto!important;
  padding:22px 26px!important;
}
.tw-category-card .category-content>i{
  font-size:1.8rem;color:var(--tw-blue);margin-bottom:8px;display:block
}
.tw-category-card h4{
  color:var(--tw-navy);
  font-size:1.25rem!important;
  margin-bottom:4px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.tw-category-card p{
  color:var(--tw-muted);
  font-size:.92rem!important;
  margin-bottom:10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.tw-category-card .card-link{font-size:.95rem!important}

/* Push the bottom row of secondary cards down a bit so the 4-box column
   ends closer to the image box's bottom edge (top row stays put) */
.tw-secondary-cards-row > .col-xl-6:nth-child(3),
.tw-secondary-cards-row > .col-xl-6:nth-child(4){
  margin-top:0!important;
}

/* Robust, width-independent fix: make the image-box column fill the full
   height of its outer grid cell, and let the 4-card row distribute its two
   rows (top pair / bottom pair) to the top and bottom of that same height -
   so the bottom row always lines up with the image box's bottom edge,
   regardless of how many lines the heading wraps to. */
#promo-cards .row.gy-4{align-items:stretch!important}
#promo-cards > .container > .row.gy-4 > .col-lg-6{display:flex!important}
.tw-category-featured{height:100%!important}
.tw-secondary-cards-row{
  height:100%!important;
  align-content:space-between!important;
  margin-top:0!important;
  row-gap:24px!important;
}
.tw-secondary-cards-row > .col-xl-6{
  margin-top:0!important;
}

/* Brands */
.tw-brands{background:#f7faff}
.tw-brand{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:110px;padding:20px;border:1px solid var(--tw-line);border-radius:14px;
  background:#fff;text-decoration:none;color:var(--tw-navy);transition:.2s
}
.tw-brand:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,99,206,.10)}
.tw-brand strong{font-size:1.45rem}
.tw-brand span{color:#72839a;font-size:.8rem;margin-top:4px}

/* Ratgeber */
.tw-articles{background:#fff}
.tw-article{
  height:100%;padding:30px;border:1px solid var(--tw-line);border-radius:18px;
  background:#fff;box-shadow:0 10px 35px rgba(16,39,70,.05)
}
.tw-article-icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:var(--tw-light);color:var(--tw-blue);font-size:1.35rem;margin-bottom:20px
}
.tw-article>span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#70829a;font-weight:700}
.tw-article h3{color:var(--tw-navy);font-size:1.35rem;line-height:1.35;margin:10px 0 12px}
.tw-article p{color:#64748b;line-height:1.65}
.tw-article a{color:var(--tw-blue);font-weight:700;text-decoration:none}

/* Shop CTA */
.tw-shop-cta{padding-top:20px;background:#fff}
.tw-shop-box{
  border-radius:22px;padding:42px 48px;
  background:linear-gradient(100deg,#0757b8,#0b73e8);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:25px;
  position:relative;overflow:hidden
}
.tw-shop-box:after{
  content:"";position:absolute;right:0;bottom:0;width:70%;height:100%;
  background:url('../img/toner-wien/toner-wien-skyline.png') right bottom/auto 100% no-repeat;
  opacity:.10
}
.tw-shop-box>div,.tw-shop-box>a{position:relative;z-index:2}
.tw-shop-box>div>span{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:#cfe4ff}
.tw-shop-box h2{margin:6px 0 8px;color:#fff}
.tw-shop-box p{margin:0;color:#dcecff}
.tw-shop-box .btn-primary{background:#fff!important;color:var(--tw-blue)!important;border-color:#fff!important}

/* Footer */
.footer.dark-background{background:#0c2038!important}
.footer a:hover{color:#7eb5ff!important}
.tw-footer-logo{
  width:582px!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain;
}
.footer-about .logo{justify-content:flex-start;margin-bottom:7px!important}
.footer-about p{font-size:.831rem!important}
.tw-footer-shop{font-size:1.1rem;font-weight:700;color:#fff}
.tw-footer-links-spaced{margin-top:18px!important}

/* Bring the divider line above the copyright bar closer to the footer links */
.footer .footer-main{padding-bottom:4px!important}
.footer .footer-main .footer-widget{margin-bottom:8px!important}

/* Responsive */
@media(max-width:1199px){
  .tw-logo{width:360px!important;max-height:130px!important}
}
@media(max-width:991px){
  .main-header .container-xl{min-height:90px}
  .tw-logo{width:280px!important;max-height:110px!important}
  .tw-hero{padding-top:55px}
  .tw-hero:after{height:45%;opacity:.08;background-size:auto 100%;background-position:center bottom}
  .tw-category-featured{
    grid-template-columns:1fr!important;
    min-height:0
  }
  .tw-category-featured .category-image{min-height:230px}
  .tw-category-featured .category-content{padding:30px}
  .tw-shop-box{flex-direction:column;align-items:flex-start;padding:32px}
}
@media(max-width:575px){
  .tw-logo{width:210px!important;max-height:90px!important}
  .tw-hero .hero-title{font-size:2.7rem}
  .tw-category-featured .category-image{min-height:190px;padding:20px!important}
  .tw-category-featured .category-content{padding:25px}
  .tw-shop-box{padding:28px 24px}
}

/* V4: Toner Finder heading overflow/overlap fix */
.tw-category-featured .category-content{
  overflow:hidden;
  box-sizing:border-box;
}
.tw-category-featured .category-tag{
  display:block;
  position:static;
  white-space:normal;
  overflow-wrap:anywhere;
  margin:0 0 10px 0;
  line-height:1.3;
}
.tw-category-featured .category-content h2{
  display:block;
  position:static;
  margin:0 0 16px 0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.22;
}
@media(max-width:991px){
  .tw-category-featured .category-content h2{
    font-size:clamp(1.55rem,5vw,2.2rem);
  }
}

/* V5: Toner Finder final layout fix */
.tw-category-featured{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
}
.tw-category-featured .category-image{
  flex:0 0 48%!important;
  width:48%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  order:1!important;
}
.tw-category-featured .category-content{
  flex:1 1 52%!important;
  width:52%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  order:2!important;
  padding:32px 36px!important;
  justify-content:center!important;
}
.tw-category-featured .category-tag{
  margin:0 0 10px 0!important;
  line-height:1.25!important;
}
.tw-category-featured .category-content h2{
  margin:0 0 14px 0!important;
  font-size:clamp(1.5rem,2.1vw,1.95rem)!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important;
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.tw-category-featured .category-content p{
  margin:0 0 20px 0!important;
  font-size:1rem!important;
  line-height:1.6!important;
}
@media(max-width:991px){
  .tw-category-featured{
    flex-direction:column!important;
  }
  .tw-category-featured .category-image{
    flex:0 0 auto!important;
    width:100%!important;
    order:1!important;
    min-height:220px!important;
  }
  .tw-category-featured .category-content{
    flex:0 0 auto!important;
    width:100%!important;
    order:2!important;
    padding:28px!important;
  }
  .tw-category-featured .category-content h2{
    font-size:clamp(1.65rem,6vw,2.2rem)!important;
  }
}

/* V6 CTA refinement */

/* Toner Finder button now matches the primary NiceShop button family. */
.tw-finder-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  width:auto!important;
  min-width:150px;
  padding:12px 22px!important;
  border-radius:6px!important;
  background:var(--tw-blue)!important;
  border:1px solid var(--tw-blue)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:700;
  line-height:1.2;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.tw-finder-btn:hover{
  background:var(--tw-blue-dark)!important;
  color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(11,99,206,.22);
}

/* Strong, attention-grabbing order CTA — pulsing/glowing, but not constantly flashing. */
.tw-order-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:225px;
  min-height:58px;
  padding:15px 28px!important;
  border-radius:10px!important;
  background:#ff7a00!important;
  border:2px solid #fff!important;
  color:#fff!important;
  font-size:1.05rem!important;
  font-weight:800!important;
  letter-spacing:.02em;
  text-decoration:none!important;
  box-shadow:0 0 0 0 rgba(255,122,0,.45),0 8px 25px rgba(0,0,0,.15);
  animation:twOrderPulse 2.1s ease-in-out infinite;
  transition:transform .2s ease,background .2s ease;
}
.tw-order-btn:hover{
  background:#e96800!important;
  color:#fff!important;
  transform:translateY(-2px) scale(1.02);
  animation:none;
  box-shadow:0 0 28px rgba(255,122,0,.65),0 10px 28px rgba(0,0,0,.18);
}
@keyframes twOrderPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,122,0,.40),0 8px 25px rgba(0,0,0,.15);
  }
  50%{
    transform:scale(1.035);
    box-shadow:0 0 0 9px rgba(255,122,0,0),0 0 30px rgba(255,122,0,.48);
  }
}
@media(prefers-reduced-motion:reduce){
  .tw-order-btn{animation:none!important}
}
@media(max-width:575px){
  .tw-order-btn{width:100%;min-width:0}
}

/* V7: White buttons turn black on hover */

/* Ratgeber entdecken and other white/secondary buttons */
.tw-hero .hero-actions .btn-secondary,
.btn-secondary{
  background:#fff!important;
  color:var(--tw-blue)!important;
  border:1px solid var(--tw-blue)!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.tw-hero .hero-actions .btn-secondary:hover,
.btn-secondary:hover{
  background:#000!important;
  color:#fff!important;
  border-color:#000!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

/* JETZT BESTELLEN follows the same white-button behavior */
.tw-order-btn{
  background:#fff!important;
  color:var(--tw-navy)!important;
  border:2px solid #fff!important;
  animation:none!important;
  box-shadow:0 8px 25px rgba(0,0,0,.15)!important;
}
.tw-order-btn:hover{
  background:#000!important;
  color:#fff!important;
  border-color:#000!important;
  transform:translateY(-2px)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
}

/* Keep icons/text readable during the black hover state */
.tw-order-btn i,
.btn-secondary i{
  color:inherit!important;
}

/* Content pages */
.tw-content-hero{background:linear-gradient(135deg,#f6f9fc,#fff);padding:88px 0 52px;border-bottom:1px solid #e7edf4}
.tw-content-hero .eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1769aa;margin-bottom:12px}
.tw-content-hero h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;line-height:1.12;color:#102a43;margin-bottom:18px}
.tw-content-hero p{font-size:1.08rem;line-height:1.75;max-width:850px;color:#52616f;margin-bottom:0}
.tw-content{padding:56px 0 80px}
.tw-article{max-width:900px;margin:0 auto}
.tw-article h2{font-size:1.75rem;color:#102a43;margin:42px 0 14px;font-weight:800}
.tw-article h3{font-size:1.25rem;color:#102a43;margin:28px 0 10px;font-weight:750}
.tw-article p,.tw-article li{font-size:1.04rem;line-height:1.8;color:#465563}
.tw-article ul,.tw-article ol{padding-left:1.35rem}
.tw-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.tw-info-card{background:#fff;border:1px solid #e6edf3;border-radius:12px;padding:26px;box-shadow:0 8px 28px rgba(16,42,67,.06);height:100%}
.tw-info-card h3{margin-top:0;font-size:1.22rem}
.tw-info-card p{font-size:.98rem}
.tw-info-card a{font-weight:700;color:#1769aa;text-decoration:none}
.tw-cta-box{background:#102a43;border-radius:14px;padding:34px;color:#fff;margin:46px 0 10px}
.tw-cta-box h2{color:#fff;margin-top:0}
.tw-cta-box p{color:#dce8f2}
.tw-link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:25px 0}
.tw-link-list a{display:block;padding:15px 18px;border:1px solid #e2e9ef;border-radius:9px;background:#fff;text-decoration:none;color:#102a43;font-weight:700;transition:.2s}
.tw-link-list a:hover{background:#000;color:#fff;border-color:#000}
.tw-breadcrumb{font-size:.9rem;color:#72808c;margin-bottom:24px}
.tw-note{background:#f4f8fb;border-left:4px solid #1769aa;padding:18px 20px;margin:25px 0;border-radius:5px}
@media(max-width:991px){.tw-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.tw-card-grid,.tw-link-list{grid-template-columns:1fr}.tw-content-hero{padding:58px 0 38px}.tw-content{padding:42px 0 60px}}

/* SEO content system - Toner-Wien */
.tw-content-hero{background:linear-gradient(135deg,#f5f8fb 0%,#fff 72%);padding:74px 0 46px;border-bottom:1px solid #e4ebf1}
.tw-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1769aa;margin-bottom:12px}
.tw-content-hero h1{font-size:clamp(2rem,4vw,3.35rem);line-height:1.12;font-weight:800;color:#102a43;max-width:1000px;margin:0 0 18px}
.tw-content-hero .tw-lead{font-size:1.12rem;line-height:1.78;color:#536473;max-width:900px;margin:0}
.tw-content{padding:52px 0 82px}
.tw-article{max-width:920px;margin:0 auto}
.tw-article .tw-breadcrumb{font-size:.88rem;color:#758493;margin-bottom:30px}
.tw-article .tw-breadcrumb a{color:#1769aa;text-decoration:none}
.tw-article h2{font-size:1.7rem;line-height:1.3;color:#102a43;margin:42px 0 14px;font-weight:800}
.tw-article h3{font-size:1.25rem;line-height:1.35;color:#102a43;margin:30px 0 10px;font-weight:750}
.tw-article p,.tw-article li{font-size:1.04rem;line-height:1.82;color:#455563}
.tw-article ul,.tw-article ol{padding-left:1.35rem}
.tw-article li{margin-bottom:7px}
.tw-note{background:#f4f8fb;border-left:4px solid #1769aa;padding:18px 20px;border-radius:6px;margin:25px 0}
.tw-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}
.tw-fact{border:1px solid #e3eaf0;border-radius:10px;padding:22px;background:#fff}
.tw-fact strong{display:block;color:#102a43;margin-bottom:7px}
.tw-fact span{display:block;color:#596977;font-size:.95rem;line-height:1.6}
.tw-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:26px 0}
.tw-info-card{border:1px solid #e3eaf0;border-radius:11px;padding:25px;background:#fff;box-shadow:0 8px 24px rgba(16,42,67,.05);height:100%}
.tw-info-card h3{margin:0 0 10px;color:#102a43}
.tw-info-card p{font-size:.97rem;line-height:1.7}
.tw-info-card a{font-weight:750;color:#1769aa;text-decoration:none}
.tw-link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:22px 0}
.tw-link-list a{display:block;padding:14px 17px;border:1px solid #e0e8ee;border-radius:8px;background:#fff;color:#102a43;font-weight:700;text-decoration:none;transition:.18s}
.tw-link-list a:hover{background:#000;color:#fff;border-color:#000}
.tw-cta-box{background:#102a43;border-radius:13px;padding:32px;margin:48px 0 0}
.tw-cta-box h2{color:#fff!important;margin-top:0!important}
.tw-cta-box p{color:#dbe6ef!important}
.tw-cta-box .btn{margin-top:8px}
.tw-faq{border-top:1px solid #e2e9ee;margin-top:30px}
.tw-faq details{border-bottom:1px solid #e2e9ee;padding:17px 0}
.tw-faq summary{cursor:pointer;font-weight:750;color:#102a43}
.tw-faq p{margin:12px 0 2px}
.tw-source-note{font-size:.88rem!important;color:#788692!important}
@media(max-width:991px){.tw-card-grid{grid-template-columns:1fr 1fr}.tw-facts{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.tw-card-grid,.tw-link-list,.tw-facts{grid-template-columns:1fr}.tw-content-hero{padding:54px 0 38px}.tw-content{padding:40px 0 60px}.tw-article p,.tw-article li{font-size:1rem}}

/* V14: content-page headings reduced for a cleaner, more balanced layout */
.tw-content-hero h1{
  font-size:clamp(1.65rem,2.5vw,2.2rem)!important;
  line-height:1.18!important;
  max-width:900px!important;
}

/* V7: header logo aligns with the Startseite navigation edge */
.main-header .container-xl > .logo,
.main-header .container-xl > a.logo{
  margin-left:0!important;
  padding-left:0!important;
}

/* V8: footer logo follows the footer description width and has soft corners */
.footer-about .tw-footer-logo{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  display:block!important;
  border-radius:12px!important;
}

/* V8: align the header logo with the first navigation item (Startseite) */
.main-header .container-xl{
  padding-left:0!important;
}
.main-header .container-xl > div{
  padding-left:0!important;
}
.main-header .container-xl > div > a.logo{
  margin-left:0!important;
  padding-left:0!important;
}
.tw-nav .container-xl{
  padding-left:0!important;
}
.tw-nav .navmenu > ul{
  padding-left:0!important;
  margin-left:0!important;
}

/* V9 final: header alignment, wider search, and proportional footer logo */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }
  .main-header .container-fluid.container-xl > .d-flex{
    gap:2rem!important;
  }
  .main-header .logo{
    flex:0 0 480px!important;
    margin-left:0!important;
    padding-left:0!important;
  }
  .main-header .desktop-search-form{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .tw-nav .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }
  .tw-nav .navmenu > ul{
    margin-left:0!important;
    padding-left:0!important;
  }
}
.footer-about .tw-footer-logo{
  width:83%!important;
  max-width:83%!important;
  height:auto!important;
  display:block!important;
  border-radius:12px!important;
}

/* V10: final logo proportions */
@media(min-width:1200px){
  .main-header .logo{
    flex:0 0 384px!important;
    margin-left:58px!important;
  }
}
.footer-about .tw-footer-logo{
  width:90%!important;
  max-width:90%!important;
  height:auto!important;
  border-radius:12px!important;
}

/* V11: header logo reduced another 15% and positioned ~9% of its width from left */
@media(min-width:1200px){
  .main-header .logo{
    flex:0 0 326px!important;
    margin-left:29px!important;
  }
}
/* V11: bring inner-page starts slightly higher without changing homepage hero */
.tw-content-hero{
  padding-top:68px!important;
}

/* V12: header logo starts ~15% of its width from the left */
@media(min-width:1200px){
  .main-header .logo{
    margin-left:49px!important;
  }
}

/* V12: manufacturer cards behave as full-card links */
.tw-info-card .tw-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  height:100%;
}
.tw-info-card .tw-card-link:hover{
  color:inherit;
  text-decoration:none;
}

/* V13: explicit header logo inset */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl > .d-flex > a.logo{
    margin-left:72px!important;
    padding-left:0!important;
  }
}
/* V13: move the beginning of all inner-page content upward */
.tw-content-hero{
  padding-top:48px!important;
}
.tw-content{
  padding-top:34px!important;
}

/* V14: exact desktop alignment with Startseite */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }
  .main-header .container-fluid.container-xl > .d-flex{
    position:relative!important;
  }
  .main-header .container-fluid.container-xl > .d-flex > a.logo{
    margin-left:0!important;
    padding-left:0!important;
    transform:translateX(0)!important;
  }
  .tw-nav .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }
  .tw-nav .navmenu > ul{
    padding-left:0!important;
    margin-left:0!important;
  }
}

@media(min-width:1200px){
  .main-header .logo{margin-left:0!important;}
}

/* V15: move header logo further left */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl > .d-flex > a.logo{
    margin-left:-42px!important;
    transform:none!important;
  }
}

/* V16: fine-tune header logo position */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl > .d-flex > a.logo{
    margin-left:-36px!important;
  }
}

/* V17: header logo fine adjustment, 6px to the right */
@media(min-width:1200px){
  .main-header .container-fluid.container-xl > .d-flex > a.logo{
    margin-left:-30px!important;
  }
}

/* V17: Top Produkte supplied product photos
   Pure contain: the photo is always shown in full (no cropping/overflow).
   Depending on each photo's own aspect ratio, the leftover gap lands
   either on the sides or on top/bottom - never both, never overflowing. */
.tw-top-image{
  min-height:250px;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.tw-top-image img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* ===================== "Aktionen" nav highlight ===================== */
.tw-nav-hot > a{
  position:relative;
  background:linear-gradient(90deg,#ff5f2e,#ff2e63)!important;
  background-size:200% 100%;
  background-position:0% 50%;
  color:#fff!important;
  border-radius:20px!important;
  padding:8px 16px!important;
  margin:0 2px;
  font-weight:700!important;
  letter-spacing:.3px;
  box-shadow:0 0 0 0 rgba(255,46,99,.55);
  animation:tw-hot-pulse 1.8s infinite;
  transition:background-position .3s ease;
}
.tw-nav-hot > a i{
  display:inline-block;
  margin-right:4px;
  color:#fff;
  animation:tw-hot-flash 1.1s infinite;
}
.tw-nav-hot > a:hover{
  color:#fff!important;
  background:linear-gradient(90deg,#ffce00,#ff2e2e,#ffce00)!important;
  background-size:300% 100%;
  animation:tw-hot-pulse 1.8s infinite, tw-hot-gradient-shift 1.1s linear infinite;
}
@keyframes tw-hot-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,46,99,.55);}
  70%{box-shadow:0 0 0 9px rgba(255,46,99,0);}
  100%{box-shadow:0 0 0 0 rgba(255,46,99,0);}
}
@keyframes tw-hot-gradient-shift{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}
@keyframes tw-hot-flash{
  0%,100%{opacity:1;transform:scale(1);color:#fff;}
  50%{opacity:1;transform:scale(1.55);color:#ffe066;}
}
@media(max-width:1199px){
  .tw-nav-hot > a{
    background:none!important;
    color:#ff2e63!important;
    padding:10px 0!important;
    box-shadow:none;
    animation:none;
  }
  .tw-nav-hot > a i{animation:tw-hot-flash 1.1s infinite;}
}

/* ===================== Aktionen page placeholder cards ===================== */
.tw-aktion-placeholder .tw-top-image{
  background:linear-gradient(135deg,#fff3e6,#ffe6ee);
  color:#ff5f2e;
  font-size:2.6rem;
}
.tw-aktion-placeholder .tw-top-type{
  color:#ff2e63;
}
.tw-aktion-placeholder h2{
  color:#102a43;
}

.tw-seo-extra{margin-top:36px;padding:28px 30px;border:1px solid #e3e8ec;border-radius:14px;background:#fff}.tw-seo-extra h2{font-size:23px;margin:0 0 10px}.tw-seo-extra p{line-height:1.75;color:#52606a;margin:0 0 20px}.tw-seo-extra p:last-child{margin-bottom:0}@media(max-width:650px){.tw-seo-extra{padding:22px 18px}.tw-seo-extra h2{font-size:20px}}

/* ============================================================
   V18 — FINAL MOBILE NAVIGATION FIX
   Fixes the oversized white mobile menu panel, hidden headings,
   and the oversized/misaligned "Aktionen" item.
   ============================================================ */
@media (max-width:1199px){

  /* The main mobile menu must size itself to its content.
     The original inset rule made the panel almost full-screen,
     leaving a large empty area above/below the menu items. */
  .mobile-nav-active .navmenu > ul{
    position:absolute!important;
    top:60px!important;
    left:20px!important;
    right:20px!important;
    bottom:auto!important;
    height:auto!important;
    max-height:calc(100vh - 90px)!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 0!important;
    display:block!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    border-radius:8px!important;
  }

  /* Every first-level menu item keeps its natural height. */
  .mobile-nav-active .navmenu > ul > li{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  /* Normal mobile menu headings/links. */
  .mobile-nav-active .navmenu > ul > li > a,
  .mobile-nav-active .navmenu > ul > li > a:focus{
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    padding:12px 20px!important;
    margin:0!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    line-height:1.35!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  /* Mobile mega-menu blocks must appear immediately below their heading,
     not inherit desktop/flex sizing. */
  .mobile-nav-active .navmenu > ul .mobile-megamenu,
  .mobile-nav-active .navmenu > ul .mobile-megamenu.dropdown-active{
    position:static!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:6px 12px 12px!important;
    padding:0!important;
    display:block!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .mobile-nav-active .navmenu > ul .mobile-megamenu > li{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .mobile-nav-active .navmenu > ul .mobile-megamenu > li > a,
  .mobile-nav-active .navmenu > ul .mobile-megamenu > li > a:focus{
    display:flex!important;
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    padding:11px 15px!important;
    margin:0!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    line-height:1.35!important;
  }

  /* Do not let the highlighted Aktionen link become a huge desktop-style
     gradient bar on phones. */
  .mobile-nav-active .navmenu > ul .tw-nav-hot,
  .mobile-nav-active .navmenu > ul .tw-nav-hot > a{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:12px 20px!important;
    border-radius:0!important;
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
    animation:none!important;
    transform:none!important;
    overflow:visible!important;
    color:var(--nav-dropdown-color)!important;
  }

  .mobile-nav-active .navmenu > ul .tw-nav-hot > a i{
    margin-right:5px!important;
    transform:none!important;
    animation:none!important;
    color:inherit!important;
  }

  .mobile-nav-active .navmenu > ul .tw-nav-hot > a:hover,
  .mobile-nav-active .navmenu > ul .tw-nav-hot > a:focus{
    background:none!important;
    color:var(--nav-dropdown-hover-color)!important;
    box-shadow:none!important;
    transform:none!important;
  }

  /* Prevent any child content from forcing horizontal overflow. */
  .mobile-nav-active .navmenu,
  .mobile-nav-active .navmenu > ul,
  .mobile-nav-active .navmenu > ul li,
  .mobile-nav-active .navmenu > ul a{
    max-width:100%!important;
  }
}

/* Small phones: use slightly tighter side margins and typography. */
@media (max-width:575px){
  .mobile-nav-active .navmenu > ul{
    left:14px!important;
    right:14px!important;
    top:58px!important;
    max-height:calc(100vh - 78px)!important;
  }

  .mobile-nav-active .navmenu > ul > li > a,
  .mobile-nav-active .navmenu > ul > li > a:focus{
    padding:11px 17px!important;
    font-size:16px!important;
  }

  .mobile-nav-active .navmenu > ul .mobile-megamenu{
    margin-left:8px!important;
    margin-right:8px!important;
  }
}


/* ============================================================
   V20 — MOBILE NAVIGATION FINAL FIX
   Custom .tw-mega-menu navigation
   ============================================================ */

@media (max-width:1199px){

  /* Mobile drawer: size it to its content instead of the whole viewport. */
  body.mobile-nav-active .navmenu > ul{
    top:60px!important;
    right:20px!important;
    bottom:auto!important;
    left:20px!important;
    height:auto!important;
    max-height:calc(100vh - 80px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:10px 0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* All top-level links use the normal mobile navigation color. */
  body.mobile-nav-active .navmenu > ul > li > a,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    color:#102a43!important;
    background:transparent!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    padding:10px 20px!important;
    margin:0!important;
    box-sizing:border-box!important;
    font-size:17px!important;
    font-weight:600!important;
    line-height:1.25!important;
    white-space:normal!important;
  }

  /* Keep ordinary links looking like ordinary links. */
  body.mobile-nav-active .navmenu > ul > li > a:hover,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    color:#102a43!important;
  }

  /* Dropdown arrow stays on the right and rotates only while open. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > a > .toggle-dropdown{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:color-mix(in srgb,var(--accent-color),transparent 90%)!important;
    color:#587089!important;
    transform:none!important;
    transition:transform .2s ease,background-color .2s ease,color .2s ease!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-has-mega.active > a > .toggle-dropdown{
    background:var(--accent-color)!important;
    color:var(--contrast-color)!important;
    transform:rotate(180deg)!important;
  }

  /* IMPORTANT: never let desktop hover/focus force a mega menu open on mobile. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega:hover > .tw-mega-menu,
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega:focus-within > .tw-mega-menu{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }

  /* Mega menus are in normal document flow. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > .tw-mega-menu{
    position:static!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    margin:2px 10px 8px 10px!important;
    padding:8px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    background:#fff!important;
    color:#102a43!important;
    border:1px solid #dfe4e9!important;
    border-radius:9px!important;
    box-shadow:none!important;
    transform:none!important;
  }

  /* JS-controlled open state. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega.active > .tw-mega-menu,
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > .tw-mega-menu.dropdown-active{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* Two-column mega-menu grid on phones. */
  body.mobile-nav-active .navmenu .tw-mega-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 5px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 7px!important;
    box-sizing:border-box!important;
    color:#102a43!important;
    background:#fff!important;
    border-radius:6px!important;
    font-size:15px!important;
    font-weight:600!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-decoration:none!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a:hover{
    color:#102a43!important;
    background:#f4f7fa!important;
  }

  /* Patronen: keep brand + "Druckerpatronen" stacked neatly. */
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.12!important;
    padding:8px 5px!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .brand-line,
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .product-line{
    display:block!important;
    width:100%!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .brand-line{
    font-weight:700!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .product-line{
    font-weight:600!important;
  }

  /* Aktionen: normal mobile menu row; no flex-space-between split. */
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:hover,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:focus{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 20px!important;
    box-sizing:border-box!important;
    color:#ff2e63!important;
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    transform:none!important;
    animation:none!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a > i{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#ff2e63!important;
  }

  /* Remove desktop pseudo-element/visual effects from the hot link. */
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:before,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:after{
    display:none!important;
    content:none!important;
  }

  /* Make the whole drawer consistent. */
  body.mobile-nav-active .navmenu > ul > li{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
}

/* Very narrow phones: reduce the mega-menu text slightly. */
@media (max-width:390px){
  body.mobile-nav-active .navmenu > ul{
    right:12px!important;
    left:12px!important;
  }

  body.mobile-nav-active .navmenu > ul > li > a,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus{
    font-size:14px!important;
  }
}


/* ============================================================
   V21 — FINAL NAVIGATION STABILITY
   Desktop layout is restored independently from mobile.
   Mobile mega menus are true accordion sections: open/close,
   no hover-forced opening, no horizontal overflow.
   ============================================================ */

/* ---------- DESKTOP: keep the original horizontal navigation stable ---------- */
@media (min-width:1200px){
  .tw-nav .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }

  .tw-nav .navmenu > ul{
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }

  .tw-nav .navmenu > ul > li{
    position:relative!important;
    margin:0!important;
    padding:0!important;
  }

  .tw-nav .navmenu > ul > li > a,
  .tw-nav .navmenu > ul > li > a:focus{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:12px 15px!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  .tw-nav .navmenu > ul > li:first-child > a{
    padding-left:0!important;
  }

  /* Desktop mega menus remain attached to their own parent item. */
  .tw-nav .navmenu > ul > li.tw-has-mega > .tw-mega-menu{
    position:absolute!important;
    top:100%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:min(900px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    height:auto!important;
    margin:0!important;
    padding:22px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #e3e6ea!important;
    border-radius:0 0 12px 12px!important;
    box-shadow:0 14px 34px rgba(0,0,0,.13)!important;
    z-index:9999!important;
  }

  .tw-nav .navmenu > ul > li.tw-has-mega:hover > .tw-mega-menu,
  .tw-nav .navmenu > ul > li.tw-has-mega:focus-within > .tw-mega-menu{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .tw-nav .navmenu .tw-mega-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px 18px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .tw-nav .navmenu .tw-mega-grid > a,
  .tw-nav .navmenu .tw-mega-grid > a:focus{
    display:block!important;
    width:100%!important;
    padding:9px 10px!important;
    margin:0!important;
    border-radius:7px!important;
    color:#222!important;
    background:#fff!important;
    text-decoration:none!important;
    font-weight:600!important;
    line-height:1.35!important;
    box-sizing:border-box!important;
  }

  /* Desktop: submenu item is visibly selected on hover/focus. */
  .tw-nav .navmenu .tw-mega-grid > a:hover,
  .tw-nav .navmenu .tw-mega-grid > a:focus-visible,
  .tw-nav .navmenu .tw-mega-grid > a:active{
    background:#000!important;
    color:#fff!important;
  }
}

/* ---------- MOBILE/TABLET: one consistent accordion navigation ---------- */
@media (max-width:1199px){
  body.mobile-nav-active .navmenu > ul{
    position:absolute!important;
    top:60px!important;
    left:20px!important;
    right:20px!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100dvh - 80px)!important;
    min-height:0!important;
    display:block!important;
    margin:0!important;
    padding:10px 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border-radius:9px!important;
    box-shadow:0 10px 30px rgba(0,0,0,.10)!important;
  }

  body.mobile-nav-active .navmenu > ul > li{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  body.mobile-nav-active .navmenu > ul > li > a,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 20px!important;
    box-sizing:border-box!important;
    color:#102a43!important;
    background:transparent!important;
    font-size:17px!important;
    font-weight:600!important;
    line-height:1.25!important;
    white-space:normal!important;
    text-decoration:none!important;
  }

  body.mobile-nav-active .navmenu > ul > li > a:hover,
  body.mobile-nav-active .navmenu > ul > li > a:focus-visible{
    color:#102a43!important;
  }

  /* Only the accordion arrow is a toggle target. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > a > .toggle-dropdown{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:color-mix(in srgb,var(--accent-color),transparent 90%)!important;
    color:#587089!important;
    transform:none!important;
    transition:transform .2s ease,background-color .2s ease,color .2s ease!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-has-mega.active > a > .toggle-dropdown{
    background:var(--accent-color)!important;
    color:var(--contrast-color)!important;
    transform:rotate(180deg)!important;
  }

  /* Never allow desktop :hover/:focus-within rules to open mobile mega menus. */
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega:hover > .tw-mega-menu,
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega:focus-within > .tw-mega-menu{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > .tw-mega-menu{
    position:static!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    margin:2px 12px 10px!important;
    padding:8px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    background:#fff!important;
    color:#102a43!important;
    border:1px solid #dfe4e9!important;
    border-radius:9px!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-has-mega.active > .tw-mega-menu,
  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > .tw-mega-menu.dropdown-active{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 7px!important;
    box-sizing:border-box!important;
    color:#102a43!important;
    background:#fff!important;
    border-radius:6px!important;
    font-size:15px!important;
    font-weight:600!important;
    line-height:1.25!important;
    white-space:normal!important;
    text-decoration:none!important;
  }

  /* Touch/focus/hover feedback is identical across all three mega menus. */
  body.mobile-nav-active .navmenu .tw-mega-grid > a:hover,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus-visible,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:active,
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-mega-link-active{
    background:#000!important;
    color:#fff!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.12!important;
    padding:8px 5px!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .brand-line,
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .product-line{
    display:block!important;
    width:100%!important;
  }

  /* Aktionen uses exactly the same left edge as every other top-level item. */
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:hover,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:focus{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 20px!important;
    box-sizing:border-box!important;
    color:#ff2e63!important;
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    transform:none!important;
    animation:none!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a > i{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#ff2e63!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:before,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:after{
    display:none!important;
    content:none!important;
  }
}

@media (max-width:575px){
  body.mobile-nav-active .navmenu > ul{
    top:58px!important;
    left:14px!important;
    right:14px!important;
    max-height:calc(100dvh - 76px)!important;
  }

  body.mobile-nav-active .navmenu > ul > li > a,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    padding-left:17px!important;
    padding-right:17px!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-has-mega > .tw-mega-menu{
    margin-left:8px!important;
    margin-right:8px!important;
  }
}

@media (max-width:390px){
  body.mobile-nav-active .navmenu > ul > li > a,
  body.mobile-nav-active .navmenu > ul > li > a:focus{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus{
    font-size:14px!important;
  }
}


/* ============================================================
   V22 — MENU ALIGNMENT + COMPACT MEGA MENUS
   Desktop and mobile are tuned independently.
   ============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width:1200px){
  /* Restore the nav's natural horizontal position. */
  .tw-nav .container-fluid.container-xl{
    padding-left:0!important;
    padding-right:0!important;
  }

  .tw-nav .navmenu > ul{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
  }

  .tw-nav .navmenu > ul > li{
    position:relative!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
  }

  .tw-nav .navmenu > ul > li > a,
  .tw-nav .navmenu > ul > li > a:focus{
    padding:12px 14px!important;
    margin:0!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
  }

  .tw-nav .navmenu > ul > li:first-child > a{
    padding-left:0!important;
  }

  /* Mega panels start exactly at the left edge of their own parent item. */
  .tw-nav .navmenu > ul > li.tw-has-mega > .tw-mega-menu{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:680px!important;
    max-width:calc(100vw - 32px)!important;
    height:auto!important;
    margin:0!important;
    padding:15px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #e3e6ea!important;
    border-radius:0 0 10px 10px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
    z-index:9999!important;
  }

  /* The last large submenu should not run off the right side of the screen. */
  .tw-nav .navmenu > ul > li.tw-has-mega:nth-of-type(6) > .tw-mega-menu{
    width:620px!important;
  }

  .tw-nav .navmenu > ul > li.tw-has-mega:hover > .tw-mega-menu,
  .tw-nav .navmenu > ul > li.tw-has-mega:focus-within > .tw-mega-menu{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .tw-nav .navmenu .tw-mega-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px 12px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .tw-nav .navmenu .tw-mega-grid > a,
  .tw-nav .navmenu .tw-mega-grid > a:focus{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:7px 8px!important;
    margin:0!important;
    border-radius:6px!important;
    color:#222!important;
    background:#fff!important;
    text-decoration:none!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1.25!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }

  /* Desktop: hover/focus selection exactly like the requested black tile. */
  .tw-nav .navmenu .tw-mega-grid > a:hover,
  .tw-nav .navmenu .tw-mega-grid > a:focus-visible,
  .tw-nav .navmenu .tw-mega-grid > a:active,
  .tw-nav .navmenu .tw-mega-grid > a.tw-mega-link-active{
    color:#fff!important;
    background:#000!important;
  }

  /* Druckerpatronen: always two lines, brand above product name. */
  .tw-nav .navmenu .tw-mega-grid > a.tw-patronen-link{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:52px!important;
    padding:6px 5px!important;
    line-height:1.08!important;
  }

  .tw-nav .navmenu .tw-mega-grid > a.tw-patronen-link .brand-line,
  .tw-nav .navmenu .tw-mega-grid > a.tw-patronen-link .product-line{
    display:block!important;
    width:100%!important;
  }
}

/* ---------- MOBILE / TABLET ---------- */
@media (max-width:1199px){
  /* Aktionen begins at the same left edge as every other top-level item. */
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:focus,
  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a:hover{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    width:100%!important;
    min-height:48px!important;
    margin:0!important;
    padding:10px 17px!important;
    box-sizing:border-box!important;
    color:#ff2e63!important;
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
    animation:none!important;
  }

  body.mobile-nav-active .navmenu > ul > li.tw-nav-hot > a > i{
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#ececef!important;
    color:#ff2e63!important;
    font-size:15px!important;
    line-height:1!important;
  }

  /* Same black selected tile on touch/focus/hover for every submenu. */
  body.mobile-nav-active .navmenu .tw-mega-grid > a:hover,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus-visible,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:active,
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-mega-link-active{
    color:#fff!important;
    background:#000!important;
  }

  /* Compact all submenu rows a little further. */
  body.mobile-nav-active .navmenu .tw-mega-grid{
    gap:1px 5px!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a,
  body.mobile-nav-active .navmenu .tw-mega-grid > a:focus{
    min-height:38px!important;
    padding:7px 6px!important;
    font-size:14.5px!important;
    line-height:1.18!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link{
    min-height:48px!important;
    padding:5px 4px!important;
    line-height:1.05!important;
  }

  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .brand-line,
  body.mobile-nav-active .navmenu .tw-mega-grid > a.tw-patronen-link .product-line{
    display:block!important;
    width:100%!important;
  }
}

/* ============================================================
   V23 — MOBILE HERO + FOOTER / DESKTOP HERSTELLER COMPACTING
   ============================================================ */

/* Mobile: remove the two stacked Toner-Finder photos completely.
   The text card keeps its full width so the section fits naturally. */
@media (max-width: 767px){
  .tw-category-featured{
    display:block!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .tw-category-featured .category-image.tw-stack-images{
    display:none!important;
    min-height:0!important;
    height:0!important;
    padding:0!important;
    margin:0!important;
  }

  .tw-category-featured .category-content{
    width:100%!important;
    min-width:0!important;
    padding:25px!important;
    box-sizing:border-box!important;
  }

  /* On mobile the last footer block is the second-row block.
     Center it instead of leaving it aligned to the left column. */
  .footer .footer-main .row > .footer-widget:last-child{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .footer .footer-main .row > .footer-widget:last-child h4,
  .footer .footer-main .row > .footer-widget:last-child .footer-contact,
  .footer .footer-main .row > .footer-widget:last-child .tw-footer-shop,
  .footer .footer-main .row > .footer-widget:last-child .footer-links{
    text-align:center!important;
  }

  .footer .footer-main .row > .footer-widget:last-child .footer-links{
    padding-left:0!important;
    list-style:none!important;
  }
}

/* Very small phones: give the remaining Finder text a little more room. */
@media (max-width: 390px){
  .tw-category-featured .category-content{
    padding:22px!important;
  }
}

/* Desktop: Hersteller is intentionally more compact than the other
   mega menus. Two columns keep the original compact vertical rhythm and
   reduce the horizontal gap substantially. */
@media (min-width:1200px){
  .tw-nav .navmenu > ul > li:nth-child(7).tw-has-mega > .tw-mega-menu{
    width:520px!important;
    max-width:calc(100vw - 32px)!important;
  }

  .tw-nav .navmenu > ul > li:nth-child(7) .tw-mega-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:6px!important;
    row-gap:2px!important;
  }

  .tw-nav .navmenu > ul > li:nth-child(7) .tw-mega-grid > a{
    padding:6px 8px!important;
    min-height:0!important;
    line-height:1.2!important;
  }
}

/* ============================================================
   V24 — MOBILE FOOTER LOGO + DESKTOP HERSTELLER END SPACING
   ============================================================ */

/* Mobile footer logo: use the available screen width consistently,
   with fixed side breathing room and automatic proportional height. */
@media (max-width: 767px){
  .footer .footer-main .footer-widget.footer-about{
    width:100%!important;
    max-width:100%!important;
    flex:0 0 100%!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  .footer .footer-main .footer-widget.footer-about .logo{
    width:calc(100vw - 40px)!important;
    max-width:582px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    box-sizing:border-box!important;
    justify-content:center!important;
  }

  .footer .footer-main .footer-widget.footer-about .tw-footer-logo{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    display:block!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
}

/* Desktop Hersteller submenu: reduce the empty area below the final
   brand row while leaving the compact two-column layout intact. */
@media (min-width:1200px){
  .tw-nav .navmenu > ul > li:nth-child(7).tw-has-mega > .tw-mega-menu{
    padding-top:15px!important;
    padding-right:15px!important;
    padding-left:15px!important;
    padding-bottom:9px!important;
  }

  .tw-nav .navmenu > ul > li:nth-child(7) .tw-mega-grid > a:last-child{
    margin-bottom:0!important;
    padding-bottom:5px!important;
  }
}

/* ============================================================
   V25 — MOBILE HEADER SEARCH
   Keep the existing desktop search untouched. On mobile/tablet,
   place the same real search form below the logo/menu row so the
   search remains immediately available without opening the menu.
   ============================================================ */
@media (max-width:1199px){
  .header .main-header .container-fluid.container-xl{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .header .main-header .container-fluid.container-xl > .d-flex{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:0!important;
  }

  .header .main-header .container-fluid.container-xl > .d-flex > a.logo{
    order:1!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:calc(100% - 64px)!important;
  }

  .header .main-header .container-fluid.container-xl > .d-flex > .header-actions{
    order:2!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
  }

  /* main.css hides .desktop-search-form up to 1200px;
     this rule deliberately restores it only for the mobile layout. */
  .header .main-header .container-fluid.container-xl > .d-flex > form.desktop-search-form{
    order:3!important;
    display:block!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:12px 0 0!important;
  }

  .header .main-header .desktop-search-form .input-group{
    width:100%!important;
    min-height:50px!important;
  }

  .header .main-header .desktop-search-form .input-group .form-control{
    min-width:0!important;
    height:50px!important;
    padding:12px 14px!important;
    font-size:15px!important;
  }

  .header .main-header .desktop-search-form .input-group .form-control::placeholder{
    font-size:15px!important;
  }

  .header .main-header .desktop-search-form .input-group .btn{
    flex:0 0 58px!important;
    width:58px!important;
    min-width:58px!important;
    height:44px!important;
    padding:0!important;
    margin:3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .header .main-header .desktop-search-form .input-group .btn i{
    font-size:19px!important;
  }
}

/* Smaller phones: keep comfortable side spacing while giving the
   search input as much usable width as possible. */
@media (max-width:575px){
  .header .main-header .container-fluid.container-xl{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .header .main-header .container-fluid.container-xl > .d-flex > form.desktop-search-form{
    margin-top:10px!important;
  }
}