{"id":170,"date":"2026-08-14T16:45:30","date_gmt":"2026-08-14T14:45:30","guid":{"rendered":"https:\/\/amosmatthaeus.com\/?page_id=170"},"modified":"2026-09-24T11:48:09","modified_gmt":"2026-09-24T09:48:09","slug":"home","status":"publish","type":"page","link":"https:\/\/amosmatthaeus.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n  .sofia-portfolio-wrapper {\n    position: relative;\n    max-width: 1600px;\n    margin: 20px auto 40px auto;\n    padding: 0 20px;\n  }\n\n  .sofia-slider {\n    position: relative;\n    width: 100%;\n    height: 70vh; \/* Nutzt 70% der Bildschirmh\u00f6he *\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .sofia-slide {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 0.7s ease-in-out;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .sofia-slide.active {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .sofia-slide img {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain; \/* Verhindert das Beschneiden deiner Kunstwerke *\/\n    box-shadow: 0 4px 20px rgba(0,0,0,0.03); \/* Sehr dezenter Schatten *\/\n  }\n\n  \/* Pfeile zum Bl\u00e4ttern *\/\n  .sofia-nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 15%;\n    cursor: pointer;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }\n\n  .sofia-portfolio-wrapper:hover .sofia-nav {\n    opacity: 0.3;\n  }\n\n  .sofia-nav:hover {\n    opacity: 1 !important;\n  }\n\n  .sofia-prev { left: 0; }\n  .sofia-next { right: 0; }\n\n  .sofia-nav span {\n    font-size: 2.5rem;\n    font-weight: 200;\n    color: #111;\n    font-family: sans-serif;\n  }\n\n  \/* Punkte-Navigation unten *\/\n  .sofia-dots {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    margin-top: 25px;\n  }\n\n  .sofia-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: #ccc;\n    cursor: pointer;\n    transition: background 0.3s;\n  }\n\n  .sofia-dot.active {\n    background: #111;\n  }\n<\/style>\n\n<div class=\"sofia-portfolio-wrapper\">\n  <div class=\"sofia-slider\">\n    <!-- Hier f\u00fcgst du deine Bild-URLs ein -->\n    <div class=\"sofia-slide active\"><img decoding=\"async\" src=\"URL_ZU_DEINEM_BILD_1.jpg\" alt=\"Werk 1\"><\/div>\n    <div class=\"sofia-slide\"><img decoding=\"async\" src=\"URL_ZU_DEINEM_BILD_2.jpg\" alt=\"Werk 2\"><\/div>\n    <div class=\"sofia-slide\"><img decoding=\"async\" src=\"URL_ZU_DEINEM_BILD_3.jpg\" alt=\"Werk 3\"><\/div>\n  <\/div>\n\n  <!-- Navigations-Pfeile -->\n  <div class=\"sofia-nav sofia-prev\" id=\"sofia-prev\"><span>\u276e<\/span><\/div>\n  <div class=\"sofia-nav sofia-next\" id=\"sofia-next\"><span>\u276f<\/span><\/div>\n\n  <!-- Navigations-Punkte -->\n  <div class=\"sofia-dots\" id=\"sofia-dots\"><\/div>\n<\/div>\n\n<script>\n  (function() {\n    let current = 0;\n    const slides = document.querySelectorAll('.sofia-slide');\n    const dotsContainer = document.getElementById('sofia-dots');\n    \n    if(!slides.length) return;\n\n    \/\/ Erstelle Punkte passend zur Anzahl der Bilder\n    slides.forEach((_, idx) => {\n      const dot = document.createElement('div');\n      dot.className = 'sofia-dot' + (idx === 0 ? ' active' : '');\n      dot.addEventListener('click', () => goToSlide(idx));\n      dotsContainer.appendChild(dot);\n    });\n\n    const dots = document.querySelectorAll('.sofia-dot');\n\n    function goToSlide(index) {\n      slides[current].classList.remove('active');\n      dots[current].classList.remove('active');\n      current = (index + slides.length) % slides.length;\n      slides[current].classList.add('active');\n      dots[current].classList.add('active');\n    }\n\n    document.getElementById('sofia-prev').addEventListener('click', () => goToSlide(current - 1));\n    document.getElementById('sofia-next').addEventListener('click', () => goToSlide(current + 1));\n  })();\n<\/script>\n<div class=\"sofia-slide\"><img decoding=\"async\" src=\"https:\/\/amosmatthaeus.com\/wp-content\/uploads\/2026\/08\/img20260615_17122721.jpg\" alt=\"Titel des Werks\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u276e \u276f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-170","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/pages\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=170"}],"version-history":[{"count":9,"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/amosmatthaeus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}