{"id":440,"date":"2024-11-10T18:33:57","date_gmt":"2024-11-10T17:33:57","guid":{"rendered":"https:\/\/aoxdesign.de\/?page_id=440"},"modified":"2024-11-10T18:33:57","modified_gmt":"2024-11-10T17:33:57","slug":"kontakt","status":"publish","type":"page","link":"https:\/\/aoxdesign.de\/?page_id=440","title":{"rendered":"Kontakt"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"440\" class=\"elementor elementor-440\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66874a26 e-flex e-con-boxed e-con e-parent\" data-id=\"66874a26\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-38f6f32d e-flex e-con-boxed e-con e-child\" data-id=\"38f6f32d\" 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-7e86f3da elementor-widget elementor-widget-heading\" data-id=\"7e86f3da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Kontakt<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a7b9ab9 elementor-widget__width-initial elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"5a7b9ab9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45e55594 elementor-widget elementor-widget-heading\" data-id=\"45e55594\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">let's talk<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6529e393 e-flex e-con-boxed e-con e-parent\" data-id=\"6529e393\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-272729ba e-flex e-con-boxed e-con e-child\" data-id=\"272729ba\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-43f7cb4c e-flex e-con-boxed e-con e-child\" data-id=\"43f7cb4c\" 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-776ce2aa elementor-widget elementor-widget-heading\" data-id=\"776ce2aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">AOX<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7be4cb2 elementor-widget elementor-widget-heading\" data-id=\"7be4cb2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Design<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a9ed340 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"6a9ed340\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b1ab670 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"6b1ab670\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"jki jki-phone-handset-light\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">+49 152 327 940<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"jki jki-mail-line\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">aoxdesignx@gmail.com<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-map-marker1\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Donzdorf, Deutschland<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-193ff361 e-flex e-con-boxed e-con e-child\" data-id=\"193ff361\" 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-76264bf0 elementor-widget elementor-widget-metform\" data-id=\"76264bf0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"metform.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"mf-response-props-id-559\" data-previous-steps-style=\"\" data-editswitchopen=\"\" data-response_type=\"alert\" data-erroricon=\"fas fa-exclamation-triangle\" data-successicon=\"fas fa-check\" data-messageposition=\"top\" class=\"   mf-scroll-top-no\">\n\t\t<div class=\"formpicker_warper formpicker_warper_editable\" data-metform-formpicker-key=\"559\" >\n\t\t\t\t\n\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\r\n\t\t<div\r\n\t\t\tid=\"metform-wrap-76264bf0-559\"\r\n\t\t\tclass=\"mf-form-wrapper\"\r\n\t\t\tdata-form-id=\"559\"\r\n\t\t\tdata-action=\"https:\/\/aoxdesign.de\/index.php?rest_route=\/metform\/v1\/entries\/insert\/559\"\r\n\t\t\tdata-wp-nonce=\"f17186ca76\"\r\n\t\t\tdata-form-nonce=\"dc838f063f\"\r\n\t\t\tdata-quiz-summery = \"false\"\r\n\t\t\tdata-save-progress = \"false\"\r\n\t\t\tdata-form-type=\"contact_form\"\r\n\t\t\tdata-stop-vertical-effect=\"\"\r\n\t\t\t><\/div>\r\n\r\n\r\n\t\t<!----------------------------- \r\n\t\t\t* controls_data : find the the props passed indie of data attribute\r\n\t\t\t* props.SubmitResponseMarkup : contains the markup of error or success message\r\n\t\t\t* https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\r\n\t\t--------------------------- -->\r\n\r\n\t\t\t\t<script type=\"text\/mf\" class=\"mf-template\">\r\n\t\t\tfunction controls_data (value){\r\n\t\t\t\tlet currentWrapper = \"mf-response-props-id-559\";\r\n\t\t\t\tlet currentEl = document.getElementById(currentWrapper);\r\n\t\t\t\t\r\n\t\t\t\treturn currentEl ? currentEl.dataset[value] : false\r\n\t\t\t}\r\n\r\n\r\n\t\t\tlet is_edit_mode = '' ? true : false;\r\n\t\t\tlet message_position = controls_data('messageposition') || 'top';\r\n\r\n\t\t\t\r\n\t\t\tlet message_successIcon = controls_data('successicon') || '';\r\n\t\t\tlet message_errorIcon = controls_data('erroricon') || '';\r\n\t\t\tlet message_editSwitch = controls_data('editswitchopen') === 'yes' ? true : false;\r\n\t\t\tlet message_proClass = controls_data('editswitchopen') === 'yes' ? 'mf_pro_activated' : '';\r\n\t\t\t\r\n\t\t\tlet is_dummy_markup = is_edit_mode && message_editSwitch ? true : false;\r\n\r\n\t\t\t\r\n\t\t\treturn html`\r\n\t\t\t\t<form\r\n\t\t\t\t\tclassName=\"metform-form-content\"\r\n\t\t\t\t\tref=${parent.formContainerRef}\r\n\t\t\t\t\tonSubmit=${ validation.handleSubmit( parent.handleFormSubmit ) }\r\n\t\t\t\t\r\n\t\t\t\t\t>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'top' ?  props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' :  message_position === 'top' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\r\n\t\t\t\t\t<!--------------------------------------------------------\r\n\t\t\t\t\t*** IMPORTANT \/ DANGEROUS ***\r\n\t\t\t\t\t${html``} must be used as in immediate child of \"metform-form-main-wrapper\"\r\n\t\t\t\t\tclass otherwise multistep form will not run at all\r\n\t\t\t\t\t---------------------------------------------------------->\r\n\r\n\t\t\t\t\t<div className=\"metform-form-main-wrapper\" key=${'hide-form-after-submit'} ref=${parent.formRef}>\r\n\t\t\t\t\t${html`\r\n\t\t\t\t\t\t\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"509\" className=\"elementor elementor-509\">\n\t\t\t\t<div className=\"elementor-element elementor-element-e983b0d e-flex e-con-boxed e-con e-parent\" data-id=\"e983b0d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div className=\"e-con-inner\">\n\t\t\t\t<div className=\"elementor-element elementor-element-1d1eb23 elementor-widget elementor-widget-html\" data-id=\"1d1eb23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div className=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\">})()}\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\">})()}\n<style key=\"1\">\n    \/* \n       WICHTIG: Alle CSS-Regeln sind auf \".cv-wrapper\" beschr\u00e4nkt. \n    *\/\n    .cv-wrapper {\n        --bg-color: #ffffff;\n        --text-main: #0b0b0b;\n        --text-muted: #737373;\n        --border-color: #e5e5e5;\n        --surface-color: #f4f4f4;\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        background-color: var(--bg-color);\n        color: var(--text-main);\n        line-height: 1.4;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        overflow-x: hidden;\n        padding: 0;\n        margin: 0;\n        width: 100%;\n        box-sizing: border-box;\n    }\n    .cv-wrapper *,\n    .cv-wrapper *::before,\n    .cv-wrapper *::after {\n        box-sizing: inherit;\n    }\n    .cv-wrapper a {\n        color: inherit;\n        text-decoration: none;\n        transition: color 0.2s;\n    }\n    .cv-wrapper .cv-container {\n        max-width: 1400px;\n        margin: 0 auto;\n        padding: 0 3rem;\n        width: 100%;\n    }\n    \/* --- Header Section --- *\/\n    .cv-wrapper .top-nav {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 2rem 0;\n        font-size: 0.85rem;\n        font-weight: 700;\n        border: none;\n        margin: 0;\n    }\n    .cv-wrapper .logo {\n        font-size: 1.25rem;\n        font-weight: 900;\n        letter-spacing: -0.05em;\n        margin: 0;\n    }\n    .cv-wrapper .hero {\n        text-align: center;\n        padding-bottom: 2rem;\n        border-bottom: 1px solid var(--border-color);\n        margin-bottom: 2rem;\n        margin-top: 0;\n    }\n    .cv-wrapper .hero h1 {\n        font-size: clamp(4rem, 13vw, 15.5rem);\n        font-weight: 800;\n        letter-spacing: -0.06em;\n        line-height: 0.85;\n        margin-top: 0;\n        margin-bottom: 2rem;\n        white-space: nowrap;\n        text-transform: none;\n        color: var(--text-main);\n    }\n    .cv-wrapper .hero-details {\n        display: flex;\n        justify-content: space-between;\n        font-size: 0.85rem;\n        font-weight: 600;\n        color: var(--text-muted);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin: 0;\n    }\n    .cv-wrapper .bracket-statement {\n        font-size: clamp(1.5rem, 3.5vw, 2.75rem);\n        font-weight: 700;\n        line-height: 1.25;\n        text-align: center;\n        max-width: 1000px;\n        margin: 4rem auto;\n        letter-spacing: -0.03em;\n        color: var(--text-main);\n    }\n    \/* --- 2-Column Main Layout --- *\/\n    .cv-wrapper .content-grid {\n        display: grid;\n        grid-template-columns: 350px 1fr;\n        gap: 5rem;\n        margin-bottom: 6rem;\n    }\n    .cv-wrapper .section-title {\n        font-size: 1.75rem;\n        font-weight: 800;\n        letter-spacing: -0.04em;\n        margin-top: 0;\n        margin-bottom: 2rem;\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        text-transform: uppercase;\n        color: var(--text-main);\n    }\n    .cv-wrapper aside .section-title i {\n        font-size: 1.2rem;\n        color: var(--text-main);\n    }\n    \/* --- LEFT COLUMN (Sidebar) --- *\/\n    .cv-wrapper .profile-img-placeholder {\n        width: 100%;\n        aspect-ratio: 4\/5;\n        background-color: var(--surface-color);\n        background-image: url('https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg');\n        background-size: cover;\n        background-position: center;\n        filter: grayscale(100%);\n        margin-bottom: 3rem;\n        position: relative;\n        border-radius: 8px;\n    }\n    .cv-wrapper .contact-list {\n        margin-bottom: 4rem;\n    }\n    .cv-wrapper .contact-item {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        padding: 1.2rem 0;\n        border-bottom: 1px solid var(--border-color);\n        font-size: 0.95rem;\n        font-weight: 600;\n        margin: 0;\n    }\n    .cv-wrapper .contact-item i {\n        width: 20px;\n        color: var(--text-muted);\n        text-align: center;\n    }\n    .cv-wrapper .commute-widget {\n        margin-bottom: 4rem;\n        background-color: var(--surface-color);\n        border-radius: 16px;\n        padding: 1.5rem;\n        border: 1px solid var(--border-color);\n        overflow: hidden;\n        position: relative;\n    }\n    .cv-wrapper .commute-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 1.5rem;\n    }\n    .cv-wrapper .commute-title {\n        font-size: 1.1rem;\n        font-weight: 800;\n        margin: 0;\n        letter-spacing: -0.01em;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n    }\n    .cv-wrapper .commute-title i {\n        color: var(--text-muted);\n    }\n    .cv-wrapper .commute-stats {\n        display: flex;\n        gap: 1rem;\n        margin-bottom: 1.5rem;\n    }\n    .cv-wrapper .stat-pill {\n        background-color: var(--bg-color);\n        padding: 0.5rem 1rem;\n        border-radius: 20px;\n        font-size: 0.85rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        color: #fff;\n        border: 1px solid var(--border-color);\n    }\n    \n    .cv-wrapper .stat-pill.primary {\n        background-color: #fff;\n        color: #000;\n        border-color: #fff;\n    }\n    .cv-wrapper .map-visual {\n        position: relative;\n        height: 250px;\n        width: 100%;\n        border-radius: 12px;\n        overflow: hidden;\n        border: 1px solid var(--border-color);\n    }\n    \n    .cv-wrapper .map-visual iframe {\n        width: 100%;\n        height: 100%;\n        border: 0;\n        filter: grayscale(80%) invert(100%) hue-rotate(180deg) brightness(80%) contrast(120%);\n    }\n    \/* --- RIGHT COLUMN (Main Content) --- *\/\n    \/* Timeline *\/\n    .cv-wrapper .timeline {\n        border-left: 2px solid transparent;\n        padding-left: 2.5rem;\n        margin-bottom: 4rem;\n        margin-left: 0.5rem;\n        position: relative;\n    }\n    .cv-wrapper .timeline::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -2px;\n        width: 2px;\n        height: 0;\n        background-color: var(--text-main);\n        z-index: 0;\n    }\n    .cv-wrapper .timeline.draw-line::before {\n        height: 100%;\n        transition: height 6s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .cv-wrapper .timeline-item {\n        position: relative;\n        margin-bottom: 3.5rem;\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    .cv-wrapper .timeline-item:last-child {\n        margin-bottom: 0;\n    }\n    .cv-wrapper .timeline-item::after {\n        content: '';\n        position: absolute;\n        \/* The line is positioned at left: -2px for the .timeline itself, which has padding-left: 2.5rem (~40px)\n           The border line width is 2px, so its center is at left: -1px\n           The dot is 12px wide + 2x 2px border = 16px total. So its radius to center is 8px.\n           To center the dot (radius 8px) on the line (center -1px), we offset by -2.5rem (to get to the line edge), \n           + 1px (line width), then - 8px (dot center). Visually testing calc(-2.5rem - 8.5px) or -9px. Let's try -8.5px for dead center. *\/\n        left: calc(-2.5rem - 8.5px);\n        top: 6px;\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background: var(--bg-color);\n        border: 2px solid var(--text-main);\n        box-sizing: content-box;\n        transition: transform 0.3s ease, background 0.5s ease;\n        z-index: 1;\n        opacity: 0;\n        transform: scale(0);\n    }\n    .cv-wrapper .timeline-item.revealed {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n    }\n    .cv-wrapper .timeline-item.revealed::after {\n        opacity: 1;\n        transform: scale(1);\n        background: var(--text-main);\n    }\n    .cv-wrapper .item-date {\n        font-size: 1rem;\n        font-weight: 800;\n        color: var(--text-main);\n        margin-bottom: 0.5rem;\n        display: inline-block;\n    }\n    .cv-wrapper .item-title {\n        font-size: 1.1rem;\n        font-weight: 800;\n        line-height: 1.3;\n        margin-top: 0;\n        margin-bottom: 0.2rem;\n        letter-spacing: -0.01em;\n        color: var(--text-main);\n    }\n    .cv-wrapper .item-desc {\n        font-size: 1rem;\n        color: var(--text-muted);\n        font-weight: 500;\n        margin: 0;\n    }\n    \/* =========================================================\n       SCROLLMAGIC-STYLE PINNED HORIZONTAL GALLERY (GSAP)\n       ========================================================= *\/\n    .cv-wrapper .gallery-pin-wrapper {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        margin-top: 5rem;\n        margin-bottom: 5rem;\n        background-color: transparent;\n        padding: 6rem 0;\n    }\n    .cv-wrapper .gallery-sticky-container {\n        width: 100vw;\n        height: 100vh;\n        \/* Removed max-height: 800px and overflow: hidden to prevent clipping on large screens *\/\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center; \/* Center the track vertically *\/\n    }\n    .cv-wrapper .gallery-header {\n        position: absolute;\n        top: 10%;\n        left: 5%;\n        color: #0b0b0b;\n        \/* Set explicitly to black for readability on light BG *\/\n        z-index: 10;\n        pointer-events: none;\n    }\n    .cv-wrapper .gallery-header .section-title {\n        color: #0b0b0b;\n        margin-bottom: 0;\n    }\n    .cv-wrapper .gallery-header .icon-circle {\n        border-color: #0b0b0b;\n    }\n    .cv-wrapper .gallery-track {\n        display: flex;\n        gap: 3rem;\n        padding-left: 5%;\n        padding-right: 5%;\n        width: max-content;\n        will-change: transform;\n    }\n    .cv-wrapper .gallery-card {\n        flex: 0 0 auto;\n        width: 380px;\n        height: 520px;\n        perspective: 1000px; \/* enable 3D space *\/\n        cursor: pointer;\n    }\n    .cv-wrapper .card-inner {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        transform-style: preserve-3d;\n    }\n    \/* Applied when card is clicked *\/\n    .cv-wrapper .gallery-card.flipped .card-inner {\n        transform: rotateY(180deg);\n    }\n    .cv-wrapper .card-front,\n    .cv-wrapper .card-back {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        backface-visibility: hidden;\n        border-radius: 20px;\n        overflow: hidden;\n        background-color: #222;\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n    }\n    .cv-wrapper .card-front::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: 20px;\n        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);\n        transition: box-shadow 0.3s ease;\n        pointer-events: none;\n        z-index: 3;\n    }\n    .cv-wrapper .gallery-card:hover .card-front::after {\n        box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.8);\n    }\n    \/* Back side styling *\/\n    .cv-wrapper .card-back {\n        transform: rotateY(180deg);\n        background: linear-gradient(135deg, #1f1f1f, #121212);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: 2rem;\n        text-align: center;\n        color: white;\n    }\n    .cv-wrapper .card-back h4 {\n        margin: 0 0 1rem 0;\n        font-size: 2rem;\n        font-weight: 800;\n        letter-spacing: -0.02em;\n    }\n    .cv-wrapper .card-back p {\n        font-size: 1rem;\n        color: var(--text-muted);\n        line-height: 1.5;\n        margin: 0 0 2rem 0;\n    }\n    .cv-wrapper .card-back i {\n        font-size: 3rem;\n        color: rgba(255, 255, 255, 0.2);\n    }\n    .cv-wrapper .gallery-img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    .cv-wrapper .gallery-card:hover .gallery-img {\n        transform: scale(1.08);\n    }\n    .cv-wrapper .gallery-overlay {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);\n        pointer-events: none;\n        z-index: 1;\n    }\n    .cv-wrapper .gallery-content {\n        position: absolute;\n        bottom: 30px;\n        left: 30px;\n        right: 30px;\n        color: white;\n        pointer-events: none;\n        z-index: 2;\n    }\n    .cv-wrapper .gallery-content h4 {\n        margin: 0;\n        font-size: 2.5rem;\n        font-weight: 800;\n        line-height: 1.1;\n        letter-spacing: -0.03em;\n        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n    }\n    .cv-wrapper .gallery-content p {\n        margin: 0.5rem 0 0 0;\n        font-size: 0.95rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        opacity: 0.8;\n    }\n    \/* Realistic App Icons *\/\n    .cv-wrapper .tools-grid {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 2rem;\n        margin-bottom: 4rem;\n    }\n    .cv-wrapper .tool-icon-wrapper {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 0.8rem;\n        width: 80px;\n        opacity: 0;\n        transform: scale(0.8);\n    }\n    .cv-wrapper .tool-icon-wrapper.revealed {\n        opacity: 1;\n        transform: scale(1);\n        transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n    }\n    .cv-wrapper .tool-icon {\n        width: 64px;\n        height: 64px;\n        border-radius: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 2rem;\n        color: white;\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n    .cv-wrapper .tool-icon:hover {\n        transform: translateY(-4px) scale(1.05);\n        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);\n    }\n    .cv-wrapper .icon-ps {\n        background: #001e36;\n        border: 2px solid #31a8ff;\n        color: #31a8ff;\n        font-weight: 800;\n        font-family: sans-serif;\n        font-size: 1.5rem;\n    }\n    .cv-wrapper .icon-ai {\n        background: #330000;\n        border: 2px solid #ff9a00;\n        color: #ff9a00;\n        font-weight: 800;\n        font-family: sans-serif;\n        font-size: 1.5rem;\n    }\n    .cv-wrapper .icon-id {\n        background: #49021f;\n        border: 2px solid #ff3366;\n        color: #ff3366;\n        font-weight: 800;\n        font-family: sans-serif;\n        font-size: 1.5rem;\n    }\n    .cv-wrapper .icon-figma {\n        background: #1e1e1e;\n        color: white;\n        border: 1px solid #333;\n    }\n    .cv-wrapper .icon-html {\n        background: linear-gradient(135deg, #e34f26, #f06529);\n    }\n    .cv-wrapper .icon-css {\n        background: linear-gradient(135deg, #1572b6, #33a9dc);\n    }\n    .cv-wrapper .icon-ag {\n        background: #1a1a1a;\n        border: 2px solid #00ffcc;\n        color: #00ffcc;\n        font-weight: 800;\n        font-family: sans-serif;\n        font-size: 1.2rem;\n    }\n    .cv-wrapper .text-logo {\n        font-style: normal;\n        letter-spacing: -1px;\n    }\n    .cv-wrapper .tool-name {\n        font-size: 0.75rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--text-main);\n        text-align: center;\n        margin: 0;\n    }\n    \/* Title icon circle *\/\n    .cv-wrapper .icon-circle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 45px;\n        height: 45px;\n        border-radius: 50%;\n        border: 2px solid var(--text-main);\n        margin-right: 10px;\n    }\n    \/* Staggered Animations *\/\n    .cv-wrapper .stagger-anim {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    .cv-wrapper .stagger-anim.revealed {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    \/* Responsive *\/\n    @media (max-width: 1000px) {\n        .cv-wrapper .cv-container {\n            padding: 0 1.5rem;\n        }\n        .cv-wrapper .content-grid {\n            grid-template-columns: 1fr;\n            gap: 2rem;\n        }\n        .cv-wrapper .hero h1 {\n            font-size: clamp(3rem, 10vw, 5rem);\n            margin-bottom: 3rem;\n        }\n        .cv-wrapper .hero-details {\n            font-size: 0.85rem;\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 1rem;\n        }\n        .cv-wrapper .profile-img-placeholder {\n            max-width: 400px;\n            margin: 0 auto 3rem auto;\n        }\n        .cv-wrapper .contact-list {\n            margin-bottom: 2rem;\n        }\n        .cv-wrapper .timeline {\n            margin-bottom: 2rem;\n        }\n        .cv-wrapper .gallery-card {\n            width: 280px;\n            height: 400px;\n        }\n        .cv-wrapper .gallery-content h4 {\n            font-size: 1.7rem;\n        }\n        .cv-wrapper .cv-footer {\n            flex-direction: column;\n            gap: 1rem;\n            text-align: center;\n        }\n    }\n<\/style>\n\n<div className=\"cv-wrapper\" id=\"resume-wrapper\">\n    <div className=\"cv-container\">\n        \n        <header className=\"top-nav stagger-anim\">\n            <div className=\"logo\">M.E<\/div>\n            <div><a href=\"mailto:max@example.com\">Contact &rarr;<\/a><\/div>\n        <\/header>\n        <section className=\"hero stagger-anim\">\n            <h1>Max Eisele<\/h1>\n            <div className=\"hero-details\">\n                <div>Mediengestalter & Art Director<\/div>\n                <div>Based in G\u00f6ppingen, DE<\/div>\n                <div>Working Globally<\/div>\n            <\/div>\n        <\/section>\n        <div className=\"bracket-statement stagger-anim\">\n            [Ein zielstrebiger Mediengestalter, der durchdachte, funktionale Designs entwickelt und dabei k\u00fcnstlerische\n            \u00c4sthetik mit technischer Pr\u00e4zision verbindet]\n        <\/div>\n        <div className=\"content-grid\">\n            \n            <aside className=\"sidebar\">\n                <div className=\"profile-img-placeholder stagger-anim\"><\/div>\n                <div className=\"contact-list stagger-anim\">\n                    <h3 className=\"section-title\"><i className=\"fa-solid fa-address-card\"><\/i> Info<\/h3>\n                    <div className=\"contact-item\">\n                        <i className=\"fa-solid fa-envelope\"><\/i>\n                        <a href=\"mailto:max.eisele@example.com\">hallo@deine-adresse.de<\/a>\n                    <\/div>\n                    <div className=\"contact-item\">\n                        <i className=\"fa-solid fa-phone\"><\/i>\n                        <a href=\"tel:+491701234567\">+49 170 123 4567<\/a>\n                    <\/div>\n                    <div className=\"contact-item\">\n                        <i className=\"fa-solid fa-location-dot\"><\/i>\n                        <span>73073 Heiningen<\/span>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"commute-widget stagger-anim\">\n                    <div className=\"commute-header\">\n                        <h4 className=\"commute-title\"><i className=\"fa-solid fa-route\"><\/i> Commute<\/h4>\n                    <\/div>\n                    \n                    <div className=\"commute-stats\">\n                        <div className=\"stat-pill primary\">\n                            <i className=\"fa-solid fa-car\"><\/i> ~20 Min\n                        <\/div>\n                        <div className=\"stat-pill primary\">\n                            <i className=\"fa-solid fa-road\"><\/i> ~15 km\n                        <\/div>\n                    <\/div>\n                    <div className=\"map-visual\">\n                        \n                        <iframe \n                            src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m28!1m12!1m3!1d84422.38466100226!2d9.824204555896347!3d48.74955743126848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x47990c74ba898629%3A0x41ebd6671172a20!2sDonzdorf!3m2!1d48.6853634!2d9.8105786!4m5!1s0x4798e4f5a35edae1%3A0xc3f8e5d3269bdf01!2sAlnatura%20Super%20Natur%20Markt%2C%20M%C3%B6rikestra%C3%9Fe%2C%20Heubach!3m2!1d48.7905141!2d9.9324545!5e0!3m2!1sen!2sde!4v1710696000000!5m2!1sen!2sde\" \n                            allowfullscreen=\"\" \n                            loading=\"lazy\" \n                            referrerpolicy=\"no-referrer-when-downgrade\">\n                        <\/iframe>\n                    <\/div>\n                <\/div>\n            <\/aside>\n            \n            <main className=\"main-body\">\n                <section className=\"stagger-anim\">\n                    <h3 className=\"section-title\">\n                        <span className=\"icon-circle\"><i className=\"fa-solid fa-graduation-cap\"><\/i><\/span> Bildungsweg\n                    <\/h3>\n                    <div className=\"timeline\" id=\"timeline-1\">\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">02 \/ 2023 &ndash; 02 \/ 2026<\/div>\n                            <div className=\"item-title\">Mediengestalter Digital & Print | der media GmbH<\/div>\n                            <div className=\"item-desc\">Ausbildung<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">09 \/ 2019 &ndash; 05 \/ 2022<\/div>\n                            <div className=\"item-title\">Technische Schule Heidenheim<\/div>\n                            <div className=\"item-desc\">Abgangszeugnis 20.05.22<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">08 \/ 2012 &ndash; 07 \/ 2019<\/div>\n                            <div className=\"item-title\">Gemeinschaftsschule Donzdorf<\/div>\n                            <div className=\"item-desc\">Realschulabschluss 12.07.19<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">08 \/ 2008 &ndash; 07 \/ 2012<\/div>\n                            <div className=\"item-title\">Grundschule Reichenbach u.R.<\/div>\n                        <\/div>\n                    <\/div>\n                <\/section>\n                <section className=\"stagger-anim\">\n                    <h3 className=\"section-title\" style=${{ 'margin-top': '5rem', }}>\n                        <span className=\"icon-circle\"><i className=\"fa-solid fa-wrench\"><\/i><\/span> Berufserfahrung\n                    <\/h3>\n                    <div className=\"timeline\" id=\"timeline-2\">\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">11 \/ 2024 &ndash; 08 \/ 2025<\/div>\n                            <div className=\"item-title\">WNXE<\/div>\n                            <div className=\"item-desc\">Praktikum<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">03 \/ 2024 &ndash; 07 \/ 2024<\/div>\n                            <div className=\"item-title\">Vogele GmbH<\/div>\n                            <div className=\"item-desc\">Praktikum<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">09 \/ 2022 &ndash; 02 \/ 2023<\/div>\n                            <div className=\"item-title\">Deutsche Post AG<\/div>\n                            <div className=\"item-desc\">Verbundzusteller<\/div>\n                        <\/div>\n                        <div className=\"timeline-item anim-item\">\n                            <div className=\"item-date\">08 \/ 2022<\/div>\n                            <div className=\"item-title\">WMF<\/div>\n                            <div className=\"item-desc\">Logistik<\/div>\n                        <\/div>\n                    <\/div>\n                <\/section>\n                <section className=\"stagger-anim\" style=${{ 'margin-top': '5rem','margin-bottom': '2rem', }}>\n                    <h3 className=\"section-title\">\n                        <span className=\"icon-circle\"><i className=\"fa-solid fa-layer-group\"><\/i><\/span> Tools & Software\n                    <\/h3>\n                    <div className=\"tools-grid\" id=\"tools-grid\">\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-id\"><span className=\"text-logo\">Id<\/span><\/div>\n                            <span className=\"tool-name\">InDesign<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-ps\"><span className=\"text-logo\">Ps<\/span><\/div>\n                            <span className=\"tool-name\">Photoshop<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-ai\"><span className=\"text-logo\">Ai<\/span><\/div>\n                            <span className=\"tool-name\">Illustrator<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-figma\"><i className=\"fa-brands fa-figma\"><\/i><\/div>\n                            <span className=\"tool-name\">Figma<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-html\"><i className=\"fa-brands fa-html5\"><\/i><\/div>\n                            <span className=\"tool-name\">HTML5<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-css\"><i className=\"fa-brands fa-css3-alt\"><\/i><\/div>\n                            <span className=\"tool-name\">CSS3<\/span>\n                        <\/div>\n                        <div className=\"tool-icon-wrapper tool-anim\">\n                            <div className=\"tool-icon icon-ag\"><i className=\"fa-solid fa-rocket\"><\/i><\/div>\n                            <span className=\"tool-name\">Antigravity<\/span>\n                        <\/div>\n                    <\/div>\n                <\/section>\n            <\/main>\n        <\/div>\n    <\/div> \n    \n    <section className=\"gallery-pin-wrapper\" id=\"gallery-trigger\">\n        <div className=\"gallery-sticky-container\" id=\"gallery-sticky\">\n            <div className=\"gallery-header\">\n                <h3 className=\"section-title\">\n                    <span className=\"icon-circle\"><i className=\"fa-solid fa-images\"><\/i><\/span> Hobbies\n                <\/h3>\n            <\/div>\n            <div className=\"gallery-track\" id=\"gallery-track\">\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Webdesign\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>UI \/ UX Design<\/h4>\n                                <p>Web & App Interfaces<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>UI \/ UX Design<\/h4>\n                            <p>Ich gestalte digitale Nutzeroberfl\u00e4chen, die nicht nur modern aussehen, sondern auch intuitiv und benutzerfreundlich funktionieren.<\/p>\n                            <i className=\"fa-solid fa-desktop\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Print Design\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Editorial<\/h4>\n                                <p>Print & Layout<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Editorial Design<\/h4>\n                            <p>Von Magazinen bis hin zu aufw\u00e4ndigen Brosch\u00fcren \u2013 ich liebe es, Typografie und Bilder in spannende Layouts zu \u00fcbersetzen.<\/p>\n                            <i className=\"fa-solid fa-book-open\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Branding\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Branding<\/h4>\n                                <p>Corporate Identity<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Branding<\/h4>\n                            <p>Die Entwicklung starker visueller Identit\u00e4ten gibt Marken ein unverwechselbares Gesicht nach au\u00dfen.<\/p>\n                            <i className=\"fa-solid fa-fingerprint\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Social Media\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Social First<\/h4>\n                                <p>Content & Motion<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Social First<\/h4>\n                            <p>Kreativer und schnelllebiger Content, ma\u00dfgeschneidert f\u00fcr Plattformen wie Instagram, TikTok und LinkedIn.<\/p>\n                            <i className=\"fa-solid fa-hashtag\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Campaign\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Campaign<\/h4>\n                                <p>Visual Concepts<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Campaign Design<\/h4>\n                            <p>Ganzheitliche Kampagnen entwickeln, die auffallen und eine klare, zielgerichtete Botschaft kommunizieren.<\/p>\n                            <i className=\"fa-solid fa-bullseye\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Photography\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Photography<\/h4>\n                                <p>Product & Portrait<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Photography<\/h4>\n                            <p>Details einfangen und Momente festhalten. Egal ob f\u00fcr Produkte, Lifestyle oder als visuelle Grundlage f\u00fcr Designs.<\/p>\n                            <i className=\"fa-solid fa-camera\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Illustration\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Illustration<\/h4>\n                                <p>Digital Art<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Illustration<\/h4>\n                            <p>Von Vektorgrafiken bis zu freih\u00e4ndigen Skizzen, um komplexen Themen eine verst\u00e4ndliche und emotionale Form zu geben.<\/p>\n                            <i className=\"fa-solid fa-pen-nib\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Data Vis\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Data Vis<\/h4>\n                                <p>Infographics<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Data Visualization<\/h4>\n                            <p>Informationen und nackte Zahlen in visuell ansprechende und leicht verst\u00e4ndliche Infografiken verwandeln.<\/p>\n                            <i className=\"fa-solid fa-chart-pie\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Motion Graphics\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Motion<\/h4>\n                                <p>Animation & Video<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Motion Graphics<\/h4>\n                            <p>Designs zum Leben erwecken durch flie\u00dfende Animationen und kleine Interactions f\u00fcr Web und Video.<\/p>\n                            <i className=\"fa-solid fa-film\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div className=\"gallery-card\" onclick=\"this.classList.toggle('flipped')\">\n                    <div className=\"card-inner\">\n                        <div className=\"card-front\">\n                            <img decoding=\"async\" className=\"gallery-img\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" alt=\"Packaging\">\n                            <div className=\"gallery-overlay\"><\/div>\n                            <div className=\"gallery-content\">\n                                <h4>Packaging<\/h4>\n                                <p>Product Design<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"card-back\">\n                            <h4>Packaging Design<\/h4>\n                            <p>Haptische Erlebnisse schaffen. Verpackungsdesign, das im Regal heraussticht und die Markenstory erz\u00e4hlt.<\/p>\n                            <i className=\"fa-solid fa-box-open\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<footer className=\"cv-footer stagger-anim\"\n    style=${{ 'max-width': '1400px','margin': '4rem auto 4rem auto','display': 'flex','justify-content': 'center','gap': '4rem', }}>\n    <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener noreferrer\"\n        style=${{ 'color': '#0b0b0b','font-size': '6rem','transition': 'transform 0.2s ease', }}>\n        <i className=\"fa-brands fa-instagram\"><\/i>\n    <\/a>\n    <a href=\"https:\/\/linkedin.com\" target=\"_blank\" rel=\"noopener noreferrer\"\n        style=${{ 'color': '#0b0b0b','font-size': '6rem','transition': 'transform 0.2s ease', }}>\n        <i className=\"fa-brands fa-linkedin\"><\/i>\n    <\/a>\n<\/footer>\n<\/div>\n${(function(){\n    document.addEventListener(\"DOMContentLoaded\", () => {\n        \/\/ 1. Statische Bl\u00f6cke einblenden\n        const staticBlocks = document.querySelectorAll('.cv-wrapper .stagger-anim');\n        staticBlocks.forEach((block, index) => {\n            setTimeout(() => {\n                block.classList.add('revealed');\n            }, 200 + (index * 250));\n        });\n        \/\/ 2. Zeitleisten Animationen (Scroll-Triggered)\n        const timelines = document.querySelectorAll('.cv-wrapper .timeline');\n        const timelineObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    const timeline = entry.target;\n                    \/\/ Start drawing the line safely \n                    timeline.classList.add('draw-line');\n                    \/\/ Reveal the items sequentially\n                    const items = timeline.querySelectorAll('.anim-item');\n                    items.forEach((item, iIndex) => {\n                        setTimeout(() => {\n                            item.classList.add('revealed');\n                        }, 400 + (iIndex * 600)); \/\/ Delay between items\n                    });\n                    \/\/ Unobserve once triggered so it doesn't repeat backwards\n                    observer.unobserve(timeline);\n                }\n            });\n        }, {\n            threshold: 0.2 \/\/ Trigger when 20% of the timeline is visible\n        });\n        timelines.forEach(timeline => {\n            timelineObserver.observe(timeline);\n        });\n        \/\/ 3. Icons einblenden\n        const tools = document.querySelectorAll('.cv-wrapper .tool-anim');\n        setTimeout(() => {\n            tools.forEach((tool, index) => {\n                setTimeout(() => {\n                    tool.classList.add('revealed');\n                }, index * 150);\n            });\n        }, 1800);\n        \/\/ ==========================================\n        \/\/ SCROLLMAGIC \/ GSAP PINNED GALLERY ANIMATION\n        \/\/ ==========================================\n        \/\/ Register GSAP ScrollTrigger\n        if (typeof ScrollTrigger !== 'undefined') {\n            gsap.registerPlugin(ScrollTrigger);\n            const track = document.getElementById(\"gallery-track\");\n            if (track) {\n                \/\/ Calculate how far the track needs to move based on its total width minus viewport width\n                function getScrollAmount() {\n                    let trackWidth = track.scrollWidth;\n                    return -(trackWidth - window.innerWidth + 100); \/\/ 100px buffer\n                }\n                \/\/ Setup the Tween: Animate the gallery track to the left\n                const tween = gsap.to(track, {\n                    x: getScrollAmount,\n                    ease: \"none\"\n                });\n                \/\/ Setup the Pin Spacer (ScrollTrigger)\n                ScrollTrigger.create({\n                    trigger: \"#gallery-trigger\", \/\/ The outer wrapper\n                    start: \"top top\",            \/\/ Pin when the top of the wrapper hits the top of the viewport\n                    end: () => `+=${getScrollAmount() * -1}`, \/\/ Scroll distance determines how long it stays pinned\n                    pin: \"#gallery-sticky\",      \/\/ The inner element that actually sticks\n                    animation: tween,            \/\/ Tie the animation to the scroll progress\n                    scrub: 1,                    \/\/ Smooth scrubbing (1 second catch-up time)\n                    invalidateOnRefresh: true,   \/\/ Recalculate on window resize\n                    markers: false               \/\/ Set to true for debugging lines\n                });\n            }\n        }\n    });\n})()}\t\t\t\t<\/div>\n\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\t\t\t\t\t`}\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'bottom' ? props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' : message_position === 'bottom' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\t\t\t\t\r\n\t\t\t\t<\/form>\r\n\t\t\t`\r\n\t\t<\/script>\r\n\r\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4264e1e5 e-flex e-con-boxed e-con e-parent\" data-id=\"4264e1e5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-41ab7d4f e-flex e-con-boxed e-con e-child\" data-id=\"41ab7d4f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68a07d56 elementor-widget elementor-widget-google_maps\" data-id=\"68a07d56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Uferweg%206%2C%20Donzdorf%2C%20Deutschland&#038;t=m&#038;z=10&#038;output=embed&#038;iwloc=near\"\n\t\t\t\t\ttitle=\"Uferweg 6, Donzdorf, Deutschland\"\n\t\t\t\t\taria-label=\"Uferweg 6, Donzdorf, Deutschland\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d9b1145 e-flex e-con-boxed e-con e-parent\" data-id=\"1d9b1145\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4a7e2693 e-flex e-con-boxed e-con e-child\" data-id=\"4a7e2693\" 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-3e4ce2cb elementor-widget elementor-widget-heading\" data-id=\"3e4ce2cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">crafting digital<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3199c70f e-flex e-con-boxed e-con e-child\" data-id=\"3199c70f\" 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-5644747d elementor-widget elementor-widget-heading\" data-id=\"5644747d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">excellence <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ded4923 elementor-widget elementor-widget-button\" data-id=\"ded4923\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-right-arrow\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Started Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-464f184c e-flex e-con-boxed e-con e-child\" data-id=\"464f184c\" 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-66ac7adf elementor-widget elementor-widget-heading\" data-id=\"66ac7adf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">for you<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2875c4a0 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"2875c4a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/aoxdesign.de\/wp-content\/uploads\/2024\/10\/MET-158-copy.jpg\" title=\"MET-158-copy.jpg\" alt=\"MET-158-copy.jpg\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\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>Kontakt let&#8217;s talk AOX Design +49 152 327 940 aoxdesignx@gmail.com Donzdorf, Deutschland crafting digital excellence Get Started Now for you<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-440","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/pages\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aoxdesign.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=440"}],"version-history":[{"count":5,"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/pages\/440\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/aoxdesign.de\/index.php?rest_route=\/wp\/v2\/pages\/440\/revisions\/447"}],"wp:attachment":[{"href":"https:\/\/aoxdesign.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}