{"id":378,"date":"2026-07-31T16:44:35","date_gmt":"2026-07-31T14:44:35","guid":{"rendered":"http:\/\/philipppablitschko.de.w021e2d6.kasserver.com\/?page_id=378"},"modified":"2026-08-01T11:00:35","modified_gmt":"2026-08-01T09:00:35","slug":"vario-m1","status":"publish","type":"page","link":"https:\/\/philipppablitschko.de\/index.php\/vario-m1\/","title":{"rendered":"Vario M1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"378\" class=\"elementor elementor-378\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b11565 e-flex e-con-boxed e-con e-parent\" data-id=\"2b11565\" 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-9105a16 elementor-widget elementor-widget-html\" data-id=\"9105a16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Hind+Guntur:wght@700&family=Inter:wght@100..900&display=swap\");\n\n  html {\n    scroll-behavior: smooth;\n    overflow-x: clip;\n  }\n\n  body {\n    margin: 0;\n    overflow-x: clip;\n    background: #f1eee8;\n  }\n\n  .pp-case,\n  .pp-case * {\n    box-sizing: border-box;\n  }\n\n  \/* ======================================================\n     GRUNDLAYOUT\n     ====================================================== *\/\n\n  .pp-case {\n    width: auto;\n    min-height: 100vh;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    overflow-x: clip;\n\n    background: #f1eee8;\n    color: #050505;\n\n    font-family: \"Inter\", Arial, sans-serif;\n  }\n\n  \/* ======================================================\n     KOPFBEREICH\n     ====================================================== *\/\n\n  .pp-case-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n\n    padding:\n      30px\n      clamp(24px, 5vw, 90px);\n  }\n\n  .pp-case-back {\n    position: relative;\n\n    color: rgba(0, 0, 0, 0.56);\n\n    font-family: \"Inter\", Arial, sans-serif;\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 3px;\n\n    text-decoration: none;\n    text-transform: uppercase;\n\n    transition: color 180ms ease;\n  }\n\n  .pp-case-back::after {\n    content: \"\";\n\n    position: absolute;\n    left: 0;\n    right: 3px;\n    bottom: -7px;\n\n    height: 1px;\n\n    background: #050505;\n\n    transform: scaleX(0);\n    transform-origin: right center;\n\n    transition:\n      transform 280ms ease;\n  }\n\n  .pp-case-back:hover {\n    color: #050505;\n  }\n\n  .pp-case-back:hover::after {\n    transform: scaleX(1);\n    transform-origin: left center;\n  }\n\n  .pp-case-logo {\n    display: block;\n\n    width: 110px;\n\n    line-height: 0;\n  }\n\n  .pp-case-logo img {\n    display: block;\n\n    width: 100% !important;\n    max-width: none !important;\n\n    height: auto !important;\n    max-height: none !important;\n\n    object-fit: contain;\n\n    filter: invert(0) !important;\n  }\n\n  \/* ======================================================\n     PROJEKTEINLEITUNG\n     ====================================================== *\/\n\n  .pp-case-intro {\n    width: min(100%, 1700px);\n    margin: 0 auto;\n\n    padding:\n      clamp(80px, 9vw, 160px)\n      clamp(24px, 6vw, 110px)\n      clamp(80px, 8vw, 140px);\n  }\n\n  .pp-case-number {\n    display: block;\n\n    margin-bottom: 25px;\n\n    color: rgba(0, 0, 0, 0.5);\n\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 4px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-case-title {\n    max-width: 1500px;\n\n    margin: 0;\n\n    color: #050505;\n\n    font-family: \"Hind Guntur\", sans-serif;\n    font-size: clamp(75px, 10vw, 190px);\n    font-weight: 700;\n    line-height: 0.82;\n    letter-spacing: 1px;\n\n    text-transform: uppercase;\n  }\n\n  \/* ======================================================\n     PROJEKTINFORMATIONEN\n     ====================================================== *\/\n\n  .pp-case-meta {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n\n    gap: 30px;\n\n    margin-top: clamp(65px, 7vw, 120px);\n    padding-top: 25px;\n\n    border-top: 1px solid rgba(0, 0, 0, 0.25);\n  }\n\n  .pp-case-meta-item {\n    min-width: 0;\n  }\n\n  .pp-case-meta-item span {\n    display: block;\n\n    margin-bottom: 10px;\n\n    color: rgba(0, 0, 0, 0.48);\n\n    font-size: 8px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-case-meta-item strong {\n    display: block;\n\n    color: #050505;\n\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n\n  \/* ======================================================\n     GALERIE\n     ====================================================== *\/\n\n  .pp-case-gallery {\n    width: min(calc(100% - 48px), 1700px);\n    margin: 0 auto;\n\n    padding-bottom: clamp(90px, 9vw, 150px);\n  }\n\n  \/* ======================================================\n     GROSSES AUTOPLAY-VIDEO\n     ====================================================== *\/\n\n  .pp-case-video {\n    position: relative;\n\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n\n    margin:\n      0\n      0\n      clamp(25px, 4vw, 70px);\n\n    overflow: hidden;\n\n    background: #050505;\n  }\n\n  .pp-case-video video {\n    position: absolute;\n    inset: 0;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    outline: 0;\n\n    background: #050505;\n\n    object-fit: contain;\n    object-position: center;\n\n    pointer-events: none;\n  }\n\n  \/* ======================================================\n     NORMALE BILDER\n     ====================================================== *\/\n\n  .pp-case-image {\n    width: 100%;\n\n    margin:\n      0\n      0\n      clamp(25px, 4vw, 70px);\n\n    overflow: hidden;\n\n    background: #dad6ce;\n  }\n\n  .pp-case-image img {\n    display: block;\n\n    width: 100%;\n    height: auto;\n  }\n\n  \/* ======================================================\n     ZWEI BILDER NEBENEINANDER\n     ====================================================== *\/\n\n  .pp-case-image-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n\n    gap: clamp(20px, 3vw, 50px);\n\n    margin-bottom: clamp(25px, 4vw, 70px);\n  }\n\n  .pp-case-image-row .pp-case-image {\n    margin-bottom: 0;\n  }\n\n  \/* ======================================================\n     PROJEKTBESCHREIBUNG\n     ====================================================== *\/\n\n  .pp-case-description {\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n\n    gap: 50px;\n\n    width: min(calc(100% - 48px), 1300px);\n\n    margin:\n      clamp(80px, 9vw, 150px)\n      auto;\n  }\n\n  .pp-case-description-label {\n    color: rgba(0, 0, 0, 0.55);\n\n    font-size: 9px;\n    font-weight: 500;\n    line-height: 1.4;\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-case-description p {\n    max-width: 850px;\n\n    margin: 0;\n\n    color: #050505;\n\n    font-size: clamp(18px, 1.8vw, 30px);\n    font-weight: 400;\n    line-height: 1.45;\n  }\n\n  \/* ======================================================\n     FOOTER\n     ====================================================== *\/\n\n  .pp-case-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 35px;\n\n    width: min(calc(100% - 48px), 1700px);\n    margin: 0 auto;\n\n    padding:\n      26px\n      0\n      45px;\n\n    border-top: 1px solid rgba(0, 0, 0, 0.18);\n\n    color: rgba(0, 0, 0, 0.42);\n\n    font-family: \"Inter\", Arial, sans-serif;\n    font-size: 8px;\n    font-weight: 500;\n    line-height: 1.5;\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-case-footer-copy {\n    flex: 0 0 auto;\n  }\n\n  .pp-case-footer-links {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n\n    gap: 15px 28px;\n  }\n\n  .pp-case-footer-links a {\n    position: relative;\n\n    color: inherit;\n\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition: color 180ms ease;\n  }\n\n  .pp-case-footer-links a::after {\n    content: \"\";\n\n    position: absolute;\n    left: 0;\n    right: 3px;\n    bottom: -6px;\n\n    height: 1px;\n\n    background: #050505;\n\n    transform: scaleX(0);\n    transform-origin: right center;\n\n    transition:\n      transform 280ms ease;\n  }\n\n  .pp-case-footer-links a:hover,\n  .pp-case-footer-links a.is-current {\n    color: #050505;\n  }\n\n  .pp-case-footer-links a:hover::after,\n  .pp-case-footer-links a.is-current::after {\n    transform: scaleX(1);\n    transform-origin: left center;\n  }\n\n  \/* ======================================================\n     TABLET\n     ====================================================== *\/\n\n  @media (max-width: 1050px) {\n    .pp-case-header {\n      padding:\n        25px\n        32px;\n    }\n\n    .pp-case-intro {\n      padding-left: 42px;\n      padding-right: 42px;\n    }\n\n    .pp-case-gallery {\n      width: calc(100% - 84px);\n    }\n\n    .pp-case-description {\n      width: calc(100% - 84px);\n    }\n\n    .pp-case-footer {\n      align-items: flex-start;\n\n      width: calc(100% - 84px);\n    }\n\n    .pp-case-footer-links {\n      max-width: 650px;\n    }\n  }\n\n  \/* ======================================================\n     SMARTPHONE\n     ====================================================== *\/\n\n  @media (max-width: 700px) {\n    .pp-case-header {\n      padding: 20px;\n    }\n\n    .pp-case-back {\n      font-size: 8px;\n      letter-spacing: 2px;\n    }\n\n    .pp-case-logo {\n      width: 75px;\n    }\n\n    .pp-case-intro {\n      padding:\n        70px\n        20px;\n    }\n\n    .pp-case-title {\n      font-size: clamp(55px, 16vw, 90px);\n      line-height: 0.84;\n      letter-spacing: -0.02em;\n    }\n\n    .pp-case-meta {\n      grid-template-columns: 1fr;\n\n      gap: 0;\n\n      margin-top: 55px;\n      padding-top: 0;\n\n      border-top: 1px solid rgba(0, 0, 0, 0.25);\n    }\n\n    .pp-case-meta-item {\n      padding: 20px 0;\n\n      border-bottom: 1px solid rgba(0, 0, 0, 0.18);\n    }\n\n    .pp-case-gallery {\n      width: calc(100% - 40px);\n\n      padding-bottom: 90px;\n    }\n\n    .pp-case-video {\n      width: 100%;\n      aspect-ratio: 16 \/ 9;\n\n      margin-bottom: 25px;\n    }\n\n    .pp-case-image-row {\n      grid-template-columns: 1fr;\n\n      gap: 25px;\n    }\n\n    .pp-case-description {\n      grid-template-columns: 1fr;\n\n      gap: 25px;\n\n      width: 100%;\n\n      margin:\n        80px\n        auto;\n    }\n\n    .pp-case-description p {\n      font-size: 19px;\n      line-height: 1.55;\n    }\n\n    .pp-case-footer {\n      display: block;\n\n      width: calc(100% - 40px);\n\n      padding-bottom: 35px;\n\n      font-size: 7px;\n      line-height: 1.7;\n      letter-spacing: 2px;\n    }\n\n    .pp-case-footer-links {\n      justify-content: flex-start;\n\n      gap: 13px 22px;\n      margin-top: 18px;\n    }\n  }\n\n  \/* ======================================================\n     KLEINE SMARTPHONES\n     ====================================================== *\/\n\n  @media (max-width: 420px) {\n    .pp-case-header {\n      padding:\n        17px\n        16px;\n    }\n\n    .pp-case-back {\n      max-width: 170px;\n\n      font-size: 7px;\n      line-height: 1.5;\n      letter-spacing: 1.5px;\n    }\n\n    .pp-case-logo {\n      width: 67px;\n    }\n\n    .pp-case-intro {\n      padding:\n        62px\n        17px;\n    }\n\n    .pp-case-title {\n      font-size: 16vw;\n    }\n\n    .pp-case-gallery {\n      width: calc(100% - 34px);\n    }\n\n    .pp-case-footer {\n      width: calc(100% - 34px);\n    }\n\n    .pp-case-footer-links {\n      gap: 12px 18px;\n    }\n  }\n\n  \/* ======================================================\n     REDUZIERTE BEWEGUNG\n     ====================================================== *\/\n\n  @media (prefers-reduced-motion: reduce) {\n    .pp-case-video video {\n      animation: none;\n    }\n  }\n<\/style>\n\n\n<main\n  id=\"top\"\n  class=\"pp-case\">\n\n  <!-- ====================================================\n       HEADER\n       ==================================================== -->\n\n  <header class=\"pp-case-header\">\n\n    <a\n      class=\"pp-case-back\"\n      href=\"https:\/\/philipppablitschko.de\/index.php\/projects\/\">\n      \u2190 Back to Projects\n    <\/a>\n\n\n    <a\n      class=\"pp-case-logo\"\n      href=\"https:\/\/philipppablitschko.de\/\"\n      aria-label=\"Home\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/Logoooo.png\"\n        alt=\"Philipp Pablitschko\">\n\n    <\/a>\n\n  <\/header>\n\n\n  <!-- ====================================================\n       PROJEKTEINLEITUNG\n       ==================================================== -->\n\n  <section class=\"pp-case-intro\">\n\n    \n\n\n    <h1 class=\"pp-case-title\">\n      Vario M1<br>\n      Furniture System\n    <\/h1>\n\n\n    <div class=\"pp-case-meta\">\n\n      <div class=\"pp-case-meta-item\">\n\n        <span>\n          Category\n        <\/span>\n\n        <strong>\n          Product\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"pp-case-meta-item\">\n\n        <span>\n          Service\n        <\/span>\n\n        <strong>\n          Product Animation\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"pp-case-meta-item\">\n\n        <span>\n          Year\n        <\/span>\n\n        <strong>\n          2024\n        <\/strong>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- ====================================================\n       GALERIE\n       ==================================================== -->\n\n  <div class=\"pp-case-gallery\">\n\n    <!-- ==================================================\n         GROSSES VIDEO\n\n         Nur diese Video-URL ersetzen:\n         HIER-DEINE-VIDEO-URL-EINF\u00dcGEN.mp4\n         ================================================== -->\n\n    <div class=\"pp-case-video\">\n\n      <video\n        class=\"pp-case-autoplay-video\"\n        autoplay\n        muted\n        loop\n        playsinline\n        webkit-playsinline\n        preload=\"auto\"\n        disablepictureinpicture\n        aria-label=\"Animation des Vario M1 Furniture Systems\">\n\n        <source\n          src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/Sequenz-01.mp4\"\n          type=\"video\/mp4\">\n\n      <\/video>\n\n    <\/div>\n\n\n    <!-- ==================================================\n         ZWEI BILDER NEBENEINANDER\n         ================================================== -->\n\n    <div class=\"pp-case-image-row\">\n\n      <figure class=\"pp-case-image\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/08\/VARIO_M1Erntehelfer_V00b_Ueberarbeitet2.jpg\"\n          alt=\"Visualisierung des Vario M1 Furniture Systems\">\n\n      <\/figure>\n\n\n      <figure class=\"pp-case-image\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/neues.jpg\"\n          alt=\"Weitere Visualisierung des Vario M1 Furniture Systems\">\n\n      <\/figure>\n\n    <\/div>\n\n\n    <!-- ==================================================\n         PROJEKTBESCHREIBUNG\n         ================================================== -->\n\n    <section class=\"pp-case-description\">\n\n      <span class=\"pp-case-description-label\">\n        About the project\n      <\/span>\n\n\n      <p>\n  This product animation was created for\n  <a\n    href=\"https:\/\/www.vario.com\/en\/products\/cabinets\/m1\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\">\n    VARIO B\u00fcroEinrichtungen\n  <\/a>\n  and presents the VARIO M1 furniture system. It demonstrates\n  the system\u2019s modular structure, flexible configuration and\n  visual versatility. The focus was on clear product\n  communication, precise materials and a clean, atmospheric\n  presentation.\n<\/p>\n\n    <\/section>\n\n  <\/div>\n\n\n  <!-- ====================================================\n       FOOTER\n       ==================================================== -->\n\n  <footer class=\"pp-case-footer\">\n\n    <span class=\"pp-case-footer-copy\">\n      \u00a9 2026 Philipp Pablitschko\n    <\/span>\n\n\n    <nav\n      class=\"pp-case-footer-links\"\n      aria-label=\"Footer navigation\">\n\n      <a href=\"https:\/\/philipppablitschko.de\/\">\n        Home\n      <\/a>\n\n\n      <a\n        class=\"is-current\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/projects\/\"\n        aria-current=\"page\">\n        Work\n      <\/a>\n\n\n      <a href=\"https:\/\/philipppablitschko.de\/index.php\/about\/\">\n        About\n      <\/a>\n\n\n      <a href=\"https:\/\/philipppablitschko.de\/index.php\/impressum\/\">\n        Impressum\n      <\/a>\n\n\n      <a href=\"https:\/\/philipppablitschko.de\/index.php\/privacy-policy\/\">\n        Privacy Policy\n      <\/a>\n\n\n      <a href=\"#top\">\n        Back to top \u2191\n      <\/a>\n\n    <\/nav>\n\n  <\/footer>\n\n<\/main>\n\n\n<script>\n  (function () {\n    const videos =\n      document.querySelectorAll(\n        \".pp-case-autoplay-video\"\n      );\n\n    videos.forEach(function (video) {\n      video.muted = true;\n      video.defaultMuted = true;\n\n      const playPromise =\n        video.play();\n\n      if (\n        playPromise &&\n        typeof playPromise.catch === \"function\"\n      ) {\n        playPromise.catch(function () {\n          \/*\n            Falls ein Browser Autoplay beim ersten Laden\n            verz\u00f6gert, wird es erneut versucht, sobald die\n            Seite erstmals ber\u00fchrt oder angeklickt wird.\n          *\/\n\n          function startVideo() {\n            video.muted = true;\n            video.play();\n\n            document.removeEventListener(\n              \"touchstart\",\n              startVideo\n            );\n\n            document.removeEventListener(\n              \"click\",\n              startVideo\n            );\n          }\n\n          document.addEventListener(\n            \"touchstart\",\n            startVideo,\n            {\n              once: true,\n              passive: true\n            }\n          );\n\n          document.addEventListener(\n            \"click\",\n            startVideo,\n            {\n              once: true\n            }\n          );\n        });\n      }\n    });\n  })();\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>\u2190 Back to Projects Vario M1 Furniture System Category Product Service Product Animation Year 2024 About the project This product animation was created for VARIO B\u00fcroEinrichtungen and presents the VARIO M1 furniture system. It demonstrates the system\u2019s modular structure, flexible configuration and visual versatility. The focus was on clear product communication, precise materials and a [&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-378","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":19,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/378\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/378\/revisions\/469"}],"wp:attachment":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/media?parent=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}