.kl-honeycomb-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 40px) clamp(8px, 3vw, 24px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: kl-honeycomb;
    --img-muffen: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/muffen_bild.png');
    --img-endverteiler: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/endverteiler_bild.png');
    --img-rangierverteiler: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/rangierverteiler_bild.png');
    --img-netzverteiler: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/netzverteiler_bild.png');
    --img-verteilboxen: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/verteilboxen_bild.png');
    --img-kabel: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/kabel_bild.png');
    --img-schranksysteme: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/schranksysteme_bild.png');
    --img-multifunktionsgehaeuse: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/multifunktionsgehaeuse_bild.png');
    --img-kabelspeicher: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/kabelspeicher_bild.png');
    --img-zubehoer: url('https://nbg.yoirs.at/wp-content/uploads/2026/07/zubehoer_bild.png');
  }
  .kl-honeycomb-wrap * { box-sizing: border-box; }

  .kl-honeycomb .hex,
  .kl-honeycomb .mhex {
    --hex-border: 3px;
    position: absolute;
    background: var(--hex-color, #999);
    display: block;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
  }
  .kl-honeycomb .hex__face,
  .kl-honeycomb .mhex__face {
    position: absolute;
    top: var(--hex-border); right: var(--hex-border);
    bottom: var(--hex-border); left: var(--hex-border);
    display: block;
    overflow: hidden;
  }

  /* Desktop-Container: Höhe über "padding-bottom in %" statt aspect-ratio
     berechnet -> funktioniert zuverlässig auch in Theme-Umgebungen, in
     denen aspect-ratio überschrieben/ignoriert wird. 554/917*100 */
  .kl-honeycomb--desktop {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 0;
    padding-bottom: 60.415%;
    overflow: visible;
  }
  .kl-honeycomb--desktop .hex,
  .kl-honeycomb--desktop .hex__face {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  .kl-honeycomb--desktop .hex--text { cursor: pointer; }
  .kl-honeycomb--desktop .hex--text .hex__face { background: linear-gradient(135deg, #6b6b6b 0%, #4d4d4d 100%); }
  .kl-honeycomb--desktop .hex--text .hex__inner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 10%;
  }
  .kl-honeycomb--desktop .hex--text .hex__label {
    color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.22;
    letter-spacing: .01em; font-size: clamp(9px, 2.5vw, 16px); font-size: clamp(9px, 3.6cqi, 16px);
  }
  .kl-honeycomb--desktop .hex--text:hover,
  .kl-honeycomb--desktop .hex--text:focus-visible { transform: scale(1.045); z-index: 5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
  .kl-honeycomb--desktop .hex--text:hover .hex__face,
  .kl-honeycomb--desktop .hex--text:focus-visible .hex__face { background: linear-gradient(135deg, var(--hex-color) 0%, #4d4d4d 100%); }
  .kl-honeycomb--desktop .hex--text:focus-visible { outline: none; filter: drop-shadow(0 0 0 3px #fff) drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
  .kl-honeycomb--desktop .hex--img .hex__face { background-color: #fff; background-image: var(--hex-img); background-size: cover; background-position: center; }
  .kl-honeycomb--desktop .hex--img:hover { transform: scale(1.045); z-index: 5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }

  /* Mobil-Container: ebenfalls über "padding-bottom in %" (statt
     aspect-ratio) -> behebt das vertikale Beschneiden.
     Verhältnis: 6.3509/3.5*100 */
  .kl-honeycomb--mobile {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 181.454%;
    margin: 0 auto;
    display: none;
    overflow: visible;
  }
  .kl-honeycomb--mobile .mhex,
  .kl-honeycomb--mobile .mhex__face {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  .kl-honeycomb--mobile .mhex--text { cursor: pointer; }
  .kl-honeycomb--mobile .mhex--text .mhex__face { background: linear-gradient(135deg, #6b6b6b 0%, #4d4d4d 100%); }
  .kl-honeycomb--mobile .mhex--text .mhex__inner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 14% 8%;
  }
  .kl-honeycomb--mobile .mhex--text .mhex__label {
    color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.18;
    letter-spacing: .01em; font-size: clamp(10px, 4.2cqi, 15px);
  }
  .kl-honeycomb--mobile .mhex--text:active { filter: brightness(1.08); }
  .kl-honeycomb--mobile .mhex--img .mhex__face { background-color: #fff; background-image: var(--hex-img); background-size: cover; background-position: center; }

  @media (max-width: 760px) {
    .kl-honeycomb--desktop { display: none; }
    .kl-honeycomb--mobile { display: block; }
  }