{"id":10,"date":"2026-09-30T18:20:56","date_gmt":"2026-09-30T18:20:56","guid":{"rendered":"https:\/\/wkeller.keller-objekte.ch\/?page_id=10"},"modified":"2026-09-30T18:25:45","modified_gmt":"2026-09-30T18:25:45","slug":"startseite-konzept","status":"publish","type":"page","link":"https:\/\/wkeller.keller-objekte.ch\/","title":{"rendered":"Startseite Konzept"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<header class=\"elementor-element elementor-element-2dbe7b9 e-con e-atomic-element e-flexbox-base e-default-header e-65b5fe2 \" data-id=\"2dbe7b9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2dbe7b9\">\n    \t\t<div class=\"elementor-element elementor-element-c7e2643 elementor-widget elementor-widget-html\" data-id=\"c7e2643\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\nW. KELLER AG \u2013 Design- und Strukturprototyp Startseite\nF\u00fcr Elementor HTML-Widget \/ Elementor Canvas\nStand: 30.09.2026\nHinweis: Inhalte, Bilder, Links und Funktionen dienen der Konzeptfreigabe.\n-->\n\n<div class=\"wk-proto\" id=\"wk-top\">\n\n  <style>\n    \/* =========================================================\n       W. KELLER AG \u2013 PROTOTYP\n       Alle Styles bewusst unter .wk-proto gekapselt\n       ========================================================= *\/\n\n    .wk-proto {\n      --wk-red: #d02f32;\n      --wk-red-dark: #a91f24;\n      --wk-teal: #285563;\n      --wk-teal-dark: #183b45;\n      --wk-ink: #141719;\n      --wk-muted: #687078;\n      --wk-line: #dfe2e2;\n      --wk-soft: #f3f4f1;\n      --wk-soft-red: #f5dddd;\n      --wk-white: #ffffff;\n      --wk-max: 1240px;\n      --wk-radius: 3px;\n      --wk-shadow: 0 20px 55px rgba(20, 23, 25, .10);\n\n      font-family: Arial, Helvetica, sans-serif;\n      color: var(--wk-ink);\n      background: var(--wk-white);\n      line-height: 1.5;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .wk-proto *,\n    .wk-proto *::before,\n    .wk-proto *::after {\n      box-sizing: border-box;\n    }\n\n    .wk-proto h1,\n    .wk-proto h2,\n    .wk-proto h3,\n    .wk-proto h4,\n    .wk-proto p,\n    .wk-proto ul {\n      margin-top: 0;\n    }\n\n    .wk-proto a {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .wk-proto img {\n      display: block;\n      width: 100%;\n      max-width: 100%;\n    }\n\n    .wk-wrap {\n      width: min(calc(100% - 48px), var(--wk-max));\n      margin-inline: auto;\n    }\n\n    .wk-section {\n      padding: 108px 0;\n    }\n\n    .wk-kicker {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      margin-bottom: 18px;\n      color: var(--wk-red);\n      font-size: 12px;\n      line-height: 1.2;\n      font-weight: 800;\n      letter-spacing: .14em;\n      text-transform: uppercase;\n    }\n\n    .wk-kicker::before {\n      content: \"\";\n      width: 28px;\n      height: 2px;\n      background: currentColor;\n    }\n\n    .wk-display {\n      margin-bottom: 22px;\n      font-size: clamp(42px, 5.7vw, 82px);\n      line-height: .98;\n      letter-spacing: -.045em;\n      font-weight: 760;\n    }\n\n    .wk-h2 {\n      margin-bottom: 24px;\n      font-size: clamp(34px, 4vw, 58px);\n      line-height: 1.02;\n      letter-spacing: -.035em;\n      font-weight: 740;\n    }\n\n    .wk-h3 {\n      margin-bottom: 14px;\n      font-size: clamp(24px, 2.3vw, 34px);\n      line-height: 1.08;\n      letter-spacing: -.02em;\n      font-weight: 720;\n    }\n\n    .wk-lead {\n      max-width: 760px;\n      margin-bottom: 30px;\n      color: #444b50;\n      font-size: clamp(18px, 1.8vw, 23px);\n      line-height: 1.55;\n    }\n\n    .wk-small {\n      color: var(--wk-muted);\n      font-size: 14px;\n    }\n\n    .wk-btns {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .wk-btn {\n      min-height: 50px;\n      padding: 14px 22px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      border: 1px solid var(--wk-ink);\n      border-radius: 2px;\n      font-size: 14px;\n      line-height: 1;\n      font-weight: 750;\n      transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;\n      cursor: pointer;\n    }\n\n    .wk-btn:hover {\n      transform: translateY(-2px);\n    }\n\n    .wk-btn--dark {\n      background: var(--wk-ink);\n      color: var(--wk-white) !important;\n    }\n\n    .wk-btn--dark:hover {\n      background: var(--wk-red);\n      border-color: var(--wk-red);\n    }\n\n    .wk-btn--red {\n      background: var(--wk-red);\n      color: var(--wk-white) !important;\n      border-color: var(--wk-red);\n    }\n\n    .wk-btn--red:hover {\n      background: var(--wk-red-dark);\n      border-color: var(--wk-red-dark);\n    }\n\n    .wk-btn--light {\n      border-color: rgba(255,255,255,.4);\n      color: var(--wk-white) !important;\n      background: rgba(255,255,255,.04);\n    }\n\n    .wk-btn--light:hover {\n      background: var(--wk-white);\n      color: var(--wk-ink) !important;\n    }\n\n    .wk-arrow {\n      font-size: 18px;\n      line-height: 1;\n      transform: translateY(-1px);\n    }\n\n    \/* Prototype marker *\/\n    .wk-prototype-note {\n      padding: 8px 20px;\n      background: var(--wk-teal-dark);\n      color: rgba(255,255,255,.82);\n      text-align: center;\n      font-size: 11px;\n      letter-spacing: .06em;\n    }\n\n    \/* Header *\/\n    .wk-header {\n      position: relative;\n      z-index: 50;\n      background: rgba(255,255,255,.97);\n      border-bottom: 1px solid var(--wk-line);\n    }\n\n    .wk-header__inner {\n      min-height: 82px;\n      display: grid;\n      grid-template-columns: 220px 1fr auto;\n      align-items: center;\n      gap: 28px;\n    }\n\n    .wk-brand {\n      display: inline-flex;\n      align-items: center;\n      gap: 13px;\n      font-size: 22px;\n      font-weight: 800;\n      letter-spacing: -.025em;\n    }\n\n    .wk-brand__mark {\n      position: relative;\n      width: 36px;\n      height: 36px;\n      background:\n        linear-gradient(135deg, var(--wk-red) 0 50%, var(--wk-teal) 50% 100%);\n      overflow: hidden;\n    }\n\n    .wk-brand__mark::after {\n      content: \"\";\n      position: absolute;\n      width: 17px;\n      height: 17px;\n      right: -3px;\n      top: 9px;\n      background: var(--wk-white);\n      transform: rotate(45deg);\n    }\n\n    .wk-nav {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: clamp(18px, 2vw, 32px);\n      font-size: 13px;\n      font-weight: 700;\n    }\n\n    .wk-nav a {\n      position: relative;\n      padding: 31px 0 28px;\n    }\n\n    .wk-nav a::after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      bottom: 22px;\n      width: 0;\n      height: 2px;\n      background: var(--wk-red);\n      transition: width .2s ease;\n    }\n\n    .wk-nav a:hover::after {\n      width: 100%;\n    }\n\n    .wk-header__actions {\n      display: flex;\n      align-items: center;\n      gap: 9px;\n    }\n\n    .wk-language {\n      padding: 10px 4px;\n      color: var(--wk-muted);\n      font-size: 12px;\n      font-weight: 750;\n    }\n\n    .wk-menu-btn {\n      display: none;\n      width: 46px;\n      height: 46px;\n      padding: 0;\n      border: 1px solid var(--wk-line);\n      background: var(--wk-white);\n      cursor: pointer;\n    }\n\n    .wk-menu-btn span {\n      display: block;\n      width: 20px;\n      height: 2px;\n      margin: 5px auto;\n      background: var(--wk-ink);\n    }\n\n    \/* Hero *\/\n    .wk-hero {\n      min-height: 700px;\n      display: grid;\n      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);\n      background: var(--wk-soft);\n    }\n\n    .wk-hero__copy {\n      display: flex;\n      align-items: center;\n      padding: 84px max(38px, calc((100vw - var(--wk-max))\/2 + 24px));\n      padding-right: clamp(45px, 6vw, 100px);\n    }\n\n    .wk-hero__copy-inner {\n      max-width: 690px;\n    }\n\n    .wk-hero__visual {\n      min-height: 700px;\n      position: relative;\n      overflow: hidden;\n      background: #cfd3d0;\n    }\n\n    .wk-hero__visual img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      filter: saturate(.82) contrast(.96);\n      transition: transform 1.2s ease;\n    }\n\n    .wk-hero:hover .wk-hero__visual img {\n      transform: scale(1.015);\n    }\n\n    .wk-hero__visual::before {\n      content: \"\";\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n      background: linear-gradient(90deg, rgba(20,23,25,.04), rgba(20,23,25,.01) 45%, rgba(20,23,25,.20));\n    }\n\n    .wk-hero__caption {\n      position: absolute;\n      z-index: 2;\n      right: 28px;\n      bottom: 28px;\n      max-width: 310px;\n      padding: 18px 20px;\n      color: var(--wk-white);\n      background: rgba(18, 22, 24, .84);\n      backdrop-filter: blur(7px);\n    }\n\n    .wk-hero__caption strong {\n      display: block;\n      margin-bottom: 4px;\n      font-size: 13px;\n    }\n\n    .wk-hero__caption span {\n      font-size: 12px;\n      opacity: .76;\n    }\n\n    .wk-trustbar {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 24px;\n      margin-top: 38px;\n      padding-top: 25px;\n      border-top: 1px solid #d5d8d6;\n      color: #50575b;\n      font-size: 12px;\n      font-weight: 720;\n    }\n\n    .wk-trustbar span {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .wk-trustbar span::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      background: var(--wk-red);\n      border-radius: 50%;\n    }\n\n    \/* Worlds *\/\n    .wk-worlds {\n      background: var(--wk-white);\n    }\n\n    .wk-section-head {\n      display: grid;\n      grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr);\n      gap: 60px;\n      align-items: end;\n      margin-bottom: 52px;\n    }\n\n    .wk-section-head p {\n      margin-bottom: 4px;\n      color: var(--wk-muted);\n      font-size: 17px;\n      line-height: 1.65;\n    }\n\n    .wk-world-grid {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 1px;\n      background: #d7dad9;\n      border: 1px solid #d7dad9;\n    }\n\n    .wk-world {\n      min-width: 0;\n      background: var(--wk-white);\n      overflow: hidden;\n      transition: transform .3s ease, box-shadow .3s ease;\n    }\n\n    .wk-world:hover {\n      position: relative;\n      z-index: 2;\n      transform: translateY(-8px);\n      box-shadow: var(--wk-shadow);\n    }\n\n    .wk-world__image {\n      height: 265px;\n      overflow: hidden;\n      background: #d9dcda;\n    }\n\n    .wk-world__image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      filter: saturate(.8);\n      transition: transform .5s ease, filter .5s ease;\n    }\n\n    .wk-world:hover .wk-world__image img {\n      transform: scale(1.045);\n      filter: saturate(1);\n    }\n\n    .wk-world__body {\n      min-height: 310px;\n      padding: 28px 26px 30px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .wk-world__num {\n      margin-bottom: 30px;\n      color: var(--wk-red);\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: .13em;\n    }\n\n    .wk-world__title {\n      margin-bottom: 5px;\n      font-size: 30px;\n      line-height: 1;\n      letter-spacing: -.035em;\n    }\n\n    .wk-world__sub {\n      margin-bottom: 22px;\n      color: var(--wk-teal);\n      font-size: 13px;\n      font-weight: 800;\n    }\n\n    .wk-world__text {\n      color: var(--wk-muted);\n      font-size: 14px;\n      line-height: 1.6;\n    }\n\n    .wk-world__link {\n      margin-top: auto;\n      padding-top: 26px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: space-between;\n      border-top: 1px solid var(--wk-line);\n      font-size: 13px;\n      font-weight: 800;\n    }\n\n    .wk-world__link span:last-child {\n      color: var(--wk-red);\n      font-size: 20px;\n    }\n\n    \/* Finder strip *\/\n    .wk-finder {\n      padding: 34px 0;\n      color: var(--wk-white);\n      background: var(--wk-red);\n    }\n\n    .wk-finder__inner {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      gap: 30px;\n    }\n\n    .wk-finder__title {\n      margin: 0;\n      font-size: clamp(24px, 2.8vw, 36px);\n      line-height: 1.1;\n      letter-spacing: -.025em;\n    }\n\n    .wk-finder__text {\n      margin: 8px 0 0;\n      color: rgba(255,255,255,.82);\n      font-size: 14px;\n    }\n\n    \/* Competence *\/\n    .wk-competence {\n      position: relative;\n      color: var(--wk-white);\n      background: var(--wk-teal-dark);\n    }\n\n    .wk-competence::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 56px 56px;\n      pointer-events: none;\n    }\n\n    .wk-competence .wk-wrap {\n      position: relative;\n    }\n\n    .wk-competence .wk-kicker {\n      color: #ff8c8e;\n    }\n\n    .wk-competence__intro {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);\n      gap: 80px;\n      align-items: end;\n      margin-bottom: 68px;\n    }\n\n    .wk-competence__intro .wk-h2 {\n      margin-bottom: 0;\n    }\n\n    .wk-competence__intro p {\n      margin-bottom: 4px;\n      color: rgba(255,255,255,.72);\n      font-size: 18px;\n      line-height: 1.65;\n    }\n\n    .wk-competence-grid {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      border-top: 1px solid rgba(255,255,255,.18);\n      border-bottom: 1px solid rgba(255,255,255,.18);\n    }\n\n    .wk-competence-card {\n      min-height: 270px;\n      padding: 34px 30px;\n      border-right: 1px solid rgba(255,255,255,.18);\n    }\n\n    .wk-competence-card:last-child {\n      border-right: 0;\n    }\n\n    .wk-competence-card__num {\n      display: inline-flex;\n      width: 42px;\n      height: 42px;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 56px;\n      border: 1px solid rgba(255,255,255,.35);\n      color: #ffc7c8;\n      font-size: 12px;\n      font-weight: 800;\n    }\n\n    .wk-competence-card h3 {\n      margin-bottom: 11px;\n      font-size: 21px;\n      line-height: 1.15;\n    }\n\n    .wk-competence-card p {\n      margin: 0;\n      color: rgba(255,255,255,.62);\n      font-size: 14px;\n      line-height: 1.58;\n    }\n\n    \/* Products *\/\n    .wk-products {\n      background: var(--wk-soft);\n    }\n\n    .wk-product-grid {\n      display: grid;\n      grid-template-columns: 1.05fr .95fr .95fr;\n      gap: 22px;\n    }\n\n    .wk-product {\n      display: flex;\n      flex-direction: column;\n      background: var(--wk-white);\n      border: 1px solid #e0e2e0;\n      overflow: hidden;\n    }\n\n    .wk-product:first-child {\n      grid-row: span 1;\n    }\n\n    .wk-product__img {\n      height: 330px;\n      overflow: hidden;\n      background: #d8dbd9;\n    }\n\n    .wk-product__img img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform .45s ease;\n    }\n\n    .wk-product:hover .wk-product__img img {\n      transform: scale(1.035);\n    }\n\n    .wk-product__body {\n      padding: 28px 28px 30px;\n    }\n\n    .wk-product__meta {\n      margin-bottom: 10px;\n      color: var(--wk-red);\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: .12em;\n      text-transform: uppercase;\n    }\n\n    .wk-product__body h3 {\n      margin-bottom: 10px;\n      font-size: 25px;\n      letter-spacing: -.025em;\n    }\n\n    .wk-product__body p {\n      margin-bottom: 20px;\n      color: var(--wk-muted);\n      font-size: 14px;\n    }\n\n    .wk-text-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      color: var(--wk-teal);\n      font-size: 13px;\n      font-weight: 800;\n    }\n\n    .wk-text-link:hover {\n      color: var(--wk-red);\n    }\n\n    \/* References *\/\n    .wk-references {\n      background: var(--wk-white);\n    }\n\n    .wk-ref-feature {\n      display: grid;\n      grid-template-columns: 1.15fr .85fr;\n      min-height: 565px;\n      border: 1px solid var(--wk-line);\n    }\n\n    .wk-ref-feature__image {\n      min-height: 565px;\n      overflow: hidden;\n      background: #ddd;\n    }\n\n    .wk-ref-feature__image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .wk-ref-feature__copy {\n      padding: clamp(38px, 5vw, 76px);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      background: #fbfbf9;\n    }\n\n    .wk-ref-feature__copy p {\n      color: var(--wk-muted);\n      font-size: 16px;\n      line-height: 1.7;\n    }\n\n    .wk-ref-tag {\n      display: inline-block;\n      width: fit-content;\n      margin-bottom: 24px;\n      padding: 7px 10px;\n      color: var(--wk-red);\n      border: 1px solid #e5bfc0;\n      font-size: 10px;\n      line-height: 1;\n      font-weight: 800;\n      letter-spacing: .11em;\n      text-transform: uppercase;\n    }\n\n    .wk-ref-stats {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      margin: 30px 0;\n      border-top: 1px solid var(--wk-line);\n      border-bottom: 1px solid var(--wk-line);\n    }\n\n    .wk-ref-stat {\n      padding: 18px 12px 18px 0;\n      border-right: 1px solid var(--wk-line);\n    }\n\n    .wk-ref-stat:last-child {\n      border-right: 0;\n      padding-left: 18px;\n    }\n\n    .wk-ref-stat strong {\n      display: block;\n      margin-bottom: 3px;\n      font-size: 13px;\n    }\n\n    .wk-ref-stat span {\n      color: var(--wk-muted);\n      font-size: 11px;\n    }\n\n    \/* Downloads \/ Lead *\/\n    .wk-docs {\n      background: var(--wk-soft);\n    }\n\n    .wk-docs-grid {\n      display: grid;\n      grid-template-columns: .95fr 1.05fr;\n      gap: 26px;\n      align-items: stretch;\n    }\n\n    .wk-doc-card {\n      padding: 46px;\n      background: var(--wk-white);\n      border: 1px solid var(--wk-line);\n    }\n\n    .wk-doc-card--dark {\n      color: var(--wk-white);\n      background: var(--wk-ink);\n      border-color: var(--wk-ink);\n    }\n\n    .wk-doc-icon {\n      width: 52px;\n      height: 64px;\n      margin-bottom: 46px;\n      position: relative;\n      border: 2px solid currentColor;\n      opacity: .9;\n    }\n\n    .wk-doc-icon::before {\n      content: \"\";\n      position: absolute;\n      right: -2px;\n      top: -2px;\n      width: 17px;\n      height: 17px;\n      background: inherit;\n      border-left: 2px solid currentColor;\n      border-bottom: 2px solid currentColor;\n    }\n\n    .wk-doc-card h3 {\n      margin-bottom: 12px;\n      font-size: 31px;\n      line-height: 1.08;\n    }\n\n    .wk-doc-card p {\n      max-width: 520px;\n      margin-bottom: 30px;\n      color: var(--wk-muted);\n      line-height: 1.7;\n    }\n\n    .wk-doc-card--dark p {\n      color: rgba(255,255,255,.67);\n    }\n\n    .wk-doc-list {\n      margin: 0 0 34px;\n      padding: 0;\n      list-style: none;\n      border-top: 1px solid var(--wk-line);\n    }\n\n    .wk-doc-list li {\n      padding: 13px 0;\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      border-bottom: 1px solid var(--wk-line);\n      font-size: 13px;\n    }\n\n    .wk-doc-list li span:last-child {\n      color: var(--wk-red);\n      font-weight: 800;\n    }\n\n    .wk-doc-card--dark .wk-doc-list {\n      border-color: rgba(255,255,255,.16);\n    }\n\n    .wk-doc-card--dark .wk-doc-list li {\n      border-color: rgba(255,255,255,.16);\n    }\n\n    \/* Company *\/\n    .wk-company {\n      background: var(--wk-white);\n    }\n\n    .wk-company-grid {\n      display: grid;\n      grid-template-columns: .75fr 1.25fr;\n      gap: 90px;\n      align-items: start;\n    }\n\n    .wk-company-year {\n      color: var(--wk-red);\n      font-size: clamp(80px, 12vw, 170px);\n      line-height: .78;\n      font-weight: 800;\n      letter-spacing: -.08em;\n    }\n\n    .wk-company-copy {\n      padding-top: 10px;\n    }\n\n    .wk-company-copy .wk-lead {\n      max-width: 780px;\n    }\n\n    .wk-company-points {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 1px;\n      margin-top: 42px;\n      background: var(--wk-line);\n      border: 1px solid var(--wk-line);\n    }\n\n    .wk-company-point {\n      min-height: 150px;\n      padding: 25px;\n      background: var(--wk-white);\n    }\n\n    .wk-company-point strong {\n      display: block;\n      margin-bottom: 8px;\n      font-size: 15px;\n    }\n\n    .wk-company-point span {\n      color: var(--wk-muted);\n      font-size: 13px;\n      line-height: 1.55;\n    }\n\n    \/* CTA *\/\n    .wk-final-cta {\n      position: relative;\n      padding: 88px 0;\n      color: var(--wk-white);\n      background: var(--wk-red);\n      overflow: hidden;\n    }\n\n    .wk-final-cta::after {\n      content: \"K\";\n      position: absolute;\n      right: -10px;\n      top: 50%;\n      transform: translateY(-53%);\n      color: rgba(255,255,255,.08);\n      font-size: min(34vw, 430px);\n      line-height: .7;\n      font-weight: 900;\n      pointer-events: none;\n    }\n\n    .wk-final-cta__inner {\n      position: relative;\n      z-index: 2;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      gap: 60px;\n    }\n\n    .wk-final-cta h2 {\n      max-width: 760px;\n      margin: 0;\n      font-size: clamp(38px, 4.7vw, 68px);\n      line-height: 1;\n      letter-spacing: -.04em;\n    }\n\n    .wk-final-cta p {\n      max-width: 620px;\n      margin: 18px 0 0;\n      color: rgba(255,255,255,.82);\n      font-size: 17px;\n    }\n\n    \/* Footer *\/\n    .wk-footer {\n      padding: 60px 0 30px;\n      color: var(--wk-white);\n      background: #101416;\n    }\n\n    .wk-footer-grid {\n      display: grid;\n      grid-template-columns: 1.25fr repeat(3, .7fr);\n      gap: 55px;\n    }\n\n    .wk-footer .wk-brand {\n      margin-bottom: 22px;\n    }\n\n    .wk-footer__intro {\n      max-width: 360px;\n      color: rgba(255,255,255,.56);\n      font-size: 13px;\n      line-height: 1.65;\n    }\n\n    .wk-footer h4 {\n      margin-bottom: 18px;\n      color: rgba(255,255,255,.45);\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: .13em;\n      text-transform: uppercase;\n    }\n\n    .wk-footer ul {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .wk-footer li {\n      margin-bottom: 9px;\n      color: rgba(255,255,255,.78);\n      font-size: 13px;\n    }\n\n    .wk-footer li a:hover {\n      color: var(--wk-white);\n    }\n\n    .wk-footer-bottom {\n      margin-top: 55px;\n      padding-top: 24px;\n      display: flex;\n      justify-content: space-between;\n      gap: 30px;\n      border-top: 1px solid rgba(255,255,255,.12);\n      color: rgba(255,255,255,.38);\n      font-size: 11px;\n    }\n\n    \/* Modal *\/\n    .wk-modal {\n      position: fixed;\n      z-index: 99999;\n      inset: 0;\n      padding: 24px;\n      display: none;\n      align-items: center;\n      justify-content: center;\n      background: rgba(10,13,14,.72);\n      backdrop-filter: blur(6px);\n    }\n\n    .wk-modal.is-open {\n      display: flex;\n    }\n\n    .wk-modal__panel {\n      width: min(100%, 620px);\n      max-height: min(90vh, 760px);\n      overflow-y: auto;\n      padding: 40px;\n      position: relative;\n      background: var(--wk-white);\n      box-shadow: 0 40px 100px rgba(0,0,0,.24);\n    }\n\n    .wk-modal__close {\n      width: 40px;\n      height: 40px;\n      position: absolute;\n      right: 16px;\n      top: 16px;\n      border: 1px solid var(--wk-line);\n      background: var(--wk-white);\n      font-size: 25px;\n      cursor: pointer;\n    }\n\n    .wk-modal__panel h3 {\n      margin-bottom: 10px;\n      font-size: 34px;\n      line-height: 1.05;\n      letter-spacing: -.03em;\n    }\n\n    .wk-modal__panel > p {\n      margin-bottom: 28px;\n      color: var(--wk-muted);\n    }\n\n    .wk-form-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px;\n    }\n\n    .wk-field {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .wk-field--full {\n      grid-column: 1 \/ -1;\n    }\n\n    .wk-field label {\n      font-size: 11px;\n      font-weight: 800;\n      text-transform: uppercase;\n      letter-spacing: .08em;\n    }\n\n    .wk-field input,\n    .wk-field textarea,\n    .wk-field select {\n      width: 100%;\n      min-height: 50px;\n      padding: 12px 13px;\n      border: 1px solid #cfd3d2;\n      border-radius: 0;\n      background: var(--wk-white);\n      color: var(--wk-ink);\n      font: inherit;\n      font-size: 14px;\n      outline: none;\n    }\n\n    .wk-field textarea {\n      min-height: 100px;\n      resize: vertical;\n    }\n\n    .wk-field input:focus,\n    .wk-field textarea:focus,\n    .wk-field select:focus {\n      border-color: var(--wk-teal);\n      box-shadow: 0 0 0 1px var(--wk-teal);\n    }\n\n    .wk-form-note {\n      margin: 16px 0 22px;\n      color: var(--wk-muted);\n      font-size: 11px;\n      line-height: 1.5;\n    }\n\n    .wk-form-success {\n      display: none;\n      padding: 20px;\n      margin-top: 20px;\n      color: #174b34;\n      background: #e8f5ee;\n      border: 1px solid #b8dfc9;\n      font-size: 13px;\n    }\n\n    .wk-form-success.is-visible {\n      display: block;\n    }\n\n    \/* Scroll reveal *\/\n    .wk-reveal {\n      opacity: 0;\n      transform: translateY(24px);\n      transition: opacity .65s ease, transform .65s ease;\n    }\n\n    .wk-reveal.is-visible {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 1080px) {\n      .wk-header__inner {\n        grid-template-columns: 190px 1fr auto;\n      }\n\n      .wk-nav {\n        gap: 16px;\n      }\n\n      .wk-nav a {\n        font-size: 12px;\n      }\n\n      .wk-world-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .wk-product-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .wk-product:first-child {\n        grid-column: 1 \/ -1;\n      }\n\n      .wk-competence-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .wk-competence-card:nth-child(2) {\n        border-right: 0;\n      }\n\n      .wk-competence-card:nth-child(-n+2) {\n        border-bottom: 1px solid rgba(255,255,255,.18);\n      }\n    }\n\n    @media (max-width: 920px) {\n      .wk-wrap {\n        width: min(calc(100% - 34px), var(--wk-max));\n      }\n\n      .wk-section {\n        padding: 78px 0;\n      }\n\n      .wk-header__inner {\n        min-height: 72px;\n        grid-template-columns: 1fr auto;\n      }\n\n      .wk-nav,\n      .wk-header__actions .wk-btn,\n      .wk-language {\n        display: none;\n      }\n\n      .wk-menu-btn {\n        display: block;\n      }\n\n      .wk-nav.is-open {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 72px;\n        padding: 12px 17px 20px;\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        gap: 0;\n        background: var(--wk-white);\n        border-top: 1px solid var(--wk-line);\n        border-bottom: 1px solid var(--wk-line);\n        box-shadow: 0 18px 30px rgba(0,0,0,.08);\n      }\n\n      .wk-nav.is-open a {\n        padding: 14px 4px;\n        border-bottom: 1px solid var(--wk-line);\n      }\n\n      .wk-nav.is-open a::after {\n        display: none;\n      }\n\n      .wk-hero {\n        min-height: auto;\n        grid-template-columns: 1fr;\n      }\n\n      .wk-hero__copy {\n        padding: 74px 28px;\n      }\n\n      .wk-hero__visual {\n        min-height: 520px;\n      }\n\n      .wk-section-head,\n      .wk-competence__intro,\n      .wk-company-grid,\n      .wk-final-cta__inner {\n        grid-template-columns: 1fr;\n        gap: 24px;\n      }\n\n      .wk-ref-feature {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-ref-feature__image {\n        min-height: 420px;\n      }\n\n      .wk-docs-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-company-year {\n        margin-bottom: 28px;\n      }\n\n      .wk-footer-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n    }\n\n    @media (max-width: 640px) {\n      .wk-section {\n        padding: 64px 0;\n      }\n\n      .wk-display {\n        font-size: clamp(40px, 12vw, 57px);\n      }\n\n      .wk-h2 {\n        font-size: 38px;\n      }\n\n      .wk-hero__copy {\n        padding: 58px 18px 62px;\n      }\n\n      .wk-hero__visual {\n        min-height: 400px;\n      }\n\n      .wk-hero__caption {\n        left: 18px;\n        right: 18px;\n        bottom: 18px;\n      }\n\n      .wk-world-grid,\n      .wk-product-grid,\n      .wk-competence-grid,\n      .wk-company-points,\n      .wk-footer-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-world__image {\n        height: 250px;\n      }\n\n      .wk-world__body {\n        min-height: auto;\n      }\n\n      .wk-world__link {\n        margin-top: 25px;\n      }\n\n      .wk-competence-card {\n        min-height: auto;\n        border-right: 0;\n        border-bottom: 1px solid rgba(255,255,255,.18);\n      }\n\n      .wk-competence-card:last-child {\n        border-bottom: 0;\n      }\n\n      .wk-competence-card__num {\n        margin-bottom: 26px;\n      }\n\n      .wk-product:first-child {\n        grid-column: auto;\n      }\n\n      .wk-product__img {\n        height: 260px;\n      }\n\n      .wk-ref-feature__image {\n        min-height: 330px;\n      }\n\n      .wk-ref-feature__copy,\n      .wk-doc-card {\n        padding: 30px 24px;\n      }\n\n      .wk-ref-stats {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-ref-stat,\n      .wk-ref-stat:last-child {\n        padding: 13px 0;\n        border-right: 0;\n        border-bottom: 1px solid var(--wk-line);\n      }\n\n      .wk-ref-stat:last-child {\n        border-bottom: 0;\n      }\n\n      .wk-finder__inner {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-final-cta__inner {\n        gap: 28px;\n      }\n\n      .wk-footer-bottom {\n        flex-direction: column;\n      }\n\n      .wk-form-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .wk-field--full {\n        grid-column: auto;\n      }\n\n      .wk-modal {\n        padding: 10px;\n      }\n\n      .wk-modal__panel {\n        padding: 34px 20px 24px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .wk-proto *,\n      .wk-proto *::before,\n      .wk-proto *::after {\n        transition-duration: .01ms !important;\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        scroll-behavior: auto !important;\n      }\n\n      .wk-reveal {\n        opacity: 1;\n        transform: none;\n      }\n    }\n  <\/style>\n\n  <div class=\"wk-prototype-note\">\n    DESIGN- UND STRUKTURPROTOTYP \u00b7 INHALTE, BILDER UND FUNKTIONEN SIND NOCH NICHT FINAL\n  <\/div>\n\n  <!-- HEADER -->\n  <header class=\"wk-header\">\n    <div class=\"wk-wrap wk-header__inner\">\n\n      <a class=\"wk-brand\" href=\"#wk-top\" aria-label=\"W. KELLER AG Startseite\">\n        <span class=\"wk-brand__mark\" aria-hidden=\"true\"><\/span>\n        <span>W. KELLER<\/span>\n      <\/a>\n\n      <nav class=\"wk-nav\" id=\"wk-nav\" aria-label=\"Hauptnavigation\">\n        <a href=\"#produkte\">Produkte &amp; L\u00f6sungen<\/a>\n        <a href=\"#referenzen\">Referenzen<\/a>\n        <a href=\"#unterlagen\">Unterlagen<\/a>\n        <a href=\"#kompetenzen\">Kompetenzen<\/a>\n        <a href=\"#unternehmen\">Unternehmen<\/a>\n      <\/nav>\n\n      <div class=\"wk-header__actions\">\n        <a class=\"wk-language\" href=\"#0\">DE \/ FR<\/a>\n        <a class=\"wk-btn wk-btn--dark\" href=\"#kontakt\">Kontakt<\/a>\n\n        <button class=\"wk-menu-btn\" type=\"button\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"wk-nav\">\n          <span><\/span><span><\/span><span><\/span>\n        <\/button>\n      <\/div>\n\n    <\/div>\n  <\/header>\n\n  <!-- HERO -->\n  <section class=\"wk-hero\">\n\n    <div class=\"wk-hero__copy\">\n      <div class=\"wk-hero__copy-inner\">\n        <div class=\"wk-kicker\">W. KELLER AG \u00b7 Oberb\u00fcren<\/div>\n\n        <h1 class=\"wk-display\">\n          Systeml\u00f6sungen.<br>\n          Klar gedacht.<br>\n          Flexibel umgesetzt.\n        <\/h1>\n\n        <p class=\"wk-lead\">\n          Produkte und L\u00f6sungen f\u00fcr Signaletik, Pr\u00e4sentation, Objektausstattung und Ladenbau.\n          Pers\u00f6nlich beraten, technisch kompetent und auf Wunsch individuell angepasst.\n        <\/p>\n\n        <div class=\"wk-btns\">\n          <a class=\"wk-btn wk-btn--red\" href=\"#produkte\">\n            Produkte entdecken <span class=\"wk-arrow\">\u2192<\/span>\n          <\/a>\n          <a class=\"wk-btn\" href=\"#kontakt\">\n            Beratung anfragen\n          <\/a>\n        <\/div>\n\n        <div class=\"wk-trustbar\" aria-label=\"Unternehmensmerkmale\">\n          <span>Seit 1970<\/span>\n          <span>Schweizer Unternehmen<\/span>\n          <span>Beratung &amp; Konfektionierung in Oberb\u00fcren<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"wk-hero__visual\">\n      <img decoding=\"async\"\n        src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/media\/bilder\/Objekteinrichtung\/Abfall-Trennsysteme\/Abfall-Trennsystem%2C%20Abfallbeh%C3%A4lter%2C%20Wertstoff-Trenner%20INOX-line%204fach.jpg\"\n        alt=\"W. KELLER Objektausstattung mit Abfall-Trennsystem\"\n      >\n      <div class=\"wk-hero__caption\">\n        <strong>Objektausstattung nach Bedarf<\/strong>\n        <span>Standardl\u00f6sungen, Varianten und individuelle Anpassungen.<\/span>\n      <\/div>\n    <\/div>\n\n  <\/section>\n\n  <!-- PRODUKTWELTEN -->\n  <section class=\"wk-section wk-worlds\" id=\"produkte\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-section-head wk-reveal\">\n        <div>\n          <div class=\"wk-kicker\">Produkte &amp; L\u00f6sungen<\/div>\n          <h2 class=\"wk-h2\">Vier Welten.<br>Ein klarer Einstieg.<\/h2>\n        <\/div>\n        <p>\n          Das breite Sortiment wird neu in vier verst\u00e4ndliche Produktwelten gegliedert.\n          Von dort f\u00fchrt der direkte Weg zu Produktgruppen, konkreten Produkten und passenden Referenzen.\n        <\/p>\n      <\/div>\n\n      <div class=\"wk-world-grid\">\n\n        <article class=\"wk-world wk-reveal\">\n          <div class=\"wk-world__image\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Signaletik\/Leitsysteme\/Outdoor\/Stelen_Flachpylone\/stelen_und_flachpylone_test4.jpg?itok=KU2cQxkB\"\n              alt=\"Stelen und Pylone von W. KELLER\"\n            >\n          <\/div>\n          <div class=\"wk-world__body\">\n            <div class=\"wk-world__num\">01 \/ SIGN<\/div>\n            <h3 class=\"wk-world__title\">SIGN<\/h3>\n            <div class=\"wk-world__sub\">Signaletik &amp; Orientierung<\/div>\n            <p class=\"wk-world__text\">\n              Stelen, Pylone, Beschilderungen, Leit- und Orientierungssysteme f\u00fcr innen und aussen.\n            <\/p>\n            <a class=\"wk-world__link\" href=\"#produkte\">\n              <span>SIGN entdecken<\/span><span>\u2192<\/span>\n            <\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"wk-world wk-reveal\">\n          <div class=\"wk-world__image\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Messebau\/Messebau-Systeme\/Ausstellungssystem%20IRUS_5.jpg?itok=oEBPu3S5\"\n              alt=\"Messebau-System von W. KELLER\"\n            >\n          <\/div>\n          <div class=\"wk-world__body\">\n            <div class=\"wk-world__num\">02 \/ EXPO<\/div>\n            <h3 class=\"wk-world__title\">EXPO<\/h3>\n            <div class=\"wk-world__sub\">Messe &amp; Pr\u00e4sentation<\/div>\n            <p class=\"wk-world__text\">\n              Messebau, Displays, Pr\u00e4sentationssysteme, Lichtl\u00f6sungen und Spannrahmen f\u00fcr starke Auftritte.\n            <\/p>\n            <a class=\"wk-world__link\" href=\"#produkte\">\n              <span>EXPO entdecken<\/span><span>\u2192<\/span>\n            <\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"wk-world wk-reveal\">\n          <div class=\"wk-world__image\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Objekteinrichtung\/Garderoben\/INOX-line\/Garderoben%20INOX-line%2C%20Reihen-Garderobenst%C3%A4nder%20aus%20Edelstahl%2C%20Garderobenhaken%2C%20BZ%20Bern.jpg?itok=_yaRBlT5\"\n              alt=\"Garderobenl\u00f6sung von W. KELLER\"\n            >\n          <\/div>\n          <div class=\"wk-world__body\">\n            <div class=\"wk-world__num\">03 \/ OBJEKT<\/div>\n            <h3 class=\"wk-world__title\">OBJEKT<\/h3>\n            <div class=\"wk-world__sub\">Objektausstattung<\/div>\n            <p class=\"wk-world__text\">\n              Garderoben, Abfall- und Wertstoffsysteme sowie funktionale Ausstattung f\u00fcr \u00f6ffentliche und private R\u00e4ume.\n            <\/p>\n            <a class=\"wk-world__link\" href=\"#produkte\">\n              <span>OBJEKT entdecken<\/span><span>\u2192<\/span>\n            <\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"wk-world wk-reveal\">\n          <div class=\"wk-world__image\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Vieler-Beschlag\/Vieler%20T%C3%BCergriffe%2C%20T%C3%BCrfalle%2C%20T%C3%BCrdricker%20aus%20Edelstahl.jpg?itok=5nvECnKO\"\n              alt=\"Beschlag aus dem Ladenbau-Sortiment von W. KELLER\"\n            >\n          <\/div>\n          <div class=\"wk-world__body\">\n            <div class=\"wk-world__num\">04 \/ SHOP-FITTINGS<\/div>\n            <h3 class=\"wk-world__title\">SHOP-FITTINGS<\/h3>\n            <div class=\"wk-world__sub\">Ladenbau &amp; Beschl\u00e4ge<\/div>\n            <p class=\"wk-world__text\">\n              Ladenbau, Innenausbau und Beschl\u00e4ge inklusive ausgew\u00e4hlter L\u00f6sungen aus der Vieler-Partnerschaft.\n            <\/p>\n            <a class=\"wk-world__link\" href=\"#produkte\">\n              <span>SHOP-FITTINGS entdecken<\/span><span>\u2192<\/span>\n            <\/a>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FINDER -->\n  <section class=\"wk-finder\">\n    <div class=\"wk-wrap wk-finder__inner\">\n      <div>\n        <h2 class=\"wk-finder__title\">Noch nicht sicher, welche L\u00f6sung passt?<\/h2>\n        <p class=\"wk-finder__text\">Mit wenigen Klicks zum passenden Produkt \u2013 oder direkt pers\u00f6nlich beraten lassen.<\/p>\n      <\/div>\n      <div class=\"wk-btns\">\n        <a class=\"wk-btn wk-btn--light\" href=\"#produkte\">Produkt\u00fcbersicht<\/a>\n        <a class=\"wk-btn wk-btn--light\" href=\"#kontakt\">Beratung anfragen<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- KOMPETENZ -->\n  <section class=\"wk-section wk-competence\" id=\"kompetenzen\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-competence__intro wk-reveal\">\n        <div>\n          <div class=\"wk-kicker\">Kompetenz aus Oberb\u00fcren<\/div>\n          <h2 class=\"wk-h2\">Mehr als Produkte.<br>Ein Partner f\u00fcr die Umsetzung.<\/h2>\n        <\/div>\n\n        <p>\n          Wenn Standard nicht gen\u00fcgt, beginnt die eigentliche St\u00e4rke von W. KELLER:\n          pers\u00f6nliche Beratung, technische Erfahrung und flexible Anpassung f\u00fcr das konkrete Projekt.\n        <\/p>\n      <\/div>\n\n      <div class=\"wk-competence-grid\">\n\n        <article class=\"wk-competence-card wk-reveal\">\n          <div class=\"wk-competence-card__num\">01<\/div>\n          <h3>Beratung<\/h3>\n          <p>Produkte verstehen, Anforderungen kl\u00e4ren und gemeinsam die passende L\u00f6sung definieren.<\/p>\n        <\/article>\n\n        <article class=\"wk-competence-card wk-reveal\">\n          <div class=\"wk-competence-card__num\">02<\/div>\n          <h3>Anpassung<\/h3>\n          <p>Varianten, Masse, Materialien und Anwendungen werden dort individualisiert, wo es sinnvoll ist.<\/p>\n        <\/article>\n\n        <article class=\"wk-competence-card wk-reveal\">\n          <div class=\"wk-competence-card__num\">03<\/div>\n          <h3>Konfektionierung<\/h3>\n          <p>Kompetenz und Umsetzung in Oberb\u00fcren schaffen kurze Wege und flexible Projektl\u00f6sungen.<\/p>\n        <\/article>\n\n        <article class=\"wk-competence-card wk-reveal\">\n          <div class=\"wk-competence-card__num\">04<\/div>\n          <h3>Begleitung<\/h3>\n          <p>Von der Auswahl bis zur konkreten Anfrage bleibt ein pers\u00f6nlicher Ansprechpartner verf\u00fcgbar.<\/p>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- AUSGEW\u00c4HLTE PRODUKTE -->\n  <section class=\"wk-section wk-products\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-section-head wk-reveal\">\n        <div>\n          <div class=\"wk-kicker\">Ausgew\u00e4hlte L\u00f6sungen<\/div>\n          <h2 class=\"wk-h2\">Produkte werden<br>verst\u00e4ndlicher.<\/h2>\n        <\/div>\n        <p>\n          Jede Produktseite verbindet Nutzen, Einsatzbereiche, Varianten, Bilder,\n          Referenzen und die passenden Unterlagen \u2013 ohne den Besucher mit Detailinformationen zu \u00fcberladen.\n        <\/p>\n      <\/div>\n\n      <div class=\"wk-product-grid\">\n\n        <article class=\"wk-product wk-reveal\">\n          <div class=\"wk-product__img\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Signaletik\/Leitsysteme\/Outdoor\/Stelen_Flachpylone\/stelen_und_flachpylone_test4.jpg?itok=KU2cQxkB\"\n              alt=\"Stelen und Pylone\"\n            >\n          <\/div>\n          <div class=\"wk-product__body\">\n            <div class=\"wk-product__meta\">SIGN \u00b7 Orientierung<\/div>\n            <h3>Stelen &amp; Pylone<\/h3>\n            <p>Orientierung und Information im Aussenraum \u2013 in verschiedenen Formen, Materialien und Ausf\u00fchrungen.<\/p>\n            <a class=\"wk-text-link\" href=\"#0\">Produkt ansehen <span>\u2192<\/span><\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"wk-product wk-reveal\">\n          <div class=\"wk-product__img\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/media\/bilder\/Objekteinrichtung\/Abfall-Trennsysteme\/Abfall-Trennsystem%2C%20Abfallbeh%C3%A4lter%2C%20Wertstoff-Trenner%20INOX-line%204fach.jpg\"\n              alt=\"Abfall-Trennsystem INOX-line\"\n            >\n          <\/div>\n          <div class=\"wk-product__body\">\n            <div class=\"wk-product__meta\">OBJEKT \u00b7 Wertstoffsysteme<\/div>\n            <h3>Abfall-Trennsysteme<\/h3>\n            <p>Robuste und anpassbare L\u00f6sungen f\u00fcr Innen- und Aussenbereiche.<\/p>\n            <a class=\"wk-text-link\" href=\"#0\">Produkt ansehen <span>\u2192<\/span><\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"wk-product wk-reveal\">\n          <div class=\"wk-product__img\">\n            <img decoding=\"async\"\n              loading=\"lazy\"\n              src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/produkte__bersicht\/public\/media\/bilder\/Vieler-Beschlag\/Vieler%20T%C3%BCergriffe%2C%20T%C3%BCrfalle%2C%20T%C3%BCrdricker%20aus%20Edelstahl.jpg?itok=5nvECnKO\"\n              alt=\"Vieler Beschlag\"\n            >\n          <\/div>\n          <div class=\"wk-product__body\">\n            <div class=\"wk-product__meta\">SHOP-FITTINGS \u00b7 Beschl\u00e4ge<\/div>\n            <h3>Vieler &amp; Beschl\u00e4ge<\/h3>\n            <p>Ausgew\u00e4hlte Ladenbau- und Beschlagsl\u00f6sungen mit pers\u00f6nlicher Beratung in der Schweiz.<\/p>\n            <a class=\"wk-text-link\" href=\"#0\">L\u00f6sungen ansehen <span>\u2192<\/span><\/a>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- REFERENZEN -->\n  <section class=\"wk-section wk-references\" id=\"referenzen\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-section-head wk-reveal\">\n        <div>\n          <div class=\"wk-kicker\">Referenzen<\/div>\n          <h2 class=\"wk-h2\">L\u00f6sungen, die sich<br>im Alltag bew\u00e4hren.<\/h2>\n        <\/div>\n        <p>\n          Statt einer m\u00f6glichst grossen Referenzmenge stehen k\u00fcnftig ausgew\u00e4hlte Projekte im Vordergrund.\n          Sie zeigen Aufgabe, L\u00f6sung und eingesetzte Produkte auf einen Blick.\n        <\/p>\n      <\/div>\n\n      <article class=\"wk-ref-feature wk-reveal\">\n\n        <div class=\"wk-ref-feature__image\">\n          <img decoding=\"async\"\n            loading=\"lazy\"\n            src=\"https:\/\/www.w-kellerag.ch\/sites\/default\/files\/styles\/referenz_teaser\/public\/media\/Referenzbilder\/Garderoben\/ALU-line\/DorfschuerWuerenlingen\/Garderoben%20ALU-line%2C%20Reihen-Garderobenst%C3%A4nder%20auf%20Rollen%2C%20mobil%2C%20mit%20Schirmablagen_1%20W%C3%BCrenlingen.jpg?itok=BX_Fmw8X\"\n            alt=\"Referenzprojekt Garderoben ALU-line\"\n          >\n        <\/div>\n\n        <div class=\"wk-ref-feature__copy\">\n          <div class=\"wk-ref-tag\">Ausgew\u00e4hlte Referenz<\/div>\n          <h3 class=\"wk-h3\">Garderobenl\u00f6sung f\u00fcr ein \u00f6ffentliches Geb\u00e4ude<\/h3>\n          <p>\n            Referenzen werden k\u00fcnftig nicht nur als Bildergalerie gezeigt. Eine kurze Ausgangslage,\n            die konkrete L\u00f6sung und die eingesetzten Produkte machen das Projekt nachvollziehbar\n            und f\u00fchren direkt zu relevanten Angeboten.\n          <\/p>\n\n          <div class=\"wk-ref-stats\">\n            <div class=\"wk-ref-stat\">\n              <strong>Bereich<\/strong>\n              <span>Objektausstattung<\/span>\n            <\/div>\n            <div class=\"wk-ref-stat\">\n              <strong>L\u00f6sung<\/strong>\n              <span>Garderobensystem<\/span>\n            <\/div>\n            <div class=\"wk-ref-stat\">\n              <strong>Projektart<\/strong>\n              <span>\u00d6ffentliches Objekt<\/span>\n            <\/div>\n          <\/div>\n\n          <a class=\"wk-btn wk-btn--dark\" href=\"#0\">Referenz ansehen <span class=\"wk-arrow\">\u2192<\/span><\/a>\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n  <\/section>\n\n  <!-- UNTERLAGEN & LEAD -->\n  <section class=\"wk-section wk-docs\" id=\"unterlagen\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-section-head wk-reveal\">\n        <div>\n          <div class=\"wk-kicker\">Unterlagen<\/div>\n          <h2 class=\"wk-h2\">Information offen.<br>Details gezielt.<\/h2>\n        <\/div>\n        <p>\n          Produktbrosch\u00fcren und \u00dcbersichten bleiben frei zug\u00e4nglich.\n          Detaillierte technische Unterlagen k\u00f6nnen bei konkretem Interesse direkt angefordert werden.\n        <\/p>\n      <\/div>\n\n      <div class=\"wk-docs-grid\">\n\n        <article class=\"wk-doc-card wk-reveal\">\n          <div class=\"wk-doc-icon\" aria-hidden=\"true\"><\/div>\n          <h3>Produktbrosch\u00fcren<\/h3>\n          <p>\n            \u00dcberblick, Produktgruppen und Anwendungen ohne Zugangsh\u00fcrde.\n            Die wichtigsten Informationen bleiben direkt verf\u00fcgbar.\n          <\/p>\n\n          <ul class=\"wk-doc-list\">\n            <li><span>SIGN Produkt\u00fcbersicht<\/span><span>PDF<\/span><\/li>\n            <li><span>OBJEKT Produkt\u00fcbersicht<\/span><span>PDF<\/span><\/li>\n            <li><span>EXPO Produkt\u00fcbersicht<\/span><span>PDF<\/span><\/li>\n          <\/ul>\n\n          <a class=\"wk-btn\" href=\"#0\">Brosch\u00fcren ansehen<\/a>\n        <\/article>\n\n        <article class=\"wk-doc-card wk-doc-card--dark wk-reveal\">\n          <div class=\"wk-doc-icon\" aria-hidden=\"true\"><\/div>\n          <h3>Technische Unterlagen anfordern<\/h3>\n          <p>\n            Detailkataloge, Masszeichnungen, Planungsdaten oder Spezialunterlagen werden\n            nach einer kurzen Anfrage automatisch per E-Mail bereitgestellt.\n          <\/p>\n\n          <ul class=\"wk-doc-list\">\n            <li><span>Kurzes Formular<\/span><span>01<\/span><\/li>\n            <li><span>E-Mail mit Download-Link<\/span><span>02<\/span><\/li>\n            <li><span>Qualifizierte Anfrage bei W. KELLER<\/span><span>03<\/span><\/li>\n          <\/ul>\n\n          <button class=\"wk-btn wk-btn--light wk-open-doc-modal\" type=\"button\">\n            Unterlagen anfordern <span class=\"wk-arrow\">\u2192<\/span>\n          <\/button>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- UNTERNEHMEN -->\n  <section class=\"wk-section wk-company\" id=\"unternehmen\">\n    <div class=\"wk-wrap wk-company-grid\">\n\n      <div class=\"wk-company-year wk-reveal\">1970<\/div>\n\n      <div class=\"wk-company-copy wk-reveal\">\n        <div class=\"wk-kicker\">W. KELLER AG<\/div>\n        <h2 class=\"wk-h2\">Erfahrung behalten.<br>Auftritt neu denken.<\/h2>\n\n        <p class=\"wk-lead\">\n          Seit \u00fcber f\u00fcnf Jahrzehnten entwickelt sich W. KELLER vom Handelsunternehmen\n          zum Anbieter vielf\u00e4ltiger Systeml\u00f6sungen f\u00fcr Innen- und Aussenr\u00e4ume.\n          Die neue Website macht diese Entwicklung, die pers\u00f6nliche Beratung und die Kompetenz in Oberb\u00fcren sichtbarer.\n        <\/p>\n\n        <div class=\"wk-company-points\">\n          <div class=\"wk-company-point\">\n            <strong>Pers\u00f6nlich<\/strong>\n            <span>Direkte Ansprechpartner und kompetente Beratung statt anonymer Produktkatalog.<\/span>\n          <\/div>\n          <div class=\"wk-company-point\">\n            <strong>Flexibel<\/strong>\n            <span>Standardprodukte werden dort angepasst, wo das Projekt eine individuelle L\u00f6sung verlangt.<\/span>\n          <\/div>\n          <div class=\"wk-company-point\">\n            <strong>Technisch kompetent<\/strong>\n            <span>Produktwissen, Erfahrung und verst\u00e4ndliche Unterlagen f\u00fcr Planung und Umsetzung.<\/span>\n          <\/div>\n          <div class=\"wk-company-point\">\n            <strong>Schweizerisch<\/strong>\n            <span>Beratung, Konfektionierung und Unternehmenssitz in Oberb\u00fcren.<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- CONTACT CTA -->\n  <section class=\"wk-final-cta\" id=\"kontakt\">\n    <div class=\"wk-wrap wk-final-cta__inner\">\n\n      <div>\n        <h2>Ein Projekt im Kopf?<br>Sprechen wir dar\u00fcber.<\/h2>\n        <p>\n          Ob konkrete Produktanfrage oder erste Beratung:\n          Der n\u00e4chste Schritt soll auf der neuen Website einfach und pers\u00f6nlich bleiben.\n        <\/p>\n      <\/div>\n\n      <div class=\"wk-btns\">\n        <a class=\"wk-btn wk-btn--light\" href=\"mailto:info@w-kellerag.ch\">Kontakt aufnehmen<\/a>\n        <a class=\"wk-btn wk-btn--light\" href=\"https:\/\/www.kellersysteme.ch\/\" target=\"_blank\" rel=\"noopener\">Zum Online-Shop<\/a>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- FOOTER -->\n  <footer class=\"wk-footer\">\n    <div class=\"wk-wrap\">\n\n      <div class=\"wk-footer-grid\">\n\n        <div>\n          <a class=\"wk-brand\" href=\"#wk-top\">\n            <span class=\"wk-brand__mark\" aria-hidden=\"true\"><\/span>\n            <span>W. KELLER<\/span>\n          <\/a>\n          <p class=\"wk-footer__intro\">\n            Systeml\u00f6sungen f\u00fcr Signaletik, Pr\u00e4sentation, Objektausstattung und Ladenbau.\n            Pers\u00f6nlich beraten und flexibel umgesetzt.\n          <\/p>\n        <\/div>\n\n        <div>\n          <h4>Produkte<\/h4>\n          <ul>\n            <li><a href=\"#produkte\">SIGN<\/a><\/li>\n            <li><a href=\"#produkte\">EXPO<\/a><\/li>\n            <li><a href=\"#produkte\">OBJEKT<\/a><\/li>\n            <li><a href=\"#produkte\">SHOP-FITTINGS<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div>\n          <h4>W. KELLER<\/h4>\n          <ul>\n            <li><a href=\"#referenzen\">Referenzen<\/a><\/li>\n            <li><a href=\"#kompetenzen\">Kompetenzen<\/a><\/li>\n            <li><a href=\"#unternehmen\">Unternehmen<\/a><\/li>\n            <li><a href=\"#kontakt\">Kontakt<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div>\n          <h4>Kontakt<\/h4>\n          <ul>\n            <li>Abt Bedastrasse 22<\/li>\n            <li>9245 Oberb\u00fcren<\/li>\n            <li><a href=\"tel:+41719517311\">+41 71 951 73 11<\/a><\/li>\n            <li><a href=\"mailto:info@w-kellerag.ch\">info@w-kellerag.ch<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"wk-footer-bottom\">\n        <span>\u00a9 W. KELLER AG \u00b7 Design- und Strukturprototyp<\/span>\n        <span>Konzept &amp; Umsetzung: Atlex GmbH<\/span>\n      <\/div>\n\n    <\/div>\n  <\/footer>\n\n  <!-- DEMO MODAL: TECHNISCHE UNTERLAGEN -->\n  <div class=\"wk-modal\" id=\"wk-doc-modal\" aria-hidden=\"true\">\n    <div class=\"wk-modal__panel\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"wk-modal-title\">\n\n      <button class=\"wk-modal__close\" type=\"button\" aria-label=\"Fenster schliessen\">\u00d7<\/button>\n\n      <div class=\"wk-kicker\">Technische Unterlagen<\/div>\n      <h3 id=\"wk-modal-title\">Unterlagen anfordern<\/h3>\n      <p>\n        Beispiel f\u00fcr den geplanten Leadprozess. Im produktiven System w\u00fcrde nach dem Absenden automatisch\n        eine E-Mail mit dem passenden Download-Link versendet.\n      <\/p>\n\n      <form id=\"wk-demo-form\">\n        <div class=\"wk-form-grid\">\n\n          <div class=\"wk-field\">\n            <label for=\"wk-firstname\">Vorname<\/label>\n            <input id=\"wk-firstname\" type=\"text\" placeholder=\"Vorname\" required>\n          <\/div>\n\n          <div class=\"wk-field\">\n            <label for=\"wk-lastname\">Nachname<\/label>\n            <input id=\"wk-lastname\" type=\"text\" placeholder=\"Nachname\" required>\n          <\/div>\n\n          <div class=\"wk-field wk-field--full\">\n            <label for=\"wk-company\">Firma<\/label>\n            <input id=\"wk-company\" type=\"text\" placeholder=\"Unternehmen\" required>\n          <\/div>\n\n          <div class=\"wk-field wk-field--full\">\n            <label for=\"wk-email\">E-Mail<\/label>\n            <input id=\"wk-email\" type=\"email\" placeholder=\"name@firma.ch\" required>\n          <\/div>\n\n          <div class=\"wk-field wk-field--full\">\n            <label for=\"wk-document\">Gew\u00fcnschte Unterlage<\/label>\n            <select id=\"wk-document\">\n              <option>Technische Unterlagen \u2013 Stelen &amp; Pylone<\/option>\n              <option>Technische Unterlagen \u2013 Abfall-Trennsysteme<\/option>\n              <option>Technische Unterlagen \u2013 Garderoben<\/option>\n              <option>Andere Unterlage<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"wk-field wk-field--full\">\n            <label for=\"wk-message\">Projekt \/ Bemerkung (optional)<\/label>\n            <textarea id=\"wk-message\" placeholder=\"Kurze Projektangabe oder Frage\"><\/textarea>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"wk-form-note\">\n          Prototyp: Dieses Formular \u00fcbermittelt keine Daten. Im produktiven System werden Datenschutz,\n          Einwilligung und E-Mail-Zustellung entsprechend umgesetzt.\n        <\/div>\n\n        <button class=\"wk-btn wk-btn--red\" type=\"submit\">\n          Unterlagen anfordern <span class=\"wk-arrow\">\u2192<\/span>\n        <\/button>\n\n        <div class=\"wk-form-success\" id=\"wk-form-success\">\n          <strong>Demo abgeschlossen.<\/strong><br>\n          Im produktiven Ablauf w\u00fcrde jetzt automatisch eine E-Mail mit dem Download-Link versendet\n          und die Anfrage bei W. KELLER erfasst.\n        <\/div>\n      <\/form>\n\n    <\/div>\n  <\/div>\n\n  <script>\n    (function () {\n      const root = document.querySelector('.wk-proto');\n      if (!root) return;\n\n      \/* Smooth scroll *\/\n      root.querySelectorAll('a[href^=\"#\"]').forEach(function (link) {\n        link.addEventListener('click', function (e) {\n          const id = this.getAttribute('href');\n          if (!id || id === '#0' || id === '#') {\n            e.preventDefault();\n            return;\n          }\n\n          const target = document.querySelector(id);\n          if (target) {\n            e.preventDefault();\n            target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n\n            const nav = root.querySelector('#wk-nav');\n            const menuBtn = root.querySelector('.wk-menu-btn');\n            if (nav) nav.classList.remove('is-open');\n            if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');\n          }\n        });\n      });\n\n      \/* Mobile navigation *\/\n      const menuBtn = root.querySelector('.wk-menu-btn');\n      const nav = root.querySelector('#wk-nav');\n\n      if (menuBtn && nav) {\n        menuBtn.addEventListener('click', function () {\n          const open = nav.classList.toggle('is-open');\n          menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');\n        });\n      }\n\n      \/* Modal *\/\n      const modal = root.querySelector('#wk-doc-modal');\n      const openButtons = root.querySelectorAll('.wk-open-doc-modal');\n      const closeButton = root.querySelector('.wk-modal__close');\n\n      function openModal() {\n        if (!modal) return;\n        modal.classList.add('is-open');\n        modal.setAttribute('aria-hidden', 'false');\n        document.body.style.overflow = 'hidden';\n\n        const firstInput = modal.querySelector('input');\n        if (firstInput) {\n          setTimeout(function () { firstInput.focus(); }, 60);\n        }\n      }\n\n      function closeModal() {\n        if (!modal) return;\n        modal.classList.remove('is-open');\n        modal.setAttribute('aria-hidden', 'true');\n        document.body.style.overflow = '';\n      }\n\n      openButtons.forEach(function (button) {\n        button.addEventListener('click', openModal);\n      });\n\n      if (closeButton) {\n        closeButton.addEventListener('click', closeModal);\n      }\n\n      if (modal) {\n        modal.addEventListener('click', function (e) {\n          if (e.target === modal) closeModal();\n        });\n      }\n\n      document.addEventListener('keydown', function (e) {\n        if (e.key === 'Escape' && modal && modal.classList.contains('is-open')) {\n          closeModal();\n        }\n      });\n\n      \/* Demo form \u2013 no real submission *\/\n      const form = root.querySelector('#wk-demo-form');\n      const success = root.querySelector('#wk-form-success');\n\n      if (form) {\n        form.addEventListener('submit', function (e) {\n          e.preventDefault();\n          if (success) {\n            success.classList.add('is-visible');\n            success.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n          }\n        });\n      }\n\n      \/* Reveal animation *\/\n      const revealItems = root.querySelectorAll('.wk-reveal');\n\n      if ('IntersectionObserver' in window) {\n        const observer = new IntersectionObserver(function (entries) {\n          entries.forEach(function (entry) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('is-visible');\n              observer.unobserve(entry.target);\n            }\n          });\n        }, { threshold: 0.12 });\n\n        revealItems.forEach(function (item) {\n          observer.observe(item);\n        });\n      } else {\n        revealItems.forEach(function (item) {\n          item.classList.add('is-visible');\n        });\n      }\n    })();\n  <\/script>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/header>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DESIGN- UND STRUKTURPROTOTYP \u00b7 INHALTE, BILDER UND FUNKTIONEN SIND NOCH NICHT FINAL W. KELLER Produkte &amp; L\u00f6sungen Referenzen Unterlagen Kompetenzen Unternehmen DE \/ FR Kontakt W. KELLER AG \u00b7 Oberb\u00fcren Systeml\u00f6sungen. Klar gedacht. Flexibel umgesetzt. Produkte und L\u00f6sungen f\u00fcr Signaletik, Pr\u00e4sentation, Objektausstattung und Ladenbau. Pers\u00f6nlich beraten, technisch kompetent und auf Wunsch individuell angepasst. Produkte entdecken [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/wkeller.keller-objekte.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}