{"id":2,"date":"2025-08-10T22:13:29","date_gmt":"2025-08-10T22:13:29","guid":{"rendered":"https:\/\/beta.redcat-media.de\/?page_id=2"},"modified":"2025-10-20T14:53:33","modified_gmt":"2025-10-20T14:53:33","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/beta.redcat-media.de\/","title":{"rendered":"Sample Page"},"content":{"rendered":"<section class=\"bde-section-2-100 bde-section hero-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-2-107 oxy-container hero-text-container\"><h1 class=\"oxy-text-2-104 oxy-text text-1\">\nBranding. <br>Webdesign. Wirkung.\n<\/h1><div class=\"oxy-text-2-108 oxy-text hero-subtext\">\nWebsites die gefunden werden und Umsatz steigern\n<\/div><div class=\"oxy-container-2-461 oxy-container btn-container\"><div class=\"bde-code-block-2-460 bde-code-block\">\n\n  <a href=\"#\" class=\"button2\" style=\"--clr: #fff\">\n  <span class=\"button2__icon-wrapper\">\n    <svg\n      viewBox=\"0 0 14 15\"\n      fill=\"none\"\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n      class=\"button2__icon-svg\"\n      width=\"10\"\n    >\n      <path\n        d=\"M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z\"\n        fill=\"currentColor\"\n      ><\/path>\n    <\/svg>\n\n    <svg\n      viewBox=\"0 0 14 15\"\n      fill=\"none\"\n      width=\"10\"\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n      class=\"button2__icon-svg button2__icon-svg--copy\"\n    >\n      <path\n        d=\"M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z\"\n        fill=\"currentColor\"\n      ><\/path>\n    <\/svg>\n  <\/span>\n  <span class=\"button2__text\">\n    Buche ein 15-min Gespr\u00e4ch<br>\n    <span style=\"font-size:10px; font-weight:300;\">Kostenlos und unverbindlich<\/span>\n  <\/span>\n<\/a>\n\n<style>\n.button2 {\n  line-height: 1.2;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  background-color: #fff;\n  color: #000;\n  border-radius: 10rem;\n  font-weight: 600;\n  padding: 0.75rem 1.5rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: background-color 0.3s, color 0.3s;\n  border: 2px solid var(--clr);\n}\n\n.button2__text {\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  line-height: 1.2;\n}\n\n.button2__icon-wrapper {\n  flex-shrink: 0;\n  width: 25px;\n  height: 25px;\n  position: relative;\n  color: #fff;\n  background-color: #000;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  overflow: hidden;\n}\n\n.button2:hover {\n  background-color: #000;\n  color: #fff;\n}\n\n.button2:hover .button2__icon-wrapper {\n  color: #000;\n  background-color: #fff;\n}\n\n.button2__icon-svg--copy {\n  position: absolute;\n  transform: translate(-150%, 150%);\n}\n\n.button2:hover .button2__icon-svg:first-child {\n  transition: transform 0.3s ease-in-out;\n  transform: translate(150%, -150%);\n}\n\n.button2:hover .button2__icon-svg--copy {\n  transition: transform 0.3s ease-in-out 0.1s;\n  transform: translate(0);\n}\n<\/style>\n\n\n\n<\/div><div class=\"bde-code-block-2-462 bde-code-block\">\n\n  <a href=\"#\" class=\"button1\" style=\"--clr: #000\">\n  <span class=\"button1__icon-wrapper\">\n    <svg\n      viewBox=\"0 0 14 15\"\n      fill=\"none\"\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n      class=\"button1__icon-svg\"\n      width=\"10\"\n    >\n      <path\n        d=\"M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z\"\n        fill=\"currentColor\"\n      ><\/path>\n    <\/svg>\n\n    <svg\n      viewBox=\"0 0 14 15\"\n      fill=\"none\"\n      width=\"10\"\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n      class=\"button1__icon-svg button1__icon-svg--copy\"\n    >\n      <path\n        d=\"M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z\"\n        fill=\"currentColor\"\n      ><\/path>\n    <\/svg>\n  <\/span>\nReferenzen ansehen<\/a>\n\n<style>\n.button1 {\n  line-height: 1.2;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  background-color: #000;\n  color: #fff;\n  border-radius: 10rem;\n  font-weight: 600;\n  padding: 1rem 1.5rem;\n  padding-left: 20px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: background-color 0.3s, color 0.3s;\n  border: 2px solid var(--clr);\n  min-height: 60px;\n  width: 100%;\n  max-width: 260px;\n  box-sizing: border-box;\n}\n\n.button1__icon-wrapper {\n  flex-shrink: 0;\n  width: 25px;\n  height: 25px;\n  position: relative;\n  color: #000;\n  background-color: #fff;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  overflow: hidden;\n}\n\n.button1:hover {\n  background-color: #fff;\n  color: #000;\n}\n\n.button1:hover .button1__icon-wrapper {\n  color: #fff;\n  background-color: #000;\n}\n\n.button1__icon-svg--copy {\n  position: absolute;\n  transform: translate(-150%, 150%);\n}\n\n.button1:hover .button1__icon-svg:first-child {\n  transition: transform 0.3s ease-in-out;\n  transform: translate(150%, -150%);\n}\n\n.button1:hover .button1__icon-svg--copy {\n  transition: transform 0.3s ease-in-out 0.1s;\n  transform: translate(0);\n}\n<\/style>\n\n\n\n<\/div><\/div><div class=\"bde-fancy-container-2-102 bde-fancy-container hero-container\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-2-144 bde-code-block slider\">\n\n  <div class=\"marquee\">\n  <div class=\"marquee__track\">\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/igor-miske-JVSgcV8_vb4-unsplash-1-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/Perspective-Website-PSD-Mock-Up-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/ph-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/white-office-couch-with-funny-emoji-pillow-picjumbo-com-scaled-1-1024x683.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/ant-rozetsky-ATwNXFbzX3A-unsplash-1024x683.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/textildruckbg-1024x505.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/igor-miske-JVSgcV8_vb4-unsplash-1-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/Perspective-Website-PSD-Mock-Up-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/ph-1024x1024.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/white-office-couch-with-funny-emoji-pillow-picjumbo-com-scaled-1-1024x683.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/ant-rozetsky-ATwNXFbzX3A-unsplash-1024x683.jpg\" alt=\"\">\n      <\/figure>\n          <figure class=\"sq\">\n        <img decoding=\"async\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/textildruckbg-1024x505.jpg\" alt=\"\">\n      <\/figure>\n      <\/div>\n<\/div>\n\n\n\n<\/div>\n<\/div><\/div><\/div>\n<\/section><section class=\"bde-section-2-464 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><img decoding=\"async\" class=\"oxy-image-2-463 oxy-image logo-icon\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/10\/logo-1.svg\" loading=\"lazy\"><\/div>\n<\/section><section class=\"bde-section-2-227 bde-section about-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-2-229 bde-div about\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-231 bde-div about-text\">\n  \n  \n\t\n\n\n\n<div class=\"oxy-text-2-233 oxy-text text-about reveal-words\">\nSeit 2014 entwickeln wir Websites und Onlineshops, die nicht nur gut aussehen, sondern mehr Anfragen und Umsatz bringen.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-code-block-2-262 bde-code-block service-cards\">\n\n  \n<!-- ====== HTML ====== -->\n<div class=\"cards-wrapper\">\n  <div class=\"cards-container\" id=\"cardsArea\">\n          <div class=\"card card-1\" data-rotation=\"-2\">\n        <div class=\"card-inner\">\n          <div class=\"card-image\" style=\"background-image:url('https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/textildruckbg-1024x505.jpg');\"><\/div>\n\n          <div class=\"card-content\">\n            <h2 class=\"card-title\">Branding<\/h2>\n            <p class=\"card-subtitle\">Deine Marke. Dein Stil. Dein Wiedererkennungswert.<\/p>\n          <\/div>\n\n                      <button class=\"card-add-btn\" type=\"button\" aria-label=\"Branding\">+<\/button>\n                  <\/div>\n      <\/div>\n          <div class=\"card card-2\" data-rotation=\"-2\">\n        <div class=\"card-inner\">\n          <div class=\"card-image\" style=\"background-image:url('https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/Webdesign-2.webp');\"><\/div>\n\n          <div class=\"card-content\">\n            <h2 class=\"card-title\">Websites &amp; E-Commerce<\/h2>\n            <p class=\"card-subtitle\">Komplexes klar dargestellt \u2013 von der Idee bis zur fertigen Website.<\/p>\n          <\/div>\n\n                      <button class=\"card-add-btn\" type=\"button\" aria-label=\"Websites &amp; E-Commerce\">+<\/button>\n                  <\/div>\n      <\/div>\n          <div class=\"card card-3\" data-rotation=\"0\">\n        <div class=\"card-inner\">\n          <div class=\"card-image\" style=\"background-image:url('https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/seomockup-1024x683.webp');\"><\/div>\n\n          <div class=\"card-content\">\n            <h2 class=\"card-title\">SEO<\/h2>\n            <p class=\"card-subtitle\">Deine Kunden suchen \u2013 wir sorgen daf\u00fcr, dass sie dich finden.<\/p>\n          <\/div>\n\n                      <button class=\"card-add-btn\" type=\"button\" aria-label=\"SEO\">+<\/button>\n                  <\/div>\n      <\/div>\n          <div class=\"card card-4\" data-rotation=\"2\">\n        <div class=\"card-inner\">\n          <div class=\"card-image\" style=\"background-image:url('https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/Google-Ads-1024x686.webp');\"><\/div>\n\n          <div class=\"card-content\">\n            <h2 class=\"card-title\">SEA<\/h2>\n            <p class=\"card-subtitle\">Deine Marke ganz oben \u2013 genau dort, wo deine Kunden suchen.<\/p>\n          <\/div>\n\n                      <button class=\"card-add-btn\" type=\"button\" aria-label=\"SEA\">+<\/button>\n                  <\/div>\n      <\/div>\n          <div class=\"card card-5\" data-rotation=\"2\">\n        <div class=\"card-inner\">\n          <div class=\"card-image\" style=\"background-image:url('https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/08\/AdobeStock_618866830_Preview.jpeg');\"><\/div>\n\n          <div class=\"card-content\">\n            <h2 class=\"card-title\">Social Media<\/h2>\n            <p class=\"card-subtitle\">Erreiche deine Zielgruppe genau dort, wo sie unterwegs ist.<\/p>\n          <\/div>\n\n                      <button class=\"card-add-btn\" type=\"button\" aria-label=\"Social Media\">+<\/button>\n                  <\/div>\n      <\/div>\n      <\/div>\n\n      <div class=\"scroll-indicators\">\n              <div class=\"scroll-indicator active\"><\/div>\n              <div class=\"scroll-indicator\"><\/div>\n              <div class=\"scroll-indicator\"><\/div>\n              <div class=\"scroll-indicator\"><\/div>\n              <div class=\"scroll-indicator\"><\/div>\n          <\/div>\n  <\/div>\n\n<!-- ====== CSS ====== -->\n<style>\n\/* === Wrapper === *\/\n.cards-wrapper{position:relative;width:100%;max-width:100%;margin:0 auto}\n.cards-container{\n  position:relative;height:760px; \/* etwas h\u00f6her als 700 *\/\n  width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden\n}\n\n\/* === Karte (etwas h\u00f6her) === *\/\n.card{\n  position:absolute;width:300px;height:400px; \/* vorher 300px *\/\n  border:0.5px solid rgba(230,230,230,.8);backdrop-filter:blur(5px);background-color:rgba(255,255,255,.8);\n  border-radius:6px;box-shadow:0 1px 40px rgba(0,0,0,.25);\n  cursor:grab;overflow:hidden;will-change:transform;\n  transition:transform .2s ease, box-shadow .2s ease;\n  transform:translateX(0) translateY(0) rotate(0deg);opacity:0\n}\n.card:hover{\n  cursor:grab; \/* Hand-Cursor beim Hover *\/\n}\n.card.animated{opacity:1;animation:fadeIn .3s ease-out}\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\n.card.dragging{cursor:grabbing;z-index:1000!important;box-shadow:0 30px 80px rgba(0,0,0,.35);transition:none!important}\n\n\/* === Mehr Bildfl\u00e4che bei gleicher Breite === *\/\n.card-inner{\n  position:relative;\n  display:grid;\n  grid-template-rows: auto; \/* h\u00f6heres Bild (vorher 200) *\/\n  padding:12px 12px 42px; \/* Platz f\u00fcrs Plus unten rechts *\/\n  will-change:transform;\n  \/* ENTFERNT: transition hier nicht mehr n\u00f6tig *\/\n}\n\n\/* Mobile: Mehr Padding unten f\u00fcr Plus *\/\n@media (max-width:768px){\n  .card-inner{\n    padding:12px 12px 62px; \/* 20px mehr Platz unter dem Plus *\/\n  }\n}\n.card-image{\n  height:220px;background-size:cover;background-position:center top;\n  border-radius:6px;margin-bottom:10px\n}\n.card-content{overflow:hidden}\n.card-title{\n  font-size:1.1rem;font-weight:600;line-height:1.25;color:#1a1a1a;margin-bottom:4px;\n  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\n}\n.card-subtitle{\n  font-size:clamp(0.9rem, 0.5vw + 0.5rem, 2rem);color:#666;line-height:1.35;font-weight:400;\n  \/* Ellipsis entfernt - Text wird vollst\u00e4ndig angezeigt *\/\n}\n\n\/* === Plus-Button unten rechts (sichtbar) === *\/\n.card-add-btn{\n  position:absolute;z-index:3;bottom:12px;right:12px;\n  width:40px;height:40px;border-radius:50%;\n  border:2px solid rgba(230,230,230,.6);background:rgba(255,255,255,.9);\n  backdrop-filter:blur(5px);color:#666;font-size:20px;\n  display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;\n  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease\n}\n.card-add-btn:hover{transform:scale(1.05);background:rgba(245,245,245,.95);border-color:rgba(153,153,153,.8);color:#333}\n\n\/* === Desktop Start-Positionen\/Neigungen (wie Vorlage) === *\/\n.card-4.positioned{transform:translateX(-550px) translateY(50px) rotate(-5deg);z-index:1;transition:transform .8s cubic-bezier(.34,1.56,.64,1) 0s}\n.card-1.positioned{transform:translateX(-250px) translateY(80px) rotate(-2deg);z-index:0;transition:transform .8s cubic-bezier(.34,1.56,.64,1) .1s}\n.card-2.positioned{transform:translateX(-20px) translateY(-20px) rotate(0deg);z-index:3;transition:transform .8s cubic-bezier(.34,1.56,.64,1) .2s}\n.card-3.positioned{transform:translateX(270px) translateY(70px) rotate(2deg);z-index:2;transition:transform .8s cubic-bezier(.34,1.56,.64,1) .3s}\n.card-5.positioned{transform:translateX(542px) translateY(60px) rotate(5deg);z-index:1;transition:transform .8s cubic-bezier(.34,1.56,.64,1) .4s}\n\n\/* === HOVER: Gesamte Karte wird gr\u00f6\u00dfer === *\/\n.card:hover{ \n  transform-origin: center center !important;\n  box-shadow: 0 10px 70px rgba(0,0,0,.32); \n  backdrop-filter: blur(8px);\n}\n\/* Hover-Skalierung wird im JS dynamisch hinzugef\u00fcgt *\/\n\n\/* === Scroll Indicators === *\/\n.scroll-indicators{display:none;justify-content:center;gap:8px;margin-top:20px}\n.scroll-indicator{width:8px;height:8px;border-radius:50%;background:rgba(221,221,221,.8);backdrop-filter:blur(5px);transition:all .3s ease}\n.scroll-indicator.active{background:rgba(51,51,51,.9);transform:scale(1.2)}\n\n\/* Mobile: Scroll Indicators anzeigen *\/\n@media (max-width:768px){\n  .scroll-indicators{display:flex}\n}\n\n\/* === Responsive: Feintuning Bildh\u00f6he, Kartenh\u00f6he Desktop-only erh\u00f6ht === *\/\n@media (max-width:1400px){ .card-inner{ --img-h: 220px; } }\n@media (max-width:992px){\n  .cards-container{ height: 660px; }\n  .card-inner{ --img-h: 210px; }\n}\n\/* Mobile: horizontales Scrolling; Karte bleibt 300px hoch wie zuvor *\/\n@media (max-width:768px){\n  .scroll-indicators{display:none} \/* Scroll Indicators verstecken *\/\n  \n  @media (max-width:768px){\n  .card-image{\n    height:160px;          \/* mobile Wunschh\u00f6he *\/\n  }\n}\n  \n  .cards-container{\n    height:440px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;\n    display:flex;justify-content:flex-start;align-items:center;padding:20px;gap:0\n  }\n  .card{\n    position:relative!important;min-width:230px;width:230px;height:340px;\n    margin-right:15px;scroll-snap-align:center;cursor:default;flex-shrink:0;backdrop-filter:blur(3px);\n    \/* Nur Animationen entfernen, aber Rotation beibehalten *\/\n    transition:none!important;opacity:1!important;\n    box-shadow:0 1px 40px rgba(0,0,0,.25);\n  }\n  \/* Mobile Rotationen definieren *\/\n  .card-1{ transform: rotate(-2deg) !important; }\n  .card-2{ transform: rotate(0deg) !important; }\n  .card-3{ transform: rotate(2deg) !important; }\n  .card-4{ transform: rotate(-5deg) !important; }\n  .card-5{ transform: rotate(4deg) !important; }\n  \n  \/* Plus-Button mit extra Abstand nach unten *\/\n  .card-add-btn{\n    margin-bottom: 20px;\n  }\n  \n  \/* Hover-Effekte komplett entfernen *\/\n  .card:hover{ \n    box-shadow:0 1px 40px rgba(0,0,0,.25) !important;\n    backdrop-filter: blur(3px) !important;\n  }\n  .card-inner{ --img-h: 170px; }\n  .card-2{order:1}.card-1{order:2}.card-3{order:3}.card-4{order:4}.card-5{order:5}\n  .cards-container::-webkit-scrollbar{display:none}\n  .cards-container{-ms-overflow-style:none;scrollbar-width:none}\n}\n@media (max-width:480px){\n  .cards-container{padding:20px 10px}\n  .card{margin-right:-5px;backdrop-filter:blur(2px)}\n  .card-inner{ --img-h: 160px; }\n}\n<\/style>\n\n<!-- ====== JS (Drag & Drop + Intersection Observer) ====== -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const cards = document.querySelectorAll('.card');\n  const scrollIndicators = document.querySelectorAll('.scroll-indicator');\n  const cardsContainer = document.querySelector('.cards-container');\n\n  let activeCard = null, startX = 0, startY = 0, initialTransform = '', highestZIndex = 10;\n  let isMobile = window.innerWidth <= 768;\n  let hasAnimated = false; \/\/ Flag zur Vermeidung von Doppel-Animation\n\n  initializeIntersectionObserver();\n\n  window.addEventListener('resize', () => {\n    const wasMobile = isMobile;\n    isMobile = window.innerWidth <= 768;\n    if (wasMobile !== isMobile) location.reload();\n  });\n\n  \/\/ \ud83d\udd0d Intersection Observer: Wartet bis Section sichtbar wird\n  function initializeIntersectionObserver() {\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && !hasAnimated) {\n          hasAnimated = true;\n          observer.unobserve(entry.target);\n          \n          \/\/ Starte Animation sofort wenn sichtbar\n          if (isMobile) {\n            initMobileWhenVisible();\n          } else {\n            initDesktopWhenVisible();\n          }\n        }\n      });\n    }, {\n      threshold: 0.1 \/\/ Animation startet wenn 10% sichtbar\n    });\n\n    if (cardsContainer) {\n      observer.observe(cardsContainer);\n    }\n  }\n\n  function initDesktopWhenVisible(){\n    \/\/ Einblenden + in Startposition fahren\n    setTimeout(()=>{\n      cards.forEach((card, index)=>{\n        setTimeout(()=> card.classList.add('animated'), index*50);\n        setTimeout(()=> card.classList.add('positioned'), 100 + index*100);\n      });\n    },100);\n    setTimeout(()=> {\n      setupDrag();\n      setupHover();\n    }, 1500);\n  }\n\n  function setupHover(){\n    if (isMobile) return; \/\/ Kein Hover auf Mobile\n    \n    cards.forEach(card => {\n      card.addEventListener('mouseenter', function() {\n        if (this.classList.contains('dragging')) return;\n        \n        \/\/ Aktuelle Transform auslesen und alle Werte extrahieren\n        const currentTransform = window.getComputedStyle(this).transform;\n        \n        if (currentTransform && currentTransform !== 'none') {\n          const matrix = new DOMMatrix(currentTransform);\n          const currentX = matrix.m41;\n          const currentY = matrix.m42;\n          \n          \/\/ Rotation aus der aktuellen Matrix extrahieren (nicht aus data-rotation!)\n          const currentRotation = Math.atan2(matrix.b, matrix.a) * (180 \/ Math.PI);\n          \n          \/\/ Hover-Effekt: gesamte Karte 1.05x skalieren mit AKTUELLER Position und Rotation\n          this.style.transform = `translateX(${currentX}px) translateY(${currentY}px) rotate(${currentRotation}deg) scale(1.05)`;\n        }\n      });\n      \n      card.addEventListener('mouseleave', function() {\n        if (this.classList.contains('dragging')) return;\n        \n        \/\/ Zur\u00fcck zur normalen Gr\u00f6\u00dfe mit AKTUELLER Rotation\n        const currentTransform = window.getComputedStyle(this).transform;\n        \n        if (currentTransform && currentTransform !== 'none') {\n          const matrix = new DOMMatrix(currentTransform);\n          const currentX = matrix.m41;\n          const currentY = matrix.m42;\n          \n          \/\/ Rotation aus der aktuellen Matrix extrahieren\n          const currentRotation = Math.atan2(matrix.b, matrix.a) * (180 \/ Math.PI);\n          \n          this.style.transform = `translateX(${currentX}px) translateY(${currentY}px) rotate(${currentRotation}deg)`;\n        }\n      });\n    });\n  }\n\n  function setupDrag(){\n    if (isMobile) return; \/\/ Kein Drag & Drop auf Mobile\n    \n    cards.forEach(card=>{\n      card.addEventListener('mousedown', onStart);\n      card.addEventListener('touchstart', onStart, { passive:false });\n    });\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onEnd);\n    document.addEventListener('touchmove', onMove, { passive:false });\n    document.addEventListener('touchend', onEnd);\n  }\n\n  function initMobileWhenVisible(){\n    cards.forEach((card, index)=>{\n      \/\/ Keine Animationen auf Mobile - Karten sofort sichtbar mit statischer Rotation\n      card.classList.add('animated');\n      card.classList.add('positioned');\n      \/\/ Transform wird durch CSS Mobile-Regeln gesetzt, nicht durch JS \u00fcberschreiben\n      card.style.transition = 'none'; \/\/ Nur Transitions entfernen\n    });\n  }\n\n  \/\/ Drag & Drop (Desktop)\n  function onStart(e){\n    if (isMobile) return;\n    if (e.target.classList.contains('card-add-btn')) return;\n\n    e.preventDefault();\n    activeCard = e.currentTarget;\n    initialTransform = window.getComputedStyle(activeCard).transform;\n\n    const p = e.type.includes('touch') ? e.touches[0] : e;\n    startX = p.clientX; startY = p.clientY;\n\n    activeCard.classList.add('dragging');\n    highestZIndex++; activeCard.style.zIndex = highestZIndex;\n  }\n\n  function onMove(e){\n    if (isMobile || !activeCard) return;\n    e.preventDefault();\n\n    const p = e.type.includes('touch') ? e.touches[0] : e;\n    const dx = p.clientX - startX;\n    const dy = p.clientY - startY;\n\n    \/\/ WICHTIG: Rotation aus der aktuellen Matrix extrahieren (nicht aus data-attribute!)\n    const m = new DOMMatrix(initialTransform);\n    const currentRotation = Math.atan2(m.b, m.a) * (180 \/ Math.PI);\n    const nx = m.m41 + dx;\n    const ny = m.m42 + dy;\n\n    \/\/ Aktuelle Rotation wird beibehalten (aus initialTransform)\n    activeCard.style.transform = `translateX(${nx}px) translateY(${ny}px) rotate(${currentRotation}deg)`;\n  }\n\n  function onEnd(){\n    if (isMobile || !activeCard) return;\n    activeCard.classList.remove('dragging');\n    \n    \/\/ Transition wieder aktivieren\n    setTimeout(()=>{ \n      activeCard.style.transition = 'transform .2s ease, box-shadow .2s ease'; \n    }, 10);\n    \n    activeCard = null;\n  }\n\n  document.addEventListener('selectstart', e => { if (activeCard && !isMobile) e.preventDefault(); });\n});\n<\/script>\n\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-2-261 bde-section card-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><\/div>\n<\/section><section class=\"bde-section-2-331 bde-section mockup_scale\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-2-458 bde-div mockup\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"oxy-text-2-333 oxy-text mission-text\">\nWir schaffen digitalen Mehrwert durch durchdachtes Design und pr\u00e4zise Entwicklung.\n<\/div><div class=\"bde-code-block-2-457 bde-code-block\">\n\n  <script>\n(() => {\n  function initMockupSection() {\n    const section = document.querySelector('.mockup_scale');\n    const mockup  = section?.querySelector('.mockup');\n    const text    = section?.querySelector('.mission-text');\n    if (!section || !mockup || !text) return;\n\n    gsap.registerPlugin(ScrollTrigger);\n    ScrollTrigger.getAll().forEach(t => t.kill());\n\n    \/\/ \ud83d\udc47 wir pinnen jetzt am sichtbaren Element selbst, nicht am Breakdance-Wrapper\n    const tl = gsap.timeline({\n      scrollTrigger: {\n        trigger: section,\n        start: 'top+=10% top',     \/\/ erst starten, wenn Section sichtbar wird\n        end: 'bottom+=100% top',   \/\/ bis knapp unter Viewport\n        scrub: true,\n        pin: section,              \/\/ explizit Section pinnen\n        pinSpacing: true,\n        anticipatePin: 1,\n        invalidateOnRefresh: true,\n        fastScrollEnd: true,\n        \/\/ markers: true,\n      }\n    });\n\n    tl.fromTo(mockup,\n      { scale: 5, opacity: 0 },\n      { scale: 1, opacity: 1, ease: 'power2.out', duration: 1 },\n      'mocky'\n    );\n\n    tl.fromTo(text,\n      { scale: 1 },\n      { scale: 0.2, ease: 'power2.out', duration: 1 },\n      'mocky'\n    );\n  }\n\n  \/\/ Initial aufbauen\n  document.addEventListener('DOMContentLoaded', initMockupSection);\n\n  \/\/ --- Bei Breakdance-Resizes vollst\u00e4ndig neu aufbauen ---\n  let resizeTimer;\n  function handleResize() {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(() => {\n      ScrollTrigger.killAll();\n      initMockupSection();\n      ScrollTrigger.refresh(true);\n    }, 800);\n  }\n\n  window.addEventListener('resize', handleResize);\n  window.addEventListener('orientationchange', handleResize);\n})();\n<\/script>\n\n\n\n\n\n\n  \n\n\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-2-271 bde-section referenzen-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-2-272 bde-div referenzen-titel\">\n  \n  \n\t\n\n\n\n<div class=\"oxy-text-2-274 oxy-text projekte\">\nProjekte\n<\/div><h2 class=\"oxy-text-2-273 oxy-text referenzen\">\nEin kleiner Auszug unserer Projekte\n<\/h2>\n<\/div><div class=\"bde-div-2-275 bde-div referenzen\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-283 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-276 bde-div ref-links\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"oxy-image-2-280 oxy-image heidrich\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1.webp\" loading=\"lazy\" srcset=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1.webp 1772w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1-300x175.webp 300w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1-1024x598.webp 1024w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1-768x448.webp 768w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/heidrich-1-1536x896.webp 1536w\" sizes=\"(max-width: 1772px) 100vw, 1772px\">\n<\/div><div class=\"oxy-text-2-287 oxy-text company-text\">\n<h3>Webentwicklung Website<\/h3><br>Landschaftsgestaltung Daniel Heidrich\n<\/div>\n<\/div><div class=\"bde-div-2-284 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-278 bde-div ref-rechts\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"oxy-image-2-281 oxy-image heidrich\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec.webp\" loading=\"lazy\" srcset=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec.webp 1772w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-300x175.webp 300w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-1024x598.webp 1024w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-768x448.webp 768w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-1536x896.webp 1536w\" sizes=\"(max-width: 1772px) 100vw, 1772px\">\n<\/div><div class=\"oxy-text-2-286 oxy-text company-text\">\n<h3>Webentwicklung Website<\/h3><br>CampTec GmbH\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-2-288 bde-div referenzen\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-289 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-297 bde-div ref-meyer\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"oxy-image-2-291 oxy-image heidrich\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer.webp\" loading=\"lazy\" srcset=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer.webp 1772w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer-300x175.webp 300w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer-1024x598.webp 1024w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer-768x448.webp 768w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/meyer-1536x896.webp 1536w\" sizes=\"(max-width: 1772px) 100vw, 1772px\">\n<\/div><div class=\"oxy-text-2-292 oxy-text company-text\">\n<h3>Webentwicklung Website<\/h3><br>Rechtsanwaltskanzlei Meyer<br>\n<\/div>\n<\/div><div class=\"bde-div-2-293 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2-298 bde-div ref-swnh\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"oxy-image-2-295 oxy-image heidrich\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb.webp\" loading=\"lazy\" srcset=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb.webp 1772w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb-300x175.webp 300w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb-1024x598.webp 1024w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb-768x448.webp 768w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/fcb-1536x896.webp 1536w\" sizes=\"(max-width: 1772px) 100vw, 1772px\">\n<\/div><div class=\"oxy-text-2-296 oxy-text company-text\">\n<h3>Webentwicklung Website<\/h3><br>FC Dornbreite L\u00fcbeck\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-2-299 bde-section testimonials-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-2-300 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"oxy-text-2-301 oxy-text Testimonials-subtitel\">\nKundenstimmen\n<\/div>\n<\/div><div class=\"oxy-container-2-321 oxy-container testimonials-content\"><div class=\"oxy-container-shortcode-2-320 oxy-container-shortcode testi\">  <section class=\"oxy-testi\" role=\"region\" aria-label=\"Kundenstimmen\">\n    <div class=\"oxy-testi__wrap\" data-init=\"0\">\n      <!-- Linke Spalte: H2 + Pfeile -->\n      <div class=\"oxy-testi__left\">\n        <h2 class=\"oxy-testi__headline\">Was unsere Kunden sagen<\/h2>\n        <div class=\"oxy-testi__nav\" role=\"group\" aria-label=\"Testimonials steuern\">\n          <button type=\"button\" class=\"oxy-testi__btn\" data-prev aria-label=\"Zur\u00fcck\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\n          <\/button>\n          <button type=\"button\" class=\"oxy-testi__btn\" data-next aria-label=\"Weiter\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8.59 16.59 10 18l6-6-6-6-1.41 1.41L12.17 12z\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Rechte Spalte: Slides beginnen exakt auf H2-H\u00f6he -->\n      <div class=\"oxy-testi__stage\">\n        <div class=\"oxy-testi__slides\" tabindex=\"0\">\n                    <article class=\"oxy-testi__slide\" aria-hidden=\"true\">\n            <div class=\"oxy-testi__card\">\n              <p class=\"oxy-testi__quote\"><p>Unglaublich kompetent, schnell, freundlich. Ideenreichtum gro\u00df geschrieben. <\/p>\n<\/p>\n                            <div class=\"oxy-testi__person\">\n                <img decoding=\"async\" class=\"oxy-testi__avatar\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/seet-1-150x150.webp\" alt=\"Alexander S.\">                <div>\n                  <div class=\"oxy-testi__name\">Alexander S.<\/div>\n                  <div class=\"oxy-testi__company\">Seeterrassen Dersau<\/div>                <\/div>\n              <\/div>\n            <\/div>\n          <\/article>\n                    <article class=\"oxy-testi__slide\" aria-hidden=\"true\">\n            <div class=\"oxy-testi__card\">\n              <p class=\"oxy-testi__quote\"><p>Super kompetent, freundlich und kreativ.<br \/>\nIch bin sehr zufrieden. Lieben Dank<\/p>\n<\/p>\n                            <div class=\"oxy-testi__person\">\n                <img decoding=\"async\" class=\"oxy-testi__avatar\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/waxpoint-150x150.jpg\" alt=\"Cordula M.\">                <div>\n                  <div class=\"oxy-testi__name\">Cordula M.<\/div>\n                  <div class=\"oxy-testi__company\">WaxPoint <\/div>                <\/div>\n              <\/div>\n            <\/div>\n          <\/article>\n                    <article class=\"oxy-testi__slide\" aria-hidden=\"true\">\n            <div class=\"oxy-testi__card\">\n              <p class=\"oxy-testi__quote\"><p>Sehr zuverl\u00e4ssige und vor allem qualitative Arbeit bei jeder meiner Bestellungen. Weiter so!<\/p>\n<\/p>\n                            <div class=\"oxy-testi__person\">\n                <img decoding=\"async\" class=\"oxy-testi__avatar\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/8AtZOEVB.png-150x150.webp\" alt=\"Tolga T.\">                <div>\n                  <div class=\"oxy-testi__name\">Tolga T.<\/div>\n                  <div class=\"oxy-testi__company\">L\u00fcbecker Boxclub<\/div>                <\/div>\n              <\/div>\n            <\/div>\n          <\/article>\n                  <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n   <\/div><\/div><\/div>\n<\/section><section class=\"bde-section-2-322 bde-section cta-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"oxy-container-2-330 oxy-container cta-container\"><div class=\"bde-div-2-323 bde-div cta-left\">\n  \n  \n\t\n\n\n\n<h2 class=\"oxy-text-2-324 oxy-text\">\nBereit f\u00fcr eine Website, die<br>dein Business st\u00e4rkt?\n<\/h2><div class=\"bde-icon-list-2-325 bde-icon-list\">\n<ul>\n  \n              \n    <li>\n              <div class='bde-icon-list__item-wrapper'>\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Durchdacht\n      <\/span>\n              <\/div>\n      \n    <\/li>\n\n  \n              \n    <li>\n              <div class='bde-icon-list__item-wrapper'>\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Von Anfang an sichtbar\n      <\/span>\n              <\/div>\n      \n    <\/li>\n\n  \n              \n    <li>\n              <div class='bde-icon-list__item-wrapper'>\n      \n      <span class='bde-icon-list__icon'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Zuverl\u00e4ssig\n      <\/span>\n              <\/div>\n      \n    <\/li>\n\n  <\/ul>\n\n<\/div><div class=\"bde-button-2-327 bde-button cta-btn\">\n    \n                                    \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--primary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Unverbindlich anfragen<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div><div class=\"oxy-container-2-329 oxy-container cta-right\"><img decoding=\"async\" class=\"oxy-image-2-328 oxy-image cta-img\" src=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-scaled.webp\" loading=\"lazy\" srcset=\"https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-scaled.webp 2560w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-300x204.webp 300w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-1024x696.webp 1024w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-768x522.webp 768w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-1536x1043.webp 1536w, https:\/\/beta.redcat-media.de\/wp-content\/uploads\/2025\/09\/camptec-mockup-2048x1391.webp 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\"><\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Branding. Webdesign. Wirkung. Websites die gefunden werden und Umsatz steigern Buche ein 15-min Gespr\u00e4ch Kostenlos und unverbindlich Referenzen ansehen Seit 2014 entwickeln wir Websites und Onlineshops, die nicht nur gut aussehen, sondern mehr Anfragen und Umsatz bringen. Branding Deine Marke. Dein Stil. Dein Wiedererkennungswert. + Websites &amp; E-Commerce Komplexes klar dargestellt \u2013 von der Idee [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":5,"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/beta.redcat-media.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}