{"id":11,"date":"2026-04-12T16:37:56","date_gmt":"2026-04-12T16:37:56","guid":{"rendered":"https:\/\/taughtyouso.com\/?page_id=11"},"modified":"2026-06-28T20:58:02","modified_gmt":"2026-06-28T20:58:02","slug":"start","status":"publish","type":"page","link":"https:\/\/taughtyouso.com\/","title":{"rendered":"Start"},"content":{"rendered":"\n<script>\n\n\/**\n * WordPress Camera Sweep Background Script - Version 13 (Seamless Crossfade & Dimmed Background)\n * Nahtloser Medien-Crossfade ohne Transparenz-Einbruch im Guckloch.\n * Hintergrund-Helligkeit auf 50% gedimmt f\u00fcr maximalen Kontrast.\n * (c) Taughtyouso UG (haftungsbeschr\u00e4nkt) 2026\n *\/\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. KONFIGURATION\n    \/\/ WICHTIG: Hier die URL zu Ihrem transparenten Masken-PNG eintragen!\n    const maskImageURL = 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/06\/outlined-sw-large-transparent.png';\n\n    const mediaList = [\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_1k7v1r1k7v1r1k7v-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Sanfte_Wellen_Video_Generiert.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-1-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_i790qmi790qmi790-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_a1aemda1aemda1ae-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_202604062334.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Ba-86-A-4-E-9-5-Ccb-4-D-1-D-A-64-A-8286-B-9-B-82835.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/100-C-83-E-0-7838-4-E-21-8573-Bdd-99031934-C.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_Loop_Sanfte_Wellen_am_Strand.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/E-64661-E-8-A-0-E-4-4-Cd-4-8-Ac-0-7-F-6-Dd-282-Bbee.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-scaled.jpg' }\n    ];\n\n    const textLines = [\n        \"Hey Du!\",\n        \"Was machst Du hier?\",\n        \"Das ist einfach nur eine weitere Firmenhomepage\",\n        \"Die Homepage von taughtyouso\",\n        \"Die betreiben die Quizplattform quoozle.com\",\n        \"Die ist gut \u2013 ja \u2013 wirklich gut!\",\n        \"Aber sonst gibt es hier nichts zu sehen\",\n        \"Verschwende nicht Dein Leben\",\n        \"Surf weiter!\",\n        \"(...)\",\n        \"(..)\",\n        \"(.)\",\n        \"Hey, Du bist ja noch immer hier!\",\n        \"Zuerst einmal: Ich widme diese Webseite Tatjana, die ich vor zwei Jahren in St. Barth getroffen habe.\",\n        \"Spa\u00df beiseite. Das war nat\u00fcrlich ein Zitat aus 39,90 oder 99 Francs.\",\n        \"Kennst Du nicht? Solltest Du Dir anschauen\",\n        \"Jedenfalls, wenn Du etwas mit Werbung zu tun hast\",\n        \"Man sollte immer damit anfangen, die Stimmung mit einem bl\u00f6den Witz aufzulockern\",\n        \"Aber die eigentliche Frage ist nat\u00fcrlich trotzdem:\",\n        \"Was willst Du wirklich hier?\",\n        \"Vermutlich kennst Du mich pers\u00f6nlich aus dem Real Life?\",\n        \"Oder ist es wirklich etwas Gesch\u00e4ftliches?\",\n        \"Falls ja: Versuch mal E-Mail oder LinkedIn\",\n        \"Wenn Du Dich \u00fcber Quoozle informieren willst \u2013 schau oben in Produkte\",\n        \"Ganz ehrlich: Hier gibt es gerade nat\u00fcrlich nur Quoozle \u2013 aber was soll's\",\n        \"Das ist wirklich gut \u2013 glaube ich wenigstens\",\n        \"Aber nat\u00fcrlich kriege ich sowieso raus, was Dich interessiert\",\n        \"Weil ich das hier tracke. Aber keine Angst \u2013 mache ich selbst\",\n        \"Mit Matomo \u2013 das ist also nicht Teil irgendeiner Weltverschw\u00f6rung\",\n        \"Versprochen. (Obwohl das nat\u00fcrlich alle sagen w\u00fcrden)\",\n        \"Nun aber \u2013 es war mir eine Ehre!\",\n        \"Bis bald!\",\n        \"Ach ja \u2013 mein Name ist Nils Peters\"\n    ];\n\n    const sweepDuration = 8000; \n    const fadeDuration = 1500;  \n    const textDisplayDuration = 5200; \n    const textPauseDuration = 1800;   \n\n    \/\/ 2. CONTAINER ERSTELLEN\n    const container = document.createElement('div');\n    container.id = 'camera-sweep-container';\n    Object.assign(container.style, {\n        position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: '-1', overflow: 'hidden', backgroundColor: '#ffffff'\n    });\n    document.body.appendChild(container);\n\n    \/\/ VIGNETTE\n    const vignette = document.createElement('div');\n    vignette.id = 'sweep-vignette';\n    Object.assign(vignette.style, {\n        position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', zIndex: '20', pointerEvents: 'none',\n        background: 'radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)'\n    });\n    container.appendChild(vignette);\n\n    \/\/ TEXT ELEMENT\n    const textOverlay = document.createElement('div');\n    textOverlay.id = 'sweep-text-overlay';\n    container.appendChild(textOverlay);\n\n    \/\/ 3. CSS DESIGN-REGELN (MIT 50% HELLIGKEITS-FILTER)\n    const style = document.createElement('style');\n    style.innerHTML = `\n        #camera-sweep-container .sweep-layer {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n            transition: opacity ${fadeDuration}ms ease-in-out;\n            will-change: opacity;\n        }\n        \n        \/* HINTERGRUND-EBENE AUF 50% HELLIGKEIT RECHTLICH GEDIMMT *\/\n        #camera-sweep-container .sweep-layer.base {\n            filter: brightness(0.5);\n        }\n        #camera-sweep-container .sweep-layer.base.active { opacity: 1; z-index: 1; }\n        \n        \/* OVERLAY CONTAINER MIT 75% MASKE *\/\n        #camera-sweep-container .sweep-layer.overlay {\n            isolation: isolate; \n            transform: translateZ(0); \n            -webkit-transform: translateZ(0);\n            backface-visibility: hidden;\n            -webkit-backface-visibility: hidden;\n            \n            -webkit-mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            -webkit-mask-image: url('${maskImageURL}');\n            mask-image: url('${maskImageURL}');\n            -webkit-mask-size: 75%;\n            mask-size: 75%;\n            -webkit-mask-position: center;\n            mask-position: center;\n            -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n            -webkit-mask-type: alpha;\n            mask-type: alpha;\n        }\n        \n        \/* DAS GEW\u00c4HLTE VIDEO IM GUCKLOCH IST ZU 100% DECKEND SICHTBAR *\/\n        #camera-sweep-container .sweep-layer.overlay.active { opacity: 1; z-index: 2; }\n        \n        #camera-sweep-container .sweep-media {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            will-change: transform, filter;\n        }\n\n        \/* TEXT STYLING *\/\n        #sweep-text-overlay {\n            position: absolute; top: 50%; left: 50%; z-index: 25; color: #ffffff;\n            font-family: var(--wp--preset--font-family--heading), \"Arial Black\", Impact, sans-serif;\n            font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1.2; text-align: center;\n            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.4); width: 90%; max-width: 800px;\n            pointer-events: none; transform: translate(-50%, -50%); will-change: transform;\n        }\n        @media (max-width: 768px) { #sweep-text-overlay { font-size: 1.15rem; } }\n\n        .ydkj-puff-wrapper { display: inline-block; width: 100%; opacity: 0; will-change: transform, opacity, filter; }\n        .ydkj-active { animation: ydkjLinearDrift ${textDisplayDuration}ms linear forwards; }\n        .ydkj-active .ydkj-puff-wrapper { animation: ydkjPuffExplosion ${textDisplayDuration}ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }\n\n        @keyframes ydkjLinearDrift {\n            0% { transform: translate(calc(-50% + var(--startX)), calc(-50% + var(--startY))); }\n            100% { transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))); }\n        }\n        @keyframes ydkjPuffExplosion {\n            0% { opacity: 0; transform: scale(0.7); filter: blur(5px); }\n            15% { opacity: 1; transform: scale(1); filter: blur(0px); }\n            78% { opacity: 1; transform: scale(1.02); filter: blur(0px); }\n            100% { opacity: 0; transform: scale(3.0); filter: blur(12px); }\n        }\n\n        body, .site, #page, .site-content, #content, .main-container, .elementor-page {\n            background-color: transparent !important;\n        }\n    `;\n    document.head.appendChild(style);\n\n    \/\/ 4. MOTION-MATRIZEN\n    const baseDesktopMovements = [\n        { start: 'scale(1.5) rotate(6deg) translate(-4%, -1%)', startBlur: '4px', end: 'scale(1.3) rotate(-3deg) translate(4%, 1%)', endBlur: '0px' },\n        { start: 'scale(1.3) rotate(-5deg) translate(4%, -2%)', startBlur: '0px', end: 'scale(1.6) rotate(4deg) translate(-4%, 2%)', endBlur: '5px' },\n        { start: 'scale(1.6) rotate(4deg) translate(-2%, 2%)', startBlur: '3px', end: 'scale(1.3) rotate(-4deg) translate(2%, -2%)', endBlur: '0px' },\n        { start: 'scale(1.4) rotate(-4deg) translate(-4%, 0%)', startBlur: '0px', end: 'scale(1.5) rotate(5deg) translate(4%, 0%)', endBlur: '3px' }\n    ];\n    const baseMobileMovements = [\n        { start: 'scale(2.1) rotate(6deg) translate(-18%, -1%)', startBlur: '5px', end: 'scale(1.9) rotate(-4deg) translate(18%, 2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-5deg) translate(16%, -2%)', startBlur: '0px', end: 'scale(2.2) rotate(5deg) translate(-16%, 2%)', endBlur: '6px' },\n        { start: 'scale(2.2) rotate(4deg) translate(-20%, 1%)', startBlur: '4px', end: 'scale(1.9) rotate(-5deg) translate(20%, -1%)', endBlur: '0px' },\n        { start: 'scale(1.9) rotate(-6deg) translate(18%, -2%)', startBlur: '0px', end: 'scale(2.1) rotate(6deg) translate(-18%, 2%)', endBlur: '4px' }\n    ];\n\n    const overlayDesktopMovements = [\n        { start: 'scale(2.2) rotate(-3deg) translate(4%, 1%)', startBlur: '0px', end: 'scale(2.5) rotate(6deg) translate(-4%, -1%)', endBlur: '4px' },\n        { start: 'scale(2.5) rotate(4deg) translate(-4%, 2%)', startBlur: '5px', end: 'scale(2.0) rotate(-5deg) translate(4%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-4deg) translate(2%, -2%)', startBlur: '0px', end: 'scale(2.4) rotate(4deg) translate(-2%, 2%)', endBlur: '3px' },\n        { start: 'scale(2.3) rotate(5deg) translate(4%, 0%)', startBlur: '3px', end: 'scale(2.1) rotate(-4deg) translate(-4%, 0%)', endBlur: '0px' }\n    ];\n    const overlayMobileMovements = [\n        { start: 'scale(2.9) rotate(-4deg) translate(18%, 2%)', startBlur: '0px', end: 'scale(3.2) rotate(6deg) translate(-18%, -1%)', endBlur: '5px' },\n        { start: 'scale(3.2) rotate(5deg) translate(-16%, 2%)', startBlur: '6px', end: 'scale(2.8) rotate(-5deg) translate(16%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.8) rotate(-5deg) translate(20%, -1%)', startBlur: '0px', end: 'scale(3.2) rotate(4deg) translate(-20%, 1%)', endBlur: '4px' },\n        { start: 'scale(3.1) rotate(6deg) translate(-18%, 2%)', startBlur: '4px', end: 'scale(2.8) rotate(-6deg) translate(18%, -2%)', endBlur: '0px' }\n    ];\n\n    let currentBaseIdx = -1, currentOverlayIdx = -1;\n    let baseMovementCounter = 0, overlayMovementCounter = 0;\n    let activeBaseLayer = null, activeOverlayLayer = null;\n\n    \/\/ 5. MEDIEN ENGINE (NAHTLOSER OVERLAP-CROSSFADE FIX)\n    function executeSweep(isOverlay) {\n        if (mediaList.length === 0) return;\n\n        let chosenIdx;\n        if (!isOverlay) {\n            let nextBase = currentBaseIdx;\n            while (nextBase === currentBaseIdx || nextBase === currentOverlayIdx) {\n                nextBase = Math.floor(Math.random() * mediaList.length);\n            }\n            currentBaseIdx = nextBase; chosenIdx = currentBaseIdx;\n        } else {\n            let nextOverlay = currentOverlayIdx;\n            while (nextOverlay === currentOverlayIdx || nextOverlay === currentBaseIdx) {\n                nextOverlay = Math.floor(Math.random() * mediaList.length);\n            }\n            currentOverlayIdx = nextOverlay; chosenIdx = currentOverlayIdx;\n        }\n\n        const mediaItem = mediaList[chosenIdx];\n        const layer = document.createElement('div');\n        layer.className = `sweep-layer ${isOverlay ? 'overlay' : 'base'}`;\n        \n        let mediaEl;\n        if (mediaItem.type === 'video') {\n            mediaEl = document.createElement('video'); mediaEl.src = mediaItem.url;\n            mediaEl.autoplay = true; mediaEl.loop = true; mediaEl.muted = true; mediaEl.playsInline = true; \n            mediaEl.className = 'sweep-media';\n        } else {\n            mediaEl = document.createElement('img'); mediaEl.src = mediaItem.url; mediaEl.className = 'sweep-media';\n        }\n        \n        mediaEl.style.transition = `transform ${sweepDuration}ms linear, filter ${sweepDuration}ms ease-out`;\n        \n        const isMobile = window.innerWidth <= 768;\n        \n        \/\/ Zuweisung Bewegungs-Set\n        let move;\n        if (!isOverlay) {\n            const currentSet = isMobile ? baseMobileMovements : baseDesktopMovements;\n            move = currentSet[baseMovementCounter % currentSet.length]; baseMovementCounter++;\n        } else {\n            const currentSet = isMobile ? overlayMobileMovements : overlayDesktopMovements;\n            move = currentSet[overlayMovementCounter % currentSet.length]; overlayMovementCounter++;\n        }\n        \n        mediaEl.style.transform = move.start; \n        mediaEl.style.filter = `blur(${move.startBlur})`;\n        \n        layer.appendChild(mediaEl); container.appendChild(layer);\n        layer.offsetHeight; layer.classList.add('active');\n        \n        setTimeout(() => {\n            mediaEl.style.transform = move.end; mediaEl.style.filter = `blur(${move.endBlur})`;\n        }, 50);\n\n        \/\/ --- FIX: NAHTLOSE \u00dcBERBLENDUNG OHNE TRANSPARENZ-ABFALL ---\n        \/\/ Das neue Element wird dr\u00fcbergelegt und fadet ein. \n        \/\/ Das alte Element bleibt unber\u00fchrt voll sichtbar untendrunter, bis das neue zu 100% da ist.\n        if (!isOverlay) {\n            const oldLayer = activeBaseLayer; activeBaseLayer = layer;\n            if (oldLayer) { \n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(false), sweepDuration);\n        } else {\n            const oldLayer = activeOverlayLayer; activeOverlayLayer = layer;\n            if (oldLayer) { \n                \/\/ Das alte Masken-Video wird im Hintergrund gel\u00f6scht, erst NACHDEM das neue zu 100% eingeblendet ist\n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(true), sweepDuration);\n        }\n    }\n\n    \/\/ 6. ZEILENUMBRUCH\n    function wrapTextAtLimit(str, limit = 20) {\n        return str.split(' ').reduce((acc, word) => {\n            if (!acc.length) return [word];\n            let lastLine = acc[acc.length - 1];\n            if ((lastLine + ' ' + word).length <= limit) { acc[acc.length - 1] = lastLine + ' ' + word; } else { acc.push(word); }\n            return acc;\n        }, []).join('<br>');\n    }\n\n    \/\/ 7. TEXT ENGINE\n    let textIdx = 0;\n    function playNextTextLine() {\n        if (textLines.length === 0) return;\n        const formattedText = wrapTextAtLimit(textLines[textIdx], 20);\n        textOverlay.innerHTML = `<div class=\"ydkj-puff-wrapper\">${formattedText}<\/div>`;\n\n        const randomAngle = Math.random() * Math.PI * 2;\n        const isMobile = window.innerWidth <= 768;\n        const travelDistance = isMobile ? 60 : 120; \n\n        const startX = -Math.cos(randomAngle) * (travelDistance \/ 2);\n        const startY = -Math.sin(randomAngle) * (travelDistance \/ 2);\n        const endX = Math.cos(randomAngle) * (travelDistance \/ 2);\n        const endY = Math.sin(randomAngle) * (travelDistance \/ 2);\n\n        textOverlay.style.setProperty('--startX', `${startX}px`);\n        textOverlay.style.setProperty('--startY', `${startY}px`);\n        textOverlay.style.setProperty('--endX', `${endX}px`);\n        textOverlay.style.setProperty('--endY', `${endY}px`);\n\n        textOverlay.classList.remove('ydkj-active');\n        textOverlay.offsetHeight; textOverlay.classList.add('ydkj-active');\n\n        textIdx = (textIdx + 1) % textLines.length;\n        setTimeout(playNextTextLine, textDisplayDuration + textPauseDuration);\n    }\n\n    \/\/ START\n    executeSweep(false);\n    setTimeout(function() { executeSweep(true); }, sweepDuration \/ 2);\n    setTimeout(function() { playNextTextLine(); }, 1500);\n});\n\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":62,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":27,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/media\/62"}],"wp:attachment":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}