{"id":200,"date":"2026-07-30T10:08:05","date_gmt":"2026-07-30T08:08:05","guid":{"rendered":"http:\/\/philipppablitschko.de.w021e2d6.kasserver.com\/?page_id=200"},"modified":"2026-08-01T10:52:21","modified_gmt":"2026-08-01T08:52:21","slug":"projects","status":"publish","type":"page","link":"https:\/\/philipppablitschko.de\/index.php\/projects\/","title":{"rendered":"Projects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"200\" class=\"elementor elementor-200\">\n\t\t\t\t<div class=\"elementor-element elementor-element-086cdc1 e-flex e-con-boxed e-con e-parent\" data-id=\"086cdc1\" 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-45eac84 elementor-widget elementor-widget-html\" data-id=\"45eac84\" 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: #070707;\n  }\n\n  .pp-work-page,\n  .pp-work-page * {\n    box-sizing: border-box;\n  }\n\n  .pp-work-page {\n    --background: #070707;\n    --text: #f2f1ec;\n    --secondary: rgba(255, 255, 255, 0.54);\n    --line: rgba(255, 255, 255, 0.14);\n\n    width: auto;\n    min-height: 100vh;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    overflow: hidden;\n\n    background: var(--background);\n    color: var(--text);\n\n    font-family: \"Inter\", Arial, Helvetica, sans-serif;\n  }\n\n  \/* ======================================================\n     HEADER\n     ====================================================== *\/\n\n  .pp-work-header {\n    position: relative;\n    z-index: 30;\n\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    width: 100%;\n    padding: 26px 48px;\n\n    background: #070707;\n  }\n\n  .pp-work-logo {\n    display: block;\n\n    width: 120px;\n    flex: 0 0 120px;\n\n    line-height: 0;\n  }\n\n  .pp-work-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\n  .pp-work-navigation {\n    display: flex;\n    align-items: center;\n\n    gap: 52px;\n    padding-top: 19px;\n  }\n\n  .pp-work-navigation a {\n    position: relative;\n\n    color: var(--secondary);\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1;\n    letter-spacing: 6px;\n\n    text-decoration: none;\n    text-transform: uppercase;\n    white-space: nowrap;\n\n    transition: color 180ms ease;\n  }\n\n  .pp-work-navigation a:hover,\n  .pp-work-navigation a.is-current {\n    color: var(--text);\n  }\n\n  .pp-work-navigation a.is-current::after {\n    content: \"\";\n\n    position: absolute;\n    left: 0;\n    right: 6px;\n    bottom: -10px;\n\n    height: 1px;\n\n    background: var(--text);\n  }\n\n  \/* ======================================================\n     SEITENEINLEITUNG\n     ====================================================== *\/\n\n  .pp-work-hero {\n    width: min(100%, 1800px);\n    margin: 0 auto;\n\n    padding:\n      clamp(90px, 10vw, 180px)\n      clamp(28px, 6vw, 115px)\n      clamp(75px, 7vw, 130px);\n  }\n\n  .pp-work-eyebrow {\n    display: flex;\n    align-items: center;\n\n    gap: 18px;\n    margin-bottom: clamp(30px, 4vw, 65px);\n\n    color: rgba(255, 255, 255, 0.48);\n\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 6px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-eyebrow::before {\n    content: \"\";\n\n    display: block;\n\n    width: 45px;\n    height: 1px;\n\n    background: rgba(255, 255, 255, 0.35);\n  }\n\n  .pp-work-heading {\n    max-width: 1600px;\n    margin: 0;\n\n    color: var(--text);\n\n    font-family: \"Hind Guntur\", sans-serif;\n    font-size: clamp(95px, 13vw, 245px);\n    font-weight: 700;\n    line-height: 0.78;\n    letter-spacing: clamp(0px, 0.2vw, 4px);\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-heading span {\n    display: block;\n  }\n\n  .pp-work-intro {\n    display: grid;\n    grid-template-columns: 1fr minmax(280px, 600px);\n\n    gap: 60px;\n\n    margin-top: clamp(60px, 7vw, 120px);\n    padding-top: 28px;\n\n    border-top: 1px solid var(--line);\n  }\n\n  .pp-work-intro-label {\n    color: rgba(255, 255, 255, 0.42);\n\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 4px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-intro p {\n    margin: 0;\n\n    color: rgba(255, 255, 255, 0.74);\n\n    font-size: clamp(16px, 1.4vw, 23px);\n    font-weight: 400;\n    line-height: 1.55;\n  }\n\n  \/* ======================================================\n     FILTER\n     ====================================================== *\/\n\n  .pp-work-filter-wrap {\n    width: min(calc(100% - 56px), 1570px);\n    margin: 0 auto;\n\n    padding: 25px 0;\n\n    border-top: 1px solid var(--line);\n    border-bottom: 1px solid var(--line);\n  }\n\n  .pp-work-filters {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    gap: 16px 42px;\n  }\n\n  .pp-filter-button {\n    position: relative;\n\n    padding: 10px 0;\n\n    border: 0;\n    border-radius: 0;\n\n    background: transparent;\n    color: rgba(255, 255, 255, 0.4);\n\n    font-family: \"Inter\", Arial, sans-serif;\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 4px;\n\n    text-transform: uppercase;\n\n    cursor: pointer;\n\n    transition: color 220ms ease;\n  }\n\n  .pp-filter-button:hover,\n  .pp-filter-button.is-active {\n    color: var(--text);\n  }\n\n  .pp-filter-button::after {\n    content: \"\";\n\n    position: absolute;\n    left: 0;\n    right: 4px;\n    bottom: 2px;\n\n    height: 1px;\n\n    background: var(--text);\n\n    transform: scaleX(0);\n    transform-origin: right center;\n\n    transition: transform 300ms ease;\n  }\n\n  .pp-filter-button.is-active::after {\n    transform: scaleX(1);\n    transform-origin: left center;\n  }\n\n  \/* ======================================================\n     PROJEKT\u00dcBERSICHT\n     ====================================================== *\/\n\n  .pp-work-projects {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n\n    column-gap: clamp(22px, 3vw, 55px);\n    row-gap: clamp(120px, 14vw, 250px);\n\n    width: min(calc(100% - 56px), 1570px);\n    margin: 0 auto;\n\n    padding:\n      clamp(110px, 12vw, 210px)\n      0\n      clamp(140px, 13vw, 240px);\n  }\n\n  .pp-work-card {\n    --card-accent: #8a6750;\n    --card-surface: #171513;\n    --card-ratio: 16 \/ 9;\n\n    position: relative;\n\n    opacity: 1;\n    transform: none;\n  }\n\n  .pp-has-js .pp-work-card {\n    opacity: 0;\n\n    transform: translateY(70px);\n\n    transition:\n      opacity 900ms ease,\n      transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .pp-has-js .pp-work-card.is-visible {\n    opacity: 1;\n    transform: none;\n  }\n\n  .pp-work-card.is-filtered-out {\n    display: none;\n  }\n\n  \/* Projekt 01 \u2013 Hangzhou University *\/\n\n  .pp-work-card--01 {\n    --card-accent: #8e7b68;\n    --card-surface: #1b1815;\n    --card-ratio: 16 \/ 9;\n\n    grid-column: 1 \/ 13;\n  }\n\n  \/* Projekt 02 \u2013 House F *\/\n\n  .pp-work-card--02 {\n    --card-accent: #687966;\n    --card-surface: #151a15;\n    --card-ratio: 4 \/ 5;\n\n    grid-column: 6 \/ 13;\n  }\n\n  \/* Projekt 03 \u2013 Ampere Storage *\/\n\n  .pp-work-card--03 {\n    --card-accent: #657887;\n    --card-surface: #14191d;\n    --card-ratio: 5 \/ 4;\n\n    grid-column: 1 \/ 7;\n  }\n\n  \/* Projekt 04 \u2013 Vario M1 *\/\n\n  .pp-work-card--04 {\n    --card-accent: #946c65;\n    --card-surface: #1c1514;\n    --card-ratio: 3 \/ 2;\n\n    grid-column: 4 \/ 13;\n  }\n\n  \/* Projekt 05 \u2013 Green Kitchen *\/\n\n  .pp-work-card--05 {\n    --card-accent: #6f8168;\n    --card-surface: #151a15;\n    --card-ratio: 16 \/ 10;\n\n    grid-column: 1 \/ 10;\n  }\n\n  \/* Projekt 06 \u2013 House 6 *\/\n\n  .pp-work-card--06 {\n    --card-accent: #957057;\n    --card-surface: #1c1714;\n    --card-ratio: 16 \/ 9;\n\n    grid-column: 1 \/ 13;\n  }\n\n  .pp-work-card-link {\n    display: block;\n\n    width: 100%;\n\n    color: var(--text);\n    text-decoration: none;\n  }\n\n  \/* ======================================================\n     BILDER UND VIDEO\n     ====================================================== *\/\n\n  .pp-work-card-cover {\n    position: relative;\n\n    width: 100%;\n    aspect-ratio: var(--card-ratio);\n\n    padding: clamp(10px, 1.4vw, 24px);\n    overflow: hidden;\n\n    background: var(--card-surface);\n  }\n\n  .pp-work-card-frame {\n    position: relative;\n\n    width: 100%;\n    height: 100%;\n\n    overflow: hidden;\n\n    background: #111;\n  }\n\n  .pp-work-card-frame img,\n  .pp-work-card-frame video {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transform: scale(1);\n\n    transition:\n      transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),\n      filter 500ms ease;\n  }\n\n  .pp-work-card-frame video {\n    border: 0;\n    outline: 0;\n\n    background: #111;\n\n    pointer-events: none;\n  }\n\n  .pp-work-card-frame::after {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(0, 0, 0, 0) 55%,\n        rgba(0, 0, 0, 0.32) 100%\n      );\n\n    opacity: 0.35;\n\n    transition: opacity 400ms ease;\n  }\n\n  .pp-work-card-link:hover .pp-work-card-frame img,\n  .pp-work-card-link:hover .pp-work-card-frame video {\n    transform: scale(1.035);\n  }\n\n  .pp-work-card-link:hover .pp-work-card-frame::after {\n    opacity: 0.7;\n  }\n\n  \/* ======================================================\n     VIEW PROJECT\n     ====================================================== *\/\n\n  .pp-work-card-view {\n    position: absolute;\n    right: clamp(15px, 1.7vw, 28px);\n    bottom: clamp(15px, 1.7vw, 28px);\n    z-index: 3;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 14px 18px;\n\n    background: rgba(7, 7, 7, 0.9);\n    color: #f2f1ec;\n\n    font-size: 9px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n\n    opacity: 0;\n\n    transform: translateY(14px);\n\n    transition:\n      opacity 300ms ease,\n      transform 300ms ease;\n  }\n\n  .pp-work-card-link:hover .pp-work-card-view {\n    opacity: 1;\n    transform: none;\n  }\n\n  \/* ======================================================\n     PROJEKTINFORMATIONEN\n     ====================================================== *\/\n\n  .pp-work-card-info {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: flex-start;\n\n    gap: 40px;\n\n    padding-top: 25px;\n  }\n\n  .pp-work-card-heading {\n    display: flex;\n    align-items: baseline;\n\n    gap: 24px;\n  }\n\n  .pp-work-card-number {\n    color: rgba(255, 255, 255, 0.35);\n\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 3px;\n  }\n\n  .pp-work-card-title {\n    margin: 0;\n\n    color: var(--text);\n\n    font-family: \"Hind Guntur\", sans-serif;\n    font-size: clamp(38px, 3.8vw, 72px);\n    font-weight: 700;\n    line-height: 0.9;\n    letter-spacing: 1px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-card-title::after {\n    content: \"\";\n\n    display: block;\n\n    width: 0;\n    height: 2px;\n\n    margin-top: 9px;\n\n    background: var(--card-accent);\n\n    transition: width 450ms cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .pp-work-card-link:hover .pp-work-card-title::after {\n    width: 100%;\n  }\n\n  .pp-work-card-meta {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    gap: 10px;\n    padding-top: 7px;\n  }\n\n  .pp-work-card-category {\n    display: flex;\n    align-items: center;\n\n    gap: 10px;\n\n    color: rgba(255, 255, 255, 0.55);\n\n    font-size: 9px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 2.5px;\n\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n\n  .pp-work-card-category::before {\n    content: \"\";\n\n    display: block;\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: var(--card-accent);\n  }\n\n  .pp-work-card-year {\n    color: rgba(255, 255, 255, 0.3);\n\n    font-size: 9px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 2px;\n  }\n\n  .pp-work-card-description {\n    max-width: 700px;\n\n    margin:\n      clamp(25px, 2.5vw, 42px)\n      0\n      0\n      48px;\n\n    color: rgba(255, 255, 255, 0.52);\n\n    font-size: clamp(13px, 1vw, 16px);\n    font-weight: 400;\n    line-height: 1.55;\n  }\n\n  \/* ======================================================\n     FOOTER\n     ====================================================== *\/\n\n  .pp-work-footer {\n    width: min(calc(100% - 56px), 1570px);\n    margin: 0 auto;\n\n    padding:\n      clamp(80px, 9vw, 150px)\n      0\n      45px;\n\n    border-top: 1px solid var(--line);\n  }\n\n  .pp-work-footer-top {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n\n    gap: 50px;\n  }\n\n  .pp-work-footer-label {\n    display: block;\n\n    margin-bottom: 25px;\n\n    color: rgba(255, 255, 255, 0.4);\n\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 4px;\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-footer-title {\n    margin: 0;\n\n    color: var(--text);\n\n    font-family: \"Hind Guntur\", sans-serif;\n    font-size: clamp(58px, 8vw, 150px);\n    font-weight: 700;\n    line-height: 0.82;\n\n    text-transform: uppercase;\n  }\n\n  .pp-work-footer-link {\n    position: relative;\n\n    display: inline-flex;\n    align-items: center;\n\n    gap: 18px;\n    padding-bottom: 10px;\n\n    color: var(--text);\n\n    font-size: 10px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: 4px;\n\n    text-decoration: none;\n    text-transform: uppercase;\n\n    border-bottom: 1px solid rgba(255, 255, 255, 0.65);\n  }\n\n  .pp-work-footer-link span {\n    font-size: 17px;\n\n    transition: transform 300ms ease;\n  }\n\n  .pp-work-footer-link:hover span {\n    transform: translate(6px, -6px);\n  }\n\n  .pp-work-footer-bottom {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 35px;\n\n    margin-top: clamp(80px, 9vw, 150px);\n    padding-top: 25px;\n\n    border-top: 1px solid var(--line);\n\n    color: rgba(255, 255, 255, 0.32);\n\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-work-footer-copy {\n    flex: 0 0 auto;\n  }\n\n  .pp-work-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-work-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-work-footer-links a:hover,\n  .pp-work-footer-links a.is-current {\n    color: var(--text);\n  }\n\n  .pp-work-footer-links a.is-current::after {\n    content: \"\";\n\n    position: absolute;\n    left: 0;\n    right: 3px;\n    bottom: -6px;\n\n    height: 1px;\n\n    background: rgba(255, 255, 255, 0.75);\n  }\n\n  \/* ======================================================\n     TABLET\n     ====================================================== *\/\n\n  @media (max-width: 1050px) {\n    .pp-work-header {\n      padding: 24px 28px;\n    }\n\n    .pp-work-logo {\n      width: 105px;\n      flex-basis: 105px;\n    }\n\n    .pp-work-navigation {\n      gap: 28px;\n      padding-top: 17px;\n    }\n\n    .pp-work-navigation a {\n      font-size: 11px;\n      letter-spacing: 4px;\n    }\n\n    .pp-work-intro {\n      grid-template-columns: 1fr 1.4fr;\n    }\n\n    .pp-work-filter-wrap,\n    .pp-work-projects,\n    .pp-work-footer {\n      width: calc(100% - 84px);\n    }\n\n    .pp-work-card--02 {\n      grid-column: 5 \/ 13;\n    }\n\n    .pp-work-card--03 {\n      grid-column: 1 \/ 8;\n    }\n\n    .pp-work-card--04 {\n      grid-column: 3 \/ 13;\n    }\n\n    .pp-work-card--05 {\n      grid-column: 1 \/ 11;\n    }\n\n    .pp-work-card--06 {\n      grid-column: 1 \/ 13;\n    }\n\n    .pp-work-card-info {\n      display: block;\n    }\n\n    .pp-work-card-meta {\n      align-items: flex-start;\n      padding-top: 18px;\n    }\n\n    .pp-work-card-description {\n      margin-left: 48px;\n    }\n\n    .pp-work-footer-bottom {\n      align-items: flex-start;\n    }\n\n    .pp-work-footer-links {\n      max-width: 600px;\n    }\n  }\n\n  \/* ======================================================\n     SMARTPHONE\n     ====================================================== *\/\n\n  @media (max-width: 700px) {\n    .pp-work-header {\n      padding: 20px;\n    }\n\n    .pp-work-logo {\n      width: 82px;\n      flex: 0 0 82px;\n    }\n\n    .pp-work-navigation {\n      gap: 18px;\n      padding-top: 14px;\n    }\n\n    .pp-work-navigation a {\n      font-size: 9px;\n      letter-spacing: 2.5px;\n    }\n\n    .pp-work-hero {\n      padding:\n        80px\n        22px\n        65px;\n\n      overflow: visible;\n    }\n\n    .pp-work-heading {\n      width: 100%;\n      max-width: 100%;\n\n      font-size: clamp(52px, 17vw, 92px);\n      line-height: 0.82;\n      letter-spacing: -0.03em;\n\n      overflow: visible;\n    }\n\n    .pp-work-heading span {\n      display: block;\n\n      width: 100%;\n\n      white-space: nowrap;\n    }\n\n    .pp-work-intro {\n      display: block;\n\n      margin-top: 55px;\n    }\n\n    .pp-work-intro-label {\n      display: block;\n\n      margin-bottom: 25px;\n    }\n\n    .pp-work-filter-wrap,\n    .pp-work-projects,\n    .pp-work-footer {\n      width: calc(100% - 44px);\n    }\n\n    .pp-work-filters {\n      gap: 10px 22px;\n    }\n\n    .pp-filter-button {\n      font-size: 8px;\n      letter-spacing: 2.5px;\n    }\n\n    .pp-work-projects {\n      display: block;\n\n      padding:\n        80px\n        0\n        110px;\n    }\n\n    .pp-work-card,\n    .pp-work-card--01,\n    .pp-work-card--02,\n    .pp-work-card--03,\n    .pp-work-card--04,\n    .pp-work-card--05,\n    .pp-work-card--06 {\n      width: 100%;\n\n      margin-bottom: 110px;\n    }\n\n    .pp-work-card--01,\n    .pp-work-card--02,\n    .pp-work-card--03,\n    .pp-work-card--05,\n    .pp-work-card--06 {\n      --card-ratio: 4 \/ 5;\n    }\n\n    \/* Vario bleibt auf dem Handy im Videoformat *\/\n\n    .pp-work-card--04 {\n      --card-ratio: 16 \/ 9;\n    }\n\n    .pp-work-card-cover {\n      padding: 10px;\n    }\n\n    .pp-work-card--01 .pp-work-card-cover {\n      padding: 0;\n    }\n\n    .pp-work-card-view {\n      right: 13px;\n      bottom: 13px;\n\n      padding: 12px 14px;\n\n      opacity: 1;\n      transform: none;\n\n      font-size: 7px;\n      letter-spacing: 2px;\n    }\n\n    .pp-work-card-info {\n      display: block;\n\n      padding-top: 18px;\n    }\n\n    .pp-work-card-heading {\n      gap: 14px;\n    }\n\n    .pp-work-card-title {\n      font-size: clamp(36px, 11vw, 58px);\n    }\n\n    .pp-work-card-meta {\n      align-items: flex-start;\n\n      padding-top: 16px;\n    }\n\n    .pp-work-card-description {\n      margin:\n        22px\n        0\n        0;\n    }\n\n    .pp-work-footer-top {\n      display: block;\n    }\n\n    .pp-work-footer-link {\n      margin-top: 45px;\n    }\n\n    .pp-work-footer-bottom {\n      display: block;\n\n      line-height: 1.7;\n    }\n\n    .pp-work-footer-links {\n      justify-content: flex-start;\n\n      gap: 13px 22px;\n      margin-top: 18px;\n    }\n  }\n\n  @media (max-width: 420px) {\n    .pp-work-header {\n      padding: 17px 16px;\n    }\n\n    .pp-work-logo {\n      width: 70px;\n      flex-basis: 70px;\n    }\n\n    .pp-work-navigation {\n      gap: 12px;\n      padding-top: 12px;\n    }\n\n    .pp-work-navigation a {\n      letter-spacing: 1.7px;\n    }\n\n    .pp-work-heading {\n      font-size: 17vw;\n      line-height: 0.83;\n    }\n\n    .pp-work-filter-wrap,\n    .pp-work-projects,\n    .pp-work-footer {\n      width: calc(100% - 34px);\n    }\n\n    .pp-work-footer-links {\n      gap: 12px 18px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .pp-work-card-frame img,\n    .pp-work-card-frame video {\n      transition: none;\n    }\n\n    .pp-has-js .pp-work-card {\n      opacity: 1;\n      transform: none;\n      transition: none;\n    }\n  }\n<\/style>\n\n\n<main\n  id=\"top\"\n  class=\"pp-work-page\">\n\n  <!-- ====================================================\n       HEADER\n       ==================================================== -->\n\n  <header class=\"pp-work-header\">\n\n    <a\n      class=\"pp-work-logo\"\n      href=\"https:\/\/philipppablitschko.de\/\"\n      aria-label=\"Zur Startseite\">\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\n    <nav\n      class=\"pp-work-navigation\"\n      aria-label=\"Hauptnavigation\">\n\n      <a href=\"https:\/\/philipppablitschko.de\/\">\n        Home\n      <\/a>\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      <a href=\"https:\/\/philipppablitschko.de\/index.php\/about\/\">\n        About\n      <\/a>\n\n    <\/nav>\n\n  <\/header>\n\n\n  <!-- ====================================================\n       SEITEN\u00dcBERSCHRIFT\n       ==================================================== -->\n\n  <section class=\"pp-work-hero\">\n\n    <span class=\"pp-work-eyebrow\">\n      Portfolio \u00b7 Selected and Recent Work\n    <\/span>\n\n\n    <h1 class=\"pp-work-heading\">\n\n      <span>Selected<\/span>\n      <span>Work<\/span>\n\n    <\/h1>\n\n\n    <div class=\"pp-work-intro\">\n\n      <span class=\"pp-work-intro-label\">\n        About the work\n      <\/span>\n\n      <p>\n        A selection of architectural visualisations,\n        product imagery and animation projects created\n        for design, presentation and communication.\n      <\/p>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- ====================================================\n       FILTER\n       ==================================================== -->\n\n  <div class=\"pp-work-filter-wrap\">\n\n    <div\n      class=\"pp-work-filters\"\n      role=\"group\"\n      aria-label=\"Projekte filtern\">\n\n      <button\n        class=\"pp-filter-button is-active\"\n        type=\"button\"\n        data-filter=\"all\"\n        aria-pressed=\"true\">\n        All\n      <\/button>\n\n      <button\n        class=\"pp-filter-button\"\n        type=\"button\"\n        data-filter=\"architecture\"\n        aria-pressed=\"false\">\n        Architecture\n      <\/button>\n\n      <button\n        class=\"pp-filter-button\"\n        type=\"button\"\n        data-filter=\"product\"\n        aria-pressed=\"false\">\n        Product\n      <\/button>\n\n      <button\n        class=\"pp-filter-button\"\n        type=\"button\"\n        data-filter=\"animation\"\n        aria-pressed=\"false\">\n        Animation\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- ====================================================\n       PROJEKTE\n       ==================================================== -->\n\n  <section\n    id=\"projects\"\n    class=\"pp-work-projects\"\n    aria-label=\"Alle Projekte\">\n\n\n    <!-- ==================================================\n         PROJEKT 01 \u2013 HANGZHOU UNIVERSITY\n\n         Kategorie Architecture:\n         erscheint unter All und Architecture.\n\n         Nur die Bild-URL ersetzen.\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--01\"\n      data-category=\"architecture\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/hangzhou-university\/\"\n        aria-label=\"Projekt Hangzhou University ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/2025_Tag_HQ_V00a-2-1.jpg\"\n              alt=\"Architekturvisualisierung Hangzhou University\"\n              loading=\"eager\">\n\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              Hangzhou University\n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Architecture\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2024\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          Architectural visualisation for a university project\n          in Hangzhou, focused on spatial clarity, atmosphere\n          and the expression of materials and light.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ==================================================\n         PROJEKT 02 \u2013 HOUSE F\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--02\"\n      data-category=\"architecture\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/housef\/\"\n        aria-label=\"Projekt House F ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/2026-1.jpg\"\n              alt=\"Architekturvisualisierung House F\"\n              loading=\"lazy\">\n\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              House F\n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Architecture\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2024\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          Exterior architectural imagery with a focus on\n          material detail, landscape and natural daylight.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ==================================================\n         PROJEKT 03 \u2013 AMPERE STORAGE\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--03\"\n      data-category=\"product\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/ampere-storage\/\"\n        aria-label=\"Projekt Ampere Storage ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/OxygenPictures_AMPEREStorage_Vorabzug_V00fHD.jpg\"\n              alt=\"Produktvisualisierung Ampere Storage\"\n              loading=\"lazy\">\n\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              Ampere Storage\n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Product\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2026\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          Product visualisation exploring materials,\n          composition and controlled studio lighting.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ==================================================\n         PROJEKT 04 \u2013 VARIO M1\n\n         Kategorie Animation:\n         erscheint unter All und Animation.\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--04\"\n      data-category=\"animation\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/vario-m1\/\"\n        aria-label=\"Projekt Vario M1 Furniture System ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <video\n              class=\"pp-work-preview-video\"\n              autoplay\n              muted\n              loop\n              playsinline\n              webkit-playsinline\n              preload=\"metadata\"\n              disablepictureinpicture\n              aria-hidden=\"true\">\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\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              Vario M1\n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Product Animation\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2024\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          A product animation presenting the modular Vario M1\n          furniture system, its flexible configurations and\n          precise material details.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ==================================================\n         PROJEKT 05 \u2013 GREEN KITCHEN\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--05\"\n      data-category=\"architecture\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/green-kitchen\/\"\n        aria-label=\"Projekt Green Kitchen ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/Version02-1.jpg\"\n              alt=\"Architektur- und Innenraumvisualisierung Green Kitchen\"\n              loading=\"lazy\">\n\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              Green Kitchen\n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Architecture\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2026\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          An architectural interior visualisation focused on\n          natural materials, soft daylight and a contemporary\n          kitchen atmosphere.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ==================================================\n         PROJEKT 06 \u2013 HOUSE 6\n\n         House 6 wurde nach unten verschoben.\n         Kategorie Architecture.\n         ================================================== -->\n\n    <article\n      class=\"pp-work-card pp-work-card--06\"\n      data-category=\"architecture\">\n\n      <a\n        class=\"pp-work-card-link\"\n        href=\"https:\/\/philipppablitschko.de\/index.php\/projects\/mexican_house\/\"\n        aria-label=\"Projekt House 6 Sao Paulo ansehen\">\n\n        <div class=\"pp-work-card-cover\">\n\n          <div class=\"pp-work-card-frame\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/philipppablitschko.de\/wp-content\/uploads\/2026\/07\/Interior_V00asas_BRAUN_2.jpg\"\n              alt=\"Innenraumvisualisierung House 6 Sao Paulo\"\n              loading=\"lazy\">\n\n            <span class=\"pp-work-card-view\">\n              View Project \u2197\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pp-work-card-info\">\n\n          <div class=\"pp-work-card-heading\">\n\n            \n\n            <h2 class=\"pp-work-card-title\">\n              House 6 \n            <\/h2>\n\n          <\/div>\n\n\n          <div class=\"pp-work-card-meta\">\n\n            <span class=\"pp-work-card-category\">\n              Architecture\n            <\/span>\n\n            <span class=\"pp-work-card-year\">\n              2026\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <p class=\"pp-work-card-description\">\n          Interior visualisation focused on warm materials,\n          natural light and a calm architectural atmosphere.\n        <\/p>\n\n      <\/a>\n\n    <\/article>\n\n  <\/section>\n\n\n  <!-- ====================================================\n       FOOTER\n       ==================================================== -->\n\n  <footer class=\"pp-work-footer\">\n\n    <div class=\"pp-work-footer-top\">\n\n      <div>\n\n        <span class=\"pp-work-footer-label\">\n          Have a project in mind?\n        <\/span>\n\n        <h2 class=\"pp-work-footer-title\">\n          Let\u2019s create<br>\n          something.\n        <\/h2>\n\n      <\/div>\n\n\n      <a\n        class=\"pp-work-footer-link\"\n        href=\"mailto:philipp@pablitschko.de\">\n\n        Get in touch\n\n        <span aria-hidden=\"true\">\n          \u2197\n        <\/span>\n\n      <\/a>\n\n    <\/div>\n\n\n    <div class=\"pp-work-footer-bottom\">\n\n      <span class=\"pp-work-footer-copy\">\n        \u00a9 2026 Philipp Pablitschko\n      <\/span>\n\n\n      <nav\n        class=\"pp-work-footer-links\"\n        aria-label=\"Footer navigation\">\n\n        <a href=\"https:\/\/philipppablitschko.de\/\">\n          Home\n        <\/a>\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        <a href=\"https:\/\/philipppablitschko.de\/index.php\/about\/\">\n          About\n        <\/a>\n\n        <a href=\"https:\/\/philipppablitschko.de\/index.php\/impressum\/\">\n          Impressum\n        <\/a>\n\n        <a href=\"https:\/\/philipppablitschko.de\/index.php\/privacy-policy\/\">\n          Privacy Policy\n        <\/a>\n\n        <a href=\"#top\">\n          Back to top \u2191\n        <\/a>\n\n      <\/nav>\n\n    <\/div>\n\n  <\/footer>\n\n<\/main>\n\n\n<script>\n  (function () {\n    document.documentElement.classList.add(\n      \"pp-has-js\"\n    );\n\n    const filterButtons =\n      document.querySelectorAll(\n        \".pp-filter-button\"\n      );\n\n    const projectCards =\n      document.querySelectorAll(\n        \".pp-work-card\"\n      );\n\n    const previewVideos =\n      document.querySelectorAll(\n        \".pp-work-preview-video\"\n      );\n\n    const reducedMotion =\n      window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      ).matches;\n\n\n    \/* ====================================================\n       VIDEO VORBEREITEN\n       ==================================================== *\/\n\n    previewVideos.forEach(function (video) {\n      video.muted = true;\n      video.defaultMuted = true;\n    });\n\n\n    \/* ====================================================\n       VIDEO NUR IM SICHTBAREN BEREICH ABSPIELEN\n       ==================================================== *\/\n\n    if (\"IntersectionObserver\" in window) {\n      const videoObserver =\n        new IntersectionObserver(\n          function (entries) {\n            entries.forEach(function (entry) {\n              const video = entry.target;\n\n              const card =\n                video.closest(\".pp-work-card\");\n\n              const isFilteredOut =\n                card &&\n                card.classList.contains(\n                  \"is-filtered-out\"\n                );\n\n              if (\n                entry.isIntersecting &&\n                !isFilteredOut\n              ) {\n                video.muted = 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              } else {\n                video.pause();\n              }\n            });\n          },\n          {\n            threshold: 0.1,\n            rootMargin: \"250px 0px 250px 0px\"\n          }\n        );\n\n      previewVideos.forEach(function (video) {\n        videoObserver.observe(video);\n      });\n    } else {\n      previewVideos.forEach(function (video) {\n        video.muted = 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      });\n    }\n\n\n    \/* ====================================================\n       FILTER\n       ==================================================== *\/\n\n    function setFilter(selectedFilter) {\n      filterButtons.forEach(function (button) {\n        const isActive =\n          button.dataset.filter === selectedFilter;\n\n        button.classList.toggle(\n          \"is-active\",\n          isActive\n        );\n\n        button.setAttribute(\n          \"aria-pressed\",\n          isActive ? \"true\" : \"false\"\n        );\n      });\n\n\n      projectCards.forEach(function (card) {\n        const cardCategory =\n          card.dataset.category;\n\n        const shouldShow =\n          selectedFilter === \"all\" ||\n          cardCategory === selectedFilter;\n\n        card.classList.toggle(\n          \"is-filtered-out\",\n          !shouldShow\n        );\n\n\n        const previewVideo =\n          card.querySelector(\n            \".pp-work-preview-video\"\n          );\n\n        if (previewVideo) {\n          if (shouldShow) {\n            previewVideo.muted = true;\n\n            const rect =\n              previewVideo.getBoundingClientRect();\n\n            const isNearViewport =\n              rect.bottom > -250 &&\n              rect.top < window.innerHeight + 250;\n\n            if (isNearViewport) {\n              const playPromise =\n                previewVideo.play();\n\n              if (\n                playPromise &&\n                typeof playPromise.catch === \"function\"\n              ) {\n                playPromise.catch(function () {});\n              }\n            }\n          } else {\n            previewVideo.pause();\n          }\n        }\n      });\n    }\n\n\n    filterButtons.forEach(function (button) {\n      button.addEventListener(\n        \"click\",\n        function () {\n          setFilter(\n            button.dataset.filter\n          );\n        }\n      );\n    });\n\n\n    \/* ====================================================\n       SCROLL-EINBLENDUNG\n       ==================================================== *\/\n\n    if (\n      !reducedMotion &&\n      \"IntersectionObserver\" in window\n    ) {\n      const cardObserver =\n        new IntersectionObserver(\n          function (entries, observer) {\n            entries.forEach(function (entry) {\n              if (entry.isIntersecting) {\n                entry.target.classList.add(\n                  \"is-visible\"\n                );\n\n                observer.unobserve(\n                  entry.target\n                );\n              }\n            });\n          },\n          {\n            threshold: 0.1,\n            rootMargin: \"0px 0px -7% 0px\"\n          }\n        );\n\n\n      projectCards.forEach(function (card) {\n        cardObserver.observe(card);\n      });\n    } else {\n      projectCards.forEach(function (card) {\n        card.classList.add(\n          \"is-visible\"\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>Home Work About Portfolio \u00b7 Selected and Recent Work Selected Work About the work A selection of architectural visualisations, product imagery and animation projects created for design, presentation and communication. All Architecture Product Animation View Project \u2197 Hangzhou University Architecture 2024 Architectural visualisation for a university project in Hangzhou, focused on spatial clarity, atmosphere and [&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-200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/200","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=200"}],"version-history":[{"count":43,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":462,"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions\/462"}],"wp:attachment":[{"href":"https:\/\/philipppablitschko.de\/index.php\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}