{"id":1402,"date":"2026-06-30T11:00:24","date_gmt":"2026-06-30T11:00:24","guid":{"rendered":"https:\/\/decotec-germany.de\/?page_id=1402"},"modified":"2026-06-30T11:45:54","modified_gmt":"2026-06-30T11:45:54","slug":"test","status":"publish","type":"page","link":"https:\/\/decotec-germany.de\/en\/test\/","title":{"rendered":"Test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1402\" class=\"elementor elementor-1402\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d11567 e-flex e-con-boxed e-con e-parent\" data-id=\"1d11567\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18a468f elementor-widget elementor-widget-html\" data-id=\"18a468f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<style>\r\n:root {\r\n      --bg: #f8f5f1;\r\n      --navy: #3C5572;\r\n      --navy-dark: #152a45;\r\n      --grey-dark: #93918E;\r\n      --grey-mid: #7a7a7a;\r\n      --grey-light: #b8b4ae;\r\n      --track: #e8e4de;\r\n      --white: #ffffff;\r\n    }\r\n    .product-slider {\r\n      width: 100%;\r\n      max-width: 1221px;\r\n      position: relative;\r\n      overflow: hidden;\r\n      min-height: 727px;\r\n    }\r\n\r\n    \/* Full viewport-width image track \u2014 slides across entire page *\/\r\n    .product-track-full {\r\n      position: absolute;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 100vw;\r\n      height: 420px;\r\n      top: 50%;\r\n      margin-top: -230px;\r\n      overflow: hidden;\r\n      z-index: 1;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .slider-grid {\r\n      display: grid;\r\n      grid-template-columns: 1.5fr 0.6fr 1fr;\r\n      gap: 48px;\r\n      align-items: center;\r\n      min-height: 580px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .sr7-bg-text {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      font-size: clamp(5rem, 14vw, 11rem);\r\n      font-weight: 700;\r\n      color: rgba(29, 53, 87, 0.04);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.06em;\r\n      white-space: nowrap;\r\n      pointer-events: none;\r\n      z-index: 0;\r\n      user-select: none;\r\n      line-height: 1;\r\n    }\r\n\r\n    .col-left, .col-center, .col-right { position: relative; z-index: 2; }\r\n\r\n    \/* Text panels \u2014 always absolute, fade only, no layout shift *\/\r\n    .text-panel {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .text-panel.is-visible {\r\n      visibility: visible;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 10px 24px;\r\n      border: 1.69px solid var(--grey-dark);\r\n      border-radius: 999px;\r\n      font-size: 20px;\r\n      font-weight: 400;\r\n      letter-spacing: 1.69px;\r\n      line-height: 24.29px;\r\n      text-transform: uppercase;\r\n      color: var(--grey-dark);\r\n      margin-bottom: 28px;\r\n    }\r\n    .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grey-mid); }\r\n\r\n    .heading {\r\n      font-size: clamp(40px, 8vw, 73px);\r\n      font-weight: 400;\r\n      line-height: 78.2px;\r\n      margin-bottom: 30px;\r\n      letter-spacing: 0%;\r\n    }\r\n    .heading .grey { color: var(--grey-dark); }\r\n    .heading .navy { color: var(--navy); }\r\n\r\n    .chevrons { font-size: 18px; letter-spacing: 2px; color: var(--grey-light); margin-bottom: 20px; }\r\n\r\n    .description {\r\n      padding: 0px 0px 0px 0px;\r\n      text-align: start;\r\n      font-family: \"Golos Text\", Sans-serif;\r\n      font-size: 18px;\r\n      font-weight: 400;\r\n      line-height: 31.3px;\r\n      color: var(--e-global-color-309a96c);\r\n      margin-bottom: 53px;\r\n    }\r\n\r\n    .cta-btn {\r\n       display: inline-flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      text-decoration: none;\r\n      cursor: pointer;\r\n      background-color: var(--e-global-color-2fa0c75);\r\n      font-family: \"Cal Sans\", Sans-serif;\r\n      font-size: 16px;\r\n      font-weight: 400;\r\n      line-height: 38px;\r\n      letter-spacing: 0.8px;\r\n      border-style: solid;\r\n      border-width: 1px 1px 1px 1px;\r\n      border-color: var(--e-global-color-6f0ef18);\r\n      border-radius: 100px 100px 100px 100px;\r\n      padding: 11px 15px 11px 25px;\r\n      color: #fff;\r\n    }\r\n\r\n    .cta-icon {\r\n      width: 42px; height: 42px;\r\n      border-radius: 50%;\r\n      background: var(--white);\r\n      display: flex; align-items: center; justify-content: center;\r\n    }\r\n    .cta-icon svg { width: 16px; height: 16px; stroke: var(--navy); }\r\n\r\n    \/* Center column spacer for image area + info below *\/\r\n    .col-center {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      min-height: 500px;\r\n      justify-content: flex-end;\r\n      align-self: flex-end;\r\n    }\r\n\r\n    .product-slide {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 50%;\r\n      width: 220px;\r\n      margin-left: -110px;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      will-change: transform;\r\n    }\r\n\r\n    .product-image {\r\n      width: auto;\r\n      max-width: 220px;\r\n      max-height: 360px;\r\n      object-fit: contain;\r\n      transform: rotate(-18deg);\r\n      filter: drop-shadow(0 24px 40px rgba(29, 53, 87, 0.12));\r\n    }\r\n\r\n    \/* Product info \u2014 always absolute, fade only *\/\r\n    .info-panel {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      text-align: center;\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .info-panel.is-visible {\r\n      visibility: visible;\r\n    }\r\n\r\n    .product-name {\r\n      font-family: \"Golos Text\", Sans-serif;\r\n      font-size: 20px;\r\n      font-weight: 600;\r\n      line-height: 28px;\r\n      color: var(--e-global-color-2fa0c75);\r\n    }\r\n    .product-line { font-family: \"Golos Text\", Sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    line-height: 20px;\r\n    color: var(--e-global-color-b8ea299); }\r\n    .product-type {margin-top: 4px;\r\n    font-family: \"Golos Text\", Sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    line-height: 16px;\r\n    color: #22222266;}\r\n\r\n    .center-spacer {\r\n      height: 420px;\r\n      width: 100%;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .info-wrap {\r\n      position: relative;\r\n      width: 100%;\r\n      min-height: 90px;\r\n      margin-top: 8px;\r\n    }\r\n\r\n    \/* Right specs \u2014 always absolute, fade only *\/\r\n    .spec-panel {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 22px;\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .spec-panel.is-visible {\r\n      visibility: visible;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .spec-label {\r\n          margin-bottom: 18px;\r\n          color: var(--e-global-color-2fa0c75);\r\n          font-family: \"Cal Sans\", Sans-serif;\r\n          font-size: 18px;\r\n          font-weight: 400;\r\n          text-transform: uppercase;\r\n          line-height: 16px;\r\n          letter-spacing: 2.4px;\r\n    }\r\n    .spec-track { height: 3px; background: var(--track); border-radius: 999px; overflow: hidden; }\r\n    .spec-fill { height: 100%; width: 0; background: var(--navy); border-radius: 999px; }\r\n\r\n    .col-left { min-height: 400px; }\r\n    .col-right { padding-left: 12px; }\r\n\r\n    .slider-nav {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 20px;\r\n      margin-top: 48px;\r\n      z-index: 9999;\r\n    position: relative;\r\n    }\r\n\r\n    .nav-arrow,.nav-arrow:hover,.nav-arrow:focus {\r\n      width: 40px; height: 40px;\r\n      border-radius: 50%;\r\n      border: 1px solid var(--grey-light);\r\n      background: transparent;\r\n      color: var(--grey-light);\r\n      display: flex; align-items: center; justify-content: center;\r\n      cursor: pointer;\r\n      transition: border-color 0.3s, color 0.3s, transform 0.3s;\r\n          padding: 0;\r\n    }\r\n    .nav-arrow:hover { border-color: var(--navy); color: var(--navy); transform: scale(1.1); }\r\n    .nav-arrow svg { width: 18px; height: 18px; }\r\n\r\n    .nav-dots { display: flex; gap: 10px; }\r\n    .nav-dot {\r\n      width: 8px; height: 8px;\r\n      border-radius: 50%;\r\n      border: none;\r\n      background: var(--track);\r\n      cursor: pointer;\r\n      transition: background 0.35s, transform 0.35s;\r\n          padding: 0;\r\n    }\r\n    .nav-dot.active {\r\n        width: 24px;\r\n        background: #3C5572; transform: scale(1.2); \r\n        border-radius: 9999px;\r\n    }\r\n\r\n    .slide-labels {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 6px;\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n    }\r\n    .slide-label {\r\n      background: none; border: none; cursor: pointer;\r\n      font-size: 11px; font-weight: 600;\r\n      letter-spacing: 0.14em;\r\n      text-transform: uppercase;\r\n      color: var(--grey-light);\r\n      text-align: left;\r\n      padding: 2px 0;\r\n      transition: color 0.35s;\r\n    }\r\n    .slide-label.active { color: var(--navy); }\r\n    #slideLabels{\r\n      display: none;\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .slider-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }\r\n      .description { max-width: 100%; margin: 0 auto; }\r\n      .col-right { padding-left: 0; max-width: 400px; margin: 0 auto; width: 100%; }\r\n      .slide-labels { flex-direction: row; gap: 16px; left: 50%; transform: translateX(-50%); bottom: -40px; }\r\n    }\r\n  <\/style>\r\n\r\n\r\n<section class=\"product-slider\">\r\n  <!-- Full-page-width image layer -->\r\n  <div class=\"product-track-full\" id=\"productTrack\">\r\n    <div class=\"product-slide\" data-index=\"0\">\r\n      <img decoding=\"async\" class=\"product-image\" src=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png\" alt=\"Rustic Oak\">\r\n    <\/div>\r\n    <div class=\"product-slide\" data-index=\"1\">\r\n      <img decoding=\"async\" class=\"product-image\" src=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-9.png\" alt=\"Classic Walnut\">\r\n    <\/div>\r\n    <div class=\"product-slide\" data-index=\"2\">\r\n      <img decoding=\"async\" class=\"product-image\" src=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-12.png\" alt=\"Modern Ash\">\r\n    <\/div>\r\n    <div class=\"product-slide\" data-index=\"3\">\r\n      <img decoding=\"async\" class=\"product-image\" src=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-9-1.png\" alt=\"Modern Ash\">\r\n    <\/div>\r\n    <div class=\"product-slide\" data-index=\"4\">\r\n      <img decoding=\"async\" class=\"product-image\" src=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1-1.png\" alt=\"Modern Ash\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"slider-grid\" id=\"sliderGrid\">\r\n    <div class=\"sr7-bg-text\" id=\"bgText\">RUSTIC OAK<\/div>\r\n\r\n    <!-- LEFT: text stays in place, fades -->\r\n    <div class=\"col-left\" id=\"colLeft\">\r\n      <div class=\"text-panel is-visible\" data-index=\"0\">\r\n        <span class=\"tag\">Our Products<\/span>\r\n        <h2 class=\"heading\"><span class=\"navy\">Our<\/span><span class=\"grey\"> Best <\/span><span class=\"navy\">Product<\/span><\/h2>\r\n        <p class=\"description\">Rustic Oak impresses with its deep, rich wood tones and bold grain patterns that add depth and sophistication. The darker finish creates a luxurious and elegant atmosphere while preserving the authentic character of natural oak. This decor is ideal for creating statement interiors with warmth and personality.<\/p>\r\n        <a href=\"#\" class=\"cta-btn\">View Our Products<span class=\"cta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg><\/span><\/a>\r\n      <\/div>\r\n      <div class=\"text-panel\" data-index=\"1\">\r\n        <span class=\"tag\">Our Products<\/span>\r\n        <h2 class=\"heading\"><span class=\"navy\">Our<\/span><span class=\"grey\"> Best <\/span><span class=\"navy\">Product<\/span><\/h2>\r\n        <p class=\"description\">Natural Oak captivates with its authentic oak appearance and balanced, warm color palette. The realistic wood grain and natural knots bring character and depth to any room while maintaining a timeless aesthetic. This decor blends effortlessly with both traditional and contemporary interiors, creating a comfortable and inviting living environment.<\/p>\r\n        <a href=\"#\" class=\"cta-btn\">View Our Products<span class=\"cta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg><\/span><\/a>\r\n      <\/div>\r\n      <div class=\"text-panel\" data-index=\"2\">\r\n        <span class=\"tag\">Our Products<\/span>\r\n        <h2 class=\"heading\"><span class=\"navy\">Our<\/span><span class=\"grey\"> Best <\/span><span class=\"navy\">Product<\/span><\/h2>\r\n        <p class=\"description\">Rustic Oak showcases striking wood character with pronounced grain details and authentic knot structures. Its warm earthy tones bring a sense of tradition and craftsmanship, creating a welcoming and lived-in feel. This decor is perfect for interiors that embrace natural beauty and timeless appeal.<\/p>\r\n        <a href=\"#\" class=\"cta-btn\">View Our Products<span class=\"cta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg><\/span><\/a>\r\n      <\/div>\r\n      <div class=\"text-panel\" data-index=\"3\">\r\n        <span class=\"tag\">Our Products<\/span>\r\n        <h2 class=\"heading\"><span class=\"navy\">Our<\/span><span class=\"grey\"> Best <\/span><span class=\"navy\">Product<\/span><\/h2>\r\n        <p class=\"description\">Nordic Oak \u00a0impresses with its light, natural-looking oak finish, combining Scandinavian lightness and timeless elegance. The fine grain and soft beige tones create a welcoming, warm atmosphere and are a perfect match for modern, minimalist, and Nordic-inspired interior styles. This decor creates a calm, harmonious effect and makes rooms appear larger and brighter.<\/p>\r\n        <a href=\"#\" class=\"cta-btn\">View Our Products<span class=\"cta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg><\/span><\/a>\r\n      <\/div>\r\n      <div class=\"text-panel\" data-index=\"4\">\r\n        <span class=\"tag\">Our Products<\/span>\r\n        <h2 class=\"heading\"><span class=\"navy\">Our<\/span><span class=\"grey\"> Best <\/span><span class=\"navy\">Product<\/span><\/h2>\r\n        <p class=\"description\">Platinum Grey offers a contemporary interpretation of natural wood with its refined grey tones and subtle texture. The elegant color palette creates a modern and sophisticated atmosphere while maintaining the warmth of wood. This decor pairs effortlessly with minimalist and industrial-inspired interiors.<\/p>\r\n        <a href=\"#\" class=\"cta-btn\">View Our Products<span class=\"cta-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M17 7H7M17 7V17\"\/><\/svg><\/span><\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- CENTER: image slides full L\/R -->\r\n    <div class=\"col-center\">\r\n      <div class=\"center-spacer\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"info-wrap\" id=\"infoWrap\">\r\n        <div class=\"info-panel is-visible\" data-index=\"0\">\r\n          <h3 class=\"product-name\">Rustic OAK<\/h3>\r\n          <p class=\"product-line\">PrestigeLine<\/p>\r\n          <p class=\"product-type\">Glue-down vinyl 0.77 mm<\/p>\r\n        <\/div>\r\n        <div class=\"info-panel\" data-index=\"1\">\r\n          <h3 class=\"product-name\">Natural Oak<\/h3>\r\n          <p class=\"product-line\">PrestigeLine<\/p>\r\n          <p class=\"product-type\">Glue-down vinyl 0.77 mm<\/p>\r\n        <\/div>\r\n        <div class=\"info-panel\" data-index=\"2\">\r\n          <h3 class=\"product-name\">Rustic OAK<\/h3>\r\n          <p class=\"product-line\">PremiumLine<\/p>\r\n          <p class=\"product-type\">Rigid click vinyl 0.55 mm<\/p>\r\n        <\/div>\r\n        <div class=\"info-panel\" data-index=\"3\">\r\n          <h3 class=\"product-name\">Natural OAK<\/h3>\r\n          <p class=\"product-line\">PremiumLine<\/p>\r\n          <p class=\"product-type\">Rigid click vinyl 0.55 mm<\/p>\r\n        <\/div>\r\n        <div class=\"info-panel\" data-index=\"4\">\r\n            <h3 class=\"product-name\">Platinum Grey<\/h3>\r\n            <p class=\"product-line\">PrestigeLine<\/p>\r\n            <p class=\"product-type\">Glue-down vinyl 0.77 mm<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT: specs stay in place, fade -->\r\n    <div class=\"col-right\" id=\"colRight\">\r\n      <div class=\"spec-panel is-visible\" data-index=\"0\">\r\n        <div class=\"spec-item\" data-value=\"90\"><div class=\"spec-label\">Wear Layer<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"85\"><div class=\"spec-label\">Wet Room Suitability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"10\"><div class=\"spec-label\">Slip Resistance<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"0\"><div class=\"spec-label\">Durability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"0\"><div class=\"spec-label\">Sound Insulation<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"spec-panel\" data-index=\"1\">\r\n        <div class=\"spec-item\" data-value=\"88\"><div class=\"spec-label\">Wear Layer<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"78\"><div class=\"spec-label\">Wet Room Suitability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"25\"><div class=\"spec-label\">Slip Resistance<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"72\"><div class=\"spec-label\">Durability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"60\"><div class=\"spec-label\">Sound Insulation<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"spec-panel\" data-index=\"2\">\r\n        <div class=\"spec-item\" data-value=\"75\"><div class=\"spec-label\">Wear Layer<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"92\"><div class=\"spec-label\">Wet Room Suitability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"40\"><div class=\"spec-label\">Slip Resistance<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"85\"><div class=\"spec-label\">Durability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"55\"><div class=\"spec-label\">Sound Insulation<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"spec-panel\" data-index=\"3\">\r\n        <div class=\"spec-item\" data-value=\"80\"><div class=\"spec-label\">Wear Layer<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"90\"><div class=\"spec-label\">Wet Room Suitability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"35\"><div class=\"spec-label\">Slip Resistance<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"80\"><div class=\"spec-label\">Durability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"50\"><div class=\"spec-label\">Sound Insulation<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"spec-panel\" data-index=\"4\">\r\n        <div class=\"spec-item\" data-value=\"85\"><div class=\"spec-label\">Wear Layer<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"80\"><div class=\"spec-label\">Wet Room Suitability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"30\"><div class=\"spec-label\">Slip Resistance<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"75\"><div class=\"spec-label\">Durability<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n        <div class=\"spec-item\" data-value=\"45\"><div class=\"spec-label\">Sound Insulation<\/div><div class=\"spec-track\"><div class=\"spec-fill\"><\/div><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"slide-labels\" id=\"slideLabels\"><\/div>\r\n\r\n  <nav class=\"slider-nav\">\r\n    <button class=\"nav-arrow nav-prev\" aria-label=\"Previous\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg><\/button>\r\n    <div class=\"nav-dots\" id=\"navDots\"><\/div>\r\n    <button class=\"nav-arrow nav-next\" aria-label=\"Next\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg><\/button>\r\n  <\/nav>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  const EASE = 'power3.inOut';\r\n  const IMG_DUR = 1.2;\r\n  const TEXT_DUR = 0.8;\r\n  const AUTOPLAY_MS = 6000;\r\n\r\n  const bgTexts = ['RUSTIC OAK', 'WALNUT', 'MODERN ASH'];\r\n  const track = document.getElementById('productTrack');\r\n  const slideW = () => window.innerWidth;\r\n  const productSlides = [...document.querySelectorAll('.product-slide')];\r\n  const textPanels = [...document.querySelectorAll('.text-panel')];\r\n  const infoPanels = [...document.querySelectorAll('.info-panel')];\r\n  const specPanels = [...document.querySelectorAll('.spec-panel')];\r\n  const bgText = document.getElementById('bgText');\r\n  const dotsEl = document.getElementById('navDots');\r\n  const labelsEl = document.getElementById('slideLabels');\r\n\r\n  let current = 0;\r\n  let busy = false;\r\n  let autoplay = null;\r\n\r\n  productSlides.forEach((_, i) => {\r\n    const dot = document.createElement('button');\r\n    dot.className = 'nav-dot' + (i === 0 ? ' active' : '');\r\n    dot.addEventListener('click', () => goTo(i));\r\n    dotsEl.appendChild(dot);\r\n\r\n    const lbl = document.createElement('button');\r\n    lbl.className = 'slide-label' + (i === 0 ? ' active' : '');\r\n    lbl.textContent = bgTexts[i];\r\n    lbl.addEventListener('click', () => goTo(i));\r\n    labelsEl.appendChild(lbl);\r\n  });\r\n\r\n  const dots = [...dotsEl.children];\r\n  const labels = [...labelsEl.children];\r\n\r\n  function resetBars(panel) {\r\n    panel.querySelectorAll('.spec-fill').forEach(f => gsap.set(f, { width: '0%' }));\r\n  }\r\n\r\n  function animateBars(panel) {\r\n    panel.querySelectorAll('.spec-item').forEach((item, i) => {\r\n      gsap.to(item.querySelector('.spec-fill'), {\r\n        width: item.dataset.value + '%',\r\n        duration: 1.2,\r\n        ease: EASE,\r\n        delay: 0.25 + i * 0.1\r\n      });\r\n    });\r\n  }\r\n\r\n  function initProducts() {\r\n    const w = slideW();\r\n    productSlides.forEach((el, i) => {\r\n      const isCurrent = i === current;\r\n      gsap.set(el, {\r\n        x: isCurrent ? 0 : w,\r\n        opacity: isCurrent ? 1 : 0,\r\n        zIndex: isCurrent ? 2 : 1,\r\n        visibility: isCurrent ? 'visible' : 'hidden'\r\n      });\r\n    });\r\n  }\r\n\r\n  function setPanelVisible(panels, index) {\r\n    panels.forEach((p, i) => {\r\n      const on = i === index;\r\n      p.classList.toggle('is-visible', on);\r\n      gsap.set(p, { opacity: on ? (i === index ? 1 : 0) : 0 });\r\n    });\r\n  }\r\n\r\n  \/* Text\/specs: crossfade in place \u2014 no movement, no layout change *\/\r\n  function fadeText(from, to) {\r\n    const outs = [textPanels[from], infoPanels[from], specPanels[from]];\r\n    const ins = [textPanels[to], infoPanels[to], specPanels[to]];\r\n\r\n    gsap.killTweensOf([...outs, ...ins, bgText]);\r\n\r\n    ins.forEach(el => {\r\n      el.classList.add('is-visible');\r\n      gsap.set(el, { opacity: 0 });\r\n    });\r\n\r\n    const tl = gsap.timeline();\r\n\r\n    tl.to(outs, {\r\n      opacity: 0,\r\n      duration: TEXT_DUR,\r\n      ease: EASE,\r\n      onComplete: () => outs.forEach(el => el.classList.remove('is-visible'))\r\n    }, 0);\r\n\r\n    tl.to(ins, {\r\n      opacity: 1,\r\n      duration: TEXT_DUR,\r\n      ease: EASE\r\n    }, 0);\r\n\r\n    tl.to(bgText, {\r\n      opacity: 0,\r\n      duration: TEXT_DUR * 0.4,\r\n      ease: EASE,\r\n      onComplete: () => { bgText.textContent = bgTexts[to]; }\r\n    }, 0);\r\n\r\n    tl.to(bgText, {\r\n      opacity: 1,\r\n      duration: TEXT_DUR * 0.4,\r\n      ease: EASE\r\n    }, TEXT_DUR * 0.4);\r\n\r\n    resetBars(specPanels[to]);\r\n    animateBars(specPanels[to]);\r\n  }\r\n\r\n  \/* Product image: slides full page width L\/R *\/\r\n  function slideImage(from, to, dir) {\r\n    const outgoing = productSlides[from];\r\n    const incoming = productSlides[to];\r\n    const w = slideW();\r\n\r\n    const outX = dir === 1 ? -w : w;\r\n    const inStartX = dir === 1 ? w : -w;\r\n\r\n    gsap.killTweensOf([outgoing, incoming]);\r\n\r\n    gsap.set(incoming, { x: inStartX, opacity: 1, zIndex: 3, visibility: 'visible' });\r\n    gsap.set(outgoing, { zIndex: 2 });\r\n\r\n    const tl = gsap.timeline();\r\n\r\n    tl.to(outgoing, {\r\n      x: outX,\r\n      opacity: 0,\r\n      duration: IMG_DUR,\r\n      ease: EASE\r\n    }, 0);\r\n\r\n    tl.fromTo(incoming,\r\n      { x: inStartX },\r\n      { x: 0, opacity: 1, duration: IMG_DUR, ease: EASE },\r\n      0\r\n    );\r\n\r\n    tl.set(outgoing, {\r\n      x: dir === 1 ? w : -w,\r\n      opacity: 0,\r\n      zIndex: 1,\r\n      visibility: 'hidden'\r\n    });\r\n\r\n    tl.set(incoming, { zIndex: 2, visibility: 'visible' });\r\n\r\n    return tl;\r\n  }\r\n\r\n  function goTo(index) {\r\n    if (busy || index === current) return;\r\n    busy = true;\r\n\r\n    const dir = index > current ? 1 : -1;\r\n    const prev = current;\r\n\r\n    fadeText(prev, index);\r\n    slideImage(prev, index, dir);\r\n\r\n    gsap.delayedCall(IMG_DUR, () => { busy = false; });\r\n\r\n    current = index;\r\n    dots.forEach((d, i) => d.classList.toggle('active', i === current));\r\n    labels.forEach((l, i) => l.classList.toggle('active', i === current));\r\n\r\n    clearInterval(autoplay);\r\n    autoplay = setInterval(() => goTo((current + 1) % productSlides.length), AUTOPLAY_MS);\r\n  }\r\n\r\n  document.querySelector('.nav-prev').addEventListener('click', () => goTo((current - 1 + productSlides.length) % productSlides.length));\r\n  document.querySelector('.nav-next').addEventListener('click', () => goTo((current + 1) % productSlides.length));\r\n  document.addEventListener('keydown', e => {\r\n    if (e.key === 'ArrowLeft') goTo((current - 1 + productSlides.length) % productSlides.length);\r\n    if (e.key === 'ArrowRight') goTo((current + 1) % productSlides.length);\r\n  });\r\n\r\n  window.addEventListener('resize', () => {\r\n    const w = slideW();\r\n    productSlides.forEach((el, i) => {\r\n      if (i === current) gsap.set(el, { x: 0 });\r\n      else gsap.set(el, { x: w, opacity: 0, visibility: 'hidden' });\r\n    });\r\n  });\r\n\r\n  \/\/ Init\r\n  textPanels[0].classList.add('is-visible');\r\n  infoPanels[0].classList.add('is-visible');\r\n  specPanels[0].classList.add('is-visible');\r\n  gsap.set([textPanels[0], infoPanels[0], specPanels[0]], { opacity: 1 });\r\n  initProducts();\r\n  animateBars(specPanels[0]);\r\n  autoplay = setInterval(() => goTo((current + 1) % productSlides.length), AUTOPLAY_MS);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RUSTIC OAK Our Products Our Best Product Rustic Oak impresses with its deep, rich wood tones and bold grain patterns that add depth and sophistication. The darker finish creates a luxurious and elegant atmosphere while preserving the authentic character of natural oak. This decor is ideal for creating statement interiors with warmth and personality. View [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1402","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Test - decotec.stagingshub.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/decotec-germany.de\/en\/test\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test - decotec.stagingshub.com\" \/>\n<meta property=\"og:description\" content=\"RUSTIC OAK Our Products Our Best Product Rustic Oak impresses with its deep, rich wood tones and bold grain patterns that add depth and sophistication. The darker finish creates a luxurious and elegant atmosphere while preserving the authentic character of natural oak. This decor is ideal for creating statement interiors with warmth and personality. View [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/decotec-germany.de\/en\/test\/\" \/>\n<meta property=\"og:site_name\" content=\"decotec.stagingshub.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-30T11:45:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/\",\"url\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/\",\"name\":\"Test - decotec.stagingshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/decotec-germany.de\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image-11-1.png\",\"datePublished\":\"2026-06-30T11:00:24+00:00\",\"dateModified\":\"2026-06-30T11:45:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/#primaryimage\",\"url\":\"https:\\\/\\\/decotec-germany.de\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image-11-1.png\",\"contentUrl\":\"https:\\\/\\\/decotec-germany.de\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image-11-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/test\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/decotec-germany.de\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#website\",\"url\":\"https:\\\/\\\/decotec-germany.de\\\/\",\"name\":\"decotec.stagingshub.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/decotec-germany.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#organization\",\"name\":\"decotec.stagingshub.com\",\"url\":\"https:\\\/\\\/decotec-germany.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/decotec-germany.de\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Decotec.svg\",\"contentUrl\":\"https:\\\/\\\/decotec-germany.de\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Decotec.svg\",\"width\":631,\"height\":151,\"caption\":\"decotec.stagingshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/decotec-germany.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test - decotec.stagingshub.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/decotec-germany.de\/en\/test\/","og_locale":"en_US","og_type":"article","og_title":"Test - decotec.stagingshub.com","og_description":"RUSTIC OAK Our Products Our Best Product Rustic Oak impresses with its deep, rich wood tones and bold grain patterns that add depth and sophistication. The darker finish creates a luxurious and elegant atmosphere while preserving the authentic character of natural oak. This decor is ideal for creating statement interiors with warmth and personality. View [&hellip;]","og_url":"https:\/\/decotec-germany.de\/en\/test\/","og_site_name":"decotec.stagingshub.com","article_modified_time":"2026-06-30T11:45:54+00:00","og_image":[{"url":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/decotec-germany.de\/en\/test\/","url":"https:\/\/decotec-germany.de\/en\/test\/","name":"Test - decotec.stagingshub.com","isPartOf":{"@id":"https:\/\/decotec-germany.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/decotec-germany.de\/en\/test\/#primaryimage"},"image":{"@id":"https:\/\/decotec-germany.de\/en\/test\/#primaryimage"},"thumbnailUrl":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png","datePublished":"2026-06-30T11:00:24+00:00","dateModified":"2026-06-30T11:45:54+00:00","breadcrumb":{"@id":"https:\/\/decotec-germany.de\/en\/test\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/decotec-germany.de\/en\/test\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/decotec-germany.de\/en\/test\/#primaryimage","url":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png","contentUrl":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/image-11-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/decotec-germany.de\/en\/test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/decotec-germany.de\/en\/"},{"@type":"ListItem","position":2,"name":"Test"}]},{"@type":"WebSite","@id":"https:\/\/decotec-germany.de\/#website","url":"https:\/\/decotec-germany.de\/","name":"decotec.stagingshub.com","description":"","publisher":{"@id":"https:\/\/decotec-germany.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/decotec-germany.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/decotec-germany.de\/#organization","name":"decotec.stagingshub.com","url":"https:\/\/decotec-germany.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/decotec-germany.de\/#\/schema\/logo\/image\/","url":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/Decotec.svg","contentUrl":"https:\/\/decotec-germany.de\/wp-content\/uploads\/2026\/06\/Decotec.svg","width":631,"height":151,"caption":"decotec.stagingshub.com"},"image":{"@id":"https:\/\/decotec-germany.de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/pages\/1402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/comments?post=1402"}],"version-history":[{"count":40,"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/pages\/1402\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/pages\/1402\/revisions\/1480"}],"wp:attachment":[{"href":"https:\/\/decotec-germany.de\/en\/wp-json\/wp\/v2\/media?parent=1402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}