{"id":2934,"date":"2025-12-27T14:26:08","date_gmt":"2025-12-27T13:26:08","guid":{"rendered":"https:\/\/rakusoft.com\/wordpress\/?page_id=2934"},"modified":"2025-12-27T15:24:56","modified_gmt":"2025-12-27T14:24:56","slug":"fotobuch","status":"publish","type":"page","link":"https:\/\/rakusoft.com\/wordpress\/fotobuch\/","title":{"rendered":"Fotobuch"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2934\" class=\"elementor elementor-2934\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8895438 e-con-full e-flex e-con e-parent\" data-id=\"8895438\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c63400 elementor-widget elementor-widget-html\" data-id=\"7c63400\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"fotobuch-landscape-optimiert\">\r\n    <div id=\"fb-counter\">1 \/ 3<\/div>\r\n\r\n    <div class=\"fb-page active\" onclick=\"nextPage()\">\r\n        <div class=\"fb-wrapper\">\r\n            <div class=\"fb-media\">\r\n                <img decoding=\"async\" decoding=async data-opt-id=1843099075  data-opt-src=\"https:\/\/mlncbkevfkos.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/www.rakusoft.com\/Fotobuch1\/bild10.jpg\"  src=\"data:image\/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Landschaft 1\">\r\n            <\/div>\r\n            <div class=\"fb-text\">\r\n                <h2>Reiseziel erreicht<\/h2>\r\n                <p>Dieses Querformat-Bild nutzt nun fast die gesamte Breite aus.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fb-page\" onclick=\"nextPage()\">\r\n        <div class=\"fb-wrapper\">\r\n            <div class=\"fb-media\">\r\n                <img decoding=\"async\" decoding=async data-opt-id=1967561902  data-opt-src=\"https:\/\/mlncbkevfkos.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/www.rakusoft.com\/Fotobuch1\/bild11.jpg\"  src=\"data:image\/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Landschaft 2\">\r\n            <\/div>\r\n            <div class=\"fb-text\">\r\n                <h2>Momente in der Ferne<\/h2>\r\n                <p>Die R\u00e4nder sind nun minimal, damit das Bild \"atmen\" kann, aber gro\u00df wirkt.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fb-page\" onclick=\"nextPage()\">\r\n        <div class=\"fb-wrapper\">\r\n            <div class=\"fb-media\">\r\n                <img decoding=\"async\" decoding=async data-opt-id=741100038  data-opt-src=\"https:\/\/mlncbkevfkos.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/www.rakusoft.com\/Fotobuch1\/bild13.jpg\"  src=\"data:image\/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Landschaft 3\">\r\n            <\/div>\r\n            <div class=\"fb-text\">\r\n                <h2>Ein unvergesslicher Moment<\/h2>\r\n                <p>Klicke einfach weiter, um zum Anfang zur\u00fcckzukehren.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    #fotobuch-landscape-optimiert {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n        background: #000;\r\n        z-index: 9999;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n    }\r\n\r\n    #fb-counter {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 30px;\r\n        color: rgba(255,255,255,0.5);\r\n        font-family: sans-serif;\r\n        font-size: 0.9rem;\r\n        z-index: 100;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .fb-page {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        background: #000;\r\n        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .fb-page.active {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        z-index: 10;\r\n    }\r\n\r\n    \/* Der Bl\u00e4tter-Effekt: Seite schwingt elegant weg *\/\r\n    .fb-page.prev {\r\n        opacity: 0;\r\n        transform: translateX(-100%) rotate(-3deg) scale(0.9);\r\n        z-index: 5;\r\n    }\r\n\r\n    .fb-wrapper {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 100vw;\r\n        height: 100vh;\r\n    }\r\n\r\n    .fb-media {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        \/* Optimierung f\u00fcr Landscape: Mehr Breite, mehr H\u00f6he *\/\r\n        width: 98vw; \r\n        height: 82vh; \r\n    }\r\n\r\n    .fb-media img {\r\n        max-width: 96%; \/* Minimaler Rand links\/rechts *\/\r\n        max-height: 100%; \/* Nutzt die 82vh voll aus *\/\r\n        object-fit: contain;\r\n        box-shadow: 0 10px 40px rgba(0,0,0,0.8);\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n\r\n    .fb-text {\r\n        height: 12vh; \/* Festgelegter Raum f\u00fcr den Text unter dem Bild *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        text-align: center;\r\n        color: white;\r\n        font-family: 'Segoe UI', sans-serif;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    h2 { font-size: clamp(1.1rem, 2.5vw, 1.8rem); margin: 0; font-weight: 300; color: #fff; }\r\n    p { font-size: clamp(0.8rem, 1.2vw, 1rem); color: #888; margin: 5px 0 0; }\r\n<\/style>\r\n\r\n<script>\r\n    let currentIdx = 0;\r\n    const pages = document.querySelectorAll('.fb-page');\r\n    const counter = document.getElementById('fb-counter');\r\n\r\n    function updateCounter() {\r\n        counter.innerText = (currentIdx + 1) + \" \/ \" + pages.length;\r\n    }\r\n\r\n    function nextPage() {\r\n        pages[currentIdx].classList.remove('active');\r\n        pages[currentIdx].classList.add('prev');\r\n        \r\n        currentIdx = (currentIdx + 1) % pages.length;\r\n        \r\n        if (currentIdx === 0) {\r\n            pages.forEach(p => p.classList.remove('prev'));\r\n        }\r\n\r\n        pages[currentIdx].classList.remove('prev');\r\n        pages[currentIdx].classList.add('active');\r\n        updateCounter();\r\n    }\r\n\r\n    updateCounter();\r\n<\/script>\t\t\t\t<\/div>\n\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>1 \/ 3 Reiseziel erreicht Dieses Querformat-Bild nutzt nun fast die gesamte Breite aus. Momente in der Ferne Die R\u00e4nder sind nun minimal, damit das Bild &#8222;atmen&#8220; kann, aber gro\u00df wirkt. Ein unvergesslicher Moment Klicke einfach weiter, um zum Anfang zur\u00fcckzukehren.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2934","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/pages\/2934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/comments?post=2934"}],"version-history":[{"count":10,"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/pages\/2934\/revisions"}],"predecessor-version":[{"id":2967,"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/pages\/2934\/revisions\/2967"}],"wp:attachment":[{"href":"https:\/\/rakusoft.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}